《網(wǎng)頁設(shè)計與制作（第二版）》第2章網(wǎng)頁設(shè)計基礎(chǔ)

1、? ?網(wǎng)頁設(shè)計與制作第二網(wǎng)頁設(shè)計與制作第二版版? ?第第2 2章網(wǎng)頁設(shè)計根章網(wǎng)頁設(shè)計根底底2021-10-1022.1 網(wǎng)頁設(shè)計根底網(wǎng)頁設(shè)計根底 2.1.1 2.1.1 網(wǎng)頁風格網(wǎng)頁風格 網(wǎng)站的風格可以從以下幾個方向來探討網(wǎng)站的風格可以從以下幾個方向來探討 色彩的搭配：網(wǎng)頁的底色、文字字型、圖片的色系、顏色色彩的搭配：網(wǎng)頁的底色、文字字型、圖片的色系、顏色等。等。 版面的排列：表格、框架的應用，文字縮排、段落等。版面的排列：表格、框架的應用，文字縮排、段落等。 導航的設(shè)計：導航窗口效果、導航效時等。導航的設(shè)計：導航窗口效果、導航效時等。 程序的選擇：網(wǎng)頁制作程序，如程序的選擇：網(wǎng)頁制作程序，如

2、ASPASP，PHPPHP，XMLXML，CGICGI等。等。 特效的應用：讓網(wǎng)頁看起來生動活潑的各種特殊應用，如特效的應用：讓網(wǎng)頁看起來生動活潑的各種特殊應用，如FlashFlash、Java scriptJava script，Java appletsJava applets，DHTMLDHTML等。等。 架構(gòu)的層次：目錄的規(guī)劃、層次的架構(gòu)等。架構(gòu)的層次：目錄的規(guī)劃、層次的架構(gòu)等。 內(nèi)容的選取：網(wǎng)站主題、整體實用性、文件關(guān)聯(lián)性、內(nèi)容內(nèi)容的選取：網(wǎng)站主題、整體實用性、文件關(guān)聯(lián)性、內(nèi)容切合度等。切合度等。 開展與規(guī)劃：對于網(wǎng)站的未來規(guī)劃，網(wǎng)站整體內(nèi)容開展方開展與規(guī)劃：對于網(wǎng)站的未來規(guī)劃，網(wǎng)站整

3、體內(nèi)容開展方向等。向等。 2021-10-1032.1.2 2.1.2 網(wǎng)頁版面網(wǎng)頁版面 經(jīng)常用到的版面布局形式有：經(jīng)常用到的版面布局形式有：“T“T結(jié)構(gòu)布局、結(jié)構(gòu)布局、“口口型布局、型布局、“田型布局、田型布局、“三型布局、對稱三型布局、對稱比照布局、比照布局、POPPOP布局等。布局等。 2021-10-104圖圖2-1 T型布局型布局 2021-10-105圖圖2-2 “口型布局口型布局 2021-10-106圖圖2-3 “田型布局田型布局 2021-10-107圖圖2-4 “三型布局三型布局 2021-10-108圖圖2-5 POP布局布局 2021-10-109v網(wǎng)頁作為一種版面，既

4、有文字，又有圖片。文字網(wǎng)頁作為一種版面，既有文字，又有圖片。文字有大小區(qū)別，文檔有標題和正文之分，圖片也有有大小區(qū)別，文檔有標題和正文之分，圖片也有大小和橫豎之別。網(wǎng)頁版面應該具有如下特點。大小和橫豎之別。網(wǎng)頁版面應該具有如下特點。 v1 1主次清楚，中心突出。主次清楚，中心突出。 v2 2大小搭配，相互照應。大小搭配，相互照應。 v3 3圖文并茂，相得益彰。圖文并茂，相得益彰。 v4 4動靜有度，平衡對稱。動靜有度，平衡對稱。 2021-10-1010圖圖2-6 整體風格簡潔實用，中心突出整體風格簡潔實用，中心突出 2021-10-1011圖圖2-7 大圖小圖相互照應大圖小圖相互照應 202

