开启左侧

Dreamweaver4教程全接触

[复制链接]
 楼主| 发表于 2012-2-5 01:49:52 | 显示全部楼层
图片与超链接


图片在网页中的作用是无可替代的,一幅好的合适的图片,胜过十篇洋洋洒洒的介绍!超链接是网站中各个元素的联系方式,正是它完成了各个页面的跳转,使整个网站作为一个有机的整体出现在访问者面前。

一.图片:

Insert/Image 命令可以完成图片的插入。如果该图片不在网站目录中,将弹出对话框询问是否把该图片复制到网站目录下,这时请回答 Yes ,否则上传到网上后会因文件地址不正确显示不出图片。

在网页制作中,图片常常与文字互相配合,图文并茂的网页,给访问者带来的感觉是素面朝天的网页所不具备的。图片与文字的互相配合,可以通过 Align 属性来进行设置。如图一 :

09120920510a9565abc49c93ef.gif
图一图一中提供了多种与文字的对应关系:

Baseline:文本与图片底线对齐。
Top:第一行文本与图片顶部对齐。
Middle:文本与图片中部对齐。
Left:图片处于文本左边。
Right:图片处于文本右边。
其中,Left 与 Right 就是我们常常谈到的文绕图方式。

提示:图片的 Align 与区域位置属性 091210183828f7b85fbe3a5b97.gif 有什么区别?区别在于,前者处理的是图片与文本的位置对应关系,后者处理整个区域,包括图片,文本以及区域中所有元素相对于整个网 页的位置关系。

示例:

采用默认的图片与文本位置属性的网页,如 图二:

091209205197e13d52abed8abd.gif
图二图片居左时的网页, 如图三:

0912092051aff93cc5710e0492.gif
图三图片除了作为文本的阐述与说明功能外,还具有链接与热区映射等作用,这就得讲一下超链接的原理与应用了。

二.超链接:

在网页上,点击一些文字,图片,或其他元素就可以打开相应的页面,而这些元素就是超链接。

1.超链接的建立:

建立超链接非常简单,只需选中欲做链接的元素(任何对象,文本与图片都包含其内),然后在属性面板的 Link 中输入要跳转到的目标页面就行了。输入框旁边有个文件夹图标,也可以通过点击它找到目标页面 。如图四:

09120920514c21191912177f94.gif
图四提示:链接文件如果是网页文件,浏览器就会打开该网页并进行显示;如果是浏览器本身不能显示的文件,则会弹出提示框让你决定是否进行下载。现在知道如何制作下载文件了吧?只需把提供下载的文件压缩成文件包(如 zip 压缩包),然后放到网上就行了。访问者如需下载,只需点击该压缩包的网址就可以下载了。
还有一点大家得注意,那就是打开方式的设 置,如图五:

0912092051617595e7fe3fda6c.gif
图五_blank:表示另外打开一个窗口,用新窗口显示该链接网页。
_self:在本窗口中打开链接页面。
_parent:在父窗口中打开链接页面,主要用于框架结构的页面。
_top:整个浏览器窗口,主要用于框架结构的页面。

2.图片的热区映射图:
图片链接中,还有这样一种情况:图片比较大,分为几个区,点击不同的区可以打开不同的 网页。如图六:

09120920519c02843b66f97031.gif
图六图六中的图形共有四个版块构成,点击不同的版块,可以打开不同的页面。详细情况请见 Resource.zip 文件包中的 9.htm 文件。

图片的热区映射制作也很简单,先点选图片,然后如图七中勾出的图标就是用来创建热区映射的,它们分别是规则四边形,圆形 ,不规则多边形。

091209205133495e3fc21b858c.gif
图七根据图像轮廓的不同,用不同的形状制作热区映射。规则四边形主要针对图像轮廓较规则,且呈方形的对象;圆形针对圆形规则轮廓;不规则多边形则针对复杂的轮廓外形。

制作方法:点选一种形状制作工具,然后沿着对象边缘画出一条轮廓线,然后再在属性面板的 Link 中输入映射的地址就行了。记着,勾画出的轮廓线要闭合,也就是说起点与终点要在同一个点上。

另外,属性面板上还有一个 Alt 输入框,它是用来为图像进行说明的,当鼠标移动到图片上时,Alt 中的文字内容就会显示在图片上面。它还有一个用途,当一些用户屏蔽了图片功能,以纯文本形式进行网页浏览时,有 Alt 标记的图片虽然不能显示,但会在该图片区域显示出图片的介绍信息。

提示:图像的属性面板上有一个 Edit 标志,点击它后可以打开 Fireworks 这个图像处理软件对图像进行编辑,包括热区映射图的制作。

3.网页文件的内部链接:

想在文件内随心所欲地跳跃吗?想让访问者只需点按一行文字或一张图片就能连接到另一部分或是另外一个文件的某一特定部分吗?网页内部链接将帮你解决所有这些问题。其例子请看 Resource.zip 压缩包中的 10.htm 文件。

这里是一个 简单示例,如图八:

09120920516c992dbc17f77342.gif
图八本页面名为"星光灿烂",当然是歌星的作品列表了,网页上分别罗列了赵传,小甜甜,陈百强等等的名字以及他们的部分作品,你只需点击相应的名字,页面就会跳转到同页面中的相应区域;网页最下面是"回到顶部"字样,点击它可以回到页面的顶部。

要建立文件内部链接,必须经过两个步骤:

<1>.在被连接的部分前面加上一个位置标识(又称为锚点),以便被指定连接。

