DIV+CSS網(wǎng)站布局實(shí)錄

第1章 網(wǎng)頁(yè)和網(wǎng)站的基礎(chǔ)知識(shí)
1.1 認(rèn)識(shí)網(wǎng)頁(yè)
1.1.1 網(wǎng)頁(yè)和網(wǎng)站
1.1.2 網(wǎng)頁(yè)的類(lèi)型
1.1.3 靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)
1.1.4 網(wǎng)頁(yè)的基本構(gòu)成元素
1.2 如何設(shè)計(jì)網(wǎng)頁(yè)
1.2.1 網(wǎng)頁(yè)設(shè)計(jì)的基本原則
1.2.2 網(wǎng)頁(yè)設(shè)計(jì)成功要素
1.2.3 網(wǎng)頁(yè)的設(shè)計(jì)風(fēng)格及色彩搭配
1.2.4 網(wǎng)頁(yè)設(shè)計(jì)的實(shí)現(xiàn)
1.3 網(wǎng)站整體制作流程
1.3.1 前期策劃
1.3.2 頁(yè)面細(xì)化及實(shí)施
1.3.3 后期維護(hù)
1.4 本章小結(jié)
第2章 使用Web標(biāo)準(zhǔn)設(shè)計(jì)和制作
2.1 表格布局
2.1.1 表格布局的特點(diǎn)
2.1.2 混亂的邏輯結(jié)構(gòu)和冗余的嵌套表格
2.2 了解Web標(biāo)準(zhǔn)
2.2.1 什么是Web標(biāo)準(zhǔn)
2.2.2 什么是W3C
2.2.3 W3C發(fā)布的標(biāo)準(zhǔn)
2.2.4 什么是Ecma國(guó)際
2.2.5 Web標(biāo)準(zhǔn)的優(yōu)勢(shì)
2.3 網(wǎng)站設(shè)計(jì)的標(biāo)準(zhǔn)時(shí)代
2.3.1 為什么要建立網(wǎng)站標(biāo)準(zhǔn)
2.3.2 遵循標(biāo)準(zhǔn)的網(wǎng)站與傳統(tǒng)網(wǎng)站的區(qū)別
2.3.3 采用網(wǎng)站標(biāo)準(zhǔn)的優(yōu)點(diǎn)與缺點(diǎn)
2.4 Web標(biāo)準(zhǔn)三劍客
2.4.1 什么是內(nèi)容、結(jié)構(gòu)、表現(xiàn)和行為
2.4.2 Div與CSS結(jié)合的優(yōu)勢(shì)
2.4.3 如何改善現(xiàn)有網(wǎng)站
2.5 關(guān)于Web標(biāo)準(zhǔn)的思考與爭(zhēng)論
2.5.l 關(guān)于Web標(biāo)準(zhǔn)的優(yōu)勢(shì)
2.5.2 關(guān)于布局
2.5.3 關(guān)于瀏覽器兼容
2.6 關(guān)于Web標(biāo)準(zhǔn)的誤區(qū)
2.6.1 拋棄表格布局的思維方式
2.6.2 正確使用XHTML標(biāo)簽
2.6.3 善于利用CSS
2.6.4 “通過(guò)驗(yàn)證”并不是最終目的
2.7 本章小結(jié)
第3章 HTML、XHTML和XML基礎(chǔ)
3.1 HTML的基礎(chǔ)用法
3.1.1 HTML文件的基本結(jié)構(gòu)
3.1.2 HTML的主要功能
3.1.3 HTML的基本語(yǔ)法
3.1.4 常用的HTML標(biāo)簽
3.1.5 段落和文字標(biāo)簽
3.1.6 超鏈接標(biāo)簽
3.1.7 圖像標(biāo)簽
3.2 轉(zhuǎn)換到XHTML
3.2.1 升級(jí)到XHTML的好處
3.2.2 XHTML的頁(yè)面結(jié)構(gòu)
3.2.3 xHTML代碼規(guī)范
3.2.4 選擇文檔類(lèi)型
3.2.5 XHTML和HTML的比較
3.2.4 名字空間
3.3 XML的概述
3.3.1 XML的概念
3.3.2 HTML與XML的比較
3.3.3 為什么要使用XML
3.3.4 什么是“形式良好的”XML文件
3.3.5 XML的結(jié)構(gòu)
3.3.6 DTD的基本結(jié)構(gòu)
3.3.7 定義元素及其后代
3.3.8 定義元素屬性
3.4 本章小結(jié)
第4章 CSS樣式入門(mén)
4.1 CSS概述
4.2 CSS的基本用法
4.2.1 在HTML內(nèi)插入樣式表
4.2.2 CSS規(guī)則
4.3 CSS樣式分類(lèi)
4.3.1 內(nèi)聯(lián)樣式
4.3.2 內(nèi)部樣式表
4.3.3 外部樣式表
4.4 CSS文檔結(jié)構(gòu)
4.4.1 結(jié)構(gòu)
4.4.2 繼承
4.4.3 特殊性
4.4.4 層疊
4.4.5 重要性
4.5 單位和值
4.5.1 顏色值
4.5.2 定義字體
4.5.3 群選擇器
4.5.4 派生選擇器
4.5.5 id選擇器
4.5.6 類(lèi)別選擇器
4.5.7 定義鏈接的樣式表
4.6 屬性
4.6.1 類(lèi)型
4.6.2 背景
4.6.3 區(qū)塊
4.6.4 方框
4.6.5 邊框
4.6.6 列表
4.6.7 定位
4.7 本章小結(jié)
第5章 CSS布局入門(mén)——個(gè)性類(lèi)網(wǎng)站設(shè)計(jì)
5.1 定義Div
5.1.1 什么是Div
5.1.2 插入Div
5.1.3 Div的嵌套和固定格式
5.2 可視化模型
5.2.1 盒模型
5.2.2 視覺(jué)可視化模型
5.2.3 相對(duì)定位
5.2.4 絕對(duì)定位
5.2.5 浮動(dòng)定位
5.2.6 空白邊疊加
5.3 CSS布局方式
5.3.1 居中的布局設(shè)計(jì)
5.3.2 浮動(dòng)的布局設(shè)計(jì)
5.3.3 高度自適應(yīng)
5.4 實(shí)例——設(shè)計(jì)制作個(gè)性類(lèi)網(wǎng)站頁(yè)面
5.4.1 設(shè)計(jì)分析
5.4.2 布局分析
5.4.3 制作流程
5.4.4 制作步驟
5.4.5 案例小結(jié)
5.5 舉一反三
5.6 本章小結(jié)
第6章 設(shè)置頁(yè)面圖片——企業(yè)網(wǎng)站設(shè)計(jì)
6.1 圖片樣式控制
6.1.1 圖片邊框
6.1.2 圖片定位
6.1.3 圖片縮放
6.1.4 圖片對(duì)齊方式
6.2 實(shí)例——設(shè)計(jì)制作企業(yè)網(wǎng)站
6.2.1 設(shè)計(jì)分析
6.2.2 布局分析
6.2.3 制作流程
6.2.4 制作步驟
6.2.5 案例總結(jié)
6.3 舉一反三
6.4 本章小結(jié)
第7章 設(shè)置頁(yè)面背景圖像——兒童類(lèi)網(wǎng)站設(shè)計(jì)
7.1 背景控制概述
7.1.1 背景控制原則
7.1.2 背景控制屬性
7.2 背景顏色控制
7.2.1 控制頁(yè)面背景顏色
7.2.2 用背景顏色為頁(yè)面分塊
7.3 背景圖片控制
7.3.1 設(shè)置背景圖像
7.3.2 背景圖像的定位
7.3.3 背景圖像的滾動(dòng)
7.3.4 添加多個(gè)背景圖像
7.4 實(shí)OQ——設(shè)計(jì)制作兒童教育類(lèi)網(wǎng)站
7.4.1 設(shè)計(jì)分析
7.4.2 布局分析
7.4.3 制作流程
7.4.4 制作步驟
7.4.5 實(shí)例小結(jié)
7.5 舉一反三
7.6 本章小結(jié)
第8章 CSS文本內(nèi)容排版——美容時(shí)尚網(wǎng)站設(shè)計(jì)
8.1 文本排版概述
8.1.1 文本排版原則
8.1.2 文本控制屬性
8.2 CSS文本樣式
8.2.1 字體
8.2.2 大小
8.2.3 粗細(xì)
8.2.4 樣式
8.2.5 顏色
8.2.6 修飾
8.2.7 英文字母大小寫(xiě)
8.3 文本排版
8.3.1 通欄排版
8.3.2 分欄排版
8.3‘3 圖文混排
8.3.4 不規(guī)則文本繞圖
8.4 實(shí)例——設(shè)計(jì)制作美容類(lèi)網(wǎng)站
8.4.1 設(shè)計(jì)分析
8.4.2 布局分析
8.4.3 制作流程
8.4.4 制作步驟
8.4.5 案例小結(jié)
8.5 舉一反三
8.6 本章小結(jié)
第9章 控制頁(yè)面超鏈接樣式——醫(yī)療保健網(wǎng)站設(shè)計(jì)
9.1 超鏈接概述
9.1.1 超鏈接樣式控制原則
9.1.2 超鏈接控制屬性
9.2 超鏈接樣式
9.2.1 文字鏈接
9.2.2 按鈕式鏈接
9.3 實(shí)例——設(shè)計(jì)制作醫(yī)療保健類(lèi)網(wǎng)站
9.3.1 設(shè)計(jì)分析
9.3.2 布局分析
9.3.3 制作流程
9.3.4 制作步驟
9.3.5 案例總結(jié)
9.4 舉一反三
9.5 本章小結(jié)
第10章 設(shè)置頁(yè)面表單樣式——生活購(gòu)物網(wǎng)站設(shè)計(jì)
10.1 表單設(shè)計(jì)概述
10.1.1 網(wǎng)頁(yè)表單設(shè)計(jì)原則
10.1.2 表單應(yīng)用分類(lèi)
10.2 表單設(shè)計(jì)
10.2.1 標(biāo)簽的作用
10.2.2 文本框樣式設(shè)計(jì)
10.2.3 下拉列表樣式設(shè)計(jì)
10.2.4 復(fù)選框和單選按鈕設(shè)計(jì)
10.3 實(shí)例——設(shè)計(jì)制作生活購(gòu)物類(lèi)網(wǎng)站
10.3.1 設(shè)計(jì)分析
10.3.2 布局分析
10.3.3 制作流程
10.3.4 制作步驟
10.3.5 案例小結(jié)
10.4 舉一反三
10.5 本章小結(jié)
第11章 設(shè)置頁(yè)面列表樣式——影視音樂(lè)網(wǎng)站設(shè)計(jì)
11.1 列表控制概述
11.2 列表樣式控制
11.2.1 UL無(wú)序列表
11.2.2 OL有序列表
11.2.3 定義列表
11.2.4 更改列表項(xiàng)目樣式
11.3 實(shí)例——設(shè)計(jì)制作影視音樂(lè)類(lèi)網(wǎng)站
11.3.1 設(shè)計(jì)分析
11.3.2 布局分析
11.3.3 制作流程
11.3.4 制作步驟
11.3.5 案例總結(jié)
11.4 舉一反三
11.5 本章小結(jié)
第12章 CSS布局高級(jí)運(yùn)用——休閑游戲網(wǎng)站設(shè)計(jì)
12.1 關(guān)于CSS選擇符
12.1.1 CSS選擇符
12.1.2 CSS選擇符的命名
12.2 id與class
12.2.1 id是什么
12.2.2 什么情況下使用id
12.2.3 class是什么
12.2.4 什么情況下使用class
12.3 Div與Span對(duì)象
12.4 實(shí)例——設(shè)計(jì)制作休閑游戲網(wǎng)站
12.4.1 設(shè)計(jì)分析
12.4.2 布局分析
12.4.3 制作流程
12.4.4 制作步驟
12.4.5 案例小結(jié)
12.5 舉一反三
12.6 本章小結(jié)
第13章 CSS布局技巧
13.1 CSS代碼優(yōu)化
13.1.1 增加代碼重用串
13.1.2 使用樣式覆蓋進(jìn)行簡(jiǎn)化
13.2 CSS代碼的簡(jiǎn)寫(xiě)
13.2.1 font樣式簡(jiǎn)寫(xiě)
13.2.2 color樣式簡(jiǎn)寫(xiě)
13.2.3 background樣式簡(jiǎn)寫(xiě)
13.2.4 margin和padding樣式簡(jiǎn)寫(xiě)
13.2.5 border樣式簡(jiǎn)寫(xiě)
13.2.6 list樣式簡(jiǎn)寫(xiě)
13.3 輔助圖片一律用背景處理
13.4 常見(jiàn)的瀏覽器兼容問(wèn)題
13.5 本章小結(jié)