5、1-10-1012圖圖2-8 圖文并茂圖文并茂 2021-10-1013圖圖2-9 動靜結(jié)合動靜結(jié)合 2021-10-1014圖圖2-10 對稱的例如對稱的例如 2021-10-1015圖圖2-11 布局對稱布局對稱 2021-10-1016圖圖2-12 典型輻射平衡典型輻射平衡 2021-10-10172.1.3 網(wǎng)頁構(gòu)圖網(wǎng)頁構(gòu)圖 網(wǎng)頁設(shè)計要有內(nèi)容、形式、功能以及目標。點、線、網(wǎng)頁設(shè)計要有內(nèi)容、形式、功能以及目標。點、線、面是視覺語言中的根本元素，進行網(wǎng)頁設(shè)計時應面是視覺語言中的根本元素，進行網(wǎng)頁設(shè)計時應使用點、線、面的互相穿插，互相襯托構(gòu)成最正使用點、線、面的互相穿插，互相襯托構(gòu)成最正確的

6、頁面效果，組合成各種各樣的視覺形象，千確的頁面效果，組合成各種各樣的視覺形象，千變?nèi)f化的視覺空間，表達完美的設(shè)計意境。變?nèi)f化的視覺空間，表達完美的設(shè)計意境。 1 1點的應用。點的應用。 2 2直線的應用。直線的應用。 3 3曲線的應用。曲線的應用。 4 4曲線、直線的綜合應用。曲線、直線的綜合應用。 5 5面的應用。面的應用。 2021-10-1018圖圖2-13 點的應用點的應用 2021-10-1019圖圖2-14 線的應用線的應用 2021-10-1020圖圖2-15 曲線的應用曲線的應用 2021-10-1021圖圖2-16 曲線、直線的綜合應用曲線、直線的綜合應用 2021-10-1

7、022圖圖2-17 點、線的綜合應用點、線的綜合應用 2021-10-1023圖圖2-18 IBM網(wǎng)站網(wǎng)站 2021-10-1024圖圖2-19 面的例如面的例如 2021-10-1025圖圖2-20 線、面的例如線、面的例如 2021-10-1026圖圖2-21 點、線、面的結(jié)合例如點、線、面的結(jié)合例如 2021-10-10272.1.4 網(wǎng)頁色彩網(wǎng)頁色彩 v色彩是人的視覺最敏感的東西，它是美麗而豐富色彩是人的視覺最敏感的東西，它是美麗而豐富的，能喚起人類的心靈感知。網(wǎng)頁的色彩處理得的，能喚起人類的心靈感知。網(wǎng)頁的色彩處理得好，可以錦上添花，到達事半功倍的效果。為了好，可以錦上添花，到達事半

8、功倍的效果。為了把握好色彩的應用，我們應首先了解一下色彩的把握好色彩的應用，我們應首先了解一下色彩的一些根本概念。一些根本概念。 v計算機屏幕是由電子槍投射到屏幕來產(chǎn)生色光。計算機屏幕是由電子槍投射到屏幕來產(chǎn)生色光。電子槍射到屏幕可以產(chǎn)生電子槍射到屏幕可以產(chǎn)生3 3種顏色：紅、綠、藍。種顏色：紅、綠、藍。我們把這我們把這3 3種色稱為原色，常稱為三原色。由這種色稱為原色，常稱為三原色。由這3 3種色光，計算機屏幕可制作出完整的光譜。這也種色光，計算機屏幕可制作出完整的光譜。這也就是就是RGBRGB色系。色系。 2021-10-1028v以上顏色可總結(jié)為如下色調(diào)。以上顏色可總結(jié)為如下色調(diào)。 v1

