網(wǎng)頁設計技術(shù)與應用案例解析

第１章
零基礎學網(wǎng)頁設計
1.1 網(wǎng)頁設計相關知識 2 1.1.1 網(wǎng)頁設計專業(yè)名詞 2 1.1.2 網(wǎng)頁設計流程 3 1.1.3 網(wǎng)站建設流程 4 1.2 網(wǎng)頁設計常用布局 7 1.3 網(wǎng)頁設計常用軟件 8 1.3.1 Dreamweaver 8 1.3.2 Illustrator  9 1.3.3 Photoshop 9 1.4 網(wǎng)頁設計在行業(yè)中的應用 10 1.4.1 網(wǎng)頁設計對應的崗位和行業(yè)概況 10 1.4.2 網(wǎng)頁設計從業(yè)人員應具備的素養(yǎng) 10 課堂實戰(zhàn) 了解網(wǎng)頁和網(wǎng)站 10 課后練習 了解網(wǎng)頁色彩基礎 11 拓展賞析 徐州博物館 12
第2章
網(wǎng)頁設計基本操作
2.1 Dreamweaver工作界面 14 2.2 網(wǎng)頁設計常用面板 15 2.2.1 菜單欄—常用菜單命令 15 2.2.2 文檔工具欄—文檔視圖切換 15 2.2.3 通用工具欄—常用工具 16 2.2.4 標簽選擇器—選擇標簽 16 2.2.5 “屬性”面板—設置屬性 16 2.2.6 面板組—常用面板 17 2.3 創(chuàng)建與管理站點 18 2.3.1 案例解析：創(chuàng)建站點 18 2.3.2 創(chuàng)建站點—創(chuàng)建本地和遠程站點 20 2.3.3 訪問站點—編輯站點文件 21 2.3.4 編輯站點—修改站點屬性 21 2.4 文檔的基礎操作 22 2.4.1 案例解析：插入Word文檔 22 2.4.2 新建文檔—創(chuàng)建文檔 24 2.4.3 保存文檔—保存當前文檔 24 2.4.4 打開文檔—打開已有文檔 25 2.4.5 插入文檔—應用已有文檔 25 課堂實戰(zhàn) 創(chuàng)建個人站點 26 課后練習 認識首選項 28 拓展賞析 南京博物院 29
第3章
常見網(wǎng)頁元素及應用
3.1 文本元素的應用 32 3.1.1 案例解析：制作散文網(wǎng)頁 32 3.1.2 創(chuàng)建文本—添加文本 36 3.1.3 設置網(wǎng)頁中的文本屬性—文本屬性設置 37 3.1.4 在網(wǎng)頁中插入特殊元素—“插入”命令的使用 38 3.2 圖像元素的應用 39 3.2.1 案例解析：制作圖像網(wǎng)頁 39 3.2.2 圖像常用格式—了解圖像 42 3.2.3 插入圖像—應用圖像 43 3.2.4 圖像對齊方式—設置圖像對齊 44 3.2.5 設置網(wǎng)頁背景圖像—設置背景圖 45 3.2.6 鼠標經(jīng)過圖像—切換圖像 46 3.2.7 編輯圖像—修改圖像屬性 47 3.3 其他多媒體元素 49 3.3.1 視頻元素—插入視頻 49 3.3.2 音頻元素—插入音頻 51 課堂實戰(zhàn) 制作古文網(wǎng)頁 52 課后練習 制作鼠標經(jīng)過圖像效果 57 拓展賞析 陜西歷史博物館 58
第4章
網(wǎng)頁超鏈接的應用
4.1 認識超鏈接 60 4.1.1 絕對路徑—包括服務器規(guī)范在內(nèi)的完全路徑 60 4.1.2 文檔相對路徑—本地鏈接 60 4.1.3 站點根目錄相對路徑—從站點的根文件夾到 4.1.3 文檔的路徑 60 4.2 創(chuàng)建超鏈接 60 4.2.1 案例解析：創(chuàng)建電子郵件鏈接 60 4.2.2 文本鏈接—帶鏈接的文本 62 4.2.3 空鏈接—無指向鏈接 63 4.2.4 錨點鏈接—同一頁面鏈接 64 4.2.5 電子郵件鏈接—指向電子郵件的鏈接 64 4.2.6 腳本鏈接—通過鏈接觸發(fā)腳本命令 65 4.2.7 圖像鏈接—在圖像上創(chuàng)建鏈接 65 4.2.8 圖像熱點鏈接—在圖像部分區(qū)域創(chuàng)建熱點鏈接 65 4.3 管理網(wǎng)頁超鏈接 65 4.3.1 案例解析：設置鏈接自動更新 66 4.3.2 自動更新鏈接—自動更新改動的超鏈接 66 4.3.3 在站點范圍內(nèi)更改鏈接—手動更新鏈接 67 4.3.4 檢查站點中的鏈接錯誤—檢查站點鏈接 68 課堂實戰(zhàn) 制作書店網(wǎng)頁 68 課后練習 制作國粹特色網(wǎng)頁 76 拓展賞析 秦始皇帝陵博物院 77
第5章
網(wǎng)頁中表格的應用
5.1 創(chuàng)建表格 80 5.1.1 案例解析：在網(wǎng)頁中添加活動信息表 80 5.1.2 認識表格—表格相關術(shù)語 82 5.1.3 插入表格—創(chuàng)建表格 82 5.1.4 表格基本代碼—表格相關代碼 83 5.2 設置表格屬性 84 5.2.1 案例解析：制作西餐廳網(wǎng)頁 84 5.2.2 設置表格屬性—調(diào)整表格效果 87 5.2.3 設置單元格屬性—調(diào)整單元格 87 5.2.4 鼠標經(jīng)過顏色—制作鼠標劃過效果 88 5.2.5 表格的屬性代碼—表格屬性設置代碼 89 5.3 編輯表格 90 5.3.1 案例解析：制作花店網(wǎng)頁 91 5.3.2 選擇表格—選擇表格不同部分 94 5.3.3 復制/粘貼表格—快速制作相同內(nèi)容 94 5.3.4 添加行和列—添加表格行或列 95 5.3.5 刪除行和列—刪除表格行或列 95 5.3.6 合并和拆分單元格—豐富表格效果 96 5.4 導入/導出表格式數(shù)據(jù) 96 5.4.1 導入表格式數(shù)據(jù)—導入外部表格式數(shù)據(jù) 96 5.4.2 導出表格式數(shù)據(jù)—導出表格 97 課堂實戰(zhàn) 制作影院排片信息網(wǎng)頁 97 課后練習 制作產(chǎn)品展示網(wǎng)頁 102 拓展賞析 蘇州博物館 104
第6章
Div CSS布局技術(shù)
6.1 創(chuàng)建CSS樣式 106 6.1.1 案例解析：美化文本內(nèi)容 106 6.1.2 認識CSS樣式表—了解CSS 108 6.1.3 CSS設計器—設置CSS樣式 110 6.1.4 創(chuàng)建CSS樣式表—新建CSS樣式表 111 6.2 定義CSS樣式 114 6.2.1 案例解析：定義旅行社網(wǎng)頁樣式 115 6.2.2 類型—設置CSS規(guī)則定義類型參數(shù) 119 6.2.3 背景—設置CSS規(guī)則定義背景參數(shù) 119 6.2.4 區(qū)塊—設置CSS規(guī)則定義區(qū)塊參數(shù) 120 6.2.5 方框—設置CSS規(guī)則定義方框參數(shù) 120 6.2.6 邊框—設置CSS規(guī)則定義邊框參數(shù) 121 6.2.7 列表—設置CSS規(guī)則定義列表參數(shù) 121 6.2.8 定位—設置CSS規(guī)則定義定位參數(shù) 122 6.2.9 擴展—設置CSS規(guī)則定義擴展參數(shù) 123 6.2.10  過渡—設置CSS規(guī)則定義過渡參數(shù) 123 6.3 Div CSS布局基礎 124 6.3.1 案例解析：制作文具公司網(wǎng)頁 124 6.3.2 認識Div—Div簡介 129 6.3.3 Div CSS布局優(yōu)勢—Div CSS布局優(yōu)點 129 6.3.4 創(chuàng)建Div—新建Div 129 6.3.5 盒子模型—思維模型 131 課堂實戰(zhàn) 制作幼兒園網(wǎng)頁 133 課后練習 制作建筑公司網(wǎng)頁 141 拓展賞析 上海博物館 142
第7章
表單技術(shù)
7.1 認識表單 144 7.2 創(chuàng)建表單域 144 7.3 創(chuàng)建文本類表單 145 7.3.1 案例解析：制作登錄界面 145 7.3.2 文本—創(chuàng)建單行文本域 148 7.3.3 文本區(qū)域—創(chuàng)建多行文本域 148 7.3.4 密碼—創(chuàng)建密碼域 149 7.4 創(chuàng)建選項類表單 150 7.4.1 案例解析：制作線上報名表 150 7.4.2 單選按鈕—創(chuàng)建單選按鈕 152 7.4.3 復選框—創(chuàng)建復選框 153 7.4.4 選擇—創(chuàng)建下拉菜單 154 7.5 創(chuàng)建文件域 155 7.6 創(chuàng)建表單按鈕 155 課堂實戰(zhàn) 制作注冊網(wǎng)頁 156 課后練習 制作問答網(wǎng)頁 161 拓展賞析 安徽博物院 162
第8章
模板與庫
8.1 創(chuàng)建模板 164 8.1.1 案例解析：創(chuàng)建網(wǎng)頁模板 164 8.1.2 創(chuàng)建模板—創(chuàng)建模板的不同方式 165 8.1.3 可編輯區(qū)域—可編輯區(qū)域的創(chuàng)建 166 8.1.4 可選區(qū)域—可選區(qū)域的創(chuàng)建 167 8.2 應用和管理模板 168 8.2.1 案例解析：應用網(wǎng)頁模板 168 8.2.2 模板的應用—應用模板 170 8.2.3 更新頁面—模板修改后更新文檔 171 8.2.4 重命名模板—修改模板名稱 171 8.2.5 刪除模板—刪除多余模板 171 8.3 創(chuàng)建與應用庫 172 8.3.1 創(chuàng)建庫項目—創(chuàng)建應用庫 172 8.3.2 插入庫項目—應用庫項目 172 8.3.3 管理庫項目—編輯管理庫項目 173 課堂實戰(zhàn) 制作旅行社網(wǎng)頁 174 課后練習 制作景區(qū)網(wǎng)站模板并應用 177 拓展賞析 三星堆博物館 178
第9章
行為技術(shù)
9.1 認識行為 180 9.1.1 案例解析：添加網(wǎng)頁彈出信息 180 9.1.2 行為—了解行為 181 9.1.3 事件—認識事件 182 9.2 常用行為 183 9.2.1 案例解析：制作交換圖像效果 183 9.2.2 應用行為調(diào)節(jié)瀏覽器窗口—與瀏覽器相關的行為 184 9.2.3 應用行為調(diào)節(jié)圖像—與圖像相關的行為 186 9.2.4 應用行為顯示文本—與文本相關的行為 187 9.2.5 應用行為控制表單—與表單相關的行為 189 課堂實戰(zhàn) 提高網(wǎng)頁交互性 190 課后練習 制作室內(nèi)設計網(wǎng)頁 193 拓展賞析 甘肅省博物館 195 第10章 網(wǎng)頁編輯利器之HTML5 10.1 認識HTML 198 10.1.1 HTML簡介 198 10.1.2 HTML的基本結(jié)構(gòu) 198 10.2 常見標簽的應用 200 10.2.1 案例解析：在網(wǎng)頁中添加文本 200 10.2.2 標題文字 201 10.2.3 文字字體 202 10.2.4 段落換行 202 10.2.5 不換行標簽 202 10.2.6 圖像標簽 203 10.2.7 超鏈接標簽 203 10.2.8 列表標簽 204 10.2.9 表單標簽 206 10.3 網(wǎng)頁樣式設置 207 10.3.1 案例解析：段落縮進效果 207 10.3.2 字體樣式 208 10.3.3 段落樣式 210 10.4 頁面動畫效果 212 10.4.1 案例解析：模擬星球運轉(zhuǎn)效果 212 10.4.2 實現(xiàn)過渡 217 10.4.3 實現(xiàn)動畫 220 課堂實戰(zhàn) 制作簡易網(wǎng)頁布局 224 課后練習 插入網(wǎng)頁圖像 227 拓展賞析 湖北省博物館 228 附錄：網(wǎng)頁設計常用快捷鍵匯總 229 參考文獻 234