《網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)教程與上機(jī)指導(dǎo)第2版》第1章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

1、第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ),教學(xué)提示和教學(xué)目標(biāo) 1.1 網(wǎng)頁(yè)中的基本概念1.2 網(wǎng)頁(yè)的基本構(gòu)成元素1.3 網(wǎng)頁(yè)設(shè)計(jì)的常用工具1.4 網(wǎng)站建設(shè)的基本流程,教學(xué)提示和教學(xué)目標(biāo),教學(xué)提示：要設(shè)計(jì)出令人滿(mǎn)意的網(wǎng)頁(yè)，不僅要熟練掌握網(wǎng)頁(yè)設(shè)計(jì)軟件的基本操作，還要掌握網(wǎng)頁(yè)的一些基本知識(shí)和網(wǎng)站建設(shè)的基本流程。本章首先介紹網(wǎng)頁(yè)中的一些基本概念，如什么是網(wǎng)頁(yè)、什么是網(wǎng)站、什么是域名和空間。本章還介紹網(wǎng)頁(yè)設(shè)計(jì)的常用工具，如網(wǎng)頁(yè)排版軟件Dreamwea

2、ver 8、網(wǎng)頁(yè)圖像設(shè)計(jì)軟件Photoshop CS2和Fireworks 8、網(wǎng)頁(yè)動(dòng)畫(huà)制作軟件Flash 8，最后簡(jiǎn)單講述了網(wǎng)站建設(shè)的基本流程。教學(xué)目標(biāo)：熟悉網(wǎng)頁(yè)設(shè)計(jì)中的基本概念熟悉網(wǎng)頁(yè)的基本構(gòu)成元素了解網(wǎng)頁(yè)設(shè)計(jì)的常用工具熟悉網(wǎng)站建設(shè)的基本流程,1.1 網(wǎng)頁(yè)中的基本概念,隨著計(jì)算機(jī)互聯(lián)網(wǎng)技術(shù)的發(fā)展，Internet在人們的生活、學(xué)習(xí)和工作中的位置越來(lái)越重要。越來(lái)越多的人開(kāi)始學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)軟件，在學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)軟件前應(yīng)當(dāng)首先了解

3、一些基本概念。 1.1.1 什么是網(wǎng)頁(yè)1.1.2 什么是網(wǎng)站1.1.3 什么是域名和空間,1.1.1 什么是網(wǎng)頁(yè),網(wǎng)頁(yè)是Internet的基本信息單位，一般網(wǎng)頁(yè)上都會(huì)有文本和圖片等信息，而復(fù)雜一些的網(wǎng)頁(yè)上還會(huì)有聲音、視頻、動(dòng)畫(huà)等多媒體內(nèi)容。進(jìn)入網(wǎng)站看到的是網(wǎng)站的主頁(yè)，主頁(yè)集成了指向二級(jí)頁(yè)面以及其他網(wǎng)站的鏈接，瀏覽者進(jìn)入主頁(yè)后可以瀏覽最近更新的消息，找到感興趣的主題，通過(guò)單擊超鏈接跳轉(zhuǎn)到其他網(wǎng)頁(yè)或其他網(wǎng)站，如圖1.1所示。,

4、1.1.2 什么是網(wǎng)站,網(wǎng)站是有獨(dú)立域名、獨(dú)立存放空間的內(nèi)容集合，這些內(nèi)容可能是網(wǎng)頁(yè)，也可能是程序或其他文件，不一定要有很多網(wǎng)頁(yè)，主要有獨(dú)立域名和空間，哪怕只有一個(gè)頁(yè)面也可以稱(chēng)為網(wǎng)站。網(wǎng)站是由域名和網(wǎng)站空間構(gòu)成。衡量一個(gè)網(wǎng)站的性能通常從網(wǎng)站空間大小、網(wǎng)站位置、網(wǎng)站速度、網(wǎng)站軟件配置和網(wǎng)站提供的服務(wù)等幾個(gè)方面考慮。,1.1.3 什么是域名和空間,從技術(shù)角度來(lái)看，域名是在Internet上用于解決IP地址對(duì)應(yīng)的一種方法。一個(gè)完整的域名

