Вставка бегущей строки
Бегущая строка на сайте – это хороший способ привлечь внимание посетителя Вашего сайта к блоку, который имеет для вас особое значение.
Для создания бегущей строки используется тег:
<marquee>содержимое</marquee>
Атрибуты |
Описание назначения атрибута |
direcrion= left|right|top|down |
задает направление движения |
bgcolor=цвет |
задает цвет фона строки |
width=n, height=n |
задает ширину и высоту строки в пикселях или процентах (например, 50%) |
loop=n |
количество повторов |
scrollamount=n |
скорость движения |
scrolldelay=n |
задержка |
Фреймы
Окно браузера может быть разделено на фреймы, т.е. на области расположенные рядом друг с другом. В каждую из этих областей можно загружать свои html-страницы. Сколько будет таких областей и как они будут расположены зависит от двух параметров тега <frameset></frameset>:
rows - указывает разбить окно на горизонтальные области. Причем, сколько значений у этого параметра, столько и областей. В нашем примере rows="30%, 10%, 60%" , т.е. три горизонтальные области: ширина первой - 30% от ширины экрана, ширина второй - 10%, а третьей - 60%.
cols - указывает разбить окно на вертикальные области.
Внутри тегов <frameset></frameset> располагаются одиночные теги <frame>, причем их должно быть столько, сколько задано областей. Без параметров эти теги бесполезны. Атрибуты тегов <frame>:
src - определяет адрес той html-страницы или картинки, которая будет загружаться во фрейм;
name – имя фрейма.
Пример.
<html>
<head>
<title>Фреймы в html</title>
</head>
<frameset rows="30%, 10%, 60%" >
<frame src="top.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
Вид страницы в браузере.
Пример.
<html>
<head>
<title>Фреймы в html</title>
</head>
<frameset rows="30%, 70%" >
<frame src="top.html">
<frameset cols="50%, 50%" >
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</html>
Вид страницы в браузере.
Задание 1. Создать сайт на тему: “Город моей страны”, используя базовые возможности языка HTML. Сайт должен состоять из нескольких отдельных тематических страниц. Главная страница сайта имеет фреймовую структуру, вид которой выбирается в зависимости от варианта. Форматирование отдельных страниц сайта также определяется в зависимости от варианта.
Страницы сайта:
История (history.html)
География и климат (geography.html)
Население (people.html)
Административно-территориальное устройство (land.html)
Культура (culture.html)
Известные жители (fpeople.html)
Меню (menu.html)
Заставка (main.html)
Об авторе (author.html)
Главная (index.html)
Порядок выполнения задания 1
Скачать файлы, соответствующие вашему варианту в каталог лабораторная 9.
Вариант 1,8
Вариант 2,9
Вариант 3,10
Вариант 4,11
Вариант 5,12
Вариант 6,13
Вариант 7,14
Запустить стандартную программу Блокнот.
Создать структуру будущей страницы История (файл history.html) по образцу:
Заполнить страницу содержательной информацией, располагая ее между тегами <body>…</body>, используя файл текст. Применить форматирование к абзацам текста (по вариантам из таблицы 1). Создать небольшое оглавление внутри страницы. Также учесть форматирование (списки, выделение различными начертаниями и цветом, которые уже установлены в файле текст).
Например
Так выглядит данная страница в браузере.
Таблица 1 – Параметры форматирования текста
Вариант |
Формат стиля Заголовок 1 |
Формат основного текста |
1 |
тип шрифта – Bookman Old style, размер - 4, начертание - полужирное, выравнивание текста – по центру. |
тип шрифта – Bookman Old style, размер - 3, начертание - обычное, выравнивание текста – по ширине. |
2 |
тип шрифта - Verdana, размер - 4, начертание – полужирное курсивное, выравнивание текста – по левому краю. |
тип шрифта - Verdana, размер - 3, начертание - обычное, выравнивание текста – по ширине. |
3 |
тип шрифта - Courier, размер - 4, начертание – обычное подчеркнутое, выравнивание текста – по центру. |
тип шрифта - Courier, размер - 3, начертание - обычное, выравнивание текста – по ширине. |
4 |
тип шрифта – Comic Sans MS, размер - 3 , начертание – полужирное подчеркнутое, выравнивание текста – по центру. |
тип шрифта – Comic Sans MS, размер - 2, начертание - обычное, выравнивание текста – по ширине. |
5 |
тип шрифта – Bookman Old style, размер - 5, начертание - полужирное, выравнивание текста – по центру. |
тип шрифта – Bookman Old style, размер - 4, начертание - обычное, выравнивание текста – по ширине. |
6 |
тип шрифта - Verdana, размер - 4, начертание – подчеркнутое курсивное, выравнивание текста – по левому краю. |
тип шрифта - Verdana, размер - 3, начертание - обычное, выравнивание текста – по ширине. |
7 |
тип шрифта - Courier, размер - 4, начертание – полужирное, выравнивание текста – по центру. |
тип шрифта - Courier, размер - 3, начертание - обычное, выравнивание текста – по ширине. |
8 |
тип шрифта – Comic Sans MS, размер - 5 , начертание – полужирное подчеркнутое, выравнивание текста – по центру. |
тип шрифта – Comic Sans MS, размер - 4, начертание - обычное, выравнивание текста – по ширине. |
9 |
тип шрифта – Bookman Old style, размер - 5, начертание - полужирное, выравнивание текста – по центру. |
тип шрифта – Bookman Old style, размер - 4, начертание - обычное, выравнивание текста – по ширине. |
10 |
тип шрифта - Verdana, размер - 4, начертание – полужирный курсив, выравнивание текста – по правому краю. |
тип шрифта - Verdana, размер - 3, начертание - обычное, выравнивание текста – по ширине. |
11 |
тип шрифта - Courier, размер - 5, начертание – подчеркнутый, выравнивание текста – по центру. |
тип шрифта - Courier, размер - 4, начертание - обычное, выравнивание текста – по ширине. |
12 |
тип шрифта – Comic Sans MS, размер - 5 , начертание – полужирный подчеркнутый, выравнивание текста – по центру. |
тип шрифта – Comic Sans MS, размер - 4, начертание - обычное, выравнивание текста – по ширине. |
13 |
тип шрифта – Bookman Old style, размер - 5, начертание - подчеркнутый, выравнивание текста – по правому краю. |
тип шрифта – Bookman Old style, размер - 4, начертание - обычное, выравнивание текста – по ширине. |
14 |
тип шрифта - Verdana, размер - 5, начертание – подчеркнутый курсив, выравнивание текста – по правому краю. |
тип шрифта - Verdana, размер - 3, начертание - обычное, выравнивание текста – по ширине. |
Примечание!!!!!!!!!!!!!!!: все списки выравнивают по левому краю
Сохраните файл с именем history.html (обязательно указывать расширение в строке имени файла) в папку лабораторная 9.
Создать и заполнить страницу география и климат (файл geography.html), используя файл текст. Применить форматирование к абзацам текста (по вариантам из таблицы 1). Создать небольшое оглавление внутри страницы. Также учесть форматирование (списки, выделение различными начертаниями и цветом, которые уже установлены в файле текст). Так может выглядеть данная страница в браузере.
Сохраните файл с именем geography.html (обязательно указывать расширение в строке имени файла) в папку лабораторная 9.
Создать и заполнить страницу население (файл people.html), используя файл текст. Применить форматирование к абзацам текста (по вариантам из таблицы 1). Также учесть форматирование (списки, выделение различными начертаниями и цветом, которые уже установлены в файле текст). Так может выглядеть данная страница в браузере.
Сохраните файл с именем people.html (обязательно указывать расширение в строке имени файла) в папку лабораторная 9.
Создать и заполнить страницу административно-территориальное устройство (land.html), используя файл текст. Применить форматирование к абзацам текста (по вариантам из таблицы 1). Также учесть форматирование (списки, выделение различными начертаниями и цветом, которые уже установлены в файле текст). Так может выглядеть данная страница в браузере.
Сохраните файл с именем land.html (обязательно указывать расширение в строке имени файла) в папку лабораторная 9.
Создать и заполнить страницу культура (culture.html), используя файл текст. Применить форматирование к абзацам текста (по вариантам из таблицы 1). Создать небольшое оглавление внутри страницы. Также учесть форматирование (списки, выделение различными начертаниями и цветом, которые уже установлены в файле текст). Так может выглядеть данная страница в браузере.
Сохраните файл с именем culture.html (обязательно указывать расширение в строке имени файла) в папку лабораторная 9.
Создать и заполнить страницу известные жители (fpeople.html), используя файл текст. Применить форматирование к абзацам текста (по вариантам из таблицы 1). Так может выглядеть данная страница в браузере.
Сохраните файл с именем fpeople.html (обязательно указывать расширение в строке имени файла) в папку лабораторная 9.
Создать и заполнить страницу menu. html с гиперссылками для открытия остальных страниц сайта, которая в зависимости от варианта может иметь вид:
Вариант
Общий вид
1,3,5,7,9,11,13
2,4,6,8,10,12,14
Создать и заполнить страницу main. html. На ней разместить бегущую строку с названием города (формат подобрать самостоятельно) и рисунок с именем fon, размещенный по центру страницы и занимающий почти весь ее размер.
Создать и заполнить страницу author.html. На ней разместить фразу ”Сайт разработал Ф.И.О”. Формат фразы – выровнена по правому краю, текст выделен курсивом размером 8 пунктов.
Создать страницу index.html, имеющей фреймовую структуру, показанную ниже, выбираемую в зависимости от варианта.
Структура главной страницы (index.html)
Вариант |
Общий вид |
1,3,5,7,9,11,13 |
|
2,4,6,8,10,12,14 |
|
Примечание!!!!!!!!!!!!!!!!: для того, чтобы страницы сайта всегда открывались в одном и том же фрейме главной страницы для каждой гиперссылки в файле menu.html ввести следующее свойство target=”frame2”, а на странице index.html для фрейма куда выводится соответствующая информация ввести свойство name=”frame2”.
Откройте страницу index.html и покажите работу преподавателю.
Задание 2. Создать сайт на тему: “Город моей страны”, используя каскадные таблицы стилей языка HTML.