《網頁設計與制作》講義-專題1網頁設計基礎知識

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

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

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

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

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

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

7、格的作用?？梢栽诰W頁中使用GIF、JpEG和pNG等多種圖像格式，其中使用最廣泛的是GIF和JpEG兩種格式。隨著網絡技術的發(fā)展，網頁上出現(xiàn)了越來越多的Flash動畫。Flash動畫已經成為當今網站必不可缺少的部分，美觀的動畫能夠為網頁增色不少，從而吸引更多的瀏覽者。Flash動畫不僅需要對動畫制作軟件非常熟悉，更重要的是設計者獨特的創(chuàng)意。6、頁腳頁腳放置網頁設計者的基本信息。思考題：網頁的設計需要考慮哪些因素？標題、Logo、頁眉、頁腳、導航的設計、版面布局的設計、連接結構的設計、網頁色彩的搭配設計、字體的設計、宣傳標語的設計等。1.1.5網頁的分類我們通常看到的網頁，大都是以HTM或HTM

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

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

10、瀏覽器。應用程序服務器的作用是讀取動態(tài)網頁上的代碼，根據代碼中的指令完成網頁，然后將代碼從網頁上去掉，所得的結果將是一個靜態(tài)網頁；應用程序服務器將該網頁傳送回網頁服務器，網頁服務器將網頁發(fā)送到瀏覽器，瀏覽器得到的仍然是一個純HTML的靜態(tài)網頁。如圖2所示為動態(tài)網頁的工作原理圖。圖2 動態(tài)網頁的工作原理圖動態(tài)網頁的一般特點如下。l 動態(tài)網頁以數(shù)據庫技術為基礎，可以大大降低網站維護的工作量。l 采用動態(tài)網頁技術的網站可以實現(xiàn)更多的功能，如用戶注冊、用戶登錄、搜索查詢、用戶管理、訂單管理等。l 動態(tài)網頁并不是獨立存在于服務器上的網頁文件，只有當用戶請求時服務器才返回一個完整的網頁。l 搜索引擎一般不

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

12、是的網站的題材。網絡上的網站題材千奇百怪,琳瑯滿目。常見的網站題材有：第1類：網上求職第2類：網上聊天即時信息/ ICQ第3類：網上社區(qū)討論 / 郵件列表第4類：計算機技術第5類：網頁/ 網站開發(fā) 第6類：娛樂網站 第7類：旅行 第8類：參考 /資訊第9類：家庭/教育 第10類：生活/時尚 每個大類都可以繼續(xù)細分，比如娛樂類再分為體育 /電影/ 音樂大類，音樂又可以按格式分為Mp3、WMA、Ra等，按表現(xiàn)形式分古典，現(xiàn)代，搖滾等。以上都只是最常見的題材，還有許多專業(yè)的，另類的，獨特的題材可以選擇，比如中醫(yī)，熱帶魚，天氣預報等等，同時，各個題材相聯(lián)系和交叉結合可以產生新的題材，例如旅游論壇（旅游

13、+討論），經典入球播放（足球+影視）等，按這樣分下去，題材可以有成千上萬個。對于題材的選擇，通常遵循以下原則：1.主題要小而精定位要小，內容要精。如果想制作一個包羅萬象的站點，把所有您認為精彩的東西都放在上面，那么往往會事與愿違，給人的感覺是沒有主題，沒有特色，樣樣有卻樣樣都很膚淺，因為您不可能有那么多的精力去維護它。網絡的最大特點就是新和快，目前最熱門的個人主頁都是天天更新甚至幾小時更新一次。最新的調查結果也顯示，網絡上的【主題站】比【萬全站】更受人們喜愛，就好比專賣店和百貨商店，如果我需要買某方面的東西，肯定會選擇專賣店。2.題材最好是自己擅長或者喜愛的內容比如：您對擅長編程，就可以建立一

14、個編程愛好者網站；對足球感興趣，可以報道最新的戰(zhàn)況，球星動態(tài)等。這樣在制作時，才不會覺得無聊或者力不從心。興趣是制作網站的動力，沒有熱情，很難設計制作出杰出的作品。3.題材不要太濫或者目標太高【太濫】是指到處可見，人人都有的題材；比如軟件下載，免費信息?！灸繕颂摺渴侵冈谶@一題材上已經有非常優(yōu)秀，知名度很高的站點，要超過它是很困難的。除非下決心和有實力競爭并超過它，記住，在互聯(lián)網上只有第一，人們往往只記得最好的網站，第二第三名的印象則會淺得多。二、定義網站名稱網站名稱也是網站設計的一部分，而且是很關鍵的一個要素。比如，【電腦學習室】和【電腦之家】顯然是后者簡練；【迷笛樂園】和【MIDI樂園】顯

