《网页设计与制作基础》课程实验教学大纲

1、网页设计与制作基础课程实验教学大纲一、 课程基本信息课程代码：119492课程名称：网页设计与制作基础英文名称：Fundamentals of Web Design and Production实验总学时：16学时适用专业：部分专业本科学生课程类别：通识课先修课程：计算机应用基础二、 实验教学的总体目的和要求（一） 总体目标本课程实验教学的目的是让学生提高自己的实际动手能力，熟练掌握当前的流行网页制作工具以及网页设计辅助软件。通过这门课程的学习，应使学生掌握以下能力：要求学生掌握网页设计的基础知识；要求学生掌握网页设计与制作的基础语言HTML语言；要求学生掌握通过Dreamweaver建设网站

2、和编辑网页的技术。（二） 总体要求1、 对学生的要求掌握了计算机基础知识，有一定的美学鉴赏能力；实验前必须对实验内容进行预习；上实验课必须带齐“实验指导书”、“教材”、实验用磁盘，认真按照实验内容和实验要求完成实验，同学间可相互讨论，但不得大声喧哗；课后按要求完成实验报告。2、 对教师的要求有一定的教学经验，了解各种网页制作工具以及辅助设计工具；课前准备充分；课中耐心指导学生，发现问题及时解决，不做与实验内容无关的事情，不能无故擅离实验室；课后认真批改学生的实验报告。3、 对实验条件的要求(1) 硬件要求多媒体计算机，内部组成局域网，对外每台机器均连入Internet互联网。(2) 软件要求中

3、文Windows操作系统； Dreamweaver软件；主流浏览器。三、 实验教学内容实验项目一实验名称：网页的认识实验内容：网页欣赏以及初识HTML。实验性质：综合性实验学时：2学时实验目的与要求：1、 掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、 利用记事本来编辑HTML文档并浏览；3、 熟悉HTML基本标记的使用。实验条件：要求安装中文Windows操作系统，内部组成局域网，外连Internet互联网。研究与思考：能用文本编辑软件建立站点吗？实验项目二实验名称： HTML标记的使用实验内容：熟悉HTML的各种标记。实验性质：综合性实验学时：2学时实验目的与

4、要求：1、 掌握HTML文档的结构及其制作规范。2、 掌握文本段落格式标记，包括注释标记，分段标记，换行/不换行标记，标题标记，分节标记，水平线标记，文本居中标记等；3、 掌握文字显示效果标记，包括字体标记，字符样式标记以及转义字符等；4、 掌握列表格式标记，包括无序列表标记，有序列表标记等；5、 掌握超链接的使用，包括锚点标记、页面跳转链接、书签超链接、下载文件链接以及电子邮件链接等；6、 掌握图片标记，包括插入图片标记，图片超链接标记网页背景标记；7、 掌握音频和视频标记，包括链接音频或视频文件、设置网页背景音乐标记，内嵌音频或视频播放插件等；8、 掌握动态元素标记。9、 掌握使用表格标记

5、来创建和设置表格；10、 熟悉表单标记并掌握利用这些标记来创建表单以及其中的各种表单域。实验条件：要求安装中文Windows操作系统，内部组成局域网，外连Internet互联网。研究与思考：分段标记与换行标记的区别？实验项目三实验名称：Dreamweaver基本操作（一）实验内容：Dreamweaver的工作环境下文本、图像以及超链接的插入及设置。实验性质：综合性实验学时：2学时实验目的与要求：1、 熟悉Dreamweaver的工作环境并了解本地站点的建设和管理；2、 熟悉网页文件的基本操作；3、 熟练掌握在网页文件中文本、图像、超链接的添加和设置。实验条件：要求安装中文Windows操作系统

6、、Dreamweaver软件、主流浏览器，内部组成局域网，外连Internet互联网。研究与思考：建立站点的时候要注意哪些方面？实验项目四实验名称：Dreamweaver基本操作（二）实验内容：Dreamweaver的工作环境下表格、表单以及多媒体对象的添加和设置。实验性质：综合性实验学时：2学时实验目的与要求：1、 熟练掌握在网页文件中多媒体对象的添加和设置；2、 熟练掌握在网页文件中表格的添加和设置；3、 熟练掌握在网页文件中表单的添加和设置。实验条件：要求安装中文Windows操作系统、Dreamweaver软件、主流浏览器，内部组成局域网，外连Internet互联网。研究与思考：添加各

