《网页设计》教学大纲

《网页设计》教学大纲适用范围：202X版本科人才培养方案课程代码：09130391课程性质：专业必修课学分：2.5学分学时：40学时（理论24学时，上机16学时）先修课程：信息处理技术后续课程：无适用专业：跨境电子商务开课单位：经济学院一、课程说明《网页设计》是跨境电子商务专业的一门专业必修课。本课程以Web基本概念和Web标准为基准点、通过对Web前端主流开发技术的学习和研究，让学生理解和掌握HTML基本语法格式、HTML5新增元素、CSS基础知识、CSS3的相关知识，熟悉W3C规范，理解HTML5、CSS3的语法规则，掌握常用的Web页面布局技术，理解并能够应用HTML5+CSS3进行页面排版布局，最终能够综合使用所学技术编写符合标准的Web页面。二、课程目标通过本课程的学习，使学生达到如下目标：课程目标1：了解Web前端开发技术的相关概念、设计思想、开发技术及发展趋势；理解Web前端页面设计的基本理论和排版原则、核心知识点等；掌握HTML5、CSS3语法规则、盒模型、HTML5+CSS3排版布局的基础知识。课程目标2：能够获取专业前沿知识、技能，有自主学习、可持续发展及相关创新能力；能够熟练运用Web前端开发技术，能够借助合适的软件工具，完成Web前端页面设计与制作。课程目标3：能够清晰表达网页的设计思路、方案及效果等，并能与同行及公众进行沟通和交流；具有基本的审美意识和审美观，能够根据实际需求选择合适的网页色彩；能够在网页设计制作中坚持细致耐心的工作态度，具有精益求精的工匠精神。三、课程目标与毕业要求《网页设计》课程教学目标对跨境电子商务专业毕业要求的支撑见表1。毕业要求指标点课程目标支撑强度1.学科专业知识1.2掌握计算机科学与技术相关知识，并能将其应用于解决跨境电子商务相关问题。课程目标1：了解Web前端开发技术的相关概念、设计思想、开发技术及发展趋势；理解Web前端页面设计的基本理论和排版原则、核心知识点等；掌握HTML5、CSS3语法规则、盒模型、HTML5+CSS3排版布局的基础知识。M5.使用现代工具5.1了解专业常用的信息技术工具、专业软件的使用原理和方法，并理解其局限性。课程目标2：能够获取专业前沿知识、技能，有自主学习、可持续发展及相关创新能力；能够熟练运用Web前端开发技术，能够借助合适的软件工具，完成Web前端页面设计与制作。M5.2能够选择与使用恰当的工具和软件，对跨境电商市场规模、产品价格、销售数据及产品表达等进行分析、计算与设计。课程目标2：能够获取专业前沿知识、技能，有自主学习、可持续发展及相关创新能力；能够熟练运用Web前端开发技术，能够借助合适的软件工具，完成Web前端页面设计与制作。课程目标3：能够清晰表达网页的设计思路、方案及效果等，并能与同行及公众进行沟通和交流；具有基本的审美意识和审美观，能够根据实际需求选择合适的网页色彩；能够在网页设计制作中坚持细致耐心的工作态度，具有精益求精的工匠精神。H注：表中“H（高）、M（中）”表示课程与相关毕业要求的关联度。四、教学内容、基本要求与学时分配1.理论部分理论部分的教学内容、基本要求与学时分配见表2。表2教学内容、基本要求与学时分配教学内容教学要求，教学重点难点理论学时上机学时对应的课程目标1.网页设计概述1.1网页的发展1.2网页设计基础知识1.3网站设计流程1.4web开发工具的选用教学要求：使学生了解web工作原理、常用的web浏览器；掌握网页设计的相关概念；了解网站开发流程；熟悉Web设计的原则、网站结构规划的原则；了解网页布局设计类型、布局设计元素、布局设计技术；了解web开发工具的选用。重点：网页设计基础知识、开发工具的选用。难点：网页设计基础知识。21、3HTML5语言HTML5简介HTML5文档基础结构HTML5语法规则教学要求：使学生了解HTML，各版本文档结构的不同点；掌握HTML标记语法、元素的嵌套。重点：HTML文档结构、HTML5语法规则。难点：HTML语法规则。21、23.HTML常用标记3.1HTML文本标记3.2列表、表格和框架3.3图像和超链接教学要求：使学生掌握HTML文本标记的作用，牢记各个标签的语法格式；掌握行内元素与块级元素的区别，了解他们之间的相互转换方法；掌握超链接的相关知识，会制作三种不同形式的超链接；掌握三种列表的语法规则，会用表格元素绘制表格。重点：HTML文本标记的作用；标记规则；各个标签的语法格式。难点：行内元素与块级元素的区别；超链接的使用；相对路径与绝对路径；列表的嵌套；表格标签的语法与属性。421、2、34.HTML表单4.1表单设计基础4.2表单标记教学要求：使学生了解表单的作用；熟悉并掌握表单标记和常用表单元素的标记；掌握input标记的类型；熟悉并掌握表单的常用属性。重点：表单标记规则；各个标签的语法格式。难点：input标记的类型和value等属性；select标记的下拉菜单和label标记的绑定。221、2、35.CSS基础5.1CSS概述5.2CSS语法及规则5.3CSS引用方法5.4CSS选择器教学要求：使学生熟练掌握什么是CSS、它的主要作用，它与HTML之间的关系；熟练掌握CSS样式表的三种方式，样式的优先级；掌握CSS各种基础选择器的使用方法，会根据需求选择合适的选择器；重点：CSS语法规则；基础选择器；难点：优先级；CSS选择器。421、2、36.使用CSS设置样式6.1设置背景样式6.2设置文本样式6.3设置列表、表格样式教学要求：使学生熟练掌握使用CSS背景样式、设置文本样式、列表样式、表格样式；重点：设置文本样式、背景样式、列表样式；难点：设置列表样式。227.盒子模型7.1盒子模型概念7.2盒子模型相关属性7.3盒子模型之间的关系7.4浮动和定位7.5网页布局教学要求：使学生熟练掌握盒子模型的概念和属性、掌握浮动和定位的方法；会综合运用CSS知识对网页元素进行排版布局、美化修饰。重点：盒子模型的相关属性；浮动和定位。难点：浮动和定位661、2、38.网页多媒体的实现8.1HTML5音频和视频8.2CSS动画设计教学要求：使学生掌握web页面中插入音视频的方法，能控制音视频的播放；掌握CSS3中新增的元素和属性；了解什么叫做过渡，知道过渡的属性、时间、延迟和相关函数；了解CSS3动画的制作原理、动画类型，能够制作简单动画。重点：CSS3新增元素；音视频的插入、属性的设置。难点：CSS3复杂选择器、动画、2D和3D转换、过渡效果。221、2、3合计24162.上机部分上机部分的教学内容、基本要求与学时分配见表3。表3上机项目、上机内容与学时上机项目上机内容和要求上机学时对应的课程目标1.用HTML常用标签和语法编辑网页上机内容：用HTML常用标签和语法编辑网页。上机要求：掌握HTML文本标记的作用，牢记各个标签的语法格式；掌握行内元素与块级元素的区别，了解他们之间的相互转换方法；掌握超链接的相关知识，会制作三种不同形式的超链接；掌握三种列表的语法规则，会用表格元素绘制表格；掌握表单标签各个元素的用法，会使用HTML5新增的表单元素制作表单。422.使用CSS美化网页上机内容：使用CSS美化网页。上机要求：熟练掌握CSS样式表的三种方式，样式的优先级；掌握CSS各种基础选择器的使用方法，会根据需求选择合适的选择器；会综合运用CSS知识对网页元素进行美化修饰。423.使用DIV+CSS布局网页上机内容：使用DIV+CSS布局网页。上机要求：熟练掌握盒子模型的概念和属性、掌握浮动和定位的方法，会使用盒子模型进行排版布局；会综合运用CSS知识对网页元素进行排版布局、美化修饰。624.使用网页多媒体技术丰富网页上机内容：网页中插入音视频、动画等。上机要求：掌握web页面中插入音视频的方法，能控制音视频的播放；掌握CSS3中新增的元素和属性；了解什么叫做过渡，理解过渡的属性、时间、延迟和相关函数；了解CSS3动画的制作原理、动画类型，能够制作简单动画。22合计16五、教学方法及手段本课程讲练结合，采用启发式、任务驱动式教学和案例教学等，配上视频资源共享、上机实践等教学手段完成课程教学任务和相关能力的培养。学生比较全面地理解web网页设计原理，在掌握HTML、CSS标签与语法基础上，具有进行web网页设计和优化的初步能力。在上机实践环节中，通过任务驱动式教学结合专业内容培养学生网页设计的基本知识和技能。培养学生自主学习能力、实际动手能力，激发学生的创新思维。六、课程资源1.推荐教材：（1）范伊红.基于HTML5的网页设计及应用（第2版）[M].北京:电子工业出版社,2022.（2）朱金华.网页设计与制作[M].北京:机械工业出版社,2021.2.参考书：（1）秦凤梅,何桂兰.网页设计与制作项目案例教程(第2版)[M].北京:电子工业出版社.2021.10.（2）黑马程序员.网页设计与制作（HTML+CSS）[M].北京:\o"中国铁道出版社有限公司"中国铁道出版社有限公司，2021.（3）未来科技.HTML5+CSS3从入门到精通[M].北京:中国水利水电出版社，2018.3.期刊：（1）商业经济研究.中国商业经济协会.（2）中国商论.中国商业联合会.（3）JournalofBusinessResearch.ElsevierBV.（4）管理科学与工程.汉斯出版社.（5）计算机学报.中国计算机学会;中国科学院计算技术研究所.4.网络资源：（1）WEB技术教程：/（2）万维网联盟:/（3）菜鸟教程：/（4）网易公开课：/special/opencourse/designfortheweb.html（5）网页设计与制作精品课程：/jxdg.htm七、课程考核对课程目标的支撑课程成绩由过程性考核成绩和期末考核成绩两部分构成，具体考核/评价细则及对课程目标的支撑关系见表4。表4课程考核对课程目标的支撑考核环节占比考核/评价细则课程目标123过程性考核课堂表现15（1）根据课堂出勤情况和课堂回答问题情况进行考核，满分100分。（2）以平时考核成绩乘以其在总评成绩中所占的比例计入课程总评成绩。√√√762上机作业20（1）根据每次上机任务完成情况和作品质量单独评分，满分100分。（2）每次上机单独评分，取各次成绩的平均值作为此环节的最终成绩。（3）以上机成绩乘以其在总评成绩中所占的比例计入课程总评成绩。√√√8111小组任务5主要考核学生对所学知识点的复习、理解和掌握程度，以及团队的分工合作，满分100分。每次小组任务单独评分，取各次成绩的平均值作为此环节的最终成绩。（3）以小组任务成绩乘以其在总评成绩中所占的比例计入课程总评成绩。√√√442章节测试10（1）根据线上单元测试题完成情况进行考核，满分100分。（2）以章节测试考核成绩乘以其在总评成绩中所占的比例计入课程总评成绩。221期末考核50（1）总成绩100分，以期末成绩乘以其在总评成绩中所占的比例计入课程总评成绩。（2）主要考核HTML、CSS的标签、语法在网页设计和制作中的运用。（3）考核题型为：综合设计与制作网页。√√√23225合计：100分444511八、考核与成绩评定1.考核方式及成绩评定考核方式：本课程主要以课堂表现、上机作业、小组任务、章节测试、期末考核等方式进行考核评价。考核基本要求：考核总成绩由期末考核成绩和过程性考核成绩组成。其中：期末考核成绩为100分（权重50%），试题类型为综合设计与制作网页；课堂表现、上机作业、小组任务、章节测试等过程性考核成绩为100分（权重50%）；过程性考核和考试试题分值分配应与教学大纲各章节的学时基本成比例。2.过程性考核成绩的标准过程性考核方式重点考核内容、评价标准、所占比重见表5。表5过程性考核方式评价标准考核方式所占比重(%)100>x≥9090>x≥8080>x≥7070>x≥60x<60课堂表现30按时签到，积极参与教学活动，踊跃回答问题，准确率大于90%。按时签到，积极参与教学活动，回答问题准确率大于80%。不能按时签到，不积极参与教学活动，回答问题准确率大于70%。不能按时签到，不积极参与教学活动。回答问题准确率大于60%。不能按时签到，偶尔参与教学活动。回答问题准确率小于60%。上机作业40遵规守纪，能够完成每次上机任务，网页设计制作效果非常好。遵规守纪，能够完成每次上机任务，网页设计制作较好。遵规守纪，没有完成上机任务次数2次以内，网页设计制