第6章網(wǎng)頁喇作

6.1網(wǎng)頁制作概述

6.2網(wǎng)頁制作軟件簡介

6.3Web站點(diǎn)設(shè)計(jì)與管理

6.4網(wǎng)站制作實(shí)例

本章小結(jié)

練習(xí)題

第6章網(wǎng)頁刷作

6.1網(wǎng)頁制作概述

6.1.1Web介紹

Web是WorldWideWeb的簡稱（又稱為萬維網(wǎng)、WWW或者

3W）,它是由遍及全球的信息資源組成的系統(tǒng)，這些信息資源所

包含的內(nèi)容不僅僅是文本，還包括圖像（靜態(tài)的或者動(dòng)態(tài)的）、表

格、音頻與視頻等。用戶可以根據(jù)關(guān)鍵字來搜索和顯示數(shù)據(jù)（信

息），而這些數(shù)據(jù)中又包含了與其他數(shù)據(jù)的鏈接路徑。當(dāng)用戶閱

讀某些信息時(shí)，將會注意到某些詞、短語或圖片動(dòng)畫對象被用

一種特殊的方式加了標(biāo)簽，單擊它們，Web會根據(jù)其所鏈接的地

址跳轉(zhuǎn)到另一個(gè)頁面。

第6章網(wǎng)頁刷作

Web上具有相似性質(zhì)、共同內(nèi)容的一組信息資源就是一個(gè)

站點(diǎn)。構(gòu)成一個(gè)站點(diǎn)的基本元素是各種各樣的文件以及存放

這些文件的文件夾。這些文件大致可分為三類：第一類用來

描述資源結(jié)構(gòu)、位置，引導(dǎo)瀏覽者訪問該站點(diǎn)，通常以

“htm”、“html”為擴(kuò)展名，稱為網(wǎng)頁文件(WebPages)；第二

類是網(wǎng)頁文件所鏈接到的圖像、表格、音頻與視頻等資源文

件；如果這個(gè)站點(diǎn)包括交互性內(nèi)容，則還可能有第三類文件，

即Web數(shù)據(jù)庫和程序文件。

第6章網(wǎng)頁刷作

6.1.2網(wǎng)站規(guī)劃

建立一個(gè)網(wǎng)站，會涉及到很多方面，為了能使整個(gè)過程有

條不紊，首先必須進(jìn)行網(wǎng)站的規(guī)劃設(shè)計(jì)，也就是到底想要做個(gè)

什么樣的網(wǎng)站，它都包含什么樣的內(nèi)容，需要?jiǎng)澐殖啥嗌賯€(gè)欄

目，它要告訴來訪者什么信息等，這些都是在制作一個(gè)網(wǎng)站前

要考慮的內(nèi)容。

在建立網(wǎng)站之前，首先要明確自己的建站目標(biāo)，也就是說

想讓網(wǎng)站達(dá)到什么目的，希望給本網(wǎng)站的訪問者提供些什么樣

的信息。作為企業(yè)網(wǎng)站更應(yīng)該考慮如何通過Internet更好地展示

企業(yè)的產(chǎn)品，讓客戶了解產(chǎn)品，從而達(dá)到讓客戶訂購產(chǎn)品的目

的。-一

第6章網(wǎng)頁刷作4

網(wǎng)站規(guī)劃設(shè)計(jì)包含的內(nèi)容如下：

1.建設(shè)網(wǎng)站的目的及功能定位

(1)為什么要建立網(wǎng)站，是為了宣傳產(chǎn)品，進(jìn)行電子商務(wù),

還是建立個(gè)人主頁。

(2)根據(jù)需要確定網(wǎng)站的功能：產(chǎn)品宣傳型、網(wǎng)上營銷型、

客戶服務(wù)型、電子商務(wù)型等。

⑶根據(jù)網(wǎng)站功能，確定網(wǎng)站應(yīng)達(dá)到的目的和作用。

第6章網(wǎng)頁刷作4

2.網(wǎng)站技術(shù)解決方案

(1)確定采用自建服務(wù)器還是租用虛擬主機(jī)。

(2)選擇操作系統(tǒng)，確定用UNIX、Linux還是Window

2000/NTo分析投入成本、功能、開發(fā)、穩(wěn)定性和安全性等。

(3)網(wǎng)站安全性措施，防黑客、防病毒方案。

(4)相關(guān)程序開發(fā)，如網(wǎng)頁程序ASP、JSP、CGL數(shù)據(jù)庫

程序等。

第6章網(wǎng)頁刷作4

3.網(wǎng)站內(nèi)容規(guī)劃

(1)根據(jù)網(wǎng)站的目的和功能規(guī)劃網(wǎng)站內(nèi)容，一般企業(yè)網(wǎng)站

應(yīng)包括：公司簡介、產(chǎn)品介紹、服務(wù)內(nèi)容、價(jià)格信息、聯(lián)系方

式、網(wǎng)上訂單等基本內(nèi)容。

(2)電子商務(wù)類網(wǎng)站要提供會員注冊、詳細(xì)的商品服務(wù)信

息、信息搜索查詢、訂單確認(rèn)、付款、個(gè)人信息保密措施、相

關(guān)幫助等。

第6章網(wǎng)頁刷作4

(3)如果網(wǎng)站欄目比較多，則考慮采用網(wǎng)站編程專人負(fù)責(zé)

相關(guān)內(nèi)容。注意：網(wǎng)站內(nèi)容是網(wǎng)站吸引瀏覽者最重要的因素,

無內(nèi)容或不實(shí)用的信息不會吸引匆匆瀏覽的訪客。可事先對

人們希望閱讀的信息進(jìn)行調(diào)查，并在網(wǎng)站發(fā)布后調(diào)查人們對

網(wǎng)站內(nèi)容的滿意度，以及時(shí)調(diào)整網(wǎng)站內(nèi)容。

第6章網(wǎng)頁刷作4

4.網(wǎng)頁設(shè)計(jì)

(1)網(wǎng)頁美術(shù)設(shè)計(jì)一般要與企業(yè)整體形象一致，要注意網(wǎng)

頁色彩、圖片的應(yīng)用及版面規(guī)劃，保持網(wǎng)頁的整體一致性。

