Сексуальные шаблоны для не очень сексуальных программеров

Собстенно говоря оригинальная статья сподвигшая меня на создание этого блога.
аудио-версия оригинала
Ниже приведен мой вольный перевод.

Автор: Эрик Бэрри

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

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

Цель: Создать центрированый макет с тенями покраям, над черепичными фоном.
Шаг 1. Получение изображений
Первое, что нужно получить всю графику которую вы собираетесь использовать. Нажмите здесь, чтобы загрузить изображения.
Фоновое изображение (должно быть Бесшовное)

Wrapper Background (1 точка в высоту на 800 точек в ширину)
Это изображение, чтобы продемонстрировать прозрачность. Настоящее изображение в архиве.

Wrapper Footer Background (35 точек в высоту на 800 точек в ширину)
Это изображение, чтобы продемонстрировать прозрачность. Настоящее изображение в архиве.
Шаг 2. Создать HTML
Макет будет полностью CSS инициативе. Это означает, что нет встроенных стилей. Это делает его очень легко поддерживать стили в вашу заявку, поскольку они имеют все проживающие в CSS файл, а не код.
Я буду создавать HTML формат, как myapp.html.

myapp.html


Шаг 3. Создать CSS

myapp.css



Некоторые отмечает, стоит упомянуть, на благо вам CSS новичков там. Не стыдно. Мы все должны начать-то.
В теле метку (строки 1-5), мы ставим разницы, а обивка как к нулю. Это необходимо, чтобы убедиться, что макет толкает в отношении верхней части окна, и не показывать разрыв.
Линии 6-9 набора окраины и обивка всех H-теги к нулю. Это делается с тем, что они также не подталкивать макет в направлениях, она не должна быть дюйма Можно ограничить это просто разница, если хотите.
Линии 10-14 задать стиль для наружной оболочки макета. Это когда мы центр поля (строки 11-12) и назначить фон.
Линии 15-19 задать стиль для содержания Div внутри обертки. Здесь мы будем иметь содержание заявки. Мы используем эту Div с тем мы не располагаем более чем содержание верхней части теневой области, в обертки.
Линия 20-31 схожи в логику 10-19. Единственная реальная разница заключается в том, что мы не повторить наш фон (как показано в строке 25). Это происходит потому, что мы хотим лишь фон для появляются в верхней части колонтитула.

Схема макета



Вы можете завершил скачать макет с изображениями и стилей здесь.