網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作課件整套電子教案

1、網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)第一章 基礎(chǔ)知識(shí)網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)普通高等教育“十二五”規(guī)劃教育第一章 基礎(chǔ)知識(shí)1.1 網(wǎng)站的基礎(chǔ)知識(shí)1.2 網(wǎng)頁(yè)的基礎(chǔ)知識(shí)1.3 網(wǎng)站與網(wǎng)頁(yè)的關(guān)系與設(shè)計(jì)原則1.1 網(wǎng)站的基礎(chǔ)知識(shí)1.1.1 Internet概述什么是InternetInternet即國(guó)際計(jì)算機(jī)互聯(lián)網(wǎng)，在中國(guó)也稱(chēng)為“因特網(wǎng)”或“萬(wàn)維網(wǎng)”，是由符合TCP/IP等網(wǎng)絡(luò)協(xié)議的網(wǎng)絡(luò)組成的互聯(lián)網(wǎng)，是目前全世界最大的網(wǎng)絡(luò)，包含豐富多彩的信息，并提供方便快捷的服務(wù)。Internet的組成服務(wù)器：網(wǎng)絡(luò)中能對(duì)其它機(jī)器提供某些服務(wù)的計(jì)算機(jī)系統(tǒng)?？蛻?hù)機(jī)：用戶(hù)能夠在網(wǎng)絡(luò)環(huán)境匯總工作、訪問(wèn)網(wǎng)絡(luò)共享資源的計(jì)算機(jī)。網(wǎng)絡(luò)通信協(xié)議：網(wǎng)絡(luò)之間溝

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

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

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

5、多少。兩者之間有著密切的關(guān)系，特別是后者對(duì)前者的影響有時(shí)起著決定性的作用。1.1 網(wǎng)站的基礎(chǔ)知識(shí)1.1.4 網(wǎng)站的傳播模式和特點(diǎn)網(wǎng)站傳播模式信息的傳播者與信息接收者之間的單向傳遞關(guān)系變?yōu)殡p向互動(dòng)關(guān)系。傳播內(nèi)容不斷豐富，形式多樣化。網(wǎng)站傳播特點(diǎn)實(shí)時(shí)性：通過(guò)減少傳統(tǒng)媒體在信息產(chǎn)品制作過(guò)程中的環(huán)節(jié)，提高信息的時(shí)效性。全球性：互聯(lián)網(wǎng)媒體打破了傳統(tǒng)媒體的傳播范圍的地域限制，其受眾通過(guò)互聯(lián)網(wǎng)遍及全世界。交互性：網(wǎng)站可以做到雙向、多向的交流，在點(diǎn)點(diǎn)互通的情況下，傳者與受者之間沒(méi)有明顯的界線，傳者既發(fā)布訊息，又同時(shí)接受訊息。1.1 網(wǎng)站的基礎(chǔ)知識(shí)1.1.5 網(wǎng)站分類(lèi)按服務(wù)性質(zhì)分類(lèi)主要包括門(mén)戶(hù)網(wǎng)站、游戲網(wǎng)站、搜

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

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

8、：Adobe公司旗下最為出名的圖像處理軟件之一，集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意，圖像輸入與輸出于一體的圖形圖像處理軟件。1.2 網(wǎng)頁(yè)的基礎(chǔ)知識(shí)1.2.3 網(wǎng)頁(yè)制作工具素材處理工具Flash：應(yīng)用于互聯(lián)網(wǎng)網(wǎng)頁(yè)的矢量動(dòng)畫(huà)設(shè)計(jì)軟件。Fireworks：Macromedia公司發(fā)布的一款專(zhuān)為網(wǎng)絡(luò)圖形設(shè)計(jì)的圖形編輯軟件，與 Macromedia Dreamweaver和 Macromedia Flash共同構(gòu)成的集成工作流程可以使用戶(hù)創(chuàng)建并優(yōu)化圖像，同時(shí)又能避免由于進(jìn)行Roundtrip 編輯而丟失信息或浪費(fèi)時(shí)間。網(wǎng)頁(yè)上傳工具友好的用戶(hù)界面，穩(wěn)定的傳輸速度，LeapFTP 與FlashFXP

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

