null网站
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
第4章
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
格、框架与表单网站设计
第4章 表格、框架与表单冯国奇
gqfeng@mail.neu.edu.cn表格操作表格操作创建表格
格式
pdf格式笔记格式下载页码格式下载公文格式下载简报格式下载
化表格
复制及粘贴单元格
改变表格和单元格大小
添加、删除行或列
拆分和合并单元格
表格排序
导出表格
利用表格构造网页的总体框架创建表格创建表格插入表格
表格嵌套
在表格中添加内容
选定表格元素
扩展表格模式:向文档中的所有表格添加单元格边距和间距,并且增加表格的边框以使编辑操作更加容易,可以方便地选择表格中的项目或精确地放置插入点;
导入表格数据导入表格数据导入表格数据在Dreamweaver中,允许导入其他类型文档中的数据,从而避免了再次输入数据的麻烦。
1. 生成分隔符类型的文本数据文件
在Dreamweaver中,如果要导入表格数据,必须首先将数据存储为以某种分隔符作数据间隔的纯文本文件,下图所示分别是以Tab和逗号作分隔符的数据文件格式。这种格式文件可以使用相应软件的存储工具生成,如Microsoft Excel 中的“文件|另存为”命令等,也可以手工编辑。导入表格数据导入表格数据注意: 文件中的一行相当于表格的一行,一行中的各列数据间用Tab空格或逗号隔开,在这样的文件中,数据不像表格中的数据排得那样整齐。
格式化表格格式化表格设置表格属性
设置行、列及单元格属性
使用预先定义好的格式化表格(命令|格式化表格)表格操作表格操作复制及粘贴单元格
改变表格和单元格的大小
增加、删除行或列
拆分、合并单元格
表格排序
导出表格利用表格构造网页的整体框架利用表格构造网页的整体框架设计布局合理、美观大方的页面是每个网页设计者的目标,利用表格可以帮助设计人员规划页面;
在单元格中,几乎可以插入所有的HTML元素,如文本、表单、图像等;
利用表格构造网页的整体框架;利用表格构造网页的整体框架利用表格构造网页的整体框架首先确定页面中各个对象的所在的区域;
再用表格将这些区域划分出来,此时要灵活运用表格的各种属性,如单元格的大小、位置与页面各个对象所在的区域相符;
最后,在单元格中加入对象的内容;利用表格构造网页的整体框架利用表格构造网页的整体框架注意事项
将表格的宽度设置为以象素为单位,这样当浏览器窗口的尺寸改变时,页面中的对象仍然被限定在各自的单元格中,页面布局不会随之改变;
将表格的边框设为0,使表格只起定位作用,否则会影响页面的视觉效果;
不要在表格中插入过多的文本或过大的图像。过慢的浏览速度会让浏览者失去浏览的兴趣;框架概述框架概述网页中使用的框架,是指浏览器窗口中的一个区域,它可以显示在浏览器窗口的HTML文档;
框架在网页中可以将浏览器窗口分割成几个不同的小窗口,各个窗口包含不同的网页,并且可以在替换某个窗口中的网页文件时不会影响到其他窗口中的网页;
框架最普通的用处就是将页面划分为一个导航区和一个内容区;框架集框架集框架集是一个使用框架定义的文件,框架集中保存关于页面的框架尺寸、位置以及每个框架中作为内容载入的所有文件名的信息;
框架集定义了一组框架的布局和属性,包括框架的数目、框架的大小和位置以及在每个框架中初始显示页面的URL。
框架集文件本身不包含要在浏览器中显示的HTML内容,框架集只是向浏览器提供应如何显示一组框架,以及在这些框架中应显示哪些文档的有关信息; 主要内容主要内容创建框架集
选中框架或框架集
保存框架和框架集文件
框架与框架集的属性
使用链接控制框架的内容创建框架集创建框架集选择预定义框架集:将自动设置创建布局所需的所有框架集和框架,它是迅速创建基于框架的布局的最简单方法;
创建包含当前文档的框架集:打开一个文档,插入框架集
创建新的空框架集:文件|新建-框架集创建框架集创建框架集设计框架集:可以在Dreamweaver中自行设计框架集,包括创建框架集、删除框架、调整框架大小等
创建框架集:利用菜单【修改】中的拆分框架功能。
删除框架:拖动边框线到上一级框架边框上
调整框架大小创建框架集创建框架集注:如果要删除的框架中的文档有未保存的内容,则Dreamweaver将提示保存该文档;不能通过拖动边框完全删除一个框架集。要删除一个框架集,需要关闭显示它的文档,若该框架集已经保存,则删除该文件;
选定框架或框架集选定框架或框架集在文档窗口中编辑框架或框架集属性时,只有选择了相应的框架或框架集,对应的属性检查器才会出现;
选择框架
按住【Alt】键同时单击框架内部
在框架面板中选择:首先在【窗口】菜单中选择【框架】选项,出现‘面板窗口’,选择面板中的框架区域进行选择选定框架或框架集选定框架或框架集在文档窗口中选择:单击框架集的某一内部框架边框,在框架集周围显示一个选择轮廓,框架集所有边框都被淡颜色的虚线环绕
在‘框架’面板中选择:单击框架集的某一内部框架边框
中框架集由立体粗边框包围,框架由灰色细线包围,
每一个框架都通过一个框架名确定;保存框架和框架集保存框架和框架集在预览之前,框架集文件和与之相关的框架文件都必须保存;
框架页面由多个文档组成,保存它们需要多个步骤;
Ctrl+S只能保存当前激活的页面或框架集;框架与框架集的属性框架与框架集的属性框架集的属性面板控制框架的大小以及框架间边框的颜色及宽度等;
框架的属性面板决定了框架名、源文件、页面空白、滚动条、单个框架大小的调整以及框架边框在框架集中的可见性;
注意‘框架名’的命名:一个单词,可以使用下划线_,不允许使用连字符、句号、空格。不要使用javascript 的保留字:top,navigator等;
改变框架的背景颜色框架与框架集的属性框架与框架集的属性注
要使链接更改其他框架的内容,必须命名目标框架。要使以后创建跨框架链接更容易一些,在创建框架时最好为每个框架命名;
‘不能调整大小’是针对在浏览器中查看框架的访问者而言的,在Dreamweaver中始终可调整边框大小;
设置框架属性将重写框架集中该属性的设置;
框架与超链接框架与超链接在一个框架中使用链接,可以改变另一个框架中的内容;
在一个框架中使用链接打开另一个框架的内容,必须设置链接‘目标’
在‘设计’视图中,选择文本或对象;
在属性检查器‘链接’字段中,设置链接的文件;
在‘目标’弹出式菜单中,选择链接的文档应在其中显示的框架;框架兼容性框架兼容性框架兼容性功能主要用于处理不能显示框架的浏览器;但不支持框架的浏览器加载该框架集文件时,浏览器只显示标签
表示的内容;
为不支持框架的浏览器提供显示内容的方法:
菜单【修改】|【框架集】|【编辑无框架内容】
Dreamweaver将清除‘设计视图’中的内容,并且在‘设计’视图停步显示‘无框架内容’字样;
在‘文档’窗口中,像处理普通文档一样输入或插入内容;
再次选择【修改】|【框架集】|【编辑无框架内容】,返回到框架集文档的普通视图;相关技巧相关技巧要以垂直或水平方式拆分一个框架或一组框架,将框架边框从‘设计’视图的边框拖入‘设计’视图的中间;要将框架拆分成四个框架,只需将框架边框从‘设计’视图一角拖入框架的中间;
指定浏览器分配给每个框架的空间大小:可以从‘单位’下拉列表中选择‘象素’、‘百分比’、‘相对’三个选项;对于始终保持相同大小的框架(如导航条)而言,‘象素’是最好的选择;设置框架大小的常用方法:先将左侧框架设置为固定象素宽度,将右侧框架大小设置为相对大小,这样在分配象素宽度后,能够使右侧框架伸展以占据所有剩余空间;
链接到外站点的正确做法:要链接到站点外的某一页面,除非特别有必要,正确的做法是在属性检查器的‘目标’下拉列表框中选择‘_top’或‘_blank’页面选项,以保证该不会显示为自己站点的一部分,避免有些使用了框架的网页在自己的框架准中变相;表单表单表单是一个专业网站比不可少的内容,也是一个网站是否具有交互功能的重要体现。
通过表单可以得到访问者的反馈信息,例如进行网上调查、注册登记、接收订货单等;
在设计制作具有交互功能的动态网站时,更离不开表单;主要内容主要内容创建表单
添加表单对象
设置表单属性
处理表单表单概述表单概述表单对象:文本域、密码域、单选按钮、复选框、弹出式菜单、按钮等
表单的作用:是获取Web站点访问者的信息。访问者可以使用诸如文本框、列表框等表单对象输入信息,然后单击某个按钮提交这些信息,被特定程序及时处理;
表单概述表单概述表单的客户端角色处理表单的
常用服务器技术:
Macromedia ColdFusion
ASP
PHP创建表单创建表单表单是表单标签与表单对象标签的组合。
创建表单首先在网页中输入一个空白的表单,即添加表单的
标签;
过程:【插入】|【表单】|【表单】命令;或者插入栏上‘表单’类别;
‘动作’属性中输入路径,或者单击文件夹图标按钮浏览到适当的页面或脚本,以指定处理表单数据的页面或脚本;
‘方法‘:指定将表单数据传输到服务器所使用的方法;
Get:将值附加到请求该页的URL中;是默认值;
Post:将在HTTP请求中嵌入表单数据
对太长的表单不要使用Get方法,URL被限制为最多8192个字符;处理秘密信息时也不能使用Get方法,该方式传送信息是不安全的;表单对象-文本域表单对象-文本域字符宽度:最多可显示的字符数
最多字符数:单行文本域中最多可输入的字符数
换行(选择’多行‘时可用):指定当输入的信息较多,无法在定义的文本区域显示时,如何显示输入的内容
关闭或默认:防止文本换到下一行;超过边界时,文本将向左侧滚动。必须按【enter】键才能将光标移至下一行;
虚拟:设置自动换行;当提交数据进行处理时,自动换行并不应用于数据,数据作为一个数据字符串进行提交;
物理:设置自动换行;当提交数据进行处理时,也对这些数据设置自动换行;其他表单对象其他表单对象隐藏域对站点访问者来说是不可见的,是放置在文档中收集或发送信息的不可见元素;在表单提交时被传送给服务器;
单选按钮、复选框、列表/菜单、跳转菜单
图像域:可以制作更加吸引人的按钮,像’提交‘按钮一样,具有提交表单的功能;
文件域:可以方便地提交文件到服务器上;若使用文件域,表单的方式必须使用‘post’相关技巧相关技巧如果在网上看到一些很不错的表单,可是有时候会发现,从其他网页复制下来的表单无法使用,其主要原因是该表单使用了表格,而复制过来时,仅仅复制了表格,而
标签却被忽略了;
提交表单的相关检查应在客户端进行:javascript或VbScript代码;
快速插入多个复选框或当选按钮:先插入一个复选框或单选按钮,然后选取复选框或当选按钮,按住【ctrl】键同时拖动鼠标进行复制.