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

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

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

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

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

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

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

7、一般網(wǎng)頁的基本元素包括LOGO、Banner(網(wǎng)幅圖像廣告)、導(dǎo)航欄目、文本、圖像、Flash動畫和多媒體。 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動畫1.2.7 多媒體,1.2.1 網(wǎng)站LOGO,網(wǎng)站LOGO，也叫網(wǎng)站標(biāo)志，它是一個站點的象征，也是一個站點是否正規(guī)的標(biāo)志之一。一個好的標(biāo)志可以很好地樹立公司形象。網(wǎng)站標(biāo)志一

8、般放在網(wǎng)站的左上角，訪問者一眼就能看到它。成功的網(wǎng)站標(biāo)志有著獨特的形象標(biāo)識，在網(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)頁中，大多用來表現(xiàn)網(wǎng)絡(luò)廣告內(nèi)容。Banner廣告一般是放在網(wǎng)頁的頂部位置，在用戶瀏覽網(wǎng)頁信息時，吸引用戶關(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)頁設(shè)計中的重要部分，又是整個網(wǎng)站設(shè)計中的一個較獨立的部分。一般來說網(wǎng)站中的導(dǎo)航位置在各個頁面中出現(xiàn)的位置是比較固定的，而且風(fēng)格也較為一致。導(dǎo)航欄

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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