中文版Dreamweaver+Flash+Photoshop網(wǎng)頁制作從入門到精通（CS6版）

1、網(wǎng)站的制作流程網(wǎng)頁制作軟件HTML快速入門什么是網(wǎng)站本章導(dǎo)讀學習網(wǎng)頁制作，需要先了解網(wǎng)頁的相關(guān)根底知識，例如，什么是網(wǎng)站、什么是網(wǎng)頁、網(wǎng)頁由哪些元素組成、使用什么軟件可以制作網(wǎng)站、實際制作時該采用哪些流程來完成以及如何才能學好網(wǎng)頁制作技術(shù)等，本章就來詳細介紹這些知識。第1章 網(wǎng)頁制作從零開始什么是HTML商業(yè)網(wǎng)站開發(fā)流程1.1 網(wǎng)頁制作根底知識在開始學習網(wǎng)頁制作之前，應(yīng)該對網(wǎng)頁的根本知識有一定的了解，以減少在制作網(wǎng)頁時遇到的麻煩。1.1.1 什么是網(wǎng)站網(wǎng)站是由多個網(wǎng)頁組成的，但并不只是網(wǎng)頁的簡單羅列組合，而是通過超級鏈接方式組成的既有鮮明風格又有完善內(nèi)容的有機整體，如圖1-1所示為“人力資源網(wǎng)

2、站的所有文件及文件夾。要想制作出一個好的網(wǎng)站，必須了解網(wǎng)站建設(shè)的一些根本知識。圖1-1 “人力資源網(wǎng)站文件1.1.2 如何創(chuàng)立網(wǎng)站要創(chuàng)立網(wǎng)站，首先應(yīng)使用Dreamweaver或其他軟件在本地電腦中完成整個網(wǎng)站的編輯與測試，然后申請域名用于訪問網(wǎng)站，如 baidu 和虛擬主機用于存放網(wǎng)站內(nèi)容，并上傳網(wǎng)站內(nèi)容到虛擬主機中，最后申請備案，通過備案后就可以通過域名訪問網(wǎng)站了，其流程如圖1-2所示。 圖1-2 創(chuàng)立網(wǎng)站流程按網(wǎng)站內(nèi)容可將網(wǎng)站分為門戶網(wǎng)站、個人網(wǎng)站、專業(yè)網(wǎng)站和職能網(wǎng)站4種類型。1.1.3 什么是網(wǎng)頁上網(wǎng)時在瀏覽器中看到的一個個漂亮的頁面就是網(wǎng)頁，網(wǎng)頁中包括了各種各樣的網(wǎng)頁元素，如文本、圖像

3、和超級鏈接等，如圖1-3所示為網(wǎng)站中“頁面的顯示效果，其中各組成元素的作用介紹如下。Logo超級鏈接表單動畫圖像文本圖1-3 網(wǎng)頁主頁1LogoLogo是指網(wǎng)站的標志，通常以圖像的形式表現(xiàn)。Logo需有獨特的創(chuàng)意以表達該網(wǎng)站的宗旨。如圖1-4所示分別為騰訊網(wǎng)、MSN中文網(wǎng)及搜搜網(wǎng)站的Logo。 圖1-4 網(wǎng)站Logo2表單表單是用于填寫申請或提交信息時的交互頁面，如電子郵箱、主頁空間和QQ號碼等的申請頁面及登錄頁面或者進行內(nèi)容搜索的搜索頁面等都是采用表單來實現(xiàn)交互的，如圖1-5所示為搜索頁面的表單。圖1-5 表單3超級鏈接在瀏覽器地址欄中輸入要訪問的網(wǎng)址后按“Enter鍵即可訪問該網(wǎng)站。超級鏈

