12. Основные компоненты dhtml
По мере развития индустрии создания Web-сайтов возникла потребность расширить возможности использовать мультимедиа как инструмента Web-дизайнера при создании Web-страниц.
Эту проблему решает динамический язык HTML (DHTML).
DHTML дает возможность создавать элементы Web-страниц (типа текста и графики) интерактивными и динамическими. При этом Web-страницы DHTML загружаются просто мгновенно.
Все последнии версии программного обеспечения Web-браузеров Microsoft и Netscape поддерживают язык DHTML.
Теперь в распоряжении Web-дизайнеров есть целая куча новых интерактивных эффектов, включая возможности организации текста и графики в виде презентаций типа телевизионных заставок.
Эффекты DHTML создаются с помощью трех технологий: HTML, каскадных таблиц стилей и сценариев.
Хотя все эти технологии существовали уже долгое время, сейчас они используются вместе и предоставляют дизайнерам возможности создания Web-страниц, которые выглядят и работают лучше, чем когда-либо прежде.
Самое главное - это научиться мыслить динамически!
HTML служит основой для эффектов DHTML.
Каскадные таблицы стилей (CSS) предоставляют возможности точной установки графических элементов на Web-страницах (см. статью "Каскадные таблицы стилей").
Кроме того, существуют эффекты изменения внешнего вида текста и графики на странице - называемые "фильтры". Фактические возможности фильтров определяются компонентами Web-браузера.
Существуют статические и динамические фильтры.
Статические фильтры просто изменяют внешний вид элемента. Динамические фильтры позволяют изменить графический элемент со скоростью, задаваемой пользователем. Работа динамических фильтров основана на сценариях.
13. Встраивание css в документ
CSS (Cascading Style Sheets - каскадные таблицы стилей) - мощное и удобное средство форматирования сайта - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью разработчик имеет полный контроль над стилем и расположением каждого элемента web-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.
Пример (который Вы выполняли ранее): допустим, что Вам необходимо создать жирный красный подчеркнутый формат текста для ФИО, встречающихся на Вашей странице. В этом случае Вы использовали следующий HTML-код:
<font color="red"><strong><u>
Иванов Иван Иванович
</u></strong></font>
Такой подход удобен, когда этот стиль применяется несколько раз, а если его нужно применить 20 раз или 100 раз, тогда возникает необходимость более общего подхода, при котором стиль описывается однократно и далее применяется по необходимости – это и есть основная идея СSS. Основная цель каскадных таблиц стилей - разделить содержимое web-страницы (написанной, например, на HTML) и форматирование (представление) документа (CSS). Т.е., в коде html-страницы находится информация, которую видит пользователь, загрузив эту страницу в свой браузер. А вот то, в каком виде он видит эту информацию на своем экране - за это "отвечает" файл каскадной таблицы стилей.
Удобство использования внешнего листа стилей заключается в том, что вся информация о форматировании ВСЕГО сайта находится в одном файле, т.е. поменяв пару-тройку строчек в файле style.css, ВЕСЬ сайт мгновенно преображается, реагируя на изменения.
Таблицы стилей состоят из набора правил(1). Каждое правило состоит из одного или нескольких селекторов(3) и блока определения(2) выделяющегося фигурными скобками.
Рисунок 1 – Структура правила CSS
Блок определения может содержать одно или несколько свойств(4) отделенных точкой с запятой (;) (после последнего свойства точка с запятой необязательна). Каждое свойство должно иметь значение(5) отделенное двоеточием (:).
Таблицы стилей могут содержать комментарии. Комментарии используются для создания пояснений. Комментарии полностью игнорируются браузером при разборе таблиц стилей. В CSS комментарии начинаются с "/*", и заканчиваются "*/", например:
/* Правило перекрасит абзацы HTML документа в зеленый цвет */ p {color:green;}.
С помощью селекторов задаются элементы на странице, которые следует оформить.
В CSS существуют следующие виды селекторов:
Селекторы тэгов - можете выбирать элементы на странице для оформления по названию тэга.
Примеры:
р {color:green;} – цвет абзаца – зеленый;
h2{color:red;} – цвет текса заголовка второго уровня красный.
Селектор id - данный вид селекторов позволяет производить более точную выборку и используется, когда необходимо выбрать только один определенный элемент на странице, с предварительно заданным идентификатором.
Идентификатор для элемента задается с помощью атрибута id (<p id="идентификатор">текст</p>).
Для того, чтобы затем оформить данный элемент необходимо обратиться к идентификатору в таблицах стилей добавив перед ним символ "#" (#идентификатор {color:red}).
Пример:
/* Оформим элемент с id="test1" */
#test1 {color:green; font-family:verdana; font-size:1.2em; }
Селектор class - данный вид селекторов позволяет выбирать для оформления не единственный элемент, а группу элементов.
С помощью атрибута class можно задать, что элемент относится к группе (<p class="имя_группы">текст</p>).
Для того, чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ "." (.имя_группы {color:red}).
Пример:
/* Свойства будут применены ко всем элементам с class="test1" */
.test1 {color:green; font-family:verdana; font-size:1.2em;}
Обратите внимание: имя группы и идентификатор может состоять только из латинских букв и не может начинаться с цифр.
Варианты включения CSS в HTML документ.
Внешнее объявление стилей используется в случаях, когда оформление задается для группы связанных HTML документов (например, для целого веб-сайта).
В этом случае все оформление выносится в один внешний файл, на который должны ссылаться все документы веб-сайта.
Внешнее объявление стилей очень удобно так как позволяет редактируя лишь один файл изменять оформление целого веб-сайта.
Для того, чтобы подключить внешний файл стилей необходимо в секции head каждой страницы веб-сайта указать ссылку на него с помощью элемента <link>:
Пример:
<head>
<link rel="stylesheet" type="text/css" href="адрес_внешнего_файла_стилей" />
</head>
Внешний файл стилей является текстовым файлом с расширением .css, чаще всего style.css.
Пример содержимого внешнего файла стилей:
h1 {color:red;}
p {margin-right:38px;}
div {float:left;}
Внутреннее объявление стилей используются в случаях, когда стиль нужно задать только для одного отдельного HTML документа.
В этом случае оформление определяется в секции head с помощью тэга style:
Пример:
<head>
<style type='text/css'>
h1 {color:red;}
p {margin-right:38px;}
div {float:left;}
</style>
</head>
Строковое объявление стилей используется в случаях, когда необходимо оформить только один определенный элемент в HTML документе.
Для того, чтобы оформить элементы этим способом Вы должны воспользоваться атрибутом style соответствующего элемента. Атрибут style может содержать любые CSS свойства.
Пример:
<p style="font-size:1.3em"> Абзац оформленный с помощью CSS.</p>
Стили CSS подключенные разным способом имеют разный приоритет: 1 -внешние стили; 2 - внутренние стили и 3 - строковые стили.
Определение цвета текста
С помощью CSS свойства color Вы можете изменять цвет текста HTML элементов.
Цвет может быть задан следующими способами:
С помощью названия цвета (например 'red' задаст красный цвет);
С помощью RGB значения (например 'rgb(255,255,255)' задаст белый цвет);
С помощью шестнадцатеричного значения (например '#00ff00' задаст зеленый цвет).
Синтаксис: rgb(красный,зеленый,голубой).
Пример: rgb(255,255,0) задает красный и зеленый цвета, которые при смешивании дают желтый цвет.
Все три команды выполняют одну задачу: задают зеленый цвет абзаца.
p {color:green;}
p {color:rgb(0,255,0);}
p {color:#00ff00;}
Выравнивание текста.
С помощью CSS свойства text-align Вы можете выровнять текст элемента по горизонтали.
Текст может быть выровнен: по центру (значение center); по левому краю (left); по правому краю (right); по ширине (justify).
Пример:
p.ta1 {text-align:center;}
p.ta2 {text-align:left;}
p.ta3 {text-align:right;}
p.ta4 {text-align:justify;}
Свойство text-decoration.
С помощью CSS свойства text-decoration Вы можете сделать текст HTML элемента:
подчеркнутым (значение underline); перечеркнутым (line-through) или отобразить над текстом элемента линию (overline).
Пример:
p.td1 {text-decoration:underline;}
p.td2 {text-decoration:line-through;}
p.td3 {text-decoration:overline;}
Отступ между словами и буквами в тексте.
С помощью CSS свойства letter-spacing Вы можете увеличивать или уменьшать отступ между буквами в тексте HTML элементов.
Пример
p.ls1 {letter-spacing:10px;}
С помощью свойства word-spacing Вы можете увеличивать или уменьшать отступ между словами в тексте HTML элементов.
Величина отступа между словами в данном элементе равна 15 пикс.
p.ws1 {word-spacing:15px;}
Остальные CSS свойства оформления текста можно изучить в справочнике, например, http://on-line-teaching.com/css/index.html
14. Форматирование текста(http://www.site-do.ru/html/html3.php)
тег font и его параметры
Теги <font></font> указывают параметры шрифта текста:
face - название шрифта. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку.
size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.
color - цвет текста (по умолчанию - черный).
Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета.
С именными цветами (их 156) все просто, смотрим в соответствующую таблицу, выбираем понравившийся цвет и пишем его имя в значение параметра (например, color="blue").
Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа "#". Не будем вдаваться в подробности, как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице Цвета для web.
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
Это простой текст.<br>
<font face="Verdana" size=5 color="red">
Этот текст красный, размера 5.
</font><br>
<font face="Arial" size=2 color="blue">
Этот текст синий, размера 2.
</font>
</body>
</html>