Система Интернет Лабораторная работа №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. В ней создаем новый файл и в созданной странице находим строку

<meta http-equiv="Content-Type" content="text/html; charset=………">.

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

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">.

1.2. Сохраните эту страницу под именем “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>

</frameset>

<noframes></noframes>

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

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

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

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

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