配套課件-《中文版Dreamweaver-CS4入門與進(jìn)階》

入門與進(jìn)階系列《中文版DreamweaverCS4

入門與進(jìn)階》第01章DreamweaverCS4學(xué)前基礎(chǔ)學(xué)習(xí)目標(biāo)

Dreamweaver是一款專業(yè)的網(wǎng)頁制作軟件，DreamweaverCS4是目前的最新版本，它強(qiáng)大的網(wǎng)頁制作功能和簡單易用的特性，受到廣大用戶的青睞。要制作精美的網(wǎng)頁，除了要熟練使用Dreamweaver外，還必須了解一些有關(guān)網(wǎng)頁制作的基礎(chǔ)知識，本章主要介紹網(wǎng)頁和網(wǎng)站的基礎(chǔ)知識、網(wǎng)頁的設(shè)計(jì)流程和DreamweaverCS4學(xué)前的一些基本操作。本章重點(diǎn)認(rèn)識網(wǎng)頁和網(wǎng)站網(wǎng)頁的設(shè)計(jì)構(gòu)思啟動Dreamweavercs4Dreamweaver工作界面1.1

認(rèn)識網(wǎng)頁和網(wǎng)站

隨著互聯(lián)網(wǎng)的迅猛發(fā)展，可以獲取、交換和存錯(cuò)連接到網(wǎng)絡(luò)上的各計(jì)算機(jī)上的信息。網(wǎng)絡(luò)上存放信息和提供服務(wù)的地方就是網(wǎng)站。一個(gè)成功的網(wǎng)站離不開精美絢麗的網(wǎng)頁，要制作出美觀的網(wǎng)頁，首先要學(xué)習(xí)網(wǎng)頁制作的相關(guān)知識，例如制作網(wǎng)頁的知識、制作網(wǎng)頁元素的知識以及設(shè)計(jì)網(wǎng)頁效果。1.1.1

網(wǎng)頁和網(wǎng)站的概念

關(guān)于網(wǎng)絡(luò)，有著各式各樣的專有名詞。弄清楚它們的概念和聯(lián)系，對于學(xué)習(xí)何種網(wǎng)絡(luò)知識都將會有極大的裨益。。1.1.2

網(wǎng)頁的基本元素

前面已經(jīng)介紹了網(wǎng)頁是一個(gè)純文本文件，通過HTML、CSS等腳本語言對頁面元素進(jìn)行標(biāo)識、然后由瀏覽器自動生成的頁面。一個(gè)網(wǎng)頁的基本元素主要包括文本、圖像和超鏈接，其他元素包括聲音、動畫、視頻、表格、導(dǎo)航欄、表單等。1.1.3

網(wǎng)頁的類型

目前，常見的網(wǎng)頁有靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁兩種。靜態(tài)網(wǎng)頁通常以.htm、.html、.shtml、.xml等形式為后綴；動態(tài)網(wǎng)頁一般以.asp、.jsp、.php、.perl、.cgi等形式為后綴。1.2

網(wǎng)頁的設(shè)計(jì)構(gòu)思

在制作網(wǎng)頁之前，首先要進(jìn)行網(wǎng)頁的設(shè)計(jì)與構(gòu)思，主要包括網(wǎng)頁的布局、網(wǎng)頁的配色、網(wǎng)設(shè)計(jì)原則，了解這些知識，是制作有別于其他網(wǎng)頁的要點(diǎn)之一。1.2.1

網(wǎng)頁的布局

網(wǎng)頁布局能決定網(wǎng)頁是否美觀。合理的布局，可以將頁面中的文字、圖像等內(nèi)容完美、直觀地展現(xiàn)給訪問者，同時(shí)合理安排網(wǎng)頁空間，優(yōu)化網(wǎng)頁的頁面效果和下載速度。反之，如果頁面布局不合理，網(wǎng)頁在瀏覽器中的顯示將十分糟糕，頁面中的各個(gè)元素顯示效果可能會重疊或丟失。因此，在對網(wǎng)頁進(jìn)行布局設(shè)計(jì)時(shí)，應(yīng)遵循對稱平衡、異常平衡、對比、凝視和空白等原則。常見的網(wǎng)頁布局形式包括：

型布局、T型布局、“三”型布局、對比布局和POP布局等。1.2.2

網(wǎng)頁的設(shè)計(jì)原則

網(wǎng)頁的設(shè)計(jì)不僅涉及各種軟件的操作技術(shù)，還關(guān)聯(lián)到設(shè)計(jì)者對生活的理解和體驗(yàn)。網(wǎng)頁設(shè)計(jì)就是要把適合的信息傳達(dá)給適合的觀眾，遵循一些必要的原則。1.2.3

網(wǎng)頁配色基礎(chǔ)

顏色的使用在網(wǎng)頁制作中起著非常關(guān)鍵的作用，色彩成功搭配的網(wǎng)站可以令人過目不忘。

1.2.4

網(wǎng)頁的構(gòu)思

在制作網(wǎng)頁之前，首先要進(jìn)行網(wǎng)頁的設(shè)計(jì)與構(gòu)思，主要包括網(wǎng)頁的主題、網(wǎng)頁的命名、網(wǎng)站標(biāo)志、色彩搭配和字體等要素。1.2.5

網(wǎng)頁的制作流程

在制作網(wǎng)頁的過程中，要遵循一定的順序才能協(xié)調(diào)分配整個(gè)制作過程的資源與進(jìn)度。網(wǎng)頁的制作流程主要如下。

1.3

初始DreamweaverCS4

隨著DreamewaverCS4作為Dreamewaver系列中的最新版本，在增強(qiáng)了面向?qū)I(yè)人士的基本工具和可視技術(shù)外，同時(shí)提供了功能強(qiáng)大、開放式且基于標(biāo)準(zhǔn)的開發(fā)模式，可以輕而易舉地制作出跨平臺和瀏覽器的動感效果網(wǎng)頁。1.3.1

DreamweaverCS4的作用

DreamweaverCS4是Adobe公司最新推出的網(wǎng)頁制作軟件，用于對網(wǎng)站、網(wǎng)頁和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。它廣泛用于網(wǎng)頁制作和網(wǎng)站管理。1.3.2

新增功能

DreamweaverCS4使用了全新的工作界面，使得插入網(wǎng)頁元素更加方便。使用DreamweaverCS4的CSS樣式表，可以創(chuàng)建新的CSS規(guī)則，并對每個(gè)屬性所適合的層疊樣式提供簡單明確的解釋。下面對DreamweaverCS4一些主要的新增功能進(jìn)行介紹。1.3.3

工作界面

DreamweaverCS4的工作界面秉承了Dreamweaver系列產(chǎn)品一貫的簡潔、高效和易用性，多數(shù)功能都能在工作界面中很方便地找到。工作界面主要由【文檔】窗口(設(shè)計(jì)區(qū))、菜單欄、狀態(tài)欄、面板組和【屬性】面板組成。入門與進(jìn)階系列《中文版DreamweaverCS4

入門與進(jìn)階》第02章創(chuàng)建站點(diǎn)和網(wǎng)頁文檔

學(xué)習(xí)目標(biāo)網(wǎng)頁文件和網(wǎng)頁中插入的元素都是保存在網(wǎng)站中的，網(wǎng)站可以分為本地網(wǎng)站和遠(yuǎn)程網(wǎng)站。本地網(wǎng)站存放在本地計(jì)算機(jī)或網(wǎng)絡(luò)服務(wù)器上，遠(yuǎn)程網(wǎng)站位于運(yùn)行Web服務(wù)器的計(jì)算機(jī)上。使用DreamweaverCS4制作網(wǎng)頁時(shí)，首先要?jiǎng)?chuàng)建本地站點(diǎn)，創(chuàng)建本地站點(diǎn)后可以創(chuàng)建網(wǎng)頁文檔。本章介紹了本地站點(diǎn)的創(chuàng)建和網(wǎng)頁文檔的基本操作。本章重點(diǎn)創(chuàng)建本地站點(diǎn)管理本地站點(diǎn)網(wǎng)頁文檔的基本操作查看和編輯頭部內(nèi)容2.1

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

在建立網(wǎng)站之前，首先應(yīng)設(shè)計(jì)和規(guī)劃好整個(gè)站點(diǎn)，繼而才能進(jìn)行具體的網(wǎng)頁制作過程。下面主要介紹使用不同的方法創(chuàng)建和管理站點(diǎn)的方法，創(chuàng)建不同類型文檔的方法以及網(wǎng)頁制作的常用操作。2.1.1

站點(diǎn)的概念

在DreamweaverCS4中創(chuàng)建本地站點(diǎn)，也就是在本地計(jì)算機(jī)中創(chuàng)建的站點(diǎn)，所有的站點(diǎn)內(nèi)容都保存在本地計(jì)算機(jī)中，本地計(jì)算機(jī)可以看成是網(wǎng)絡(luò)中的站點(diǎn)服務(wù)器。簡單地說，網(wǎng)站建立在互聯(lián)網(wǎng)基礎(chǔ)之上，是以計(jì)算機(jī)、網(wǎng)絡(luò)和通信技術(shù)為依托，通過一臺或多臺安裝了系統(tǒng)程序、服務(wù)程序及相關(guān)應(yīng)用程序的計(jì)算機(jī)，向訪問者提供相應(yīng)的服務(wù)。2.1.2

規(guī)劃站點(diǎn)

規(guī)劃站點(diǎn)主要是規(guī)劃站點(diǎn)的結(jié)構(gòu)。創(chuàng)建站點(diǎn)既可以創(chuàng)建一個(gè)網(wǎng)站，又可以創(chuàng)建一個(gè)本地網(wǎng)頁文件的存儲地址，規(guī)劃好站點(diǎn)后即可開始創(chuàng)建站點(diǎn)。2.1.3

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

在創(chuàng)建站點(diǎn)之前，一般在本地將整個(gè)網(wǎng)絡(luò)完成，然后再將站點(diǎn)上傳到Web服務(wù)器上。創(chuàng)建本地站點(diǎn)可以使用向?qū)?chuàng)建也可以使用高級面板創(chuàng)建。2.1.4

管理本地站點(diǎn)