在 Dreamweaver 中,此功能可以用菜单命令 Insert/Invisible Tags/Named Arch or 完成。如图九:

0912092051cf5cde08ef7afcf5.gif
图九然后会弹出一个窗口,让我们输入锚点名称,这里随便输入一个名字就行了,注意不要使用中文,当然,你自己还得记住这个名字,因为后面我们还要就这个 名字进行链接。如图十:
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:49:53 | 显示全部楼层
09120920514925c07992c59d1f.gif
图十这时,就完成了锚点的设置。

<2>.链接的指定:

现在我们找到要激发触发事件的元素,如图片,文字等(什么触发事件元素?就是点按它就能跳跃到锚点位置的元素),然后在其属性面板的 Link 栏中输入: #Name 。请注意,这个 Name 就是刚才我们为那个锚点起的名字,另外,"#"号与 Name 之 间没有空格哟。如图十一:

09120920515a8f51b6c1ea85b1.gif
图十一提示:如果要从一个文件内跳转到另一个网页文件的某处,可以先在另一个文件中设置锚点,再在第一个文件中设定链接地址,不过这个地址请注意,它是由"路径 + 另一个文件名 + #Name "组成的。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:49:58 | 显示全部楼层
表格


恭喜你,经过前面的学习,你已经掌握了基本的网页制作知识,可以独立制作一些较简单的网页了。但光是那些知识还是远远不够的,下面我们将谈到网页定位技术的问题,让你在进行网页编辑时取得更为精准的控制权。

网页的定位,就是指把网页元素诸如文本、图片等等按需要放在合适的位置,Dreamweaver 提供了诸如表格、框架、图层,以及 4.0 版本所独有的版面(Layou) 规划等网页定位技术,掌握它们,才能真正学到网页制作技术的精髓!

一.表格概述:

表格的应用,最简单的理解的是作为数据的列表进行显示。如图一 :

0912092051d57a25a30d09e32b.gif
图一在实际制作过程中,表格更多地用在网页定位上,只需通过设定表格宽度,高度,彼此之间的比例大小,等等,就可以把不同的网页要素分别"框"在不同的单元格之中以达到页面的平衡。

表格在网页定位上,除了精准控制的特点外,还具有规范、灵活的特点,正是因为这些原因,表格在网页制作过程中扮演着重要的角色。事实上,国内的许多大型网站的页面,都应用到了表格定位技术。

二.表格的创建:

Insert/Table ,然后弹出一个窗口,如图 二:

091209205186da46fbb3a5cedd.gif
图二Rows:行数
Columns:列数
Width:宽度,可以是相对比例(百分数),也可以是绝对尺寸。
Border:边线是否可见,0 代表无边线;1 代表有边线。
Cell Padding:单元格中内容与单元格边线之间的距离。
Cell Spacing:单元格与单元格之间的距离。

提示:创建表格时,如果开始不能确定它的属性,可以使用默认值,然后再通过属性面板进行修改;另外,关于 Width 的设定,一般来说,大表格往往采用绝对尺寸,表格中所套的表格采用相对尺寸,这样定位出来的网页才不会随着显示器分辩率的差异而引起混乱。

表格的基本属性设置好后,点按 OK ,这时编辑窗口会出现一个空白表格,如果属性面板打开的话,其属性面板变成如图三的 样式:

0912092051a2e97273788527b6.gif
图三除了上面已经介绍的参数外,属性面板还提供了其他的参数:

Align:表格的对齐方式,分别是居左,居中,居右。
Bgcolor:表格的背景颜色。
Brdr Color:边线颜 色,只有当 Border 参数为 1 即边线显现时本参数才有意义。
BgImage:表格的背景图片。
09121019432575ffb193dffb61.gif :清除行高与列宽。
091210194126a3c8a79534adf0.gif :根据表 格的当前值,分别将表格比例改为绝对尺寸或者相对比例尺寸。

提示:表格的背景颜色,既可以是整个表格,也可以是某个单元格,(也就是说大表格用一种颜色,某个或某些单元格用另外的颜色。)因此它的灵活设置往往可以创建出别具一格的网页配色;清除行高与列宽的主要作用是创建规则的表格,制作好表格后,在向单元格输入数据时,Dreamweaver 往往会改变表格单元格尺寸大小,让你本来定置好的表格变得面目全非,这时就可以用清除行高与列宽命令,将表格缩到最小,然后再通过属性面板上的 Width ,重新设置表格的宽度,这时一个规则,均匀的表格就出现了。

上面我们谈到的是表格的属性,当取消选择,随便用鼠标点一下任意单元格时,属性面板又会变成另外一种式样,让我们可以对该单元格进行设 置,如图四:

09120920514995add0be594208.gif
图四图四的上半部分,可以对表格中字体,链接等进行设置,是属性面板的默认参数,具体解释可见前面的章节;下半部分则是对单元格进行参数设置,它们分别是:

Horz:水平位置。
Vert:垂直位置。
W:单元格宽度,可以是百分数(如两个单元格组成一个表格,一个单元格可以设值为 30% ,另一个则设值为 70% ),也可以是绝对尺寸。
H:单元格高度。
No Wrap:强制不断行,所有内容在一行显示。值得提醒的是,此参数往往撑大整个表格,建议不要选。
上面的Bg:单元格背景图片。
下面的Bg:单元格颜色。
合并/拆分表格: 09121019416fd9b098aa0c48fd.gif 合并表格,可以把一行或者一列单元格合并成一个,也可以把同行或同列中某几个单元表格合并起来;拆分表格,可以将一 个单元格拆分成几个按行或按列排列的单元格。

