Введение

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

Рис. в.9. Новое растровое изображение на основе растрового и векторного

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

Векторные изображения создает популярный редактор Adobe Illustrator CS2. Собственный формат файлов Adobe Illustrator имеет расширение .ai, однако редактор позволяет также сохранять работы и в общепринятом векторном формате .eps.

В создании и редактировании растровых изображений нам поможет широко известная программа Adobe Photoshop CS2. Adobe Photoshop дает возможность сохранять растровые изображения в собственном формате .psd, а также во многих общепринятых форматах, из которых наиболее распространены следующие:

• gif — формат, подходящий для изображений с небольшим количеством цветов — до 256; файлы имеют маленький размер, что особенно важно для Web-проектов, поскольку от размера файлов зависит скорость загрузки страниц сайта;
• jpg или .jpeg — формат, подходящий для изображений с миллионами цветов, в т. ч. для фотографий, однако графическая информация при этом несколько сжимается; файлы имеют не очень большой размер, используются в Web-проектах и печатных публикациях стандартного качества;
• tif — специализированный типографский формат, подходящий для изображений с миллионами цветов; файлы имеют достаточно большой размер, позволяют хранить не только непосредственно изображение, но и дополнительную информацию о нем, и используются в печатных публикациях стандартного и высокого качества.

Adobe Illustrator поддерживает экспорт векторных изображений в большинство растровых форматов, в том числе .psd, .gif, .jpg и .tif.

Несколько слов о Web-страницах

Как известно, в основе любых Web-страниц лежит гипертекст — текст, фрагменты которого являются ссылками на другие Web-страницы, документы, видеоролики и пр. Объединенные общей тематикой, структурой и оформлением, Web-страницы образуют сайт, а совокупность всевозможных сайтов и есть хорошо знакомый нам Интернет, называемый нередко Всемирной паутиной или, по-английски, World Wide Web.

Создавать гипертекст позволяет разработанный в начале 90-х годов XX века язык гипертекстовой разметки HTML (HyperText Markup Language). Логика этого языка достаточно проста. Сначала указывается, какой фрагмент Web-страницы мы описываем, например абзац текста, заголовок, иллюстрацию, таблицу. Затем приводится собственно сам этот фрагмент — текст, рисунок, ссылка и пр. А в конце необходимо отметить, что описание фрагмента завершено и можно переходить к следующему фрагменту. Таким образом, элемент html -документа может выглядеть так:

<p>Ромашка</p>

Здесь буква p, заключенная в угловые скобки, показывает, что далее последует текст обычного абзаца, а буква p со слэшем^{2Слэш — принятое в информатике название косой черты "/"; направленная в противоположенную сторону черта "\" называется обратным слэшем.} — что текст абзаца закончен. Web-страница с таким элементом будет отображаться в окне браузера^{3Браузер — программа для просмотра Web-страниц. Наиболее широкое распространение получили браузеры Microsoft Internet Explorer, Mozilla Firefox и Opera} так, как показано на рис. в.10.

увеличить изображение
Рис. в.10. Web-страница в окне браузера

Аббревиатуры, заключенные в угловые скобки, в том числе <p> и </p>, называются тегами. Тег, предшествующий описанию фрагмента Web-страницы, называется открывающим, а завершающий это описание — закрывающим: его сопровождает слэш. Большинство тегов в языке HTML являются парными, т. е. открывающими и закрывающими, однако встречаются и одиночные теги, например <br>, отвечающий за вставку пустой строки.

Вернемся к нашей Web-странице про ромашку, приведенной на рис. в.10. Она, как и любой html -документ, помимо тегов, описывающих фрагменты гипертекста, содержит также некоторый объем служебной информации. Во первых, чтобы браузер мог отличить Web-страницу от обычного текстового документа, в самом начале ее кода открывается, а в самом конце — закрывается тег <html>. Далее: все, что находится внутри этого тега, делится на два больших раздела: head ("голова") и body ("тело"), как показано на рис. в.11. В разделе head указывается все, что не будет отображаться непосредственно в окне браузера: название страницы, ключевые слова, по которым ее сможет найти поисковая система (например, Яндекс или Гугл ), кодировка (кириллица, латиница, иероглифы и пр.), а также некоторые другие данные. Раздел body, напротив, содержит то, что пользователь увидит в браузере, — текст, графику, ссылки.

Рис. в.11. Структура html-документа

Итак, ниже приведен html -код Web-страницы про ромашку. Единственный непарный тег здесь — <meta ...> ; в нем как раз и устанавливается кириллическая кодировка (windows-1251):

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>

<body>
<p>Ромашка</p>
</body>

</html>

Тег <title> отвечает за название Web-страницы, которое отображается в заголовке окна браузера. На рис. в.10 мы видим именно эту фразу — Untitled Document. Поменяем ее, например

<title>Страница о ромашках</title>,

и заголовок окна браузера станет другим ( рис. в.12).

увеличить изображение
Рис. в.12. Web-страница с новым названием

На теге <title> раздел head заканчивается; за ним следует раздел body. Пока в нем только один элемент — абзац <p>Ромашка</p>. Чтобы продолжить оформление страницы, рассмотрим еще несколько часто употребляемых тегов, как парных, так и одиночных:

После использования этих тегов наша Web-страница может стать такой как, например, на рис. в.13.

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Страница о ромашках</title>
</head>

<body>
<h1>Ромашка</h1>
<p>Этот невысокий полевой цветок с желто-белыми соцветиями, наверняка знакомый
каждому из нас, великолепно передает неповторимую атмосферу русского лета.</p>
<p><img src="flowers.jpg"></p>
<p>Ромашковое поле</p>
<br>
<p>В настоящее время известно около 350 <a href="http://www.cvetki.ru/10.php">
видов ромашек</a>, из которых более 100 произрастает в России.</p>
</body>

</html>

увеличить изображение
Рис. в.13. Web-страница с разными элементами оформления

Стоит обратить внимание на то, что даже если в тексте абзаца использовать более одного пробела между словами или намеренно поместить два идущих подряд слова на разных строках кода, это никак не скажется на отображении страницы в браузере. Для переноса текста на новую строку в пределах одного абзаца необходимо использовать упомянутый выше тег <br>, а для добавления второго и последующих пробелов между словами — комбинацию &nbsp;. Так, следующий фрагмент html -кода приведет к появлению в окне браузера текста, показанного на рис. в.14:

<p>В настоящее время известно около

350 видов ромашек.</p>
<p>В настоящее время известно около 350 видов ромашек.</p>
<p>В настоящее время известно около 350 видов &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
ромашек.</p>
<p>В настоящее время известно около
<br>350 видов ромашек.</p>

увеличить изображение
Рис. в.14. Форматирование абзацев

Количество тегов языка HTML измеряется сотнями. Некоторые из них, такие как рассмотренные нами выше, определяют тип фрагмента Web-страницы (абзац, ссылка, изображение), другие позволяют изменять цвет, размер, начертание и другие параметры текста. При необходимости мы будем рассматривать новые теги в последующих уроках, однако все они будут посвящены большей частью редактору Macromedia Dreamweaver 8, который позволяет значительно упростить и сделать более эффективной работу с Web-страницами, сведя к минимуму ручное редактирование кода. В то же время начальные знания в области HTML также окажутся далеко не бесполезными.

Заинтересовавшимся читателям можно порекомендовать изучить основы HTML самостоятельно — с помощью многочисленных книг или Интернет-ресурсов. В частности, простой и в то же время достаточно подробный курс предлагает Интернет-Университет информационных технологий (http://www.intuit.ru/department/internet/htmlbasics/).