(2)在新技術(shù)的采用上要考慮主要目標(biāo)訪問群體的分布地

域、年齡階層、網(wǎng)絡(luò)速度、閱讀習(xí)慣等。

(3)制定網(wǎng)頁改版計(jì)劃，如半年到一年時(shí)間進(jìn)行較大規(guī)模

改版等。

第6章網(wǎng)頁刷作

5.網(wǎng)站維護(hù)

(1)服務(wù)器及相關(guān)軟、硬件的維護(hù)，對可能出現(xiàn)的問題進(jìn)

行評估，制定響應(yīng)時(shí)間。

(2)數(shù)據(jù)庫維護(hù)，有效地利用數(shù)據(jù)是網(wǎng)站維護(hù)的重要內(nèi)容,

因此數(shù)據(jù)庫的維護(hù)要受到重視。

(3)內(nèi)容的更新、調(diào)整等。

(4)制定相關(guān)網(wǎng)站維護(hù)的規(guī)定，將網(wǎng)站維護(hù)制度化、規(guī)范

化。

第6章網(wǎng)頁刷作4

6.2網(wǎng)頁制作軟件簡介

6.2.1概述

如今，上網(wǎng)沖浪已經(jīng)成為一種時(shí)尚，構(gòu)成了現(xiàn)代都市里

一道獨(dú)特而又亮麗的風(fēng)景線。當(dāng)你在網(wǎng)上漫游之際，會不會

對那漂亮的網(wǎng)頁羨慕不已呢？其實(shí)，你也可以制作自己的個(gè)

人網(wǎng)頁。現(xiàn)在網(wǎng)頁制作軟件很多，我們介紹兩種比較常用的

網(wǎng)頁制作軟件。

第6章網(wǎng)頁刷作4

6.2.2FrontPage2000

1.功能簡介

FrontPage2000首次以O(shè)ffice套裝軟件的形式出現(xiàn)，它是

Microsoft公司在Office2000中新增的Web站點(diǎn)創(chuàng)建和網(wǎng)頁制

作軟件。所有的Office套裝軟件都具有完全相似的窗口界面，

功能大致相同的菜單命令、工具按鈕，很容易讓人產(chǎn)生親近感,

用戶在使用Word、Excel等方面的經(jīng)驗(yàn)和技巧都可以運(yùn)用到

FrontPage2000中。

第6章網(wǎng)頁刷作

Frontpage2000能自動(dòng)地生成全部的HTML代碼，使用

Frontpage2000,不需要學(xué)習(xí)HTML語言就可以創(chuàng)建一些簡單

的網(wǎng)頁。利用菜單可以執(zhí)行Frontpage2000提供的各種編輯命

令，在編輯區(qū)內(nèi)，網(wǎng)頁制作者可以不用了解HTML是如何編制

的，所見即所得地設(shè)計(jì)和規(guī)劃網(wǎng)頁。

第6章網(wǎng)頁刷作

2.界面介紹

Frontpage2000的使用界面與Office2000其他軟件相似，主

要由菜單欄、工具欄、編輯窗口、狀態(tài)欄、視圖欄等幾部分組

成，如圖6-1所示。

第6章網(wǎng)頁刷作

K^ikrosohFrontpage

文件（D9微。3ER?施人⑴格式（磔TJKD康標(biāo)A）電罌⑻畬口處卻權(quán)出菜單欄

□Q囪國◎ae><??里口口―中國.

（無'?，*「？、?魯遇?B/u隼春老i三沼*夕，?A?.②工具欄

第6章網(wǎng)頁刷作

(1)菜單欄。菜單欄位于標(biāo)題欄的下面，由“文件”、

“編輯”、“查看”、“插入”、“格式”、“工具”、“表

格”、“框架”、“窗口”和“幫助”等10個(gè)菜單組成。

(2)工具欄。工具欄以工具按鈕的形式為用戶提供了主要

的編輯和管理功能，如圖6-1所示。用戶可調(diào)整在屏幕上顯示

的工具欄的種類和工具欄出現(xiàn)的位置。Frontpage2000提供了

常用、格式、DHTML效果、報(bào)表、表格、導(dǎo)航、定位、圖片、

樣式和自定義等10個(gè)工具欄。

第6章網(wǎng)頁刷作Mk4

(3)編輯窗口。編輯窗口是用戶使用得最多的部分，它是

管理網(wǎng)站和制作網(wǎng)頁的主要場所。當(dāng)使用管理功能時(shí)，編輯窗

口顯示各種任務(wù)下的文件或站點(diǎn)信息。在制作網(wǎng)頁時(shí)，它有普

通、HTML和預(yù)覽3種顯示方式。普通顯示方式最常用。

HTML顯示方式是在需要直接編輯或查看網(wǎng)頁文件的HTML代

碼時(shí)才使用的，如果會編寫HTML語言程序，就可以在HTML

顯示方式下直接編輯HTML原始代碼對其進(jìn)行修改。預(yù)覽方式

可以隨時(shí)觀看所編輯網(wǎng)頁的顯示效果。

第6章網(wǎng)頁刷作4

(4)狀態(tài)欄。狀態(tài)欄位于FrontPage2000窗口界面的底部。

它對每個(gè)菜單命令或工具欄按鈕能完成的任務(wù)進(jìn)行簡單的描述。

(5)視圖欄。在視圖欄中可以選擇網(wǎng)頁或網(wǎng)站的顯示模式。

第6章網(wǎng)頁刷作4

6.2.3DreamweaverMX

1.功能簡介

MacromediaDreamweaverMX是一種專業(yè)的HTML編輯器,

用于對Web站點(diǎn)、Web頁和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開

發(fā)。無論您是喜歡直接編寫HTML代碼的駕馭感還是偏愛在可

視化編輯環(huán)境中工作，Dreamweaver都會為您提供幫助良多的

工具，豐富您的Web創(chuàng)作體驗(yàn)。

第6章網(wǎng)頁刷作4

利用Dreamweaver中的可視化編輯功能，用戶可以快速地

創(chuàng)建頁面而無需編寫任何代碼。但是，如果您更喜歡用手工直

接編碼，則一樣沒有問題，Dreamweaver還包括許多與編碼相

關(guān)的工具和功能。并且，借助Dreamweaver,您還可以使用服

