《網(wǎng)頁設(shè)計與制作(HTMLCSS)》教學(xué)大綱

本文格式為Word版，下載可任意編輯——《網(wǎng)頁設(shè)計與制作(HTMLCSS)》教學(xué)大綱博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效

《網(wǎng)頁設(shè)計與制作(HTML+CSS)》課程教學(xué)大綱

（課程英文名稱）

課程編號：202309210011學(xué)分：5學(xué)分

學(xué)時：64學(xué)時（其中：講課學(xué)時：45上機學(xué)時：19）先修課程：計算機基礎(chǔ)、計算機網(wǎng)絡(luò)、計算機應(yīng)用后續(xù)課程：UI設(shè)計javascript網(wǎng)頁特效適用專業(yè)：信息及其計算機相關(guān)專業(yè)開課部門：計算機系

一、課程的性質(zhì)與目標

《網(wǎng)頁設(shè)計與制作(HTML+CSS)》是面向計算機相關(guān)專業(yè)的一門專業(yè)基礎(chǔ)課，涉及計算機基礎(chǔ)、互聯(lián)網(wǎng)等內(nèi)容，通過本課程的學(xué)習(xí)，學(xué)生能夠了解網(wǎng)頁web發(fā)展歷史及其未來方向，熟悉網(wǎng)頁設(shè)計流程、把握網(wǎng)絡(luò)中常見的網(wǎng)頁布局效果、學(xué)會制作各種企業(yè)，門戶，電商類網(wǎng)站。

二、課程的主要內(nèi)容及基本要求

第一章HTML與CSS網(wǎng)頁設(shè)計概述（4學(xué)時）

[知識點]

??????

Web的基礎(chǔ)知識HTMLl簡介CSS簡介

常用瀏覽器介紹

Dreamweaver工具使用

利用Dreamweaver創(chuàng)立第一個頁面

[重點]

?HTML簡介

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效

?Dreamweaver工具使用

[難點]

?Dreamweaver工具創(chuàng)立第一個頁面

[基本要求]

?了解HTML版本的發(fā)展歷程

?把握Dreamweaver工具的使用，能夠使用Dreamweaver創(chuàng)立一個包含html結(jié)

構(gòu)和CSS樣式的簡單網(wǎng)頁。

其次章HTML入門（6學(xué)時）

[知識點]

???????

HTML基本語法結(jié)構(gòu)HTML標記屬性

HTML常用文本控制標記HTML文本格式化標記HTML圖像標記

HTML相對路徑和絕對路徑HTML圖文混排技巧

[重點]

????

HTML基本語法結(jié)構(gòu)

HTML常用文本控制標記HTML圖像標記

HTML相對路徑和絕對路徑

[難點]

?HTML標記屬性的使用?HTML相對路徑和絕對路徑

[基本要求]

?把握HTML基本語法結(jié)構(gòu)?把握HTML中常用的文本標記?區(qū)分什么是相對路徑和絕對路徑?把握HTML圖像標記的使用?把握圖片混排常用技巧

[階段案例]

使用HTML文本控制標記、HTML圖像標記及相關(guān)標記的屬性實現(xiàn)網(wǎng)頁中常見的圖文混排效果，如下圖所示。

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效

第三章CSS入門（8學(xué)時）

[知識點]

????????

CSS入門知識CSS樣式規(guī)則

CSS樣式表書寫位置CSS基礎(chǔ)選擇器CSS字體樣式屬性CSS樣式外觀屬性CSS復(fù)合選擇器CSS層疊性和優(yōu)先級

[重點]

?CSS樣式規(guī)則

?CSS基礎(chǔ)和復(fù)合選擇器?CSS層疊性和優(yōu)先級

[難點]

?CSS復(fù)合選擇器?CSS優(yōu)先級

[基本要求]

?理解CSS語法結(jié)構(gòu)

?了解CSS在網(wǎng)頁中的重要性?熟悉CSS書寫的位置

?把握CSS基礎(chǔ)和復(fù)合選擇器?把握CSS層疊性和優(yōu)先級

[階段案例]

通過CSS文本樣式屬性控制網(wǎng)頁中的文本，制作網(wǎng)頁中常見的新聞頁面，效果如下圖所示。

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效

第四章盒子模型（6學(xué)時）

[知識點]

?????

