向网页添加内容

《向网页添加内容》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第8章向网页添加内容学习如何向网页中添加图像、FLASH和文本等向网页添加内容向虚构餐馆CafeTownsend的主页添加图像、MacromediaFlash文件、MacromediaFlash视频文件和文本。完成后的页面将如图所示：替换图像占位符双击页面顶部的图像占位符banner_graphic。在“选择图像源文件”对话框中，选择站点根文件夹的cafe_townsendimages文件夹下的banner_graphic.jpg文件并单击“确定”。向网页添加内容替换图像占位符向网页添加内容Dreamweaver将图像占位符替换为

2、CafeTownsend的横幅图形使用“插入”菜单插入图像在第一个表格的第三行（低于刚插入的横幅图形两行，彩色表格单元格之上）内单击一次。选择“插入”>“图像”。在“选择图像源文件”对话框，选择cafe_townsendimages文件夹下的body_main_header.gif文件，然后单击“确定”。一个长的彩色图形出现在该表格行中。它看上去更像表格单元格的背景色，而不是图形，但如果仔细看，您将看到该图形具有圆角。添加完所有资源之后，这种圆角效果将使页面的下半部分呈现一种有趣的外观。向网页添加内容通过拖动插入图像在页面上最后一

3、个表格的最后一行（彩色表格单元格之下）中单击一次。在“文件”面板（“窗口”>“文件”）中，找到body_main_footer.gif文件（它位于images文件夹中），将该文件拖到最后一个表格的插入点。向网页添加内容从“资源”面板插入图像单击第二个表格的中间一列。在“属性”检查器中，设置“水平”为“居中对齐”，“垂直”为“顶端”。按一次Enter键，创建更多空间。向网页添加内容从“资源”面板插入图像单击“文件”面板中的“资源”选项卡，或选择“窗口”>“资源”。如果未选择“图像”视图，则单击“图像”以查看图像资源。向网页添加内容“资

4、源”面板可以使用“资源”面板查看和管理当前站点中的资源。“资源”面板显示与文档窗口中的活动文档相关联的站点资源。从“资源”面板插入图像在“资源”面板中，选择street_sign.jpg文件。将street_sign.jpg文件拖到中心位置的表格单元格中的插入点或单击“资源”面板底部的“插入”。street_sign.jpg图形即显示在页面上向网页添加内容插入并播放Flash文件插入一个播放CafeTownsend的特色食品的照片幻灯片的Flash文件在第一个表格的第二行内单击一次。在“属性”检查器中，将“水平”和“垂直”均设为“居

5、中”。选择“插入”>“媒体”>“Flash”。在“选择文件”对话框中，选择cafe_townsend根文件夹中的flash_fma.swf文件，然后单击“确定”。插入并播放Flash文件在“属性”检查器（“窗口”>“属性”）中单击“播放”。Dreamweaver在“文档”窗口中播放Flash文件，显示站点访问者在浏览器中查看页面时将看到的内容。插入Flash视频单击第二个表格中间一列中放置的图形之上单击一次。选择“插入”>“媒体”>“Flash视频”在“插入Flash视频”对话框中，从“视频类型”弹出式菜单中选择“渐进式下载视频”。

6、插入Flash视频在URL文本框中，指定cafe_townsend_home.flv文件的相对路径从“外观”弹出式菜单中选择HaloSkin2。“宽度”180，“高度”135插入文本现在向网页添加一些文本。可以在Dreamweaver文档窗口中直接键入文本，也可以从其它源（如MicrosoftWord或纯文本文件）复制并粘帖文本。然后，使用层叠样式表(CSS)设置文本格式。插入正文文本在“文件”面板中，找到sample_text.txt文件（在cafe_townsend根文件夹中）并双击该文件的图标，在Dreamweaver中打开它

7、。此窗口处于“代码”视图中，并且不能切换到“设计”视图，因为该文件不是HTML文件。插入正文文本在sample_text.txt“文档”窗口中，按Ctrl+A组合键选择所有文本，然后按Ctrl+C复制所有文本。关闭sample_text.txt文件。单击index.html中第二个表格中的第三个单元格，按Ctrl+V，将sample_text.txt中的文本粘贴至此。在“属性”检查器中，从“垂直”弹出式菜单中选择“顶端”。插入导航条文本接下来插入导航条文本。在后续课程中学习如何利用CSS设置这些文本格式之后，它们看上去才会像导航条。

8、单击第二个表格的第一列（红棕色的列）键入单词Cuisine。按空格，并键入ChefIpsum。重复前面的步骤，依次输入Articles、SpecialEvents、Location、Menu、ContactUs。键入时不要按Enter