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

1、网页设计与制作课程标准课程名称网页设计与制作课程代码26033125课程类别专业课课程性质必修课课程总学时64课程学分3适用专业电子商务归属学院智能商务学院一、课程定位“网页设计与制作”是高职电子商务专业核心课程。电子商务专业人才培养目标是以习近平新时代中国特色社会主义思想为指导，具备培养理想信念坚定，德、智、体、美、劳全面发展，具有一定的科学文化水平，良好的人文素养、职业道德和创新意识，精益求精的工匠精神，较强的就业能力和可持续发展的能力，掌握本专业知识和技术技能，面向互联网和相关服务业、批发业、零售业等行业的销售人员，商务咨询服务人员等职业群，能够从事营销推广、运营管理、客户服务等工作的高

2、素质技术技能人才。电子商务专业面向岗位群有电子商务网页技术岗位群、电子商务数据分析岗位群、网络营销岗位群、跨境电商岗位群、电子商务运营岗位群等。课程“网页设计与制作”主要针对电子商务网页设计等岗位开设，主要任务是培养学生网页设计与Web前端开发能力，为实现专业人才培养目标起到支持和促进作用。本课程以现代信息技术、电子商务基础、网页前端技术（HTML&CSS）、图形图像处理等课程为先导课程，后续课程为网站（店）运营、电子商务数据分析、网络营销、Web前端设计等。二、设计思路（一）课程内容选取课程内容的选取紧紧围绕电子商务网页技术岗位群中的网页设计、Web前端开发、网站（店）美工等岗位从业人员应具

3、备的职业能力要求，融入Web前端开发职业技能等级标准，坚持立德树人的育人宗旨，践行课程思政与技能培养相结合，强化社会职业核心价值观和职业素养教育，注重标准与规范，培育劳动意识和工匠精神，将课程内容确定为网页总体规划设计、制作网页效果图、网页切片与导出HTML页面、网页HTML修正处理、添加网页静态效果、添加网页动态效果、制作网络广告等、制作网页视频播放器、网页搜索引擎优化等九个学习任务。（二）课程内容编排设计课程结构体系是根据网页设计岗位工作过程和学生的认知规律来确定学习任务顺序,按学习任务的难易程度确定课程总学时和学时分配。课程建议总学时数为52学时。三、课程目标（一）总体目标通过本课程的学

4、习，学生能以习近平新时代中国特色社会主义思想为指导，积极践行社会主义核心价值观，爱国精神和家国情怀，遵守电商法律法规，具备家国情怀、民族自信心、工匠精神和职业精神。掌握网页设计与制作专业技能，学生会应用HTML.CSS、JavaScriptPhotoshop网页布局与配色、Dreamweaver网页制作、网页搜索引擎优化、网络广告实现等方面的相关知识技能，能胜任网页设计与制作、网站（店）装修、Web前端开发视觉营销等工作任务，具备网页设计规划能力、网页布局与配色能力、静态与动态网页效果制作能力、网络广告制作能力、网店商品详情页设计能力等职业能力。（二）具体目标1.素质目标（1）具有遵守互联网法

5、律法规的意识，有图片、软件著作知识产权保护观念。（2）具有“工欲善其事，必先利其器”的工匠精神。（3）具备整体观和全局意识。（4）具有“做中学、多动手”的职业素养。（5）具备平面布局、色彩搭配等艺术审美能力。（6）具备互联网思维，追求极致，做事不留瑕疵。（7）具备终身学习的素养，能够自学和请教获得答案。（8）具备细节决定成败的意识，耐心细致，精益求精。（9）具备信息安全的意识，遵守信息安全规范。（10）具备信息资源的收集、整理、内化及应用的能力。（三）具备良好的人机交互意识，注重交互设计中融入以人为本的理念。2.知识目标（1）会说明网页文字、图片、音频、视频素材的一般格式与编码要求。（2）会描