10、個(gè)Web頁(yè)面中連接多個(gè)對(duì)象，與Web客戶(hù)交互作用。1.2 網(wǎng)頁(yè)的基礎(chǔ)知識(shí)1.2.4 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言XML與XSLTXML即可擴(kuò)展標(biāo)記語(yǔ)言，它與HTML一樣，都是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言。但XML與HTML又是不同的。XML是用來(lái)存儲(chǔ)數(shù)據(jù)的，重在數(shù)據(jù)本身；而HTML是用來(lái)定義數(shù)據(jù)的，重在數(shù)據(jù)的顯示模式。XSL是指可擴(kuò)展樣式表語(yǔ)言，是一種用于以可讀格式呈現(xiàn)XML數(shù)據(jù)的語(yǔ)言。xsl是一種標(biāo)記語(yǔ)言，表示如何將xml文檔的內(nèi)容裝換成另一種形式的文檔。通過(guò)為xml寫(xiě)xsl來(lái)使得xml顯示成不同的格式。1.3 網(wǎng)站與網(wǎng)頁(yè)的關(guān)系與設(shè)計(jì)原則1.3.1 網(wǎng)站與網(wǎng)頁(yè)的關(guān)系網(wǎng)頁(yè)是網(wǎng)站的信息載體網(wǎng)站是一組相關(guān)網(wǎng)頁(yè)的集合，即若干個(gè)

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

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

13、色彩相當(dāng)重要。不同的色彩搭配產(chǎn)生不同的視覺(jué)效果，同時(shí)，網(wǎng)頁(yè)的色彩處理一定要總體協(xié)調(diào)，使整體的色彩效果和諧。更新維護(hù)方便訪問(wèn)者希望看到新鮮的內(nèi)容，沒(méi)有人對(duì)過(guò)時(shí)的信息感興趣，所以網(wǎng)站的信息一定要注意及時(shí)性，時(shí)刻保持新鮮感是很重要的一項(xiàng)工作內(nèi)容。謝謝！網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)第二章 網(wǎng)站規(guī)劃與設(shè)計(jì)第二章 網(wǎng)站規(guī)劃與設(shè)計(jì)2.1 網(wǎng)站規(guī)劃2.2 網(wǎng)站設(shè)計(jì)2.1 網(wǎng)站規(guī)劃2.1.1 網(wǎng)站規(guī)劃概述網(wǎng)站設(shè)計(jì)首先要做好規(guī)劃工作，雖然不同類(lèi)型的網(wǎng)站規(guī)劃流程有所區(qū)別，但就整體上來(lái)說(shuō)還是具有一定的共性，網(wǎng)站規(guī)劃的流程如右圖所示。2.1 網(wǎng)站規(guī)劃2.1.2 方案提出網(wǎng)站建設(shè)方案一般要從建站目的、網(wǎng)站功能要求、網(wǎng)站定位、確定網(wǎng)

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

15、統(tǒng)分析方法。 對(duì)網(wǎng)站的建設(shè)的可行性分析報(bào)告的編寫(xiě)前，要從客觀、公正的立場(chǎng)進(jìn)行調(diào)查研究，可以從以下幾個(gè)方面進(jìn)行分析說(shuō)明：技術(shù)可行性分析。從技術(shù)角度分析建站的可能性和必要性。運(yùn)營(yíng)可行性分析。對(duì)網(wǎng)站運(yùn)營(yíng)情況進(jìn)行分析和預(yù)測(cè)。成本可行性分析。對(duì)維持網(wǎng)站正常運(yùn)行及相關(guān)費(fèi)用的預(yù)測(cè)分析。其他可行性分析。對(duì)與網(wǎng)站建設(shè)有關(guān)的問(wèn)題進(jìn)行可行性分析。2.1 網(wǎng)站規(guī)劃2.1.4 制定資源分配計(jì)劃人力資源分配 建站工作都需要由一個(gè)項(xiàng)目小組來(lái)完成，小組成員包括系統(tǒng)管理人員、網(wǎng)站結(jié)構(gòu)規(guī)劃人員、網(wǎng)頁(yè)美工設(shè)計(jì)人員、主頁(yè)制作人員和網(wǎng)站程序開(kāi)發(fā)人員。技術(shù)資源分配 網(wǎng)站建設(shè)的技術(shù)資源包括硬件資源、軟件資源、技術(shù)資料、文檔資料等內(nèi)容。資金

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

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

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

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

