Курсовая работа: Разработка информационного ресурса "История кафедры информатики и вычислительной техники"
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. Этот атрибут выполняет выравнивание по верхнему краю, что обеспечивает фиксированное положение меню.
Общий цвет фона светлый, а текста темный, что обеспечивает приемлемое качество распечатки, на случай если у пользователя возникнет необходимость в этом.
2.3 Таблицы стилей
Подключить таблицы стилей можно несколькими способами. Например, при помощи описания в секции заголовка или 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;}