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

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