Оживи свою страничку

Спецвыпуск хакер, номер #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">

Назад на стр. 002-014-2  Содержание  Вперед на стр. 002-014-4

загрузка...
Cпец Хакер #075Cпец Хакер #074Cпец Хакер #073Cпец Хакер #072Cпец Хакер #071Cпец Хакер #070Cпец Хакер #069Cпец Хакер #068Cпец Хакер #067Cпец Хакер #066Cпец Хакер #065Cпец Хакер #064Cпец Хакер #063Cпец Хакер #062Cпец Хакер #061Cпец Хакер #060Cпец Хакер #059Cпец Хакер #058Cпец Хакер #057Cпец Хакер #056Cпец Хакер #055Cпец Хакер #054Cпец Хакер #053Cпец Хакер #052Cпец Хакер #051Cпец Хакер #050Cпец Хакер #049Cпец Хакер #048Cпец Хакер #047Cпец Хакер #046Cпец Хакер #045Cпец Хакер #044Cпец Хакер #043Cпец Хакер #042Cпец Хакер #041Cпец Хакер #040Cпец Хакер #039Cпец Хакер #038Cпец Хакер #037Cпец Хакер #036Cпец Хакер #035Cпец Хакер #034Cпец Хакер #033Cпец Хакер #032Cпец Хакер #031Cпец Хакер #030Cпец Хакер #029Cпец Хакер #028Cпец Хакер #027Cпец Хакер #026Cпец Хакер #025Cпец Хакер #024Cпец Хакер #023Cпец Хакер #022Cпец Хакер #021Cпец Хакер #020Cпец Хакер #019Cпец Хакер #018Cпец Хакер #017Cпец Хакер #016Cпец Хакер #015Cпец Хакер #014Cпец Хакер #013Cпец Хакер #012Cпец Хакер #011Cпец Хакер #010Cпец Хакер #009Cпец Хакер #008Cпец Хакер #007Cпец Хакер #006Cпец Хакер #005Cпец Хакер #004Cпец Хакер #003Cпец Хакер #002Cпец Хакер #001