网页布局基本技能问与答
问：利用层进行网页布局好还是利用表格进行布局设计好？
答：现在网络上的大多数网页都是用table写的，可以说它是不标准的！table层层嵌套，缺点是很繁琐，修改起来很麻烦，用w3c网页标准来说，table真正的目的是用来显示数据的，而不是用来布局的。div布局的好处是它符合了w3c网页标准，div是真正用来布局网页的，以后维护时要是想改变布局的话修改起来很方便，现在sina,163等国内网站以及国外的大多数网站都是用div布局的，如果你真的想当一名网页设计师，建议你走div这条路，但前提是要把CSS学好，并且要学精！
问：如何用css把整个网页布局居中?
答：你可以设置body的CSS属性，或者设置Body中元素的CSS属性，例如P标记、Table标记、Div标记等，他们都有text-align属性，设置居中就可以了，另外需要注意的是，要让整个网页居中最好使用Table来定位内容的位置，这样操作起来最简单和最方便。
问：在动态网页布局中如何让单元格不向两边无限撑，特别是在显示数据库内容的时候！
答：先看看这段代码：
| 以下是引用片段： style="width: 550; word-wrap: break-word; word-break: break-all;" |
再看看这段代码：
| 以下是引用片段： <table><tr><td style="word-break:break-all;width:200px;"> 表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容</td></tr></table> |
显示效果：
| 表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容 |
自己去体会。
问：网页布局如何用工具实现？
答：用fireworks或photoshop作图,然后用切片工具划分,在划分时注意考虑,哪些地方在运用时会拉长什么的,考虑把连续的图像做成背景显示,然后导出切片和HTML文件,最好把切片放在一个文件中,然后用dW打开把不用的东西去掉,把该在上面打字的地方的图去换换成背景,然后填充内容。在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。
第一种方法：做一个网页解决问题（长了点）
如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具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中的层来定位。
<head></head>
<body topmargin=0 leftmargin=0>
<center>
<table cellspacing cellpadding width=760><tr><td></td></tr></table>
</center>
</body>
</html>
使用框架和滑动门技术进行网页设计
以前看过一些类似的文章，但这些文章文字在理论上阐述得比较多，没有从技术角度来分析和实现滑动门效果，前段时间心血来潮对此作了一番专门的研究，这里就把我的所得奉献给大家。
一、什么是滑动门技术?
如上图，简单地说，滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化，从而区别于该组的其他导航按钮，提示给操作者，当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容。这种效果的一大好处在于，在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类，同时给人以美观、清晰、明了的视觉感受。滑动门技术的主角是被操作的对象，也就是这里被点击的对象，其CSS特性主要是指该导航按钮包括其中的其它元素的属性发生变化，当然，这个按钮的形式可以是BUTTON、A、TD甚至可以是P或者DIV这样的闭合元素，它们的属性主要是指这个元素的边框、背景、字体的颜色、大小、粗细以及外间距和内间距等等，总之，其一切可以把自身的“地位”区别于其它属主的属性都可以被应用起来使用在滑动门技术上。
二、何时使用滑动门技术?
观察发现，很多大型网站的频道导航或者栏目导航都要出现在其内容页面上或者终级页面上，事实上，这些所谓的频道导航或者栏目导航在每个内容页面上都是一样的，也就是说这些内容都是重复的，那么，浏览器客户端每次在装载这些内容的时候实际上都在重复下载相同内容的数据，这不仅浪费了大量的带宽，同时也给内容页面的装载带来很大的影响(因为导航的内容一般是放在页面的开头，页面装载也是按照从上到下的顺序进行转载，如果导航的部分也就是页面的上部没有装载完毕是不会装载页面的下部的。)，因此，传统的网页设计(撇开对搜索引擎的支持)实际上存在很大的弊端和不科学性。当然，如果使用传统的网页设计方法，滑动门技术的应用实际上是没有多大意义的，因为每个页面都有自己的导航部分，只要在这个页面上的导航部分稍微作些动作就可以非常明显地达到滑动门的效果，但这只是一种伪效果，而且方法是这种处理非常低级的。现在我们要做的是让导航组中的导航按钮的属性自动适应当前内容页的显示，也就是说:当点击“新闻”导航按钮之后，出现的内容页面上的“新闻”导航按钮自动显示滑动门效果，而不是事先通过手动对其CSS属性进行过修改，这种效果最好就是用框架页来实现。
当然，也许你会反对框架页，你会说在这个搜索引擎横行的时代使用框架页无疑是自寻死路，然而事实上在你说这句话的时候自己就已经处于弱势了，真正的强者敢于藐视搜索引擎甚至敢于挑战搜索引擎，真正优秀的网页设计师不是最大限度地去迎合搜索引擎的需要而是要最大限度地去迎合用户的需要，也就是说最大限度地去迎合用户体验，这才是我们的网页设计真正要做的。
三、框架网页中使用滑动门技术的好处
虽然很多人反对使用框架来对网页进行布局，事实上，框架对网页的布局有着最好的支持。首先，省去了重复装载不同内容页相同内容的时间和带宽,提高了页面装载速度,给人一种无刷新页面装载的感受。其次，框架与滑动门技术的结合更有利于提高用户体验，在表面上，使用框架与滑动门技术的各个框架页面在用户操作的过程中都在发生变化，对导航框架而言是被操作对象的样式发生变化，对内容页而言是指内容的发生变化，而在深度上，导航框架中的数据还是原来的数据，没有重新从服务器下载。
而今的Ajax技术被很多人视为高新技术的典范，谁都想去附庸风雅，实际上Ajax技术同样是不被搜索引擎支持的，Ajax最明亮的一点就是不重复装载重复的数据和无刷新装载数据，事实上“无刷新”这三个字说得有些勉强，
申明：这些方法对一个高手来说是没有什么用处的，所以有矛必有盾，你看着办吧。
1.将以下代码加入到HEML的<body></body>之间
function click() {if (event.button==2) {alert('不许你偷看！');}}document.onmousedown=click
</SCRIPT>
因为工作需要，昨晚将另一位网页设计师的设计作品生成了页面，折腾了一通宵，我脑细胞成几何倍数减少，完成了工作，不免有些牢骚要发。
我认为网站是为人民服务的，网站的优劣，内容是关键，而设计能排在第二就不错了。一个网站的设计不仅需要的是美观，更需要的是配合内容的编排以及其它更多方面，例如浏览速度及浏览方便性。如果您同意以上观点，请继续看下文。
因为网站的设计不仅需要美观，所以产生了不少矛盾，挑几个主要的矛盾来分析：
一、 background背景图像的矛盾
由于千篇一律的单色背景早已产生了视觉疲劳，因此出现了花纹背景，例如用点、线、面组成的背景，通常这种背景都是做成10*10px （或其它）的方形大小。再受韩潮影响，目前应用广泛的是渐变背景，由于分辨率的关系，通常采用上下渐变，左右渐变不可取。问题来了，上下渐变在Photoshop（做网页设计的常用软件）中只需要简单的使用渐变工具拉动一下即可，但是作为网页设计师的你有没有想过在页面中这种背景应该如何去做？分成上下2个背景，或者做一个超级长估计要在3000px以上的背景？（可以参看我的博客首页背景http://blog.sina.com.cn/m/baopin）因此在做这种背景的时候，需要仔细考虑页面该如何去生成。
二、 适应分辨率的矛盾
为适应分辨率，最佳方法应该是整个页面采用100％自适应表格，这种网站让800*600及以上分辨率的彩显都能整屏幕最佳效果浏览，这样的制作方法在为数不多的几个网站上出现过。但是这种方法必然需要最少的图片及最多的216安全色及最精简的表格。目前这样的网站不怎么能满足客户的设计要求。
在国内，网站通常都在750-780px的宽度之间，这样做的目的是为了适应800*600及以上分辨率的彩显浏览网站。OK，矛盾出现了，中间是780px的宽度，但是通常设计师会加上描边或者投影的效果，做为设计师的你，有没有把这个尺寸算进去？更有甚者，中间的内容是780px 两边采用长达30px的投影，再加上前面第一点提到的渐变背景，好了，你想让生成页面的工作人员自杀吗？请你在做这样的设计时候为后面的生成页面工作考虑一下。
三、 网页216安全色的矛盾
所谓网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色，也就是说这些颜色在任何用户显示设备上的显示效果都是相同的。所以使用216网页安全色进行网页设计可以最大限度避免颜色失真的问题。
但是通常216个色彩不怎么能满足网页设计师的设计，随便一个渐变已经超出了这个范围，矛盾又出现了。请尽量将非网页完全色做在图片上，也就是说将非网页安全色做成图片，而将安全色做为代码，这样尽可能使网站拥有美观及快速。如果碰到一个网页设计师的设计作品，从上到下、从内到外、从文字到图片都没有1个安全色，你会怎么做？我昨天就遇到了。难道让我把所有的文字都做成图片？那这个网站还需要更新吗？程序员又该如何做？如果你是这样设计网站的，请改改这种毛病。
四、 象素与羽化的矛盾
象素和羽化应用都非常广泛，但是某些地方却产生了矛盾。举个例子，在一个带有图片背景的表格上，有一个翻转图片的按钮（鼠标经过变换图片），而这个按钮并不需要一定做成方形，为了整体效果，你也许会做成圆角，这个圆角如果做成象素，那么按钮可以做成方形透明背景的GIF，这样不会有任何问题，但作为设计师的你，也许会做成羽化的圆角，问题出现了，这个按钮是一定要用JPG或者非透明背景的GIF了，那么一旦需要更改此表格的背景色，这个按钮的两张图片也需要更改。所以在设计到圆角这种效果的时候，用象素还是用羽化，你要考虑清楚了。
“实践检验真理”，你想成为一个优秀的网页设计师，那么请多去把你的设计作品做成页面，这样你会发现很多设计中的问题。单纯的做一个美观的网页设计并不难，难在如何将美观与实际页面相结合。时间仓促，胡乱写下上面的文字。
SyntaxHighlighter.highlight();
相关文章
- 这篇文章主要介绍了C#窗体布局方式详解的相关资料,需要的朋友可以参考下...2020-06-25
- 当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。 <?php $lan = substr( $HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
- 腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题，要把腾讯视频放到自己的网页有许多的办法，当然一般情况就是直接使用它们的网页代码了，如果你要下载资源再放到...2016-09-20
- 这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
- 这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别
我们现在使用的软件都会自动在前面加一个申明了，那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢？下面我们就一起来看看吧． 单...2016-09-20- 这篇文章主要介绍了js中flexible.js实现淘宝弹性布局方案,需要的朋友可以参考下...2015-12-25
在echarts中图例legend和坐标系grid实现左右布局实例
这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17- Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。本教程我们来学习一下Flex布局的基本语法知识及运用实例。 网页布局(layout)是CSS的一...2016-09-14
- 这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下...2016-02-01
- 这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了JavaScript瀑布流布局的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-09
- 这篇文章主要为大家详细介绍了js实现瀑布流布局，无限加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-14
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
这篇文章主要介绍了解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
- 本文主要一步一步介绍利用C#抓取页面数据的过程，抓取HTML，获取标题、描述、图片等信息，并去除HTML，希望对大家有所帮助。...2020-06-25
- 这篇文章主要介绍了winform 使用Anchor属性进行界面布局的方法，有需要的朋友可以参考一下...2020-06-25
- 这篇文章主要介绍了HTML5布局和HTML5标签的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-12-08
Android布局之TableLayout-TableRow布局
本文章来给各位同学详细介绍关于Android布局之TableLayout-TableRow布局,各位同学有需要可进入参考。 代码如下 复制代码 <?xml version="1...2016-09-20- 这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-01