Опис створеного сайту
Сайт створювався за допомогою програми Adobe Dreamweaver CS3. Дизайн розроблявся за допомогою програми Adobe Photoshop CS3, у якій спочатку був розроблений макет сайту, а потім за допомогою інструменту ніж, був розподілений на так звані слайди. При збережені файлу для веб ресурсів був створений html документ, у якому і почали працювати.
Основній скелет сайту розбито за допомогою тегів div. Їхнє взаєморозміщення та дизайн контролюється за допомогою CSS стилів.
Мал. 1Вид коду сайту, розбитого тегами div
Загалом сайт складається з 24 сторінок. Серед них:
Головна сторінка (index.html) на яка має особливий дизайн, та на якій розміщено усі найголовніші посилання до інших сторінок;
Мал.2 Вид головної сторінки сайту
Основні сторінки про княгинь, на яких розмішена інформація про кожну з них;
Мал.3 Вид сторінки, присвяченій Княгині
Сторінка, що являється фотогалереєю (foto.html), на якій можна переглянути цікаві фотографії, що стосуються запропонованої теми. Фотографії можна переглядати у 2 варіантах: мініатюр та розгорнутих зображень.
Мал.4 Вигляд Фотогалереї у режимі мініатюр
Мал.4 Загальний вигляд Фотогалереї у режимі розгорнутих зображень
Сторінка, що виконую роль мапи сайту (mapa.html), для швидкого доступу до усіх сторінок сайту;
Мал.5 Вигляд Мапи Сайту
Якщо детальніше розглянути CSS код сайту, то побачимо, що для усіх тегів div задані схожі атрибути: width(відповідає за ширину), height(відповідає за висоту),background (відповідає за фон), position(відповідає за розміщення відносно лівого верхнього кута єкрану монітору), float(відповідає за розміщення відносно подібного собі тега).
Мал. 6 Вигляд CSS коду
Цікаво виконане випадаюче меню внутрішніх сторінок сайту.
По-перше меню зроблено за допомогою списку(стандартна схема). Але для того, аби воно було по-справжньому випадаючим, використовується JQuery скрипт, прописаный в окремому документі, та додатковий скрипт для сторінки (спеціально для браузера Opera)
Мал.7 Вигляд випадаючого меню
<script>
function jsHover() {
var hEls = document.getElementById("menu").getElementsByTagName("li");
//alert(hEls.length);
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() {this.className+=" jshover"; }
hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
}
}
//if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1){alert('1'); window.attachEvent("onload", jsHover);}
</script>
Підсвітка окремих елементів , що є гіперпосиланнями виконана задопомогою того ж CSS. Для кожної потрібної картинки, що мала підсвічуватися була створена подібна, але з використанням певних стилів для оформлення. Потім за допомогою властивостей гіперпосиланяь a:link, a:hover, a:visited, a:active було задано властивості, згідно з якими, в залежності від дій користувача змінювалися створені раніше картинки.
Мал. 8 Підсвітка гіперпосилань
На сайті присутня й анімація. Як відомо, візуальні єфекти на веб-ресурсі не повинні бути занадто яскравими, аби вони не були відволікаючими факторами, що не дають смоги сконцентруватися на роботі. На даному ж сайті є анімація свічки, що створює єфект старовини та затишку, але в той же час не привертає занадто багато уваги.
Цікавою частиною сайту є фотогалерея. Вона виконана за допомогою програми VisualLightBox. Створені також додаткові скрипти для конфігурації фотогалереї.
Мал. 10 Вигляд програми VisualLightBox
Для текстів на сайті також задані певні параметри. По-перше це розміри, колір та вид шрифту, а також відступи для нормальног рознашування всередині тегів div.
Наразі я маю на думці розробку адаптивного дизайну для сайту, адже все більша кількість населення користується додатковими пристроями, для виходу у мережу. Саме тому проблема дизайну, що міг би виглядати достойно при перегляді з будь-якого пристроє залишається актуальною.
Перевагами мого сайту є його незвичний дизайн, що тим не менш відповідає нормам юзабіліті, та так звана «резинова» розбивка, що дозволяє сайту нормально функціонувати, при перегляді у будь-якому браузері. Використання сучасних технологій, таких як JQuery дозволяють даному веб ресурсу бути быльш сучасним та цікавим у використанні .