当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > 你的网页“面目全非”过吗?

Dreamweaver
Dreamweaver CS3网页制作之CSS布局规则
Dreamweaver CS3网页制作之布局实例
Dreamweaver生成新页面css的类失效
Dreamweaver CS4 JavaScript的部分新特性
Dreamweaver CS4安装试用以及截图
Dreamweaver CS4新增相关功能介绍
Dreamweaver制作网页时使用CSS的事项
Dreamweaver关于字符与编码的错误
Dreamweaver表格宽度辅助线怎么除掉?
Dreamwaver设计div层的对齐方式
DW教程之CSS网页制作实例:固定宽度布局
DreamWeaver正在走向死胡同
Dreamweaver CS3中的CSS布局规则
Dreamweaver套用源格式命令应用技巧
Dreamweaver使用过程中的常见问题
Dreamweaver教程:如何取消Dreamweaver表格宽度辅助线
Dreamweaver CS3网页制作中的CSS布局规则
制作网页中设计段落缩进的方法
DW的源代码视图按空格代码提示功能消失
dreamweaver出现翻译器没有被装载错误

Dreamweaver 中的 你的网页“面目全非”过吗?


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 28 ::
收藏到网摘: n/a

    如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得“面目全非”,那多令人沮丧!下面我们以网页爱好者的常用工具(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所帮助。

  一、消除任意缩放浏览器窗口对网页的影响

  一番辛苦做出来的网页,在全屏状态下浏览一切正常。但在改变浏览窗口大小之后,网页就变得"不堪入目"了,这是个很值得注意的问题。

  问题的根源还得从网页的布局说起,在DW中,网页内容的定位一般是通过表格来实现的,解决表格的问题也就成功了大半。

  大家应该注意到,在DW中表格属性面板的高宽设定选择上提供了两种不同类型:百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比,如在一个表格单元的宽度是600,在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,依此类推,如果在一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的。浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。

  自然,解决这个问题的办法就是将表格宽度设置成固定宽度(也就是像素值)。另外如果外层表格已做好固定宽度设置,内层表格也可以适当使用百分比设置。清楚这个原则以后,如果出现类似的问题大家也知道怎么解决。

  二、让网页居中

  说到了窗口大小就会顺着路子想到分辨率的问题,在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧?做起来费时,看起来也费劲。怎么办呢?

  现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主,要想让网页在1024*768时居中,只要在网页原代码的<body>后紧加一句<center>,</body>前加一句</center>就OK了。不过有几个问题这是要注意一下,第一个就是上面说到的百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。例如width=770。如果你的表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。在<body>中加入leftmargin=0,即<body leftmargin=0>这种情况下,800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。

  <html>
  <head></head>
  <body topmargin=0 leftmargin=0>
  <center>
    <table cellspacing cellpadding width=760><tr><td></td></tr></table>
  </center>
  </body>
  </html>