15、然是后者明晰；【兒童天地】和【中國幼兒園】顯然是后者大氣。我們都知道pIIICUp的中文名稱【奔騰】，如果改為【奔跑】，可能就沒有今天這么【火】了。和現(xiàn)實生活中一樣，網站名稱是否正氣，響亮，易記，對網站的形象和宣傳推廣也有很大影響。一般的建議是：1、名稱要正2、名稱要易記根據中文網站瀏覽者的特點，除非特定需要，網站名稱最好用中文名稱，不要使用英文或者中英文混合型名稱。例如：beyond studio和超越工作室，后者更親切好記。另外，網站名稱的字數(shù)應該控制在六個字（最好四個字）以內，比如【XX閣】【XX設計室】，四個字的可以用成語，如【一網打進】。字數(shù)少還有個好處，一般友情鏈接的小logo尺寸

16、是88X31，而六個字的寬度是78左右，適合于其他站點的鏈接排版。3、名稱要有特色名稱平實就可以接受，如果能體現(xiàn)一定的內涵，給瀏覽者更多的視覺沖擊和空間想象力，則為上品。如，音樂前衛(wèi)、網頁陶吧、天籟絕音、地球之殤，在體現(xiàn)出網站主題的同時，能點出特色之處。1.2.2 站點規(guī)劃與設計要想制作精彩的網頁，吸引住瀏覽者，還要好好規(guī)劃網站。規(guī)劃站點就像設計一座大樓一樣，只有圖紙設計好了，才能建成一座漂亮的樓房。在規(guī)劃網站時，明確該網站中需要包含哪些元素，網站的整體結構，同時將網站內容分類、確定各頁的主題、各頁包含的內容，以及各頁之間的層次結構和邏輯關系。以及每幅網頁的布局，包括每幅網頁中圖片和文字的排列

17、、它們之間的相互關系、在頁面中各部分的顏色如何選取，如果是框架頁面，還要設計頁面框架的分布，頁面中在什么位置放置鏈接點，頁面中包含哪些信息內容等等。一、欄目的設置要將最好的，最吸引人的內容放在最突出的位置，讓好東西在版面分布上占絕對優(yōu)勢，那么欄目就是最好的工具。欄目的實質是一個網站的大綱索引，索引應該將網站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。一般的網站欄目安排要注意以下幾方面：1.要緊扣主題并突出主題一般的做法是：將主題按一定的方法分類并將它們作為網站的主欄目。例如有一個以提供網站動畫和圖片素材為主題的站點，可以將欄目設計如下：記?。褐黝}欄目個數(shù)在總欄目中要占絕對優(yōu)勢，

18、這樣的網站顯的專業(yè)，主題突出，容易給人留下深刻印象。把主題欄目放在最顯眼的地方，讓訪問者更快、更鮮明地知道網站所要表現(xiàn)的內容。2.設一個最近更新欄目或網站指南欄目3.設定一個可以雙向交流的欄目比如論壇，留言本，郵件列表等，可以讓瀏覽者留下他們的信息。4.設一個下載或常見問題回答欄目至于其他的輔助內容，如關于本站，版權信息等可以不放在主欄目里，以免沖淡主題?？偨Y以上幾點，我們得出劃分欄目需要注意的是： 盡可能刪除與主題無關的欄目 盡可能將網站最有價值的內容列在欄目上 盡可能方便訪問者的瀏覽和查詢二、版塊的設置版塊比欄目的概念要大一些，每個版塊都有自己的欄目。新聞的主欄目圖網站板塊舉例舉個例子：網

19、易的站點分新聞，體育，財經，娛樂，教育等版塊，每個版塊下面又各有自己的主欄目。一般的個人站點內容少，只有主欄目(主菜單)就夠了，不需要設置版塊。如果覺得的確有必要設置版塊的，應該注意：l 各版塊要有相對獨立性。l 各版塊要有相互關聯(lián)。l 版塊的內容要圍繞站點主題。三、網站的目錄結構的設計網站的目錄是指建立網站時創(chuàng)建的目錄。例如：在用DW建立網站時都默認建立了根目錄和images子目錄。目錄的結構是一個容易忽略的問題，大多數(shù)站長都是未經規(guī)劃，隨意創(chuàng)建子目錄。目錄結構的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對于站點本身的上傳維護，內容未來的擴充和移植有著重要的影響。下面是建立目錄結構的一些建

20、議：1. 不要將所有文件都存放在根目錄下。有人為了方便，將所有文件都放在根目錄下。這樣做造成的不利影響在于：l 文件管理混亂。常常搞不清哪些文件需要編輯和更新，哪些無用的文件可以刪除，哪些是相關聯(lián)的文件，影響工作效率。l 上傳速度慢。服務器一般都會為根目錄建立一個文件索引。當您將所有文件都放在根目錄下，那么即使只上傳更新一個文件，服務器也需要將所有文件再檢索一遍，建立新的索引文件。很明顯，文件量越大，等待的時間也將越長。所以，建議是：盡可能減少根目錄的文件存放數(shù)。2. 按欄目內容建立子目錄。子目錄的建立，首先按主菜單欄目建立。例如:網頁教程類站點可以根據技術類別分別建立相應的目錄，象Flash

