《HTML5应用开发技术》课程标准

《HTML5应用开发技术》

课程标准

课程名称：HTML5应用开发技术

所属系部：电子信息工程系

授课教师：郭峰

审核人：张晓诺

制定时间：2023年9月

日照职业技术学院

目录

一、课程基本信息.........................错误！未定义书签。

二、课程概述.............................错误！未定义书签。

三、课程目标.............................错误！未定义书签。

四、课程内容.............................错误!未定义书签。

五、实训项目设计.........................错误！未定义书签。

六、课程实施计划.........................错误!未定义书签。

七、课程考核.............................错误！未定义书签。

八、课程实施条件.........................错误!未定义书签。

九、课程资源.............................错误！未定义书签。

十、需要说明的其他问题...................错误!未定义书签。

十一、本课程常用术语中英文对照表........错误!未定义书签。

附件1课程实训项目开设及耗材使用明细・・・•,错误!未定义书签。

《HTML5应用开发技术》课程标准

一、课程基本信息

课程代码250677课程性质必修

适用专业软件技术开设学期第一学年第1学期

课程类别专业平台课程课程类型B类

学分4总学时64

学时分配理论学时：32；实践学时：32

实施场所公共机房授课方式讲授+操作

执笔人郭峰

审核人张晓诺

制订时间2023年9月

二、课程概述

（-）课程定位

《HTML5应用开发技术》课程是软件技术专业的一门专业必修课程，是为满足行业企业

进行网站建设对网页设计制作人员的需求而开设。本课程主要培养学生具有网页设计与制作

的基本技能，使学生能够运用专业的网页制作工具，设计制作常见网页的静态网页，具备网

站规划、建立和维护的能力。

（-）先修后续课程

在课程为大一上学期开设课程，后续课程为《javaweb》

（三）本课程与中职、本科、培训班同类课程的区别。

层次区别

基础知识培养的基本要求不同，本科教育要求宽厚，宽广、扎实，本课程

要求掌握基本就可以：

专业知识培养的基本要求不同，本科要求了解就可以，本课程需要足够孔

本科

实：

主要能力的培养要求不同，本科偏重研究能力、创新能力、创新创业能力，

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

本课程理论知识比中职更加实用、有系统性，强调专业知识的来源并从中

中职体验出基础知识在解决专业问题时的应用方法、途径和规律，强调专业知

识的实用性、指导性。

培训班重点在操作应用能力方面的实践，本课程重点在提高技能（操作）

培训班

与理论共同能力方面的实践。

三、课程目标

本课程以学生能够制作完成常见静态网页为学习目标，要求学生熟悉HTML语言、能熟

练运用CSS控制页面，能熟练使用HBuilder制作网页，具备规划、开发、发布管理静态网

站的专业知识和技能，为以后学习《javaweb》课程打下基础。

（―）知识目标

1.熟悉网站建设的基本流程；

2.了解常见的网页布局版式的类型；

3.熟练掌握html语言的基本谙法、常用标记：

4.掌握网页制作软件HBuilder的基本操作和使用技能；

5.掌握CSS样式的创建、编辑和使用；

6.掌握DIV+CSS对网页进行布局的方法：

7.掌握网页中JavaScript搭建动态效果。

（二）能力目标

1.网页设计能力

（1）能根据用户需求设计用户界面；

（2）能根据网站主题要求设计合理的网站栏目：

（3）能根据网站主题和栏目合理设计网页的布局；

2.网页制作能力

（1）能应用HBuilder进行网站站点管理；

（2）能应用HBuilder熟练地在网页中插入文本、图像、动画、表格等元素：

（3）能利用超链接将不同网页链接起来：

（4）能利用DIV+CSS完戊网页的布局；

（5）能利用CSS对网页进行美化：

（6）能完成对网站的测试与发布工作。

（三）素质目标

1.培养学生的用户需求的理解能力；

2.培养学生分析问题与解决实际问题的能力；

3.培养学生制作静态网页的能力，提高学生的动手能力：

4.培养学生获取信息和处理信息的能力，学会通过网站、书籍、素材光盘等方式收集所

需的素材。

四、课程内容

序号项目（模块）工;乍任务学时

1、网页设计概述1.创建第一个页面4

2、I1TML5基础2.制作学院简介网页、新闻网页8

3三、CSS基础3.制作新闻详情页面4

4四、CSS3高级选择器4.制作云南旅游页面4

5五、盒子模型5.制作学院简介页面结构8

6.1制作学院新闻块

6六、列表与超链接8

6.2制作学院网站导航条

