网页设计与制作实验原理-网页设计与制作-实验大纲.doc

《网页设计与制作》课程实验教学大纲 课程性质：独立课程 课程属性：专业基础实验课程 适用专业：应用技术、多媒体技术 学时：总学时 96 实验学时 32 开课时间：学期综合、设计实验 项目数：4学分 必修课程：计算机基础 一、课程简介 《网页设计与制作》课程是计算机专业的专业必修课。 涵盖了Dreamweaver页面设计、Flash动画制作、Photoshop图像处理、动态网站等诸多相关知识。 通过开发一个网站，全面介绍了WEB网站设计的基本操作技术和使用技巧，为后续的《XML语言》、《ASP.NET动态网页制作》等课程打下坚实的基础。 通过本课程的学习，学生将掌握使用Dreamweaver导入、规划、管理、发布网站的相关技术和网页制作的操作技能； 能够熟练运用HTML中的文本、链接、列表、表格、表单、图像、多媒体等设计多窗口网页和动态网页； 能够使用Photoshop设计网页界面和处理图像； 能够使用flash制作与网页相关的小动画。 因此，能够承担网站制作的策划、设计和制作； 能够有清晰的思路和实践经验，能够解决各种实际问题； 并有能力与客户沟通、与团队成员协作。 这将培养学生开发网站的能力和专业素质。 2.实验教学目的和要求：通过计算机实践，使学生掌握网页设计和制作的基础知识和基本技能，能够在reamweaver平台下合理设计网页并规划、管理和发布网站，从而为接下来的第一阶段学习动态网页技术和高级网页编程打下良好的理论和实践基础。

3.实验项目设置表 实验名称 实验时数 仪器台数 每台人数 实验要求 实验类型面向掌握WWW工作原理、HTML语言基本验证信息管理、应用技术、软件技术、和多媒体技术。 使用DreamweaverDreaaver制作工具； 了解如何建立网站和管理网站。 验证信息管理、应用技术、软件技术、多媒体技术文件的基本操作。 掌握文档和文本的基本操作。 验证信息管理、应用技术、软件技术、多媒体技术掌握表格的基本操作，并运用布局表格进行网页设计。 验证信息管理、应用技术、软件技术、多媒体技术图像等多媒体对图像、声音、动画和视频的基本操作的掌握。 验证信息管理、应用技术、软件技术、多媒体技术掌握创建链接和管理链接的方法。 验证信息管理、应用技术、软件技术、多媒体技术，掌握如何创建具有框架结构的页面。 验证信息管理、应用技术、软件技术、多媒体技术。 掌握CSS样式表的制作方法及其应用。 验证信息管理、应用技术、软件技术、多媒体技术（注：“实验型”：指论证、验证、设计、综合性、研究性等） 4、考核方法及评分标准 计算机化部分评估是通过将计算机性能分数与实验报告结果相结合来进行的。 成绩构成为：机考成绩=机考成绩（50%）+实验报告成绩（机考部分成绩的50%占本课程总成绩的20分。

计算机表现得分是根据计算机实验的出勤情况和计算机体验期间的表现而定。 每次使用电脑得1分。 实验报告结果以每个项目对应的实验报告完成情况为准。 1个项目对应15个。 教材或指导书籍 1、教材：《网页设计与制作》，马占新、周文刚、支建飞主编，中国水利水电出版社，20072。 主要参考书：网页设计与制作。 北京：中国水利水电出版社，2007．2）甘登岱． 网页设计三剑客（第五版）。 北京：机械工业出版社，2006。 6.单次实验的内容和要求。 掌握如何创建图层、编辑图层、如何创建时间线、动态验证信息管理、应用技术、软件技术、多媒体技术。 10 种行为。 掌握添加行为和编辑行为的方法。 验证信息管理、应用技术、软件技术、多媒体技术 11、掌握创建库和模板的方法，并熟练地管理和管理。 验证信息管理、应用技术、软件技术、多媒体技术。 掌握如何设计表单以及如何添加表单。 验证信息管理、应用技术、软件技术、多媒体技术 学习设计和制作精美的静态主页 综合信息管理、应用技术、软件技术、多媒体技术 1.实验名称：使用HTML语言进行简单的网页设计实验内容：使用记事本或写字板编写HTML文档。 文档的文件名为“Name_1**tm”，这样最终的显示效果如下图： 实验要求： 1、掌握WWW的工作原理； 2.

