《网页设计与制作》课程标准（含课程思政）

《网页设计与制作》课程标准

课程名称网页设计与制作课程代码26033125

课程类别专业课课程性质必修课

课程总学时64课程学分3

适用专业电子商务归属学院智能商务学院

一、课程定位

“网页设计与制作”是高职电子商务专业核心课程。电子商务专业人才培养目标是以

习近平新时代中国特色社会主义思想为指导，具备培养理想信念坚定，德、智、体、美、

劳全面发展，具有一定的科学文化水平，良好的人文素养、职业道德和创新意识，精益求

精的工匠精神，较强的就业能力和可持续发展的能力，掌握本专业知识和技术技能，面向

互联网和相关服务业、批发业、零售业等行业的销售人员，商务咨询服务人员等职业群，

能够从事营销推广、运营管理、客户服务等工作的高素质技术技能人才。电子商务专业面

向卤位群有电子商务网页技术岗位群、电子商务数据分析岗位群、网络营销岗位群、跨境

电商岗位群、电子商务运营岗位群等。

课程“网页设计与制作”主要针对电子商务网页设计等岗位开设，主要任务是培养学

生网页设计与Web前端开发能力，为实现专业人才培养目标起到支持和促进作用。本课程

以现代信息技术、电子商务基础、网页前端技术（HTML&CSS）、图形图像处理等课程为先

导课程，后续课程为网站（店）运营、电子商务数据分析、网络营销、Web前端设计等。。

二、设计思路

（一）课程内容选取

课程内容的选取紧紧围绕电子商务网页技术岗位群中的网页设计、Web前端开发、网

站（店）美工等岗位从业人员应具备的职'亚能力要求，融入Web前端开发职'业技能等级标

准，坚持立德树人的育人宗旨，践行课程思政与技能培养相结合，强化社会职业核心价值

观和职业素养教育，注重标准与规范，培育劳动意识和工匠精神，将课程内容确定为网页

息体规划设计、制作网页效果图、网页切片与导出HTML页面、网页HTML修正处理、添加

网页静态效果、添加网页动态效果、制作网络广告等、制作网页视频播放器、网页搜索引

擎优化等九个学习任务。

（二）课程内容编排设计

课程结构体系是根据网页设计岗位工作过程和学生的认知规律来确定学习任务顺序,

按学习任务的难易程度确定课程总学时和学时分配。课程建议总学时数为52学时。。

三、课程目标

（一）总体目标

通过本课程的学习，学生能以习近平新时代中国特色社会主义思想为指导，积极践行

社会主义核心价值观，爱国精神和家国情怀，遵守电商法律法规，具备家国情怀、民族自

信心、工匠精神和职业精神。掌握网页设计与制作专业技能，学生会应用HTML、CSS、

JavaScriptPhotoshop网页布局与配色、Dreamweaver网页制作、网页搜索引擎优化、

网络广告实现等方面的相关知识技能，能胜任网页设计与制作、网站（店）装修、Web前

端开发视觉营销等工作任务，具备网页设计规划能力、网页布局与配色能力、静态与动态

网页效果制作能力、网络广告制作能力、网店商品详情页设计能力等职业能力。

（二）具体目标

1.素质目标

（1）具有遵守互联网法律法规的意识，有图片、软件著作知识产权保护观念。

（2）具有“工欲善其事，必先利其器”的工匠精神。

（3）具备整体观和全局意识。

（4）具有“做中学、多动手”的职业素养。

（5）具备平面布局、色彩搭配等艺术审美能力。

（6）具备互联网思维，追求极致，做事不留瑕疵。

（7）具备终身学习的素养，能够自学和请教获得答案。

（8）具备细节决定成败的意识，耐心细致，精益求精。

（9）具备信息安全的意识，遵守信息安全规范。

（10）具备信息资源的收集、整理、内化及应用的能力。

（11）具备良好的人机交互意识，注重交互设计中融入以人为本的理念。

2.知识目标

（1）会说明网页文字、图片、音频、视频素材的一般格式与编码要求。

（2）会描述网页的一般布局及常用的布局草图设计软件。

（3）会说明网页设计中像素的含义。

（4）会描述网页色彩及运用方法。

