网页设计格局

1、html网页设计的排版布局

为什么每行都要独立写一个css呢？你每行都起相同的class名 ，统一写样式就好了 ，至于左右布局的方法很多，浮动，flex布局，都可以用 。

2、网页设计右边怎么布局布局

1、严格意义来说dw并不能用来设计网页，设计网页都是在平面设计工具里完成的，比如在ps里面设计好网站的效果图，在ps里面切图。

2、dw只是个网站代码编写工具，使用dw编写代码会比较方面，因为有很多的快捷功能。但是对于高手来说，是用记事本都可以编辑网站的。

3、dw的编辑面板主要有三种视图，分为 “代码”“拆分”“设计”，如下图

在制作网站的时候，能够用到的主要是“代码”视图功能。“设计”和“拆分”视图很少用到，只有当网站代码出现问题的的时候用来查找错误，对于有一年多代码编写经验的人来说，就已经用不到了。

4、在dw中编写制作网站的代码主要是div+css，也是就是html。网站布局也是通过html代码来实现的，比如maigin 与padding position 都是来控制div的布局和位置的。

所以，在dw里面设计网页布局网站并不是dw的功能，还是通过代码实现的。

3、网页设计的经典布局类型有哪些

网站建设中网页布局大致可分为：“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等，以下分别论述：

1、国字类型：也被称为同字型，顶部是网站的标题、横幅广告条，然后是网站的主体内容个，而左右分别是一些比较小的内容条，中间就是主要内容，最底部是网站的一些基本信息、联系方式、版权声明等。这也是现在网上见到的差不多最多的一种结构类型；

2、拐角型：这种类型其实与国字型很相近的，只是在形式上不一样，最上面的部分是网站的标题以及网站的横幅广告条，一种很常见的类型是最上面是标题及广告，左侧是导航链接；

3、标题正文类型：上面是网站的标题，或者是类似的东西，接着就是网站的正文内容，例如是一些文章或者是注册登录页面；

4、左右框架类型：这是一种左右为分别两页的框架结构，一般布局是：左边是导航链接，最上面有时是一个小的标题或标致，而右面就是主要内容，最常使用是论坛网站，企业网站中的内页有很多是采用这种布局方式的；这种类型的布局的特点是结构清晰明了；

5、上下框架类型：与左右框架类型类似，只是这种类型是上下两页的框架；

6、综合框架类型：其实就是左右框架类型和上下框架类型的结合体；

7、封面型：这种类型基本上是出现在一些网站的首页，多是精美平面结合小动画，再加几个简单链接或仅是一个“进入”链接或无任何提示；

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

9、变化型：即上面几种类型的结合与变化，但所实现的功能的实质是那种上、左、右结构的综合框架型；

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

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

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

5、网站设计的布局方式有哪些

网页基本布局方式：
(1)流式布局 Fluid
流布局与固定宽度布局基本不同点
就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，这位网页提供了很强的可塑性和流动性。
(2)固定布局 Fixed
在固定布局中，网页的宽度是必须指定为一个像素值，一般为960px。
(3)弹性布局 Elastic
弹性布局跟流布局很像，主要不同是大小单位；弹性布局的大小单位不是像素或者百分比，而是em或者rem，避免了根据px局部在高分辨率下几乎无法辨识的缺点，又相对于%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，需要一段时间适应而且不易从其他布局转换过来。
(4)伸缩 Flex box
使用css3 Flex系列属性进行相对布局。对于富媒体和复杂排版的支持非常大，但是存在兼容性问题。
(5)响应式
使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。

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

网页布局类型

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

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

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

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

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

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

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

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

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

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

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

7、网站设计时页面怎么布局比较好

一、 TABLE方式

优点：

1、简单易用：比较适合入门级的用户操作，用户可直接利用Dreamweaver（以下简写为“DW”）工具栏插入表格，设置长宽、对齐方式、属性等就可以轻松制作出一个页面了。

2、立见效果：当用户插入一个TABLE的时候就可立即看到效果。

3、可读性好：语句编写较为简便，主要代码就是<TABLE></TABLE>、<TR></TR>、<TD></TD>等语句。

4、制作较快：新建网站时，从DW中直接拖入TABLE比编写DIV要快速很多。

5、兼容性较强：TABLE设计由来已久，得到浏览器的广泛支持，故而基本上没什么错位现象。

缺点：

1、代码繁多，<TABLE><TR><TD><TD></TR>< /TABLE>这是构成一个表格的最基本元素，相对<DIV></DIV>编写来说，代码繁多。

2、网页打开速度较慢：后台代码太多，导致网站打开速度慢。

二、 DIV+CSS方式

优点：

1、标准化的页面结构：DIV+CSS是行业标准，是WEB发展的趋势。

2、代码简洁：<DIV></DIV>较TABLE来说代码精简许多。

3、页面浏览速度较快： 对于同一个页面视觉效果，采用DIV+CSS重构的页面容量要比TABLE编码的页面文件容量小得多，代码相对而言是很少的，浏览器加载的不多，故而速度相对较快。

4、页面布局灵活：DIV+CSS使得页面布局方便操作灵活，改版时只需改CSS样式即可实现页面重新布局，而不用改动程序，从而降低了网站改版的成本。

缺点：

1、可观性差：用户在编辑的时候并不能立即看到编辑效果，需要预览才可看到。

2、建站繁琐：相对于新手来说，对代码不是很了解，操作起来很是麻烦。

3、兼容性较差：DIV＋CSS设计的网站在IE浏览器里面正常显示，到火狐浏览器中有可能面目全非，故设计时需要把不同浏览器样式都考虑进去。

以上TABLE与DIV+CSS的对比中我可以得出，用DIV+CSS建设页面要好的多，同时也是网站建设的发展趋势。如果对html语言已经很了解，或者需要进行SEO优化，想做关键词推广，那最好是用DIV＋CSS来实现，这样网站的流量和页面浏览速度会快一些。

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

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

1.“国”字型：

2.拐角型：

3.标题正文型：

4.左右框架型：

5.上下框架型：

6.综合框架型：

7.封面型：

8.Flash型：网页设计

9.变化型：网页设计