網(wǎng)頁設(shè)計(jì)與制作教學(xué)

1、第第1515章：網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計(jì)章：網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計(jì)主要教學(xué)環(huán)節(jié)主要教學(xué)環(huán)節(jié)五、知識(shí)講解與操作示范一、課程引導(dǎo)二、明確知識(shí)技能目標(biāo)三、展示網(wǎng)頁瀏覽效果四、分析操作任務(wù)六、課堂模仿實(shí)踐七、疑難解析八、歸納總結(jié)九、布置習(xí)題（一）課程引導(dǎo)（一）課程引導(dǎo) 本次課重點(diǎn)學(xué)習(xí)網(wǎng)頁的色彩設(shè)計(jì)、導(dǎo)航本次課重點(diǎn)學(xué)習(xí)網(wǎng)頁的色彩設(shè)計(jì)、導(dǎo)航設(shè)計(jì)、網(wǎng)頁頁面元素的設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)的規(guī)設(shè)計(jì)、網(wǎng)頁頁面元素的設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)的規(guī)范。范。（二）明確知識(shí)技能目標(biāo)（二）明確知識(shí)技能目標(biāo) （1 1）掌握網(wǎng)頁色彩設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和網(wǎng)）掌握網(wǎng)頁色彩設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和網(wǎng)頁面面元素設(shè)計(jì)的基本原理與方法。頁面面元素設(shè)計(jì)的基本原理與方法。 （2 2）掌

2、握網(wǎng)頁設(shè)計(jì)的規(guī)范。）掌握網(wǎng)頁設(shè)計(jì)的規(guī)范。（三）展示網(wǎng)頁瀏覽效果（三）展示網(wǎng)頁瀏覽效果1 1預(yù)覽網(wǎng)頁預(yù)覽網(wǎng)頁（四）分析操作任務(wù)（四）分析操作任務(wù) 運(yùn)用本章所學(xué)習(xí)的方法和技巧對(duì)該網(wǎng)運(yùn)用本章所學(xué)習(xí)的方法和技巧對(duì)該網(wǎng)頁頁15.html15.html的頁面布局、顏色搭配、文字圖的頁面布局、顏色搭配、文字圖像進(jìn)行合理調(diào)整和優(yōu)化。像進(jìn)行合理調(diào)整和優(yōu)化。（五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（1 1）15.2.4網(wǎng)頁色彩設(shè)計(jì)網(wǎng)頁色彩設(shè)計(jì)1色彩的基本知識(shí)色彩的基本知識(shí)（1 1）三原色）三原色 三原色是能夠按照一些數(shù)量規(guī)定合成其他任何三原色是能夠按照一些數(shù)量規(guī)定合成其他任何一種顏色的基色。所有的顏色其實(shí)

3、都是由三原色按一種顏色的基色。所有的顏色其實(shí)都是由三原色按照不同的比例混合而來。電腦屏幕的色彩是由紅、照不同的比例混合而來。電腦屏幕的色彩是由紅、綠、藍(lán)三種原色組成。綠、藍(lán)三種原色組成。 （2 2）色彩三要素）色彩三要素 色彩三要素是指色相、飽和度和明度。色彩三要素是指色相、飽和度和明度。（五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（2 2） 2計(jì)算機(jī)表示顏色計(jì)算機(jī)表示顏色 顏色由紅、綠、藍(lán)三原色組合而成，在網(wǎng)頁中顏色由紅、綠、藍(lán)三原色組合而成，在網(wǎng)頁中采用十六進(jìn)制對(duì)顏色進(jìn)行定義。采用十六進(jìn)制對(duì)顏色進(jìn)行定義。（1 1）顏色十六進(jìn)制數(shù)值）顏色十六進(jìn)制數(shù)值（2 2）十進(jìn)制的）十進(jìn)制的RGBRG

