CSS模板和庫(kù)項(xiàng)目課程.ppt

1、講CSS、模板和庫(kù)項(xiàng)目,CSS樣式表是Dreamweaver中的重點(diǎn)和難點(diǎn)，通過(guò)本章的學(xué)習(xí)，大家要理解CSS樣式表的作用。掌握如何建立CSS樣式表，如何運(yùn)用CSS樣式表，如何設(shè)置CSS樣式表的各項(xiàng)屬性。 在Dreamweaver MX中利用模板和庫(kù)項(xiàng)目能夠創(chuàng)建具有統(tǒng)一風(fēng)格的網(wǎng)頁(yè)，同時(shí)也能更方便地進(jìn)行網(wǎng)站的維護(hù)。本章介紹模板與庫(kù)項(xiàng)目的基礎(chǔ)知識(shí)和應(yīng)用：如何創(chuàng)建模板以及在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用模板，如何創(chuàng)建和設(shè)置庫(kù)項(xiàng)目以及向網(wǎng)頁(yè)添加庫(kù)項(xiàng)目等。,本章內(nèi)容,學(xué)習(xí)目標(biāo),利用CSS技術(shù)創(chuàng)建和應(yīng)用CSS樣式，對(duì)網(wǎng)頁(yè)進(jìn)行格式設(shè)置和特殊處理。 掌握模板和庫(kù)項(xiàng)目的創(chuàng)建方法； 掌握應(yīng)用模板設(shè)計(jì)網(wǎng)頁(yè)的方法； 掌握將庫(kù)項(xiàng)目添加到

2、網(wǎng)頁(yè)中的方法； 掌握用模板和庫(kù)更新頁(yè)面的方法。,模板：實(shí)際上是一種特殊網(wǎng)頁(yè)，可以通過(guò)模板頁(yè)面產(chǎn)生許多形式相似的網(wǎng)頁(yè)。 庫(kù)項(xiàng)目：指網(wǎng)站上經(jīng)常重復(fù)使用或更新的頁(yè)面元素（如圖象、文本和其他對(duì)象），將它們存儲(chǔ)在庫(kù)中進(jìn)行管理和維護(hù)。 在Dreamweaver MX中利用模板和庫(kù)項(xiàng)目能夠創(chuàng)建具有統(tǒng)一風(fēng)格的網(wǎng)頁(yè)，同時(shí)也能更方便的進(jìn)行網(wǎng)站的維護(hù)。,81 創(chuàng)建模板,將現(xiàn)有文檔存為模板 定義模板的可編輯區(qū) 修改模板,將現(xiàn)有文檔存為模板,實(shí)例1 創(chuàng)建模板 建立站點(diǎn) 新建網(wǎng)頁(yè),網(wǎng)頁(yè)另存為模板： 選擇菜單文件另存為模板 單擊保存按鈕。在站點(diǎn)根目錄下會(huì)自動(dòng)增加一個(gè)文件夾Templates，新保存的模板就在該文件夾中。模板

3、文件擴(kuò)展名為 .dwt。 打開資源面板并單擊“模板”按鈕，可以看到新建模板。,8.1.2 定義模板的可編輯區(qū),在模板中，有兩種類型的區(qū)域：可編輯區(qū)域和鎖定區(qū)域。在應(yīng)用了模板的網(wǎng)頁(yè)中，模板部分是鎖定的，其中的內(nèi)容都為不可編輯，所以必須在模板中定義可以編輯的區(qū)域以使用該模板來(lái)創(chuàng)建新的文檔。 可以像普通網(wǎng)頁(yè)一樣在文檔窗口中打開模板文件進(jìn)行修改和編輯。,實(shí)例2 為模板index.dwt定義可編輯區(qū)域。 打開index.dwt模板； 清理模板文檔：只保留所有頁(yè)面中都需要的公共元素； 定義可編輯區(qū)域：選擇菜單命令“插入模板對(duì)象可編輯區(qū)域”；或插入面板選擇模板標(biāo)簽可編輯區(qū)域。,在模板頁(yè)中，可編輯區(qū)域用下面的

