网站外观设计与内容编辑详述_第1页
网站外观设计与内容编辑详述_第2页
网站外观设计与内容编辑详述_第3页
网站外观设计与内容编辑详述_第4页
网站外观设计与内容编辑详述_第5页
已阅读5页,还剩96页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、通过本章的学习,主要掌握以下知识点:Dreamweaver简介站点的规划与设计站点的管理 网页编辑与超连接 网页定位技术 层叠样式、模板与库表单与应用 25.07.202213.1 Dreamweaver MX简介 Dreamweaver MX是Macromedia公司最新发布的集网页设计、代码开发、网站创建和管理于一体的软件。 Dreamweaver MX不仅可以轻松设计网站前台的页面,而且也可以方便地实现网站后台的各种复杂功能。25.07.20222启动Dreamweaver MX后,屏幕显示的是工作区窗口,此时系统打开一个名为Untitled的空白文档,在网页文件编辑区中,设计者可以完成

2、网页的设计。工作区窗口各部分功能如下所述。Dreamweaver MX的工作环境25.07.20223标题栏菜单栏文档工具栏网页文件编辑区状态栏浮动面板和浮动面板组【插入】面板【属性】面板25.07.202243.2 站点的规划与设计 1创建具有浏览器兼容性的站点2站点结构的组织3创建设计外观4设计导航方案5规划和收集资源 25.07.20225创建网站一般有以下几个步骤:(1) 规划站点: 了解建站的目的,收集各种有关的资料。确定站点的主题、风格、网站要提供的服务和网页要表达的主要内容。(2) 创建站点的基本结构: 在计算机中创建本地站点的根文件夹以及存放各种资料的子文件夹,配置好所有系统的

3、参数和站点测试路径。(3) 网页设计: 充分利用收集到的数据资料,合理地运用Dreamweaver MX提供的技术,最完美地设计出能表达网站中心思想的Web 页面。25.07.20226规划站点“Dreamweaver站点”和“Internet web 站点”不完全相同。“Dreamweaver站点”是在Dreamweaver制作网页的过程中所使用的术语,是定义一个站点名称、存放文件的文件夹、使用的Web服务器和应用服务器技术等。“Internet Web 站点”则是把已经成功的网站内容放到Internet 或Intranet的web服务器上供用户浏览,即运行系统的web服务器上的站点。网站的

4、发布过程就是将Dreamweaver站点变成Internet Web 站点的过程。 25.07.20227有两种:一是使用“站点定义向导”,这可以根据提示逐步完成设置过程;二是使用“高级”设置,可以根据需要分别设置本地、远程和测试文件夹。 设置Dreamweaver站点的方法25.07.202283.2.1编辑站点 1选择菜单栏中的“站点”-“编辑站点”,出现“站点管理”对话框,在对话框中可以定义多个站点。 新建站点操作如下: 1)单击“新建”-“站点”,出现站点定义对话框2)单击“基本”选项卡以使用站点定义向导,或者单击“高级”选项卡以使用“高级”设置。 25.07.20229建站过程中要注

5、意一点:所有站点名称和素材名称只能用英文,不能用中文,因为DreamweaverMX对中文的解析不是很好,如果用中文会出现解析问题。25.07.202210编辑站点对话框 25.07.202211站点定义 25.07.2022123.2.2设置本地文件夹1在“站点定义”对话框中选择“高级”选项卡和“本地信息”类别选项。2输入“站点名称”,如my site。3输入“本地根文件夹”,或者单击文件夹图标以选择或新建一个本地文件夹,如D:/xwx11。4如果选中“自动刷新本地文件列表”选项,则当每次复制文件到本地文件夹时,系统将自动刷新本地文件列表。如果不选中此项,则可以在站点面板中手动刷新。5在“默

