网站外观设计和内容编辑课件

*,*,网站开发技术,第,3,章,网站外观设计和内容编辑,通过本章的学习，主要掌握以下知识点：,Dreamweaver,简介,站点的规划与设计,站点的管理,网页编辑与超连接,网页定位技术,层叠样式、模板与库,表单与应用,2024/8/7,2,3.1 Dreamweaver MX,简介,Dreamweaver MX,是,Macromedia,公司最新发布的集网页设计、代码开发、网站创建和管理于一体的软件。,Dreamweaver MX,不仅可以轻松设计网站前台的页面，而且也可以方便地实现网站后台的各种复杂功能。,2024/8/7,3,启动,Dreamweaver MX,后，屏幕显示的是工作区窗口，此时系统打开一个名为,Untitled,的空白文档，在网页文件编辑区中，设计者可以完成网页的设计。,工作区窗口各部分功能如下所述。,Dreamweaver MX,的工作环境,2024/8/7,4,标题栏,菜单栏,文档工具栏,网页文件编辑区,状态栏,浮动面板和浮动面板组,【插入】面板,【属性】面板,2024/8/7,5,3.2,站点的规划与设计,1,创建具有浏览器兼容性的站点,2,站点结构的组织,3,创建设计外观,4,设计导航方案,5,规划和收集资源,2024/8/7,6,创建网站一般有以下几个步骤,:,(1),规划站点,：了解建站的目的，收集各种有关的资料。确定站点的主题、风格、网站要提供的服务和网页要表达的主要内容。,(2),创建站点的基本结构,：在计算机中创建本地站点的根文件夹以及存放各种资料的子文件夹，配置好所有系统的参数和站点测试路径。,(3),网页设计,：充分利用收集到的数据资料，合理地运用,Dreamweaver MX,提供的技术，最完美地设计出能表达网站中心思想的,Web,页面。,2024/8/7,7,规划站点,“Dreamweaver,站点”和“,Internet web,站点”不完全相同。“,Dreamweaver,站点”是在,Dreamweaver,制作网页的过程中所使用的术语，是定义一个站点名称、存放文件的文件夹、使用的,Web,服务器和应用服务器技术等。“,Internet Web,站点”则是把已经成功的网站内容放到,Internet,或,Intranet,的,web,服务器上供用户浏览，即运行系统的,web,服务器上的站点。,网站的发布过程就是将,Dreamweaver,站点变成,Internet Web,站点的过程。,2024/8/7,8,有两种：,一是使用“,站点定义向导,”，这可以根据提示逐步完成设置过程；,二是使用“,高级,”设置，可以根据需要分别设置本地、远程和测试文件夹。,设置,Dreamweaver,站点的方法,2024/8/7,9,3.2.1,编辑站点,1,选择菜单栏中的“站点”,-,“编辑站点”，出现“站点管理”对话框，在对话框中可以定义多个站点。,新建站点操作如下：,1,）单击“新建”,-,“站点”，出现站点定义对话框,2,）单击“基本”选项卡以使用站点定义向导，或者单击“高级”选项卡以使用“高级”设置。,2024/8/7,10,建站过程中要,注意,一点：所有站点名称和素材名称只能用英文，不能用中文，因为,DreamweaverMX,对中文的解析不是很好，如果用中文会出现解析问题。,2024/8/7,11,编辑站点对话框,2024/8/7,12,站点定义,2024/8/7,13,3.2.2,设置本地文件夹,1,在“站点定义”对话框中选择“高级”选项卡和“本地信息”类别选项。,2,输入“站点名称”，如,my site,。,3,输入“本地根文件夹”，或者单击文件夹图标以选择或新建一个本地文件夹，如,D:/xwx11,。,4,如果选中“,自动刷新本地文件列表,”选项，则当每次复制文件到本地文件夹时，系统将自动刷新本地文件列表。如果不选中此项，则可以在站点面板中手动刷新。,5,在“默认图像文件夹”中确定存放图像的默认文件夹，一般是根目录下的“,Images,”,。,6,在“,HTTP,地址”文本框中，输入,Web,站点将使用的,URL,。这使,Dreamweaver,能够验证站点中使用绝对,URL,的链接。,7,“启用缓存”,选项，指定是否创建本地缓存以提高链接和站点管理任务的速度。,2024/8/7,14,完成后的本地文件夹对话框,2024/8/7,15,3.2.3,设置远程文件夹,1,在站点定义对话框中选择“高级”选项卡的“远程信息”分类选项,2,选择一个“访问”选项,:,本地,/,网络,。,3,确定一个“远程文件夹”。,4,“自动刷新远程文件列表”复选框。,5,“保存时自动将文件上传到服务器”复选框。,6,“启用文件存回和取出”。,7,单击“确定”按钮。,2024/8/7,16,定义远程站点对话框,2024/8/7,17,3.2.4,用,FTP,连接到,Web,服务器,1,输入,FTP,主机名。,2,输入远程站点的主目录名。,3,输入连接,FTP,服务器的登录名和密码。,4,如果你的防火墙配置要求被动,FTP,，则选择“,Use Passive FTP”,。,5,使用防火墙选项。,6,在,windows,中使用安全,FTP,选择,FTP,来访问远程文件夹时，在,Windows,中可以选择使用,SSH,安全登录检查框以自动继续,FTP,的安全检查。,7,其它选项与“本地网络”中相同。,8,单击“确定”按钮。,2024/8/7,18,使用,ftp,连接时的远程站点定义对话框,2024/8/7,19,1,在“站点定义”对话框中选择“高级”选项卡，然后从“类别”列表中选择“测试服务器”,2,服务器模型,3,访问方式,有“无”、“,FTP”,和“,Local/Network”,三种。,4,测试服务器,5,自动刷新远程文件列表选项,6,URL,前缀,7,单击“确定”按钮,3.2.5,设置测试服务器,2024/8/7,20,测试服务器定义对话框,2024/8/7,21,应用服务器技术列表,2024/8/7,22,3.3.1“,文件”面板,1,使用“文件”面板,2,设置“文件”面板参数,3,设置“文件视图列”,4,在“文件”面板中查看站点,3.3,管理站点文件,2024/8/7,23,展开的文件面板,2024/8/7,24,折叠的文件面板,2024/8/7,25,站点面板工具栏,2024/8/7,26,站点首选参数对话框,2024/8/7,27,站点面板的文件列表,2024/8/7,28,站点定义中的“文件视图列”选项,2024/8/7,29,3.3.2,站点地图,站点地图仅适用于本地站点，若要创建远程站点的地图，需将远程站点的内容复制到本地磁盘上的一个文件夹中，然后使用“编辑站点”命令将该站点定义为本地站点。,2024/8/7,30,1.,设置站点,1,）选择“站点”,-,“编辑站点”，出现“编辑站点”对话框。,2,）选择一个“站点”并单击“编辑”按钮，出现“站点定义”对话框。,3,）从左侧的“分类”列表中选择“站点地图布局”，“站点定义”对话框即可显示“站点地图布局”选项,4,）单击文件夹图标以通过浏览查找站点的主页。,2024/8/7,31,5,）在“列数”文本框中，键入一个数字以设置在站点地图窗口中每行要显示的,页数,。,6,）在“列宽”文本框中，键入一个数字以设置站点地图列的宽度。,7,）在“图标标签”下，选择在站点地图中与文档图标一起显示的名称表示为文件名还是页标题。,8,）在“选项”下，选择要在站点地图中显示的文件。,9),单击“确认”按钮,2024/8/7,32,站点地图布局对话框,2024/8/7,33,站点地图例图,2024/8/7,34,2.,站点地图,站点地图的显示规则如下：,（,1,）以,红色,显示的文本指示断开的链接；,（,2,）以,蓝色,显示并标有地球图标的文本，指示其它站点上的文件或特殊链接；,（,3,）,绿色选中,标记指示你已取出的文件；,（,4,）,红色,选中标记指示他人取出的文件；,（,5,）,锁形,图标指示只读或锁定的文件。,2024/8/7,35,若要在站点地图中打开某页进行编辑，可执行以下操作之一,（,1,）双击该文件；,（,2,）选择该文件，然后选择“文件”,-,“打开”或“站点”,-,“打开”。,2024/8/7,36,3.3.3,从站点列表中删除站点,1,选择“站点”,-,“编辑站点”，出现“编辑站点”对话框。,2,选择一个站点名称。,3,单击“删除”按钮，出现一个对话框，要求确认删除。如图,316,所示。,4,单击“是”，从列表中删除站点，或单击“,NO”,保留站点名称。,5,单击“完成”，关闭“编辑站点”对话框。,2024/8/7,37,确认删除站点对话框,2024/8/7,38,3.3.4,获取和上传文件,1,从远程或测试服务器或取文件,（,1,）在“文件”面板上，从“站点”弹出式菜单中选择一个“站点”。,（,2,）如果在使用,FTP,传输文件，请单击“连接”按钮打开于远程服务器的连接。,如果可以在前以链接的“远程”窗格中看到远程文件，则无需单击“连接”；当单击“获取”时，,Dreamweaver,会自动连接。,2024/8/7,39,（,3,）选择所需文件进行下载。通常在“远程视图”或“测试服务器”视图中选择这些文件，也可以在“本地视图”中选择相应的文件。,（,4,）单击“文件”面板工具栏上的“获取”按钮，或者选择“站点”,-,“获取”。,如果文件当前已在文档窗口中打开，则可以从文档窗口中选择“站点”“获取”，出现一个对话框，询问是否要获取相应文件。,（,5,）若要下载相关文件，则单击“是”；否则单击“否”按钮。,2024/8/7,40,3.3.5,同步本地和远程站点上的文件,（,1,）在“文件”面板上选择一个站点。,（,2,）选择要上传的文件。通常在“本地”视图中选择这些文件，也可以在“远程”视图中选择相应的文件。,（,3,）单击“文件”面板工具栏上的“上传”按钮。如果文件当前已经在文档窗口中打开，则可以从文档窗口种选择“站点”“上传”命令，,（,4,）若要上传相关文件，则单击“是”；否则单击“否”按钮。,2024/8/7,41,确认获取相关文件对话框,2024/8/7,42,如果远程站点为,ftp,服务器，则使用,ftp,来同步文件，其操作如下。,1,在“文件”面板中，从“当前站点”列表弹出式菜单中选择一个站点。,2,选择特定的文件或文件夹。如果要同步整个站点，则跳过此步骤。,3,从上下菜单中选择“同步”，出现“同步文件”对话框。,4,完成该对话框。,2024/8/7,43,3.4,网页编辑与超链接,Dreamweaver MX,文字格式化主要有,4,种方式：,(1),手工格式化方式是在文本【属性】面板中完成文字的格式化操作。,(2),用,HTML,标记格式化方式是用系统提供的,HTML,标记来格式化文本。,(3),用,HTML,样式来格式化文本的方式。,(4)CSS,样式是一种对网页文档内容进行精确格式化的方法，它可以使用许多,HTML,样式不能使用的属性。,3.4.1,网页文档的格式化,2024/8/7,44,3.4.2,网页编辑的基本操作,3.4.2.1,在网页中插入各种元素,1.,插入水平线,2.,插入日期,3.,插入,Flash,按钮和,Flash,文字,4.,插入,Java Applet,程序,5.,插入,ActiveX,控件,6.,插入第三方插件,2024/8/7,45,3.4.2.2,文本的查找和替换,*3.4.2.3,文本的拼写检查,*3.4.2.4,建立网站相册,3.4.2.5,利用外部编辑器编辑图像,3.4.2.6,创建鼠标经过图像,2024/8/7,46,3.4.3,创建超链接,3.4.3.1,超链接概述,超链接是用准备好的文本、按钮、图像等对象与其他对象建立链接，也就是在源端点和目标端点之间建立一种链接。源端点是超链接的起始端点，目标端点是链接的对象，也称为目标锚。超链接按源端点的链接划分，分为超文本链接和非超文本链接两类。,2024/8/7,47,3.4.3,创建超链接,3.4.3.2,创建超链接的方法（,5,种）,3.4.3.3,在站点管理器中编辑超链接,3.4.3.4,创建锚点链接,3.4.3.5,创建电子邮件链接,3.4.3.6,创建导航条,3.4.3.7,创建跳转菜单,3.4.3.8,创建映射图链接,2024/8/7,48,3.5,网页的定位技术,3.5.1,创建表格的基本操作,3.5.2,表格的编辑与格式化,3.5.3,外部数据导入和表格排序,3.5.4,布局表格和布局单元格,3.5.5,层的创建和基本操作,3.5.6,层的属性设置,100,3.5.7,层与表格互换,3.5.8,层的应用实例,3.5.9,框架的基本操作,3.5.10,框架和框架集的选择与属性设置,3.5.11,框架和框架集的保存,3.5.12,框架应用实例,2024/8/7,49,3.5.1,创建表格的基本操作,新建表格,设置表格和单元格的属性,选取表格和单元格,表格的嵌套,2024/8/7,50,2024/8/7,51,3.5.2,表格的编辑与格式化,改变表格或单元格的大小,表格行、列的增加和删除,单元格的拆分和合并,单元格的复制、粘贴、移动和清除,表格格式化,2024/8/7,52,3.5.3,外部数据导入和表格排序,在表格中导入外部数据文件,表格内容排序,*,2024/8/7,53,3.5.4,布局表格和布局单元格,创建和调整布局表格与布局单元格,布局视图应用实例,2024/8/7,54,3.5.5,层的创建和基本操作,创建和删除层,激活和选中层,调整、移动和对齐层,2024/8/7,55,3.5.6,层的属性设置,利用层【属性】面板设置,层的控制和操作,3.5.7,层与表格互换,表格转换为层,层转换为表格,3.5.8,层的应用实例,2024/8/7,56,本节重点回顾,主要介绍在,Dreamweaver,中如何规划、设计和管理站点，可以用多种方法创建站点，如果开发,Web,应用程序，则必须根据需要设置服务器和数据库，然后再设计该站点的外观，并对该站点进行功能测试，以验证该站点是否符合定义的目标，可以在站点中包含动态页，在服务器上可以发布网站，并定期地维护，以确保站点保持最新，且工作正常。本章培养学生实际动手操作能力。,2024/8/7,57,另外，介绍了,Drameweaver,MX,中的,3,种页面定位工具,表格、层和框架，重点介绍了表格、层和框架在设计网页时的定位作用以及表格、层、框架的创建、编辑和属性设置等操作。,重点知识有：表格、层、框架和框架集的创建、选择、编辑、保存等操作方法，表格、层、框架和框架集的各种属性设置，在表格、层和框架中输入各种网页元素的方法，布局表格和布局单元格的应用、表格样式化、外部数据导入表格、层及嵌套层、层的叠放次序、层的可见性、框架中网页的链接和显示方法等。,2024/8/7,58,3.6,层叠样式、模板与库,3.6.1,层叠样式表概述,3.6.2,层叠样式表的创建与编辑,3.6.3,层叠样式表的应用,3.6.4,模板的应用,3.6.5,库的应用,3.6.6,资源管理,2024/8/7,59,3.6.1,层叠样式表概述,层叠样式表（,Cascading Style Sheets,以下简称,CSS,样式表）是由,W3C,（,Word Wide Web Consortium,）组织批准的一种网页元素定义规则，是一种可以对网页文档内容进行精确格式化控制的工具。,利用,CSS,样式表可自动格式化网页文档，可将,CSS,样式表直接存储在网页文档中，也可以将,CSS,样式表定义在网页文档之外，然后将它链接到多个文档中。,2024/8/7,60,3.6.2,层叠样式表的创建与编辑,在,Dreamweaver MX,中，单击网页编辑窗口中状态栏右下角的按钮，或选择【窗口】,|,【,CSS,样式】命令，还可以单击【设计】浮动面板组的【,CSS,样式】选项卡，便可打开【,CSS,样式】面板。,层叠样式、模板与库电子商务网站建设教程在【,CSS,样式】面板中，有【应用样式】和【编辑样式】两种模式，分别用于,CSS,样式的应用和编辑操作。设计者可以用【,CSS,样式】面板右下角的,4,个按钮对,CSS,样式进行操作。,4,个按钮的作用如下所述。,2024/8/7,61,图,7-1,【,CSS,样式】面板,2024/8/7,62,附加样式,：单击此按钮，可选择一个外部样式表文件，并将其应用于当前文档。,新建样式,：单击此按钮，可打开【新建样式】对话框，新建一个样式。,编辑样式,：单击此按钮，可打开【编辑样式】对话框，编辑制定的样式。,删除样式,：选中列表中的样式后，单击此按钮可删除该样式。,2024/8/7,63,创建层叠样式和层叠样式表,外部样式表的链接、导入和编辑,层叠样式表的应用,2024/8/7,64,3.6.3,层叠样式表的应用,滤镜的概述,透明度滤镜的应用,显示滤镜的应用,模糊滤镜的应用,2024/8/7,65,滤镜的概述,滤镜是,CSS,样式表中功能最丰富、效果最奇特的工具之一，调整,Dreamweaver MX,中,CSS,样式表的十几种滤镜的参数，就能在网页上制作出多姿多彩、令人眩目的各种效果。,2024/8/7,66,透明度滤镜的应用,用透明度,(Alpha),滤镜可以通过具体的数值来指定网页中对象点、线、面的透明度，使得网页中对象的透明度发生变化，制作出一些特殊的视觉效果。,透明度滤镜的语法格式是：,filter:Alpha,（,Opacity=,？,FinishOpacity=,？,Style=,？,StartX=,？,StartY=,？,FinishX=,？,FinishY,=,？,),2024/8/7,67,显示滤镜的应用,可以利用混合,(blend),和显示,(reveal),两种滤镜在页面上添加动人的淡入淡出、网页转换效果，前者可以使页面中的对象逐渐消失或显示，后者提供了,24,种网页转换的效果。,其语法格式如下：,filter:blendTrans(duration,=,时间数值,),filter:revealTrans(duration,=,时间数值，,transition=,过渡类型,),2024/8/7,68,模糊滤镜的应用,模糊滤镜,(Blur),是,CSS,的滤镜之一，将其应用到网页文本上可以产生出立体字的效果。模糊滤镜能为制作网页的立体字标题带来方便，与其他立体字效果的处理方法相比，能使页面的下载速度明显增快。将滤镜应用到图片上，也能得到意想不到的效果。,模糊滤镜的语法格式是：,filter:Blur(Add=add,，,Direction=direction,，,Strength=strength),2024/8/7,69,3.6.4,模板的应用,Dreamweaver MX,的模板是一种预先设计好的网页样式，在制作风格相似的页面时，只要套用这种模板便可以设计出风格一致的网页。,2024/8/7,70,创建与保存模板,创建模板的方法可以是新建一个空白的模板，然后对它进行编辑后保存，也可以利用一个现成的网页，设置好可编辑区，转存为模板。,1.,新建一个空白模板,2.,利用一个现成的网页文件来创建一个模板,2024/8/7,71,应用与修改模板,1.,应用模板制作网页,2.,修改模板,2024/8/7,72,更新基于模板的网页文档,将创建的模板应用到页面制作以后，只需修改一个模板，就可修改所有应用此模板的网页。,2024/8/7,73,3.6.5,库的应用,创建和应用库项目,编辑库项目,用库项目更新网站,2024/8/7,74,编辑库项目,1.,重命名一个库项目,2.,删除一个库项目,3.,修改库项目,2024/8/7,75,3.6.6,资源管理,图像管理,颜色管理,超链接管理,Flash,管理,2024/8/7,76,本节,摘要与重点回顾,样式、模板和库是网页设计者设计制作网页时不可缺少的工具。它们可以帮助设计者统一整个网站的风格，节省网页创作的时间，提高工作效率，给管理整个网站带来很大方便。,CSS,层叠样式表不但能使设计者控制许多,HTML,样式不能控制的属性，还能迅速准确地将样式作用于整个网站的多个网页上；另外，它带有的特效滤镜，也可使网页设计效果丰富多彩。,2024/8/7,77,本节中介绍的【资源】管理面板可以统一管理整个站点的资源，避免反复查找某些网页元素，能提高网页设计的效率，得到事半功倍的效果。,本节的重点知识：创建、编辑,CSS,样式，创建、编辑、选用,CSS,外部样式表，常用,CSS,特效滤镜的使用方法，模板和库的创建、编辑、应用，站点的更新，用网站资源管理器统一管理网站中的各种资源。,2024/8/7,78,3.7,表单及应用,3.7.1,交互式表单概述,3.7.2,创建表单,3.7.3,表单应用实例,2024/8/7,79,3.7.1,交互式表单概述,表单（,Form,）技术可以实现浏览者与,Internet,服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。,使用表单，可以帮助,Internet,服务器从用户那里收集信息，例如收集用户资料、获取用户订单，在,Internet,上统也同样存在大量的表单，让用户输入文字进行选择。,2024/8/7,80,表单有两个重要的,组成部分,：,（,1,）一个是在网页中进行描述的,表单对象,。（,2,）二是,应用程序,，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。,2024/8/7,81,通常表单的工作过程如下：,（,1,）访问者在浏览有表单的页面时，可填写必要的信息，然后单击,“提交”,按钮。,（,2,）这些信息通过,Internet,传送,到服务器上。,（,3,）服务器上专门的程序对这些数据进行,处理,，如果有错误会返回错误信息，并要求纠正错误。,（,4,）当数据完整无误后，服务器,反馈,一个输入完成信息。,2024/8/7,82,在,Dreamweaver,中，表单输入类型称为表单,对象,。可以通过选择“插入”,“,表单对象”来插入表单对象，或者通过从下图显示的“插入”栏的“表单”面板访问表单对象来插入表单对象。,2024/8/7,83,1,、表单,“表单”在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能正确处理这些数据。,2,、文本域,“文本域”在表单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。,3,、复选框,“复选框”在表单中插入复选框。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。,2024/8/7,84,4,、单选按钮,“单选按钮”在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”。,5,、单选按钮组,“单选按钮组”插入共享同一名称的单选按钮的集合。,6,、列表,/,菜单,“列表,/,菜单”使您可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。,2024/8/7,85,7,、跳转菜单,“跳转菜单”插入可导航的列表或弹出式菜单。跳转菜单允许您插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。请参见创建跳转菜单。,8,、图像域,“图像域”使您可以在表单中插入图像。可以使用图像域替换“提交”按钮，以生成图形化按钮。,9,、文件域,“文件域”在文档中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。,2024/8/7,86,10,、按钮,“按钮”在表单中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。,11,、标签,“标签”在文档中给表单加上标签，以,形式开头和结尾。,12,、字段集,“字段集”在文本中设置文本标签。,认识了表单，那么创建和使用表单时就可以根据需要进行选择。表单时是动态网页的灵魂。,2024/8/7,87,3.7.2,创建表单,在,Dreamweaver,中可以创建各种各样的表单，表单中可以包含各种对象，例如文本域、按钮、列表等。,1,、插入表单,在网页中添加表单对象，首先必须创建表单。表单在浏览网页中属于不可见元素。在,Dreamweaver8,中插入一个表单。当页面处于“设计”视图中时，用红色的虚轮廓线指示表单。如果没有看到此轮廓线，请检查是否选中了“查看”,“,可视化助理”,“,不可见元素”。,（,1,）将插入点放在希望表单出现的位置。选择“插入”,“,表单”，或选择“插入”栏上的“表单”类别，然后单击“表单”图标，,（,2,）用鼠标选中表单，在属性面板上可以设置表单的各项属性。,2024/8/7,88,在“动作”文本框中指定处理该表单的动态也或脚本的路径。,在“方法”下拉列表中，选择将表单数据传输到服务器的方法。表单“方法”有：,POST,在,HTTP,请求中嵌入表单数据。,GET,将值追加到请求该页的,URL,中。默认 使用浏览器的默认设置将表单数据发送到服务器。通常，默认方法为,GET,方法。不要使用,GET,方法发送长表单。,URL,的长度限制在,8,192,个字符以内。如果发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果。而且，在发送机密用户名和密码、信用卡号或其他机密信息时，不要使用,GET,方法。用,GET,方法传递信息不安全。,2024/8/7,89,在“目标”弹出式菜单指定一个窗口，在该窗口中显示调用程序所返回的数据。如果命名的窗口尚未打开，则打开一个具有该名称的新窗口。目标值有：,_blank,，在未命名的新窗口中打开目标文档。,_parent,，在显示当前文档的窗口的父窗口中打开目标文档。,_self,，在提交表单所使用的窗口中打开目标文档。,_top,，在当前窗口的窗体内打开目标文档。此值可用于确保目标文档占用整个窗口，即使原始文档显示在框架中。,2024/8/7,90,表单的应用,1,、一个简单的提交留言页面,新建,11.html,网页文件，选择表单插入栏，插入表单，将光标放置在表单内，插入一个,5,行,2,列的表格，将第,1,、,5,行合并。分别在第,2,、,3,行插入文本字段，在第,4,行插入文本区域，在第,5,行插入两个按钮。,文本域是用户在其中输入响应的表单对象。有三种类型的文本域：,单行文本域通常提供单字或短语响应，如姓名或地址。,多行文本域为访问者提供一个较大的区域，供其输入响应。可以指定访问者最多可输入的行数以及对象的字符宽度。如果输入的文本超过这些设置，则该域将按照换行属性中指定的设置进行滚动。,密码域是特殊类型的文本域。当用户在密码域中键入时，所输入的文本被替换为星号或项目符号，以隐藏该文本，保护这些信息不被看到。,2024/8/7,91,2024/8/7,92,表单应用实例调查问卷,制作调查问卷是网页设计者与浏览者进行交流的最有效手段，在本节中介绍一个网上书店问卷调查的表单应用实例，要求：在网页上创建一个网上书店服务问卷调查的表单，表单包含单选按钮、复选框、单行文本框、多行文本框、下拉式列表等表单元素，表单中的表单元素用表格定位，表单中的标题及标识文字如下图所示。,2024/8/7,93,图,8-14,表单应用实例,2024/8/7,94,本例的操作步骤如下。,（,1,）新建网页文件，并选择【修改】,|,【页面属性】命令，设置页面背景图像。,（,2,）单击【插入】浮动面板组的【表单】选项卡中的【创建表单】按钮。,（,3,）在表单中插入用于定位的表格，表格为,12,行,1,列，,780460,像素，表格边框颜色为,#993300,。,（,4,）在第,1,行输入标题文字“网上书店服务调查”，字体为“红色”，背景颜色为,#FFFFCC,。,2024/8/7,95,（,5,）在第,2,行输入文字“尊敬的顾客：您好,!,为了更好地为您服务，我们非常重视您在购物过程中的感受，您的意见与建议是我们不断进步的源泉，谢谢您对我们工作的支持，欢迎您参与我们的网上书店服务调查。”,（,6,）在第,4,行输入单选按钮组的标识文字：“,1.,请对本书店在满足客户需求的以下方面进行评价：”。设背景颜色为：,#CCFFCC,。,（,7,）在表格的第,5,行插入,56,的嵌套表格。并在【属性】面板中将嵌套表格的【间距】和【边框】设为,0,，设置嵌套表格第,1,列的宽度为,280,像素，其他,5,列的每列宽度设为,100,像素。,2024/8/7,96,（,8,）按题目要求输入单选按钮组的标识文字。并分别将光标插入到嵌套表格的单元格中，单击【表单】选项卡中的【单选】按钮，创建,20,个单选按钮。,（,9,）在第,6,行输入复选框的标识文字：“,2.,您经常关注本网上书店的哪些栏目,?”,。为醒目起见，可设置背景颜色为：,#99FFFF,。,（,10,）将光标插入到第,7,行的合适位置上，单击【表单】选项卡中的【复选框】按钮，创建表单的复选框，并输入这个复选框的标识文字“新书速递”。,（,11,）用同样的方法分别创建标识文字为“精品系列”、“科学技术”、“现代文学”、“生活艺术”、“文化教育”、“电子音像”、“政治法律”、“网友书评”的复选框。,2024/8/7,97,（,12,）在第,8,行输入多行文本框的标识文字：“,3.,如果您有任何好的建议,能够增强我们之间的合作关系,请告诉我们。”。为醒目起见，可设置背景颜色为：,#BBEECC,。,（,13,）将光标插入到第,9,行的合适位置上，单击【表单】选项卡中的【文本字段】按钮，创建表单的文本框，并在文本框的【属性】面板中设置：【字符宽度】为,110,，【行数】为,8,，【类型】为多行，【初始值】为“请您提建议：”，【换行】为默认。,（,14,）在第,10,、,11,行中分别创建“,4.,您的姓名和性别：”、“,5.,邮购定单号：”、“,6.,您的联系方法：”单行文本框和单选按钮，操作过程不再赘述。,2024/8/7,98,（,15,）在表单合适的位置上输入下拉式列表的标识文字“,7.,您的职业：”。,（,16,）单击【表单】选项卡中的【列表,/,菜单】按钮，此时表单中显示一个很小的下拉式列表框。,（,17,）选中新建的下拉式列表框，在下拉式列表框的【属性】面板中设置【列表,/,菜单】、【类型】、【列表值】、【初始化时选定】等有关参数，具体操作详见,8.2.3,节。,（,18,）用同样的方法创建标识文字为“,8.,您所在的城市：”的下拉列表框。,（,19,）在第,12,行中分别两次单击【表单】选项卡中的【按钮】，便可在表单中生成两个按钮。,2024/8/7,99,（,20,）单击第,1,个按钮，在【属性】面板的【标签】文本框中输入“提交”，然后选中【动作】区域中【提交表单】单选按钮，将其设置为【提交】按钮。,（,21,）单击第,2,个按钮，在【属性】面板的【标签】文本框中输入“重置”，然后选中【动作】区域中【重置表单】单选按钮，将其设置为【复位】按钮。,（,22,）双击表单红色虚线框，在表单的【属性】面板中设置【表单名称】为“表单实例”；【方法】为,POST,；在【动作】文本框中输入“,mailto,：,+,收件人的电子邮件地址”。表示浏览网页时填写的表单内容将以电子邮件的方式发送给服务器，如图,8-15,所示。,（,23,）预览网页后，用,exa8-1.htm,为名保存文件。,2024/8/7,100,本节摘要与重点回顾,在本节中，主要介绍了网络信息交互工具,表单。表单技术是建立动态网站的重要工具之一，利用表单技术能充分发挥网络的有利条件，使信息能够及时得到交互反馈。,本节的重点知识：创建表单和表单的单行文本框、多行文本框、单选按钮、复选框、下拉式列表框等多种表单域的方法，设置各种表单域属性的方法，以及用,E-mail,方式递交表单等知识。,2024/8/7,101,（,1,）时间轴弹出菜单：表示当前的时间轴名称。,（,2,）时间轴指针：在界面上显示当前位置的帧。,（,3,）不管时间轴在哪个位置，一直移动到第一帧。,（,4,）表示时间指针的当前位置。,（,5,）表示每秒显示的帧数。默认值时,15,帧。增加帧数值，,则动画播放的速度将加快。,（,6,）自动播放：选中该项，则网页文档中应用动画后自动运行。,（,7,）,LOOP,（循环）：选中该项，则继续反复时间轴上的动画。,（,8,）行为通道：在指定帧中选择要运行的行为。,（,9,）关键帧：可以变化的帧。,（,10,）图层条：意味着插入了,“,层,”,等对象。,（,11,）图层通道：它是用于编辑图层的空间。,