《网页设计与制作》课程涉及网页基础、HTML标记、CSS样式、网页布局等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。学生根据实际需要自行设计网页，建立网站。最终设计制作一个具有实用意义的漂亮网站，并上传到学习用的服务器（或互联网）上。
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。
一、明确网页设计需要学些什么
软件技能、创意表达、视觉刻画，这是网页设计师“的核心技能。网页设计是生产运营中的一个技术支撑环节，其最终的作品输出都是为企业或商业产品服务的。学会理解你的服务对象，将企业的文化价值、产品的功能属性准确传递给潜在客户，这就是网页设计的阶段性目的，也是一名好的网页设计师需要学会的东西。
二、网页设计师的工作日常
1.信息的收集整理(前期调研阶段、竞品分析、受众分析)
首先要分析理解自己的设计内容，设计初期可以先收集一些同行、或竞品相关的网页设计、或者图片素材做参考。
2.信息的归纳提炼(策划设计阶段)
把收集来的信息加以提炼，归纳整理出适合自己的网页设计的有用信息，以此来把握整体的网页设计风格及大的方向。
3.信息的视觉化表现(软件制作及执行传播阶段)
信息的视觉化表现也就是,在Photoshop软件中完成排版布局、页面的icon设计、 图片的合成处理等，以及推广banner海报的设计，然后切图交接给web前端开发。
三、网页设计的常见类型
目前，关于网页设计的常见类型及方向有：淘宝天猫类型的电商视觉设计、企业官网的设计、新品宣传、活动专题类型的网页设计、后台管控类的网页端UI设计。在日常的工作中这几种也许你都会接触到。在学习之初你还得从软件技能、排版布局、图像处理、切图输出等这些具体的点着手熟悉。
信息技术基础和图形图像处理知识
项目一：网页制作基础知识 ------- “技能成才，强国有我”页面制作
实战演练-----制作“技能成才，强国有我”页面
任务1.1：网页相关概念
任务1.2：网页相关软件
任务1.3：我的第一个网页
项目一测试题
项目一作业题
项目二：HTML语言-------"类脑计算机智能技术系统"页面制作
任务2.1：HTML图像标记
任务2.2：HTML文档头部相关标记
任务2.3：“咸阳职院”专题页制作
任务2.4：网页布局
实战演练-----制作“类脑计算机智能技术系统”页面
项目二作业题
项目二测试题
项目三：CSS样式-------“走进陕西，体味非遗文化”页面制作
任务3.1：CSS基础选择器
任务3.2：CSS字体样式属性
任务3.3：CSS文本外观属性
任务3.4：CSS复合选择器
任务3.5：CSS新增选择器
实战演练-----制作“走进陕西，体味非遗文化”页面
项目三测试题
项目三作业题
项目四：DIV模型-------“致敬逆行者”页面制作
实战演练-----制作“致敬逆行者”页面
任务4.1：盒子模型
任务4.2：边框属性
任务4.3：内外边距属性
任务4.4：背景属性
任务4.5：盒子的宽与高
任务4.6：元素类型
任务4.7：标记
任务4.8：元素转换
任务4.9：浮动float
任务4.10：元素定位
任务4.11：Z-index
任务4.12：《我和我的祖国》首页
项目四测试题
项目四作业题
项目五：常用标记-------“时代楷模 大国工匠”页面制作
任务5.1：列表标记
任务5.2：控制列表样式
任务5.3：超链接标记
任务5.4：锚点链接标记
任务5.5：伪类控制超链接
任务5.6：“穿搭速递”首页制作
实战演练-----制作“时代楷模 大国工匠”页面
项目五测试题
项目五作业题
项目六：表单-------“公益爱心志愿者协会”会员注册页面制作
任务6.1：认识表格相关标记
任务6.2：CSS控制表格样式
任务6.3：认识表单
任务6.4：input控件
任务6.5：textarea控件
任务6.6：select控件
任务6.7：CSS控制表单样式
任务6.8：“千年之恋注册”页面制作
任务6.9：新增表单控件
实战演练-----制作““公益爱心志愿者协会”会员注册页面
项目六测试题
项目六作业题
项目七：JavaScript-------“中国军魂”百叶窗页面制作
任务7.1：JavaScript简介
任务7.2：变量
任务7.3：数据类型
任务7.4：运算符
任务7.5：条件语句
任务7.6：循环语句
任务7.7：函数
实战演练-----制作“中国军魂”百叶窗页面
项目七测试题
项目七作业题
校企合作资源
第1章 认识HTML和使用DreamWeaver
第2章 HTML中表格和表单的应用
第3章 CSS样式美化网页
第4章 DIV+CSS布局
第5章 应用CSS布局网页和HTML列表
第6章 应用CSS设置链接和导航菜单
第7章 HTML中模板和框架的使用
课程思政案例
课程思政案例（一）
课程思政案例（二）
学生实训作品展
2023.12实训-故宫之旅网站
2023.12实训-乡村振兴网站
2023.12实训-敦煌文化网站
2023.12实训-海洋景点网站
2023.6实训-建党周年网站
2023.6实训-中国文化网站
2023.6实训-端午节网站
2023.6实训-保护环境网站
2023.6实训-NASA中文网站
2023.6实训-居家装修设计网站
2023.6实训-军械库网站
2023.6实训-咸阳职院网站
2023.6实训-熊猫频道网站
2023.6实训-程文化润长安网站
2023.6实训-特斯拉网站
2023.6实训-潮汕美食网站
2023.6实训-奔驰网站
2023.6实训-宠物生活馆网站
2023.6实训-火锅网站
2023.6实训-英语学习网站
2023.12实训-甜品网站
综合实训：“十三朝古都---西安”网站
任务2：“十三朝古都---西安”网站素材
任务1 ：“十三朝古都---西安”网站结构分析
1.网页设计与制作项目案例教程（第2版），电子工业出版社，2021年8月，秦凤梅 何桂兰主编
2.《网页设计与制作（HTML5+CSS3）》，西北工业大学出版社，2022年07月，课程负责人李阿红主编
3.w3school在线教程：https://www.w3school.com.cn/
4.菜鸟教程：https://www.runoob.com/