ФРЕЙМЫ – БАЗОВОЕ СРЕДСТВО ПРЕДСТАВЛЕНИЕ ИНФОРМАЦИИ ВО ВСЕМИРНОЙ ПАУТИНЕ

1, 2

1. 1Институт проблем управления РАН им.

2. 2Московский государственный университет прикладной биотехнологии

Аннотация: Структура сайта помимо обычных HTML-страниц включает фреймы, которые служат для разделения рабочей области браузера на 3 части: 2 статические (menu. html=left-фрейм и header. html=top-фрейм)и 1 динамическую, изменяющуюся по запросу пользователя, по умолчанию = главная страница = home. htm. Организация сайта представляет удобную навигацию по всем информационным категориям сайта и имеет быстрый переход на главную страницу, а так же на английский вариант данного сайта.

Введение

Основания для разработки: предложить вариант организации сайта кафедры «Экономика и Менеджмент» Московского государственного университета прикладной биотехнологии.

Система реализует следующие функции:

1.Обеспечение единого информационного пространства

2.Представление информации о кафедре – рекламные основания

3.Доступность получения информации о деятельности кафедры

4.Удобный, простой и понятный пользовательский интерфейс

Структура сайта

Кафедрой «Экономика и менеджмент» была предоставлена следующая информация:

· История кафедры

· Список преподавателей

· Анкеты преподавателей

· Читаемые дисциплины

· Список учебных пособий

Данный сайт представлен в виде древовидной структуры. Эта структура очень проста, т. к. все страницы взаимосвязаны между собой, что облегчает переход с одной страницы на другую (Рис.1).

НЕ нашли? Не то? Что вы ищете?

Рис.1 Структура сайта.

Выбор языка для разработки сайта

Для создания сайта был использован язык гипертекстовой разметки HTML (HyperText Markup Language). Этот язык не является языком программирования в традиционном понимании - это язык разметки документа, т. е. при разработке HTML – документа выполняется разметка текстового документа. Спецификой данного языка является то, что пользователь имеет возможность просматривать документы в том порядке, в котором ему больше нравится, а не последовательно.

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

Существует большое количество программ-браузеров, разработанные различными компаниями, однако, на сегодняшний день можно выделить лишь некоторые – Microsoft Internet Explorer, Netscape Communicator, Opera.

Символы, которые управляют отображением текста и при этом сами не отображаются на экране, в языке HTML принято называть тэгами (от англ. слова tag – ярлык, признак).

Все тэги языка HTML выделяются символами – ограничителями (<имя>), между которыми записывается идентификатор (имя) и его параметры.

Первым тэгом, с которого начинается описание документа, является тэг <HTML>, а завершает описание документа тэг </HTML>. Эти тэги обозначают, что находящийся между ними строки представляют единый HTML – документ.

Тело документа разделятся на HEAD и BODY. Раздел документа HEAD определяет его заголовок, а в разделе BODY располагается его содержательная часть.

Технология разработки

Для разработки сайта были использованы так называемые фреймы. Это независимые друг от друга прямоугольные области рабочей части браузера. В каждый фрейм можно загрузить отдельный HTML –документ. У таких областей есть много достоинств.

Использование фреймов значительно упрощает структуру страницы, так же здесь присутствует возможность загрузить некоторые элементы сайта только один раз, что существенно экономит траффик.

Страницу разделена на три фрейма. В первом фрейме изображен логотип нашего института и название кафедры. Во втором – находится меню для более удобной навигации по сайту. А третий фрейм является динамической частью сайта. В нем отображаются вся информация которая находится на сайте. При загрузке документа в третьем фрейме отображается главная страница сайта, где указано название кафедры и продублировано меню. (рис.2)

Рис.2

Это было реализовано с помощью тэга <Frameset> следующим образом <FRAMESET ROWS="35%,65%">

</FRAMESET>

Ваш браузер не может отображать фреймы

</NOFRAMES>