6、述网页的一般布局及常用的布局草图设计软件。（3）会说明网页设计中像素的含义。（4）会描述网页色彩及运用方法。（5）会描述PhOtoShoP网页效果设计中图层、参考线、选取工具、切片、描边、标尺、切片设置、切片优化、Web页面导出的专用技术。（6）会描述HTML页面结构及常用HTML标签的运用方法。（7）会描述CSS的样式格式与常用的CSS样式运用方法。（8）会描述JaVaSeriPt基本编程运用及网页嵌入技术。（9）会说明导航条、九宫图、表格、表单等静态页面效果的制作逻辑与HTML和CSS设计技巧。（10）会说明倒计时（秒杀）、分页选项卡、登录模块等动态页面效果的制作逻辑与HTML、CSS、J

7、aVaSCriPt设计技巧。（三）会说明弹出广告、对联广告、轮播广告、侧边栏广告等网络广告的制作逻辑与HTML、CSS、JaVaSCriPt设计技巧。（12）会说明网页视频播放器的制作逻辑与HTML、CSSsJaVaSCriPt设计技巧。（13）会描述网页搜索引擎优化中关键词遴选、标题优化、Meta优化、网页文案优化、网页表现与行为代码外置的原理和方法。3.能力目标（1）能够正确收集整理网页文字、图片、音频、视频等素材，能够选择适合的开源开发工具。（2）能够规划网页蓝本、并能够选择软件工具绘制网页规划草图。（3）能够熟练使用PhotoShoP根据网页规划草图进行网页布局。（4）能够熟练使用Ph

8、OtoShoP进行网页整体配色和背景设计。（5）能够熟练使用PhOtoShOP植入网页图片、文字、音频、视频等元素，完成网页效果图设计。（6）能够熟练进行网页精准切片和切片设置。（7）能够将网页效果图通过优化导出为DIV+CSS布局的HTML网页。（8）能够熟练使用Dreamweaver建议Web站点和网页设计制作。（9）能够熟练使用HTML及CSS制作网页且修正导出的网页。（10）能够设计制作个性化的导航条、九宫图、表格、表单等静态网页效果。（11）能够运用HTML、CSSJaVaSCriPt设计制作个性化倒计时、分页选项卡、登录模块等动态页面效果。（12）能够在网页中添加自己设计的弹出广告

9、对联广告、轮播广告和边栏广告。（13）能够设计制作个性化网页视频播放器。（14）能够对设计制作的网页进行搜索引擎优化（SEo）4.思政目标（1）具备电商和全面建成小康社会的意识。（2）具备环保意识，绿水青山就是金山银山。（3）弘扬社会主义核心价值观和中国梦精神。（4）遵守网络法规，通过网络传播正能量。（）净化网络空间，自觉抵制不良网络视频。5.证书目标（1） 1+X网店运营推广初级证书。（2） 1+X短视频数字化运营初级证书。（3） 1+X电子商务数据分析初级证书。四、课程内容（一）学时分配序号学习单元学时分配1情境一总体规划“电商助农”网页与绘制“电商助农”网页草图22情境二制作“电商助农

10、电商网页效果图83情境三“电商助农”电商网页切片与导出“电商助农”电商HTML页面44情境四精简与优化“电商助农”电商网页代码45情境五制作“电商助农”电商网页静态效果86情境六制作“电商助农”电商网页动态特效87情境七为“电商助农”电商网页添加网络广告88情境八为“电商助农”电商网页添加网页视频播放器69情境九对“电商助农”电商网页进行搜索引擎优化（SEO）4合计52（二）思想政治教育元素梳理序号课程内容和思想政治教育元素思想政治教育元素分类1教学项目选择精准扶贫网页制作案例，教学中结合当前我国乡村振兴战略形势，进行教育帮扶和电子商务专业助农教育。在规划网站栏目及整理素材过程中，结合助农政

11、策，了解乡村丰富的农特产品，增加民族自豪感。家国情怀2网页设计制作需要绝对精准，不能有丝毫误差。由此，课堂中引入工匠精神，在工作中一丝不苟、具备细节决定成败的做人做事的理念。培养美和创新意识。美一正确的符合受众人群的审美观。创新一思想有多远，就能走多远。工匠精神3对文案内容进行再审核，加强职业守则及法律法规知识的教育，特别是遵从互联网信息服务管理办法、互联网出版管理暂行规定、计算机信息网络国际联网管理暂行规定等法律法规，保障互联网内容的合法性，传播网络正能量。规则意识4工匠精神强调工具的应用一一“工欲善其事，必先利其器”。网页效果设计与切片导出需要对PhotoShoP很熟悉。那么需要多动手、多

