《網頁設計與制作教程:Photoshop CS3/Flash 8/Dreamweaver 8》主要由4部分組成。第1部分介紹了網頁的主要設計要素、網頁設計原則、網頁設計和開發流程,第2部分以Photoshop CS3軟件為例介紹了網頁中圖像元素的設計和制作方法,第3部分以Flash 8網頁動畫制作軟件為例介紹了網頁中動畫設計和制作方法,第4部分以Dreamweaver 8為例介紹了網站建設和網頁框架設計和集成方法。
《網頁設計與制作教程:Photoshop CS3/Flash 8/Dreamweaver 8》是介紹網頁設計的基礎教程,可作為高等院校計算機科學與技術、信息技術等專業網頁設計課程的教材,也可以作為非信息類專業和藝術設計類等專業網頁設計課程教材。同時,《網頁設計與制作教程:Photoshop CS3/Flash 8/Dreamweaver 8》也可作為各類網頁設計愛好者和網站開發和設計人員的一本專業參考書。
打破傳統,網頁圖像設計選用Photoshop CS3;內容豐富,涵蓋常用網頁元素的設計與制作;實例貫穿,案例組織圍繞5iDM數字媒體網站。《網頁設計與制作教程:Photoshop CS3/Flash 8/Dreamweaver 8》是介紹網頁設計的基礎教程。《網頁設計與制作教程:Photoshop CS3/Flash 8/Dreamweaver 8》不僅介紹了網頁設計的基本原則和網頁中數字媒體元素的組成,而且圍繞著網頁設計的基本元素,如文本、圖像、按鈕、導航條和動畫介紹了相關元素的設計和制作方法。書中所設計的元素緊緊圍繞著5iDM網站需求而展開。元素設計分別采用目前主流的設計軟件Photoshop CS3、Flash 8和Drearnweaver 8。
本書是介紹網頁設計的基礎教程。本書不僅介紹了網頁設計的基本原則和網頁中數字媒體元素的組成,而且圍繞著網頁設計的基本元素,如文本、圖像、按鈕、導航條和動畫介紹了相關的元素設計和制作方法。書中所設計的元素緊緊圍繞著5iDM網站需求而展開。元素設計分別采用目前主流的設計軟件PhotoshopCS3、Flash8和Dreamweaver8。考慮到網頁設計軟件的通用性,網頁中圖像設計采用PhotoshopCS3軟件。
本書特色:
(1)打破傳統的網頁設計三劍客組合,網頁圖像設計選用主流的設計軟件Photoshop,從而使網頁圖像設計方法更具有通用性和實用性。
(2)網頁元素設計和內容組織緊緊圍繞5iDM數字媒體網站而展開。前面的素材設計為后面的網站建設、網頁設計和多媒體內容集成服務,克服了傳統網頁設計教程內容零散不系統的缺陷。
(3)網頁設計內容的講解以網頁設計元素案例的方法組織,使讀者通過案例詳解掌握相關的軟件操作方法、設計和制作技能,有助于提高學生的設計實踐技能。
(4)書中的案例富有代表性,涵蓋了常用的網頁元素設計,如跟圖像相關的元素網頁Logo圖標、Banner圖像、按鈕、導航條和網頁圖像動畫都有詳細介紹。
本書內容的組織主要分4個部分:
第1部分(第1章)首先介紹了網頁的主要設計要素、網頁設計原則、網頁設計和開發流程,以及常用的網頁設計軟件,使讀者對網頁設計有粗略的概括認識。后面的內容圍繞著網頁元素設計——圖像設計、動畫設計和網站建設和網頁設計展開。
第2部分(第2~4章)以:PhotoshopCS3軟件為例介紹了軟件的基本操作和圖像處理的常用方法。重點詳盡地介紹了網頁中圖像元素的設計和制作方法,尤其以5iDM數字媒體網站為例詳細介紹了網頁中Logo圖像、Banner圖像、圖像按鈕和背景圖像的設計方法。
第1章 基礎知識 1
1.1 認識網頁 1
1.1.1 網站和網頁 1
1.1.2 靜態網頁和動態網頁 1
1.1.3 形象頁、主頁和欄目頁 2
1.2 網頁的主要設計元素 4
1.2.1 網頁標識設計 4
1.2.2 網頁導航設計 5
1.2.3 網頁版式設計 5
1.2.4 網頁色彩設計 7
1.2.5 網頁音效設計 10
1.3 網頁設計原則 10
1.4 網頁設計流程 11
1.5 網頁設計的主要軟件 11
1.5.1 Photoshop CS3——網頁頁面設計軟件 11
1.5.2 Firworks 8——網頁圖像設計軟件 12
1.5.3 Flash 8——網頁動畫制作軟件 12
1.5.4 Dreamweaver 8——網頁頁面制作軟件 13
小結 13
習題 14
第2章 走進Photoshop 15
2.1 Photoshop的應用 15
2.1.1 圖像處理和圖像合成 15
2.1.2 平面設計 16
2.1.3 產品設計 16
2.1.4 網頁設計 17
2.2 Photoshop CS3基本環境 17
2.2.1 菜單欄 18
2.2.2 工具箱 18
2.2.3 工具狀態欄 19
2.2.4 圖像窗口 19
2.2.5 調板 19
2.3 Photoshop CS3基本概念 21
2.3.1 像素 21
2.3.2 位圖和矢量圖 22
2.3.3 網頁設計中常用的圖像格式 22
2.3.4 圖像分辨率 23
2.3.5 顏色模式 24
2.4 Photoshop CS3基本操作 26
2.4.1 新建、打開圖像文件 26
2.4.2 保存圖像文件 27
2.4.3 圖像顯示比例控制 28
2.4.4 單位和標尺的設置 28
2.4.5 參考線、網格和切片 29
2.4.6 后退命令和歷史記錄調板 30
2.4.7 圖層 31
小結 34
習題 34
第3章 圖像處理 36
3.1 修飾修復圖像 36
3.1.1 仿制圖章工具 36
3.1.2 污點修復畫筆工具 36
3.1.3 修復畫筆工具 37
3.1.4 修補工具 37
3.1.5 紅眼工具 38
3.1.6 模糊/銳化工具 39
3.1.7 減淡/加深工具 39
3.1.8 海綿工具 40
3.2 裁剪圖像 40
3.3 變換圖像 41
3.3.1 縮放 41
3.3.2 旋轉 42
3.3.3 斜切 42
3.3.4 扭曲 42
3.3.5 透視 43
3.3.6 變形 43
3.4 選取圖像與摳圖 45
3.4.1 快速選擇工具 45
3.4.2 魔棒工具 46
3.4.3 魔術橡皮擦工具 46
3.4.4 鋼筆工具 47
3.4.5 抽出濾鏡 48
3.5 調整圖像色彩 49
3.5.1 創建灰度效果圖像 50
3.5.2 增強圖像的色彩飽和度 51
3.5.3 創建反相效果的圖像 52
3.5.4 創建黑白圖像 52
3.5.5 使用【色調分離】命令創建特殊效果圖像 53
3.5.6 使用【漸變映射】命令創建漸變色彩效果圖像 53
3.5.7 使用【匹配顏色】命令改變圖像色彩 54
3.5.8 調整圖像的亮度和對比度 54
3.6 使用濾鏡創建特殊效果的圖像 55
3.6.1 風格化 55
3.6.2 畫筆描邊 56
3.6.3 模糊 57
3.6.4 素描 58
3.6.5 紋理 59
3.6.6 像素化 60
3.6.7 渲染 61
3.7 使用圖層蒙版合成圖像 62
3.7.1 創建圖層蒙版 62
3.7.2 刪除圖層蒙版 62
3.7.3 編輯圖層蒙版 63
3.8 批處理圖像 65
3.8.1 動作 65
3.8.2 批處理 67
實例一:使用批處理命令修改圖像大小 68
實例二:使用批處理命令重命名圖像 69
3.8.3 Web照片畫廊 71
小結 72
習題 73
第4章 常見網頁元素設計 74
4.1 網頁背景圖案的制作 74
4.1.1 斜線圖案的制作 74
實例一:細斜線圖案的制作 75
實例二:粗斜線圖案的制作 76
4.1.2 立體圖案的制作 79
4.1.3 文字圖案的制作 81
4.1.4 其他類型圖案的制作 82
4.2 LOGO設計制作 83
4.2.1 5iDM網站LOGO設計制作 84
4.2.2 5iDM網站論壇標簽設計制作 85
4.2.3 以圖形為主的網站LOGO制作 88
4.3 按鈕設計制作 90
4.3.1 5iDM網站的導航按鈕制作 90
4.3.2 水晶按鈕設計制作 92
4.3.3 具有凹槽效果的按鈕制作 95
4.4 Banner和導航菜單的設計制作 97
4.4.1 5iDM網站的Banner設計 97
4.4.2 5iDM網站的導航設計 100
小結 101
習題 101
第5章 Flash 8軟件概述及基本操作 103
5.1 Flash 8軟件概述 103
5.1.1 Flash 8特點 103
5.1.2 軟件界面 104
5.1.3 工具欄 105
5.1.4 面板 106
5.2 Flash 8繪圖操作 107
5.2.1 Flash文檔創建 107
5.2.2 文檔屬性設置 107
5.2.3 Flash文檔保存 108
5.2.4 Flash 8繪圖模式 108
5.2.5 繪圖工具使用 109
5.3 Flash 8時間軸及幀操作 111
5.3.1 時間軸 111
5.3.2 幀和關鍵幀 111
5.3.3 圖層 112
5.4 Flash 8元件和實例 114
5.4.1 元件和實例 114
5.4.2 元件類型 114
5.4.3 風車元件創建 114
5.5 Flash文件發布和播放 116
5.5.1 Flash文件發布設置 116
5.5.2 Flash動畫文件播放 117
小結 117
習題 118
第6章 Flash 8動畫分類及網頁文字動畫 119
6.1 幀并幀動畫 119
6.1.1 幀并幀動畫 119
6.1.2 笑臉動畫 119
6.2 漸變動畫 120
6.2.1 形狀漸變動畫 120
6.2.2 運動漸變動畫 121
6.3 網頁文字動畫創作 124
6.3.1 文本類型 124
6.3.2 字體安裝 124
6.3.3 文本編輯 124
6.3.4 網頁文本動畫制作舉例 124
小結 133
習題 133
第7章 網頁中常用圖像動畫創作 134
7.1 網頁圖像基本操作 134
7.1.1 矢量圖形和位圖圖像 134
7.1.2 Flash 8中支持的圖形圖像格式 134
7.1.3 位圖圖像、矢量圖形導入 135
7.1.4 處理導入的位圖圖像 135
7.2 圖像動畫創作 139
7.2.1 圖像漸變動畫 139
7.2.2 圖像遮罩動畫 140
7.2.3 圖像引導動畫 150
7.2.4 模糊圖像動畫 152
7.3 網頁圖像動畫 153
小結 155
習題 155
第8章 交互式網頁動畫創作 156
8.1 ActionScript腳本語言 156
8.1.1 ActionScript語言的概述 156
8.1.2 腳本語言屬性設置 158
8.1.3 動作面板 159
8.1.4 影片瀏覽器面板 160
8.2 按鈕腳本動畫制作 160
8.2.1 按鈕元件 160
8.2.2 利用按鈕庫編輯按鈕動畫 162
8.2.3 自定義按鈕動畫 166
8.3 幀腳本動畫制作 168
8.3.1 幀動作 169
8.3.2 幀腳本動畫實例 169
8.3.3 雪花飛舞幀腳本動畫制作 171
8.4 影片剪輯腳本動畫制作 173
小結 175
習題 175
第9章 Dreamweaver 8基礎知識 176
9.1 Dreamweaver 8基本概念 176
9.2 Dreamweaver 8基本工作環境 176
9.2.1 工作環境 176
9.2.2 工具欄 178
9.2.3 【屬性】面板 179
9.2.4 面板組 180
9.3 Dreamweaver 8基本操作 180
9.3.1 站點的基本操作 180
9.3.2 文件的命名和管理 183
9.3.3 HTML基本概念 183
小結 184
習題 185
第10章 靜態網頁設計與制作 186
10.1 表格 186
10.2 文本編輯 189
10.2.1 文本編輯 189
10.2.2 CSS樣式表 189
10.2.3 【CSS樣式】面板 189
10.3 網頁圖像編輯 191
10.3.1 網頁圖像 191
10.3.2 圖像插入 191
10.4 網頁多媒體元素編輯 193
10.4.1 向Web頁面中添加音頻 193
10.4.2 向Web頁面中添加視頻 195
10.4.3 向Web頁面中添加Flash動畫 196
10.5 利用表格布局網頁 196
10.6 利用布局表格設計網頁 200
10.6.1 布局模式 200
10.6.2 設置布局模式首選參數 201
10.6.3 布局表格基本操作 201
10.6.4 利用布局表格設計網頁 204
10.7 利用層布局頁面 210
10.7.1 設置層首選參數 210
10.7.2 創建層 210
10.7.3 設置層的屬性 211
10.7.4 【層】面板使用 211
10.7.5 層操作 212
10.7.6 層和表格轉換 213
10.7.7 利用層設計頁面 214
小結 216
習題 217
第11章 網頁的交互式設計與制作 218
11.1 表單頁面制作 218
11.1.1 表單操作 218
11.1.2 創建HTML表單 218
11.1.3 網頁表單元素的插入 219
11.1.4 注冊表單頁面設計與制作 223
11.2 網頁的超鏈接 226
11.2.1 HTML的超鏈接 226
11.2.2 常用鏈接的制作 227
11.3 行為的添加 235
11.3.1 制作彈出信息效果 235
11.3.2 制作打開瀏覽器窗口效果 235
11.3.3 制作彈出菜單效果 236
11.3.4 制作播放音樂效果 238
11.4 站點的測試和上傳 238
11.4.1 測試站點 238
11.4.2 上傳站點 239
小結 240
習題 240
參考文獻 241
第1章 基礎知識
本章介紹學習網頁設計所必須具備的基本知識,主要包括網頁的基本概念、分類、設計流程、設計要素以及進行網頁設計應遵循的基本原則。通過本章的學習,讀者應掌握什么是靜態網頁和動態網頁、網頁設計流程中各個環節及功能、網頁中各設計要素的表現特點、制作網頁的相關軟件工具等知識點。尤其要深刻理解:一個優秀的網頁設計,并非只是軟件的簡單實現,更重要的是對網頁進行美感和功能方面的整體設計與策劃,它是藝術和技術的整合體。
1.1 認識網頁
Internet越來越影響到現實生活,網站是一個企業對外的窗口,是一個人對外的名片。隨著網絡與人們日常工作、生活關系的緊密,更多的企業和個人選擇通過Internet展示自己。企業通過Internet迅速提高了自己的知名度,縮短了產品與用戶見面的時間,個人通過Internet有效地宣傳了自己,網絡越來越深刻地改變著人們的生活。
1.1.1 網站和網頁
網站是由許多網頁組成的一個集合,網頁是單一的頁面。如果將Internet上的資源視為—個大型圖書館,那么“網站”就像圖書館中的一本本書,而“網頁”則是書中的某一頁,多個網頁合在一起便組成了一個網站。每一個網頁都擁有一個被稱為“統一資源定位符”(URL)的唯一地址,就像書本中的頁數一樣,是唯一的。通常URL地址的表現形式為:http://www.jdsos.corn/index.htrnl。一個網站至少有一個網頁,網頁包含于網站中。網站中網頁的數量多少是沒有上限的,只要用戶的硬盤空間允許,則可以在一個網站中放人任意多的網頁。
網站中的網頁是互相連接的。單擊某一網頁中被稱為超級鏈接的文本或圖形就可以鏈接到其他頁面。