Размещение графики на Web-странице.
Тег <img> является одиночным, т.е. закрывающий тег не применяется.
Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. Перед выполнением упражнения поместите файл schedule.jpg в ту же папку, которая будет использована для хранения создаваемой Web-страницы.
- Внесите изменения в файл schedule.html (если файл утрачен, создайте новый):
- Самостоятельно внесите изменения в файл schedule.html, опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH. Пример использования атрибутов приведен в таблице ниже:
| Атрибут | Формат | Описание |
| ALT | <IMG SRC="schedule.jpg" ALT="картина"> | Надпись "картинка" выводится на экран при подведении указателя мыши к изображению. |
| BORDER | <IMG SRC="schedule.jpg" BORDER="3"> | Задает рамку вокруг изображения толщиной 3 пикселя. |
| ALIGN | <IMG SRC="schedule.jpg" ALIGN=TOP"> | Выравнивает изображение относительно текста по верхней границе текста. |
| HEIGHT | <IMG SRC="schedule.jpg" HEIGHT=111> | Вертикальный размер изображения принудительно устанавливается в 111 пикселей. |
| WIDTH | <IMG SRC="schedule.jpg" WIDTH=220> | Горизонтальный размер изображения принудительно устанавливается в 220 пикселей. |
| VSPACE | <IMG SRC="schedule.jpg" VSPACE="8"> | Атрибут добавляет верхнее и нижнее пустые поля высотой 8 пикселей. |
| HSPACE | <IMG SRC="schedule.jpg" HSPACE="8"> | Добавляет левое и правое пустые поля шириной 8 пикселей. |
Фоновое отображение графики на Web-странице
- Поместите файл back.jpg в ту же папку, что и schedule.html.
- Внесите изменения в файл schedule.html:
На экране вы увидите:
В действительности же графический файл back.jpg выглядит так:
Линейки и буквицы
Графические элементы возможно применять в качестве различного вида "украшений". Если Вы придумаете что-нибудь оригинальное, ваша веб-страница будет смотреться необычно и запомнится посетителю. Вот несколько ставших уже традиционными вариантов такого применения графики.
Во-первых, это различные графические разделители, обычно горизонтальные, применяемые вместо горизонтальной черты (<HR>).
Вот так он выглядит в окне браузера:
Хотя тег <HR> и поддается настройке, графический разделитель вместо <HR> часто выглядит лучше:
Во-вторых, можно применить графический элемент в качестве буквицы. Встроить буквицу в текст можно следующим образом:
<IMG SRC="r.gif" WIDTH="60" HEIGHT="59" BORDER="0" АLТ="В">
от пример встроенной в текст буквицы, она добавлена в начало параграфа. Для экономии места приводится текст только того места странички где вставлена буквица. На всякий случай в качестве альтернативного текста дается буква "В", чтобы пользователю с отключенной графикой не приходилось строить догадки относительно первой буквы.
- Разместите в Вашем документе schedule.html разделитель anim_hr.gif.
- Задайте этому изображению высоту, равную 2 пикселям.
- Сместите анимированный разделитель в центр документа.
- В слове Расписание замените букву Р изображением, взять его Вы можете в папке с лабораторными работами(файл r.gif ).
- Изменяя значение атрибута ALIGN, добейтесь наилучшего расположения буквы на экране.
- Используя любой графический редактор, создайте свое, альтернативное, изображение буквы Р и встройте его в документ.
Графические маркеры.
Язык HTML позволяет создавать маркированные и нумерованные списки.
Пример маркированного списка:
- элемент списка
- элемент списка
- ...
- элемент списка
В терминах языка HTML это выглядит так:
<ul><li>элемент списка<li>элемент списка<li>...<li>элемент списка</ul>Пример нумерованного списка:
- элемент списка
- элемент списка
- ...
- элемент списка
В терминах языка HTML это выглядит так:
<ol><li>элемент списка<li>элемент списка<li>...<li>элемент списка</ol>Одно дело, когда маркерами списка являются стандартные кружочки, и совсем другое — когда каждый сам имеет возможность создать маркер. Маркером может быть все, что угодно — от просто цветных и немного выпуклых кружков и квадратов до изощренных миниатюрных художественных работ. Чтобы проиллюстрировать возможность вставки в список графических маркеров, заменим кружки в маркированном списке на красные треугольники.
- Сначала надо создать такой треугольник в любой программе либо скопировать уже готовый из папки с лабораторными работами(файл marker.gif )..
- Этот файл нужно поместить рядом с уже созданным файлом schedule.html.
- Теперь введем в тег <UL> атрибут STYLE= (этот атрибут подробнее мы рассмотрим при изучении CSS — Cascading Style Sheets):
<UL STYLE="list-style-image: url('marker.gif');">
Ваш список должен выглядеть так:
- элемент списка
- элемент списка
- ...
- элемент списка
Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки.
Оформление кнопок.
Еще одно частое применение графических элементов — это оформление кнопок. Вообще говоря, кнопка — это элемент взаимодействия с пользователем, так как предполагается, что когда он на ней нажмет, то что-нибудь произойдет. Сейчас мы не будем рассматривать методы такого взаимодействия. Пока мы только научимся создавать кнопки и использовать в них элементы графики.
- Чтобы создать кнопку, поместите в Ваш html-документ следующий код:
<BUTTON>ЭТO KHОПKА</BUTTON>
В браузере она должна выглядеть так: ЭТO KHОПKА
Между тегами <BUTTON>...</BUTTON> можно поместить не только текст, но и изображение. Если мы поместим туда тег <IMG>, то получим кнопку с графическим изображением.
- Скопируйте изображение home-button.gif из папки с лабораторными работами , поместите его в ту же папку, что и файл schedule.html.
- Замените текст ЭТO KHОПKА на описание тега <IMG>, указывающего на файл home-button.gif.
- В тег <BUTTON> введите атрибут onClick — этот атрибут позволяет описать действия, которые необходимо отработать браузеру при шелчке мыши по объекту. Обновленный тег должен вылядеть так:
<BUTTON onClick="location.href='http://www.mail.ru'">
Теперь при нажатии указателем мыши на созданную кнопку браузер перейдет на страницу www.mail.ru:
Часть 3
Создание таблиц в HTML-документе.
Цель работы: Научиться создавать и редактировать таблицы в терминах языка HTML.
Теоретическая часть: Таблицы представляют собой особую часть HTML-документа. Данные в ней организованы в виде прямоугольной сетки, состоящей из вертикальных столбцов и горизонтальных рядов. Каждая клетка таблицы является ячейкой. Ячейки могут содержать в себе текст, графику или другую таблицу. Таблица состоит из трех основных частей:
- название таблицы,
- заголовки столбцов,
- ячейки.
Таблица заполняется горизонтальными рядами ячейка за ячейкой слева направо. Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.
Теги оформления таблиц
| Тег | Форма записи | Примечание |
| TABLE | <TABLE>текст</TABLE> | Объявление таблиц. |
| TR | <TR>текст</TR> | Объявление строки. |
| TD | <TD>текст</TD> | Объявление ячейки в строке. |
Атрибуты тега <TABLE>
| Атрибут | Форма записи | Примечание |
| BORDER | <TABLE BORDER=X> | Задает рамку вокруг таблицы. |
| WIDTH | <TABLE WIDTH=XX%> | Задает ширину таблицы как ХХ% от ширины страницы или как ХХ пикселов. |
| BGCOLOR | <TABLE BGCOLOR="#RRGGBB"> | Задает цвет фона таблицы. |
Атрибуты тегов <TD> и <TR>
| Атрибут | Форма записи | Примечание |
| ALIGN | <TD ALIGN=X> | Устанавливает выравнивание по горизонтали (Right, Left, Center) |
| VALIGN | <TD VALIGN=X> | Устанавливает выравнивание по вертикали (Top, Middle, Bottom, Baseline) |
| BGCOLOR | <TD BGCOLOR= "#RRGGBB"> | Задает цвет фона ячейки. |
Еще один тег для оформления ячеек таблиц — тег <TH>...</TH> — нужен для задания заголовочных ячеек. Он во всем совпадает с тегом <TD>, но в отличие от него, содержимое выдается жирным шрифтом и центрируется.
Если нужно задать заголовок всей таблицы, используйте тег <CAPTION параметры>...</CAPTION>. Он должен быть внутри тега <TABLE>, но вне описания ячеек. Тег имеет один параметр:
ALIGN - указывает положение заголовка: он может быть в верхней (TOP) или нижней (BOTTOM) части таблицы.
Ход работы:
Создание простой таблицы.
- Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:
- Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.
- Вставьте в тег <table> следующие атрибуты: width=50% align="center" bgcolor="yellow" bordercolor="blue". Просмотрите обновленный документ в браузере.
- Добавьте в тег <table> атрибут: cellspacing=5. Просмотрите обновленный документ в браузере.
- Измените значение атрибута cellspacing на 10, 30 и посмотрите что произойдет с таблицей.
- Добавьте между второй парой тегов <tr>:</tr> теги <td> дядя </td> <td>дедушка</td> Просмотрите полученный документ в окне браузера.
- Добавьте между третьей парой тегов <tr>:</tr> теги <td> дочь </td> <td>внучка</td> Просмотрите обновленный документ в браузере.
- Добавьте в первой паре тегов <tr>:</tr> в теге <td> атрибут colspan=3. Просмотрите полученный документ в окне браузера.
- Добавьте в первой паре тегов <tr>:</tr> в теге <td> еще атрибут align="center" Просмотрите полученный документ в окне браузера.
- Добавьте во второй паре тегов <tr>:</tr> в первом теге <td> атрибут rowspan=2 Просмотрите полученный документ в окне браузера.
- Удалите из второй пары тегов <tr>:</tr> тег <td>внучка</td> Просмотрите полученный документ в окне браузера.
Задание на самостоятельное выполнение.
- Создайте страницу, содержащую расписание Вашей учебной группы. HTML-код должен выглядеть примерно так:
- Сохраните файл под именем schedule_monday.html.
- Используя различные варианты оформления таблиц, создайте файлы с именами schedule_tuesday.html и schedule_wednesday.html, содержащие расписание на вторник и среду, соответственно.
- В файле schedule_friday.html создайте таблицу такого вида:
- Для созданной таблицы установите следующие параметры: расположение на экране — центральное, ширина 550 пикселей. Цвет вертикальной общей ячейки — голубой. Цвет всей таблицы — зеленый. Расположение текста в ячейках — по центру.
- В файле schedule_sunday.html создайте таблицу такого вида:
- Для созданной таблицы установите следующие параметры: расположение на экране — левостороннее, ширина 550 пикселей. Цвет общей горизонтальной ячейки — красный. Цвет всей таблицы — желтый.
- В файле schedule_thursday.html создайте таблицу такого вида:
- Для созданной таблицы установите следующие параметры: расположение на экране — правостороннее, ширина 550 пикселей. Цвет общей ячейки — оранжевый. Цвет всей таблицы — серый.
Часть 4.
Создание гиперссылок в HTML-документе.
Цель работы: Научиться формировать гиперссылки на смежные документы Internet и на метки в текущем документе.
Теоретическая часть: Важнейшим свойством языка HTML является возможность размещения на странице ссылок на другие документы. Возможны ссылки:
- на удаленный HTML файл,
- на некоторую точку в текущем HTML-документе,
- на любой файл, не являющийся HTML-документом.
В качестве ссылки можно использовать текст или графику.
Ссылки в пределах одного документа
Такие ссылки требуют наличие двух частей: метки и самой ссылки. Метка определяет точку, к которой происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяются цветом или подчеркиванием, в зависимости от того, как настроен броузер.
Ссылка должна выглядеть примерно так:
<A HREF="#ПН">Понедельник</A>
Перед именем метки ПН, указывающей куда производится ссылка, ставится символ #. Между символами > и < располагается текст Понедельник, на котором производится щелчок для перехода по ссылке.
Метка должна выглядеть примерно так:
<A NAME="ПН">Понедельник</A>
Ссылки на другой HTML-документ
Ссылки позволяют щелчком по выделенному слову или фразе перейти к другому файлу.
Ссылка должна выглядеть примерно так:
<A HREF="example.html">Пример</A>
После имени файла example.html, указывается между символами > и < текст Пример, по которому производится щелчок для перехода к этому файлу.
Ход работы:
Создание ссылок в пределах одного документа.
- Откройте файл yoga.html с помощью текстового редактора "Блокнот" (Notepad) и поместите в начало страницы следующий код:
- Определите для слова Суббота в расписании метку:
- Определите ссылку для выбранной метки:
- Сохраните файл.
- Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.
- Вы должны увидеть Web-страницу с определенной в ее верхней части ссылкой "Суббота", щелчок мыши по ссылке должен перемещать видимую часть страницы, фокусируя внимание пользователя на расписании на выбранный день.
- Определите ссылки и соответствующие метки для остальных дней недели.
- Продемонстрируйте полученный документ преподавателю.
Создание ссылок на другой HTML-документ.
- Создайте с помошью текстового редактора "Блокнот" (Notepad) файл my_schedule.html и поместите в начало страницы следующий код:
- Сохраните созданный файл в ту же папку, что и файлы schedule_monday.html, schedule_tuesday.html, ... schedule_sunday.html из лабораторной работы N4.
- Определите для слова Понедельник ссылку на внешний документ:
- Сохраните файл.
- Для просмотра Web-страницы используйте броузер Microsoft Internet Explorer.
- Убедитесь, что после щелчка указателем мыши на ссылку Понедельник в окне браузера загружается страница schedule_monday.html.
- Определите ссылки для остальных дней недели.
Создание графической ссылки.
- Сохраните графический файл yoga.gif в ту же папку, что и файл my_schedule.html.
- Внесите изменения в файл my_schedule.html так, чтобы в конце страницы была ссылка на страницу yoga.html. В качестве ссылки используется графический файл yoga.gif:
- Сохраните файл.
- Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.
- Измените созданную ссылку таким образом, чтобы по щелчку мыши браузер загружал страницу yoga.html и фокусировался на метке Суббота.
- Продемонстрируйте полученный документ преподавателю.
Задание карты ссылок.
Элемент IMG позволяет использовать изображения, отдельные части которых связаны со ссылками и позволяют выполнять переходы. Такие изображения называются картами (mар). Для определения полей карты используется атрибут
usemap="#Имя"
Это имя ставится в соответствие со значением соответствующих атрибутов элементов AREA и MAP (см. ниже), которые определяют конфигурацию карты. Задание атрибутов usemap придает элементу IMG свойства, характерные для элемента А, то есть возможность осуществления перехода.
Для определения карты необходимо обязательное совместное использование сразу трёх элементов: AREA, IMG и MAP.
Элемент MAP необходим для общего определения карты. Внутри него определяются области карты при помощи элементов AREA и задается имя карты при помощи атрибута:
name="Имя"
Для каждой области карты должен быть создан свой элемент AREA. Он не имеет конечного тега. Этот элемент должен включать атрибут, определяющий ссылку:
href="http://Адрес"
Атрибут для задания текста, заменяющего изображение карты, не является обязательным:
alt="Текст подсказки"
Атрибуты, определяющие форму области на карте, являются обязательными. Существует три стандартных вида областей: круг (circle), прямоугольник (rect) и многоугольник произвольной формы (polygon).
Для круга необходимо задать координаты центра и радиус (r), выраженные в пикселах. Координаты центра отсчитываются от левого края (х) и верхнего края (у) рисунка. Шаблон для задания круговой области таков:
shape="circle", coords=x, у, r
Для определения области произвольной конфигурации задают координаты (х, у) каждого из углов многоугольника, который точно или приблизительно соответствует по форме этой области:
shape="poly" coords=x1, у1, х2, у2, х3, у3 ...
При определении прямоугольной области задают координаты верхнего левого и правого нижнего углов прямоугольника:
shape="rect" coords=x1, y1, x2, y2
- Сохраните графический файл week.jpg в ту же папку, что и файл my_schedule.html.
- В начало файла my_schedule.html вставьте следующий код:
- Сохраните файл.
- Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.
- Вы должны увидеть Web-страницу с определенным в ее начале графическим изображением дней недели. При щелчке указателем мыши на дни Понедельник и Пятница браузер загружает страницы с соответствующим расписанием.
- Определите ссылки на карте для остальных дней недели.
- Продемонстрируйте полученный документ преподавателю.
| ЛАБОРАТОРНАЯ РАБОТА №6 Часть 1 | ||||||||||||||||||||||||||||
| Тема работы: Создание веб-узла вымышленного магазина спорттоваров Championzone. Изучение программного продукта MS FrontPage 2002. Цель работы: научиться форматировать текст, гиперссылки, добавлять рисунки, анимацию, клипы и файлы, форматировать списки, размещать объекты, создавать формы обратной связи и коллекции картинок, разработать структуру веб-узла. | ||||||||||||||||||||||||||||
Ход работы. Эта лабораторная работа посвящена созданию веб-узла, на котором хранятся сведения о вымышленном магазине спорттоваров Championzone. Веб-узел будет содержать сведения о товарах, коллекцию фотографий, а также список ссылок на другие веб-узлы. При создании веб-узла вам понадобятся графические и текстовые файлы, которые Вы можете найти в папке с лабораторными работами. Общие сведения Этапы выполнения этой работы: · Открытие программы FrontPage · Создание веб-страниц · Работа с текстом и гиперссылками · Вставка рисунков и файлов · Форматирование списков · Размещение объектов · Добавление формы обратной связи · Создание коллекции фотографий · Создание структуры веб-узла · Сохранение результатов Запуск программы Microsoft FrontPage Чтобы запустить программу Microsoft FrontPage, выполните следующие действия. · На панели задач Windows нажмите кнопку Пуск  , выберите в главном меню пункт Программы à Microsoft Office , а затем — пункт Microsoft FrontPage. Если программа FrontPage используется в первый раз, на экран выводится пустая страница, готовая для редактирования. Примечания Если программа FrontPage уже использовалась для редактирования других веб-узлов, автоматически открывается последний из них. Чтобы закрыть веб-узел, в меню Файл выберите команду Закрыть. Обзор рабочей области Программа FrontPage 2002 обладает интегрированным интерфейсом, удобным для создания и редактирования веб-страниц, а также для управления веб-узлами из одного приложения. Панели инструментов и меню совместимы с другими программами Microsoft Office и являются полностью настраиваемыми. Удобные сочетания клавиш позволяют ускорить выполнение часто встречающихся задач, таких как открытие веб-узлов и веб-страниц, печать и многие другие команды. В представленной далее таблице и на иллюстрации выделены наиболее часто используемые элементы интерфейса программы FrontPage 2002. 
|
Совет. Рабочую область можно настраивать, выводя на экран дополнительные панели инструментов или изменяя кнопки этих панелей. В меню Вид выберите пункт Панели инструментов, а затем выберите панели инструментов, которые необходимо отобразить. Чтобы добавить или удалить кнопку с панели инструментов, нажмите кнопку Настройка.Приступая к работе
Эта лабораторная работа посвящена созданию веб-узла, содержащего четыре веб-страницы со сведениями о вымышленном магазине спорттоваров. Создание веб-узла не займет много времени. При создании веб-узла можно постепенно добавлять веб-страницы и сведения. В отличие от напечатанных писем, служебных записок и текстовых документов веб-узлы можно изменять и обновлять даже после их публикации. Имеется возможность добавлять, удалять и изменять текст и рисунки, а также всю страницу целиком в любой момент времени.
В программе FrontPage можно начать работу с ввода текста в пустой документ в представлении Страница. Начало работы посвящено созданию домашней страницы, по умолчанию предлагаемой посетителям веб-узла, как только они первый раз попадают на этот веб-узел.
Создание домашней страницы
Посещение веб-узла начинается с домашней страницы. Эта страница содержит сведения о содержании и теме веб-узла и предназначена для привлечения внимания его посетителей. Домашняя страница содержит также ссылки на другие страницы веб-узла.
1. На пустой странице в представлении Страница введите фразу Добро пожаловать в магазин Championzone! и нажмите клавишу ENTER.
Как и при работе с текстовым редактором, при нажатии клавиши ENTER курсор переходит на новую строку.
2. Затем введите предложение Узнайте больше о наших спортивных товарах, просмотрите фотографии товаров и коллекцию фотографий, посвященных спорту.
3. Нажмите клавишу ENTER.
Большая часть содержимого веб-узла магазина Championzone уже создана. При создании веб-узла в программе FrontPage можно импортировать любые существующие документы непосредственно на веб-страницу, что позволяет избежать их повторного ввода.
Страница должна выглядеть так:
Теперь необходимо добавить картинку на веб-страницу. Картинки могут представлять собой отсканированные фотографии, рисунки или компьютерные графические объекты, созданные с помощью графических редакторов.
В данном примере вставляется картинка с изображением эмблемы FrontPage.