務(wù)器語言（例如ASP、ASP.NET、ColdFusion標(biāo)記語言（CFML）、

JSP和PHP）生成支持動(dòng)態(tài)數(shù)據(jù)庫的Web應(yīng)用程序。

第6章網(wǎng)頁刷作

2.界面介紹

安裝好DreamweaverMX中文版（或者漢化版）后，運(yùn)行，選

擇DreamweaverMX工作區(qū)，將看到如圖6-2所示的畫面。

第6章網(wǎng)頁刷作

Drea*v?ar?rU-(Valitlai'l))

—X件9??＜Z)互有色掂入也靦呼又本@命令I(lǐng)QM點(diǎn)＜5).口里的的0(1①強(qiáng)單欄jJSJxj

??人生可士1黃1?產(chǎn)奇心QQ算工抵三式工神瑪［：13向4G

?？谝蚶飫w出組名?太艮|一口玲回口②插入欄

?於廬)松勤克錫直文招

③文檔工具欄

@文檔胃口

a。蛇＞_____

格式0慶34釀轉(zhuǎn)三］大小0雷Wf2BI^1sigl*1*1

m0」目驚中|Zin但且現(xiàn)?屬性選擇”

第6章網(wǎng)頁刷作

(1)菜單欄。菜單欄由“文件”、“編輯”、“查看”、

“插入”、“修改”、“文本”、“命令”、“站點(diǎn)”、“窗

口”和“幫助”等10個(gè)菜單組成。

(2)插入欄。包含用于將各種類型的對象(如圖像、表格

和層)插入到文檔中的按鈕。每個(gè)對象都是一段HTML代碼，允

許在插入它時(shí)設(shè)置不同的屬性。

(3)文檔工具欄。包含按鈕和彈出式菜單，它們提供各種

“文檔”窗口視圖(如“設(shè)計(jì)”視圖和“代碼”視圖)、各種查

看選項(xiàng)和一些普通操作(如在瀏覽器中預(yù)覽)。

第6章網(wǎng)頁刷作

(4)文檔窗口。顯示當(dāng)前創(chuàng)建和編輯的文檔。

(5)屬性檢查器。用于查看和更改所選對象或文本的各種

屬性。每種對象都具有不同的屬性。

(6)面板組。是一組?？吭谀硞€(gè)標(biāo)題下面的相關(guān)面板的集

合。若要展開一個(gè)面板組，請單擊組名稱左側(cè)的展開箭頭；若

要取消?？恳粋€(gè)面板組，請拖動(dòng)該組標(biāo)題條左邊緣的手柄。

第6章網(wǎng)頁刷作

6.3Web站點(diǎn)設(shè)計(jì)與管理

6.3.1Web站點(diǎn)的創(chuàng)建

此處以DreamweaverMX為例來介紹。

在創(chuàng)建站點(diǎn)之前，首先在本地硬盤建立一個(gè)存放網(wǎng)站文件

的文件夾，例如“我的網(wǎng)站”，以此作為站點(diǎn)的根目錄。

我們將使用“站點(diǎn)定義”對話框創(chuàng)建站點(diǎn)。一般可以以兩

種視圖中的任意一種來填寫此對話框，即“基本”或“高級”

視圖。“基本”視圖指導(dǎo)用戶一步一步地完成站點(diǎn)設(shè)置。如果

在沒有指導(dǎo)的情況下編輯站點(diǎn)信息，則可以隨時(shí)單擊“高級”

選項(xiàng)卡“

第6章網(wǎng)頁刷作4

下面介紹如何設(shè)置“基本”視圖對話框中的選項(xiàng)，該對話

框也叫做“站點(diǎn)定義向?qū)А薄?/p>

(1)選擇“站點(diǎn)”一“新建站點(diǎn)”命令，出現(xiàn)“站點(diǎn)定義”

對話框，站點(diǎn)名稱可以是任何所需的名稱。例如，可以將站點(diǎn)

命名為“我的網(wǎng)站”，如圖6-3所示。

第6章網(wǎng)頁刷作

基本

MacromediaDreamweaverMX2004中的站點(diǎn)是文件和文件夾的集合，它對應(yīng)于服務(wù)器上

的Web站點(diǎn).

您打尊為您的站點(diǎn)起出名至？______________________

嚷的網(wǎng)站I

示例：MySite

如果您希望使用FTP或RDS直接在服務(wù)器上工作，您應(yīng)當(dāng)轉(zhuǎn)而似凄注耍魄

服務(wù)器連接■■服務(wù)器連接不允許您執(zhí)行站點(diǎn)范南的噪作，比如鏈攘賽查藕司晤.

上一事回

圖6-3“站點(diǎn)定義”對話對

'第6章網(wǎng)頁刷作

(2)單擊“下一步”按鈕，出現(xiàn)向?qū)У南乱粋€(gè)屏幕，詢問

是否要使用服務(wù)器技術(shù)。

(3)選擇“否”選項(xiàng)指示目前該站點(diǎn)是一個(gè)靜態(tài)站點(diǎn)，沒

有動(dòng)態(tài)頁。

如果要設(shè)置站點(diǎn)來創(chuàng)建Web應(yīng)用程序，則需要選擇動(dòng)態(tài)文

檔類型，如MacromediaColdFusion、MicrosoftActive

ServerPage(ASP)>MicrosoftASP.NET>SunJavaServer

Page(JSP)或PHPHypertextPreprocessor(PHP)等。

第6章網(wǎng)頁制作

(4)單擊“下一步”按鈕，出現(xiàn)向?qū)У南乱粋€(gè)屏幕，詢問

如何使用文件。在站點(diǎn)開發(fā)過程中有多種使用文件的方式。

(5)“您將把文件存儲在計(jì)算機(jī)上的什么位置？”文本框允

許在本地磁盤上指定一個(gè)文件夾，單擊該文本框旁邊的文件夾

圖標(biāo)，隨即會出現(xiàn)“選擇站點(diǎn)的本地根文件夾”對話框。在

“選擇站點(diǎn)的本地根文件夾”對話框中，瀏覽到本地磁盤上存

放站點(diǎn)的文件夾，如圖6-4所示。

第6章網(wǎng)頁刷作

基本高如

站點(diǎn)定義

