实验二实验三.docx

实验二实验三.docx

《实验二实验三.docx》由会员分享，可在线阅读，更多相关《实验二实验三.docx（13页珍藏版）》请在冰点文库上搜索。

实验二实验三

实验二：

使用DREAMWEAVER的表格布局WEBFORM

一、实验目的和要求

1．了解DREAMWEAVER表格的基本作用

2．了解使用DREAMWEAVER表格来布局WEBFORM的基本方法

3.创建具有指定格式的表格

二、实验准备

1.关于表格

1）表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。

表格由一行或多行组成；每行又由一个或多个单元格组成。

虽然HTML代码中通常不明确指定列，但Dreamweaver允许您操作列、行和单元格。

2）当选定了表格或表格中有插入点时，Dreamweaver会显示表格宽度和每个表格列的列宽。

宽度旁边是表格标题菜单与列标题菜单的箭头。

使用菜单可以快速访问一些与表格相关的常用命令。

根据需要可以启用或禁用宽度和菜单

3）如果您未看到表的宽度或列的宽度，说明没有在HTML代码中指定该表或列的宽度。

如果出现两个数字，说明“设计”视图中显示的可视宽度与HTML代码中指定的宽度不一致。

4）当拖动表格的右下角来调整表格的大小，或将内容添加到比设置宽度大的单元格时会发生这种情况。

例如，如果您将某列的宽度设置为200像素，而添加的内容将宽度延长为250像素，则该列将显示两个数字：

“200”（代码中指定的宽度）和“（250）”（位于括号中，表示该列呈现在屏幕上的可视宽度）。

2.插入一个表格并添加内容

1）使用“插入”栏或“插入”菜单来创建一个新表格。

然后，按照在表格外添加文本和图像的方式，向表格单元格中添加文本和图像

2）若要插入表格，请执行以下操作：

⏹在“文档”窗口的“设计”视图中，将插入点放在需要表格出现的位置。

⏹执行下列操作之一：

◆选择“插入”>“表格”。

◆在工具栏的“常用”类别中，单击“表格”按钮。

即会出现“表格”对话框。

⏹完成对话框。

⏹单击“确定”。

表格即出现在文档中。

三、实验内容

1.创建并保存新页面

1）首先创建一个新页面，并将它保存到Web站点的本地根文件夹cafe_townsend中。

该页面最终将成为虚构餐馆CafeTownsend的主页。

2）如果您尚未创建本地根文件夹cafe_townsend，则必须先完成创建，然后再继续。

✦在Dreamweaver中，选择“文件”>“新建”。

✦在“新建文档”对话框的“空白页”选项卡上，从“页面类型”列表中选择“HTML”，然后单击“创建”。

✦选择“文件”>“另存为”。

✦在“另存为”对话框中，浏览至定义为站点的本地根文件夹的cafe_townsend文件夹并打开该文件夹。

在设置站点和项目文件”中，您在名为local_sites的文件夹中创建了此文件夹。

✦在“文件名”文本框中输入index.html，然后单击“保存”。

文件名即出现在应用程序窗口顶部的标题栏中。

✦在新文档顶部的“文档标题”文本框中，键入CafeTownsend。

这就是页面的标题（与文件名不同）。

站点访问者在Web浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。

✦选择“文件”>“保存”来保存该页面。

2.插入表格

接下来，您将添加一个表格，用于放置文本、图形和MacromediaFlash资源。

1）在页面上单击一次，在页面左上角放置插入点。

2）选择“插入”>“表格”。

3）在“插入表格”对话框中，执行下面的操作：

✦在“行数”文本框中，输入3。

✦在“列数”文本框中，输入1。

✦在“表格宽度”文本框中，输入700。

✦在“表格宽度”弹出式菜单中，选择“像素”。

✦在“边框粗细”文本框中，输入0。

✦在“单元格边距”文本框中，输入0。

✦在“单元格间距”文本框中，输入0。

接下来，您将添加一个表格，用于放置文本、图形和MacromediaFlash资源。

4）单击“确定”。

一个三行一列的表格即出现在文档中。

该表格的宽度为700像素，边

框、单元格边距和单元格间距均为0。

5）单击一次该表格右侧取消对它的选择。

6）选择“插入”>“表格”以插入另一个表格。

7）在“插入表格”对话框中，对第二个表格执行下面的操作：