7.1制作学生信息表

7七、表格与表单8

7.2制作用户信息注册表单的页面结构

8八、DIV+CSS布局页面8.制作信息学院网站主页布局页面8

9九、完整案例：信息学院网站制作9.完整案例：信息学院网站的制作12

五、实训项目设计

他实训项目

T(任务)可展示的结果

素质目标知识目标能力目标实施步磔

或考核标准

'名称

1、同际的星本沟成要1.认识网页与㈣

培养学生网页

索、符态同员与动态网站基础1.HTML文档用本结构

谀计创意思

胡建扉一页的区别，各科浏览器2.了斛网络设计2.HTML的常用文本标记创建第一个复

维、艺表设计

个五面和网页制作工具。行业圻景与发展3.HTML"!写页面的方法面

素质.

2.HTML文档基本结构方向4.创建吊一个科页

3、熟悉工作界面

(1)从主页可以铤扶到其他页面,从其他我

1.李援HTML的茶本结而可以返回到主页。

培养学生对网

构：《2》在主页中创这友情增挂.港挂到百度和

制作学龙页、网站收念学会并零根站

2.学握常用品HTML标新浪网.制作学庞鞘介

前介间的认识.培养点虚设险钊用

记：《3》新闻友曲中.新闻条目关用列表项表示.网页、

页、新闻学生的秘互沟html语文制作简

3.会熟然使用HTML常(4)专业介绍页面中,创建“到页头”和“到新闻网页

网页道能,力和团队单网友

用标记创过简单网页尾”的猫点担挟.

协作皓种。

页<5)在各个页面中适当设亘页面的字体、字

号和46邑等

培养学生对同1.了解网页的构成.就够熟推使用初价新闻济情

配作新闻

无、网站概念理静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所•存的页面由标是，导航、

母养学生对网的定住于指定的

2.理解美乐逸抒图片和文字组成.用＜nav＞元素质至■0＞

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

3§:林汜实现导抗;年个景点的内容部分用

M作云而的认识，培界族外的class或

3.熟缘使用结构＜dl＞标汜定义，其中图片用＜dt＞标记，文

旅游页面学生的相互沟id,通过这种方式

化伪关选择字用＜dd＞域/定义，某些材殊文本用

通也力和田队也可以让我们的

器：＜em＞定义.

协作精神。代码和样式更加

4.掌捱优元泰选2.制作页面总构

林洁、灵活、多控

择盥根据上而的会析，用HTML实现百而结构

*1.

制作学院简介页面，该页面中主矣有标也和

段落文字组成.所有文字内容放入一个块中.标

邈文字使用标记。2＞,段落文字使用标汜。＞。

耳养学生计网1.了飘盒子栈型的衽

因比首先在页而中要使用DIV定义一个块,将标

更、网站概念念

制作学应能够使用盒子邈和段落内容放入块中.网灵元索的样式使用

的认识，培春2.掌握盒子优相关属制作学悦简介

5简介页面模型进行网页布CSS样式谈直.

学生的相互沟性页面结构

财枸局（1）页面背景为祥云。。

通能力和国队3.了黑元米酸美型与

＜2）金子的宽度为720俅索、高反自动适应

协作希种。转换

文字内宋、边框为1像素、2■色、实煤。

＜3）正文标题采用二圾标咫、标题行高度为

30像素、文字质色为黑色、在浏览器中居中显

示・

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

字颜色为黑电、行高25px、首行缩进2个字将、

段落的下外边能为20像卡。

(1)将学院委闻所有内容放入定义的块中，

新闻条目使用无序列表显示。设工块及相美

培养学生时网1.学提列表眩CSS样元素的CSS属性。

制作学应

页、阿拈梗念式谀3t方法：(2)该导航条行8个导航项构成.每两个字

新闻块、耗够使用CSS副作学龙新闻

的认识，培界2.掌搔超铤梓的CSS航项之间有一个分隔条.导航条的，费可以使

6制作学比的相关技术实现块、制作竽玩网

学生的相瓦沟样式谀直方法：用无序列表构造,所有文字内容放入一个块

网站导航具体效果.站导航条

退能力和团队3.学握新阊圾和网站中.因此盍先在页面中使MDIV定义一个

柒

势作精神.导航的制竹方法块,料列表项内容放入块中.再设五观中各

元素及超铳接的CSS样式，导航项右恻的分

陆未通过缗列表项渗加什景图像枭实现

1.学煤创迂我格的

制作学生培养学生计网HTML标圮：<1)利比一个6打7列的表格。

