В далеком 2001-м году родился малыш, который был обречен на популярность благодаря всем известным  обстоятельствам, связанным с политикой Microsoft. Папа Билл Гейтс назвал своего отпрыска так, как это было с его более взрослыми детьми, заменив лишь идентификатор, он же порядковый номер. Грустно, конечно, мог бы наверняка как-то нежнее обозвать, но видимо посчитал это не самым важным моментом. Итак, Internet Explorer 6.0.  Официальная дата рождения  27 августа 2001 года, что случилось всего за пару месяцев до рождения Windows XP. В версии IE6 были некоторые серьезные улучшения, среди которых:

• усовершествованный DHTML
• контроль содержимого
• облагорожена поддержка CSS уровня 1
• DOM уровня 1
• SMIL 2.0
• MSXML был улучшен до версии 3.0
• Интеграция с Windows Messenger.

Внешне малыш получился весьма привлекательным. Этому способствовало соответствие с темами рабочего стола Windows XP. Но вместе с тем,  Internet Explorer 6 имел ряд серьезных изъянов, и даже пороков. Специалисты по верстке сайтов, и особенно та прогрессивная часть, которая начала постигать азы  верстки на слоях, или еще называемой css версткой, столкнулись с этими болезнями детища Билла Гейтса.

Если очень кратко, то  изменения в сравнении со старшим братом  IE5, хоть и были значительными, но тем не менее малыш не  соотвествовал стандартам, которые пропагандировала церковь W3C,  и здесь можно конечно  уклониться в тему еретических настроев  папы Билла Гейтса, но мы  будем объективно придерживаться  линии повествования.

Малыш рос, но другие дети явно опережали его в развитии. К примеру, Opera,  обновившись до очередной версии 7 появилась на свет 28 января 2003 года. И это был реальный прорыв в мире интернет, к сожалению омраченный маркетинговой политикой родителей этого браузера. Впрочем, пользователи без комплексов использования полубесплатных версии, активно постигали удобства браузера.

А в 2004 году родился Firefox. Т.е. были поползновения в этом направлени и до рождения, но это сейчас не так принципиально. Забегая вперед необходимо отметить, что сейчас этот молодой но весьма популярный браузер,  находится по популярности браузеров на втором месте.

Но папа IE6 — Билл Гейтс — весьма влиятельная персона, и возможности его поистине широки. Поэтому популярность была закономерной. Конечно же, ключевой момент здесь — порочная связь Windows XP и Internet Explorer 6.

Но время никогда не стоит на месте. И в 2006 году родился очередной младший брат с тем же банальным именем, лишь поменяв порядковый номер в сторону увеличения (разумеется). А в 2009м еще один — Internet Explorer 8.  Это начало раскачивать лодку. Все это, а так же развития Firefox, Opera, Safari и других детей, очень расстроили нашего героя IE6, и он был просто был выброшен из лодки.

Посвящается тебе, наш милый добрый, но  покидающий нас, друг.

===

===

Посткриптум:

На май 2009 года доля IE6 составляет всего 16%. Появился даже ресурс с весьма красноречивым названием RIP IE6.

Адрес сайта компании «Турсервис+»

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

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

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

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

Конечно же эстетика, а так же трезвость и логичность в каждом элементе. Удовольствие от того, что создаешь на своих глазах из цепочки кода что-то осмысленное, каждый 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), что нередко сбивает новичков с толку.

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

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

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

Разумеется, функционал и дизайн необходимо было обновлять согласно современным тенденциям веб-технологий. Пришелся по вкусу скрипт для ведения блогов textpattern, а так же дизайн.

CSS на примерах