提示:合并与拆分表格命令非常有用,它往往是创建复杂表格的最重要的步骤。

三.表格实例:

09120920516bd49619bb06ac94.gif
图五这个表格是如何制作的呢?(详情请见 Resource.zip 中的 11.htm )下面就是它的制作过程:
1.Insert/Table命令,首先建立一个四行三 列的表格。如图六:

0912092119046cc98f23061603.gif
图六2.选中第一行后两个单元格(用鼠标点一下第二个表格,然后鼠标按住不放,拖到第三个表格),这时你会发现,后两个表格以高 亮进行显示。如图七:

091209211969063362ea067e6d.gif
图七3.点按合并单 元格图标,结果如图八:
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:50:00 | 显示全部楼层
09120921198c5f42a87b86c94b.gif
图八4.选中第一列上面两个表格,点按合并 单元格图标,结果如图九:

091209211927c2164bc48f16c4.gif
图九5.最后再输入文字。
提示:表格的制作方法有很多种,上面我们给出的仅仅是一种做法,你也可以先定制一个三行三列,甚至一行一列的表格,然后通过合并与拆分来完成后面的工作。

四.表格的网页定位:

表格的网页定位,主要是通过将网页内容分成若干个区,然后将相应的内容分别填入不同的表格,从而做成非常规范与专业的网页。上面我们明白了表格的制作方法,下面我们通过一个实例来讲解表格的网页定位技术。

大家对"互动学校"这个页面比较感兴趣吧?它看起来有点复杂,不过当你静下心来仔细想一下,你就会明白,它其实是由若干个表格做成的。如图十:(详细情况请见 Resource.zip 文件 中的"互动学样.htm")

09120921199f31d17c96eb6487.gif
图十1.抬头:

由两个大的表格组成:

上面大表格是图片区,下面是导航区。图片区分为一行两列,左边是赛迪网的 LOGO ,右边是其他图片信息区。图片信息区中插入了一个两行两列的表格,上面一行,将两个单元格合并成一个,然后放上"赛迪信息","赛迪商务","赛迪资询",以及一个防止变形的白色图片;下面一行,左边是互动学校的动画图标,右边单元格中再插入一个三行一列的表格,并加上带链接的"赛迪寻呼","赛迪社区","信息助理"。

下面的表格分为一行两列,前面空格中输入带链接的" 资讯中心 | 技术天地 | 软件特供 | IT财经 | 市场专家 | 互动学校 | DIY专区 | 媒体全文 | IT罗盘 | IT人才 "信息,后面是一个显示时间的 Javascript 脚本。

2.正文区:

正文区是一个一行三列的大表格构建而成,每一列中或插入单独的表格,或进行拆分,形成多个区域并输入相应的信息,最后组成了网页的主要内容。由于原理上面已经讲清楚,这里就不再赘述,大家可以自己试着体会一下。

五.总结:

前面我们说表格是一种最基本的网页定位技术,其重要不言而喻。但表格也并不是没有缺点,它的最大问题在于表格内容的下载比较耗时,往往要一个表格中全部内容下载完成后才能显示该表格内容,因此,对于表格的嵌套使用,大家犹该注意,尽量不要嵌套过多的表格以影响页面的下载速度。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:50:05 | 显示全部楼层
框架



我们已经学过了表格的网页定位技术,现在来学习另外一种定位技术——框架(Frame)。

一.框架概述:

框架技术自从推出以来就成了大家争论不休的话题。一方面,它可以将浏览器显示空间分割成几个部分,每个部分可以独立显示不同的网页,同时对于整个网页设计的整体性的保持也是有利的;但它的缺陷又同样明显,对于不支持框架结构的浏览器,页面信息不能显示。不过,现在大部分朋友使用的都是微软探索者( Internet Explorer )浏览器 4.0 或更高版本,它们都支持框架结构,因此用框架制作的网页愈来愈多,最典型的例子,莫过于各个大型网站的论坛,如图一 :

0912101955945b769306c15eed.gif
图一二.建立框架:

Window/Frames 命令可以打开框架面板,本面板在整个框架创建中起着决定性的作用。如图 二:

0912101955cf90f2a11ba517de.gif
图二另外一个非常重要的面板是框架集成面板,本面板可以通过 Window/Objects/Frames 打开。如 图三:

0912101955242d2260a4fd567d.gif
图三框架集成面板用比较直观的样式显示了基本的框架构成,只需点选合适的图标就能建立相应的框架页面。如我们要建立左右两个窗口的框架,则需点击框架集成面板上用红色勾出的图标。 如图四:

0912101955612d66db5dc3d25b.gif
图四如果要获得复杂的框架结构(即框架的嵌套),则需配合框架面板的使用。其操作方法是:在框架面板上点选某一个框架,然后按住 ALT 键,再拖动编辑区域相应框架的边框就行了;或者在框架面板上选中某一个框架的前提下,点选框架集成面板上指定的框架类型 。如图五:

0912101955d69f6eb6a60c082e.gif
图五如果要删除大框架中的一个小框架,只需用鼠标拖动该小框架的边框到父框架的边框上就行了。

三.框架设定:

框架设定包括框架集(Frameset)与框架(Frame)的设定,框架是框架集中的一部分,所有的框架"集"成一个框架集。

1.框架集设定:

通过框架集成面板建立的,还没取消选择状态的,就是框架集。(框架集的选择,通过点击框架面板上最外面的边框取得;要选择某一个框架,只需点选框架面板上相应的地方就行了。)框架集的属性 面板如图六:

09121019559ab3dc810041f1aa.gif
图六Rows 与 Cols 是框架集的基本信息,代表着行与列的关系。
Borders :是否显示边框, No 不显示,Yes 则显示边框。
Border Width 与 Border Color :分别代表边框的宽度与边框的颜色。
Column:每个框架的尺寸。请注意图六面板中右边还有一个缩略图,它的作用正是通过选择它并在 Column 的 Value 中输入数值来确定该框架的比例大小的。

2.框架设定:

框架的设定面板跟框架集设定面板有很大的差异,大家可以从图七 中看到这一点:

091210195514326c9fdca58e1c.gif
图七Frame Name:框架名称,很重要的一个环节,如果你想让某个网页在选定的框架中打开(典型的例子就是,点击左边的链接,链接的网页然后在右边窗口打开,而不是在有点击动作的左边打开),就必须首先为欲作为打开窗口的框架起一个名字,然后在左边的链接后面指定 Target ,并选择刚才你为框架所取的名字。

Src:链接网页文件的位置。前面我们说到,框架的作用在于将多个网页页面分成几个部分独离显示,而这个"多个页面"的位置指定就由 Src 内容指定。同时,也说明一个问题,一个完整的框架页面,除了本身框架页面外,还包括框架中每个单独的页面。单独页面共同组成框架页面,框架页面只是为多个单独页面提供了一个共存的"架子"。因此,在进行框架页面保存时,如果其他单独页面尚未保存,则会弹出多个页面保存窗口,将每个框架中所用到的页面都保存下来后,这个框架页面才能真正保存下来,也才能真正正常显示。

提示:许多网友曾经问过,为何每个框架中的页面都单独保存了,当前"架子"页面也已经保存了,为何点击这个"架子"页面却不能显示任何页面信息。其实,刚才我们也谈到了,除了分页面,还有一个框架集页面需要保存。是不是有些糊涂了,好,教你一个最简单的办法,凡是遇上用框架制作的页面,要进行保存时,只需点按 File/Save All Frames 就行了,而不是仅仅保存一个页面就行了的哟。

Scroll:是否显示滚动条,Yes 表示显示滚动条,Auto 则是自动显示,也就是当该框架内的内容超过当前屏幕上下或左右边界时,滚动条才会显示,否则不显示。

No Resize:是否允许在浏览时改变框架大小。

Borders 与 Border Color:是否显示边框与边框颜色。

Margin Width:边界宽度,即框架中内容与左右边框的距离。

Margin Height:边界高度,即框架中内容与上下边框的距离。

四.框架示例:

同样以"互动学校"的页面为标准,我们来看一下如何用框架来制作。(具体情况请见 Resource.zip 文件中的互动学校.htm 文件)

1.先根据原版面,我们将页面内容划分为 四个区,如图八:


091210195505d8dce91d00e0f7.gif
图八2.相对于四个区,我们制作一个框架页面,分为上下 两个框架。如图九:

0912101955e1ac06c690840955.gif
图九3.在下面框架中,嵌套一个框架集,它由三个框架页面构成。(如何进行框架的嵌套?前面我们已经谈到,或者在按住 ALT 键的前提下用鼠标拖动边框,或者应用框架集成面板 上的形式)。如图十:

09121019551403225e2d76a9ff.gif
图十4.现在给每个框架设置参数。这里得非常小心,一个不慎就会导致最终页面的混乱。这里有几个问题得注意,所有框架都不要激活 Border 与 Scroll 选项(其实也可以添加 Scroll 卷栏条,但为了追求跟原网页一模一样,这里我们不用 Scroll 选项);每个框架的横宽比例要跟原文件相近;由于原文件中所有链接都是通过打开一个新窗口进行显示的,所以这里不需要给每个框架集命名,采用其默认名就行了,并且链接后面的 target 一律用 _blank 选项(以便弹出新窗口,详情见前面章节)。

提示:如果要使所有链接在下面框架的中间框架(即 3 区)中显示,可以先给中间框架命名,然后在所有链接后的 Target 中指定该名字为打开窗口。

5.一再强调框架页面是由多个网页共同"搭建"而成,现在我们开始制作四个分网页,它们分别对应原网页中的 1 ,2 ,3, 4 区。注意,仅仅是相应区域中的内容,不要把其他区的内容也加进去了哟。

6.最后,File/Save All Frames ,将框架文件全部保存在你指定的目录中。这样,一个用框架页面制作成的"互动学校"就成功了。

五.总结:

框架的最大优势在于整个网站的一致性与整体性,想一想,整个网站的网页,大部分区域都是固定的,所有更新内容都通过变动区域表现出来,这样,当访问者熟悉了一个页面的布局,那他(她)也就掌握了整个网站的布局方式,这对于信息查找,建立网站正规化概念,都是非常有利的。

前面我们也提到框架页面不会在不支持框架的浏览器中显示,这确实是它的一大缺陷,不过随着支持框架结构的 IE 在浏览器领域中的大肆扩张,这种缺陷变得不再那么尖锐,大多数情况下,它还是非常有用的。

解决浏览器不支持的缺陷,还有一种变通方法。打开 Dreamweaver 的源代码窗口( Window/Code Inspector ),你会发现 <Noframes>.......</Noframes> 标记,省略号可以用自己的话代替,如"对不起,你的浏览器不支持框架结构",或者"这个是框架页面,你的浏览器不支持,如果愿意,请点击此链接到我的另外一个页面(如果你还有不是用框架制作出来的页面的话)"等等话语,而这些话语将在不支持框架的浏览器中显示。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:50:10 | 显示全部楼层
图层


图层(Layer),有一定电脑美术设计知识的朋友最为清楚它的强大功能:不同的图层可以并存,不同图层上的内容在一定的设置下可以分别显现出来,从而达到非常玄妙的设计目的。网页制作中图层概念的引进,是网页制作技术的一大进步,它为网页设计者提供了强大的网页控制能力:一个网页可以有多个图层;各个图层可以重叠,可以设定是否可见,是否有子层,等等。在 Dreamweaver 中,图层既可以作为一种网页定位技术出现,也可以作为一种特效形式出现,可以说,灵活掌握了图层的概念,就不仅仅是"进阶"了,这里套用"进阶"只不过是为了教程的整体性。

一.创建图层:

Insert/Layer 命令可以创建一个图层,网页编辑区域会出现一个灰色矩形块,它就是插入的图层。将鼠标移到矩形边框时会变成十字箭头,这时再单击鼠标就能选中该图层。如图一 :

0912101958abf171172c32f3c6.gif
图一图层的属性面板(Window/Properties)如图 二:

09121019587bfaeaed271d2f6f.gif
图二Layer ID :图层的名称,不要用中文。

L 与 T :图层左边界/上边界距离浏览器窗口左边界/上边界的距离,它决定了图层在网页中的显示位置,应该加以重视。

W 与 H :图层的宽度与高度,输入数值可以精确控制其大小,如果不需很精确,也可以用鼠标拖动图层边框改变其大小。

Z-Index :图层顺序号。前面我们说过,图层的一大功能在于多个图层的重叠,为了确定哪个图层在最上面,哪个图层在下面,就得给图层添加一个顺序。默认情况为,数值大的图层在上面。如 图三:

091210195814ca3cd02f727a63.gif
图三提示:图层顺序可以不按 Z-Index 顺序进行显示,要改变其顺序,得通过图层面板( Window/Layer )来进行,操作方法很简单,只需在图层面板上点住要改变顺序的图层不放,然后将其拖上或拖下就行了。 如图四:

09121019581ee63ce378fc77f9.gif
图四但是,我们强烈建议,图层顺序最好遵循 Z-Index 规律,它对于网页文件的可读性是非常重要的。

提示:图层面板上有个 Prevent Overlaps (图四中勾选出来的参数),这个选项旨在避免图层重叠,常常用在将图层转换成表格的操作过程中,同时,对于精确的网页定位,也是很有帮助的。

BG Image与 BG Color:图层的背景图片与背景色。

VIS:共有三个重要的属性可供选择,Inherit (继承),本属性主要用于图层的嵌套,子图层可以继承父图层,当父图层发生位移,或者可见性发生改变等等情况时,子图层也跟着发生同样的变化; Visible (可见),将图层设为可见; Hidden (隐藏),将图层隐藏起来。


提示:图层 VIS 中的三个属性在制作网页特效时常常是非常重要的,最简单的例子就是,当鼠标移到某个对象上,则显示出另外的信息,这个"另外的信息"只不过是放在一个隐藏的层中,接到指定的触发事件(鼠标移到对象上)后,图层的隐藏属性变为可见(Visible)就显示出来了。

Tag:图层中 HTML 源代码中的标记形式,有 Span/DIV/Layer/ILayer 四种,建议采用默认设置的 DIV ,因为这种标记可以同时被两种主流浏览器即 IE 与 Netscape 所识别。

Overflow:图层内容超过图层大小时的显示方式,共有四种参数。
Visible:通过扩大图层大小将所有内容全部显示出来。
Hidden:超过图层大小的内容隐藏,也就是说图层中只显示一部分内容。
Scroll:不管内容是否超过图层的区域大小,图层右部与下部都会有卷栏条出现 。如图五:


0912101958b3ecdf2f9cb123c8.gif
图五Auto:如果内容超过图层的区域才会出现卷动条。

Clip:本参数比较特别,用来控制某个图层中哪个区域内的内容是可见的,超过这个区域的同图层内容则不可见。区域由L(Left)、T(Top)、R(Right)、B(Bottom)指定。

二.图层应用:

图层的应用非常广泛,从网页特效,到网页定位,都具有强大的功能。下面我们举一个非常简单的例子,如图六(具体情况请见 Resource.zip 文件包中的 12. htm ):

09121019582904f8275b30dc21.gif
图六它是一幅图像吗?非也,只不过是两个图层的简单运用,由于不是图片,所以它的显示速度远远超过图片的显示速度。制作步骤是:

1.建立一个图层,并在里面输入 SCHOOL 字样,字体为默认的 黑色。如图七:

0912101958dc9674fea0977643.gif
图七2.再建一个图层,用同样的字型,大小输入 SCHOOL 字样,字体颜色改 为红色。如图八:

091210195837d2043e13ea4fc5.gif
图八3.选中后面建立的图层,你会发现其左上角有个矩形框,点中它后将图层向右向下移动到合适位置,最后就做成了如图六的效果。

三.用图层制作"互动学校"首页:

前面我们已经学会用表格、框架制作"互动学校"首页,现在我们用图层来制作。

1.还是先进行网页分析:将原网页信息分 为四个区,如图九:

0912102026b2ffff1f3dc7be6e.gif
图九2.根据这四个区,我们来绘 制四个图层,如图十:

091210195836bcc9f5ec0640ae.gif
图十为了最大限度地与原网页相似,这里最好勾选图层面板上的 Prevent Overlaps 选项;同时,图层大小最好与原文件每个分区的大小一致。

3.在每个图层中输入相应的栏目内容就完成了首页的制作。

四.总结:

对于图层的讲解,我们是很浮浅与片面的,因为这方面的应用太多了,而且要深入地掌握它,更非一日之寒。

图层可以转换成表格,其命令是 Modify/Convert/Layers to Table ,但需要注意的是,创建图层时一定要勾选 Prevent Overlaps ,不然可能会因为图层的重叠而不能转换成表格。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:50:14 | 显示全部楼层
排版


网页排版,在网页制作中具有举足轻重的作用,前面我们谈到的表格、框架、图层定位与制作技术,严格说来,也是排版技术的分支。从前面我们也看到,要制作一个有效而复杂的版面,无论是用表格,还是用框架,甚至用图层,都需要进行繁琐的参数设置与定义,那么有没有一种比较简单方便的排版方式呢?

答案是肯定的。 Dreamweaver 4.0 较以往版本,多了一个 Layout 版面制作技术,使用这一技术,快速方便地完成一个复杂版面的设计,不再是个梦想!

Layout 将普通的排版操作,用"绘画"的形式进行诠释,需要什么样的版面?手绘一个就行了,你甚至不需要去碰属性面板一下!

一.Layout 基础:

Window/Objects,打开的常用对象面板的下部分有些不同,如图一 :

0912092119ee0fa5af8480ac23.gif
图一Layout 栏中:
Draw Layout Cell:绘制版面单元格。
Draw Layout Table:绘制版面表格。

提示:还记得表格制作中单元格与表格的关系吧? Layout 中单元格与表格的关系是一样的。

View 栏中:
Standard View:标准视图。
Layout View:排版视图。

提示:要使用 Layout 功能,首先得从标准视图模式切换到排版视图模式,否则 Layout 中的工具没法使用。

二.Layout 应用:

现在我们来排制一个如图二的复杂版面(详情请见 Resource.zip 文件中的 13.htm )。


091209211909cb1af5158280f6.gif
图二1.首先进行分析:图二由一个一行两列的大表格构成,1 区占了左列,右列由其他嵌套表格共同构成;嵌套表格中,2 区,3 区,4+5+6+7 区共同构建成最大的嵌套表格;4+5+6+7 又是一个四行一列的嵌套表格。


提示:这里我们说到的是表格,但排版跟表格还是不同的,其中一个最明显的地方就在于表格可以设置边界是否可见,而版面就没有这一功能了。记着,版面只是组织一个网页的构架,表格版面设计,利用的只是表格这个工具而已,版面本身不是表格!

2.切换到 Layout 视图,然后用版面表格绘制工具绘制一个大表格。如 图三:


0912092119bad24e5ffbd89eb6.gif
图三
提示:在每个版面表格的左上角都有一个绿色的"Layout Table"标签,在标准视图中它代表的是表格;表格的宽度在顶部标示出来;宽度数字右边有个向下的小箭头,按下后将弹出一个菜单, 如图四:


0912092119cbf3af61ced016c0.gif
图四Make Column AutoStretch:列自动伸缩,也就是表格可以按照屏幕比例来自动调整宽度,犹如将宽度定义为百分数。

Add Spacer image:增加透明图片。如果启用此功能,则会弹出一个窗口让你将透明图片保存到文件夹中,记着将它保存到相应的图片目录中哟。


提示:增加透明图片有什么意义呢?透明图片的主要作用在于撑住表格。撑住表格?也许你又要问为何要撑住表格了。有许多网页,采用左导航栏,右内容页面的版面,左边导航栏分成若干行,每行放相应的导航内容;点击左边的导航内容,详细的页面信息则在右边区域显示。整个版面显得干净易读,也许你认为一切都做好了。但当你在右边窗口输入一些内容,犹其是有大量内容时,你会痛苦地发现,版面乱完了!由于右边窗口内容的增多,左边本来排列得整整齐齐的导航栏由于右边窗口被撑高,造成左边的单元格行间距加大,这时我们就需要在导航栏的最下面再起一行,并在这行中添加一个透明图片,以便撑住上面的所有单元格。如果右边窗口被撑高,导航栏中被撑高的只是透明图片格,其他单元格仍然保持原来的高度。既然是透明的图片,即使被撑高了,在浏览器上我们也看不出来,这就是透明图片"撑住"的妙用。

Remove All Spacer Images:移去所有透明图片。

Clear cell Heights:清除单元格高度。

Make Cell Width Consistent:保持单元格宽度,也就是让单元格始终保持其设定的宽度,不随着浏览器的大小变化而自动伸缩。


提示:表格中灰色区域是空白区域,可以在其间添加其他表格;但不能输入文本,因为版面表格只能接受版面的"区"的概念,对于具体的网页内容却无能为力。要输入文本等具体内容,需在单元格中输入。

3.用版面单元格工具,在大表格中画出左边一个单元格 。如图五:


0912092119c3fd989402602fe2.gif
图五
提示:图中的白色区域是单元格区域,可以输入任意网页元素。
4.在右边用版面表格工具绘制一个表格, 结果如图六:


0912092119523b005e9a01758b.gif
图六5.用版面单元格工具绘制上下两个单 元格,如图七:

0912092119c73f8599eebf85ef.gif
图七6.在空白区域用版面表格工具绘制一 个表格,如图八:

0912092119c1f067ed3451115a.gif
图八7.在表格中绘制四个单元 格,完成后如图九:

0912092119f93a5155e6b04b53.gif
图九8.最后调整每个版块的大小(用鼠标拖动边框到适当位置),并输 入数据,最后如图十:

091209211974a6f6cd6ef08207.gif
图十三.用 Layout 进行"互动学校"版面设计:

1.照例是先分析,同样可以把"互动学校"版面 划分为四块。如图十一:
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:50:16 | 显示全部楼层
0912102035dfd4cd914086289b.gif
图十一2.按上面的操作分别画出相应的表格与单元格,最后进入标准视图模式(Standard View),可以看见所有的表格已经到位。

3.最后输入相应的内容就行了。

四.总结:

Layout 是 Dreamweaver 4.0 的最新功能,让网页设计者摆脱了繁琐的排版工作,所有的操作犹如在图形处理软件中进行一样,从而让网页设计者将更多的精力用在内容服务上,同时也极大地提高了工作效率。建议大家养成用 Layout 进行排版的习惯,以后你将会发现它让你往往事半功倍!
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:50:21 | 显示全部楼层
翻滚图


想让你的网页动起来?想让你的网页更具交互性?没问题,本章将专门就 Dreamweaver 的动态网页技术进行讲解。

谈到动态网页技术,就不得不谈一下 DHTML 动态网页技术标准。1998 年,W3C 组织公布了最新的 HTML 4.0 版本,新版本将原来的 HTML 语言扩展到一些全新的领域,如 CSS 、Script 、框架结构等,成为了真正的动态 HTML 语言(简称 DHTML )。其中,CSS 与 Script 脚本语言是新规范的核心。

正是由于动态网页标准的确立,Dreamweaver 的动态网页制作技术得到了支持,从而让我们创建丰富多采,灵活互动的"活"网页变为可能。

一.翻滚图基础:

动态网页技术中,翻滚图是比较简单的,但它的效果却非常明显,因此常常可以在各大网站见到这种效果。

所谓翻滚图,就是当鼠标移动一幅图像上时,该图像变成另外一幅图像,当鼠标离开图像时,图片又还原成原来的模样。如图一是天极网(http://www.yesky.com)首页上的图像 :

091209211985e90d76bd3d3456.gif
图一当鼠标移上图像时,原图变成图二的图 像:

0912092119612169dd2e42694a.gif
图二二.创建翻滚图:

Insert/Interactive Images/Rollover Images 命令可以创建翻滚图,其对话框如 图三:

09120921190208b06f11d72fa0.gif
图三Image Name:翻滚图名称,不要用中文。本参数主要用来作为 Javascript 的调用对象,一般采用默认名字就行了。

Original Image:原始图片,即一般情况下的图片,可以通过点按右边的文件夹标志在硬盘上找到该图片。

Rollover Image:翻滚图片,就是当鼠标移上原图时要用哪张图片代替原图。

Preload Rollover Images:预取翻滚图,建议勾选,因为它可以在页面打开时就先读取资料,而不是当鼠标事件发生时才读取,有利于保持动作的流畅性。

When Clicked , Go to URL:用鼠标点击翻滚图时跳转到哪个链接页面,可以是绝对地址,也可以是相对地址。

三.翻滚图实例:

<1>.一对一的简单翻滚图:

下面,我们要制做一个简单的翻滚图,当网页打开时,图片如图四;当鼠标移上图片时,原图翻滚,替换成图五。(最终结果见 Resource.zip 文件中的 14.htm ,所用图片在 Image 文件夹中,名字分别为 School-1.gif 与 School-2.g if )

0912092119f12358395a60f541.gif
图四

091209211949792e84ae0a9dd9.gif
图五1.在 Dreamweaver 的编辑窗口中,点按 Insert/Interactiv Image/Roolover Images ,然后在弹出的窗口中分别指定源图像(School-1.gif),翻滚图像(School-2.gif),最后点按 OK 。如图六:

09120921199346b04830afad6b.gif
图六2.保存页面,然后打开该页面,就可以看到效果了。(也可以按 F12 键进行预览。)

本例中,一幅图控制另外一幅图,因此我们称其为一对一的翻滚图。

<2>.一对多的复杂翻滚图:

Dreamweaver 还能创建一对多关系的复杂翻 滚图,如图七:

091209211980ef700f41483d26.gif
图七图七是一个完整的页面,当将鼠标移上右下边三个图标时,原先的图标会改变,同时在左边区域显示该图标所代表 的信息。如图八:

0912092124bdd064caffe5289f.gif
图八现在我们来看一下如何制作这种网页。(详细情况可以查看 15.htm 文件)

1.页面分析:

网页中共有 Banner ( Resource.zip 文件中的 School-logo.gif 文件),左边的大图(Computer.jpg),右边有三个图标(phone.jpg ; skill.jpg ; tea.jpg ),以及文字信息。

另外,我们知道,所谓翻滚图就是鼠标移上去后发生图片替换的事件,无论是一对一,还是一对多,都离不开这个原理。因此,要产生最后的效果,我们还得有几个替换图片。

Phone.jpg 对应的图片是 Phone-2.jpg
skill.jpg 对应的图片是 skill-2.jpg
tea.jpg 对应的图片是 tea-2.jpg
除了这些图片,我们还得制作一个白色图片(blank.gif),作为一般状态下三个图标左边的显示图片;当鼠标移上三个图标时,本白色图片由相应的图标信息图片替换。
Phone.jpg 对应的图片信息:hint-phone.gif
skill.jpg 对应的图片信息:hint-skill.gif
tea.jpg 对应的图片信息:hint-tea.gif


提示:为什么是白色图片?因为我们的网页底是是白色的,如果你要把网页底色改为黑色,那就得制作一个黑色图片,总之,该图片在一般状态时,访问者应该看不到才行。

好了,页面元素分析完毕,所用到的包括白色图片在内,一共有十二张图,大家都可以在 Resource.zip 压缩包的 Image 文件夹中找到。

2.页面规划:

根据刚才的分析,我们制作一个如图九的表格:(为了大家看得更清楚,我们将表格边界设为可见,同时边界颜色为红色,但在实际制作中它只起一种定位作用,所以不要也把边 界参数设为 1 )


091209212425e61c034d7ae9ce.gif
图九1 区我们放 School-logo.gif 图片,2 区放 Computer.jpg 图片,三区放文字,四区再做一个四列一行的表格,分别放 blank.gif 、phone.jpg 、skill.jpg 、tea.jpg 图片。


提示:这里我们使用表格,主要是为了让网页各元素被严格控制,避免因图片的替换产生网页元素混乱的问题。

3.设置行为:

前面我们讲的一对一的翻滚图,用到的是 Insert/Interactive Images/Rollover Images 插入命令,现在要实现一对多的翻滚效果,这个插入命令就无能为力了。这时我们得用行为(Behavior)来创建动态效果。至于什么是行为(Behavior),如何设置与应用 Behavior ,我们将在下一节中讲到,这里大家不需要掌握,只需一步一步跟着我们做就行了。


提示:Dreamweaver 中的动态技术,大多采用的都是 Javascript 脚本语言,这种语言常常要求指明动作主体即对象,所以,给要产生动作的图片或其他元素命名以便调用是非常必要的。一般情况下,这种命名会由电脑自动完成,如图片,分别命名为 Image 1 、Image 2,等等,在进行对象调用时,这些名字就是最重要的指示!

大家首先查看一下各个图片在编辑器属性面板中的名字,其中,白色图片名字为 blank ,phone.jpg 图片名字为 Image 1 ,skill.jpg 图片名字为 Image 2,tea.jpg 图片名字为 ima ge 3 ,如图十:


09120921241410fa0ca44a29da.gif
图十
提示:图片本身就已经有名字了(如 tea.jpg 的名字为 tea.jpg),为何还需要在编辑过程中另起名字?区别在于,tea.jpg 只是该图片文件本身的文件名,而不是动态语句中的对象名称,要在事件过程中调用对象,就得指明对象名,而不是该文件名!

好了,现在一切都准备齐备,我们最后来设置三个图标的行为。

选中 phone.jpg 图片,然后点按 Window/Behavior 命令,打 开行为窗口,如图十一:
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:50:23 | 显示全部楼层
0912092124033df27e3f4b22e0.gif
图十一点击左上角的"+"号,在弹出的菜单中选择 Swap Image ,如图十二:

0912092124f5760da46723766c.gif
图十二然 后弹出的设置窗口如图十三:

0912092124a2881f0abb7649c3.gif
图十三Images:图片列表框,其中罗列了所有网页中的图片,如 blank 、Image1 等等,对了,那两个 Unnamed <img> 指的是 School 与 Computer.jpg 图片,由于它们没有特殊效果,所以没有给它们起名。

要变换哪幅图,只需点选相应的图片就行了。


提示:在一对一的翻滚图中用到的插入命令,只能决定选中图本身的替换图,而不能决定其他图片的替换图;用行为命令却可以向其他图片发出命令进行替换。如鼠标移上 phone.jpg 图片,不但告诉该图片用 phone-2.jpg 图片进行替换,还用 hint-phone 替换 "blank" 图片。而这,也就形成了一对多的关系。

Set Source to:设置替换图片,可以通过点按右边的 "Browse"按钮在文件夹中找到替换图片,也可以直接输入图片的地址。

Preload Images:预取图片,其原理在前面我们已经讲过,建议勾选。

Restore Images onMouseOut:当鼠标移出图片时恢复为一般状态下的原图像,建议勾选。

我们知道了原理,就可以非常轻易地对 phone.jpg 进行设置了。先在 Images 中选择 image "Image1"(确定 Image1 图片将发生替换),在 Set Source to 中找到 phone-2.jpg ;现在不要按 OK ,我们马上进行信息显示图片的行为设置:在 Images 中选择 Image "blank"(确定 Image1 图片发生替换的同时,blank 图片也发生替换),在 Set Source to 中找到 hint-phone.gif 文件,最后点按 OK ,这样,我们就完成了第一个图标的一对多翻滚图设置。

以此类推,为其他两个图标进行相应的设置就成功了。

四.总结:

翻滚图确实是非常简单的一项动态技术,但它的最终效果却具有如此令人着迷的魅力,以致于从简单的一对一翻滚,到一对多的翻滚替换,在互联网上都得到了大量的应用,而这,也正是我们将它列为第一项动态网页技术进行讲解的最主要原因!
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

 
QQ在线咨询
售前咨询热线
0532-88371356
售后服务微信
pingduwangzhan
快速回复 返回顶部 返回列表