网站设计与建设-Web设计综述.ppt

* * * * * * * * * 返回 http://www.Y http://www.P http://www.E 返回 旧 新 旧 新 旧 新 旧 新 旧 新 旧 新 最新 返回 * * * * * * 英文字体分两类: Serif（衬线） 有那种边边角角的字体。比如说Times New Roman 常用于印刷业，可以用来清楚地分辨出每一个字母，因此读者浏览那些字数比较多的段落就变得很轻松。 Sans-Serif Arial 特征就是简洁大方。几乎所有的广告、标志，幻灯片，系统、程序和网页使用这种字体 这是因为显示器的分辨率低，而字体不能减小。如果用Serif字体，那些边边角角就很难用像素显 默认基本字号是“size=3” 选择少量的字体和字号会使页面看起来显得更干净。一般可选三种字号：14磅用于标题；12磅用于副标题；9磅用于正文。 颜色 行距至少要大于字距。加宽字距和行距有轻松、疏朗之感。行与行之间要考虑适当增加空白，以便阅读。 特殊效果字体应放在图形中 LOGO 字体 TrueType字体：无级缩放 OpenType--把PostScript字体嵌入到TrueType的软件中 而不应该在网页中杂乱使用多种字体，不易阅读。 网站中可能使用多种字体，但是同一种字体应该应用于相同类型的数据或者信息， 网页设计中使用了用户没有安装的字体，则浏览器将用缺省字体显示，将达不到设计的字体效果 * Web字体设计原则：文本字体、图像字体 标准、大方、清晰、引人入胜、协调 英文字题：Times New Roman、Arial 中文正文字体：宋体，9磅或12磅（相当于WORD的五号宋体字），12磅汉字大小为缺省设置。 True type字体：无级缩放 对于非标准字体，浏览器使用近似字体 特殊效果字体应放在图形中 段落行文字不易过长，不要横跨整个浏览器窗口 改变页边距、行边距和颜色增加字体效果 字体在整个网站上使用一致性原则，使用同一种字体表示同类型的数据或信息 返回 800*600 返回 返回 上边空白布局 上左边空白布局 右边空白布局 上下边空白布局 分布式布局 艺术风格布局 网页布局元素 网页布局：在建立网站前应首先考虑网站的外观和结构。 从视觉和技术角度审视整个页面元素以及它们之间的关系。然后在整个网站上贯彻所选择的元素：布局、字体、颜色、图像以及其它多媒体。 页面布局是设计人员向用户展示信息的方式，必须规划一个结构，要具有逻辑性、易于理解，并遵守它。 网页布局元素包括页面规划布局、边界、字体、颜色、图像以及表格等： 框架：规划页面布局，允许同时显示多个页面。 表格：规划页面布局，在单元格上可以放置各种网页元素，容易排版。 导航：控制用户在网站内的移动。 段落：在页面上分组文本字符。 图像：提供视觉吸引、信息和导航。 列表：组织并强调某些信息条目。 颜色：提供网站整体色彩感觉，增加可读性、易于分类。 边距：控制显示内容距浏览器窗口边界的距离。 边界：为HTML表和框架提供可见的边界。 空白：减少页面元素混乱，分开页面上的元素 空白在网页设计中非常重要，它能够使网页看起来简洁、明快，阅读舒畅，是网页设计中必不可缺少的元素。 切记不要将尽可能多得信息放在一个网页中，应该有合理的、简明的分类，不要强迫客户从一堆信息中艰难地挑出所需要的信息，要让客户自己选择是否进入更深的链接获得信息。 也不要只为了让页面变短而分割页面，除非是在逻辑断点处。每一个页面都应该是独立完整的。 页面布局技术 (1)层叠样式表(CSS) 能完全精确的定位文本和图片 浏览器是否支持CSS技术 (2)表格页面布局：边界为0 (3)框架页面布局 (4)透明GIF页面布局 占位图像 IMG SRC=transparent.gif HEIGHT=2 WIDTH=20 (5) Flash页面布局 页面布局技术： 页面尺寸 切记在网页设计过程中，一定不要左右拖动页面，只能上下拖动页面， 而且也不能拖动过长，客户往往会忽视页面下面的内容。 1.9 颜色与Web设计 当访问一个网站时，给我们的第一感觉是什么？是颜色。 色彩以一种“隐蔽”的方式传达的各种信息 几乎每一个成功的企业都有企业文化颜色， 微软公司的颜色是天蓝色、 Oracle公司的颜色是红黑色、 IBM公司的颜色是蓝色等 发光物体三基色：红、绿、蓝 (RGB) 不发光物体的印刷四色：青、洋红、黄、黑 (CMYK) 青(C)、洋红(M)、黄(Y)和黑(K) 色彩都具有三个要素：色调、饱和度、亮度（或明度） 色