21、、Dhtm、Javascript等；企業(yè)站點可以按公司簡介、產品介紹、價格、在線定單、反饋聯(lián)系等建立相應目錄。而一些相關性強，不需要經常更新的欄目，例如：關于本站，關于站長，站點經歷等可以合并放在一個統(tǒng)一目錄下。3. 在每個主目錄下都分別為圖像建立獨立的images目錄。默認的，一個站點根目錄下都有一個images目錄。為每個主欄目建立一個獨立的images目錄是最方便管理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目的圖片。4. 目錄的層次不要太深。目錄的層次建議不要超過3層。原因很簡單，維護管理方便。5. 其它需要注意的l 不要使用中文目錄；網絡無國界，使用中文目錄可能對網址

22、的正確顯示造成困難。l 不要使用過長的目錄；盡管服務器支持長文件名，但是太長的目錄名不便于記憶。l 盡量使用意義明確的目錄；上面的例子中，可以用Flash、Dhtml、Javascript來建立目錄，也可以用1，2，3建立目錄，但是哪一個更明確，更便于記憶和管理呢？顯然是前者！四、網站的鏈接結構網站的鏈接結構是指頁面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點并不是分布在一個平面上，而是存在于一個立體的空間中。一般的，建立網站的鏈接結構有兩種基本

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

24、級頁面之間用星狀鏈接結構，一級和二級頁面之間用樹狀鏈接結構。例如，一個新聞站點的頁面結構如下：二級頁面一級頁面圖 新聞站點頁面結構圖其中，首頁，財經新聞頁，娛樂新聞頁，IT新聞頁之間是星狀鏈接，可以互相點擊，直接到達。而財經新聞頁和它的子頁面之間是樹狀連接，瀏覽財經新聞1后，必須回到財經新聞頁，才能瀏覽IT新聞2。注意：如果的站點內容龐大，分類明細，需要超過三級頁面，那么建議在頁面里顯示導航條，可以幫助瀏覽者明確自己所處的位置。就是您經?？吹皆S多網站頁面頂部的，類似這樣：。關于鏈接結構的設計，在實際的網頁制作中是非常重要一環(huán)。采用什么樣的鏈接結構直接影響到版面的布局。例如的主菜單放在什么位置，

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

26、分利用版面、信息量大，缺點是頁面顯得擁擠、不夠靈活。拐角型結構布局是指頁面頂部為標志+廣告條，下方左面為主菜單，右面顯示正文信息。這是網頁設計中使用廣泛的一種布局方式，一般應用于企業(yè)網站中的二級頁面。這種布局的優(yōu)點是頁面結構清晰、主次分明，是初學者最容易上手的布局方法。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接?？蚣苄筒季郑阂话惴殖缮舷禄蜃笥也季郑粰谑菍Ш綑谀?，一欄是正文信息。復雜的框架結構可以將頁面分成許多部分，常見的是三欄布局。上邊一欄放置圖像廣告，左邊一欄顯示導航欄，右邊顯示正文信息。封面型布局：一般應用在網站的主頁或廣告宣傳頁上，為精美的圖像加上簡單的文字鏈接

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

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

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

30、我們可以分這樣幾個步驟：第一，確信風格是建立在有價值內容之上的。一個網站有風格而沒有內容，就好比繡花枕頭一包草，好比一個性格傲慢但卻目不識丁的人。首先必須保證內容的質量和價值性。這是最基本的，無須置疑。第二，需要徹底搞清楚自己希望站點給人的印象是什么。可以從以下幾方面思考：第三，在明確自己的網站印象后，開始努力建立和加強這種印象。此時，需要進一步找出其中最有特色的東西，就是最能體現(xiàn)網站風格的東西。并以它作為網站的特色加以重點強化。例如：再次審查網站名稱、域名、欄目名稱是否符合這種個性，是否易記。審查網站標準色彩是否容易聯(lián)想到這種特色，是否能體現(xiàn)網站的性格等等。比如：定位網站CI形象所謂CI(c

31、orporate identity)，是借用的廣告術語，意思是通過視覺來統(tǒng)一企業(yè)的形象?，F(xiàn)實生活中的CI策劃比比皆是，杰出的例子如：可口可樂公司，全球統(tǒng)一的標志，色彩和產品包裝，給我們的印象極為深刻。更多的例子如SONY，三菱，麥當勞等等。一個杰出的網站，和實體公司一樣，也需要整體的形象包裝和設計。準確的，有創(chuàng)意的CI 設計，對網站的宣傳推廣有事半功倍的效果。1、設計網站的標志(logo)首先需要設計制作一個網站的標志(logo)。就如同商標一樣，logo是站點特色和內涵的集中體現(xiàn)，看見logo就讓大家聯(lián)想起的站點，即網站的標志。標志可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等

