HTML, Excel, Word, SEOОсновы Html ⇒ Работа с графикой html-документа

ОСНОВЫ HTML

Справочная информация:
Справочник HTML-тегов
Шаблоны для сайтов
Как раскрутить сайт: шаг за шагом
Учебник HTML (хтмл)
Старт
Основные тэги
Заголовки и комментарии
Специальные символы
Форматирование текста ч.1
Форматирование текста ч.2
Форматирование текста ч.3
Создание списков
Работа с графикой ч.1
Работа с графикой ч.2
Работа с графикой ч.3
Работа с графикой ч.4
Таблицы ч.1
Таблицы ч.2
Таблицы ч.3
Гиперссылки
Фреймы
Что такое формы
Что такое JavaScript
Маленькие секреты Вэб-дизайна
Эффект постепенной прорисовки
Карта ссылок
Внутренний лист стилей
Работа с листами стилей
Свойства шрифта - font
Свойства текста
Свойство фона - background
Рамки и размеры
Относительное и абсолютное позиционирование элементов
Основные мета тэги
Таблица дескрипторов HTML и их атрибутов
Таблица свойств css
Заключительное слово
HTML-редакторы
Что такое HTML-редактор
FrontPage 2003
Adobe GoLive CS
Macromedia Dreamweaver MX 2004
HomeSite
CuteSite Builder
Namo WebEditor
CoffeeCup HTML Editor
1stPage 2000
Arachnophilia
HotDog Professional
CSE HTML Validator Pro
HTML профессионально
Внешний лист стилей
Форматирование таблиц
Форматирование гиперссылок
Форматирование изображений

 
Сабмит сайта в каталоги

Работа с графикой html-документа (ч.3)



Преобразование формата изображения

Задание размеров изображения

Увеличение размеров изображения

Уменьшение изображения

Обрезка изображения

Преобразование формата изображения html-документа

Если картинка хранится в файле с расширением отличным от .gif или .jpg, то вам необходимо будет выполнить преобразование формата изображения в нужный. Для этого можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. Более подробно работа непосредственно с графикой рассматривается на ветке сайта "Графика".

Изображения GIF (Graphics Interchange Format) могут содержать 256 цветов и используются, в основном, для отображения рисунков. Кроме того, этот формат обладает средствами поддержки анимации и прозрачности.

Изображения JPEG (JPG) (Joint Photographic Experts Group) содержат более 16 млн. цветов. Данный формат используется для хранения фотографий и крупных изображений.

Как правило, в процессе конвертации файла в формат .gif или .jpg его размер уменьшается, что способствует увеличению скорости загрузки картинки.

Задание размеров изображения html-документа

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

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

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

Увеличение размеров изображения html-документа

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

Если значение новых размеров задавать в пикселях, надо использовать оба атрибута WIDTH, HEIGHT. Чтобы избежать искажений, необходимо соблюдать пропорцию. Если же значения вводятся в процентах относительно размеров окна браузера, достаточно задать любое значение (ширину или высоту), - остальное браузер пересчитает автоматически.

Уменьшение изображения html-документа

Аналогичным способом можно уменьшать изображения. Однако здесь существует немаловажный недостаток. Время, необходимое для загрузки картинки остается то же. Т.е. картинка грузится своего "настоящего" размера, просто она "вжимается" в те рамки, которые вы явно указываете атрибутами WIDTH, HEIGHT. Таким образом, чтобы уменьшить размеры изображения, надо воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. После завершения редактирования рекомендую сохранить внесенные изменения в новом файле. Таким образом, вы всегда сможете воспользоваться исходным изображением.

Пример:

HTML-код:


<img src="img/tigr.jpg" width="50" height="41">

<br>

<img src="img/tigr.jpg" width="100" height="82">

<br>

<img src="img/tigr.jpg" width="10%">

Отображение в браузере:




Обрезка изображения html-документа

Обрезка изображения позволяет удалить ненужные части картинки.

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

Более подробно работа непосредственно с графикой рассматривается на ветке сайта "Графика".



В начало страницы



В начало страницы