網(wǎng)頁設(shè)計(jì)與制作全冊課件完整

網(wǎng)頁設(shè)計(jì)與制作21世紀(jì)技能培訓(xùn)教程目錄第1章網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識1第2章Dreamweaver操作基礎(chǔ)第3章網(wǎng)頁中編輯文本第4章網(wǎng)頁中使用圖像234第5章網(wǎng)頁色彩基礎(chǔ)知識5目錄第6章網(wǎng)頁中插入多媒體6第7章網(wǎng)頁中使用超級鏈接第8章網(wǎng)頁中使用圖層第9章使用樣式表修飾內(nèi)容789第10章表單應(yīng)用基礎(chǔ)10目錄第11章用表格控制網(wǎng)頁布局11第12章用框架控制網(wǎng)頁布局第13章網(wǎng)頁腳本與網(wǎng)頁特效第14章應(yīng)用模板提高設(shè)計(jì)效率121314第15章網(wǎng)站發(fā)布與維護(hù)基礎(chǔ)15Thank

You

!第1章網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識主要內(nèi)容1.1網(wǎng)絡(luò)基礎(chǔ)知識11.2網(wǎng)站基礎(chǔ)知識1.3網(wǎng)頁設(shè)計(jì)語言介紹1.4網(wǎng)頁設(shè)計(jì)工具介紹2341.1網(wǎng)絡(luò)基礎(chǔ)知識互聯(lián)網(wǎng)互聯(lián)網(wǎng)：英文名稱為Internet，是一個由各種不同類型和規(guī)模、獨(dú)立運(yùn)行和管理的計(jì)算機(jī)網(wǎng)絡(luò)組成的全球性的大網(wǎng)絡(luò)?；ヂ?lián)網(wǎng)具有許多強(qiáng)大的功能，其中包括電子郵件（E-mail）、遠(yuǎn)程登錄（Telnet）、Web服務(wù)（WWW）、文件傳送（FTP）、域名服務(wù)（DNS）和電子論壇（BBS）等。1.1網(wǎng)絡(luò)基礎(chǔ)知識·

TCP/IP協(xié)議·TCP/IP是計(jì)算機(jī)網(wǎng)絡(luò)中最基本的通信協(xié)議。雖然從名字上看TCP/IP包括兩個協(xié)議：傳輸控制協(xié)議（TCP）和網(wǎng)際協(xié)議（IP），實(shí)際上它是一組協(xié)議的集合（常稱為TCP/IP協(xié)議族），TCP協(xié)議和IP協(xié)議只是保證數(shù)據(jù)傳輸?shù)膬蓚€最基本的協(xié)議。

TCP/IP協(xié)議族中還包括其它一些重要的協(xié)議，如：遠(yuǎn)程登錄（TELNET）、文件傳輸（FTP）和電子郵件（E-mail）等，這些協(xié)議協(xié)同完成計(jì)算機(jī)之間的數(shù)據(jù)交換。1.1網(wǎng)絡(luò)基礎(chǔ)知識·

IP地址·

Internet上的每臺計(jì)算機(jī)在通信之前必須指定一個地址，通過這個地址，才能確保數(shù)據(jù)從何處來，到何處去的傳輸過程。這個地址就是IP地址。每臺連到Internet上的計(jì)算機(jī)都必須有一個唯一的地址。IP地址為32位二進(jìn)制數(shù)組成。為了使用方便，用四個數(shù)字表示的十進(jìn)制表示形式。1.1網(wǎng)絡(luò)基礎(chǔ)知識查看IP地址相關(guān)知識子網(wǎng)掩碼默認(rèn)網(wǎng)關(guān)DNS服務(wù)器返回1.2網(wǎng)站基礎(chǔ)知識網(wǎng)頁網(wǎng)頁又稱“Web頁”，它是萬維網(wǎng)（World

WideWeb）的基本單位。網(wǎng)頁可分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁是相對動態(tài)網(wǎng)頁而言的，是指瀏覽器端與服務(wù)器端不發(fā)生交互行為的網(wǎng)頁。動態(tài)網(wǎng)頁中除了靜態(tài)網(wǎng)頁中的元素外，還包括一些應(yīng)用程序，這些應(yīng)用程序需要瀏覽器與服務(wù)器之間發(fā)生交互行為，而且應(yīng)用程序的執(zhí)行需要專門的應(yīng)用服務(wù)器負(fù)責(zé)完成。1.2網(wǎng)站基礎(chǔ)知識文本圖片導(dǎo)航欄網(wǎng)頁中常見元素動態(tài)元素網(wǎng)頁表格超鏈接表單框架1.2網(wǎng)站基礎(chǔ)知識網(wǎng)站網(wǎng)站就是在互聯(lián)網(wǎng)上一塊固定的面向全世界發(fā)布消息的地方。它由域名（也就是網(wǎng)站地址）和網(wǎng)站空間構(gòu)成。網(wǎng)站可分為：資訊類網(wǎng)站、交易類網(wǎng)站、互動游戲類網(wǎng)站、有償服務(wù)類網(wǎng)站、功能型網(wǎng)站、綜合類網(wǎng)站、辦公類網(wǎng)站。HTTP協(xié)議即超文本傳輸協(xié)議，用于傳輸超文本標(biāo)記語言寫的文件。通過這個協(xié)議，我們可以瀏覽網(wǎng)絡(luò)上的各種信息，看到豐富多彩的文字與圖片等多媒體信息。1.2網(wǎng)站基礎(chǔ)知識網(wǎng)站網(wǎng)站就是在互聯(lián)網(wǎng)上一塊固定的面向全世界發(fā)布消息的地方。它由域名（也就是網(wǎng)站地址）和網(wǎng)站空間構(gòu)成。網(wǎng)站可分為：資訊類網(wǎng)站、交易類網(wǎng)站、互動游戲類網(wǎng)站、有償服務(wù)類網(wǎng)站、功能型網(wǎng)站、綜合類網(wǎng)站、辦公類網(wǎng)站。HTTP協(xié)議即超文本傳輸協(xié)議，用于傳輸超文本標(biāo)記語言寫的文件。通過這個協(xié)議，我們可以瀏覽網(wǎng)絡(luò)上的各種信息，看到豐富多彩的文字與圖片等多媒體信息。FTPFTP是FileTransfer

Protocol（文件傳輸協(xié)議）的縮寫，用來在兩臺計(jì)算機(jī)之間互相傳送文件。

FTP分為主動式和被動式兩種：主動方式：客戶端首先向服務(wù)器發(fā)送連接請求，服務(wù)器接受連接，建立一條命令鏈路。傳送數(shù)據(jù)時(shí)，客戶端在命令鏈路上通知服務(wù)器端，由服務(wù)器主動發(fā)起連接，建立數(shù)據(jù)鏈路，完成數(shù)據(jù)傳送。被動方式：客戶端首先向服務(wù)器發(fā)送連接請求，服務(wù)器接受連接，建立一條命令鏈路。傳送數(shù)據(jù)時(shí)，服務(wù)器通過命令鏈路通知客戶端，由客戶端向服務(wù)器端發(fā)送連接請求，建立一條數(shù)據(jù)鏈路來傳送數(shù)據(jù)，完成數(shù)據(jù)傳輸。1.2網(wǎng)站基礎(chǔ)知識1.2網(wǎng)站基礎(chǔ)知識URLURL是Uniform

Resource

Location的縮寫，譯為

“統(tǒng)一資源定位符”。采用URL可以用一種統(tǒng)一的格式來描述各種信息資源，包括文件、服務(wù)器的地址和目錄等。HTML語言是一種基于標(biāo)記（所謂標(biāo)記，就是一些特殊的記號，用于識別網(wǎng)頁中的每個元素，如圖像就用<img>表示）格式的語言，可以直接由瀏覽器解釋執(zhí)行，不需要特別的編譯。1.2網(wǎng)站基礎(chǔ)知識·

Web服務(wù)工作原理①瀏覽器發(fā)送請求②服務(wù)器響應(yīng)請求返回1.3網(wǎng)頁設(shè)計(jì)語言介紹網(wǎng)頁設(shè)計(jì)語言HTML瀏覽器端語言服務(wù)器端語言DHTMLCSSJavascriptXMLJSPASP.NETASPCGIPHP返

回1.4網(wǎng)頁設(shè)計(jì)工具介紹FrontPageDreamweaverFireworksPhotoshopFlashFrontPage最強(qiáng)大之處是其站點(diǎn)管理功能。Dreamweaver支持

ActiveX、Java、Flash、Shockwave等特性Fireworks是專為網(wǎng)絡(luò)圖像設(shè)Javascript、計(jì)而開發(fā)；Photoshop用于比較復(fù)雜的圖象處理Flash圖形采用矢量技術(shù)，使得圖形保存的內(nèi)容十分簡單但又可以無限放大而不失真。返

回本章小結(jié)本章主要向讀者介紹了網(wǎng)頁設(shè)計(jì)相關(guān)的基礎(chǔ)知識，主要包括網(wǎng)絡(luò)的相關(guān)知識和網(wǎng)站的相關(guān)知識。這些知識都是網(wǎng)頁設(shè)計(jì)者必須掌握的入門知識，所以如果讀者不熟悉就不要跳過該章。對于網(wǎng)頁設(shè)計(jì)者，要熟悉網(wǎng)絡(luò)的基礎(chǔ)知識，網(wǎng)站的基礎(chǔ)知識，尤其是網(wǎng)站的基本工作原理，和網(wǎng)站設(shè)計(jì)的基本過程和方法，以及用于設(shè)計(jì)網(wǎng)站的基本工具，只有這樣，才能做到心中有數(shù)，不止于盲目開始。Thank

You

!第2章Dreamweaver操作基礎(chǔ)主要內(nèi)容2.1工作環(huán)境12.2創(chuàng)建站點(diǎn)2.3創(chuàng)建網(wǎng)頁2.4

