模塊一 網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識(shí) 1 任務(wù)1 Dreamweaver CC 2017的安裝 1 任務(wù)描述 1 知識(shí)準(zhǔn)備 2 1.1 Dreamweaver CC 2017的新增 功能 2 任務(wù)實(shí)現(xiàn) 3 任務(wù)小結(jié) 4 任務(wù)2 網(wǎng)站的建立 4 任務(wù)描述 4 知識(shí)準(zhǔn)備 5 1.2 網(wǎng)頁、網(wǎng)站、首頁 5 1.3 靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁 6 1.4 IP地址、域名和URL 7 1.5 HTTP和FTP 7 任務(wù)實(shí)現(xiàn) 7 任務(wù)小結(jié) 9 任務(wù)3 網(wǎng)頁的基本知識(shí) 9 任務(wù)描述 9 知識(shí)準(zhǔn)備 10 1.6 網(wǎng)頁的基本結(jié)構(gòu) 10 1.7 網(wǎng)頁的基本內(nèi)容 10 1.8 網(wǎng)頁的表現(xiàn) 11 1.9 網(wǎng)頁的行為 11 1.10 網(wǎng)頁的Web標(biāo)準(zhǔn) 11 任務(wù)小結(jié) 12 思考與練習(xí) 12 模塊二 HTML5開發(fā)基礎(chǔ) 14 任務(wù)1 編寫一個(gè)簡單的HTML5 頁面 14 任務(wù)描述 14 知識(shí)準(zhǔn)備 15 2.1 HTML簡介 15 2.2 HTML的基本結(jié)構(gòu) 16 任務(wù)實(shí)現(xiàn) 21 任務(wù)小結(jié) 22 任務(wù)2 設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁 文件頭部信息 22 任務(wù)描述 22 知識(shí)準(zhǔn)備 23 2.3 頁面文件的頭部信息 23 任務(wù)實(shí)現(xiàn) 26 任務(wù)小結(jié) 27 思考與練習(xí) 27 模塊三 文本與段落 30 任務(wù)1 文字的基本排版 30 任務(wù)描述 30 知識(shí)準(zhǔn)備 31 3.1 段落 31 3.2 換行 31 3.3 預(yù)格式化 31 3.4 水平線 31 3.5 各級(jí)標(biāo)題 32 任務(wù)實(shí)現(xiàn) 32 任務(wù)小結(jié) 33 任務(wù)2 對(duì)文字進(jìn)行加強(qiáng)描述 33 任務(wù)描述 33 知識(shí)準(zhǔn)備 33 3.6 強(qiáng)調(diào)文本 33 3.7 作品標(biāo)題 34 3.8 小型文本 34 3.9 標(biāo)記文本的更改 34 3.10 文本的上下標(biāo) 35 3.11 時(shí)間和日期 35 3.12 其他相關(guān)元素 35 任務(wù)實(shí)現(xiàn) 36 任務(wù)小結(jié) 36 任務(wù)3 使用塊級(jí)元素和行內(nèi)元素 制作專業(yè)信息頁面 37 任務(wù)描述 37 知識(shí)準(zhǔn)備 37 3.13 塊級(jí)元素 37 3.14 行內(nèi)元素 38 3.15 ＜span＞標(biāo)記 38 任務(wù)實(shí)現(xiàn) 38 任務(wù)小結(jié) 40 任務(wù)4 特殊符號(hào)的使用 40 任務(wù)描述 40 知識(shí)準(zhǔn)備 41 3.16 字符實(shí)體 41 任務(wù)實(shí)現(xiàn) 41 任務(wù)小結(jié) 42 任務(wù)5 添加注釋 42 任務(wù)描述 42 知識(shí)準(zhǔn)備 42 3.17 旁注 42 3.18 注釋 43 任務(wù)實(shí)現(xiàn) 43 任務(wù)小結(jié) 44 思考與練習(xí) 44 模塊四 網(wǎng)頁中的圖像與多媒體技術(shù) 46 任務(wù)1 制作“在線學(xué)習(xí)網(wǎng)”的平面 作品展示頁面 46 任務(wù)描述 46 知識(shí)準(zhǔn)備 47 4.1 網(wǎng)頁中的圖像 47 4.2 使用＜img＞標(biāo)記插入圖像 48 任務(wù)實(shí)現(xiàn) 54 任務(wù)小結(jié) 55 任務(wù)2 制作“在線學(xué)習(xí)網(wǎng)”的廣告 作品展示頁面 56 任務(wù)描述 56 知識(shí)準(zhǔn)備 56 4.3 使用＜o(jì)bject＞標(biāo)記在網(wǎng)頁中插入 Flash動(dòng)畫 56 4.4 使用＜embed＞標(biāo)記在網(wǎng)頁中插入 多媒體內(nèi)容 57 任務(wù)實(shí)現(xiàn) 58 任務(wù)小結(jié) 60 任務(wù)3 制作“在線學(xué)習(xí)網(wǎng)”的多媒體 作品展示頁面 60 任務(wù)描述 60 知識(shí)準(zhǔn)備 61 4.5 網(wǎng)頁中的多媒體內(nèi)容 61 4.6 使用＜video＞標(biāo)記在網(wǎng)頁中插入 視頻 61 4.7 使用＜audio＞標(biāo)記在網(wǎng)頁中插入 音頻 63 任務(wù)實(shí)現(xiàn) 64 任務(wù)小結(jié) 65 思考與練習(xí) 65 模塊五 應(yīng)用表格布局頁面 68 任務(wù)1 圖書借閱詳情頁面的制作 68 任務(wù)描述 68 知識(shí)準(zhǔn)備 69 5.1 表格的基本結(jié)構(gòu) 69 5.2 創(chuàng)建表格 69 5.3 表格的其他元素 71 任務(wù)實(shí)現(xiàn) 72 任務(wù)小結(jié) 73 任務(wù)2 課程表的制作 73 任務(wù)描述 73 知識(shí)準(zhǔn)備 74 5.4 跨行跨列設(shè)置 74 5.5 背景顏色設(shè)置 75 任務(wù)實(shí)現(xiàn) 75 任務(wù)小結(jié) 78 任務(wù)3 學(xué)院首頁頁面的制作 78 任務(wù)描述 78 知識(shí)準(zhǔn)備 79 5.6 對(duì)齊方式的設(shè)置 79 5.7 寬度、高度的設(shè)置 80 5.8 背景圖片的設(shè)置 80 任務(wù)實(shí)現(xiàn) 80 任務(wù)小結(jié) 81 思考與練習(xí) 82 模塊六 創(chuàng)建網(wǎng)頁中的超鏈接 83 任務(wù) 創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁面的 超鏈接 83 任務(wù)描述 83 知識(shí)準(zhǔn)備 85 6.1 創(chuàng)建超鏈接 85 6.2 超鏈接的類型 88 任務(wù)實(shí)現(xiàn) 92 任務(wù)小結(jié) 96 思考與練習(xí) 97 模塊七 網(wǎng)頁表單設(shè)計(jì) 99 任務(wù)1 注冊(cè)頁面的設(shè)計(jì) 99 任務(wù)描述 99 知識(shí)準(zhǔn)備 99 7.1 了解表單 99 7.2 輸入元素input 101 任務(wù)實(shí)現(xiàn) 105 任務(wù)小結(jié) 108 任務(wù)2 讀者留言板的設(shè)計(jì) 108 任務(wù)描述 108 知識(shí)準(zhǔn)備 108 7.3 下拉選擇框元素select 108 7.4 多行文本域textarea 110 任務(wù)實(shí)現(xiàn) 111 任務(wù)小結(jié) 113 思考與練習(xí) 114 模塊八 網(wǎng)頁的CSS樣式設(shè)計(jì) 115 任務(wù)1 網(wǎng)頁大標(biāo)題的樣式設(shè)計(jì) 115 任務(wù)描述 115 知識(shí)準(zhǔn)備 116 8.1 什么是CSS 116 8.2 CSS的應(yīng)用 118 任務(wù)實(shí)現(xiàn) 119 任務(wù)小結(jié) 121 任務(wù)2 網(wǎng)頁中的文字排版 122 任務(wù)描述 122 知識(shí)準(zhǔn)備 123 8.3 CSS字體樣式 123 任務(wù)實(shí)現(xiàn) 125 任務(wù)小結(jié) 129 任務(wù)3 制作新聞列表排行榜 129 任務(wù)描述 129 知識(shí)準(zhǔn)備 130 8.4 列表的應(yīng)用 130 任務(wù)實(shí)現(xiàn) 133 任務(wù)小結(jié) 135 思考與練習(xí) 135 模塊九 使用DIV+CSS布局頁面 138 任務(wù)1 網(wǎng)頁中的圖文混排 138 任務(wù)描述 138 知識(shí)準(zhǔn)備 139 9.1 CSS盒子模型 139 9.2 CSS浮動(dòng)與定位 146 任務(wù)實(shí)現(xiàn) 147 任務(wù)小結(jié) 149 任務(wù)2 網(wǎng)頁中的全圖排版 149 任務(wù)描述 149 知識(shí)準(zhǔn)備 150 9.3 CSS背景控制 150 任務(wù)實(shí)現(xiàn) 152 任務(wù)小結(jié) 154 任務(wù)3 多行多列式布局 154 任務(wù)描述 154 知識(shí)準(zhǔn)備 155 9.4 CSS代碼優(yōu)化 155 任務(wù)實(shí)現(xiàn) 157 任務(wù)小結(jié) 162 思考與練習(xí) 162 模塊十 使用CSS3美化網(wǎng)站元素 164 任務(wù)1 使用CSS3設(shè)計(jì)網(wǎng)站導(dǎo)航 164 任務(wù)描述 164 知識(shí)準(zhǔn)備 165 10.1 CSS3背景漸變及陰影 165 10.2 CSS超鏈接樣式 166 任務(wù)實(shí)現(xiàn) 166 任務(wù)小結(jié) 168 任務(wù)2 使用CSS3美化表格 168 任務(wù)描述 168 知識(shí)準(zhǔn)備 169 10.3 HTML表格的特殊應(yīng)用 169 任務(wù)實(shí)現(xiàn) 170 任務(wù)小結(jié) 172 任務(wù)3 使用CSS3美化表單 172 任務(wù)描述 172 知識(shí)準(zhǔn)備 172 10.4 CSS屬性選擇器 172 任務(wù)實(shí)現(xiàn) 173 任務(wù)小結(jié) 176 思考與練習(xí) 176 模塊十一 綜合案例 178 任務(wù) 學(xué)校網(wǎng)站的頁面設(shè)計(jì) 178 任務(wù)描述 178 任務(wù)實(shí)現(xiàn) 178 任務(wù)小結(jié) 201 參考文獻(xiàn) 202