6、认图像文件夹”中确定存放图像的默认文件夹,一般是根目录下的“Images”。6在“HTTP地址”文本框中,输入Web站点将使用的URL。这使Dreamweaver能够验证站点中使用绝对URL的链接。7“启用缓存”选项,指定是否创建本地缓存以提高链接和站点管理任务的速度。 25.07.202213完成后的本地文件夹对话框 25.07.2022143.2.3设置远程文件夹 1在站点定义对话框中选择“高级”选项卡的“远程信息”分类选项 2选择一个“访问”选项:本地/网络。3确定一个“远程文件夹”。4“自动刷新远程文件列表”复选框。5“保存时自动将文件上传到服务器”复选框。6“启用文件存回和取出”。7

7、单击“确定”按钮。 25.07.202215定义远程站点对话框 25.07.2022163.2.4 用FTP连接到Web服务器 1输入FTP主机名。2输入远程站点的主目录名。3输入连接FTP服务器的登录名和密码。4如果你的防火墙配置要求被动FTP,则选择“Use Passive FTP”。5使用防火墙选项。 6在windows中使用安全FTP 选择FTP来访问远程文件夹时,在Windows中可以选择使用SSH安全登录检查框以自动继续FTP的安全检查。7其它选项与“本地网络”中相同。8单击“确定”按钮。 25.07.202217使用ftp连接时的远程站点定义对话框 25.07.2022181在“

8、站点定义”对话框中选择“高级”选项卡,然后从“类别”列表中选择“测试服务器”2服务器模型 3访问方式有“无”、“FTP”和“Local/Network”三种。 4测试服务器 5自动刷新远程文件列表选项6URL前缀 7单击“确定”按钮 3.2.5 设置测试服务器25.07.202219测试服务器定义对话框 25.07.202220应用服务器技术列表 25.07.2022213.3.1“文件”面板1使用“文件”面板 2设置“文件”面板参数 3设置“文件视图列” 4在“文件”面板中查看站点3.3 管理站点文件25.07.202222展开的文件面板 25.07.202223折叠的文件面板 25.07.

9、202224站点面板工具栏 25.07.202225站点首选参数对话框 25.07.202226站点面板的文件列表 25.07.202227站点定义中的“文件视图列”选项 25.07.2022283.3.2站点地图 站点地图仅适用于本地站点,若要创建远程站点的地图,需将远程站点的内容复制到本地磁盘上的一个文件夹中,然后使用“编辑站点”命令将该站点定义为本地站点。 25.07.2022291. 设置站点 1)选择“站点”-“编辑站点”,出现“编辑站点”对话框。2)选择一个“站点”并单击“编辑”按钮,出现“站点定义”对话框。3)从左侧的“分类”列表中选择“站点地图布局”,“站点定义”对话框即可显示

10、“站点地图布局”选项 4)单击文件夹图标以通过浏览查找站点的主页。25.07.2022305)在“列数”文本框中,键入一个数字以设置在站点地图窗口中每行要显示的页数。6)在“列宽”文本框中,键入一个数字以设置站点地图列的宽度。7)在“图标标签”下,选择在站点地图中与文档图标一起显示的名称表示为文件名还是页标题。8)在“选项”下,选择要在站点地图中显示的文件 。9)单击“确认”按钮 25.07.202231站点地图布局对话框 25.07.202232站点地图例图 25.07.2022332.站点地图 站点地图的显示规则如下:(1)以红色显示的文本指示断开的链接;(2)以蓝色显示并标有地球图标的文

11、本,指示其它站点上的文件或特殊链接;(3)绿色选中标记指示你已取出的文件;(4)红色选中标记指示他人取出的文件;(5)锁形图标指示只读或锁定的文件。 25.07.202234若要在站点地图中打开某页进行编辑,可执行以下操作之一(1)双击该文件;(2)选择该文件,然后选择“文件”-“打开”或“站点”-“打开”。 25.07.2022353.3.3从站点列表中删除站点 1选择“站点”-“编辑站点”,出现“编辑站点”对话框。2选择一个站点名称。3单击“删除”按钮,出现一个对话框,要求确认删除。如图 316所示。4单击“是”,从列表中删除站点,或单击“NO”保留站点名称。5单击“完成”,关闭“编辑站点

