項目1網頁設計基礎/1
任務1.1認識網頁1
1.1.1網頁的分類1
1.1.2網頁設計常用術語2
1.1.3網站開發流程5
任務1.2了解HTML5
1.2.1什么是HTML5
1.2.2用HTML編寫自己的第一個網頁6
1.2.3HTML中的常用標簽符號7
任務1.3Dreamweaver CS6的安裝與使用11
1.3.1安裝Dreamweaver CS611
1.3.2使用Dreamweaver CS615
1.3.3用Dreamweaver CS6建立一個網頁16
項目小結20
項目實訓20
實訓1.1用HTML建立歡迎頁面20
實訓1.2用Dreamweaver CS6建立歡迎頁面21
項目2建立及管理網站/22
任務2.1在計算機上建立本地網站22
2.1.1建立“我的第一個網站”23
2.1.2本地站點的管理24
2.1.3管理和編輯本地站點文件27
任務2.2發布網站29
2.2.1網站空間29
2.2.2設置遠程服務器30
2.2.3上傳網站33
任務2.3網站的更新和維護33
2.3.1本地和遠程文件夾的結構33
〖2〗〖3〗〖4〗2.3.2下載站點中的文件34
2.3.3本地文件和遠程文件的同步34
項目小結35
項目實訓35
實訓2.1為站點申請空間35
實訓2.2建立并上傳網站“我的家”35
項目3向網頁中添加各種元素/37
任務3.1向網頁中添加文本37
3.1.1案例導入——建立“班級簡介”網頁37
3.1.2在Dreamweaver 中創建普通文本38
3.1.3一些特殊文本的輸入41
3.1.4文本的常用格式設置41
3.1.5觀察文本對應的代碼44
任務3.2向網頁中添加圖像45
3.2.1案例導入——建立“汽車之家”網頁45
3.2.2網頁中常用的圖像格式45
3.2.3插入圖像46
3.2.4給無法顯示的圖像加注釋48
3.2.5圖像的編輯48
3.2.6觀察圖像對應的代碼50
任務3.3向網頁中添加聲音50
3.3.1案例導入——建立“音樂播放”網站51
3.3.2向網頁中插入可控制播放的聲音51
3.3.3在網頁中應用背景聲音54
任務3.4向網頁中添加視頻55
3.4.1案例導入——建立“視頻播放”網頁56
3.4.2向網頁中添加Flash動畫56
3.4.3向網頁中添加FLV視頻59
3.4.4向網頁中添加其他視頻文件60
3.4.5觀察各種插入視頻的方法對應的代碼60
項目小結62
項目實訓63
實訓3.1建立文字編輯網頁63
實訓3.2建立“香香美食”網63
項目4實現網頁的超鏈接/64
任務4.1認識超鏈接64
4.1.1超鏈接的分類64
4.1.2超鏈接的路徑64
任務4.2創建內部超鏈接65
4.2.1案例導入——設置“九寨溝四季”系列頁面的內部超鏈接65
4.2.2創建文字超鏈接65
4.2.3創建圖像超鏈接66
4.2.4鼠標經過圖像鏈接69
4.2.5觀察鏈接對應的代碼71
4.2.6設置“九寨溝四季”系列頁面的內部超鏈接72
任務4.3創建錨記鏈接73
4.3.1案例導入——設置“插花藝術”網頁的錨記鏈接73
4.3.2創建命名錨記73
4.3.3鏈接到命名錨記74
4.3.4創建虛鏈接74
4.3.5觀察錨記鏈接對應的代碼74
4.3.6設置“插花藝術”網頁的錨記鏈接74
任務4.4創建其他超鏈接76
4.4.1案例導入——向“九寨溝四季”網頁添加超鏈接76
4.4.2創建外部超鏈接76
4.4.3創建Email鏈接77
4.4.4創建下載文件超鏈接77
4.4.5創建腳本鏈接78
4.4.6為“九寨溝四季”網頁添加外部和電子郵件等鏈接78
任務4.5編輯超鏈接80
4.5.1設置超鏈接的外觀80
4.5.2刪除超鏈接80
項目小結81
項目實訓81
實訓4.1制作“犬類美容”網頁的導航條81
實訓4.2制作“黃山四絕”系列頁面81
項目5用表格布局頁面/82
任務5.1表格的基本操作82
5.1.1案例導入——制作“經典電影TOP 10”網頁82
5.1.2創建表格82
5.1.3調整表格的結構84
5.1.4表格輸入內容87
5.1.5利用屬性面板設置表格的外觀效果87
5.1.6觀察表格對應的代碼88
5.1.7制作“經典電影TOP 10”網頁89
任務5.2表格中的數據處理91
5.2.1案例導入——制作“各專業畢業生統計”網頁91
5.2.2數據的導入與導出92
5.2.3數據的排序94
5.2.4制作“各專業畢業生統計”網頁96
任務5.3使用表格布局網頁100
5.3.1案例導入——制作“畢業生就業信息網”首頁100
5.3.2嵌套表格100
5.3.3表格制作技巧101
5.3.4表格布局網頁的設計要點102
5.3.5制作“畢業生就業信息網”首頁103
項目小結107
項目實訓107
實訓5.1制作“信息工程系圖形圖像112班課程表”網頁107
實訓5.2制作“花影襲人”網站中“菊花簡介”的網頁108
實訓5.3制作“信息工程系教學評估網”首頁108
項目6用框架布局頁面/110
任務6.1創建框架網頁110
6.1.1案例導入——制作“信息系課程表”網頁110
6.1.2認識框架網頁110
6.1.3創建框架網頁111
6.1.4保存框架網頁112
6.1.5觀察框架集文件對應的代碼116
6.1.6制作“信息系課程表”框架網頁117
任務6.2框架和框架集的基本操作119
6.2.1案例導入——制作“花卉護理——牡丹”網頁119
6.2.2選擇框架和框架集120
6.2.3編輯框架集的屬性120
6.2.4編輯框架的屬性121
6.2.5調整框架的大小122
6.2.6刪除框架(合并框架)122
6.2.7制作“花卉護理——牡丹”網頁122
任務6.3設置框架網頁的鏈接125
6.3.1框架內的鏈接125
6.3.2關鍵字的鏈接126
項目小結127
項目實訓128
實訓6.1制作“暗香盈袖”網站的系列網頁128
實訓6.2制作“心情驛站”個人博客首頁129
項目7用CSS美化網頁/130
任務7.1認識CSS130
7.1.1案例導入——對“影迷俱樂部”網站中的網頁應用CSS130
7.1.2打開“新建CSS規則”的幾種方法133
7.1.3CSS常用屬性134
任務7.2建立和管理CSS樣式140
7.2.1建立可應用于任何HTML元素的CSS樣式140
7.2.2建立應用于一個HTML元素的CSS樣式142
7.2.3建立應用于指定標簽的CSS樣式144
7.2.4建立應用于指定范圍內標簽的CSS樣式146
7.2.5建立應用于多個標簽的CSS樣式147
7.2.6建立定義超鏈接的CSS樣式149
7.2.7觀察CSS樣式對應的代碼151
7.2.8用“CSS樣式”面板管理CSS樣式151
任務7.3建立并應用外部CSS樣式154
7.3.1建立外部CSS樣式定義頁面文字和背景154
7.3.2在一個網頁中應用已建好的外部樣式157
任務7.4CSS常見應用158
7.4.1用CSS控制段落樣式158
7.4.2用CSS控制圖片樣式160
7.4.3用CSS控制背景圖片的樣式162
7.4.4用CSS美化列表163
7.4.5應用CSS濾鏡164
項目小結166
項目實訓167
實訓7.1為“影迷俱樂部”網站中的網頁設置格式167
實訓7.2設置“茶文化”網頁167
實訓7.3設置“新聞公告”網頁168
項目8用CSS+DIV布局頁面/169
任務8.1認識DIV與CSS盒模型169
8.1.1
標簽169
8.1.2CSS盒模型171
任務8.2應用CSS實現定位175
8.2.1CSS的定位方式175
8.2.2相對定位175
8.2.3絕對定位177
8.2.4固定定位178
8.2.5浮動180
8.2.6清除浮動181
任務8.3CSS+DIV布局實例183
8.3.1案例導入——個人博客頁面183
8.3.2用CSS+DIV布局網頁的步驟183
8.3.3用CSS+DIV布局個人博客網頁184
任務8.4實現響應式網頁設計194
8.4.1案例導入——響應式網頁設計: 佳莓生態食品194
8.4.2Dreamweaver CS6中的流體網格布局194
8.4.3制作“佳莓生態食品”網頁196
項目小結204
項目實訓204
實訓8.1了解Dreamweaver CS6中的預設布局204
實訓8.2用CSS+DIV布局“園林設計”網頁205
實訓8.3實現響應式頁面設計205
項目9向網頁添加行為/206
任務9.1了解行為206
9.1.1認識行為206
9.1.2附加行為207
任務9.2使用Dreamweaver CS6內置的行為209
9.2.1用“行為”面板實現交換圖像行為209
9.2.2制作頁面打開時彈出廣告信息210
9.2.3“打開瀏覽器窗口”行為211
9.2.4制作可移動的面板212
9.2.5下拉菜單的制作213
9.2.6為元素添加特殊的動畫效果215
任務9.3JavaScript行為的應用216
9.3.1認識JavaScript216
9.3.2調用JavaScript216
9.3.3單擊按鈕背景顏色變換217
9.3.4添加到收藏夾和設為首頁219
9.3.5在網頁中嵌入JavaScript腳本220
9.3.6JavaScript腳本在文檔中的位置221
9.3.7實現懸浮廣告特效222
9.3.8實現滾動圖片特效223
9.3.9實現鼠標跟隨特效225
項目小結226
項目實訓226
實訓9.1制作下拉菜單226
實訓9.2實現JavaScript特效226
實訓9.3給校園新聞網添加行為226
項目10制作表單/228
任務10.1認識表單228
10.1.1案例導入——制作“注冊會員申請”頁面228
10.1.2插入表單和表單對象228
10.1.3設置常用表單對象的屬性231
10.1.4用CSS美化表單238
任務10.2使用Spry構件241
10.2.1案例導入——制作“驢友會員申請”頁面241
10.2.2Spry構件的基本操作242
10.2.3設置常用Spry構件的屬性243
任務10.3練習布局頁面時常用的Spry構件249
10.3.1案例導入——制作“QQ好友”頁面249
10.3.2使用Spry選項卡式面板250
10.3.3使用Spry折疊式面板251
10.3.4Spry可折疊面板252
10.3.5使用Spry菜單欄252
項目小結254
項目實訓254
實訓10.1利用表單制作個人簡介頁面254
實訓10.2利用Spry驗證表單制作個人注冊頁面254
實訓10.3利用Spry頁面布局構件制作頁面導航255
項目11模板和庫的應用及資源管理/256
任務11.1模板的應用256
11.1.1案例導入——制作“畢業生就業信息網”就業指導系列網頁256
11.1.2認識模板256
11.1.3創建模板258
11.1.4定義模板區域259
11.1.5使用模板制作“畢業生就業信息網”就業指導系列網頁262
11.1.6更新模板及模板的其他操作268
任務11.2定制庫項目270
11.2.1案例導入——定制畢業生就業信息網的庫項目270
11.2.2認識庫270
11.2.3庫項目的應用270
11.2.4定制畢業生就業信息網庫項目272
任務11.3資源管理274
11.3.1資源類型274
11.3.2“資源”面板275
項目小結275
項目實訓275
實訓11.1為“中原在線”網站設計模板,并應用模板創建系列網頁275
實訓11.2自行設計創建所在院系網站275
項目12網站制作實例/277
任務12.1網站布局規劃分析277
12.1.1案例導入——制作海南旅游網站277
12.1.2網頁布局規劃277
任務12.2制作主頁279
12.2.1頁面的全局布局279
12.2.2制作logo部分282
12.2.3制作上部導航欄282
12.2.4制作主體內容區284
12.2.5制作彈出式子菜單287
12.2.6制作圖片循環播放效果288
12.2.7制作版權信息部分并使用分隔線289
任務12.3制作子頁290
12.3.1進行頁面的全局布局290
12.3.2布局主體內容區292
12.3.3制作主體內容區左側圖片鏈接292
12.3.4制作主體內容區右側鏈接294
參考文獻/296
項目3向網頁中添加各種元素Project3項目概要:網頁是網絡傳遞信息的基本途徑。在設計和制作網頁時,為了使網頁中表現信息的形式更加豐富,可以通過向網頁中添加各種媒體元素的形式來實現。網頁中表達信息的形式有文本、圖片、音頻和視頻等,本項目對如何在網頁中添加上述信息元素做了詳細的介紹,并通過豐富的實例展現了網頁中使用各種元素表現信息的效果。
知識目標:文本、圖像、音頻、視頻元素的不同屬性和效果,添加各種元素后在網頁文件中對應的HTML標簽的表示方法。
技能目標:在DreamweaverCS6中能在網頁中插入文本、圖像、音頻、視頻等基本的元素,并能熟練設置其相關屬性。
任務3.1向網頁中添加文本
文本是網頁中表達信息的基本方式,具有信息量大、編輯方便、占用空間小、能夠準確表達要描述的信息、便于用戶的瀏覽和下載等顯著特點。對于網頁設計而言,文本的使用是基本的網頁設計技能,包括文本的輸入、編輯、格式的設置、文本修飾等。
為了更好地吸引網絡用戶在網頁上做更多的停留,作為網頁的設計者在設計網頁時,除了要對文本遣詞造句,更要注意文本的版式,盡可能在文檔中靈活運用豐富的字體,合理搭配文本的特效以及不同的段落格式等,從而達到完美的網頁效果。