《HTML5應用開發(fā)技術(shù)》

課程標準

課程名稱：HTML5應用開發(fā)技術(shù)

所屬系部：電子信息工程系

授課教師：郭峰

審核人：張曉諾

制定時間：2023年9月

日照職業(yè)技術(shù)學院

目錄

一、課程基本信息.........................錯誤！未定義書簽。

二、課程概述.............................錯誤！未定義書簽。

三、課程目標.............................錯誤！未定義書簽。

四、課程內(nèi)容.............................錯誤!未定義書簽。

五、實訓項目設計.........................錯誤！未定義書簽。

六、課程實施計劃.........................錯誤!未定義書簽。

七、課程考核.............................錯誤！未定義書簽。

八、課程實施條件.........................錯誤!未定義書簽。

九、課程資源.............................錯誤！未定義書簽。

十、需要說明的其他問題...................錯誤!未定義書簽。

十一、本課程常用術(shù)語中英文對照表........錯誤!未定義書簽。

附件1課程實訓項目開設及耗材使用明細????,錯誤!未定義書簽。

《HTML5應用開發(fā)技術(shù)》課程標準

一、課程基本信息

課程代碼250677課程性質(zhì)必修

適用專業(yè)軟件技術(shù)開設學期第一學年第1學期

課程類別專業(yè)平臺課程課程類型B類

學分4總學時64

學時分配理論學時：32；實踐學時：32

實施場所公共機房授課方式講授+操作

執(zhí)筆人郭峰

審核人張曉諾

制訂時間2023年9月

二、課程概述

（-）課程定位

《HTML5應用開發(fā)技術(shù)》課程是軟件技術(shù)專業(yè)的一門專業(yè)必修課程，是為滿足行業(yè)企業(yè)

進行網(wǎng)站建設對網(wǎng)頁設計制作人員的需求而開設。本課程主要培養(yǎng)學生具有網(wǎng)頁設計與制作

的基本技能，使學生能夠運用專業(yè)的網(wǎng)頁制作工具，設計制作常見網(wǎng)頁的靜態(tài)網(wǎng)頁，具備網(wǎng)

站規(guī)劃、建立和維護的能力。

（-）先修后續(xù)課程

在課程為大一上學期開設課程，后續(xù)課程為《javaweb》

（三）本課程與中職、本科、培訓班同類課程的區(qū)別。

層次區(qū)別

基礎知識培養(yǎng)的基本要求不同，本科教育要求寬厚，寬廣、扎實，本課程

要求掌握基本就可以：

專業(yè)知識培養(yǎng)的基本要求不同，本科要求了解就可以，本課程需要足夠孔

本科

實：

主要能力的培養(yǎng)要求不同，本科偏重研究能力、創(chuàng)新能力、創(chuàng)新創(chuàng)業(yè)能力，

本課程偏重技能（操作能力、制作能力）。

本課程理論知識比中職更加實用、有系統(tǒng)性，強調(diào)專業(yè)知識的來源并從中

中職體驗出基礎知識在解決專業(yè)問題時的應用方法、途徑和規(guī)律，強調(diào)專業(yè)知

識的實用性、指導性。

培訓班重點在操作應用能力方面的實踐，本課程重點在提高技能（操作）

培訓班

與理論共同能力方面的實踐。

三、課程目標

本課程以學生能夠制作完成常見靜態(tài)網(wǎng)頁為學習目標，要求學生熟悉HTML語言、能熟

練運用CSS控制頁面，能熟練使用HBuilder制作網(wǎng)頁，具備規(guī)劃、開發(fā)、發(fā)布管理靜態(tài)網(wǎng)

站的專業(yè)知識和技能，為以后學習《javaweb》課程打下基礎。

（―）知識目標

1.熟悉網(wǎng)站建設的基本流程；

2.了解常見的網(wǎng)頁布局版式的類型；

3.熟練掌握html語言的基本諳法、常用標記：

4.掌握網(wǎng)頁制作軟件HBuilder的基本操作和使用技能；

5.掌握CSS樣式的創(chuàng)建、編輯和使用；

6.掌握DIV+CSS對網(wǎng)頁進行布局的方法：

7.掌握網(wǎng)頁中JavaScript搭建動態(tài)效果。

