HTML5+CSS3網(wǎng)頁設(shè)計案例教程

前言
第1章 網(wǎng)頁設(shè)計基礎(chǔ)知識
1.1 網(wǎng)頁相關(guān)知識簡介
1.1.1 互聯(lián)網(wǎng)、因特網(wǎng)、萬維網(wǎng)
1.1.2 網(wǎng)站、網(wǎng)頁和主頁
1.1.3 瀏覽器
1.1.4 統(tǒng)一資源定位器
1.2 網(wǎng)頁的基本元素
1.2.1 網(wǎng)頁的組成元素
1.2.2 網(wǎng)頁的構(gòu)成要素
1.3 網(wǎng)站建設(shè)流程
1.3.1 網(wǎng)站需求分析
1.3.2 網(wǎng)站規(guī)劃
1.3.3 創(chuàng)建本地站點(diǎn)
1.3.4 組織站點(diǎn)結(jié)構(gòu)
1.3.5 設(shè)計和制作各級頁面
1.3.6 申請空間和域名
1.3.7 測試和發(fā)布網(wǎng)站
1.3.8 網(wǎng)站的推廣與維護(hù)
1.4 網(wǎng)頁的版式布局
1.4.1 網(wǎng)頁布局原則
1.4.2 常見的版式布局形式
1.5 網(wǎng)頁色彩搭配
1.6 網(wǎng)頁設(shè)計的原則和成功要素
1.7 認(rèn)識HTML和CSS
習(xí)題
第2章 HTML基礎(chǔ)
2.1 認(rèn)識HTML
2.2 HTML文檔的基本結(jié)構(gòu)
2.3 HTML文件的編寫和查看
2.3.1 HTML文件的編寫和查看
2.3.2 HTML文件的命名
2.4 HTML基本語法
2.4.1 HTML標(biāo)記
2.4.2 HTML屬性
2.4.3 全局屬性
2.5 HTML文件頭部內(nèi)容
2.5.1 設(shè)置頁面標(biāo)題
2.5.2 定義元數(shù)據(jù)
2.5.3 常用元數(shù)據(jù)
2.6 HTML文件主體內(nèi)容
2.7 綜合案例——最基本的HTML5網(wǎng)頁
習(xí)題
第3章 文字與段落
3.1 編輯內(nèi)容
3.1.1 添加普通文字
3.1.2 添加特殊符號
3.1.3 添加注釋
3.2 文字排版
3.2.1 控制換行
3.2.2 預(yù)先格式化
3.2.3 段落
3.2.4 加入水平線
3.2.5 標(biāo)題文字-
3.3 強(qiáng)調(diào)文本
3.3.1 設(shè)置粗體和斜體/
3.3.2 標(biāo)記文本改變/
3.3.3 小型文本
3.4 語義化、結(jié)構(gòu)化的文本
3.4.1 文字上下標(biāo)/
3.4.2 注音顯示//
3.4.3 標(biāo)注
3.4.4 定義日期時間
3.4.5 其他語義化、結(jié)構(gòu)化文本
3.5 列表
3.5.1 無序列表
3.5.2 有序列表
3.5.3 定義列表//
3.5.4 嵌套列表
3.6 綜合實(shí)例——簡單文字網(wǎng)頁
習(xí)題
第4章 網(wǎng)頁圖像和多媒體元素
4.1 圖像、視頻和音頻的格式
4.1.1 網(wǎng)頁圖像的格式
4.1.2 視頻格式
4.1.3 音頻格式
4.2 在網(wǎng)頁中加入圖像
4.2.1 圖像資源屬性——src屬性
4.2.2 圖像替代文本——alt屬性
4.2.3 圖像的寬高——width和height屬性
4.3 在網(wǎng)頁中加入視頻
4.3.1 視頻資源屬性——src屬性
4.3.2 視頻播放控件屬性——controls屬性
4.3.3 視頻準(zhǔn)備播放控件——preload
4.3.4 的其他屬性
4.3.5 與的配合使用
4.4 在網(wǎng)頁中加入音頻
4.5 插入多媒體文件
4.5.1 插入Flash動畫
4.5.2 插入視頻
4.5.3 插入音頻
4.6 鏈入對象
4.7 定義媒介分組和標(biāo)題/
4.8 綜合實(shí)例——多媒體頁面的設(shè)計
習(xí)題
第5章 超鏈接
5.1 超鏈接概述
5.2 超鏈接的路徑
5.2.1 絕對路徑
5.2.2 相對路徑
5.2.3 根路徑
5.3 超鏈接的建立
5.3.1 插入外部鏈接
5.3.2 插入內(nèi)部鏈接
5.3.3 以圖像為源點(diǎn)的鏈接
5.3.4 鏈接打開目標(biāo)target屬性
5.3.5 鏈接的其他屬性
5.3.6 鏈接的目標(biāo)類型
5.3.7 Email鏈接
5.4 錨記(書簽)鏈接
5.5 設(shè)置圖像映射
5.5.1 了解熱區(qū)和圖像映射
5.5.2 創(chuàng)建圖像映射/
5.6 浮動窗口及其鏈接
5.6.1 浮動窗口
5.6.2 鏈接浮動窗口
5.7 定義基準(zhǔn)網(wǎng)址
5.8 綜合實(shí)例——設(shè)置超鏈接
習(xí)題
第6章 表格的應(yīng)用
6.1 表格概述
6.2 創(chuàng)建表格
6.2.1 表格基本結(jié)構(gòu)///
6.2.2 表格邊框顯示——border屬性
6.2.3 標(biāo)記的使用
6.2.4 表格標(biāo)題
6.3 合并單元格
6.3.1 設(shè)置跨列——colspan
6.3.2 設(shè)置跨行——rowspan
6.4 表格嵌套
6.5 表格的按行分組顯示//
6.6 綜合實(shí)例——表格應(yīng)用
6.6.1 表格顯示數(shù)據(jù)
6.6.2 使用表格布局
習(xí)題
第7章 表單
7.1 表單概述
7.2 建立表單
7.3 表單控件
7.3.1 文本框和密碼框
7.3.2 提交按鈕、重置按鈕和普通按鈕
7.3.3 單選按鈕
7.3.4 復(fù)選框
7.3.5 文件域
7.3.6 圖像域
7.3.7 多行文字框
7.3.8 列表
7.4 表單高級元素使用
7.4.1 url屬性
7.4.2 email屬性
7.4.3 date和Times
7.4.4 number屬性
7.4.5 range屬性
7.4.6 color屬性
7.4.7 fieldset控件組
7.4.8 其他類型的輸入表單控件
7.5 通用的表單屬性
7.5.1 表單重寫屬性
7.5.2 form屬性
7.5.3 autofocus屬性
7.5.4 multiple屬性
7.5.5 placeholder屬性
7.5.6 required屬性
7.5.7 pattern屬性
7.6 綜合實(shí)例——表單設(shè)計
習(xí)題
第8章 CSS語法基礎(chǔ)
8.1 CSS介紹
8.1.1 CSS概述
8.1.2 CSS3
8.2 CSS的基本語法
8.3 在HTML文檔中使用CSS的方法
8.3.1 行內(nèi)樣式
8.3.2 內(nèi)嵌樣式
8.3.3 鏈接外部樣式
8.3.4 導(dǎo)入外部樣式
8.4 CSS元素選擇符
8.4.1 標(biāo)記選擇符
8.4.2 通用選擇符
8.4.3 類選擇符
8.4.4 id選擇符
8.5 其他CSS選擇符
8.5.1 偽類選擇符
8.5.2 偽對象選擇符
8.5.3 組合選擇符
8.5.4 關(guān)系選擇符
8.5.5 屬性選擇符
8.6 綜合案例——CSS的簡單應(yīng)用
習(xí)題
第9章 CSS字體與段落
9.1 顏色color
9.2 字體屬性
9.2.1 設(shè)置字體font-family
9.2.2 設(shè)置字號font-size
9.2.3 設(shè)置字體風(fēng)格font-style
9.2.4 設(shè)置字體加粗font-weight
9.2.5 設(shè)置小型大寫字母font-variant
9.2.6 字體復(fù)合屬性font
9.3 文本高級樣式
9.3.1 行高line-height
9.3.2 文本縮進(jìn)text-indent
9.3.3 水平對齊方式text-align
9.3.4 垂直對齊方式vertical-align
9.3.5 大小寫text-transform
9.3.6 單詞間距word-spacing
9.3.7 字符間隔letter-spacing
9.3.8 文本修飾text-decoration
9.3.9 文本陰影text-shadow
9.4 綜合實(shí)例——簡單圖文混排網(wǎng)頁
習(xí)題
第10章 CSS盒子
10.1 基本的盒子BOX概念
10.1.1 盒子的基本形式
10.1.2 盒子大小的計算width/height
10.1.3 改變盒子大小的計算方式box-sizing
10.2 基本邊框?qū)傩?br />10.2.1 邊框樣式
10.2.2 邊框線寬
10.2.3 邊框顏色
10.2.4 邊框復(fù)合屬性
10.3 補(bǔ)白
10.3.1 內(nèi)補(bǔ)白
10.3.2 外補(bǔ)白
10.4 其他邊框?qū)傩?br />10.4.1 圓角邊框
10.4.2 圖像邊框
10.4.3 盒子陰影box-shadow
10.4.4 BOX線條外廓
10.5 綜合案例——簡單地產(chǎn)網(wǎng)頁
習(xí)題
第11章 CSS顏色和背景
11.1 背景顏色
11.1.1 網(wǎng)頁背景顏色background-color
11.1.2 用背景色給頁面分塊
11.2 背景圖像
11.2.1 頁面背景圖像background-image
11.2.2 背景圖像重復(fù)background-repeat
11.2.3 背景圖像滾動background-attachment
11.2.4 背景圖像位置background-position
11.2.5 背景顯示區(qū)域background-origin
11.2.6 背景圖像大小background-size
11.2.7 背景圖像裁剪區(qū)域background-clip
11.2.8 背景復(fù)合屬性background
11.3 定義透明度
11.4 綜合實(shí)例——設(shè)置背景
習(xí)題
第12章 CSS美化其他頁面元素
12.1 超鏈接特效
12.1.1 超鏈接樣式變換
12.1.2 按鈕式超鏈接
12.2 鼠標(biāo)特效
12.2.1 鼠標(biāo)指針形狀
12.2.2 鼠標(biāo)變換的超鏈接
12.3 項目列表
12.3.1 列表符號list-style-type
12.3.2 圖片符號list-style-image
12.3.3 列表位置list-style-position
12.3.4 列表綜合設(shè)置list-style
12.3.5 使用列表制作菜單
12.3.6 下拉菜單
12.4 綜合實(shí)例——Tab菜單
習(xí)題
第13章 用CSS美化表格與表單
13.1 表格的基本樣式
13.1.1 表格邊框樣式
13.1.2 表格顏色
13.1.3 盒子陰影
13.2 和
13.2.1 標(biāo)記
13.2.2 標(biāo)記
13.2.3 分組
13.2.4 和組合應(yīng)用
13.3 表格綜合實(shí)例
13.4 CSS美化表單
13.4.1 美化表單元素邊框
13.4.2 美化表單元素顏色
13.4.3 美化表單元素背景圖像
13.4.4 按鈕樣式
13.5 表格表單綜合實(shí)例——調(diào)查問卷
13.5.1 頁面布局設(shè)計
13.5.2 標(biāo)題欄的設(shè)計
13.5.3 題目區(qū)的設(shè)計
第14章 CSS定位、布局與分欄
14.1 理解CSS定位與div布局
14.1.1
14.1.2
14.2 CSS元素的定位
14.2.1 定位方式——position
14.2.2 設(shè)置位置——top、bottom、right、left
14.2.3 堆疊次序——z-index
14.3 CSS布局屬性
14.3.1 可見性——visibility
14.3.2 剪裁——clip
14.3.3 溢出——overflow
14.3.4 浮動——float
14.3.5 清除——clear
14.4 CSS分欄
14.4.1 列——columns
14.4.2 平衡列——column-fill
14.4.3 列間距——column-gap
14.4.4 列邊框樣式——column-rule
14.4.5 跨列樣式——column-span
14.5 綜合案例——頁面分塊布局
習(xí)題
第15章 DIV+CSS布局
15.1 CSS排版概念
15.1.1 將頁面用div分塊
15.1.2 設(shè)計各分塊位置
15.1.3 設(shè)計各分塊細(xì)節(jié)
15.2 頁面布局方式
15.2.1 上中下結(jié)構(gòu)布局
15.2.2 左右結(jié)構(gòu)布局
15.2.3 “國”字形結(jié)構(gòu)
15.2.4 隱藏布局
15.3 各種布局版式
15.3.1 骨骼型版式
15.3.2 對稱型版式
15.3.3 滿版型版式
15.3.4 其他版式
15.4 綜合案例——DIV+CSS布局綜合應(yīng)用
15.4.1 首頁設(shè)計
15.4.2 詳細(xì)頁面設(shè)計
習(xí)題
第16章 網(wǎng)頁編輯工具Dreamweaver
16.1 Dreamweaver工具介紹
16.1.1 Dreamweaver軟件概述
16.1.2 DreamweaverCS5.5軟件介紹
16.1.3 Dreamweaver的工作流程
16.2 使用Dreamweaver設(shè)計網(wǎng)頁
16.2.1 創(chuàng)建站點(diǎn)和組織站點(diǎn)結(jié)構(gòu)
16.2.2 設(shè)計并創(chuàng)建網(wǎng)頁
16.3 使用Dreamweaver設(shè)定CSS樣式
16.3.1 CSS樣式在Dreamweaver中設(shè)定的基礎(chǔ)知識
16.3.2 CSS樣式的創(chuàng)建和應(yīng)用案例
16.4 使用Dreamweaver編碼
16.4.1 使用Dreamweaver對網(wǎng)頁編碼的常識
16.4.2 使用Dreamweaver編碼的編輯思路
16.4.3 使用Dreamweaver編碼的案例
16.5 綜合實(shí)例——使用Dreamweaver制作網(wǎng)頁
16.5.1 規(guī)劃和設(shè)置站點(diǎn)
16.5.2 設(shè)計網(wǎng)頁布局
16.5.3 添加頁面內(nèi)容
16.5.4 通過手動編碼創(chuàng)建頁面
16.5.5 測試和發(fā)布
習(xí)題
第17章 綜合案例——寶貝花園
17.1 網(wǎng)頁布局概述
17.2 首頁的設(shè)計
17.3 主標(biāo)題區(qū)
17.3.1 網(wǎng)頁首部
17.3.2 標(biāo)題新聞區(qū)
17.4 主內(nèi)容區(qū)
17.4.1 滾動字幕區(qū)
17.4.2 主內(nèi)容區(qū)
17.5 頁尾區(qū)
17.6 內(nèi)容頁的設(shè)計
17.7 聯(lián)系頁面的設(shè)計
17.7.1 頁面布局
17.7.2 左側(cè)欄
17.7.3 右側(cè)欄
第18章 綜合案例——購物網(wǎng)站
18.1 首頁設(shè)計
18.1.1 首頁頁面布局
18.1.2 首頁頭部設(shè)計
18.1.3 主體部分設(shè)計
18.1.4 腳注部分設(shè)計
18.2 內(nèi)容頁設(shè)計
18.2.1 商品分類信息頁
18.2.2 單類商品信息頁
第19章 綜合案例——中秋節(jié)網(wǎng)站
19.1 節(jié)日類網(wǎng)站設(shè)計分析
19.2 實(shí)例制作——中秋節(jié)網(wǎng)站設(shè)計
19.2.1 中秋節(jié)網(wǎng)站策劃
19.2.2 主頁和內(nèi)頁效果
19.2.3 網(wǎng)站主頁的設(shè)計
19.2.4 網(wǎng)站內(nèi)頁的設(shè)計