向网页添加内容.ppt

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

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

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

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

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

6、弹出式菜单中选择 Halo Skin 2。 “宽度” 180， “高度” 135,插入文本,现在向网页添加一些文本。 可以在 Dreamweaver 文档窗口中直接键入文本，也可以从其它源（如 Microsoft Word 或纯文本文件）复制并粘帖文本。 然后，使用层叠样式表 (CSS) 设置文本格式。,插入正文文本,在“文件”面板中，找到 sample_text.txt 文件（在 cafe_townsend 根文件夹中）并双击该文件的图标，在 Dreamweaver 中打开它。 此窗口处于“代码”视图中，并且不能切换到“设计”视图，因为该文件不是 HTML 文件。,插入正文文本,在 samp

7、le_text.txt“文档”窗口中，按 Ctrl+A 组合键选择所有文本，然后按Ctrl+C复制所有文本。 关闭 sample_text.txt 文件。 单击index.html中第二个表格中的第三个单元格，按Ctrl+V，将sample_text.txt中的文本粘贴至此。,在“属性”检查器中，从“垂直”弹出式菜单中选择“顶端”。,插入导航条文本,接下来插入导航条文本。在后续课程中学习如何利用CSS设置这些文本格式之后，它们看上去才会像导航条。 单击第二个表格的第一列（红棕色的列） 键入单词 Cuisine。 按空格，并键入 Chef Ipsum。 重复前面的步骤， 依次输入Articles

8、、Special Events、Location、Menu、Contact Us。,键入时不要按 Enter 键，只使用空格键分隔单词，并使这些单词自然换行,插入导航条文本,在插入点仍旧处于第二个表格的第一个单元格时，在标签选择器中单击 标签。 在“属性”检查器，从“垂直”弹出式菜单中选择“顶端”。 这会将您刚刚键入的文本沿表格单元格的顶端对齐。,创建链接,选择Cuisine， 在属性检查器中单击“链接”文本框旁的文件夹图标。,在“选择文件”对话框中，选择 menu.html 文件（与 index.html 文件处于同一个文件夹中） Cuisine 文本出现下划线并变成蓝色，表示它现在是一个链

9、接。 重复上述步骤，为导航栏中的每个单词或一组单词建立链接。,在浏览器中预览页面,要查看确切的最终结果，必须在浏览器中预览网页。 保存index.html文件，按 F12 键。 浏览器启动，并显示该网页。,补充,表单,表单,菜单“插入”-“表单” 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。 表单使用表单标签（）定义 . ,表单元素,文本域(Text fields) 单选按钮（Radio Buttons） 复选框（Checkboxes） 表单的动作属性（Action）和确认按钮 下拉列表,表单元素文本域,当用户要在表单中键入字母、数字等内容时，就会用到文本域。, 名： 姓： ,显示器浏览结果, 男 女 ,显示器浏览结果,表单元素单选钮,当用户从若干给定的选择中选取其一个时，就会用到单选框。,表单元素复选框,当用户从若干给定的选择中选取一个或若干选项时，就会用到复选框。, 我喜欢自行车： 我喜欢汽车： ,显示器浏览结果,表单元素表单的动作属性（Action）和确认按钮, 输入用户姓名和密码 请输入你的姓名： 请输入你的密码： ,表单元素userpw.asp的源码, 用户信息 你的姓名是： 你的密码是： ,ASP代码在服务器端运行,表单例2, 选择 请选择你最喜欢的水果： 苹果 桔子 芒果 ,表单元素验证表单