編黨文件,第3加分測t式文件共享文件

圖

在開發(fā)過程中，您打菖如何使用您的文件？6

e編輯我的計(jì)篁機(jī)上的本地副本，完成后再上傳到服務(wù)器（推薦）邕）

c使用本地網(wǎng)絡(luò)直接在服務(wù)器上進(jìn)行編輯也）4—

站

您將把文件存儲在計(jì)篁機(jī)上的什么位置？

點(diǎn)

:"DocumentsandS-ttiniDocumexdsj'

設(shè)

置

對

話

框

<上一步起）|懺一步?_>][取消11幫助?

第6章網(wǎng)頁刷作■

(6)單擊“下一步”按鈕，詢問如何連接到遠(yuǎn)程服務(wù)器

對話框，選擇“無”。

(7)單擊“下一步”按鈕，顯示設(shè)置概要，單擊“完成”

完成站點(diǎn)創(chuàng)建。

'第6章網(wǎng)頁刷作4

6.3.2Web站點(diǎn)的設(shè)計(jì)

1.頁面布局

(1)表格的使用。使用Dreamweaver中的表格創(chuàng)建復(fù)雜的

頁面布局。

表格是用于在HTML頁上顯示表格式數(shù)據(jù)以及對文本和圖

形進(jìn)行布局的強(qiáng)有力的工具。許多設(shè)計(jì)人員使用表格對Web頁

進(jìn)行布局。表格由一行或多行組成，每行又由一個(gè)或多個(gè)單元

格組成。雖然HTML代碼中通常不明確指定列，但

Dreamweaver允許像操作行和單元格那樣來操作列。

第6章網(wǎng)頁刷作4

Dreamweaver提供兩種方式來查看和操作表格：標(biāo)準(zhǔn)視圖

和布局視圖。在標(biāo)準(zhǔn)視圖中，表格顯示為行和列的網(wǎng)格，而布

局視圖允許將表格用作基礎(chǔ)結(jié)構(gòu)的同時(shí)在網(wǎng)頁上繪制、移動(dòng)方

框以及調(diào)整方框的大小。

第6章網(wǎng)頁刷作4

,插入表格

在“文檔”窗口，將插入點(diǎn)放到文檔中，然后執(zhí)行下列操

作之一：

①選擇“插入”一“表格”命令。

②在插入欄的“常用”類別中，單擊“表格”圖標(biāo)（如圖6-

5所示），出現(xiàn)“插入表格”對話框（如圖6-6所示）。

第6章網(wǎng)頁刷作

P逸I?侵田麗鬲^I贏雇藥醒［堿布用娓體質(zhì)性頭1腳$［應(yīng)髓事

0口白|劇團(tuán)」也⑥?2艮I墓回司回_

圖6-5“常用”欄

第6章網(wǎng)頁刷作

■人表禱

行眼E?元格堪無f

建散用■元格1.距f

IMfrs|百分比二|

謖捱fi

圖6-6“插入表格”對話框

第6章網(wǎng)頁刷作4

③在“插入表格”對話框中，設(shè)置下列選項(xiàng)：

在“行數(shù)”文本框中鍵入3,在“列數(shù)”文本框中鍵入3,

在“寬度”文本框中鍵入500,然后在“寬度”文本框右邊的

彈出式菜單中選擇像素。

將寬度設(shè)置為500像素將創(chuàng)建一個(gè)固定寬度的表格。在

“邊框”文本框中鍵入1,將表格和表格單元格周圍的邊框?qū)?/p>

度設(shè)置為1個(gè)像素。

第6章網(wǎng)頁刷作寓

布尊擊“扁定"法鈕。Dreamweaver將該表格插入到

中，如圖6-7所示。

^■acroaediaDreaaveaverIX-1表:格(Untitled-l?)J

d文件9編輯團(tuán)查看也插入i工）修改現(xiàn)）文本①命令?站點(diǎn)⑤）窗口也）幫助?

常用飾局［立下誄格施架「表簞1模板摩薦1旅住閔做「腳本1應(yīng)用程序?

'白⑸國臼國◎⑥?率齊毒囿昭陽國

到10寒1超標(biāo)題「表格甌號.|匚《?》此回

'第6章網(wǎng)頁刷作

?設(shè)置背景色、背景圖案

①選中整個(gè)表格，在屬性面板的“背景顏色”文本框中

選擇一種顏色，如#FFC384,背景顏色即應(yīng)用到表格，如圖6-8

所示C

圖6-8設(shè)置表格背景顏色

第6章網(wǎng)頁刷作

②在表格右下方的單元格中單擊，然后在屬性面板的

“背景”文本框中選擇背景圖案，如向日葵的圖片，結(jié)果如圖

6一。訴京

圖6-9設(shè)置表格背景圖案

第6章網(wǎng)頁刷作4

(2)布局表格。為了簡化使用表格進(jìn)行布局的過程，

Dreamweaver提供了布局視圖。在布局視圖中，可以使用表格

作為基礎(chǔ)結(jié)構(gòu)來設(shè)計(jì)頁面，避免了使用傳統(tǒng)的方法創(chuàng)建基于表

格的設(shè)計(jì)時(shí)經(jīng)常出現(xiàn)的一些問題。例如，在布局視圖中可以在

頁上方便地繪制布局單元格，然后將這些單元格移動(dòng)到所需的

位置，還可以方便地創(chuàng)建固定寬度的布局和自動(dòng)伸展為整個(gè)瀏

覽器窗口寬度的布局。

'第6章網(wǎng)頁刷作

?進(jìn)入布局視圖

在插入欄的“布局”類別中，有“標(biāo)準(zhǔn)視圖”和“布局視

圖”兩個(gè)按鈕，它們是用來切換表格的兩種視圖模式。單擊

“布局視圖”按鈕，即可將表格從正常視圖切換到布局視圖。

如果是第一次使用，會彈出提示用戶進(jìn)入表格的布局視圖后應(yīng)

用布局表格和布局單元格進(jìn)行表格編輯的對話框，選中對話框

下方的復(fù)選框“不再顯示此消息”，在以后的表格視圖切換時(shí)

就不會再彈出該對話框了。單擊“確定”按鈕即可進(jìn)入到表格

