Министерство образования Российской Федерации
Самарский государственный университет
Механико-математический факультет
Кафедра высшей математики и информатики
ДИПЛОМНАЯ РАБОТА
Студента 5 курса дневного отделения
Кондрахина Сергея Сергеевича
ПРОЕКТИРОВАНИЕ И СОЗДАНИЕ
СОВРЕМЕННОГО WEB-САЙТА
Допущена к защите: Научный руководитель,
8 июня 2001 года к.ф.-м.н., доцент
Зав.кафедрой, д.ф.-м.н., Игнатьев В.А.
профессор Сараев Л.А.
______________________
Оценка: ______________
Председатель ГАК
______________________
"___" __________ 2001 г.
Самара 2001 год
СОДЕРЖАНИЕ
Введение 3
1. СОВРЕМЕННЫЕ ИНТЕРНЕТ-ТЕХНОЛОГИИ 4
1.1. Web-дизайн и браузеры 4
1.2. Язык разметки гипертекстовых страниц HTML 8
1.3. Обеспечение доступности Web-страницы 14
1.4. Представление текста на Web-страницах 19
1.5. Представление графики на Web-страницах 22
1.6. Web-серверы 25
2. ОСНОВНЫЕ ПРАВИЛА И ЭТАПЫ СОЗДАНИЕ САЙТА 35
2.1. Влияние дисплеев на Web-дизайн 36
2.2. Стандартные размеры и разрешения дисплеев 37
2.3. Альтернативные дисплеи 38
3. ВЫБОР СТРУКТУРЫ WEB-СТРАНИЦЫ 41
3.1. Создание фиксированных и гибких Web-страниц 41
3.2. Разработка комбинированных Web-страниц 43
3.3. Macromedia Flash 44
3.4. Стратегия разработки Web-сайта 49
Выводы 52
Литература 53
Приложение 54
Введение
Internet развивается довольно стремительно. Быстро растет количество изданий, посвященных Сети, что предвещает широкое ее распространение даже в далеких от техники областях. Internet превращается из большой игрушки для интеллектуалов в полноценный источник разнообразной полезной информации для любой категории пользователей.
Через десять лет, по прогнозам специалистов, около 50 процентов семей (безусловно, пока лишь в развитых странах) будут использовать его ежедневно. Телевидение и радиоприемники не будут заменены компьютерами, но будут иметь мощный процессор, большую память и фактически сами станут в некотором отношении компьютерами.
Это будет время, когда любой человек, владеющий компьютером, сможет
"скачать" с его помощью статьи, иллюстрации, видео- или аудиоинформацию по
любой интересующей его теме. Он сможет получить эту информацию тогда, когда
он этого пожелает. Через какое-то время системы искусственного интеллекта –
параллельный машинный перевод, а также идентификация и распознавание голоса
сломают последние национальные и языковые барьеры и сделают возможным
свободный транснациональный обмен информацией.
Каждый из нас уже сейчас может сделать свой вклад в развитие
Internet. Для этого достаточно создать свой веб-сайт и разместить его в
Сети. Но как это сделать? Ответ на данный вопрос мы попробуем дать в этой
работе.
Для этого необходимо решить следующие частные задачи:
– ознакомиться с современными Интернет-технологиями и, по возможности, использовать их в своей разработке;
– изучить программный инструментарий, применяемый для разработки и создания Web-сайтов;
– выявить и учесть методы и способы представления на Web-страницах различных видов информации, не препятствующие их доступности;
– ознакомиться с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительно следовать им в своей практике;
– определиться со структурой Web-страниц;
– выбрать стратегию разработки и создания Web-сайта.
1. СОВРЕМЕННЫЕ ИНТЕРНЕТ-ТЕХНОЛОГИИ
1.1. Web-дизайн и браузеры
Многие Web-дизайнеры сходятся во мнении, что одна из главных проблем
Web-дизайна – многообразие браузеров и платформ, каждая из которых по-
разному поддерживает HTML и сценарии. С выпуском каждого нового браузера
улучшаются их характеристики и возможности, но это не означает, что более
ранние версии при этом исчезают. В большинстве своем люди не склонны
гнаться за новейшим и лучшим. Одни довольствуются тем, что у них имеется, а
другие, вероятнее всего, работают на компьютерах фирм или учреждений,
которые выбрали браузеры за них.
Как сделать дизайн Web-страницы эстетически и технически интересным, не игнорируя при этом владельцев предыдущих версий браузеров? Неужели Web- страница, рассчитанная на то, чтобы функционировать на любых браузерах, должна быть обязательно скучной? Можно ли угодить всем? И если нет, то где провести черту? Сколько старых версий будет работать с вашей страницей?
В Web-дизайне нет жестких правил. Поскольку главная наша задача – сделать содержимое страницы доступным для максимального количества пользователей, то для продвижения вперед одинаково важны и эксперимент, и использование новых технологий с учетом существующих реалий. Залог успеха дизайнерского решения лежит в понимании потребностей аудитории и в четком представлении, как сайт будет использован.
Браузеры Netscape Navigator и Microsoft Internet Explorer. На рынке
доминируют два основных браузера: Netscape Navigator и Microsoft Internet
Explorer. Вместе они, включая все их версии, представляет примерно 90 %
(или более) используемых сегодня браузеров.
Эти два браузера конкурируют между собой за господство на рынке.
Результатом их борьбы стала коллекция фирменных HTML-тегов, а также
несовместимые реализации различных технологий (печально известный Dynamic
HTML, а также JavaScript и Cascading Style Sheets – каскадные таблицы
стилей). С другой стороны, конкуренция между Netscape и Microsoft в целом
способствовала более быстрому развитию среды Web.
Большинство Web-авторов в своей работе ориентируются на Navigator и
Internet Explorer, поскольку они занимают львиную долю рынка. Тем не менее,
существует ряд других браузеров, которые вы можете принимать во внимание.
В версии Internet Explorer 4.0 для компьютеров Macintosh отсутствует
значительная часть функциональных возможностей версии, созданной для
Windows, поэтому использование ряда особых возможностей версии 4.0 может
исключить из игры некоторых пользователей.
Некоторые документированные различия включают: отсутствие поддержки
встраиваемых шрифтов; отсутствие поддержки фильтров CSS и переходов
(визуальных эффектов, таких как тени, отбрасываемые объектом, которые
используются для элементов текста); отсутствие элементов управления
мультимедиа (эффекты переходов и анимации, обычно создаваемые авторскими
мультимедийными программными средствами); проблемы с реализацией DHTML.
Несмотря на заявления Microsoft, что DHTML поддерживается всеми платформами, он особенно ненадежен на компьютерах платформы Масintosh.
Браузеры America Online. Пользователи America Online (AOL) используют один из семи возможных браузеров (в зависимости от платформы и версии программного обеспечения AOL), некоторые из них обеспечивают только самую минимальную поддержку HTML.
Последняя версия America Online для PC – это версия 3.0, использует
адаптированную версию браузера Microsoft Interne Explorer 3.0. Тем не
менее, не всегда можно полностью положиться на эту версию так же, как на
стандартный вариант MS Internet Explorer 3.0. (Функциональность особенно
ограничена для пользователей компьютеров Macintosh). Многие разработчики
Web не раз ужасались, увидев дизайн своего сайта (который великолепно
работал в большинстве основных браузеров), после того как он был запущен в
системе AOL и отображен одним из их браузеров.
Проблемы частично возникают из-за того, что AOL полагается на прокси- серверы и методы сжатия изображений. Известно, что используемый AOL метод сжатия изображения имеет проблемы с отображением JPEG-графики, проявляющиеся в появлении пятен и цветных полос. Были отмечены проблемы и при выводе фоновых изображений.
Кроме того, некоторые технологии, такие как Java и Cascading Style
Sheets (каскадные таблицы стилей), не доступны для пользователей Windows
3.0 (примерно 40 % пользователей AOL). Владельцы компьютеров Macintosh не
смогут использовать JavaScript и ряд других возможностей (примерно 8 %
пользователей).
К счастью, создан специальный сайт в помощь тем Web-дизайнерам, которые стремятся сделать свои страницы интересными и доступными для пользователей AOL. Особого внимания заслуживает таблица браузеров, где вы найдете специальный список для каждого из браузеров (по версиям и платформам), перечень технологий и поддерживаемых функций, а также процент сбоев для каждого из браузеров. (Адрес сайта AOL для Web-дизайнеров: http://webmaster.info.aol.com).
WebTV. WebTV приводит в наши квартиры Web через обыкновенный
телевизор с пультом дистанционного управления (также, по желанию, можно
использовать клавиатуру). Для просмотра Web-страниц WebTV использует
собственный специализированный браузер. Он осуществляет синтаксический
анализ в соответствии – со стандартом HTML 3.2, но не предоставляет
возможностей отображения фреймов, Java, JavaScript, ActiveX или любого
другого формата, который требует встраиваемых приложений (за исключением
встроенных Shockwave и RealAudio 3.0). Также создано много новых фирменных
HTML-тегов, которые используются только в WebTV.
Поскольку WebTV выводит изображение на экран телевизора, предъявляются новые требования к характеристикам цвета и параметрам экрана.
Opera. Opera – это маленький и простенький браузер, созданный
норвежской компанией Opera Software в Осло. Этот браузер обладает
исключительно малым временем загрузки и минимальными требованиями к объему
диска. Достоинством Opera является полное соответствие стандартам HTML.
Неточности в написании тегов (например, пропущенные закрывающие теги,
неправильное вложение и т. д.), которые пропускают более солидные браузеры,
не будут правильно отображаться этим браузером. Opera 5.0 поддерживает
Java, каскадные таблицы стилей и DHTML.
Хотя Opera и не стоит на первых местах по частоте использования, но многие разработчики продолжают тестировать свои сайты в Opera, чтобы убедиться в правильности кода.
Lynx. Lynx – это распространяемый бесплатно браузер, обеспечивающий
просмотр только текста, предлагает вам быстрый и надежный доступ в Web. Он
заслужил известность как наименьший общий знаменатель стандарта, пригодный
для тестирования Web-страницы по базовым функциональным характеристикам.
Несмотря на простоту, этот браузер не устаревает. Lynx постоянно
совершенствуется и модернизируется. Сейчас он обеспечивает поддержку
таблиц, форм и даже JavaScript!
Люди действительно используют Lynx, поэтому не стоит удивляться, если клиент закажет разработку сайта для Lynx. Этот браузер также важен для инвалидов по зрению: они используют Lynx вместе с речевыми устройствами.
Будет легче принять решение, какую технологию использовать и где провести черту для обратной совместимости, если знать, какие браузеры используются чаще всего. Наиболее достоверную информацию, конечно, можно получить, ведя статистику посещений сайта.
Отслеживающее программное обеспечение серверов обычно классифицирует посещения по браузерах, осуществляющих запросы. Поэтому, если вы узнали, что только 20 % посетителей вашего сайта используют версии браузеров 4.0, то, может быть, следует повременить с переходом на использование таблиц стилей.
В Интернете можно найти несколько сайтов, предоставляющих статистические данные о браузерах. Статистика на этих сайтах основана на анализе посещаемости самих этих сайтов, что сужает статистическую выборку до узкого круга пользователей, интересующихся такого рода сайтами, – возможно, пользователи, интересующиеся приобретением новых автомобилей или программами телепередач, используют другие браузеры. Статистические данные, помещенные на сайте BrowserWatch, дают подробнейшие сведения о версиях, подверсиях и под-подверсиях каждого отдельного браузера.
1.2. Язык разметки гипертекстовых страниц HTML
Язык разметки гипертекстовых страниц (HTML – Hypertext Markup
Language) представляет собой язык, разработанный специально для создания
Web-документов. Он определяет синтаксис и размещение специальных инструкций
(тегов), которые не выводятся на экран, но указывают браузеру, как
отображать содержимое документа. Он также используется для создания ссылок
на другие документы, локальные или сетевые, например, находящиеся в сети
Интернет.
Стандарт HTML и другие стандарты для Web разработаны под руководством консорциума W3C (World Wide Web Consortium). Стандарты, спецификации и проекты новых предложений можно найти на сайте http://www.3w.org/. В настоящее время действует спецификация HTML 4.0, поддержка которой со стороны основных браузеров постоянно растет.
На практике на стандарт HTML большое влияние оказывает наличие тегов, предложенных и поддерживаемых наиболее известными браузерами, такими как Microsoft Internet Explorer и Netscape Navigator. Эти теги в данный момент могут как входить, так и не входить в состав действующей спецификации HTML.
Информации о тегах HTML Compendium (краткое руководство по HTML) созданно Ron Woodall. Компендиум содержит список тегов и их атрибутов в алфавитном порядке, а также обновленную информацию о поддержке каждого из них со стороны браузеров. Компендиум HTML находится на сайте http://www.htmlcompendium.org.
Инструментарий редактирования HTML. Документы HTML являются обычными
текстовыми ASCII-файлами. Это означает, что для их создания можно
использовать любой текстовый редактор, даже с минимальными возможностями.
Существуют средства редактирования, разработанные специально для написания
HTML. Они позволяют экономить время, так как содержат клавиши быстрого
доступа для выполнения повторяющихся операций, например, задания начальных
установок документов, таблиц или просто применения стилей к тексту.
Редакторы HTML отличаются от авторского WYSIWYG-инструментария
(рассматриваемого далее) тем, что требуют знания правил составления HTML
вручную, редакторы лишь упрощают и ускоряют этот процесс.
Пользователям Windows определенно следует проверить HomeSite, мощный
и недорогой редактор HTML компании Allaire Corporation. В нем имеются
средства для выделения цветами синтаксических конструкций HTML, функция
FTP, контроль синтаксиса и правописания, многофайловый поиск и замещение.
Кроме того, он содержит специальные команды и шаблоны для создания более
сложных элементов (фреймов, сценариев JavaScript и DHTML). Информация и
демонстрационная программа для загрузки находятся по адресу
httр://www.allaire.com/.
При работе на компьютерах Macintosh обращают внимание на BBEdit,
коммерческий HTML-редактор компании Bare Bones Software, Inc. Он
действительно имеет вес среди Web-разработчиков для для компьютеров
Macintosh. В его состав входят удобные и быстрые HTML-инструменты,
многофайловый поиск и замена, встроенная FTP-функция, поддержка 13 языков
программирования, построитель таблиц, контроль синтаксиса HTML и еще
множество функций. Дополнительные сведения и демонстрационную программу
можно найти по адресу http://www.bbedit.com.
Авторский инструментарий WYSIWYG. Последние годы характеризуются
резким ростом рынка авторских инструментов. HTML-редакторы класса WYSIWYG
(What You See Is What You Get – что видишь, то и получишь) имеют
графические интерфейсы, которые делают написание HTML больше похожим на
программу редактирования текстов или разметки страницы. Первоначальной
целью этих программ было освобождение пользователей от тегов HTML,
наподобие того, как программы разметки страниц защищают разработчика от
набора команд языка PostScript. Сегодня их значимость возросла, так как они
повышают эффективность и уровень автоматизации производства документов,
обеспечивая в то же время доступ к исходному тексту HTML.
Наиболее популярными в настоящее время WYSIWYG-редакторами являются:
Macromedia Dreamweaver, Golive CyberStudio (только для компьютеров
Macintosh), Microsoft FrontPage, FileMaker Claris, Home Page, Adobe
PageMill.
Теги HTML. Документ HTML содержит текст (содержимое страницы) и встроенные теги – инструкциями о структуре, внешнем виде и функции содержимого. Документ HTML разделяется на две основные части: заголовок – head и тело – body. Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержим документа (то, что выводится в окне браузера).
Каждый тег состоит из имени, за которым может следовать список
необязательных атрибутов, все они находятся внутри угловых скобок < >.
Содержимое скобок никогда не выводится в окне браузера. Имя тега, как
правило, представляет собой аббревиатуру его функции, что облегчает его
запоминание. Атрибуты являются свойствами, которые расширяют или уточняют
функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к
регистру. Тег будет работать так же, как . Однако значения определенных атрибутов могут быть
чувствительны к регистру. Это относится, в частности, к именам файлов и
URL.
Контейнеры. Большинство тегов являются контейнерами. Это означает,
что у них имеется начальный (открывающий или стартовый) и конечный
(закрывающий) теги. Текст, находящийся между тегами, будет выполнять
содержащиеся в них инструкции. Например:
The weather is gorgeoustoday.
Результат: The weather is gorgeous today.
Конечный тег имеет то же имя, что и начальный, но перед ним стоит слэш (/). Его можно рассматривать как "выключатель" тега. Конечный тег никогда не содержит атрибутов.
В некоторых случаях конечный тег не обязателен, и браузер определяет
конец тега из контекста. Чаще всего опускают конечный тег (абзац).
Браузеры раньше поддерживали этот тег без соответствующего завершения,
поэтому многие авторы Web привыкли использовать краткую форму. Это
разрешено не всем тегам, и не все браузеры прощают их отсутствие. Поэтому,
если есть сомнения, включите в текст закрывающий тег. Это особенно важно,
когда в документе вы используете каскадные таблицы стилей.
Автономные теги. Некоторые теги не имеет завершающих тегов, потому
что они используются для размещения отдельных (автономных) элементов на
странице. Одним из них является тег изображения , он просто помещает
графику в поток страницы. Другие автономные теги – это разрыв строки
(), горизонтальная линия () и теги, содержащие информацию о
документе и не влияющие на содержимое, выводимое на экран, такие как и .
Атрибуты. Атрибуты добавляются в тег для расширения или модификации
его действий. К одному тегу можно добавить несколько атрибутов. Если
атрибуты тега следуют после имени тега, они разделяются одним или
несколькими пробелами. Порядок следования не важен. Большинство атрибутов
имеют значения, которые следуют за знаком равенства (=), находящимся после
имени атрибута. Длина значений ограничена 1024 символами. Значения могут
быть чувствительны к регистру. Иногда значения должны находиться в кавычках
(двойных или одинарных). Правила записи значения следующие:
– если значение представляет собой одно слово или число и состоит только из букв (a-z), цифр (0-9) и специальных символов (точка или дефис ), то можно поместить его после знака равенства без кавычек;
– если значение содержит несколько слов, разделенных запятыми или пробелами, или содержит специальные символы, отличные от точки или дефиса, тогда его необходимо поместить в кавычки. Например, URL требуют кавычек, потому что они содержат символы "://". Также кавычки необходимы при задании значений цветов с использованием формата "#rrggbb".
Если вы не уверены, стоит ли использовать кавычки, используйте их всегда для всех значений.
В теги HTML могут помещаться другие HTML-теги для осуществления воздействия нескольких тегов на один элемент. Это называется вложением, и, что бы правильно его осуществить, начальный и конечный теги вложенного тега должны обязательно находиться между начальным наконечным тегами внешнего тега, например:
The Weather is gorgeous today.
Результат: The weather is gorgeous today.
Часто встречающейся ошибкой является перекрытие тегов. Хотя часть
браузеров отображают содержимое, отмеченное таким образом, многие не
разрешают нарушать правило, поэтому важно размешать теги правильно.
Следующий пример показывает неверное вложение тегов (заметьте, что тег закрывается перед закрытием ):
The weather is gorgeoustoday – данная информация, игнорируемая браузерами.
Информация, игнорируемая браузерами. Некоторая информацияНиже приводится информация, содержащаяся в документе HTML, включая определенные теги, которая будет игнорироваться при просмотре браузерами. В ее состав входят:
– разрывы строк. Символы конца строк в документе HTML игнорируются.
Текст и элементы будут переноситься до тех пор, пока в потоке текста
документа не встретится тег или . Разрывы строк выводятся, если
текст обозначен как текст с заданным форматом ();
– символы табуляции и множественные пробелы. Когда браузер встречает
в документе HTML символ табуляции и несколько последовательных символов
пробела, он выводит только один пробел. Таким образом, если документ
содержит: "far, far away", браузер выведет "far, far away".
Дополнительные пробелы можно добавить в текстовый поток, используя символ
неразрывного пробела (Snbsp;). Кроме того, все пробелы выводятся, если
текст является форматированным (находится в тегах );
– множественные -теги. Последовательность тегов , не
прерываемых текстом, всеми браузерами интерпретируется как избыточная.
Содержимое будет выводиться так, как если бы был только один тег .
Большинство браузеров выведет несколько тегов в виде нескольких
переходов на новую строку;
– нераспознаваемые теги. Если браузер не понимает тег или тот был неверно задан, то браузер его просто игнорирует. В зависимости от тега и браузера это может привести к различным результатам. Либо браузер ничего не выведет, или он может отобразить содержимое тега как обычный текст;
– текст в комментариях. Браузеры не выводят текст между специальными
элементами , которые используются для обозначения комментариев.
После символов начала комментария и перед символами окончания обязательно
должен находиться пробел. В сам комментарий можно помещать практически все.
Комментарии нельзя вкладывать. В Microsoft Internet Explorer имеется
фирменный тег, обозначающий комментарии .... Однако, он
не поддерживается другими браузерами.
1.3. Обеспечение доступности Web-страницы
При разработке Web-страницы фиксированного размера, вероятно, придется выбирать для нее размер экрана. Здравый смысл подсказывает, что страница должна быть доступна (и правильно отображаться) для максимально возможного числа пользователей. Идея проста: необходимо определить наиболее часто используемое разрешение дисплея и разработать страницу таким образом, чтобы страница гарантированно заполняла все рабочее пространство.
Большинство дизайнеров рекомендуют разрабатывать страницы в формате
640x480, чтобы при просмотре пользователям не пришлось применять
горизонтальную прокрутку. Горизонтальная прокрутка всегда затрудняет
восприятие, поэтому дизайнеры традиционно ее отвергают.
Все большее число разработчиков считает стандартным разрешение
800x600. И совсем единицы разрабатывают страницы для еще более высоких
разрешений. Конечно, ваше решение будет, в первую очередь, зависеть от
аудитории. Например, если сайт ресурсов для дизайнеров графики, то считаем,
что они имеют дисплеи, по крайней мере, с разрешением 800x600 или выше, в
соответствии с чем и разрабатывается страница. Если сайт предназначен
специально для WebTV или какого-то другого устройства отображения, следует
ориентироваться на это конкретное устройство.
Достойный уважения Web-дизайн включает разработку страниц, доступных
для пользователей с ограниченными возможностями, в частности по зрению и
слуху. Консорциум World Wide Web объявил об инициативе Web Accessibility
Initiative (WAI), которая ставит целью сделать Web более доступным для всех
пользователей. Однако успех данной инициативы зависит от участия в ней
рядовых разработчиков, которые могут (или не могут) создать Web-сайты в
соответствии с поставленными задачами.
Пользователи с ограниченными возможностями зрения могут использовать
специальные устройства для увеличения изображения, находящегося на экране.
В этом случае к дизайну не предъявляется никаких специальных требований.
Многие люди с проблемами зрения используют текстовые браузеры (такие как
Lynx) вместе с программным обеспечением, которое громко читает содержимое
страницы. В любом случае основное внимание уделяется структуре документа и
его тексту. Графическое содержимое может быть просто утеряно.
Средства HTML 4.0. Спецификация HTML 4.0 вводит ряд новых атрибутов и тегов, созданных специально для того, чтобы сделать Web-документы доступными для более широкого круга пользователей. Кратко перечислим некоторые новые возможности HTML 4.0. (Расширенный список возможностей размещен на сайте http://www.w3.org/WAI/References/HTML4-access, а полные спецификации данной версии – на сайте http://www.w3.org/TR/REC-html40).
HTML 4.0 предлагает следующие новые возможности, обеспечивающие доступность:
– дальнейшее разделение структуры документа и его внешнего представления. Информацию о стиле HTML 4.0 предлагает размещать в каскадных таблицах стилей;
– навигационная помощь, например, клавиши доступа и индексирование порядка табуляции для доступа к элементам страницы с использованием только клавиатуры;
– рекомендации, касающиеся новой клиентской карты-изображения, объединяющей графические и текстовые ссылки;
– новые теги и , которые помогают речевым и другим устройствам интерпретировать аббревиатуры и акронимы;
– возможность логически группировать строки и столбцы таблиц, снабжать их заголовками, резюме и длинными описаниями содержимого, облегчая интерпретацию таблиц;
– возможность группировать элементы управления формами и создавать длинные списки выбора, более ясные для восприятия. Элементы форм также доступны через клавиши табуляции и быстрого доступа;
– улучшенный механизм создания альтернативного текста. Атрибут alt теперь обязателен для тега . Чтобы обеспечить связь с более длинными текстовыми пояснениями к изображениям, введен атрибут longdesc.
Для добавления информации о любом элементе, можно использовать атрибут title.
Средства CSS. Каскадные таблицы стилей или CSS (от английского
Cascading Style Sheets) являются следствием дальнейшего развития HTML и
дают нам возможность перейти на следующий уровень представления информации.
Таблицы стилей позволяют разделить смысловое содержимое странички и его
оформление.
В первых версиях стандарта HTML не было предусмотрено никаких средств для управления внешним видом информации. Общая концепция гипертекста была направлена на доступность информации для любых устройств, способных воспроизводить текст. Для разметки рекомендовалось использовать только логические теги, определяющие заголовки, подзаголовки, списки, абзацы, цитаты и т.д. – то есть, те элементы, которые и составляют структуру документа. Интерпретация же внешнего вида оставалась полностью на совести оконечного терминала.
Однако с тех пор много что изменилось, и стандарт HTML потерял первоначальную стройность. Вначале Netscape добавил "улучшенные теги", которые позволили более широко управлять внешним видом представляемой информации. Нововведение прижилось, и все расширения Netscape стали стандартом de facto. Потом точно также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную смесь логических и оформительских тегов, несовместимых расширений и полностью перестал отвечать первоначальной концепции – представлять информацию на любом устройстве независимо от его характеристик по выводу информации.
Тогда была предпринята широкомасштабная стандартизация. В результате чего на свет явился стандарт HTML 3.2. Он не был революционным, а лишь расставил по местам все нововведения и выработал общие рекомендации для производителей браузеров. Революционные изменения были введены в новом стандарте – HTML 4.0 или, как его стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей и универсальная объектная модель браузера.
В новом стандарте попытались вернуться к истокам концепции HTML.
Четвертая версия, как и первая, рекомендует создавать странички таким
образом, чтобы они могли быть воспроизведены на любом устройстве – будь это
21" дисплей или маленький черно-белый экран сотового телефона.
Каким же образом была решена проблема с представлением внешнего вида информации? В этом и заключается революционность подхода. Все оформление рекомендуется вынести во внешний стилевой файл. Основная же страничка будет содержать только информацию и ссылки на необходимые стили.
При показе странички конкретному устройству должна быть задействована соответствующая случаю таблица стилей. Для сотового телефона и дисплея компьютера они, разумеется, должны быть разными. В первом случае мы используем минимальное оформление, которое позволит представить информацию наиболее оптимально и компактно. Во втором же случае в нашем распоряжении имеется все богатство шрифтового и цветового оформления.
Таблицу стилей нужно написать всего один раз при создании сайта для каждого из устройств, на котором планируется вывод информации. К тому же таблица стилей может быть единой для целого сайта. И, следовательно, не нужно будет повторять одни и те же описания стилей на каждой из страниц.
Размещение всей стилевой информации в одном внешнем файле открывает
нам и другие полезные возможности – ведь изменив содержимое только одного
(!) стилевого файла, мы можем в считанные секунды сменить весь дизайн
сайта. Причем никаких других переделок не понадобится. Разумеется, это
верно лишь в том случае, если первоначально сайт был спроектирован верно.
CSS2 (Cascading Style Sheets, Level 2) – самая последняя рекомендация по каскадным таблицам стилей, предоставляет механизмы для улучшенной интерпретации страниц неграфическими и не визуальными устройствами. Усовершенствования включают:
– механизмы, с помощью которых созданная пользователем таблица
стилей может заменить все таблицы стилей более высоких уровней в каскаде.
Это дает конечному пользователю возможность полностью управлять
отображением. Пользователь получает возможность создавать настраиваемые
таблицы стилей для вывода страниц в соответствии со специальными
требованиями;
– специализированная поддержка для загружаемых шрифтов – таким образом уменьшается тенденция помещать текст в графику для улучшения внешнего вида страницы;
– механизмы позиционирования и выравнивания, которые отделяют содержимое от внешнего представления. Эти таблицы стилей должны исключить некорректное использование тегов HTML для создания особых эффектов отображения. Теги HTML можно использовать для логической структуризации документа, делая его более простым для интерпретации не визуальными посредниками;
– средства управления для звукового вывода доставленной по Web информации;
– улучшенные средства навигации, такие как цифровые маркеры, которые можно добавлять в документ в целях ориентации.
Источники разработки доступных страниц
1). Официальный сайт WAI. На нем есть ряд полезных ссылок к источникам, связанным с проблемой доступности (http://www.w3.org/WAI).
2).Очень хороший источник статей и руководств для авторов HTML расположен на сайте Фонда слепых Юрия Рубинского, который является своеобразным оружием борьбы за права инвалидов на расширенный доступ к технологиям (http://www.уun.org/Webable).
1.4. Представление текста на Web-страницах
При создании профессиональной графики для Web используется текст со сглаженными краями. Сглаживание – это легкая размытость на неровных краях, сглаживающая переходы между цветами. Не сглаженные края, напротив, выглядят зазубренными и ступенчатыми. Исключением из этого общего правила является текст очень малого размера, (10 пунктов и меньше), применение сглаживания делает его практически неразличимым. Текст малых размеров будет выглядеть намного лучше без сглаживания.
Два комплекта шрифтов. При разработке Web-страницы средствами базового HTML есть два комплекта шрифтов; пропорциональный и шрифт фиксированной ширины. Проблема заключается лишь в том, что неизвестно, какой из них и какого размера будет использован при отображении.
Пропорциональный шрифт – иначе "шрифт переменной ширины" для каждого
символа выделяет разное количество места в зависимости от его начертания.
Например, в пропорциональном шрифте заглавная "W" занимает больше места в
строке по горизонтали, чем прописная "I". Такие гаринитуры, как: Times,
Helvetica и Arial являются примерами пропорциональных шрифтов.
Web-браузеры для большинства текстов на Web-странице, включая
основной текст, заголовки, списки, цитаты и т. д., используют
пропорциональные шрифты. Как правило, большие отрывки основного текста
удобнее читать, когда они напечатаны пропорциональными шрифтами. Поскольку
большинство пользователей не имеют времени заменить шрифты, установленные
по умолчанию, с большой вероятностью можно предположить, что текст на вашей
странице будет отображен шрифтом Times размером 10 или 12 пунктов (по
умолчанию в Netscape) или Helvetica (по умолчанию в Microsoft Internet
Explorer). Но это всего лишь общее правило.
Шрифт с фиксированной шириной предоставляет одинаковое место для
всех символов шрифта. Заглавная "W" занимает не больше места, чем прописная
"I". Примерами шрифтов фиксированной ширины являются гарнитуры Courier и
Monaco. В Web-браузерах шрифты фиксированной ширины используются для
отображения любого текста внутри следующих HTML-тегов: , , ,
,, .
Поскольку многие люди не меняют настройку шрифтов, установленную по умолчанию, текст, находящийся в указанных тегах, будет выведен одним из шрифтов типа Courier.
Текст в изображениях. Дизайнеры быстро поняли, что самый верный
способ абсолютного контроля над шрифтами – поместить текст в изображение.
Можно часто видеть заголовки, подзаголовки и объявления, выполненные в виде
файлов GIF. Многие Web-страницы представлены исключительно в графике,
которая содержит внутри себя весь текст страницы.
Преимущества использования графики вместо HTML-текста абсолютно очевидны:
– можно определять тип шрифта, размер, интерлиньяж, промежуток между буквами, цвет и выравнивание – все атрибуты, которые вызывают сложности только в HTML;
– ваша страница будет одинакова при выводе во всех графических браузерах.
Но у этого метода имеется ряд недостатков:
– изображение загружается дольше, чем текст, т.к. графические файлы обычно на несколько порядков больше, чем HTML-тексты, имеющие то же содержание;
– в неграфических браузерах содержание утрачивается. Пользователи,
которые не могут (или не хотят) просматривать графику, не увидят и текста.
Альтернативный текст (используется атрибут Alt) на месте графического
изображения помогает, но его возможности ограничены и это не всегда
надежный способ отождествления отсутствующей графической информации;
– информацию, находящуюся в изображении, нельзя индексировать или организовать ее поиск. В результате исключаются из документа важные части информации.
Размер шрифта. Обычно размер шрифта определяется в пунктах (72
пункта (пт) = 1 дюйм высоты шрифта) но, к сожалению, эти размеры не
достаточно точно переводятся между платформами. Отчасти это происходит
потому, что их операционные системы управляют дисплеями с различными
разрешениями. Обычно Windows использует разрешение экрана 96 точек/дюйм, a
MacOS – 72 точек/дюйм. Мониторы MultiScan допускай более высокое
разрешение.
Шрифт на экране дисплея Масintosh имеет точно такой же размер, как и
при печати (например, 12 пт Times на экране выглядит так же, как 12 пт
Times на бумаге).
Для шрифтов Microsoft подобное соглашение не выполняется, и размер
шрифта при выводе на экран больше, что облегчает чтение с дисплея. В
результате шрифт размером 12 пт на Windows больше похож на печатный шрифт в
16 пунктов. Чтобы получить на Windows печатный размер 12 пт, вам нужно
выбрать размер шрифта 9 пунктов (но тогда пользователи компьютеров
Масintosh увидят текст почти неразборчивым, так как он будет отображен
шрифтом размером всего 6,75 пт).
1.5. Представление графики на Web-страницах
На данный момент почти все изображения в Web, представлены в двух
форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат
PNG, борется за поддержку и внимание браузеров. Далее – краткий обзор
"большой тройки" онлайновых графических форматов. Более подробная
информация представлена в главах, посвященных каждому из форматов.
GIF. GIF – Grafic Interchange Format можно назвать традиционным
форматом файлов Web. Он был первым форматом файлов, который поддерживался
Web-браузерами, и по сей день продолжает оставаться основным графическим
форматом Web.
Его свойства состоят в следующем:
– поддерживает не более 256 цветов (меньше можно и часто нужно);
– использует палитру цветов;
– использует сжатие без потери информации по ме