网站的风格设计和版面布局

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

网页布局类型

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

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

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

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

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

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

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

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

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

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

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

2、浅析关于photoshop与网页布局设计的关系

一、Photoshop在网页布局设计中的作用
1、 Photoshop在网页布局计划中的作用
①布局灵活：Photoshop的灵魂是图层，每层可以放置不同的元素，图层之间可以相互链接，也可单独存放，每个图层上的图像位置可以随意挪动而不影响其它图层的图像位置，每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置而不影响其它图层上的图像。如此灵活的功能，完全可以让设计者随心所欲设计而不受任何约束，而Dreamweaver等软件给设计者提供出自由度降低很多，其效果也会大打折扣。
②修改方便：网站建设前期首先要与客户签定合同，签定合同时客户最关心的是自己的网站是什么样子，这时设计者不可能拿出建好的网站给客户演示，这样一是成本太高，合同能否签定还不一定;二是保护知识产权，有的客户拿走设计方案交给别的公司去做，自己岂不成了给别人做嫁衣裳。最好的办法是拿出在Photoshop中做出的效果图给客户看。一般情况下，客户一次满意率非常低，总会提出修改意见，而且还会不断地提出修改方案。这时我们就可以利用Photoshop的强大功能按客户的要求方便地进行修改和优化，直到客户满意为止。如果在Dreamweaver下，每做一次大的修改，几乎跟重新设计一样费时费力，而且还不一定能达到客户要求。
③加快浏览进度。一个设计不美观不规范的网站是没有生命力，同样一个打开、下载速度慢的网站也是没有存在的价值。心理学研究表明，选择性越多，人的忍耐性越差;可选择性越大，人的忍耐性越低。在互联网高度发展的今天，同类网站多如牛毛，人们没必要在一个网站前停驻静侯你一点一点地下载、打开、测试、显示。一般情况下，下载速度一旦超过10秒，人们会自动转向其它网站。决定下载速度的因素很多，如服务器配置标准、网络传输介质、客户机的配置以及同时点击人数的多少等。但是在这些条件相同时，网页大小及网页元素的优化和配置就是唯一的因素。使用Photoshop设计的网页经过裁切后体积相对要小得多，相同的元素因为其格式变化也会大大提高下载速度，因此Photoshop就成了提高速度，提高点击率的制胜法宝。
二、用Photoshop设计网页布局应注意的几个问题
1、 网页文档尺寸与分辨率。网页文档一般为1007*600和708*800像素，分辨率为72像素，这是屏幕分辨率，太高的分辨率并不能增强效果，反而会降低下载速度。一般情况下，大型网站不要超过3屏。
2、 颜色：网站背景颜色与文件颜色要统一协调，一般不要超过两种，一些网站被批评为脏、乱、差，其要害是颜色搭配不合理，或者太多，给人一种不舒服的感觉。
3、 字体，标题。导航字体一般用黑体，正文一般用宋体，其它字体浏览器不兼容，可能造成调试时出错，给工作带来麻烦。如果为增强页面效果用到其它字体，则最好在用Dreamweaver前在Photoshop切分及图片，字体的颜色设置要考虑到整个页面效果。
4、 布局格式：虽然效果图是用Photoshop设计的，但一定要兼顾到Dreamweaver对页面布局的要求，Dreamweaver下网页布局是使用‘国’字形，还是其他模式，是否使用框架，使用框架的类型是哪一种，都是在设计前要考虑到的。否则会造成效果图与最后的网站布局出现出入，给客户和自身带来麻烦和损失。
5、 图文搭配：一个好的网站是图片多好还是文字多好，这要视网站的功能、行业、目的而定，但有个原则就是图文合理配置，而图片则要按一定的空间分布进行和谐分布。另外，图片大小要合乎美学原则，不能太大，一般用缩略图较好，如果要显示更多的图片细节，不妨给缩略图链接一个大的图片。
6、科学使用参考线。参考线是设计页面布局的有效辅助工具，我们可以先用横参考线将网页布局分成几大版块，然后用竖参考线将每个板块按我们的思路分为几个小板块，最后再整体观察一下。要精确定位网页元素，可用对齐参考线的方法来实现：“视图”—“对齐到”—“参考线”，而参考线的精确定位可以借助标尺和网格来实现，这里要注意的是网站的Logo和Banner或者导航条等都是事先设计好的，有固定大小，在做这些区域时尺寸一定要按照这些元素尺寸设计，不能有丝毫差错，否则进入DreamWeaver整合时，则可能出现空边或撑开表格的现象。
三、“切片”工具是Photoshop通向DreamWeaver的桥梁。
利用Photoshop效果图最终与客户签合同后，还不是Photoshop设计网页布局的终结，而还有关键的一步，就是“切片”，只有正确地切片后，DreamWeaver才能对效果图进行有效的整合，Photoshop在网页布局中的积极作用才发挥到了极致。要完成“切片”这关键的一步，应遵循以下原则：
1、必须依靠参考线。设计时用到参考线，切图时更要用好参考线。参考线能保证我们切出图在同一表格中的尺寸统一协调，有效避免“留白”和“爆边”。
2、 Logo和Banner必切。如果效果图中存在Logo和Banner,我们必须切片这部分，主要是为预先设计的Logo和Banner留下空间，在DreamWeaver整合时最好不用Logo和Banner的切片，而是直接用Logo和Banner原文档，这是提高Logo和Banner效果的需要。
3、虚线和转角形状必切。虚线和转角形状在DreamWeaver 不能实现，只能使用Photoshop切片。
4、渐变必切。这也是Dream Weaver实现不了的。
5、大图必切。大的图像必须切分成均匀图，这样可以提高网页下载速度。
6、特殊文字效果必切。除黑体和宋体外，其他字体必须切片。DreamWeaver下最有效的字体只有宋体和黑体，其它字体浏览器也要能不兼容。
7、导航条必切。一般情况下导航条都是特别设计的，其效果在Dream Weaver下不能实现，因此必须形成切片供后期使用。
8、有效存储切片。存储切片的文件夹必须位于站点的根目录下，文件夹名必须是英文名字。存储切片时用“文件—存储为web所用格式”命令。切片存储格式要求一般存为Gif格式。Gif占用体积小。要求较高的图像存储为JPEG格式，JPG格式显示更多的图片细节。
当然，网页布局的设计软件的使用依设计者习惯、爱好、风格不同而不一样。笔者在此只是谈一下一般的规律，以供广大网页设计初学者参考。