4、B值值（3 3）使用預(yù)設(shè)的顏色名稱）使用預(yù)設(shè)的顏色名稱 HTMLHTML預(yù)設(shè)了一些顏色名稱，在顏色文本框中直預(yù)設(shè)了一些顏色名稱，在顏色文本框中直接輸入顏色名稱也能設(shè)置相應(yīng)顏色。接輸入顏色名稱也能設(shè)置相應(yīng)顏色。 （五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（3 3） 3顏色與心里反應(yīng)顏色與心里反應(yīng) 當(dāng)看到不同的顏色時(shí)，會(huì)產(chǎn)生不同的心里感覺，當(dāng)看到不同的顏色時(shí)，會(huì)產(chǎn)生不同的心里感覺，這就是一種色彩意向。這就是一種色彩意向。（五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（4 4） 4頁面色彩的搭配技巧頁面色彩的搭配技巧（1 1）特色鮮明）特色鮮明（2 2）搭配合理）搭配合理（3 3）講究藝術(shù)性

5、）講究藝術(shù)性（4 4）合理使用鄰近色）合理使用鄰近色（5 5）合理使用對(duì)比色）合理使用對(duì)比色（6 6）巧妙使用背景色）巧妙使用背景色（7 7）嚴(yán)格控制色彩的數(shù)量）嚴(yán)格控制色彩的數(shù)量（五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（5 5）15.2.5網(wǎng)頁導(dǎo)航設(shè)計(jì)網(wǎng)頁導(dǎo)航設(shè)計(jì) 導(dǎo)航是網(wǎng)站設(shè)計(jì)不可缺少的元素之一，它不僅僅導(dǎo)航是網(wǎng)站設(shè)計(jì)不可缺少的元素之一，它不僅僅是信息結(jié)構(gòu)的基礎(chǔ)分類也是瀏覽者瀏覽網(wǎng)站的路標(biāo)。是信息結(jié)構(gòu)的基礎(chǔ)分類也是瀏覽者瀏覽網(wǎng)站的路標(biāo)。導(dǎo)航作為頁面的重要視覺元素，放置在明顯、易找的區(qū)導(dǎo)航作為頁面的重要視覺元素，放置在明顯、易找的區(qū)域是必要，讓瀏覽者進(jìn)入網(wǎng)站第一時(shí)間就可以看到它。域是

6、必要，讓瀏覽者進(jìn)入網(wǎng)站第一時(shí)間就可以看到它。 導(dǎo)航樣式有很多，包括橫排導(dǎo)航、豎排導(dǎo)航、多導(dǎo)航樣式有很多，包括橫排導(dǎo)航、豎排導(dǎo)航、多排導(dǎo)航、圖片式導(dǎo)航、下拉菜單導(dǎo)航、隱藏式導(dǎo)航等排導(dǎo)航、圖片式導(dǎo)航、下拉菜單導(dǎo)航、隱藏式導(dǎo)航等等等。 網(wǎng)站導(dǎo)航的表現(xiàn)形式主要有：菜單、站內(nèi)搜索引網(wǎng)站導(dǎo)航的表現(xiàn)形式主要有：菜單、站內(nèi)搜索引擎、當(dāng)前瀏覽位置等。擎、當(dāng)前瀏覽位置等。（五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（6 6）（1）菜單）菜單 菜單是網(wǎng)站最常見的導(dǎo)航方法，一個(gè)好的菜單系統(tǒng)關(guān)菜單是網(wǎng)站最常見的導(dǎo)航方法，一個(gè)好的菜單系統(tǒng)關(guān)鍵在于能適應(yīng)網(wǎng)站的層次需要，并且容易讓瀏覽者理解網(wǎng)鍵在于能適應(yīng)網(wǎng)站的層次需要，