7、种音频元素的区别？实验项目五实验名称：CSS样式表实验内容：掌握CSS样式表的基本知识以及利用CSS样式表设置格式和制作特效。实验性质：综合性实验学时：2学时实验目的与要求：1、 了解CSS 的基本知识；2、 熟悉“CSS样式”面板；3、 掌握样式表的创建和应用。实验条件：要求安装中文Windows操作系统、Dreamweaver软件、主流浏览器，内部组成局域网，外连Internet互联网。研究与思考：比较行内样式、内部样式和外部样式三种样式的作用范围。在本实验项目中引入一些能体现人文精神、仁爱之心的网页例文素材，把价值观培育有机地融入课程，润物无声，立德树人，使得学生能在巩固专业知识的同时增

8、强了自己对主流价值的感性认识。实验项目六实验名称：Dreamweaver网页布局设计（一）实验内容：布局表格以及框架实验性质：综合性、设计性实验学时：2学时实验目的与要求：1、 熟悉布局表格的绘制和设置，掌握利用布局表格来规划网页的技能；2、 熟悉框架集和框架的创建和编辑，掌握用框架来设计网页的技能。实验条件：要求安装中文Windows操作系统、Dreamweaver软件、主流浏览器，内部组成局域网，外连Internet互联网。研究与思考：比较表格和布局表格的区别。实验项目七实验名称：Dreamweaver网页布局设计（二）实验内容：基于CSS的网页布局设计、层以及模板实验性质：综合性、设计性

9、实验学时：2学时实验目的与要求：1、 CSS的页面分割技术、盒子模式和定位技术；2、 熟悉层（AP Div）的基本操作并能利用层来定位页面元素；3、 掌握模板的创建、编辑和应用。实验条件：要求安装中文Windows操作系统、Dreamweaver软件、主流浏览器，内部组成局域网，外连Internet互联网。研究与思考：相对定位和绝对定位如何配搭来布局页面？盒子的浮动和定位各自适用于怎么样的网页布局？在 构思“盒子的浮动”实验内容时以中国四大名园为主题，让学生在掌握网页布局知识的同时，也对中国古代建筑史有了初步的了解，从中国古代建筑重内涵的布局方式中领悟中国人的“中庸”精神，进而对中国传统文化、

10、艺术有了更深层次的感悟。课程设计实验名称：综合实验（课程设计）实验内容：Dreamweaver综合实验实验性质：设计性实验学时：2学时实验目的与要求：1、 掌握本地站点的创建和管理以及熟悉网页文件的基本操作；2、 善于运用各种网页布局设计方法；3、 熟悉在网页中基本的网页元素的插入和相关的设置；4、 利用模板生成多个风格一致的网页；5、 通过行为实现网页的交互效果；6、 制作网页特效。实验条件：要求安装中文Windows操作系统、Dreamweaver软件、主流浏览器，内部组成局域网，外连Internet互联网。研究与思考：怎样利用所学知识完成制作网站的全过程？在网站主题选择方面要求学生尽量从

11、以下几方面进行考虑：从当今社会热点、难点出发；从专业角度出发，将学生德育教育及专业知识有机地融合到教学任务中，贯彻思政导向。四、 考核方式本课程采用考查的考试方式。通过对学生平时上机实验情况和提交的实验报告进行实验成绩考核打分，实验成绩、学生课堂表现以及出勤等一起计入平时成绩考核，平时成绩占学期总成绩的30%；期末考试采取课程设计的方式进行，期末成绩占学期总成绩的70%。五、 推荐实验教材和教学参考书实验教材：自己编写（未出版），以电子版形式发给学生及相关老师。教学参考书：1 网页制作与设计，郭锂等，高等教育出版社(2010)2 网站建设与网页设计制作，蔡永华等，清华大学出版社(2014)3 姚琳，网页设计与制作三合一(CS3)，中国铁道出版社，20