Dreamweaver-实验3添加页面内容

Dreamweavercs4网站制作入门----添加页面内容利用Dreamweavercs4，你可以很方便地向Web页面添加多种内容，包括图像、Flash动画、Flash视频、文本等。向页面添加内容后，你还可以可在各种浏览器中进行预览，这样你就可以立即查看你的页面在Web上将要显示的结果。创建页面布局之后，你就可以将资源添加到页面了。你将从添加图像开始。可以在Dreamweaver中使用多种方法向Web页面添加图像。本节中，你将使用不同的方法将四个不同的图像添加到mysite的首页。一、插入图像替换图像占位符：1、在Dreamweaver的“文件”窗口中，双击打开index.html文件。2、双击页面顶部的图像占位符banner_graphic。3、在“选择图像源文件”对话框中，浏览至您定义为站点根文件夹的mysite文件夹中的images文件夹。4、选择banner_graphic.jpg文件并单击“确定”。5、在表格外单击一次以取消选中该图像。6、保存该页（Ctrl+S）。使用“插入”菜单插入图像：1、在第一个表格的第三行内单击一次。2、选择“插入”“图像”。3、在“选择图像源文件”对话框中，浏览至mysite文件夹中的images文件夹，选择body_main_header.gif文件，然后单击“确定”。4、如果出现“图像标签辅助功能属性”对话框，则单击“确定”。通过拖动插入图像：1、在页面上最后一个表格中单击一次。2、在“文件”面板（“窗口”“文件”）中，找到body_main_footer.gif文件（它位于images文件夹中），将该文件拖到最后一个表格的插入点。3、如果出现“图像标签辅助功能属性”对话框，则单击“确定”。4、在表格外单击一次，并保存该页面。从“资源”面板插入图像:1、在第二个表格的中间一列内单击一次。2、在“属性”检查器（“窗口”“属性”）中，从“水平”弹出式菜单中选择“居中对齐”，然后从“垂直”弹出式菜单中选择“顶端”。该操作将表格单元格的内容对齐到单元格的中间，并使单元格的内容从单元格顶端开始。3、单击“文件”面板中的“资源”选项卡，或选择“窗口”“资源”。、如果未选择“图像”视图，则单击“图像”以查看您的图像资源。4、在“资源”面板中，选择street_sign.jpg文件。执行下列操作之一：5、将street_sign.jpg文件拖到中心位置的表格单元格中的插入点。6、单击“资源”面板底部的“插入”。8、如果出现“图像标签辅助功能属性”对话框，则单击“确定”。street_sign.jpg图形即显示在页面上。9、在表格外单击一次以取消选中该图像。10、保存该页。二、插入并播放Flash文件：接下来，您将插入一个Flash文件，它将播放CafeTownsend的特色食品的照片幻灯片。。1、在Dreamweaver的“文档”窗口中打开index.html页面的情况下，在第一个表格的第二行内单击一次。2、在“属性”检查器（“窗口”“属性”）中，从“水平”弹出式菜单中选择“居中”，然后从“垂直”弹出式菜单中选择“居中”。该操作将表格单元格的内容放置到单元格的中间。如果您无法看到“垂直”或“水平”弹出式菜单，请单击“属性”检查器右下角的展开箭头。3、选择“插入”“媒体”“Flash”。4、在“选择文件”对话框中，浏览至站点的mysite根文件夹中的flash_fma.swf文件,选择该文件，然后单击“确定”。5、如果出现“对象标签辅助功能属性”对话框，则单击“确定”。6、Flash内容占位符将显示在文档窗口中。这是因为HTML代码“指向”SWF文件flash_fma.swf。当用户载入index.html页面时，浏览器会播放该SWF文件。7、在插入SWF文件之后，只要你不单击页面上的其它位置，Flash内容占位符就会保持为选中状态。如果它不处于选中状态，通过单击Flash内容占位符即可将其选中。8、在“属性”检查器（“窗口”“属性”）中单击“播放”。9、如果看不到Flash“播放”按钮，可单击“属性”检查器右下角的展开箭头。10、Dreamweaver在“文档”窗口中播放Flash文件，显示站点访问者在浏览器中查看页面时将看到的内容。11、在“属性”检查器中，单击“停止”可以结束Flash文件播放。12、保存页面。三、插入Flash视频：接下来，使用提供的资源插入Flash视频文件。1、在Dreamweaver的“文档”窗口中打开index.html页面的情况下，在第二个表格的第二列中单击一次。2、选择“插入”“媒体”“Flash视频”。3、在“插入Flash视频”对话框中，从“视频类型”弹出式菜单中选择“渐进式下载视频”。累进式下载允许在下载完成之前就开始播放视频文件。4、在URL文本框中，指定cafe_townsend_home.flv文件的相对路径，方法是单击“浏览”，浏览至cafe_townsend_home.flv文件（位于站点的mysite根文件夹中），并选择该FLV文件。5、从“外观”弹出式菜单中选择HaloSkin2。所选外观的预览会出现在“外观”弹出式菜单下方。“外观”选项指定将包含Flash视频内容的Flash视频组件的外观。6、在“宽度”和“高度”文本框中，执行以下操作：在“宽度”文本框中，键入180。在“高度”文本框中，键入135，然后“确定”。7、“宽度”和“高度”文本框中的值以像素为单位指定FLV文件的宽度和高度。可以任意调整这些值以更改Web页面上的Flash视频的大小。增加视频的尺寸时，视频的图片品质通常会下降。8、保存页面。四、插入文本：现在您将向页面添加一些文本。您可以在Dreamweaver文档窗口中直接键入文本，也可以从其它源（如MicrosoftWord或纯文本文件）复制并粘帖文本。然后，您将使用层叠样式表(CSS)设置文本格式。插入正文文本:1、(注释)在“文件”面板中，找到sample_text.txt文件（在cafe_townsend根文件夹中）并双击该文件的图标，在Dreamweaver中打开它。您可以看到，此窗口处于“代码”视图中，并且不能切换到“设计”视图，因为该文件不是HTML文件。2、在sample_text.txt“文档”窗口中，按Ctrl+A组合键选择所有文本，然后选择“编辑”“复制”以复制该文本。3、单击文档右上角中的X，关闭sample_text.txt文件。4、在index.html“文档”窗口中，在由三列组成的表格的第三个表格单元格内单击一次。5、选择“编辑”“粘贴”，文本文件中的文本出现在所选表格单元格中。根据显示器的分辨率，该表格（由三列组成）将伸展以适合该文本。6、确保插入点仍在刚才粘贴文本的表格单元格中。如果插入点不在，则在表格单元格内单击。7、在“属性”检查器（“窗口”“属性”）中，从“垂直”弹出式菜单中选择“顶端”，”水平”选择“左对齐”。这会将您刚刚粘贴的文本沿表格单元格的顶端对齐及左对齐。8、保存该页。四、插入文本：现在我们将向页面添加一些文本。我们可以在Dreamweaver文档窗口中直接键入文本，也可以从其它源（如MicrosoftWord或纯文本文件）复制并粘帖文本。然后，我们将使用层叠样式表(CSS)设置文本格式。插入正文文本:1、(注释)在“文件”面板中，找到sample_text.txt文件（在cafe_townsend根文件夹中）并双击该文件的图标，在Dreamweaver中打开它。我们可以看到，此窗口处于“代码”视图中，并且不能切换到“设计”视图，因为该文件不是HTML文件。2、在sample_text.txt“文档”窗口中，按Ctrl+A组合键选择所有文本，然后选择“编辑”“复制”以复制该文本。3、单击文档右上角中的X，关闭sample_text.txt文件。4、在index.html“文档”窗口中，在由三列组成的表格的第三个表格单元格内单击一次。5、选择“编辑”“粘贴”，文本文件中的文本出现在所选表格单元格中。根据显示器的分辨率，该表格（由三列组成）将伸展以适合该文本。6、确保插入点仍在刚才粘贴文本的表格单元格中。如果插入点不在，则在表格单元格内单击。7、在“属性”检查器（“窗口”“属性”）中，从“垂直”弹出式菜单中选择“顶端”，”水平”选择“左对齐”。这会将我们刚刚粘贴的文本沿表格单元格的顶端对齐及左对齐。8、保存该页。插入导航条文本:接下来我们将插入导航条文本。Ps:我们需要在下一教程中设置这些文本格式之后，它们看上去才会像导航条。1、在由三列组成的表格的第一列中单击一次。2、键入单词Cuisine。3、按空格键并键入ChefIpsum。4、重复前面的步骤，直到输入以下单词，并且在每个单词之间留一个空格：Articles、SpecialEvents、Location、Menu、ContactUs。5、键入时不要按Enter键。只使用空格键分隔单词，并使这些单词自然换行。表格单元格的固定宽度确定了一行中可容纳的单词个数。6、在插入点仍旧处于由三列组成的表格的第一个单元格中时，在标签选择器中单击td标签。7、在“属性”检查器（“窗口”“属性”）中，从“垂直”弹出式菜单中选择“顶端”。这会将我们刚刚键入的文本沿表格单元格的顶端对齐。8、保存页面。五、创建链接：链接是在Web页面中插入的指向其它文档的引用。可以将任何类型的资源转换为链接，但最常用的链接类型是文本链接。我们可以在站点创建过程的任何阶段创建链接。在本节中，我们将为导航条创建链接。cafe_townsend站点根文件夹包含可以链接的已完成的HTML页面。我们将把此页面用于导航中的所有链接，即使我们在建立实际站点时，这些链接中的每一个链接将对应于不同的页面。1、当index.html页面在文档窗口中处于打开的情况下，选择我们在由三列组成的表格的第一个单元格中键入的单词Cuisine。请小心只选择单词Cuisine，不要选中它后面的空格。2、在属性检查器中（“窗口”“属性”），单击“链接”文本框旁的文件夹图标。3、在“选择文件”对话框中，浏览至menu.html文件，并单击“确定”。4、在页面上单击一次以取消选择单词Cuisine。Cuisine文本出现下划线并变成蓝色，表示它现在是一个链接。5、重复上述步骤，为作为导航而键入的每个单词或一组单词建立链接。我们还需要创建6个链接：为ChefIpsum、Articles、SpecialEvents、Location、Menu和ContactUs分别创建一个链接。6、保存页面。六、在浏览器中预览页面：“设计”视图为我们提供了页面在Web上显示时的大致外观，但是要查看确切的最终结果，则必须在浏览器中预览页面。虽然浏览器通常会生成相同的结果，但是每个浏览器版本显示HTML页面的方式可能会不同。Dreamweaver试图生成在各种浏览器中看起来尽可能相似的HTML；但有时候差别难以避免。因此，在浏览器中预览我们的工作是使我们了解在发布页面后站点访问者将看到的外观的唯一方式。请确保index.html文件在文档窗口中打开。方法一：按“F12”可以对页面进行预览或调试。方法二：,点击预览图标