盒子模型理論知識CSS盒子模型屬性元素類型的分類元素類型的相互轉(zhuǎn)換盒子外邊距合并問題

[重點]

?盒子模型屬性?元素類型分類?元素類型相互轉(zhuǎn)換

[難點]

?盒子模型復(fù)合屬性

?盒子模型總的寬度和高度?元素類型及其轉(zhuǎn)換

[基本要求]

????

理解盒子模型把握盒子模型屬性

把握盒子模型中復(fù)合屬性的寫法把握元素類型及其轉(zhuǎn)換方法

[階段案例]

綜合運用盒子模型的相關(guān)屬性，制作網(wǎng)頁中常見的盒子效果，如下圖所示。

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效

第五章列表與超鏈接（4學(xué)時）

[知識點]

???????

有序列表無序列表自定義列表

CSS控制列表樣式超鏈接錨點鏈接

CSS控制鏈接樣式

[重點]

?無序列表?自定義列表

?CSS控制列表樣式

[難點]

?CSS控制列表樣式

[基本要求]

?????

把握列表的三種分類熟悉列表的嵌套

熟練把握CSS控制列表樣式把握鏈接標記的使用

把握結(jié)構(gòu)與樣式相分開的寫法

[階段案例]

使用列表與超鏈接標記組織頁面，并通過CSS控制列表與超鏈接的樣式實現(xiàn)網(wǎng)頁中常見的新聞列表效果，如下圖所示。

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效

新聞列表效果展示

鼠標以上鏈接文本效果

第六章表格與表單（4學(xué)時）

[知識點]

??????

表格標記表格結(jié)構(gòu)

CSS控制表格表單標簽表單控件

CSS控制表單

[重點]

?表格標簽

?CSS控制表格和表單?表單標簽

[難點]

?表單標簽

?CSS控制表單

[基本要求]

????

把握表格標記的使用了解表格結(jié)構(gòu)

把握表單標記的使用把握CSS控制表單標記

[階段案例]

使用表格與表單組織頁面，并通過CSS控制表格與表單的顯示樣式，制作網(wǎng)頁中常見的注冊界面，效果如下圖所示。

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效

第七章浮動與定位（8學(xué)時）

[知識點]

?????

元素的浮動清除浮動

Overflow屬性元素的定位z-index屬性

[重點]

?元素浮動?元素定位

[難點]

?清除浮動

?元素定位的分類

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效

[基本要求]

????

把握元素浮動

熟悉清除浮動的方法把握元素定位及其分類

熟悉z-index設(shè)置層的疊放次序

[階段案例]

綜合運用元素的浮動與定位，制作傳智播客設(shè)計學(xué)院首頁banner，效果如下圖所示。

第八章CSS高級技巧（6學(xué)時）

[知識點]

?CSS精靈技術(shù)?CSS滑動門技術(shù)?margin負值的應(yīng)用

[重點]

?CSS精靈技術(shù)?CSS滑動門技術(shù)?margin負值的應(yīng)用

[難點]

?CSS精靈原理分析

?CSS滑動門原理分析與切圖?運用margin負值綜合運用

[基本要求]

????

把握精靈圖的制作

把握利用CSS對精靈圖片進行背景設(shè)置把握常見滑動門布局

把握利用margin負值進行布局技巧

[案例實戰(zhàn)1]

使用CSS精靈，制作精品課程模塊，效果如下圖所示。

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效

[案例實戰(zhàn)2]

使用CSS滑動門，制作梯形網(wǎng)站導(dǎo)航，效果如下圖所示。

[案例實戰(zhàn)3]

應(yīng)用margin的負值，制作壓線效果，如下圖所示。

第九章CSS布局與瀏覽器兼容性（6學(xué)時）

[知識點]

?????

常見CSS網(wǎng)頁布局通欄布局

CSShack分類IE條件解釋常見IE6BUG

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效

?盒子外邊距合并

[重點]

?通欄布局?CSShack

?常見IE6BUG

[難點]

?CSShack

[基本要求]

????

熟悉網(wǎng)頁常見的布局把握網(wǎng)頁通欄布局技巧把握CSShack

熟悉IE6下常見的BUG

第十章實戰(zhàn)開發(fā)(上)—傳智播客設(shè)計學(xué)院首頁面（6學(xué)時）

[知識點]

???????

建立站點頁面分析首頁切圖制作頭部制作banner制作主