《網頁設計與制作》

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

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

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

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

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

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

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

2．網頁文獻大小普通地，網站首頁大?。òㄋ袌D像、文本、多媒體對象）不宜超出30KB，網站二級頁面文獻（包括所有圖像、文本、多媒體對象等）不宜超出45KB。假如網頁大太，網頁下載速度會變慢，影響瀏覽速度。第19頁第19頁（五）知識解說與操作示范（14）3．網頁長度從理論上來講網頁長度能夠無限長，但普通不宜超出3屏，最佳長度為1.8～2.5屏。4．廣告尺寸廣告尺寸應為原則尺寸，全尺寸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)一用小寫英文字母、數字和下劃線組合。（3）索引文獻命名為index.html，主內容頁命名為main.html。（4）菜單名稱用菜單名英文單詞或組合英文單詞命名。（5）圖片、動畫文獻命名以英文單詞或漢語拼音縮寫命名。第21頁第21頁（六）課堂模仿實踐打開網站“課堂實踐”文獻夾“16網頁設計”中網頁文檔“16.html”,利用本章所簡介辦法和技巧對該網頁頁面布局、顏色搭配、文字圖像進行合理調整和優(yōu)化。然后瀏覽其效果，直到自己認為滿意為止。第22頁第22頁（八）歸納總結

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