
| 可变或者不固定布局可以基于用户设备的查看大小更改宽度。弹性布局则可以根据用户设置的特定文字大小改变宽度。这两种类型的灵活设计都为那些根据自己需求而调整浏览站点的窗口大小的用户带来显而易见的好处,而对那些习惯于完美像素控制的Web设计师而言,它们则提出了挑战。尽管如此,如果能正确规划并构建,灵活布局仍会是很有视觉吸引力且容易创建的。同时,灵活Web设计的概念和技巧也会使固定宽度的CSS设计受益,因为设计师学会了如何针对实现Web的内在灵活性而进行设计,而不再基于输出媒介的刚性属性或者基于网格的布局来展开设计。 使用符合标准和跨浏览器兼容性的(X)HTML和CSS设计的设计师可以从本书中学到如下知识: 灵活布局的好处。 何时选用可变设计、弹性设计或混合设计。 如何设计图形设计版式以及如何对该设计版式进行切片处理才能达到灵活设计的效果。 如何从头创建可变布局和弹性布局。 如何创建灵活背景图形和可伸缩内容图像。 何时以及如何限制Web页面中的灵活性。 |
| 吉伦沃特,是一位经验丰富的Web设计师、项目经理以及技术类文章的撰稿人,Web标准社区频频出现她活跃的身影。在北卡罗来那州大学(UNC)公路安全研究中心任设计服务经理期间,Zoe主持设计和开发了许多信息丰富的Web站点和应用程序。她的工作主要是创建结合了美感以及标准兼容性、可用性和易访问性的Web站点。身为Web开发培训站点Community MX合伙人的她撰写了大量关于Web设计主题方面的文章,这些文章的内容广泛涉及CSS、(X)HTML、Dreamweaver以及易访问性。同时,她还是 Web Standards Project(Adobe Web标准计划任务组)Adobe Task Force的成员之一。 |
| 译者序 前言 致谢 第1章 理解灵活布局 1.1 布局类型 1.1.1 固定宽度:固定像素 1.1.2 可变布局或不固定布局:根据视口调整 1.1.3 弹性与文本大小相适 1.1.4 混合布局 1.2 可变布局和弹性布局带来的挑战 1.2.1 摆脱网格束缚:进行设计非舒适区域 1.2.2 告别像素的完美性 1.2.3 让设计看上去很大或是很小 1.2.4 处理文本溢出的问题 1.2.5 处理水平滚动条的问题 1.2.6 在弹性框中适配固定宽度的内容 1.2.7 更长的设计时间和测试时间 1.2.8 浏览器缺陷 1.3 为页面选择合适的布局类型 1.3.1 固定宽度布局 1.3.2 可变布局 1.3.3 弹性布局 第2章 设计灵活布局的方法 2.1 灵活布局的设计原理 2.1.1 避免:包含文本的内容采用固定高度 2.1.2 避免:不规则形状 2.1.3 避免:与不能扩展的图像相匹配的文字 2.1.4 避免:固定宽度和全宽度内容 2.1.5 规划:超出原始尺寸的图像 2.1.6 规划:设计位于最大宽度之外的白色区域 2.1.7 规划:折成多行的并排放置的项 2.2 设计前和设计后:我们的非兼容设计和固定的设计 第3章 准备网页设计 3.1 创建图像版式 3.1.1 设置画布尺寸 3.1.2 使用图层和页面来管理版式 3.1.3 非破坏性编辑技术 3.2 针对灵活设计对图形进行切片处理 3.2.1 为切片创建多个单独的文件 3.2.2 切分方框 3.3 站点创建练习:为构建站点准备 Beechwood Animal Shelter版式 3.3.1 在版式中导航 3.3.2 为页眉创建切片 3.3.3 为主页创建切片 …… 第4章 创建可变布局结构 第5章 创建弹性布局结构 第6章 规范灵活性 第7章 设置文字间距 第8章 添加背景图像和颜色 第9章 创建灵活的图像 |
商品评论(0条)