第一~三章網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識(shí)

1、第一三章網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識(shí)課程目標(biāo)要求：了解Internet的功能；理解WWW和網(wǎng)頁、網(wǎng)站的相關(guān)概念；了解常用的網(wǎng)頁制作工具；掌握建設(shè)網(wǎng)站的基本方法和流程；了解頁面的構(gòu)成元素；掌握導(dǎo)航和版式設(shè)計(jì)的基本類型；掌握網(wǎng)頁風(fēng)格設(shè)計(jì)的基本要點(diǎn)和風(fēng)格；了解靜態(tài)網(wǎng)頁設(shè)計(jì)色彩的基礎(chǔ)知識(shí)；掌握網(wǎng)頁配色的基本規(guī)則和注意要點(diǎn)。重點(diǎn)：掌握導(dǎo)航和版式設(shè)計(jì)的基本類型；掌握網(wǎng)頁風(fēng)格設(shè)計(jì)的基本要點(diǎn)和風(fēng)格；掌握網(wǎng)頁配色的基本規(guī)則和注意要點(diǎn)。難點(diǎn)：1、掌握導(dǎo)航和版式設(shè)計(jì)的基本類型；2、掌握網(wǎng)頁風(fēng)格設(shè)計(jì)的基本要點(diǎn)和風(fēng)格；3、掌握網(wǎng)頁配色的基本規(guī)則和注意要點(diǎn)。本節(jié)內(nèi)容第一章 網(wǎng)頁和網(wǎng)站的制作流程第二章 網(wǎng)頁版式設(shè)計(jì)原則第三章 網(wǎng)頁色彩

2、設(shè)計(jì)1.1網(wǎng)頁與網(wǎng)站1.1.1 計(jì)算機(jī)網(wǎng)絡(luò)與網(wǎng)絡(luò)協(xié)議 計(jì)算機(jī)網(wǎng)絡(luò)：是Internet的基礎(chǔ)，是多臺(tái)計(jì)算機(jī)通過特定的鏈接方式構(gòu)成的一個(gè)計(jì)算機(jī)集合體。 網(wǎng)絡(luò)協(xié)議：可以理解網(wǎng)絡(luò)中的設(shè)備互相“打交道”是共同遵循的一套規(guī)則，即以何種方法獲得所需的信息。1.1.2 Internet1.什么是Internet Internet即“因特網(wǎng)”，它是目前全球最大的、開放的計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)。是一個(gè)基于TCP/IP的網(wǎng)絡(luò)，由分布在各個(gè)國家的數(shù)以萬計(jì)的網(wǎng)絡(luò)互聯(lián)設(shè)備組成。1.1.2 Internet1.什么是Internet （1） Internet起源于美國國防部的高級(jí)研究計(jì)劃局，最初主要用于軍事。 20世紀(jì)70年代迅速

3、壯大，發(fā)展成科研和教育機(jī)構(gòu)服務(wù)的網(wǎng)絡(luò)。 （2） Internet提供的服務(wù)：WWW服務(wù)（網(wǎng)頁瀏覽服務(wù)）、電子郵件、文件傳輸（FTP）、在線聊天、網(wǎng)上購物、網(wǎng)絡(luò)炒股、聯(lián)網(wǎng)游戲等等。1.1.3 WWW1.什么是WWW （1）WWW又稱萬維網(wǎng)，簡稱為Web或3W，是一種建立在Internet上的、龐大的、基于超文本的網(wǎng)絡(luò)信息系統(tǒng)。 具有全球性、交互性、動(dòng)態(tài)性、跨平臺(tái)、分布式等特點(diǎn)。 （2）常用瀏覽器： Internet Explorer和Netscape。1.1.3 WWW2. WWW瀏覽器與服務(wù)器（1） WWW瀏覽器：它是WWW的窗口或翻譯器，是專門用來定位和訪問web信息的應(yīng)用程序或工具軟件。（

