向网添加内容

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