网页设计与制作实验大纲.docx
《网页设计与制作实验大纲.docx》由会员分享，可在线阅读，更多相关《网页设计与制作实验大纲.docx（15页珍藏版）》请在冰豆网上搜索。
网页设计与制作实验大纲
《网页设计与制作》课程实验教学大纲
课程性质：
独立设课
课程属性：
专业基础实验课
适用专业：
应用技术、多媒体技术
学时：
总学时96实验学时32
开出时间：
二年级一学期
综合性、设计性实验项目数：
4学时
先修课程：
计算机基础
一、课程简介
《网页设计与制作》课程是计算机专业的一门必修专业课程。
它涵盖Dreamweaver网页设计、Flash动画制作、Photoshop图像处理、动态网站等多项相关知识，通过开发一个网站，全面介绍WEB站点设计的基本操作技术和使用技巧，为后续《XML语言》、《动态网页制作》等课程打下一个坚实的基础。
通过本课程的学习，使学生掌握运用Dreamweaver进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能；能够熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、等设计出多窗口网页、动态网页；能够利用Photoshop设计网页界面，处理图像；能够运用flash制作与网页相关的小动画。
从而能够承担网站制作的规划、设计以及制作；能够有清晰思路和动手能力解决各种各样的实际问题；并具有与客户沟通、与团队成员协作的能力。
从而培养学生的开发网站的能力和职业素质。
二、实验教学目的及要求
通过上机实践，让学生掌握网页设计与制作的基本知识和基本技能，能较熟练地在Dreamweaver平台下合理设计网页并对站点进行规划、管理、发布，从而为下一阶段学习动态网页技术和高级Web程序设计打下良好的理论和实践基础。
三、实验项目设置表
序号
实验名称
实验
学时
仪器
套数
每套
人数
实验要求
实验类型
面向专业
1
HTML语言
2
1
1
掌握WWW工作原理、HTML语言基础
验证
信息管理、应用技术、软件技术、多媒体技术
2
使用Dreamweaver建立和管理站点
2
1
1
熟悉Dreamweaver
制作工具；学会如何建立站点和管理站点。
验证
信息管理、应用技术、软件技术、多媒体技术
3
文档的基本操作
2
1
1
掌握文档的基本操作、文本的基本操作。
验证
信息管理、应用技术、软件技术、多媒体技术
4
表格
2
1
1
掌握表格的基本操作，以及用布局表格来设计网页。
验证
信息管理、应用技术、软件技术、多媒体技术
5
图像和其他多媒体
2
1
1
掌握对图像、声音、动画和视频的基本操作。
验证
信息管理、应用技术、软件技术、多媒体技术
6
链接
2
1
1
掌握创建链接和管理链接的方法。
验证
信息管理、应用技术、软件技术、多媒体技术
7
框架集
2
1
1
掌握如何创建具有框架结构的页面。
验证
信息管理、应用技术、软件技术、多媒体技术
8
CSS样式表
2
1
1
掌握制作CSS样式表的方法以及其应用方式。
验证
信息管理、应用技术、软件技术、多媒体技术
9
层和时间轴
4
1
1
掌握如何创建层、编辑层，如何创建时间轴动画等。
验证
信息管理、应用技术、软件技术、多媒体技术
10
行为
4
1
1
掌握添加行为和编辑行为的方法。
验证
信息管理、应用技术、软件技术、多媒体技术
11
库和模板
2
1
1
掌握创建库和模板的方法，并熟练地对其进行管理和应用。
验证
信息管理、应用技术、软件技术、多媒体技术
12
表单
2
1
1
掌握如何设计表单，如何添加表单对象等。
验证
信息管理、应用技术、软件技术、多媒体技术
13
综合实例
4
1
1
学会设计并制作一个美观的静态主页
综合
信息管理、应用技术、软件技术、多媒体技术
（注：
“实验类型”：
指演示性、验证性、设计性、综合性、研究性等）
四、考核方法与评分标准
上机部分考核采取上机表现成绩结合实验报告成绩的方式进行，分数组成为：
上机成绩=上机表现成绩（50%）+实验报告成绩（50%）。
上机部分的成绩在本课程总成绩中占有的分值为20。
上机表现成绩基于上机实验出勤情况及上机过程的表现，每次上机对应1分。
实验报告成绩基于每个项目对应的实验报告完成情况，一个项目对应1分。
五、教材或指导书
1、教材：
《网页设计与制作》，马占欣、周文刚、支建飞编著，中国水利水电出版社，2007
2、主要参考书：
1）马占欣、周文刚、支建飞.网页设计与制作.北京：
中国水利水电出版社，2007.
2）甘登岱.网页设计三剑客（第5版）.北京：
机械工业出版社,2006.
六、单项实验的内容和要求
1、实验名称：
使用HTML语言进行简单的网页设计
实验内容：
用记事本或写字板编写HTML文档，该文档文件名为“姓名_1.htm”,使得最后显示效果如下图所示：
实验要求：
1.掌握WWW的工作原理；
2.掌握HTML语言的基本语法，并利用该语言进行简单的网页设计。
2、实验名称：
使用Dreamweaver创建站点和主页文件
实验内容：
1．建立本地站点
（1）在D盘建立一个名为“mysite”的文件夹。
（2）在文件夹“mysite”基础上建立一个名为“我的个人网站”的站点。
（提示：
站点|新建站点）
2.在“mysite”中创建和设置网站主页文件index.html，要求如下：
（1）标题为“我的个人网站”,设置bg.jpg作为背景，上边距和左边距设为0
（2）网页中插入三行文字
1）第一行为“欢迎光临我的个人网站”（格式要求：
居中，字体大小为7）2）第二行为“这是我做的第一个网页”（格式要求：
居左，字体大小为5）3）第三行为“请多多指教”（格式要求：
居右，字体大小为1）
（3）在网页适当的位置插入一条水平线，结合网页背景设置水平线的颜色
实验要求：
1．掌握站点的创建
2．掌握网页文件的基本操作；页面属性的设置；文本的插入和格式设置
3、实验名称：
文档的基本操作
实验内容：
1.使用Dreamweaver制作如下一个页面，命名为“index.htm”，并在浏览器中运行，结果如下图所示。
在主页“index.html”中，要求添加背景颜色，每句诗之间要空行，且整个诗要求居中，在“QQ的生活”创建一个空链接。
实验要求：
掌握文档的基本操作，掌握文本的属性设置。
4、实验名称：
表格的创建和使用
实验内容：
1．创建如下图所示的表格
2.使用表格完成如下图所示的页面布局。
实验要求：
1．掌握表格的创建；表格的基本操作
2．掌握使用表格或布局表格设计网页的布局
5、实验名称：
多媒体元素的插入
1．使用布局表格完成效果如下图所示的页面布局，并插入网页的基本元素。
2、任选图像和文本，掌握两者的相互对齐方式
实验要求：
掌握图像、声音、动画、视频和其他多媒体元素的插入。
6、实验名称：
链接
实验内容：
1．将上次的作业复制到d盘，对主页文件”index.html”进行以下操作：
（1）选中图像”美食介绍”，链接到网页“msjs.html”
（2）选中文本“伪满皇宫”，链接到网页“wmhg.html”
（3）为文本“联系我们”创建电子邮件链接，地址为自己的邮箱
2.创建一个网页“map.html”，将图片”map.jpg”插入到网页中，请地图中创建若干热点，点击各热点时要求如下：
1）点击周口地区时，链接到zhoukou.html文件上（在原窗口中显示）。
2）点击三门峡地区时，链接到某个图片上（在新窗口中显示）。
3）点击郑州地区时，做一个电子邮件链接，收件人是你本人的邮箱地址.4）点击信阳地区时，做一个远程登陆，目标地址是：
5）点击南阳地区时，做一个脚本链接，用alert函数弹出任意内容的信息窗口
6）点击洛阳地区时，要求跳到zhoukou.html文件的底部（在该文件底部添加命名锚记）
7）在网页的顶部添加标题“河南省地图导航”，并将它做成一个超链接，要求鼠标放上时，右下角显示标题“这是河南图象地图”，链接目标为空链接（任意一种），并且可以使用“alt+d”
快捷键直接选中该链接。
实验要求：
1．掌握相对路径的设置
2．掌握基本超级链接、电子邮件链接、热点链接、锚点链接、脚本链接的创建
7、实验名称：
制作具有框架结构的网页
实验内容：
1、建立一个名为“花的世界”的站点，自己定义站点文件夹名，并创建一个如下所示的框架集，根据需要对其中各个框架的大小和属性进行设置并保存（文件|保存全部），保存时建议输入一个好记的名称。
当单击左边框架花的名称，主框架中会显示对应的内容。
实验要求：
1．了解框架集和框架的概念
2．掌握框架结构网页的创建及常用属性的设置
8、实验名称：
创建CSS样式表
实验内容：
1.完成以下操作：
（1）使用重定义标签的方法把1.htm中的表格中的所有文字设置成12像素，红色，应用范围仅对该文档。
（2）首先把1.html中的表格中“连接”两个字做成空链接，然后把该链接使用重定义标签的方法设置成没有下划线，绿色，14象素大小。
应用范围是外部的样式表文件，名字为new.css
（3）使用CSS高级样式，把2.htm中的链接的四种状态分别定义为：
正常状态（link）为红色，12像素；鼠标放上状态（hovor）为蓝色，14像素；正在点击状态（active）为黄色，16像素；访问过的状态（visitied）为黑色，18像素。
以上四种状态都没有下划线。
应用范围仅对该文档。
（4）使用自定义样式（class）的方法，把3.htm中的4句话分别设置4种不同颜色和字体的的自定义样式，名字任意。
（5）新建一个文件4.htm，在其中建立一个链接，用链接外部样式表的形式把new.css中的样式应用到当前文档中。
实验要求：
1．了解CSS的基本概念
2．掌握三种CSS样式类型的创建及应用
3.掌握”CSS规则定义”对话框中样式八大类别的使用
9、实验名称：
利用时间轴创建层动画
实验内容：
1、建立文件donghua1.htm，要求在图片背景上，使用能够扇动翅膀的3张蝴蝶图片（GIF格式），结合层和时间轴设计出自由纷飞的效果。
2、建立文件donghua2.htm,利用层的嵌套属性结合时间轴能够制作出站点中常见的公告板，公告板中的文字从下向上循环运动，能够对网页中的重要内容进行动态分布.
3、建立文件donghua3.htm，利用录制层路径的方法创建一个动画，要求层运动的轨迹是一个近似圆形，预览时，动画在打开浏览器两秒钟后才开始播放，请根据时间轴的相关知识实现。
实验要求：
1．了解时间轴
2．掌握应用层和时间轴制作动画的方法
10、实验名称：
添加行为
实验内容：
1.在页面1.htm中继续回车换行，插入一个层，设置层的背景颜色为绿色，当在层上单击鼠标时，层的背景颜色变为红色。
2．建立页面2.htm，插入图片“hh.jpg”，在图片上3个圆形区域“机器猫”“小黑熊”“米老鼠”上分别创建3个热点。
当鼠标移到相应热点上时，显示相应的图片，鼠标移开时，所有图片消失。
请根据层和行为实现。
效果如下入所示：
实验要求：
1．熟悉对象、事件、动作和行为的基本概念
2．掌握使用行为面板添加和编辑各种行为
3.掌握Dreamweaver自带行为的应用
11、实验名称：
创建模板和库
实验内容：
1.利用模板制作如下图所示的网页。
图人与自然首页
图植物天地页面
图动物世界页面
实验要求：
1．掌握利用资源面板管理站点中各种资源
2．掌握利用模板和库制作统一风格的网站，并更新网站中的各个网页
12、实验名称：
制作表单
实验内容：
结合表格的布局功能和CSS样式表的相关知识，设计如下图所示的表单页面。
实验要求：
1.掌握在网页中插入表单的操作
2.掌握表单元素属性的设置的操作
3.能够运用表单及表单对象制作网页
13、实验名称：
制作一个静态网页
实验内容：
1.请按照图中所示进行主页设计，在完成设计后的“个人信息”栏中写上自己的姓名，学号。
2.页面布局要合理，不能出现表格偏移，错位的情况。
页面要分成明显的图片标题区，导航条区，
主内容区以及最下面的版权说明区。
3.其中当前日期的代码已经给出（时间代码.txt）,请把该代码正确应用到网页的导航条中
4.导航条要求用单线表格完成（如图，即表格边框仍为0，但单元格之间有分界线且为单线）。
5.使用表单设计主页左上方的“极限论坛”区域，区域中“注册”和“登陆”按钮要求用图象域完成。
6.结合使用层和时间轴在主页左下方设计“站务新闻”区域（即自动垂直滚动条），区域内的文字在打开主页时由下至上滚动，且当鼠标放到文字上时，文字停止滚动，鼠标移开时滚动继续。
7.主页内的所有文字请使用CSS样式设为宋体，12象素，红色（#d90000）,居中对齐。
“极限论坛”和“站务新闻”栏目的背景颜色用CSS样式设定为粉红色（#ffecec）。
升级会员 