Photoshop 网页设计 网页结构布局.docx

Photoshop网页设计网页结构布局
网页布局是指对网页中的文字、图形等内容，也就是网页中的元素进行统筹计划与安排。网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。
Photoshop所具有的对图像的编辑功能，在网页布局的设Photoshop网页设计网页结构布局
网页布局是指对网页中的文字、图形等内容，也就是网页中的元素进行统筹计划与安排。网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。
Photoshop所具有的对图像的编辑功能，在网页布局的设计上更是得心应手。不像用纸来设计布局，利用Photoshop可以方便地使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法表现的布局意念。
提示
许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计软件里边设计布局边添加内容。
这种不打草稿的方法很难让你设计出优秀的网页来。所以在开始制作网页时，应该先在纸上画出你页面的布局草图来。
1“国”字型网页布局“国”字型也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的
标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是网上最常见的一种结构类型，如图1-1所示。
图1-1国字型网页布局
2．拐角型网页布局拐角型结构与上一种只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型，最上面是标题及广告，左侧是导航链接，如图1-2所示。
图1-2拐角型网页布局
3．标题正文型网页布局标题正文类型，即最上面是标题或者类似的一些东西，下面是正文，比如一些文章页面或者注册页面等就是这种类型的网页，如图1-3所示。
o
LQWOTKS*
NEWT-SHIRTSBUY
IntBfneftionaljfl・
图1-3标题正文型网页布局
4．左右框架型网页布局这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然，如图1-4所示。
图1-4左右框架网页布局
5．上下框架型网页布局
与上面类似，区别仅仅在于是一种上下分为两页的框架。这种框架的网页上面是