32、等。比如新浪用字母sina+眼睛作為標志。標志的設計創(chuàng)意來自網站的名稱和內容。 欣賞一些 網站Logo (1) 網站有代表性的人物，動物，花草，可以用它們作為設計的藍本，加以卡通化和藝術化，例如騰訊的企鵝，搜狐的卡通狐貍。 (2) 網站有專業(yè)性的，可以以本專業(yè)有代表的物品作為標志。比如中國銀行的銅板標志，奔馳汽車的方向盤標志。(3) 最常用和最簡單的方式是用自己網站的英文名稱作標志。采用不同的字體， 字母的變形，字母的組合可以很容易制作好自己的標志，例如前面提到的新浪，以及迪斯尼。2、設計網站的配色方案打開一個網站，給用戶留下第一印象的既不是網站豐富的內容，也不是網站合理的版面布局，而是網站的

33、色彩。一個網站設計成功與否，在某種程度上取決于設計者對色彩的運用和搭配。因此，在設計網頁時，必須要高度重視色彩的搭配。一般來說，適合網頁標準色彩有3大色系：藍色、橙色/黃色、黑/白/灰色系。不同的色彩搭配會產生不同的效果，應該結合站點整體目標和內容來設計。紅色、橙色溫暖、興奮、熱情，橙色適用于視覺要求較高的時尚網站，屬于注目、芳香的顏色，也常被用于味覺較高的食品網站，是容易引起食欲的顏色。但是，暖色調容易造成人視覺疲勞，慎用。黑色神秘、高貴，在商業(yè)設計中，黑色是許多科技產品的用色，如電視、跑車、攝影機、音響、儀器的色彩大多采用黑色?；疑哂腥岷汀⒏哐诺囊庀?，而且屬于中間性格，男女皆能接受，所以

34、灰色也是永遠流行的主要顏色。許多高科技產品，尤其是和金屬材料有關的，幾乎都采用灰色來傳達高級、高科技的形象。使用灰色時，大多利用不同層次的變化組合和與其他色彩搭配，才不會過于平淡、沉悶、呆板、僵硬。紫色具有強烈的女性化性格，在商業(yè)設計用色中，紫色受到相當?shù)南拗?，除了和女性有關的商品或企業(yè)形象外，其他類的設計不常采用紫色作為主色。黃色是陽光的色彩，具有活潑與輕快的特點，給人以十分年輕的感覺。象征光明、希望、高貴、愉快。它的亮度最高，和其他顏色搭配顯得很活潑，有溫暖感，具有快樂、希望、智慧和輕快的個性，有希望與功名等象征意義。黃色也代表著土地、象征著權力，并且還具有神秘的宗教色彩。淺黃色系明朗、愉

35、快、希望、發(fā)展，它的雅致，清爽屬性，較適合用于女性及化妝品類網站。中黃色有崇高、尊貴、輝煌、注意、擴張的心理感受。深黃色給人高貴、溫和、穩(wěn)重的心理感受綠色所傳達的是清爽、理想、希望、生長的意象，符合服務業(yè)、衛(wèi)生保健業(yè)、教育行業(yè)、農業(yè)、餐飲酒店的要求。在工廠中，為了避免操作時眼睛疲勞，許多機械也是采用綠色，一般的醫(yī)療機構場所，也常采用綠色來做空間色彩規(guī)劃。藍色給人以沉穩(wěn)的感覺，且具有智慧、準確的意象，在商業(yè)設計中強調高科技、效率高的商品或企業(yè)形象，大多選用藍色作為標準色、企業(yè)色，如電腦、汽車、影印機、攝影器材等。另外，藍色也代表憂郁和浪漫，這個意象也常運用在文學作品或感性訴求的商業(yè)設計中。舉個實

36、際的例子：IBM的深藍色，肯得基的紅色條型，windows視窗標志上的紅藍黃綠色塊，都使我們覺得很貼切，很和諧。如果將IBM改用綠色或金黃色，我們會有什么感覺？色彩搭配既是一項技術性工作，同時也是一項藝術性很強的工作，因此在設計網頁時除了考慮網站本身的特點外，還要遵循一定的藝術規(guī)律，從而設計出色彩鮮明、性格獨特的網站。網頁色彩搭配的技巧到底用什么色彩搭配好看呢？下面是網頁色彩搭配的一些常見技巧。 （1）運用相同色系色彩：使網頁色彩趨于一致，塑造和諧統(tǒng)一的氛圍，缺點是容易造成單調，所以使用局部對比色增加變化，如局部地區(qū)加入一張與背景呈對比色彩的圖片。什么是相同色系？在360度色相環(huán)上位置相近，大

