《網(wǎng)頁設計與制作》講義-專題1網(wǎng)頁設計基礎知識

1、專題1網(wǎng)頁設計基礎知識1.1認識網(wǎng)站、網(wǎng)頁與主頁1.1.1什么是網(wǎng)頁網(wǎng)頁（Web頁）實際上就是HTML文件，是一種可以在 WW網(wǎng)上傳輸，并能被瀏覽器 認識和翻譯成頁面的文件。HTML是“ HyperText Markup Language ”的縮寫，意為“超文本標記語言”，它是一 種規(guī)范，一種標準。它是純文本格式的，用任何文本編輯器都可以打開編輯。網(wǎng)頁包括的主要兀素有：文本、圖像、動畫、聲音、視頻、超鏈接、表格、表單等。由于多數(shù)網(wǎng)頁一般均有文字、圖像、圖形、動畫、音頻、視頻等多媒體信息，具有超 鏈接、并可與網(wǎng)絡鏈接，因此這就使人們登上站點以后，便可以看到五彩繽紛的界面。那 么，這些五彩繽紛和千

2、姿百態(tài)的 Web網(wǎng)頁是如何制作出來的？制作好網(wǎng)頁以后又如何將它 發(fā)布到In ternet上？這些問題正是本課程所要闡述的主題。1.1.2什么是網(wǎng)站多個相互之間具有一定聯(lián)系的網(wǎng)頁就構成了一個網(wǎng)站。網(wǎng)站用于存儲提供給用戶瀏覽的網(wǎng)頁文件。 它也是一種文檔的磁盤組織形式，由文檔和若干文件夾組成，文檔經(jīng)過組織分類分別放在不同的文件夾中。網(wǎng)站存儲在服務器或服務器的虛擬主機上，接受訪問者通過WWW名的訪問。網(wǎng)站是具有獨立域名、獨立存放空間的內(nèi)容集合，這些內(nèi)容可能是網(wǎng)頁，也可能是程 序或其它文件，一個網(wǎng)站不一定要有很多網(wǎng)頁，主要是有獨立域名、獨立存放空間，即使 只有一個頁面，也叫網(wǎng)站。網(wǎng)站按照其內(nèi)容可以分為以

3、下幾類：1、企業(yè)網(wǎng)站：圍繞企業(yè)、產(chǎn)品及服務信息進行網(wǎng)絡宣傳，通過網(wǎng)站樹立企業(yè)網(wǎng)絡形 象。2、個人網(wǎng)站：個人為了興趣愛好或為了展示個人等目的而建的網(wǎng)站，具有較強的個 性化特色。3、門戶網(wǎng)站：提供綜合性互聯(lián)網(wǎng)資源的網(wǎng)站。國內(nèi)著名三大門戶網(wǎng)站：網(wǎng)易、搜狐、 新浪。4、機構網(wǎng)站：政府機關、相關社團組織或事業(yè)單位建立的網(wǎng)站。以機構或社團形象 宣傳和政府服務為主。5、娛樂網(wǎng)站：提供娛樂信息、流行音樂、視頻等娛樂內(nèi)容為主的網(wǎng)站。6電子商務網(wǎng)站：依靠因特網(wǎng)來完成商業(yè)活動的各個環(huán)節(jié)的網(wǎng)站，如卓越、當當、 淘寶、易趣、拍拍等。7、行業(yè)信息網(wǎng)站：隨著因特網(wǎng)的發(fā)展，網(wǎng)民數(shù)量的增加，上網(wǎng)不同興趣群體的形成， 門戶網(wǎng)站已

4、經(jīng)明顯不能滿足不同上網(wǎng)群體的需要。行業(yè)信息網(wǎng)站應運而生，它是能夠滿足 某一特定領域上網(wǎng)人群及其特定需求的網(wǎng)站。如房地產(chǎn)行業(yè)網(wǎng)站。8、專業(yè)網(wǎng)站：專門以某個主題為內(nèi)容而建立的網(wǎng)。如某某課程的網(wǎng)絡課程不同類型網(wǎng)站具有不同的風格和作用，在設計網(wǎng)站時，頁面元素的設計、構圖、色彩 搭配、多媒體信息的使用、文本格式等的設計，要考慮網(wǎng)站的類型。1.1.3什么是主頁主頁又叫首頁，主頁是網(wǎng)站的第一頁，既是一個網(wǎng)站的封面，也是該網(wǎng)站的目錄。欣賞幾個不同類型的網(wǎng)站主頁：問題：主頁、網(wǎng)頁與網(wǎng)站的關系？先規(guī)劃土地還是先建房？先建房還是先買家具？先建網(wǎng)頁還是先建網(wǎng)站？1.1.4網(wǎng)頁基本構成要素不同性質的網(wǎng)站具有不同的頁面元

5、素，但是，一般的網(wǎng)頁都會具備以下一些元素：1、標題標題用來說明網(wǎng)站的形式、內(nèi)容等信息。2、站標Logo網(wǎng)站Logo，也叫網(wǎng)站標志，它是一個站點的象征，也是一個站點是否正規(guī)的標志之一。一個好的標志可以很好地樹立公司形象。網(wǎng)站標志一般放在網(wǎng)站的左上角，訪問者一 眼就能看到它。成功的網(wǎng)站標志有著獨特的形象標識，在網(wǎng)站的推廣和宣傳中起到事半功 倍的效果。網(wǎng)站標志應體現(xiàn)該網(wǎng)站的特色、內(nèi)容以及其內(nèi)在的文化內(nèi)涵和理念。3、bannerBanner是一種網(wǎng)絡廣告形式，Banner廣告一般是放在網(wǎng)頁的頂部位置，在用戶瀏覽 網(wǎng)頁信息的同時，吸引用戶對于廣告信息的關注。Banner廣告有多種規(guī)格和形式，其中最常用的

6、是486 x 60像素的標準廣告。這種標志廣告有多種不同的稱呼，如橫幅廣告、全幅廣告、條幅廣告和旗幟廣告等。通常是 以GIF、JpG等格式建立的圖像文件或 Flash文件。4、導航欄一網(wǎng)站索引導航欄既是網(wǎng)頁設計中的重要部分， 又是整個網(wǎng)站設計中的一個較獨立的部分。一般來說網(wǎng)站中的導航欄位置在各個頁面中出現(xiàn)的位置是比較固定的，而且風格也較為一致。 導航欄的位置對網(wǎng)站的結構與各個頁面的整體布局起到舉足輕重的作用。5、內(nèi)容一網(wǎng)站的精神所在文本一直是人類最重要的信息載體與交流工具，網(wǎng)頁中的信息也以文本為主。與圖像相比，文字雖然不如圖像那樣易于吸引瀏覽者的注意，但卻能準確地表達信息的內(nèi)容和含 義。圖像在

7、網(wǎng)頁中具有提供信息、展示形象、美化網(wǎng)頁、表達個人情趣和風格的作用?？?以在網(wǎng)頁中使用GIF、JpEG和pNG等多種圖像格式，其中使用最廣泛的是 GIF和JpEG兩 種格式。隨著網(wǎng)絡技術的發(fā)展，網(wǎng)頁上出現(xiàn)了越來越多的Flash動畫。Flash動畫已經(jīng)成為當今網(wǎng)站必不可缺少的部分，美觀的動畫能夠為網(wǎng)頁增色不少，從而吸引更多的瀏覽者。Flash動畫不僅需要對動畫制作軟件非常熟悉，更重要的是設計者獨特的創(chuàng)意。&頁腳頁腳放置網(wǎng)頁設計者的基本信息。思考題：網(wǎng)頁的設計需要考慮哪些因素？標題、Logo、頁眉、頁腳、導航的設計、版面布局的設計、連接結構的設計、網(wǎng)頁色彩的搭配設計、字體的設計、宣傳標語的設計等。1