12、” 对话框。 25.07.202236确认删除站点对话框 25.07.2022373.3.4 获取和上传文件 1从远程或测试服务器或取文件 (1)在“文件”面板上,从“站点”弹出式菜单中选择一个“站点”。(2)如果在使用FTP传输文件,请单击“连接”按钮打开于远程服务器的连接。如果可以在前以链接的“远程”窗格中看到远程文件,则无需单击“连接”;当单击“获取”时,Dreamweaver会自动连接。25.07.202238 (3)选择所需文件进行下载。通常在“远程视图”或“测试服务器”视图中选择这些文件, 也可以在“本地视图”中选择相应的文件。(4)单击“文件”面板工具栏上的“获取”按钮,或者选择

13、“站点”-“获取”。如果文件当前已在文档窗口中打开,则可以从文档窗口中选择“站点”“获取”,出现一个对话框,询问是否要获取相应文件。(5)若要下载相关文件,则单击“是”;否则单击“否”按钮。 25.07.202239 3.3.5同步本地和远程站点上的文件 (1)在“文件”面板上选择一个站点。(2)选择要上传的文件。通常在“本地”视图中选择这些文件,也可以在“远程”视图中选择相应的文件。(3)单击“文件”面板工具栏上的“上传”按钮。如果文件当前已经在文档窗口中打开,则可以从文档窗口种选择“站点”“上传”命令,(4)若要上传相关文件,则单击“是”;否则单击“否”按钮。 25.07.202240确认

14、获取相关文件对话框 25.07.202241 如果远程站点为ftp服务器,则使用ftp来同步文件,其操作如下。1在“文件”面板中,从“当前站点”列表弹出式菜单中选择一个站点。2选择特定的文件或文件夹。如果要同步整个站点,则跳过此步骤。3从上下菜单中选择“同步”,出现“同步文件”对话框。4完成该对话框。 25.07.2022423.4 网页编辑与超链接Dreamweaver MX文字格式化主要有4种方式: (1) 手工格式化方式是在文本【属性】面板中完成文字的格式化操作。(2) 用HTML标记格式化方式是用系统提供的HTML标记来格式化文本。(3) 用HTML样式来格式化文本的方式。(4) CS

15、S样式是一种对网页文档内容进行精确格式化的方法,它可以使用许多HTML样式不能使用的属性。3.4.1 网页文档的格式化25.07.2022433.4.2 网页编辑的基本操作 在网页中插入各种元素1.插入水平线2. 插入日期3. 插入Flash按钮和Flash 文字4. 插入Java Applet 程序5. 插入ActiveX控件6. 插入第三方插件25.07.202244 文本的查找和替换* 文本的拼写检查* 建立网站相册 利用外部编辑器编辑图像 创建鼠标经过图像25.07.2022453.4.3 创建超链接 超链接概述 超链接是用准备好的文本、按钮、图像等对象与其他对象建立链接,也就是在源端

16、点和目标端点之间建立一种链接。源端点是超链接的起始端点,目标端点是链接的对象,也称为目标锚。超链接按源端点的链接划分,分为超文本链接和非超文本链接两类。25.07.2022463.4.3 创建超链接 创建超链接的方法(5种) 在站点管理器中编辑超链接 创建锚点链接 创建电子邮件链接 创建导航条 创建跳转菜单 创建映射图链接25.07.2022473.5 网页的定位技术3.5.1 创建表格的基本操作3.5.2 表格的编辑与格式化3.5.3 外部数据导入和表格排序3.5.4 布局表格和布局单元格3.5.5 层的创建和基本操作3.5.6 层的属性设置1003.5.7 层与表格互换3.5.8 层的应用

