Создание горизонтальных линий.

Введение в HTML.

Подготовка программы Dreamweaver к работе.

Все задания выполняются в программе Dreamweaver.

Запустите программу и зайдите в окно настройки Edit -> Preferences.

Установите настройки программы как показано на рисунках.

Задание №1

Создание простейшего документа HTML.

1. Создайте новый документ HTML. Для удобства выберите режим отображения кода и дизайна страницы кнопка на панели инструментов Split, либо View -> Code and Design

2. Перейдите в окно с кодом, выберите все содержимое и скопируйте в него:

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

<html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Ваш заголовок</title> </head> <body>  <font face="Verdana,Sans-serif" size="2" color="#000000"> <b>Название Вашего раздела</b><p> Здесь Ваш текст. <p>  <center> <img border=0 src="Имя графического файла с расширением" Width="Его размер по горизонтали" Height="Его размер по вертикали" alt="Здесь Вы указываете выпадающую подсказку"> </center> </font> </body> </html>

3. Для выбора рисунка щелкните дважды левой кнопкой мыши по изображению символа рисунка в области предварительного просмотра страница. В открывшемся окне выберите нужный рисунок и нажмите Ок.

4. Сохраните документ как html файл (например, D001.html) и запустите. Вы создали первую свою страницу.

5. Теперь расскажу немного о тегах - знаках, располагающихся в скобках. Большинство тегов имеют открывающийся элемент <> и закрывающийся </>. Между ними и находятся коды, которые распознает Обозреватель. HTML-документ всегда начинаться отрывающимся тегом <HTML> и заканчиваться закрывающим </HTML>. Дальше идет заголовок <HEAD></HEAD>. Между этими тегами всегда должна находиться информация о кодировки страницы, в нашем случае <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">, и теги определяющие название страницы <TITLE></TITLE>. Только теперь между тегами содержимого документа <BODY></BODY> можно располагать свою информацию, рисунки, видеофайлы, аудиофайлы...

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

Задание №2

Работа с текстом в HTML.

Большинство HTML документов имеют заголовок. Для его создания используют теги <Hn></Hn>, где n – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок определенного размера.

2. Перейдите в окно с кодом, вставьте после тега <body> следующий текст:

<H1>Заголовок</H1>

<H2>Заголовок</H2>

<H3>Заголовок</H3>

<H4>Заголовок</H4>

<H5>Заголовок</H5>

<H6>Заголовок</H6>

Для создания нового абзаца используется тег <P>, а для перехода на новую строчку без создания абзаца - тег <BR>. Эти теги закрывать не обязательно. Конечно, если Вы не используете в теге <P> элемент ALIGN, которым может задаваться выравнивание абзаца.

3. Скопируйте в окно с кодом следующий текст:

<P ALIGN=LEFT> По левому краю </P>

<P ALIGN=CENTER> По центру </P>

<P ALIGN=RIGHT> По правому краю </P>

<P ALIGN=JUSTIFY> Текст, находящийся между этими элементами выравнивается по ширине </P>

4. Для придания тексту определенного начертания - жирный, курсив, подчеркнутый и т.д., поместите его между соответствующими тегами. Скопируйте содержимое таблицы в окно с кодом.

<B>Жирный текст</B>

<I> Курсив </I>

<U> Подчеркнутый </U>

<STRIKE> ~~Перечеркнутый~~ </STRIKE>

<SUP>^{Верхний индекс}</SUP>

<SUB>_{Нижний индекс}</SUB>

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

SIZE - задает размер текста (по умолчанию размер текста равен 3). Поместив текст между тегами <FONT SIZE=n></FONT>, где n - цифровое значение, Вы придадите ему нужный вам размер.

5. Скопируйте в окно с кодом следующий текст:

<font size="1"> Пример 1 </font>
<font size="2"> Пример 2 </font>
<font size="3"> Пример 3 </font>
<font size="4"> Пример 4 </font>
<font size="5"> Пример 5 </font>
<font size="6"> Пример 6 </font>

FACE - задает стандартное имя шрифта. Используйте шрифты, которые установлены на компьютере пользователя, в противном случае Обозреватель будет использовать шрифт, определенный по умолчанию (обычно Times New Roman). К стандартным шрифтам можно отнести шрифты, поставляемые с Windows 98, Ms Plus, Ms Office. В самой нижней строке данной таблицы представлено использование семества шрифта - имя каждого шрифта пишется через запятую. Если у пользователя на компьютере нет шрифта Comic Sans MS, Обозреватель подставит следующий в этом списке - Tahoma.

6. Скопируйте в окно с кодом следующий текст:

<font face="Times New Roman"> Times New Roman </font>

<font face="System"> System < /font>

<font face="Arial"> Arial </font>

<font face="Courier"> Courier </font>

<font face="Verdana"> Verdana </font>

<font face="Comic Sans MS, Tahoma"> Comic Sans MS </font>

