Добавьте в файл index.html ссылку выполненные задания из лабораторной работы №3.

3.3 Контрольные вопросы

1. Какой тег служит для вставки таблицы в html-документ?

2. Какие атрибуты тега <table> позволяют изменить фон таблицы и ширину границы таблицы?

3. Задается ли ширина границы таблицы одна для все таблицы или задается отдельно для внешней границы и внутренних ячеек?

4. Какой тег отвечает за начало строки?

5. Какой тег отвечает за начало ячейки?

6. Как изменить выравнивание текста в ячейке?

7. Может ли быть в одной строке ячейки с различным вертикальным выравниванием?

8. Если для таблицы установить цвет фона и фоновое изображение одновременно, что будет отображаться на экране?

9. Как можно объединить ячейки по горизонтали?

10. Как можно в таблице объединить ячейки по вертикали?

Лабораторная работа 4. Формы

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

4.1 Теоретические сведения

4.1.1 Формы. Общие сведения

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

Как правило, форма работает совместно с установленным на сервере сценарным приложением, обрабатывающим введенную информацию.

Наиболее широко формы применяются для поиска, регистрации, заполнения анкет, тестов и т.д. Форма определяется с помощью тегов <form></form>, между которыми располагаются поля ввода, кнопки, а также все необходимые элементы оформления формы. Для указания параметров в теге <form> используются атрибуты (см. таблицу 4.1).

Таблица 4.1 - Атрибуты тега

Атрибут	Назначение
action	адрес программы или документа, которые обрабатывают данные формы
method	метод передачи данных по протоколу http. Возможные варианты значений метода: GET - способ передачи, когда данные, введенные в форму добавляются в строку запроса
name	имя формы. Используется для обращения к форме с помощью javscript.
target	имя окна или фрейма, куда обработчик будет загружать возвращаемый результат
enctype	тип информации формы. Различается в случае использования символьно-цифровой информации и в случае использования файлов

4.1.1 Элементы управления формы

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

Поле ввода

Однострочное поле ввода и используется, когда необходимо, чтобы пользователь ввел в форму данные в произвольной форме но ограниченные по объему. Для получения поля ввода используют тег <input type="text">.

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

Основной параметр тега <input>, определяющий вид элемента - type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список параметров, которые определяют его вид и характеристики.

Кроме атрибута type тег имеет следующие атрибуты (см. таблица 4.2):

Таблица 4.2 - Атрибуты тега

Атрибут	Назначение
align	определяет выравнивание, в случае если type=“image”
alt	определяет альтернативный текст для кнопки с изображением (type=“image”)
checked	предварительно активированный переключатель или флажек
disabled	блокирует доступ и изменение элемента (поле недоступное)
maxlength	максимальное количество символов, разрешенных в тексте
name	имя поля, предназначено для того, чтобы отличать один элемент управления от другого. Имя может быть указано по всем правилам именования переменных
readonly	разрешает только чтение с текстового элемента управления
size	ширина текстового поля в символах
value	значение элемента. Значение переменной указанной в атрибуте name

Переключатель

Переключатели определяют поля выбора одного значения из нескольких доступных, для каждой позиции переключателя создается свой тег <input type="radio">. Группируются переключатели при помощи одинакового имени, задаваемого атрибутом name.

Флажки.

Флажки используются, когда необходимо, чтобы пользователь выбрал один или несколько вариантов из ограниченного числа вариантов выбора. Флажки в форме не зависят друг от друга, их можно установить или  сбросить в любой комбинации. Для каждого флажка необходимо задать свое уникальное имя при помощи атрибута name. Создаются флажки тегом <input type="checkbox">. Для установки флажка при загрузке страницы необходимо указать атрибут checked=“checked”.

Командные кнопки.

Командная кнопка отправки (type=“submit”) используются для выполнения пересылки данных формы на сервер. Командная кнопка сброса (type=“reset”) возвращает форму к исходному состоянию (очищает форму).

Поле выбора файла.

Поле выбора файла (type=“file”) создает поле для выбора файла, который будет загружен на сервер вместе с информацией формы. Рядом с полем ввода отображается командная кнопка “Обзор…”, открывающая стандартное диалоговое окно выбора файла. Если форма подразумевает загрузку файлов на сервер, то в атрибутах формы должны быть установлены следующие атрибуты method=“post” и enctype=“multipart/form-data”.

