Dreamweaver CS3超酷網(wǎng)頁(yè)設(shè)計(jì)CSS篇

第1章 Dreamweaver+CSS入門
　1.1 HTML文件的基本結(jié)構(gòu)
　　1.1.1 HTML文件結(jié)構(gòu)
　　1.1.2 使用記事本手工編寫HTML頁(yè)面
　　1.1.3 使用Dreamweaver編寫HTML頁(yè)面
　1.2 XHTML入門
　1.3 網(wǎng)站與Web標(biāo)準(zhǔn)
　　1.3.1 什么是Web標(biāo)準(zhǔn)
　　1.3.2 為什么要建立Web標(biāo)準(zhǔn)
　　1.3.3 怎樣改善現(xiàn)有網(wǎng)站
　1.4 為什么要在網(wǎng)頁(yè)中加入CSS
　　1.4.1 什么是CSS
　　1.4.2 如何編寫CSS
第2章 CSS基礎(chǔ)知識(shí)
　2.1 CSS基礎(chǔ)
　　2.1.1 CSS基本概念
　　2.1.2 CSS的優(yōu)點(diǎn)
　2.2 使用CSS
　　2.2.1 外聯(lián)樣式表
　　2.2.2 內(nèi)嵌樣式表
　　2.2.3 導(dǎo)入樣式表
　　2.2.4 內(nèi)聯(lián)樣式表
　2.3 選擇器類型
　　2.3.1 標(biāo)簽選擇器
　　2.3.2 類選擇器
　　2.3.3 ID選擇器
　2.4 使用Dreamweaver編輯CSS
　　2.4.1 CSS面板
　　2.4.2 鏈接外部樣式表
　2.5 設(shè)置CSS屬性
　　2.5.1 設(shè)置CSS樣式類型
　　2.5.2 設(shè)置CSS樣式背景
　　2.5.3 設(shè)置CSS樣式區(qū)塊
　　2.5.4 設(shè)置CSS樣式方框
　　2.5.5 設(shè)置CSS樣式邊框
　　2.5.6 設(shè)置CSS樣式列表
　　2.5.7 設(shè)置CSS樣式定位
　　2.5.8 設(shè)置CSS樣式擴(kuò)展
　2.6 實(shí)戰(zhàn)演練——對(duì)網(wǎng)頁(yè)添加CSS樣式
第3章 設(shè)計(jì)豐富的文字效果
　3.1 設(shè)計(jì)網(wǎng)頁(yè)中的文字樣式
　　3.1.1 字體
　　3.1.2 字號(hào)
　　3.1.3 加粗
　　3.1.4 樣式
　　3.1.5 變體屬性
　　3.1.6 文字修飾
　3.2 設(shè)計(jì)文本的段落樣式
　　3.2.1 行高
　　3.2.2 對(duì)齊
　　3.2.3 縮進(jìn)
　　3.2.4 單詞間距
　　3.2.5 首字下沉
　　3.2.6 大小寫轉(zhuǎn)換
　3.3 CSS濾鏡設(shè)計(jì)特效文字
　　3.3.1 濾鏡概述
　　3.3.2 光暈（Glow）
　　3.3.3 模糊（Blur）
　　3.3.4 遮罩（Mask）
　　3.3.5 透明色（Chroma）
　　3.3.6 陰影（DropShadow）
　　3.3.7 波浪（Wave）
　　3.3.8 X射線（Xray）
　3.4 實(shí)戰(zhàn)演練
　　3.4.1 用CSS排版網(wǎng)頁(yè)文字
　　3.4.2 創(chuàng)建動(dòng)感文字
第4章 用CSS設(shè)計(jì)圖像和背景
　4.1 設(shè)置網(wǎng)頁(yè)的背景
　　4.1.1 背景顏色
　　4.1.2 背景圖像
　4.2 設(shè)置背景圖像的屬性
　　4.2.1 設(shè)置背景重復(fù)
　　4.2.2 設(shè)置固定背景
　　4.2.3 設(shè)置背景定位
　4.3 設(shè)置網(wǎng)頁(yè)圖像的樣式
　　4.3.1 設(shè)置圖像邊框
　　4.3.2 圖文混合排版
　4.4 應(yīng)用CSS濾鏡設(shè)計(jì)圖像特效
　　4.4.1 控制圖像和背景的透明度（Alpha）
　　4.4.2 灰度（Gray）
　　4.4.3 反色（Invert）
　4.5 實(shí)戰(zhàn)演練
　　4.5.1 給圖片添加邊框
　　4.5.2 圖文繞排效果
　　4.5.3 鼠標(biāo)指針移到圖片時(shí)產(chǎn)生漸變效果
第5章 設(shè)計(jì)更富靈活性的表格
　5.1 網(wǎng)頁(yè)中的表格
　　5.1.1 表格對(duì)象標(biāo)記
　　5.1.2 在Dreamweaver中插入表格
　　5.1.3 設(shè)置表格的顏色
　　5.1.4 設(shè)置表格的邊框樣式
　　5.1.5 設(shè)置表格的陰影
　　5.1.6 設(shè)置表格的漸變背景
　5.2 實(shí)戰(zhàn)演練
　　5.2.1 制作變換背景色的表格
　　5.2.2 用CSS制作漂亮的彩色背景表格
　　5.2.3 制作陰影表格
　　5.2.4 制作圓角表格
　　5.2.5 制作半透明的表格
第6章 設(shè)計(jì)更酷更炫的表單
　6.1 網(wǎng)頁(yè)中的表單
　　6.1.1 表單對(duì)象
　　6.1.2 表單標(biāo)記
　　6.1.3 表單的布局設(shè)計(jì)
　　6.1.4 設(shè)置邊框樣式
　　6.1.5 設(shè)置背景樣式
　　6.1.6 設(shè)置輸入文本的樣式
　　6.1.7 用CSS+DIV設(shè)計(jì)表單
　6.2 實(shí)戰(zhàn)演練
　　6.2.1 改變按鈕的背景顏色和文字顏色
　　6.2.2 設(shè)計(jì)文本框的樣式
　　6.2.3 設(shè)計(jì)文本框中的文字樣式
　　6.2.4 制作透明的表單背景
　　6.2.5 為下拉菜單變換顏色
　　6.2.6 設(shè)置Form表單內(nèi)textarea背景圖片
第7章 制作實(shí)用的菜單和網(wǎng)站導(dǎo)航
　7.1 項(xiàng)目列表
　　7.1.1 有序列表
　　7.1.2 無(wú)序列表
　7.2 橫排導(dǎo)航
　　7.2.1 文本導(dǎo)航
　　7.2.2 標(biāo)簽式導(dǎo)航
　7.3 豎排導(dǎo)航
　7.4 實(shí)戰(zhàn)演練
　　7.4.1 實(shí)現(xiàn)背景變換的導(dǎo)航菜單
　　7.4.2 利用CSS制作橫向?qū)Ш?br />　　7.4.3 制作網(wǎng)頁(yè)下拉菜單
第8章 設(shè)計(jì)具有特色的超鏈接效果
　8.1 超鏈接基礎(chǔ)
　　8.1.1 超鏈接的基本概念
　　8.1.2 使用“頁(yè)面屬性”設(shè)置超鏈接
　8.2 鏈接標(biāo)記
　　8.2.1 a:link
　　8.2.2 a:visited
　　8.2.3 a:active
　　8.2.4 a:hover
　8.3 各種形式的超鏈接
　　8.3.1 背景色變換鏈接
　　8.3.2 多姿多彩的下劃線鏈接
　　8.3.3 圖像翻轉(zhuǎn)鏈接
　　8.3.4 邊框變換鏈接
　8.4 實(shí)戰(zhàn)演練
　　8.4.1 使用CSS實(shí)現(xiàn)鼠標(biāo)指針形狀改變
　　8.4.2 為超鏈接文字加上質(zhì)感邊框
　　8.4.3 鼠標(biāo)指針移到鏈接文字上時(shí)改變文字大小或顏色
　　8.4.4 給超鏈接添加提示文字
　　8.4.5 文本超鏈接模擬按鈕效果
第9章 CSS+DIV布局定位基礎(chǔ)
　9.1 Div標(biāo)記與Span標(biāo)記
　　9.1.1 Div概述
　　9.1.2 Div與Span的區(qū)別
　9.2 在Dreamweaver中使用Div
　9.3 盒子模型
　　9.3.1 盒子模型的概念
　　9.3.2 border
　　9.3.3 padding
　　9.3.4 margin
　9.4 元素的定位方式
　　9.4.1 float定位
　　9.4.2 position定位
　　9.4.3 z-index空間位置
第10章 CSS+DIV布局方法
　10.1 CSS布局理念
　　10.1.1 將頁(yè)面用Div分塊
　　10.1.2 設(shè)計(jì)各塊的位置
　　10.1.3 用CSS定位
　10.2 常見(jiàn)的布局類型
　　10.2.1 一列固定寬度
　　10.2.2 一列自適應(yīng)
　　10.2.3 兩列固定寬度
　　10.2.4 兩列寬度自適應(yīng)
　　10.2.5 兩列右列寬度自適應(yīng)
　　10.2.6 三列浮動(dòng)中間寬度自適應(yīng)
　　10.2.7 三行二列居中高度自適應(yīng)布局
　10.3 CSS布局與傳統(tǒng)的表格方式布局分析
　10.4 使用CSS布局模板
第11章 CSS與JavaScript的綜合應(yīng)用
　11.1 JavaScript簡(jiǎn)介
　　11.1.1 什么是JavaScript
　　11.1.2 JavaScript特點(diǎn)
　11.2 JavaScript的基本語(yǔ)法
　　11.2.1 常量和變量
　　11.2.2 表達(dá)式和運(yùn)算符
　　11.2.3 基本語(yǔ)句
　　11.2.4 函數(shù)
　11.3 JavaScript事件
　11.4 JavaScript內(nèi)部對(duì)象
　　11.4.1 navigator對(duì)象
　　11.4.2 document對(duì)象
　　11.4.3 Windows對(duì)象
　　11.4.4 location對(duì)象
　　11.4.5 history對(duì)象
　11.5 實(shí)戰(zhàn)演練
　　11.5.1 隨鼠標(biāo)移動(dòng)的圖像
　　11.5.2 制作圖片循環(huán)隱現(xiàn)效果
　　11.5.3 制作幻燈片效果
　　11.5.4 制作燈光效果
　　11.5.5 任意選擇網(wǎng)頁(yè)中內(nèi)容的文字顏色、背景顏色、字號(hào)
第12章 設(shè)計(jì)布局富有個(gè)性的個(gè)人網(wǎng)站
　12.1 個(gè)人網(wǎng)站設(shè)計(jì)概述
　12.2 個(gè)人網(wǎng)站色彩搭配和結(jié)構(gòu)設(shè)計(jì)
　12.3 網(wǎng)站前期策劃
　　12.3.1 確定網(wǎng)站主題
　　12.3.2 確定目錄結(jié)構(gòu)
　　12.3.3 網(wǎng)站藍(lán)圖的規(guī)劃
　12.4 制作網(wǎng)站主頁(yè)
　　12.4.1 導(dǎo)入外部CSS
　　12.4.2 制作頂部文件
　　12.4.3 制作個(gè)人簡(jiǎn)介
　　12.4.4 制作個(gè)人相冊(cè)
　　12.4.5 制作最新動(dòng)態(tài)
　　12.4.6 制作底部文件
第13章 公司宣傳網(wǎng)站的布局
　13.1 企業(yè)網(wǎng)站設(shè)計(jì)概述
　13.2 分析架構(gòu)
　　13.2.1 設(shè)計(jì)分析
　　13.2.2 排版構(gòu)架
　13.3 各模塊設(shè)計(jì)
　　13.3.1 布局設(shè)計(jì)
　　13.3.2 頁(yè)面的通用規(guī)則
　　13.3.3 制作#header對(duì)象部分
　　13.3.4 制作導(dǎo)航#nav對(duì)象部分
　　13.3.5 公司介紹和圖片展示部分
　　13.3.6 制作我們的服務(wù)部分
　　13.3.7 制作#aside對(duì)象部分
　　13.3.8 制作底部版權(quán)信息部分
第14章 購(gòu)物網(wǎng)站布局
　14.1 購(gòu)物網(wǎng)站設(shè)計(jì)概述
　　14.1.1 購(gòu)物網(wǎng)站分析
　　14.1.2 排版構(gòu)架
　14.2 各部分設(shè)計(jì)
　　14.2.1 導(dǎo)入外部CSS
　　14.2.2 制作頭部文件
　　14.2.3 設(shè)計(jì)新品上架區(qū)
　　14.2.4 設(shè)計(jì)熱門商品區(qū)
　　14.2.5 設(shè)計(jì)會(huì)員登錄區(qū)
　　14.2.6 設(shè)計(jì)商品分類區(qū)
　　14.2.7 設(shè)計(jì)新品排行區(qū)
　　14.2.8 插入底部文件
第15章 留學(xué)網(wǎng)站的布局
　15.1 分析架構(gòu)
　　15.1.1 設(shè)計(jì)分析
　　15.1.2 排版構(gòu)架
　15.2 各模塊設(shè)計(jì)
　　15.2.1 頁(yè)面的通用規(guī)則
　　15.2.2 頂部logo、banner部分
　　15.2.3 制作導(dǎo)航菜單部分
　　15.2.4 制作xinyi_content1部分
　　15.2.5 制作xinyi_bigad部分
　　15.2.6 制作xinyi_content2部分
　　15.2.7 制作xinyi_content3部分
　　15.2.8 制作xinyi_bigad2部分
　　15.2.9 制作xinyi_content4部分
　　15.2.10 友情鏈接xinyi_link部分
　　15.2.11 版權(quán)xinyi_copyright部分
附錄A CSS屬性一覽表
附錄B 216種網(wǎng)頁(yè)安全顏色
附錄C RGB網(wǎng)頁(yè)配色表
附錄D HTML常用標(biāo)簽