（5）会描述Photoshop网页效果设计中图层、参考线、选取工具、切片、描边、标

尺、切片设置、切片优化、Web页面导出的专用技术。

（6）会描述HTML页面结构及常用HTML标签的运用方法。

（7）会描述CSS的样式格式与常用的CSS样式运用方法。

（8）会描述JavaScript基本编程运用及网页嵌入技术。

（9）会说明导航条、九宫图、表格、表单等静态页面效果的制作逻辑与HTML和CSS

设计技巧。

（10）会说明倒计时（秒杀）、分页选项卡、登录模块等动态页面效果的制作逻辑与

HTML、CSS、JavaScript设计技巧。

（11）会说明弹出广告、对联广告、轮播广告、侧边栏广告等网络广告的制作逻辑与

HTML^CSS、JavaScript设计技巧。

（12）会说明网页视频播放器的制作逻辑与HTML、CSS>JavaScript设计技巧。

（13）会描述网页搜索引擎优化中关键词遴选、标题优化、Meta优化、网页文案优

化、网页表现与行为代码外置的原理和方法。

3.能力目标

（1）能够正确收集整理网页文字、图片、音频、视频等素材，能够选择适合的开源

开发工具。

（2）能够规划网页蓝本、并能够选择软件工具绘制网页规划草图。

（3）能够熟练使用Photoshop根据网页规划草图进行网页布局。

（4）能够熟练使用Photoshop进行网页整体配色和背景设计。

（5）能够熟练使用Photoshop植入网页图片、文字、音频、视频等元素，完成网页

效果图设计。

（6）能够熟练进行网页精准切片和切片设置。

（7）能够将网页效果图通过优化导出为DIV+CSS布局的HTML网页。

（8）能够熟练使用Dreamweaver建议Web站点和网页设计制作。

（9）能够熟练使用HTML及CSS制作网页且修正导出的网页。

（10）能够设计制作个性化的导航条、九宫图、表格、表单等静态网页效果。

（11）能够运用HTML、CSS、JavaScript设计制作个性化倒计时、分页选项卡、登录

模块等动态页面效果。

（12）能够在网页中添加自己设计的弹出广告、对联广告、轮播广告和边栏广告。

教学项目选择精准扶贫网页制作案例，教学中结

合当前我国乡村振兴战略形势，进行教育帮扶和

1电子商务专业助农教育。在规划网站栏目及整理家国情怀

素材过程中，结合助农政策，了解乡村丰富的农

特产品，增加民族自豪感。

网页设计制作需要绝对精准，不能有丝毫误差。

由此，课堂中引入工匠精神，在工作中一丝不苟、

2具备细节决定成败的做人做事的理念。工匠精神

培养美和创新意识C美一正确的符合受众人群的

审美观。创新一思想有多远，就能走多远。

对文案内容进行再审核，加强职业守则及法律法

规知识的教育，特别是遵从《互联网信息服务管

3理办法》、《互联网出版管理暂行规定》、《计算机规则意识

信息网络国际联网管理暂行规定》等法律法规，

保障互联网内容的合法性，传播网络正能量。

工匠精神强调工具的应用一一“工欲善其事，必

先利其落”。网页效果设计与切片导出需要对

4Photoshop很熟悉。那么需要多动手、多训练、职业品格

多做项目，精益求精，正是这种工匠精神能促成

网页设计“工匠”的出现。

纸上道来来终觉浅，绝知此事要躬行。

5发扬职业教育精神，培养自学能力和终身学习的工匠精神

能力，能通过学习思考解决工作中遇到的问题。

在九宫图设计中以社会主义核心价值观为范例，

6师生一起背诵、输入，并进行效果修饰，以加深世界观

印象，加强理解。

7净化网络空间，自觉抵制不良网络视频。规则意识

8自觉遵从网络广告法规，树立网络伦理理念。c依法治国

通过完成实训任务，培养学生吃苦耐劳、严谨认

9爱岗敬业

真和一丝不苟的工作态度。

具备细节决定成败的意识，耐心细致，精益求精。

10树立以客户需求为中心的服务意识，不断提升服工匠精神

务质量。

（三）内容设计

