教

案

本

系別____________

教?___________

學年第學期

課程概要:

課程名稱Dreamweaver網頁謾計實用教程

1、公共基礎課（）;專業基礎課（）:專業課（J）

2、必修課（J）;選修課

課程性質3、理論課（）：實踐課（）;理論課（含實踐課）（J）

4、主要先修課程：C語言

5、主要后續課程：PHPJavaScrip

教學目的

與掌握制作網頁的軟件和制作方法

基本要求

1、站點管理；2、網頁制作的基本知識；

主要

3、插入網頁元素及超鏈接；4、表格

教學內容

5、AP與框架；6、DIV+CSS7、表單

教學重點

使用DIV+CSS布局網頁

與難點

主要教材與

Dreamweaver網頁設計實用教程

參考資料

其中：理論（34）學時，實驗（30）學時，上機（）學時

課程總學時64其它（）學時，其它是指：

其中：理論（2）學時，實驗（2）學時，上機（）學時

課程周學時

4其它（）學時，其它是指：

上課周數16上課時間：從第1周至第16周

授課方式1、非多媒體教學（）；2、多媒體教學（J）,多媒體教學內容所占比例（）

課程考核1、考試（J）、考查（）;2、筆試（）、口試（）、其它方試（）

教材名稱網頁制作案例教程作者

版次與

出版社

時間

1

學年第學期教學進度表

系別：：計算機任課教師：課程：網頁設計周學時：4節

授課習題

周數課時內容（章節）

方式

2第1章初始網頁、網頁結構講授了解DW、

2周創建以自己名稱

2案例2站點創建與管理講授命名的站點

2第2章html元素講授

完成題庫中的作

3周

業1和作業2

2案例1荷花古詩頁面上機

2案例2荷花典故頁面講授

作業3,并預習

4周

CSS知識點

2制作上機題庫作業1、2頁面上機

2第3章網頁布局基礎知識講授完成題庫中的作

5周業1和作業2,

2案例1荷花網站整體布局上機選做作業3

2案例2荷花圖片欣賞網頁講授制作自己的主頁

6周面（選擇一個主

2學習視頻制作荷花主頁上機題）

2案例3荷花故事欣賞網頁講授制作自己的第

7周二頁面（和主題

2學習視頻制作三字型頁面上機頁面相關的）

2第4章表格案例1植物種類表講授制作自己的第三

8周頁面（和主題頁

2制作T字型頁面上機面相關的）

2案例2網頁實訓分組表講授制作完成題庫中

9周的第2題，選做

2學習跑馬燈制作效果上機第1題

2案例3服裝品牌網頁講授

設計一個自己

周

10的淘寶網頁

2設計服裝網頁上機

11周2第5章案例1咖啡網頁的制作講授制作完成題庫

2

中的第2題，選

2制作手機頁面上機做第1和3題

2案例2花卉藝術網的制作講授

12周使用行為特效

2上機練習上機

2第6章案例1“甜品網頁”中使用多媒體對象講授制作甜品網

13周頁，選做題庫習

2制作個人主頁上機題

2案例2制作超鏈接圖文混排網頁講授鏈接個人主頁

14周和甜n口網頁，選

2鏈接主頁上機做題庫習題

2第7章網頁表單講授制作留言板頁

15周面，選做作業1-3

2制作留言板頁面上機題

2第9章服裝銷售網站主頁講授欣賞題庫中

16周（好的案例）制

2按照步驟做主頁和服裝品牌網頁上機作綜合網站

按照步驟做網頁服裝銷售網站其他網站講授

17周2欣賞題庫中

（好的案例）綜

2鏈接網站上機合網站

2復習講授

18周考試

2復習講授

調表日期：2021年3月2日

3

課題第一章網頁的基本知識

目的要求認識網頁基礎知識，認識DWCS6

重點網頁的基本元素，DWCS6工作界面

難點應用制作簡單網頁

教學方法多媒體講授，上機實踐

教學用具多媒體

復習舊課網頁在平常的應用

導入新課認識網頁基礎知識，認識DWCS6

一、什么是網頁

網頁就是我們在聯網的計算機上,在地址欄中輸入網址，打開的一個畫面。

網頁是網站的基本構成元素。一個網站可以包含若干個網頁C

