代码之家  ›  专栏  ›  技术社区  ›  Chris Farmer Marcelo Cantos

普通文本重内容的HTML/CSS设计

  •  6
  • Chris Farmer Marcelo Cantos  · 技术社区  · 16 年前

    我的任务是更新一系列网站,以促进科学会议,以满足一个利基的科学领域。这些网站目前使用一些普通的CSS布局来编写共享的公共页面模板结构,但每一页的详细信息都混杂了<p>、<br>和 来定位内容。这使得更新内容变得很困难,因为间隔总是在变化,页面在最细微的修改处会变得丑陋。

    所以,我想把这个东西变成一个更CSS的快乐状态。有很多网站为特定的CSS设计目标提供提示,但我是一个没有很多网站艺术功能的开发人员,而且还没有一个已经考虑过的结构。有没有好的网站可以在一些相对平凡但有效呈现的业务内容的背景下教授CSS?像css zen garden这样的东西很酷,但我正在寻找一些既能给我一些简单的文本重的业务数据定位想法的东西。 把这些想法作为一个学习CSS的机会。

    有这样的网站吗?

    6 回复  |  直到 16 年前
        1
  •  4
  •   Bryan M.    16 年前

    遗憾的是,如果您对HTML没有太多的控制权,那么很难从CSS中获得稳定、一致的表示。如果您不能向元素添加特殊的类/ID,这一点尤其正确。和 <br/> 不自觉使用的标签会破坏任何标准化布局的尝试。

    如果您只限于所提供的HTML,那么您的主要目标应该是使其尽可能可读。确保字体大小足够大,人们可以在椅子上舒服地向后靠着阅读。或者站在某人的肩膀上。它不需要太大,但如果它像你所说的文本太重,传统的12磅可能会觉得太小,不适合大量阅读。

    使用哪种字体是另一个考虑因素。Verdana比Arial宽,所以它占用了更多的水平空间,但对眼睛来说更容易看到。其他人倾向于使用像georia这样的衬线字体,这种字体在较大的尺寸下可以很好地容纳。

    垂直间距很重要。确保在页面的各个区域之间包含足够的可视分隔时间。您可以使用明显且一致的副标题样式来实现这一点。同时确保 line-height 每行之间足够宽-人们不喜欢读“砖块”的文字。

    别忘了水平空间。一般的经验法则是,一列文本每行的跨度不应该超过60-70个字符,否则阅读起来会更加困难。

    记住,人们来你的网站是为了获取信息,他们访问和获取信息的速度越快,他们就越高兴。视觉糖果是不错的,但你的首要任务应该是使网站尽可能容易使用和清晰。

    至于灵感,我是一个相当大的文本设计迷 Information Architects . 你也可以看看 Subtraction.com . 博客很可能是一个很好的灵感来源,因为它们通常都是大量的文本。

    祝你好运。

        2
  •  3
  •   andyk    16 年前

    我会说 A List Apart 是一个很好的开始的地方。

    您可以从一个非常广泛(和结构化)的主题中进行选择,然后从您感兴趣的主题中跟踪相关链接。

        3
  •  2
  •   lomaxx    16 年前

    我也遇到过类似的情况,通过下载和学习 http://www.openwebdesign.org/ . 有很多设计,论坛里都是愿意帮忙的人。

        4
  •  2
  •   jlpp    16 年前

    Eric Meyer 总是一个好的CSS资源。

        5
  •  2
  •   dewde    16 年前

    第一件事。使用简单语义的XHTML。如果适用的话,将那些 <br> 用于 <p></p> 美国使用 <h1>,<h2>,<h3> 等等。如果你的页面看起来干净易读,而没有对css文件的引用,你就知道你走上了正确的轨道。David Shea有一个很棒的标记指南。

    David Shea's Markup Guide

    至于样式指南…我喜欢本亨特的网页设计从头开始,即使他皮条不断他的电子书。内容不错。

    Web Design From Scratch: Style Guide

    Web Design From Scratch: Current Styles

    如果你正在寻找一个致力于正确的CSS的示例ASP.NET网站,请查看微软的免费模板。

    ASP.net Design Starter Kits

    最后,这是一个真正的宝石在这里,如果你需要样式表数据,粉碎杂志有商品。这些桌子设计不符合图表。包含示例代码。事实上,你可以花几个小时在粉碎的杂志网站上。很多好的例子和免费的东西。

    Smashing Magazine: Top 10 CSS Table Designs

    Smashing Magazine: All CSS Articles

    和平之德

        6
  •  0
  •   jlpp    16 年前

    Battle of the CSS Frameworks 是另一个很好的资源。您可以通过采用一个好的、简化的框架来缩短CSS开发时间。