《网页设计与制作》课程涉及网页基础、HTML标记、CSS样式、网页布局等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。学生根据实际需要自行设计网页，建立网站。最终设计制作一个具有实用意义的漂亮网站，并上传到学习用的服务器（或互联网）上。

前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。

一、明确网页设计需要学些什么

软件技能、创意表达、视觉刻画，这是网页设计师“的核心技能。网页设计是生产运营中的一个技术支撑环节，其最终的作品输出都是为企业或商业产品服务的。学会理解你的服务对象，将企业的文化价值、产品的功能属性准确传递给潜在客户，这就是网页设计的阶段性目的，也是一名好的网页设计师需要学会的东西。

二、网页设计师的工作日常

1.信息的收集整理(前期调研阶段、竞品分析、受众分析)

首先要分析理解自己的设计内容，设计初期可以先收集一些同行、或竞品相关的网页设计、或者图片素材做参考。

2.信息的归纳提炼(策划设计阶段)

把收集来的信息加以提炼，归纳整理出适合自己的网页设计的有用信息，以此来把握整体的网页设计风格及大的方向。

3.信息的视觉化表现(软件制作及执行传播阶段)

信息的视觉化表现也就是,在Photoshop软件中完成排版布局、页面的icon设计、 图片的合成处理等，以及推广banner海报的设计，然后切图交接给web前端开发。

三、网页设计的常见类型

目前，关于网页设计的常见类型及方向有：淘宝天猫类型的电商视觉设计、企业官网的设计、新品宣传、活动专题类型的网页设计、后台管控类的网页端UI设计。在日常的工作中这几种也许你都会接触到。在学习之初你还得从软件技能、排版布局、图像处理、切图输出等这些具体的点着手熟悉。

（一）总体目标

   该课程通过项目引入任务驱动式的教学方法，使学生在认知和实际操作上，对网络媒体内容的主要承载物——网页，有一个整体认识。使学生掌握网页设计与制作的基本职业技能，能够制作社会企事业单位的网站，具备网站的策划、设计和制作能力。倡导学生积极参与真实项目制作，实践学真知，积累优秀作品，为就业打下必要基础。培养学生具有诚实、守信，善于沟通的团队合作能力，为从事网络媒体网页制作工作奠定基础。

（二）具体目标

 1.知识目标

（1）了解网站策划的过程步骤与文档要求；

（2）了解网页布局，进行网页前端设计理念；

（3）应用HBuilder X进行网站站点管理；

（4）应用HBuilder X编排页面总体布局；

（5）应用HBuilder X制作页面细节效果；

（6）应用HBuilder X进行DIV＋CSS排版；

（7）应用HBuilder X制作页面结构、页面脚本交互功能；

（8）应用HBuilder X链接网页与测试网站；

（9）掌握发布网站的业务能力；

（10）掌握应用HBuilder X维护网页的能力。

 2.技能目标

（1）能合理的规划网站；

（2）能合理设计网页的布局方案和美术设计方案；

（3）能规范的编写网页策划书；

（4）能熟练应用HBuilder X进行网站站点管理和初始化页面；

（5）能熟练应用HBuilder X对网页的总体结构进行排版；

（6）能熟练应用HBuilder X对网页插片和文字进行编排；

（7）能熟练应用HBuilder X制作网页的细节效果；

（8）能应用HBuilder X进行DIV+CSS结构排版；

（9）能应用HBuilder X制作页面结构和简单页面脚本交互功能；

（10）能熟练应用HBuilder X链接网页与测试网站；

（11）能应用互联网资源发布网站；

（12）能熟练应用HBuilder X维护网页。

 3.素质目标

（1）具有勤奋学习的态度，严谨求实、创新的工作作风；

（2）具有良好的心理素质和职业道德素质；

（3）具有高度责任心和良好的团队合作精神；

（4）具有一定的科学思维方式和判断分析问题的能力；

（5）具有较强的网页设计创意思维、艺术设计素质。

信息技术基础和图形图像处理知识

1.网页设计与制作项目案例教程（第2版），电子工业出版社，2021年8月，秦凤梅 何桂兰主编

2.《网页设计与制作（HTML5+CSS3）》，西北工业大学出版社，2022年07月，课程负责人李阿红主编

3.w3school在线教程：http://www.w3school.com.cn/

4.菜鸟教程：http://www.runoob.com/