37、約在45度左右的色彩，或同一色相不同明度的色彩。（2）使用鄰近色：色帶上向鄰近的顏色。作用同上。（3）使用對比色：對比色作為點綴，突出重點，畫龍點睛。（4）背景色的使用：采用素淡清雅的顏色，避免采用花紋復雜的圖案和純度很高的色彩。背景要與文字的顏色對比強烈。（5）把握色彩的數(shù)量：網站用色控制在3種以內，多了，顯得花哨、雜亂。通過改變色彩的各種屬性，如明度，飽和度，來產生變化。3、設計網站的標準字體和標準色彩一樣，標準字體是指用于標志，標題，主菜單的特有字體。一般我們網頁默認的字體是宋體。為了體現(xiàn)站點的與眾不同和特有風格，我們可以根據需要選擇一些特別字體。例如，為了體現(xiàn)專業(yè)可以使用粗仿宋體，體現(xiàn)

38、設計精美可以用廣告體，體現(xiàn)親切隨意可以用手寫體等等。需要說明的是：使用非默認字體只能用圖片的形式，因為很可能瀏覽者的pC里沒有安裝的特別字體，那么您的辛苦設計制作便付之東流啦！突出的標準字體。在關鍵的標題，菜單，圖片里使用統(tǒng)一的標準字體。4、設計網站的宣傳標語也可以說是網站的精神，網站的目標。用一句話甚至一個詞來高度概括。類似實際生活中的廣告金句。例如：鵲巢的【味道好極了】；麥斯威爾的【好東西和好朋友一起分享】；Intel的【給一顆奔騰的芯】。想一條朗朗上口宣傳標語。把它做在的banner里，或者放在醒目的位置，告訴大家的網站的特色是什么。以上四方面：標志，色彩，字體，標語，是一個網站樹立CI

39、形象的關鍵，確切的說是網站的表面文章，設計并完成這幾步，的網站將脫胎換骨，整體形象有一個提高。風格的形成不是一次定位的，需要在實踐中不斷強化，調整，修飾.2、創(chuàng)意創(chuàng)意(idea)是網站生存的關鍵。那么創(chuàng)意到底是什么，如何產生創(chuàng)意呢？創(chuàng)意是引人入勝，精彩萬分，出奇不意的；創(chuàng)意是捕捉出來的點子，是創(chuàng)作出來的奇招等。這些講法都說出了創(chuàng)意的一些特點，實質上，創(chuàng)意是傳達信息的一種特別方式。比如，我們將其中的E字母大寫一下: ，感覺怎么樣，這其實就是一種創(chuàng)意！創(chuàng)意是將現(xiàn)有的元素重新組合。比如，網絡與電話結合，產生Ip電話。從這一點上出發(fā)，任何人，包括和我，都可以創(chuàng)造出不同凡響的創(chuàng)意。而且，資料越豐富，越容

40、易產生創(chuàng)意。就好比萬花筒，筒內的玻璃片越多，所呈現(xiàn)的圖案越多。如果有心可以發(fā)現(xiàn)，網絡上的最多的創(chuàng)意來自與現(xiàn)實生活的結合(或者虛擬現(xiàn)實)，例如在線書店，電子社區(qū)，在線拍賣。關于風格和創(chuàng)意，又是一門學問，可以自己找一些廣告設計方面的書閱讀。通過以上步驟，最終會形成一個文件【策劃方案】，說明網站的用戶群、定位網站主題、風格、創(chuàng)意、主要內容、欄目、版塊、目錄結構和鏈接結構，以及網站形象策劃、制作規(guī)范和后期推廣宣傳等方面的內容。1.2.3 規(guī)劃和搜集素材網站的主題內容是文本、圖像和多媒體等，它們構成了網站的靈魂，否則再好的結構設計都不能達到網站設計的初衷，也不能吸引瀏覽者。在對網站進行結構設計之后，需要

41、對每個網頁的內容進行一個大致的構思，如哪些網頁需要使用模板，哪些網頁需要使用特殊設計的圖像，哪些網頁需要使用較多的動態(tài)效果，如何設計菜單，采用什么樣式的鏈接，網頁采用什么顏色和風格等，這些都對資源收集具有指導性作用。要圍繞主題開始搜集資料。資料既可以從圖書、報紙、光盤、多媒體上獲得，也可以從網上搜集；然后再把搜集的材料去粗取精，去偽存真，作為自己制作網頁的素材。1、使用圖形圖像軟件設計與制作網頁圖像：LOGO、導航條、Banner、首頁布局等。2、使用flash等軟件制作網站動畫，如Banner、廣告窗。1.2.4 網站的創(chuàng)建和網頁的設計與制作在全面考慮好網站的欄目，鏈接結構和整體風格之后，我

