向网页添加内容.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,中国人民大学 王蓉,第,8,章 向网页添加内容,学习如何向网页中添加图像、,FLASH,和文本等,向网页添加内容,向虚构餐馆,Cafe Townsend,的主页添加图像、,Macromedia Flash,文件、,Macromedia Flash,视频文件和文本。,完成后的页面将如图所示：,替换图像占位符,双击页面顶部的图像占位符,banner_graphic,。,在“选择图像源文件”对话框中，选择站点根文件夹的,cafe_townsend,images,文件夹下的,banner_graphic.jpg,文件并单击“确定”。,向网页添加内容,替换图像占位符,向网页添加内容,Dreamweaver,将图像占位符替换为,Cafe Townsend,的横幅图形,使用“插入”菜单插入图像,在第一个表格的第三行（低于刚插入的横幅图形两行，彩色表格单元格之上）内单击一次。,选择“插入”,“,图像”。,在“选择图像源文件”对话框，选择,cafe_townsend,images,文件夹下的,body_main_header.gif,文件，然后单击“确定”。,一个长的彩色图形出现在该表格行中。它看上去更像表格单元格的背景色，而不是图形，但如果仔细看，您将看到该图形具有圆角。添加完所有资源之后，这种圆角效果将使页面的下半部分呈现一种有趣的外观。,向网页添加内容,通过拖动插入图像,在页面上最后一个表格的最后一行（彩色表格单元格之下）中单击一次。,在“文件”面板（“窗口”,“,文件”）中，找到,body_main_footer.gif,文件（它位于,images,文件夹中），将该文件,拖到,最后一个表格的插入点。,向网页添加内容,从“资源”面板插入图像,单击第二个表格的中间一列。,在“属性”检查器中，设置“水平”为“居中对齐”，“垂直”为“顶端”。,按一次,Enter,键，创建更多空间。,向网页添加内容,从“资源”面板插入图像,单击“文件”面板中的“资源”选项卡，或选择“窗口”,“,资源”。,如果未选择“图像”视图，则单击“图像”以查看图像资源。,向网页添加内容,“资源”面板,可以使用“资源”面板查看和管理当前站点中的资源。“资源”面板显示与文档窗口中的活动文档相关联的站点资源。,从“资源”面板插入图像,在“资源”面板中，选择,street_sign.jpg,文件。,将,street_sign.jpg,文件拖到中心位置的表格单元格中的插入点或单击“资源”面板底部的“插入”。,street_sign.jpg,图形即显示在页面上,向网页添加内容,插入并播放,Flash,文件,插入一个播放,Cafe Townsend,的特色食品的照片幻灯片的,Flash,文件,在第一个表格的第二行内单击一次。,在“属性”检查器中，将“水平”和“垂直”均设为“居中”。,选择“插入”,“,媒体”,“Flash”,。,在“选择文件”对话框中，选择,cafe_townsend,根文件夹中的,flash_fma.swf,文件，然后单击“确定”。,插入并播放,Flash,文件,在“属性”检查器（“窗口”,“,属性”）中单击“播放”。,Dreamweaver,在“文档”窗口中播放,Flash,文件，显示站点访问者在浏览器中查看页面时将看到的内容。,插入,Flash,视频,单击第二个表格中间一列中放置的图形之上单击一次。,选择“插入”,“,媒体”,“Flash,视频”,在“插入,Flash,视频”对话框中，从“视频类型”弹出式菜单中选择“渐进式下载视频”。,插入,Flash,视频,在,URL,文本框中，指定,cafe_townsend_home.flv,文件的相对路径,从“外观”弹出式菜单中选择,Halo Skin 2,。,“宽度”,180,，“高度”,135,插入文本,现在向网页添加一些文本。,可以在,Dreamweaver,文档窗口中直接键入文本，也可以从其它源（如,Microsoft Word,或纯文本文件）复制并粘帖文本。,然后，使用层叠样式表,(CSS),设置文本格式。,插入正文文本,在“文件”面板中，找到,sample_text.txt,文件（在,cafe_townsend,根文件夹中）并双击该文件的图标，在,Dreamweaver,中打开它。,此窗口处于“代码”视图中，并且不能切换到“设计”视图，因为该文件不是,HTML,文件。,插入正文文本,在,sample_text.txt,“,文档”窗口中，按,Ctrl+A,组合键选择所有文本，然后按,Ctrl+C,复制所有文本。,关闭,sample_text.txt,文件。,单击,index.html,中第二个表格中的第三个单元格，按,Ctrl+V,，将,sample_text.txt,中的文本粘贴至此。,在“属性”检查器中，从“垂直”弹出式菜单中选择“顶端”。,插入导航条文本,接下来插入导航条文本。在后续课程中学习如何利用,CSS,设置这些文本格式之后，它们看上去才会像导航条。,单击第二个表格的第一列,（红棕色的列）,键入单词,Cuisine,。,按空格，并键入,Chef,Ipsum,。,重复前面的步骤，依次输入,Articles,、,Special Events,、,Location,、,Menu,、,Contact Us,。,键入时不要按,Enter,键，只使用空格键分隔单词，并使这些单词自然换行,插入导航条文本,在插入点仍旧处于第二个表格的第一个单元格时，在标签选择器中单击,标签。,在“属性”检查器，从“垂直”弹出式菜单中选择“顶端”。这会将您刚刚键入的文本沿表格单元格的顶端对齐。,创建链接,选择,Cuisine,，,在属性检查器中单击“链接”文本框旁的文件夹图标。,在“选择文件”对话框中，选择,menu.html,文件（与,index.html,文件处于同一个文件夹中）,Cuisine,文本出现下划线并变成蓝色，表示它现在是一个链接。,重复上述步骤，为导航栏中的每个单词或一组单词建立链接。,在浏览器中预览页面,要查看确切的最终结果，必须在浏览器中预览网页。,保存,index.html,文件，按,F12,键。,浏览器启动，并显示该网页。,补充,表单,表单,菜单“插入”,-“,表单”,表单是一个包含表单元素的区域。,表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。,表单使用表单标签（,）定义,.,表单元素,文本域,(Text fields),单选按钮（,Radio Buttons,）,复选框（,Checkboxes,）,表单的动作属性（,Action,）和确认按钮,下拉列表,表单元素,文本域,当用户要在表单中键入字母、数字等内容时，就会用到文本域。,名：,姓：,显示器浏览结果,男,女,显示器浏览结果,表单元素,单选钮,当用户从若干给定的选择中选取其一个时，就会用到单选框。,表单元素,复选框,当用户从若干给定的选择中选取一个或若干选项时，就会用到复选框。,我喜欢自行车：,我喜欢汽车：,显示器浏览结果,表单元素,表单的动作属性（,Action,）和确认按钮,输入用户姓名和密码,请输入你的姓名：,请输入你的密码：,