Десятка лучших сайтов о CSS

27 ноября 2007 года   |  Разное

Верстка в последнее время не обходится без CSS. Чтобы иметь представление о том что это такое такое приведу статью «Десятка лучших сайтов о CSS«.

Перевод статьи The 10 Best Resources for CSS
Автор оригинального текста: Mark Daoust
Переводчик: Коробкова Надежда Александровна, г. Москва, e-mail: angie5@mail.ru, ICQ: 261396962

Если вы обратили свое внимание, вы, конечно, заметили все увеличивающееся число вебсайтов, использующих CSS, а также все растущее количество ресурсов, кричащих о том, насколько замечателен CSS. И если вы ещё не запрыгнули в вагончик к любителям CSS, вы можете сделать это прямо сейчас.

CSS приносит владельцам вебсайтов массу разных выгод. Самая очевидная это то, что с помощью CSS можно выделить дизайн вебсайта в чистом виде. CSS может управлять абсолютно всем: начиная с размера шрифта и заканчивая самой версткой вашей страницы. Правильно спланированный сайт на HTML и CSS может избежать связи между практически любыми дизайнерскими элементами в данном HTML. Это означает, что владелец вебсайта может изменить вид целого сайта, не меняя код HTML. Для владельцев сайтов с изменяющимся контентом или сайтов с большим количеством контента (блоги, форумы, магазины и т.д.) это экономит массу времени.

CSS также позволяет владельцу вебсайта выстраивать его HTML в стройном логическом порядке. Когда для вёрстки используются таблицы, зачастую HTML код сайта не располагается в логическом порядке (так называемый «прямой поток»). Это может навредить владельцу сайта двумя способами. Первое, и самое важное, что надо знать, то что не каждый, кто пользуется интернетом, рассматривает ваш сайт через такие браузеры как Internet Explorer или Firefox. Существует целая группа людей, просматривающая вебсайты при помощи веб ридеров и других инструментов, рассчитанных на хорошо организованный код. Во-вторых, хорошо организованный вебсайт может существенно облегчить ранжирование вашей страницы. Когда поисковой робот обнаруживает, хорошо организованную и не отяжеленную большим количеством лишнего HTML страницу, он быстрее и легче определяет, о чём эта страница. Давайте обращать на это внимание, ведь мы хотим помочь поисковым роботам, не правда ли?

Эта статья написана обо всем, что касается CSS. Существуют сотни сайтов, предлагающих руководства по CSS, примеры использования CSS, сравнения и демонстрации. Возможно существует что-то, о чем мы не знаем и что не отражено здесь; в этом случае, просим вас сообщить нам на Site Reference Forums.

Перед тем как вы перейдёте на любой из предложенных сайтов, мы должны сказать несколько слов предупреждения. Эти сайты могут быть весьма захватывающими, если вы хоть немного увлекаетесь веб дизайном. Некоторые из них содержат буквально сотни ссылок на другие сайты, которые бесспорно завладеют вашим вниманием.

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

CSSZenGarden

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

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

The Web Developer’s Network

Любой сайт из нашей папки «Избранное» можно найти на этой странице, охватывающей массу ресурсов. Будьте осторожны, список источников так велик, что изучая их легко пропасть на много часов. Некоторые из них просто забавно изучить, в то время как другие дают иной раз практические ответы на практические вопросы.

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

Official Cascading Style Sheets Level 2 Specification

Начало всего, для того, кто решил изучать CSS. Здесь вы найдете официальную инструкцию, как и для чего, использовать CSS. Многие новички опасаются это сайта, потому что он написан слишком техническим языком и они боятся ничего не понять. Если вы один из них, будьте осторожны – не нужно недооценивать себя. Специальные термины на самом деле гораздо проще, если знать, как читать их.

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

И в качестве рекомендации: если вы собрались просто освежить в памяти наиболее важные главы руководства, не пропустите главы 8-12, 14-18 и 4-6.