Списки выбора.

Списки выбора бывают двух типов: раскрывающиеся списки (выпадающие меню) и списки с множественным выбором. Независимо от типов списков  описываются они одинаково с помощью пары тегов <select></select>. Отдельные элементы списка задаются с использованием тега <option>. Тип списка определяется при помощи атрибута multiple тега <select>. Пример использования формы приведен в листинге 4.1:

Листинг 4.1 - Использование формы и элементов управления

Рисунок 4.1 – Форма заполнения анкеты

4.2 Практическая часть

1. Создать форму для заполнения анкеты – файл форма.jpg. Обратите внимание, что страница с анкетой сверстана в виде таблицы с невидимой рамкой (см. рисунок 4.2).

 

Рисунок 4.2 – Форма заполнения анкеты

2. Сохраните анкету в файле lab4.html. Обратите внимание, что вся форма должна заключаться в тег <form>.

3. Создать поля для ввода имени пользователя и пароля пользователя (символы вводимые в поле Пароль должны отображаться звездочками). Вставка полей осуществляется тегом <input> с различными значениями атрибута type.

4. Создать поля для ввода даты рождения. День и месяц рождения выбирается из выпадающего списка, а год вводится вручную в поле ввода, причем количество вводимых символов не должно превышать четыре. Для формирования списка использовать тег <select>, а для задания ограничения на количество вводимых символов атрибут maxlength тега <input>.

5. Создать переключатели для выбора пола. Реализовать возможность выбора только одного варианта. Использовать тег <input>.

6. Создать флажок, с текстом «Да, я желаю получать спам» с флажком, установленным по умолчанию. Использовать тег <input>.

7. Создать переключатели для выбора количества писем получаемых в день, проверить, чтобы переключатели из задания 4 и 6 формировали две различные группы.

8. Создать список интересов с возможностью выбора нескольких элементов.

9. Добавить поле для ввода нескольких строк текста с дополнительной информацией о пользователе. Поле должно иметь размеры 7 строк и 30 столбцов. Для вставки такого поля используйте тег <textarea>.

10. Создать поле с кнопкой «Обзор» для загрузки файла изображения. Использовать тег <input>.

11. Создать две кнопки. Первую для передачи данных формы на сервер, а вторую для очистки формы. Использовать тег <input>.

12. Добавьте к странице свой элементы форм (не менее 3-х).

13. Добавьте в файл index.html ссылку выполненные задания из лабораторной работы №4.

4.3 Контрольные вопросы

1. В какой тег заключаются все элементы управления?

2. Какой атрибут тега <form> указывает на файл, который будет обрабатывать данные формы?

3. Какие существуют значения атрибута type в теге <input>?

4. В чем отличия тега <input type=”reset”> и <input type=”submit”>?

5. Как добавить на форму переключатель?

6. Для чего предназначен тег <textarea>?

7. Сколько тегов необходимо, чтобы вывести на экран поле ввода для указания пути к файлу и кнопки обзор?

8. Какие существуют методы передачи данных формы на сервер?

9. Как осуществляется обработка форм?

10. За счет чего переключатели можно разбивать на группы?

11. Какой атрибут тега <input> позволяет указать значение, которое будет заполнено при первом отображении формы?

12. Для чего предназначен атрибут checked?

Лабораторная работа 5. Фреймы. Карты изображений

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

5.1 Теоретические сведения

5.1.1 Фреймы

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

• фрейм имеет свой URL, что позволяет загружать его независимо от других фреймов;

• фрейм имеет собственное имя (атрибут name), позволяющее переходить к нему из другого фрейма (атрибут target в теге ссылки <a>);

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

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

Формат документа, использующего фреймы, внешне очень напоминает формат обычного документа, только вместо тэга <body> используется контейнер <frameset>, содержащий описание внутренних html-документов, содержащий собственно информацию, размещаемую во фреймах. Контейнер <frameset>, в свою очередь состоит из самих фреймов - тег <frame> и <noframe> позволяет строить двойные документы для браузеров, поддерживающих фреймы и не поддерживающих фреймы.

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

