網(wǎng)頁(yè)設(shè)計(jì)與制作教學(xué)市公開(kāi)課金獎(jiǎng)市賽課一等獎(jiǎng)?wù)n件

《網(wǎng)頁(yè)設(shè)計(jì)與制作》

教學(xué)課件第1頁(yè)第1頁(yè)第15章：網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì)主要教學(xué)環(huán)節(jié)五、知識(shí)解說(shuō)與操作示范一、課程引導(dǎo)二、明確知識(shí)技能目的三、展示網(wǎng)頁(yè)瀏覽效果四、分析操作任務(wù)六、課堂模仿實(shí)踐七、疑難解析八、歸納總結(jié)九、布置習(xí)題第2頁(yè)第2頁(yè)（一）課程引導(dǎo)

本次課重點(diǎn)學(xué)習(xí)網(wǎng)頁(yè)色彩設(shè)計(jì)、導(dǎo)航設(shè)計(jì)、網(wǎng)頁(yè)頁(yè)面元素設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)規(guī)范。第3頁(yè)第3頁(yè)（二）明確知識(shí)技能目的（1）掌握網(wǎng)頁(yè)色彩設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和網(wǎng)頁(yè)面面元素設(shè)計(jì)基本原理與辦法。（2）掌握網(wǎng)頁(yè)設(shè)計(jì)規(guī)范。第4頁(yè)第4頁(yè)（三）展示網(wǎng)頁(yè)瀏覽效果1．預(yù)覽網(wǎng)頁(yè)第5頁(yè)第5頁(yè)（四）分析操作任務(wù)利用本章所學(xué)習(xí)辦法和技巧對(duì)該網(wǎng)頁(yè)15.html頁(yè)面布局、顏色搭配、文字圖像進(jìn)行合理調(diào)整和優(yōu)化。第6頁(yè)第6頁(yè)（五）知識(shí)解說(shuō)與操作示范（1）15.2.4網(wǎng)頁(yè)色彩設(shè)計(jì)1．色彩基本知識(shí)（1）三原色三原色是能夠按照一些數(shù)量要求合成其它任何一個(gè)顏色基色。全部顏色其實(shí)都是由三原色按照不同百分比混合而來(lái)。電腦屏幕色彩是由紅、綠、藍(lán)三種原色組成。（2）色彩三要素色彩三要素是指色相、飽和度和明度。第7頁(yè)第7頁(yè)（五）知識(shí)解說(shuō)與操作示范（2）

2．計(jì)算機(jī)表示顏色顏色由紅、綠、藍(lán)三原色組合而成，在網(wǎng)頁(yè)中采用十六進(jìn)制對(duì)顏色進(jìn)行定義。（1）顏色十六進(jìn)制數(shù)值（2）十進(jìn)制RGB值（3）使用預(yù)設(shè)顏色名稱HTML預(yù)設(shè)了一些顏色名稱，在顏色文本框中直接輸入顏色名稱也能設(shè)置相應(yīng)顏色。

第8頁(yè)第8頁(yè)（五）知識(shí)解說(shuō)與操作示范（3）

3．顏色與心里反應(yīng)當(dāng)看到不同顏色時(shí)，會(huì)產(chǎn)生不同心里感覺(jué)，這就是一個(gè)色彩意向。第9頁(yè)第9頁(yè)（五）知識(shí)解說(shuō)與操作示范（4）

4．頁(yè)面色彩搭配技巧（1）特色鮮明（2）搭配合理（3）講究藝術(shù)性（4）合理使用鄰近色（5）合理使用對(duì)比色（6）巧妙使用背景色（7）嚴(yán)格控制色彩數(shù)量第10頁(yè)第10頁(yè)（五）知識(shí)解說(shuō)與操作示范（5）15.2.5網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)

