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

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


Смотрите также:
1. Структура сайта...
Программа семинара включает следующие темы: Структура и основные подсистемы официального сайта...
Программа семинара включает следующие темы: Структура и основные подсистемы официального сайта...
Техническое задание на разработку сайта для опросов Структура сайта...
Техническое задание на разработку сайта интернет-магазина цветов этапы и сроки создания сайта...
Дипломная работа...
Дипломная работа...
Руководство пользователя системы управления сайтом (сус)...
Добавление фотогалереи или форума/блога...
Назначение сайта (цель создания сайта)...
Отчет о научно-исследовательской работе по теме...
Техническое задание на разработку веб-сайта мондесад содержание...



Загрузка...
скачать
ФРЕЙМЫ – БАЗОВОЕ СРЕДСТВО ПРЕДСТАВЛЕНИЕ ИНФОРМАЦИИ ВО ВСЕМИРНОЙ ПАУТИНЕ

Макаров В.В.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 – документ.

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

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


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

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

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

Р
ис.2


Это было реализовано с помощью тэга следующим образом













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

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

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

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

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

Если браузер очень старый и не отображает фреймы, то в его окне будет выведено сообщение об этом. Данное сообщение было реализовано с помощью тэга .<br /><br /><h2> Фрейм1</h2> <br /> Название кафедры в первом фрейме изображено с помощью бегущей строки. Это реализовано с помощью тэга <MARQUEE><br /> <br /> Пример кода:<br /> <br /> <MARQUEE LOOP=INFINITE BEHAVIOR=SCROLL SCROLLAMMOUNT=5 SCROLLDELAY=100 hspace=0 vspace=0><br /> <br /> <span class="butback" onclick="goback(10665498)">^</span> <span class="submenu-table" id="10665498"><h2> Кафедра "Экономика и менеджмент" </h2></span><br /> <br /> </MARQUEE><br /> <br /> Параметр LOOP=infinity означает, что количество повторений текста в бегущей строке «бесконечное»<br /> <br /> Параметр behaviour определяет характер движения строки. В данном случае текст появляется от одного края и скрывается за другим.<br /> <br /> Параметры SCROLLAMMOUNT и SCROLLDELAY устанавливают соответственно длинну в пикселах «прыжка» текста за один такт и величину паузы меду тактами перемещения текста в миллисекундах.<br /> <br /> Все графические элементы на сайте были вставлены с помощью тэга <img> с атрибутом scr, в котором указывается URL-адрес рисунка. В частности так была реализована вставка логотипа:<br /><br /><br /><img src= "head.gif" align=middle height=55%><br /><br /><br />Здесь кроме указания URL-адреса рисунка используются еще нескольно атрибутов тэга <img>:<br /> <br /> В параметре style указывается тип фильтра примененного к рисунку. В данном случае это статический фильтр blur, который создает эффект движения объектов.<br /> <br /> Параметр align указывает на расположение изображения относительно сторон документа. В данном случае изображение располагается в посередине.<br /> <br /> Параметр height определяет высоту картинки.<br /> <br /> Второе графическое изображение первого фрейма реализовано следующим образом:<br /><br /><br /><img src= "main.jpg" align=left height=75% title="главное здание мгупб"><br /> <br /> Его параметры отличаются от предыдущего изображения тем, что оно выравнено по левому краю, его высота 75%. Но главное отличие состоит в параметре Title. С помощью него реализована всплывающая подсказка при наведении на рисунок. (Рис.3)<br /> <br /> <img src="350476_html_m5376b4bc.png" name="graphics2" align=left hspace=12 width=302 height=225 border=0><BR CLEAR=LEFT><br /> <br /> <br /> Рис.3<br /><br /><h2> Фрейм2</h2> <br /><br />Во втором фрейме находится меню. Оно реализовано с помощью совмещения обычного ненумерованного списка (тэг <ul>) и гипертекстовых ссылок (тэг <a> с атрибутом href, который указывает на URL-адрес HTML-документа)<br /> <br /> Все документы при нажатии на ссылки отображаются в третьем фрейме, который при разбивке был обозначен как Frame_1.<br /> <br /> <ul><br /> <br /> <li> Главная страница <br /> <br /> <li> История кафедры <br /> <br /> <li> Преподавательский состав <br /> <br /> <li> Читаемые дисциплины <br /> <br /> <li> учебные пособия <br /> <br /> </ul><br /> <br /> Кроме того в этом фрейме находится ссылка на английский вариант этого сайта. При нажатии на флаг Великобритании открывается та же самая структура из трех фреймов, но вся помещенная информация на английском языке. Это реализовано следующим образом: <br /> <br /> <img src="ukflag.jpg" align=absmiddle title="перевод данного сайта на английский язык"> <br /> <br /> Кроме того, на английском варианте сайта во втором фрейме помещено изображение российского флага для перехода на русский язык.<br /> <h2> Фрейм3</h2> <span class="butback" onclick="goback(10665499)">^</span> <span class="submenu-table" id="10665499"><h3> <u>Главная страница</u></h3></span> <br /> В этом фрейме меню реализовано с помощью таблицы (тэг <table>):<br /> <br /> <CENTER><br /> <br /> <table><br /> <br /> <tr><br /> <br /> <td> История кафедры </td><br /> <br /> <td> Преподавательский состав </td><br /> <br /> <td> Читаемые дисциплины </td><br /> <br /> <td> учебные пособия </td><br /> <br /> </tr><br /> <br /> </table><br /><br /><br />Тег <b><</b>CENTER<b>></b> предназначен для горизонтального выравнивания всех элементов посередине окна браузера. <br /> <br /> Тэги <tr> и <td> определяют соответственно строки и столбцы таблицы.<br /> <br /> Ячейки таблицы являются ссылками на теже документы, что и во втором фреймы, то есть полностью дублируют их.<br /><br /><br />Название кафедры реализовано с помощью каскадных стилей текста. Для этого мы в заголовке определяем стили при помощи тэга <STYLE>:<br /> <br /> <style><br /> <br /> .тень {color: Palevioletred; text-align: right; weight: medium; margin-top: -180px; font-size: 75px; line-height: 150px}<br /> <br /> .основа {color: Mediumvioletred; weight: 900; margin-top: -30px; font-size: 85px; line-height: 150px}<br /> <br /> .слой1 {color:black; margin-top: -130px; weight: medium; font-size: 10px; line-height: 65px}<br /> <br /> .кафедра {color:Mediumvioletred; weight: medium; text-align:center; font-size: 30px; line-height: 45px}<br /> <br /> .и {color: Mediumvioletred; text-align: center; weight: medium; margin-top: -200px; font-size: 150px; lige-height: 220px}<br /> <br /> .тень1 {color: Palevioletred; text-align: center; weight: medium; margin-top: -170px; px; font-size: 75px; line-height: 150px}<br /> <br /> </style><br /><br /><br />Стиль в таблице стилей определяется набором свойств в фигурных скобках, которому присваивается имя, перед которым ставится точка (например .тень).<br /> <br /> Свойства:<br /> <br /> Color- задает цвет шрифта<br /> <br /> Text-align-определяет выравнивание элемента<br /> <br /> Weight – определяет степень жирности<br /> <br /> Margin-top - задает или получает высоту верхнего отступа объекта<br /> <br /> Font-size – задает величину шрифта<br /> <br /> line-height - Управляет интервалами между строками текста<br /> <br /> <br />Тексту стили присваиваются с помощью тэга <div> и атрибута CLASS.<br /> <br /> <div CLASS=кафедра> кафедра </div><br /> <br /> <div CLASS=основа> экономика </div><br /> <br /> <div CLASS=ТЕНЬ> экономика </div><br /> <br /> <div CLASS=основа> менеджмент</div><br /> <br /> <div CLASS=ТЕНЬ> менеджмент</div><br /> <br /> <div class=и> и </div><br /> <br /> <div CLASS=ТЕНЬ1> и </div><br /><br /><span class="butback" onclick="goback(10665500)">^</span> <span class="submenu-table" id="10665500"><h3> <u>История кафедры</u></h3></span> <br /><br />Для реализации этой страницы использованы тэги<br /> <br /> <h2> Заголовок второго уровня<br /> <br /> <p> Разбиение текста на параграфы<br /> <br /> <ul> Создание ненумерованного списка<br /> <br /> Заголовок:<br /> <br /> <span class="butback" onclick="goback(10665501)">^</span> <span class="submenu-table" id="10665501"><h2> История Кафедры "Экономика и менеджмент" </h2></span><br /> <br /> Пример параграфа:<br /> <br /> <br />Оставаясь базовой кафедрой университета в области экономической подготовки, она сразу стала выпускающей по специализации "Экономика мясной и молочной промышленности". <br /> <h6> Пример ненумерованного списка:</h6> <br /> <ul><br /> <br /> <li> Экономический </li><br /> <br /> <li> Экономико-математический </li><br /> <br /> <li> Управленческий </li><br /> <br /> </ul><br /> <h6> Тэг <li> определяет отдельный элемент списка</h6> <br /> Эта страница выглядит следующим образом:<br /> <br /> Р<img src="350476_html_m707ef9e1.png" name="graphics3" align=left hspace=12 width=350 height=258 border=0><BR CLEAR=LEFT>ис.4<br /><br /><br /><span class="butback" onclick="goback(10665502)">^</span> <span class="submenu-table" id="10665502"><h3> <u>Преподавательский состав</u></h3></span> <br /> Эта страница реализована с помощью тэга <table> и тэга <a> с атрибутом Href. В ячейках таблицы располагаются Фамилии всех преподавателей, каждая из которых является ссылкой на анкету соответствующего преподавателя.<br /> <br /> <div align=center><br /> <br /> <span class="butback" onclick="goback(10665503)">^</span> <span class="submenu-table" id="10665503"><h2> Преподавательский состав </h2></span><br /> <br /> <table cellspacing = 10><br /> <br /> <tr><br /> <br /> <td align = center> Магомедов Магомед Даниялович </td><br /> <br /> </tr><br /> <br /> <tr> <td align = center> Заздравных Алексей Витальевич </td> </tr><br /> <br /> <tr> <td align = center> Козько Николай Иванович </td> </tr><br /> <br /> <tr> <td align = center> Рыбин Александр Владимирович </td> </tr><br /> <br /> <tr> <td align = center> Опарина Елена Евгеньевна </td> </tr><br /> <br /> <tr> <td align = center> Алексейчева Елена Юрьевна </td> </tr><br /> <br /> <tr> <td align = center> Уроженко Юлия Васильевна </td> </tr><br /> <br /> <tr> <td align = center> Шкурина Ольга Игоревна </td> </tr><br /> <br /> <tr> <td align = center> Деньщикова Екатерина Евгеньевна </td> </tr><br /> <br /> <tr> <td align = center> Мухин Сергей Иванович </td> </tr><br /> <br /> <tr> <td align = center> Алина Елена </td> </tr><br /> <br /> </table><br /> <br /> </div><br /><br /><br />Заголовок, как и на всех остальных страницах выполнен с помощью тэга <h2> - заголовок второго уровня<br /> <br /> Тэг <div> с параметром align выравнивает все элементы страницы по центру<br /> <br /> Параметр cellspacing в тэге <table> задает расстояние между ячейками таблицы.<br /> <br /> Параметр Align в тэге <td> выравнивает текст в ячейке, в данном случае по центру.<br /> <br /> Данная страница выглядит следующий образом:<br /> <br /> Р<img src="350476_html_m50be850d.png" name="graphics4" align=left hspace=12 width=221 height=140 border=0><BR CLEAR=LEFT>ис.5<br /><br /><span class="butback" onclick="goback(10665504)">^</span> <span class="submenu-table" id="10665504"><h4> Анкеты преподавателей</h4></span> <br /> Все эти станицы (11 штук) выполнены в едином стиле с помощью тэгов<br /> <ol> <li><br /> Вставка графики<br /> </ol> <br /> <img src="магомедов.jpg" width=35% align=left hspace=20 vspace=40><br /> <br /> Атрибуты HSPACE и VSPACE определяют свободное место в пикселах соответственно слева (справа) и сверху (снизу) от изображения.<br /> <br /> 2. Информация о преподавателях реализована в виде параграфов следующим образом <br /> <br /> <br />должность - доцент, заместитель заведующего кафедрой; <br /> <br /> <br />ученая степень- кандидат экономических наук;<br /> <br /> <br />общее количество публикаций - более 30, в т.ч. 1 монография; <br /> <br /> <br /> научно-педагогический стаж - 6 лет; <br /> <br /> <br />специальность - "Экономика и управление на предприятиях"; <br /> <br /> <br />преподаваемые дисциплины - "Экономика отрасли", "Экономика предприятия", "Экономика недвижимости" (ИЭиП), "Налоги и налогообложение" (ИЭиП);<br /> <br /> У одного преподавателя имеется своя электронная почта. Поэтому на его страничке есть дополнительная ссылка, при нажатии на которую сразу открывается OutlookExpress и вы можете послать ему свое сообщение. Это реализовано следующим образом:<br /> <br /> beowolf10@mail.ru <br /> <br /> Эта страница выглядит следующим образом:<br /> <br /> Р<img src="350476_html_m2a9de923.png" name="graphics5" align=left hspace=12 width=317 height=197 border=0><BR CLEAR=LEFT>ис.6 <br /> <span class="butback" onclick="goback(10665505)">^</span> <span class="submenu-table" id="10665505"><h2> Оформление внешнего вида сайта</h2></span> <br /> Внешний вид страниц сайта определен при помощи каскадной таблицы стилей styles.css, хранящейся в отдельном файле в папке сайта. В таблице стилей прописываются нужные параметры основных тэгов: цвет, вид и размер шрифта и так далее. Таблицы стилей состоит из селекторов (тэги HTML) и их определений, разделенных фигурными скобками. Определие состоит из свойства и его значения, разделенных знаком двоеточие.<br /> <br /> Кроме описания тэгов HTML в каскадной таблице стилей можно реализовать свойства для так называемых превдоклассов связей, которые определяют внешний вид ссылок. Так как псевдоклассы применяются к единственному типу элементов A, то при задании их в селекторе правил этот элемент можно опустить:<br /><br /><br /><STYLE TYPE="text/css"><br /> <br /> <b>H2</b> {COLOR: Brown;<br /> <br /> FONT-SIZE: 150%; text-align=center}<br /> <br /> <b>P</b> {COLOR: Cornflowerblue; <br /> <br /><span class="butback" onclick="goback(10665506)">^</span> <span class="submenu-table" id="10665506"> FONT-SIZE: 120%}</span><br /> <br /> <b>UL</b> {COLOR: Royalblue; <br /> <br /> FONT-SIZE: 130%}<br /> <br /> <b>OL</b> {COLOR: Royalblue; <br /> <br /> FONT-SIZE: 130%}<br /> <br /> <b>A</b> {FONT-SIZE: 100%;<br /> <br /> FONT-WEIGHT: BOLD}<br /> <br /> :<b>link</b> {color: Mediumvioletred} /* непосещенная связь */<br /> <br /> :<b>visited</b> {color: Cornflowerblue} /* посещенная связь */<br /> <br /> :<b>hover</b> {color: lime} /* связь, на которой расположен курсор мыши */<br /> <br /> :<b>active</b> {color: Sandybrown} /* активная связь */<br /> <br /> </STYLE><br /> <br /> Таблицы стилей присоединяется к документу с помощью тэга <link>, задаваемого в разделе head.<br /> <br /> <link rel="stylesheet" type= "text/css" href="styles.css"><br /> <br /> Связывание позволяет применить одинаковый набор правил форматирования текста к группе документов, что приводит к единообразному отображению их в окне браузера.<br /> <br /> Выше таблицы стилей по приоритету при выполнении ее является встроенное непосредственно в HTML-текст описание параметров тэгов и встраивание таблиц стилей непосредственно в документ с помощью тэга <style> в разделе head. Так, например, на главной странице сайта было выполнено название кафедры. <br /><br /><h2> Навигация</h2> <br /> Навигация сайта разрабатывалась так, чтобы пользователю было максимально удобно ориентироваться. Кроме гиперссылок на каждой страничке (внизу и вверху страницы) есть кнопки возврата на предыдущую страницу и на одну страницу вперед. Кроме того, при наведении практически на все ссылки появляется всплывающая подсказка, которая сообщает пользователю о том, что какую страницу он увидит при нажатии на эту ссылку.<br /><br /><br /> <img src=backup.jpg> <br /> <br /> <img src=nextup.jpg><br /> <br /> Кроме того, с каждой страницы есть кнопка перехода на главную.<br /> <br /> <img src=home.gif> <br /> <br /> Рис. 7 Кнопки навигации <img src="350476_html_m39e86fa3.png" name="graphics6" align=bottom width=239 height=187 border=0><br /> <h6> <span>На страницах с анкетами преподавателей кроме кнопок возврата и перехода на следующую страницу присутствует перечень преподавателей в виде их номер. Причем номер является гиперссылкой, при наведении на которую всплывает фамилия, имя и отчество преподавателя, чья анкета откроется при нажатии на этот номер. Так же рядом с этими номерами имеются ссылки на следующего и предыдущего преподавателя, благодаря чему пользователь может последовательно просмотреть все анкеты преподавателей.</span></h6> </link></link></a></table></div></div></style></style></td></td></tr></table></center></table></a></marquee></frame>




Скачать 125,12 Kb.
оставить комментарий
Дата30.11.2011
Размер125,12 Kb.
ТипДокументы, Образовательные материалы
Добавить документ в свой блог или на сайт

Ваша оценка этого документа будет первой.
Ваша оценка:
Разместите кнопку на своём сайте или блоге:
rudocs.exdat.com

Загрузка...
База данных защищена авторским правом ©exdat 2000-2017
При копировании материала укажите ссылку
обратиться к администрации
Анализ
Справочники
Сценарии
Рефераты
Курсовые работы
Авторефераты
Программы
Методички
Документы
Понятия

опубликовать
Загрузка...
Документы

наверх