✦在“行数”文本框中，输入1。

✦在“列数”文本框中，输入3。

✦在“表格宽度”文本框中，输入700。

✦在“表格宽度”弹出式菜单中，选择“像素”。

✦在“边框粗细”文本框中，输入0。

✦在“单元格边距”文本框中，输入0。

✦在“单元格间距”文本框中，输入0。

接下来，您将添加一个表格，用于放置文本、图形和MacromediaFlash资源。

8）单击“确定”。

第二个表格（该表格具有一行三列）即出现在第一个表格下方。

9）单击该表格右侧取消对它的选择。

10）通过选择“插入”>“表格”，然后在“插入表格”对话框中输入以下值来插入第三个表格：

在“行数”文本框中，输入1。

在“列数”文本框中，输入1。

在“表格宽度”文本框中，输入700。

在“表格宽度”弹出式菜单中，选择“像素”。

在“边框粗细”文本框中，输入0。

在“单元格边距”文本框中，输入0。

在“单元格间距”文本框中，输入0。

11）单击“确定”。

第三个表格（该表格具有一行一列）即出现在第二个表格下方。

3．设置表格属性

现在将使用“扩展表格”模式设置具体的表格属性，“扩展表格”模式是用于临时添加表格的单元格边距和间距并增加表格边框以简化编辑的一种功能。

特别需要指出的是，它使您能够精确地放置插入点，而不会意外选择错误的表格或其它表格内容。

1）选择“查看”>“表格模式”>“扩展表格模式”。

2）在第一个表格的第一行内单击一次。

3）在“属性”检查器（“窗口”>“属性”）的“单元格高度”文本框中输入90，然后按Enter键。

4）在第一个表格的第二行内单击一次。

5）在“属性”检查器的“单元格高度”文本框中输入166，然后按Enter键（Windows）

6）在第一个表格的第三行内单击一次。

7）在“属性”检查器的“单元格高度”文本框中输入24，然后按Enter

键,现在第一个表格中的三行应具有不同的高度。

8）在第二个表格的第一列内单击一次。

9）在“属性”检查器的“单元格宽度”文本框中输入140，然后按Enter键。

10）在第二个表格的第二列内单击一次。

11）在“属性”检查器的“单元格宽度”文本框中输入230，然后按Enter键。

12）将第三列的宽度设置为330个像素。

如果已打开表格选择器（“查看”>“可视化助理”>“表格宽度”），将能看到刚才在各个表格列上输入的三个像素值。

无需为这个表格的单元格输入任何高度值，因为这些单元格的高度将取决于以后添加的内容。

13）最后，在最后一个表格（该表格包含一行和一列）内单击一次。

14）在“属性”检查器的“单元格高度”文本框中输入24，然后按Enter键。

15）单击“文档”窗口顶部的“退出扩展表格模式”链接，返回到“标

准”模式。

16）保存页面。

4．插入图像占位符

图像占位符是在准备好将最终图形添加到Web页面之前使用的图形。

在对Web页面进行布局时图像占位符很有用，因为通过使用图像占位符，

可以在真正创建图像之前确定图像在页面上的位置。

1）在文档窗口中，在第一个表格的第一行内单击一次。

2）选择“插入栏目”>“图像对象”>“图像占位符”。

3）在“图像占位符”对话框中，执行下面的操作：

◆在“名称”文本框中，键入banner_graphic。

◆在“宽度”文本框中，输入700。

◆在“高度”文本框中，输入90。

◆单击颜色框并从颜色选择器中选择一种颜色。

在本教程中，我们选择了红棕色（#993300）。

◆保留“替换文本”文本框为空。

4）单击“确定”。

图像占位符出现在第一个表格内。

图像占位符显示最终放置于此处的

图像的标签和大小属性

5）保存页面。

5.向页面添加颜色

现在，将通过设置某些表格单元格以及页面背景的颜色，向页面添加更多颜色。

1）在上述包含三列的表格的第一个单元格内单击一次。

2）单击“常用”选项卡中的标签选择器（单元格标签）以选择该单元格。

3）在“属性”检查器（“窗口”>“属性”）中，在“背景颜色”文本框内单击一次。

“背景颜色”文本框位于“背景颜色”（Bg）颜色框旁。

4）在“背景颜色”文本框中，输入十六进制值#993300，然后按Enter键。

