2050168《网页设计》教学大纲

课程名称

（中文）网页设计

（英文）Web Design

课程代码

2050168

课程学分

4

课程学时

64

理论学时

32

实践学时

32

开课学院

新闻传播学院

适用专业与年级

传播学专业三年级

课程类别与性质

专业必修课

考核方式

考查

选用教材

《网页设计与制作Dreamweaver CC标准教程第4版》修毅 洪颖 邵熹雯 (编著) ，人民邮电出版社，978-7-115-60763-8

是否为

马工程教材

否

先修课程

大学信息技术2050207（2）图像处理 2030121 （4）

课程简介

本课程共64课时，其中实践教学为32课时，总计4学分。本课程使学生较为全面地掌握网页设计技能，从而能设计出具有个性的、功能较为完善的、具有良好视觉效果的适配多终端的网站页面。这门课的核心目标不是培养前端工程师，而是让未来的传媒人掌握一种核心的“表达与叙事”工具。因此，课程内容应该紧紧围绕 “传播” 这一核心，强调用户体验、视觉叙事、信息架构和品牌传播，不局限于深挖技术实现。课程模块和内容，可以分为“理论认知”、“实践技能”和“融合应用”三个层面。通过本课程的学习，学生能熟练使用Dreamweaver、Adobe XD软件以及Figma等AI设计工具。熟悉常用的网页布局、交互、特效等制作方法，了解Figma等AI工具的组件、自动布局、原型交互功能。

选课建议与学习要求

本课程适合传播专业三年级学生学习。

学习网页设计的基础知识，了解网页的各种分类设计，网页布局及设计要求，能够通过软件设计和制作具有个性的、功能较为完善的、具有良好视觉效果的网站，掌握网页设计技能。本课程前应开设《大学信息技术》《图像处理》课程，以使学生有相应的计算机基础知识以及初步图形图像编辑能力。

大纲编写人

（签名）

制/修订时间

2025.9.

专业负责人

（签名）

审定时间

2025.9

学院负责人

（签名）

批准时间

2025.9

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

⑤爱岗敬业，热爱所学专业，勤学多练，锤炼技能。熟悉本专业相关的法律法规，在实习实践中自觉遵守职业规范，具备职业道德操守。

LO2专业能力：具有人文科学素养，具备从事电子商务相关工作或专业的理论知识、实践能力。

⑤掌握多种常用的新媒体技术，具备制作、传播各类媒介信息的能力。

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

③能用创新的方法或者多种方法解决复杂问题或真实问题。

LO7信息应用：具备一定的信息素养，并能在工作中应用信息技术和工具解决问题。

②能够使用适合的工具来搜集信息，并对信息加以分析、鉴别、判断与整合。

③熟练使用计算机，掌握常用办公软件。

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

教学内容：

1.1 互联网基础

1.1.1 Internet与Web服务

1.1.2 URL路径

1.1.3 服务器与客户机

1.1.4 互联网数据中心

1.2 网页设计知识

1.2.1 色彩

1.2.2 网页设计元素

1.2.3 页面布局

1.3 网页标准化技术

1.3.1 超文本标记语言

1.3.2 CSS样式

1.3.3 脚本语言

1.3.4 PHP技术

1.4 网站制作流程

1.4.1 前期准备工作

1.4.2 方案实施

1.4.3 后期工作

1.5 Dreamweaver CC基础

1.5.1 Dreamweaver CC工作界面

1.5.2 创建网站站点

1.5.3 管理站点

1.5.4 网页文档头部信息设置

1.6 HTML语言

1.6.1 HTML 代码

1.7 AI赋能网页设计概况

预期学习成果：  

通过本章教学，让学生了解网页设计基础知识，熟悉Dreamweaver CC操作界面。掌握创建站点、管理站点文件、编写页面代码等基本操作，了解目前AI赋能网页设计前沿技术。

重点难点：

【本章重点】

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

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

3.AI赋能网页设计概况

【本章难点】    

1.HTML语言的运用

2.站点的创建与管理

第二章 页面与文本

教学内容：

2.1 页面属性

2.1.1网页标题

2.1.2文本分段与换行

2.1.3输入空格

2.1.4设置页面文字属性

2.1.5显示或隐藏不可见元素

2.1.6设置页边距

2.1.7设置背景属性

2.2 文本属性

2.2.1 设置文本属性

2.2.2 文本段落

2.2.3 插入日期

2.2.4 插入特殊字符

2.3 无序列表和有序列表

2.3.1 设置无序列表和有序列表

预期学习成果：

