網(wǎng)頁設(shè)計(jì)與前端開發(fā)實(shí)用教程

第 1部分 Dreamweaver CC網(wǎng)頁制作篇
第 1章　使用Dreamweaver CC創(chuàng)建基本
文本網(wǎng)頁　11
1．1　Dreamweaver CC工作界面　12
1．1．1　菜單欄　12
1．1．2　文檔窗口　13
1．1．3　“屬性”面板　13
1．1．4　面板組　13
1．1．5　“插入”欄　13
1．2　創(chuàng)建本地站點(diǎn)　14
1．2．1　創(chuàng)建站點(diǎn)的好處　14
1．2．2　課堂案例——使用向?qū)?chuàng)建站點(diǎn)　14
1．3　添加文本元素　15
1．3．1　課堂案例——添加文本　15
1．3．2　課堂案例——插入日期　16
1．3．3　課堂案例——插入特殊字符　17
1．3．4　課堂案例——插入水平線　18
1．4　編輯文本格式　20
1．4．1　課堂案例——設(shè)置文本字體　20
1．4．2　設(shè)置文本大小　21
1．4．3　設(shè)置文本顏色　21
1．5　課堂練習(xí)——?jiǎng)?chuàng)建基本文本網(wǎng)頁　21
1．6　課后習(xí)題　23
1．7　本章總結(jié)　23
第 2章　使用圖像和多媒體創(chuàng)建豐富多彩的
網(wǎng)頁　24
2．1　網(wǎng)頁中圖像的格式　25
2．2　在網(wǎng)頁中插入圖像　25
2．2．1　課堂案例——插入普通圖像　25
2．2．2　課堂案例——設(shè)置圖像的屬性　26
2．2．3　課堂案例——裁剪圖像　28
2．3　插入其他網(wǎng)頁圖像　28
2．3．1　課堂案例——插入背景圖像　29
2．3．2　課堂案例——插入鼠標(biāo)經(jīng)過圖像　29
2．4　在網(wǎng)頁中插入動(dòng)畫和音樂　32
2．4．1　課堂案例——插入Flash動(dòng)畫　32
2．4．2　使用代碼提示插入背景音樂　34
2．5　課堂練習(xí)　36
課堂練習(xí)1——?jiǎng)?chuàng)建翻轉(zhuǎn)圖像導(dǎo)航　36
課堂練習(xí)2——?jiǎng)?chuàng)建圖文混排網(wǎng)頁　38
2．6　課后習(xí)題　40
2．7　本章總結(jié)　40
第3章　使用表格布局排版網(wǎng)頁　41
3．1　插入表格　42
3．1．1　表格的基本概念　42
3．1．2　課堂案例——插入表格　42
3．2　設(shè)置表格的各項(xiàng)屬性　43
3．2．1　設(shè)置表格的屬性　43
3．2．2　設(shè)置單元格的屬性　44
3．3　選擇表格　45
3．3．1　選擇整個(gè)表格　45
3．3．2　選擇行或列　46
3．3．3　選擇單元格　46
3．4　表格的基本操作　47
3．4．1　調(diào)整表格的高度和寬度　47
3．4．2　添加、刪除行或列　47
3．4．3　拆分單元格　48
3．4．4　合并單元格　49
3．4．5　剪切、復(fù)制、粘貼表格　49
3．5　排序及整理表格內(nèi)容　50
3．5．1　課堂案例——導(dǎo)入表格式數(shù)據(jù)　50
3．5．2　排序表格　51
3．6　課堂練習(xí)　52
3．6．1　課堂練習(xí)1——?jiǎng)?chuàng)建細(xì)線表格　52
3．6．2　課堂練習(xí)2——?jiǎng)?chuàng)建圓角表格　55
3．7　課后習(xí)題　58
3．8　本章總結(jié)　58
第4章　使用行為創(chuàng)建特效網(wǎng)頁　59
4．1　行為的概述　60
4．1．1　常見的動(dòng)作　60
4．1．2　常見的事件　61
4．2　調(diào)用JavaScript　61
4．2．1　課堂案例——利用JavaScript實(shí)現(xiàn)打印功能　62
4．2．2　課堂案例——利用JavaScript實(shí)現(xiàn)關(guān)閉網(wǎng)頁　62
4．3　設(shè)置瀏覽器環(huán)境　64
4．3．1　課堂案例——檢查表單　64
4．3．2　檢查插件　65
4．4　對(duì)圖像設(shè)置動(dòng)作　65
4．4．1　課堂案例——制作預(yù)先載入圖像網(wǎng)頁　65
4．4．2　課堂案例——制作交換圖像網(wǎng)頁　67
4．5　課堂練習(xí)　68
4．5．1　課堂練習(xí)1——設(shè)置狀態(tài)欄文本　68
4．5．2　課堂練習(xí)2——轉(zhuǎn)到URL　69
4．5．3　課堂練習(xí)3——制作指定大小的彈出窗口　70
4．6　課后習(xí)題　72
4．7　本章總結(jié)　72
第5章　使用模板和庫批量制作風(fēng)格統(tǒng)一的網(wǎng)頁　73
5．1　創(chuàng)建模板　74
5．1．1　課堂案例——直接創(chuàng)建模板　74
5．1．2　課堂案例——從現(xiàn)有文檔創(chuàng)建模板　75
5．2　創(chuàng)建可編輯區(qū)域　76
5．2．1　課堂案例——插入可編輯區(qū)域　76
5．2．2　刪除可編輯區(qū)域　77
5．2．3　更改可編輯區(qū)域名稱　77
5．3　創(chuàng)建和管理站點(diǎn)中的模板　78
5．3．1　使用模板創(chuàng)建新網(wǎng)頁　78
5．3．2　課堂案例——將文檔從模板中分離出來　80
5．3．3　課堂案例——修改模板　80
5．4　創(chuàng)建與應(yīng)用庫項(xiàng)目　81
5．4．1　課堂案例——?jiǎng)?chuàng)建庫項(xiàng)目　81
5．4．2　課堂案例——應(yīng)用庫項(xiàng)目　82
5．4．3　課堂案例——修改庫項(xiàng)目　84
5．5　課堂練習(xí)　84
5．5．1　課堂練習(xí)1——?jiǎng)?chuàng)建模板　84
5．5．2　課堂練習(xí)2——利用模板創(chuàng)建網(wǎng)頁　87
5．6　課后習(xí)題　89
5．7　本章總結(jié)　89
第6章　使用jQuery Mobile和jQuery特效制作網(wǎng)頁　90
6．1　jQuery UI　91
6．1．1　課堂案例——?jiǎng)?chuàng)建Tabs選項(xiàng)卡　91
6．1．2　課堂案例——?jiǎng)?chuàng)建Accordion折疊面板　93
6．1．3　課堂案例——?jiǎng)?chuàng)建Dialog對(duì)話框　94
6．1．4　課堂案例——?jiǎng)?chuàng)建Shake震動(dòng)特效　96
6．2　使用按鈕組件　97
6．2．1　課堂案例——插入按鈕　98
6．2．2　按鈕組的排列　99
6．3　使用表單組件　100
6．3．1　認(rèn)識(shí)表單組件　100
6．3．2　課堂案例——插入文本框　100
6．3．3　課堂案例——插入滑塊　103
6．3．4　課堂案例——插入翻轉(zhuǎn)切換開關(guān)　104
6．3．5　課堂案例——插入單選按鈕　105
6．3．6　課堂案例——插入復(fù)選框　107
6．4　課堂練習(xí)——使用jQuery Mobile創(chuàng)建手機(jī)網(wǎng)頁列表　108
6．5　課后習(xí)題　111
6．6　本章總結(jié)　111
第 2部分　CSS美化布局網(wǎng)頁篇
第7章　使用CSS樣式表美化網(wǎng)頁　112
7．1　了解CSS樣式表　113
7．2　CSS的使用　113
7．2．1　CSS基本語法　113
7．2．2　添加CSS的方法　114
7．3　字體屬性　115
7．3．1　課堂案例——設(shè)置字體font-family　115
7．3．2　課堂案例——設(shè)置字號(hào)font-size　116
7．3．3　課堂案例——設(shè)置字體風(fēng)格font-style　117
7．3．4　課堂案例——設(shè)置字體加粗font-weight　118
7．3．5　課堂案例——設(shè)置字體變形font-variant　119
7．4　段落屬性　120
7．4．1　課堂案例——設(shè)置單詞間隔word-spacing　120
7．4．2　課堂案例——設(shè)置字符間隔letter-spacing　121
7．4．3　課堂案例——設(shè)置文字修飾text-decoration　122
7．4．4　課堂案例——設(shè)置垂直對(duì)齊方式vertical-align　123
7．4．5　課堂案例——設(shè)置文本轉(zhuǎn)換text-transform　124
7．4．6　課堂案例——設(shè)置水平對(duì)齊方式text-align　125
7．4．7　課堂案例——設(shè)置文本縮進(jìn)text-indent　126
7．4．8　課堂案例——設(shè)置文本行高line-height　127
7．5　圖片樣式設(shè)置　127
7．5．1　課堂案例——定義圖片邊框　128
7．5．2　課堂案例——設(shè)置文字環(huán)繞圖片　129
7．6　課堂練習(xí)——設(shè)置網(wǎng)頁背景顏色　130
7．7　課后習(xí)題　131
7．8　本章總結(jié)　131
第8章　使用CSS+DIV布局網(wǎng)頁　132
8．1　初識(shí)DIV　133
8．1．1　DIV概述　133
8．1．2　DIV與span的區(qū)別　133
8．1．3　DIV與CSS的布局優(yōu)勢　134
8．2　CSS定位　135
8．2．1　盒子模型的概念　135
8．2．2　float定位　135
8．2．3　position定位　137
8．3　CSS布局理念　137
8．3．1　將頁面用DIV分塊　137
8．3．2　設(shè)計(jì)各塊的位置　138
8．3．3　用CSS定位　138
8．4　課堂練習(xí)　139
課堂練習(xí)1——一列固定寬度布局　139
課堂練習(xí)2——一列自適應(yīng)布局　140
課堂練習(xí)3——兩列固定寬度布局　141
課堂練習(xí)4——兩列寬度自適應(yīng)布局　141
課堂練習(xí)5——兩列右列寬度自適應(yīng)布局　142
課堂練習(xí)6——三列浮動(dòng)中間寬度自適應(yīng)布局　143
8．5　課后習(xí)題　144
8．6　本章總結(jié)　144
第3部分　Photoshop CC圖像處理篇
第9章　初識(shí)Photoshop CC　145
9．1　Photoshop CC工作界面　146
9．1．1　菜單欄　146
9．1．2　工具箱及工具選項(xiàng)欄　147
9．1．3　文檔窗口及狀態(tài)欄　147
9．1．4　面板　147
9．2　調(diào)整圖像　148
9．2．1　課堂案例——調(diào)整圖像大小　148
9．2．2　課堂案例——使用色階命令美化圖像　149
9．2．3　課堂案例——使用曲線命令美化圖像　149
9．2．4　課堂案例——調(diào)整圖像亮度與對(duì)比度　150
9．2．5　課堂案例——使用色彩平衡命令調(diào)整圖像　151
9．2．6　課堂案例——調(diào)整圖像色相與飽和度　151
9．3　圖像的優(yōu)化與保存　152
9．3．1　課堂案例——圖像的優(yōu)化　152
9．3．2　課堂案例——保存圖像　153
9．3．3　保存為透明GIF圖像　153
9．4　課堂練習(xí)——制作電影圖片效果　155
9．5　課后習(xí)題　158
9．6　本章總結(jié)　158
第 10章　使用繪圖工具繪制圖像　159
10．1　創(chuàng)建選擇區(qū)域　160
10．1．1　選框工具　160
10．1．2　套索工具　161
10．1．3　魔棒工具　162
10．2　基本繪圖工具　162
10．2．1　課堂案例——使用畫筆工具　162
10．2．2　課堂案例——使用仿制圖章工具　163
10．2．3　課堂案例——使用圖案圖章工具　163
10．2．4　課堂案例——使用橡皮擦工具　164
10．2．5　課堂案例——使用油漆桶工具和漸變工具　165
10．3　形狀工具　166
10．3．1　課堂案例——繪制矩形　166
10．3．2　課堂案例——繪制圓角矩形　166
10．3．3　課堂案例——繪制橢圓　167
10．3．4　課堂案例——繪制多邊形　167
10．4　課堂練習(xí)——制作網(wǎng)站標(biāo)志　168
10．5　課后習(xí)題　170
10．6　本章總結(jié)　170
第 11章　文字、圖層與圖層樣式的使用　171
11．1　創(chuàng)建文字　172
11．1．1　課堂案例——輸入文字并設(shè)置屬性　172
11．1．2　課堂案例——制作立體文字　173
11．2　編輯圖層　175
11．2．1　新建圖層　175
11．2．2　刪除圖層　176
11．2．3　課堂案例——制作網(wǎng)站橫排導(dǎo)航條　176
11．3　使用圖層樣式　177
11．3．1　課堂案例——設(shè)置投影樣式　177
11．3．2　課堂案例——設(shè)置內(nèi)陰影樣式　178
11．3．3　課堂案例——設(shè)置外發(fā)光樣式　180
11．3．4　課堂案例——設(shè)置內(nèi)發(fā)光樣式　181
11．4　課堂練習(xí)——制作立體文字效果　182
11．5　課后習(xí)題　184
11．6　本章總結(jié)　184
第 12章　設(shè)計(jì)制作網(wǎng)頁中的圖像元素　185
12．1　網(wǎng)站Logo的制作　186
12．1．1　網(wǎng)站Logo設(shè)計(jì)指南　186
12．1．2　課堂練習(xí)——設(shè)計(jì)網(wǎng)站Logo　186
12．2　網(wǎng)絡(luò)廣告的制作　188
12．2．1　網(wǎng)絡(luò)廣告設(shè)計(jì)要素　188
12．2．2　課堂練習(xí)——制作網(wǎng)絡(luò)廣告　188
12．3　網(wǎng)頁切片輸出　192
12．3．1　創(chuàng)建切片　192
12．3．2　編輯切片　193
12．3．3　優(yōu)化和輸出切片　194
12．3．4　課堂練習(xí)——切割優(yōu)化首頁　194
12．4　課后習(xí)題　196
12．5　本章總結(jié)　196
第4部分　JavaScript網(wǎng)頁特效和HTML5篇
第 13章　JavaScript腳本基礎(chǔ)　197
13．1　JavaScript簡介　198
13．2　JavaScript基本語法　198
13．2．1　常量和變量　198
13．2．2　表達(dá)式和運(yùn)算符　199
13．2．3　基本語句　200
13．2．4　函數(shù)　204
13．3　JavaScript的事件　204
13．3．1　課堂案例——利用onClick事件制作全屏網(wǎng)頁　204
13．3．2　課堂案例——利用onChange事件制作彈出警告提示對(duì)話框　205
13．3．3　課堂案例——利用onSelect事件制作下拉列表框　206
13．3．4　課堂案例——利用onFocus事件制作選擇提示對(duì)話框　207
13．3．5　課堂案例——利用onLoad事件制作歡迎提示信息　208
13．3．6　課堂案例——利用onBlur事件制作提示信息　209
13．3．7　課堂案例——利用onMouseOver事件顯示圖像　210
13．3．8　課堂案例——利用onMouseOut事件隱藏圖像　211
13．3．9　課堂案例——利用onDblClick事件雙擊打開網(wǎng)頁　212
13．4　瀏覽器的內(nèi)部對(duì)象　213
13．4．1　課堂案例——利用navigator對(duì)象獲取瀏覽器信息　213
13．4．2　課堂案例——利用document對(duì)象實(shí)現(xiàn)JavaScript的
輸出　214
13．4．3　課堂案例——利用windows對(duì)象制作彈出窗口　215
13．4．4　location對(duì)象　217
13．4．5　課堂案例——利用history對(duì)象制作前進(jìn)和后退按鈕　217
13．5　課堂練習(xí)——制作自動(dòng)關(guān)閉網(wǎng)頁　218
13．6　課后習(xí)題　219
13．7　本章總結(jié)　219
第 14章　HTML5基礎(chǔ)　220
14．1　HTML5簡介　221
14．1．1　HTML5基礎(chǔ)　221
14．1．2　向后兼容　221
14．1．3　更加簡化　222
14．1．4　HTML5語法中的3個(gè)要點(diǎn)　222
14．2　新增的主體結(jié)構(gòu)元素　223
14．2．1　課堂案例——article元素　223
14．2．2　課堂案例——section元素　224
14．2．3　課堂案例——nav元素　225
14．2．4　課堂案例——aside元素　226
14．3　canvas元素　227
14．3．1　課堂案例——canvas繪制矩形　227
14．3．2　課堂案例——繪制線條　228
14．4　課堂練習(xí)——使用HTML5制作3D愛心動(dòng)畫　229
14．5　課后習(xí)題　230
14．6　本章總結(jié)　230
第5部分　網(wǎng)站綜合案例篇
第 15章　創(chuàng)建企業(yè)展示型網(wǎng)站　231
15．1　網(wǎng)站前期策劃　232
15．1．1　企業(yè)網(wǎng)站分類　232
15．1．2　企業(yè)網(wǎng)站主要功能頁面　233
15．1．3　企業(yè)網(wǎng)站色彩搭配　234
15．2　設(shè)計(jì)網(wǎng)站首頁　235
15．2．1　首頁的設(shè)計(jì)　235
15．2．2　切割首頁　238
15．3　在Dreamweaver中進(jìn)行頁面排版制作　239
15．3．1　創(chuàng)建本地站點(diǎn)　240
15．3．2　創(chuàng)建二級(jí)模板頁面　240
15．3．3　利用模板制作其他網(wǎng)頁　244
15．4　給網(wǎng)頁添加彈出窗口頁面　246
15．5　本地測試及發(fā)布上傳　247
15．6　課后習(xí)題　248
15．7　本章總結(jié)　248