第八講CSS-模板和庫項目ppt課件

1、第八講 CSS、模板和庫工程 CSS款式表是Dreamweaver中的重點和難點，經(jīng)過本章的學習，大家要了解CSS款式表的作用。掌握如何建立CSS款式表，如何運用CSS款式表，如何設(shè)置CSS款式表的各項屬性。 在Dreamweaver MX中利用模板和庫工程可以創(chuàng)建具有一致風格的網(wǎng)頁，同時也能更方便地進展網(wǎng)站的維護。本章引見模板與庫工程的根底知識和運用：如何創(chuàng)建模板以及在網(wǎng)頁設(shè)計中運用模板，如何創(chuàng)建和設(shè)置庫工程以及向網(wǎng)頁添加庫工程等。本章內(nèi)容學習目的利用CSS技術(shù)創(chuàng)建和運用CSS款式，對網(wǎng)頁進展格式設(shè)置和特殊處置。掌握模板和庫工程的創(chuàng)建方法；掌握運用模板設(shè)計網(wǎng)頁的方法；掌握將庫工程添加到網(wǎng)頁中

2、的方法；掌握用模板和庫更新頁面的方法。模板：實踐上是一種特殊網(wǎng)頁，可以經(jīng)過模板頁面產(chǎn)生許多方式類似的網(wǎng)頁。庫工程：指網(wǎng)站上經(jīng)常反復(fù)運用或更新的頁面元素如圖象、文本和其他對象，將它們存儲在庫中進展管理和維護。在Dreamweaver MX中利用模板和庫工程可以創(chuàng)建具有一致風格的網(wǎng)頁，同時也能更方便的進展網(wǎng)站的維護。81 創(chuàng)建模板將現(xiàn)有文檔存為模板定義模板的可編輯區(qū)修正模板將現(xiàn)有文檔存為模板實例1 創(chuàng)建模板建立站點新建網(wǎng)頁網(wǎng)頁另存為模板：選擇菜單文件另存為模板單擊保管按鈕。在站點根目錄下會自動添加一個文件夾Templates，新保管的模板就在該文件夾中。模板文件擴展名為 .dwt。翻開資源面板并單

3、擊“模板按鈕，可以看到新建模板。8.1.2 定義模板的可編輯區(qū)在模板中，有兩種類型的區(qū)域：可編輯區(qū)域和鎖定區(qū)域。在運用了模板的網(wǎng)頁中，模板部分是鎖定的，其中的內(nèi)容都為不可編輯，所以必需在模板中定義可以編輯的區(qū)域以運用該模板來創(chuàng)建新的文檔?？梢韵衿胀ňW(wǎng)頁一樣在文檔窗口中翻開模板文件進展修正和編輯。實例2 為模板index.dwt定義可編輯區(qū)域。翻開index.dwt模板；清理模板文檔：只保管一切頁面中都需求的公共元素；定義可編輯區(qū)域：選擇菜單命令“插入模板對象可編輯區(qū)域；或插入面板選擇模板標簽可編輯區(qū)域。在模板頁中，可編輯區(qū)域用下面的標志來表示： 在模板中，還有兩個默許的可編輯區(qū)域：頁面標題和頁

4、面頭部中的區(qū)域。因此，運用了該模板的文檔，可以更改文檔的標題，可以在頁面插入客戶端腳本及定義CSS款式表，而其他區(qū)域均是不可編輯的。8.2 運用模板運用模板創(chuàng)建新文檔對現(xiàn)有文檔運用模板運用模板更新文檔8.2.1 運用模板創(chuàng)建新文檔實例利用模板index.dwt創(chuàng)建新文檔。選擇菜單命令“文件新建，翻開新建文檔對話框，選擇“模板選項卡，選擇站點模板，在右邊的預(yù)覽視圖中給出模板表示圖。如下圖：選中“當模板改動時更新頁面選項，單擊“創(chuàng)建按鈕，進入新文檔設(shè)計視圖。在新文檔中，光標只能挪動到可編輯區(qū)。在可編輯區(qū)EditRegionMain中插入相應(yīng)的表格、圖象和文字?？梢愿奈臋n標題。8.2.2 對已有文