（二）能力目標

1.網(wǎng)頁設計能力

（1）能根據(jù)用戶需求設計用戶界面；

（2）能根據(jù)網(wǎng)站主題要求設計合理的網(wǎng)站欄目：

（3）能根據(jù)網(wǎng)站主題和欄目合理設計網(wǎng)頁的布局；

2.網(wǎng)頁制作能力

（1）能應用HBuilder進行網(wǎng)站站點管理；

（2）能應用HBuilder熟練地在網(wǎng)頁中插入文本、圖像、動畫、表格等元素：

（3）能利用超鏈接將不同網(wǎng)頁鏈接起來：

（4）能利用DIV+CSS完戊網(wǎng)頁的布局；

（5）能利用CSS對網(wǎng)頁進行美化：

（6）能完成對網(wǎng)站的測試與發(fā)布工作。

（三）素質(zhì)目標

1.培養(yǎng)學生的用戶需求的理解能力；

2.培養(yǎng)學生分析問題與解決實際問題的能力；

3.培養(yǎng)學生制作靜態(tài)網(wǎng)頁的能力，提高學生的動手能力：

4.培養(yǎng)學生獲取信息和處理信息的能力，學會通過網(wǎng)站、書籍、素材光盤等方式收集所

需的素材。

四、課程內(nèi)容

序號項目（模塊）工;乍任務學時

1、網(wǎng)頁設計概述1.創(chuàng)建第一個頁面4

2、I1TML5基礎2.制作學院簡介網(wǎng)頁、新聞網(wǎng)頁8

3三、CSS基礎3.制作新聞詳情頁面4

4四、CSS3高級選擇器4.制作云南旅游頁面4

5五、盒子模型5.制作學院簡介頁面結(jié)構(gòu)8

6.1制作學院新聞塊

6六、列表與超鏈接8

6.2制作學院網(wǎng)站導航條

7.1制作學生信息表

7七、表格與表單8

7.2制作用戶信息注冊表單的頁面結(jié)構(gòu)

8八、DIV+CSS布局頁面8.制作信息學院網(wǎng)站主頁布局頁面8

9九、完整案例：信息學院網(wǎng)站制作9.完整案例：信息學院網(wǎng)站的制作12

五、實訓項目設計

他實訓項目

T(任務)可展示的結(jié)果

素質(zhì)目標知識目標能力目標實施步磔

或考核標準

'名稱

1、同際的星本溝成要1.認識網(wǎng)頁與㈣

培養(yǎng)學生網(wǎng)頁

索、符態(tài)同員與動態(tài)網(wǎng)站基礎1.HTML文檔用本結(jié)構(gòu)

諛計創(chuàng)意思

胡建扉一頁的區(qū)別，各科瀏覽器2.了斛網(wǎng)絡設計2.HTML的常用文本標記創(chuàng)建第一個復

維、藝表設計

個五面和網(wǎng)頁制作工具。行業(yè)圻景與發(fā)展3.HTML"!寫頁面的方法面

素質(zhì).

2.HTML文檔基本結(jié)構(gòu)方向4.創(chuàng)建吊一個科頁

3、熟悉工作界面

(1)從主頁可以鋌扶到其他頁面,從其他我

1.李援HTML的茶本結(jié)而可以返回到主頁。

培養(yǎng)學生對網(wǎng)

構(gòu)：《2》在主頁中創(chuàng)這友情增掛.港掛到百度和

制作學龍頁、網(wǎng)站收念學會并零根站

2.學握常用品HTML標新浪網(wǎng).制作學龐鞘介

前介間的認識.培養(yǎng)點虛設險釗用

記：《3》新聞友曲中.新聞條目關(guān)用列表項表示.網(wǎng)頁、

頁、新聞學生的秘互溝html語文制作簡

3.會熟然使用HTML常(4)專業(yè)介紹頁面中,創(chuàng)建“到頁頭”和“到新聞網(wǎng)頁

網(wǎng)頁道能,力和團隊單網(wǎng)友

用標記創(chuàng)過簡單網(wǎng)頁尾”的貓點擔挾.

協(xié)作皓種。

頁<5)在各個頁面中適當設亙頁面的字體、字

號和46邑等

