资源描述
,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,2,章 网页设计要素,2.1,网页设计的基本原则,2.2,首页和版面的设计,2.3,网页的色彩搭配,2.4,网页中插图的处理,2.5,网页中的字体,2.6,网页中表格的运用,2.1,网页设计的基本原则,设计成功的网站可以使用户能够迅速地进入且操作便捷，否则网站设计就是失败的。如何使用户方便快捷地进入网站，则必须遵循以下原则。,1.,明确内容,2.,抓住用户,3.,优化内容,4.,快速下载,5.,网站升级,下一页,2.1,网页设计的基本原则,6.,坚持基本原则,7.,学习,HTML,8.,设定网站的框架,9.,网站地图,10.,特殊字体的应用,11.,检查错别字,12.,避免长文本页面,13.Web,设计工具,下一页,上一页,2.1,网页设计的基本原则,14.,网站介绍,15.,慎用闪烁,16.,背景颜色,17.,向前和向后按钮,18.,点击计数器,19.,不要用框架,20.,重复使用图像,21.,避免使用过大的图像,下一页,上一页,2.1,网页设计的基本原则,22.,选择使用,Flash,动画,23.,动画与内容应有机结合,24.,慎用声音,25.,慎用插件,26.,使用著名的插件,27.,使用先进技术,28.,平台的兼容性,29.,用软件分析工具找错,下一页,上一页,2.1,网页设计的基本原则,30.,避免错误链接,31.,给浏览者成熟的东西,32.,在搜索引擎上登记网站,33.,设计一个留言板,34.,测试网站,35.,反复测试,36.,内容组织,下一页,上一页,2.1,网页设计的基本原则,37.,注意留白,38.,图像压缩,39.,图像大小属性,40.,使网站具有交互功能,在网站上提供一些回答问题的工具，使得访问者能从网站上获得交互的信息。,41.,图片更新,返 回,上一页,2.2,首页和版面的设计,1.,草案,新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西，可以尽可能地发挥想象力，将想到的“景象”画上去。,2.,粗略布局,3.,定案,将粗略布局精细化、具体化。在布局过程中，我们可以遵循的原则有以下几点。,（,1,）正常平衡,（,2,）异常平衡,下一页,2.2,首页和版面的设计,（,3,）对比,（,4,）凝视,（,5,）空白,（,6,）尽量用图片解说,下面介绍一下我们经常用到的版面布局形式。,（,1,）“,T”,结构布局,（,2,）“口”型布局,下一页,上一页,2.2,首页和版面的设计,（,3,）“三”型布局：这种布局多用于国外站点，国内用得不多。,（,4,）对称对比布局：顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。,（,5,）,POP,布局：,POP,引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。,返 回,上一页,2.3,网页的色彩搭配,1.,色彩的基础知识,色彩五颜六色、千变万化，我们平时所看到的白色光，经过分析在色带上可以看到：它事实上包括红、橙、黄、绿、青、蓝、紫七色，各颜色间自然过渡。,2.,色彩搭配的原则,（,1,）特色鲜明。,（,2,）搭配合理。,（,3,）讲究艺术性。,（,4,）彩色还是非彩色。,下一页,2.3,网页的色彩搭配,3.,网页色彩搭配的原理,（,1,）色彩的鲜明性,（,2,）色彩的独特性,（,3,）色彩的合适性,（,4,）色彩的联想性,4.,色彩搭配要注意的问题,（,1,）使用单色。,（,2,）使用近色。,下一页,上一页,2.3,网页的色彩搭配,（,3,）使用对比色。,（,4,）黑色的使用。,（,5,）背景色的使用。,（,6,）色彩的数量。,5.,网页色彩掌握的过程,随着网页制作经验的积累，我们用色有这样的一个趋势：单色五彩缤纷标准色单色。,返 回,上一页,2.4,网页中插图的处理,下面介绍一些对图片进行处理的方法，以使图片能在网页中迅速显示出来。,1.,选好图片格式,图片文件的格式有很多，如,GIF,，,JPEG,（文件扩展名为,.jpg,），,BMP,，,PNG,等，它们都是可以用浏览器浏览的，但到底选择哪种图片格式比较好呢？其实在一般情况下我们只需选择前面的两种，即,GIF,格式与,JPEG,格式。,2.,减少图片色彩数量,下一页,2.4,网页中插图的处理,3.,对图片进行适当压缩,4.,控制图片的尺寸,图形尺寸越小，则字节数相应就会越少。,5.,更改图片的显示方式,调节图片的尺寸大小之后，我们还可以想办法在图片文件大小一定的情况下，让浏览者可以耐心地等待图片全部出来的方法。其方法是采用隔行,GIF,和逐级,JPEG,方式。,返 回,上一页,2.5,网页中的字体,2.5.1,文字在网页设计中的作用,在平面设计的构成要素中有两大基本元素，一个是图形，另一个就是文字。只通过图形来传递信息常常不能达到最佳的效果，须借助文字才能进行最有效的说明。在网页中也是如此。,具体来说，文字在网页中的作用可以体现为以下几点，例如在优秀设计作品中体现出的文字的特性。,1.,适合性,文字要与具体文字内容、界面主题相适应。,下一页,2.5,网页中的字体,2.,明确性,文字的主要功能在于传达外形特征以便浏览者识别，保证信息的准确传递。,3.,易读性,文字的形态及编排设计能够提高界面的易读程度。,4.,美观性,文字可以通过自身的形象的个性与风格给人以美的感受，使界面更加美观。,下一页,上一页,2.5,网页中的字体,5.,创新性,文字与界面信息主题需求相配合并进行形态变化，将文字进行创意发挥，产生创造的美感，进而提高界面整体设计效果的创新性，给浏览者耳目一新的感受。,总之，文字既具有传达信息的功能，使浏览者易于阅读和接受，又可以通过文字形态的节奏与韵律带给人美感，并通过创造形成自身鲜明、独特的个性，从而使界面内容与形式达成高度的统一，在实现良好信息传达效果的基础上适应人们的审美要求（如,图,2-14,所示）。,下一页,上一页,2.5,网页中的字体,2.5.2,网页中文字的字体,用语言传达信息时，语气、语调以及面部表情、姿态手势是语言的辅助和补充，而在界面设计中，文字的字体、规格及其编排形式，就相当于文字的辅助信息传达手段。,宋体字型结构方中有圆，刚柔相济，既典雅庄重，又不失韵味灵气，从视觉角度来说，宋体阅读最省目力，不易造成视觉疲劳，具有很好的易读性和识别性,电脑技术,。,下一页,上一页,2.5,网页中的字体,拉丁字母依据其基本结构可以分为,3,种类型。,（,1,）饰线体（,Serif,）：此类字体在笔画末端带有装饰性部分，笔画精细对比明显，与中文的宋体具有近似形态特征，饰线体在阅读时具有较好的易读性，适合于长篇幅文本段落。,（,2,）无饰线体（,Sans Serif,）：笔画的粗细对比不明显，笔画末端没有装饰性部分，字体形态与中文的黑体相类似。,（,3,）装饰体（,Decorative,，也称,Display,）：即通常所说的“花”体，由于此类字体拘泥于形式的装饰意味，阅读时较为费力，易读性较差，只适合于标题或较短文本，类似于中文的美术体和手写体。,返 回,上一页,2.5,网页中的字体,2.5.3,文字在网页中编排设计,1.,字号、字体、行距,字号大小可以用不同的方式来计算，例如磅（,Point,）或像素（,Pixel,）。因为以计算机的像素技术为基础的单位需要在打印时转换为磅，所以，建议采用磅为单位。,2.,文字的整体编排,页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。,下一页,2.5,网页中的字体,（,1,）文字的图形化。,字体具有两方面的作用：一是实现字意与语义的功能，二是美学效应。,（,2,）文字的叠置。,（,3,）标题与正文。,在进行标题与正文的编排时，可先考虑将正文作双栏、三栏或四栏的编排，再进行标题的置入。,下一页,上一页,2.5,网页中的字体,（,4,）文字编排的四种基本形式。,3.,文字的强调,（,1,）行首的强调。,将正文的第一个字或字母放大并作装饰性处理，嵌入段落的开头，这在传统媒体版式设计中称之为“下坠式”。,（,2,）引文的强调。,在进行网页文字编排时，常常会碰到提纲挈领性的文字，即引文（也称为眉头）。,下一页,上一页,2.5,网页中的字体,（,3,）个别文字的强调。,如果将个别文字作为页面的诉求重点，则可以通过加粗、加框、加下划线、加指示性符号、倾斜字体等手段有意识地强化文字的视觉效果，使其在页面整体中显得出众而夺目。,4.,文字的颜色,在网页设计中，设计者可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。,颜色的运用除了能够起到强调整体文字中特殊部分的作用之外，对于整个文案的情感表达也会产生影响。,返 回,上一页,2.6,网页中表格的运用,表格是网页中的重要元素，是页面排版的主要手段。尽管,DHTML,中的层也可以实现网页元素的自由定位，但是显然表格更加方便编辑与修改。熟练掌握和运用表格的各种属性，是网页制作的重要环节。,1.,表格的基本用法,表格的,HTML,基本语法,表格的对齐方式,（,1,）表格内的文字对齐。,下一页,2.6,网页中表格的运用,（,2,）表格在页面内的对齐。,如果需要与表格并排放一段文字，就需要用到,table,标签的另一个参数：,，其中,#,可以设定为,left,（居左），,right,（居右）。,表格嵌套就是在表格里插入表格，嵌套的排版方法就是将要插入的表格当做文字来处理，同样使用,语句。,表格的色彩,下一页,上一页,2.6,网页中表格的运用,2.,表格运用的注意点,表格的嵌套并不是表格处理最困难的地方，无论多复杂的版面，悉心琢磨一番总能找到解决的办法。,因此，在设计页面表格的时候，应该做到以下几点。,（,1,）整个页面不要都套在一个表格里，尽量拆分成多个表格。,（,2,）单一表格的结构尽量整齐。,（,3,）表格嵌套层次尽量要少。,返 回,上一页,图,2-14,创新性示例,返 回,
展开阅读全文