COLOR - задает цвет текста (по умолчанию черный - #000000). Цвет текста может определятся как самим названием, например, red, blue и т.д, так и представлен в шестнадцатиричном виде - #FF0000 (красный) #0000FF (синий).

7. Скопируйте в окно с кодом следующий текст:

<font COLOR="red"> Красный </font>
<font COLOR="#FF0000"> Красный </font>

С помощью элемента STYLE тега <SPAN> (закрывающийся тег </SPAN> обязателен) можно задавать выделение текста любым цветом.

8. Скопируйте в окно с кодом следующий текст:

<SPAN STYLE="BACKGROUND-COLOR: lightgreen"> Светлозеленый </SPAN>

<SPAN STYLE="BACKGROUND-COLOR: yellow"> Желтый </SPAN>

<SPAN STYLE="BACKGROUND-COLOR: lightblue"> Светлосиний </SPAN>

9. Сохраните документ под именем D002.html.

Все подобные настройки, придание свойств тексту можно делать при помощи панели свойств Properties, располагающейся по умолчанию в нижней части окна программы

Задание №3

Работа с цветом и фоном в HTML.

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

Итак сначала про цвет. Для его вставки в строку с тегом <BODY> Вашего документа нужно добавить параметр BGCOLOR и указать его значение - название цвета или его шестнадцатиричный вид. Данные два примера заполняют страницу документа красным цветом.

<BODY BGCOLOR="RED"> (использовано название цвета)
<BODY BGCOLOR="#FF0000"> (использован шестнадцатиричный вид цвета)

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

<BODY BACKGROUND="images.gif">

Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предполагается, что графический файл расположен в одной папке с Вашим документом, иначе нужно указать к нему путь. Разберемся с путями на примере файла images.gif.

На два уровня вниз. Параметр="Folder_1/Folder_2/images.gif"

На два уровня вверх. Параметр="../../images.gif"

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

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

Тег <BODY> может также иметь параметры отступов в документе (определяются числовым значение).

leftmargin - отступ слева
rightmargin - отступ справа
topmargin - отступ сверху
bottom margin - отступ снизу

<BODY leftmargin="0", topmargin="0", marginwidth="0" marginheight="0">

В данном теге могут присутствовать и другие параметры, например, какие-то функции JavaScript, задание цветов текста и ссылок.

1. Откройте файл D002.html. Зададим фон в рабочей области. Для этого в коде страницы найдите тег <body>, перед закрывающимся элементом нажмите пробел и в выпадающем списке выберите bgcolor, в появившейся палитре цветов выберите любой цвет. Сохраните документ под именем D003_1.html.

2. Создайте в Photoshop’e вертикальный градиент, вырежьте из него инструментом Slice кусочек. Оптимизируйте и сохраните созданный элемент Slice в отдельном файле.

3. Откройте файл D002.html. Зададим в качестве фона в рабочей области созданный градиент. Для этого в коде страницы найдите тег <body>, перед закрывающимся элементом нажмите пробел и в выпадающем списке выберите background, нажмите на появившееся поле Browse и выберите созданный файл.

После перехода в окно редактирования содержания вы увидите нечто похожее

Для того, чтобы не было подобных повторов градиента необходимо добавить еще одно свойство в тег <body>. Снова помещаем указатель мыши к закрывающей скобке, нажимаем на пробел, в выпадающем списке выбираем style, а затем background-repeat. В нашем случае (вертикальный градиент) уместно использовать повтор только по горизонтали параметр repeat-x. На рисунке представлен результат.

Остальные параметры позволяют делать повторы как по обоим направлениям (вертикаль, горизонталь), так и вообще без повторов.

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

В зависимости от вашего градиента может быть выбран другой фоновый цвет. Сохраните документ под именем D003_2.html.

4. Создайте горизонтальный градиент, повторите действия, описанные в пункте 3. Сохраните документ под именем D003_3.html.

Задание №4

Работа с изображениями, линиями в HTML.

Для вставки изображений в HTML документ используется следующая конструкция (представлена полная):

<IMG SRC="Рисунок" BORDER="0" ALIGN="Выравнивание" WIDTH="Ширина" HEIGHT="Высота" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">

В таблице находится описание каждого параметра данной конструкции:

SRC	Имя графического файла с расширением (поддерживаются .jpg, .gif, *.png). Если файл находится в другом каталоге, укажите к нему путь.
ALIGN	Выравнивание изображения в документе: left - по левому краю. right - по правому краю. top или texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки. middle - выравнивает базовую линию текущей текстовой строки с центром изображения. absmiddle - выравнивает центр текущей текстовой строки с центром изображения. bottom или baseline - выравнивают нижнюю кромку изображения с базовой линией текущей текстовой строки. absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
BORDER	Рамка вокруг рисунка. Значение по умолчанию - 0 (без рамки).
WIDTH	Ширина изображения в пикселях.
HEIGHT	Высота изображения в пикселях.
HSPACE	Горизонтальный отступ графического изображения в пикселях. Не обязательный параметр.
VSPACE	Вертикальный отступ в пикселях. Не обязательный параметр.
ALT	Это сообщение, которое выводится вместо картинки, если она не показывается (не найдена или пользователь настроил свой Обозреватель так, что тот не показывает картинки). Кроме того, вы увидите этот текст в виде подсказки, когда курсор мыши находится на рисунке.
NAME	Определяет имя изображения. Для обычного изображения, не связанного ни с чем, этот параметр совсем не обязательный.
LOWSRC	Имя графического файла с расширением с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

Всегда задавайте размеры картинки в параметрах height и width, резервируя тем самым место в окне Обозревателя еще до загрузки изображения. Параметр alt можно не указывать, но вдруг у человека не загрузилась картинка, он хоть будет знать, что она собой представляет.

Создайте новый HTML документ и вставьте в него несколько изображений (меню Insert -> Image). Каждое изображение находится на новой строчке.
Выровняйте каждое из изображений, используя различные типы выравнивания.
Сохраните файл под именем D004_1.html

При работе с изображениями HTML позволяет использовать некоторые фильтры. На рисунках ниже представлены результаты применения фильтров. (0 – исходное изображение)

А. Фильтр Alpha. Осветляет изображение.

Синтаксис:
STYLE="filter:Alpha(Opacity='Opacity', FinishOpacity='Finishopacity', Style='Style', StartX='X', StartY='Y', FinishX='X', FinishY='Y')"
Opacity - степень осветления (0-100. 0 светло, 100 темно).
FinishOpacity - конечная степень осветления (0-100. 0 светло, 100 темно).
Style - метод осветвления (число: 0 (без осветвления), 1 (линия) 2(круг) 3 (прямоугольник)
StartX, StartY, FinishX, FinishY - координаты осветвляемой области

Пример:
<IMG STYLE="filter:Alpha(Opacity='90',FinishOpacity='45',Style='2')" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения"></P>

Б. Фильтр Blur. Размывает изображение в определенную сторону.

Синтаксис:
STYLE="filter:Blur(Add='Add', Direction='Direction', Strength='Strength')"
Add - умеренное или сильное размытие (соответственно 1 или 0)
Direction - в какую сторону произойдет размытие (oт 0 до 315)
Strength - смещение размытия

Пример:
<IMG STYLE="filter:Blur(Add='1',Direction='310',Strength='10')" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения"></P>

В. Фильтр Invert. Инверсия изображения.

Синтаксис:
STYLE="filter:Invert"

Пример:
<IMG STYLE="filter:Invert" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения"></P>

Г. Фильтр Gray. Делает изображение черно-белым

Синтаксис:
STYLE="filter:Gray"

Пример:
<IMG STYLE="filter:Gray" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения"></P>

В. Фильтр Chroma.Определенный цвет делается прозрачным.

Синтаксис: STYLE="filter:Chroma(Color='Color')"
Color - цвет выделения в шестнадцатиричном виде (напр. #000000) или название цвета на английском, например, Black, Red, Blue, Green.

Пример:
<IMG STYLE="filter:Chroma(Color='#000000')" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения"></P>

Е. Фильтр Xray.Негативное изображение

Синтаксис: STYLE="filter:Xray"

Пример:
<IMG STYLE="filter:Xray" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения"></P>


	А	Б	В	Г	Д	Е

Создайте новый HTML документ. Вставьте в него небольшое изображение.
Сделайте 6 копий изображений и примените к каждому различные фильтры. Пример применения фильтров и размещения рисунков представлен выше. Результат не будет виден в окне программы, файл необходимо просматривать в браузере.
Сохраните файл под именем D004_2.html.

Создание горизонтальных линий.

Тег HR (Horisontal Rule) вставляет в текст горизонтальную разделительную линию. Может иметь следующие атрибуты:

WIDTH	Определяет длину линии в пикселях или процентах от ширины окна Обозревателя.
SIZE	Оопределяет толщину линии в пикселях.
ALIGN	Определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения: left - выравнивание по левому краю документа. right - выравнивание по правому краю документа. center - выравнивание по центру документа (используется по умолчанию).
NOSHADE	Определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной.
COLOR	Определяет цвет линии. Работает только в Internet Explorer.

Примеры линий:

<HR>

Вместо линии можно реализовать и квадрат:

Расположить несколько квадратов в одну строку, к сожалению, нельзя.

Создайте новый HTML документ.
Создайте в нем 7-10 вариантов горизонтальных линий, изменяя параметры.
Сохраните файл под именем D004_3.html.

Задание №5

Работа с гиперссылками в HTML.

Ссылки HTML позволяют связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Вот обычная конструкция ссылки:

<A HREF="URL" TARGET="Окно" TITLE="Подсказка">Название ссылки</A>

Параметры элемента <A> представлены в таблице:

HREF	URL (унифицированный локатор ресурсов) - адрес любого файла в Интернете. Может быть абсолютными, то есть указывается полный адрес странички (например, http://lenininc.narod.ru/index.html) и относительным, как видно из названия указывается файл относительно текущего (например, index.html).
TARGET	Oпределяет, в каком окне (фрейме) загрузить гиперссылку. Может иметь значения: _top - загружает гиперссылку на всем пространстве окна браузера (если до этого существовало разбиение на фреймы, то оно исчезнет). _blank - загружает гиперссылку в новом окне браузера. _self – загружает содержимое страницы, в окно, которое содержит эту ссылку (и так используется по умолчанию, так что если вам надо именно так загрузить ссылку, то параметр target вообще можно не использовать). _parent - загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.
TITLE	Текст подсказки, который будет появляться при наведении мышки на гиперссылку. Параметр не обязательный.

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

</p>

Щелкнув на ссылку, откроется другой документ, в данном случае 002.htm.

Графический файл в роли ссылки.

Гиперссылкой можно сделать и любой графический файл, поддерживающийся Обозревателем (традиционно - *.gif, *.jpg.). Для этого вместо названия ссылки нужно прописать графический элемент (Параметр TITLE должен быть только у рисунка):

<a href="URL" target="Окно">
<img border="0" src="Рисунок" width="Ширина" height="Высота" TITLE="Подсказка>
</a>

Ссылка на e-mail.

Вы можете также создать ссылку на e-mail, в это случае нужно в качестве URL’a прописать следующее:
mailto:адрес электронной почты
Например:
<a href="mailto:lenin@zeos.net">Мое мыло</a>

Почтовая гиперссылка имеет несколько параметров (не обязательных): ?subject - Тема пиcьма &Body - Текст вашего сообщения &cc - Копии письма через запятую &bcc - Скрытые копии письма через запятую title="Выпадающая подсказка" Ставиться по желанию и располагается отдельно от параметров почтовой ссылки (смотрите расположение кавычек на примере ниже). <a href="mailto:lenin@zeos.net ?subject=Поздравление &Body=text &cc=copy@mail.ua.net &bcc=hidden_copy@mail.ua.net" title="Пример почтовой гиперссылки">Мое мыло</a>

Щелкнув на такую ссылку, откроется окно почтовой программы пользователя с уже заполнеными полями. Останется только написать письмо и отправить.

Закладки. Вверх

Иногда возникает вопрос: как сделать ссылку на определенное место в том же или в другом документе? Чтобы нажав по какой-нибудь ссылке можно было попасть в определенное место данного документа. Вот в этом нам и помогут закладки.

Ссылка на закладку в том же документе имеет следующий вид:
<a href="#Имя закладки">Название раздела</a>

А так выглядит ссылка на закладку в другом документе:
<a href="Имя документа#Имя закладки">Название раздела</a>

Сама закладка будет такой:
<A NAME="Имя закладки"></a>

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

Ссылки и цвет.

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

text - цвет текста.
link - цвет ссылки.
vlink - цвет пройденой ссылки.
alink - цвет активной ссылки, когда подводиться к ней курсор.

<BODY text="black" link="blue" vlink="purple" alink="red">

Данные атрибуты определяют свойства для всего документа. Поместив такой код в HTML страницу, уже не надо будет назначать каждый раз цвет шрифту, т.к везде он будет таким, каким определен в теге <BODY>.

Создайте новый HTML документ.
Создайте ссылки на ранее созданные документы. Каждая из ссылок должна иметь различные типы свойства target. Пример создания ссылки на файлы представлен выше (вы можете скопировать пример в область кода Dreamweaver’a после тега <body> и заменить вставленное изображение на свое и файл для ссылки на свой). Сохраните файл под именем D005.html
Вставьте горизонтальную линию после созданных ссылок.
Вставьте ниже линии небольшую картинку и организуйте ее в качестве ссылки на документ D001.html.
Вставьте после картинки еще одну горизонтальную линию.
Сделайте несколько вариантов (2-3) ссылок на абсолютно любые электропочты.
Вставьте после ссылок на почту еще одну горизонтальную линию.
Создайте в начале документа список разделов, например:

Ссылки на другие страницы
Ссылки на картинки
Ссылка на электропочту
Ссылка на другой текст

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

<a href=”#hyper1”>Ссылки на другие страницы</a>

Около названия раздела (после горизонтальной линии) необходимо добавить текст

Задайте цвет ссылок в теге <body> согласно описанию (задайте свои собственные цвета).
Сохраните документ.

Задание №6

Работа со списками в HTML.

Пронумерованные списки:
В данном случае Обозреватель автоматически будет проставлять числа перед каждым элементом списка. Начинается пронумерованный список с тэга <OL> и завершается тэгом </OL>. Например:

<OL> <LI> Один <LI> Два <LI> Три <LI> Четыре <LI> Пять </OL>

1. Один 2. Два 3. Три 4. Четыре 5. Пять

Тэг <OL> может иметь следующие параметры:

TYPE - вид счетчика:
A - большие латинские буквы
a - маленькие латинские буквы
I - большие римские цифры
i - маленькие римские цифры
1 - обычные цифры

START - устанавливает число, с которого будет начинатся отсчет.

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

<OL TYPE="I" START="8"> <LI> Восемь <LI> Девять <LI> Десять <LI> Одиннадцать <LI> Двенадцать </OL>

VIII. Восемь IX. Девять X. Десять XI. Одиннадцать XII. Двенадцать

Непронумерованные списки:
Для непронумерованных списков Обозреватель обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь Обозревателя.

Непронумерованный список начинается открывающимся тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Например:

<UL> <LI> Один <LI> Два <LI> Три <LI> Четыре <LI> Пять </UL>

o Один o Два o Три o Четыре o Пять

Тэг <UL> может включать параметр TYPE со значениями disc, circle, square.

<UL TYPE=disc><LI> disc </UL>	· disc
<UL TYPE=circle><LI> circle </UL>	o circle
<UL TYPE=square><LI> square </UL>	§ square

Данные значения - это внешний вид маркера, который по умолчанию ставится в виде диска, т.е. disc.

Списки определений:
Списки определений имеют следующий вид:

<DL> <DT> Термин <DD> Определение термина <DD> Определение термина <DD> Определение термина <DD> Определение термина </DL>

Термин Определение термина Определение термина Определение термина Определение термина

С элементом DL можно использовать атрибут COMPACT для установки более компактного размещения пунктов списка.

<DL COMPACT>

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

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

Задание №7

Работа с таблицами в HTML.

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

Таблица начинается открывающимся тегом <TABLE> и завершается закрывающимся </TABLE>.
Тег <TABLE> может включать следующие атрибуты:

WIDTH="n"	Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек.
BORDER="n"	Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки.
BORDERCOLOR="#FFFFFF"	Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатеричное значение цвета.
BGCOLOR="#FFFFFF"	Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатеричное число.
BACKGROUND="image.gif"	Заполняет фон таблицы изображением.
CELLSPACING="n"	Определяет расстояние между рамками ячеек таблицы в пикселях.
CELLPADDING="n"	Определяет расстояние в пикселях между рамкой ячейки и текстом.
ALIGN=LEFT	Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа).
FRAME="значение"	Управляет внешней окантовкой таблицы, может принимать следующие значения: VOID - окантовки нет (значение по умолчанию). ABOVE - только граница сверху. BELOW - только граница снизу. HSIDES - границы сверху и снизу. VSIDES - только границы слева и справа. LHS - только левая граница. RHS - только правая граница. BOX - рисуются все четыре стороны. BORDER - также все четыре стороны.
RULES="n"	Управляет линиями, разделяющими ячейки таблицы. Возможные значения (n): NONE - нет линий (значение по умолчанию). GROUPS - линии будут только между группами рядов. ROWS - только между рядами. COLS - только между колонками. ALL - между всеми рядами и колонками.

Таблица может включать заголовок, который располагается между тегами <CAPTION></CAPTION>. Он должен быть непосредственно после тега <TITLE>. К заголовку возможно применение атрибута ALIGN, определяющего его положение относительно таблицы:

TOP - значение по умолчанию, заголовок над таблицей по центру.
LEFT - заголовок над таблицей слева.
RIGHT - заголовок над таблицей справа.
BOTTOM - заголовок под таблицей по центру.

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

Следующие атрибуты могут применяться для строк и ячеек.
ALIGN=LEFT	Устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо).
VALIGN=CENTER	Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю).
BGCOLOR="#FFFFFF"	Устанавливает цвет фона строки или ячейки.
BACKGROUND="image.gif"	Заполняет фон строки или ячейки изображением.
Следующие атрибуты могут применятся только для ячейек.
WIDTH="n"	Определяет ширину ячейки в n пикселях.
HEIGHT="n"	Определяет высоту ячейки в n пикселях.
COLSPAN="n"	Растягивание ячейки по горизонтали. Например, <TD COLSPAN="2"> означает, что ячейка будет растянута на 2 колонки.
ROWSPAN="n"	Растягивание ячейки по строке. Например, <TD ROWSPAN="2" означает, что ячейка будет растянута на две строки таблицы.
NOWRAP	Присутствие этого атрибута показывает, что текст должен размещаться в одну строку
BACKGROUND="image.gif"	Заполняет фон ячейки изображением.

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

Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект   (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (  - обязательно должен набираться строчными буквами и закрываться точкой с запятой).

И еще - имейте ввиду, что теги, устанавливающие шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необходимо повторять для каждой ячейки.

Создайте новый HTML документ.
Создайте пустую таблиц, нажав кнопку Insert Table вкладки Common панели объектов. Также вы можете выбрать пункт Table меню Insert или нажать комбинацию клавиш <Ctrl>+<Alt>+<T>. В любом случае на экране появится диалоговое окно Insert Table, показанное ниже.

В поле ввода Widthзадается ширина таблицы. Возможно задание ширины как в пикселах, так и в процентах от ширины родителя. В раскрывающемся списке, расположенном справа от этого поля ввода, вы должны будете выбрать пункт Percent(проценты) или Pixels(пикселы).

Задайте значения в полях ввода как показано на рисунке, нажмите кнопку ОК. Мы не будем говорить, что именно вам нужно вводить — поэкспериментируйте сами. Так или иначе, наша первая таблица будет чисто учебной. Во всяком случае, у вас должно получиться что-то похожее на рисунок ниже. Теперь поставьте текстовый курсор в любую ячейку таблицы и наберите какой-нибудь текст. Повторите то же самое с любыми другими ячейками. В одну из ячеек можете вставить любое графическое изображение. Вы даже можете вставить в ячейку таблицы другую таблицу. Попробуйте - и это получится!

Сохраните эту таблицу в файле d007_1.html.

Предположим, вам необходимо добавить новую строку или новый столбец. Для этого поместите текстовый курсор в ячейку строки, над которой будет добавлена новая, и выберите пункт Insert Rowв подменю Tableменю Modifyили контекстного меню. Также вы можете нажать комбинацию клавиш <Ctrl>+<M>. Для добавления столбца поставьте текстовый курсор в ячейку, справа от которой будет добавлен новый столбец, и выберите пункт Insert Columnв подменю Tableменю Modifyили контекстного меню. Если вы привыкли работать с клавиатурой, нажмите комбинацию клавиш <Ctrl>+<Shift>+<A>. Это простейшие и наиболее быстрые команды вставки строки или столбца.

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

Вы также можете выбрать пункт Split Cellв подменю Tableменю Modifyили контекстного меню либо нажать комбинацию клавиш <Ctrl>+<Alt>+<S>. В любом из этих случаев на экране появится диалоговое окно Split Cell.

Добавьте в таблицу несколько рядов или столбцов, внесите в них необходимые данные.
Объедините некоторые ячейки в таблице.
Сохраните документ под именем d007_2.html.

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

Раскрывающийся список Horz позволяет задать горизонтальное выравнивание содержимого ячейки. Здесь доступны четыре пункта:

· Default— выравнивание по умолчанию, обычно по левому краю, в некоторых случаях — по центру;

· Left— выравнивание по левому краю;

· Center— по центру;

· Right— по правому краю.

Аналогично раскрывающийся список Vert задает вертикальное выравнивание содержимого ячейки. Здесь доступно пять пунктов:

· Default— выравнивание по умолчанию, обычно посередине;

· Тор — выравнивание по верху;

· Middle— посередине;

· Bottom— по низу;

· Baseline— по базовой линии.

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

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

Создайте таблицу, показанную на рисунке ниже. Для этого создайте новый HTML документ.

Сохраните документ, содержащий таблицу под именем d007_3.html.

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

Каждая из этих кнопок позволит вам изменить способ работы с размерами ячеек таблицы (пикселы, проценты).

Создайте новый HTML документ.
Создайте таблицу по аналогии с таблицей, показанной ниже.

Сохраните документ под именем d007_4.html.

Задание №8

Создание сайта на основе табличной верстки.

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

Предположим, мы делаем интернет-магазин. Нам нужно поместить на страницу название, описание, цену и фотографию товара. С таблицами это проще простого.

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

Создайте новый HTML документ.
Создайте таблицу и заполните ее текстом, как показано на рисунке ниже. Таблица эта должна содержать три строки и два столбца, не должна иметь границы. Ширина этой таблицы должна быть равна 100%

Откройте диалоговое окно Page Properties. Задайте для новой страницы следующие параметры (вместо абстрактного Петрова можете указывать свои имена):

цвет фона — белый (#FFFFFF);
цвет текста — черный (#000000);
цвет гиперссылок — темно-красный (#990000);
цвет посещенных гиперссылок — темно-серый (#666666);
цвет активной гиперссылки — ярко-красный (#FF0000);
название страницы — "Петр П. Петров".

Поставьте текстовый курсор в верхнюю объединенную ячейку. Задайте такие значения ее параметров:

горизонтальное выравнивание (раскрывающийся список Horz) — Center;
вертикальное выравнивание (Vert) — Middle (или Default);
не переносить текст (флажок No Wrap) — включено. Остальные параметры оставьте без изменений.

Введите в ячейку текст "Петров Петр Петрович". Установите подходящий размер шрифта. Поэкспериментируйте с разными шрифтами. У вас получилось следующее

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

горизонтальное выравнивание — Right;
вертикальное выравнивание — Middle (или Default).

Введите в нижнюю ячейку данные об авторском праве.

Сохраните документ под именем d008.html.
Создайте в Photoshop’e 20 графических файлов (по 4 картинки для каждого элемента меню) (формата gif, jpg, png) для полосы навигации. Меню будет состоять из 5 пунктов: Главная, Проекты, Увлечения, Ссылки, Об авторе.

Каждый элемент навигации будет включать:

· белую надпись на черном фоне, отображаемую в обычном состоянии;

· красную надпись на черном фоне, отображаемую, когда пользователь помещает над ним курсор мыши;

· черную надпись на белом фоне, отображаемую в "нажатом" состоянии;

· красную надпись на белом фоне, отображаемую в "нажатом" состоянии, когда пользователь помещает над ним курсор мыши.

Создайте папку images в рабочей папке. Дайте каждому состоянию кнопки следующие имена

· <имя страницы >_up.gif — для изображений, отображаемых в обычном состоянии;

· <имя страницы>_over.gif — для изображений, отображаемых, когда пользователь помещает над ними курсор мыши;

· <имя cmpaницы>_down.gif — для изображений, отображаемых в "нажатом" состоянии;

· <имя страницы>_overdown.gif — для изображений, отображаемых в "нажатом" состоянии, когда пользователь помещает над ним курсор мыши.

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

горизонтальное выравнивание — Center;
вертикальное выравнивание — Тор.

Создадим полосу навигации (меню). Чтобы создать полосу навигации, поставьте текстовый курсор в левый фрейм и нажмите кнопку Navigation Bar страницы Common панели объектов. Вы также можете выбрать пункт Navigation Bar подменю Interactive Images меню Insert. На экране появится диалоговое окно Insert Navigation Ваг, показанное ниже.

В списке Nav Bar Elements перечислены все элементы полосы навигации, которые уже имеются. (Изначально там находится один элемент, созданный для нас Dreamweaver.) Вы можете выбрать любой из элементов и посмотреть либо изменить его параметры.

В поле ввода Element Name вводится имя элемента. Советуем давать элементам "говорящие" имена, например Projects или Links.

В поле ввода Up Imageвводится имя файла изображения, отображаемого в обычном случае. Вы также можете щелкнуть кнопку Browse,расположенную справа от поля ввода, и выбрать нужный файл в диалоговом окне открытая файла Dreamweaver. Точно так же в поле ввода Over Imageвводится имя файла изображения, отображаемого, когда пользователь помещает над гиперссылкой курсор мыши, в поле Down Image— имя файла изображения "нажатой" гиперссылки, а в поле Over While Down Image— имя файла изображения "нажатой" гиперссылки, над которой пользователь поместил курсор мыши. Справа от каждого поля ввода находится спасительная кнопка Browse.

В поле ввода Alternate Textвводится альтернативный текст. К сожалению, Dreamweaver неправильно обрабатывает русские буквы, поэтому вам или придется править сам код HTML, или вводить альтернативный текст на английском, как это сделали мы.

В поле ввода When Clicked, Go To URLвводится имя файла Web-страницы, на которую осуществляется переход при щелчке на гиперссылке. В раскрывающемся списке in,расположенном справа от поля ввода, выбирается фрейм, в котором будет отображена страница. Пункт Main Windowэтого списка позволяет открыть страницу во всем окне.

Если вы хотите, чтобы данный элемент полосы навигации изначально отображался "нажатым", включите флажок Show "Down Image" Initially,находящийся в группе Options.В частности, его нужно включить для элемента, обозначающего начальную страницу

А вот флажок Preload Images,находящийся в этой же группе, лучше всегда держать включенным. Он указывает Dreamweaver создать код, заставляющий Web-обозреватель загружать заранее все изображения, задействованные в полосе навигации, и сохранять их на жестком диске в своем кэше. Благодаря чему подстановка нужных изображений будет происходить мгновенно, не ожидая, пока они загрузятся с сайта. В противном случае Web-обозреватель будет вынужден загружать каждое изображение непосредственно перед его отображением. С одной стороны, это позволит ускорить загрузку страницы (не нужно будет загружать все изображения полосы навигации), а с другой — замедлит реакцию полосы навигации на действия пользователя, т. к. Web-обозревателю придется каждый раз загружать с сайта нужное изображение, а не брать его с кэша.

Раскрывающийся список Insertпозволит задать расположение полосы навигации: горизонтальное (пункт Horizontally)или вертикальное (пункт Vertically).Флажок Use Tablesзаставит Dreamweaver создать полосу навигации на основе таблиц. Этот флажок по умолчанию включен, и отключать его не стоит.

Осталось рассказать о кнопках, расположенных над списком Nav Bar Elements.Кнопка со знаком "плюс" добавляет новый элемент в полосу навигации, а кнопка со знаком "минус" удаляет выбранный в списке элемент. Кнопка вверх перемещает выбранный в списке элемент на строку выше, а кнопка вниз— на строку ниже.

Закончив формирование полосы навигации, нажмите кнопку ОК.Если вы передумали вставлять полосу навигации, нажмите кнопку Cancel.

Введите в окно вставки полосы навигации данные о пяти элементах полосы навигации согласно таблице:

Страница	Element Name	When Clicked, Go To URL
	Главная	Main	index.hrml
	Проекты	Projects	projects.html
	Увлечения	Passions	passions.html
	Ссылки	Links	links.html
	Об авторе	About	about.html

В поля ввода Up Image, Over Image, Down Image и Over While Down Imageвведите соответствующие имена файлов. Проследите при этом, чтобы в раскрывающемся списке Relative Toдиалогового окна Select Fileбыл выбран пункт Document(отсчет интернет-адресов относительно текущей страницы) — задание адресов от корневой папки сайта работает только под программой Web-сервера. Элементы должны быть введены в таком порядке, в каком они перечислены в таблице. (Это общепринятый порядок перечисления элементов полосы навигации в подобных сайтах.)

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

Поставьте в оставшуюся (правую) ячейку текстовый курсор и задайте такие параметры:

горизонтальное выравнивание — Left (или Default);
вертикальное выравнивание — Тор.

Заполните ячейку таблицы

Сохраните файл.

Задание №9

Знакомство с каскадными таблицами стилей.

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

Таблицы стилей, как и многое другое, лучше представить на примере. Давайте рассмотрим небольшой фрагмент классического, "чистого" HTML-кода, созданного без использования таблиц стилей.

<p><font color="#FF0000">Это цитата.</font></p>

Как видите, это одна из тех цитат, которые по приказу нашего гипотетического начальства должны были "измельчать". Давайте же все-таки доставим начальству это удовольствие.

<p><font color="#FF0000" size="-1">Это цитата.</font></p>

С одной цитатой мы справились без труда. А если их сотня? Нет, без таблицы стилей тут не обойтись. Перепишем наш пример с использованием стилей.

Сначала напишем саму таблицу стилей.

.cit { font-style: italic; color: #FF0000 }

Эта таблица стилей содержит определение всего одного стиля — cit. Такой стиль, имеющий уникальное имя (чтобы Web-обозреватель мог однозначно его идентифицировать), называется стилевым классом.

Этот стиль содержит определение параметров для двух атрибутов стиля. Первый атрибут — font-style — задает "стиль" текста; в нашем случае значение italic делает текст курсивом, словно бы его поместили внутрь тега . Второй атрибут — color — задает цвет текста. Как видите, два атрибута стиля cit заменили оба тега: и <FONT>, и .

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

.cit {font-style:italic;color: #FF0000}

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

Сохраним нашу таблицу стилей в файле styles.css. И давайте перепишем наш фрагмент HTML-кода так, чтобы он использовал эту таблицу стилей.

<p class="cit">ЭTO цитата.</p>

Как видите, достаточно просто добавить в тег <р> атрибут CLASS и в качестве значения присвоить ему имя определенного нами стилевого класса, в нашем случае cit. Теперь этот фрагмент текста будет форматироваться курсивным красным шрифтом уменьшенного размера.

Но, кроме того, нам еще нужно добавить в секцию HTML-заголовка (тег <HEAD>) нашей страницы ссылку на таблицу стиля, чтобы Web-обозреватель смог ее найти. Эта ссылка будет иметь следующий вид:

Всего стандарт CSS определяет три способа задания стиля для элемента страницы. Давайте перечислим их и дадим краткое описание каждому способу.

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

2. Внутренняя (или внедренная) таблица стилей. Таблица стилей в этом случае имеет тот же самый формат, что и внешняя, но располагается в секции заголовка той же Web-страницы и помещается внутрь специального тега <STYLE>.

3. Внутренние (также встроенные или внедренные) стили. Определение стиля помещается прямо в нужный тег, для чего используется специальный атрибут STYLE.

Создайте новый CSS документ. Сохраните его под именем d009.css.
Создайте новый HTML документ. Сохраните его под именем d009.html.
Добавьте ссылку на CSS-документ ссылку в область head.

4. Перейдите в документ с таблицей стилей и добавьте в него описание стиля:
.cit { font-style: italic; color: #FF0000 }

Сохраните документ. Перейдите в html документ и добавьте туда несколько текстовых абзацев, применив к ним стиль cit.
Для уменьшения высоты текста цитаты добавьте в стиль cit еще один параметр font-size: smaller. Сохраните оба документа, посмотрите на результат.
Создайте еще 2 стиля, примените их другим абзацам.

С помощью таблицы стилей можно изменить внешний вид любого тега HTML. Для этого нужно просто переопределить его в таблице стилей следующим образом:

i { color: #FF0000; font-size: smaller }

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

А если вы создадите такой стиль:

h1 i { color: #FF0000; font-size: smaller }

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

<h1>Курсивный заголовок</h1> А следующий текст: <i>0бычный курсив</i> <h2>Экспериментируем с курсивом</h2>

будет отображаться как обычно. А такой стиль:

I.cit { color: #FF0000; font-size: smaller }

будет применяться только к тексту, помещенному внутрь тега с атрибутом CLASS, установленном в cit (своеобразный гибрид стилевого класса и переопределения тега; этот стиль так и называется — гибридный), т. е. к такому тексту:

<i class="сit">Маленький зеленый курсивчик

Как видите, тег также поддерживает атрибут CLASS. Вообще, его поддерживают практически все теги, "отвечающие" за видимые элементы страницы. Так что проблем с форматированием страниц у вас возникнуть не должно.

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

<p id="cit">это цитата.</p>

Тогда определение стиля в таблице должно выглядеть следующим образом:

#cit { font-size: smaller; font-style: italic }

Такой стиль называется стилем-селектором.

Измените внешний вид следующих тегов em, h1, h2, ul.Создайте в html документе текст и выделите его соответствующими тегами.
Для тега абзаца создайте несколько стилей селекторов.

Для использования таблицы стилей внутри файла html необходимо добавить между тегами <head> парный тег <style></style>. Пример использования стилей внутри html документа представлен ниже:

.cit { font-size: smaller; font-style: italic }
I {color: #00FFOO }
HI I { color: #FF0000; font-size: larger }

</style>
<title>Untitled Document</title>
</head>

Сохраните документ.
Создайте новые CSS и HTML документы. Назовите их d009_1.css и d009_1.html соответственно.

12. Создайте следующий html документ:

В файле с таблицами стилей задайте следующие параметры для текстов:

Заголовок – высота текста 24 пт, выравнивание по центру;
Абзацы (параграфы) – высота текста 9 пт;
Стиль для авторских прав, например, copyright – высота текста 8 пт, начертание текста – курсив, выравнивание текст

©2015 arhivinfo.ru Все права принадлежат авторам размещенных материалов.