网页设计解析

出版时间：2009-3  出版社：清华大学出版社  作者：周陟  页数：266  字数：468000  
Tag标签：无  

前言

创作原由如果你正在翻阅这个部分的话，有两个信息你应该注意。一个乐观的信息是：你正开始了一次不同以往的思想体验，你会在本书中发现许多曾经忽略了的但却非常重要的信息，当然，它们和你感兴趣的web设计有直接的关系；另一个信息是：我不会在这里就开始长篇大论，并提出本书的核心内容，因为那样会让你对后面的部分失去兴趣，更有可能你会直接撕掉这页，而把其余的部分留在书店，或者某个有这本书的地方。你不该认为这是一本普通的技法说明书，或者一些拥有漂亮设计作品截图的高级画册。我曾试图把它变成一本结合理论和技术的手册，一本Web设计中积累的“伊索寓言”，最后我发现这样的工作实在不太明智，而且成本过高。我们可以从很多类似的事例中发现，教育实际上是一种并不愉快的手段，有一种居高临下的紧张气氛。在这里，我不想说书中的一些先锋性的词语和一些看上去精妙的技术手段，是对读者（你就是其中的—分子）的教育，是—些教程的总结。我们换一种思路，其实把这些透过文字表面的信息理解为交流，会让我们觉得互相平等。如果当中确实有能够引起你交流欲望的部分，我很高兴这本韦的任务得以完成。在大多数时候，我们总希望一些具体的意见，让我们觉得有方向可循。作为设计师来说，其实这并不意味着你的专业。不少朋友惊异于我本人的学历背景，我受到的教育是关于大众传媒方面的，并非设计专业，而最后当我成为一个设计师的时候，似乎是对自己的—个不认同？其实我们考虑得太复杂了！

内容概要

本书不是一本普通的技法说明书，也不是一些拥有一些漂亮设计作品截图的高级画册。本书的写作出发点是希望改变一些传统的Web设计思维和一些过时的手段。    书中对Web设计这个职业进行了整体的阐述，从行业思维到设计细节，内容包含：认识Web设计、工具使用新谈 (Photoshop、Dreamweaver等)、探讨Web标准、页面设计与GUI、Web设计中的排版、首页设计、完整案例解析。    书中出现的不仅是笔者本人对Web设计的理解，还有很多在设计界具有影响力的人物的观点论文，一些十分有用而你没有足够重视的技巧，这些总结和资料会给你的Web设计工作带来很多帮助。    本书适合于打算进入网页设计行业工作，并对网页设计有着极大热情的读者朋友，无论你是初学者还是已经开始你的职业生涯，这本书都会成为你的绝佳的参考手册和流程解决方案。同时，由于本书中提到了大量业界的标准常识和基础理论，所以也推荐给任何需要与网页设计师沟通的各个环节的工作人员阅读。    本书作者是国际上享有盛誉的顶级设计师，相信本书会对你的职业生涯产生重大影响。    本书随书DVD光盘中包含：Web设计大师眼花缭乱的案例操作视频解说，本书部分实例素材和最终文件，作者精心整理的Web设计资源。

作者简介

周陟，视觉设计师，跨媒体创作。
　　经历：中国数字艺术奖全国巡展受邀 数字图形设计 参展上海“出街”国际艺术设计展；受邀平面招贴 参展新西兰GOUW设计师平台推荐WEB设计师；E-motional design, k10k, 美国Visualizer艺术平台作品收录推荐；编写出版《设想》新媒体图形作

书籍目录