HTML標(biāo)記基本結(jié)構(gòu)2342.5網(wǎng)站設(shè)計(jì)的基本思路52.1工作環(huán)境·

第一次運(yùn)行Dreamweaver的時(shí)候會出現(xiàn)圖2.1所示的選擇界面，可以根據(jù)需要選擇合適的工作環(huán)境。圖2.1工作區(qū)設(shè)置對話框2.1工作環(huán)境·

窗口結(jié)構(gòu)·Dreamweaver運(yùn)行后出現(xiàn)如圖2.2所示的界面，下面我們介紹一下Dreamweaver工作區(qū)的各個組成部分。圖2.2

Dreamweaver工作環(huán)境2.1工作環(huán)境·

菜單欄程序的所有功能基本上都能在菜單欄上實(shí)現(xiàn)，通過菜單可以進(jìn)行對象的任意操作與控制，菜單欄分為文件、編輯、查看、插入、修改、文本、命令、站點(diǎn)、窗口和幫助的等，使用起來非常方便。2.1工作環(huán)境·

插入欄插入欄包含用于創(chuàng)建和插入對象（如表格、層和圖像）的按鈕。這些按鈕被組織到幾個類別中，您可以在插入欄的左側(cè)切換它們。如圖2.3所示。切換幾個類別圖2.3插入欄2.1工作環(huán)境·

文檔工具欄文檔工具欄，如圖2.4所示，其包很多含按鈕，主要包括三種“文檔”窗口視圖（設(shè)計(jì)視圖、代碼視圖和拆分視圖）、各種查看選項(xiàng)和一些常用的操作（例如在瀏覽器中預(yù)覽）。圖2.4文檔工具欄2.1工作環(huán)境文檔窗口顯示當(dāng)前創(chuàng)建和編輯的文檔，在制作網(wǎng)頁的各種操作中，文檔窗口中都會有所體現(xiàn)。文檔窗口底部的狀態(tài)欄如圖2.5所示，文檔窗口底部的狀態(tài)欄提供與正創(chuàng)建的文檔有關(guān)的其它信息。圖2.5文檔窗口底部的狀態(tài)欄2.1工作環(huán)境屬性檢查器用于查看和更改所選對象或文本的各種屬性。每種對象都具有不同的屬性，也就是說【屬性】檢查器里的內(nèi)容是雖著編輯對象的不同而不同。在【代碼】視圖中，【屬性】檢查器默認(rèn)是不展開的。面板組組合在一個標(biāo)題下面的相關(guān)面板的集合。文件面板使您可以管理文件和文件夾，無論它們屬于Dreamweaver站點(diǎn)的一部分還是位于遠(yuǎn)程服務(wù)器上。返回2.2創(chuàng)建站點(diǎn)·

創(chuàng)建站點(diǎn)1在菜單欄【站點(diǎn)】菜單中選擇【管理站點(diǎn)】，在彈出的【管理站點(diǎn)】對話框中點(diǎn)擊【新建】按鈕，出現(xiàn)【站點(diǎn)】和【FTP】兩個選項(xiàng)。選擇如圖2.6所示。圖2.6管理站點(diǎn)對話框2.2創(chuàng)建站點(diǎn)·

創(chuàng)建站點(diǎn)2

選擇【站點(diǎn)】彈出【未命名站點(diǎn)1的站點(diǎn)定義為】對話框，在【未命名站點(diǎn)1的站點(diǎn)定義為】中選擇【基本】選項(xiàng)卡。2.2創(chuàng)建站點(diǎn)·

創(chuàng)建站點(diǎn)3

文本框中填寫您站點(diǎn)的名字，它僅僅做為管理和識別用，單擊【下一步】按鈕，進(jìn)入下一步。如圖

2.7所示。圖2.7定義站點(diǎn)名字的對話框2.2創(chuàng)建站點(diǎn)·

創(chuàng)建站點(diǎn)4

我們要建立的是靜態(tài)網(wǎng)頁，因此我們選擇【不，我不想使用服務(wù)器技術(shù)】如圖2.8所示，單擊【下一步】按鈕，進(jìn)入下一步。圖2.8選擇服務(wù)器對話框2.2創(chuàng)建站點(diǎn)·

創(chuàng)建站點(diǎn)5選擇第一項(xiàng)：編輯我計(jì)算機(jī)的本地副本，完成后再上傳，也建議網(wǎng)絡(luò)初學(xué)者也采用此項(xiàng)，選擇要保存網(wǎng)站的物理路徑名。手工填寫或者點(diǎn)擊文件夾圖標(biāo)選擇路徑都可以，單擊【下一步】按鈕，進(jìn)入下一步。如圖2.9所示。2.2創(chuàng)建站點(diǎn)圖2.9保存位置對話框2.2創(chuàng)建站點(diǎn)·

創(chuàng)建站點(diǎn)6

【您如何連接到遠(yuǎn)程服務(wù)器】現(xiàn)在，已經(jīng)為您的站點(diǎn)定義了一個本地根文件夾。暫時(shí)我們還不登陸遠(yuǎn)程服務(wù)器，因此選項(xiàng)中選擇【無】。單擊【下一步】按鈕，進(jìn)入下一步。2.2創(chuàng)建站點(diǎn)圖2.10總結(jié)報(bào)告對話框圖2.10給出我們剛才設(shè)置的總結(jié)報(bào)告，單擊【完成】按鈕，結(jié)束站點(diǎn)的設(shè)置。這樣，一個站點(diǎn)就完成了，相當(dāng)于一個房子建好了。2.2創(chuàng)建站點(diǎn)·

編輯站點(diǎn)·

站點(diǎn)的編輯其實(shí)很簡單，選擇【站點(diǎn)】菜單下的【管理站點(diǎn)】命令。選中站點(diǎn)的名稱，然后單擊【編輯】按鈕。將會出現(xiàn)類似創(chuàng)建站點(diǎn)的內(nèi)容，根據(jù)需要可以在相應(yīng)的內(nèi)容上進(jìn)行修改。2.2創(chuàng)建站點(diǎn)·

規(guī)劃站點(diǎn)內(nèi)容·現(xiàn)在我們就假設(shè)建立一個我的網(wǎng)站設(shè)計(jì)草圖，只有這樣網(wǎng)站的主要內(nèi)容、分支名稱、網(wǎng)頁的數(shù)量就一

目了然了。當(dāng)然不可避免的在實(shí)際制作過程中會有

所改變，但是有了最初的設(shè)計(jì)思想，就能有的放矢。設(shè)計(jì)草圖如圖2.12所示。圖2.12網(wǎng)站設(shè)計(jì)草圖返回2.3創(chuàng)建網(wǎng)頁·

新建、打開和保存網(wǎng)頁·文檔操作可以看作是設(shè)計(jì)網(wǎng)頁的基本操作，它包括打開和編輯文檔、設(shè)置文檔標(biāo)題等多個方面，在設(shè)計(jì)網(wǎng)頁時(shí)都是必須考慮的。2.3創(chuàng)建網(wǎng)頁·

網(wǎng)頁中添加內(nèi)容·可以往網(wǎng)頁中添加任何的內(nèi)容，象文本、圖像、表格、音頻、視頻、超級鏈接、表單等。具體插入的方法，以及詳細(xì)內(nèi)容在下幾章中會作介紹。2.3創(chuàng)建網(wǎng)頁頁面設(shè)置設(shè)置頁面的外觀設(shè)置頁邊距設(shè)置背景顏色、圖像圖2.17【頁面屬性】設(shè)置對話框2.3創(chuàng)建網(wǎng)頁圖2.18頁面屬性對話框·

頁面設(shè)置2.設(shè)置頁面的鏈接在【屬性】面板點(diǎn)擊【頁面屬性】打開其對話框，對話框中的【分類】選擇【鏈接】，內(nèi)容參見圖2.18所示。2.3創(chuàng)建網(wǎng)頁測試網(wǎng)頁Dreamweaver中進(jìn)行測試直接在IE中打開測試2.4

HTML標(biāo)記基本結(jié)構(gòu)·

HTML是構(gòu)成網(wǎng)頁的基本語言<html><head><title>Untitled

Document</title><meta

http-equiv=“Content-Type”Content=“text/html;charset=gb2312”></head><body

bgcolor=“＃FFFFFF”></body></html>2.4

HTML標(biāo)記基本結(jié)構(gòu)<head>和</head>標(biāo)記之間的內(nèi)容稱為HTML的頭部，一般不會在網(wǎng)頁上直接顯示，但插入的特效制作是可以在網(wǎng)頁上顯示的。<title>和</title>之間的內(nèi)容是Web頁的標(biāo)題，當(dāng)瀏覽這一網(wǎng)頁時(shí)，它會出現(xiàn)在瀏覽器的標(biāo)題欄上。例如主頁的名稱是：“教你申請專利”，其原代碼標(biāo)記為：<title>教你申請專利</title><meta>是一個非封閉類型的標(biāo)記。在HTML的頭部可以有包括多個<meta>標(biāo)記。返回2.5網(wǎng)站設(shè)計(jì)的基本思路確定網(wǎng)站的主題和名稱設(shè)計(jì)網(wǎng)站的整體風(fēng)格網(wǎng)站的形象設(shè)計(jì)確定網(wǎng)站的欄目網(wǎng)站設(shè)計(jì)的基本思路確定網(wǎng)站的目錄結(jié)構(gòu)確定網(wǎng)站的鏈接結(jié)構(gòu)返回本章小結(jié)本章主要介紹了Dreamweaver

的環(huán)境和基本操作，主要包括Dreamweaver

的環(huán)境，在Dreamweaver

里創(chuàng)建站點(diǎn)，如何在Dreamweaver里新建、保存、打開網(wǎng)頁，以及頁面的一些基本設(shè)置，就象是我們建了一個房子和房子的具體規(guī)劃，比如家具的用途、擺放等等，下面幾章將以更多精彩的實(shí)例詳細(xì)介紹網(wǎng)頁基本元素的添加以及設(shè)置。Thank

