網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程（微課版）

單元1 網(wǎng)頁(yè)賞析、創(chuàng)建站點(diǎn)與瀏覽網(wǎng)頁(yè)
【教學(xué)導(dǎo)航】
【本單元單詞】
【預(yù)備知識(shí)】
HTML　與 CSS 網(wǎng)頁(yè)設(shè)計(jì)概述
1．1　認(rèn)識(shí)網(wǎng)頁(yè)、網(wǎng)頁(yè)相關(guān)的名詞、Web標(biāo)準(zhǔn)
1．2　HTML、CSS簡(jiǎn)介
1．3　常見(jiàn)瀏覽器介紹
1．4　使用谷歌瀏覽器調(diào)試開(kāi)發(fā)網(wǎng)頁(yè)
1．5　網(wǎng)頁(yè)賞析
1．6　Dreamweaver簡(jiǎn)介
【操作準(zhǔn)備】
【模仿訓(xùn)練】
任務(wù)1．1　創(chuàng)建北京大學(xué)網(wǎng)站站點(diǎn)并瀏覽網(wǎng)頁(yè)
任務(wù)1．1．1　分析北京大學(xué)站點(diǎn)的目錄結(jié)構(gòu)
任務(wù)1．1．2　賞析北京大學(xué)網(wǎng)站的首頁(yè)、列表頁(yè)和詳情頁(yè)
任務(wù)1．1．3　創(chuàng)建北京大學(xué)網(wǎng)站的本地站點(diǎn)
任務(wù)1-1-4　認(rèn)識(shí)Dreamweaver的工作界面
任務(wù)1-1-5　打開(kāi)與保存網(wǎng)頁(yè)文檔index．html
任務(wù)1-1-6　在瀏覽器中瀏覽網(wǎng)頁(yè)index．html
【模仿訓(xùn)練考核評(píng)價(jià)】
【拓展訓(xùn)練】
任務(wù)1．2　創(chuàng)建綠色食品網(wǎng)站站點(diǎn)并瀏覽網(wǎng)頁(yè)
【拓展訓(xùn)練考核評(píng)價(jià)】
【單元小結(jié)】
【單元習(xí)題】
單元2　網(wǎng)站項(xiàng)目開(kāi)發(fā)環(huán)境搭建
【教學(xué)導(dǎo)航】
【本單元單詞】
【預(yù)備知識(shí)】
HTML入門
2．1　HTML文檔基本格式、HTML標(biāo)記及其屬性、頭部標(biāo)記
2．1．1　認(rèn)識(shí)HTML文檔基本格式
2．1．2　HTML標(biāo)記及其屬性
2．1．3　頭部標(biāo)記
2．2　標(biāo)題段落標(biāo)記 、文本樣式標(biāo)記
2．2．1　標(biāo)題段落標(biāo)記
2．2．2　文本樣式標(biāo)記
2．3　文本格式化標(biāo)記、特殊字符標(biāo)記
2．3．1　文本格式化標(biāo)記
2．3．2　特殊字符標(biāo)記
2．4　常用圖像格式、圖像標(biāo)記、相對(duì)路徑和絕對(duì)路徑
2．4．1　常用圖像格式
2．4．2　圖像標(biāo)記
2．4．3　相對(duì)路徑和絕對(duì)路徑
2．5　和標(biāo)記
2．6　注釋標(biāo)記
【操作準(zhǔn)備】
【模仿訓(xùn)練】
任務(wù)2．1　北京大學(xué)網(wǎng)站項(xiàng)目開(kāi)發(fā)環(huán)境搭建
任務(wù)2．1．1 認(rèn)識(shí)手冊(cè)（w3school完整版．chm）的使用界面
任務(wù)2．1．2 認(rèn)識(shí)編輯器（Sublime Text）的使用界面
任務(wù)2．1．3　使用谷歌瀏覽器（Google Chrome）審查元素
任務(wù)2．1．4　創(chuàng)建北京大學(xué)網(wǎng)站站點(diǎn)文件夾
任務(wù)2．1．5　網(wǎng)頁(yè)基本骨架搭建
任務(wù)2．1．5．1　創(chuàng)建HTML文件
任務(wù)2．1．5．2　網(wǎng)頁(yè)骨架標(biāo)簽搭建
【模仿訓(xùn)練考核評(píng)價(jià)】
【拓展訓(xùn)練】
任務(wù)2．2　綠色食品網(wǎng)站項(xiàng)目開(kāi)發(fā)環(huán)境搭建
【拓展訓(xùn)練考核評(píng)價(jià)】
【單元小結(jié)】
【單元習(xí)題】
單元3　圖文混排網(wǎng)頁(yè)的制作
【教學(xué)導(dǎo)航】
【本單元單詞】
【預(yù)備知識(shí)】
CSS入門
3．1　掌握CSS樣式規(guī)則、CSS樣式表的引入方式
3．1．1　CSS樣式規(guī)則
3．1．2　引入CSS樣式表的方式
3．2　CSS基礎(chǔ)選擇器
3．2．1　標(biāo)記選擇器
3．2．2　id選擇器
3．2．3　類選擇器（class選擇器）
3．2．4　通配符選擇器
3．3　CSS文本相關(guān)樣式
3．4　CSS文本外觀屬性
3．5　CSS復(fù)合選擇器
3．5．1　交集選擇器（標(biāo)簽指定式選擇器）
3．5．2　并集選擇器（逗號(hào)選擇器）
3．5．3　后代選擇器（包含選擇器）
3．5．4　選擇器的綜合使用
3．6　CSS三大特性：繼承性、層疊性和優(yōu)先級(jí)
3．6．1　CSS的繼承性
3．6．2　CSS的層疊性
3．6．3　CSS的優(yōu)先級(jí)
【操作準(zhǔn)備】
【模仿訓(xùn)練】
任務(wù)3．1　制作介紹北京大學(xué)網(wǎng)站圖文混排效果的網(wǎng)頁(yè)
任務(wù)3．1．1 建立站點(diǎn)目錄結(jié)構(gòu)
任務(wù)3．1．2 創(chuàng)建與保存網(wǎng)頁(yè)文檔
任務(wù)3．1．3 圖文混排網(wǎng)頁(yè)頁(yè)面結(jié)構(gòu)分析
任務(wù)3．1．4 在網(wǎng)頁(yè)中插入相應(yīng)的標(biāo)簽、文字和圖片
任務(wù)3．1．5 插入與文本相關(guān)的元素并設(shè)置其屬性
任務(wù)3．1．6 設(shè)置圖片元素的屬性
【模仿訓(xùn)練考核評(píng)價(jià)】
【拓展訓(xùn)練】
任務(wù)3．2　制作介紹綠色食品網(wǎng)站圖文混排效果的網(wǎng)頁(yè)
【拓展訓(xùn)練考核評(píng)價(jià)】
【單元小結(jié)】
【單元習(xí)題】
單元4　表格與表格布局網(wǎng)頁(yè)的制作
【教學(xué)導(dǎo)航】
【本單元單詞】
【預(yù)備知識(shí)】
表格、表格布局及CSS控制表格樣式
4．1　表格
4．2　表格布局
4．3　CSS控制表格樣式
【操作準(zhǔn)備】
【模仿訓(xùn)練】
任務(wù)4．1　北京大學(xué)網(wǎng)站表格與表格布局網(wǎng)頁(yè)的制作
任務(wù)4．1．1 表格及細(xì)線表格的制作
任務(wù)4．1．2 滾動(dòng)文本效果的制作
任務(wù)4．1．3 表格布局網(wǎng)頁(yè)的制作
【模仿訓(xùn)練考核評(píng)價(jià)】
【拓展訓(xùn)練】
任務(wù)4．2　綠色食品網(wǎng)站表格與表格布局網(wǎng)頁(yè)的制作
【拓展訓(xùn)練考核評(píng)價(jià)】
【單元小結(jié)】
【單元習(xí)題】
單元5　包含flash元素和超級(jí)鏈接的網(wǎng)頁(yè)制作
【教學(xué)導(dǎo)航】
【本單元單詞】
【預(yù)備知識(shí)】
列表和超級(jí)鏈接
5．1　列表
5．1．1　認(rèn)識(shí)列表
5．1．2　無(wú)序列表（ul）
5．1．3　有序列表（ol）
5．1．4　定義列表（dl）
5．1．5　列表嵌套
5．2　CSS控制列表樣式
5．3　超級(jí)鏈接
5．3．1　超級(jí)鏈接
5．3．2　設(shè)置文本超鏈接
5．3．3　給鏈接添加提示文字
5．3．4　設(shè)置圖像超鏈接
5．3．5　使用錨在網(wǎng)頁(yè)內(nèi)部鏈接（錨點(diǎn)鏈接）
5．3．6　電子郵件的鏈接
5．3．7　設(shè)置超級(jí)鏈接的樣式
【操作準(zhǔn)備】
【模仿訓(xùn)練】
任務(wù)5．1　北京大學(xué)網(wǎng)站包含flash元素和超級(jí)鏈接的網(wǎng)頁(yè)制作
任務(wù)5．1．1 北京大學(xué)網(wǎng)站包含flash元素的網(wǎng)頁(yè)制作
任務(wù)5．1．2 北京大學(xué)網(wǎng)站包含超鏈接的網(wǎng)頁(yè)制作
任務(wù)5．1．2．1 內(nèi)部鏈接的創(chuàng)建
任務(wù)5．1．2．2 外部鏈接的創(chuàng)建
任務(wù)5．1．2．3　電子郵件鏈接和文件下載鏈接的創(chuàng)建
任務(wù)5．1．2．4 空鏈接和腳本鏈接的創(chuàng)建
任務(wù)5．1．2．5 錨點(diǎn)（局部）鏈接的創(chuàng)建
【模仿訓(xùn)練考核評(píng)價(jià)】
【拓展訓(xùn)練】
任務(wù)5．2　綠色食品網(wǎng)站包含flash元素和超級(jí)鏈接的網(wǎng)頁(yè)制作
【拓展訓(xùn)練考核評(píng)價(jià)】
【單元小結(jié)】
【單元習(xí)題】
單元6　表單網(wǎng)頁(yè)的制作
【教學(xué)導(dǎo)航】
【本單元單詞】
【預(yù)備知識(shí)】
表單
6．1　表單的構(gòu)成與創(chuàng)建
6．1．1　認(rèn)識(shí)表單
6．1．2　創(chuàng)建表單
6．2　表單控件
6．2．1　input控件
6．2．2　textarea控件
6．2．3　select控件
【操作準(zhǔn)備】
【模仿訓(xùn)練】
任務(wù)6．1　北京大學(xué)網(wǎng)站表單網(wǎng)頁(yè)的制作
任務(wù)6．1．1　插入表單域、設(shè)置屬性及其表格布局
任務(wù)6．1．2 插入表單控件并設(shè)置其屬性
任務(wù)6．1．3 插入表單外框并設(shè)置其屬性
【模仿訓(xùn)練考核評(píng)價(jià)】
【拓展訓(xùn)練】
任務(wù)6．2　綠色食品網(wǎng)站表單網(wǎng)頁(yè)的制作
【拓展訓(xùn)練考核評(píng)價(jià)】
【單元小結(jié)】
【單元習(xí)題】
單元7　CSS布局與網(wǎng)頁(yè)美化
【教學(xué)導(dǎo)航】
【本單元單詞】
【預(yù)備知識(shí)】
CSS核心內(nèi)容；標(biāo)準(zhǔn)文檔流、盒模型、浮動(dòng)與定位
7．1　標(biāo)準(zhǔn)文檔流
7．1．1　標(biāo)準(zhǔn)“流”的微觀現(xiàn)象
7．1．2　塊級(jí)元素和行內(nèi)元素
7．1．3　塊級(jí)元素和行內(nèi)元素的相互轉(zhuǎn)換
7．1．4　塊級(jí)元素和行內(nèi)元素的區(qū)別
7．2　盒模型
7．1．1　認(rèn)識(shí)盒子模型
7．1．2 盒子模型的組成屬性
7．1．3 盒子寬度和高度
7．1．4 盒子外邊距合并問(wèn)題
7．3　浮動(dòng)
7．3．1　認(rèn)識(shí)浮動(dòng)
7．3．2　元素的浮動(dòng)屬性float
7．3．3　清除浮動(dòng)帶來(lái)的影響
7．3．4　overflow屬性
7．4　定位
7．4．1　元素的定位屬性
7．4．2　常見(jiàn)的幾種定位模式
【操作準(zhǔn)備】
【模仿訓(xùn)練】
任務(wù)7．1　北京大學(xué)網(wǎng)站CSS布局與網(wǎng)頁(yè)美化
任務(wù)7．1．1 北京大學(xué)新聞網(wǎng)單個(gè)盒子的制作
任務(wù)7．1．2　北京大學(xué)新聞網(wǎng)頭條推薦盒子的制作
任務(wù)7．1．3 北京大學(xué)新聞網(wǎng)選項(xiàng)卡的制作
任務(wù)7．1．4 北京大學(xué)后勤網(wǎng)套餐展示盒子的制作
任務(wù)7．1．5 北京大學(xué)首頁(yè)水平列表菜單的制作
任務(wù)7．1．5．1 簡(jiǎn)單水平列表菜單
任務(wù)7．1．5．2 色塊水平列表菜單
任務(wù)7．1．5．3 用圖片美化的水平列表菜單
【模仿訓(xùn)練考核評(píng)價(jià)】
【拓展訓(xùn)練】
任務(wù)7．2　綠色食品網(wǎng)站CSS布局與網(wǎng)頁(yè)美化
【拓展訓(xùn)練考核評(píng)價(jià)】
【單元小結(jié)】
【單元習(xí)題】
單元8　網(wǎng)站首頁(yè)的設(shè)計(jì)與制作
【教學(xué)導(dǎo)航】
【本單元單詞】
【預(yù)備知識(shí)】
CSS布局與瀏覽器兼容性
8．1　CSS布局
8．1．1　版心與CSS布局流程
8．1．2　用CSS進(jìn)行網(wǎng)頁(yè)布局
8．1．3　網(wǎng)頁(yè)模塊命名規(guī)范
8．2　瀏覽器兼容性
8．2．1　CSS Hack
8．2．2　IE條件注釋語(yǔ)句
8．2．3　!important解決高度自適應(yīng)問(wèn)題
8．2．4　常見(jiàn)的IE6兼容性問(wèn)題
【操作準(zhǔn)備】
【模仿訓(xùn)練】
任務(wù)8．1　北京大學(xué)網(wǎng)站首頁(yè)的設(shè)計(jì)與制作
任務(wù)8．1．1 北京大學(xué)網(wǎng)站首頁(yè)整體頁(yè)面結(jié)構(gòu)的制作
任務(wù)8．1．1．1 建立北京大學(xué)站點(diǎn)的目錄結(jié)構(gòu)
任務(wù)8．1．1．2 創(chuàng)建與保存首頁(yè)文檔index．html
任務(wù)8．1．1．3 北京大學(xué)網(wǎng)站首頁(yè)整體頁(yè)面結(jié)構(gòu)分析
任務(wù)8．1．1．4 北京大學(xué)網(wǎng)站首頁(yè)漸變背景的制作
任務(wù)8．1．1．5 北京大學(xué)網(wǎng)站首頁(yè)版心居中效果的制作
任務(wù)8．1．2 北京大學(xué)網(wǎng)站首頁(yè)頭部的制作
任務(wù)8．1．2．1 北京大學(xué)網(wǎng)站首頁(yè)頭部布局結(jié)構(gòu)分析
任務(wù)8．1．2．2 北京大學(xué)網(wǎng)站首頁(yè)頭部布局結(jié)構(gòu)搭建
任務(wù)8．1．2．3 北京大學(xué)網(wǎng)站首頁(yè)頭部樣式的書寫
任務(wù)8．1．3 北京大學(xué)網(wǎng)站首頁(yè)中部的制作
任務(wù)8．1．3．1 北京大學(xué)網(wǎng)站首頁(yè)中部結(jié)構(gòu)分析
任務(wù)8．1．3．2 北京大學(xué)網(wǎng)站首頁(yè)中部布局結(jié)構(gòu)搭建
任務(wù)8．1．3．3 北京大學(xué)網(wǎng)站首頁(yè)中部樣式的書寫
任務(wù)8．1．4　北京大學(xué)網(wǎng)站首頁(yè)尾部的制作
【模仿訓(xùn)練考核評(píng)價(jià)】
【拓展訓(xùn)練】
任務(wù)8．2　綠色食品網(wǎng)站首頁(yè)的設(shè)計(jì)與制作
【拓展訓(xùn)練考核評(píng)價(jià)】
【單元小結(jié)】
單元9　網(wǎng)站列表頁(yè)的設(shè)計(jì)與制作
【教學(xué)導(dǎo)航】
【操作準(zhǔn)備】
【模仿訓(xùn)練】
任務(wù)9．1　北京大學(xué)網(wǎng)站列表頁(yè)的設(shè)計(jì)與制作
任務(wù)9．1．1　北京大學(xué)網(wǎng)站列表頁(yè)整體頁(yè)面結(jié)構(gòu)的制作
任務(wù)9．1．1．1 建立北京大學(xué)站點(diǎn)的目錄結(jié)構(gòu)
任務(wù)9．1．1．2 創(chuàng)建與保存列表頁(yè)文檔list．html
任務(wù)9．1．1．3 北京大學(xué)網(wǎng)站列表頁(yè)整體頁(yè)面結(jié)構(gòu)分析
任務(wù)9．1．1．4 北京大學(xué)網(wǎng)站列表頁(yè)漸變背景的制作
任務(wù)9．1．1．5　北京大學(xué)網(wǎng)站列表頁(yè)版心居中效果的制作
任務(wù)9．1．2　北京大學(xué)網(wǎng)站列表頁(yè)頭部的制作
任務(wù)9．1．2．1 北京大學(xué)網(wǎng)站列表頁(yè)頭部布局結(jié)構(gòu)分析
任務(wù)9．1．2．2 北京大學(xué)網(wǎng)站列表頁(yè)頭部布局結(jié)構(gòu)搭建
任務(wù)9．1．2．3 北京大學(xué)網(wǎng)站列表頁(yè)頭部樣式的書寫
任務(wù)9．1．3　北京大學(xué)網(wǎng)站列表頁(yè)中部（xiaonav）的制作
任務(wù)9．1．3．1 北京大學(xué)網(wǎng)站列表頁(yè)中部（xiaonav）布局結(jié)構(gòu)分析
任務(wù)9．1．3．2 北京大學(xué)網(wǎng)站列表頁(yè)中部（xiaonav）布局結(jié)構(gòu)搭建
任務(wù)9．1．3．3 北京大學(xué)網(wǎng)站列表頁(yè)中部（xiaonav）樣式的書寫
任務(wù)9．1．4　北京大學(xué)網(wǎng)站列表頁(yè)中部（navbar）的制作
任務(wù)9．1．4．1 北京大學(xué)網(wǎng)站列表頁(yè)中部（navbar）布局結(jié)構(gòu)分析
任務(wù)9．1．4．2 北京大學(xué)網(wǎng)站列表頁(yè)中部（navbar）布局結(jié)構(gòu)搭建
任務(wù)9．1．4．3 北京大學(xué)網(wǎng)站列表頁(yè)中部（navbar）樣式的書寫
任務(wù)9．1．5　北京大學(xué)網(wǎng)站列表頁(yè)中部（main）的制作
任務(wù)9．1．5．1 北京大學(xué)網(wǎng)站列表頁(yè)中部（main）圓角矩形的制作
任務(wù)9．1．5．2 北京大學(xué)網(wǎng)站列表頁(yè)中部（main）布局結(jié)構(gòu)搭建
任務(wù)9．1．5．3 北京大學(xué)網(wǎng)站列表頁(yè)中部（main）左側(cè)的制作
任務(wù)9．1．5．4 北京大學(xué)網(wǎng)站列表頁(yè)中部（main）右側(cè)的制作
任務(wù)9．1．6　北京大學(xué)網(wǎng)站列表頁(yè)尾部的制作
【模仿訓(xùn)練考核評(píng)價(jià)】
【拓展訓(xùn)練】
任務(wù)9．2　綠色食品網(wǎng)站列表頁(yè)的設(shè)計(jì)與制作
【拓展訓(xùn)練考核評(píng)價(jià)】
【單元小結(jié)】
單元10　網(wǎng)站詳情頁(yè)的設(shè)計(jì)與制作
【教學(xué)導(dǎo)航】
【操作準(zhǔn)備】
【模仿訓(xùn)練】
任務(wù)10．1　北京大學(xué)網(wǎng)站詳情頁(yè)的設(shè)計(jì)與制作
任務(wù)10．1．1　北京大學(xué)網(wǎng)站詳情頁(yè)整體頁(yè)面結(jié)構(gòu)的制作
任務(wù)10．1．1．1 建立北京大學(xué)站點(diǎn)的目錄結(jié)構(gòu)
任務(wù)10．1．1．2　創(chuàng)建與保存詳情頁(yè)文檔content．html
任務(wù)10．1．1．3 北京大學(xué)網(wǎng)站詳情頁(yè)整體頁(yè)面結(jié)構(gòu)分析
任務(wù)10．1．1．4 北京大學(xué)網(wǎng)站詳情頁(yè)漸變背景的制作
任務(wù)10．1．1．5　北京大學(xué)網(wǎng)站詳情頁(yè)版心居中效果的制作
任務(wù)10．1．2　北京大學(xué)網(wǎng)站詳情頁(yè)topbar部分的制作
任務(wù)10．1．3　北京大學(xué)網(wǎng)站詳情頁(yè)flash部分的制作
任務(wù)10．1．4　北京大學(xué)網(wǎng)站詳情頁(yè)navbar部分的制作
任務(wù)10．1．5　北京大學(xué)網(wǎng)站詳情頁(yè)so部分的制作
任務(wù)10．1．6　北京大學(xué)網(wǎng)站詳情頁(yè)content部分的制作
任務(wù)10．1．7　北京大學(xué)網(wǎng)站詳情頁(yè)footer部分的制作
【模仿訓(xùn)練考核評(píng)價(jià)】
【拓展訓(xùn)練】
任務(wù)10．2　綠色食品網(wǎng)站詳情頁(yè)的設(shè)計(jì)與制作
【拓展訓(xùn)練考核評(píng)價(jià)】
【單元小結(jié)】