网页设计与制作_实验大纲

《网页设计与制作_实验大纲》由会员分享，可在线阅读，更多相关《网页设计与制作_实验大纲（12页珍藏版）》请在装配图网上搜索。

1、. .?网页设计与制作?课程实验教学大纲课程性质：独立设课课程属性：专业根底实验课适用专业：信息管理、应用技术、软件技术、多媒体技术学 时：总学时 96实验学时32开出时间： 一 年级 二 学期综合性、设计性实验工程数：4 学时先修课程：计算机根底一、课程简介?网页设计与制作?课程是计算机专业的一门必修专业课程。它涵盖Dreamweaver网页设计、Flash动画制作、Photoshop图像处理、动态等多项相关知识，通过开发一个，全面介绍WEB站点设计的根本操作技术和使用技巧，为后续?XML语言?、?动态网页制作? 等课程打下一个坚实的根底。 通过本课程的学习，使学生掌握运用Dreamweav

2、er进展的导入、规划、管理、发布的相关技术及网页制作的操作技能；能够熟练运用HTML中的文字、列表、表格、表单、图像、多媒体、等设计出多窗口网页、动态网页；能够利用Photoshop设计网页界面，处理图像；能够运用flash制作与网页相关的小动画。从而能够承当制作的规划、设计以及制作；能够有清晰思路和动手能力解决各种各样的实际问题；并具有与客户沟通、与团队成员协作的能力。从而培养学生的开发的能力和职业素质。二、实验教学目的及要求通过上机实践，让学生掌握网页设计与制作的根本知识和根本技能，能较熟练地在Dreamweaver平台下合理设计网页并对站点进展规划、管理、发布，从而为下一阶段学习动态网页

3、技术和高级Web程序设计打下良好的理论和实践根底。三、实验工程设置表序号实验名称实验学时仪器套数每套人数实验要求实验类型面向专业1HTML语言211掌握工作原理、HTML语言根底验证信息管理、应用技术、软件技术、多媒体技术2使用Dreamweaver建立和管理站点211熟悉Dreamweaver制作工具；学会如何建立站点和管理站点。验证信息管理、应用技术、软件技术、多媒体技术3文档的根本操作211掌握文档的根本操作、文本的根本操作。验证信息管理、应用技术、软件技术、多媒体技术4表格211掌握表格的根本操作，以及用布局表格来设计网页。验证信息管理、应用技术、软件技术、多媒体技术5图像和其他多媒体

4、211掌握对图像、声音、动画和视频的根本操作。验证信息管理、应用技术、软件技术、多媒体技术6211掌握创立和管理的方法。验证信息管理、应用技术、软件技术、多媒体技术7框架集211掌握如何创立具有框架构造的页面。验证信息管理、应用技术、软件技术、多媒体技术8CSS样式表211掌握制作CSS样式表的方法以及其应用方式。验证信息管理、应用技术、软件技术、多媒体技术9层和时间轴411掌握如何创立层、编辑层，如何创立时间轴动画等。验证信息管理、应用技术、软件技术、多媒体技术10行为411掌握添加行为和编辑行为的方法。验证信息管理、应用技术、软件技术、多媒体技术11库和模板211掌握创立库和模板的方法，并

5、熟练地对其进展管理和应用。验证信息管理、应用技术、软件技术、多媒体技术12表单211掌握如何设计表单，如何添加表单对象等。验证信息管理、应用技术、软件技术、多媒体技术13综合实例411学会设计并制作一个美观的静态主页综合信息管理、应用技术、软件技术、多媒体技术注：“实验类型：指演示性、验证性、设计性、综合性、研究性等四、考核方法与评分标准上机局部考核采取上机表现成绩结合实验报告成绩的方式进展，分数组成为： 上机成绩 =上机表现成绩50%+实验报告成绩50% 。上机局部的成绩在本课程总成绩中占有的分值为20。上机表现成绩基于上机实验出勤情况及上机过程的表现，每次上机对应1分。实验报告成绩基于每个