網頁的類型

在網站設計中，網頁分為靜態網頁和動態網頁兩種類型C

靜態網頁是指基本上全部使用HTML制作的網頁，網頁文本是以.htm、.HTML

等為擴展名的。如GIF格式的動畫Flash動畫、滾動字幕晃動等，這些只是視覺

上的“動態效果二

動態網頁是基本的HTML語法規范與Java、PHP、VC等高級程序設計語言、

數據庫編程等多種技術的融合，以期實現對網站內容和風格的高效、動態和交互

式的管理。

二、網頁的基本元素

1.文本

-1-

2.圖像

計算機圖像格式有很多種，但在網頁中可以使用的只有JPEG、IJPG、GIF和

PNG格式。GIF格式可以制作動畫，但最多貝支持256色；JPEG格式可以支持

真彩色，只能為靜態圖像；PNG格式既可以制作動畫又可以支持真彩色，但文件

大，下載速度慢。

3.Flash動畫

Flash的源文件格式為叫fla”，生成的用于網絡上傳輸的文件格式為“.swf”.

4.超鏈接

超鏈接實現了網頁與網頁之間的跳轉，是網頁中至關重要的元素。通過超鏈

接可以將鏈接指向圖像文件、多媒體文件，電子郵件地址或可執行程序。在一個

完整的網站中，至少要包括站內鏈接和站外鏈接。

5.表單

表單是獲取訪問者信息并與訪問者進行交互的有效方式C

6.音頻和視頻

通過音頻進行人機交流逐步成為網頁交互的重要手段。瀏覽網頁時，一些網

頁設置了背景音樂，伴隨者優美的樂曲，瀏覽者在網上沖浪會更加愜意。但是加

入音樂后，網頁文件會變大，下載時間會增加。

在網頁中加入視頻，會使網頁具有較強的吸引力。常見的網絡視頻有視頻短

片、遠程教學、視頻聊天、視頻點播和DV播放等。但是，在應用視頻時要考慮

網速問題，如果視頻播放不流暢也會影響瀏覽效果。

三、網頁制作相關軟件

在制作網頁時，常見的編輯軟件有Dreamweaver、Frontpage等，目前使用

Dreamweaver的居多。除Dreamweaver外還需要用到Photoshop和Flash等輔助

軟件，下面簡單介紹一下這兩個軟件的主要功能和特點。

1.Flash

Flash是Adobe公司推出的一款互動式失量動畫和Web動畫制作軟件。Flash

以界面簡潔、功能強大而見長，具有強大的動畫編輯功能，能把動面、音效、交

互式方式完美地融合在一起

-2-

2.Photoshop

AdobePhotoshop,在網頁制作中，使用Pholoshop可以完成效果圖制作和圖

像素材處理工作。Polashop存儲的圖像文件格式有JPEG,GIF,PNG和TIF等，

而在網頁中使用的圖像文件格式通常為JPEG,GiF和PNGo

Dreamweavercs6的工作界面如圖所示。

菜單欄.

文檔工具欄.

文檔畬”.

面板出

狀方也

閉性面板.

圖1-11Dreamweavercs6工作界面

A菜單欄:菜單欄位于工作界面的最上方，幾乎所有的操作都可以通過菜單

欄來完成。DreamweaverCS6的菜單欄包括:文件、編輯、查看、插入、修改和

格式等10個菜單項。如圖1T2所示。

DW文件(F)耦舊趴(I)修改制制0)輸。站點(S)m翻H)臥小*

圖1-12菜單欄

A文檔工具欄：文檔窗口有3種視圖顯示，分別是“代碼”、“拆分”和“設

計”。“代碼”視圖:對于有編程經驗的網頁設計用戶而言，可在“代碼”視圖

中查看、修改和編寫網頁代偈，以實現特殊的網頁效果。“設計”視圖：以所見

即所得的方式顯示所有網頁元素。“拆分”視圖:將文檔窗口分為左右兩個部分。

左側是代碼部分，顯示代碼;右側是技術部分，顯示網頁元素及其在頁面中的布

局。如圖1-13所示。

ii代碼|拆分畫看實時視圖尋u覽黑年?標題：無標顆文后二

