簡介
本書採用模組化的項目教學模式編寫,教材內容包括14個項目活動、一個拓展提高模組和兩個實訓參考案例。每個項目模組包括任務、成長加油站、代碼解讀、實踐演練幾個環節。 書中每個項目由幾個活動任務組成,以活動任務為驅動,激發學生的學習興趣,讓學生從實踐過程中掌握網頁技術的套用。學生通過學習並完成所創設的項目,能夠熟練掌握網頁的設計與製作。教材中還植入職業崗位能力、鄉土文化等元素,以“膠南旅遊網”相關頁面製作為主線進行課堂實踐,培養學生的綜合職業能力。 本書可作為中等職業學校計算機、電子商務、物流等專業的“網頁設計與製作”課程的教材,也可作為對網頁設計與製作感興趣的初學者的參考資料。
前言
項目活動一 初識網頁 1
第一節任務一 優秀網頁賞析 1
一、優秀網頁賞析 2
二、網頁的版面布局 3
三、網頁的色彩搭配 5
四、網頁的基本元素 7
成長加油站 9
實踐演練 網頁賞析 9
第二節 任務二 瀏覽網頁 10
一、WWW服務 11
二、認識網頁和網站 11
三、靜態網頁和動態網頁 14
四、常用網頁設計軟體 15
實踐演練 淘寶網頁面體驗 16
項目活動二 Dreamweaver初體驗 18
第三節 任務一 創建和管理站點 18
一、Dreamweaver的工作環境 19
二、站點的創建與管理 20
三、網頁頁面屬性的設定 26
成長加油站 Dreamweaver的操作界面 27
實踐演練 膠南旅遊——膠南民間藝術網頁 28
任務二 HTML語言 30
HTML標記 30
成長加油站 HTML結構 33
實踐演練 珠山秀色掩古剎網頁 33
第四節 任務三 文本操作 35
一、在網頁中輸入與編輯文本 36
二、在網頁中添加與編輯列表 37
代碼解讀 HTML的列表標記 40
實踐演練 大珠山·小珠山網頁 40
任務四 圖像操作 41
一、在網頁中插入和編輯圖像 42
二、設定交換圖像 43
三、設定圖像導航條 44
成長加油站 圖像檔案的格式 46
實踐演練 美圖膠南網頁 47
項目活動三 表格布局 49
任務一 表格的基本操作 49
成長加油站 表格的基本操作 51
代碼解讀 52
任務二 表格屬性的設定 52
成長加油站 表格相關成長 54
一、表格的屬性 54
二、單元格屬性 56
三、表格常用的裝飾方法 56
實踐演練 青島西海岸度假勝地 57
項目活動四 布局表格 59
任務 設定跟蹤圖像 59
成長加油站 跟蹤圖像相關成長 61
一、什麼是跟蹤圖像 61
二、跟蹤圖像的優點 61
三、設定跟蹤圖像的步驟 62
實踐演練 青島西海岸度假勝地 63
項目活動五 層的布局 64
任務一 創建層 64
成長加油站 層屬性的設定 65
一、層的創建 65
二、屬性的設定 65
任務二 套用層 68
成長加油站 層的套用 70
代碼解讀 HTML的層標記 70
實踐演練 青島西海岸度假勝地 71
項目活動六 框架頁面設計與製作 73
任務 使用框架製作網頁 73
成長加油站 框架相關知識 77
代碼解讀 框架代碼和浮動框架代碼 78
實踐演練 青島西海岸度假勝地 79
項目活動七 超連結與導航欄 81
任務一 常見的幾種超連結 81
成長加油站 超連結的概念和路徑 84
代碼解讀 84
任務二 導航條超連結的設定 84
成長加油站 超連結的分類 88
一、超連結的分類(按要連結的檔案所處的位置分類) 88
二、超連結的創建 88
實踐演練 青島西海岸度假勝地 89
項目活動八 網頁中的動感元素 90
任務一 Flash文本 90
成長加油站 插入Flash文本對象 91
任務二 Flash按鈕 92
成長加油站 插入Flash按鈕 93
任務三 插入Shockwave影片 94
成長加油站 Shockwave影片的插入 96
代碼解讀 Flash動畫標記 97
實踐演練 青島西海岸度假勝地 97
項目活動九 模板和庫 99
任務一 模板的創建 99
成長加油站 模板相關成長 101
一、模板簡介 101
二、創建模板 101
任務二 套用模板製作網頁 103
成長加油站 105
一、用模板創建網頁 105
二、利用模板更新頁面 105
三、與模板脫離 105
任務三 庫在網頁製作中的套用 105
成長加油站 庫的基礎知識 106
實踐演練 青島西海岸度假勝地 107
項目活動十 表單頁面設計與製作 109
任務 表單的製作 109
成長加油站 表單相關成長 114
一、表單 114
二、設定表單結果的處理方式 115
代碼解讀 表單標記 115
實踐演練 留言板 117
項目活動十一 用CSS美化網頁 118
任務一 使用CSS樣式美化網頁文本 118
成長加油站 CSS其他美化設定 119
任務二 使用CSS樣式美化表單 120
一、新建CSS樣式 120
二、將CSS樣式添加到頁面 122
三、修改框線效果 122
四、添加各種不同的框線效果 123
成長加油站 CSS相關成長 125
一、CSS的基本語法 125
二、建立CSS樣式 126
三、在網頁中插入CSS的方法 126
代碼解讀 去掉文字超連結的下畫線和顏色的HTML代碼 126
實踐演練 珠山秀色掩古剎 127
項目活動十二 特效頁面設計與製作 129
任務一 浮動圖片的製作 129
任務二 彈出視窗的製作 132
成長加油站 行為和事件的相關成長 134
代碼解讀 調用JavaScript代碼 135
一、JavaScript代碼如何加入html頁面中 135
二、外部獨立的JS檔案,鏈入html代碼中,JS檔案名稱通常是“檔案名稱.js” 135
實踐演練 青島西海岸度假勝地 136
項目活動十三 整站開發案例解析 137
任務一 讀書網案例解析 137
一、讀書網 138
二、編輯首頁頁面 139
三、次頁面的編輯 143
任務二 尚實教育網案例解析 145
任務三 電子相冊案例解析 151
實踐演練 美化網頁 155
項目活動十四 發布與維護網站 156
任務一 網站的發布 156
一、發布站點前的準備工作 157
二、發布網站 160
成長加油站 虛擬主機 161
任務二 站點的日常維護 163
成長加油站 網站維護的主要內容 163
實踐演練 發布“膠南旅遊網”網站 164
拓展提高 網頁藝術設計的借鑑與模仿 165
一、網頁藝術設計 165
二、借鑑和模仿 168
實訓參考實例 170
實例一 旅遊信息類網站——琅琊台旅遊網網站 170
一、製作琅琊台旅遊網首頁 170
二、製作二級公司介紹頁面 177
實例二 網上商城類網站——茶園網站前台製作 179
一、建立“茶園”站點 180
二、“茶園”首頁製作 183