20、首頁(yè)或者主頁(yè)面）、二級(jí)頁(yè)面和三級(jí)頁(yè)面之間的結(jié)構(gòu)關(guān)系，具體如下圖所示。2.2 網(wǎng)站設(shè)計(jì)2.2.3 網(wǎng)站形象的藝術(shù)設(shè)計(jì)形象定位根據(jù)商品進(jìn)行形象定位根據(jù)市場(chǎng)消費(fèi)群體進(jìn)行定位標(biāo)志形象 設(shè)計(jì)制作一個(gè)網(wǎng)站的標(biāo)志(logo)，就如同商標(biāo)一樣，logo是一個(gè)站點(diǎn)特色和內(nèi)涵的集中體現(xiàn)。下面是一些知名網(wǎng)站的標(biāo)志。2.2 網(wǎng)站設(shè)計(jì)知名網(wǎng)站的LOGO2.2 網(wǎng)站設(shè)計(jì)2.2.3 網(wǎng)站形象的藝術(shù)設(shè)計(jì)整體形象 網(wǎng)站的整體形象主要包括兩個(gè)方面：網(wǎng)站之間的整體一致性和整體形象的一致性。 對(duì)于一些跨地域公司的網(wǎng)站而言，它們要面對(duì)的是具有不同語(yǔ)言、文化風(fēng)格的人群，這時(shí)網(wǎng)站的風(fēng)格、形象等就會(huì)有不同。但對(duì)同一網(wǎng)站而言，不論語(yǔ)言、風(fēng)格、

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

22、的網(wǎng)站大多數(shù)是以服務(wù)為主的企業(yè)，以通過(guò)網(wǎng)站來(lái)樹(shù)立企業(yè)形象，提供相關(guān)的服務(wù)信息為建站目的。綜合訴求當(dāng)單一的理性訴求或者感性訴求都不能準(zhǔn)確的向用戶(hù)傳達(dá)網(wǎng)站的目的、展示企業(yè)產(chǎn)品或者服務(wù)時(shí)，就需要將這兩種訴求結(jié)合起來(lái)，在網(wǎng)站的不同部分采用不同的方法進(jìn)行設(shè)計(jì)。謝謝！網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)第三章 網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)第三章 網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)3.1網(wǎng)頁(yè)設(shè)計(jì)注意的問(wèn)題3.3 網(wǎng)頁(yè)的色彩3.4 網(wǎng)頁(yè)元素設(shè)計(jì)3.3 網(wǎng)頁(yè)的構(gòu)圖3.1 網(wǎng)頁(yè)設(shè)計(jì)注意的問(wèn)題3.1.1 瀏覽器 在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，面臨最大的挑戰(zhàn)就是因?qū)Σ煌臑g覽器、操作系統(tǒng)和硬件平臺(tái)，雖然大多數(shù)HTML元素都可以在瀏覽器中顯示并穩(wěn)定的運(yùn)行，但是在執(zhí)行某些腳本語(yǔ)言時(shí)，不同

23、的瀏覽器會(huì)表現(xiàn)出不同的特點(diǎn)。瀏覽器類(lèi)型、版本與網(wǎng)站訪問(wèn)者之間的關(guān)系 不同瀏覽器對(duì)不同網(wǎng)頁(yè)的顯示效果是不同的。同一瀏覽器的不同版本對(duì)同一頁(yè)面的顯示效果也有差距。因此在設(shè)計(jì)網(wǎng)頁(yè)時(shí)要充分考慮不同瀏覽器和瀏覽器不同版本之間的差距。瀏覽器與網(wǎng)頁(yè)制作技術(shù)之間的關(guān)系 網(wǎng)頁(yè)設(shè)計(jì)時(shí)要選用正確的技術(shù)，避免不同瀏覽器對(duì)某些技術(shù)的不支持的情況出現(xiàn)。3.1 網(wǎng)頁(yè)設(shè)計(jì)注意的問(wèn)題3.1.1 瀏覽器網(wǎng)頁(yè)兼容性問(wèn)題在設(shè)計(jì)網(wǎng)頁(yè)時(shí)需要考慮不同瀏覽器之間的區(qū)別，使用的功能也要考慮到瀏覽器之間的兼容性。3.1.2 顯示器對(duì)于顯示器而已，主要考慮分辨率問(wèn)題和顏色問(wèn)題。3.2 網(wǎng)頁(yè)的色彩3.2.1 色彩基礎(chǔ)在任何設(shè)計(jì)中，色彩對(duì)視覺(jué)的刺激起

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

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

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

