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

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