网页设计中混合布局_网页设计中分栏布局的几种实现方案

1、网页设计的布局有哪几种

网页设计的布局有哪几种？

1.“国”字型：

2.拐角型：

3.标题正文型：

4.左右框架型：

5.上下框架型：

6.综合框架型：

7.封面型：

8.Flash型：网页设计

9.变化型：网页设计

2、网页设计中的布局.,有哪几种? 优缺点是什么?

TABLE和DIV

大量显示数据用TABLE如后台
其它全部用DIV

DIV的好处很多,自己找一下

3、几种常见网页布局设计

网站是有网页构成，这点相信很多的从事网站建设或者是接触过网站开发的站长应该都清楚，但是你现在的问题是，虽然很多的企业都想要建设网站，但是对于网站的布局了解的并不清楚，下面就跟着我们沃然一起来了解一下网站建设中几种常见的布局吧。
1、区块型

2、国字型
3、门户型
4、Flash型
5、左右框架型
6、拐角型
7、封面型
8、标题正文型
9、上下框架型
10、综合框架型

4、网页的布局类型有哪些?

1、“国”字型

2、拐角型

这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

3、标题正文型

这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

4、封面型

这种类型基本上是出一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分是企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

5、“T”结构布局

所谓“T”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式。

如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。

这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明、易于使用。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。

6、“口”型布局

这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。

这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。

缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。

7、“三”型布局

这种布局多用于国外网站，国内用得不多。其特点是页面上横向两条色块，将页面整体分割为4个部分，色块中大多放广告条。

8、对称对比布局

顾名思义，它指采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型网站。其优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。

9、POP布局

POP源自广告术语，指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类网站，优点显而易见：漂亮吸引人，缺点是速度慢。

网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。

网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。

(4)网页设计中混合布局扩展资料

网站伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。由于企业需要通过网站呈现产品、服务、理念、文化，或向大众提供某种功能服务。因此网页设计必须首先明确设计站点的目的和用户的需求，从而做出切实可行的设计方案。

专业的网页设计，需要经历以下几个阶段：

1、需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，从而建立起营销模型。

2、以业务目标为中心进行功能策划，制作出栏目结构关系图。

3、以满足用户体验设计为目标，使用axure rp或同类软件进行页面策划，制作出交互用例。

4、以页面精美化设计为目标，使用PS、AI等软件，调整，使用更合理的颜色、字体、图片、样式进行页面设计美化。

5、根据用户反馈，进行页面设计调整，以达到最优效果。

5、HTML网页制作中，总共有几种布局方式？

1.自然布局。
没有任何修饰的布局是自动靠左的。
2.流动布局
上面讲的float:left的情况。
3.定位布局
相对定位和绝对定位都是相对于父div标签的。
相对------以这个元素的本来应该在的位置为参照点
绝对——以父div标签的原点（左上角）为参照点。
由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。
还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。
当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。

6、网页设计中分栏布局的几种实现方案

页面布局就一种就是HTML+CSS
看怎么样代码越简练越好
如果一个DIV 就能设定好LOGO的位置了何必划分那么多个表格
如果文章列表里有时间作者等信息甚至是一些类似EXCEL表的东西需要每列对齐那LI肯定排版不如表格来的方便代码页简练那就用TABLE来做
尽量用最少的代码来做页面就最好了
如果有上百个页面很多部分比较类似就使用iframe嵌套的页面或者用程序里的include来包含页面最好比如顶部包含页面底部包含页面菜单页面左侧页面右侧页面都单独独立出来

7、网页设计应该如何布局

网页布局类型

网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。 1.

“国”字型:也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内

2. 拐角型:这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

3. 标题正文型:这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

4. 左右框架型:这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

5. 上下框架型:与上面类似，区别仅仅在于是一种上下分为两页的框架。

6. 综合框架型:上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。 7.

封面型:这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在

首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

8. Flash型:其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

9. 变化型:即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

8、静态网页设计制作中的布局模式

一、静态布局（Static Layout）

即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。

2、设计方法：

PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。

在移动端开发中采用静态布局的两种方式：

（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app 变革之rem）

（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。

优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。

缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。

二、流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

三、自适应布局（Adaptive Layout）

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

四、响应式布局（Responsive Layout）

随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

响应式几乎已经成为优秀页面布局的标准。

1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

2、设计方法：媒体查询+流式布局。通常使用 @media 媒体查询和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。