圖1T3文檔工具欄

A文檔窗口:文檔窗口用來顯示當前創建或編輯的文檔，可以加入任何有關

-3-

的網頁組件，如文本，圖片和動畫等。默認的文檔窗口為“設計”視圖。

A狀態欄：狀態欄位于文檔窗口的底部，狀態欄左側顯示的是（標簽選擇器）

顯示當前選定標簽的層次結構，如單擊標簽〈table）可以選擇表格。狀態欄右側

顯示一些常用的工具，如“選取”、“手形”和“縮放”工具等，以方便用戶對

文檔的操作。如當前窗口大小、文檔大小和估計下載時間等C

A屬性面板：“屬性”面板是經常使用的工具之一。當選中某一對象時。可

以用“屬性”面板對其進行設置，“屬性”面板中包括兩部分，HTML部分是對

基本格式進行的設置。如圖1T4所示。CSS部分是對選中對象設置的樣式。如

圖1-15所示。

OHTML^A（F）無▼類|無"B/IBi=u?標題，

BbCSSID（I）［無駿按（D|“?O目標，

圖1-14HTML屬性面板

圖1-15CSS屬性面板

A面板組：面板組位于最右側，除了“屬性”面板外，針對不同的控制對象，

還有其他幾個面板組，如“css樣式”面板、“歷史記錄”面板、“框架”面

板、“層”面板以及“CSS樣式”面板等。所有面板按F4鍵可以打開或隱藏。

布置

創建站點在了解了網頁構成元素后，接下來通過認識360網站

首頁，完成對網頁構成元素學習的進一步加強和學習。

作業

教學

體會

教研室主任簽字：年月日

-4-

課題第?章網站站點創建和管理

目的要求認識網頁基礎知識，認識DWCS6

重點網站站點的創建，及對網站站點文件的管理

難點網站站點的創建

教學方法多媒體講授，上機實踐

教學用具多媒體

復習舊課認識網頁基礎知識，認識DWCS6

導入新課什么是站點

一、什么是站點

站點是用來管理web信息最小單位。用戶設計的網頁和相關素材一般都要求

存放在同一個文件夾內，將該文件夾定義為站點，這樣可以方便地對網站進行維

護和管理。

在DreamweaverCS6中，站點通常包含兩個部分，即本地站點和遠程站點。

一般站點文件夾內包括三個文件夾。

?webs：用來存放網站的所有網頁。

?images：用來存放網站的所有圖片。

?Common：用來存放網站的所有css樣式、js、php等公共文件

?Media：用于存放flash、avi、quicktime等多媒體文件。

二、站點文件夾和網頁文件命名規則

1.站點文件夾命名規則

(1)不要使用中文。

-5-

(2)不要使用過長的文件夾名稱。

(3)盡量使用意義明確的文件名。

2.網頁文件命名規則

(1)文件名可使用a?z、A?Z、0?9、減號(-)和下劃線(_)等字符；

(2)禁止使用特殊字符，如：@、#、$、％、&、

(3)文件名之間不能有空格。

(4)首頁文件名是網頁服務器預設的，所以文件名必須按照網頁服務港的定義

命名，通常為index,htm、index.HTML>default.htmo

(5)大部分網頁服務器都區分大小寫，最好統一使用小寫英文，尤其是關鍵網

頁文件，如default,htm0

(6)文件名長度以簡單短小為原則。建議盡量使用一些簡單易懂的縮寫，如集

團介紹(groupprofile),可以將這個網頁命名為group_pro.him。

案例實施

在制作網頁之前，最好先定義站點，然后在站點中創建網頁。

1.創建站點

(1)首先在本地磁盤創建一個新文件夾“荷花網站”作為本地站點根文件夾,

創建站點的方法有兩種；

A在“hehua”網站文件夾內部創建三個子文件夾，分別為images、commons

webs文件夾，啟動DreamweaverCS6,進入啟動界面，單擊Dreamweaver站點，

如圖1-2所示。彈出“站點設置對象”對話框。輸入“站點名稱”為“hehua”,

本地站點文件夾選擇桌面上創建的“hehua”網站。如圖1-3所示。單擊保存。

A啟動DreamweaverCS6,在菜單欄中選擇“站點”f“新建站點”選項，如

