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