的布局視圖，進(jìn)行布局表格的編輯，如圖6-10所示。

第6章網(wǎng)頁刷作

京用布隔藁表格底架表.軍模也亍好婢江疝較通豐應(yīng)解序

標(biāo)準(zhǔn)視圖I布局視圖［回日

圖6-10布局視圖

第6章網(wǎng)頁刷作

?設(shè)置布局表格

如果頁面中原先沒有表格，可以直接單擊插入欄的“布局”

類別中的繪制布局表格按鈕國，在頁面中像繪制矩形一樣按

住鼠標(biāo)左鍵向右下拖動(dòng)，最后釋放左鍵即可在頁面中顯示布局

表格。用鼠標(biāo)選中布局表格，移動(dòng)鼠標(biāo)可調(diào)整布局表格的尺寸。

同樣也可以在相應(yīng)的屬性面板中進(jìn)行調(diào)整，屬性面板的參數(shù)設(shè)

置與正常視圖的表格屬性面板相似。

注意：在布局表格中不能插入文字、圖像等對象。

第6章網(wǎng)頁刷作4

單擊“布局”類別中的繪制布局單元格按4二i,在所布

局的表格中按住鼠標(biāo)左鍵向右下拖動(dòng)產(chǎn)生一個(gè)矩形區(qū)域，釋放

左鍵即可在布局表格中插入布局單元格。

用鼠標(biāo)選中布局單元格，在布局單元格周圍呈現(xiàn)8個(gè)控制點(diǎn),

拖動(dòng)這些控制點(diǎn)即可調(diào)整布局單元格尺寸，同樣也可以在相應(yīng)

的屬性面板中進(jìn)行調(diào)整，如圖6-11所示。

第6章網(wǎng)頁刷作

座3房黃喳3國鮑畫國畫耨國畫就醞I

H:%I標(biāo)準(zhǔn)視圖I布局視圉I□□

9幽?逗I卷.標(biāo)題無標(biāo)題文檔阻?.*'S比回

布局表格布1

6611?5*1n11421142▼

圖6-11調(diào)整布局視圖大小

國.

第6章網(wǎng)頁刷作4

?恢復(fù)正常視圖

完成整個(gè)頁面的布局工作之后，便可在正常視圖下進(jìn)行頁

面內(nèi)容的編輯。單擊“布局”類別中“標(biāo)準(zhǔn)視圖”按鈕，恢復(fù)

到標(biāo)準(zhǔn)視圖狀態(tài)。

注意：用布局方式所產(chǎn)生的表格邊框通常設(shè)置為0,即無邊

框。若要有表格邊框線，則還要進(jìn)一步在表格屬性面板中設(shè)置。

第6章網(wǎng)頁刷作4

2.頁面基本設(shè)計(jì)

(1)設(shè)置頁面屬性。頁面標(biāo)題、背景圖像和顏色、文本和鏈

接顏色以及邊距是每個(gè)HTML文檔的基本屬性。頁面標(biāo)題標(biāo)識

和命名文檔。背景圖像或背景顏色設(shè)置文檔的總體外觀。文本

和鏈接顏色幫助訪問者區(qū)分常規(guī)文本和超級文本，并了解哪些

鏈接已被訪問過，哪些沒有。

第6章網(wǎng)頁刷作4

?更改文檔標(biāo)題

HTML頁面的標(biāo)題幫助站點(diǎn)訪問者在瀏覽時(shí)跟蹤所查看的內(nèi)

容，并在訪問者的歷史記錄和書簽列表中標(biāo)識頁面。如果不給

頁面加標(biāo)題，頁面會在瀏覽器窗口、書簽列表和歷史記錄列表

中顯示為無標(biāo)題文檔。請注意，給文檔起一個(gè)文件名（通過保

存）不同于給頁面加標(biāo)題。

第6章網(wǎng)頁刷作4

①文檔打開時(shí)，執(zhí)行下列操作之一：

選擇“修改”一“頁面屬性”命令。

選擇“查看”一“工具欄”（如果還沒有選中它）命令。

②在“標(biāo)題”文本框中，輸入頁面標(biāo)題，單擊“確定”

按鈕。

③在“頁面屬性”對話框中編輯標(biāo)題，單擊“確定”按鈕。

第6章網(wǎng)頁刷作4

標(biāo)題出現(xiàn)在“文檔”窗口的標(biāo)題欄中（如果顯示，也會出現(xiàn)

在工具欄中）。頁面的文件名和保存文件的文件夾出現(xiàn)在標(biāo)題欄

中標(biāo)題旁邊的括號中。星號表示文檔包含尚未保存的更改，如

圖6-12所示。

第6章網(wǎng)頁刷作

更面尾性X

標(biāo)題|迎評促建網(wǎng)確定I

背景圖像（I）；r瀏覽您…|應(yīng)用

取消I

背景?:□（