表格单元格的颜色即变为红棕色。

5）在上述包含三列的表格的第二个单元格内单击一次。

6）单击标签选择器中的标签（单元格标签）以选择该单元格。

7）在“属性”检查器中，在“背景颜色”文本框内单击一次，输入十六进制值#F7EEDF，然后按Enter键。

表格单元格的颜色即变为浅棕色。

8）重复第5－7步，将第三个表格单元格的颜色也更改为浅棕色。

9）设置完这三个单元格的颜色后，单击一次表格的外部，取消选择该表格。

接下来，您将通过修改页面属性来更改整个页面的背景颜色。

通过“页面属性”对话框可以设置一些页面属性，包括页面字体的大小和颜色、已访问链接的颜色以及页面边距等。

1）选择“修改”>“页面属性”。

2）在“页面属性”对话框的“外观”类别中，单击“背景颜色”颜色框，然后从颜色选择器中选择黑色（#000000）。

3）单击“确定”。

页面的背景即变为黑色。

4）保存您的工作。

页面布局现已完成。

该布局包含一些表格，用于放置各种资源，如图像、文本和Flash视频（FLV）文件。

实验三：

使用DREAMWEAVER给布局WEBFORM添加元素

一、实验目的和要求

1．了解DREAMWEAVER页面内容的基本类型

2．了解给DREAMWEAVER表格布局添加元素的基本方法

3.创建具有指定内容的页面

二、实验准备

1.关于图像

✦虽然存在很多种图形文件格式，但Web页面中通常使用的只有三种，即GIF、JPEG和PNG。

目前，GIF和JPEG文件格式的支持情况最好，大多数浏览器都可以查看它们。

由于PNG文件具有较大的灵活性并且文件大小较小，所以它对于几乎任何类型的Web图形都是最适合的；但是，MicrosoftInternetExplorer（4.0和更高版本）和Netscape

✦GIF（图形交换格式）文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。

JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。

随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。

通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。

✦PNG（可移植网络图形）文件格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha通道透明的支持。

PNG是MacromediaFireworks固有的文件格式。

PNG文件可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在

任何时候所有元素都是可以完全编辑的。

文件必须具有.png文件扩展名才能被Dreamweaver识别为PNG文件。

2．链接与导航

✦Dreamweaver提供多种创建超文本链接的方法，可创建到文档、图像、多媒体文件或可下载软件的链接。

可以建立到文档内任意位置的任何文本或图像（包括标题、列表、表、层或框架中的文本或图像）的链接。

3.跳转菜单

✦跳转菜单是文档中的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。

可以创建到整个Web站点内文档的链接、到其它Web站点上文档的链接、电子邮件链接、到图形的链接，也可以创建到可在浏览器中打开的任何文件类型的链接。

✦跳转菜单可包含三个基本部分：

✦（可选）菜单选择提示，如菜单项的类别说明，或一些指导信息等，例如“选择其中一项：

”

✦（必需）所链接菜单项的列表：

用户选择某个选项，则链接的文档或文件被打开。

✦（可选）“前往”按钮。

4.导航条

导航条由图像或图像组组成，这些图像的显示内容随用户操作而变化。

导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。

5.关于图像地图

✦图像地图指已被分为多个区域（或称“热点”）的图像；当用户单击某个热点时，会发生某种操作（例如，打开一个新文件）。

✦客户端图像地图将超文本链接信息存储在HTML文档中，而不是像服务器端图像地图那样，存储在单独的地图文件中。

当站点访问者单击图像中的热点时，相关URL被直接发送到服务器。

✦这样使得客户端图像地图比服务器端图像地图要快，因为服务器不必解释访问者的单击位置。

NetscapeNavigator2.0及后续版本、NCSAMosaic2.1和3.0以及InternetExplorer的所有版本都支持客户端图像地图。

✦Dreamweaver并不改变现有文档中对服务器端图像地图的引用；在同一文档中，可以同时使用客户端图像地图和服务器端图像地图。

不过，同时支持这两种图像地图类型的浏览器赋予客户端图像地图以优先权。

若要在文档中包含服务器端图像地图，必须编写相应的HTML代码。

6.音频、视频和交互式元素

可以将以下媒体文件合并到Dreamweaver页中：