信息表、页、网站收念2.掌摄表格的CSS样(2)设五表格标迨一学生信息表.制作学生信息

制作用户的认识.培养式控制：能精利CSS更<3)在表格标记中添加归应文本内容.并用表、制作用户信

信息注册学生的相互沟3.掌握创建表单的化表单城.<th>标记为我格设jt表头.息注册表单的

表单的贡遇能力和团队HTML标汜：<4)遇itCSS终体控制表格边框样式。员面经构

面站构协作希种.4.学挂表单的CSS样<5)通江CSS设五单元格边框样式。

式控制

制作信息培养学生对网1.理意元索的子动属能够使用学院网站主页东•用了典型的三列布局.理解

制作信息学£

学院网站页、阿骷杨念性；DIV+CSS进行网页其布局方法。

Q网站主页布局

主页布局的认识.培养2.掌提元索就各种定布局(1)闸页的宽度为1000便素。

页而

页面学生的相互沟位方法；泞动扁姓创戊(2)页面M部块：宽度1000俅米，高度36

道修力和田，人3.掌握常用酸横向导航.像素.

协作精神。DIV+CSS布局方式(3)导航栏块：交度1000像素，高度30

像点.

(4)主体部分左M块：宽戾为280像索，高

度482他#.

(5)主体部分中间块：觉反为460像素，高

度为482他京.

(6)主体部分右例块：变反为240僮素，高

度为482位米.

(7)常用皴按块：宽度为1000像素，鬲度

为30像素.

(8)页面底部块：宽层为1000俅素，尚度

为80像素.

(9)各个块之间有适当问旃。

(1)在收盘E会彬.目录下翎虎网“文件央

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

了斛度谩网站前

1.media、pictures,swf拷贝到该文件夬下。

培养学生讨网的相关工作;(2)启动HkiilderCS6,通过“站点”1

充弊发贡、网站极金“新迂站点”命令,创茂网站站点.站点名欷为：

鲍够独立完成完条案例：休息

„例：低息的认识，培养2.隼握页改就期布schoolSite,本地站点文件夹为：E:\

整个站点的规划学优网站的却

学院网站学生的扪互沟schoolSite\»

局规划的思路和方法：与制作作

的制作通能力和团仄(3)在站点中新建一个网页文件，命名为：.

3.能够室送网站分

协作精种。<4)在站点中创迂,'style"千文件夬.ffl

态页面开发的全过

HBuilder创建CSS杆式表文件，并保存CSS文

亿

件到该文件夬中.命名为然后拈耳通用样

式.

(5)在“CSS样式表”面板中，点击附加

样式表校忸,可点击“浏览”按仞，选捽已创

建的科所表文件.点击“礴定”按钮,将杵

代表州加到直式中。

<6)搭比贝面结构.

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

六、课程实施计划

单学

周次项E（任务）教学方法手段教学场所

元时

教学手段：多媒体

教学方法：项目教学、

114创建第一个页面公共机房

小组教学、讨论、演示

教学手段：多媒体

制作学院简介网页、新闻网

22-38教学方法：项目教学、公共机房

页

小组教学、讨论、演示

教学手段：多媒体

344制作新闻详情页而教学方法：项目教学、公共机房

小组教学、讨论、演示

教学手段：多媒体

454制作云南旅游页而教学方法：项目教学、公共机房

小组教学、讨论、演示

教学手段：多媒体

46-78制作学院简介贝面结构教学方法：项目教学、公共机房

小组教学、讨论、演示

教学手段：多媒体

制作学院新闻块、制作学院

58-98教学方法：项目教学、公共机房

网站导航条

小组教学、讨论、演示

制作学生信息表教学手段：多媒体

610-118制作用户信息注册表单的页教学方法：项目教学、公共机房

面结构小组教学、讨论、演示

教学手段：多媒体

制作信息学院网站主页布局

712-138教学方法：项目教学、公共机房

页面

小组教学、讨论、演示

教学手段：多媒体

完整案例：信息学院网站的

814-1612教学方法：项目教学、公共机房

制作

小组教学、讨论、演示

七、课程考核

本课程考核采取形成性考核和终结性考核两种方式进行，两部分的分数比

例为：

课程考核成绩=形成性考核成绩（50%）+终结性考核成绩（50%）

2.形成性考核种类及分数比例

本课程形成性考核包括平时成绩和项目成绩。其中平时成绩包括：考勤和

作业：项目成绩包括：操作和实训项目卡。分数比例为：

形成性考核成绩=平时成绩（30%）+项目成绩（70国）

3.形成性考核具体内容及评分标准

