1、如何精确的定位网页中各个元素的位置
精确定位网页中各个元素的位置有两种方法:使用表格或层。
使用表格是目前比较通用的做法,具体方法是:先在网页中建立一个表格,注意表格的边框宽度应为0。然后再把各个元素按照你的要求放在各个表格单元之中。仔细调整表格单元的大小以及表格边框的位置,这时在表格单元中的元素也会随之移动位置。这样你就可以比较精确的定位网页中各个元素的位置了。使用表格的优点是通用,几乎各个版本的浏览器可以致支持表格。它的缺点是使用起来比较麻烦,需要仔细进行调整,而且定位不十分精确。
层在网页中可以随意放置,因此我们可以使用层来进行精确定位。使用方法是,在网页中插入一个层,然后把你想要定位的元素放在层里,接着我们就可以把层放到所想要任何位置了。此外,你还可以借助标尺和网格进行精确的定位。 因为层只在最新的浏览器中被支持,所以为了兼容旧的浏览器,我们可以把层转变为表格。方法是:选择“修改(Modify)->版面布局模式(Layout Mode)->把层转化成表格(convert layers to table)”即可。注意这时的层不能有重叠,我们可以在插入层之前选择“查看(view)->防止层交错(prevent layer overlaps)”来避免层的重叠。一般来说转换后的页面可能会有一些变化,还需要我们手工进行调整。
最后有一点要注意,在进行表格和层的相互转换时,最好不要在一个页面中同时使用层与表格,那样可能会把你的页面弄的一团糟。
2、如何制作一个类似于下拉菜单的效果
制作一个类似于下拉菜单的效果需要用到层的隐藏和显示特性。具体的方法是:
在页面中插入一个单行多列的表格,作为你的菜单条。表格的列数由菜单选项的多少决定。插入一个层,在层中输入第一个下拉菜单的内容,并把这个层移动到表格第一列的下面。
同理,对其它的菜单项也作如上的操作,插入相应的层。把所有层的显示属性(vis)改为隐藏(Hidden)。选择表格的第一个单元,单击窗口(Windows)->行为(Behaviors),弹出行为面板。按下“+”添加行为Show-Hide layers,并将第一个层(Layer1)属性改为显示(Show),其它层的属性改为隐藏(Hide)。接着在行为面板中编辑这个行为,将它的触发事件(events)改为onMouseover。这样,当鼠标移动到第一个表格单元之上时,第一个下拉菜单就会显示出来。接着再添加一个行为Show-Hide layers,并将所有层的属性改为隐藏。接着在行为面板中编辑这个行为,将它的触发事件(events)改为onMouseout。这样当鼠标从第一个表格单元之上移开时,第一个下拉菜单就会隐藏起来。
对其它的菜单项重复e、f操作。但要注意设置“菜单二”时,第二层显示,其它层隐藏;设置“菜单三”时,第三层显示,其它层隐藏;依此类推下去。
3、用TracingImage帮助定位网页中各元素的位置
TracingImage是Dreamweaver2新增的一个非常有效的功能,它允许用 户在网页中将原来的图案设计搞作为辅助的背景。这么一来,拥护就可以 非常方便地定位文字、图象、表格、层等网页元素在该页面中的位置了。TracingImage的具体使用是这样的:首先使用各种绘图软件作出一个想象中网页排版格局图,然后将此图保存为网络图象格式(包括gif,jpg,jpeg和png)。用Dreamweaver打开你所编辑的网页,在页面的空白区单击右键,选择“Page Properties...”,然后在弹出的对话框中的Tracing Image项中输入刚才创建的网页排版格局图所在位置。再在Image Transparen中设定TracingImage的透明度,OK。这样你就可以在当前网页中方便地定位各个网页元素的位置了。使用了TracingImage的网页在用Dreamweaver编辑时不会再显示背景图案,但当使用浏览器浏览时正好相反TracingImage不见了,所见的就是经过编辑的网页(当然能够 显示背景图案)。
4、关于“Convert Table widths to Pixels”和“Convert Table widths to Percent”
“Convert Table widths to Pixels”和“Convert Table widths to Percent”是Dreamweaver2新增的两个设置表格宽度的重要功能。当你打开一个带有表格的网页时,在状态栏中点中〈table〉标签,在随后显示出的表格属性 工具面板中就能看到这两个按钮了。顾名思义“Convert Table widths to Pixels”就是将表格中所有单元的宽度以象素表示,而“Convert Table widths to Percent”是将表格中所有单元的宽度以百分比表示。仔细想想他们的 作用,如果将一个表格的宽度全以象素表示,但浏览窗口被放大时,表格 就不会随之放大单元格的宽度。而使用了“Convert Table widths to Percent”后能够使你在640*480分辨率下建立100%宽的表格在更高的分辨率下依旧保 持100%的宽度。所以活用这两个功能可以是网页排版事半功倍。