第二十一天学习：页面
关键字：页面
学习计划：
- 页面大小和屏幕分辨率
- 设计页面
- 规划元素的位置
- 引入样式
- 导航
- 主页面
- 内容页面
- 构造页面
- 单列页面
- 双列页面
- 3列页面
- 牺牲列
- 利用CSS的高级布局
- 利用嵌套表创建布局
学习记录：
- 页面大小和屏幕分辨率
- 常见的影响页面大小的因素：
- 不同计算机具有不同的屏幕分辨率（800x600和1024x768像素是目前最流行的分辨率）
- 不同的用户具有不同大小的显示器（15/17或21以上英寸的显示器）
- 人们通常不会利用整个屏幕显示区域进行预览--可能会有工具栏或其他应用程序占用部分空间
- 大多数操作系统允许用户改变显示器的分辨率，因此可以尝试更改分辨率，以了解不同的用户所看到的不同外观，在PC计算机上，可以在Windows Control Panel中的display选项更改分辨率；在MC计算机上，则可以在system preferences中的display选项下更改分辨率
- 固定宽度设计与流体设计
- 强制页面为特定的宽度或高度的设计称为固定宽度设计。
- 固定宽度设计使用长度值指示页面的尺寸，例如像素、em和cm等长度值，固定宽度设计允许设计人员更对地控制页面的外观，因为设计人员知道画布的大小，当用户调整浏览器窗口的大小时，页面不会伸展或收缩。
- 即使是在不同分辨率的显示器上，这种设计看上去也只是具有稍微不同的大小，但是页面中元素的比例能够保持相同
- 流体设计能够伸展以填满整个页面。为了实现该功能，需要利用百分比值指定页面的比例
- 常见的影响页面大小的因素：
- 设计页面
- 规划元素的位置
- 感受信息在页面上的展示方式，并且规划每一个元素应当出现在页面上的位置，应当仅使用文本和线来规划每个元素（例如题头或者文本的主体）在页面中的位置以及它将获得多少空间，而暂时不用考虑颜色、字体、背景、图像或者其他的一些设计问题
- web站点的线框实例：
![]()
- 线框模型能够准确看出链接的目的地，并且能够理解站点的功能：
- 当向用户和客户展示详尽设计的站点的原型时，他们趋向于关注可见的元素而不是建议的功能。因此，线框模型能够确保客户关注内容的功能和结构而不是它的外观
- 如果确实需要执行一些改动，可以在设计或编程工作开始之前进行改动，从而避免后面重新编写和重新设计站点的大部分内容。
- 假设存在较长的页面，用户不得不垂直滚动以查看整个页面，则需要确保最重要的元素出现在页面的顶部，并且当页面打开时用户能够根据看到的内容了解页面的主旨。
- 人们浏览页面的顺序通常类似于大写字母“F”，先从两个水平条开始，然后是一个垂直条（F的形状和大小取决于设计、页面的类型以及页面中的信息量）
- 主要导航应该放在其徽标下方，从左往右排列，文本应当很容易浏览，这意味着应当提供清晰、简洁的题头和副标题，并且尽可能使题头中开始的几个单词能够表明下面段落的主题
- 如果希望定期改变站点主要功能的公司设计站点，则可能希望分配页面的某个部分给公司控制，可以将主页（或者子类别的主页）的一部分留给他们用于定期改变功能
- 引入样式
- 在了解站点在文本和简单线方面的外观，可以开始向页面中添加样式或字符--采用一些颜色、字体、背景、图像以创建外观吸引人的页面
- 已经完成的工作
- 类似于任何市场营销形式，创建一种容易识别的样式将有助于强调一种商标，如果公司具有徽标，则应当使用该徽标，如果公司具有特定的颜色，这应当将这些颜色作为站点的颜色方案，但除此之外，通常需要设计一些具有吸引力的内容
- 除非客户专门要求重新设计公司的徽标或者改变他们的颜色，否则应当避免执行这些操作，因为这是他们已经构建的商标的一部分，并且很可能出现在公司的信纸和广告牌上
- 应当询问客户是否能够拥有徽标的一份数字副本（而不是通过手册扫描输入），如果广告或传单是打印版本，则客户或者设计它的人员应当具有一份电子版本，可以使用该电子版本。
- 常见的页面元素
- 设计页面的第一步应当是查找将出现在每一个页面中的元素
- 商标和主要导航在每一个页面中都应当位于相同的位置
- 如果站点为提供的每一个产品或服务专门给出一个页面，或者为出版的每一篇文章或故事专门给出一个页面，则每个页面都应当遵循一致的设计
- 如果页面的底部包含一些到其他页面（例如版权声明、隐私政策以及条款和条件等）的链接，则所有页面的底部看上去都应当相同
- “页眉”通常用于描述站点中任意页面的题头，它们在整个站点中趋于一致，通常包含徽标和主要导航。同理，“页脚”是出现在每个页面底部的任意内容。页头和页脚之间是页面的内容或主体
- 图像对设计的影响
- 图像的使用经常对站点访问者的感觉具有强烈影响。优秀的徽标、图像和照片是低水平的站点与吸引人的站点之间的主要区别。
- 图像可以与公司的其他市场营销工作紧密关联（或者来自这些市场营销工作）
- 照片的质量通常取决于站点的预算。
- 在使用一幅图像之前，应当始终确保具有必要的版权许可。如果没有版权许可，则可能会引起官司和昂贵的罚金，或者至少是被告知删除该图像，这些需要您重新设计站点并向客户解释错误
- 分组元素
- 位置：确保设计的类似元素的位置接近
- 颜色：使用前景色和背景色块可以清晰地表明哪些项是相关的
- 边框和内边距：在页面中的一组元素和其他项之间创建间隔，以表明哪些元素分组在一起
- 样式：例如对于导航项使用类似的按钮
- 导航
- 顶部导航
- 将导航直接放置在页眉的下方是非常流行的方法，通常导航与页面的左边对齐或者居中对齐
- 左导航
- 将导航栏放置在左边是一种较为少见的选择，但是某些站点确实将它们的主要导航放置在页面左边
- 顶部和左导航
- 许多站点结合使用顶部导航和左导航，其中顶部导航用于主导航，左导航用于次要导航或者子导航
- 底部导航
- 通常应当避免将主要导航链接放置在页面的底部，因为如果不使用框架或者CSS定位特性，则无法保证它们在页面加载时可见
- 通常将重要性较低的链接放置在页面的底部，例如，到版权声明、隐私政策以及条款和条件链接。
- 某些站点在页面的底部放置仅由文本组成的导航栏，前提是使用复杂的图像创建主导航栏，这将有助于使用屏幕阅读器的人员更快速、更方便地访问链接
- 右导航
- 将主要链接放置在页面右边的缺点是，当页面加载时，如果用户的浏览器窗口较窄，则可能无法看到链接。
- 另外，用户对具有右导航的站点的使用经验较少，因此通常不期望能够在右边找到导航。
- 顶部导航
- 主页面
- 内容页面
- 规划元素的位置
- 构造页面
- 单列页面
- 双列页面
- 3列页面
- 牺牲列
- 利用CSS的高级布局
- 利用嵌套表创建布局
扩展阅读：
- CSS流体布局下宽度分离原则
- 什么是宽度分离？
- 是CSS中的width属性不与影响宽度的border/padding（有时候包括margin）属性共存
- 什么是宽度分离？
问题的记录与解决：
- 流体布局的优缺点：
- 优点：
- 页面会伸展以填满浏览器窗口，因为当窗口很大时，在页面周围也不会留下很大的空间
- 如果用户打开很小的浏览器窗口，则页面会收缩以适合窗口，而不需要用户滚动页面。
- 这种设计可以接受用户设置的字体大于设计人员预期的字体，因此页面布局可以伸展
- 缺点：
- 如果设计人员不控制页面某些部分的宽度，则页面看上去可能会与设计人员期望的外观区别很大，在某些元素周围可能会有难看的空白，或者某些项会挤压在一起
- 如果用户具有非常宽的窗口，则文本行将变得非常长，使文本难以阅读
- 如果用户具有非常窄的窗口，则单词可能会被挤压得过小，每一行中可能最终只有一到两个单词
- 优点：
- 固定宽度设计的优缺点
- 优点：
- 像素值在控制元素的宽度和位置方面是精确的
- 设计人员能够更多地控制页面中各项外观和位置
- 图像的大小将总是相对于页面保持相同
- 设计人员可以控制文本行的长度，而不需要考虑用户浏览器窗口的大小
- 缺点：
- 如果用户将字体大小设置为较大的值，则文本可能无法按照计划容纳在分配的空间中
- 如果用户显示器的分辨率高于为页面设计的分辨率，则页面在用户的屏幕上看上去将较小，从而难以阅读
- 这种设计仅适用于屏幕大小和分辨率类似于桌面计算机的设备
- 编写的代码可能最终会存在很多容器元素，即仅用于控制页面布局的元素，这不仅使页面更加混乱，而且使其更容易断开
- 页面可能位于浏览器窗口的中间，并且周围存在很多的空白
- 优点：
- 当页面加载时应当首先可见的项有哪些？
- 商标
- 全局导航（到主页和站点主要部分的链接--注意，主页应当始终是导航的第一项）
- 子部分导航（如果正位于站点的某个分部，则分部导航应当包含到该分部内的各个部分的链接）
- 页面的题头或者标题（除了主页之外，主页可能不需要题头或标题）
- 足够的内容，用户能够根据这些内容了解页面的主旨
- 用于搜索站点的选项
- 促销/广告（自己的或者其他人的）
- 当页面加载时不需要出现在页面可见部分的项有哪些？
- 页面剩余部分的细节（例如，如果具有一篇新闻文章，则仅需要能够看到头条新闻和概述即可，整篇文章不需要出现在页面的顶部）
- 一些到相关信息或者其他站点的链接（这些内容与使用这个页面不相关）
- 广告
- 页脚导航--版权声明、条款和条件、隐私政策（通常这些都是必须的内容，但是很少使用，因此应当出现在页面的底部）
浙公网安备 33010602011771号