5、由二個(gè)或二個(gè)以上部分組成，各部分之間用英文的句號(hào)“.”來(lái)分隔，最后一個(gè)“.”的右邊部分稱(chēng)為頂級(jí)域名，最后一個(gè)“.”的左邊部分稱(chēng)為二級(jí)域名，二級(jí)域名的左邊部分稱(chēng)為三級(jí)域名，以此類(lèi)推，每一級(jí)的域名控制它下一級(jí)域名的分配。從商業(yè)角度來(lái)看，域名是“企業(yè)的網(wǎng)上商標(biāo)”。企業(yè)都非常重視自己的商標(biāo)，而作為網(wǎng)上商標(biāo)的域名，其重要性和其價(jià)值也已被全世界的企業(yè)所認(rèn)識(shí)。從樹(shù)立企業(yè)形象的角度看，域名和商標(biāo)有著潛移默化的聯(lián)系。所以，域名與商標(biāo)有一定的共同特點(diǎn)。許

6、多企業(yè)在選擇域名時(shí)，往往希望用和自己企業(yè)商標(biāo)一致的域名。從域名價(jià)值角度來(lái)看，域名是互聯(lián)網(wǎng)上最基礎(chǔ)的東西，也是一個(gè)稀有的全球資源，無(wú)論是做ICP和電子商務(wù)，還是在網(wǎng)上開(kāi)展其他活動(dòng)，都要從域名開(kāi)始。空間就是放置網(wǎng)站文件的計(jì)算機(jī)的硬盤(pán)空間，不是在本地計(jì)算機(jī)上面，而是在網(wǎng)絡(luò)服務(wù)供應(yīng)商提供的服務(wù)器上，瀏覽者可以在網(wǎng)絡(luò)上訪(fǎng)問(wèn)這臺(tái)計(jì)算機(jī)上放置的網(wǎng)頁(yè)文件。,1.2 網(wǎng)頁(yè)的基本構(gòu)成元素,網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素。不同性質(zhì)的網(wǎng)站，其頁(yè)面元素是不同的。

7、一般網(wǎng)頁(yè)的基本元素包括LOGO、Banner(網(wǎng)幅圖像廣告)、導(dǎo)航欄目、文本、圖像、Flash動(dòng)畫(huà)和多媒體。 1.2.1 網(wǎng)站LOGO1.2.2 網(wǎng)站banner1.2.3 導(dǎo)航欄1.2.4 文本1.2.5 圖像1.2.6 Flash動(dòng)畫(huà)1.2.7 多媒體,1.2.1 網(wǎng)站LOGO,網(wǎng)站LOGO，也叫網(wǎng)站標(biāo)志，它是一個(gè)站點(diǎn)的象征，也是一個(gè)站點(diǎn)是否正規(guī)的標(biāo)志之一。一個(gè)好的標(biāo)志可以很好地樹(shù)立公司形象。網(wǎng)站標(biāo)志一

8、般放在網(wǎng)站的左上角，訪(fǎng)問(wèn)者一眼就能看到它。成功的網(wǎng)站標(biāo)志有著獨(dú)特的形象標(biāo)識(shí)，在網(wǎng)站的推廣和宣傳中起到事半功倍的效果。網(wǎng)站標(biāo)志應(yīng)體現(xiàn)該網(wǎng)站的特色、內(nèi)容以及其內(nèi)在的文化內(nèi)涵和理念。如圖1.2所示是新浪網(wǎng)站的標(biāo)志。,1.2.2 網(wǎng)站banner,Banner是一種網(wǎng)絡(luò)廣告形式，是一種以GIF、JPG等格式建立的圖像文件，定位在網(wǎng)頁(yè)中，大多用來(lái)表現(xiàn)網(wǎng)絡(luò)廣告內(nèi)容。Banner廣告一般是放在網(wǎng)頁(yè)的頂部位置，在用戶(hù)瀏覽網(wǎng)頁(yè)信息時(shí)，吸引用戶(hù)關(guān)注廣告信

