Министерство образования и науки Российской Федерации

Федеральное агентство по образованию

Саратовский государственный технический университет

О.А. Торопова, И.Ф. Сытник, В.В. Кузнецов

СОЗДАНИЕ И ОФОРМЛЕНИЕ WEB – СТРАНИЦ

С ПОМОЩЬЮ НТМL(XHTML) И CSS

Учебное пособие

по курсам «Мировые информационные ресурсы», «Информационные технологии в маркетинге и коммерческой рекламе»»

для студентов специальности 351700

Саратов 2009

УДК 681.3.06

ББК 32.973.26

Т 61

Рецензенты:

Кафедра математической экономики Саратовского государственного университета им. Н.Г. Чернышевского

Доктор физико-математических наук, профессор Саратовского государственного социально-экономического университета

В.Н. Гусятников

Одобрено

редакционно-издательским советом

Саратовского государственного технического университета

Торопова О.А.

Т 61 Создание и оформление WEB-страниц с помощью HTML(XHTML) и CSS: учеб. пособие / О.А. Торопова, И.Ф. Сытник, В.В. Кузнецов. Саратов: Сарат. гос. техн. ун-т, 2009, 106 с.

ISBN 987-5-7433-2084-4

Содержит теоретический материал по основам web-дизайна. Дается характеристика современного состояния данной предметной области. Изложены основные теоретические разделы по технологиям НТМL (XHTML) и каскадным таблицам стилей, особенности их использования при создании сайтов. Приводятся многочисленные примеры и практические задания.

Предназначено для студентов, аспирантов и преподавателей экономических специальностей.

УДК 681.3.06

ББК 32.973.26

©Саратовский государственный технический университет, 2009

© Торопова О.А., Сытник И.Ф., Кузнецов В.В., 2009

ISBN 987-5-7433-2084-4

Введение

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

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

Жизненный цикл сайта состоит из следующих основных этапов :

1. Проектирование структура сайта.

2. Разработка структуры и содержания страниц.

3. Публикация на Web-сервере.

4. Сопровождение (обеспечение работоспособности, возможно, дополнения и изменения содержания.

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

Глава 1. Основы

1.1. Браузеры

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

• Microsoft Internet Explorer 7 (и более старые версии)

• Mozilla/Firefox 3 (и более старые версии)

• Safari 3 (и более старые версии)

• Opera 10 (и более старые версии)

• Opera Mini

• Chrome

• Netscape 9 (и более старые версии)

• Konqueror 3 (и более старые версии)

К сожалению, на практике даже браузеры, поддерживающие современные стандарты, имеют свои собствен­ные нестандартные реализации и ошибки, которые заставляют разработчиков хорошенько поломать голову, особенно в том, что касается CSS, JavaScript и DOM.

В настоящий момент подавляющее большинство Web-трафика (67%, данные в различных источниках могут отличаться) проходит через Win­dows-машины, на которых работает Internet Explorer 7(6). Это означает, что, хотя популярность этого браузера и упала в последние годы (83% в 2005 году), нельзя позволить себе игнорировать его особенности и требования. Напри­мер, посетители не смогут увеличивать текст, если его размер указан в пикселях, и это обстоятельство должно повлиять на то, как вы будете масштабировать текст, используя таблицы стилей.

Что касается старых версий браузеров, то приведенная на многих сайтах статистика показывает, что такие браузеры, как Netscape 4, появившийся в 1997 году, все еще применяются. И их наличие игнорировать также нельзя, разработанный вами сайт должен гарантировать работоспособность для самых старых браузеров.

Преодоление различий браузеров

Как же профессиональным Web-дизайнерам учесть многочисленные браузеры и их разнообразные возможности?

В прошлом для этого требовалось принятие ряда трудных решений и масса дополни­тельной работы. Типичным было создание нескольких версий сайта для обеспечения сходной функциональности. Некоторые дизайнеры осторожничали и избегали Web-технологий более мощных, чем элементарный HTML. Другие создавали ультрасовременный дизайн сайтов под послед­нюю версию конкретного браузера. Этот беспорядок порожден так называемой «войной браузеров» конца 90-х.

Web-стандарты и, что более важно, их поддержка, которую начали наконец осуществлять производители основных браузеров, упростили для дизайнеров работу с многочисленными браузерами. Ушли в прошлое дни, когда нужно было выбирать что-то одно или создавать несколько разных версий сайта. Сегодня стало возможным создавать сайты, доступные для 100% браузеров и прекрасно выглядящие в подавляющем боль­шинстве их. Вся хитрость в том, чтобы самому следовать стандартам при написании материалов, создании стилей и программировании. Соблюдение стандартов – это главное средство, обеспечивающее доступность вашего сайта для всех пользователей и всех браузеров.

Это непросто, так как Web-среда хотя и двигается в сторону соответствия стандартам, но еще не достигла его. Еще существуют несоответствия даже в самых современных версиях браузеров, и для получения межбраузерной совместимости еще требуется нестан­дартное программирование. Хотя мы находимся сейчас на переходном этапе, еще используются старые методы, которые являются обычной практикой или даже являются необходимыми, несмотря на то что это идет вразрез с рекомендациями W3C.

Важно помнить, что основной целью в Web является передача информации. Хотя может оказаться невозможным сделать так, чтобы сайт одинаково выглядел во всех браузерах, вы должны гарантировать, что ваши материалы как минимум будут доступны и их можно будет использовать, для чего нужно следовать рекомендациям стандартов при разметке содержания.

Если HTML-документ написан в логичном порядке и разметка его элементов осмысленна, он будет доступен даже для самых старых версий браузеров.

Язык HTML должен нести на себе функцию формирования структуры документа, каскад­ные таблицы стилей – обеспечивать формирование правильной раскладки страницы и форматирования. Подавляющее большинство браузеров поддержи­вает CSS Level 1, так что вы можете осуществлять элементарное форматирование текста, зная, что подавляющее большинство посетителей увидят его так, как вы и предполагаете.

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

Общая стратегия использования каскадных таблиц стилей для работы со специальными требованиями браузеров была создана специалистом по Web-стандартам Джеффри Зельдманом (Jeffrey Zeldman). В своей книге Designing with Web Standards (New Riders) он описал метод, основная мысль которого (помимо правильного использования XHTML и CSS) – это разработка под ваш любимый полнофункциональный, поддерживающий стандарты Web-браузер. Затем вы тестируете страницу, убеждаясь в том, что она одинаково выглядит и работает в похожих и поддерживающих стандарты браузерах. Если внешний вид отличается, вам, возможно, потребуются нестандартные CSS-решения, чтобы избавиться от неполадок.

Как только дизайн стал приемлемо функционировать в современных браузерах (которые используют подавляющее большинство пользователей), рассмотрите нестандартный браузер, например Netscape 4. Если сайт выглядит приемлемо, значит, все в порядке. Если нет, то решением будет разделение таблицы стилей на две отдельные таблицы: одна – для элементарных CSS-возможностей, а другая – с современными правилами для тех браузеров, которые эти правила поддерживают. Установите связь с современной таблицей стилей при помощи элемента @import, который скроет ее от тех браузеров, которые не знают, что это такое. Методом проб и ошибок вы должны разработать сайт, который будет выглядеть так, как вы хотите, в самых современных браузерах, но и будет приемлемо выглядеть в старых версиях.