本書以Adobe Dreamweaver CS5作為設(shè)計(jì)工具，從如何建立站點(diǎn)、配置站點(diǎn)、管理站點(diǎn)、上傳站點(diǎn)所需的步驟，詳細(xì)介紹了網(wǎng)頁設(shè)計(jì)前的環(huán)境搭建。內(nèi)容分為基礎(chǔ)篇、進(jìn)階篇、高級(jí)應(yīng)用篇和綜合案例篇五個(gè)部分。
21世紀(jì)是互聯(lián)網(wǎng)高速發(fā)展、信息無處不在的時(shí)代。1987年9月北京計(jì)算機(jī)應(yīng)用技術(shù)研究所的錢天白教授向德國(guó)卡爾斯魯厄大學(xué)發(fā)出中國(guó)第一封電子郵件，首次實(shí)現(xiàn)與國(guó)外計(jì)算機(jī)網(wǎng)絡(luò)的聯(lián)通。20世紀(jì)90年代，網(wǎng)站幾乎是純文字的頁面，只要保證瀏覽者能夠獲取信息，網(wǎng)站的功能就算實(shí)現(xiàn)了。過去的二十多年，互聯(lián)網(wǎng)發(fā)生了翻天覆地的變化。
隨著網(wǎng)絡(luò)信息技術(shù)的更新?lián)Q代，人們已經(jīng)不能繼續(xù)滿足于千篇一律的“模板式”網(wǎng)站了�；ヂ�(lián)網(wǎng)發(fā)展到今天，網(wǎng)站的數(shù)量已經(jīng)無法估計(jì)了。截至2014年，我國(guó)登記在冊(cè)的網(wǎng)站總量已經(jīng)突破350萬個(gè)。在浩瀚的網(wǎng)站中如何脫穎而出呢？
網(wǎng)頁制作技術(shù)發(fā)展到今天，已經(jīng)不再是簡(jiǎn)單的網(wǎng)頁制作了。作為一種新媒體的媒介主體，網(wǎng)站被賦予了太多的使命。環(huán)顧四周，計(jì)算機(jī)、電視、手機(jī)、平板、智能終端無一不是網(wǎng)頁瀏覽設(shè)備。今天的你我，在超市內(nèi)的廣告機(jī)上輕輕一點(diǎn)，需要的商品或服務(wù)就立即送到家了。這一切的一切都是建立在網(wǎng)頁制作技術(shù)基礎(chǔ)上的。
本書共10章，包括4大部分： 第一部基礎(chǔ)篇側(cè)重于介紹網(wǎng)站部署環(huán)境和熟悉Dreamweaver CS6軟件及HTML的基本應(yīng)用。第二部分進(jìn)階篇側(cè)重于CSS的頁面美化和布局及JavaScript的基本語法的實(shí)踐應(yīng)用。第三部分高級(jí)應(yīng)用篇側(cè)重于最新HTML 5的各種特效和Photoshop網(wǎng)頁切圖的技巧，使Web更美觀，制作更節(jié)省時(shí)間。第四部分綜合案例篇側(cè)重于一步步地引導(dǎo)讀者開始新的、符合Web標(biāo)準(zhǔn)的CSS布局及JavaScript動(dòng)態(tài)圖片顯示的效果。
本書對(duì)Web的介紹較為全面，從最基本的概念開始，步步深入。從開始的HTML的簡(jiǎn)單呈現(xiàn)，后又初步地以CSS加以修飾，最終用JavaScript使靜態(tài)網(wǎng)頁顯示動(dòng)態(tài)效果，使網(wǎng)頁美觀、生動(dòng)。
盡管現(xiàn)在市面上有很多Web網(wǎng)頁制作的資源，但多是一些支離破碎的技巧和經(jīng)驗(yàn)，學(xué)習(xí)這樣的資料很容易產(chǎn)生身處山中卻不得山貌的困惑。另外，即使是有經(jīng)驗(yàn)的CSS開發(fā)人員也會(huì)遇到問題。這是因?yàn)楹芏郬eb開發(fā)人員是靠自學(xué)成才的，他們從網(wǎng)上的文章或代碼中學(xué)習(xí)經(jīng)驗(yàn)，并沒有全面系統(tǒng)地理解Web規(guī)范應(yīng)用。加之瀏覽器的兼容性問題，如果沒有系統(tǒng)的參考資料，如同摸石頭過河，會(huì)嚴(yán)重影響開發(fā)速度。
本書結(jié)合本人多年來對(duì)Web網(wǎng)站前端技術(shù)的開發(fā)設(shè)計(jì)經(jīng)驗(yàn)、對(duì)網(wǎng)站的一些見解，較為系統(tǒng)地介紹動(dòng)靜態(tài)網(wǎng)頁的制作及布局，相信初學(xué)者和網(wǎng)頁設(shè)計(jì)人員，都能從本書獲得很大的收益。本書涵蓋了大量的經(jīng)驗(yàn)案例和綜合布局示例，可以幫助讀者很好地理解和精通Web前端開發(fā)技術(shù)。
本書主要定位于初、中級(jí)用戶。不管你以前是否了解或?qū)W習(xí)過網(wǎng)頁設(shè)計(jì)相關(guān)知識(shí)，本書都非常適合。雖然我們?cè)诓邉�、�?chuàng)造、編寫中致力于追求嚴(yán)謹(jǐn)、求實(shí)、高質(zhì)量，但是錯(cuò)誤和不足在所難免，懇請(qǐng)讀者不吝賜教，我們定會(huì)全力改進(jìn)。
本書由張建波任主編，付湘瓊、殷群任副主編。第3、6章由張建波編寫，第7、8章由殷群編寫，第4、5章由付湘瓊編寫，第1、2章由朱凱編寫，第9、10章由李宇亮編寫。張建波負(fù)責(zé)全書的統(tǒng)稿和審定工作。
張懷寧教授在本書的編寫和審閱過程中，提出了許多指導(dǎo)性的意見； 清華大學(xué)出版社對(duì)本書的出版給予了積極的支持和幫助； 參與本書案例驗(yàn)證工作的還有魏興、張曉云、王紅偉、趙波等。在此一并致以誠(chéng)摯的感謝。
由于作者水平有限，書中缺點(diǎn)和疏漏之處在所難免，敬請(qǐng)讀者批評(píng)指正。
編者
2014年9月
第一部分基礎(chǔ)篇
第1章網(wǎng)站及網(wǎng)站部署環(huán)境概述
1．1萬維網(wǎng)概述
1．2網(wǎng)頁與HTML語言
1．3網(wǎng)頁設(shè)計(jì)與開發(fā)的過程
1．4常用網(wǎng)頁制作工具與選擇
1．5網(wǎng)站的運(yùn)行環(huán)境
1．5．1Windows Server 2008安裝概述
1．5．2IIS配置概述
1．5．3FTP權(quán)限配置
1．6Web站點(diǎn)的建立與管理
1．6．1Web站點(diǎn)的建立
1．6．2網(wǎng)站的管理
1．6．3網(wǎng)站維護(hù)
1．7本章小結(jié)
1．8習(xí)題
第2章Adobe Dreamweaver CS6簡(jiǎn)介
2．1Dreamweaver CS6簡(jiǎn)介
2．1．1Dreamweaver CS6界面
2．1．2Dreamweaver CS6新增功能
2．2規(guī)劃站點(diǎn)結(jié)構(gòu)
2．2．1創(chuàng)建站點(diǎn)
2．2．2建立遠(yuǎn)程FTP站點(diǎn)
2．2．3搭建站點(diǎn)結(jié)構(gòu)
2．2．4文件與文件夾的管理
2．3頁面的總體設(shè)置
2．4Dreamweaver的使用簡(jiǎn)介
2．4．1文本的插入與編輯
2．4．2插入圖像
2．4．3插入并編輯表格
2．4．4插入Flash動(dòng)畫
2．4．5嵌入音頻
2．4．6創(chuàng)建鏈接關(guān)系
2．4．7創(chuàng)建CSS樣式
2．4．8使用CSS樣式美化頁面
2．4．9CSS樣式表的其他操作
2．4．10CSS樣式表濾鏡實(shí)例
2．4．11創(chuàng)建模板
2．4．12制作框架網(wǎng)站
2．4．13創(chuàng)建層
2．4．14利用行為制作動(dòng)態(tài)頁面
2．4．15網(wǎng)頁表格深層探密
2．5本章小結(jié)
2．6習(xí)題
第3章HTML基礎(chǔ)篇
3．1HTML標(biāo)記語言介紹
3．1．1HTML概述
3．1．2HTML文件的基本框架
3．1．3HTML標(biāo)記與HTML屬性
3．2文本排版標(biāo)記
3．2．1標(biāo)題標(biāo)記
3．2．2字體控制標(biāo)記
3．2．3段落標(biāo)記
3．2．4換行標(biāo)記
3．2．5字符樣式標(biāo)記
3．2．6水平標(biāo)記
3．3文字列表標(biāo)記
3．3．1無序列表
3．3．2有序列表
3．3．3定義列表
3．4圖像標(biāo)記
3．5超鏈接標(biāo)記
3．6層標(biāo)記
3．7表格標(biāo)記
3．8框架標(biāo)記
3．9表單
3．9．1表單標(biāo)記
3．9．2表單域標(biāo)記
3．9．3按鈕
3．9．4文本控件
3．9．5單選框
3．9．6復(fù)選框控件
3．9．7文件上傳控件
3．10HTML實(shí)例
3．11本章小結(jié)
3．12習(xí)題
第二部分進(jìn)階篇
第4章層疊式表及頁面美化
4．1CSS的基本概念
4.2HTML與CSS的關(guān)系
4.3CSS語法
4.3.1標(biāo)簽、類、ID和關(guān)聯(lián)選擇器
4.3.2組織標(biāo)記
4.3.3繼承和層疊
4.3.4應(yīng)用和維護(hù)
4.3.5Web標(biāo)準(zhǔn)與驗(yàn)證
4.4CSS樣式
4.4.1CSS顏色和背景
4.4.2字體及文本樣式
4.4.3列表
4.4.4超鏈接
4.4.5邊框和輪廓
4.4.6表格
4.5頁面和瀏覽器標(biāo)記及濾鏡
4.5.1鼠標(biāo)
4.5.2滾動(dòng)條
4.5.3CSS濾鏡
4.6CSS特效實(shí)例
4.7本章小結(jié)
4.8習(xí)題
第5章網(wǎng)頁布局與規(guī)劃
5.1網(wǎng)頁布局基本概念
5.2表格布局
5.2.1表格的基礎(chǔ)
5.2.2使用表格布局案例
5.3框架布局
5.3.1框架基礎(chǔ)
5.3.2使用框架布局案例
5.4DIV+CSS布局方式
5.4.1DIV的布局基礎(chǔ)
5.4.2CSS盒模型
5.4.3CSS標(biāo)記定位
5.4.4CSS浮動(dòng)與堆疊
5.5DIV+CSS布局的綜合示例
5.5.1CSS常用的布局樣式
5.5.2綜合實(shí)例
5.6本章小結(jié)
5.7習(xí)題
第6章JavaScript動(dòng)態(tài)腳本語言
6.1JavaScript的介紹
6.1.1JavaScript的起源
6.1.2JavaScript語言的特點(diǎn)
6.1.3入門例子
6.2JavaScript語法基礎(chǔ)
6.2.1準(zhǔn)備工作
6.2.2JavaScript的基本語法
6.2.3常量、變量以及關(guān)鍵字
6.2.4運(yùn)算符
6.2.5JavaScript的程序結(jié)構(gòu)
6.2.6條件語句
6.2.7switch選擇語句
6.2.8while和do…while循環(huán)語句
6.2.9for循環(huán)語句
6.2.10break與continue語句
6.3函數(shù)
6.3.1函數(shù)的定義
6.3.2函數(shù)的調(diào)用
6.3.3全局變量與局部變量
6.3.4參數(shù)個(gè)數(shù)可變的函數(shù)
6.3.5創(chuàng)建動(dòng)態(tài)函數(shù)
6.3.6JavaScript的內(nèi)置函數(shù)
6.4對(duì)象
6.4.1對(duì)象的概念
6.4.2對(duì)象的屬性
6.4.3對(duì)象的事件
6.4.4對(duì)象的方法
6.4.5對(duì)象的使用
6.4.6對(duì)象與對(duì)象實(shí)例
6.4.7常用JavaScript核心對(duì)象
6.5文檔對(duì)象模型
6.5.1DOM介紹
6.5.2Browser對(duì)象
6.5.3Document對(duì)象
6.5.4getElementById()方法
6.5.5getElementsByName()方法
6.5.6getElementsByTagName()方法
6.5.7getAttribute()方法
6.6JavaScript事件
6.6.1瀏覽器事件
6.6.2鍵盤事件
6.6.3鼠標(biāo)事件
6.6.4表單事件
6.6.5文檔事件
6.6.6在JavaScript中動(dòng)態(tài)指定事件處理程序
6.7JavaScript綜合實(shí)例
6.8本章小結(jié)
6.9習(xí)題
第三部分高級(jí)應(yīng)用篇
第7章HTML 5的高級(jí)應(yīng)用
7.1HTML 5的主要文檔結(jié)構(gòu)標(biāo)簽
7.1.1<header>標(biāo)簽
7.1.2<footer>標(biāo)簽
7.1.3<nav>標(biāo)簽
7.1.4<section>標(biāo)簽
7.1.5<article>標(biāo)簽
7.1.6<aside>標(biāo)簽
7.2音頻和視頻
7.2.1HTML 5的音頻和視頻格式
7.2.2音頻標(biāo)簽<audio>
7.2.3視頻標(biāo)簽<video>
7.3canvas繪圖
7.3.1創(chuàng)建<canvas>元素
7.3.2構(gòu)建繪圖環(huán)境
7.3.3通過JavaScript繪制圖形
7.4HTML 5其他標(biāo)簽
7.4.1<datalist>標(biāo)簽
7.4.2<summary>標(biāo)簽
7.4.3<figcaption>標(biāo)簽和<figure>標(biāo)簽
7.4.4<hgroup>標(biāo)簽
7.4.5<time>標(biāo)簽
7.4.6<mark>標(biāo)簽
7.4.7<ruby>標(biāo)簽和<rt>標(biāo)簽
7.4.8<meter>標(biāo)簽
7.4.9<command>標(biāo)簽
7.4.10<menu>標(biāo)簽
7.5本章小結(jié)
7.6習(xí)題
第8章Photoshop網(wǎng)頁切圖
8.1網(wǎng)頁切圖的基本概念
8.2Photoshop簡(jiǎn)介
8.3切圖工具圖標(biāo)的識(shí)別
8.4切圖基本操作
8.4.1切圖原則
8.4.2切圖的具體步驟
8.5班級(jí)網(wǎng)頁切圖實(shí)例
8.5.1網(wǎng)頁布局設(shè)計(jì)
8.5.2參數(shù)選擇
8.5.3定義站點(diǎn)
8.5.4制作頁面表格
8.5.5在網(wǎng)頁中添加圖片和內(nèi)容
8.6博客網(wǎng)頁切圖實(shí)例
8.6.1背景切圖
8.6.2其他區(qū)域切圖
8.6.3logo切圖
8.6.4添加圖文代碼實(shí)現(xiàn)與CSS修飾
8.7本章小結(jié)
8.8習(xí)題
第四部分綜合案例篇
第9章綜合案例
9.1班級(jí)網(wǎng)站制作
9.1.1網(wǎng)站規(guī)劃與設(shè)計(jì)
9.1.2首頁布局
9.1.3首頁制作
9.1.4二級(jí)頁面的制作
9.2博客制作
9.2.1網(wǎng)頁的結(jié)構(gòu)設(shè)計(jì)
9.2.2用CSS添加樣式
9.2.3內(nèi)容區(qū)域與邊緣的風(fēng)格化
9.2.4博客文章的風(fēng)格化
9.2.5為評(píng)論設(shè)置斑馬紋
9.3在線考試
9.3.1在線考試系統(tǒng)的頁面設(shè)計(jì)
9.3.2在線考試系統(tǒng)的程序設(shè)計(jì)
9.3.3在線考試系統(tǒng)實(shí)現(xiàn)效果
9.4多級(jí)導(dǎo)航菜單制作
9.4.1多級(jí)導(dǎo)航菜單結(jié)構(gòu)
9.4.2用CSS添加樣式
9.4.3多級(jí)導(dǎo)航菜單實(shí)現(xiàn)效果
9.5本章小結(jié)
9.6習(xí)題
第10章網(wǎng)頁設(shè)計(jì)與制作模擬試題和參考答案
10.1模擬試題(一)
10.2模擬試題(二)
10.3模擬試題（一）參考答案
10.4模擬試題(二)參考答案
10.5課后答案
參考文獻(xiàn)
書單推薦
