Add to collection(s) Add to saved
  1. No category

Лабораторная работа 2 - Северо

advertisement 
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РФ
Федеральное государственное бюджетное образовательное учреждение
высшего профессионального образования
«СЕВЕРО-КАВКАЗСКИЙ ГОРНО-МЕТАЛЛУРГИЧЕСКИЙ ИНСТИТУТ
(ГОСУДАРСТВЕННЫЙ ТЕХНОЛОГИЧЕСКИЙ УНИВЕРСИТЕТ)»
*
*
*
Кафедра «Автоматизированная обработка информации»
ОСНОВЫ WEB-ДИЗАЙНА
МЕТОДИЧЕСКИЕ УКАЗАНИЯ

к выполнению лабораторных работ
для студентов, обучающихся по направлению подготовки
230100.62 – «Информатика и вычислительная техника»
Составители: М. Х. Томаев, С. И. Чахоян
Допущено
редакционно-издательским советом
Северо-Кавказского горно-металлургического института
(государственного технологического университета).
Протокол заседания РИСа № 3 от 11.04.2014 г.
ВЛАДИКАВКАЗ 2015
–1–
УДК 004.01
ББК 73
Т56
Рецензент: кандидат технических наук,
доцент Северо-Кавказского горно-металлургического института
(государственного технологического университета)
Мирошников А. С.
Т56
Основы Web-дизайна: Методические указания к выполнению лабораторных работ для студентов, обучающихся по направлению подготовки
230100.62 – «Информатика и вычислительная техника / Сост. М. Х. Томаев, С. И. Чахоян; Северо-Кавказский горно-металлургический институт
(государственный технологический университет. – Владикавказ: СевероКавказский горно-металлургический институт (государственный технологический университет). Изд-во «Терек», 2015. – 91 с.
Методические указания предназначены для выполнения лабораторных работ по курсу «Основы WEB-дизайна» для студентов специальности
230100.62 «Информатика и вычислительная техника».
Целью дисциплины является: получение знаний и навыков размещения и визуального оформления информационных ресурсов в сети Интернет
с
использованием
новейших
отраслевых
стандартов
(HTML5/XHTML1.0/CSS2.0/CSS3.0); приобретение навыков работы с инструментальными средствами создания и публикации информационных
ресурсов в сети Интернет.
Подготовлено кафедрой «Автоматизированная обработка информации».
УДК 004.01
ББК 73
Редактор Хадарцева Ф. С.
Компьютерная верстка Меркушевой О. А.
© Составление. ФГБОУ ВПО СКГМИ (ГТУ), 2015
© Томаев М. Х., Чахоян С. И., составление, 2015
Подписано в печать 06.02.15. Формат бумаги 60841/16. Бумага офсетная. Гарнитура «Таймс».
Печать на ризографе. Усл. п. л. 5,29. Уч.-изд. 2,58. Тираж 20 экз. Заказ №
.
Северо-Кавказский горно-металлургический институт (государственный технологический
университет). Изд-во «Терек».
Отпечатано в отделе оперативной полиграфии СКГМИ (ГТУ).
362021, г. Владикавказ, ул. Николаева, 44.
–2–
СОДЕРЖАНИЕ
Лабораторная работа 1.
Введение в НТМL. Формирование шрифта и абзаца ………
4
Лабораторная работа 2.
Разметка и позиционирование областей документа
с помощью таблиц…………………………………………….. 13
Лабораторная работа 3.
Навигационное меню…………………………………………. 25
Лабораторная работа 4.
Работа с изображением и мультимедиа-объектами………… 29
Лабораторная работа 5.
Разметка и позиционирование областей документа
с помощью CSS…………………………………………………. 41
Лабораторная работа 6.
Стили областей, границ и содержимого…………………….. 56
Лабораторная работа 7.
Создание всплывающих меню с помощью CSS……………. 64
Лабораторная работа 8.
Введение в Javascript…………………………………………… 73
Лабораторная работа 9.
Работа с массивами…………………………………………… 80
Лабораторная работа 10.
Строковые функции Javascript………………………………..
85
Литература…………………………………………………………… 90
–3–
Лабораторная работа 1
ВВЕДЕНИЕ В HTML.
ФОРМАТИРОВАНИЕ ШРИФТА И АБЗАЦА
Независимо от того, как выглядит ваша страница и какую информацию вы хотите отобразить, существует три тега, которые в соответствии
со стандартами HTML должны присутствовать на каждой странице:
<HTML> – сообщает браузеру, что документ создан на HTML;
<HEAD> – отмечает вводную и заголовочную части HTMLдокумента;
<BODY> – отмечает основной текст и информацию;
<TITLE> – название документа, оно отражается в заголовке окна браузера.
Например, если написать следующий код:
<html>
<head>
<title>Заголовокдокумента</title>
</head>
<body>
Тело документа
</body>
</html>
В окне браузера он будет выглядеть так:
Теоретически название документа может иметь неограниченную
длину, на практике рекомендуется ограничиться 60 символами.
–4–
Тело документа – тег BODY
Все, что отображается на web-странице, находится в тегах
<body> </body>. Это текст, картинки и исполняющиеся скрипты, а
также теги для оформления всего этого.
Параметры тега <body>:
аlink – устанавливает цвет активной ссылки. Текущий цвет
ссылки меняется на активный при нажатии на нее;
vlink – устанавливает цвет посещенной ссылки, т. е. той, по которой уже щелкали;
background – указывает на изображение, которое будет использоваться в качестве фонового рисунка. Этот рисунок заполняет собой
все видимое пространство окна;
bgcolor – указывает фоновый цвет документа;
leftmargin – определяет отступ от левого края окна браузера до
контента страницы;
rightmargin – определяет отступ от правого края окна браузера
до контента страницы;
topmargin – определяет отступ от верхнего края окна браузера
до контента страницы;
bottommargin – определяет отступ от нижнего края окна браузера до контента страницы;
text – устанавливает цвет текста для всего документа.
Base. Одиночный тег <base> служит для указания полного URLадреса документа. У этого тега один атрибут href, значением которого является адрес страницы
<base href="http://www.my_site.ru/">
Link. Одиночный тег <link> необходим для подключения внешних файлов. У тега <link> несколько атрибутов:
href – указывает URL-адрес подключаемого файла;
rel – указывает на тип отношения данного документа к внешнему (например: rel="stylesheet" указывает, что внешний файл определяет стиль текущего документа).
Тype. Указывает тип и параметры присоединенной таблицы
стилей.
–5–
Пример кода:
<link rel="stylesheet" type="text/css" href="style.css">
Meta:
– указание кодировки страницы, например, для русского текста в
кодировке Windows:
<meta http-equiv="Content-Type" content="text/html;charset=windows1251">
– указание ключевых слов страницы (используется при оптимизации страниц):
<meta http-equiv="KEYWORDS" content="тег, структура html,
заголовок страницы">
– указание краткого описания страницы:
<meta http-equiv="DESCRIPTION" content="Описание структура
html и элементов заголовка">
Возможны и другие варианты. Рассмотрим параметры тега <meta>:
http-equiv – определяет свойство тега (тип контента, ключевые
слова, описание и т. д.);
name – используется для дополнительного описания тега, если
отсутствует, то считаеся эквивалентным параметру http-equiv;
Content – значение параметра http-equiv.
Script. Используются для подключения внешних файлов скриптов. Это позволяет оптимизировать код страниц. Это повышает читабельность кода и ускоряет загрузку страниц. У этого тега несколько параметров:
language – указывает язык написания скрипта, в спецификации
HTML 4.0 данный параметр не рекомендуется к употреблению. Вместо него следует указывать параметр type;
type – указывает тип MIME для языка;
src – указывает путь к внешнему файлу со скриптами. Примeр
кода с относительным адресом скрипта:
<script type="text/javascript" src="function.js">
</script>
–6–
Форматирование шрифта и абзаца
Теги, делающие текст заголовками:
<h1>…<h6> – теги выделяют текст в виде заголовков (заголовок
первого уровня самый большой, шестого – самый маленький);
<br> – тег принудительного перевода строки. Текст, после этого
тега начинается с новой строки;
<p></p> – эти теги разделяют текст на абзацы.
Эти теги могут использоваться с параметром горизонтального
выравнивания align. Возможные значения этого параметра:
left – слева,
right – справа,
center – по центру,
jastify – по ширине.
Пример кода:
<body>
<h1>Это заголовок первого уровня</h1>
<h2>Это заголовок второго уровня</h2>
<h3>Это заголовок третьего уровня</h3>
<h4 align="right">Это заголовок четвертого уровня</h4>
<h5 align="center">Это заголовок пятого уровня</h5>
<h6 align="jastify">Это заголовок шестого уровня</h6>
Это просто текст
<p align="left">Это абзац, он отделен от всего текста пустыми
строками сверху и снизу и выровненпо левому краю.</p>
<p align="right">Это абзац, он отделен от всего текста пустыми
строками сверху и снизу и выровнен по правому краю.</p>
<p align="center">Это абзац, он отделен от всего текста пустыми
строками сверху и снизу и выровнен по центру.</p>
Это просто текст. <br> Это текст с новой строки.
</body>
Теги, выделяющие текст курсивом
Теги <cite></cite> используются для логического выделения
названий книг, статей и цитат.
–7–
Теги <dfn></dfn> используются для выделения определений.
Тегами <em></em> и <i></i> выделяют важные фрагменты текста. Последний не рекомендуется к употреблению.
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
<cite>Этоттекствтегахcite</cite><br>
<dfn> Этот текст в тегах dfn </dfn><br>
<em> Этот текст в тегах em </em><br>
<i> Этот текст в тегах i </i>
</body>
</html>
Теги, выделяющие текст полужирным шрифтом
<strong></strong>
<b></b>
Оба используются для выделения важных фрагментов текста, но
предпочтительнее использовать первый.
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
Просто текст <br>
<strong> Этот текст в тегах strong </strong><br>
<b> Этот текст в тегах b </b>
</body>
</html>
–8–
Теги, выделяющие текст подчеркиванием
<ins></ins>
<u></u>
Оба используются для подчеркивания важных фрагментов текста, но предпочтительнее использовать первый.
Пример кода:
<body>
Просто текст<br>
<ins> Этот текст в тегах ins </ins><br>
<u> Этот текст в тегах u </u>
</body>
Теги, выводящие текст моноширинным шрифтом
<kbd></kbd>, <samp></samp>, <tt></tt> – выводят текст моноширинным шрифтом, но предпочтительнее использовать первый.
Пример кода:
<body>
Просто текст<br>
<kbd> Этот текст в тегах kbd </kbd><br>
<samp> Этот текст в тегах samp </samp><br>
<tt> Этот текст в тегах tt </tt>
</body>
Теги, выводящие текст в верхнем и нижнем индексах
Теги <sub></sub> выводят текст ниже уровня строки шрифтом
меньшего размера.
Теги <sup></sup> выводят текст выше уровня строки шрифтом
меньшего размера.
Удобны для вывода математических и химических формул.
Пример кода:
<body>
y=x<sup>2</sup> – уравнение параболы.<br><br>
H<sub>2</sub>O – формула воды.
</body>
–9–
Тег font и его параметры
Теги <font></font> указывают параметры шрифта текста:
face – название шрифта. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный
шрифт не будет найден (вы же не знаете, какие шрифты установлены
на компьютере пользователя), браузер станет использовать следующий по списку;
size – размер шрифта в условных ед. от 1 до 7. По умолчанию
размер шрифта равен 3;
color – цвет текста (по умолчанию – черный).
Существуют два способа задания цвета: по имени и указанием
шестнадцатеричного кода цвета:
– указав именной цвет (их 156) , например, color="blue";
– указав шестнадцатеричный код. Этот код представляет собой 6
цифр и начинается с символа "#".
Пример кода:
<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>
Тег center
Теги <center></center> предназначены для выравнивания всех
элементов внутри него по центру окна браузера.
– 10 –
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
Это простой текст
<center>Это выровненный по центру текст.</center>
</body>
</html>
Совместное использование тегов
Самостоятельная работа
Задание 1. Создание простейших файлов HTML.
1. Создайте в своем каталоге папку, в которой мы будем сохранять сконструированные Web-страницы.
2. Запустите программу Блокнот (Notepad).
3. Наберите в окне редактора простейший текст файла HTML:
<html>
<head>
<title>Структура html</title>
<base href="http://www.my_site.ru/">
</head>
<body>
Тело документа
</body>
</html>
4. Сохраните файл под именем <имя>.HTML.
5. Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer.
На экране вы увидите результат своей работы.
Задание 2. Управление расположением текста на экране.
1. Откройте первоисточник созданной вами Web-страницы, выполнив команду Вид (View), Источник (В виде HTML). Откроется
– 11 –
окно программы Блокнот, в котором ваша Web-страница будет представлена в командах HTML.
2. Внесите изменения в текст файла HTML, расположив слова
“Расписание”, “занятий”, “на вторник” на разных строках, разными
шрифтами, разными цветами, в разных местах:
<html>
<head>
<title>Структура html</title>
<base href="http://www.my_site.ru/">
</head>
<body>
Текст документа
</body>
</html>
3. Сохраните текст со внесенными изменениями в файле
<name>.HTML с помощью команды Файл (File), Сохранить (Save).
Закройте программу Блокнот.
4. Просмотрите с помощью браузера Microsoft Internet Explorer
полученную Web-страницу, используя клавишу F5 или команду Вид
(View), Обновить (Refresh).
Задание 3. Создать первую страницу сайта одного из вариантов:
№ варианта
1
2
3
4
5
6
7
8
9
10
Сайт
«Футбольная команда»
«Музыкальная группа»
«Расписание в кинотеатре»
«Визитка актера»
«Спортивная страничка»
«Автор любимых книг»
«Реклама фирмы»
«Отдых во Владикавказе»
«Турагентство»
«Моя группа»
– 12 –
Лабораторная работа 2
РАЗМЕТКА И ПОЗИЦИОНИРОВАНИЕ
ОБЛАСТЕЙ ДОКУМЕНТА С ПОМОЩЬЮ ТАБЛИЦ
Создание таблиц в HTML
Таблица – один из основных инструментов для создания webстраниц.
Любая таблица представляет собой набор строк и столбцов, на
пересечении которых находятся ячейки. Например:
столбец 1
первый столбец
первой строки
первый столбец
второй строки
первый столбец
третьей строки
Название таблицы
столбец 2
второй столбец
первой строки
второй столбец
второй строки
второй столбец
третьей строки
столбец 3
третий столбец
первой строки
третий столбец
второй строки
третий столбец
третьей строки
Рассмотрим нашу таблицу с точки зрения HTML:
– сама таблица задается с помощью тегов <table></table>;
– у таблицы есть название – теги <caption></caption>;
– таблица состоит из строк – теги <tr></tr>;
– каждая строка состоит из столбцов – теги <td></td>;
– столбцы имеют названия, расположенные в первой строке –
теги <th></th>.
Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов:
<html>
<head>
<title>html table</title>
</head>
<body>
<table>
– 13 –
<caption>Названиетаблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html>
Результат:
Название таблицы
1
2
3
11
12
13
21
22
23
31
32
33
У тега <table> существует ряд параметров:
width – задает ширину таблицы (в пикселах или % от ширины
экрана),
bgcolor – задает цвет фона ячеек таблицы,
background – заливает фон таблицы рисунком,
border – задает рамку указанной ширины (в пикселах) вокруг
всей таблицы,
cellpadding – задает отступ в пикселях между границей клетки и
ее содержимым,
align – задает выравнивание таблицы: слева (right), справа (left),
поцентру (center),
cellspacing – задает расстояние между ячейками таблицы (в пикселах),
cellpadding – задает расстояние между текстом и внутренней
границей ячейки таблицы (в пикселах).
Применим эти параметры:
<html>
<head>
<title>html table</title>
</head>
<body>
– 14 –
<table width="300" bgcolor="plum" border="1"align="center"
cellspacing="5" cellpadding="10">
<caption>Названиетаблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html>
Результат:
Название таблицы
1
2
3
11
12
13
21
22
23
31
32
33
За границы отвечают два параметра:
frame – задает вид рамки вокруг таблицы и может принимать
следующие значения:
void – рамки нет,
above – только верхняя рамка,
below – только нижняя рамка,
hsides – только верхняя и нижняя рамки,
vsides – только левая и правая рамки,
lhs – только левая рамка,
rhs – только правая рамка,
box – все четыре части рамки.
rules – задает вид внутренних границ таблицы и может принимать следующие значения:
none – между ячейками нет границ,
groups – границы только между группами строк и группами
столбцов,
rows – границы только между строками,
cols – границы только между столбцами,
all – отображать все границы.
– 15 –
HTML тэги tr и td
Таблицы формируются построчно. Поэтому, заданные в строке (tr)
параметры распространяют свое действие на все ячейки (td) строки.
У строк можно использовать три параметра:
align – выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center),
valign – выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle),
bgcolor – задает цвет строки.
Посмотрим на примере:
<html>
<head>
<title>html tr</title>
</head>
<body>
<table width="300" bgcolor="plum" border="1"
align="center" cellspacing="0" cellpadding="10">
<caption>Названиетаблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr align="center" valign="middle" bgcolor="yellow">
<td>
11 Текст во всех ячейках этой строки центрирован как по вертикали, так и по горизонтали
</td>
<td>12</td>
<td>13</td>
</tr>
<tr align="left" valign="bottom">
<td>
21 Здесь текст прижат к левому краю по горизонтали и книзу –
по вертикали
</td>
<td>22</td>
<td>23</td>
</tr>
<tr align="right" valign="top" bgcolor="yellow">
<td>
– 16 –
31 Текст во всех ячейках этой строки прижат по горизонтали к
правому краю,
по вертикали – кверху
</td>
<td>32 </td>
<td>33</td>
</tr>
</table>
</body>
</html>
Результат:
Эти же параметры можно применять и к отдельным ячейкам, т. е.
к любому тегу <td>, действие будет распространяться только на саму
ячейку.
К ячейкам можно применять еще два параметра:
width – задает ширину столбца (в пикселах или в процентном
соотношении, где за 100 % принимается ширина таблицы),
height – задает высоту ячейки, причем все ячейки в этой же
строке станут этой высоты.
– 17 –
Например, добавим в наш код, в теги <th> эти параметры
<tr>
<th width="50%" height="50">1</th>
<th width="30%">2</th>
<th width="20%">3</th>
</tr>
Результат:
Следует отметить, если не задавать ширину и высоту, то таблица
будет формироваться по содержимому (так было в предыдущих
примерах).
Тег colspan – объединение столбцов
Этот параметр указывает браузеру объединить несколько столбцов в один. Значением этого параметра является число, указывающее
сколько столбцов будет объединено.
– 18 –
Например,
<td colspan="2">
Этот столбец включает в себя два столбца.
Пример:
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<table width="715" border="1" align="center" cellspacing="0" сellpadding="10">
<tr bgcolor="darkred">
<td colspan="2" height="100">шапка сайта</td>
</tr>
<tr bgcolor="oldlace">
<td width="190" height="300">меню</td>
<td>контент</td>
</tr>
<tr bgcolor="darkred">
<td colspan="2" height="30">низ сайта</td>
</tr>
</table>
</body>
</html>
шапка сайта
меню
контент
низ сайта
– 19 –
Тег rowspan – объединение строк
Этот параметр указывает браузеру объединить несколько строк в
одну. Значением этого параметра является число, указывающее
сколько строк будет объединено.
Например,
<td rowspan="2">
Здесь столбец включает в себя две строки.
Для нашего рисунка:
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<table width="715" border="1"
align="center" cellspacing="0" cellpadding="10">
<tr bgcolor="darkred">
<td rowspan="2" width="30%">меню</td>
<td height="60">шапка</td>
</tr>
<tr bgcolor="oldlace">
<td height="200">контент</td>
</tr>
</table>
</body>
</html>
шапка
меню
контент
– 20 –
Вложенные таблицы
Как следует из названия, одну таблицу можно поместить внутрь
другой, а именно – внутрь любого столбца. Сделаем это на примере
нашей последней разметки.
Давайте внутрь нашего контента поместим такую таблицу:
Картинки для нее подберите сами. Код этой таблицы простой –
три строки и два столбца:
<table width="470" border="1"
align="center" cellspacing="0" cellpadding="10">
<tr>
<td width="100"><img src="f1.jpg" width="100" height="70"></td>
<td>Здесь текст о ромашках</td>
</tr>
<tr>
<td width="100"><img src="f2.jpg" width="100" height="70"></td>
<td>Здесь текст о тюльпанах</td>
</tr>
<tr>
<td width="100"><img src="f3.jpg" width="100" height="70"></td>
<td>Здесь текст о герберах</td>
</tr>
</table>
– 21 –
Теперь возьмем код этой таблицы и поместим его вместо слова
"контент" в код нашей разметки:
<html>
<head>
<title>Заголовокдокумента</title>
</head>
<body>
<table width="715" border="1"
align="center" cellspacing="0" cellpadding="10">
<tr bgcolor="darkred">
<td width="70%" height="60">шапка</td>
<td rowspan="2">меню</td>
</tr>
<tr bgcolor="oldlace">
<td height="200">
<table width="470" border="1"
align="center" cellspacing="0" cellpadding="10">
<tr>
<td width="100"><img src="f1.jpg" width="100" height="70"></td>
<td>Здесь текст о ромашках</td>
</tr>
<tr>
<td width="100"><img src="f2.jpg" width="100" height="70"></td>
<td>Здесь текст о тюльпанах</td>
</tr>
<tr>
<td width="100"><img src="f3.jpg" width="100" height="70"></td>
<td>Здесь текст о герберах</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="darkred">
<td colspan="2" height="30">низсайта</td>
</tr>
</table>
</body>
</html>
– 22 –
Результат:
Теперь уберем все границы у вложенной таблицы. Для этого в
теге <table> этой таблицы зададим параметр <border="0">
<table width="470" border="0" align="center" cellspacing="0" cellpadding="10" >
Результат:
– 23 –
Самостоятельная работа
Задание. Добавить на станицу сайта, созданного в Лабораторной
работе № 1, следующие объекты:
1) список;
2) таблицу:
а) объединить строки, столбцы;
б) изменить ширину и цвет рамки;
в) изменить цвет ячеек таблицы;
г) добавить в ячейку список;
д) добавить картинку в хотя бы одну ячейку.
Варианты сайтов:
№ варианта
1
2
3
4
5
6
7
8
9
10
Сайт
«Футбольная команда»
«Музыкальная группа»
«Расписание в кинотеатре»
«Визитка актера»
«Спортивная страничка»
«Автор любимых книг»
«Реклама фирмы»
«Отдых во Владикавказе»
«Турагентство»
«Моя группа»
– 24 –
Лабораторная работа 3
НАВИГАЦИОННОЕ МЕНЮ
Многие html-страницы используют для организации ссылок так
называемые карты-изображения. При таком подходе берется изображение и к различным его областям привязываются ссылки.
Такие карты-изображения могут быть клиентскими и серверными. Ссылки клиентских карт хранятся в самом документе и по щелчку мыши браузер определяет, к какой области относятся координаты
этой точки, и осуществляет переход по нужной ссылке.
При серверном варианте эти координаты сначала передаются на
сервер, там обрабатываются специальной программой и только после
этого происходит переход по ссылке.
Для примера представим, что мы являемся магазином бытовой
техники, и в шапке нашего сайта у нас расположена вот такая
картинка:
Сделаем из нее навигационную карту, т. е. при щелчке по холодильнику будет осуществляться переход на страницу, посвященную
холодильникам (с моделями, описанием и ценами), при щелчках по
пылесосу и стиральной машине – на соответствующие им страницы.
Для этого нам надо описать области на этой картинке, которые
будут ссылками. Для описания таких областей используются теги <map></map> с единственным параметром name, который задает
имя карты-ссылок и используется потом для ссылки на эту карту.
Нашу карту надо подключить к нашей картинке, для этого в
тег <img> надо добавить параметр usemap, в качестве значения которого выступает имя нашей карты после значка # (решетки):
– 25 –
<html>
<head>
<title>map html</title>
</head>
<body>
<img src="map.gif" usemap="#map" border="0">
<map name="map">
</map>
</body>
</html>
Для описания конкретных областей внутри тегов <map></map>
используются теги <area>. Этот тег имеет следующие параметры:
1) shape – определяет форму области, может принимать следующие
значения:
rect – область в виде прямоугольника,
circle – область в виде круга,
poly – область в виде многоугольника,
default – вся область;
2) cootds – задает координаты отдельной области:
– для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника,
– для circle задаются координаты центра круга и радиус,
– для poly задаются координаты вершин многоугольника в нужном порядке;
3) href – определяет адрес ссылки;
4) target – применяется при использовании фреймов и указывает
фрейм, в который нужно загрузить страницу;
5) alt – задает альтернативный текст для области.
У нас три области, значит будет три тега <area>: первый – прямоугольная область вокруг пылесоса, второй – прямоугольная область вокруг стиральной машины, третья – вокруг холодильника.
<html>
<head>
<title>map html</title>
</head>
<body>
– 26 –
<img src="map.gif" usemap="#map" border="0">
<map name="map">
<area shape="rect">
<area shape="rect">
<area shape="rect">
</map>
</body>
</html>
Теперь надо определиться с координатами этих областей. В нашем
примере области будут прямоугольными. Надо задать координаты
верхнего левого и правого нижнего углов трех прямоугольников.
Для этих целей обычно используется какая-нибудь программа,
например, Image Ready, которая имеет специальный инструмент для
обводки областей и автоматически строит описания этих областей.
Рассмотрение работы этих программ не входит в курс HTML, поэтому здесь мы зададим координаты "на глаз". Посмотрите еще раз на
наше изображение:
Ширина нашей картинки 738 пикселей, а высота – 192 пикселя.
Проведем линии по границам наших областей и примерно определим координаты. Теперь мы готовы добавить эти параметры в наши
теги <area>.
<html>
<head>
<title>map html</title>
</head>
<body>
<img src="map.gif" usemap="#map" border="0">
<map name="map">
– 27 –
<area shape="rect" coords="550,135, 590,192"href="#"
alt="пылесосы">
<area
shape="rect"
coords="591,90,
660,192"href="#"
alt="стиральные машины">
<area
shape="rect"
coords="661,0,
730,192"href="#"
alt="холодильники">
</map>
</body>
</html>
Теперь наши области стали ссылками (если подвести курсор
мыши, он превращается в ладошку). На этом сайте нет страниц, посвященных холодильникам, поэтому ссылки ведут на эту же страницу, но если вы создадите нужные страницы, то при щелчке по области будет осуществляться переход.
Самостоятельная работа
Задание 1. Создать меню типа карта-изображение на сайте.
№ варианта
1
2
3
4
5
6
7
8
9
10
Сайт
«Футбольная команда»
«Музыкальная группа»
«Расписание в кинотеатре»
«Визитка актера»
«Спортивная страничка»
«Автор любимых книг»
«Реклама фирмы»
«Отдых во Владикавказе»
«Турагентство»
«Моя группа»
Задание 2. Создать на сайте переход на последующие страницы
с помощью карты-изображения и простых ссылок.
– 28 –
Лабораторная работа 4
РАБОТА С ИЗОБРАЖЕНИЕМ
И МУЛЬТИМЕДИА-ОБЪЕКТАМИ
Фоновая музыка в html
На web-страницу можно интегрировать фоновую музыку. Когда
пользователь будет попадать на эту страницу, будет проигрываться
мелодия, конечно, если у пользователя есть колонки или наушники.
Для этого нужен аудифайл в одном из форматов: WAV, AU,
MIDI. Положите этот файл в тот же каталог, где лежат ваши htmlстраницы. Теперь в код любой страницы (в теги body)добавьте следующий тег:
<bgsound src="Love_Me_Do_Beatles.mid" loop="1"></bgsound>
Теперь при просмотре страницы всегда будет присутствовать
фоновая музыка. Рассмотрим параметры тега<bgsound>:
src – адрес звукового файла;
loop – число повторов мелодии (если равно –1, то повторяется
бесконечно);
balance – стереобаланс (значения от –10 000 до +10 000);
volume – громкость, максимальное значение = 0 (возможные
значения от –10 000 до 0).
Подключаемые модули
Подключаемые модули позволяют управлять проигрыванием
звуковых файлов.
Тег <embed> указывает браузеру вставить на web-страницу модуль управления звуковым файлом, а его параметры задают адрес
музыкального файла, а также ширину и высоту консоли органов
управления.
<html>
<head>
<title>Музыкав html</title>
</head>
– 29 –
<body>
Композиция "Love Me Do" Beatles
<embed src="Love_Me_Do_Beatles.mid" height="60" width=144>
</body>
</html>
Посмотрим как эту страницу будут отображать разные браузеры:
Встраиваем звук
Теги <object></object> позволяют встраивать любой объект заданием его URL.
Теги <param> позволяют задать объекту начальные значения.
Тег <embed> указывается для старых версий браузера, которые
не поддерживают теги <object></object> (поэтому параметры повторяются).
Параметры тега <param>:
<param name="movie" value="..."> – задает файл-источник объекта;
<param name="quality" value="..."> – задает качество отображения объекта, возможные значения: high (высокое), medium (среднее)
и low (низкое).
<param name="bgcolor" value="..."> – задает фон для области
отображения объекта.
Параметры тега <embed>:
type – задает MIME-тип встроенного объекта.
pluginspage – указывает на URL приложения, которое необходимо для просмотра встраиваемого объекта.
– 30 –
Код следующий:
<html>
<head>
<title>Звук</title>
</head>
<body>
<object width="480" height="50" align="center">
<param name="movie"value="Love_Me_Do_Beatles.mid">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed src="Love_Me_Do_Beatles.mid"
quality="high"
bgcolor="#FFFFFF"
autostart="false"
width="480"
height="50"
align="center"
type="audio/mid"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
</body>
</html>
Встраиваем flash-анимацию
Рассмотрим встраивание flash-анимации в html-страницу. Для
этого нам понадобится flash-player (flash-анимация (файл с расширением .swf)). Сам файл можно и не скачивать, а лишь узнать ссылку
на него. Для того, чтобы вставить ее в страницу, добавим следующий
код:
<html>
<head>
<title>Анимация</title>
</head>
<body>
– 31 –
<object width="480" height="200" align="center">
<param name="movie"
value="ссылканафайл">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed src="http://dump.nnov.ru/flash/blackcat.swf"
quality="high"
bgcolor="#FFFFFF"
width="480"
height="200"
align="center"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
</body>
</html>
Типов объектов существует очень много, приведем здесь лишь
наиболее популярные:
Тип файла
аудиозапись AU
аудиозапись MIDI
аудиозапись MP3
аудиозапись WAV
видео в формате AVI
видео в формате MPEG
видео в формате QuickTime
трехмерная интерактивная графика в формате VRML
Расширение
.au
.mid
.mp3
.wav
.avi
.mpeg, .mpg
.mov
MIME-тип
audio/basic
audio/mid
audio/mpeg
audio/wav
video/x-msvideo
video/mpeg
video/quicktime
.wrl
x-world/x-vrml
flash
.swf
application/x-shockwaveflash
Как видите, код почти такой же, как в примере со звуком, разница
только в URL-файлах и их типах. Но элемент <object> для того и существует, чтобы встраивать совершенно разные объекты: картинки, музыку, видео, анимации и т. д. Чтобы все это работало, необходимо указать
MIME-тип встраиваемого объекта и иметь нужный плагин.
– 32 –
Изображения на web-страницах
Изображения на web-страницах могут использоваться двумя
способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG,
GIF и PNG. Именно их поддерживают все браузеры, для остальных
форматов могут потребоваться специальные средства.
Как правило, все изображения для сайта хранятся в отдельной
папке, например, images. А пути к изображениям прописываются так
же, как в ссылках.
Во всех последующих примерах пути к изображениям будут
прописаны, исходя из того, что картинки находятся в папке images, а
страницы в папке site, находящейся на том же уровне.
Фоновые изображения
Фоновое изображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге <body> атрибут background="fon.gif", рисунком fon.gif будет залито все окно
браузера.
Пример кода:
<bodybackground="../images/fon.gif" bgcolor="pink">
Здесь содержание документа
</body>
Задавая фоновый рисунок документа, не забывайте указывать
также параметр bgcolor. Это связано с тем, что у пользователя может
быть отключена загрузка изображений и вашего красивого фона он
не увидит. Тогда браузер и будет использовать параметр bgcolor.
Встраивание изображений
Для размещения на странице изображений используется
тег <img>, имеющий единственный обязательный параметр src,
определяющий URL-адрес изображения
– 33 –
Пример кода:
<imgsrc="../images/fish.gif">
Остальное содержимое документа
Результат:
Параметр lign
У этого параметра есть несколько значений. Рассмотрим их все
на примерах.
Пример кода с параметрами align="left" и align="right"
<imgsrc="../images/fish.gif" align="left">
Картинка слева, а текст обтекает ее справа и этот текст может
занимать несколько строчек.
<img src="../images/fish.gif" align="right">
Картинка справа, а текст обтекает ее слева и этот текст может
занимать несколько строчек.
Результат:
Картинка слева, а текст обтекает ее справа, и этот
текст может занимать несколько строчек.
Картинка справа, а текст обтекает ее слева,
и этот текст может занимать несколько строчек.
– 34 –
Пример кода с параметром align="top"
<img src="../images/fish.gif" align="top">
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Изображение как бы встраивается в
строчку. Если изображение большое, то и строка раздвигается на эту
высоту.
Результат:
Верхняя граница изображения выравнивается по
самому высокому элементу текущей строки. Изображение как бы
встраивается в строчку. Если изображение большое, то и строка раздвигается на эту высоту.
Пример кода с параметром align="texttop"
<img src="../images/fish.gif" align="texttop">
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки).
Результат:
Верхняя граница изображения выравнивается по
самому высокому текстовому элементу текущей строки (заглавная
буква строки).
Пример кода с параметром align="middle"
<img src="../images/fish.gif" align="middle">
<font size=7>Выравнивание</font>
середины изображения по базовой линии текущей строки.
– 35 –
Результат:
Выравнивание середины изображения по базовой линии текущей строки.
Пример кода с параметром align="absmiddle"
<img src="../images/fish.gif" align="absmiddle">
<font size=7>Выравнивание</font>
середины изображения посередине текущей строки.
Результат:
Выравнивание середины изображения посередине текущей строки.
Пример кода с параметром align="bottom"
<img src="../images/fish.gif" align="bottom">
<font size=7>Выравнивание</font>
нижней границы изображения по базовой линии текущей строки.
Результат:
Выравнивание нижней границы изображения по
базовой линии текущей строки.
– 36 –
Пример кода с параметром align="absbottom"
<img src="../images/fish.gif" align="absbottom">
<font size=7>Выравнивание</font>
нижней границы изображения по нижней границе текущей строки.
Результат:
Выравнивание нижней границы изображения по
нижней границе текущей строки.
Если же мы хотим, чтобы текст располагался под картинкой, то
необходимо использовать тег <br> с параметром clear, который запрещает обтекание. Обтекание можно запретить с правой стороны
(right), с левой стороны (left) и с обеих сторон (all).
Пример кода:
<imgsrc="../images/fish.gif">
<br clear="all"> Остальные элементы документа
Результат:
Размеры изображений
Любое изображение имеет размер, заданный в пикселях. При
встраивании изображения на страницу, возможно уменьшить размер
исходной картинки.
– 37 –
Для этого у тега <img> существуют параметры width – ширина
и height – высота. Они задаются в пикселях или в процентах (процент от ширины экрана). При загрузке изображения браузер будет
автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты.
Пример кода:
<img src="../images/fish.gif">
<img src="../images/fish.gif" width="50" height="50">
<img src="../images/fish.gif" width="25" height="25">
Результат:
Отделение изображения от текста
Параметры hspace – горизонтальный отступ и vspace – вертикальный отступ. Отступы задаются в пикселях.
Пример кода:
<imgsrc="../images/fish.gif" align="left" hspace="20" vspace="20">
Остальное содержимое документа теперь не прилипает к изображению.
Результат:
– 38 –
Альтернативный текст
Параметр alt. Текст из этого параметра будет отображаться вместо картинки (если отключен режим загрузки изображений). В случае же, если картинка отображается, этот параметр дает подсказку
при наведении курсора мыши, правда, не во всех браузерах.
Пример кода:
<imgsrc="../images/fish.gif" alt="рыбка">
Результат:
Изображение в качестве ссылки
Чтобы изображение сделать ссылкой, достаточно поместить его
внутрь тега-контейнера <a>. В примере наша картинка будет ссылаться на страницу html_example1.html, которая будет открываться в
отдельном окне.
Пример кода:
<a href="html_example1.html" target="_blank">
<img src="../images/fish.gif" alt="рыбка">
</a>
Результат:
– 39 –
Самостоятельная работа
Задание 1. Разместите flash-анимацию на сайте.
Задание 2. Разместите музыку.
Задание 3. Поместите картинки на сайт. Используйте параметры
изменения картинки.
Задание 4. Сделайте картинку как фоновый рисунок страницы.
Задание 5. Добавьте ссылки на другие страницы.
– 40 –
Лабораторная работа 5
РАЗМЕТКА И ПОЗИЦИОНИРОВАНИЕ
ОБЛАСТЕЙ ДОКУМЕНТА С ПОМОЩЬЮ CSS
В CSS для позиционирования элементов используются блоки
(div-ы). Код при этом становится компактным, логичным и легко изменяемым. К недостаткам блочной верстки можно отнести неодинаковую поддержку браузерами, поэтому приходится писать кроссбраузерный код (т. е. код, который отображается разными браузерами почти одинаково).
Предположим, есть вот такая стандартная html-страница:
шапка сайта
меню
контент
низ сайта
Если визуально разделить страницу на прямоугольные блоки, то
получим четыре блока: шапка сайта, меню, контент и низ сайта.
Html-код страницы с четырьмя div-ами и соответствующими идентификаторами (id) выглядит так:
<html>
<head>
<title>CSS позиционирование</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">шапкасайта</div>
<div id="menu">меню</div>
– 41 –
<div id="content">контент</div>
<div id="footer">низсайта</div>
</body>
</html>
Теперь, на странице style.css зададим свойства, а именно ширину, высоту и фон каждого блока:
#header{
background:darkred;
width:715px;
height:100px;
}
#menu{
background:oldlace;
width:190px;
height:300px;
}
#content{
background:oldlace;
width:525px;
height:300px;
}
#footer{
background:darkred;
width:715px;
height:30px;
}
Сейчас наша страница в браузере (в уменьшенном варианте) выглядит так:
– 42 –
Такое позиционирование элементов
называется позиционированием в нормальном потоке. Это значит, что все
элементы отображаются в окне браузера
сверху вниз, по вертикали, в том порядке, в каком они следуют друг за другом
в html-коде.
По своей сути нормальный поток ничем не отличается от позиционирования
элементов в HTML. И для верстки такой
страницы без CSS, пришлось бы использовать таблицу, за неимением других вариантов. В CSS же предоставляются и
другие схемы позиционирования:
– абсолютное позиционирование;
– относительное позиционирование;
– плавающая блоковая модель.
Для определения схемы позиционирования используется свойство position, оно может принимать четыре значения, соответствующие выбранной схеме позиционирования:
static – блок позиционируется в нормальном потоке. Это значение по умолчанию;
relative – относительное позиционирование (относительно нормального потока);
absolute – абсолютное позиционирование;
fixed – фиксированное позиционирование (фиксируется относительно области просмотра).
Абсолютное позиционирование
При этой схеме позиционирования расположение блока на странице не зависит от того, в каком месте html-кода расположен этот
блок. Расположение каждого блока задается указанием, в каком месте экрана отобразить данный блок. Для этого существуют четыре
свойства:
left – указывает на сколько надо сместить блок относительно левого края окна;
– 43 –
right – указывает на сколько надо сместить блок относительно
правого края окна;
top – указывает на сколько надо сместить блок относительно
верхнего края окна;
bottom – указывает на сколько надо сместить блок относительно
нижнего края окна.
Пример. Блоки header, menu и footer позиционируются в нормальном потоке, поэтому свойство position для них задавать не надо.
Блок content нужно расположить в другом месте, поэтому для него
укажем свойство position:absolute и зададим смещение: от левого
края окна на ширину блока menu, т. е. на 190 пикселей, а от верхнего
края окна на высоту блока header, т. е. на 100 пикселей.
#header{
background:darkred;
width:715px;
height:100px;
}
#menu{
background:oldlace;
width:190px;
height:300px;
}
#content{
background:oldlace;
width:525px;
height:300px;
position:absolute;
left:190px;
top:100px;
}
#footer{
background:darkred;
width:715px;
height:30px;
}
– 44 –
body{
margin:0px;
}
Теперь наша страница в браузере выглядит так:
Добавим блок новостей на нашу страницу и разместим его в
блоке контента, например, вот так
Тогда в html-страницу, в div id="content" добавим div id="news":
<html>
<head>
<title>css potision</title>
– 45 –
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">шапка сайта</div>
<div id="menu">меню</div>
<div id="content">
контент
<divid="news">блок новостей</div>
</div>
<div id="footer">низ сайта</div>
</body>
</html>
Тогда в таблице стилей смещение мы будем указывать относительно блока content:
#news{
background:yellow;
width:150px;
height:280px;
position:absolute;
left:365px;
top:10px;
}
Ширина блока content равна 525 пикселей, а ширина блока news
– 150 пикселей. Значит, смещение от левого края равно (525–150)
375 пикселей, но, чтобы блок не прилипал к правому краю, мы
уменьшили смещение до 365 пикселей.
Аналогично рассчитываем смещение от верхнего края: высота
блока content равна 300 пикселей, а высота блока news – 280 пикселей. Значит смещение от верхнего края может быть не более (300–
280) 20 пикселей, мы сделали 10.
При абсолютном позиционировании, чтобы не запутаться с величинами смещения, определите сначала "родителя" и помните, что
смещение происходит относительно "родителя".
– 46 –
Относительное позиционирование
При относительном позиционировании блока надо задать свойство position:relative и свойства смещения. Смещение в этом случае
будет происходить не относительно "родительского" элемента, а относительно самого блока в нормальном потоке. Это будет понятнее
на примере. Пусть у нас есть html-страница с тремя div-ами:
<html>
<head>
<title>Относительное позиционирование</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="blok1">Блок 1</div>
<div id="blok2">Блок 2</div>
<div id="blok3">Блок 3</div>
</body>
</html>
Давайте зададим в таблице стилей размеры и границы этих блоков:
#blok1, #blok2, #blok3 {
border:1px solid red;
width:150px;
height:50px;
}
Сейчас наша страница в браузере выглядит так:
– 47 –
Теперь давайте изменим положение второго блока, для этого добавим в страницу стилей правило:
#blok1, #blok2, #blok3 {
border:1px solid red;
width:150px;
height:50px;
}
#blok2{
position:relative;
left:50px;
top:25px;
}
Теперь наша страница выглядит так:
Второй блок сместился вниз и вправо относительно того места,
где бы он находился в нормальном потоке. Остальные же блоки
остались на своих местах. Практически относительное позиционирование применяется достаточно редко.
Плавающие блоки
Эти блоки нельзя позиционировать с точностью до пикселя, как
в предыдущих схемах, но именно эта схема позиционирования очень
распространена. Без плавающих блоков обходится редкий сайт, а уж
сделать "резиновую" верстку сайта без них и вовсе невозможно.
Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помощью
параметра align.
– 48 –
Плавающие блоки определяются свойством float, который показывает, будет ли блок плавающим и в какую сторону он будет перемещаться. Возможны три варианта:
left – блок прижимается к левому краю, остальные элементы обтекают его с правой стороны.
right – блок прижимается к правому краю, остальные элементы
обтекают его с левой стороны.
none – блок не перемещается и позиционируется согласно свойству position.
Пример. Пусть у нас есть html-страница со следующим кодом:
<html>
<head>
<title>Позиционирование блоков</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="blok1">Текстблока 1</div>
Просто какие-то элементы на странице. Это может быть просто
текст, ссылки, списки, картинки и т. д.
</body>
</html>
И страница style.css со следующим кодом:
#blok1{
border:1px solid red;
width:150px;
height:50px;
}
Сейчас наша страница в браузере выглядит так:
– 49 –
Нужно сделать блок плавающим и прижать его к левому краю:
#blok1{
border:1px solid red;
width:150px;
height:50px;
float:left;
}
Теперь страница в браузере выглядит так:
Добавьте в html-страницу еще один блок:
<html>
<head>
<title>Позиционирование блоков</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="blok1">Текстблока 1</div>
<div id="blok2">Текст блока 2</div>
Просто какие-то элементы на странице. Это может быть просто
текст, ссылки, списки, картинки и т. д.
</body>
</html>
Задайте им разные значения свойства float:
#blok1{
border:1px solid red;
width:150px;
height:50px;
float:left;
– 50 –
}
#blok2{
border:1px solid red;
width:150px;
height:50px;
float:right;
}
Теперь страница в браузере выглядит так:
Если у них будут одинаковые значения right:
#blok1{
border:1px solid red;
width:150px;
height:50px;
float:right;
}
#blok2{
border:1px solid red;
width:150px;
height:50px;
float:right;
}
Обратите внимание: сначала к правому краю прижмется блок 1,
а уже к нему прижмется блок 2.
Свойство clear определяет, какие стороны плавающего блока не
могут соседствовать с другими плавающими блоками. У этого свойства может быть задано одно из четырех значений:
– 51 –
left – блок должен располагаться ниже всех левосторонних блоков;
right – блок должен располагаться ниже всех правосторонних
блоков;
both – блок должен располагаться ниже всех плавающих блоков;
none – никаких ограничений нет, это значение по умолчанию.
В последнем примере зададим это свойство для второго блока:
#blok1{
border:1px solid red;
width:150px;
height:50px;
float:right;
}
#blok2{
border:1px solid red;
width:150px;
height:50px;
float:right;
clear:right;
}
Получилось – один блок под другим:
Пример. Сделать такую страницу с помощью плавающих блоков:
– 52 –
Код самой страницы следующий:
<html>
<head>
<title>Позиционирование блоков</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">шапкасайта</div>
<div id="menu">меню</div>
<div id="content">
<div id="news">блокновостей</div>
контент
</div>
<div id="footer">низсайта</div>
</body>
</html>
На странице style.css задать размеры и фон для блоков. Сделать
блоки menu и content плавающими и левосторонними. А блок news
должен прижиматься к правому краю, т. е. является правосторонним
плавающим блоком:
#header{
background:darkred;
width:715px;
height:100px;
}
#menu{
background:oldlace;
width:190px;
height:300px;
float:left;
}
#content{
background:oldlace;
width:525px;
– 53 –
height:300px;
float:left;
}
#footer{
background:darkred;
width:715px;
height:30px;
}
#news{
background:yellow;
width:150px;
height:280px;
float:right;
margin:10px;
}
С помощью плавающих блоков верстать страницу проще: не
надо рассчитывать пиксели, да и код короче. При "резиновой" верстке нельзя указать точное расположение блока на экране, а с помощью плавающих блоков этого не нужно, достаточно указать лишь
ориентир (слева, справа, ниже или в той же линии).
Самостоятельная работа
Задание: Создать страницу сайта следующего типа:
– 54 –
№ варианта
1
2
3
4
5
6
7
8
9
10
Сайт
«Футбольная команда»
«Музыкальная группа»
«Расписание в кинотеатре»
«Визитка актера»
«Спортивная страничка»
«Автор любимых книг»
«Реклама фирмы»
«Отдых во Владикавказе»
«Турагентство»
«Моя группа»
– 55 –
Лабораторная работа 6
СТИЛИ ОБЛАСТЕЙ, ГРАНИЦ И СОДЕРЖИМОГО
div – этот элемент является контейнером для остальных. Элемент div отделяется от остальных элементов абзацными отступами.
Элемент span создает строчный блок.
Пример. Создайте html-страницу со следующим кодом:
<html>
<head>
<title>Заголовок документа</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="first">Этотекствтегах div с id="first".
</div>
<div id="second">
<div id="third">Этотекствтегах div с id="third".</div>
<div id="fourth">Этотекствтегах div с id="fourth".</div>
</div>
</body>
</html>
Посмотрите на страницу в браузере:
Это текст в тегах div c id=«first».
Это текст в тегах div c id=«third».
Это текст в тегах div c id=«fourth».
Содержимое тегов div располагается с абзацным отступом, т. е.
одно под другим.
Свойства блоков
Border (граница).
Границы в CSS можно задавать отдельно для каждой стороны:
border-top – верхняя граница,
border-right – правая границ,.
border-bottom – нижняя граница,
border-left – левая граница.
– 56 –
Каждый сегмент границы может иметь свои характеристики:
цвет, толщину и тип линии. Для этого к свойству границы через дефис необходимо дописать ключевые слова: color (для цвета), width
(для толщины) и style (для типа линии). Например, border-topcolor определяет цвет верхней границы, а border-left-style – тип линии для левой границы.
Если все четыре границы будут иметь одинаковые значения, то
следует воспользоваться сокращенной записью:
border-color – цвет всех границ,
border-width – толщина всех границ,
border-style – стиль всех границ.
Значениями свойства color могут быть именные цвета (red, blue и
т. д.), шестнадцатеричные коды цветов (типа #FFCCFF) и десятичные коды в модели RGB (типа rgb (255, 0, 0)).
Значениями свойства width могут быть ключевые слова: thin
(тонкая граница), medium (средняя граница) и thick (толстая граница). А также любая единица измерения.
Значениями свойства style могут быть следующие ключевые слова:
none – граница отсутствует,
dotted – граница состоит из точек,
dashed – граница в виде пунктирной линии,
solid – граница отображается сплошной линией,
double – граница отображается двойной сплошной линией,
groove – граница отображается вдавленной объемной линией,
ridge – граница отображается выпуклой объемной линией,
inset – граница отображается так, что весь блок выглядит вдавленным,
outset – граница отображается так, что весь блок выглядит выпуклым.
В браузере разные стили границ выглядят так:
– 57 –
Давайте зададим нашему первому div-у разные границы, чтобы
посмотреть, как это работает:
#first{
border-bottom-style:double;
border-bottom-color:red;
border-left-style:solid;
border-left-width:2px;
border-left-color:blue;
border-right-style:solid;
border-right-width:2px;
border-right-color:yellow;
border-top-style:dotted;
border-top-color:green;
}
Посмотрим на результат в браузере:
– 58 –
Иногда возможность задавать стили для разных секторов границы очень выручает, но чаще требуется задать единый стиль для всех
границ и тогда удобнее пользоваться сокращенной записью border, в
которой через пробел указываются: толщина, тип и цвет (именно в
таком порядке).
Давайте для всех элементов страницы зададим один стиль границ, чтобы было удобнее разбираться с отступами и полями далее:
#first, #second, #third, #fourth{
border: 1px solid red;
}
Сейчас, если посмотреть на нашу страницу в браузере, то мы
увидим наложение границ разных элементов друг на друга. Это происходит потому, что еще не заданы поля элементов.
Margin (поля)
Поля задают свободное пространство вокруг элемента. Как и
границы, поля в CSS можно определять отдельно для верхней, правой, нижней и левой сторон. Для этого используются свойства:
margin-top – ширина верхнего поля,
margin-right – ширина правого поля,
margin-bottom – ширина нижнего поля,
margin-left – ширина левого поля.
Чаще используется сокращенная запись margin, где через пробел
указываются ширина верхнего, правого, нижнего и левого полей.
Причем, именно в таком порядке. Пример записи:
p{
margin:5px 10px 15px 10px;
}
– 59 –
Если значения верхнего и нижнего полей совпадают, и значения
правого и левого полей совпадают, то сокращенная запись выглядит
еще короче:
p{
margin:5px 10px;
}
В данном случае ширина верхнего и нижнего полей будет 5 пикселей, а правого и левого – по 10 пикселей.
Если же у всех полей ширина одинакова, то сокращенная запись
выглядит так:
p{
margin:5px;
}
Значения полей можно задавать и в других единицах длины, и в
процентах. Также величина значения может иметь отрицательное
значение, что в некоторых случаях очень удобно использовать. Давайте для примера зададим всем элементам одинаковую ширину полей – в 10 пикселей:
#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
}
Теперь наша страница в браузере выглядит так:
Обратите внимание, текст в самих элементах прижат к границам,
чтобы это исправить, давайте зададим ему отступы.
– 60 –
Padding (отступы)
Отступы позволяют отделить содержимое блока от границы. Параметры отступов в CSS можно задать для каждой стороны отдельно, используя следующие свойства:
padding-top – ширина верхнего отступа,
padding-right – ширина правого отступа,
padding-bottom – ширина нижнего отступа,
padding-left – ширина левого отступа.
Значения свойств могут задаваться в различных единицах длины
или в процентах. Проценты вычисляются относительно ширины
блока. В качестве значения может выступать только положительная
величина. Как и с полями, чаще удобнее использовать сокращенную
запись, которая аналогична записи для полей.
Зададим для элементов страницы отступы: сверху и снизу – по
10 пикселей, а справа и слева – по 5 пикселей. Также зададим фон
нашим элементам, чтобы убедиться, что фон отступов совпадает с
фоном элемента, а фон полей – прозрачный.
#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
padding:10px 5px;
}
#first, #second{
background:yellow;
}
#third, #fourth{
background:pink;
}
– 61 –
Теперь страница в браузере выглядит так:
Теперь давайте зададим ширину и высоту наших блоков, например, так:
#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
padding:10px 5px;
}
#first{
background:yellow;
width:300px;
height:100px;
}
#second{
background:yellow;
width:300px;
}
#third, #fourth{
background:pink;
width:270px;
height:100px;
}
– 62 –
Теперь страница выглядит так:
Вообще, разное отображение свойства margin в разных браузерах держите в голове, так как при верстке сайта оно используется
обязательно, а вот отображаться может по-разному.
Самостоятельная работа
Задание. На сайте создать блоки с разными полями.
№ варианта
1
2
3
4
5
6
7
8
9
10
Сайт
«Футбольная команда»
«Музыкальная группа»
«Расписание в кинотеатре»
«Визитка актера»
«Спортивная страничка»
«Автор любимых книг»
«Реклама фирмы»
«Отдых во Владикавказе»
«Турагентство»
«Моя группа»
– 63 –
Лабораторная работа 7
СОЗДАНИЕ ВСПЛЫВАЮЩИХ МЕНЮ С ПОМОЩЬЮ CSS
Выпадающее меню служит в качестве обзора иерархии разделов,
которые содержатся в пункте меню, объединяющем их. Обычно в
меню перечисляются все подразделы определенной секции, если
навести указатель мыши на нее.
Выпадающее меню очень удобно, когда показывает все содержание всех секции, отображенных на сайте, и дает возможность перейти на любую страницу из любого места сайта.
Разметка
Большинство выпадающих меню основано на использовании
громоздкой разметки и Javascript. Наш вариант будет использовать
простую структуру HTML кода и 19 строк CSS, с небольшим вкраплением CSS3 для придания внешнего лоска.
01 <ul id="nav">
02 <li>
03
<a href="#" title="Вернуться на главную страницу">Главная</a>
04 </li>
05 <li>
06
<a href="#" title="Информация о компании">О нас</a>
07
<ul>
08
<li><a href="#">Продукты</a></li>
09
<li><a href="#">Команда</a></li>
10
</ul>
11 </li>
12 <li>
13
<a href="#" title="Что мы можем для вас сделать">Услуги</a>
14
<ul>
15
<li><a href="#">Услугаодин</a></li>
16
<li><a href="#">Услугадва</a></li>
17
<li><a href="#">Услугатри</a></li>
18
<li><a href="#">Услугачетыре</a></li>
– 64 –
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
</ul>
</li>
<li>
<a href="#" title="Наша продуктовая линейка">Продукты</a>
<ul>
<li><a href="#">Маленький продукт (первый)</a></li>
<li><a href="#">Маленький продукт (второй)</a></li>
<li><a href="#">Маленький продукт (третий)</a></li>
<li><a href="#">Маленький продукт (четвертый)</a></li>
<li><a href="#">Большой продукт (пятый)</a></li>
<li><a href="#">Большой продукт (шестой)</a></li>
<li><a href="#">Большой продукт (седьмой)</a></li>
<li><a href="#">Большой продукт (восьмой)</a></li>
<li><a href="#">Невообразимый продукт (девятый)</a></li>
<li><a href="#">Невообразимый продукт (десятый)</a></li>
<li><a href="#">Невообразимый
продукт
(одиннадца34
тый)</a></li>
35
</ul>
36 </li>
37 <li>
38
<a href="#" title="Как с нами связаться">Контакт</a>
39
<ul>
40
<li><a href="#">Часыработы</a></li>
41
<li><a href="#">Местоположение</a></li>
42
</ul>
43 </li>
44 </ul>
Разметка достаточно проста и представляет собой серию вложенных списков <ul>. Нет никаких ID, классов и элементов. Простой
ясный код.
Элемент #nav <ul> содержит серию элементов <li>. Все пункты,
которые нуждаются в выпадающих подпунктах, содержат другой
элемент <ul>. Обратите внимание, что элемент <ul> выпадающих
подпунктов не имеет класса. Мы используем каскадные стили, сохраняя разметку как можно более чистой.
– 65 –
CSS
Здесь происходит магия превращения - мы используем CSS для
трансформирования серии вложенных списков <ul> в отличное, простое в использовании и самодостаточное выпадающее меню.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*------------------------------------*\
НАВИГАЦИЯ
\*------------------------------------*/
#nav{
float:left;
width:100%;
list-style:none;
font-weight:bold;
margin-bottom:10px;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
display:block;
}
#nav li a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
25
-moz-border-radius:2px;
26
-webkit-border-radius:2px;
27
border-radius:2px;
– 66 –
28 }
29 #nav li a:hover{
30
color:#fff;
31
background:#6b0c36;
32
background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
33
text-decoration:underline;
34 }
35
36 /*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
37 #nav ul{
38
list-style:none;
39
position:absolute;
40
left:-9999px; /* Скрываем за экраном, когда не нужно (данный
метод лучше, чем display:none;) */
41
opacity:0; /* Устанавливаем начальное состояние прозрачности */
42
-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
43 }
44 #nav ul li{
45
padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
46
float:none;
47
background:url(dot.gif);
48 }
49 #nav ul a{
50
white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
51
display:block;
52 }
53 #nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
54
left:0; /* Приносим его обратно на экран, когда нужно */
– 67 –
55
opacity:1; /* Делаем непрозрачным */
56 }
57 #nav li:hover a{ /* Устанавливаем стили для верхнего уровня,
когда выводится выпадающий список */
58
background:#6b0c36;
59
background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
60
text-decoration:underline;
61 }
62 #nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня
при выводе выпадающего пункта */
63
text-decoration:none;
64
-webkit-transition:-webkit-transform 0.075s linear;
65 }
66 #nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
67
background:#333;
68
background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
69
text-decoration:underline;
70
-moz-transform:scale(1.05);
71
-webkit-transform:scale(1.05);
72 }
Первый раздел кода весьма простой – мы устанавливаем обычное горизонтальное меню. Но, обратите внимание, что селекторы #nav li и #nav li a выделяют все элементы списка и ссылки в выпадающих пунктах тоже.
Использование каскадов
Следует отметить использование position:relative; для элементов
списка. Таким образом, мы сможем использовать position:absolute;
для вложенных элементов <ul>.
Вложенные списки
– 68 –
1 #nav ul{
2
list-style:none;
3
position:absolute;
4
left:-9999px; /* Скрываем за экраном, когда не нужно (данный
метод, лучше чем display:none;) */
5
opacity:0; /* Устанавливаем начальное состояние прозрачности */
6
-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие
пункты будут проявляться */
7 }
В данном коде устанавливаются стили для вложенных <ul> в
пункт верхнего уровня. Очевидно, что нужно удалить метки пунктов
списка с помощью list-style:none;, и установить position:absolute; для
позиционирования выпадающих подпунктов под пунктом списка,
который их содержит.
Следующая строка гораздо более интересна. Обычно используется
свойство display:none; для того, чтобы скрыть выпадающий пункт, когда он не используется. Но так как большинство программ для чтения с
экрана игнорируют все, что имеет свойство display:none;, то использование такого метода очень нежелательно. Вместо этого мы используем
абсолютное позиционирование <ul> для помещения его в позицию –
9999px за пределами экрана, когда он не используется.
Затем следует свойство opacity:0;, для скрытия <ul>, и декларация для браузеров Webkit, для плавного вывода элемента <ul> при
наведении курсора мыши.
01 #nav ul li{
02
padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
03
float:none;
04
background:url(dot.gif);
05 }
06 #nav ul a{
– 69 –
07
08
09
10
11
12
13
white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
left:0; /* Приносим его обратно на экран, когда нужно */
opacity:1; /* Делаем непрозрачным */
}
Здесь мы устанавливаем стили по умолчанию для пунктов списка
и ссылок. Обратите внимание на свойство padding-top:1px; для элемента <li>. Так как все цвета устанавливаются для элементов <a>, то
установка отступа в 1px для элемента <li> сдвигает элемент <a>, и,
следовательно, цветную область от границы пункта списка. Таким образом, создается иллюзия, что пункты списка разделены. Интересно,
что IE не распознает шаблон <li> при наведении курсора мыши и закрывает выпадающий список. Для решения этой небольшой проблемы
добавляется прозрачное изображение gif 1 х 1 px.
Для элемента #nav ul a мы устанавливаем свойство whitespace:nowrap; для предотвращения переноса строк на другую строку.
Последняя часть кода выводит выпадающие подпункты, когда курсор мыши оказывается над соответствующим пунктом меню. Так как
псевдокласс:hover не работает в IE6, выпадающее меню не работает в
данном браузере. Проблему можно обойти множеством способов.
1 #nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
2
background:#6b0c36;
3
background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным
*/
4
text-decoration:underline;
5 }
#nav li:hover a определяет, что произойдет со ссылкой верхнего
уровня, когда наследник будет иметь состояние hover:
Выпадающий список <ul> расположен внутри элемента <li>.
– 70 –
Если навести курсор мыши на ссылку (<a>) в выпадающем списке
(<ul>), то одновременно пункт списка верхнего уровня (<li>) тоже будет иметь состояние hover, так как выделен контент внутри него.
Так как технически используется состояние hover для элемента
списка верхнего уровня, то #nav li:hover a действует, задавая стиля
для ссылки.
1 #nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня
при выводе выпадающего пункта */
2
text-decoration:none;
3
-webkit-transition:-webkit-transform 0.075s linear;
4 }
Здесь мы изменяем некоторые аспекты для состояния hover, чтобы выпадающие элементы отличались от ссылок верхнего уровня. В
данном уровне мы просто отключаем подчеркивание текста.
Также добавляется правило для браузеров Webkit -webkittransition:-webkit-transform 0,075s linear;, которое анимирует -webkittransform с помощью затухания/появления в течение 0,075 секунды.
1 #nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
2
background:#333;
3
background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
4
text-decoration:underline;
5
-moz-transform:scale(1.05);
6
-webkit-transform:scale(1.05);
7 }
В последней части определяются стили для выделения определенного пункта в выпадающем списке при наведении курсора мыши.
Вначале мы определяем два свойства background:
Определение background:rgba(51,51,51,0.75); устанавливает умеренно серый фон для пункта с прозрачностью 0,75.
Те браузеры, которые не распознают такое определение цвета
(например, IE) будут использовать определение цвета в старом стиле
в предыдущей строке.
– 71 –
Самостоятельная работа
Задание. Создать всплывающее меню.
№ варианта
1
2
3
4
5
6
7
8
9
10
Сайт
«Футбольная команда»
«Музыкальная группа»
«Расписание в кинотеатре»
«Визитка актера»
«Спортивная страничка»
«Автор любимых книг»
«Реклама фирмы»
«Отдых во Владикавказе»
«Турагентство»
«Моя группа»
– 72 –
Лабораторная работа 8
ВВЕДЕНИЕ В JAVASCRIPT
Давайте напишем нашу первую программу. Для этого сделаем
исключение и поместим наш javascript-код на html-странице. Итак,
откройте (или создайте) html-страницу и поместите в нее следующий
код:
<html>
<head>
<title>Заголовокдокумента</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript">
document.write("Мояперваястраница.");
</script>
</head>
<body>
</body>
</html>
Откройте эту страницу в браузере, она выглядит так:
Давайте разберемся, как это работает. Браузер читает нашу htmlстраницу, видит оператор для выполнения document.write("Моя первая страница."); и выполняет его. Рассмотрим из чего состоит сам
оператор (инструкция):
При интерпретации html-страницы браузер создает объекты
javascript. Они хранятся в виде иерархической структуры, отражая
структуру документа, например:
– 73 –
На самом верхнем уровне находится объект window, представляющий окно браузера и являющийся "родителем" всех остальных
объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document (текущая страница) может иметь дочерний объект form (форма) и т. д.
Все объекты имеют методы (отделяются от объекта точкой),
например:
document.write позволяет писать текст в текущую страницу,
window.open открывает новое окно браузера.
Также объекты имеют свойства, например:
document.bgcolor содержит значение фонового цвета текущей
страницы,
document.title содержит заголовок страницы.
Все инструкции программного кода заканчиваются точкой с запятой. Об этом надо помнить.
Сценарий, который мы написали, выполнился немедленно после загрузки страницы. Однако в большинстве случаев нам нужно, чтобы сценарий выполнялся после каких-либо действий пользователя: нажатия на
кнопку или ввода текста. Т. е. в ответ на пользовательское событие.
Для этого в тегах элементов страницы введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Например:
<div onClick="addText();"></div>
Здесь Click – событие (щелчок по div-у), onClick – обработчик
события, addText() – имя функции, которая сработает при возникновении этого события (щелчка по div-у).
– 74 –
События, которые поддерживаются javascript:
Событие
Когда происходит
потеря объектом фокуса
пользователь изменяет значение элемента
пользователь щелкает мыщью по объекту
пользователь делает двойной щелчок мышью
DblClick
по объекту
DragDrop пользователь перетаскивает мышью объект
Error
возникновение javascript-ошибки
Focus
окно или элемент формы получает фокус
KeyDown пользователь нажимает клавишу клавиатуры
пользователь удерживает нажатой клавишу
KeyPress
клавиатуры
KeyUp
пользователь отпускает клавишу клавиатуры
Load
документ загружается в браузер
MouseDown пользователь нажимает кнопку мыши
MouseOut указатель мыши выходит за пределы элемента
MouseOver указатель мыши помещается над элементом
MouseUp пользователь отпускает кнопку мыши
Move
пользователь перемещает окно
Reset
пользователь нажимает кнопку "reset" формы
пользователь изменяет размеры окна
Resize
или элемента
Select
пользователь выбирает элемент формы
Submit
пользователь нажимает кнопку "submit" формы
Unload
пользователь закрывает документ
Blur
Change
Click
Обработчик
события
onBlur
onChange
onClick
onDblClick
onDragDrop
onError
onFocus
onKeyDown
onKeyPress
onKeyUp
onLoad
onMouseDown
onMouseOut
onMouseOver
onMouseUp
onMove
onReset
onResize
onSelect
onSubmit
onUnload
Функция – это именованная последовательность операторов (инструкций). Любая функция имеет следующий синтаксис:
function имя (){
оператор;
.......
оператор;
}
– 75 –
Сначала идет ключевое слово function, затем имя функции, затем
в круглых скобках перечисляются параметры (если они есть), затем в
фигурных скобках перечисляются операторы, т. е. последовательность выполняемых действий. Каждый оператор заканчивается точкой с запятой.
Рассмотрим на примере. Поместим в html-страницу следующий код:
<html>
<head>
<title>Заголовокдокумента</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div onClick="showMessage();">Щелкнименя</div>
</body>
</html>
При щелчке пользователя по div-у (т. е. по словам "Щелкни меня") должна быть вызвана функция с именем "showMessage". Теперь
на странице script.js надо написать саму функцию "showMessage".
Открываем страницу script.js и пишем:
function showMessage(){
alert ("Вы щелкнули по div-у");
}
Функция "showMessage" будет выполнять одно действие – отображать окно предупреждений с текстом "Вы щелкнули по
div-у". alert – это стандартная функция javascript, которая и выводит
окно предупреждений, мы лишь задаем текст для этого окна.
В javascript есть стандартный набор функций, который можно
использовать (например, alert) и так называемые пользовательские
функции, т. е. те, которые мы создаем сами.
В html-странице мы привязываем к нужному элементу обработчик события (onClick, onMouseUp и т. д.), в качестве значения которого указываем имя функции, которая и должна сработать, когда
настанет событие.
– 76 –
На странице с расширение .js пишем код этой функции, т. е. инструкции, которые должны быть выполнены, если функция инициализирована (к ней обратились).
Пример. Напишем сценарий, который будет рассчитывать площадь прямоугольника по введенным пользователем длине и ширине.
Для этого сначала разместим на html-странице нужные элементы
формы:
<html>
<head>
<title>Расчет площади прямоугольника</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="forma1">
Введитедлинупрямоугольника<input
type="text"
name="t1"
size="10"><br><br>
Введитеширинупрямоугольника<input type="text" name="t2"
size="10"><br><br>
<input type="button" name="button" value="Вычислить"><br><br>
Площадьпрямоугольникаравна<input type="text" name="res"
size="10">
</form>
</body>
</html>
Итак, пользователь вводит значения ширины и длины и нажимает
на кнопку "Вычислить". После чего в поле площадь должен появиться
результат. Таким образом, событие наступает при нажатии на кнопку
"Вычислить", значит именно к ней мы и привяжем обработчик события.
Функцию вычисления площади назовем "areaRectangle":
.......
<input type="button" name="button" value="Вычислить"
onClick="areaRectangle();"><br><br>
.......
– 77 –
Теперь пришло время написать саму функцию "areaRectangle".
Для этого откроем страницу script.js и напишем заготовку для функции:
function areaRectangle(){
}
Теперь надо написать тело функции. Для начала объявим три
переменные: a – значение длины прямоугольника, b – значение ширины прямоугольника, s – площадь прямоугольника:
function areaRectangle(){
var a;
var b;
var s;
}
Значение (value) a должно браться из текущей страницы
(document), из формы с именем "forma1", из текстового поля с именем "t1". Так это и записывается document.forma1.t1.value, т. е. перечисляются через точку имена объектов от родительского до нужного.
Последним указывается необходимое свойство объекта (value).
Аналогично и для значения b - document.forma1.t2.value.
А переменная s – есть произведение a на b. Запишем это в тело
функции:
function areaRectangle(){
var a=document.forma1.t1.value;
var b=document.forma1.t2.value;
var s=a*b;
}
Осталось только написать инструкцию записи вычисленной
площади в текстовое поле с именем "res" нашей формы. Т. е. нам
надо, чтобы в текущую страницу, в форму с именем "forma1", в текстовое поле с именем "res", в качестве значения (value) было присвоено значение s. Так и запишем:
– 78 –
function areaRectangle(){
var a=document.forma1.t1.value;
var b=document.forma1.t2.value;
var s=a*b;
document.forma1.res.value=s;
}
Иными словами, мы сначала присвоили нашим переменным
a и b значения из формы, затем произвели необходимые расчеты, а
после этого присвоили некоторому элементу формы полученное значение s.
Самостоятельная работа
Задание 1. Найти сумму целых чисел от 1 до 100.
Задание 2. Найти сумму четных чисел от 0 до 100.
Задание 3. Решить систему из двух линейных уравнений методом
Крамера.
Задание 4. Создать простейший калькулятор.
Задание 5. Конструирование цвета фона.
– 79 –
Лабораторная работа 9
РАБОТА С МАССИВАМИ
Массив представляет собой набор элементов, доступ к которым
осуществляется по индексу. Создается массив с помощью оператора new и конструктора массива – функции Array.
Предположим, что требуется создать массив имен пользователей. Это можно сделать так:
var users = new Array("Artem", "Irina", "Sergey", "Boris");
Это выражение создает массив из 4 элементов (пользователей). Все
элементы массива, пронумерованы, начиная с нуля. Для получения значения элемента массива необходимо задать имя массива и в квадратных
скобках указать порядковый номер элемента (его индекс). Так, для получения доступа к первому элементу массива, можно написать так:
users[0]
Значения массива не обязательно задавать сразу. Можно, например, воспользоваться такой конструкцией:
var users = new Array(4);
Это выражение также создает массив из 4 элементов, но значения
элементов можно указать позже с помощью оператора присваивания:
users[0] = "Artem";
users[1] = "Irina";
users[2] = "Sergey";
users[3] = "Boris";
И, наконец, можно использовать конструктор без параметра:
var users = new Array();
В этом случае мы указываем, что создаваемая переменная users будет массивом, размер которого будет определяться автоматически по мере появления элементов.
Чтобы определить длину массива (т. е. сколько элементов в нем
находится) используется свойство length. Например, получить доступ к последнему элементу массива (если мы не знаем, сколько в
нем элементов) можно следующим образом:
users[users.length-1];
– 80 –
Т. е. сначала определяется длина массива (users.length), затем, из
длины вычитается 1 и полученное значение используется в качестве
индекса массива.
Пример. Предположим, мы хотим, чтобы при загрузке страницы
пользователь видел, какой сегодня день недели.
Код html-страницы будет следующим:
<html>
<head>
<title>javascript массивы</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="showDay();">
</body>
</html>
В данном случае мы будем использовать событие Load (документ загружается в браузер) и его обработчик - onload. Иными словами, наша функция showDay() должна сработать при загрузке документа.
Теперь напишем саму функцию showDay():
function showDay() {
var nDays=new Array("воскресенье", "понедельник", "вторник",
"среда", "четверг", "пятница","суббота");
var now=new Date();
var day=now.getDay();
var iDay=nDays[day];
var str="Сегодня – " + iDay;
document.write(str);
}
Рассмотрим подробнее. Сначала, мы создаем массив nDays из
семи элементов:
var nDays=new Array("воскресенье", "понедельник", "вторник",
"среда", "четверг", "пятница", "суббота");
– 81 –
Затем из текущей даты получаем текущий день недели (его числовой эквивалент):
var now=new Date();
var day=now.getDay();
и используем его в качестве индекса для обращения к элементу
массива:
var iDay=nDays[day];
Последние две строки формируют и отображают результат:
var str="Сегодня – " + iDay;
document.write(str);
Попробуйте работу сценария в действии и убедитесь, что при загрузке страницы, появляется фраза типа "Сегодня – пятница".
Два массива можно объединить в один с помощью метода concat(). Пусть у нас имеются два массива a и b и мы хотим их
объединить в один – c:
var a=new Array(1, 2, 3);
var b=new Array(4, 5, 6);
var c=a.concat(b);
На выходе получим массив c из шести элементов: 1, 2, 3, 4, 5, 6.
Массивы можно сортировать с помощью метода sort(), правда
только в лексикографическом порядке (т. е., как строки). Например,
если применить метод sort() к массиву с именами:
var users = new Array("Artem", "Irina", "Sergey", "Boris");
var c=users.sort();
то на выходе получим массив c: Artem, Boris, Irina, Sergey.
А если применить метод sort() к массиву с числами:
var n = new Array(11, 12, 10, 107, 3, 20, 25, 101, 14, 34, 44, 5, 4);
var c=n.sort();
то на выходе получим следующий массив:
10, 101, 107, 11, 12, 14, 20, 25, 3, 34, 4, 44, 5.
Т. е. элементы сравниваются как строки, а не как числа.
Теперь разберем на примере, как осуществить поиск заданного
элемента в массиве. Предположим, у нас есть массив из 6 имен, и мы
хотим узнать, есть ли в нем определенное имя.
– 82 –
Код html-страницы будет простой:
<html>
<head>
<title>javascript массивы</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="forma10">
Введитеимядляпроверки:
<input type="text" size="20" name="name">
<input type="button" value="Проверить"
on Click="proverka(forma10);">
</form>
</body>
</html>
Теперьнапишемсамуфункцию proverka() настраницеscript.js:
function proverka(obj) {
var k;
var users = new Array("Artem", "Irina", "Sergey", "Boris", "Olga",
"Viktor");
var n=obj.name.value;
for (var i=0; i<=users.length-1; i++){
if (users[i]==n)
{k=0; break}
}
if (k==0){alert("Это имя присутствует в массиве.")}
else {alert("Такого имени в массиве нет.")}
}
Здесь мы воспользовались алгоритмом, который называется линейный поиск, согласно которому все элементы массива
users сравниваются поочередно с образцом (с n, т. е. с именем, которое ввел пользователь). Если очередной элемент совпадает с образцом, то задача решена (цикл прерывается). Если же искомого имени
в массиве нет, то мы узнаем об этом, лишь просмотрев все элементы
массива.
– 83 –
Самостоятельная работа
Задание 1. Задан одномерный массив вещественных чисел.
Напишите сценарий, который определяет число положительных
элементов массива.
Задание 2. Задан одномерный массив вещественных чисел. Напишите сценарий, который определяет число отрицательных элементов.
Задание 3. Задан одномерный массив целых чисел. Напишите
сценарий, который определяет число минимальных элементов.
Задание 4. Задан одномерный массив целых чисел. Напишите
сценарий, который определяет число элементов, кратных 7.
Задание 5. Задан одномерный массив целых чисел. Напишите
сценарий, который определяет номер последнего минимального значения.
– 84 –
Лабораторная работа 10
СТРОКОВЫЕ ФУНКЦИИ JAVASCRIPT
Для начала определимся с некоторыми понятиями:
– Алфавит – конечное множество символов;
– Строка – конечная последовательность символов некоторого
алфавита;
– Пустая строка – строка, не содержащая ни одного символа.
Чтобы создать строковый объект можно воспользоваться конструктором newString. Например:
var s = newString("Итого:");
Если применить единственное свойство объекта String – length,
то мы узнаем длину строки.
Для нашего примера, результатом выполнения s.length будет
число 6.
Рассмотрим методы, влияющие на строку:
– charAt(n) – возвращает символ, позицию которого определяет
параметр n. Для нашего примера, результатом выполнения
s.charAt(0) будет буква "И";
– substr(n1,n2) – возвращает подстроку из строки, где n1 – позиция первого символа подстроки, а n2 – количество символов в строке. Для нашего примера, результатом выполнения s.substr(0, 4) будет
подстрока "Итог".
Для примера напишем сценарий, который будет определять,
сколько раз заданное слово встречается в определенном тексте.
Код html-страницы будет следующим:
<html>
<head>
<title>javascript строки</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="forma11">
– 85 –
Введите текст:<br>
<textarea name="textin" rows="4" cols="20"></textarea><hr>
Введите слово: <input type="text" size="10" name="slovo"><hr>
<input
type="button"
value="Определить"
onClick="numword(forma11);">
<input type="reset" value="Отменить"><hr>
Количество
name="res">
</form>
</body>
</html>
слов
в
тексте:
<input
type="text"
size="10"
Теперь напишем саму функцию numword() на странице script.js:
function numword(obj) {
var t=obj.textin.value;
var s=obj.slovo.value;
var m=s.length;
var res=0;
var i=0;
while (i < t.length-1)
{var ch=t.substr(i,m)
if (ch==s){
res+=1;
i=i+m
}
else
i++
}
obj.res.value=res
}
Посмотрим на результат, а затем разберем написанное:
Начало формы
Введите текст:
– 86 –
Введите слово:
Отменить
Количество слов в тексте:
Конец формы
Итак, посмотрим, что же мы написали в нашей функции.
Сначала мы определили две строковые переменные, одна является текстом, введенным пользователем, другая – словом.
var t=obj.textin.value;
var s=obj.slovo.value;
Затем мы определили длину искомого слова и обнулили переменную с результатом:
var m=s.length;
var res=0;
Далее с помощью цикла while, мы указали следующее: пока параметр цикла i меньше либо равен длине текста (один вычитаем, т. к.
нумерация символов начинается с нуля), брать подстроку, начиная с
текущего символа i и длинной, равной длине искомого слова, и сравнивать ее с самим искомым словом. Если результат истинен, то переменная res увеличивается на единицу, а цикл продолжает свою работу с символа, который следует за найденным словом (i=i+m-1). В
противном случае – со следующего символа:
var i=0;
while (i<=t.length-1)
{var ch=t.substr(i,m)
if (ch==s){
res+=1;
i=i+m-1
– 87 –
}
else
i++
}
Наконец, мы отображаем результат:
obj.res.value=res
В языке javascript определен ряд стандартных функций работы
со строками:
Number(s) – преобразует строковый параметр s в число;
String(n) – преобразует число n в строку;
isNaN(s) – проверяет, является ли параметр s числом. Если параметр s не является числом, то возвращает значение true (истина), в
противном случае – false (ложь).
Помните, когда в предыдущих уроках, мы брали числа, введенные пользователем, и умножали на 1. Таким образом, мы их из строки переводили в число. Например:
var a1=1*obj.a1.value;
То же самое мы могли бы записать, используя стандартную
функцию Number(s):
var a=obj.a1.value;
var a1=Number(a);
Самостоятельная работа
Задание 1. Подсчитать количество гласных букв во введенном
предложении.
Задание 2. Подсчитать количество слов во введенной строке,
найти длину максимального слова, минимального слова и среднюю
длину слов. Предусмотреть возможность присутствия в тексте нескольких пробелов и знаков препинания.
Задание 3. Определить, является ли введенная строка палиндромом (справа налево читается так же, как и слева направо).
Задание 4. Написать программу, позволяющую заменить во введенном тексте одно заданное словосочетание на другое. Привести
модификацию программы, позволяющую заменять не словосочета– 88 –
ния, а целиком предложения.
Задание 5. Написать программу определения корректности ввода
пользователем адреса электронной почты. Программа должна проверять следующие условия:
1. наличие символа «@»;
2. минимальный размер адреса – 6 символов (например, a@b.by);
3. слева от символа «@» должен быть как минимум один символ;
4. справа от символа «@» должна быть как минимум одна точка;
5. справа от последней точки должно быть как минимум 2 символа;
6. между символом «@» и следующей за ним точкой должен
быть как минимум один символ.
Программа должна выдавать сообщение с указанием соответствующей ошибки.
6. Создать библиотеку общеупотребительных строковых функций.
Написать функцию trim() удаления лишних пробелов из строки.
7. Создать библиотеку общеупотребительных строковых функций.
Написать функции left() и right() выборки определенного числа
символов из строки слева и справа.
8. Создать библиотеку общеупотребительных строковых функций.
Написать функцию titleCase(), позволяющую преобразовать фразу или предложение так, чтобы первая буква каждого слова была
представлена в верхнем регистре.
– 89 –
Литература
1. Бабушкин М., Коростелев В. Как правильно организовать свой
Web-сервер. М.: Мир Internet, 1997.
2. Вин Д. Искусство Web-дизайна. Самоучитель. СПб.: Питер, 2002.
3. Гончаров М. В., Шрайберг Я. Л. Создание собственных Web-страниц. Ч. 2. М.: ГПНТБ, 2001.
4. Гончаров А. HTML в примерах: Спецификация HTML 3.2. Примеры гипертекста. Обзор HTML-редакторов. СПб.: Питер, 1997.
5. Гото К., Котлер Э. Веб-редизайн: книга Келли Гото и Эмили
Котлер. 2 изд. СПб.: Символ-Плюс, 2007.
6. Габбасов Ю. Ф. Internet 2000. СПб.: БХВ-Петербург, 2000.
7. Дунаев В. Web-графика, нужные программы. СПб.: БХВ-СанктПетербург, 2006.
8. Дунаев В. JavaScript. СПб.: Питер, 2004. 394 с.
9. Дуванов А. А. Web-конструирование. HTML. СПб.: БХВПетербург, 2003.
10. Дубаков М. Создание Web-страниц: Искусство верстки. Минск:
ООО «Новое издание», 2004.
11. Дунаев В. Web-графика. БХВ-Петербург, 2006.
12. Дэниель А. М., Виргилио А. Ф. Производительность web-служб.
Анализ, оценка и планирование. СПб.: ООО «Диа Софт ЮП», 2003.
13. Едомский Ю. Е. Техника Web-дизайна для студента. СПб.: БХВПетербург, 2005.
14. Канн Л. и Логан Л. Мой узел Web / Пер. с англ. М.: Изд. отдел
«Русская Редакция», 1996.
15. Клоннингер К. Свежие стили Web-дизайна. М.: ДМК пресс,
2005.
16. Круг С. Веб-дизайн: книга Стива Круга, или не заставляйте меня
думать / Пер. с англ. СПб.: Символ-Плюс, 2005.
17. Кожемякин А. А. HTML и CSS в примерах. Создание webстраниц. М.: Альтекс–А, 2004.
18. Кирсанов Д. Веб-дизайн. СПб: Симбо, 2004.
19. Кон А. И. Секреты Internet. Ростов н/Д: Феникс, 2000.
20. Коцюбинский А. О., Грошев С. В. Современный самоучитель работы в Интернет. М.: Триумф, 1997.
21. МакВейд Д. Дизайн страниц. М.: Русская Редакция, 2006.
22. Microsoft Corp. Тестирование производительности Webприложений Microsoft .NET (с CD-ROM). М.: Русская Редакция, 2003.
– 90 –
23. Молли Хольцшлаг. 250 советов HTML и WEB-дизайна. М.: НТ
Пресс, 2006.
24. Печников В. Н. Создание Web-страниц и Web-сайтов. М.: Изд-во
«Триумф», 2006.
25. Смирнова И. Е. Начала web-дизайна. СПб.: БХВ-Петербург, 2003.
26. Смит К. Web-дизайн: Photoshop & Dreamweaver. 3 ключевых
этапа. М., 2004.
27. Уотролл Этан. Dreamweaver MX 2004. Трюки. СПб.: Питер, 2006.
28. Файола Э. Шрифты для печати и Web-дизайна. СПб., 2003.
29. Шерри Хатсон. Photoshop для Web-дизайна. М., КУДИЦ-Образ,
2006.
30. Якоб Нильсен. Веб-дизайн. СПб.: Симбо, 2004.
– 91 –
ОСНОВЫ WEB-ДИЗАЙНА
МЕТОДИЧЕСКИЕ УКАЗАНИЯ

к выполнению лабораторных работ
для студентов, обучающихся по направлению подготовки
230100.62 – «Информатика и вычислительная техника»
Составители: М. Х. Томаев, С. И. Чахоян
ВЛАДИКАВКАЗ 2015
– 92 –
Related documents
htmlx
htmlx
Download
advertisement