培養(yǎng)學生對同1.了解網(wǎng)頁的構(gòu)成.就夠熟推使用初價新聞濟情

配作新聞

無、網(wǎng)站概念理靜CSS話法；CSS技利文本和圖<1)正文標麴采用二級標遛、敘邑為總邑、頁面

詳情頁面

的認識，培春2.學爬CSS使用方A：像的尺寸、斗灰、在瀏覽器中居中顯示.

學生的相互溝3.掌握常用的CSS的＜2）作咨等信息采用宋體、大小12px、Hi

通能力和閨隊離性：色為灰電（#666）、在瀏覽后中居中顯示.

辦件精神.4.會鼬練使用CSS常＜3）段落文字采用宋體、大小16px、文字

用黑性談上文本樣我電為*.邑、行鬲25px、首行縮丑2個字符。

式?（4）圖像右瀏覽器中芯中顯示.

使用南織選擇

1.掌握0仕逸擇1.頁面分析

選擇后可以方便

2§:圖5-19所?存的頁面由標是，導航、

母養(yǎng)學生對網(wǎng)的定住于指定的

2.理解美樂逸抒圖片和文字組成.用＜nav＞元素質(zhì)至■0＞

頁、㈣站概念元素，而不用使用

3§:林汜實現(xiàn)導抗;年個景點的內(nèi)容部分用

M作云而的認識，培界族外的class或

3.熟緣使用結(jié)構(gòu)＜dl＞標汜定義，其中圖片用＜dt＞標記，文

旅游頁面學生的相互溝id,通過這種方式

化偽關(guān)選擇字用＜dd＞域/定義，某些材殊文本用

通也力和田隊也可以讓我們的

器：＜em＞定義.

協(xié)作精神。代碼和樣式更加

4.掌捱優(yōu)元泰選2.制作頁面總構(gòu)

林潔、靈活、多控

擇盥根據(jù)上而的會析，用HTML實現(xiàn)百而結(jié)構(gòu)

*1.

制作學院簡介頁面，該頁面中主矣有標也和

段落文字組成.所有文字內(nèi)容放入一個塊中.標

邈文字使用標記。2＞,段落文字使用標汜。＞。

耳養(yǎng)學生計網(wǎng)1.了飄盒子棧型的衽

因比首先在頁而中要使用DIV定義一個塊,將標

更、網(wǎng)站概念念

制作學應能夠使用盒子邈和段落內(nèi)容放入塊中.網(wǎng)靈元索的樣式使用

的認識，培春2.掌握盒子優(yōu)相關(guān)屬制作學悅簡介

5簡介頁面模型進行網(wǎng)頁布CSS樣式談直.

學生的相互溝性頁面結(jié)構(gòu)

財枸局（1）頁面背景為祥云。。

通能力和國隊3.了黑元米酸美型與

＜2）金子的寬度為720俅索、高反自動適應

協(xié)作希種。轉(zhuǎn)換

文字內(nèi)宋、邊框為1像素、2■色、實煤。

＜3）正文標題采用二圾標咫、標題行高度為

30像素、文字質(zhì)色為黑色、在瀏覽器中居中顯

示?

《4》段落文字采用宋體、大小14像京、文

字顏色為黑電、行高25px、首行縮進2個字將、

段落的下外邊能為20像卡。

(1)將學院委聞所有內(nèi)容放入定義的塊中，

新聞條目使用無序列表顯示。設工塊及相美

培養(yǎng)學生時網(wǎng)1.學提列表眩CSS樣元素的CSS屬性。

制作學應

頁、阿拈梗念式諛3t方法：(2)該導航條行8個導航項構(gòu)成.每兩個字

新聞塊、耗夠使用CSS副作學龍新聞

的認識，培界2.掌搔超鋌梓的CSS航項之間有一個分隔條.導航條的，費可以使

6制作學比的相關(guān)技術(shù)實現(xiàn)塊、制作竽玩網(wǎng)

學生的相瓦溝樣式諛直方法：用無序列表構(gòu)造,所有文字內(nèi)容放入一個塊

網(wǎng)站導航具體效果.站導航條

退能力和團隊3.學握新閶圾和網(wǎng)站中.因此盍先在頁面中使MDIV定義一個

