网站栏宽

发布于 2024-08-26 11:17:05 字数 145 浏览 13 评论 0原文

我很感兴趣您建议的两栏和三栏网站的栏宽。

例如,如果我们考虑两列布局(总宽度 1000px),一些可能的宽度将是: 900-100, 800-200, 750-250, 700-300, 600-400。 哪种布局最适合可用性、可能的广告展示位置、小部件集成?

I am interested what column widths you would suggest for two-column and three-column websites.

For example if we consider two-column layout (total width 1000px), some possible widths would be:
900-100,
800-200,
750-250,
700-300,
600-400.
Which layout is best for usability, possible ad placements, widget integration?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

瀟灑尐姊 2024-09-02 11:17:05

960px - http://960.gs

这是划分为任何可用列的最佳数字,并且该网站具有各种帮助您进行布局的指南和网格。

它的宽度也是您想要的宽度,并且仍然适合 1024 宽屏幕 - 1000px 将导致水平滚动条。

我还建议不要使用基于百分比的宽度,因为它几乎不可能控制布局。

960px - http://960.gs

It's the best number to divide into any available columns and that site has all sorts of guides and grids for helping you make the layout.

It's also as wide as you want to get and still fit in a 1024 wide screen - 1000px will cause horizontal scrollbars.

I'd also advise against a % based width as it's near impossible to control layout.

肤浅与狂妄 2024-09-02 11:17:05

使用黄金比例

http://goldenratiocalculator.com/

黄金比例对于人眼来说非常自然

use Golden Ratio

http://goldenratiocalculator.com/

Golden proportion is very natural to human eye

吝吻 2024-09-02 11:17:05

这实际上取决于您要实现的网站以及每个列上的特定功能。但要求可用性,很可能我不使用固定宽度的列。设置百分比宽度的列(总共产生 90% 以上)将主要利用阅读器的屏幕。对于 3 列,您可能可以从 20% - 60% - 20% 开始,对于 2 列,可以从 30% - 70% 开始

This really depends on what web site and what particular function on each col you are going to implement. But asking for usability, most probably I don't use fixed width cols. Setting cols with percentage width (and yield a total 90%+) would mostly utilize reader's screen. You can probably start from 20% - 60% - 20% for 3-col and 30% - 70% for 2-col

嗳卜坏 2024-09-02 11:17:05

382 像素和 618 像素。

382px and 618px.

折戟 2024-09-02 11:17:05

我建议看一下这个pdf:
http://www.subtraction.com/pics/0703/grids_are_good.pdf

如果给出了网格系统的一些历史,然后介绍了基于广告单元构建网格的过程。值得一看。

I would suggest looking at this pdf:
http://www.subtraction.com/pics/0703/grids_are_good.pdf

If gives a bit of history of grid systems and then goes through the process of building a grid based on an ad unit. It worth a look.

不必你懂 2024-09-02 11:17:05

960 像素 - 总宽度。我认为这是最好的标准。那你可以试试160+800或者800+160

960 px - total width. I think it's the best standard. Then you can try 160+800 or 800+160

鲜血染红嫁衣 2024-09-02 11:17:05

按照 DCD 上面的说明使用 960 网格。

易于使用,从 Photoshop/Fireworks 中的模型到包含在 html 中。一旦您熟悉了网格“框架”的简单概念,您将很快获得布局。它会为您处理边距/填充的问题。

许多顶级网站设计都使用这种网格。

至于你的具体问题:

960px宽度(使用960网格):
container_12 及其内部包含 2 列的 9:3 或 10:2 网格布局
或者
里面的container_16包括3列的3:9:4网格布局

但是对此没有硬性规则。让它根据您的环境和情况发挥作用。使用。

如果您提供有关您打算做什么的更多信息,我可以给您更具体的建议:)

Use the 960 grid as DCD says above.

Easy to work with from mock-ups in photoshop/fireworks to including in your html. You'll get a layout quickly once you familiar with the simple concepts of the grid "framework". It takes care of the margin/padding stuff for you.

Many top site designs use this grid.

As for you questions specifically:

960px width (using 960 grid):
container_12 and inside of that include a 9:3 or 10:2 grid layout for 2 columns
OR
container_16 inside of that include 3:9:4 grid layout for 3 columns

But there are no hard rules on this. Make it work depending on your context & use.

If you provide more info on what you intend doing, I could give you more specific advise :)

眼眸里的那抹悲凉 2024-09-02 11:17:05
  • 采用960px宽度。 960 像素适合 800x6001024x7681280x960 显示器。

  • 如果您想支持移动设备(较小的分辨率),请使用流体布局并使用媒体查询以获得更好的控制。

  • 避免考虑所有屏幕分辨率,因为它会浪费您的时间。

    避免

  • 使用跟踪器(例如 Google Analytics)来跟踪用户的浏览器窗口大小,以便您可以确定受众的屏幕分辨率通常是多少。

就可用性而言,至少从我的经验来看,屏幕分辨率方面最重要的三个因素是:

  • 避免留下水平滚动条
  • 避免字体太小(很难阅读)
  • 避免固定字体大小。
  • Go with 960px width. 960 pixels is good in 800x600, 1024x768, and 1280x960 monitors.

  • If you want to support mobile devices (smaller resolutions) then use a fluid layout and use Media Queries for better control.

  • Avoid considering ALL screen resolutions, because it will waste your time.

  • Use a tracker, e.g., Google Analytics to track your users' browser window sizes, so you can determine what usually are your audiences' screen resolution.

In relation to Usability, three of the most important factors in terms of screen resolutions, at least from my experience are:

  • Avoid leaving a horizontal scrollbar.
  • Avoid too small font size (very hard to read).
  • Avoid fixed font sizes.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文