掌握HTML语言的基本语法，并使用该语言进行简单的网页设计。 2、实验名称：使用Dreamweaver创建站点和主页文件 实验内容： 1、创建本地站点 （1）在D盘文件夹中创建名为“mysite”的站点。 (2) 基于文件夹“mysite”创建一个名为“我的个人网站”的站点。 （提示：站点|新建站点）在“mysite”中创建并设置网站主页文件索引。 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. 选择任意图像和文本，并掌握两者的相互对齐。 实验要求：Flash动画熟练掌握图像、声音、动画、视频等多媒体元素的插入。 6. 实验名称： 链接实验内容： 1. 将上次作业复制到 d 盘，对主页文件“index.html”进行如下操作： (1) 选择图片“食物介绍”，链接到网页“msjs.html” (2) 选择文字“伪满洲国皇宫”，链接至网页“wmhg.html” (3) 为文字“联系我们”创建电子邮件链接，地址为您自己的电子邮件地址2. 创建网页“map.html”，并将图片“map.jpg”插入网页中。 请在地图上创建多个热点。 点击各热点时，要求如下： 1）点击周口区域时，链接到 zhoukou.html 文件（原窗口显示）。 2）当您点击三门峡地区时网页设计与制作实验原理，会链接到某张图片（在新窗口中显示）。 3）当您点击郑州地区时，创建一个电子邮件链接，收件人是您自己的电子邮件地址。

4）点击信阳区域时，进行远程登录。 目标地址为： 5）点击南阳区域时，制作脚本链接，利用提醒功能弹出任意内容的信息窗口。 6) 点击洛阳地区时，要求跳转到zhouko.html文件底部（在文件底部添加命名锚点） 7) 在文件顶部添加标题“河南省地图导航”网页并使其成为超链接。 鼠标放置后，右下角会显示标题“这是河南影像地图”。 链接目标是空链接（任何种类），可以使用“alt+d”快捷键直接选择该链接。 实验要求： 1. 掌握相对路径的设置 2. 掌握基本超链接、邮件链接、热点链接、锚点链接、脚本链接的创建 7. 实验名称：制作一个框架结构的网页 实验内容： 1.创建一个页面名为“花”“世界”的站点，自己定义站点文件夹名称，并创建如下图所示的框架集。 根据需要设置每个帧的大小和属性并保存（文件 | 全部保存）。 建议保存时输入一个便于记忆的值。 名字。 当您点击左框架的花名时，主框架中就会显示相应的内容。 实验要求： 1. 理解框架集和框架的概念 2. 理解框架集和框架的概念。 掌握框架结构网页的创建以及常用属性的设置 8.实验名称：创建 CSS 样式表 实验内容： 1.完成以下操作：使用重新定义标签的方法设置 1.htm 中表格中的所有文本至12像素，红色，应用范围仅限于本文档。

首先将1.html中表格中的“连接”一词制作成空链接表情包设计，然后使用redefine标签方法将链接设置为无下划线、绿色、大小为14像素。 应用范围是一个外部样式表文件，名称为new w. css使用CSS高级样式定义了2.htm中链接的四种状态如下： 正常状态（链接）为红色，12像素； 鼠标悬停状态（hovor）为蓝色，14 像素； 点击状态（激活）为黄色，16像素； 已访问状态（visited）为黑色，18像素。 上述四种状态都没有下划线。 仅适用于本文档。 使用自定义样式（类）方法为3.html中的4个句子设置4种不同颜色和字体的自定义样式，名称任意。 将样式应用到当前文档。 实验要求： 1.了解CSS的基本概念 2.掌握三类CSS样式的创建和应用。 掌握“CSS规则定义”对话框中八类样式的使用。 9.实验名称：使用时间轴创建图层动画。 实验内容： 1、创建文件donghua1.htm网页设计与制作实验原理，要求为图片背景。 上图中，使用了3张可以扇动翅膀的蝴蝶图片（GIF格式），并结合图层和时间线来创建自由飞翔的效果。 2. 创建文件donghua2。 htm，利用图层的嵌套属性结合时间轴，可以创建网站中常见的公告板。 公告牌中的文字自下而上循环，可以动态分发网页上的重要内容。

3、创建文件donghua3.htm，使用记录图层路径的方法创建动画。 要求层运动的轨迹为近似圆。 预览时，打开浏览器后两秒才会开始播放动画。 请遵循时间表。 相关知识的实现。 实验要求： 1.了解时间轴 2.掌握应用层和时间轴创建动画的方法 10.实验名称：添加行为实验内容：在第1页上。继续在htm中按回车换行，插入一个图层，并将图层的背景颜色设置为绿色。 当鼠标单击图层时，图层的背景颜色变为红色。 2、创建页面2.htm，插入图片“hh.jpg”，在图片的三个圆形区域上创建3个热点：“哆啦A梦”、“小黑熊”、“米老鼠”。 当鼠标移动到相应的热点时，就会显示相应的图片。 当鼠标移开时，所有图片都会消失。 请根据层次和行为来实施。 效果如下： 实验要求： 1、熟悉对象、事件、动作、行为的基本概念 2、掌握使用行为面板添加和编辑各种行为。 掌握Dreamweaver自身行为的应用。 11.实验名称：创建模板和库。 实验内容： 1、使用模板创建一个网页吉祥物，如下图所示。