17、实例3.5.9 框架的基本操作3.5.10 框架和框架集的选择与属性设置3.5.11 框架和框架集的保存3.5.12 框架应用实例25.07.2022483.5.1 创建表格的基本操作新建表格设置表格和单元格的属性选取表格和单元格表格的嵌套25.07.20224925.07.2022503.5.2 表格的编辑与格式化改变表格或单元格的大小表格行、列的增加和删除单元格的拆分和合并单元格的复制、粘贴、移动和清除表格格式化25.07.2022513.5.3 外部数据导入和表格排序在表格中导入外部数据文件表格内容排序*25.07.2022523.5.4 布局表格和布局单元格创建和调整布局表格与布局单元

18、格布局视图应用实例25.07.2022533.5.5 层的创建和基本操作创建和删除层激活和选中层调整、移动和对齐层25.07.2022543.5.6 层的属性设置利用层【属性】面板设置层的控制和操作3.5.7 层与表格互换表格转换为层层转换为表格3.5.8 层的应用实例25.07.202255本节重点回顾主要介绍在Dreamweaver中如何规划、设计和管理站点,可以用多种方法创建站点,如果开发Web应用程序,则必须根据需要设置服务器和数据库,然后再设计该站点的外观,并对该站点进行功能测试,以验证该站点是否符合定义的目标,可以在站点中包含动态页,在服务器上可以发布网站,并定期地维护,以确保站点

19、保持最新,且工作正常。本章培养学生实际动手操作能力。25.07.202256另外,介绍了Drameweaver MX中的3种页面定位工具表格、层和框架,重点介绍了表格、层和框架在设计网页时的定位作用以及表格、层、框架的创建、编辑和属性设置等操作。重点知识有: 表格、层、框架和框架集的创建、选择、编辑、保存等操作方法,表格、层、框架和框架集的各种属性设置,在表格、层和框架中输入各种网页元素的方法,布局表格和布局单元格的应用、表格样式化、外部数据导入表格、层及嵌套层、层的叠放次序、层的可见性、框架中网页的链接和显示方法等。25.07.2022573.6 层叠样式、模板与库3.6.1 层叠样式表概述

20、3.6.2 层叠样式表的创建与编辑3.6.3 层叠样式表的应用3.6.4 模板的应用3.6.5 库的应用3.6.6 资源管理25.07.2022583.6.1 层叠样式表概述 层叠样式表(Cascading Style Sheets,以下简称CSS样式表)是由W3C(Word Wide Web Consortium)组织批准的一种网页元素定义规则,是一种可以对网页文档内容进行精确格式化控制的工具。 利用CSS样式表可自动格式化网页文档,可将CSS样式表直接存储在网页文档中,也可以将CSS样式表定义在网页文档之外,然后将它链接到多个文档中。25.07.2022593.6.2 层叠样式表的创建与编

21、辑 在Dreamweaver MX中,单击网页编辑窗口中状态栏右下角的按钮,或选择【窗口】|【CSS样式】命令,还可以单击【设计】浮动面板组的【CSS样式】选项卡,便可打开【CSS样式】面板。 层叠样式、模板与库电子商务网站建设教程在【CSS样式】面板中,有【应用样式】和【编辑样式】两种模式,分别用于CSS样式的应用和编辑操作。设计者可以用【CSS样式】面板右下角的4个按钮对CSS样式进行操作。4个按钮的作用如下所述。25.07.202260图7-1【CSS样式】面板25.07.202261 附加样式: 单击此按钮,可选择一个外部样式表文件,并将其应用于当前文档。新建样式: 单击此按钮,可打开

