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

初学|解决|网页|问题

  第一种方法:做一个网页解决问题(长了点)

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

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

  一番辛苦做出来的网页,在全屏状态下浏览一切正常。

但在改变浏览窗口大小之后,网页就变得"不堪入目"了,这是个很值得注意的问题。

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

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

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

  二、让网页居中

  说到了窗口大小就会顺着路子想到分辨率的问题,在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>
  三、定义固定大小的文字

  大家都知道,在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>

时间: 2024-11-03 03:42:12

网页制作初学者较常见的网页布局问题以及解决方法的相关文章

Win7系统打开网页提示应用程序已被JAVA安全阻止的解决方法

具体方法如下: 1.完成JAVA版本更新,然后刷新有问题的网页页面,以排除JAVA版本问题引起JAVA安全阻止: 2.从开始菜单中打开控制面板,我们需要进入控制面板来修改相应的配置: 3.进入控制面板后,在控制面板中找到JAVA选项,如果找不到可将查看方式切换到大图标或图标即可; 4.在JAVA控制面板中打开安全选项,并找到例外站点列表; 5.打开JAVA控制面板中编辑例外站点列表,将我们需要在网页上运行JAVA脚本的站点添加到此列表中; 6.将需要运行JAVA脚本的站点添加至其中,并对弹出的安

Win7系统死机常见的两种原因及解决方法

  Win7系统死机常见的两种原因及解决方法           一.开机自检时死机与解决方案 当用户在开启系统时,开机自检时发生死机的话,当主板能通电自检时死机. 解决方案:可尝试重启系统,如果重启后依旧死机,那就很有可能是内存.主板等硬件的问题了. 此时需要对板卡.内存条.cpu等进行拔插,看看是否接触不良的问题.如果还是不行的话,只能使用"替换法"一件一件地进行排除,直到找出问题为止. 二.系统定时死机与解决方案 系统运行一段时间后,有规律地死机的话.很可能是由于电源管理的问题,

win7系统中常见的一些小问题和解决方法

在使用电脑中难免会遇到一些小问题,而小问题如果你知道解决方法的话,那么基本上几分钟就能解决了,而如果你不知道可以要想很久或者百度很久才能找到解决方法. 1 截图花屏 这个问题主要是由于显卡驱动程序和你的显卡不是很配的情况下才会发生,我们只需要重新换个显卡驱动基本上就没问题了. 2 盘符错乱 盘符错乱从Win95时代便经常发生,这一次Windows 7更严重了.如果你是从光盘安装的Windows 7,那系统就会把它所在分区设为C区,然后再根据管理来排列其他分区.要解决Windows 7的盘符错乱可

网页制作初学者来看:认识XHTML DHTML SHTML的区别

dhtml|xhtml|初学|区别|网页 我们经常会在一个技术性网站或BBS见到这三个东东:XHTML DHTML SHTML,它们到底是怎么回事呢?我们看下面的说明与讲解. XHTML: HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了XML(有几分)的强大功能及HTML(大多数)的简单特性. 2000年底,国际W

ASP.NET动态网页制作初学者备忘录

asp.net|初学|动态|网页 一位ASP.net初学者学习过程中整理的备忘录,包括"打开新的窗口并传送参数,为按钮添加对话框,删除表格选定记录,删除表格记录警告"等等常见问题的解决方法. 1. 打开新的窗口并传送参数: 传送参数: response.write("<script>window.open('*.aspx?id="+this.DropDownList1.SelectIndex+"&id1="+...+"

网页制作全攻略,网页制作学习

攻略|网页 构思篇 着手做主页之前一定要对自己将来的主页有个完整的构思,切忌随心所欲,想到什么做什么.那样的话,要么做到一半就难以为继,半途而废,要么作出的主页也是杂乱无章. 首先,应为自己的主页确定一个主题,如关于电脑.音乐等,以防做成一个大杂烩,不仅加大了寻找素材的难度,而且也为将来网站的维护带来困难.其次,应该给自己的主页确定几个栏目,并依据这 些栏目,设计出整个网站的主体框架,这个框架应保证访客浏览主页时,随时能到他想去的任何一个栏目.再次,要注意背景与正文颜色的对比度以提高页面的可读性

网页制作-什么样主题的静态网页才能吸引人

问题描述 什么样主题的静态网页才能吸引人 学校举办网页编程大赛求各位大神支招,该做个什么主题的网页呢?或者有没有好的网页参考一下. 解决方案 问题贴错地方了,应该到美院找作案啊. 解决方案二: 赶紧找个学设计的同学一块搞吧,起码找个会ps的,主题不重要..设计最重要,,, 解决方案三: 大赛不设定主题的吗 解决方案四: 放着淘宝主页做一个就不做

win8系统使用bing搜索网页不显示图片与视频缩略图的3种解决方法

  win8系统使用bing搜索网页不显示图片与视频,具体现象如下所示: 解决方法: 方法一:换用IE浏览器重新登陆一下Bing,看看效果. 方法二:到Bing首页的设置里,恢复一下默认设置. 方法三:如果是bing搜索客户端出现了问题,可以重新安装该应用进行解决. 备注:我们首先要查出是否必应搜索发生问题,然后再进行解决! 以上就是win8系统使用bing搜索网页不显示图片与视频缩略图的解决方法全部内容的介绍,有同样问题的朋友可以按照上述的方法进行解决!

移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法

笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助.同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激! 一. css部分 body如果设置height:100%;overflow:hidden是依然可以滑动的,如果需禁止,要再加一层div设置 height:100%加overflow:hidden(html,body加height:100%) ,这样元素超出body的高度也不能滑动了. 或者同