网站页面布局设计
网页设计中如何解决浏览器兼容问题
为了能让网站设计正常的运行于各种浏览器平台，网站设计师们不得不想尽办法处理好网站建设中的浏览器兼容问题。正是因为网站设计当中的这一需要产生了一项新技术— CSS Hack。 CSS Hack 就是针对不同浏览器写出不同的 CSS code 的过程，主要用来解决目前各类浏览器无法标准解析CSS样式，导致同一网站设计页面在不同浏览器下出现显示效果不一致的兼容问题。 针对不同浏览器，可以将CSS Hack 网站设计代码整理如下： 1、针对I E 系列浏览器的网站设计代码 针对 IE 6 的专属 CSS Hack 网站设计代码 #id{ _display: block; } 也就是在网站设计CSS属性前加一个小划线就好。 针对 IE 7 的专属 CSS Hack 网站设计代码 #id{ *display: block; } 即在网站设计CSS属性前加上一个星号即可 针对 IE 8 的专属 CSS Hack 网站设计代码 #id{ margin-top: 10px 9; /*IE8*/ } 如上所示，解决办法为在网站设计CSS属性后分号前加上空格与斜线并加入一个数字9即可 。 2、针对火狐的CSS Hack 网站设计代码 火狐可谓是最标准的浏览器之一了，网站设计技术只要稍稍不到位就能体现得淋漓尽致，所以不少网站设计师也很头痛，其实想要解决火狐的兼容性除了要把网站设计的基础知识扎牢之外只要将CSS代码写入到下图 @-moz-document url-prefix（）{ } 里面就行了 @-moz-document url-prefix() { #id{ display: block; } } 。 3、针对 Safari 的CSS Hack 网站设计代码 Safari是苹果计算机的最新作业系统Mac OS X中新的浏览器，用来取代之前的Internet Explorer for Mac，使用了KDE的KHTML作为浏览器的运算核心。 @media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近。 4、针对 Opera 的CSS Hack 网站设计代码 Opera即Opera Software ASA，是台式机、各种设备和移动网络浏览器市场的商业领袖，因快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认，并在网上受到很多人的推崇。 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 这个世界上必然不会存在绝对完美的事物，因此运用以上方法让我们的网站设计更好的与各种浏览器兼容的时候其实已经违反了网站制作的W3C标准。
网页设计中如何解决浏览器兼容问题
为了能让网站设计正常的运行于各种浏览器平台，网站设计师们不得不想尽办法处理好网站建设中的浏览器兼容问题。正是因为网站设计当中的这一需要产生了一项新技术— CSS Hack。 CSS Hack 就是针对不同浏览器写出不同的 CSS code 的过程，主要用来解决目前各类浏览器无法标准解析CSS样式，导致同一网站设计页面在不同浏览器下出现显示效果不一致的兼容问题。 针对不同浏览器，可以将CSS Hack 网站设计代码整理如下： 1、针对I E 系列浏览器的网站设计代码 针对 IE 6 的专属 CSS Hack 网站设计代码 #id{ _display: block; } 也就是在网站设计CSS属性前加一个小划线就好。 针对 IE 7 的专属 CSS Hack 网站设计代码 #id{ *display: block; } 即在网站设计CSS属性前加上一个星号即可 针对 IE 8 的专属 CSS Hack 网站设计代码 #id{ margin-top: 10px 9; /*IE8*/ } 如上所示，解决办法为在网站设计CSS属性后分号前加上空格与斜线并加入一个数字9即可 。 2、针对火狐的CSS Hack 网站设计代码 火狐可谓是最标准的浏览器之一了，网站设计技术只要稍稍不到位就能体现得淋漓尽致，所以不少网站设计师也很头痛，其实想要解决火狐的兼容性除了要把网站设计的基础知识扎牢之外只要将CSS代码写入到下图 @-moz-document url-prefix（）{ } 里面就行了 @-moz-document url-prefix() { #id{ display: block; } } 。 3、针对 Safari 的CSS Hack 网站设计代码 Safari是苹果计算机的最新作业系统Mac OS X中新的浏览器，用来取代之前的Internet Explorer for Mac，使用了KDE的KHTML作为浏览器的运算核心。 @media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近。 4、针对 Opera 的CSS Hack 网站设计代码 Opera即Opera Software ASA，是台式机、各种设备和移动网络浏览器市场的商业领袖，因快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认，并在网上受到很多人的推崇。 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 这个世界上必然不会存在绝对完美的事物，因此运用以上方法让我们的网站设计更好的与各种浏览器兼容的时候其实已经违反了网站制作的W3C标准。
网页设计采用div+css有什么好处
网页设计采用div+css的好处：1、div+css有利于搜索引擎爬虫：一般而言相同网页页面html文件table布局字节大于div+css布局的字节，所以可以节约搜索引擎爬虫爬行下载页面内容时间。2、重构页面修改方便（div+css改版方便）：一般DIV+CSS页面都是html和css文件分开的也就是说一个网页的内容与表现形式的分离，一般修改小小部分的css文件里css样式属性就可以修改真站的样式版面，如背景颜色、字体颜色、网站宽度等具有table不具备的方便性。3、div+css页面增加网页打开速度：这里是特性决定了他们的性能，因为div+css页面是div的html和css文件分开的，而浏览器打开该网页的时候是同时下载html和css，所以可以提高网页打开速度，而table还有个特性就是浏览器打开的时候必须是浏览器下载以<table>开始,并</table>结束后才显示该块的内容，而div的html是边加载边将内容呈现到浏览器上，div+css网站大大增强用户体验作用。大家都知道网页多等1秒钟都会降低浏览者的等待时间。
怎样设计网页保持整体风格统一
网站总体色彩一致的优点是一个独特色彩的网站会给人留下很深刻的印象，因为人的视觉对色彩要比布局更敏感，更容易在大脑中形成记忆符号。
在色彩的一致性中，我们强调的是如果企业有自身的CI形象，最好在互联网中沿袭这个形象，给观众网上网下一致的感觉，更有利于企业形象的树立。一个建议是选取一两种主要色彩，几种辅助色彩。
二、网站结构的一致
网站结构是网站的的骨架，结构关系网站的浏览习惯和设计风格，所以，网站的栏目内页和内容内页必须和首页的风格要一致，就肯定要从网站的结构上下功夫。最重要的就是网站布局了，网站的相关内容文字排版等等也应该有所体现。
三、网站导航条要统一协调
导航是连接各个页面的最主要部分，一个导航统一的网站，是风格一致的基础部分，好的导航条可以带给人很深的印象。
四、网站的图像要统一
网站的图片并非越多越好，对于那些没有用处的图片不要在网页上占用空间，既无用又浪费设计时间，此外也降低了网页加载速度，对于相部位的相同图片，尽量用同一个URL路径，而不是使用不同的路径。而是作为网站结构一部分的局部图像，根据网页内容的不同，配以相应的图像或动画，从而给浏览者形成页面的连续性。
五、网站标志性元素的一致性
即网站或公司名称、网站或企业标志、导航及辅助导航的形式及位置、公司联系信息等，这种方式是目前网站普遍采用的结构，一方面减少设计、开发的工作量，同时更有利于以后的网站维护与更新，这也是SEO的要求。
六、网站的特别元素要一致
在网站设计中，个别具有特色的元素，如标志、象征图形、局部设计等重复出现，也会给访问者留下深刻印象。比如网站结构在某一点上的变化，由直线变为圆弧、暗色点缀的亮色、色彩中的补色等等。
七、网站的背景图片及背景颜色等统一问题
做网站时，网站的内页有必要和首页的风格一致，这样才显出网站是一个整体。这些都是内页风格保持一致要注意的。
阿里巴巴网站的网页布局结构
下面让我们来对阿里巴巴的网页设计布局进行分析：阿里巴巴中国站(china.alibaba.com)被google收录的中文网页数量2006年8月份数据为5320000，不仅从被收录的网页数量上来说，要远远高于同类网站的平均水平，更重要的是，阿里巴巴的网页质量比较高，潜在用户更容易通过搜索引擎检索发现发布在阿里巴巴网站的商业信息，从而为用户带来的商业机会，阿里巴巴也因此获得更大的网站访问量和的用户。1．从整体结构看：设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。点击打开阿里巴巴的网站，访问者可以很快的查找到自己所要寻找的信息和内容，理由是它的每个页面都有独立的标题，并且网页标题中含有有效的关键词，每个网页还有专门设计的META标签，而且图形和文本层叠有序，框架结构明显。从整体上看网站上的图片不是很多，因为它知道搜索引擎读不出来图片的信息和内容的。2．从页面的相互关系看：阿里巴巴的各组成部分在内容上的内在联系和表现形式上的相互呼应很明确，并注意到了整个页面设计风格的一致性，并且在搜索引擎搜索信息的情况下，阿里巴巴将它的主要业务放在了整个框架的最左边也就是搜索引擎最关注的地方。它抓住了搜索引擎的在搜索信息的特点。实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽。3.页面分割的角度看：分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。阿里巴巴在这方面就做的很出色。它在信息量很多时，将关键词列出来，将画面进行了有效的分割，使关注者更清楚的知道关键词的背后就是他所要的信息。所以网页设计中有效的分割可以被视为对于页面内容的一种分类归纳。4．从页面对比的角度看：对比就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。阿里巴巴在网页设计中无论是颜色、文本信息、文字的大小、格式、等等都无可非议。因为它给人的感觉很协调很舒服。5．从页面和谐的角度看：和谐是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。打开阿里巴巴的网页一开始给人有点单一的感觉，因为它的色彩不时很鲜明，但是从整体角度在看会发现它的颜色和线条的搭配让人的视觉效果和它的网页达到一种想沟通的效果，尤其是它框架两边的空白部分从美学角度可以说明两点：一是显示阿里巴巴企业的卓越；二是显示网页品味的优越感。所以从整体上体现出了网页的格调。所以阿里巴巴之所以能够做到今天这样的成就，可以看出它在每一个方面的专业化和深入的程度。所以其他的网站在设计布局的同时有必要向阿里巴巴深入的学习。
阿里巴巴网站的网页布局结构
下面让我们来对阿里巴巴的网页设计布局进行分析：阿里巴巴中国站(china.alibaba.com)被google收录的中文网页数量2006年8月份数据为5320000，不仅从被收录的网页数量上来说，要远远高于同类网站的平均水平，更重要的是，阿里巴巴的网页质量比较高，潜在用户更容易通过搜索引擎检索发现发布在阿里巴巴网站的商业信息，从而为用户带来的商业机会，阿里巴巴也因此获得更大的网站访问量和的用户。1．从整体结构看：设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。点击打开阿里巴巴的网站，访问者可以很快的查找到自己所要寻找的信息和内容，理由是它的每个页面都有独立的标题，并且网页标题中含有有效的关键词，每个网页还有专门设计的META标签，而且图形和文本层叠有序，框架结构明显。从整体上看网站上的图片不是很多，因为它知道搜索引擎读不出来图片的信息和内容的。2．从页面的相互关系看：阿里巴巴的各组成部分在内容上的内在联系和表现形式上的相互呼应很明确，并注意到了整个页面设计风格的一致性，并且在搜索引擎搜索信息的情况下，阿里巴巴将它的主要业务放在了整个框架的最左边也就是搜索引擎最关注的地方。它抓住了搜索引擎的在搜索信息的特点。实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽。3.页面分割的角度看：分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。阿里巴巴在这方面就做的很出色。它在信息量很多时，将关键词列出来，将画面进行了有效的分割，使关注者更清楚的知道关键词的背后就是他所要的信息。所以网页设计中有效的分割可以被视为对于页面内容的一种分类归纳。4．从页面对比的角度看：对比就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。阿里巴巴在网页设计中无论是颜色、文本信息、文字的大小、格式、等等都无可非议。因为它给人的感觉很协调很舒服。5．从页面和谐的角度看：和谐是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。打开阿里巴巴的网页一开始给人有点单一的感觉，因为它的色彩不时很鲜明，但是从整体角度在看会发现它的颜色和线条的搭配让人的视觉效果和它的网页达到一种想沟通的效果，尤其是它框架两边的空白部分从美学角度可以说明两点：一是显示阿里巴巴企业的卓越；二是显示网页品味的优越感。所以从整体上体现出了网页的格调。所以阿里巴巴之所以能够做到今天这样的成就，可以看出它在每一个方面的专业化和深入的程度。所以其他的网站在设计布局的同时有必要向阿里巴巴深入的学习。
网页设计的布局有哪几种
网页设计的布局有哪几种？1.“国”字型： 网页设计也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 2.拐角型： 这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 3.标题正文型： 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。 4.左右框架型： 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。5.上下框架型： 与上面类似，区别仅仅在于是一种上下分为两页的框架。6.综合框架型： 上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。 7.封面型： 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。8.Flash型：网页设计 其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。9.变化型：网页设计 即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。
网站设计中页面布局的规范要求有哪些
看看这篇文章吧；希望对你有帮助https://wenku.baidu.com/view/879ea4a0102de2bd960588fd.html
请问网页设计中常用布局方式有哪几种？
DIV+CSS和table两种布局方式，DIV+CSS布局运行速度快，科学，但难学，table布局简单，运行加载慢，做网站不科学，各有利弊。
表格布局有什么特点啊我知道的就是表格布局，CSS+DIV层布局 还有一种很常用的布局方式，是框架么？怎么用呢，具体的用法都不是很清楚，可以粗略的介绍不嘛
表格布局兼容性较好，基本不要考虑浏览器兼容问题，但是一些高级效果，表格是无法做出的。表格布局的代码偏长，效率不及div布局,简单说表格低效、稳定、控制难度低，div高效先进，兼容性 难度高。框架适用于后台管理界面，一般顶部或左侧是功能菜单，右侧是内容显示页面，框架不灵活，用的也比较麻烦，框架布局已经基本上不用的，一般就table布局和div布局两种，div里该用到table时还是要用到的。
