Основы Web-дизайна (стр. 1 )

федеральное государственное образовательное

учреждение Высшего профессионального образования

«Южный федеральный университет»

АННА ИВАНОВНА ТАРАНУХИНА

ОСНОВЫ WEB-ДИЗАЙНА

(учебное пособие)

Ростов-на-Дону

2008

Основы Web-дизайна: Учебное пособие. - Ростов-на-Дону, 2008. - 82 с.

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

ОГЛАВЛЕНИЕ

№	Наименование	Стр.
	ВВЕДЕНИЕ	4
	ОБЩИЕ ПОЛОЖЕНИЯ	5
	МОДУЛЬ 1	6
	Содержание модуля 1	6
1.	Теория HTML	6
1.1	Основные понятия	6
1.2	Ссылки	10
1.3	Списки	13
1.4	Таблицы	20
1.5	Графика	31
1.6	Фреймы	38
	Проектное задание	46
	Тест рубежного контроля №1	46
	МОДУЛЬ 2	48
	Содержание модуля 2	48
2.	Теория CSS	48
2.1	Встраивание таблиц стилей в документ	48
2.2	Блоковые элементы	49
2.3	Визуальное форматирование	54
2.4	Визуальные эффекты	57
2.5	Автоматическая нумерация и списки	59
2.6	Цвет и фон	60
2.7	Шрифты	63
2.8	Представление текста	66
2.9	Таблицы	70
	Проектное задание	71
	Тест рубежного контроля №2	74
	ПРИЛОЖЕНИЕ 1	74
	ПРИЛОЖЕНИЕ 2	75
	ПРИЛОЖЕНИЕ 3	81
	ОСНОВНАЯ ЛИТЕРАТУРА	82
	ДОПОЛНИТЕЛЬНАЯ ЛИТЕРАТУРА	82

ВВЕДЕНИЕ

Основной целью курса «Web-ориентированные технологии» и связанного с ним спецпрактикума «Современные информационные технологии в образовании и научной деятельности», входящих в программу департамента физики ЮФУ, является подготовка специалистов, удовлетворяющих требованием рынка высоких технологий с устойчиво высоким спросом на разработчиков Web-ресурсов. Обязательной составной частью указанного курса является изучение языка гипертекстовой разметки HTML и каскадных таблиц стилей CSS – технологии, используемой совместно с HTML для отображения на экране, выведения на печать, озвучивания определенным образом Web-документов. В настоящее время существует множество книг по HTML и CSS: от небольших самоучителей для «чайников» до объемных монографий и справочников. К сожалению, многие из книг, предназначенных для профессионального обучения, представляют собой либо сухой перевод спецификаций Консорциума W3C, либо рассчитаны на читателей, имеющих, как минимум, средний уровень знаний Интернет-технологий и опыт создания Web-сайтов. При подготовке данного учебного пособия ставилась цель с самых азов последовательно изложить теоретические основы разработки Web-сайтов, исходя из оригинальных спецификаций HTML и CSS и подкрепляя теоретический материал примерами, выполнение которых позволит студентам приобрести практические навыки проектирования Web-страниц. Пособие может быть использовано студентами в процессе обучения, при подготовке к лабораторным занятиям, зачету и экзамену, а также в качестве справочника в дальнейшей работе. Требуемый предварительный уровень подготовки студентов: знакомство с аппаратным обеспечением персонального компьютера; навыки работы в многозадачной операционной системе Windows XP/Vista и с программами общего назначения – текстовыми редакторами, браузерами; знакомство с программами обработки изображений, модулями воспроизведения звука.
ОБЩИЕ ПОЛОЖЕНИЯ

Учебное пособие «Основы Web-дизайна» разработано на основе нормативных документов Министерства образования и науки Российской Федерации, относящихся к вхождению России в Болонский процесс, теории образовательной квалиметрии и современных технологий дидактического обеспечения учебного процесса.

Пособие разработано к курсу лекций «Web-ориентированные технологии» и спецпрактикуму «Современные информационные технологии в образовании и научной деятельности» по программе подготовки специалистов в департаменте физики ЮФУ и ставит своей целью оказание помощи студентам при изучении и практическом применении на профессиональном уровне теоретических основ языка HTML и современной технологии каскадных таблиц стилей (CSS), используемых при разработке Web-страниц.

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

МОДУЛЬ 1

Комплексная цель: обучение языку HTML на основе последней спецификации 4.01 и его практическому применению при построении Web-сайтов.

Краткое изложение программного материала: в модуле представлена классическая теория HTML с подробным описанием основных понятий языка, большинства используемых тэгов и их параметров, объединенных в группы по назначению:

– организация ссылок;

– представление информации в виде списков;

– построение документов с помощью таблиц;

– вставка изображений и организация ссылок с помощью карт-изображений;

– создание фреймовой структуры;

Теоретический материал иллюстрирован примерами.

Содержание модуля 1

1. Теория HTML

1.1 Основные понятия

Что такое HTML

HTML (HyperText Makeup Language: язык гипертекстовой разметки) – это язык, применяемый для создания гипертекстовых документов, называемых HTML-документами (HTML-страницами, Web-страницами, Интернет-страницами и т. д.). Сегодня язык HTML является стандартом представления информации в Интернете (глобальной мировой информационной компьютерной сети). Файлы, содержащие HTML-код, могут иметь расширения *.htm, *.html (*.shtml).

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

Технология HTML базируется на использовании элементов разметки, называемых тэгами. Тэг представляет собой специальное ключевое слово (имя тэга), записываемое между символами-ограничителями (< и >), возможно, вместе с его параметрами (или атрибутами). Общие правила записи параметров следующие: после имени тэга могут следовать параметры, которые отделяются друг от друга пробелами; порядок следования параметров произвольный. Многие параметры требуют указания их значений, некоторые параметры не имеют значений или могут записываться без них, принимая значения по умолчанию. Значение параметра указывается после названия параметра через знак равенства (=). Значение параметра записывается в кавычках (“…” или ‘…’), которые можно (хотя и не рекомендуется) опускать только в случаях, когда значение параметра состоит из одного слова. Названия тэгов и их параметров можно записывать на любом регистре.

Большинство тэгов используется попарно, т. е. для открывающего тэга имеется закрывающий тэг. Закрывающий тэг записывается так же, как открывающий, с символом прямого слэша (/) перед именем тэга. Закрывающий тэг не содержит параметров. Тэги, имеющие завершающие тэги, называются тэгами-контейнерами. Все, что записано между такой парой тэгов, называется содержимым тэга.

Что такое CSS

CSS (Cascading Style Sheet: каскадные таблицы стилей) – технология, используемая совместно с HTML и позволяющая приводить к единому внешнему виду группы HTML-тэгов (единые цвета, шрифты, отступы и т. д.), а также задавать свойства элементов разметки (тэгов) HTML-документов, которые нельзя установить с помощью их стандартных параметров. Кроме того, CSS позволяет приводить к единому внешнему виду группы HTML-документов (даже если это не было предусмотрено при их создании). Файлы, содержащие таблицы стилей имеют расширение *.css.

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

Браузеры

До недавнего времени наиболее популярными были три браузера (им принадлежало 90-95% рынка):

–Microsoft Internet Explorer, входящий в состав операционной системы Windows;

–Mozilla FireFox – совместимый с Netscape.