Интернет-портал MegaWEB содержит много ресурсов для веб-мастеров, интернет-разработчиков, веб-дизайнеров и seo-оптимизаторов. Это видеоуроки, книги и справочники в формате ebook: PDF-CHM-DJVU, а также программы и утилиты для того, чтобы сделать сайт или раскрутить сайт в сети Интернет.
Книга «Мастерская CSS: профессиональное применение Web-стандартов»
Версия для печати и PDA
Книга «Мастерская CSS: профессиональное применение Web-стандартов» посвящена современным технологиям веб-дизайна на основе каскадных таблиц стилей CSS. Рассматриваются такие темы, как верстка на основе изменяемой и фиксированной ширины контейнеров; типы селекторов; абсолютное и относительное позиционирование; использование плавающих элементов; стилизация гиперссылок, форм, списков и панелей навигации; позиционирование фоновых изображений. Обсуждаются вопросы применения фильтров и трюков для нивелирования на страницах HTML ошибок веб-браузеров. Много внимания уделяется концепциям чистоты разметки, ее валидности и надежности кода. Авторы хотят донести до читателя мысль, что эстетически привлекательным должен быть не только внешний вид и дизайн веб-страницы, но и ее код. Это значительно облегчает поддержку и модификацию разметки, как самим разработчиком, так и другими дизайнерами.
Структура книги «Мастерская CSS: профессиональное применение Web-стандартов»
Книга плавно вводит читателя в мир CSS. Первые две главы посвящены основным концепциям и правильным методикам использования таблиц CSS. Вы ознакомитесь со способами структурирования и комментирования кода, позиционирования модели, перемещения элементов, очистки страницы. Возможно, к настоящему моменту со многими из этих вопросов вы уже знакомы, однако наверняка обнаружите, что пропустили нечто важное или не все понимали достаточно полно.
Закладка фундамента
Структурирование кода: смысловая разметка; типы документов, переключение типов документа и режимов браузера; проверка на действительность;
Присвоение стилей: обычные селекторы, универсальный селектор, дополнительные селекторы, каскадирование и специфичность, наследование;
Планирование, организация и поддержка таблиц стилей: применение стилей к документу; комментирование кода; руководство по стилям; организация таблиц стилей, облегчающая их поддержку;
Модель визуального форматирования
Модель контейнеров: браузер IE/Win и модель контейнеров, слияние внешних полосок;
Позиционирование: модель визуального форматирования, относительное позиционирование, абсолютное позиционирование, плавающие элементы;
Таким образом, первые две главы для начинающих являются популярным учебником по CSS, а для профессионалов – напоминанием об известных вещах и заполнением пробелов в знаниях.
Следующие пять глав посвящены базовым операциям на основе CSS, таким, как манипулирование изображениями, гиперссылками и списками, вывод форм и табличных данных, верстка страниц. Каждая глава начинается с простых примеров, а затем плавно переходит к более сложным. В этих пяти главах вы найдете методики создания рамок со скругленными углами, изображений с полупрозрачными нависающими тенями, панелей навигации на основе вкладок и элементов страницы, реагирующих на перемещение указателя мыши.
Фоновые изображения и замена изображений
Основы фоновых изображений;
Контейнеры со скругленными углами: контейнеры со скругленными углами и фиксированной шириной, углы типа "вершина холма";
Нависающие тени: простой способ создания тени, метод Clagnut, сглаживание торца тени, нависающие тени типа "луковица";
Замена изображений: метод FIR, метод Phark, метод Гилдера-Левина, методы IFR и sIFR;
Стилизация гиперссылок
Простая стилизация гиперссылок;
Невинные забавы с гиперссылками: декоративные линии подчеркивания;
Стилевое обозначение гиперссылок разных типов: отметка загружаемых документов и средств RSS;
Создание кнопок и изменение внешнего вида элементов: простой способ изменения внешнего вида кнопки, изменение изображения, устранение мерцания методом Pixy;
Стили посещенных ссылок;
Всплывающие подсказки на основе CSS;
Стилизация списков и создание панелей навигации
Простая стилизация списков;
Создание вертикальной навигационной панели;
Подсветка текущей страницы на панели навигации;
Создание горизонтальной навигационной панели;
Панель навигации с вкладками типа "раздвижная дверь";
Карты изображений на основе CSS: карты изображений в стиле Flickr;
Изменение стиля элемента при наведении указателя на отдаленный элемент;
Краткое замечание о списках определений;
Стилизация форм и табличных данных
Стилизация табличных данных: элементы таблицы HTML, разметка таблицы, стилизация таблицы, добавление визуального стиля, дополнительные стилевые элементы;
Простая компоновка формы: полезные элементы формы, базовая компоновка формы, другие элементы, украшения;
Компоновка сложной формы: доступность средств ввода данных, многоколонная компоновка флажков, реакция формы на действия посетителя;
Верстка страницы
Центрирование текста: использование автоматических внешних полосок, использование позиционирования и отрицательных внешних полосок;
Верстка на основе плавающих элементов: двухколонная верстка, трехколонная верстка;
Замороженные, жидкие и эластичные макеты: жидкие макеты, эластичные макеты, гибрид эластичного и жидкого макетов, жидкие и эластичные изображения;
Ложные колонки;
Ошибки в браузерах – постоянная головная боль разработчиков CSS. Поэтому все примеры книги посвящены методикам создания кода, работоспособного в разных веб-браузерах. Последние две главы книги полностью посвящены кодированию, фильтрации, ошибкам браузеров и устранению неполадок. Читая этот материал, вы узнаете о наиболее распространенных фильтрах, о том, когда их следует использовать, а когда не следует. Вы узнаете о способах выявления и устранения неполадок до того, как они вызовут серьезные проблемы. Вы даже узнаете о том, что именно порождает редкие ошибки в наиболее популярном интернет обозревателе Microsoft Internet Explorer.
Трюки и фильтры
Введение в трюки и фильтры: предупреждение о трюках и фильтрах, использование трюков;
Фильтрация отдельных таблиц стилей: условные комментарии браузеров IE, фильтры Селика;
Фильтрация отдельных правил и объявлений: трюк на основе дочернего селектора, трюк на основе селектора атрибутов; фильтр HTML со звездочкой; трюк с закомментированной обратной косой чертой в IE для Mac, трюк с обратной косой чертой в имени свойства; трюк с моделью контейнеров Тантека, модифицированный трюк с упрощенной моделью контейнеров; трюки с ключевым словом !important и символом подчеркивания, трюк Оуэна;
Поиск и устранение ошибок
Поиск ошибок в таблицах CSS: наиболее распространенные проблемы в коде CSS;
Основы поиска ошибок: локализация проблемы; минимальный тестирующий код; устраняйте ошибку, а не симптомы; обращайтесь за помощью;
Что означает "иметь определение позиции": что такое "определение позиции" и как оно влияет на страницу;
Типичные ошибки браузеров: ошибка с двойной внешней полоской плавающих элементов, ошибка с трехпиксельным скачком текста; ошибка дублирования символов и исчезновения текста в IE 6; абсолютное позиционирование в контейнере, позиционированном относительно;
В последних двух приложениях два лучших дизайнера современности, Саймон и Камерон, представили все рассмотренные в книге методики в двух фантастически увлекательных проектах. Ознакомившись с ними, вы узнаете не только о том, как эти методики работают, но и о том, как они применяются в реальных веб-проектах.
Практикум 1: новости цифрового искусства
Управление областью содержимого с помощью нисходящих селекторов: код XHTML, трехколонная верстка, двухколонная верстка, одноколонная верстка, удаление ненужных колонок;
Отметка текущей страницы на основе класса элемента body;
Изменяемые контейнеры для колонок;
Прямые и скругленные углы: прямые углы, гибкий контейнер;
Прозрачные пользовательские углы и рамки: изображения, код CSS;
Объединение классов;
Классы изображений: изображения по умолчанию, изображения, принадлежащие классам, большие изображения;
Управление гиперссылками: гиперссылки в боковой полосе, отметка посещенных гиперссылок, отметка внешних гиперссылок;
Нависающие тени на основе плавающих элементов: отбрасывание тени, использование плавающих изображений;
Практикум 2: фешенебельные курорты Тосканы
Жидкая верстка: тело страницы и общий контейнер, титул, содержимое страницы и боковая полоса, нижний колонтитул, устранение про6лем жидкой верстки;
Добавление элементов с помощью абсолютного позиционирования: свойства размещения, последовательность вывода на экран;
Использование фоновых изображений: разделение титула страницы на три части, повышение надежности фона;
Замена изображений: замена изображения логотипа, замена первой буквы логотипа;
Жидкие изображения: код жидкого изображения;
Вы можете либо прочитать книгу «Мастерская CSS: профессиональное применение Web-стандартов» от начала до конца, не выпуская из рук, либо положить рядом с клавиатурой и на практике проверить наиболее привлекательные для вас трюки, советы и методики. Это равноправные варианты, выбор за вами.