22、【新建样式】对话框,新建一个样式。编辑样式: 单击此按钮,可打开【编辑样式】对话框,编辑制定的样式。删除样式: 选中列表中的样式后,单击此按钮可删除该样式。25.07.202262创建层叠样式和层叠样式表外部样式表的链接、导入和编辑层叠样式表的应用25.07.2022633.6.3 层叠样式表的应用滤镜的概述透明度滤镜的应用显示滤镜的应用模糊滤镜的应用25.07.202264滤镜的概述滤镜是CSS样式表中功能最丰富、效果最奇特的工具之一,调整Dreamweaver MX 中CSS样式表的十几种滤镜的参数,就能在网页上制作出多姿多彩、令人眩目的各种效果。25.07.202265透明度滤镜的应用用

23、透明度(Alpha)滤镜可以通过具体的数值来指定网页中对象点、线、面的透明度,使得网页中对象的透明度发生变化,制作出一些特殊的视觉效果。透明度滤镜的语法格式是: filter:Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)25.07.202266显示滤镜的应用可以利用混合(blend)和显示(reveal)两种滤镜在页面上添加动人的淡入淡出、网页转换效果,前者可以使页面中的对象逐渐消失或显示,后者提供了24种网页转换的效果。其语法格式如下: filter:blendTrans(dura

24、tion=时间数值)filter:revealTrans(duration=时间数值,transition=过渡类型) 25.07.202267模糊滤镜的应用模糊滤镜(Blur)是CSS的滤镜之一,将其应用到网页文本上可以产生出立体字的效果。模糊滤镜能为制作网页的立体字标题带来方便,与其他立体字效果的处理方法相比,能使页面的下载速度明显增快。将滤镜应用到图片上,也能得到意想不到的效果。模糊滤镜的语法格式是: filter:Blur(Add=add,Direction=direction,Strength=strength)25.07.2022683.6.4 模板的应用 Dreamweaver

25、MX的模板是一种预先设计好的网页样式,在制作风格相似的页面时,只要套用这种模板便可以设计出风格一致的网页。25.07.202269创建与保存模板 创建模板的方法可以是新建一个空白的模板,然后对它进行编辑后保存,也可以利用一个现成的网页,设置好可编辑区,转存为模板。 1. 新建一个空白模板 2. 利用一个现成的网页文件来创建一个模板25.07.202270应用与修改模板1. 应用模板制作网页2. 修改模板25.07.202271更新基于模板的网页文档将创建的模板应用到页面制作以后,只需修改一个模板,就可修改所有应用此模板的网页。25.07.2022723.6.5 库的应用创建和应用库项目编辑库项

26、目用库项目更新网站25.07.202273编辑库项目1. 重命名一个库项目2. 删除一个库项目3. 修改库项目25.07.2022743.6.6资源管理图像管理颜色管理超链接管理Flash管理25.07.202275本节摘要与重点回顾样式、模板和库是网页设计者设计制作网页时不可缺少的工具。它们可以帮助设计者统一整个网站的风格,节省网页创作的时间,提高工作效率,给管理整个网站带来很大方便。CSS层叠样式表不但能使设计者控制许多HTML样式不能控制的属性,还能迅速准确地将样式作用于整个网站的多个网页上;另外,它带有的特效滤镜,也可使网页设计效果丰富多彩。25.07.202276本节中介绍的【资源】

27、管理面板可以统一管理整个站点的资源,避免反复查找某些网页元素,能提高网页设计的效率,得到事半功倍的效果。本节的重点知识: 创建、编辑CSS样式,创建、编辑、选用CSS外部样式表,常用CSS特效滤镜的使用方法,模板和库的创建、编辑、应用,站点的更新,用网站资源管理器统一管理网站中的各种资源。25.07.2022773.7 表单及应用3.7.1交互式表单概述3.7.2创建表单3.7.3表单应用实例25.07.2022783.7.1交互式表单概述 表单(Form)技术可以实现浏览者与Internet服务器之间信息的交互传送,它是网络信息收集处理的一种重要的方式。 使用表单,可以帮助Internet服

