第8章 CSS和模板.ppt_第1頁(yè)
第8章 CSS和模板.ppt_第2頁(yè)
第8章 CSS和模板.ppt_第3頁(yè)
第8章 CSS和模板.ppt_第4頁(yè)
第8章 CSS和模板.ppt_第5頁(yè)
已閱讀5頁(yè),還剩40頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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)哪0逯蟹蛛x出來(lái)成為了獨(dú)立的頁(yè)面,并且保留網(wǎng)頁(yè)中原內(nèi)容。 “修改”|“模板”|“從模板中分離” 分離之后的文檔就是普通的網(wǎng)頁(yè)文檔了,和模板再也沒(méi)有任何聯(lián)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論