12、训练、多做项目，精益求精，正是这种工匠精神能促成网页设计“工匠”的出现。职业品格5纸上道来来终觉浅，绝知此事要躬行。发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到的问题。工匠精神6在九宫图设计中以社会主义核心价值观为范例，师生一起背诵、输入，并进行效果修饰，以加深印象，加强理解。世界观7净化网络空间，自觉抵制不良网络视频。规则意识8自觉遵从网络广告法规，树立网络伦理理念。依法治国9通过完成实训任务，培养学生吃苦耐劳、严谨认真和一丝不苟的工作态度。爱岗敬业10具备细节决定成败的意识，耐心细致，精益求精。树立以客户需求为中心的服务意识，不断提升服务质量。工匠精神(三)

13、内容设计情境一：总体规划“电商助农”网页与设计“电商助农”网页草图学时2其中：理论0学时，实践2学时，一体化2学时。学习目标1 .掌握知识点： 网页文案的一般要求； 网页中图片格式、大小要求； 网页中音频、视频的常用格式与要求。2 .获得技能点：网页文案写作；网页图片处理；网页音视频处理。3 .思政融入点：教学项目选择精准扶贫网页制作案例，教学中结合当前我国乡村振兴战略形势，进行教育帮扶和电子商务专业助农教育。在规划网站栏目及整理素材过程中，结合助农政策，了解乡村丰富的农特产品，增加民族自豪感。学习内容教学建议与说明某湖北电商企业拟开发一个精准扶贫产品电商展示推广网站，推广湖北贫困地区农副产品

14、和土特产品。企业已经有部分产品图片、产品介绍等信息。先准备制作一个网站首页。要求包括Logo、Banner、重点商品介绍、广告商品、网站介绍、网站导航等栏目。要求整理素材、规划页面板块并绘制网页草图。1.收集整理网页素材会根据网页设计对文本的要求对网页文案进行加工会根据网页图片的要求，对展示产品图片及相关图片进教学过程应体现“教、学、做、用”一体化原则，建立完整的在线教学平台，建设丰富的教学资源，包括课程介绍、课程标准、课程设计、教学演示文档、教学教案、实训-一体化任务单、实训内容、习题与考核内容等，更重要的是所有的教学环节录行加工处理会根据网页对其他素材的要求对网页其他素材进行加工整理。2.

15、制作网页设计草图会描述Photoshop的基本作用及与网页设计相关的参数设置方法会使用Photoshop设计制作网页规划草图制完整的教学视频，在重点难点环节录制知识技能拓展教学视频。由此，课程根据不同学校、不同教师、不同生源的需要采取线下师徒式教学、线上线下融合的翻转课堂、线上教学或混合式教学方法。单元考核评价说明课程考核所占权重1 .独立完成学习情境中的设计草图。2 .自己设计一个网页首页(电商站点、学习站点、企业站点等)，绘制页面草图。5%拓展和探究性学习在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以便学生选择拓展学习，进一步提升学生技能水平。并自学Al(I

16、IlUStratOr),使用其绘制网页草图。情境二：制作“电商助农”电商网页效果图学时8其中：理论0学时，实践4学时，一体化4学时。学习目标1 .掌握知识点： 精准参考线建立方法； 固定大小矩形选取框建立方法； 图层建立级图层分组方法。2 .获得技能点：运用Photoshop建立网页布局文档；建立精准布局参考线及固定大小选取框；Photoshop区域填充。使用Photoshop描边设置区域边框。3 .思政融入点：网页设计制作需要绝对精准，不能有丝毫误差。由此，课堂中引入工匠精神，在工作中一丝不苟、具备细节决定成败的做人做事的理念。培养美和创新意识。美一正确的符合受众人群的审美观。创新一思想有多