You

!第3章網(wǎng)頁中編輯文本主要內(nèi)容3.1在Dreamweaver中添加文本13.2插入其它文本元素23.3文本標(biāo)記基礎(chǔ)33.1

在Dreamweaver

中添加文本插入文本方式直接在文檔窗口中輸入文本內(nèi)容，就像在其他文本編輯其中一樣。從其他應(yīng)用程序中復(fù)制文本。例如Word、Excel等，切換到Dreamweaver，將插入點(diǎn)定位在文檔窗口的設(shè)計(jì)

視圖中，然后選擇【編輯】>【粘貼】或【編輯】>【選擇性粘貼】。當(dāng)您選擇【編輯】>【選擇性粘貼】時(shí)，將出現(xiàn)一個對話框?yàn)槟峁讉€粘貼格式設(shè)置選項(xiàng)。這個很簡單，就不再舉例。3.1

在Dreamweaver

中添加文本編碼設(shè)置編碼指定文檔中字符所用的編碼，文檔編碼在文檔頭中的

meta標(biāo)簽內(nèi)指定，它告訴瀏覽器和Dreamweaver應(yīng)如何對文檔進(jìn)行解碼以及使用哪些字體來顯示解碼的文本。例如，如果您指定“日語(Shift

JIS)”，則插入此meta標(biāo)簽：<meta

http-equiv="Content-Type"content="text/html;charset=Shift_JIS">。使用漢

語“簡體中文（GB2312）”，則meta標(biāo)簽就變?yōu)?lt;metahttp-equiv="Content-Type"content="text/html;charset=gb2312">3.1

在Dreamweaver

中添加文本·

文本格式設(shè)置

1.設(shè)置字體選中要改變的文本，如果沒有選中任何文本，則改變的字體格式將應(yīng)用于后面輸入的文本。選擇【文本】【字體】命令，在彈出的子菜單中選擇所需字體，或者打開屬性檢查器，選擇【字體】列表上所需的字體，如圖3.1所示。圖3.1設(shè)置字體屬性檢查器3.1

在Dreamweaver

中添加文本·

文本格式設(shè)置

2.添加字體打開【編輯字體列表】對話框如圖3.2所示。在字體列表中顯示了當(dāng)前已有的字體組合，在【可用字體】列表中顯示了目前本機(jī)上安裝的字體。圖3.2編輯字體列表對話框3.1

在Dreamweaver

中添加文本·

文本格式設(shè)置

2.添加字體將選中的字體添加到【選擇的字體】列表后，具體操作如圖3.3所示。圖3.3編輯字體列表對話框3.1

在Dreamweaver

中添加文本·

文本格式設(shè)置

3.設(shè)置文本大小選中要改變大小的文本。選擇【屬性】檢查器【大小】命令，在【大小】下拉列表中可以設(shè)置文本的尺寸大小，在后面的下拉列表中選擇文本大小的單位。如圖3.4所示。圖3.4設(shè)置字體大小大小的數(shù)值相同，文字大小卻不同，與單位有關(guān)。3.1

在Dreamweaver

中添加文本·

文本格式設(shè)置

4.設(shè)置文本顏色選中要改變顏色的文本。選擇【文本】菜單 【顏色】命令，打開顏色對話框，然后

選擇需要的顏色即可，當(dāng)然可以利用【屬性】檢查器【文本】顏色框，用取色筆進(jìn)行選取。圖3.5顏色對話框3.1

在Dreamweaver

中添加文本·

文本格式設(shè)置5.設(shè)置文本的樣式文本的樣式包括文本的粗體、斜體、下劃線等，具體參見圖3.6子菜單所示。要設(shè)置文本的樣式，直接選中要設(shè)置文本樣式的字體，選擇【文本】菜單 【樣式】，在彈出的子菜單中選擇所需要的樣式，即可。如果要取消文本的樣式設(shè)置，則再次選擇該樣式。圖3.6文本屬性面板這個子菜單都是文本樣式3.1

在Dreamweaver

中添加文本·

段落設(shè)置段落設(shè)置主要包括分段與換行，段落對齊、縮進(jìn)以及項(xiàng)目符號和編號。按照如下的步驟進(jìn)行操作即可。打開01文件夾下的01.htm網(wǎng)頁，如圖3.7所示圖3.7打開準(zhǔn)備的網(wǎng)頁3.1

在Dreamweaver

中添加文本·

段落設(shè)置選擇布局工具欄的【繪制層】 ，放在如圖3.8所示的位置，有關(guān)繪制層的更多內(nèi)容參見后面的章節(jié)。圖3.8繪制層3.1

在Dreamweaver

中添加文本·

段落設(shè)置在層中輸入類似圖3.9所示的文字，注意在圖中指示位置輸入空格。接下來我們使用鍵盤的【回車】可以換行，同時(shí)也就結(jié)束了一個段落。圖3.9輸入空格在此處輸入空格3.1

在Dreamweaver

中添加文本。·

段落設(shè)置我們可以對其中段落進(jìn)行對齊，對齊方式主要有：左對齊、居中對齊、右對齊和兩端對齊4種對齊方式，即對應(yīng)著【屬性】檢查器里的這四個

按鈕

其設(shè)置方法與設(shè)置文本相同。我們這里選擇居中對齊。結(jié)果如圖3.10所示。圖3.10選擇居中對齊后的效果返回3.2

插入其它文本元素我們可以插入其它文本元素，這里的其它文本元素包括列表、日期、水平線、特殊字符等。項(xiàng)目列表：設(shè)置相同類別文本的列表形式。打開02文件夾下的01.htm網(wǎng)頁，選中屬性面板的列表按鈕，然后在文檔窗口輸入列表需要的文字，要輸入下一項(xiàng)直接回車即可。默認(rèn)的就會在其前面加上項(xiàng)目符號。如圖3.11所示網(wǎng)頁。圖3.11插入文件列表3.2

插入其它文本元素接下來我們再制作另外一種編號列表：選中屬性面板的列表按鈕，與步驟1類似，看一下結(jié)果如圖3.12所示。圖3.12 編號列表3.2

插入其它文本元素接下來我們在網(wǎng)頁當(dāng)中插入日期，選擇【插入】菜單的【日期】命令?；蛘咴凇静迦搿繖诘摹境Ｓ谩款悇e中，單擊【日期】按鈕。出現(xiàn)圖3.13所示的對話框。選擇你所喜歡的日期格式，您如果要在每次保存文件時(shí)都自動更新該日期。則將【儲存時(shí)自動更新】選中。圖3.13插入日期對話框3.2

插入其它文本元素接下來我們插入另外一個文本元素水平線：用戶可以使用一條或者更多的水平分割線，將文本或者對象分割開來。選擇【插入】菜單下的【HTML】→【水平線】如圖3.14所示圖3.14插入水平線3.2

插入其它文本元素接下來我們設(shè)置一下水平線的屬性，選中水平線，看一下【屬性檢查器】我們設(shè)置水平線的【寬】為500，當(dāng)然高度，對齊都可以根據(jù)需要進(jìn)行設(shè)置，效果如圖3.15所示。圖3.15水平線屬性在此背景下我們好象看不到水平線，主要是因?yàn)樗骄€的顏色默認(rèn)為灰色，我們可以設(shè)置其顏色，選中水平線，選擇【拆分】視圖，我們發(fā)現(xiàn)在【代碼】視圖里有選中的代碼，結(jié)果如圖3.16所示。圖3.16【拆分】視圖3.2

插入其它文本元素將插入點(diǎn)定位在【代碼】視圖里，在<hr后面單擊空格鍵，將會出

現(xiàn)如圖3.17所示的效果。在圖所示的下拉菜單中雙擊【color】，出現(xiàn)圖3.18所示的效果，選擇白色。圖3.17選擇屬性圖3.18顏色對話框3.2

插入其它文本元素最后我們看一下我們網(wǎng)頁效果，如圖3.19所示。圖3.19 網(wǎng)頁的最終效果返回3.3

文本標(biāo)記基礎(chǔ)·

文本標(biāo)記?加粗<B></B>?斜體<I></I>?字體加大<BIG>?字體變細(xì)<SMALL>?加底線<U></U>（尚有些瀏覽器不提供）?刪除線<S></S>（尚有些瀏覽器不提供）?下標(biāo)<SUB></SUB>?上標(biāo)<SUP></SUP>3.3

文本標(biāo)記基礎(chǔ)·

文本標(biāo)記?標(biāo)題標(biāo)記<H1><H2><H3><H4><H5><H6>，這些是，由<H1>至<H6>變粗變大加寬的程度逐漸減小。每個標(biāo)題標(biāo)記所標(biāo)示的字句將獨(dú)占一行且上下留一空白行。?打字機(jī)體<TT></TT>（用單空格字型顯示）?閃耀<BLINK></BLINK>?<FONT>是應(yīng)用于文件的內(nèi)文部分，即<BODY>與</BODY>之間的位置，只影響所標(biāo)示的字句，是一個圍堵標(biāo)記。?<HR>稱為水平線。3.3

文本標(biāo)記基礎(chǔ)格式標(biāo)記<P>稱為段落標(biāo)記。作用：為文本、圖像、表格等之間留一空白行。<P>的常用參數(shù)：如：<P

