Федеральное государственное образовательное учреждение Высшего профессионального образования «Южный федеральный университет» анна ивановна таранухина основы web-дизайна (учебное пособие)
| Вид материала | Учебное пособие |
- Основная образовательная программа высшего профессионального образования Направление, 838.93kb.
- Методические указания к выполнению контрольной работы по курсу: «Политическая экономия», 48.57kb.
- Федеральное агентство воздушного транспорта федеральное государственное образовательное, 204.23kb.
- Правила приема в Федеральное государственное образовательное учреждение высшего профессионального, 799.39kb.
- Вступление, 255.19kb.
- Сибирский федеральный университет, 1020.21kb.
- Учебное пособие «конкурентоспособность в маркетинге» г. Тюмень, 200, 1324.86kb.
- Федеральное государственное образовательное учреждение высшего профессионального образования, 702.43kb.
- Формирование профессиональных компетенций выпускников колледжа (на примере студентов-технологов), 345.55kb.
- Учебное пособие Санкт-Петербург 2007 удк алексеева С. Ф., Большаков В. И. Информационные, 1372.56kb.
федеральное государственное образовательное
учреждение Высшего профессионального образования
«Южный федеральный университет»
АННА ИВАНОВНА ТАРАНУХИНА
ОСНОВЫ 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, *.php (*.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.
Остальную часть рынка делят между собой:
–Opera – быстрый браузер, максимально похожий по поведению на Internet Explorer в отношении к HTML-коду, объектной модели и пр.
–Safari – браузер фирмы Apple.
Главное преимущество Internet Explorer состоит в том, что в нем реализована XML-поддержка. Кроме того, он подходит для создания динамических HTML-документов, имея развитую модель объектов и средства управления их свойствами.
Достоинством Mozilla Firefox является мультиплатформенность: браузер может использоваться в UNIX в том же виде, что и в Windows.
Преимуществом Opera является скорость и нетребовательность к ресурсам компьютера.
Спецификации HTML и CSS
Язык HTML приобрел широкую популярность к середине 90-х годов. К этому времени назрела необходимость стандартизации языка, поскольку различные компании, разрабатывающие программное обеспечение для доступа в Интернет, предлагали свои варианты тэгов и способы их интерпретации браузерами. Созданием спецификации HTML занялся Консорциум всемирной паутины (World Wide Web Consortium: W3C) – организация, в которую вошли крупнейшие производители программного обеспечения для Интернета. Начиная с 1995 года – со времени первой официально признанной спецификации HTML 2.0 вышло несколько рекомендованных спецификаций, последняя из которых – 4.0, в версии 4.01. Основной идеей в последней спецификации стало отделение структуры документа от его представления на экране монитора, в соответствии с чем рекомендуется более широко использовать технологию каскадных таблиц стилей CSS. Для реализации этой идеи в спецификации 4.0 некоторые тэги отменены, или, другими словами, объявлены не рекомендуемыми. Это означает, что браузеры все еще должны продолжать поддержку таких тэгов, но в последующих версиях эти тэги, могут быть объявлены устаревшими. Устаревшие тэги не поддерживаются браузерами.
В настоящее время спецификация CSS уровня 2 поддерживается всеми браузерами. К сожалению, большинство свойств в новейшей спецификации CSS3 (2004-2005 годы), предложенных Консорциумом W3C, до сих пор не реализовано ни в одном из широко известных браузеров, поэтому в данном пособии используется стандарт CSS2, версия 2.1.
Создание HTML-документа
HTML-документы можно создавать в любом текстовом редакторе, например, при работе под управлением Windows в стандартной программе Блокнот.
1.2 Ссылки
Ссылки на другие документы и файлы
Одним из важнейших понятий для HTML-документов являются ссылки. Название HTML, язык разметки гипертекста, указывает на принцип организации таких документов. Работая в Web-пространстве, вы часто понятия не имеете, где находится та или иная нужная вам страница. Поэтому ссылки здесь являются единственной возможностью перейти от одного документа к другому.
Гипертекстовый документ — это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому. Часто подобные ссылки можно увидеть и в файлах помощи современных программных продуктов. За основу гипертекста взят принцип организации энциклопедических словарей,
в которых во многих статьях есть ссылки на другие.
Существует много типов мультимедийных объектов, которые могут быть размещены на Web-странице. В современных гипертекстовых документах в дополнение к самому тексту часто используют разнообразную графику, видео- и аудиообъекты, а в качестве ссылок часто применяют изображения.
Организация ссылок
Ссылка состоит из двух частей. Первая из них — это то, что вы видите на Web-странице; она называется указатель ссылки (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адрес). Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL-адресом. Ниже рассмотрены правила
построения отдельных элементов ссылок.
Указателем ссылки может быть слово, группа слов или изображение. Внешний вид ссылки зависит от его типа, способов создания и установок программы просмотра читателя. Указатели бывают двух типов — текстовые и графические. Текстовые указатели обычно представляют собой слово или несколько слов, выделенных на экране подчеркиванием. Цвет текстового указателя может регулироваться автором и установками программы просмотра.
Приведем пример записи для текстового указателя ссылки:
<А href="example.php">
В качестве ссылки можно использовать графическое изображение. По принципу действия графические ссылки ничем не отличаются от текстовых ссылок. Они не подчеркиваются и не выделяются цветом, а для их выделения браузеры обычно вокруг такого изображения рисуют рамку. Пример графического указателя ссылки:
<А HREF="example.php">
Второй частью ссылки является URL-адрес. Это не что иное, как адрес Web-страницы, которая будет загружена при щелчке мышью на указателе.
Указание адреса может быть относительным или абсолютным.
Если в URL-адресе не указывается полный путь к файлу, то такая ссылка называется относительной. В этом случае определение местоположения файлов выполняется с учетом местоположения документа, в котором имеется такая ссылка. Например, если браузер загрузил страницу, находящуюся по адресу e.com/page, то относительный указатель /picture подразумевает адрес e.com/page/picture, т. е. подкаталог, расположенный на той же машине.
Относительные указатели удобны в использовании. Намного проще вставить только имя файла, а не весь длинный URL-адрес. Они также позволяют вам перемещать файлы в пределах вашего сервера без больших изменений в межстраничной адресации.
URL-адрес, полностью определяющий компьютер, каталог и файл, называется абсолютным. В отличие от относительных указателей, абсолютные указатели могут ссылаться на файлы, расположенные на других компьютерах.
Правила записи ссылок
Для организации ссылки необходимо сообщить браузеру, что является указателем ссылки, а также указать адрес документа, на который вы ссылаетесь.
Оба действия выполняются при помощи тэга <А>.
Тэг <А>
Тэг <А> имеет единственный параметр href, значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным, например, r.com/home/index.htm. Этот тэг является контейнером, поэтому необходимо поставить закрывающий тэг :
<А hyref=URL-адрес>Текстовый указатель ссылки
Указатель ссылки может быть относительным или абсолютным. Для облегчения работы с относительными указателями ссылок введен тэг
Внутренние ссылки
Кроме ссылок на другие документы, часто бывает полезно включить ссылки на разные части текущего документа. Например, большой документ читается лучше, если он имеет оглавление со ссылками на соответствующие разделы.
Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения. Например, если вы хотите сделать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра name тэга <А>. При этом параметр href не используется, и браузер не выделяет содержимое тэга <А>. Например:
<А name =chapter_5>
Обратите внимание, что в приведенном примере отсутствует содержимое тэга <А>. Обычно именно так и делают, поскольку здесь нет необходимости как-то выделять текст, а требуется лишь указать местоположение.
После того как место назначения определено, можно приступить к созданию ссылки на него. Для этого, вместо указания в параметре href адреса документа, как это делалось ранее, поместим туда имя ссылки с префиксом #, говорящим о том, что это внутренняя ссылка.
<А href ="#chapter_5">Глава 5
Теперь, если пользователь щелкнет кнопкой мыши на словах "глава 5",
браузер выведет соответствующую часть документа в окне просмотра.
Ссылки на другие ресурсы Интернета
Ресурсы Интернета Формат ссылки Пример записи ссылки
Web-страница e.com/
e-mail mailto:address mailto:me@mysite.com
Newsgroup news:newsgroupname news: news.newusers.questions
FTP ftp://sitename ftp://ftp.mysite.com/
TelNet telnet://sitename telnet://bbs.mysite.com/
1.3 Списки
В языке HTML предусмотрены основные типы списков: маркированный, нумерованный и список определений.
Для создания маркированного списка, называемого также ненумерованным или неупорядоченным, предусмотрен тэг
- (Unordered List). В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка. Вид маркеров списка определяется браузером, причем при создании вложенных списков браузеры автоматически разнообразят вид маркеров различного уровня вложенности.
- (List Item – элемент списка). Тэг
- не нуждается в соответствующем закрывающем тэге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки. Пример HTML-документа, использующего маркированный список, отображение которого браузером показано на рис. 1.3.1:
Пример маркированного списка</ TITLE ><br /> <br /></HEAD><br /> <br /><BODY><br /> <br /><ul><br /> <br /><b>Знаки зодиака:</b><br /> <br /><li>Овен<br /> <br /><li>Телец<br /> <br /><li>Близнецы<br /> <br /><li>Рак<br /> <br /><li>Лев<br /> <br /><li>Дева<br /> <br /><li>Весы<br /> <br /><li>Скорпион<br /> <br /> <li>Стрелец<br /> <br /><li>Козерог<br /> <br /><li>Водолей<br /> <br /><li>Рыбы<br /> <br /></ul><br /> <br /></BODY><br /> <br /> </HTML><br /><br /><br /><img src="images/138410-nomer-98838af.jpg"><br /><br /><br />Рис. 1.3.1. Отображение маркированного списка<br /><br /><br />Тэг <ul> имеет следующие параметры:<br /> <ol> <li> compact (устарел, не поддерживается большинством браузеров);<br /> <li> type (допустимые значения : disc, circle square).<br /> </ol> <br /> type = disc - маркеры отображаются закрашенными кружками;<br /> <br /> type = circle — маркеры отображаются не закрашенными кружками;<br /> <br /> type = square — маркеры отображаются закрашенными квадратиками.<br /> <br /> Пример записи: <ul type = circle>.<br /> <br /> Значением, используемым по умолчанию, является type = disc. Для вложенных маркированных списков на первом уровне по умолчанию используется значение disc, на втором — circle, на третьем и далее — square. Параметр TYPE с теми же значениями может употребляться для указания вида маркеров отдельных элементов списка. Для этого параметр TYPE с соответствующим значением разрешено указывать в тэге элемента списка <li>.<br /> <br /> Пример записи: <li type = circle><br /> <br /> <b>Графические маркеры списка</b><br /> <br /> В качестве маркеров списка можно использовать графические изображения, при этом возможно вообще обойтись без тэгов <li>. Единственной задачей, которую нужно при этом решить, будет отделение элементов списка друг от друга. Для этого можно использовать тэги абзаца <Р> или принудительного перевода строки <br />. Пример реализации списка с графическими маркерами, отображение которого представлено на рис. 1.3.2, показан ниже:<br /> <br /><HTML><br /> <br /><HEAD><br /> <br /><TITLE>Маркированный список
<В>Знаки зодиака:
Тэги
- и
Для создания маркированного списка необходимо использовать тэг-контейнер
или принудительного перевода строки
. Каждый элемент списка должен начинаться тэгом
Овен<ВR> Телец<ВR> Paк Лeв Дeвa Весы Скорпион Стрелец Козерог<
IMG src="images/Green.jpg"> Скорпион<ВК> Koзepoг Boдoлeй РыбыРис. 1.3.2. Маркированный список
с графическими маркерами списка
Здесь в качестве маркера элементов списка
используется графический файл Green.jpg.
Нумерованный список
Для создания нумерованного списка следует использовать тэг-контейнер