Дизайн и верстка. Часть первая

пт, 13.06.2008 18:38 :: olk

Ну вот, выдалась пара свободных деньков (спасибо Дню России). По этому приступаем к верстке.
Обычно при разработке нового сайта процесс происходит у меня следующим образом:

  • Карандашный эскиз, главной и дочерних страниц (если дизайн у них различен)
  • Приведение "графического" дизайна (а на данном этапе - к виду не использующему графику (я искренне считаю, что сайт должен нормально смотрется и при отключенной загрузке изображения)
  • Построение валидного HTML шаблона по данному дизайну - тут имеется ввиду опять же взаимное расположение элементов, относительные масштабные соотношения между элементами, выбор основных и дополнительных цветов, определение основных метрик контекста (отступы, размеры и т.п.)
  • Наложение (или привязка полученой верстки к движку (в данном случае к Drupal-у), здесь не скрою, что изначально дизайн разрабатывался с "оглядкой" на возможность перенести его в тему Drupal-а.
  • "Наложение" графики на полученный результат ... в этом моменте иногда происходит коррекция первоначального лэйоута (в основном в плане более точной подстройки размеров под графический дизайн)
  • Настройка вывода контента под полученный дизайн (страницы, блоки и т.п.)

Пока разработка закончилась на пункте 3. Т.е. получен HTML Код для страниц. Результат творчества в виде "скриншотов" ниже. Замечу что в данном коде нет ни пикселя графики. Правда вывод страниц проверен только для MSIE7,FierFox,Opera 9 , скорее всего под MSIE6 потребуется специальная подстрока стилей (а под более ранние версии, боюсь потоковый (div) вывод вообще будет сложно (читай невозможно) подстроить), но это оставим на "попозже".
И так, что у нас получилось.

Стартовая страница - вариант для не авторизованного пользователя (присутствует логин блок)



Стартовая страница - фрагмент для авторизованного пользователя



Страница с материалами


В данном случае, границы вокруг регионов вывода, установлены для визуального контроля, и в дальнейшем вполне возможно их не будет. Подстройка стиля вывода контента тоже будет происходить позже.
Следующий шагом будет "привязка" шаблона вывода к движку Drupal-а , а точнее создание на основе нашего HTML кода - темы для Drupal.

Добавить комментарий
« Добавить комментарий
» Добавить комментарий