1、網站建設與網頁設計第一章 基礎知識網站建設與網頁設計普通高等教育“十二五”規劃教育第一章 基礎知識1.1 網站的基礎知識1.2 網頁的基礎知識1.3 網站與網頁的關系與設計原則1.1 網站的基礎知識1.1.1 Internet概述什么是InternetInternet即國際計算機互聯網，在中國也稱為“因特網”或“萬維網”，是由符合TCP/IP等網絡協議的網絡組成的互聯網，是目前全世界最大的網絡，包含豐富多彩的信息，并提供方便快捷的服務。Internet的組成服務器：網絡中能對其它機器提供某些服務的計算機系統?？蛻魴C：用戶能夠在網絡環境匯總工作、訪問網絡共享資源的計算機。網絡通信協議：網絡之間溝

2、通、交流的橋梁，只有相同網絡協議的計算機才能進行信息的溝通與交流。目前常見的通信協議有TCP/IP、SPX/IPX、OSL、X.25、HTTP等。1.1 網站的基礎知識1.1.1 Internet概述Internet提供的服務WWW服務Gopher信息搜索文件傳輸電子郵件BBS服務電子商務1.1 網站的基礎知識1.1.2 網站的概念和構成什么是網站在互聯網上，根據一定的規則，使用HTML等工具制作的用于展示特定內容的相關網頁的集合。實質上，網站是一種通訊工具，就像布告欄一樣。因特網與網站的關系網站是因特中信息的載體和展板。網站的構成硬件方面：主要包括提供服務功能的服務器、網絡連接設備和周邊設備

3、。軟件方面：主要包括操作系統、應用程序、信息服務、數據庫、安全防護等。信息資源：包括文本、圖形、圖像和多媒體元素等。1.1 網站的基礎知識1.1.3 網站的相關技術知識IP地址與域名IP：IP地址是一種無連接的協議，其主要任務是提供網絡到網絡的尋址及路由信息。Internet上的每臺主機(Host)都有一個唯一的IP地址。IP地址的命名：目前因特網中的IP地址命名方法有兩種，一種是IPv4版，另一種是IPv6版。域名：是由一串用點分隔的名字組成的Internet上某一臺計算機或計算機組的名稱，用于在數據傳輸時標識計算機的電子方位。URL URL（統一資源定位符）是全球WWW服務器資源的標準尋址

4、定位編碼，俗稱“網址”。URL是一個資源位置的完整描述，包括資源所在的計算機名、目錄名以及文件名。1.1 網站的基礎知識1.1.3 網站的相關技術知識傳播技術超鏈接與超文本：IP地址是一種無連接的協議，其主要任務是提供網絡到網絡的尋址及路由信息。Internet上的每臺主機(Host)都有一個唯一的IP地址。交互技術與流媒體技術：交護技術實現了信息的互動；流媒體指在數據網絡上按時間先后次序傳輸和播放的連續音/視頻數據流，豐富了用戶在使用上的操作性。網站速度和信息量衡量網站的兩個最重要技術指標就是網站速度和信息量。網站速度包括了網站傳輸速度和網站響應速度；信息量主要是指網站服務器上存儲信息內容的

5、多少。兩者之間有著密切的關系，特別是后者對前者的影響有時起著決定性的作用。1.1 網站的基礎知識1.1.4 網站的傳播模式和特點網站傳播模式信息的傳播者與信息接收者之間的單向傳遞關系變為雙向互動關系。傳播內容不斷豐富，形式多樣化。網站傳播特點實時性：通過減少傳統媒體在信息產品制作過程中的環節，提高信息的時效性。全球性：互聯網媒體打破了傳統媒體的傳播范圍的地域限制，其受眾通過互聯網遍及全世界。交互性：網站可以做到雙向、多向的交流，在點點互通的情況下，傳者與受者之間沒有明顯的界線，傳者既發布訊息，又同時接受訊息。1.1 網站的基礎知識1.1.5 網站分類按服務性質分類主要包括門戶網站、游戲網站、搜

6、索網站、企業網站、政府、組織網站、個人網站等。按域名的命名方法分類按網站的內容分類按網站架構技術分類1.2 網頁的基礎知識1.2.1 網頁的概念和構成網頁概念網頁是一種存儲在Web服務器上，通過網絡進行傳輸，并被瀏覽器所解析和顯示的文檔類型，其內容由XHTML構成。根據內容對交互響應方式的不同，可以將網頁分為靜態網頁和動態網頁兩大類。網頁構成在網頁中，包括文本、圖片、動畫、音頻、視頻、超鏈接等元素，這些元素與網頁文件是相對獨立的。1.2 網頁的基礎知識1.2.2 網頁的功能網頁的主要功能就是通過網頁中的不同的元素將信息傳達給網站的訪問者。網頁是網站信息的載體，通過網站可以網站所有者如企業、個人

7、等的形象，利用不同網頁制作技術設計的網頁功能也各不相同。主要是兩個功能。信息傳遞功能信息交互功能1.2 網頁的基礎知識1.2.3 網頁制作工具網頁編輯工具Dreamweaver：是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設計工具，同時集成了程序開發語言，對ASP、.NET、PHP、JS的基本語言和連接操作數據庫，都是完全支持的。這也是本書主要介紹的工具。FrontPage：有良好的易用性，被認為是優秀的網頁初學者的工具，但其功能無法滿足更高要求。此外，還有幾款常用軟件：Adobe GoLive、HomeSit和Visual Studio。素材處理工具Photoshop

8、：Adobe公司旗下最為出名的圖像處理軟件之一，集圖像掃描、編輯修改、圖像制作、廣告創意，圖像輸入與輸出于一體的圖形圖像處理軟件。1.2 網頁的基礎知識1.2.3 網頁制作工具素材處理工具Flash：應用于互聯網網頁的矢量動畫設計軟件。Fireworks：Macromedia公司發布的一款專為網絡圖形設計的圖形編輯軟件，與 Macromedia Dreamweaver和 Macromedia Flash共同構成的集成工作流程可以使用戶創建并優化圖像，同時又能避免由于進行Roundtrip 編輯而丟失信息或浪費時間。網頁上傳工具友好的用戶界面，穩定的傳輸速度，LeapFTP 與FlashFXP