7、并且容易讓瀏覽者理解網(wǎng)站的結(jié)構(gòu)。站的結(jié)構(gòu)。（2 2）站內(nèi)搜索引擎）站內(nèi)搜索引擎 站內(nèi)搜索引擎提供了一種主動(dòng)查詢方式，瀏覽者只要站內(nèi)搜索引擎提供了一種主動(dòng)查詢方式，瀏覽者只要把自己需要尋找的內(nèi)容的關(guān)鍵字輸入到搜索引擎中，網(wǎng)站把自己需要尋找的內(nèi)容的關(guān)鍵字輸入到搜索引擎中，網(wǎng)站將自動(dòng)地查找出站內(nèi)符合條件的頁面，這是一種人性化的將自動(dòng)地查找出站內(nèi)符合條件的頁面，這是一種人性化的做法。做法。（3 3）當(dāng)前瀏覽位置）當(dāng)前瀏覽位置 所謂所謂“當(dāng)前瀏覽位置當(dāng)前瀏覽位置”就是在網(wǎng)站的每個(gè)頁面中加入就是在網(wǎng)站的每個(gè)頁面中加入當(dāng)前位置的文字說明并逐級(jí)加入鏈接。當(dāng)前位置的文字說明并逐級(jí)加入鏈接。（五）知識(shí)講解與操作示

8、范（五）知識(shí)講解與操作示范（7 7）15.2.6網(wǎng)頁頁面元素設(shè)計(jì)網(wǎng)頁頁面元素設(shè)計(jì)1頁面標(biāo)題設(shè)計(jì)頁面標(biāo)題設(shè)計(jì) 頁面標(biāo)題相當(dāng)于商店的招牌，標(biāo)題通常位于頁面的頁面標(biāo)題相當(dāng)于商店的招牌，標(biāo)題通常位于頁面的上端或中央，清楚明確地表示出來。上端或中央，清楚明確地表示出來。 （1 1）標(biāo)題大小、粗細(xì)要合適）標(biāo)題大小、粗細(xì)要合適 （2 2）標(biāo)題使用鮮艷的色彩）標(biāo)題使用鮮艷的色彩 （3 3）利用空間突出標(biāo)題）利用空間突出標(biāo)題（五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（8 8）2頁面中文字設(shè)計(jì)頁面中文字設(shè)計(jì) （1 1）文字字體的選擇）文字字體的選擇 網(wǎng)頁中正文文本一般可使用系統(tǒng)默認(rèn)的中文字體和西網(wǎng)頁中正文文

