介紹:
設(shè)計(jì)好美觀的畫面還得要實(shí)現(xiàn)成為真正的網(wǎng)站，教你運(yùn)用Photoshop切割、Dreamweaver編輯與CSS排版設(shè)定，完整披露專業(yè)網(wǎng)站制作過(guò)程，輕松掌握各式網(wǎng)站版面技巧＋CSS排版才是王道！ ■ 網(wǎng)頁(yè)不只講究視覺，還必須創(chuàng)造無(wú)限變化的可能，無(wú)痛學(xué)習(xí)JavaScript、CSS、jQuery的設(shè)計(jì)關(guān)鍵，讓你在競(jìng)爭(zhēng)激烈的市場(chǎng)脫穎而出！ ■ 精心篩選最新、最具代表性的特效，均標(biāo)示所支持的瀏覽器，可以隨心所欲找到自己需要的效果，做出有趣又驚喜的專業(yè)網(wǎng)站。
作譯者:
李啟宏，現(xiàn)任優(yōu)勢(shì)數(shù)位設(shè)計(jì)學(xué)苑姿深課程專任講師。
經(jīng)歷：中國(guó)臺(tái)灣資深多媒體網(wǎng)頁(yè)設(shè)計(jì)師、易禧科技多媒體網(wǎng)頁(yè)設(shè)計(jì)、平面設(shè)計(jì)課程講師、“文化大學(xué)推廣教育部”多媒體設(shè)計(jì)課程講師、新視界雜志、dpi設(shè)計(jì)流行創(chuàng)意雜志專欄作家。
專長(zhǎng)：多媒體網(wǎng)頁(yè)設(shè)計(jì)、平面設(shè)計(jì)、網(wǎng)頁(yè)視覺設(shè)計(jì)整合
認(rèn)證：ACE on Photoshop CS5認(rèn)證
著作：《網(wǎng)頁(yè)設(shè)計(jì)驚嘆號(hào)：Dreamweaver×PHP互動(dòng)網(wǎng)站直擊》、《網(wǎng)頁(yè)設(shè)計(jì)驚嘆號(hào)：Dreamweaver至高的網(wǎng)頁(yè)特效188招》等。
目錄:
Chapter00 CS6 新功能與本書使用方法
Dreamweaver CS6 新增功能介紹
關(guān)于光盤
定義隨書練習(xí)網(wǎng)站
范例動(dòng)畫展示 10
Chapter01 Dreamweaver 中的HTML 與CSS 設(shè)置
1-1 HTML 簡(jiǎn)介與常用的HTML 標(biāo)簽 12
1-1-1 Dreamweaver 打開各式版本的HTML 文件 12
1-1-2 常用HTML 標(biāo)簽 14
1-2 CSS 規(guī)則與Dreamweaver 中的CSS 設(shè)置 20
1-2-1 行內(nèi)樣式 21
1-2-2 嵌入樣式 21
1-2-3 新建CSS 規(guī)則與CSS 應(yīng)用方式 23
1-2-4 鏈接外部樣式 27
1-2-5 CSS 控制面板 30
1-3 Dreamweaver 完整CSS 設(shè)置與使用 31
1-3-1 CSS 規(guī)則定義[1]：類型屬性 31
1-3-2 CSS 規(guī)則定義[2]：區(qū)塊屬性 31
1-3-3 CSS 規(guī)則定義[3]：背景屬性 32
1-3-4 CSS 規(guī)則定義[4]：列表屬性 32
1-3-5 CSS 規(guī)則定義[5]：邊框?qū)傩?33
1-3-6 CSS 規(guī)則定義[6]：方框?qū)傩?33
1-3-7 CSS 規(guī)則定義[7]：定位屬性 34
1-3-8 CSS 規(guī)則定義[8]：擴(kuò)展屬性 35
1-3-9 CSS 規(guī)則定義[9]：過(guò)渡屬性 35
1-4 Adobe Widget Browser 快速加入jQuery 組件 35
Chapter02 表格與框架布局編排技法
2-1 Photoshop 布局設(shè)計(jì)切割 40
2-1-1 布局切割技巧 40
2-1-2 切片設(shè)置 43
2-1-3 存儲(chǔ)為網(wǎng)頁(yè)設(shè)置 43
2-2 表格布局編排 46
2-2-1 以Photoshop 切割儲(chǔ)存出的表格布局編排 46
2-2-2 表格的整理與布局編排技巧 49
2-2-3 歡迎頁(yè)布局編排 55
2-2-4 首頁(yè)布局編排 58
2-2-5 分欄式頁(yè)面布局編排 61
2-3 CSS 背景圖布局應(yīng)用 65
2-3-1 CSS 背景圖設(shè)置 65
2-3-2 固定背景圖布局應(yīng)用 67
2-3-3 單欄式背景圖布局應(yīng)用 69
2-3-4 單元格背景圖布局應(yīng)用 73
2-3-5 半透明背景圖布局應(yīng)用 77
2-4 框架與內(nèi)框架布局 80
2-4-1 構(gòu)建框架組合布局 80
2-4-2 上下三行式框架布局 83
2-4-3 上中下分雙欄式框架布局 87
2-4-4 構(gòu)建內(nèi)框架布局 92
2-4-5 單欄式內(nèi)框架布局 94
2-4-6 單欄式內(nèi)框架網(wǎng)站構(gòu)建 97
Chapter03 CSS 與CSS 布局編排整合技巧
3-1 CSS 樣式初步應(yīng)用 100
3-1-1 文字屬性應(yīng)用 100
3-1-2 色塊式文字標(biāo)題 105
3-1-3 圖片文字標(biāo)題 106
3-1-4 插圖標(biāo)示文字標(biāo)題 108
3-1-5 背景圖文字標(biāo)題 109
3-1-6 圖片邊框與編排應(yīng)用 111
3-1-7 鏈接文字與CSS 應(yīng)用 113
3-1-8 鏈接文字按鈕 116
3-1-9 列表與CSS 按鈕設(shè)計(jì) 118
3-1-10 CSS 直向色塊按鈕 121
3-1-11 CSS 直向圖片按鈕 125
3-1-12 CSS 項(xiàng)目列表橫向按鈕 127
3-1-13 CSS 橫向圖片按鈕應(yīng)用 130
3-2 利用Div 標(biāo)簽劃分網(wǎng)頁(yè)區(qū)塊 132
3-2-1 插入Div 標(biāo)簽，利用CSS 美化Div 標(biāo)簽 132
3-2-2 固定寬度圓角邊框 134
3-3 Div 區(qū)塊定位 141
3-3-1 Position （定位）設(shè)置 141
3-3-2 使用Position（定位）區(qū)塊設(shè)計(jì)布局 144
3-3-3 使用Float （浮動(dòng)）制作區(qū)塊 146
3-4 CSS 絕對(duì)水平、垂直在居中布局中的配置 149
3-4-1 區(qū)塊在頁(yè)面中上下居中 149
3-4-2 布局內(nèi)容在含有內(nèi)部 時(shí)的上下居中 151
3-4-3 絕對(duì)居中布局應(yīng)用 153
3-4-4 含背景圖像的絕對(duì)居中布局應(yīng)用 155
3-5 CSS 單欄布局配置 157
3-5-1 固定寬度單欄布局 157
3-5-2 CSS 固定寬度圖像表格邊框 164
3-5-3 背景延伸單欄布局 167
3-5-4 CSS 變動(dòng)寬度與高度圖像表格邊框 175
3-6 CSS 雙欄布局配置 179
3-6-1 CSS 固定寬度雙欄布局 179
3-6-2 CSS 固定寬度雙欄布局與按鈕應(yīng)用 181
3-6-3 CSS 變動(dòng)寬度雙欄布局 187
3-6-4 CSS 變動(dòng)寬度雙欄布局與按鈕應(yīng)用 189
3-7 CSS 三欄的布局配置 196
3-7-1 CSS 固定寬度三欄布局 196
3-7-2 CSS 固定寬度三欄布局與按鈕應(yīng)用 199
3-7-3 CSS 變動(dòng)寬度三欄布局 210
3-7-4 CSS 三欄式變動(dòng)寬度布局編排應(yīng)用 213
3-8 流體網(wǎng)格布局 226
3-8-1 創(chuàng)建流體網(wǎng)格布局 226
3-8-2 流體網(wǎng)格布局應(yīng)用 230
3-9 初探CSS3 233
3-9-1 CSS3 text-shadow 233
3-9-2 CSS3 Box-Shadow 234
3-9-3 CSS3 Border-Radius 圓角 235
3-9-4 CSS3 Transform 變形 237
3-9-5 CSS3 過(guò)渡效果 238
Chapter04 互動(dòng)效果與布局整合技巧
4-1 內(nèi)置行為布局整合 244
4-1-1 內(nèi)置行為設(shè)置與使用 245
4-1-2 彈出信息與打開瀏覽器窗口 247
4-1-3 互動(dòng)替換圖片效果應(yīng)用 249
4-1-4 跳轉(zhuǎn)菜單應(yīng)用 251
4-1-5 跳轉(zhuǎn)菜單切換內(nèi)框架內(nèi)容頁(yè)面 253
4-1-6 設(shè)置文字行為應(yīng)用 255
4-1-7 互相拖動(dòng)對(duì)象 258
4-1-8 交互式瀏覽內(nèi)容 260
4-1-9 互動(dòng)產(chǎn)品說(shuō)明 263
4-1-10 圖片式按鈕彈出菜單 265
4-2 Spry 效果布局整合 271
4-2-1 使用Spry 效果 272
4-2-2 覆蓋頁(yè)面廣告的Spry 效果應(yīng)用 275
4-2-3 顯示/ 漸隱效果布局整合 277
4-2-4 向上/ 向下遮簾效果布局整合 280
4-2-5 向上／向下滑動(dòng)效果布局整合 285
4-2-6 增大／收縮效果布局整合 290
4-3 Spry Widget 組件布局整合 293
4-3-1 菜單欄Widget 布局整合 293
4-3-2 選項(xiàng)卡式面板Widget 布局整合 298
4-3-3 可折疊面板Widget 布局整合 301
4-3-4 折疊式Widget 面板布局整合 304
4-3-5 HTML 動(dòng)態(tài)數(shù)據(jù)顯示 307
4-3-6 HTML 數(shù)據(jù)動(dòng)態(tài)布局整合 311
4-4 擴(kuò)展組件布局整合應(yīng)用 316
4-4-1 瀏覽方式應(yīng)用[1]：打開完全控制的窗口 319
4-4-2 瀏覽方式應(yīng)用[2]：快速設(shè)置內(nèi)框架 322
4-4-3 瀏覽方式應(yīng)用[3]：高級(jí)版跳轉(zhuǎn)下拉菜單 324
4-4-4 圖像播放應(yīng)用[1]：圖片滾動(dòng)內(nèi)容與打開圖像 327
4-4-5 圖像播放應(yīng)用[2]：圖片滾動(dòng)內(nèi)容替換圖像應(yīng)用 329
4-4-6 圖像播放應(yīng)用[3]：廣告圖片輪播 332
4-4-7 圖像播放應(yīng)用[4]：圖像播放控制 334
4-4-8 圖像播放應(yīng)用[5]：可前后瀏覽播放多張圖像 337
4-4-9 圖像播放應(yīng)用[6]：圖像瀏覽切換顯示 339
4-4-10 圖像播放應(yīng)用[7]：圖像與文字內(nèi)容瀏覽切換顯示 341
4-4-11 圖像播放應(yīng)用[8]：動(dòng)態(tài)圖像滑動(dòng)切換顯示 344
4-4-12 圖像播放應(yīng)用[9]：多張圖像動(dòng)態(tài)切換播放 346
4-4-13 AP 元素應(yīng)用[1]：在頁(yè)面中準(zhǔn)確加入自動(dòng)滾動(dòng)電子布告欄 348
4-4-14 AP 元素應(yīng)用[2]：互動(dòng)局部滾動(dòng)內(nèi)容區(qū) 351
4-4-15 AP 元素應(yīng)用[3]：控制AP 元素在瀏覽器窗口正中央 354
4-4-16 AP 元素應(yīng)用[4]：水平滑動(dòng)切換顯示內(nèi)容 355
4-4-17 AP 元素應(yīng)用[5]：垂直滑動(dòng)切換顯示內(nèi)容 359
4-4-18 AP 元素應(yīng)用[6]：動(dòng)態(tài)固定浮動(dòng)內(nèi)容 363
4-4-19 AP 元素應(yīng)用[7]：永遠(yuǎn)在瀏覽器下方顯示的頁(yè)尾 364
4-4-20 AP 元素應(yīng)用[8]：動(dòng)態(tài)控制AP 元素水平垂直移動(dòng) 366
4-4-21 音樂播放應(yīng)用：隨機(jī)播放背景音樂與開關(guān)設(shè)置 369
4-4-22 菜單應(yīng)用[1]：CSS 下拉展開按鈕菜單 371
4-4-23 菜單應(yīng)用[2]：樹狀菜單 374
4-5 最新擴(kuò)展組件布局整合應(yīng)用 378
4-5-1 菜單應(yīng)用[3]：快速創(chuàng)建CSS 按鈕 378
4-5-2 菜單應(yīng)用[4]：快速創(chuàng)建標(biāo)簽面板 382
4-5-3 菜單應(yīng)用[5]：快速創(chuàng)建多層級(jí)樹狀按鈕 384
4-5-4 圖像播放應(yīng)用[1]：CSS 變形控制圖像與AP 元素 386
4-5-5 圖像播放應(yīng)用[2]：CSS 變形控制互動(dòng)應(yīng)用 388
4-5-6 圖像播放應(yīng)用[3]：動(dòng)態(tài)相片播放器 391
4-5-7 圖像播放應(yīng)用[4]：快速創(chuàng)建相片瀏覽 393
4-5-8 圖像播放應(yīng)用[5]：多樣半透明相片播放器 396
4-5-9 圖像播放應(yīng)用[6]：快速創(chuàng)建互動(dòng)相簿 399
4-5-10 圖像播放應(yīng)用[7]：FLV 影片播放器 401
4-5-11 圖像播放應(yīng)用[8]：互動(dòng)FLV 影片播放器 403
4-6 Widget Browser（jQuery 擴(kuò)展組件）布局整合應(yīng)用 405
4-6-1 CSS3:Columns 分欄編排頁(yè)面文字 406
4-6-2 jQuery Tabs 標(biāo)簽面板 407
4-6-3 jQuery UI Accordion 滑動(dòng)折疊式面板 410
4-6-4 jqzoom 局部放大查看圖像 413
4-6-5 jQuery cycle 圖像自動(dòng)播放效果 415
4-6-6 LightBox Gallery Widget 半透明圖片顯示 417
4-6-7 jQuery Prettyphoto 圖像互動(dòng)瀏覽 419
4-6-8 Spry Image Slideshow-Basic 圖像幻燈片播放 420
4-6-9 Spry Image Slideshow with Flimstrip 交互式圖像切換播放 422
4-6-10 Spry Content Slideshow 高級(jí)交互式圖像切換播放 424
4-6-11 FlexSlider 廣告圖片瀏覽 426
4-6-12 Dropdown Navigation Bar 下滑式按鈕 428
4-6-13 Spry Menu Bar 20 水平彈出菜單 429
4-6-14 Menu Maic 彩色圓角彈出菜單 432
4-6-15 YUI Menu Horizontal NavBar 水平彈出按鈕組 434
4-6-16 jQuery Visualize 統(tǒng)計(jì)圖表 436
4-6-17 魚眼效果按鈕 439
4-6-18 Google Maps 插入GOOGLE 地圖 440