8、.1.5網(wǎng)頁的分類我們通?？吹降木W(wǎng)頁，大都是以 HTM或HTML后綴結尾的文件。除此之外，網(wǎng)頁文件 還有以CGI、ASp pHp和JSp后綴結尾的。目前網(wǎng)頁根據(jù)生成方式，大致可以分為靜態(tài)網(wǎng) 頁和動態(tài)網(wǎng)頁兩種。1、靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是網(wǎng)站建設初期經(jīng)常采用的一種形式。網(wǎng)站建設者把內(nèi)容設計成靜態(tài)網(wǎng)頁，訪問者只能被動地瀏覽網(wǎng)站建設者提供的網(wǎng)頁內(nèi)容。其特點如下：網(wǎng)頁內(nèi)容不會發(fā)生變化，除非網(wǎng)頁設計者修改了網(wǎng)頁的內(nèi)容。不能實現(xiàn)和瀏覽網(wǎng)頁的用戶之間的交互。信息流向是單向的，即從服務器到瀏覽器。 服務器不能根據(jù)用戶的選擇調整返回給用戶的內(nèi)容。靜態(tài)網(wǎng)頁的瀏覽過程如圖1所示。我們使用dreamweaver和html制

9、作的網(wǎng)頁屬于靜態(tài)網(wǎng)頁。2、動態(tài)網(wǎng)頁 網(wǎng)絡技術日新月異，許多網(wǎng)頁文件擴展名不 再只是.htm，還有.php、.asp等，這些都是采用 動態(tài)網(wǎng)頁技術制作出來的。動態(tài)網(wǎng)頁其實就是建立 在B/S架構上的服務器端腳本程序。在瀏覽器端顯 示的網(wǎng)頁是服務器端程序運行的結果。動態(tài)網(wǎng)頁是 經(jīng)過人與服務器對話的結果。如圖網(wǎng)頁上的登錄、 注冊、網(wǎng)上購物等都屬于此類網(wǎng)站。靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的區(qū)別在于 Wet服務器對它們的處理方式不同。當Web服務器接 收到對靜態(tài)網(wǎng)頁的請求時，服務器直接將該頁發(fā)送給客戶瀏覽器，不進行任何處理。如果 接收到對動態(tài)網(wǎng)頁的請求，則從 Web服務器中找到該文件，并將它傳遞給一個稱為應用程 序服

10、務器的特殊軟件擴展，由它負責解釋和執(zhí)行網(wǎng)頁，將執(zhí)行后的結果傳遞給客戶瀏覽器。應用程序服務器的作用是讀取動態(tài)網(wǎng)頁上的代碼，根據(jù)代碼中的指令完成網(wǎng)頁，然后將代碼從網(wǎng)頁上去掉，所得的結果將是一個靜態(tài)網(wǎng)頁；應用程序服務器將該網(wǎng)頁傳送回網(wǎng) 頁服務器，網(wǎng)頁服務器將網(wǎng)頁發(fā)送到瀏覽器，瀏覽器得到的仍然是一個純HTML的靜態(tài)網(wǎng)頁。如圖2所示為動態(tài)網(wǎng)頁的工作原理圖。圖2動態(tài)網(wǎng)頁的工作原理圖 動態(tài)網(wǎng)頁的一般特點如下。動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術為基礎，可以大大降低網(wǎng)站維護的工作量。采用動態(tài)網(wǎng)頁技術的網(wǎng)站可以實現(xiàn)更多的功能，如用戶注冊、用戶登錄、搜索查詢、 用戶管理、訂單管理等。動態(tài)網(wǎng)頁并不是獨立存在于服務器上的網(wǎng)頁文件，只

11、有當用戶請求時服務器才返回一個完整的網(wǎng)頁。搜索引擎一般不可能從一個網(wǎng)站的數(shù)據(jù)庫中訪問全部網(wǎng)頁，因此采用動態(tài)網(wǎng)頁的網(wǎng) 站在進行搜索引擎推廣時需要做一定的技術處理才能適應搜索引擎的要求。1.2網(wǎng)站制作基本流程創(chuàng)建網(wǎng)站是一個系統(tǒng)工程，有一定的工作流程，只有遵循一定的步驟，按部就班地來, 才能設計出滿意的網(wǎng)站。1.2.1前期策劃建立網(wǎng)站第一步就應該確定網(wǎng)站的目標，包括1、網(wǎng)站的整體定位：是商務網(wǎng)站、科研網(wǎng)站、個人網(wǎng)站還是交流平臺或者公司或企業(yè)的介紹性網(wǎng)站？2、網(wǎng)站要包含的主要內(nèi) 容和方向等。在確定了目標和內(nèi)容后，應該給自己的網(wǎng)站起一個響亮的名字。思考如何使 自己的網(wǎng)站在網(wǎng)絡海洋里脫穎而出？圖1靜態(tài)網(wǎng)頁

12、的瀏覽過程W譏W服務Scrvlcl應用康務器奔戶認證采統(tǒng)日志 系統(tǒng)監(jiān)控 任務骨理勻其他網(wǎng)錯數(shù)抵交拴業(yè)勢逼輯部件Web眼齊器一、確定網(wǎng)站主題設計一個站點，首先遇到的問題就是定位網(wǎng)站主題。所謂主題也就是的網(wǎng)站的題材。 網(wǎng)絡上的網(wǎng)站題材千奇百怪，琳瑯滿目。常見的網(wǎng)站題材有：第1類：網(wǎng)上求職第2類：網(wǎng)上聊天/即時信息/ ICQ第3類：網(wǎng)上社區(qū)/討論/郵件列表第4類：計算機技術第5類：網(wǎng)頁/網(wǎng)站開發(fā)第6類：娛樂網(wǎng)站第7類：旅行第8類：參考/資訊第9類：家庭/教育第10類：生活/時尚每個大類都可以繼續(xù)細分，比如娛樂類再分為體育/電影/音樂大類，音樂又可以按 格式分為Mp3 WMARa等，按表現(xiàn)形式分古典，

13、現(xiàn)代，搖滾等。以上都只是最常見的題 材，還有許多專業(yè)的，另類的，獨特的題材可以選擇，比如中醫(yī)，熱帶魚，天氣預報等等， 同時，各個題材相聯(lián)系和交叉結合可以產(chǎn)生新的題材，例如旅游論壇（旅游+討論），經(jīng)典入球播放（足球+影視）等，按這樣分下去，題材可以有成千上萬個。對于題材的選擇，通常遵循以下原則：1. 主題要小而精定位要小，內(nèi)容要精。如果想制作一個包羅萬象的站點，把所有您認為精彩的東西都 放在上面，那么往往會事與愿違，給人的感覺是沒有主題，沒有特色，樣樣有卻樣樣都很 膚淺，因為您不可能有那么多的精力去維護它。網(wǎng)絡的最大特點就是新和快，目前最熱門 的個人主頁都是天天更新甚至幾小時更新一次。最新的調查