第1章　认识Web设计　　 　1.1  Web设计概述　　 　　1.1.1  内容　　1.1.2  技术　　 　　1.1.3 外观　　 　1.2 优秀的Web设计是什么？　　 　　1.2.1 外观和功能同样重要　　 　　1.2.2 别做自以为“酷”的事情　　 　　1.2.3 规则——只有合适没有正确　　 　1.3 Web设计师的多元性　　 　　1.3.1 平面设计　　 　　1.3.2 插画　　 　　1.3.3 VI 识别系统　　 　　1.3.4 传统艺术　　 　　1.3.5 工业设计　　 　　1.3.6 产品设计　　 第2章　工具使用新谈　　 　2.1 选择合适的设计软件　　 　2.2 深入理解Web设计软件　　 　　2.2.1 设计软件标准化　　2.2.2 请重视你的Help文档　　 　2.3 建立最适合自己的设计软件组合　　 　　2.3.1 平面位图图形　　 　　2.3.2 平面矢量图形　　 　　2.3.3 矢量动画　　 　　2.3.4 基本HTML文本　　 　　2.3.5 在线视频　　 　　2.3.6 角色/场景动画　　 　2.4 Photoshop　　 　　2.4.1 图层　　 　　2.4.2 创建Web Photo Gallery　　 　　2.4.3 分割图形　　 　2.5 Fireworks　　 　　2.5.1 制作GIF动画　　 　　2.5.2 创建Rollover样式按钮　　 　　2.5.3 为图形添加浏览器属性　　 　2.6 Dreamweaver　　 　　2.6.1 建立自己的网站结构并设置　　 　　2.6.2 使用插件扩展Dreamweaver功能　　 　　2.6.3 控制并检验CSS样式　　 　2.7 辅助工具　　 　　2.7.1 ACDSee　　 　　2.7.2 配色大师ColorSPY　　 　　2.7.3 截屏大师SnagIt　　 第3章　探讨Web标准　　 　3.1 什么是Web标准？　　 　　3.1.1 为什么要使用Web标准？　　 　　3.1.2 如何校验你的Web？　　 　　3.1.3 了解（　X）HTML　　 　　3.1.4 Web标准的商业价值　　 　3.2 重新认识CSS　　 　　3.2.1 如何应用CSS　　 　　3.2.2 CSS的语法　　 　3.3 CSS实例　　 　　3.3.1 精致的CSS水平列表　　 　　3.3.2 华丽的CSS垂直嵌套列表　　 　　3.3.3 不同浏览器对CSS特别代码的支持情况　　 　　3.3.4 高级列表　　 　3.4 设计师必须了解的CSS技巧　　 　3.5 基于标准的Web设计参考　　 第4章　Web设计与GUI　　 　4.1 GUI和Web设计的关系　　 　4.2 Web用户界面设计原则　　 　4.3 设计GUI中的图标（　ICON）　　 　　4.3.1 正确理解图标的价值　　 　　4.3.2 图标设计实践1 ——2D矢量图标设计　　 　　4.3.3 图标设计实践2  ——3D图标设计　　 　　4.3.4【重要】违反GUI原则的Web宣传手段　　 第5章　Web设计中的排版　　 　5.1 Web版式设计概述　　 　5.2 常用版面布局参考　　 　　5.2.1 传统“T”型结构　　 　　5.2.2 左右平均分布型结构　　 　　5.2.3 上下对照结构　　 　　5.2.4  “上中下”——“三” 字结构　　 　　5.2.5 简约型布局　　 　　5.2.6 “回”字型结构　　 　　5.2.7 氛围式结构　　 　　5.2.8 “杂物箱”版式　　 　　5.2.9 “个人风格化”结构　　 　　5.2.10 单页排列式结构　　 　　5.2.11 文字型结构　　 　　5.2.12 封面型（　cover）结构　　 　　5.2.13 综合型结构　　 　5.3 页面排版的细节元素　　 　　5.3.1 重视细节的刻画　　 　　5.3.2 设计AD Banner  （　广告条）　　 　5.4 实战版式设计　　 第6章　首页设计　　 　6.1  第一眼的印象　　 　　6.1.1 突出主体　　 　　6.1.2 简单第一　　 　　6.1.3 控制版面　　 　　6.1.4 绚丽配色　　 　　6.1.5 信息处理　　 　　6.1.6 重视表现　　 　　6.1.7 流行风格　　 　6.2 首页设计的两种思路 ——个性与商业的平衡　　 　　6.2.1  方案A——传统企业型站点设计　　 　　6.2.2  方案B——时尚企业型站点设计　　 　6.3 方案A设计过程——安全而传统　　 　　6.3.1 标题设计与导航　　 　　6.3.2 板块区域设计　　 　　6.3.3 内容排版设计　　 　6.4 方案B设计过程——独特且艺术　　 　　6.4.1 背景设计　　 　　6.4.2 设计页面边框及导入Logo　　 　　6.4.3 设置顶端灯光　　 　　6.4.4 设计左导航　　 　　6.4.5 制作主体部分　　 　　6.4.6 主体周边细节制作　　 　　6.4.7 内容填充　　 　6.5 设计首页模板　　 　　6.5.1 设计页面左导航　　 　　6.5.2 上导航设计　　 　　6.5.3 内容板块设计　　 　　6.5.4 整体调整　　 　　6.5.5 切图　　 　　6.5.6 将输出的页面制作成模板　　 第7章　全案解析　　 　7.1 企业应用型网站规划与设计　　 　　7.1.1 前期准备　　 　　7.1.2 建立矢量标识　　 　　7.1.3 设计网站平面稿　　 　　7.1.4 切片并建立网站的HTML基本表达式　　 　　7.1.5 用Dreamweaver优化网站的HTML表达式　　7.1.6 Flash实现在线展示Video　　 　　7.1.7 Fireworks完善导航系统　　 　7.2 个人网站设计　　 　　7.2.1 制作页面分解元素　　 　　7.2.2 平面设计在网站上的运用　　 　　7.2.3 “积木式”网站排版　　 　　7.2.4 发布网站到Internet　　 附录　顶尖Web设计师语思录　　 后记　　

章节摘录

插图：第1章 认识Web设计 1.1 Web设计概述一个完整的Web设计工作应该至少拥有以下主要的方面。1.1.1 内容网站的本质在于信息的传播以及如何传播，问题集中在怎么样引导和劝说用户。由于Web的特殊性，内容已经脱离我们传统的定义，它可以包括：文字、图形、超链接、交互操作、动画、视频、音频、在线游戏甚至更多的混合型的组织形式。拥有高质量的内容是网站成功的关键。误解我们常常误解Web设计为制造优秀的视觉体验，带给客户不同以往的美学感受。当然，这样做，可以吸引第一次访问的客户更加注意你的站点，但是一旦客户在某个地方停留下来后，他／她的所有活动将转变成寻找对他／她有用。或者他/她感兴趣的信息。如果一个站点空有一个漂亮的架子，而缺乏实际内容，用户最终会离开。而设计在这里的作用是什么？如果一段优秀的内容，用户无法很快找到它（或者并不明显），内容也失去了它的意义。

后记

在你看完这本书后，我可以肯定的是，你阅读的过程并不比我书写的过程更轻松，但我希望你这次视觉和思维的旅程是愉快的，并且不会在短时间内被遗忘。实际上茌前言完成之后，我并不考虑再来一个后记。因为任何一位看完本书的读者：无论你是第一次接触“Web设计”这个字眼的新丁，还是在此行业摸爬滚打了多年的好手，你都会有自己对于本书的认识。而正巧，你建立起来的认识，并不会因为某种劝说而修改，如果我企图利用”后记“来做一个隐性的狡辩的话，你可能还会对我怀恨在心。因为，我无法掩饰我在本书中的任何错误与瑕疵，如果你能够与我共享你的指正意见，我将非常感谢。

媒体关注与评论