42、們就可以正式動手創(chuàng)建網站、制作網頁了。1、 創(chuàng)建站點：先建目錄，在目錄下建站點2、 設計并制作網頁：先設計后制作。按照前期的策劃方案，制定適當?shù)臉藴省ＴO計人員進行設計，根據前期的策劃方案，設計具體的頁面，包括頁面布局、導航、背景顏色、文字顏色、鏈接顏色、頁面間的鏈接結構。制作人員進行制作，按照先大后小、先簡單后復雜的順序進行制作，先設計制作大結構，再逐步完善小結構和小細節(jié)。先建主頁、再建子頁、在建立超鏈接。開發(fā)動態(tài)網站模塊。頁面制作完成后，如果還需要動態(tài)功能，則需要開發(fā)動態(tài)功能模塊，網站中常用的功能模塊包括搜索功能、留言板、新聞發(fā)布、在線購物和論壇及聊天室等。3、 測試站點和改進。1.2.5

43、申請域名和服務器空間并上傳網頁不論公司還是個人，制作網頁的目的一般來說是為了將其發(fā)布到網上，這就涉及需要在WWW上建立Web站點，以及將站點發(fā)布到某一個WWW的Web服務器上。申請域名和服務器空間域名是企業(yè)或事業(yè)單位在因特網上進行相互聯(lián)絡的網絡地址，在網絡時代，域名是企業(yè)、機構進入因特網必不可少的身份證明。找到一家合適的域名服務提供商，注冊域名并付費，以獲取服務器空間。測試與上傳網頁可以采用Dreamweaver自帶的站點管理上傳文件，也可以采用專門的FTp軟件上傳。利用這些FTp工具，可以很方便地把網站發(fā)布到服務器上。網站上傳以后，要在瀏覽器中打開自己的網站，逐頁逐個鏈接地進行測試，發(fā)現(xiàn)問題

44、，及時修改，然后再上傳測試。1.2.6 網站的宣傳、推廣、維護與管理網頁做好之后，還要不斷地進行宣傳，這樣才能讓更多的朋友認識它，提高網站的訪問率和知名度。推廣的方法有很多，如到搜索引擎上注冊、網站交換鏈接、添加廣告鏈等。互聯(lián)網絡的最大優(yōu)勢就是信息的實時性，只有快速的反映，準確的報道，才能吸引更多的瀏覽者。并且嚴格來說，每一個站點都應該由專業(yè)人員定期更新維護。更新維護不僅僅只局限于簡單的更換文字稿。以企業(yè)網站為例來說，更新維護應該將企業(yè)的商業(yè)動態(tài)和發(fā)展方向充分考慮進去，再結合現(xiàn)有的網站規(guī)劃結構，迅速作出相應的改進。1.3網頁制作的工具軟件和技術1、 網頁編輯軟件：Dreamweaver、fro

45、ntpage2、 網頁動畫制作軟件：Flash3、 網頁圖形、圖像編輯軟件：photoshop、Fireworks。4、 網頁標記語言：HTML5、 網頁腳本語言：JavaScript6、 動態(tài)網頁編程語言ASp1.4Dreamweaver軟件簡介1.4.1 安裝與卸載1.4.2 界面簡介一、標題欄和菜單欄標題欄標題條顯示頁面標題，并在括號中顯示文件的路徑和文件名。如果做了更改但仍未保存，則在文件名后顯示一個星號。觀察：對網頁進行編輯后，標題欄有何變化？觀察：使用【文件】菜單中的【保存】命令保存文件，標題欄有何變化？歸納：如果對當前網頁進行了編輯但未存盤，則在文件名右側出現(xiàn)【*】號標記，保存后

46、【*】號消失。菜單區(qū)和其它的軟件一樣，該軟件所有的操作命令都可以從這一個區(qū)內找到,實例：演示使用【查看】菜單中的標尺和網格命令進行工作環(huán)境的設置。二、工具欄演示：【工具條】的顯示與隱藏。【文檔】工具欄若要顯示或隱藏工具條，選擇【查看】【工具欄】【文檔】。點擊帶有向下小箭頭的工具，會彈出更多選擇。若要在【網頁文檔】窗口中只顯示代碼，點擊【代碼】按鈕 若要顯示包括代碼和設計的視圖，點擊【拆分】按鈕。 若要只顯示設計視圖，點擊【設計】按鈕。 若要為文檔輸入一個標題，使用【標題】域。如果文檔已經有了標題，它將出現(xiàn)在該域中。 若要在瀏覽器中預覽或者調試文檔，點擊在瀏覽器中預覽/調試按鈕，在彈出的菜單中選