情境一：总体规划“电商助农”网页与设计“电商助农”网页草图

学时2其中：理论0学时，实践2学时，一体化2学时。

学习目标

1.掌握知识点：

•网页文案的一般要求；

•网页中图片格式、大小要求；

・网页中音频、视频的常用格式与要求。

2.获得技能点：

・网页文案写作；网页图片处理；

•网页音视频处理。

3.思政融入点：

•教学项目选择精准扶贫网页制作案例，教学中结合当前我国乡村振兴战略形势，进行教

育帮扶和电子商务专业助农教育。

・在规划网站栏目及整理素材过程中，结合助农政策，了解乡村丰富的农特产品，增加民

族自豪感。

学习内容教学建议与说明

某湖北电商企业拟开发一个精准扶贫产品电商展示推广网教学过程应体现“教、学、

站，推广湖北贫困地区农副产品和土特产品。企业已经有做、用”一体化原则，建立

部分产品图片、产品介绍等信息。先准备制作一个网站首完整的在线教学平台，建设

页。要求包括Logo、Banner^重点商品介绍、广告商品、丰富的教学资源，包括课程

网站介绍、网站导航等栏目。要求整理素材、规划页面板介绍、课程标准、课程设计、

块并绘制网页草图。教学演示文档、教学教案、

1.收集整理网页素材实训一体化任务单、实训内

・会根据网页设计对文本的要求对网页文案进行加工容、习题与考核内容等，更

•会根据网页图片的要求，对展示产品图片及相关图片进重要的是所有的教学环节录

行加工处理制完整的教学视频，在重点

・会根据网页对其他素材的要求对网页其他素材进行加工难点环节录制知识技能拓展

整理。教学视频。由此，课程根据

2.制作网页设计草图不同学校、不同教师、不同

•会描述Photoshop的基本作用及与网页设计相关的参数生源的需要采取线下师徒式

设置方法教学、线上线下融合的翻转

•会使用Photoshop设计制作网页规划草图课堂、线上教学或混合式教

学方法。

单元考核评价说明课程考核所占权重

1.独立完成学习情境中的设计草图。

2.自己设计一个网页首页［电商站点、学习站点、企业站5%

点等),绘制页面草图c

拓展和探究性学习

在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以

便学生选择拓展学习，进一步提升学生技能水平。并自学AI(Hlustralor),使用其绘

制网页草图。

情境二：制作“电商助农”电商网页效果图

学时8其中：理论0学时，实践4学时，一体化4学时。

学习目标

1.掌握知识点：

・精准参考线建立方法；

・固定大小矩形选取框建立方法；

•图层建立级图层分组方法。

2.获得技能点：

•运用Photoshop建立网页布局文档；

•建立精准布局参考线及固定大小选取框；

•Photoshop区域填充。

•使用Photoshop描边设置区域边框。

3.思政融入点：

•网页设计制作需要绝对精准，不能有丝毫误差。由此，课堂中引入工匠精神，在工作中

一丝不苟、具备细节决定成败的做人做事的理念。

•培养美和创新意识。美一正确的符合受众人群的审美观。创新一思想有多远，就能走多

远。

•进行剪贴图层教学时，运用中国梦的内容：国家富强、民族振兴、人民幸福文字效果制

作为案例。教学中通过自然融入让学生增加对中国梦的记忆和理解。

•进行Logo制作教学时，选择制作环保标签，引申出环保意识教育，阐明“绿水青山就

是金山银山”的重要意义。

•进行商品背景图片设置中包含农民田间劳动收获图片，引申出我国“艰苦奋斗、请柬节

约”的光荣传统，以及现阶段推行“光盘行动”的意义。

•进行网页文案写作教学时，强调遵纪守法，特别是要遵从电子商务法、网络完全法、消

费者权益保护法等法律法规，传播网络正能量。

•具备大局意识，有整体感，同时具备画龙点睛，重点突出意识。

•具备电子商务职业素养，养成用户至上的职业习惯,

学习内容教学建议与说明

通过设计规划制作出网页草图后，该企业作为电子商务企业，考虑到教学过程应体现

视觉营销和网站推广因素，决定制作出网页效果图，包括网页布局、“教、学、做、用”

