В сентябре прошлого года я показал, как с помощью JavaScript можно представить XHTML документ в виде последовательности слайдов. По прошествии некоторого времени эта идея получила дальнейшее развитие. Предлагаю новую версию XHTML+CSS+DOM слайд-шоу.
Еще проще, еще доступнее. С самого начала, для самых начинающих. Что пишется в таблице стилей, как это выглядит, базовый синтаксис, простейшие правила.
Существует несколько различных способов создания динамических выпадающих списков для заполнения различных форм, когда в зависимости от выбранного значения в одном, нужно изменить содержимое другого. Например, на странице есть список стран, при выборе одной из них, во втором списке с городами остаются только те, которые есть в выбранной стране.
Небольшое исследование поведения элемента BODY в различных браузерах. Отступы от границ окна (margin, padding). Высота BODY и ее изменение в зависимости от высоты контента в Internet Explorer 6, Firefox 1.5, Opera 8.
Браузеры Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) поддерживают URL-значения для свойства cursor (CSS2 cursor property).
Это дает возможность использовать в качестве указателя мышки любое изображение, любой графический файл, который может показать Gecko. Как это выглядит? Насколько кроссбраузерно?
Чаще всего форму заключают в таблицу. Получается громоздкая и не достаточно гибкая HTML-конструкция. Однако, довольно легко сделать красивую форму без таблиц, используя CSS.
Всего одна простая HTML-разметка и много вариантов ее отображения на веб-странице. Просто добавь CSS!
С помощью DOM можно без особого труда перемещать целые фрагменты XHTML-документа и, таким образом, изменять порядок отображения элементов в окне браузера не зависимо от порядка загрузки веб-страницы.
В CSS верстке есть пара способов прижать footer к низу окна браузера, если контента на странице не очень много.
Все на одной странице: правила написания каскадных таблиц стилей (CSS); каскадность CSS; единицы измерения; свойства текста; свойства цвета и фона; свойства блока; списки; позиционирование; псевдоклассы и псевдоэлементы…
Кроссбраузерный on-line подбор цвета (ColorPicker). В результате получаем шестнадцатиричный RGB код выбранного цвета. Использованы: XHTML1.1+JavaScript+CSS.
Рассмотрим пример преобразования обычного правильно построенного XHTML документа в презентацию, состоящую из отдельных слайдов.
Фотогалерея, в которой увеличенные изображения можно выбирать без перезагрузки всей html-страницы. В примере используется Объектная модель документа(DOM), минимум XHTML-кода, немного CSS и JavaScript. Работает в Firefox1.02+, Opera7+, Internet Explorer5+, в других браузерах не проверял.
Как известно, IE6(и более ранние версии) не очень дружит с современными стандартами. О многих свойствах CSS2 этот браузер и не догадывается.
Маленький пример, как добавить Flash-ролик(.swf) на страницу, не покидая рамки стандартов W3C. Этот код успешно проходит валидацию и соответствует современным веб-стандартам. Его можно спокойно использовать на страницах XHTML1.0 Strict или XHTML1.1.