47、擇一種瀏覽器。若要添加或改變菜單中列出的瀏覽器，選擇編輯瀏覽器列表。 若要刷新的設計視圖，請點擊刷新設計視圖按鈕。 若要訪問參考面板，點擊參考按鈕。參考面板包括關于HTML，CSS和JavaScript代碼的參考信息。【標準】工具欄【查看】【工具欄】 【標準】三、狀態(tài)欄提供正在創(chuàng)建的文檔的一些其他信息。組成狀態(tài)欄的各個部分：窗口尺寸欄，下載時間欄等。標簽選擇器顯示控制選定文本或對象的HTML父標簽。點擊其中的一個標簽就可以在文檔窗口中高亮其內容。點擊就可以選擇該文檔的整個主體部分。 窗口大小彈出式菜單可以將【網頁文檔】窗口調整到預先定義的大小或自定義的尺寸。 估計的文檔大小和該頁面的大概下載時

48、間，該大小是包括所有相關文件如圖象和其他媒體文件以后的大小。四、插入浮動面板包含用于創(chuàng)建和插入對象的各種按鈕。這些按鈕被組織到選項卡中。 顯示或隱藏【插入】欄：選擇【窗口】【插入】。 展開或折疊【插入】欄：單擊【插入】欄標題條左角處的展開箭頭。 【插入項目】選擇【窗口】【插入】，打開【插入面板】， 選中了某個項目， 則會出現(xiàn)相應的【插入項目】簡單介紹插入面板里各項的作用。五、文檔編輯窗口網頁設計區(qū)，所設計的網頁或代碼將出現(xiàn)在該區(qū)。六、屬性面板 (屬性區(qū)) 屬性面板主要用于查看和編輯當前所選頁面元素的各種屬性。每種對象有不同的屬性，屬性面板會隨著選擇對象的不同而變化。在文檔窗口選擇要編輯的對象元

49、素之后，就可以在屬性面板設置其屬性了。顯示或隱藏屬性面板方法：選擇【窗口】【屬性】菜單。單擊屬性面板右下角的箭頭按鈕可以展開或折疊面板。七、面板組面板組是組合在文檔窗口右側的相關面板的集合。展開或折疊一個面板組直接單擊面板標題。在展開的面板組中選擇一個面板單擊該面板的選項卡。 關閉一個面板組從面板組標題條中的【選項】菜單中選擇【關閉面板組】。打開屏幕上不可見的面板組從【窗口】菜單中選擇一個面板的名稱。將一個面板組?？康狡渌姘褰M打開該面板；右鍵點該面板名后選擇【將資源組合在】小提示：在菜單上看到的一些組合字母(如CTRLN)就是該項操作的快捷鍵，日后熟練了，可以使用，加快網頁設計的速度。1.4

50、.3 網頁的視圖三種試圖：代碼視圖、設計視圖、拆分視圖。了解XHTML語言1.4.4 網頁文件的基本操作一、新建網頁二、打開網頁三、保存網頁四、在瀏覽器中預覽網頁單擊工具欄上預覽按鈕，或F12鍵，可以在瀏覽器中預覽編輯的網頁。五、設置頁面頭部內容設計視圖模式下，選擇【查看文件頭內容】，文件頭內容會顯示在設計視圖的上部，如下圖所示：設置網頁標題1、什么是網頁標題？n 網頁標題就是在瀏覽器中瀏覽網頁時，瀏覽器窗口頂部顯示的文本信息。n 網頁標題可以簡明地概括網頁的內容，點明網頁的主題。n 當網頁被加入收藏夾時，網頁標題又作為網頁的名稱（標簽）出現(xiàn)在收藏夾中。n 網頁標題也是搜索引擎robots搜索

51、的主要依據。n DW在新建網頁時，默認的頁面標題為“無標題文檔”。2、設置網頁標題的具體操作：法一：設計視圖模式下，單擊文件頭內容窗口中的【標題】按鈕，可以在【屬性】面板中查看并修改網頁標題屬性。法二：在【文檔】工具欄的【標題】文本框中直接輸入網頁的標題。六、設置網頁基本屬性在開始制作具體的頁面之前，先對整個網站的頁面屬性進行設置，這樣在具體制作時能夠具有同一的風格，保證網頁的協(xié)調性和整體性。選擇【修改】【頁面屬性】菜單命令，或者單擊屬性面板中的【頁面屬性】按鈕，打開頁面屬性對話框。補充：什么是CSS？CSS是 Cascading Style Sheet 的縮寫，譯作層疊樣式表，是用于(增強)