Параметр ROWS делит окно браузера на две части: верхняя – 35%, а нижняя – 65%.

Второй тэг <FRAMESET> использует уже параметр COLS. Он делит нижнюю часть окна браузера еще на два фрейма по 30% и 70%.

Каждому фрейму соответствует тэг <Frame> с параметром SCR, в котором указывается URL-адрес документа, который будет загружаться в тот или иной фрейм. В третьем тэге присутствует такой атрибут, как Name, который назначает имя текущему фрейму. Это имя может использоваться в качестве цели в последующих ссылках.

Параметр FRAMEBORDER =NО означает, что границы фреймов на экране не отображаются, а SCROLLING=NO означает, что полосы прокрутки на статистически областях браузера запрещены.

Если браузер очень старый и не отображает фреймы, то в его окне будет выведено сообщение об этом. Данное сообщение было реализовано с помощью тэга <NOFRAMES>.

Фрейм1

Название кафедры в первом фрейме изображено с помощью бегущей строки. Это реализовано с помощью тэга <MARQUEE>

Пример кода:

<H1> Кафедра "Экономика и менеджмент" </H1>

</MARQUEE>

Параметр LOOP=infinity означает, что количество повторений текста в бегущей строке «бесконечное»

Параметр behaviour определяет характер движения строки. В данном случае текст появляется от одного края и скрывается за другим.

Параметры SCROLLAMMOUNT и SCROLLDELAY устанавливают соответственно длинну в пикселах «прыжка» текста за один такт и величину паузы меду тактами перемещения текста в миллисекундах.

Все графические элементы на сайте были вставлены с помощью тэга <img> с атрибутом scr, в котором указывается URL-адрес рисунка. В частности так была реализована вставка логотипа:

Здесь кроме указания URL-адреса рисунка используются еще нескольно атрибутов тэга <img>:

В параметре style указывается тип фильтра примененного к рисунку. В данном случае это статический фильтр blur, который создает эффект движения объектов.

Параметр align указывает на расположение изображения относительно сторон документа. В данном случае изображение располагается в посередине.

Параметр height определяет высоту картинки.

Второе графическое изображение первого фрейма реализовано следующим образом:

Его параметры отличаются от предыдущего изображения тем, что оно выравнено по левому краю, его высота 75%. Но главное отличие состоит в параметре Title. С помощью него реализована всплывающая подсказка при наведении на рисунок. (Рис.3)

Рис.3

Фрейм2

Во втором фрейме находится меню. Оно реализовано с помощью совмещения обычного ненумерованного списка (тэг <UL>) и гипертекстовых ссылок (тэг <a> с атрибутом href, который указывает на URL-адрес HTML-документа)

Все документы при нажатии на ссылки отображаются в третьем фрейме, который при разбивке был обозначен как Frame_1.

<UL>

<LI> <A HREF="HOME. HTML" TARGET="Frame_1"> Главная страница </A>

<LI> <A HREF="HISTORY. HTML" TARGET="Frame_1"> История кафедры </A>

<LI> <A HREF="TEACHERS. HTML" TARGET="Frame_1"> Преподавательский состав </A>

<LI> <A HREF="objects. HTML" TARGET="Frame_1"> Читаемые дисциплины </A>

<LI> <A HREF="books. HTML" TARGET="Frame_1"> учебные пособия </A>

</UL>

Кроме того в этом фрейме находится ссылка на английский вариант этого сайта. При нажатии на флаг Великобритании открывается та же самая структура из трех фреймов, но вся помещенная информация на английском языке. Это реализовано следующим образом:

Кроме того, на английском варианте сайта во втором фрейме помещено изображение российского флага для перехода на русский язык.

Фрейм3

Главная страница

В этом фрейме меню реализовано с помощью таблицы (тэг <TABLE>):

<table>

<tr>

<td> <A HREF="HISTORY. HTML" TARGET="Frame_1"> История кафедры </A> </td>

