布局的标记建议和一些更一般的问题

Question

让我解释一下下面的基本布局：

|----------------------------|
| title banner               |
|                            |
|----------------------------|
| logut-row                  |
|----------------------------|
|      aN                    |
|    <<to be explained>>     |
|                            |
|                            |
|                            |
|                            |
|                            |
|                            |
|----------------------------|
| footer                     |
|----------------------------|


a1:
| Use entire width for text  |
| and images.                |

a2:
|nav- | con                  |
|iga- |                      |
|tion |                      |

a3:
|nav- | con1     | con2      |
|iga- |          |           |
|tion |          |           |

a4:
|nav- | con1  | con2  | con3 |
|iga- |       |       |      |
|tion |       |       |      |

• “标题横幅”将包含一个或两个图像，并且不可点击。
• “logut-row”将包含文本和一些允许用户注销的表单元素。
• “页脚”将包含一些链接和一些文本。
• 上述所有三个部分都只有一列。
• “a”可以是无列 (a1)、两列 (a2)、三列 (a3) 或四列 (a4)。
• “conN”是主要内容，其中N可以是空字符串或1-3。
• 内容可以在 1-3 列中，并带有导航菜单列。还有一种特殊情况，没有导航菜单栏，只有一个栏目。
• 这些列将是单独的部分。没有以 col1 开头的文本将在 col2 中继续。而 col1 可能会保存 text 而 col2 可能会保存一些不相关的信息，例如最新新闻列表。

---

关于布局的问题：（Nr 4 最有趣）

1. 我们认为宽度可以固定在 1000 像素左右。评论？
2. 我们是否应该使用 em 指定宽度以使布局针对不同的字体宽度更具可伸缩性？
3. 由于该网站将在大约一年后推出，我们跳过对 IE6 的支持，而专注于 IE7、IE8、Firefox 3.x+ 和 Safari（版本待定）。评论？
4. 对此的标记和 CSS 有何建议？
5. 您会推荐哪个版本的 (X)HTML 和 CSS？为什么？
6. 您认为适用于小屏幕设备的版本可以简单地基于自定义 CSS，还是需要在布局标记方面有所不同？

Answer 1

对于数字 1，我建议将其固定为 960 像素宽 - 有关示例和好处，请参阅 the 960 Grid System。该数字很好地划分为网格，并且应该可以在 1024 x 768（或上网本中的 600-ish）分辨率下轻松在所有主要浏览器（+滚动条）中运行。

Answer 2

1. 在决定布局的尺寸时，我通常会咨询主要的高流量网站，例如 Google.com、Yahoo.com、BBC.co.uk 等。它们通常可以很好地指示可接受的布局尺寸是多少。目前，谷歌新闻有一个自动调整为 100% 宽度的布局，但最小宽度为 765 像素。 BBC.co.uk，OTOH，固定布局为 974px。您可能想对类似类型的网站进行自己的调查，但我目前正在处理的网站具有 800 像素的固定宽度。这是展示我们提供的内容类型的合理尺寸，不会疏远上网本/次笔记本电脑用户。
2. 没有。网站的尺寸应绝对指定，以像素为单位，或相对于屏幕/窗口大小。没有理由根据字体的高度（或宽度）来定义布局的宽度。仅仅因为使用更大的字体大小并不意味着用户的屏幕分辨率会自动增加。除非您使用的是固定宽度/等宽字体，您可以在其中定义每行文本上的字符数，否则使布局尺寸与类型尺寸成比例并没有多大意义——您的文本将自动环绕列无论如何宽度。
3. 就个人而言，我使用 YUI 或 jQuery 等框架来缩短开发时间。这些框架还很大程度上隐藏了不同浏览器之间的不一致。 jQuery 掩盖了不同浏览器之间 ECMA 脚本实现的不一致。 YUI 在很大程度上做同样的事情，但也提供了适用于大多数主流浏览器的高级 UI 组件和 CSS 重置。除此之外，我不再担心支持 IE 等违反标准的浏览器。
4. 布局看起来很简单。如果您了解如何构建无表格布局（盒子模型、浮动、清除等）并将演示与内容分开，那么您应该很好。
5. XHTML 1.0 是当前的 W3C 推荐。我不认为任何主流浏览器都支持 XHTML 2.0。 IE 甚至还不完全支持 XHTML 1.0，所以最好写 HTML 兼容的 XHTML。大多数主流浏览器都完全支持 CSS1，而大部分支持 CSS2。
6. 我们计划推出一个单独的网站版本，该版本采用专门为移动设备量身定制的格式。正如 tvanfosson 所说，移动用户可能会对桌面用户的不同内容感兴趣。诸如横幅、照片和其他图像之类的东西将不得不被删除或缩小。导航界面和网站流程也必须改变。

Answer 3

1. 去做吧 - 800x600 越来越少了。不过考虑一下可调整大小的布局 - 恕我直言，比固定的 1000 左右更好。

2. 否 - 屏幕小但字体大的用户会获得 hor-scroll，这是一个很大的禁忌。

3. IE7/8、FF3、Safari 3 和 Chrome。 Opera 加分。

4. Blueprint CSS。重置 CSS。 jQuery 满足 JS 需求。

5. 4.0 过渡或 XHTML 1.0，如果您使用 XML 工具，CSS 1.0，以及可能从 2.0 开始的非关键增强。推理是，如果页面正确验证，则执行 X 并不重要，并且您会丢失一些有用的过渡属性。

6. 可以简单地基于自定义 CSS。取决于您拥有多少移动用户、他们对您的重要性以及网站的性质。

Answer 4

关于 (6)，我们采取的策略（与许多其他策略一样）是为移动设备提供完全独立的界面，这样移动设备访问网站的可能性相当高。在移动用户可能想要访问该网站的情况下，我们会找出他们最可能想要的部分，并编写一个单独的应用程序来为这些功能提供最好的移动设备界面。我们主要针对 iPhone，因为它是我们看到访问我们网站的主要移动设备。

我们的主要重点是我所说的“上下文”数据——地图、“实时”数据等。这个想法是您可能拥有大量静态信息，但是当您在在旅途中，比较小。感兴趣的是对到达那里很重要的数据（地图、天气、交通）或可能改变我是否去或如何到达那里的信息（关闭、可用性）。当然，这在很大程度上取决于您的用户群体以及他们对获取信息的偏好的选择。