怎么设计网页布局
网页的布局是针对网站主页的版面设计，因此建议先用笔将构思的页面布局草图勾勒出来，然后在进行版面的细化和调整;即确定布局草案后，利用网页制作工具制作、调整。
一、怎么设计网页布局
网页的布局主要是针对网站主页的版面设计，因此最好先用笔将构思的页面布局草图勾勒出来，然后在进行版面的细化和调整。
在设计时应该把一些主要的元素放到网页中，例如网站的站标、广告栏、导航条等，这些元素应该放在最突出、最醒目的位置，然后再考虑其他元素的放置。
在将各主要元素确定好之后，下面就可以考虑文字、图片、表格等页面元素的排版布局了。
确定布局草案后，利用网页制作工具，如Dreameaver、FrontPage把草案做成一个简略的网页，以观察总体效果，对不协调的地方进行调整。
二、网页布局的常见类型
1.川字型结构
川字型结构将网页分割为左、中、右三栏，左右两栏小，中栏大。整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的搜索功能。
2.二字型结构
二字型结构将网页分割为上、下两栏，上栏小，下栏大，或上栏大，下栏小。这种类型的页面最上面往往是标题，下面是正文，例如，一些文章页面或注册页面等就是这一类。
三、页面布局常用标签
1、换行标签“br”
“br”为换行标签，它是一个单标签，作用是令其后的内容在下一行显示。由于浏览器会自动忽略源代码中的空白和换行，这使得“br”成为最常用的标记之一。
2、分段控制标签“p”
“p”为分段控制标签，它可以单独使用也可成对使用，其作用是留一空白行。
“p”有一个对齐方式属性align，其属性可选值为right、left、center。
3、居中对齐标签“center”
“center”为居中对齐标签，它是一个双标签，其作用是进行居中控制。
4、水平分隔线标签“hr”
“hr”为水平分隔线标签，它是一个单标签，其作用是在标签所在位置上插入一条水平线。
“hr”的属性有align、size、width、color和noshade。
前端网页布局有几种方式
常用的前端网页布局方式有四种，分别为静态布局;流式布局;自适应布局;响应式布局。其中静态布局为传统的一种布局方式，网页上的所有元素都是用px为单位进行设定的。
1、静态布局
最为传统的一种布局方式，网页上的所有元素都是用px为单位进行设定的。
布局特点：不论屏幕的大小，页面宽高始终不变，始终维持最初设计时的样式大小来显示。
常规的PC端网页都是用的静态布局，也就是设置了min-width，当小于这个宽度的时候出现滚动条，当大于的时候让内容居中，外加背景。
2、流式布局
布局特点：当屏幕分辨率大小发生变化时，页面里的元素大小会变化但布局不会发生变化。
设计方法：使用%百分比来定义宽度，高度大都是用px来固定，可以根据可视区域(viewpoint)和父元素的实时尺寸进行调整，尽可能的去适应各种分辨率。
往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局在web前端开发的早期，用来应对不同尺寸的PC屏幕，在当今的移动端开发也是常用的布局方式。
3、自适应布局
自适应布局就是为不同的屏幕定义不同的布局，就是创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
改变不同的屏幕分辨率可以切换不同的静态布局(页面元素位置发生改变)，但在每个静态布局中
，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
布局特点：当屏幕的大小发生变化时，页面里面的元素的位置会变化而大小不会变化。
设计方法：使用@media媒体查询给不同的尺寸和介质的设备切换不同样式。
在优秀的响应范围设计下可以给适配范围内的设备比较好的体验，在同一个设备下实际上还是固定的布局。
4、响应式布局
响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、平板、智能手表的Web浏览器等等)都能显示出令人满意的效果，对CSS编写者来说，有多种手法可以去实现，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。
布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
设计方法：媒体查询+流式布局。通常使用@media媒体查询和网格系统配合相对布局单位进行布局，实际上就是综合响应式。流失等上述技术通过CSS给单一网页不同设备返回不同样式的技术统称。
