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

前言
第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)
1.1 網(wǎng)頁(yè)相關(guān)知識(shí)簡(jiǎn)介
1.1.1 互聯(lián)網(wǎng)、因特網(wǎng)、萬(wàn)維網(wǎng)
1.1.2 網(wǎng)站、網(wǎng)頁(yè)和主頁(yè)
1.1.3 瀏覽器
1.1.4 統(tǒng)一資源定位器
1.2 網(wǎng)頁(yè)的基本元素
1.2.1 網(wǎng)頁(yè)的組成元素
1.2.2 網(wǎng)頁(yè)的構(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è)計(jì)和制作各級(jí)頁(yè)面
1.3.6 申請(qǐng)空間和域名
1.3.7 測(cè)試和發(fā)布網(wǎng)站
1.3.8 網(wǎng)站的推廣與維護(hù)
1.4 網(wǎng)頁(yè)的版式布局
1.4.1 網(wǎng)頁(yè)布局原則
1.4.2 常見的版式布局形式
1.5 網(wǎng)頁(yè)色彩搭配
1.6 網(wǎng)頁(yè)設(shè)計(jì)的原則和成功要素
1.7 認(rèn)識(shí)HTML和CSS
習(xí)題
第2章 HTML基礎(chǔ)
2.1 認(rèn)識(shí)HTML
2.2 HTML文檔的基本結(jié)構(gòu)
2.3 HTML文件的編寫和查看
2.3.1 HTML文件的編寫和查看
2.3.2 HTML文件的命名
2.4 HTML基本語(yǔ)法
2.4.1 HTML標(biāo)記
2.4.2 HTML屬性
2.4.3 全局屬性
2.5 HTML文件頭部?jī)?nèi)容
2.5.1 設(shè)置頁(yè)面標(biāo)題
2.5.2 定義元數(shù)據(jù)
2.5.3 常用元數(shù)據(jù)
2.6 HTML文件主體內(nèi)容
2.7 綜合案例——最基本的HTML5網(wǎng)頁(yè)
習(xí)題
第3章 文字與段落
3.1 編輯內(nèi)容
3.1.1 添加普通文字
3.1.2 添加特殊符號(hào)
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 語(yǔ)義化、結(jié)構(gòu)化的文本
3.4.1 文字上下標(biāo)/
3.4.2 注音顯示//
3.4.3 標(biāo)注
3.4.4 定義日期時(shí)間
3.4.5 其他語(yǔ)義化、結(jié)構(gòu)化文本
3.5 列表
3.5.1 無(wú)序列表
3.5.2 有序列表
3.5.3 定義列表//
3.5.4 嵌套列表
3.6 綜合實(shí)例——簡(jiǎn)單文字網(wǎng)頁(yè)
習(xí)題
第4章 網(wǎng)頁(yè)圖像和多媒體元素
4.1 圖像、視頻和音頻的格式
4.1.1 網(wǎng)頁(yè)圖像的格式
4.1.2 視頻格式
4.1.3 音頻格式
4.2 在網(wǎng)頁(yè)中加入圖像
4.2.1 圖像資源屬性——src屬性
4.2.2 圖像替代文本——alt屬性
4.2.3 圖像的寬高——width和height屬性
4.3 在網(wǎng)頁(yè)中加入視頻
4.3.1 視頻資源屬性——src屬性
4.3.2 視頻播放控件屬性——controls屬性
4.3.3 視頻準(zhǔn)備播放控件——preload
4.3.4 的其他屬性
4.3.5 與的配合使用
4.4 在網(wǎng)頁(yè)中加入音頻
4.5 插入多媒體文件
4.5.1 插入Flash動(dòng)畫
4.5.2 插入視頻
4.5.3 插入音頻
4.6 鏈入對(duì)象
4.7 定義媒介分組和標(biāo)題/
4.8 綜合實(shí)例——多媒體頁(yè)面的設(shè)計(jì)
習(xí)題
第5章 超鏈接
5.1 超鏈接概述
5.2 超鏈接的路徑
5.2.1 絕對(duì)路徑
5.2.2 相對(duì)路徑
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 浮動(dòng)窗口及其鏈接
5.6.1 浮動(dòng)窗口
5.6.2 鏈接浮動(dòng)窗口
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 表單高級(jí)元素使用
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è)計(jì)
習(xí)題
第8章 CSS語(yǔ)法基礎(chǔ)
8.1 CSS介紹
8.1.1 CSS概述
8.1.2 CSS3
8.2 CSS的基本語(yǔ)法
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 偽對(duì)象選擇符
8.5.3 組合選擇符
8.5.4 關(guān)系選擇符
8.5.5 屬性選擇符
8.6 綜合案例——CSS的簡(jiǎn)單應(yīng)用
習(xí)題
第9章 CSS字體與段落
9.1 顏色color
9.2 字體屬性
9.2.1 設(shè)置字體font-family
9.2.2 設(shè)置字號(hào)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 文本高級(jí)樣式
9.3.1 行高line-height
9.3.2 文本縮進(jìn)text-indent
9.3.3 水平對(duì)齊方式text-align
9.3.4 垂直對(duì)齊方式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í)例——簡(jiǎn)單圖文混排網(wǎng)頁(yè)
習(xí)題
第10章 CSS盒子
10.1 基本的盒子BOX概念
10.1.1 盒子的基本形式
10.1.2 盒子大小的計(jì)算width/height
10.1.3 改變盒子大小的計(jì)算方式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 綜合案例——簡(jiǎn)單地產(chǎn)網(wǎng)頁(yè)
習(xí)題
第11章 CSS顏色和背景
11.1 背景顏色
11.1.1 網(wǎng)頁(yè)背景顏色background-color
11.1.2 用背景色給頁(yè)面分塊
11.2 背景圖像
11.2.1 頁(yè)面背景圖像background-image
11.2.2 背景圖像重復(fù)background-repeat
11.2.3 背景圖像滾動(dòng)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美化其他頁(yè)面元素
12.1 超鏈接特效
12.1.1 超鏈接樣式變換
12.1.2 按鈕式超鏈接
12.2 鼠標(biāo)特效
12.2.1 鼠標(biāo)指針形狀
12.2.2 鼠標(biāo)變換的超鏈接
12.3 項(xiàng)目列表
12.3.1 列表符號(hào)list-style-type
12.3.2 圖片符號(hào)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 頁(yè)面布局設(shè)計(jì)
13.5.2 標(biāo)題欄的設(shè)計(jì)
13.5.3 題目區(qū)的設(shè)計(jì)
第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 浮動(dòng)——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 綜合案例——頁(yè)面分塊布局
習(xí)題
第15章 DIV+CSS布局
15.1 CSS排版概念
15.1.1 將頁(yè)面用div分塊
15.1.2 設(shè)計(jì)各分塊位置
15.1.3 設(shè)計(jì)各分塊細(xì)節(jié)
15.2 頁(yè)面布局方式
15.2.1 上中下結(jié)構(gòu)布局
15.2.2 左右結(jié)構(gòu)布局
15.2.3 “國(guó)”字形結(jié)構(gòu)
15.2.4 隱藏布局
15.3 各種布局版式
15.3.1 骨骼型版式
15.3.2 對(duì)稱型版式
15.3.3 滿版型版式
15.3.4 其他版式
15.4 綜合案例——DIV+CSS布局綜合應(yīng)用
15.4.1 首頁(yè)設(shè)計(jì)
15.4.2 詳細(xì)頁(yè)面設(shè)計(jì)
習(xí)題
第16章 網(wǎng)頁(yè)編輯工具Dreamweaver
16.1 Dreamweaver工具介紹
16.1.1 Dreamweaver軟件概述
16.1.2 DreamweaverCS5.5軟件介紹
16.1.3 Dreamweaver的工作流程
16.2 使用Dreamweaver設(shè)計(jì)網(wǎng)頁(yè)
16.2.1 創(chuàng)建站點(diǎn)和組織站點(diǎn)結(jié)構(gòu)
16.2.2 設(shè)計(jì)并創(chuàng)建網(wǎng)頁(yè)
16.3 使用Dreamweaver設(shè)定CSS樣式
16.3.1 CSS樣式在Dreamweaver中設(shè)定的基礎(chǔ)知識(shí)
16.3.2 CSS樣式的創(chuàng)建和應(yīng)用案例
16.4 使用Dreamweaver編碼
16.4.1 使用Dreamweaver對(duì)網(wǎng)頁(yè)編碼的常識(shí)
16.4.2 使用Dreamweaver編碼的編輯思路
16.4.3 使用Dreamweaver編碼的案例
16.5 綜合實(shí)例——使用Dreamweaver制作網(wǎng)頁(yè)
16.5.1 規(guī)劃和設(shè)置站點(diǎn)
16.5.2 設(shè)計(jì)網(wǎng)頁(yè)布局
16.5.3 添加頁(yè)面內(nèi)容
16.5.4 通過(guò)手動(dòng)編碼創(chuàng)建頁(yè)面
16.5.5 測(cè)試和發(fā)布
習(xí)題
第17章 綜合案例——寶貝花園
17.1 網(wǎng)頁(yè)布局概述
17.2 首頁(yè)的設(shè)計(jì)
17.3 主標(biāo)題區(qū)
17.3.1 網(wǎng)頁(yè)首部
17.3.2 標(biāo)題新聞區(qū)
17.4 主內(nèi)容區(qū)
17.4.1 滾動(dòng)字幕區(qū)
17.4.2 主內(nèi)容區(qū)
17.5 頁(yè)尾區(qū)
17.6 內(nèi)容頁(yè)的設(shè)計(jì)
17.7 聯(lián)系頁(yè)面的設(shè)計(jì)
17.7.1 頁(yè)面布局
17.7.2 左側(cè)欄
17.7.3 右側(cè)欄
第18章 綜合案例——購(gòu)物網(wǎng)站
18.1 首頁(yè)設(shè)計(jì)
18.1.1 首頁(yè)頁(yè)面布局
18.1.2 首頁(yè)頭部設(shè)計(jì)
18.1.3 主體部分設(shè)計(jì)
18.1.4 腳注部分設(shè)計(jì)
18.2 內(nèi)容頁(yè)設(shè)計(jì)
18.2.1 商品分類信息頁(yè)
18.2.2 單類商品信息頁(yè)
第19章 綜合案例——中秋節(jié)網(wǎng)站
19.1 節(jié)日類網(wǎng)站設(shè)計(jì)分析
19.2 實(shí)例制作——中秋節(jié)網(wǎng)站設(shè)計(jì)
19.2.1 中秋節(jié)網(wǎng)站策劃
19.2.2 主頁(yè)和內(nèi)頁(yè)效果
19.2.3 網(wǎng)站主頁(yè)的設(shè)計(jì)
19.2.4 網(wǎng)站內(nèi)頁(yè)的設(shè)計(jì)