当前格式化网页的最佳做法是什么?

问题描述 投票:2回答:4

几年来我没有做过任何真正的网页设计,现在我的任务是创建一组需要相对复杂(准确)布局的网页。 我已经开始探索CSS,虽然我开始对如何使用它有所了解,但它似乎并不是我所需的那种布局的合适工具。

我需要的布局有一个顶部,中间和底部部分,每个部分都分为不同的区域。 我需要一些类似的东西:

35%,35%(右对齐),15%,15%

70%,15%,15%

70%,15%,15%

百分比是浏览器的宽度,并且列结尾的百分比与上/下一行的行相同,则列的边缘需要满足。 而且,无论我在行中放置什么内容,行都必须位于彼此之间。

CSS似乎可以满足我的要求,但是当我开始尝试自己需要的复杂性时,我无法获得匹配的列或行流入其他行等。

我真正想要的是框架之类的东西,在其中我可以将元素精确地定位在想要的位置。 是否存在,还是只与CSS对抗?

谢谢,

肖恩。

css
4个回答
5
投票

您需要学习 CSS,而不是与之抗争 。 CSS已用于创建比您所描述的更为复杂的布局。 这是您应该设计网页样式和实现布局设计的唯一方法。

与框架相比,CSS为您提供了对网页表示和元素定位的更多控制(框架只为您提供了框架,以加载多个页面;您仍然需要分别设置这些页面的样式)。

这是一个相当广泛的问题,所以我只想这样说:

  • 使用HTML在语义上组织/结构化您的内容。
  • 使用CSS进行演示。

换句话说,请勿使用以下任何标签或类似标签:

  • <b> (改用<strong>
  • <i> (改用<em>
  • <font>
  • <u>

请记住在适当的地方使用结构化标签,例如:

  • <h1><h6>
  • <p>
  • <blockquote>
  • <pre>

并使用语义正确的标签。 因此,如果您有定义列表,请使用<dl><dt><dd> 。 如果您有表单,请使用<label for="{input id}"> ,例如:

<label for="first-name">First Name:</label>
<input name="first_name" id="first-name" />
<!-- when the user clicks on the label, the input will receive focus -->

不要将表格用于布局。 仅将它们用于表格数据。 然后,请确保使用正确的语义标记<thead><th><tbody>等。

title属性放在链接中,将alt属性放在图像中,以提高可访问性和可用性。

并使用样式表(对于DRY,最好是外部样式表)代替内联样式。

最后,如Jan_V所述, w3schools.com是CSS,JavaScript,HTML和大多数Web标准的绝佳资源。 您可以学到很多东西,但是幸运的是,网络上有大量的教程,参考资料和其他资源可以帮助您。 了解如何正确使用 CSS / HTML,您将制作出质量更高的网页并节省维护时间。

如果您在考虑布局问题,请从更简单的方法开始,然后逐步进行。 例如,首先尝试均匀绘制的2列2行布局。 一旦完成工作,就开始更改比例并添加更多列/行。


2
投票

CSS几乎可以完成您想要的任何事情,它是用于在网页上定位和样式化元素事实上的工具。 我认为您应该研究一下位置:基于您的描述的绝对和浮动功能。 它的困难在于跨浏览器获得一致的行为/解释。 强烈建议使用类似YUI的 css-reset来帮助解决此问题。 YUI还具有JavaScript实用程序 ,可帮助规范浏览器中的某些CSS行为(例如,浮动和不透明)。 YUI绝不是实现这些目标的唯一方法。


0
投票

您可以尝试使用表格进行布局,但是我建议使用CSS和DIV元素。 如果要使用框架或桌子,您以后会遇到麻烦(可能)。 另外,CSS并不难,只需花一点时间来学习它,也许花些时间来学习W3Schools,它们都有不错的教程。


0
投票

请记住,将表用于CSS会导致可访问性问题。 这意味着具有辅助功能的用户可以使用屏幕阅读器来浏览您的网站。

我同意先前的一些回答。 花时间了解CSS。 如果编写正确,则意味着您的样式将是可重复使用的,并且一旦完成就可以轻松实现和更改。 尝试更改已在多个页面上单独编码的样式会导致您头疼。

如果您的网站要复杂,请尝试确保尽可能简化其维护,CSS一定会为您提供帮助。

© www.soinside.com 2019 - 2024. All rights reserved.