9、、CuteFTP堪稱FTP三劍客。但是它們都各有不足，要靈活使用。1.2 網頁的基礎知識1.2.4 網頁設計語言HTMLHTML（超文本標識語言）是用于創建Web文檔(即Homepage文檔)的編程語言。HTML并不是一種標準的編程語言，它只是一些能讓瀏覽器看懂的標記。CSSCSS(層疊樣式表）是一組格式設置規則，用于控制Web頁面的外觀。JavaScriptJavaScript是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言，最初起源于LiveScript語言，使用它的目的是與HTML超文本標記語言、Java 腳本語言（Java小程序）一起實現在一

10、個Web頁面中連接多個對象，與Web客戶交互作用。1.2 網頁的基礎知識1.2.4 網頁設計語言XML與XSLTXML即可擴展標記語言，它與HTML一樣，都是標準通用標記語言。但XML與HTML又是不同的。XML是用來存儲數據的，重在數據本身；而HTML是用來定義數據的，重在數據的顯示模式。XSL是指可擴展樣式表語言，是一種用于以可讀格式呈現XML數據的語言。xsl是一種標記語言，表示如何將xml文檔的內容裝換成另一種形式的文檔。通過為xml寫xsl來使得xml顯示成不同的格式。1.3 網站與網頁的關系與設計原則1.3.1 網站與網頁的關系網頁是網站的信息載體網站是一組相關網頁的集合，即若干個

11、網頁文件經過規劃組織以后彼此相連而形成完整結構的信息服務系統。網站是由不同形式的網頁組成的網站是由網頁構成的。網頁是構成網站的基本元素，是承載各種網站應用的平臺。網頁和網站是有區別的網站是有獨立域名、獨立存放空間的內容集合，這些內容可以是網頁，也可以是程序或者其他文件，不一定要有很多網頁。只要網站有獨立域名和空間，只有一個網頁也是網站。反過來，即使很多有網頁，但沒有獨立域名和空間，也只能叫做網頁，而不能成為網站。1.3 網站與網頁的關系與設計原則1.3.2 網站設計原則內容與形式相統一網站的形式是指網頁的排版、布局、色彩和圖形的運用等外在視覺效果。無論采取哪種形式都不能單純追求網頁的美觀而忽視

12、了內容的建設。定位明確在設計一個網站之前，首先要明確網站的發展方向，即網站的定位。網站定位的核心在于尋找或打造你網站的核心差異點。導航清晰導航設計使用超文本鏈接或圖片鏈接，使人們能夠在您的網站上自由前進或后退，而不會讓他們使用瀏覽器上的前進或后退。兼顧下載速度和美觀在注意網站內容的同時，要考慮網絡帶寬的限制，保證網站的響應時間。1.3 網站與網頁的關系與設計原則1.3.3 網頁設計原則布局合理網頁設計中，內容組織是最重要、最影響設計品質的方面。合理的網頁布局可通過構建好的CSS布局、表格布局和框架布局實現。色彩統一網頁給人的印象來自于視覺，色彩代表了不同的情感，有著不同的象征含義。因此，網站的

13、色彩相當重要。不同的色彩搭配產生不同的視覺效果，同時，網頁的色彩處理一定要總體協調，使整體的色彩效果和諧。更新維護方便訪問者希望看到新鮮的內容，沒有人對過時的信息感興趣，所以網站的信息一定要注意及時性，時刻保持新鮮感是很重要的一項工作內容。謝謝！網站建設與網頁設計第二章 網站規劃與設計第二章 網站規劃與設計2.1 網站規劃2.2 網站設計2.1 網站規劃2.1.1 網站規劃概述網站設計首先要做好規劃工作，雖然不同類型的網站規劃流程有所區別，但就整體上來說還是具有一定的共性，網站規劃的流程如右圖所示。2.1 網站規劃2.1.2 方案提出網站建設方案一般要從建站目的、網站功能要求、網站定位、確定網

14、站類型、確定網站規模、建站周期等幾個方面進行闡述。明確建站的目的對外宣傳樹立形象社會效益與經濟效益明確網站功能需求一般而言，網站的基本服務功能包括WEB、郵箱和FTP功能。各個網站都要根據實際建站目的完善功能。網站定位所謂網站定位就是網站在internet上扮演什么角色，要向目標群(瀏覽者)傳達什么樣的核心概念，透過網站發揮什么樣的作用。2.1 網站規劃2.1.3 可行性分析 所謂可行性分析是通過對項目的主要內容和配套條件進行調查研究和分析比較，并對項目建成以后可能取得的財務、經濟效益及社會環境影響進行預測，從而提出該項目是否值得投資和如何進行建設的咨詢意見，為項目決策提供依據的一種綜合性的系

15、統分析方法。 對網站的建設的可行性分析報告的編寫前，要從客觀、公正的立場進行調查研究，可以從以下幾個方面進行分析說明：技術可行性分析。從技術角度分析建站的可能性和必要性。運營可行性分析。對網站運營情況進行分析和預測。成本可行性分析。對維持網站正常運行及相關費用的預測分析。其他可行性分析。對與網站建設有關的問題進行可行性分析。2.1 網站規劃2.1.4 制定資源分配計劃人力資源分配 建站工作都需要由一個項目小組來完成，小組成員包括系統管理人員、網站結構規劃人員、網頁美工設計人員、主頁制作人員和網站程序開發人員。技術資源分配 網站建設的技術資源包括硬件資源、軟件資源、技術資料、文檔資料等內容。資金

16、分配 網站建站過程中常規性的費用支出大致有如下幾類：網站接入、網站開發費用、網站信息維護費用、人力資源費用。在網站規劃階段，要充分考慮各個方面的費用，進行合理的資金分配，保證網站建設過程不受資金問題困擾。2.1 網站規劃2.1.5 確定信息構架和內容確定信息架構 網站的信息架構的一般包括調查、分析、設計和執行過程，它涉及到組織、標識、導航和搜索系統的設計，目的是幫助人們成功地發現和管理信息。網站可以通過好的標識系統、導航系統和搜索系統來幫助用戶快速定位信息，同時便于網站的后臺管理。確定網站內容 網站內容的規劃優劣直接影響到用戶訪問網站的頻率，不同行業的企業網站頁面內容不盡相同，但其主要的功能和

17、模塊卻萬變不離其宗。網站的建設者應該根據自己的實際情況，在網站上放置相應的主題和內容，只有內容充實且實用，才能有效的實現網站的建站目，并最終獲得相應的經濟效益。2.1 網站規劃2.1.6 確定方案實施確定硬件系統建站的規模和硬件投資的多少決定了硬件系統的規模和性能。硬件系統是由網站服務器、集線器、路由器、網卡、連接線等網絡設備，以及網絡接口、UPS、機房等相關的設備組成的。確定軟件系統網站的軟件系統要根據網站采用什么樣的技術而決定。網站信息量的大小，決定了采用什么樣的數據庫?？晒┻x擇的大型數據庫有Oracle、Sybase、DB2、SQL server，小型數據庫有Access、MySQL、B

18、D2等。確定網站與網頁設計方案2.2 網站設計2.2.1 設計概述 網站設計是將網站策劃案中的內容、網站的主題模式以及結合自己的認識，通過藝術的手法表現出來，是一個把軟件需求轉換成用軟件網站表示的過程。也就是在因特網上，根據一定的規則，使用Dreamweaver、photoshop等工具制作的用于展示特定內容的相關網頁的集合。 總體上，網站設計可以通過準備、思考、初步設計、展示、反饋、實施、測試、維護幾個階段來實現。 網站設計與網頁制作不同，網頁制作通常就是將網頁設計師所設計出來的設計稿，按照W3C規范用html語言將其制作成網頁格式。網站設計要能充分吸引訪問者的注意力，讓訪問者產生視覺上的愉

19、悅感。因此在網站設計過程中，必須將網站的整體設計與網頁設計的相關原理緊密結合起來。2.2 網站設計2.2.2 結構設計網站目錄結構設計網站目錄結構的好壞，對于站點本身的上傳維護，內容未來的擴充和移植有著重要的影響。在設計網站的目錄結構時，要注意以下幾點。（如下個頁面所示）不要將所有文件都存放在根目錄下按欄目內容建立子目錄構建層次簡單、含義簡潔、清晰的目錄網站信息結構設計信息結構指的是網站上頁面的規劃，是網站的骨架。信息的結構類型包括矩陣結構、線性結構、層次結構等多種方式。2.2 網站設計“校園風光”網站的目錄結構示意圖2.2 網站設計2.2.2 結構設計網站層次結構設計網站的層次是指一級頁面（

20、首頁或者主頁面）、二級頁面和三級頁面之間的結構關系，具體如下圖所示。2.2 網站設計2.2.3 網站形象的藝術設計形象定位根據商品進行形象定位根據市場消費群體進行定位標志形象 設計制作一個網站的標志(logo)，就如同商標一樣，logo是一個站點特色和內涵的集中體現。下面是一些知名網站的標志。2.2 網站設計知名網站的LOGO2.2 網站設計2.2.3 網站形象的藝術設計整體形象 網站的整體形象主要包括兩個方面：網站之間的整體一致性和整體形象的一致性。 對于一些跨地域公司的網站而言，它們要面對的是具有不同語言、文化風格的人群，這時網站的風格、形象等就會有不同。但對同一網站而言，不論語言、風格、

21、形象如何變化，從整體上必須保持它們之間的一致性，如網站的結構、信息擺放位置等。 網站是由大量的網頁組成的，為了保持網站的整體一致性，應將不同網頁的版式設計為同一形式；同時在網站的各個頁面保持一致的色調也是保持網站之間整體一致性的重要手段。 下面是中國五礦集團網站的中英文頁面的對比。2.2 網站設計2.2.4 網站風格的藝術設計一個網站風格的好壞直接影響到了用戶的體驗度，所謂網站風格，就是指某一網站的整體形象給瀏覽者的綜合感受，是站點與眾不同的特色，它能透露出設計者與企業的文化品位。理性訴求強調理性訴求的網站大多是科技型企業網站，通過產品、技術、服務的介紹，突出企業特點。感性訴求信息強調感性訴求

22、的網站大多數是以服務為主的企業，以通過網站來樹立企業形象，提供相關的服務信息為建站目的。綜合訴求當單一的理性訴求或者感性訴求都不能準確的向用戶傳達網站的目的、展示企業產品或者服務時，就需要將這兩種訴求結合起來，在網站的不同部分采用不同的方法進行設計。謝謝！網站建設與網頁設計第三章 網頁的藝術設計第三章 網頁的藝術設計3.1網頁設計注意的問題3.3 網頁的色彩3.4 網頁元素設計3.3 網頁的構圖3.1 網頁設計注意的問題3.1.1 瀏覽器 在設計網頁時，面臨最大的挑戰就是因對不同的瀏覽器、操作系統和硬件平臺，雖然大多數HTML元素都可以在瀏覽器中顯示并穩定的運行，但是在執行某些腳本語言時，不同

23、的瀏覽器會表現出不同的特點。瀏覽器類型、版本與網站訪問者之間的關系 不同瀏覽器對不同網頁的顯示效果是不同的。同一瀏覽器的不同版本對同一頁面的顯示效果也有差距。因此在設計網頁時要充分考慮不同瀏覽器和瀏覽器不同版本之間的差距。瀏覽器與網頁制作技術之間的關系 網頁設計時要選用正確的技術，避免不同瀏覽器對某些技術的不支持的情況出現。3.1 網頁設計注意的問題3.1.1 瀏覽器網頁兼容性問題在設計網頁時需要考慮不同瀏覽器之間的區別，使用的功能也要考慮到瀏覽器之間的兼容性。3.1.2 顯示器對于顯示器而已，主要考慮分辨率問題和顏色問題。3.2 網頁的色彩3.2.1 色彩基礎在任何設計中，色彩對視覺的刺激起

24、到第一信息傳達的作用。只有掌握色彩構成原理，熟知各色彩的相互關系及各種色彩的生理或心理作用，結合自己所具備的平面構成知識，在網頁設計中正確用色，才能實現傳達特定信息和渲染頁面的效果的目的。色彩的三要素：色調（色相）、飽和度（純度）和亮度（明度），人眼看到的任一彩色光都是這三個特性的綜合效果。（電腦屏幕）色彩的三原色：RGB（紅、綠、藍）。色立體：指以三維空間表述色彩三要素的立體色彩，是依據色彩的色相、明度、純度變化關系，借助三維空間，用旋圍直角坐標的方法，組成一個類似球體的立體模型。3.2 網頁的色彩3.2.1 色彩基礎 色立體為設計者提供了直觀的色彩資料，可以幫助設計者快速地查找到所需要的顏

25、色標號，更清楚的理解色彩分類、對比與調和的規律，其模型如右圖。 色立體有多種，主要有德國奧斯特瓦爾德色立體（奧式色立體）、美國蒙賽爾色立體（蒙氏色立體）、日本色研色立體等。3.2 網頁的色彩3.2.2 色彩與心理 色彩與人類的色彩生理、心理體驗相聯系，從而使客觀存在的色彩仿佛有了復雜的性格。色彩的直接心理效應來自于色彩的物理光刺激對人的生理發生的直接影響。白色：白色給人印象中潔凈、純真、清白、衛生、恬靜等?；疑夯疑侵行陨?，其突出的性格為柔和、細致、平穩、樸素。黑色：黑色往往給人感覺沉靜、嚴肅、莊重、含蓄，另外，也易讓人產生悲哀、恐怖、不祥、沉默、消亡、罪惡等消極印象。紅色：紅色易使人聯想起

26、太陽、火焰、熱血、花卉等，感覺溫暖、興奮、活潑、熱情、積極、希望等向上的傾向。藍色：藍色的色感樸實、內向，是一種有助于人頭腦冷靜的顏色。綠色：綠色是具有黃色和藍色兩種成分的色，是一種柔順、恬靜、優美的顏色。3.2 網頁的色彩各種色彩的網頁3.2 網頁的色彩3.2.3 色彩的搭配網頁色彩搭配原理 對于網站的色彩搭配應本著“總體協調、局部對比”的大原則進行，同時注意一下幾點：鮮明性、獨特性、合適性、聯系性、對比性。同時，也要根據網站所在地區的文化對配色方案加以調整。網頁色彩搭配技巧 網頁顏色的選擇中要學會色彩的搭配，同時注意避免在網頁中使用忌諱的色彩搭配。為了方便網頁制作，還可以使用比較固定的一些

27、色彩搭配方案。 隨著網頁制作經驗的積累，對于網頁用色會出現從單色-五彩繽紛-標準色-單色的一個制作趨勢。使用非色彩技術資源分配 這個主要是對顏色搭配有一定經驗的設計者來說。3.3 網頁的構圖3.3.1 點、線、面 網頁是一幅特殊的畫面，需要通過一定的方式、方法，將不同的視覺元素安排好，才能形成一幅完整、協調的圖像。 點、線、面是構成空間視覺的基本元素，是表現視覺形象的基本設計語言。任何視覺形象都是由這三者構成的。網頁設計實際上就是如何合理的處理三者之間的關系。3.3.1 點、線、面 一個好的網頁布局應該給人一種安定、平穩的感覺，它不僅表現在色彩協調,還包括文字、圖像等要素的空間占用上分布均勻，

28、給人一種協調的感覺。在顯示屏這樣一個狹小的范圍內進行網頁設計需要對網頁中的元素進行合理的布局，使各元素的重心、平衡點和視覺焦點得到統一。3.3 網頁的構圖3.3.3 網頁布局網頁布局的概念 網頁布局包含了表格、框架的應用、文字縮排、段落等等，而布局并不是整齊就好，還要有明確的分類，以及主題的適當規劃。其內容主要有以下方面。頁面尺寸整體造型頁眉與頁腳文本圖片多媒體3.3 網頁的構圖3.3.3 網頁布局網頁布局原則 網頁的布局靈活多樣，但萬變不離其宗，其原則主要有以下幾點。根據網站的客戶群選擇合適的布局整體布局要大方得體主次分明、條理清晰注意網頁的平衡、對稱3.3 網頁的構圖3.3.3 網頁布局網

29、頁布局技術 網頁布局方法有很多種，可以根據設計者的需求在草稿紙上繪出滿意的網頁布局，也可以采用一些技術來布局，下面介紹三種較為常見的網頁布局技術。層疊樣式表（CSS）：是用于控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。這是一種非常實用的布局技術。框架布局：框架的英文是Frame，它實際上對應的是HTML語言中的Frame元素。框架布局就是將一個網頁分成多個頁面，每一網頁對應一個框架。表格布局：表格的英文是Table，在HTML語言中對應Table元素。表格布局幾乎已經成為一種標準，隨便瀏覽一個網站，其中許多頁面都是用表格布局的。3.3 網頁的構圖3.3.3 網頁布局網頁布局類型

30、 網頁布局中有幾種基本的布局類型。左右對稱結構布局，如右圖所示。3.3 網頁的構圖3.3.3 網頁布局網頁布局類型“同”字型結構布局，如下圖所示。3.3 網頁的構圖3.3.3 網頁布局網頁布局類型“回”字型結構布局，如下圖所示。3.3 網頁的構圖3.3.3 網頁布局網頁布局類型“匡”字型結構布局，如下圖所示。3.3 網頁的構圖3.3.3 網頁布局網頁布局類型自由式結構布局，如下圖所示。3.3 網頁的構圖3.3.3 網頁布局網頁布局類型“另類”結構布局，如下圖所示。3.3 網頁的構圖3.3.4 構圖實例 在網頁布局中，最常見的布局形式是根據頁面大大小，將頁面分成不同的欄或列。根據分欄的多少可將構

31、圖分為單欄式、雙欄式、三欄式和多欄式。單欄式 具體如右圖所示。3.3 網頁的構圖3.3.4 構圖實例雙欄式 具體如右圖所示。3.3 網頁的構圖3.3.4 構圖實例三欄式 具體如右圖所示。3.3 網頁的構圖3.3.4 構圖實例多欄式 具體如右圖所示。3.4 網頁元素設計3.4.1 標志設計 LOGO是網站形象的重要體現。一個好的LOGO往往會反映網站及制作者的某些信息，特別是對一個商業網站來話，我們可以從中基本了解到這個網站的類型，或者內容。標志的表現形式標識圖案標識文字組合標志3.4 網頁元素設計3.4.1 標志設計標志的設計方法 網頁標志的設計一般有三種方法，一是直接以網站網址作為標志，如智

32、聯招聘網站標志；二是根據提供的產品和服務來設計標志，老虎地圖網站標志，將老虎、地圖、手機等網站主要元素都包括在了標志中；三是以傳遞網站運營理念作為設計的思想基礎。不論采用哪種方法，應盡力做到以下幾點：用盡可能簡潔的圖型、線條及色彩來完成。力求巧妙、獨特的構思，以達到形式美的視覺效果。圖形既要簡練、概括，又要講究藝術性，讓看過的人能夠記得住。3.4 網頁元素設計3.4.2 文字設計 頁面里的正文部分是由許多單個文字經過編排組成的群體，從藝術的角度可以將字體本身看成是一種藝術形式。在網頁設計中，字體的處理與顏色、版式、圖形等其他設計元素的處理一樣非常關鍵。文字設計的原則文字的適合性文字的可識性文字

33、的視覺美感文件的獨特性3.4 網頁元素設計3.4.2 文字設計文字設計的方法整體風格的統一筆畫的統一方向的統一空間的統一3.4 網頁元素設計3.4.2 文字設計網頁中字體的選擇 由于網頁字體要求瀏覽者必須具有相應的本地字庫，才會正常顯示，否則將會按照系統默認的字體顯示，所以設計網頁字體就不得不考慮用戶體驗問題。 目前，對中文網站而言，宋體的適應性最強，黑體第二，微軟雅黑次之。 主流的英文字體包括Verdana、Georgia、Courier、New sans-serif、Arial、Times NewRoman、Impact六種字體，在各瀏覽器上顯示統一性也比較好。3.4 網頁元素設計3.4.

34、3 背景設計 在網頁設計演化的漫長路程中，網頁風格的變化尤其明顯。最容易注意到的一個主要變化，就是背景。如今，背景已經成為決定網站的視覺效果如何的核心特征之一。 主要的背景有如下分類。顏色背景沙紋背景(如右圖所示)合成背景局部背景謝謝！網站建設與網頁設計第四章 CS4入門說明：本章節中的具體操作步驟參見書籍的對應章節。第四章 CS4入門4.1 Dreamweaver的功能4.2 Dreamweaver CS4的工作環境4.1 Dreamweaver的功能 Dreamweaver是一款專業的網頁制作軟件，它的可視化編輯能夠使用戶快速創建富有特色的網頁，同時，它所集成的源代碼功能為廣大編程人員提供

35、了面向細節的工具。網頁制作 Dreamweaver為各種網頁和網頁文本的開發提供了靈活的環境。Dreamweaver把可視化編輯器和代碼編輯器集成在一起，這極大提高了用戶的效率。4.1 Dreamweaver的功能站點管理 Dreamweaver不僅是一款網頁制作軟件，也是一個站點管理工具。它提供了合理組織和管理所有與站點相關的文檔的方法，并且簡化了組更新的文件鎖定和跟蹤性能。4.2 Dreamweaver CS4的工作環境歡迎界面4.2.1 Dreamweaver CS4的界面4.2 Dreamweaver CS4的工作環境工作界面 此工作界面中，包括標題欄、菜單欄、文檔窗口、狀態欄、面板組

36、、屬性面板等元素。4.2.1 Dreamweaver CS4的界面4.2 Dreamweaver CS4的工作環境菜單欄 菜單欄位于標題欄的下方，提供了Dreamweaver CS4的所有命令，包括了以下10個菜單選項：【文件】、【編輯】、【查看】、【插入】、【修改】、【格式】、【命令】、【站點】、【窗口】、【幫助】。4.2.1 Dreamweaver CS4的界面工具欄 Dreamweaver中的工具欄有四種模式：“樣式呈現”工具欄、“文檔”工具欄、“標準”工具欄和“編碼”工具欄。4.2 Dreamweaver CS4的工作環境狀態欄 狀態欄位于文檔窗口底部，它是用戶需要關注的區域，包括標簽

37、選擇器、選取工具等功能按鈕、窗口大小等信息。4.2.1 Dreamweaver CS4的界面4.2 Dreamweaver CS4的工作環境 Dreamweaver CS4的面板包括浮動面板和屬性面板，而Dreamweaver以前版本的對象面板集成到了浮動面板。它們位于文檔窗口之上，用戶可以在文檔和面板之間自由切換。浮動面板 Dreamweaver的工具集（包括對象、行為、層等）都有自己的窗口和面板,采用了完全自定義化的浮動面板，可以使用戶實現對工作區最大限度的控制。4.2.2 Dreamweaver CS4的面板【插入】面板【數據庫】面板【文件】面板4.2 Dreamweaver CS4的工

38、作環境屬性面板 【屬性】面板顯示了在文檔窗口中所選中元素的屬性，并允許用戶在屬性面板直接對元素屬性進行修改。 在【屬性】面板的右下角，有一個三角形標記，用戶可根據三角形標記的向下/向上指向，擴展/折疊“屬性”面板。4.2.2 Dreamweaver CS4的面板擴展的【屬性】面板折疊的【屬性】面板謝謝！網站建設與網頁設計第五章 站點與文檔操作說明：本章節中的具體操作步驟參見書籍的對應章節。第五章 站點與文檔操作5.1 規劃站點結構5.3 站點管理5.2 創建本地站點5.4 文檔操作5.1 規劃站點結構 站點是一系列文件的集合。本地站點是位于客戶端的網頁制作者所使用的文件夾。 作為一個網頁設計者

39、，應熟悉網頁設計流程，以便更好地規劃自己的工作。創建一個站點一般如以下步驟。對站點進行規劃，即必須明確用戶的站點準備向著哪個方向發展，提供什么服務。按照思路創建站點的基本構架。利用Dreamweaver可以再本地計算機上構建出整個站點的框架，對放置文檔的文件夾進行合理分類和命名。開始進行具體的網頁設計。在站點編輯完成后，需要將本地站點同位于Internet服務器上的遠程站點關聯起來，然后定期更新。5.1.1 規劃站點的步驟5.1 規劃站點結構 一個網站中包含大量的文檔、圖片和媒體（如Flash、音樂、視頻等）內容，如何對這些文件進行管理并規劃好站點結構是最為重要的。一個規劃好的餓網站將會讓人感

40、覺緊緊有條，同時對于使用者的日常網站操作（如頁面更新、改版等）也會更加輕松。 規劃站點要注意下面三個原則。將不同的文件進行分類，分別放置于單獨的文件夾中便于管理。在對文件或文件夾命名時需注意幾點。例如使用英文或漢語拼音作為文件或文件夾的名稱；名稱中不能包含空格等非法字符；命名應有明確意義，方便日后的管理等。合理安排各種類型的文件。一般來說，網站的圖片文件放置在根目錄下名為images的文件夾中；音樂文件放置在根目錄下名為music的文件夾中。5.1.2 規劃原則5.2 創建本地站點 網站制作是一個循序漸進的過程，隨著網站內容的豐富，站點目錄會逐步豐富起來。需要特別提醒的是看，一定要把本地站點中

41、使用的所有資源都存儲到站點目錄中。 下圖為建立后的本地根目錄。5.2.1 創建本地根目錄5.2 創建本地站點 下面為具體步驟中的截圖。5.2.2 使用基本向導創建站點5.2 創建本地站點 在Dreamweaver中完成具創建站點后，【文件】面板如下。5.2.2 使用基本向導創建站點5.2 創建本地站點 對于“高級”選項卡設置，主要是設置【本地信息】、【遠程信息】和【測試服務器】的參數。 在菜單欄中，選擇【站點】【新建站點】命令，打開【站點定義】對話框，單擊打開“高級”選項卡。5.2.3 使用“高級”選項卡設置站點5.3 創建本地站點 對一個已經創建好的站點，還可以更改站點布局、重新規劃站點、對

42、站點的信息進行編輯，也可以將站點從列表中刪除。若需要創建多個結構相同或相似的站點，還可以利用站點的復制功能。 在菜單欄中，選擇【站點】【管理站點】命令，打開【管理站點】對話框。單擊各按鈕，可進行相對應的操作。5.3.1 管理站點5.3 創建本地站點 在Dreamweaver中制作網頁，站點中的所有文件操作（如創建網頁、更改網頁名、刪除網頁等）一般都可在“文件”面板中進行。建立站點的文件夾結構 Dreamweaver中可以直接在站點中添加文件和文件夾。其他文件操作 在【文件】面板中，可以快速使用鼠標右鍵進行文件操作（如剪切、拷貝、刪除、復制等）。5.3.2 文件操作5.3 創建本地站點 利用站點

43、地圖，可以用圖形化的方式查看站點結構。 在【文件】面板的工具欄中單擊【展示以顯示本地和遠程站點】按鈕，打開站點管理窗口。5.3.3 站點視圖5.4 文檔操作 在Dreamweaver CS4中，新建文檔有幾種方式，這里介紹2中新建文件的方法。使用歡迎界面 啟動Dreamweaver CS4時，系統會自動打開歡迎界面。使用該界面可以快速執行一些常用操作，包括打開最近的項目、新建文件或站點、主要功能的使用等。使用【新建文檔】對話框 在Dreamweaver CS4打開后，在菜單欄中選擇【文件】【新建】命令，打開【新建文件】對話框。5.4.1 新建文檔5.4 文檔操作 下圖為【新建文檔】對話框。5.

44、4.1 新建文檔5.4 文檔操作 在Dreamweaver CS4中個，打開文檔的方法有2種：（1）鼠標左鍵雙擊“文件”面板中的相應文件；（2）執行【文件】【打開】命令。 Dreamweaver CS4可打開多種格式的文件，包括html、css、asp、xml等。5.4.2 打開文檔5.4 文檔操作 網頁中包含了一些基本元素，包括文本、圖像、表格、超鏈接、表單、多媒體對象等，它們構成了豐富多彩的網頁內容。 下圖為添加內容后的截圖。5.4.3 添加內容5.4 文檔操作 在Dreamweaver CS4中，使用菜單欄中的【文件】【保存】命令或者快捷鍵組合【Ctrl+S】進行操作的保存。 網頁制作過

45、程中，設計者為了了解網頁在瀏覽器中的顯示情況，經常需要預覽網頁。預覽網頁的方法有，使用菜單欄中的【文件】【在瀏覽器中預覽】【IExplorer】命令，也可使用【文檔】工具欄中的【在瀏覽器中預覽/調試】按鈕，或者快捷鍵【F12】鍵。在預覽網頁之前需要保存文檔。5.4.4 保存和預覽網頁5.4 文檔操作 Web頁面的頁面屬性包括頁面標題、背景圖像和背景顏色、文本格式、超鏈接顯示效果、頁邊距等。 設置頁面屬性，使用菜單欄中的【修改】【頁面屬性】命令或者快捷鍵組合【Ctrl+J】。在該對話框的【分類】列表框中包括【外觀（CSS）】、【外觀（HTML）】、【鏈接（CSS）】、【標題（CSS）】、【標題/

46、編碼】和【跟蹤圖像】6個分類，5.4.5 設置頁面屬性謝謝！網站建設與網頁設計第六章 文本編輯與格式化說明：本章節中的具體操作步驟參見書籍的對應章節。第六章 文本編輯與格式化6.1 文本編輯6.2 文本格式化6.1 文本編輯 文本元素是Web頁面內容的基本表現形式，它通常被放置于網頁中的行、段落、表單、AP Div元素、Div標簽等HTML標簽中。使用CSS樣式可以對網頁中的文本格式化，從而使文本整齊、美觀地顯示在Web頁面中。在Dreamweaver CS4中，使用“文本”工具欄，可以快速地插入各種類型的文本。要應用“文本”工具欄，先打開“插入”面板，然后拖動該面板至“文檔”窗口頂部位置，可

47、以將“插入”面板更改為“插入”工具欄，如下圖。6.1.1 文本基本操作6.1 文本編輯 在Dreamweaver CS4中，文檔窗口進行輸入文本是非常簡單的，其輸入方式與其他辦公軟件中的文本輸入方式類似，一種是直接在插入點輸入文本，一種是復制、粘貼準備好的文本，還有一種是導入其它格式的文本，之后就可以進行各種文本編輯活動，如查找、替換等。 在Dreamweaver CS4的文檔窗口中編輯文本，可使用菜單欄【編輯】命令。一般步驟：先選取所需文本，然后執行【編輯】菜單中的相應命令。在文檔窗口中，一般使用的文本編輯的基本操作有以下幾項。按住鼠標左鍵不放，在文本上拖動鼠標，選取相應的文本。選取文本后，

48、點擊【Backspace】鍵或【Delete】鍵，可刪除文本。選擇【編輯】菜單中相應命令，可執行的操作有剪切、拷貝、粘貼、查找與替換等。6.1.1 文本基本操作6.1 文本編輯 在制作Web頁面過程中，可能需要輸入一些特殊字符，例如“￥”（人民幣符號）、（版權符號）等。這些特殊字符可在網頁代碼設計視圖中直接輸入代碼，例如，版權符號表示為“©；”，空格表示為“ ；”。 在文檔中使用特殊字符，可以通過插入字符的方式完成輸入,下面為操作截圖。6.1.2 輸入特殊字符6.1 文本編輯 Web頁面中一般還包含一些HTML元素，如日期、水平線、注釋等。這類元素也可通過插入欄中的按鈕添加。

49、水平線對于信息組織很有用，在Web頁面中，可以使用一條或多條水平線來可視化分隔文本和對象，是段落更分明和層次感；日期元素的插入可以方便用戶對于時間的處理，每次保存文件都會自動更新插入的日期。 6.1.3 插入HTML元素6.1 文本編輯 插入水平線的網頁效果如下圖所示。 6.1.3 插入HTML元素6.2 文本格式化 文本格式主要包括段落格式和字符格式兩個方面。段落是具有統一樣式的一段文本，在文檔窗口中輸入文本后，點擊【Enter】鍵就會產生一個段落（HTML對應標簽）。 Web頁面中的段落文本格式主要包括文本行、標題和列表格式。設置文本行使用換行符；設置標題或列表格式，使用屬性檢測器中的【格

50、式】框進行操作。下圖為段落格式設置后的截圖。6.2.1 段落格式6.2 文本格式化6.2.2 字符格式 字符是組成段落的基本元素，它包括字符的樣式、字體、字號、顏色等。 在網頁中要修飾文本主要靠設置字符格式來實現。在Dreamweaver CS4中，使用屬性檢查器為文本添加CSS樣式來設置字符格式。完成字符格式設置后的效果如下圖所示。謝謝！網站建設與網頁設計第七章 超鏈接說明：本章節中的具體操作步驟參見書籍的對應章節。第七章 超鏈接7.1 認識超鏈接7.2 創建超鏈接7.3 管理鏈接7.1 認識超鏈接 WWW是由千千萬萬個網站組成的，而網站是由許多網頁組成的，網頁之間通常又是通過超鏈接方式相互

51、建立關聯的，所以超鏈接是Web的靈魂。超鏈接的應用廣泛，利用它不僅可以鏈接到其他網頁，還可以鏈接到網頁元素等。 超鏈接是網頁中最重要的元素。在Dreamweaver CS4中，可以將Web頁面中的任何文字及任意位置的圖片設置為超鏈接。7.1 認識超鏈接 Web頁面中的超鏈接可以根據鏈接目標文件的不同，分為頁面鏈接（鏈接到單個網頁）、電子郵件鏈接（鏈接到一個電子郵件地址，單擊會打開客服端電子郵件程序）、錨記鏈接（鏈接到網頁上某一個具體位置）、下載鏈接（鏈接到一個不能有瀏覽器直接打開的文件，從而形成下載效果）等。 Web頁面中的超鏈接還可以根據鏈接源的不同，分為文字鏈接、圖像鏈接、對象鏈接（如fl

52、ash）等。例如下面的網頁。7.1.3 超鏈接的分類7.2 創建超鏈接 在Dreamweaver CS4中可以創建各種超鏈接，并且在進行本地站點內移動或者重命名文檔時，依然可以自動更新指向文件的鏈接。Dreamweaver中，通常使用文檔相對URL創建指定站點中其他網頁的鏈接。 在Dreamweaver CS4中，可以隨時隨地在所需的位置創建各種超鏈接，并且可以通過多種方法來創建。在【屬性】面板中創建超鏈接 下圖為操作截圖。7.2.1 超鏈接的基本操作7.2 創建超鏈接使用菜單命令創建超鏈接 使用菜單命令創建超鏈接的方法也很簡單，選中要創建超鏈接的對象，使用【插入】【超級鏈接】命令，打開【超級

53、鏈接】對話框，在該對話框設置相應選項。使用【指向文件】圖標創建超鏈接 先選取要創建超鏈接的對象，單擊屬性檢查器中的【指向文件】按鈕，然后拖曳鼠標在【文件】面板，將鼠標指向超鏈接要跳轉的網頁文檔或文件上，隨后釋放鼠標左鍵，即完成鏈接的創建。 如果要取消或者修改超鏈接，也應該首先選擇相應的網頁對象，然后將屬性檢查器中的【鏈接（L）】文本框中的鏈接地址刪除或者修改即可。7.2.1 超鏈接的基本操作7.2 創建超鏈接 在對超鏈接有一定認識的基礎上，將分類介紹各種超鏈接的創建方法，主要包括頁面鏈接、文件下載鏈接、E-mail鏈接、瞄記鏈接。頁面鏈接 頁面鏈接是指在同一站點中利用網頁對象指向其他網頁和文件

54、的超鏈接，單擊這種超鏈接時將會跳轉到鏈接的相應網頁或顯示相應文件。 創建頁面鏈接需要創建2個網頁文件，一個是超鏈接所在的網頁，另一個是跳轉頁面。文件下載鏈接 如果超鏈接的目標文件是瀏覽器中不能直接顯示的文件格式（例如壓縮文件.rar文件等），那么單擊該超鏈接時將彈出【文件下載】對話框，提示瀏覽者下載文件。7.2.2 超鏈接的應用7.2 創建超鏈接E-mail鏈接 E-mail鏈接就是單擊該超鏈接時，系統會自動啟動客戶端電子郵件程序（如Outlook Express或Gmail等）并打開一個空白通訊窗口，方便訪問者撰寫電子郵件。瞄記鏈接 瞄記鏈接又稱為頁面內超鏈接，即對頁面的某個特定區域命名（即

55、是命名錨記），利用超鏈接打開目標文檔時，直接跳轉到相應的命名位置。7.2.2 超鏈接的應用7.3 管理鏈接 在Dreamweaver中，使用站點地圖可以直觀顯示網站中的超鏈接關系。具體在之前的第五章中有介紹。7.3.1 使用站點地圖7.3.2 使用鏈接檢測器 在制作網站過程中如需要隨時了解站點的超級鏈接實際情況，則可使用Dreamweaver提供的【鏈接檢查器】工具，以提高工作效率。結果會顯示在【鏈接檢查器】選項卡中的【結果】面板，如下圖所示。謝謝！網站建設與網頁設計第八章 使用圖像和多媒體說明：本章節中的具體操作步驟參見書籍的對應章節。第八章 使用圖像和多媒體8.1 圖像格式基礎8.2 插入

56、圖像8.3 處理圖像8.4 使用Flash動畫8.5 使用聲音與視頻8.1 圖像格式基礎 圖像和多媒體是網頁上最常用的對象之一，制作精美的圖像和多媒體文件可以大大增加網頁的視覺效果。圖像和多媒體文件所蘊含的信息量對于網頁而言愈加重要。 圖像是網頁中不可缺少的組成元素。在Dreamweaver CS4中，可以Web頁面中插入圖像，并利用軟件自帶的功能設置各種圖像效果，例如導航欄、鏈接和鼠標經過效果等。 實際上，雖然計算機支持多種圖像格式，但由于網絡帶寬和瀏覽器的限制，在Web頁面上常用的圖像格式有3種：JPEG（JPG）、GIF和PNG，它們都是位圖。 注意：位圖，亦稱為點陣圖像或繪制圖像，是由

57、稱作像素的單個點組成的。放大位圖，可以看見賴以構成整個圖像的無數單個方塊。處理位圖時要著重考慮分辨率，一般位圖編輯軟件有Photoshop和Fireworks。8.1.1 圖像格式介紹8.1 圖像格式基礎 圖像雖然會導致網頁下載速度緩慢，但是如果合理安排使用它們，可以形成獨特的網站風格。 在Web頁面的圖像使用過程中，通常要考慮下面3個問題。文件的大小 為了保證網頁的流暢性，文件可以從兩個方面來處理：1）注意圖像所具有的像素大?。?）對正確的格式使用適當的優化處理。圖像的數量和質量 為了網頁文件的下載速度，對于圖像的質量問題，可以從兩個方面來處理：1）注意圖像的分辨率；2）使用合適的優化方法。

58、動畫的使用 合適的動畫，才會對整個Web頁面起到畫龍點睛的作用。反之，如果使用設計不合理的動畫，很可能會像劣質的電視廣告一樣，不僅沒有吸引瀏覽者，而且起到反作用。8.1.2 圖像使用原則8.2 插入圖像 一般來說，站點中的圖像最好集中存放到某個文件夾中。習慣上將圖像保存到站點根目錄下的“images”文件夾中。 圖像可被添加到Web頁面中的段落、表單、Div標簽等HTML標簽內。一般使用Dreamweaver中【插入】欄中的【常用】類別中的【圖像】按鈕，添加圖像。下圖為添加圖像操作的截圖。8.2.1 添加圖像8.2 插入圖像 在為Web頁面添加圖像之后，可以使用屬性檢查器設置屬性。圖像屬性檢查

59、器如下圖所示。8.2.2 圖像屬性 一般來說，圖像屬性常用的是源文件、鏈接、替換等，其他屬性通常不需要修改。如果要修改圖像其他的屬性（如“對齊”、“邊框”或者“邊距”屬性等），可使用為圖像添加CSS樣式的方式進行修飾，具體介紹見后面章節。8.3 處理圖像 在Web頁面制作過程中，有時需要對圖像進行一系列的處理，例如修改圖像的尺寸、對圖像進行優化和導出等。 Dreamweaver CS4集成了Fireworks的基本圖像編輯技術，可以不用借助外部圖像編輯器直接對圖像進行修剪、重新取樣、調整圖像的亮點和對比度以及銳化圖像等操作。 注意：使用內部圖像編輯器（即使用Dreamweaver的圖像編輯功能

60、）僅適用于兩種圖像文件格式（JPEG和GIF）。在進行圖像處理之前，最好制作一個圖像文件的副本，保存好原始圖像。在處理圖像時，可以使用【編輯】【撤銷】命令恢復原始圖像。剪裁圖像重新抽樣調整圖像的亮點和對比度銳化8.3.1 使用內部圖像編輯器8.3 處理圖像 對于Dreamweaver CS4文檔中的圖像，也可以使用外部圖像編輯器來編輯，在外部編輯器中編輯圖像后，保存并返回Dreamweaver時，網頁文檔窗口中的圖像也隨之同步更新。一般使用的外部圖像編輯器有Fireworks、Photoshop等圖像編輯軟件。下圖為操作中的截圖。8.3.2 使用外部圖像編輯器8.4 使用Flash動畫 目前，