4、2） WWW服務(wù)器：是對(duì)瀏覽器的請(qǐng)求提供服務(wù)的計(jì)算機(jī)及其相應(yīng)的服務(wù)程序。網(wǎng)頁設(shè)計(jì)者將制作好的網(wǎng)頁存放在服務(wù)器上供用戶瀏覽。 WWW服務(wù)器采用客戶機(jī)/服務(wù)器的工作模式。1.1.4 統(tǒng)一資源定位器URL 1.URL：是對(duì)Internet上資源的一種準(zhǔn)確定位機(jī)制，它以一種全世界統(tǒng)一的、唯一標(biāo)識(shí)來確定某個(gè)網(wǎng)絡(luò)資源，可以訪問Internet任何一臺(tái)主機(jī)或者主機(jī)上的文件。 1.1.4 統(tǒng)一資源定位器URL2.URL的組成：檢索資源所使用的協(xié)議類型、存放資源的主機(jī)域名、資源所在的路徑名與文件名。3.URL的地址格式：應(yīng)用協(xié)議類型:/主機(jī)域名/路徑/文件名 應(yīng)用協(xié)議類型：指獲取信息的通信協(xié)議，即數(shù)據(jù)的傳輸方式

5、。例如：HTTP、FTP、NEWS等協(xié)議類型。 主機(jī)域名：指資源所在服務(wù)器的地址，可以是IP地址，也可以是域名地址。例如：IP地址：；域名地址：。 路徑：指信息資源在web服務(wù)器上的目錄。 文件名：指要訪問的文件名。1.1.5 搜索引擎 搜索引擎：是一個(gè)對(duì)Internet上信息資源進(jìn)行搜集整理、供用戶快速查詢的系統(tǒng)。1.1.6 網(wǎng)頁與網(wǎng)站1.網(wǎng)頁（1）網(wǎng)頁的本質(zhì)HTML源代碼。 網(wǎng)頁是用HTML寫成的文檔，在Internet中可以通過瀏覽器程序進(jìn)行瀏覽。（2）網(wǎng)頁分類：靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁 靜態(tài)網(wǎng)頁：運(yùn)行于客戶端的瀏覽器，只能固定顯示事先設(shè)計(jì)好的網(wǎng)頁的內(nèi)容，無法與WWW服務(wù)器進(jìn)行動(dòng)態(tài)交互。網(wǎng)頁后

6、綴名：.htm .html等。 動(dòng)態(tài)網(wǎng)頁：是指用ASP、PHP、JSP、CGI、ASP.NET等技術(shù)制作的網(wǎng)頁。 網(wǎng)頁是否需要經(jīng)過服務(wù)器端運(yùn)行，是判斷網(wǎng)頁是否屬于動(dòng)態(tài)網(wǎng)頁的重要標(biāo)志。1.1.6 網(wǎng)頁與網(wǎng)站 2.網(wǎng)頁的概念 網(wǎng)頁是用HTML語言編寫的，通過WWW網(wǎng)傳輸，并被Web瀏覽器翻譯成可以顯示出來的集合文本、圖片、聲音和數(shù)字電影等新形勢(shì)的頁面文件。1.1.6 網(wǎng)頁與網(wǎng)站 3.網(wǎng)站 網(wǎng)站：也稱為站點(diǎn)，是包括主頁在內(nèi)的多個(gè)網(wǎng)頁的集合。1.1.7 網(wǎng)頁設(shè)計(jì)常用的工具1. 網(wǎng)頁制作工具（1）文本編輯器網(wǎng)頁制作通常使用HTML語言，HTML文檔可以使用多種文件編輯器進(jìn)行編輯。例如記事本、word、寫

7、字板等。（2）Front是由微軟公司推出的網(wǎng)頁制作工具。其界面與word極為相似。（3）Dreamweaver具有可視化編輯界面，用戶不必編寫HTML源代碼就可生成跨平臺(tái)、跨瀏覽器的網(wǎng)頁，即使是初學(xué)者也能制作出專業(yè)水準(zhǔn)的網(wǎng)頁，是網(wǎng)頁設(shè)計(jì)者的首選工具。2.網(wǎng)頁美化工具（1）Photoshop美化網(wǎng)頁常用工具（2）Fireworkes是專門為制作網(wǎng)頁圖形而設(shè)計(jì)的軟件，它能自動(dòng)生成切割圖像、生成光標(biāo)動(dòng)態(tài)感應(yīng)的JAVA程序，具有強(qiáng)大的動(dòng)畫功能和一個(gè)相當(dāng)完美的網(wǎng)絡(luò)圖像生成器。 （3）Flash它可以講聲音、音效、動(dòng)畫等融合在一起，以制作出高品質(zhì)的網(wǎng)頁動(dòng)態(tài)效果。它主要應(yīng)用于網(wǎng)頁動(dòng)畫制作、教學(xué)動(dòng)畫演示，瓦部