通过本章教学，让学生掌握页面文本的基本编辑方法。掌握无序列表和有序列表的基本设计方法。

重点难点：

【本章重点】

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

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

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

【本章难点】  

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

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

教学内容：

3.1 图像插入

3.1.1 插入图像

3.1.2 图像源文件

3.1.3 图像的宽度和高度

3.1.4 替换文本

3.2 HTML5网页多媒体

3.2.1插入HTML5 Video元素

3.2.2插入HTML5 Audio元素

3.3 表格简单操作

3.3.1 表格的组成

3.3.2 插入表格

3.3.3 表格属性

3.3.4 表格单元格属性

3.3.5 在表格中插入内容

3.3.6 选择表格元素

3.3.7 合并和拆分单元格

3.4 表格排版

3.4.1 复制和粘贴表格

3.4.2 删除表格和清除表格内容

3.4.3 增加或减少表格的行和列

3.5表格应用

3.5.1细线表格和带状表格

3.5.2表格数据排序

预期学习成果：

通过本章的教学，让学生掌握图像、音频、视频等多媒体元素在网页中运用的方法。让学生熟练掌握表格编辑的方法和技巧，学会运用表格来布局页面、美化页面。

重点难点：

【本章重点】

1.掌握插入图像的方法

2.掌握网页中多媒体运用的方法和技巧

3.表格属性

4.表格布局

【本章难点】

1.HTML5网页多媒体运用

2.运用表格实现页面布局

第四章 超链接

教学内容：

4.1 超链接的概念与路径知识

4.1.1 按超链接端点分类

4.1.2 按超链接路径分类

4.2 文本超链接

4.2.1 创建文本链接

4.2.2 页面文本链接状态

4.2.3 下载文件链接

4.2.4 电子邮件链接

4.2.5 空链接

4.3 图像超链接

4.3.1 创建图像超链接

4.3.2 创建鼠标经过图像超链接

4.4 热点链接

4.4.1创建热点链接

4.5锚点链接

4.5.1 创建锚点链接

4.6 链接管理

4.6.1 自动更新链接

4.6.2 链接检查

4.6.3 修复链接

预期学习成果：  

通过本章的教学，让学生理解不同超链接的作用，熟练掌握各类超链接运用的技巧。

重点难点：

【本章重点】

1.超链接的概念与路径知识

2.文本超链接

3.图像超链接

4.热点链接

5.锚点超链接

6.链接管理

【本章难点】

1.不同热点工具运用产生的不同热点链接效果 

第五章 CSS样式

教学内容：

5.1 CSS样式

5.1.1 CSS样式标准

5.1.2 CSS样式构造规则

5.1.3 CSS样式种类

5.1.4 CSS样式应用范围

5.2 CSS样式设计器

5.2.1 CSS样式选择器

5.2.2 CSS样式的使用

5.2.3 CSS样式的编辑

5.3 CSS属性

5.3.1用<ul>和<li>创建导航条

5.3.2 布局

5.3.3 文字

5.3.4 边框

5.3.5背景

5.4 CSS过渡效果

5.4.1 CSS样式私有属性

5.4.2 CSS过渡属性

5.5 CSS动画

5.5.1 animation属性和@keyframes规则

预期学习成果：

通过本章教学，让学生了解CSS设计器属性，能够运用CSS样式实现页面元素属性的美化。

重点难点

【本章重点】

1.熟悉CSS设计器属性面板

【本章难点】

1.创建新的CSS规则

第六章 CSS+Div布局

教学内容：

6.1 盒子模型

6.1.1 盒子结构

6.1.2 盒子属性

6.2 布局方法

6.2.1 <div>标签

6.2.2 position定位属性

6.2.3 浮动方式

6.3 “上中下”布局

6.3.1在DreamweaverCC中插入<div>标签

6.4 “左中右”布局

6.4.1使用CSS样式布局

预期学习成果：

通过本章教学，让学生掌握使用DIV实现页面布局，使用CSS样式实现页面元素的丰富化

重点难点

【本章重点】

1.CSS样式种类

2.熟练掌握DIV布局页面

【本章难点】  

1.DIV布局

第七章 行为

教学内容

7.1行为

7.1.1事件

7.1.2动作

7.1.3行为面板

7.2 制作图像特效

7.2.1交换图像

7.2.2显示-隐藏元素

7.3改变属性

7.4 启用浏览器窗口

7.4.1打开浏览器窗口

预期学习成果：

通过本章的教学，让学生掌握运用动作和事件设置来实现网页的特效。

重点难点

【本章重点】

1．行为基本概念；

2．行为的类别；

【本章难点】

