第 1章 網(wǎng)頁制作與HTML 5基礎(chǔ)知識(shí)1
1.1 網(wǎng)頁制作基礎(chǔ)知識(shí)2
1.1.1 網(wǎng)頁的定義和分類2
1.1.2 網(wǎng)頁設(shè)計(jì)的相關(guān)概念3
1.1.3 網(wǎng)頁的基本組成元素4
1.1.4 網(wǎng)頁制作工具6
1.1.5 如何學(xué)好網(wǎng)頁制作7
1.2 Dreamweaver CS6概述8
1.2.1 啟動(dòng)與退出Dreamweaver CS68
1.2.2 Dreamweaver CS6的工作界面8
1.3 網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML 510
1.3.1 網(wǎng)頁結(jié)構(gòu)語言11
1.3.2 網(wǎng)頁表現(xiàn)語言12
1.3.3 網(wǎng)頁行為語言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 用文本文檔編寫一個(gè)網(wǎng)頁文檔21
任務(wù)１：用文本文檔編寫網(wǎng)頁文檔21
1.4.2 用Dreamweaver CS6編寫網(wǎng)頁
文檔22
任務(wù)２：用Dreamweaver CS6制作簡(jiǎn)單
網(wǎng)頁22
1.4.3 編寫代碼實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁22
任務(wù)３：上網(wǎng)瀏覽一個(gè)網(wǎng)頁，并查看其
源代碼22
任務(wù)４：在記事本中編寫代碼，實(shí)現(xiàn)一個(gè)
網(wǎng)頁23
任務(wù)５：在設(shè)計(jì)視圖中插入圖像23
小 結(jié)23
習(xí) 題24
第 2章 網(wǎng)頁整體規(guī)劃與設(shè)計(jì)25
2.1 網(wǎng)頁設(shè)計(jì)基礎(chǔ)26
2.1.1 網(wǎng)頁布局類型26
任務(wù)1：判斷網(wǎng)頁布局類型30
2.1.2 網(wǎng)頁整體造型30
2.1.3 網(wǎng)頁設(shè)計(jì)要素30
2.2 網(wǎng)站與網(wǎng)頁的設(shè)計(jì)流程及主題的確定30
2.2.1 網(wǎng)站與網(wǎng)頁的設(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)站首頁33
2.4 色彩基礎(chǔ)知識(shí)34
2.4.1 色彩理論34
2.4.2 216網(wǎng)頁安全色35
任務(wù)3：學(xué)習(xí)216網(wǎng)頁安全色的相關(guān)知識(shí)36
2.5 網(wǎng)站中的色彩應(yīng)用36
2.5.1 網(wǎng)頁色彩搭配規(guī)則36
2.5.2 網(wǎng)頁元素之間的色彩搭配36
2.6 綜合實(shí)訓(xùn)案例：飾品銷售網(wǎng)站主頁整體
設(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)、頁面49
4.1.3 打開文檔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 在頁面中添加其他元素56
任務(wù)5：設(shè)置網(wǎng)頁背景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 水平線、網(wǎng)格與標(biāo)尺60
4.4.1 水平線60
任務(wù)6：設(shè)置水平線62
4.4.2 網(wǎng)格與標(biāo)尺63
4.5 綜合實(shí)訓(xùn)案例：制作文本64
小 結(jié)65
習(xí) 題65
第5章 網(wǎng)頁中的多媒體66
5.1 網(wǎng)頁中常用的圖像格式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)過圖像71
任務(wù)2：實(shí)現(xiàn)經(jīng)過鐘樓看鼓樓的效果72
5.4 多媒體在網(wǎng)頁中的應(yīng)用72
5.4.1 插入Flash動(dòng)畫72
任務(wù)3：插入Flash動(dòng)畫74
5.4.2 插入FLV視頻74
任務(wù)4：插入FLV視頻75
5.4.3 網(wǎng)頁中的音頻文件格式76
5.4.4 網(wǎng)頁中的視頻文件格式76
5.4.5 插入Shockwave影片77
任務(wù)5：插入Shockwave影片78
5.4.6 插入ActiveX控件78
5.4.7 插入插件79
5.4.8 插入背景音樂80
任務(wù)6：插入背景音樂81
5.5 綜合實(shí)訓(xùn)案例：插入多媒體82
5.5.1 插入圖像82
5.5.2 插入音、視頻82
小 結(jié)84
習(xí) 題84
第6章 網(wǎng)頁中的超鏈接85
6.1 超鏈接概述86
6.1.1 超鏈接的定義86
6.1.2 超鏈接的類型86
6.2 鏈接路徑87
6.2.1 路徑87
6.2.2 相對(duì)路徑88
6.2.3 根路徑89
6.3 創(chuàng)建超鏈接的方法89
6.4 各種類型超鏈接的創(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)建我愛攝影網(wǎng)
站點(diǎn)103
小 結(jié)104
習(xí) 題105
第7章 表格使用與簡(jiǎn)單頁面布局106
7.1 創(chuàng)建表格107
7.1.1 插入表格107
任務(wù)1： 插入一個(gè)3行3列的表格108
7.1.2 在表格中插入網(wǎng)頁元素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)登錄頁面115
7.3 表格與單元格的具體操作116
7.3.1 選中表格的操作116
7.3.2 表格行與列的操作117
7.3.3 單元格的操作119
任務(wù)5：制作寶貝相冊(cè)121
任務(wù)6：制作下載頁面123
7.4 表格的進(jìn)一步操作124
7.4.1 表格分隔線與邊框操作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)頁130
小 結(jié)132
習(xí) 題132
第8章 設(shè)計(jì)框架網(wǎng)頁133
8.1 框架網(wǎng)頁應(yīng)用134
8.1.1 框架網(wǎng)頁概述134
8.1.2 創(chuàng)建各種框架134
任務(wù)1：創(chuàng)建預(yù)定義框架集134
8.1.3 編輯框架集和保存框架集136
任務(wù)2：設(shè)置框架頁面滾動(dòng)條137
8.1.4 向框架中添加內(nèi)容138
任務(wù)3：添加已有網(wǎng)頁138
8.1.5 保存框架集138
8.2 框架屬性140
8.2.1 設(shè)置框架屬性140
8.2.2 框架鏈接143
任務(wù)4：使鏈接文件在框架中打開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基本語法153
9.1.3 CSS的分類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)頁圖文混排
效果176
任務(wù)３：制作油畫欣賞網(wǎng)頁176
9.6.2 使用CSS Div布局網(wǎng)頁177
任務(wù)４：制作博客網(wǎng)站首頁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 文本類行為185
10.3.1 彈出消息185
10.3.2 設(shè)置狀態(tài)欄文本186
任務(wù)1：設(shè)置文本類行為187
10.4 圖像類行為187
任務(wù)2：設(shè)置交換圖像行為188
10.5 代碼屬性類行為188
任務(wù)3：設(shè)置改變屬性行為189
10.6 跳轉(zhuǎn)類行為190
任務(wù)4：設(shè)置跳轉(zhuǎn)類行為191
10.7 效果類行為191
任務(wù)5：設(shè)置效果類行為191
10.8 綜合實(shí)訓(xùn)案例：制作一個(gè)攝影網(wǎng)站192
小 結(jié)193
習(xí) 題194
第 11章 網(wǎng)頁交互與特效195
11.1 網(wǎng)頁的交互行為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īng)用206
12.1 網(wǎng)頁中的表單知識(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)案例：用戶注冊(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)頁設(shè)計(jì)與制作232
13.2.1 頁面布局232
13.2.2 制作網(wǎng)站首頁234
13.2.3 二級(jí)頁面的制作243
13.2.4 內(nèi)容頁面的制作244
小 結(jié)245
習(xí) 題245
參考文獻(xiàn)246