創(chuàng)建好本地站點(diǎn)后，可以進(jìn)行一些基本的編輯操作，主要包括編輯、刪除和復(fù)制站點(diǎn)等。2.2

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

創(chuàng)建好本地站點(diǎn)后，可以根據(jù)需要?jiǎng)?chuàng)建各欄目文件夾和文件，對于創(chuàng)建好的站點(diǎn)，也可以進(jìn)行再次編輯，或刪除和復(fù)制這些站點(diǎn)。2.2.1

新建文件和文件夾

創(chuàng)建文件夾和文件相當(dāng)于規(guī)劃站點(diǎn)。選擇【窗口】|【文件】命令，打開【文件】面板。右擊站點(diǎn)根目錄，在彈出的快捷菜單中選擇【新建文件夾】命令，即可新建名為untitled的文件夾；選擇【新建文件】命令，可以新建名為untitled的文件。2.2.2

編輯站點(diǎn)文件

編輯站點(diǎn)文件操作主要包括重命名文件或文件夾以及刪除文件或文件夾。2.3

網(wǎng)頁文檔基本操作

DreamweaverCS4提供了多種創(chuàng)建文檔的方法，可以創(chuàng)建一個(gè)新的空白HTML文檔，或使用模板創(chuàng)建新文檔。2.3.1

創(chuàng)建空白網(wǎng)頁文檔

空白網(wǎng)頁文檔是學(xué)DreamweaverCS4最常用的文檔。下面通過實(shí)例來介紹創(chuàng)建空白網(wǎng)頁文檔的方法。2.3.2

打開和保存網(wǎng)頁文檔

打開和保存網(wǎng)頁文檔的方法非常簡單。在打開網(wǎng)頁文檔時(shí)，可以選中所需打開的文檔，也可以打開最近的文檔。。2.3.3

設(shè)置網(wǎng)頁文檔屬性

網(wǎng)頁文檔的屬性主要包括頁面標(biāo)題、背景圖像、背景顏色、文本和鏈接顏色、邊距等。其中，【頁面標(biāo)題】確定和命名了文檔的名稱，【背景圖像】和【背景顏色】決定了文檔顯示的外觀，【文本顏色】和【鏈接顏色】幫助站點(diǎn)訪問者區(qū)別文本和超文本鏈接等。2.4

查看和編輯頁面頭部內(nèi)容

一個(gè)完整的HTML網(wǎng)頁文件包含head和body兩個(gè)部分，head部分包括許多不可見的信息，例如語言編碼、版權(quán)聲明、關(guān)鍵字等。下面介紹有關(guān)頁面頭部內(nèi)容的設(shè)置操作。2.4.1

顯示文檔頭部信息

頭部信息除了文檔Title外，其余都是不可見的，要查看這些頭部信息，可以使用【查看】菜單，或在代碼視圖中查看。顯示頭部信息打開一個(gè)網(wǎng)頁文件，選擇【查看】|【文件頭內(nèi)容】命令，文檔頭部中的元素將以圖標(biāo)的形式顯示在文檔窗口的設(shè)計(jì)視圖左上角。2.4.2

插入頭部內(nèi)容元素

選擇【窗口】|【插入】命令，打開【插入】面板，切換到【常用】類別，單擊【文件頭】按鈕旁邊的下拉箭頭，在彈出的菜單中可以選擇META、【關(guān)鍵字】、【說明】、【刷新】、【基礎(chǔ)】和【鏈接】命令，插入相應(yīng)的頭部內(nèi)容元素。入門與進(jìn)階系列《中文版DreamweaverCS4

入門與進(jìn)階》第03章規(guī)劃網(wǎng)頁布局

學(xué)習(xí)目標(biāo)

表格和框架是DreamweaverCS4中最常用的布局工具，表格在網(wǎng)頁中不僅可以排列數(shù)據(jù)，還可以對頁面中的圖像、文本、動畫等元素進(jìn)行準(zhǔn)確的定位，使頁面顯得整齊有序、分類明確，便于瀏覽。使用框架規(guī)劃網(wǎng)頁，可以把網(wǎng)頁分成幾個(gè)部分，每個(gè)部分都是一個(gè)獨(dú)立的HTML頁。本章主要介紹使用表格和利用框架規(guī)劃網(wǎng)頁布局。本章重點(diǎn)

圖像文件的顏色模式使用可視化助理使用表格編輯表格使用表格規(guī)劃網(wǎng)頁布局使用框架規(guī)劃網(wǎng)頁布局3.1

可視化助理

DreamweaverCS4提供了【標(biāo)尺】和【網(wǎng)格】功能，用于輔助設(shè)計(jì)網(wǎng)頁文檔?！緲?biāo)尺】功能可以輔助測量、組織和規(guī)劃布局。【網(wǎng)格】功能可以絕對定位的網(wǎng)頁元素在移動時(shí)自動靠齊網(wǎng)格，還可以通過指定網(wǎng)格設(shè)置更改網(wǎng)格或控制靠齊行為。3.1.1

使用【標(biāo)尺】功能

在設(shè)計(jì)頁面時(shí)需要設(shè)置頁面元素的位置，可以使用【標(biāo)尺】功能。選擇【查看】|【標(biāo)尺】|【顯示】命令，可以在文檔中顯示【標(biāo)尺】，。重復(fù)操作，可以隱藏顯示標(biāo)尺。3.1.2

使用【網(wǎng)格】功能

【網(wǎng)格】功能的作用是在【設(shè)計(jì)】視圖中對APDiv進(jìn)行繪制、定位或大小調(diào)整做可視化向?qū)?，可以對齊頁面中的元素。選擇【查看】|【網(wǎng)格】|【顯示網(wǎng)格】命令，可以在網(wǎng)頁文檔中顯示網(wǎng)格。重復(fù)操作，可以隱藏顯示網(wǎng)格。3.1.3

使用【跟蹤圖像】功能

在2.2.3【設(shè)置網(wǎng)頁文檔屬性】小節(jié)中已經(jīng)介紹了【跟蹤圖像】的作用，載入某個(gè)網(wǎng)頁的布局(或圖片)，然后借助該網(wǎng)頁的布局來安排正在制作的網(wǎng)頁布局。選擇【查看】|【跟蹤圖像】|【載入】命令，打開【選擇圖像源文件】對話框，選擇要載入的圖片文件，單擊【確定】按鈕。3.2

使用表格

表格是網(wǎng)頁中非常重要的元素，是網(wǎng)頁排版的主要手段，可以幫助設(shè)計(jì)者高效、準(zhǔn)確地定位各種網(wǎng)頁數(shù)據(jù)，直觀、鮮明地表達(dá)設(shè)計(jì)者的思想，向?yàn)g覽者提供條理、清晰的多樣化信息。3.2.1

Dreamweaver中的表格

表格在Dreamweaver中是用于在HTML頁上顯示表格式數(shù)據(jù)以及對文本和圖形進(jìn)行布局的工具。表格由一行或多行組成，每行又由一個(gè)或多個(gè)單元格組成。當(dāng)選定了表格或表格中有插入點(diǎn)時(shí)，Dreamweaver會顯示表格寬度和每個(gè)表格列的列寬。寬度旁邊是表格標(biāo)題菜單與列標(biāo)題菜單的箭頭。使用這些菜單可以快速訪問與表格相關(guān)的常用命令?？梢詥⒂没蚪脤挾群筒藛?。3.2.2

插入表格

DreamweaverCS4提供了極為方便地插入表格的方法，并且可以設(shè)置插入表格的相關(guān)屬性，例如邊距、間距、寬度等。選擇【插入】|【表格】命令，或者單擊【插入】面板的【常用】類別中的【表格】按鈕上，打開【表格】對話框。3.2.3

插入嵌套表格

嵌套表格就是在已經(jīng)存在的表格中插入的表格。插入嵌套表格的方法與插入表格的方法相同。3.3

編輯表格

創(chuàng)建表格后，可以對表格進(jìn)行編輯，包括合并和拆分單元格、添加和刪除單元格、設(shè)置單元格和表格屬性等。3.3.1

選擇表格

選擇表格是對表格進(jìn)行編輯操作的前提。在DreamewaverCS4中，可以一次選擇整個(gè)表、行或列，也可以選擇連續(xù)的單元格。

3.3.2

表格的編輯制作

表格的編輯操作是通過設(shè)置表格單元格的屬性來改變表格的外觀，可以對網(wǎng)頁中的表格及單元格進(jìn)行調(diào)整大小、添加及刪除行列、合并拆分單元格等操作。3.3.3

表格的其他操作

表格除了常用的編輯操作外，還可以進(jìn)行設(shè)置表格排序、復(fù)制剪切和導(dǎo)入導(dǎo)出操作。3.3.4

【擴(kuò)展表格】模式

【擴(kuò)展表格】模式是臨時(shí)向網(wǎng)頁文檔中的所有表格添加單元格邊距和間距，并且增加表格的邊框以使編輯操作更加容易。在該模式中，可以選擇表格中的項(xiàng)目或者精確地放置插入點(diǎn)，從而避免無意中選中該圖像或表格單元格。3.4

使用框架布局網(wǎng)頁

框架是將瀏覽器窗口劃分為多個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁，并且各個(gè)框架之間不存在干擾，在網(wǎng)頁模板出現(xiàn)之前，框架技術(shù)是最常用的布局網(wǎng)頁工具之一。3.4.1

框架的概念

框架頁面通過框架將網(wǎng)頁分成多個(gè)獨(dú)立的區(qū)域，在每個(gè)區(qū)域可以單獨(dú)顯示不同的網(wǎng)頁，每個(gè)區(qū)域可以獨(dú)立翻滾。正是基于框架頁面的這種特點(diǎn)，使用框架可以極大豐富網(wǎng)頁設(shè)計(jì)的自由度，在不同的頁面部分設(shè)置不同的網(wǎng)頁屬性，尤其是對于頁面間的鏈接，可以使頁面的結(jié)構(gòu)變化自如。3.4.2

布局網(wǎng)頁文檔

DreamweaverCS4提供了多種常用的框架結(jié)構(gòu)方便對網(wǎng)頁進(jìn)行布局，可以創(chuàng)建框架網(wǎng)頁，也可以在普通HTML網(wǎng)頁中應(yīng)用框架。3.4.3

保存框架

