Разработка информационного ресурса "История кафедры информатики и вычислительной техники" (стр. 3 из 3)
Пункт Texture предоставляет множество различных фоновых решений, находящихся в папках Dimpled, Exotic, Fibrous, Geometric и так далее. Закладка Bevel используется только для трехмерных изображений и позволяет изменять глубину и ширину текста. Shadow (с английского – «тень») так же не используется для кнопок навигации.
В пункте Size у нас есть возможность задать ширину и длину готового меню в пикселях.
NavBars позволяет создать URL ссылку для каждой кнопки меню. Если страница с заданным именем не существовала ранее, редактор Xara ее создаст с уже готовым меню. Здесь так же можно добавить или удалить кнопку при помощи нажатия соответственно Add или Delete.
В последнем пункте Save предоставляется возможность сохранения с расширениями gif, jpg или png. Далее для того чтобы сохранить получившееся меню необходимо нажать кнопку Save graphic. В появившемся окне можно выбрать папку для сохранения и имена файлов, необходимых для работы кнопок.
Для сайта «История кафедры информатики и вычислительной техники» было выбрано вертикальное меню, состоящее из пяти пунктов:
1) История кафедры информатики вычислительной техники (index.html)
2) Руководители кафедры (direct.html)
3) Профессорско-преподавательский состав (prof.htm)
4) Учебно-вспомогательный состав (science.html)
5) Кафедра сегодня (present.html)
Для удобства работы в конце каждой страницы содержится ссылка на начало. Более подробно структура сайта и страниц будет рассмотрена далее.
2.2 Структура папок и страниц сайта
Структура папок для хранения сайта следующая: первая папка с именем «history» является главной. В ней содержатся все страницы сайта, а так же папка для хранения кнопок навигации с названием «menu» и папка «img» для хранения графических изображений (согласно приложению).
В главной папке, как уже было сказано, хранятся все страницы сайта, файл с именем index.js, который обеспечивает работу меню и файл с таблицами стилей style.css. Выделить главную страницу не представляется возможным, так как они все равнозначны. Но при этом можно выделить логически первую, которая содержит общую информацию по истории кафедры информатики и вычислительной техники. Она имеет имя index.html; ссылка на нее содержится в первом пункте меню.
С этой страницы, как и с любой другой одинаково доступны все остальные (рис. 2).
 |
Рис. 2
Каждая страница имеет единый интерфейс: в верхней части располагается область заголовка, слева находится меню, а справа информационное содержание.
Подобная структура достигается по средствам использования таблицы, состоящей из одной строки и двух столбцов. В теге <td>, определяющем ячейку с меню необходимо указать атрибут valign=top. Этот атрибут выполняет выравнивание по верхнему краю, что обеспечивает фиксированное положение меню.
Общий цвет фона светлый, а текста темный, что обеспечивает приемлемое качество распечатки, на случай если у пользователя возникнет необходимость в этом.
Подключить таблицы стилей можно несколькими способами. Например, при помощи описания в секции заголовка или inline‑описания. Но наиболее удобным, по моему мнению, является подключение внешнего файла. Диапазон его воздействия распространяется на все файлы, в которые включено описание. В случае если возникнет необходимость изменить внешний вид сайта, достаточно будет изменить содержание только одного стилевого файла (style.css) [3].
Файл с таблицами стилей имеет расширение css и подключается в секции заголовка при помощи тега <link> следующим образом:
<head>…<link type= «text/css» rel= «stylesheet» href= «style.css» >…</head>Говоря о синтаксисе таблиц стилей можно выделить три основных группы классов: универсальные, теговые и псевдоклассы.Универсальные классы можно описать так:head {text-align: center;font-size: xx-large;color: red;}text {text-align: justify;font-size: medium;}Первый класс head задает внешний вид заголовка. Здесь присутствуют такие параметры, как выравнивание текста по центру и цвет текста – красный. Особое внимание хотелось бы уделить тому, что размер шрифта задается словесно и является относительным. Все параметры записываются в фигурных скобках.
Второй пример определяет внешний вид текста: выравнивание по ширине и относительный размер шрифта medium. В данном случае цвет текста не указан, и по умолчанию он будет черным.
Что бы некоторый текст или элемент страницы сайта был оформлен в стиле универсального класса, необходимо воспользоваться следующей конструкцией:
<p class=head> История кафедры информатики и вычислительной техники </p>
Строка текста «История кафедры информатики и вычислительной техники» будет оформлена в стиле head.
Теговые классы указывают стиль оформления тех элементов, которые заключены в соответствующие теги.
P {
text-indent: 2em;
margin-left: 1em;
margin-right: 1em;
}
Описанный выше класс P устанавливает отступ красной строки размером в две средних ширены буквы m (абсолютный размер в типографских единицах), а так же отступ текста справа и слева по одной единице измерения. Отличие тегового класса от универсального в том, что нет необходимости указывать его каждый раз, когда это требуется. При подключении файла с таблицами стилей все элементы, относящиеся к тегу P, приобретут признаки соответствующего класса.
И последняя группа – псевдоклассы. В отличие от обычного класса, действие его распространяется не на весь текст, к которому применен стиль, а лишь на часть и возможно лишь в определенном состоянии. Следующая строка довольно простой пример псевдокласса.
a: hover {text-decoration: underline;}
Этот псевдокласс определяет внешний вид текста ссылки в момент наведения на нее курсора, а именно появляется подчеркивание текста.
a {
color: rgb (85,6,6);
font-size: large;
font-family: Verdana;
text-align: center;
text-decoration: none;
}
Еще один пример тегового класса, который помимо обычных параметров: цвет, шрифт, гарнитура шрифта и выравнивания, еще задает отсутствие подчеркивания.
В обычном состоянии текст ссылки принимает вид, описанный теговым классом, а при наведении курсора приобретает параметры, описанные псевдоклассом, то тесть появляется подчеркивание
К сожалению, в полной мере охватить такой промежуток времени как 20 лет в одной курсовой работе не представляется возможным.
На данном этапе разработки сайт получился очень динамичным, простым, а главное удобным в использовании. Система навигации предполагает быстрый переход с одной страницы сайта на другую.
Безусловно, информационное содержание сайта должно пополняться ежегодно. Ведь не смотря на круглую дату, кафедра информатики и вычислительной техники еще очень молода и впереди ее ждет немало лет успешной работы.
Список использованных источников
1. Музей Тульского государственного педагогического университета имени Л.Н. Толстого (корпус №4)
2. Архив Тульского государственного педагогического университета имени Л.Н. Толстого (общежитие №2)
3. Вин, Д. – Искусство web‑дизайна/ Д. Вин. – СПб: Питер, 2003.