网设计与制作实验大纲

1、誓+与制作实验大纲集团标准化工作小组Q8QX9QTX8QQB8Q8NQ8QJ8M8QMN网页设计与制作课程实验教学大纲课程性质：独立设课课程属性：专业基础实验课适用专业：应用技术、多媒体技术学 时：总学时96实验学时32开出时间：二_年级一学期综合性、设计性实验项目数：4学时先修课程：计算机基础一、 课程简介网页设计与制作课程是计算机专业的一门必修专业课程。它涵盖Dreamweaver网页设讣、 Flash动画制作、Photoshop图像处理、动态网站等多项相关知识，通过开发一个网站，全而介绍 WEB站点设计的基本操作技术和使用技巧，为后续XML语言、动态网页制作等课程打下一 个坚实的基础。通

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

3、ver平台下合理设计网页并对站点进行规划、管理、发布，从而为下一阶段学 习动态网页技术和高级Web程序设计打下良好的理论和实践基础。三、 实验项H设置表序 号实验 名称实验 学时仪器 套数每套 人数实验要求实验类 型面向专业1HTML 语言211掌握WWW工作原 理、HTML语言基础验证信息管理、应 用技术、软件 技术、多媒体 技术2使用 Dream weave r建立 和管 理站 点211熟悉Dreamweaver 制作工具；学会如 何建立站点和管理 站点。验证信息管理、应 用技术、软件 技术、多媒体技术3蠶r211掌握文档的基本操 作、文本的基本操 作。验证信息管理、应 用技术、软件 技术

4、、多媒体技术4表格211掌握表格的基本操 作，以及用布局表 格来设计网页。验证信息管理、应 用技术、软件 技术、多媒体技术5像其多体 图和他媒211掌握对图像、声 音、动画和视频的 基本操作。验证信息管理、应 用技术、软件 技术、多媒体技术6链接211掌握创建链接和管 理链接的方法。验证信息管理、应 用技术、软件 技术、多媒体技术7框架 集211掌握如何创建具有 框架结构的页面。验证信息管理、应 用技术、软件 技术、多媒体技术8CSS样 式表211掌握制作CSS样式 表的方法以及其应 用方式。验证信息管理、应 用技术、软件 技术、多媒体技术9层和 时间 轴411掌握如何创建层、 编辑层，如何创

5、建 时间轴动画等。验证信息管理、应 用技术、软件 技术、多媒体技术10行为411掌握添加行为和编 辑行为的方法。验证信息管理、应 用技术、软件 技术、多媒体技术11库和 模板211掌握创建库和模板 的方法，并熟练地 对其进行管理和应 用。验证信息管理、应 用技术、软件 技术、多媒体技术12表单211掌握如何设计表 单，如何添加表单 对象等。验证信息管理、应 用技术、软件 技术、多媒体技术13综合 实例411学会设计并制作一 个美观的静态主页综合信息管理、应 用技术、软件 技术、多媒体技术(注：“实验类型”：指演示性、验证性、设计性、综合性、研究性等)四、考核方法与评分标准上机部分考核采取上机表

6、现成绩结合实验报告成绩的方式进行，分数组成为：上机成绩二上机表现成绩(50%) +实验报告成绩(50% ) o上机部分的成绩在本课程总成绩中占有的分值为20。上机表现成绩基于上机实验出 勤情况及上机过程的表现，每次上机对应1分。实验报告成绩基于每个项U对应的实验 报告完成情况，一个项目对应1分。五、教材或指导书1、教材：网页设计与制作，马占欣、周文刚、支建飞编着，中国水利水电岀 版社，20072、主要参考书：1）马占欣、周文刚、支建飞.网页设计与制作.北京：中国水利水电出版社，2007.2）甘登岱.网页设计三剑客（第5版）.北京：机械工业出版社,2006.六、单项实验的内容和要求1、实验名称：