柒

勢作精神.導航的制竹方法塊,料列表項內(nèi)容放入塊中.再設五觀中各

元素及超銃接的CSS樣式，導航項右惻的分

陸未通過緡列表項滲加什景圖像梟實現(xiàn)

1.學煤創(chuàng)迂我格的

制作學生培養(yǎng)學生計網(wǎng)HTML標圮：<1)利比一個6打7列的表格。

信息表、頁、網(wǎng)站收念2.掌攝表格的CSS樣(2)設五表格標迨一學生信息表.制作學生信息

制作用戶的認識.培養(yǎng)式控制：能精利CSS更<3)在表格標記中添加歸應文本內(nèi)容.并用表、制作用戶信

信息注冊學生的相互溝3.掌握創(chuàng)建表單的化表單城.<th>標記為我格設jt表頭.息注冊表單的

表單的貢遇能力和團隊HTML標汜：<4)遇itCSS終體控制表格邊框樣式。員面經(jīng)構(gòu)

面站構(gòu)協(xié)作希種.4.學掛表單的CSS樣<5)通江CSS設五單元格邊框樣式。

式控制

制作信息培養(yǎng)學生對網(wǎng)1.理意元索的子動屬能夠使用學院網(wǎng)站主頁東?用了典型的三列布局.理解

制作信息學￡

學院網(wǎng)站頁、阿骷楊念性；DIV+CSS進行網(wǎng)頁其布局方法。

Q網(wǎng)站主頁布局

主頁布局的認識.培養(yǎng)2.掌提元索就各種定布局(1)閘頁的寬度為1000便素。

頁而

頁面學生的相互溝位方法；濘動扁姓創(chuàng)戊(2)頁面M部塊：寬度1000俅米，高度36

道修力和田，人3.掌握常用酸橫向?qū)Ш?像素.

協(xié)作精神。DIV+CSS布局方式(3)導航欄塊：交度1000像素，高度30

像點.

(4)主體部分左M塊：寬戾為280像索，高

度482他#.

(5)主體部分中間塊：覺反為460像素，高

度為482他京.

(6)主體部分右例塊：變反為240僮素，高

度為482位米.

(7)常用皴按塊：寬度為1000像素，鬲度

為30像素.

(8)頁面底部塊：寬層為1000俅素，尚度

為80像素.

(9)各個塊之間有適當問旃。

(1)在收盤E會彬.目錄下翎虎網(wǎng)“文件央

schoolSite.糖索材中提供的文件夾images,

了斛度謾網(wǎng)站前

1.media、pictures,swf拷貝到該文件夬下。

培養(yǎng)學生討網(wǎng)的相關(guān)工作;(2)啟動HkiilderCS6,通過“站點”1

充弊發(fā)貢、網(wǎng)站極金“新迂站點”命令,創(chuàng)茂網(wǎng)站站點.站點名欷為：

鮑夠獨立完成完條案例：休息

?例：低息的認識，培養(yǎng)2.隼握頁改就期布schoolSite,本地站點文件夾為：E:\

整個站點的規(guī)劃學優(yōu)網(wǎng)站的卻

學院網(wǎng)站學生的捫互溝schoolSite\?

局規(guī)劃的思路和方法：與制作作

的制作通能力和團仄(3)在站點中新建一個網(wǎng)頁文件，命名為：.

3.能夠室送網(wǎng)站分

協(xié)作精種。<4)在站點中創(chuàng)迂,'style"千文件夬.ffl

態(tài)頁面開發(fā)的全過

HBuilder創(chuàng)建CSS桿式表文件，并保存CSS文

億

件到該文件夬中.命名為然后拈耳通用樣

式.

(5)在“CSS樣式表”面板中，點擊附加

樣式表校忸,可點擊“瀏覽”按仞，選捽已創(chuàng)

建的科所表文件.點擊“礴定”按鈕,將杵

代表州加到直式中。

<6)搭比貝面結(jié)構(gòu).

(7)在文件中添加CSS樣式.

六、課程實施計劃

單學

周次項E（任務）教學方法手段教學場所

元時

教學手段：多媒體

教學方法：項目教學、

114創(chuàng)建第一個頁面公共機房

小組教學、討論、演示

