«Мастерская CSS.
Профессиональное применение Web-стандартов»

Авторы: Энди Бадд, Камерон Молл, Саймон Коллизон .
Авторы книги показывают, что «эстетически привлекательным должен быть не только внешний вид Web-страницы, но и ее код, что значительно облегчает поддержку и модификацию страницы как самим разработчиком, так и другими дизайнерами».

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

Отзыв. Методично собираю библиотеку книг по CSS, купила и эту. Поначалу насторожила толщина -- она явно уступает остальным. Но! Она легко заменила в работе все остальные. Это самый свежий взгляд на многие проблемы вёрстки: здесь сведены воедино "глюки" различных браузеров и способы решения. Закрепление теории, оригинальные идеи и авторское видение процесса создания сайта.
Рекомендую. Гриценко Татьяна (отзыв покупателя книги на ozon.ru).

Сколько стоит книга? — 214 руб.
Заказать можно на ozon.ru.

Создание сайтов

16.07.08. Создание сайта «Курсы английского языка в Уфе».

01.07.08. Создание сайта «Рудольф Нуреев: биография, фотографии, воспоминания».

Бесплатные видеоуроки

Редизайн сайта
на основе старой HTML-разметки

Выпуск #4 от 21 апреля 2008 г.

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

Так, побывав однажды на сайте http://s13.by/, мне почему-то пришла в голову идея привести сайт (созданию которого был посвящен первый выпуск моих уроков) именно к этому оформлению.

Мне удалось это сделать — смотрите скриншот (283 KB). И если быть откровенной, то мой вариант мне нравится больше. На мой взгляд, flash-баннер прекрасно подходит под оформление сайта (впрочем, этот баннер подходит и к первому дизайну) и лучше смотрится под заголовками.

Другими словами, я сделала редизайн сайта, изменив визуально первоначальный вариант, и записала весь процесс работы на видео.

Получилось два урока. Я уверена, они будут весьма полезны для вас.

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

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

Первый урок посвящен дополнению HTML-кода и оформлению новых блоков. Кроме блоков для flash-баннера и меню (из трех ссылок: "Домой", "Об авторе", "Реклама") я добавила блок для контекстной рекламы Google Adsense. Посмотреть результат.

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

В какой последовательности мы будем добавлять блоки? Допустим, нам нужно, чтобы flash-баннер находился визуально наверху страницы. Следует ли нам при этом размещать код баннера в начале HTML-разметки и не будет ли это нарушать исходную структуру документа?

На уроке я добавляю рекламный баннер интернет-магазина ozon.ru. Приведу код, который предлагается использовать партнерам магазина:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="ozon_bbc_468x60" width="468" height="60">
<param name="movie" value="http://www.ozon.ru/graphics/img_ass/ozon_bbc_468x60.swf?target=_blank&link=http://www.ozon.ru/?partner=mysite&from=prt_bbbc2468">
<param name="quality" value="high">
<param name="allowScriptAccess" value="sameDomain">
<param name="bgcolor" value="#FFFFFF">
<embed name="parthners_genie_468x60" src="http://www.ozon.ru/graphics/img_ass/ozon_bbc_468x60.swf?target=_blank&link=http://www.ozon.ru/?partner=mysite&from=prt_bbbc2468" quality="high" bgcolor="#FFFFFF" allowScriptAccess="sameDomain" width="468" height="60" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed></object>

Подобный код лучше вставлять в конце HTML-разметки, но с помощью CSS flash-объект можно визуально разместить в любом месте страницы. Таким образом, наш текст на сайте не будет прерываться каким-то бессмысленным и тяжелым кодом, и это хорошо с точки зрения поисковых систем, которые отдают предпочтение контенту. На уроке я показываю, каким образом это можно сделать.

Также пришлось добавить три блока в контейнере со ссылками, чтобы три списка ("Рубрики", "Архивы", "Партнеры") получили свое оформление. Эти списки и раньше напрашивались быть включенными в специальные блоки.

На втором уроке работа идет только с таблицей стилей. Мы делаем изменения там, где нам нужно. И это легче, чем оформлять сайт с нуля.

В итоге получилась довольно простая для понимания таблица стилей, если сравнивать ее с таблицей стилей сайта, который меня вдохновил (HTML-структура сайта тоже другая). Этот пример показывает, что один и тот же дизайн можно создавать разными способами.

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

Длительность двух видеоуроков, которые вошли в этот выпуск, —  79 мин. 54 сек..

  1. Длительность первого урока — 27 мин.35 сек. Размеры ролика — 768 х 556.
  2. Длительность второго урока — 52 мин. 19 сек. Размеры ролика — 1024 х 768.

Внимание! Начиная с четвертого выпуска уроки будут записываться в формате wmv. Просматривать можно в проигрывателях Windows Media, Media Player Classic. Не забывайте о полноэкранном режиме.
Как извлечь файл из архива: в программе WinRAR выбрать "Операции" > "Мастер" > указать папку для извлекаемого файла.
Предыдущие уроки были записаны в формате .swf, для просмотра которых требуется Flash Player.

Качество видеозаписи

Я подготовила два варианта для второго урока.

Хорошее качество —- урок упакован в rar архив redesign_site.rar (107 мб).

Среднее качество (вполне смотрибельный вариант; все, что происходит в среде Dreamweaver, видно отчетливо — смотрите скриншот /229 КБ/; хромает отображение сайтов в браузере — картинки выглядят размытыми) — урок упакован в rar архив videolessons_4_2.rar (29.47 мб).

Качество видеозаписи первого урока — среднее (смотрите скриншот /229 КБ/). Урок упакован в rar архив videolessons_4_1.rar (13.37 мб)

Как скачать?

Первый урок можно скачать бесплатно по ссылке http://www.sharemania.ru/0119985.

Второй урок могут скачать бесплатно только покупатели моего видеокурса. Стоимость урока для подписчиков до 1 мая 2008 г. — 2$ (50 руб). Все желающие могут запросить ссылки на урок с помощью формы обратной связи или письмом по адресу regina.shaybakova@gmail.com, указав в теме «Редизайн сайта».

Ссылки на файлы и пароль отправляются в электронном письме после оплаты урока.