在我印象里，他是一位非常具有才华的设计师，多年来一直战斗在设计行业里，做管理以后仍旧不断推出前沿设计作品，非常难得！作为一名资深的优秀设计师，他的书凝聚了深厚功力，一定不会错！　　——视觉同盟站长　Fape 这本书对网页设计、互动界面设计行业很有影响力，内容阐述很透彻，所倡导的网页设计概念也很新颖，周陟是一位非常专业的专家，认识他多年了，我绝对相信这是行业里非常有价值的一本书。　　——设计联盟站长　风子Lytous是我们联盟第152期专访推荐设计师，相信他的那些唯美且富有吸引力的作品大家都已经看过，但你知道这些作品是如何设计出来的吗？让我们来共同关注Lytous的《网页设计解析》！　　—— 68design站长　68 认识Lytous的日子不算短了，他一直（注意措辞“一直”）是一个顶尖设计师，涉足很多领域，结交了不少国内外知名设计师。他的理论和实践都很棒，也时常从他的一些文章中学到不少东西。那些刚走上设计道路的同学，或许还不知道如何面对这个充满创意而又具有挑战的职业，或许还不知道如何做好一个基本的商业网站设计，那么我建议看看Lytous的这本书。不同于填鸭式的教育，也不同于那些所谓纸上谈兵的某某秘籍。这是一个从业多年的职业设计师的经验点滴，是那种可以开创你的新的职业生涯的绝佳参考　　—— 幻色中国站长 呆呆授人以鱼不如授人以渔，Lytous的《网页设计解析》没有停留在教授软件技巧的层面，而是结合作者多年的经验，将更实用也更难得的实践心得融合其中。在其国际化的设计作品中，也包含有浓烈的本地化色彩：中国商业网站设计的特点总结，和更加适合国内环境的操作方法解析，无论对新手入行还是已从业人员进修都有很大的帮助。　　—— 站酷(ZCOOL)站长　明作者Lytous是一位优秀的资深网页设计师，此书以作者自己的实际经验出发，详细解说了网页设计的方方面面，特别引入了设计师们常常忽略的GUI设计和交互设计，非常适合新手入门到精通，所选择的例子文件都是国际化的设计作品，给人以全新的入门高度。　　——蓝色理想 www.blueidea.com 站长 曾沐阳

编辑推荐

《网页设计解析》特点：国内Web设计先驱的领先感情，精密阐述Web设计思维，Web设计软件技能火速提高，华丽网页从商业需求到上线全案揭秘。Web设计大师眼花缭乱的操作视频，《网页设计解析》实例素材和最终文件，作者精心整理的Web设计资源。专业Web开发技术思路与开发流程，关键技术点一步一个脚印，无与伦比的操作性，实例千挑万选，拒绝华而不实。精准阐述，一语道破天机，高手开发过程视频讲解，眼花缭乱的开发技巧。Web开发从容就业与火速提高，社区/Blog/网站三位一体的售后技术支持，高手开发过程视频，眼花缭乱的开发技巧。

用户评论 (总计55条)