网页配色与背景设计、添加Logo商品广告图片、植入网页文案、设一体化原则，建立

计网页导航条等，最后完成网页效果图制作。完整的在线教学平

1.网页布局台，建设丰富的教

•会按照设计草图运用Photoshop参考线及矩形选取框工具进行页学资源，包括课程

面布局分块。介绍、课程标准、

•会按照设计草图运用Photoshop图层进行网页区域图层分块课程设计、教学演

•会设页面区域边框。示文档、教学教案、

•会按照设计草图通过区域分块和图层分块完成网页总体布局和详实训一体化任务

细布局。单、实训内容、习

2.网页配色题与考核内容等，

・会根据网页设计和视觉营销的需要进行网页整体配色。更重要的是所有的

•会网页效果设计的需要添加网页图片背景。教学环节录制完整

•会按照网页设计的需要完成网页配色。的教学视频，在重

3.网页图片元素植入与处理点难点环节录制知

•会设计与植入网页Logo识技能拓展教学视

•会植入网页图片。频。由此，课程根

•会植入网页广告图片。据不同学校、不同

4.网页文案植入与效果编排教师、不同生源的

•会进行网页文案写作需要采取线下师徒

•会设置网页标题并设计效果式教学、线上线下

•会植入网页文案变进行视觉效果编排。融合的翻转课堂、

5.设计网页导航效果•会导航条背景设计线上教学或混合式

•会设计制作网页导航完整并对齐教学方法。

•会设计导航的呈现效果。

单元考核评价说明课程考核所占权重

1、课堂学习考核（包括考勤、提问、操作训练过程及完成情况）

10%

2、完成个人电子相册或《光辉历程》电子相册制作。

拓展和探究性学习

在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目《光辉历

程》电子相册视频，以便学生选择拓展学习，进一步提升学生技能水平。并使用Illustrator

制作网页效果图。

情境三：“电商助农”电商网页切片与导出“电商助农”电商HTML页面

学时4其中：理论0学时，实践2学时，一体化2学时。

学习目标

1.掌握知识点：

•Photoshop切片工具及选择切片工具使用方法：

•基于图层切片使用方法；

・用户切片、生成切片与住户切片提升方法与应用。

2.获得技能点：

•运用Photoshop"新建基于图层的切片”进行总体切片分块；

•运营Photoshop切片工具进行区域切片划分；

•运营Photoshop放大镜工具及智能参考向精确调整切片。

3.思政融入点：

•工匠精神强调工具的应用一一“工欲善其事，必先利其器”。网页效果设计与切片导出

需要对Photoshop很熟悉。那么需要多动手、多训练、多做项目，精益求精，正是这种工

匠精神能促成网页设计“工匠”的出现。

•具备全局观念、大局意识，磨练整体规划综合思考能力。

•纸上道来来终觉浅，绝知此事要躬行。

•发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到

的问题。

学习内容教学建议与说明

这个效果页面转换为真实的Web页面——HTML页面。

Photoshop的切片及“存储为Web所用格式”提供了这一

教学过程应体现“教、学、做、

功能°本子项目就是完成从网页效果图到HTML网页的转

用”一体化原则，建立完整的

换。

在线教学平台，建设丰富的教

1.划分网页切片

学资源，包括课程介绍、课程

•会使用Photoshop基于图层切片技术划分网页总体切

标准、课程设计、教学演示文

片。

档、教学教案、实训一体化任

•会使用切片工具及划分切片技术详细划分切片

务单、实训内容、习题与考核

・会通过放大工具和智能参考线精确调整切片完成网页

内容等，更重要的是所有的教

切片。

学环节录制完整的教学视频，

2.网页切片参数设置

在重点难点环节录制知识技

•会整体规划页面参数。

能拓展教学视频。由此，课程

•会设置用户切片参数

根据不同学校、不同教师、不

3.网页切片图片优化

同生源的需要采取线下师徒

•会进行切片图像格式选择。

式教学、线上线下融合的翻转

•会进行网页图像格式的优化

课堂、线上教学或混合式教学

4.网页HTML页面导出

方法。

•会进行表格布局的网页页面导出。

