ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ «ВОРОНЕЖСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»

WEB-ДИЗАЙН. ЗНАКОМСТВО С HTML Практикум для вузов

Составители: В.В. Васильев, Л.В. Хливненко

Издательско-полиграфический центр Воронежского государственного университета 2007

Утверждено научно-методическим советом математического факультета 31 января 2007 г., протокол № 5

Рецензент С.А. Ткачева

Практикум подготовлен на кафедре математического моделирования математического факультета Воронежского государственного университета. Рекомендуется для студентов всех форм обучения.

Для направления: 010101 (010100) – Математика

2

1. Элементы web-дизайна При создании собственного сайта, сами того не замечая, мы будем наступать на грабли, через которые прошли многие начинающие дизайнеры. Поступим мудрее. Учиться на чужих ошибках менее болезненно, поэтому в этой главе мы познакомимся с приемами создания собственного стиля, с правилами хорошего тона в web-дизайне и рекламой созданного сайта. При создании сайта, так же как при программировании, работа начинается с проектирования с помощью карандаша и бумаги. Первые вопросы, на которые четко нужно знать ответы: Какова цель создания сайта? На какую аудиторию он рассчитан? Что интересного для посетителей будет содержать сайт? Именно содержание сайта привлекает посетителей, поэтому начинать разработку сайта нужно с содержания, а не с оформления. Впоследствии под конкретное содержание можно подобрать подходящий дизайн, который дополняет текст и помогает хорошо в нем ориентироваться. Можно подсмотреть идеи на сайтах аналогичной тематики. Структура сайта должна быть тщательно продумана. Человек хорошо воспринимает на одной странице меню, состоящее не более чем из семи пунктов. Если семи заголовков недостаточно, составляйте подменю на других страницах или используйте иерархические выпадающие меню (не более трех уровней). Проектировать карту сайта желательно так, чтобы каждая страница имела свою тему и была бы доступна максимум за три клика. Чем яснее будет логика навигации по сайту, тем лучше. Сложные навигационные системы не вызывают у посетителя желания в них разобраться, а скорее отталкивают от сайта. В хорошем сайте пользователь с любой страницы может попасть на главную. Ведь многие люди попадают на сайт с поисковых систем и, возможно, решат посмотреть первую страницу. Еще лучше, если навигационная система дублируется на все страницы. Моветоном является сайт, содержащий тупиковые страницы, возврат с которых возможен только через кнопку Назад браузера. Еще хуже, если стоят ссылки на недоделанные или отсутствующие страницы. Если навигационная система состоит из графических элементов, то ее желательно поддержать аналогичной текстовой версией. Текст грузится быстрее графики, и пользователь сразу получает возможность ориентироваться, не дожидаясь конца загрузки. Время – деньги! К тому же некоторые пользователи работают с отключенной графикой. Часто бывает, что пользователь не видит всю страницу на своем экране целиком. Чтобы поменьше заставлять посетителя пользоваться вертикальной линейкой прокрутки, создавайте внутренние гиперссылки, по которым осуществляется переход на нужный участок страницы. Помните, что пользователь не любит длинных страниц. Когда Вы размещаете длин3

ный текст, удобнее вначале составить план из гиперссылок на соответствующие части текста. Пусть пользователь сам решает, что он будет читать подробнее. Много усилий часто тратится на разработку фасада. Первая страница сайта должна содержать заголовки основных разделов и лучшие материалы. Цель: привлечь внимание пользователя и вовлечь его в информационный водоворот Вашего сайта. Смотря в Internet «крутые» сайты, например, Лувра или Эрмитажа, можно заметить, что их первые страницы содержат только большую картинку и красивую графическую вывеску. Плохо, если так же будет построена первая страница личного web-сайта. Большая, долго загружаемая фотография, помпезная вывеска о том, что это сайт дяди Васи, и предложение отправиться дальше только отпугнет посетителей. Дизайн сайта тоже рождается на бумаге. Хороший дизайн – это оптимальное соотношение между качеством (красотой) и скоростью загрузки страниц. Любая страница вместе с графикой должна весить не более 150 Кб и загружаться менее, чем за минуту. Включение каждого элемента, в том числе анимационных роликов, Java-апплетов, скриптов должно быть оправдано необходимостью пользователю. «Скромность и ясность» – вот девиз начинающего дизайнера. Человек не любит бегущие строки, особенно те, на которых текст бежит слишком быстро. Каскад окон, открывающихся вместе с сайтом. Музыкальное сопровождение загрузки страницы. Контрастные цвета и мерцающий текст, утомляющие глаза. Перечисленные методы грубо привлекают внимание и не вызывают желания побыть на сайте подольше или вернуться еще раз. Для того чтобы сайт воспринимался целостно, каждая его страница должна быть оформлена в одном стиле. Смысл использования цветов, способов оформления фраз и абзацев не должен меняться на разных страницах. Цветовая схема сайта отнимает много сил и времени у начинающего дизайнера. Известны несколько приемов подбора хорошо сочетающихся цветов. Весь спектр цветов в палитре можно представить в виде цветового колеса, которое помогает понять основные принципы гармонии и контраста. В цветовом круге рассматривается только один параметр цвета – его тон, определяющий название цвета. Другой параметр цвета – яркость. Яркость определяет светлый цвет или темный. Чем больше белой составляющей в цвете, тем выше его яркость; увеличение черной ведет к ее понижению.

4

Рассмотрим несколько методов подбора цветов. 1. Насыщенные дополнительные цвета контрастируют друг с другом и создают сочетания, которые сразу бросаются в глаза. 2. Приятнее смотрятся оттенки двух контрастных цветов (при низкой яркости). 3. Хорошо сочетать один цвет с двумя другими, смежными с дополнительными цветами к нему. 4. Для выделения деталей можно использовать белый или черный цвет. 5. Красивые палитры получаются при вписывании в цветовое колесо правильных многоугольников. Например, хорошо выглядят триады – тройка цветов, делящих цветовое колесо на три равные угловые части. 6. Смежные цвета применяют в четких цветовых схемах. Использование 25 % оттенков смежных цветов создают приятную пастельную цветовую гамму. 7. Сочетание ярких цветов с черным производит сильное впечатление. Обычно ярким цветом выделяют детали, а остальные цвета приглушают. Цветовая схема сайта должна дополнять содержание, создавая приятную и понятную среду для работы с ним. Можно использовать естественные цветовые ассоциации. Например, для фона сайта общества охраны природы можно использовать оттенки зеленого. Цвета обычно подбираются в зависимости от аудитории, на которую рассчитан сайт. Например, для молодежи более подходят яркие цвета, чем для старшей части населения. Мужчины предпочитают синий цвет красному, а женщины – наоборот. Темный текст на светлом фоне воспринимается намного лучше, чем светлый текст на темном фоне. Элементы web-страницы должны восприниматься целостно и складываться в гармоническую картинку. Понятно, что посетители, попав на Ваш сайт, не будут осознанно размышлять о гармонии элементов сайта, но подсознательно в первые секунды загрузки сайта пользователь принимает решение: останется он здесь или отправится дальше. Композиция в web-дизайне – это сочетание элементов изображения. Например, соотношение их размеров, сочетание цветов. Рассмотрим несколько правил для создания хорошей композиции. Целостность – все элементы связаны друг с другом (стилем, выравниванием, цветами), и каждый элемент гармонически вписывается в общую

5