4、標(biāo)記來(lái)表示： 在模板中，還有兩個(gè)默認(rèn)的可編輯區(qū)域：頁(yè)面標(biāo)題和頁(yè)面頭部中的區(qū)域。因此，應(yīng)用了該模板的文檔，可以更改文檔的標(biāo)題，可以在頁(yè)面插入客戶端腳本及定義CSS樣式表，而其他區(qū)域均是不可編輯的。,8.2 使用模板,使用模板創(chuàng)建新文檔 對(duì)現(xiàn)有文檔應(yīng)用模板 使用模板更新文檔,8.2.1 使用模板創(chuàng)建新文檔,實(shí)例利用模板index.dwt創(chuàng)建新文檔。 選擇菜單命令“文件新建”，打開新建文檔對(duì)話框，選擇“模板”選項(xiàng)卡，選擇站點(diǎn)模板，在右邊的預(yù)覽視圖中給出模板示意圖。如圖所示：,選中“當(dāng)模板改變時(shí)更新頁(yè)面”選項(xiàng)，單擊“創(chuàng)建”按鈕，進(jìn)入新文檔設(shè)計(jì)視圖。 在新文檔中，光標(biāo)只能移動(dòng)到可編輯區(qū)。 在可編輯區(qū)Ed

5、itRegionMain中插入相應(yīng)的表格、圖象和文字。 可以更改文檔標(biāo)題。,8.2.2 對(duì)已有文檔應(yīng)用模板,實(shí)例 4 對(duì)下列表單 應(yīng)用模板index.dwt。,打開表單網(wǎng)頁(yè)文檔； 展開資源面板的模板窗口，選中模板index.dwt，單擊面板下面的“應(yīng)用”按鈕。顯示如下對(duì)話框：,其中提示當(dāng)前頁(yè)在模板中不存在相應(yīng)的區(qū)域：Document body和Document head。這是由于在當(dāng)前文檔的頭部（head）中不存在JavaScript函數(shù)，而在主體（body）中不存在內(nèi)容的原因。 選中對(duì)話框中間窗口“名稱”列下的可編輯區(qū)域“Document body”，在窗口下的“將內(nèi)容移到新區(qū)域”下拉列表中

6、選擇“EditRegionMain”，其出現(xiàn)在窗口“已解析”列下對(duì)應(yīng)行，即讓當(dāng)前頁(yè)面的body部分內(nèi)容位于應(yīng)用模板的可編輯區(qū)域EditRegionMain中；再選中”Document head”將其移到head區(qū)域中，如圖所示：,單擊“確定”，得到如下所示頁(yè)面設(shè)計(jì)視圖。,8.2.3 使用模板更新文檔,當(dāng)需要對(duì)模板的某些方面進(jìn)行修改，此時(shí)可在Dreamweaver MX中打開模板文件，按照需要進(jìn)行相應(yīng)的修改工作。在保存模板時(shí)會(huì)彈出如下對(duì)話框，詢問(wèn)是否需要更新使用該模板來(lái)創(chuàng)建的文件；選擇“更新”，則自動(dòng)對(duì)所有相關(guān)文件進(jìn)行更新工作。,8.3 庫(kù)項(xiàng)目及其應(yīng)用,創(chuàng)建庫(kù)項(xiàng)目 向網(wǎng)頁(yè)添加庫(kù)項(xiàng)目 利用庫(kù)項(xiàng)目更

7、新網(wǎng)站,8.3.1 創(chuàng)建庫(kù)項(xiàng)目,在一個(gè)庫(kù)項(xiàng)目中，可以包含文本、表格、表單、圖象和多媒體等內(nèi)容。創(chuàng)建庫(kù)項(xiàng)目時(shí)，先選中文檔中的需要作為庫(kù)項(xiàng)目的對(duì)象，選擇菜單命令“修改庫(kù)增加對(duì)象到庫(kù)”來(lái)創(chuàng)建項(xiàng)目，也可以在資源面板庫(kù)類窗口中單擊“新建庫(kù)項(xiàng)目”按鈕來(lái)創(chuàng)建。,實(shí)例 5 創(chuàng)建一個(gè)庫(kù)項(xiàng)目，在項(xiàng)目中包含一個(gè)表格。 在Dreamweaver MX中，新建網(wǎng)頁(yè)文件。 向網(wǎng)頁(yè)中插入一個(gè)2行3列的表，設(shè)定表格邊框?yàn)?，間距為2，邊框顏色為藍(lán)色。 選定頁(yè)面上的表格，選擇菜單命令“修改庫(kù)增加對(duì)象到庫(kù)”，在當(dāng)前站點(diǎn)根目錄下自動(dòng)增加一個(gè)Library文件夾和文件“未命名.lbi”。在庫(kù)類窗口中同時(shí)給出該庫(kù)項(xiàng)目的樣式圖。,將新項(xiàng)