Например:

• <FRAMESET COLS="50,*,50"> - описывает три фрейма, два по 50 точек справа и слева, и один внутри этих полосок.

• <FRAMESET ROWS="20%,3*,*"> - описывает три фрейма, первый из которых занимает 20% площади сверху экрана, второй 3/4 оставшегося от первого фрейма места (т.е. 60% всей площади окна), а последний 1/4 (т.е. 20% всей площади окна.

Тег <frame> имеет свои атрибуты, которые детально описывают содержимое и поведение каждого фрейма (см. таблица 5.1):

Таблица 5.1 - Атрибуты тега <frame>.

Атрибут	Назначение
src	задает путь к файлу, предназначенному для загрузки во фрейме
name	задает уникальное имя фрейма
scrolling	способ отображения полосы прокрутки во фрейме. Возможные варианты значений: yes, no, auto.
bordercolor	цвет линии границы
frameborder	определяет следует ли отображать рамку вокруг фрейма
norsize	определяет можно изменять размер фрейма пользователю или нет

Пример использования фреймов рассмотрен в листинге 5.1:

Листинг 5.1 - Пример использования фреймов.

Комментарий к листингу.

1. в документе отсутствует тег <body>;

2. вначале фреймовая структура разбита на два столбца: первый шириной в 200 пикселей, а второй занимает все оставшееся пространство;

3. в левом фрейме открыт файл menu.html. Ссылки этом файле организованы с указанием целевого фрейма, в котором должны открывать новые файлы;

4. вместо правого фрейма организована новая фреймовая структура из двух строк. Высота первой строки 30% от общей высоты окна, а нижняя часть занимает оставшиеся 70%;

5. в верхнем файле открыт файл header.html;

6. в нижнем файле открыт файл content.html или тот, который будет выбран в левом фрейме. Именно по имени тега content (см. листинг 5.1) и по атрибуту target в теге </a> файла menu.html (см. листинг 5.2) определяется где должна быть открыта ссылка.

Листинг 5.2 - Атрибут target в теге

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

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

В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Клиентский вариант является более часто используемым. Для указания браузеру, что изображение является картой, используется атрибут usemap в теге <img>. Он является ссылкой на описание конфигурации карты, которая задается тегом <map>. Значение атрибута name данного тега должно соответствовать имени в usemap. Для задания активой области, являющейся ссылкой на HTML-документ, используется тег <area> с атрибутами (см таблица 5.2):

Таблица 5.2 - Атрибуты тега <area>.

Атрибут	Назначение
shape	определяет форму активной области. Может принимать значения circle, rect, poly
alt	добавляет альтернативный текст подписи ссылки для каждой области
cords	задает координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения. Первое число является координатой по горизонтали, второе – по вертикали.

Список координат передаваемых в атрибут coords зависит от формы области.

Для окружности задаются три числа - координаты центра круга и радиус: <area shape="circle" coords="230,340, 100" href="/circle.html">.

Для прямоугольника – координаты левого верхнего и правого нижнего угла <area shape="rect" coords="24,18, 210,56" href="/rect.html">:

Для полигона задаются координаты его вершин.

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

5.2 Практическая часть

1. Создайте файл lab5.html, состоящий из трех фреймов (см. рисунок). Для создания фрейма необходимо после раздела заголовка документа указать структуру фреймов: два фрейма вертикальный, а во втором вертикальном еще два горизонтальных фрейма…

<frameset cols="20, *">

            <frame src="file.html">

            <frameset rows="100, *">

<frame src="file.html">

<frame src="file.html">

</frameset>

</frameset>

 

2. Поместите файл на свой веб-сервер и дайте каждому фрейму уникальное имя: значение атрибута name для тега <frame>.

3. Задайте левому фрейму фиксированную ширину в 234 пикселя с запретом изменять ширину фрейма (атрибут noresize).

4. В левый фрейм поместите файл меню (menu.html), который будет состоять из списка лабораторных работ. Меню разместите в таблице, состоящей из 3-х строк (в каждую строку фоном поместите рисунок).

5. Задайте для каждой лабораторной работы ссылку на соответствующий документ, который будет открыт в правом нижнем фрейме. Для открытия ссылки в другом фрейме используйте атрибут target тега <a>, в качестве значения атрибута target укажите имя фрейма в котором необходимо открыть файл.

6. В верхний фрейм поместите в качестве источника поисковую систему google.com. Значение атрибута src для второго тега <frame>.

7. Создайте в папке своего домена файла map.html, содержащий карту изображений.

8. Поместите в файл map.html изображение-карту с геометрическими фигурами: <img src="figure_1.png" border="0" usemap="#navigation">

Дополните файл обработкой карты изображений

<map name="navigation">

     <area shape="circle" coords="72,93,40" href="krug.html" title="Круг">

     <area shape="rect" coords="129,129,268,194" href="pryam.html" title="Прямоугольник">

     <area shape="poly" coords="168,108,221,15,279,108"  href="triangle.html" title="Треугольник">

</map>

1. Проверьте работу карты изображений. Обратите внимание на всплывающие подсказки и ссылки.

2. Создайте в отдельном файле аналогичную карту изображений для задания областей Украины. В карте изображений выделите три области, на киевскую область назначьте ссылку на сайт meta.ua на две других области любые ссылки. Чтобы узнать координаты точек изображения можно использовать программу Paint :)

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