картину. В целостной композиции дизайн страницы сочетается с логотипом (уникальный значок вашего сайта). Выразительность заключается в том, что дизайн захватывает внимание посетителя. Это оценка качества идеи дизайнера и найденной формы ее реализации. Выразительно могут выглядеть, например, хорошо подобранные контрасты по цветам, светлоте и размерам. Заголовок может быть ярче и больше по высоте, чем текст. Выявление центра – акцент на элементах, выражающих главную идею. Обычно центр находится чуть выше середины экрана. Некоторые дизайнеры смещают центр в сторону ярким контрастным элементом. Иногда элементы композиции вписывают в простую геометрическую фигуру: правильный многоугольник, ромб, круг, овал. Центр этой фигуры считают центром композиции. Неоднородность восприятия элементов в зависимости от их положения на экране. Экспериментально установлено, что: • наклонные отрезки воспринимаются уходящими вдаль – в сторону конца отрезка, дальнего от края экрана. Если конец отрезка примыкает к краю экрана, то подобный эффект пропадает; • предмет, близкий к краю экрана, воспринимается лежащим на поверхности, иначе – в глубине; • верх композиции должен быть более легким (менее насыщенным большими красочными элементами), чем низ. Например, большие буквы вверху страницы с текстом создают напряженность – подсознательное ощущение падения. Плохо сочетаются на одной странице рисованные и фотореалистические изображения. Нужно стараться включать в web-страницу только значимую, нужную для пользователя графику, связанную по смыслу с содержанием. При включении в web-страницы графических файлов обычно используют форматы gif и jpg, сжимающие изображения. GIF поддерживает 256 цветов, сжимает изображения без потери качества. JPG кодирует 16,7 млн цветов, может приводить к потерям качества (смазывать четкие линии). Размер одного и того же файла в формате jpg меньше, чем в gif. Форматы gif и jpg в очередной раз вынуждают делать выбор в пользу качества или скорости. Форматы типа bmp не подходят для представления в Internet, поскольку не предусматривают компрессии и, следовательно, картинка будет долго считываться. Фотографии часто размещают в формате jpg при соотношении качества к весу в 60–70 %. Как правило, на странице фотографии делают маленькими и не очень качественными с предоставлением пользователю возможности посмотреть увеличенный и улучшенный вариант фотографии. Тем самым создатели сайта не навязывают большие по весу фотографии, а пре6

доставляют пользователю решить самостоятельно – нужно ему это или нет? Дизайнеру приходится постоянно думать о том, что вид разработанного им сайта, возможно, будет изменен на ПК пользователя из-за разницы в аппаратуре и программах. Программы-браузеры, в том числе Netscape Navigator и Microsoft Internet Explorer, при выводе графики могут изменять палитру цветов из-за фиксированных возможностей монитора или системы. При этом идеально гладкие цвета могут стать шероховатыми, что не очень хорошо для концепции дизайна. Существует безопасная таблица цветов, в которую входят 216 цветов (дана их раскладка в шестнадцатеричной системе по палитре RGB), неизменяемых ни в Internet Explorer, ни в Netscape Navigator, ни в Windows, ни на Macintosh. Если на большей части страницы будет использован цвет из безопасной таблицы, то сама страница будет выглядеть более привлекательно. На момент написания этих строк безопасную таблицу цветов можно было найти по адресу www.artlebedev.ru/tools/colors и др. Еще одно обстоятельство, способное исказить вид web-страницы, состоит в разных размерах мониторов и разрешающих способностей видеоадаптеров ПК пользователей. Считается, что в мире на сегодняшний день большинство 15 дюймовых мониторов. Самая распространенная разрешающая способность 800 × 600 пикселей. Многие дизайнеры предпочитают создавать «резиновый» дизайн, в котором ширина элементов задается в % от ширины окна браузера. Имейте в виду, что моветоном является вынуждать пользователя прибегать к горизонтальной полосе прокрутки. Аккуратно оформленные страницы получаются при использовании таблиц с невидимыми границами. Однако следует помнить, что таблица отображается на экране, только когда она загрузится целиком, поэтому лучше не паковать все на странице в одну большую таблицу. Внешний вид web-сайта иногда можно улучшить при разбивке страницы на фреймы. Фрейм, или кадр, – это подокно, расположенное на web-странице. В кадрах отображаются другие web-страницы, поэтому каждый кадр загружается отдельно. Каждый кадр может иметь свои полосы прокрутки. Кадр называется статическим, если его содержание постоянно и динамическим в противном случае. Статические кадры часто используют для предоставления пользователю удобных навигационных средств, которые не нужно каждый раз подгружать заново. В динамический кадр подгружаются разные страницы в зависимости от выбора пользователя. Моветоном считается оформлять у себя ссылки на чужие сайты так, чтобы