・会进行DIV+CSS结构的网页页面导出。

单元考核评价说明课程考核所占权重

1、课堂学习考核（包括考勤、提问、操作训练过程及完

成情况）20%

2、自己搜集或拍摄素材，制作一个微电影。

拓展和探究性学习

在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以

便学生选择拓展学习，进一步提升学生技能水平。同时，网上寻找学习资源，学习网页

设计的Web标准规范。

情境四：精简与优化“电商助农”电商网页代码

学时4其中：理论0学时，实践2学时，一体化2学时。

学习目标

1.掌握知识点：

・网页设计工具Dreamweaver的使用方法；

•网页设计制作规范；

•HTML5的网页文档格式；

•HTML、CSS的基本结构、语法、样式。

•CSS中盒模型与块元素居中方法。

2.获得技能点：

•运用Dreamweaver建立Web站点，打开导出的HTML网页；

•运用Dreamweaver将打开的网页转换为HTML5网页文档；

•遵循网页设计制作规范合理布局站点、规范命名及代码书写，提高代码可阅读性；

•运用Dreamweaver删除网页中冗余的代码（包括注释代码、标记中多余的属性代码）。

•运用Dreamweaver编写代码实现页面居中。

3.思政融入点：

•发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到

的问题。

•对文案内容进行再审核，加强职业守则及法律法规知识的教育，特别是遵从《互联网信

息服务管理办法》、《互联网出版管理暂行规定》、《计算机信息网络国际联网管理暂行

规定》等法律法规，保障互联网内容的合法性，传播网络正能量。

学习内容教学建议与说明

到现在，该企业的网页设计小组已经完成了网站首页从

设计效果图到网页的转换。然而导出的页面还不能称之

为真正意义上的网页。在浏览器浏览时页面不在中间；

教学过程应体现“教、学、做、

查看网页代码时，发现有很多冗余代码；并且页面不是

用”一体化原则，建立完整的在

HTML5文档；页面的文字部分还是图片；贝面的导航效

线教学平台，建设丰富的教学资

果需要加强。所有上述问题需要进行修正处理，建立真

源，包括课程介绍、课程标准、

正意义上的HTML网页页面，使之更符合网页设计规范

课程设计、教学演示文档、教学

要求。

教案、实训一体化任务单、实训

1.网页代码精简与整体效果优化

内容、习题与考核内容等，更重

・会使用Dreamweaver建立Web站点。

要的是所有的教学环节录制完整

・会将其他网页页面转换为HTML5格式的网页页面。

的教学视频，在重点难点环节录

•会删除网页中冗余的HTML代码以精简网页代码。

制知识技能拓展教学视频。由此，

•会使用CSS样式实现网页居中。

课程根据不同学校、不同教师、

2.文字图片处理

不同生源的需要采取线下师徒式

•会使用HTML和CSS实现页面文字处理。

教学、线上线下融合的翻转课堂、

3.网页导航效果实现

线上教学或混合式教学方法。

•会使用Photoshop制作导航栏目图片。

•会使用HTML及CSS代码完成导航效果的实现。

单元考核评价说明课程考核所占权重

1.独立完成学习情境中的网页HTML页面精简与优化。

2.完成自己设计网页首页（电商站点、学习站点、企业5%

站点等）的网页HTML页面代码精简与优化。

拓展和探究性学习

在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以

便学生选择拓展学习，进一步提升学生技能水平。并回顾或网上学习使用HTML5+CSS3网

页设计技术。

情境五：制作“电商助农”电商网页静态效果

学时4其中：理论0学时，实践2学时，一体化2学时。

学习目标

1.掌握知识点：

•HTML中的列表元素（ol/ul）及特点。

•CSS中font>border>float等样式与属性值的应用。

•基本的横向或纵向导航条的HTML结构：

•基本的横向或纵向导航条的CSS样式；

•HTML、CSS的基本结构、语法、样式。

•滑动门导航条实现原理。

•九宫图实现原理。

•运用Pliotosliop制作九宫图图片的方法。

•Photoshop固定大小与样式的圆角矩形制作与设计技术，基于参考线的切片与图片导出

技术。

•HTML中table元素的结构。

•CSS中针对table元素的特点