4. Добавьте в файл index.html ссылку выполненные задания из лабораторной работы №5.

5.3 Контрольные вопросы

1. Для чего используются фреймы?

2. За что отвечает атрибут target тега <a>?

3. Как указать ссылке в каком фрейме надо открыться?

4. В каких единицах можно задать ширину или высоту фрейма?

5. Можно ли изменять границы между фреймами?

6. Для чего используются карты изображений?

7. Какие формы фигур могут использоваться в картах изображений?

8. Как можно подписать фигуры карты изображений?

9. Какие виды карт изображений бывают?

10. Что может служить альтернативой использования карт изображений?

Лабораторная работа 6. Введение в каскадные таблицы стилей.

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

Практическая часть

1. Создайте два файла: lab6.html и lab6style.css.

2. Создайте в html-файле пять абзацев длиной в три строки.

3. В css файле напиши стиль для селектора тега body, в котором укажите цвет текста, размер букв и название шрифта:

4. Включите предварительный просмотр и посмотрите, как выглядит стиль всего документа. Чтобы html-документ «поднял» эти стили необходимо в html-файле подключить css файл:  

5. Сохраните изменения. Посмотрите html-файл в браузере. Обратите внимание на шрифт.

6. В css файле создайте шрифт абзаца, в котором установите разраженный интервал текста между буквами:

7. Сохраните css файл. Обновите html файл в браузере. Что изменилось? Используя дополнение FireBug просмотрите какие стили используются во втором абзаце.

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

9. Сохраните. Посмотрите, что получилось.

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

    • шрифт абзаца Comic Sans; (font-family)

    • размер шрифта 25 пт; (font-size)

    • отступ красной строки в 50 пикселей (text-indent).

11. Подключите стиль к третьему абзацу (используя атрибут class).

12. Создайте класс .rich для отображения пятого абзаца, содержащий следующие свойства текста:

    • Шрифт Arial, 15 пт;

    • Начертание жирное + курсив (font-weight; font-style);

    • Цвет букв оранжевый (color);

    • Высота строки 25 пунктов (line-height).

13. Создайте класс perenos и запретите в нем перенос слов в пределах одного абзаца (white-space). Назначьте это свойство второму и четвертому абзацу. Для этого в атрибуте class тега абзаца через пробел укажите два класса (тот, что был раньше + класс perenos). Сохраните, посмотрите.

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

15. Создайте класс следующими свойствами:

    • Шрифт Courier 12 пт;

    • все буквы заглавные;

    • межбуквенный интервал разряженный на 200%;

    • текст подчеркнутый;

    • красная строка 2 см;

    • междустрочный интервал двойной.

16. Добавьте еще пару абзацев и назначьте им свойства этого класса.

17. Создайте свои 3-4 класса стилей текста (каждый стиль должен включать по 3-4 свойства форматирования текста) и используйте их на странице.

