Нужна помощь с общим макетом HTML / CSS - PullRequest
Новая
       0

Нужна помощь с общим макетом HTML / CSS

1 голос
/ 07 марта 2011

Я давно занимаюсь дизайном сайтов и, к удивлению, жалоб не было. Но есть одна вещь, которая беспокоит меня совсем немного. Я медленный. У меня уходит в среднем около часа, чтобы оформить 1 веб-страницу (полную веб-страницу, включая контент, изображения, текст и т. Д.) - и я не знаю, сколько времени у этого у большинства людей?

И я всегда сталкиваюсь с одними и теми же проблемами снова и снова (хотя каждый раз я использую разные способы, основанные на том, что я узнал в прошлый раз), что заставляет меня постоянно перестраиваться, перестраиваться, перестраиваться написать.

Я знаю, что делаю что-то не так, но я просто не знаю где. Когда мои страницы заканчиваются, они становятся великолепными, но всегда есть небольшие, но заметные различия между каждым браузером - и это действительно * me.

Ниже приведен HTML & 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;

}

Любая помощь очень ценится

Спасибо

Ответы [ 2 ]

2 голосов
/ 07 марта 2011

Как долго оформлять веб-страницу?

Все зависит от того, что на странице! Когда я оцениваю проект, чтобы установить цену проекта, я назначаю значение времени от 2 до 4 часов на страницу. В среднем для веб-сайта объемом от 10 до 20 страниц я обнаружил, что это дает мне достаточно времени для разработки семантически значимой разметки, краткого и надежного CSS и интеграции в систему управления контентом.

Некоторые страницы являются сложными и занимают больше времени, например, страницы галереи изображений или таблицы структурированных данных. В зависимости от количества JavaScript / jQuery или PHP / MySQL, которое может понадобиться странице, на создание страницы может уйти день или больше.

В других случаях, например, на биографических страницах, где у вас есть простой заголовок, выстрел в голову / изображение и два абзаца, вы можете легко получить набор из 10 страниц за час.

Как ускорить процесс наценки

Я стараюсь придерживаться последовательного подхода к использованию отступов и полей. Например, я склонен использовать ненулевые значения поля на полях для заголовков и абзацев и обнулять поля на полях, хотя другие делают это иначе. Я также использую правильную таблицу стилей сброса (см. Выше предложенный Эндрю Маршаллом).

Я также предварительно настраиваю заголовки (h1 ... h6), списки и т. Д., Чтобы у меня был общий типографский стиль по умолчанию, который я могу использовать в качестве основы для каждого создаваемого мной сайта.

Кросс-браузер Pixel Perfection

Я большой поклонник Дэна Седерхольма (автора Bulletproof Webdesign, Hand-Crafted CSS), и я согласен с его подходом в том, что веб-страницы должны просто хорошо выглядеть во всех браузерах и работать должным образом. Они не должны быть идеальными для всех браузеров. Большинство моих клиентов не будут платить за тщательное кодирование, необходимое для совершенствования страниц во всех браузерах.

Сказав это, я использую один или два хака, чтобы время от времени исправлять странности IE, но в остальном я не слишком обеспокоен. Главное, на что я обращаю внимание - это ширины блочных элементов (проблемы с блочной моделью IE), которые могут нарушить разметку с плавающей точкой.

Мой HTML / CSS Framework

Я склонен использовать довольно общий дизайн с 3 столбцами, поэтому у меня есть базовый макет страницы и связанные таблицы стилей, которые я использую для запуска всех сборок моего сайта. Это экономит мое время.

В будущем у меня появятся более стандартизированные одно- или двухуровневые меню (горизонтальные и вертикальные макеты) и некоторые общие формы контактов «под ключ» с проверкой на стороне клиента / сервера.

Заключительные комментарии

Я магазин для одного человека, и я часто создаю сайты для других графических дизайнеров. Я падаю на сторону разработчика профессионального веб-спектра.

Я в бизнесе более 7 лет и люблю работу.

Я также прочитал много книг по CSS и HTML, к большому отчаянию моей близкой семьи.

1 голос
/ 07 марта 2011

Для одного вы должны включить 

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

в вашем HTML <head> (а также убедитесь, что все на самом деле в кодировке UTF-8).

Я бы порекомендовал использовать отдельную "полную" таблицу стилей сброса CSS . Возможно, вы захотите использовать CSS-фреймворк, такой как Blueprint или 960.gs (по умолчанию это обычно сброс).

Я думаю, что условно, чтобы идентификаторы HTML и имена классов были все в нижнем регистре, с дефисами (или подчеркиваниями) там, где были бы пробелы.

Хорошей идеей будет также запустить W3C HTML Validator на вашем HTML, это гарантирует, что вы не делаете ничего, что нарушает спецификацию HTML, и, следовательно, снижает вероятность непредвиденного поведения. *

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...