網(wǎng)頁(yè)設(shè)計(jì)教案新部編本標(biāo)準(zhǔn)模板

教師學(xué)科教案

[20-20學(xué)年度第__學(xué)期]

任教學(xué)科：_____________

任教年級(jí)：_____________

任教老師：_____________

XX市實(shí)驗(yàn)學(xué)校

教學(xué)內(nèi)容批注

第1章Dreamweaver介紹

1.1Dreamweaver新增功能簡(jiǎn)介

Drcamweaver是Macromedia公司推出的主頁(yè)編輯工具。它是一個(gè)

所見即所得網(wǎng)頁(yè)編輯器，支持最新的DHTML和CSS標(biāo)準(zhǔn)。采用了多

種先進(jìn)技術(shù)，能夠快速高效地創(chuàng)建極具表現(xiàn)力和動(dòng)感效果的網(wǎng)頁(yè)，使

網(wǎng)頁(yè)創(chuàng)作過程變得非常簡(jiǎn)單。值得稱道的是，Dreamweaver不僅提供

了強(qiáng)大的網(wǎng)頁(yè)編輯功能，而且提供了完善的站點(diǎn)管理機(jī)制，可以說，

它是一個(gè)集網(wǎng)頁(yè)創(chuàng)作和站點(diǎn)管理兩大利器于一身的創(chuàng)作工具。

在學(xué)習(xí)使用Dreamweaver之前，我們先了解Dreamweaver的一些

新增功能。

1.獨(dú)特的往返HTML功能

這個(gè)功能可以同步訪問設(shè)計(jì)視圖(DesignView)和HTML源代碼，

可以打開用其他編輯器編輯的文檔，但它不會(huì)改寫手工輸入的HTML

標(biāo)記或第三方標(biāo)記。這就使得Dreamweaver自動(dòng)生成的代碼與手工輸

入的代碼融為一體。

2.整合文本編輯器

現(xiàn)在Dreamweaver增加了以代碼為中心的新特性。手工編寫代碼

就如設(shè)計(jì)視圖環(huán)境一樣方便，可以自動(dòng)縮排、標(biāo)點(diǎn)平衡、選擇多行后

一次縮進(jìn)?？梢栽谑褂么a視圖工具欄(CodeViewToolbar)的下拉

列表定義的JavaScript函數(shù)之間輕松導(dǎo)航。對(duì)于使用JavaScript編程的

專業(yè)人員來說，這種代碼導(dǎo)航無疑是一種高效的導(dǎo)航幫助。輸入代碼

時(shí)Dreamweaver自動(dòng)對(duì)HTML和JavaScript代碼使用不同的顏色顯示。

3.把主窗口分割為代碼視圖和設(shè)計(jì)試圖

可以把Dreamweaver的主窗口分割為代碼視圖和設(shè)計(jì)試圖。能夠

查看整頁(yè)代碼而無需離開文檔窗口。這樣，就可以在同一個(gè)窗口同時(shí)

查看代碼視圖和設(shè)計(jì)視圖，同時(shí)編輯多個(gè)文檔的代碼。

4.JavaScript調(diào)試器

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

使用新增的JavaScript調(diào)試器，可以直接在瀏覽器中調(diào)試客戶端

JavaScript腳本，觀察JavaScript的執(zhí)行，就像它在Netscape或IE瀏覽

器中一樣，因而能夠更好地了解每種瀏覽器是怎樣執(zhí)行JavaScript的。

可以設(shè)置斷點(diǎn)調(diào)試代碼，然后在逐步執(zhí)行代碼的過程中觀察變量的變

化，及時(shí)發(fā)現(xiàn)編程錯(cuò)誤。

5.編輯非HTML文檔

可以把Dreamweaver當(dāng)作文本編輯器編輯非HTML文檔，直接在

代碼視圖(CodeView)中編輯JavaScript,XML和其他文本文件。

1.2Dreanweaver的工作環(huán)境

Dreamweaver提供了將全部元素置于一個(gè)窗口中的集成工作區(qū)。在

集成工作區(qū)中，全部窗口和面板集成在一個(gè)應(yīng)用程序窗口中。您可以

選擇面向設(shè)計(jì)人員的布局或面向手工編碼人員需求的布局。啟動(dòng)

Dreamweaver時(shí)，會(huì)出現(xiàn)一個(gè)工作區(qū)設(shè)置對(duì)話框(如下圖)：

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

請(qǐng)選擇您喜歡的工作區(qū)布局。以后您可以在“首選參數(shù)”中切換布局

◎般汁青6)0代碼編寫者⑩

『確

您可以從中選擇一種工作區(qū)布局。如果您不熟悉編寫代碼，請(qǐng)您選

擇“設(shè)計(jì)者”。如果您以后想更改工作區(qū)，可以使用編輯菜單“首選參數(shù)”

