2030359《网站制作》教学大纲

课程名称

（中文）网站制作

（英文）WEB DESIGN

课程代码

2030359

课程学分

2

课程学时

32

理论学时

10

实践学时

22

开课学院

新闻传播学院

适用专业与年级

新闻学大二、大三

课程类别与性质

专业选修课

考核方式

考查

选用教材

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

是否为

马工程教材

否

先修课程

（1）计算机应用基础（2）图形图像制作软件（photoshop等）

课程简介

本课程是新闻学专业的选修课，旨在融合理论与实践，培养学生全面掌握网页设计与制作的能力。学习本课程将使学生掌握基本的网页设计与制作知识和技巧，能够独立或与他人协作构建简单至较为复杂的网站，并设计相关网页。

课程教学内容包括：教导学生熟练运用Dreamweaver软件；深入了解Web站点的运作原理及开发所需的软件知识；学会在网页中嵌入图像、表格、声音、视频等多媒体信息；初步掌握HTML5和CSS3代码知识，掌握引入“页面代码”网页制作方法，了解网页设计的基本原理；初步掌握移动设备jQuery Mobile页面开发技术，熟悉常用的网页布局、交互、特效等制作方法。

通过学习本课程，学生将获得扎实的网页设计与制作能力，为未来从事相关职业打下坚实基础。

选课建议与学习要求

本课程适合新闻学专业的大三学生选修。在学习本课程之前，建议学生先修相关课程，如计算机应用基础和基于Photoshop软件的图形图像制作等，以加强其对信息数字化和媒介元素编辑操作的理解。

大纲编写人

制/修订时间

2025.8

专业负责人

审定时间

2025.9

学院负责人

批准时间

2025.9

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

④诚信尽责，为人诚实，信守承诺，勤奋努力，精益求精，勇于担责。

LO2专业能力：具有人文科学素养，具备从事新闻传播相关工作的理论知识、实践能力。

⑤活动策划与执行：能根据不同的主题进行活动策划以及相关的品牌推广工作。

⑥媒介应用与发展：能较好地应用多种常用传播媒介，并能与时俱进地掌握岗位所要求的新媒介技术。

LO3表达沟通：理解他人的观点，尊重他人的价值观，能在不同场合用书面或口头形式进行有效沟通。

①倾听他人意见、尊重他人观点、分析他人需求。

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

①在集体活动中能主动担任自己的角色，与其他成员密切合作，善于自我管理和团队管理，共同完成任务。

第一章 网页设计基础与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 代码

课堂案例：

慈善救助中心

瑜伽会所

案例学习目标：学习创建站点、管理站点文件和文件夹的方法。学习页面代码的编辑方法，包括HTML代码、CSS格式化代码和JavaScript代码的编辑。

案例知识要点：使用【站点】|【新建站点】创建站点，编写页面代码。

预期学习成果：  

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

重点难点：

【本章重点】

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

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

【本章难点】    

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 插入特殊字符

课堂案例：百货公司

案例学习目标：学习设置网页中的文字样式。

案例知识要点：使用CSS样式改变文本大小、颜色、字体等。

2.3 无序列表和有序列表

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

课堂案例：咨询网站

案例学习目标：学习使用无序列表。

案例知识要点：使用【无序列表】按钮创建列表、改变列表样式。

练习案例：

1.大学生国际电影节

2.移动银行网站

3.化妆品网站

预期学习成果：

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

重点难点：

【本章重点】

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

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

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

【本章难点】  

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

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

教学内容：

3.1 图像插入

3.1.1 插入图像

3.1.2 图像源文件

3.1.3 图像的宽度和高度

3.1.4 替换文本

课堂案例：茶叶网站

案例学习目标：学习使用多种方法在网页中插入图像。

案例知识要点：使用【插入】|【Image】菜单、【插入】面板和直接拖曳图像等方法将图像插入网页指定位置。

3.2 HTML5网页多媒体

3.2.1插入HTML5 Video元素

3.2.2插入HTML5 Audio元素

课堂案例：米克音乐

案例学习目标：学习在网页中插入Video元素、Audio元素。