14、結果也顯示，網(wǎng)絡上的【主題 站】比【萬全站】更受人們喜愛，就好比專賣店和百貨商店，如果我需要買某方面的東西， 肯定會選擇專賣店。2. 題材最好是自己擅長或者喜愛的內(nèi)容比如：您對擅長編程，就可以建立一個編程愛好者網(wǎng)站；對足球感興趣，可以報道最 新的戰(zhàn)況，球星動態(tài)等。這樣在制作時，才不會覺得無聊或者力不從心。興趣是制作網(wǎng)站 的動力，沒有熱情，很難設計制作出杰出的作品。3. 題材不要太濫或者目標太高【太濫】是指到處可見，人人都有的題材；比如軟件下載，免費信息?！灸繕颂摺渴侵冈谶@一題材上已經(jīng)有非常優(yōu)秀，知名度很高的站點，要超過它是很困難的。除非下決 心和有實力競爭并超過它，記住，在互聯(lián)網(wǎng)上只有第一，

15、人們往往只記得最好的網(wǎng)站，第 二第三名的印象則會淺得多。二、定義網(wǎng)站名稱網(wǎng)站名稱也是網(wǎng)站設計的一部分，而且是很關鍵的一個要素。比如，【電腦學習室】和【電腦之家】顯然是后者簡練；【迷笛樂園】和【MIDI樂園】顯然是后者明晰；【兒童天地】 和【中國幼兒園】顯然是后者大氣。我們都知道pIIICUp的中文名稱【奔騰】，如果改為【奔跑】，可能就沒有今天這么【火】了。和現(xiàn)實生活中一樣，網(wǎng)站名稱是否正氣，響亮， 易記，對網(wǎng)站的形象和宣傳推廣也有很大影響。一般的建議是：1、 名稱要正2、 名稱要易記根據(jù)中文網(wǎng)站瀏覽者的特點，除非特定需要，網(wǎng)站名稱最好用中文名稱，不要使用英 圖網(wǎng)站板塊舉例象樂電影電視音樂 女人

16、時尚情愛美容10餐般票基金商業(yè) 科技數(shù)碼電腦康電文或者中英文混合型名稱。例如：beyond studio和超越工作室，后者更親切好記。另外， 網(wǎng)站名稱的字數(shù)應該控制在六個字（最好四個字）以內(nèi)，比如【 XX閣】【XX設計室】，四 個字的可以用成語，如【一網(wǎng)打進】。字數(shù)少還有個好處，一般友情鏈接的小logo尺寸是 88X31，而六個字的寬度是78左右，適合于其他站點的鏈接排版。3、名稱要有特色名稱平實就可以接受，如果能體現(xiàn)一定的內(nèi)涵，給瀏覽者更多的視覺沖擊和空間想象 力，則為上品。如，音樂前衛(wèi)、網(wǎng)頁陶吧、天籟絕音、地球之殤，在體現(xiàn)出網(wǎng)站主題的同 時，能點出特色之處。1.2.2站點規(guī)劃與設計要想制作

17、精彩的網(wǎng)頁，吸引住瀏覽者，還要好好規(guī)劃網(wǎng)站。規(guī)劃站點就像設計一座大 樓一樣，只有圖紙設計好了，才能建成一座漂亮的樓房。在規(guī)劃網(wǎng)站時，明確該網(wǎng)站中需 要包含哪些元素，網(wǎng)站的整體結構，同時將網(wǎng)站內(nèi)容分類、確定各頁的主題、各頁包含的 內(nèi)容，以及各頁之間的層次結構和邏輯關系。以及每幅網(wǎng)頁的布局，包括每幅網(wǎng)頁中圖片 和文字的排列、它們之間的相互關系、在頁面中各部分的顏色如何選取，如果是框架頁面， 還要設計頁面框架的分布，頁面中在什么位置放置鏈接點，頁面中包含哪些信息內(nèi)容等等。 一、欄目的設置要將最好的，最吸引人的內(nèi)容放在最突出的位置，讓好東西在版面分布上占絕對優(yōu)勢， 那么欄目就是最好的工具。欄目的實質是

18、一個網(wǎng)站的大綱索引，索引應該將網(wǎng)站的主體明 確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。一般的網(wǎng)站欄目安排要注意以 下幾方面：1.要緊扣主題并突出主題一般的做法是：將主題按一定的方法分類并將它們作為網(wǎng)站的主欄目。例如有一個 以提供網(wǎng)站動畫和圖片素材為主題的站點，可以將欄目設計如下：Homelift佳圉設計素材費料團片動圈寶庫數(shù)碼粘品矢量圖片特色圉標網(wǎng)絡中右記?。褐黝}欄目個數(shù)在總欄目中要占絕對優(yōu)勢，這樣的網(wǎng)站顯的專業(yè)，主題突出，容 易給人留下深刻印象。把主題欄目放在最顯眼的地方，讓訪問者更快、更鮮明地知道網(wǎng)站所要表現(xiàn)的內(nèi)容。2. 設一個最近更新欄目或網(wǎng)站指南欄目3. 設定一個可以雙向交流

19、的欄目比如論壇，留言本，由M牛列表等，可以讓瀏覽者留下他們的信息。4. 設一個下載或常見問題回答欄目至于其他的輔助內(nèi)容，如關于本站，版權信息等可以不放在主欄目里，以免沖淡主題 總結以上幾點，我們得出劃分欄目需要注意的是：盡可能刪除與主題無關的欄目盡可能將網(wǎng)站最有價值的內(nèi)容列在欄目上盡可能方便訪問者的瀏覽和查詢二、版塊的設置版塊比欄目的概念要大一些，每個版塊都有自己的欄目。舉個例子：網(wǎng)易的站點分新聞，體育，財經(jīng)，娛樂，教育等版塊，每個版塊下面又各 有自己的主欄目。新聞的主欄目企新I排訂丨國內(nèi)國陌丨社會I評論丨探理辜事丨歷史丨舷丨的片便霑丨論龍I媲住丨視刼瓷養(yǎng)I手機版訓聞日歷 一般的個人站點內(nèi)容少

20、，只有主欄目（主菜單）就夠了，不需要設置版塊。 如果覺得的確有必要設置版塊的，應該注意：各版塊要有相對獨立性。各版塊要有相互關聯(lián)。版塊的內(nèi)容要圍繞站點主題。三、網(wǎng)站的目錄結構的設計網(wǎng)站的目錄是指建立網(wǎng)站時創(chuàng)建的目錄。例如：在用DW建立網(wǎng)站時都默認建立了根目錄和images子目錄。目錄的結構是一個容易忽略的問題，大多數(shù)站長都是未經(jīng)規(guī)劃， 隨意創(chuàng)建子目錄。目錄結構的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對于站點 本身的上傳維護，內(nèi)容未來的擴充和移植有著重要的影響。下面是建立目錄結構的一些建 議：1.不要將所有文件都存放在根目錄下。有人為了方便，將所有文件都放在根目錄下。這樣做造成的不利影響在

21、于：文件管理混亂。常常搞不清哪些文件需要編輯和更新，哪些無用的文件可以刪除， 哪些是相關聯(lián)的文件，影響工作效率。上傳速度慢。服務器一般都會為根目錄建立一個文件索引。當您將所有文件都放 在根目錄下，那么即使只上傳更新一個文件，服務器也需要將所有文件再檢索一遍，建立 新的索引文件。很明顯，文件量越大，等待的時間也將越長。所以，建議是：盡可能減少 根目錄的文件存放數(shù)。2.按欄目內(nèi)容建立子目錄。子目錄的建立，首先按主菜單欄目建立。例如 ：網(wǎng)頁教程類站點可以根據(jù)技術類別分 別建立相應的目錄，象 Flash、Dhtm Javascript等；企業(yè)站點可以按公司簡介、產(chǎn)品介 紹、價格、在線定單、反饋聯(lián)系等建

