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

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

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

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

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

第8頁第8頁（五）知識解說與操作示范（3）

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

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

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

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

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