HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程

第1章 網(wǎng)頁(yè)設(shè)計(jì)與策劃
1.1 網(wǎng)頁(yè)和網(wǎng)站
1.1.1 網(wǎng)頁(yè)和網(wǎng)站的概念
1.1.2 網(wǎng)頁(yè)的常用技術(shù)
1.2 網(wǎng)站開(kāi)發(fā)流程
1.2.1 前期策劃與組織
1.2.2 網(wǎng)頁(yè)效果圖的設(shè)計(jì)制作
1.2.3 網(wǎng)頁(yè)制作
1.2.4 網(wǎng)站測(cè)試與發(fā)布
1.3 常用網(wǎng)頁(yè)制作軟件
1.3.1 網(wǎng)頁(yè)圖形圖像處理工具
1.3.2 網(wǎng)站頁(yè)面的編輯工具
1.4 項(xiàng)目實(shí)戰(zhàn)：淮安蒸丞文化傳媒有限公司網(wǎng)站設(shè)計(jì)策劃
1.4.1 網(wǎng)站開(kāi)發(fā)需求
1.4.2 同類網(wǎng)站搜索
1.4.3 網(wǎng)站草圖繪制
1.4.4 建立站點(diǎn)
1.5 習(xí)題與項(xiàng)目實(shí)踐
第2章 網(wǎng)頁(yè)效果圖設(shè)計(jì)與制作
2.1 Photoshop 應(yīng)用基礎(chǔ)
2.1.1 認(rèn)識(shí)Photoshop CC界面
2.1.2 Photoshop CC的基本操作
2.1.3 圖層的相關(guān)應(yīng)用
2.1.4 圖層樣式的應(yīng)用
2.1.5 圖層混合模式的應(yīng)用
2.1.6 Photoshop CC的常用快捷鍵
2.1.7 案例：企業(yè)Logo設(shè)計(jì)
2.2 Photoshop CC高級(jí)應(yīng)用
2.2.1 通道的概念與使用技巧
2.2.2 蒙版的概念與使用技巧
2.3 項(xiàng)目實(shí)戰(zhàn)：淮安蒸丞文化傳媒有限公司網(wǎng)站效果圖制作
2.3.1 網(wǎng)站效果圖展示
2.3.2 網(wǎng)站首部與導(dǎo)航欄的制作
2.3.3 網(wǎng)站頂部的制作
2.3.4 公司簡(jiǎn)介的制作
2.3.5 行業(yè)資訊的制作
2.3.6 項(xiàng)目介紹的制作
2.3.7 經(jīng)典案例的制作
2.3.8 聯(lián)系我們的制作
2.3.9 版權(quán)信息的制作
2.4 習(xí)題與項(xiàng)目實(shí)踐
第3章 圖文混排頁(yè)面的實(shí)現(xiàn)
3.1 HTML5的簡(jiǎn)介
3.1.1 HTML5的發(fā)展史
3.1.2 HTML5的優(yōu)勢(shì)
3.1.3 HTML5的未來(lái)發(fā)展
3.1.4 瀏覽器介紹
3.2 HTML5基礎(chǔ)
3.2.1 HTML5基本結(jié)構(gòu)
3.2.2 HTML5的基本語(yǔ)法
3.3 文字與段落標(biāo)簽
3.3.1 標(biāo)題與段落標(biāo)簽
3.3.2 文本的格式化標(biāo)簽
3.3.3 特殊字符標(biāo)簽
3.4 列表標(biāo)簽
3.4.1 無(wú)序列表
3.4.2 有序列表
3.4.3 嵌套列表
3.4.4 定義列表
3.5 圖像標(biāo)簽
3.6 超級(jí)鏈接標(biāo)簽
3.7 表格標(biāo)簽
3.8 項(xiàng)目實(shí)戰(zhàn)：淮安蒸丞文化傳媒有限公司網(wǎng)站制作
3.8.1 案例效果展示
3.8.2 案例實(shí)現(xiàn)分析
3.8.3 案例實(shí)現(xiàn)過(guò)程
3.9 習(xí)題與項(xiàng)目實(shí)踐
第4章 HTML5文檔的實(shí)現(xiàn)
4.1 HTML5的元素分類
4.2 結(jié)構(gòu)性元素
4.2.1 認(rèn)識(shí)結(jié)構(gòu)性元素
4.2.2 標(biāo)簽
4.2.3 標(biāo)簽
4.2.4 標(biāo)簽
4.2.5 標(biāo)簽
4.2.6 標(biāo)簽
4.3 級(jí)塊性元素
4.3.1 標(biāo)簽
4.3.2 標(biāo)簽
4.4 行內(nèi)語(yǔ)義性元素
4.4.1 標(biāo)簽
4.4.2 標(biāo)簽
4.4.3 標(biāo)簽
4.5 交互性元素
4.5.1 標(biāo)簽和標(biāo)簽
4.5.2 標(biāo)簽與標(biāo)簽
4.6 多媒體對(duì)象的使用
4.6.1 視頻與音頻格式
4.6.2 插入視頻
4.6.3 插入音頻
4.7 項(xiàng)目實(shí)戰(zhàn)：淮安蒸丞文化傳媒有限公司網(wǎng)站HTML5頁(yè)面的編寫(xiě)
4.7.1 案例效果展示
4.7.2 案例實(shí)現(xiàn)分析
4.7.3 案例實(shí)現(xiàn)過(guò)程
4.8 習(xí)題與項(xiàng)目實(shí)踐
第5章 層疊樣式表的實(shí)現(xiàn)
5.1 CSS3的介紹
5.2 CSS樣式
5.2.1 CSS樣式設(shè)置規(guī)則
5.2.2 CSS樣式的引入方法
5.3 CSS基本選擇器
5.3.1 標(biāo)簽選擇器
5.3.2 類選擇器
5.3.3 id選擇器
5.3.4 通用選擇器
5.4 其他CSS選擇器
5.4.1 組合選擇器
5.4.2 屬性選擇器
5.4.3 結(jié)構(gòu)偽類選擇器
5.4.4 鏈接偽類選擇器
5.4.5 偽元素選擇器
5.5 CSS的繼承與層疊
5.5.1 CSS的繼承性
5.5.2 CSS的層疊性
5.6 項(xiàng)目實(shí)戰(zhàn)：淮安蒸丞文化傳媒有限公司網(wǎng)站導(dǎo)航欄等的制作
5.6.1 案例效果展示
5.6.2 案例實(shí)現(xiàn)分析
5.6.3 案例實(shí)現(xiàn)過(guò)程
5.7 習(xí)題與項(xiàng)目實(shí)踐
第6章 網(wǎng)頁(yè)美化效果的實(shí)現(xiàn)
6.1 文本樣式設(shè)置
6.1.1 設(shè)置CSS的字體屬性
6.1.2 文本屬性
6.2 列表樣式設(shè)置
6.2.1 列表符號(hào)
6.2.2 圖像符號(hào)
6.2.3 列表縮進(jìn)
6.2.4 復(fù)合屬性
6.3 背景樣式設(shè)置
6.3.1 背景的基本設(shè)置
6.3.2 CSS3新增的背景設(shè)置
6.4 項(xiàng)目實(shí)戰(zhàn)：蒸丞文化頁(yè)面“公司簡(jiǎn)介”與“版權(quán)信息”的美化
6.4.1 案例效果展示
6.4.2 案例實(shí)現(xiàn)分析
6.4.3 案例實(shí)現(xiàn)過(guò)程
6.5 習(xí)題與項(xiàng)目實(shí)踐
第7章 網(wǎng)頁(yè)布局的實(shí)現(xiàn)
7.1 盒子模型
7.2 盒子模型的常用屬性
7.2.1 邊框border屬性
7.2.2 邊距屬性
7.2.3 邊框其他屬性
7.3 浮動(dòng)與定位
7.3.1 元素的類型與轉(zhuǎn)換
7.3.2 浮動(dòng)屬性float
7.3.3 清除浮動(dòng)屬性clear
7.3.4 元素的定位
7.3.5 overflow溢出屬性
7.4 項(xiàng)目實(shí)戰(zhàn)：蒸丞文化頁(yè)面“行業(yè)資訊”模塊的制作
7.4.1 案例效果展示
7.4.2 案例實(shí)現(xiàn)分析
7.4.3 案例實(shí)現(xiàn)過(guò)程
7.5 習(xí)題與項(xiàng)目實(shí)踐
第8章 表單的實(shí)現(xiàn)
8.1 表單的概述
8.2 表單的建立
8.3 表單的基本元素
8.3.1 表單域
8.3.2 表單按鈕
8.4 表單新增元素
8.4.1 新增的表單元素
8.4.2 新增的表單屬性
8.5 項(xiàng)目實(shí)戰(zhàn)：蒸丞文化頁(yè)面“聯(lián)系我們”模塊的制作
8.5.1 案例效果展示
8.5.2 案例實(shí)現(xiàn)分析
8.5.3 案例實(shí)現(xiàn)過(guò)程
8.6 習(xí)題與項(xiàng)目實(shí)踐
第9章 利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果
9.1 CSS3轉(zhuǎn)換
9.1.1 transform簡(jiǎn)介
9.1.2 常用的transform變形方法
9.1.3 3D變形
9.2 transitions過(guò)渡
9.2.1 transitions功能介紹
9.2.2 過(guò)渡屬性的應(yīng)用
9.3 animation動(dòng)畫(huà)
9.3.1 動(dòng)畫(huà)的基本定義與調(diào)