Сохраните эту страницу под именем “index.html”в папку, где находятся все файлы и папки данной лабораторной работы

Система Интернет

Лабораторная работа №3

Часть 1.

Тема: Создание сайта - «Великие полководцы войны» в виде фреймов.

Настоящий веб-узел создан с помощью фреймов. Стиль всех страниц определен каскадной таблицей стилей.

Фрейм — это область окна браузера, отображающая HTML-документ независимо от того, что отображается в остальном окне браузера. Фреймы позволяют разделить окно браузера на множество частей, в каждой из которых будет отображаться отдельный HTML-документ. Чаще всего в одном фрейме отображается документ с элементами управления навигацией, а в другом — документ с содержимым.

Набор фреймов — это HTML-файл, определяющий макет и такие свойства набора фреймов, как число фреймов, их размер и положение, а также URL-адрес страницы, отображаемой в каждом фрейме. В самом файле набора фреймов нет HTML-содержимого, отображаемого в браузере, за исключением раздела noframes. Файл набора фреймов просто предоставляет браузеру информацию о том, как должен выглядеть набор фреймов и какие документы должны в них отображаться.

Файл набора фреймов для сайта обычно имеет имя «index.html», и, таким образом, он отображается по умолчанию, если посетитель не указывает имя файла.

Фрейм не является файлом. Можно подумать, что документ, отображаемый во фрейме — это его непосредственная часть, но на самом деле документ не является частью фрейма. Фрейм представляет собой контейнер, содержащий документ.

Сайт, отображаемый в браузере как одна страница, содержащая три фрейма, на самом деле состоит по крайней мере из четырех HTML-документов: файла набора фреймов и трех документов, в которых находится содержимое, непосредственно отображаемое во фреймах. При разработке страницы в Dreamweaver с использованием набора фреймов необходимо сохранить каждый из четырех файлов, чтобы обеспечить правильную работу страницы в браузере.

Каскадные таблицы стилей (CSS -Cascading Style Sheets) — это набор правил форматирования, определяющих отображение содержимого на веб-странице. При форматировании страницы с помощью стилей CSS собственно содержимое страницы разделяется с представлением содержимого. Содержимое страницы (HTML-код) располагается в HTML-файле, а правила CSS, определяющие представление кода, располагаются в другом файле (внешней таблице стилей) или в другой части HTML-документа (обычно в заголовке). Разделение содержимого и его представления значительно облегчает управление внешним видом сайта из единого центра. При необходимости внести изменение не нужно обновлять каждое свойство на каждой странице. Разделение содержимого и его представления также делает HTML-код более простым и аккуратным. Это значительно сокращает время загрузки страницы браузером и облегчает навигацию для посетителей, использующих специальные возможности (например, для тех, кто использует программы для чтения с экрана).

CSS позволяет очень гибко контролировать точный внешний вид страницы. С помощью CSS задаются свойства текста, в том числе специальные шрифты, размеры шрифтов, жирный текст, курсив, подчеркивание, тени, цвет текста и фона, цвет ссылок, подчеркивание ссылок и многие другие. Использование CSS для управления шрифтами обеспечивает единообразное представление макета и внешнего вида страницы в разных браузерах.

Каскадные таблицы стилей также могут использоваться для форматирования и расположения блоков на веб-странице. Например, теги h1, p и Div отделяют блоки веб-страницы. Для блоковых элементов можно задавать поля и границы, определять их местоположение, добавлять цвет фона, задавать свойства обтекания текста и т.д.. Управление блоками — это основополагающий момент макетирования страницы с помощью CSS.

Для нашего веб-узла, состоящего из нескольких страниц стиль страниц определим в отдельном css-файле - our_style.css(этот файл уже создан и находится в папке, содержащей данную лабораторную работу).

Для использования стилей, содержащихся в файле our_style.css, на данной странице нужно создать ссылку на our_style.css. Для этого нужно нажать на правую кнопку мыши, и в открывающемся меню выбрать вкладку Стили CSS=>Присоединить таблицу стилей.При этом следующей ссылкой файл our_style.css присоединится к вашей странице:

<link href="our_style.css" rel="stylesheet" type="text/css" />.

Ознакомьтесь с файломour_style.css.

Создание набора фреймов.

1.1. Итак, загружаем программу Dreamweaver. В ней создаем новый файл и в созданной странице находим строку

В конце строки выражение после “charset =” меняем на “windows-1251”. Таким образом вы должны получить:

Сохраните эту страницу под именем “index.html”в папку, где находятся все файлы и папки данной лабораторной работы.

1.3. Сделайте 3 копии этого файла в папке, где находится данная лабораторная работа,и назовите их соответственно как “verh.html”, “levaya.html”и“prav1.html”. Откройте все четыре файла в Dreamweaver.

1.4. А теперь создайте главную страницу в виде фрейма. Для этого откройте файл “index.html” и удалите теги <body> и </body>.Вместо этих тегов после тега</head>добавьтеследующий текст (можете скопировать этот фрагмент):

<frameset rows="156,*" border="1" >

<frame src="verh.html" scrolling="NO" noresize >

