1.2.2 Подготовка и использование графических файлов

Графические иллюстрации являются в большинстве случаев, неотъемлемой частью Web-документа. Для использования графических файлов используются два формата GIF и JPEG. Формат GIF ориентирован на медленные сети передачи. Он обеспечивает поддержку изображений, использующих до 256 цветов. В настоящее время известны две версии GIF87 и GIF89а.

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

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

графической информации:

-картинки для обоев документов,

-кнопки и заголовки,

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

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

Например: <IMG SRC= “Ris1.gif”>

При отображении рисунка браузер по умолчанию использует его реальные размеры. Атрибуты WIDTH= и HIGHT= задают ширину и высоту рисунка в пикселях.

Например:

<IMG SRC= “Ris2.jpg” WIDTH=”50” HEIGHT=”40”>

Для указания способа взаимодействия рисунка с текстом используется атрибут ALIGN=, который может принимать значения:

BOTTOM-нижняя граница изображения совмещается с основанием

текстовой строки;

MIDDLE- середина изображения совмещается с серединой текстовой

строки;

TOP-верхняя граница изображения выравнивается по верхнему краю

текстовой строки;

LEFT-изображение размещается у левого края страницы;

RIGHT – изображение размещается у правого края страницы, а текст размещается слева от него.

Например:

<IMG SRC = “ris3.gif” ALIGN = BOTTOM>

Фоновый рисунок (обои) задается при помощи атрибута BACKGROUND =, флага < BODY >. Значением этого атрибута должен быть абсолютный или относительный адрес URL для файла с изображением. Например:

< BODY BACKGROUND = “ waves.gif” TEXT = “YELLOW”>

Картинки, которые можно использовать в качестве фона, размещены на WEB – сервере http://www.design.ru/free/backgrounds/ .

Рассмотрим использование рисунков из картинной галереи ClipArt. Для создания файла с рисунком из этой коллекции вызывается программа WORD 2000 или WORD 20002 и после ее открытия выполняются команды Вставка ►Рисунок ►Картинки. Рассмотрим более подробно вставку картинки из коллекции ClipArt при использовании программы WORD 20002. В появившейся диалоговой панели Вставка картинки в разделе Поиск клипа в окно Искать текст вводится тема картинки, например, Люди. Нажимается кнопка Найти. Вид диалоговой панели изменяется. На ней появляются образцы картинок на указанную тему. После щелчка левой клавиши мыши по одной из картинок она вставляется в документ Word. Нажатие правой клавиши мыши при наведении курсора на рисунок вызывает появление контекстного меню. Пункт меню Границы и заливка позволяют создать рамку вокруг рисунка, выбрать тип рамки, ее цвет и ширину. Можно также вставить горизонтальную линию выбранного типа. Закрывается диалоговая панель Вставка картинки. Для этого следует щелкнуть по крестику в правом верхнем углу панели. Картинка сохраняется после выполнения команд Файл ► сохранить как веб-страницу. В появившейся диалоговой панели Сохранение документа указывается путь к файлу с картинкой. Файл следует сохранить в личной папке студента. Указывается имя файла, например, Ris1. Тип файла устанавливается Веб-страница. После нажатия на клавишу Сохранить в личной папке студента появляется папка с именем Ris1.files. Эта папка содержит файл с именем image002.gif, в котором сохранен рисунок. На этот рисунок следует ссылаться при вставке рисунка в Веб-страницу. Для этого следует вставить строку

< IMG SRC=”RIS1.files/image002.gif” ALIGN=”Middle”>

Расположение рисунка принято посредине страницы.

Лабораторный практикум по теме, часть 1.

Задание 1 . «Создание простейшей WEB – страницы»

Цель занятия: Научиться создавать простейшую WEB – страницу.

Выполнение:

1. Запустите текстовый редактор Блокнот, последовательно выполняя команды Пуск > Программы > Стандартные > Блокнот.

2. Введите текст, согласно следующему ниже Листингу 1.

Листинг 1 Код первой программы на языке HTML

< HTML >

< HEAD >

< TITLE > Первая WEB - страница студента (фамилия)

