Сайты с шаблонами верстки

Шаблоны для сайтов ECommerce
Хороший выбор шаблонов для разных CMS (Drupal, WordPress, Joomla и т.п) и не только
Еще один сайт с отличными шаблонами 5 звезд!

Статьи и сайты посвященные разным хитростям CSS

Несколько интересных вариантов дизайна таблиц, при помощи CSS
Обзор неплохих редакторов CSS
Сайт с хорошей подборкой CSS меню

Продолжая исследовать статьи Эрика Бери

Ссылки на статьи, которые собираюсь пересести:
Becoming a Sexy Programmer: Menus
Becoming a Sexy Programmer: Slideshows
Becoming a Sexy Programmer: Clean Forms
How to create Tabs with CSS and jQuery from scratch

Ссылки на сайты рекомендованные автором:
www.cssmenumaker.com
www.13styles.com

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

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

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

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

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

Цель: Создать центрированый макет с тенями покраям, над черепичными фоном.
Шаг 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). Это происходит потому, что мы хотим лишь фон для появляются в верхней части колонтитула.

Схема макета



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

От автора

Начав свое профессиональное становление с программирования, за свою карьеру я был и программером, и админом, и руководителем подразделения тех-поддержки, наконец возглавил компанию занимающуюся вэб-разработкой и выпуском интернет-СМИ. Чем дальше, тем больше моя деятельность отходила от программирования как такового, но душа всегда "просила Кода". :-) Так или иначе я постоянно сталкивался с программерами или программерскими задачами, да и сам, бурча с лыбкой "давно не брал я в руки шашки" брался править чужой код или упражнялся со своим.
Через мои руки прошло много всякого счастья... Pascal и C#, unix-скрипты, html, php, javascript, ....
Конечно я уже не стану тягаться с нормальным программером имеющим регулярную практику кодирования, но до сих пор могу "утереть нос" некоторым доморощеным товарищам...

Этот блог я создал для того, чтоб сохранять интересные найденные в инете материалы, примеры кода или решения разных программерских задач, без разницы это код для вэба или пример написанный на С++, asm-у