18. Добавьте в файл index.html ссылку выполненные задания из лабораторной работы №6.

Таблица: Свойства текста

№	Свойство (возможные значения)	Назначение свойства
1	font-family (Arial | Times New Roman | Courier | Tahoma)	название шрифта
2	font-weight (normal | bold | lighter)	насыщенность шрифта (ширина букв)
3	font-size (small | large | medium | 120% | 14px)	размер шрифта
4	font-style (normal | italic)	стиль шрифта (обычно курсив)
5	font-stretch (normal | width | condensed | expanded)	растянутое начертание шрифта
6	text-indent (число px | %)	отступ первой строки, при отрицательном значении выступ
7	text-align (left | center | right | justify)	горизонтальное выравнивание
8	line-height (normal | …px | …% | …em)	высота строки (междустрочный интервал)
9	vertical-align (sub | sup | top | middle | bottom)	вертикальное выравнивание текста в контейнере
10	word-spacing (… px| normal)	расстояние между словами
11	letter-spacing (… px| normal)	расстояние между буквами
12	text-transform (uppercase | lowercase | capitalize | none)	регистр букв
13	text-decoration (none | underline | overline | line-through)	оформление текста
14	text-shadow (цвет длин длина длина)	тень к тексту
15	white-space (normal | nowrap | pre)	обработка пробелов
16	color	цвет

 

Лабораторная работа 7. Свойства блочных объектов

Цель: Изучить возможности CSS по работе с блочными объектами; изучить основные свойства блоков.

 

Практическая часть

1. Создайте html-файл lab7.html, содержащий блочный элемент DIV.

2. Создайте css-файл и подключите его к html-документу.

3. Создайте класс k1, в котором определите размер блока 200х200 пикселей, фон (светло-зеленый) и рамку (сплошную, темно-зеленую, шириной в 3 пикселя).

4. Подключите класс k1 к блоку в html-документе. Обратите внимание на то, как изменится блок.

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

6. Теперь блоки «липнут» друг к другу, между ними нет расстояния, чтобы добавить наружный отступ слева: добавляем объявление . Сохраните, просмотрите изменения.

7. Создайте в отдельном файле горизонтальный светофор из трех блоков. Ширину блоков сделайте динамичной, чтобы они изменялась в зависимости от ширины окна, но все блоки должны иметь одну ширину. Задайте каждому блоку свой цвет. Отступы для body уберите с помощью css.

8. Задайте первому блоку объявление display:none, а второму visibility: hidden; В чем отличия этих двух объявлений?

9. Создайте файл, а в нем три блока. В первом блоке сделайте рамку, шириной с разным типом линии с разных сторон блока. Во втором блоке задайте фоновое изображение (background-image). В третьем блоке, задайте фон. Добавляйте строчки по одной и смотрите изменения в браузере после каждой строки.

10. Расположите блоки одни над одним. Для этого установите каждому блоку объявление position: absolute; и порядок расположения блоков сверху вниз: объявление z-index: 5; (у тех блоков что ниже, значение индекса должно быть меньше, например 10, 20 и 30). Чтобы блоки начинались не в одной точке, им необходимо задать свойства left и top.

11. Создадим скругленные углы. Создаем четыре вложеных друг в друга блока. опишем для внешнего блока класс ugol и назначим этот класс блоку опишем класс для правого верхнего угла и самостоятельно для левого нижнего и правого нижнего углов.

12. Создать новый html-файл в который поместить изображение ягоды.

13. В css-файл подключенный к html-файлу запишите стиль для изменения прозрачности любого изображения при наведении на него курсора мыши. данный код будет работать только в браузере Firefox.

14. Создайте свои 2-3 класса стилей блока (каждый стиль должен включать по 3-4 свойства) и используйте их на странице.

15. * Используя только блоки, создайте поле для игры в крестики-нолики.

16. * Используя блоки, их вложенность, фон, выравнивание, свойство float, шрифт Georgia создайте вот такую вот шапку. Углы вырежьте самостоятельно.

17. Добавьте в файл index.html ссылку выполненные задания из лабораторной работы №7.

Лабораторная работа 8. Дополнительные свойства css

Цель: освоить работу с таблицами и списками с помощью CSS.