2.获得技能点：

•运用Dreamweaver设计基本导航条样式；

•运用Photoshop制作滑动门导航条图片。

•运用Dreamweaver将导航条代码移植到特定页面并进行精准调整。

3.思政融入点：

•具有职业教育素养，多动手，做中学。

•具备细节决定成败的意识，耐心细致，精益求精

•树立以客户需求为中心的服务意识，不断提升服务质量。

•在九宫图设计中以社会主义核心价值观为范例，师生一起背诵、输入，并进行效果修饰,

以加深印象，加强理解。

•艰苦奋斗，勤俭节约。

•发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到

的问题。

•通过完成实训任务，培养学生吃苦耐劳、严谨认真却一丝不苟的工作态度。

学习内容教学建议与说明

在静态效果添加完成后，该企业网站首页效果基本实现，在

浏览器预览发现局部瑕疵也即将修正。不过网页设计还要强

教学过程应体现“教、学、

调与用户的交互提升用户体验，并且需要一些特点的动态效

做、用”一体化原则，建立

如商品促销活动倒计时（秒杀）、网站登录模块、网页分页

完整的在线教学平台，建设

选项卡等效果，于是该企业网页设计组开始着手这些动态效

干富的教学资源，包括课程

果的设计并添加到网页中。

介绍、课程标准、课程设计、

1.制作网页个性化导航条

教学演示文档、教学教案、

・会使用Dreamweaver和HTML、CSS制作基本的横向和纵向

实训一体化任务单、实训内

导航条C

容、习题与考核内容等，更

・会使用Dreamweaver和HTML、CSS制作不等宽导航条和滑

重要的是所有的教学环节

动门导航条。

录制完整的教学视频，在重

•会将导航条添加到特定的网页页面并进行精准调整c

点难点环节录制知识技能

2.制作网页九宫图效果

拓展教学视频。由此，课程

•会使用Photoshop制作九宫图效果图片。

根据不同学校、不同教师、

•会使用HTML.CSS技术实现并应有九官图效果。会使用

不同生源的需要采取线下

HTML、CSS技术实现并应有九宫图效果。

师徒式教学、线上线下融合

3.制作个性化网页表格与表单

的翻转课堂、线上教学或混

•会使用HTML、CSS技术实现个性化网页表格。。

合式教学方法。

•会使用HTML、CSS技术实现网页表单布局与修饰。

单元考核评价说明课程考核所占权重

1.独立完成学习情境中的网页HTML页面添加静态页面效果。

2.完成自己设计网页首页（电商站点、学习站点、企业站点10%

等）的网页HTML页面代码添加静态页面效果。

拓展和探究性学习

在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以

便学生选择拓展学习，进一步提升学生技能水平。

1.学习使用表单的美化效果。

2.学习使用浮动框架美化效果。

情境六：制作“电商助农”电商网页动态效果

学时8其中：理论0学时，实践4学时，一体化2学时。

学习目标

1.掌握知识点：

•倒计时（秒杀）结构有样式设计技术；

•JavaScript代码页面嵌入方法。

•Window对象、document对象与网页加载事件的理解。

•JavaScript运算符、函数、数值类型、表达式的理解与应用。

•Math与Time对象的应用；

2.获得技能点：

•运用Dreamweaver建立秒杀（倒计时）效果HTML结构；

•运用Dreamweaver嵌入JavaScript代码。

•运用JavaScript代码编程实现倒计时（秒杀）效果。

3.思政融入点：

•发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决JJ乍中遇到

的问题。

•通过完成实训任务，培养学生吃苦耐劳、严谨认真却一丝不苟的工作态度。

•自强不息，强我中华。

•发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到

的问题。

学习内容教学建议与说明

在网页设计特别色电子商务相关网页设计中，网络广告植入教学过程应体现“教、学、

是不可或缺的，网络广告是网络营销的重要手段。常见的网做、用”一•体化原则，建立

页广告包括弹出广告、对联广告、轮播广告、侧边栏广告、完整的在线教学平台，建设

浮动广告等。因此项目组与企业广告策划相关部门联系，获丰富的教学资源，包括课程

