教師學科教案

[20-20學年度第__學期]

任教學科：_____________

任教年級：_____________

任教老師：_____________

XX市實驗學校

教學內容批注

第1章Dreamweaver介紹

1.1Dreamweaver新增功能簡介

Drcamweaver是Macromedia公司推出的主頁編輯工具。它是一個

所見即所得網頁編輯器，支持最新的DHTML和CSS標準。采用了多

種先進技術，能夠快速高效地創建極具表現力和動感效果的網頁，使

網頁創作過程變得非常簡單。值得稱道的是，Dreamweaver不僅提供

了強大的網頁編輯功能，而且提供了完善的站點管理機制，可以說，

它是一個集網頁創作和站點管理兩大利器于一身的創作工具。

在學習使用Dreamweaver之前，我們先了解Dreamweaver的一些

新增功能。

1.獨特的往返HTML功能

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

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

標記或第三方標記。這就使得Dreamweaver自動生成的代碼與手工輸

入的代碼融為一體。

2.整合文本編輯器

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

就如設計視圖環境一樣方便，可以自動縮排、標點平衡、選擇多行后

一次縮進。可以在使用代碼視圖工具欄(CodeViewToolbar)的下拉

列表定義的JavaScript函數之間輕松導航。對于使用JavaScript編程的

專業人員來說，這種代碼導航無疑是一種高效的導航幫助。輸入代碼

時Dreamweaver自動對HTML和JavaScript代碼使用不同的顏色顯示。

3.把主窗口分割為代碼視圖和設計試圖

可以把Dreamweaver的主窗口分割為代碼視圖和設計試圖。能夠

查看整頁代碼而無需離開文檔窗口。這樣，就可以在同一個窗口同時

查看代碼視圖和設計視圖，同時編輯多個文檔的代碼。

4.JavaScript調試器

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

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

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

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

可以設置斷點調試代碼，然后在逐步執行代碼的過程中觀察變量的變

化，及時發現編程錯誤。

5.編輯非HTML文檔

可以把Dreamweaver當作文本編輯器編輯非HTML文檔，直接在

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

1.2Dreanweaver的工作環境

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

集成工作區中，全部窗口和面板集成在一個應用程序窗口中。您可以

選擇面向設計人員的布局或面向手工編碼人員需求的布局。啟動

Dreamweaver時，會出現一個工作區設置對話框(如下圖)：

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

請選擇您喜歡的工作區布局。以后您可以在“首選參數”中切換布局

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

『確

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

擇“設計者”。如果您以后想更改工作區，可以使用編輯菜單“首選參數”

對話框切換到一種不同的工作區。編輯“首選參數”對話框如下圖：

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

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

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

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

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

插入對象。

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

“文檔”窗口顯示您當前創建和編輯的文檔。

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

各種屬性。

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

