Оживи свою страничку
Спецвыпуск хакер, номер #002, стр. 002-014-3
font-style стиль шрифта нормальный (normal) или наклонный (italic)
font-weight число от 100 до 900 жирность шрифта
Описание всех свойств можно найти в Инете.
Описание стилей можно вынести в отдельный файл с расширением "CSS". Это полезно, если ты захочешь использовать одинаковое оформление на всем своем сайте или на нескольких страничках. Для этого запиши все стили в отдельный файл. Он будет выглядеть примерно так:
.vasia {
color: 00FF00;
margin-top: 10px;
font-size: 250px;
font-family: Courier;
font-weight: 900 ;
}
А в HTML документ вставляется следующий текст:
<style type="text/css">
@import url (http://путь.к/файлу.css);
</style>
или
<LINK href=" http://путь.к/файлу.css " rel=stylesheet type=text/css>
Все это очень хорошо, скажешь ты, но мне в лом учить и запоминать все характеристики, параметры и еще какие-то теги! И будешь прав. Специально для тебя такие софтверные монстры, как Microsoft, Adobe и я, ;) выпустили продукты, облегчающие создание DynamicHTML документов с CSS. У мелкомягких есть целых два продукта FrontPage98 и 2000 - это огромные программы монстры, пихающие кучу лишних тегов в текст твоей странички, но обладающие простым (особенно во FP2000) интерфейсом и большим набором готовых тем. У Adobe есть чуть более замечательный продукт:
Adobe GoLive. Он сложнее в освоении, чем FrontPage, однако более пригоден для создания каскадных таблиц стилей. И, как я уже сказал, есть еще один продукт: Visual CSS, автором которого являюсь я. ;) Этот продукт бесплатен и полностью на русском языке, в отличие от прочих. Весит это чудо 40Кб (в архиве), и найти его можно по адресу http://www.anynews.agava.ru в разделе "софт".
Есть контакт
Ну вот, мы с тобой научились форматировать текст по своему вкусу. Теперь пришло время заставить его двигаться. Для начала разберемся с событиями. Каждый объект (текст, кнопка и т.д.) может реагировать на различные события (наведение мыши, клик мыши, таймер и много еще чего), благодаря чему мы имеем возможность следить за действиями юзверя и менять облик страницы в реальном времени.
В следующей таблице представлены некоторые основные события:
Событие Комментарии
Onmousedown происходит при нажатии левой кнопкой мыши
Onmousemove происходит при перемещении мыши
Onclick при клике
Onload при загрузке страницы
Теперь заставим слово "Вася" из предыдущего примера реагировать при наведении на него курсора крысы, для этого после тега <body> вставим небольшой скрипт:
<script language=JavaScript>
function changeColor1(){vasia.style.color="FF0000";}
function changeColor2(){vasia.style.color="00FF00";}
</script>
Поскольку из скриптов нельзя обращаться к классам, мы переделаем все классы в идентификаторы. После чего сделаем так, чтобы Вася краснел при наведении на него мыши:
<div id=vasia onMouseOver="changeColor1()" onmouseout="changeColor2()">ВАСЯ</div>
Сохраняемся и грузим в Експлорере. Ну как? Нравится?
Я знаю, что еще не хватает твоей страничке! Давай теперь сделаем ей меню с интерактивными пунктами:
<HTML><STYLE TYPE="text/css">