圖1-4所示。彈出“站點設置對象”對話框。輸入“站點名稱”“hehua”，本地

站點文件夾選擇桌面上創建的“hehua”網站。如圖1-3所示。單擊“保存”按

鈕。在“文件”面板中“站點”處右鍵單擊“新建文件夾”，如圖1-5所示。將

文件夾命名為images,用相同的方法創建common、webs文件夾。如圖1-5所

不。

2.新建網頁文檔

(1)選擇“文件”一“新建”菜單，或按Ctrl+N組合鍵，打開“新建文檔”

-6-

對話框。在“頁面類型”選項中選擇“HTML”，在“布局”選項中選擇“無”布

局,文檔類型“HTMLS”.如圖1-6所示。單擊“創建”按鈕。就創建了HTML5

文檔。

3.保存網頁文檔

⑴選擇“文件”一“保存”菜單，或按Ctrl+S組合鍵，如圖1-7所示。打開

“另存為”對話框。把網頁定義為主頁，命名為“index.HTML”，單擊“保存”

按鈕。

4.打開網頁文檔

(1)選擇“文件”一“打開”菜單，或按Ctrl+O組合鍵，如圖1-10所示。打

開“打開”對話框。在“查找范圍”下拉列表中選擇網頁文檔所在位置。單擊“打

開”按鈕。

5.關閉網頁文檔

⑴選擇“文件”一“退出”菜單，或按Alt+F4組合鍵。都可以退出

Dreamweavercs6。

7.hehua網站站點的導出

⑴單擊“菜單欄”一“站點”下拉列表，選擇“管理站點”

⑵單擊。“導出當前所選站點”按鈕，彈出“導出站點”對話框，如圖

1-18,選擇站點存放位置，這里存放在荷花網站文件夾內部。單擊保存。導出文

件的擴展名為“.ste”。

8.hehua網站站點的導入

⑴單擊“菜單欄”f“站點”，打開“管理站點”的對話框，彈出“管理站

點”對話框，單擊I導入站點I按鈕,彈出“導入站點”對話框，如圖1T9所示。

選擇“hehua.ste"一"打開",hehua站點就添加好了。

9.hehua網站站點的編輯

編輯站點可以改變站點的名稱和存放位置。

⑴編輯站點的方法有以下兩種：

A單擊“站點”一“管理站點”，在“管理站點”對話框中雙擊要編輯的站

點，或者單擊?按鈕，即可彈出此站點相關信息進行編輯，如圖1-20所示。

-7-

A在“文件”面板中選擇站點列表中的“管理站點”選項，也可打開“管理

站點”對話框

10.hehua網站站點的刪除。

⑴單擊“站點”一“管理站點”，在“管理站點”對話框中單擊選中要刪除

的站點名，單擊「“刪除當前選定的站點”按鈕，在彈出圖1-21所示的

"Dreamweaver"對話框中單擊“是”按鈕確認刪除，單擊“否”按鈕則取消刪

除。

刪除站點操作僅將站點信息從Dreamweaver軟件中刪除，而站點文件還保留

在硬盤原來的位置上，并沒有被刪除。

11.hehua網站站點的復制。

(1)單擊“站點”一“管理站點”，首先在“管理站點”對話框中選擇要復

制的站點，此處選擇“hehua”，單擊“復制當前選定的站點“按鈕，在站點列

表中增加新的站點“hehua復制”，表示這個站點是〃hehua"的復制，如圖1?22

所示。雙擊復制產生的站點，可以對其進行編輯操作，如改變站點名、改變站點

文件夾位置等。

布置在本地計算機的最后一個盤上創建一個站點名為“我的個人網

站”,站點根目錄為本人妙名中每個字第一個英文字母的站點.在該

作業

站點中創建一個名為“index.HTML”的網頁。

教學

體會

教研室主任簽字：年月日

-8-

課題第2章HTML元素

目的要求掌握HTML語法結構及用html制作網頁

重點HTML語法結構

難點

用html制作網頁

教學方法多媒體講授，上機實踐

教學用具多媒體

復習舊課html簡介

導入新課html基本結構

一、什么是HTML

HTML標記(HyperTextMarkupLanguage)超文本標記語言，是構成網頁文檔的

