Dreamweaver CS5網(wǎng)頁設(shè)計(jì)與制作寶典

第1篇　網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)篇
　第1章　解讀網(wǎng)頁設(shè)計(jì)
　　1.1　網(wǎng)頁設(shè)計(jì)概述
　　　1.1.1　網(wǎng)頁與網(wǎng)站
　　　1.1.2　網(wǎng)頁基本元素
　　　1.1.3　網(wǎng)頁的類型
　　1.2　網(wǎng)頁設(shè)計(jì)的構(gòu)成要素
　　　1.2.1　文字的編排與設(shè)計(jì)
　　　1.2.2　圖形圖像設(shè)計(jì)
　　　1.2.3　版式設(shè)計(jì)與編排
　　　1.2.4　色彩的搭配
　　　1.2.5　多媒體元素的選擇
　　1.3　網(wǎng)站建設(shè)的一般流程
　　　1.3.1　網(wǎng)站策劃
　　　1.3.2　網(wǎng)頁設(shè)計(jì)
　　　1.3.3　網(wǎng)頁制作
　　　1.3.4　網(wǎng)站測(cè)試與發(fā)布
　　　1.3.5　網(wǎng)站宣傳與維護(hù)
　　1.4　網(wǎng)頁常用專業(yè)術(shù)語
　第2章　網(wǎng)頁色彩搭配
　　2.1　網(wǎng)頁設(shè)計(jì)與色彩
　　2.2　色彩理論
　　　2.2.1　色彩與視覺原理
　　　2.2.2　色彩三要素
　　　2.2.3　色相環(huán)
　　　2.2.4　三原色
　　2.3　網(wǎng)頁色彩技術(shù)
　　　2.3.1　216網(wǎng)頁安全色
　　　2.3.2　HTML語言中的顏色值表示
　　2.4　色彩的冷暖
　　2.5　色彩對(duì)比
　　　2.5.1　色相對(duì)比
　　　2.5.2　明度對(duì)比
　　　2.5.3　純度對(duì)比
　　　2.5.4　冷暖對(duì)比
　　　2.5.5　面積對(duì)比
　　2.6　色彩調(diào)和
　　　2.6.1　同種色的調(diào)和
　　　2.6.2　類似色的調(diào)和
　　　2.6.3　對(duì)比色的調(diào)和
　　　2.6.4　漸變色的調(diào)和
　　2.7　網(wǎng)頁色彩搭配
　　　2.7.1　色彩的功能角色
　　　2.7.2　基于色相的配色
　　　2.7.3　基于色調(diào)的配色
　　　2.7.4　標(biāo)準(zhǔn)色配色
　　　2.7.5　漸變配色
　第3章　Dreamweaver網(wǎng)頁制作快速入門
　　3.1　初識(shí)DreamweaverCS
　　3.2　熟悉中文版DreamweaverCS5的操作界面
　　　3.2.1　開始頁
　　　3.2.2　DreamweaverCS5的操作界面
　　　3.2.3　主菜單、快捷菜單與面板菜單
　　　3.2.4　文檔工具欄
　　　3.2.5　中文版DreamweaverCS5面板
　　3.3　網(wǎng)頁文檔的基本操作
　　　3.3.1　新建網(wǎng)頁
　　　3.3.2　保存網(wǎng)頁
　　　3.3.3　設(shè)置頁面屬性
　　　3.3.4　打開網(wǎng)頁
　　　3.3.5　預(yù)覽網(wǎng)頁
　　3.4　關(guān)于站點(diǎn)
　　　3.4.1　本地站點(diǎn)和遠(yuǎn)程站點(diǎn)
　　　3.4.2　站點(diǎn)規(guī)劃原則
　　3.5　創(chuàng)建站點(diǎn)
　　　3.5.1　創(chuàng)建本地站點(diǎn)
　　　3.5.2　創(chuàng)建遠(yuǎn)程站點(diǎn)
　　3.6　管理本地與遠(yuǎn)程站點(diǎn)
　　　3.6.1　管理本地站點(diǎn)中的文件
　　　3.6.2　管理本地站點(diǎn)
　　　3.6.3　管理遠(yuǎn)程站點(diǎn)
　第4章　XHTML和CSS基礎(chǔ)
　　4.1　XHTML語言基礎(chǔ)
　　　4.1.1　什么是XHTML
　　　4.1.2　XHTML文檔的基本結(jié)構(gòu)
　　　4.1.3　標(biāo)簽的書寫格式
　　　4.1.4　標(biāo)簽的屬性
　　　4.1.5　XHTML語法規(guī)范
　　4.2　XHTML語言的核心標(biāo)簽
　　　4.2.1　文本與段落
　　　4.2.2　圖像
　　　4.2.3　超鏈接
　　　4.2.4　列表元素
　　　4.2.5　Div標(biāo)簽
　　4.3　CSS概述
　　　4.3.1　CSS的概念
　　　4.3.2　CSS的基本語法
　　　4.3.3　認(rèn)識(shí)【CSS樣式】面板
　　4.4　使用CSS控制頁面元素
　　　4.4.1　行內(nèi)樣式表
　　　4.4.2　內(nèi)部樣式表
　　　4.4.3　外部樣式表
　　　4.4.4　導(dǎo)入樣式表
　　4.5　選擇器類型
　　　4.5.1　標(biāo)簽選擇器
　　　4.5.2　類選擇器
　　　4.5.3　ID選擇器
　　4.6　設(shè)置CSS屬性
　　　4.6.1　設(shè)置CSS樣式類型
　　　4.6.2　設(shè)置CSS樣式背景
　　　4.6.3　設(shè)置CSS樣式區(qū)塊
　　　4.6.4　設(shè)置CSS樣式的方框
　　　4.6.5　設(shè)置CSS樣式的邊框
　　　4.6.6　設(shè)置CSS樣式列表
　　　4.6.7　設(shè)置CSS樣式的定位
　　　4.6.8　設(shè)置CSS樣式擴(kuò)展
　　4.7　管理CSS樣式表
　　　4.7.1　查看CSS樣式
　　　4.7.2　編輯CSS樣式
　　　4.7.3　禁用或啟用CSS屬性
　　　4.7.4　刪除與復(fù)制CSS樣式
第2篇　網(wǎng)頁元素設(shè)計(jì)篇
　第5章　網(wǎng)頁中文字的編排與設(shè)計(jì)
　　5.1　關(guān)于文字編排與設(shè)計(jì)
　　5.2　文字在網(wǎng)頁中的表現(xiàn)形式
　　　5.2.1　特效文字
　　　5.2.2　內(nèi)容文字
　　5.3　用CSS設(shè)計(jì)文字樣式
　　　5.3.1　字體
　　　5.3.2　字號(hào)
　　　5.3.3　顏色
　　　5.3.4　字體粗細(xì)
　　　5.3.5　斜體
　　　5.3.6　下劃線、上劃線和刪除線
　　　5.3.7　英文字母大小寫
　　5.4　用CSS設(shè)計(jì)文本的段落樣式
　　　5.4.1　行高
　　　5.4.2　水平對(duì)齊方式
　　　5.4.3　首行縮進(jìn)
　　　5.4.4　字間距
　　　5.4.5　首字下沉
　　5.5　使用CSS濾鏡設(shè)計(jì)特效文字
　　　5.5.1　濾鏡概述
　　　5.5.2　陰影
　　　5.5.3　模糊
　　　5.5.4　光暈
　　　5.5.5　遮罩
　　　5.5.6　波浪
　　　5.5.7　射線
　　5.6　實(shí)例應(yīng)用——網(wǎng)頁文字的排版
　第6章　網(wǎng)頁中圖形圖像的設(shè)計(jì)
　　6.1　網(wǎng)頁圖形圖像概述
　　　6.1.1　圖形圖像在網(wǎng)頁中的應(yīng)用
　　　6.1.2　網(wǎng)頁中圖形圖像的使用原則
　　　6.1.3　網(wǎng)頁中常用圖像格式
　　6.2　在網(wǎng)頁中添加圖像
　　6.3　用CSS設(shè)置網(wǎng)頁圖像樣式
　　　6.3.1　設(shè)置圖像的邊框
　　　6.3.2　圖片縮放
　　　6.3.3　圖文混排
　　6.4　用CSS設(shè)置網(wǎng)頁的背景
　　　6.4.1　背景顏色
　　　6.4.2　背景圖像
　　　6.4.3　設(shè)置背景圖像的屬性
　　6.5　實(shí)例應(yīng)用
　　　6.5.1　圖文混排效果
　　　6.5.2　設(shè)計(jì)網(wǎng)頁背景圖像
　第7章　網(wǎng)頁導(dǎo)航設(shè)計(jì)
　　7.1　網(wǎng)頁導(dǎo)航概述
　　　7.1.1　網(wǎng)頁導(dǎo)航分類
　　　7.1.2　導(dǎo)航位置
　　　7.1.3　導(dǎo)航方向
　　7.2　關(guān)于超鏈接
　　　7.2.1　什么是超鏈接
　　　7.2.2　鏈接路徑
　　7.3　創(chuàng)建超鏈接
　　　7.3.1　創(chuàng)建文本鏈接
　　　7.3.2　創(chuàng)建圖像地圖鏈接
　　　7.3.3　創(chuàng)建錨記鏈接
　　　7.3.4　創(chuàng)建電子郵件鏈接
　　　7.3.5　創(chuàng)建空鏈接和腳本鏈接
　　7.4　用CSS設(shè)計(jì)網(wǎng)站導(dǎo)航
　　　7.4.1　鏈接樣式的控制
　　　7.4.2　設(shè)計(jì)橫向?qū)Ш?br />　　　7.4.3　設(shè)計(jì)豎排導(dǎo)航
　　7.5　實(shí)例應(yīng)用——寶慶動(dòng)漫網(wǎng)導(dǎo)航設(shè)計(jì)
　第8章　網(wǎng)頁多媒體與特效設(shè)計(jì)
　　8.1　插入多媒體對(duì)象
　　　8.1.1　插入SWF動(dòng)畫
　　　8.1.2　插入FLV視頻
　　　8.1.3　添加聲音
　　8.2　使用行為創(chuàng)建網(wǎng)頁特效
　　　8.2.1　【行為】面板
　　　8.2.2　動(dòng)作和事件
　　　8.2.3　添加行為
　　8.3　Dreamweaver中的常用行為介紹
　　　8.3.1　交換圖像
　　　8.3.2　彈出信息
　　　8.3.3　打開瀏覽器窗口
　　　8.3.4　Spry效果
　　　8.3.5　顯示-隱藏元素
　　　8.3.6　檢查插件
　　　8.3.7　設(shè)置狀態(tài)欄文本
　　　8.3.8　調(diào)用JavaScript
　　　8.3.9　轉(zhuǎn)到URL
　　　8.3.10　預(yù)先載入圖像
　　8.4　行為實(shí)例應(yīng)用
　　　8.4.1　制作閃爍圖像特效
　　　8.4.2　制作有彈出窗口的網(wǎng)頁
　　8.5　關(guān)于JavaScript
　　　8.5.1　什么是JavaScript語言
　　　8.5.2　JavaScript語言的寫入方式
　　8.6　實(shí)例應(yīng)用
　　　8.6.1　廣告圖片切換效果
　　　8.6.2　跟隨滾動(dòng)條滾動(dòng)的對(duì)聯(lián)廣告
第3篇　網(wǎng)頁版式設(shè)計(jì)與布局篇
　第9章　網(wǎng)頁版式設(shè)計(jì)
　　9.1　版式設(shè)計(jì)概述
　　　9.1.1　網(wǎng)頁版面大小
　　　9.1.2　第一屏
　　9.2　版式設(shè)計(jì)的形式原理
　　　9.2.1　比例
　　　9.2.2　重復(fù)與漸變
　　　9.2.3　對(duì)稱與均衡
　　　9.2.4　節(jié)奏與旋律
　　　9.2.5　對(duì)比與統(tǒng)一
　　　9.2.6　虛實(shí)與留白
　　9.3　版式設(shè)計(jì)的視覺因素
　　　9.3.1　符合人的視覺習(xí)慣
　　　9.3.2　避免視覺疲勞
　　　9.3.3　注重主從關(guān)系
　　9.4　網(wǎng)頁版式構(gòu)成的基礎(chǔ)結(jié)構(gòu)
　　　9.4.1　欄式結(jié)構(gòu)
　　　9.4.2　區(qū)域結(jié)構(gòu)
　　　9.4.3　非規(guī)律框架
　第10章　表格布局網(wǎng)頁
　　10.1　使用表格
　　　10.1.1　創(chuàng)建表格
　　　10.1.2　選擇表格
　　10.2　設(shè)置表格與單元格的屬性
　　　10.2.1　設(shè)置表格屬性
　　　10.2.2　設(shè)置單元格屬性
　　10.3　編輯表格
　　　10.3.1　調(diào)整表格和單元格的大小
　　　10.3.2　設(shè)置表格對(duì)齊方式
　　　10.3.3　插入行或列
　　　10.3.4　刪除行或列
　　　10.3.5　拆分和合并單元格
　　　10.3.6　表格的嵌套
　　10.4　實(shí)例應(yīng)用——制作Models俱樂部網(wǎng)站
　　　10.4.1　使用表格布局頁面
　　　10.4.2　使用CSS美化頁面
　第11章　深入理解CSS+DIV布局
　　11.1　CSS+DIV布局概述
　　　11.1.1　什么是CSS+DIV布局
　　　11.1.2　CSS的優(yōu)勢(shì)
　　　11.1.3　傳統(tǒng)的table布局與CSS布局的區(qū)別
　　11.2　關(guān)于div和span
　　　11.2.1　認(rèn)識(shí)div
　　　11.2.2　div的并列與嵌套結(jié)構(gòu)
　　　11.2.3　div與span的區(qū)別
　　11.3　盒子模型
　　　11.3.1　盒子模型的概念
　　　11.3.2　border
　　　11.3.3　padding
　　　11.3.4　margin
　　11.4　元素的定位方式
　　　11.4.1　float定位
　　　11.4.2　position定位
　　　11.4.3　z-index空間位置
　第12章　CSS+DIV布局網(wǎng)頁
　　12.1　CSS布局技法
　　　12.1.1　將頁面用div分塊
　　　12.1.2　設(shè)計(jì)各個(gè)塊的位置
　　　12.1.3　用CSS定位
　　12.2　常用布局類型
　　　12.2.1　一列固定寬度
　　　12.2.2　一列自適應(yīng)
　　　12.2.3　一列固定寬度居中
　　　12.2.4　兩列固定寬度
　　　12.2.5　兩列寬度自適應(yīng)
　　　12.2.6　兩列右列寬度自適應(yīng)
　　　12.2.7　兩列固定寬度居中
　　　12.2.8　三列浮動(dòng)中間列寬度自適應(yīng)
　　　12.2.9　高度自適應(yīng)
　　12.3　使用CSS預(yù)設(shè)布局創(chuàng)建頁面
　　12.4　實(shí)例應(yīng)用——制作蝴蝶攝影工作室網(wǎng)站
　　　12.4.1　搭建HTML框架
　　　12.4.2　制作網(wǎng)頁頭部
　　　12.4.3　制作網(wǎng)頁的主要內(nèi)容和頁尾
　　　12.4.4　制作“蝴蝶作品”頁面
第4篇　經(jīng)典案例篇
　第13章　藝萃商業(yè)網(wǎng)站的設(shè)計(jì)與制作
　　13.1　商業(yè)網(wǎng)站的策劃
　　　13.1.1　明確創(chuàng)建網(wǎng)站的目的和用戶需求
　　　13.1.2　分析材料
　　　13.1.3　出具網(wǎng)站策劃書
　　13.2　藝萃商業(yè)網(wǎng)站的設(shè)計(jì)
　　　13.2.1　設(shè)計(jì)定位
　　　13.2.2　確定網(wǎng)站結(jié)構(gòu)布局
　　13.3　藝萃商業(yè)網(wǎng)站的制作
　　　13.3.1　創(chuàng)建本地站點(diǎn)與遠(yuǎn)程站點(diǎn)
　　　13.3.2　定義頁面通用樣式
　　13.4　制作首頁
　　　13.4.1　新建文檔并鏈接樣式表文件
　　　13.4.2　使用div搭建頁面框架
　　　13.4.3　用CSS定位并添加內(nèi)容
　　　13.4.4　插入關(guān)鍵字和網(wǎng)頁說明
　　13.5　欄目頁面的制作
　　　13.5.1　新建文檔并鏈接樣式表文件
　　　13.5.2　使用div搭建頁面框架
　　　13.5.3　制作頭部?jī)?nèi)容
　　　13.5.4　制作主體內(nèi)容
　　　13.5.5　制作頁腳
　　13.6　測(cè)試與發(fā)布網(wǎng)站
　　　13.6.1　網(wǎng)站的測(cè)試
　　　13.6.2　網(wǎng)站的發(fā)布
　第14章　省客網(wǎng)的設(shè)計(jì)與制作
　　14.1　省客網(wǎng)的設(shè)計(jì)
　　14.2　省客網(wǎng)的制作
　　　14.2.1　創(chuàng)建本地站點(diǎn)與遠(yuǎn)程站點(diǎn)
　　　14.2.2　新建樣式表并設(shè)置通用樣式
　　14.3　制作首頁
　　　14.3.1　新建網(wǎng)頁并調(diào)用Style.css樣式表
　　　14.3.2　使用div搭建頁面框架
　　　14.3.3　制作網(wǎng)站頭部
　　　14.3.4　制作網(wǎng)站導(dǎo)航
　　　14.3.5　制作網(wǎng)頁主體
　　　14.3.6　制作網(wǎng)頁腳注
　第15章　希藝歐家居網(wǎng)的設(shè)計(jì)與制作
　　15.1　案例預(yù)覽
　　15.2　創(chuàng)建與編輯模板
　　　15.2.1　認(rèn)識(shí)【模板】面板和【模板】菜單
　　　15.2.2　創(chuàng)建模板
　　　15.2.3　編輯模板
　　　15.2.4　管理模板
　　15.3　應(yīng)用模板制作網(wǎng)頁
　　　15.3.1　從模板新建網(wǎng)頁文件
　　　15.3.2　使用【模板】面板創(chuàng)建網(wǎng)頁文檔
　　　15.3.3　頁面與模板脫離
　　　15.3.4　更新頁面
　　15.4　使用庫
　　　15.4.1　庫的概念
　　　15.4.2　創(chuàng)建和應(yīng)用庫項(xiàng)目
　　　15.4.3　修改庫
　　15.5　制作希藝歐家居網(wǎng)站
　　　15.5.1　創(chuàng)建站點(diǎn)并定義頁面通用樣式
　　　15.5.2　創(chuàng)建模板并鏈接樣式表文件
　　　15.5.3　使用div搭建頁面框架
　　　15.5.4　定位塊并添加內(nèi)容
　　　15.5.5　應(yīng)用模板制作“公司簡(jiǎn)介”頁面
　　　15.5.6　應(yīng)用模板制作“人才中心”頁面