9、息。Banner廣告有多種規(guī)格，其中最常用的是486×60像素的標(biāo)準(zhǔn)廣告。Banner廣告有多種不同的形式，如橫幅廣告、全幅廣告、條幅廣告、旗幟廣告等，通常是以GIF、JPG等格式建立的圖像文件或Flash文件，如圖1.3所示為某網(wǎng)站Banner。,1.2.3 導(dǎo)航欄,導(dǎo)航欄既是網(wǎng)頁(yè)設(shè)計(jì)中的重要部分，又是整個(gè)網(wǎng)站設(shè)計(jì)中的一個(gè)較獨(dú)立的部分。一般來(lái)說(shuō)網(wǎng)站中的導(dǎo)航位置在各個(gè)頁(yè)面中出現(xiàn)的位置是比較固定的，而且風(fēng)格也較為一致。導(dǎo)航欄

10、的位置對(duì)網(wǎng)站的結(jié)構(gòu)與各個(gè)頁(yè)面的整體布局起到舉足輕重的作用。導(dǎo)航欄的位置一般有4種常見(jiàn)的顯示位置：在頁(yè)面的左側(cè)、右側(cè)、頂部和底部。有的在同一個(gè)頁(yè)面中運(yùn)用了多種導(dǎo)航，如有的在頂部設(shè)置了主菜單，而在頁(yè)面的左側(cè)有設(shè)置了折疊式菜單，同時(shí)又在頁(yè)面的底部設(shè)置了多種超鏈接，這樣便增強(qiáng)了網(wǎng)站的可訪(fǎng)問(wèn)性。當(dāng)然并不是導(dǎo)航在頁(yè)面中出現(xiàn)的次數(shù)越多越好，而是要合理地運(yùn)用頁(yè)面達(dá)到總體的協(xié)調(diào)一致。圖1.4所示為某網(wǎng)頁(yè)的頂部導(dǎo)航欄。,1.2.4 文本,文字一直是人類(lèi)

11、最重要的信息載體與交流工具，網(wǎng)頁(yè)中的文字(除網(wǎng)頁(yè)圖像中的文字)也稱(chēng)為文本，網(wǎng)頁(yè)中的信息也以文本為主。與圖像相比，文字雖然不如圖像那樣易于吸引瀏覽者的注意，但卻能準(zhǔn)確地表達(dá)信息的內(nèi)容和含義。為了克服文字固有的缺點(diǎn)，人們賦予了網(wǎng)頁(yè)中文本更多的屬性，如字體、字號(hào)和顏色等，通過(guò)不同格式的區(qū)別，突出顯示重要的內(nèi)容。如圖1.5所示是一張使用文本的網(wǎng)頁(yè)。,1.2.5 圖像,圖像在網(wǎng)頁(yè)中具有提供信息、展示形象、美化網(wǎng)頁(yè)、表達(dá)個(gè)人情趣和風(fēng)格的作用?？?/p>

12、以在網(wǎng)頁(yè)中使用GIF、JPEG和PNG等多種圖像格式，其中使用最廣泛的是GIF和JPEG兩種格式，如圖1.6所示。,1.2.6 Flash動(dòng)畫(huà),隨著Internet技術(shù)的發(fā)展，網(wǎng)頁(yè)上出現(xiàn)了越來(lái)越多的Flash動(dòng)畫(huà)。Flash動(dòng)畫(huà)已經(jīng)成為當(dāng)今網(wǎng)站不可缺少的部分，美觀的動(dòng)畫(huà)能夠?yàn)榫W(wǎng)頁(yè)增色需要具有，從而吸引更多的瀏覽者。Flash動(dòng)畫(huà)不僅需要對(duì)動(dòng)畫(huà)制作軟件非常熟悉，更重要的是設(shè)計(jì)者獨(dú)特的創(chuàng)意。如圖1.7所示為網(wǎng)頁(yè)中的Flash動(dòng)畫(huà)。,1.2

