|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
层的随便定位的特征给网页计划者带来的很年夜的便利,但同时也带来了必定的贫苦。为何如许说呢?
人人都晓得,为了让网页可以主动地顺应用户设置的分辩率,在网页制造过程当中人们接纳了百分比的设置体例,从而页面的一切元素重新排版,包管本来的格局。但假如你在页面上利用了层,你会发明当扫瞄器巨细改动时,层的地位却没有改动,了局它和其他的元素之间的共同呈现了错位征象,页面变得乱七八糟了。而我们是不克不及够强迫用户利用特定的分辩率的,那末就只要想举措让层的地位也可以象表格一样依据扫瞄器巨细的改动而从头定位,这就必要公道地利用绝对定位和相对定位了。
相对定位(position:absolute):即层默许的定位体例,相对于扫瞄器左上角的边沿入手下手盘算定位数值。
绝对定位(position:relative):层的地位相对某个元素设置,该元素地位改动,则层的地位响应改动。
对照两种定位体例,不难发明,利用绝对定位的层才是真正完成计划者头脑的体例,从而完整把握层的排版。
那末,相对定位有无用呢?固然有效了,当你的网页全体利用层来排版,并且页面是利用默许的居左安排的,那末利用默许的相对定位体例能够便利的排版,进步计划的事情效力。
在Dreamweaver中,拔出的层固然都是利用的相对(absolute)定位体例,可是拔出的体例分歧,带来的效果是分歧的。后面我们已晓得,利用菜单拔出的层是没有定位的坐标的,只要当你利用鼠标拖动该层改动其地位后,才会写入座标值。而拖沓出来的层的初始地位坐标就是鼠标入手下手举措时的坐标。
请明白一个观点:由Dreanweaver付与坐标值的层是相对于扫瞄器边沿定位的层。不带坐标值的层则是相对某元素定位的层!
以是,最复杂的设置绝对定位层的的体例就是:选定拔出层的地位(比方某个单位格大概页面中某处)将光标停止在该地位,然后选择Insert-->Layer,便可在该地位创立一个流动巨细的层,这个层就是相对该地位定位的了。必要注重,接纳这类体例创立的层,你只可使用鼠标调剂它的巨细,相对不成以挪动它的地位!也就是说,在属性面板上,层的地位栏中(LeftTop)相对不成以无数值。
良多情形下,拔出的层的地位其实不必定正确,出格是Dreamweaver并不是真实的所见即所得的软件,网页的排版只要到扫瞄器中显现才能够真正看到排版的体现,以是下面所说的办法就显的过于复杂而简单出成绩了。这个时分,你必要给层一个定位的参照物,让它真正地做到绝对的定位。
复杂的参照物能够是一个父层,即先拔出一个绝对定位的空缺的层,在此层中拔出你真正必要的层,而这个层是能够随便拖沓改动地位的。但如许究竟在网页中多拔出了一个空缺的层,我想它必定不是专业的网页计划师所但愿的。上面我们先容利用CSS来完成真实的绝对定位的层。
我们必要先设置一个CSSClass,来界说定位的体例为绝对:
.ceng{position:relative;}
然后,付与你所必要的参照物(能够是table,tr,td...)一个CSS属性为这个类。如许扫瞄器就会以它的左上角为原点,创建新的坐标系。再在这个参照物的上级拔出层,则层相对于该参照物定位,假如你必要改动层的地位,你能够间接在层的属性面板上输出LeftTop的数值(不成以利用鼠标拖沓),牢记此数值的坐标原点是你所指定的参照物,而不是扫瞄器的边沿(在Dreamweaver中编纂时,该层看起来象是相对于页面边沿定位的,但在扫瞄器中,它是相对于你所指定的参照物的)。
良多伴侣利用层是为了比及静态的效果,比方利用工夫线让某个物体活动起来,增添网页的动感,那末绝对定位后的层还能够活动吗?回覆固然是一定的。因为界说工具的两个地位必要拖动该工具改动地位,以是利用复杂的层定位的办法是不可的,但假如你利用CSS来设置绝对定位的效果的话,那末就完整能够完成了。只是必要注重,界说活动的初始地位和停止地位时,你仍旧不成以利用鼠标拖沓,而只能自行输出Left和Top的数值。
原本层的利用并非很庞大的,但我却把它独自作为一个章节,缘故原由就是层的定位有必定难度,但愿伴侣们看过以上的先容后,在Dreamweaver中多实行几回,不然仍是简单呈现成绩的。
OK!关于层的利用就说这么多。
一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。 |
|