购买

¥ 30.0

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 网站设计与建设-Web设计综述

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

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

烟雨梦兮
2018-10-14 0人阅读 举报 0 0 暂无简介

简介:本文档为《网站设计与建设-Web设计综述ppt》,可适用于IT/计算机领域

网站设计与建设Websitedesignanddevelopments第章Web设计综述第一部分Web基础知识*网页、网站、主页、封页与超链接等基本概念Web比传统媒体所具有的独特特征Web技术以及相关工具Web设计原则概述Web设计最基本原则Web最小公分母设计原则Web页面布局设计原则Web颜色设计原则Web字体设计原则Web设计深刻影响*Internet与IntranetInternet又称为因特网是一个全球性的计算机互联网络。它既是一个多媒体的通信媒介又是一个无限的信息资源。它由成千上万个不同规模的网络通过自愿原则采用TCPIP协议互相连接起来的一个巨型计算机网络。Intranet是指企业内部网它采用Internet的协议标准应用Internet的现有技术建设的企业内部网络。网页网站封页与主页WWW的含义是环球信息网(WorldWideWeb)也简称为Web网或“万维网”。网页(WebPage)网站(WebSite)也叫站点是指在Internet上由一组相互关联的文档和各种网页元素组成的集合。主页(HomePage)超链接(Hyperlink)超文本(Hypertext)*封页(CoverPage)在主页前面的网页内容非常简洁一般是简易抽象的绘图或flash动画阐述网站当下宣传的主题和意念网站封页一般显示几秒的很短时间就自动跳转到主页或点击封页也可以直接进入主页。现在很多网站开始流行“封页”设计但网站不一定一直有封页封页一个网站顶多有一个。封页相当于书的封皮主页相当于书的目录其他网页相当于内容书页。**封页实例*WebWeb是相对Web的新的一类互联网应用的统称。Web的主要特点在于用户通过浏览器获取信息。Web则更注重用户的交互作用用户既是网站内容的浏览者也是网站内容的制造者。web网站与web没有绝对的界限。web技术可以成为web网站的工具一些在web概念之前诞生的网站本身也具有web特性web的核心不是技术而在于指导思想。。Web与其说是一种新技术不如说是一种新的理念博客(Blog)、维基(Wiki)等WebWeb一词包含多层含义用来概括互联网发展过程中可能出现的各种不同的方向和特征包括将互联网本身转化为一个泛型数据库跨浏览器、超浏览器的内容投递和请求机制人工智能技术的运用语义网地理映射网运用D技术搭建的网站甚至虚拟世界或网络公国等*Web媒体新特征Web多媒体:Web是丰富多彩的多媒体Web是非线性媒体:用户可以随时跳转到其他网页或网站,传统媒体是线性的。Web交互性:客户可与页面互动与被动地接受广播信息有本质的区别。个性化:可提供一对一的客户需求信息。一对一关系:大众媒体的概念和应用对于Internet无效,传统媒体为广播式传播。Web主动性:主动获得信息。Web平等身份:聊天、博客(部落阁)、BBS、在线游戏和电子商务等。**Web媒体新特征续Web即时交流:Eemail、聊天、在线游戏等。Web提供电子商务:BC、CC电子商务网站。信息搜索能力:有强大的信息搜索能力如googleWeb即时性:一旦信息发布瞬间就可借助Internet传遍世界各地传统媒体做不到的。Web采用BS架构:Web站点发布与传统软件CS不同省时省力、便于维护与发布。无需培训:易于浏览信息、不需要任何客户培训无须安装与卸载客户端软件。Web信息易修改、传播速度快和传播成本低。Web充分使用原有信息:Web信息可以存于数据库中传统媒体难于使用众多类信息和已有信息。**Web技术和工具Web技术是人类所经历的发展最快的技术BS技术:浏览器服务器模式所有页面信息和数据都放置在了服务器端客户机上只需要有浏览器。Web常用技术:HTML、DHTML、CSS、XML、AJAX、JavaScript和JavaApplets。网页设计工具:FrontPage、Dreamweaver、HotDogProfessional、NetscapeCommunicator、IBMRSA、Eclipse、WebPageMaker和BEAWebLogicWorkshop等。由于HTML网页文件是一个纯ASCII文档任何一个编辑器都可以编辑该类型文件最好的网站设计方法:手工编码加上所见即所得的工具。**Web设计最基本原则Web最基本设计原则:Web内容永远是第一位的多媒体外观设计与设计技术始终是第二位的。Web内容是第一位的与Web客户是第一位的是一致的。Web客户是指浏览网站的主要用户群。站点在设计时既应该专注客户的共性也应该兼顾个性。**Web客户特点的Web客户只扫描网页的关键字和短语普通客户读Web内容比纸张慢。Web客户和站点设计关系:Web设计必须吸引人以客户为本引导他快速找到他所需要的内容。Web客户不希望网页充斥无关内容和混乱图像。内容很重要布局和传递也很重要。用可以赢得客户的布局特性来创建网页。*确定当前网页设计客户资源环境最好的方法就是访问一些著名网站了解这些网站的设计。网站设计还要特别考虑你的客户群针对不同的客户群可能客户环境差别是很大的*Web最小公分母设计原则网站设计人员:最新的硬件、软件和插件。设计基础指导原则:最小公分母设计:使用大众客户群最低的环境设计网站让更多的客户能顺畅浏览网站。≤吋显示器。分辨率:*KbsModemIE或更早兼容GoogleChrome、FireFox和安全浏览器极少用户会花时间下载插件(flash插件除外)参照著名网站的设计(最有效)网站设计还要特别考虑你的客户群*http:wwwmicrosoftcom*http:wwwmicrosoftcom*http:wwwmicrosoftcom*返回Web页面与传统软件用户界面都依赖于图形用户界面(GUI)即含有同样的基本设计构件:窗口、图标、菜单和指针。Web页面更注重的是信息的展示而传统软件界面更注重的是系统功能的实现Web站点比传统软件更专注于内容“Web内容永远都是第一位的”*Web页面布局Web页面布局:是对页面的整体规划即对页面划分成不同的区域用于放置不同的页面元素。网页布局直接影响到网站的外观和结构,页面布局按照导航元素放置的位置进行分类。**Web页面布局设计原则–页面布局应该遵循翻转金字塔样式:首先提供给用户一个摘要列表然后是对细节的链接或者引用。页面布局是设计人员向用户展示信息的方式必须具有逻辑性、易于理解并遵守它。一定不要设计左右拖动页面可以上下拖动页面而且不易拖动过长客户往往会忽视页面下面的内容。借鉴成功相似网站的页面布局。**Web页面布局设计原则–对于整个网站每个页面的布局应该相对保持协调一致不应该有大的跳跃感觉。页面布局对于一个网站不易过多应该根据网站内容合理地设计页面布局。同类型网页应该有相同和非常相似的页面结构。切忌不要边设计边修改页面布局否则会浪费很多时间和精力一旦确定就不要轻易修改。*公共布局格式:按导航元素放置的方式分类左边空白布局上边空白布局分布式左边和上边空白布局右边空白布局上边和中部布局上下布局分布式布局艺术风格布局左边空白布局左边空白布局上边空白布局上左边空白布局右边空白布局上下边空白布局分布式布局艺术风格布局网页布局元素网页布局:在建立网站前应首先考虑网站的外观和结构。从视觉和技术角度审视整个页面元素以及它们之间的关系。然后在整个网站上贯彻所选择的元素:布局、字体、颜色、图像以及其它多媒体。页面布局是设计人员向用户展示信息的方式必须规划一个结构要具有逻辑性、易于理解并遵守它。网页布局元素包括页面规划布局、边界、字体、颜色、图像以及表格等:框架:规划页面布局允许同时显示多个页面。表格:规划页面布局在单元格上可以放置各种网页元素容易排版。导航:控制用户在网站内的移动。段落:在页面上分组文本字符。图像:提供视觉吸引、信息和导航。列表:组织并强调某些信息条目。颜色:提供网站整体色彩感觉增加可读性、易于分类。边距:控制显示内容距浏览器窗口边界的距离。边界:为HTML表和框架提供可见的边界。空白:减少页面元素混乱分开页面上的元素空白在网页设计中非常重要它能够使网页看起来简洁、明快阅读舒畅是网页设计中必不可缺少的元素。切记不要将尽可能多得信息放在一个网页中应该有合理的、简明的分类不要强迫客户从一堆信息中艰难地挑出所需要的信息要让客户自己选择是否进入更深的链接获得信息。也不要只为了让页面变短而分割页面除非是在逻辑断点处。每一个页面都应该是独立完整的。页面布局技术()层叠样式表(CSS)能完全精确的定位文本和图片浏览器是否支持CSS技术()表格页面布局:边界为()框架页面布局()透明GIF页面布局占位图像<IMGSRC="transparentgif"HEIGHT=""WIDTH="">()Flash页面布局页面布局技术:页面尺寸切记在网页设计过程中一定不要左右拖动页面只能上下拖动页面而且也不能拖动过长客户往往会忽视页面下面的内容。颜色与Web设计当访问一个网站时给我们的第一感觉是什么?是颜色。色彩以一种“隐蔽”的方式传达的各种信息几乎每一个成功的企业都有企业文化颜色微软公司的颜色是天蓝色、Oracle公司的颜色是红黑色、IBM公司的颜色是蓝色等发光物体三基色:红、绿、蓝(RGB)不发光物体的印刷四色:青、洋红、黄、黑(CMYK)青(C)、洋红(M)、黄(Y)和黑(K)色彩都具有三个要素:色调、饱和度、亮度(或明度)色调(Hue简称:H):指颜色的种类它反映了颜色的基本面貌和性质。如:红、绿、蓝等各种颜色。色调H的单位是度表示在颜色环上所处位置的角度饱和度(Saturation简称:S):指颜色的深浅程度或浓淡程度。一般鲜艳的色彩其饱和度都比较高较刺眼故饱和度高的颜色一般不用作网页背景。饱和度S的单位是百分比。亮度(Brightness简称:B):指颜色的明暗程度。如白色亮度高黑色亮度低黄色亮度最高紫色亮度最低。亮度B的单位是百分比。Photoshop拾色器颜色格式两种数值格式:·RGB值·十六进制数值RGB:“”绿<BODYBGCOLOR="">十六进制数:“#FF”绿<BODYBGCOLOR="FF">颜色数为种颜色(××)浏览器支持的个颜色(另个用于OS)抖动:浏览器将颜色近似为它所支持的最近安全颜色的过程。颜色和Web设计色环:将色彩按“红黄绿青蓝紫红”依次过渡渐变就可以得到一个色环。在色环中可以将颜色分为:暖色系、中性系和冷色系配色方案单色方案色调H值得到基本颜色再通过调整亮度B以及饱和度S得到其他几种相近颜色。相似色方案色彩圆环上选择彼此相邻的几种颜色构成的配色方案就是相似色方案配色方案补色方案在色彩圆环上沿直径相对应的两种颜色构成一对互补色绿色和红色为互补色绿色旁边的深绿色和蓝绿色以及红色旁边的橙红色以及深红色就构成了一组双重互补色三合一色方案三色方案是指在色彩圆环中选择一个等边三角形三个顶点上的颜色构成的配色方案。红、黄、蓝是一个三色方案*Web颜色设计原则():最直接的视觉冲击网站应该使用企业原有CI颜色需要简洁、新颖、舒服、大方充分体现企业的文化形象。网页色系要整个网站需要保持一致。网站的色系可以分为暖色系、中性系和冷色系几种。色系包含了网页底色、文字颜色、图片颜色、动画颜色和边框颜色等。Web三色原则:除了黑色和白色以外主要颜色原则上不要超过三种太多的颜色会导致网页色彩杂乱令人厌烦。**颜色确定原则()选择一种适合的配色方案网页元素应该选择与网站主体相一致的色调图像的颜色应该尽可能的少从而减少图片尺寸应使用浏览器支持的个Web安全颜色*颜色确定原则:最直接的视觉冲击尽可能使用浏览器支持的个颜色颜色数目不应使用过多,除了黑色和白色以外选择三到四个颜色就足够了所有页面颜色要与主页保持一致颜色形成一种风格:图像、文字、底色网站的色系包含了网页底色、文字颜色、图片颜色、动画颜色和边框颜色等这不单只是将颜色搭配得当就算完美还要配合网站主题及信息内容。使用户感到简洁、新颖、舒服、大方充分体现公司企业的形象字体和Web设计网页中的文本有两种:HTML文本图形文件格式的文字图像最常用的英文字体是TimesNewRoman(Macintosh为Times)Arial(Macintosh为Helvetica)最常用的中文字体是宋体英文字体分两类:Serif(衬线)有那种边边角角的字体。比如说TimesNewRoman常用于印刷业可以用来清楚地分辨出每一个字母因此读者浏览那些字数比较多的段落就变得很轻松。SansSerifArial特征就是简洁大方。几乎所有的广告、标志幻灯片系统、程序和网页使用这种字体这是因为显示器的分辨率低而字体不能减小。如果用Serif字体那些边边角角就很难用像素显默认基本字号是“size=”选择少量的字体和字号会使页面看起来显得更干净。一般可选三种字号:磅用于标题磅用于副标题磅用于正文。颜色行距至少要大于字距。加宽字距和行距有轻松、疏朗之感。行与行之间要考虑适当增加空白以便阅读。特殊效果字体应放在图形中LOGO字体TrueType字体:无级缩放OpenType把PostScript字体嵌入到TrueType的软件中而不应该在网页中杂乱使用多种字体不易阅读。网站中可能使用多种字体但是同一种字体应该应用于相同类型的数据或者信息网页设计中使用了用户没有安装的字体则浏览器将用缺省字体显示将达不到设计的字体效果*Web字体设计原则:文本字体、图像字体标准、大方、清晰、引人入胜、协调英文字题:TimesNewRoman、Arial中文正文字体:宋体磅或磅(相当于WORD的五号宋体字)磅汉字大小为缺省设置。Truetype字体:无级缩放对于非标准字体浏览器使用近似字体特殊效果字体应放在图形中段落行文字不易过长不要横跨整个浏览器窗口改变页边距、行边距和颜色增加字体效果字体在整个网站上使用一致性原则使用同一种字体表示同类型的数据或信息*http:wwwcssdueducn返回http:wwwmicrosoftcom*http:wwwamazoncom返回http:wwwintelcomhttp:wwwsuncomhttp:wwworaclecomhttp:wwwibmcomhttp:wwwhpcomhttp:wwwapplecomhttp:wwwdellcom返回http:wwwlenovocomhttp:wwwfoundercomhttp:wwwlangchaocomcnhttp:wwwsinacomcn返回http:wwwharvardeduhttp:wwwYaleeduhttp:wwwPrincetoneduhttp:wwwEmoryeduhttp:wwwstanfordedu返回http:wwwtsinghuaeducn旧http:wwwtsinghuaeducn新http:wwwpkueducn旧http:wwwpkueducn新http:wwwsjtueducn旧http:wwwsjtueducn新http:wwwfudaneducn旧http:wwwfudaneducn新http:wwwzjueducn旧http:wwwzjueducn新http:wwwsdueducn旧http:wwwsdueducn新http:wwwsdueducn最新返回***************

VIP尊享8折文档

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/119

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

¥30.0

会员价¥24.0

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利