8、分也設(shè)計(jì)、多媒體創(chuàng)作領(lǐng)域等。1.1.7 網(wǎng)頁設(shè)計(jì)常用的工具 1.2 網(wǎng)站的制作流程1.規(guī)劃階段（網(wǎng)站策劃）2. 設(shè)計(jì)階段（頁面美工）3.實(shí)施階段（網(wǎng)頁制作）詳細(xì)流程1.站點(diǎn)策劃2.構(gòu)思草圖3.美工設(shè)計(jì)4.圖形制作5.腳本編程6.圖形頁面整合7.測(cè)試發(fā)布詳細(xì)流程1.站點(diǎn)策劃2.構(gòu)思草圖3.美工設(shè)計(jì)4.圖形制作5.腳本編程6.圖形頁面整合7.測(cè)試發(fā)布第二章 網(wǎng)頁版式設(shè)計(jì)原則教 師：于丹 時(shí) 間：3.9課程目標(biāo)要求： 了解頁面的構(gòu)成元素；了解導(dǎo)航和版式設(shè)計(jì)的基本類型；了解網(wǎng)頁風(fēng)格設(shè)計(jì)的基本要點(diǎn)和風(fēng)格。重點(diǎn)： 導(dǎo)航和版式設(shè)計(jì)的基本類型；網(wǎng)頁風(fēng)格設(shè)計(jì)的基本要點(diǎn)和風(fēng)格。難點(diǎn)： 導(dǎo)航和版式設(shè)計(jì)的基本類型；網(wǎng)

9、頁風(fēng)格設(shè)計(jì)的基本要點(diǎn)和風(fēng)格。參考資料與書籍1、第二章素材庫2、美工與創(chuàng)意:網(wǎng)頁設(shè)計(jì)藝術(shù).徐延章.北京希望電子出版社，科學(xué)出版社; 第1版.3、HTML網(wǎng)頁設(shè)計(jì)案例指導(dǎo).方強(qiáng)、李靜.電子工業(yè)出版社; 第1版.第二章內(nèi)容2.1頁面的構(gòu)成元素2.2主題設(shè)計(jì)2.3網(wǎng)站名稱及CI形象的設(shè)計(jì)2.4風(fēng)格設(shè)計(jì)2.5 版式設(shè)計(jì)2.6 導(dǎo)航設(shè)計(jì)2.7 視聽元素的設(shè)計(jì)2.1 頁面的構(gòu)成元素 1.頁面設(shè)計(jì)包括：版式、視聽元素、延伸設(shè)計(jì)三部分組成。 （1）網(wǎng)頁的版式：是在有限的屏幕空間中將視聽元素進(jìn)行有機(jī)的排列組合，在表現(xiàn)理性思維的同時(shí)，通過具有個(gè)人風(fēng)格和藝術(shù)特色的視聽傳達(dá)方式傳達(dá)信息，并產(chǎn)生感官上的美感和精神上的藝術(shù)

10、享受。 （2）視聽元素 （3）網(wǎng)頁的延伸：包括網(wǎng)站的主題定位和瀏覽群的定位、智能交互、制作策劃和形象包裝等。 提示：突出網(wǎng)頁的使用性能和社會(huì)功能，是網(wǎng)頁設(shè)計(jì)潛在的第一要義。2.1 頁面的構(gòu)成元素2. 頁面的構(gòu)成元素 設(shè)計(jì)是一個(gè)思考過程，制作是將思考表現(xiàn)出來。也就是說設(shè)計(jì)是網(wǎng)頁的核心和靈魂。 結(jié)合網(wǎng)頁設(shè)計(jì)的過程，按照網(wǎng)頁頁面所包含的各個(gè)構(gòu)成元素分類闡述： 表現(xiàn)主題 網(wǎng)站名稱和CI形象 設(shè)計(jì)風(fēng)格 版式設(shè)計(jì) 色彩運(yùn)用 網(wǎng)頁導(dǎo)航 視聽元素2.2 主題設(shè)計(jì)1 觀察與分析 思考并回答：從圖片上的網(wǎng)頁效果可知網(wǎng)頁的主題是什么？ 用什么題材反映出主題？ 主題：兒童娛樂天地主題：精美咖啡文化2.2 主題設(shè)計(jì)2.

