網頁設計-任務十一使用css美化網頁

《網頁設計-任務十一使用css美化網頁》由會員上傳分享，免費在線閱讀，更多相關內容在教育資源-天天文庫。

1、項目五美化網頁網頁設計DreamweaverCS3項目教程項目五美化網頁技能目標在網頁設計中能夠靈活利用CSS樣式對頁面元素變換不同的視覺效果。掌握標簽樣式、高級樣式、類樣式的區(qū)別與應用范圍。知識目標熟練掌握CSS樣式表的創(chuàng)建與編輯。掌握CSS樣式表的基本語法和定義位置。理解CSS樣式表的標簽樣式、高級樣式、類樣式的定義方法。掌握一些CSS樣式表的基本濾鏡效果。理解DreamweaverCS3新增加的Spry組件功能。任務十一使用CSS美化網頁項目五美化網頁5.1.1使用CSS美化網頁5.1.2問題探究—CSS層疊樣式表5.1.3知識拓展—動態(tài)鏈接CSS樣式5.1.4知識

2、拓展—CSS濾鏡任務十一使用CSS美化網頁項目五美化網頁工作任務CSS樣式表用來控制一個網頁文檔中某文本區(qū)域外的一組格式屬性，它的使用簡化了網頁代碼，加快下載速度，減少上傳的代碼量，盡可能地避免了大量的重復操作，從而大大提高了網頁排版的效率，而且也為網頁制作者統(tǒng)一網站的整體風格提供了便利。通過該任務的實施完成，用戶能夠靈活利用CSS各種規(guī)則樣式的創(chuàng)建來改變頁面效果，體驗并理解CSS將內容與格式分離的內涵，制作出更加美觀賞心悅目的網頁效果。任務十一使用CSS美化網頁—構建任務項目五美化網頁工作流程打開站點中已設計好的頁面。定義頁面標題文本的樣式。建立自定義的鏈接樣式。定義C

3、SS樣式并應用到網頁對應元素。制作特殊邊框效果。為圖片設計CSS濾鏡效果。導出CSS樣式。新建網頁文件導入剛導出的CSS文件，體驗CSS的“一次創(chuàng)建，多次使用”。任務十一使用CSS美化網頁—構建任務項目五美化網頁網頁預覽效果任務十一使用CSS美化網頁—構建任務項目五美化網頁CSS是CascadingStyleSheet（層疊樣式表）的縮寫，是網頁設計中定義各種樣式的一套規(guī)范，CSS采用“先定義，后使用”的原則，簡化了網頁的格式代碼，可以將多個樣式同時應用于一個頁面或網頁中的同一個元素，實現網頁設計的標準化、結構化，同時也減少了代碼的上傳數量、加快了下載和顯示速度、優(yōu)化了工

4、作流程。任務十一使用CSS美化網頁—問題探究項目五美化網頁CSS樣式表基本語法CSS樣式表是對HTML語法的一次重大革新，它位于文檔的區(qū)，作用范圍由CLASS或其他任何符合CSS規(guī)范的文本來設置。將樣式規(guī)則加入到HTML文檔中的方法有很多，但最簡單的啟動方式是使用HTML的Style組件。如下代碼定義了標簽使用的字號和顏色。body{font-size:12px;color:#993399;}任務十一使用CSS美化網頁—問題探究項目五美化網頁style是引入樣式表最通用的方式。

5、>之間可以包含多個styles，也可以通過link將外部CSS文檔與html文檔相關聯，也可以通過@import指令引入多個外部CSS文檔；type屬性則表明這部分代碼用來定義樣式表。其中body和.font1是樣式的類型和名稱，{}之內的屬性定義了該樣式的規(guī)則。CSS樣式表的核心特點是將規(guī)則應用到元素集上的能力。它的應用主要有三種形式：組合多種屬性自定義樣式、對某種標簽重新設置屬性、對某種標簽的特定屬性進行設置。其應用又分為兩個步驟來進行，首先定義CSS樣式規(guī)則，這些規(guī)則可以直接插入到網頁的HTML代碼段中，也可以單獨保存在CSS文檔中；然后將規(guī)則應用到

6、相應的頁面元素上，例如文本、列表、圖像、表格、框架、表單等。任務十一使用CSS美化網頁—問題探究項目五美化網頁創(chuàng)建CSS樣式表規(guī)則采用兩種方法實施1、使用菜單命令從主菜單選擇“文本/CSS樣式/新建”命令，或者在頁面空白處單擊鼠標右鍵，在彈出的菜單中選擇“CSS樣式/新建”，都可以啟動“新建CSS規(guī)則”對話框，如圖5-10所示。設置選擇器類型設置規(guī)則名稱設置定義方式。任務十一使用CSS美化網頁—問題探究項目五美化網頁2、使用CSS樣式面板CSS樣式面板集成在浮動面板組，處于隱藏狀態(tài)。用戶可在菜單上選擇“窗口/CSS樣式”（或快捷鍵Shift+F11），打開如圖5-8所示的

7、CSS樣式面板。任務十一使用CSS美化網頁—問題探究項目五美化網頁CSS編輯器在“新建CSS規(guī)則”對話框中設置好相應選項，并單擊“確定”按鈕保存新創(chuàng)建的CSS文件后，即彈出“CSS規(guī)則定義”對話框，對規(guī)則的內容進行詳細的設置，如圖5-11所示。圖中包含了W3C組織規(guī)定的所有CSS的屬性，包括類型、背景、區(qū)塊、方框五、列表、定位、擴展等八個部分，用戶可以對這八種類別定制詳細樣式的格式。任務十一使用CSS美化網頁—問題探究項目五美化網頁CSS樣式表定義方式定義好CSS規(guī)則后，就可以在網頁中直接使用這些規(guī)則。“新建CSS規(guī)則”對話框