课程代码：5112006
网页设计基础
Fundamentals of Web Design
学分：3    总学时：64    理论学时：40  实验学时: 24
一、课程教学目标
《网页设计基础》是软件工程专业的一门专业必修课程，涉及HTML标记、CSS样式、网页布局、JavaScript编程基础及事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史和使用方法，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业门户、电商类网站，为以后前端系列课程的学习打好基础。
随着web3.0时代的到来，网络代表的端技术、跨端技术、可视化、端智能将成为未来人机交互的主宰。JavaScript语言做为Web开发的基础，伴随着整个互联网的快速发展和传播，深度挖掘课程中所蕴含的思想价值和精神内涵，科学合理拓展本课程的广度、深度和温度，增
加本课程的知识性、人文性，提升课程的引领性、时代性和开放性，培养既有先进技术又有正确价值观的从业人员也是本课程教学的重要目标。
二、课程基本要求
通过本课程的学习，使学生达到如下知识和技能两方面目标：
（一）知识要求：
1．了解和理解网页、网站的概念。
2．掌握HTML的基本语法。
3．掌握网站制作流程。
4．熟练掌握用Dreamweaver工具软件制作网页的基本方法。
5．掌握CSS的概念和和CSS的基本语法和盒子模型及选择器
6．掌握CSS+DIV布局、美化网站。
7. 掌握JavaScript基础
8. 掌握JavaScript对象
10. 掌握JavaScript事件处理
（二）能力要求
1.能够熟练的运用Dreamweaver、Sublime、Vscode等网页编辑工具；
2.能熟练的运用各类HTML标签完成页面的结构；
3.能熟练的运用CSS完成页面美化；
4.运用CSS和DIV完成页面布局的能力；
5.运用JavaScript完成表单验证、事件处理等；
6.运用所学的网页设计课程的理论知识，进行实际网站开发的能力；
三、教材与参考书目
1.主要使用教材
范伊红,黄彩霞,李连民等.基于HTML5的网页设计及应用. 北京：电子邮电出版社,2022.2.
2.主要参考书
(1)前言科技 温谦. HTML5+CSS3+JavaScript Web开发案例教程.北京：人民邮电出版社，2022.5.
(2)赵丰年. 网页设计与制作（HTML5+CSS3+JavaScript）.北京：人民邮电出版社，2020.7.
(3)黑马程序员. JavaScript前端开发案例教程.北京：人民邮电出版社，2022.5.
四、课程主要内容
第1章  网页设计概述
教学主要内容：网页的前生与今世：互联网和网页的诞生、网页的发展、网站和网页；W
WW、URL、HTTP、Web、W3C等网页相关术语；网页的尺寸、网页的布局和设计流程等基本知识。
教学重点和难点：网页的基本元素、网页的布局网站建设流程。
思政元素：介绍网络发展史和Web3.0，引领学生了解专业前沿，展望未来。
第2章  HTML5语言
教学主要内容：HTML5概述：HTML5的发展历程、HTML5的新特性；HTML5基础：创建第一个HTML5页面、HTML5标记及属性、HTML5语法、HTML5文档结构；HTML5常用标记：文本类标签、图像标记、表格标签、列表标签、段落标签、水平线标签、浮动框架标记、多媒体标题、分组标记、交互标记；全局属性；认识Dreamweaver、Vscode等编辑工具的使用。
教学重点和难点：HTML文档标记、HTML图像标记和HTML5表格标记。
思政元素：HTML语言作为网络语言标准规范，在计算机的发展史中有着不可或缺的地位。
HTML5的诞生和成就也决定着一个时代的发展。通过讲解HTML5对网络发展的贡献，讲解科技就是生产力，激发创新意识和学习兴趣。
第3章 HTML5表单
教学主要内容：表单设计基础、表单标记：form标记、input标记、select标记、textarea标记、button标记、label标记等标记。
教学重点和难点：input标记的类型和value等属性、select标记的下拉菜单和label标记的绑定。
思政元素：不同的表单元素有不同的特性，对过不通过表单的value值、type值和验证要求，培养学生遵守规则、严谨认真的作风。
第4章  CSS基础
教学主要内容：CSS概述：CSS的发展史、CSS的特点；CSS的基本语法：CSS的样式规则、CSS的引入、CSS的基本选择器和CSS样式书写和命名。CSS设置文字样式与图像样式、CSS的继承性、层叠性等
教学重点和难点：CSS基础选择器和CSS的权重和层叠性。
思政元素：CSS选择器中蕴含丰富的哲学思想，首先提现的结构与样式分离就是现代各司其职，合作共赢的管理学思想；使用不同的选择器，引导学生要突出重点而非面面俱到。
第5章  CSS盒子模型
教学主要内容：盒子模型的概念；CSS盒子模型的相关属性：border、width、height、padding、margin、box-sizing等属性；盒子模型之间的关系：标准文档流、div元素和span元素、元素类型的相互转换、盒子模型在标准流中的定位、盒子模型的浮动与定位、z-index 空间位置；利用 CSS 设置列表、表格和表单样式：设置列表样式、设置表格样式、设置表单样式、鼠标指针特效等。
教学重点难点：盒子模型属性、元素类型相互转换和浮动与定位。
思政元素：盒子参数概念来源于生活，比如墙上整齐排列的画框，抽象出边框（border）、画框间距（margin）,画和框之间的留白（padding）。而模型来源对本质抽象后的归纳总结的表述。盒子模式使得我们在网页布局中，纷繁复杂的各个部分有机合理
的组织在一起。知识来源于生活而高于生活。
第6章  CSS高级选择器
教学主要内容：属性选择器、子元素选择器、兄弟选择器、伪类选择器和伪元素选择器
教学重点和难点：属性选择器、befor和after选择器。
思政元素：通过案例“真实与虚伪只隔一个选择器”来讲解:before 和 :after 伪元素选择器的使用，生活中存在着很多变通的方法，培养学生创新思维。
html网页设计报告总结
第7章  DIV+CSS布局
教学主要内容：工字型布局、固定布局等常见的网页布局；响应式布局、媒体查询、饰视口和响应式布局案例等。
教学重点和重点：工字型布局、固定布局、响应式布局。
思政元素：“通过河南科技大学首页”讲解响应式布局，传播校园文化，培养学生爱校情操，增强主人翁意思。
第8章 CSS过渡、转换和动画
教学主要内容：CSS过渡：transition 属性需包含的内容、实现过渡效果需满足的条件、transition 属性的分解、过渡应用案例——商品列表效果；CSS3 2D 转换：transform 属性、transform-origin 属性和2D 转换应用案例；CSS3 3D 转换：CSS3 中的 3D 坐标系、透视原理、3D 转换方法和D 转换应用案例。
教学重点和难点：过渡属性、转换的属性和动画序列等。
思政元素：通过“电子时钟”案例，告诉学生时间在默默的流逝，要珍惜时间；通过“洛阳牡丹甲天下，科大赏花正但是”案例宣传洛阳厚重的文化氛围和校园文化，培养学生爱校、爱洛阳，感受中国文化的的魅力。
第9章    JavaScript基础
教学主要内容：JavaScript简介、如何在网页中嵌入JavaScript 脚本、JavaScript数据类型、各数据类型之间的转换，变量定义的基本方法，变量的作用域，运算符的用法；用选择结构和循环结构控制动态生成网页代码的方法，异常捕获语句的用法、函数的定义、函
数的调用。
教学重点： JavaScript数据类型的种类，各数据类型之间的转换，变量定义的基本方法，变量的作用域，运算符的用法；用选择结构和循环结构控制动态生成网页代码的方法，匿名函数、可变参数的函数、嵌套函数、函数作为参数。
思政元素：通过“JavaScript：一个屌丝的逆袭”和“JavaScript大神：我们能对 JavaScript做的最好事情就是让它退役!”讲解JavaScript的发展史和应用前景，通过JavaScript的发展展示“技术的进化也是适者生存”进化论是万物都要遵守的法则。
第10章    JavaScript对象
教学主要内容：JavaScript包含的基本对象类型、Math对象、Number对象、Boolean对象、String对象、Array对象、Data对象、Object对象、Function对象、RegExp对象、ErrorUI小、window对象、location对象、navigator对象、history对象、screen对象、document对象和DOM对象；DOM节点属性和节点方法、获取节点和操作节点。
教学重点和难点：创建数组、数组对象的常用属性和方法；用户自定义对象、RegExp对象
的使用方法；节点的查和操作和原型的继承。
思政元素：原型、类、继承、多态、接口、原型和继承是面向对象语言之魂，那就是程序世界本质上只有两种东西——数据和逻辑。类是抽象的，抽象是有层次，从哲学的角度理解原型、类、继承、多态这些概念，实现学科融合，提升学生的哲学观。
第11章    JavaScript 事件处理
教学主要内容：事件模型：原始事件模型、DOM的事件模型和event对象、window事件、表单事件、键盘事件、鼠标事件和事件代理。
教学重点和难点：不同事件模型的事件绑定方法，事件对象的常用属性、常用的事件和事件代理。
思政元素：通过案例“河南科技大学首页的轮播图的实现”讲解事件流、事件模型、事件模型的默认行为讲解事件代理的机制，引入事件代理机制和我国的“举国体制”蕴含相同的哲学道理，在资源有限时，依据“要事第一”原则，集中资源办大事，“全国一盘棋，上下一条心”，讲解举国体制保证了我国了“两弹一星”、“嫦娥探月”以及“中国路、中国桥”等工程，并在“新
举国体制下”，完成十四五规划的科技强国。
五、习题或作业
在完成本课程的学习后，需要完成一个综合网站的设计，具体做法如下：
1.每人一题，每位同学根据自己的兴趣爱好或专长，确定一个网站主题，独立完成该网站的制作；
2.确定的网站主题应大小适中、内容健康、具有时代气息，根据确定的网站主题，进行收集、整理、加工网站所需要的信息；具体要求：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。