<frameset cols="220,*" border="0">

<frame src="levaya.html" bordercolor="#FF0000" frameborder="0" >

<frame src="prav.html" bordercolor="#FF0000" frameborder="0" name="okno">

</frameset>

<noframes></noframes>

Если программа Dreamweaverсоздала файл с расширениемhtm,а неhtml,то в вышеуказанном фрагменте названия файлов также должны иметь расширениеhtm.

Приведенный фрагмент разбивает экран сперва на два горизонтальные фрейма (на две строки), а потом нижнюю часть делит еще на два фрейма (на два столбца). В нижнем окне видны границы этих фреймов. Если в нижнем окне (Дизайн) нажать на какую-ту часть (их всего три), то в списке названий файлов Вы увидите соответствующее название файла. Попробуйте!

А чтобы в списке названий файлов увидеть название index.html, т.е. название главного файла, Вам нужно в нижнем окне, в окне Дизайн,нажать на границу фреймов. (Нажать на левую кнопку тогда, когда курсор превращается в двунаправленную стрелку ).

Найдите строку <title>Untitled Document</title>. Вместо текста “Untitled Document” наберите название страницы (не путайте с названием файла!) “Великие полководцы войны”.

Сохраните страницу и результат покажите преподавателю. Если у вас главная страница index.html создана правильно, то закройте его.

Часть 2.

В этой части мы создаем заголовок нашего сайта – файл “verh.html”.

2.1. Oткройте файл “verh.html”. Следующей ссылкой файл our_style.css присоедините к этой странице:

<link href=" our_style.css " rel="stylesheet" type="text/css" />

Создайте таблицу из двух столбцов и одной строки.

Для таблицы выберите следующие параметры:

Строки– 1, число строк; Столбцы– 2, число столбцов;

Ширина таблицы – 100%, ширина таблицы (в процентах от экрана);

Поля ячеек – 0, расстояние от объекта (то, что внутри ячейки) до ее границы;

Интервал ячеек – 0, расстояние между ячейками.

Толщина таблицы – 0, толщина рамки.

Для первой ячейки задайте следующие параметры: width="253" height="156". Для этого в теге <td>, отвечающем за первую ячейку нажмите на пробел, и в раскрывающемся меню установите параметры width="253" height="156". В качестве фона для первой ячейки используйте файл “ris1.gif”, а для второй – “poloska.gif” из папки “top”.

Посмотрите результат в нижнем окне.

2.2.В первую ячейку вставьте баннер “prep.gif” из папки “top”, созданный преподавателем. Напомним, что баннер – это графический файл и ставиться с помощью вкладки “Вставка=>Изображение” между тегами <td>….</td> данной ячейки. Используя теги <pre>….</pre>, расположите этот рисунок в центре ячейки. Обратите внимание на его текст, и в конце лаб. работы этот баннер поменяйте на свой. Тег <pre> пишется перед фрагментом <img src="top/prep.gif">,а тег</pre> - после.

2.3. А теперь во вторую ячейку таблицы вставьте таблицу из трех строк и одного столбца со следующими параметрами:

Строки– 3, число строк; Столбцы– 1, число столбцов;

Ширина таблицы – 98%, ширина таблицы (в процентах от экрана);

Поля ячеек – 0, расстояние от объекта (то, что внутри ячейки) до ее границы;

Интервал ячеек – 0, расстояние между ячейками.

Толщина таблицы – 0, толщина рамки.

Прижмите эту таблицу к верхней границе второй ячейки первой таблицы (с помощью атрибута valign="top").

2.4. В нижнем окне мышью выделите эту новую таблицу. На панели Свойства в меню Выровнять выберите По центру, т.е. центрируйте таблицу относительно ячейки (Если у Вас не получится, то сделайте эту процедуру вручную, добавив после width="98%" выражение align="center").

2.5. В первую строку вставьте рисунок “polk.gif” из папки “top” со следующими параметрами:

width="490" height="50". За ним добавьте горизонтальную линию:

<hr size="5" color="#0000FF" width="100%">.

2.6. Во вторую ячейку вставьте бегущую строку со следующими параметрами (скопируйте этот фрагмент и поставьте во вторую ячейку):

<marquee width="100%" hspace="2" vspace="2" align="top" direction="left"

loop="infinity" behivior="scroll" scrollamount="5" scrolldelay="130">

<strong>Общие потери СССР за годы Великой Отечественной Войны составили 27 миллионов человек </strong> </marquee>

В файле our_style.css создайте новый стиль .begushiy, содержащий два параметра: цвет текста - желтый; размер текста – 16 пикселей. Примените этот стиль для данной бегущей строки.

2.7. В третью ячейку добавьте текст ВТОРАЯ МИРОВАЯ ВОЙНА (1941–1945): цвет текста – белый; высота текста –24 пикселей. Прижмите эту строку к правой границе.

2.8. Откройте файл verh.html в Internet Explorer’e

