Шаг за шагом процесс для CSS / HTML макета?

Question

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

Поэтому, пожалуйста, поделитесь своими мыслями о том, что вы обычно делаете первым, вторым и т. Д. В таблицах стилей и HTML. Я имею в виду после того, как у вас уже есть макеты (в Photoshop или что-то еще), и вы садитесь за создание своего кода.

Например, вы сначала думаете обо всех разделах на своей странице (заголовок, панель навигации, контент, RSS-каналы), а затем добавляете соответствующие DIV в таблицу стилей? А потом идти и работать над каждым разделом в деталях?

(я знаю, что были другие посты с советами / рекомендациями по веб-дизайну, но я не нашел ни одной, которая фокусировалась бы на пошаговом кодировании)

Спасибо!

Answer 1

Вот правильный способ сделать это по номерам:

1) Напишите ваш HTML. Не делай ничего, только пиши. Не отображайте его в браузере, чтобы увидеть, как оно выглядит наиболее важно. Сосредоточьтесь на семантике, краткости и доступности. На данный момент ничто другое не имеет значения. Если вы ошибетесь в этом шаге, больше ничего не будет иметь значения.

2) Проверьте ваш HTML. Если ваш HTML не проходит проверку, исправьте его, прежде чем делать что-либо еще.

3) Напишите CSS для вашего HTML. На этом этапе вам придется визуализировать ваш HTML в браузере, чтобы увидеть влияние вашего CSS. Не вносите изменения в структуру вашего HTML, чтобы соответствовать требованиям презентации. Вот почему вы сначала пишете свой HTML. Единственное, что вы должны изменить в своем HTML-коде - это атрибуты class, id и title ваших тегов. На CSS ссылаются из раздела заголовка HTML, используя тег ссылки с атрибутом rel = "stylesheet". Не пытайтесь включить таблицу стилей, используя тег стиля или правило @import.

4) После того, как CSS завершен и все выглядит красиво, создайте любые фоновые изображения, необходимые для CSS.

5) Только после завершения CSS и всего, что требуется от CSS, вы должны работать на JavaScript. JavaScript никогда не входит в ваш HTML. JavaScript всегда входит во внешний js-файл. На JavaScript ссылается использование тега script, который происходит непосредственно перед закрывающим тегом body.

6) По завершении вашего JavaScript передайте его через инструмент JSLint. Перепишите ваш JavaScript в точности так, как он говорит.

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

Answer 2

Начните с 960 Grid System, начиная с http://960.gs - в него будут включены печатные сетки для набросков идей. Эта CSS-инфраструктура облегчит быструю разработку макетов, с очень простой для понимания разметкой и минимальным CSS с вашей стороны.

Nettuts некоторое время назад провели видеоурок, демонстрирующий, как легко создавать макеты с помощью 960 Grid System. Вы можете просмотреть его онлайн на http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

Если вы предпочитаете читать, у них есть письменное руководство .

Связанный:

Если вы решите поиграть с Grid System 960, вы можете добавить букмарклет, который будет накладывать ваши страницы на сетку, чтобы вы могли легко получить понравившийся макет. Дополнительную информацию (вместе с самим букмарклетом) можно получить по адресу http://gridder.andreehansson.se/

Answer 3

После нарезки композиций из Photoshop я обычно сначала пишу HTML. Я использую как можно больше семантического HTML. После завершения HTML-страницы я перехожу к CSS. Грид-системы, описанные в предыдущих ответах, действительно помогают вам макетировать ваш CSS, но вам действительно нужно создать свой дизайн с учетом этого.

Если я не использую сеточную систему CSS, я использую CSS Reset (предоставленный Эриком Мейером), поскольку он дает вам наилучшую возможную отправную точку и наименьшие проблемы при разработке для IE7 / IE8 / Safari / Firefox. Я недавно отказался от поддержки IE6, если мне не заплатили специально за это.

Answer 4

Я всегда использую CSS-фреймворк, который я сделал из нескольких базовых таблиц стилей. Сброс.css, чтобы убедиться, что все поля, отступы, границы и т. Д. Одинаковы во всех браузерах. Затем typography.css, чтобы установить несколько правил для всех шрифтов, размеров, цветов и т. Д. Для всех стандартных элементов, таких как абзацы, списки, заголовки и т. Д. Затем Forms.css, чтобы заботиться о формах, и, наконец, wireframe.css, который Позвольте мне создать страницу, основанную на Святом Граале A List Apart: http://www.alistapart.com/articles/holygrail/

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

С этой базовой настройкой я начинаю писать HTML очень глобально. Конечно, деления для разделов каркаса, а затем деления внутри этих делений. Обычно я заполняю заголовок h1 и списком с основными навигационными элементами (в зависимости от дизайна), боковыми панелями с одним или несколькими блоками списков и / или абзацев и основным столбцом с несколькими абзацами. Это просто для того, чтобы немного заполнить страницу, даже если содержание все еще бессмысленно.

Затем я начинаю брать каждый элемент (например, меню навигации), сначала записывая HTML-код для него, как если бы он был показан в браузере без таблиц стилей. Убедитесь, что с семантикой все в порядке, используйте h1 для заголовков, p для абзаца, ul / ol для списков и т. Д. Затем, когда HTML этого конкретного элемента готов и выглядит хорошо в браузере без стилей, я начинаю применять css.

Все стили, которые я добавляю после настройки стилей фреймворка, помещаются в отдельную таблицу стилей, являющуюся main.css. Я обычно делю эту таблицу стилей так же, как и страницу, сначала блок с классами, которые используются на всей странице (например, повторяющиеся блоки, которые служат нескольким целям), а затем один за другим блокируют стиль для заголовка и его содержимого. , подзаголовок и его содержимое, основной столбец, левая и правая боковая панель и нижний колонтитул.

Этот процесс заставляет меня задуматься о каждом элементе html, прежде чем даже применять к нему стиль, так что базовый html семантически корректен, но, предварительно определив основную среду CSS, я по крайней мере буду с чем работать.

(пример в работе можно увидеть по адресу pkr.nl/template/, где вкладка форума в верхнем меню может быть нажата для другой страницы с меньшим количеством столбцов).