第9章 Dreamweaver基础演练.docx

上传人:b****6 文档编号:7913069 上传时间:2023-01-27 格式:DOCX 页数:34 大小:932.47KB
下载 相关 举报
第9章 Dreamweaver基础演练.docx_第1页
第1页 / 共34页
第9章 Dreamweaver基础演练.docx_第2页
第2页 / 共34页
第9章 Dreamweaver基础演练.docx_第3页
第3页 / 共34页
第9章 Dreamweaver基础演练.docx_第4页
第4页 / 共34页
第9章 Dreamweaver基础演练.docx_第5页
第5页 / 共34页
点击查看更多>>
下载资源
资源描述

第9章 Dreamweaver基础演练.docx

《第9章 Dreamweaver基础演练.docx》由会员分享,可在线阅读,更多相关《第9章 Dreamweaver基础演练.docx(34页珍藏版)》请在冰豆网上搜索。

第9章 Dreamweaver基础演练.docx

第9章Dreamweaver基础演练

第三部分Dreamweaver网页布局美化篇

虽然用Photoshop和ImageReady已经能成功地完成网页制作,但这样的网页并不是十分完美,在浏览器中会发现网页并未填满整个窗口,右侧露出大片空白,这样显得很不协调。

从这一点来看,有些功能还是需要使用其他网页编辑软件来完成。

ImageReadyCS制作出的HTML网页可以使用FrontPage、Dreamweaver等网页设计软件做进一步的编辑。

第9章Dreamweaver基础演练

本章介绍Dreamweaver8网页制作的基本操作。

这些都是使用Dreamweaver8进行网页制作的基础。

通过本章的学习,读者可以对Dreamweaver8有一个深刻的认识,同时,全面系统地了解网页制作的基本操作,为更好地学习后面章节打下坚实的基础。

9.1创建表格对象

表格的格式控制能力使设计师可以使用表格来构成网页的框架。

先使用较大的表格对页面的版面进行大致的控制,再使用嵌套的表格对细节进行调整。

表格在设计师的思维中已经不仅是一种简单对象,而是一种版面控制和制作模板的强有力工具。

9.1.1表格基础

表格由三个主要部件构成:

行、列和单元格。

行贯穿表格的左右,列则是上下方式的。

单元格是行和列交汇的部分,它是输入信息的地方。

单元格会自动扩展到输入的信息相适应的尺寸。

如果已经启动了表格边框,浏览器会显示表格边框和其中包含的所有单元格。

如图9-1-1所示是表格的结构。

图9-1-1表格的结构

在HTML中,表格中的所有结构和数据都被包含在表格标记符中,

之间。

标记符包含了大量的属性,决定表格宽度和高度,以及边框、页面对齐和背景颜色。

也可以控制单元格之间的间隔和在单元格中添加对象的多少。

如下所示为一段标准表格的HTML代码。

   
   
   

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标签可以是

四种标签,在这里传见的标签前两个是由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【属性】面板

●【按钮名称】:

在该文本框中定义该按钮的名称。

●【值】:

在该文本框中输入的文字,将显示在按钮的上面。

●【动作】:

在该选项区域中可以选择“提交表单”、“重设表单”和“无”选项。

当选中“提交表单”选项时,单击该按钮,可以将同一个表单标签中的数据提交到相应的

展开阅读全文
相关搜索

当前位置:首页 > 解决方案 > 工作计划

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1