网页布局

首先网页在普通的电脑上面显示1900px的宽度会拉伸很多，这在网站的整体效果来说，访客的体验是不好的。字体大小也是根据网页的布局来设置的并没有一成不变的。 也就是说，大家会考虑设计用1500px的宽度主要是用户大多都是19寸的显示器么？那么1400的宽度被拉伸到1900px分辨率降低是自然情况么？那TB和JD为什么用19寸的显示器和24寸的显示器都没有分辨率下降的问题，是因为他们用代码写的么？谢谢了 如果能做自适应一般是没有人写死宽度为多少Px 自适应是什么啊 是PS保存WBE格式那个还是DW里面那个设置啊 网页开发中为了保证兼容大部分显示正常就采用自适应。你可以百度下。

看看这样行不行<div class="row"> <div class="col-xs-4">...</div> <div class="col-xs-4">...</div> <div class="col-xs-4">...</div></div> 我用的就是col-xs-*这样的办法,不行...我感觉是响应式的问题... 那就禁止响应式布局，

iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隐藏URL与状态栏)iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隐藏URL与状态栏)Note2 360 * 567 (未隐藏URL与状态栏)iPad 3/4 768*928 (未隐藏URL与状态栏)GALAXY SIII 360 * 567 (未隐藏URL与状态栏)米2A 360 *567 (未隐藏URL与状态栏)HTC G10 320 * 460<meta name="viewport"网页手机wap2.0网页head加入面条元标签iPhone浏览器页面原始显示并允许缩放 <meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> width - viewport宽度 height -viewport高度 initial-scale - 初始缩放比例 minimum-scale -允许用户缩放比例 maximum-scale -允许用户缩放比例 user-scalable - 用户否手缩放参考：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/、网页手机wap2.0网页head加入面条元标签iPhone浏览器页面原始显示并允许缩放<meta name="viewport"content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">其： width - viewport宽度 height - viewport高度 initial-scale -初始缩放比例minimum-scale - 允许用户缩放比例 maximum-scale - 允许用户缩放比例user-scalable -用户否手缩放c二、关于meta详细介绍请参考三、文关于Meta例详细介绍 原文址3. Meta元素视区　　默认情况iPhoneSafari象屏幕桌面浏览器显示页面宽度达980像素缩内容适应iPhone屏幕用户iPhone看页面觉字体比较比较模糊必须要放才能看真切于普通Web页面似乎接受于用应用程序没几能够受　　幸运使用特殊Meta元素视区进行纠：<metaname="viewport" content="width=device-width"/>　　元素通知浏览器使用设备宽度作视区宽度默认980像素我看看两同例　　例3(链接：http://www.sitepoint.com/examples/iphone-development-12tips/no-viewport.html)显示简单段落元素没Meta元素视区字体点模糊iPhone运行实际情况图所示图 1 视区显示效　　例4(链接：http://www.sitepoint.com/examples/iphone-development-12tips/viewport.html)包括视区元素现设备宽度320像素字体比前例更清晰iPhone运行实际情况图所示图 2 视区显示效　　另外手设置device-width值例假设博客页面宽度750像素桌面屏幕佳800x600像素例5(链接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750.html)显示删减版本iPhone浏览看980像素剩空间都填充白色　　消除额外空间使用meta元素视区宽度设780像素：<metaname="viewport" content="width=780"/>　　例6(链接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)显示meta元素视区布局固定效　　Meta元素视区内容包括逗号隔值initial-scale –用户初看页面放级别于Web应用程序见设置：<metaname="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>　　元素设置宽度设备宽度禁止用户放缩

