Question

我一直在设计网站一段时间，并且没有任何抱怨，令人惊讶。但是，有一件事让我困扰不已。我很慢。样式1网页（包括内容，图像，文本等完整网页）平均花费大约一个小时 - 我不知道大多数人需要多长时间？

我总是一遍又一遍地遇到同样的问题（即使每次我使用不同的方式，基于我上次学到的东西），这使我不断重新调整，重新调整，重新写。

我知道我做错了什么，但我不知道在哪里。当我的页面完成后，它们很棒，但每个浏览器之间总会存在一些非常微小但明显的差异 - 而且它确实 * 我。

以下是HTML＆amp;通用空网页的CSS。也许你可以如此友善地告诉我你认为它有什么问题，以及我怎么能够改善它？

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>

    <link rel="stylesheet" href="" />

    <meta name="author" content="My Name" />
    <meta name="keywords" content="sample, keywords, keyphrase" />
    <meta name="description" content="A sample description." />
  </head>
  <body>
    <div class="Wrapper">
      <div class="Header">
        <div class="PresentationArea">
          <div class="LeftSide">
            <img src="" alt="" class="" />
          </div>
          <div class="RightSide">
            <h1>Heading</h1>
            <p class="PresentationDescription"></p>

            <a href="" alt="" class="StyledButtonLink">Learn More</a>
          </div>
        </div>
      </div>
      <div class="ContentArea">
        <h2></h2>
        <p></p>
      </div>
      <div class="Footer">
      </div>
    </div>
  </body>
</html>

CSS

/* RESET -SOME- STUFF */
*{border:0;border:none;padding:0;margin:0;}

body {
}

a {
}

p {
}

h1,h2 {
}

.Wrapper {
  width: 960px;
  height: 100%;

  margin: 0 auto;
}

.Header {
  width: 100%;
  height: 31px;


}

.PresentationArea {
  padding: 5px 0 0 0;
}

.LeftSide {
  width: 65%;
  height: 250px;
}

.RightSide {
  width: 35%;
  height: 250px;
}

.PresentationDescription {

}

.StyledButtonLink {
}

.ContentArea {
  width: 100%;
  height: 350px;
}

.Footer {
  width: 100%;
  height: 31px;

}

非常感谢任何帮助

谢谢

Answer 1

网页样式需要多长时间？

这完全取决于页面中的内容！当我评估项目设置项目价格时，我会为每页指定2到4小时的时间值。平均而言，对于10到20页的网站，我发现允许我有足够的时间开发具有语义意义的标记，简洁和强大的CSS，以及集成到内容管理系统。

有些页面很复杂，需要花费更多时间，例如图片库页面或结构化数据表格。根据页面可能需要的JavaScript / jQuery或PHP / MySQL的数量，构建页面可能需要一天或更长时间。

在其他情况下，例如，你有一个简单的标题，头像/图像和两个段落的传记页面，你可以轻松地在一小时内完成一组10页。

如何加快加价过程

我尝试保持一致的方法来使用填充和边距。例如，我倾向于对标题和段落使用非零的margin-bottom值，并将margin-tops归零，尽管其他人则以另一种方式执行。我还使用了一个正确的重置样式表（见上面Andrew Marshall建议）。

我还预先设置了我的标题（h1 ... h6）和列表等等，这样我就可以使用通用的默认排版样式作为我构建的每个网站的脚手架。

跨浏览器像素完美

我是Dan Cederholm（Bulletproof Webdesign，Hand-Crafted CSS的作者）的崇拜者，我同意他的方法，即网页在所有浏览器中都需要看起来很好并且正常工作。它们不需要在所有浏览器中都是像素完美的。我的大多数客户都不会为在所有浏览器中使页面完美所需的细致编码付费。

话虽如此，我使用一两次黑客来不时修复IE怪异，但我不会太担心。我要注意的主要是块元素宽度（IE盒模型问题），它可以打破基于浮动的布局。

我的HTML / CSS框架

我倾向于使用相当通用的3列设计，所以我有一个基本的页面布局和相关的样式表，我用它来启动我的所有网站构建。这节省了我的时间。

将来，我将有更多标准化的1级或2级菜单（水平和垂直布局）和一些通用的交钥匙联系表格以及客户端/服务器端验证。

结束评论

我是一个单人商店，我经常为其他平面设计师建立网站。我属于网络专业频谱的开发者端。

我经营了7年多，热爱这项工作。

我还阅读了很多关于CSS和HTML的书籍，这很大程度上是因为我的直系亲属的绝望。

Answer 2

如果你应该包括

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

在您的HTML <head>中（并确保所有内容实际上都是UTF-8编码）。

我建议使用单独的“全开”CSS reset stylesheet。您可能希望使用CSS框架，例如Blueprint或960.gs（这些通常包括默认情况下的重置）。

我认为将HTML ID和类名都全部小写是常规，使用连字符（或下划线），其中包含空格。

在HTML上运行W3C HTML Validator也是一个好主意，这可以确保您不会做任何违反HTML规范的事情，从而减少意外行为的可能性。

需要有关通用HTML / CSS布局的帮助

2 个答案: