Разработка сайта

3.1. Описание основных дизайнерских решений

После анализа дизайна уже существующих музыкальных сайтов, мною был выбран стиль – минимализм. Данный стиль помогает сосредоточить внимание пользователя на основной информации сайта, не отвлекая его на элементы дизайна и навигации.

Эскиз сайта приведен на рисунке 5.

Рис. 5. Эскиз внутренней странице сайта

Для оформления сайта мною был выбран основной цвет черный – спокойный, добросовестный, придает чувство комфорта. Цвет тех, кто уверенно стал на ноги, любит друзей и предан им.

Полоса прокрутки была раскрашена в серый цвет. Так как цвета по умолчанию присущи всем сайтам Интернета, было решено так и оставить.

На главной странице сайта расположены новости из шоу бизнеса и при помощи меню возможен переход к биографии исполнителей и текстам песен.

Структура страниц такова: в центре экрана располагается выбранной песни текст или биография исполнителей, слева экрана располагаются меню и проигрыватель. Такая структура дает возможность пользователю самому управлять содержимым экрана, а также детально изучить предложенную информацию.

Схема структуры сайта приведена на рисунке 6.

Главная страница

Биография

Тексты песен

Би2

Depeche Mode

Би2

Depeche Mode

Варвара

Полковнику

Мы не ангелы

Enjoy the silence

Freelove

Question of time

Рис. 6. Схема структуры сайта

Данный интерфейс интуитивно понятен, и не вызывает у пользователя затруднений. А самое главное: не отвлекает внимание.

3.2. Верстка страниц и таблиц стилей для форматирования

Для верстки сайта использовалась фреймовая структура. Для каждой категории была создана своя страница, в которой есть фреймы.

Чтобы после нажатия на кнопки ссылки в списке песен проигрыватель воспроизводил музыку, был написан следующий скрипт:

var opera = Boolean(window["opera"]);

var ie = (navigator.appName.indexOf("Microsoft") != -1) && !opera;

function mju_play_file(chars) {

if (!chars.length) return false;

var mc = ie ? window.mju : window.document.mju;

mc.SetVariable("play_file",chars);

}

В структурировании страниц также не обошлось без таблиц. Таблицы дают возможность точно позиционировать элементы сайта. Поэтому перед тем как вписать в код страницы фреймы, была создана таблица (<table>) со строками (<tr>). В которых расположился список песен, также при помощи таблиц был создан элемент меню .

Таблица стилей. Благодаря тому, что сайт структурирован с помощью таблицы и фреймов css понадобились только для управления размещением вкладок (названий страниц) и задание общих свойств сайта. Так поля (padding) и отступы (margin) были заданы со небольшим значением, цвет фона (background-color), о котором рассказывалось в предыдущем пункте, задан со значением: «black».

Как говорилось ранее, для оформления вкладок использовался стандартный шрифт Tahoma и Arial, которые окажется у всех пользователей на компьютере и информация не измениться в зависимости от компьютера.

В результате проведенных действий, также устранения всех мелких неисправностей страницы сайта приобрели вид показанный на рисунках 7, 8.

Рис. 7. Главная страница сайта

Рис. 8. Страница «Тексты песен»