Html- документа, разработка сайта

1.Создадим типовую фреймовую структуру экрана, когда экран делится на 3 окна по примеру:

  1.html
  2.html   3.html

В каждом окне отобразим записанные в окнах Web – страницы.

!!!Учтите, что окна (фреймы) создаются в строго определённом порядке: сверху – вниз и слева – направо:

 
 


Сначала делим экран на две строки, а затем нижнюю строку делим на два столбца.

2. При создании фреймовой структуры в документе отсутствует тег <body>, сразу записывается фреймовая структура. Ниже приведён код, реализующий наше задание.

<!—так включаются комментарии, они не отображаются на экране-->

<html>

<head><Title>Фреймовая структура</Title></head>

<frameset rows="20%,*"><!—создаём две строки (два горизонтальных окна на экране)-->

<frame src="1.html" name="1"><!—отображаем в верхнем окне документ 1.html-->

<frameset cols="25%,*"> <!—делим нижнее окно на два столбца-->

<frame src="2.html" name="2"> <!—отображаем в нижнем левом фрейме документ 2.html-->

<frame src="prim1.html" name="3"> <!—отображаем в нижнем правом фрейме документ 3.html-->

</frameset>

</frameset>

</html>

Каждому фрейму с помощью атрибута name дали имя, на него в дальнейшем можно ссылаться.

Сохраним документ в файл frame.html и откроем его в броузере.

В каждом окне написано, что Internet Explorer не может отобразить веб-страницу. Это происходит оттого, что в нашей папке нет Web – страниц 1.html, 2.html, 3.html. Если мы подключим к фреймам имеющиеся у нас html – документы, картина изменится. Например, как отображено ниже.

Из примера видно, что в верхнем окне отображается заголовок сайта, в левом нижнем – главное меню, а в правом – содержание HTML- документа, открываемого по гиперссылке из меню.

3.Создадим пример Web – страницы, размещаемой в левом нижнем фрейме и содержащей меню, как в представленном рисунке.

<HTML>

<HEAD><TITLE>оглавление</TITLE>

</HEAD>

<body text="#1E90FF" bgcolor="#F08080">

<ul><h1 text="#B22222">Оглавление:<h1>

<li><h2><a href="1o.htm" target="3">Работа с программой</a>

<li><a href="2o.htm" target="3">Что необходимо для работы</a>

<li><a href="3o.htm" target="3">Основные теги разметки</a>

<li><a href="4o.htm" target="3">Заголовок &ltHEAD&gt</a>

<li><a href="5o.htm" target="3">Атрибуты элемента &ltBODY&gt</a>

<li><a href="6o.htm" target="3">Работа с текстом</a>

<li><a href="7o.htm" target="3">Списки</a>

<li><a href="8o.htm" target="3">Работа с мультимедиа </a>

<li><a href="9o.htm" target="3">Создание гиперссылок</a>

<li><a href="10o.htm" target="3">Таблицы</a>

</h2>

</body>

</HTML>

Каждой гиперссылке соответствует Web – страница, имя которой указано атрибутом href. Для отображения связанных с гиперссылками страниц в третьем окне используется атрибут тега <A> target, имеющий своим значением имя окна отображения.

4.Для создания сайта по вышеприведённому примеру следует разработать 7-8 Web – страниц, отображающих Вашу тему, это сл. страницы:

Web-cтраница – заголовок сайта, отображается в верхнем окне;

Web-cтраница – главное меню в левом нижнем окне;

начальная Web-cтраница в правом нижнем окне;

4-5 Web-cтраниц, связанных с главным меню, отображаемых в правом нижнем окне при выборе пунктов меню.

5.В меню следует предусмотреть пункт Главная для возврата на начальную страницу.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: