Дополнительные возможности HTML и CSS. XML-технологии и их применение

Дизайн стилей с учетом возможностей браузеров var apVersion = "" + navigator.appVersion; var apName = "" + navigator.appName; var arrStylesheets = document.getElementsByTagName ('link'); if (apName == 'Netscape') { arrStylesheets[0].disabled = false; arrStylesheets[1].disabled = true; }... Идем на курс "JavaScript и DHTML" Дополнительные возможности 2

Размещение аудио- и видеоматериалов на web-странице Embed align hidden hspace pluginpage src type vspace width Object align classid code codebase codetype data height hspace type vspace width Дополнительные возможности 3

Embed <embed src="mouse.swf" width="400" height="300" type="application/x-shockwave-flash" pluginspage=" getflashplayer"> Дополнительные возможности 4

Object Дополнительные возможности 5

Object и Embed <embed src="mouse.swf" width="400" height="300« type="application/x-shockwave-flash" pluginspage=" Дополнительные возможности 6

Нестандартные элементы HTML BGSOUND balance loop src volume MARQUEE behavior bgcolor direction height hspace loop scrollamount scrolldelay truespeed vspace width LAYER/ILAYER id background bgcolor width height clip left top visibility z-index Дополнительные возможности 7

Нестандартные возможности CSS: фильтры IE4 Alpha Blur DropShadow FlipH FlipV Glow Invert Wave Xray IE5 DXImageTransform.Microsoft.Alpha DXImageTransform.Microsoft.BasicImage DXImageTransform.Microsoft.Blur DXImageTransform.Microsoft.Chroma DXImageTransform.Microsoft.Compositor DXImageTransform.Microsoft.Emboss DXImageTransform.Microsoft.Engrave DXImageTransform.Microsoft.Gradient DXImageTransform.Microsoft.Light DXImageTransform.Microsoft.Matrix Дополнительные возможности 8

Фильтры (обзорно) <IMG SRC="sample.jpg" style="filter: Blur(Add=1, Direction=135, Strength=10) style="filter: Alpha(Opacity=100, FinishOpacity=0, Style=1)" style="filter: DropShadow(Color=#999999, OffX=3, OffY=3, Positive=1)" style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=2, mirror=1) progid:DXImageTransform.Microsoft.Alpha(opacity=50 ) progid:DXImageTransform.Microsoft.Blur(strength=10 ); position: relative"> Дополнительные возможности 9

Фильтры: примеры Дополнительные возможности 10

Свойства полосы прокрутки scrollbar-3dlight-color:#CCFF60 scrollbar-arrow-color scrollbar-base-color scrollbar-darkshadow-color scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-track-color Дополнительные возможности 11

Лабораторная работа Использование фильтров Откройте файл filters.html 1 1 Примените к первому изображению фильтр Alpha, ко второму изображению – Blur, к тексту - DropShadow Примените к первому изображению фильтр Alpha, ко второму изображению – Blur, к тексту - DropShadow 2 2 Дополнительные возможности 12

XML- EXtensible Markup Language Расширяемый язык разметки <photo url="../images/ettlingen01.jpg" description="Ettlingen, Germany" /> <photo url="../images/ettlingen02.jpg" description="Ettlingen. Городская улица" /> <photo url="../images/ettlingen03.jpg" description="Ettlingen. Городское кафе" /> Дополнительные возможности 13

XML и CSS, XML и XSL Книги Основы HTML и CSS XSL - расширяемый язык стилевой разметки Дополнительные возможности 14

XHTML- EXtensible HyperText Markup Language Расширяемый язык разметки гипертекста Правила XHTML: Все теги и параметры должны быть набраны в нижнем регистре (строчными символами). Значения любых параметров необходимо заключать в кавычки. Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег. Должна соблюдаться правильная вложенность тегов. Нельзя использовать сокращенные атрибуты тегов. Вместо параметра name необходимо указывать атрибут id. Следует определять DTD (document type definition, описание типа документа) с помощью тега. Дополнительные возможности 15

XHTML: пример Дополнительные возможности 16

От HTML к XHTML Атрибуты checked="checked" compact="compact" disabled="disabled" ismap="ismap" multiple="multiple" nohref="nohref" noresize="noresize" noshade="noshade" nowrap="nowrap" readonly="readonly" selected="selected" Теги Дополнительные возможности 17

Элементы META Дополнительные возможности 18

Описание метаинформации сайта с помощью элемента META content - значение переменной name - имя переменной http-equiv - управление заголовком url - адрес документа Дополнительные возможности 19

META: примеры Дополнительные возможности 20

Роботы Типы роботов: Индексирующие Проверяющие правильность HTML Проверяющие правильность ссылок Мониторинг "нового" на сайте Зеркалирующие Дополнительные возможности 21

Управление роботами через META теги Настройки: Индексирование index(разрешено) noindex(запрещено) Следование по ссылкам follow(разрешено) nofollow(запрещено) Запрещение или разрешение всех настроек: all = index,follow none = noindex,nofollow Дополнительные возможности 22

Файл robots.txt (описание и структура) Должен лежать в корне сервера! Первая строка в блоке задает название робота, которому предназначен этот блок: User-agent: [... ] Строки описывающие запрещенные каталоги или файлы: Disallow: Дополнительные возможности 23

Файл robots.txt (примеры) #пример файла robots.txt User-agent: WebBot Disallow: /articles User-agent: * Disallow: /statistic Disallow: /logs Disallow: /forum/forum.html Disallow: /my* #Закрываем весь сервер для всех роботов User-agent: * Disallow: / Дополнительные возможности 24

Что закрывать для доступа? Каталог или подкаталоги /cgi- bin/, в которых имеются скрипты сильно замедляющие работу сервера. Приватные папки пользователей, например /private Папки с временными файлами /tmp, папки с файлами статистики, отчетов и логов. Папки с постоянно генерируемыми файлами форумов или чатов. Любые другие неугодные папки и файлы Дополнительные возможности 25

Web-маркетинг (продвижение Web-проекта в глобальной сети Internet) Современные XML технологии Что дальше? Расширенные возможности HTML(XHTML) и CSS JavaScript и DHTML Web-дизайн Основы PHP программирования Web-мастеринг. Основы серверного программирования Дополнительные возможности 26

Клуб выпускников forum.specialist.ru Дополнительные возможности 27

Полезные ссылки DOT HTML/CSS Справочник веб разработчика HTML Book XPoint Relib ru_webdev CIT Forum webmascon CSS play(ground) Дополнительные возможности 28

Итоги При создании дизайна сайта разработчику необходимо учитывать возможности браузеров HTML и CSS имеют элементы и свойства, которые поддерживаются только определенными браузерами В XML (как и в HTML) используются элементы, но с произвольными названиями Формат XML удобен для представления структурированной информации С помощью XSL - расширяемого языка стилевой разметки - можно не только создать визуальное представление, но и преобразовать XML в любой другой язык Для хорошего разработчика необходимо знание клиентских (например, javascript) и серверных (например, php) скриптовых языков и технологий Дополнительные возможности 29