网页设计与开发（HTML5+CSS3）-课程标准

《网页设计与开发》课程标准一体化课程名称网页设计与开发(或HTM5等网页类具体课程名称）基准学时120典型工作任务描述利用HTML5、CSS3开发网站，是指开发人员掌握HTML5相关标签和CSS样式的不同用法，按照HTML5和CSS3相关规则，对网站从头部、导航、主要内容区、尾部利用HTML5和CSS3知识进行布局和样式设计并添加网站相关内容，实现完成一个完整的网页。网站开发人员从网站项目负责人处接收网站模块开发任务，阅读工作任务单，明确任务要求，查阅相关技术文件，明确完成网站开发模块相关流程及规范；在负责人指导下，规范地进行网站模块布局、内容设计，CSS设计外观样式和网站各模块间的测试与兼容调试，工作过程中要具有安全意识、责任意识，自己调试合格后交付负责人进行网站模块整体验收。工作内容分析工作对象1、DreamWeaver网页制作软件/VSCode软件的学习与熟练应用2、工作过程中现场工作管理规范的遵循工具计算机，DreamWeaver网页制作软件/VSCode软件工作方法通过项目教学法实施教学，采用多媒体教学、网络教学等教学手段。组织实施方式教师实施一体化教学，学生分组合作完成。组内进行自评及互评。工作要求能设计、开发网站及对网站更新维护的职业能力。代表性工作任务任务名称任务描述工作时间（小时）“冬奥会”页面制作老师给新生各小组布置了一个任务，以“冬奥会”会主题制作一个简易网站，要求要首页，有链接的具体明细子网页，新生要根据现有教辅案例学习、实践、讨论、分析后完成这个综合任务。学生接到任务后，通过阅读任务书，明确任务要求，查阅网页制作所需的HTML5的基本结构和语法、文本控制标记、图像标记以及超链接标记知识，先学习实践小的知识和技能点，然后试着搭建基本框架，编写相关代码和页面内容，最终调试完成“冬奥会”项目相关图文混排页面。如首页的主标题和副标题标签使用是否正确，副标题特殊颜色是否有效果，图文混排效果是否实现，三个子网页是否布局合理、图文排版是否和效果图一致等。调试合格后交由负责人检查，在工作过程中遵循代码编写相关规范以及机房安全规范。5-6小时制作青少年健康教育页面某学员想要在制作网页时先搭建好网页的基本结构，再去填充相应的模块内容，因为这样会更加有条理一些。HTML5新增了一些结构元素正好可以解决这个问题，它们可以很方便地将各个主题和概念分隔开，使网页文档的结构更加清晰，更易于阅读。本项目主要利用HTML5结构元素、分组元素与页面交互元素进行网页结构的搭建，通过利用这些元素以及进行相应的属性设置，就可以制作出一个具有层次结构的网页。6-7小时制作“反诈小课堂”页面仅利用前面所学的HTML知识制作网页无法满足网页设计的需求，网页字体、颜色及更加美观的网页布局、动画等都需要使用CSS来实现，这样网页就可以实现HTML结构与CSS表现的分离，开发者在后期维护代码时也会更加便利。本项目主要利用HTML搭建网页基本框架，利用CSS样式相关字体属性美化网页文字内容，完成一个具有图文混排效果的“反诈小课堂”页面。技术人员接到任务后，通过阅读任务书，明确任务要求，查阅相关技术文件，确定任务完成的流程及标准；在规定工期内完成一个完整的网页的框架搭建与代码编写及相关调试，如CSS复合选择器的选择与相关代码编写，内容的布局及整个网页的CSS样式设计是否合理以及其他等调试。在制作过程中遵循代码编写相关规范。5-6小时制作“安全教育”页面王老师给移动互联网应用技术专业的学生安排了一个任务，将利用CSS3新增的选择器，以及前面所学的知识和技能，制作一个“安全教育”网页。学生接到任务后，通过阅读任务书，明确任务要求，查阅网页制作相关知识，如利用CSS3新增选择器相关知识点，结合关面所学知识，完成网页的制作，并在完成后进行调试是否正常运行，在完成作务过程中遵循代码编写相关规范。8小时制作“消防安全知识教育”页面学生处小刘接到主任要求，制一个本周班会主题网页：“消防安全知识教育”。小刘接到任务后，查阅相关资料及网页制作相关的盒子模型知识布局页面，同时确定任务完成流程及技术规范；在规定时间完成网页框架搭建，利用盒子模型进行CSS网页布局，盒子模型和元素的浮动与定位等；完成后进行相关调试检查，在工作过程中遵守相关代码编写规范。8小时制作“青年教育宣传”页面某青少年网站需要开发人员增加一个“青年教育宣传”页面。开发人员接到任务后，明确任务要求，查阅相关资料，确定任务完成流程及技术规范；在规定时间内完成网页框架搭建，利用无序列表与超链接等相关知识点，以及盒子模型相关知识制作该页面。要求导航点击对应导航菜单显示相关模块内容。完成后进行相关调试检查，在工作过程中遵守企业安全操作规范及代码编写规范。5-6小时制作“景点排行榜”页面某旅行社要求工作人员在官网论坛中添加一个“景点排行榜”网页。相关人员接到任务后，通过阅读任务书，明确任务要求，查阅相关资料，确定任务完成流程及技术规范；在规定工期内完成网页框架搭建，根据本项目效果可以看出，网页由一张表格构成，对表格的每行内容按单元格分别进行布局，并在表头结合表单的内容进行设计与布局。网页的样式设计包含整张表格的整体样式设计以及表格中不同单元格的样式设计，对于样式类似的行，可利用并集选择器一次性设计相关样式代码。这些内容基本上集合了盒子模型的相关属性设置以及一些字体样式的设置，是对CSS样式的一次综合利用。要求合理使用表单相关标记和属性添加相应表单元素，利用表格合理布局，完成后进行相关调试检查，在工作过程中遵守企业安全操作规范及代码编写规范。8小时制作“旋转的3D相册”页面老师给大家布置了一个任务，制作一个“旋转的3D相册”页面，要求利用CSS动画所学CSS3中的变形属性、CSS动画等知识完成工作日天气预报图文混排页面效果。学生接到任务后，通过阅读任务书，明确任务要求，查阅相关学习资料，确定任务完成流程及技术规范；在规定工期内完成网页框架搭建。要求实现盒子的立体旋转，并实现相关透视效果，旋转时盒是逐渐变大变近。完成后进行相关调试检查，在工作过程中遵守实训室安全操作规范及代码编写规范。8小时制作信息技术网站首页某IT公司安排开发人员制作一个信息技术网站首页，要求展示前研科技最新内容。相关技术人员接到任务后，明确任务要求，查阅相关资料，确定任务完成流程及技术规范；在规定工期内完成网页框架搭建，网页盒子布局与定位，素材查找与拍摄，CSS样式代码编写与调试等。要求网站布局合理美观，导航下拉式效果完成，合理利用圆角边框完成图片外观效果，网页尾部表单设计合理美观。在工作过程中遵守实训室安全操作规范及代码编写规范。9-10小时课程目标1、专业能力目标：(1)

能熟练掌握Dreamweaver应用软件制作网站及网页开发(2)

能熟练掌握DIV+CSS的方法对网页进行布局(3)能熟练掌握使用CSS的方法对网页元素进行样式设置(4)

能培养学生搜集资料、阅读资料和利用资料的能力(5)能培养具有较强的网页设计创意思维、艺术设计素质2、社会能力目标：（1）培养学生的沟通能力和协作精神（2）培养学生勤于思考、认真做事的良好作风（3）培养学生勇于创新、敬业乐业的工作作风（4）培养学生具有良好的职业道德和较强的工作责任心（5）培养学生自主学习能力和知识应用能力（6）培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心（7）训练和培养团队协作精神和共同开发网站的综合能力3、方法能力目标：（1）培养学生制作静态网页的能力（2）培养学生设计网页、网页布局的能力（3）培养学生设计网站的综合能力（4）培养学生的策划能力、色彩感悟力、结构布局能力和想象力（5）训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等（6）培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质学习内容利用HTML5制作图文混排页面：了解HTML5发展历程，基本语法，文本控制标记、图像标记、超链接标记，能够制作简单的网页。利用HTML5搭建网页结构结构元素、分组元素、交互元素、文本层次语义元素的使用。利用CSS美化网页文字CSS基础选择器的运用、CSS文本样式属性、CSS优先级利用CSS3新增选择器制作网页属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、使用CSS伪类实现超链接特效。利用盒子模型布局网页盒子模型相关属性、背景属性设置方法、渐变属性原理。利用CSS美化列表样式盒子模型、浮动与定位、CSS列表样式。利用CSS美化表格和表单样式创建表单、表单相关元素、表单样式的控制、创建表格、CSS美化表格样式。利用CSS3制作网页特效过渡的属性、变形属性，制作2D和3D转换效果，CSS动画。制作信息技术网站首页建立规范的站点、制作网站首页面。参考性学习任务序号名称学时1“冬奥会”页面制作82制作青少年健康教育页面103制作“反诈小课堂”页面84制作“安全教育”页面125制作“消防安全知识教育”页面126制作“青年教育宣传”页面87制作“景点排行榜”页面128制作“旋转的3D相册”页面129制作信息技术网站首页1411期末大作业-设计制作综合网站1612期末理论复习与测试413机动课时(根据每学期情况适当增减每个项目的动手实践补充项目部分）4教学实施建议本课程的教学主要采用项目式教学法、任务驱动式教学法，此外，针对不同的学习任务，可选用其它教学方法，如：情景教学法、小组讨论法、角色扮演法、案例教学法等。真正按照具体的职业行动，要求学生在做的过程中，随时围绕项目及任务，根据需要学习知识和技能，学会分析问题、解决问题的方法。在指导学生完成项目的过程中，通过设计引导型任务和研究型任务，配合案例引入，项目实施，学生总结的过程。课程教学要打破传统的教学方式，在充分利用现代多媒体教学、网上学习、交流沟通的基础上，采用第一课堂与第二课堂结合，以学生独立完成项目与团队协作配合完成项目这两种形式进行教学，在项目和学习任务的引导下完成专业知识学习和技能训练，任务完成后，学生需进行总结发言。教学考核课程的成绩考核由平时子项目成绩和综合项目考核成绩组成。平时子项目成绩占总成绩的70%，综合项目成绩占总成绩的30%。考核模块考核内容过程考核（70%）基本素质模块（10%）出勤情况不迟到、早退，出满勤、有事配假条课堂纪律认真听讲、记笔记、积极发言、遵守安全操作规程等作业与实训报告（20%）作业书写规范、实训报告规范、作业与实训正确率、独立思考与创新能力子项目或子任务技能实训（70%）“冬奥会”页面制作制