單元8 復雜樣式與網(wǎng)頁特效設計

單元8

復雜樣式與網(wǎng)頁特效設計

在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風格和更強的效果。 此外，相較以前的Web排版，Web的開放字體格式也提供了更高的靈活性和控制性。 本單元通過對復雜樣式與網(wǎng)頁特效設計的 探析與訓練，重點學習CSS各種類型的選擇器、 CSS框模型、邊框?qū)傩?、外邊距屬性、?nèi)邊距 屬性、多列屬性、動畫屬性和HTML5拖放的 實現(xiàn)方法等，學會網(wǎng)頁中復雜樣式與網(wǎng)頁特效 的設計。教學導航教學目標（1）熟悉CSS選擇器規(guī)則及各種類型選擇器的使用（2）熟悉CSS框模型、邊框?qū)傩?、外邊距屬性和?nèi)邊距屬性（3）熟悉多列屬性和動畫屬性（4）掌握HTML5拖放的實現(xiàn)方法（5）學會網(wǎng)頁中復雜樣式與網(wǎng)頁特效的設計關(guān)鍵字復雜樣式網(wǎng)頁特效CSS選擇器邊框?qū)傩酝膺吘鄬傩詢?nèi)邊距屬性HTML5拖放參考資料（1）HTML5的常用標簽及其屬性、方法與事件參考附錄B（2）CSS的屬性參考附錄C（3）CSS的各種選擇器的含義和用法參考附錄D教學方法任務驅(qū)動法、分組討論法、理論實踐一體化、探究學習法課時建議12課時實例探析【任務8-1】探析迷你音樂播放器面板制作【效果展示】 迷你音樂播放器0801.html的瀏覽效果如圖8-1所示。圖8-1迷你音樂播放器0801.html的瀏覽效果【網(wǎng)頁探析】1．網(wǎng)頁0801.html的HTML代碼探析2．網(wǎng)頁0801.html的CSS代碼探析【任務8-2】探析純CSS3實現(xiàn)的焦點圖切換效果【效果展示】 網(wǎng)頁0802.html中焦點圖切換效果如圖8-2所示。圖8-2網(wǎng)頁0802.html中焦點圖切換效果【網(wǎng)頁探析】1．網(wǎng)頁0802.html的HTML代碼探析2．網(wǎng)頁0802.html的CSS代碼探析知識梳理1．CSS框模型（Box） CSS框模型（BoxModel）規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框和外邊距的方式。 CSS框模型組成結(jié)構(gòu)示意圖如圖8-3所 示，圖中element表示網(wǎng)頁元素，border表 示邊框，padding表示內(nèi)邊距，也將其翻譯 為填充，margin表示外邊距，也將其翻譯 為空白或空白邊。 本書中我們把padding和margin統(tǒng)一地稱為內(nèi)邊距和外邊距，邊框內(nèi)的空白是內(nèi)邊距，邊框外的空白是外邊距。圖8-3