22、立相應目錄。而一些相關性強，不需要經(jīng)常更新的欄目，例如：關于本站，關于站長，站點經(jīng)歷等 可以合并放在一個統(tǒng)一目錄下。3.在每個主目錄下都分別為圖像建立獨立的images目錄。默認的，一個站點根目錄下都有一個 images目錄。為每個主欄目建立一個獨立的 images目錄是最方便管理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目 的圖片。4.目錄的層次不要太深。目錄的層次建議不要超過3層。原因很簡單，維護管理方便。5.其它需要注意的不要使用中文目錄；網(wǎng)絡無國界，使用中文目錄可能對網(wǎng)址的正確顯示造成困難。 不要使用過長的目錄；盡管服務器支持長文件名，但是太長的目錄名不便于記憶。盡量使

23、用意義明確的目錄；上面的例子中，可以用Flash、Dhtml、Javascript來建立目錄，也可以用1, 2, 3建立目錄，但是哪一個更明確，更便于記憶和管理呢？顯然 是前者！四、網(wǎng)站的鏈接結構網(wǎng)站的鏈接結構是指頁面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。 一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點并不是分布在一個 平面上，而是存在于一個立體的空間中。一般的，建立網(wǎng)站的鏈接結構有兩種基本方式：1. 樹狀鏈接結構（一對一）這樣的鏈接結構瀏覽時，一級級進入，一級級退出。優(yōu)點是條理清晰，

24、訪問者明確知 道自己在什么位置，不會迷路。缺點是瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須繞經(jīng)首頁。2. 星狀鏈接結構（一對多）類似網(wǎng)絡服務器的鏈接，每個頁面相互之間都建立有鏈接。這種鏈接結構的優(yōu)點是瀏 覽方便，隨時可以到達自己喜歡的頁面。缺點是鏈接太多，容易使瀏覽者迷路，搞不清自 己在什么位置，看了多少內(nèi)容。這兩種基本結構都只是理想方式，在實際的網(wǎng)站設計中，總是將這兩種結構混合起來 使用。我們希望瀏覽者既可以方便快速的達到自己需要的頁面，又可以清晰的知道自己的 位置。所以，最好的辦法是：首頁和一級頁面之間用星狀鏈接結構，一級和二級頁面之間用樹狀鏈接結構。例如，一個新聞站點的頁

25、面結構如下：圖新聞站點頁面結構圖其中，首頁，財經(jīng)新聞頁，娛樂新聞頁，IT新聞頁之間是星狀鏈接，可以互相點擊， 直接到達。而財經(jīng)新聞頁和它的子頁面之間是樹狀連接，瀏覽財經(jīng)新聞1后，必須回到財經(jīng)新聞頁，才能瀏覽IT新聞2。注意：如果的站點內(nèi)容龐大，分類明細，需要超過三級頁面，那么建議在頁面里顯示 導航條，可以幫助瀏覽者明確自己所處的位置。就是您經(jīng)常看到許多網(wǎng)站頁面頂部的，類您所在的位置：騰訊首貝 新聞中怙 時政新聞 正文關于鏈接結構的設計，在實際的網(wǎng)頁制作中是非常重要一環(huán)。采用什么樣的鏈接結構 直接影響到版面的布局。例如的主菜單放在什么位置，是否每頁都需要放置，是否需要用 分幀框架，是否需要加入返

26、回首頁的鏈接。在連接結構確定后，再開始考慮鏈接的效果和 形式，是采用下拉表單，還是用 DHTM動態(tài)菜單等等。五、網(wǎng)頁的布局網(wǎng)頁頁面的版面布局是不可忽視的。一個網(wǎng)頁是否精彩，與網(wǎng)頁布局有重要關系。常見的網(wǎng)頁布局類型：國字型、匡字型、三字型、川字型、拐角型（廠字型） 、封面 型、flash型等，此外還有骨骼型、滿版型、分割型、中軸型、對稱型、焦點型、自由型等?！皣弊中筒季郑鹤钌厦媸蔷W(wǎng)站的標志、廣告以及導航欄，接下來是網(wǎng)站的主要內(nèi)容， 左右分別列出一些欄目，中間是主要部分，最下部是網(wǎng)站的一些基本信息，這種結構是國 內(nèi)一些大中型網(wǎng)站常見的布局方式。優(yōu)點是充分利用版面、信息量大，缺點是頁面顯得擁 擠、

27、不夠靈活。拐角型結構布局是指頁面頂部為標志 +廣告條，下方左面為主菜單，右面顯示正文信 息。這是網(wǎng)頁設計中使用廣泛的一種布局方式，一般應用于企業(yè)網(wǎng)站中的二級頁面。這種 布局的優(yōu)點是頁面結構清晰、主次分明，是初學者最容易上手的布局方法。 在這種類型中， 一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。框架型布局：一般分成上下或左右布局，一欄是導航欄目，一欄是正文信息。復雜的 框架結構可以將頁面分成許多部分，常見的是三欄布局。上邊一欄放置圖像廣告，左邊一 欄顯示導航欄，右邊顯示正文信息。封面型布局：一般應用在網(wǎng)站的主頁或廣告宣傳頁上，為精美的圖像加上簡單的文字鏈接，指向網(wǎng)頁中的主要欄目，或通

28、過“進入”鏈接到下一個頁面。Flash型布局：這種布局與圭寸面型的布局結構類似， 不同的是頁面采用了 Flash技術, 動感十足，可以大大增強頁面的視覺效果。標題正文型：這種類型即最上面是標題或類似的一些東西，下面是正文，如一些文章 頁面或注冊頁面等就是這種類。網(wǎng)頁布局的技巧：1、內(nèi)容第一，形式第二。內(nèi)容決定形式，形式表現(xiàn)內(nèi)容。2、布局設計要綜合運用對比與調和、對稱與平衡、節(jié)奏與韻律、以及留白等手段，通過 空間、文字、圖形之間的相互關系建立整體的均衡狀態(tài)， 使網(wǎng)頁疏密有致、井井有條、 重點突出、平衡和諧。3、加強視覺效果，保持新鮮和個性。在浩瀚的網(wǎng)頁中，如何使自己的網(wǎng)頁吸引瀏覽者的視線，增強網(wǎng)

29、站的瀏覽量？強烈的視覺效果是必要手段，同時，只有那些具有個性的，充滿趣味且與眾不同的網(wǎng)頁，才能給人帶來賞心悅目的感覺。4、頁面風格的統(tǒng)一協(xié)調。包括布局結構、色彩搭配、等設計風格的統(tǒng)一，如網(wǎng)站標志等 設計性元素的一致性、網(wǎng)站導航的位置、形式的一致性、版權信息及色彩的一致性， 還要注意其它頁面和首頁的風格一致性等。網(wǎng)頁布局的技術：1、表格布局。2、ApDiv （層）布局。3、Spry布局對象。4、CSS+Div 布局。5、框架布局六、確定網(wǎng)站的整體風格和創(chuàng)意設計網(wǎng)站的整體風格及其創(chuàng)意設計是設計者最希望掌握，也是最難以學習的。難就難在沒 有一個固定的程式可以參照和模仿。給一個主題，任何兩人都不可能設