< / TITLE>

< / HEAD >

< BODY >

Первая WEB – страница создана (дата) и будет сохранена в папке (имя) под именем Zadanie1.htm

< / BODY >

< / HTML >

Для создания фона (обоев) флаг BODY следует записать так

< BODY bgcolor=blue text=red>,

или

< BODY BACKGROUND =2.jpg text=yellow >.

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

3. Сохраните документ в своей папке под именем Zadanie1.htm и второй раз под именем Zadanie1.txt.

4. а) Дважды щелкните по значку с именем Zadanie1.htm или :

б) Запустите программу Internet Explorer при помощи команд Пуск ► Программы ► Internet Explorer или при помощи значка этой программы, который располагается на рабочем столе. Затем активизируйте команды Файл ► Открыть. Щелкните левой кнопкой мышки при расположение курсора на кнопке Обзор. Откройте файл Zadanie1.htm, который должен находиться в папке с Вашей фамилией.

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

< TITLE > и < / TITLE >, где отображается содержимое основного документа, расположенное между флагами < BODY > и < / BODY >.

Задание 2. «Изучение приемов форматирования абзацев»

Цель занятия: Научиться создавать простейшую WEB – страницу с применением приемов форматирования абзацев.

1. Скопируйте в свою папку файл с именем Zadanie1.txt.

2. Откройте этот файл и удалите текст между флагами < BODY > и

< / BODY >.

3. Заголовок первого уровня заключается между флагами < H1 > и < / H1 >, заголовок второго уровня заключается между флагами < H2 > и < / H2 >. Отдельный абзац вводится с флага < p >, как это показано в тексте приводимого ниже задания.

4. После флага < BODY > введите новый текст.

< H1 > 1. Дополнительные средства подготовки документов < / H1 >

Отделите последующий текст зеленой горизонтальной линией при помощи флага <HR>, записав строку

<HR SIZE=5 WIDTH=80% ALIGN=CENTER COLOR=“GREEN”>

Далее введите:

< H2 > 1.1. Гиперссылки< / H2 >

В WORD 97/2000 автоматически оформляют пути к файлам с их именами, а также адрес Web – страниц и электронной почты в качестве гиперссылок.

< p > Пример создания гипертекстовой ссылки рассмотрен выше. Ниже приведен пример создания гиперссылки на файл Zadanie1.htm, который находится на жестком диске локального компьютера.

5. Отделите этот абзац от остального текста красной горизонтальной линии при помощи флага < HR >, записав строку

<HR SIZE=5 WIDTH=80% ALIGN=CENTER COLOR= “RED”>.

6. Введите еще один абзац текста, начав его с флага < p > Например:

Построение маркированного и нумерованного списков.

7. Постройте маркированный список. Для этого введите:

<UL>

<LI> Задание III.1

<LI> Задание III.2

<LI> Задание III.3

</UL>стройте нумерованный список. Для этого введите:

<OL>

<LI> Задание III.1 -простая ВЕБ-страница

<LI> Задание III.2 -ВЕБ-страница с элементами форматирования

<LI> Задание III.3 - включение таблицы в ВЕБ-страницу

</OL>

8.Отделите этот абзац полосой желтого или зеленого цвета.

9. Вставьте из коллекции ClipArt рисунок. Порядок действий описан выше в разделе 1.3.2. Расположите рисунок с правой стороны страницы.

10. Вставьте гиперссылку на файл с именем Zadanie1.htm. Для этого после рисунка вставьте строки

<p> Активизируйте гиперссылку

<A HREF=”Zadanie1.htm”> Zadanie1</A>

11. Сохраните этот документ под именем Zadanie2.htm и второй раз под именем Zadanie2.txt.

12. a) Запустите обозреватель Internet Explorer (Пуск ► Программы ► Internet Explorer). Задайте команду Файл > Открыть. При помощи кнопки Обзор откройте файл Zadanie2.htm, либо:

б) Дважды щелкните по значку с именем Zadanie2.htm.

