《网页设计与制作》课程教学大纲

课程名称

（中文）网页设计与制作

（英文）Web Design And Production

课程代码

2030527

课程学分

2.0

课程学时

32

理论学时

16

实践学时

16

开课学院

新闻传播学院

适用专业与年级

网络与新媒体专业

大二学生

课程类别与性质

专业选修

考核方式

考查

选用教材

1. 《网页设计与制作Dreamweaver CC标准教程(微课版)(第4版)》 修毅、洪颖、邵熹雯编著 北京 人民邮电出版社，2023

是否为

马工程教材

否

先修课程

《平面设计》、《图像处理》、《计算机应用基础》

课程简介

一、目的

2. 背景与意义：

3. 随着互联网的飞速发展，网页作为信息传递与交互的重要载体，在日常生活中扮演着越来越重要的角色。从新闻浏览到在线购物，从社交娱乐到工作学习，网页已经成为人们获取信息、沟通交流的重要平台。因此，掌握网页设计与制作技能，对于现代社会的个人和组织而言，都显得尤为重要。

4. 网页设计与制作课程的开设，旨在培养学生具备网页设计和制作的基本能力，以满足社会对网页设计与制作人才的需求。同时，这门课程也有助于提高学生的创新思维、审美能力和实践能力，为他们的全面发展打下坚实基础。

5. 必要性：

6. 在数字化时代，网页设计与制作已经成为许多行业不可或缺的技能。无论是从事互联网行业的专业人士，还是其他行业的人员，都需要具备一定的网页设计与制作能力，以适应行业发展的需要。此外，随着自媒体和社交平台的兴起，个人也需要掌握网页设计与制作技能，以展示自我、分享知识和经验。

7. 因此，开设网页设计与制作课程是十分必要的，它不仅有助于提高学生的专业素养和就业竞争力，也有助于推动社会的数字化进程。

8. 作用与地位：

9. 在计算机专业或相关专业的课程体系中，网页设计与制作课程通常作为基础或核心课程之一，为后续的专业课程提供支撑和铺垫。这门课程的学习将为学生打下坚实的网页设计与制作基础，帮助他们更好地理解和掌握后续的专业知识。

10. 同时，网页设计与制作课程在整个课程体系中也具有重要的地位。它不仅关乎学生的专业素养和技能培养，更关乎学生的综合素质和未来发展。通过这门课程的学习，学生将能够更好地适应社会发展的需求，实现自我价值和社会价值的统一。

    • 二、内容

1. 研究对象：

网页设计与制作课程的研究对象主要包括网页的基本构成元素、设计原则、制作技术等方面。具体来说，这门课程将涵盖以下内容：

网页的基本构成元素：包括文字、图片、音频、视频等多媒体元素，以及超链接、表单等交互元素。

网页设计原则：包括用户体验、可访问性、可维护性等方面的设计原则，以确保网页具有良好的可用性和易用性。

网页制作技术：包括HTML、CSS、jQuery Mobile等前端技术，以及后端技术和数据库技术等，以实现网页的制作和发布。

课程设计与教学方法：

• 课程设计：课程包括理论教学和实践操作两部分，课程设计以学生为中心，理论教学注重设计原理的传授，实践操作则强调技能的训练和项目的完成。

• 教学方法：采用案例分析、项目驱动、小组讨论等多种教学方法，引导学生积极参与课堂讨论和实践操作，激发学生的学习兴趣和创造力。同时，课程还注重培养学生的团队合作精神和沟通能力，以适应未来职业发展的需求。

1. 课程内容描述：

网页设计与制作课程的内容将涵盖从基础知识到实践应用的各个方面。具体包括：

网页设计基础：介绍网页设计的基本概念、原则和流程，帮助学生建立正确的网页设计思维。了解WEB站点的工作原理及开发所需的软件知识；

HTML与CSS基础：教授HTML和CSS的基本语法和用法，使学生能够初步掌握网页的结构和样式设计，引入“页面代码”网页制作方法；

jQuery Mobile基础开发技术：介绍jQuery Mobile的基本用法，以及如何在网页中实现网页布局、交互、特效等功能的制作方法。

网页制作实战：通过一系列的实际项目，学生能掌握使用Dreamweaver 软件并将所学知识应用于实践中，能在网页中插入图像、表格、声音、多媒体信息；提高他们的动手能力和解决问题的能力。

课程思政教学理念：

在网页设计与制作课程中融入思政元素，旨在引导学生树立正确的价值观和网络道德观念。具体来说，课程将强调以下几点：

网络道德与法规：教授学生在设计和制作网页时应遵守的道德规范和法律法规，引导他们树立正确的网络道德观念。

社会责任与担当：引导学生认识到作为网页设计师和制作人员的社会责任，鼓励他们在设计和制作网页时关注社会热点问题，为社会贡献正能量。

创新意识与创业精神：培养学生的创新意识和创业精神，鼓励他们在网页设计和制作中勇于尝试新的理念和技术，为互联网行业的发展做出贡献。

三、预期成果

1. 学生增值性学习成果：

通过网页设计与制作课程的学习，学生将获得以下增值性学习成果：掌握网页设计和制作的基本技能，能够独立完成简单的网页设计和制作任务。

提高创新思维和审美能力，能够设计出具有创意和美感的网页作品。增强实践能力和解决问题的能力，能够在实践中不断积累经验和提升技能。培养团队合作精神和沟通能力，能够与团队成员协作完成复杂的网页设计和制作项目。

对学生成长成才、职业发展的功能与作用：