9、 1暖色調(diào)：即紅色、橙色、黃色、褐色等色彩暖色調(diào)：即紅色、橙色、黃色、褐色等色彩的搭配。這種色調(diào)的運用，可使主頁呈現(xiàn)溫馨、的搭配。這種色調(diào)的運用，可使主頁呈現(xiàn)溫馨、溫暖、熱情的氣氛。溫暖、熱情的氣氛。v2 2冷色調(diào)：即青色、綠色、紫色等色彩的搭配。冷色調(diào)：即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運用，可使主頁呈現(xiàn)寧靜、清涼、高這種色調(diào)的運用，可使主頁呈現(xiàn)寧靜、清涼、高雅的氣氛。雅的氣氛。v3 3比照色調(diào)：即把色調(diào)完全相反的色彩搭配在比照色調(diào)：即把色調(diào)完全相反的色彩搭配在同一個空間里。例如：紅與綠、黃與紫、橙與藍同一個空間里。例如：紅與綠、黃與紫、橙與藍等。這種色調(diào)的搭配，可以產(chǎn)生強烈的視覺效

10、果，等。這種色調(diào)的搭配，可以產(chǎn)生強烈的視覺效果，給人亮麗、鮮艷、喜慶的感覺。最后，還要考慮給人亮麗、鮮艷、喜慶的感覺。最后，還要考慮頁面的底色背景色的深、淺，這里借用攝影頁面的底色背景色的深、淺，這里借用攝影中的一個術(shù)語，就是中的一個術(shù)語，就是“高調(diào)和高調(diào)和“低調(diào)，底色低調(diào)，底色淺的稱為低調(diào)。淺的稱為低調(diào)。 2021-10-10292.1.5 網(wǎng)頁配色技巧網(wǎng)頁配色技巧 v根據(jù)網(wǎng)站所要傳達的為信息和品牌選擇顏色。根據(jù)網(wǎng)站所要傳達的為信息和品牌選擇顏色。 v 要根據(jù)訪問對象選擇顏色。要根據(jù)訪問對象選擇顏色。 v不要使用過多的顏色。不要使用過多的顏色。 v在閱讀的局部使用比照色。在閱讀的局部使用比照

11、色。 v用灰階來測試比照。用灰階來測試比照。 v選擇顏色要注意時效性。選擇顏色要注意時效性。 v選擇色盤時應考慮功能性的顏色。選擇色盤時應考慮功能性的顏色。 v注意網(wǎng)站色差問題。注意網(wǎng)站色差問題。 2021-10-1030圖圖2-22 圣誕節(jié)網(wǎng)站圣誕節(jié)網(wǎng)站 2021-10-1031圖圖2-23 色彩實例色彩實例 2021-10-1032v在網(wǎng)頁的色彩應用中應注意如下問題。在網(wǎng)頁的色彩應用中應注意如下問題。 v1 1運用相同色系色彩。運用相同色系色彩。 v2 2運用比照色或互補色。運用比照色或互補色。 v3 3使用過渡色。使用過渡色。 2021-10-1033圖圖2-24 黑白比照黑白比照 20

12、21-10-10342.1.6 2.1.6 網(wǎng)頁圖像網(wǎng)頁圖像 2021-10-10352.2 網(wǎng)頁設(shè)計原那么網(wǎng)頁設(shè)計原那么 2.2.1 2.2.1 網(wǎng)頁設(shè)計的根本原那么網(wǎng)頁設(shè)計的根本原那么 網(wǎng)頁設(shè)計是有原那么的，無論用什么樣的方法，都網(wǎng)頁設(shè)計是有原那么的，無論用什么樣的方法，都要遵循一些根本原那么，這些根本原那么是：統(tǒng)要遵循一些根本原那么，這些根本原那么是：統(tǒng)一、連貫、分割、比照、和諧、易讀、易找、清一、連貫、分割、比照、和諧、易讀、易找、清晰、精選。晰、精選。 統(tǒng)一：是指設(shè)計的整體性、一致性。統(tǒng)一：是指設(shè)計的整體性、一致性。 連貫：是指要注意頁面的相互關(guān)系。連貫：是指要注意頁面的相互關(guān)系。