12. Посмотрите отображение этого файла. Установите связь между элементами кода HTML и фрагментами документа, отображаемого на экране. Текст Zadanie1будет выделен как гиперссылка. Активизация этого текста вызывает появление файла Zadanie1.

Задание 3 . «Создание таблиц»

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

1. Скопируйте в свою папку файл с именем Zadanie1.txt.

2. Удалите в скопированном файле весь текст, находящийся между флага-

ми <BODY> и </BODY>. Последующий текст будет вводиться после флага <BODY>. В данном упражнении используется список номеров телефонов.

3. Введите флаг <TABLE BORDER= “10” WIDTH= “100%”> .

4. Введите строку <CAPTION= “TOP”> Список телефонов </ CAPTION>

5. Первая строка таблицы содержит заголовки столбцов. Введите :

<TR BGCOLOR= “YELLOW” ALIGN= “CENTER”>

<TH> СЛУЖБА <TH> Номер телефона.

6. Введите:

<TR> <TD> Курс валют ЦБ РФ </TD> <TD> 587219 </TD>

<TR><TD> Медицинский центр РАМН </TD> <TD> 9648401</TD>

<TR> <TD> Образование в Москве </TD> <TD> 9650009 </TD>

7. Завершите таблицу флагом </TABLE>

8. Сохраните документ под именем Zadanie3.htm и второй раз под именем Zadanie3.txt.

9. Запустите обозреватель Internet Explorer (Пуск ►Программы ► Internet

Explorer )

10. Дайте команду Файл ► Открыть. Щелкните по кнопке Обзор и открой-

те файл Zadanie3.htm, либо дважды щелкните левой клавишей мыши при расположении указателя курсора на значке с именем Zadanie3.htm.

11.Изучите, как созданная таблица отображается в программе Internet

Explorer.

Задание 4 . «Создание прайс-листа средствами языка HTML»

Средствами языка HTML создайте прайс-лист.

Ниже показан Листинг 2 с кодом программы на языке HTML.

Листинг 2 Код программы прайс-листа на языке HTML

<HTML>

<HEAD>

<TITLE> прейскурант компании ООО"Ф-Центр" </TITLE>

</HEAD>

<BODY>

<H1> ООО"Ф-Центр" </H1>

<HR>

<H2> Москва, ВВЦ, павильон №74, тел. 785-1-785

<P> наш адрес в Интернет e-mail: f-center@mtu-net.ru

</H2>

<HR SIZE=10 WIDHT=80% ALIGN=CENTER COLOR="GREEN">

<TABLE BORDER=10 WIDHT=100%>

<CAPTION="TOP"> компьютер </CAPTION>

<TR BGCOLOR="YELLOW" ALIGN=CENTER>

<TH> модель <TH> конфигурация <TH> цена

<TR> <TD> M700</TD>

<TD> AMD DURON-700/DIMM 128/10WD/MIDI ATX A312 </TD>

<TD> 9294 </TD>

<TR> <TD> M1400 </TD>

<TD> AMD ATHLON-1400/DIMM 128/10WD/MIDI ATX A312 </TD>

<TD> 11815 </TD>

<TR> <TD> M2 735 CEL </TD>

<TD> CELERON-733/DIMM 128/10WD/MIDI ATX A312 </TD>

<TD> 10105 </TD>

<TR> <TD> M2 1000 CEN </TD>

<TD> CELERON-1000/DIMM 128/10WD/MIDI ATX A312 </TD>

<TD> 10340 </TD>

<TR> <TD> M3 866 </TD>

<TD> PENTIUM 3 866/DIMM 128/10WD/MIDI ATX A312 </TD>

<TD> 11906 </TD>

<TR> <TD> M 4 P4 1,8 GHZ </TD>

<TD> PENTIUM 4 1,8 GHZ/DIMM 128/10WD/MIDI ATX A312 </TD>

<TD> 18227 </TD>

</TITLE>

</BODY>

</HTML>

Вставьте в прайс-лист рисунок на соответствующую тему из коллекции Интернет.

Варианты задания.

Вариант1.