在瀏覽器中預(yù)覽包含框架或框架集的網(wǎng)頁文檔之前，必須保存框架集文件以及要在框架中顯示的所有文檔?？梢詥为?dú)保存每個(gè)框架集文件和帶框架的文檔，也可以同時(shí)保存框架集文件和框架中出現(xiàn)的所有文檔。3.5

編輯框架

編輯框架主要包括選擇框架、設(shè)置框架屬性。此外，框架并不是在所有瀏覽器中都可以顯示的，對于不能顯示的瀏覽器，就需要在標(biāo)簽中輸入提示信息。3.5.1

框架的基本操作

框架的基本操作主要包括創(chuàng)建嵌套框架、選擇框架以及設(shè)置框架的屬性等。3.5.2

設(shè)置框架和框架集屬性

選中框架或框架集后，可以在【屬性】面板中設(shè)置框架或框架集不同屬性。入門與進(jìn)階系列《中文版DreamweaverCS4

入門與進(jìn)階》第04章插入網(wǎng)頁基本元素

學(xué)習(xí)目標(biāo)文本和圖像就可以組成一個(gè)基本網(wǎng)頁，它們也是網(wǎng)頁最基本的元素。文本是向?yàn)g覽者傳遞信息的主要手段；圖像起到了畫龍點(diǎn)睛的作用，不僅可以美化網(wǎng)頁，還可以展現(xiàn)生動的視覺效果。本章將學(xué)習(xí)在網(wǎng)頁中插入文本和圖像，對文本和對象進(jìn)行編輯操作，制作基本網(wǎng)頁。本章重點(diǎn)插入文本編輯文本插入圖像編輯圖像4.1

在網(wǎng)頁中添加文本

文本是網(wǎng)頁中最常見也是運(yùn)用最廣泛的元素之一，是網(wǎng)頁內(nèi)容的核心部分。在DreamweaverCS4中可以直接輸入文本，也可以從其他文檔中復(fù)制文本和導(dǎo)入文本。4.1.1

【文本】插入欄

應(yīng)用【文本】插入欄，可以在文檔中快速插入各種類型的文本。選擇【窗口】|【插入】命令，打開【插入】面板，拖動面板至【文檔】窗口頂部的水平位置，可【插入】面板更改為【插入】工具欄。單擊【文本】選項(xiàng)卡，打開【文本】插入欄。4.1.2

插入文本

在DreamweaverCS4的【設(shè)計(jì)】視圖中輸入文本與在記事本或Word中輸入文本的方法相同，將光標(biāo)移至要插入文本位置，然后直接輸入即可。輸入文本的排列方式由左到右，跟其他軟件都是相同的，遇到編輯口的邊界時(shí)會自動換行，例如在表格中輸入文本內(nèi)容。4.1.3

插入特殊字符

在網(wǎng)頁文檔中常見的特殊符號有版權(quán)符號、貨幣符號、注冊商標(biāo)號以及直線等。單擊【插入】工具欄中的【文本】選項(xiàng)卡，打開【文本】插入欄。單擊【字符】按鈕旁邊的下拉箭頭，在彈出的下拉菜單中可以選擇要插入的字符類型。4.1.4

插入水平線

當(dāng)網(wǎng)頁中的元素較多時(shí)，可以用水平線對信息進(jìn)行組織。在網(wǎng)頁中，可以使用一條或多條水平線來可視化分隔文本和對象，使用段落更加分明和更具層次感。插入日期對象，可以以任何格式插入當(dāng)前的日期(可以包括時(shí)間)，并且在每次保存文件時(shí)都會自動更新該日期。4.1.5

插入日期

使用DreamweaverCS4可以直接在文檔中插入當(dāng)前時(shí)間和日期，還可以利用JavaScript代碼來實(shí)現(xiàn)動態(tài)變化的時(shí)間和日期。4.2

編輯文本

編輯文本操作，可以將網(wǎng)頁中的文本設(shè)置成色彩紛呈、樣式各異的文本，使枯燥的文本更顯生動。編輯文本的操作主要指設(shè)置文本的基本格式，例如文本字體、字體顏色、對齊方式等。4.2.1

設(shè)置文本樣式

網(wǎng)頁文本的基本樣式主要包括文本的字體、大小和顏色等，對這些樣式的設(shè)置也就是對文本外觀的設(shè)置。4.2.2

設(shè)置文本段落格式

文本的段落格式主要包括縮進(jìn)方式、對齊方式和設(shè)置列表項(xiàng)等。4.2.3

設(shè)置列表

列表是指將具有相似特性或某種順序的文本進(jìn)行有規(guī)則的排列。通過列表阻止方式，可以明確的表現(xiàn)信息的層次關(guān)系，突出重點(diǎn)。4.3

在網(wǎng)頁中插入圖像

圖像是網(wǎng)頁上最基本的元素之一，制作精美的圖像可以大大增強(qiáng)網(wǎng)頁的視覺效果。圖像所蘊(yùn)涵的信息量對于網(wǎng)頁而言越加顯得重要。在網(wǎng)頁中插入圖像通常是用于添加圖形界面(例如按鈕)、創(chuàng)建具有視覺感染力的內(nèi)容(例如照片、背景等)或交互式設(shè)計(jì)元素(例如鼠標(biāo)指針經(jīng)過圖像)。4.3.1

網(wǎng)頁中常用的圖像格式

網(wǎng)頁中常用的圖像文件格式有JPEG(JPG)、GIF和PNG這3種。GIF(圖形交換格式)：GIF文件最多使用256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像，例如導(dǎo)航條、按鈕、圖標(biāo)或其他具有統(tǒng)一色彩和色調(diào)的圖像。JPEG(聯(lián)合圖像專家組標(biāo)準(zhǔn))：JPEG文件格式是用于攝影或連續(xù)色調(diào)圖像的高級圖片文件格式，這種格式的圖片可以包含數(shù)百萬種顏色。PNG(可移植網(wǎng)絡(luò)圖形)：PNG文件格式是一種替代GIF格式的無專利權(quán)限制的格式，這種格式的圖片具備對索引色、灰度、真彩色圖像以及alpha通道透明的支持。4.3.2插入圖像

如果網(wǎng)頁中的內(nèi)容全是密密麻麻的文字，很容易產(chǎn)生厭煩感，往往不能吸引瀏覽者的眼球，一個(gè)漂亮的網(wǎng)頁通常是圖文并茂的。在網(wǎng)頁中適當(dāng)?shù)夭迦雸D像可以使網(wǎng)頁增色不少，更重要是可以借此直觀地向?yàn)g覽者表達(dá)信息。4.3.3

制作鼠標(biāo)經(jīng)過圖像

鼠標(biāo)經(jīng)過圖像是由原始圖像和鼠標(biāo)經(jīng)過圖像組成，簡單來說就是當(dāng)鼠標(biāo)經(jīng)過圖像時(shí)，原始圖像會變成另一張圖像，因此組成鼠標(biāo)經(jīng)過圖像的兩張圖像必須是相同的大小。如果兩張圖像大小不同，系統(tǒng)會自動將第2張圖像大小調(diào)整為與第1張圖像同樣大小。4.4

編輯圖像

在網(wǎng)頁中插入圖像后，可以進(jìn)行設(shè)置圖像屬性、對齊方式等編輯操作，這些編輯操作可以直接影響網(wǎng)頁的整體效果。4.4.1

設(shè)置圖像屬性

在文檔中插入圖像后，需要經(jīng)常對圖像進(jìn)行大小、對齊方式、邊距等屬性的設(shè)置可以在【屬性】面板中對進(jìn)行設(shè)置。4.4.2

使用圖像編輯器

圖像編輯器，主要分為內(nèi)部圖像編輯器和外部圖像編輯器。入門與進(jìn)階系列《中文版DreamweaverCS4

入門與進(jìn)階》第05章使用CSS樣式美化網(wǎng)頁

學(xué)習(xí)目標(biāo)

CSS是一種用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的樣式表技術(shù)，使用CSS樣式可以對頁面的布局、字體、顏色、背景和其他圖文效果實(shí)現(xiàn)更加精確地控制，并且同一個(gè)樣式可以應(yīng)用于多個(gè)不同的對象，提高制作效率。本章介紹了使用CSS樣式來美化網(wǎng)頁的方法。本章重點(diǎn)

CSS樣式的基礎(chǔ)知識使用CSS樣式編輯CSS樣式設(shè)置CSS樣式5.1

CSS樣式的基礎(chǔ)知識

CSS樣式是CascadingStyleSheets(層疊樣式單)的簡稱，也可以稱為【級聯(lián)樣式表】，它是一種網(wǎng)頁制作的新技術(shù)，利用它可以對網(wǎng)頁中的文本進(jìn)行精確的格式化控制。5.1.1

CSS樣式簡介

在CSS樣式之前，HTML樣式被廣泛應(yīng)用，HTML樣式用于控制單個(gè)文檔中某范圍內(nèi)文本的格式。CSS樣式與之不同，它不僅可以控制單個(gè)文檔中的多個(gè)范圍內(nèi)文本的格式，而且可以控制多個(gè)文檔中文本的格式。要管理一個(gè)系統(tǒng)的網(wǎng)站，使用CSS樣式，可以快速格式化整個(gè)站點(diǎn)或多個(gè)文檔中的字體、圖像等網(wǎng)頁元素的格式。并且，CSS樣式可以實(shí)現(xiàn)多種不能用HTML樣式實(shí)現(xiàn)的功能。5.1.2

CSS樣式表功能

CSS，是用來控制一個(gè)網(wǎng)頁文檔中的某文本區(qū)域外觀的一組格式屬性。使用CSS能夠簡化網(wǎng)頁代碼，加快下載速度，減少上傳的代碼數(shù)量，從而可以避免重復(fù)操作。CSS樣式表是對HTML語法的一次革新，它位于文檔的<head>區(qū)，作用范圍由CLASS或其他任何符合CSS規(guī)范的文本來設(shè)置。對于其他現(xiàn)有的文檔，只要其中的CSS樣式符合規(guī)范，Dreamweaver就能識別它們。5.1.3

CSS樣式規(guī)則