*律收除體.林中立s發耐/*nceerar民標4D

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

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

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

“面板組”（如下圖）是分組在某個標題下面的相關面板的集合。

若要展開一個面板組，請不擊組名稱左側的展開的頭：若要取消停匏

一個面板組，請拖動該組標題條左邊緣的手柄。

＞CSs樣式

?"代碼

＞標簽檢查器

＞框集

＞應用程序

＞資源

＞歷史記錄

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

彳門是Dreamweaver站點的一部分還是在遠程服務器上。“文件”面板還

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

貨游文件?

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

3^C8

>?*dmxRMm\A-'ES

曰0

Bigges

畫OOOS.振

別彳

00b1.

交00b2.0f

01.gif

莖02gjf

wG3gjf

gif

當05cif

06.gif

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

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

若要打開其它面板，請使用“窗口”菜單。

1.3常用工具欄

“插入”欄

“插入”欄包含用于創建和插入對象（如表格、層和圖像）的按鈕。

當鼠標指針滾動到一個按鈕上時，會出現一個工具提示，其中含有該

按鈕的名稱。

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

某些類別具有帶彈出菜單的按鈕。從彈出菜單中選擇一個選項時，

該選項將成為該按鈕的默認操作。例如，如果從“圖像”按鈕的彈出菜

單中選擇“圖像占位符”，下次單擊“圖像”按鈕時，Dreamweaver會插

入一個圖像占位符。每當從彈出菜單中選擇一個新選項時，該按鈕的

默認操作都會改變。

“插入”欄有以下幾個類別：

“常用”：使您可以創建和插入最常用的對象，例如圖像和表格。

“布局”：使您可以插入表格、div標簽、層和框架。您還可以從三個表

格視圖中進行選擇：“標準”（默認）、“擴展表格”和“布

局”。當選擇“布局”模式后，您可以使用Dreamweaver布局

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

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

“文本”：使您可以插入各種文本格式設置標簽和列表格式設置標簽。

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

HTML標簽。

“應用程序”：使您可以插入動態元素，例如記錄集、重復區域以及記

錄插入和更新表單。

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

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

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

位置。

文檔工具欄

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

快速切換：“代碼”視圖、“設計”視圖、同時顯示“代碼”和“設計”視圖的

拆分視圖。

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

有關的常用命令和選項。

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

顯示代碼視圖顯示竦計視園設有瀏覽器/施查錯誤文件管理刷新

_j代成3拆分!」設計標題：|Drea2004入門、今狼?UC跳

“示我碼視圖和曲十視圖文檔標題；在測筑器預筑式視因選項

以下對圖中的指引進行說明：

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

設計視圖：僅在“文檔”窗口中顯示“設計”視圖。

拆分視圖：在“文檔”窗口同時顯示“代碼”視圖和“設計”視圖。

標題：可以直接在此處為文檔設定標題，它將顯示在瀏覽器

的標題欄中。

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

在瀏覽器中預覽/調試：在瀏覽器中預覽或調試文檔。從彈出菜

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

刷新：當您在“代碼”視圖中進行更改后刷新文檔的“設計”

視圖。

視圖選項：允許您為“代碼”視圖和“設計”視圖設置選項。

狀態欄

狀態欄提供與您正創建的文檔有關的其它信息。

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

艾檔大小花計下載時間

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

標簽優揮涔自回太小彈出來單

標簽選擇器顯示環繞當前選定內容的標簽的層次結構°單擊該層

次結構中的任何標簽以選擇該標簽及其全部內容。比如：單擊〈body)

可以選擇文檔的整個正文.

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

的大小調整到預定義或自定義的尺寸

“窗口大小”彈出菜單的右側是頁而的文檔大小和估計下載時間。

1.4標尺和網格

在網頁排版的過程中，如果希望對元素精確定位，則標尺和網格是

非常有用的工具。

1.顯示標尺

在文檔窗口中，默認狀態下不顯示標尺，如果需要顯示標尺，以便

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

中“標尺”。如圖：

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

2.顯示網格

在文檔窗口中，默認狀態下不顯示網格，如果需要顯示網格，以便

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

選中“標尺”，則在文檔窗口中顯示網格。顯示網格之后的文檔窗口如

圖所示:

(■?8X

5范保出的重有的入2的文和口企今東對點）形出

走第團市地表單文本應期序無承收深

常遠八

蕭'?'WJ7

??、

?—3

料

3斤設回

，82v

MA-<，

」"，：

:*￥>

?答，…

“000811u

JGH.u

itft，■】

，M

.jMnX

.I.ks1

I：

存包海推策）

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

1-5快捷鍵

在運用Dreamweaver的過程中，熟練的使用快捷鍵，能達到事半

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

方式整理出來，希望對學員熟練掌握Dreamweaver有所幫助。

文件菜單

新建文檔Ctrl+N

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

動到［文檔］窗口中

在框架中打開Ctrl+Shift+0

關閉Ctrl+W

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

保存Ctrl+S

另存為Ctrl+Shift+S

檢查鏈接Shift+F8

退出Ctrl+Q

編輯菜單

撤消Ctrl+Z

重復Ctrl+Y或Ctrl+Shift+Z

剪切Ctrl+X或Shift+Del

拷貝Ctrl+C或Ctrl+Ins

粘貼Clrl+V或Shift+Ins

清除Delete

全選Ctrl+A

選擇父標簽Ctrl+Shift+<

選擇子標簽Ctrl+Shift+>

查找和替換Ctrl+F

查找下一個F3

縮進代碼Ctrl+Shift+

左縮進代碼Ctrl+Shift+[

平衡大括弧CtrlV

啟動外部編輯器Ctrl+E

參數選擇Ctrl+U

頁面視圖

標準視圖Ctrl+Shift+F6

布局視圖Ctrl+F6

工具條Ctrl+Shift+T

查看頁面元素

可視化助理Ctrl+Shift+I

標尺Ctrl+Alt+R

顯示網格Ctrl+Alt+G

靠齊到網格Ctrl+Alt+Shift+G

頭內容Ctrl+Shift+W

頁面屬性Ctrl+Shift+J

代碼編輯

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

切換到設計視圖Ctrl+Tab

打開快速標簽編輯器ctrl+T

選擇父標簽Ctrl+Shift+<

平衡大括弧Ctrl+,

全選Ctrl+A

拷貝Ctrl+C

查找和替換ctrl+F

查找下一個F3

替換Ctrl+H

粘貼Ctrl+V

剪切Ctrl+X

重復Ctrl+Y

撤消Ctrl+Z

向上選擇一勺Shift+Ur

向下選擇一行Shift?Down

選擇左邊字符Shift+Left

選擇右邊字符Shift+Right

向上翻頁PageUp

向卜翻頁PageDown

向上選擇一頁Shift+PageUp

向下選擇一頁Shift+PageDown

選擇左邊單詞Ctrl+Shift+Left

選擇右邊單詞Ctrl+Shift+Right

移到行首Home

移到行尾End

移動到代碼頂部Ctrl+Home

移動到代碼尾部Ctrl+End

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

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

編輯文本

創建新段落Enter

插入換行Shift+Enter

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

拷貝文本或對象到頁面其他位置Ctrl+拖動選取項目到新位

置

選取一個單詞雙擊

在設計視圖和代碼編輯器之間切換Ctrl+Tab

打開和關閉［屬性］檢查器Ctrl+Shift+J

檢查拼寫Shift+F7

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

格式化文本

縮進Ctrl+]

左縮進Ctrl+[

段落格式Ctrl+Shift+P

應用標題1到6到段落Ctrl+1到6

加粗選定文本Ctrl+B

傾斜選定文本Ctrl+I

編輯樣式表Ctrl+Shift+E

處理表格

選擇表格（光標在表格中）Ctrl+A

移動到下一單元格Tab

移動到上一單元格Shift+Tab

插入行（在當前行之前）Ctrl+M

在表格未插入一行在最后一個單元格Tab

刪除當前行Ctrl+Shift+M

插入列Ctrl+Shift+A

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

合并單元格Ctrl+Alt+M

拆分單元格Ctrl+Alt+S

處理框架

選擇框架框架中Alt+點擊

選擇下一框架或框架頁Alt+右方向鍵

選擇上一框架或框架頁A11+左方向鍵

選擇父框架Alt+上方向鍵

選擇子框架或框架頁Alt+下方向鍵

管理超鏈接

創建超鏈接（選定文本）Ctrl+L

刪除超鏈接Ctrl+Shift+L

在瀏覽器中定位和預覽

在主瀏覽器中預覽F12

在次要瀏覽器中預覽Ctrl+F

插入對象

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

圖象Ctil+Alt+I

表格Ctrl+Alt+T

Flash影片Ctrl+Alt+F

打開和關閉面板

屬性Ctrl+F3

站點文件F5

資源Fil

CSS樣式Shift+Fll

HTML樣式Ctrl+Fll

行為Shift+F3

歷史紀錄Shift+FlO

框架Shift+F2

層F2

參考Ctrl+Shift+Fl

最小化所有窗口Shift+F4

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

1.6建立站點

Wob站點是一組具有如相關主題、類似的設計、鏈接文檔和資源。

Dreamweaver是一個站點創建和管理工具，因此使用它不僅可以創建

單獨的文檔，還可以創建完整的Web站點。創建Web站點的第一步

是規劃。為了達到最佳效果，在創建任何Web站點頁面之前，應對

站點的結構進行設計和規劃。決定要創建多少頁，每頁上顯示什么內

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

請執行以下操作：

從“站點”菜單選擇“管理站點”，出現“管理站點”對話框。

在“管理站點”對話框中，單擊“新建”，然后從彈出式菜單中選擇“站

點”。出現“站點定義”對話框。

如果對話框顯示的是“高級”選項卡，則單擊“基本”。出現“站點定

義向導”的第一個界面，要求您為站點輸入一個名稱。

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

在文本框中，輸入一個名稱以在Dreamweaver中標識該站點。

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

單擊“下一步”。出現向導的下一個界面，詢問您是否要使用服務器

技術。

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

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

◎否，我不想使用那各黯技術..們

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

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

選擇“否”選項，指示目前該站點是一個靜態站點，沒有動態頁。

單擊“下一步”。出現向導的下一個界面，詢問您要如何使用您的

文件。

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

選擇標有“編輯我的計算機上的本地副本，完成后再上傳到服務器

（推薦）”的選項。在站點開發過程中有多種處理文件的方式，初學

網頁制作的朋友請選擇此選項。

單擊該文本框旁邊的文件夾圖標。隨即會出現“選擇站點的本地根

文件夾”對話框。

單擊''下一步"，出現向導的下一個界面，詢問您如何連接到遠程

服務器。從彈出式菜單中選擇“無".您可以稍后設置有關遠程站點的

信息。目前，本地站點信息對于開始創建網頁已經足夠了。單擊“下一

步”，該向導的下一個屏幕將出現，其中顯示您的設置概要。

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

dwmx2004的站點定義為

基本高級___________________________________________________________

站點定義?二^—7^j

您的站點包含以下設置：

本地信息：（格創建本地根文件夾）

站點名稱：dnmr2004

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

運程信息：

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

測試服務器；

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

可以使用高級選項卡對您的站點進行進一步配置。

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

單擊“完成”完成設置。隨即出現“管理站點”對話框，顯示您的

新站點。單擊“完成”關閉“管理站點”對話框。

現在，已經為您的站點定義好了一個本地根文件夾。接下來就可

以編輯自己的網頁了。

1.7創建頁面

本節介紹如何應用Dreamweaver創建網頁。

新建頁面，可以使用Dreamweaver起始頁創建新頁，或者可以選

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

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

書常熱模板

類別基本頁預寬:

基本頁NT\IL

動無頁T,模板

模板頁庫項目

其觸cSs

CSS樣式表

JaraSeript（無預覽i

框架集XK

頁面設計（CSS）動作腳本

英面設計

頁面設計（有輔助功能的

描述

NML文檔

□使文檔與xhTML.兼容億

幫助⑩首選參數Q）.獲取剪多內密創建⑻取消（E）

從各種預先設計的頁面布局中選擇一種。比如：選擇“基本

頁"HTML,點擊創建按鈕。Dreamweaver即展開工作區界面（一個空

白頁）:

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

您可以在這個空白頁添加表格和輸入文本進行編輯o如果您要向

頁面添加圖片或其它元素，應先保存這個空白頁。

1.8頁面制作引例

現在，以下邊的簡單網頁為例，敘述一下制作過程。簡單網頁如

下圖：

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

關島員色片站-Tetkei6Trwee

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

B步改

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

要確景色風院圖來貨色路

美麗景色

歡通瀏覽111

華意四缺電

在開始制作之前，我們先對這個頁面進行一下分析。看看這個頁面

用到了那些東西。

口網頁頂端的標題是“美麗景色網站”。

口網頁中間是一幅圖片。

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

口網頁背景是粉顏色。

知道了這個網頁的結構以后我們就來可以制作了。

首先啟動Dreamweaver,確保你已經用站點管理器建立好了一個

網站（根目錄）。

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

到網站目錄images文件夾內。

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

【插入標題文字】進入頁面編輯設計視圖狀態。在一般情況下，編

輯器默認左對齊，光標在左上角閃爍，光標位置就是插入點的位置。

如果要想讓文字居中插入，點屬性面板居中按鈕即可。啟動中文輸入

法輸入“美麗景色”四個字。字小不要緊，我們可以對它進行設置。

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

默認字體，大小可任意更改字號。并選中“B”將字體變粗。

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

標，在彈出的顏色選擇器中用滴管選取顏色即可。

CCCCCCC目標江

【設置網頁的標題和背景顏色】點擊“修改”菜單選〃頁面屈性〃。系統

彈出頁面屬性對話框（如下圖）

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

應而E!

請在標題輸入框填入標題“美麗景色網站”。

設置背景顏色：網頁背景可以是圖片，也可以是顏色。此例是

顏色。如上圖打開背景顏色選擇器進行選取。如果背景要設為圖片，

點擊背景圖象“瀏覽”按鈕，系統彈出圖片選擇對話框，選中背景圖片

文件，點擊確定按鈕。

設計視圖狀態，在“美麗景色”右邊空白處單擊鼠標，回車換一行，

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

屬性面板中的左對齊按鈕讓其居中。

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

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

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

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

（2）使用插入欄（如下圖）：單擊插入欄對象按鈕＞選按鈕，彈

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

常用v

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

的圖片文件夾，選定該文/牛，用鼠標拖動至工作區合適位置。

注：

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

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

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

一個圖片就插入完畢了。（插入*.swf動畫文件，選擇“插入”

菜單》媒體》Flash）.

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

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

方法，輸入文字“歡迎瀏覽”然后，利用屬性面板對文字進行設置。保

存頁面。

【預覽網頁】一個簡單的頁面就這樣編輯完畢了。在頁面編輯器中按

F12預覽網頁效果。網站中的第一頁，也就是首頁，我們通常在存盤

時取名為index,htm?

【小結】在今天的教程中我們制作了一個簡單的網頁。

內容有四：

①圖片插入和對齊設置；

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

③背景顏色的設置；

④預覽網頁，查看實際效果。

不僅要掌握還要舉一反三反復練習。

第二章CSS概述

一、xhtmlcss基礎知識

1）文檔類型

當我們用dreamweaver新建一下html格式文檔時，查看源代碼,

會發現代碼最上部有如下這句話：

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

這句話標明本文檔是過渡類型，另外還有框架和嚴格類型，目前

一般都采用過渡類型，因為瀏覽器對XHTML的解析比較寬松，允許

使用HTML4.01中的標簽，但必須符合XHTML的語法。許多朋友在

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

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

2)語言編碼

接下來我們還會發現這樣一句話：

它標示文檔的語言編碼。就像我們平時所說的漢語、英語一樣。

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

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

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

要不就會出現亂碼。

3)html標簽

html標簽在頁面中都必須結束。成對的標簽以“/標簽名”結束，

有些單一的標簽在本身的結尾打上/來結束，這是xhtml代螞編寫的規

范。

成對的標簽：

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

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

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

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

<p>

單一的標簽:

<br/>

還需說明一點的是按xhlml規范，標簽必須用小寫。

4)css樣式

比方說，我們要用紅色作為網頁的背景色：

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

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

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

body{background-color:4FF0000;）

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

本的CSS模型：

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

為一個HTML文檔應用CSS

為HTML文檔應用CSS,有三種方法可供選擇。下面對這三種方法進行

了概括。我們建議你對第三種方法（即外部樣式表）予以關注。

方法1:行內樣式表（style屬性）

為HTML應用CSS的一種方法是使用HTML屬性style。我們在上例的基

礎之上，通過行內樣式表將頁面背景設為紅色：

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

<p>這個頁面是紅色的</p></body>〈/html>

方法2:內部樣式表（style元素）

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

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

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

<body〉<p>這個頁面是紅色的〈/pX/bodyX/html）

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

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

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

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

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

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

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

像下面這樣：

現在的問題是：如何在一個HTML文檔里引用一個外部樣式表文件

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

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

/>注意要在href屬性里

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

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

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

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

應使用給出的CSS文件進行布局。

這種方法的優越之處在于：多個HTML文檔可以同時引用一個樣式表。

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

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

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

網頁（比方說有100個網頁）的背景顏色，采用外部樣式表可以避免

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

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

讓我們來實踐剛剛所學到的知識。

自己試試看打開記事本（或其他文本編輯器），創建兩個文件

個HTML文件，一個CSS文件——它們的內容如下：

default,htm

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

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

style,css

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

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

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

色背景。恭喜!你已經完成了自己的第一個樣式表！

5）css優先級

id優先級高于class

后面的樣式覆蓋前面的

指定的高于繼承

育人猶如春風化雨，授業不惜蠟炬成灰

教學內容批注

行內樣式高于內部或外部樣式

總結：單一的（id）高于共用的（class）,有指定的用指定的，無指定則繼

承離它最近的

6）css盒模型組成

css盒模型是本節教程的重點。前面幾個知識點，如果您會用表格

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

個不同點。學習web標準，首先要弄懂的就是這個盒模型，這就是D1V

排版