第8章 CSS和模板.ppt

1、網(wǎng)頁(yè)制作案例教程,第1章：網(wǎng)站與網(wǎng)頁(yè)概述 第2章：HTML入門(mén) 第3章：網(wǎng)頁(yè)基本編輯 第4章：表格 第5章：框架 第6章：AP Div 第7章：表單,第8章：CSS和模板 第9章：網(wǎng)頁(yè)圖形處理工具Fireworks CS5 第10章：圖像處理工具Photoshop CS5 第11章：動(dòng)畫(huà)制作工具Flash CS5 第12章：網(wǎng)站制作綜合應(yīng)用,學(xué)習(xí)目標(biāo)：,第8章 CSS和模板,了解CSS和模板的基本概念。 掌握創(chuàng)建和應(yīng)用。 掌握模板的創(chuàng)建和應(yīng)用。,8.1 了解CSS,了解什么是CSS樣式，它與HTML的區(qū)別。 了解CSS樣式的優(yōu)勢(shì) 。 了解CSS樣式的基本語(yǔ)法。 了解CSS樣式的運(yùn)用方式。,8.

2、1.1 什么是CSS,CSS是“Cascading Styles Sheets”的縮寫(xiě)，中文 名稱是層疊樣式表。用于控制網(wǎng)頁(yè)樣式并允許將樣式與 網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。 P137,CSS可將網(wǎng)頁(yè)的內(nèi)容與表現(xiàn)形式分開(kāi)，要改變網(wǎng)頁(yè)的外觀時(shí)，只需更改CSS樣式。,8.1.1 什么是CSS,以下是用傳統(tǒng)的HTML方法來(lái)設(shè)置網(wǎng)頁(yè)中的格式的代碼：, 傳統(tǒng)HTML設(shè)置格式 開(kāi)始學(xué)習(xí)CSS 這是我的第一個(gè)網(wǎng)頁(yè),點(diǎn)擊 這里 開(kāi)始學(xué)習(xí)CSS ,8.1.1 什么是CSS,以下是用CSS方式設(shè)置網(wǎng)頁(yè)中的格式的代碼：, CSS設(shè)置格式 開(kāi)始學(xué)習(xí)CSS 這是我的第一個(gè)網(wǎng)頁(yè),點(diǎn)擊 這里 開(kāi)始學(xué)習(xí)CSS ,/*段落樣式

3、*/ p color: purple; font-size: 12px; /*標(biāo)題樣式*/ h1 color: olive; text-decoration: underline; /*鏈接樣式*/ a:link color:#006486; a:visited color:#464646; a:hover color: #ffffff; background: #3080CB; a:active color:white; background: #3080CB ; ,文件名：sample.html,文件名：sample.css,8.1.1 什么是CSS,上面代碼中，使用了CSS的方式同樣設(shè)置

4、了鏈接的顏色，1號(hào)標(biāo)題的顏色和下劃線以及段落的文字顏色和大小。 在上面CSS的代碼中，將網(wǎng)頁(yè)分成了兩個(gè)文件sample.html和sample.css，其中sample.html是網(wǎng)頁(yè)文件，sample.css是網(wǎng)頁(yè)格式的文件，專(zhuān)門(mén)定義css。,8.1.2 CSS的優(yōu)勢(shì),一、CSS符合Web標(biāo)準(zhǔn) 二、提高頁(yè)面瀏覽速度 三、縮短網(wǎng)頁(yè)改版時(shí)間 四、強(qiáng)大的字體控制和排版能力 五、CSS非常容易編寫(xiě)Dreamweaver也提供了相應(yīng)的 輔助工具 六、CSS有很好的兼容性，只要是可以識(shí)別CSS樣式的 瀏覽器都可以應(yīng)用它。 七、表現(xiàn)和內(nèi)容相分離。,8.1.3 CSS的基本語(yǔ)法,一、CSS的樣式規(guī)則由兩部分

5、組成：選擇器和聲明。 選擇器就是樣式的名稱 聲明就是樣式的具體定義，格式為： （1）.選擇器 選擇器總共有三種類(lèi)型： 標(biāo)簽選擇器、class選擇器、高級(jí)選擇器 標(biāo)簽選擇器，即重新定義HTML標(biāo)簽的格式, 定以后所有該標(biāo)簽的樣式都會(huì)立即自動(dòng)更新。 class選擇器和高級(jí)選擇器可由用戶命名。 高級(jí)選擇器包括id選擇器和其他復(fù)雜的選擇器。,選擇器 聲明 ,8.1.3 CSS的基本語(yǔ)法,（2）聲明 css的聲明由屬性和屬性值構(gòu)成，屬性和屬性值之間用冒號(hào)隔開(kāi)，每一行聲明的末尾加上一個(gè)分號(hào)，最后一行的分號(hào)可以省略。 如：color: red;,8.1.4 CSS的應(yīng)用方式,CSS的應(yīng)用方式有以下兩種： 1