13、.7 多媒體,多媒體網(wǎng)頁(yè)元素中，除了文本、圖像和Flash動(dòng)畫(huà)外，還有聲音、視頻等其他媒體。聲音是多媒體網(wǎng)頁(yè)中的一個(gè)重要組成部分，可以將某些聲音添加到網(wǎng)頁(yè)中。在添加聲音前，需要考慮的因素包括其用途、格式、文件大小、聲音品質(zhì)及瀏覽器差別等。不同瀏覽器對(duì)聲音文件的處理方法有所不同，彼此之間可能不兼容。用于網(wǎng)絡(luò)的聲音文件格式非常多，常見(jiàn)的有MIDI、WAV、MP3和AIF等。在使用不同格式文件時(shí)，需要加以區(qū)別。很多瀏覽器不用插件也可以支

14、持MIDI、WAV和AIF格式的文件，而MP3和RM格式的聲音文件則需要用專(zhuān)門(mén)的瀏覽器插件播放。視頻文件的采用使網(wǎng)頁(yè)變得精彩而富有動(dòng)感。視頻文件的格式也非常多，常見(jiàn)的有RM、MPEG和AVI等。,1.3 網(wǎng)頁(yè)設(shè)計(jì)的常用工具,設(shè)計(jì)網(wǎng)頁(yè)時(shí)，首先要選擇網(wǎng)頁(yè)設(shè)計(jì)軟件。雖然用記事本手工編寫(xiě)源代碼也能做出網(wǎng)頁(yè)，但這需要對(duì)編程語(yǔ)言相當(dāng)了解，并不適合廣大的網(wǎng)頁(yè)設(shè)計(jì)愛(ài)好者。由于目前所見(jiàn)即所得類(lèi)型的網(wǎng)頁(yè)設(shè)計(jì)工具越來(lái)越多，使用也越來(lái)越方便，所以設(shè)計(jì)網(wǎng)頁(yè)已

15、經(jīng)變成了一件輕松的工作。Flash、Dreamweaver、Photoshop、Fireworks這4個(gè)軟件相輔相成，是設(shè)計(jì)網(wǎng)頁(yè)的首選工具，其中Dreamweaver用來(lái)排版并布局網(wǎng)頁(yè)，F(xiàn)lash用來(lái)設(shè)計(jì)精美的網(wǎng)頁(yè)動(dòng)畫(huà)，Photoshop和Fireworks用來(lái)處理網(wǎng)頁(yè)中的圖形圖像。 1.3.1 網(wǎng)頁(yè)編輯排版軟件Dreamweaver1.3.2 網(wǎng)頁(yè)動(dòng)畫(huà)制作軟件Flash1.3.3 網(wǎng)頁(yè)圖像制作軟件Photoshop1.3

16、.4 網(wǎng)頁(yè)圖像制作軟件Fireworks,1.3.1 網(wǎng)頁(yè)編輯排版軟件Dreamweaver,Dreamweaver是一種所見(jiàn)即所得的網(wǎng)頁(yè)編輯工具，能夠使網(wǎng)頁(yè)和數(shù)據(jù)庫(kù)關(guān)聯(lián)起來(lái)，支持最新的HTML編程語(yǔ)言和CSS技術(shù)，用于對(duì)Web站點(diǎn)、Web頁(yè)和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開(kāi)發(fā)。Dreamweaver 8包含一個(gè)簡(jiǎn)潔、高效的界面，且性能也得到了改進(jìn)。不僅是專(zhuān)業(yè)人員制作網(wǎng)頁(yè)的首選工具，而且普及到廣大網(wǎng)頁(yè)制作愛(ài)好者中。,1.3.2 網(wǎng)

17、頁(yè)動(dòng)畫(huà)制作軟件Flash,Flash是一款功能非常強(qiáng)大的交互式矢量多媒體網(wǎng)頁(yè)制作工具，能夠輕松輸出各種各樣的動(dòng)畫(huà)網(wǎng)頁(yè)，它不需要特別繁雜的操作，而且它的動(dòng)畫(huà)效果、多媒體效果十分出色。如圖1.9所示是利用Flash 8設(shè)計(jì)的動(dòng)畫(huà)。,1.3.3 網(wǎng)頁(yè)圖像制作軟件Photoshop,Photoshop是Adobe公司推出的圖像處理軟件。目前已被廣泛應(yīng)用于平面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)和照片處理等領(lǐng)域。隨著計(jì)算機(jī)技術(shù)的發(fā)展，Photoshop已歷經(jīng)數(shù)次版本