CSS樣式規(guī)則由兩部分組成：選擇器和聲明(大多數(shù)情況下為包含多個(gè)聲明的代碼塊)。選擇器是標(biāo)識已設(shè)置格式元素的術(shù)語，例如p、h1、類名稱或ID，而聲明塊則用于定義樣式屬性。例如下面CSS規(guī)則中，h1是選擇器，大括號({})之間的所有內(nèi)容都是聲明塊。h1{font-size:12pixels;font-family:TimesNewRoman;font-weight:bold;}5.2

使用CSS樣式

在DreamweaverCS4中，首先創(chuàng)建一個(gè)CSS樣式，然后應(yīng)用到網(wǎng)頁文檔的單個(gè)或多個(gè)元素，完成文本的格式化。5.2.1

【CSS樣式】面板

在【CSS樣式】面板中顯示了當(dāng)前所選頁面元素的CSS規(guī)則和屬性，也可以跟蹤網(wǎng)頁文檔可用的所有規(guī)則和屬性。選擇【窗口】|【CSS樣式】命令，打開【CSS樣式】面板。

5.2.2新建CSS樣式規(guī)則

在DreamweaverCS4中，可以很方便地創(chuàng)建、編輯CSS樣式表定義，并且不需要直接編輯CSS代碼，即使不懂CSS層疊樣式表定義語法，也能輕松完成定義。在DreamweaverCS4中新建CSS樣式規(guī)則，可以在【新建文檔】對話框中創(chuàng)建，也可以在【CSS樣式】對話框面板中創(chuàng)建。5.2.3定義CSS樣式規(guī)則

在【CSS規(guī)則定義】對話框中，可以定義【類型】、【背景】、【區(qū)塊】、【方框】、【邊框】、【列表】、【定位】和【擴(kuò)展】8個(gè)屬性。下面將介紹這8中類型屬性的定義方法。5.2.4使用CSS樣式

新建CSS規(guī)則樣式后，就可以利用該樣式快速設(shè)置頁面上的網(wǎng)頁元素樣式，使網(wǎng)站具有統(tǒng)一的風(fēng)格了。在DreamweaverCS4中，要對文檔指定元素應(yīng)用CSS樣式，可以在【屬性】面板中設(shè)定、在標(biāo)簽處設(shè)定、在【標(biāo)簽檢查器】面板組的【屬性】面板中和右擊文檔選擇快捷菜單設(shè)定。。5.3編輯CSS樣式

對于創(chuàng)建的CSS樣式，可以進(jìn)行編輯操作，主要包括修改CSS樣式屬性、設(shè)置CSS樣式首選參數(shù)以及鏈接和導(dǎo)入CSS樣式等。5.3.1

修改創(chuàng)建的樣式

CSS樣式表通常包含一個(gè)或多個(gè)規(guī)則?？梢栽凇綜SS規(guī)則定義】對話框中修改已經(jīng)創(chuàng)建的CSS樣式表中的各個(gè)規(guī)則，也可以直接在【CSS樣式】面板中操作。5.3.2移動CSS規(guī)則樣式

在DreamweaverCS4中的CSS規(guī)則，可以很方便地移動到不同位置，例如將規(guī)則在文檔間移動、從文檔頭移動到外部樣式表、在外部CSS文件之間移動等等。5.3.3鏈接與導(dǎo)入CSS樣式

單擊【CSS樣式】面板中的【附加樣式表】按鈕，打開【鏈接外部樣式表】對話框，可以鏈接和導(dǎo)入樣式表。入門與進(jìn)階系列《中文版DreamweaverCS4

入門與進(jìn)階》第06章設(shè)計(jì)精美的網(wǎng)頁

學(xué)習(xí)目標(biāo)隨著多媒體技術(shù)的發(fā)展，多媒體在網(wǎng)絡(luò)上得到了廣泛的應(yīng)用。在網(wǎng)頁文檔中加入Flash動畫、音樂和JavaApplet等動態(tài)元素，可以使網(wǎng)頁效果更具動感效果、讓網(wǎng)頁更加精彩。此外，還可以添加網(wǎng)頁特效，制作別具一格的網(wǎng)頁。本章主要介紹了插入多媒體元素來設(shè)計(jì)精美的網(wǎng)頁。本章重點(diǎn)插入導(dǎo)航條插入Flash動畫插入音樂元素在網(wǎng)頁中添加特效6.1

制作導(dǎo)航條

導(dǎo)航條是由一個(gè)或多個(gè)圖像組成，它的顯示隨著動作的改變而改變，它就像圖書目錄一樣，在瀏覽網(wǎng)站時(shí)起到指引方向的作用，能夠快速地找到所需的內(nèi)容。6.1.1

插入導(dǎo)航條

導(dǎo)航條其實(shí)就是一個(gè)圖像集，根據(jù)鼠標(biāo)的動作，【導(dǎo)航條】的圖像通常有以下4種狀態(tài)?！疽话恪浚荷形磫螕魰r(shí)所顯示的初始圖像。【滑過】：當(dāng)指針從圖像上經(jīng)過時(shí)顯示的圖像?！景聪隆浚簡螕魧?dǎo)航條圖像時(shí)顯示的圖像?！景聪聲r(shí)鼠標(biāo)經(jīng)過】：單擊圖像后，當(dāng)指針滑過該圖像時(shí)顯示的圖像。選擇【插入】|【圖像對象】|【導(dǎo)航條】命令，打開【插入導(dǎo)航條】對話框。6.1.2

插入導(dǎo)航條

用戶在文檔創(chuàng)建導(dǎo)航條后，選擇【修改】|【導(dǎo)航條】命令，打開【修改導(dǎo)航條】對話框。在該對話框中可以添加圖像，或從導(dǎo)航條中刪除圖像。用于更改圖像或圖像組、更改單擊項(xiàng)目時(shí)所打開的文件、選擇在不同的窗口或框架中打開文件以及重新排序圖像。6.2

在網(wǎng)頁文檔中插入Flash動畫

Flash動畫是網(wǎng)頁上最流行的動畫格式。在DreamweaverCS4中，F(xiàn)lash動畫也是最常用的多媒體插件之一，它將聲音、圖像和動畫等內(nèi)容加入到一個(gè)文件中，并能制作較好的動畫效果，同時(shí)還使用了優(yōu)化的算法將多媒體數(shù)據(jù)進(jìn)行壓縮，是文件變得很小，因此，非常適合在網(wǎng)上傳播。6.2.1

Flash動畫類型

Flash源文件(.fla)：使用Flash應(yīng)用程序創(chuàng)建的項(xiàng)目的原始文件。這種類型的文件只能在Flash種打開，不能在Dreamweaver或?yàn)g覽器種打開。但在Flash中打開該類型文件后，會自動生成可用于瀏覽器的SWF文件或SWT文件。Flash電影文件(.swf)：Flash電影文件是一中壓縮了的Flash源文件，可以瀏覽器中播放，也可以在Dreamweaver中預(yù)覽，但不能進(jìn)行編輯。當(dāng)使用Flash按鈕和文本對象時(shí)可以創(chuàng)建該類型文件。Flash庫文件(.swt)：用于修改或替換Flash電影文件中的信息。它允許使用文本或鏈接來修改模板，創(chuàng)建自定義SWF文件并插入到網(wǎng)頁文檔中。Flash元素(.swc)：是一種FlashSWF文件，將該類型文件合并到網(wǎng)頁中，可以創(chuàng)建豐富的Internet應(yīng)用程序。Flash元素有可自定義的參數(shù)，修改這些參數(shù)可以執(zhí)行不同的應(yīng)用程序功能。6.2.2

插入Flash動畫

將光標(biāo)移至所需插入Flash動畫的位置，選擇【插入】|【媒體】|SWF命令，打開【選擇文件】對話框。選擇所需插入的Flash動畫，單擊【確定】按鈕，即可插入到網(wǎng)頁文檔中。6.2.3

設(shè)置Flash動畫屬性

在網(wǎng)頁文檔中插入Flash動畫文件后，選中SWF對象，打開【屬性】面板，除了【例6-1】中介紹的播放和停止播放動畫外，還可以設(shè)置其他屬性6.2.4

插入FlashPaper

在瀏覽器中打開包含F(xiàn)lashPaper文檔的頁面時(shí)，可以瀏覽FlashPaper文檔中的所有頁面，并且不需要加載新的Web頁。要在網(wǎng)頁文檔中插入FlashPaper，將光標(biāo)移至要插入Flash文本的位置，選擇【插入】|【媒體】|FlashPaper命令，打開【插入FlashPaper】對話框。6.2.5

插入FLV視頻

FLV是Flash視頻文件，在文檔中插入的FLV文件是以SWF組件顯示的，當(dāng)在瀏覽器中查看時(shí)，該組件顯示所選的FLV文件以及一組播放控件。6.3

插入其他媒體文件

除了插入的Flash媒體文件外，還可以插入Shockwave影片、JavaApplet和插件等，但這些元素并不常用，下面就簡單介紹下這些元素的插入方法6.3.1

插入Shockwave影片

Shockwave影片是多媒體影片文件，文件較小，被廣泛應(yīng)用于制作多媒體光盤和游戲等領(lǐng)域。選擇【插入】|【媒體】|Shockwave命令，打開【選擇文件】對話框，現(xiàn)在要插入的Shockwave影片，單擊【確定】按鈕即可插入到網(wǎng)頁文檔中，在【屬性】面板中可以設(shè)置影片大小。6.3.2

添加JavaApplet

JavaApplet是使用Java語言編寫的一種應(yīng)用程序，它具有動態(tài)、安全和跨平臺等特點(diǎn)，能夠在網(wǎng)頁中實(shí)現(xiàn)一些特殊效果。選擇【插入】|【媒體】|Apple命令，打開【選擇文件】對話框，選擇插入的JavaApplet文件，單擊【確定】按鈕，插入到網(wǎng)頁文檔中。選中JavaApplet文件，打開【屬性】面板，可以在【寬】和【高】文本框中輸入JavaApplet大小，單擊【參數(shù)】按鈕，可以打開【參數(shù)】對話框進(jìn)行參數(shù)設(shè)置。6.4

在網(wǎng)頁文檔中插入聲音

現(xiàn)在瀏覽器能支持的多媒體文件越來越多，文件也越來越小，但表現(xiàn)的效果卻越來越好。在網(wǎng)頁中，可以插入聲音文件，并可以在瀏覽器中播放。6.4.1