17、远，就能走多远。进行剪贴图层教学时，运用中国梦的内容：国家富强、民族振兴、人民幸福文字效果制作为案例。教学中通过自然融入让学生增加对中国梦的记忆和理解。进行LOgO制作教学时，选择制作环保标签，引申出环保意识教育，阐明“绿水青山就是金山银山”的重要意义。进行商品背景图片设置中包含农民田间劳动收获图片，引申出我国“艰苦奋斗、请柬节约”的光荣传统，以及现阶段推行“光盘行动”的意义。进行网页文案写作教学时，强调遵纪守法，特别是要遵从电子商务法、网络完全法、消费者权益保护法等法律法规，传播网络正能量。具备大局意识，有整体感，同时具备画龙点睛，重点突出意识。具备电子商务职业素养，养成用户至上的职业习惯。

18、学习内容教学建议与说明通过设计规划制作出网页草图后，该企业作为电子商务企业，考虑到视觉营销和网站推广因素，决定制作出网页效果图，包括网页布局、网页配色与背景设计、添加LOgo商品广告图片、植入网页文案、设计网页导航条等，最后完成网页效果图制作。1.网页布局会按照设计草图运用Photoshop参考线及矩形选取框工具进行页面布局分块。教学过程应体现“教、学、做、用”一体化原则，建立完整的在线教学平台，建设丰富的教学资源，包括课程介绍、课程标准、会按照设计草图运用Photoshop图层进行网页区域图层分块会设页面区域边框。会按照设计草图通过区域分块和图层分块完成网页总体布局和详细布局。2.网页配色

19、会根据网页设计和视觉营销的需要进行网页整体配色。 会网页效果设计的需要添加网页图片背景。 会按照网页设计的需要完成网页配色。课程设计、教学演示文档、教学教案、实训一体化任务单、实训内容、习题与考核内容等，更重要的是所有的教学环节录制完整的教学视频，在重3.网页图片元素植入与处理会设计与植入网页Logo会植入网页图片。会植入网页广告图片。4.网页文案植入与效果编排 会进行网页文案写作 会设置网页标题并设计效果 会植入网页文案变进行视觉效果编排。5.设计网页导航效果会导航条背景设计会设计制作网页导航完整并对齐会设计导航的呈现效果。点难点环节录制知识技能拓展教学视频。由此，课程根据不同学校、不同教师

20、不同生源的需要采取线下师徒式教学、线上线下融合的翻转课堂、线上教学或混合式教学方法。标考核评价说明课程考核所占权重1、课堂学习考核（包括考勤、提问、操作训练过程及完成情况）2、完成个人电子相册或光辉历程电子相册制作。10%拓展和探究性学习在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目光辉历程电子相册视频，以便学生选择拓展学习，进一步提升学生技能水平。并使用InUStratOr制作网页效果图。情境三：“电商助农”电商网页切片与导出“电商助农”电商HTML页面学时4其中：理论0学时，实践2学时，一体化2学时。学习目标1 .掌握知识点：Photoshop切片工具及选择切片工

21、具使用方法；基于图层切片使用方法；用户切片、生成切片与用户切片提升方法与应用。2 .获得技能点：运用Photoshop新建基于图层的切片”进行总体切片分块；运营Photoshop切片工具进行区域切片划分；运营Photoshop放大镜工具及智能参考向精确调整切片。3,思政融入点：工匠精神强调工具的应用一一“工欲善其事，必先利其器”。网页效果设计与切片导出需要对PhOtOShOP很熟悉。那么需要多动手、多训练、多做项目，精益求精，正是这种工匠精神能促成网页设计“工匠”的出现。具备全局观念、大局意识，磨练整体规划综合思考能力。纸上道来来终觉浅，绝知此事要躬行。发扬职业教育精神，培养自学能力和终身学习

22、的能力，能通过学习思考解决工作中遇到的问题。学习内容教学建议与说明这个效果页面转换为真实的Web页面一一HTML页面。Photoshop的切片及“存储为Web所用格式”提供了这一功能。本子项目就是完成从网页效果图到HTML网页的转换。1.划分网页切片会使用Photoshop基于图层切片技术划分网页总体切片。会使用切片工具及划分切片技术详细划分切片会通过放大工具和智能参考线精确调整切片完成网页切片。2 .网页切片参数设置会整体规划页面参数。会设置用户切片参数3 .网页切片图片优化会进行切片图像格式选择。会进行网页图像格式的优化4 .网页HTML页面导出会进行表格布局的网页页面导出。会进行DIV+