28、务器从用户那里收集信息,例如收集用户资料、获取用户订单,在Internet上统也同样存在大量的表单,让用户输入文字进行选择。25.07.202279表单有两个重要的组成部分: (1)一个是在网页中进行描述的表单对象。(2)二是应用程序,它可以是服务器端的,也可以是客户端的,用于对客户信息进行分析处理。25.07.202280通常表单的工作过程如下: (1)访问者在浏览有表单的页面时,可填写必要的信息,然后单击“提交”按钮。 (2)这些信息通过Internet传送到服务器上。(3)服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。 (4)当数据完整无误后,服务器反馈

29、一个输入完成信息。25.07.202281 在 Dreamweaver 中,表单输入类型称为表单对象。可以通过选择“插入”“表单对象”来插入表单对象,或者通过从下图显示的“插入”栏的“表单”面板访问表单对象来插入表单对象。 25.07.2022821、表单 “表单”在文档中插入表单。任何其他表单对象,如文本域、按钮等,都必须插入表单之中,这样所有浏览器才能正确处理这些数据。2、文本域“文本域”在表单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号(用于保护密码)。3、复选框 “复选框”在表单中插入复选框。复选框允许在一组选项中选择多项,用户

30、可以选择任意多个适用的选项。25.07.2022834、单选按钮“单选按钮”在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮,就会取消选择该组中的所有其他按钮。例如,用户可以选择“是”或“否”。 5、单选按钮组“单选按钮组”插入共享同一名称的单选按钮的集合。6、列表/菜单“列表/菜单”使您可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项值,并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值,而且只允许用户选择一个选项。25.07.2022847、跳转菜单“跳转菜单”插入可导航的列表或弹出式菜单。跳转菜单允许您插入一种菜单,在这种菜单中的每个选项

31、都链接到文档或文件。请参见创建跳转菜单。8、图像域“图像域”使您可以在表单中插入图像。可以使用图像域替换“提交”按钮,以生成图形化按钮。9、文件域“文件域”在文档中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件,并将这些文件作为表单数据上传。25.07.20228510、按钮 “按钮”在表单中插入文本按钮。按钮在单击时执行任务,如提交或重置表单。可以为按钮添加自定义名称或标签,或者使用预定义的“提交”或“重置”标签之一。11、标签“标签”在文档中给表单加上标签,以形式开头和结尾。12、字段集“字段集”在文本中设置文本标签。认识了表单,那么创建和使用表单时就可以根据需要进行选

32、择。表单时是动态网页的灵魂。25.07.2022863.7.2创建表单在Dreamweaver中可以创建各种各样的表单,表单中可以包含各种对象,例如文本域、按钮、列表等。1、插入表单在网页中添加表单对象,首先必须创建表单。表单在浏览网页中属于不可见元素。在Dreamweaver8中插入一个表单。当页面处于“设计”视图中时,用红色的虚轮廓线指示表单。如果没有看到此轮廓线,请检查是否选中了“查看”“可视化助理”“不可见元素”。(1)将插入点放在希望表单出现的位置。选择“插入”“表单”,或选择“插入”栏上的“表单”类别,然后单击“表单”图标,(2)用鼠标选中表单,在属性面板上可以设置表单的各项属性。

33、 25.07.202287在“动作”文本框中指定处理该表单的动态也或脚本的路径。在“方法”下拉列表中,选择将表单数据传输到服务器的方法。表单“方法”有:POST 在 HTTP 请求中嵌入表单数据。GET 将值追加到请求该页的 URL 中。默认 使用浏览器的默认设置将表单数据发送到服务器。通常,默认方法为 GET 方法。不要使用 GET 方法发送长表单。URL 的长度限制在 8,192 个字符以内。如果发送的数据量太大,数据将被截断,从而导致意外的或失败的处理结果。而且,在发送机密用户名和密码、信用卡号或其他机密信息时,不要使用 GET 方法。用 GET 方法传递信息不安全。25.07.2022

