《網(wǎng)頁設(shè)計之DreamwaverCS5》教案10.doc

第十章 CSS樣式表的應(yīng)用如果說目前在Web設(shè)計和開發(fā)技術(shù)領(lǐng)域，什么是非?！盎稹钡男录夹g(shù)，CSS/DIV頁面的布局無疑是其中之一1CSS的概念 CSS（Cascading Style Sheet），中文譯為層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。對于一個網(wǎng)頁設(shè)計者來說，HTML語言一定不會感到陌生，因為它是所有網(wǎng)頁制作的基礎(chǔ)。但是如果希望網(wǎng)頁能夠美觀、大方，并且升級方便，維護輕松，那么僅僅HTML是不夠的，CSS在這中間扮演著重要的角色。本課從CSS的基本概念出發(fā)，介紹CSS語言的特點，以及如何在網(wǎng)頁中引入CSS，并對CSS進行初步的體驗。（其實我們在前面的課程中已經(jīng)接觸到）作用：例子演示。從CSS對標記的控制入手，講解CSS的初步知識以及編輯方法。希望大家能夠掌握下一面幾個方面的內(nèi)容： 標記的概念 傳統(tǒng)HTML的缺點 CSS的引入 特點：1） 靈活控制網(wǎng)頁中的每個元素的樣式 2） 把內(nèi)容和格式處理相分離，提高工作效率注：CSS是1996年由W3C審核通過，并且推薦使用的。簡單的說CSS的引入就是為了使得HTML能夠更好的適應(yīng)頁面的美工設(shè)計。它以HTML為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景、整體排版等等，并且網(wǎng)頁設(shè)計者可以針對各種可視化瀏覽器設(shè)置不同的樣式風格，包括顯示器、打印機、打字機、投影儀、PDA等等。CSS的引入隨即引發(fā)了網(wǎng)頁設(shè)計的一個又一個新高潮，使用CSS設(shè)計的優(yōu)秀頁面層出不窮。2.如何編輯CSS樣式1) 屬性面板快捷操作2）使用CSS樣式面板A 管理CSS規(guī)則按鈕（添加按鈕、鏈接按鈕、修改按鈕、刪除按鈕）B 顯示規(guī)則列表（顯示全部元素的樣式、顯示當前編輯元素的樣式）C 顯示所選規(guī)制屬性D 查看CSS屬性視圖按鈕（分類、按字母排列、顯示設(shè)置）3）手工輸入代碼3.CSS選擇器 選擇器（selector）是CSS中很重要的概念，所有HTML語言中的標記都是通過不同的CSS選擇器進行控制的。用戶只需要通過選擇器對不同的HTML標簽進行控制，并賦予各種樣式聲明，即可實現(xiàn)各種效果。希望大家能夠掌握以下幾個方面的內(nèi)容：標記選擇器 （對標記起作用）類別選擇器 ID選擇器同一個Id選擇器不能同時出現(xiàn)在兩個標記中的，原因是id不但用于CSS同時也是javascript語法的一個目標設(shè)置。所以相同的id名稱會造成混亂。4.小試牛刀-css美化頁面1） 設(shè)置網(wǎng)頁屬性設(shè)置（字體12像素、黑色；背景圖片bg.gif；邊距均為0）2） 創(chuàng)建表格邊框樣式 .line （顏色#CC66FF）3) 設(shè)置底部文字的樣式 .white （字體白色）4） 美化輸入文本框樣式 .input5選擇器的復(fù)合聲明 在利用CSS選擇器控制HTML標記時，除了每個選擇器的屬性可以一次聲明多個，選擇器本身也可以同時聲明多個，并且任何形式的選擇器包括標記選擇器、class類別選擇器、ID選擇器等都是合法的。6 CSS的嵌套與繼承 1）選擇器的嵌套2繼承，簡單的說就是將各個HTML標記看作一個個容器，其中被包含的小容器會繼承所包含它的大容器的風格樣式。我們在這里從頁面各個標記的父子關(guān)系出發(fā)，講解CSS的繼承。7. 應(yīng)用CSS到網(wǎng)頁中 在對CSS有了大致的了解后，便希望使用CSS對頁面進行全方位的控制。我們在這里主要介紹如何使用CSS控制頁面，以及其控制頁面的各種方法，包括行內(nèi)樣式、內(nèi)嵌式、鏈接式、導(dǎo)入式等。并最后探討各種方式的優(yōu)先級問題。希望大家能夠掌握以下幾個方面的內(nèi)容： 內(nèi)嵌式 （寫在head頭部信息中） 行內(nèi)樣式 （寫到html標記里面） 鏈接式 （適合多個頁面使用） 導(dǎo)入樣式 各種方式的優(yōu)先級問題 行內(nèi)樣式內(nèi)嵌式 鏈接式8.綜合實例1）新建名稱為“.title1”的類樣式，定義在樣式表文件“css2.css”中，具體設(shè)置如下： 類型分類下設(shè)置：字體“隸書”，大小“24”，顏色“#FF0000”理解“行高”的定義2）.新建名稱為“.tb”的類樣式，定義在樣式表文件“css2.css”中，具體設(shè)置如下：在“背景”分類下設(shè)置背景顏色為“#EEDEDB”。3）新建關(guān)于標簽“body”的樣式，定義在新的樣式表文件“css2.css”中，具體設(shè)置如下：分類具體設(shè)置類型字體“楷體”，大小“14”，行高“16”背景背景顏色“#DFC0BB”區(qū)塊文本對齊“居中”所有瀏覽器都支持 vertical-align 屬性?？赡艿闹抵得枋鯾aseline默認。元素放置在父元素的基線上。sub垂直對齊文本的下標。 H20super垂直對齊文本的上標 52=25top把元素的頂端與行中最高元素的頂端對齊text-top把元素的頂端與父元素字體的頂端對齊middle把此元素放置在父元素的中部。bottom把元素的頂端與行中最低的元素的頂端對齊。text-bottom把元素的底端與父元素字體的底端對齊。length長度單位與基線的位移數(shù)值%使用 line-height 屬性的百分比值來排列此元素。允許使用負值。inherit規(guī)定應(yīng)該從父元素繼承 vertical-align 屬性的值。/css/css_reference.asp4）新建名稱為“.copy”的類樣式，定義在樣式表文件“css2.css”中，具體設(shè)置如下：分類具體設(shè)置類型字體“宋體”，大小“12”，行高“25”顏色“#333333”背景背景顏色“#04A292”區(qū)塊文本對齊“居中”5）. 新建名稱為“.img01”的類樣式，定義在樣式表文件“css2.css”中，具體設(shè)置如下：分類具體設(shè)置邊框樣式“outset”，寬度“4px”，顏色“#846761”方框?qū)挕?70px”，高“180px”，浮動“向左”填充“5px”，邊界“5px”6）. 新建名稱為“.lead”的類樣式，定義在樣式表文件“css2.css”中，具體設(shè)置如下：分類具體設(shè)置類型字體“宋體”，大小“14”，行高“25”顏色“#FFFFFF”背景背景顏色“#03756B”區(qū)塊文本對齊“居中”方框?qū)挕?09”，高“25”邊框樣式：“上”下拉列表框中選擇“實線”寬度：取消全部相同 “右”下拉列表框 “1”“上”、“下”、“左”下拉列表框 “0”顏色：取消全部相同 “右”下拉列表框 “#FFFFFF”7）設(shè)置鏈接樣式超級鏈接的4種狀態(tài)a:link 超鏈接默認狀態(tài)a:visited 已經(jīng)瀏覽過的鏈接a:hover 鼠標經(jīng)過時a:active 點擊鏈接時鼠標經(jīng)過時背景顏色為：#33FF998重建css樣式表文件css3.css，改變網(wǎng)頁風格。例如:下圖樣例。要點：1)、練習配色。2) 使用樣式表的濾鏡，對圖片增加效果。filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=300, FinishY=240);height: 300px;width: 660px;Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)Opacity：透明度級別，范圍是0-100，0代表完全透明，100代表完全不透明。FinishOpacity：設(shè)置漸變的透明效果時，用來指定結(jié)束時的透明度，范圍也是0 到 100。Style：設(shè)置漸變透明的樣式，值為0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長方形。StartX和StartY：代表漸變透明效果的開始X和Y坐標。FinishX和FinishY：代表漸變透明效果結(jié)束X和Y 的坐標。9. CSS使用技巧1）CSS 禁用/啟用CSS 禁用/啟用允許您直接從 CSS 樣式面板禁用和重新啟用 CSS 屬性。禁用 CSS 屬性只會取消指定屬性的注釋，而不會實際刪除該屬性。2）CSS 檢查檢查模式允許您以可視化方式詳細顯示 CSS 框模型屬性，包括填充、邊框和邊距，無需讀取代碼，也不需