ALIGN="CENTER">ALIGN="CENTER"可選值：RIGHT,LEFT,CENTER。默認(rèn)值：ALIGN="LEFT"<BR>稱為換行標(biāo)記。作用：令文本、圖像、表格等顯示于下一行，即段內(nèi)換行，由于瀏覽器會自動忽略原始碼中空白和換行的部分，這使<BR>成為最常用的標(biāo)記之一。因?yàn)闊o論你在代碼中編好了多漂亮的文章，若不適當(dāng)?shù)丶由蠐Q行標(biāo)記或段落標(biāo)記，瀏覽器只會將它顯示成一大段。返回本章小結(jié)本章主要介紹了Dreamweaver中如何插入文本和設(shè)置文本的屬性。通過多種插入文本的方式可以很快地將文本添加到網(wǎng)頁中。而Dreamweaver提供的文本屬性設(shè)置功能使得我們能夠方便地設(shè)置各種排板效果。下一章，我們將學(xué)習(xí)如何在網(wǎng)頁中添加圖像，設(shè)置圖像屬性，進(jìn)一步提高網(wǎng)頁的可欣賞性。Thank

You

!第4章網(wǎng)頁中使用圖像主要內(nèi)容4.1網(wǎng)頁中常見的圖像14.2插入圖像24.3設(shè)置圖像34.4圖像標(biāo)記及其屬性44.1網(wǎng)頁中常見的圖像·

Gif圖像Gif圖像只支持256色采用無損壓縮支持透明色支持交替下載支持幀動畫4.1網(wǎng)頁中常見的圖像·

JPG圖像JPG格式圖像是網(wǎng)頁中另一種被廣泛使用的圖像格式，它是“聯(lián)合圖像專家組文件格式”的英文縮寫，最多可以支持1600萬種顏色，適合在需要表現(xiàn)細(xì)膩顏色細(xì)節(jié)的圖像上使用，因?yàn)樗С值念伾珨?shù)目較多，所以生成的文件體積較大。但由于JPG格式圖像具有較高的壓縮率，提高了瀏覽器下載速度，也被廣泛應(yīng)用在網(wǎng)頁中。4.1網(wǎng)頁中常見的圖像·

PNG圖像PNG（可移植網(wǎng)絡(luò)圖形）文件：此格式是一種替代GIF格式的無專利權(quán)限制的格式，它包括對索引色、灰度、真彩色圖像以及Alpha通道透明的支持。PNG是

MacromediaFireworks固有的文件格式。PNG文件可保留所有原始層、矢量、顏色和效果信息（例如陰影），并且在任何時(shí)候所有元素都是可以完全編輯的。文件必須具有png文件擴(kuò)展名才能被Dreamweaver識別為Png文件。返回4.2插入圖像·

插入圖像在您將圖像插入Dreamweaver文檔時(shí)，Dreamweaver自動在Html源代碼中生成對該圖像文件的引用。為了確保此引用的正確性，該圖像文件必須位于當(dāng)前站點(diǎn)中。如果圖像文件不在當(dāng)前站點(diǎn)中，Dreamweaver會詢問您是否要將此文件復(fù)制到當(dāng)前站點(diǎn)中。您還可以動態(tài)插入圖像。動態(tài)圖像指那些經(jīng)常變化的圖像。例如，廣告橫幅旋轉(zhuǎn)系統(tǒng)需要在請求頁面時(shí)從可用橫幅列表中隨機(jī)選擇一個橫幅，然后動態(tài)顯示所選橫幅的圖像。下面我們通過一個實(shí)例來說明圖像的插入。4.2插入圖像圖4.1【頁面屬性】對話框1·

插入圖像新建一個網(wǎng)頁，單擊【屬性】面板上的按鈕，，打開【頁面】屬性對話框，如圖4.1所示。在此對話框中【背景顏色】處選擇黑色。24.2插入圖像圖4.2表格對話框3·

插入圖像在【布局】工具欄上選擇按鈕 。出現(xiàn)【表格】對話框，具體參數(shù)如圖4.2所示。有關(guān)表格的更多知識，參見后面的章節(jié)。4.2插入圖像·

插入圖像圖4.3【屬性】面板4接下來，在【屬性】面板中【對齊】命令中選擇【居中】對齊，填充、間距、邊框都設(shè)為0。如圖4.3所示。居中對齊填充、間距、邊框都設(shè)為05在文檔窗口中，將插入點(diǎn)放置在您要顯示圖像的地方。4.2插入圖像·

插入圖像圖4.4選擇圖像文件對話框6執(zhí)行以下操作：在【插入】欄的常用【類別】中，單擊 圖標(biāo)。出現(xiàn)如圖4.4所示的對話框。7在該對話框中，可以單擊上面的【文件系統(tǒng)】單選按鈕，直接從本地硬盤中選擇圖像文件，當(dāng)然還可以單擊【圖像源】單選按鈕，從數(shù)據(jù)庫中選取圖像文件。4.2插入圖像·

插入圖像圖4.5【圖像標(biāo)簽輔助功能屬性】8選擇圖像文件后，窗口右邊會出現(xiàn)它的預(yù)覽圖。而且在下面的URL文本框中，會顯示當(dāng)前選中文件的URL地址，并且在“相對于”下拉列表中，可以選擇文件URL地址的類型，如果選擇“文檔”選項(xiàng)，則使用的是相對地址，如果選擇“站點(diǎn)根目錄”選項(xiàng)，則使用的是基于站點(diǎn)根目錄的地址。9在出現(xiàn)的對話框中，選擇【取消】命令，如圖4.5所示。4.2插入圖像·

插入圖像10同理，在相應(yīng)的單元格插入相應(yīng)的圖像，效果如圖4.6所示。11在頁面中央插入一個層，在層內(nèi)再插入另外一幅圖像。12保存預(yù)覽后下面是此網(wǎng)頁的最終效果圖。如圖4.7所示。圖4.6插入圖像后的效果4.2插入圖像圖4.7網(wǎng)頁最終效果圖返回4.3設(shè)置圖像·

圖像占位符圖像占位符是在準(zhǔn)備好將最終圖形添加到Web頁面之前使用的圖形。若要插入圖像占位符，請執(zhí)行以下操作：圖4.9插入圖像占位符1在插入欄中，單擊【圖像占位符】圖標(biāo)。2在該對話框中，為圖像占位符選擇選項(xiàng)，您可以設(shè)置占位符的大小和顏色，并為占位符提供文本標(biāo)簽。例如：圖中因?yàn)檫€沒有設(shè)計(jì)好“l(fā)ogo”圖像，所以用占位符代替。如圖4.9所示。4.3設(shè)置圖像·

圖像占位符圖4.10

IE瀏覽器顯示結(jié)果3瀏覽器顯示結(jié)果如圖4.10所示：4.3設(shè)置圖像圖4.11裁剪圖像。圖像的編輯裁剪圖像選中圖象，單擊圖像屬性檢查器中的【裁減工具】圖標(biāo) 所選圖像周圍會出現(xiàn)裁剪控制點(diǎn)。調(diào)整裁剪控制點(diǎn)直到邊界框包含的圖像區(qū)域符合所需大小。如圖4.11所示。在邊界框內(nèi)部雙擊或按Enter鍵裁剪所選區(qū)域。裁減后如圖4.12所示。圖4.12裁剪后的結(jié)果4.3設(shè)置圖像·

圖像的編輯2.圖像重新取樣在Dreamweaver中重新調(diào)整圖像的大小時(shí)，您可以對圖像進(jìn)行重新取樣，以容納其新尺寸。重新取樣位圖對象時(shí)，會在圖像中添加或刪除像素，以使其變大或變小。重新取樣圖像以取得更高的分辨率一般不會導(dǎo)致品質(zhì)下降。但重新取樣以取得較低的分辨率總會導(dǎo)致數(shù)據(jù)丟失，并且通常會使品質(zhì)下降。4.3設(shè)置圖像·

圖像的編輯3.亮度/對比度若要調(diào)整圖像的亮度和對比度，選中圖像，單擊圖像【屬性】檢

查器中的【亮度/對比度】按鈕 ，將出現(xiàn)【亮度/對比度】對話框。如圖4.13所示，用鼠標(biāo)拖動對話框上的滑塊即可調(diào)整其亮度/對比度。圖4.13【亮度/對比度】對話框4.3設(shè)置圖像·

圖像的編輯4.銳化當(dāng)我們感覺到圖像的邊緣不夠清晰時(shí)，可以執(zhí)行此操作：要銳化的圖像，先選擇圖像，然后單擊【屬性】檢查器中的按鈕 ，通過拖動滑塊控件或在文本框中輸入一個0到10之間的值，來指定Dreamweaver應(yīng)用于圖像的銳化程度如圖4.14所示。圖4.14【銳化】對話框4.3設(shè)置圖像·

設(shè)置圖像屬性【寬】和【高】以像素為單位指定圖像的寬度和高度。當(dāng)您在頁中插入圖像時(shí)，您可以用以下單位指定圖像大?。簆c（十二點(diǎn)活字）、pt（點(diǎn)）、in（英寸）、mm（毫米）、cm（厘米）和諸如2in+5mm的單位組合；在HTML源代碼中，Dreamweaver將這些值轉(zhuǎn)換為像素。【源文件】是圖片的路徑，點(diǎn)擊后面的文件夾圖標(biāo)也能選擇其他圖片?！炬溄印渴擎溄拥哪繕?biāo)頁面或者定位點(diǎn)的URL。有關(guān)創(chuàng)建鏈接的知識，請參見后面的章節(jié)?！咎娲渴菆D片的文字注釋，當(dāng)圖片不能正常顯示的時(shí)候，圖片的位置就會顯示文字注釋?！敬怪边吘唷亢汀舅竭吘唷垦貓D像的邊緣添加邊距（以像素為單位）。【垂直邊距】圖像的頂部和底部添加邊距?！舅竭吘唷垦貓D像左側(cè)和右側(cè)添加邊距。4.3設(shè)置圖像·