得的广告设计的效果图片，在此基础上准备将这些广告按照介绍、课程标准、课程设计、

需要插入到页面中。教学演示文档、教学教案、

1.设计制作商品秒杀（倒计时）效果实训一体化任务单、实训内

•会使用HTML.CSS技术实现商品秒杀效果结构与外观。容、习题与考核内容等，更

•会使用Javascript的setinterval＞数学方法等技术实现重要的是所有的教学环节

商品秒杀倒计时功能。录制完整的教学视频，在重

2.制作网页选项卡效果点难点环节录制知识技能

•会使用HTML、CSS块元素及Display属性技术实现网页选拓展教学视频。由此，课程

项卡果结构与外观。根据不同学校、不同教师、

•使用Javascript的不同生源的需要采取线下

技术实现网页选项卡功能。师徒式教学、线上线下融合

3.制作网页登录模块的翻转课堂、线上教学或混

•会使用HTML、CSS技术实现网页登录模块与外观。合式教学方法。

・会使用Javascript的

技术实现网页登录模块输入验证、登录模式切换等功能。

单元考核评价说明课程考核所占权重

1.独立完成学习情境中的网页HTML页面添加动态态页面效

果“

15%

2.完成自己设计网页首页（电商站点、学习站点、企业站点

等）的网页HTML页面代码添加动态态页面效果。

拓展和探究性学习

在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以

便学生选择拓展学习，进一步提升学生技能水平。

1.学习使用Bootstrap的使用技术。

2.学习使用jQuery的使用技术。

情境七：为“电商助农”电商网页添加网络广告

学时8其中：理论0学时，实践4学时，一体化4学时。

学习目标

1.掌握知识点；

•HTML、CSS的浮动、固定定位等技术；

•CSS的display隐藏元素属性。

•Window对象、documenI对象与网页加载事件的理解。

•JavaScript运算符、函数、数值类型、表达式的理解与应用。

•setinterval方法的应用；

2.获得技能点：

•运用Dreamweaver建立弹出广告HTML结构，并用CSS进行隐藏；

・运用Dreamweaver嵌入JavaScript代码。

•运用JavaScript代码编程实现弹出广告功能和关闭效果。

3.思政融入点：

・自觉遵从网络广告法规，树立网络伦理理念。

•发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到

的问题。

学习内容教学建议与说明

在网页设计特别色电子商务相关网页设计中，网络广告植入教学过程应体现“教、学、

是不可或缺的，网络广告是网络营销的重要手段。常见的网做、用”一体化原则，建立

页广告包括弹出广告、对联广告、轮播广告、侧边栏广告、完整的在线教学平台，建设

浮动广告等V因此项目组与企业广告策划相关部门联系，获丰富的教学资源，包括课程

得的广告设计的效果图片，在此基础上准备将这些广告按照介绍、课程标准、课程设计、

需要插入到页面中。教学演示文档、教学教案、

1.制作网页弹出广告实训一体化任务单、实训内

•会使用HTML、CSS的浮动、绝对定位等技术实现弹出广告容、习题与考核内容等，更

效果结构与外观。重要的是所有的教学环节

・会使用Javascript的setlnterval、计时、事件驱动等技录制完整的教学视频，在重

术实现网页弹出广告功能。点难点环节录制I知识技能

2.制作网页对联广告拓展教学视频。由此，课程

•会使用HTML、CSS的浮动、固定定位等技术实现对联广告根据不同学校、不同教师、

效果结构与外观。不同生源的需要采取线下

•会使用Javascript.的样式编程技术实现网页对联广告功师徒式教学、线上线下融合

能。的翻转课堂、线上教学或混

3.制作网页轮播广告合式教学方法。

•会使用HTML、CSS的浮动、绝对定位等技术实现轮播广告

效果结构与外观。

•会使用Javascript的样式编程技术实现网页轮播广告功

能。

单元考核评价说明课程考核所占权重

1.独立完成学习情境中的网页HTML页面添加网络广告。

2.完成自己设计网页首页（电商站点、学习站点、企业站点15%

等）的网页HTML页面代码添加网络广告。

拓展和探究性学习

在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以

使学生选择拓展学习，进一步提升学生技能水平。

