HTML5網頁設計案例課堂

第1篇 基礎知識
第1章初識HTML5
1.1 HTML5簡介
1.1.1HTML5簡介
1.1.2 HTML5文件的基本結構
1.2 HTML5文件的編寫方法
1.2.1案例1——手工編寫HTML5
1.2.2案例2——使用HTML編輯器
1.3使用瀏覽器查看HTML5文件
1.3.1各大瀏覽器與HTML5的兼容
1.3.2案例3——查看頁面效果
1.3.3案例4——查看源文件
1.4跟我練練手
1.4.1練習目標
1.4.2上機練習
1.5高手甜點
第2章HTML5網頁文檔結構
2.1 Web標准
2.1.1 Web標准概述
2.1.2 Web標准規定的內容
2.2 HTML5文檔的基本結構
2.2.1文檔類型說明
2.2.2 HTML5標記＜HTML＞
2.2.3頭標記＜HEAD＞
2.2.4網頁的主體標記＜BODY＞
2.2.5頁面注釋標記＜！—— ——＞
2.3綜合案例——符合W3C標准的HTML5網頁制作
2.4跟我練練手
2.4.1練習目標
2.4.2上機練習
2.5高手甜點
第3章HTML5與HTML4的區別
3.1新增的主體結構元素
3.1.1案例1——section素的使用
3.1.2案例2——article元素的使用
3.1.3案例3——aside元素的使用
3.1.4案例4——nav元素的使用
3.1.5案例5——time元素的使用
3.2新增的非主體結構元素
3.2.1案例6——header元素的使用
3.2.2案例7——hgroup元素的使用
3.2.3案例8——footer元素的使用
3.2.4案例9——figure元素的使用
3.2.5案例10——address元素的使用
3.3新增其他常用元素
3.3.1案例11——mark元素的使用
3.3.2案例12——rp元素、rt元素與ruby元素的使用
3.3.3案例13——progress元素的使用
3.3.4案例14——command元素的使用
3.3.5案例15——embed元素的使用
3.3.6案例16—details元素與summary元素的使用
3.3.7案例17—datalist元素的使用
3.4新增全局屬性
3.4.1案例18—contentEditable屬性的使用
3.4.2案例19—spellcheck屬性的使用
3.4.3案例20—tablndex屬性的使用
3.5新增的其他屬性
3.5.1案例21—表單相關屬性的使用
3.5.2案例22—鏈接相關屬性的使用昏
3.5.3案例23—其他屬性的使用
3.6 HTML5廢除的屬性
3.7跟我練練手
3.7.1練習目標
3.7.2上機練習
3.8高手甜點