教學手段：多媒體

制作學院簡介網(wǎng)頁、新聞網(wǎng)

22-38教學方法：項目教學、公共機房

頁

小組教學、討論、演示

教學手段：多媒體

344制作新聞詳情頁而教學方法：項目教學、公共機房

小組教學、討論、演示

教學手段：多媒體

454制作云南旅游頁而教學方法：項目教學、公共機房

小組教學、討論、演示

教學手段：多媒體

46-78制作學院簡介貝面結(jié)構(gòu)教學方法：項目教學、公共機房

小組教學、討論、演示

教學手段：多媒體

制作學院新聞塊、制作學院

58-98教學方法：項目教學、公共機房

網(wǎng)站導航條

小組教學、討論、演示

制作學生信息表教學手段：多媒體

610-118制作用戶信息注冊表單的頁教學方法：項目教學、公共機房

面結(jié)構(gòu)小組教學、討論、演示

教學手段：多媒體

制作信息學院網(wǎng)站主頁布局

712-138教學方法：項目教學、公共機房

頁面

小組教學、討論、演示

教學手段：多媒體

完整案例：信息學院網(wǎng)站的

814-1612教學方法：項目教學、公共機房

制作

小組教學、討論、演示

七、課程考核

本課程考核采取形成性考核和終結(jié)性考核兩種方式進行，兩部分的分數(shù)比

例為：

課程考核成績=形成性考核成績（50%）+終結(jié)性考核成績（50%）

2.形成性考核種類及分數(shù)比例

本課程形成性考核包括平時成績和項目成績。其中平時成績包括：考勤和

作業(yè)：項目成績包括：操作和實訓項目卡。分數(shù)比例為：

形成性考核成績=平時成績（30%）+項目成績（70國）

3.形成性考核具體內(nèi)容及評分標準

（1）平時成績考核（100分）

①平時作業(yè)成績考核（50分）

全學期布置作業(yè)5次，全批全改，以A、B、C、D、E給學生每次作業(yè)

成績，每次作業(yè)的最高分（A）可得50/5=10分，其余等級依次遞減3分，

不交作業(yè)者不得分。

②平時考勤成績考核（50分）

隨機對學生進行考勤，無故遲到或早退1次扣3分，曠課一次扣5分，

扣滿50分為止。

（2）項目成績（100分）

項目具體考核標準比例見下表。

項目具體考核標準比例表

項目考核內(nèi)容分值比例（%）

一、HTML文檔結(jié)構(gòu)創(chuàng)建第一個頁面5

制作學院簡介網(wǎng)頁、新聞網(wǎng)頁

二、H二L5常見元素15

三、css基礎制作新聞詳情頁面10

四、盒子模型制作學院簡介頁面結(jié)構(gòu)10

制作學院新聞塊、制作學院網(wǎng)站

五、列表與超鏈接10

導航條

制作學生信息表、制作用戶信息注冊

六、表格與表單15

表單的頁面結(jié)構(gòu)

制作信息學院網(wǎng)站主頁布局頁面

七、DIV+CSS布局頁面15

八、完整案例：信息學院網(wǎng)站完整案例：信息學院網(wǎng)站的制作

20

制作

合計100

4.終結(jié)性考核具體內(nèi)容及評分標準

本課程終結(jié)性考核采取上機技能考試考核方式。

從《HTML5應用開發(fā)技術(shù)》操作試題庫中抽出1套試卷進行技能考試（滿

分100分）。

注：各項目考核過程中要注意考核工作與職業(yè)操守、學習態(tài)度、團隊合作精

神、交流及表達能力、組織協(xié)調(diào)能力等內(nèi)容

八、課程實施條件

1、師資隊伍要求：

主講教師具有教師資格碩士研究生以上學位學歷，能綜合運用各種教法設計課程，

掌握新技術(shù)，具有較強的專業(yè)能力新知識，有豐富的行業(yè)經(jīng)驗，具有相關(guān)職業(yè)資格證書：鋪

助教師具有較強的職業(yè)技能，接受一定的專業(yè)教方培訓，具有大本學歷，有較豐富的企業(yè)一

線工作經(jīng)驗，取得高級工以上職業(yè)資格證書。本課程師資隊伍年齡、職稱、雙師結(jié)構(gòu)合理，