5、檔運用模板實例 4 對以下表單 運用模板index.dwt。翻開表單網(wǎng)頁文檔；展開資源面板的模板窗口，選中模板index.dwt，單擊面板下面的“運用按鈕。顯示如下對話框： 其中提示當前頁在模板中不存在相應(yīng)的區(qū)域：Document body和Document head。這是由于在當前文檔的頭部head中不存在JavaScript函數(shù)，而在主體body中不存在內(nèi)容的緣由。選中對話框中間窗口“稱號列下的可編輯區(qū)域“Document body，在窗口下的“將內(nèi)容移到新區(qū)域下拉列表中選擇“EditRegionMain，其出如今窗口“已解析列下對應(yīng)行，即讓當前頁面的body部分內(nèi)容位于運用模板的可編輯區(qū)

6、域EditRegionMain中；再選中Document head將其移到head區(qū)域中，如下圖：單擊“確定，得到如下所示頁面設(shè)計視圖。8.2.3 運用模板更新文檔當需求對模板的某些方面進展修正，此時可在Dreamweaver MX中翻開模板文件，按照需求進展相應(yīng)的修正任務(wù)。在保管模板時會彈出如下對話框，訊問能否需求更新運用該模板來創(chuàng)建的文件；選擇“更新，那么自動對一切相關(guān)文件進展更新任務(wù)。8.3 庫工程及其運用創(chuàng)建庫工程向網(wǎng)頁添加庫工程利用庫工程更新網(wǎng)站8.3.1 創(chuàng)建庫工程在一個庫工程中，可以包含文本、表格、表單、圖象和多媒體等內(nèi)容。創(chuàng)建庫工程時，先選中文檔中的需求作為庫工程的對象，選擇菜

7、單命令“修正庫添加對象到庫來創(chuàng)建工程，也可以在資源面板庫類窗口中單擊“新建庫工程按鈕來創(chuàng)建。實例 5 創(chuàng)建一個庫工程，在工程中包含一個表格。在Dreamweaver MX中，新建網(wǎng)頁文件。向網(wǎng)頁中插入一個2行3列的表，設(shè)定表格邊框為5，間距為2，邊框顏色為藍色。選定頁面上的表格，選擇菜單命令“修正庫添加對象到庫，在當前站點根目錄下自動添加一個Library文件夾和文件“未命名.lbi。在庫類窗口中同時給出該庫工程的款式圖。將新工程重命名為table，Library目錄中的文件的稱號也自動改動為table.lbi8.3.2 向網(wǎng)頁添加庫工程實例 6 將庫工程添加到index.dwt中。翻開文檔；

8、確定插入位置；翻開資源面板并切換到庫類別，選中庫工程table，單擊面板底部的“插入按鈕，或者直接將庫工程拖動到目的位置釋放，該工程就插入到網(wǎng)頁中。8.3.3 利用庫工程更新網(wǎng)站在對庫工程進展修正后，普通在保管該庫工程時，就會翻開如下對話框，訊問能否更新添加了該庫工程的文件，假設(shè)選擇“更新按鈕，就會翻開對話框如下圖。運用模板和庫，極大地提高了網(wǎng)站開發(fā)的速度和效率，也極大改善了網(wǎng)站的維護任務(wù)。8.4CSS款式表概述為什么用CSS款式如今網(wǎng)頁排版格式越來越來復(fù)雜，假設(shè)要對多個網(wǎng)頁的同樣格式一一進展設(shè)計，那么就會給制造人員帶來很多的任務(wù)量，所以處理方法是采用CSS款式來一次性對假設(shè)干個文檔的格式進展

