пособие веб 2012 - ulstu.ruvenec.ulstu.ru/lib/disk/2013/Chamina.pdf · полезна для серверов, браузеров и поисковых машин. Различают

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ федеральное государственное бюджетное образовательное учреждение

высшего профессионального образования «УЛЬЯНОВСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»

WEB-ДИЗАЙН

Методические указания к практическим занятиям по дисциплине «Web-дизайн» для студентов специальности

03130165 «Теоретическая и прикладная лингвистика» и направления 03570062 «Лингвистика»

Составитель О. Г. Чамина

Ульяновск УлГТУ 2013

УДК 004.738.5 (076)

ББК 32.973.202 я7

В 26

Рецензент канд. техн. наук, доцент кафедры «Вычислительная

техника» факультета информационных систем и технологий

Ульяновского государственного технического университета

Мартынов А.И.

Одобрено секцией методических пособий научно-методического

совета университета

Web-дизайн : методические указания к практическим занятиям по дисциплине «Web-дизайн» для студентов специальности 03130165 «Теоретическая и прикладная лингвистика» и направления 03570062 «Лингвистика» / сост. О. Г. Чамина. – Ульяновск : УлГТУ, 2013. – 60 с.

Методические указания к проведению практических занятий составлены

в соответствии с программой дисциплины «WEB-дизайн». Включают

теоретический материал, примерные задания по основным разделам.

Предназначены для студентов специальности 03130165 «Теоретическая и

прикладная лингвистика» и направления 03570062 «Лингвистика». Могут быть

использованы студентами других специальностей.

Подготовлены на кафедре «Прикладная лингвистика».

Публикуется в авторской редакции.

УДК 004.738.5 (076)

ББК 32.973.202 я7

© Чамина О.Г., составление, 2013

© Оформление. УлГТУ, 2013

В 26

3

СОДЕРЖАНИЕ

1. ЯЗЫК HTML .......................................................................................... 4

1.1 HTML-редакторы ........................................................................ 5

1.2 Структурные теги HTML ............................................................ 6

1.3 Таблицы ........................................................................................ 9

1.4 Форматирование текста ............................................................ 13

1.5 Вставка изображений и других элементов .............................. 15

1.6 Создание ссылок ........................................................................ 17

1.7 Фреймы ....................................................................................... 18

1.8 Формы ......................................................................................... 21

2. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ (CSS) ..................................... 30

2.1 Виды CSS-селекторов ............................................................... 30

2.2 Способы задания CSS ............................................................... 33

2.3 Форматирование средствами CSS ............................................ 36

3. БЛОЧНАЯ ВЕРСТКА <DIV>+CSS ................................................... 41

4. СЦЕНАРИИ JAVA SCRIPT ............................................................... 44

5. АППЛЕТЫ JAVA ................................................................................ 46

ПРАКТИЧЕСКОЕ ЗАДАНИЕ №1 ......................................................... 50








БИБЛИОГРАФИЧЕСКИЙ СПИСОК .................................................... 60

4

1. ЯЗЫК HTML HTML (Hypertext Markup Language – язык разметки гипертекста),

стандартный язык разметки документов для WWW (World Wide Web – Всемирная паутина). HTML-документ интерпретируется браузерами и отображается в виде веб-страницы в удобной для просмотра визуальной форме.

HTML – «авторский» язык. Первая его версия была предложена в 1989 году Тимом Бернерс-Ли (Tim Berners-Lee) в рамках его проекта «Системы гипертекстовых документов», которая должна была использоваться внутри Европейского Центра ядерных исследований (CERN). В 1990 году эта система была названа World Wide Web. Основными составляющими Всемирной паутины стали язык разметки гипертекста (HTML), протокол передачи гипертекста (HTTP), универсальный локатор ресурса (URL).

Активно поддерживался этот язык компанией NSCA (Национальный центр суперкомпьютерных приложений), где был реализован один из первых Web-браузеров – Mosaic.

HTML является приложением SGML (Standard Generelized Markup Language - Cтандартный обобщённый язык разметки) и соответствует международному стандарту ISO 8879.