11、主題選擇的應(yīng)該注意一下幾點(diǎn)： 定位小，內(nèi)容精。 挖掘有特色的主題。 主題貼近生活。2.3 網(wǎng)站名稱和CI形象1.CI形象的概念 CI，本是廣告術(shù)語，意思是通過視覺來統(tǒng)一企業(yè)的形象。 2.3 網(wǎng)站名稱和CI形象 2.CI形象包括：設(shè)計(jì)網(wǎng)站的標(biāo)志，網(wǎng)站的標(biāo)準(zhǔn)色彩、網(wǎng)站的標(biāo)準(zhǔn)字體、網(wǎng)站的宣傳標(biāo)語等方面網(wǎng)站的標(biāo)志標(biāo)準(zhǔn)色彩：綠色標(biāo)準(zhǔn)字體：英文宣傳標(biāo)語2.3 網(wǎng)站名稱和CI形象3.設(shè)計(jì)與制作要點(diǎn)（1）網(wǎng)站名稱 網(wǎng)站名稱要合法、合理、合情，不能用反動(dòng)的、色情的、迷信的、危害社會(huì)安全的名詞語句。 網(wǎng)站名稱要簡明扼要、容易記憶。 字?jǐn)?shù)應(yīng)該控制在6個(gè)字以內(nèi)，例如“XX天地”“XX設(shè)計(jì)室”“XX網(wǎng)”等。 一般六個(gè)字

12、寬度是78像素左右，友情鏈接的小標(biāo)志尺寸是88X31像素。 網(wǎng)站名稱要有特色能給瀏覽者留下深刻的第一印象，并賦予更多的感官?zèng)_擊力和空間想象力。2.3 網(wǎng)站名稱和CI形象3. 設(shè)計(jì)與制作要點(diǎn)（2）CI形象設(shè)計(jì)網(wǎng)站的CI形象設(shè)計(jì)包括標(biāo)志、色彩、字體和標(biāo)語。 標(biāo)志設(shè)計(jì)使用圖像處理軟件和動(dòng)畫制作軟件可以完成標(biāo)志的設(shè)計(jì)。 Web的標(biāo)志設(shè)計(jì)常用規(guī)格： 8831像素是Internet上最普遍的標(biāo)志標(biāo)準(zhǔn) 12060像素一般用于一般大小的標(biāo)志 12090像素一般用于大型標(biāo)志 色彩網(wǎng)頁標(biāo)準(zhǔn)色的顏色：藍(lán)色、黃/橙色、黑/灰/白色三大系列色。 字體標(biāo)準(zhǔn)字體指用于標(biāo)志、標(biāo)題、主菜單的特有字體。 一般網(wǎng)頁默認(rèn)的字體是宋體

13、，但為了體現(xiàn)站點(diǎn)特有風(fēng)格，可根據(jù)網(wǎng)站所表達(dá)的內(nèi)涵可以選擇和整體形象更貼切的其他字體。2.3 網(wǎng)站名稱和CI形象4. 設(shè)計(jì)與制作要點(diǎn)（2）CI形象設(shè)計(jì)網(wǎng)站的CI形象設(shè)計(jì)包括標(biāo)志、色彩、字體和標(biāo)語。 標(biāo)語也可以成為banner廣告設(shè)計(jì)，大多數(shù)為GIF圖形。是網(wǎng)頁內(nèi)容宣傳的最主要的方式。 設(shè)計(jì)時(shí)應(yīng)注意以下幾點(diǎn)： 1）圖像模式設(shè)為RGB模式，防止無法直接到處GIF格式的文件 2）注意度量單位為像素（px） 3）標(biāo)志設(shè)計(jì)常用規(guī)格：8831px,12060px,12090px 。 4）banner廣告設(shè)計(jì)規(guī)格：48060px，15068px，8831px。2.4 設(shè)計(jì)風(fēng)格1.風(fēng)格的概念 風(fēng)格是指Web站點(diǎn)