18、更新，功能越來(lái)越強(qiáng)大。如圖1.10所示是利用Photoshop CS2設(shè)計(jì)的網(wǎng)頁(yè)圖像。,1.3.4 網(wǎng)頁(yè)圖像制作軟件Fireworks,Fireworks能快速地創(chuàng)建網(wǎng)頁(yè)圖像，隨著版本的不斷升級(jí)，功能的不斷加強(qiáng)，F(xiàn)ireworks受到越來(lái)越多網(wǎng)頁(yè)圖像設(shè)計(jì)者的歡迎。Fireworks 8中文版更是以它方便快捷的操作模式，以及在位圖編輯、矢量圖形處理與GIF動(dòng)畫(huà)制作功能上的優(yōu)秀整合，贏得諸多好評(píng)。使用Fireworks 8設(shè)計(jì)網(wǎng)頁(yè)圖像，

19、除了對(duì)相應(yīng)的頁(yè)面插入圖像進(jìn)行調(diào)整處理外，還可以使用圖像進(jìn)行頁(yè)面的總體布局，然后使用切片導(dǎo)出。也可以使用Fireworks 8創(chuàng)建圖像按鈕，以便達(dá)到更加精彩的效果，如圖1.11所示是使用Fireworks設(shè)計(jì)的網(wǎng)頁(yè)按鈕。,1.4 網(wǎng)站建設(shè)的基本流程,網(wǎng)站建設(shè)是一個(gè)系統(tǒng)工程，有一定的基本流程，只有遵循該設(shè)計(jì)步驟，才能設(shè)計(jì)出滿(mǎn)意的網(wǎng)站。因此在建設(shè)網(wǎng)站前，先要了解網(wǎng)站建設(shè)的基本流程，這樣才能制作出更好、更合理的網(wǎng)站。 1.4.1 網(wǎng)站整體

20、規(guī)劃1.4.2 收集資料與素材1.4.3 設(shè)計(jì)網(wǎng)頁(yè)圖像1.4.4 網(wǎng)頁(yè)排版布局1.4.5 測(cè)試與發(fā)布上傳1.4.6 后期更新與維護(hù)1.4.7 網(wǎng)站的推廣,1.4.1 網(wǎng)站整體規(guī)劃,在網(wǎng)絡(luò)世界里，充斥著大量的垃圾站點(diǎn)，這些站點(diǎn)缺乏靈魂、主旨松散混亂，原因就在于缺乏網(wǎng)站的整體規(guī)劃。因此要使網(wǎng)站脫穎而出，就必須對(duì)整個(gè)站點(diǎn)作好統(tǒng)籌和規(guī)劃。網(wǎng)站規(guī)劃主要包括以下方面。 1. 市場(chǎng)調(diào)查階段2. 確定網(wǎng)站規(guī)模3. 確定網(wǎng)

21、站的類(lèi)別和特色4. 確定網(wǎng)站的目標(biāo)對(duì)象5. 確定整個(gè)網(wǎng)站的整體風(fēng)格6. 準(zhǔn)備投入多少資金、如何經(jīng)營(yíng)網(wǎng)站7. 根據(jù)目標(biāo)框架整理出站點(diǎn)的內(nèi)容框架以及邏輯結(jié)構(gòu)圖,1.4.2 收集資料與素材,首先新建一個(gè)新的總目錄（文件夾），如e：\網(wǎng)站素材，來(lái)放置建立網(wǎng)站的所有文件，然后再在這個(gè)目錄下建立兩個(gè)子目錄：“文字資料”和“圖片資料”。 1. 文本內(nèi)容素材的收集2. 藝術(shù)內(nèi)容素材的收集從Internet上獲取。從CD-ROM中獲取。