6、工程对应的实验报告完成情况，一个工程对应1分。五、教材或指导书1、教材：?网页设计与制作?，马占欣、周文刚、支建飞编著，中国水利水电，20072、主要参考书：1马占欣、周文刚、支建飞.网页设计与制作.：中国水利水电，2007.2甘登岱.网页设计三剑客(第5版).：机械工业,2006.六、单项实验的内容和要求1、实验名称：使用HTML语言进展简单的网页设计实验内容：用记事本或写字板编写HTML文档，该文档文件名为“*_1.htm,使得最后显示效果如下列图所示：实验要求：1.掌握的工作原理；2.掌握HTML语言的根本语法，并利用该语言进展简单的网页设计。2、实验名称：使用Dreamweaver创立

7、站点和主页文件实验内容：1建立本地站点(1)在D盘建立一个名为“mysite的文件夹。(2)在文件夹“mysite根底上建立一个名为“我的个人的站点。提示：站点|新建站点2.在“mysite中创立和设置主页文件index.html，要求如下：(1)标题为“我的个人,设置bg.jpg作为背景，上边距和左边距设为0(2)网页中插入三行文字1第一行为“欢送光临我的个人格式要求：居中，字体大小为72第二行为“这是我做的第一个网页格式要求：居左，字体大小为53第三行为“请多多指教格式要求：居右，字体大小为1(3)在网页适当的位置插入一条水平线，结合网页背景设置水平线的颜色实验要求：1掌握站点的创立2掌握

8、网页文件的根本操作；页面属性的设置；文本的插入和格式设置3、实验名称：文档的根本操作 实验内容：1.使用Dreamweaver制作如下一个页面，命名为“index.htm，并在浏览器中运行，结果如下列图所示。在主页“index.html中，要求添加背景颜色，每句诗之间要空行，且整个诗要求居中，在“QQ的生活创立一个空。实验要求：掌握文档的根本操作，掌握文本的属性设置。4、实验名称：表格的创立和使用实验内容：1创立如下列图所示的表格2.使用表格完成如下列图所示的页面布局。实验要求：1掌握表格的创立；表格的根本操作2掌握使用表格或布局表格设计网页的布局5、实验名称：多媒体元素的插入1使用布局表格完

9、成效果如下列图所示的页面布局，并插入网页的根本元素。Flash动画2、任选图像和文本，掌握两者的相互对齐方式实验要求：掌握图像、声音、动画、视频和其他多媒体元素的插入。6、实验名称：实验内容：1将上次的作业复制到d盘，对主页文件index.html进展以下操作：(1)选中图像美食介绍，到网页“msjs.html(2)选中文本“伪满皇宫，到网页“wmhg.html(3)为文本“联系我们创立电子，地址为自己的2.创立一个网页“map.html，将图片map.jpg插入到网页中，请地图中创立假设干热点，点击各热点时要求如下：1)点击*地区时，到zhoukou.html文件上在原窗口中显示。2)点击*

10、地区时，到某个图片上在新窗口中显示。3)点击*地区时，做一个电子，收件人是你本人的地址. 4)点击*地区时，做一个远程登陆，目标地址是：bbs.jnu.edu.5)点击*地区时，做一个脚本，用alert函数弹出任意内容的信息窗口6)点击*地区时，要求跳到zhoukou.html文件的底部在该文件底部添加命名锚记7)在网页的顶部添加标题“*省地图导航，并将它做成一个超，要求鼠标放上时，右下角显示标题“这是*图象地图，目标为空任意一种，并且可以使用“alt+d快捷键直接选中该。实验要求：1掌握相对路径的设置2掌握根本超级、电子、热点、锚点、脚本的创立7、实验名称：制作具有框架构造的网页实验内容：