•   这本是很详细的讲解了网页设计中要注意到问题，不刚从技术上讲了而且，在创意和思维的培养上也是给我们很大的提示！
•   书的印刷质量很好全彩页，书的内容很丰富，案例也很细致，光盘中还带了视频的教学文件。
•   书还没看只是大概翻了一下内容很不错是很喜欢的一个设计出的书
•   设计不是一天两天就能就会的，需要长时间的学习
•   彩页让人看起来没有那么累，涵盖的信息量很多，让我可以很轻松的了解这个行业。希望将来可以看到精彩详细的实例讲解，作者在自己成长的同时，成为了大众的老师，所以应该有种使命感以提高整个行业的起点和水准。希望中国网络行业早日与其他国外列强比肩。
•   看过作者的很多作品，非常精致细腻，期待读到书的那刻，从一些朋友的反馈来看还是值得购买的。
•   书的内容很棒，浅显易懂，配图很清晰
•   真的是一本不错的书，价钱也很公道，内容和外观都很精美
•   上周末去图书馆看了几节内容，觉得不错，然后就买了，继续学习。内容不错，还有光盘可以学习，快递态度也很好。满分。
•   还好，起码可以有参考的样板，以后可以多多思考，总结出适合自身发展的道路！
•   书到很多专业的知识，谢谢！
•   介绍的是一种思路
•   内容新颖，是一本好书！
•   对我这个阶段来说，很好
•   想当做教程买的朋友还是别买了~我觉得像我一样的刚入门者应该是看不太懂的...书中讲的都是网页设计各软件间的交互作用,以及一些思考方法,不过要说帮助多少也是有一些的....
•   很适合爱好网页设计的初学者
•   不错的一本书，什得网页设计师们学习的。
•   不错，非常适合正在学习网页中的同学们，书的印刷和纸张也都很不错，推荐
•   唯一的缺点是可能因为篇幅的原因，作者试图描述一个网站的方方面面，但是每个方面都不详尽，对于初学者来说理解还是有一定难度的。
•   书不错，没有花哨的东西，主要是讲解一种思路和方法
•   这本书不错，我是这么认为的
•   适合刚学的
•   在书店看过的，，个人觉的挺好的，但老弟说有点不是很实用。。
•   老师介绍买的，当教材用，还不错，蛮实用的！
•   还可以。。值得一读
•   讲得是不够深入，不过我还是很喜欢。卖的时候没注意价格，现在看来觉得贵了，
•   凝重的黑体字，加上满篇的网站截图欣赏。让本书从高档一下子滑落至低档。内容并不像目录那么系统，更像是火花集。书中的内容更符合初学者，或者说懵懂的初学者来探究什么是web设计。
•   虽然从设计方面的新意来说有点意思，但作者似乎忘记了网站设计不是单纯的平面设计了。呵呵
•   一般，适合于新手。里面理论知识太多，实例太少了，而且光盘里面的东西少之又少，例子效果差，素材也没有用。
•   有些地方写的不是很细。就是很笼统。不过很适合初学者和想扩展方向的朋友。印刷质量很好。
•   说实话有点失望..推荐新手购买...如果您已经是业内人士就不必要看了....
•   书中的插图是英文的，对于我这种对软件不熟悉的，感觉有些困难
•   不如介绍的那样，其实还是一本大拼凑的书
•   适合新手看，没有什么比较精辟的地方
•   好书不用说，自然有懂得欣赏
•   收到书，第一时间就看了，原本以为会为自己带来一丝新鲜感，但是除了全彩里面的内容没有一丝新意，解析是什么？这本书没有很好的阐述。教程都是老得不能再老的了。失望。
•   内容宽泛，但不深入，只说明表面问题，真的很失望，书虽厚，但页面中空白太多
•   说真的，买的有些不值··光盘没多大用处···
•   很一般的书，毫无使用价值
•   没相像中的好。
•   只适合什么都不懂的菜鸟买来看看~
•   光盘上的实例简直是糟透了，那些设计是上个世纪的设计风格吧，感觉好土，完全没有目前网页流行的一丁点元素在里面，我不知道为什么作者会精心的制作自己的个人网站，而对书中的实例完全是一副敷衍了事为书而做的姿态，就算是再简单，再初级的内容，在审美上应该符合潮流吧……
•   很烂的一本书，适合小学生，看图识字
•   对实际帮助不是很大，都是比较初级的理论！
•   设计理念型。初学技术的人不推荐。
•   蛮喜欢这本书的，仔细看完再给详细评论吧！！
•   很基础的东西，讲的很宽泛。书名讲的那样，教你开始网页设计，及一些小技巧和需注意的事项，
•   眼花缭乱。。然后随书赠送的DVD也没有。。。
•   个人觉的很一般，偏理论的，但是理论内容却又引不起阅读兴趣，而且书做的太精美了，这样价格就有点偏贵，总之，买来以后有点小后悔了。实际操作，说实话，自己多找些范例来练也是一样的效果吧。
•   购买了以后，学会了很多东西，确实是物有所值啊
•   这本书总体来讲不是很好，里面的内容讲的不是很充实，特别是在介绍软件制作案例，大篇幅的截取图片，我金额udeshi有意充页数一样
•   书本包装很好，印刷也很不错！
•   全彩页。内容也精彩。天儿冷了，在家慢慢看喽。
•   结合了行业发展的眼光与设计师独特的思维，是一本很诚恳的好书受益匪浅
•   书很垃圾，，，，圈钱，我很佩服