23、CSS结构的网页页面导出。教学过程应体现“教、学、做、用”一体化原则，建立完整的在线教学平台，建设丰富的教学资源，包括课程介绍、课程标准、课程设计、教学演示文档、教学教案、实训一体化任务单、实训内容、习题与考核内容等，更重要的是所有的教学环节录制完整的教学视频，在重点难点环节录制知识技能拓展教学视频。由此，课程根据不同学校、不同教师、不同生源的需要采取线下师徒式教学、线上线下融合的翻转课堂、线上教学或混合式教学方法。单元考核评价说明课程考核所占权重1、课堂学习考核（包括考勤、提问、操作训练过程及完成情况）2、自己搜集或拍摄素材，制作一个微电影。20%拓展和探究性学习在课程平台提供在线课程，在完

24、整录制全程教学视频的基础上录制更多拓展项目视频，以便学生选择拓展学习，进一步提升学生技能水平。同时，网上寻找学习资源，学习网页设计的Web标准规范。情境四：精简与优化“电商助农”电商网页代码学时4其中：理论0学时，实践2学时，一体化2学时。学习目标1.掌握知识点： 网页设计工具Dreamweaver的使用方法； 网页设计制作规范； HTML5的网页文档格式； HTML、CSS的基本结构、语法、样式。 CSS中盒模型与块元素居中方法。2 .获得技能点： 运用DreainweaVer建立WCb站点，打开导出的HTML网页； 运用Dreamweaver将打开的网页转换为HTML5网页文档； 遵循网页

25、设计制作规范合理布局站点、规范命名及代码书写，提高代码可阅读性； 运用DreanlWeaVer删除网页中冗余的代码（包括注释代码、标记中多余的属性代码）。 运用DreanIweaVer编写代码实现页面居中。3 .思政融入点：发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到的问题。对文案内容进行再审核，加强职业守则及法律法规知识的教育，特别是遵从互联网信息服务管理办法、互联网出版管理暂行规定、计算机信息网络国际联网管理暂行规定等法律法规，保障互联网内容的合法性，传播网络正能量。学习内容教学建议与说明到现在，该企业的网页设计小组已经完成了网站首页从设计效果图到网页的转换

26、然而导出的页面还不能称之为真正意义上的网页。在浏览器浏览时页面不在中间；查看网页代码时，发现有很多冗余代码；并且页面不是HTML5文档；页面的文字部分还是图片；页面的导航效果需要加强。所有上述问题需要进行修正处理，建立真正意义上的HTML网页页面，使之更符合网页设计规范要求。1.网页代码精简与整体效果优化 会使用Dreamweaver建立Web站点。 会将其他网页页面转换为HTML5格式的网页页面。 会删除网页中冗余的HTML代码以精简网页代码。 会使用CSS样式实现网页居中。2 .文字图片处理会使用HTML和CSS实现页面文字处理。3 .网页导航效果实现会使用Photoshop制作导航栏目

27、图片。会使用HTML及CSS代码完成导航效果的实现。教学过程应体现“教、学、做、用”一体化原则，建立完整的在线教学平台，建设丰富的教学资源，包括课程介绍、课程标准、课程设计、教学演示文档、教学教案、实训一体化任务单、实训内容、习题与考核内容等，更重要的是所有的教学环节录制完整的教学视频，在重点难点环节录制知识技能拓展教学视频。由此，课程根据不同学校、不同教师、不同生源的需要采取线下师徒式教学、线上线下融合的翻转课堂、线上教学或混合式教学方法。单元考核评价说明课程考核所占权重1 .独立完成学习情境中的网页HTML页面精简与优化。2 .完成自己设计网页首页（电商站点、学习站点、企业站点等）的网页H

28、TML页面代码精简与优化。5%拓展和探究性学习在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以便学生选择拓展学习，进一步提升学生技能水平。并回顾或网上学习使用HTML5+CSS3网页设计技术。情境五：制作“电商助农”电商网页静态效果学时4其中：理论O学时，实践2学时，一体化2学时。学习目标1.掌握知识点：HTML中的列表元素(olul)及特点。CSS中font、borderfloat等样式与属性值的应用。基本的横向或纵向导航条的HTML结构；基本的横向或纵向导航条的CSS样式；HTML、CSS的基本结构、语法、样式。滑动门导航条实现原理。九宫图实现原理。运用Pho