CSS框模型組成結(jié)構(gòu)示意圖圖8-4元素框的內(nèi)容寬度、內(nèi)邊距和外邊距尺寸示意圖2．CSS邊框?qū)傩裕˙order和Outline） 在HTML中，使用表格來創(chuàng)建文本周圍的邊框，但是通過使用CSS邊框?qū)傩?，我們可以?chuàng)建出效果出色的邊框，并且可以應用于任何元素。 通過CSS3，可以創(chuàng)建圓角邊框，向矩形 添加陰影，使用圖片來繪制邊框，并且不需 使用PhotoShop之類的設計軟件。 在CSS3中，border-radius屬性用于創(chuàng)建 圓角，box-shadow屬性用于向方框添加陰影，border-image屬性可以使用圖片來創(chuàng)建邊框。 元素的邊框（border）是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線，border屬性允許設置元素邊框的樣式、寬度和顏色。 CSS規(guī)范指出，邊框繪制在“元素的背景之上”。 這很重要，因為有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應當出現(xiàn)在邊框的可見部分之間。 從某種意義上說，利用transparent，使用邊框就像是額外的內(nèi)邊距一樣；此外還有一個好處，就是能在需要的時候使其可見。 這種透明邊框相當于內(nèi)邊距，因為元素的背景會延伸到邊框區(qū)域（如果有可見背景的話）。3．CSS外邊距屬性（Margin） 圍繞在元素邊框的空白區(qū)域是外邊 距，設置外邊距會在元素外創(chuàng)建額外的“空白”。 設置外邊距的最簡單的方法就是使 用margin屬性，這個屬性接受任何長度 單位（可以是像素、英寸、毫米或em）、百分數(shù)值甚至負值。圖8-5值復制規(guī)則示意圖4．CSS內(nèi)邊距屬性（Padding） 元素的內(nèi)邊距在邊框與元素內(nèi)容之間的空白區(qū)域，控制該區(qū)域最簡單的屬性是padding屬性。 CSSpadding屬性定義元素的內(nèi)邊距。 padding屬性接受長度值或百分比值，但不允許使用負值。5．CSS多列屬性（Multi-column） 通過CSS3，可以創(chuàng)建多個列來對文本進行布局，就像報紙那樣。 column-count屬性用于設置元素應該被分隔的列數(shù)。6．CSS動畫屬性（Animation） 通過CSS3，我們能夠創(chuàng)建動畫，這可以在許多網(wǎng)頁中取代動畫圖片、Flash動畫及JavaScript。 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。 可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)，使用百分比來規(guī)定變化發(fā)生的時間，或使用 關(guān)鍵詞“from”和“to”，等同于0%（動畫的 開始）和100%（動畫的完成），為了得到最佳的瀏覽器支持，應該始終定義0%和100%選擇器。7．HTML5拖放的實現(xiàn)方法 拖放（Drag&Drop）是一種常見的特性，即抓取對象以后拖到另一個位置。 在HTML5中，拖放是標準的一部分，任何元素都能夠拖放。（1）設置元素為可拖放 首先，為了使元素可拖動，把draggable屬性設置為true。（2）拖動什么——ondragstart和setData()（3）放到何處——ondragover【任務8-3】網(wǎng)頁中繪制陰陽圖和五角星【任務描述】 網(wǎng)頁0803.html中CSS3繪制的陰陽圖和五角星的瀏覽效果如圖8-6所示。圖8-6網(wǎng)頁0803.html中CSS3

繪制的陰陽圖和五角星的瀏覽效果【任務實施】 在本地硬盤的文件夾“08復雜樣式與網(wǎng)頁特效設計\0803”中創(chuàng)建網(wǎng)頁0803.html。1．定義網(wǎng)頁0803.html的CSS代碼2．編寫網(wǎng)頁0803.html的HTML代碼【任務8-4】網(wǎng)頁中制作圓角按鈕和圓角圖片【任務描述】 網(wǎng)頁080401.html中制作的圓角漸變效果網(wǎng)頁按鈕的瀏覽效果如圖8-7所示。圖8-7網(wǎng)頁080401.html中制作的圓角漸變效果網(wǎng)頁按鈕的瀏覽效果圖8-8網(wǎng)頁080402.html中制作的圓角圖片和圖形圖片的瀏覽效果【任務實施】 在本地硬盤的文件夾“08復雜樣式與網(wǎng) 頁特效設計\0804”中創(chuàng)建網(wǎng)頁080401.html和080402.html。1．定義網(wǎng)頁080401.html的CSS代碼2．編寫網(wǎng)頁080401.html的HTML代碼3．定義網(wǎng)頁080402.html的CSS代碼4．編寫網(wǎng)頁080402.html的HTML代碼【任務8-5】設計網(wǎng)頁中的圓形導航按鈕【任務描述】 網(wǎng)頁0805.html中圓形導航按鈕的瀏覽效果如圖8-9所示。圖8-9網(wǎng)頁0805.html中圓形

導航按鈕的瀏覽效果【任務實施】 在本地硬盤的文件夾“08復雜樣式與網(wǎng)頁特效設計\0805”中創(chuàng)建網(wǎng)頁0805.html。1．定義網(wǎng)頁0805.html的CSS代碼2．編寫網(wǎng)頁0805.html的HTML代碼【任務8-6】網(wǎng)頁中實現(xiàn)圖片拖動操作【任務描述】 網(wǎng)頁0806.html的初始瀏覽效果如圖8-10所示。 在網(wǎng)頁0806.html中將圖片源的兩張圖片拖到目的地后的效果如圖8-11所示。圖8-10網(wǎng)頁0807.html的初始瀏覽效果圖8-11網(wǎng)頁0807.html中將圖片源的