對(duì)話框切換到一種不同的工作區(qū)。編輯“首選參數(shù)”對(duì)話框如下圖：

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

“插入”欄（如下圖）：包含用于將各種類型的“對(duì)象”（如圖像、表

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

許您在插入它時(shí)設(shè)置不同的屬性。例如，您可以通過單擊“插入”欄中

的“表格”按鈕插入一個(gè)表格。也可以不雌“插入”欄而使用“插入”菜單

插入對(duì)象。

常用k圖圖.色固四圖9甲

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

“屬性檢查器”（如下圖）：用于查看和更改所選對(duì)象或文本的

各種屬性。

格武以0_式①’▼■1W業(yè)組■睢接-9:

*律收除體.林中立s發(fā)耐/*nceerar民標(biāo)4D

*■]■華尢氣水輪以滯留K2不我Jc尊景直—9n如一

」0券城@）以0要p口笊康e②J植@

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

“面板組”（如下圖）是分組在某個(gè)標(biāo)題下面的相關(guān)面板的集合。

若要展開一個(gè)面板組，請(qǐng)不擊組名稱左側(cè)的展開的頭：若要取消停匏

一個(gè)面板組，請(qǐng)拖動(dòng)該組標(biāo)題條左邊緣的手柄。

＞CSs樣式

?"代碼

＞標(biāo)簽檢查器

＞框集

＞應(yīng)用程序

＞資源

＞歷史記錄

“文件”面板（如下圖）使您可以管理您的文件和文件夾，無論它

彳門是Dreamweaver站點(diǎn)的一部分還是在遠(yuǎn)程服務(wù)器上?！拔募泵姘暹€

使您可以訪問本地磁盤上的全部文件，類似于“ind。ws資源管理器。

貨游文件?

1dwmx20(M?V??本地視圖1j

3^C8

>?*dmxRMm\A-'ES

曰0

Bigges

畫OOOS.振

別彳

00b1.

交00b2.0f

01.gif

莖02gjf

wG3gjf

gif

當(dāng)05cif

06.gif

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

Dreamweaver提供了多種此處未說明的其他面板、檢查器和窗口。

若要打開其它面板，請(qǐng)使用“窗口”菜單。

1.3常用工具欄

“插入”欄

“插入”欄包含用于創(chuàng)建和插入對(duì)象（如表格、層和圖像）的按鈕。

當(dāng)鼠標(biāo)指針滾動(dòng)到一個(gè)按鈕上時(shí)，會(huì)出現(xiàn)一個(gè)工具提示，其中含有該

按鈕的名稱。

常用v隧一位［圖R?笫▼菌口昏;?用

某些類別具有帶彈出菜單的按鈕。從彈出菜單中選擇一個(gè)選項(xiàng)時(shí)，

該選項(xiàng)將成為該按鈕的默認(rèn)操作。例如，如果從“圖像”按鈕的彈出菜

單中選擇“圖像占位符”，下次單擊“圖像”按鈕時(shí)，Dreamweaver會(huì)插

入一個(gè)圖像占位符。每當(dāng)從彈出菜單中選擇一個(gè)新選項(xiàng)時(shí)，該按鈕的

默認(rèn)操作都會(huì)改變。

“插入”欄有以下幾個(gè)類別：

“常用”：使您可以創(chuàng)建和插入最常用的對(duì)象，例如圖像和表格。

“布局”：使您可以插入表格、div標(biāo)簽、層和框架。您還可以從三個(gè)表

格視圖中進(jìn)行選擇：“標(biāo)準(zhǔn)”（默認(rèn)）、“擴(kuò)展表格”和“布

局”。當(dāng)選擇“布局”模式后，您可以使用Dreamweaver布局

工具：“繪制布局單元格”和“繪制布局表格”。

“表單”：包含用于創(chuàng)建表單和插入表單元素的按鈕。

“文本”：使您可以插入各種文本格式設(shè)置標(biāo)簽和列表格式設(shè)置標(biāo)簽。

“HTML”：使您可以插入用于水平線、頭內(nèi)容、表格、框架和腳本的

HTML標(biāo)簽。

“應(yīng)用程序”：使您可以插入動(dòng)態(tài)元素，例如記錄集、重復(fù)區(qū)域以及記

錄插入和更新表單。

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

“Flash元素”：使您可以插入Flash元素。

“收藏”：使您可以將“插入”欄中最常用的按鈕分組和組織到某一常用

位置。

文檔工具欄

文檔工具欄中包含按鈕，這些按鈕使您可以在文檔的不同視圖間

快速切換：“代碼”視圖、“設(shè)計(jì)”視圖、同時(shí)顯示“代碼”和“設(shè)計(jì)”視圖的

拆分視圖。

工具欄中還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔

有關(guān)的常用命令和選項(xiàng)。

■■■■■■?—?■MM.

顯示代碼視圖顯示竦計(jì)視園設(shè)有瀏覽器/施查錯(cuò)誤文件管理刷新

_j代成3拆分!」設(shè)計(jì)標(biāo)題：|Drea2004入門、今狼?UC跳

“示我碼視圖和曲十視圖文檔標(biāo)題；在測(cè)筑器預(yù)筑式視因選項(xiàng)

以下對(duì)圖中的指引進(jìn)行說明：

代碼視圖：僅在“文檔”窗口中顯示“代碼”視圖。

設(shè)計(jì)視圖：僅在“文檔”窗口中顯示“設(shè)計(jì)”視圖。

拆分視圖：在“文檔”窗口同時(shí)顯示“代碼”視圖和“設(shè)計(jì)”視圖。

標(biāo)題：可以直接在此處為文檔設(shè)定標(biāo)題，它將顯示在瀏覽器

的標(biāo)題欄中。

沒有瀏覽器/檢查錯(cuò)誤：使您可以檢查跨瀏覽器兼容性。

在瀏覽器中預(yù)覽/調(diào)試：在瀏覽器中預(yù)覽或調(diào)試文檔。從彈出菜

單中選擇一個(gè)瀏覽器。文件管理：顯示“文件管理”彈出菜單。

刷新：當(dāng)您在“代碼”視圖中進(jìn)行更改后刷新文檔的“設(shè)計(jì)”

視圖。

視圖選項(xiàng)：允許您為“代碼”視圖和“設(shè)計(jì)”視圖設(shè)置選項(xiàng)。

狀態(tài)欄

狀態(tài)欄提供與您正創(chuàng)建的文檔有關(guān)的其它信息。

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

艾檔大小花計(jì)下載時(shí)間

(badv)(tahletTabl=01>Ctr)(ta)(diwj(table)(tr)(td)Kosyess)1002x422T30E/9種

標(biāo)簽優(yōu)揮涔自回太小彈出來單

標(biāo)簽選擇器顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)°單擊該層

次結(jié)構(gòu)中的任何標(biāo)簽以選擇該標(biāo)簽及其全部?jī)?nèi)容。比如：?jiǎn)螕簟碽ody)

可以選擇文檔的整個(gè)正文.

窗口大小彈出菜單(僅在“設(shè)計(jì)”視圖中可見)用來將“文檔”窗口

的大小調(diào)整到預(yù)定義或自定義的尺寸

“窗口大小”彈出菜單的右側(cè)是頁(yè)而的文檔大小和估計(jì)下載時(shí)間。

1.4標(biāo)尺和網(wǎng)格

在網(wǎng)頁(yè)排版的過程中，如果希望對(duì)元素精確定位，則標(biāo)尺和網(wǎng)格是

非常有用的工具。

1.顯示標(biāo)尺

在文檔窗口中，默認(rèn)狀態(tài)下不顯示標(biāo)尺，如果需要顯示標(biāo)尺，以便

排版，可使用以下方法：在文檔窗口中，選擇''視圖選項(xiàng)”命令，選

中“標(biāo)尺”。如圖：

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

2.顯示網(wǎng)格

在文檔窗口中，默認(rèn)狀態(tài)下不顯示網(wǎng)格，如果需要顯示網(wǎng)格，以便

精確布局，可使用以下方法。在文檔窗口中，選擇“視圖選項(xiàng)”命令，

選中“標(biāo)尺”，則在文檔窗口中顯示網(wǎng)格。顯示網(wǎng)格之后的文檔窗口如

圖所示:

(■?8X

5范保出的重有的入2的文和口企今東對(duì)點(diǎn)）形出

走第團(tuán)市地表單文本應(yīng)期序無承收深

常遠(yuǎn)八

蕭'?'WJ7

??、

?—3

料

3斤設(shè)回

，82v

MA-<，

」"，：

:*￥>

?答，…

“000811u

JGH.u

itft，■】

，M

.jMnX

.I.ks1

I：

存包海推策）

戶的‘市H0|20n出.1()si0gei0eo蛋日雄的

1-5快捷鍵

在運(yùn)用Dreamweaver的過程中，熟練的使用快捷鍵，能達(dá)到事半

功倍的效果，而且是“高手”的體現(xiàn)在這里我把Dreamweaver的快捷

方式整理出來，希望對(duì)學(xué)員熟練掌握Dreamweaver有所幫助。

文件菜單

新建文檔Ctrl+N

打開文件Ctrl+0或者將文件從［文件管理器］或［站點(diǎn)］窗口拖

動(dòng)到［文檔］窗口中

在框架中打開Ctrl+Shift+0

關(guān)閉Ctrl+W

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

保存Ctrl+S

另存為Ctrl+Shift+S

檢查鏈接Shift+F8

退出Ctrl+Q

編輯菜單

撤消Ctrl+Z

重復(fù)Ctrl+Y或Ctrl+Shift+Z

剪切Ctrl+X或Shift+Del

拷貝Ctrl+C或Ctrl+Ins

粘貼Clrl+V或Shift+Ins

清除Delete

全選Ctrl+A

選擇父標(biāo)簽Ctrl+Shift+<

選擇子標(biāo)簽Ctrl+Shift+>

查找和替換Ctrl+F

查找下一個(gè)F3

縮進(jìn)代碼Ctrl+Shift+

左縮進(jìn)代碼Ctrl+Shift+[

平衡大括弧CtrlV

啟動(dòng)外部編輯器Ctrl+E

參數(shù)選擇Ctrl+U

頁(yè)面視圖

標(biāo)準(zhǔn)視圖Ctrl+Shift+F6

布局視圖Ctrl+F6

工具條Ctrl+Shift+T

查看頁(yè)面元素

可視化助理Ctrl+Shift+I

標(biāo)尺Ctrl+Alt+R

顯示網(wǎng)格Ctrl+Alt+G

靠齊到網(wǎng)格Ctrl+Alt+Shift+G

頭內(nèi)容Ctrl+Shift+W

頁(yè)面屬性Ctrl+Shift+J

代碼編輯

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

切換到設(shè)計(jì)視圖Ctrl+Tab

打開快速標(biāo)簽編輯器ctrl+T

選擇父標(biāo)簽Ctrl+Shift+<

平衡大括弧Ctrl+,

全選Ctrl+A

拷貝Ctrl+C

查找和替換ctrl+F

查找下一個(gè)F3

替換Ctrl+H

粘貼Ctrl+V

剪切Ctrl+X

重復(fù)Ctrl+Y

撤消Ctrl+Z

向上選擇一勺Shift+Ur

向下選擇一行Shift?Down

選擇左邊字符Shift+Left

選擇右邊字符Shift+Right

向上翻頁(yè)P(yáng)ageUp

向卜翻頁(yè)P(yáng)ageDown

向上選擇一頁(yè)Shift+PageUp

向下選擇一頁(yè)Shift+PageDown

選擇左邊單詞Ctrl+Shift+Left

選擇右邊單詞Ctrl+Shift+Right

移到行首Home

移到行尾End

移動(dòng)到代碼頂部Ctrl+Home

移動(dòng)到代碼尾部Ctrl+End

向上選擇到代碼頂部Ctrl+Shift+Home

向下選擇到代碼頂部Ctrl+Shift+End

編輯文本

創(chuàng)建新段落Enter

插入換行Shift+Enter

插入不換行空格Ctrl+Shift+Spacebar

拷貝文本或?qū)ο蟮巾?yè)面其他位置Ctrl+拖動(dòng)選取項(xiàng)目到新位

置

選取一個(gè)單詞雙擊

在設(shè)計(jì)視圖和代碼編輯器之間切換Ctrl+Tab

打開和關(guān)閉［屬性］檢查器Ctrl+Shift+J

檢查拼寫Shift+F7

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

格式化文本

縮進(jìn)Ctrl+]

左縮進(jìn)Ctrl+[

段落格式Ctrl+Shift+P

應(yīng)用標(biāo)題1到6到段落Ctrl+1到6

加粗選定文本Ctrl+B

傾斜選定文本Ctrl+I

編輯樣式表Ctrl+Shift+E

處理表格

選擇表格（光標(biāo)在表格中）Ctrl+A

移動(dòng)到下一單元格Tab

移動(dòng)到上一單元格Shift+Tab

插入行（在當(dāng)前行之前）Ctrl+M

在表格未插入一行在最后一個(gè)單元格Tab

刪除當(dāng)前行Ctrl+Shift+M

插入列Ctrl+Shift+A

刪除列_Ctrl+Shift+-（連字符）

合并單元格Ctrl+Alt+M

拆分單元格Ctrl+Alt+S

處理框架

選擇框架框架中Alt+點(diǎn)擊

選擇下一框架或框架頁(yè)Alt+右方向鍵

選擇上一框架或框架頁(yè)A11+左方向鍵

選擇父框架Alt+上方向鍵

選擇子框架或框架頁(yè)Alt+下方向鍵

管理超鏈接

創(chuàng)建超鏈接（選定文本）Ctrl+L

刪除超鏈接Ctrl+Shift+L

在瀏覽器中定位和預(yù)覽

在主瀏覽器中預(yù)覽F12

在次要瀏覽器中預(yù)覽Ctrl+F

插入對(duì)象

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

圖象Ctil+Alt+I

表格Ctrl+Alt+T

Flash影片Ctrl+Alt+F

打開和關(guān)閉面板

屬性Ctrl+F3

站點(diǎn)文件F5

資源Fil

CSS樣式Shift+Fll

HTML樣式Ctrl+Fll

行為Shift+F3

歷史紀(jì)錄Shift+FlO

框架Shift+F2

層F2

參考Ctrl+Shift+Fl

最小化所有窗口Shift+F4

最大化所有窗口Alt+Shift+F4

1.6建立站點(diǎn)

Wob站點(diǎn)是一組具有如相關(guān)主題、類似的設(shè)計(jì)、鏈接文檔和資源。

Dreamweaver是一個(gè)站點(diǎn)創(chuàng)建和管理工具，因此使用它不僅可以創(chuàng)建

單獨(dú)的文檔，還可以創(chuàng)建完整的Web站點(diǎn)。創(chuàng)建Web站點(diǎn)的第一步

是規(guī)劃。為了達(dá)到最佳效果，在創(chuàng)建任何Web站點(diǎn)頁(yè)面之前，應(yīng)對(duì)

站點(diǎn)的結(jié)構(gòu)進(jìn)行設(shè)計(jì)和規(guī)劃。決定要?jiǎng)?chuàng)建多少頁(yè)，每頁(yè)上顯示什么內(nèi)

容，頁(yè)面布局的外觀以及頁(yè)是如何互相連接起來的。

請(qǐng)執(zhí)行以下操作：

從“站點(diǎn)”菜單選擇“管理站點(diǎn)”，出現(xiàn)“管理站點(diǎn)”對(duì)話框。

在“管理站點(diǎn)”對(duì)話框中，單擊“新建”，然后從彈出式菜單中選擇“站

點(diǎn)”。出現(xiàn)“站點(diǎn)定義”對(duì)話框。

如果對(duì)話框顯示的是“高級(jí)”選項(xiàng)卡，則單擊“基本”。出現(xiàn)“站點(diǎn)定

義向?qū)А钡牡谝粋€(gè)界面，要求您為站點(diǎn)輸入一個(gè)名稱。

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

在文本框中，輸入一個(gè)名稱以在Dreamweaver中標(biāo)識(shí)該站點(diǎn)。

該名稱可以是任何所需的名稱。

單擊“下一步”。出現(xiàn)向?qū)У南乱粋€(gè)界面，詢問您是否要使用服務(wù)器

技術(shù)。

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

您是否打算使用服務(wù)器披術(shù)，如ColdFuxion、ASP,NET、ASR、JSF或FE?

◎否，我不想使用那各黯技術(shù)..們

◎是，我想使用服務(wù)器技術(shù)。(Y)

k上一步B)|步QD〉"取消||可助

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

單擊“下一步”。出現(xiàn)向?qū)У南乱粋€(gè)界面，詢問您要如何使用您的

文件。

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

選擇標(biāo)有“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器

（推薦）”的選項(xiàng)。在站點(diǎn)開發(fā)過程中有多種處理文件的方式，初學(xué)

網(wǎng)頁(yè)制作的朋友請(qǐng)選擇此選項(xiàng)。

單擊該文本框旁邊的文件夾圖標(biāo)。隨即會(huì)出現(xiàn)“選擇站點(diǎn)的本地根

文件夾”對(duì)話框。

單擊''下一步"，出現(xiàn)向?qū)У南乱粋€(gè)界面，詢問您如何連接到遠(yuǎn)程

服務(wù)器。從彈出式菜單中選擇“無".您可以稍后設(shè)置有關(guān)遠(yuǎn)程站點(diǎn)的

信息。目前，本地站點(diǎn)信息對(duì)于開始創(chuàng)建網(wǎng)頁(yè)已經(jīng)足夠了。單擊“下一

步”，該向?qū)У南乱粋€(gè)屏幕將出現(xiàn)，其中顯示您的設(shè)置概要。

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

dwmx2004的站點(diǎn)定義為

基本高級(jí)___________________________________________________________

站點(diǎn)定義?二^—7^j

您的站點(diǎn)包含以下設(shè)置：

本地信息：（格創(chuàng)建本地根文件夾）

站點(diǎn)名稱：dnmr2004

本地根文件喪：D:（A-老小孩\dnjx\Jwmx_2004\

運(yùn)程信息：

訪問：我將在以后完成此設(shè)置。

測(cè)試服務(wù)器；

訪問：我將在以后完成此沒置。

可以使用高級(jí)選項(xiàng)卡對(duì)您的站點(diǎn)進(jìn)行進(jìn)一步配置。

<上一步B）先成g）取消幫助

單擊“完成”完成設(shè)置。隨即出現(xiàn)“管理站點(diǎn)”對(duì)話框，顯示您的

新站點(diǎn)。單擊“完成”關(guān)閉“管理站點(diǎn)”對(duì)話框。

現(xiàn)在，已經(jīng)為您的站點(diǎn)定義好了一個(gè)本地根文件夾。接下來就可

以編輯自己的網(wǎng)頁(yè)了。

1.7創(chuàng)建頁(yè)面

本節(jié)介紹如何應(yīng)用Dreamweaver創(chuàng)建網(wǎng)頁(yè)。

新建頁(yè)面，可以使用Dreamweaver起始頁(yè)創(chuàng)建新頁(yè)，或者可以選

擇“文件”-->“新建”，彈出如下對(duì)話框：

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

書常熱模板

類別基本頁(yè)預(yù)寬:

基本頁(yè)NT\IL

動(dòng)無頁(yè)T,模板

模板頁(yè)庫(kù)項(xiàng)目

其觸cSs

CSS樣式表

JaraSeript（無預(yù)覽i

框架集XK

頁(yè)面設(shè)計(jì)（CSS）動(dòng)作腳本

英面設(shè)計(jì)

頁(yè)面設(shè)計(jì)（有輔助功能的

描述

NML文檔

□使文檔與xhTML.兼容億

幫助⑩首選參數(shù)Q）.獲取剪多內(nèi)密創(chuàng)建⑻取消（E）

從各種預(yù)先設(shè)計(jì)的頁(yè)面布局中選擇一種。比如：選擇“基本

頁(yè)"HTML,點(diǎn)擊創(chuàng)建按鈕。Dreamweaver即展開工作區(qū)界面（一個(gè)空

白頁(yè)）:

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

您可以在這個(gè)空白頁(yè)添加表格和輸入文本進(jìn)行編輯o如果您要向

頁(yè)面添加圖片或其它元素，應(yīng)先保存這個(gè)空白頁(yè)。

1.8頁(yè)面制作引例

現(xiàn)在，以下邊的簡(jiǎn)單網(wǎng)頁(yè)為例，敘述一下制作過程。簡(jiǎn)單網(wǎng)頁(yè)如

下圖：

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

關(guān)島員色片站-Tetkei6Trwee

女件倒候口）生石山敢就山工具遼在峽很熱帶的

B步改

塊址圈bLe:〃。：Bocueett/來牽各站點(diǎn)Dl/htnl/Omlsllnlu.hnd

要確景色風(fēng)院圖來貨色路

美麗景色

歡通瀏覽111

華意四缺電

在開始制作之前，我們先對(duì)這個(gè)頁(yè)面進(jìn)行一下分析。看看這個(gè)頁(yè)面

用到了那些東西。

口網(wǎng)頁(yè)頂端的標(biāo)題是“美麗景色網(wǎng)站”。

口網(wǎng)頁(yè)中間是一幅圖片。

□最下端的歡迎詞是一段文字。

口網(wǎng)頁(yè)背景是粉顏色。

知道了這個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)以后我們就來可以制作了。

首先啟動(dòng)Dreamweaver,確保你已經(jīng)用站點(diǎn)管理器建立好了一個(gè)

網(wǎng)站（根目錄）。

為了制作方便，請(qǐng)您事先打開資源管理器，把要使用的圖片收集

到網(wǎng)站目錄images文件夾內(nèi)。

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

【插入標(biāo)題文字】進(jìn)入頁(yè)面編輯設(shè)計(jì)視圖狀態(tài)。在一般情況下，編

輯器默認(rèn)左對(duì)齊，光標(biāo)在左上角閃爍，光標(biāo)位置就是插入點(diǎn)的位置。

如果要想讓文字居中插入，點(diǎn)屬性面板居中按鈕即可。啟動(dòng)中文輸入

法輸入“美麗景色”四個(gè)字。字小不要緊，我們可以對(duì)它進(jìn)行設(shè)置。

【設(shè)置文字的格式】選中文字，在上圖屬性面板中將字體格式設(shè)置成

默認(rèn)字體，大小可任意更改字號(hào)。并選中“B”將字體變粗。

【設(shè)置文字的顏色】首先選中文字，在屬性面板中，單擊顏色選擇圖

標(biāo)，在彈出的顏色選擇器中用滴管選取顏色即可。

CCCCCCC目標(biāo)江

【設(shè)置網(wǎng)頁(yè)的標(biāo)題和背景顏色】點(diǎn)擊“修改”菜單選〃頁(yè)面屈性〃。系統(tǒng)

彈出頁(yè)面屬性對(duì)話框（如下圖）

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

應(yīng)而E!

請(qǐng)?jiān)跇?biāo)題輸入框填入標(biāo)題“美麗景色網(wǎng)站”。

設(shè)置背景顏色：網(wǎng)頁(yè)背景可以是圖片，也可以是顏色。此例是

顏色。如上圖打開背景顏色選擇器進(jìn)行選取。如果背景要設(shè)為圖片，

點(diǎn)擊背景圖象“瀏覽”按鈕，系統(tǒng)彈出圖片選擇對(duì)話框，選中背景圖片

文件，點(diǎn)擊確定按鈕。

設(shè)計(jì)視圖狀態(tài)，在“美麗景色”右邊空白處單擊鼠標(biāo)，回車換一行，

按照以下的步驟插入一幅畫圖片，并使這張圖片居中。您也可以通過

屬性面板中的左對(duì)齊按鈕讓其居中。

【插入圖像】選擇以下任意一種方法：

(D使用插入菜單：在“插入”菜單選“圖像”，彈出“選擇圖像源文件”

對(duì)話框，選中該圖像文件，單擊確定。如下圖：

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

（2）使用插入欄（如下圖）：?jiǎn)螕舨迦霗趯?duì)象按鈕＞選按鈕，彈

出“選擇圖像源文件”對(duì)話框，其余操作t上。

常用v

3）使用面板組“資源”面板（如下圖）：占圖按鈕，展開根目錄

的圖片文件夾，選定該文/牛，用鼠標(biāo)拖動(dòng)至工作區(qū)合適位置。

注：

為了管理方便，我們把圖片放在“images”文件夾內(nèi)。如果圖片

少，您也可以放在站點(diǎn)根目錄下。注意文件名要用英文或用拼音文

字命名而且使用小寫，不能用中文，否則要出現(xiàn)一些麻煩。

一個(gè)圖片就插入完畢了。（插入*.swf動(dòng)畫文件，選擇“插入”

菜單》媒體》Flash）.

【輸入歡迎文字】在圖片右邊空白處單擊，回車換行。仍然按照上述

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

方法，輸入文字“歡迎瀏覽”然后，利用屬性面板對(duì)文字進(jìn)行設(shè)置。保

存頁(yè)面。

【預(yù)覽網(wǎng)頁(yè)】一個(gè)簡(jiǎn)單的頁(yè)面就這樣編輯完畢了。在頁(yè)面編輯器中按

F12預(yù)覽網(wǎng)頁(yè)效果。網(wǎng)站中的第一頁(yè)，也就是首頁(yè)，我們通常在存盤

時(shí)取名為index,htm?

【小結(jié)】在今天的教程中我們制作了一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。

內(nèi)容有四：

①圖片插入和對(duì)齊設(shè)置；

②文字的格式、顏色和加粗等設(shè)置；

③背景顏色的設(shè)置；

④預(yù)覽網(wǎng)頁(yè)，查看實(shí)際效果。

不僅要掌握還要舉一反三反復(fù)練習(xí)。

第二章CSS概述

一、xhtmlcss基礎(chǔ)知識(shí)

1）文檔類型

當(dāng)我們用dreamweaver新建一下html格式文檔時(shí)，查看源代碼,

會(huì)發(fā)現(xiàn)代碼最上部有如下這句話：

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

這句話標(biāo)明本文檔是過渡類型，另外還有框架和嚴(yán)格類型，目前

一般都采用過渡類型，因?yàn)闉g覽器對(duì)XHTML的解析比較寬松，允許

使用HTML4.01中的標(biāo)簽，但必須符合XHTML的語(yǔ)法。許多朋友在

制作頁(yè)面時(shí)，往往喜歡把這句刪除掉，在這里建議大家一定要保留這

句話，刪除它后可能引起某些樣式表失效或其它意想不到的問題。

2)語(yǔ)言編碼

接下來我們還會(huì)發(fā)現(xiàn)這樣一句話：

它標(biāo)示文檔的語(yǔ)言編碼。就像我們平時(shí)所說的漢語(yǔ)、英語(yǔ)一樣。

這里的gb2312告訴瀏覽器，本文檔采用簡(jiǎn)體中文編碼；還有一種常用

的編碼是UTF-8編碼，它是國(guó)際通用的編碼。不管我們采用哪種編碼，

有一點(diǎn)就是包含的css樣式表和其它文件也必須和本文檔的編碼一樣，

要不就會(huì)出現(xiàn)亂碼。

3)html標(biāo)簽

html標(biāo)簽在頁(yè)面中都必須結(jié)束。成對(duì)的標(biāo)簽以“/標(biāo)簽名”結(jié)束，

有些單一的標(biāo)簽在本身的結(jié)尾打上/來結(jié)束，這是xhtml代螞編寫的規(guī)

范。

成對(duì)的標(biāo)簽：

<head>{?,,}</head>

<body>(???)</body>

<div>{?,,}</div>

<span>{,,,}</span>

<p>

單一的標(biāo)簽:

<br/>

還需說明一點(diǎn)的是按xhlml規(guī)范，標(biāo)簽必須用小寫。

4)css樣式

比方說，我們要用紅色作為網(wǎng)頁(yè)的背景色：

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

用HTML的話，我們可以這樣：

用CSS的話，我們可以這樣獲得同樣的效果：

body{background-color:4FF0000;）

你會(huì)注意到，HTML和CSS的代碼頗有幾分相似。上例也向你展示了基

本的CSS模型：

但是把CSS代碼放在哪里呢?這正是我們下面要講的。

為一個(gè)HTML文檔應(yīng)用CSS

為HTML文檔應(yīng)用CSS,有三種方法可供選擇。下面對(duì)這三種方法進(jìn)行

了概括。我們建議你對(duì)第三種方法（即外部樣式表）予以關(guān)注。

方法1:行內(nèi)樣式表（style屬性）

為HTML應(yīng)用CSS的一種方法是使用HTML屬性style。我們?cè)谏侠幕?/p>

礎(chǔ)之上，通過行內(nèi)樣式表將頁(yè)面背景設(shè)為紅色：

<html><head><titlc>例子〈/title></head>

<p>這個(gè)頁(yè)面是紅色的</p></body>〈/html>

方法2:內(nèi)部樣式表（style元素）

為HTML應(yīng)用CSS的另一種方法是采用HTML元素style。比如像這樣：

<html><hcad><titlc>例子</title>

body{background-color:ttFFOOOO;}</style></head>

<body〉<p>這個(gè)頁(yè)面是紅色的〈/pX/bodyX/html）

方法3:外部樣式表（引用一個(gè)樣式表文件）

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

我們推薦采用這種引用外部樣式表的方法。在本教程之后的例子中，

我們將全部采用該方法。外部樣式表就是一個(gè)擴(kuò)展名為CSS的文本文

件。跟其他文件一樣，你可以把樣式表文件放在Web服務(wù)器上或者本

地硬盤上。例如，比方說你的樣

式表文件名為style,css,它通常被存放于名為style的目錄中。就

像下面這樣：

現(xiàn)在的問題是：如何在一個(gè)HTML文檔里引用一個(gè)外部樣式表文件

(style,css)呢？答案是：在HTML文檔里創(chuàng)建一個(gè)指向外部樣式表

文件的鏈接(link)即可，就像下面這樣：<link

/>注意要在href屬性里

給出樣式表文件的地址。這行代碼必須被插入HTML代碼

的頭部(header),即放在標(biāo)簽<head>和標(biāo)簽</head》之間。就像這樣：

〈html>〈head><title>我的文檔〈/title)<link

</head><body>...這個(gè)鏈接告訴瀏覽器：在顯示該HTML文件時(shí)，

應(yīng)使用給出的CSS文件進(jìn)行布局。

這種方法的優(yōu)越之處在于：多個(gè)HTML文檔可以同時(shí)引用一個(gè)樣式表。

換句話說，可以用一個(gè)CSS文件來控制多個(gè)HTML文檔的布局。

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

這一方法可以令你省去許多工作。例如，假設(shè)你要修改某網(wǎng)站的所有

網(wǎng)頁(yè)（比方說有100個(gè)網(wǎng)頁(yè)）的背景顏色，采用外部樣式表可以避免

你手工一一修改這100個(gè)HTML文檔的工作。采用外部樣式表，這樣的

修改只需幾秒鐘即可搞定一一修改外部樣式表文件里的代碼即可。

讓我們來實(shí)踐剛剛所學(xué)到的知識(shí)。

自己試試看打開記事本（或其他文本編輯器），創(chuàng)建兩個(gè)文件

個(gè)HTML文件，一個(gè)CSS文件——它們的內(nèi)容如下：

default,htm

<htmlXhead>〈title>我的文檔</打116>〈link

<bodyXhl>我的第一個(gè)樣式表</hl></body>〈/html>

style,css

body{background-color:#FF0000;}然后，把這兩個(gè)文件放在同

一目錄下。記得在保存文件時(shí)使用正確的擴(kuò)展名（分別為“htm”和

“css”）。用瀏覽器打開default.htm,你所看到的頁(yè)面應(yīng)該具有紅

色背景。恭喜!你已經(jīng)完成了自己的第一個(gè)樣式表！

5）css優(yōu)先級(jí)

id優(yōu)先級(jí)高于class

后面的樣式覆蓋前面的

指定的高于繼承

育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰

教學(xué)內(nèi)容批注

行內(nèi)樣式高于內(nèi)部或外部樣式

總結(jié)：?jiǎn)我坏模╥d）高于共用的（class）,有指定的用指定的，無指定則繼

承離它最近的

6）css盒模型組成

css盒模型是本節(jié)教程的重點(diǎn)。前面幾個(gè)知識(shí)點(diǎn)，如果您會(huì)用表格

布局的話，就非常好理解和掌握了。這里的盒模型是和table布局的一

個(gè)不同點(diǎn)。學(xué)習(xí)web標(biāo)準(zhǔn)，首先要弄懂的就是這個(gè)盒模型，這就是D1V

排版