網(wǎng)頁中聲音文件的格式

在DreamweaverCS4中，可以向網(wǎng)頁文檔添加多種不同類型的聲音文件和格式，例如.wav、.midi和.mp3。根據(jù)要添加聲音的目的、文件大小、聲音品質(zhì)等要素，來確定插入哪種格式和方法。6.4.2

直接插入聲音

要在網(wǎng)頁中加入聲音文件，將光標(biāo)移至插入聲音文件的位置，選中【插入】|【媒體】|【插件】命令，打開【選擇文件】對話框，選擇要插入的聲音文件，單擊【確定】按鈕即可插入到網(wǎng)頁中。6.4.3

添加背景音樂

打開添加背景音樂的我那個(gè)也時(shí)，背景音樂會自動播放，為網(wǎng)頁增色不少。要為網(wǎng)頁添加背景音樂，可以在代碼中輸入代碼完成操作。6.5

在網(wǎng)頁文檔中添加特效

在DreamweaverCS4中，可以通過在【代碼】視圖中添加代碼，添加一些特殊效果，例如鼠標(biāo)特效、滾動條和頁面特效等。6.5.1

添加鼠標(biāo)特效

切換到【代碼】視圖，添加正確的鼠標(biāo)特效代碼，即可在瀏覽器中預(yù)覽插入的鼠標(biāo)特效。6.5.2

插入滾動條

滾動條在Dreamweaver中是不常用到的元素，但在網(wǎng)頁中經(jīng)常能看到一些滾動信息，要在Dreamweaver中創(chuàng)建滾動條，可以在【代碼】視圖中輸入正卻的代碼，添加滾動條。滾動條代碼如下，文本內(nèi)容“暫無滾動信息”即為滾動條顯示信息，可以插入其他元素代替。<marquee>暫無滾動信息</marquee>保存網(wǎng)頁文檔，按下F12鍵，即可在瀏覽器中預(yù)覽滾動條。6.5.3

添加頁碼特效

在【代碼】視圖中插入正確的代碼，可以實(shí)現(xiàn)一些特殊的頁面效果，下面通過實(shí)例來介紹插入代碼制作頁面特效的方法。入門與進(jìn)階系列《中文版DreamweaverCS4

入門與進(jìn)階》第07章使用超鏈接和層

學(xué)習(xí)目標(biāo)超鏈接是網(wǎng)頁中至關(guān)重要的元素之一，它可以實(shí)現(xiàn)頁面之間的互相跳轉(zhuǎn)，從而有機(jī)地將網(wǎng)站中的每個(gè)頁面聯(lián)系起來。此外，還可以創(chuàng)建電子郵件，熱點(diǎn)圖像等超鏈接。層的使用也非常廣泛，可以定位頁面上的任意位置，在層中可以插入各種元素。本章主要介紹有關(guān)超鏈接和層的使用方法。本章重點(diǎn)認(rèn)識超鏈接創(chuàng)建超鏈接管理超鏈接使用層使用Spry框架7.1

超鏈接簡介

超鏈接是網(wǎng)頁中最重要的組成部分。超鏈接的應(yīng)用范圍很廣，利用它不僅可以鏈接到其他網(wǎng)頁，還可以鏈接到其他圖像文件、多媒體文件及下載程序，也可以利用它在網(wǎng)頁內(nèi)部進(jìn)行鏈接或是發(fā)送E-mail等。在DreamweaverCS4中，可以將文檔中的任何文字及任意位置的圖片設(shè)置為超鏈接。7.1.1

認(rèn)識超鏈接

超鏈接與URL及網(wǎng)頁文件的存放路徑是緊密相關(guān)的。URL可以簡單地稱為網(wǎng)址，顧名思義，就是Internet文件在網(wǎng)上的地址，定義超鏈接其實(shí)就是指定一個(gè)URL地址來訪問它指向的Internet資源。URL(UniformResoureLocator，統(tǒng)一資源定位器)是指Internet文件在網(wǎng)上的地址，是使用數(shù)字和字母按一定順序排列來確定的Internet地址，由訪問方法、服務(wù)器名、端口號，以及文檔位置組成。格式為Access-method://server-name:port/document-location。7.1.2

Dreamweaver中的超鏈接

在DreamweaverCS4中，可以創(chuàng)建下列幾種類型的鏈接。頁間鏈接：利用該鏈接可以跳轉(zhuǎn)到其他文檔或文件，如圖形、電影、PDF或聲音文件。頁內(nèi)鏈接：也稱為錨記鏈接，利用它可以跳轉(zhuǎn)到本站點(diǎn)指定文檔的位置。E-mail鏈接：使用該鏈接，可以啟動電子郵件程序，允許用戶書寫電子郵件，并發(fā)送到指定地址?？真溄蛹澳_本鏈接：它允許用戶附加行為至對象或創(chuàng)建一個(gè)執(zhí)行JavaScript代碼的鏈接。7.1.3

絕對和相對路徑

從作為鏈接起點(diǎn)的文檔到作為鏈接目標(biāo)的文檔之間的文件路徑，對于創(chuàng)建鏈接至關(guān)重要。一般來說，鏈接路徑可以分為絕對路徑與相對路徑兩類。7.2

創(chuàng)建超鏈接

DreamweaverCS4使用文檔相對路徑創(chuàng)建指定站點(diǎn)中其他網(wǎng)頁的鏈接，可以在本地站點(diǎn)內(nèi)移動或重命名文檔時(shí)能自動更新指向文檔的鏈接。創(chuàng)建各種超鏈接的方法也有所不同，但創(chuàng)建超鏈接的步驟到是相同的，首先確定鏈接對象、再確定鏈接目標(biāo)，最后確定打開鏈接目標(biāo)的方式。7.2.1

創(chuàng)建超鏈接常用方法

在DreamweaverCS4中，可以隨時(shí)隨地在所需的位置創(chuàng)建各種超級鏈接，并且可以通過多種方法來創(chuàng)建超鏈接，可以在【屬性】面板中創(chuàng)建、使用菜單命令創(chuàng)建或使用【指向文件】圖標(biāo)來創(chuàng)建超鏈接。7.2.2

創(chuàng)建各類超鏈接

在對超級鏈接有著一定初步了解的基礎(chǔ)上，將分類介紹各種超級鏈接的方法，包括創(chuàng)建文本超鏈接、圖像超鏈接、錨點(diǎn)鏈接、E-mail鏈接和圖形熱點(diǎn)鏈接。7.2.3

創(chuàng)建圖像地圖

圖像地圖也是一種超鏈接，適用于較大的圖像。創(chuàng)建圖像地圖，可以在圖像上創(chuàng)建不規(guī)則區(qū)域的鏈接或某個(gè)部分區(qū)域的鏈接。圖像地圖是將圖片分為幾個(gè)區(qū)域，這些區(qū)域又稱為熱點(diǎn)，單擊不同的熱點(diǎn)可以打開不同的鏈接，這樣的鏈接就稱為圖形熱點(diǎn)鏈接。在圖像的【屬性】面板中可以方便地創(chuàng)建圖形熱點(diǎn)鏈接

。7.3

管理超鏈接

通過管理網(wǎng)頁中的超鏈接，可以對網(wǎng)頁進(jìn)行相應(yīng)的管理。管理超鏈接操作主要包括更新超鏈接、修改超鏈接和測試超鏈接。7.3.1

自動更新超鏈接

在站點(diǎn)內(nèi)移動或重命名文檔時(shí)，Dreamweaver會自動更新指向該文檔的鏈接，將整個(gè)站點(diǎn)存儲在本地磁盤上時(shí)，自動更新鏈接功能最適用，但要注意的是，Dreamweaver不會更改遠(yuǎn)程文件夾中的相應(yīng)文件。為了加快更新速度，Dreamweaver會創(chuàng)建一個(gè)緩存文件，用來存儲跟本地文件夾有關(guān)的所有鏈接信息，在添加、刪除或更改指向本地站點(diǎn)上的文件的鏈接時(shí)，該緩存文件會以可見方式進(jìn)行更新。要設(shè)置自動更新鏈接，選擇【編輯】|【首選參數(shù)】命令，打開【首選參數(shù)】對話框，在【分類】列表框中選擇【常規(guī)】選項(xiàng)，打開該選項(xiàng)對話框。7.3.2

修改超鏈接

除了自動更新鏈接外，還可以手動修改所有創(chuàng)建的超鏈接，以指向其他位置。要修改創(chuàng)建的超鏈接，選擇【站點(diǎn)】|【改變站點(diǎn)鏈接范圍的鏈接】命令，打開【更改整個(gè)站點(diǎn)鏈接】對話框。。7.3.3

測試鏈接

在Dreamweaver中常見的超鏈接是不能顯示鏈接對象的，但可以在網(wǎng)頁文檔中打開鏈接頁面。測試鏈接。要測試鏈接，首先選中要測試的鏈接，選擇【修改】|【打開鏈接頁面】命令，或者按下Ctrl鍵，雙擊選中的超鏈接，即可在新窗口中打開鏈接網(wǎng)頁文檔。但要注意的時(shí)，測試頁面必須保存在本地站點(diǎn)中。7.3.4

在HTML代碼中編輯鏈接

打開一個(gè)創(chuàng)建超鏈接的頁面，選中創(chuàng)建的超鏈接，切換到【代碼】視圖中，顯示了超鏈接標(biāo)記<a>標(biāo)記。7.4

使用層

層是帶有CSS樣式的Div或Span代碼，用于網(wǎng)頁元素的精確定位。由于一個(gè)頁面中可以擁有多個(gè)層，而不同的層之間可以相互重疊，通過設(shè)置透明度來決定每個(gè)層是否可見或者可見的程度，因而層可用來實(shí)現(xiàn)許多特效。7.4.1

層的基本作用

層就像是包含文字或圖像等元素的膠片，按順序疊放在一起，組合成頁面的最終效果。層可以精確地定位頁面上的元素，并且在層中可以加入文本、圖像、表格、插件等元素，還可以插入嵌套層。在Dreamweaver中運(yùn)用層，為設(shè)計(jì)者提供了強(qiáng)大的網(wǎng)頁控制能力。層不但可以作為一種網(wǎng)頁定位技術(shù)，也可以作為一種特效形式出現(xiàn)。熟練掌握層的使用方法，是網(wǎng)頁制作中最重要關(guān)節(jié)之一格式為Access-method://server-name:port/document-location。7.4.2