Практическая часть

1. Создайте html-файл и вставьте во внутрь тега <body> текст из файла текст.txt.

2. Просмотрите и проанализируйте структуру таблицы. Обратите внимание на то, какие теги можно использовать в таблице.

3. Создайте css-файл в котором укажите что в таблице и ячейках (table, td, th{…}) будет использоваться рамка красного цвета, шириной в 1 пиксель. Подсоедините это css-файл к html-файлу.

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

*{

border-collapse: collapse;

}

5. Назначьте таблице отдельный класс. Опишите свойства отдельных элементов таблицы, используя следующие стили:

.frmtbl { /*задание стиля таблицы в целом*/ } .frmtbl thead { /*задание стиля для заголовка таблицы */ } .frmtbl tbody { /*задание стиля для основной части таблицы*/ } .frmtbl tfoot { /* задание стиля для нижней части таблицы */ }

6. Используя свойства list-style-type, list-style-position, list-style-image разместите в блоке маркированный список. В качестве маркера используйте изображение, маркер должен быть внутри списка. Отступ от левого края блока до списка должен составлять 50 пикселей.

7. Создайте новый документ и разместите в него блок с идентификатором layer

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

clip: rect(40px, auto, auto, 40px);

Если все сделали правильно, то на экране должна появиться только кадрирования часть текста.

9. Создайте блок с рамкой размером 200х200 пикселей. Поместите в этот блок изображение заведомо большего размера. Поэкспериментируйте со свойством overflow так, что в том случае, если в блок не вмещается содержимое, появлялись полосы прокрутки (или только одна):

10. Создайте и используйте css-стили для работы со списками и таблицами (не менее 5).

11. Добавьте в файл index.html ссылку выполненные задания из лабораторной работы №8.

Лабораторная работа 9. Верстка html–страниц

Цель: создать сайт, который имеет блочную структуру

1. Создайте в файл lab9.html.

2. Создайте папку images и поместите туда картинки для лабораторной работы.

3. Создайте файл styles_9.css.

4. Свяжите html файл с css файлом. В теге напишите <link type="text/css" rel="stylesheet" media="all" href="styles_9.css">

5. Создайте заголовок web-странице "Лабораторная работа 9" <title>Лабораторная работа 7</title> Приведенный ниже код лишь пример – создайте свой мини-сайт.