30、計出完全一樣的網(wǎng) 站。1、風格風格（style）是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象” 包括站點的CI （標志，色彩，字體，標語），版面布局，瀏覽方式，交互性，文字字體和 大小以及背景的使用，語氣，內(nèi)容價值等等諸多因素。舉個例子：我們覺得網(wǎng)易是平易近 人的，迪斯尼是生動活潑的，IBM是專業(yè)嚴肅的。這些都是網(wǎng)站給人們留下的不同感受。有風格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：普通網(wǎng)站看到的只是堆砌在一起的信息，只能 用理性的感受來描述，比如信息量大小，瀏覽速度快慢。但瀏覽過有風格的網(wǎng)站后能有更 深一層的感性認識，比如站點有品位，和藹可親，是老師，是朋友。如何樹立網(wǎng)站風格呢？我們可

31、以分這樣幾個步驟：第一，確信風格是建立在有價值內(nèi)容之上的。一個網(wǎng)站有風格而沒有內(nèi)容，就好比繡 花枕頭一包草，好比一個性格傲慢但卻目不識丁的人。 首先必須保證內(nèi)容的質量和價值性。 這是最基本的，無須置疑。第二，需要徹底搞清楚自己希望站點給人的印象是什么?？梢詮囊韵聨追矫嫠伎迹篽如慕冗用一句話來櫛述你的結點，應詼是: _參苛番案*有創(chuàng)憲，專業(yè)*有(技術)實力*有矣應.冇沖擊力1.想到你的站點*可鍛聯(lián)想到的色影是: _參考尊粧匕熱情的紅色，幻想的夭瑩色，聰硼的金董色3.想劍你的站點，可漢聯(lián)想到的倉面是 -券背簽案一倚罕報，一輛空竝利起車，人群擁擠的廣場，雜貨底匸 如昱岡站是一個人.他擁疽的個桂是=