27、色彩搭配方案。 隨著網(wǎng)頁(yè)制作經(jīng)驗(yàn)的積累，對(duì)于網(wǎng)頁(yè)用色會(huì)出現(xiàn)從單色-五彩繽紛-標(biāo)準(zhǔn)色-單色的一個(gè)制作趨勢(shì)。使用非色彩技術(shù)資源分配 這個(gè)主要是對(duì)顏色搭配有一定經(jīng)驗(yàn)的設(shè)計(jì)者來(lái)說(shuō)。3.3 網(wǎng)頁(yè)的構(gòu)圖3.3.1 點(diǎn)、線、面 網(wǎng)頁(yè)是一幅特殊的畫(huà)面，需要通過(guò)一定的方式、方法，將不同的視覺(jué)元素安排好，才能形成一幅完整、協(xié)調(diào)的圖像。 點(diǎn)、線、面是構(gòu)成空間視覺(jué)的基本元素，是表現(xiàn)視覺(jué)形象的基本設(shè)計(jì)語(yǔ)言。任何視覺(jué)形象都是由這三者構(gòu)成的。網(wǎng)頁(yè)設(shè)計(jì)實(shí)際上就是如何合理的處理三者之間的關(guān)系。3.3.1 點(diǎn)、線、面 一個(gè)好的網(wǎng)頁(yè)布局應(yīng)該給人一種安定、平穩(wěn)的感覺(jué)，它不僅表現(xiàn)在色彩協(xié)調(diào),還包括文字、圖像等要素的空間占用上分布均勻，

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

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

30、 網(wǎng)頁(yè)布局中有幾種基本的布局類(lèi)型。左右對(duì)稱(chēng)結(jié)構(gòu)布局，如右圖所示。3.3 網(wǎng)頁(yè)的構(gòu)圖3.3.3 網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局類(lèi)型“同”字型結(jié)構(gòu)布局，如下圖所示。3.3 網(wǎng)頁(yè)的構(gòu)圖3.3.3 網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局類(lèi)型“回”字型結(jié)構(gòu)布局，如下圖所示。3.3 網(wǎng)頁(yè)的構(gòu)圖3.3.3 網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局類(lèi)型“匡”字型結(jié)構(gòu)布局，如下圖所示。3.3 網(wǎng)頁(yè)的構(gòu)圖3.3.3 網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局類(lèi)型自由式結(jié)構(gòu)布局，如下圖所示。3.3 網(wǎng)頁(yè)的構(gòu)圖3.3.3 網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局類(lèi)型“另類(lèi)”結(jié)構(gòu)布局，如下圖所示。3.3 網(wǎng)頁(yè)的構(gòu)圖3.3.4 構(gòu)圖實(shí)例 在網(wǎng)頁(yè)布局中，最常見(jiàn)的布局形式是根據(jù)頁(yè)面大大小，將頁(yè)面分成不同的欄或列。根據(jù)分欄的多少可將構(gòu)