<td> <A HREF="TEACHERS. HTML" TARGET="Frame_1"> Преподавательский состав </A> </td>

<td> <A HREF="objects. HTML" TARGET="Frame_1"> Читаемые дисциплины </A> </td>

<td> <A HREF="books. HTML" TARGET="Frame_1"> учебные пособия </A> </td>

</tr>

</table>

Тег <CENTER> предназначен для горизонтального выравнивания всех элементов посередине окна браузера.

Тэги <tr> и <td> определяют соответственно строки и столбцы таблицы.

Ячейки таблицы являются ссылками на теже документы, что и во втором фреймы, то есть полностью дублируют их.

Название кафедры реализовано с помощью каскадных стилей текста. Для этого мы в заголовке определяем стили при помощи тэга <STYLE>:

<style>

.тень {color: Palevioletred; text-align: right; weight: medium; margin-top: -180px; font-size: 75px; line-height: 150px}

.основа {color: Mediumvioletred; weight: 900; margin-top: -30px; font-size: 85px; line-height: 150px}

.слой1 {color:black; margin-top: -130px; weight: medium; font-size: 10px; line-height: 65px}

.кафедра {color:Mediumvioletred; weight: medium; text-align:center; font-size: 30px; line-height: 45px}

.и {color: Mediumvioletred; text-align: center; weight: medium; margin-top: -200px; font-size: 150px; lige-height: 220px}

.тень1 {color: Palevioletred; text-align: center; weight: medium; margin-top: -170px; margin-right: -100px; font-size: 75px; line-height: 150px}

</style>

Стиль в таблице стилей определяется набором свойств в фигурных скобках, которому присваивается имя, перед которым ставится точка (например. тень).

Свойства:

Color- задает цвет шрифта

Text-align-определяет выравнивание элемента

Weight – определяет степень жирности

Margin-top - задает или получает высоту верхнего отступа объекта

Font-size – задает величину шрифта

line-height - Управляет интервалами между строками текста

Тексту стили присваиваются с помощью тэга <div> и атрибута CLASS.

<DIV CLASS=кафедра> кафедра </div>

<DIV CLASS=основа> экономика </div>

<DIV CLASS=ТЕНЬ> экономика </DIV>

<DIV CLASS=основа> менеджмент</div>

<DIV CLASS=ТЕНЬ> менеджмент</DIV>

История кафедры

Для реализации этой страницы использованы тэги

<h2> Заголовок второго уровня

<p> Разбиение текста на параграфы

<UL> Создание ненумерованного списка

Заголовок:

<H2> История Кафедры "Экономика и менеджмент" </H2>

Пример параграфа:

<P>Оставаясь базовой кафедрой университета в области экономической подготовки, она сразу стала выпускающей по специализации "Экономика мясной и молочной промышленности".

Пример ненумерованного списка:

<UL>

<LI> Экономический </LI>

<LI> Экономико-математический </LI>

<LI> Управленческий </LI>

</UL>

Тэг <LI> определяет отдельный элемент списка

Эта страница выглядит следующим образом:

Рис.4

Преподавательский состав

Эта страница реализована с помощью тэга <table> и тэга <a> с атрибутом Href. В ячейках таблицы располагаются Фамилии всех преподавателей, каждая из которых является ссылкой на анкету соответствующего преподавателя.

<h2> Преподавательский состав </h2>

<TR>

</TR>

<TR> <TD ALIGN = CENTER> <A HREF="Alina. html"> Алина Елена </A> </TD> </TR>

</TABLE>

</div>

Заголовок, как и на всех остальных страницах выполнен с помощью тэга <h2> - заголовок второго уровня

Тэг <div> с параметром align выравнивает все элементы страницы по центру

Параметр cellspacing в тэге <table> задает расстояние между ячейками таблицы.

Параметр Align в тэге <td> выравнивает текст в ячейке, в данном случае по центру.

Данная страница выглядит следующий образом:

Рис.5