4、接有將不同頁面鏈接起來的功能，它可以是同一站點頁面之間的鏈接，也可以是與其他網(wǎng)站頁面之間的鏈接。超級鏈接有文本鏈接、圖像鏈接等。在瀏覽網(wǎng)頁時單擊超級鏈接就能跳轉(zhuǎn)到與之對應(yīng)的頁面。4動畫等多媒體元素動畫、音樂等多媒體元素在網(wǎng)頁中也運用得非常廣泛。網(wǎng)頁中常用的音樂格式有mid及mp3兩種格式。mid為通過電腦合成的音樂，不能被錄制。mp3為壓縮文件，其壓縮率非常高且音質(zhì)效果較好，是背景音樂的首選。網(wǎng)頁中常用的動畫格式主要有兩種：一種是gif動畫，另一種是swf動畫。gif動畫是逐幀動畫，畫面相比照擬簡單，而swf動畫那么更富有表現(xiàn)力和視覺沖擊力，還可結(jié)合聲音和互動功能，給瀏覽者強烈的視聽感受。如圖

5、1-6所示分別為網(wǎng)站中的gif動畫及swf動畫。 圖1-6 動畫5文本文本是網(wǎng)頁中最根本的組成元素之一。通過它可以詳細地將要傳達的信息傳送給瀏覽者。它在網(wǎng)絡(luò)上傳輸速度快，瀏覽者可方便地瀏覽和下載文本信息。因此，文本是網(wǎng)頁主要的信息載體。網(wǎng)頁中文本的樣式繁多、風格不一，吸引人的網(wǎng)頁通常都具有美觀的文本樣式。文本的樣式可通過設(shè)置網(wǎng)頁文本的屬性來進行設(shè)置。6圖像圖像也是網(wǎng)頁中不可或缺的元素。圖像比文本更直觀和生動，并且可以傳遞一些文本不能傳遞的信息。網(wǎng)站Logo、Banner、廣告等通常都是圖像。如圖1-7所示為網(wǎng)站中的廣告圖像。圖1-7 廣告圖像1.1.4 網(wǎng)頁的類型對于比擬大的網(wǎng)站，除了網(wǎng)站首頁

6、外，通常還有頻道頁，頻道頁下還包括欄目頁。在網(wǎng)站中，網(wǎng)頁有兩種分類方法：一種是按表現(xiàn)形式分，另一種是按網(wǎng)頁的位置分。按網(wǎng)頁的表現(xiàn)形式可將網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁兩類，下面分別進行介紹。靜態(tài)網(wǎng)頁：指用HTML語言編寫的網(wǎng)頁。其制作方法簡單易學，但不能進行交互，缺乏靈活性。動態(tài)網(wǎng)頁：指使用ASP、ASP.NET、PHP、JSP等語言編寫的網(wǎng)頁，也稱為交互式網(wǎng)頁，它可以與瀏覽者進行交互。按網(wǎng)頁的位置可將網(wǎng)頁分為主頁和內(nèi)頁兩類，分別介紹如下。主頁：指翻開網(wǎng)站時看到的第一個頁面，也稱為首頁。內(nèi)頁：指與主頁相關(guān)聯(lián)的頁面，也就是網(wǎng)站的內(nèi)部頁面。1.1.5 網(wǎng)頁的相關(guān)概念在網(wǎng)頁制作過程中，經(jīng)常會接觸到許多和

7、網(wǎng)絡(luò)相關(guān)的專業(yè)術(shù)語，了解這些專業(yè)術(shù)語的概念對于網(wǎng)頁設(shè)計有很大幫助。下面分別進行介紹。瀏覽器：是用于觀看Internet上網(wǎng)頁的工具，使用它訪問網(wǎng)絡(luò)就像是在互聯(lián)網(wǎng)的海洋中沖浪一樣，現(xiàn)在瀏覽器種類眾多，如IE、Google Chrome、Firefox等。萬維網(wǎng)：簡稱WWWWorld Wide Web，是目前Internet上最流行的一種信息資源。利用萬維網(wǎng)可以將全世界的信息鏈接在一起，可以通過網(wǎng)絡(luò)訪問這些資源并加以利用。文件傳輸協(xié)議：簡稱FTPFile Transfer Protocol。它是一種快速、高效和可靠的信息傳輸方式，通過該協(xié)議可以將文件從一臺電腦傳輸?shù)搅硗庖慌_電腦，實現(xiàn)資源互享。超文