14、的整體形象給瀏覽者的綜合感受?？梢酝ㄟ^版面布局、顯示方式 、交互方式、文字風(fēng)格等多種形式體現(xiàn)出來。 2.4 設(shè)計(jì)風(fēng)格 2.觀察與分析 思考并回答: 以下網(wǎng)頁的設(shè)計(jì)風(fēng)格是什么？ 2.4 設(shè)計(jì)風(fēng)格2.4 設(shè)計(jì)風(fēng)格2.4 設(shè)計(jì)風(fēng)格2.4 設(shè)計(jì)風(fēng)格3.設(shè)計(jì)與制作要點(diǎn)明確網(wǎng)站的服務(wù)對(duì)象，建立有價(jià)值的內(nèi)容明確設(shè)計(jì)的想法與目的，追求適當(dāng)?shù)乃囆g(shù)效果。主題、內(nèi)容、色彩、標(biāo)志、文字、布局等方面考慮。努力去建立和加強(qiáng)效果。特色、體現(xiàn)網(wǎng)站風(fēng)格，并加以重點(diǎn)宣傳 例如：突出標(biāo)準(zhǔn)色彩（文字連接色彩、圖片的主色彩、背景色等）、強(qiáng)化標(biāo)志于每個(gè)頁面、設(shè)計(jì)醒目的宣傳標(biāo)語、統(tǒng)一的圖片處理效果、統(tǒng)一的語氣和人稱等等2.5 版式設(shè)計(jì)1.

15、 版式設(shè)計(jì)-網(wǎng)頁頁面布局的模塊 網(wǎng)頁頁面模塊包括：網(wǎng)站標(biāo)志、廣告條、主菜單、新聞、搜索、友情鏈接、郵件列表、計(jì)數(shù)器、版權(quán)等等。 2.5 版式設(shè)計(jì)“口”型布局2.5 版式設(shè)計(jì)對(duì)稱布局（色彩對(duì)比：一半深色，一半淺色）2.5 版式設(shè)計(jì)“T”結(jié)構(gòu)頂部為橫條網(wǎng)站標(biāo)志和廣告條下方左側(cè)為主菜單右側(cè)為顯示內(nèi)容2.5 版式設(shè)計(jì)“三”型布局 設(shè)計(jì)時(shí) 常使用水平、垂直和弧形導(dǎo)線使整體頁面更醒目2.5 版式設(shè)計(jì)POP布局2.5 版式設(shè)計(jì)其他個(gè)性化板式設(shè)計(jì)范例1：動(dòng)漫地帶范例2：漢堡等美食預(yù)訂網(wǎng)范例3：吉日小居個(gè)人主頁 簡單生活 閑雅齋范例4：女性網(wǎng)頁范例5：溫馨的家范例6：音樂歌曲 游戲玩家2.6 導(dǎo)航設(shè)計(jì)觀察與分析

16、 思考并回答 ： 網(wǎng)頁導(dǎo)航可以使用什么素材? 2.6 導(dǎo)航設(shè)計(jì) 文字2.6 導(dǎo)航設(shè)計(jì)3.5 網(wǎng)頁導(dǎo)航觀察與分析 圖片2.6 導(dǎo)航設(shè)計(jì)觀察與分析 見文件/FLASH網(wǎng)頁。 2.6 導(dǎo)航設(shè)計(jì)2. 設(shè)計(jì)與制作要點(diǎn) 導(dǎo)航菜單上的信息簡明扼要 注意文字長度，使導(dǎo)航菜單整體和諧注意色彩的呈現(xiàn)，在整體頁面中清晰醒目 2.7 視聽元素的設(shè)計(jì)1. 觀察與分析 觀察范例并總結(jié)：網(wǎng)頁頁面的視聽元素有哪些？ 范例：cinema 范例：汽車展銷 2.7 視聽元素的設(shè)計(jì)2. 視聽元素主要包括： 背景、文字、顏色、導(dǎo)航菜單、音樂、圖標(biāo)、圖像、按鈕、FLASH動(dòng)畫和動(dòng)態(tài)影像。 2.7 視聽元素的設(shè)計(jì)3. 視聽元素背景 方格背

