【问题标题】:HTML/CSS designs for mundane text-heavy content普通文本内容的 HTML/CSS 设计
【发布时间】:2010-09-18 17:15:35
【问题描述】:

我的任务是更新一系列网站,这些网站宣传迎合特定科学领域的科学会议。这些网站目前是为共享的公共页面模板结构使用一些适度的 CSS 布局编写的,但每个页面的细节都是


和   的混搭。定位内容。这使得更新内容变得很困难,因为间距总是在变化,页面最终会在最轻微的修改时变得丑陋。

所以,我想把这些东西改成更符合 CSS 的状态。有很多网站提供了针对特定 CSS 设计目标的提示,但我是一名开发人员,没有很多网站艺术能力,也没有考虑到结构。有没有什么好的网站可以在一些相对平凡但有效的商业内容的背景下教授 CSS?像 CSS zen garden 这样的东西很酷,但我正在寻找更多的东西,它们既能给我一些简单的、大量文本的业务数据定位想法,也可以将这些想法作为 CSS 学习机会。

有没有这样的网站?

【问题讨论】:

    标签: html css


    【解决方案1】:

    遗憾的是,如果您对 HTML 没有太多控制,就很难从 CSS 中获得可靠、一致的表示。如果您无法向元素添加特殊的类/ID,则尤其如此。而<br/> 标签的使用不一致,将对任何标准化布局的尝试造成严重破坏。

    如果您只限于提供给您的 HTML,那么您的主要目标应该是使其尽可能具有可读性。确保字体足够大,以便人们可以靠在椅子上舒适地阅读。或者站在某人的肩膀上。它不需要太大,但如果它像你声称的那样文字很重,传统的 12pt 可能会觉得太小而不能大量阅读。

    使用哪种字体是另一个考虑因素。 Verdana 比 Arial 更宽,因此它占用更多的水平空间,但往往更容易在眼睛上。其他人倾向于喜欢像Georgia这样的衬线字体,它可以很好地适应更大的尺寸。

    垂直间距很重要。确保在页面区域之间包含大量视觉中断。您可以通过明显且一致的副标题样式来实现这一点。还要确保每行之间的line-height 足够宽——人们不喜欢阅读“砖块”文本。

    不要忘记水平空间。一般的经验法则是,一列文本的每行不得超过 60-70 个字符,否则会变得更难阅读。

    请记住,人们访问您的网站是为了获取信息,他们访问和获取信息的速度越快,他们就会越快乐。视觉效果很好,但您的首要任务应该始终是使网站尽可能易于使用和清晰易读。

    至于灵感,我非常喜欢 Information Architects 上的文字设计。您可能还想看看Subtraction.com。博客可能是很好的灵感来源,因为它们通常包含大量文字。

    祝你好运。

    【讨论】:

      【解决方案2】:

      我想说A List Apart 是一个很好的起点。

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

      【讨论】:

      • 哦,最重要的是,它符合网络标准。
      【解决方案3】:

      我也有类似的情况,通过在http://www.openwebdesign.org/ 下载和学习一些设计,学到了很多东西。有大量的设计,论坛上到处都是愿意提供帮助的人。

      【讨论】:

        【解决方案4】:

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

        【讨论】:

          【解决方案5】:

          首先要做的事情。使用简单和语义化的 XHTML。如果适用,将那些<br>s 抛弃为<p></p>s。始终使用<h1>,<h2>,<h3> 等。如果您的页面看起来干净且可读,而无需参考 CSS 文件,您就知道您走在正确的轨道上。 David Shea 有一个很棒的标记指南。

          David Shea's Markup Guide

          至于风格指南...我喜欢 Ben Hunt 从头开始​​的网页设计,尽管他不停地拉皮条他的电子书。内容不错。

          Web Design From Scratch: Style Guide

          Web Design From Scratch: Current Styles

          如果您正在寻找倾向于正确 CSS 的示例 ASP.net 网站,请查看 Microsoft 的免费模板。

          ASP.net Design Starter Kits

          最后,这是一个真正的宝石,如果您需要样式化表格数据,Smashing Magazine 有货。这些表格设计不在图表之列。包括示例代码。实际上,您可以在 Smashing Mag 网站上花费数小时。有很多很棒的例子和免费的东西。

          Smashing Magazine: Top 10 CSS Table Designs

          Smashing Magazine: All CSS Articles

          和平|露水

          【讨论】:

            【解决方案6】:

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

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2013-07-24
              • 2011-01-16
              • 1970-01-01
              • 1970-01-01
              • 2011-08-19
              • 2017-11-21
              • 2016-11-07
              • 2020-11-05
              相关资源
              最近更新 更多