第二章---设计及实现.ppt

第二章方法篇 第二章 设计与实现 色彩的心理联想 　　不同的色彩在人们的生活中带有不同的感情和文化内涵。比如红色让人联想到太阳、玫瑰、喜庆、热闹、兴奋；白色象征纯洁、干净、明快；黑色代表深沉、神秘、压抑、寂静； 紫色象征着女性化、高雅、浪漫；蓝色象征天空、高科技、稳重、理智；橙色代表欢快、甜美、收获、时尚；绿色代表了自然、活力、舒适、希望；等等。色彩的含义不是一成不变的，在特定的情景下，同种色彩给人的感受也随之变化。 　　 黑白灰的运用 　　 黑白灰是万能色，可以和任意一种色彩搭配。在设计过程中, 如果两种色彩的搭配不协调，可试加入黑色或者灰色，或许会得到意想不到的效果。对一些明度较高的网站，适当配以黑色，可调节其明度效果，呈现均衡。白色是网站使用最普遍的一种颜色。很多网站留出大面积白色空间，作为网站组成部分，即通常所说的留白。很多设计性网站较多运用留白艺术。留白可给人遐想的空间，让人感觉心情舒适、畅快。恰当的留白对协调页面的均衡有很好的效果。 　　 基于对比色的配色 　　 对比色是指色环中位置相对的两种色彩，通常也指两种可以明显区分的色彩。对比色在网页设计中用得很普遍。由于对比色有较强烈的分离性，在设计网页时恰当地运用对比色，不仅能拉开色彩的距离感，而且能表现出特殊的视觉对比与平衡效果。如图2-31、图2-32所示。 基于相近色的配色 　　 相近色的搭配给人以自然、统一、和谐的视觉感受。相近色在网页设计中最为常用。如图2-33、图2-34、图2-35所示。 有彩色与无彩色的搭配 　　 有彩色与无彩色搭配的主要作用是强调网站的主题内容或控制画面色彩的平衡。如图2-36、图2-37所示。 色彩小结 了解了色彩的基本概念及其在网页设计中的搭配规律后，具体运用时，还需注意： 　　 一个网站不可能运用单一的某种颜色，因为这样会让人感觉单调、乏味；但也不能将所有颜色都运用上，因为那样会让人感觉轻浮、花哨，主题不突出，没有方向。通常使用一种或两种主题色，配以辅助色，一个页面尽量不要超过四种色彩。 　　 　 网页细节的设计可以体现出一个网站的品质，及其对于浏览者的态度，每个网站都有自己设计精细的独特之处。下面我们从网站的导航方式及loading画面的设计两个方面来了解一下网页设计品质的细节体现。 　　 如图2 - 3 8 、图2 - 3 9 、图2 - 4 0 、图2 - 4 1 、图2 - 4 2 、图2 - 4 3 、图2 - 4 4 、图2-45所示，不同的网站各自采用不同的导航方式及loading画面设计，精美别致，给人耳目一新的感觉。 保存后website文件夹下将自动生成一个i m a g e s 文件夹， 用来保存切片生成的单独图片， 同时还自动生成了index.html的网页文件。使用Dreamweaver打开index.html后发现，这些单独的切片图片通过一张隐形表格（见注解）无缝地拼接在一起，看不出任何切割的痕迹。这些工作由Photoshop自动完成，这样就实现了效果图向网页文件的转化。 另外， 如果需要改变存储图片的文件夹的名称（ 默认是images）、切片图片的命名方式等设置，使其符合站点整体规划，也可以在图2－61的设置里选“其他”，将弹出如图2－62的对话框，可在其中修改相关设置。 对于内容二次排版　　　图2－74中切片4是用来放置相应栏目内容的，不同栏目内容的图文关系的变化会使对这部分的切割产生差异。company.html作为主框架页，不需要采取如图2－77那种连同栏目内容一起切割的方法，应该考虑到它的通用性和可扩展性，先把内容部分先作为整体切片，如图2－74。等生成网页后再对这部分进行二次切割，排版嵌入到页面中，下面看看具体如何实现。 对图2－74中切片4的第二次排版，怎样最快、最简单地实现？使用Photoshop打开images文件夹中切片4的图片，按照图文关系再切割一次，注意图中分隔线条不要放在切片3内，如图2－78，以Web所用格式存储在站点文件夹website1中，文件名为company_04.html。使用Dreamweaver打开company_04.html，选中切片3所在部分，删掉图片并直接排入文字，以方便以后修改，注意文字的CSS样式，选中整个表格，Ctrl＋C复制待用。使用Dreamweaver打开company.html，删掉中间部分（图2－74中切片4）的图片，设置单元格背景为白色，Ctrl＋V粘贴刚才复制的表格。company_04.html这个页面在做完上述这几步后就可以从站点文件夹中删除了。这样我们就快速地完成了对页面内容的第二次排版。如果