网页设计课件完整版本.ppt

网 页 界 面 设 计,文字与图形的运用,网页设计文字设计,文字设计就是设计者根据文字信息，通过对字体、字号、距离、灰度、色彩、空白等有序合理的应用，有节奏、有层次、富有创意的排列，以达到信息的引导、传达和方便阅读的目的。,文 字 设 计,字号、字体、行距 网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。,文 字 设 计,文 字 设 计,行距的可读性 行距的变化会对阅读产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。,文 字 设 计,行距的表现力 除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。,文字设计,文字的整体编排 网页的页面里的正文部分是由许多单个文字经过编排组成的一个群体，要充分发挥这个群体形状在版面布局中的作用,文字设计,文字的图形化 字体具有两方面的作用：一是传达功能，二是装饰功能。这里所说的文字的图形化，就是要强调她的艺术装饰功能，把记号性的文字作为图形元素来表现，同时又强化了原有的传达功能。,文字设计,文字的叠置 文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、从而成为页面中活跃的、令人注目的元素,文字设计,标题与正文,文字设计,文字编排的四种基本形式 a.两端均齐 b.居中排列 c.左对齐或右对齐 d.绕图排列,文字设计,两端均齐：文字从左端到右端的长度均齐，字群形成方方正正的面，显得端正、严谨、美观,文字设计,居中排列：在字距相等的情况下，以页面中心为轴线排列，这种编排方式使文字更加突出，产生对称的形式美感,文字设计,左对齐或右对齐：左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线，很容易与图形配合,文字设计,绕图排列：将文字绕图形边缘排列,文字设计,文字的强调 1.行首的强调 2.个别文字的强调 3.文字的颜色,文字的强调,行首的强调 ：正文的第一个字或字母放大并作装饰性处理，放在段落的开头，这在传统媒体版式设计中称之为“下坠式”,文字的强调,个别文字的强调,文字的强调,文字的颜色：在网页设计中，我们可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色,图像的运用,一方面，图像的运用可以让网页更加美观、有趣；另一方面，图像本身也是传达信息的重要手段之一。 文字相比，它具有直观、生动的特点，可以很容易地把那些文字无法表达的信息表达出来，更容易让浏览者理解和接受。,图像的格式,计算机中显示的图形一般可以分为两大类矢量图和位图。,图像的格式,位图是由像素点组成的，这些点可以进行不同的排列和染色来构成图像,图像的格式,位图的优缺点：可以表现出色彩丰富的图像、可逼真表现自然界各类景物，但原图不能任意放大缩小，且图像数据量大 矢量图的优缺点：可以任意放大缩小，图像元素对象可编辑，且图像数据量小。但色彩不丰富，逼真度低，要画出自然度高的图像需要很多的技巧,图像的排版形式,静态图像在网页排版中的运用不外乎四种形式 方形图 退底图 出血图 三种形式的结合使用,方形图,图形以直线边框来规范和限制，是一种最常见、最简洁、最单纯的形态,退底图,把图像中的背景去掉，只留下主题形象。退底图形自由而突出，更具有个性，因而给人印象深刻,出血图,图像的一边或几个边充满页面，有向外扩张和舒展的感觉。一般用于传达抒情或运动信息的页面,文字设计,图像的编排结构 ： （1）四角与中轴四点结构 （2）块状组合与散点组合结构,四角与中轴四点结构,页面的四个角与对角线、中轴四点及水平与垂直的中轴线，具有支配页面结构的作用,块状组合与散点组合结构,块状组合，也就是通过水平、垂直线分割，将多幅图像在页面上整齐有序地排列成块状 散点组合，指图像分散排列在页面各个部位，具有自由、轻快的感觉,块状组合与散点组合结构,散点组合，指图像分散排列在页面各个部位，具有自由、轻快的感觉,图像的处理,图像的处理包括 （1）图像的外形处理 （2）图像的面积 （3）图像的数量 （4）与背景的关系,图像的外形处理,图像的外形能使页面的气氛发生变化，并直接影响浏览者的兴趣。,图像的面积,图像在网页中占据的面积大小能直接显示其重要程度,图像的数量,图像的数量是根据页面的内容决定的,与背景的关系,网页图像与背景是对比和统一的关系。也就是说，图像与背景在和谐统一的基础上，应存在一定的对比，让主要图像更加突出。,图像在长页面中的应用,作业：结合前次的作业，把文字和图形设计元素结合，根据版式布局，制作一个网页的平面效果图,此课件下载可自行编辑修改，此课件供参考！ 部分内容来源于网络，如有侵权请与我联系删除！,