52、控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。具體應用將在后續(xù)章節(jié)詳細講解。1、設置外觀（CSS）【分類】列表下選擇【外觀（CSS）】選項卡，可以設置頁面字體、字號、背景圖像、背景顏色、文本顏色、左邊距、上邊距等屬性。【重復】下拉列表用來設置背景圖像的重復方式。p120李曉斌2、設置外觀（HTML）外觀（HTML）的設置與外觀（CSS）大致相同，后期講解區(qū)別。外觀（HTML）選項中設置的屬性會出現(xiàn)在頁面主體標簽中，不會自動生成CSS樣式。3、設置鏈接對網頁的鏈接樣式進行詳細設置。4、標題（CSS）設置標題字體相關屬性。5、標題/編碼標題：設置在文檔窗口和大多數(shù)瀏覽器窗口的標題欄中

53、出現(xiàn)的頁面標題?？偨Y：標題的設置方法：頁面屬性對話框標題編碼分類文件頭內容窗口中的【標題】按鈕，可以在【屬性】面板中查看并修改網頁標題屬性【文檔】工具欄，【標題】后面文本框直接輸入。文檔類型：可以在下拉列表選擇文檔類型。DWcs6默認新建的文檔為XHTML1.0Transitional。作業(yè)：查資料，分析HTML5.0和XHTML1.0有什么區(qū)別。編碼：網頁的文字編碼方式，DWcs6默認文檔編碼方式為Unicode(UTF-8)，也可以選擇簡體中文（GB2312）6、跟蹤圖像設計頁面的草圖，作為背景鋪在網頁下面，用來引導網頁的設計。跟蹤圖像：可以指定一幅圖像作為頁面創(chuàng)作時的草稿圖，它顯示在頁面

54、的背景上，（一般是前期使用pS設計制作的網頁布局效果圖）便于在網頁創(chuàng)作時進行網頁元素的定位與安放。在實際生成的網頁中并不顯示它。跟蹤圖像同背景圖像唯一的相同之處在于都是一幅存在于頁面背景中的圖像。 但是跟蹤圖像不會被 Dreamweaver 平鋪（對一個背景圖像來說，如果圖像尺寸小于頁面的尺寸就會被平鋪。）；可以指定跟蹤圖像的透明度；跟蹤圖像只在 Dreamweaver 中可見，在瀏覽器中它會被忽略。1.5 站點的創(chuàng)建與管理問題：網頁與網站的關系？先規(guī)劃土地還是先建房？先建房還是先買家具？先建網頁還是先建網站？ 講述：先建網站，后建網頁。1.5.1 定義站點的必要性和注意事項1、本地站點與遠程

55、站點Dreamweaver中，站點（Site）一詞既可以指Internet上的一個網站，也可以指在本地硬盤上的一個網站（更多的時候）。本地硬盤的網站實際上是一個文件夾，它作為我們站點的根目錄，里面包含了站點的所有頁面、圖像、聲音、動畫等。我們開發(fā)站點是在本地硬盤進行的，當站點開發(fā)完畢后，再將本地站點的內容上傳到Web服務器上，供別人訪問瀏覽。總結：放置在本地磁盤上的網站被稱為本地站點，位于互聯(lián)網web服務器里的網站被稱為遠程站點。 2、本地站點的作用在建立網站、制作網頁之前，首先需要創(chuàng)建一個本地站點。這是為了更好地利用站點窗口對站點文件進行管理。在做網頁文件時，打開軟件后，先把我們要做的網頁文

56、件保存到事先建好的站點里，這樣是為了避免插入圖片時出現(xiàn)錯誤?？梢员M可能的減少一些錯誤的出現(xiàn)，如路徑出錯，鏈接出錯（特別是新手）。只有站點內才可以利用我們將在以后章節(jié)中講述的模板、資源管理和庫等高級功能編輯更新網站。3、創(chuàng)建站點的注意事項（1）合理規(guī)劃文件和文件夾新手做網頁，就只知道做網頁，不懂得條理性、結構性，一個文件放這里，另一個文件放那里，或者所有文件都放在同一文件夾內，這樣顯得很亂。提倡的做法是：建立一個文件夾用于存放網站的所有文件，再在文件內建立幾個子文件夾，將文件分類，如圖片文件放在image文件夾內，HTML文件放在HTML文件夾內。當然，如果站點比較大，文件比較多，可以先按欄目分類，在欄目里再分類。（2）文件命名注意事項文件的命名也是非常重要的，新手通常不注意這些，隨便亂起些名字，這樣過些時候自己也搞不懂是什么了（特別是文件比較多的時候）。我們要做到一看文件的名字就知道是什么內容的文件。提倡的做法是： 站點里的所有文件的名稱都不能為漢語名，必須為英文名或者是數(shù)字命名的。 在文件以及文件夾的命名中不能使用特殊符號（&、+、中文雙字節(jié)標點符號等），會導致網站不能正常工作。 文件夾采用小寫英文字母、數(shù)字