Версии HTML-языка: HTML 2.0 – 1994; HTML 3.2 – 1996; HTML 4.0 – 1997; HTML 4.1 – 1999 HTML 4.0 (Specification - http://www.w3.org/TR/html401/) HTML 5 - в разработке. Конец разработки запланирован на 2014 год.

Стандарт HTML и другие стандарты для Web разработаны под руководством World Wide Consortium (консорциум World Wide Web) – W3C. Стандарты, спецификации и проекты новых предложений можно найти на сайте http://www.3w.org

5

Другим источником информации о тегах HTML является HTML Compendium (краткое руководство по HTML), созданный Ron Woodal. Компендиум HTML находится по адресу http://www.htmlcompendium.org.

HTML определяет синтакcиc и размещение специальных инструкций (тегов) веб-документа, которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа.

В основном, HTML-документ является простым текстовым файлом, который содержит текст (содержимое документа) и специальные команды, называемые тегами, с инструкциями о структуре, внешнем виде и функции содержимого.

Для обозначения тегов используется команда <тег>. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание.

Теги бывают двух видов: парные, которые также называют контейнером и одиночные.

Контейнер имеет начальный (открывающий) и конечный (закрывающий) тег. Текст, находящийся между тегами, будет выполнять содержащиеся в них инструкции. Конечный тег имеет то же имя, что и начальный, но перед ним стоит слэш (/), обозначаемый как </тег>.

Одиночные теги не имеют закрывающих тегов, так как они используются для размещения отдельных элементов на странице. Например: тег изображения - <img>, разрыв строки - <br>, горизонтальная линия - <hr> и т.д.

Теги нечувствительны к регистру, поэтому запись <P> и <p> эквивалентна.

1.1 HTML-редакторы

HTML-редакторы можно разделить на 4 типа: • «визуальные» (WYSIWYG); • полу-WYSIWYG; • не-WYSIWYG; • простые текстовые редакторы (н-р Блокнот).

6

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

Например: WEB-ED, Notepad, UltraEdit

Типичным (и наиболее известным) полу-WYSIWYG редактором является HomeSite. Встроены специальные «мастеры», помогающие написать те или иные теги, инструменты и справочники по HTML. Плюс таких редакторов в том, что они позволяют писать «чистый» код.

Например: HomeSite, HotDog, FirstPage, AceHTML Pro

WYSIWYG редакторы относят к системам верстки. Знаний HTML практически не требуется, всю работу по генерации HTML-кода осуществляет сама программа. Однако, код полученный с помощью таких редакторов не всегда бывает оптимальным.

Например: Macromedia Dreamweaver, Microsoft FrontPage, Adobe GoLive, NetObjects Fusion

1.2 Структурные теги HTML Код программы HTML документа разделяется структурно на две

основные части: <head> и <body>. В head содержится метаинформация о документе, например, язык, на котором пишется текст, версия языка HTML, ключевые слова, общий заголовок HTML-документа. В body находится само содержимое документа (то, что выводится в окне браузера).

Пример демонстрирует теги, образующие основной структурный скелет документа HTML: <HTML>

<HEAD> <TITLE> Название документа </TITLE>

</HEAD> <BODY> Содержимое документа

</BODY> </HTML>

7

Рассмотрим теги управляющие структурой документа, а также предоставляющие информацию о документе, управляющие его внешним видом или функционированием на внешнем уровне. Тег-контейнер HTML

Тег помещают в начало и конец документа, обозначает начало и завершение создания HTML-документа. Тег-контейнер HEAD

Тег определяет заголовочную часть документа. Атрибуты отсутствуют. Тег используется в качестве контейнера для других тегов, таких как <meta>, <title>, <link>, <script>. Тег-контейнер TITLE

Определяет название документа. Тег-контейнер BODY

Тег определяет начало и конец основной части документа. Атрибуты этого тега оказывают влияние на весь документ. Основные атрибуты тега <body>:

• background = url - определяет изображение, которое будет служить фоном для страницы

• bgcolor = “#rrggbb” или “название цвета” - задает цвет фона страницы. Значение задается RGB-значением или названием цвета.

• border = число – задает толщину рамки таблицы (в пикселах). Задание border=0 отменяет появление границы. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <TABLE>, то вид рамки меняется. Когда в теге <TABLE> используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.

• bordercolor = “#rrggbb” или “название цвета” - задает цвет рамки таблицы.

• cellpadding = число – задает размер интервала между границей ячейки и ее содержимым. Значение по умолчанию равно 1.

8

• cellspacing = число – задает размер интервала между ячейками таблицы.

• height = число, проценты – задает высоту всей таблицы. Значение может быть в пикселах или в процентах от размера окна браузера.

• width = число, проценты – задает общую ширину таблицы. Может быть задан в пикселах или в процентах от размера окна браузера.

Тег DOCTYPE Тег указывает стандарт разработки HTML-документа. Согласно

спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает, какая именно версия (X)HTML используется на странице.

Например: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Тег META Все мета-теги не несут визуальной информации и располагаются в

секции <head></head> документа. Информация, находящаяся в этом теге, полезна для серверов, браузеров и поисковых машин. Различают два вида тегов: использующие атрибут name и использующие атрибут http-equiv. В каждом случае необходимо указывать атрибут content, который задает значение именованной информации или функции. Основные атрибуты тега <meta>:

• <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> - указывает браузеру кодовую страницу для правильного отображения символов браузером;

• <meta http-equiv=“Content-Language” content=“ru” >– указывает язык документ. Значение этого атрибута может использоваться как поисковыми роботами, так и веб-серверами.

• <meta http-equiv=“Refresh” content=“время в секундах”> или <meta http-equiv=“Refresh” content=“время в секундах”; URL> - в первом случае происходит периодическая перезагрузка документа через указанное время, во втором – через указанное время происходит переход по указанному адресу.

9

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

• <meta name=“Description” content=“Описание документа, до 100 символов”> - информация, содержащаяся в этом атрибуте, влияет на результаты поиска, осуществляемого поисковыми системами. Общий результат включает следующие данные: 1. URL документа; 2. название документа (содержимое тега <title>); 3. описание документа, т.е. Description или начальный фрагмент HTML-документа; 4. рейтинг (коэффициент соответствия документа запросу пользователя)

• <meta name=“Keywords” content=“Ключевые слова, через, запятую”> - набор слов и фраз, наиболее полно характеризующих HTML-документ, которые являются основным критерием поиска вашего документа поисковыми системами.

• <meta name=“Author” content=“ФИО”> - информация об авторе данного документа

• <meta name=“Copyright” content=“ ”> - информация об авторских правах.

• <meta name=“Robots” content=“all”> - правила индексации. При указании параметра all индексируются все HTML-страницы, при значении index – только индексные страницы.

10

1.3 Таблицы В своей основе таблицы представляют собой ячейки, объединенные

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

Минимальный набор тегов для описания таблицы включает <TABLE>, <TR>, <TD>. Допускается вместо тега <TD> использовать тег <TH>. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. В остальном, разницы между ячейками, созданными через теги <TD> и <TH>, нет.

Приводимый ниже HTML-код демонстрирует базовую структуру таблицы с четыремя ячейками:

<TABLE> <TR>

<TD>Ячейка 1</TD> <TD>Ячейка 2</TD>

</TR> <TR>


</TR> </TABLE>

Тег <TABLE> определяет содержимое таблицы. Каждая строка задается тегом <TR> и состоит из множества ячеек данных. Количество столбцов определяется количеством ячеек в строке. Ячейки с данными обозначаются тегом <TD>. Ячейка таблицы может содержать любые данные, выводимые HTML-документом (форматированный текст, гиперссылки, графические объекты, мультимедийные элементы и другие таблицы). Основные элементы табличной структуры

1. Тег-контейнер TABLE.

11

Основные атрибуты тега <table>: • align = left|right|center - задает выравнивание таблицы по краю окна

браузера. • background = url - определяет изображение, которое будет служить

фоном для таблицы • bgcolor = “#rrggbb” или “название цвета” - задает цвет фона

таблицы. Значение задается RGB-значением или названием цвета. • border = число – задает толщину рамки таблицы (в пикселах).

Задание border=0 отменяет появление границы. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <TABLE>, то вид рамки меняется. Когда в теге <TABLE> используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.


• cellpadding = число – задает размер интервала между границей ячейки и ее содержимым. Значение по умолчанию равно 1.

• cellspacing = число – задает размер интервала между ячейками таблицы.

• height = число, проценты – задает высоту всей таблицы. Значение может быть в пикселах или в процентах от размера окна браузера.

• width = число, проценты – задает общую ширину таблицы. Может быть задан в пикселах или в процентах от размера окна браузера.

2. Тег-контейнер TR Задает в таблице строку ячеек. Строка таблицы, ограниченная тегами <tr>, не имеет никакого содержания, кроме совокупности ячеек таблицы (<td>)

Основные атрибуты тега <tr>: • align = left|right|center - задает выравнивание текста и других

элементов в ячейках текущей строки. В спецификации W3C признан

12

нерекомендуемым, предпочтение отдано позиционированию с помощью таблиц стилей (CSS).

• valign = top|middle|bottom – задает выравнивание текста (или других элементов) по вертикали в ячейках текущей строки.

• background = url - определяет изображение, которое будет использоваться как фон строки.

• bgcolor = “#rrggbb” или “название цвета” - задает цвет строки. Значение цвета, заданного для фона строки, перекрывает значение, заданное для таблицы в целом.

• bordercolor = “#rrggbb” или “название цвета” - задает цвет рамки строки.

3. Тег-контейнер TD Определяет ячейку данных таблицы. Ячейка таблицы может содержать любую информацию, в том числе и таблицу. Основные атрибуты тега <td>:

• align = left|right|center - задает выравнивание текста или другого содержимого ячейки таблицы. Значение по умолчанию left.

• valign = top|middle|bottom – задает выравнивание текста (или других элементов) по вертикали в ячейках текущей строки.

• background = url - определяет изображение, которое будет использоваться качестве фона в ячейке.

• bgcolor = “#rrggbb” или “название цвета” – определяет цвет, который будет использоваться в ячейке таблицы. Это значение перекрывает значения цветов, заданные на уровне строки и таблицы.


• colspan = число – задает количество столбцов таблицы, которые нужно объединить.

• rowspan = число – задает количество строк, объединяемых данной ячейкой.

13

• height = число, проценты – задает высоту ячейки. Значение может быть в пикселах или в процентах от высоты таблицы.

• width = число, проценты – задает ширину ячейки. 4. Тег-контейнер CAPTION

Контейнер для названия таблицы. 5. Объединение строк и столбцов

Сложные по структуре таблицы получаются путем объединения ячеек как по вертикале, так и по горизонтали. Для этой цели тег <td> принимает следующие атрибуты:

• Colspan=n – объединение ячеек по горизонтали (столбцов) • Rowspan=n – объединение ячеек по вертикали (строк),

где n – количество ячеек. Пример HTML-кода таблицы:

<TABLE BORDER=1 WIDTH=100% HEGHT=100% CELLPADDING=5> <TR>

<TD ROWSPAN=2>Ячейка 1</TD> <TD COLSPAN=2>Ячейка 2</TD>

</TR> <TR>


</TR> </TABLE>

Результат: Ячейка 1 Ячейка 2

Ячейка 3 Ячейка 4

14

1.4 Форматирование текста

Следует помнить, что HTML разрабатывался не для строгого определения представления документа на экране, а скорее как средство разметки документа. Рассмотрим теги, которые определяют вывод элементов текста на экран. Абзацы и заголовки (блочные элементы) Блочные элементы всегда форматируются таким образом, что перед ними и после них имеется свободный интервал.

1. Тег-контейнер P. Тег обозначает начало и конец абзаца. Основные атрибуты тега <P>:

• align = left|right|center - задает выравнивание абзаца по краю окна браузера.

2. Теги-контейнеры H1…H6. Тег обозначает, что элемент является заголовком. Существует шесть различных уровней заголовков от <h1> до <h6>, каждый последующий уровень выводит заголовок меньшего размера. Основные атрибуты:

• align = left|right|center - задает выравнивание заголовков по краю окна браузера.

3. Тег-контейнер BLOCKQUOTE. Цитируемым абзацем называется вложенный текст, который выводится на экран с отступом от левого и правого полей и добавлением интервала сверху и снизу от абзаца. Внешний вид текста 1. <strong>…</strong> - вложенный текст выводится жирным шрифтом 2. <em> … </em> - вложенный текст выводится курсивом 3. <u> … </u> - вложенный текст при выводе будет подчеркнут. 4. <font>…</font> - оказывает воздействие на стиль (цвет, гарнитура и размер шрифта) вложенного текста. Основные атрибуты <font>:

15

• color = “#rrggbb” – определяет цвет, используя шестнадцатеричные значения RGB

• face = гарнитура (или список гарнитур) – определяет гарнутуру шрифта для текста. Можно ввести список шрифтов (через запятую), браузер использует первый доступный шрифт из данного списка.

• size = значение – устанавливает абсолютное значение размера шрифта в диапазоне от 1 до 7 (по умолчанию 3).

Пробелы и позиционирование 1. <br> - тег конца строки. Начинает новую строку, но без пропуска интервала. 2. <center>…</center> - центрирует вложенный текст горизонтально на странице. 3. <pre>…</pre> - определяет границы текста с заданным форматированием. Это означает, что строки выводятся точно в том виде, как они напечатаны. Списки (нумерованные, маркированные) 1. <ol>…</ol> - определяет начало и конец нумерованного списка, состоящего из элементов <li>. Основные атрибуты:

• start = номер – начало нумерации списка • type= 1|A|a|I|i – система нумерации списка

2. <ul>…</ul> - определяет начало и конец маркированного списка, состоящего из элементов <li>. Основные атрибуты:

• type = disc|circle|square – определяет тип маркера элементов списка 3. <li>…</li> - обозначает элемент списка. Используется внутри тегов <ol>, <ul>. 4. <dl>…</dl> - задает список определений, состоящий из терминов <dt> и определений <dd>. 5. <dt> … </dt> - обозначает термин, включаемый в список определений. 6. <dd>…</dd> - обозначает определение термина в списке определений.

16

1.5 Вставка изображений и других элементов

1. <img> - вставляет изображение в документ. По умолчанию нижняя часть изображения будет выравниваться по базовой линии соседнего текста. Существует более десятка атрибутов данного тега, которые оказывают влияние на представление изображения на экране. Основные атрибуты:

• src=url изображения – задает URL изображения. Обязательный атрибут.

• border=n – определяет ширину границ рамки изображения в пикселах.

• аlt=текст – задает строку альтернативного текста, который будет выводиться вместо изображения, когда оно недоступно.

• Width=n – определяет ширину изображения • Height=n – определяет высоту изображения • Hspace=n – задает интервал справа и слева изображения • Vspace=n – задает в пикселах размер свободного интервала над и

под выровненным графическим изображением. • Clear=left|right|all – отмена обтекания текста

2. <embed> - помещает на веб-страницу мультимедийные объекты, для отображения которых на экране требуются встраиваемые приложения (plugs-in), например Flash-movie. Многие атрибуты аналогичны атрибутам тега <img>. 3. <applet>…</applet> - тег для размещения на веб-странице апплета Java. Многие атрибуты аналогичны атрибутам тега <img>. 4. <bgsound> - автоматически включает фоновый аудиофайл при загрузке документа в браузер. 5. <hr> - выводит на странице горизонтальную линейку. Основные атрибуты <hr>: align = left|right|center – горизонтальное выравнивание линейки size=число - задает толщину линейки в пикселах

17

width=число или % - задает длину линейки. 6. <marquee>…</marquee> - создает маркированную область «бегущего» текста. Многие атрибуты аналогичны атрибутам тега <img>. 7. <object>…</object> - универсальный тег для размещения объектов самых разных типов: элементов управления ActiveX, специальных мультимедийных встраиваемых приложений, Java-апплетов, изображений и прочих объектов.

1.6 Создание ссылок

<a>…</a> - тег определяет якорь внутри документа. Якорь используется для связи с другим документом. Он также может применяться в качестве фрагмента документа, который служит ссылкой для связи с определенной точкой в документе HTML. Основные атрибуты: href = url – Определяет URL документа, на который делается ссылка. Примеры ссылок:

1. На локальный файл: <a href=”filename.html”>…</a>

2. На внешний файл: <a href=”http://server/path/file.html”>…</a>

3. На именованный якорь: <a href=” http://server/path/file.html#fragment”>…</a>

4. На именованный якорь в том же просматриваемом документе: <a href=”#fragment”>…</a>

5. Для передачи e-mail-сообщения: <a href=”mailto:username@domain”>…</a>

6. На файл FTP-сервера: <a href=”ftp://server/path/filename”>…</a>

18

1.7 Фреймы

Фреймы позволяют разделить окно браузера на несколько частей и в каждой из них выводить свой HTML-документ.

Для создания фрейма используется тег <frameset>, который заменяет тег <body> в документе и применяется для разделения экрана на области. Внутри данного контейнера находятся теги <frame>, которые указывают на HTML-документ, предназначенный для загрузки. Основные элементы фреймовой структуры

1. Тег-контейнер FRAMESET Данный тег определяет образующую группу фреймов. Основные атрибуты тега <frameset>:

• Border = число - задает толщину рамки фрейма (в пикселах) между всеми фреймами в группе.

• Bordercolor = “#rrggbb” или “название цвета” - устанавливает цвет всех границ в группе фреймов.

• Cols = список - устанавливает количество и размер столбцов в группе фреймов. Количество столбцов определяется количеством значений в списке. Значения размеров могут задаваться в пикселях, процентах или относительных значениях (*), распределяющих доступное свободное место.

• Rows = список - задает количество и размер строк в группе фреймов. Количество строк определяется количеством значений в списке. Значения размеров могут задаваться в пикселях, процентах или относительных значениях (*), распределяющих доступное свободное место.

• Frameborder = 1|0 или yes|no - определяет вывод трехмерных разделителей между фреймами в данной группе фреймов.

• Framespacing = число - добавляет дополнительный свободный интервал между соседними фреймами.

2. Тег <frame> Данный тег определяет один фрейм в составе тега <frameset>.

19

Основные атрибуты тега <frame>: • Bordercolor = #rrggbb или название цвета - устанавливает цвет

фрейма. • Frameborder = 1|0 или yes|no - задает вывод трехмерного

разделителя между текущими окружающими его фреймами. • Marginwidth=число - задает количество пикселов в промежутке

между левым и правым краем фрейма и его содержимым. • Marginheight=число - определяет интервал между верхней и

нижней границей фрейма и его содержимым. • Name=текст - назначает имя фрейму. Это имя может использоваться

в ссылках для загрузки просматриваемого документа в именованный фрейм.

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

• Scrolling = yes|no|auto - задает появление полосы прокрутки во фрейме.

• Src = url - Задает местонахождение исходного HTML-файла, который должен появиться во фрейме.

3. Тег-контейнер IFRAME Данный тег определяет в документе плавающий фрейм. Он имеет атрибуты, подобные атрибутам тега <img>. Основные атрибуты тега <iframe >:

• Align = top|middle|bottom|left|right - задает выравнивание на странице в потоке текста внутреннего фрейма.

• Frameborder = 1|0 или yes|no - включает или отключает изображение объемных границ фрейма. По умолчанию равен 1, границы выводятся.

• Height = число - задает высоту фрейма в пикселях или в процентах от размера окна.

20

• widht = число - задает ширину фрейма в пикселях или в процентах от размера окна.

• Hspace = число - используется совместно с выравниванием влево и вправо. Атрибут определяет интервал влево и вправо от фрейма.

• Vspace = число - используется совместно с выравниванием влево и вправо. Атрибут определяет размер интервала сверху и снизу от фрейма.

• Marginheight = число - задает размер интервала между верхним и нижним краями фрейма и его содержимым.

• Marginwidth = число - задает размер интервала между левым и правым краями фрейма и его содержимым.

• Name = текст - назначает имя фрейму, по которому будут осуществляться ссылки.

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

• Scrolling = yes|no|auto - задает появление полосы прокрутки во фрейме.

• Src = url - задает URL HTML-документа, который должен появиться во фрейме.

4. Тег-контейнер NOFRAMES Данный тег определяет содержимое, которое будет выведено на экран браузерами, работающими с фреймами. Браузеры которые поддерживают фреймы, проигнорируют содержимое тегов <noframes и </noframes> . Пример создания двух горизонтальных фреймовых окон: < frameset cols="50%,50%"> < frame src ="left.html"> < frame src ="right.html"> </frameset> Пример создания трех вертикальных фреймовых окон (добавим некоторые атрибуты):

21

<frameset cols="150,*,200"> <frame src="menu.html" noresize> <frame src="content.html" noresize name="main_window" scrolling="yes"> <frame src="news.html" scrolling="no" noresize marginwidth="0" marginheight="0"> </frameset>

1.8 Формы

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

Для указания браузеру, где начинается и заканчивается форма, используется тег <FORM>. Между открывающим и закрывающим тегами <FORM> и </FORM> можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. Документ может содержать несколько форм, но они не должны быть вложены одна в другую.

HTML-теги форм лишь обеспечивают интерфейс и элементы управления для сбора информации. Реальная работа выполняется приложениями, обрабатывающими формы, обычно сценариями CGI (Common Gateway Interface, интерфейс общего шлюза). CGI представляет собой интерфейс между HTTP (программой ответственной за Web-транзакции ) и другими программами на сервере.

Программа CGI (или сценарий) может быть написана на нескольких языках программирования. Для сервера не имеет значения, на каком именно, если он обретает возможность принимать данные и посылать их назад.

Обычно Веб-дизайнер занимается разработкой элементов HTML-форм, а программирование остается опытным программистам. Основные элементы HTML-форм

1. Тег-контейнер FORM (базовая форма)

22

Тег <form> обозначающий форму, содержит информацию, необходимую для взаимодействия с CGI-программой на сервере. Форма состоит из определенного числа элементов управления (полей ввода текста, кнопок, флажков, радиокнопок и т.д.) Когда пользователь завершает заполнение формы и нажимает кнопку «submit», введенные данные поступают в CGI-программу, заданную атрибутом action. Внутри одного документа может находиться несколько форм, но они не могут быть вложенными. Необходимо следить и за тем, чтобы они не перекрывали друг друга.

Каждая форма характеризуется некоторыми атрибутами которые указываются в теге <FORM>. Эти параметры задают имя формы, ее обработчик и метод отправки данных на сервер, а также некоторые другие характеристики. Основные атрибуты тега <form>:

• action - Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии. После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ. Если параметр action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию. В качестве обработчика можно указать также адрес электронной почты, начиная его с ключевого слова mailto. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте параметр enctype со значением text/plain в теге <FORM>.

• enctype – устанавливает тип данных отправляемых вместе с формой. Обычно устанавливать значение параметра enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (<INPUT type="file">),

23

следует определить параметр enctype как multipart/form-data. Допускается также устанавливать сразу несколько значений, разделяя их запятыми.

• method - метод сообщает серверу о цели запроса. Различают два метода — GET и POST. Существуют и другие методы, но они пока мало используются. GET - Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке. POST - метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д.

• target – после того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне. В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. Зарезервированные имена следующие: _blank — загружает страницу в новое окно браузера; _self — загружает страницу в текущее окно;

24

_parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self; _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

2. Тег-контейнер INPUT Рассмотренные ниже элементы управления вводятся как варианты атрибуты type тега <input>

Текстовое поле - <input type="text" атрибуты> Создает элемент для ввода пользователем строки текста. Основные атрибуты:

• size = “число” – ширина поля • maxlength = “число” – задает максимальное количество символов

разрешенных в тексте. Если этот параметр опустить, то можно вводить строку длинее самого поля.

• name = “Name” - определяет имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.

• value = “текст” – задает начальный текст в поле. • readonly - устанавливает режим «только для чтения». • disabled - блокирование элементов форм. Обычно используется для

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

• tabindex = “порядковый номер” - определяет последовательность перехода между полями при нажатии на <Tab>.

Текстовое поле ввода пароля - <input type="password" атрибуты> Поле для пароля — обычное текстовое поле, но отличается тем, что все символы показываются звездочками или кружочками. Хотя символы не выводятся, они доступны как данные формы, поэтому этот способ не является безопасным способом передачи паролей. Возможные атрибуты совпадают с элементом текстового поля Невидимый элемент ввода - <input type="hidden" атрибуты>

25

Тип hidden (невидимый) добавляет в форму элемент управления, не отображаемый браузером. Он удобен, когда необходимо послать на обработку информацию вместе с данными, введенными пользователем. Это могут быть метки, используемые сценарием для сортировки форм. Некоторые сценарии CGI для обеспечения правильной работы требуют, чтобы к формам были добавлены определенные невидимые поля. Атрибуты совпадают с атрибутами элемента текстового поля. Флажки (галочки) - <input type="checkbox" атрибуты> Флажки обычно используются для задания многовариантных запросов. Когда флажок установлен, соответствующее значение передается вместе с формой в программу обработки на сервере. Основные атрибуты:


• value = “текст” – задает начальный текст в поле. • checked - устанавливает элемент выбранный по умолчанию. • disabled - блокирование элементов форм. • tabindex = “порядковый номер” - определяет последовательность

перехода между полями при нажатии на <Tab>. Кнопка-переключатель (радиокнопка)-<input type="radio" атрибуты> Кнопки-переключатели (типа radio) используют, когда необходимо выбрать один единственный вариант из предложенных. Основные атрибуты:


• value = “текст” – задает начальный текст в поле. • checked - устанавливает элемент выбранный по умолчанию. • disabled - блокирование элементов форм. • tabindex = “порядковый номер” - определяет последовательность

перехода между полями при нажатии на <Tab>. Настраиваемая кнопка - <input type="button" атрибуты>

26

Кнопка типа button не имеет какой-либо предопределенной функции, она является общим средством и настраивается JavaScript. Чтобы написать текст на кнопке, нужно задать атрибут value. Основные атрибуты:


• value = “текст” – задает надпись на кнопке, а также ее значение. • disabled - блокирование элементов форм. • tabindex = “порядковый номер” - определяет последовательность

перехода между полями при нажатии на <Tab>. Кнопка SUBMIT - <input type="submit" атрибуты> Когда пользователь нажимает на эту кнопку, данные формы отправляются на сервер и обрабатываются программой, указанной параметром action тега <FORM>.

Параметр name для этого типа кнопки может быть опущен. Если значение параметра value не указывать, автоматически появится надпись Подача запроса (для браузера Internet Explorer), Отправить (для Opera) или Отправить запрос (для Firefox). Основные атрибуты:

• name = “имя” - определяет имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.

• value = “текст” – задает начальный текст в поле. • disabled - блокирование элементов форм. • tabindex = “порядковый номер” - определяет последовательность

перехода между полями при нажатии на <Tab>. Кнопка RESET-<input type="reset" атрибуты> Кнопка reset восстанавливает данные формы в первоначальное состояние. Атрибуты совпадают с атрибутами простых кнопок. Аналогично кнопке Submit, значение параметра name можно не указывать, тогда надпись Сброс на кнопке будет добавлена браузером автоматически. Значение кнопки Reset никогда не пересылается на сервер.

27

Кнопка – изображение - <input type="image" атрибуты> Можно изменить кнопку button произвольным изображением, используя тип image. Основные атрибуты:


• src = url – задает URL изображения. Обязательный параметр. • align = left|right|center|top|bottom|middle - задает выравнивание

поля. Результат их использования точно такой же, как и у изображений.

• disabled - блокирование элементов форм. • tabindex = “порядковый номер” - определяет последовательность

перехода между полями при нажатии на <Tab>. Выбор файла - <input type="file" атрибуты> Поле формы типа file позволяет пользователю выбрать файл, хранящийся на его компьютере, и послать его на сервер как данные формы. <form enctype="multipart/form-data" method="POST"> <input type="file" атрибуты> </form>

Параметры формы enctype="multipart/form-data" нужен для корректной передачи файла. Если его не указать, будет передан лишь путь к файлу. Атрибуты те же, что и для текстового поля.

3. Тег-контейнер TEXTAREA <textarea атрибуты>текст</textarea> Тег <textarea> создает многострочное текстовое окно с прокруткой, которое позволяет пользователям вводить достаточно большой текст. Текст, который появляется между тегами <textarea>…</textarea>, будет исходным содержимым окна текстового ввода при отображении формы. Основные атрибуты:


28

• cols = “число” – определяет ширину (в символах). Если пользователь вводит текст, который не помещается в созданном окне, то появляется прокуртка.

• rows = “число” - задает количество выводимых строк • wrap – задает параметры переноса строк. Возможные значения: off

— отключает перенос строк; virtuals — показывает переносы строк, но отправляет текст как он введен; physical — переносы строк вставляются где указано и в таком виде текст отправляется.

• readonly - устанавливает режим «только для чтения». • disabled - блокирование элементов форм. • tabindex = “порядковый номер” - определяет последовательность

перехода между полями при нажатии на <Tab>. 4. Тег-контейнер SELECT

Тег <select> создает меню. Оно более компактно, чем группы кнопок или флажков. Меню выводится как спускающееся или в виде прокручиваемого списка в зависимости от заданного размера. Тег <select> работает как контейнер для любого количества тегов <option>. Основные атрибуты тега <select>:

• name = “имя” - определяет имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать список.

• size = “число” – определяет количество видимых строк. По умолчанию одна строка.

• multiple - задает прокручивающийся список, позволяет выбрать сразу несколько строк.

• disabled - блокирование элементов форм. • tabindex = “порядковый номер” - определяет последовательность

перехода между полями при нажатии на <Tab>. Основные атрибуты тега <option>:

• selected - видимое поле по умолчанию • value = “текст” - определяет, что будет отправлено на сервер при

выбранном пункте списка.

29

5. Тег-контейнер LABEL Тег используется для связывания информации с элементами

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

Для связывания элемента формы и текста в теге <LABEL> используется параметр for, аргументом для которого служит идентификатор элемента, задаваемого параметром id. Основные атрибуты тега <label>:

• selected - видимое поле по умолчанию • for = “текст” – связывает метку с элементом управления, используя

значение атрибута for, совпадающее со значением атрибута id внутри элемента управления.

Пример: <form action="handler.php"> <input type="checkbox" id="t1"> Укажите на галочку <input type="checkbox" id="t2">

<label for="t2">Нажмите на этот текст, чтобы выбрать эту галочку</label>

</form>

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

6. Теги-контейнеры FIELSET и LEGEND При создании сложной формы не обойтись без визуального отделения одного логического блока от другого. Этого можно добиться, используя внутри тега <FORM> сочетания тегов и стилей. Например, элементы формы можно выделить, если использовать для них фоновый цвет или рамку, задавая их через CSS. Кроме того, существует и другой подход,

30

который состоит в применении тега <FIELDSET>. Этот контейнер группирует элементы формы, отображая вокруг них рамку. Чтобы добавить к рамке специальный заголовок применяется контейнер <LEGEND>, который должен располагаться в теге <FIELDSET>. Внутри тега <LEGEND> допустимо использовать текст и теги форматирования, а также стили CSS. <form> <fieldset> <legend>Заголовок</legend> <input type="checkbox"> Галочка первая<br> <input type="checkbox"> Галочка вторая<br> <input type="checkbox"> Галочка третья </fieldset> </form> Пример HTML-кода отправки данных текстового поля на e-mail: <FORM METHOD=POST ACTION="mailto:[email protected]"> <INPUT TYPE=TEXT NAME="Name" SIZE=40> <INPUT TYPE=SUBMIT VALUE="Отправить"> <INPUT TYPE=RESET VALUE="Очистить"> </FORM>

2. КАСКАОДНЫЕ ТАБЛИЦЫ СТИЛЕЙ (CSS)

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

Основным понятием CSS является стиль – т.е. набор правил оформления и форматирования, который может быть применен к различным элементам HTML-документа. Синтаксис записи CSS-правила: Селектор {свойство1: значение; свойство2: значение; …}

31

2.1 Виды CSS-селекторов

1. HTML-селекторы (Selectors) Любой элемент HTML может иметь CSS-селектор. Самый простой селектор – просто имя элемента. После селектора располагаются фигурные скобки, содержащие набор CSS-свойств с присвоенными значениями. Селектор определяет стиль элемента, для которого он создан. Пример: H3 {font-family:Arial; font-size:18px; color:red;}

2. Селекторы класса (Class Selectors) Классы применяют, когда необходимо определить стиль для

индивидуального элемента или задать разные стили для одного тега. Для определения селектора класса используется обозначение .имякласса

При совместном использовании с тегами синтаксис для классов будет следующий: Тег.имя класса {свойство1: значение; свойство2: значение; …}

Классы могут быть описаны без привязывания их к определенным элементам. Примеры: .red {color:red;}

Любые элементы с указанным атрибутом class=“red” станут красными. H3.red {color:red;}

Все элементы H3 с атрибутом class=“red” станут красными. 3. ID-селекторы (ID Selectors)

Идентификатор (называемый также «ID-селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически. Для определения ID-селектора используется обозначение # имя идентификатора. Синтаксис использования идентификатора: # имя идентификатора {свойство1: значение; свойство2: значение; …} Например, был создан класс red для передачи красного цвета, но понадобился текст с курсивом. Надо определить ID, например “reditalic”.

32

.red {color:red;} #reditalic {font-style: italic} <body> <p class=“red”>текст-красного цвета </p> <p class=“red” id=“reditalic”> текст-курсив красного цвета </p> </body>

4. Контекстные селекторы Контекстный селектор – селектор, работающий только в определенном контексте. Контекстный селектор состоит из нескольких простых селекторов, разделенных пробелами. Например, для селектора тега синтаксис будет следующий: Тег1 Тег2 {…} – правило для Тег2 применяется только, если он является вложенным в Тег1.

5. Группирование селекторов Группировка: Селектор 1, Селектор 2, … Селектор N {Описание правил стиля}

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

Например, для свойств font возможна запись: H3 {font: bold 14pt Arial}. Для описания стиля границ (borders), полей (margins) и отступов (padding) сокращенно описываются в таком порядке: Top, Right, Bottom, Left (верхнее, правое, нижнее, левое), такой порядок можно запомнить используя правило TRouBLEd.

6. Наследование селекторов Свойства форматирования любого элемента наследуется от

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

7. Псевдоклассы Псевдоклассы – обозначение селектора для определения его

дополнительного свойства. Синтаксис применения псевдоклассов: Селектор:Псевдокласс {Описание правил стиля}

33

Вначале следует элемент, к которому добавляется псевдокласс, затем указывается двоеточие, после которого идет имя псевдокласса.

Псевдоклассы, определяющие состояние элементов – определяют текущее состояние элемента и применяют стиль к нему только в этом случае.

• Active – происходит при активации пользователем элемента.

Например, при наведении курсора на ссылку и нажатии левой кнопки мыши.

• Link – применяется к непосещенным ссылкам, т.е. ссылкам, на которые пользователь еще не нажимал.

• Hover – активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.

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

задавая псевдоклассы для ссылок, делайте это всегда в таком порядке: Link, Visited, Hover, Active (этот порядок можно запомнить при помощи слов “LoVe/HAte”). Вначале указывается visited, а затем идет hover, в противном случае посещенные ссылки не будут изменять свой цвет при наведении на них курсора.

a:link {color:black;} a:visited {color:black;} a:hover {color:green;} a:active {color:yellow;}

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

• First-line – применяется к первой линии текста в элементе и только к блочным элементам

34

• First-letter – применяется к первой букве в элементе и только к блочным элементам

9. Комментарии CSS Синтаксис комментария: /*Это комментарий CSS*/

2.2 Способы задания CSS 1. Inline CSS –внутренние (встроенные) стили

Определения стиля помещается в нужный тег, для этого используется специальный атрибут style. Атрибут style поддерживают практически все теги, “отвечающие” за видимые элементы страницы. Синтаксис: style= “свойство1: значение; свойство2: значение” Пример: <p style="font-size:12pt; font-family:Arial">Текст</p>

1. Embedded CSS – глобальная таблица стилей Глобальная таблица стилей располагается в секции заголовка Веб-

страницы и помещается внутрь специального тега <STYLE>: <STYLE TYPE= “TEXT/CSS”> … </STYLE>

В контейнере STYLE указываются HTML-элементы, классы и идентификаторы с их стилевыми правилами. Пример: <STYLE type="text/css"> body { background: url("fon.jpg")} h3{color:33FF33; font-family:Veranda; text-align: center} .pink{color: FF00FF} #bold{font-weight:bold} </STYLE>

2. External CSS – внешняя (связанная) таблица стилей Стили хранятся в отдельном файле с расширением .css и

привязываются к Веб-странице с помощью тега <LINK> в головной части HEAD HTML-кода. Создается CSS файл в любом текстовом редакторе (например, Блокнот), с расширением текстового файла css. Синтаксис такой же как и у глобального CSS, только в этом случае тег style не указываем.

35

Пример задание ссылки на css-файл: <LINK rel="stylesheet" type="text/css" href="styles.css">

3. Import CSS В теге <STYLE> можно импортировать внешнюю таблицу стилей с

помощью свойства @import: Синтаксис: @import:url(style.css)

Это свойство надо задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значение свойства @import является URL файла таблицы стилей. Тогда к стилям, описанным внутри <STYLE>, присоединятся стили из внешнего файла.

Важно: Внедренные в документ CSS и ссылки на внешние файлы CSS всегда должны размещаться в самом начале документа (x)html между тегами <HEAD></HEAD> Рекомендации: Если стиль необходим в нескольких Веб-страницах, оформите его во внешней таблице стилей. Если стиль используется в нескольких местах одной Веб-страницы, переносите его в глобальную таблицу стилей. Если стиль используется в единственном месте одной Веб-страницы, внедрите его прямо в HTML-тег.

5. Каскадность Стиль определенный в глобальной таблице стилей, имеет приоритет

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

6. Единицы измерения CSS Для задания размеров различных элементов в CSS используются

абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройств вывода, относительные единицы определяют размер элемента относительно значения другого размера.

• Относительные единицы Em – высота шрифта элемента Ex – высота символа х

36

Px - пиксел % - процент

• Абсолютные единицы In – дюйм (1 дюйм равен 2,54 см) Cm - сантиметр Mm - миллиметр Pt – пункт (1 пункт равен 1/72) Pc – пика (1 пика равна 12 пунктам)

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

2.3 Форматирование средствами CSS

1. Типы элементов • Элементы строкового уровня (Строчные элементы)

Элементы строкового уровня (“inline” в терминологии CSS) – это элементы исходного документа, которые не формируют новых структурных единиц текста (например, абзацев). Их содержимое выводится в строке (например, выделенные отрывки текста в абзаце или графические объекты, импортированные в текст).

Элементы строкового уровня содержат строчные элементы. Важным свойством строчных элементов является то, что у них есть свой собственный размер. Он складывается из размера шрифта (для букв), собственных размеров картинок, расстояния между строками. Это означает, что браузер при раскладке строчных элементов определяет их размер сам, без указания параметров width и height. Примеры строчных HTML-элементов: <a>, <img>, <em>, <span> и т.д.

• Элементы уровня блока (Блочные элементы) К элементам уровня блока (“block” в терминологии CSS) относятся

элементы исходного документа, которые визуально форматируются в виде неких структурных единиц текста (например, абзацев).

37

Элементы уровня блока могут содержать и строчные, и блочные элементы.

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

С помощью CSS можно изменять: длину (height), ширину (width), отступы внутри (padding) и снаружи (margin), толщину границ (border); а также позиционировать блок относительно документа или другого блока.

По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. В спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width), отступов (margin), полей (padding), и границ (border).

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

Цвет фона элемента проще всего устанавливать через универсальный параметр background. Фоном при этом заливается область, которая определяется значениями атрибутов width, height и padding. Таким образом, margin не принимает участия в формировании цветной области.

Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается различие при отображении границ. Браузер Internet Explorer проводит рамку внутри блока, использует фоновую заливку по внутреннему краю границы. Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым. Примеры блочных HTML-элементов: <h3>, <p>, <ol>, <ul>, <div> и т.д.

2. Управление типами элементов Каждый элемент в модели форматирования имеет свойство display,

значение которого определяет: отображается или не отображается (none) элемент, является ли он блоком (block), списком (list-item) или встроенным элементом (inline).

3. CSS-свойства оформления

38

1. Свойства текста • font-family - свойство гарнитуры шрифта. Задает список имен

гарнитур шрифтов и/или имен общедоступных гарнитур в порядке их приоритета.

• font-style - стиль шрифта текста. Значения: normal | italic | oblique По умолчанию задается свойство normal, italic задает курсив, oblique – наклонную гарнитуру шрифта. Наклонный шрифт является разновидностью обычного шрифта. Свойство bold (жирный) в синтаксисе таблицы стилей является частью font-weight

• font-variant - стиль шрифта текста для задания отображения маленькими прописными буквами. Значения: normal | small-caps

• font-weight – задает вес, или жирность шрифта. Значения: normal | bold | bolder | lighter | 100 | 200 |300 | … | 900

• font-size – свойство размера шрифта. Существует четыре способа задания размера: Абсолютный размер (absolute size) – при задании размера с использованием ключевых слов размер берется относительно установленного пользователем в браузере размера medium. Значения: xx-small | x-small | small | medium | large | x-large | xx-large На экране компьютера умножающий фактор равен 1.5; если значение medium равно 10 pt, то large будет равно 15 pt.

Относительный размер (relative size) - задает размер шрифта, который на размер либо больше, либо меньше родительского шрифта соответственно. Значения: larger | smaller

Длина (length) – определяет абсолютный размер шрифта Значения: em | ex | px | pt | pc | mm | cm | in

Проценты (percentage) – определяет абсолютный размер шрифта относительно размера шрифта родительского элемента.

39

Свойство font используется для определения значений свойств font-family, font-style, font-variant, font-weight, font-stretch, font-size

• color – свойство для задания цвета текста. • line-height – свойство для задания расстояния между линиями

смежных строк текста (так называемый интерлиньяж). Значения: normal | число | длина | процент Значения можно задать в любых единицах измерения.

• word-spacing – свойство для задания интервала между словами в текстовом элементе. Значения: normal | длина

• letter-spacing – свойство для задания размера интервала между символами Значения: normal | длина

• text-decoration – свойство декорирования текста. Задает подчеркивание, надстрочное подчеркивание, перечеркивание и мигание. Значения: none | underline | overline | line-through | blink

• text-transform – свойство для задания заглавных букв в элементах текста. Возможные значения: none – отображает элемент так, как он напечатан в HTML-источнике, и нейтрализует любые наследуемые значения.

сapitalize – отображает первую букву каждого слова символом верхнего регистра.

lowercase – отображает весь элемент символами нижнего регистра.

uppercase – Отображает весь элемент символами верхнего регистра.

• text-indent – свойство для задания размера отступа перед первой строкой элемента текста. Значения: длина | процент

40

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

• text-align – свойство для горизонтального выравнивания текстовых элементов. Применяется к блочным элементам. Возможные значения: center – выравнивание по центру; left – выравнивание по левому краю; right – выравнивание по правому краю; justify – выравнивание по ширине.

• vertical-align – свойство для вертикального выравнивания элемента. Возможные значения: baseline – выравнивает по базовой линии родительского элемента;

bottom – выравнивает нижнюю часть элемента по самому низкому элементу;

middle – выравнивает по средней точке элемента; sub – делает элемент нижним индексом; super – делает элемент верхним индексом; text-top – выравнивает верхнюю часть элемента по верхней части шрифта родительского элемента.

• white-space – определяет способ обработки пустого пространства внутри элемента. (Устанавливает, будет ли строка, выходящая за границы элемента страницы и не содержащая пробелов, переноситься по словам). Возможные значения: normal – обычная последовательность пробелов; pre – выводит все пробелы, как тег <pre> в документе HTML, но при этом не используется шрифт с фиксированной шириной;

nowrap – предотвращает перенос элементов текста, если не задан тег <br>.

41

2. Свойства фона • background-color – свойство для задания цвета фона элемента.

Применяется ко всем элементам. Значения: RGB - значение | наименование цвета

• background-image – определяет фоновое изображение для элемента. Если задан и цвет фона, то изображение будет помещаться поверх цвета. Значения: URL | none

• background-repeat – повторение фонового изображения Возможные значения: repeat – повторение изображения в вертикальном и горизонтальном направлениях;

repeat-x – повторение изображения только по горизонтали; repeat-y – повторение изображения только по вертикале; no-repeat – вывод изображения только один раз.

• background-attachment – свойство прокручивания фонового изображения Возможные значения: scroll – перемещение фонового изображения вместе с документом;

fixed – фиксирование изображения относительно окна просмотра. • background-position – Определяет начальное положение фонового

изображения. Возможные значения: Проценты | Длина | top/center/bottom | left/center/right

• background – краткая форма задания всех свойств фона 3. Свойства списка • list-style-type – задает вид маркера элемента списка.

Значения те же, что и в атрибуте type для элемента списка <li>.

42

• list-style-image – задает графическое изображение в качестве маркера элемента списка. Значения: URL | none

• list-style-position – определяет положение блока маркера в структурном блоке. Значения: inside | outside

• list-style – краткая форма задания трех свойств list-style-type, list-style-image, list-style-position в одном месте таблице стилей.

3. БЛОЧНАЯ ВЕРСТКА <DIV>+CSS

Основным структурным элементом блочной верстки является блочный элемент (тег-контейнер DIV), который настраивается стилями CSS. Для их корректной разметки, обязательными являются следующие свойства CSS:

• width и height - задают ширину и высоту div элемента; • float - задаёт горизонтальную очерёдность (обтекание элемента

другими слева или справа); • clear - задает вертикальное обтекание (отменяет влияние

горизонтального обтекания float). Для дальнейшего форматирования элементов используются все свойства, которые изложены в спецификации CSS 2.1.

Важная роль для позиционирования блочных элементов отведена следующим свойствам:

• margin - определяет размер поля (внешнее поле); • padding - задает размер внутреннего отступа (отступ содержимого

блока от его рамки); • border - задает размер рамки (контур элемента).

Кроме этого, часто для позиционирования блоков используют свойства top, left, right, bottom, строго задающие позицию блочного элемента, и свойство z-index, позволяющее накладывать элементы друг на друга.

43

Рассмотрим пример стандартной блочной верстки: <body><div class=container>

</div></body>

<div class=header> </div>

<div class=menu> </div>

<div class=content> </div>

<div class=footer></div>

Задаем правила CSS для блочных элементов: .container {height: auto; /*класс для контейнера*/ width: 700px; margin-right: auto; /*центрирование блочного элемента*/ margin-left: auto; } /*центрирование блочного элемента*/ .header {height: 92px; /*класс для блочного элемента «шапка»*/ width: 700px; margin-bottom: 15px;} /*нижний внешний отступ*/ .menu {height: 400px; /*класс для блочного элемента «меню»*/ width: 200px;

float: left; /*обтекание слева*/ margin-bottom: 15px;}

.content {height: 400px; /*класс для блочного элемента «контент»*/ width: 500px; float: right; } /*обтекание справа*/ .footer {height: 25px; /*класс для блочного элемента «подвал»*/

width: 700px; clear: both;} /*обтекание снизу*/

44

4. СЦЕНАРИИ JAVA SCRIPT

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

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

Сценарии JavaScript могут существовать в виде встроенного кода в HTML-страницу или же в виде внешнего файла.

В первом случае, сценарий JavaScript может располагаться в заголовке или теле HTML-документа в неограниченном количестве. Сценарии JavaScript специфицируются в HTML-документе как операторы и функции тегом <SCRIPT>, как значение HTML-атрибута выражением JavaScript, или как обработчик события (прежде всего в элементах формы).

Во втором случае, скрипты располагаются во внешнем файле и связываются с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах. Файлы со сценариями на JavaScript являются обычными текстовыми файлами, как правило, с расширением js. Обычно в отдельных файлах размещают библиотеки функций (определения функций), а также сами сценарии, не указывая тег <script>.

Варианты размещения скриптового тега в коде HTML-документа: <script type="тип"> ... </script> или <script type="тип" src="URL"></script> Основные атрибуты тега <script>:

45

• defer - откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.

• language - устанавливает язык программирования на котором написан скрипт.

• src - адрес скрипта из внешнего файла для импорта в текущий документ.

• type - определяет тип содержимого тега <script>. Например: <script language= “JavaScript”>…// код сценария</script> <a href="delete.php" onclick="return confirm ('Вы уверены?'); ">Удалить</a> <script language= “JavaScript” src= “myscripts.js”></script> Возможные скрипты

1. Отображение даты, времени, календаря на веб-странице 2. Визуальные эффекты для сайта 3. Онлайн игры-тетрис, змейка, морской бой 4. Динамические курсоры и изображения 5. Текстовые эффекты (мерцание, трансформация и т.д.) 6. Меню навигации (выпадающее, вложенное) 7. Скроллинг текста, ссылок и изображений

Пример скрипта отображения даты: <SCRIPT LANGUAGE="JavaScript"> var months=new Array(13); months[1]="Январь"; months[2]="Февраль"; months[3]="Март"; months[4]="Апрель"; months[5]="Май"; months[6]="Июнь"; months[7]="Июль"; months[8]="Август"; months[9]="Сентябрь"; months[10]="Октябрь";

46

months[11]="Ноябрь"; months[12]="Декабрь"; var time=new Date(); var lmonth=months[time.getMonth() + 1]; var date=time.getDate(); var year=time.getYear(); if (year < 2000) year = year + 1900; document.write("<span>" + lmonth + " "); document.write(date + ", " + year + "</span>"); </SCRIPT>

5. АППЛЕТЫ JAVA

Java представляет собой объектно-ориентированный язык программирования, разработанный Sun Microsystems. Следует отметить, что он не имеет отношения к JavaScript.

Основным вкладом Java в Web являются так называемые апплеты, небольшие самостоятельные исполняемые модульные программы. Эти программы, имеющие расширение .class, могут помещаться прямо на Web-страницу, как графика.

Апплеты являются идеальным средством для распространения в Web по следующим причинам:

независимы от платформы; полностью загружаются и запускаются на стороне клиента, то есть не являются дополнительной нагрузкой на сервер;

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

до имитации полетов. Вследствие того, что Java позволяет осуществлять расчеты в реальном времени, они полезны для программ, которые

47

взаимодействуют с пользовательским вводом. Неудивительно, что большой процент апплетов Java является играми, но они используются и для более практических целей, таких как калькуляторы и электронные таблицы. Что более интересно, они могут использоваться в качестве оперативных данных (например, заголовков новостей, данных о котировке ценных бумаг, результатов спортивных соревнований и т. п.) и позволять пользователям находить путь среди данных, связанных друг с другом сложнейшим образом. Существуют, наверное, тысячи апплетов Java. Приведем лишь малую долю примеров того, что они могут делать. Апплеты Java могут быть:

утилитами: калькуляторами, календарями, часами, электронными таблицами и т. п.;

текстовыми эффектами: бегущим текстом, извивающимся текстом, цветными текстовыми сообщениями со вспышками и т. п.;

звуковыми эффектами: цифровыми «гитарами», переключателями программ радиоприемника и т. п.;

играми: Asteroids, кроссвордами, Hangman, Minesweeper и т. д; прочим: диаграммами биоритмов, имитаторами полетов и т. д.

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

Апплеты обычно помещаются на Web-страницу тегом <applet>. Некоторые апплеты требуют, кроме того, чтобы параметры были заданы или настроены тегами <раram>, которые размещаются между открывающим и закрывающим тегами <applet>. Файл с апплетом .class вместе со всеми связанными с ним файлами изображений или аудио файлами следует хранить в том же каталоге, что и HTML-файл.

Тег-контейнер APPLET Синтаксис кода: <applet code="URL">Текст</applet>

48

Основные атрибуты тега <applet>: • align - Задает выравнивание апплета относительно близлежащих

элементов и текста. • alt - Альтернативный текст. • archive - Указывает путь и имя файла с архивом. • code - Имя файла • codebase - Путь к папке с апплетом, который задан атрибутом code. • height - Высота апплета. • hspace - Горизонтальный отступ от апплета до окружающего

контента. • vspace - Вертикальный отступ от апплета до окружающего контента. • width - Ширина апплета.

Спецификация W3C HTML 4.0 рекомендует для размещения Java-апплетов в Web-страницах вместо тега <applet> использовать многоцелевой тег <object>. Тег <param>

Тег <param> предназначен для передачи значений параметров Java-апплетам или объектам веб-страницы, созданным с помощью тегов <applet> или <object>. Такой подход позволяет прямо в коде HTML-документа изменять характеристики апплета без его дополнительной компиляции.

Количество одновременно используемых тегов <param> может быть больше одного и для каждого из них задается пара «имя/значение» через атрибутыname и value. Синтаксис кода: <param name="имя" value="значение"> Основные атрибуты:

• name - Имя параметра. • type - MIME-тип объекта. • value - Значение параметра. • valuetype - Тип значения параметра.

Пример добавления апплета в HTML-документ:

49

<object classid="animation.class" width="500" height="200"> <param name="bgcolor" value="#000000"> <param name="delay" value="1000"> <param name="loop" value="5"> </object>

Большинство проблем с апплетами связаны с тем, что элементы не находятся на своих местах. Убедитесь, что файл .class находится в каталоге, который указан в атрибуте codebase, или в том же каталоге, что и HTML, если не задан атрибут codebase. Убедитесь и в том, что все поддерживающие файлы ресурсов находятся в нужных каталогах и имеют правильные имена. Не забывайте, что имена в коде Java чувствительны к регистру.

Могут возникнуть и проблемы с правильной установкой всех параметров. Но эти проблемы нельзя предусмотреть заранее, их надо решать для каждого конкретного апплета.

50

ПРАКТИЧЕСКОЕ ЗАДАНИЕ №1

1.1. 1 2 3 4 5 6 7 1.2.

1 2 3 4 5 6 7 8

9 1.3. 1 2 3 8 9 4 5 6 7 10 11 12 13 14 1.4.

Заголовок Текст Текст Текст

51

Цель практического задания №1: 1. Ознакомиться с правилами применения табличных тегов: создание

простых и вложенных таблиц, объединение ячеек. 2. Изучить теги форматирования текста: заголовки, абзацы,

пространственное расположение и графическое выделение текстовых элементов.

Задание: Создать HTML-документ с приведенными таблицами, сохранить файл как praktika_1.html Требования:

1. Название веб-страницы «Praktika_1»; 2. Заголовок «Практическое задание №1»; 3. Табличные заголовки (1.1, 1.2, 1.3, 1.4); 4. Рамка таблиц в 1px; 5. Содержимое ячеек имеет жирное начертание; 6. Вертикальное выравнивание элементов в ячейках; 7. В таблице 1.4 использовать вложенные таблицы, указав разную

высоту и заливку. 8. Вставить текст. Создать абзацы; 9. Гарнитура шрифта текста без засечек, размер 13pt, цвет текста -

#505050;

52


Фоновое изображение Заголовок

Ссылка меню 1 Ссылка меню 2 Ссылка меню 3

Абзац обтекает рисунок


НаверхЦель практического задания №2:

1. Ознакомиться с правилами табличной верстки. 2. Изучить технику вставки графических изображений: в качестве фона

и отдельных изображений внутри текста. 3. Ознакомиться с основными приемами создания ссылок:

относительных и абсолютных. Задание:

Создать персональный сайт (не менее 3 HTML-страниц) на основе табличной верстки, сохранить файлы в папку praktika_2. Требования:

1. Ширина и высота 100%, рамка таблицы–0px, заливка ячеек; 2. Внешний отступ между ячейками – 10 px; 3. Внутренний отступ между содержимым ячейки и рамкой ячейки - 10

px; 4. Отступ между изображением и текстом – 10 px; 5. Организовать переход по страницам; 6. Создать якорную ссылку НАВЕРХ для перехода на начало

страницы. 7. Гарнитура текста без засечек, выравнивание абзацев по ширине.

Рисунок

Рисунок

53


Цель практического задания №3: 1. Рассмотреть структуру и процесс создания фреймовых документов,

управление их выводом и функционированием; 2. Научиться работать с фреймами.

Задание: Создать персональный сайт (не менее 3 HTML-страниц), используя фреймовую структуру, сохранить файлы в папку praktika_3. Требования:

1. Организовать переход по страницам; 2. Создать якорную ссылку НАВЕРХ для перехода на начало

страницы; 3. Создать ссылку для перехода на внешний источник в Интернет; 4. Наличие графических объектов; 5. Организовать открытие одного из графических объектов в

увеличенном размере в отдельном окне браузера; 6. Внутренний отступ между содержимым фрейма и рамкой фрейма –

10 px; 7. Изменить цвет ссылок (обычной, посещенной, активной). 8. Гарнитура текста без засечек, выравнивание абзацев по ширине.

ФРЕЙМ 1 Фоновое изображение Заголовок

ФРЕЙМ 2 Ссылка меню 1 Ссылка меню 2 Ссылка меню 3

ФРЕЙМ 3 Абзац обтекает рисунок


Рисунок

Рисунок

54


Цель практического задания №4: 1. Отработать механизм вставки всех типов CSS в HTML-документ; 2. Поэкспериментировать с применением правил CSS.

Задание: 1. Применить внутренний CSS в HTML-документе практического

задания №1; 2. Применить глобальный CSS в HTML-документах практического

задания №2; 3. Применить внешний файл CSS в HTML-документах практического

задания №3; 4. Сохранить файлы в папку praktika_4.

Требования: 1. Задать правила оформления CSS тегам заголовка, тегам абзаца,

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

псевдоклассы. 3. Очистить HTML-код от оформительских атрибутов и перенести их в

CSS.

55


Цель практического задания №5: 1. Ознакомиться с элементами форм; 2. Ознакомиться с библиотекой стандартных CGI-сценариев.

Задание: Организовать любую интерактивную форму, используя элементы

форм (например, анкета участника, заявка и т.д.), сохранить файл как praktika_5.html Требования:

1. Обязательно использовать следующие элементы: • Текстовое поле ограниченной длины • Радиокнопки • Галочки • Выпадающий список • Текстовое поле для сообщения • Поле для пароли

2. Организовать отправку элементов форм на электронный ящик при помощи кнопки «Отправить»;

3. Создать элемент для очистки данных при помощи кнопки «Очистить»;

4. Стилевое оформление элементам форм задать при помощи глобального CSS.

56


Цель практического задания №6: Ознакомиться с процессом блочной верстки.

Задание: Сверстать страницу, сохранить файл как index.html в папку

praktika_6

Текст для страницы находится в файле Главная.txt Все необходимые изображения в папке IMAGES Требования:

1. Страница должна содержать только разметку содержания, все оформление с помощью глобального CSS.

57

ПРАКТИЧЕСКОЕ ЗАДАНИЕ №7 Задание:

1. Создать 2 страницы: Меню (menu.html), Контакты (contact.html). Сохранить файлы в папку praktika_7.html

2. Скопировать index.html из практического задания №6 и вставить в папку praktika_7

3. Преобразовать правила глобального CSS во внешний файл CSS, сохранить как styles.css

Тексты для страниц находятся в папке texts Все необходимые изображения в папке IMAGES

58

59

Требования:

1. Каждая страница обязательно должна содержать заголовок (title); 2. Каждая страница должна содержать только разметку содержания,

все оформление с помощью CSS. 3. Стилевые описания, одинаковые для всех страниц, должны быть

вынесены во внешний файл стилевых описаний CSS. 4. На главной странице создать гиперссылки на страницы menu.html и

contact.html 5. Разделы меню оформить списком, создать локальные ссылки по

разделам. 6. Применить теги заголовка 2 и 3 уровней. 7. Внутри разделов применить списки определений.

60


Цель практического задания №8:

1. Ознакомиться с правилами применения Java-скриптов и Java-апплетов в HTML-документ;

2. Отработать механизм применения скриптов и апплетов.

Задание:

1. Организовать 3 сценария Java Script в любых ранее выполненных практических работах.

2. Применить любой Java-апплет в любой практической работе.

3. Сохранить файлы в папку praktika_8

БИБЛИОГРАФИЧЕСКИЙ СПИСОК

1. Дженифер Нидерст. Web-мастеринг для профессионалов. - СПб.: Питер, 2001. - 576 с.

2. Дунаев В.В. Основы Web-дизайна. Самоучитель. – СПб.: БХВ-Петербург, 2007. – 512 с.

3. Web-мастеринг без посторонней помощи:учеб.пособие/Б.Артанов. – М.:100 книг, 2006. – 336 с.

ИНТЕРНЕТ-РЕСУРСЫ 1. http://htmlbook.ru/ - Ресурс по web-мастерингу (дата обращения:

12.12.2012) 2. http://css.manual.ru/ - CSS-справочник (дата обращения: 12.12.2012) 3. http://javascript.ru/ - Центральный Javascript-ресурс. Учебник с

примерами скриптов (дата обращения: 12.12.2012) 4. http://www.w3schools.com/ - Online Web Tutorial (дата обращения:

12.12.2012)

61

Учебное электронное издание

WEB-дизайн

Методические указания

Составитель Чамина Олеся Григорьевна

Усл. печ. л. 3,49.

Объем данных 1,11 Мб. ЭИ № 40.

Ульяновский государственный технический университет 432027, г. Ульяновск, ул. Сев. Венец, 32.

Тел.: (8422) 778-113. E-mail: [email protected]

http://www.venec.ulstu.ru

Documents

пособие веб 2012 - ulstu.ruvenec.ulstu.ru/lib/disk/2013/Chamina.pdf · полезна для серверов, браузеров и поисковых машин. Различают