最外围div 或 table 的宽度不要用百分比来定义，使用准确数值的px来定义，这样缩小窗口就不会乱了，只会出现滚动条。 但是不同的电脑分辨率是不一样的,显示的也就不一样了 分辨率不同，只是屏幕上显示的区域大小不同，你设置了固定宽度后，在任何分辨率下都不会变。如果会变证明你是用了相对宽度。例如一个div或table你把宽度设为1024px，它在任何分辨率下都是1024px的宽度，不会变的。如果你设为90%那么在不同的分辨率下，它就会变了。 如果你的电脑是1024px,显示的是刚刚好，但是我换个1366的电脑，很明显就空出来很大一部分 。我是这个意思 我明白你的意思，在有一些网页，比如邮箱的页面可以做成100%的宽度，能自动适应任何分辨率的显示器，也不影响美观。但是一些比较复杂的网页是不可能自动适应屏幕的，否则会变乱或很难看。比如网易，新浪这些门户网站的主页面都不可能自动适应任何分辨率的屏幕，两边必然是会有空白的。页面元素过多，排好版了，很漂亮的，但如果要自动适应不同分辨率的话，必然变乱。 那这个就没办法解决了吗？ 是的，没办法的。复杂页面是不可能做到自适应不同的屏幕分辩率来满屏显示的。

分别有;同字型 国字型 川字型 匡字型 三字型

网页布局一般有七个步骤 如下：1.页面尺寸：页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下的页面范围就变得越来越小。一般，分辨率在1024×768的情况下，页面的显示尺寸为1007×600；分辨率在800×600的情况下，页面的显示尺寸为780×428个象素；分辨率在640×480的情况下，页面的显示尺寸则为620×311个象素。从以上数据可以看出，分辨率越高页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因，目前的浏览器的工具栏都可以取消或者增加，那么当显示全部的工具栏和关闭全部工具栏时，页面的尺寸是不一样的。在网页设计过程中，向下拖动页面是惟一给网页增加内容(尺寸)的方法。要提醒家。除非能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么最好能在上面做上页面内部连接，以方便访者浏览。2.整体造型：什么是造型，造型就是创造出来的物体形象。页面的整体形象，应该是一个整体，图形与文本的接合应该层叠有序，有机统一。虽然，显示器和浏览器都是矩形，但对于页面的造型，可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，注意到很多ICP和政府网页都是以矩形为整体造型；圆形代表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形则代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是结合多个形状加以设计，其中又以某种形状为主。3.页头：页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将涉及到下面的设计和整个页面的协调性。页头常放置站点名字的图片或公司标志以及旗帜广告等。4.文本：文本在页面中多数以“行”或者“块”(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。5.页脚：页脚和页头相呼应。页头是放置站点主题的地方，而页脚则是放置制作者或者公司信息的地方。能看到，许多此类信息都是放置在页脚的。6.图片：图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而布局思维也将体现在这里。7.多媒体：除了文本和图片，还有声音，动画，视频等等其它媒体。虽然不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也变得更重要起来。

1、严格意义来说dw并不能用来设计网页，设计网页都是在平面设计工具里完成的，比如在ps里面设计好网站的效果图，在ps里面切图。2、dw只是个网站代码编写工具，使用dw编写代码会比较方面，因为有很多的快捷功能。但是对于高手来说，是用记事本都可以编辑网站的。3、dw的编辑面板主要有三种视图，分为 “代码”“拆分”“设计”，如下图在制作网站的时候，能够用到的主要是“代码”视图功能。“设计”和“拆分”视图很少用到，只有当网站代码出现问题的的时候用来查找错误，对于有一年多代码编写经验的人来说，就已经用不到了。4、在dw中编写制作网站的代码主要是div+css，也是就是html。网站布局也是通过html代码来实现的，比如maigin 与padding position 都是来控制div的布局和位置的。所以，在dw里面设计网页布局网站并不是dw的功能，还是通过代码实现的。

CSS实现div随着网页的大小变化而变化，首先我们需要了解div的width和height的属性设置，有一个auto参数，就是代表的是随着内容的大小而改变，浏览器缩小，自然div的宽度就会减小，高度就会有所增加，具体看下代码:<html><head><style>#div1{width:auto;height:auto;}</style></head><body><div id='div1'><p>我是测试文字</p></div></body></html>

网页布局方法很多,根据各人不同的喜好布局也不同:通常的布局方法有以下几种:一.通过表格来布局表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响二.通过层叠样式表来布局CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现三.通过框架来布局框架结构的页面被许多人不喜欢，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观四.当然还有其他的布局方式,比如你可以在纸上布局,就是先在纸上画草图,然后再按照图来做