CSS from the Ground Up

Хорошо, вы попробовали официальное руководство, и оно все же оказалось слишком сложным. Ничего страшного. В нём полным-полно разной информации и разработчики определенно не старались развлечь нас с его помощью. Если же вы хотите получить самую суть руководства по CSS, разработчики из Web Page Design for Designers собрали довольно неплохой общий курс, который поможет вам с вашими первыми CSS страницами.

Listamatic

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

Listamatic приводит несколько примеров списков, использующих простой CSS. Эти примеры охватывают практически все, чего вы, возможно, надеялись добиться от списка HTML. Разумеется, если вы работаете с вложенными списками, для них примеры там тоже имеются.

CSSVault

На этом сайте вы найдете всего понемногу. На нем есть большая галерея для просмотра, а также множество ресурсов обо всем от списков до верстки страниц без использования таблиц. Определенно полезный полный ресурс о CSS.

CSS Layout Techniques

Ни одно CSS руководство не было бы полным, если бы мы не упоминали проблему создания верстки без использования таблиц. Это, безусловно, наиболее трудный аспект CSS, изучающий построение хорошей верстки. Разработчики Glish.com собрали вместе примеры нескольких различных типов верстки. Они, конечно, не могут предложить каждый тип, которым вы возможно воспользуетесь, но просмотр их руководств определенно поможет вам изучить различные техники по верстке вашей страницы.

Ruthsarian Layouts

На самом деле ресурсов о том, как верстать страницы, используя CSS, много не бывает. Ruthsarian Layouts предлагает несколько очень хороших примеров популярных вариантов верстки.

PositionIsEverything

Мы еще раз предлагаем очередной сайт, посвященный изучению верстки и маленьким причудам, которые каждый браузер привносит в дизайн вашего CSS. Этот сайт имеет, возможно, больше информации о позиционировании с помощью CSS, чем какой-либо другой.

StyleGala

Еще один сайт, который простирается немного за пределы CSS и углубляется в некоторые другие аспекты проектирования, но все же предлагает столько для изучения, что его обязательно стоит добавить в «Избранное». В этот сайт входит внушительная галерея, несколько форумов, коллекция маркёров списка, которую вы можете использовать на своем собственном сайте (где же она была все эти годы?) и большое собрание ресурсов.

Использование этих ресурсов в учёбе

Являетесь ли вы фанатом кодирования или человеком, полагающимся на FrontPage для создания всего своего дизайна, продвижение направления CSS и должным образом написанного HTML — это будущее интернета. Многим в самом начале процесса изучения CSS может показаться бесполезным и чересчур трудным занятием. Однако если вы несете ответственность за внешний вид и восприятие другими вашего сайта, вам пора бы изучить технологию, которая становится все более и более используемой.

Самый лучший способ изучить CSS это начать использовать его. Экспериментировать с его различными частями. Пробуйте и достигайте различных фокусов, которые раньше никогда не делали. Если вы раньше не создавали страницу без помощи таблиц, попробуйте сделать это сегодня же. Если вы никогда не работали о списком, чтобы сформировать его совершенно иным образом, поэкспериментируйте с этим. Просмотрите несколько сайтов из множества различных галерей, предлагаемых нам, и вдохновитесь. Используйте эти сайты и источники, чтобы представить, как может выглядеть ваш собственный сайт.

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

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

Об авторе

Mark Daoust является владельцем Site Reference и TowerSearch . Вы можете использовать эту статью на своем вебсайте пока оставляете все ссылки активными и сохраняете этот блок с ссылками на источник.

Еще одна очень интересная ссылка: Layout Gala — готовые для скачивания образцы вёрстки, такие как, например, резиновая вёрстка в три колонки или вёрстка в две колонки с резиновой левой и фиксированной правой колонкой.

Иллюстрация к статье: Яндекс.Картинки

Читайте также

Статьи