32、_歩廿礬案:起憊成熱的中年人，狂*t奔放的豐仔，自值憨厚的創(chuàng)業(yè)吿5.作外站益，炸滯璽松人的印京墨 .參若等案:敬業(yè)，認臭投入.冇深度.負責.純耳.並夬瀕女&用十種動軸來比喻.你的岡站最象； _寧考答案;拇(神耕鬲責)鷹(目光銳和,鬼子(咤明敏慮h獅子(自借咸匍化瀏覽奢覺得傑和其他網(wǎng)站的不冏是* .參考答熟可說傅鶴，館息謖快，交舷廈，亂瀏寬老和儂交焼合作的感凌是： _參考答案：師生.囪事，朋發(fā)，拴幼.第三，在明確自己的網(wǎng)站印象后，開始努力建立和加強這種印象。此時，需要進一步找出其中最有特色的東西，就是最能體現(xiàn)網(wǎng)站風格的東西。并以它 作為網(wǎng)站的特色加以重點強化。例如：再次審查網(wǎng)站名稱、域名、欄目名

33、稱是否符合這種 個性，是否易記。審查網(wǎng)站標準色彩是否容易聯(lián)想到這種特色，是否能體現(xiàn)網(wǎng)站的性格等 等。比如：定位網(wǎng)站CI形象所謂Cl(corporate identity)，是借用的廣告術語，意思是通過視覺來統(tǒng)一企業(yè)的形象。 現(xiàn)實生活中的CI策劃比比皆是，杰出的例子如：可口可樂公司，全球統(tǒng)一的標志，色彩 和產(chǎn)品包裝，給我們的印象極為深刻。更多的例子如SONY，三菱，麥當勞等等。一個杰出的網(wǎng)站，和實體公司一樣，也需要整體的形象包裝和設計。準確的，有創(chuàng)意的CI設計,對網(wǎng)站的宣傳推廣有事半功倍的效果。1、設計網(wǎng)站的標志(logo)首先需要設計制作一個網(wǎng)站的標志(logo)。就如同商標一樣，logo是站

34、點特色和內(nèi)涵 的集中體現(xiàn)，看見logo就讓大家聯(lián)想起的站點，即網(wǎng)站的標志。標志可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。比如新 浪用字母sina+眼睛作為標志。標志的設計創(chuàng)意來自網(wǎng)站的名稱和內(nèi)容。欣賞一些網(wǎng)站Logo(1) 網(wǎng)站有代表性的人物，動物，花草，可以用它們作為設計的藍本，加以卡通化和 藝術化，例如騰訊的企鵝，搜狐的卡通狐貍。(2) 網(wǎng)站有專業(yè)性的，可以以本專業(yè)有代表的物品作為標志。比如中國銀行的銅板標 志，奔馳汽車的方向盤標志。(3) 最常用和最簡單的方式是用自己網(wǎng)站的英文名稱作標志。采用不同的字體，字母的變形，字母的組合可以很容易制作好自己的標志，例如前面提到

35、的新浪，以及迪斯尼。2、設計網(wǎng)站的配色方案打開一個網(wǎng)站，給用戶留下第一印象的既不是網(wǎng)站豐富的內(nèi)容，也不是網(wǎng)站合理的版面布局，而是網(wǎng)站的色彩。一個網(wǎng)站設計成功與否，在某種程度上取決于設計者對色彩的 運用和搭配。因此，在設計網(wǎng)頁時，必須要高度重視色彩的搭配。一般來說，適合網(wǎng)頁標準色彩有 3大色系：藍色、橙色/黃色、黑/白/灰色系。不同的 色彩搭配會產(chǎn)生不同的效果，應該結合站點整體目標和內(nèi)容來設計。紅色、橙色溫暖、興奮、熱情，橙色適用于視覺要求較高的時尚網(wǎng)站，屬于注目、芳 香的顏色，也常被用于味覺較高的食品網(wǎng)站，是容易引起食欲的顏色。但是，暖色調容易造成人視覺疲勞，慎用。黑色神秘、高貴，在商業(yè)設計中

36、，黑色是許多科技產(chǎn)品的用色，如電視、跑車、攝影 機、音響、儀器的色彩大多采用黑色?；疑哂腥岷汀⒏哐诺囊庀?，而且屬于中間性格，男女皆能接受，所以灰色也是永遠 流行的主要顏色。許多高科技產(chǎn)品，尤其是和金屬材料有關的，幾乎都采用灰色來傳達高 級、高科技的形象。使用灰色時，大多利用不同層次的變化組合和與其他色彩搭配，才不 會過于平淡、沉悶、呆板、僵硬。紫色具有強烈的女性化性格，在商業(yè)設計用色中，紫色受到相當?shù)南拗?，除了和女?有關的商品或企業(yè)形象外，其他類的設計不常采用紫色作為主色。黃色是陽光的色彩，具有活潑與輕快的特點，給人以十分年輕的感覺。象征光明、希 望、高貴、愉快。它的亮度最高，和其他顏色搭

37、配顯得很活潑，有溫暖感，具有快樂、希 望、智慧和輕快的個性，有希望與功名等象征意義。黃色也代表著土地、象征著權力，并 且還具有神秘的宗教色彩。淺黃色系明朗、愉快、希望、發(fā)展，它的雅致，清爽屬性，較 適合用于女性及化妝品類網(wǎng)站。中黃色有崇高、尊貴、輝煌、注意、擴張的心理感受。深 黃色給人高貴、溫和、穩(wěn)重的心理感受綠色所傳達的是清爽、理想、希望、生長的意象，符合服務業(yè)、衛(wèi)生保健業(yè)、教育行 業(yè)、農(nóng)業(yè)、餐飲酒店的要求。在工廠中，為了避免操作時眼睛疲勞，許多機械也是采用綠 色，一般的醫(yī)療機構場所，也常采用綠色來做空間色彩規(guī)劃。藍色給人以沉穩(wěn)的感覺，且具有智慧、準確的意象，在商業(yè)設計中強調高科技、效率 高

38、的商品或企業(yè)形象，大多選用藍色作為標準色、企業(yè)色，如電腦、汽車、影印機、攝影 器材等。另外，藍色也代表憂郁和浪漫，這個意象也常運用在文學作品或感性訴求的商業(yè) 設計中。舉個實際的例子：IBM的深藍色，肯得基的紅色條型，windows視窗標志上的紅藍黃 綠色塊，都使我們覺得很貼切，很和諧。如果將 IBM改用綠色或金黃色，我們會有什么感 覺？色彩搭配既是一項技術性工作，同時也是一項藝術性很強的工作，因此在設計網(wǎng)頁時 除了考慮網(wǎng)站本身的特點外，還要遵循一定的藝術規(guī)律，從而設計出色彩鮮明、性格獨特 的網(wǎng)站。網(wǎng)頁色彩搭配的技巧到底用什么色彩搭配好看呢？下面是網(wǎng)頁色彩搭配的一些常見技巧。（1） 運用相同色系

39、色彩：使網(wǎng)頁色彩趨于一致，塑造和諧統(tǒng)一的氛圍，缺點是容易 造成單調，所以使用局部對比色增加變化，如局部地區(qū)加入一張與背景呈對比色彩的 圖片。什么是相同色系？在360度色相環(huán)上位置相近，大約在45度左右的色彩，或同一色相不同明度的色彩。（2） 使用鄰近色：色帶上向鄰近的顏色。作用同上。（3 ）使用對比色：對比色作為點綴，突出重點，畫龍點睛。（4 ）背景色的使用：采用素淡清雅的顏色，避免采用花紋復雜的圖案和純度很高的 色彩。背景要與文字的顏色對比強烈。（5）把握色彩的數(shù)量：網(wǎng)站用色控制在 3種以內(nèi)，多了，顯得花哨、雜亂。通過改 變色彩的各種屬性，如明度，飽和度，來產(chǎn)生變化。3、設計網(wǎng)站的標準字體和

40、標準色彩一樣，標準字體是指用于標志，標題，主菜單的特有字體。一般我們網(wǎng)頁 默認的字體是宋體。為了體現(xiàn)站點的與眾不同和特有風格，我們可以根據(jù)需要選擇一些特 別字體。例如，為了體現(xiàn)專業(yè)可以使用粗仿宋體，體現(xiàn)設計精美可以用廣告體，體現(xiàn)親切 隨意可以用手寫體等等。需要說明的是：使用非默認字體只能用圖片的形式，因為很可能瀏覽者的pC里沒有安裝的特別字體，那么您的辛苦設計制作便付之東流啦！突出的標準字體。在關鍵的標題，菜單，圖片里使用統(tǒng)一的標準字體。4、設計網(wǎng)站的宣傳標語也可以說是網(wǎng)站的精神，網(wǎng)站的目標。用一句話甚至一個詞來高度概括。類似實際生 活中的廣告金句。例如：鵲巢的【味道好極了】；麥斯威爾的【好東

41、西和好朋友一起分享】； In tel的【給一顆奔騰的芯】。想一條朗朗上口宣傳標語。把它做在的 banner里，或者放在醒目的位置，告訴大家 的網(wǎng)站的特色是什么。以上四方面：標志，色彩，字體，標語，是一個網(wǎng)站樹立CI形象的關鍵，確切的說是網(wǎng)站的表面文章，設計并完成這幾步，的網(wǎng)站將脫胎換骨，整體形象有一個提高。風格的形成不是一次定位的，需要在實踐中不斷強化，調整，修飾2、創(chuàng)意創(chuàng)意(idea)是網(wǎng)站生存的關鍵。那么創(chuàng)意到底是什么，如何產(chǎn)生創(chuàng)意呢？創(chuàng)意是引人入勝，精彩萬分，出奇不意的；創(chuàng)意是捕捉出來的點子，是創(chuàng)作出來的奇 招等。這些講法都說出了創(chuàng)意的一些特點，實質上，創(chuàng)意是傳達信息的一種特別方式。比如

42、血池sign.我們將其中的E字母大寫一下：就hEl比，感覺怎么樣，這其實就 是一種創(chuàng)意！創(chuàng)意是將現(xiàn)有的元素重新組合。比如，網(wǎng)絡與電話結合，產(chǎn)生Ip電話。從這一點上出發(fā)，任何人，包括和我，都可以創(chuàng)造出不同凡響的創(chuàng)意。而且，資料越豐富，越容易產(chǎn)生 創(chuàng)意。就好比萬花筒，筒內(nèi)的玻璃片越多，所呈現(xiàn)的圖案越多。如果有心可以發(fā)現(xiàn)，網(wǎng)絡 上的最多的創(chuàng)意來自與現(xiàn)實生活的結合(或者虛擬現(xiàn)實)，例如在線書店，電子社區(qū)，在線 拍賣。關于風格和創(chuàng)意，又是一門學問，可以自己找一些廣告設計方面的書閱讀。通過以上步驟，最終會形成一個文件 【策劃方案】，說明網(wǎng)站的用戶群、定位網(wǎng)站主題、 風格、創(chuàng)意、主要內(nèi)容、欄目、版塊、目錄結

43、構和鏈接結構，以及網(wǎng)站形象策劃、制作規(guī) 范和后期推廣宣傳等方面的內(nèi)容。1.2.3規(guī)劃和搜集素材網(wǎng)站的主題內(nèi)容是文本、圖像和多媒體等，它們構成了網(wǎng)站的靈魂，否則再好的結構 設計都不能達到網(wǎng)站設計的初衷，也不能吸引瀏覽者。在對網(wǎng)站進行結構設計之后，需要 對每個網(wǎng)頁的內(nèi)容進行一個大致的構思，如哪些網(wǎng)頁需要使用模板，哪些網(wǎng)頁需要使用特 殊設計的圖像，哪些網(wǎng)頁需要使用較多的動態(tài)效果， 如何設計菜單，采用什么樣式的鏈接， 網(wǎng)頁采用什么顏色和風格等，這些都對資源收集具有指導性作用。要圍繞主題開始搜集資料。資料既可以從圖書、報紙、光盤、多媒體上獲得，也可以 從網(wǎng)上搜集；然后再把搜集的材料去粗取精，去偽存真，作

44、為自己制作網(wǎng)頁的素材。1、 使用圖形圖像軟件設計與制作網(wǎng)頁圖像：LOGO、導航條、Banner、首頁布局等。2、使用flash等軟件制作網(wǎng)站動畫，如 Banner、廣告窗。1.2.4網(wǎng)站的創(chuàng)建和網(wǎng)頁的設計與制作在全面考慮好網(wǎng)站的欄目，鏈接結構和整體風格之后，我們就可以正式動手創(chuàng)建網(wǎng)站、 制作網(wǎng)頁了。1、創(chuàng)建站點：先建目錄，在目錄下建站點2、設計并制作網(wǎng)頁：先設計后制作。按照前期的策劃方案，制定適當?shù)臉藴?。設計人員進行設計，根據(jù)前期的策劃方案，設計具體的頁面，包括頁面布局、導航、背景顏色、文字顏色、鏈接顏色、頁面間的鏈接結構。制作人員進行制作，按照先大后小、先簡單后復雜的順序進行制作，先設計制作

45、大結 構，再逐步完善小結構和小細節(jié)。先建主頁、再建子頁、在建立超鏈接。開發(fā)動態(tài)網(wǎng)站模塊。頁面制作完成后，如果還需要動態(tài)功能，則需要開發(fā)動態(tài)功能模 塊，網(wǎng)站中常用的功能模塊包括搜索功能、留言板、新聞發(fā)布、在線購物和論壇及聊天室 等。3、測試站點和改進。1.2.5申請域名和服務器空間并上傳網(wǎng)頁不論公司還是個人，制作網(wǎng)頁的目的一般來說是為了將其發(fā)布到網(wǎng)上，這就涉及需要在WW上建立Web站點，以及將站點發(fā)布到某一個 WWW Web服務器上。申請域名和服務器空間域名是企業(yè)或事業(yè)單位在因特網(wǎng)上進行相互聯(lián)絡的網(wǎng)絡地址，在網(wǎng)絡時代，域名是企業(yè)、機構進入因特網(wǎng)必不可少的身份證明。找到一家合適的域名服務提供商，注

46、冊域名并付費，以獲取服務器空間。測試與上傳網(wǎng)頁可以采用Dreamweaver自帶的站點管理上傳文件，也可以采用專門的FTp軟件上傳。 利用這些FTp工具，可以很方便地把網(wǎng)站發(fā)布到服務器上。網(wǎng)站上傳以后，要在瀏覽器中 打開自己的網(wǎng)站，逐頁逐個鏈接地進行測試，發(fā)現(xiàn)問題，及時修改，然后再上傳測試。 1.2.6網(wǎng)站的宣傳、推廣、維護與管理網(wǎng)頁做好之后，還要不斷地進行宣傳，這樣才能讓更多的朋友認識它，提高網(wǎng)站的訪 問率和知名度。推廣的方法有很多，如到搜索引擎上注冊、網(wǎng)站交換鏈接、添加廣告鏈等。互聯(lián)網(wǎng)絡的最大優(yōu)勢就是信息的實時性，只有快速的反映，準確的報道，才能吸引更 多的瀏覽者。并且嚴格來說，每一個站點

47、都應該由專業(yè)人員定期更新維護。更新維護不僅 僅只局限于簡單的更換文字稿。以企業(yè)網(wǎng)站為例來說，更新維護應該將企業(yè)的商業(yè)動態(tài)和 發(fā)展方向充分考慮進去，再結合現(xiàn)有的網(wǎng)站規(guī)劃結構，迅速作出相應的改進。1.3網(wǎng)頁制作的工具軟件和技術1、網(wǎng)頁編輯軟件：Dreamweaver、frontpage2、網(wǎng)頁動畫制作軟件：Flash3、網(wǎng)頁圖形、圖像編輯軟件：photoshop、Fireworks。4、網(wǎng)頁標記語言：HTML5、網(wǎng)頁腳本語言：JavaScript6、動態(tài)網(wǎng)貝編程語言ASp1.4Dreamweaver軟件簡介1.4.1安裝與卸載1.4.2界面簡介一、標題欄和菜單欄標題欄標題條顯示頁面標題，并在括號中

48、顯示文件的路徑和文件名。如果做了更改但仍未保 存，則在文件名后顯示一個星號。觀察：對網(wǎng)頁進行編輯后，標題欄有何變化？觀察：使用【文件】菜單中的【保存】命令保存文件，標題欄有何變化？歸納：如果對當前網(wǎng)頁進行了編輯但未存盤，則在文件名右側出現(xiàn)【 *】號標記，保存 后【*】號消失。菜單區(qū)和其它的軟件一樣，該軟件所有的操作命令都可以從這一個區(qū)內(nèi)找到，實例：演示使用 【查看】菜單中的標尺和網(wǎng)格命令進行工作環(huán)境的設置。二、工具欄演示：【工具條】的顯示與隱藏?！疚臋n】工具欄若要顯示或隱藏工具條，選擇【查看】【工具欄】【文檔】。點擊帶有向下小箭頭的工具，會彈出更多選擇。若要在【網(wǎng)頁文檔】窗口中只顯示代碼，點擊

49、【代碼】按鈕若要顯示包括代碼和設計的視圖，點擊【拆分】按鈕。若要只顯示設計視圖，點擊【設計】按鈕。若要為文檔輸入一個標題，使用【標題】域。如果文檔已經(jīng)有了標題，它將出現(xiàn)在該 域中。若要在瀏覽器中預覽或者調試文檔， 點擊在瀏覽器中預覽/調試按鈕，在彈出的菜單 中選擇一種瀏覽器。若要添加或改變菜單中列出的瀏覽器，選擇 編輯瀏覽器列表。若要刷新的設計視圖，請點擊刷新設計視圖按鈕。若要訪問參考面板，點擊參考按鈕。參考面板包括關于HTMLCSS和JavaScript 代碼的參考信息?！緲藴省抗ぞ邫凇静榭础?【工具欄】 【標準】三、狀態(tài)欄提供正在創(chuàng)建的文檔的一些其他信息。組成狀態(tài)欄的各個部分：窗口尺寸欄，

50、下載 時間欄等。標簽選擇器顯示控制選定文本或對象的 HTM父標簽。點擊其中的一個標簽就可以在文 檔窗口中高亮其內(nèi)容。點擊body就可以選擇該文檔的整個主體部分。窗口大小彈出式菜單可以將【網(wǎng)頁文檔】窗口調整到預先定義的大小或自定義的尺 寸。估計的文檔大小和該頁面的大概下載時間，該大小是包括所有相關文件如圖象和其他 媒體文件以后的大小。四、插入浮動面板包含用于創(chuàng)建和插入對象的各種按鈕。這些按鈕被組織到選項卡中。顯示或隱藏【插入】欄：選擇【窗口】 【插入】。展開或折疊【插入】欄：單擊【插入】欄標題條左角處的展開箭頭?！静迦腠椖俊窟x擇【窗口】 【插入】，打開【插入面板】，選中了某個項目， 則會出現(xiàn)相應

51、的【插 入項目】簡單介紹插入面板里各項的作用。五、文檔編輯窗口網(wǎng)頁設計區(qū)，所設計的網(wǎng)頁或代碼將出現(xiàn)在該區(qū)。六、屬性面板（屬性區(qū)）屬性面板主要用于查看和編輯當前所選頁面元素的各種屬性。每種對象有不同的屬 性，屬性面板會隨著選擇對象的不同而變化。在文檔窗口選擇要編輯的對象元素之后，就 可以在屬性面板設置其屬性了。顯示或隱藏屬性面板方法：選擇【窗口】【屬性】菜單。單擊屬性面板右下角的箭頭按鈕可以展開或折疊面板。七、面板組面板組是組合在文檔窗口右側的相關面板的集合。 展開或折疊一個面板組直接單擊面板標題。 在展開的面板組中選擇一個面板單擊該面板的選項卡。 關閉一個面板組從面板組標題條中的【選項】菜單中

52、選擇【關 閉面板組】。 打開屏幕上不可見的面板組從【窗口】菜單中選擇一個面板的名稱。 將一個面板組停靠到其它面板組打開該面板；右鍵點該面板名后選擇【將資源 組合在】小提示：在菜單上看到的一些組合字母（如CTRL + N）就是該項操作的快捷鍵，日后熟練了，可以使用， 加快網(wǎng)頁設計的速度。143網(wǎng)頁的視圖三種試圖：代碼視圖、設計視圖、拆分視圖。了解XHTM語言144網(wǎng)頁文件的基本操作一、新建網(wǎng)頁二、打開網(wǎng)頁三、保存網(wǎng)頁四、在瀏覽器中預覽網(wǎng)頁單擊工具欄上預覽按鈕，或 F12鍵，可以在瀏覽器中預覽編輯的網(wǎng)頁。五、設置頁面頭部內(nèi)容設計視圖模式下，選擇【查看 文件頭內(nèi)容】，文件頭內(nèi)容會顯示在設計視圖的上部

53、, 如下圖所示：設置網(wǎng)頁標題1、什么是網(wǎng)頁標題？網(wǎng)頁標題就是在瀏覽器中瀏覽網(wǎng)頁時，瀏覽器窗口頂部顯示的文本信息。網(wǎng)頁標題可以簡明地概括網(wǎng)頁的內(nèi)容，點明網(wǎng)頁的主題。當網(wǎng)頁被加入收藏夾時，網(wǎng)頁標題又作為網(wǎng)頁的名稱（標簽）出現(xiàn)在收藏夾中。網(wǎng)頁標題也是搜索引擎robots搜索的主要依據(jù)。DW在新建網(wǎng)頁時，默認的頁面標題為“無標題文檔”。2、設置網(wǎng)頁標題的具體操作：法一：設計視圖模式下，單擊文件頭內(nèi)容窗口中的【標題】按鈕，可以在【屬性】面 板中查看并修改網(wǎng)頁標題屬性。法二：在【文檔】工具欄的【標題】文本框中直接輸入網(wǎng)頁的標題。六、設置網(wǎng)頁基本屬性在開始制作具體的頁面之前，先對整個網(wǎng)站的頁面屬性進行設置，

54、 這樣在具體制作時 能夠具有同一的風格，保證網(wǎng)頁的協(xié)調性和整體性。選擇【修改】 【頁面屬性】菜單命令，或者單擊屬性面板中的【頁面屬性】按鈕，打開頁面屬性對話框。補充：什么是CSS ?CSS是Cascadi ng Style Sheet的縮寫，譯作層疊樣式表，是用于 （增強）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。具體應用將在后續(xù)章節(jié)詳細講 解。1、設置外觀（CSS）【分類】列表下選擇【外觀（CSS ）】選項卡，可以設置頁面字體、字號、背景圖像、 背景顏色、文本顏色、左邊距、上邊距等屬性。 【重復】下拉列表用來設置背景圖像的重 復方式。p120李曉斌2、設置外觀（HTML）外

55、觀（HTML】的設置與外觀（CSS ）大致相同，后期講解區(qū)別。外觀（HTML】選項中設置的屬性會出現(xiàn)在頁面主體標簽 body中，不會自動生成CSS樣式。3、設置鏈接對網(wǎng)頁的鏈接樣式進行詳細設置。4、標題（CSS ）設置標題字體相關屬性。5、標題/編碼標題：設置在文檔窗口和大多數(shù)瀏覽器窗口的標題欄中出現(xiàn)的頁面標題。總結：標題的設置方法：頁面屬性對話框 標題編碼分類文件頭內(nèi)容窗口中的【標題】按鈕，可以在【屬性】面板中查看并修改網(wǎng)頁標題屬性【文檔】工具欄，【標題】后面文本框直接輸入。文檔類型：可以在下拉列表選擇文檔類型。DWcs6默認新建的文檔為 XHTML1.0Transitional 。作業(yè)：查

56、資料，分析 HTML5.0和XHTML1.0有什么區(qū)別。編碼：網(wǎng)頁的文字編碼方式，DWcs6默認文檔編碼方式為Unicode（UTF-8），也可以 選擇簡體中文（GB23126、跟蹤圖像設計頁面的草圖，作為背景鋪在網(wǎng)頁下面，用來引導網(wǎng)頁的設計。跟蹤圖像：可以指定一幅圖像作為頁面創(chuàng)作時的草稿圖，它顯示在頁面的背景上，（一般是前期使用pS設計制作的網(wǎng)頁布局效果圖）便于在網(wǎng)頁創(chuàng)作時進行網(wǎng)頁元素的定 位與安放。在實際生成的網(wǎng)頁中并不顯示它。跟蹤圖像同背景圖像唯一的相同之處在于都 是一幅存在于頁面背景中的圖像。但是跟蹤圖像不會被 Dreamweaver平鋪（對一個背景圖像來說，如果圖像尺寸小于頁面的尺寸

57、就會被平鋪。）；可以指定跟蹤圖像的透明度； 跟蹤圖像只在Dreamweaver中可見，在瀏覽器中它會被忽略。1.5站點的創(chuàng)建與管理問題：網(wǎng)頁與網(wǎng)站的關系？先規(guī)劃土地還是先建房？先建房還是先買家具？先建網(wǎng)頁 還是先建網(wǎng)站？講述：先建網(wǎng)站，后建網(wǎng)頁。1.5.1定義站點的必要性和注意事項1、本地站點與遠程站點Dreamweave沖，站點（Site】一詞既可以指In ternet 上的一個網(wǎng)站，也可以指在本 地硬盤上的一個網(wǎng)站（更多的時候）。本地硬盤的網(wǎng)站實際上是一個文件夾，它作為我們 站點的根目錄，里面包含了站點的所有頁面、圖像、聲音、動畫等。我們開發(fā)站點是在本地硬盤進行的，當站點開發(fā)完畢后，再將本

58、地站點的內(nèi)容上傳到Web服務器上，供別人訪問瀏覽?？偨Y：放置在本地磁盤上的網(wǎng)站被稱為 本地站點，位于互聯(lián)網(wǎng)web服務器里的網(wǎng)站被 稱為遠程站點。2、本地站點的作用在建立網(wǎng)站、制作網(wǎng)頁之前，首先需要創(chuàng)建一個本地站點。這是為了更好地利用站點 窗口對站點文件進行管理。在做網(wǎng)頁文件時，打開軟件后，先把我們要做的網(wǎng)頁文件保存 到事先建好的站點里，這樣是為了避免插入圖片時出現(xiàn)錯誤?？梢员M可能的減少一些錯誤 的出現(xiàn)，如路徑出錯，鏈接出錯（特別是新手）。只有站點內(nèi)才可以利用我們將在以后章 節(jié)中講述的模板、資源管理和庫等高級功能編輯更新網(wǎng)站。3、創(chuàng)建站點的注意事項（1） 合理規(guī)劃文件和文件夾新手做網(wǎng)頁，就只知道

59、做網(wǎng)頁，不懂得條理性、結構性，一個文件放這里，另一個文件放那里，或者所有文件都放在同一文件夾內(nèi)，這樣顯得很亂。提倡的做法是：建立一個文件夾用于存放網(wǎng)站的所有文件，再在文件內(nèi)建立幾個子文件夾，將文件分類，如圖片文 件放在image文件夾內(nèi)，HTML文件放在HTML文件夾內(nèi)。當然，如果站點比較大，文件比 較多，可以先按欄目分類，在欄目里再分類。（2） 文件命名注意事項文件的命名也是非常重要的，新手通常不注意這些，隨便亂起些名字，這樣過些時候 自己也搞不懂是什么了（特別是文件比較多的時候）。我們要做到一看文件的名字就知道 是什么內(nèi)容的文件。提倡的做法是： 站點里的所有文件的名稱都 不能為漢語名，必須為英文名或者是數(shù)字命名的。 在文件以及文件夾的命名中不能使用特殊符號（& +、中文雙字節(jié)標點符號等），會導致網(wǎng)站不能正常工