子項(xiàng)目1 網(wǎng)站建設(shè)基礎(chǔ)知識(shí)與整體流程 1 項(xiàng)目任務(wù)1.1 了解網(wǎng)站建設(shè)的基礎(chǔ)知識(shí) 1 1.1.1 認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站 2 1.1.2 了解網(wǎng)頁(yè)制作技術(shù) 3 1.1.3 了解網(wǎng)頁(yè)制作常用工具 4 1.1.4 編寫第一個(gè)網(wǎng)頁(yè) 10 項(xiàng)目任務(wù)1.2 熟悉網(wǎng)站建設(shè)的整體流程 11 1.2.1 網(wǎng)站前期策劃 12 1.2.2 制作裁切網(wǎng)站設(shè)計(jì)稿 16 1.2.3 規(guī)劃與建立站點(diǎn) 16 1.2.4 實(shí)現(xiàn)網(wǎng)頁(yè)結(jié)構(gòu) 17 1.2.5 使用CSS樣式美化首頁(yè) 17 1.2.6 創(chuàng)建并應(yīng)用網(wǎng)頁(yè)模板 17 1.2.7 測(cè)試與發(fā)布網(wǎng)站 17 1.2.8 更新與維護(hù)網(wǎng)站 18 1.2.9 網(wǎng)站項(xiàng)目總結(jié) 18 1.3 小結(jié) 18 子項(xiàng)目2 “我的E站”前期策劃 19 項(xiàng)目任務(wù)2.1 “我的E站”項(xiàng)目立項(xiàng) 19 2.1.1 分析“我的E站”需求說明書 20 2.1.2 組建項(xiàng)目團(tuán)隊(duì) 20 項(xiàng)目任務(wù)2.2 撰寫“我的E站”項(xiàng)目策劃書 21 2.2.1 分析確定網(wǎng)站邏輯結(jié)構(gòu)圖 22 2.2.2 設(shè)計(jì)網(wǎng)站界面原型 22 2.2.3 撰寫項(xiàng)目策劃書 26 2.3 小結(jié) 28 子項(xiàng)目3 “我的E站”前期準(zhǔn)備 29 項(xiàng)目任務(wù)3.1 設(shè)計(jì)網(wǎng)站LOGO 29 3.1.1 LOGO設(shè)計(jì)思想與設(shè)計(jì)原則 30 3.1.2 網(wǎng)站常用圖片格式 31 3.1.3 制作“我的E站”LOGO 32 項(xiàng)目任務(wù)3.2 加工圖像素材 36 3.2.1 批量處理圖像 39 3.2.2 去除圖片水印 41 3.2.3 調(diào)整圖像屬性 41 3.2.4 美化加工圖像 43 3.2.5 應(yīng)用特殊文字 46 項(xiàng)目任務(wù)3.3 設(shè)計(jì)制作網(wǎng)站界面 48 3.3.1 設(shè)置頁(yè)面大小 49 3.3.2 規(guī)劃首頁(yè)內(nèi)容并設(shè)計(jì)版式 50 3.3.3 確定配色方案 50 3.3.4 制作網(wǎng)站首頁(yè)效果圖 52 3.3.5 制作網(wǎng)站子頁(yè)效果圖 64 項(xiàng)目任務(wù)3.4 裁切網(wǎng)站設(shè)計(jì)稿 68 3.4.1 切片的原則 70 3.4.2 創(chuàng)建首頁(yè)切片 70 3.4.3 編輯首頁(yè)切片 73 3.4.4 命名首頁(yè)切片 74 3.4.5 導(dǎo)出首頁(yè)切片 74 3.4.6 裁切子頁(yè)設(shè)計(jì)稿 75 項(xiàng)目任務(wù)3.5 制作網(wǎng)站中的動(dòng)畫 77 3.5.1 Flash基本概念 77 3.5.2 Flash基本操作 80 3.5.3 Flash基本動(dòng)畫形式 83 3.5.4 制作網(wǎng)站首頁(yè)banner 88 3.6 小結(jié) 93 3.7 技能訓(xùn)練 93 3.7.1 裁切網(wǎng)站設(shè)計(jì)稿 93 3.7.2 Flash動(dòng)畫設(shè)計(jì) 94 3.7.3 Flash交互界面開發(fā) 99 子項(xiàng)目4 實(shí)現(xiàn)網(wǎng)頁(yè)布局 105 項(xiàng)目任務(wù)4.1 創(chuàng)建本地站點(diǎn) 105 4.1.1 規(guī)劃目錄結(jié)構(gòu) 105 4.1.2 熟悉Dreamweaver工作區(qū)并新建本地站點(diǎn) 106 4.1.3 管理本地站點(diǎn) 108 4.1.4 HTML基本概念及結(jié)構(gòu) 110 項(xiàng)目任務(wù)4.2 一列固定寬度布局 113 4.2.1 插入Div標(biāo)簽 114 4.2.2 樣式表種類和CSS選擇器 115 4.2.3 在頁(yè)面中引入CSS樣式表 117 4.2.4 CSS樣式代碼編寫規(guī)則 118 4.2.5 CSS盒模型 121 項(xiàng)目任務(wù)4.3 一列多行固定寬度居中布局 127 4.3.1 一列固定寬度居中布局 128 4.3.2 一列多行固定寬度居中布局 129 項(xiàng)目任務(wù)4.4 多列多行固定寬度居中布局 130 4.4.1 DOM樹 132 4.4.2 CSS盒子在標(biāo)準(zhǔn)流中的定位 133 4.4.3 CSS盒子浮動(dòng)方式 133 4.4.4 二列固定寬度居中布局 135 4.4.5 二列多行固定寬度居中布局 135 4.4.6 清除浮動(dòng)屬性 136 4.4.7 三列固定寬度居中布局 137 4.4.8 三列多行固定寬度居中布局 137 項(xiàng)目任務(wù)4.5 “我的E站”頁(yè)面布局 138 4.5.1 “我的E站”子頁(yè)布局 139 4.5.2 “我的E站”首頁(yè)布局 143 4.6 小結(jié) 150 4.7 技能訓(xùn)練 150 4.7.1 建立站點(diǎn) 150 4.7.2 編寫HTML代碼結(jié)構(gòu) 150 子項(xiàng)目5 添加和美化網(wǎng)頁(yè)內(nèi)容 151 項(xiàng)目任務(wù)5.1 “我的E站”子頁(yè)制作 151 5.1.1 文本圖像及樣式 152 5.1.2 列表及樣式 160 5.1.3 超鏈接及樣式 163 5.1.4 背景樣式 166 5.1.5 “關(guān)于我們”頭部制作 169 5.1.6 “E站日記”列表制作 170 5.1.7 表格及樣式 171 項(xiàng)目任務(wù)5.2 “我的E站”首頁(yè)制作 178 5.2.1 頭部制作 179 5.2.2 banner制作 180 5.2.3 中部制作 186 5.2.4 其他信息制作 188 5.2.5 底部制作 190 5.3 小結(jié) 192 5.4 技能訓(xùn)練 192 5.4.1 使用CSS布局技術(shù)完成網(wǎng)頁(yè) 192 5.4.2 使用列表和CSS制作菜單 193 子項(xiàng)目6 網(wǎng)頁(yè)模板及多媒體應(yīng)用 194 項(xiàng)目任務(wù)6.1 創(chuàng)建并應(yīng)用網(wǎng)頁(yè)模板 194 6.1.1 創(chuàng)建模板 194 6.1.2 制作模板頁(yè)面 196 6.1.3 插入或刪除可編輯區(qū)域 200 6.1.4 應(yīng)用模板 201 項(xiàng)目任務(wù)6.2 添加多媒體元素 204 6.2.1 插入多媒體元素 205 6.2.2 應(yīng)用行為 208 6.2.3 運(yùn)用JavaScript實(shí)現(xiàn)banner效果 210 6.3 小結(jié) 211 6.4 技能訓(xùn)練 212 子項(xiàng)目7 “我的E站”測(cè)試與發(fā)布 213 項(xiàng)目任務(wù)7.1 常見瀏覽器兼容問題及解決方案 213 7.1.1 網(wǎng)頁(yè)中的標(biāo)簽問題 213 7.1.2　div的垂直居中問題 214 7.1.3　margin加倍的問題 215 7.1.4　浮動(dòng)IE產(chǎn)生的雙倍距離 216 7.1.5 寬度和高度問題 217 7.1.6 DIV浮動(dòng)IE文本產(chǎn)生3像素的BUG 220 7.1.7 float清除浮動(dòng) 220 7.1.8 圖片間有空白間隙問題 224 7.1.9 不同瀏覽器對(duì)實(shí)際像素的解釋 225 7.1.10 應(yīng)用條件注釋實(shí)現(xiàn)瀏覽器兼容 225 7.1.11 常用hack方法兼容介紹 226 項(xiàng)目任務(wù)7.2 站點(diǎn)的測(cè)試與調(diào)試 227 7.2.1 檢查站點(diǎn)范圍的鏈接 227 7.2.2 改變站點(diǎn)范圍的鏈接 228 7.2.3 清理HTML 228 7.2.4 清理Word生成的HTML 229 7.2.5 同步 229 7.2.6 生成輔助功能報(bào)告 230 7.2.7 站點(diǎn)測(cè)試指南 230 項(xiàng)目任務(wù)7.3 網(wǎng)站的發(fā)布 231 7.3.1 申請(qǐng)域名 231 7.3.2 申請(qǐng)空間 235 7.3.3 站點(diǎn)的上傳 238 7.4 小結(jié) 240 7.5 技能訓(xùn)練 240 子項(xiàng)目8 網(wǎng)站的宣傳推廣與維護(hù) 241 項(xiàng)目任務(wù)8.1 網(wǎng)站宣傳推廣 241 8.1.1 常見網(wǎng)站推廣方式 242 8.1.2 網(wǎng)站推廣步驟 249 8.1.3 搜索引擎優(yōu)化工具 250 項(xiàng)目任務(wù)8.2 網(wǎng)站維護(hù) 252 8.2.1 網(wǎng)站維護(hù)的重要性 252 8.2.2 網(wǎng)站維護(hù)的基本內(nèi)容 253 8.3 小結(jié) 254 子項(xiàng)目9 “我的E站”項(xiàng)目總結(jié) 255 項(xiàng)目任務(wù)9.1 文檔的書寫與整理 255 項(xiàng)目任務(wù)9.2 網(wǎng)站展示、交流與評(píng)價(jià) 257 9.3 小結(jié) 259 子項(xiàng)目10 將頁(yè)面移植到移動(dòng)設(shè)備 260 項(xiàng)目任務(wù)10.1 將“我的E站” 頁(yè)面 轉(zhuǎn)為響應(yīng)式 設(shè)計(jì) 260 10.1.1 響應(yīng)式設(shè)計(jì)概述 262 10.1.2 移動(dòng)化“關(guān)于我們”頁(yè)面 264 項(xiàng)目任務(wù)10.2 Bootstrap框架介紹 266 10.2.1 Bootstrap框架 簡(jiǎn)介 267 10.2.2 下載Bootstrap 框架 268 10.2.3 Bootstrap框架文件結(jié)構(gòu) 269 10.2.4 HTML標(biāo)準(zhǔn)模板 269 10.2.5 響應(yīng)式的柵格系統(tǒng) 270 10.2.6 基于Bootstrap框架的首頁(yè)制作 271 10.3 小結(jié) 275 附錄A 常用工具、插件及用戶 手冊(cè) 276 附錄B 網(wǎng)站制作規(guī)范 277 參考文獻(xiàn) 280