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

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

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

（課程英文名稱）

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

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

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

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

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

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

[知識(shí)點(diǎn)]

??????

Web的基礎(chǔ)知識(shí)HTMLl簡(jiǎn)介CSS簡(jiǎn)介

常用瀏覽器介紹

Dreamweaver工具使用

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

[重點(diǎn)]

?HTML簡(jiǎn)介

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

?Dreamweaver工具使用

[難點(diǎn)]

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

[基本要求]

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

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

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

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

[知識(shí)點(diǎn)]

???????

HTML基本語(yǔ)法結(jié)構(gòu)HTML標(biāo)記屬性

HTML常用文本控制標(biāo)記HTML文本格式化標(biāo)記HTML圖像標(biāo)記

HTML相對(duì)路徑和絕對(duì)路徑HTML圖文混排技巧

[重點(diǎn)]

????

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

HTML常用文本控制標(biāo)記HTML圖像標(biāo)記

HTML相對(duì)路徑和絕對(duì)路徑

[難點(diǎn)]

?HTML標(biāo)記屬性的使用?HTML相對(duì)路徑和絕對(duì)路徑

[基本要求]

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

[階段案例]

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

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

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

[知識(shí)點(diǎn)]

????????

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

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

[重點(diǎn)]

?CSS樣式規(guī)則

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

[難點(diǎn)]

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

[基本要求]

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

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

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

[階段案例]

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

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

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

[知識(shí)點(diǎn)]

?????

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

[重點(diǎn)]

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

[難點(diǎn)]

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

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

[基本要求]

????

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

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

[階段案例]

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

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

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

[知識(shí)點(diǎn)]

???????

有序列表無(wú)序列表自定義列表

CSS控制列表樣式超鏈接錨點(diǎn)鏈接

CSS控制鏈接樣式

[重點(diǎn)]

?無(wú)序列表?自定義列表

?CSS控制列表樣式

[難點(diǎn)]

?CSS控制列表樣式

[基本要求]

?????

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

熟練把握CSS控制列表樣式把握鏈接標(biāo)記的使用

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

[階段案例]

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

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

新聞列表效果展示

鼠標(biāo)以上鏈接文本效果

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

[知識(shí)點(diǎn)]

??????

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

CSS控制表格表單標(biāo)簽表單控件

CSS控制表單

[重點(diǎn)]

?表格標(biāo)簽

?CSS控制表格和表單?表單標(biāo)簽

[難點(diǎn)]

?表單標(biāo)簽

?CSS控制表單

[基本要求]

????

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

把握表單標(biāo)記的使用把握CSS控制表單標(biāo)記

[階段案例]

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

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

第七章浮動(dòng)與定位（8學(xué)時(shí)）

[知識(shí)點(diǎn)]

?????

元素的浮動(dòng)清除浮動(dòng)

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

[重點(diǎn)]

?元素浮動(dòng)?元素定位

[難點(diǎn)]

?清除浮動(dòng)

?元素定位的分類

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

[基本要求]

????

把握元素浮動(dòng)

熟悉清除浮動(dòng)的方法把握元素定位及其分類

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

[階段案例]

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

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

[知識(shí)點(diǎn)]

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

[重點(diǎn)]

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

[難點(diǎn)]

?CSS精靈原理分析

?CSS滑動(dòng)門原理分析與切圖?運(yùn)用margin負(fù)值綜合運(yùn)用

[基本要求]

????

把握精靈圖的制作

把握利用CSS對(duì)精靈圖片進(jìn)行背景設(shè)置把握常見(jiàn)滑動(dòng)門布局

把握利用margin負(fù)值進(jìn)行布局技巧

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

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

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

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

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

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

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

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

[知識(shí)點(diǎn)]

?????

常見(jiàn)CSS網(wǎng)頁(yè)布局通欄布局

CSShack分類IE條件解釋常見(jiàn)IE6BUG

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

?盒子外邊距合并

[重點(diǎn)]

?通欄布局?CSShack

?常見(jiàn)IE6BUG

[難點(diǎn)]

?CSShack

[基本要求]

????

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

熟悉IE6下常見(jiàn)的BUG

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

[知識(shí)點(diǎn)]

???????

建立站點(diǎn)頁(yè)面分析首頁(yè)切圖制作頭部制作banner制作主