Основы web-дизайна



Дата11.07.2014
Размер0.93 Mb.
ТипРеферат


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

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

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

АННА ИВАНОВНА ТАРАНУХИНА
ОСНОВЫ 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.

Остальную часть рынка делят между собой:

–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.html">

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



<А HREF="example.html">

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

Указание адреса может быть относительным или абсолютным.

Если в URL-адресе не указывается полный путь к файлу, то такая ссылка называется относительной. В этом случае определение местоположения файлов выполняется с учетом местоположения документа, в котором имеется такая ссылка. Например, если браузер загрузил страницу, находящуюся по адресу http://www.mysite.com/page, то относительный указатель /picture подразумевает адрес http://www.mysite.com/page/picture, т. е. подкаталог, расположенный на той же машине.

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

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



Правила записи ссылок

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

Оба действия выполняются при помощи тэга <А>.

Тэг <А>

Тэг <А> имеет единственный параметр href, значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным, например, http://www.server.com/home/index.htm. Этот тэг является контейнером, поэтому необходимо поставить закрывающий тэг :



<А hyref=URL-адрес>Текстовый указатель ссылки

Указатель ссылки может быть относительным или абсолютным. Для облегчения работы с относительными указателями ссылок введен тэг . Он располагается в начале документа в разделе HEAD и содержит URL-адрес, относительно которого в документе построена вся адресация. Это указание влияет на любой тэг документа, в котором используется относительная адресация. Если тэг отсутствует, то адресация строится относительно адреса текущего документа.



Внутренние ссылки

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

Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения. Например, если вы хотите сделать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра name тэга <А>. При этом параметр href не используется, и браузер не выделяет содержимое тэга <А>. Например:

<А name =chapter_5>

Обратите внимание, что в приведенном примере отсутствует содержимое тэга <А>. Обычно именно так и делают, поскольку здесь нет необходимости как-то выделять текст, а требуется лишь указать местоположение.

После того как место назначения определено, можно приступить к созданию ссылки на него. Для этого, вместо указания в параметре href адреса документа, как это делалось ранее, поместим туда имя ссылки с префиксом #, говорящим о том, что это внутренняя ссылка.

<А href ="#chapter_5">Глава 5

Теперь, если пользователь щелкнет кнопкой мыши на словах "глава 5",

браузер выведет соответствующую часть документа в окне просмотра.

Ссылки на другие ресурсы Интернета

Ресурсы Интернета Формат ссылки Пример записи ссылки

Web-страница http://sitename http://www.mysite.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></body>


Похожие:

Основы web-дизайна iconПрограмма курса " web-программирование ( Основы web дизайна)."
...
Основы web-дизайна icon«Web- проектирование и Web-дизайн. Пакет FrontPage2003. Управление Web-сайтом»
Цель работы: Ознакомление с основами Web-проектирования и Web-дизайна. Формирование навыков использования пакета FrontPage 2002/2000...
Основы web-дизайна iconПриложение к курсу «Основы языка гипертекстовой разметки html и web-дизайна» Приложение №1. Таблица базовых цветов
Это основные цвета, используемые в html. Все они прекрасно отображаются даже в 256-цветном режиме работы видеокарты. Несомненно,...
Основы web-дизайна icon1 Основы ит в дизайне
Разновидности дизайна и их общая характеристика. Научные основы дизайна: теория систем, теория управления, теория принятия решений,...
Основы web-дизайна icon1 Основы ит в дизайне
Разновидности дизайна и их общая характеристика. Научные основы дизайна: теория систем, теория управления, теория принятия решений,...
Основы web-дизайна icon1 Основы ит в дизайне
Разновидности дизайна и их общая характеристика. Научные основы дизайна: теория систем, теория управления, теория принятия решений,...
Основы web-дизайна iconПрограмма дисциплины «Основы Web-дизайна. Часть Каскадные таблицы стилей (css)»
«0»; выполненные самостоятельные задания размещаются на персональном сайте в назначенные преподавателем сроки; при несвоевременном...
Основы web-дизайна iconЗаведующий кабинетом технологического образования гупм санкт-Петербурга
Настоящая программа рассчитана на начальное профессиональное обучение учащихся 10 – 11 классов по курсу «Интернет-технологии. Основы...
Основы web-дизайна iconУчебное пособие по курсу «дизайн интерьера»
Теоретические основы дизайна интерьера. Как создать современный интерьер? Сущность дизайна. Дизайн для потребителя. Определение
Основы web-дизайна iconСоздание Web страниц с помощью html
Обучающая: дать представление основных понятий Web – сервер, Web – сайт, Web – страница, гиперссылка, тег, структура html – документа,...
Разместите кнопку на своём сайте:
ru.convdocs.org


База данных защищена авторским правом ©ru.convdocs.org 2016
обратиться к администрации
ru.convdocs.org