7、使用HTML语言进行简单的网页设讣实验内容：用记事本或写字板编写HTML文档，该文档文件名为“姓名”，使得最后显示效果如下图所示：实验要求：1.掌握WWW的工作原理；2.掌握HTML语言的基本语法，并利用该语言进行简单的网页设计。2、实验名称：使用Dreamweaver创建站点和主页文件实验内容：1.建立本地站点（1）在D盘建立一个名为“mysite”的文件夹。在文件夹“mysite”基础上建立一个名为“我的个人网站”的站点。（提示：站点丨 新建站点）2.在“mysite”中创建和设置网站主页文件，要求如下：（1）标题为“我的个人网站”，设置作为背景，上边距和左边距设为0（2）网页中插入三行文

8、字1）第一行为“欢迎光临我的个人网站”（格式要求：居中，字体大小为7） 2）第二行 为“这是我做的第一个网页”（格式要求：居左，字体大小为5） 3）第三行为“请多多 指教”（格式要求：居右，字体大小为1）（3）在网页适当的位置插入一条水平线，结合网页背景设置水平线的颜色实验要求：1.掌握站点的创建2.掌握网页文件的基本操作；页面属性的设置；文本的插入和格式设置3.实验名称：文档的基本操作实验内容：1.使用Dreamweaver制作如下一个页面，命名为“”，并在浏览器中运行，结果如下图 所示。在主页“ ”中，要求添加背景颜色，每句诗之间要空行，且整个诗要求居中，在“QQ的生活”创建一个空链接。实

9、验 要 求： 掌握 文档 的基 本操 作， 掌握 文本 的属 性设置。4、实验名称：表格的创建和使用实验内容：1.创建如下图所示的表格2.使用表格完成如下图所示的页面布局。实验要求：1.掌握表格的创建；表格的基本操作2.掌握使用表格或布局表格设汁网页的布局5、实验名称：多媒体元素的插入1.使用布局表格完成效果如下图所示的页面布局，并插入网页的基本元素。Flash动画平包橄 辽羹、 怨相常 isis 04130413位林下九 況蛊I I1 1!: !: 股 ； 、长碎介绍长裤是叫旦育跌洲田同城市规划恃点.旳城市市匡内石跖注he 谨L 街iJl阿涪松 柏*=宛如宗浜*荥色&：邨 座殛街，OL场刚花

10、丛饬 注.是人（门徒 思和展练、婉乐旳好扬所汗5区內艮无羽中回古致徨腕 也 百曰或和氐或祖筑 而不断啊題的高空大血和丘民住宅小国険剜W：舌不 昕胸济锤甘今中夕卜玫址 丸融聊映的約州和现代4七处市的止力 位于市旦 乐北郎的伤椭洲国宝TS,罡中匡酒阴末代鼻常茯新気穿谢仪務三次 践基时的宫戲 伪滴玫杈国 芳阮轸 八大部 机务I日站初供 荻圣地嫉若寺也是国京飯旅游般点2、任选图像和文本，掌握两者的相互对齐方式实验要求：掌握图像、声音、动画、视频和其他多媒体元素的插入。6、实验名称：链接实验内容：1.将上次的作业复制到d盘，对主页文件”进行以下操作：选中图像”美食介绍”，链接到网页”（2）选中文本“伪满

11、皇宫”，链接到网页“”（3）为文本“联系我们”创建电子邮件链接，地址为自己的邮箱2.创建一个网页“”，将图片”插入到网页中，请地图中创建若干热点，点击各热点 时要求如下：1）点击周口地区时，链接到文件上（在原窗口中显示）。2）点击三门峡地区时，链接到某个图片上（在新窗口中显示）。3）点击郑州地区时，做一个电子邮件链接，收件人是你本人的邮箱地址.4）5）点击南阳地区时，做一个脚本链接，用alert函数弹出任意内容的信息窗口6）点击洛阳地区时，要求跳到文件的底部（在该文件底部添加命名锚记）7）在网页的顶部添加标题“河南省地图导航”，并将它做成一个超链接，要求鼠标放上 时，右下角显示标题“这是河南图

