大学生期末网页制作代码以及网页设计排版技巧
首先一個網頁看起來是不是高端設計的就得看排版，一般先有設計圖才可以進行下一步（編輯代碼），先把設計圖給排版出來（設計稿要是png格式），然后進行整個設計再分割出整個網站所需的版塊，比如logo、banner圖等等....
大學生網頁設計模板
愛建網為大家準備了關于大學生網頁設計模板的文章中面收集了五十多篇關于好
大學生網頁設計模板希望可以幫助大家。更多關于大學生網頁設計樓板內容請關注愛建網
篇一:用Dreamweaver制作網頁模板
用DreamweaverCS4制作網頁模板
- .制作模板
(1)在硬盤上創建一個模板網頁的文件來， 然后再該文件中新建一個名為 images的文
件突，并將所需要圖片復制倒該文件中。
(2)打開Dremwesver（DW）,創建一個HTML網頁
(3)執行菜單中的文件/另存為“模板”命令，在彈出的另存模板”對話框中設置參數單擊保
存按鈕，則模板文件被保存在站點的Templtes文件文中，文件擴展名為1.dwt。
(4)由模板生成的網頁哪些地方可以編輯，是需要預先設定的。下面設
定"arigator和content兩個可編輯區域。
(5)單擊插入欄常用"類別中的何編輯區域按鈕，然后再彈出的新建可編輯區城對話
柜中輸入名稱，單擊確定按鈕，同理，制作content可編叫區域，
(6)按 (CHl+S) 組合鍵保存模板。
二、應用模板
(1)執行菜單中的文件/新建審令。新建一個HTML網頁。然后將其保存為iderebtmle
(2)進去”資源“面板，單擊(模板)按鈕，然后選中剛才建立的網頁，單擊”應用按鈕。模
板就被應用到了新的網頁中。
(3)更新模板當模板進行了收改了以后，按CHl+S組合鍵保存模板，出現所示的更新界
面“對話框。這樣會大大提高工作效率。
三。模板始設計者帶來的好處。
模板是在DreamweverCSt中提供的一一種機制，他能夠幫助我們快速制作出一系列具有
相間風格的網頁。制作模板和制作普通網頁相問，只是不把網頁的所有部分部制作完成，
而是只把導航欄和標題欄等各個網頁共有部分制作出來作為模板中的不可騙輯區域。把中
間部分作為可編輯區域來放置網貞的具體內容。
下面我給大家展示我自己設計以及編程的一個靜態模板“大魚海棠”
首頁html:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>大魚海棠</title> <link rel="stylesheet" href="style/style.css" /> </head><body><div class="hear"><div class="logo"><img src="images/logo.png" /></div><div class="sou"><form class="searchform" method="get" target="_blank"><input name="keywords" class="search-input" placeholder="請輸入您要搜索的劇情..."></form></div><div class="login"><a href="#">登錄/注冊</a></div></div> <div class="nev"><ul><li><a href="index.html">首頁</a></li><li><a href="jianjie.html">劇情簡介</a></li><li><a href="renwu.html">人物介紹</a></li><li><a href="taici.html">經典臺詞</a></li><li><a href="liuyan.html">留言貼貼</a></li></ul> </div> <div class="banner"> <img src="images/banner.jpg" /></div> <div class="teance"><div class="nie"><ul><li class="chun"><a href="#"><img src="images/chun.jpg" /></a><P>我欠他一條命，我要還清欠他的。</P></li><li class="kun"><a href="#"><img src="images/kun.jpg" /></a><P>她和別的海豚不一樣、太聰明了。</P></li><li class="qiu"><a href="#"><img src="images/qiu.jpg" /></a><P>我會化作人間的風雨、陪伴你的。</P></li></ul> </div><div class="texe"><div class="left"><h3>大魚海棠經典臺詞</h3><p> 1、你遇見一個人，犯了一個錯，你想彌補想還清，到最后才發現你根本無力回天，犯下的罪過永遠無法彌補。我們永遠無法還清欠下的…只要錯了，就是錯了永遠無法彌補。</p><p> 2、“人要是死了，就看不見這么美的天空了。”湫望著漫天的星星自言自語。</p><p> 3、所有活著的人類，都是海里一條巨大的魚；出生的時候他們從海的此岸出發……他們的生命就像橫越大海，有時相遇，有時分開……死的時候，他們便到了岸，各去各的世界。</p><p> 4、“我記得他的樣子，我不知道他的名字，我記得他的眼神，還有他額頭上的疤”“我找的六個鐘頭，整整一個晚上。”椿來到一條白色的小魚面前。她望著小魚，小魚閉著眼，安靜的睡著。</p><p> 5、我們既不是人，也不是神，我們只是其他人。</p><p> 6、我們永遠也償還不清自己所欠下的。</p><p> 7、人生是一場旅程。我們經歷了幾次輪回，才換來這個旅程。而這個旅程很短，因此不妨大膽一些，不妨大膽一些去愛一個人，去攀一座山，去追一個夢……有很多事我都不明白。但我相信一件事。上天讓我們來到這個世上，就是為了讓我們創造奇跡。</p></div> <div class="right"><h3>椿還鯤命、誰還湫情！</h3><P>湫是這部劇里面最深情的人了吧？</P><video class="pian" controls autoplay><source src="video/qiu.mp4" /></video></div></div> </div> <div class="bottom"><P>Copyright ? 2012-2038 大魚海棠 版權所有</P></div></body> </html>樣式：
html {margin: 0px 0px 0px 0px; padding:0; font-family:"Microsoft YaHei",微軟雅黑; color:#666666; font-size:14px; } body{ margin:0; padding:0; } a{text-decoration:none;} .hear{ width:1200px; height:80px; margin:0 auto; } .hear .logo{ float:left; width:200px; height:80px; padding:10px; } .hear .sou{ width:220px; height:80px; float:left;margin-left:300px; } .hear .login{width:220px; height:80px; float:right; color:#F00; line-height:80px; text-align:center;} .hear .login a{color:#F00;} .hear .sou input{ width:200px; height:30px; color:#00F; float:left; margin:20px;} .nev{ width:1200px; height:40px; margin:0 auto; background-color:#522917;}.nev ul li{ float:left; line-height:40px; margin-left:80px; list-style:none; } .nev ul li a{text-decoration:none; color:#FFF; } .nev ul li a:hover{color:#CCC;} .banner{width:1200px; height:470px; margin:0 auto;} .banner img{ width:1200px; height:470px;} .teance{width:1200px; height:860px; margin:0 auto; background-color:#802916;} .teance .nie{ width:1100px; height:373px; margin:0 auto; padding:20px; } .teance .nie ul li{ float:left; width:335px; height:355px; margin-left:15px; list-style:none; } .teance .nie ul li img{width:180px; height:300px; margin-left:63px; } .teance .nie h2{ color:#FFF;} .teance .nie h4{ color:#FFF;} .teance .nie ul li p{ text-align:center; color:#FFF;} .teance .texe .left{ width:550px; height:422px; border-right:10px #960 solid; float:left} .teance .texe .left img{ width:550px; height:350px;} .teance .texe{ width:1100px; height:420px; margin:0 auto; border:10px #960 solid; } .teance .texe h3{padding:5px; color:#CCC;} .teance .texe p{ padding:3px; color:#CCC; font-size:6px;} .teance .texe .right{ width:510px; height:400px; float:right;} .teance .texe .right img{width:500px; height:350px;}.teance .texe .pian{ width:500px; height:280px; margin-right:12px; } .bottom{ width:1200px; height:20px; background-color:#522917; margin:0 auto;} .bottom p{ text-align:center; line-height:20px; font-size:12px; color:#999;}.xia{ width:1200px; height:380px; margin:0 auto; background-color:#802916;} .xia .son{ width:360px; margin:0 auto; color:#fff; padding-top:10px;}效果：
總結
以上是生活随笔為你收集整理的大学生期末网页制作代码以及网页设计排版技巧的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（3313）：redux的基本操
- 下一篇： React开发（125）:ant des