8、本標記語言：簡稱HTMLHyper Text Markup Language。網(wǎng)頁是通過超文本標記語言創(chuàng)立的，其最根本的特征就是超文本和標記，用HTML編寫的網(wǎng)頁文件的擴展名一般為htm或html。IP地址：由一組數(shù)字和小圓點組合而成，用于標識網(wǎng)絡(luò)中電腦的位置，如和5等，在瀏覽器中輸入網(wǎng)站所在效勞器的IP地址即可訪問該網(wǎng)站。域名：由于IP地址是一長串的數(shù)字，因此要記住這些數(shù)字非常困難，為了方便記憶，便出現(xiàn)了域名的概念。域名是由英文字符和數(shù)字組成的，與固定的IP地址相對應(yīng)，這些域名通常都比擬簡短，方便記憶。統(tǒng)一資源定位符：簡稱URLUniversal Resource Locator，用于定位I

9、nternet中某個資源的具體位置，以取得各種效勞信息的一種標準方法，如 :/ 為一個完整的URL。導(dǎo)航條：是多個超級鏈接的集合，能有效地實現(xiàn)超級鏈接功能。它包括了整個網(wǎng)站中主要頁面的關(guān)鍵詞，單擊導(dǎo)航條上的超級鏈接，可以跳轉(zhuǎn)到相應(yīng)的頁面進行瀏覽。導(dǎo)航條一般分為橫式和豎式兩種。導(dǎo)航條可以是純文本、按鈕、圖片、Flash動畫或腳本語言等。x，只需輸入域名，瀏覽器就會將頁面切換到網(wǎng)站首頁頁面。發(fā)布：將制作好的網(wǎng)頁上傳到網(wǎng)上的過程即稱為發(fā)布，也叫做上傳或上載。如果做好了網(wǎng)頁，但沒有將網(wǎng)站內(nèi)容放到主頁效勞器上，那么仍然無法在互聯(lián)網(wǎng)上訪問到它。1.2 網(wǎng)頁制作軟件一個好的網(wǎng)頁常包含文本、圖像、動畫、音樂以

10、及視頻等多種對象，因此在制作過程中需要結(jié)合多種軟件進行網(wǎng)頁編輯、動畫制作、圖像處理等。下面對這些軟件進行詳細介紹。1.2.1 網(wǎng)頁制作“三劍客網(wǎng)頁“三劍客，顧名思義，是一套強大的網(wǎng)頁編輯工具，最初是由Macromedia公司開發(fā)，它由Dreamweaver、Fireworks和Flash 3個軟件組成。Dreamweaver是一個“所見即所得的可視化網(wǎng)站開發(fā)工具軟件，主要用于靜態(tài)網(wǎng)頁的開發(fā)；Fireworks主要是用于對網(wǎng)頁上常用的jpg、gif的圖像進行處理的軟件，也可用于布局網(wǎng)頁；Flash主要用來制作動畫。Adobe在收購了Macromedia后，將旗下的代表作Photoshop與Dre

11、amweaver、Flash等進行不斷的更新，現(xiàn)已開展到了CS6版本，CS6為用戶提供了一些新的選擇工具和全新的軟件UI，用戶可完全擺脫代碼的束縛而創(chuàng)造屬于自己的HTML 5標準網(wǎng)頁。鑒于Adobe將Dreamweaver、Flash和Photoshop進行了完美的兼容，因此，它們已成為新的網(wǎng)頁制作“三劍客。1Adobe Dreamweaver CS6Adobe Dreamweaver CS6是Adobe公司開發(fā)集網(wǎng)頁制作和管理網(wǎng)站于一身的“所見即所得的網(wǎng)頁編輯軟件，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別開展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和瀏覽器限制的充滿動感的網(wǎng)頁。其