29、toshop制作九宫图图片的方法。Photoshop固定大小与样式的圆角矩形制作与设计技术，基于参考线的切片与图片导出技术。HTML中table元素的结构。CSS中针对table元素的特点2 .获得技能点：运用DreamWeaVer设计基本导航条样式；运用Photoshop制作滑动门导航条图片。运用Dreamweaver将导航条代码移植到特定页面并进行精准调整。3 .思政融入点：具有职业教育素养，多动手，做中学。具备细节决定成败的意识，耐心细致，精益求精树立以客户需求为中心的服务意识，不断提升服务质量。在九宫图设计中以社会主义核心价值观为范例，师生一起背诵、输入，并进行效果修饰,以加深印象，加

30、强理解。艰苦奋斗，勤俭节约。发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到的问题。通过完成实训任务，培养学生吃苦耐劳、严谨认真和一丝不苟的工作态度。学习内容教学建议与说明在静态效果添加完成后，该企业网站首页效果基本实现，在浏览器预览发现局部瑕疵也即将修正。不过网页设计还要强调与用户的交互提升用户体验，并且需要一些特点的动态效如商品促销活动倒计时（秒杀）、网站登录模块、网页分页选项卡等效果，于是该企业网页设计组开始着手这些动态效果的设计并添加到网页中。1 .制作网页个性化导航条会使用Dreamweaver和HTMLCSS制作基本的横向和纵向导航条。会使用Dreamw

31、eaver和HTMLCSS制作不等宽导航条和滑动门导航条。会将导航条添加到特定的网页页面并进行精准调整。2 .制作网页九宫图效果会使用Photoshop制作九宫图效果图片。会使用HTMLCSS技术实现并应有九宫图效果。会使用HTML、CSS技术实现并应有九宫图效果。3 .制作个性化网页表格与表单会使用HTML、CSS技术实现个性化网页表格。会使用HTML、CSS技术实现网页表单布局与修饰。教学过程应体现“教、学、做、用”一体化原则，建立完整的在线教学平台，建设丰富的教学资源，包括课程介绍、课程标准、课程设计、教学演示文档、教学教案、实训一体化任务单、实训内容、习题与考核内容等，更重要的是所有的

32、教学环节录制完整的教学视频，在重点难点环节录制知识技能拓展教学视频。由此，课程根据不同学校、不同教师、不同生源的需要采取线下师徒式教学、线上线下融合的翻转课堂、线上教学或混合式教学方法。单元考核评价说明课程考核所占权重1 .独立完成学习情境中的网页HTML页面添加静态页面效果。2 .完成自己设计网页首页（电商站点、学习站点、企业站点等）的网页HTML页面代码添加静态页面效果。10%拓展和探究性学习在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以便学生选择拓展学习，进一步提升学生技能水平。1 .学习使用表单的美化效果。2 .学习使用浮动框架美化效果。情境六：制作“电

33、商助农”电商网页动态效果学时8其中：理论0学时，实践4学时，一体化2学时。学习目标1 .掌握知识点： 倒计时（秒杀）结构有样式设计技术； JavaScript代码页面嵌入方法。 Window对象、document对象与网页加载事件的理解。 JavaScript运算符、函数、数值类型、表达式的理解与应用。Math与Time对象的应用；2 .获得技能点：运用DreanlWeaVer建立秒杀（倒计时）效果HTML结构；运用DreanlweaVer嵌入JavaScript代码。运用JaVaSCriPt代码编程实现倒计时（秒杀）效果。3 .思政融入点： 发扬职业教育精神，培养自学能力和终身学习的能力，能

34、通过学习思考解决工作中遇到的问题。 通过完成实训任务，培养学生吃苦耐劳、严谨认真和一丝不苟的工作态度。 自强不息，强我中华。发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到的问题。学习内容教学建议与说明在网页设计特别色电子商务相关网页设计中，网络广告植入是不可或缺的，网络广告是网络营销的重要手段。常见的网页广告包括弹出广告、对联广告、轮播广告、侧边栏广告、浮动广告等。因此项目组与企业广告策划相关部门联系，获得的广告设计的效果图片，在此基础上准备将这些广告按照教学过程应体现“教、学、做、用”一体化原则，建立完整的在线教学平台，建设丰富的教学资源，包括课程介绍、课程标准