第2篇 核心技術
第4章設計網頁文本內容
4.1標題文字的建立
4.1.1案例1—標題文字標記
4.1.2案例2—標題文字的對齊方式
4.2設置文字格式
4.2.1案例3—設置文字字體
4.2.2案例4—設置字號
4.2.3案例5—設置文字顏色
4.2.4案例6—設置粗體、斜體、下划線
4.2.5案例7—設置上標與下標
4.2.6案例8—設置字體風格
4.2.7案例9—設置加粗字體
4.2.8案例10—設置字體復合屬性
4.2.9案例11—設置陰影文本
4.2.10案例12——謐制換行
4.3設置段落格式
4.3.1案例13—設置段落標記
4.3.2案例14—設置換行標記
4.4設置網頁水平線
4.4.1案例15—添加水平線
4.4.2案例16—設置水平線的寬度與高度
4.4.3案例17—設置水平線的顏色
4.4.4案例18—設置水平線的對齊方式
4.4.5案例19—去掉水平線陰影
4.5綜合案例——成才教育網文本設計
4.6跟我練練手
4.6.1練習目標
4.6.2上機練習
4.7高手甜點
第5章網頁列表與段落設計
5.1網頁文字列表設計
5.1.1案例1—建立無序列表＜ul＞
5.1.2案例2—建立有序列表＜ol＞
5.1.3案例3—建立不同類型的無序列表
5.1.4案例4—建立不同類型的有序列表
5.1.5案例5—嵌套列表
5.1.6案例6—自定義列表＜dl＞
5.2網頁段落格式的設計
5.2.1案例7—設計單詞間隔word—spacing
5.2.2案例8—設計字符間隔letter—spacing
5.2.3案例9—設計文字修飾text—decoration
5.2.4案例10—設計垂直對齊方式venical—align
5.2.5案例11—設計文本轉換text—transform
5.2.6案例12—設計水平對齊方式text—align
5.2.7案例13—設計文本縮進text—indent
5.2.8案例14—設計文本行高line—height
5.2.9案例15—處理空白white—space
5.2.10案例16—文本反排Ulucode—bidi
5.3綜合案例——制作圖文混排型旅游網頁
5.4跟我練練手
5.4.1練習目標
5.4.2上機練習
5.5高手甜點
第6章HTML5網頁中的圖像
6.1網頁中的圖像＜img＞
6.1.1網頁中支持的圖片格式
6.1.2圖像中的路徑
6.2在網頁中插入圖像
6.2.1案例1—插入圖像
6.2.2案例2—從不同位置插入圖像
6.3編輯網頁中的圖像
6.3.1案例3—設置圖像的寬度和高度
6.3.2案例4—設置圖像的提示文字
6.3.3案例5—將圖片設置為網頁背景
6.3.4案例6—排列圖像
6.4實戰演練——圖文並茂房屋裝飾裝修網頁
6.5跟我練練手
6.5.1練習目標
6.5.2上機練習
6.6高手甜點
第7章使用HTML5建立超鏈接
7.1網頁超鏈接的概念
7.1.1什麼是網頁超鏈接
7.1.2超鏈接中的URL
7.1.3超鏈接的URL類型
7.2建立網頁超級鏈接
7.2.1案例1—創建超文本鏈接
7.2.2案例2—創建圖片鏈接
7.2.3案例3——創建下載鏈接
7.2.4案例4—使用相對路徑和絕對路徑
7.2.5案例5—設置以新窗口顯示超鏈接頁面
7.2.6案例6—設置電子郵件鏈接
7.3案例7—浮動框架iframe的使用
7.4案例8—精確定位熱點區域
7.5綜合案例——使用錨鏈接制作電子書閱讀網頁
7.6跟我練練手
7.6.1練習目標
7.6.2上機練習
7.7高手甜點
第8章使用HTML5創建表單
8.1案例1—認識表單
8.2表單基本元素的使用
8.2.1案例2—單行文本輸入框text的使用
8.2.2案例3—多行文本輸入框textarea的使用1
8.2.3案例4—密碼域password的使用
8.2.4案例5—單選按鈕radio的使用
8.2.5案例6—復選框checkbox的使用
8.2.6案例7—下拉列表框select的使用
8.2.7案例8—普通按鈕button的使用
8.2.8案例9——提交按鈕submit的使用
8.2.9案例10—重置按鈕reset的使用
8.3表單高級元素的使用
8.3.1案例11—url屬性的應用
8.3.2案例12—email屬性的應用
8.3.3案例13—date屬性和times屬性的應用
8.3.4案例14—number屬性的應用
8.3.5案例15—range屬性的應用
8.3.6案例16—required屬性的應用
8.4綜合案例——創建用戶反饋表單1
8.5跟我練練手
8.5.1練習目標
8.5.2上機練習
8.6高手甜點
第9章使用HTML5創建表格
9.1表格的基本結構
9.2使用HTML5創建表格
9.2.1案例1—創建普通表格
9.2.2案例2—創建一個帶有標題的表格
9.2.3案例3—定義表格的邊框類型
9.2.4案例4—定義表格的表頭
9.2.5案例5—設置表格背景
9.2.6案例6—設置單元格背景
9.2.7案例7—合並單元格
9.2.8案例8—排列單元格中的內容
9.2.9案例9—設置單元格的行高與列寬
9.3案例10—創建完整的表格
9.4綜合案例——制作商品報價表
9.5跟我練練手
9.5.1練習目標
9.5.2上機練習
9.6高手甜點
第10章HTML5中的多媒體
第11章使用HTML5繪制圖形
第12章HTML5中的文件與拖放

第3篇 高級應用
第4篇項目案例實戰