CSS вёрстка — идеи, соображения.

CSS вёрстка — идеи, соображения.

admin One comment
CSS верстка

Решил прокомментировать статью на небезызвестном сайте webmascom — море воды утекло с момента первого прочтения. Некоторые моменты казались откровением, другие же вызывали споры. Что ж — посмотрим сейчас, спустя пару лет, какие выводы можно сделать. По тексту я буду вставлять свои комментарии, таким образом Вы сможете следить за двумя параллельными мнениями.

Общие рекомендации

Получайте удовольствие!

Да-да! Первым пунктом на виднейшее место. Процесс верстки должен приносить удовольствие. Гармония! Ритм! Внутренняя эстетика!

Конечно же эстетика, а так же трезвость и логичность в каждом элементе. Удовольствие от того, что создаешь на своих глазах из цепочки кода что-то осмысленное, каждый div, каждый параграф, каждое свойство элемента. Да — работа должна приносить удовольствие.

Купите книгу

В советские времена бытовало мнение, что книга — лучший подарок. Неспроста. Купите (одолжите, выиграйте в карты) книгу (да-да! ту бумажную, самую), в которой доходчиво рассказано о том, что такое CSS и XHTML. Такие книги есть. Большинство написана по-английски, но есть что прочесть и русскоязычному читателю. Загляните в ближайший книжный магазин. Поройтесь в сетевых книжных развалах типа books.ru

Не верьте тем, кто говорит, словно спецификации, которые опубликованы Консорциумом W3, максимально пригодны для изучения основ. Че-пу-ха. Они написаны для браузеров, а не для людей. Не усложняйте себе жизнь. Копаться в спецификациях начнете тогда, когда довольно освоитесь.

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

Пишите код в простом текстовом редакторе

Да, именно так. Забудьте ненадолго о той заветной папке, в которой собраны дистрибутивы HomeSite, TopStyle либо чего-то-там-еще. По жизни успеете ими воспользоваться. Легкий текстовый редактор типа Notepad либо FAR поможет вам на начальном этапе до конца прочувствовать процесс написания кода. Проверено — работает.

Что работает? Скорость печати возрастает — бесспорно. А вот TopStyle — лично для меня (да и не только) — проверенный редактор, в котором сверстан не один десяток сайтов, которые, в свою очередь, приносят дивиденды своим авторам. Хотя, справедливости ради, отметить хочется, что первые несколько месяцев активно пытался использовать Dreamweaver. Но не сошлись характерами. А верстать в блокноте — без autocomplete — не для меня. Время — деньги.

Начните потихоньку совершенствовать английский

Не откладывайте в долгий ящик. Знание английского пригодится еще не раз (дочитайте до конца). Помните: великие css-джедаи пишут наиболее часто по-английски. Не ждите, пока кто-то переведет на русский, а прочтите сами.

Это факт. Непреложный. Английский в кодинге абсолютно необходим. Жизненно. Самые хорошие и полезные статьи прочитал как раз на английском языке.

Не забывайте о практике

Чуть-чуть освоившись, примитесь за дело. Практика, практика а кроме того раз практика. Вы можете начать верстать кое-что свое, или приняться за исправление существующих сайтов. Второе даже предпочтительней т.к. тотчас окунет вас в настоящую работу, позволив более надежно закрепить навыки. Не бойтесь оказаться не у дел — в Сети полно отличных (но нехорошо сверстанных) сайтов, обладатели которых не откажутся от вашей посильной помощи. Санитаром быть леса не так уж и плохо.

Браузеры

Раз уж серьезно принялись за дело — инсталлируйте несколько разных браузеров. Джентльменский набор таков: Internet Explorer 6.0 (и ранние, в случае, если не лень возиться), Mozilla Firefox, Opera. Добавьте по вкусу еще каких-нибудь.

Обязательно снабдите Firefox довольно-таки полезным расширением WebDeveloper.

Со всем соглашусь. Но главный помощник при отладке верстки сайта для меня — расширение Firebug.

Следите за новостями. RSS вам в помощь

Блочная вёрстка, как и любая развивающаяся технология, регулярно пополняется новыми приёмами, техниками и т.п. О них пишут. Ваша задача: не пропустить что-то важное. Пожалуй, лучшим способом сбора новостей можно назвать чтение RSS-лент известных сайтов. В частности, Webmascon транслирует свои новости в свою RSS-ленту Webmascon Daily.

Подробней об RSS читайте на нашем сайте, и в других не менее полезных местах. Загляните в нашу коллекцию RSS-лент.

Общение

Не бойтесь спрашивать. В Сети достаточно мест, где можно задать вопрос о вёрстке, и получить на него квалифицированный ответ. К таковым местам можно отнести наш форум, сообщества ru_coding и ru_webdev в Живом Журнале, deforum.ru, фидошные конференции fido7.ru.html.chainik и fido7.ru.html.profy и т.д.

Работайте с Сетью

Ниже приведены некоторые ссылки на полезные ресурсы. Преимущественно англоязычные (Вот и пригодился английский язык! Спасибо школе и институту!). Предполагается, что обращаться к ним подобает лишь тогда, когда собственных знаний для решения проблемы не хватает.

  1. Webmascon, рубрика «Вёрстка»
  2. Шпаргалка по CSS
  3. Web-Dev-Bookmarks (Закладки вебразработчика) — полезнейший набор ссылок на всевозможные вопросы, связанные с вёрсткой, вебстандартами и т.п.
  4. css/edge
  5. http://alistapart.com/
  6. http://www.digital-web.com/
  7. http://www.456bereastreet.com/lab/
  8. и т.д.

Для начала хватит. Список будет пополнятся в процессе освоения. Уж поверьте.

Время не стоит на месте, и появилась уйма ресурсов, посвященных проблемам CSS: http://cssing.org.ua, http://www.htmlbook.ru/

Подробней о важном

Лишь четыре важных замечания. Всё остальное вы найдёте в Сети.

Избегайте стереотипов

Неоднократно доводилось видеть, как люди мучались, верстая «блоками» изначально табличные макеты. Эти кодеры считали блочную вёрстку эдакой прилизанной с точки зрения вебстандартов технологией, призванной на новом качественном уровне решать старые табличные задачи. Это не совсем верно. «Старые задачи» ограничивались самим кодом — нельзя было менять внешний вид, не изменив теги, составляющие код таблиц. Что мы имеем сегодня? Один XHTML код — и бесчисленные варианты отображения страницы (достаточно менять CSS код). Взгляните на CSSZengarden. Обдумайте эти нехитрые соображения, и, приступая к работе, не дайте мозгу запереть вас в душной комнате табличной вёрстки — выйдите наружу, а там решите, останетесь возле дома или пойдёте дальше.

Для начала взгляните на базовые CSS-макеты: «Quick-Links to the Layouts».

Опять же — таблицы там, где это явно видно. Не раз попадались варианты, когда и календари верстали с помощью списков. Я не говорю, что это неверно, я и сам так делал, но ЗАЧЕМ?..

Не ограничивайтесь написанием стилей лишь для браузеров

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

Помните о DOCTYPE

Начинающие нередко о нём забывают (или не знают?) Не забывайте указывать DOCTYPE. Страница , в которой он не указан, отображается в так называемом «режиме несоответствия стандартам» (quirks-mode), что нередко сбивает новичков с толку.

Проверяйте код

Проверяйте код валидатором. Экономит время и нервы.

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

One comment

Владлен

Сентябрь 27, 2008 в 9:49 дп

хорошая статья

Оставить ответ

Архивы