Добавлен: 28.03.2023
Просмотров: 256
Скачиваний: 2
HREF - путь к связываемому файлу, который определяет URL (Universal Resource Locator, универсальный указатель ресурса);
TYPE - MIME-тип данных подключаемого файла;
MEDIA - Определяет устройство, для которого следует применять стилевое оформление.
Из данных параметров мы уделим особое внимание параметру REL, т.к. непосредственно этот параметр определяет отношения между HTML-документом и файлом, на который делается ссылка. Для браузера это крайне важно, необходимо определить, как использовать подключаемый документ. Есть три вида взаимоотношения между каскадными таблицами стилей и HTML-документа:
Фиксированный (persistent). Такая таблица стилей всегда связана с документом и ее стили комбинируются со стилями активной таблицы. Чтобы сделать таблицу стилей фиксированной, нужно параметру REL задать свойство «stylesheet» и не указывать параметр TITLE.
Пример
<LINK REL="stylesheet" HREF="styles.css" TYPE="text/css">
Предпочтительный (preferred). Такая таблица стилей загружается по умолчанию и не является обязательной. Чтобы сделать таблицу стилей предпочтительной, нужно параметру REL задать свойство «stylesheet», а также указать параметру TITLE уникальный заголовок. Такое свойство параметра REL позволяет сгруппировать несколько предпочтительных таблиц, при этом каждая из них должна иметь уникальный заголовок, они будут включаться и выключаться одновременно. В случае когда объявляем несколько групп предпочтительных таблиц, то первая из них будет иметь превосходство над остальными.
Пример
<LINK REL="stylesheet" HREF="styles.css" TYPE="text/css" TITLE="default-style">
Альтернативный (alternate). Такая таблица стилей может быть выбрана пользователем, как альтернативный вариант предпочтительной таблице. Чтобы сделать таблицу стилей альтернативной, нужно параметру REL задать свойство «alternate stylesheet» и указывать параметр TITLE.
Пример
<LINK REL="alternate stylesheet" HREF="main-styles.css" TYPE="text/css" TITLE="main-style">
В итоге мы определились со свойством параметра REL, который нам необходим для дальнейшей работы со стилями. Классическому стилю мы придаем параметр REL с свойством «stylesheet», а двум остальным задаем «alternate stylesheet».Что отражено ниже в части HTML-кода:
...
<LINK title="default" rel="stylesheet" type=text/css href="stylesheet.css" media=screen>
<LINK title="style1" rel="alternate stylesheet" type=text/css href="style1.css" media=screen>
<LINK title="light" rel="alternate stylesheet" type=text/css href="light.css" media=screen>
...
Смена стилей
При первичной загрузки HTML-страницы вступают в работу фиксированные и предпочтительные таблицы стилей, а альтернативные таблицы могут быть выбраны пользователем вручную. Некоторые браузеры более новейших версий, имеющие поддержку CSS3, позволяют применить данную функции. Для выбора стиля достаточно перейти на вкладку Вид > Стиль страницы и выбрать нужный стиль, такой путь применяется у большинства браузерах. В более поздних версиях поддержки этой функции нет. В данной ситуации нам поможет JavaScript, чтобы пользователи с более поздними версиями браузеров могли воспользоваться функцией смены стилей.
Скрипт
function setActiveStyle(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title"))
{
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyle(){
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
{
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled)
return a.getAttribute("title");
}
return null;
}
function getPreferredStyle (){
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
{
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title"))
return a.getAttribute("title");
}
return null;
}
Коротко поясним эти скрипты.
Функция function setActiveStyle(title)- непосредственно функция переключения.
Она находит все элементы Link в документе и активирует те таблицы, которые должны включиться при загрузке страницы.
Блок-схема указанной функции приведена в приложении 3.
Функция function getActiveStyle возвращает текущий стиль.
Также ищем все элементы link документа. Затем нужно убедиться, что link — это таблица стилей. Далее проверяем, есть ли у нее заголовок. Этого достаточно, чтобы выявить предпочтительную или альтернативную таблицу стилей.
Последней проверкой необходимо убедиться, что выбранная таблица активна. Если все три проверки возвращают нам true, то мы нашли активную таблицу и можем возвратить ее заголовок.
Блок-схема приведена в приложении 3.
Функция function getPreferredStyle()нужна для того, чтобы выяснить какая таблица у нас предпочтительная.
Cookies
function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";}
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0)
return c.substring(nameEQ.length,c.length);
}
return null;
}
Поясним, для чего нужны Cookies. Мы написали скрипт, который позволяет нам менять стиль сайта. А пользователи получили возможность выбора персональных настроек для сайта. Но эти настройки исчезнут, как только пользователь покинет сайт. Для того чтобы такого не было, и используют Cookies.
Onload
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
В функции onload мы, в первую очередь, определяем переменную title, которая либо содержит значение предыдущей таблицы стилей сохраненной в cookies или, в случае, когда таковой нету, заголовок нашей предпочтительной таблицы.
Onunload
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
Сохранить cookies в событие onunload проще. Все что нам понадобится, это функция getActiveStyleSheet(), чтобы возвратить активную таблицу стилей и сохранить ее в cookies.
Выбранный стиль будет сохранен в cookies. Чтобы использовать один и тот же стиль для всего сайта, нужно поместить ссылки на соответствующие css файлы и файл styles.js между тегами <head> и </head> каждой страницы.
3.2. Применение эргономики интерфейсов в рамках проекта
Посмотрим, насколько полученный дизайн сайта соответствует положениям эргономики интерфейсов.
Цветовое решение
Цвет один из самых неоднозначных элементов web-дизайна. Цвет может подчеркнуть контекст, а может и оттолкнуть.
При разработке стилей мы учитывали следующие требования, налагаемые на выбор цветового решения:
- Текст не должен сливаться с фоном, а заголовки теряться.
- Использование контрастных сочетаний вызывающих напряжение глаз так же не приемлемо.
- Необходимо что бы цветовое решение соответствовало форме подачи материала, его содержанию, аудитории сайта.
Скорость загрузки сайта
Нельзя не учитывать того факта, что пользователи предпочитают работать с быстро загружающимися сайтами. К сожалению, на скорость загрузки влияют многие факторы, такие как пропускная способность сервера, качество соединения с Интернетом и т. д. Контент сайт является лишь одним из этих факторов, но его обязательно следует учитывать при разработке сайта.
Разрешение сайта
Что лучше - «резиновые» сайты с плавающим дизайном или сайты с фиксированным разрешением, - отвечать на этот вопрос нужно, исходя из задач сайта. Безусловный плюс «резинового» сайта в том, что он позволяет полностью использовать рабочую область монитора при большом разрешении, позволяя, в то же время, просматривать сайт без полосы прокрутки на экранах меньшего размера. Это весьма актуально для сайтов с большим количеством разнообразной информации, разбитой на несколько визуальных блоков или, например, для сайтов, содержащих сложные таблицы. Представьте, однако, страницу, основным содержанием которой является несколько абзацев текста, растянутую на всю ширину 19-дюймового монитора. Длинные текстовые строки затрудняют восприятие информации и порой выглядят неаккуратно. В данном случае лучше «зафиксировать» ширину сайта, или диапазон, в пределах которого сайт будет растягиваться.
На сайте много элементов мультимедиа, в частности, очень много фотографий. Но это не мешает работе, так как картинки «весят» немного. Правильно подобранные графические элементы помогают пользователю быстрее понять тематику сетевого ресурса. Кроме того, с помощью графики легко расставить акценты, визуально разделить блоки данных, что облегчает восприятие информации на сайте. Однако не следует забывать о негативном влиянии чрезмерного увлечения графикой на скорость загрузки страниц. Излишняя «пестрота» на сайте и большое количество рекламных баннеров может отвлекать посетителя от необходимой информации и сервисов, раздражая, и делая его работу неэффективной. Задача web-дизайнера заключается как раз в том, чтобы преподнести информацию в наиболее выгодном свете, создав при этом приятный внешний облик сайта.
Ссылки. Сайт отличается большим количеством ссылок. Причем не только на страницы данного сайта, но и на другие web-ресурсы. Например, на ресурсы учебных заведений.
Информационное наполнение
Информация, располагающаяся на сайте, является «смыслом» его существования. Будь то статьи, каталог продукции или банковские графики, необходимыми требованиями для размещения контекста являются грамотная верстка, хорошо читаемый шрифт, выделение всех уровней заголовков, четкость и краткость формулировок. Информацию значительного объёма следует разбивать на несколько страниц, связанных между собой гиперссылками. При размещении на сайте статей, новостей и другой текстовой информации целесообразно воспользоваться услугами редактора, что обеспечит стройность изложения и отсутствие грамматических ошибок в тексте.
Навигация
Одним из признаков качественного сайта является «дружелюбная» навигация, позволяющая посетителю не только находить необходимые данные, но и легко ориентироваться в рамках сайта. Логичная информационная структура сайта и грамотно оформленные элементы навигации (меню, ссылки, форма поиска) делают работу гораздо более удобной. Помимо этого, широко используется «строка подсказок», отображающая местоположение пользователя в иерархии сайта. Привычное и интуитивно понятное расположение управляющих элементов (логотип, название компании, кнопки быстрого перехода) позволяет пользователю не задумываться лишний раз о выборе путей перемещения по страницам.
Данная глава является основной во всей работе, так как посвящена именно разработке стилей для сайта. Разработали три разных стиля, написали скрипт, позволяющий посетителю сайта возможность выбора наиболее удобного для него оформления. Кроме того, мы посмотрели, как меняется дизайн сайта, какие преимущества имеются по сравнению с первоначальным видом, какие недостатки имеются.
Список использованной литературы
- Анар Бабаев, Николай Евдокимов, Михаил Боде, Евгений Костин, Алексей Штарев Раскрутка. Секреты эффективного продвижения сайтов. — СПб.: Питер, 2013. — С. 272. — ISBN 978-5-496-00600-2.
- Вендров А.М. Проектирование программного обеспечения экономических информационных систем. - М: «Финансы и статистика», 2010
- Дж. Берд Веб-дизайн. Руководство разработчика = The Principles of Beautiful Web Design, 2nd Edition. — П.: «Питер», 2012. — С. 224. — ISBN 978-5-459-00901-9.
- Игорь Ашманов, Андрей Иванов Оптимизация и продвижение сайтов в поисковых системах. — СПб.: Питер, 2009. — С. 400. — ISBN 978-5-388-00008-8.
- Калиновский А. Юзабилити: как сделать сайт удобным – М.: Новое знание, 2015. – 220с.
- Квинт И. HTML,XHTML и CSS на 100%.- Спб.: Питер, 2010. -384с.
- Кейт Шенгили-Робертс. CSS: каскадные таблицы стилей. Библиотека профессионала, М.: Издательство Вильямс, 2013.
- Крамер Э. “HTML:наглядный курс Web-дизайна”, Вильямс, IDG Books Worldwide, 2011. -304с.
- Лешек А. Мацяшек. Анализ требований и проектирование систем. Издательский дом «Вильямс». 2012-432с
- Нидерст Д. “Web-мастеринг для профессионалов. Настольный справочник”
- Олищук Андрей Владимирович. Разработка Web-приложений на PHP 5. Профессиональная работа. — М.: «Вильямс», 2006. — С. 352. — ISBN 5-8459-0944-9.
- Севостьянов Иван Олегович Поисковая оптимизация. Практическое руководство по продвижению сайта в Интернете. — СПб.: «Питер», 2010. — 240 с. — ISBN 978-5-49807-670-6.
- Стив Суэринг, Тим Конверс, Джойс Парк. PHP и MySQL. Библия программиста, 2-е издание = PHP 6 and MySQL 6 Bible. — М.: «Диалектика», 2010. — С. 912. — ISBN 978-5-8459-1640-2.
- Сырых Ю.А. Современный web-дизайн. Рисуем сайт, который продает. – М.: ООО «И.Д.Вильямс», 2012.- 304с.
- Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И. Основы Web-технологий. Интернет-университет информационных технологий - ИНТУИТ.ру, БИНОМ. Лаборатория знаний, 2013.- 376с.
- Храмцов П.Б.Введение в HTML и CSS. Интернет-университет информационных технологий - ИНТУИТ.ру, БИНОМ. Лаборатория знаний, 2012.- 160с.
- Якоб Нильсен, Хоа Лоранжер Web-дизайн: удобство использования Web-сайтов = Prioritizing Web Usability. — М.: «Вильямс», 2007. — С. 368. — ISBN 0-321-35031-6.
- Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems. — СПб.: Питер, 2010
- Usability 101: Introduction to Usability, Jakob Nielsen's Alertbox. Retrieved 2010-06-01
- Jakob Nielsen (1994), Usability Inspection Methods, Morgan John Wiley & Sons
Приложение 1. Листинг программы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />