Верстка по стандартам на практике

8 Декабря, 2005

Который раз по долгу службы встала передо мной задача сверстать партию макетов для очередного сайта. И тут возникла дилемма: в таблицах верстать уже нет никакого желания, а в слоях еще маловато опыта. Основная сложность – это создание layout'а страницы. Если раньше достаточно было создать таблицу, в которой определить ячейки под колонки/шапку/подвал, то в слоях это сделать уже не так просто. Боялся что, столкнувшись с трудностями, могу основательно не уложиться в сроки сдачи проекта.

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

Хочу перечислить людей, ресурсы и инструменты, которые изрядно помогли мне в этом нелегком деле.

Огромная благодарность Ивану Сагалаеву и его Учебнику. Рекомендую к обязательному прочтению. Кстати, если возникли проблемы, то на форуме Иван (ну и другие форумчане) обязательно постараются вам помочь.

Web Standards Solutions

У себя на блоге Иван похвастался покупкой – книгой "Bulletproof Web Design" Дена Седерхолма. Я пока не готов отдать кровные 26,39$ за этот кладезь знаний, но chm-версию скачал. Давно я не встречал настолько интересных книг. Но это еще не все ;) Как оказалось, ранее Ден Седерхолм выпустил книгу "Web Standards Solutions" и позволяет на своем сайте скачать главу из книги посвященную созданию двух/трехколоночных layout’ов. Рекомендую к прочтению. Этот материал окончательно ликвидировал пробелы в моих знаниях и развеял страхи перед созданием бестабличных layout’ов. Никогда не мог подумать, что читать книги на английском языке не менее интересно чем на русском ;).

Не могу не отметить блог Юрия Артюха. Море накопленного опыта и полезной информации. Помниться, когда я первый раз познакомился с этим блогом, особое внимание привлекла заметка "Памятка по CSS layouts". По прошествии нескольких дней, когда захотелось более основательно еще раз перечитать ее, выяснилось, что ссылку я в закладки не положил, в history она тоже не нашлась, а адрес и точное название блога банально не запомнил. Я рвал волосы на голове от досады, четыре дня не мог спокойно работать пока снова не нашел этот блог :].

Ну и немного об инструментах. Пожалуй, главное для верстальщика это редактор с автодополнением свойств CSS и их значений. Скорость коддинга повышает на порядок, да и нелепых ошибок позволяет избежать. Я в работе использую Quanta Plus. Превосходно организована работа в ней с HTML, PHP, CSS, XML, XSL и прочими. Более продвинутой среды для web-разработчика я не встречал еще ни под одной платформой.

HTML Validator: extension for Mozilla Firefox

Еще один полезный инструмент, без которого не представляю свою дальнейшую работу, нашел случайно. Расширение HTML Validator для Mozilla Firefox выводит в реальном времени в строке состояния браузера информацию о количестве ошибок и предупреждений на странице. При просмотре кода покажет вам ошибки и даст рекомендации для их устранения. Расширение базировано на tidy, работает мгновенно и к сторонним серверам в процессе работы не обращается. Удобство работы не идет не в какие сравнения со штатным валидатором W3C. Must have для любого верстальщика.

Комментарии

1

Спасибо за оценку моих трудов!

Теперь мне еще осталось убедить всех в малополезности валидации :-).

2

В RSS пути не странные? =))
file:///C:/files/images/posts/solutions_cover.gif

3

2hellcat: В RSS пути не странные, в RSS пути глобальные, т.е. /files/images/posts/solutions_cover.gif И то, что за корень сайта, твой агрегатор принимает твой же диск C - проблема агрегатора.
NewzCrawler (я правильно понял?) - это первый замеченный мной агрегатор, не понимающий абсолютных путей.

4

Кстати, нашел где скачать книгу (chm-версию) "Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)"
Пароль на архив: www.avaxhome.ru

5

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

Верстка по стандартам подразумевает среди прочего доступность сайта для всех. Я имею в виду не слепых/глухих/безруких со screen-reader'ами и экранными лупами, а пользователей старых версий IE/Win. Сайт в IE6/Win выглядит отлично, так же как и в мозилле, но в IE5/Win он просто не отображается, не говоря про четверку. Достаточно вместо
<link rel="stylesheet" type="text/css" href="/media/style.css" /> вставить <style type='text/css'>
@import (/meida/style.css)
</style>
и IE/5 и ниже получат читабельную версию страницы, хотя и вообще без оформления.

6

Я бы сделал дополнительный или как Вам удобнее перед логическими блоками типа
Навигация

...

чтобы при выключенных стилях было понятно где и какой блок.
А в основном стиле бы просто спрятал
.hide {
display: none;
}

Это имхо моё мнение, но получается очень удобно, когда выключаешь CSS.

7

Мда, code порезал всю идею.

В общем я предлагал добавлять перед блоком div class="hide" а внутрь название блока, типа "Навигация".

А в стилях этот DIV скрывать.

8

а кто знает как к мазилле подцепить модуль tidy_firefox_win_083.xpi ????

9

а что тут на вопросы не принято отвечать?

10

Тут не принято кричать. А если на ваш вопрос никто не ответил, значит никто на него ответа не знает.

11

А книжку мылом можно?

12

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

Буду очень благодарна за любые рекомендации. Ну а если нет возможности помочь, то не обижусь :-))
если что, пишите на semenova_elena@list.ru

13

Вы бы город указали, где офис-то...

Добавить комментарий

Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>