12、最大的特點就是能夠快速創(chuàng)立各種靜態(tài)、動態(tài)網(wǎng)頁，除此之外，它還是一個出色的網(wǎng)站管理和維護軟件，如圖1-8所示為Dreamweaver CS6的主界面。隨著互聯(lián)網(wǎng)的普及，HTML技術(shù)的不斷開展和完善，隨之產(chǎn)生了眾多網(wǎng)頁編輯軟件，從網(wǎng)頁編輯軟件根本性質(zhì)可以分為“所見即所得網(wǎng)頁編輯軟件和“非所見即所得網(wǎng)頁編輯器，兩者各有千秋。圖1-8 Dreamweaver CS6的主界面2Adobe Flash CS6Adobe Flash CS6是Adobe公司開發(fā)的二維動畫軟件，主要用于設(shè)計和編輯Flash動畫，如圖1-9所示為Flash CS6的主界面。它附帶Adobe Flash Player播放器，用于支

13、持Flash動畫的播放。圖1-9 Flash CS6的主界面Flash最大的優(yōu)點在于可應(yīng)用互聯(lián)網(wǎng)網(wǎng)頁的矢量動畫文件格式，全世界97%的網(wǎng)絡(luò)瀏覽器都內(nèi)建Flash播放器，由于它產(chǎn)生出來的影片swf使用向量運算Vector Graphics的方式，所以存儲空間較小，更加利于網(wǎng)絡(luò)傳播。3Adobe Photoshop CS6Adobe Photoshop CS6是Adobe公司旗下最為知名的圖像處理軟件之一，它是集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意、圖像輸入與輸出于一體的圖形圖像處理軟件，深受廣闊平面設(shè)計人員和網(wǎng)頁美工設(shè)計師的喜愛。CS6版本采用了最新的Mercury Graphics Engi

14、ne設(shè)計開發(fā)引擎，其最新的內(nèi)容識別技術(shù)和友好的操作界面可幫助用戶更加精準地完成圖片編輯，如圖1-10所示為Photoshop CS6的主界面。Fireworks可以處理網(wǎng)頁中常見格式的圖像，廣而不精。而Photoshop是專門用來處理圖片的。在Adobe公司收購Macromedia后，使Dreamweaver和Flash兼容，因此Photoshop制作網(wǎng)頁圖像一點也不比Fireworks遜色。圖1-10 Photoshop CS6的主界面1.2.2 輔助軟件一個優(yōu)秀的網(wǎng)站除了具有合理的頁面布局和友好的用戶操作界面外，優(yōu)美簡潔的顏色搭配、適當參加3D動畫、視頻和有效的推廣也是非常重要的。而這些工

15、作也可以借助一些小軟件來幫助網(wǎng)頁開發(fā)人員和推廣人員進行高效的完成。1網(wǎng)頁配色軟件網(wǎng)頁色彩的把握是網(wǎng)頁制作中的一個重點和難點，好的網(wǎng)頁色彩具有視覺舒適性，便于瀏覽者經(jīng)常訪問。使用一些專門的網(wǎng)頁配色軟件可以方便地創(chuàng)立網(wǎng)頁色彩方案。用于網(wǎng)頁配色的軟件也較多，而常用的有玩轉(zhuǎn)顏色見圖1-11和網(wǎng)頁配色等，另外，某些網(wǎng)站也提供網(wǎng)頁配色功能，如藍色理想、模板無憂見圖1-12等。 圖1-11 玩轉(zhuǎn)顏色軟件 圖1-12 模板無憂在線配色工具2網(wǎng)頁推廣軟件為了提高網(wǎng)站的訪問量，需要進行網(wǎng)站的宣傳及推廣，網(wǎng)站推廣的方式很多，包括電子郵件推廣、搜索引擎加注、論壇推廣、參加友情鏈接聯(lián)盟等。當然，借助電子商務(wù)師、登錄奇兵