Flash和Shockwave影片、QuickTime、AVI、Javaapplet、ActiveX控件以及各种格式的音频文件。

Dreamweaver附带了Flash对象，无论您的计算机上是否安装了Flash，您都可以使用这些

对象。

在使用Dreamweaver提供的Flash命令前，您应该对以下三种不同的Flash文件类型有所了解：

✦Flash文件（.fla）是所有项目的源文件，在Flash程序中创建。

此类型的文件只能在Flash中打开（而不是在Dreamweaver或浏览器中打开）。

您可以在Flash中打开Flash文件，然后将它导出为SWF或SWT文件以在浏览器中使用。

✦FlashSWF文件（.swf）是Flash（.fla）文件的压缩版本，已进行了优化以便于在Web上查看。

此文件可以在浏览器中播放并且可以在Dreamweaver中进行预览，但不能在Flash中编辑此文件。

这是您使用Flash按钮和Flash文本对象时创建的文件类型。

✦Flash模板文件（.swt）能够修改和替换FlashSWF文件中的信息。

这些文件用于Flash按钮对象中，使您能够用自己的文本或链接修改模板，以便创建要插入在您的文档中的自定义SWF。

✦Flash元素文件（.swc）是一个FlashSWF文件，通过将此类文件合并到Web页，您可以创建丰富的Internet应用程序。

Flash元素有可自定义的参数，通过修改这些参数可以执行不

同的应用程序功能。

✦Flash视频文件格式（.flv）是一种视频文件，它包含经过编码的音频和视频数据，用于通过FlashPlayer传送。

例如，如果有QuickTime或WindowsMedia视频文件，您可以使用编码器（如Flash8VideoEncoder或SorensenSqueeze）将视频文件转换为FLV文件。

三、实验内容

1.向页面添加内容（插入图像）

✦创建页面布局之后，就可以将资源添加到页面。

从添加图像开始。

可以在Dreamweaver中使用多种方法向Web页面添加图像。

✦替换图像占位符

1）在Dreamweaver中，打开在前面章节中创建的index.html文件

2）双击页面顶部的图像占位符banner_graphic。

3）在“选择图像源文件”对话框中，浏览至您定义为站点根文件夹的

cafe_townsend文件夹中的images文件夹。

4）选择banner_graphic.jpg文件并单击“确定”。

5）在表格外单击一次以取消选中该图像。

6）保存该页（“文件”>“保存”）。

2.使用“插入”菜单插入图像

1）在第一个表格的第三行（低于刚插入的横幅图形两行，彩色表格单元格之上）内单击一次。

2）选择“插入”>“图像”。

3）在“选择图像源文件”对话框中，浏览至cafe_townsend文件夹中的images文件夹，选择body_main_header.gif文件，然后单击“确定”。

一个长的彩色图形出现在该表格行中。

它看上去更像表格单元格的背景

色，而不是图形，但如果仔细看，您将看到该图形具有圆角。

添加完所

有资源之后，这种圆角效果将使页面的下半部分呈现一种有趣的外观。

3.通过拖动插入图像

1）在页面上最后一个表格的最后一行（彩色表格单元格之下）中单击一次。

2）在“文件”面板（“窗口”>“文件”）中，找到body_main_footer.gif文件（它位于images文件夹中），将该文件拖到最后一个表格的插入点。

3）在表格外单击一次，并保存该页面（“文件”>“保存”）

4.从“资源”面板插入图像

1）在由三列组成的表格（第一个浅棕色表格单元格）的中间一列内单击一次。

2）在“属性”检查器（“窗口”>“属性”）中，从“水平”弹出式菜单中选择“居中对齐”，然后从“垂直”弹出式菜单中选择“顶端”。

该操作将表格单元格的内容对齐到单元格的中间，并使单元格的内容从单元格顶端开始。

3）按一次Enter键创建更多空间。

4）单击“文件”面板中的“资源”选项卡，或选择“窗口”>“资源”。

则会显示您的站点资源。

5）如果未选择“图像”视图，则单击“图像”以查看您的图像资源。

6）在“资源”面板中，选择street_sign.jpg文件。

7）执行下列操作之一：

■将street_sign.jpg文件拖到中心位置的表格单元格中的插入点。

■单击“资源”面板底部的“插入”。

8）在表格外单击一次以取消选中该图像。

9）保存该页。

5.插入并播放Flash文件