12、象地图”，链接目标为空链接（任意一种），并且可 以使用“dlt+d”快捷键直接选中该链接。实验要求：伪附土皆长影世鉅城世界瞬班公03挣月冷姦林公回，与曰城市时t邻.四阿与四干市E 各括锻-阳区、二逅区、绿园（3、収阳.1K4 召 fe vk净月5事九吐公闪识沟甘加I联耳我/门I加入收麺I站怅佶箱仞:A p-杆1.掌握相对路径的设置2.掌握基本超级链接、电子邮件链接、热点链接、锚点链接、脚本链接的创建7、 实验名称：制作具有框架结构的网页实验内容：1、建立一个名为“花的世界”的站点，自己定义站点文件夹名，并创建一个如下所示 的框架集，根据需要对其中各个框架的大小和属性进行设置并保存(文件保存全部

13、)， 保存时建议输入一个好记的名称。当单击左边框架花的名称，主框架中会显示对应的内 容。实验要求：1.了解框架集和框架的概念2.掌握框架结构网页的创建及常用属性的设置8、 实验名称：创建CSS样式表实验内容：1完成以下操作：(1)使用重定义标签的方法把中的表格中的所有文字设置成12像素，红色，应用范围 仅对该文档。(2)首先把中的表格中“连接”两个字做成空链接，然后把该链接使用重定义标签的方 法设置成没有下划线，绿色，14象素大小。应用范围是外部的样式表文件，名字为(3)使用CSS高级样式，把中的链接的四种状态分别定义为：正常状态(link)为红 色，12像素；鼠标放上状态(hovor)为蓝色

14、，14像素；正在点击状态(active)为黃 色，16像素；访问过的状态(visitied)为黑色，18像素。以上四种状态都没有下划 线。应用范围仅对该文档。(4)使用自定义样式(class)的方法，把中的4句话分别设置4种不同颜色和字体的 的自定义样式，名字任意。(5)新建一个文件，在其中建立一个链接，用链接外部样式表的形式把中的样式应用到 当前文档中。实验要求：1.了解CSS的基本概念2.掌握三种CSS样式类型的创建及应用3.掌握” CSS规则定义”对话框中样式八大类别的使用9、 实验名称：利用时间轴创建层动画实验内容：1、 建立文件，要求在图片背景上，使用能够扇动翅膀的3张蝴蝶图片(GI

15、F格式)，结合 层和时间轴设计出自由纷飞的效果。2、建立文件，利用层的嵌套属性结合时间轴能够制作出站点中常见的公告板，公告板中 的文字从下向上循环运动，能够对网页中的重要内容进行动态分布.3、建立文件，利用录制层路径的方法创建一个动画，要求层运动的轨迹是一个近似圆 形，预览时，动画在打开浏览器两秒钟后才开始播放，请根据时间轴的相关知识实现。 实验要求：1.了解时间轴2.掌握应用层和时间轴制作动画的方法10、实验名称：添加行为实验内容：1.在页面中继续回车换行，插入一个层，设置层的背景颜色为绿色，当在层上单击鼠标时，层的背 景颜色变为红色。2.建立页面，插入图片“”，在图片上3个圆形区域“机器猫

16、” “小黑熊”“米老鼠”上分别创建 3个热点。当鼠标移到相应热点上时，显示相应的图片，鼠标移开时，所有图片消失。请根据层和 行为实现。效果如下入所示：实验要求：1.熟悉对象、事件、动作和行为的基本概念2.掌握使用行为面板添加和编辑各种行为3.掌握Dreamweaver自带行为的应用11、实验名称：创建模板和库实验内容：1.利用模板制作如下图所示的网页。图人与自然首页图植物天地页面图动物世界页面实验要求：1.掌握利用资源面板管理站点中各种资源2.掌握利用模板和库制作统一风格的网站，并更新网站中的各个网页12、实验名称：制作表单实验内容：结合表格的布局功能和CSS样式表的相关知识，设计如下图所示的表单页面。实验要求：1.掌握在网页中插入表单的操作2.掌握表单元素属性的设置的操作3.能够运用表单及表单对象制作网页13、实验名称：制作一个静态网页实验内容：1.请按照图中所示进行主页设计，在完成设计后的“个人信息”栏中写上自己的姓 名，学号。2.页面布局要合理，不能出现表格偏移，错位的惜况。页面要分成明显的图片标题区，导航条区，3.主内容区以及最下面的版权说明区。4.其中当前日期的代码已经给出（时间代码.txt），请把该代码正确应用到网页的导航 条中5.导航