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