導(dǎo)航是網(wǎng)站設(shè)計(jì)不可缺乏元素之一，它不但僅是信息結(jié)構(gòu)基礎(chǔ)分類也是瀏覽者瀏覽網(wǎng)站路標(biāo)。導(dǎo)航作為頁(yè)面主要視覺(jué)元素，放置在明顯、易找區(qū)域是必要，讓瀏覽者進(jìn)入網(wǎng)站第一時(shí)間就能夠看到它。導(dǎo)航樣式有諸多，包括橫排導(dǎo)航、豎排導(dǎo)航、多排導(dǎo)航、圖片式導(dǎo)航、下拉菜單導(dǎo)航、隱藏式導(dǎo)航等等。網(wǎng)站導(dǎo)航表現(xiàn)形式主要有：菜單、站內(nèi)搜索引擎、當(dāng)前瀏覽位置等。第11頁(yè)第11頁(yè)（五）知識(shí)解說(shuō)與操作示范（6）（1）菜單菜單是網(wǎng)站最常見(jiàn)導(dǎo)航辦法，一個(gè)好菜單系統(tǒng)關(guān)鍵在于能適應(yīng)網(wǎng)站層次需要，并且容易讓瀏覽者理解網(wǎng)站結(jié)構(gòu)。（2）站內(nèi)搜索引擎站內(nèi)搜索引擎提供了一個(gè)積極查詢方式，瀏覽者只要把自己需要尋找內(nèi)容關(guān)鍵字輸入到搜索引擎中，網(wǎng)站將自動(dòng)地查找出站內(nèi)符合條件頁(yè)面，這是一個(gè)人性化做法。（3）當(dāng)前瀏覽位置所謂“當(dāng)前瀏覽位置”就是在網(wǎng)站每個(gè)頁(yè)面中加入當(dāng)前位置文字闡明并逐層加入鏈接。第12頁(yè)第12頁(yè)（五）知識(shí)解說(shuō)與操作示范（7）15.2.6網(wǎng)頁(yè)頁(yè)面元素設(shè)計(jì)1．頁(yè)面標(biāo)題設(shè)計(jì)頁(yè)面標(biāo)題相稱于商店招牌，標(biāo)題通常位于頁(yè)面上端或中央，清楚明確地表示出來(lái)。（1）標(biāo)題大小、粗細(xì)要適當(dāng)（2）標(biāo)題使用鮮艷色彩（3）利用空間突出標(biāo)題第13頁(yè)第13頁(yè)（五）知識(shí)解說(shuō)與操作示范（8）2．頁(yè)面中文字設(shè)計(jì)（1）文字字體選擇網(wǎng)頁(yè)中正文文本普通可使用系統(tǒng)默認(rèn)中文字體和西文字體，若需使用特殊字體，普通把使用了特殊字體對(duì)象制作成圖片。慣用中文字體有宋體、黑體、楷體、仿宋體、行書(shū)、隸書(shū)、魏碑等，慣用英文字體有TimesNewRoman、Arial、Impact等(2）文字粗細(xì)確實(shí)定文字變細(xì)會(huì)顯得十分優(yōu)美，反之將文字變粗會(huì)顯得有力。第14頁(yè)第14頁(yè)（五）知識(shí)解說(shuō)與操作示范（9）（3）文字字號(hào)確實(shí)定對(duì)于網(wǎng)頁(yè)中正文文本，其字號(hào)普通設(shè)置為10～12磅；對(duì)于網(wǎng)頁(yè)中版權(quán)申明等文本普通設(shè)置為9～10磅；對(duì)于網(wǎng)頁(yè)中標(biāo)題文本，普通設(shè)置為12～18磅。（4）文字字間距和行間距網(wǎng)頁(yè)中文本字間距和行間距在某種程度上會(huì)改變?cè)L問(wèn)者閱讀心理。第15頁(yè)第15頁(yè)（五）知識(shí)解說(shuō)與操作示范（10）3．頁(yè)面中圖像應(yīng)用傳遞信息視覺(jué)要素包括版式、文字、圖像、色彩等。網(wǎng)頁(yè)中圖像在信息傳達(dá)上應(yīng)用具備下列功效：（1）要有良好視覺(jué)吸引力，能吸引瀏覽者注意力。（2）要簡(jiǎn)練明確地傳達(dá)網(wǎng)站信息，能使人們一目了然地抓住網(wǎng)站信息重點(diǎn)。（3）要有強(qiáng)而有力誘導(dǎo)作用，造成鮮明視覺(jué)感受效果，從觀看過(guò)程中產(chǎn)生愿望和欲求。第16頁(yè)第16頁(yè)（五）知識(shí)解說(shuō)與操作示范（11）對(duì)圖像處理主要包括下列幾種方面：（1）圖像外形處理（2）圖像面積處理（3）圖像數(shù)量處理（4）圖像背景處理第17頁(yè)第17頁(yè)（五）知識(shí)解說(shuō)與操作示范（12）15.3網(wǎng)頁(yè)設(shè)計(jì)規(guī)范15.3.1網(wǎng)頁(yè)版面尺寸規(guī)范1．網(wǎng)頁(yè)寬度當(dāng)前我國(guó)網(wǎng)絡(luò)用戶，大部分使用15英寸和17英寸顯示器，采用800×600分辨率用戶仍不少，為了考慮這部分瀏覽者需要，制作網(wǎng)頁(yè)時(shí)普通按照800×600（單位為像素）分辨率規(guī)格來(lái)設(shè)計(jì)，頁(yè)面寬度不超出1屏。第18頁(yè)第18頁(yè)（五）知識(shí)解說(shuō)與操作示范（13）