8、目重命名為table，Library目錄中的文件的名稱也自動(dòng)改變?yōu)閠able.lbi,8.3.2 向網(wǎng)頁(yè)添加庫(kù)項(xiàng)目,實(shí)例 6 將庫(kù)項(xiàng)目添加到index.dwt中。 打開文檔； 確定插入位置； 打開資源面板并切換到庫(kù)類別，選中庫(kù)項(xiàng)目table，單擊面板底部的“插入”按鈕，或者直接將庫(kù)項(xiàng)目拖動(dòng)到目標(biāo)位置釋放，該項(xiàng)目就插入到網(wǎng)頁(yè)中。,8.3.3 利用庫(kù)項(xiàng)目更新網(wǎng)站,在對(duì)庫(kù)項(xiàng)目進(jìn)行修改后，一般在保存該庫(kù)項(xiàng)目時(shí)，就會(huì)打開如下對(duì)話框，詢問(wèn)是否更新添加了該庫(kù)項(xiàng)目的文件，如果選擇“更新”按鈕，就會(huì)打開對(duì)話框如圖所示。 使用模板和庫(kù)，極大地提高了網(wǎng)站開發(fā)的速度和效率，也極大改善了網(wǎng)站的維護(hù)工作。,8.4CSS樣

9、式表概述為什么用CSS樣式,如今網(wǎng)頁(yè)排版格式越來(lái)越來(lái)復(fù)雜，如果要對(duì)多個(gè)網(wǎng)頁(yè)的同樣格式一一進(jìn)行設(shè)計(jì)，那么就會(huì)給制作人員帶來(lái)很多的工作量，所以解決辦法是采用CSS樣式來(lái)一次性對(duì)若干個(gè)文檔的格式進(jìn)行控制。,8.4CSS樣式表概述什么是CSS樣式,CSS（Cascading Style Sheet，層疊樣式表 ）技術(shù)是一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，它擴(kuò)展了HTML的功能，使網(wǎng)頁(yè)設(shè)計(jì)者能夠以更有效的方式設(shè)置網(wǎng)頁(yè)格式。,8.4CSS樣式表概述什么是CSS樣式,CSS樣式存于樣式表文件中，然后在多個(gè)網(wǎng)頁(yè)中同時(shí)應(yīng)用該樣式表中的樣式 ，就能確保多個(gè)網(wǎng)頁(yè)具有一致的格式，并且能夠隨時(shí)更新（只要更改樣式表文件就可以使所有

10、網(wǎng)頁(yè)自動(dòng)更新），從而大大降低了網(wǎng)站的開發(fā)和維護(hù)工作量。,8.4CSS樣式表概述認(rèn)識(shí)CSS面板,顯示所有樣式,顯示當(dāng)前樣式,內(nèi)部樣式表,樣式名稱,樣式及屬性值,8.5 CSS的分類,外部鏈接樣式表(External linking css):實(shí)際上是一個(gè)僅包含樣式規(guī)則的外部文本文件，其后綴名為“CSS”，當(dāng)編輯此文件時(shí)，所有與此樣式表鏈接的文檔將全被更新。 內(nèi)嵌式樣式表(Embedded CSS)：嵌在HTML代碼的標(biāo)記之間。 內(nèi)聯(lián)式樣式表(Inlink CSS):直接在某一HTML標(biāo)記后添加樣式代碼。 優(yōu)先程度：內(nèi)聯(lián)式內(nèi)嵌式外部鏈接,（1）顯示“CSS 樣式”面板的方式： 打開“窗口”菜單“C