9、本一般可使用系統(tǒng)默認(rèn)的中文字體和西文字體，若需使用特殊字體，一般把使用了特殊字體的對(duì)文字體，若需使用特殊字體，一般把使用了特殊字體的對(duì)象制作成圖片。常用的中文字體有宋體、黑體、楷體、仿象制作成圖片。常用的中文字體有宋體、黑體、楷體、仿宋體、行書、隸書、魏碑等，常用英文字體有宋體、行書、隸書、魏碑等，常用英文字體有Times New Times New RomanRoman、ArialArial、ImpactImpact等等 (2(2）文字粗細(xì)的確定）文字粗細(xì)的確定 文字變細(xì)會(huì)顯得十分優(yōu)美，反之將文字變粗會(huì)顯得有力。文字變細(xì)會(huì)顯得十分優(yōu)美，反之將文字變粗會(huì)顯得有力。（五）知識(shí)講解與操作示范（五）

10、知識(shí)講解與操作示范（9 9）（3 3）文字字號(hào)的確定）文字字號(hào)的確定 對(duì)于網(wǎng)頁中正文文本，其字號(hào)一般設(shè)置為對(duì)于網(wǎng)頁中正文文本，其字號(hào)一般設(shè)置為10101212磅；磅；對(duì)于網(wǎng)頁中版權(quán)聲明等文本一般設(shè)置為對(duì)于網(wǎng)頁中版權(quán)聲明等文本一般設(shè)置為9 91010磅；對(duì)于磅；對(duì)于網(wǎng)頁中標(biāo)題文本，一般設(shè)置為網(wǎng)頁中標(biāo)題文本，一般設(shè)置為12121818磅。磅。（4 4）文字的字間距和行間距）文字的字間距和行間距 網(wǎng)頁中文本的字間距和行間距在某種程度上會(huì)改變網(wǎng)頁中文本的字間距和行間距在某種程度上會(huì)改變?cè)L問者的閱讀心理。訪問者的閱讀心理。（五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（1010）3頁面中圖像應(yīng)用頁面中

11、圖像應(yīng)用 傳遞信息的視覺要素包括版式、文字、圖像、色彩傳遞信息的視覺要素包括版式、文字、圖像、色彩等。等。 網(wǎng)頁中圖像在信息傳達(dá)上應(yīng)用具備以下功能：網(wǎng)頁中圖像在信息傳達(dá)上應(yīng)用具備以下功能： （1 1）要有良好的視覺吸引力，能吸引瀏覽者的注意）要有良好的視覺吸引力，能吸引瀏覽者的注意力。力。 （2 2）要簡(jiǎn)潔明確地傳達(dá)網(wǎng)站信息，能使人們一目了）要簡(jiǎn)潔明確地傳達(dá)網(wǎng)站信息，能使人們一目了然地抓住網(wǎng)站信息的重點(diǎn)。然地抓住網(wǎng)站信息的重點(diǎn)。 （3 3）要有強(qiáng)而有力的誘導(dǎo)作用，造成鮮明的視覺感）要有強(qiáng)而有力的誘導(dǎo)作用，造成鮮明的視覺感受效果，從觀看過程中產(chǎn)生愿望和欲求。受效果，從觀看過程中產(chǎn)生愿望和欲求。（

12、五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（1111）對(duì)圖像的處理主要包括以下幾個(gè)方面：對(duì)圖像的處理主要包括以下幾個(gè)方面：（1 1）圖像的外形處理）圖像的外形處理（2 2）圖像的面積處理）圖像的面積處理（3 3）圖像的數(shù)量處理）圖像的數(shù)量處理（4 4）圖像的背景處理）圖像的背景處理（五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（1212）15.3網(wǎng)頁設(shè)計(jì)的規(guī)范網(wǎng)頁設(shè)計(jì)的規(guī)范15.3.1網(wǎng)頁版面尺寸規(guī)范網(wǎng)頁版面尺寸規(guī)范1網(wǎng)頁的寬度網(wǎng)頁的寬度 目前我國(guó)的網(wǎng)絡(luò)用戶，大部分使用目前我國(guó)的網(wǎng)絡(luò)用戶，大部分使用1515英寸和英寸和1717英寸顯示器，采用英寸顯示器，采用800800600600分辨率

13、的用戶仍不少，分辨率的用戶仍不少，為了考慮這部分瀏覽者的需要，制作網(wǎng)頁時(shí)一般按為了考慮這部分瀏覽者的需要，制作網(wǎng)頁時(shí)一般按照照800800600600（單位為像素）分辨率的規(guī)格來設(shè)計(jì)，（單位為像素）分辨率的規(guī)格來設(shè)計(jì)，頁面寬度不超過頁面寬度不超過1 1屏。屏。（五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（1313） 2網(wǎng)頁文件大小網(wǎng)頁文件大小 一般地，網(wǎng)站的首頁大?。òㄋ袌D像、文一般地，網(wǎng)站的首頁大小（包括所有圖像、文本、多媒體對(duì)象）不宜超過本、多媒體對(duì)象）不宜超過30KB30KB，網(wǎng)站的二級(jí)頁面，網(wǎng)站的二級(jí)頁面的文件（包括所有圖像、文本、多媒體對(duì)象等）不的文件（包括所有圖像、文本、多

14、媒體對(duì)象等）不宜超過宜超過45KB45KB。如果網(wǎng)頁大太，網(wǎng)頁下載的速度會(huì)變。如果網(wǎng)頁大太，網(wǎng)頁下載的速度會(huì)變慢，影響瀏覽速度。慢，影響瀏覽速度。（五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（1414）3網(wǎng)頁的長(zhǎng)度網(wǎng)頁的長(zhǎng)度 從理論上來講網(wǎng)頁的長(zhǎng)度可以無限長(zhǎng)的，但一從理論上來講網(wǎng)頁的長(zhǎng)度可以無限長(zhǎng)的，但一般不宜超過般不宜超過3 3屏，最佳長(zhǎng)度為屏，最佳長(zhǎng)度為1.81.82.52.5屏。屏。4廣告尺寸廣告尺寸 廣告尺寸應(yīng)為標(biāo)準(zhǔn)尺寸，全尺寸廣告尺寸應(yīng)為標(biāo)準(zhǔn)尺寸，全尺寸banner不超過不超過14KB。（五）知識(shí)講解與操作示范（五）知識(shí)講解與操作示范（1515）15.3.2文件夾、文件命名規(guī)范文

15、件夾、文件命名規(guī)范主要命名規(guī)則有：主要命名規(guī)則有： （1 1）文件夾命名一般采用英文小寫字母，特殊情況可以使用中文）文件夾命名一般采用英文小寫字母，特殊情況可以使用中文拼音，常見的文件夾命名：存放圖形文件的文件夾命名為拼音，常見的文件夾命名：存放圖形文件的文件夾命名為imageimage，存，存放放flashflash文件的文件夾命名為文件的文件夾命名為flashflash，存放，存放CSSCSS樣式表文件的文件夾命樣式表文件的文件夾命名為名為stylestyle或或 CSSCSS，存放，存放JavaScriptJavaScript腳本的文件夾命名為腳本的文件夾命名為JSJS，存入友，存入友情

16、鏈接的文件夾命名為情鏈接的文件夾命名為 linklink，存放，存放 indlude indlude 文件的文件夾命名為文件的文件夾命名為includeinclude。 （2 2）文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合。）文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合。 （3 3）索引文件命名為）索引文件命名為index.htmlindex.html，主內(nèi)容頁命名為，主內(nèi)容頁命名為main.htmlmain.html。 （4 4）菜單名稱用菜單名的英文單詞或組合英文單詞命名。）菜單名稱用菜單名的英文單詞或組合英文單詞命名。 （5 5）圖片、動(dòng)畫文件的命名以英文單詞或漢語拼音縮寫命名

17、。）圖片、動(dòng)畫文件的命名以英文單詞或漢語拼音縮寫命名。（六）課堂模仿實(shí)踐（六）課堂模仿實(shí)踐 打開網(wǎng)站打開網(wǎng)站“課堂實(shí)踐課堂實(shí)踐”文件夾文件夾“1616網(wǎng)頁設(shè)計(jì)網(wǎng)頁設(shè)計(jì)”中中網(wǎng)頁文檔網(wǎng)頁文檔“16.html”,16.html”,運(yùn)用本章所介紹的方法和技巧運(yùn)用本章所介紹的方法和技巧對(duì)該網(wǎng)頁的頁面布局、顏色搭配、文字圖像進(jìn)行合理對(duì)該網(wǎng)頁的頁面布局、顏色搭配、文字圖像進(jìn)行合理調(diào)整和優(yōu)化。然后瀏覽其效果，直到自己認(rèn)為滿意為調(diào)整和優(yōu)化。然后瀏覽其效果，直到自己認(rèn)為滿意為止。止。（八）歸納總結(jié)（八）歸納總結(jié) 本章主要對(duì)網(wǎng)站規(guī)劃和網(wǎng)頁設(shè)計(jì)進(jìn)行了剖本章主要對(duì)網(wǎng)站規(guī)劃和網(wǎng)頁設(shè)計(jì)進(jìn)行了剖析，分析了網(wǎng)頁設(shè)計(jì)過程中的一些基本原理和析，分析了網(wǎng)頁設(shè)計(jì)過程中的一些基本原理和方法，主要包括版面布局、外觀設(shè)計(jì)、方法，主要包括版面布局、外觀設(shè)計(jì)、LogoLogo設(shè)設(shè)計(jì)、色彩設(shè)計(jì)、導(dǎo)航設(shè)計(jì)、頁面元素設(shè)計(jì)和網(wǎng)