31、圖分為單欄式、雙欄式、三欄式和多欄式。單欄式 具體如右圖所示。3.3 網(wǎng)頁(yè)的構(gòu)圖3.3.4 構(gòu)圖實(shí)例雙欄式 具體如右圖所示。3.3 網(wǎng)頁(yè)的構(gòu)圖3.3.4 構(gòu)圖實(shí)例三欄式 具體如右圖所示。3.3 網(wǎng)頁(yè)的構(gòu)圖3.3.4 構(gòu)圖實(shí)例多欄式 具體如右圖所示。3.4 網(wǎng)頁(yè)元素設(shè)計(jì)3.4.1 標(biāo)志設(shè)計(jì) LOGO是網(wǎng)站形象的重要體現(xiàn)。一個(gè)好的LOGO往往會(huì)反映網(wǎng)站及制作者的某些信息，特別是對(duì)一個(gè)商業(yè)網(wǎng)站來(lái)話，我們可以從中基本了解到這個(gè)網(wǎng)站的類(lèi)型，或者內(nèi)容。標(biāo)志的表現(xiàn)形式標(biāo)識(shí)圖案標(biāo)識(shí)文字組合標(biāo)志3.4 網(wǎng)頁(yè)元素設(shè)計(jì)3.4.1 標(biāo)志設(shè)計(jì)標(biāo)志的設(shè)計(jì)方法 網(wǎng)頁(yè)標(biāo)志的設(shè)計(jì)一般有三種方法，一是直接以網(wǎng)站網(wǎng)址作為標(biāo)志，如智

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

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

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

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

36、、屬性面板等元素。4.2.1 Dreamweaver CS4的界面4.2 Dreamweaver CS4的工作環(huán)境菜單欄 菜單欄位于標(biāo)題欄的下方，提供了Dreamweaver CS4的所有命令，包括了以下10個(gè)菜單選項(xiàng)：【文件】、【編輯】、【查看】、【插入】、【修改】、【格式】、【命令】、【站點(diǎn)】、【窗口】、【幫助】。4.2.1 Dreamweaver CS4的界面工具欄 Dreamweaver中的工具欄有四種模式：“樣式呈現(xiàn)”工具欄、“文檔”工具欄、“標(biāo)準(zhǔn)”工具欄和“編碼”工具欄。4.2 Dreamweaver CS4的工作環(huán)境狀態(tài)欄 狀態(tài)欄位于文檔窗口底部，它是用戶(hù)需要關(guān)注的區(qū)域，包括標(biāo)簽

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

38、作環(huán)境屬性面板 【屬性】面板顯示了在文檔窗口中所選中元素的屬性，并允許用戶(hù)在屬性面板直接對(duì)元素屬性進(jìn)行修改。 在【屬性】面板的右下角，有一個(gè)三角形標(biāo)記，用戶(hù)可根據(jù)三角形標(biāo)記的向下/向上指向，擴(kuò)展/折疊“屬性”面板。4.2.2 Dreamweaver CS4的面板擴(kuò)展的【屬性】面板折疊的【屬性】面板謝謝！網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)第五章 站點(diǎn)與文檔操作說(shuō)明：本章節(jié)中的具體操作步驟參見(jiàn)書(shū)籍的對(duì)應(yīng)章節(jié)。第五章 站點(diǎn)與文檔操作5.1 規(guī)劃站點(diǎn)結(jié)構(gòu)5.3 站點(diǎn)管理5.2 創(chuàng)建本地站點(diǎn)5.4 文檔操作5.1 規(guī)劃站點(diǎn)結(jié)構(gòu) 站點(diǎn)是一系列文件的集合。本地站點(diǎn)是位于客戶(hù)端的網(wǎng)頁(yè)制作者所使用的文件夾。 作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)者

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

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

41、使用的所有資源都存儲(chǔ)到站點(diǎn)目錄中。 下圖為建立后的本地根目錄。5.2.1 創(chuàng)建本地根目錄5.2 創(chuàng)建本地站點(diǎn) 下面為具體步驟中的截圖。5.2.2 使用基本向?qū)?chuàng)建站點(diǎn)5.2 創(chuàng)建本地站點(diǎn) 在Dreamweaver中完成具創(chuàng)建站點(diǎn)后，【文件】面板如下。5.2.2 使用基本向?qū)?chuàng)建站點(diǎn)5.2 創(chuàng)建本地站點(diǎn) 對(duì)于“高級(jí)”選項(xiàng)卡設(shè)置，主要是設(shè)置【本地信息】、【遠(yuǎn)程信息】和【測(cè)試服務(wù)器】的參數(shù)。 在菜單欄中，選擇【站點(diǎn)】【新建站點(diǎn)】命令，打開(kāi)【站點(diǎn)定義】對(duì)話框，單擊打開(kāi)“高級(jí)”選項(xiàng)卡。5.2.3 使用“高級(jí)”選項(xiàng)卡設(shè)置站點(diǎn)5.3 創(chuàng)建本地站點(diǎn) 對(duì)一個(gè)已經(jīng)創(chuàng)建好的站點(diǎn)，還可以更改站點(diǎn)布局、重新規(guī)劃站點(diǎn)、對(duì)

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

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

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

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

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

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

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

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

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

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

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

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

