網(wǎng)頁(yè)設(shè)計(jì)與制作32課時(shí)完整理論講義

292-60/60講義（首頁(yè)）課程名稱網(wǎng)頁(yè)設(shè)計(jì)與制作課程編號(hào)050420117總計(jì)：32學(xué)時(shí)講課：16學(xué)時(shí)實(shí)驗(yàn)：16學(xué)時(shí)上機(jī)：學(xué)時(shí)學(xué)分2類別必修課（）選修課（）理論課（）實(shí)驗(yàn)課（）任課教師劉焰職稱講師授課對(duì)象專業(yè)班級(jí)：2007級(jí)工業(yè)設(shè)計(jì)（本）班共1個(gè)班基本教材和主要參考資料基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁(yè)設(shè)計(jì)與制作》胡菘.中國(guó)青年出版社參考資料：《精通CSS+DIV網(wǎng)頁(yè)樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁(yè)制作實(shí)用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁(yè)制作循序漸進(jìn)教程》龍騰科技編著．兵器工業(yè)出版社教學(xué)目的要求本課程是非計(jì)算機(jī)專業(yè)的專業(yè)選修課。通過(guò)該課程的學(xué)習(xí)，引導(dǎo)學(xué)生了解網(wǎng)頁(yè)、網(wǎng)站、主頁(yè)和WWW服務(wù)器的基本概念，熟悉建立網(wǎng)站以及發(fā)布網(wǎng)站的步驟和過(guò)程；掌握使用可視化網(wǎng)頁(yè)制作工具Dreamweaver建立網(wǎng)站、制作網(wǎng)頁(yè)的方法；能夠收集制作網(wǎng)頁(yè)的多媒體素材，熟悉基本的圖像處理和動(dòng)畫(huà)制作技術(shù)；掌握使用HTML語(yǔ)言的基本知識(shí)等。依據(jù)“項(xiàng)目導(dǎo)向、案例驅(qū)動(dòng)、突出實(shí)踐、關(guān)注過(guò)程”的教學(xué)理念，通過(guò)項(xiàng)目和案例，介紹Dreamweaver文本、圖片、表格、層、超鏈接、表單、CSS以及行為和事件的使用方法，最終完成一個(gè)專題網(wǎng)站的設(shè)計(jì)與制作。教學(xué)重點(diǎn)難點(diǎn)了解網(wǎng)頁(yè)制作和網(wǎng)站建設(shè)所需的基本知識(shí)，理解HTML語(yǔ)言和CSS樣式個(gè)屬性以及網(wǎng)頁(yè)設(shè)計(jì)工具軟件Dreamweaver和Photoshop的使用及應(yīng)用，掌握網(wǎng)頁(yè)制作和網(wǎng)站建設(shè)所需的基本技能。能夠根據(jù)任務(wù)需求建立客戶端的的靜態(tài)網(wǎng)頁(yè)和網(wǎng)站。《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程講義理論學(xué)時(shí)部分第一章網(wǎng)頁(yè)設(shè)計(jì)概述授課學(xué)時(shí)：2授課內(nèi)容：1.1網(wǎng)絡(luò)的概念1.2網(wǎng)站與網(wǎng)頁(yè)的概念1.3相關(guān)知識(shí)1.4網(wǎng)頁(yè)設(shè)計(jì)師必備的專業(yè)素質(zhì)基本要求：重點(diǎn)講授網(wǎng)站，網(wǎng)頁(yè)涉及的概念；了解網(wǎng)頁(yè)設(shè)計(jì)涉及的相關(guān)概念；了解網(wǎng)頁(yè)設(shè)計(jì)的語(yǔ)言HTML；掌握學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的某一種工具；理解網(wǎng)站和網(wǎng)頁(yè)的關(guān)系。重點(diǎn)與難點(diǎn)：重點(diǎn)：理解網(wǎng)站和網(wǎng)頁(yè)的關(guān)系；難點(diǎn)：HTML語(yǔ)言設(shè)計(jì)，網(wǎng)站和網(wǎng)頁(yè)的關(guān)系。信息(information),已經(jīng)成為哲學(xué)、自然科學(xué)、技術(shù)科學(xué)和社會(huì)科學(xué)等各個(gè)領(lǐng)域所廣泛應(yīng)用的概念。隨著信息技術(shù)的發(fā)展，網(wǎng)絡(luò)成為人們共享信息的必然。建立網(wǎng)站也就是必然逝在必行。如何建好網(wǎng)站，如何建立有自身特色的網(wǎng)站將是我們這門(mén)課程所要講述的內(nèi)容。1．1網(wǎng)絡(luò)的概念1.1.1計(jì)算機(jī)網(wǎng)絡(luò)的定義和發(fā)展在20世紀(jì)50年代中期，許多系統(tǒng)都將地理上分散的多個(gè)終端通過(guò)通訊線路連接到一臺(tái)中心計(jì)算機(jī)上，這樣就是出現(xiàn)了計(jì)算機(jī)系統(tǒng)。隨著遠(yuǎn)程終端的增多，在主機(jī)前增加了前端機(jī)，隨著發(fā)展，人們有了更深的理解。把計(jì)算機(jī)網(wǎng)絡(luò)定義為“以傳輸信息為目的的而連接起來(lái)，實(shí)現(xiàn)遠(yuǎn)程信息處理或進(jìn)一步達(dá)到資源共享的系統(tǒng)”，這就是網(wǎng)絡(luò)的趨形。20世紀(jì)70年代至80年代中期計(jì)算機(jī)網(wǎng)絡(luò)得到了迅速的發(fā)展。ISO在1984年頒布了OSI/RM。定義為新一代計(jì)算機(jī)網(wǎng)絡(luò)體系結(jié)構(gòu)的基礎(chǔ)，這七層模型分別為：物理層、鏈路層、網(wǎng)絡(luò)層、傳輸層、會(huì)話層、表示層、應(yīng)用層。目前計(jì)算機(jī)網(wǎng)絡(luò)的比較公認(rèn)的定義是：計(jì)算機(jī)網(wǎng)絡(luò)是指在網(wǎng)絡(luò)協(xié)議的控制下，通過(guò)通訊設(shè)備和線路來(lái)實(shí)現(xiàn)地理位置不同且具有獨(dú)立功能的多個(gè)計(jì)算機(jī)系統(tǒng)之間的連接，并通過(guò)網(wǎng)絡(luò)操作系統(tǒng)等網(wǎng)絡(luò)軟件來(lái)實(shí)現(xiàn)資源共享的系統(tǒng)。1.1.2計(jì)算機(jī)網(wǎng)絡(luò)的分類計(jì)算機(jī)網(wǎng)絡(luò)分類方法多種多樣，常用的方法有：按網(wǎng)絡(luò)的拓?fù)浣Y(jié)構(gòu)分類，按傳輸介質(zhì)分類，按速率的分類，按數(shù)據(jù)交換方式分類以及按網(wǎng)絡(luò)覆蓋的地理范圍分類。按照網(wǎng)絡(luò)覆蓋的地理位置范圍的大小分為：局域網(wǎng)，城域網(wǎng)，廣域網(wǎng)。通常我們說(shuō)的網(wǎng)絡(luò)其實(shí)多是指廣域網(wǎng)。1.1.3網(wǎng)絡(luò)的功能由網(wǎng)絡(luò)的定義我們可知網(wǎng)絡(luò)的功能就是數(shù)據(jù)通訊和資源共享。1．2網(wǎng)站與網(wǎng)頁(yè)的概念1.2.1網(wǎng)站網(wǎng)站功能：網(wǎng)站是提供發(fā)布信息、收集信息的平臺(tái)。網(wǎng)站概念：簡(jiǎn)單地說(shuō)，網(wǎng)站是由網(wǎng)頁(yè)通過(guò)超級(jí)超鏈接有機(jī)地集合而成，通過(guò)瀏覽器看到的畫(huà)面就是網(wǎng)頁(yè)。網(wǎng)站的分類：從網(wǎng)站的目的將網(wǎng)站分為：企業(yè)網(wǎng)站、政府網(wǎng)站、專業(yè)網(wǎng)站和個(gè)人網(wǎng)站。網(wǎng)站的管理功能：故障管理、計(jì)費(fèi)管理、配置管理、性能管理、安全管理、站點(diǎn)信息管理。網(wǎng)站的地址:為了使得連入的INTERNET的眾多主機(jī)和通訊設(shè)備在通信時(shí)能夠相互識(shí)別，因而在internet中每臺(tái)計(jì)算機(jī)都分配一個(gè)唯一的IP地址，每個(gè)IP地址是由四個(gè)整數(shù)組成，每二個(gè)整數(shù)之間用點(diǎn)隔開(kāi)例如：35,其中IP地址的每一個(gè)整數(shù)都不能大于255。其結(jié)構(gòu)如下：計(jì)算機(jī)名組織機(jī)構(gòu)名網(wǎng)絡(luò)名最高層域名在INTERNET中把IP定義了五類地址，即A，B，C，D，E類地址。1.2.2網(wǎng)頁(yè)（1）網(wǎng)頁(yè)制作的基礎(chǔ)知識(shí)人們?cè)谕ㄟ^(guò)INTERNET獲取信息的同時(shí)，紛紛建立自己的主頁(yè)和網(wǎng)站，向世界展示自己。一個(gè)網(wǎng)站可以包含一個(gè)或多個(gè)網(wǎng)頁(yè)，這些網(wǎng)頁(yè)以一定的方式連接在一起，成為一個(gè)整體，供人們觀賞和為人們提供服務(wù)。一個(gè)成功的網(wǎng)站的建設(shè)離不開(kāi)其中每一張制作精美的網(wǎng)頁(yè)。（2）HTML語(yǔ)言超文本文件的格式早在1945年就由VannevarBush提出，他在理論上建立了一個(gè)超文本文件系統(tǒng)。1965年TedNelson第一次使用“超文本”一詞來(lái)形容這種管理信息的系統(tǒng)。與Bush一樣，他的超文本文件系統(tǒng)“Xanadu”，最終也未獲得成功。1967年，在IBM資助下，世界上第一個(gè)真正運(yùn)行成功的“超文本編輯系統(tǒng)”建成，這項(xiàng)研究由AndriesVanDam主持，在美國(guó)布朗大學(xué)最終完成。1969年，美國(guó)國(guó)防部高級(jí)研究計(jì)劃署建立了ARPA網(wǎng)，該網(wǎng)絡(luò)最成功的技術(shù)就是TCP/IP協(xié)議。超文本標(biāo)識(shí)語(yǔ)言(HyperTextMarkupLanguage，HTML)的HTML最早版本起源于1992年，HTML4.01版于1999年12月24日被推薦使用。HTML最初用于發(fā)布信息，并沒(méi)有在網(wǎng)絡(luò)上使用。但它那極容易使用的顯著特點(diǎn)和隨著網(wǎng)絡(luò)帶寬的逐漸增加，人們便將其作為網(wǎng)絡(luò)上發(fā)布信息的首選語(yǔ)言。超文本標(biāo)識(shí)語(yǔ)言的領(lǐng)頭先鋒是美國(guó)麻省理工學(xué)院計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室的WWW標(biāo)準(zhǔn)化組織，又稱萬(wàn)維網(wǎng)聯(lián)盟，其互聯(lián)網(wǎng)地址為：。有關(guān)HTML語(yǔ)言的各種參考資料和W3C行將發(fā)布的各種新版特征、最新消息等內(nèi)容，均可以在這個(gè)網(wǎng)站上查到。此語(yǔ)言可以把網(wǎng)頁(yè)里的文字、表格、圖象、動(dòng)畫(huà)、聲音和視頻等等有機(jī)地組織在一起，構(gòu)成一種超文本標(biāo)記語(yǔ)言（HTML）。HTML語(yǔ)言生成擴(kuò)展名是.HTM或.HTML的文件。HTML語(yǔ)言是標(biāo)準(zhǔn)的ASCII文件，由一對(duì)標(biāo)記，<HTML>和</HTML>組成,內(nèi)容包括文件的頭,文件的主體,文件結(jié)尾三部分。（3）網(wǎng)站與網(wǎng)頁(yè)的關(guān)系網(wǎng)站是一個(gè)主體，是“框架”；網(wǎng)站突出一個(gè)主題；網(wǎng)站的目標(biāo)是組織；網(wǎng)站好比一本畫(huà)冊(cè)。網(wǎng)頁(yè)是被包含于網(wǎng)站之中的個(gè)體，是“磚瓦”；網(wǎng)頁(yè)圍繞網(wǎng)站主題各分項(xiàng)，豐富和烘托主題；網(wǎng)頁(yè)的目標(biāo)是表現(xiàn)；網(wǎng)頁(yè)好比畫(huà)冊(cè)中的每一個(gè)分頁(yè)。1.3相關(guān)知識(shí)（1）網(wǎng)頁(yè)制作的工具雖然HTML語(yǔ)言是功能強(qiáng)且語(yǔ)法簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言。但是，直接用HTML在普通的文本編輯器上編寫(xiě)制作復(fù)雜精美的網(wǎng)頁(yè)是很不方便的。網(wǎng)頁(yè)設(shè)計(jì)者不得不花大量的時(shí)間去測(cè)試所寫(xiě)的文檔是否合乎其語(yǔ)法規(guī)則，又不能在網(wǎng)頁(yè)設(shè)計(jì)的同時(shí)就了解文檔在瀏覽器上地顯示的確切效果。其次要記憶、掌握大量的HTML語(yǔ)言地語(yǔ)法規(guī)則也不是一件容易的事情。而現(xiàn)在可視化網(wǎng)頁(yè)設(shè)計(jì)工具可以使得設(shè)計(jì)者網(wǎng)頁(yè)設(shè)計(jì)輕松自如。網(wǎng)頁(yè)設(shè)計(jì)的工具很多，當(dāng)前流行的工具有：Frontpage：它是建立和管理專業(yè)網(wǎng)站的簡(jiǎn)易工具，用戶可以精確地將網(wǎng)頁(yè)中的每一個(gè)元素放置在網(wǎng)頁(yè)地任意位置上；用戶可以自定義主題。它具有方便地?cái)?shù)據(jù)庫(kù)管理功能，還能提供靈活的網(wǎng)頁(yè)發(fā)布工具。Dreamweaver：它是Macromedia公司設(shè)計(jì)推出，可以最快的方式將Photoshop等文件移至網(wǎng)頁(yè)；它能夠通過(guò)網(wǎng)站地地圖快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁(yè)；提供了可視化編輯與原代碼編輯同步的設(shè)計(jì)工具；集成了動(dòng)態(tài)出版可視編輯及電子商務(wù)功能，在動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)中網(wǎng)頁(yè)的預(yù)覽無(wú)需通過(guò)瀏覽器；利用它設(shè)計(jì)的網(wǎng)頁(yè)一般不受平臺(tái)的限制。Flash：它能制作可任意放大的動(dòng)畫(huà)，使用方便，它提供的交互動(dòng)畫(huà)文件容量很小，它的使用流技術(shù)播放動(dòng)畫(huà)。以上三種網(wǎng)頁(yè)設(shè)計(jì)工具通常稱為“網(wǎng)頁(yè)設(shè)計(jì)三劍客”。網(wǎng)頁(yè)設(shè)計(jì)的工具很多，常用的還有Interdev，HotmetalPro等等。這里不做一一介紹。（2）網(wǎng)頁(yè)設(shè)計(jì)早期的網(wǎng)頁(yè)外觀是靜態(tài)的，只有文字與靜態(tài)的圖片，用戶只能被動(dòng)地閱讀網(wǎng)頁(yè)制作者提供的信息。其網(wǎng)頁(yè)的內(nèi)容也是靜態(tài)的，若無(wú)外來(lái)干預(yù)，其內(nèi)容不會(huì)自動(dòng)改變，也無(wú)法通過(guò)網(wǎng)頁(yè)實(shí)現(xiàn)與訪問(wèn)網(wǎng)頁(yè)者交互信息的功能。因此，為了克服靜態(tài)網(wǎng)頁(yè)的呆板、缺乏交互性等缺點(diǎn)，使網(wǎng)頁(yè)變得絢麗多彩、充滿互動(dòng)性，動(dòng)態(tài)網(wǎng)頁(yè)便應(yīng)運(yùn)而生。動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)包括網(wǎng)頁(yè)的動(dòng)態(tài)表現(xiàn)技術(shù)與網(wǎng)頁(yè)的動(dòng)態(tài)內(nèi)容技術(shù)，前者是網(wǎng)頁(yè)外觀的動(dòng)態(tài)表現(xiàn)技術(shù)，如GIF動(dòng)畫(huà)、FLASH技術(shù)、DHTML（動(dòng)態(tài)HTML）技術(shù)、VHTML（虛擬HTML）技術(shù)、VRML（虛擬實(shí)現(xiàn)造型語(yǔ)言）技術(shù)等。而網(wǎng)頁(yè)的動(dòng)態(tài)內(nèi)容技術(shù)是通過(guò)一定的計(jì)算機(jī)語(yǔ)言編程如CGI、ASP、JSP等，使得計(jì)算機(jī)按照網(wǎng)頁(yè)設(shè)計(jì)者設(shè)置的網(wǎng)頁(yè)格式，生成所需要內(nèi)容的網(wǎng)頁(yè)并傳送給訪問(wèn)網(wǎng)頁(yè)者瀏覽。（3）音頻與視頻隨著多媒體技術(shù)的發(fā)展，人們已經(jīng)不滿足簡(jiǎn)單的文件傳輸，電子郵件，遠(yuǎn)程登陸等網(wǎng)絡(luò)應(yīng)用。人們希望網(wǎng)絡(luò)提供實(shí)時(shí)交互的服務(wù)，如：視頻會(huì)議、視頻點(diǎn)播、遠(yuǎn)程多媒體教學(xué)和網(wǎng)上購(gòu)物等。音頻：通過(guò)計(jì)算機(jī)的聲卡等多媒體設(shè)備來(lái)實(shí)現(xiàn)聲音的傳輸和播放。一般有Wave波形音頻、MIDI音頻和CD音頻，MP3視頻：通過(guò)視頻采集和處理實(shí)現(xiàn)圖象的傳輸和播放。一般有AVI，MOV，MPEG等格式的文件。（4）簡(jiǎn)單介紹HTML語(yǔ)言的設(shè)計(jì)Html語(yǔ)言設(shè)計(jì)的代碼書(shū)寫(xiě)可以在寫(xiě)字板或記事本等一些編輯平臺(tái)中實(shí)現(xiàn)。下面舉一個(gè)簡(jiǎn)單的實(shí)例來(lái)說(shuō)明HTML語(yǔ)言的書(shū)寫(xiě)過(guò)程和其結(jié)構(gòu)例1.1含有超文本標(biāo)識(shí)的網(wǎng)頁(yè)源程序。<HTML><HEAD><TITLE>含有超文本標(biāo)識(shí)的網(wǎng)頁(yè)源程序</TITLE></HEAD><BODY><H2>讀書(shū)人的三個(gè)意境</H2><OL><LI>昨夜西風(fēng)凋碧樹(shù)，獨(dú)上高樓，望盡天涯路。<LI>衣帶漸寬終不悔，為伊消得人憔悴。<LI>眾里尋她千百度，驀然回首，那人卻在燈火闌珊處。</OL><MARQUEEbgcolor="#87CEFA"width=75%scrollamount=1>⒈昨夜西風(fēng)凋碧樹(shù)，獨(dú)上高樓，望盡天涯路。</MARQUEE><MARQUEEbgcolor="#FFC900"behavior=alternate>⒉衣帶漸寬終不悔，為伊消得人憔悴。</MARQUEE><FONTsize="3"color="#FFFFFF"><MARQUEEbgcolor="#FF4500">⒊眾里尋她千百度，驀然回首，那人卻在燈火闌珊處。</MARQUEE></FONT></BODY></HTML>例1．2簡(jiǎn)單的表單設(shè)計(jì)<formaction=/cgi-bin/post-querymethod=post>您的姓名:<inputtype=textname=網(wǎng)址value=http://><br>密碼:<inputtype=passwordname=密碼><br><inputtype=submitvalue="發(fā)送"><inputtype=resetvalue="重設(shè)"></form>1.4網(wǎng)頁(yè)設(shè)計(jì)師必備的專業(yè)素質(zhì)網(wǎng)頁(yè)制作是一個(gè)系統(tǒng)工程，一個(gè)網(wǎng)頁(yè)的優(yōu)劣完全取決于設(shè)計(jì)者的綜合素質(zhì)和動(dòng)機(jī)。不僅僅是一個(gè)技術(shù)的問(wèn)題，還要重視藝術(shù)性。并且不可以偏廢。技術(shù)是基礎(chǔ)，藝術(shù)是升華，藝術(shù)效果表現(xiàn)用技術(shù)來(lái)實(shí)現(xiàn)。好的網(wǎng)頁(yè)讓人留戀往返。這不僅僅是技術(shù)的高超，而是藝術(shù)效果吸引了瀏覽者的眼球。所以這是一個(gè)綜合的系統(tǒng)的工程。小結(jié)：網(wǎng)站是爸媽，網(wǎng)頁(yè)是她們的孩子；爸爸媽媽的行為影響她的孩子，也是孩子成長(zhǎng)的燈塔；她的孩子優(yōu)秀也使得爸爸媽媽榮光。沒(méi)有爸爸媽媽的孩子是無(wú)人問(wèn)，沒(méi)有孩子的爸爸媽媽只能孤獨(dú)一生?！毒W(wǎng)頁(yè)設(shè)計(jì)與制作》課程講義理論學(xué)時(shí)部分第二章網(wǎng)頁(yè)賞析授課學(xué)時(shí)：1授課內(nèi)容：2.1網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站主題2.2各類網(wǎng)站的設(shè)計(jì)總體框架2.3網(wǎng)頁(yè)顏色的使用風(fēng)格2.4網(wǎng)頁(yè)賞析基本要求：初步了解網(wǎng)頁(yè)賞析要求；理解網(wǎng)頁(yè)賞析的理論要求；掌握網(wǎng)頁(yè)突破性設(shè)計(jì)的要素；分清各類網(wǎng)站的設(shè)計(jì)要求和框架；理解實(shí)例分析過(guò)程。重點(diǎn)與難點(diǎn)：網(wǎng)頁(yè)的賞析分析。導(dǎo)入新內(nèi)容：網(wǎng)頁(yè)界面的構(gòu)成要素，除了有傳統(tǒng)媒體的文字、圖形、色彩等基本構(gòu)成要素以外，還有聲音、視頻、動(dòng)畫(huà)等多媒體要素，以及其他一些特效和交互功能。正因?yàn)槿绱?，?duì)于網(wǎng)頁(yè)的賞析、評(píng)測(cè)也將是多角度、全方位的。雖說(shuō)網(wǎng)頁(yè)界面設(shè)計(jì)與平面設(shè)計(jì)非常類似，但也存在著一個(gè)很大的差異，那就是網(wǎng)頁(yè)界面作品具有明確的實(shí)用功能，而一般的藝術(shù)作品只具單純性觀念。實(shí)際賞析和評(píng)測(cè)網(wǎng)頁(yè)界面作品的第一點(diǎn)，是看它是否具有完整的功能，其次才是它的藝術(shù)效果。優(yōu)秀的網(wǎng)頁(yè)界面作品應(yīng)該是實(shí)用的物質(zhì)功能與審美的精神功能完美的結(jié)合。每一個(gè)人由于經(jīng)歷、經(jīng)驗(yàn)、思維方式的不同，對(duì)事物的看法、認(rèn)識(shí)常常也是不一樣的。網(wǎng)絡(luò)的基本特征是資源共享，互聯(lián)網(wǎng)是大眾化的網(wǎng)絡(luò)，是“平民”網(wǎng)。雖然為了追求較完美的界面設(shè)計(jì)，我們?cè)诤竺嬲鹿?jié)將從較專業(yè)的角度做了一些探討，但是為了使“平民”能夠接受，能夠認(rèn)同，網(wǎng)頁(yè)的界面設(shè)計(jì)應(yīng)該貼近大眾，應(yīng)該服務(wù)于大眾。這就要求我們站在一般瀏覽者的角度，去設(shè)計(jì)、審視、理解網(wǎng)頁(yè)作品?！捌矫瘛睕](méi)有理解達(dá)芬奇蒙娜麗莎的微笑,但是知道蒙娜麗莎時(shí)時(shí)刻刻都是淡淡幸福的，能給人們帶來(lái)無(wú)限的快樂(lè)。不同的環(huán)境不同的心情看到相同的網(wǎng)頁(yè)都有不同的理解，給人的感受肯定也是不一樣的。所以賞析無(wú)定規(guī)，只看自已識(shí)同，用自己的認(rèn)識(shí)水平去理解。紛繁復(fù)雜的社會(huì)造就了五彩繽紛的網(wǎng)頁(yè)。形態(tài)各異的網(wǎng)頁(yè)最終誰(shuí)能夠占領(lǐng)市場(chǎng)，其相關(guān)的要素很多。但是與網(wǎng)頁(yè)的設(shè)計(jì)界面關(guān)系是不可以忽視的。一個(gè)網(wǎng)頁(yè)的頁(yè)面設(shè)計(jì)完美，震撼，給人們心靈的觸動(dòng)，必然會(huì)在市場(chǎng)中有很高的點(diǎn)擊率。如何設(shè)計(jì)點(diǎn)擊率高的網(wǎng)頁(yè)，我們應(yīng)該從心理學(xué)的角度來(lái)考慮設(shè)計(jì)方案和組織。心理學(xué)中說(shuō)到“注意”是人的心理對(duì)一定對(duì)象的選擇集中。紛繁復(fù)雜的世界，有限的人的大腦只能在眾多的事物中挑選某些特定的對(duì)象或說(shuō)事物來(lái)進(jìn)行反映，而不管其他的事物。所以說(shuō)“注意”是貫穿心理活動(dòng)的始終。所以我們經(jīng)常說(shuō)“心無(wú)二用”酒就是這個(gè)道理。網(wǎng)頁(yè)設(shè)計(jì)也是一樣，要使得人們?nèi)c(diǎn)擊，必須設(shè)計(jì)出合乎人的心理的網(wǎng)頁(yè)界面。設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候要按照如下幾點(diǎn)來(lái)來(lái)組織設(shè)計(jì)：有強(qiáng)烈的刺激：一道強(qiáng)光，一聲巨響，一種鮮艷的顏色等，這些都會(huì)引起人們的注意；有引人的興趣：凡能滿足人的需要，符合人的直接興趣的事物，都容易引起人的注意。象球訊能引起球迷的注意，音樂(lè)廣告可以被音樂(lè)愛(ài)好者的注意，有知識(shí)性的信息會(huì)給渴望得到的人的注意。有興趣的話題，就會(huì)吸引相應(yīng)的人群?！?】有巧妙的創(chuàng)意：創(chuàng)意給人震撼，一種心靈的觸動(dòng)，讓人們有如聽(tīng)小說(shuō)“欲說(shuō)后事如何，且聽(tīng)下回分解”，“余音繞梁，三日未絕”，給人期待?？傊?，在設(shè)計(jì)網(wǎng)頁(yè)之前，必須了解訪問(wèn)者的心理，需要了解訪問(wèn)者的瀏覽網(wǎng)頁(yè)的感受，了解他們的耐心程度、年齡和性別，并了解他們?yōu)g覽站點(diǎn)是為了娛樂(lè)、信息還是其他，這會(huì)給建立站點(diǎn)時(shí)確定色調(diào)和個(gè)性起到了十分重要的作用和決定性的影響。所以如果要想在眾多競(jìng)爭(zhēng)對(duì)手中脫穎而出，在設(shè)計(jì)時(shí)要綜合考慮眾多因素：從技術(shù)角度看要盡量減少帶寬消耗因素，使網(wǎng)站去蕪存精，刪除不必要的細(xì)枝末節(jié)，讓低速訪問(wèn)者也能得到較為理想的訪問(wèn)速度；從訪問(wèn)者的角度看要適當(dāng)加入聲音和視頻等多媒體內(nèi)容，做到有聲有色，花開(kāi)有聲。2.1網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站主題網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站主題之間的關(guān)系歸納起來(lái)有三點(diǎn)，第一，設(shè)計(jì)應(yīng)滿足主題的要求，應(yīng)該為主題服務(wù)；第二，設(shè)計(jì)使藝術(shù)和技術(shù)交融，應(yīng)該是藝術(shù)和技術(shù)的完美結(jié)合。就是說(shuō)，在保證“美”的前提下，不喪失網(wǎng)站的“功能”；第三，無(wú)論是“美”，還是“功能”，都是為了更好地表達(dá)網(wǎng)站的主題思想。當(dāng)然，網(wǎng)站不同，其主題通常也會(huì)不同，對(duì)于“美”與“功能”的取向也有所不同。例如，我們常用的搜索引擎Google、百度、一搜等，它的功能就是“搜索”，所以說(shuō)“功能”就是它的主題；而對(duì)于某些功能較單一的網(wǎng)站，如個(gè)人網(wǎng)站，可以以“美”作為網(wǎng)頁(yè)設(shè)計(jì)的目的，它完全可以沖著一個(gè)“美”的主題去體現(xiàn)自身的理念，所以說(shuō)“美”就是它的主題；又例如門(mén)戶網(wǎng)站，網(wǎng)易、新浪，還有如全球著名的電子商務(wù)零售網(wǎng)站亞馬遜等，“內(nèi)容”就是它們的主題。網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)秀與否，取決于設(shè)計(jì)師對(duì)主題的理解與掌握程度，好的頁(yè)面設(shè)計(jì)肯定是服從于網(wǎng)站主題，鮮明地突出網(wǎng)站的訴求主題。要使網(wǎng)頁(yè)從形式上獲得良好的誘導(dǎo)力，可以通過(guò)對(duì)網(wǎng)頁(yè)的空間層次、主從關(guān)系、視覺(jué)秩序以及彼此之間的邏輯性來(lái)把握運(yùn)用。2.1.1網(wǎng)頁(yè)突破性設(shè)計(jì)的要素主題鮮明:網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)秀與否取決于設(shè)計(jì)者對(duì)主題的理解和把握程度，好的網(wǎng)頁(yè)肯定服從于網(wǎng)站的主題，鮮明地突出網(wǎng)站的訴求主題。網(wǎng)頁(yè)沒(méi)有表達(dá)網(wǎng)站的主題就好象癡人說(shuō)夢(mèng)。沒(méi)有邏輯，沒(méi)有條理性，無(wú)意義可談。色彩多變:色彩是自然美、生活美、藝術(shù)美的重要組成部分。它代表著情感（綠色代表生命，紅色代表熱情，白色代表純潔，藍(lán)色代表深邃），代表著生活。沒(méi)有色彩的世界是死寂而平淡的。在主題明確的前提下，網(wǎng)頁(yè)可以用豐富的色彩來(lái)烘托主題，讓瀏覽者耳目一新的感覺(jué)。給人清新，如坐春風(fēng)，吃人生果，讓人感覺(jué)身上三萬(wàn)六千個(gè)毛孔都滲透著激情。但多變的色彩不要干擾了瀏覽者的易讀，不可以濃妝艷抹，脫離主題。文化底蘊(yùn)厚實(shí):要有文化底蘊(yùn)，讓人回味，讓人期待；沒(méi)有文化的網(wǎng)頁(yè)也只能算是過(guò)眼煙云，隨風(fēng)而去，不留痕跡。（“簡(jiǎn)約而不簡(jiǎn)單”廣告語(yǔ)）表現(xiàn)夸張:針對(duì)某一內(nèi)容，用夸張的形式表現(xiàn)，來(lái)一個(gè)藝術(shù)的夸張，給人一個(gè)全新的理念，全新的概念，全新的感受。常規(guī)突破:現(xiàn)在很多設(shè)計(jì)師突破常規(guī)思維，實(shí)現(xiàn)主題的表現(xiàn)。合理的結(jié)構(gòu)：網(wǎng)頁(yè)是傳播信息的載體，其結(jié)構(gòu)由各種視聽(tīng)要素組成，以滿足人們實(shí)際的目標(biāo)而設(shè)計(jì)。從整體結(jié)構(gòu)上看其合理性，形式上豐富有條理，組織上有秩序，不單調(diào)，不混亂?？傊蕾p、評(píng)析一幅網(wǎng)頁(yè)作品可以從主題的鮮明性、獨(dú)創(chuàng)性、結(jié)構(gòu)的合理性、色彩的藝術(shù)性以及內(nèi)容的針對(duì)性。最根本的是不能偏離主題，只有保證在正確的方向的前提下才能創(chuàng)新設(shè)計(jì)、合理布局、“涂脂抹粉”、才能獲得有效設(shè)計(jì)；否則，偏離主題的設(shè)計(jì)再好也只能“束之高閣”。2.2各類網(wǎng)站的設(shè)計(jì)總體框架門(mén)戶類網(wǎng)站：門(mén)戶類網(wǎng)站是互聯(lián)網(wǎng)中的巨人，通常分為專業(yè)領(lǐng)域與搜索引擎類網(wǎng)站，擁有龐大的信息量和用戶資源是這類網(wǎng)站的優(yōu)勢(shì)。門(mén)戶網(wǎng)站將無(wú)數(shù)信息整合，分類，為網(wǎng)上訪問(wèn)者打開(kāi)了方便之門(mén)。調(diào)查顯示，大多數(shù)瀏覽者都是通過(guò)門(mén)戶類網(wǎng)站來(lái)尋找它們感興趣的信息資源，巨大的訪問(wèn)量給這類網(wǎng)站帶來(lái)了無(wú)限商機(jī)。產(chǎn)品類網(wǎng)站：生產(chǎn)與消費(fèi)是維系社會(huì)發(fā)展的兩大重要支柱，而將兩者結(jié)合起來(lái)的就是形形色色的產(chǎn)品：從傳統(tǒng)的衣食住行到現(xiàn)代的通訊、軟件、數(shù)碼產(chǎn)品，瀏覽者都可以輕易地在互聯(lián)網(wǎng)上找到。立足生產(chǎn)廠商的角度開(kāi)發(fā)的產(chǎn)品網(wǎng)站是互聯(lián)網(wǎng)開(kāi)發(fā)的一種重要的形式，借助不斷涌現(xiàn)的更具有人性化的網(wǎng)上營(yíng)銷模式，生產(chǎn)廠商得到了產(chǎn)品國(guó)際化的流通渠道和便捷、價(jià)廉的信息反饋。事實(shí)上電子商務(wù)已經(jīng)悄悄地走進(jìn)了人們地日常生活。從網(wǎng)站設(shè)計(jì)的角度出發(fā)，產(chǎn)品類型的網(wǎng)站重要的是要突出產(chǎn)品的個(gè)性，將產(chǎn)品個(gè)性與精美的設(shè)計(jì)融會(huì)貫通才是這類網(wǎng)站中的上品。娛樂(lè)類網(wǎng)站：娛樂(lè)人物總是人們關(guān)注的焦點(diǎn)，如果你是一個(gè)明星的超級(jí)FANS，那么第一時(shí)間更多更近地了解你的偶像，豈不是件樂(lè)事？通過(guò)網(wǎng)絡(luò)，我們可以更全面地了解我們所鐘愛(ài)的影視明星。娛樂(lè)與廣告象是對(duì)孿生的姐妹，而廣告又是支撐互聯(lián)網(wǎng)的重要支柱，透過(guò)這層關(guān)系我們也就不難發(fā)掘這類網(wǎng)站的黃金本質(zhì)了。游戲類網(wǎng)站：同世界各地的朋友并肩作戰(zhàn)，或是棋逢對(duì)手地較量一番，真是人生的一大樂(lè)事，“游民”是個(gè)新興的網(wǎng)絡(luò)群體，主要是以年輕朋友居多，理所當(dāng)然是游戲類網(wǎng)站的主要客戶群。面對(duì)如此年輕、龐大的用戶群，在線游戲網(wǎng)站及相關(guān)的游戲資訊網(wǎng)站也如雨后春筍般應(yīng)運(yùn)而生。游戲類網(wǎng)站由于本身固有的強(qiáng)大娛樂(lè)性和完善的交互設(shè)計(jì)經(jīng)驗(yàn)，使得無(wú)數(shù)“游民”廢寢忘食，這為游戲公司帶來(lái)了滾滾財(cái)源。隨著技術(shù)發(fā)展的突飛猛進(jìn)與帶寬環(huán)境的日漸改善，游戲類網(wǎng)站形式和內(nèi)容有了很大的突破，可以說(shuō)在線游戲已經(jīng)迎來(lái)了一個(gè)美麗的春天。時(shí)尚類網(wǎng)站：對(duì)于充滿活力而不安于現(xiàn)狀的人來(lái)說(shuō)，時(shí)尚類網(wǎng)站是他們夢(mèng)想的樂(lè)園。時(shí)尚像個(gè)非常善變的美女，總是讓你捉摸不透而難以追逐。名模、靚衫、寶馬、香車總是給人無(wú)限的遐思，各種設(shè)計(jì)理念的交匯與撞擊首先在多變的時(shí)尚大潮中，進(jìn)而引發(fā)流行時(shí)尚的燎原之勢(shì)。音樂(lè)類網(wǎng)站：在線音樂(lè)的發(fā)展經(jīng)歷了一波三折的過(guò)程，不論這個(gè)有多少起伏，能讓一首新歌一夜之間傳遍全球的也只有互聯(lián)網(wǎng)。大多數(shù)音樂(lè)網(wǎng)站提供樂(lè)在線的音樂(lè)欣賞，這在一定程度上起到樂(lè)傳統(tǒng)唱片行業(yè)發(fā)行方面的推進(jìn)作用，即便是當(dāng)初最反對(duì)網(wǎng)上傳播MP3的SONY唱片不也正在積極尋求在網(wǎng)上銷售唱片的新方式嗎？看來(lái)防川之水在于“疏”而不在“堵”。雜志類網(wǎng)站：雜志類網(wǎng)站是傳統(tǒng)媒體融入互聯(lián)網(wǎng)的新形勢(shì)，依托原有的影響力以及專業(yè)的咨詢，輕松地在互聯(lián)網(wǎng)中站住了腳，這類網(wǎng)站通常還帶有書(shū)面出版物的很多特征，而實(shí)時(shí)的資訊更新與反饋使得雜志類網(wǎng)站如虎添翼。更有很多原來(lái)隸屬于雜志社的網(wǎng)站由于在互聯(lián)網(wǎng)上取得的成功，得以獨(dú)立成為全新的多媒體雜志。傳記類網(wǎng)站：為名人建一座網(wǎng)上展覽館也是非常有意思的事情，讓更多的人去了解他而從中獲益，這是數(shù)字時(shí)代對(duì)名人對(duì)偉人的紀(jì)念方式。目前單純介紹人物的網(wǎng)站不是很多，面對(duì)日趨激烈的競(jìng)爭(zhēng)形勢(shì)，對(duì)于正在求職的畢業(yè)大學(xué)生而言，動(dòng)手制作一個(gè)類似的網(wǎng)站將是非常出色的名片，或許能幫助你在眾多競(jìng)爭(zhēng)者中脫穎而出，當(dāng)然如果參加網(wǎng)上求職豈不是更加方便？個(gè)人類網(wǎng)站：個(gè)人網(wǎng)站是互聯(lián)網(wǎng)中色彩最為絢麗的風(fēng)景。這里提供了充分展示個(gè)性的空間，可以說(shuō)這些多姿多彩的個(gè)人網(wǎng)站就是互聯(lián)網(wǎng)的基石，互聯(lián)網(wǎng)正是因?yàn)閮|萬(wàn)人的參與才會(huì)如此豐富，也是因?yàn)槟?、我、他的加入才使得互?lián)網(wǎng)深深植根于我們的日常生活。2.3網(wǎng)頁(yè)顏色的使用風(fēng)格配色最先映入眼簾，它決定了主頁(yè)的印象配色是觀者訪問(wèn)主頁(yè)時(shí)目光無(wú)法回避的設(shè)計(jì)要素。在看標(biāo)題前的一瞬間已被決定了的配色效果不可輕視。不經(jīng)意之間，觀者對(duì)主頁(yè)的印象就被固定下來(lái)。正如初次拜訪別人家，在看清門(mén)牌之前，通過(guò)建筑物的外觀和院子里的樹(shù)木形狀就可以把握那家人的性格一樣。配色印象無(wú)法更改配色形成的印象非常穩(wěn)固。不知不覺(jué)之間，印入心靈的影像就被牢牢鎖定了。無(wú)論后面提供的新聞品質(zhì)如何，配色效果就如同空氣一樣無(wú)聲地環(huán)繞著整個(gè)主頁(yè)。由淺色構(gòu)成的主頁(yè)，無(wú)論內(nèi)容多么熱烈，與淡淡的氣氛混合之后，留下的還是淡淡的回味。配色不分場(chǎng)所，具有多重效果插圖的內(nèi)容或標(biāo)題和配色的印象一致時(shí)，就能發(fā)揮最大的效用。歡樂(lè)的圖畫(huà)與歡樂(lè)的配色相疊加，傳遞出發(fā)自內(nèi)心的喜悅。相反，與圖畫(huà)和標(biāo)語(yǔ)的印象不和諧的配色，會(huì)引起混亂，產(chǎn)生破壞性效果。配色沒(méi)有專用的場(chǎng)所，它與文字和圖畫(huà)相互協(xié)調(diào)，發(fā)揮著綜合性作用。=1\*ALPHABETICA色調(diào)的選擇配色決定印象的主要因素有以下三個(gè)：l色調(diào)——鮮艷的色調(diào)、柔和的色調(diào)…2色相——同系色、對(duì)比色、全色相型…3對(duì)比——強(qiáng)明暗對(duì)比、相同明度的弱對(duì)比…在這三項(xiàng)之中，最有決定權(quán)的是色調(diào)。例如，A是最鮮艷的色調(diào)，表現(xiàn)出充沛的精力和強(qiáng)大的力量。在這個(gè)色調(diào)的范圍內(nèi)，無(wú)論在色相和對(duì)比量上下多少工夫，都無(wú)法表現(xiàn)出穩(wěn)重的印象。色調(diào)是明度與純度的交點(diǎn)表示色彩的基準(zhǔn)類型有色相、明度、純度三種。這叫做色彩的三屬性。明度和純度交叉點(diǎn)叫色調(diào)，是色彩的第四個(gè)屬性。色彩的四種屬性1、分析色調(diào)=1\*GB3①鮮艷色調(diào)不與白、黑、灰進(jìn)行混合的、只有純色的配色是最鮮艷的色調(diào)。給人強(qiáng)有力的、生機(jī)勃勃的、年輕人的印象。=2\*GB3②亮色調(diào)將鮮艷的色調(diào)稍稍加一點(diǎn)白就成了亮色調(diào)。與=1\*GB3①相比，略微溫柔一點(diǎn)，表現(xiàn)出樂(lè)趣，是大多數(shù)人的最愛(ài)。=3\*GB3③淡色調(diào)將=2\*GB3②再加白就成了這種色調(diào)。讓人聯(lián)想起嬰兒的肌膚，給人以最溫柔的印象。遠(yuǎn)離商業(yè)性印象。=4\*GB3④中間色調(diào)將=2\*GB3②的色調(diào)加一點(diǎn)黑就成了這種色調(diào)，是沉穩(wěn)的成人的印象。=5\*GB3⑤淺濁色調(diào)將=3\*GB3③的淡色調(diào)稍稍加一點(diǎn)灰，就產(chǎn)生了明亮但不過(guò)于鮮艷的穩(wěn)定的都市性印象。=6\*GB3⑥暗色調(diào)將=2\*GB3②的明色稍稍加上灰就成了暗色調(diào)。并不是=1\*GB3①、=2\*GB3②、=3\*GB3③那種單純明快的氣氛，而是表達(dá)了一種沉穩(wěn)而安靜的、素雅的氣氛.=7\*GB3⑦深色調(diào)將=1\*GB3①的純色加上黑色，就成了這種色調(diào)。傳達(dá)了有力、強(qiáng)烈的男性印象。用色調(diào)表示年齡層用色調(diào)表現(xiàn)性別=2\*ALPHABETICB色相的效果=1\*GB3①同系色與同類色我們用紅、黃、藍(lán)這樣的稱呼來(lái)區(qū)別顏色，這種顏色的差異就叫做色相。看看將色相放置在圓周上的色相環(huán)圖，就能更準(zhǔn)確的理解各種顏色的關(guān)系了。色相環(huán)上相鄰的色相群叫做同類色；相反方向的顏色叫對(duì)比色。根據(jù)這個(gè)位置關(guān)系，來(lái)進(jìn)行配色變化。相鄰的顏色具有穩(wěn)定感色相環(huán)上位于同一。場(chǎng)所的顏色叫做同系色，距離很近的顏色叫做同類色。在這個(gè)范圍內(nèi)進(jìn)行配色，傳達(dá)了穩(wěn)重而安定的印象。但是，這是自然界中不常存在的配色，所以實(shí)際上反而不自然，也可以說(shuō)是內(nèi)向的世界。通過(guò)色相環(huán)掌握他們的關(guān)系=2\*GB3②對(duì)比色與準(zhǔn)對(duì)比色公開(kāi)性強(qiáng)的商業(yè)性印象在色相環(huán)圖上，正相反位置上的顏色叫做對(duì)比色，并不是正相反但是在相反一側(cè)的顏色叫做準(zhǔn)對(duì)比色。強(qiáng)烈的對(duì)比可以造成強(qiáng)烈的印象。與同系色不同，相反方向的、相互沖突的顏色混合在一起，畫(huà)面的開(kāi)放性就增強(qiáng)了，整體印象也變得輕松舒暢，強(qiáng)化了既重視信息又具有較高公開(kāi)性的印象準(zhǔn)對(duì)比色=3\*GB3③全色相（喜慶型）全色相具有開(kāi)放的氣氛從色相環(huán)上沒(méi)有偏差的取出色相，開(kāi)放、熱鬧、像節(jié)同一樣的兩己色就產(chǎn)生了。既不是同系色那種只有朋友的世界，也不是對(duì)色那種激烈的對(duì)立關(guān)系，全色相給畫(huà)面帶來(lái)隨時(shí)隨地都可以參與進(jìn)去的氣氛，這恰好是適合節(jié)日氣氛的色相=3\*ALPHABETICC色彩的4種功能角色 =1\*GB3①主色主色突顯主題在舞臺(tái)上，主角站在聚光燈下，配角們退后一步來(lái)襯托他。配色上的主角也是一樣，其配色要比配角明顯清楚、強(qiáng)烈使得觀者一看就知道那是主角，從而使視線固定下來(lái)，也能比較放心。畫(huà)面整體統(tǒng)一，觀眾的情緒也就穩(wěn)定下來(lái)。=2\*GB3②支配色（背景色）背景色支配氣氛舞臺(tái)的中心是主角，但是決定整體印象的卻是背景色。無(wú)論主色多么華麗，如果背景色十分素雅，那么整體也會(huì)變得素雅；背景色如果明亮，那么整體也會(huì)給人明亮的印象。=2\*GB3②壁紙（背景色）提高格調(diào)用花紋、文字或具象圖案構(gòu)成的壁紙，效果類似于邊框和背景色，能夠表現(xiàn)出穩(wěn)重的格調(diào)。運(yùn)用細(xì)花紋可以表現(xiàn)安靜和沉穩(wěn)的效果；運(yùn)用對(duì)比強(qiáng)烈的色調(diào)則會(huì)產(chǎn)生傳統(tǒng)和信心十足的感覺(jué)。壁紙對(duì)于想傳達(dá)趣味性強(qiáng)、穩(wěn)重和格調(diào)高的網(wǎng)頁(yè)有所增益，但與商業(yè)信息為主體的網(wǎng)頁(yè)就不相匹配了。將①檢索型網(wǎng)頁(yè)整體鋪上壁紙，商業(yè)性的印象就會(huì)減淡。=3\*GB3③融合色（能夠溶在一起的顏色）反復(fù)融合在畫(huà)面上不同的地方涂上相同的顏色，通過(guò)顏色的反復(fù)效果使同樣的顏色產(chǎn)生共鳴，從而讓畫(huà)面具有整體感。中間對(duì)著左邊，上邊對(duì)著下邊，這樣把分開(kāi)的地方涂上共同的顏色，像回音一樣相互呼應(yīng)，畫(huà)面的整體就融合在了一起。將給人印象深刻的顏色分開(kāi)配置融合色在畫(huà)面上距離越遠(yuǎn)，產(chǎn)生共鳴的效果就越強(qiáng)?？康锰炊兂梢粔K，既無(wú)法相互呼應(yīng)，也不能產(chǎn)生動(dòng)態(tài)效果。而且，要盡量使用給人印象深刻的色調(diào)才會(huì)更有效果。越是鮮艷的顏色，越能表現(xiàn)出活躍的動(dòng)感。=4\*GB3④強(qiáng)調(diào)色用小面積強(qiáng)烈的顏色加強(qiáng)緊張感畫(huà)面整體使用壓抑的顏色，然后在一小塊面積上使用強(qiáng)烈的顏色，就能夠起到著重強(qiáng)調(diào)的作用。整體的色調(diào)越壓抑，越有效果。因?yàn)橛辛酥攸c(diǎn)，畫(huà)面整體也產(chǎn)生了輕快的動(dòng)態(tài)，一個(gè)栩栩如生的網(wǎng)頁(yè)就產(chǎn)生了。色彩多強(qiáng)烈也不過(guò)分面積越小，著重的效果越強(qiáng)。因?yàn)槊娣e小，所以無(wú)論使用多么強(qiáng)烈的顏色，畫(huà)面依然能夠保持清爽。同樣因?yàn)槊娣e小，整體印象也不會(huì)受到影響。放心的使用能想到的鮮艷顏色吧。2.4網(wǎng)頁(yè)賞析：舉例說(shuō)明各個(gè)網(wǎng)站的特點(diǎn)。（1）、北京2008奧運(yùn)會(huì)：白色底為，表示純潔，競(jìng)爭(zhēng)的公平；紅色加強(qiáng)了喜慶味和中國(guó)味。設(shè)計(jì)師大膽地采用了純度較高、對(duì)比強(qiáng)烈的顏色組合，造就了網(wǎng)站的生動(dòng)活潑的個(gè)性。無(wú)論從信息的流量還是業(yè)務(wù)范圍講，都稱得上搜索引擎類網(wǎng)站中的佼佼者。她簡(jiǎn)潔明快的設(shè)計(jì)給人們提供了一個(gè)舒適的搜索空間，而且在諸多領(lǐng)域中的業(yè)務(wù)拓展，也贏得了廣大用戶的信任。這是主題和功能。（2）、百度搜索：在界面設(shè)計(jì)中使用全白色，醒目的徽標(biāo)“百度”特別顯眼。無(wú)形中給人們帶到了一個(gè)廣袤無(wú)邊的宇宙空間，享受“眾里尋她千百度，驀然回首，那人卻在燈火闌珊處”的美好意境。（3）、HAO123網(wǎng)站：百度是以“簡(jiǎn)約”著稱。而HAO123卻象是一個(gè)“大賣(mài)場(chǎng)”，沒(méi)有奢華的色彩，沒(méi)有精品店裝飾的奪目耀眼。但是她強(qiáng)化了功能性的細(xì)分類，分設(shè)了新聞、科技、音樂(lè)、文學(xué)、電子商務(wù)、下載等等，并根據(jù)你的查詢提供搜索，可謂方便之極。你能不說(shuō)她是真正好網(wǎng)站嗎？（4）、Pixar動(dòng)畫(huà)工作室：這是著名的Pixar動(dòng)畫(huà)制作室的作品，Pixar動(dòng)畫(huà)制作室運(yùn)用藝術(shù)技巧在計(jì)算機(jī)動(dòng)畫(huà)領(lǐng)域創(chuàng)造性地制作出了許多獨(dú)特新穎的動(dòng)畫(huà)巨片，它創(chuàng)造的動(dòng)畫(huà)常常能出其不意，又貼近生活，感染力極強(qiáng)。