插入層

在網(wǎng)頁文檔中插入層后，在【代碼】視圖中會自動插入HTML標(biāo)簽。層的常用標(biāo)簽有<Div>和<Span>兩種，默認(rèn)是使用<Div>標(biāo)簽來插入層。

7.4.3

層的基本操作

在【AP元素】面板中可以管理網(wǎng)頁文檔中的所有插入的層元素，防止重疊，更改層的可見性，嵌套或堆疊層等。選擇【窗口】|【AP元素】命令，打開【AP元素】面板。在該面板中顯示了網(wǎng)頁文檔中所有插入的層。7.4.4

層的其他常用操作

除了一些最基本的操作外，插入的層還有一些常用的操作，例如排列層，對齊層，隱藏層等。7.4.5

轉(zhuǎn)換表格和層

要改變網(wǎng)頁中各元素的布局，最方便的方法就時(shí)將元素置于層內(nèi)，然后通過移動層來改變網(wǎng)頁的布局。要使用這種方法改變網(wǎng)頁布局，首先要將表格轉(zhuǎn)換為層。DreamweaverCS4允許使用層來創(chuàng)建布局，然后將層轉(zhuǎn)換為表格，以使網(wǎng)頁能夠在瀏覽器中正確瀏覽；也可以將網(wǎng)頁中的表格轉(zhuǎn)換為層。7.4.6

使用層布局網(wǎng)頁

一些非常復(fù)雜的網(wǎng)頁如果仍然使用表格來布局網(wǎng)頁的話，這將是一個(gè)非常大的工作量，而且將來修改起來會很麻煩。當(dāng)我們要布局一個(gè)多元素的網(wǎng)頁的時(shí)候，可以使用層來布局。7.5

使用Spry框架布局對象

Spry框架是一個(gè)JavaScript庫，使用它可以創(chuàng)建更豐富的網(wǎng)頁?？梢允褂肏TML、CSS和一些JavaScript將XML數(shù)據(jù)合并到HTML文檔中、創(chuàng)建構(gòu)建、向各種網(wǎng)頁元素添加不同種類的效果等。7.5.1

使用Spry菜單欄

Srpy菜單欄是一組可導(dǎo)航的菜單按鈕。當(dāng)瀏覽網(wǎng)頁時(shí)，將光標(biāo)懸停在某個(gè)菜單按鈕上時(shí)，可以顯示相應(yīng)的子菜單，使用菜單欄可以在有限的空間里顯示大量導(dǎo)航信息，在瀏覽網(wǎng)頁時(shí)，可以全面的了解站點(diǎn)包含信息，無需深入瀏覽網(wǎng)站。在DreamweaverCS4中，可以插入水平和垂直兩種菜單欄使用Spry菜單欄。選擇【插入】|Spry|【Spry菜單欄】命令，打開【Spry菜單欄】對話框。7.5.2

使用Spry選項(xiàng)卡面板

Spry選項(xiàng)卡面板是一組面板，可以將內(nèi)容存儲到緊湊的空間中。訪問站點(diǎn)時(shí)，可以單擊所需訪問的面板上的選項(xiàng)卡來顯示或隱藏存儲在選項(xiàng)卡面板中的內(nèi)容。單擊不同的選項(xiàng)卡時(shí)，會打開相應(yīng)的面板，單只能同時(shí)打開一個(gè)面板。要使用Spry選項(xiàng)卡面板，選擇【插入】|【布局對象】|【Srpy選項(xiàng)卡式面板】命令，即可在網(wǎng)頁文檔中插入Srpy選項(xiàng)卡面板。7.5.3

使用Spry折疊面板

Spry折疊式構(gòu)件是一組可以折疊的面板，可以將大量的內(nèi)容存儲到緊湊的空間中。當(dāng)訪問站點(diǎn)時(shí)，可以單擊該面板上的選項(xiàng)卡來顯示或隱藏存儲在折疊面板中的內(nèi)容。當(dāng)單擊不同的選項(xiàng)卡時(shí)，相應(yīng)的折疊面板會展開或收縮，但同時(shí)只能有一個(gè)面板處于可見狀態(tài)。要使用Spry折疊式面板，選擇【插入】|【布局對象】|【Spry折疊式】命令，即可在網(wǎng)頁文檔中插入Spry折疊式面板。7.5.4

使用Spry可折疊面板

使用Spry可折疊面板，可以將內(nèi)容存儲到緊湊的空間中，單擊相應(yīng)的選項(xiàng)卡，可以顯示或隱藏可折疊面板中的內(nèi)容。要使用Spry可折疊面板，選擇【插入】|【布局對象】|【Spry可折疊面板】命令，即可在網(wǎng)頁文檔中插入Spry可折疊面板。入門與進(jìn)階系列《中文版DreamweaverCS4

入門與進(jìn)階》第08章在網(wǎng)頁中添加行為

學(xué)習(xí)目標(biāo)行為是Dreamweaver中非常有特色功能，可以不編寫JavaScript代碼，即可實(shí)現(xiàn)多種動態(tài)頁面效果，例如交換圖像、彈出提示信息，設(shè)置導(dǎo)航欄圖像等。本章主要介紹DreamweaverCS4中內(nèi)置行為的使用方法。本章重點(diǎn)認(rèn)識行為

【行為】面板的使用添加常用行為添加其他行為8.1

行為的基礎(chǔ)知識

行為是指在網(wǎng)頁中進(jìn)行的一系列動作，通過這些動作，可以實(shí)現(xiàn)用戶同網(wǎng)頁的交互，也可以通過動作使某個(gè)任務(wù)被執(zhí)行。在Dreamweaver中，行為由事件和動作兩個(gè)基本元素組成。通常動作是一段JavaScript代碼，利用這些代碼可以完成相應(yīng)的任務(wù)；事件則由瀏覽器定義，事件可以被附加到各種頁面元素上，也可以被附加到HTML標(biāo)記中，并且一個(gè)事件總是針對頁面元素或標(biāo)記而言的。8.1.1

行為的概念

行為是DreamweaverCS4中重要的一個(gè)部分，通過行為，可以方便地制作出許多網(wǎng)頁效果，極大地提高了工作效率。行為由兩個(gè)部分組成，即事件和動作，通過事件的響應(yīng)進(jìn)而執(zhí)行對應(yīng)的動作。在網(wǎng)頁中，事件是瀏覽器生成的消息，表明該頁的訪問者執(zhí)行了某種操作。例如，當(dāng)訪問者將鼠標(biāo)指針移動到某個(gè)鏈接上時(shí)，瀏覽器為該鏈接生成一個(gè)onMouseOver事件。不同的頁元素定義了不同的事件。在大多數(shù)瀏覽器中，onMouseOver和onClick是與鏈接關(guān)聯(lián)的事件，而onLoad是與圖像和文檔的body部分關(guān)聯(lián)的事件。

8.1.2

事件的分類

DreamweaverCS4中的行為事件可以分為鼠標(biāo)時(shí)間、鍵盤事件、表單事件和頁面事件。每個(gè)事件都含有不同的觸發(fā)方式。

8.2

【行為】面板

在【行為】面板中可以將DreamweaverCS4內(nèi)置的行為附加到頁面元素，并且可以修改以前所附加行為的參數(shù)。

8.2.1

事件的分類

選擇【窗口】|【行為】命令，打開【標(biāo)簽檢查器】面板，默認(rèn)打開【行為】選型面板。

8.3

使用DreamweaverCS4內(nèi)置行為

DreamweaverCS4內(nèi)置了許多種行為動作，基本可以滿足網(wǎng)頁設(shè)計(jì)的需要。還可以連接到MacromediaExchangeWeb站點(diǎn)以及第三方開發(fā)人員站點(diǎn)上找到更多的動作，或者編寫行為動作。下面將DreamweaverCS4中常用內(nèi)置行為進(jìn)行分類，分別介紹這些行為的使用方法。

8.3.1

圖像操作類行為

圖像操作類行為主要是與圖像元素有關(guān)的行為，包括【預(yù)先載入圖像】行為、【交換圖像】行為和【恢復(fù)交換圖像】行為。

8.3.2

控制類行為

控制類行為主要是與控制元素有關(guān)的行為，包括拖動層行為和顯示-隱藏元素行為。

8.3.3

導(dǎo)航欄行為

導(dǎo)航類行為主要是與導(dǎo)航有關(guān)的行為，例如設(shè)置導(dǎo)航欄圖像等。要對導(dǎo)航欄的圖像進(jìn)行編輯，或是對圖像狀態(tài)進(jìn)行更多的控制，可以使用【行為】選項(xiàng)卡面板中的【設(shè)置導(dǎo)航欄圖像】動作。打開一個(gè)包含導(dǎo)航條的網(wǎng)頁文檔，在網(wǎng)頁文檔中選中導(dǎo)航條中的圖像，單擊【行為】選項(xiàng)卡面板上的按鈕，在彈出的菜單中選擇【設(shè)置導(dǎo)航欄圖像】命令，打開【設(shè)置導(dǎo)航欄圖像】對話框。默認(rèn)打開的是【基本】選項(xiàng)卡對話框。

8.3.4

行為的概念

狀態(tài)欄行為主要可以在瀏覽器窗口中的狀態(tài)欄顯示文本消息，用于優(yōu)化網(wǎng)頁細(xì)節(jié)。要對狀態(tài)欄的文本進(jìn)行編輯，或是對文本狀態(tài)進(jìn)行更多的控制，可以使用【行為】選項(xiàng)卡面板中的【設(shè)置狀態(tài)欄文本】行為。單擊【行為】選項(xiàng)卡面板上的按鈕，在彈出的菜單中選擇【設(shè)置文本】|【設(shè)置狀態(tài)欄文本】命令，打開【設(shè)置狀態(tài)欄文本】對話框。

8.3.5

檢查類行為

檢查類行為主要是與檢查、檢測有關(guān)的行為，例如可以使用這類行為來檢查瀏覽器、檢查插件和檢查表單等。

8.3.6

其他常用行為