35、课程设计、需要插入到页面中。1 .设计制作商品秒杀（倒计时）效果会使用HTML、CSS技术实现商品秒杀效果结构与外观。会使用Javascript的setinterval、数学方法等技术实现商品秒杀倒计时功能。2 .制作网页选项卡效果会使用HTML、CSS块元素及Display属性技术实现网页选项卡果结构与外观。使用Javascript的技术实现网页选项卡功能。3 .制作网页登录模块会使用HTML、CSS技术实现网页登录模块与外观。会使用Javascript的技术实现网页登录模块输入验证、登录模式切换等功能。教学演示文档、教学教案、实训一体化任务单、实训内容、习题与考核内容等，更重要的是所有的

36、教学环节录制完整的教学视频，在重点难点环节录制知识技能拓展教学视频。由此，课程根据不同学校、不同教师、不同生源的需要采取线下师徒式教学、线上线下融合的翻转课堂、线上教学或混合式教学方法。单元考核评价说明课程考核所占权重L独立完成学习情境中的网页HTML页面添加动态态页面效果。2.完成自己设计网页首页（电商站点、学习站点、企业站点等）的网页HTML页面代码添加动态态页面效果。15%拓展和探究性学习在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以便学生选择拓展学习，进一步提升学生技能水平。1 .学习使用Bootstrap的使用技术。2 .学习使用jQuery的使用技术

37、情境七：为“电商助农”电商网页添加网络广告学时8其中：理论0学时，实践4学时，一体化4学时。学习目标1.掌握知识点：HTML、CSS的浮动、固定定位等技术； CSS的display隐藏元素属性。 Window对象、document对象与网页加载事件的理解。 JavaScript运算符、函数、数值类型、表达式的理解与应用。 setinterval方法的应用；2 .获得技能点：运用Dreamweaver建立弹出广告HTML结构，并用CSS进行隐藏；运用Dreamweaver嵌入JavaScript代码。运用JavaScript代码编程实现弹出广告功能和关闭效果。3 .思政融入点：自觉遵从网络广告

38、法规，树立网络伦理理念。发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到的问题。学习内容教学建议与说明在网页设计特别色电子商务相关网页设计中，网络广告植入是不可或缺的，网络广告是网络营销的重要手段。常见的网页广告包括弹出广告、对联广告、轮播广告、侧边栏广告、浮动广告等。因此项目组与企业广告策划相关部门联系，获得的广告设计的效果图片，在此基础上准备将这些广告按照需要插入到页面中。1.制作网页弹出广告会使用HTML、CSS的浮动、绝对定位等技术实现弹出广告效果结构与外观。会使用Javascript的setIntervals计时、事件驱动等技术实现网页弹出广告功能。2.制

39、作网页对联广告会使用HTML、CSS的浮动、固定定位等技术实现对联广告效果结构与外观。会使用Javascript的样式编程技术实现网页对联广告功能。教学过程应体现“教、学、做、用”一体化原则，建立完整的在线教学平台，建设丰富的教学资源，包括课程介绍、课程标准、课程设计、教学演示文档、教学教案、实训一体化任务单、实训内容、习题与考核内容等，更重要的是所有的教学环节录制完整的教学视频，在重点难点环节录制知识技能拓展教学视频。由此，课程根据不同学校、不同教师、不同生源的需要采取线下师徒式教学、线上线下融合的翻转课堂、线上教学或混3.制作网页轮播广告会使用HTML、CSS的浮动、绝对定位等技术实现轮播

40、广告效果结构与外观。会使用Javascript的样式编程技术实现网页轮播广告功能。合式教学方法。单元考核评价说明课程考核所占权直1 .独立完成学习情境中的网页HTML页面添加网络广告。2 .完成自己设计网页首页（电商站点、学习站点、企业站点等）的网页HTML页面代码添加网络广告。15%拓展和探究性学习在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以便学生选择拓展学习，进一步提升学生技能水平。1.学习制作浮动广告，并在网页中添加。2.学习制作边栏广告，并在网页中添加。情境八：为“电商助农”电商网页添加网页视频播放器学时6其中：理论0学时，实践4学时，一体化2学时。学