設(shè)置圖像屬性【低解析度源】當(dāng)前圖片的低分辨率副本的路徑。如果圖片很大，則先讓瀏覽器下載顯示一個文件較小的圖片副本，瀏覽器裝載完其他內(nèi)容后再回頭來下載較大的圖像，這樣做既能保持網(wǎng)頁的完整性，又能減少用戶等待時(shí)間。【邊框】圖像邊框的寬度。選擇空白或零時(shí)沒有邊框?！緦R】將圖像與同一行中的文本、另一個圖像、插件或其它元素對齊。還可以設(shè)置圖像的水平對齊方式。【默認(rèn)值】通常指定基線對齊。（根據(jù)站點(diǎn)訪問者的瀏覽器的不同，默認(rèn)值也會有所不同。）【基線和底部】將文本（或同一段落中的其它元素）的基線與選定對象的底部對齊?！卷敹恕繉D像的頂端與當(dāng)前行中最高項(xiàng)（圖像或文本）的頂端對齊。4.3設(shè)置圖像·

設(shè)置圖像屬性【居中】將圖像的中部與當(dāng)前行的基線對齊。【文本上方】將圖像的頂端與文本行中最高字符的頂端對齊?！窘^對居中】將圖像的中部與當(dāng)前行中文本的中部對齊。【絕對底部】將圖像的底部與文本行（這包括字母下部，例如在字母g中）的底部對齊?！咀髮R】將所選圖像放置在左邊，文本在圖像的右側(cè)換行。如果左對齊文本在行上處于對象之前，它通常強(qiáng)制左對齊對象換到一個新行。【右對齊】將圖像放置在右邊，文本在對象的左側(cè)換行。如果右對齊文本在行上處于對象之前，它通常強(qiáng)制右對齊對象換到一個新行?！菊{(diào)整圖像大小】您可以在Dreamweaver中以可視化的形式調(diào)整元素的大小，這些元素包括圖像、插件、MacromediaShockwave或Flash文件、applet和ActiveX控件等。您可以設(shè)置相對于同一段落或行中的其它元素的對齊方式。4.3設(shè)置圖像創(chuàng)建鼠標(biāo)經(jīng)過圖像若要創(chuàng)建鼠標(biāo)經(jīng)過圖像，請執(zhí)行下面的操作：在文檔窗口中，將插入點(diǎn)放置在要顯示鼠標(biāo)經(jīng)過圖像的位置。從【插入】菜單中選擇【圖像】對象，如圖4.15所示。圖4.15插入鼠標(biāo)經(jīng)過圖像4.3設(shè)置圖像創(chuàng)建鼠標(biāo)經(jīng)過圖像在對話框中選擇原圖像和鼠標(biāo)經(jīng)過圖像要顯示的圖片如圖4.16所示。選擇【文件】菜單【在瀏覽器中預(yù)覽】，或按F12鍵。在瀏覽器中，圖17顯示鼠標(biāo)未經(jīng)過圖像之前，圖4.18為鼠標(biāo)經(jīng)過圖像時(shí)顯示的結(jié)果。圖4.16鼠標(biāo)經(jīng)過圖像對話框圖4.17原圖像圖4.17鼠標(biāo)經(jīng)過圖像返回4.4圖像標(biāo)記及其屬性<IMG>稱圖形標(biāo)記，主要用以插入圖片于網(wǎng)頁中，至于其它用處如配合影片文件等的播放及影像地圖（IMAGEMAP或稱一圖多連結(jié)）等。<IMG>的一般參數(shù)設(shè)定：SRC=“LOGO.GIF”：圖片來源，接受.GIF,.JPG及.PNG格式，若圖片文件與該HTML文件同處一目錄則只寫上文件案名稱，否則必

須加上正確的途徑，相對及絕對路徑均可。WIDTH=100

HEIGHT=100：設(shè)定圖片大小，此寬度、及高度一般采用像素作單位。通常只設(shè)為圖片的真實(shí)大小以免失真，若要改變圖片大小最好事先使用圖像編輯工具。HSPACE=5

VSPACE=5：設(shè)定圖片邊沿空白，以免文字或其它圖片過于貼近。HSPACE是設(shè)定圖片左右的空間，VSPACE則是設(shè)定圖片上下的空間，采用像素作單位。4.4圖像標(biāo)記及其屬性BORDER=2：圖片邊框厚度。ALIGN=“TOP”：調(diào)整圖片旁邊文字的位置，你可以控制文字出現(xiàn)在圖片的偏上方、中間、底端、左右等，可選值：TOP、

MIDDLE、BOTTOM、LEFT或RIGHT，默認(rèn)為BOTOM。ALT=“LOGOOFPENPALGARDEN”：這是用以描述該圖形的文字，若用者使用文字瀏覽器，由于不支持圖片，這些文字更會代替圖片而被顯示。若于支持圖片顯示的瀏覽器，當(dāng)鼠標(biāo)移至圖片上該些文字亦會顯示。LOWSRC=“PRE_LOGO.GIF”：設(shè)定先顯示低品質(zhì)圖像圖片，若所加入的是一張很大的圖片，下載時(shí)很長，這張低品質(zhì)圖像會先被顯示以免瀏覽失卻興趣，通常是原圖片灰階版本。返回本章小結(jié)本章主要介紹了Dreamweaver中如何插入文本和設(shè)置文本的屬性。通過多種插入文本的方式可以很快地將文本添加到網(wǎng)頁中。而Dreamweaver提供的文本屬性設(shè)置功能使得我們能夠方便地設(shè)置各種排板效果。下一章，我們將學(xué)習(xí)如何在網(wǎng)頁中添加圖像，設(shè)置圖像屬性，進(jìn)一步提高網(wǎng)頁的可欣賞性。Thank

You

!第5章網(wǎng)頁色彩基礎(chǔ)知識主要內(nèi)容125.2網(wǎng)頁配色技巧5.1網(wǎng)頁色彩基礎(chǔ)知識5.1

網(wǎng)頁色彩基礎(chǔ)知識·

色彩基礎(chǔ)知識什么是色彩色彩是光作用于人眼引起的視覺特性。人的視覺特性是受大腦支配的，所以色彩也是一種心理反映。色彩感覺不僅與物體本來的顏色特性有關(guān)，而且還受時(shí)間、空間、外表狀態(tài)以及該物體的周圍環(huán)境的影響，同時(shí)還

受人的經(jīng)歷、記憶力、世界觀和視覺靈敏度等各種因素的影響。色彩的形成我們能看到物體，并不是因?yàn)槲矬w發(fā)光，而是物體反光的結(jié)果。太陽光是白色的，是由紅色，綠色和藍(lán)色三種顏色組成，當(dāng)它照射到物體上之后，部分光被物體吸收，剩余的光被物體表面反射回來，我們看到的就是反射回來的光。我們說某個物體是“藍(lán)色”的，其實(shí)是這個物體反射了藍(lán)色光，而吸收了紅色和綠色光。5.1

網(wǎng)頁色彩基礎(chǔ)知識·

色彩基礎(chǔ)知識3.色彩三要素色彩可分為無彩色和有彩色兩大類。無彩色是指黑色、白色和灰色，而有彩色是指紅、橙、黃、綠、藍(lán)、青、紫等。有彩色的每種色彩都可以用三個值表示，即色相、明度和純度，它們決定著色彩的主要特征，被稱為色彩的三要素。色相:是指的是色彩的名稱，是色彩最基本的特征，是一種色彩區(qū)別于另一種色彩的最主要的因素。明度:也叫亮度，指的是色彩的明暗程度，或者色彩在不同光線下的明暗程度。純度:也叫色度，表示色彩的飽和度，即某種色彩中是否包黑色或者白色成分。5.1

網(wǎng)頁色彩基礎(chǔ)知識·

色彩表示RGB模式RGB模式是計(jì)算機(jī)中表示色彩最常用的模式，基本原理是用三原色的組合表示每種色彩。這種表示模式中，三個原色分別被劃分為256個級別，每種色彩都可以表示為三個數(shù)字的組合。HSB模式HSB色彩把顏色分為色相（Hue）、飽和度（Saturation）、明度（Brightness）三個因素。所謂飽和度相當(dāng)于家庭電視機(jī)的色彩濃度，飽和度高色彩較艷麗，飽和度低色彩就接近灰色。明度也稱為亮度，

等同于彩色電視機(jī)的亮度，亮度高色彩明亮，亮度低色彩暗淡，亮度

最高得到純白，最低得到純黑。5.1

網(wǎng)頁色彩基礎(chǔ)知識·

色彩表示CMYK模式CMY是3種印刷油墨名稱的首字母：青色Cyan、洋紅色Magenta、黃色Yellow。而K取的是black最后一個字母，之所以不取首字母，是為了避免與藍(lán)色(Blue)混淆。Lab顏色模式Lab是CIE（國際照明委員會）指定的表示顏色的標(biāo)準(zhǔn)之一。它是廣泛應(yīng)用于彩色印刷和復(fù)制層面。L：指的是亮度；a：由綠至紅；b：由藍(lán)至黃。CIE色彩模式是以數(shù)學(xué)方式來表示顏色，所以不依賴于特定的設(shè)備，這樣確保輸出設(shè)備經(jīng)校正后所代表的顏色能保持其一致性。5.1

網(wǎng)頁色彩基礎(chǔ)知識·

色彩表示5.色彩模式的選擇RGB色彩模式是發(fā)光的，存在于屏幕等顯示設(shè)備中，不存在于印刷品中；

CMYK色彩模式是反光的，需要外界輔助光源才能被感知，它是印刷品唯一的色彩模式；

CMYK的所有色彩都包含于RGB色域中，但CMYK的色彩數(shù)量少于RGB，RGB通道灰度圖中偏白表示發(fā)光程度高；CMYK通道灰度圖中偏白表示油墨含量低。反而反之。5.1

網(wǎng)頁色彩基礎(chǔ)知識·

色彩表示可以按照這樣的原則選擇色彩模式：

如果圖像只在電腦上顯示，就用RGB模式，這樣可以得到較廣的色域；

如果圖像需要打印或者印刷，就必須使用CMYK模式，才可確保印刷品顏色與設(shè)計(jì)時(shí)一致。5.1