9、控制。8.4CSS款式表概述什么是CSS款式CSSCascading Style Sheet，層疊款式表 技術(shù)是一種格式化網(wǎng)頁的規(guī)范方式，它擴展了HTML的功能，使網(wǎng)頁設(shè)計者可以以更有效的方式設(shè)置網(wǎng)頁格式。8.4CSS款式表概述什么是CSS款式CSS款式存于款式表文件中，然后在多個網(wǎng)頁中同時運用該款式表中的款式 ，就能確保多個網(wǎng)頁具有一致的格式，并且可以隨時更新只需更改款式表文件就可以使一切網(wǎng)頁自動更新，從而大大降低了網(wǎng)站的開發(fā)和維護任務(wù)量。8.4CSS款式表概述認識CSS面板顯示一切款式顯示當前款式內(nèi)部款式表款式稱號款式及屬性值8.5 CSS的分類外部鏈接款式表(External linki

10、ng 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 款式面板的方式： 翻開“窗口菜單“CSS款式 2款式視圖 CSS款式面板CSS款式在網(wǎng)頁中的三種存在方式外部文件方式：CSS以文件的方式存在，在HTML文檔頭經(jīng)過文件援用進展控制。 CSS文件的援用是在標簽之間寫以下語句: 不以文件的方式存在,僅作用于本文檔,直接定義在 之間

11、.內(nèi)嵌款式直接插入式只需求在每個HTML標簽后書寫CSS屬性。作用范圍只限于本標簽。 在一致站點風格上，用第一方式，在某個網(wǎng)頁風格一致上，用第二種方式，而在網(wǎng)頁內(nèi)部某個標簽的詳細調(diào)整上，用第三種方式。 假設(shè)是新建CSS文件,有兩種方法:方法一:可以經(jīng)過菜單文件/新建/CSS款式方法二:經(jīng)過進入CSS面板,點擊右下角的新建CSS款式接下來,我們來看第二種方法 創(chuàng)建新的 CSS 款式創(chuàng)建自定義款式(也就是選擇器類型中選擇類)：稱號須以.開頭，并且可以包含任何字母和數(shù)字組合。例如 .myhead1。假設(shè)您沒有輸入開頭的句點，Dreamweaver 將自動為您輸入。在定義在:的選項中,有兩個選擇,第一

12、個表示新建CSS文件,這時,他在剛剛的稱號:后面的文本框中輸入的就是CSS文件名;假設(shè)他選擇僅對該文檔,那么是以形如.myhead1方式出如今代碼中.重定義HTML標簽：重定義特定 HTML 標簽的默許格式。對文檔中的任何標簽都可以運用 CSS 款式 .acronym從字義上了解，是取首字母的縮寫詞，abbr是縮寫，在運用過程中，兩個標簽看起來差不多，但還是有區(qū)別的。Cascading Style Sheetsphotoshop上面這兩行代碼是放在頁面中的.然后再設(shè)置 abbr或acronym標簽留意:IE6中能夠不支持,IE7支持更多的HTML標簽的信息請閱讀附錄:html標志大全選擇高級：

13、重新定義一些標簽的特定組合格式。共有四種:a:link, a:visited, a:hover,a:active a:link當文字作為鏈接時, a:visited當其鏈接的網(wǎng)頁已被閱讀時, a:hover表示光標移向鏈接文字時,a:active當超鏈接文字被選中時在網(wǎng)頁中練習這四種的效果外部：將以文件的方式存在。僅對該文檔：內(nèi)嵌式款式。CSS的屬性字體：font-family大?。篺ont-size粗細：font-weight款式：font-style行高：line-height修飾：text-decoration顏色：color定義層疊款式表類型：定義 CSS 款式的根本類型設(shè)置。背景：對 CSS 款式的背景設(shè)置進展定義，可以對網(wǎng)頁中的任何元素運用背景屬性。例如，創(chuàng)建一個款式，將背景顏色或背景圖像添加到任何頁面元素中，比如在文本、表格、頁面等的后面。還可以設(shè)置背景圖像的位置。區(qū)塊：準確定義整段文本中文字的字距、對齊方式等屬性。 盒子：可以定義特定元素的大小及其與周圍元素的間距等屬性。 邊框面板：可以對控制元素周圍邊境的款式屬性進展定義。列外表板：定義列表的款式屬性。定位面板：定義層的款式屬性。