兩張圖片拖到目的地后的效果【任務實施】 在本地硬盤的文件夾“08復雜樣式與網(wǎng)頁特效設計\0806”中創(chuàng)建網(wǎng)頁0806.html。 1．定義網(wǎng)頁0806.html的CSS代碼 2．編寫網(wǎng)頁0806.html的HTML代碼 3．編寫網(wǎng)頁0806.html的JavaScript代碼實現(xiàn)圖片拖動功能【任務8-7】網(wǎng)頁中實現(xiàn)仿Office風格的多級菜單【任務描述】 網(wǎng)頁0807.html中實現(xiàn)仿Office風格的多級菜單的瀏覽效果如圖8-12所示。圖8-12網(wǎng)頁0807.html中實現(xiàn)仿Office風格的多級菜單的瀏覽效果【任務實施】 在本地硬盤的文件夾“08復雜樣式與網(wǎng)頁特效設計\0808”中創(chuàng)建網(wǎng)頁0807.html。1．定義網(wǎng)頁0807.html的CSS代碼2．編寫網(wǎng)頁0807.html的HTML代碼同步訓練【任務8-8】網(wǎng)頁中繪制各種幾何圖形【任務描述】 網(wǎng)頁0808.html中各種幾何圖形的瀏覽效果如圖8-13所示。圖8-13網(wǎng)頁0808.html中各種

幾何圖形的瀏覽效果【任務實施】 在本地硬盤的文件夾“08復雜樣式與網(wǎng)頁特效設計\0808”中創(chuàng)建網(wǎng)頁0808.html。1．定義網(wǎng)頁0808.html的CSS代碼2．編寫網(wǎng)頁0808.html的HTML代碼【任務8-9】網(wǎng)頁中實現(xiàn)超酷導航菜單【任務描述】 網(wǎng)頁0809.html中超酷導航菜單的瀏覽效果如圖8-14所示。圖8-14網(wǎng)頁0809.html中超酷導航菜單的瀏覽效果【任務實施】 在本地硬盤的文件夾“08復雜樣式與網(wǎng)頁特效設計\0809”中創(chuàng)建網(wǎng)頁0809.html。1．定義網(wǎng)頁0809.html的CSS代碼2．編寫網(wǎng)頁0809.html的HTML代碼【任務8-10】網(wǎng)頁中模仿蘋果iPhone的搜索框聚焦變長效果【任務描述】 網(wǎng)頁0810.html瀏覽時搜索框的初始效果如圖8-15所示。 網(wǎng)頁中搜索框獲取焦點時變長效果如圖8-16所示。圖8-15網(wǎng)頁0810.html瀏覽時搜索框的初始效果圖8-16網(wǎng)頁中搜索框獲取焦點時的變長效果【任務實施】 在本地硬盤的文件夾“08復雜樣式與網(wǎng)頁特效設計\0810”中創(chuàng)建網(wǎng)頁0810.html。1．定義網(wǎng)頁0810.html的CSS代碼2．編寫網(wǎng)頁0810.html的HTML代碼【任務8-11】網(wǎng)頁中實現(xiàn)拖動選擇多張景點圖片【任務描述】 網(wǎng)頁0811.html的初始瀏覽效果如圖8-17所示。圖8-17網(wǎng)頁0811.html的初始瀏覽效果圖8-18網(wǎng)頁0811.html中將景點圖片源的4張圖片拖到目的地后的效果【任務實施】 在本地硬盤的文件夾“08復雜樣式與網(wǎng)頁特效設計\0811”中創(chuàng)建網(wǎng)頁0811.html。 1．定義網(wǎng)頁0811.html的CSS代碼 2．編寫網(wǎng)頁0811.html的HTML代碼 3．編寫網(wǎng)頁0811.html的JavaScript代碼實現(xiàn)景點圖片拖動功能拓展訓練【任務8-12】網(wǎng)頁中實現(xiàn)相冊效果【任務描述】 網(wǎng)頁0812.html中相冊的瀏覽效果如圖8-19所示。【操作提示】（1）網(wǎng)頁0812.html的HTML代碼編寫提示（2）定義網(wǎng)頁0812.html的CSS代碼圖8-19網(wǎng)頁0812.html中相冊的瀏覽效果圖8-19網(wǎng)頁0812.html中相冊的瀏覽效果【任務8-13】網(wǎng)頁中實現(xiàn)帶有字體圖標效果的下拉導航