11、SS”樣式 （2）樣式視圖,CSS樣式面板,CSS樣式在網(wǎng)頁(yè)中的三種存在方式,外部文件方式：CSS以文件的形式存在，在HTML文檔頭通過(guò)文件引用進(jìn)行控制。 CSS文件的引用是在標(biāo)簽之間寫下列語(yǔ)句: ,不以文件的形式存在,僅作用于本文檔,直接定義在 之間. ,內(nèi)嵌樣式,直接插入式,只需要在每個(gè)HTML標(biāo)簽后書寫CSS屬性。作用范圍只限于本標(biāo)簽。 在統(tǒng)一站點(diǎn)風(fēng)格上，用第一方式，在某個(gè)網(wǎng)頁(yè)風(fēng)格統(tǒng)一上，用第二種方式，而在網(wǎng)頁(yè)內(nèi)部某個(gè)標(biāo)簽的具體調(diào)整上，用第三種方式。,如果是新建CSS文件,有兩種方法: 方法一:可以通過(guò)菜單”文件/新建/CSS樣式” 方法二:通過(guò)進(jìn)入CSS面板,點(diǎn)擊右下角的”新建CSS樣

12、式” 接下來(lái),我們來(lái)看第二種方法,創(chuàng)建新的 CSS 樣式,創(chuàng)建自定義樣式(也就是選擇器類型中選擇”類”)：名稱須以.開頭，并且可以包含任何字母和數(shù)字組合。例如 .myhead1。如果您沒有輸入開頭的句點(diǎn)，Dreamweaver 將自動(dòng)為您輸入。,在”定義在:”的選項(xiàng)中,有兩個(gè)選擇,第一個(gè)表示新建CSS文件,這時(shí),你在剛才的”名稱:”后面的文本框中輸入的就是CSS文件名;如果你選擇”僅對(duì)該文檔”,則是以形如”.myhead1”方式出現(xiàn)在代碼中.,重定義HTML標(biāo)簽：重定義特定 HTML 標(biāo)簽的默認(rèn)格式。對(duì)文檔中的任何標(biāo)簽都可以應(yīng)用 CSS 樣式 .,acronym從字義上理解，是取首字母的縮寫詞

13、，abbr是縮寫，在應(yīng)用過(guò)程中，兩個(gè)標(biāo)簽看起來(lái)差不多，但還是有區(qū)別的。,Cascading Style Sheets photoshop 上面這兩行代碼是放在頁(yè)面中的.然后再設(shè)置 abbr或acronym標(biāo)簽 注意:IE6中可能不支持,IE7支持,更多的HTML標(biāo)簽的信息請(qǐng)瀏覽附錄:html標(biāo)記大全,選擇高級(jí)：重新定義一些標(biāo)簽的特定組合格式。共有四種:a:link, a:visited, a:hover,a:active,a:link當(dāng)文字作為鏈接時(shí), a:visited當(dāng)其鏈接的網(wǎng)頁(yè)已被瀏覽時(shí), a:hover表示光標(biāo)移向鏈接文字時(shí),a:active當(dāng)超鏈接文字被選中時(shí) 在網(wǎng)頁(yè)中練習(xí)這四種的

14、效果,外部：將以文件的形式存在。 僅對(duì)該文檔：內(nèi)嵌式樣式。,CSS的屬性,字體：font-family 大小：font-size 粗細(xì)：font-weight 樣式：font-style 行高：line-height 修飾：text-decoration 顏色：color,定義層疊樣式表,類型：定義 CSS 樣式的基本類型設(shè)置。 背景：對(duì) CSS 樣式的背景設(shè)置進(jìn)行定義，可以對(duì)網(wǎng)頁(yè)中的任何元素應(yīng)用背景屬性。例如，創(chuàng)建一個(gè)樣式，將背景顏色或背景圖像添加到任何頁(yè)面元素中，比如在文本、表格、頁(yè)面等的后面。還可以設(shè)置背景圖像的位置。 區(qū)塊：精確定義整段文本中文字的字距、對(duì)齊方式等屬性。 盒子：可以定義特定元素的大小及其與周圍元素的間距等屬性。 邊框面板：可以對(duì)控制元素周圍邊界的樣式屬性進(jìn)行定義。 列表面板：定義列表的樣式屬性。 定位面板：定義層的樣式屬性。 擴(kuò)展樣式面