22、利用現(xiàn)成圖片或自己拍攝。自己動(dòng)手制作一些特殊效果的圖片，特別是動(dòng)態(tài)圖像。,1.4.3 設(shè)計(jì)網(wǎng)頁(yè)圖像,首先需要使用Fireworks或Photoshop設(shè)計(jì)好網(wǎng)頁(yè)的整體效果圖，再制作精美圖像、處理網(wǎng)頁(yè)中的圖像和背景圖處理，以及設(shè)計(jì)好網(wǎng)頁(yè)中的圖標(biāo)和按鈕等。設(shè)計(jì)網(wǎng)頁(yè)圖像應(yīng)注意以下原則。網(wǎng)頁(yè)設(shè)計(jì)美術(shù)設(shè)計(jì)要求。網(wǎng)頁(yè)美術(shù)設(shè)計(jì)一般要與企業(yè)整體形象一致，要符合CI規(guī)范。要注意網(wǎng)頁(yè)色彩、圖片的應(yīng)用及版面規(guī)劃，保持網(wǎng)頁(yè)的整體一致性。在新技術(shù)的采用

23、上要考慮主要目標(biāo)訪(fǎng)問(wèn)群體的分布地域、年齡階層、網(wǎng)絡(luò)速度、閱讀習(xí)慣等。制定網(wǎng)頁(yè)改版計(jì)劃。如半年到一年時(shí)間進(jìn)行較大規(guī)模的改版等。,1.4.4 網(wǎng)頁(yè)排版布局,網(wǎng)頁(yè)是通過(guò)瀏覽器所看到的頁(yè)面，在Dreamweaver中，用戶(hù)可以方便地、可視化地輸入文本和插入其他網(wǎng)頁(yè)元素，如圖像、聲音、動(dòng)畫(huà)以及媒體對(duì)象，以便使網(wǎng)頁(yè)內(nèi)容更加充實(shí)。在制作網(wǎng)頁(yè)前，可以先布局出網(wǎng)頁(yè)的草圖。網(wǎng)頁(yè)布局的方法有兩種 。1. 紙上布局法2. 軟件布局法,1.4.5 測(cè)

24、試與發(fā)布上傳,網(wǎng)頁(yè)制作完畢，最后要發(fā)布到Web服務(wù)器上，才能夠讓全世界的人瀏覽，現(xiàn)在上傳網(wǎng)頁(yè)的工具有很多，可以采用Dreamweaver自帶的站點(diǎn)管理器上傳文件，也可以采用專(zhuān)門(mén)的FTP軟件上傳。利用這些FTP工具，可以很方便地把網(wǎng)站發(fā)布到服務(wù)器上。網(wǎng)站上傳以后，要在瀏覽器中打開(kāi)自己的網(wǎng)站，逐頁(yè)逐個(gè)鏈接進(jìn)行測(cè)試，發(fā)現(xiàn)問(wèn)題及時(shí)修改后再上傳進(jìn)行再測(cè)試。網(wǎng)站發(fā)布前要進(jìn)行細(xì)致周密的測(cè)試，以保證正常瀏覽和使用，主要測(cè)試內(nèi)容如下。服務(wù)器穩(wěn)定性、安

25、全性。程序及數(shù)據(jù)庫(kù)測(cè)試。網(wǎng)頁(yè)兼容性測(cè)試，如瀏覽器、顯示器。根據(jù)需要的其他測(cè)試。,1.4.6 后期更新與維護(hù),如何讓自己的網(wǎng)站信息在成千上萬(wàn)的信息中被目標(biāo)人群檢索到，并獲得良好的反饋效果，已經(jīng)成為眾多開(kāi)展網(wǎng)上服務(wù)或網(wǎng)上宣傳的商家的殷切期待。網(wǎng)站能否吸引更多目標(biāo)瀏覽者的注意力，除了與網(wǎng)站本身的知名度、服務(wù)器的速度有關(guān)外，另外一個(gè)非常重要的因素在于網(wǎng)站的及時(shí)更新與維護(hù)。網(wǎng)站維護(hù)包括網(wǎng)頁(yè)內(nèi)容的更新，通過(guò)軟件進(jìn)行網(wǎng)頁(yè)內(nèi)容的上傳、目錄的