41、习目标1.掌握知识点：HTMLVideo元素及相关属性。CSS的盒模型及相关属性的应用。CSS3的新属性应用。2.获得技能点：运用Dreamweaver建立网页视频播放器告HTML结构，运用Dreamweaver和CSS进行网页视频播放器外观设计。运用Dreamweaver和JavaScript实现网页视频播放器基本的播放停止功能。运用Dreamweaver和JavaScript实现网页视频播放器实现播放进程、随机播放等功能3.思政融入点：净化网络空间，自觉抵制不良网络视频。发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到的问题。学习内容教学建议与说明随着互联网网络

42、基础设施升级和不断普及，网络带宽问题已经普遍解决，由此网络视频运用也越来越广泛。网页设计中视频元素的地位越来越高。因此绝大多数网站建设中都会植入大量视频，并在网页首页或其他页面设计自身个性化视频播放器播放相关网络视频。基于此，该企业的网页设计项目组准备制作个性化是视频播放器放置在首页中。1 .网页视频播放器外观设计会使用HTML技术实现网页视频播放器结构。会使用CSS计数设计视频播放器外观、控制按钮及计时进度条效果。会使用CSS计数设计视频播放器外观、控制按钮及计时进度条效果。2 .网页视频播放器功能实现会使用JaVaSeriPt实现网页播放器的播放、停止等基本功能。使用JavaScript实

43、现网页播放器的播放进度呈现、随机播放功能。教学过程应体现“教、学、做、用”一体化原则，建立完整的在线教学平台，建设丰富的教学资源，包括课程介绍、课程标准、课程设计、教学演示文档、教学教案、实训一体化任务单、实训内容、习题与考核内容等，更重要的是所有的教学环节录制完整的教学视频，在重点难点环节录制知识技能拓展教学视频。由此，课程根据不同学校、不同教师、不同生源的需要采取线下师徒式教学、线上线下融合的翻转课堂、线上教学或混合式教学方法。单元考核评价说明课程考核所占权重L独立完成学习情境中的网页HTML页面添加视频播放器。2.完成自己设计网页首页（电商站点、学习站点、企业站点等）的网页HTML页面代

44、码添加视频播放器。15%拓展和探究性学习在课程平台提供在线课程，在完整录制全程教学视频的基础上录制更多拓展项目视频，以便学生选择拓展学习，进一步提升学生技能水平。学习浏览器对象属性和方法的使用，完善视频播放器的功能。情境九：对“电商助农”电商网页进行搜索引擎优化(SEO)学时4其中：理论0学时，实践2学时，一体化2学时。学习目标1.掌握知识点： 网页关键词遴选原则，长尾理论、二八法则。 网页标题命名的基本思想。 常用的关键词遴选与排序工具。2 .获得技能点： 使用搜索引擎的关键词分析工具进行网页关键词遴选。 根据网页标题命名原则优化title标记中的网页标题。 在网页中添加Meta标签，设置K

45、eyWordS属性，添加网页关键词。 在网页中添加Meta标签，设置Description属性，添加网页描述词。 能够写作网页软文和关键词密度合理的网页文案。 使用StrOng、ins、b等标记强调文案中关键词。3 .思政融入点：发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到的问题。发扬职业教育精神，培养自学能力和终身学习的能力，能通过学习思考解决工作中遇到的问题。学习内容教学建议与说明网页设计到这一阶段，网页效果和网页功能都已经实现。但是还有一个重要环节不能忽视，那就是网页的搜索引擎优化(SEO)o网页本身是为用户设计的，但如果没有搜索引擎的按关键词排序推荐，用户能浏览到的概率极低。基于此，该企业的网页设计组需要进行页面的搜索引擎优化工作，包括目标关键词确定、网页标题优化、Meta优化、文案优化、网页图片优化、网页样式和程序代码外置等，力求目标关键词在搜索引擎相应关键词搜索列表中处于靠前的位置。教学过程应体现“教、学、做、用”一体化原贝h建立完整的在线教学平台，建设丰富的教学资源，包括课程介绍、课程标准、课程设计、教学演示文档、教学教案、实训一体化任务单、L网页标题S