文本⑥匚』訪問的隨⑦n|[

鏈接?□（活動(dòng)鏈接A）Qf

左邊界g[o-邊界寬度置）|―

頂部邊界位）|o-邊界高度理）r

文檔編碼①）：|簡體中文（GB2312）2重新載入國）|

跟蹤圖像C）：|一^瀏覽|

圖像透明度@1：2-，，■■,--，，，.I-1?100%

透明不透明

文件文件夾：D\工作,學(xué)校工作"迎評網(wǎng)'

站點(diǎn)文件夾D\工作'學(xué)校工作'迎評網(wǎng):幫助出）

圖6-12“頁面屬性”對話框

第6章網(wǎng)頁刷作4

?設(shè)置背景圖像或頁面背景顏色

若要定義頁面背景的圖像或顏色，請使用“頁面屬性”

對話框。如果同時(shí)使用背景圖像和背景顏色，則下載圖像時(shí)

會出現(xiàn)顏色，然后圖像覆蓋顏色。如果背景圖像包含任何透

明像素，則背景顏色透過背景圖像顯示出來。

第6章網(wǎng)頁刷作

定義背景圖像或顏色的具體步驟如下:

①選擇“修改”一“頁面屬性”命令，或從“文檔”窗口

的“設(shè)計(jì)”視圖中單擊鼠標(biāo)右鍵，在下拉菜單中選擇“頁面屬

性”命令。

②若要設(shè)置背景圖像，請單擊“瀏覽”按鈕，然后瀏覽并

選擇圖像；或直接在“背景圖像”對話框中輸入背景圖像的路

徑。如果背景圖像沒有填滿整個(gè)窗口，Dreamweaver會平鋪（重

復(fù)）背景圖像，就像瀏覽器所做的那樣。若要防止背景圖像平鋪,

請使用CSS樣式表禁用圖像平鋪。

③若要設(shè)置背景顏色，請單擊“背景”顏色框并從顏色選

擇器中詵擇顏色°二一父一_=

第6章網(wǎng)頁刷作

(2)設(shè)置文本格式。一般情況下網(wǎng)站中頁面信息大部分都

是使用文本內(nèi)容，因?yàn)槭褂梦谋灸馨研畔⒈磉_(dá)得更準(zhǔn)確和詳細(xì)。

無論制作什么類型的網(wǎng)頁，文本都是網(wǎng)頁中不可缺少的內(nèi)容，

文字的輸入及文本的相關(guān)操作是制作網(wǎng)頁的第一步。在網(wǎng)頁中

設(shè)計(jì)豐富的字體、多種的段落格式以及賞心悅目的文本效果，

既能夠充分體現(xiàn)網(wǎng)頁設(shè)計(jì)者要表達(dá)的意圖，又能激發(fā)網(wǎng)頁瀏覽

者的閱讀興趣。

頁面的文本編輯即文本的格式化操作類似于Word,其操作

非常簡單。選取一段文字，此時(shí)的屬性窗口顯示如圖6-13所示。

第6章網(wǎng)頁刷作4

①格式：可以選擇幾種預(yù)設(shè)的文字格式。

②字體選擇：選擇文字的字體，這里可以選擇的全是是

英文字體，如果想選擇其他字體，就要選擇最下面的一項(xiàng)一

—編輯字體列表（一般的文字編輯，默認(rèn)字體就可以了），可以

加入/刪除字體列表。

第6章網(wǎng)頁刷作

圖6-13文本屬性面板

第6章網(wǎng)頁刷作

注意：因?yàn)閯e人的系統(tǒng)上不一定裝有與你相同的字體，所

以不要將一些特殊的字體加到列表中并使用。如果真有需要用

到這些字體，應(yīng)當(dāng)做成圖片后再使用。

③大小：文字的大小，數(shù)字越大，文字也越大。

④文字顏色：在這里選擇文字的顏色，如圖6-14所示。

第6章網(wǎng)頁刷作

圖6?14文字色板

第6章網(wǎng)頁刷作4

在該顏色面板中的所有顏色都是Web的安全色。當(dāng)然也可

以單擊顏色板上方的畫板按鈕，從彈出的Windows標(biāo)準(zhǔn)顏色拾

取框中進(jìn)行顏色的設(shè)置。

注意：從彈出的Windows標(biāo)準(zhǔn)顏色拾取框中所選取的顏色

不一定在所有的瀏覽器中都能正確顯示，因此建議只使用圖6-

14顏色面板中的顏色。

第6章網(wǎng)頁刷作4

⑤B\是把字體設(shè)置成粗體，z］是設(shè)置字體為斜體。

⑥莖國凰設(shè)置文字的置左、置中、置右。

⑦鏈接：此處用來填寫要鏈接的網(wǎng)址或文件的路徑，如:

選中文字,填上http:〃www.ccit.js.cn,則文字鏈接到常州

信息職業(yè)技術(shù)學(xué)院網(wǎng)站。

⑧生恒］設(shè)置文字段落標(biāo)號，如圖6-15所示。

⑨空空設(shè)置文本的凸出和縮進(jìn)，如圖6-16所示。

第6章網(wǎng)頁刷作

^■acronediaDreaaveaTerU-[常州信息職業(yè)技術(shù)學(xué)院(Untitled-1*)]

③文件出）小輯⑥查看9插入工］修改（M）文本（T）_命令?站點(diǎn)⑤L窗口世［幫助（M）J

彘1箴幅翦蔗的藐詢僦旃旃遹祠就演后三

低日迎|國歸|國曲④?盡事|言臼曜||臼日

型圜fB|莪|標(biāo)題;闔膈確E瞇藕--臟②，?谿比現(xiàn)?

.常州信息職業(yè)技術(shù)學(xué)院

.常州信息職業(yè)技術(shù)學(xué)院

.常州信息職業(yè)技術(shù)學(xué)院

1.常州信息職業(yè)技術(shù)學(xué)院

2.常州信息職業(yè)技術(shù)學(xué)院

3.常州信息職業(yè)技術(shù)學(xué)院|

圖6-15設(shè)置文字段落樣式一

第6章網(wǎng)頁刷作4

(3)使用超級鏈接。網(wǎng)頁中超級鏈接無處不在，不管是文

字、圖像還是動(dòng)畫都可以創(chuàng)建鏈接。通過鏈接就可以方便地從

一個(gè)網(wǎng)頁跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。Dreamweaver可以極為方便地

實(shí)現(xiàn)網(wǎng)頁之間的鏈接。

第6章網(wǎng)頁刷作

