第9章 Dreamweaver基础演练Word文件下载.docx
《第9章 Dreamweaver基础演练Word文件下载.docx》由会员分享,可在线阅读,更多相关《第9章 Dreamweaver基础演练Word文件下载.docx(34页珍藏版)》请在冰豆网上搜索。
tr>
td>
&
nbsp;
/td>
/tr>
/table>
9.1.2在页面中插入表格
在Dreamweaver8插入一个表格的方法非常简单,只需要通过简单的设置即可快速地得到一个相应的表格对象。
1.打开Dreamweaver8,按【Ctrl+F2】调出【插入】面板,可以看到【常用】选项,如图9-1-2所示。
如果出现的不是【常用】选项,可以按左边的黑色三角符号选择【常用】。
图9-1-2【插入】面板的【常用】选项
2.单击【表格】
按钮,弹出如图9-1-3所示的【表格】对话框。
图9-1-3【表格】对话框
3.进行如下的设置:
【表格大小】
●【行数】:
在该选项的文本框中输入要创建表格的行数。
●【列数】:
在该选项的文本框中输入要创建表格的列数。
●【表格宽度】:
在该选项的文本框中输入相应的表格宽度的数值,在右侧的【单位】下拉列表中选择“像素”选项,作为表格宽度的单位。
当选择“百分比”选项时,表格的宽度将按照当前显示页面尺寸的百分比进行显示。
当浏览器窗口的尺寸发生变化时,表格的宽度也将按照相应的比例进行变化。
●【边框粗细】:
当定义了表格后,在该选项的文本框中可以定义不同粗细的边框尺寸。
如图9-1-4所示为不同边框粗细的表格对象。
图9-1-4不同边框粗细的表格对象
●【单元格边距】:
定义了表格后,当输入文字或其他对象时,元素和单元格的边距上会出现一个边距间隔,在该选项的文本框中输入一个数值,确定单元格边框和单元格内容之间的像素数。
如图9-1-5所示为不同单元格边距的表格。
图9-1-5不同单元格边距的表格
●【单元格间距】:
当定义了表格后,每一个单元格之间的像素数值,虽然未显示默认值,当Dreamweaver会显示两个像素的单元格间距,也可以在该选项的文本框中输入要定义的不同的单元格间距。
如图9-1-6所示为不同单元格间距的表格。
图9-1-6不同单元格间距的表格
【页眉】
●“无”:
对表不启用列或行标题。
●“左侧”:
可以将表的第一列作为标题列,以便为表中的每一行输入一个标题。
●“顶部”:
可以将表的第一行作为标题行,以便为表中的每一列输入一个标题。
●“两者”:
能够在表中输入列标题和行标题。
提示:
当选中除“无”以外的不同选项时,在表格中输入内容时,会自动定义文字为居中对齐和粗体选项。
如图9-1-7所示为顶部【页眉】方式输入文字后的效果。
图9-1-7顶部【页眉】方式
【辅助功能】
●【标题】:
在该文本框中可以输入该“表格”的标题文字,可以直接在该文本框输入,相应的文字将按照【对齐标题】选项定义的位置出现在表格的相对位置上。
如图9-1-8所示。
图9-1-8自动添加的标题
●【对齐标题】:
在该下拉列表中可以选择到“标题”对象和“表格”的相互关系。
●【摘要】:
在该文本框中输入表格的说明。
屏幕阅读起可以读取摘要文本,但是该文本不会显示在浏览器中。
4.设置完毕后,单击【确定】按钮创建表格对象。
9.1.3设置表格属性
当要对一个表格对象进行设置时,就要用到【属性】面板。
当要使用【属性】面板对表格对象进行设置时,可以将整个表格或表格中一部分选中,选择【窗口】|【属性】命令或按Ctrl+F3将面板调出,当选中表格时【属性】面板如图9-1-9所示。
图9-1-9【属性】面板
【属性】面板中的有些选项在前一小节中已经进行详细的讲解,在这里就不再赘述了。
下面我们来看一下一些新的选项。
●定义表格的名称
当要对表格对象添加一个名称,为更加高级的操作提供方便时,可以将表格对象选中,在【属性】面板中的【表格Id】框中输入要使用的名称即可。
●设置表格的对齐方式
当表格创建完毕后,表格对象在“默认”的情况下在整个的窗口中靠近左侧对齐,当要调整表格的对齐方式时,可以在【对齐】下拉列表中选择相应的选项,如“左对齐”、“居中对齐”以及“右对齐”。
注意:
这里的对齐方式的设置,只是应用到表格对象和浏览器窗口之间的对齐方式,和表格中文字的对齐方式没有任何关系,所以不要混淆。
●使用快速调整表格的按钮
【清除列宽】
:
单击该按钮时,将清除表格列宽度的设置。
【清除行高】
单击该按钮时,将清除表格行高度的设置。
【将表格宽度转换成像素】
单击该按钮时,将表格宽度设置的单位转换为像素,单击该按钮原有的尺寸并不会发生任何的变化。
【将表格高度转换成像素】
单击该按钮时,将表格高度设置的单位转换为像素,单击该按钮原有的尺寸并不会发生任何的变化。
【将表格宽度转换成百分比】
单击该按钮时,将表格宽度设置的单位转换成百分比,单击该按钮原有的尺寸并不会发生任何的变化。
【将表格高度转换成百分比】
单击该按钮时,将表格高度设置的单位转换为百分比,单击按按钮原有的尺寸并不会发生任何的变化。
●定义表格的颜色
在默认的情况下,表格的颜色采用“白色”。
当要调整表格的颜色时,可以通过【属性】面板中的相应设置进行调整。
选中要调整的行、列或整个表格对象,单击【背景颜色】或【边框颜色】右侧的
按钮,在弹出的面板中选择要使用的颜色,也可以在其右侧的文本框中输入“十六进制颜色代码”,可以将选中的颜色定义到相应的位置上。
●在表格中定义背景图像
在默认的情况下表格对象的颜色采用单色填充,如果要使用更加丰富的填充,可以使用背景图像填充到表格中。
单击【背景图像】选项右侧的【浏览文件】
按钮,在弹出的如图9-1-10所示的【选择图像源文件】对话框中选择要使用的背景文件。
单击【确定】按钮将该图像定义到表格对象的背景中。
按下F12键在浏览器中浏览表格对象的效果如图9-1-11所示。
图9-1-10【选择图像源文件】对话框
图9-1-11定义了背景图像的表格对象
1.除了上面介绍的定义图像的方法外,也可以直接在【属性】面板中的【背景图像】选项中的文本框中直接输入图像文件的链接。
也可以拖拽右侧的【指向文件】
按钮到【文件】面板中要使用的图像文件上。
2.为表格对象定义背景图像时,背景图像的尺寸如果没有表格对象的尺寸大,将进行重复的放置。
当背景图像的尺寸比表格对象的尺寸大时,图像将进行裁切。
●合并单元格
当需要将两个或多个单元格合并成一个单元格时,使用鼠标将要合并的单元格同时选中,如图9-1-12所示。
图9-1-12选中要合并的单元格
要进行多个单元格合并时,多个单元格必须在同一行或列中,而且必须是相邻的。
这时的【属性】面板如图9-1-13所示,按下左下方的【合并所选的单元格】
按钮即可实现合并,合并后的表格对象如图9-1-14所示。
图9-1-13选中单个或多个单元格时的【属性】面板
图9-1-14合并单元格后的表格
●拆分单元格
当需要将一个单元格拆分成两个或多个单元格时,使用鼠标将要拆分的单元格选中。
这里选中的是表格中的第一个单元格,点击【属性】面板左下方的【拆分单元格为行或列】
按钮,弹出的对话框如图9-1-15所示。
图9-1-15【拆分单元格】对话框
选择“列”单选框后实现了把第一个单元格拆分成两列,效果如图9-1-16所示。
图9-1-16拆分单元格后的表格
当将单元格进行拆分时,如果单元格中包含文字,拆分后并不会分别放置到相应的位置上,而是统一放置到一个单元格中。
另外,当选择单个单元格时,可以在【属性】面板中设置它的背景,可以是单色也可以是图像,操作和给表格添加背景是一样的。
还有一些这里没有说明的选项,读者可以自己去设置以逐步熟悉【属性】面板。
9.2使用层
层的概念和平面设计软件中的层概念比较相似,可以将层放置到页面的任何位置上,层和层之间同样会出现层叠的现象,即使当多个层同时出现在一个位置上时先创建的“层”会被后创建的层遮盖。
在一个层中可以继续创建“子层”,“子层”会继承“父层”的属性。
9.2.1创建“层”
Dreamweaver8可以随时自定义、精确创建层。
在Dreamweaver软件中创建层的HTML标签可以是<
div>
、<
span>
layer>
ilayer>
四种标签,在这里传见的标签前两个是由W3C所认证的,可以在IE和Netscape两种常用的浏览器中正常察看,后面的<
两种标签只会被Netscape浏览器所识别。
在一般的情况下使用Dreamweaver8所创建的“层”都使用<
标签。
当要创建一个层时,执行如下操作。
1.创建一个HTML文档。
2.调出【插入】面板,选择【布局】选项,如图9-2-1所示。
图9-2-1【插入】面板的【布局】选项
3.单击【描绘层】
按钮,在页面中要创建“层”的位置上,拖拽鼠标创建层,如图9-2-2所示。
图9-2-2创建“层”
当要一次传见出多个层时可以在创建层的时候,按下Ctrl键。
9.2.2创建嵌套层
嵌套层也就是在一个层中继续创建一个新的层,“子层”将按照“父层”的属性进行调整,例如,移动“父层”时“子层”也会同时移动。
在以前的嵌套概念中,“子对象”将无法比“父对象”的尺寸大,但是在嵌套层中完全可以制作大于“父层”尺寸的“子层”,换句话说,“子层”可以完全将“父层”覆盖住。
创建嵌套层的方法有两种:
●一般的创建嵌套层的方法
1.单击【布局】选项中的【描绘层】按钮,在【文档】窗口拖拽鼠标创建一个层,如图9-2-3所示。
图9-2-3创建一个“层”
2.继续单击【描绘层】按钮,按下Alt键,在创建的层中继续拖拽鼠标创建一个“子层”,如图9-2-4所示。
这时的【层】面板如图9-2-5所示。
图9-2-4创建一个“子层”
图9-2-5【层】面板
●使用【层】面板创建嵌套层
通过使用【层】面板,可以使创建嵌套层更加方便
1.单击【布局】选项中的【描绘层】按钮,在【文档】窗口中按下【Ctrl】键的同时,拖拽鼠标创建若干个层。
但是这些层并不是嵌套层。
【层】面板如图9-2-6所示。
图9-2-6【层】面板
2.按下Ctrl键,在【层】面板中拖拽“子层”到“父层”中,如图9-2-7所示。
操作后【层】面板如图9-2-8所示。
图9-2-7拖拽“子层”到“父层”中
图9-2-8完成拖拽
9.2.3编辑层属性
可以通过手动的方式和【属性】面板的调整,重新编辑层的属性。
当要快速自由地编辑层属性时,例如可以通过使用鼠标直接调整层的“位置”和“尺寸”。
如果要精确调整层的“位置”、“尺寸”和其他属性的精确参数时,可以使用【属性】面板进行调整。
【属性】面板如图9-2-9所示。
图9-2-9【属性】面板
●【层编号】:
在该文本框中输入当前选中的层的名称。
●【左】、【上】:
在两个选项的文本框中输入该层的精确位置坐标。
●【宽】、【高】:
在两个选项的文本框中输入该层的精确尺寸。
●【Z轴】:
在该选项的下拉列表中可以确定层的堆叠顺序。
编号较高的层显示在编号较低的层的上面。
值可以为正值,也可以为负值。
●【可见性】:
指定该层最初是否可见。
从以下选项中选择:
“默认”:
不指定可见性属性;
“继承”:
使用该层的“父层”的可见性属性;
“可见”:
显示该层的内容,而不管“父层”的值是什么;
“隐藏”:
隐藏该层的内容,而不管“父层”的值是什么。
●【背景图像】:
在该选项右侧的文本框中输入要定义为背景图像的路径,或者单击右侧的【浏览文件】按钮,在弹出的对话框中选择要使用的图像文件,将其定义到层的背景中。
●【背景颜色】:
单击该选项右侧的按钮
按钮,在弹出的面板中选择颜色,或直接在右侧的文本框中输入“十六进制颜色代码”定义颜色,将选定的颜色定义到层的背景上。
●【类】:
在该下拉列表中可以选择在该文档中创建的CSS样式,定义该层中的元素使用的“样式表”。
●【溢出】:
在该选项的下拉列表中可以确定在层的内容超出尺寸时的设置方式。
当选择“可见”时,增加层的大小,使它的所有内容均可见,层向右下方扩展;
当选择“隐藏”时,保持层的尺寸并剪辑任何超出的内容,并且不提供任何滚动条的使用;
当选择“滚动”时,不论内容是否超出层的尺寸,在层中都添加滚动条;
当选择“自动”时,使滚动条仅在层的内容超出它的边界时才出现。
●【剪辑】:
在该选项区域中可以确定【上】、【下】、【左】和【右】的可视区域。
层是一个非常游泳的Web页面的布局工具,但是这一节中的内容并没有将所有层的使用讲述完毕。
读者可以自己去探索尝试。
9.3制作表单
在日常的学习、生活和工作中,使用Internet最为普遍的还是Email,当在一个站点中申请一个邮箱时,都需要填写大量的用户信息,如图9-4-1所示为hotmail邮箱的注册页面。
图9-3-1hotmail邮箱的注册页面
在图9-3-1中可以看到页面中出现了需要填写的一些内容,这里的内容并不是要求浏览者通过打印进行填写的,而是使用鼠标和键盘在Web页面中直接填写的,通过网络直接上传到相应的服务器上,从而实现“用户信息”的采集。
在网页中出现的这些“交互信息”对象,称之为“表单”。
Dreamweaver提供了多种表单对象的创建功能,在【插入】菜单中的【表单】选项中提供了左右的表单对象,在这一节中将介绍一些网页中常用表单对象的使用方法。
9.3.1插入表单
在Web页面中如果要使用表单时,都需要利用两部分使用表单部分,一个部分为表单标签,另一部分为相应的表单对象。
如果在页面中没有表单标签,表单对象通用可以正常显示在页面中,也可以进行填写,但是无法提交。
换句话说,不使用表单标签创建的表单页面根本就没有真正的使用意义,所以表单标签的使用是比较重要的。
下面我们进行插入表单的操作。
1.调出【插入】面板,选择【表单】选项,如图9-3-2所示。
图9-3-2【插入】面板的【表单】选项
2.单击【表单】
按钮,或选择菜单【插入】|【表单】|【表单】命令。
3.此时,在【文档】窗口中出现一个表单标签,以红色虚线表示,如图9-3-3所示。
图9-3-3插入表单
当一个表单创建完毕后,需要对其进行详细的设置,方能够发挥其本身的作用。
当需要对表单标签进行设置时,用鼠标将其选中,调出【属性】面板如图9-3-4所示。
在【属性】面板中可以对表单进行详细的设置。
图9-3-4【属性】面板
●【表单名称】:
在该文本框中输入一个唯一的名称字样。
●【动作】:
在该文本框中可以指定处理该表单的动态页或脚本的路径。
可以在文本框中输入完整路径,也可以单击【浏览文件】按钮在弹出的对话框中定位包含脚本或应用程序页的相应文件夹。
在该文本框中还可以输入一个URL或mailto(电子邮件地址)。
在使用mailto地址时,可以将表单中的内容发送到相应的邮箱中。
但是,有些浏览器被设置为:
当选择mailto的表单按钮时,进行提示。
虽然许多用户会让邮件功能执行,但是,也确实有人设置为阻止邮件发送。
●【目标】:
在该下拉列表中可以选择到不同的选项,从而定义新页面打开的位置:
“_blank”:
在未命名的新窗口中打开目标文档;
“_parent”:
在显示当前文档的窗口的父窗口打开目标文档;
“_self”:
在提交表单所使用的窗口中打开目标文档;
“_top”:
在当前窗口的窗体内打开目标文档。
●【方法】:
在该下拉列表中可以选择表单数据传输到服务器的方法。
“GET”:
当选择该选项时,将值附加到请求该页的URL中;
“POST”:
当选择该选项时,将在HTTP请求中嵌入表单数据。
●【MIME类型】:
在该下拉列表中可以制定对提交给服务器进行处理的数据使用MIME编码类型。
application/x-www-form-urlencode选项通常与“POST”共同使用。
如果要创建文件上传域,则选择multipart/form-data选项类型。
在该下拉列表中可以定义在该表单中的元素CSS样式。
9.3.2使用文本字段
当表单中需要填入文本信息时,就需要使用到文本字段。
在该表单区域中不能输入太多文字。
当要制作填写“姓名”、“邮件地址”、“家庭地址”和“密码”等类似信息时,可以使用文本字段。
1.在已经插入表单的情况下,单击【文本字段】
按钮,不设置弹出的对话框,直接单击【确定】按钮。
2.此时,在红色虚线区域内出现文本字段,如图9-3-5所示。
图9-3-5插入文本字段
3.按下键盘上的F12键,在浏览器中浏览该文本字段。
当要对创建的文本字段进行属性调整时,可以用鼠标选中该文本字段,按【Ctrl+F3】调出【属性】面板,如图9-3-6所示。
图9-3-6【属性】面板
●【文本域】:
在该文本框中输入唯一的名称字样。
●【字符宽度】:
在该文本框中可以设置域中最多可显示的字符数。
此数字可以小于【最多字符数】,【最多字符数】指定在域中最多可输入的字符数。
例如,如果在【字符宽度】文本框中输入为“20”(默认值),而浏览者输入了100个字符,则在该文本域中只能看到其中的20个字符。
虽然无法在该域中看到多出来的字符,但域对象可以记录这些字符,而且会被发送到服务器中进行相应处理。
●【最多字符数】:
在该文本框中可以设置文本字段中最多可输入的字符数。
例如使用【最多字符数】文本框可以设置“邮政编码”限制为6位数,将“密码”限制为16个字符等。
如果将【最多字符数】文本框保留为空白,则浏览者可以输入任意数量的字符。
如果文本超过域的【字符宽度】的设置时,文本将滚动显示。
如果浏览者输入的字符超过【最大字符数】时,计算机会发出“警告”音。
●【类型】:
在该选项区域中,可以选择三种不同的选项,从而定义“文本框”的类型,三个选项分别为:
“单行”:
当选中该选项时,文本域中只能输入一行文字,不支持换行;
“多行”:
当选中该选项时,文本域中可以输入多行文字内容,支持换行;
“密码”:
当选中该选项时,文本域中输入的文字作为“密码”处理,所有的文字以星号(*)显示,并无法进行复制和粘贴操作。
因为采用的浏览器不同,可能显示密码的符号也有所不同。
●【初始值】:
在该文本框中可以指定在下载该表单时文本域中即刻显示的内容。
例如输入年份时可以先输入“2006”字样,方便浏览者修改。
在该下拉列表中可以定义该文本字段的CSS样式。
9.3.3使用文本区域
当表单中需要填入大量的文本信息时,就需要使用到文本区域。
在该区域中可以输入较多文字。
当填写的文字过多时,可以通过调整滚动条调整显示文字的位置。
当要制作填写“流言”等信息时,可以使用文本区域。
1.创建表单标签以后,在【插入】面板的【表单】选项中单击【文本区域】
按钮,在弹出的对话框中不设置任何参数,按【确定】按钮创建文本区域。
2.此时,在红色虚线区域内出现文本区域,如图9-3-7所示。
图9-3-7插入文本区域
3.按下键盘上的【F12】键,在浏览器中浏览该文本区域。
当要对创建的文本区域进行属性调整时,可以用鼠标选中该文本区域,按【Ctrl+F3】调出【属性】面板,如图9-3-8所示。
图9-3-8【属性】面板
可以发现,这就是文本字段的【类型】选择“多行”时的界面,换句话说,当文本字段的【类型】设为“多行”时,文本字段则转换为文本区域,同理,当文本区域的【类型】设为“单行”时,文本区域将转换为文本字段。
所以这里就只介绍在文本字段属性中没有出现属性设置。
在该文本框中输入数值可以定义该文本区域同时显示的行数,当浏览者输入的行数多与该选项设置的值时会自动显示滚动条。
●【换行】:
在该选项区域中,可以选择三种不同的选项,从而定义文本区域的换行模式,三个选项分别为“关”、“虚拟”和“实体”,读者可以更换选项来查看文本区域显示效果的差异。
9.3.4使用按钮
按钮是表单对象中一个非常常用的表单对象,通过对按钮的使用,可以实现表单的提交和重设,相应的功能文字会自动放置到按钮的上面。
1.创建表单标签以后,在【插入】面板的【表单】选项中单击【按钮】
按钮,在弹出的对话框中不设置任何参数,按【确定】按钮创建按钮。
2.此时,在红色虚线区域内出现“提交”按钮,如图9-3-7所示。
图9-3-9插入“提交”按钮
3.按下键盘上的F12键,在浏览器中浏览该按钮的效果。
按钮的【属性】面板如图9-3-10所示,可以在【属性】面板中对按钮进行属性调整。
图9-3-10【属性】面板
●【按钮名称】:
在该文本框中定义该按钮的名称。
●【值】:
在该文本框中输入的文字,将显示在按钮的上面。
在该选项区域中可以选择“提交表单”、“重设表单”和“无”选项。
当选中“提交表单”选项时,单击该按钮,可以将同一个表单标签中的数据提交到相应的