案例知识要点：使用【插入】面板的【HTML】|【HTML5 Audio】按钮和【HTML5 Video】按钮插入Video元素和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 增加或减少表格的行和列

课堂案例：融通室内装饰

案例学习目标：学会表格基本操作，体验简单的表格排版过程。

案例知识要点：选择菜单【插入】|【Table】，创建表格，通过单元格进行拆分与合并，实现简单表格的排版。在表格【属性】面板和单元格【属性】面板中设置其基本属性，对整个页面进行外观设计。

3.5表格应用

3.5.1细线表格和带状表格

3.5.2表格数据排序

课堂案例：远景苑小区

案例学习目标：学习使用细线表格和带状表格，对表格中的数据进行排序。

案例知识要点：使用【属性】面板，设置单元格间距和单元格背景。使用【编辑】|【表格】|【排序表格】对表格数据进行排序。

练习案例：

1.五金机械

2.古典音乐网

3.爱丽丝家具

4.逸购鲜花速递网

预期学习成果：

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

重点难点：

【本章重点】

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 创建鼠标经过图像超链接

课堂案例：手机商城

案例学习目标：学习建立图像超链接和鼠标经过图像超链接。

案例知识要点：使用【属性】面板为图像设置超链接，使用菜单【插入】|【HTML】|【鼠标经过图像】建立鼠标经过图像超链接。

4.4 热点链接

4.4.1创建热点链接

课堂案例：儿童课堂

案例学习目标：学习创建热点链接。

案例知识要点：使用【属性】面板创建热点链接。

4.5锚点链接

4.5.1 创建锚点链接

课堂案例：数码商城

案例学习目标：学习建立锚点链接。

案例知识要点：在【代码】视图中，使用<a name=“锚点名称”>该元素处创建锚点</a>建立锚点，利用与设置链接同样的方式创建锚点链接。

4.6 链接管理

4.6.1 自动更新链接

4.6.2 链接检查

4.6.3 修复链接

练习案例：百适易得商城

案例学习目标：学习网站的链接管理。

案例知识要点：使用菜单【窗口】|【结果】|【链接检查器】，打开【链接检查器】面板管理网站链接。

练习案例：

1.室内设计网

2.多美味餐厅

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样式的编辑

课堂案例：美好摄影

案例学习目标：学习使用各种CSS样式。

案例知识要点：在【CSS设计器】面板中，单击【源】选项卡中的按钮+ ，选定样式的存储位置；单击【选择器】选项卡中的按钮+ ，设置标签样式、ID样式、类样式和复合样式等；单击【属性】选项卡中的按钮+ ，完成属性的设置。

5.3 CSS属性

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

5.3.2 布局

5.3.3 文字

5.3.4 边框

5.3.5背景

课堂案例：走进台湾

案例学习目标：学习设置CSS文字导航条。

案例知识要点：在【CSS设计器】面板中，灵活使用【选择器】，【属性】中的分类：布局、文字、边框和背景，完成CSS属性的设置。

5.4 CSS过渡效果

5.4.1 CSS样式私有属性

5.4.2 CSS过渡属性

课堂案例：墙体装饰

案例学习目标：学习使用CSS过渡效果。

案例知识要点：在【CCS过渡效果】面板中，打开【新建过渡效果】对话框，完成新建CSS过渡效果的设置。

5.5 CSS动画

5.5.1 animation属性和@keyframes规则

课堂案例：校园统一认证

案例学习目标：学习使用CSS动画效果。

案例知识要点：在【CCS设计器】面板中，选择【属性】下方按钮… ，打开【更多】列表，完成CSS动画效果的设置。在【代码】视图中，在样式表文件中建立@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>标签

课堂案例：网页设计大赛

案例学习目标：学习“上中下”布局的方法。

案例知识要点：在【插入】面板【HTML】选项卡中，使用【Div】按钮<> 创建网页布局结构；在【CSS设计器】面板中，使用【添加选择器】按钮+ 创建<div>标签的ID样式，并采用默认的position和float属性，完成“上中下”的布局。

6.4 “左中右”布局

6.4.1使用CSS样式布局

课堂案例：连锁餐厅

案例学习目标：学习“左中右”布局的方法。