11、1、建立一个名为“花的世界的站点，自己定义站点文件夹名，并创立一个如下所示的框架集，根据需要对其中各个框架的大小和属性进展设置并保存(文件|保存全部)，保存时建议输入一个好记的名称。当单击左边框架花的名称，主框架中会显示对应的内容。实验要求：1了解框架集和框架的概念2掌握框架构造网页的创立及常用属性的设置8、实验名称：创立CSS样式表实验内容： 1.完成以下操作：(1) 使用重定义标签的方法把1.htm中的表格中的所有文字设置成12像素，红色，应用范围仅对该文档。(2) 首先把1.html中的表格中“连接两个字做成空，然后把该使用重定义标签的方法设置成没有下划线，绿色，14象素大小。应用范围是

12、外部的样式表文件，名字为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

13、. 掌握CSS规那么定义对话框中样式八大类别的使用9、实验名称：利用时间轴创立层动画实验内容： 1、建立文件donghua1.htm，要求在图片背景上，使用能够扇动翅膀的3X蝴蝶图片(GIF格式)，结合层和时间轴设计出自由纷飞的效果。2、建立文件donghua2.htm,利用层的嵌套属性结合时间轴能够制作出站点中常见的公告板，公告板中的文字从下向上循环运动，能够对网页中的重要内容进展动态分布.3、建立文件donghua3.htm，利用录制层路径的方法创立一个动画，要求层运动的轨迹是一个近似圆形，预览时，动画在翻开浏览器两秒钟后才开场播放，请根据时间轴的相关知识实现。实验要求：1了解时间轴2掌握

14、应用层和时间轴制作动画的方法10、实验名称：添加行为实验内容： 1. 在页面1.htm中继续回车换行，插入一个层，设置层的背景颜色为绿色，当在层上单击鼠标时，层的背景颜色变为红色。2建立页面2.htm，插入图片“hh.jpg，在图片上3个圆形区域“机器猫“小黑熊“米老鼠上分别创立3个热点。当鼠标移到相应热点上时，显示相应的图片，鼠标移开时，所有图片消失。请根据层和行为实现。效果如下入所示：实验要求：1熟悉对象、事件、动作和行为的根本概念2掌握使用行为面板添加和编辑各种行为3. 掌握Dreamweaver自带行为的应用11、实验名称：创立模板和库 实验内容： 1.利用模板制作如下列图所示的网页。

15、图人与自然首页图 植物天地页面图动物世界页面实验要求：1掌握利用资源面板管理站点中各种资源2掌握利用模板和库制作统一风格的，并更新中的各个网页12、实验名称：制作表单实验内容： 结合表格的布局功能和CSS样式表的相关知识，设计如下列图所示的表单页面。实验要求：1.掌握在网页中插入表单的操作2.掌握表单元素属性的设置的操作3.能够运用表单及表单对象制作网页13、实验名称：制作一个静态网页实验内容：1. 请按照图中所示进展主页设计，在完成设计后的“个人信息栏中写上自己的*，学号。 2. 页面布局要合理，不能出现表格偏移，错位的情况。页面要分成明显的图片标题区，导航条区，主内容区以及最下面的说明区。3. 其中当前日期的代码已经给出时间代码.txt,请把该代码正确应用到网页的导航条中4. 导航条要求用单线表格完成如图，即表格边框仍为0，但单元格之间有分界限且为单线。5. 使用表单设计主页左上方的“极限论坛区域，区域中“注册和“登陆 按钮要求用图象域完成。6. 结合使用层和时间轴在主页左下方设计“站务新闻区域即自动垂直滚动条，区域内的文字在翻开主页时由下至上滚动，且当鼠标放到文字上时，文字停顿滚动，鼠标移开时滚动继续。7. 主页内的所有文字请使用CSS样式设为宋体，12象素，红色#d90000,居中对齐。“极限论坛和“站务新闻栏目的背景颜色用CSS样式设定为粉红色#ffecec。. v .