除了前面介紹的一些行為外，還可以使用以下一些常用行為，例如調(diào)用JavaScript和改變屬性行為等。

入門與進(jìn)階系列《中文版DreamweaverCS4

入門與進(jìn)階》第09章使用交互式表單

學(xué)習(xí)目標(biāo)表單允許服務(wù)器端的程序處理用戶端輸入的信息，通常包括哦能夠與調(diào)查的表單、提交訂購的表單和搜索查詢的表單等。表單要求描述表單的HTML源代碼和在表單域中輸入信息的服務(wù)器端應(yīng)用程序或客戶端腳本。本章主要介紹了在DreamweaverCS4中使用表單的方法。本章重點(diǎn)表單的基礎(chǔ)知識插入文本域表單對象插入按鈕表單對象插入列表和菜單表單檢查表單9.1

表單的基礎(chǔ)知識

表單在網(wǎng)頁中時(shí)提供給訪問者填寫信息的區(qū)域，從而可以收集客戶端信息，使網(wǎng)頁更加具有交互的功能。9.1.1

表單的概念

表單一般被設(shè)置在一個(gè)HTML文檔中，訪問者填寫相關(guān)信息后提交表單，表單內(nèi)容會自動從客戶端的瀏覽器傳送到服務(wù)器上，經(jīng)過服務(wù)器上的ASP或CGI等程序處理后，再將訪問者所需的信息傳送到客戶端的瀏覽器上。幾乎所有網(wǎng)站都應(yīng)用了表單，例如搜索欄、論壇和訂單等。9.1.2

表單對象

在DreamweaverCS4中，表單輸入類型稱為表單對象?？梢栽诰W(wǎng)頁中插入表單并創(chuàng)建各種表單對象。要在網(wǎng)頁文檔中插入表單對象，可以單擊【插入】工具欄上的【表單】選項(xiàng)卡，打開【表單】插入欄。單擊相應(yīng)的表單對象按鈕，即可插入表單。9.2

插入文本域表單對象

文本域是非常重要的表單對象，可以輸入相關(guān)信息，例如用戶名、密碼等。隱藏域在瀏覽器中是不被顯示出來的文本域，主要用于實(shí)現(xiàn)瀏覽器同服務(wù)器在后臺隱藏地交換信息。9.2.1

插入文本域

在DreamweaverCS4中，文本域可以通過使用【文本字段】及【文本區(qū)域】兩種方法來創(chuàng)建。文本域包括了【單行】、【多行】和【密碼】3種類型，以適應(yīng)不同情況下的需要9.2.2

插入隱藏域

單擊【表單】插入欄上的【隱藏域】按鈕，即可在文檔中創(chuàng)建一個(gè)隱藏域。選中隱藏域，打開【屬性】面板。在隱藏域【屬性】面板中，可輸入隱藏域的名稱。在【值】文本框中，可輸入隱藏域的初始值。9.2.3

插入文件域

選擇【插入】|【表單】|【文件域】命令，或單擊【表單】插入欄中的【文件域】按鈕，即可在文檔中創(chuàng)建一個(gè)文件上傳域。9.3

插入按鈕表單對象

按鈕表單對象包括按鈕、單選按鈕、單選按鈕組、復(fù)選框和復(fù)選框組。按鈕表單對象主要用于控制對表單的操作。9.3.1

按鈕表單對象作用

在預(yù)覽網(wǎng)頁文檔是，當(dāng)輸入完表單數(shù)據(jù)后，可以單擊表單按鈕，提交服務(wù)器處理；如果對輸入的數(shù)據(jù)不滿意，需要重新設(shè)置時(shí)，可以單擊表單按鈕，重新輸入；還可以通過表單按鈕來完成其他任務(wù)。復(fù)選框和單選按鈕是預(yù)定義選擇對象的表單對象?？梢栽谝唤M復(fù)選框中選擇多個(gè)選項(xiàng)；單選按鈕也可以組成一個(gè)組使用，提供互相排斥的選項(xiàng)值，在單選按鈕組內(nèi)只能選擇一個(gè)選項(xiàng)。9.3.2

插入表單按鈕

表單按鈕是標(biāo)準(zhǔn)的瀏覽器默認(rèn)按鈕樣式，它包含需要顯示的文本，它包括【提交】和【重置】按鈕。選擇【插入】|【表單】|【按鈕】命令，打開【輸入標(biāo)簽輔助功能屬性】對話框，單擊【確定】按鈕，即可在文檔中創(chuàng)建一個(gè)表單按鈕。9.3.3

插入單選按鈕

單選按鈕提供相互排斥的選項(xiàng)值，在單選按鈕組內(nèi)只能選擇一個(gè)選項(xiàng)。選擇【插入】|【表單】|【單選按鈕】命令，即可在文檔中創(chuàng)建一個(gè)單選按鈕9.3.4

插入單選按鈕組

使用單選按鈕組表單對象可以添加一個(gè)單選按鈕組，選擇【插入】|【表單】|【單選按鈕組】命令，打開【單選按鈕組】對話框。9.3.5

插入復(fù)選框

復(fù)選框表單對象，可以限制訪問者填寫的內(nèi)容。使收集的信息更加規(guī)范，更有利于信息的統(tǒng)計(jì)。選擇【插入】|【表單】|【復(fù)選框】命令，即可在網(wǎng)頁文檔中創(chuàng)建復(fù)選框。9.3.6

插入復(fù)選框組

復(fù)選框組和按鈕和單選按鈕組相似，可以一次插入多個(gè)選項(xiàng)。選擇【插入】|【表單】|【復(fù)選框組】命令，打開【復(fù)選框組】對話框。在【復(fù)選框組】對話框中主要參數(shù)選項(xiàng)的具體作用如下。9.3.7

插入圖形按鈕

可以使用圖像域生成圖形化的按鈕來美觀網(wǎng)頁。選擇【插入】|【表單】|【圖像域】命令，將打開【選擇圖像源文件】對話框，選擇一幅圖像并單擊【確定】按鈕，打開【輔助標(biāo)簽屬性功能】對話框，單擊【確定】按鈕，即可在網(wǎng)頁文檔中插入一個(gè)圖形按鈕。9.4

插入列表和菜單表單對象

列表和菜單也是預(yù)定義選擇對象的表單對象，使用它們可以在有限的空間內(nèi)提供多個(gè)選項(xiàng)。列表也稱為【滾動列表】，提供一個(gè)滾動條，允許訪問者瀏覽多個(gè)選項(xiàng)，并進(jìn)行多重選擇。菜單也稱為【下拉列表框】，僅顯示一個(gè)選項(xiàng)，該項(xiàng)也是活動選項(xiàng)，訪問者只能從菜單中選擇一項(xiàng)。9.4.1

插入列表/菜單表單對象

選擇【插入】|【表單】|【列表/菜單】命令，即可在網(wǎng)頁文檔中插入列表/菜單表單。9.4.2

添加列表/菜單項(xiàng)

插入列表/菜單表單后，在默認(rèn)情況下是沒有菜單項(xiàng)或列表項(xiàng)的，可以在【屬性】面板中添加菜單/列表項(xiàng)。選中一個(gè)列表/菜單，打開列表/菜單的【屬性】面板。9.5

檢查表單

在包含表單的頁面中填寫相關(guān)信息時(shí)，當(dāng)信息填寫出錯(cuò)，會自動顯示出錯(cuò)信息，這是通過檢查表單來實(shí)現(xiàn)的。在DreamweaverCS4中，可以使用【檢查表單】行為和插入Spry驗(yàn)證對象檢查表單。9.5.1

【檢查表單】行為

使用【檢查表單】動作，可以為文本域設(shè)置有效性規(guī)則，檢查文本域中的內(nèi)容是否有效，以確保輸入數(shù)據(jù)正確。一般來說，可以將該動作附加到表單對象上，并將觸發(fā)事件設(shè)置為onSubmit。當(dāng)單擊提交按鈕提交數(shù)據(jù)時(shí)會自動檢查表單域中所有的文本域內(nèi)容是否有效。單擊【行為】選項(xiàng)卡面板上的按鈕，在彈出的菜單中選擇【檢查表單】命令，打開【檢查表單】對話框。9.5.2

Spry驗(yàn)證對象

Spry驗(yàn)證對象是針對各類表單的，插入Spry驗(yàn)證對象，可以驗(yàn)證表單的有效性。入門與進(jìn)階系列《中文版DreamweaverCS4

入門與進(jìn)階》第10章使用模板和庫項(xiàng)目

學(xué)習(xí)目標(biāo)模板是統(tǒng)一站點(diǎn)網(wǎng)頁風(fēng)格的工具，在進(jìn)行批量網(wǎng)頁制作的過程中，為了站點(diǎn)的統(tǒng)一性，許多頁面的布局都是相同的，可以將具有相同布局結(jié)構(gòu)的頁面制作成模板，將相同的元素制作成庫項(xiàng)目，可以隨時(shí)調(diào)用模板和庫項(xiàng)目，減少重復(fù)操作，提高制作速度。本章主要介紹了有關(guān)模板和庫項(xiàng)目的操作方法。本章重點(diǎn)使用模板編輯模板使用庫項(xiàng)目編輯庫項(xiàng)目10.1

使用模板輕松制作網(wǎng)頁

在DreamweaverCS4中有多種創(chuàng)建模板的方法，可以創(chuàng)建空白模板，也可以創(chuàng)建基于現(xiàn)存文檔的模板，除此之外，還可以將現(xiàn)有的HTML文檔另存為模板，然后根據(jù)需要加以修改。10.1.1

創(chuàng)建模板

模板其實(shí)就是一個(gè)HTML文檔，只是在HTML文檔中增加了模板標(biāo)記。10.1.2

管理模板

創(chuàng)建好模板后，模板會在【資源】面板中顯示。可以在【資源】面板中對模板進(jìn)行管理，主要包括刪除、修改、重命名模板等。選擇【窗口】|【資源】命令，打開【資源】面板，單擊面板上的【模板】按鈕，在模板列表框中會顯示現(xiàn)有的模板10.1.3

創(chuàng)建嵌套模板