13、分割：是指將頁面分成假設(shè)干小塊，小塊之間有視分割：是指將頁面分成假設(shè)干小塊，小塊之間有視覺上的不同，這樣可以使觀者一目了然。分割是覺上的不同，這樣可以使觀者一目了然。分割是對網(wǎng)頁的頁面內(nèi)容分類歸檔。對網(wǎng)頁的頁面內(nèi)容分類歸檔。 2021-10-1036圖圖2-25 統(tǒng)一的例如統(tǒng)一的例如 2021-10-1037圖圖2-26 連貫的例如連貫的例如 2021-10-1038圖圖2-27 分割分割 2021-10-1039n比照：是指通過矛盾和沖突，使設(shè)計更加富有生氣。比照：是指通過矛盾和沖突，使設(shè)計更加富有生氣。其常用的方法有：多與少、長與短、粗與細、主與次、其常用的方法有：多與少、長與短、粗與細、

14、主與次、美與丑等。美與丑等。 n 和諧：是指整個頁面符合美的法那么，渾然一體。網(wǎng)和諧：是指整個頁面符合美的法那么，渾然一體。網(wǎng)頁的和諧不僅要看其結(jié)構(gòu)形式，而且要看其所形成的頁的和諧不僅要看其結(jié)構(gòu)形式，而且要看其所形成的視覺效果能否與人的視覺感受相溝通，產(chǎn)生共鳴。視覺效果能否與人的視覺感受相溝通，產(chǎn)生共鳴。 n易讀：是指網(wǎng)頁讓人看起來不費力，視覺效果好，符易讀：是指網(wǎng)頁讓人看起來不費力，視覺效果好，符合群眾的閱讀習慣。合群眾的閱讀習慣。 n易找：是指網(wǎng)頁的宣傳和推廣，如索引擎、目錄指南、易找：是指網(wǎng)頁的宣傳和推廣，如索引擎、目錄指南、導航站點、交換鏈接等。導航站點、交換鏈接等。 2021-10-

15、10402021-10-1041圖圖2-29 和諧和諧 2021-10-1042圖圖2-30 易讀易讀 2021-10-1043圖圖2-31 易找易找 2021-10-1044n清晰：是指網(wǎng)站的導航要清晰，讓人看得清楚，查找清晰：是指網(wǎng)站的導航要清晰，讓人看得清楚，查找方便快捷。方便快捷。 n精選：是指內(nèi)容要精選，頁面容量要精選，使瀏覽者精選：是指內(nèi)容要精選，頁面容量要精選，使瀏覽者翻開網(wǎng)頁的速度要快。從某種角度來講，頁面容量越翻開網(wǎng)頁的速度要快。從某種角度來講，頁面容量越小越好，小越好， 2021-10-1045圖圖2-32 清晰清晰1 2021-10-1046圖圖2-33 清晰清晰2 20

16、21-10-1047圖圖2-34 精選精選 2021-10-10482.2.2 2.2.2 網(wǎng)頁設(shè)計的根本因素網(wǎng)頁設(shè)計的根本因素 1 1設(shè)計網(wǎng)站的標志設(shè)計網(wǎng)站的標志LOGOLOGO 2 2設(shè)計網(wǎng)站的標準色彩設(shè)計網(wǎng)站的標準色彩 3 3設(shè)計網(wǎng)站的標準字體設(shè)計網(wǎng)站的標準字體 4 4設(shè)計網(wǎng)站的宣傳標語設(shè)計網(wǎng)站的宣傳標語 2021-10-10492.3 網(wǎng)頁設(shè)計步驟網(wǎng)頁設(shè)計步驟 2.3.1 2.3.1 建站前進行需求分析建站前進行需求分析 2.3.2 2.3.2 建網(wǎng)站時確定主題建網(wǎng)站時確定主題 2.3.3 2.3.3 網(wǎng)頁結(jié)構(gòu)仔細規(guī)劃網(wǎng)頁結(jié)構(gòu)仔細規(guī)劃 2.3.4 2.3.4 網(wǎng)頁的版面布局合理安排網(wǎng)頁的