網(wǎng)頁色彩基礎(chǔ)知識·

216種安全色216網(wǎng)頁安全色是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中都能夠正常顯示的顏色集合（調(diào)色板），也就是說這些顏色在任何終端瀏覽用戶顯示設(shè)備上的現(xiàn)實(shí)效果都是相同的。所以，使用216網(wǎng)頁安全色進(jìn)行網(wǎng)頁配色可以避免原有的顏色失真問題。返

回5.2網(wǎng)頁配色技巧色彩選擇的基本原則色彩的鮮明性原則色彩的獨(dú)特性原則色彩的適當(dāng)性原則色彩的聯(lián)想性原則5.2網(wǎng)頁配色技巧·

網(wǎng)站主色調(diào)的選擇網(wǎng)站的主色調(diào)對整個網(wǎng)站色彩搭配是至關(guān)重要的。網(wǎng)站的主色調(diào)實(shí)際上是由網(wǎng)站的內(nèi)容確定的，跟據(jù)網(wǎng)站的內(nèi)容可以確定網(wǎng)站的主色調(diào)，也可以更具網(wǎng)站訪問群體的類別、社會背景、心理需求和場合來確定，也可以根據(jù)不同色彩帶給人們的不同心理反應(yīng)進(jìn)行選擇。我們可以從下面的幾個例子來看看。5.2網(wǎng)頁配色技巧·

網(wǎng)站主色調(diào)的選擇5.2網(wǎng)頁配色技巧·

網(wǎng)站主色調(diào)的選擇5.2網(wǎng)頁配色技巧·

網(wǎng)站主色調(diào)的選擇5.2網(wǎng)頁配色技巧網(wǎng)頁中色彩搭配的原則基于色調(diào)進(jìn)行配色類似色調(diào)配色；互補(bǔ)色調(diào)配色；

2.基于色彩情感進(jìn)行配色紅色調(diào)配色技巧；

(2)黃色調(diào)配色技巧；藍(lán)色調(diào)配色技巧綠色調(diào)配色技巧綠色調(diào)配色技巧白色調(diào)配色技巧5.2網(wǎng)頁配色技巧·

網(wǎng)頁中色彩搭配的原則3.基于漸變和重復(fù)的色彩搭配5.2網(wǎng)頁配色技巧色彩搭配案例基于灰黑色的NBA網(wǎng)站5.2網(wǎng)頁配色技巧·

色彩搭配案例2.娛樂性網(wǎng)站UGO5.2網(wǎng)頁配色技巧·

色彩搭配案例3.采用黃色調(diào)為主返回本章小結(jié)本章主要向讀者介紹了網(wǎng)頁設(shè)計(jì)色彩搭配的基礎(chǔ)知識。好多網(wǎng)頁設(shè)計(jì)著在學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的時(shí)候，并不注意色彩搭配的運(yùn)用，而是把主要精力放在代碼編寫上，結(jié)果導(dǎo)致費(fèi)了很大功夫設(shè)計(jì)的網(wǎng)站，卻往往“無人問津”，一個原因就是網(wǎng)頁的色彩搭配不受歡迎。Thank

You

!第7章網(wǎng)頁中使用超級鏈接主要內(nèi)容7.1給文字添加超級鏈接17.2給圖像添加超級鏈接7.3熱點(diǎn)鏈接7.4站內(nèi)鏈接與站外鏈接2347.5鏈接到其它對象57.6鏈接的不同打開效果67.7鏈接標(biāo)記及其屬性77.1

給文字添加超級鏈接“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常使用的鏈接方式，具有文件小制作簡單和便于“維護(hù)”等優(yōu)點(diǎn)。1.準(zhǔn)備好已經(jīng)制作完成的首頁和各個欄目的頁面(除了“鏈接”，其它內(nèi)容都已經(jīng)制作完成了)，在這里我們打開本書附帶光盤07/course/1.html文件，如圖7.1所示。圖7.1初始頁面7.1

給文字添加超級鏈接2.在1.html的設(shè)計(jì)視圖中選取“茉莉文學(xué)”作為鏈接的文字，觀察【屬性】面板中的鏈接地址欄，然后把鏈接的地址加入到文本框中，在這里我們點(diǎn)擊瀏覽文件 按鈕，選擇07/index1.html文件，如圖7.2所示。圖7.2“鏈接”文本框7.1

給文字添加超級鏈接圖7.3文字鏈接的目標(biāo)網(wǎng)頁3.

在設(shè)計(jì)視圖中，單擊在【瀏覽器中預(yù)覽與測試】按鈕 ，選擇下拉列表中的【預(yù)覽在IExplore6.0】選項(xiàng)或按F12鍵，便可打開瀏覽器，在瀏覽器指向“茉莉文學(xué)”，當(dāng)鼠標(biāo)變成手狀時(shí)單擊，便可切換到所鏈接的頁面如圖7.3所示。返回7.2

給圖像添加超級鏈接“圖像”也是常被使用的鏈接媒體，它和文字鏈接非常相似。下面我們繼續(xù)上例給圖像添加鏈接。在Dreamweaver中打開index1.html文件，選擇頁面頂部的圖像，觀察【屬性】面板，在鏈接地址欄中輸入鏈接文件的地址，可以使用之前講到的“指向文件”和“選擇文件”的方法。這里我們將圖像鏈接到1.html文件，如圖7.5所示。設(shè)置完成后保存文件并預(yù)覽鏈接效果。圖7.5圖像鏈接矩形熱點(diǎn)圖形熱點(diǎn)多邊形熱點(diǎn)返回7.3

熱點(diǎn)鏈接1.在Dreamweaver中打開1.html文件，選擇頁面底部的圖像，便可看到【屬性】面板左側(cè)“地圖”下的熱點(diǎn)工作按鈕。如圖7.6所示。矩形熱點(diǎn)圖形熱點(diǎn)多邊形熱點(diǎn)圖7.6熱點(diǎn)工具7.3

熱點(diǎn)鏈接2.單擊矩形熱點(diǎn)工具按鈕，當(dāng)光標(biāo)移到所選圖像變?yōu)槭中螤顣r(shí)，拖動鼠標(biāo)框選設(shè)置鏈接的部分，此時(shí)被框選的部分以透明藍(lán)色顯示，如圖7.7所示。圖7.7框選熱區(qū)7.3

熱點(diǎn)鏈接3.選中圖像中的熱點(diǎn)，在屬性面板上為圖像熱點(diǎn)設(shè)置鏈接，這里鏈接到index1.html文件，將然后保存文件并預(yù)覽效果，在瀏覽器中將光標(biāo)指向設(shè)為熱區(qū)的部分光標(biāo)會變?yōu)槭譅?，此時(shí)單擊便會到達(dá)index1.html文件頁面。同樣，在圖片的其它部分還可以用熱點(diǎn)工具設(shè)置不同的熱區(qū)，以實(shí)現(xiàn)在一張圖片出現(xiàn)多個鏈接。返

回7.4

站內(nèi)鏈接與站外鏈接·

站內(nèi)鏈接之前的實(shí)例中我們所創(chuàng)建的鏈接都屬于“站內(nèi)鏈接”，簡單地理解，“站內(nèi)鏈接”就是鏈接站點(diǎn)內(nèi)部的文件，在“鏈接”地址欄中需要輸入文件的“相對路徑”。7.4

站內(nèi)鏈接與站外鏈接鏈接到站內(nèi)網(wǎng)頁具體位置錨點(diǎn)鏈接在Dreamweaver中打開1.html文件，將光標(biāo)定位在文章標(biāo)題“茉

莉飄香”前，單擊【插入】菜單下【命名錨記】選項(xiàng)，如圖7.8所示。圖7.8“命名錨記”選項(xiàng)7.4

站內(nèi)鏈接與站外鏈接·

鏈接到站內(nèi)網(wǎng)頁具體位置錨點(diǎn)鏈接2.在彈出的【命名錨記】對話框中，輸入錨記（錨點(diǎn)）名稱，這里命名為“茉莉飄香”，如圖圖7.9所示。圖7.9命名錨記7.4

站內(nèi)鏈接與站外鏈接·

鏈接到站內(nèi)網(wǎng)頁具體位置錨點(diǎn)鏈接3.單擊確定按鈕后，名稱為“茉莉飄香”的錨點(diǎn)即被插入到文檔中相應(yīng)的位置，如圖7.10所示。圖7.9命名錨記7.4

站內(nèi)鏈接與站外鏈接·

鏈接到站內(nèi)網(wǎng)頁具體位置錨點(diǎn)鏈接4.選擇導(dǎo)航欄中的文字“茉莉飄香”，如圖7.11所示，在【屬性】面板中的“鏈接”地址欄中，輸入一個符號“?！焙湾^記名稱。這里輸入“＃茉莉飄香”，如圖7.12所示。圖7.11選中文字圖7.12設(shè)置鏈接7.4

站內(nèi)鏈接與站外鏈接·

鏈接到站內(nèi)網(wǎng)頁具體位置錨點(diǎn)鏈接5.保存文件并預(yù)覽效果，在瀏覽器單擊導(dǎo)航欄中的文字“茉莉飄香”，頁面就會迅速跳轉(zhuǎn)到“命名錨記”的位置，如圖7.13和圖7.14所示。圖7.13點(diǎn)擊鏈接前圖7.14點(diǎn)擊鏈接后7.4

站內(nèi)鏈接與站外鏈接·

站外鏈接“站外鏈接”就是在“鏈接”地址欄中直接輸入網(wǎng)頁在Internet上的“絕對路徑”，并且包括所使用的協(xié)議（如HTTP、FTP）?！罢就怄溄印倍嘤糜诰W(wǎng)站間友情鏈接的內(nèi)容。在Dreamweaver中打開1.html文件，選項(xiàng)中導(dǎo)航欄中的文字“友情鏈接”，在【屬性】面板中的“鏈接”地址欄中，輸入網(wǎng)址保存文件并預(yù)覽，在瀏覽器點(diǎn)擊“友情鏈接”，頁面便會跳轉(zhuǎn)到搜狐首頁。7.4