（1）平时成绩考核（100分）

①平时作业成绩考核（50分）

全学期布置作业5次，全批全改，以A、B、C、D、E给学生每次作业

成绩，每次作业的最高分（A）可得50/5=10分，其余等级依次递减3分，

不交作业者不得分。

②平时考勤成绩考核（50分）

随机对学生进行考勤，无故迟到或早退1次扣3分，旷课一次扣5分，

扣满50分为止。

（2）项目成绩（100分）

项目具体考核标准比例见下表。

项目具体考核标准比例表

项目考核内容分值比例（%）

一、HTML文档结构创建第一个页面5

制作学院简介网页、新闻网页

二、H二L5常见元素15

三、css基础制作新闻详情页面10

四、盒子模型制作学院简介页面结构10

制作学院新闻块、制作学院网站

五、列表与超链接10

导航条

制作学生信息表、制作用户信息注册

六、表格与表单15

表单的页面结构

制作信息学院网站主页布局页面

七、DIV+CSS布局页面15

八、完整案例：信息学院网站完整案例：信息学院网站的制作

20

制作

合计100

4.终结性考核具体内容及评分标准

本课程终结性考核采取上机技能考试考核方式。

从《HTML5应用开发技术》操作试题库中抽出1套试卷进行技能考试（满

分100分）。

注：各项目考核过程中要注意考核工作与职业操守、学习态度、团队合作精

神、交流及表达能力、组织协调能力等内容

八、课程实施条件

1、师资队伍要求：

主讲教师具有教师资格硕士研究生以上学位学历，能综合运用各种教法设计课程，

掌握新技术，具有较强的专业能力新知识，有丰富的行业经验，具有相关职业资格证书：铺

助教师具有较强的职业技能，接受一定的专业教方培训，具有大本学历，有较丰富的企业一

线工作经验，取得高级工以上职业资格证书。本课程师资队伍年龄、职称、双师结构合理，

学识水平高，教学经验丰富，教学特色鲜明，是一支适应职业教方要求的高素质的教师队

伍。

对专任教师的教师资格、行业企业工作阅历、职业资格及能力和知识结构的要求：

具有数据库的基础知识与技能，有一定的编程能力，并对信息系统的开发有一定的了解。

具有一定的组织协调能力，并具有熟练使用相关的网络教学资源的能力。

2、教学场所要求

软件技术专业具有理实一体化多媒体实训室6间，《移动互联网应用软件开发》技能

大赛实训室1间，智能交通沙盘、智能交通服务器、智能农业沙盘、移动终端开发平台10

余套。具有模拟实训平台，模拟企业真实项目，学习项目视频并能够与企业专家实时互动，

满足了学生学习实训需求，缩短了毕业生的就业岗位适应时间

本课程要求提供一个安装了HBuilder的机房，或者有投影仪的实训室，用以课程实训I。

公共机房实训室，配置了学生用实训桌，便于学生讨论和合作，软硬件环境完全满足课程需

要。

九、课程资源

（一）教材编写情况

（一）教材编写情况

1.结合学生特点自编济校本讲义《HTML5应用开发技术》讲义

2.推荐教材

%b前端开发案例教程（HTML5+CSS3）,李志云编著，人民邮电出版社

3.参考书籍

HTML5+CSS3网站设计基附教程，传智播客高教产品研发部编著，人民邮电出版社

《HTML5+CSS3网页设计与制作》,黑马程序员编著，人民邮电出版社

Web前端开发（初级），工业和信息化考试中心主编，电子工业出版社

<-）课程建设情况

U照职业技术学院网络教学平台一一网页设计与制作：

（三）网络资源

（全球最大的中文Web技术教程）

十、需要说明的其他问题

无

十一、本课程常用术语中英文对照表

标签标签含义英文英文含义备注

h标题headline标题

P段落paragraph段落

horizontal

hr水平分割线水平分割线

rules

b加粗bold加粗/粗体

加粗（强调语

strongstrong强壮的

义）

i倾斜incline倾斜

倾斜（强调语emphasize[用倾斜来起到

em强调

义）'emfssaiz]强调作用

u下划线underline下划线

ins标签准确来

卜划线（强调

insinsert插入说是:插入字效

语义）

果

strikethroug

s删除线删除线

h

del删除线delete删除

br回车换行break打破/折断

img插入图image图片

src图片路径source源头img标签的属性

width宽度width宽度标签属性

height高度height高度标签属性

title提示内容title标题img标签的属性

alt替换的内容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表格数据单元格

收音机的按钮

radio单选按钮rad