7

чужие сайты открывались в вашем динамическом фрейме. Плохо выглядят много мелких фреймов на странице. Гиперссылка может находиться в одном из трех состояний: еще не просмотренная, активная (выбранная в данный момент), уже просмотренная. Стандартными цветами для отображения состояний текстовых гиперссылок являются соответственно синий, красный, фиолетовый. Часто стандартные цвета изменяют, подстраивая под дизайн. Цвета для всех трех состояний должны быть разными: для просмотренных гиперссылок темнее, чем для непосещенных. Желательно помнить, что подчеркнутое начертание в web часто обозначает ссылку. Поэтому лучше не использовать подчеркивание для выделения фрагментов текста. В браузерах пользователей может быть установлена разная кодировка текста. Не все посетители при этом загорятся желанием найти ту единственную, для которой написан сайт. Сайты с дружественным интерфейсом дают возможность выбрать кодировку для отображения сайта. Если в предполагаемую аудиторию посетителей сайта входят иностранцы, то нужно иметь несколько версий сайта на разных языках. Минимум – две версии: русскую и английскую. Признаком хорошего тона в web-дизайне является предоставление пользователю возможности написать письмо создателям сайта. Часто в сайт включают специальную страницу – гостевую книгу, в которой публикуются присланные отзывы и корректные ответы на них. Особое внимание нужно обращать на грамотность. Грамматические ошибки отталкивают от сайта даже больше, чем плохой дизайн. Когда шаблоны содержания и дизайна сайта готовы, приступают к написанию кода. В следующих частях этой лабораторной работы мы познакомимся с распространенным языком написания web-страниц – html. Лучше не хранить файлы, имеющие отношение к сайту, в навалку, а сразу завести несколько каталогов – для кодов web-страниц, рисунков, фотографий, архивов и т. п. Все имена файлов, связанных с сайтом, нужно именовать под DOS. Полные имена файлов нужно писать маленькими буквами. Помните о том, что большая часть пользователей и серверов Internet базируется на Unix. Unix в отличие от Windows вкладывает разный смысл в трактовку больших и маленьких букв в полных именах файлов. Ясно, что при некорректно распознанных ссылках вместо логотипа, например, посетитель увидит пустой квадратик. Если посетитель решит сделать закладку в своем браузере на Ваш сайт, то закладкой будет служить название web-страницы в строке заголовка, а не файла с текстом страницы. Непродуманные или стандартные названия (index, например) портят общее впечатление.

8

