本书系统全面地介绍Web页面外观设计的相关知识。本书分为八章:导论、站点分析、导航、页面布局、色彩、图形、排版和表单。全面讲解网站界面所涉及的内容,叙述生动,由浅入深,提供了大量的示例代码以具体地说明如何运用所讨论的设计概念。.\r\n
本书可供Web开发技术人员和美工人员参考。...
译者序.
前言
第1章 现代Web视觉设计入门 1
1.1 Web技术回顾 3
1.2 网站开发生命周期 16
1.3 内容分析入门 20
1.4 网站架构分析入门 20
1.5 可用性因素入门 21
1.6 视觉设计入门 25
1.7 交互设计入门 33
1.8 Web可访问性入门 34
1.9 本章小结 38
第2章 网站分析 40
2.1 明确组织目标 42
2.2 确定目标受众 45
2.3 确定目标受众的目标 48
2.4 决定网站约束条件 51
2.5 决定网站的内容 53
2.6 定义网站架构 58
2.7 本章小结 69
第3章 导航 72
3.1 导航入门 72
3.2 链接功能 84
3.3 导航可视性 90
3.4 链接状态 91
3.5 导航文本 93
3.6 导航图像 102
3.7 导航组织工具 110
3.8 链接可靠性 130
3.9 导航与可访问性 132
3.10 本章小结 134
第4章 页面布局 137
4.1 技术考虑因素.. 137
4.2 美学问题 152
4.3 分镜头脚本设计:勾勒出页面布局草图 177
4.4 页面布局与可访问性 180
4.5 本章小结 182
第5章 色彩 185
5.1 色彩理论 186
5.2 定义Web颜色 203
5.3 选择配色方案 215
5.4 色彩与可访问性 232
5.5 本章小结 234
第6章 图形 237
6.1 原则和术语 238
6.2 Web图像格式 249
6.3 获取图像 260
6.4 创建并编辑图像 267
6.5 背景图像 277
6.6 图形使用提示 285
6.7 动画 288
6.8 图形与可访问性 292
6.9 本章小结 293
第7章 排版 298
7.1 排版基础 299
7.2 HTML文本 305
7.3 图形文本 315
7.4 文本与可访问性 318
7.5 本章小结 318
第8章 表单 321
8.1 表单设计原则 321
8.2 输入控件 323
8.3 表单完成 337
8.4 事务处理结构 341
8.5 输入表单页面布局 344
8.6 访问者支持 348
8.7 表单控件视觉设计 355
8.8 输入表单与可访问性 358
8.9 本章小结... 359
Web设计中,什么最重要?毫无疑问,内容!但是,能够在一瞬间,抓住访问者眼球的是什么?是外观!.
单从书名,就可以看出,本书主要阐述Web设计中的“视觉设计”方面。“爱美之心人皆有之”,在Web领域也不例外。无论网站界面采用什么样的设计风格,或简约、明快,或复杂、精致,大家都喜欢井然有序、外观漂亮的网站。漂亮的外观,首先给访问者一个不错的第一印象。
然而,我们大家都知道,网站仅有漂亮的外观是无法长久地吸引住用户。除了漂亮的外观,网站还必须有好的内容,条理清晰的网站架构,易于使用的导航,等等。所有这一切综合在一起,才能够牢牢地抓住用户,增强用户的忠诚度。细读本书,你会发现,本书作者的视野并非只局限在如何进行“视觉设计”。
作者高屋建瓴,从Web设计全局考虑出发,先阐述了Web设计的总体原则,以及Web设计中相互依赖、紧密联系的5要素(内容、技术、网站架构、视觉设计、交互)。紧接着,作者没有直接阐述有关视觉设计的内容,而是先进行网站分析,引导读者去思考,网站的宗旨是什么?网站的目标受众有哪些?目标受众的目标是什么?只有在明确了这些问题之后,我们才能够集中有限的时间和精力,为用户提供最好的产品和服务。
在确定网站的内容之后,我们就需要决定如何以有效、便捷的方式,为用户呈现这些内容。而这就涉及到如何定义网站架构的问题。没有逻辑条理清晰、方便使用的网站架构,即使网站有好的内容,用户也很难从庞杂浩瀚的信息中找到自己所需要的内容。可以说,网站架构决定了网站的“功能”,而视觉设计决定了网站的“形式”。毫无疑问,无论是人还是产品,只有“外在美”而缺乏“内在美”,都无法长久地吸引人们的注意。..
网站的内容、呈现内容的方式等等基本问题解决之后,才到“视觉设计”的出场时间。“好酒也怕巷子深”。毕竟,好产品也要经过包装,才能被更多人更快地接受。作者站在Web设计全局的高度来阐述视觉设计,可以使读者清楚地知道视觉设计在Web设计中的地位,不至于产生以偏概全、主次不分的错误观念。
除此之外,作者还涉及Web设计中的可访问性问题。毕竟,出于人性化的考虑,我们设计出来的网站应该可以供所有人使用,不论访问者是否具有生理上的缺陷。由此可见,作者考虑问题的全面性、系统性。而这正是基于作者对于“系统分析与设计”的透彻研究和运用。
本书由叶永彬、雷钧钧、范一、杨旭旭合作翻译完成。众所周知,计算机方面的英文书籍大多使用口语化的表达方式,试图轻松、自然地表达枯燥、乏味的理论。而这增加了译者在翻译过程中的难度,同时也给读者造成了理解上的障碍。本书也不例外。因此,希望各位读者多多包涵。
在此,感谢在翻译过程中给予我们无私帮助的朋友们!...
叶永彬
2008年5月于郑州
数年前一个晴朗的秋日,我与我的上司,北伊力诺依大学计算机科学系的系主任Rod Angotti在一起闲聊。我抱怨说,我们系一些教员,或任何教员,应该开设一门Web设计课程。因为当时非常希望接手这门课程,我赌气地说,“如果在短时间内没有人开设这门Web设计课程,那么我只好自己来教这门课。”话虽如此但我对Web设计一点都不了解。诚然,我执教计算机科学这门课程已将近二十年。诚然,我一直是其他媒体领域的行家里手。但是,谈及Web设计?我却知之甚少。.
两周后,公布了春季教学进度表。我作为Web设计这门新课程的教师,出现在教学进度表中。我能做什么呢?我要迅速地了解掌握Web设计方面的知识。幸运的是,在第一个学期我就可以亲自挑选我的助教Jeff Cernauske(Jeff Cernauske已获得艺术学学士学位,包括Web设计)以及我的学生(渴望与我共同冒险、了解这门科目的优秀学生)。随着课程的进展,我常常不得不说,“对不起,我不知道答案。让我们一起来寻找答案吧。”但是,我们感觉很棒。那个学期是我度过的最愉快的一个学期。可以说,那个学期不仅是对教师的一个挑战,也是对学生的一个挑战。
首次执教Web设计课程之后很长一段时间,Web设计依然令我非常着迷。现在,我不再经常说“我不知道”。即使如此,我的学生每年都会教会我一些新技巧。我并不羞于承认这样一个事实,我是一名Web设计教师,而非一名Web设计者。事实上,学生通过训练,他们的设计能力常常会超越我自己。这令我欣喜若狂。
那段经历是如何促成本书的?在执教Web设计课程的数年间,我始终没有找到一本令人满意的、全面的Web设计图书。HTML、CSS和JavaScript的图书,无论是教材还是参考书都随处可见。有些书华而不实,只是展示一些设计华丽的网站。而有些书,只是告诉读者,在设计当中不要做什么。但是,我从没见到一本简明扼要的书,可以系统地阐述设计概念以及如何将这些概念应用到网站中。我希望本书是这样的书。
本书具体涵盖了哪些内容呢?
首先,让我们先来谈一谈本书不包含什么。本书不包含以下内容,它们均需另外详述。
·HTML和CSS基础。我编写本书的前提是,你已经了解有关HTML和CSS的基础知识,也许还懂一点JavaScript知识(虽然这并不是必须的)。因为,在本书中我会给出许多HTML和CSS实例,用以展示如何应用所讨论的原理。
·Adobe Creative Suite。虽然我不具体讲解这些工具,但是我会使用来自这些工具的截屏图片,用以阐述一些技术。而这些技术在其他开发环境中同样能得以实现。
·有关服务器端的技术,比如ASP、JSP、ColdFusion、Perl和PHP。
·多媒体,包括声音和视频。
本书所要阐述的内容是设计概念,以及如何通过使用HTML、CSS和较少的JavaScript,将这些概念应用到网站中。聪明的读者可能从书名就已猜出,本书专注于视觉设计方面,以及那些令网站具有可用性、吸引力,并且难以忘记的特性方面。坦白地说,网站设计不是件容易的事情。因为要考虑的因素实在太多,涵盖了从技术到组织,再到美学问题,以致在最初之时我把本书的书名定为《Web Design Alchemy》(《Web设计炼金术》)。因为,中世纪的炼金术消除了科学、艺术、魔法之间的界限。虽然一个设计完美的网站不是中世纪的黄金,但是它确实是不可思议的。
目标读者
本书的读者至少需了解Web技术的一些基本原理,包括基本的HTML和CSS。除此之外,还应该是那些想要通过培养在Web设计方面的审美能力,从而进一步掌握Web技术的人:
·技术人员 懂计算机编程,急切需要学习Web设计中有关美学方面知识的技术人员。本书内容适用于那些没有受过正规艺术训练的读者。虽然各大公司通常由图形设计人员来做视觉设计工作,但是Web开发技术人员仍有必要熟悉美学理论,从而与图形设计人员进行交流并对其工作作出评价。还有一些小公司的技术人员,他们需要做Web设计方面的工作,但却没有受过任何设计理论方面的培训。虽然Web开发技术人员很少能够达到专业艺术家的设计水平,但他们依然可以通过学习,掌握足够的设计知识,从而创建专业的、具有吸引力的网站。毕竟,最优秀的程序员都是富有创造性的。
·美工和设计人员 掌握美学理论,但在如何将美学理论应用到Web技术媒介时,常常遇到困难的美工和设计人员。比如:调色。假如有红、黄、蓝、黑和白5种颜料,美工能够调出可以想象出来的任何颜色。但是,当调色媒介变成以十六进制数字呈现的像素,而且原色变成红、绿、蓝时,美工该如何调色呢?黄色由红、绿像素混合而成,这个事实对于大多数美工来说是完全陌生的。本书可以教授那些传统的美工,如何将他们的技能转化到Web上。
本书的特点
本书分为八章:导论、网站分析、导航、页面布局、色彩、图形、排版和表单。在这些章节中,我提供了大量的“代码示例”用以具体说明如何运用所讨论的设计概念。请注意:书中提供的代码示例通常都经过简化,只保留了与所讨论问题相关的代码。为达到清晰简洁的目的,我用本地CSS样式替代了更佳的外部样式表。
如对本书版本有任何疑问或建议,请您直接与我联系。如果您是使用本书授课的教师或教授,请与我联系索取可能对您授课有帮助的幻灯片及其他材料。
本书网站www.VisualDesignModernWeb.com,包含了各种各样的补充话题和精彩的趣闻。我希望,在本书出版之时,网站可以建好并投入运行。另外,今后我也会不断增加一些我创建的或发现的,您可能会感兴趣的内容。
致谢
对以下全体人员,我深表感谢。..
本书的审阅者 他们的建议和评论使本书得到极大地完善,同时,也令我受益匪浅。我再次感谢你们:Anita Philipp, Oklahoma City Community College; Anne Marie Shanley, County College of Morris; Antony Gauvin, University of Maine at Fort Kent; Arta Szathmary, Bucks County Community College; Blaine Robertson, Brigham Young University, Idaho; Bruce Long, University of North Carolina, Charlotte; Carol Buser, Owens Community College; Catherine Pace-Pequeno, Crafton Hills College; Chang Miao, DeVry University, DuPage Campus; Charles Goodman, College of DuPage; Christine L. Moore, College of Charleston; Craig Baehr, Texas Tech University; Dale Craig, Fullerton College; David Alger, Tidewater Community College; David Tarnoff, East Tennessee State University; Diana Hill, Chesapeake College; Diane M. Coyle, Montgomery County Community College; Don Bonidie, University of Pittsburgh; Donna Hendricks, South Arkansas Community College; Dorothy Harman, Tarrant County College, NE; Dr. Connie D. Lightfoot, Indiana Wesleyan University; Dr. Jerry Isaacs, Carroll College; Dr. Rich Rice, Texas Tech University; Dr. Richard L. Thornton, New England College; Dr. Sue Casey, Weatherford College; Edward A. Hoisington, Bedford School District K-12; Elizabeth B Kilroy, Temple University, Philadelphia and NYU, NYC; Elizabeth Drake, Santa Fe Community College; Fred Wells, Florida State University; Gary Kidney, University of Houston, Clear Lake; Gerald J. Ross, Lane Community College; Jack Brzezinski, DePaul University; James Gifford, University of Wisconsin, Stevens Point; Janet Pickard, Chattanooga State Technical Community College; Jayne Klenner-Moore, King's College; Jeanine Meyer, Purchase College/ SUNY; Jodi Neely-Ritz, University of Florida; John Avitabile, College of Saint Rose; John H. Humphrey, Asheville Buncombe Technical Community College; Joyce M. Dick, Northeast Iowa Community College, Peosta Campus; Judith Scheeren, Westmoreland County Community College; Judy Scholl, Austin Community College; Kathryn M. Baalman, Webster University; Ken Wanderman, California State University, Monterey Bay; Kenneth Wade, Champlain College; Kevin Floyd, Macon State College; Kevin R. Parker, Idaho State University ; Kristin Benner, Saddleback College; Liz Boese, Colorado State University; Lynn Komarek, Spokane Community College; Maria Martinez, University of Miami; Mark Van Beek, Tacoma Community College; Martin Granier, Western Washington University; Martin Kollman, Fort Hays State University; Melissa Swanson, Bay de Noc Community College; Michael Gildersleeve, University of New Hampshire; Michael Sturgeon, Lee University; Rebecca Hayes, American River College; Ric Heishman, Northern Virginia Community College, Manassas Campus; Robert J. Clougherty, Tennessee Tech University; Robert Kelly, Stony Brook University; Robert Kueper, Queensborough Community College; Sam Blanchard, Anderson University; Sheryl R. Schoenacher, Farmingdale State University; Shyamal Mitra, University of Texas at Austin; Srikanth Siva, Northwest Missouri State University; Steve Perry, Palomar College; Ted Shaneyfelt, University of Hawaii, Hilo; Teresa Pelkie, Palomar College; Thomas G Luce, Ohio University, Athens; Thomas Michael Smith, Austin Community College; Veronica Noone, Community College of Baltimore County; Will Devenport, Southern Illinois University, Carbondale; Yilin Fang, Diablo Valley College.
先后参与本书出版的三个出版社的所有工作人员 Scott-Jones出版社(在本书筹备过程中,Scott-Jones出版社被Addison-Wesley出版社所收购)的Richard Jones和Jean Coston。他们相信这本书可以开创一个前所未有的市场。没有他们坚定的信念就不会有此书。在本书初创阶段,他们对我关怀备至,甚至在本书还未付诸写作之前,就找了许多富有深刻见解的审阅者,并为本书建立起市场。Addison-Wesley出版社的Michael Hirsch。Michael Hirsch将本书介绍给我理想中的出版社—Peachpit Press/New Riders。Peachpit Press/New Riders出版社友好、乐于助人、才华横溢的工作人员将本书设计为一本漂亮的图书。Wendy Sharp看到了本书的潜力,他是我在Peachpit出版社的福音传递者,通过他的努力本书得以顺利出版。Charlene CharlesWill为本书做了精彩的设计,Becky Winter负责本书的制作,而Danielle Foster则是位优秀的排版师。我由衷地感激Wendy Katz。这位出色的编辑让我的语言更加优雅、清晰。她凌晨两点钟发来的电子邮件,可以让我忍俊不禁,这是一种充满意外与惊喜的奖励。
我的学生们 正是因为他们,使我在北伊力诺依大学的执教生涯赋有价值。正是那些真心向学的学生们,教会我如何成为一名更好的教师。也正是因为这些学生们,我放弃了在女儿还小时,暂时先做个老师的想法,转而要把教师作为我终身的职业。
我的上司 北伊力诺依大学计算机科学系的系主任(1983~2006)Rod Angotti无论是在任期间,还是在卸任之后,Rod一如既往地支持我。如果可以的话,我一定会阻止他退休。他的建议和关心帮助我和我的许多同事度过了学术界最为困难的一年。正如本书开篇小故事中所述,我要感谢Rod将我带入Web设计领域。头儿,谢谢您,感谢您始终相信我的工作能力。如果没有您,就不会有我今天的成就。始终记得,“COBOL语言的时代即将结束。”看来并非如此啊。
我的新系主任 Nick Karonis 在担任系主任之初,他便证明自己是一个娴熟的策略家和体恤下属的领导者。他正确的判断是我们系所急需的。Nick,在您两年任期即将结束的时候,我们能做些什么让您留下来呢?
北伊力诺依大学计算机科学系以及学校管理层的全体教职人员 近来,各种情形表明,我们正在团结起来,坚持我们的信念。我们做到了,而且我们系也得益于此,越来越好。虽然,我只是提名感谢Mary Letheby和Kai Rush。然而,要感谢的人实在太多,在此我就不一一列举。
我亲爱的朋友Jeff Denton Jeff Denton在我之前就勇敢地走进Web设计的世界,并给予我许多帮助。在组织我的第一节Web设计课程的过程中,以及在构思本书的过程中,他给予我的帮助是无法估量的。仅因为彼此都喜欢Mary Stewart的《The Crystal Cave》,就此建立了我们的友谊。Jeff,你的博学、技术上的帮助以及对我的鼓励,使本书顺利编著完成。这份友谊是上帝给予我的最好的礼物。
我的四个密友(用你们的话说,我们是臭味相投)Mindy Cleary, Kathi Davis, Marge Dixon和Kay Tallyn(女士们,我是按字母顺序排序的) 算起来,四个人的年龄加起来都有120岁了。她们一直在帮我分担忧愁,应对危机,还帮我改建房子,正是她们令我坚定信念。“好朋友,在你入狱时,会将你保释出来。更好的朋友,会陪你入狱,还会说:‘啊哈,这多有趣!’。最好的朋友,则会帮你料理后事。”女友们,我知道,如果我入狱了,你们四人会带着铁锹、巧克力和红酒出现。
我的两个女儿Shelley和Abby Kendall 我的两个女儿是我一生的荣耀,她们令我的人生丰富多彩。她们两个都已成长为“好人”,具有同情心和不容置疑的正直品质。她们常常试图掩盖这样一个事实,那就是她俩认为她们妈妈的脾气有点古怪,而不说她们妈妈是“我们认识的人里最傻的聪明人”。确实,我不得不承认的是,儿女们长大并不会催人变老,而养育儿女才会催人变老。尽管如此,我的女儿,对于你们的成就,对于你们成长为真正的女人,我感到无比骄傲。
我的父母Carroll“Jiggs”和Ethel (Ferrill) McIntire,以及我的表姐Pat (Hiller) Strum,一个像姐姐或母亲一样的人 我非常幸运地生长在一个善良的、支持我的家庭。在我需要他们的时候,家人总是在我身边。而且,他们始终相信,只要真心想做,我可以做成任何一件事。虽然,我时常表现得“无畏”、“愚蠢”。但是,他们慢慢帮我建立起来的自信,给予我很大的帮助。我想念你们。
我的读者 如果你们喜欢本书,在未来的某一天,本书将会再版发行。(也许需要些运气)。祝阅读愉快!
北伊力诺依大学计算机科学系...
Penny (Kendall) McIntire
penny@pennymcintire.com
pmcintire@niu.edu
penny@VisualDesignModernWeb.com
无封面