网站和网页设计ppt课件.ppt
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_05.gif)
《网站和网页设计ppt课件.ppt》由会员分享,可在线阅读,更多相关《网站和网页设计ppt课件.ppt(36页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、网站和网页设计ppt课件 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望Web设计概念纵览 Web设计起源于使用专用的Web开发技术简单地在Web页上复制印刷材料。网站设计人员需要了解大量的网页设计工具和技术来创建吸引人的网页。在本课中,我们将探究如何使用排版和导航创建引人人胜的网站,使用最优秀的图形和设计元素创建可以快速下载的页面,理解在Web设计周期中商业运作的重要性,客户和服务器上的编程如何影响Web用户的体验,Internet管理机构在网站设计上制定的标准
2、的影响,Web创作软件在网站设计中扮演的角色,以及如何发布维护网站,等等。尽管许多人认为,网站的设计和它的内容相比是次要的,但本章将说明设计在用户体验中的重要作用。公共设计原则例如颜色、字体的选择,以及在页面上元素的布局所有的元素共同作用才产生一个用户界面友好的网站。为了全面地欣赏和理解设计扮演的角色,我们将围绕Web技术、Web和传统媒体的不同、设计概念以及创建网站的工具和技术进行深人研究。Web技术 现在我们喜爱的Web技术是人类所经历的发展速度最快的通信手段。它赋予消息发送者和接受者更大的权利换句话说,就是内容的发布者和内容的读者。现在许多人转向Web而不是使用报纸或者其他的传统途径来寻
3、找信息。Web上的信息可供全世界用户使用,可以快速、准确、详尽地传播。在大多数商业广播、电视和印刷广告上都包括Web地址,为用户提供可以立即访问帮助学习和决策的更为个性化和具体的信息检索方法。网站设计人员的责任是为接收者传递适当的可视消息,因此,设计的概念和内容一样重要。长期的Web用户非常清楚网站设计的变化。早期站点的内容是冗长的纯文本,这一倾向发展为在复杂性和先进性方面可以和电视、印刷这样的广告媒体进行竞争的开发设计方法。为了能够竞争,现代办公环境中的每个人将致力于开发信息体系。网站正在变成包括来自公司各方面信息的复杂的结构:人力资源、销售和市场、存货和发行,等等。因为和传统的通信形式不同
4、,这些内容有助于理解什么是在Web上显示信息的有效形式。丰富的工具和技术使新手相有经验的网站设计人员都可以更轻松地设计网站。设计人员必须选择可以给企业带来竞争力的工具。在后面“应用程序和工具”中,我们将看到一些经常使用的网站设计工具,例如Microsoft的FrontPage、Macromedia的Dreamweaver、Flash和HomeSite,以及Paint Shop Pro。同学们会发现,每一个工具都有自己的特性和优势,根据这些,可以选择最适合的工具来达到需要的效果。Web属性 大多数网站设计人员从自己的角度出发从事开发。他们对用大众广告的隐喻向大众展示信息有兴趣。但是,Intern
5、et给出了另一种方法:一对一关系的能力。网站用户对于根据他们具体需要裁减的信息和产品响应得更好。应该理解,在本质上,Internet是允许用户决定访问的信息和何时访间的媒体。该事实使Internet成为一个一对一的媒体(one-to-one medium),这和广播媒体(broadcast medium)相反。因此,大众媒体的概念和应用对于Internet无效。大众传媒的目标是引起最终能达到他们期望目标的电视观众或者读者的兴趣。本质上,阅读杂志或者看电视的行为不能进行交易(transactional)。读者或者观众所需的惟一动作就是读或看。信息是被广播给被动人群的,因此,为大众媒体创作信息需要
6、的战略和为Internet创作信息需要的战略不同。本 质 上,Internet是 可 进 行 交 易 的 (transactional)。Internet的整个体验,从访问Internet到浏览Web,根据用户请求和服务器响应是可以断定的,换句话说,是可进行交易的。而且,从本质上,Internet是非线性的。通常,用户做出交易决定,先到网站,然后呆在网站,进行电子商务,再决定以后是否返回该网站。然而,用户可以在选择的任何时候切换到另一网站进行另一个交易。当前的Web开发方向 Web开发在过去的3年里变得更加完善,主要是在多媒体的进步上。现在,通过Web可以访问新的数据类型。数据驱动的内容己经成
7、为许多Web应用和项目的一个主要部件。数据驱动内容的好处是它可以反应最新的信息、数宇以及统计,因为数据是在用户请求时从数据库中取得的。继电子商务之后,Internet开发己经成为了Web发展中第二大成长的领域。Internet带来基于Web的内部网络,为一个特殊组织的雇员或者成员提供可使用的网络。因为雇员可以容易地访问经常使用的数据和文档,结果产生了一个更有效更富于成果的工作环境。在Internet上可以用比传统媒体更具实效的方式访问对时间敏感的信息。对于外部的销售商和交易伙伴,正在快速形成Extranet来实现公司外部的数据需求和流水交易过程。Extranet为被选择的外部用户提供产品、服务
8、和关键交易信息的交换。例如,公司A给公司B提供纸张。如果公司A通过Extranet访问公司B的存货状态,它就能知道何时需要给公司B送货。然后,公司A就能在没有公司B请求的情况下开始送货。设计概念 Web设汁概念总在发展。Web不是一个像印刷媒体那样的静态媒体,记住这一点是很重要的。因此,规则和概念是在不断变化的。网站设计最常见的一个误解是一个好的网站必须以多媒体技术让用户眼花缭乱,而网站的内容是第二位的。这个观点是错误的。作为一个网站设计人员,希望用户有一个满意的体验,但是让他们眼花缭乱并不是目的。网站设计的主要目的是给用户他们所要的,而不是设计者认为他们需要的。通过良好的设计、高质量的内容以
9、及正确使用可用媒体的复杂的平衡可以达到这一目标。大量的研究认为,滥用多媒体会阻碍用户,因为他们或许不具备支持的能力,或许不希望等待过长的下载时间(网页的理想下载时间应小于10秒)。最后,如果不能满足Web用户的需要或者期望,他们将在别的网站得到。仅从自己的角度而不是从用户的角度来考虑,网站设计人员一定会发现不满的Web访问者、客户和消费者。Web媒体和传统媒体 网站设计人员越来越多地意识到Web设计和其他媒体(尤其是印刷媒体)设计的不同。在早年的网站设计中,许多网站是印刷册子和其他市场工具的简单的HTML复制品。这种方式是公司急于将他们的信息张贴在Web上所致。此外,Web是一个新领域,还没有
10、技术或者统计数据来证明它的有效性。有些公司早早地认识到,在Web上粘贴小册予并不是对媒体有效的使用。他们简单地在Web上重新制作了印刷品,并认为电子格式会和印刷格式一样成功。印刷媒体本质上是线性的linear):一行接一行,一页接一页。Web是非线性(nonlinear)媒体,允许用户链接(超级链接)到网站的不同地方或者网站之外。例如,用户可以决定去哪里,而不需要按照书刊的严格组织结构。因此,Web具有以传统线性方式使用时不能开发的不同特性。最大的特色是通过网站用户和企业之间的交互性。传统的印刷媒体不能使用户体验个性化。相反,Web媒体可以为用户优化交互的可能性以及个性,创建企业和用户之间的直
11、接连接。这通过新技术得以实现,例如动态HTML(DHTML)、层叠样式表(CSS)、扩展标记语言(XML)、JavaScript和Java Applets。工具和技术 几年前,还在争论是否使用专用工具帮助Web开发过 程,但 是 现 在,许 多 HTML编 辑 工 具 和WYSIWYG(What You See Is What You Get)编辑器是第三代和第四代了,已经成为了完善的应用程序。争论不再是设计人员是否使用这些工具,而是该使用哪一个工具。从今天开发的角度看,手工编码和WYSIWYG功能结合是最好的选择。只用手工编码HTML来开发一个动态网站需要太多时间。经常更新信息,以及在公司网
12、站和Intranet或Extranet网站上进行设计的需求,要求必须结合两种网站设计方法。当今市场上有两个WYSIWYG设计工具:Macromedia Dreamweaver和Microsoft FrontPage。我们将讨论创建网站使用的工具,以及能优化HTML效率的特性。我们将讨论这些程序中的设计选择以及网站管理的重要特征。这些强大的网站管理特征让这些程序站到了工业界竞争的前沿。通常,在网站开发时会联合使用许多工具。本书侧重网站设汁协作应用方法。关于更高级的主题,例如图像和动画,我们将扼要介绍,帮助开发Web。关于图形和动画的应用程序。Macromedia Flash是这些产品之一。Fla
13、sh允许传递丰富的多媒体内容并节省带宽,这对于网站设计人员是一个很有价值的产品。新技术学习了网站设计可以使用的工具之后,必须对它们进行评估,以决定它们是否能包含允许构建动态网站为用户创建更具个性 体 验 的 新 技 术。例 如,Microsoft FrontPage和Macromedia Dremweaver都实施了动态HTML(DHTML)功能,允许你利用该技术。在本课中,我们也将讨论其他新近开发的技术,例如层叠样式表(CSS)和扩展标记语言(XML),还将讨论网站中使用的JavaScript和Java applets。此外,我们还会讨论World Wide Web Consortium在最
14、新标准上的进展,以及测览器制造商在开发新技术方面的发展。在本课中,你可以知道几个在网站开发中使用的工具。本课的目的不是让同学们成为使用任何一个工具的专家,而是给同学们关于每一个工具主要部件的足够信息,使同学们可以做出明智的决定使用哪一个工具来满足自己的需要。Web用户和站点设计 猜猜看,网页上有多少文本用户会去真正阅读?全部?大多数?真相是几乎都不读。大量的统计表明,80的Web用户只扫描网页内容,寻找关键宇和短语。而且,普通用户读计算机显示器的内容比纸张上的慢25。这个事实是如何影响页面布局的呢?作为设计人员,必须创建允许用户快速扫描找到所需信息的页面。记住,当前网站设计的一个错误观念是,W
15、eb只是打印媒体的另一种形式。当设计人员用和小册子或者简讯相同的内容创建网页时,用户很有可能转向别的站点。用户到达站点时的第一印象很重要。网站可能是企业通向世界惟一的窗口。如果它不吸引客户,企业将会失去这些客户而给竞争者。因此,如果知道用户只是扫描页面,为什么还试图强迫他们阅读不感兴趣的内容呢?让用户满意,给他们所需要的,他们就会回来。用户不希望页面上充斥了无关内容和混乱图像。内容是很重要的,但是 布局和传递也很重要。Web是以自我为中心的:用户只对需要的东西有兴趣。零售业人士认为,消费者是自私的,因为客户知道,他们的账单让企业生存。通常用户访问网站是因为他们需要特定的信息,或者是为了研究,或
16、者是为了购物。任务越简单,生意成功的可能性就越大。如果明白这些,就能够用可以赢得用户的布局特性来创建网页。看看一个网站,例如。到达网站后,将看到一个前导标题,一个来自故事的图片,一个简介故事的段落,一个到整个故事的链接。用户可以从图片和简介中立即知道故事的主题,可以找到更多想要的。或者,可以扫描下一个标题,快速决定CNN站点上每一个故事的主题。只要一个点击就可以离开任何一个故事。CNN网站提供了容易的扫描,因为可以快速得到所需要的,用户再次访问的可能性就大。设计基础 作为网站设计人员,考虑新技术并将它在最新的设计中实施是令人兴奋的。通常,网站设计人员可能有最新的硬件、软件和插件。尽管创建新的硬
17、件和软件能够支持的最具有动态和交互性的网站是极具诱惑力的,但大多数Web用户并不追求最高端的设计。在为大众设计时,一个好的指导方针是为最小公分母(lowest common denominator)设计。考虑如下内容:大多数用户使用15寸或更小的监视器。许多用户使用的分辨率是640480。大多数用户使用28.8Kb/s的MODEM连接。大多数用户测览器的版本是4.x或者更早。极少数用户会花时间下载插件。总是存在例外。许多用户正在升级到56Kb/s的MODEM,并使用800600的屏幕分辨率设置。但是,留心这些惯例将指导你创建大多数用户可以使用或者浏览的网站。有效的Web页面布局 想想自己喜欢的
18、报纸布局。首页有前导故事(lead story),有一边包括一列,它给出了报纸中故事的其他特征。这是如何影响阅读体验的呢?该布局不会强迫你阅读首页的故事然后再翻页寻找你所感兴趣的其他内容。如果看了故事摘要,并且还想深人地阅读,那么一个页号或者链接会将你引导到整个故事所处的位置。该布局通常被比做一个翻转的金字塔。该样式首先给用户提供了一个故事摘要列表,然后是对细节的链接或者引用。Web是此类传送的一个理想媒体。使用超级链接,可以给用户发送任何数量的关于主题、故事、新闻、产品或者服务的细节。也可以提供到文档或者相关信息的链接,这些是报纸由于缺少空间、时间和资源而不能提供的。如果用户需要更多的信息,
19、他们可以根据自己的判断去测览。否则他们可以转移到别的地方去。网页布局元素 在网站制作过程开始前,考虑一下网站的外观和结构。必须从视觉和技术的角度理解组成整个页面的元素以及它们之间是如何交互的。然后,应该在整个网站上贯彻所选择的元素。这些网页元素包括布局、字体、颜色、图像以及其他多媒体。页面布局指的是网站设计人员向用户展示信息的方式。格式应该是有逻辑性的和易于理解的。像在文档或者报告中一样,结构格式将帮助分类、简化和阐明信息。作为网站设计人员,你必须规划出一个结构,并遵守它,使用户体验是有意义和富有成果的。在计划网页布局时考虑以下项目:Frameset(框架集)允许同时显示多个页面Margin(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 网页 设计 ppt 课件
![提示](https://www.taowenge.com/images/bang_tan.gif)
限制150内