案例知识要点：在【插入】面板【HTML】选项卡中，使用【Div】按钮<> ，插入<div>标签；在【插入Div】对话框中，使用【新建CSS规则】按钮，创建<div>标签的相关样式，设置position、float和clear属性，完成“左中右”的网页布局。

练习案例

1.电子产品

2.装修公司

预期学习成果：

通过本章教学，让学生掌握使用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.恒生国际老年公寓

预期学习成果：

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

重点难点

【本章重点】

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的基本操作。

案例知识要点：在【插入】面板【jQuery UI】选项卡中，单击【Accordion】按钮创建折叠面板、单击【Tabs】按钮创建选项卡。并使用其【属性】面板进行设置。

练习案例：

1.咖啡餐厅

2.练习案例-网上生活超市

预期学习成果：

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

重点难点

【本章重点】

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

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

【本章难点】

1.jQuery UI的互动设置

第十章jQuery Mobile

教学内容：

10.1　jQuery Mobile概述　

10.1.1 jQuery Mobile简介　

10.1.2 jQuery Mobile框架　

10.1.3 data-属性　

10.1.4 jQuery Mobile样式　

10.2　使用jQuery Mobile　

10.2.1 jQuery Mobile页面　

10.2.2 jQuery Mobile列表视图　

10.2.3 jQuery Mobile布局网格　

10.2.4 jQuery Mobile可折叠区块　

10.2.5 jQuery Mobile表单

课堂案例：服装定制I

案例学习目标：学习创建jQuery Mobile页面的基本方法。

案例知识要点：在【插入】面板【jQuery Mobile】选项卡中，单击【页面】【列表视图】【布局网格】【可折叠区块】和一些表单项目创建移动Web页面。　

10.3　jQuery Mobile应用　

10.3.1 jQuery Mobile版本　

10.3.2 面板panel　

10.3.3 弹窗popup　

课堂案例：服装定制II

案例学习目标：学习创建jQuery Mobile应用的方法。

案例知识要点：在【代码】视图中，学会升级和使用jQuery Mobile新版本，使用面板panel、弹窗popup、图片轮播和页面链接的方法。

10.3.4 视口viewport　

10.3.5 自定义jQuery Mobile主题　

10.3.6 打包jQuery Mobile应用　

练习案例　

1.男人会装I　

2.男人会装II

预期学习成果：　

通过本章学习，让学生了解jQuery Mobile的基本知识；掌握jQuery Mobile基本使用方法；掌握jQuery Mobile进阶使用方法。

重点难点

【本章重点】

1.掌握jQuery Mobile基本使用方法。

【本章难点】

1.掌握jQuery Mobile进阶使用方法。

1、在解释URL时，以本校的网址为例，详细解读域名各部分的含义，确保学生对其有清晰的认识。

2、在讲解网页的组成元素时，以学校网站为实例，并告知学生他们可以在此查看学校的各类新闻、教学周历等，以使他们充分了解学校网站的作用。

3、在介绍无序列表<ul>、<li>标记时，以本校的校训为案例，展示其在实际网页设计中的应用。

4、在实训练习中，要求学生制作完成个人网页，以提升他们的实际操作能力。

5、在层叠样式表CSS的教学模块中，选取中国政府网、新华网等权威度较高的网站作为学习参照，并鼓励学生以这些网站中的热点新闻、国家大事等作为创作主题，进行实践操作。

6、在教学过程中，结合人工智能对网站设计的影响，培养学生的数字素养，引导他们关注前沿领域的发展动态。

在课堂案例与练习案例的设计中，应充分结合新闻传播专业的培养目标，同时融入中国传统文化和时事政治元素。这样不仅可以帮助学生更加热爱自己的专业，还能让他们更好地学习并传承中国优秀的传统文化知识，使他们在专业知识的学习过程中，不断激发民族自豪感和社会责任感。

总评构成

占比

考核方式

课程目标

合计

1

2

3

4

5

X1

20%

实操技能考核

10%

10%

30%

30%

20%

100

X2

30%

专题项目考核

10%

20%

30%

30%

10%

100

X3

50%

综合项目设计

10%

10%

30%

30%

20%

100

暂无