购买

¥30.0

加入VIP
  • 专属下载券
  • 上传内容扩展
  • 资料优先审核
  • 免费资料无限下载

上传资料

关闭

关闭

关闭

封号提示

内容

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

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

网站设计与建设-第01-章-Web设计综述

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

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

《网站设计与建设》第章Web设计综述《网站设计与建设》*综述Web技术相关的一些基本概念Web比传统媒体所具有的独特特征Web技术以及相关工具创建网站的工具和技术概述Web客户客户资源Web页面页面布局Web颜色Web字体Web设计关系影响设计原则*《网站设计与建设》*Web设计重要性崭新信息通信平台和沟通方式Internet发布信息和获取信息Internet最重要的信息发布技术Web设计技术相当简单与快捷网站是Internet信息高速公路高速信息运输车的信息站点。设计令客户满意的Web却不易内容组织页面布局页面导航字体颜色*《网站设计与建设》*InternetInternet是由遍布世界的网络组成的一个松散全球网它既是一个多媒体的通信媒介又是一个无限的信息资源。从通信角度看Internet是一个理想的信息交流媒介从获取信息的角度看Internet是一个庞大的信息资源库。从商业运营的角度看在网上进行各种电子交易。从娱乐休闲的角度看Internet是一个花样众多的娱乐厅。*《网站设计与建设》*InternetInternet是由遍布世界的网络组成的一个松散全球网它既是一个多媒体的通信媒介又是一个无限的信息资源。从通信角度看Internet是一个理想的信息交流媒介从获取信息的角度看Internet是一个庞大的信息资源库。从商业运营的角度看在网上进行各种电子交易。从娱乐休闲的角度看Internet是一个花样众多的娱乐厅。*《网站设计与建设》*IntranetIntranet(内联网)是指企业内部网采用Internet的协议标准应用Internet的现有技术建设的企业内部网络。与Internet使用相同的信息技术从根本上改变了企业信息管理的方式提高了企业内部信息共享与交流的程度企业内部数据与企业外部数据交流更流畅*《网站设计与建设》*WWW(WorldWideWeb)欧洲核子物理研究中心(CERN)研制。环球信息网(WorldWideWeb)也简称为Web网或“万维网”。基于超级文本(Hypertext)方式的浏览器信息查询工具。浏览客户既是信息的享用者也是信息的提供者提供服务:HTTP、Telnet、FTP、Gopher、News、EMail等。在Web上可以看电影、电视、玩游戏、聊天、购物、学习和求职等。*《网站设计与建设》*网页、网站网页:也叫Web页是通过浏览器所看到的每一个画面包含了众多的信息如文字、图像、动画和声音等。网站:也叫站点是指在Internet上将一组网页组织规划彼此相连通过发布使在Internet上能看到这些网页信息这样完整的结构就叫站点。一个网站对应一个文件夹它其中可能还包含各种分门别类的子文件夹。*《网站设计与建设》*主页、超链接、超文本主页:HomePage是用户进入一个站点所看到的第一个页面是站点的目录总索引主页实际上是一个网站的入口点。超链接:网页还包含与其他网页相连的连接点这些连接点可能是图形也可能是文字它们叫做“超链接”通过点击可以转到另一个网页或网站或打开一个应用程序。超文本:不仅包含文字还包含声音、图形、图像、动画和视频等还实现非线性地存储、组织、管理和浏览信息的超链接。“超文本”也称超媒体它是WWW的核心技术。*《网站设计与建设》*Web媒体新特征多媒体:Web是丰富多彩的多媒体Internet是非线性的:用户可以随时跳转到其他网页或网站,传统媒体是线性的。一对一关系:大众媒体的概念和应用对于Internet无效,传统媒体为广播式传播。互动、主动获得信息:与被动地接受广播信息有本质的区别。交互性:聊天、博客(部落阁)、BBS、在线游戏和电子商务等。个性化:可提供一对一的客户需求信息。*《网站设计与建设》*Web媒体新特征平等身份:可以平等身份获取信息和发表信息信息搜索能力:有强大的信息搜索能力如百度、google即时性:一旦信息发布瞬间就可借助Internet传遍世界各地任何一种传统媒体所做不到的。BS结构:Web站点发布与传统软件CS不同省时省力、便于维护与发布。无需培训:易于浏览信息、不需要任何客户培训无须安装与卸载客户端软件。充分使用原有信息:传统媒体难于使用众多类信息和陈旧信息Web媒体还有信息变化快、易修改、传播速度快和传播成本低等特点。*《网站设计与建设》*Web技术与设计工具Web技术是人类所经历的发展最快的技术BS技术:浏览器服务器模式所有页面信息和数据都放置在了服务器端客户机上只需要有浏览器。Web常用技术:ASP、PHP、JSP、ASPNET、HTML、DHTML、CSS、XML、AJAX、JavaScript和JavaApplets。网页设计工具:Dreamweaver、FrontPage、HotDogProfessional、NetscapeCommunicator、IBMRSA、Eclipse、WebPageMaker和BEAWebLogicWorkshop等。*《网站设计与建设》*Web客户的Web客户只扫描网页的关键字和短语。普通客户读Web内容比纸张慢。Web客户和站点设计关系:Web设计必须吸引人以客户为本引导他快速找到他所需要的内容。Web客户不希望网页充斥无关内容和混乱图像。内容很重要布局和传递也很重要。*《网站设计与建设》*Web客户与Web设计(Web设计最基本原则)Web设计概念总在发展:随着人们的欣赏水平和设计技术的提高规则和概念是不断发展变化的Web是一个动态媒体。Web最基本设计原则:Web内容永远是第一位的多媒体外观设计与设计技术始终是第二位的。网站设计主要目的是为用户而不是设计者浏览信息与CS应用程序的使用者浏览信息也有很大区别。针对客户群设计突出客户最需要的信息。站点设计既应该专注客户的共性也应该兼顾个性。简洁、方便和快速。滥用多媒体会阻碍用户。*《网站设计与建设》*客户资源与Web设计网站设计人员:最新的硬件、软件和插件。设计基础指导原则:最小公分母设计:使用大众客户最低的环境设计网站让更多客户可顺利浏览网站。≤吋显示器。分辨率:*或*MADSLIE或更早极少用户会花时间下载插件(flash)参照著名网站的设计(最有效)网站设计还要特别考虑你的客户群*《网站设计与建设》*Web页面与传统软件用户界面都依赖于同样的图形用户界面(GUI)即含有同样的基本设计构件:窗口、图标、菜单和指针。Web页面更注重的是信息的展示而传统软件界面更注重的是系统功能的实现。Web站点比传统软件更专注于内容。Web内容丰富多彩可以是文本二维图像、三维动画、音频、视频或多种内容形式的混合体。*《网站设计与建设》*Web页面与传统软件用户界面(续)Web页面(Yahoo中国主页)*《网站设计与建设》*Web页面与传统软件用户界面(续)传统软件界面(MicrosoftSqlserver企业管理器)*《网站设计与建设》*有效的Web页面布局Web页面布局是对页面的整体规划即对页面划分成不同的区域用于放置不同的页面内容。链接到细节摘要提示信息列表Web页面布局是一个翻转的金字塔首先提供给用户一个摘要列表然后是对细节的链接或者引用。*《网站设计与建设》*网页布局元素网页布局在建立网站前应首先考虑网站的外观和结构,页面布局按照导航元素放置的位置进行分类。从视觉和技术角度审视整个页面元素以及它们之间的关系。然后在整个网站上贯彻所选择的元素:布局、字体、颜色、图像以及其它多媒体元素。页面布局是设计人员向用户展示信息的方式必须规划一个结构要具有逻辑性、易于理解并遵守它。*《网站设计与建设》*常见布局格式:按导航元素放置的方式分类左边空白布局上边空白布局右边空白布局上下页面布局分布式的布局艺术风格布局*《网站设计与建设》*空白布局元素“空白”在网页设计中非常重要它使网页简洁、明快阅读舒畅是网页设计中必不可缺少的元素。“空白”是分隔其他元素的最主要因素。切记不要将尽可能多得信息放在一个网页中应该有合理的、简明的分类不要强迫客户从一堆信息中艰难地挑出所需要的信息要让客户自己选择是否进入更深的链接获得信息。开发设计人员可以使用表和GIF图像来给页面添加空白。可以使用无边界HTML表定位内容提供无内容的区域来布局页面。*《网站设计与建设》*页面布局方法纸面布局法:在设计页面布局时需要在纸面上画出页面布局的草图将你的设想落实到纸面上查看设计效果。软件布局法:使用图形软件工具设计页面布局草图软件可以使用你比较熟悉的图形软件例如Photoshop、Fireworks等。切忌不要边设计边修改页面布局否则会浪费很多时间和精力一旦确定就不要轻易修改。先在纸上画出草图。*《网站设计与建设》*页面布局技术CSS页面布局:能完全精确的定位文本和图片CSS是现在一个比较流行的页面布局方法。表格页面布局:几乎成为一个标准可对不同对象加以处理。每一个单元格可以放置不同对象易于内容对齐。表格边界应设置为。框架页面布局:框架页面以左上角对齐每个框架部分都可以独立控制而表格就不可以。透明GIF页面布局:占位图像Flash页面布局:强大功能、信息更丰富视觉及听觉效果要比其他布局更加具有冲击力。*《网站设计与建设》*图像大小和分辨率:图像应尽可能的小(单位:KB)图像应选择合适的文件格式页面尺寸尽可能的小现在流行分辨率:**避免水平滚动页面*《网站设计与建设》*颜色与Web设计网站颜色给客户最直接的视觉冲击它在网站的感知和展示上扮演重要角色。企业的文化、风格和态度可以通过网站的颜色体现出来好的色彩搭配可以使网页独具魅力相反则使浏览者感到厌烦。网页色彩的选择包括:色调、背景、文字、图表、边框和链接等应采用何种色彩以及如何搭配等内容。*《网站设计与建设》*颜色与Web设计(续)发光物体三基色:红、绿、蓝(RGB)不发光物体的印刷四色:青、洋红、黄、黑(CMYK)颜色显示:像素颜色三要素(HSB):色相、饱和度、明度颜色格式浏览器安全颜色:个颜色用于OS剩下的种颜色用于页面。抖动是浏览器将颜色近似为它所支持的最相近的浏览器安全颜色的过程。配色方案:色调、配色方案、配色工具*《网站设计与建设》*颜色确定原则:最直接的视觉冲击颜色简洁、新颖、舒服、大方充分体现企业的文化形象网站应该使用企业原有CI颜色。选择与网站主体一致的网站色调选择一种适合的配色方案除了黑色和白色以外选择三到四个颜色就足够了太多的颜色会导致杂乱令人厌烦。网站的色系可以分为暖色系、中性系和冷色系几种。网页色系要整个网站需要保持一致。*《网站设计与建设》*颜色确定原则续网站的色系包含了网页底色、文字颜色、图片颜色、动画颜色和边框颜色等。图片的颜色尽可能的少减少图片尺寸尽量使用浏览器支持的个Web安全颜色IT国际著名公司IT国内著名公司国际著名大学国内著名大学*《网站设计与建设》*字体和Web设计:文本字体、图像字体标准、大方、清晰、引人入胜、协调英文字题:TimesNewRoman、Arial中文字体:宋体磅或磅(相当于WORD的五号宋体字)磅汉字大小为缺省设置。对于非标准字体浏览器使用近似字体特殊效果字体应放在图形中段落行不易过长不要横跨整个浏览器窗口改变页边距、行边距和颜色增加字体效果字体在整个网站上使用一致性原则使用同一种字体表示同类型的数据或信息*《网站设计与建设》*第章小结Web基本概念:网站、网页、主页等Web媒体比传统媒体的新特征Web常用技术和设计工具Web客户及资源与Web关系页面布局常用格式颜色选择原则字体选用原则*《网站设计与建设》*第章思考问题endWeb媒体与传统媒体有何区别?Web设计中客户是第一位的与内容是第一位的矛盾吗?怎样理解空白在页面布局中的作用?什么是浏览器的安全颜色?颜色抖动的含义是什么?什么是单色方案、相似色方案、互补色方案和三色方案?访问国内外各个以上的著名大学的计算机学院(系)的网站总结这些网站页面布局、颜色方案、字体选择和导航等特点。为自己的个人网站设计一个主页方案。*《网站设计与建设》*http:wwwcssdueducn返回*《网站设计与建设》*http:wwwmicrosoftcom**《网站设计与建设》*http:wwwmicrosoftcom**《网站设计与建设》*http:wwwmicrosoftcom*返回*《网站设计与建设》*http:wwwhyattcom*《网站设计与建设》*http:wwwcaselogiccom返回*《网站设计与建设》*http:wwwamazoncom返回*《网站设计与建设》*http:wwwpkueducn返回*《网站设计与建设》*http:wwwartcom返回*《网站设计与建设》*http:wwwtsinghuaeducn返回*《网站设计与建设》*http:wwwsinacomcn返回*《网站设计与建设》*http:wwwvastorientcomcn*《网站设计与建设》*http:wwwvastorientcomcn返回*《网站设计与建设》*返回*《网站设计与建设》*返回*《网站设计与建设》*发光物体三基色:红、绿、蓝(RGB)红(R)、绿(G)、蓝(B)等量的三基色混合成白光适合发光的物体如显示器。色环:将色彩按“红黄绿青蓝紫红”依次过渡渐变就可以得到一个色环。*《网站设计与建设》*色环可将颜色分为:暖色系、中性系和冷色系暖色系:红、橙、橙黄、黄等色彩表现温馨、和煦、热情。中性系:黄绿、绿等色彩表现舒适、和谐。冷色系:青绿、蓝绿、蓝等色彩表现宁静、清凉、高雅。加色:RGB颜色合成可以产生白色%红、%绿和%蓝将产生纯白色。返回*《网站设计与建设》*不发光印刷四色:青、洋红、黄、黑(CMYK)不发光物体:颜料、印刷媒体减色:CMYK颜色混合形成黑色的颜色%青、%黄、%洋红和%黑将产生黑色。当四种分量的值均为时就会产生纯白色。由于所有打印油墨都包含一些杂质因此CMY这三种油墨实际生成土灰色必须与黑色(K)油墨合成才能生成真正的黑色。返回*《网站设计与建设》*颜色显示:像素一个像素表示图像的元素是在屏幕上显示的最小元素。屏幕使用像素显示文本和图形每一个像素一次只能显示一种颜色。同一幅图片在不同的计算机上显示的颜色略有不同其主要原因是色彩不仅与颜色的设置值有关还与显示器的类型、设计、显卡、计算机的配置以及周围的室内光线有关但颜色设置值(RGB)是主要因素。返回*《网站设计与建设》*颜色三要素HSB:色调、饱和度、亮度(或明度)色调(Hue简称:H):指颜色的种类颜色的基本面貌和性质。如:红、绿、蓝等各种颜色。色调H的单位是度表示在颜色环上所处位置的角度饱和度(Saturation简称:S):指颜色的深浅程度或浓淡程度。饱和度S的单位是百分比。亮度(Brightness简称:B):指颜色的明暗程度。如白色亮度高黑色亮度低黄色亮度最高紫色亮度最低。亮度B的单位是百分比。非彩色(指黑、白色和各种深浅不一的灰色)只有亮度特征没有色相和饱和度的区别。返回*《网站设计与建设》*颜色格式RGB:“”绿十六进制数:“#FF”绿RGB颜色格式是一个位颜色模式每一个RGB值是一个字节(位)即每一种颜色有三个字节表示:位(红)位(绿)位(蓝)=位R、G、B均为时就合成了白光R、G、B均为时就形成了黑色。返回颜色RGB十六进制红FF绿FF蓝FF白FFFFFF黑*《网站设计与建设》*http:wwwlyndacomhexhhtml*《网站设计与建设》*返回Photoshop拾色器:Web安全颜色*《网站设计与建设》*配色方案色调红色:激奋色彩代表热情、奔放、喜悦、庆典有刺激效果能使人产生冲动有愤怒、热情和活力的感觉。例如党团或节庆网站。绿色:介于冷暖色之间代表植物、生命、生机、蓬勃向上、和睦、宁静、健康、安全的感觉。植物园、动物园、游乐园、旅游网站、医院网站和环保网站常采用绿色为基调的网站。。橙色:具有轻快、欢欣、热烈、温馨、时尚的效果。例如女性博客或网站常使用这种颜色为主色调。黄色:代表高贵、富有具有快乐、希望、智慧和轻快的个性它的亮度最高。该颜色一般与红、蓝、橙等颜色做搭配颜色。*《网站设计与建设》*配色方案色调(续)蓝色:凉爽、清新、专业的色彩。代表天空、清爽、深远的感觉能体现柔顺、淡雅、浪漫的气氛。例如Microsoft公司IBM公司网站。紫色:代表浪漫、爱情并给人以神秘、压迫的感觉。棕色:代表土地。例如对于沉稳、古色的网站。白色:代表纯洁、单纯、简单具有洁白、明快、纯真、清洁的感受。黑色:代表严肃、庄严、夜晚、沉着具有深沉、神秘、寂静、悲哀、压抑的感觉。例如记悼网站。灰色:代表阴暗、消极具有中庸、平凡、温和、谦让、中立和高雅的感觉。主要用于配色特别是按钮、方框和图片边缘修饰。*《网站设计与建设》*配色方案:单色方案、相似色方案、补色方案和三合一色方案单色方案:在网站设计中始终使用一种基本颜色为避免单调我们可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色。单色方案是一种比较稳重的方案给客户简洁、清雅和经典的感觉比较适于风格严谨的网站比如政府网站学校网站、学术网站企业网站等。*《网站设计与建设》*配色方案:单色方案、相似色方案、补色方案和三合一色方案(续)相似色方案:色彩圆环上选择彼此相邻的几种颜色构成的配色方案。例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。典型做法是用一种颜色作为页面背景而另外一种在颜色环中与其相邻的颜色作为前景色。除了绿色和黄色之外蓝色和绿色以及红色和褐色也是比较常用的相似色配色方案。*《网站设计与建设》*配色方案:单色方案、相似色方案、补色方案和三合一色方案(续)互补色方案:在色彩圆环上沿直径相对应的两种颜色构成一对互补色。双重互补色:分别在色彩圆环两个互补色的临近两边选择两个相似色就可以得到一个由这四种颜色组成的。*《网站设计与建设》*配色方案:单色方案、相似色方案、补色方案和三合一色方案(续)三色方案:是指在色彩圆环中选择一个等边三角形三个顶点上的颜色构成的配色方案。例如红、黄、蓝是一个三色方案。Photoshop构造三色方案方法:首先选中一种颜色记下它的H(Hue)值然后为这个值加得到另一种颜色(H的单位是“度”也就是沿色彩圆环旋转的角度)以此类推得到第三种颜色构成一个三色方案。*《网站设计与建设》*配色方案:配色工具*《网站设计与建设》*http:wwwmicrosoftcom*《网站设计与建设》*http:wwwmicrosoftcom–最新*《网站设计与建设》*http:wwwmicrosoftcomzhcndefaultaspx–最新*《网站设计与建设》*http:wwwintelcom*《网站设计与建设》*http:wwwintelcom–新封面*《网站设计与建设》*http:wwwintelcom–新*《网站设计与建设》*http:wwwsuncom*《网站设计与建设》*http:wwwsuncom–新*《网站设计与建设》*http:wwwibmcom*《网站设计与建设》*http:wwwibmcom新*《网站设计与建设》*http:wwwhpcom*《网站设计与建设》*http:wwwhpcom–新*《网站设计与建设》*http:wwwapplecom*《网站设计与建设》*http:wwwapplecom新*《网站设计与建设》*http:wwworaclecom*《网站设计与建设》*http:wwworaclecom–新*《网站设计与建设》*http:wwwdellcom*《网站设计与建设》*http:wwwdellcom–新返回*《网站设计与建设》*http:wwwlenovocom*《网站设计与建设》*http:wwwlenovocom–新*《网站设计与建设》*http:wwwfoundercom*《网站设计与建设》*http:wwwfoundercom–新*《网站设计与建设》*http:wwwsinacomcn返回*《网站设计与建设》*http:wwwsinacomcn–新返回*《网站设计与建设》*http:wwwharvardedu*《网站设计与建设》*http:wwwharvardedu–新*《网站设计与建设》*http:wwwYaleedu*《网站设计与建设》*http:wwwYaleedu–新*《网站设计与建设》*http:wwwPrincetonedu*《网站设计与建设》*http:wwwPrincetonedu–新*《网站设计与建设》*http:wwwstanfordedu*《网站设计与建设》*http:wwwstanfordedu–新返回*《网站设计与建设》*http:wwwtsinghuaeducn旧*《网站设计与建设》*http:wwwtsinghuaeducn新*《网站设计与建设》*http:wwwtsinghuaeducn新*《网站设计与建设》*http:wwwpkueducn旧*《网站设计与建设》*http:wwwpkueducn新*《网站设计与建设》*http:wwwpkueducn新版*《网站设计与建设》*http:wwwsjtueducn旧*《网站设计与建设》*http:wwwsjtueducn新*《网站设计与建设》*http:wwwsjtueducn新*《网站设计与建设》*http:wwwfudaneducn旧*《网站设计与建设》*http:wwwfudaneducn新*《网站设计与建设》*http:wwwfudaneducn新*《网站设计与建设》*http:wwwzjueducn旧*《网站设计与建设》*http:wwwzjueducn新*《网站设计与建设》*http:wwwzjueducn新*《网站设计与建设》*http:wwwsdueducn旧*《网站设计与建设》*http:wwwsdueducn新*《网站设计与建设》*http:wwwsdueducn最新返回****************************************************************************************************************

用户评价(0)

关闭

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

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

提示

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

评分:

/112

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利