6、. 內(nèi)部CSS樣式表 2. 外部CSS樣式表,內(nèi)部CSS樣式表：只存在于當(dāng)前文檔中，并只針對(duì)當(dāng)前頁(yè)進(jìn)行樣式應(yīng)用的方法。一般存在于文檔head部分的style標(biāo)簽內(nèi) 。, ,8.1.4 CSS的應(yīng)用方式,外部CSS樣式表：以擴(kuò)展名為.css的文件而存在，文件中內(nèi)容即是所有樣式的選擇和聲明。 該文件可做為共享文件，讓多個(gè)文檔共同引用并應(yīng)用，達(dá)到站點(diǎn)文件樣式的一致性。同時(shí)，如果修改該樣式表文件，所有引用的文檔都將改變其樣式，達(dá)到網(wǎng)站迅速改版的目的。 網(wǎng)頁(yè)文檔引用css文件有兩種方式：連接式和導(dǎo)入式。 P 139,8.1.4 CSS的應(yīng)用方式,鏈接式樣式表是最常用的css方法，在與標(biāo)簽之間加入標(biāo)簽鏈接

7、到所需的css文件。 例如： 其中href對(duì)應(yīng)的屬性值就是css文件的文件名。,8.1.4 CSS的應(yīng)用方式,導(dǎo)入式通常在標(biāo)簽中使用import 將外部css文件導(dǎo)入。 例如： 導(dǎo)入式雖然也是將css文件分開(kāi)，但其原理卻是內(nèi)部css的方式 。,導(dǎo)入式在網(wǎng)頁(yè)文件初始化時(shí)就將文件的全部css樣式裝載到網(wǎng)頁(yè)中，而連接式則是在網(wǎng)頁(yè)需要格式時(shí)才以鏈接的方式引入。,8.2 使用CSS面板,利用“CSS”面板，可以輕松創(chuàng)建和管理CSS規(guī)則。P140 單擊 “窗口”|“CSS樣式”命令菜單:,8.2.1 “所有”模式與“當(dāng)前”模式,3. “只顯示設(shè)置屬性”,一、CSS面板“所有”模式: 1.“類(lèi)別視圖” (默

8、認(rèn)) 2. “顯示列表視圖”,二、在“當(dāng)前”模式中，“CSS”面板顯示當(dāng)前所選內(nèi)容的屬性的摘要 。,8.2.1 “所有”模式與“當(dāng)前”模式,8.2.2 基本操作,一、重命名類(lèi) 二、移動(dòng)CSS規(guī)則 三、刪除CSS規(guī)則,在要進(jìn)行設(shè)置的類(lèi)上單擊右鍵，可實(shí)現(xiàn)以下操作：,8.3 在Dreamweaver中創(chuàng)建與應(yīng)用CSS,8.3.1 新建CSS文件,新建CSS文件的方法與新建HTML文件的方法類(lèi)同。,“文件”/“新建” ：,8.3.2 新建CSS規(guī)則,一、新建自定義的類(lèi) 二、新建HTML標(biāo)簽 三、新建CSS選擇器（高級(jí)樣式）,8.3.3 應(yīng)用CSS,一、應(yīng)用外部CSS樣式表 需要先將css文件引入： “

9、格式”/“CSS樣式”/“附加樣式表”： 選中網(wǎng)頁(yè)文檔中要應(yīng)用CSS樣式的內(nèi)容，單擊“格式”| “CSS樣式”命令菜單，在右拉菜單選擇一個(gè)選擇器名稱。 二、應(yīng)用內(nèi)部CSS樣式表 無(wú)需導(dǎo)入或鏈接，直接應(yīng)用。,8.4 CSS屬性,在“CSS規(guī)則定義”對(duì)話框的“分類(lèi)”列表框中，共有類(lèi)型、背景、區(qū)塊、方框、邊框、列表、定位、擴(kuò)展等八大類(lèi)。,8.4.1 類(lèi)型屬性,類(lèi)型屬性主要用來(lái)定義文字的字體、大小、樣式、顏色等屬性。,8.4.2 背景屬性,背景屬性主要用來(lái)定義頁(yè)面的背景顏色或背景圖像。,背景顏色,背景圖片,8.4.3 區(qū)塊屬性,區(qū)塊屬性主要用來(lái)定義間距和對(duì)齊方式。,8.4.4 方框?qū)傩?方框?qū)傩灾饕?/p>

10、來(lái)定義元素在頁(yè)面上的位置?？梢钥刂莆谋緟^(qū)域的大小、位置、與邊界的距離等。,方框設(shè)置對(duì)話框,8.4.4 方框?qū)傩?理解并區(qū)別width、height、padding和margin,8.4.5 邊框?qū)傩?邊框?qū)傩杂脕?lái)定義元素周?chē)倪吙?，例如邊框的寬度、顏色和樣式等?邊框設(shè)置對(duì)話框,8.4.6 列表屬性,列表屬性主要用來(lái)定義列表各種屬性，如列表項(xiàng)目符號(hào)、位置等。,列表屬性對(duì)話框,8.4.7 定位屬性,定位屬性主要用來(lái)定義層的大小、位置、可見(jiàn)性、溢出方式、剪輯等屬性。 先將定位屬性中的“position”屬性設(shè)置為“absolute”，“屬性檢查器”中就會(huì)列出了相應(yīng)的屬性。 層寬300像素，高200