16、、網(wǎng)站世界排名提升專家及Active WebTraffic等軟件進行網(wǎng)站推廣也是必不可少的方式。網(wǎng)站推廣軟件，顧名思義，是通過網(wǎng)絡(luò)軟件將網(wǎng)站信息推廣到目標受眾。具體包括通過傳統(tǒng)的廣告、企業(yè)形象系統(tǒng)去宣傳；通過網(wǎng)絡(luò)技術(shù)的方式，如鏈接、網(wǎng)絡(luò)廣告等方式宣傳。3網(wǎng)頁制作小軟件Dreamweaver既可以通過在視圖上進行設(shè)計，又可以通過編寫程序的方式進行設(shè)計。制作網(wǎng)頁元素的小軟件非常多，如用于制作網(wǎng)頁特效的網(wǎng)頁特效王，制作3D文字動畫的Cool 3D，制作網(wǎng)頁按鈕的Crystal Button，編寫網(wǎng)頁代碼的HomeSite，轉(zhuǎn)換網(wǎng)頁音頻、視頻格式的格式工廠以及查看含有JavaApplet網(wǎng)頁的Java

17、虛擬機等，如圖1-13所示為Crystal Button的主界面。圖1-13 Crystal Button的主界面1.3 認識HTMLHTML是網(wǎng)頁設(shè)置的語法根底，常稱為超文本標記語言Hypertext Markup Language，是用于描述網(wǎng)頁文檔的一種標記語言。1.3.1 什么是HTMLHTML是標準通用標記語言下的一個應(yīng)用，也是一種標準、一種標準，它通過標記符號來標記要顯示網(wǎng)頁中的各個局部。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內(nèi)容，例如，文字如何處理、畫面如何安排、圖片如何顯示等。HTML語言文檔制作不復(fù)雜，但功能卻很強大，支持不同數(shù)據(jù)

18、格式的文件鑲?cè)?，包括圖片、聲音、視頻、動畫、表單和超級鏈接等內(nèi)容，這也是它在互聯(lián)網(wǎng)中盛行的原因之一，其主要特點如下。簡易性：HTML語言版本升級采用超集方式，從而更加靈活方便?？蓴U展性：HTML語言的廣泛應(yīng)用帶來了加強功能、增加標識符等要求，它采取子類元素的方式，為系統(tǒng)擴展帶來保證。Fireworks可以加速Web的設(shè)計與開發(fā)，是一款創(chuàng)立與優(yōu)化Web圖像和快速構(gòu)建網(wǎng)站與Web界面原型的理想軟件。平臺無關(guān)性：HTML語言是一種標準，對于使用同一標準的瀏覽器，在查看一份HTML文檔時顯示是一樣的。但是網(wǎng)頁瀏覽器的種類眾多，為讓不同標準的瀏覽器用戶查看同樣顯示效果的HTML文檔，HTML語言就使用了

19、統(tǒng)一的標準，從而能在各個瀏覽器平臺上顯示。1.3.2 HTML快速入門HTML其實就是文本，它需要瀏覽器的解釋，其編輯軟件大體可以分為3種，下面分別進行介紹。根本文本、文檔編輯軟件：使用Windows視窗自帶的記事本或?qū)懽职宥伎梢跃帉?，不過保存時請使用htm或html作為擴展名，這樣方便瀏覽器直接進行運行。半所見即所得軟件：這種軟件能大大提高開發(fā)效率，使制作者在很短的時間內(nèi)做出主頁，且可以學習HTML，這種類型的軟件主要有國產(chǎn)軟件網(wǎng)頁作坊、Amaya萬維網(wǎng)聯(lián)盟和HOTDOG熱狗等。所見即所得軟件：使用最廣泛的編輯軟件，完全不懂HTML的知識也可以制作出網(wǎng)頁，這類軟件主要有Amaya和Dream