1. 行为动作和事件的联合运用

第八章 模板和库

教学内容：

8.1 模板

8.1.1 创建模板

8.1.2 定义可编辑区域

8.1.3 定义可编辑重复区域

8.1.4 创建基于模板的网页

8.1.5 管理模板

8.2 库

8.2.1 创建库项目

8.2.2 向页面添加库项目

8.2.3 更新库项目文件

预期学习成果：

通过本章学习，让学生掌握运用模板和库实现快速编辑页面的技巧。

重点难点

【本章重点】

1.了解模板和库的作用。

2.熟练掌握库的创建和管理的方法和技巧。

3.掌握模板运用的方法。

【本章难点】

1.库的创建和管理

第九章 表单及jQuery UI

教学内容：

9.1 表单

9.1.1 表单及属性

9.1.2 文本元素

9.1.3 单选按钮和单选按钮组

9.1.4 复选框和复选框组

9.1.5 选择

9.1.6 文件元素

9.1.7 按钮

9.1.8 HTML5表单元素

9.2 jQuery UI

9.2.1 折叠面板Accordion

9.2.2 选项卡Tabs

9.2.3 日期选择器Datepicker

9.2.4 对话框Dialog

预期学习成果：

通过本章的教学，让学生熟练掌握表单的创建以及表单各项目元素的设置。学会运用jQuery UI实现页面的互动元素设置。

重点难点

【本章重点】

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

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

【本章难点】

1. jQuery UI的互动设置

第十章 Adobe XD交互设计

教学内容：

10.1　Adobe XD 软件介绍

10.1.1　软件界面布局与功能区认识

10.1.2　常用工具基础操作

10.1.3　图形与文本处理

10.1.4　图层与样式管理

10.2　界面交互设计

10.2.1　交互设计模式

9.2.2　合理的交互设计提升转化率

9.2.3　独特的UI交互技巧

10.3　可用性设计

10.3.1　什么是可用性

10.3.2　可用性的表现

10.3.3　实战——使用Adobe XD设计影视页面

10.4　沉浸感设计

10.4.1　什么是沉浸感

10.4.2　沉浸感设计原则

10.4.3　实战——使用Adobe XD设计美食页面

10.5　情感化设计

10.5.1　什么是情感化设计

10.5.2　互联网产品的情感化设计

10.5.3　UI情感化设计细节

10.5.4　实战——使用Adobe XD设计音乐页面

10.6　交互原型

10.6.1　交互基础

10.6.2　交互流程的规划与设计

10.6.3　交互效果制作

10.7　交互效果制作

10.7.1　页面跳转、手势操作等基本交互设置

10.7.2　组件状态变化的交互实现

10.7.3　自动动画的应用

预期学习成果：

通过本章的教学，让学生理解交互设计与用户体验之间的关系，并掌握如何通过出色的交互设计来提升产品的用户体验。

重点难点

【本章重点】

1.界面交互设计

2.可用性设计

3.情感化设计

【本章难点】

1.移动UI和网页UI设计的不同

2.组件状态变化的灵活运用

第十一章 Figma 等AI工具赋能网页设计

教学内容：

11.4.1 网页设计AI工具简介

11.4.2 Figma AI 激活与界面

11.4.3 Prompt工程基础

11.4.4 智能化设计优化与自动化交付

预期学习成果：　

通过本章学习，掌握用文本生成完整的UI界面和图标的能力，并学会利用AI加速组件创建。

重点难点

【本章重点】

1. 掌握Figma AI的界面及核心交互方式等使用方法。

2. 理解AI在设计工作流中的“定位与边界”

3. 将AI功能无缝嵌入现有Figma工作流

【本章难点】

1. 有效Prompt构建方法

2. 处理AI“幻觉”与不精准性

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

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

3.通过“公益宣传网页”“无障碍网页设计”教学，树立技术服务社会，关注弱势群体的意识。

4.在实训练习当中，分析“故宫博物院官网”“中国国家地理网”的传统文化元素，引导学生将传统纹样、书法字体、非遗元素融入网页设计，传承与创新中华优秀传统文化。

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

6.强调代码规范、版权意识、用户隐私保护，培养严谨、诚信、负责任的传播者素养。

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

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

总评构成

占比

考核方式

课程目标

合计

1

2

3

4

5

6

X1

15%

课堂参与+课堂表现+预复习

10

10

10

10

30

30

100

X2

30%

课堂操作练习

40

40

10

10

100

X3

20%

课后操作练习

40

40

10

10

100

X4

35%

期末考查

10

10

30

30

10

10

100

无