Разработан файл style.css для того, чтобы все страницы сайта имели одинаковое оформление.
Таблица 4.
Каскадная таблица стилей
| Код | Пояснение |
| html {height: 100%;} | Высота документа 100%. |
| * { margin: 0; padding: 0;} | Отступ слева и отступ справа 0. |
| a:link { color: #990000; text-decoration: none; font-family:Monotype Corsiva; font-size: large;} | Стилевое оформление ссылкам, которые еще не посещались: устанавливаем их цвет, оформление текста, указываем шрифт написания и его размер. |
| a:visited { color: #000; } | Цвет посещенной ссылки. |
| a:hover { color: #ff0000; text-decoration: underline; } | Стиль ссылки при наведении на неё курсора (цвет и подчеркивание). |
| p { margin-bottom: 6px; font-family:Monotype Corsiva;} | Межстрочный отступ и шрифт текста. |
| body { font:14px Verdana,Tahoma,Arial,sans-serif,Monotype Corsiva; color: #002000; background: #fff; margin: 0; padding: 0;} | Параметры для контейнера body: шрифт и размер текста, его цвет, цвет фона, отступы слева и сверху. |
| #title {margin: 40px 0px 0 170px;} | Отступы для заголовка страницы. |
| #menu {background: #fff; height: 38px; width: 100%; margin-left: 0%; margin-right: 0%;} | Параметры для верхнего меню: фон, высоту, ширину, отступы справа и слева. |
| #menu ul { padding-top: 7px; padding-left: 10px;} | Отступы сверху и слева для элементов меню. |
| #menu li { list-style: none; display: inline;} | Параметры для элементов меню: маркеры, положение элемента в документе. |
| #menu li a { padding: 6px 6px 6px 6px; line-height: 28px; height: 30px; text-decoration: none; color: #fffff0; background: #660000; border-right: 3px solid #420000; border-left: 3px solid #420000; border-top: 3px solid #420000;} | Параметры для ссылок в меню: отступы, межстрочный интервал, высоту, оформление текста, цвет, фон, толщину, стиль и цвет правой, левой и верхней границ. |
| #menu li a:hover, #menu li a.selected { line-height: 28px; padding-top: 7px; background: #B32D2D; color: #420000; border-top: 3px solid #990000; border-right: 3px solid #990000; border-left: 3px solid #990000;} | Параметры для ссылок меню при наведении на них курсора и для выбранных ссылок: межстрочный интервал, отступ сверху, цвет фона, цвет текста, стиль, толщина и цвет верхней, правой и левой границ. |
| #main {width: 644px; float: left; margin-bottom: 10px;} | Параметры для тега main: ширину, выравнивание элемента, нижний отступ. |
| table { border-collapse: collapse; margin: 0px auto 0px auto; border: 2px solid #660000; font-family:Monotype Corsiva;} | Параметры для таблиц: отображение границ вокруг ячеек, отступы, толщина, стиль и цвет границ, шрифт текста внутри таблицы. |
| a img { border: 3px solid #840020; } | Толщина, стиль и цвет границы вокруг «кликабельных» изображений. |
| a:hover img{border: 3px solid #ffff80; } | Толщина, стиль и цвет границы вокруг «кликабельных» изображений, на которые наведен курсор. |
После того, как все параметры оформления страниц заданы, были сконструированы страницы сайта при помощи HTML. Рассмотрим макет страницы.
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Музей им. А. А. Дунина-Горкавича
Указываем тип документа. Задаем текст заголовка страницы. Описываем метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. И с помощью тега подключаем к страницам сайта ранее созданный файл style.css.
Выравнивание всех элементов внутри тега по центру. Создаем таблицу для верхнего контейнера страницы. В первой строчке таблицы создаем небольшой JavaScript, результатом работы которого является приветственная надпись в верхнем правом углу страницы. Данный скрипт считывает системные дату и время. Во второй строке таблицы размещаем изображение top.png. Для соблюдения «резиновости» сайта заголовок оформлен в виде таблицы с невидимыми границами.
| Добр ! Сегодня: |
| § Главная § История музея § Новости § Залы и коллекции § Контакты |
Разработка Flash-галереи
Для создания фото-галереи были использованы программа для создания анимационных файлов Adobe Flash и язык программирования Action Script. Весь процесс можно разделить на следующие этапы:
Подготовка фотографий
Все изображения должны быть представлены в двух вариантах: размером 558×332px и 60×60px. Для этого используем программу Adobe Photoshop и Microsoft Office Picture Manager. Продемонстрируем обработку изображения на примере.
Рисунок 7. Пример исходного изображения
Рисунок 8. Работа с изображением в Microsoft Office Picture Manager (создание полноформатного изображения)
Исходное изображение, размер 268×178px. Создаем две копии данного изображения. Работаем с первой копией. При помощи программы Microsoft Picture Manager изменяем размер изображения до максимально возможного, но меньшего или равного 558×332px. В данном случае увеличиваем изображение на 186% (размер вычисляем математически).
Рисунок 9. Работа с изображением в Microsoft Office Picture Manager (создание миниатюрного изображения).
Работаем со второй копией. Теперь изменяем размер изображения до максимально возможного, но меньшего или равного 60×60px.
Рисунок 10. Работа в Adobe PhotoShop
В Adobe PhotoShop создаем новый документ размером 558×332px, заливаем фон таким же цветом, как и фон центрального контейнера нашей странице, чтобы границ галереи не было видно.
Рисунок 11. Создание полноформатного изображения в Adobe PhotoShop
Затем в подготовленный фон вставляем наше подготовленное большое изображение, сохраняем фотографию. Полноформатное изображение готово.
Аналогичные операции проделываем и для миниатюр изображений, только документ в PhotoShop создаем размером 60×60px, и в него вставляем маленькую копию нашей фотографии. Все полноформатные изображения размещаем в папку «full», миниатюры – «preview», папки размещаются в одной директории со страницей, на которой мы планируем разместить данную галерею. Также полноформатные изображения и изображения в миниатюре должны иметь одинаковые имена.
Работа в AdobeFlash
Сначала создаем xml-файл в блокноте или другом html-редакторе со следующим кодом (gallery.xml):
…
Затем в программе Adobe Flash создаем новый ролик Action Script 2.0 с необходимыми параметрами: ширина: 578px, высота: 420px, частота обновления кадров: 30, цвет фона такой же, как и фон страницы (рис. 14). Нажимаем клавишу F9 и пишем следующий код (рис. 15):
Рисунок 12. Создание нового ролика Action Script 2.0 в Adobe Flash
Рисунок 13. Код на языке Action Script 2.0
var sliderGallery = new XML();
sliderGallery.ignoreWhite = true;
sliderGallery.load("gallery.xml");
// Обработка загрузки XML-файла
sliderGallery.onLoad = function() {
// Получаем данные о каталогах с изображениями
_root.previewFolder = sliderGallery.firstChild.attributes.preview_folder;
_root.fullFolder = sliderGallery.firstChild.attributes.full_folder;
_root.galleryWidth = 558;
_root.galleryHeight = 400;
_root.scrollFlag = 5; // Контрулирует прокрутку при уходе курсора
// Получаем список изображений
_root.imagesList = sliderGallery.firstChild.childNodes;
_root.imagesAmount = _root.imagesList.length;
// Определяем размеры изображений предварительного просмотра
_root.previewWidth = 60;
_root.previewHeight = 60;
// Координаты расположения ленты прокрутки изображений
_root.previewX = 10;
_root.previewY = 345;
// Координаты расположения основного изображения
_root.fullX = 10;
_root.fullY = 10;
// Загружаем превьюшки
callPreview();
createPreviewPanelMask();
scrollPreview();
callFullImage(0);
}
// Обработка прокрутки превьюшек
function scrollPreview() {
_root.onEnterFrame = function() {
if (_root.scrollFlag > 0) {
previewCon._x += Math.cos(((maskMC._xmouse) / maskMC._width) * Math.PI) * 10;
if (previewCon._x > maskMC._x) {
previewCon._x = maskMC._x; }
if (previewCon._x < (maskMC._x - (previewCon._width - maskMC._width))) { previewCon._x = (maskMC._x - (previewCon._width - maskMC._width));}
if (_root.scrollFlag < 5) {_root.scrollFlag--; }}}}
// Формирование полосы прокрутки миниатюрных изображений
function callPreview() {
// Создаем пустой клип для отображения превьюшек
_root.createEmptyMovieClip("previewCon", _root.getNextHighestDepth());
previewCon._x = _root.previewX;
previewCon._y = _root.previewY;
var previewLoader = new MovieClipLoader();
var preLoader = new Object();
previewLoader.addListener(preLoader);
for (i = 0; i < _root.imagesAmount; i++) {previewURL = _root.previewFolder + "/" + _root.imagesList[i].attributes.file;
smallCon = previewCon.createEmptyMovieClip(i, previewCon.getNextHighestDepth());
smallCon._x = (_root.previewWidth + 5) * i;
previewLoader.loadClip(previewURL, smallCon);
// Добавляем обработчик события
preLoader.onLoadComplete = function(target) {
new Tween(target, "_alpha", Strong.easeOut, 0, 100,.5, true);
target.onRelease = function() {
callFullImage(this._name);}
target.onRollOver = function() {this._alpha = 70; }
target.onRollOut = function() { this._alpha = 100; }}}
// События контроля прокрутки
/*previewCon.onRollOver = function() {_root.scrollFlag = 5;}
previewCon.onRollOut = function() { _root.scrollFlag = 4;}*/}
// Формирование маски для отображения превьюшек
function createPreviewPanelMask() {
_root.createEmptyMovieClip("maskMC", _root.getNextHighestDepth());
maskMC._x = _root.previewX;
maskMC._y = _root.previewY;
maskMC.beginFill(0x000000, 100);
maskMC.lineTo(_root.galleryWidth, 0);
maskMC.lineTo(_root.galleryWidth, _root.galleryHeight);
maskMC.lineTo(0, _root.galleryHeight);
maskMC.lineTo(0, 0);
previewCon.setMask(maskMC);}
// Отображение полной картинки
function callFullImage(imageIndex) {
fullURL = _root.fullFolder + "/" + _root.imagesList[imageIndex].attributes.file;
_root.createEmptyMovieClip("fullMC", _root.getNextHighestDepth());
fullMC._x = _root.fullX;
fullMC._y = _root.fullY;
fullLoader = new MovieClipLoader();
fullLoader.loadClip(fullURL, fullMC);}
Теперь запускаем наш ролик и сохраняем (slider_gallery.swf) в папке с остальными документами галереи.
Работа с html-страницей
Для добавления нашей галереи на страницу сайта пишем следующий html-код:
Рисунок 15. Созданная flash-галерея размещена на странице сайта
Наша flash-галерея готова. Результат представлен на рис. 15. Ряд из миниатюрных изображений прокручивается вслед за указателем мыши. При нажатии на миниатюрное изображение загружается его полноформатная копия. Так как все изображения имеют одинаковый размер благодаря обработке в Adobe PhotoShop, при смене фотографий галерея не «прыгает», она крепко «закреплена» на странице.
Заключение
В исследования был разработан и опубликован в сети Интернет web-сайт музея «Истории освоения и изучения Сибири им. А.А. Дунина-Горкавича», удовлетворяющий требованиям заказчика.
Были проведены исследования существующих web-ресурсов и изучена научная, учебно-методическая и специальная литература. На основании исследования выделена типовая структура web-сайтов музеев, выявлены требования к данным web-ресурсам и разработана структура web-сайта музея «Истории освоения и изучения Сибири им. А.А. Дунина-Горкавича».
Данный сайт ориентирован на жителей и гостей г. Тобольска, желающих познакомиться с историей города, историей изучения и освоения Сибири. Разработанный web-сайт может быть использован в просветительских целях.
При разработке web-сайта были проанализированы и использованы современные web-технологии, позволяющие создавать динамические web-страницы. Наиболее подходящими для выполнения поставленной задачи оказались язык разметки гипертекста HTML, язык программирования Action Script 2.0, JavaScript и каскадные таблицы стилей. При разработке web-сайта был использован бесплатный хостинг на webservis.ru, осуществляющий простой и надежный способ реализации любых сайтов.
В качестве дальнейшего совершенствования web-сайта представляется возможным доработка интерфейса сайта с целью дальнейшего повышения его информативности, привлекательности и удобства, а также пополнение и обновление материалов фотогалереи.