网页设计与制作课程对学生的成长成才和职业发展具有重要的作用。具体来说：提升学生的就业竞争力：掌握网页设计和制作技能的学生在求职市场上将更具竞争力，能够更容易地获得心仪的职位。拓展学生的职业发展道路：网页设计和制作技能不仅适用于互联网行业，也适用于其他行业，如媒体、教育、金融等。因此，这门课程将为学生拓展更广阔的职业发展空间。

培养学生的终身学习能力：随着互联网技术的不断发展，网页设计和制作技能也将不断更新和升级。通过这门课程的学习，学生将养成终身学习的习惯和能力，不断适应行业发展的需求。

选课建议与学习要求

选课建议：本课程适合网络与新媒体专业学生大二学习。

学习要求：学生应熟练掌握基本的计算机操作技能，如Windows操作系统、基本的办公软件等。了解互联网的基本概念，如IP地址、域名、浏览器等。学生应通过实际操作和项目实践，不断提升自己的网页设计和制作能力。能够独立完成简单的网页设计和制作任务，如静态网页的制作、简单的动态效果实现等。在实践中不断积累经验，学会解决实际问题中遇到的困难和挑战。

学生应学会从用户的角度出发，设计出符合用户需求和体验的网页。鼓励尝试新的设计理念和技术，创造出具有创意和美感的网页作品。培养对网页设计和制作行业的敏感度和洞察力，关注行业发展趋势和最新技术动态。

大纲编写人

（签名）

制/修订时间

2023.12

专业负责人

（签名）

审定时间

学院负责人

（签名）

批准时间

LO1品德修养：拥护中国共产党的领导，坚定理想信念，自觉涵养和积极弘扬社会主义核心价值观，增强政治认同、厚植家国情怀、遵守法律法规、传承雷锋精神，践行“感恩、回报、爱心、责任”八字校训，积极服务他人、服务社会、诚信尽责、爱岗敬业。

①爱党爱国，坚决拥护党的领导，热爱祖国的大好河山、悠久历史、灿烂文化，自觉维护民族利益和国家尊严。

LO2专业能力：具有人文科学素养，具备从事某项工作或专业的理论知识、实践能力。

 ①具有专业所需的人文科学素养；

 ②新媒体内容生产所必备的，以马克思主义新闻观为指导的职业素养；

④利用新媒体工具传播文字、图片、音频、视频和图表的技能技法。

LO6协同创新：同群体保持良好的合作关系，做集体中的积极成员，善于自我管理和团队管理；善于从多个维度思考问题，利用自己的知识与实践来提出新设想。

④了解行业前沿知识技术。

LO8国际视野：具有基本的外语表达沟通能力与跨文化理解能力，有国际竞争与合作的意识。

①具备外语表达沟通能力，达到本专业的要求。

第一章  网页设计基础与Dreamweaver CC 基础

教学内容：

1. 互联网基础

2. 网页设计知识

3. 网页标准化技术

4. 网站制作流程

5. Dreamweaver CC 基础

6. HTML 语言

本章重点：

1.熟练掌握Dreamweaver CC 操作界面。

2.掌握站点建设与管理的基本操作。

本章难点：

1.HTML 语言的运用

2.站点的创建与管理

第二章页面与文本

教学内容：

2.1 页面属性

2.2 文本属性

2.3 无序列表和有序列表

本章重点：

1.掌握文本分段与换行方法；

2.掌握页面边距和页面属性设置；

3.掌握文本属性的设置及项目列表的设置。

本章难点：

1.文本分段与换行的不同方法。

第三章图像、多媒体和表格

教学内容：

3.1 图像插入

3.2 HTML5 网页多媒体

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.1 CSS 样式

5.2 CSS 样式设计器

3. CSS 属性

5.4 CSS 过渡效果

5.5 CSS 动画

本章重点：熟悉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.掌握模板运用的方法。

本章难点：库的创建和管理。

第九章表单及jQuery UI

教学内容：

9.1 表单

9.2 jQuery UI

本章重点：

1.熟练掌握表单创建的方法。

2.熟练掌握jQuery UI 互动方法。

本章难点：jQuery UI 的互动设置

第十章jQuery Mobile

教学内容：

10.1 jQuery Mobile 概述

10.2 使用jQuery Mobile

10.3 jQuery Mobile 应用

1.给学生解释URL时，以本校的网址为例，让学生了解域名各部分的含义

2.讲解网页各组成元素时，以学校网站为例，并告知学生可以在网上查看学校很多新闻，教学周历等等，让学生充分了解学校网站的作用。

3.讲解无序列表<ul>、<il>标记时，以本校校训为例。

4.在实训练习当中，要求学生制作完成个人网页。

5.层叠样式表CSS。这个模块的教学中，使用中国政府网、新华网等权威度比较高的网站作为学习参照网站，把这些网站中时下最热点的新闻、国家大事等作为创作主题。

6.在教学过程中结合人工智能对网站设计的影响，培养学生的数字素养以及让学生多关注前沿领域。

总之，课堂案例以及练习案例多结合时尚传播专业培养目标以及结合中国传统文化和革命历史，帮助学生热爱本专业，更好地学习中国传统文化知识，构建爱党爱国的理想信念，课程思政与教学内容相结合，激发学生的民族自豪感和责任感。

总评构成

占比

考核方式

课程目标

合计

X1

30%

课堂考勤及练习作业

100

X2

35%

课后操作练习

100

X3

35%

期末考查

100

考核项目

课

程

目

考核要求

评价标准

优

100-90

良

89-75

中

74-60

不及格

59-0

1

X1

X2

X3

X4

X5