HTML / CSS设计用于平凡的文本内容

时间:2008-10-23 04:46:14

标签: html css

我的任务是更新一系列促进科学会议的网站,以迎合利基科学领域。这些网站目前使用一些适用于共享公共页面模板结构的CSS布局编写,但每个页面的详细信息都是< p>,< br>和& nbsp;的混搭。定位内容。这使得更新内容变得困难,因为间距总是在变化,并且页面在最轻微的模式下最终变得难看。

所以,我想把这些东西改成一个更加快乐的CSS状态。有很多网站提供特定CSS设计目标的提示,但我是一个没有很多网站艺术能力的开发人员,并且没有考虑过结构。是否有任何好的网站在一些相对平凡但有效呈现的业务内容的背景下教CSS?像CSS zen花园这样的东西很酷,但是我正在寻找一些能够给我一些简单的文本繁重的商业数据定位想法的东西将这些想法作为一个CSS学习机会。< / p>

是否存在此类网站?

6 个答案:

答案 0 :(得分:4)

遗憾的是,如果您对HTML没有太多控制权,那么很难从CSS中获得可靠,一致的演示文稿。如果您无法向元素添加特殊类/ ID,则尤其如此。并且,<br/>标记,不断使用,会对任何标准化布局的尝试造成严重破坏。

如果您仅限于提供的HTML,那么您的主要目标应该是尽可能让它变得可读。确保字体足够大,以便人们可以舒适地阅读它靠在椅子上。或者站在别人的肩膀上。它不需要太大,但如果它像你声称的那么重,那么传统的12pt可能会觉得太小而无法阅读。

使用哪种字体是另一个考虑因素。 Verdana比Arial宽,所以它占用更多的水平空间,但往往更容易在眼睛上。其他人倾向于喜欢像格鲁吉亚这样的衬线字体,它可以在较大尺寸下保持良好状态。

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

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

请记住,人们会来到您的网站获取信息,他们可以更快地访问并获得更快乐的信息。视觉眼睛糖果很好,但您的首要任务应该始终是使网站尽可能易于使用和清晰。

至于灵感,我是Information Architects的文本设计的忠实粉丝。您可能还想查看Subtraction.com。博客可能是一个很好的灵感来源,因为它们通常非常重。

祝你好运。

答案 1 :(得分:3)

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

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

答案 2 :(得分:2)

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

答案 3 :(得分:2)

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

答案 4 :(得分:2)

首先要做的事情。使用简单和语义XHTML。如果适用,请忽略那些<br> s <p></p> s。始终使用<h1>,<h2>,<h3>等。如果您的页面看起来干净可读而没有引用CSS文件,那么您就知道自己走在了正确的轨道上。 David Shea有一个很棒的标记指南。

David Shea's Markup Guide

至于风格指南......我喜欢Ben Hunt的Web Design From Scratch,尽管他不断地对他的电子书进行了抨击。内容很好。

Web Design From Scratch: Style Guide

Web Design From Scratch: Current Styles

如果您正在寻找样本的ASP.net网站,并且正在寻找合适的CSS,请查看Microsoft的免费模板。

ASP.net Design Starter Kits

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

Smashing Magazine: Top 10 CSS Table Designs

Smashing Magazine: All CSS Articles

和平| dewde

答案 5 :(得分:0)

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