CSS模板和庫項目課程.ppt

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

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

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

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

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

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

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

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

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

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

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

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

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

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