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

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

Нумерованный список задается с помощью тегов . Как и в маркированном списке, каждый пункт задается тегом

ключевое слово TAPE.

TAPE=1 – Стандартная нумерация(1,2,3,4,5, …)

TAPE=A – Прописные буквы(A, B, C, D, …)

TAPE=a – Срочные буквы(a, b, c, d, …)

TAPE=I – Римские цифры(I, II, III, IV, …)

TAPE=i – Строчные римские цифры(i, ii, iii, iv, …)

Списки определений выглядят несколько иначе, чем другие типы списков. Для описания каждого пункта списка в этом случае применяется два тега, а не один тег

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

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

   Воспроизведите все вышеперечисленные списки

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

   Для задания таблиц используется целый ряд тегов. Теги

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

   
   
   

   Теги HTML для построения таблиц:

   Теги Описание

   и Эти теги охватывают таблицу. Тег

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

   выводится в виде заголовка. Для задания заголовка можно также применять теги и .

   Теги отображают текст заголовками строки или столбца немного более крупным полужирным шрифтом.

   и Теги определяют каждую строку таблицы. Тег необязателен, но он делает Ваш HTML-код более полным и понятным.

   Эта пара тегов отделяет текст каждой ячейки таблицы.

   Создайте файл, в котором постройте таблицу из пяти строк и пяти столбцов.

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

   и Текст, отмеченный этими тегами,

   и
   и

   следующим образов:

   Кроме ключевого слова BGCOLOR, существуют и другие способы управлять цветом:

   BORDERCOLOR Изменят цвет сетки таблицы

   BORDERCOLORDARK/ Используется для изменения сетки с

   BORDERCOLORLIGHT дополнительным эффектом трехмерности

   Измените цвет сетки таблицы с эффектом трехмерности .

   Урок 12-13. Использование графики

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

   Чтобы поместить изображение на Web-странице, нужно знать, как применять тег . Введите тег и ключевое слово SRC= для указания, какую графику загрузить.

   

   Вводя этот тег, обратите внимание, что файл должен находиться в той же папке, что и Ваш HTML-файл.

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

   Существуют два способа размещения графических изображений на странице:

   • вставка отдельных картинок;
   • заполнение фона картинкой.

   В любом случае графическое изображение берется из файла.

   Вставка графических изображений

   Вставка на страницу графического изображения из файла графического формата производится с помощью тэга (от англ, image - изображение) с указанием адреса файла в качестве аргумента атрибута SRC:

   < IMG SRC = "адрес_графического_файла" >

   Адрес графического файла - этолибо URL-адрес, либо имя файла, возможно, с указанием пути. Например, для показа графического файла logotip.jpg следует написать тэг:

   < IMG SRC = "logotip.jpg" >

   Для увеличения скорости передачи графического изображения в тэге можно использовать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать два графических файла: один (например, пусть это файл logotip.jpg) содержит картинку, полученную с высоким разрешением, а другой (например, logotip.gif) - картинку, полученную с низким разрешением. Тогда тэг:

   < IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

   …предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере приема заменить его файлом logotip.jpg.

   Другой способ ускорения загрузки графики заключается в задании размеров прямоугольной области, в которой будет размещено графическое изображение, с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Заметим, что браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения:

   < IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

   Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN тэга с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSРАСЕ для верхнего и нижнего полей и НSPACE для боковых полей в тэге . Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тэг
   .

   Следующий тэг задает обтекание графики из файла logotip.jpg справа (картинка будет находиться слева от текста):

   < IMG SRC = "logotip.jpg" ALIGN = LEFT >

   Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT :

   < IMG SRC = "logotip.jpg" ALIGN = RIGHT >

   Чтобы задать поля вокруг картинки, надо написать тэг вида:

   < IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

   Здесь числа 20 и 10 определяют размеры полей.

   Рассмотрим пример совместного использования графики и текстов. Откройте Блокнот (текстовый редактор Notepad) Windows. Напишите в нем HTML-код с использованием рассмотренных выше тэгов. Ниже приводится программа, выводящая некоторый текст и графику. В качестве графического файла можно использовать любой из имеющихся у вас файлов. Здесь используется файл logotip.gif.

   < HTML >

   < HEAD >

   < TITLE > Упражнение 1 < / TITLE >

   < / HEAD >

   < BODY BGCOLOR = "YELLOW" >

   < IMG SRC = "logotip.gif " ALIGN = LEFT >

   < H1 > Текст обтекает графику справа < / H1 >

   Рис. 657 . Текст обтекает картинку справа

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

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

   Форматы файлов

   Широкое распространение для веб-графики получили два формата - PNG и JPEG. Их многофункциональность, универсальность, небольшой объём исходных файлов при достаточном для сайта качестве, сослужили им положительную службу, фактически определив их как стандарт веб-изображений. Кроме них на сайтах применяются форматы GIF и SVG.

   Формат PNG-8

   PNG-8 (Portable Network Graphics, переносимая сетевая графика) - свободный формат созданный для замены GIF, в котором долгое время использовались проприетарные алгоритмы.

   Особенности

   • Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своем названии цифру восемь. При этом можно выбирать, сколько цветов будет сохраняться в файле - от 2 до 256.
   • В отличие от GIF, не отображает анимацию.

   Область применения

   Формат PNG-24

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

   

   Особенности

   • Использует примерно 16,7 млн. цветов в файле, из-за чего этот формат применяется для полноцветных изображений.
   • Поддерживает многоуровневую прозрачность, это позволяет создавать плавный переход от прозрачной области изображения к цветной.
   • Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пиксели в изображении неизменными, если сравнивать с другими форматами, то у PNG-24 конечный объём графического файла получается наибольшим.

   Область применения

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

   Формат JPEG

   JPEG (Joint Photographic Experts Group, объединённая группа экспертов-фотографов) - популярный формат графических файлов, широко применяемый при создании сайтов и для хранения фотографий. JPEG поддерживает 24-битный цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может внести искажения в изображение, особенно содержащий текст, мелкие детали или чёткие края. Формат JPEG не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пиксели заполняются указанным цветом.

   

   Особенности

   • Количество цветов в изображении - примерно 16,7 миллионов, что вполне достаточно для сохранения фотографического качества изображения.
   • Основная характеристика формата - «качество», позволяющее управлять конечным размером файла. Качество измеряется от 0 до 100, чем выше значение, тем лучше получается картинка, но и увеличивается объём файла.
   • Поддерживает технологию, так называемый прогрессивный JPEG, в котором версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.

   Область применения

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

   Формат GIF

   GIF (Graphics Interchange Format, формат для обмена изображениями) - формат графических файлов, широко применяемый при создании анимированных изображений. GIF использует 8-битный цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.

   

   Особенности

   • Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры. Файл в формате GIF может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет проглядывать сквозь «дыры» в изображении.
   • Поддерживает покадровую смену изображений, что делает формат популярным для создания простой анимации.
   • Использует свободный от потерь метод сжатия

   Область применения

   Текст, логотипы, иллюстрации с чёткими краями, анимированные рисунки, изображения с прозрачными участками, баннеры.

   Формат SVG

   SVG (Scalable Vector Graphics, масштабируемая векторная графика) - векторный формат, изображение в котором состоит не из пикселей, а из объектов и кривых. По этой причине не годится для растровых фотографий, состоящих из точек, но прекрасно подходит для иллюстраций, содержащих отчётливые контуры.

   Особенности

   • Изображения в формате SVG можно сколь угодно масштабировать без потери качества картинки.
   • Объём файла получается обычно небольшим.
   • Поддерживает анимацию и интерактивность.

   Область применения

   Текст, логотипы, иллюстрации с чёткими краями.

   Добавление изображения

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

   " alt="<альтернативный текст>">

   Оба атрибута src и alt являются обязательными.

   Атрибут src задаёт путь к графическому файлу, для его указания можно использовать как абсолютный, так и относительный адрес. Далее рассмотрим несколько разных способов, как определить путь к изображению для размещения его на веб-странице. В качестве примера возьмём файл с именем target.png , который хранится в папке images корня сайта.

   http://example.ru/images/target.png
   Если адрес начинается с протокола (http:// или https://), то речь идёт об абсолютном адресе. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.

   //example.ru/images/target.png
   Это абсолютный адрес изображения без указания протокола. Браузер самостоятельно подставит нужный протокол, на котором работает сайт (http:// или https://). Учтите, что такого рода адреса не работают на локальных веб-страницах, а только в Интернете под управлением веб-сервера.

   /images/target.png
   Если в начале адреса стоит косая черта (/), это означает, что папка images располагается в корне сайта. Одна папка может быть вложена в другую, поэтому путь может увеличиться. К примеру, /assets/images/target.png означает, что папка assets располагается в корне сайта, в ней хранится папка images , внутри которой расположен файл target.png .

   ../images/target.png
   Две точки с косой чертой в начале адреса (../) говорят о том, что папка с изображением находится на уровень выше в структуре папок относительно HTML-документа. На рис. 1 показан файл source.html , в который требуется вставить рисунок target.png .

   

   Рис. 1. Размещение файлов

   images/target.png
   Имя папки без всяких точек в начале адреса сообщает, что HTML-документ и папка с изображением находятся на одном уровне (рис. 2).

   

   Рис. 2. Размещение файлов

   target.png
   Единственное имя файла говорит о том, что изображение и веб-страница располагаются в одном месте (рис. 3).

   

   Рис. 3. Размещение файлов

   В примере 1 показано несколько способов добавления рисунка на веб-страницу.

   Пример 1. Добавление изображений

   

   

   

   

   Альтернативный текст

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

   Атрибут alt должен описывать содержимое изображения, а в случае, если картинка выполняет декоративную функцию и не несёт какого-либо содержательного смысла, то оставляем alt пустым (пример 2).

   Пример 2. Использование alt

   

   

   Если для изображений требуется видимая подсказка, то следует воспользоваться глобальным атрибутом title , который можно добавлять к любому элементу, а не только к картинкам. При наведении курсора на изображение появится текст, содержащий значение атрибута title (пример 3).

   Пример 3. Использование title

   

   Вид всплывающей подсказки зависит от конкретного браузера и её нельзя изменить. На рис. 2 показана всплывающая подсказка в браузере Firefox.

   

   Рис. 2. Вид всплывающей подсказки

   Изменение размеров рисунка

   Для изменения размеров рисунка у элемента предусмотрены атрибуты width (ширина) и height (высота). В качестве значения используются пиксели или проценты. В примере 4 показано добавление этих атрибутов к .

   Пример 4. Размеры рисунка

   

   
   

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

   • зарезервировать место под картинку;
   • уменьшить размер больших фотографий;
   • улучшить качество изображения для дисплеев Retina.

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

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

   Дисплеи Retina отличаются высокой плотностью пикселей и детализацией изображений, поэтому обычные картинки на них выглядят чуть размытыми. Чтобы улучшить их качество, картинки готовят удвоенного размера. К примеру, если на веб-странице требуется фотография шириной 400 пикселей, то мы берём фотографию шириной 800 пикселей, но в значении атрибута width оставляем ширину 400 пикселей.

   Атрибуты width и height не обязательно должны идти совместно. Если какой-то из этих атрибутов не указан, то браузер самостоятельно подставит нужное значение исходя из пропорций изображения.

   

   За счёт того, что мы самостоятельно подставляем ширину и высоту картинки, мы можем намеренно искажать её пропорции, вытягивая картинку по вертикали или горизонтали.

   

   Кроме пикселей в качестве размеров допустимо использовать процентную запись. В таком случае ширина задаётся относительно родительского элемента.

   

   С высотой в подобных случаях есть сложности, потому что высота картинки в процентах считается только в том случае, когда высота её родителя определена явно. Если высота родительского элемента никак не указана, то запись вида height="100%" игнорируется.

   Цели урока:

   расширение и углубление представлений о языке гипертекстовой разметки HTML;

   формирование умений создавать веб-страницы с графикой;

   развитие логического мышления, умений анализировать, сравнивать, систематизировать, обобщать.

   Тип урока: урок усвоения новых знаний и умений .

   Учащиеся должны уметь: создавать в редакторе Блокнот веб-страницы
   с графикой.

   Программное и методическое обеспечение урока: редактор Блокнот ;
   учебное пособие «Информатика 11», § 3 ( п. 3 .2) ; приложения к уроку 6;
   ЭСУ W eb11 6 .

   1. Проверка знаний предыдущего урока (репродуктивный метод обучения, индивидуальная и фронтальная формы работы).

   Выполнение индивидуальных заданий на компьютере: оформить текст на предложенной учителем веб-странице в соответствии с рисунком упражения к §3 ( п.3 .1) пособия или ЭСУ W eb11-5 .

   Предложите у чащимся ответить на вопросы: В чем заключается гипертекстовая разметка документов? Какова структура HTML-документа? Каким тегом задается абзац? Переход на новую строку? Какими тегами задается полужирное и курсивное начертание символов? Как задать фон и цвет текста всей веб-страницы? Какими тегами и атрибутами задается шрифт, размер и цвет символов? Возможно использование теста (приложение к уроку 6; ЭСУ W eb11 5).

   2. Актуализация знаний и мотивация учащихся на изучение нового материала ( фронтальная форма работы).

   Перед началом объяснения нового материала в форме фронтальной беседы обсудите роль, которую в оформлении веб-страниц играют графические объекты: фотографии, рисунки, фоновые изображения (обои), разделительные линии. Они не только делают страницы более привлекательными и наглядными, но во многих случаях являются основными источниками информации. Продемонстрируйте примеры ( ЭСУ W eb11 6 ).

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

   3. Объяснение нового материала (объяснительно -иллюстративный метод обучения в сочетании с частично-поисковым, фронтальная форма работы ).

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

   Далее продемонстрируйте действие некоторых атрибутов тега < img >. Так, высоту и ширину отображаемого на экране рисунка задают значениями атрибутов height и width , а толщину рамки вокруг изображения значением атрибута border . В классах с низким уровнем подготовки это делает учитель с помощью видеопроектора. При достаточной подготовленности учащихся можно предложить им провести самостоятельное исследование с последующим фронтальным обсуждением результатов.

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

   С помощью атрибута alt можно задать текст сообщени я , которое будет выводиться вместо рисунка, если он не найден или показ отключен в браузере. Кроме того, это сообщение показывается в виде подсказки, когда курсор мыши подводится к рисунку. Продемонстрировать полезность явного задания атрибутов height , width и alt можно, сняв установленный по умолчанию флажок Показывать изображения на вкладке Дополнительно диалогового окна Свойства обозревателя.

   В заключение продемонстрируйте использование изображения из файла в качестве фона веб-страницы с помощью атрибута background тега < body >. ополнительно предложите создать поздравительную открытку (пример 3 из §3 ( п.3.2) пособия , ЭСУ W eb11 6 .

   5. Подведение итогов урока

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

   6. Домашнее задание

   Изучить материал § 3 ( п. 3 .2 ) учебного пособия , ответить на вопросы 1 3, подготовиться к практическому выполнению одного из заданий упражнения 2

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

   Разместим на домашней странице создаваемого нами Web-узла графическое изображение из библиотеки Clip Art, входящей в состав Microsoft Office. Для этого выполните следующие действия:

   1. Откройте созданный Web-узел.
   2. Откройте домашнюю страницу, дважды щелкнув мышью на имени файла index.htm в панели Список папок (Folder List).
   3. В меню Вставка (Insert) выберите команду Рисунок Картинки (Clip Art). В окне программы FrontPage появляется панель Вставка картинки (Insert Clip Art).
   4. Выберите на этой панели команду Коллекция картинок (Media Gallery). Открывается диалоговое окно, позволяющее выбрать графическое изображение (рис. 15.8).

   Рис. 15.8.

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

   1. Панель Список коллекций содержит папки вашего компьютера с мультимедийными файлами, а также файлы картинок библиотеки Clip Art. Откройте папку интересующей вас категории картинок. В рабочей области окна появятся изображения данной категории. При установке курсора на изображение видна подсказка с указанием имени, размера изображения и файла, в котором он содержится, а также формата графического изображения (рис. 15.9).

   1. Нажмите кнопку со стрелкой с правой стороны выбранного изображения. Появляется контекстное меню.
   2. Выберите в контекстном меню команду Копировать (Сору).
   3. Перейдите на Web-страницу и вставьте на нее из буфера обмена изображение, используя для этого любое удобное средство. Например, нажмите комбинацию клавиш +.
   4. Сохраните Web-страницу с размещенным в ней графическим изображением, нажав кнопку Сохранить (Save) на стандартной панели инструментов. Появляется диалоговое окно Сохранение внедренных файлов (Save Embedded Files) (рис. 15.10), предлагающее сохранить размещенное на странице изображение в папке images Web-узла под именем, с которым файл находился в библиотеке. Это окно содержит кнопки следующего назначения:
      • Переименовать (Rename) - позволяет переименовать файл.
      • Сменить папку (Change Folder) - открывает диалоговое окно Смена папки (Change Folder), содержащего папки текущего Web-узла, позволяя выбрать иную папку для сохранения файла.
      • Действие (Set Action) открывает диалоговое окно Задание действия, позволяющее изменить значение Сохранить (Save) столбца Действие (Action) на Не сохранять (Don"t Save). При выборе значения Сохранить рисунок сохраняется в указанной вами папке Web-узла, в противном случае на Web-странице останется ссылка на изображение, находящееся в библиотеке Clip Art.

   Область Рисунок (Picture preview) показывает размещаемое изображение. Установив в диалоговом окне Сохранение внедренных файлов нужные параметры, нажмите кнопку ОК. Графический файл будет сохранен в указанной вами папке Web-узла.

   

   Рис. 15.10.

   Размещение графического изображения из файла

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

   • В меню Вставка (Insert) выберите команду Рисунок (Picture), а затем в открывшемся подменю - опцию Из файла (From File)
   • Нажмите кнопку Добавить рисунок из файла (Insert Picture From File) на стандартной панели инструментов
   • Нажмите кнопку Добавить рисунок из файла (Insert Picture From File) на панели инструментов Рисунки (Pictures)

   При выполнении любого из этих действий открывается диалоговое окно Рисунок (Picture) (рис. 15.11). Найдите с помощью этого окна требуемый графический файл и для его размещения на Web-странице нажмите кнопку Вставить (Insert). Диалоговое окно закроется, а изображение будет размещено на странице.

   

   Рис. 15.11.

   Настройка свойств изображения

   После размещения изображения на Web-странице необходимо настроить его свойства, используя диалоговое окно Свойства рисунка (Picture Properties) (рис. 15.12). Для его открытия щелкните мышью на изображении, а затем выполните одно из следующих действий:

   • В меню Формат (Format) выберите команду Свойства (Properties)
   • Выберите команду контекстного меню Свойства рисунка (Picture Properties)
   • Нажмите комбинацию клавиш +

   Диалоговое окно Свойства рисунка содержит три вкладки: Общие (General), Видеозапись (Video), Вид (Appearance). Рассмотрим более подробно возможности настройки с помощью данного диштогового окна.