多媒体实验四多媒体网页制作_多媒体网页制作

多媒体实验四多媒体网页制作由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“多媒体网页制作”。

实验四 多媒体网页制作

【目的与要求】

1．熟悉网页制作软件Dreamweaver功能和特点；

2．学习使用网页制作软件Dreamweaver制作网页的方法

【实验仪器与器件】

硬件：多媒体个人计算机 软件：Dreamweaver软件

【实验内容】

1.网站建立与网页发布流程

建立网站首先要在本地机上构建本地站点，创建合理的站点结构，编辑制作网页，用合理的组织形式来管理站点中的文档，并对站点进行必要的测试。一切就序后，再将站点上载到Internet服务器，供其他人浏览。

网站建立与网页发布基本流程是：站点规划与设计→素材准备→建立网站与网页制作→网站测试→网站发布→维护更新。

2.Dreamweaver 操作界面

Dreamweaver是美国MACROMEDIA公司开发的集网页制作和网站管理于一身的所见即所得的网页编辑器,Dreamweaver与flash、Fireworks三个软件被称之为网页制作三剑客。Dreamweaver具有两个主要功能： 网站建立与维护；网页制作。

Dreamweaver 集成布局操作界面按功能分为四大部分：即页面编辑器；面板组；属性面板；站点管理器。

3.创建网站

1）规划网站

在建立网站与制作网页之前首先要规划站点： ① 规划站点结构：合理的站点结构可以加快对站点的设计，提高工作效率。② 规划站点导航机制：提供清晰易懂的浏览方法，采用统一的网页组织形式，引导用户轻松访问网站。

③ 构建整体的站点风格：网站中网页风格应该统一，使网站特点鲜明，突出主题。

2）创建本地站点 在制作网页之前，必须首先创建网站或打开网站，此后Dreamwear会自动将所有网站资源（HTML文档、图片、动画、声音、程序等）都保存到网站文件夹中，从而保证网站发布后网页上的所有元素可以正常浏览。网站分为本地站点（网站存放在本机硬盘上）与远程站点（网站存放在用于发布网站的服务器端）。

4.页面布局

页面布局是进行网页设计最基本、最重要的工作之一。常用的布局方法有框架、表格和图层。

①框架

框架式常见的页面设计方式，使用框架可以讲一个网页分割成几个既有联系又各自独立的部分，从而实现在一个浏览器中显示多个网页文档的目的。一个包含有三个框架的网页实际上是由四个独立的 HTML 页面组成：框架集文件和三个包含在框架中显示的内容的文件。当使用框架集设计网页时，为了该网页能在浏览器中正常工作必须对这四个页面都进行保存。

要在框架内使用链接，必须为链接设置一个目标。这个目标是指在哪个框架内链接要打开的内容。

②表格

表格是进行网页布局时最常用的工具。表格为网页设计者提供了在页面中增加垂直和水平结构的简洁方法。使用表格可以在页面上排列数据与图像，在页面上设计栏目等。

③层

层是一种网页元素定位技术，使用层可以精确定位页面元素，层对于制作网页的部分重叠具有特殊作用。层可以放置在页面的任意位置，可以在层中防止文本、图像或其它层。

5.设置超链接

利用超级链接可以实现文档间或文档中的跳转，超级链接由两部分组成:链接的载体以及链接的目标地址。许多页面元素可以作为链接载体，如:文本、图像、图像热区、轮替图像、动画…。而链接目标可以是任意网络资源，如:页面、图像、声音、程序、其他网站、Email、锚点。

6.交互表单

表单是网页中提供交互操作的重要手段，它可以收集浏览者提供的信息，并对此作出反应，处理用户的要求。每个表单中都可以包含一系列的输入工具，如文本域、密码域、单选按钮、复选框、列表框、菜单、命令按纽、隐藏域等。在Dreamweaver中添加表单就像插入其它对象一样，只需将光标置于插入点处，点击表单工具栏中的表单图标或插入菜单中的表单命令，将在文挡窗口中出现红色虚线组成的空白表单体，在表单体中可以放置各种表单对象。