34、88在“目标”弹出式菜单指定一个窗口,在该窗口中显示调用程序所返回的数据。如果命名的窗口尚未打开,则打开一个具有该名称的新窗口。目标值有: _blank,在未命名的新窗口中打开目标文档。 _parent,在显示当前文档的窗口的父窗口中打开目标文档。 _self,在提交表单所使用的窗口中打开目标文档。 _top,在当前窗口的窗体内打开目标文档。此值可用于确保目标文档占用整个窗口,即使原始文档显示在框架中。25.07.202289表单的应用 1、一个简单的提交留言页面 新建11.html网页文件,选择表单插入栏,插入表单,将光标放置在表单内,插入一个5行2列的表格,将第1、5行合并。分别在第2、3

35、行插入文本字段,在第4行插入文本区域,在第5行插入两个按钮。文本域是用户在其中输入响应的表单对象。有三种类型的文本域:单行文本域通常提供单字或短语响应,如姓名或地址。多行文本域为访问者提供一个较大的区域,供其输入响应。可以指定访问者最多可输入的行数以及对象的字符宽度。如果输入的文本超过这些设置,则该域将按照换行属性中指定的设置进行滚动。密码域是特殊类型的文本域。当用户在密码域中键入时,所输入的文本被替换为星号或项目符号,以隐藏该文本,保护这些信息不被看到。 25.07.20229025.07.202291表单应用实例调查问卷制作调查问卷是网页设计者与浏览者进行交流的最有效手段,在本节中介绍一个

36、网上书店问卷调查的表单应用实例,要求: 在网页上创建一个网上书店服务问卷调查的表单,表单包含单选按钮、复选框、单行文本框、多行文本框、下拉式列表等表单元素,表单中的表单元素用表格定位,表单中的标题及标识文字如下图所示。25.07.202292图8-14表单应用实例25.07.202293本例的操作步骤如下。(1) 新建网页文件,并选择【修改】 | 【页面属性】命令,设置页面背景图像。(2) 单击【插入】浮动面板组的【表单】选项卡中的【创建表单】按钮。(3) 在表单中插入用于定位的表格,表格为12行1列,780460像素,表格边框颜色为#993300。(4) 在第1行输入标题文字“网上书店服务调

37、查”,字体为“红色”,背景颜色为#FFFFCC。25.07.202294(5) 在第2行输入文字“尊敬的顾客:您好!为了更好地为您服务,我们非常重视您在购物过程中的感受,您的意见与建议是我们不断进步的源泉,谢谢您对我们工作的支持,欢迎您参与我们的网上书店服务调查。”(6) 在第4行输入单选按钮组的标识文字: “1. 请对本书店在满足客户需求的以下方面进行评价: ”。设背景颜色为: #CCFFCC。(7) 在表格的第5行插入56的嵌套表格。并在【属性】面板中将嵌套表格的【间距】和【边框】设为0,设置嵌套表格第1列的宽度为280像素,其他5列的每列宽度设为100像素。25.07.202295(8)

38、 按题目要求输入单选按钮组的标识文字。并分别将光标插入到嵌套表格的单元格中,单击【表单】选项卡中的【单选】按钮,创建20个单选按钮。(9) 在第6行输入复选框的标识文字: “2.您经常关注本网上书店的哪些栏目?”。为醒目起见,可设置背景颜色为: #99FFFF。(10) 将光标插入到第7行的合适位置上,单击【表单】选项卡中的【复选框】按钮,创建表单的复选框,并输入这个复选框的标识文字“新书速递”。(11) 用同样的方法分别创建标识文字为“精品系列”、“科学技术”、“现代文学”、“生活艺术”、“文化教育”、“电子音像”、“政治法律”、“网友书评”的复选框。25.07.202296(12) 在第8行输入多行文本框的标识文字: “3. 如果您有任何好的建议, 能够增强我们之间

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论