（5）、故宮博物院：故宮的網(wǎng)頁(yè)設(shè)計(jì)凝重，有厚實(shí)的文化。給人有歷史的感覺(jué)。讓人遐想皇宮的生活，來(lái)點(diǎn)擊觀看這段歷史的希望。它采用了朱紅的色系，用有很多鉚釘?shù)拇箝T(mén)作背景，加上五爪金龍作近景，更加給人向往和森嚴(yán)感。打開(kāi)門(mén)之后，又給人有種清新的感覺(jué)，又有歷史不陳舊味。（6）、中國(guó)黑客聯(lián)盟：中國(guó)黑客聯(lián)盟網(wǎng)站大量使用了黑色為底色，用蘭色的粗體大字來(lái)突顯站名，又用了反差較大的黃色很小的字“進(jìn)入主站”來(lái)提示“站門(mén)”的所在，象遙遠(yuǎn)處忽明忽暗燈塔還是幽靈的晃動(dòng)？用色簡(jiǎn)單質(zhì)樸，給人的感覺(jué)是怎樣呢？是威嚴(yán)還是恐怖？是進(jìn)入了天堂還是地獄？進(jìn)去吧，結(jié)果誰(shuí)能知道呢？向往還是恐懼？這正是黑客的行為心理，突出了主題元素，表現(xiàn)得淋漓盡致。是不是還有點(diǎn)“未經(jīng)一番寒徹骨，焉得梅花撲鼻香”的感覺(jué)呢？（7）、柯達(dá)相機(jī)：（一）豪放而不失風(fēng)情。（二）驚心駭目，強(qiáng)烈的震撼。（三）色彩掩蓋不了它的豪邁氣派。氣象境界凌厲無(wú)前。（四）詩(shī)中說(shuō)：“關(guān)東大漢，執(zhí)銅牙鐵板唱大江東去?！备袊@大聲鏗鏘，哪里還需要銅琵琶、鐵綽板來(lái)伴唱呢？此時(shí)的無(wú)聲勝有聲，花開(kāi)有聲了。（8）、百威啤酒：作為啤酒生產(chǎn)商，百威網(wǎng)站的設(shè)計(jì)側(cè)重于文化，優(yōu)美的意境與情趣的追求。瀏覽者可以在這里領(lǐng)略到美與啤酒文化的完美結(jié)合。設(shè)計(jì)的顏色如同典雅、高貴、高品位的酒吧陳列柜，陳列了不同品種的啤酒，讓點(diǎn)擊者總能找到適合你的口味的百威啤酒。發(fā)揮藝術(shù)的感染力，讓人們不禁垂涎三尺，當(dāng)然網(wǎng)站的客戶也就門(mén)庭若市。（9）、Rabbit游戲：網(wǎng)站的用色豐富，非常講究，充滿了神秘之感。圖形和文字處理不落俗套，精細(xì)入微，三維立體感特別強(qiáng)烈，有穩(wěn)于泰山之勢(shì)，勝者為王的非凡氣度。游戲的賽場(chǎng)區(qū)域有很重的金屬氣息。這種設(shè)計(jì)為網(wǎng)站平添了幾分神秘的氣息。總結(jié)：在實(shí)際應(yīng)用中網(wǎng)頁(yè)應(yīng)當(dāng)在滿足完成功能的前提下才能講究藝術(shù)，如果一幀頁(yè)面無(wú)法完成其基本的表現(xiàn)或操作功能，則這樣的頁(yè)面再“美”也是無(wú)用的，因?yàn)榫W(wǎng)頁(yè)的藝術(shù)性、欣賞性是服務(wù)于功能的。了解了網(wǎng)頁(yè)界面的設(shè)計(jì)技術(shù)和方法，并將其融入自己的思想，消化理解，構(gòu)成自己認(rèn)識(shí)世界、認(rèn)識(shí)設(shè)計(jì)的較完整的思維理念，才能有根有據(jù)、有憑有證，由里及表、由表及里地評(píng)測(cè)、鑒賞和判斷設(shè)計(jì)作品的優(yōu)劣?！毒W(wǎng)頁(yè)設(shè)計(jì)與制作》課程講義理論學(xué)時(shí)部分第三章網(wǎng)頁(yè)規(guī)劃與布局授課學(xué)時(shí)：1授課內(nèi)容：3.1網(wǎng)頁(yè)的組織結(jié)構(gòu)3.1.1首頁(yè)的結(jié)構(gòu)3.1.2一般頁(yè)面的結(jié)構(gòu)3.1.3網(wǎng)站頁(yè)面的組織結(jié)構(gòu)3.2網(wǎng)頁(yè)內(nèi)容上的組織3.2.1綜述3.2.2組織網(wǎng)頁(yè)的方法3.3網(wǎng)頁(yè)設(shè)計(jì)流程3.3.1綜述3.3.2網(wǎng)頁(yè)目標(biāo)和風(fēng)格3.3.3內(nèi)容組織3.3.4頁(yè)面的組織原則3.3.5網(wǎng)頁(yè)制作3.3.6測(cè)試3.3.7發(fā)布、推廣3.3.8反饋、評(píng)測(cè)基本要求：了解網(wǎng)頁(yè)的組織結(jié)構(gòu)，掌握網(wǎng)頁(yè)內(nèi)容上的組織方法；熟悉網(wǎng)頁(yè)設(shè)計(jì)的流程和注意事項(xiàng)；熟悉網(wǎng)站設(shè)計(jì)，掌握網(wǎng)站與網(wǎng)頁(yè)的區(qū)別。重點(diǎn)與難點(diǎn)：重點(diǎn)：網(wǎng)頁(yè)規(guī)劃原則，網(wǎng)站規(guī)劃及其步驟；難點(diǎn)：網(wǎng)頁(yè)規(guī)劃和合理布局。3.1網(wǎng)頁(yè)的組織結(jié)構(gòu)綜述網(wǎng)頁(yè)的內(nèi)容和組織取決于網(wǎng)站的主題和定位。確定了網(wǎng)站的定位和模式，就可以對(duì)網(wǎng)頁(yè)的內(nèi)容進(jìn)行組織、規(guī)劃和布局。3.1.1首頁(yè)的結(jié)構(gòu)首頁(yè)(又稱主頁(yè))是網(wǎng)站的臉面,是企業(yè)、商家或政府機(jī)構(gòu)等形象代表。首頁(yè)一般包含主題、徽標(biāo)、企業(yè)精神、經(jīng)營(yíng)理念、旗幟廣告、首頁(yè)鏈接、最新報(bào)道、聯(lián)系方式、招賢納士和欄目簡(jiǎn)介等。首頁(yè)應(yīng)視一件藝術(shù)品，精雕細(xì)琢，供瀏覽者欣賞和享用。但是不應(yīng)該放廣告，特別不能放很多。不應(yīng)虎頭蛇尾。不要機(jī)關(guān)重重。3.1.2一般頁(yè)面的結(jié)構(gòu)一般頁(yè)面也稱子頁(yè)面，其結(jié)構(gòu)往往是依據(jù)要表現(xiàn)的內(nèi)容而定，形式比較單一。頁(yè)面的主題突出，取向性強(qiáng)，主要用于描述同一類事情，如圖片或文字，其表現(xiàn)力可以弱于首頁(yè)，但是風(fēng)格、模式和色彩上應(yīng)與首頁(yè)保持一致。3.1.3網(wǎng)站頁(yè)面的組織結(jié)構(gòu)頁(yè)面的內(nèi)容取決于網(wǎng)站的類型,而網(wǎng)站又是由一幀幀的頁(yè)面有機(jī)組合而成。網(wǎng)站除了內(nèi)容豐富、可讀性強(qiáng)以外，在內(nèi)容的組織上應(yīng)該做到層次分明、嚴(yán)謹(jǐn)清晰。一般來(lái)說(shuō)，設(shè)計(jì)網(wǎng)站常常采用順序結(jié)構(gòu)、層次結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)或復(fù)合結(jié)構(gòu)來(lái)組織頁(yè)面。1.順序結(jié)構(gòu)：它適合組織一些順序性較強(qiáng)的頁(yè)面內(nèi)容，如電子圖書(shū)，產(chǎn)品描述等，只需要簡(jiǎn)單地按照一定的順序?yàn)g覽即可，這樣的結(jié)構(gòu)很象幻燈片的演示。X2.htmX2.htmX3.htmlX4.htmX1.html2．層次結(jié)構(gòu)：是最基本的一種網(wǎng)頁(yè)組織形式。其優(yōu)點(diǎn)是前后順序清楚，關(guān)系明確。每一個(gè)頁(yè)面在水平方向有極為密切的上下級(jí)關(guān)系，在豎直方向上具有并列關(guān)系。X1.htmlX1.htmlX6.htmlX4.htmlX5.htmlX2.htmlX3.htmlX7.html3．網(wǎng)狀結(jié)構(gòu)：是網(wǎng)頁(yè)之間連接靈活，是一種較為人性化的設(shè)計(jì)。X1.htmlX1.htmlX6.htmlX4.htmlX5.htmlX2.htmlX3.htmlX7.html4．復(fù)合結(jié)構(gòu)：在網(wǎng)頁(yè)設(shè)計(jì)中頁(yè)面之間的組織結(jié)構(gòu)通常是不會(huì)采用以上單一的結(jié)構(gòu)。而是使用兩種或兩種以上的結(jié)構(gòu)，稱為復(fù)合結(jié)構(gòu)。3.2網(wǎng)頁(yè)內(nèi)容上的組織3.2.1綜述建設(shè)網(wǎng)站的第一步是收集資料，分門(mén)別類，將這些素材合理地分配到由超級(jí)連接組織的不同的網(wǎng)頁(yè)中，使得自己的網(wǎng)頁(yè)能夠吸引眾多的瀏覽者，網(wǎng)頁(yè)的內(nèi)容的有效組織是必不可少的。網(wǎng)站的內(nèi)容豐富，信息量大，應(yīng)該運(yùn)用一定的方式將其條理化，同時(shí)在一定程度上加以歸納重復(fù)利用，使得網(wǎng)頁(yè)較為整齊，脈絡(luò)清晰，重點(diǎn)突出。3.2.2組織網(wǎng)頁(yè)的方法1.突出個(gè)性：要使所設(shè)計(jì)的網(wǎng)頁(yè)內(nèi)容獨(dú)特、個(gè)性鮮明，在網(wǎng)頁(yè)的設(shè)計(jì)初期要仔細(xì)斟酌每一幀網(wǎng)頁(yè)的性質(zhì)，突出本頁(yè)面的核心內(nèi)容。2.具有可讀性：每個(gè)網(wǎng)頁(yè)的內(nèi)容要精練，避免長(zhǎng)篇累贅；背景顏色不可以太艷，背景圖案不可以花哨，不能喧賓奪主，要與正文適當(dāng)?shù)拇钆?，易于閱讀。3.完整性強(qiáng)：應(yīng)當(dāng)盡量把聯(lián)系緊密的內(nèi)容放在同一幀頁(yè)面中，使得每一幀的內(nèi)容相對(duì)較為獨(dú)立，具有較好的完整性。4.布局合理：網(wǎng)頁(yè)設(shè)計(jì)作為一種視覺(jué)語(yǔ)言，必定要講究編排和布局，雖然網(wǎng)頁(yè)設(shè)計(jì)不同平面設(shè)計(jì)，但是兩者有許多相近之處，可以充分加以利用和借鑒。網(wǎng)頁(yè)設(shè)計(jì)通過(guò)文字、圖片的恰當(dāng)組合，表達(dá)和諧與美，使得整體布局合理、有序，做到既豐富多樣又簡(jiǎn)潔明了?？梢酝ㄟ^(guò)視覺(jué)要素的理性分析和嚴(yán)格的形式構(gòu)成，來(lái)提高對(duì)整體頁(yè)面的把握能力和審美能力，使得頁(yè)面達(dá)到最佳的視覺(jué)表現(xiàn)效果，較完美地體現(xiàn)設(shè)計(jì)者的思想和本頁(yè)面的主題。5.重要信息放置在首頁(yè)：眼睛是心靈的窗戶。我們把報(bào)紙的最顯眼的地方稱報(bào)眼報(bào)紙的眼睛。網(wǎng)頁(yè)也是一樣有最顯眼的地方此處也是應(yīng)該較為重要的或是最新的內(nèi)容的放在主要的地方?？梢酝ㄟ^(guò)導(dǎo)航欄或?qū)⒅攸c(diǎn)信息、論點(diǎn)等置于頁(yè)面的醒目位置，還可以通過(guò)彈出窗口來(lái)發(fā)布重要要信息。3.3網(wǎng)頁(yè)設(shè)計(jì)流程3.3.1綜述發(fā)布、推廣測(cè)試網(wǎng)頁(yè)制作內(nèi)容組織確定目標(biāo)和風(fēng)格發(fā)布、推廣測(cè)試網(wǎng)頁(yè)制作內(nèi)容組織確定目標(biāo)和風(fēng)格反饋、評(píng)測(cè)反饋、評(píng)測(cè)3.3.2網(wǎng)頁(yè)目標(biāo)和風(fēng)格：網(wǎng)站包含著眾多內(nèi)容各異，錯(cuò)綜復(fù)雜的網(wǎng)頁(yè)，這些網(wǎng)頁(yè)的內(nèi)容組織，材料收集和處理工作通常可以從兩個(gè)方面入手。一是根據(jù)所需發(fā)布的信息確定主題，每個(gè)主題由專人負(fù)責(zé)收集相關(guān)資料和內(nèi)容。二是組織、精選一些能突出本網(wǎng)頁(yè)特色的內(nèi)容，烘托和突出主題，使本頁(yè)面與網(wǎng)站其他網(wǎng)頁(yè)有明顯的不同。除了突出主題，形成特色以外，還應(yīng)該調(diào)查用戶群的需求，通過(guò)了解他們的興趣愛(ài)好、關(guān)心話題、反饋意見(jiàn)，不斷地調(diào)整和修改網(wǎng)頁(yè)內(nèi)容，以求吸引更多的瀏覽者。網(wǎng)頁(yè)內(nèi)容的組織、整理最好能遵從以下幾點(diǎn)：1。組織的內(nèi)容確實(shí)對(duì)瀏覽者有用，確實(shí)圍繞所定義的目標(biāo)和所定向的群體，不要大而全覆蓋面過(guò)廣；2。內(nèi)容有特色，有自己的獨(dú)到見(jiàn)解，盡量避免平淡乏味；3。所提供的內(nèi)容、超鏈接等要保證正確無(wú)誤，設(shè)計(jì)完成之后一定要認(rèn)真測(cè)試。3.3.3內(nèi)容組織建設(shè)網(wǎng)站的第一步是收集資料，怎樣分門(mén)別類，將這些素材合理地分配到由超鏈接組織起來(lái)的不同網(wǎng)頁(yè)中，使自己的網(wǎng)頁(yè)能吸引眾多的瀏覽者，網(wǎng)頁(yè)內(nèi)容的有效組織是必不可少的。網(wǎng)站內(nèi)容豐富，信息含量大，應(yīng)該運(yùn)用一定的方式將其條理化，同時(shí)在一定程度上加以歸納后重復(fù)利用，使網(wǎng)頁(yè)較為整齊，脈絡(luò)清楚，讀起來(lái)也有重點(diǎn)。如文字的合理編排，圖片和文字的有機(jī)結(jié)合、前后呼應(yīng)等等。內(nèi)容較少的網(wǎng)站雖說(shuō)同樣需要條理化，以達(dá)到更為富有變化和清晰的視覺(jué)效果，但相對(duì)于前者的難度將大為降低。只要安排合理，使頁(yè)面達(dá)到平衡，即使在頁(yè)面某處大面積留空，也不會(huì)使人感到空蕩，相反會(huì)給瀏覽者留下一個(gè)廣闊的思考空間，耐人回味。3.3.4頁(yè)面的組織原則1首先將頁(yè)面含蓋內(nèi)容的整體布局的需要進(jìn)行分組歸納，進(jìn)行內(nèi)在聯(lián)系的組織排列，反復(fù)推敲標(biāo)題圖形與整體版面的關(guān)系，創(chuàng)造秩序使版面各元素成為豐富多彩而簡(jiǎn)潔統(tǒng)一整體2較長(zhǎng)的文章或標(biāo)題，不要編排在一起，要注意安排一定的距離。對(duì)待圖片的安排也是，要互相錯(cuò)開(kāi)，大小之間要有一定的間隔，這樣可以使頁(yè)面錯(cuò)落有致，避免重心偏離形成穩(wěn)定形態(tài)。3較長(zhǎng)的文章或標(biāo)題，不要編排在一起，要注意安排一定的距離。對(duì)待圖片的安排也是，要互相錯(cuò)開(kāi)，大小之間要有一定的間隔，這樣可以使頁(yè)面錯(cuò)落有致，避免重心偏離形成不穩(wěn)定形態(tài)。4頁(yè)面有很多內(nèi)容的時(shí)候很忌諱混亂，各部分內(nèi)容各自為政、跨度太大，這樣消弱了整體的可讀性，讓人抓不住核心內(nèi)容。3.3.5網(wǎng)頁(yè)制作網(wǎng)站包含著眾多內(nèi)容各異，錯(cuò)綜復(fù)雜的網(wǎng)頁(yè)，這些網(wǎng)頁(yè)的內(nèi)容組織，材料收集和處理工作通?？梢詮膬蓚€(gè)方面入手。一是根據(jù)所需發(fā)布的信息確定主題，每個(gè)主題由專人負(fù)責(zé)收集相關(guān)資料和內(nèi)容。二是組織、精選一些能突出本網(wǎng)頁(yè)特色的內(nèi)容，烘托和突出主題，使本頁(yè)面與網(wǎng)站其他網(wǎng)頁(yè)有明顯的不同。除了突出主題，形成特色以外，還應(yīng)該調(diào)查用戶群的需求，通過(guò)了解他們的興趣愛(ài)好、關(guān)心話題、反饋意見(jiàn)，不斷地調(diào)整和修改網(wǎng)頁(yè)內(nèi)容，以求吸引更多的瀏覽者。網(wǎng)頁(yè)內(nèi)容的組織、整理最好能遵從以下幾點(diǎn)：1。組織的內(nèi)容確實(shí)對(duì)瀏覽者有用，確實(shí)圍繞所定義的目標(biāo)和所定向的群體，不要大而全覆蓋面過(guò)廣；2。內(nèi)容有特色，有自己的獨(dú)到見(jiàn)解，盡量避免平淡乏味；3。所提供的內(nèi)容、超鏈接等要保證正確無(wú)誤，設(shè)計(jì)完成之后一定要認(rèn)真測(cè)試3.3.6測(cè)試當(dāng)所有網(wǎng)站頁(yè)面制作完成之后，我們需要對(duì)每一幀頁(yè)面進(jìn)行審查和測(cè)試，測(cè)試內(nèi)容主要包括功能性測(cè)試和完整性測(cè)試兩個(gè)方面。所謂功能性測(cè)試就是要保證網(wǎng)頁(yè)的可用性，是否達(dá)到最初的設(shè)計(jì)目標(biāo)和所要表達(dá)的內(nèi)容，實(shí)現(xiàn)所規(guī)定的功能；瀏覽者是否可以方便、快速地尋找到所需要的內(nèi)容。完整性測(cè)試就是保證頁(yè)面內(nèi)容顯示正確，鏈接準(zhǔn)確無(wú)誤，無(wú)差錯(cuò)無(wú)遺漏。3.3.7發(fā)布、推廣整個(gè)網(wǎng)站設(shè)計(jì)、測(cè)試完成以后，就可以去尋找ISP(InternetServiceProvider，互聯(lián)網(wǎng)服務(wù)提供商)，將網(wǎng)站的所有內(nèi)容上載到互聯(lián)網(wǎng)上。發(fā)布網(wǎng)站的方案有多種，其中主要采用三種方案：①虛擬主機(jī)；②主機(jī)托管；③主機(jī)租用。在選擇ISP時(shí)，最好還能了解ISP具有的服務(wù)能力和服務(wù)環(huán)境等內(nèi)容，如：⑴服務(wù)器的硬件配置(包括服務(wù)器的類型、CPU、硬盤(pán)速度、內(nèi)存大小、網(wǎng)卡速度等)⑵服務(wù)器所在的網(wǎng)內(nèi)環(huán)境與速度⑶服務(wù)器所在的網(wǎng)絡(luò)環(huán)境與Internet骨干網(wǎng)相聯(lián)的速率⑷ChinaNet的國(guó)際出口速率⑸ISP與ChinaNet之間的專線速率⑹ISP向客戶端開(kāi)放的端口接入速率⑺用戶自己的計(jì)算機(jī)配置、Modem的速率、接入線路的質(zhì)量等上載后的網(wǎng)站往往希望大量的瀏覽者訪問(wèn)，提高自身的知名度，提升網(wǎng)站所有者的形象。我們可以嘗試使用以下方法：⑴利用傳統(tǒng)媒體(如廣告、公關(guān)文檔、促售宣傳等)；⑵像對(duì)待商標(biāo)一樣，將網(wǎng)址印制在商品的包裝和宣傳品上；⑶與其他網(wǎng)站交換鏈接或購(gòu)買(mǎi)其他網(wǎng)站的圖標(biāo)廣告；⑷向互聯(lián)網(wǎng)的搜索引擎網(wǎng)站提交本站點(diǎn)的網(wǎng)址和關(guān)鍵詞；⑸在主頁(yè)面的原代碼中，使用META、TITLE標(biāo)識(shí)加入網(wǎng)站的關(guān)鍵詞，以利識(shí)別檢索；⑹向訪問(wèn)率較高的導(dǎo)航網(wǎng)站，如雅虎、搜虎等注冊(cè)；⑺通過(guò)在網(wǎng)站上設(shè)立有獎(jiǎng)競(jìng)賽的方式，提高點(diǎn)擊率。3.3.8反饋、評(píng)測(cè)網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)劣是通過(guò)瀏覽者的認(rèn)可而得出的，我們可以使用計(jì)數(shù)器、計(jì)時(shí)器、留言板、調(diào)查表以及有獎(jiǎng)問(wèn)答等形式收集數(shù)據(jù)，分析網(wǎng)站或某個(gè)網(wǎng)頁(yè)被訪問(wèn)的次數(shù)或?yàn)g覽者停留的時(shí)間，評(píng)測(cè)網(wǎng)頁(yè)的設(shè)計(jì)或內(nèi)容的新穎程度。設(shè)計(jì)出達(dá)到用戶目的的網(wǎng)頁(yè)，吸引盡可能多的人參觀訪問(wèn)是一個(gè)值得研究的課題材。一定要注重信息的調(diào)整、更新和修改，使網(wǎng)頁(yè)內(nèi)容始終處于一個(gè)不斷發(fā)展，日趨完善的動(dòng)態(tài)環(huán)境中。能夠吸引大量的瀏覽者訪問(wèn)網(wǎng)站只是成功的一半，若以新奇的版式、獨(dú)特的內(nèi)容和服務(wù)使瀏覽者再度來(lái)訪，或向其他人介紹網(wǎng)址，宣傳網(wǎng)站的內(nèi)容，才可能是真正的成功?！毒W(wǎng)頁(yè)設(shè)計(jì)與制作》課程講義理論學(xué)時(shí)部分第四章網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意授課學(xué)時(shí)：1授課內(nèi)容：4.1網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)中的基本要素4.1.1網(wǎng)頁(yè)中的文字4.1.2網(wǎng)頁(yè)中的圖像4.1.3網(wǎng)頁(yè)設(shè)計(jì)中色彩的屬性及其應(yīng)用4.2網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)的程序4.2.1前期策劃基本要求：通過(guò)對(duì)創(chuàng)意思維及創(chuàng)意手法的講解，輔以對(duì)優(yōu)秀網(wǎng)頁(yè)作品的分析，啟發(fā)學(xué)生全面的創(chuàng)新思維，進(jìn)而從多角度的思維中獨(dú)樹(shù)一幟，培養(yǎng)學(xué)生的個(gè)性化意識(shí)。讓學(xué)生對(duì)優(yōu)秀設(shè)計(jì)的創(chuàng)意進(jìn)行解讀和闡釋，并分析其創(chuàng)新之處，鼓勵(lì)學(xué)生敢于發(fā)掘新意，提出自己獨(dú)到的見(jiàn)解。重點(diǎn)與難點(diǎn)：?jiǎn)l(fā)學(xué)生全面的創(chuàng)新思維，培養(yǎng)學(xué)生的個(gè)性化意識(shí)。如何掌握不同性質(zhì)網(wǎng)頁(yè)的創(chuàng)意設(shè)計(jì)技巧。4.1網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)中的基本要素任何網(wǎng)頁(yè)創(chuàng)意使用的視覺(jué)元素總的歸納起來(lái)不外乎三種：文字、圖像、色彩。三者選用搭配的適當(dāng)，編排組合的合理，將對(duì)網(wǎng)頁(yè)的美化起到直接的效果。4.1.1網(wǎng)頁(yè)中的文字在網(wǎng)頁(yè)中,字體往往占據(jù)了很大的空間和頁(yè)面,單一形態(tài)大小、顏色的字體，雖能傳遞信息，但不免讓人們感到疲勞乏味。一.字體的設(shè)計(jì)方法：根據(jù)文字內(nèi)容的屬性及網(wǎng)站的主題可以適當(dāng)?shù)淖魅缦伦兓?.改變文字大小、比例人們已經(jīng)習(xí)慣正常的視覺(jué)大小,突然間的變化會(huì)產(chǎn)生新的視覺(jué)感受,產(chǎn)生重新審視的興趣。2.改變字體形態(tài)局部改變整體改變措施:拉伸、擠壓、扭曲、撕裂、切除、省略、替換、粗細(xì)變化。3.文字的三維效果真實(shí)的空間：眼睛看得見(jiàn)，手能摸得到的。虛擬的空間：眼睛看得見(jiàn)，而不能觸摸得到的。措施：添加投影、浮雕、透視效果，產(chǎn)生矛盾空間。4.色彩的改變色相、純度、明度5.機(jī)理及質(zhì)地紋理的改變及不同質(zhì)感效果6.置換及同構(gòu)將文字中部分筆畫(huà)用實(shí)物、圖形、符號(hào)、色塊等替換，或利用文字外形與某一事物的相似點(diǎn)進(jìn)行變化。二.文字的組合方法與形式1.字體的大小組合將大小不等的文字放到一個(gè)平面上進(jìn)行組合，這樣大的文字相當(dāng)于一個(gè)圖形，而小的文字就成為可供閱讀的文字，或?qū)⑿〉奈淖志幣懦蓤D形而大的圖形成為主要的文字2.漢字與拉丁字母的組合如：“HONGKONG”與“喜”字的組合。3.漢字與具象形體的組合如：“永久”牌自行車標(biāo)志“胖子”服飾4.文字組合的處理手段(1).添加法根據(jù)文字內(nèi)容,筆畫(huà)的多少進(jìn)行添加文字的組合因素。A.添加與內(nèi)容相關(guān)的文字B.添加與寓意相關(guān)的圖形(2).刪除法在不影響識(shí)別的前提下將某些筆畫(huà)刪除(3).重疊法將文字組合因素重疊為一體，產(chǎn)生富有層次的效果。(4).連筆法將文字組合因素產(chǎn)生連貫的整體感，可將兩個(gè)以上的文字筆畫(huà)連起來(lái)。(5).適形法將文字組合因素適合在一個(gè)圖形內(nèi)，產(chǎn)生適合圖形的效果。(6).共用法將所設(shè)計(jì)內(nèi)容的兩個(gè)以上的文字筆畫(huà)偏旁部首共用，產(chǎn)生你中有我我中有你的視覺(jué)趣味。(7).虛實(shí)形共用實(shí)為筆畫(huà)，虛偽背景。利用實(shí)形周圍空底顯示字的形產(chǎn)生虛實(shí)相間的視覺(jué)效果。(8).幾何形利用不同的幾何形狀構(gòu)成文字,給人以自由和輕松感，現(xiàn)代感強(qiáng)5.文字編排的形式A.豎排式B.橫排式C.斜排式D.曲線式E.漸變式運(yùn)用文字字體大小產(chǎn)生漸變的效果。F.重疊式由句子重疊體現(xiàn)構(gòu)成圖形。G.分離式拉大字與字之間距離，形成點(diǎn)壯效果。(2).文字的頭尾編排形式A.齊頭散尾式B.散頭齊尾式C.齊頭齊尾式D.中軸分離式文字排列時(shí)從中間向兩邊分開(kāi),突出中間的垂直空間。E.分插式行與行之間的關(guān)系上、下、左、右曲直交叉，長(zhǎng)短參差、錯(cuò)落地排列。F.自由式行與行不規(guī)則地排列，形成繁雜的視覺(jué)效果，其閱讀功能減弱，作為背景圖形用(3).圖形化的文字編排效果運(yùn)用大量的文字組成平面的或立體的圖形，文字與圖形的結(jié)合形成了有趣的、有視覺(jué)內(nèi)涵的編排形式。4.1.2網(wǎng)頁(yè)中的圖像圖形是一種視覺(jué)信息傳遞媒介，較符號(hào)文字在傳遞信息上的優(yōu)勢(shì)：易識(shí)別、不受地域、國(guó)度、知識(shí)體系等眾多因素的影響。圖形圖象往往來(lái)源于現(xiàn)實(shí)世界的影像照片，在造型規(guī)律上有很強(qiáng)的客觀制約性。所以設(shè)計(jì)師在對(duì)網(wǎng)頁(yè)優(yōu)化時(shí)應(yīng)對(duì)圖片作二次處理、加工，而處理時(shí)應(yīng)從以下方面入手。圖形圖像的基本表現(xiàn)技巧：一.面積與視角圖像在網(wǎng)頁(yè)中所占比例的大小直接影響整個(gè)頁(yè)面的視覺(jué)效果和情感表達(dá)。面積大的圖像在畫(huà)面中占的份量重，表達(dá)情感直接。容易吸引瀏覽者的注意。面積小的圖像通常在頁(yè)面中作點(diǎn)綴和呼應(yīng)，表達(dá)情感含蓄，給人精巧細(xì)致的感覺(jué)。1.平直的視角給人一種平穩(wěn)、安定、規(guī)矩的感覺(jué)。2.非常規(guī)的視角如：倒置、旋轉(zhuǎn)、仰視、俯視增強(qiáng)畫(huà)面動(dòng)感，更具強(qiáng)烈的視覺(jué)沖擊。二.局部與特寫(xiě)對(duì)于整體的圖像局部與特寫(xiě)能讓視線更加集中，這種手法有點(diǎn)到為止，意猶未盡的感覺(jué)。局部放大，重點(diǎn)表現(xiàn)這一部分，稱為特寫(xiě)。特寫(xiě)能對(duì)圖像產(chǎn)生瞬間的凝視，引發(fā)瀏覽者的興趣點(diǎn)。三.合成與組合圖像的合成是指用計(jì)算機(jī)將多幅圖片的不同內(nèi)容有選擇的合成一個(gè)圖像，合成后的圖像傳達(dá)更豐富的信息，能更集中的體現(xiàn)創(chuàng)意。圖像的重要程度可以因面積、擺放位置、組合方式的不同而有所不同。四.虛實(shí)和影調(diào)圖像的虛實(shí)對(duì)比能夠產(chǎn)生空間感，實(shí)的物體感覺(jué)近，虛的物體感覺(jué)遠(yuǎn)。五.退底與輪廓圖像的退底是僅保留所選圖像，而將沿圖像邊緣的背景去掉，退底后的形象的外輪廓成自由形狀，具體清晰分明的視覺(jué)形態(tài)，顯得靈活自如。4.4.3網(wǎng)頁(yè)設(shè)計(jì)中色彩的屬性及其應(yīng)用設(shè)計(jì)精良的網(wǎng)站總有其色調(diào)構(gòu)成的總體傾向,以一種顏色或幾種臨近顏色為主導(dǎo),使全呈現(xiàn)在某種和諧、統(tǒng)一的色彩傾向，如同人穿衣服。要想恰如其分的表現(xiàn)網(wǎng)頁(yè)中的內(nèi)容，在競(jìng)爭(zhēng)對(duì)手脫穎而出的，信息空間的構(gòu)造也需要恰如其分的包裝和表達(dá)。一.與網(wǎng)站風(fēng)格色彩是網(wǎng)頁(yè)設(shè)計(jì)中很難把握的重要方面，是確立網(wǎng)站風(fēng)格的前提，網(wǎng)站色彩的傾向，決定著網(wǎng)站給瀏覽者的第一印象。如：活潑、莊重、雅致或熱烈。二.色彩原理“色彩是破碎了的光，太陽(yáng)的光與地球相撞，破碎分散，因而使整個(gè)地球形成美麗的色彩?！?.色彩的三要素明度、色相和飽和度構(gòu)成色彩的三要素。自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其它所有的顏色均屬于彩色，任何一種色彩都具有明度、純度、飽和度三大屬性。(1).明度明度指色彩的明暗程度。(2).色相色相指色彩的相貌。如：紅、黃、藍(lán)、綠等。(3).純度純度指色彩的純凈程度，純度越高，色相感越強(qiáng)。2.色彩的分類：原色、間色、鄰近色、對(duì)比色、互補(bǔ)色3.色彩與心理色彩對(duì)人們頭腦和精神心理的影響是客觀存在的，如：色彩的知覺(jué)力，色彩的辨別力，色彩的象征力及情感。(1)色彩的感覺(jué)A.色彩的冷暖色彩的冷暖與人們對(duì)世界的經(jīng)驗(yàn)分不開(kāi)。如：陽(yáng)光呈現(xiàn)紅、橙、黃、等顏色，所以人們一看到紅、橙、黃等色就聯(lián)想到火熱和烈日給人們的感受，故稱“暖色”B.當(dāng)人們看到綠、青藍(lán)色時(shí)會(huì)與寒冷相聯(lián)系.如冰川、海洋、夜空、樹(shù)蔭等色彩的冷暖歸屬不能一概而論，在特殊情況下，色彩的冷暖感覺(jué)會(huì)發(fā)生變化(2).色彩的進(jìn)退和脹縮感覺(jué)a.長(zhǎng)波長(zhǎng)的暖色有前進(jìn)的睡眠的感覺(jué)，短波的冷色有退縮的感覺(jué)b.明度高的色彩光量多、色刺激犬，有前進(jìn)膨脹的感覺(jué)，反之有退縮的感覺(jué)c.不同北京的襯托也能產(chǎn)生前進(jìn)、漲縮的感覺(jué)(3).色彩的輕重和軟硬感覺(jué)明度高的色彩給人輕的感覺(jué)，明度低的色彩給人重的感覺(jué)。在色相方面，暖色給人輕的感覺(jué)，冷色給人重的感覺(jué)給人輕的感覺(jué)的顏色均有軟的感覺(jué)，給人重的感覺(jué)的顏色均有硬的感覺(jué)(4).色彩的艷麗與素雅色彩飽和度高，亮度高的色彩艷麗，反之素雅(5).色彩的記憶性人們對(duì)色彩的記憶，由于年齡、性別、個(gè)性、職業(yè)、經(jīng)歷、所受教育、自然環(huán)境、社會(huì)背景的不同差異很大一般說(shuō)來(lái)記憶性色彩強(qiáng)的色彩為：暖色、名度高、純度高記憶性弱的色彩：冷色、明度低、純度低(6).色彩的聯(lián)想與象征：色彩的聯(lián)想是通過(guò)以往的經(jīng)驗(yàn)、記憶或知識(shí)將當(dāng)前的色彩與其他具象或抽象及相聯(lián)系起來(lái)的過(guò)程常見(jiàn)顏色的聯(lián)想：a具象聯(lián)想紅色：血`火，太陽(yáng)橙色：燈光柑橘秋葉都市黃色：光檸檬迎春花食品綠色：草地樹(shù)葉禾苗藍(lán)色：天空宇宙水冰紫色：丁香花葡萄茄子黑色：夜晚墨石炭白色：雪牛奶白云面粉灰色：烏云鐵木b抽象聯(lián)想紅色：熱烈熱情危險(xiǎn)活力吉祥喜慶夏季傳統(tǒng)橙色：溫暖歡喜嫉妒華麗甜蜜興奮黃色：光明希望快活平凡權(quán)利清爽安靜藍(lán)色：平靜神秘悠久理智深遠(yuǎn)科學(xué)快捷紫色：優(yōu)雅高貴注重浪漫神秘女性溫柔虛幻魅力黑色：嚴(yán)肅剛健恐怖死亡罪惡堅(jiān)硬沉默絕望悲哀男性機(jī)械灰色：平凡天意謙遜灰心無(wú)聊消極謙虛隨便（7）人對(duì)色彩的情感最基本的情感表現(xiàn)：好惡情感的差異的原因：a.年齡差異，年齡高：冷色明度純度低年齡低：明度純度高b．性別差異：男性：冷色或純度高的色彩（如黑.灰）→色調(diào)集中女性：暖色.純度較低的粉色及白色→色調(diào)分散c.種族差異原因：生活環(huán)境.社會(huì)文化.歷史.宗教信仰等不同中國(guó)：紅黃藍(lán)天藍(lán)淺藍(lán)美國(guó)：淡黃紅明灰明藍(lán)法國(guó)：黑灰紅藍(lán)綠白德國(guó)：黑白天藍(lán)咖啡菲律賓：淡黃藍(lán)綠印度：紅黃藍(lán)綠埃及：綠紅黑藍(lán)綠三.web設(shè)計(jì)中的色彩應(yīng)用原理確立網(wǎng)站色調(diào)確立網(wǎng)站色調(diào)的過(guò)程⑴決定主體色⑵選擇輔助色⑶選擇背景色⑷色彩調(diào)整確定主頁(yè)的題材后，要了解哪些顏色適合哪些網(wǎng)站，如影視題材的站點(diǎn)，基本任何顏色都適合，但用黑色或深色則更符合夜間觀眾的視覺(jué)感受頁(yè)面色彩搭配⑴色相相比⑵明度對(duì)比⑶飽和度對(duì)比⑷補(bǔ)色對(duì)比⑸面積對(duì)比⑹調(diào)和色調(diào)3.調(diào)和色彩的基本法則⑴建立主調(diào)統(tǒng)率頁(yè)面色彩關(guān)系⑵善用金銀黑白灰等中性色緩解中和，以烘托主題⑶拉開(kāi)距離（從純度和明度.面積上著手）四.色彩意象的設(shè)計(jì)應(yīng)用當(dāng)我們看到色彩時(shí)，除了感覺(jué)其物理方面的影響，心理也會(huì)立即產(chǎn)生感覺(jué)，這就是色彩的意象紅色的色彩意象由于紅色容易引起注意，所以在各種媒體中被廣泛的采用；除了具有較佳的明視效果之外，更被用來(lái)傳達(dá)有活力.熱誠(chéng).溫暖.前進(jìn)等涵義的企業(yè)精神與形象。另外紅色也常用來(lái)作為警告.危險(xiǎn).禁止.防火等標(biāo)志用色.(例:中國(guó)人一看見(jiàn)紅色就充滿了喜悅和激情)2.橙色的色彩意象橙色明視度高，在工業(yè)安全用色中。橙色是警戒色。如火車頭、登山服飾、救生衣的設(shè)計(jì)大都含有橙色。由于橙色明亮刺眼，有時(shí)會(huì)產(chǎn)生負(fù)面低俗的意象。所以運(yùn)用時(shí)，要注意色彩的搭配及表現(xiàn)形式。由于符合大自然創(chuàng)造的色彩搭配模式，橙色與具有一定灰度的綠色搭配效果較好。3.黃色的色彩意象黃色明視度高，同樣在生活中屬警戒色（如交通標(biāo)志上黃燈）高亮度的黃色在頁(yè)面設(shè)計(jì)中很少大塊面的出現(xiàn)，多半由于顏色本身過(guò)于刺眼，造成瀏覽者視覺(jué)的不愉快。但與黑色搭配較好，會(huì)強(qiáng)烈突出主體。在細(xì)節(jié)部分使用效果更加。4.綠色的色彩意象在頁(yè)面設(shè)計(jì)中，綠色所傳達(dá)的清爽、理想、希望、生長(zhǎng)的意象。符合人們接近自然的生理需求。綠色在設(shè)計(jì)中應(yīng)用很廣，在工業(yè)上許多機(jī)械采用綠色，醫(yī)療機(jī)構(gòu)場(chǎng)所，也常用綠色作空間色彩規(guī)劃。5．藍(lán)色的色彩意象由于藍(lán)色沉穩(wěn)的特性，具有理智、準(zhǔn)確的意象。在商業(yè)設(shè)計(jì)中，強(qiáng)調(diào)科技、效率的商品或企業(yè)形象。大多選用藍(lán)色作標(biāo)準(zhǔn)色。如：電腦、汽車、攝影器材等。另外受西方文化的影響。藍(lán)色作為頁(yè)面基調(diào)能營(yíng)造出深邃、憂郁的意境。用其展示博大的胸懷或感性訴求方面比較合適。6．紫色的色彩意境紫色由于其強(qiáng)烈的女性化的性格，在商業(yè)設(shè)計(jì)用色中，受到相等大的限制，除了女性有關(guān)的商品或企業(yè)形象外，其它類設(shè)計(jì)不常作為主色調(diào)使用。紫色被稱為“魔鬼”顏色。深紫色會(huì)造成恐怖的氣氛，對(duì)比氣體顏色較難控制紫色也有其優(yōu)點(diǎn)：是高貴的象征。明度低的紫色有清澈爽朗的感覺(jué)，而且有一定灰度的淺紫色會(huì)有纖巧雅致的感覺(jué)，適合表現(xiàn)女性有關(guān)的題材。7.褐色的色彩意象在商業(yè)上褐色用來(lái)表示原始材料的質(zhì)感。如麻、木材等?；蛴脕?lái)傳達(dá)莫些產(chǎn)品的色澤及味感，如咖啡、茶、麥類等，或強(qiáng)調(diào)古典優(yōu)雅的企業(yè)或商品形象。8白色的色彩意象白色具有高級(jí)，科技的意象。痛需和其他色彩搭配使用。純白色繪入寒冷，嚴(yán)峻的感覺(jué)。所以在使用白色時(shí)，都會(huì)搭配一些其他顏色。如象牙白、米白、乳白等。白色是永遠(yuǎn)流行的主色調(diào)，是能和任何顏色搭配的萬(wàn)能色。較容易控制。9.黑色的色彩意象黑色具有高貴、穩(wěn)重、科技莊嚴(yán)的意象。黑色也是一種流行的主色調(diào)。適合與許多色彩搭配。以黑色為主色調(diào)可以創(chuàng)造出神秘的氣氛，另外穩(wěn)重的黑色可以烘托主體超凡氣質(zhì)和美感。10.灰色的色彩意象灰色具有柔和，高雅的意象。屬中間色，男女皆能接受，所以，灰色也是永遠(yuǎn)的主要顏色。許多科技產(chǎn)品，尤其是和金屬材料有關(guān)的，凡平卻來(lái)用灰色來(lái)傳達(dá)高級(jí)，科技的形象。以灰色作為設(shè)計(jì)的基調(diào)是當(dāng)前設(shè)計(jì)流行的做法，在緩和過(guò)對(duì)比造成的強(qiáng)烈的反差，灰色顯示了其杰出的能力。五、網(wǎng)頁(yè)設(shè)計(jì)的配色技巧色彩的意象可以延伸設(shè)計(jì)潛制的效果。網(wǎng)頁(yè)設(shè)計(jì)新手可能喜歡選用一些漂亮的圖片作為色彩背景。但瀏覽一下大型網(wǎng)站，會(huì)發(fā)現(xiàn)它們更多的運(yùn)用的是黑、灰、藍(lán)、綠、黃等。其他的色彩作為背景。使得網(wǎng)頁(yè)顯得典雅，溫馨而又不失活潑，同時(shí)大大加快了網(wǎng)頁(yè)加載的速度。1.運(yùn)用色素這里指在主色調(diào)選定的基礎(chǔ)上，調(diào)整色彩的透明度或飽和度。將色彩變淡或加深調(diào)出新色彩或選用鄰近色，使用頁(yè)色彩統(tǒng)一、有層次感。2.使用對(duì)比色可以充分的利用補(bǔ)色原理進(jìn)行搭配，同時(shí)注意使用灰色調(diào)進(jìn)行調(diào)和，這樣的作為色彩豐富，意境深遠(yuǎn)。3.用黑色與明度，純度，飽和度高的色彩搭配對(duì)比強(qiáng)烈。不光雅致的同時(shí)更容易吸引眼球。4.文字與背景色的搭配深色字體配素淡，柔和的色彩，讀起來(lái)自然流暢，深色字體搭配鮮明的字體。如字體作為裝飾性來(lái)表現(xiàn)出觀而選擇中間色調(diào)明時(shí)，純度可適當(dāng)降低?？偨Y(jié)；要想將色彩自然和諧的運(yùn)用于網(wǎng)頁(yè)設(shè)計(jì)中，使網(wǎng)頁(yè)獲得生命力。大自然是最好的老師。春夏秋冬都恩能夠使設(shè)計(jì)和諧優(yōu)美。色彩運(yùn)用中應(yīng)注意的問(wèn)題；國(guó)家、種族、宗教信仰、風(fēng)俗地理位置、文化修養(yǎng)、性別、年齡。例:兒童喜歡對(duì)比強(qiáng)烈，生活在草原上的人喜歡紅色，生活在鬧市中的人喜歡淡雅的顏色，生活在大沙漠中的人喜歡綠色。4.2網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)的程序4.2.1前期策劃：一,明確設(shè)計(jì)任務(wù)一個(gè)設(shè)計(jì)師:在接受任務(wù)之前,必須搞清楚服務(wù)對(duì)象的基本情況和意圖,弄清楚所要設(shè)計(jì)的是一個(gè)什么樣的任務(wù).企業(yè)設(shè)計(jì)網(wǎng)站的原因很多:宣傳新公司或服務(wù)的需要舊網(wǎng)站的改版、更新………………二.調(diào)查研究與分析任何主頁(yè)都要根據(jù)主題的內(nèi)容形成風(fēng)格,只有熟悉題材和內(nèi)容設(shè)計(jì)工作才能有的放矢,取得理想效果.分析的內(nèi)容包括:1.目標(biāo)市場(chǎng)分析分析受眾群體的文化水平,價(jià)值觀念,所在的國(guó)家,民族及喜好等。2.同類行業(yè)網(wǎng)站分析同類行業(yè)網(wǎng)站的總體色彩風(fēng)格,排版布局,頁(yè)面內(nèi)容的選擇及表現(xiàn)形式等。三創(chuàng)意開(kāi)發(fā)由單圖表現(xiàn)開(kāi)始,確定設(shè)計(jì)方向,題材,構(gòu)思多個(gè)方案,嘗試從不同角度,方向,不同方式對(duì)網(wǎng)頁(yè)主題進(jìn)行挖掘和表現(xiàn),然后將材料進(jìn)行整理,選擇其中較好的進(jìn)行發(fā)散.四.修改及定案應(yīng)收時(shí)的聽(tīng)取多方面的意見(jiàn)及時(shí)對(duì)收集材料匯集整理,修改,并最終定稿.4.2.2后期更新及維護(hù)網(wǎng)站中隨著新信息的加入,老信息的刪除,要不斷的對(duì)網(wǎng)頁(yè)進(jìn)行更新并維護(hù),使其能始終正常運(yùn)行。更新前的準(zhǔn)備：1.了解市場(chǎng)需求大多網(wǎng)頁(yè)數(shù)網(wǎng)頁(yè)都或多或少的與經(jīng)濟(jì)利益相掛鉤,應(yīng)以市場(chǎng)的導(dǎo)向，為其服務(wù).2.了解詢問(wèn)者的心理設(shè)計(jì)網(wǎng)頁(yè)需要了解你的觀眾,了解什么東西在吸引他們,需要了解他們的感受,則有助于你建立站點(diǎn)的色調(diào)和個(gè)性。小結(jié):網(wǎng)站創(chuàng)意關(guān)乎一個(gè)網(wǎng)站的生死存亡,如果想在眾多的競(jìng)爭(zhēng)對(duì)手中脫穎而出,在創(chuàng)意、策劃上下功夫是必要的,同維護(hù)和制作一樣,這是一個(gè)沒(méi)有重點(diǎn)的航程?！毒W(wǎng)頁(yè)設(shè)計(jì)與制作》課程講義理論學(xué)時(shí)部分第五章網(wǎng)頁(yè)編程語(yǔ)言授課學(xué)時(shí)：10授課內(nèi)容：5.1HTML5.1.1HTML的基本結(jié)構(gòu)5.1.2HTML語(yǔ)言的語(yǔ)法5.1.3HTML語(yǔ)言的常用標(biāo)識(shí)5.2CSS層疊樣式表5.2.1層疊樣式表簡(jiǎn)介5.2.2創(chuàng)建層疊樣式表5.2.3層疊樣式表的結(jié)構(gòu)5.2.4層疊樣式表應(yīng)用基本要求：理解HTML語(yǔ)言中的各種文本格式、字符格式、段落設(shè)置、列表標(biāo)記的作用；會(huì)用HTML語(yǔ)言中的標(biāo)記設(shè)置顏色、文本格式和列表；掌握HTML的語(yǔ)法結(jié)構(gòu)，掌握HTML語(yǔ)言中標(biāo)記的使用方法；理解表格、框架、表單的作用。了解HTML、CSS的定義、概念和作用；理解CSS樣式表的作用和意義；掌握CSS樣式表的結(jié)構(gòu)；掌握在網(wǎng)頁(yè)中添加CSS的方法。掌握三種添加樣式信息的方法，會(huì)使用CSS設(shè)置網(wǎng)頁(yè)格式和列表的格式。重點(diǎn)與難點(diǎn)：HTML語(yǔ)言的語(yǔ)法、HTML語(yǔ)言中7類常見(jiàn)的標(biāo)記的作用與應(yīng)用；CSS樣式表的功能、CSS樣式表中的樣式規(guī)則與選擇器；HTMLHTML是一種超文本標(biāo)記語(yǔ)言，用于創(chuàng)建頁(yè)面并在瀏覽器中顯示超文本文件的格式早在1945年就由VannevarBush提出，他在理論上建立了一個(gè)超文本文件系統(tǒng)。1965年TedNelson第一次使用“超文本”一詞來(lái)形容這種管理信息的系統(tǒng)。與Bush一樣，他的超文本文件系統(tǒng)“Xanadu”，最終也未獲得成功。1967年，在IBM資助下，世界上第一個(gè)真正運(yùn)行成功的“超文本編輯系統(tǒng)”建成，這項(xiàng)研究由AndriesVanDam主持，在美國(guó)布朗大學(xué)最終完成。1969年，美國(guó)國(guó)防部高級(jí)研究計(jì)劃署建立了ARPA網(wǎng)，該網(wǎng)絡(luò)最成功的技術(shù)就是TCP/IP協(xié)議。HTML語(yǔ)言起源于標(biāo)準(zhǔn)綜合標(biāo)記語(yǔ)言(StandardGeneralizedMarkupLanguage簡(jiǎn)稱SGML)，是由CERN(歐洲粒子物理實(shí)驗(yàn)室)首先提出來(lái)的。其最早版本起源于1992年，HTML4.01版于1999年12月24日被推薦使用。HTML最初用于發(fā)布信息，并沒(méi)有在網(wǎng)絡(luò)上使用。但它那極容易使用的顯著特點(diǎn)和隨著網(wǎng)絡(luò)帶寬的逐漸增加，人們便將其作為在各種網(wǎng)絡(luò)環(huán)境之間，不同文件格式之間進(jìn)行交流的一種語(yǔ)言格式。它通過(guò)文件格式標(biāo)準(zhǔn)化，統(tǒng)一使用一些標(biāo)記符號(hào)(TAG)，對(duì)文件的內(nèi)容進(jìn)行標(biāo)注，指出內(nèi)容的輸出格式，如字體大小、顏色，背景顏色，表格形式，各部分之間邏輯上的組織等。使用支持HTML的瀏覽軟件，其它用戶就可以對(duì)文件進(jìn)行自由的跳躍式的閱讀，還可自行調(diào)整顯示和閱讀的形式。由于它簡(jiǎn)單易學(xué)，表現(xiàn)力強(qiáng)，適用廣泛,所以深受用戶喜愛(ài)，迅速得到了推廣和普及。超文本標(biāo)記語(yǔ)言的領(lǐng)頭先鋒是美國(guó)麻省理工學(xué)院計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室的WWW標(biāo)準(zhǔn)化組織，又稱萬(wàn)維網(wǎng)聯(lián)盟，其互聯(lián)網(wǎng)地址為：。有關(guān)HTML語(yǔ)言的各種參考資料和W3C行將發(fā)布的各種新版特征、最新消息等內(nèi)容，均可以在這個(gè)網(wǎng)站上查到。第一章已經(jīng)介紹了一個(gè)典型的超文本語(yǔ)言程序（例1.1）。5.1.1HTML的基本結(jié)構(gòu)超文本標(biāo)記語(yǔ)言結(jié)構(gòu)簡(jiǎn)單，語(yǔ)法較松散，易學(xué)易用。它是一種文字處理語(yǔ)言，而不是“程序”語(yǔ)言。超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。序（HTML的版本聲明）是超文本標(biāo)記語(yǔ)言的附加標(biāo)記，放在HTML文檔的第一行。在一般的文檔中也許沒(méi)有，序只是用來(lái)告知瀏覽器所遵循的HTML版本，當(dāng)前的瀏覽器一般不要求含有序，而且也不會(huì)處理序，因此該標(biāo)記可以忽略。但是若想保持編寫(xiě)嚴(yán)格遵循標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言（SGML）的HTML文檔，那么就該保留序的位置。<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"><!序><HTML><HEAD>

頭部信息

</HEAD><BODY>

文檔主體，正文部分

</BODY></HTML>其中<HTML>在最外層，表示這對(duì)標(biāo)記間的內(nèi)容是HTML文檔。我們還會(huì)看到一些Hompage省略<HTML>標(biāo)記，因?yàn)?html或.htm文件被Web瀏覽器默認(rèn)為是HTML文檔。<HEAD>之間包括文檔的頭部信息，如文檔總標(biāo)題等，若不需頭部信息則可省略此標(biāo)記。<BODY>標(biāo)記一般不省略，表示正文內(nèi)容的開(kāi)始。下面是一個(gè)最基本的超文本文檔的源代碼：━┓

┃

┃

┃

┃文件體

┃

┃

┃

┃

━┛━┓

┃文件頭

━┛<HTML>

<HEAD>

<TITLE>一個(gè)簡(jiǎn)單的HTML示例</TITLE>

</HEAD>

<BODY>

<CENTER>

<H3>歡迎光臨我的主頁(yè)</H3>

<BR>

<HR>

<FONTSIZE=2>

這是我第一次做主頁(yè)，無(wú)論怎么樣，我都會(huì)努力做好！

</FONT>

</CENTER>

</BODY>

</HTML>━┓

┃

┃

┃

┃文件體

┃

┃

┃

┃

━┛━┓

┃文件頭

━┛例5.1使用多種標(biāo)記元素的超文本文檔(L5-1.htm)。<HTML><HEAD><TITLE>對(duì)文字、圖片、文檔作不同處理</TITLE></HEAD><BODY><H2>鏈接圖片、文檔，改變字體、字號(hào)等</H2><OL><LI><FONTface="隸書(shū)">劃卻君山好，平鋪湘流水。</FONT><LI><FONTface="華文行楷">巴陵無(wú)限酒，醉殺洞庭秋。</FONT></OL><IMGborder="0"src="Js.gif"width="108"height="70"><FONTsize="5">湖光、山色</FONT><BR><Ahref="">岳陽(yáng)</A></BODY></HTML>說(shuō)明：可以將例5.1寫(xiě)入“記事本”，保存文件的擴(kuò)展名必須是.htm或.html；例中鏈接圖片、文檔，改變字體、字號(hào)等的主要標(biāo)記有：<H2></H2>——設(shè)置標(biāo)題文字，<FONT></FONT>——設(shè)置字體、字號(hào)等，<IMG>——設(shè)置圖片超鏈接，<A></A>——設(shè)置文本等超鏈接。其他標(biāo)記的含義請(qǐng)見(jiàn)后續(xù)例題或附錄A。例5.1的運(yùn)行結(jié)果見(jiàn)圖5-1。圖圖5-1例5.1的執(zhí)行結(jié)果5.1.2HTML語(yǔ)言的語(yǔ)法HTML是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言(StandardGeneralizedMarkupLanguage，SGML)的一個(gè)子集，是標(biāo)記的集合。一般標(biāo)記是由一個(gè)起始標(biāo)記(OpeningTag)和一個(gè)結(jié)束標(biāo)記(EndingTag)所組成，其語(yǔ)法為：<x>受控文字</x>

其中，x代表標(biāo)記名稱。<x>和</x>就如同一組開(kāi)關(guān)：起始標(biāo)記<x>為開(kāi)啟(ON)的某種功能，而結(jié)束標(biāo)記</x>(通常為起始標(biāo)記加上一個(gè)斜線/)為關(guān)(OFF)功能，受控制的文字信息便放在兩標(biāo)記之間。例如：<i>這是斜體字</i>。

標(biāo)記之中還可以附加一些屬性(Attribute)，用來(lái)完成某些特殊效果或功能。例如：<xa1="v1",a2="v2",...,an="vn">受控文字</x>

其中，a1,a2,...,an為屬性名稱，而v1,v2,...,vn則是其所對(duì)應(yīng)的屬性值，屬性值加不加引號(hào)，目前所使用的瀏覽器都可接受，但依據(jù)W3C的新標(biāo)準(zhǔn)，屬性值是要加引號(hào)的，所以最好養(yǎng)成加引號(hào)得習(xí)慣。如“基本結(jié)構(gòu)樣板”中的頭標(biāo)記<HEAD>和</HEAD>，<HEAD>為起始標(biāo)記，加斜線