ЕСЛИ БЕГУЩАЯ СТРОКА НЕ ПОПАДАЕТ В ЦЕНТР ВТОРОЙ ЯЧЕЙКИ ТЕКУЩЕЙ (второй) ТАБЛИЦЫ, ТО С ПОМОЩЬЮ МЫШИ ПОМЕНЯЙТЕ ВЫСОТУ ЯЧЕЙКИ.

Вы должны получить примерно след. картину:

Сохраните файл verh.html.

Часть 3. Создание страницы “prav1.html”.

3.1. Откройте файл “prav1.html” (если он не открыт) с помощью программы Dreamweaver.

Присоедините файл our_style.css.

Создайте таблицу из одной строки и двух столбцов со следующими параметрами:

Строки– 1; Столбцы– 2;

Ширина таблицы – 100%, (в процентах от экрана);

Поля ячеек – 6;

Интервал ячеек – 0, расстояние между ячейками.

Толщина таблицы – 0.

3.2. Вручную определите ширину второго столбца, равную 100 пикселей, т.е. в тег <td> добавьте выражение width="100".В качестве фона второй ячейки используйте георгиевскую ленточку “georgiy.jpg”из папки “right”. Добавьте рисунок “hero4.gif”в эту ячейку (вторую)из папки “right”и выровняйте все элементы ячейки по центру.Прижмите рисунок “hero4.gif”к верхней границе второй ячейки (добавляя параметр valign="top"к тегу<td>) .

3.3. А теперь займемся основной частью текущей страницы, т.е. первой ячейкой.

Добавьте изображение “jukov_gk.jpg” из папки “right”. В этой же папке находится текстовой файл “jukov.txt”. Содержимое этого файла расположите после изображения, так, чтобы текст начинался с верхней границы изображения (а не так, как получается снизу справа по умолчанию). Для этого в тег <img src=…..> нужно добавить параметр align="left".

3.4. Выделите текст «Жуков Георгий Константинович (01. 12.1896 - 18.06.1974) Четырежды Герой Советского Союза» и примените для него стиль .fio:

Часть 4.

4.1. Создаем управляющую страницу сайта – файл “levaya.html”. Откройте файл “levaya.html” (если он не открыт) с помощью программы Dreamweaver.

Присоедините файл our_style.css.

Создайте таблицу из 10 строк и одного столбца со следующими параметрами:

Строки таблицы– 10; Столбцы таблицы– 1;

Ширина таблицы – 190;

Поля ячеек – 5, расстояние от объекта (то, что внутри ячейки) до ее границы;

Интервал ячеек – 0, расстояние между ячейками;

Толщина таблицы – 0,толщина рамки.

4.2. В первую ячейку добавьте изображение “yar1.jpg” (четвертый символ – цифра 1) из папки “left”. Удалите параметры (если они есть) width="75" height="93".

4.3. После этого добавьте тег <br>, текст “Г.К.ЖУКОВ” и линию со следующими параметрами: <hr size="5" color="#800000" width="70%">. Добавив атрибут align="center" в тег <td> центрируем все элементы ячейки. Изображение “yar1.jpg” и текст “Г.К.ЖУКОВ” делаем объектами ссылки, т.е. при нажатии на изображение или текст “Г.К.ЖУКОВ” должна загружаться страница “prav1.html” в правое окно. В итоге Вы должны получить следующей текст ячейки:

<a href="prav1.html" target="okno"><img src="left/yar1.jpg" ><br>Г.К.ЖУКОВ</a>.

Объясните преподавателю параметр “okno” атрибута target (откуда он взялся?).

4.4. При дальнейшем расширении сайта Вы будете пользоваться готовыми страницами prav2.html, prav3.html, prav4.html и prav5.html, находящимися в корневой папке.

В следующую ячейку (после ячейки, касающейся Г.К. ЖУКОВА) добавьте аналогичные пункты для:

К.К. РОКОССОВСКОГО (ярлык yar2.jpg в папке “left”, страница - prav2.html);

И.Д.ЧЕРНЯХОВСКОГО (ярлык yar3.jpg в папке “left”, страница - prav3.html);

А.М.ВАСИЛЕВСКОГО (ярлык yar4.jpg в папке “left”, страница - prav4.html);

«ОРДЕНА И МЕДАЛИ» (ярлык yar5.jpg в папке “left”, страница - prav5.html);

«НАЧАЛО» (страница - prav.html).

4.5. Сохраните все страницы и откройте страницу index.htmlв InternetExplorer’е. Проверьте все ссылки.

4.6. Наконец, после пункта «НАЧАЛО»добавьте еще один пункт «Об авторе сайта». Создайте свою страницу со своим именем, например, elina.html. Ваша страница должна открываться в новом окне, т.е. при переходе к Вашей странице фрейм должен закрываться.

4.7. Создайте ссылку с Вашей страницы на сайт «Великие полководцы войны»,который Вы сегодня создали.

Дополнительные вопросы

1. В каких случаях используются фреймы?

2. Почему поисковые машины плохо сканируют ключевые параметры страницы?

3. Создайте Web-узел в виде фреймов из двух столбцов.

4. Для чего используются параметры _parent при работе с фреймом?

5. Как можно создать фреймы без прокрутки меню (если оно “вылезает” за пределы экрана")?