隨著網(wǎng)頁制作技術(shù)的不斷發(fā)展和完善,市場(chǎng)上有越來越多的網(wǎng)頁制作軟件被使用。目前使用最多的是Dreamweaver、Photoshop和Flash這3款軟件,俗稱“新網(wǎng)頁三劍客”。新網(wǎng)頁三劍客無論從外觀還是功能上都表現(xiàn)得很出色,這3款軟件的組合可以高效地實(shí)現(xiàn)網(wǎng)頁的各種功能,因此,無論是設(shè)計(jì)師還是初學(xué)者,都能更加容易地學(xué)習(xí)和使用,并能夠輕松達(dá)到各自的目標(biāo),真切地體驗(yàn)到CS套裝軟件為創(chuàng)意工作流程帶來的全新變革。
本書不是純粹的軟件教程,書中除了介紹軟件的使用外,更多地介紹了創(chuàng)意設(shè)計(jì)與軟件功能的結(jié)合。全書以軟件的實(shí)際應(yīng)用為主線,針對(duì)DreamweaverCS5、PhotoshopCS5、FlashCS5版本中的各方面知識(shí)進(jìn)行了深入探討。
本書特色
本書由淺入深地講解了網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計(jì)的整個(gè)流程,面向的讀者是初級(jí)專業(yè)人員及網(wǎng)頁設(shè)計(jì)愛好者。為了方便廣大讀者學(xué)習(xí),本書結(jié)合大量的實(shí)際操作進(jìn)行介紹。本書作者具有多年網(wǎng)站設(shè)計(jì)與教學(xué)經(jīng)驗(yàn),在編寫本書時(shí),所有的實(shí)例都親自實(shí)踐與測(cè)試過,力求呈現(xiàn)給讀者的每一個(gè)實(shí)例都是真實(shí)而完整的。本書具有如下特點(diǎn)。
?內(nèi)容系統(tǒng)全面,知識(shí)點(diǎn)分布科學(xué)、合理
本書從入門到提高,從精通到實(shí)戰(zhàn),將知識(shí)點(diǎn)根據(jù)讀者學(xué)習(xí)的難易程度以及在實(shí)際工作中應(yīng)用的輕重順序進(jìn)行安排,真正為讀者的學(xué)習(xí)考慮,便于不同讀者能在學(xué)習(xí)的過程中有針對(duì)性地選擇學(xué)習(xí)內(nèi)容。
?清新的語言風(fēng)格,通俗的敘述方式
本書立足于實(shí)用性,并不像傳統(tǒng)的教科書那樣語言枯燥、無味,理論知識(shí)和實(shí)例效果生硬、無實(shí)際使用價(jià)值,而是深入考慮讀者的實(shí)際需求,版式清晰、典雅,內(nèi)容實(shí)用,就像一位貼心的朋友、老師在您面前將枯燥的計(jì)算機(jī)知識(shí)娓娓道來。
?案例豐富,貼近實(shí)戰(zhàn),提升實(shí)際開發(fā)能力
為使讀者更好地理解和掌握每一章所講述的內(nèi)容,在每章的最后基本上都有“實(shí)戰(zhàn)演練”,將本章的內(nèi)容進(jìn)行了完整的貫通,以幫助讀者鞏固本章的相關(guān)知識(shí)點(diǎn)和提升讀者解決實(shí)際問題的能力。另外筆者還毫無保留地將現(xiàn)實(shí)工作中大量非常實(shí)用的經(jīng)驗(yàn)、技巧貢獻(xiàn)出來。
?海量技巧,邊學(xué)邊練,學(xué)習(xí)更高效
本書的最大特點(diǎn)是對(duì)每個(gè)知識(shí)內(nèi)容從實(shí)例的角度進(jìn)行介紹,以詳細(xì)、直觀的步驟講解相關(guān)操作,適時(shí)添加提示,以補(bǔ)充使用技巧和知識(shí)鏈接,讀者可以快捷地學(xué)習(xí)操作和應(yīng)用,實(shí)戰(zhàn)性非常強(qiáng)。
?超值多媒體教學(xué),海量資源贈(zèng)送
本書所附光盤的內(nèi)容為書中介紹的范例的同步視頻講解、源文件及大量參考素材,供讀者學(xué)習(xí)時(shí)參考和對(duì)照使用。掃描圖書封底的二維碼,可在手機(jī)中在線學(xué)習(xí)教學(xué)視頻。
本書內(nèi)容
本書分為5大部分,共26章,具體結(jié)構(gòu)劃分如下。
第1部分:網(wǎng)頁設(shè)計(jì)與網(wǎng)站開發(fā)準(zhǔn)備部分,包括第1章。這部分主要介紹網(wǎng)站類型概述、網(wǎng)站盈利模式、網(wǎng)頁設(shè)計(jì)常用工具、網(wǎng)站開發(fā)籌備和網(wǎng)站規(guī)劃等知識(shí)。
第2部分:Dreamweaver網(wǎng)頁制作部分,包括第2~14章。這部分主要介紹網(wǎng)頁對(duì)象設(shè)計(jì)、CSS美化、網(wǎng)頁布局,以及利用Dreamweaver設(shè)計(jì)交互網(wǎng)頁效果,使用Dreamweaver開發(fā)動(dòng)態(tài)網(wǎng)站等。
第3部分:Photoshop網(wǎng)頁設(shè)計(jì)部分,包括第15~17章。這部分主要介紹Photoshop操作基礎(chǔ)、Photoshop圖層、文本等核心技術(shù),以及如何使用Photoshop設(shè)計(jì)網(wǎng)頁元素。
第4部分:網(wǎng)頁設(shè)計(jì)和布局實(shí)戰(zhàn)部分,包括第18~19章。這部分主要通過兩個(gè)不同類型的網(wǎng)站介紹了如何使用Photoshop設(shè)計(jì)網(wǎng)站效果圖和如何通過Dreamweaver進(jìn)行重構(gòu)和布局,把平面設(shè)計(jì)效果圖轉(zhuǎn)換為網(wǎng)頁結(jié)構(gòu)效果。
第5部分:Flash網(wǎng)頁互動(dòng)部分,包括第20~26章。這部分主要介紹了Flash操作基礎(chǔ),F(xiàn)lash圖層、文本、動(dòng)畫、元件、繪圖等核心技術(shù),以及如何使用Flash設(shè)計(jì)交互動(dòng)作,并通過一個(gè)綜合實(shí)例演示如何使用Flash設(shè)計(jì)一個(gè)完整的Flash網(wǎng)站。
編者
第1章 網(wǎng)頁設(shè)計(jì)與網(wǎng)站開發(fā)準(zhǔn)備
1.1 網(wǎng)站概述
1.1.1 網(wǎng)站分類
1.1.2 網(wǎng)站定位
1.1.3 網(wǎng)站目標(biāo)分析
1.2 網(wǎng)站盈利模式
1.2.1 廣告費(fèi)
1.2.2 技術(shù)費(fèi)
1.2.3 標(biāo)準(zhǔn)費(fèi)
1.2.4 服務(wù)費(fèi)
1.2.5 平臺(tái)費(fèi)
1.2.6 會(huì)員費(fèi)
1.2.7 增值費(fèi)
1.2.8 游戲費(fèi)
1.2.9 電商盈利費(fèi)
1.3 網(wǎng)頁設(shè)計(jì)工具
1.3.1 Dreamweaver
1.3.2 Photoshop
1.3.3 Flash
1.4 網(wǎng)站開發(fā)籌備
1.4.1 了解網(wǎng)站工作方式
1.4.2 了解動(dòng)態(tài)網(wǎng)站類型
1.4.3 申請(qǐng)域名和購買空間
1.5 網(wǎng)站規(guī)劃
1.5.1 設(shè)計(jì)規(guī)劃
1.5.2 素材籌備
1.5.3 風(fēng)格設(shè)計(jì)
1.5.4 結(jié)構(gòu)設(shè)計(jì)
1.5.5 撰寫網(wǎng)站規(guī)劃書
第2章 使用Dreamweaver新建網(wǎng)頁
視頻講解:77分鐘
2.1 Dreamweaver快速入門
2.2.1 Dreamweaver發(fā)展歷史
2.2.2 熟悉Dreamweaver界面
2.2 定義站點(diǎn)
2.2.1 實(shí)戰(zhàn)演練:定義虛擬目錄
2.2.2 實(shí)戰(zhàn)演練:定義靜態(tài)站點(diǎn)
2.2.3 實(shí)戰(zhàn)演練:定義動(dòng)態(tài)站點(diǎn)
2.2.4 實(shí)戰(zhàn)演練:測(cè)試本地站點(diǎn)
2.3 案例實(shí)戰(zhàn):快速新建頁面
2.4 設(shè)置頁面屬性
2.4.1 設(shè)置外觀
2.4.2 設(shè)置鏈接
2.4.3 設(shè)置標(biāo)題
2.4.4 設(shè)置標(biāo)題/編碼
2.4.5 設(shè)置跟蹤圖像
2.5 定義網(wǎng)頁元信息
2.5.1 實(shí)戰(zhàn)演練:設(shè)置網(wǎng)頁字符編碼
2.5.2 實(shí)戰(zhàn)演練:設(shè)置網(wǎng)頁關(guān)鍵詞
2.5.3 實(shí)戰(zhàn)演練:設(shè)置網(wǎng)頁說明
2.6 HTML基礎(chǔ)
2.6.1 HTML文檔基本結(jié)構(gòu)
2.6.2 HTML基本語法
2.6.3 HTML標(biāo)簽
2.6.4 HTML屬性
2.7 案例實(shí)戰(zhàn):使用編碼設(shè)計(jì)網(wǎng)頁
2.8 編輯站點(diǎn)
2.8.1 切換站點(diǎn)
2.8.2 編輯文件
2.8.3 查看文件
2.8.4 快速定位
第3章 設(shè)計(jì)網(wǎng)頁文本
視頻講解:97分鐘
3.1 在網(wǎng)頁中輸入文本
3.2 定義文本屬性
3.3 定義文本格式
3.3.1 實(shí)戰(zhàn)演練:設(shè)置段落文本
3.3.2 實(shí)戰(zhàn)演練:設(shè)置標(biāo)題文本
3.3.3 實(shí)戰(zhàn)演練:設(shè)置預(yù)定義文本
3.4 案例實(shí)戰(zhàn):定義類文本
3.5 定義字體樣式
3.5.1 實(shí)戰(zhàn)演練:設(shè)置字體類型
3.5.2 實(shí)戰(zhàn)演練:設(shè)置字體顏色
3.5.3 實(shí)戰(zhàn)演練:設(shè)置藝術(shù)字體
3.5.4 實(shí)戰(zhàn)演練:設(shè)置字體大小
3.6 定義段落樣式
3.6.1 實(shí)戰(zhàn)演練:強(qiáng)制換行
3.6.2 實(shí)戰(zhàn)演練:對(duì)齊文本
3.6.3 實(shí)戰(zhàn)演練:縮進(jìn)文本
3.7 定義列表文本
3.7.1 實(shí)戰(zhàn)演練:設(shè)計(jì)項(xiàng)目列表
3.7.2 實(shí)戰(zhàn)演練:設(shè)計(jì)編號(hào)列表
3.7.3 實(shí)戰(zhàn)演練:設(shè)計(jì)定義列表
3.7.4 實(shí)戰(zhàn)演練:設(shè)計(jì)嵌套列表結(jié)構(gòu)
3.8 定義特殊文本
3.8.1 實(shí)戰(zhàn)演練:設(shè)計(jì)鏈接文本
3.8.2 實(shí)戰(zhàn)演練:輸入特殊字符
3.8.3 實(shí)戰(zhàn)演練:文本批量查找和替換
3.9 綜合案例
3.9.1 設(shè)計(jì)榜單欄
3.9.2 美化正文版式
第4章 使用網(wǎng)頁圖像和多媒體
視頻講解:79分鐘
4.1 認(rèn)識(shí)網(wǎng)頁圖像
4.2 在網(wǎng)頁中插入圖像
4.2.1 實(shí)戰(zhàn)演練:插入圖像
4.2.2 實(shí)戰(zhàn)演練:插入翻轉(zhuǎn)圖像
4.2.3 實(shí)戰(zhàn)演練:插入圖像占位符
4.2.4 實(shí)戰(zhàn)演練:插入Fireworks HTML
4.3 設(shè)置圖像屬性
4.4 編輯網(wǎng)頁圖像
4.4.1 實(shí)戰(zhàn)演練:調(diào)整圖像大小
4.4.2 實(shí)戰(zhàn)演練:裁剪圖像
4.4.3 實(shí)戰(zhàn)演練:調(diào)整圖像亮度和對(duì)比度
4.4.4 實(shí)戰(zhàn)演練:銳化圖像
4.4.5 實(shí)戰(zhàn)演練:優(yōu)化圖像
4.5 案例實(shí)戰(zhàn):使用Photoshop外部編輯器
4.6 案例實(shí)戰(zhàn):設(shè)計(jì)新聞內(nèi)頁
4.7 案例實(shí)戰(zhàn):在網(wǎng)頁中插入Flash動(dòng)畫
4.8 案例實(shí)戰(zhàn):在網(wǎng)頁中插入FLV視頻
4.9 在網(wǎng)頁中插入插件
4.9.1 實(shí)戰(zhàn)演練:設(shè)計(jì)背景音樂
4.9.2 實(shí)戰(zhàn)演練:插入音頻
4.9.3 實(shí)戰(zhàn)演練:插入視頻
4.10 案例實(shí)戰(zhàn):插入HTML5音頻
4.11 案例實(shí)戰(zhàn):插入HTML5視頻
第5章 使用CSS美化網(wǎng)頁
視頻講解:96分鐘
5.1 了解CSS
5.2 使用CSS
5.2.1 CSS基本結(jié)構(gòu)
5.2.2 CSS基本用法
5.2.3 CSS樣式表
5.2.4 導(dǎo)入外部樣式表
5.2.5 CSS注釋和空格
5.3 CSS屬性和值
5.3.1 CSS屬性
5.3.2 CSS屬性值
5.4 CSS選擇器
5.5 CSS特性
5.5.1 CSS繼承性
5.5.2 CSS層疊性
5.6 CSS設(shè)備類型
5.7 使用CSS設(shè)計(jì)器
5.7.1 認(rèn)識(shí)CSS設(shè)計(jì)器
5.7.2 實(shí)戰(zhàn)演練:創(chuàng)建和附加樣式表
5.7.3 實(shí)戰(zhàn)演練:定義媒體查詢
5.7.4 實(shí)戰(zhàn)演練:定義CSS選擇器
5.7.5 實(shí)戰(zhàn)演練:設(shè)置CSS屬性
5.8 使用CSS規(guī)則
5.8.1 實(shí)戰(zhàn)演練:新建CSS規(guī)則
5.8.2 實(shí)戰(zhàn)演練:定義文本樣式
5.8.3 實(shí)戰(zhàn)演練:定義背景樣式
5.8.4 實(shí)戰(zhàn)演練:定義區(qū)塊樣式
5.8.5 實(shí)戰(zhàn)演練:定義方框樣式
5.8.6 實(shí)戰(zhàn)演練:定義邊框樣式
5.8.7 實(shí)戰(zhàn)演練:定義列表樣式
5.8.8 實(shí)戰(zhàn)演練:定義定位樣式
5.8.9 實(shí)戰(zhàn)演練:定義擴(kuò)展樣式
第6章 設(shè)計(jì)超鏈接和導(dǎo)航菜單
視頻講解:83分鐘
6.1 了解超鏈接
6.1.1 絕對(duì)路徑
6.1.2 相對(duì)路徑
6.1.3 根路徑
6.2 定義鏈接
6.2.1 實(shí)戰(zhàn)演練:使用屬性面板
6.2.2 實(shí)戰(zhàn)演練:使用超鏈接對(duì)話框
6.2.3 實(shí)戰(zhàn)演練:使用代碼定義鏈接
6.3 應(yīng)用鏈接
6.3.1 實(shí)戰(zhàn)演練:定義錨點(diǎn)鏈接
6.3.2 實(shí)戰(zhàn)演練:定義電子郵箱鏈接
6.3.3 實(shí)戰(zhàn)演練:定義空鏈接
6.4 案例實(shí)戰(zhàn):定義圖像熱點(diǎn)
6.5 設(shè)計(jì)鏈接樣式
6.5.1 定義基本樣式
6.5.2 定義下劃線樣式
6.5.3 定義立體樣式
6.5.4 定義動(dòng)態(tài)背景樣式
6.6 定義列表樣式
6.6.1 實(shí)戰(zhàn)演練:定義列表樣式
6.6.2 實(shí)戰(zhàn)演練:設(shè)計(jì)列表項(xiàng)目水平顯示
6.6.3 實(shí)戰(zhàn)演練:自定義項(xiàng)目列表符號(hào)
6.7 案例實(shí)戰(zhàn):設(shè)計(jì)列表版式
6.7.1 設(shè)計(jì)燈箱廣告
6.7.2 設(shè)計(jì)選項(xiàng)卡
6.8 案例實(shí)戰(zhàn):設(shè)計(jì)菜單樣式
6.8.1 設(shè)計(jì)水平菜單
6.8.2 設(shè)計(jì)垂直菜單
6.8.3 設(shè)計(jì)多級(jí)菜單
第7章 設(shè)計(jì)表格
視頻講解:57分鐘
7.1 在網(wǎng)頁中插入表格
7.2 設(shè)置表格屬性
7.2.1 設(shè)置表格框?qū)傩?
7.2.2 設(shè)置單元格屬性
7.3 操作表格
7.3.1 實(shí)戰(zhàn)演練:選擇表格
7.3.2 實(shí)戰(zhàn)演練:選擇行與列
7.3.3 實(shí)戰(zhàn)演練:選擇單元格
7.3.4 實(shí)戰(zhàn)演練:調(diào)整表格大小
7.3.5 實(shí)戰(zhàn)演練:清除和均化表格大小
7.3.6 實(shí)戰(zhàn)演練:增加行和列
7.3.7 實(shí)戰(zhàn)演練:刪除行和列
7.3.8 實(shí)戰(zhàn)演練:復(fù)制、剪切和粘貼單元格
7.3.9 實(shí)戰(zhàn)演練:合并和拆分單元格
7.4 操作表格數(shù)據(jù)
7.4.1 實(shí)戰(zhàn)演練:導(dǎo)入表格數(shù)據(jù)
7.4.2 實(shí)戰(zhàn)演練:導(dǎo)出表格數(shù)據(jù)
7.4.3 實(shí)戰(zhàn)演練:排序表格數(shù)據(jù)
7.5 定義表格樣式
7.5.1 實(shí)戰(zhàn)演練:定義細(xì)線表格
7.5.2 實(shí)戰(zhàn)演練:定義粗邊表格
7.5.3 實(shí)戰(zhàn)演練:定義虛線表格
7.5.4 實(shí)戰(zhàn)演練:定義雙線表格
7.5.5 實(shí)戰(zhàn)演練:定義宮形表格
7.5.6 實(shí)戰(zhàn)演練:定義單線表格
7.6 案例實(shí)戰(zhàn):設(shè)計(jì)復(fù)雜表格
7.6.1 重構(gòu)表格
7.6.2 美化樣式
7.7 案例實(shí)戰(zhàn):設(shè)計(jì)表格頁面
第8章 設(shè)計(jì)表單
視頻講解:41分鐘
8.1 認(rèn)識(shí)表單結(jié)構(gòu)
8.1.1 輸入框
8.1.2 文本區(qū)域
8.1.3 選擇框
8.2 在網(wǎng)頁中插入表單
8.2.1 實(shí)戰(zhàn)演練:定義表單結(jié)構(gòu)
8.2.2 實(shí)戰(zhàn)演練:插入文本框
8.2.3 實(shí)戰(zhàn)演練:插入密碼域
8.2.4 實(shí)戰(zhàn)演練:插入文本區(qū)域
8.2.5 實(shí)戰(zhàn)演練:插入隱藏域
8.2.6 實(shí)戰(zhàn)演練:插入按鈕
8.2.7 實(shí)戰(zhàn)演練:插入圖像域
8.2.8 實(shí)戰(zhàn)演練:插入文件域
8.2.9 實(shí)戰(zhàn)演練:插入單選按鈕
8.2.10 實(shí)戰(zhàn)演練:插入復(fù)選框
8.2.11 實(shí)戰(zhàn)演練:插入選擇框
8.2.12 實(shí)戰(zhàn)演練:插入標(biāo)簽和字段集
8.3 定義表單樣式
8.3.1 實(shí)戰(zhàn)演練:表單字體樣式
8.3.2 實(shí)戰(zhàn)演練:表單邊框樣式
8.3.3 實(shí)戰(zhàn)演練:表單背景樣式
8.4 高級(jí)表單設(shè)計(jì)
8.4.1 實(shí)戰(zhàn)演練:重構(gòu)表單結(jié)構(gòu)
8.4.2 實(shí)戰(zhàn)演練:優(yōu)化視覺設(shè)計(jì)
第9章 設(shè)計(jì)圖文樣式和背景圖
視頻講解:61分鐘
9.1 設(shè)計(jì)圖片樣式
9.1.1 實(shí)戰(zhàn)演練:定義圖片大小
9.1.2 實(shí)戰(zhàn)演練:定義圖片邊框
9.1.3 實(shí)戰(zhàn)演練:定義圖片透明度
9.1.4 實(shí)戰(zhàn)演練:定義圖片對(duì)齊方式
9.2 設(shè)計(jì)背景樣式
9.2.1 定義背景顏色
9.2.2 定義背景圖像
9.2.3 定義顯示方式
9.2.4 定義顯示位置
9.2.5 定義固定顯示
9.3 案例實(shí)戰(zhàn)
9.3.1 設(shè)計(jì)新聞列表欄目
9.3.2 設(shè)計(jì)圖文混排版面
9.3.3 設(shè)計(jì)半透明效果欄目
9.3.4 使用CSS Sprites設(shè)計(jì)新歌榜
9.3.5 無圖定圓角
9.3.6 一圖定圓角
9.3.7 兩圖定圓角
9.3.8 四圖定圓角
第10章 使用行為設(shè)計(jì)網(wǎng)頁特效
視頻講解:45分鐘
10.1 行為概述
10.2 添加與編輯行為
10.2.1 增加行為
10.2.2 操作行為
10.2.3 瀏覽器事件簡(jiǎn)介
10.3 使用預(yù)定義行為
10.3.1 實(shí)戰(zhàn)演練:設(shè)計(jì)圖像輪換
10.3.2 實(shí)戰(zhàn)演練:設(shè)計(jì)彈窗
10.3.3 實(shí)戰(zhàn)演練:在頁面中拖動(dòng)對(duì)象
10.3.4 實(shí)戰(zhàn)演練:定義在指定區(qū)域內(nèi)拖放對(duì)象
10.3.5 實(shí)戰(zhàn)演練:定義投放吸附特效
10.3.6 實(shí)戰(zhàn)演練:定義僅能拖動(dòng)標(biāo)題欄特效
10.3.7 實(shí)戰(zhàn)演練:跟蹤拖動(dòng)操作
10.3.8 實(shí)戰(zhàn)演練:使用行為動(dòng)態(tài)控制CSS
10.3.9 實(shí)戰(zhàn)演練:使用行為操作HTML文檔
10.3.10 實(shí)戰(zhàn)演練:使用行為定義自動(dòng)跳轉(zhuǎn)的下拉菜單
10.4 使用jQuery效果
10.4.1 實(shí)戰(zhàn)演練:使用搖晃效果
10.4.2 實(shí)戰(zhàn)演練:使用縮放效果