6. Опишите в css файле параметры всего html документа body {   background-color:#DFF5FF;   font-size:13px;   margin:0; }

7. Сохраните оба файла (css и html) и просмотрите страницу в браузере, она должна быть нежно голубого цвета и иметь заголовок окна.

8. Внутри тега <body> создайте таблицу со следующими параметрами: 1 столбец, 4 строки, ширина таблицы 100%, рамка 0 пикселей (воспользуйтесь для этого кнопкой таблица на панели инструментов): <table width="100%" cellpadding="0" cellspacing="0" border="0">    … </table>

9. Перед началом каждой строки добавьте комментарий с информацией о номере строки <!--Первая строка-->

10. Внутри первой строки (внутри тега <td>) поместите таблицу состоящую из одной строки и двух ячеек внутри этой строки <table width="100%" cellspacing="0" cellpadding="0" border="0"> … </table>

11. В css файле создайте класс для левой ячейки (файл css) и  назначьте его первой ячейке (файл html) <td class="top_left">: .top_left{  text-align: left;  vertical-align: top;  background-image: url(images/bg_top.gif);  height: 318px; }

12. В css файле создайте класс для правой ячейки и назначьте его второй ячейке <td class="top_right"> .top_right{  width: 713px;  background-image: url(images/big_picture.jpg); }

13. Разместите в первой (левой) ячейке логотип и ссылку на ваш сайт (для этого используйте вставку изображения, а ссылку в нем можно будет указать) <a href="http://my.net"> <img src="images/logo.jpg" width="277" height="318" alt="" /></a>  

14. Чтобы ссылка не имела синей контурной линии добавьте в изображение (тег <img>) атрибут border="0".

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

16. Для ячейки второй строки главной таблицы создайте и подключите класс separator.

17. Класс должен содержать следующие свойства: высота 19 пикселей, ширина 100 процентов, фон изображение su_bg.gif.

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

19. Создайте для ячейки со строкой меню класс menu_line со следующими параметрами: высота 32 пикселя, внутренний отступ 60 пикселей, фоновое изображение menu_bg.gif.

20. Назначьте ячейке третей строки класс menu_line.

21. Создайте внутри ячейки третей строки блочный объект, в который поместите изображение и ссылку (сделайте 5-6 копий блоков подряд) <div class="menu_item">     <a href="#">Один ссылка</a> </div>

22. Опишите класс menu_item в ктором учтите: фоновое изображение (треугольничек menu_list.gif), запретить повтор фонового изображения, выровнять фон по левом краю, внутренний отступ слева 15 пикселей, а наружный отпступ справа 40 пикселей, блоки ложить в ряд так, чтобы они своим левым краем присоединялись к предыдущему блоку.

23. Сохраните, обновите, посмотрите что получилось.

24. Опишите стиль для ".menu_item a", который будет описывать стиль ссылок расположенных именно внутри тега имеющего класс menu_item. В классе должны быть не жирный шрифт, не подчеркнутый текст, цвет ссылок #B7F7FF, шрифт Verdana, размер шрифта 13 пикслей.

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

26. Создайте для ячейки четвертой строки класс content_td, который будет содержать повторяющийся по оси Х фон (из файла bottom.jpg), привязанный к нижнему краю объекта и назначьте этот класс этой ячейке.

27. В эту же ячейку поместите таблицы и назначьте ячейкам классы вот так:

28. Опишите каждый класс. Для класса content_left .content_left{ background-image:url(images/palmOS.jpg); background-position:left bottom; background-repeat:no-repeat; padding:8px 8px 290px; width: 220px; vertical-align: top; }

29. Поместите вовнутрь ячейки с классом menu_left следующий фрагмент страницы Уровень первый<br /> <a href="#">Ссылка</a> <a href="#">Ссылка</a> <a href="#">Ссылка</a> <a href="#">Ссылка</a> <a href="#">Ссылка</a> <a href="#">Ссылка</a> Уровень второй<br/> <a href="#">Ссылка</a> <a href="#">Ссылка</a> Уровень третий<br /> <a href="#">Ссылка</a> <a href="#">Ссылка</a> <a href="#">Ссылка</a> <a href="#">Ссылка</a> <a href="#">Ссылка</a>

30. Для классов menu_table_top, menu_left, menu_table_bottom опишите стили так, чтобы они соответстовали изображению на картинке (имя шрифта Verdana): menu_table_top: высоту, ширину, фон; menu_left: фон, отступы от границы до текста, цвет текста, подчеркиваемость текста, жирность текста, название шрифта, размер шрифта (следите, чтобы изменения в этом классе правильно влияли на написание "Уровень первый", "Уровень второй", "Уровень третий"); menu_table_bottom: высоту, ширину, фон.

31. Создайте стиль для ссылок внутри ячейки с классом menu_left. В имени стиля необходимо указать имя касса и имя тега. Для этого стиля опишите свойства так, чтобы они соответствовали изображению на картинке. Чтобы ссылки начинались с новой строки им необходимо указать свойство display: block;

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

33. Добавьте в файл index.html ссылку на созданный мини-сайт.

СПИСОК ЛИТЕРАТУРЫ

1. Гончаров А. Самоучитель HTML. – СПб.: Питер, 2002. – 240 с.: ил.

2. Зельдман Д. Web-дизайн по стандартам Пер. с англ. Г. П. Ковалева. -

М. : НТ Пресс, 2005. - 440 с. : ил.

3. Матросов А. В., Сергеев А. О., Чаунин М. П. HTML 4.0. - СПб.: БХВ-

Петербург, 2003. - 672 с.: ил.

4. Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство,

6-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2008. – 752 с., ил.

5. Полонская Е.Л. Язык HTML. Самоучитель: – М: Издательский дом

"Вильяме", 2003. – 320 с. : ил.

6. Создание Web-страниц и Web-сайтов. Самоучитель : [учеб. пособие] /

под ред. В. Н. Печникова. – М. : Изд-во Триумф, 2006.– 464 с. : ил.

40