7.添加多媒体

Dreamweaver中可以添加多种格式的多媒体插入对象。8.系统的测试优化

网页制作完毕后，就可以将网站发布到Internet上，在发布网站之前应首先对网站进行测试与整理。

Dreamweaver为整理站点，提供了多种方法。使用“检查超链接”的方法，可以迅速地找出网站中无效的链接。

【实验内容及步骤】

1、主页导航：

2、网页布局：

欢迎主页

Before风景发展

Now专业文化活动实习

Future工作展望

AboutMe3、链接结构：

4、制作截图：

属性设置

链接设置 【心得体会】

1、主题创意：

本网站主题围绕作者而建，包括三个部分，过去（Before）、现在（Now）和未来（Future）。充分利用图片、音频、视频等素材，体现出作者对当前生活的热爱，对美好未来的努力奋斗，表现一种宁静淡泊的情怀。

过去部分展现作者家乡的风景（scenery）和发展（develop），通过回忆，描绘对家乡的眷恋和期望。现在部分则是作者大学生活，分别是专业（special）、文化（culture）、活动（travel）和实习（practice）。从四个方面展示了母校的文化氛围、专业方向，和对即将到来的实习之期待。未来部分从工作（work）和展望（hope）两方面描绘出一个令人期待的美好生活，并为之努力的坚持。

关于我（About me）是一个小小的个人简历，恰逢导师布置的训练任务，借此制作网页机会，融入其中。算是在节约时间和创新层面，有自己的想法。

2、操作步骤：

第一步，确定主题；

首先规划出大致的网页设计，思考所必要的素材等项目。

第二步，素材整理；

按照第一步构想内容，在网上搜寻图片等素材，音频和视频文件则是很早之前就有收藏。之后又利用各种软件处理好，做成适合网页制作的大小和美感。

第三步，网页制作； 打开Dreamweaver CS4 开始一点点制作，不懂就问，不懂就查，不懂就搜。期间经历各种失误、错误，导致两次NG，不得不重新来过。最后，（此环节）耗时两天，共计36小时以上，终于完成。

3、实验心得

本次网站制作，感觉比上一实验视频制作还要辛苦。相对来说素材要求很多，网站的结构、布局、链接等环节比较麻烦。毕竟是一个人在完成，没有美工等的协助。图片自己处理，音频自己处理，视频自己处理。经过此役，完全是一个人在“战斗”。很辛苦，很累。不过，很值得！

所有的事情一个人完成，那么，所有的知识就是自己学到。经历过的“阻挠”、“挫折”，实则是宝贵的经验，现在发生以后就不会发生。

其实很多灵感都是在制作过程中产生的，“咦这个导航可以这么来着。”“噢图片也可以那样无限滚动展示，多炫！”“嗯，加个音乐效果应该很好。”不断冒出新的方式，新的灵感。这也算是工作的乐趣所在，沉浸于此，知足常乐。

较大的一次失误出现在链接设置，初步的结构做出来之后测试了一下可以通过。然后在查看链接时候，之前正确的链接在查了一遍之后全部错误。当时心死一般的冰凉啊，如果错误那就预示着又要全部重新来过，情形十分骇人。

不能大意，又检查了一遍还是错误。报错在百度搜索了一下，也没有解决之道。就在即将按下删除的确认时候，一下子惊醒过来。迅速在每个文件夹中建立链接的Button文件。再次测试终于成功，顿时“泪流满面”，欣喜若狂。

这事说明了，遇事千万不能慌乱，以免做出任何不智的举动，使得之后万分后悔为时已晚。心若冰清，天塌不惊！

【实验结果】

附件：

压缩文件：多媒体实验四.rar 附件下载：百度网盘

http://pan点baidu点com/文件，若是部分内容无法显示，请设置浏览器允许插件运行，或者下载支持插件。