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

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可能会保留文本和col2一些不相关的信息，如最新消息列表。

---

关于布局的问题:(第4号是最有趣的）

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

Answer 1

关于（6），我们正在采取的措施（与许多其他人一样）是为移动设备提供完全独立的界面，其中移动设备访问该站点的可能性相当高。在移动用户可能想要访问该网站的情况下，我们会找出他们最想要的内容，并编写一个单独的应用程序，以便为移动设备提供最佳界面。我们主要针对iPhone，因为它是我们看到访问我们网站的主要移动设备。

我们的主要重点是我称之为“上下文”的数据 - 地图，“实时”数据等。这个想法是你可能有很多静态信息，但是当你需要的时候需要这些信息。在旅途中，相对较小。有趣的是到达那里（地图，天气，交通）或信息可能会改变的数据，无论我去哪里或如何到达那里（关闭，可用性）。当然，这在很大程度上取决于您的用户群体以及他们对如何获取信息的选择。

Answer 2

1. 去吧 - 800x600变得罕见。考虑一下可调整大小的布局 - 虽然更好，但不是固定的1000-something。

2. 不是 - 屏幕较小但字体较大的用户会得到一个很大的禁令。

3. IE7 / 8，FF3，Safari 3和Chrome。歌剧奖励积分。

4. Blueprint CSS。重置CSS。 jQuery for JS需要。

5. 4.0 Transitional或XHTML 1.0，如果您使用XML工具CSS 1.0，可以使用2.0的非关键增强功能。推理如果页面正确验证并且你失去了一些有用的过渡属性，那么去X并不重要。

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

Answer 3

对于1号，我建议将其修复为960px宽 - 请参阅the 960 Grid System以获取示例和好处。这个数字很好地划分为一个网格，并且应该可以在1024 x 768（或上网本的600-ish）分辨率下轻松地在所有主流浏览器（+滚动条）中使用。

Answer 4

1. 在决定制作布局的尺寸时，我通常会咨询主要的高流量网站，例如Google.com，Yahoo.com，BBC.co.uk等。它们通常是可接受的布局尺寸的合适指标。目前，Google新闻的布局自动调整为100％宽度，但最小宽度为765像素。 BOH.co.uk，OTOH，固定布局为974px。您可能想要对类似类型的站点进行自己的调查，但我正在处理的站点的固定宽度为800px。这是显示我们提供的内容类型的合理维度，它不会疏远上网本/ sublaptop用户。
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所提到的，移动用户可能会对桌面用户的不同内容感兴趣。必须删除或缩小横幅，照片和其他图像等内容。导航界面和网站流程也必须改变。