54、的超鏈接，單擊這種超鏈接時(shí)將會(huì)跳轉(zhuǎn)到鏈接的相應(yīng)網(wǎng)頁(yè)或顯示相應(yīng)文件。 創(chuàng)建頁(yè)面鏈接需要?jiǎng)?chuàng)建2個(gè)網(wǎng)頁(yè)文件，一個(gè)是超鏈接所在的網(wǎng)頁(yè)，另一個(gè)是跳轉(zhuǎn)頁(yè)面。文件下載鏈接 如果超鏈接的目標(biāo)文件是瀏覽器中不能直接顯示的文件格式（例如壓縮文件.rar文件等），那么單擊該超鏈接時(shí)將彈出【文件下載】對(duì)話框，提示瀏覽者下載文件。7.2.2 超鏈接的應(yīng)用7.2 創(chuàng)建超鏈接E-mail鏈接 E-mail鏈接就是單擊該超鏈接時(shí)，系統(tǒng)會(huì)自動(dòng)啟動(dòng)客戶(hù)端電子郵件程序（如Outlook Express或Gmail等）并打開(kāi)一個(gè)空白通訊窗口，方便訪問(wèn)者撰寫(xiě)電子郵件。瞄記鏈接 瞄記鏈接又稱(chēng)為頁(yè)面內(nèi)超鏈接，即對(duì)頁(yè)面的某個(gè)特定區(qū)域命名（即

55、是命名錨記），利用超鏈接打開(kāi)目標(biāo)文檔時(shí)，直接跳轉(zhuǎn)到相應(yīng)的命名位置。7.2.2 超鏈接的應(yīng)用7.3 管理鏈接 在Dreamweaver中，使用站點(diǎn)地圖可以直觀顯示網(wǎng)站中的超鏈接關(guān)系。具體在之前的第五章中有介紹。7.3.1 使用站點(diǎn)地圖7.3.2 使用鏈接檢測(cè)器 在制作網(wǎng)站過(guò)程中如需要隨時(shí)了解站點(diǎn)的超級(jí)鏈接實(shí)際情況，則可使用Dreamweaver提供的【鏈接檢查器】工具，以提高工作效率。結(jié)果會(huì)顯示在【鏈接檢查器】選項(xiàng)卡中的【結(jié)果】面板，如下圖所示。謝謝！網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)第八章 使用圖像和多媒體說(shuō)明：本章節(jié)中的具體操作步驟參見(jiàn)書(shū)籍的對(duì)應(yīng)章節(jié)。第八章 使用圖像和多媒體8.1 圖像格式基礎(chǔ)8.2 插入

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

57、稱(chēng)作像素的單個(gè)點(diǎn)組成的。放大位圖，可以看見(jiàn)賴(lài)以構(gòu)成整個(gè)圖像的無(wú)數(shù)單個(gè)方塊。處理位圖時(shí)要著重考慮分辨率，一般位圖編輯軟件有Photoshop和Fireworks。8.1.1 圖像格式介紹8.1 圖像格式基礎(chǔ) 圖像雖然會(huì)導(dǎo)致網(wǎng)頁(yè)下載速度緩慢，但是如果合理安排使用它們，可以形成獨(dú)特的網(wǎng)站風(fēng)格。 在Web頁(yè)面的圖像使用過(guò)程中，通常要考慮下面3個(gè)問(wèn)題。文件的大小 為了保證網(wǎng)頁(yè)的流暢性，文件可以從兩個(gè)方面來(lái)處理：1）注意圖像所具有的像素大?。?）對(duì)正確的格式使用適當(dāng)?shù)膬?yōu)化處理。圖像的數(shù)量和質(zhì)量 為了網(wǎng)頁(yè)文件的下載速度，對(duì)于圖像的質(zhì)量問(wèn)題，可以從兩個(gè)方面來(lái)處理：1）注意圖像的分辨率；2）使用合適的優(yōu)化方法。

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

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

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