第1章網(wǎng)頁設(shè)計(jì)基礎(chǔ)朱金華教學(xué)目標(biāo)熟悉網(wǎng)頁設(shè)計(jì)的相關(guān)概念。掌握網(wǎng)站開發(fā)流程。了解Web設(shè)計(jì)的原則、網(wǎng)站結(jié)構(gòu)規(guī)劃（欄目、目錄）的原則。了解網(wǎng)頁布局設(shè)計(jì)的原則、布局設(shè)計(jì)的類型、布局設(shè)計(jì)元素、布局設(shè)計(jì)技術(shù)。了解網(wǎng)站內(nèi)容設(shè)計(jì)的元素（文本、多媒體）和如何進(jìn)行內(nèi)容排版。了解網(wǎng)頁設(shè)計(jì)的構(gòu)成要素和風(fēng)格設(shè)計(jì)的類型。了解網(wǎng)頁色彩設(shè)計(jì)的基礎(chǔ)知識(shí)。導(dǎo)入為什么要學(xué)習(xí)此課程？Why?傳統(tǒng)信息的發(fā)布主要形式：張貼廣告、發(fā)送傳單、報(bào)刊雜志、廣播電視，其缺點(diǎn)主要為：受眾范圍窄、費(fèi)用高、不及時(shí)、不豐富。而網(wǎng)絡(luò)的出現(xiàn)給每個(gè)人提供了平等獲取信息的機(jī)會(huì)。以企業(yè)建站為例，商機(jī)無限。What?結(jié)合前面已學(xué)的相關(guān)課程（網(wǎng)絡(luò)視覺設(shè)計(jì)、電腦圖文設(shè)計(jì)），能獨(dú)立或團(tuán)隊(duì)完成一個(gè)網(wǎng)站的設(shè)計(jì)或模擬某個(gè)網(wǎng)站完成制作。How?以實(shí)踐為主，多動(dòng)手，多討論充分利用課堂時(shí)間，在課堂完成內(nèi)容的入門。形成對(duì)網(wǎng)頁設(shè)計(jì)與制作的興趣，嘗試制作你所見到的每一個(gè)網(wǎng)頁或網(wǎng)頁特效，不局限在課堂的范圍之內(nèi)。提高自己解決問題的能力！1.1網(wǎng)頁概述B/S結(jié)構(gòu)（Browser/Server，瀏覽器/服務(wù)器模式）WWW（Web）統(tǒng)一資源定位器（URL）基本語法：scheme://host.domain:port/path/filename網(wǎng)站（WebSite）網(wǎng)頁（Webpages）首頁（Homepage）網(wǎng)頁編輯器瀏覽器制作網(wǎng)頁的三大技術(shù)：HTML（超文本標(biāo)記語言）、CSS（層疊樣式表）、JavaScript1.2網(wǎng)站開發(fā)流程1.3Web設(shè)計(jì)基礎(chǔ)1.3.1Web設(shè)計(jì)原則1.3.2網(wǎng)站結(jié)構(gòu)規(guī)劃1.3.1Web設(shè)計(jì)原則1.明確站點(diǎn)類型2.保持站點(diǎn)簡潔明確3.網(wǎng)頁設(shè)計(jì)一致性4.注重用戶體驗(yàn)研究用戶有效的導(dǎo)航和位置設(shè)計(jì)保持整個(gè)網(wǎng)站一致性的設(shè)計(jì)清晰準(zhǔn)確的內(nèi)容設(shè)計(jì)，便于用戶快速的獲得所需的任何信息1.3.2網(wǎng)站結(jié)構(gòu)規(guī)劃1.網(wǎng)站欄目規(guī)劃欄目內(nèi)容一定要緊扣主題欄目的目錄設(shè)計(jì)要求簡潔，結(jié)構(gòu)層次清晰，以方便網(wǎng)站的管理欄目的內(nèi)容要突出重點(diǎn)，對(duì)于用戶經(jīng)常要訪問的內(nèi)容應(yīng)直接放入主欄目下為方便用戶使用，一般情況下訪問者應(yīng)能夠在3-5次鼠標(biāo)點(diǎn)擊后可查詢到相關(guān)問題2.目錄結(jié)構(gòu)規(guī)劃建立目錄的建議目錄規(guī)劃原則1.4布局設(shè)計(jì)1.4.1布局設(shè)計(jì)原則1.4.2布局設(shè)計(jì)類型1.4.3布局設(shè)計(jì)元素1.4.4布局設(shè)計(jì)技術(shù)1.4.1布局設(shè)計(jì)原則網(wǎng)頁布局的內(nèi)容應(yīng)來源于需求，欄目的重要程度決定了網(wǎng)頁布局的形式網(wǎng)頁布局應(yīng)區(qū)分欄目模塊的重要程度網(wǎng)頁布局必須尊重用戶習(xí)慣1.4.2布局設(shè)計(jì)類型1.傳統(tǒng)布局類型“國”字型“匡”字形布局標(biāo)題正文型框架型、封面型Flash型“三”或“川”字形布局2.網(wǎng)頁設(shè)計(jì)趨勢響應(yīng)式網(wǎng)頁設(shè)計(jì)全幅背景單頁式網(wǎng)頁固定式菜單扁平化設(shè)計(jì)微動(dòng)畫卡片式設(shè)計(jì)隱藏式菜單超大的字體幽靈按鈕1.4.3布局設(shè)計(jì)元素頁面規(guī)格Logo設(shè)計(jì)頁頭文本頁腳圖片多媒體留白1.4.4布局設(shè)計(jì)技術(shù)1.TABLE表格布局2.DIV+CSS布局3.框架布局4.響應(yīng)式布局1.5內(nèi)容設(shè)計(jì)1.5.1文本1.文字的格式化2.文字的強(qiáng)調(diào)3.文字的顏色1.5.2多媒體1.5.3內(nèi)容排版1.6風(fēng)格設(shè)計(jì)1.6.1網(wǎng)頁設(shè)計(jì)構(gòu)成要素1.點(diǎn)的構(gòu)成2.線的構(gòu)成3.面的構(gòu)成4.混合的構(gòu)成1.6.2網(wǎng)頁設(shè)計(jì)的風(fēng)格類型1.平面風(fēng)格2.矢量風(fēng)格3.像素風(fēng)格4.三維風(fēng)格1.7色彩設(shè)計(jì)1.7.1色彩基礎(chǔ)1.7.2網(wǎng)頁中的色彩1.7.3網(wǎng)頁配色方案1.7.1色彩基礎(chǔ)1.色彩的感覺色彩的醒目性、色彩感覺的偏差2.色彩的屬性色相、明度、純度3.常用的基本概念原色、間色、復(fù)色、補(bǔ)色、鄰近色、類似色、同類色、暖色、冷色4.網(wǎng)頁色彩的色調(diào)組合色調(diào)、色彩的對(duì)比、色彩的調(diào)和1.7.2網(wǎng)頁中的色彩1.網(wǎng)頁安全色216種2.網(wǎng)頁色彩模式RGB色彩模型3.網(wǎng)頁設(shè)計(jì)中使用色彩的基本原則整體性、適用性、獨(dú)特性4.網(wǎng)頁設(shè)計(jì)中色彩的作用視覺區(qū)域劃分、引導(dǎo)主次關(guān)系、營造活躍氣氛1.7.3網(wǎng)頁配色方案1.色彩的象征情感紅色的熱情、橙色的華麗、黃色的明快、綠色的活力、藍(lán)色的博大、紫色的高貴、黑色的神秘、灰色的內(nèi)涵、白色的純潔2.三種以上的色彩搭配常規(guī)的網(wǎng)頁配色方法——不要超過三種以上的顏色3.主題色彩印象不同年齡段的印象、性別的印象、活力休閑的印象、優(yōu)雅浪漫的印象、簡潔質(zhì)樸的印象、古典神秘的印象、自然舒適的印象、華麗高貴的印象、速度力量的印象1.8小結(jié)本章包括網(wǎng)頁相關(guān)概念、網(wǎng)站開發(fā)流程、Web設(shè)計(jì)原則、網(wǎng)站結(jié)構(gòu)規(guī)劃、布局設(shè)計(jì)的原則和類型、布局設(shè)計(jì)的元素、布局設(shè)計(jì)技術(shù)、網(wǎng)頁文本與多媒體設(shè)計(jì)、網(wǎng)頁內(nèi)容排版、網(wǎng)頁設(shè)計(jì)的構(gòu)成要素與風(fēng)格類型設(shè)計(jì)、色彩基礎(chǔ)知識(shí)與網(wǎng)頁配色。Html、CSS、JavaScript是制作網(wǎng)頁的三大法寶。他們在網(wǎng)頁設(shè)計(jì)中扮演了重要的角色。Html是基礎(chǔ)架構(gòu)，CSS用來美化頁面，而JavaScript用來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)性、交互性。有效的Web設(shè)計(jì)不