《网页设计与制作基础》课程实验教学大纲 课程基本信息 课程代码：119492 课程名称：网页设计与制作基础 英文名称：Fundamentals of Web Design and Production 实验总学时：16学时 专业：部分专业本科学生 课程类别：通识课 先修课程：计算机应用基础 二、 实验教学的总体目的和要求 (一)总体目标 本课程实哈教学的目的是让学生提高自己的实际动手能力，熟练堂握当前的 流行网页制作工具以及网页设计辅助软件 通过这门课程的学习，应使学生掌握 以下能力：要求学生学握网页设计的基础知识：要求学生学握网页设计与制作的 基础语言HTML语言；要求学生学握通过Dreamweaver建设网站和编辑网页的技术。 (一总体要求 1、对学生的 学握了计算机基础知识，有一定的美学鉴赏能力：实验前必须对实验内容进 行预习：上实验课必须带齐“实验指导书”、“教材”、实验用磁盘，认真按照实验 内容和实验要求完成实验，同学间可相互时论，但不得大声痘华：课后按要求完 成实验报告。 2、对教师的要求 有一定的教学经验，了解各种网页制作工具以及辅助设计工具：课前准备充 分：课中耐心指导学生，发现问题及时解决，不做与实验内容无关的事情，不能 无故擅离实验室；课后认真批改学生的实验报告。 3、对实验条件的要求 (1)硬件要求 多媒体计算机，内部组成局域网，对外每台机器均连入Internet互联网。 (2)软件要求 中文Windows操作系统：Dreamweaver软件：主流浏览器。 三、 实验教学内容 实验项目一 实验名称：网页的认识 实验内容：网页欣赏以及初识TML。 实验性质：综合性 实验学时：2学时 实验目的与要求： 1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件： 2、利用记事本来编辑TL文档并浏览： 3、熟悉HTML基本标记的使用
1 《网页设计与制作基础》课程实验教学大纲 一、 课程基本信息 课程代码：119492 课程名称：网页设计与制作基础 英文名称：Fundamentals of Web Design and Production 实验总学时：16 学时 适用专业：部分专业本科学生 课程类别：通识课 先修课程：计算机应用基础 二、 实验教学的总体目的和要求 （一）总体目标 本课程实验教学的目的是让学生提高自己的实际动手能力，熟练掌握当前的 流行网页制作工具以及网页设计辅助软件。通过这门课程的学习，应使学生掌握 以下能力：要求学生掌握网页设计的基础知识；要求学生掌握网页设计与制作的 基础语言 HTML 语言；要求学生掌握通过 Dreamweaver 建设网站和编辑网页的技术。 （二）总体要求 1、对学生的要求 掌握了计算机基础知识，有一定的美学鉴赏能力；实验前必须对实验内容进 行预习；上实验课必须带齐“实验指导书”、“教材”、实验用磁盘，认真按照实验 内容和实验要求完成实验，同学间可相互讨论，但不得大声喧哗；课后按要求完 成实验报告。 2、对教师的要求 有一定的教学经验，了解各种网页制作工具以及辅助设计工具；课前准备充 分；课中耐心指导学生，发现问题及时解决，不做与实验内容无关的事情，不能 无故擅离实验室；课后认真批改学生的实验报告。 3、对实验条件的要求 (1)硬件要求 多媒体计算机，内部组成局域网，对外每台机器均连入 Internet 互联网。 (2)软件要求 中文 Windows 操作系统； Dreamweaver 软件；主流浏览器。 三、 实验教学内容 实验项目一 实验名称：网页的认识 实验内容：网页欣赏以及初识 HTML。 实验性质：综合性 实验学时：2 学时 实验目的与要求： 1、掌握利用 Internet 进行信息游览、搜索，下载网页、图片、文字和文件； 2、利用记事本来编辑 HTML 文档并浏览； 3、熟悉 HTML 基本标记的使用
实验条件：要求安装中文Windows操作系统，内部组成局域网，外连Internet互 联网。 研究与思考：能用文本编辑软件建立站点吗？ 实验项目二 实验名称： HTL标记的使用 实验内容：熟悉HTML的各种标记。 实验性质：综合性 实验学时：2学时 实验目的与要求： 1、掌握HTML文档的结构及其制作规范。 2、掌握文本段落格式标记，包括注释标记，分段标记，换行/不换行标记，标题 标记，分节标记，水平线标记，文本居中标记等： 3、掌握文字显示效果标记，包括字体标记，字符样式标记以及转义字符等： 4、掌握列表格式标记，包括无序列表标记，有序列表标记等： 5、掌握超链接的使用，包括锚点标记、页面跳转链接、书签超链接、下载文件链 接以及电子邮件链接等： 6、掌握图片标记，包括插入图片标记，图片超链接标记网页背景标记： 7、掌握音频和视频标记，包括链接音频或视频文件、设置网页背景音乐标记，内 嵌音频或视频播放插件尊： 8、掌握动态元素标记。 9、掌握使用表格标记来创建和设置表格： 10 熟悉表单标记并掌握利用这些标记来创建表单以及其中的各种表单域。 实验条件：要求安装中文Windows操作系统，内部组成局域网，外连Internet互 联网。 研究与思考：分段标记与换行标记的区别？ 实验项目三 实验名称：Dreamweaver基本操作（一） 实验内容：Dreanweaver的工作环境下文本、图像以及超链接的插入及设置 实验性质：综合性 实验学时：2学时 实验目的与要求： 1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理： 2、熟表网贞文件的基本操作： 3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。 实验条件：要求安装中文Windows操作系统、Dreamweaver软件、主流浏览器，内 部组成局域网，外连Internet互联网。 研究与思考：建立站点的时候要注意哪些方面？ 实验项目四
2 实验条件：要求安装中文 Windows 操作系统，内部组成局域网，外连 Internet 互 联网。 研究与思考：能用文本编辑软件建立站点吗？ 实验项目二 实验名称： HTML 标记的使用 实验内容：熟悉 HTML 的各种标记。 实验性质：综合性 实验学时：2 学时 实验目的与要求： 1、掌握 HTML 文档的结构及其制作规范。 2、掌握文本段落格式标记，包括注释标记，分段标记，换行/不换行标记，标题 标记，分节标记，水平线标记，文本居中标记等； 3、掌握文字显示效果标记，包括字体标记，字符样式标记以及转义字符等； 4、掌握列表格式标记，包括无序列表标记，有序列表标记等； 5、掌握超链接的使用，包括锚点标记、页面跳转链接、书签超链接、下载文件链 接以及电子邮件链接等； 6、掌握图片标记，包括插入图片标记，图片超链接标记网页背景标记； 7、掌握音频和视频标记，包括链接音频或视频文件、设置网页背景音乐标记，内 嵌音频或视频播放插件等； 8、掌握动态元素标记。 9、掌握使用表格标记来创建和设置表格； 10、 熟悉表单标记并掌握利用这些标记来创建表单以及其中的各种表单域。 实验条件：要求安装中文 Windows 操作系统，内部组成局域网，外连 Internet 互 联网。 研究与思考：分段标记与换行标记的区别？ 实验项目三 实验名称：Dreamweaver 基本操作（一） 实验内容：Dreamweaver 的工作环境下文本、图像以及超链接的插入及设置。 实验性质：综合性 实验学时：2 学时 实验目的与要求： 1、熟悉 Dreamweaver 的工作环境并了解本地站点的建设和管理； 2、熟悉网页文件的基本操作； 3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。 实验条件：要求安装中文 Windows 操作系统、Dreamweaver 软件、主流浏览器，内 部组成局域网，外连 Internet 互联网。 研究与思考：建立站点的时候要注意哪些方面？ 实验项目四
实验名称：Dreamweaver基本操作（仁） 实验内容：Dreanweaver的工作环境下表格、表单以及多煤体对象的添加和设置。 实验性质：综合性 实验学时：2学时 实验目的与要求： 1、熟练掌握在网页文件中多媒体对象的添加和设置： 2、熟练掌握在网页文件中表格的添加和设置： 3、熟练掌握在网页文件中表单的添加和设置。 实验条件：要求安装中文Windows操作系统、Dreamweaver软件、主流浏览器，内 部组成局域网，外连Internet互联网。 研究与思考：添加各种音频元素的区别？ 实验项目五 实验名称：CSS样式表 实验内容：掌握CSS样式表的基本知识以及利用CSS样式表设置格式和制作特效。 实验性质：综合性 实验学时：2学时 实验目的与要求： 1、了解CSS的堪本知识 2、熟悉“CSS样式”面板： 3、堂握样式表的创律和应用 实验条件：要求安装中文Windows操作系统、Dreamweaver软件、主流浏览器，内 部组成局域网，外连Internet互联网。 研究与思考：比较行内样式、内部样式和外部样式三种样式的作用范围。在本实 验项目中引入一些能体现人文精神、仁爱之心的网页例文素材，把价 值观培育有机地融入课程，润物无声，立德树人，使得学生能在巩固 专业知识的同时增强了自己对主流价值的感性认识。 实验项目六 实验名称：Dreamweaver网页布局设计（一） 实验内容：布局表格以及框架 实验性质：综合性、设计性 实验学时：2学时 实验目的与要求： 1、熟悉布局表格的绘制和设置，掌握利用布局表格来规划网页的技能 2、熟悉框架集和框架的创建和编辑，掌握用框架米设计网页的技能。 实验条件：要求安装中文Windows操作系统、Dreamweaver软件、主流浏览器，内 部组成局域网，外连Internet互联网。 研究与思考：比较表格和布局表格的区别。 实验项目七
3 实验名称：Dreamweaver 基本操作（二） 实验内容：Dreamweaver 的工作环境下表格、表单以及多媒体对象的添加和设置。 实验性质：综合性 实验学时：2 学时 实验目的与要求： 1、熟练掌握在网页文件中多媒体对象的添加和设置； 2、熟练掌握在网页文件中表格的添加和设置； 3、熟练掌握在网页文件中表单的添加和设置。 实验条件：要求安装中文 Windows 操作系统、Dreamweaver 软件、主流浏览器，内 部组成局域网，外连 Internet 互联网。 研究与思考：添加各种音频元素的区别？ 实验项目五 实验名称：CSS 样式表 实验内容：掌握 CSS 样式表的基本知识以及利用 CSS 样式表设置格式和制作特效。 实验性质：综合性 实验学时：2 学时 实验目的与要求： 1、了解 CSS 的基本知识； 2、熟悉“CSS 样式”面板； 3、掌握样式表的创建和应用。 实验条件：要求安装中文 Windows 操作系统、Dreamweaver 软件、主流浏览器，内 部组成局域网，外连 Internet 互联网。 研究与思考：比较行内样式、内部样式和外部样式三种样式的作用范围。在本实 验项目中引入一些能体现人文精神、仁爱之心的网页例文素材，把价 值观培育有机地融入课程，润物无声，立德树人，使得学生能在巩固 专业知识的同时增强了自己对主流价值的感性认识。 实验项目六 实验名称：Dreamweaver 网页布局设计（一） 实验内容：布局表格以及框架 实验性质：综合性、设计性 实验学时：2 学时 实验目的与要求： 1、熟悉布局表格的绘制和设置，掌握利用布局表格来规划网页的技能； 2、熟悉框架集和框架的创建和编辑，掌握用框架来设计网页的技能。 实验条件：要求安装中文 Windows 操作系统、Dreamweaver 软件、主流浏览器，内 部组成局域网，外连 Internet 互联网。 研究与思考：比较表格和布局表格的区别。 实验项目七
实验名称：Dreamweaver网页布局设计（二） 实验内容：基于CSS的网页布局设计、层以及模板 实验性质：综合性、设计性 实验学时：2学时 实验目的与要求： 1、CSS的页面分割技术、盒子模式和定位技术： 2、熟悉层(AP Div)的基本操作并能利用层来定位页面元素： 3、草握模板的创建、绵辑和应用。 实验条件：要求安装中文Windows操作系统、Dreamweaver软件、主流浏览器，内 部组成局域树，外连Internet互联网。 研究与思考：相对定位和绝对定位如何配搭来布局页面？盒子的浮动和定位各自 适用于怎么样的网页布局？在构思“盒子的浮动”实验内容时以中国 四大名园为主题，让学生在掌握网页布局知识的同时，也对中国古代 建筑史有了初步的了解，从中国古代建筑重内涵的布局方式中领悟中 国人的“中庸”精神，进而对中国传统文化、艺术有了更深层次的感 悟。 课程设计 实验名称：综合实验（课程设计） 实验内容：Dreanweaver综合实验 实验性质：设计性 实验学时：2学时 实验目的与要求： 1、掌握本地站点的创建和管理以及熟悉网页文件的基本操作： 2、善于运用各种网页布局设计方法： 3、熟悉在网页中基本的网页元素的插入和相关的设置： 4、利用模板生成多个风格一致的网页： 5、通过行为实现网页的交互效果： 6、制作网页特效 实验条件：要求安装中文Windows操作系统、Dreamweaver软件、主流浏览器，内 部组成局域网，外连Internet互联网。 研究与思考：怎样利用所学知识完成制作网站的全过程？在网站主题选择方面要 求学生尽量从以下几方面进行考虑：从当今社会热点、难点出发：从 专业角度出发，将学生德育教育及专业知识有机地融合到散学任务中， 贯彻思政导向。 四、 考核方式 本课程采用考查的考试方式。通过对学生平时上机实验情况和提交的实验报 告进行实验成 考核打分，实验成绩、学生课堂表现以 出勤等 起计 平时园 绩考核，平时成绩占学期总成绩的30%：期末考试采取课程设计的方式进行，期术 成绩占学期总成绩的70%。 4
4 实验名称：Dreamweaver 网页布局设计（二） 实验内容：基于 CSS 的网页布局设计、层以及模板 实验性质：综合性、设计性 实验学时：2 学时 实验目的与要求： 1、CSS 的页面分割技术、盒子模式和定位技术； 2、熟悉层（AP Div）的基本操作并能利用层来定位页面元素； 3、掌握模板的创建、编辑和应用。 实验条件：要求安装中文 Windows 操作系统、Dreamweaver 软件、主流浏览器，内 部组成局域网，外连 Internet 互联网。 研究与思考：相对定位和绝对定位如何配搭来布局页面？盒子的浮动和定位各自 适用于怎么样的网页布局？在 构思“盒子的浮动”实验内容时以中国 四大名园为主题，让学生在掌握网页布局知识的同时，也对中国古代 建筑史有了初步的了解，从中国古代建筑重内涵的布局方式中领悟中 国人的“中庸”精神，进而对中国传统文化、艺术有了更深层次的感 悟。 课程设计 实验名称：综合实验（课程设计） 实验内容：Dreamweaver 综合实验 实验性质：设计性 实验学时：2 学时 实验目的与要求： 1、掌握本地站点的创建和管理以及熟悉网页文件的基本操作； 2、善于运用各种网页布局设计方法； 3、熟悉在网页中基本的网页元素的插入和相关的设置； 4、利用模板生成多个风格一致的网页； 5、通过行为实现网页的交互效果； 6、制作网页特效。 实验条件：要求安装中文 Windows 操作系统、Dreamweaver 软件、主流浏览器，内 部组成局域网，外连 Internet 互联网。 研究与思考：怎样利用所学知识完成制作网站的全过程？在网站主题选择方面要 求学生尽量从以下几方面进行考虑：从当今社会热点、难点出发；从 专业角度出发，将学生德育教育及专业知识有机地融合到教学任务中， 贯彻思政导向。 四、 考核方式 本课程采用考查的考试方式。通过对学生平时上机实验情况和提交的实验报 告进行实验成绩考核打分，实验成绩、学生课堂表现以及出勤等一起计入平时成 绩考核，平时成绩占学期总成绩的 30%；期末考试采取课程设计的方式进行，期末 成绩占学期总成绩的 70%
五、推荐实验教材和教学参考书 实验教材：自己编写（未出版），以电子版形式发给学生及相关老师。 教学参考书： [1]《网页制作与设计》，郭锂等，高等教育出版社(2010) [2]《网站建设与网页设计制作》，蔡永华等，清华大学出版社(2014) [3]姚琳，《网页设计与制作三合一(CS3)》,中国铁道出版社，2008.10 六、 其他需说明的 本门课程实验内容包括两种模式的实验：设计性实验、综合性实验：每个实 验主要是综合性实验：设计性实验以组为单位完成。 ◆综合性实验：列出目标要求，让学生按设计要求完成实验。 ◆设计性实验：让学生综合利用所学的知识进行较大项目的设计 大纲修订人：刁玉平 修订日期：2022年1月 大纲审定人：刁玉平 审定日期：2022年1月
5 五、 推荐实验教材和教学参考书 实验教材：自己编写（未出版），以电子版形式发给学生及相关老师。 教学参考书： [1] 《网页制作与设计》，郭锂等，高等教育出版社(2010) [2] 《网站建设与网页设计制作》，蔡永华等，清华大学出版社(2014) [3] 姚琳，《网页设计与制作三合一(CS3)》，中国铁道出版社，2008.10 六、 其他需说明的 本门课程实验内容包括两种模式的实验：设计性实验、综合性实验；每个实 验主要是综合性实验；设计性实验以组为单位完成。 ◆ 综合性实验：列出目标要求，让学生按设计要求完成实验。 ◆ 设计性实验：让学生综合利用所学的知识进行较大项目的设计。 大纲修订人：刁玉平 修订日期：2022 年 1 月 大纲审定人：刁玉平 审定日期: 2022 年 1 月