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

單元1 網(wǎng)頁賞析、創(chuàng)建站點與瀏覽網(wǎng)頁
【教學導航】
【本單元單詞】
【預備知識】
HTML　與 CSS 網(wǎng)頁設計概述
1．1　認識網(wǎng)頁、網(wǎng)頁相關的名詞、Web標準
1．2　HTML、CSS簡介
1．3　常見瀏覽器介紹
1．4　使用谷歌瀏覽器調(diào)試開發(fā)網(wǎng)頁
1．5　網(wǎng)頁賞析
1．6　Dreamweaver簡介
【操作準備】
【模仿訓練】
任務1．1　創(chuàng)建北京大學網(wǎng)站站點并瀏覽網(wǎng)頁
任務1．1．1　分析北京大學站點的目錄結(jié)構(gòu)
任務1．1．2　賞析北京大學網(wǎng)站的首頁、列表頁和詳情頁
任務1．1．3　創(chuàng)建北京大學網(wǎng)站的本地站點
任務1-1-4　認識Dreamweaver的工作界面
任務1-1-5　打開與保存網(wǎng)頁文檔index．html
任務1-1-6　在瀏覽器中瀏覽網(wǎng)頁index．html
【模仿訓練考核評價】
【拓展訓練】
任務1．2　創(chuàng)建綠色食品網(wǎng)站站點并瀏覽網(wǎng)頁
【拓展訓練考核評價】
【單元小結(jié)】
【單元習題】
單元2　網(wǎng)站項目開發(fā)環(huán)境搭建
【教學導航】
【本單元單詞】
【預備知識】
HTML入門
2．1　HTML文檔基本格式、HTML標記及其屬性、頭部標記
2．1．1　認識HTML文檔基本格式
2．1．2　HTML標記及其屬性
2．1．3　頭部標記
2．2　標題段落標記 、文本樣式標記
2．2．1　標題段落標記
2．2．2　文本樣式標記
2．3　文本格式化標記、特殊字符標記
2．3．1　文本格式化標記
2．3．2　特殊字符標記
2．4　常用圖像格式、圖像標記、相對路徑和絕對路徑
2．4．1　常用圖像格式
2．4．2　圖像標記
2．4．3　相對路徑和絕對路徑
2．5　和標記
2．6　注釋標記
【操作準備】
【模仿訓練】
任務2．1　北京大學網(wǎng)站項目開發(fā)環(huán)境搭建
任務2．1．1 認識手冊（w3school完整版．chm）的使用界面
任務2．1．2 認識編輯器（Sublime Text）的使用界面
任務2．1．3　使用谷歌瀏覽器（Google Chrome）審查元素
任務2．1．4　創(chuàng)建北京大學網(wǎng)站站點文件夾
任務2．1．5　網(wǎng)頁基本骨架搭建
任務2．1．5．1　創(chuàng)建HTML文件
任務2．1．5．2　網(wǎng)頁骨架標簽搭建
【模仿訓練考核評價】
【拓展訓練】
任務2．2　綠色食品網(wǎng)站項目開發(fā)環(huán)境搭建
【拓展訓練考核評價】
【單元小結(jié)】
【單元習題】
單元3　圖文混排網(wǎng)頁的制作
【教學導航】
【本單元單詞】
【預備知識】
CSS入門
3．1　掌握CSS樣式規(guī)則、CSS樣式表的引入方式
3．1．1　CSS樣式規(guī)則
3．1．2　引入CSS樣式表的方式
3．2　CSS基礎選擇器
3．2．1　標記選擇器
3．2．2　id選擇器
3．2．3　類選擇器（class選擇器）
3．2．4　通配符選擇器
3．3　CSS文本相關樣式
3．4　CSS文本外觀屬性
3．5　CSS復合選擇器
3．5．1　交集選擇器（標簽指定式選擇器）
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)先級
【操作準備】
【模仿訓練】
任務3．1　制作介紹北京大學網(wǎng)站圖文混排效果的網(wǎng)頁
任務3．1．1 建立站點目錄結(jié)構(gòu)
任務3．1．2 創(chuàng)建與保存網(wǎng)頁文檔
任務3．1．3 圖文混排網(wǎng)頁頁面結(jié)構(gòu)分析
任務3．1．4 在網(wǎng)頁中插入相應的標簽、文字和圖片
任務3．1．5 插入與文本相關的元素并設置其屬性
任務3．1．6 設置圖片元素的屬性
【模仿訓練考核評價】
【拓展訓練】
任務3．2　制作介紹綠色食品網(wǎng)站圖文混排效果的網(wǎng)頁
【拓展訓練考核評價】
【單元小結(jié)】
【單元習題】
單元4　表格與表格布局網(wǎng)頁的制作
【教學導航】
【本單元單詞】
【預備知識】
表格、表格布局及CSS控制表格樣式
4．1　表格
4．2　表格布局
4．3　CSS控制表格樣式
【操作準備】
【模仿訓練】
任務4．1　北京大學網(wǎng)站表格與表格布局網(wǎng)頁的制作
任務4．1．1 表格及細線表格的制作
任務4．1．2 滾動文本效果的制作
任務4．1．3 表格布局網(wǎng)頁的制作
【模仿訓練考核評價】
【拓展訓練】
任務4．2　綠色食品網(wǎng)站表格與表格布局網(wǎng)頁的制作
【拓展訓練考核評價】
【單元小結(jié)】
【單元習題】
單元5　包含flash元素和超級鏈接的網(wǎng)頁制作
【教學導航】
【本單元單詞】
【預備知識】
列表和超級鏈接
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　設置文本超鏈接
5．3．3　給鏈接添加提示文字
5．3．4　設置圖像超鏈接
5．3．5　使用錨在網(wǎng)頁內(nèi)部鏈接（錨點鏈接）
5．3．6　電子郵件的鏈接
5．3．7　設置超級鏈接的樣式
【操作準備】
【模仿訓練】
任務5．1　北京大學網(wǎng)站包含flash元素和超級鏈接的網(wǎng)頁制作
任務5．1．1 北京大學網(wǎng)站包含flash元素的網(wǎng)頁制作
任務5．1．2 北京大學網(wǎng)站包含超鏈接的網(wǎng)頁制作
任務5．1．2．1 內(nèi)部鏈接的創(chuàng)建
任務5．1．2．2 外部鏈接的創(chuàng)建
任務5．1．2．3　電子郵件鏈接和文件下載鏈接的創(chuàng)建
任務5．1．2．4 空鏈接和腳本鏈接的創(chuàng)建
任務5．1．2．5 錨點（局部）鏈接的創(chuàng)建
【模仿訓練考核評價】
【拓展訓練】
任務5．2　綠色食品網(wǎng)站包含flash元素和超級鏈接的網(wǎng)頁制作
【拓展訓練考核評價】
【單元小結(jié)】
【單元習題】
單元6　表單網(wǎng)頁的制作
【教學導航】
【本單元單詞】
【預備知識】
表單
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控件
【操作準備】
【模仿訓練】
任務6．1　北京大學網(wǎng)站表單網(wǎng)頁的制作
任務6．1．1　插入表單域、設置屬性及其表格布局
任務6．1．2 插入表單控件并設置其屬性
任務6．1．3 插入表單外框并設置其屬性
【模仿訓練考核評價】
【拓展訓練】
任務6．2　綠色食品網(wǎng)站表單網(wǎng)頁的制作
【拓展訓練考核評價】
【單元小結(jié)】
【單元習題】
單元7　CSS布局與網(wǎng)頁美化
【教學導航】
【本單元單詞】
【預備知識】
CSS核心內(nèi)容；標準文檔流、盒模型、浮動與定位
7．1　標準文檔流
7．1．1　標準“流”的微觀現(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　常見的幾種定位模式
【操作準備】
【模仿訓練】
任務7．1　北京大學網(wǎng)站CSS布局與網(wǎng)頁美化
任務7．1．1 北京大學新聞網(wǎng)單個盒子的制作
任務7．1．2　北京大學新聞網(wǎng)頭條推薦盒子的制作
任務7．1．3 北京大學新聞網(wǎng)選項卡的制作
任務7．1．4 北京大學后勤網(wǎng)套餐展示盒子的制作
任務7．1．5 北京大學首頁水平列表菜單的制作
任務7．1．5．1 簡單水平列表菜單
任務7．1．5．2 色塊水平列表菜單
任務7．1．5．3 用圖片美化的水平列表菜單
【模仿訓練考核評價】
【拓展訓練】
任務7．2　綠色食品網(wǎng)站CSS布局與網(wǎng)頁美化
【拓展訓練考核評價】
【單元小結(jié)】
【單元習題】
單元8　網(wǎng)站首頁的設計與制作
【教學導航】
【本單元單詞】
【預備知識】
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解決高度自適應問題
8．2．4　常見的IE6兼容性問題
【操作準備】
【模仿訓練】
任務8．1　北京大學網(wǎng)站首頁的設計與制作
任務8．1．1 北京大學網(wǎng)站首頁整體頁面結(jié)構(gòu)的制作
任務8．1．1．1 建立北京大學站點的目錄結(jié)構(gòu)
任務8．1．1．2 創(chuàng)建與保存首頁文檔index．html
任務8．1．1．3 北京大學網(wǎng)站首頁整體頁面結(jié)構(gòu)分析
任務8．1．1．4 北京大學網(wǎng)站首頁漸變背景的制作
任務8．1．1．5 北京大學網(wǎng)站首頁版心居中效果的制作
任務8．1．2 北京大學網(wǎng)站首頁頭部的制作
任務8．1．2．1 北京大學網(wǎng)站首頁頭部布局結(jié)構(gòu)分析
任務8．1．2．2 北京大學網(wǎng)站首頁頭部布局結(jié)構(gòu)搭建
任務8．1．2．3 北京大學網(wǎng)站首頁頭部樣式的書寫
任務8．1．3 北京大學網(wǎng)站首頁中部的制作
任務8．1．3．1 北京大學網(wǎng)站首頁中部結(jié)構(gòu)分析
任務8．1．3．2 北京大學網(wǎng)站首頁中部布局結(jié)構(gòu)搭建
任務8．1．3．3 北京大學網(wǎng)站首頁中部樣式的書寫
任務8．1．4　北京大學網(wǎng)站首頁尾部的制作
【模仿訓練考核評價】
【拓展訓練】
任務8．2　綠色食品網(wǎng)站首頁的設計與制作
【拓展訓練考核評價】
【單元小結(jié)】
單元9　網(wǎng)站列表頁的設計與制作
【教學導航】
【操作準備】
【模仿訓練】
任務9．1　北京大學網(wǎng)站列表頁的設計與制作
任務9．1．1　北京大學網(wǎng)站列表頁整體頁面結(jié)構(gòu)的制作
任務9．1．1．1 建立北京大學站點的目錄結(jié)構(gòu)
任務9．1．1．2 創(chuàng)建與保存列表頁文檔list．html
任務9．1．1．3 北京大學網(wǎng)站列表頁整體頁面結(jié)構(gòu)分析
任務9．1．1．4 北京大學網(wǎng)站列表頁漸變背景的制作
任務9．1．1．5　北京大學網(wǎng)站列表頁版心居中效果的制作
任務9．1．2　北京大學網(wǎng)站列表頁頭部的制作
任務9．1．2．1 北京大學網(wǎng)站列表頁頭部布局結(jié)構(gòu)分析
任務9．1．2．2 北京大學網(wǎng)站列表頁頭部布局結(jié)構(gòu)搭建
任務9．1．2．3 北京大學網(wǎng)站列表頁頭部樣式的書寫
任務9．1．3　北京大學網(wǎng)站列表頁中部（xiaonav）的制作
任務9．1．3．1 北京大學網(wǎng)站列表頁中部（xiaonav）布局結(jié)構(gòu)分析
任務9．1．3．2 北京大學網(wǎng)站列表頁中部（xiaonav）布局結(jié)構(gòu)搭建
任務9．1．3．3 北京大學網(wǎng)站列表頁中部（xiaonav）樣式的書寫
任務9．1．4　北京大學網(wǎng)站列表頁中部（navbar）的制作
任務9．1．4．1 北京大學網(wǎng)站列表頁中部（navbar）布局結(jié)構(gòu)分析
任務9．1．4．2 北京大學網(wǎng)站列表頁中部（navbar）布局結(jié)構(gòu)搭建
任務9．1．4．3 北京大學網(wǎng)站列表頁中部（navbar）樣式的書寫
任務9．1．5　北京大學網(wǎng)站列表頁中部（main）的制作
任務9．1．5．1 北京大學網(wǎng)站列表頁中部（main）圓角矩形的制作
任務9．1．5．2 北京大學網(wǎng)站列表頁中部（main）布局結(jié)構(gòu)搭建
任務9．1．5．3 北京大學網(wǎng)站列表頁中部（main）左側(cè)的制作
任務9．1．5．4 北京大學網(wǎng)站列表頁中部（main）右側(cè)的制作
任務9．1．6　北京大學網(wǎng)站列表頁尾部的制作
【模仿訓練考核評價】
【拓展訓練】
任務9．2　綠色食品網(wǎng)站列表頁的設計與制作
【拓展訓練考核評價】
【單元小結(jié)】
單元10　網(wǎng)站詳情頁的設計與制作
【教學導航】
【操作準備】
【模仿訓練】
任務10．1　北京大學網(wǎng)站詳情頁的設計與制作
任務10．1．1　北京大學網(wǎng)站詳情頁整體頁面結(jié)構(gòu)的制作
任務10．1．1．1 建立北京大學站點的目錄結(jié)構(gòu)
任務10．1．1．2　創(chuàng)建與保存詳情頁文檔content．html
任務10．1．1．3 北京大學網(wǎng)站詳情頁整體頁面結(jié)構(gòu)分析
任務10．1．1．4 北京大學網(wǎng)站詳情頁漸變背景的制作
任務10．1．1．5　北京大學網(wǎng)站詳情頁版心居中效果的制作
任務10．1．2　北京大學網(wǎng)站詳情頁topbar部分的制作
任務10．1．3　北京大學網(wǎng)站詳情頁flash部分的制作
任務10．1．4　北京大學網(wǎng)站詳情頁navbar部分的制作
任務10．1．5　北京大學網(wǎng)站詳情頁so部分的制作
任務10．1．6　北京大學網(wǎng)站詳情頁content部分的制作
任務10．1．7　北京大學網(wǎng)站詳情頁footer部分的制作
【模仿訓練考核評價】
【拓展訓練】
任務10．2　綠色食品網(wǎng)站詳情頁的設計與制作
【拓展訓練考核評價】
【單元小結(jié)】