3、网页版面布局设计的类型有哪些?

设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。
版面指的是浏览器看到的完整的一个页面(可以包含框架和层)。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。
布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。
你可能注意到:“最适合”是一个不确定的形容词，什么才是最适合的呢?抱歉的是阿捷不能也不可能给您一个完整的正确的答案。就好比有人希望知道成功的秘诀是什么，成功者只能建议您用什么方法，什么途径才能最容易获得成功，而不可能有一步成功的"秘诀"告诉您。

4、网页版面布局设计的原则是什么?

一个好的网站必须要体现在整体的策划、设计、布局、网站的定位、色彩搭配，最重要的是网站页面的小细节处理。整体感觉是否符合行业的需求、符合公司的文化。有许多企业都会说我要做一个大气的网站、实际上从专业的角度来讲应该要做一个最适合你的网站，你搞机械销售的不可能去像广告设计公司的搞得很花哨的的，现在网站都讲究简洁，适用，用户体验好。网站设计中结构布局就显得尤为重要，需要注意的以下方面：

网站的框架要简约明了，主题思想明确，导航要设计合理，核心信息放在网站的左上侧，这个地方搜索引擎爬虫程序最感兴趣先行抓取，客户也最感兴趣这里。制作网站框架要清晰，布局要合理，拒绝杂乱的代码，拒绝大量的js脚本和flash动画，这样会影响网站的访问速度，栏目设置要清晰易见，让用户浏览起来简洁舒服。一个网站一处滚动就已经OK了。网页布局应该遵循一个原则，即“先上后下，先左后右”原则。由于搜索引擎在执行搜索的时候，其搜索的顺序跟我们浏览页面的顺序是一样的，即前面说的原则。遵循这个原则有助于搜索引擎蜘蛛抓取页面快速收录。

由于搜索引擎爬虫程序是直接识别页面代码来得到信息的。这样制作网站的目的也就是为了让网页蜘蛛能够毫不吃力地顺利爬行完网页。当然没什么好办法控制搜索引擎，但有办法改变页面。制作网站过程中，标签的使用也是很有讲究的，通常要把握下面几个原则：保持良好的层次框架，近似h1h2h3等标签都应依照标签本身的用处来使用，比方：h1标签表示网页主标题，且在一个网页中只能使用一次。在部分权重较高的标签中，合理的融入关键词，如h1、strong等标签。

css命名规则符合一定标准规范，较长名称选择驼峰式命名规则，如.tophead。代码尽量做到简洁，禁止使用代码生成工具制作网页。代码在实现基本的框架、样式、和行为分离的基础上，还要做到可用、精简、有序而且符合seo代码标准规范。网站js结构选择jquery，全部脚本尽量封装到一个包内。网站flash调用代码尽量要确保浏览器兼容性，这些结构问题都要在制作中要先行规划。

5、网站规划的一般步骤 1确定网站的主题和风格 2设计规划网站的结构和内容 3设计网站的版面布局

网页三剑客是制作网页的很好的工具，布局差不多都一样，看你要什么功能的，细节你可以自己去布置一下。

6、网页版面布局有几种？

1．T型布局
T型布局是指页面顶部为横条网站标志和广告条，下方左半部分为主菜单，右半部分为显示内容的布局。因为菜单背景饺探，整体效果类似英文字母T，所以称之为T型布局，这是网页设计中使用最广泛的一种布局方式。其优点是页面结构清晰，主次分明，是初学者最容易学习的布局方法；缺点是规矩呆板，如果把握不好，在细节和色彩搭配上不注意，容易让人看了之后感到乏味。
2．“口”型布局
“口”型布局是页面上下各有一个广告条，左边是主菜单，右边是友情链接等内容，中间是主要内容。其优点是充分利用了版面，信息量大；缺点是页面拥挤，不够灵活。
3．“国”型布局
“国”型布局又称为“同”型布局，是一些大型网站喜欢使用的布局类型。页面顶部是一横条，横条左部设置网站标志，右部是横条广告，横条下部是水平放置的主导航栏。导航栏下方分为左中右三栏，左边一般放置内容导航、二级栏目、注册登录、搜索引擎等，右边一般放置动态新闻、热点内容、友情链接等，中间显示网页的主体内容，在页面的最下方是一横条状菜单或广告，也可以是网站的一些基本信息、联系方式、版权声明等。这种布局通常用于主页设计，主要优点是页面容纳的内容多，信息量大。
4．标题正文型布局
标题正文型布局最上方是标题或广告等内容，下方是正文，通常文章页面或注册页面采用此种布局，其特点是简洁明快，干扰信息少，较为正规。
5．“三”型布局
“三”型布局具有简洁明快的艺术效果，适合于艺术类、收藏类、展示类网站。这种布局往往采用简单的图像和线条代替拥挤的文字，给浏览者以强烈的视觉冲击，使其感觉进入了一幅完整的画面，而不是一个分门别类的超市。它的一级页面和二级页面的链接都按行水平排列在页面的中部，网站标志非常醒目。
6．“川”型布局
“川”型布局比较特殊，整个页面在垂直方向分为3列，网站的内容按栏目分布在这3列中，可以最大限度地突出主页的索引功能。如果网站栏Bf良多，可以考虑采用这种布局。它和“国”形布局的主要区别是：把主内容区换成了各个二级页面的链接，其中的不足是二级栏目比例不易配置平衡，色彩不易协调。
7．POP布局
POP布局像一张宣传海报，以一张精美图片作为页面的设计中心，在适当位置放置主菜单，常用于时尚类站点。这种布局方式不讲究上下和左右的对称，但要求平衡有韵律，能达到动感的效果，其优点是漂亮吸引入，缺点是速度慢。
8．变化型
采用上述几种布局的结合与变化，布局采用上、下、左、右结合的综合型框架，再结合F1ash动画，使页面形式更加多样，视觉冲击力更强。
网页布局的基本形式主要有上述几种类型，至于哪种布局类型最好，需要具体问题具体分析，要从网站内容、页面结构和表现形式等多方面进行综合考虑，同时也需要制作者具有较高的设计水平。

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

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

1.“国”字型：

2.拐角型：

3.标题正文型：

4.左右框架型：

5.上下框架型：

6.综合框架型：

7.封面型：

8.Flash型：网页设计

9.变化型：网页设计

8、总结网站设计的几种版面布局形式

网站设计中.新鲜和个性是布局的最高境，能加强视觉效果。
1、T结构布局，就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母T,这是网页设计中用的最广返的一种布局方式。
这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。
2、口型布局。就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。
这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。
3、三型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。
4、对称对比布局，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。
5、POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点。优点：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。