网页排版布局的误区和建议
经常看到许多设计师在设计网站首页的时候，总是喜欢把网页排版搞的很复杂，因为他们觉得这样的设计有以下几个好处：
1、热闹：让用户感觉到自己网站很有人气的样子；
2、大气：因为此类排版是模仿门户网站风格的，所以显得大气和专业。
其实，这是一种自欺欺人的设计，效果只能使得其反。因为：
1、关于热闹：
虽然把排版搞的很复杂，另外加许多花花绿绿的图片看起来很热闹，但是也仅仅是看起来很热闹罢了，对于普通用户而言，他根本不关心这种感觉，用户需要的是快速找到自己需要的信息。打开这样的网页，会让用户找不到重点，会让用户发晕，更会让用户觉得你这个网站没特点，然后很快就关闭你的网站了。
2、关于大气
因为网站之所以那样设计，是有历史原因的，因为早期主要靠卖广告位，而客户就需要买首页，首页搞的很复杂，广告位才能多。你的网站也这样设计的话，你这样模仿门户网站，只能模仿来用户网站首页的形，但是你也搞不来门户网站的流量。
曾经有一个朋友，个人做了一个网站，直接抄袭了三大门户，然后把三大门户某频道整合到了一起，看起来非常大气，每当给朋友介绍自己网站的时候，一打开网站，就会让对方大吃一惊，觉得他的网站至少是由上百人做出来的，这位朋友此事会得意一番。但是呢？他这个网站做了三四年，也没赚什么钱，为什么呢？因为他根本不吸引用户，做了两年，每天都还不到200IP。
所以，在设计网页排版的时候，千万不要玩这种自欺欺人的排版设计，特别是一会儿两列，一会儿三列，然后又一列，最后再四列的那种排版.......
其实，就算一个网页内容比较多，但是排版布局不乱，用户一样会觉得比较方便和舒服。如何做呢？
遵循一个核心原则：别让用户总摇头，多让用户多点头。
什么意思呢？
简单一点，要两列，就两列到底，要三列，就算列到底，这样用户从上往下看，一目了然。从上弯下，头必然会点头，就会让用户潜意识不断确认和肯定。
如果一会三列，一会儿四列很乱，结构很乱的话，用火必须让头左右不断转动才能浏览，左右转动就是摇头，摇头就会让用户潜意识不断的拒绝和否定。
我公司的网站，让美工改过N此版，我都不满意，因为设计虽然看上去漂亮，但是和别的公司网站没啥区别，后来不懂图片处理的我，亲自用表格画了一个简单的排版布局，直接做成了网页。一点也不华丽，非常朴素。但是，如果你一登录，必然会立刻会让你觉得与众不同，同时吸引住你的眼球，直白的告诉你我们能免费给你什么，同时有哪些收费服务，让你快速了解我们，转化率很高。
所以，在搞网页设计的时候，建议设计师朋友不要盲目的按照同行或者习惯的形式主义来设计。而是要以用户很中心来设计。针对首页，保持以下几个原则：
1、吸引眼球：让人立刻知道你是干什么的
2、超级导航：让用户能够迅速找到自己需要的信息，导航一定要做好。
3、精华内容：适当把最吸引用户的精华内容展现出来，方便用户和搜索。
网站建设更多详情资料：深圳网站建设https://www.doczj.com/doc/a219008060.html,/wangzhanjianshe/
页面布局目录 .主题———————————————— .页边距——————————————— .分栏———————————————— .行号———————————————— .断字———————————————— .分隔符——————————————— .水印———————————————— .小技巧——————————————— . 【页面布局—主题】 在中，应用地主题决定了文档整体地颜色、字体和各项目地样式选择，如表格、形状和.更改主题会更新文档中这些项目及其他项目地颜色，使文档保持一种协调统一地外观.主题甚至能对文档模板所提供地样式起作用，更改主题将更新样式地字体. 每种完整地“主题”包含种不同地元素. ●主题颜色：控制表格、图形对象和其他文档元素如页眉和页脚中使用地颜色. ●主题字体：控制文档中使用地标题和正文地字体. ●主题效果：控制某些文档元素是否使用效果，如辉光和阴影. 在启用“实时预览”时，可以在对文档应用主题之前先预览出现在库中地主题.要更改主题，请单击功能区上地“页面布局”选项卡，然后在“主题”组中单击“主题”按钮.将
鼠标移动到不同地主题上预览各种应用地外观，然后单击应用此主题.注意在“主题”组中有个附加按钮.它们分别是“主题颜色”、“主题字体”和“主题效果”按钮，使用它们可以更改文档外观地所有因素而不更改整个主题.也可以将“主题颜色”、“主题字体”和“主题效果”地综合设置保存为一个完整地新文档主题，要开始此过程，请单击“主题”按钮，然后单击出现在库底部地“保存当前主题”选项. 【页面设置—页边距】 、在“页面版式”选项卡上地“页面设置”组中，单击“页边距”. 、单击所需地页边距类型.对于常见地页边距宽度，请单击“普通”. 单击所需地页边距类型时，整个文档会自动更改为您选择地页边距类型. 、您还可以指定自己地页边距设置.依次单击“页边距”、“自定义边距”，然后在“上”、“下”、“左”和“右”框中，输入新地页边距值. 注释 要更改默认页边距，请在选择新页边距后单击“页边距”，然后单击“自定义边距”. 在“页面设置”对话框中，单击“默认”按钮，然后单击“是”.新地默认设置将保存在该文档使用地模板中.每个基于该模板地新文档都将自动使用新地页边距设置. 要更改文档中某一部分地边距，请选择相应文本，然后在“页面设置”对话框中输入新地边距，从而设置所需边距.在“应用于”框中，单击“所选文本”. 自动在应用新页边距设置地文本前后插入分节符（分节符：为表示节地结尾插入地标记.分节符包含节地格式设置元素，例如页边距、页面地方向、页眉和页脚，以及页码地顺序.）.如果文档已划分为若干节，可以单击某个节或选择多个节，然后更改页边距. 提供了一些页边距选项.您可以使用默认（默认：预定义设置.可接受默认选项设置，或者可对其进行更改以适合自己地爱好.）页边距，也可以自己指定页边距.添加装订边距使用装订线边距在要装订地文档两侧或顶部添加额外地边距空间.装订线边距有助于确保不会因装订而遮住文字. 、用于装订地装订线边距
设计首页的第一步是设计版面布局： 就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。 布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。你可能注意到：“最适合”是一个不确定的形容词，什么才是最适合的呢？谁也不能，也不可能给您一个完整的正确的答案。就好比有人希望知道成功的秘诀是什么，成功者只能建议您用什么方法，什么途径才能最容易获得成功，而不可能有一步成功的"秘诀"告诉您。 版面布局是一个创意的问题，但要比站点整体的创意容易，有规律的多。让我们先来了解一下版面布局的步骤： 一.草案 新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的"景象"画上去（我们建议您用一张白纸和一支铅笔，当然用作图软件photoshop等也可以）。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。 二.粗略布局 在草案的基础上，将你确定需要放置的功能模块安排到页面上。(注：功能模块我们在"首页设计-引子"中提过，主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等)。注意，这里我们必须遵循突出重点、平衡谐调的原则，将网站标志，
天津渤海职业技术学院教师教案
DIV+CSS布局 二、实例二电子相册 #hphoto { w idth: 500px; b ackground: url(framels.jpg) no-repeat left; h eight: 160px; } #vphoto { w idth: 500px; b ackground: url(framept.jpg) no-repeat left; h eight: 160px; } #hphoto img { h eight: 90px; w idth: 135px; b order: 1px solid #0099FF; m argin-top: 36px; margin-left: 10px; } #vphoto img { h eight: 135px; w idth: 90px; border: 1px solid #0099FF; m argin-top: 10px; m argin-left: 34px; } #hphoto ul,#vphoto ul { l ist-style: none; f loat: left; p adding: 0px; m argin-top: 8px; m argin-left: 15px; f ont-size: 12px; b order: 1px solid #00CCFF; b ackground: #CCFFFF; c olor: #0066FF; } #hphoto li,#vphoto li { b ackground: #CCFFFF; } #hphoto .title,#vphoto .title { b order-bottom: 1px solid #66CCFF; l ine-height: 1.5; p adding-left: 10px; f ont-weight: bold; }
网页的排版与布局网页设计初学者入门攻略 WORD制作：寻找尤娜
网络时代，人本身的因素是相当重要的，只有拥有这方面的一定的审美知识，才有机会做好网页，而真正技术上的东西是不重要的，毕竟技术的发展是使每个使用者使用更加的方便，发展的趋势是让软件成为“傻瓜型”。终极目标就是用鼠标一点就能够使所有的网页完成。所以，我们应该培养自己的审美修养才是最重要的。而真正的体现是在具体的网页的布局上，网页的设计呈现出多样化的趋势，但是万变不离其宗，我想认真的分析一下，可以得到一些有用的东西，在我们应用的时候作为参考。 虽然网页设计拥有传统的媒体的不具有的优势，例如是能够声音、图片、文字、动画相结合，营造一个富有生气的独特世界，同时它拥有极强交互性，使使用者能够参与其中，同设计者相交流。但是最基本的模式还是平面设计的内容，所以平面设计就要考虑形式美的内容，其中网页的排版布局就属于形式的内容，那什么形式呢？ 形。原形，包括原始形，或称自然形。 式。许慎之《说文解字》说：“法也”。它包括“法则”、“法度”、“法制”、有“用法”的含义，也就是一种“格律”。 中国古典建筑形式就称为“法式”。“形”是自然的，“式”是人为的。“形式”是将自然形态经过人为改造而称为一种新的美的形式。自然形态只有通过人的改造，才能起更大的作用，由于这个原因，就形成了今天的审美形态，形象是客观的，形式则是依据客观的规律进行主观的创造。如果没有主观的创造，就没有艺术，也不可能有今天的一切，
当然对于实际的网页制作来说，这也是最基本的，就是主观的创造，因为这是一个网页的灵魂，假如没有自己的主观创造，就只能拾人牙慧，重复别人丢掉不用的东西，是毫无意义的。所以现在强调网页设计的创造，表现在对页面的布局上，具体说就是体现在页面的形式美方面。就是通过页面的合理安排，例如文字的条理清楚、流畅、整体，使形式美得到体现。 首先从网站内容上来进行排版 现在的网站通常具有的内容是文字、图片、符号、动画、按钮等，其中文字占很大的比重，因为现在网络基本上还是以传送信息为主，而用文字还是非常有效率的一种方式，其次是图片，加入图片不但可以是页面更加的活跃，而且可以形象的说明问题。所以按照目前网页的设计，可以有针对性的对这些内容作一些调整，可以得出一些可以借鉴的东西。 既然文字是现在网页传输信息的主要工具，那么就得把页面上主要的部分留给它，这个看似简单的道理却是很多的网站所忽视的，包括一些影响力较大的网站，一味的讲求“美观”，花在形式上的没有具体内容的东西占了很大的比例。主要的文字性的内容却放到下边，结果上网的用户却要难以很舒服的获得信息，有时候要拉动下拉条才能看到整个页面的主要内容。
1.网页的排版布局和原则 2.网页色彩搭配的技巧 一.知识点: 一.网页排版布局的步骤： 1.构思,并且有多个草稿进行粗略布局 2.将粗略布局精细化，具体化 3.修改 二.网页排版布局的原则 1.平衡性 (1)文字、图像等要素的空间占用上分布均匀 (2)色彩的平衡，要给人一种协调的感觉。 2.对称性 对称是一种美，我们生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉， 因此要适当地打破对称，制造一点变化。 3.对比性 让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。例如黑白对比，圆形与方形对比等， 它们往往能够创造出富有变化的效果。 4.疏密度 网页要做到疏密有度，即平常所说的“密不透风，疏可跑马”。不要整个网页一种样式，要适当进行留白， 运用空格，改变行间距、字间距等制造一些变化的效果。 5.比例 比例适当，这在布局当中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调。三常见的布局样式： 1.T字型 最上方是广告条，页面下方左面是菜单，右面显示页面内容，整体上类似英文字母“T”，所以我们称之为T字型布局。这种布局条理清晰、主次分明，非常适合初学者学习，但略微有点呆板。 2.口字型 这种布局类似一个方框，上下是广告条，左面是菜单，右面是友情链接，中间是网页内容，页面布局紧凑、 信息丰富，但四面封闭，给人一种压抑的感觉。 3.对称型 整个网页呈上下或左右对称布局，非常醒目，如果两部分搭配协调，网页的视觉效果非常好，很有冲击力。 4.海报型 这种布局就像我们平时见到的海报一样，中间是一幅很醒目、设计非常精美的图片，周围点缀着一些图片 和文字链接。这种设计常用于一些时尚类和公司的首页，非常吸引人。但大量的运用图片导致网页下载速度很慢，
近几年来，随着科技、计算机技术的迅猛发展和人们生活水平的不断提高。互联网以惊人的发展速度并且越来越深入到人们的生活和工作、学习中。信息的传播形式、内容、数量也在空前的改变着。互联网它凭借着一个崭新的媒介和独特传播形式打破了传统性的、地域性的、经济文化性的阻隔，并且在信息的传播范围和传播速度达到一个质的飞跃。随着互联网的发展，周边的附属品也同时在飞速的发展。而最明显的就是互联网最常用的网络媒介“网页”。网页设计—也开始慢慢上升到一个举足轻重的位置，一个好的网页界面设计小则可以让人赏心悦目，大则可以称之为现代原创艺术的结晶。越来越多的设计师也开始投入到追求网页界面形式美的行列中来。然而设计师们在设计界面的同时却忽略了一个微不足道的，但是却又是至关重要的“微观”元素—网页设计的“细节”处理。它可以让设计师们的界面美观度达到极 致的升华，也可以让界面变得暗淡和乏味。 然而，一个网页设计的“微观细节”都表现在哪里呢?它们要在何时何地出现才能为我们的界面设计带来一个极致的升 华呢?网页设计的“微观细节”主要表现有以下几点： 壹—页面的整体颜色，也可以称之为颜色。 貳—页面的整体布局，也可以称之为排版。 叁—页面的字体元素。也可以称之为字体。 肆—页面的效果元素。也可以称之为效果。 以上四点归纳出网页设计的“细节”主要在以上这些地方着重处理。 页面的整体色彩可以直接反映这个页面对用户的视觉感官，鲜艳的颜色可以给用户一种清新、活泼的视觉感受，然而此 时细节就在于设计师对于色彩与色彩间的把握。 图：
单一的色彩元素也可以给用户带来另一种不同的视觉感受，如：黑白单一色调可以给用户一种稳重、时尚的视觉体验，然而此时细节就在于设计师如何“画龙点睛”打破单一的色彩体系，不让用户感受到压抑的心理。 图：
设计项目都需要遵循以下3个网页版面设计的原则。 一、直观性 所谓直观，指的是在打开的瞬间，用户能够明白这些内容和画面想要传达什么信息。看过之后不知道想要表达什么，或者觉得非常混乱，都是不够直观的表现。这是视觉心理的问题。为了留住读者，设计师需要让版式舒朗而明确，脉络清晰，用户一望而知之。只有让内容的价值为用户所了解，才能让人读下去，愿意了解，才有接下来的转化。 技巧一：图文互补 想要让用户更容易获取信息，需要让图片和文本相互配合，让视觉化的图片来营造氛围，优先传递大概的信息和感受给用户，文本则提供详细而精准的内容，确保信息准确可用。文本也需要尽量轻松易懂。 技巧二：利用信息图 复杂的信息可以借助信息图来呈现，这样可以让不易被人理解的数据和内容，更加视觉化的表达，用户在浏览的时候，可以更加轻松地理解，降低信息理解的门槛，更加直观。 二、易读性 文本内容是绝大多数设计中必不可少的组成部分。文字的编排需要以易读性为原则。字体过小、太密、过多装饰甚至跳跃性地插入页面布局中，都是不易读的表现，也是设计师没
有为读者考虑的结果。在书写机会逐渐减少的现代,易读性是文本内容是最基本要求。文字的可读性要足够强，这不仅与文字的形体有关系,而且和大小、字间距、行间距都密切相关。 技巧一：疏密有致的文字排版 根据风格和需求来选用最易读的衬线体和非衬线体，文字排版比较通常的做法是将行高设置为1.5em- 2.0em，将段间距设定为2.0em，文本对比度为7:1，最小值为4.5:1。每行文本字数不要太多，最好控制在42字以内。 技巧二：清晰连贯的视线流 「视线流」更通俗的叫法是视觉引导，就是整个排版布局有一个相对清晰的阅读顺序和视觉线索，用户不会因为模棱两可的排版而选择错误的阅读顺序。视线流能够让用户下意识、按照顺序来获取信息，更加容易理解其中的内容。 三、美观性 设计作品需要足够漂亮，给人带来美好的感受，这也是版式设计的使命所在。在确保了设计的直观性和易读性之后，就需要解决美观的问题了。为了实现美观性，设计师需要在之前的基础上，考虑设计风格、配色和页面构成等要素了。如果一开始就考虑美观性，很容易造成内容不易读不易懂的问题。不过，值得注意的是，最能够引人注意的主要不是文字，而是视觉效果，请谨记。 技巧一：注重留白的使用
(一)版面设置。 (1.1)单栏和双栏。 在documentclass中的可选项中指定。有两个选项：onecolumn,twocolumn分别表示单栏和双栏。可以使用\setlength{\columnsep}{宽度}来设置两栏之间的间隔。 用\setlength{\columnseprule}{宽度}来设置两栏之间的分隔线的宽度，0则不显示分隔线。 (1.2)单面和双面。 在documentclass中的可选项中指定。有两个选项：oneside,twoside分别表示单面排版和双面排版。 (1.3)版芯设置。 (A)在LaTeX中有如下长度来控制版芯设置： \paperwidth,\paperheight分别表示纸张的宽度和长度。 \textwidth,\textheight \oddsidemargin,\evensidemargin,\topmargin \hoffset, \voffset \headheight,\headsep，\footskip, \marginparsep,\marginparwidth 直接使用\setlength来设置这些值当然可以设置版芯，但是不太方便。 (B)使用geometry宏包(最新版本2002年7月V3.2)。 (B.1)基本概念。在这里，所有的概念要区别于LaTeX定义的各种长度。 paper=total body + margins total body=text body + optional head(页眉),foot(页脚), and marginpar(边注) margins=left,right,top,bottom. paperwidth=left + width + right paperheight=top + height + bottom width = textwidth (+ marginparsep + marginparwidth) ，括号中为可选项。 height = textheight (+ headheight + headsep + footskip) (B.2)geometry部分选项。 (1)页面尺寸。 paper, 例如paper=a4paper为默认。 paperwidth,paperheight,papersize,
第十章第一节网页配色的方法与步骤一、回顾与检查 结合所给网页示例，指出网页组成元素。
二、本节课程 既然大家已经掌握了网页的组成元素都有哪些，现在我们就来学习，如果参照一定的原则，运用恰当的方法，遵循一定的过程来对网页进行布局。 1、网页布局的原则 简洁性：最好用一个简单的关键词语或图像吸引人们的注意力， 醒目易记。另一种方法是限制所用字体的颜色和数目。
一致性：是表现一个站点的独特风格的重要手段之一。保持一致性，可以从三个方面着手：1、页面的排版，使用相同的页边距、文本、图形之间保持相同的间距等；2、页面中的每个元素与整个页面以及站点的色彩和风格上的一致性；3、在字体和颜色的使用上保持和谐的搭配。如图： 好的对比度：使用对比是强调突出某些内容的最有效的办法之一。实现对比的方法有：1、使用颜色的对比，如内容提要使用蓝色，而正文采用黑色；2、使用大的标题，即面积上的对比；3、使用图像的对比。
2、网页布局的方法 纸上布局法： ●选择尺寸：目前一般1024*768像素的分辨率为最通用的浏览模 式，页面的尺寸以其为准； ●选择造型：先在白纸上画出浏览器窗口的矩形，就是布局的范围。 绘制一个向左的弧线，为了取得平衡再在页面右边增加一个矩形。 ●增加页头：在页面的顶部增加一个页头，并让页头与左边的弧线 相交。 ●增加文本：页面的空白部分分别加入文本和图形。因为在页面右 边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调。
●增加图片：图片是美化页面和说明内容必须的媒介，把图片加入 适当的位置。 软件布局法： ●Photoshop在网页布局设计中的作用 先绘制大致布局，再进行细化，分出小模块。 ●Photoshop在网页布局规划中的作用 布局灵活 修改方便 ●用Photoshop设计网页布局应注意的几个问题 网页文档尺寸与分辨率 颜色
网页的排版与布局 叶德辉 很多朋友都想向我学习如何做网页，我知道他们的意思就是说要想向我学习如何用做网页的软件，如dreamweaver、flash、firework、photoshop等等，这些纯技术的东西我不想多谈，因为如今技术的发展一日千里，就是这种应用软件也是发展升级得非常的快。 今天的很多认为是较难实现的功能也许经过软件升级之后就可以很方便的实现。我想强调的是关于网页排版布局方面的必要的知识，很多初学者都忽视这方面，以为技术就能代表一切，能够知道怎么用这个做网页的工具就能够做出质量较高的网页来。其实不然，因为软件知识只是一种工具，就像你有了笔，但不一定能作出好的文章来一样。很多人对技术很熟练但是做出来的网页却通常是照搬人家的东西，并没有体现做网页的水平的提高。 网络时代，人本身的因素是相当重要的，只有拥有这方面的一定的审美知识，才有机会做好网页，而真正技术上的东西是不重要的，毕竟技术的发展是使每个使用者使用更加的方便，发展的趋势是让软件成为“傻瓜型”。终极目标就是用鼠标一点就能够使所有的网页完成。所以，我们应该培养自己的审美修养才是最重要的。而真正的体现是在具体的网页的布局上，网页的设计呈现出多样化的趋势，但是万变不离其宗，我想认真的分析一下，可以得到一些有用的东西，在我们应用的时候作为参考。 虽然网页设计拥有传统的媒体的不具有的优势，例如是能够声音、图片、文字、动画相结合，营造一个富有生气的独特世界，同时它拥有极强交互性，使使用者能够参与其中，同设计者相交流。但是最基本的模式还是平面设计的内容，所以平面设计就要考虑形式美的内容，其中网页的排版布局就属于形式的内容，那什么形式呢？ 形。原形，包括原始形，或称自然形。 式。许慎之《说文解字》说：“法也”。它包括“法则”、“法度”、“法制”、有“用法”的含义，也就是一种“格律”。 中国古典建筑形式就称为“法式”。“形”是自然的，“式”是人为的。“形式”是将自然形态经过人为改造而称为一种新的美的形式。自然形态只有通过人的改造，才能起更大的作用，由于这个原因，就形成了今天的审美形态，形象是客观的，形式则是依据客观的规律进行主观的创造。如果没有主观的创造，就没有艺术，也不可能有今天的一切，当然对于实际的网页制作来说，这也是最基本的，就是主观的创造，因为这是一个网页的灵魂，假如没有自己的主观创造，就只能拾人牙慧? 复别人丢掉不用的东西，是毫无意义的。所以现在强调网页设计的创造，表现在对页面的布局上，具体说就是体现在页面的形式美方面。就是通过页面的合理安排，例如文字的条理清楚、流畅、整体，使形式美得到体现。 从网站内容上来进行排版 现在的网站通常具有的内容是文字、图片、符号、动画、按钮等，其中文字占很大的比重，因为现在网络基本上还是以传送信息为主，而用文字还是非常有效率的一种方式，其次是图片，加入图片不但可以是页面更加的活跃，而且可以形象的说明问题。所以按照
网页排版布局的误区和建议 经常看到许多设计师在设计网站首页的时候，总是喜欢把网页排版搞的很复杂，因为他们觉得这样的设计有以下几个好处： 1、热闹：让用户感觉到自己网站很有人气的样子； 2、大气：因为此类排版是模仿门户网站风格的，所以显得大气和专业。 其实，这是一种自欺欺人的设计，效果只能使得其反。因为： 1、关于热闹： 虽然把排版搞的很复杂，另外加许多花花绿绿的图片看起来很热闹，但是也仅仅是看起来很热闹罢了，对于普通用户而言，他根本不关心这种感觉，用户需要的是快速找到自己需要的信息。打开这样的网页，会让用户找不到重点，会让用户发晕，更会让用户觉得你这个网站没特点，然后很快就关闭你的网站了。 2、关于大气 因为网站之所以那样设计，是有历史原因的，因为早期主要靠卖广告位，而客户就需要买首页，首页搞的很复杂，广告位才能多。你的网站也这样设计的话，你这样模仿门户网站，只能模仿来用户网站首页的形，但是你也搞不来门户网站的流量。 曾经有一个朋友，个人做了一个网站，直接抄袭了三大门户，然后把三大门户某频道整合到了一起，看起来非常大气，每当给朋友介绍自己网站的时候，一打开网站，就会让对方大吃一惊，觉得他的网站至少是由上百人做出来的，这位朋友此事会得意一番。但是呢？他这个网站做了三四年，也没赚什么钱，为什么呢？因为他根本不吸引用户，做了两年，每天都还不到200IP。 所以，在设计网页排版的时候，千万不要玩这种自欺欺人的排版设计，特别是一会儿两列，一会儿三列，然后又一列，最后再四列的那种排版....... 其实，就算一个网页内容比较多，但是排版布局不乱，用户一样会觉得比较方便和舒服。如何做呢？ 遵循一个核心原则：别让用户总摇头，多让用户多点头。 什么意思呢？ 简单一点，要两列，就两列到底，要三列，就算列到底，这样用户从上往下看，一目了然。从上弯下，头必然会点头，就会让用户潜意识不断确认和肯定。 如果一会三列，一会儿四列很乱，结构很乱的话，用火必须让头左右不断转动才能浏览，左右转动就是摇头，摇头就会让用户潜意识不断的拒绝和否定。 我公司的网站，让美工改过N此版，我都不满意，因为设计虽然看上去漂亮，但是和别的公司网站没啥区别，后来不懂图片处理的我，亲自用表格画了一个简单的排版布局，直接做成了网页。一点也不华丽，非常朴素。但是，如果你一登录，必然会立刻会让你觉得与众不同，同时吸引住你的眼球，直白的告诉你我们能免费给你什么，同时有哪些收费服务，让你快速了解我们，转化率很高。 所以，在搞网页设计的时候，建议设计师朋友不要盲目的按照同行或者习惯的形式主义来设计。而是要以用户很中心来设计。针对首页，保持以下几个原则：
网页设计的排版与布局 有些人始终认为，网页最主要是内容，不需要再搞些门面上的东西，还拿出MUD来比喻。可是，红花还需要绿叶陪衬。想想，若MUD不只是单纯的文本，还有画面出来，那么，它所吸引的何止现在的这些MUD迷呢？那么，我所要说的到底是什么呢？初学者如果能够了解一些设计上的东西，那么，自己的页面不会显得乱，自己看了也开心，别人看了也开心，何乐而不为呢？ 我们的主页，说到底，只是一个800*600的画面，那么，我们要怎么对它进行安排才合理呢？首先，也是最重要的一点，就是先停下创作，先想好一个主题?quot;设计，是一种有目的的创造"。若在动手之前并不了解自己将要做什么及要怎么做，而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话，那么，最终做出来的东西最多局部看得觉得挺不错的，但全局就显得太复杂了。页面上的构成，如果要让别人一眼望去觉得很BEAUTIFUL，这里面实际上是有很大的学问的。 我们先来说说构成，"构成：是将造型按视觉效应、视觉力学和精神力学等原则组成的，具备美好形态的造型"。构成形式里，有空间构成（平面构成和立体构成）和时间构成（静和动）。我们的创作，就是要协调这里面的种种关系，顺应视觉感受，才能够打动观看者的视觉，得到我们想要的效果。在这些形形式式里，都有着如下的部件：点：我们一般认为，点是指圆形的，但这是不正确的。只要在空间里有非常少量的面积，无法形成一个视觉上感觉的图形，都是一个点。无论什么形状都可以。线：点集合在一起就形成线。面：一个平面。体：一个物体。一般是指物体占据的空间，有三维形状。
那么，当点、线、面与体集结在一个页面上时，它们的关系要怎么协调呢？它们之间都有什么作用呢？ 点有集中视线、紧缩空间、引起注意的功能。两个点相距不远而且形状不等时，一般由小向大看。近距离的点引起面的感觉。灵活运用点，可使你的页面有一些本质上的变化。当点占据不同的空间时，它所引起的感觉是不同的。 （1）居中引起视觉集中注意。 （2）上引起下跌落感。 （3）在上左或上右引起不安定感。 （4）下方中点，产生踏实感。 （5）左下右下，增加了动感。 为什么会这样呢？因为人的视觉，都是经过对生活的感觉都得来的。在下方的东西，一般联想到大地。在上方的东西，一般联想到浮云。线、面、体亦然。 线，又分为直线和曲线。直线：给人以速度，明确而锐利的感觉，具男性感。曲线，则优美轻快，富于旋律。曲线的用法各异，需结合自己的需要。而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔，具踏实感。垂直线则有强烈的上升及下落趋势，可增加动感。斜线，一般我没有怎么使用，因为它造成视觉的一种不安定。 人们每看到一个东西，都试图用横直来分析，斜、歪是人们所不愿意见到的，但适当运用这个要靠个人的感觉。面，指的是二度空间里的形。面又分为几何形和任意形，我个人比
[ 标签 :标题 ] 篇一：设计师必备的字体排版工具及资源下载 设计师必备的字体排版工具及资源下载我们喜欢漂亮的字体，欣赏那些想出排版技巧和工具的设 计师们。我们总是在小心翼翼地寻找资源，试图找到最好的来使用。现在，是时候呈现出一组漂亮新鲜的排版资源了。为了改善你的排版技巧，我们在这里提供排版相关的有用文章、工具和资源。你将 学习基础的排版 ,知道如何选择字体并记住它们。这里还提供字体排版相关的幻灯片、词汇 表、图表布局和经验分享。 排版相关的参考文献和有用资源 The Taxonomy of Type 本文的目的是帮助设计师区分基本文字的属性。它解释了文字种类并且提供相应的例子。 这是短小精悍的好文章。 Typedia:一个字体中的共享百科全书 Typedia是一个对各种字体进行分门别类的百科全书，它的连接性很强大。这是一个专门针 对字体进行分类并且告诉人们相关知识的社区网站，很像和维基百科的混合衍生物，但是只是针对文字类型而已。 IMDb 每个人都可以参与进来，添加、编 辑新的字体类型页面。 Typeface Anatomy and Glossary 很多字体都有各自的名称缩写。有一些是关于符号集和字体格式的，另外一些是关乎设计特 质和铸造工程的等等。这些缩写及其释义可以让我们从解压缩的排版中找到一份全面的清单。Typographic Marks Unknown 我们往往对很多印刷标记很熟悉，但对其本身却只是一知半解。这些字形拥有很有趣的演变 历史，它们通过历史的”严刑拷打”终于幸存下来，最终被我们广泛地使用。现在，它们 大多出现在我们的键盘、软件，和一些经常使用的地方，因此我们有必要知道它们的历史渊源 以及如何使用它们。 Periodic Table of Typefaces 一个最受欢迎的字体分类参考。 Fonts for iPad& iPhone 这是一个专门可用在iPhone, iPod Touch 和 iPad 的字体分类参考。 Font Anatomy (Wallpaper) 一个对排版微妙之处不错的概述。你对”arm”和” beak”有何了解？让时间告诉你。Typographic Rules Checklist (PDF) 一个很有用的排版清单，不仅仅告诉你一些基本的排版规则和指导，更让你从中得到项目 所需的字体。 Typography Checklist (PDF) 由 Jason DewinetzIf 编制的一个关于排版核查的列表。 打印之前先做一个周到的考虑。篇二：排版技巧 它或许会让你在新项目开始或者出书 点的感觉是相对的，它是由形状，方向、大小、位置等形式构成的。 这种聚散的排列与组合，带给人们不同的心理感应。点可以成为画龙点睛之“点”，和其他
网页设计中排版与布局小基础 有些人始终认为，网页最主要是内容，不需要再搞些门面上的东西，还拿出MUD来比喻。可是，红花还需要绿叶陪衬。想想，若MUD不只是单纯的文本，还有画面出来，那么，它所吸引的何止现在的这些MUD迷呢？那么，我所要说的到底是什么呢？初学者如果能够了解一些设计上的东西，那么，自己的页面不会显得乱，自己看了也开心，别人看了也开心，何乐而不为呢？ 我们的主页，说到底，只是一个800*600的画面，那么，我们要怎么对它进行安排才合理呢？首先，也是最重要的一点，就是先停下创作，先想好一个主题。"设计，是一种有目的的创造"。若在动手之前并不了解自己将要做什么及要怎么做，而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话，那么，最终做出来的东西最多局部看得觉得挺不错的，但全局就显得太复杂了。页面上的构成，如果要让别人一眼望去觉得很BEAUTIFUL，这里面实际上是有很大的学问的。 我们先来说说构成，"构成：是将造型按视觉效应、视觉力学和精神力学等原则组成的，具备美好形态的造型"。构成形式里，有空间构成（平面构成和立体构成）和时间构成（静和动）。我们的创作，就是要协调这里面的种种关系，顺应视觉感受，才能够打动观看者的视觉，得到我们想要的效果。在这些形形式式里，都有着如下的部件：点：我们一般认为，点是指圆形的，但这是不正确的。只要在空间里有非常少量的面积，无法形成一个视觉上感觉的图形，都是一个点。无论什么形状都可以。线：点集合在一起就形成线。面：一个平面。体：一个物体。一般是指物体占据的空间，有三维形状。 那么，当点、线、面与体集结在一个页面上时，它们的关系要怎么协调呢？它们之间都有什么作用呢？ 点有集中视线、紧缩空间、引起注意的功能。两个点相距不远而且形状不等时，一般由小向大看。近距离的点引起面的感觉。灵活运用点，可使你的页面有一些本质上的变化。当点占据不同的空间时，它所引起的感觉是不同的。（1）居中引起视觉集中注意。 （2）上引起下跌落感。 （3）在上左或上右引起不安定感。 （4）下方中点，产生踏实感。 （5）左下右下，增加了动感。 为什么会这样呢？因为人的视觉，都是经过对生活的感觉都得来的。在下方的东西，一般联想到大地。在上方的东西，一般联想到浮云。线、面、体亦然。 线，又分为直线和曲线。直线：给人以速度，明确而锐利的感觉，具男性感。曲线，则优美轻快，富于旋律。曲线的用法各异，需结合自己的需要。而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔，具踏实感。垂直线则有强烈的上升及下落趋势，可增加动感。斜线，一般我没有怎么使用，因为它造成视觉的一种不安定。 人们每看到一个东西，都试图用横直来分析，斜、歪是人们所不愿意见到的，但适当运用也可以达到一些特殊效果。这个要靠个人的感觉。面，指的是二度空间里的形。面又分为几何形和任意形，我个人比较喜欢任意形，因为它往更具人情味。几何形使人有一些机械感，但是，每一个图形里都会要用到
如何在网页设计中排版与布局 有些人始终认为，网页最主要是内容，不需要再搞些门面上的东西，还拿出MUD来比喻。可是，红花还需要绿叶陪衬。想想，若MUD不只是单纯的文本，还有画面出来，那么，它所吸引的何止现在的这些MUD迷呢？那么，我所要说的到底是什么呢？初学者如果能够了解一些设计上的东西，那么，自己的页面不会显得乱，自己看了也开心，别人看了也开心，何乐而不为呢？ 我们的主页，说到底，只是一个800*600的画面，那么，我们要怎么对它进行安排才合理呢？首先，也是最重要的一点，就是先停下创作，先想好一个主题?quot;设计，是一种有目的的创造"。若在动手之前并不了解自己将要做什么及要怎么做，而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话，那么，最终做出来的东西最多局部看得觉得挺不错的，但全局就显得太复杂了。页面上的构成，如果要让别人一眼望去觉得很BEAUTIFUL，这里面实际上是有很大的学问的。 我们先来说说构成，"构成：是将造型按视觉效应、视觉力学和精神力学等原则组成的，具备美好形态的造型"。构成形式里，有空间构成（平面构成和立体构成）和时间构成（静和动）。我们的创作，就是要协调这里面的种种关系，顺应视觉感受，才能够打动观看者的视觉，得到我们想要的效果。在这些形形式式里，都有着如下的部件：点：我们一般认为，点是指圆形的，但这是不正确的。只要在空间里有非常少量的面积，无法形成一个视觉上感觉的图形，都是一个点。无论什么形状都可以。线：点集合在一起就形成线。面：一个平面。体：一个物体。一般是指物体占据的空间，有三维形状。
那么，当点、线、面与体集结在一个页面上时，它们的关系要怎么协调呢？它们之间都有什么作用呢？ 点有集中视线、紧缩空间、引起注意的功能。两个点相距不远而且形状不等时，一般由小向大看。近距离的点引起面的感觉。灵活运用点，可使你的页面有一些本质上的变化。当点占据不同的空间时，它所引起的感觉是不同的。 （1）居中引起视觉集中注意。 （2）上引起下跌落感。 （3）在上左或上右引起不安定感。 （4）下方中点，产生踏实感。 （5）左下右下，增加了动感。 为什么会这样呢？因为人的视觉，都是经过对生活的感觉都得来的。在下方的东西，一般联想到大地。在上方的东西，一般联想到浮云。线、面、体亦然。 线，又分为直线和曲线。直线：给人以速度，明确而锐利的感觉，具男性感。曲线，则优美轻快，富于旋律。曲线的用法各异，需结合自己的需要。而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔，具踏实感。垂直线则有强烈的上升及下落趋势，可增加动感。斜线，一般我没有怎么使用，因为它造成视觉的一种不安定。 人们每看到一个东西，都试图用横直来分析，斜、歪是人们所不愿意见到的，但适当运用这个要靠个人的感觉。面，指的是二度空间里的形。面又分为几何形和任意形，我个人比