Из готовых к публикации страниц желательно убрать все комментарии. Уменьшится объем страницы, и пользователь будет лишен необходимости знакомиться со словесными характеристиками Ваших творческих усилий. Все картинки нужно снабжать альтернативным текстовым описанием для пользователей, работающих с отключенной графикой. Чтобы картинки занимали положенное место на странице, их масштабируют, задавая фиксированную ширину и высоту. При написании кода web-сайта следует включать в код METAинформацию. Поисковые серверы при регистрации web-сайта или страницы используют информацию элемента META, где описывается самое главное, связанное со страницей. Поисковые системы индексируют, как правило, из раздела описания 200 символов, из ключевых слов – 1000 символов. В раздел описания включают все наиболее часто встречающиеся на странице термины и их синонимы. В список ключевых слов можно включать фразы. Если ваша фраза совпадет с запросом пользователя на поисковой системе, то сайт может оказаться в начале списка найденных ссылок. Полезно знать, что поисковые системы при формировании поискового списка считают, сколько раз встречается запрашиваемое слово на странице. Поэтому для увеличения рейтинга сайта можно писать ключевое слово в разделе описания несколько раз. После написания кода важно провести всестороннее тестирование созданного сайта. Удобна ли навигация? Корректно ли работают все ссылки? Все ли в порядке с орфографией? Красиво ли выглядит сайт на мониторах с разными размерами и разрешением? И т. д. Лучше, если тестировать сайт будет посторонний человек. Вы будете смотреть на сайт с близкого расстояния глазами создателя. Значимость одних элементов Вы можете преувеличивать, а других недооценивать. Для публикации сайта в Internet можно воспользоваться бесплатными серверами, предоставляющими такую услугу всем желающим. Например, www.narod.ru, www.boom.ru. Часто сотрудникам выделяется часть пространства на web-сервере организации, где они работают. Так, например, студенты и сотрудники ВГУ могут опубликовать свои страницы на сайте ВГУ в разделе Сообщество|Домашние странички (подробнее см. Краткое руководство по размещению домашних страниц). Поддержка web-сайта включает в себя обновление информации (необходимое условие для увеличения посещаемости), работу с письмами читателей, анализ рейтинга сайта, поиск пратнеров и т. п. Рекламная кампания созданного сайта должна проводиться аккуратно, чтобы не иметь обратный результат. Спам (письма всем подряд с предложением заглянуть к вам) надо сразу исключить. Ответной реакцией на спам являются mailbombs (пачка писем размером в мегабайт каждое). 9

Дайте знать о своем сайте поисковым системам и on-line каталогам ссылок. Можно также оставить информацию о вашем сайте (зарегистрироваться в каталогах) на известных российских и зарубежных поисковых системах. Можно попробовать поставить на своем сайте счетчик «Rambler's Top 100», заполнив форму на сайте counter.rambler.ru/top100/. Этот шаг приведет к тому, что ссылка на сайт будет занесена в таблицы рейтинга «Rambler's Top 100» и вам будет сообщаться статистика посещения Вашего сайта. Можно найти популярные сайты со сходной тематикой и написать письмо web-мастеру с просьбой поставить на dас ссылку. Существуют бесплатные баннерные службы. Например, linkexchange.ru, bannerpoint.ru. Смысл баннерной рекламы заключается в вывешивании на чужих сайтах логотипа вашего сайта, являющегося гиперссылкой. Естественно, что чужие баннеры будут показываться на вашем сайте. Подробнее о баннерной рекламе можно почитать на сайте bannermaker.ru. Часто текстовые ссылки действуют на посетителей более убедительно. Баннеры многими воспринимаются как реклама. Хорошо подобранная коллекция ссылок будет привлекательна для гостей сайта. Перед тем как поставить ссылку на другой сайт, спросите разрешение у хозяина сайта. Скорее всего вам отплатят тем же. Лучше не ставить ссылки на конкурентов, а ссылаться на сайты со сходной, но дополнительной к вашей тематике. Web-мастера таких сайтов охотнее поставят ссылку на ваш. С помощью поисковых систем можно найти своих партнеров и конкурентов, а также тех, кто сам решил поставить на вас ссылку. Ключом для поиска может служить адрес вашего сайта. В WWW многие сайты объединяются по концепции web-кольца. Участники кольца ставят ссылки друг на друга по очереди 1→2, 2→3, …, n→1. Кольца часто являются незакрытыми, и можно попробовать стать участником сайта. За рубежом существует сайт http://www.webring.com, поддерживающий более 40 тыс. колец. Рекламная компания будет эффективна только тогда, когда будет создан содержательный и интересный для ваших читателей сайт! Посетители сами расскажут о нем своим знакомым. 2. Общие сведения об HTML Язык HTML в настоящее время является основным языком создания web-страниц? который формирует их внешний вид. Его нельзя ставить в один ряд с языками программирования. HTML обычно просто указывает другим программам (web-браузеру, например), как нужно отображать текст, рисунки и т. п., создает ссылки к другим web-документам. HTML по10