Анкеты преподавателей

Все эти станицы (11 штук) выполнены в едином стиле с помощью тэгов

1. Вставка графики

Атрибуты HSPACE и VSPACE определяют свободное место в пикселах соответственно слева (справа) и сверху (снизу) от изображения.

2. Информация о преподавателях реализована в виде параграфов следующим образом

<P>должность - доцент, заместитель заведующего кафедрой;

<P>ученая степень - кандидат экономических наук;

<p>общее количество публикаций - более 30, в т. ч. 1 монография;

<p> научно-педагогический стаж - 6 лет;

<P>специальность - "Экономика и управление на предприятиях";

<P>преподаваемые дисциплины - "Экономика отрасли", "Экономика предприятия", "Экономика недвижимости" (ИЭиП), "Налоги и налогообложение" (ИЭиП);

У одного преподавателя имеется своя электронная почта. Поэтому на его страничке есть дополнительная ссылка, при нажатии на которую сразу открывается OutlookExpress и вы можете послать ему свое сообщение. Это реализовано следующим образом:

Эта страница выглядит следующим образом:

Рис.6

Оформление внешнего вида сайта

Внешний вид страниц сайта определен при помощи каскадной таблицы стилей styles. css, хранящейся в отдельном файле в папке сайта. В таблице стилей прописываются нужные параметры основных тэгов: цвет, вид и размер шрифта и так далее. Таблицы стилей состоит из селекторов (тэги HTML) и их определений, разделенных фигурными скобками. Определие состоит из свойства и его значения, разделенных знаком двоеточие.

Кроме описания тэгов HTML в каскадной таблице стилей можно реализовать свойства для так называемых превдоклассов связей, которые определяют внешний вид ссылок. Так как псевдоклассы применяются к единственному типу элементов A, то при задании их в селекторе правил этот элемент можно опустить:

H2 {COLOR: Brown;

FONT-SIZE: 150%; text-align=center}

P {COLOR: Cornflowerblue;

FONT-SIZE: 120%}

UL {COLOR: Royalblue;

FONT-SIZE: 130%}

OL {COLOR: Royalblue;

FONT-SIZE: 130%}

A {FONT-SIZE: 100%;

FONT-WEIGHT: BOLD}

:link {color: Mediumvioletred} /* непосещенная связь */

:visited {color: Cornflowerblue} /* посещенная связь */

:hover {color: lime} /* связь, на которой расположен курсор мыши */

:active {color: Sandybrown} /* активная связь */

</STYLE>

Таблицы стилей присоединяется к документу с помощью тэга <link>, задаваемого в разделе head.

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

Выше таблицы стилей по приоритету при выполнении ее является встроенное непосредственно в HTML-текст описание параметров тэгов и встраивание таблиц стилей непосредственно в документ с помощью тэга <style> в разделе head. Так, например, на главной странице сайта было выполнено название кафедры.

Навигация сайта разрабатывалась так, чтобы пользователю было максимально удобно ориентироваться. Кроме гиперссылок на каждой страничке (внизу и вверху страницы) есть кнопки возврата на предыдущую страницу и на одну страницу вперед. Кроме того, при наведении практически на все ссылки появляется всплывающая подсказка, которая сообщает пользователю о том, что какую страницу он увидит при нажатии на эту ссылку.

Кроме того, с каждой страницы есть кнопка перехода на главную.

Рис. 7 Кнопки навигации

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

Фреймы – базовое средство представление информации во всемирной паутине

Введение

Структура сайта

Выбор языка для разработки сайта

Технология разработки

Фрейм1

Фрейм2

Фрейм3

Главная страница

История кафедры

Пример ненумерованного списка:

Тэг <LI> определяет отдельный элемент списка

Преподавательский состав

Анкеты преподавателей

Оформление внешнего вида сайта

Навигация

Домашний очаг

Справочная информация

Техника

Общество

Образование и наука

Мир

Бизнес и финансы