主要語言。它利用標記來描述網頁的字體、大小、顏色及頁面布局，使用任何文

本編輯器都可以對其進行編輯。

二、HTML的主要成分

HTML元素主要包括三種成分標記屬性和值。

1.元素

HTML元素指的是從開始標記(starttag)到結束標記(endtag)之間的所有

代碼。HTML以開始標記起始，以結束標記終止，在開始標記與結束標記之間是

元素的內容。

例如：＜hlalign="left”＞網頁案例教程＜/hl＞

上面所示的是一個標題，標題的開始標記為＜hl＞,結束標記為＜/hl＞,其

中“網頁案例教程”為標題的元素內容，而＜出＞標記中的align=“left”是標

題中的屬性與值。元素有兩種：

A雙標記：它們都有開始和結束兩個標記，

常用的雙標記有：

-9-

(1)段落標記＜p＞一個段落＜/p＞

(2)強調標記〈strong〉強調內容v/strong＞

(3)字體標記＜font＞文字＜/font＞

A空元素(單標記)

還有一些元素不具有元素內容，它們被稱為空元素。這些元素的開始標記和

結束標記結合為一體，在開始標記中結束，書寫時只寫一個標記，因此也稱為單

標記。

常用的單標記有：

(1)換行標記＜br/＞；

(2)鏈接標記＜link/＞；

(3)水平線標記＜hr/＞。

2.屬性和值

大多數HTML元素都擁有屬性，一個元素可以有一個或多個屬性，每個屬性

都有各自的值，不同的屬性之間需用空格隔開，但它們之間無先后次序之分。例

如：

＜ali'n=**center**＞這是—個段落標記＜/p＞“

元素,屈件.值“

其中align是段落p的一個屬性，center是align的一個值。

有的屬性可以接受任何值，有的屬性則有限制。最常見的還是那些僅接受枚

舉或預定義值的屬性，也就是說，必須從一個標準值列表中選一個值。

3.書寫規范

在編寫HTML文檔的時候，應該遵守相應的書寫規范。

(1)所有元素、屬性和值全部使用小寫字母。

(2)所有元素都要有一個相應的結束標記。

(3)所有屬性值必須用引號”括起來。

(4)所有標記都必須合理嵌套

三、HTML文檔的基本組成

<!doctype1ITML>——聲明部分，HTML使用版本，及使用的是過渡型還是

-io-

嚴格型模式。

<HTML>

<head>

|<metacharset="utf-8〃〉說明字符編碼的meta元素。

文件頭［〈title）無標題文檔</title》——頁面的標題。

</head>

<body>

正文部分文件的主體

</body>

</HTML>

四、HTML文檔的常用元素

1.段落標記p元素

<P屬性:“屬性值”〉標簽內容</p>

p元素標簽有一個常用屬性align,它用來指明字符顯示時的對齊方向，其

值一般有四種：left（左對齊）right（右對齊）center（居中對齊）justify（兩端對齊）

2.標題標記<hn>..</hn>

hl-h6元素對標題進行標記

hl的字號最大，h6的字號最小，中間逐層遞減。

3.水平線標記<hr>

4.文字標記<font><fontface=”文字的字體"size二”文字的大小”color=

“文字的顏色”〉文字</font>

5.圖片標記

在HTML中，插人圖片使用的是<img>標簽。其屬性包括圖片的路徑、寬、

高和替代文字等。格式為

<imgsrc="圖片URL"alt="替代文字”align="對齊方式”〉插人的圖片

屬性描述

src圖片URL

alt在圖片位置顯示替代的文字，可以

-11-

對圖片進行解釋

align圖像的對齊方式

圖像的寬高,默認狀態下顯示圖片

width,height

的實際尺寸

border圖像的邊框寬

6.換行標記

＜br/＞標簽插入簡單的換行符。它是一個空標簽，它沒有結束標簽。＜br/＞標

簽是用來輸入空行，而不是分隔段落。

完成案例荷花古詩頁面

1.創建本地站點html2-l,新建一個空白的HTML5網頁文件,保存為gushi.html,

把該網頁保存在html2-l站點的webs內。

2.單擊“代碼視圖”，在“代碼視圖”中輸入以下代碼：效果如圖2-3所示。