1.学习制作浮动广告，并在网页中添加。

2.学习制作边栏广告，并在网页中添加。

情境八：为“电商助农”电商网页添加网页视频播放器

学时6其中：理论0学时，实践4学时，一体化2学时。

学习目标

1.掌握知识点：

•HTMLVideo元素及相关属性。

•CSS的盒模型及相关属性的应用。

•CSS3的新属性应用。

2.获得技能点：

•运用Dreamweaver建立网页视频播放器告HTML结构，

•运用Dreamweaver和CSS进行网页视频播放器外观设计。

•运用Dreamweaver和JavaScript实现网页视频播放器基本的播放停止功能。

•运用Dreamweaver和JavaScript实现网页视频播放器实现播放进程、随机播放等功能

3.思政融入点：

・净化网络空间，自觉抵制不良网络视频。

•发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到

的问题。

学习内容教学建议与说明

随着互联网网络基础设施升级和不断普及，网

络带宽问题已经普遍解决，由此网络视频运用

也越来越广泛。网页设计中视频元素的地位越

来越高。因此绝大多数网站建设中都会植入大

教学过程应体现“教、学、做、用”一体

量视频，并在网页首页或其他页面设计自身个

化原则，建立完整的在线教学平台，建设

性化视频播放器播放相关网络视频。基于此，

丰富的教学资源，包括课程介绍、课程标

该企业的网页设计项目组准备制作个性化是视

准、谡程设计、教学演示文档、教学教案、

频播放器放置在首页中。

实训一体化任务单、实训内容、习题与考

1.网页视频播放器外观设计

核内容等，更重要的是所有的教学环节录

•会使用HTML技术实现网页视频播放器结构。

制完整的教学视频，在重点难点环节录制

•会使用CSS计数设计视频播放器外观、控制

知识技能拓展教学视频。由此，课程根据

按钮及计时进度条效果。会使用CSS计数设计

不同学校、不同教师、不同生源的需要采

视频播放器外观、控制按钮及计时进度条效果。

取线下师徒式教学、线上线下融合的翻转

2.网页视频播放器功能实现

课堂、线上教学或混合式教学方法。

•会使用JavaScript实现网页播放器的播

放、停止等基本功能。

•使用JavaScript实现网页播放器的播放进

度呈现、随机播放功能。

单元考核评价说明课程考核所占权重

1.独立完成学习情境中的网页HTML页面添加

视频播放器。

2.完成自己设计网页首页（电商站点、学习站15%

点、企业站点等）的网页HTML页面代码添加视

频播放器。

拓展和探究性学习

在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以

便学生选择拓展学习，进一步提升学生技能水平。学习浏览器对象属性和方法的使用，完

善视频播放器的功能。

情境九：对“电商助农”电商网页进行搜索引擎优化(SEO)

学时4其中：理论0学时，实践2学时，一体化2学时。

学习目标

1.掌握知识点：

・网页关键词遴选原则，长尾理论、二八法则。

・网页标题命名的基本思想。

•常用的关键词遴选与排序工具。

2.获得技能点：

•使用搜索引擎的关键词分析工具进行网页关键词遴选。

•根据网页标题命名原则优化title标记中的网页标题。

・在网页中添加Meta标签，设置Keywords属性，添加网页关键词。

•在网页中添加Meta标签，设置Description属性，添加网页描述词。

•能够写作网页软文和关键词密度合理的网页文案。

•使用strong、ins、b等标记强调文窠中关键词。

3,思政融入点：

•发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到

的问题。

•发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到

的问题。

学习内容教学建议与说明

网页设计到这一阶段，网页效果和网页功能都已经实现。但是教学过程应体现“教、

还有一个重要环节不能忽视，那就是网页的搜索引擎优化学、做、用”一体化原

(SEO)o网页本身是为用户设计的，但如果没有搜索引擎的按则，建立完整的在线教

关键词排序推荐，用户能浏览到的概率极低。基于此，该企业学平台，建设丰富的教

的网页设计组需要进行页面的搜索引擎优化工作，包括目标关学资源，包括课程介绍、

键词确定、网页标题优化、Meta优化、文案优化、网页图片优课程标准、课程设计、

化、网