嵌套模板對于控制共享許多設(shè)計(jì)元素的站點(diǎn)頁面中的內(nèi)容很有用，但在各頁之間有些差異?；灸０逯械目删庉媴^(qū)域被傳遞到嵌套模板，并在根據(jù)嵌套模板創(chuàng)建的頁面中保持可編輯，除非在這些區(qū)域中插入了新的模板區(qū)域。對基本模板所做的更改在基于基本模板的模板中自動更新，并在所有基于主模板和嵌套模板的文檔中自動更新。10.1.4

定義模板區(qū)域

模板定義了文檔的布局結(jié)構(gòu)和大致框架，在使用模板時(shí)，一定要了解模板的兩個(gè)區(qū)域，即非編輯區(qū)域和可編輯區(qū)域。模板中創(chuàng)建的元素在基于模板的頁面中通常是鎖定區(qū)域，或稱為非編輯區(qū)域，要編輯模板，必須在模板中定義可編輯區(qū)域。在使用模板創(chuàng)建文檔時(shí)只能夠改變可編輯區(qū)域中的內(nèi)容，鎖定區(qū)域在文檔編輯過程中始終保持不變。10.2

使用模板創(chuàng)建網(wǎng)頁文檔

在DreamweaverCS4中，可以以模板為基礎(chǔ)創(chuàng)建新的文檔，或?qū)⒁粋€(gè)模板應(yīng)用于已有的文檔。使用這樣方法創(chuàng)建網(wǎng)頁文檔，可以保持整個(gè)網(wǎng)站風(fēng)格的統(tǒng)一性，并且可以大大提高制作效率。10.2.2

應(yīng)用現(xiàn)有的模板文檔

在DreamweaverCS4中，可以在現(xiàn)有文檔上應(yīng)用已創(chuàng)建好的模板。要在現(xiàn)有文檔上應(yīng)用模板，首先在文檔窗口中打開需要應(yīng)用模板的文檔，然后選擇【窗口】|【資源】命令，打開【資源】面板，在模板列表中選中需要應(yīng)用的模板。10.2.3

分離模板

用模板設(shè)計(jì)網(wǎng)頁時(shí)，模板有很多的鎖定區(qū)域(即不可編輯區(qū)域)。為了能夠修改基于模板的頁面中的鎖定區(qū)域和可編輯區(qū)域內(nèi)容，必須將頁面從模板中分離出來。當(dāng)頁面被分離后，它將成為一個(gè)普通的文檔，不再具有可編輯區(qū)域或鎖定區(qū)域，也不再與任何模板相關(guān)聯(lián)。因此，當(dāng)文檔模板被更新時(shí)，文檔頁面也不會隨之更新。10.2.4

更新模板頁面

當(dāng)改變網(wǎng)頁文檔模板時(shí)，系統(tǒng)會提示是否更新基于該模板的文檔，同時(shí)也可以使用更新命令來更新當(dāng)前頁面或整個(gè)站點(diǎn)。10.3

使用庫項(xiàng)目

庫用來存放文檔中的頁面元素，如圖像、文本、Flash動畫等。這些頁面元素通常被廣泛使用于整個(gè)站點(diǎn)，并且能被重復(fù)使用或經(jīng)常更新，因此它們被稱為庫項(xiàng)目。10.3.1

認(rèn)識庫項(xiàng)目

庫是一種特殊的文件，它包含可添加到網(wǎng)頁文檔中的一組單個(gè)資源或資源副本。庫中的這些資源稱為庫項(xiàng)目。庫項(xiàng)目可以是圖像、表格或SWF文件等元素。當(dāng)編輯某個(gè)庫項(xiàng)目時(shí)，可以自動更新應(yīng)用該庫項(xiàng)目的所有網(wǎng)頁文檔。在DreamweaverCS4中，庫項(xiàng)目存儲在每個(gè)站點(diǎn)的本地根文件夾下的Library文件夾中?？梢詮木W(wǎng)頁文檔中的選中任意元素來創(chuàng)建庫項(xiàng)目。對于鏈接項(xiàng)，庫只存儲對該項(xiàng)的引用。原始文件必須保留在指定的位置，這樣才能使庫項(xiàng)目正確工作。10.3.2

創(chuàng)建庫項(xiàng)目

在DreamweaverCS4文檔中，可以將網(wǎng)頁文檔中的任何元素創(chuàng)建為庫項(xiàng)目，這些元素包括文本、圖像、表格、表單、插件、ActiveX控件以及Java程序等。要將元素保存為庫項(xiàng)目，選中要保存為庫項(xiàng)目的元素，選擇【修改】|【庫】|【增加對象到庫】命令，即可將對象添加到庫中。選擇【窗口】|【資源】命令，打開【資源】面板，單擊【庫】按鈕，在該面板中顯示添加到庫中的對象。10.3.3

編輯庫項(xiàng)目

在DreamweaverCS4中，可以方便地編輯庫項(xiàng)目。在【資源】面板中選擇創(chuàng)建的庫項(xiàng)目后，可以直接拖動到網(wǎng)頁文檔中。選中網(wǎng)頁文檔中插入的庫項(xiàng)目，打開【屬性】面板。入門與進(jìn)階系列《中文版DreamweaverCS4

入門與進(jìn)階》第11章動態(tài)網(wǎng)頁制作基礎(chǔ)

學(xué)習(xí)目標(biāo)動態(tài)網(wǎng)頁是建立在B/S(瀏覽器/服務(wù)器)架構(gòu)上的服務(wù)器端腳本程序。動態(tài)頁面是結(jié)合后臺數(shù)據(jù)庫，自動更新Web頁面。本章主要介紹了動態(tài)網(wǎng)頁的一些基礎(chǔ)知識，構(gòu)建ASP網(wǎng)頁開發(fā)環(huán)境，連接數(shù)據(jù)庫，定義記錄集和綁定動態(tài)數(shù)據(jù)的方法。為深入學(xué)習(xí)動態(tài)網(wǎng)頁的制作打下堅(jiān)實(shí)的基礎(chǔ)。本章重點(diǎn)動態(tài)網(wǎng)頁的概念構(gòu)建ASP網(wǎng)頁開發(fā)環(huán)境創(chuàng)建數(shù)據(jù)庫鏈接定義記錄集綁定動態(tài)數(shù)據(jù)11.1

動態(tài)網(wǎng)頁基礎(chǔ)知識

動態(tài)網(wǎng)頁稱為Web應(yīng)用程序，主要用于網(wǎng)站與訪問者之間的交互。動態(tài)網(wǎng)頁通常都會與數(shù)據(jù)庫結(jié)合起來，數(shù)據(jù)庫可以看作是動態(tài)網(wǎng)頁的內(nèi)容源，在將數(shù)據(jù)顯示在網(wǎng)頁中之前，動態(tài)站點(diǎn)需要從該內(nèi)容源中提取數(shù)據(jù)。11.1.1

客戶端/服務(wù)器網(wǎng)頁

網(wǎng)頁的處理技術(shù)經(jīng)歷了兩個(gè)重要階段：客戶端網(wǎng)頁和服務(wù)器端網(wǎng)頁。其中，客戶端網(wǎng)頁又稱為靜態(tài)網(wǎng)頁，服務(wù)器端網(wǎng)頁又稱為動態(tài)交互式網(wǎng)頁。11.1.2

動態(tài)網(wǎng)頁技術(shù)

早期的動態(tài)網(wǎng)頁主要采用CGI(CommonGatewayInterface)技術(shù)，即公用網(wǎng)關(guān)接口技術(shù)，雖然CGI技術(shù)已經(jīng)發(fā)展成熟并且功能強(qiáng)大，但由于編程困難、效率低下、維護(hù)困難，已經(jīng)逐漸被新興的技術(shù)所取代，這些新興技術(shù)主要有ASP技術(shù)、PHP技術(shù)、JSP技術(shù)，采用這些動態(tài)網(wǎng)頁技術(shù)開發(fā)的網(wǎng)頁文檔后綴名通常為.asp、.php、.jsp。11.2

搭建服務(wù)器平臺

在利用DreamweaverCS4開發(fā)動態(tài)網(wǎng)頁之前，首先必須在本地計(jì)算機(jī)構(gòu)建和配置ASP動態(tài)網(wǎng)頁所需的服務(wù)器平臺，離開了平臺，動態(tài)網(wǎng)站就不能正常瀏覽。搭建服務(wù)器平臺包括配置本地計(jì)算機(jī)IP地址，安裝和配置測試服務(wù)器。11.2.1

配置IP地址

所謂IP(InternetProtocol)地址，實(shí)際上就是一種用于標(biāo)記網(wǎng)絡(luò)節(jié)點(diǎn)和指定路由選擇信息的方式。一個(gè)IP地址被用來標(biāo)識網(wǎng)絡(luò)中的一個(gè)通信實(shí)體，比如一臺主機(jī)，或者是路由器的某一個(gè)端口。而在基于IP協(xié)議網(wǎng)絡(luò)中傳輸?shù)臄?shù)據(jù)包，也都必須使用IP地址來進(jìn)行標(biāo)識。因此對于聯(lián)入網(wǎng)絡(luò)的計(jì)算機(jī)而言，必須給它們分配唯一的IP地址以保證其在網(wǎng)絡(luò)中的唯一性。通常，IP地址由網(wǎng)絡(luò)標(biāo)識符與網(wǎng)絡(luò)管理員分配的唯一主機(jī)標(biāo)識符組成。IP地址的表示方法是帶小數(shù)點(diǎn)的十進(jìn)制記數(shù)法，其中每8位字節(jié)的十進(jìn)制值用“.”號分隔，例如或者61.23.07.1等等。11.2.2

配置測試服務(wù)器

DreamweaverCS4需要站點(diǎn)測試服務(wù)器內(nèi)所提供的服務(wù)來生成和顯示網(wǎng)站中動態(tài)頁面的相關(guān)內(nèi)容。11.2.3

測試服務(wù)器

配置號服務(wù)器后，可以在本地站點(diǎn)中新建一個(gè)ASP動態(tài)頁，測試該頁面是否能顯示來判斷服務(wù)器的配置是否成功。11.3

創(chuàng)建Access數(shù)據(jù)庫

數(shù)據(jù)庫可以看作是動態(tài)網(wǎng)頁的載體，交互式的ASP動態(tài)頁面離不開數(shù)據(jù)庫的支持。Access是目前比