Видеокарты
Наименование	Розн.цена
[nVidia GT 430] 1Gb DDR3 | PNY GMGT43WN2F1FH-SB	1 822 р.
[nVidia Quadro FX 380] 256Mb | PNY VCQFX380-PCIE-PB	4 234 р.
[nVidia Quadro FX 380] 256Mb | PNY VCQFX380-PCIEBLK-1	4 270 р.
[nVidia Quadro NVS 290] 256Mb DDR2 | PNY VCQ290NVS-PCX16-PB	4 469 р.

Вариант 2

Ноутбуки. Lenovo
Наименование	Розн.цена
Планшетный компьютер Lenovo IdeaPad Tablet A1-7W16P Pink (59306932)	9 441 р.
Мини ноутбук (нетбук) Lenovo IdeaPad S100-N451G320S (59309768) Black	9 654 р.
Ноутбук Lenovo B570e-B802G250D (59313324)	12 624 р.
Ноутбук Lenovo B575-E302G320D	12 730 р.
Ноутбук Lenovo G570G-B802G320D (59313117)	13 260 р.

Вариант 3

Периферия. Мониторы. Viewsonic

Наименование	Розн.цена
18.5" ViewSonic VA1931wa-2 Black	3 412 р.
18.5" ViewSonic VA1931wa-LED Black	3 519 р.
18.5" ViewSonic VA1931wma-2 Black	3 549 р.
19" ViewSonic VA1932WA black	3 885 р.
17" ViewSonic VA705b black	3 936 р.
20" ViewSonic VA2014W	4 343 р.

Вариант 4

Жесткие Диски 2,5”
Наименование	Розн.цена
160Gb Seagate | ST160LT015 | SATA | 5400rpm	2 361 р.
250Gb Hitachi | HTE545025B9A300 | SATA | 5400 rpm	2 429 р.
250Gb Toshiba | MK2559GSXP | SATA | 5400rpm	2 429 р.
250Gb Seagate | ST250LT020 | SATA | 5400rpm	2 464 р.
250Gb WD Scorpio Black | WD2500BEKT | SATA | 7200rpm	2 563 р.

Вариант 5

Материнские платы для AMD Socket AM3
Наименование	Розн.цена
Biostar N68S3B Socket AM3, GF 7025, 2*DDR3, PCI-E+SVGA, ATA,SATAII+RAID,5.1ch, COM, LAN, uATX	1 265 р.
ECS MCP61M-M3 Socket AM3, GF 6100, 2*DDR3, SVGA+PCI-E,SATAII+RAID,6ch, LAN, mATX	1 311 р.
ECS A780LM-M2 Socket AM3, AMD 760G, 2*DDR3, SVGA+PCI-E, SATAII+RAID, 6ch, GLAN, mATX	1 387 р.
Foxconn M61PML-K Socket AM3, nVIDIA MCP61P, 2*DDR3, SVGA+PCI-E, ATA, SATAII+RAID, 6ch, COM, GLAN, mATX	1 401 р.

Вариант 6

Процессоры Intel® Xeon® Наименование Розн.цена Intel® Xeon® X3430 | 2.40GHz | Socket 1156 | 8MB 6 124 р. Intel® Xeon® Processor E5603 | 1.60GHz | Socket LGA1366 | 4MB 6 140 р. Intel® Xeon® Processor E5606 | 2.13GHz | Socket LGA1366 | 8MB 6 687 р. Intel® Xeon® Quad Core E5506 | 2.13GHz | Socket LGA1366 | 4MB 6 818 р. Intel® Xeon® X3430 | 2.40GHz | Socket 1156 | 8MB | BOX 6 918 р.
Вариант 7 Звуковые платы ASUS
Наименование	Розн.цена
ASUS Xonar DG PCI Low Profile	1 011 р.
ASUS Xonar U3 for NB USB2.0 Black	1 182 р.
ASUS Xonar U1 Metal Silver	1 686 р.
ASUS Xonar DS PCI	1 822 р.
ASUS HP-100U Black (внешняя USB звуковая карта + 3.5 мм наушники)	2 023 р.
ASUS Xonar D1 PCI	2 194 р.