第 1章 網(wǎng)頁(yè)制作與HTML 5基礎(chǔ)知識(shí)1
1.1 網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)2
1.1.1 網(wǎng)頁(yè)的定義和分類(lèi)2
1.1.2 網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)概念3
1.1.3 網(wǎng)頁(yè)的基本組成元素4
1.1.4 網(wǎng)頁(yè)制作工具6
1.1.5 如何學(xué)好網(wǎng)頁(yè)制作7
1.2 Dreamweaver CS6概述8
1.2.1 啟動(dòng)與退出Dreamweaver CS68
1.2.2 Dreamweaver CS6的工作界面8
1.3 網(wǎng)頁(yè)標(biāo)準(zhǔn)技術(shù)與HTML 510
1.3.1 網(wǎng)頁(yè)結(jié)構(gòu)語(yǔ)言11
1.3.2 網(wǎng)頁(yè)表現(xiàn)語(yǔ)言12
1.3.3 網(wǎng)頁(yè)行為語(yǔ)言13
1.3.4 在Dreamweaver CS6中創(chuàng)建
HTML 5文檔13
1.3.5 HTML 5常用標(biāo)簽15
1.3.6 HTML 5新增標(biāo)簽20
1.4 綜合實(shí)訓(xùn)案例21
1.4.1 用文本文檔編寫(xiě)一個(gè)網(wǎng)頁(yè)文檔21
任務(wù)１：用文本文檔編寫(xiě)網(wǎng)頁(yè)文檔21
1.4.2 用Dreamweaver CS6編寫(xiě)網(wǎng)頁(yè)
文檔22
任務(wù)２：用Dreamweaver CS6制作簡(jiǎn)單
網(wǎng)頁(yè)22
1.4.3 編寫(xiě)代碼實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)22
任務(wù)３：上網(wǎng)瀏覽一個(gè)網(wǎng)頁(yè)，并查看其
源代碼22
任務(wù)４：在記事本中編寫(xiě)代碼，實(shí)現(xiàn)一個(gè)
網(wǎng)頁(yè)23
任務(wù)５：在設(shè)計(jì)視圖中插入圖像23
小 結(jié)23
習(xí) 題24
第 2章 網(wǎng)頁(yè)整體規(guī)劃與設(shè)計(jì)25
2.1 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)26
2.1.1 網(wǎng)頁(yè)布局類(lèi)型26
任務(wù)1：判斷網(wǎng)頁(yè)布局類(lèi)型30
2.1.2 網(wǎng)頁(yè)整體造型30
2.1.3 網(wǎng)頁(yè)設(shè)計(jì)要素30
2.2 網(wǎng)站與網(wǎng)頁(yè)的設(shè)計(jì)流程及主題的確定30
2.2.1 網(wǎng)站與網(wǎng)頁(yè)的設(shè)計(jì)流程30
2.2.2 網(wǎng)站主題的確定32
2.3 需求分析與內(nèi)容組織32
2.3.1 網(wǎng)站的需求分析32
2.3.2 網(wǎng)站的內(nèi)容組織33
任務(wù)2：設(shè)計(jì)一個(gè)網(wǎng)站首頁(yè)33
2.4 色彩基礎(chǔ)知識(shí)34
2.4.1 色彩理論34
2.4.2 216網(wǎng)頁(yè)安全色35
任務(wù)3：學(xué)習(xí)216網(wǎng)頁(yè)安全色的相關(guān)知識(shí)36
2.5 網(wǎng)站中的色彩應(yīng)用36
2.5.1 網(wǎng)頁(yè)色彩搭配規(guī)則36
2.5.2 網(wǎng)頁(yè)元素之間的色彩搭配36
2.6 綜合實(shí)訓(xùn)案例：飾品銷(xiāo)售網(wǎng)站主頁(yè)整體
設(shè)計(jì)37
小 結(jié)38
習(xí) 題38
第3章 建立本地站點(diǎn)39
3.1 本地站點(diǎn)40
3.1.1 什么是站點(diǎn)40
3.1.2 創(chuàng)建本地站點(diǎn)40
3.2 管理本地站點(diǎn)41
3.2.1 切換站點(diǎn)41
3.2.2 站點(diǎn)的其他操作42
任務(wù)1：復(fù)制站點(diǎn)43
任務(wù)2：新建文件44
3.3 綜合實(shí)訓(xùn)案例：創(chuàng)建我的第 一個(gè)站點(diǎn)44
小 結(jié)45
習(xí) 題45
第4章 制作文本47
4.1 創(chuàng)建文檔48
4.1.1 新建文檔48
4.1.2 保存文檔49
任務(wù)1：創(chuàng)建站點(diǎn)、頁(yè)面49
4.1.3 打開(kāi)文檔49
4.2 文本編輯49
4.2.1 輸入文本49
任務(wù)2：添加新的字體51
4.2.2 設(shè)置文本格式51
任務(wù)3：設(shè)置文本格式52
4.2.3 設(shè)置文本樣式52
任務(wù)4：設(shè)置文本樣式54
4.2.4 設(shè)置段落55
4.2.5 在頁(yè)面中添加其他元素56
任務(wù)5：設(shè)置網(wǎng)頁(yè)背景58
4.3 項(xiàng)目符號(hào)和編號(hào)58
4.3.1 添加項(xiàng)目符號(hào)和編號(hào)58
4.3.2 修改項(xiàng)目符號(hào)和編號(hào)60
4.4 水平線(xiàn)、網(wǎng)格與標(biāo)尺60
4.4.1 水平線(xiàn)60
任務(wù)6：設(shè)置水平線(xiàn)62
4.4.2 網(wǎng)格與標(biāo)尺63
4.5 綜合實(shí)訓(xùn)案例：制作文本64
小 結(jié)65
習(xí) 題65
第5章 網(wǎng)頁(yè)中的多媒體66
5.1 網(wǎng)頁(yè)中常用的圖像格式67
5.1.1 GIF格式67
5.1.2 JPEG格式67
5.1.3 PNG格式67
任務(wù)1：比較不同圖像格式文件的大小67
5.2 插入與設(shè)置圖像68
5.2.1 插入圖像68
5.2.2 設(shè)置圖像69
5.3 插入其他圖像元素70
5.3.1 插入圖像占位符70
5.3.2 實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖像71
任務(wù)2：實(shí)現(xiàn)經(jīng)過(guò)鐘樓看鼓樓的效果72
5.4 多媒體在網(wǎng)頁(yè)中的應(yīng)用72
5.4.1 插入Flash動(dòng)畫(huà)72
任務(wù)3：插入Flash動(dòng)畫(huà)74
5.4.2 插入FLV視頻74
任務(wù)4：插入FLV視頻75
5.4.3 網(wǎng)頁(yè)中的音頻文件格式76
5.4.4 網(wǎng)頁(yè)中的視頻文件格式76
5.4.5 插入Shockwave影片77
任務(wù)5：插入Shockwave影片78
5.4.6 插入ActiveX控件78
5.4.7 插入插件79
5.4.8 插入背景音樂(lè)80
任務(wù)6：插入背景音樂(lè)81
5.5 綜合實(shí)訓(xùn)案例：插入多媒體82
5.5.1 插入圖像82
5.5.2 插入音、視頻82
小 結(jié)84
習(xí) 題84
第6章 網(wǎng)頁(yè)中的超鏈接85
6.1 超鏈接概述86
6.1.1 超鏈接的定義86
6.1.2 超鏈接的類(lèi)型86
6.2 鏈接路徑87
6.2.1 路徑87
6.2.2 相對(duì)路徑88
6.2.3 根路徑89
6.3 創(chuàng)建超鏈接的方法89
6.4 各種類(lèi)型超鏈接的創(chuàng)建90
6.4.1 文本超鏈接91
任務(wù)1：設(shè)置文本超鏈接92
6.4.2 下載超鏈接94
6.4.3 電子郵件超鏈接95
任務(wù)2：設(shè)置電子郵件超鏈接96
6.4.4 圖像超鏈接96
任務(wù)3：設(shè)置圖像超鏈接97
6.4.5 命名錨記超鏈接98
任務(wù)4：設(shè)置命名錨記超鏈接99
6.4.6 空鏈接99
6.4.7 腳本超鏈接100
任務(wù)5：設(shè)置腳本超鏈接100
6.5 管理超鏈接100
6.5.1 自動(dòng)更新超鏈接100
6.5.2 在站點(diǎn)范圍內(nèi)更改鏈接101
6.5.3 檢查站點(diǎn)中的超鏈接錯(cuò)誤102
6.6 綜合實(shí)訓(xùn)案例：創(chuàng)建我愛(ài)攝影網(wǎng)
站點(diǎn)103
小 結(jié)104
習(xí) 題105
第7章 表格使用與簡(jiǎn)單頁(yè)面布局106
7.1 創(chuàng)建表格107
7.1.1 插入表格107
任務(wù)1： 插入一個(gè)3行3列的表格108
7.1.2 在表格中插入網(wǎng)頁(yè)元素108
任務(wù)2：導(dǎo)入Word文檔110
7.2 設(shè)置表格及單元格的屬性111
7.2.1 設(shè)置表格的屬性111
7.2.2 設(shè)置單元格的屬性111
任務(wù)3：制作蒲公英學(xué)校課程表112
任務(wù)4：制作一個(gè)簡(jiǎn)單的后臺(tái)登錄頁(yè)面115
7.3 表格與單元格的具體操作116
7.3.1 選中表格的操作116
7.3.2 表格行與列的操作117
7.3.3 單元格的操作119
任務(wù)5：制作寶貝相冊(cè)121
任務(wù)6：制作下載頁(yè)面123
7.4 表格的進(jìn)一步操作124
7.4.1 表格分隔線(xiàn)與邊框操作124
7.4.2 表格特效設(shè)置126
7.5 擴(kuò)展表格模式127
7.5.1 擴(kuò)展表格模式的進(jìn)入和退出127
7.5.2 擴(kuò)展表格模式的應(yīng)用128
任務(wù)7：制作個(gè)人簡(jiǎn)歷128
7.6 綜合實(shí)訓(xùn)案例：用表格布局模式設(shè)計(jì)
網(wǎng)頁(yè)130
小 結(jié)132
習(xí) 題132
第8章 設(shè)計(jì)框架網(wǎng)頁(yè)133
8.1 框架網(wǎng)頁(yè)應(yīng)用134
8.1.1 框架網(wǎng)頁(yè)概述134
8.1.2 創(chuàng)建各種框架134
任務(wù)1：創(chuàng)建預(yù)定義框架集134
8.1.3 編輯框架集和保存框架集136
任務(wù)2：設(shè)置框架頁(yè)面滾動(dòng)條137
8.1.4 向框架中添加內(nèi)容138
任務(wù)3：添加已有網(wǎng)頁(yè)138
8.1.5 保存框架集138
8.2 框架屬性140
8.2.1 設(shè)置框架屬性140
8.2.2 框架鏈接143
任務(wù)4：使鏈接文件在框架中打開(kāi)145
8.2.3 框架標(biāo)簽145
8.3 內(nèi)嵌框架iframe146
8.3.1 關(guān)于iframe146
8.3.2 iframe的屬性及應(yīng)用147
8.4 綜合實(shí)訓(xùn)案例：布置框架149
小 結(jié)150
習(xí) 題150
第9章 CSS與Div布局152
9.1 CSS的基本概念153
9.1.1 CSS簡(jiǎn)介153
9.1.2 CSS基本語(yǔ)法153
9.1.3 CSS的分類(lèi)154
9.1.4 CSS選擇器156
9.1.5 使用CSS159
9.2 設(shè)置文本CSS樣式162
9.2.1 設(shè)置文字樣式163
9.2.2 設(shè)置文本對(duì)象樣式164
9.3 修飾背景和邊框166
9.3.1 設(shè)置背景顏色和背景圖像166
9.3.2 設(shè)置邊框樣式167
9.4 盒模型169
9.4.1 盒模型簡(jiǎn)介169
9.4.2 設(shè)置標(biāo)簽的顯示方式171
9.5 CSS Div布局171
9.5.1 div標(biāo)簽171
任務(wù)１：使用div標(biāo)簽實(shí)現(xiàn)層疊效果172
9.5.2 span標(biāo)簽173
任務(wù)２：應(yīng)用span標(biāo)簽173
9.5.3 3種布局方式173
9.6 綜合實(shí)訓(xùn)案例176
9.6.1 使用CSS實(shí)現(xiàn)網(wǎng)頁(yè)圖文混排
效果176
任務(wù)３：制作油畫(huà)欣賞網(wǎng)頁(yè)176
9.6.2 使用CSS Div布局網(wǎng)頁(yè)177
任務(wù)４：制作博客網(wǎng)站首頁(yè)177
小 結(jié)180
習(xí) 題180
第 10章 行為181
10.1 行為概述182
10.1.1 行為定義182
10.1.2 事件182
10.1.3 動(dòng)作183
10.2 行為的基本操作183
10.2.1 行為面板183
10.2.2 添加行為185
10.2.3 編輯行為185
10.3 文本類(lèi)行為185
10.3.1 彈出消息185
10.3.2 設(shè)置狀態(tài)欄文本186
任務(wù)1：設(shè)置文本類(lèi)行為187
10.4 圖像類(lèi)行為187
任務(wù)2：設(shè)置交換圖像行為188
10.5 代碼屬性類(lèi)行為188
任務(wù)3：設(shè)置改變屬性行為189
10.6 跳轉(zhuǎn)類(lèi)行為190
任務(wù)4：設(shè)置跳轉(zhuǎn)類(lèi)行為191
10.7 效果類(lèi)行為191
任務(wù)5：設(shè)置效果類(lèi)行為191
10.8 綜合實(shí)訓(xùn)案例：制作一個(gè)攝影網(wǎng)站192
小 結(jié)193
習(xí) 題194
第 11章 網(wǎng)頁(yè)交互與特效195
11.1 網(wǎng)頁(yè)的交互行為196
11.1.1 拖動(dòng)AP元素196
任務(wù)1：設(shè)置拖動(dòng)AP元素行為197
11.1.2 顯示隱藏元素198
11.2 Spry框架199
11.2.1 Spry效果199
11.2.2 Spry菜單欄200
任務(wù)2：設(shè)置菜單欄201
11.2.3 Spry選項(xiàng)卡式面板201
11.2.4 Spry折疊式面板202
11.2.5 Spry可折疊面板202
任務(wù)3：隱藏或顯示存儲(chǔ)內(nèi)容202
11.3 綜合實(shí)訓(xùn)案例：制作導(dǎo)航條203
小 結(jié)205
習(xí) 題205
第 12章 網(wǎng)頁(yè)表單的應(yīng)用206
12.1 網(wǎng)頁(yè)中的表單知識(shí)207
12.1.1 表單概述207
12.1.2 創(chuàng)建表單域207
12.2 插入文本域209
12.2.1 文本字段209
任務(wù)1：創(chuàng)建密碼表單211
12.2.2 文本區(qū)域211
12.3 插入單選按鈕和單選按鈕組212
12.3.1 插入單個(gè)單選按鈕213
12.3.2 插入單選按鈕組213
任務(wù)2：創(chuàng)建單選按鈕組214
12.4 插入復(fù)選框和復(fù)選框組214
12.4.1 插入單個(gè)復(fù)選框214
12.4.2 插入復(fù)選框組215
任務(wù)3：創(chuàng)建復(fù)選框組215
12.5 插入列表和菜單216
12.5.1 菜單表單216
12.5.2 列表表單217
12.5.3 跳轉(zhuǎn)菜單218
12.6 插入按鈕和文件域220
12.6.1 插入按鈕221
任務(wù)4：插入表單按鈕221
12.6.2 插入文件域222
12.7 驗(yàn)證表單內(nèi)容222
12.7.1 Spry表單驗(yàn)證技術(shù)223
12.7.2 Spry驗(yàn)證文本域223
12.7.3 Spry驗(yàn)證密碼域224
12.7.4 Spry驗(yàn)證文本區(qū)域225
12.7.5 Spry驗(yàn)證列表225
12.7.6 Spry驗(yàn)證單選按鈕組225
12.7.7 Spry驗(yàn)證復(fù)選框226
任務(wù)5：插入Spry驗(yàn)證復(fù)選框226
12.8 綜合實(shí)訓(xùn)案例：用戶(hù)注冊(cè)表單226
小 結(jié)229
習(xí) 題229
第 13章 網(wǎng)站綜合設(shè)計(jì)與制作實(shí)例230
13.1 班級(jí)網(wǎng)站的規(guī)劃與設(shè)計(jì)231
13.1.1 網(wǎng)站定位231
13.1.2 網(wǎng)站需求分析231
13.1.3 網(wǎng)站欄目設(shè)計(jì)231
13.1.4 站點(diǎn)定義與目錄管理232
13.1.5 班級(jí)網(wǎng)站的風(fēng)格設(shè)計(jì)232
13.2 網(wǎng)頁(yè)設(shè)計(jì)與制作232
13.2.1 頁(yè)面布局232
13.2.2 制作網(wǎng)站首頁(yè)234
13.2.3 二級(jí)頁(yè)面的制作243
13.2.4 內(nèi)容頁(yè)面的制作244
小 結(jié)245
習(xí) 題245
參考文獻(xiàn)246