Биохимия спиртового брожения: Основу технологии получения пива составляет спиртовое брожение, - при котором сахар превращается...
Механическое удерживание земляных масс: Механическое удерживание земляных масс на склоне обеспечивают контрфорсными сооружениями различных конструкций...
Топ:
Проблема типологии научных революций: Глобальные научные революции и типы научной рациональности...
Установка замедленного коксования: Чем выше температура и ниже давление, тем место разрыва углеродной цепи всё больше смещается к её концу и значительно возрастает...
Интересное:
Искусственное повышение поверхности территории: Варианты искусственного повышения поверхности территории необходимо выбирать на основе анализа следующих характеристик защищаемой территории...
Лечение прогрессирующих форм рака: Одним из наиболее важных достижений экспериментальной химиотерапии опухолей, начатой в 60-х и реализованной в 70-х годах, является...
Мероприятия для защиты от морозного пучения грунтов: Инженерная защита от морозного (криогенного) пучения грунтов необходима для легких малоэтажных зданий и других сооружений...
Дисциплины:
 2017-06-29 |
 109 |
из
5.00
|
Заказать работу |
|
|
|
|
Цель: Научить создавать HTML-страницы с помощью фреймов и использования списков.
Краткие теоретические сведения
Фреймы
Фреймы используются для разбивки окна браузера на несколько частей, каждая из которых представляет собой отдельную страницу html. Используются для облегчения навигации по сайту. Мой совет - не используйте фреймов, так как не все браузеры отображают их корректно...
Фреймы задаются следующими элементами:
FRAMESET - определяет расположение фреймов на странице. Открывает и закрывает список фреймов, определяемых с помощью элемента FRAME. Между начальным и конечным тэгами кроме элементов FRAME и NOFRAME могут находиться другие элементы FRAMESET. То есть элемент FRAMESET поддерживает вложенные конструкции фреймов. Параметры: rows - определяет количество и размеры горизонтальных фреймов. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров: в процентах от высоты экрана, например "25%,35%,40%"; можно использовать "*" (звездочку), которая означает, что фрейм занимает все остальное место, например в данном примере "25%,35%,*", звездочка равна 40%; в пикселях - "135,56,*". Cols - определяет количество вертикальных фреймов и их размеры, все задается как и в параметре rows. Border - задается ширина рамок фреймов (работает только в NetscapeNavigator). Frameborder - определяет наличие рамок у содержащихся внутри frameset фреймов. Возможные значения: yes - отображать рамки, no - не отображать (не поддерживается Netscape). Framespacing - задает расстояние между фреймами в пикселях. Используется когда рамки не должны отображаться.
FRAME - определяет фрейм и его свойства внутри элемента frameset. Параметры: scr - определяет адрес (URL) файла, отображаемого в данном фрейме; name - определяет имя данного фрейма, которое будет использоваться для ссылки на него из других документов с помощью параметра target. Marginwidth/marginheight - определяется ширина/высота левого/правого или верхнего/нижнего полей фрейма; scrolling - определяет наличие полей прокрутки фрейма. Возможные значения: yes - отображать, no - не отображать, auto - отображать, если нужно. Noresize - не позволяет изменять размеры фрейма; frameborder - определяет наличие рамок у фрейма. Возможные значения: yes/no - отображать/ не отображать.
|
|
NOFRAMES - определяет, что будет отображать браузер, если он не поддерживает фреймы.
Пример:
это текст файла, задающего фреймы (frame1.html, frame2.html, frame3.html)<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="250,*">
<FRAME SRC="frame1.html" NAME="page">
<FRAMESET ROWS="150,*">
<FRAME SRC="frame2.html" NAME="menu1" MARGINWIDTH="0">
<FRAME SRC="frame3.html" NAME="menu2" MARGINWIDTH="0">
</FRAMESET>
<NOFRAMES>Ваш браузер не поддерживает фреймы</NOFRAMES>
</FRAMESET>
<BODY></BODY>
Списки
Списки (list) были добавлены в HTML, несомненно, под влиянием успеха текстовых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его пунктов: эту задачу берет на себя программа. Если список добавляется новыми пунктами или укорачивается, нумерации корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружочки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый, «фирменный вид». Теги для создания списков можно условно разделить на две группы: одни определяют общий вид списка (и позволяют использовать атрибуты), а другие задают его внутреннюю структуру. Существует несколько разновидностей списков.
<UL><LI></ul>
Самый простой ненумерованный список (unordered list). Его шаблон представлен ниже:
<UL>
<LI> Пункт 1 списка
<LI> Пункт 2 списка
<LI> Пункт 3 списка
|
|
</ul>
Элемент UL является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Элемент LI обозначает каждый из пунктов. Вид ненумерованного списка показан на рис. 2.1.
| Пункт 1 списка Пункт 2 списка Пункт 3 списка |
Рис.2.1. Ненумерованный список.
<OL><LI></ol>
Структура нумерованного списка похожа на предыдущую:
<OL type=’’I’’>
<LI> Пункт 1
<LI> Пункт 2
<LI> Пункт 3
<LI> Пункт 4
</ol>
Нумерованный список использует другой внешний тег: OL. В этом случае каждый пункт нумеруется элементом упорядоченной последовательности: арабскими или римскими числами, буквами латинского алфавита. На рис. 2.2. показан пример списка, соответствующего приведенному выше листингу.
| I. Пункт 1 II. Пункт 2 III. Пункт 3 IV. Пункт 4 |
Рис. 2.2. Нумерованный список.
Способ нумерации задается при помощи атрибута type. В табл. 2.1. приведены все способы нумерации.
Табл. 2.1. Значение атрибута type
| Атрибут | Последовательность нумерации |
| type=’’1’’ | 1, 2, 3, 4,... |
| type=’’i’’ | i, ii, iii, iv,... |
| type=’’I’’ | I, II, III, IV,... |
| type=’’a’’ | a, b, c, d,... |
| type=’’A’’ | A, B, C, D,... |
Списки с определениями (definition lists) создаются при помощи тегов трех видов:
<DL>
<DT> Пункт 1
<DD> Определение пункта 1
<DD> Другое определение пункта 1
<DT> Пункт 2
<DD> Определение пункта 2
<DT> Пункт 3
<DD> Определение пункта 3
</dl>
Наглядное представление о списке с определениями дает рис. 2.3. Каждый пункт списка может быть дополнен одним или несколькими блоками текста при помощи тега (тегов) DD. Каждый блок автоматически размещается с новой строки. Термин «определение» носит условный характер. Абзацы, размещенные в списке, могут быть определениями, дополнениями, разъяснениями пунктов. По сути, пункт представляет собой заголовок, а определение - произвольный текст под заголовком.
| Пункт 1 Определение пункта 1 Другое определение пункта 1 Пункт 2 Определение пункта 2 Пункт 3 Определение пункта 3 |
Рис.2.3. Список с определениями
Практическое задание.
1.Создать страницу ссылок на ресурсы сети, обязательно с использованием фреймов.
2.Разбить всю страницу на 4 фрейма – 2 по горизонтали и 2 по вертикали.
3.В левом верхнем фрейме создать меню, состоящее из следующих ссылок:
- Поисковые системы;
- Каталоги;
- Литература.
|
|
4.В правом верхнем фрейме разместить какой-нибудь логотип, картинку.
5.В левом нижнем фрейме выводить ссылки из левого верхнего фрейма.
- Для поисковой системы – ссылки www.yandex.ru, www.google.ru, www.aport.ru, www.rambler.ru, www.filesearsh.ru оформить в виде ненумерованного списка;
- Для каталогов – ссылки www.list.ru, www.catalog.ru, www.rambler.ru, www.filesearsh.ru оформить в виде нумерованного списка;
- Для литературы – все ссылки оформить как списки с определениями, то есть разложить по рубрикам библиотека (www.lib.ru, www.aldebaran.ru), развлечение – игры, музыка, клипы и тд. (www.games.ru, www.partypoker.com.ru, www.mp3real.ru, www.zaycev.net, www.delit.net, www.mp3.uz), техническая литература (www.citforum.ru, www.intuit.ru, www.kurs-lab.ru).
Все поисковые системы выводить с их логотипом.
6.В правом нижнем фрейме отображать непосредственно содержание ссылок из левого нижнего фрейма, то есть загружать сами сайты.
Контрольные вопросы.
1.Какими тегами задаются фреймы?
2.Для чего были добавлены списки в HTML?
3.Какие бывают списки?
Подготовка отчета по практическому заданию.
Отчет должен состоять из следующих пунктов:
1. Краткие теоретические сведения.
2. Индивидуальное практическое задание, метод его выполнения, текст кода программы и полученные результаты.
3. Краткое заключение.
Пример выполнения 2-го практического задания: Изучение возможностей языка HTML – фреймы и списки.
HTML код:
Index.htm
<HTML>
<HEAD>
<META NAME="Content-Language" CONTENT="ru">
<TITLE>Практическое задание №2 - Использование фреймов, списков</title>
</head>
<FRAMESET cols="25%,*" FRAMEBORDER="2" и BORDER="5">
<FRAMESET rows=20%,*" FRAMEBORDER="3" и BORDER="5">
<frame name="toc" src="Frame1.htm" SCROLLING="Auto" NORESIZE>
<frame name="menu2" src="Frame4.htm" SCROLLING="Auto" NORESIZE>
</frameset>
<FRAMESET rows=20%,*" FRAMEBORDER="3" и BORDER="5">
<frame name="logo" src="Frame3.htm" SCROLLING="Auto" NORESIZE>
<frame name="main" src="Frame2.htm" SCROLLING="Yes" NORESIZE>
</frameset></frameset><noframes>
<p>Ваш браузер не поддерживает фреймы, пожалуйста, обновите его.</p></noframes>
</html>
Frame1.htm
<HTML>
<HEAD>
<TITLE>Frame1</title>
</head>
<BODY bgcolor="c0e0e0">
<UL>
<LI><A HREF="Find.htm" target="menu2">Поисковые системы</a>
<LI><A HREF="Catalogs.htm" target="menu2">Каталоги</a>
|
|
<LI><A HREF="Literature.htm" target="menu2">Литература</a>
</ul>
</body>
</html>
Frame2.htm
<HTML>
<HEAD>
<TITLE>Frame2</title>
</head>
<BODY bgcolor="d0e0e0">
<H2><CENTER>Добро пожаловать на сайт</center></h2>
</body>
</html>
Frame3.htm
<HTML>
<HEAD>
<TITLE>Frame3</title>
</head>
<BODY bgcolor="d0e0e0">
<IMG SRC="Mts2.gif" width="138" height="86" align="right">
</body>
</html>
Frame4.htm
<HTML>
<HEAD>
<TITLE>Frame4</title>
</head>
<BODY bgcolor="c0e0e0">
</body>
</html>
Find.htm
<HTML>
<HEAD>
<TITLE>Find</title>
</head>
<BODY bgcolor="d0e0e0">
<IMG SRC="logo_yandex.gif" width="50">
<A HREF="http://www.yandex.ru" target="main">www.yandex.ru</a><BR>
<IMG SRC="logo_rambler.gif"width="50">
<A HREF="http://www.rambler.ru" target="main">www.rambler.ru</a><BR>
<IMG SRC="logo_aport.gif"width="50">
<A HREF="http://www.aport.ru" target="main">www.aport.ru</a><BR>
<IMG SRC="logo_google.gif"width="25"><IMG SRC="logo_google2.gif" width="10">
<IMG SRC="logo_google3.gif" width="15">
<A HREF="http://www.google.ru" target="main">www.google.ru</a><BR>
<IMG SRC="logo_filesearch.gif"width="50">
<A HREF="http://www.filesearch.ru" target="main">www.filesearch.ru</a><BR>
</body>
</html>
Catalogs.htm
<HTML>
<HEAD>
<TITLE>Catalogs</title>
</head>
<BODY bgcolor="d0e0e0">
<OL type="1">
<LI><A HREF="http://www.yandex.ru" target="main">www.yandex.ru</a>
<LI><A HREF="http://www.rambler.ru" target="main">www.rambler.ru</a>
<LI><A HREF="http://www.aport.ru" target="main">www.aport.ru</a>
<LI><A HREF="http://www.google.ru" target="main">www.google.ru</a>
<LI><A HREF="http://www.filesearch.ru" target="main">www.filesearch.ru</a>
</ol>
</body>
</html>
Literature.htm
<HTML>
<HEAD>
<TITLE>Literature</title>
</head>
<BODY bgcolor="d0e0e0">
<DL>
<DT><B><BIG>Библиотеки</big></b>
<DD><A HREF="http://www.lib.ru" target="main">www.lib.ru</a>
<DD><A HREF="http://www.aldebaran.ru" target="main">www.aldebaran.ru</a>
</dt>
<DT><B><BIG>Развлечение - игры, музыка, клипы и тд.</big></b>
<DD><A HREF="http://www.games.ru" target="main">www.games.ru</a>
<DD><A HREF="http://www.partypoker.com.ru" target="main">www.partypoker.com.ru</a>
<DD><A HREF="http://www.mp3real.ru" target="main">www.mp3real.ru</a>
<DD><A HREF="http://www.zaycev.net" target="main">www.zaycev.net</a>
<DD><A HREF="http://www.delit.net" target="main">www.delit.net</a>
<DD><A HREF="http://www.mp3.uz" target="main">www.mp3.uz</a>
</dt>
<DT><B><BIG>Техническая литература</big></b>
<DD><A HREF="http://www.citforum.ru" target="main">www.citforum.ru</a>
<DD><A HREF="http://www.intuit.ru" target="main">www.intuit.ru</a>
<DD><A HREF="http://www.kurs-lab.ru" target="main">www.kurs-lab.ru</a>
</dt>
</dl>
</body>
</html>
Рис 2.4. Результат выполнения 2-го практического задания.
|
|
|
|
|
Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰)...
Состав сооружений: решетки и песколовки: Решетки – это первое устройство в схеме очистных сооружений. Они представляют...
Эмиссия газов от очистных сооружений канализации: В последние годы внимание мирового сообщества сосредоточено на экологических проблемах...
Своеобразие русской архитектуры: Основной материал – дерево – быстрота постройки, но недолговечность и необходимость деления...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!