站內(nèi)鏈接與站外鏈接·

鏈接到站外網(wǎng)頁具體位置首先，為了實(shí)現(xiàn)這個功能我們將某站點(diǎn)下載到本地主機(jī)（與我們的實(shí)例站點(diǎn)在不同的路徑下）。同時(shí)在下載站點(diǎn)的主頁上某位置插入錨點(diǎn)，并命名為“t”。在Dreamweaver中打開1.html文件，選擇頁面中的文字“茉莉公司網(wǎng)絡(luò)工作室”，在【屬性】面板中的“鏈接”地址欄中，輸入如下地址file:///F|/xiasi/xiasi.html#t。如圖7.15所示。圖7.15鏈接到站外網(wǎng)頁具體位置7.4

站內(nèi)鏈接與站外鏈接·

鏈接到站外網(wǎng)頁具體位置保存文件并預(yù)覽，在瀏覽器點(diǎn)擊“茉莉公司網(wǎng)絡(luò)工作室”，頁面便會跳轉(zhuǎn)到站外網(wǎng)頁錨點(diǎn)定位的位置，如圖7.16所示。圖7.16站外網(wǎng)頁目標(biāo)位置返回7.5鏈接到其它對象·

鏈接到電子郵件在Dreamweaver中打開1.html文件，選中頁面中E-mail:moli@163.com，在【屬性】面板中的“鏈接”地址欄中輸入“mailto：電子郵件地址”，這里輸入“mailto：moli@163.com”，如圖7.17所示。保存文件并預(yù)覽效果，單擊頁面中的E-mail:moli@163.com便可彈出窗口，如圖7.18所示。圖7.17輸入郵件地址圖7.18郵件撰寫窗口7.5鏈接到其它對象·

鏈接到下載文件在Dreamweaver中打開1.html文件，選中導(dǎo)航欄中的“茉莉下載”，觀察【屬性】面板中的鏈接地址欄，然后把下載的文件添加到文本框中，在這里我們點(diǎn)擊瀏覽文件

按鈕，選擇07/index_files/download.rar文件，如圖7.19所示。保存文件并預(yù)覽效果，單擊頁面中的“茉莉下載”，便可彈出另存為對話框，如圖7.20所示。提示用戶保存下載文件。圖7.19鏈接下載文件圖7.20“另存為”對話框7.5鏈接到其它對象·

鏈接到FTP站點(diǎn)鏈接到FTP站點(diǎn)的方法與以上介紹的鏈接方法基本一致。在Dreamweaver中打開1.html文件，選中導(dǎo)航欄中的“茉莉FTP”，在【屬性】面板中的鏈接地址欄中輸入FTP站點(diǎn)地址，這里輸入48，如圖7.21所示。保存文件并預(yù)覽效果，單擊頁面中的“茉莉FTP”，便可打開FTP站點(diǎn)，如圖7.22所示。圖7.21鏈接FTP站點(diǎn)圖7.22接到的FTP站點(diǎn)返回7.6鏈接的不同打開效果返回?_blank將鏈接的文檔載入一個新的、未命名的瀏覽器窗口。?_parent將鏈接的文檔載入該鏈接所在框架的父框架或父窗口。如果包含鏈接的框架不是嵌套框架，則所鏈接的文檔載入整個瀏

覽器窗口。?_self將鏈接的文檔載入鏈接所在的同一框架或窗口。此目標(biāo)是默認(rèn)的，所以通常不需要指定它。?_

top將鏈接的文檔載入整個瀏覽器窗口，從而刪除所有框架。另外效果比較好的超級鏈接例如：鼠標(biāo)指向顏色會隨機(jī)變化，還

有效果比較好的特效都是CSS（層疊樣式表）來完成，詳見層疊樣式表（CSS）。7.7鏈接標(biāo)記及其屬性鏈接標(biāo)記只有一個，即<A>標(biāo)記。該標(biāo)記中包括如下屬性，如表7.1所示。表7.1<A>標(biāo)記的屬性屬href性描

述指定鏈接地址NAME給鏈接命名TITLETARGETACCESSKEY給鏈接設(shè)置提示文字指定鏈接的目標(biāo)窗口鏈接熱鍵7.7鏈接標(biāo)記及其屬性站內(nèi)鏈接站內(nèi)鏈接的代碼格式如下：<A

href=“文件名”TARGET=“屬性值”>鏈接文字</A>其中，TARGET的“屬性值”包括：_blank、_parent、_self和_top四種。站外鏈接站外鏈接的代碼格式如下：<A

href=“URL”>鏈接文字</A>其中的URL格式如表7.2所示。錨點(diǎn)鏈接錨點(diǎn)鏈接的代碼格式如下：<A

NAME=“錨點(diǎn)名稱”>鏈接文字</A><A

href=“#錨點(diǎn)名稱”>鏈接文字</A>7.7鏈接標(biāo)記及其屬性表7.2

URL格式屬

性WWW

FTPEMALLURL格式

http://

ftp://

mailto:描述進(jìn)入萬維網(wǎng)站點(diǎn)進(jìn)入文件傳輸服務(wù)器啟動郵件返回本章小結(jié)鏈接是一個網(wǎng)頁的靈魂，整個網(wǎng)頁中的鏈接的條理是否清晰，對瀏覽者能否方便的瀏覽信息是至關(guān)重要的。通過本章的學(xué)習(xí)，我們應(yīng)該掌握在網(wǎng)頁中建立各種類型鏈接的方法與技巧，這將對網(wǎng)站的形成大有益處。在下一章，我們將向大家介紹能夠方便、靈活定位網(wǎng)頁元素的重要的排版工具，它就是“層”。Thank

You

!第8章網(wǎng)頁中使用圖層主要內(nèi)容8.1插入圖層18.2層中插入對象8.3層的定位238.1

插入圖層圖8.2選擇“插入”→“布局對象”→“層”·

插入層打開附帶光盤08\course\1.html文件，先將光標(biāo)置于文檔窗口中要插入層的位置，然后選擇【插入】→【布局對象】→【層】，則可插入一個層，如圖8.2所示。8.1

插入圖層圖8.3插入層·

嵌套層嵌套層就是在一層中創(chuàng)建另一層。創(chuàng)建嵌套層方法如下：在如圖8.3所示的設(shè)計(jì)視圖中，單擊【插入】面板中的【描繪層】按鈕，然后在已有的層中拖動鼠標(biāo)，即可創(chuàng)建一個嵌套層，并調(diào)整到合適大小和位置，如圖8.4所示。圖8.4插入嵌套層返回8.2

層中插入對象·

插入對象將光標(biāo)定位到層內(nèi)，就可以在層中插入文本、圖像、Flash或視頻，甚至還可以插入表格。總之，一切在網(wǎng)頁中插入的對象，在層中同樣可以插入。1．插入圖像在如圖8.4所示的設(shè)計(jì)視圖中，單擊層面板中名為layer3的層，選擇【插入】→【圖像】，彈出【選擇圖像源文件】對話框，如圖8.6所示，選擇08\image\gdl.jpg文件，圖像將被插入到層中，同時(shí)調(diào)整圖像的大小與層的大小相同。圖8.6【選擇圖像源文件】對話框8.2

層中插入對象2.插入文本在此例中，我們在layer4上插入一新層，命名為layer5，并在該層中添加若干文字，如圖8.7所示。圖8.7插入文本效果8.2

層中插入對象·

層屬性設(shè)置選擇下拉菜單中的【窗口】→【屬性】命令，打開【屬性】面板。選中創(chuàng)建好的層，【屬性】面板中會顯示出層的常用屬性。單擊【屬性】面板右下角的擴(kuò)展箭頭，可以看到層的所有屬性，如圖8.12所示。在【屬性】面板中我們可以對層的相關(guān)屬性進(jìn)行設(shè)置。圖8.12層【屬性】面板返回8.3

層的定位·

相對定位相對定位（position:relative）指的是層的位置相對于某個元素設(shè)置，該元素位置改變，則層的位置相應(yīng)改變。最簡單的設(shè)置相對定位層的的方式就是在插入層之前，先創(chuàng)建一個表格，選中某單元格，在其中插入層，即可在該位置創(chuàng)建一個固定大小的層，這個層就是相對于該位置定位的。需要注意，采用這種方式創(chuàng)建的層，你只可以使用鼠標(biāo)調(diào)整它的大小，絕對不可以移動它的位置！也就是說，在屬性面板中將層的【左】和【上】屬性值設(shè)為空，即不可以有數(shù)值。8.3

層的定位·

絕對定位絕對定位（position:absolute）就是層默認(rèn)的定位方式，絕對于瀏覽器左上角的邊緣開始計(jì)算定位數(shù)值。絕對定位也有一定的好處，當(dāng)網(wǎng)頁全部使用層來排版，而且頁面是使用默認(rèn)的居左設(shè)置，那么使用默認(rèn)的絕對定位方式可以方便的排版，提高設(shè)計(jì)的工作效率。下面我們通過實(shí)例來比較一下相對定位與絕對定位的區(qū)別，當(dāng)瀏覽器在全屏窗口下顯示的效果如圖8.13所示；而當(dāng)瀏覽器窗口的縮小時(shí)，顯示效果如圖8.14所示。8.3

