重新设计
2004年2月16日，星期一（格林威治标准时间上午11:16）
砰！就是这样。全新设计的HTML Dog。
在接下来的几天里，我将在Dog Blog上发布一系列文章，解释重新设计的各个方面的背后原因。我一直很享受（并从中学习）阅读其他人如何做出某些设计决策，我希望对这次重新设计的讨论会有些兴趣——不仅是为了了解这个特定的网站，也为了借此机会看看网页设计的一些普遍领域。在我看来，这就像是从一个较小的、熟悉的视角来看待一个宏大的事物。这有点像HTML Dog是汤姆·克鲁斯，而网页设计的世界是日本文化史。
原始设计的一些元素得以保留，例如主要导航、内容区域样式、配色方案（尽管我更加严格，使用了更小的调色板）以及整体的极简主义。保留下来的部分是因为我认为它们效果很好。用鲁本斯·巴里切罗的话来说，这更像是一次进化而不是一场革命。
重新设计通过去除大部分图形元素并对CSS文件进行“吸脂”来减少带宽。可用性、可访问性、品牌和搜索引擎优化等不太有形方面也希望能得到改善，但重新设计的催化剂是对第三列的需求。
第三列
HTML标签参考（HTML Tag Reference）已经采用第三列，但它并不太合适，我一直对它的外观不满意。很明显，在其他地方也需要一个第二级的导航，最值得注意的是在Dog Blog（Dog Blog）和即将推出的CSS属性参考（CSS Property Reference）中。此外，像第三列这样的清晰定义的区域也可以用于推广网站的各个区域和外部兴趣。
三列布局与两列布局是完全不同的事物，要将第三列强行塞进两列布局会很困难。需要一种不同的方法来驯服不断发展的Dog。应该清楚的是，第三列的内容是用户当前所在特定部分的组成部分，而不是整个网站的（我认为旧的标签参考列在这方面做得不太好）。另一个导航辅助工具“面包屑”（我宁愿称之为“你在这里的东西”，因为面包屑暗示了用户到达当前页面的路径，而不是当前页面的部分和子部分结构）是容纳所有内容的逻辑选择，正如你现在所见，第三列与内容区域一起位于其下方。
很明显，整合第三列将需要大量的重构，所以我认为不如干脆大干一场，做个全面的重新设计。随着这一点的出现，其他方面也被纳入考虑，在接下来的文章中，我将讨论布局、品牌、可访问性、可用性和搜索引擎优化。
这花费的时间比我预期的要长（因为事情总是如此），并且我有一长串的优先事项，我完全忽略了它们，但我认为所有的努力都是值得的。请告诉我你的想法。
评论
评论2
很棒的进化！品牌变得更加明确。正是这样的重新设计最具挑战性，它不是全盘推翻现有的设计，而是使其变得更好。
我现在可能建议的唯一改变是让右边的列稍宽一些，让中间内容区域的边距更宽裕一些。但这只是品味和流动布局理念的问题。
如果选择使用流动布局（并且不再争论那个问题），我们应该优化网站以适应什么分辨率？这个设计显然是为800x600优化的。是否可以通过使用百分比来调整两到三列的比例，甚至一些边距来维持布局的比例？
这是Nils T. Devine于2004年2月16日星期一下午6:42 GMT所说。
评论3
不错。你什么时候要放弃XHTML？
哦，我发现XHTML到底是什么意思了
极其过度复杂、炒作的白痴语言。
呵呵。有趣。我想是的...
这是Dante Evans于2004年2月16日星期一晚上9:09 GMT所说。
评论4
PTG，你为什么不做我做的事？
创建一个DHTML下拉菜单，并在侧边栏中创建一个。
如果浏览器支持DHTML和DOM，则删除手动侧边栏菜单。这样，每个人，包括NOSCRIPT浏览器，都只能看到一个菜单。SFHE (http://geocities.com/dc_sfhe) 使用了这种解决方案。
这是Dante Evans于2004年2月16日星期一晚上10:22 GMT所说。
评论7
Ishmae - 说得有理。我猜想当某人不知道“那个”是什么样子时，喋喋不休地谈论“这个”是如何从“那个”改变过来的，并没有什么信息量！
试试这个：https://htmldog.cn/ptg/archives/000030.php?boxer=test
感谢大家（大部分是）善意的评价，无论是这里还是通过电子邮件。
为了回答几个问题
这个设计实际上并没有有意识地针对任何分辨率进行优化——更多的是关于未来关于布局的博客文章。
我不会放弃XHTML。这是最好的选择，它将一直存在，而且并不复杂，任何阅读HTML Dog指南的人都会发现。我不明白为什么会认为XHTML过于复杂，然后又建议大肆使用JavaScript。虽然我写了一篇关于下拉菜单的文章（http://www.alistapart.com/articles/dropdowns/），但我认为大多数时候它们不应该被使用——将信息放在显眼的位置更可用，下拉菜单不可避免地会阻碍可访问性，从技术角度来看，它们更笨重、更不可靠（而且为了保持一致性，我不想为启用JavaScript的用户和未启用JavaScript的用户提供不同的布局）。下拉菜单有其用武之地，但HTML Dog不是其中之一。
这是Patrick于2004年2月17日星期二上午10:29 GMT所说。
评论8
永远不要让你的用户去寻找导航——下拉菜单常常会这样做。如果用户找不到，他们就不会 bother 寻找。
让它干净清晰，他们就会找到。并且会使用它。
我也可以滔滔不绝地争论XHTML是我自己最好的选择——我个人从未见过采用XHTML有任何真正可感知的益处。相反，我坚持使用HTML 4.01（主要是严格模式），但始终使用格式良好的标记。
对我来说，格式良好是最有益的，因为XHTML默认就具有这种特性（HTML 4.01当然允许一些不规范的做法，在CSS时代不应该被允许），但只要浏览器没有像处理普通HTML那样真正地处理XHTML，这种区别就没有什么实际意义。
哦，对了，顺便说一句，设计得很棒。
这是Andrew Bowden于2004年2月17日星期二下午1:42 GMT所说。
评论10
更改指南的菜单系统是我很长一段时间以来都不确定的事情之一，但后来决定这样做是最好的。我明白你关于需要移动到屏幕另一侧的观点，但做出这个选择是因为我认为当“HTML初学者”等内容展开时，主导航列常常太长且难以处理。这是一个艰难的决定，但我认为我应该利用第三列。不过我还是会观察的。谁知道呢？我以后可能会改变主意……
这是Patrick于2004年2月18日星期三中午12:10 GMT所说。
评论11
只有一个问题。
你为什么要把新Logo和第三列搞得这么大张旗鼓？这些改变 hardly 值得发布这么多内容。
总之，我本人也在重新设计。我将放弃下拉菜单。
我的新列看起来太棒了，以至于我无法忍受它在加载时被下拉菜单移除。所以我保留它。
Mozilla仍然存在一些问题，但我可以通过DHTML来解决。我真是个懒惰的人。
这是Dante Evans于2004年2月21日星期六凌晨4:39 GMT所说。
评论12
用有限的资源创造出色的视觉效果！“少即是多”的绝佳范例。我正以我自己的网站为目标，http://www.individualism.ro/
这是Gabriel Mihalache于2004年2月25日星期三上午10:19 GMT所说。
评论14
大家好，
很棒的网站。我非常喜欢这个设计，但我想知道在哪里可以问一些关于某些事情如何实现的问题……这里是正确的地方吗？我看不到论坛或其他地方……
这是Tenaka Khan于2004年3月30日星期二下午1:15 GMT所说。
评论15
>>我的新列看起来太棒了，以至于我无法忍受它在加载时被下拉菜单移除。所以我保留它。
Dante，鉴于你总是把人们推荐到那些看起来极其丑陋的网站之一，你是否应该谦虚一点？你听说过margin属性吗？颜色搭配？风格？我的天。
请不要让这个网站看起来或工作起来像Dante的。
这是John Gotti于2004年6月30日星期三上午5:48 GMT所说。
评论18
这是一个很棒的网站。我从内容和日式庭园般的布局中学习了很多。做得好。
我可以占用你一点时间，问一个关于我一直无法解决的问题，在我学习了xhtml/css之后也无法解决的问题吗？
你怎么能让链接在鼠标悬停在它们附近而不是实际链接文本上时像主导航栏那样亮起来？
当我这样做时，只有当鼠标停留在文本上时，链接才会高亮显示，然后你会看到背景和边框等。在我的中央列中，它按应有的方式工作，在我的左列和右列中却从未工作过。
我将非常感谢任何人的帮助。
再说一次，htmldog，它的布局、内容以及它所代表的一切都是一种美。
祝好，
Rischen
这是Rischen于2004年11月24日星期三凌晨1:29 GMT所说。
评论20
要创建一个链接菜单，允许鼠标悬停效果超出文本范围，请将这些链接的CSS display属性设置为“block”。链接将像任何块级元素一样，从边缘到边缘填充其父容器。
确保不要将此样式应用于所有链接！大多数链接应保持内联。
-Matt
这是Matt于2004年12月9日星期四下午6:02 GMT所说。
评论24
好吧，XHTML之所以能良好工作的简单原因是它不适合小孩子玩JavaScript，肆意违反所有规则，只是因为浏览器允许他们。啊，原因——XHTML（格式良好）可以被任何XML解析器解析，并且对任何服务器端脚本更加友好，无论是.NET、Java还是PHP。如果你能解析它，你就可以获得XML，特别是XSLT提供的所有巧妙的技巧。
这是bostone于2005年3月17日星期四晚上9:45 GMT所说。
另请参阅
- 下一页：重新设计：布局和呈现
- 上一页：HTML的定义
评论1
我喜欢它。
这是[匿名用户]于2004年2月16日星期一下午5:13 GMT所说。