Создание CSS-меню, CSS-макеты, CSS-эффекты, CSS-методы
 |
 |
Добавление Flash на Web-страницу… |
Ролики Flash при экспорте авторскими инструментальными средствами Flash оформляются с помощью комбинации элементов object и embed, которые имеют параметры и атрибуты, управляющие выводом на экран и воспроизведением.
Применяется сразу два этих элемента, чтобы можно было, несмотря на несовместимость различных браузеров, все же передать плееру как можно больше значений атрибутов для правильной его настройки.
|
|
Внедрение ролика Windows Media на Web-страницу… |
Ролики Windows Media также можно внедрять на Web-страницу. Минимальная разметка для этого достаточно простая, однако она быстро усложняется, если использовать дополнительные возможности скриптов, пользовательские кнопки и тому подобное. В этой статье я опишу только основные возможности.
|
|
Таблицы для верстки - это не обязательно зло… |
Вы, конечно, уже слышали, что верстка на основе таблиц была заменена стилями CSS для позиционирования элементов страницы.
Однако в наш переходный период, когда разработчики браузеров совершенствуют поддержку CSS, некоторые авторы, в том числе и я, по-прежнему предпочитают использовать таблицы для формирования базового каркаса страницы.
Таблицы для верстки использовать можно, но лучше придерживаться современного веб дизайна и имеющихся тенденций по соблюдению стандартов и обеспечению доступности.
Таблицы для верстки - это не обязательно зло, и не обязательно недопустимая практика, если только ими правильно пользоваться. В этой статье я покажу, как применять таблицы для верстки с минимальным ущербом.
|
|
Создание эффекта mouseover при помощи CSS… |
Хотите создать эффект mouseover без использования JavaScript? Что ж, это возможно. Эксперт по CSS Эрик Мейер (Eric Meyer) показывает, как это сделать, на своем сайте CSS/Edge.
Прием очень простой, он основан на использовании свойства display, которое скрывает текст, а затем вызывает его появление в определенном месте при наведении указателя мыши.
|
|
Свободное размещение в CSS… |
Если вам когда-нибудь доводилось выравнивать иллюстрации по правому или левому краю так, чтобы текст «обтекал» их, вы понимаете принцип, положенный в основу свободного размещения в CSS.
По-настоящему именно ради этой возможности и создано свойство float. Важнейшее различие между выравниванием в HTML и CSS состоит в том, что в CSS можно свободно расположить любой мыслимый элемент (абзац, список, элемент div и т. д.), а не только изображение.
Хочу обратить Ваше внимание на то, что свободное размещение - это не схема выбора положения, а уникальная функция с интересными проявлениями, о которых надлежит знать и которые я опишу ниже в этой статье.
Свободное размещение полезно не только, чтобы иногда «прижимать» к краю рисунки. На деле это один из основных инструментов современного Web-дизайна, основанного на технологии CSS.
Свободным размещением элементов пользуются для построения документов с несколькими колонками, панелей навигации из ненумерованных списков, выравнивания, напоминающего таблицу, но не являющуюся таковой, и т. д.
|
|
Навигационные CSS-панели на основе списков… |
Горизонтальные навигационные панели составляют основу дизайна Web-интерфейса. Традиционно они создаются из нескольких находящихся рядом текстовых ссылок или нескольких изображений. В любом случае в исходном коде документа их разметка не слишком семантическая.
Если подумать, то имеет смысл разметить навигационные опции в исходном коде в форме списка. Применяя CSS, можно использовать семантическую разметку и при этом визуально отобразить опции в виде знакомой горизонтальной линейки.
|
|
CSS-стили для шрифтов и текста… |
Немалая часть Web-дизайна связана со шрифтами - абзацы, заголовки, списки, меню и формы. В результате, управление шрифтами и форматированием текста, несомненно, является наиболее популярной областью применения каскадных таблиц стилей, и именно эти свойства чрезвычайно важны, если вы хотите создать профессионально выглядящий сайт.
Шрифт, больше чем любой другой фактор, свидетельствует о качестве сайта. Графика является лишь сахарной глазурью, покрывающей торт, хороший дизайн начинается с типографики.
Если, прочитав название статьи, вы задали себе вопрос: «А разве шрифт и текст не одно и то же?», отвечаю - нет.
|
|
CSS-эффекты наведения указателя мыши… |
Под эффектом наведения (rollover) имеется в виду визуальный эффект, когда элемент страницы меняется при наведении на него курсора мыши. Оказалось, что это эффективный метод интерфейса для обозначения того, что кнопка или ссылка являются интерактивными и на них можно нажимать.
Ранее для создания подобных эффектов было необходимо использовать JavaScript, но того же самого можно добиться и при помощи одного CSS, используя селектор псевдокласса :hover.
Нужно отметить, что браузер Internet Explorer 6 (и ниже) не поддерживает селектор :hover для элементов, отличных от гиперссылки, поэтому на этом уроке мы сконцентрируемся на эффектах наведения для текстовых и графических ссылок.
|
|
CSS-методы центрирования web-страницы… |
В качестве стратегического решения по контролю ширины страницы с учетом разных разрешений мониторов многие Web-дизайнеры используют страницы фиксированной ширины, которые затем центрируются по ширине окна браузера.
На этот уроке я Вас познакомлю с тремя CSS-метода центрирования страницы фиксированной ширины: официальный CSS-метод, альтернативный способ, работающий в Internet Explorer и эффективный «путь обхода».
|
|
Прямоугольники с закругленными углами на основе CSS… |
Закругленные углы весьма модны в современном Web-дизайне. Из-за того, что Web-дизайн в основе своей - прямоугольный, закругленные углы с помощью графики, которая имеется в составе структурной разметки получить нельзя.
Однако до появления CSS единственным способом создания расширяемого прямоугольника с закругленными углами являлось создание таблицы с девятью ячейками.
Тот же эффект можно получить при помощи CSS-стилей и логической разметки (и конечно, без всяких таблиц).
Как и для большинства других проблем Web-дизайна, здесь существует много решений, самые простые из которых я представляю в этой статье.
|
|
CSS-методы замены текста изображениями… |
Web-дизайнеры, которым не нравились ограниченные возможности оформления в Web, более десятилетия заменяли текст внутристрочными изображениями. Проблема замены реального текста, например заголовка H1 элементом IMG, состоит в том, что текст полностью удаляется из исходного документа.
Указание альтернативного текста повышает доступность, но не устраняет тот вред, который наносится семантической структуре документа. И кроме того, с точки зрения обслуживания сайта лучше управлять стилевыми аспектами из таблицы стилей и убрать из исходного кода все декоративные элементы.
Нужно отметить, что на данный момент идеального решения по замене текста изображением при помощи CSS не существует, есть только разные подходы и разные компромиссы.
В этой статье я вас познакомлю с наиболее популярными CSS-методами замены текста изображениями.
|
|
Раскрывающиеся CSS-меню… |
На предыдущем уроке мы создали горизонтальные меню навигации на базе списков. Теперь возведем наше горизонтальное меню на следующий уровень - добавим раскрывающиеся меню.
Раскрывающиеся меню на базе CSS не будут работать в браузере Internet Explorer для Mac. Тем не менее, я покажу, как использовать CSS и создать работающее меню и для этого браузера.
На этом уроке мы предположим, что каждому пункту нашего горизонтального меню соответствует определенная страница. Нам просто потребуется указать URL вместо символов # в теге href каждой ссылки.
|
|
Основные типы CSS-макетов… |
Комбинация технологий, с которыми я хочу Вас познакомить в этой статье, формирует основу, необходимую для создания великолепных CSS-макетов, а не макетов на основе таблиц. Предлагаю Вам поработать с основными типами CSS-макетов, обычно используемых для получения ряда дизайнов.
|
|
Создаем CSS-меню… |
При работе над созданием раскрывающихся меню на базе списка я хочу просто взять список с вложенными списками для раскрытия и заставить это работать без добавления дополнительного кода - лишь простой XHTML-список и стили CSS. Но как же создать раскрывающееся меню из свободных от лишних идентификаторов и классов списков?
Все, что для этого требуется, - контекст, контейнер <div> с идентификатором, чтобы нужные CSS стили применялись к нужному списку. Фактически, создать такие меню с помощью CSS очень легко. Первым шагом на пути к созданию раскрывающихся меню станет создание горизонтального меню с основными пунктами.
|
|
Создание компонентов интерфейса в XHTML… |
В этой статье я покажу, как создавать XHTML-код для нескольких элементов интерфейса и применять к ним CSS-стили. По ходу дела мы создадим библиотеку CSS-компонентов, которую вы сможете использовать как точку отправки при создании собственных страниц…
|
|
Особенности структуры текста на Web-сайте… |
В данной статье я рассматриваю несколько факторов, которые необходимо учитывать при написании текста, отображаемого на экране персонального компьютера и размещаемого на Web-сайте…
|
|
Как сделать сайт максимально удобным? |
Для того чтобы сайт был максимально удобным, необходимо найти баланс между рекомендациями по простоте использования, практическим опытом и результатами тестирований…
|
|
Как более эффективно писать для Сети? |
В данной статье пойдет речь о том, как более эффективно писать для Сети, а также что требуется для принятия стратегических решений относительно долгосрочного управления контентом…
|
|
