《网页设计与制作》本科课程教学大纲
一、课程基本信息
课程名称
（中文）网页设计与制作
（英文）WebDesignAndProduction
课程代码
2030527
课程学分
2.0
课程学时
32
理论学时
16
实践学时
开课学院
新闻传播学院
适用专业与年级
网络与新媒体专业
大二学生
课程类别与性质
专业选修
考核方式
考查
选用教材
是否为
马工程教材
否
先修课程
《平面设计》、《图像处理》、《计算机应用基础》
课程简介
一、目的
网页设计与制作课程的研究对象主要包括网页的基本构成元素、设计原则、制作技术等方面。具体来说，这门课程将涵盖以下内容：
网页的基本构成元素：包括文字、图片、音频、视频等多媒体元素，以及超链接、表单等交互元素。
网页设计原则：包括用户体验、可访问性、可维护性等方面的设计原则，以确保网页具有良好的可用性和易用性。
网页制作技术：包括HTML、CSS、jQueryMobile等前端技术，以及后端技术和数据库技术等，以实现网页的制作和发布。
课程设计与教学方法：
网页设计与制作课程的内容将涵盖从基础知识到实践应用的各个方面。具体包括：
网页设计基础：介绍网页设计的基本概念、原则和流程，帮助学生建立正确的网页设计思维。了解WEB站点的工作原理及开发所需的软件知识；
HTML与CSS基础：教授HTML和CSS的基本语法和用法，使学生能够初步掌握网页的结构和样式设计，引入“页面代码”网页制作方法；
jQueryMobile基础开发技术：介绍jQueryMobile的基本用法，以及如何在网页中实现网页布局、交互、特效等功能的制作方法。
网页制作实战：通过一系列的实际项目，学生能掌握使用Dreamweaver软件并将所学知识应用于实践中，能在网页中插入图像、表格、声音、多媒体信息；提高他们的动手能力和解决问题的能力。
课程思政教学理念：
在网页设计与制作课程中融入思政元素，旨在引导学生树立正确的价值观和网络道德观念。具体来说，课程将强调以下几点：
网络道德与法规：教授学生在设计和制作网页时应遵守的道德规范和法律法规，引导他们树立正确的网络道德观念。
创新意识与创业精神：培养学生的创新意识和创业精神，鼓励他们在网页设计和制作中勇于尝试新的理念和技术，为互联网行业的发展做出贡献。
三、预期成果
通过网页设计与制作课程的学习，学生将获得以下增值性学习成果：掌握网页设计和制作的基本技能，能够独立完成简单的网页设计和制作任务。
提高创新思维和审美能力，能够设计出具有创意和美感的网页作品。增强实践能力和解决问题的能力，能够在实践中不断积累经验和提升技能。培养团队合作精神和沟通能力，能够与团队成员协作完成复杂的网页设计和制作项目。
对学生成长成才、职业发展的功能与作用：
网页设计与制作课程对学生的成长成才和职业发展具有重要的作用。具体来说：提升学生的就业竞争力：掌握网页设计和制作技能的学生在求职市场上将更具竞争力，能够更容易地获得心仪的职位。拓展学生的职业发展道路：网页设计和制作技能不仅适用于互联网行业，也适用于其他行业，如媒体、教育、金融等。因此，这门课程将为学生拓展更广阔的职业发展空间。
培养学生的终身学习能力：随着互联网技术的不断发展，网页设计和制作技能也将不断更新和升级。通过这门课程的学习，学生将养成终身学习的习惯和能力，不断适应行业发展的需求。
选课建议与学习要求
选课建议：本课程适合网络与新媒体专业学生大二学习。
学习要求：学生应熟练掌握基本的计算机操作技能，如Windows操作系统、基本的办公软件等。了解互联网的基本概念，如IP地址、域名、浏览器等。学生应通过实际操作和项目实践，不断提升自己的网页设计和制作能力。能够独立完成简单的网页设计和制作任务，如静态网页的制作、简单的动态效果实现等。在实践中不断积累经验，学会解决实际问题中遇到的困难和挑战。
大纲编写人
（签名）
2023.12
专业负责人
学院负责人
二、课程目标与毕业要求
（一）课程目标
类型
序号
内容
知识目标
1
2
技能目标
3
4
能够独立进行网页的布局、样式设计和交互实现。根据需求和设计规范，进行网页的规划和设计，制作出符合要求的网页作品。
5
掌握移动设备jQueryMobile页面开发技术。包括表单设计、网页UI、团队协作、网页交互等，能够参与实际的网页设计项目。
素养目标
(含课程思政目标)
6
（二）课程支撑的毕业要求
LO1品德修养：拥护中国共产党的领导，坚定理想信念，自觉涵养和积极弘扬社会主义核心价值观，增强政治认同、厚植家国情怀、遵守法律法规、传承雷锋精神，践行“感恩、回报、爱心、责任”八字校训，积极服务他人、服务社会、诚信尽责、爱岗敬业。
①爱党爱国，坚决拥护党的领导，热爱祖国的大好河山、悠久历史、灿烂文化，自觉维护民族利益和国家尊严。
LO2专业能力：具有人文科学素养，具备从事某项工作或专业的理论知识、实践能力。
①具有专业所需的人文科学素养；
②新媒体内容生产所必备的，以马克思主义新闻观为指导的职业素养；
④利用新媒体工具传播文字、图片、音频、视频和图表的技能技法。
LO6协同创新：同群体保持良好的合作关系，做集体中的积极成员，善于自我管理和团队管理；善于从多个维度思考问题，利用自己的知识与实践来提出新设想。
④了解行业前沿知识技术。
LO8国际视野：具有基本的外语表达沟通能力与跨文化理解能力，有国际竞争与合作的意识。
①具备外语表达沟通能力，达到本专业的要求。
（三）毕业要求与课程目标的关系
毕业要求
指标点
支撑度
课程目标
对指标点的贡献度
LO1
①
M
100%
LO2
①②
H
3.能够运用相应设计软件进行实际操作，包括网页排版、网页配色等。
50%
4.能够独立进行网页的布局、样式设计和交互实现。根据需求和设计规范，进行网页的规划和设计，制作出符合要求的网页作品。
40%
④
5.掌握网页设计的实践技能，包括网页UI、团队协作、用户调研等，能够参与实际的网页设计项目。
10%
LO6
1.掌握网页设计的基本概念、原理和流程，了解网页设计的历史发展和未来趋势。
LO8
三、课程内容与教学设计
（一）各教学单元预期学习成果与教学内容
第一章网页设计基础与DreamweaverCC基础
教学内容：
本章重点：
1.熟练掌握DreamweaverCC操作界面。
2.掌握站点建设与管理的基本操作。
本章难点：
1.HTML语言的运用
2.站点的创建与管理
第二章页面与文本
2.1页面属性
2.2文本属性
2.3无序列表和有序列表
1.掌握文本分段与换行方法；
2.掌握页面边距和页面属性设置；
3.掌握文本属性的设置及项目列表的设置。
1.文本分段与换行的不同方法。
第三章图像、多媒体和表格
3.1图像插入
3.2HTML5网页多媒体
3.3表格简单操作
3.4表格排版
3.5表格应用
1.掌握插入图像的方法；
2.掌握网页中多媒体运用的方法和技巧；
3.表格属性；
4.表格布局。
1.HTML5网页多媒体运用；
2.运用表格实现页面布局。
第四章超链接
4.1超链接的概念与路径知识
4.2文本超链接
4.3图像超链接
4.4热点链接
4.5锚点链接
4.6链接管理
1.超链接的概念与路径知识
2.文本超链接
3.图像超链接
4.热点链接
5.锚点超链接
6.链接管理
1.不同热点工具运用产生的不同热点链接效果
第五章CSS样式
5.1CSS样式
5.2CSS样式设计器
5.4CSS过渡效果
5.5CSS动画
本章重点：熟悉CSS设计器属性面板
本章难点：创建新的CSS规则
第六章CSS+Div布局
6.1盒子模型
6.2布局方法
6.3“上中下”布局
6.4“左中右”布局
1.CSS样式种类
2.熟练掌握DIV布局页面
本章难点：DIV布局
第七章行为
教学内容:
7.1行为
7.2制作图像特效
7.3改变属性
7.4启用浏览器窗口
1．行为基本概念；
2．行为的类别；
本章难点：行为动作和事件的联合运用。
第八章模板和库
8.1模板
8.2库
1.了解模板和库的作用；
2.熟练掌握库的创建和管理的方法和技巧；
3.掌握模板运用的方法。
本章难点：库的创建和管理。
第九章表单及jQueryUI
9.1表单
9.2jQueryUI
1.熟练掌握表单创建的方法。
2.熟练掌握jQueryUI互动方法。
本章难点：jQueryUI的互动设置
第十章jQueryMobile
10.1jQueryMobile概述
10.2使用jQueryMobile
10.3jQueryMobile应用
（二）教学单元对课程目标的支撑关系
教学单元
7
8
9
√
（三）课程教学方法与学时分配
教与学方式
学时分配
理论
实践
小计
启发式+案例分析+课堂讨论
课堂讨论
启发式+案例操作演示+课堂课后实操练习
练习评价
合计
（四）课内实验项目与基本要求
实验项目名称
目标要求与主要内容
实验时数
实验类型
网站设计
目标：掌握网站基本元素设计
内容：Logo设计、banner设计、页面设计
①演示型
③设计型
主页制作
目标：掌握网站布局以及主页各元素设计
内容：主页面切图、前期工作、主页布局分析、header区域制作、导航栏区域制作、banner区域制作、内容区域制作、footer区域制作
④综合型
子页面制作、页面超链接设置
目标：掌握网站子页面布局和各元素设计以及优化。
内容：子页面切图、制作子页面模板、新建子页面、页面超链接设置、页面动态效果完善
实验类型：①演示型②验证型③设计型④综合型
四、课程思政教学设计
1.给学生解释URL时，以本校的网址为例，让学生了解域名各部分的含义
2.讲解网页各组成元素时，以学校网站为例，并告知学生可以在网上查看学校很多新闻，教学周历等等，让学生充分了解学校网站的作用。
3.讲解无序列表
- 、
4.在实训练习当中，要求学生制作完成个人网页。
总之，课堂案例以及练习案例多结合时尚传播专业培养目标以及结合中国传统文化和革命历史，帮助学生热爱本专业，更好地学习中国传统文化知识，构建爱党爱国的理想信念，课程思政与教学内容相结合，激发学生的民族自豪感和责任感。