11、像素， 位置距離頁(yè)面上邊界100像素， 距離頁(yè)面左邊界50像素 ：,8.5 設(shè)計(jì)時(shí)間樣式表,設(shè)計(jì)時(shí)間樣式表可以在設(shè)計(jì)網(wǎng)頁(yè)時(shí)將已有的CSS樣式表隱藏，顯示并應(yīng)用其它樣式表。利用設(shè)計(jì)時(shí)間樣式表這一功能，可以在文檔中查看同一網(wǎng)頁(yè)內(nèi)容應(yīng)用不同外部樣式表的效果。,“格式”|“CSS樣式”|“設(shè)計(jì)時(shí)間”： 設(shè)計(jì)時(shí)顯示 CSS 樣式表 設(shè)計(jì)時(shí)藏某些 CSS 樣式表,8.6 模板概述,8.6.1 什么是模板,模板的功能就是把網(wǎng)頁(yè)布局和內(nèi)容分離，在布局設(shè)計(jì)好之后將其存儲(chǔ)為模板，這樣相同布局的頁(yè)面可以通過(guò)模板創(chuàng)建，能夠極大的提高工作效率。它是一種特殊類(lèi)型的文檔，文件擴(kuò)展名為“.dwt”。 P148,8.6.1 什

12、么是模板,8.6.2 模板的優(yōu)點(diǎn),一、制作方便，利用模板可以制作具有相同外觀結(jié)構(gòu)的 網(wǎng)頁(yè)，提高了制作效率。 二、更改方便，更改模板就使得整個(gè)網(wǎng)站采用相同模板 的頁(yè)面都得到更新。 三、模板與基于該模板的網(wǎng)頁(yè)文件之間保持連接狀態(tài)， 對(duì)于相同的內(nèi)容可保證完全的一致。,8.7 創(chuàng)建模板,制作模板和制作一個(gè)普通的頁(yè)面完全相同，只是不需把頁(yè)面的所有部分都制作完成，僅僅需要制作出導(dǎo)航條、標(biāo)題欄等各個(gè)頁(yè)面的公共部分，中間區(qū)域用各個(gè)頁(yè)面的具體內(nèi)容來(lái)填充。 可直接創(chuàng)建空白的模板，也可以將已有文檔轉(zhuǎn)換為模板 模板中至少還要?jiǎng)?chuàng)建一個(gè)可編輯區(qū)域，否則基于該模板的頁(yè)面是不可編輯的 為了便于管理，將模板存放在站點(diǎn)根目錄下的

13、“Templates”文件夾中,8.7.1 直接創(chuàng)建模板,一、通過(guò)“資源”面板直接創(chuàng)建模板 二、利用“資源”面板可以查看已有模板、新建模板、修改模板和刪除模板,8.7.2 將已有文檔轉(zhuǎn)換為模板,“文件“/”另存為模板“:,另存為模板,8.7.3 創(chuàng)建可編輯區(qū)域,設(shè)計(jì)者可以決定模板中的哪些部分是可編輯的，而哪些是不可編輯的，這就要通過(guò)創(chuàng)建可編輯區(qū)域來(lái)實(shí)現(xiàn)上述功能。 建好模板、定好光標(biāo)位置，“插入”/“模板對(duì)象”/“可編輯區(qū)域” ：,新建可編輯區(qū)域?qū)υ捒?8.7.3 創(chuàng)建可編輯區(qū)域,8.8 模板的應(yīng)用,8.8.1 應(yīng)用模板創(chuàng)建新文檔,8.8.2 將模板應(yīng)用于現(xiàn)有文檔,一、打開(kāi)已經(jīng)保存好的網(wǎng)頁(yè)，運(yùn)用“選擇模板”對(duì)話框設(shè) 置，將模板應(yīng)用于網(wǎng)頁(yè)。 二、把資源面板中要應(yīng)用的新模板拖到文檔中即可應(yīng)用 新模板。 三、 打開(kāi)模板，點(diǎn)擊“應(yīng)用”按鈕，即可應(yīng)用新模板。,8.8.3 更新應(yīng)用模板的文檔,當(dāng)模板中的內(nèi)容發(fā)生改變時(shí)，保存模板后會(huì)自動(dòng)彈出更新頁(yè)面的對(duì)話框，點(diǎn)擊更新按鈕即可更新所有應(yīng)用該模板的文檔。,8.8.4 將文檔從模板中分離,先從模板創(chuàng)建頁(yè)面，然后再?gòu)哪０逯蟹蛛x出來(lái)成為了獨(dú)立的頁(yè)面，并且保留網(wǎng)頁(yè)中原內(nèi)容。 “修改”|“模板”|“從模板中分離” 分離之后的文檔就是普通的網(wǎng)頁(yè)文檔了，和模板再也沒(méi)有任何聯(lián)