網(wǎng)頁制作案例教程HTML5+CSS3課程設(shè)計

《網(wǎng)頁制作案例教程(HTML5+CSS3)》

課程單元教學(xué)設(shè)計

(2023?2024學(xué)年第2學(xué)期)

課程名稱：網(wǎng)頁制作______________

授課年級：________2023年級

授課學(xué)期：2023-2024學(xué)年第二學(xué)期

教師姓名：________某某老師______________

2024年2月1日

目錄

項(xiàng)目1網(wǎng)頁制作入門..................................................................3

項(xiàng)目2添加網(wǎng)頁內(nèi)容.................................................................13

項(xiàng)目3css基礎(chǔ)......................................................................29

項(xiàng)目4設(shè)置文本字體樣式.............................................................39

項(xiàng)目5盒子模型.....................................................................47

項(xiàng)目6元素的浮動和定位.............................................................58

項(xiàng)目7多媒體元素...................................................................69

項(xiàng)目8表單的應(yīng)用...................................................................76

項(xiàng)目9css高級選擇器................................................................86

項(xiàng)目10CSS3過渡、變形和動畫效果...................................................92

項(xiàng)目11制作“河南特色文化旅游”網(wǎng)頁綜合實(shí)例.....................................106

項(xiàng)目1網(wǎng)頁制作入門

授課信息

教學(xué)課題網(wǎng)頁制作入門所屬課程網(wǎng)頁制作學(xué)時4學(xué)時

任務(wù)目標(biāo)

隨著互聯(lián)畫的不斷發(fā)展，前端開發(fā)崗位受到越來越多的關(guān)注，網(wǎng)頁制作是前端開發(fā)的基礎(chǔ)

教學(xué)任務(wù)課程。本項(xiàng)目將通過“航天任務(wù)”網(wǎng)頁制作，介紹VSCode開發(fā)工具的安裝和使用，對web基本

概念、HTML5的基本結(jié)構(gòu)和語法進(jìn)行詳細(xì)講解。根據(jù)學(xué)習(xí)內(nèi)容同學(xué)們制作”大賽獲獎網(wǎng)頁”頁面。

神舟十三號載人飛船飛行任務(wù)

課堂案例

2021年10月節(jié)日0時23分，括我神舟十三巖載人飛船的長征二號F送十三運(yùn)

我火箭在酒泉衛(wèi)星發(fā)射中心按照預(yù)定時間精造點(diǎn)火發(fā)射.

3

□

Docixnem

C0①文件ID/R頁Q☆?:

我校“飛機(jī)維修”團(tuán)隊勇奪2023年全國職業(yè)院校技能大賽一等

獎

時閽：“230828點(diǎn)由：1500

8月20日T月23日,由載育部主辦,四II』效育廳fUflUC市人師R合承辦的202狎金皿漢發(fā)校技取直（ZR電）飛

機(jī)維**8在成H職業(yè)技泰學(xué)院血舉行，

課后實(shí)訓(xùn)

本次無要為團(tuán)體行.以修為?&蛆從伊穹.備食。貨從由3名i&于名GT共自京白金68”個也、白沿叵.HWrt5tn475t#?ft?

隊的百余名投小英同臺竟技.Ji示風(fēng)采.

1.自覺遵守中國軟件行業(yè)基本公約；

素質(zhì)2.有良好的知識產(chǎn)權(quán)保護(hù)觀念和意識，自覺抵制各種違反知識產(chǎn)權(quán)保護(hù)法規(guī)的行為:

目標(biāo)

3.能自覺遵守企.業(yè)規(guī)章制度與產(chǎn)品開發(fā)保密制度；

4.遵守有關(guān)隱私信息的政策和規(guī)程，保護(hù)客戶隱私。

教

政

思

學(xué)1.通過“航天任務(wù)”網(wǎng)頁制作，激發(fā)同學(xué)們攀科技高峰的航天夢；

標(biāo)

目

目

2.通過制作“大賽獲獎網(wǎng)頁”的頁面，介紹大賽，激勵學(xué)生努力學(xué)習(xí)。

標(biāo)

能力L會安裝和使用'Wb開發(fā)工具；

目標(biāo)2.能夠使用VSCode工具創(chuàng)建簡單的網(wǎng)頁。

知識1.理解網(wǎng)頁基本概念和Web標(biāo)準(zhǔn);

目標(biāo)2.熟悉IITML5頁面文檔結(jié)構(gòu).

教學(xué)

教教學(xué)重點(diǎn)VSCode開發(fā)工具的使用，制作網(wǎng)頁步驟。

重

點(diǎn)

學(xué)措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。

重

難

教學(xué)

點(diǎn)教學(xué)難點(diǎn)：HTML5頁面基礎(chǔ)。

點(diǎn)

難

措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。

4

略

教學(xué)策

；

學(xué)標(biāo)準(zhǔn)

專業(yè)教

用技術(shù)

算機(jī)應(yīng)

學(xué)校計

等職業(yè)

1.高

教學(xué)

方案；

才培養(yǎng)

專業(yè)人

用技術(shù)

算機(jī)應(yīng)

學(xué)校計

標(biāo)準(zhǔn)2.

綱；

程大

》課

開發(fā)

前端

《Web

依3.

據(jù)

。

要求

級）

書（初

級證

能等

業(yè)技

X職

》-T+

開發(fā)

前端

《Web

標(biāo)4.

準(zhǔn)

范。

編制規(guī)

件文檔

算機(jī)軟

06計

7-20

856

/T

行業(yè)1.GB

標(biāo)準(zhǔn)

存周

站生

和網(wǎng)

管理

網(wǎng)站

程、

站工

踐網(wǎng)

薦實(shí)

的推

聯(lián)網(wǎng)

于互

程用

件工

4軟

201

71-

309

B/T

期2.G

O

教學(xué)

方法

法。

務(wù)驅(qū)動

法、任

組討論

法、分

例教學(xué)

，案

示為主

講授演

選

教用

學(xué)教

編。

淑敏主

社，王

學(xué)出版

科技大

安電子

》西

S3）

5+CS

HTML

教程（

案例

制作

《網(wǎng)頁

策材

略教材

+x

）》1

（中級

教程

案例

實(shí)訓(xùn)

開發(fā)