2．網(wǎng)頁(yè)文獻(xiàn)大小普通地，網(wǎng)站首頁(yè)大?。òㄋ袌D像、文本、多媒體對(duì)象）不宜超出30KB，網(wǎng)站二級(jí)頁(yè)面文獻(xiàn)（包括所有圖像、文本、多媒體對(duì)象等）不宜超出45KB。假如網(wǎng)頁(yè)大太，網(wǎng)頁(yè)下載速度會(huì)變慢，影響瀏覽速度。第19頁(yè)第19頁(yè)（五）知識(shí)解說(shuō)與操作示范（14）3．網(wǎng)頁(yè)長(zhǎng)度從理論上來(lái)講網(wǎng)頁(yè)長(zhǎng)度能夠無(wú)限長(zhǎng)，但普通不宜超出3屏，最佳長(zhǎng)度為1.8～2.5屏。4．廣告尺寸廣告尺寸應(yīng)為原則尺寸，全尺寸banner不超出14KB。第20頁(yè)第20頁(yè)（五）知識(shí)解說(shuō)與操作示范（15）15.3.2文獻(xiàn)夾、文獻(xiàn)命名規(guī)范主要命名規(guī)則有：（1）文獻(xiàn)夾命名普通采用英文小寫字母，特殊情況能夠使用中文拼音，常見(jiàn)文獻(xiàn)夾命名：存儲(chǔ)圖形文獻(xiàn)文獻(xiàn)夾命名為image，存儲(chǔ)flash文獻(xiàn)文獻(xiàn)夾命名為flash，存儲(chǔ)CSS樣式表文獻(xiàn)文獻(xiàn)夾命名為style或CSS，存儲(chǔ)JavaScript腳本文獻(xiàn)夾命名為JS，存入友情鏈接文獻(xiàn)夾命名為link，存儲(chǔ)indlude文獻(xiàn)文獻(xiàn)夾命名為include。（2）文獻(xiàn)名稱統(tǒng)一用小寫英文字母、數(shù)字和下劃線組合。（3）索引文獻(xiàn)命名為index.html，主內(nèi)容頁(yè)命名為main.html。（4）菜單名稱用菜單名英文單詞或組合英文單詞命名。（5）圖片、動(dòng)畫文獻(xiàn)命名以英文單詞或漢語(yǔ)拼音縮寫命名。第21頁(yè)第21頁(yè)（六）課堂模仿實(shí)踐打開(kāi)網(wǎng)站“課堂實(shí)踐”文獻(xiàn)夾“16網(wǎng)頁(yè)設(shè)計(jì)”中網(wǎng)頁(yè)文檔“16.html”,利用本章所簡(jiǎn)介辦法和技巧對(duì)該網(wǎng)頁(yè)頁(yè)面布局、顏色搭配、文字圖像進(jìn)行合理調(diào)整和優(yōu)化。然后瀏覽其效果，直到自己認(rèn)為滿意為止。第22頁(yè)第22頁(yè)（八）歸納總結(jié)

本章主要對(duì)網(wǎng)站規(guī)劃和網(wǎng)頁(yè)設(shè)計(jì)進(jìn)行了剖析，分析了網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中一些基本原理和辦法，主要包括版面布局、外觀設(shè)計(jì)、Logo設(shè)計(jì)、色彩設(shè)計(jì)、導(dǎo)航設(shè)