20、weaver。與半所見即所得的軟件相比，這類軟件開發(fā)速度更快，效率更高，且直觀的表現(xiàn)更強，任何地方進行修改后只需要刷新即可顯示。HTML語言非常簡單，更容易上手。下面將通過一個HTML文件來進行HTML的快速入門學習。在IE瀏覽器中翻開一個l文檔，如圖1-14所示。在網(wǎng)頁空白處單擊鼠標右鍵，在彈出的快捷菜單中選擇“查看源文件命令，可以查看網(wǎng)頁HTML源文件，如圖1-15所示。 圖1-14 瀏覽網(wǎng)頁 圖1-15 查看源文件一個網(wǎng)頁對應(yīng)一個HTML文件，超文本標記語言文件以htm或html為擴展名。可以使用任何能夠生成TXT類型源文件的文本編輯軟件來產(chǎn)生超文本標記語言文件，只修改文件后綴即可。標準

21、的超文本標記語言文件都具有一個根本的整體結(jié)構(gòu)，即超文本標記語言文件的開頭與結(jié)尾標志和超文本標記語言的頭部與實體兩大局部，并且標記一般都是成對出現(xiàn)局部標記除外，如。1頭部標記符號包括尖括號、標記元素、屬性項等必須使用半角的英文字符，而不能使用全角字符。這兩個標記符分別表示頭部信息的開始和結(jié)尾。頭部中包含的標記是頁面的標題、序言、說明等內(nèi)容，它本身不作為內(nèi)容來顯示，但影響網(wǎng)頁顯示的效果。頭部中最常用的標記符是標題標記符和meta標記符，其中標題標記符用于定義網(wǎng)頁的標題內(nèi)容顯示。2實體超文本標記語言正文標記符為，又稱為實體標記符，網(wǎng)頁中顯示的實際內(nèi)容均包含在這兩個正文標記符之間。3元素HTML元素用

