Ⅰ 網頁製作課程設計總結
網頁製作課程設計總結
1.設計目的
闡述該網站的設計意圖和創意，簡單介紹網站。
2.設計思想
闡述網站的整體設計思想，包括：
2.1網站整體結構規劃思想
要求闡述網站整體結構的選擇、設計的思想，繪制網站結構草圖。
2.2 主頁設計思想
要求對主頁的布局思路進行闡述和分析。
2.3子頁的設計思想
要求對子頁的設計以及網頁對象的選取思路進行闡述和分析。
3網頁詳細設計分析
要求選取一張網頁，對網頁的設計實現過程進行闡述和分析，詳細說明製作該網頁的步驟，所使用的網頁對象以及該網頁對象的操作方法。
4結論
對整個設計報告做歸納性總結，並分析設計過程中的困難及如何解決的，最後提出展望。
一、設計目的
本課程的設計目的是通過實踐使同學們經歷Dreamweaver 8開發的全過程和受到一次綜合訓練，以便能較全面地理解、掌握和綜合運用所學的知識。結合具體的開發案例，理解並初步掌握運用Dreamweaver 8可視化開發工具進行網頁開發的方法;了解網頁設計製作過程。通過設計達到掌握網頁設計、製作的技巧。了解和熟悉網頁設計的基礎知識和實現技巧。根據題目的要求，給出網頁設計方案，可以按要求，利用合適圖文素材設計製作符合要求的網頁設計作品。熟練掌握Photoshop 8、Dreamweaver 8等軟體的的操作和應用。增強動手實踐能力，進一步加強自身綜合素質。我本次主要是設計的一“新加坡之旅”為主題的網頁，針對新加坡的美麗風景做了介紹。
二、設計思想
利用Dreamweaver8.0製作一個關於“新加坡之旅”的網站，利用表格、行為、層和鏈接等網頁設計技術設計頁面。
本網站以新加坡旅遊為素材，主要講解了與新加坡景點相關的內容。首頁設風景介紹和風景欣賞兩個欄目。景點介紹設7個欄目，風景欣賞只含一個頁面。
三、網頁詳細設計分析
(一)建立布局
在這次的網頁設計中用到大量的布局，所以怎麼樣建立布局是關鍵。Dreamweaver 8是大多數人設計網頁的稱手兵器，也是眾多入門者的捷徑。特別是其在布局方面的出色表現，更受青睞。大家都知道，沒有表格的幫助，很難組織出一個協調合理的頁面。
1.點擊“ALT+F6”鍵，進入布局模式，插入布局表格。建立一個大概的布局。
2.使用背景圖片：選中該項，按瀏覽可以插入一幅准備好的圖片作為表格的背景，因為圖片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。
(二)網頁中的圖像
圖像傳輸是WWW的真正魅力所在，它與文字相比具有顯著的優點：一是直觀，人眼觀看圖像時接受信息的速度遠遠超過觀看文字時接受信息的速度;二是能更清楚地表達細節內容。正是由於這些優點，所以在進行網頁設計時圖像很受歡迎。如果網頁做得像一幅風景畫，瀏覽者一定會流連忘返(如果圖片很大，效果會適得其反)。 圖像文件的格式有幾十種，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，現在Internet Explorer和Netscape支持的、最常用的圖像格式是GIF、JPEG和BMP。
(1)在網頁中插入圖像
利用Dreamweaver 8可以方便地在網頁中插入圖像，還可以設置圖像邊框、大小、和位置，並且可以直接對圖像進行編輯。在網頁中加入圖像的操作非常簡單：
1.新建一個空白網頁，把游標定位在網頁的開始位置。
2.打開“工具”菜單，選擇“圖片”菜單項，在子菜單中選擇“來自文件”菜單項，或者單擊工具欄中的圖片工具圖標，彈出一個“圖片”對話框。
3.在此對話框中單擊“瀏覽”按鈕，出現一個“選擇文件”對話框。
4.在“選擇文件”對話框的文件列表中選擇某個圖像文件，然後單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網頁中。在網頁中插入圖像後我們就可以對圖像的各種屬性進行設置了。
(2)圖像的各種屬性設置
1.選中所插入的圖片，單擊滑鼠右鍵，彈出一個快捷菜單，在菜單中選擇“圖片屬性”菜單項，出現一個“圖片屬性”對話框.
2.打開“外觀”選項卡。
(1)設定圖像邊框粗細：在“外觀”選項卡的“布局”欄里可以根據需要定義圖像的邊框，也可以定義邊框值為“0”，即無邊框。
(2)設置圖像環繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時需要將圖像和文字分開，且兩者互不影響。比如在網頁左邊插入一幅圖像，要求右邊的文字就像沒有圖像時可以多行輸入，這就要通過設置圖像的環繞方式來實現。在網頁中圖像的環繞方式有兩種：
①左環繞：圖像在左邊，文本在圖像的右邊進行環繞。
②右環繞：圖像在右邊，文本在圖像的左邊進行環繞。
在“外觀”選項卡的“布局”欄中打開“對齊方式”下拉列表框，選擇“左”選項，並單擊“確定”按鈕，圖像就被設置為左環繞方式，同樣，如果選“右”，圖像就被設置為右環繞方式。
(3)編輯圖像大小：在Dreamweaver 8中，當在網頁中加入一幅圖像後，圖像大小默認設置為其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調整圖像的大小。調整圖像大小非常簡單靈活，只要你選中加入的圖像，用滑鼠左鍵拖動圖像邊框，可任意調整圖像的寬度和高度直到達到你滿意的尺寸。
(4)設置圖像縮放比例：網頁設計的一個重要原則就是網頁的.兼容性，對於不同的瀏覽器或者不同的解析度，不管是800×600的窗口，還是1024×768的窗口，網頁都要能正常的顯示。設置圖像縮放比例就是將圖像設置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口裡圖像都能正常的顯示外觀。設置圖像縮放比例的步驟如下：
1.選中網頁中的圖像，單擊滑鼠右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項，彈出一個“圖像屬性”對話框.
2.在“大小”欄中選中“指定大小”復選框，同時選中“寬度”和“高度”下面的“百分比”單選按鈕，然後在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完成設置。外還可以在“外觀”選項卡的“水平間距”和“垂直間距”欄里進行設置，水平間距是指圖像與周圍元素在水平方向的間距，以象素為單位;垂直間距指圖像與周圍元素在垂直方向的間距。
(3)怎樣編輯網頁中的圖像
在Dreamweaver 8中，可以使用“圖片”工具欄中的各種工具對網頁中的圖像進行編輯，編輯功能主要有：圖像旋轉和翻轉、剪裁、圖像淡化、凹凸效果等等。
另外，為了使圖片更符合要求，我們還在photoshop8中隊所用的圖片進行了處理，使得圖片看起來更加精細美觀，符合我們的主題要求。
(4)使用背景圖像
使用背景圖像與使用背景色不同，使用背景色只將網頁的背景用某種顏色填充，而使用背景圖像則是將網頁的背景用圖像平鋪。這樣做可以使製作的網頁更美觀好看。網頁中使用背景圖像的具體步驟如下：
1.新建一個空白網頁。
2.單擊滑鼠右鍵，彈出的快捷菜單里選“網頁屬性”，彈出“網頁屬性”對話框.
3.開“背景”選項卡。
4.在“背景”選項卡的“格式”欄中選中“背景圖片”復選框，然後單擊下面的“瀏覽”按鈕，出現一個“選擇背景圖片”對話框。
5.在“選擇背景圖像”對話框中單擊“瀏覽文件”按鈕，出現一個“選擇文件”對話框。
6.在“選擇文件”對話框的文件列表中選擇圖像文件，單擊“確定”按鈕。
這樣，所選圖片將作為整個網頁的背景，如果在第4步時同時選中“水印”復選框，背景圖片將顯示為特殊的水印效果，當網頁滾動時，背景不動，只有網頁內容滾動，產生一種透明層的效果，非常吸引人。
(5)插入flash動畫
關於 Flash 視頻 使用 Dreamweaver 中的“插入 Flash 視頻”命令，可將 Flash 視頻內容插入 Web 頁面，而無需使用 Flash 創作工具。該命令可以插入 Flash 組件;當您在瀏覽器中查看它時，它顯示所選擇的 Flash 視頻內容以及一組播放控制項。
(6)設置滑鼠經過圖片，進行圖片交互
再插入圖片的下拉菜單中有一項是“滑鼠經過”，點擊這一項，會彈出一個對話框，在對話框中可以設置滑鼠經過前的圖片和經過時的圖片，選擇“確定”即可。
(7)設置鏈接
選中圖片或者文字，在下面的鏈接屬性中輸入所要連接到的地址，同時，下方的目標屬性被激活，輸入blank設置成在新窗口中打開網頁。我們設置了鏈接本站點的網頁頁面，同時也連接了外網，使得大家訪問頁面時能夠查詢更多詳細的信息，方便用戶查詢。
;Ⅱ 網路課程設計實驗報告
實用網路技術》課程設計
參考答案
一、 設計思路
根據該學院網路需求，將該學院網路劃分為：出口層、核心層、匯聚層、接入層四個層次；
出口層使用防火牆一台，其DMZ區連接學院伺服器，外網口連接Internet,內網口連接核心層；
使用兩台三層交換機（Rs1-Rs2）組成網路核心層；四台三層交換機（Rs2-Rs6）組成網路匯聚層，核心層與匯聚層使用雙鏈路以實現線路備份與負載均衡；
使用二層交換機若乾颱構成網路接入層，連接伺服器和個人計算機。
二、 網路拓樸圖
三、 防火牆埠和三層交換機VLAN介面配置
防火牆DMZ口：172.16.1.62/26
防火牆內網口1：10.0.1.2/30(與Rs1點對點連接)
防火牆內網口2：10.0.1.26/30(與Rs2點對點連接)
RS1：配置VLAN介面6個。
Vlan 11: 10.0.1.1/30 用於與防火牆點對點連接；
Vlan 21: 10.0.1.5/30 用於與Rs2點對點連接；
Vlan 31: 10.0.1.9/30 用於與Rs3點對點連接；
Vlan 41: 10.0.1.13/30 用於與Rs4點對點連接；
Vlan 51: 10.0.1.17/30 用於與Rs5點對點連接；
Vlan 61: 10.0.1.21/30 用於與Rs6點對點連接；
RS2：配置VLAN介面6個。
Vlan 12: 10.0.1.25/30 用於與防火牆點對點連接；
Vlan 22: 10.0.1.6/30 用於與Rs1點對點連接；
Vlan 32: 10.0.1.29/30 用於與Rs3點對點連接；
Vlan 42: 10.0.1.33/30 用於與Rs4點對點連接；
Vlan 52: 10.0.1.37/30 用於與Rs5點對點連接；
Vlan 62: 10.0.1.41/30 用於與Rs6點對點連接；
RS3：配置VLAN介面5個。
Vlan 13: 10.0.1.10/30 用於與Rs1點對點連接；
Vlan 23: 10.0.1.30/30 用於與Rs2點對點連接；
Vlan 33: 192.168.0.1/26 用於辦公計算機接入；
Vlan 43: 192.168.0.65/26 用於教學計算機接入；
Vlan 53: 192.168.0.129/25 用於科研用計算機接入；
RS4：配置VLAN介面3個。
Vlan 14: 10.0.1.14/30 用於與Rs1點對點連接；
Vlan 24: 10.0.1.34/30 用於與Rs2點對點連接；
Vlan 34: 192.168.1.1/24 用於研究生計算機接入；
RS5：配置VLAN介面5個。
Vlan 15: 10.0.1.18/30 用於與Rs1點對點連接；
Vlan 25: 10.0.1.38/30 用於與Rs2點對點連接；
Vlan 35: 192.168.2.1/24 用於250台實驗用計算機接入；
Vlan 45: 192.168.3.1/24 用於250台實驗用計算機接入；
Vlan 55: 192.168.4.1/24 用於250台實驗用計算機接入；
RS6：配置VLAN介面5個。
Vlan 16: 10.0.1.22/30 用於與Rs1點對點連接；
Vlan 26: 10.0.1.42/30 用於與Rs2點對點連接；
Vlan 36: 192.168.5.1/24 用於250台實驗用計算機接入；
Vlan 46: 192.168.6.1/24 用於250台實驗用計算機接入；
Vlan 56: 192.168.7.1/24 用於230台實驗用計算機接入；
四、 網段分配表
網段名 始地址 末地址 子網掩碼 默認網關 接入三層交換機
伺服器 172.16.1.1 172.16.1.61 255.255.255.192 172.16.1.62 防火牆
辦公用計算機 192.168.0.2 192.168.0.61 255.255.255.192 192.168.0.1 RS3
教學用計算機 192.168.0.66 192.168.0.125 255.255.255.192 192.168.0.65 RS3
… … … … … …
… … … … … …
… … … … … …
… … … … … …
… … … … … …
… … … … … …
… … … … … …
… … … … … …
… … … … … …
… … … … … …
… … … … … …
(此表自己完善)
五、 路由設計
1、 靜態路由
使用靜態路由解決路由問題時，各三層交換機路由表如下表
三層交換機名 目標網段/掩碼位數 下一跳IP 下一跳介面
RS1 172.16.1.0/26 10.0.1.2 Vlan11
RS1 192.168.0.0/24 10.0.1.10 Vlan31
Rs1 192.168.1.0/24 10.0.1.14 Vlan41
Rs1 192.168.2.0/23 10.0.1.18 Vlan51
Rs1 192.168.4.0/24 10.0.1.18 Vlan51
Rs1 192.168.5.0/24 10.0.1.22 Vlan61
Rs1 192.168.6.0/23 10.0.1.22 Vlan61
Rs1 0.0.0.0/0 10.0.1.2 Vlan11
三層交換機名 目標網段/掩碼位數 下一跳IP 下一跳介面
RS2 172.16.1.0/26 10.0.1.26 Vlan12
RS2 192.168.0.0/24 10.0.1.30 Vlan32
Rs2 192.168.1.0/24 10.0.1.34 Vlan42
Rs2 192.168.2.0/23 10.0.1.38 Vlan52
Rs2 192.168.4.0/24 10.0.1.38 Vlan52
Rs2 192.168.5.0/24 10.0.1.42 Vlan62
Rs2 192.168.6.0/23 10.0.1.42 Vlan62
Rs2 0.0.0.0/0 10.0.1.26 Vlan12
三層交換機名 目標網段/掩碼位數 下一跳IP 下一跳介面
Rs3 0.0.0.0/0 10.0.1.9 Vlan13
(完善Rs4、Rs5、Rs6路由表)
2、 RIP路由協議（如果使用了靜態路由，就可不必使用RIP協議）
在三層交換機上啟用RIP協議。
其中Rs1作如下配置
Rs1(config)#router rip
Rs1(config router)#version 2
Rs1(config router)#network 10.0.1.0
其中Rs2作如下配置
Rs2(config)#router rip
Rs2(config router)#version 2
Rs2(config router)#network 10.0.1.0
其中Rs3作如下配置
Rs3(config)#router rip
Rs3(config router)#version 2
Rs3(config router)#network 10.0.1.0
Rs3(config router)#network 192.168.0.0
其中Rs4作如下配置
Rs4(config)#router rip
Rs4(config router)#version 2
Rs4(config router)#network 10.0.1.0
Rs4(config router)#network 192.168.1.0
其中Rs5作如下配置
Rs5(config)#router rip
Rs5(config router)#version 2
Rs5(config router)#network 10.0.1.0
Rs5(config router)#network 192.168.2.0
Rs5(config router)#network 192.168.3.0
Rs5(config router)#network 192.168.4.0
(自己完善Rs6配置)
六、 網站設計與功能板塊（略，參考自己學院網站，作描述即可）。
Ⅲ 有關網頁設計與製作畢業論文範文
為了增加網頁的吸引力和可理解性，以及互動性，網頁設計所起的作用十分重要。下面是我為大家整理的網頁設計 畢業 論文，供大家參考。
網頁設計畢業論文篇一：《Flash軟體畫在網頁設計中的應用》
網頁設計畢業論文摘要
摘要:Flash技術運用范圍非常廣泛,不論是網站、 廣告 、動畫、游戲,甚至程序設計與多媒體化展示方面都有一定程度的運用。本文首先對Flash動畫今後的發展趨勢進行分析並具體化敘述了Flash的實際定義與特點,並對Flash動畫當前在網頁設計中的應用方式進行分析,針對性闡述了Flash動畫在整站式網頁設計過程中互動式導航系統、Web圖像動畫展示以及滑鼠動畫的應用。在此針對性研究Flash動畫在網頁設計中的相關研究,望研究結果能夠對今後的學者一定幫助。
網頁設計畢業論文內容
關鍵詞:Flash動畫 網頁設計 應用研究
隨著社會邁入信息化時代,網路及計算機技術的發展及普及程度呈現出優質化的發展形勢,從而促進網頁動畫漸漸發展起來,此外網頁動畫設計在網頁設計中占據重要地位,促使人們在關注動畫整體發展趨勢的過程中將注意力放在網頁動畫方面。在構建及設計網頁時,運用Flash幫助網頁實現多媒體化的網頁成果展示,同時也漸漸成為網頁設計發展過程中不可或缺的重要部分。
1Flash的運用及特點
MacromediaFlash作為一種互動式編輯矢量圖及多媒體創作軟體,網際網路網頁設計矢量動畫文件格式時常得以較多的運用,此外,針對性分析Flash,可以了解到目前其主要具備以下六大特點:第一,將矢量圖形作為主要運行前提,致使其自身文件導出容量不大,在進行圖片縮放時對其自身的清晰度影響不大,在網路傳輸過程中存在一定的便捷性;第二,Flash具備非常優質化且強大的AS代碼,在設計動畫時運用Flash技術,促使動畫的交互性優良,便於讀者在閱讀過程的理解並實施相關互動;第三,針對實際運用過程分析,Flash動畫在運作時主要採用插件,若用戶想要實現視頻觀看,僅僅需要安裝一次視頻插件就可以直接觀看,避免繁瑣性多次安裝的現象發生。此外,由於Flash構建的動畫自身極小,所以其具備較快的調用速率;第四,在設計Flash過程中,可以根據需要適當增加頁面控制按鈕幫助頁面實現鏈接的跳動,還可以運用滑鼠實現頁面動畫中的運動及移動。第五,Flash可以實現動畫視聽效果內容的升華,譬如漸變聲、點陣圖等等,用戶在製作圖片的過程中可以直接構建全Flash製作站點;第六,Flash動畫屬於一種“准”流式文件內容,無需全部下載完成就可以實現動畫觀看。
2Flash動畫在網路設計中的應用
在網頁設計中,Flash動畫具備非常多關鍵性的作用,如流式播放動畫、FlashMV及短片動畫等,此外其所表現的形式中存在一定的交互性。但需要注意的是,在實施網頁設計時,避免繁瑣、復雜的動畫設計效果的存在,畢竟物極必反,只會降低網頁的品質;如圖1所示。2.1網頁動畫信息交互的實現為了進一步卻寶寶網頁動畫信息交互整體的流暢性,其中的一個重要關鍵就是Flash動畫導航的交互性設計。在對該部分內容進行設計時,往往會使用針對性的Flash動畫腳本——AxtionScript。實際設計過程中,通常由編程者的思想與Flash在事件中作用共同形成動力,並依據動畫中的相應內容實現AxtionScript的具體化定義。2.2網頁動畫相關要素的設計第一,互動式導航系統。在網頁設計中,導航欄對用戶主要起到一種引導性作用。所以在設計時需要將其設計為多個導航級別,並構建針對性的標識來將其區分,以色彩為例,可以採用較為鮮艷、清爽式的搭配。第二,Web圖像動畫形式展示。傳統網頁中,Web圖像主要呈現靜態,不過經由計算機技術的不斷發展,最近幾年在網頁設計中漸漸出現了一部分動態化的Web圖像。同時在其色彩方面的運用,主要採用RGB模板,並在網頁安全色方面運用216色,其主要的色彩格式包括GIF、PNG以及JPE6。第三,滑鼠動畫。為了實現優質化Flash動畫效果,在製作動畫效果時要特別注意滑鼠在移動過程中其軌跡圖案及色彩搭配。首先,要確保滑鼠移動過程中的色彩與網頁設計色彩是不同的,有助於用戶一眼就可以將滑鼠找到。最後就是,滑鼠在色彩區別網頁之後還要注意其透明性,避免遮蔽信息的現象出現。
3結語
綜合全文內容,在網站設計過程中,Flash作為一個極具重要性的視覺性元素,其可以在幫助網站實現多媒體化效果展示的同時,還能夠結合數據通信這一 措施 全面性豐富網站自身具備的素材及資源,最終達到一種動態化的效果。截至今日,由於計算機技術發展速度不斷提升,結合Flash自身所具備的多種優質化特徵,筆者相信在今後人們的日常生活中,Flash動畫一定可以獲得更加廣泛的用途,更具普遍性,最終實現網頁設計的主體化運用趨勢。
網頁設計畢業論文文獻
[1]喬慧.Flash動畫在網頁製作中的應用及發展[J].內蒙古石油化工,2013(21):68.
[2]關曉軒.Flash動畫在網頁製作中的應用研究[J].北方文學(下旬),2012(11):91-93.
網頁設計畢業論文篇二：《響應式網頁設計原型研究》網頁設計畢業論文內容
當今，移動互聯網迅猛發展，各種智能設備層出不窮。傳統網頁設計採用“固定頁面及元素寬度，任何終端統一頁面效果”的策略，無疑將造成網頁在一些新興移動終端上顯示的文字極小、鏈接分布極密，用戶需要在屏幕上不停操作來自主尋求較好的體驗。面對這一弊端，網頁設計師聚焦於“響應式網頁設計”這一關鍵詞，試圖使用一套代碼為各類終端設備提供不同的設計和體驗。從先前“為固定設備設計網頁”跨越到“響應式網頁設計”是一個較難的過程。一些新手可能已經積攢了諸如媒體查詢、流式布局、彈性圖片等零散的設計開發技巧，掌握了HTML5和CSS3的使用 方法 ，但他們依然無法駕馭響應式網頁設計。造成這種情況的直接原因就在於缺乏一個能夠指導他們立即開展響應式網頁設計實踐的可操作流程，即原型。
1兩個關鍵概念：響應式網頁設計與原型
響應式網頁設計(RWD，Responsive網頁Design)是一種網頁前端開發技術，它可以描述為，“兼顧多種不同設備屏幕尺寸、解析度、系統平台和行為做出相應的調整和布局的顯示機制”。原型(Prototype)，也叫“原樣”，是“模擬科學”中的一個術語。在心理科學中，由於很難對動作或心智活動認識清楚，所以一般沿用J•R•安德森的觀點，把原型(Prototype)視為關於范疇的最典型的樣例設想，即把“原型”視為外化的實踐模式，或“物質化”了的心智活動方式或操作活動程序。綜合上述，響應式網頁設計原型可描述為：符合“響應式網頁設計項目分析、各類終端具有適合自身用戶體驗的不同頁面效果、一套代碼完成所有不同終端的網頁製作、各類終端與主流瀏覽器良好兼容”等一系列規則的，外化的響應式網頁設計活動實踐模式。
2建構響應式網頁設計的原型
建構原型一般採用心理模擬法，它包含三個步驟：
(1)響應式網頁設計活動的功能分析;
(2)響應式網頁設計活動的結構分析;
(3)功能分析與結構分析的有機結合。其中，功能分析的重點是作用的對象，條件與結果;結構分析的重點在於組成要素及要素之間的關系。響應式網頁設計的目標是能夠高效的編寫一套代碼為各類終端設備提供良好的設計效果和使用體驗，這需要具備HTML5、CSS3、Javascript和jquery的基本技能。響應式網頁設計之父——伊桑.馬科特認為，響應式網頁設計應該首先針對小屏幕進行設計，然後逐步增強針對大屏幕設計。這種思路顛覆了傳統固定寬度的網頁設計方法，對於那些已經積攢了零散的響應式網頁設計開發技巧、HTML5及CSS3等技術，能夠較熟練的完成固定寬度桌面端網頁的新手而言，恐怕很難理解從小屏幕開始設計然後漸進增強的思路。考慮到新手已經習慣設計製作固定寬度的桌面版網頁，響應式網頁設計如果從固定寬度的大屏幕網頁製作開始，然後改造這套代碼將僅適用於桌面的網頁依次兼容平板端和手機端也是一個不錯的思路。響應式網頁設計活動包含了“項目分析”、“網頁平面設計”、“桌面版網頁製作”、“平面版的改造”、“手機版的改造”及“兼容問題的調試”這6個典型的子活動。這些典型要素的關系可以描述為，“要想高效的完成某響應式網頁設計項目，首先需要項目分析，其階段性結果是響應式網頁的總體方案，即在用戶群體需求分析及主題解讀的基礎上，進行色彩分析及定位，確定UI版面布局，分析設計網頁功能模塊，確定網頁風格等，最終形成包含“前言”、“需求分析”、“系統分析”、“風格設計”、“各類終端UI版面初步布局”、“色彩定位”、“網頁建設日程規劃”等部分的網頁總體方案文檔;然後，根據前期方案中“色彩”、“風格”及“各類終端UI版面布局”等的分析，依據頁面設計原則，利用photoshop繪制適用於各類終端顯示的平面效果圖;隨後，利用“HTML5+Css3”技術採用<div>+css布局完成固定寬度桌面版網頁的製作並生成網頁文件和樣式表文件;接著，在這套代碼的基礎上，利用媒體查詢技術、流式布局、彈性圖片技術，結合平板終端的頁面效果圖將代碼改造成兼容桌面及平板的網頁;之後，在上述修改的基礎上，繼續利用媒體查詢技術和彈性圖片技術，結合手機終端的頁面效果圖將代碼改造成兼容桌面、平板、手機的網頁;最後，利用火狐和IETester軟體查看初步完成的響應式網頁，解決跨瀏覽器的兼容問題，形成完整網站。該過程中任何環節如果出現不妥當都應該返回上個步驟進行重新修改。結合上述對網頁設計活動的功能與結構分析，不難發現，響應式Web設計活動原型中的6個典型子活動復雜程度不同。其中“桌面版網頁製作”、“平面版的改造”、“手機版的改造”及“兼容問題的調試”這4個典型子活動是比較復雜的，包含了很多熟手的關鍵技術，需要進一步闡述。
3熟手的關鍵技術
從上述適用於新手的響應式網頁設計活動基本原型發現，製作一個能夠兼容主流瀏覽器的固定寬度桌面版網頁是響應式網頁製作的開端。那麼，首先在“桌面版網頁製作”這個環節中提取一些熟手關鍵技術，作為給予新手的技巧提示。
3.1兼容主流瀏覽器的桌面版網頁製作技術
為了防止不同瀏覽器給予相同HTML5標簽的初始樣式存在差異，熟手利用HTML5+CSS3製作桌面版網頁製作時，一般會在樣式文件(擴展名.css)中給出如下初始化代碼：*{margin：0px;padding:0px;}body{margin:0px;padding:0px;text-align:center;font-family:"宋體";font-size:16px;color:#cccccc;}ul,li,a{margin:0px;padding:0px;list-style:none;}div{overflow:hidden;float:left;}#wrapper{width:1007px;height:auto;margin-left:auto;margin-right:auto;overflow:hidden;clear:both;}這部分代碼塊可以實現頁面在IE內核和Firefox內核的所有版本瀏覽器中居中對齊，外層布局盒子與瀏覽器頭部無縫緊貼;<div>及css3完成固定寬度布局時，默認所有內部布局<div>向左浮動，溢出屬性為隱藏;所有構成頁面的HTML5元素的默認邊距和填充屬性為0px;HTML5的列表標簽默認項目符號為空，邊距和填充為0px。此外，確定頁面尺寸,目前大多數 顯示器 為1024像素*768像素，那麼以此為默認顯示器時，頁面的寬度尺寸一般設置為“1007像素”。初始化CSS代碼後，接下來就是利用<div>+CSS完成布局，這里提示新手：完成布局後，務必在IETESTER和Firefox中檢查網頁布局是否能夠兼容主流瀏覽器。然後，根據桌面版網頁平面設計效果圖完成頁面的製作。此外，熟手的 經驗 是製作過程中頻繁檢測桌面版網頁是否能夠完美兼容各種瀏覽器。
3.2利用流式布局、彈性圖片、媒體查詢技術修改桌面版網頁
(1)相對視口尺寸，將最外層的布局<div>(例如：#wrapper{width:1007px;...})的寬度設置為96%(這個值取決於當前頁面的視覺效果，也可以給其他數值);然後，將最外層的布局<div>內部的頁頭布局<div>、導航布局<div>、內容布局<div>、側邊欄布局<div>、頁腳布局<div>對應的CSS樣式中的width屬性值利用公式——目標元素寬度÷上下文元素寬度=百分比寬度把網頁的固定布局修改成百分比布局，也就是將固定像素寬度轉換成對應的百分比寬度。
(2)將頁面中所有HTML5標簽元素對應的CSS樣式表中的margin-right、margin-left、padding-right、padding-left的屬性值也用公式——目標元素寬度÷上下文元素寬度=百分比寬度來修改。
(3)將CSS樣式表中的font-size屬性值的單位用em來代替px。這里依然使用公式——目標元素寬度÷上下文元素寬度=百分比寬度。這里需要提示新手的是：在<body>標簽的初始化代碼中，如果有font-size:16px;語句，那麼在給其他元素的font-size屬性上修改值時，公式中的“上下文元素寬度”就等於16px，例如，#logo{font-size:48px;}現在要修改為#logo{font-size:3em;}。
(4)為了實現彈性圖片，讓圖片隨視口縮放，圖形圖像、動畫和視頻的彈性設置使用“img,object,video,embed{width:100%;max-width:100%;}”。其中，max-width屬性是用於確保縮放時不會超出圖片最大尺寸。同時，熟手還會使用AdaptiveImages解決方案來實現自適應圖片。
(5)媒體查詢可以通過判斷不同設備終端，提供不同的樣式使其實現在不同終端都能獲得最佳的用戶體驗。例如，某個響應式頁面用電腦瀏覽頁面時，頁面信息會以平鋪的形式分布在頁面合適的位置;用手機瀏覽頁面時，導航按鈕會相繼隱藏起來，部分信息變成左右滑動的方式呈現，頁面會重新布局，圖片相應縮小。媒介查詢的語法格式是，例如：設定寬度不超過400像素的屏幕尺寸，代碼是：<linkhref="css/phone.css"rel="stylesheet"type="text/css"media="onlyscreenand(max-width:400px)">。雖然，HTML5+CSS3提供了良好的媒體查詢功能，但當前仍有一些瀏覽器不支持，你可能需要添加如下基本樣式：<!--[ifltIE9&!IEMobile]><linkhref="iestyles.css"rel="stylesheet"type="text/css"><![endif]-->3.3不同種類、不同版本瀏覽器的兼容問題解決跨越瀏覽器的問題一直是響應式網頁設計的難題。熟手面對這一問題時，一般採用“漸進增強與降級”、“利用javascript修復老版本IE”、“使用Modernizr輔助修正樣式，按需載入資源”、“給IE6，7，8追加媒體查詢功能”等方法。
4結束語
對響應式網頁設計而言，當前的設計理念和技術方法還不是終點,網站前端設計師需要繼續努力找出更好的解決方案。而對新手學習者而言，響應式網頁設計開發技能的形成不是一蹴而就的，還需要學習者在多個項目中，利用原型進行多次定向、操作及內化才能真正掌握。
網頁設計畢業論文篇三：《網頁設計中的版式設計》摘 要：版式設計可以說是界面設計的基礎部分，網頁界面中的版式設計只是其發展應用中的一個方向。如何設計完美有魅力的網頁界面，版式設計扮演十分重要的角色，優秀的版式設計可以給瀏覽者留下深刻的印象，提高頁面的訪問量。因此，本文將向諸位讀者介紹在CDIO工程 教育 模式下，網頁設計課程中採用項目為指導的教學實踐過程中注意的事項。
關鍵詞：網頁設計;版式設計 CDIO教育模式;項目教學
近年來隨著經濟的高速發展，科技的日新月異，教育領域同樣面臨革新。引進新的教育理念和教學模式成為教育工作者的關注重心，此時，歐美成熟的工程教育理念慢慢地進入我們的視野之中，CDIO的教學模式(Conceive構思、Design設計、Implement實施、Operate運行)，符合工程人才的培養，提高學生的實踐能力、組織能力、創新能力。這一模式更適應當下的教育環境需求。
網頁設計這門課程屬於交叉學科範疇，兼顧藝術設計、計算機技術及交互設計等多門學科。另外，這門課程作為藝術與技術的結合體，要求學生具備較強實踐動手能力與綜合運用能力，因而在教學過程中我們依據CDIO的工程教育理念開展教學。
本文重點談到的是網頁設計中的版式設計過程，網頁中的版式設計起到信息統一、分割區域和交互導引的作用，是在有限的空間界面內將文字、圖形、背景色彩或圖案及交互功能集成在方圓之間，根據設計的形式法則，利用藝術美學與科學技術相結合的方式來實現效果展示。下面以教學過程中的“xx藝術系網站”項目為例，以網頁設計中的版式設計為內容，展示教學過程中的各個設計階段。
1 構思階段
(1)確立目標。
網頁設計不是盲目的行為，不是簡單使用軟體的行為，它是構思由確立到實現的過程，是一種展示到體會的過程。因此，在設計之初，教師需要引導學生了解當前的課題，明確網站要做什麼，網站的外觀布局是什麼樣子，網站需要營造何種氛圍。我們常見的網站根據用途分類為企業網站、電子商務網站、電子政務網站、文體娛樂網站、教育科學網站等，每種類型的網站都有自己需要傳播的信息，根據所需文字與圖片選擇適合的排版方式，進而營造恰當的氛圍。在“xx藝術系網站”項目中，學生會根據實際項目類型，理解項目設計目標為，該學院所屬系部信息服務類網站，界面版式方面要求簡潔大方，色彩明快，塑造清新、愉悅的氛圍，學生可以根據以上內容展開進一步的設計工作。
(2)信息整理。
項目開展前期根據對項目的簡單分析，要求學生對客戶或相關人士展開訪談，對行業同類網站的資訊開展收集與調研。這一階段學生會接觸網頁設計的需求方，在本項目中可以設定為系內行政人員、教師及系內學生，根據訪談或調研可以得到網站相關設計信息，如對整體風格的需求，導航的設計需求，網站類型為靜態網站或動態網站，根據需求結果，要求學生設計多樣的版式效果，以供客戶參考。
(3)交互設計。
我們將網頁中的交互分為視覺上的交互和行為功能上的交互設計。在這里我們更側重說明交互在視覺上的應用。網頁中我們常見的交互形態有按鈕、導航條、搜索欄和表單等。這些交互形態都會出現在版式的突出及顯著位置，這樣更引發人們的視覺關注中心，因而，在進行版式設計時，需要考慮這些交互元素的設置，友好的版式也是一種界面與人的情感交互。在我們的項目中學生應該考慮交互按鈕的外觀設計，排放位置等因素;導航條的設置應在醒目位置，清晰明確發揮導引作用;搜索欄幫助瀏覽者快捷搜索，放置在易發現的位置，搜索一般出現在網頁右上角;表單設計是學生所忽略的環節，因為可以使用插件添加，導致學生認為無須設計，在此建議信息表單設計時可考慮細節設計，提高友好度與舒適度等交互設計。
2 設計階段
版式設計是網頁設計中重要的設計引導規劃環節，在這個過程中學生可以根據自己的項目主題展開藝術美感的設計。一般進行頁面版式設計我們從以下幾個方面入手。
(1)版式結構設計。
網頁設計中的版式設計與傳統媒介中的版式設計略有不同，前提是他們都遵循版式設計五原則，[1]內容與形式，簡潔與簡約，設計與藝術，趣味與獨特，局部與整體。為了設計富有形式法則和藝術美感的網頁作品，版式設計方面通常會採用黃金比例和三分法排列原則。黃金比例法是初學者易於掌控的方法，將視窗可用區域分成兩個部分，也可以根據設計比例需求，將數字錄入到相關計算網站，得出合適的黃金比例分配方案。三分法構圖排版方式，是將排版界面分成三份，根據內容的不同，選擇不同的三分法排列位置。
網頁設計中由於要考慮顯示器視窗顯示水平不同，我們的總體版式設計會採用固定格式或非固定格式兩種形式。固定格式的版面是固定的界面版式，而非固定格式的版面設計是變化的，這種變化的版式很難把握的，變化的視窗將改變既定的字體形式和圖形排列位置，這個課題也是我們今後要深入探討的方向。
(2)字體、圖像、色彩設計。
版式設計是界面設計的骨架，字體設計是界面設計的血肉，富媒體技術的全面發展，網站這一綜合載體也得到了極大的發展，版式與字體的結合構成了網頁的不同風貌。在網頁中常見字體分為中英文兩類和圖形化的藝術字體，字型大小一般選用12pt。在中文網頁常常出現的字體為宋體或黑體，字型大小為12pt/14pt的文字展示，另外也會有些超大字體以圖像的形態出現，並通過視覺效果的調整，創建三維空間的視覺展示效果。圖形化的藝術字體，在諸多網站中得到應用。在設計中我們題材保有傳統的 文化 性，中國元素的運用，如書法、圖騰、建築等富有中國色彩的藝術形態都應得到我們的思考與關注，中西文化的比較與融合也是我們要探索的方向。圖形與色彩部分在排版中應適合主題，響應設計氛圍，為整體版式服務。
(3)視頻展示設計。
網頁界面排版中還需考慮一種新興的展示手段，視頻信息展示，頁面中利用大量的視頻信息排版，減少文字、圖片信息的輸入，信息傳達方式由靜態轉換為動態，提供有趣而新穎的排版展示方式。
3 技術實施
(1)界面版式視覺設計。
網頁設計中對靜態界面的布局，我們通常會使用Photoshop和Illustrator圖像處理軟體開展設計，首先我們會根據 思維導圖 繪制基礎模板，然後根據設計需求在模板中添加設計好的文字、圖形、視頻、聲音等設計元素。
(2)交互功能視覺設計。
在網頁設計中我們會考慮將靜態樣稿轉換為簡單的靜態網頁，這種轉換我們會使用Dreamweaver軟體進行操作，由於網頁展示設備的不同我們也會考慮採用一些相關的模型製作軟體來處理交互設計部分。
4 運行階段
將確定好的靜態草稿通過切圖生成為靜態網站，測試效果及功能，當運行時根據需要和視覺效果進行調整直到理想狀態。
5 小結
網頁設計課程將實際項目導入課堂，根據CDIO工程教育模式教學，打造有效、有趣、實用的教學方式，使學生在學習操作中鍛煉宏觀思考的能力，獲得團隊合作的能力，養成終身學習的能力。學生對設計流程的掌握就是對知識體系的掌握和運用，達到理論與實踐相結合，通過對版面的全面掌控，更好地為靜態網頁設計打下堅實的基礎。
參考文獻：
[1] 沈卓婭，王汀.字體與版式設計實訓[M].中國出版集團東方出版中心，2011：74.
猜你喜歡：1. 網站設計畢業論文範文
2. 網站類畢業設計論文
3. 淺談廣告設計畢業論文範文
4. 關於網路工程畢業論文範文
5. 關於計算機畢業論文範文大全
6. 計算機畢業論文範文大全