Лабораторная работа №9 Управление объектами формы и создание скриптов
Цель работы: изучить теги управления объектами формы и создание скриптов.
Ход работы:
1. Создаём документ с именем index.html и вставляем туда основную часть документа:
<html> <head> </head> <body> </body> </html>
2. В головной части задаём заголовок страницы и конструкцию использования каскадных таблиц, которые мы расположим в документе main.css.
<div></div> используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать - перемещать, включать/выключать, создавать слои, регулировать отступы и т.п.
В браузеронезависимой вёрстке обычно используется для выравнивания блока html-кода в окне браузера.
Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф.
Рис.1 «Элемент div»
На рисунке видно, что ссылка на картинку и подпись к ней расположены в <div> и расположены по центру.
3. Текст заключаем в параграф <p></p>. Для пробелов используем специальный символ « ». Для перехода на другую строку необходимо ставить в том месте <br>. Также для использования css для разных элементов документа нужно задавать им имена, например см.Рис.2.
Рис.2 «Имя элемента»
Имя задаётся при помощи конструкции id=”имя”, заключённой в скобках элемента <>.
4. Для вставки картинки используется конструкция
<img src="адрес/имя.расширение">.
Если же требуется, чтобы при нажатии картинка открывалась отдельно в новом окне, то мы используем следующую конструкцию (Рис.3).
5. JavaScript — это язык программирования, предназначенный прежде всего для создания интерактивных HTML-страниц.
Рис.3 «Текст программы»
Текст программы заключен между тегами <SCRIPT> и </SCRIPT>.
Программа состоит из одной функции click_func(), которая, в свою очередь вызывает стандартную функцию write объекта document. Эта функция выводит на экран текст, передаваемый в качестве параметра и стирает все, что содержалось на странице до ее вызова.
Объект document создается браузером в момент загрузки страницы.
Рис.4 «Вставка кнопки»
Функция активизируется по событию onClick — нажатие на кнопку. Результатом выполнения программы является вывод на экран окна предупреждения с заданным текстом.
Рис.5 «Кнопка»
Рис.6 «Действие кнопки»
6. Мы можем заменить изображение динамически, используя JavaScript.
Рис.7 «Текст программы»
Данной программой при наведении мыши на изображение 2.jpg, картинка будет меняться на 1.jpg, и наоборот, при удалении указателя мыши с поверхности изображения, оно вернётся в прежнее состояние.
Рис.8 «2.jpg и 1.jpg»
Рис.9 «Форма ввода логина и пароля»
Рис.10 «Элементы формы»
7. Итоговый вид страницы:
Рис.11 «Итоговый вид страницы»
Лабораторная работа №10 Использование JavaScript совместно с фреймами.
Цели работы: изучить заполнение фреймов с помощью скриптов.
Ход работы:
1. Создаём документ с именем index.html и вставляем туда основную часть документа
<html> <head> <title> </title> </head>
<frameset></frameset> </html>
Заметим, что фрейм-документ не содержит тэга body.
2. В теге <head></head> задаём заголовок страницы и конструкцию использования каскадных таблиц, которые мы расположим в документе main.css.
3. Для данного документа мы зададим следующее расположение фреймов:
4. Разбиваем окно на два ряда и второй ряд – на две колонки:
<frameset bordercolor=#000000 cols="170,*">
<frameset rows="168,*">
<frame noresize src="1.html" name="logo">
<frame noresize src="menu.html" name="menu">
</frameset>
<frame noresize src="content.html" name="main">
</frameset>
5. Можно настроить полосы прокрутки. Scrolling - атрибут тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.
Scrolling="auto", можно не прописывать, т.к. если атрибут scrolling не задан, то полоса прокрутки появится, если она нужна, а если нет - ее не будет.
6. При помощи атрибута noresize для тэга <frame> можно запретить изменять размеры фрейма.
Также можно избавиться от рамок между фреймами. Для этого мы используем параметр border, то есть border="0.
7. Параметр name задает уникальное имя для фрейма (в нашем случае для того, который содержит документ content.html).
Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target="имя_фрейма"). Введем атрибут target в документе со ссылками - menu.html
Рис.1 «Код index.html»
8. Теги <div></div> используется для логического выделения блока HTML-документа. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать - перемещать, включать/выключать, создавать слои, регулировать отступы и т.п.
Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф.
Рис.2 «Элемент div»
Текст заключаем в параграф <p></p>. Для пробелов используем специальный символ « ». Для перехода на другую строку необходимо ставить в том месте <br>. Также для использования css для разных элементов документа нужно задавать им имена, например см. Рис.3. Здесь имя задаётся в конструкции id=”имя”, заключённой в скобках элемента <>.
Рис.3 «Имя элемента»
9. Для вставки изображения пишем
<img src="адрес/имя.расширение">.
Если же требуется, чтобы при нажатии картинка открывалась отдельно в новом окне, то мы используем следующую выделенную конструкцию (Рис.4).
Рис.4 «Ссылка на картинку»
10. Для данной страницы был использован полупрозрачный фон, который задавался в каскадных таблицах при помощи background-color , отступ текста от левого и правого края на 10 пикселов (рис.5).
Рис.5 «Параметры тегов»
На рисунке видно, что прозрачность фона div1 равна 0,95.
Рис.6 «Вид главной страницы»