- •Государственная морская академия имени адмирала с. О. Макарова
- •Д. Н. Фомин основы разработки веб-страниц
- •Введение
- •1. Общие вопросы разработки веб-страниц
- •1.1. Цели и задачи создания веб-страниц
- •1.2. Основные понятия и пояснения к ним
- •1.3. Основные элементы веб-страницы и файловая структура веб-сайта
- •1.4. Программное обеспечение рабочего места веб-мастера
- •1.4.1. Редактор html-страниц
- •1.4.2. Редакторы графики
- •1.4.3. Браузеры
- •1.4.4. Вспомогательные программы
- •2. Непосредственная работа с html-кодом
- •2.1. Структура html-документа
- •2.2. Основные тэги
- •2.2.1. Заголовки
- •2.2.2. Абзацы и переводы строки
- •2.2.4. Вставка изображений на веб-страницу
- •2.2.5. Маркированные и нумерованные списки
- •2.2.6. Изменение шрифта
- •2.2.7. Горизонтальная линия
- •2.2.8. Комментарии
- •2.3. Вставка специальных символов в html-документ
- •2.4. Таблицы в html
- •2.4.1. Тэги для таблиц, строк и ячеек
- •2.4.2. Таблицы с объединёнными ячейками
- •2.5. Каскадные таблицы стилей (css)
- •2.5.1. Вводные замечания о таблицах стилей
- •2.5.2. Синтаксис таблиц стилей
- •2.5.3. Наследование
- •2.5.4. Контекстные селекторы
- •2.5.5. Способы включения стилевых таблиц в html-документ
- •2.5.6. Приоритет применения таблиц стилей
- •2.5.7. Классы в стилевых таблицах
- •2.5.8. Комментарии в стилевых таблицах
- •2.5.9. Оформление гипертекстовых ссылок
- •2.6. Свободно позиционируемые элементы
- •3. Визуальный редактор веб-страниц Microsoft FrontPage
- •3.1. Интерфейс Microsoft FrontPage
- •3.2. Ввод и редактирование текста в Microsoft FrontPage
- •3.2.1. Базовые средства редактирования
- •3.2.2. Средства отмены и возврата действий
- •3.2.3. Ввод символа, отсутствующего на клавиатуре
- •3.3. Форматирование текста
- •3.3.1. Базовые средства форматирования
- •3.3.2. Списки
- •3.3.3. Вставка изображений
- •3.4. Создание таблиц в Microsoft FrontPage
- •3.4.1. Создание таблицы при помощи панели инструментов.
- •3.5. Каскадные таблицы стилей в Microsoft FrontPage
- •3.5.1. Создание внешней стилевой таблицы
- •3.5.2. Создание внутренней стилевой таблицы
- •3.5.3. Определение стиля внутри тэга
- •3.5.4. Создание пользовательских классов
- •4. Язык сценариев JavaScript
- •4.1. Простейшие сценарии JavaScript
- •4.2. Типы данных в JavaScript
- •4.2.1. Строки
- •4.2.2. Числа
- •4.2.3. Булевы значения
- •4.2.4. Особые типы данных
- •4.3. Переменные в JavaScript
- •4.3.1. Простые переменные
- •4.3.2. Переменные-массивы
- •4.4. Выражения, условия и операции
- •4.4.1. Арифметические операции
- •4.4.2. Операции сравнения
- •4.4.3. Логические операции
- •4.4.4. Операция присваивания
- •4.4.5. Прочие операции
- •4.5. Основные операторы JavaScript
- •4.5.1. Оператор ветвления if…else
- •4.5.2. Операторы цикла
- •4.5.3. Прочие операторы
- •4.6. Функции в JavaScript
- •4.6.1. Объявление и вызов функций
- •4.6.2. Вызов функций JavaScript по событию
- •4.6.3. Передача параметров в функцию и возврат значений из функции
- •4.7. Использование объектов в JavaScript
- •4.7.1. Общие понятия об объектах в JavaScript
- •4.7.2. Использование объекта Math
- •4.7.3. Использование объекта Date
- •4.7.4. Использование объекта String
- •4.8. Использование объектной модели документа
- •4.8.1. Использование объекта document
- •4.8.2. Строки ввода и кнопки
- •4.9. Способы подключения сценария к веб-странице
- •4.9.1. Размещение сценария в отдельном файле
- •4.9.2. Размещение сценария внутри тэга
- •4.10. Примеры анимации на веб-страницах
- •4.10.1. Часы на веб-странице
- •4.10.2. Обратный счётчик
- •4.10.3. Движущийся текст
- •4.10.4. Изменение цвета текста под указателем мыши
- •4.10.5. Смена изображения под указателем мыши
- •4.10.6. Переливающийся текст
- •Литература
- •Приложение 1.
- •Приложение 3. Часто используемые свойства стилевых таблиц
- •Приложение 2. Часто используемые символьные подстановки
4.10.6. Переливающийся текст
В этом сценарии мы создадим гиперссылку, переливающуюся разными цветами. Для этого создадим массив цветов colors, в который заносятся все названия цветов, которыми будет переливаться ссылка. Заведём переменную mylinkcolor, в которой будет храниться текущий номер цвета ссылки. Затем напишем функцию linkcolorchange( ), которая изменяет значение этой переменной и присваивает соответствующий цвет из массива нашей гиперссылке. По истечении заданного промежутка времени функция вызывает сама себя, чтобы придать ссылке следующий цвет.
<html>
<head>
<script language="JavaScript">
var colors = new Array(
"red", "orange", "yellow", "green", "aqua", "blue", "magenta");
var mylinkcolor = 0;
function linkcolorchange( )
{
mylinkcolor = mylinkcolor+1;
if (mylinkcolor == colors.length) mylinkcolor = 0;
id1.style.color = colors[mylinkcolor];
setTimeout("linkcolorchange( );", 200);
}
</script>
</head>
<body onLoad="linkcolorchange( )">
<a id="id1" href="mypage.html">мерцающая ссылка</a>
</body>
</html>
Упражнение. Создайте гиперссылку, переливающуюся только при наведении на неё указателя мыши. (Указание. Создайте функцию для возврата цвета ссылки в исходное состояние и вызывайте созданные функции по событиям onMouseOver и onMouseOut.)
Литература
Вильямсон Х. Универсальный Dynamic HTML. Библиотека программиста. – СПб.: Питер, 2001.
Дронов В. А. Macromedia Dreamweaver MX 2004 в подлиннике. – СПб.: БХВ-Петербург, 2005.
Кингсли-Хью Э., Кингсли-Хью К. JavaScript 1.5: учебный курс. – СПб.: Питер, 2001.
Мак-Федрис П. Использование JavaScript. Специальное издание.: Пер. с англ. – М.: Издательский дом «Вильямс», 2002.
Матросов А. В., Сергеев А. О., Чаунин М. П. HTML 4.0 в подлиннике. – СПб.: БХВ-Петербург, 2005.
Мержанова М. Уроки веб-мастерства. // Мир ПК. – 2003. – № 2 – 4, 7. – 2004. – № 5, 6.
Прохорский Г. В. Как сделать свою веб-страницу или сайт с помощью Microsoft FrontPage 2003. – М.: НТ Пресс, 2005.
Шапошников И. В. Самоучитель HTML. – СПб.: БХВ-Петербург, 2005.
Приложение 1.
Таблица основных тэгов HTML
Тэг |
Назначение |
Основные атрибуты |
<html> |
Начало и конец документа |
– |
<head> |
Заголовок документа |
– |
<title> |
Название документа |
– |
<body> |
Тело документа |
text – цвет текста bgcolor – цвет фона link – цвет непосещённых ссылок vlink – цвет посещённых ссылок |
<h1>, <h2>, …, <h6> |
Заголовки различных уровней (1–6) |
align – выравнивание (left, center, right, justify) class – указание CSS-класса style – указание CSS-стиля |
<p> |
Абзац |
То же |
<br> * |
Перевод строки |
– |
<a> |
Гиперссылка или якорь |
href – адрес перехода по ссылке name – имя якоря |
<img> * |
Изображение |
src – имя файла с изображением width – ширина height – высота alt – замещающий текст |
<ul> |
Неупорядоченный список |
type – тип маркеров (circle, disc, square) |
<ol> |
Упорядоченный список |
type – тип нумерации (1, A, a, I, i) start – начальный номер |
<li> |
Элемент списка |
– |
<font> |
Шрифт |
face – гарнитура (семейство) шрифта color – цвет шрифта size – размер шрифта (1–7) |
<b> |
Жирный шрифт |
– |
<i> |
Курсив |
– |
<u> |
Подчёркивание |
– |
<s> |
Зачёркивание |
– |
<sup> |
Верхний индекс |
– |
<sub> |
Нижний индекс |
– |
<hr> * |
Горизонтальная линия |
width – длина size – толщина color – цвет align – выравнивание (left, center, right) |
<table> |
Таблица |
width – ширина height – высота bgcolor – цвет фона |
<tr> |
Строка таблицы |
То же |
<td> |
Ячейка таблицы |
То же и colspan – число объединённых столбцов rowspan – число объединённых строк |
<div> |
Строчный фрагмент |
align – выравнивание (left, center, right) class – указание CSS-класса style – указание CSS-стиля |
<span> |
Символьный фрагмент |
class – указание CSS-класса style – указание CSS-стиля |
<script> |
Сценарий |
language – язык (обычно JavaScript) src – имя файла со сценарием |
<input> * |
Элемент управления |
type – тип элемента управления (button – кнопка, text – строка ввода) value – текст в элементе управления |
* Звёздочками отмечены одиночные тэги. |
||