<!doctypehtml>

<html>

<head>

<metacharset="utf-8">

采蓮曲

</head>

<body>

<hlalign="center"ximgsrc="../images/hehua.jpg"width="60"height="30">

《采蓮曲》</hl>

<hrwidth="400"align="center"color="#00CC99"size="6"noshade>

<palign="center"xfontface="楷體"color="#FF9933"size="+l”>唐?王昌齡

</fontx/p>

<palign="center"><fontface="楷體"color="#FF9933"size="+l”>荷葉羅裙一色

裁，</fontx/p>

<palign="center"xfontface="楷體"color="#FF9933"sizeW'+l'》芙蓉向臉兩邊

開。</fontx/p>

-12-

<palign="center"xfontface="楷體"color="#FF9933”size="+l”>亂入池中看不

見，</font></p>

<palign="center"xfontface="楷體"color="#FF9933"size="+1">聞歌始覺有人

來。</fontx/p>

<hlalign="center">《曉出凈慈送林子方》</hl>

<hrwidth="400"align="center"color="#0066FF"size="6"noshade>

<palign:"center"><fontface二"楷體"color="#FF9933"size="+l'，宋代?楊萬里

</fontx/p>

<palign="center"xfontface="楷體"color="#FF9933"size="+l">畢竟西湖六月

中,<br>

風光不與四時同。<br>

接天蓮葉無窮碧,<b>

映日荷花別樣紅。</fontx/p>

</body>

</html>

布置

完成網頁“清平樂?村居”制作

作業

教學

體會

教研室主任簽字：年月日

-13-

課題第2章HTML的頁面構成元素標簽

目的要求掌握HTML語頁面構成元素標簽的制作

重點網頁的構成元素

難點帶導航的頁頭、顯示在主體內容區域的文章、顯示次要信息的

側欄以及頁腳

教學方法多媒體講授，上機實踐

教學用具多媒體

復習舊課Html元素

導入新課Html頁面構成

一、HTML的頁面構成元素標簽

1文章.article元素

格式為:(article〉文章部分〈/article〉

article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部

引用的內容。

2.區塊section元素

格式為：〈section〉文章的章節部分〈/section〉

section元素代表網頁或者應用程序頁面的一個一般的區塊。

3.頁眉header

格式為：〈header,頁面頭部〈/header〉

header元素是一種具有引導和導航作用的結構元素

4.nav元素

格式為：＜nav＞頁面導航部分＜/nav＞

-14-

nav元素是一個可以用作頁面導航的鏈接組，nav中的鏈接可以指向頁面中

的內容，也可指向其他頁面或資源5.頁腳footer

格式為：〈footer〉頁腳部分〈/footer〉

footer元素是頁面底部的頁腳

6.側欄aside

格式為：。$1€|0：>側邊欄部分〈/aside〉

7.有序列表

格式為：

<olstart=w起始數值“)

<li>列表項一</li>

</ol>

在此語法格式中，標記表示有序列表的開始和結束，而<lix/li>

標記表示一個列表項的開始和結束。

2.無序列表的基本語法格式如下：

<ul>

<li>列表項一</li>

</ul>

布置1、制作荷花典故頁面

作業2、制作“大學”網頁

教學

體會

教研室主任簽字：年月日

-15-

課題第3章網頁布局基礎知識

目的要求了解CSS相關知識

重點認識CSS

難點CSS用法

教學方法多媒體講授，上機實踐

教學用具多媒體

復習舊課CSS概念

導入新課html類型

一、css相關知識

1.CSS指層疊樣式表(CascadingStyleSheets),樣式定義如何顯

示HTML元素，多個樣式定義可層疊在同一個HTML元素上，通常存儲在樣式表

中。

2.CSS種類

(1)內聯樣式表

內聯樣式表是直接在標記內部定義，使用style屬性，作用范圍是標記中的

內容。格式：〈標記style/符合CSS語法結構的CSS語句〃》

例如：<pstyle="text-indent:24px;”>段落內容</p>

<p></p>標記中的內容縮進24pxo

(2)內部樣式表

內部樣式表是寫在HTML的<headX/head>標記里面的，內部樣式表作用范圍

是所在的網頁。

格式：