學識水平高，教學經(jīng)驗豐富，教學特色鮮明，是一支適應職業(yè)教方要求的高素質(zhì)的教師隊

伍。

對專任教師的教師資格、行業(yè)企業(yè)工作閱歷、職業(yè)資格及能力和知識結(jié)構(gòu)的要求：

具有數(shù)據(jù)庫的基礎知識與技能，有一定的編程能力，并對信息系統(tǒng)的開發(fā)有一定的了解。

具有一定的組織協(xié)調(diào)能力，并具有熟練使用相關(guān)的網(wǎng)絡教學資源的能力。

2、教學場所要求

軟件技術(shù)專業(yè)具有理實一體化多媒體實訓室6間，《移動互聯(lián)網(wǎng)應用軟件開發(fā)》技能

大賽實訓室1間，智能交通沙盤、智能交通服務器、智能農(nóng)業(yè)沙盤、移動終端開發(fā)平臺10

余套。具有模擬實訓平臺，模擬企業(yè)真實項目，學習項目視頻并能夠與企業(yè)專家實時互動，

滿足了學生學習實訓需求，縮短了畢業(yè)生的就業(yè)崗位適應時間

本課程要求提供一個安裝了HBuilder的機房，或者有投影儀的實訓室，用以課程實訓I。

公共機房實訓室，配置了學生用實訓桌，便于學生討論和合作，軟硬件環(huán)境完全滿足課程需

要。

九、課程資源

（一）教材編寫情況

（一）教材編寫情況

1.結(jié)合學生特點自編濟校本講義《HTML5應用開發(fā)技術(shù)》講義

2.推薦教材

%b前端開發(fā)案例教程（HTML5+CSS3）,李志云編著，人民郵電出版社

3.參考書籍

HTML5+CSS3網(wǎng)站設計基附教程，傳智播客高教產(chǎn)品研發(fā)部編著，人民郵電出版社

《HTML5+CSS3網(wǎng)頁設計與制作》,黑馬程序員編著，人民郵電出版社

Web前端開發(fā)（初級），工業(yè)和信息化考試中心主編，電子工業(yè)出版社

<-）課程建設情況

U照職業(yè)技術(shù)學院網(wǎng)絡教學平臺一一網(wǎng)頁設計與制作：

（三）網(wǎng)絡資源

（全球最大的中文Web技術(shù)教程）

十、需要說明的其他問題

無

十一、本課程常用術(shù)語中英文對照表

標簽標簽含義英文英文含義備注

h標題headline標題

P段落paragraph段落

horizontal

hr水平分割線水平分割線

rules

b加粗bold加粗/粗體

加粗（強調(diào)語

strongstrong強壯的

義）

i傾斜incline傾斜

傾斜（強調(diào)語emphasize[用傾斜來起到

em強調(diào)

義）'emfssaiz]強調(diào)作用

u下劃線underline下劃線

ins標簽準確來

卜劃線（強調(diào)

insinsert插入說是:插入字效

語義）

果

strikethroug

s刪除線刪除線

h

del刪除線delete刪除

br回車換行break打破/折斷

img插入圖image圖片

src圖片路徑source源頭img標簽的屬性

width寬度width寬度標簽屬性

height高度height高度標簽屬性

title提示內(nèi)容title標題img標簽的屬性

alt替換的內(nèi)容alternative替換/交替img標簽屬性

border邊框線border邊界標簽屬性

anchor[*aer)

a超鏈接錨點

ks]

hypertext

href超鏈接地址超鏈接a標簽的屬性

reference

超鏈接在哪

targettarget目標a標簽的屬性

個窗口打開

_blank新窗口blank空白target屬性值

_self當前窗口self自己target屬性值

non-breakin

空格符不間斷空格

gspace

ul無序列表unorderlist無序列表

li列表項listitem列表條目

ol有序列表orderlist有序列表

dl自定義列表definedlist自定義列表

自定義列表

dtdefinedtitle自定義標題

標題

自定義列表defined

dd自定義詳情

詳情detail

table表格table表格

tr行tablerow表格行

td單元格tabledata表格數(shù)據(jù)單元格

收音機的按鈕

radio單選按鈕rad