实验8用DreamweaverMX制作个人网页.doc

实验8 用Dreamweaver MX 制作个人网页 一、实验目的 了解理解网站制作的过程，会收集、制作网页素材。 熟悉Dreamweaver MX的基本功能。 掌握网站设计工具Dreamweaver MX的使用。 掌握简单网页制作的步骤与方法。 二、实验内容 1. Dreamweaver MX的基础知识 Dreamweaver MX是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 在制作个人网页之前我们先介绍一下Dreamweaver MX的一些基本知识。从桌面的快捷方式或者开始程序中启动Dreamweaver MX后进入下面的窗口。 图7.1 Dreamweaver MX的窗口 ① 菜单栏 ① 为菜单区，和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,举个例子，选中该区编辑(E)中的参数选择(S)... CTRL+U,如图7.2。这里，您可以将Dreamweaver MX设为自己喜欢的样式，一般使用默认就可以，如图7.3。 图7.2 参数选项图 图7.3 字体项的默认值 ②、③ 插入栏 图7.1中，② 是插入项目选择工具(插入面板)，在 ② 选中了某个项目， ③ 中会出现相应的插入项目，下面详细介绍，选中常用这一项后可得下图： 图7.4 插入栏 锚点用于网页中的定位，如网页的上、中、下等；图像占位符是用于动态交换图片的；Fireworks HTML为用Fireworks软件切割出来的图片；交换图像为鼠标移上去时变为另一图片，增强动感；表格数据可以将其它文件的数据转化为表格，插进网页；标签选择器可以插入其它不常用的HTML标签。 在 ② 中选中布局一项，共有标准视图和布局视图两种视图，如图7.5所示： 图7.5 布局 在标准视图下，可以插入表格和在网页制作区画图层。切换到布局视图下，如图7.6： 图7.6 布局视图 在布局视图下，可以在网页制作区描绘布局视图下的表格和单元格，描绘好之后，再切换到标准视图后，可以转化为表格。这个可以用来排版网页。 在 ② 中选中文本一项，可以对文本进行格式化，如图7.7： 图7.7 文本图 A可以对字体进行全面的格式；B可以将字体变为粗体；I为斜体；S为加强字体。 在 ② 中???择表单，可以插入各种按钮，如图8： 图7.8 表单图 A 为表单；B 为文本框；C 为隐藏域；D 为文本区域；E 为多选框；F 为单选框；G 为单选按钮组；H 为列表/菜单；I 为跳菜单；J 为图像域；K 为文本字段；L 为按钮；M 为标签；N 为字段集。 在 ② 中选中模版可以使用模版制作网页或自己创建模版，做起网页更加方便快捷。 在 ② 中选中字符可以插入一些特殊的字符，如：? ? ￡,其中BR为换行符（快捷键为CTRL＋ENTER）。 在 ② 中选中媒体，可以插入FLASH，LASH按扭，FLASH文本，Applet等插件。 在 ② 中选中文本头，将出现下面的画面： 图7.9 文件头图 ④ 文档工具栏 　　文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。 工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 图7.10 文档工具栏 　　以下对选项进行说明： 　　显示代码视图　仅在“文档”窗口中显示“代码”视图。 　　显示代码视图和设计视图　在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。 　　显示设计视图　仅在“文档”窗口中显示“设计”视图。 　　标题　允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。 　　没有浏览器/检查错误　使您可以检查跨浏览器兼容性。 　　文件管理　显示“文件管理”弹出菜单。 　　在浏览器中预览/调试　在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。 　　刷新设计视图　当您在“代码”视图中进行更改后刷新文档的“设计”视图。 视图选项　允许您为“代码”视图和“设计”视图设置选项。 ⑤ “文档”窗口 显示您当前创建和编辑的文档。 ⑥ “属性”窗口 “属性”窗口（下图显示的是字体的属性）： 用于查看和更改所选对象或文本的各种属性。 图7.11 属性工具栏 　⑦ “面板组”窗口 “面板组”是分组在某个标题下面的相关面板的集合。若要展开一个面