平顶山网站建设公司,369互联,值得您信赖的伙伴!
在线咨询 点击这里给我发消息 点击这里给我发消息 点击这里给我发消息 点击这里给我发消息 点击这里给我发消息
您的位置:首页 > 网站建设

网页制作初学者较常见的网页布局问题以及解决

发布时间:2010-08-04
  

第一种办法:做一个网页处理标题(长了点) 

  假设只是由于阅读者改动了阅读器的设置,或者由于阅读器不兼容,使本人精心制造的网页变得"改头换面",那多令人懊丧!下面我们以网页兴味者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制造初学者较常见的网页规划标题以及处理办法,但愿对初学者们有所匡助。 

  一、消弭恣意缩放阅读器窗口对网页的影响 

  一番辛劳做出来的网页,在全屏状态下阅读一切正常。 

但在改动阅读窗口大小之后,网页就变得"不堪入目"了,这是个很值得留意的标题。 

  标题的本源还得从网页的规划说起,在DW中,网页内容的定位普通是经过表格来完成的,处理表格的标题也就胜利了大半。 

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

  自然,处理这个标题的方法就是将表格宽度设置成固定宽度(也就是像素值)。另外假设外层表格已做好固定宽度设置,内层表格也能够恰当运用百分比设置。明晰这个准绳以后,假设泛起相似的标题大家也晓得怎样处理。 

  二、让网页居中 

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

  如今大多数网民都还在用800*600的分辨率,所以我们普通能够以此分辨率为主,要想让网页在1024*768时居中,只需在网页原代码的后紧加一句

前加一句就OK了。不外有几个标题这是要留意一下,第一个就是上面说到的百分比的标题,表格、单元格的宽度单位最好要运用像素单位,而不要用百分比。例如width=770。假设你的表格宽度设的是百分比,那么运用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。在中参加leftmargin=0,即<body leftmargin=0>这种状况下,800×600支持的表格宽度为780像素时不会泛起动弹条。还有一点要留意的是不能用DW中的层来定位。 

   
    
   <body topmargin=0 leftmargin=0> 
   

 
     <table cellspacing cellpadding width=760>    
   

 
    
   
  三、定义固定大小的文字 

  大家都晓得,在IE阅读器的功用设置中,有一个能够自在设置窗口内容字体大小的功用,这样由于不同访问者的设置习气不同,呈如今他们眼前的网页有时也会不不相同。好比你可能原本设计时用的是2号字体,结果由于用户对阅读器的额外设定,变的更大了,这时你的网页也可能变得"不堪入目"。固然不是你的错,但客户是上帝。 

  假设运用了网页中的CSS款式表技术,就不会泛起上述状况了。运用快捷键"Shift+F11"翻开款式表"CSS style"编纂器,在窗口中单击鼠标右键执行"New CSS style..."命令新建一个款式表,然后在给出的列表当选择"类型"选项,定义文字属性参数(普通文字的大小选择12px较为相宜)。完成后选择网页编纂窗中的文本,单击新的款式表称号,能够看到选中的文本发作了变化。预览时尝尝定义的文本字体尺寸还会不会随阅读器的选择字体大小而改动。 

  四、让网页顺应不同的阅读器 

  阅读器的格式如今是两分天下,一分是IE,另一分是NetScape,在海内Ie有绝对的据有率,在这种状况下我们设计的网页只需兼容它就行了,但NetScape在国外仍是有良多人运用,终究它是阅读器的元老。 

  固然没有方法做出让一切阅读器都兼容的网站,但只需留意以下几点,做出来的网页在各个阅读器都中能到达比拟好的显现效果: 

  不要混合运用层和表格排版,假设是父子关系,如层中表格,不在此准绳范围内。 

  内联式的 CSS 在 Netscape Navigator 中常常会泛起标题,运用链式或内嵌式。 

  有时需求在空层插入表格或者透明图片,以保证在 Netscape Navigator 里的效果。 

  关于只要几个像素宽度或高度的层,改用图片来完成。 

  防止运用 W3C 组织不引荐的排版属性,用 CSS 替代。 


  第二种办法:做两个合适不同分辨率的页面
 
  一个是800×600,一个是1024×768,在800×600的页面中参加一下代码就能够完成跳转了: 

  -------------------------------------------------- 

?? 处理分辨率标题在Dreamweaver中没有此项功用,我们只能手动参加一段Javascript代码。首先在change-ie.html或change-nc.html页面代码中的< head>和< /head>中参加以下代码:

?? < script language=JavaScript> 
?? < !-- 
?? function redirectPage(){ 
?? var url800x600=〃index-ie.html〃; //定义两个页面,此处假定index-ex.html和1024-ie.html同change-ie.html在统一个目录下 
?? var url1024x768=〃1024-ie.html〃; 
?? if ((screen.width==800) && (screen.height==600)) //在此处添加screen.width、screen.height的值能够检测更多的分辨率 
?? window.location.href= url800x600; 
?? else if ((screen.width==1024) && (screen.height==768)) 
?? window.location.href=url1024x768; 
?? else window.location.href=url800x600; 
?? } 
?? // --> 
?? < /script> 
?? 然后再在< body…>内参加onLoad=〃redirectPage()〃 
?? 最后,同样地,在< body>和< /body>之间参加以下代码来显现网页的工作信息: 
?? < script language=JavaScript> 
?? < !-- 
?? var w=screen.width 
?? var h=screen.height 
?? document.write(〃系统已检测到您的分辨率为:〃); 
?? document.write(〃< font size=3 color=red>〃); 
?? document.write(w+〃×〃+h); 
?? document.write(〃< /font>〃); 
?? document.write(〃正在进入页面转换,请稍候…〃); 
?? // --> 
?? < /script>

CONTACT
服务热线:400-999-1875
技术支持:0375-8888873 / 4913858
服务QQ:100929369 / 88254369
E-mail:100929369@qq.com
公司地址:河南省平顶山市建设路西段
中央花园13号楼6楼
平顶山网站建设,平顶山网站制作,369互联 联系方式。
专业为企事业单位提供网站建设、网站制作、网页设计、域名注册、虚拟空间租用等服务。copyright © 2009-2014 369互联 豫ICP备11002579号-1 直销大师