22、來標記文本，表示文本的內(nèi)容，如body、h1、p、title都是HTML元素。常見的元素標記如表1-1所示。表1-1 常見的元素標記名 稱標 記例如及說明超級鏈接顯示的文字或圖片表格，行為，單元格為行列表，列表為，項為工程表單圖片字體這是我的個人主頁4元素的屬性HTML元素可以擁有屬性。屬性可以擴展HTML元素的功能。例如，可以使用一個font屬性，使文字變?yōu)樗{色，語句為：。屬性通常由屬性名和值成對出現(xiàn)，語句為：color=#0000FF。上面例子中的font color就是name，#0000FF就是value，屬性值一般用雙引號引起來。1.4 網(wǎng)站開發(fā)與制作流程了解商業(yè)網(wǎng)站開發(fā)流程對于學習

23、網(wǎng)站建設(shè)與制作非常重要，因為商業(yè)網(wǎng)站的開發(fā)流程代表了專業(yè)和高效。下面對其進行具體講解。1.4.1 商業(yè)網(wǎng)站開發(fā)流程HTML注釋由感慨號表示，注釋內(nèi)容由“-符號結(jié)束，如。注釋內(nèi)容可插入文本中任何位置。假設(shè)在任何標記前面插入感慨號，即被標識為注釋，不予顯示。對于專門從事網(wǎng)站開發(fā)的公司來說，網(wǎng)站開發(fā)是根據(jù)客戶的需求進行的，主要分為客戶分析、工程開發(fā)和確認驗收3個階段，每個環(huán)節(jié)都應(yīng)有相應(yīng)的責任人，如圖1-16所示是一個商業(yè)網(wǎng)站的開發(fā)流程圖。一般的網(wǎng)站都是通過這個流程進行開發(fā)的。 圖1-16 商業(yè)網(wǎng)站開發(fā)流程圖1需求分析階段在需求分析階段，需求分析人員首先設(shè)計出站點的結(jié)構(gòu)，然后規(guī)劃站點所需功能、內(nèi)容結(jié)構(gòu)

24、頁面等，經(jīng)客戶確認后才能進行下一步的操作。在這一過程中，需要與客戶緊密合作，認真分析客戶提出的需求以減少后期再變更的可能性。2實現(xiàn)階段在網(wǎng)站開發(fā)過程中管理工程進度是一件比擬麻煩的事，因此必須按照標準流程進行開發(fā)，以便減少不必要的工作，使其在最短的時間內(nèi)高效地完成網(wǎng)站的開發(fā)。在功能、內(nèi)容結(jié)構(gòu)頁面被確認后，可以將功能、內(nèi)容結(jié)構(gòu)頁面交付給美工人員進行美術(shù)設(shè)計，隨后再讓客戶通過設(shè)計界面進行確認，當客戶對美術(shù)設(shè)計確認以后可以開始為客戶制作靜態(tài)站點。再次給客戶演示，在此靜態(tài)站點上直至將界面設(shè)計和功能修改到客戶滿意為止。隨后進行數(shù)據(jù)庫設(shè)計和編碼開發(fā)。3發(fā)布階段整個網(wǎng)站制作完成后，需要先對網(wǎng)站進行測試，如網(wǎng)頁

25、的美觀度、易用性、是否有編碼錯誤等。測試通過后即可試運行，試運行階段編碼人員還需根據(jù)收集到的日志進行排錯、測試，直至最后交付客戶使用。1.4.2 網(wǎng)站制作流程在對搜集的資料進行分類時，還可以在各子欄目文件夾中再次進行細分，例如，在“音樂欄目下創(chuàng)立“圖像、“視頻等子文件夾。網(wǎng)站制作需要進行許多準備工作，例如，收集資料和素材、規(guī)劃站點等。做好這些準備工作后，才能正式開始制作網(wǎng)頁。最后還需測試站點并進行網(wǎng)站的發(fā)布，以及對發(fā)布站點進行更新和維護等操作。1收集資料和素材圖1-17 素材搜集與分類在制作網(wǎng)頁前應(yīng)先收集要用到的文字資料、圖片素材及用于增添頁面特效的動畫等元素，并將其分類保存在相應(yīng)的文件夾中。

26、假設(shè)制作學校網(wǎng)頁那么需要提供有關(guān)學校的文字材料，如學校簡介、招生對象說明以及與學校有關(guān)的圖片等；假設(shè)制作個人網(wǎng)站，那么應(yīng)收集個人簡歷、愛好等方面的材料，然后將收集到的素材和資料分類保存，在需要使用時就可以方便地調(diào)用了，如圖1-17所示為素材搜集與分類示意圖。圖1-18 網(wǎng)站結(jié)構(gòu)2規(guī)劃站點在籌劃站點時，應(yīng)按站點所包含的內(nèi)容進行分類即確定導(dǎo)航。例如，制作一個綜合性網(wǎng)站，其包含的頻道非常多，如“體育、“房產(chǎn)、“音樂、IT和“星座等，而頻道下又劃分了許多小欄目，例如，“體育頻道中設(shè)有“籃球、“足球和“臺球等小欄目。在前 期制作時只需精確到各頻道下的小欄目即可，如圖1-18所示。3制作網(wǎng)頁當一切準備工作

27、完成后，就可以進行網(wǎng)頁制作了。在制作時，應(yīng)考慮以下幾個方面。創(chuàng)立頁面框架：將網(wǎng)頁劃分后，進行頁面布局。創(chuàng)立導(dǎo)航條：一般的導(dǎo)航條都被放置在頁面的上部或者左側(cè)。填充內(nèi)容：將圖片和文本等內(nèi)容合理地分配到網(wǎng)頁的各頁面中。創(chuàng)立超級鏈接：將各個頁面進行鏈接，方便用戶瀏覽網(wǎng)頁內(nèi)容。4測試站點在發(fā)布站點前需先對站點進行測試，通?？筛鶕?jù)客戶端要求和網(wǎng)站大小等進行測試。測試方法通常是將站點移到一個模擬調(diào)試效勞器上。在測試站點時，應(yīng)注意以下幾點。在創(chuàng)立網(wǎng)站的過程中，由于各站點重新設(shè)計、重新調(diào)整可能會使指向頁面的超級鏈接被移動或刪除。此時可運行超級鏈接檢查報告，測試超級鏈接是否有斷開的情況。監(jiān)測頁面的文件大小以及下載

