网站设计第1章网站设计基础ppt课件

网站设计,1,第一章 网站设计基础 网站设计是一个很大的课题。本章将网页设计的软件透明化，从网站的主题、结构、风格、布局等讲述一个网站的制作构思。,2,很多从事网页设计的计算机专业人员，对于网页的制作技术驾轻就熟，但对于网页富有艺术性和个性的设计却感到力不从心。特别是没有经过艺术设计专业训练的网页制作者，在掌握了网页制作技术的情况下，都渴望将自己的网页制作得更具创意和美感。目前关于网页制作的讨论和介绍，多以讲解软件的技术性操作为主要内容，侧重艺术方面的非常之少。,3,本章内容,网页的构成,2,3,什么是网页和网站,1,网站设计相关知识,4,网页制作步骤,4,重点与难点,网站的目录结构 网站的连接结构 网站创意 网站布局,5,什么是网页,是由语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。,6,网页的实质,网页相当于刊物中所发表的一篇篇文章，但与纸上的文章相比，它增加了多媒体信息和网上交互的功能。 网页的实质 = 表格+文本+图片+动画+声音+超级链接+,7,什么是网站,网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Internet上访问的页面 。 门户网站 职能网站 专业网站 个人网站,8,网页的实质,网站相当于发行到全世界的期刊。 网站的实质 = 服务器上的文件夹 主页相当于期刊的封面。 主页的实质 = 打开网站的第一个网页,9,网页中的常见元素,网页 元素,站标,导航条,广告条,按钮,标题栏,10,网页中的常见元素,11,网页中的常见元素-导航条,导航条：是链接到网站内主要页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面。设计导航条时，应注意以下几点： 如果网站内容不多，可根据网站风格尝试灵活摆放，也可以使用图片或Flash动画等 如果网站栏目很多，可以将导航条分为多排放置在Logo的下方或右侧。为便于观看，可为各排设置不同的底色,12,网页中的常见元素-广告条,广告条又称Banner，其功能是宣传网站或替其他企业做广告。在Banner制作过程中有几点需要注意。 Banner可以是静态的，也可以是动态的。 Banner的体积不宜过大，尽量使用GIF格式图片与动画或Flash动画。 Banner中的文字不要太多。 Banner中图片的颜色不要太多，尤其是GIF格式的图片或动画，要避免出现颜色的渐变和光晕效果,13,此处的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。 标题栏可以是文字加不同颜色的背景，也可以是图片。,标题栏,网页中的常见元素-标题栏,14,网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。,设计按钮时，有以下几点需要注意。,要保证按钮与页面的协调。 如果按钮上有字则尽量使用单色或渐变色背景。 当页面上有多个按钮时，应分清主次。,网页中的常见元素-按钮,15,网站设计相关知识,主要内容,主题,版面布局,CI形象与标准色彩及字体,栏目和版块,风格与创意,目录结构与链接结构,16,定位网站的主题和名称,网站设计包含内容 纯网站本身的设计：文字排版、图片制作、平面设计、三维立体设计、静态无声图文、动态有声影像等； 网站的延伸设计：网站的主题定位和浏览器的定位、智能交互、制作策划、形象包装、营销拓展等；,17,两个需要弄清的前提：,网站设计与网站制作。我们说网站“设计”而不是网站“制作”，它们的区别在于设计是一个思考的过程，而制作只是将思考的结果表现出来。一个成功的网站首先需要一个优秀的设计，然后辅之优秀的制作。设计是网站的核心和灵魂，一个相同的设计可以有多种制作表现的方式。 我们说的“网站”是指有确定主题和明确目的的实用性站点，不包括纯表现类或者纯文字类网站。,18,网站设计应包含的内容：,1.定位网站主题和名称； 2.定位网站CI形象； 3.确定栏目和版块； 4.网站的整体风格创意设计 5.网站的层次结构和链接结构 6.首页的设计 7.版面布局的窍门 8.色彩的搭配 9.效果与速度,19,网站设计应包含的内容：,10.替浏览者考虑 11.细微之处见功力 12.建设完成度与推出时间 13.交互性与亲和度 14.考虑不同的浏览器和分辨率 15.字体的设置和表格的嵌套 16.新技术的运用取舍 17.设计好你的banner和位置 18.语句文字-融入感情,20,定位网站的主题和名称,设计一个网站首先要确定主题，即网站的题材； 美国个人电脑杂志(PC Magazine)评出的2001年度排名前100位的全美知名网站的十类题材: 第一类：网上求职 第二类：网上聊天/即时信息/ICQ 第三类：网站社区/讨论邮件列表,21,第四类：计算机技术 第五类：网页/网站开发 第六类：娱乐网站 第七类：旅行 第八类：参考/资讯 第九类：家庭/教育 第十类：生活/时尚,每个大类可以继续细分，如娱乐类可以再分为体育、电影、音乐等； 还有一些专业的另类题材、如中医、热带鱼等； 同时，各个题材交叉还会产生新的题材，如旅游论坛（旅游+论坛）等,22,在选择题材时，可从下面几个方面进行考虑：,主题要小而精:定位要小，内容要精 政府网站：选择施政纲领，定位在咨询服务、树立形象 企业网站：宣传产品和品牌形象，主题一般定位在产品宣传、销售服务和企业文化 学校网站：在线教育、传播知识和技术 个人网站：展示个性风采，创建彼此沟通的桥梁 题材最好是自己擅长或者喜爱的内容 题材不要太滥或者目标太高,23,网站的财富人生,24,初中生的网络神话,hao123,个人简介 李兴平，1979年出生于 广东兴宁县，父母均为 当地农民，兴平初中毕 业后即返家谋生。2005 年前第一次出远门，地 点是深圳。,25,hao123,26,1999年，网络在中国逐渐普及，兴宁县也开始有了网吧。这时，开始迷上了上网的李兴平在当地网吧找了一份网吧管理员的工作。 因为要帮人攒电脑赚钱，他需要用网络查询配件报价之类的信息，他发觉在网上找资料非常困难，当时的中文网站不仅内容不够丰富，数量有限，而且要把那些用英文字母表示的网址一个个记下来，并不是一件容易的事情。于是，他想到一个解决办法，设计了一个个人网页，把他认为好的网站搜集在一起，并和它们建立链接。当下次上网时，他就很方便地直接进入这些常用的网站。,hao123,27,网吧管理员的身份让李兴平天天泡在网上，泡在那些打游戏、聊天、上网的网民中。很快，他发现来网吧的很多人都不知道如何上网，上网后又不知道去哪里找到所需要的内容。当时的上网费很贵，时间与金钱却往往在茫然不知所措中奢侈地流失。 他设计的简陋的个人主页开始发挥神奇的功效。他开始有意识地去做网站地址搜集分类工作，爱琢磨的他想到要做一个“网址大全”式的东西。半年后，李兴平的个人主页开始有了Hao123的雏形，他当时给它的名字就是“网址大全”。他把当时中国排名前5000位的站点进行分门别类，按用途组合在一起。随后他开始做一些点击广告以及网站联盟等，随着流量增大，网站的固定广告业务随之而来。,hao123,28,2000年中期，Hao123网站以基本成型，开始靠点击广告来赚钱。虽然网络泡沫的破灭导致很多网站突然死亡，但Hao123对网络寒潮体味并不深。“最初的一笔广告费大概是几百元吧，后来每月收入有1000元，逐步到四五千元，在2001天地达到了几万元，到2003年、2004年，每个月的收入稳定在80万元左右。” 2004年8月，百度以1190万元和4万股股票收购了hao123 2009.11 李兴平获2009年度中国游戏与社区先锋达人特别推荐大奖。 2009 李兴平被2009互联网领袖扑克牌评为红桃10。,hao123,29,李兴平与4399,李兴平拥有很大的网站群，除了hao123成功之外，还有很多成功的网站在运营着，4399小游戏就是其中之一。 4399小游戏，在hao123主页有2处链接，可以看得出李兴平是相当的重视这个游戏站点。 从alexa数据来看，4399流量是相当之大，基本稳定在世界排名200多名。在中国网站排名 统计来看，4399在中国网站排名在33名。 4399小游戏定位在中小学与白领阶层，主要以休闲类flash小游戏为主，整个网站也是做的非常的简洁。这一贯都是李兴平的风格。从小游戏的留言可以看得出，中小学生占到4399的80%。flash动画，游戏之类近几年开始在中国都非常的火爆，李兴平也不放过这个市场，flash动画有 在做，4399专做flash游戏，他的这几个站点流量几乎是中国同类网站的TOP1！,30,Hao123,成功启示 李兴平的网站素以简单实用着称 特别实用，直接迎合绝大多数网民的需要 专注单一，网站功能一目了然 李兴平做站特别注重“链接”上的功夫 眼光和迅猛的执行力 使用最简单实用的HTML语言,31,二、网站名称的选择:是网站设计的关键元素之一 一般建议按以下规则取名： 1名称要正气 2名称要易记 3名称要有特色 名称平实可以接受，但如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。在体现网站主题的同时，要有这画龙点睛之笔。,32,1.2 定位网站的CI形象,CI（Corporate Identity）是借用广告词语，意思是通过视觉来统一企业的形象。 1.设计网站的标志（logo） 2.设计网站的标准色彩 3.设计网站的标准字体 4.设计网站的宣传标语,33,设计网站的标志（logo）,标志可以是中文、英文字母，可以是符号、图案，可以是动物或者人物等。 标志的设计创意来自你网站的名称和内容。 设计标志有以下几种方法： 1、选择与网站主题有关的，并具有代表性的人或者物，用它们作为设计的蓝本，加以卡通化和艺术化。例： 2、对于专业性的网站，可以以本专业有代表的物品作为标志。例: 3、最常用和最简单的方式是用自己网站的中文或者英文名称作为标志。采用不同的字体、字母的变形与组合，可以很容易制作出自己的标志。,34,有代表性的人物、动物、花草作为设计蓝本，加以卡通化和艺术化。 例如：迪斯尼的米老鼠、搜狐的卡通狐狸等。 如果网站的内容具有较强的专业性，可以本专业有代表的物品作为标志。 例如：中国银行的铜板标志、奔驰汽车的方向盘标 志、校徽等。,几种设计Logo的方法,35,网页中的常见元素-站标,36,网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准色彩；、 图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩。 一个网站的标准色彩不超过3种。 色彩总的应用原则应该是“总体协调，局部对比”。,设计网站的标准颜色,37,标准颜色：蓝/绿色、黄/橙色、黑/灰/白等 其他颜色 注意：背景颜色和前文的对比一定要大，为了突 出主要文字，背景绝对不能选择花纹繁杂 的图案；色彩要控制在三种颜色以内。,网站的色彩搭配,网站的标准字体,网页默认的字体：中文为“宋体” 9磅字 英文为“Times New Roman”,38,网站色彩的使用,蓝色调为主，加上白色和红色，强调权威与真实,39,网站色彩的使用,橙色为主，白色为辅，具有轻快，时尚的效果,40,网站色彩的使用,白色为主，绿色为辅，产生舒适、优雅、适于阅读的气氛,41,网站色彩的使用,红色为主，产生热情、活力的感觉，充满欢乐的气氛,42,设计网站的标准字体,标准字体是指用于标志、标题、主菜单的特有字体。 一般网页默认的字体是宋体。 使用一些比较特别的字体时，最好使用图片的形式。,43,一、文字的格式化,1.字号、字体、行距 字号大小可以用不同的方式来计算，例如磅（point）或像素（pixel）。因为以计算机的像素技术为基础的单位需要在打印时转换为磅，所以，建议采用磅为单位。,44,最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。,45,网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。,46,粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多采。关键是如何根据页面内容来掌握这个比例关系。,47,行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。这主要是出于以下考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。,48,除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。,49,行距可以用行高（line-height）属性来设置，建议以磅或默认行高的百分数为单位。例如：line-height：20pt、line-height：150%。,50,图2：上、中部文字编排疏散，传达出轻松愉快的感觉。 下部的文字编排采用较小的行距，与上面的编排方式形 成对比，丰富了版面空间层次。,51,文字的图形化,字体具有两方面的作用：一是实现字意与语义的功能，二是美学效应。所谓文字的图形化，即是强调它的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。,52,将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。,53,将文字放大，不仅实现了字意与语义的功能，而且具备了视觉冲击力。,54,文字的叠置,文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性，但是能造成页面独特的视觉效果。这种不追求易读，而刻意追求“杂音”的表现手法，体现了一种艺术思潮。因而，它不仅大量运用于传统的版式设计，在网页设计中也被广泛采用。,55,由字符(ASCII码)组成的网站标志。,56,通过文字的大小、明暗、疏密以及叠置等变化， 产生杂音感，起到较好的视觉引导作用。,57,下坠式的行首强调，有吸引视线与活跃画面的作用。,58,设计网站的宣传标语,宣传标语是网站的精神和目标； 可以用一句话甚至一个词高度概括，类似实际生活中的广告金句； 例如雀巢咖啡的“味道好极了”，Intel的“给你一颓奔腾的心”等。,59,宣传标语欣赏,hao123，让上网更简单！ 劲舞团世界第一休闲网络游戏 百度空间我的空间，我的家 263游戏快乐一整天 土豆每个人都是生活的导演 优酷世界都在看 IT世界网您身边的数字专家 搜狗我的天职是搜索 阿里软件让天下没有难管的生意,60,确定网站的栏目和版块,一般的网站栏目安排要注意以下几个方面： 1一定记住要紧扣主题 2设一个最近更新或网站指南栏目 3设定一个可以双向交流的栏目 4设一个下载栏目或常见问题回答栏目,61,栏目实质是一个网站的大纲索引，索引应该将网站的主题明确显示出来。在指定栏目的时候，要仔细考虑，合理安排。 划分栏目需要注意的是： (1) 尽可能将网站最有价值的内容列在栏目上。 (2) 尽可能方便访问者的浏览和查询。 (3) 尽可能删除与主题无关的栏目。,62,版块比栏目的概念要大一些，每个版块都有自己的栏目。举个例子：网易的站点分新闻，体育，财经，娱乐，教育等版块，每个版块下面有各有自己的主栏目。一般的个人站点内容少，只有主栏目(主菜单)就够了，不需要设置版块。如果你觉得的确有必要设置版块的，应该注意： 1.各版块要有相对独立性。 2.各版块要有相互关联。 3.版块的内容要围绕站点主题。 关于版块方面，主要是门户站点等较大ICP （Internet Content Provider ）需要考虑的问题,63,确定网站的目录结构和 链接结构,网站的目录结构 1不要将所有文件都存放在根目录下 2按栏目内容建立子目录 在设置网站的目录结构时，需要注意的问题有： 不要使用中文名字的目录名。 不要使用过长的目录名。 尽量使用意义明确的目录名，尽量做到“见名知意”。 目录的层次不要太多，建议不要超过3层。,64,网站的链接结构（逻辑结构）:页面之间相互链接的拓扑结构； 一般情况下，建立网站的链接结构有以下两种基本方式： 树状链接结构 星状链接结构 链接结构的设计，在实际的网页制作中是非常重要的一环，采用什么样的链接结构将直接影响到版面的布局。,65,例-艺海拾贝网页结构,66,有一个清晰的目录结构对设计网页是很有益处的，便于维护与查找。由于目录和网页的结构都是树状结构，一般一一对应地一个节点创建一个子目录，子节点的网页就存在父节点对应的目录中。 艺海拾贝网站的目录结构如右图：,例-艺海拾目录结构,67,68,电脑课件之家网站结构图,69,电脑课件之家网站主页,70,电脑课件之家服务器文件夹列表,71,确定网站风格和创意设计,风格是抽象的，是指站点的整体形象给浏览者的感受； 整体形象：包括站点的CI（标志、色彩、字体和标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义和站点荣誉等因素； 风格是独特的，是不同于其他站点的地方； 风格是人性的，通过网站的外表、内容等可以概括出一个站点的个性和情绪； 有风格的网站和普通网站的区别在于：普通网站看到的只是堆砌在一起的信息，只能用理性的感受来描述；有风格的网站会给人更深一层的感受，如有品味，和蔼可亲；,72,1.5 确定网站风格和创意设计,如何树立网站风格 ？ （1）要肯定风格是建立在有价值内容之上的。一个网站有风格而没有内容，就像绣花枕头一包草，像一个性格傲慢但目不识丁的人。所以首先必须保证内容的质量和价值。 （2）要彻底搞清楚自己希望站点给人的印象是什么。 （3）在明确自己的网站印象后，开始努力建立和加强这种印象。,! 网站风格的形成不是一次定位的，而是在实践中不断 强化、调整和修饰的。,73,二、网站创意：创意（idea）是网站生存的关键。 创意是传达信息的一种特别方式 广告学教师詹姆斯的创意思考过程：准备期、孵化期、启示期、验证期、形成期 创意是将现有的要素重新组合：如在线书店、电子社区、在线拍卖 创意的目的是更好地宣传推广网站。如果创意很好却对网站发展毫无意义，就像给奶牛穿高跟鞋，那么宁可放弃这个创意。,74,创意思考的途径,1.把它颠倒 2.把它缩小 3.把颜色换一下 4.使它更长 5.使它闪动 6.把它放进音乐里 7.结合文字音乐图画 8.使它成为年轻的9.使它重复 10.使它变成立体 11.参加竞赛 12.参加打赌13.变更一部分 14.分裂它 15. 使它速度加快 16.使它对称 等,75,网站的整体风格和创意,网站风格： 建立在有价值的内容的基础之上 必须保证内容的质量和价值 明确自己网站想留给人什么样的印象 创意思考的过程： 准备期/孵化期/启示期/验证期/形成期,76,网页的创意设计遵循的原则,（1）依据信息内容的意义和结构进行情节化、理性化的统调布局和必要的图像符号化处理。 （2）网页的创意设计还必须重视“形象思维”的情感象征意义的传达，以有别于知识性思考形式审美结构的营造。,77,网页创意设计的意义、功能和目的 网页创意设计是否成功，除了其内容因素外，首先要看其在视觉上能否引人注目。 网页的创意设计包括文字排列方向、字群聚散组合，字体大小风格的选择，图片的分布及色彩与空白的经营，不仅追求网页形式的变化，更重视各视觉元素的不同形式和构成能给人在感情上造成不同的心理感受，并体现不同的主题。,78,网页创意设计的构成要素及其作用 1标题： 标题是表达信息主题的短句，标题有主标题与子标题之分。 2标语： 标语是具有韵味的意义完整的句子。 3正文：网页信息传达的主要内容； 4网页名称：发布信息的单位或企业，或者其他信息发布主体的名称，有时也以信息发布的主题作为网页名称； 5标志：体现单位或行业的特点或理念的图案化徽标，具有一定的象征意义，代表单位企业或行业的一种抽象化形象标识；,79,6插图: 将所传达的信息内容赋以视觉化的造型称为插图。 7图标：在网页上一般指那些作为导引信息路径，并具有可视化造型风格的标签或符号； 8背景：一般是以色彩灰度肌理 9动画、抽象连续图案等形式作为整个网页或页面局部区域的视觉构成底纹，背景的感官效果是建立网页风格的基础； 动画不仅能增添网页的视觉趣味效果，同时，也可以用来进一步突出网页和信息内容的主题和风格。,80,网页创意设计的形式法则和表现手法 1视觉流程：平面设计涉及的问题，如平面不同区域给人不同感觉 2点、线、面 3形状间的组合和构成关系 4形状与空间关系 5构架与空间 6节奏与韵律 7对比，调和与统一 8装饰与趣味 9特异,参考：网页制作与设计 陈语林 梁建武 周诚 主编 中国水利水电出版社,81,首页设计,设计好一个首页，一般的步骤是： （1）确定首页的功能模块 网站名称、主菜单、新闻、搜索、友情链接、邮件列表、计数器、版权等； （2）设计首页的版面：先在纸上将草图勾勒出来，再用网页制作工具设计； （3）处理技术上的细节：如在不同浏览器下都看起来不太粗糙、字体颜色、链接样式等设置,82,版面布局,版面布局也是一个创意的问题，但要比站点整体的创意容易，有规律。 版面结构是指一种能够让浏览者清楚、容易地理解作品传达的信息的东西，也就是将不同元素巧妙排列的方式。 布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置。 设计版面时要把文字、图片、空白当作一个整体来看，采用平面分割方式，调动全部面积来构建整个版面。,83,文字与图片穿插排列，密集的文字形成块面，丰富了页面层次。,84,几种常见的页面布局样式：,“厂”字型,主菜单以及横条网站标志+广告条,主 菜 单,显 示内容,85,几种常见的页面布局样式：,“口”字型,主菜单,主要内容,友情链接等,86,几种常见的页面布局样式：,自由式，又称POP布局,页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，菜单栏目自由摆放。,87,版面设计,网页版面布局可按创意草案、粗略布局、最后定案 三个步骤来进行。,88,网页的创作步骤,一、 网页的准备 1确定主题与设计风格 每一类网页都有其特定的目的和独特的风格。 2资料的收集与整理 网页中最常见的问题是不能有足够的素材来体现制作者的理念。,89,收集素材注意事项,要注意对收集来的素材分类； 文件名要易懂易记，便于调用； 注意保护知识产权，避免侵犯别人的版权。,90,网页的制作 1标题 2文字 3图片 4背景 5特殊效果 6网页排版,91,