<styletype=//text/CSS*>

選擇器1{

-16-

選擇器2{

}

選擇器n{

)

</style>

選擇滯格式：

選擇器{

屬性1:屬性值;

屬性2:屬性值;

屬性n:屬性值;

)

選擇器聲明塊

I11

hl{

color：red;

text-align：center;

}屬性值

<HTML>

<head>

<styletype="text/CSS">

hl.mylayout{

border-width:1;

border:solid;

text-align:center;

color:red;

}

-17-

</style>

</head>

〈body〉

<hldass="mylayout">這個標題使用了style。</hl>

<hl>這個標題沒有使用styleo</hl>

</body>

</HTML>

(3)外部樣式表

外部樣式表文件，既CSS文件與網頁文件(HTML)是分離開來的。以獨立的

CSS格式的文本文件存在，在CSS文件中書寫了若干個選擇器。

外部樣式表文件的路徑有絕對路徑和相對路徑兩種。

3.創建CSS外部樣式文件

4.鏈接CSS外部樣式文件

5.CSS樣式選擇器：CSS選擇器用于選擇兀素實現樣式的模式。

作用選擇器示例示例說明

按元素的類名class選擇元素.text{屬性:屬性值;}選擇所有class="text"的元素

#wrapper{

按元素的id選擇元素選擇id="wrapper”的元素

屬性:屬性值;}

通配符*代表任何元素名稱*{屬性:屬性值;}選擇所有元素

按標記名稱選擇元素p{屬性:屬性值;}選擇所有<p>元素

a:link{屬性:屬性值;}選擇所有未訪問鏈接

按狀態選擇鏈接元素

如：

a:visited{

adink.azvisited{選擇所有訪問過的鏈接

屬性:屬性值;}

text-decoration:

none;a:active{

選擇活動鏈接

color:#FFF;屬性:屬性值;}

)

a:hover{

a:activeza:hover{選擇鼠標在鏈接上面時

text-decoration:none;屬性:屬性值;}

color:#00F;

a:focus{

}選擇具有焦點的輸入元素

屬性:屬性值;}

五、CSS盒模型

CSS在處理網頁進行頁面布局時，它認為每個元素都包含在一個盒子里，盒

?18?

子有內容區域、內邊距padding、邊框border和外邊距margin。稱為盒模型，

這類似于帶框架的油畫，其中襯邊是內邊距，框架是邊框，而該畫框與相鄰畫框

之間的距離則是外邊距

Margin

Padding

:Content

II

圖3-14盒模型

真實占有寬度=左margin+左border+左padding+width+右padding+右border+

右margin

真實占有高度=_kmargin+_tborder+_tpadding+height+下padding+下

border+Tmargin

六、＜div＞標記的屬性

1.常用屬性

屬性名屬性值說明示例

div{height:600px;}

height像素值設置元素的高度

div的高度設置為600px

div{width:980px;}

width像素值設置元素的寬度

div的寬度設置為980px

RGB值或顏色div{color:#fOO;}

color設置元素的字體顏色

名稱div的文字顏色設置為紅色

div{font-family:"微軟雅黑";}

font-family文本字體設置元素字體

div的文本字體設置為微軟雅黑

div{font-size:10px;}

font-size像素值設置文字大小

div的文字大小10px

normal（正常）

設置文字是否顯示斜div{font-style:italic;}

font-styleitalic（斜體）

體div的文字斜體

oblique（斜體）

normal（正常）

bold（粗體）div{font-weight:bolder;}

font-weight設置文字是否加粗

bolder（更粗）div的文字更粗

lighter便細）

-19-

px、em為單位

P{text-indent:2em;}

text-indent的長度值或百設置文字的縮進

段落縮進2字符位

分比

left（左邊）

right（右邊）P{text-alignxenter;}

text-align設置文字對齊方式

center（中間）段落居中對齊。

justify（兩端）

2.div的浮動屬性float。設置div在頁面上的流向。

屬性名屬性值說明示例

left靠左顯示div{float:left;}

floatright靠右顯示div{float:right;}

none無浮動div{float:none;}

3.設置div的背景樣式屬性。

屬性名屬性值說明示例

background或RGB值或顏色名

設置div的背景顏色div{backgr