層的定位相對定位絕對定位看！位置發(fā)生變化圖8.13全屏窗口效果圖8.14縮小窗口效果返回本章小結(jié)在本章中我們對層和嵌套層有了一定的認(rèn)識，并介紹了在層中插入元素的方法，以及對層屬性的設(shè)置。為了體現(xiàn)出層的優(yōu)勢，我們結(jié)合時(shí)間軸面板控制層的運(yùn)動，制作了具有動態(tài)效果的網(wǎng)頁。當(dāng)然層也有它的缺點(diǎn)，因?yàn)闉g覽器窗口大小的不同，通過層定位的元素會出現(xiàn)移位的問題，在本章中，我們介紹的層的定位知識，這個問題便可以得到解決。在頁面的層在網(wǎng)頁中占有非常重要的地位，因此請讀者熟練掌握本章內(nèi)容。在下一章中將介紹樣式表修飾網(wǎng)頁元素的有關(guān)知識，通過下一章的學(xué)習(xí)相信能夠進(jìn)一步提高網(wǎng)頁的設(shè)計(jì)技能。Thank

You

!第9章使用樣式表修飾內(nèi)容主要內(nèi)容9.1網(wǎng)頁中使用樣式的方法19.2各種樣式的應(yīng)用29.1

網(wǎng)頁中使用樣式的方法·

內(nèi)聯(lián)樣式表這種方法是將定義CSS樣式的語句放在了HTML文件的<head>標(biāo)記中。在網(wǎng)頁中使用時(shí)，在規(guī)定樣式的HTML標(biāo)記中用id=“…”或class=“…”屬性引用，作用范圍是當(dāng)前頁。9.1

網(wǎng)頁中使用樣式的方法·

外聯(lián)樣式表這種方法是將樣式表定義成一個.CSS文件，然后鏈接到網(wǎng)頁中。.CSS文件的引用是在HTML的<head>……</head>之間使用語句：<link

href=”style.css”

rel=”stylesheet”

type=”text/css”/href的屬性值表示樣式表文件的相對位置，rel表示引用文件和當(dāng)前頁面的關(guān)系，一般rel的值是stylesheet，表示當(dāng)文件是HTML主文件，引用的文件是修飾當(dāng)前文件的樣式表文件，它的作用范圍是整個網(wǎng)站內(nèi)的網(wǎng)頁，可以使得整個網(wǎng)站的網(wǎng)頁風(fēng)格保持一致，type表示樣式表的文本類型。9.1

網(wǎng)頁中使用樣式的方法·

嵌入樣式表這種方法比較簡單，只要在需要應(yīng)用樣式的HTML標(biāo)記內(nèi)書寫上CSS屬性就可以了。這種方法主要用于對具體的標(biāo)記做特定的調(diào)整，作用范圍只限于本標(biāo)記內(nèi)。它并沒有很好地體現(xiàn)出CSS的優(yōu)勢，要少用。使用方法如下：<font

style=”font:small;font-family:Arial,Helvetica,sans-serif9.1

網(wǎng)頁中使用樣式的方法·

導(dǎo)入樣式表這種方式與外聯(lián)樣式表很類似,有更高的靈活性。在同一個網(wǎng)頁中可以輸入多個樣式表，它的作用是對整個網(wǎng)頁做最籠統(tǒng)的規(guī)劃。引用方法：＠import url(文件路徑)路徑可以是樣式表相對于HTML文件的路徑，或者是一個網(wǎng)址。返回9.2

各種樣式的應(yīng)用·

文本樣式【類型】樣式用于定義網(wǎng)頁中文本的字體、顏色及字體的風(fēng)格等，如圖9.1所示。圖9.1【CSS1的CSS規(guī)則定義】對話框9.2

各種樣式的應(yīng)用·

文本樣式在Dreamweaver中打開教學(xué)光盤中的09\course\gc1.html文件，如圖9.2所示。我們將以這個網(wǎng)頁為例，在其中應(yīng)用各種類型的CSS樣式，使網(wǎng)頁最終達(dá)到整齊、美觀的效果。圖9.2初始網(wǎng)頁9.2

各種樣式的應(yīng)用·

文本樣式首先新建一個CSS1樣式，如圖9.3所示，外部樣式表文件命名為style1，如圖9.4所示。在CSS1樣式的【類型】屬性中進(jìn)行設(shè)置，如圖9.5所示。圖9.3新建CSS1樣式圖9.4保存樣式表文件9.2

各種樣式的應(yīng)用·

文本樣式圖9.5【類型】設(shè)置9.2

各種樣式的應(yīng)用·

文本樣式這時(shí)，在【CSS樣式】面板中會出現(xiàn)style1.css外部樣式文件，選擇設(shè)計(jì)視圖左下角的<body>標(biāo)簽,在【CSS樣式】面板中右擊

CSS1樣式，在彈出的快捷菜單中選擇【套用】，如圖9.6所示。這樣CSS1樣式便可應(yīng)用到該網(wǎng)頁中。圖9.6套用CSS1樣式9.2

各種樣式的應(yīng)用·

背景樣式【背景】樣式的功能是在網(wǎng)頁中加入背景顏色或背景圖像。繼續(xù)上例編輯CSS1樣式，設(shè)置其【背景】屬性，在背景圖像文本框，點(diǎn)擊【瀏覽...】按鈕選擇如圖9.7所示。圖9.7【背景】設(shè)置9.2

各種樣式的應(yīng)用·

段落樣式段落設(shè)置是在【區(qū)塊】樣式中設(shè)置完成的，【區(qū)塊】樣式是精確定義整段文本中文字的字距、對齊方式等屬性。在Dreamweaver打開gc1.html文件，插入一個層，在層中添加一段文字，在【CSS樣式】面板中右擊CSS１樣式，在彈出的快捷菜單中選擇【新建…】選項(xiàng),新建一個名為CSS2樣式，對其設(shè)置【區(qū)塊】樣式，如圖9.8所示。圖9.8【區(qū)塊】設(shè)置9.2

各種樣式的應(yīng)用·

定位樣式【定位】樣式主要用來定義層在頁面中的排布相關(guān)屬性，如圖9.9所示。圖9.9【定位】設(shè)置9.2

各種樣式的應(yīng)用·

邊框樣式【邊框】樣式可以給對象添加邊框，設(shè)置邊框的顏色、粗細(xì)以及樣式。在【CSS樣式】面板的style1樣式表文件中，新建樣式CSS3，設(shè)置其【邊框】樣式，如圖如圖9.10所示。圖9.10【邊框】設(shè)置9.2

各種樣式的應(yīng)用·

區(qū)域樣式【方框】樣式是定義特定元素的大小及其與周圍元素的間距等屬性。在CSS3樣式中設(shè)置方框樣式，如圖9.11所示。圖9.11【方框】設(shè)置9.2

各種樣式的應(yīng)用·

列表樣式【列表】樣式是用于控制現(xiàn)表內(nèi)各項(xiàng)元素，可以定義樣式的空格和對齊方式。在【CSS樣式】面板的style1樣式表文件中，新建樣式CSS4，設(shè)置其【列表】樣式，如圖9.12所示。圖9.12【列表】設(shè)置9.2

各種樣式的應(yīng)用·

光標(biāo)樣式【光標(biāo)】樣式可以指定在某個元素上要使用的光標(biāo)形狀，在【CSS樣式】面板的style1樣式表文件中，新建樣式CSS5，在【擴(kuò)展】樣式中設(shè)置【光標(biāo)】選項(xiàng)，如圖9.13所示。圖9.13【光標(biāo)】設(shè)置9.2

各種樣式的應(yīng)用·

濾鏡樣式【擴(kuò)展樣式】中的【過濾器】選項(xiàng)，可以為網(wǎng)頁中的元素施加各種奇妙的過濾器效果。單擊【過濾器】下拉列表框旁的下拉按鈕，可以選擇各種濾鏡，如圖9.14所示。圖9.14【濾鏡】設(shè)置返回本章小結(jié)本章主要介紹了CSS樣式表的基本知識及應(yīng)用方法，包括如何建立CSS樣式表、各類樣式如何設(shè)置以及如何用CSS樣式美化網(wǎng)頁。通過本章的學(xué)習(xí)使大家的網(wǎng)頁制作水平又上了一個新的臺階，在下一章節(jié)中我們將向大家介紹用來收集用戶信息的網(wǎng)頁元素—表單。Thank

You

!第10章表單應(yīng)用基礎(chǔ)主要內(nèi)容1210.2表單交互應(yīng)用10.1

Dreamweaver中插入表單310.3表單標(biāo)記介紹10.1

Dreamweaver中插入表單·

表單的基本知識表單包括兩個部分：一部分是客戶端，通過HTML源代碼實(shí)現(xiàn)，用于描述表單（如單選框，復(fù)選框，列表框，文本框等等）表單的外觀；另一部分則是客戶端腳本或服務(wù)器端應(yīng)用程序，它們是用于處理通過表達(dá)表單提交的信息。如圖10.1，表單由文本域、復(fù)選框、單選框、菜單、文件地址域、按鈕等表單對象組成，所有的部分都包含在一個由HTML的FORM標(biāo)記構(gòu)成的表單結(jié)構(gòu)中。表單的種類有注冊表、留言薄、站點(diǎn)導(dǎo)航條、搜索引擎等。10.1

Dreamweaver中插入表單圖10.1表單樣例10.1

Dreamweaver中插入表單插入表單域表單工具欄表單工具欄包括14個按鈕，它們分別是：表單域，文本框，隱藏

域，文本域，復(fù)選按鈕，單選按鈕，單選按鈕組，列表框，跳轉(zhuǎn)菜單，圖像按鈕，文件域，按鈕，標(biāo)簽和群組框。如圖10.2所示圖10.2切換到表單工具欄10.1

Dreamweaver中插入表單2．插入表單域打開配套光盤下緣代碼文件加下的chap10文件夾下的1.htm，從表單工具欄選擇第一個按鈕，即表單域，然后再設(shè)計(jì)界面的選擇位置點(diǎn)擊鼠標(biāo)。出現(xiàn)如圖10.3所示的紅色區(qū)域，那就是表單域。圖10.3插入表單域表單域10.1

Dreamweaver中插入表單2．插入表單域在表單域中插入如圖10