28、速度。對瀏覽器兼容性的檢查，使頁面原來不支持的樣式、層和插件等在瀏覽器中能兼容且功能正常。使用“檢查瀏覽器功能，自動將訪問者重新定向到另外的頁面，此方法可解決在較早版本的瀏覽器中無法運行頁面的問題。在不同的瀏覽器和平臺上預(yù)覽頁面，可以查看網(wǎng)頁布局、字體大小、顏色和默認瀏覽器窗口大小等。5發(fā)布站點發(fā)布站點前需要在Internet上申請一個主頁空間，指定網(wǎng)站或主頁在Internet上的位置?？墒褂肧harePoint Designer或Dreamweaver對站點進行發(fā)布，也可使用FTP遠程文件傳輸軟件將文件上傳到效勞器申請的網(wǎng)址目錄下。6更新和維護站點將站點上傳到效勞器后，需要每隔一段時間對站點

29、中的某些頁面進行更新，保持網(wǎng)站內(nèi)容的新鮮感，以吸引更多的瀏覽者。此外，還應(yīng)定期翻開瀏覽器檢查頁面元素和各種超級鏈接是否正常，以防止死鏈接情況的存在，此外，還需要檢測后臺程序是否被不速之客所篡改或注入，以便進行及時的修正。1.5 根底實例制作個人主頁本章主要介紹了網(wǎng)頁的根底知識，通過下面的練習進一步穩(wěn)固制作網(wǎng)頁需要了解和掌握的根底知識。網(wǎng)站正常運行后，還需要及時對網(wǎng)站的內(nèi)容進行更新，以便讓Google、Baidu等搜索引擎進行收錄，從而提高網(wǎng)站的RP值。本例將使用記事本作為網(wǎng)頁編輯工具，制作一個簡單的網(wǎng)頁文檔，從而對網(wǎng)頁制作和HTML有個感性認識。在網(wǎng)頁的制作中使用了最為根本的HTML元素：he

30、ad和body，最終效果如圖1-19所示。圖1-19 個人主頁最終效果1.5.1 行業(yè)分析本例制作的個人主頁，是使用Windows自帶的文本編輯工具，在記事本中書寫了最為根本的HTML元素，只要保存為htm或html類型的文檔，就可以通過瀏覽器進行解析。個人主頁是從英文Personal Homepage翻譯而來，所以個人主頁就是一種最簡單的個人網(wǎng)站，博客也是個人主頁的一種形式。它是根據(jù)自己的興趣愛好或價值取向，為了展示自我、與人交流的目的而在網(wǎng)絡(luò)上創(chuàng)立的供其他人瀏覽的網(wǎng)站。其作用為：可以充分地向其他人展示自己的才華，可以說你的個人主頁就是你最好的簡歷。用于展示你自己的個性，放上自己喜歡的東西，讓大家都可以來欣賞。用于結(jié)識新的朋友。對于好的個人主頁，一些大型網(wǎng)站會放在精彩推薦的位置，將會有很多人訪問你的主頁，和訪問者交流會大大擴大你的生活空間。用于記憶家庭生活。例如，分享生活日記或照片、分享小孩成長記錄、分享新婚儀式的照片給大家。1.5.2 操作思路雖然站點測試是一個復(fù)雜而且枯燥的工作，但站點測試卻是非常重要的，它是網(wǎng)站能正常運行的前提，因此必須做好網(wǎng)站的測試工作。為更快完本錢例的制作，并盡可能運用本章講解的知識，本例的操作思路如下。在IE瀏覽器中查看網(wǎng)頁輸入HTML代碼翻開記事本1.5.3 操作步驟光盤素材第1章光盤效果第1章光盤實例演示第1章制作個人主頁