17、景屬于沙紋背景2.7 視聽元素的設(shè)計(jì)3. 視聽元素背景 顏色背景2.7 視聽元素的設(shè)計(jì)3. 視聽元素背景 范例1：momo 范例2：動(dòng)畫設(shè)計(jì) 范例3：個(gè)人筆記 FLASH背景第三章 網(wǎng)頁色彩設(shè)計(jì)教 師：于丹 時(shí) 間：3.9課程目標(biāo)要求：了解靜態(tài)網(wǎng)頁設(shè)計(jì)色彩的基礎(chǔ)知識(shí)及網(wǎng)頁配色的基本規(guī)則和注意要點(diǎn)。重點(diǎn)： 網(wǎng)頁配色的基本規(guī)則和注意要點(diǎn)。難點(diǎn)： 網(wǎng)頁配色的基本規(guī)則和注意要點(diǎn)。參考資料與網(wǎng)址1、常用網(wǎng)頁色彩搭配庫3、配色設(shè)計(jì)原理.奧博斯科編輯部.中國青年出版社; 第1版. 第三章內(nèi)容3.1色彩基礎(chǔ)知識(shí)3.2色彩象征3.3配色方案3.4 各類別網(wǎng)頁賞析3.1 色彩的基礎(chǔ)知識(shí)1.色彩的相關(guān)概念（1）色彩

18、的基本概念 自然界中色彩可分為非色彩和色彩兩大類。 非色彩指黑色、白色和灰色。其他的顏色均屬于彩色。飽和度：也叫純度，指顏色純潔程度。色相：也叫色澤，是顏色的基本特征，反映顏色的基本面貌。明度：也叫亮度，指顏色的深淺。3.1 色彩的基礎(chǔ)知識(shí)1.色彩的相關(guān)概念（2）色彩的三原色 色彩的三原色指的是紅、綠、藍(lán)。通過調(diào)整這三個(gè)基色RGB（紅、綠、藍(lán)）就可以調(diào)整出其他的顏色。3.1 色彩的基礎(chǔ)知識(shí)1.色彩的相關(guān)概念（3）色彩的配色方案 暖色調(diào)：即紅色、橙色、黃色等色彩，可使主頁呈現(xiàn)溫馨、和煦和熱情的氛圍。 冷色調(diào)：即情色、了白色和紫色等色彩，可是主頁呈現(xiàn)寧靜、清涼和高壓的氛圍。相近色：將色彩按“紅-黃

19、-綠-藍(lán)-紅”依次過度漸變可以得到一個(gè)色彩環(huán)，即紅、橙、橙黃、黃、黃綠、青綠、藍(lán)綠、藍(lán)、藍(lán)紫、紫、紫紅、紅。 3.1 色彩的基礎(chǔ)知識(shí)1.色彩的相關(guān)概念（4）對(duì)比色調(diào) 對(duì)比色調(diào)即色性完全相反的色彩搭配?？僧a(chǎn)生強(qiáng)烈的視覺效果。 配色時(shí)應(yīng)注意把握“總體協(xié)調(diào)，局部對(duì)比”的原則，是總體色調(diào)統(tǒng)一和諧，局部是錢強(qiáng)烈對(duì)比，避免產(chǎn)生刺眼的不良效果。 3.2 色彩的象征 代表熱情、奔放、喜悅，使人產(chǎn)生沖動(dòng)、憤怒、熱情和活力的感覺。代表高貴、富有，明度高，具有快樂、希望、智慧和輕快的個(gè)性。 介于冷暖兩色之間，富有生命和生機(jī)，從而顯得和睦、寧靜健康的感覺。 代表歡快、甜美與收獲，具有輕快、歡樂、熱烈、溫馨和時(shí)尚的感覺。 體現(xiàn)涼爽、清新更新的感覺。 代表嚴(yán)肅、夜晚、沉著，具有深沉、神秘、寂靜、悲哀和壓抑的感覺。 代表純潔、簡單，具有潔白、明快、純真和清潔的感覺。 代表敏感、消極，具有中庸、平凡、溫和、謙讓、中立和