1）在Dreamweaver的“文档”窗口中打开index.html页面的情况下，在第一个表格的第二行内单击一次。

即紧接上一节中插入的横幅图形的表格行。

2）在“属性”检查器（“窗口”>“属性”）中，从“水平”弹出式菜单中选择“居中”，然后从“垂直”弹出式菜单中选择“居中”。

该操作将表格单元格的内容放置到单元格的中间。

3）选择“插入”>“媒体”>“Flash”。

在“选择文件”对话框中，浏览至站点的cafe_townsend根文件夹中的flash_fma.swf文件，选择该文件，然后单击“确定”

如果出现“对象标签辅助功能属性”对话框，则单击“确定”。

Flash内容占位符（而不是FMA本身的场景）将显示在文档窗口中。

这是因为HTML代码“指向”SWF文件flash_fma.swf。

当用户载入index.html页面时，浏览器会播放该SWF文件。

4）在插入SWF文件之后，只要您不单击页面上的其它位置，Flash内容占位符就会保持为选中状态。

如果它不处于选中状态，通过单击Flash内容占位符即可将其选中。

5）在“属性”检查器（“窗口”>“属性”）中单击“播放”。

Dreamweaver在“文档”窗口中播放Flash文件，显示站点访问者

在浏览器中查看页面时将看到的内容。

6）在“属性”检查器中，单击“停止”可以结束Flash文件播放。

7）保存该页。

6.插入Flash视频

接下来，使用提供的资源插入Flash视频文件。

1）在Dreamweaver的“文档”窗口中打开index.html页面的情况下，在由三列组成的表格的中间一列中放置的图形之上单击一次。

上一节中，在插入图形之前创建了一些空间，这就是应单击的位

2）选择“插入”>“媒体”>“Flash视频”。

3）在“插入Flash视频”对话框中，从“视频类型”弹出式菜单中选择“渐进式下载视频”。

4）在URL文本框中，指定cafe_townsend_home.flv文件的相对路径，方法是单击“浏览”，浏览至cafe_townsend_home.flv文件（位于站点的cafe_townsend根文件夹中），并选择该FLV文件。

5）从“外观”弹出式菜单中选择HaloSkin2。

所选外观的预览会出现在“外观”弹出式菜单下方。

“外观”选项指定将包含Flash视频内容的Flash视频组件的外观。

6）在“宽度”和“高度”文本框中，执行以下操作：

在“宽度”文本框中，键入180。

在“高度”文本框中，键入135，然后按Enter键。

“宽度”和“高度”文本框中的值以像素为单位指定FLV文件的宽度

和高度。

可以任意调整这些值以更改Web页面上的Flash视频的大

小。

增加视频的尺寸时，视频的图片品质通常会下降。

7）其余选项保留默认的选择值：

限制高宽比保持Flash视频组件的宽度和高度之间的高宽比不变。

默认情况下会选择此选项。

自动播放指定在Web页面打开时是否播放视频。

默认情况下取消选择该选项。

自动重新播放指定播放控件在视频播放完之后是否返回起始位置。

默认情况下取消选择该选项。

8）单击“确定”关闭对话框并将Flash视频内容添加到Web页面。

“插入Flash视频”命令生成一个视频播放器SWF文件和一个外观SWF文件，它们用于在Web页面上显示Flash视频内容。

这些文件与Flash视频内容（在此情况下，为cafe_townsend根文件夹）所添加到的HTML文件存储在同一目录中。

当您上传包含Flash视频内容的HTML页面时，Dreamweaver将这些文件作为相关文件上传（只要单击“要上传相关文件？

”对话框中的“是”）。

9）保存该页。

7.插入文本

1）在“文件”面板中，找到sample_text.txt文件（在cafe_townsend根文件夹中）并双击该文件的图标，在Dreamweaver中打开它。

可以看到，此窗口处于“代码”视图中，并且不能切换到“设计”视图（到现在为止一直使用的视图），因为该文件不是HTML文件。

2）在sample_text.txt“文档”窗口中，按Control+A组合键选择所有文本，然后选择“编辑”>“复制”以复制该文本。

3）单击文档右上角中的X关闭sample_text.txt文件。

4）在index.html“文档”窗口中，在由三列组成的表格的第三个表格单元格（包含图形和Flash视频的列的右侧的单元格）内