导读：文中所谓8种网页布局技巧并不是整个页面的设计布局，而是针对网页中某一部分的设计，比如导航，按钮，选项卡等经常会出现在网页中的一些设计方式。
网页设计中，内容组织恐怕是最至关重要、最影响设计品质的方面了。如何将信息组织到好的布局中，是一个网站的基础，并且应该在考虑外观之前就决定好。没有好的布局，网页信息流就不能正确传递，所有东西都不能建立起合理的联系。
在这篇文章中，我们将讨论八个布局解决方案/技巧，这些方案和技巧将有助于你创建整洁有序的内容布局。这八个技巧包括：滑门(sliders)、标签式、渐进布局(progressive layouts)、结构网格、模态窗口(modal window)、翻转元素、手风琴效果(accordions)以及超大下拉菜单(mega drop-down-menus)。
1. 滑动样式与传送带(Sliders and Carousels)
滑门(Sliders)，也可称为传送带(carousels)，是一种有序的、交互性强、十分平滑地展示内容的方式。滑门样式是一个非常流行的技巧，大家都觉得它很好用，能让你在固定的区块内填充上大量内容。没有滑门的帮助，这些内容可能就要分开放到页面中的各个地方。而大多数时候，你在使用页面空间时总是捉襟见肘。或者，有些内容是你希望“用户要求”后才出现。这有助于让用户一次只关注一个内容区块，也符合他们自己的便利需求。
滑门样式的实例
导航区提供缩略图与图标
运用滑门和幻灯样式时，最好在导航区提供图标或缩略图，以便使导航更加简单直观。缩略图和图标给用户指出明路，向他们解释当前所在位置，以及有哪些浏览选项可供选择（比如说幻灯片的导航可以是水平的，也可以是垂直的）。另外，还能方便他们快速选择特定滑门页。
Coda网站的滑门顶部设计了标签卡，他们使用的是“滑动门+标签卡”的混合样式。这个主意绝顶聪明，因为通过看缩略图，用户就能快速得知特定滑门页的内容。而且，这些图标也提供了强大的、令人印象深刻的、干净整洁的视觉支持。除了图标和标签你也可以在标题前加上小图片，或者只用数字也行。
用于展示产品的滑门样式
与上面的例子对应，滑门不仅能用于大容量信息的组织，也能为用户浏览大量产品条目提供方
便。SourceBits (见下图)使用了多层滑门（一个水平的，一个垂直的），用唱片封面作为导航条目。
水平滑门两端都有大的圆形箭头图标，实时反映左右导航的可用性。滑动的时候有平滑的动画，用起来非常舒服。同时，你也能看到，各个元素间距都精心设计过，这有助于内容组织，也提升了可用性。鼠标滑过时，每个条目还有漂亮的聚光灯效果。
垂直滑动的内容以及超大的水平“点击条”
接下来看看QuickSnapper的滑门。这是一个完美融入页面整体布局的十分好用的垂直滑门。滑门内容中有大量截屏图，内容被有序地组织起来。这个滑门最赞的地方就是上下方的按钮导航。按钮宽及整个滑门，大的按钮让“推拉”滑门更加容易。
还有，这些按钮的:active和:focus效果也很漂亮。
滑门脚本
你可以参考下面的脚本、技巧和教程制作你自己的滑门：
?Slick Accessible Slideshow using jQuery
?Coda-Slider 1.1.1
?jquery.scrollable 1.0.2
?Create an Amazon Books Widget with jQuery and XML
?Agile Carousel
?Easy Image or Content Slider
?Slider Gallery
?Coda Slider Effect
?iCarousel
2.标签卡导航元素
本质上标签卡导航和滑门效果是差不多的技巧。它们都能帮你把一大片内容放到一小块区域里。标签卡导航很常见，但也有很多不常见的运用方式。我们这里关注的是在一个页面内部的标签卡，而不是用于在不同页面之间跳转的标签样式主导航。标签卡很明显地将内容划分到不同区块，最终又把他们融合到占地面积很小的一个区块中。
标签卡的样式范例
出众的背景，大的可点击区域，明显的分割
第一个例子来自Mac Pro网站的“Performance”部分，其标签元素的组织非常值得学习。这些标签卡上的文字都十分易读，可点击区域很大，各标签视觉上的区分也很明显，这正是大部分用户期待的样式啊。你也应该能注意到，当前标签卡上还有着十分微妙的渐变背景，与主内容区块很好地融合在了一起。未激活的标签背景则略暗，主内容区块在其上有微弱的投影，这种做法加强了深度感和立体效果。十分简单而有效的技巧。
按钮区分的简洁标签卡
以下是另一个利用标签卡紧凑地展示信息的实例。根据Atebits的布局结构，介绍性内容的空间被挤压，不太适合做成多区块样式。所以他们介绍内容的三大部分被组织到了标签中，保持了布局的整洁有序。再一次地，当前标签卡的背景与主内容区融合，不活动标签卡则是较暗的灰色背景。你同样也会发现标签卡之间有着漂亮的分割线，使得每个标签卡看起来都像是独立的按钮。
为整个标签集提供清晰的分割线
Fontcase的标签卡设计也很精妙，很有现代感。尽管在未激活标签之间没有分割线，当前标签却有明显的边线。你也能注意到，在整个标签集的上方和下方各有一条边线。标签卡使用了图标与留白来突出文字，提高了易用性。
标签卡效果脚本
?Create a Slick Tabbed Content Area using CSS & jQuery
?JavaScript tabifier
?Yetii - A JavaScript Tab Interface
?Tabbed Page Interface
?Updated JQuery Nested Tab Set
?Scriptaculous Tabs
?Accordian Tabs
3. 模态窗口
模态窗口（Modal windows），或者称为浮窗，一般用于在空间紧张的页面中展示额外信息。在模态窗口中，你可以放置放大版的图像、额外内容、警告/提示信息、视频等等。用模态窗口展示信息时，记得要同时明确地提示用户如何关闭它。
同时，用于打开模态窗口的链接、缩略图、图标或者其他图形元素，一定要保证与模态窗口要展示的内容有足够的关联。相似的图标、摘要、图形元素都能帮助用户建立原始链接与打开的窗口的联系。
模态窗口的例子
运用到登录和注册流程中的浮窗
模态窗口最典型的运用就是登录／注册窗口了（与诸如图像、音频、视频、Flash等“传统”媒体文件相比）。登录和注册表单不是用户每次浏览页面都要用到的必要部分，所占页面空间理所应当被节约下来。
而使用浮窗，则又为用户省去了重开一个页面的时间，毕竟这只是一个很简单的非常用动作。他们能在网站的任何页面中登录/注册，而不用中断现有流程——只要网站的设计者能提供基于Ajax的“静悄悄的” 登录/注册。
Grooveshark整个站点的每一个页面中，这个漂亮的登录窗口都触手可及。注意，点击登录（Lodin> ）按钮后并不会载入一个新页面，而是直接把注册表单替换成了登陆表单（使用了手风琴效果）。非常方便，非常友好的用户界面。
消隐页面/使用投影
如果要使用模态窗口，让窗口下面的页面淡出焦点十分重要。你可以用半透明背景覆盖或者为窗口添加投影，或者两者结合。这么做有两个作用：一是能让用户将注
意力集中到浮窗上，然后暂时忽视掉背后的页面。另外，也能增加窗口和页面之间的深度感和区分度，让人在视觉上觉得这窗口确实是漂浮着的。注意看下面的例子(KissMetrics)，半透明的黑色背景让页面消隐，有助于登录浮窗暂时成为视觉重点。另外，取消和关闭窗口的按钮也设计得很好，够明显，够漂亮。
RealMacSoftware的浮窗只做了投影，而没有让整个页面消隐。只要深度感和区分度做得足够，这样也很有效。
模态窗口的脚本
Fancy Lightbox
?Lightbx 2
?Facebook Image/Content Viewer
?Woork Mootools Lightbox
?nyroModal JQuery Plugin
?JQuery Alert Dialog
?LightWindow
?ThickBox 3.1
4. 翻转元素Rollover Elements
翻转元素目前被越来越多地运用于商业网站、作品集站点和产品展示页。翻转元素的核心概念就是当用户鼠标移到某个按钮或网页元素上时，处于另一个布局区域的元素就自动显示出来。请看下面的例子深入了解我说的“翻转元素”究竟是什么。
翻转实例
标签卡翻转
下图是Miro主页的截屏，他们设计了一个十分精妙的巨大翻转元素。这本质上和滑门类似——只不过内容切换时不需要点击罢了。
小地方的微妙翻转
TaoEffect向我们完美展示了如何通过设计精巧漂亮的翻转元素来添加清爽整洁的额外信息（这种效果最早是应用于前文提到过的Coda网站，但我们选择了TaoEffect作为这一节的实例）。信息的展示十分友好，您只需要把鼠标移到按钮上即可。
访问网站你会发现，翻转时有非常轻柔的动画，垂直跳动+ 淡入淡出。你应该也能注意到它的背景是半透明的，跳出来的卡片边缘还有高光和投影，与背景很好的区分开来。
内容地图上的翻转元素
OneHub则利用翻转元素实现了另一种效果。这个页面有点像地图，在不同区域做出了标注。鼠标移到标注上时，会显示该标注的额外信息。这种方法用在需要分区域详细解释的产品介绍页上将有特效。
与幻灯切换结合的翻转元素
另一个蛮有趣的设计来自SquaredEye——他们在导航按钮上用翻转元素来展示下一页内容的预览图。
小提示/翻转元素的脚本
?Prototip 2
?Coda Popup Bubbles
?Build a Better Tooltip with jQuery Awesomeness
?jQuery plugin: Tooltip
?Create a Simple, Powerful Product Highlighter with MooTools
?Easiest Tooltip and Image Preview Using jQuery
5. 渐进布局Progressive Layouts
“渐进布局”的意思是站点内容按照一定的顺序一块一块地显示给用户。这种组织内容的做法比较反常，但也能在很多网站上看到。渐进布局能帮助用户更容易地深入一长串信息。
渐进布局的实例
整个站点都由渐进布局构成
https://www.doczj.com/doc/ee12209037.html,（貌似被墙，请点击这里代理访问）的整个作品集站点都基于渐进布局。您应该能注意到，页面右上角有一个“GO”按钮，每一页面都是从上一页面中的GO按钮链接过来的。这种页面之间的渐进系统代替了传统的导航和菜单。当然，这样做也有一个很明显的缺点：导航的交互性下降了，用户只能按照网站建设者想要的顺序获取内容。
尽管单个页面布局能被存为书签（使用# 锚记），但对于随机访问者来说，则无法通过一个明晰的导航对站点内容建立起直接的整体感知。而且，这种布局一般只有一个“航向”，从易用性的角度上来说，所谓“导航”的概念在这里几乎不能适用。
译注：以前看到过一个十分类似，但是更漂亮的站点。现在一时找不到了…… 有谁知道是哪个？麻烦留言告知一下。
垂直方向的渐进布局
Danny Blackman的作品集也是仅通过一张渐进式布局页面来实现的。各块元素相互独立，在一张页面上垂直展示。相邻元素之间有滚动按钮，每个元素都有返回顶部的按钮。菜单或所谓导航还是没有被使用。
ScrollTo 脚本
ScrollTo - 使用这个jQuery插件，就能轻松建立渐进式布局。
6. 网格
讨论布局的文章是不可能避开网格不谈的。网格通常被认为是任何平衡、有序、简练的网页布局的基础。很多设计师都认为网格是处理信息容量很大的页面时
的必备武器。有时候单独使用网格就能很好的展示信息，甚至不需要其他技巧。好的网格能够将一个页面中的全部内容都整合进流动布局里，而内容的可读性，或者
如果用户想快速浏览，都不会受到影响。
下面的网站使用了严格的网格布局。整个站点只有一张页面，需要融入大量信息。不过，全部信息被整合进这整洁的两栏布局网格中。整个布局严谨、强健、稳固，留白恰到好处。浏览或仔细研读内容都非常方便。
使用不同背景区分网格区域
使用网格一般是因为你需要在一个很紧凑的区域内放置大量内容。你想要创建整洁有序的网站布局，但是又不能随意添加很多留白来区分区块。如此的话，你就需要使用不同背景来区分网格区域。没了网格间的大量留白，只要网格内还有少量的内边距，也可以看起来很不错。https://www.doczj.com/doc/ee12209037.html,就用了这种战术，尽管已经有一条细线来分割网格区域，背景色的差异还是被用到，以提供更明显的区分。
网格生成器、模版和更多工具
?Grid System Generator
?Variable Grid Systems Generator
?960 Grid System
?Grid Designer
?Grid Calculator
?50 Useful Design Tools For Beautiful Web Typography (including grid-resources)
7. 手风琴效果（折叠菜单）
折叠菜单和滑动门以及标签卡涉及同一个概念：把大量信息压缩到一小块区域里。“手风琴效果”指的是一些被水平或垂直组织的区块，通过点击，一个内容区块滑向另一个区块，并将其内部内容展示出来，和手风琴的推拉过程有点相似。
手风琴效果的实例
功能性和大点击区域
Alex Cohaniuc
的手风琴菜单设计的很好。把作品项目藏到手风琴里是的做法其实挺有道理的，因为这能把每个项目的不必要信息隐藏起来，等访客有需要的时候再显示。说这项设
计好是因为：一，每块画布的标题都很大，很好点击；二，每块标签卡都使用了一个小箭头来反映开合状态；三，鼠标滑过时，当前标签卡有将它区分出来的不同背
景色。
水平内容滚动
Jason Reed
使用手风琴将整个站点糅合进一张页面里。他没有赋予手风琴以特别不一般的视觉特征，而是让它融入了页面之中。另外，这是一个水平方向推拉的手风琴（尽管标
签卡是垂直方向的）。请注意看他的标签卡，每个标签卡之间的距离很大，这些标签卡，或者说标题，并不像上一个例子有那么明显的区分，设计师利用了留白来将
它们各自独立。鼠标移上去的时候，这些十分易读的标签就会变成橙色，让用户能够非常明确地了解到自己将要点击的标签后面都有什么。
包含图像和信息的手风琴
Marius Roosendaal
使用另一个非常漂亮的手风琴来“储藏”他的作品图像。与上面两个例子一样，每一个内容区块都是一个项目的展示。不过，此例的手风琴里的每个图像还附加有一
些文字介绍。你能注意到一个小按钮被用来显示/隐藏介绍。他同时也提供到更详细介绍或者更大预览图的链接。在一个小小的手风琴里当然不能塞进特别特别多的
信息，所以如果可以的话，还是尽量给每个项目都加上到详细内容的链接吧。
手风琴脚本
?Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
?https://www.doczj.com/doc/ee12209037.html, Downoads Page Slide out and drawer effect
?UI/API/1.7.1/Accordion jQuery Plugin
?jQuery UI Accordion
?Simple JQuery Accordion menu
?jQuery Accordion Madness
?jQuery Examples - Horizontal Accordion
8. 超大下拉菜单
导航不一定非得是几个简单的超链接组合。最近，导航设计有一个流行趋势：不仅仅提供“航向”选择，也提供网站内各“终点站”位置以及“终点站”之间
的从属关系。所谓“超大”下拉菜单常见于电子常务网站，用于展示他们庞杂的商品分类。这种样式正成为设计趋势，因为它能通过普通的翻转就提供大量分类信
息，而不需要用户额外的点击。
超大下拉菜单的实例
超大下拉菜单的一个经典例子是Ruby On Rails Guide的Guide Index。这个菜单提供了一个组织良好、样式精美的二级导航。注意，与一般的做法不同，激活二级菜单需要用户点击，Guide Index右边有“切换” 图标，并且有着与将要弹出的二级菜单相融合的背景色。弹出的二级菜单也有细微的投影。
译注：这站点在IE的Quirks模式下有显示异常……（话说显示不异常的页面还基本上没有……）下面的截图里的投影，我也看不到……
带更多信息的多级菜单
Porsche
对于上面说到的技巧来说，简直是一个完美的例子。Porsche
的主页提供一个多级菜单，让用户不用一次点击就能快速了解他们生产的所有汽车。第三级菜单中，所选汽车的信息被直接提供：包括图片、许多链接、以及其他关于本车的快读信息。当然，这个更大的区块就是一个巨大的可点击区域。所有细节和特别介绍都直接链到相应页面。要了解究竟是怎么回事，就点击下面的图片自己去看看吧！
在下拉列表里显示搜索结果
最近还比较流行的一个技巧和上面谈到的有点类似：在下拉列表里显示搜索结果。Media Temple Knowledge Base就使用了这一技巧。他们没有使用一个新页面来显示用户的搜索结果，搜索结果在一个下拉列表里随着你的输入而实时变化。不过，请注意，完整搜索结果页的链接仍然存在，您若要在自己的设计中使用这种设计，还请不要忘记这一点。
在下拉区块中显示额外信息
https://www.doczj.com/doc/ee12209037.html,
继续登场。你能看到他们在顶部菜单中使用了超大的下拉区块来展示产品。下拉区块中的产品排列组织得非常好，图片提供了强健的视觉支持。这个菜单还提供了诸
如价格和屏幕尺寸等额外信息，让顾客能够在查看具体页面之前就有所选择。因为很多人都很关心产品价格——至少对于很多有购买需求的人来说。
页面布局目录 .主题———————————————— .页边距——————————————— .分栏———————————————— .行号———————————————— .断字———————————————— .分隔符——————————————— .水印———————————————— .小技巧——————————————— . 【页面布局—主题】 在中，应用地主题决定了文档整体地颜色、字体和各项目地样式选择，如表格、形状和.更改主题会更新文档中这些项目及其他项目地颜色，使文档保持一种协调统一地外观.主题甚至能对文档模板所提供地样式起作用，更改主题将更新样式地字体. 每种完整地“主题”包含种不同地元素. ●主题颜色：控制表格、图形对象和其他文档元素如页眉和页脚中使用地颜色. ●主题字体：控制文档中使用地标题和正文地字体. ●主题效果：控制某些文档元素是否使用效果，如辉光和阴影. 在启用“实时预览”时，可以在对文档应用主题之前先预览出现在库中地主题.要更改主题，请单击功能区上地“页面布局”选项卡，然后在“主题”组中单击“主题”按钮.将
鼠标移动到不同地主题上预览各种应用地外观，然后单击应用此主题.注意在“主题”组中有个附加按钮.它们分别是“主题颜色”、“主题字体”和“主题效果”按钮，使用它们可以更改文档外观地所有因素而不更改整个主题.也可以将“主题颜色”、“主题字体”和“主题效果”地综合设置保存为一个完整地新文档主题，要开始此过程，请单击“主题”按钮，然后单击出现在库底部地“保存当前主题”选项. 【页面设置—页边距】 、在“页面版式”选项卡上地“页面设置”组中，单击“页边距”. 、单击所需地页边距类型.对于常见地页边距宽度，请单击“普通”. 单击所需地页边距类型时，整个文档会自动更改为您选择地页边距类型. 、您还可以指定自己地页边距设置.依次单击“页边距”、“自定义边距”，然后在“上”、“下”、“左”和“右”框中，输入新地页边距值. 注释 要更改默认页边距，请在选择新页边距后单击“页边距”，然后单击“自定义边距”. 在“页面设置”对话框中，单击“默认”按钮，然后单击“是”.新地默认设置将保存在该文档使用地模板中.每个基于该模板地新文档都将自动使用新地页边距设置. 要更改文档中某一部分地边距，请选择相应文本，然后在“页面设置”对话框中输入新地边距，从而设置所需边距.在“应用于”框中，单击“所选文本”. 自动在应用新页边距设置地文本前后插入分节符（分节符：为表示节地结尾插入地标记.分节符包含节地格式设置元素，例如页边距、页面地方向、页眉和页脚，以及页码地顺序.）.如果文档已划分为若干节，可以单击某个节或选择多个节，然后更改页边距. 提供了一些页边距选项.您可以使用默认（默认：预定义设置.可接受默认选项设置，或者可对其进行更改以适合自己地爱好.）页边距，也可以自己指定页边距.添加装订边距使用装订线边距在要装订地文档两侧或顶部添加额外地边距空间.装订线边距有助于确保不会因装订而遮住文字. 、用于装订地装订线边距
网页常见布局 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。 1、“国”字型： 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到最多的一种结构类型。 2、拐角型： 这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下
面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 3、标题正文型： 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。 4、左右框架型： 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。 5、上下框架型： 与上面类似，区别仅仅在于是一种上下分为两页的框架。 6、综合框架型：
上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。 7、封面型： 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 8、Flash型： 其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
顺德区胡宝星职业技术学校公开课教案 教师: 杨海隆2010 年10 月12 日计算机092 班 1 节 课题色彩搭配在网页中的应用 课型理论课课时1学时 教学目的1．知识与技能：色彩带给人们的情绪变化，培养学生对 色彩感知能力 2．过程与方法：使同学掌握网页色彩搭配的一般原则教学重点掌握网页色彩搭配的一般原则 教学难点如何合理用色彩搭配网页 教具计算机，dreamweaver软件 教学方法讲授、提问、讨论、总结 教学过程一、引入新课 1．提问：我们每天早上起床第一眼看到的是什么东西？ 2、利用一个关于色彩的实验，让同学们感受到色彩的神 奇，激起同学们的学习兴趣，活跃课堂气氛。二、讲授新课 1．如何确立网站色调 1）一般原则 向同学们展示实例 讨论总结：在制作政治题材时，可以使用红色为主色调，在制 作环保题材时，可以使用绿色为主色调。 2）色彩情感 色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以 在设计网页时形成自己的独特效果，给浏览者留下深刻的印象。 一般情况下色彩给人的感觉如下： A:红色代表热情、活泼、热闹、温暖、幸福、吉祥 B：黄色代表明朗、愉快、高贵、希望 C：绿色代表新鲜、平静、和平、柔和、安逸、青春 D：蓝色代表深远、永恒、沉静、理智、诚实、寒冷 E：紫色代表优雅、高贵、魅力、自傲
F：白色代表纯洁、纯真、朴素、神圣、明快 J：灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 H：黑色代表崇高、坚实、严肃、刚健、粗莽 2．网页配色的技巧 通过实例演示，同学讨论 讨论总结：a：如果在网页中使用一种主色调，其他颜色应是由 主色调派生出来的 b：如果要使用两种色彩，这两种颜色最好是互为对 比色 C：如果用多种色彩，两种颜色最好是同一个色系3．注意的事项： A：不要将所有颜色都用到，尽量将颜色控制在一定范围之内 B：背景和前文的对比尽量要大些，不要使用繁复的图像作背景，以便突出主要的文字内容 4. 同学们启动软件然后根据自己的颜色喜好，搭配网页色彩。使用自 己的网页三、巩固新课 A：色彩情感的培养 B：掌握了简单的网页配色技巧 四、布置作业 同学们写出自己网站的配色方案 五、教学后记 评讲意见： 教务主任意见： 参加听课人 学校盖章年月日
网页设计配色方案－基本色 配色方案一（紫色）： 版面表格边框颜色#983498 版面标题表格颜色#d890d8 版面内容表格颜色1 #f8dcf8 版面内容表格颜色2，颜色1和颜色2在bbs风格中互相穿插排列#fff0ff 版面标题表格字体颜色#602060 版面内容表格字体颜色#602060 提醒语句颜色#602060 配色方案二（粉色）： 版面表格边框颜色#f00078 版面标题表格颜色#ff98do 版面内容表格颜色1 #ffe8f0 版面内容表格颜色2，颜色1和颜色2在bbs风格中互相穿插排列#fff6fc 版面标题表格字体颜色#602060 版面内容表格字体颜色#602060 提醒语句颜色#602060 配色方案三（果绿色）： 版面表格边框颜色#507010 版面标题表格颜色#a0dc40 版面内容表格颜色1 #e8f8d0 版面内容表格颜色2，颜色1和颜色2在bbs风格中互相穿插排列#f8fcf0 版面标题表格字体颜色#003300 版面内容表格字体颜色#003300 提醒语句颜色#309478 配色方案四（深绿色）： 版面表格边框颜色#288058 版面标题表格颜色#88d8b0 版面内容表格颜色1 #e0f4e8 版面内容表格颜色2，颜色1和颜色2在bbs风格中互相穿插排列#f0f8f0 版面标题表格字体颜色#205838 版面内容表格字体颜色#205838 提醒语句颜色#287048 配色方案五（金黄色）： 版面表格边框颜色#co7800 版面标题表格颜色#ffc562 版面内容表格颜色1 #ffeed0 版面内容表格颜色2，颜色1和颜色2在bbs风格中互相穿插排列#Fffaf0 版面标题表格字体颜色#754900
软文布局常用的8种方法 前天飘零给大家介绍了软文布局，今天飘零就接上次的话题，为大家分享一篇软文布局的常用方法，共有8种。今天先介绍前3种。剩下的5种我们明天继续。 一、悬念式 悬念，在古典小说称为“扣子”或“关子”，即设置疑团，不作解答，借以激发读者的阅读兴趣。通俗来讲，就是它在情节发展中把故事情节、人物命运推到关键处后故意岔开，不做交代，或说出一个奇怪的现象而不说原因，使读者产生急切的期盼心理，然后在适当的时机揭开谜底。要达到这种效果，需要我们在撰写软文的时候要有意识的制作悬念或者一开始就想好布局。 制造悬念有三种常用形式： 设疑，这个疑问随着文章逐层剥开。 倒叙，将读者最感兴趣、最想关注的东西先说出来，接下来再叙述前因。 隔断，叙述头绪较多的事，当一头已经引起了读者的兴趣，正要继续了解后面的事时，突然中断，改续另一头，这时读者还会惦念着前一头，就造成了悬念。 二、抑扬式 所谓“抑扬”，是记叙类文章写作中常用的一种技巧，可分为欲扬先抑和欲抑先扬两种情况。欲扬先抑，是先褒扬，但是不从褒扬处落笔，而是先从贬抑处落笔，“抑”是为了更好的“扬”。欲抑先扬正好相反，用这种方法可以使文章情节多变，形成鲜明对比。 一篇软文，特别是故事性软文，看完开头就知道结尾，不是好的软文。如能运用抑扬法就能做到千折百转，避免平铺直叙，使文章产生诱人的艺术魅力。 举个简单的例子：他小时候参加过一场演讲比赛，一开始，他演讲的都是很平凡，无非就是说老师如何关心他，为他补课，严格要求他，老师因为家里出了事情，夜里不能休息，但是还坚持白天来给学生上课，最后累的病倒了。大家听了，觉得是有真情流露，但是情绪还不够，没有吸引大家的注意了。 突然，他大喊一声“老师！我恨你！你知道吗？我们都很你”全场突然沉寂下来，一脸不可思议的看着他。于是，接着，他喊“我们都恨你为什么不爱惜自己的身体！”台下依然鸦雀无声，2秒之后，全场响起了热烈而持久的掌声。评委老师和现场的同学都被他的气势
为什么要整理设计色彩方法？ 在色彩设计应用中，我们对颜色不同程度的理解，影响到设计页面的表现，熟练地运用色彩搭配，设计时岂不事半功倍。一张优秀的设计作品，它的色彩搭配必定和谐得体，令人赏心悦目，反思我们在设计过程中，怎样的色彩搭配更容易达到设计目的，又是什么影响了我们的配色思维呢？ 以下几点常会影响色彩搭配思维： 1.仅关注色彩表象 2.搭配方法不够系统 3.色彩与构成掌握不到位 首先，我们简单理解一下色相和色调概念：
接下来我们按三个大类的配色方法，结合一些案例，分析色彩在页面中的应用手法。 (一)色相差而形成的配色方式
1.1 有主导色彩配色 这是由一种色相构成的统一性配色。即由某一种色相支配、统一画面的配色，如果不是同一种色相，色环上相邻的类似色也可以形成相近的配色效果。当然，也有一些色相差距较大的做法，比如撞色的对比，或者有无色彩的对比，但这里先讲述带主导色的配色案例。 根据主色与辅色之间的色相差不同，可以分为以下各种类型： 1.1-1 同色系主导 1.1-2 邻近色主导 1.1-3 类似色主导 1.1-4 中差色主导 1.1-5 对比色主导 1.1-6 中性色主导 1.1-7 多色搭配下的主导 ...
1.1-1 同色系配色 同色系配色是指主色和辅色都在统一色相上，这种配色方法往往会给人页面很一致化的感受。 twitter的案例：https://https://www.doczj.com/doc/ee12209037.html,/ 整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息，比如信息内容模块，白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝色底代表可回复操作，颜色主导着信息层次，也保持了twitter的品牌形象。 观点：颜色差分割页面层次和模块，并代表不同功能任务属性。
DIV+CSS网页布局技巧实例1：设置网页整体居中的代码
DIV+CSS网页布局技巧实例4：使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如： #000000可以缩写为#000;#336699可以缩写为#369; 注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。 盒尺寸 通常有下面四种书写方法: ?property:value1; 表示所有边都是一个值value1； ?property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 ?property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 ?property:value1 value2 value3 value4; 四个值依次表示top,right,bottom, left 方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：margin:1em 0 2em 0.5em;
边框(border) 边框的属性如下： ?border-width:1px; ?border-style:solid; ?border-color:#000; 可以缩写为一句：border:1px solid #000; 语法是border:width style color; 背景(Backgrounds) 背景的属性如下： ?background-color:#f00; ?background-image:url(background.gif); ?background-repeat:no-repeat; ?background-attachment:fixed; ?background-position:0 0; 可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position; 你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：?color: transparent ?image: none
简介 网页设计的初学者可能习惯使用漂亮的图片作为网页的背景，但是当人们浏览一些著名、专业的大型商业网站时，会发现其运用最多的是白色、蓝色、黄色等单色，这样会让浏览页显得典雅、大方和温馨，最重要的是极大地增进浏览者开启网页的速度。 一般而言，网页的背景色应该柔和、素雅，配上深色的文字之后，看起来自然、舒适。但如果为了追求醒目的视觉效果，也可以为标题使用较深的背景颜色。下面是关于网页背景色和文字色彩搭配的一些经验值，这些颜色既可作为文字底色，也可以作为标题底色，适度配合不同字体，相信会有不错的效果，希望对用户的网页制作有所帮助。 工具/原料 dreamweaver 方法/步骤 背景色：“#f1fafa” 适合做正文的背景色，比较淡雅。配以同 色系的蓝色、深灰色或黑色文字都很好。 背景色：“#e8ffe8” 适合做标题的背景色，搭配同色系的深绿色标题或黑色文字。 背景色：“#e8e8ff” 适合做正文的背景色，文字颜色配黑色比较和谐、醒目。 背景色：“#8080c0” 配黄色或白色文字较好
背景色：“#e8d098” 配浅蓝色或蓝色文字较好 背景色：“#efefda” 配浅蓝色或红色文字较好 背景色：“#f2fld7” 配浅蓝色或红色文字较好 背景色：“#336699” 配白色文字比较合适，对比强烈 背景色：“#6699cc” 适合搭配白色文字，可以作为标题 背景色：“#66cccc” 适合搭配白色文字，可以作为标题
背景色：“#b45b3e” 适合搭配白色文字，可以作为标题 背景色：“#479ac7” 适合搭配白色文字，可以作为标题 背景色：“#00b271” 配白色文字显得比较干净，可以作为标题 背景色：“#fbfbea” 配黑色文字比较好看，一般作为正文 背景色：“#d5f3f4” 配黑色或蓝色文字比较好看，一般作为正文 背景色：“#d7fff0” 配黑色文字比较好看，一般作为正文
网页设计中颜色搭配的重要性, 常见颜色的含义( 网页设计中颜色搭配的重要性, 常见颜色的 含义（1） 贝塔网络 发布时间：2007-12-1916:37:29评论：0点 击：23一步、底色和图形色色彩搭配的问题确实不是一个简单的问题。这一代的设计师比上一代的设计师，所能运用的色彩工具多了许多。如今，我们能运用好计算机为我们提供的丰富色彩，看来不是很简单的事情。就我个人而言，在我从事设计师工作以来，往往也会迷失在色彩的世界。现在交流一下自己学过的和掌握的一些经验，希望大家指正。配色所要注意的要素实际设计时，我们经常会按照设计的目的来考虑与形态、肌理有关联的配色及色彩面积的处理方案，这个方案就是我的配色计划。在做配色计划时，我们应该考虑下述几点以突出视觉效果。1. 底色和图形色在设计时我们会经常遇到用几个色做各种形的构成，作为底的色我们往往会将它推远，而作为图形或文字的色我们要将它拉近。这就需要我们了解受配色关系的影响是什么样的。一般明亮和鲜艳的色比暗浊的色更容易有图形效果。因此，配 色时为了取得明了的图形效果必须首先考虑图形色和底色的关系。图形色要和底色有一定的对比度。这样才可以很明确的传达我们要表现的东西。我们要突出的图形色必须让它能够吸引观者的主要注意力。如果不是这样就会喧宾夺主。 第二步、整体色调如果我们想使我们的设计能够充满生气，稳健，冷清或者温暖，寒冷等感觉都是由整体色调决定的。那么我们怎么能够控制好整体色调呢？只有控制好构成整体色调的色相、明度、纯度关系和面积关系等。才可以控制好我们设计的整体色调。首先要在配色中心决定占大面积的色，并根据这一色来选择不同的配色方案会得到不同的整体色调。从中选择出我们想要的。如果我们用暖色系列来做我们的整体色调则会呈现出温暖的感觉，反之亦然。如果用暖色和纯度高的色
网页设计色彩搭配的基本知识 网页设计色彩搭配的基本知识 一、确定主体色 遵循主从关系，这是最稳定的处理色彩原则。 其实红、黄、绿、蓝、紫等每一个字都代表一类具体的颜色，也就是色相了，它是指色彩的相貌，是区别色彩种类的名称。在页面上，除白色为背景外大量使用的颜色，就是这个网页的主体颜色。 如果在同一个页面内运用了多种颜色，把握不好的话，就无法确定 哪个是主体色。因为其他的颜色面积不能过大，遵循主从关系。 二、相近色 选择色彩相近的颜色，非常容易搭配。 解释一下：假设在红色里面加白，红色就会越来越亮，明度提高。而加黑，红色就越来越暗。明度降低。那么色彩的明度就是指任何 一种色彩的明暗程度。 假设在蓝色里面加了黑、白、灰，或另一种颜色，就会使得蓝色不纯，不再鲜艳。那么色彩的纯度就是指彩色系中每个色彩的'鲜艳 程度。 同色彩系(同色相)，明度不同或纯度不同的几种颜色容易搭配，比如挑几种深浅不同的绿色来搭配，一般页面不会有太大问题;同一 页面尽量不要多出4种颜色。超级连接的色彩搭配也是遵循以上的 原则。而文字颜色的搭配，则要与背景分离。有个小方法：打开Dreamweaver的颜色盒(如下图)。如果它们6色为一组的话，每组 都是很不错的配色方案，但是都比较高调。其实如果搭配颜色的时 候遇到麻烦，就可以在颜色面板中，调入不同的几种色系，看看它 们相邻的颜色，或隔几种色来搭配，找合适你页面的颜色绝对不难。
三、色彩均衡 它是比较保险的配色互补原则。多种颜色同时存在的时候不容易把握好，一定要调和统一。 比如利用色彩错视现象，其中的重量错视在实用设计时用处很多。也就是明度高的浅亮色看起来较轻，明度低的深暗色则较重。 那么在网页设计中，如果运用了较多明度较高的颜色。比如图3 中左边是比较浅的颜色或亮的颜色，就可以用黑色，或同色相的深 色小面积压一下，点缀一下，使得页面不要太轻，达到色彩重量的 平衡。平衡的颜色较符合多数人的色彩心理。根据你的情况，如选 用黑色，可能会严肃和庄重，而用同色相的深色，则轻松一些。 四、黑白灰运用 其实黑白灰是宝贝，万不可小看它们。 如果在用色上遇到麻烦，可以大面积的加白，灰;小面积加黑来 调节其他颜色搭配不当。遇到使用纯度很高的颜色，比如纯蓝，纯 黄等，这样的搭配会很鲜艳，视觉感觉比较兴奋。把这样的颜色明 度抬高或降低，搭配上灰、白色，也是调节的方法。 五、色彩心理与情感 选择适合内容风格的颜色。 1.色彩有冷暖的感觉。如儿童类站点不要使用冷色系，且色彩要丰富一些。 2.色彩有柔软和坚硬感。同色相，明度高，则有柔软感。明度低，则会有坚硬感。女性站点，适量选用柔美的淡粉色或高级灰，而男 性类站点，就可以使用棕色，深蓝色。 3.从色相看，暖色给人的感觉华丽;从明度看，明度高的感觉华丽;从纯度看，纯度高的色彩给人的感觉华丽。由此首饰类站点可以 使用高雅的咖啡和金黄色，而香水类站点可以用明度高的淡绿或浅 蓝色。
《网页色彩搭配实训》课程标准 一、课程性质 技能训练课 二、课程开设学期及基准学时、学分 1、课程开设学期：第三学期； 2、基准学时：54学时； 3、学分：3学分。 三、先修课程 先修课程：计算机基础、程序设计课程；网站策划与网页设计：商务网站美工实训。 四、课程目标 《网页色彩搭配实训》主要针对网页设计中的配色进行研究和讲解。《网页色彩搭配实训》共分为13章，第1-4章主要阐述了色彩的基本原理、色彩的象征意义、网页设计中的搭配技巧等基础知识。第5-12章是《专业色彩搭配手册:网页配色》的核心部分，对不同色彩（红、橙、黄、绿、青、蓝、紫、黑）在不同行业（食品类、公司展示类、女性用品类、综合门户类、电子商务类、产品类等）的典型应用进行详细地分析和讲解，也详细地介绍了不同色彩之间的搭配，把理论融入到设计中，既锻炼了网页设计者对网页设计的分析能力和审美能力，又能够激发出网页设计者的创意与灵感，使网页设计者能够很好地掌握网页配色在设计中的应用要点。第13章列举了常用的网页颜色代码，每种色系都有16进制数值的对照，可以使网页设计师在工作中提高效率。 《专业色彩搭配手册:网页配色》是网页设计师在实际工作中必备的网页配色案例参考拍，也是网页设计爱好者的学习工具书。 1、知识目标： （1-1）掌握网页色彩的基本原理，色彩的象征意义，色彩的搭配技巧； （1-2）掌握不同色彩的搭配方法； （1-3）掌握常用网页颜色代码，以及16进制配色对照； （1-4）掌握网页中色彩构成； （1-5）了解网页设计中色彩的搭配、以及颜色模式； （1-6）掌握三原色在网页设计中的运用； （1-7）掌握网站设计； （1-8）掌握网站色彩管理； 2、能力目标： （1-1）对网页的色彩构成具有一定的了解，并了解三原色； （1-2）具备感知色彩的能力； （1-3）具备一定色彩搭配的能力； （1-4）具备色彩构成在网页设计的运用。 （1-5）具备了解RGB、CMYK模式的运营； （1-6）具备三原色运用的能力； （1-7）具备一定网页设计的能力； （1-8）具备项目中色彩管理的能力；
网页设计中的色彩选择与搭配技巧 Color selection and matching techniques in Web Design 朱晶 zhujing 江西先锋软件职业技术学院网络学院专职教师network Academy of ahead software vocational college,Jiangxi,330041,china [摘要]在网页设计中,色彩有着不可或缺的重要地位。提出色彩运用应注意的原则、色彩搭配的建议,从美学角度探讨色彩在网页设计中的运用,以发挥色彩在网页中的视觉冲击作用,以高超的配色技巧大胆创新,创造出更时尚、更具吸引力的网页设计作品。 网页的色彩是树立网站形象的关键之一，色彩搭配却是让网页设计者感到头疼的问题。网页的背景，文字，图标，边框，超链接等，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵，在本章中将详细叙述色彩的选择与和搭配技巧。[summary]Page design, color has an important status. Proposed the use of color should be noted that the principle of the proposal with a color, from an aesthetic point of color in web design to explore the use of color in order to play at the page of the visual impact of the role of the color superb skills to bold innovation, to create a more stylish, more an attractive Web page design。 Page color is to establish the image of one of the keys to web, color match is so that the page was headache Designer. Web page background, text, icons, borders, hyperlink and so on, should be what color, what color should match the best in order to express the desired content, in this chapter will be described in detail and select colors and match skills。 [关键字]色彩、网页、搭配 [key word] color、web page、match [中图法分类号] Z42 引言 众所周之，在网页设计中色彩的运用和搭配是很重要的环节，色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合．搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。 1、非彩色的搭配 黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。 1.1 黑色 黑色的内涵最为丰富和复杂，黑色具有很强的感染力，能够表现出特有的高贵显得严肃、庄严和坚毅。另外，黑色还具有恐怖、烦恼、忧伤、消极、沉睡、悲痛甚至死亡等意象。黑色用在宗教网站中显出严肃和庄严。黑色是一种流行色，适合于许多色彩搭配。黑色还具有高贵、稳重、科技的意象，是许多科技网站的主色调配合其他辅助色，营造出科技的神秘感。另外在一些音乐网站中也常常用黑色为主色调，营造出炫酷的氛围。 1.2 白色 白光是所有颜色光线的集合，白色反射所有的光线，不吸收任何可见光，因此白色被作为纯粹、虚无、轻盈、光明及金属的象征。在商业设计中，白色具有洁白明快纯真
网页风格设计及色彩搭配技巧 一、网站设计风格 一个人拥有自己独特的风格，是一般人所没有的，就会让人注意到那个人的特别，若那个人的风格是正面的，甚至就会引起别人的羡慕与注意，或是赞赏。就如同一个网站，拥有别的网站所没有的风格，就会让浏览者愿意多停留些时间，细细品尝该站的内容，甚至该站会得到多人的鼓励与注目，粗略的说，网站风格可以从以下几个方向来探讨，而每一项都是有关联性的： 1. 色系：网页的底色、文字字型、图片的色系、颜色等等。 2. 排版：表格、框架的应用、文字缩排、段落等等。 3. 窗口：窗口效果，例如：全屏幕窗口、特效窗口等。 4. 程序：网页互动程序，例如：ASP . PHP . XML . CGI等等。 5. 特效：让网页看起来生动活泼的各种应用，如：Flash . Java script . Java applets . DHTML等等。 6. 架构：目录规划、层次浅显易懂、选单应用等等。 7. 内容：网站主题、整体实用性、文件关联性、内容切合度、是否有不必要的档案等等。 8. 走向：对于网站的未来规划、网站整体内容走向等。 以上这些项目都与网页风格有密切的关系，网页的风格不是某一项相同，网站就是有整体感，而是要各项目的配合应用，才能达到完美的网站风格设计。接下来的段落，将会为每个项目做简单的介绍。 （一）色系
网站的色系是浏览者整体的视觉观感，若一个网站色系能有一致性，不仅会使网站看起来美观，更能让浏览者对内容不易混淆，增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题，若色系能与主题合理搭配，将会增加浏览者的易读性。 网站的色系包含了网页的底色、文字字型、图片的色系、颜色等等，这不单只是将颜色搭配得当就算完美，还要配合每个内容，及网站主题。对于网站的色系，应该要在网站开始制作前，做好规划及设计，才不会到着手制作网站时，难以搭配，甚至造成混乱的设计。 网页的底色是整个网站风格的重要指针。举例来说，以黑色作为背景颜色的网页，因黑色本对人的视觉上会造成黯淡的感觉，若是拿来用作活泼的儿童网站，就是不适合了。因为小孩子是天真无邪的、活泼的、有朝气的，与黑色的沉稳、黯淡，很难联想在一起。 再举个例子，若是写一个有关于环保的网站，若用暗红色作为网页底色，决计不会有人联想到网页的内容是与环保有关。当然，每个人的审美观不同，可能也会对颜色的代表性看法不同，但既然网站不是只写给自己看的，就应该要注意到大部分人可能会有的观点，然后以众人居多的观点出发，来设计网页。 文字字型上的设计，最好的网站是以所有浏览者都能看到的字型为主。常会看到有需多网站要求浏览者须自行下载某种字型，才能达到最佳浏览效果，这是种非常奇怪的行为。毕竟浏览者只是来找资料或是来看网站的内容，不可能会因为这种「为达最佳浏览效果」，而自行下载所需要的字型。 当所要求的字型若不下载，并不会影响到网站内容上的浏览与不便，那么对浏览者的要求就微乎其微的不可能发生任何作用。这么一来，对于网页设计者来
网页经典配色艺术 内容简介： 本书首先讲解了色彩的理论与配色方法，主要包括色彩的基础知识、网页配色标准与技巧及色彩的配色方案，然后通过案例分析了色调、色相和意象配色方案，再通过对大量的国内外优秀网页设计作品配色技巧的分析，培养读者对色彩的感觉，提高色彩的运用能力。本书配套光盘中包含大量配色方案、网页模板、网页Banner和Logo，以及配色辞典等资料。 本书适合网页设计人员，以及对网页设计感兴趣的读者。 未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。 版权所有，侵权必究。 图书在版编目（CIP）数据 网页经典配色艺术／张新伟编著.—北京：电子工业出版社，2009.6 （精彩网页设计） ISBN 978-7-121-08228-3 I. 网…Ⅱ.张…Ⅲ.主页制作－配色Ⅳ.TP393.092 中国版本图书馆CIP数据核字（2009）第015558号 责任编辑：王树伟田志虹 印刷： 装订： 出版发行：电子工业出版社 北京市海淀区万寿路173信箱邮编：100036 开本：787×1092 1/16 印张：19.5 字数：608.4千字 印次：2009年6月第1次印刷 印数：5 000 册定价：69.90 元（含光盘1张） 凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888。 质量投诉请发邮件至zlts@https://www.doczj.com/doc/ee12209037.html,。盗版侵权举报请发邮件至dbqq@https://www.doczj.com/doc/ee12209037.html,。 服务热线：（010）88258888。
前言 在人的视野里，这个世界中，无论是天空、大地、山水、花草，还是生活中的衣、食、住、行，色彩都是无处不在的。它像一位魔术师，可以通过冷暖和深浅等因素的变化，表现出灿烂的微笑或忧郁的心情，影响着人们的心理感受。 在网络的世界里，色彩也同样多姿多彩。什么样的网页才能获得访问者的青睐呢？如何才能设计出与众不同的漂亮网页呢？通过观察和比较可以发现，一个优秀的网页，通常要具备丰富的内容、合理的版式、独特的风格和悦目的色彩，并在这几个方面都要实现和谐的统一。所以当今的设计者不仅要掌握基本的网页制作技术，还需要掌握有关版式风格设计及色彩搭配等方面的知识和技巧，再通过自己在工作中的实践经验积累，才能逐步成为一个优秀的网页设计师。 在网络世界中，人们不再局限于简单的文字与图片的组合，而是更加追求网页的美观与舒适，最直接的体现就是网页的设计风格越来越受到重视。而色彩作为网页给访问者的最初印象，在网页设计中占有举足轻重的地位。目前，国内的众多网站在内容制作方面都发展得较为完善，因此，版式风格特色鲜明并有与网站主题相得益彰的配色方案，是决定网站成功与否的重要因素。 本书正是遵循以上理念，在讲解色彩相关概念和网页配色原理的基础之上，采用了大量国内外网站的配色成功案例进行实战点评。帮助读者在鉴赏过程中逐步掌握不同情况下网页配色的规律与技巧，进而成为网页设计的行家里手。 本书内容 本书共分为两大部分。第1部分（第1～3章）讲解色彩理论与配色方法，主要包括色彩的基础知识、网页配色标准与技巧及色彩的配色方案。通过案例分析了色调、色相和意象配色方案。第2部分（第4～10章）是网页配色应用与实践讲解，对大量网页用色特点进行分析，并学习国内外优秀网页设计作品的配色技巧。通过这些分析，有助于培养读者对色彩的感觉，提高色彩的运用能力。 本书特点 紧跟当今最前卫的色彩流行趋势。本书精选的优秀网页设计作品大部分是韩国、欧美的网页案例，展示了最时尚的网页设计风格，提供了最实用的设计版式和最前卫的配色经验，拓展读者的创意空间。 专业的网页配色参考手册。本书通过分析不同类型网站受众的不同特点和针对不同的网站主题来合理布置色彩，有针对性地使用色彩来体现网站的特色，使读者快速领会配色要诀。 提供最丰富的配色方案和版式设计方案。颜色搭配得当，网页就成功了一半，再搭配合理的版式设计，使网页更成功。 特别说明 由于网站的更新速度快、时效性强，本书中提供的网址链接仅供参考。 另外，为了给读者提供更丰富的配色方案参考，本书大部分章节提供了颜色的RGB色值，由于实际操作环境的不同，实际数值可能与本书中给出的数值稍有不同，但不会对颜色造成太大影响。 由于作者水平有限，错误和不足之处在所难免。您在阅读过程中如有任何问题，欢迎和作者交流探讨。 编著者
网页布局的基本类型 网页的布局不可能像平面设计那么简单，除了上文提到过的可操作性外，技术问题也是制约网页布局的一个重要因素。虽然网页制作已经摆脱了HTML时代，但是还没有完全做到挥洒自如，这就决定了网页的布局是有一定规则的，这种规则使得网页布局只能在左右对称结构布局、“同”字型结构布局、“回”字型结构布局、“匡”字型结构布局、“厂”字型结构布局、自由式结构布局、“另类”结构布局等几种布局的基本结构中选择。 10.3.1 左右对称结构布局 左右对称结构是网页布局中最为简单的一种。“左右对称”所指的只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区设置在左半部，而右半部用作主体内容的区域。左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适，如图10.10所示。 图10.10 左右对称结构布局的网站 10.3.2 “同”字型结构布局 “同”字结构名副其实，采用这种结构的网页，往往将导航区置于页面顶端，一些如广
告条、友情链接、搜索引擎、注册按钮、登陆面板、栏目条等内容置于页面两侧，中间为主体内容，这种结构比左右对称结构要复杂一点，不但有条理，而且直观，有视觉上的平衡感，但是这种结构也比较僵化。在使用这种结构时，高超的用色技巧会规避“同”字结构的缺陷，如图10.11所示。 图10.11 “同”字型结构布局的网站 10.3.3 “回”字型结构布局 “回”字型结构实际上是对“同”字型结构的一种变形，即在“同”字型结构的下面增加了一个横向通栏，这种变形将“同”字型结构不是很重视的页脚利用起来，这样增大了主体内容，合理地使用了页面有限的面积，但是这样往往使页面充斥着各种内容，拥挤不堪，如图10.12所示。
https://www.doczj.com/doc/ee12209037.html,/wangyesheji/wangyebuju/201102/28-6420.html手稿 https://www.doczj.com/doc/ee12209037.html,/4327.html首页设计可用性 https://www.doczj.com/doc/ee12209037.html,/?action=Public_Template_List&searchCategory=1模板欣赏https://www.doczj.com/doc/ee12209037.html,/ js效果https://www.doczj.com/doc/ee12209037.html,/sitebuilt/wytx.asp报价 https://www.doczj.com/doc/ee12209037.html,/wangyetexiao/网页特效 https://www.doczj.com/doc/ee12209037.html,/Products/SiteFactory/Function/网站系统 https://www.doczj.com/doc/ee12209037.html,/国外付费素材网 https://www.doczj.com/doc/ee12209037.html,/香港网络公司 https://www.doczj.com/doc/ee12209037.html,/pswl/admin/main.php 用户名pswl 密码piq4on2m 电子电工 机械设备 家用电器 仪器仪表 五金加工 服装鞋帽 汽摩船舶 安全防护 礼品饰品 日用百货 广告包装 化工材料 化妆美容 建筑装修 交通运输 教育培训 节能环保 农林牧渔 商务服务 食品餐饮 休闲娱乐 办公文教 数码网络 医疗健康 机关社团 相关内容集中区域显示 就是将网页中所要表达的相近的栏目集中在一个区域显示，形成一种群体效应。 2. 栏目划分结构清晰、分开主次性，重为左，此为右 意思是将所要建立的网页栏目结构细分清晰，分开栏目的主次性、重要栏目以顶部、左侧排列排放，次要的栏目以底部、右侧排列排放。
网页颜色搭配表及颜色搭配技巧 网页颜色搭配表及颜色搭配技巧 颜色搭配常识： 1.网页中色彩的表达使用三种颜色，及红(R)、绿(G)、蓝(B)，及通常所说的RGB色彩，它包含了人类所感知的所有颜色，网页中表达颜色如下（红色为例）RGB格式：红色是(255,0,0) 或十六进制hex格式为(FF0000)。 2.将色彩按"红->黄->绿->蓝->红"依次过度渐变可得到12色环：红，橙红，橙，橙黄，黄，黄绿，绿，蓝绿，蓝，蓝紫，紫，紫红。 3.颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。通常内容文字用非彩色(黑色)，边框，背景，图片用彩色。所以即使页面丰富，看内容依然不会眼花,通常背景与内容对比要大。 按单一色彩为主色彩分类 网页设计一般以单一色彩为主，下面每类都以该色彩为主，
配以其它或类似色彩的，并按照从轻快到浓烈的顺序排列。红色-是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。 #FFFFCC #CCFFFF #FFCCCC #99CCCC #FFCC99 #FFCCCC #FF9999 #996699 #FFCCCC #CC9999 #FFFFCC #CCCC99 #FFCCCC #FFFF99 #CCCCFF #0099CC #CCCCCC #FF6666 #FF9966
#FF6666 #FFCCCC #CC9966 #666666 #CC9999 #FF6666 #FFFF66 #99CC66 #CC3333 #CCCCCC #003366 #993333 #CCCC00 #663366 #CCCC99 #666666 #CC9999 #FF6666 #FFFF00 #0066CC #CC0033 #333333
网页设计配色 颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。但是对于刚开始学习制作网页的人来说，往往不容易驾驭好网页的颜色搭配。除了学习各种色彩理论和方法之外，笔者认为多学习一些著名网站的用色方法，对于我们制作美丽的网页可以起到事半功倍的作用。所以，笔者总结了一些著名网站的颜色搭配方法，这些方法可以让我们的学习少走弯路，快速提高我们的网页制作水平。 一、网页颜色原理和象征意义 我们所有网页上颜色，在HTML下看到的是以颜色英文单词或者十六进制的表示方法（如#000000表示为黑色）。不同的颜色有着不同的含义，给人各种丰富的感觉和联想。 红色：热情、奔放、喜悦、庄严 黄色：高贵、富有、灿烂、活泼 黑色：严肃、夜晚、沉着 白色：纯洁、简单、洁净 蓝色：天空、清爽、科技 绿色：植物、生命、生机 灰色：庄重、沉稳 紫色：浪漫、富贵 棕色：大地、厚朴 二、网页颜色的使用风格 不同的网站有着自己不同的风格，也有着自己不同的颜色。网站使用颜色大概分为几种类型： 1、公司色 在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资公司的主色调是C：100%，M：60%，Y：0%，K：0%。这样的颜色使用到网站上显得色调自然、底蕴深厚。 2、风格色 许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多，大公司使用蓝色的较多……这些都是在突出自己的风格。