зволяет включать в текст и поддерживать работу объектов, созданных средствами JAVA, ActiveX и др. Web-страницы, написанные с помощью «классической» части HTML, статичны и не поддерживают интерактивный режим работы пользователя. Код HTML – это аналог программы на HTML. Он состоит из тегов. Тег – это стартовый или конечный маркер (метка, признак, указатель) элемента. Теги определяют границы действия элементов и отделяют друг от друга. Стартовый (открывающий) тег – это текст, заключенный в угловые скобки. Он объявляет начало включения элемента в страницу. Например, тег обозначает начало кода страницы. Стартовый тег часто включает значения атрибутов (свойств, параметров, характеристик) элемента. Конечный (закрывающий) тег снабжается косой чертой и обозначает конец действия элемента. Например, тег служит признаком конца кода страницы. Существуют элементы, не имеющие конечного тега. Например, горизонтальная линия включается в страницу только с помощью стартового тега

---

. Если элемент языка HTML является контейнером для других элементов, то он имеет открывающий и закрывающий тег. Значения его свойств оказывают влияние (распространяются, наследуются) на вложенные элементы. Между тегами и расположены два обязательных блока: заглавие и тело страницы. Заглавие располагается между тегами и , а тело – между и . Название страницы включается в заглавие и помещается между тегами <TITLE> и . Тело web-страницы состоит, как правило, из трех основных элементов: текста, образов и гиперссылок. Текст может содержать заголовки (текст со статусом заголовка), абзацы, списки, таблицы. Образы – это графические изображения. Гиперссылки – это текст или образ, клик по которому приводит к переходу на новую страницу или на новый фрагмент текущей страницы. Кроме основных элементов, на странице могут располагаться формы, кадры и др. Любая web-страница имеет следующую структуру (шаблон): <TITLE> Заголовок страницы Тело страницы 11

В служебных словах HTML большие и маленькие буквы несут одинаковую смысловую нагрузку. «Динамическая» часть HTML оживляет web-страницы, позволяя включать объекты, созданные в других приложениях; осуществлять движение и позиционирование объектов, а также встраивать в код страниц собственные обработчики событий – скрипты. Например, при левом клике (событие!) на кнопке «Дальше>>» (объект!) запускается скрипт (обработчик события!), дописывающий в html-код теги с дополнительной информацией. Скрипты выполняются на компьютере-клиенте и создаются на специальных языках написания скриптов – JavaScript и VBScript. Возможности поддержки элементов интерактивности в этих языках практически одинаковы. Netscape Navigator работает с JavaScript и не распознаёт VBScript. Microsoft Internet Explorer работает со скриптами на обоих языках. JavaScript основан на языке программирования Java, который разрабатывался как платформо-независимый язык. Программы, написанные на языке Java, называются апплетами. Текст апплета в отличие от текста скрипта не включается в HTML-код страницы. Апплеты компилируются, а в HTML-коде описываются только параметры ссылки на готовый файл. Апплеты встраиваются в HTML-документ с помощью тега <APPLET>. VBScript представляет собой упрощенную версию языка Visual Basic. JavaScript и VBScript называют еще сценарными языками. Сценарии – это скрипты, состоящие из процедур – обработчиков событий, совершаемых над объектами. Сценарии включаются в HTML-код web-страниц. Общий вид сценария (скрипта) на языке VBScript: на языке JavaScript: <SCRIPT LAN<SCRIPT LANGUAGE=VBScript> GUAGE=JavaScript> Sub ProcedureName() Function ProcedureName() … текст процедуры {… текст процедуры } End Sub … … После добавления сценариев текст на HTML превращается в смесь размеченного текста и кодов-скриптов. Скрипты могут размещаться в любом месте HTML-кода страницы, но, как правило, все скрипты помещают перед тегом . Объектами, для которых пишутся обработчики событий, могут быть элементы «классического» HTML (абзац, список, таблица, рисунок и т. д.). Например, для объекта (элемента) реакцией на событие Onmouse-

12

move (указатель перемещается по объекту) может быть изменение фона или падающий по рисунку снег. Обработчики событий можно писать не только для стандартных элементов, но и для элементов управления Active X, которые внедряются в web-документ с помощью тега