^^■acroaediaDreasveaverIZ-[常州信息職業(yè)技術(shù)學(xué)院(Untitie(1-1?)]

編輯（￡）_查看9插入Q）修改膽）文本建）命令?站點(diǎn)⑵窗口過）幫助國）

庭直僦德困與

A目初|國白囹曲④?蕓家愛口曉||臼口

眼翻嚷|遨|標(biāo)瓢：閣禧踴躡樨院一—晚?▼|C聊{}Jd

.常州信息職業(yè)技術(shù)學(xué)院

。常州信息職業(yè)技術(shù)學(xué)院

.常州信息職業(yè)技術(shù)學(xué)院

1.常州信息職業(yè)技術(shù)學(xué)院

1.常州信息職業(yè)技術(shù)學(xué)院

1.常州信息職業(yè)技術(shù)學(xué)院|

圖6-16設(shè)置文字段落樣式二

第6章網(wǎng)頁刷作4

?鏈接路徑

通常將鏈接的路徑分為絕對路徑、根相對路徑和文檔相

對路徑。

①絕對路徑是包括服務(wù)器協(xié)議（在本例中為http協(xié)議）的

完全路徑，比如“常州信息職業(yè)技術(shù)學(xué)院”的完全路徑為：

http://www.ccit.js.cn,如果所要鏈接當(dāng)前站點(diǎn)之外的文檔,

就必須使用絕對路徑。

②相對路徑包括根相對路徑和文檔相對路徑兩種。

第6章網(wǎng)頁刷作4

文檔相對路徑是以當(dāng)前文檔所在位置為起點(diǎn)到被鏈接文檔

經(jīng)由的路徑。與絕對路徑相比，省去了當(dāng)前文檔與被鏈接文檔

的絕對URL中的相同部分，只留下不同的地方。

根相對路徑的路徑以“尸開頭，路徑是從當(dāng)前站點(diǎn)的根目錄開

始計(jì)算的。

第6章網(wǎng)頁刷作4

?文字鏈接

首先用鼠標(biāo)選定要做鏈接的文字，然后在屬性面板中“鏈

接(L)”文本框中確定被鏈接對象的URL即可，如圖6T3中⑦所

Zj\O

通常在站點(diǎn)內(nèi)的鏈接，可以單擊“鏈接”右邊的按鈕，彈

出選擇鏈接文件對話框。如圖6-17所示，選定需要鏈接的文件,

單擊“確定”即可。

第6章網(wǎng)頁刷作

去下頁看看吧。

|UntitledT|index,him」「

Qody><p)<￡out>i803x4381K/1杪

圖6-17創(chuàng)建文字鏈接

第6章網(wǎng)頁刷作

?圖像鏈接

在Dreamweaver中，創(chuàng)建本地圖像與文件之間的鏈接與創(chuàng)

建文本與文件之間的鏈接相似。

對整個(gè)圖像進(jìn)行鏈接比較簡單，同前面操作相似。選定要

進(jìn)行鏈接的圖像之后，只需在對應(yīng)的圖像屬性面板的“鏈接”

文本框中直接輸入U(xiǎn)RL或單擊右邊的按」,選定所鏈接的

文件即可。

注意：某些圖片在加上鏈接后，會出現(xiàn)一個(gè)藍(lán)色的邊框,

要將邊框去掉，將邊框(B)設(shè)為0即可。

第6章網(wǎng)頁刷作

地圖也）1—

、口oa

圖6?18熱區(qū)鏈接樣式

第6章網(wǎng)頁刷作

?熱區(qū)鏈接

前面介紹的圖片鏈接，一張圖只能對應(yīng)一個(gè)鏈接，能不能

一張圖對應(yīng)多個(gè)鏈接呢？答案是可以的。選取一張圖片后，可

以在屬性面板看到“地圖(M)”選項(xiàng)，如圖6-18所示。

其中：2創(chuàng)建矩形熱區(qū)，篁創(chuàng)建圓形熱區(qū)，區(qū)創(chuàng)建多

邊形熱區(qū)。單擊兇，光標(biāo)變成一個(gè)十字，此時(shí)可以在圖片上

畫出一個(gè)藍(lán)色多邊形的熱區(qū)，如圖6-19所示。此時(shí)對應(yīng)的屬性

面板如圖6-20所示。

第6章網(wǎng)頁刷作

■■i’?■?’（

.黑龍江

/舌板、

1.新^5

,■內(nèi)裝古、'延星"..MX'

J空垂」愁'

$I「理旗'「旗?

喉西，.洞南江蘇

1-.—

\酮「畫豆事

xY—????'

、1重慶gas

_fj_______.../

4qr][^

‘例―磔）

一—一11…廠-

廣西百薄

■-1■■

，海南1

第6章網(wǎng)頁刷作

日熱點(diǎn)陰W*

目標(biāo)國）▼替代（D[

地圖（M）U<P

圖6-20熱區(qū)屬性面板

第6章網(wǎng)頁刷作

同樣地，在“鏈接(L)”文本框中輸入鏈接地址(“產(chǎn)表示一

個(gè)空鏈接)，而“替代(iy框中的內(nèi)容則為當(dāng)鼠標(biāo)指向熱區(qū)時(shí)所

顯示的文字，與圖片的替代(T)相似。我們可以通過選擇不同

的熱區(qū)，并通過調(diào)整熱區(qū)的控制點(diǎn)調(diào)整熱區(qū)的大小。通過熱區(qū),

我們可以在圖片的任何地方做一個(gè)鏈接，當(dāng)然可以在一張圖片

中畫很多熱點(diǎn)，做很多鏈接，分別鏈接到不同的頁面。

第6章網(wǎng)頁刷作4

?錨點(diǎn)鏈接

所謂錨點(diǎn)，它實(shí)際是一種標(biāo)記，指示超級鏈接跳轉(zhuǎn)的位置。

對于長幅的網(wǎng)頁，可以在它的一些重要地方設(shè)置錨點(diǎn)，然后在

這些錨點(diǎn)之間建立超級鏈接，以幫助訪問者快速瀏覽。

①在需要插入錨點(diǎn)的地方點(diǎn)一下鼠標(biāo)，然后單擊“常用”

面板上的命名錨記工具，如圖6-21所示，鍵入錨點(diǎn)名稱，如圖

6-22所示。一個(gè)站點(diǎn)中的錨點(diǎn)名稱只能是唯一的，否則會出現(xiàn)

錯(cuò)誤。

第6章網(wǎng)頁刷作

4日叵I國白國如④■§*序口躇固口

圖6-21錨點(diǎn)鏈接

第6章網(wǎng)頁刷作

圖6-22創(chuàng)建錨點(diǎn)

第6章網(wǎng)頁刷作4

②選擇要?jiǎng)?chuàng)建鏈接的文本或圖像，在屬性檢查器的“鏈

接”文本框中，鍵入一個(gè)數(shù)字符號#和錨點(diǎn)名稱。例如：若要

鏈接到當(dāng)前文檔中的名為“top”的錨點(diǎn)，請鍵入枇op；若要鏈

接到同一文件夾內(nèi)其他文檔中的名為“top”的錨點(diǎn)，請鍵入

filename.htm#top0

注意：錨點(diǎn)名稱區(qū)分大小寫。

第6章網(wǎng)頁刷作4

-E-mail鏈接

創(chuàng)建E-mail鏈接可用以下兩種方法：

①選取需要?jiǎng)?chuàng)建鏈接的文本或者圖像，點(diǎn)擊常用面板中

的“電子郵件鏈接”工具，輸入郵件地址，如圖6-23所示。

第6章網(wǎng)頁刷作

圖6-23創(chuàng)建E-mail鏈接

第6章網(wǎng)頁刷作

②選取需要?jiǎng)?chuàng)建鏈接的文本或者圖像，在屬性面板中的

鏈接欄輸入mailto:郵件地址，如圖6-22所示。

第6章網(wǎng)頁刷作4

3.頁面精彩設(shè)計(jì)

(1)圖像的操作應(yīng)用。為了充分表現(xiàn)網(wǎng)頁的主題，增強(qiáng)

網(wǎng)頁的美感，體現(xiàn)網(wǎng)站的風(fēng)格和特色，在網(wǎng)頁中常常使用圖

像。

在Dreamweaver中可以方便地進(jìn)行圖像處理，如設(shè)置網(wǎng)頁

背景圖像、向網(wǎng)頁中插入圖像、制作翻轉(zhuǎn)圖像效果、利用圖

像設(shè)置超鏈接等。

第6章網(wǎng)頁刷作

?圖像插入

插入圖像的操作過程如下：

①首先在網(wǎng)頁中確定要插入圖像的位置。

②選擇菜單命令“插入”一“圖像”或用鼠標(biāo)單擊插入

欄“常用”類別中的插入幽餞鈕，選擇插入圖像的畫面,

如圖6-24所示。

第6章網(wǎng)頁刷作

選擇圖值蠢?lX|

從文件名稱選擇6文件系統(tǒng)

C數(shù)據(jù)源

查找范圍（X）:11二/images3Tp圖像預(yù)覽

jxky_sxjd_03.jpgtgjxky_sxjd_12.jpg[grsxx_03.gif

jxky_sxjd_04.jpg^^kydtjl.gif$grsxx_04.gif

jxky_sxjd_05.jpg|QrsxxjO5gi￡

jxky_sxjd_05Jpg.JPg$Zjnewgif^yrsxx_06gif

jxky_sxjd_06.jpg^qnewsJI.gifsxjd_01jpg

jxky_sxjd_07.jpg[$ZjnewsJl.jpg!Qszpx_01jpg

jxky_sxjd_08.jpg[Jnews_02.jpg起top_01gif

jxky_sxjd_09.jpg^yrsxx_01.giftop_02gif

jxky_sxjd_10.jpg中^rsxxJJl.jpgtop_03.gif

jxky_sxjd_ll.jpg|$Zjrsxx_02.giftop_04.gif

±1

778x185JPEG,125K/

相對于▼|top_test.asp

P預(yù)覽圖像

圖6-24選擇圖像對話框

第6章網(wǎng)頁刷作

③在列表中選擇一個(gè)已經(jīng)準(zhǔn)備好的圖像文件，單擊“確認(rèn)”

按鈕，插入圖像到網(wǎng)頁中。

④如果被選定的圖像沒有位于本地站點(diǎn)目錄中，則會彈出

征詢對話框，希望用戶作出決定是否將文件復(fù)制到本地站點(diǎn)中。

單擊“是”按鈕，則會繼續(xù)彈出對話框，進(jìn)一步確定保存選定

的圖像文件；單擊“否”按鈕，則不將圖像復(fù)制到本地站點(diǎn)。

通常情況下，應(yīng)該選擇“是"，將圖像復(fù)制到站點(diǎn)目錄中。

注意：為了避免出現(xiàn)征詢對話框，在插入圖像前先將圖像

文件通過資源管理器復(fù)制到本地站點(diǎn)目錄中，這樣就可直接使

用本地站點(diǎn)中的圖像文件。

第6章網(wǎng)頁刷作

?修改圖像屬性

在網(wǎng)頁中用鼠標(biāo)點(diǎn)擊所插入的圖像，則會在該頁面中顯示

出圖像屬性面板，如圖6-25所示。

▼屋性

寬世）后片渡文件0!7?mages7I嬴磅_j替代

高朝不②鏈接⑥多

叵褊福1［重設(shè)大小1

-

地垂直邊距wxc目標(biāo)?」2］邊植⑥r(nóng)@國匡圜⑨

產(chǎn)宜DI兇水平邊距低品質(zhì)源電廠Q,j對齊一”默認(rèn)值1^3

△

圖6-25圖像屬性面板

第6章網(wǎng)頁刷作4

常用的屬性如下：

①圖片的縮略圖及圖片的大小。

②圖片的長和寬，如果圖片的長和寬跟原圖的大小不一致,

則這里的數(shù)字會用粗體顯示。點(diǎn)取一張圖片，可以看到圖片會

被套上一個(gè)框和三個(gè)點(diǎn)，三個(gè)點(diǎn)分別代表將圖片向三個(gè)不同的

方向拉伸，從而達(dá)到放大和縮小的效果。在拉伸過程中，按住

Shift鍵，再拖動(dòng)角上的點(diǎn)，可以使圖片保持寬高比例拉伸。如

果要將圖片恢復(fù)為原始大小，可以按屬性面板右下角的“重置

大小”按鈕。

第6章網(wǎng)頁刷作

③源文件⑸是圖片所在的位置；鏈接(L)是該圖片對應(yīng)

的超鏈接，由于沒有做成鏈接，所以這里顯示為空；后面的兩

個(gè)按鈕◎」，畬可以拉出一個(gè)箭頭，直接將圖片或鏈接指

向文件夾的某一個(gè)文件，a則是按照傳統(tǒng)的方法打開文件夾

去尋找某一個(gè)文件，按照實(shí)際操作的經(jīng)驗(yàn)，前者作用不大；目

標(biāo)(R)是鏈接的打開方式。關(guān)于鏈接的建立與注意事項(xiàng)將在后

面介紹。

④替代(T),是圖片的說明，假如在這里輸入“學(xué)院簡

介”，則在瀏覽的時(shí)候，將鼠標(biāo)移到圖片上，就可以看到這些

說明，如圖6-26所示。

第6章網(wǎng)頁刷作

學(xué)院簡介

??…………