воскресенье, 27 ноября 2016 г.

Графика на веб-страницах

При наличии картинок веб-страницы будут наиболее привлекательными. 
Картинка не вставляется непосредственно в текст страницы. Браузеру ставится указание, где картинка расположена, как ее зовут и как ее на экране разместить.
Например, <img src="img/рис.JPG align==" left "  width="356" height="267"  vspace="10"   hspace="10"  border="0" alt="мелиорация">
 img  (image, изображение) - задает местоположение рисунка
Src  (source, источник) – адрес рисунка
Align (выравнивание)   
Border – задает рамку вокруг картинки толщиной в n пикселей
Vspace (vertical space – вертикальные поля) и hspace (horizontal space – горизонтальные поля используют для того, чтобы текст не лез прямо на рисунок.
width , height - с помощью этих тегов меняем размеры рисунка, которые задаются в пикселях или процентах.
В параметре " alt="" ввести альтернативный текст, который будет отображаться  на месте пустого квадрата в момент загрузки. Но его показывают не все браузеры. Поэтому лучше использовать атрибут title (название) в этом случае всплывающую подсказку увидят все браузеры.
Если использовать gif формат, картинки поддерживают 256 цветов и их использование не всегда выгодно – теряется фотографическое качество. Вместе с тем gif формат позволяет один или несколько цветов объявить прозрачными, что дает возможность  вписывать рисунок в документ более привлекательным образом.
Формат jpg  разработан специально для передачи фотографий. Он поддерживает миллионы цветов, что позволяет получать изображения высокого качества. Высокое качество картинки отражается на размерах файла.
Для подготовки иллюстраций для веб-страниц необходимо иметь:
·         Растровый редактор;
·         Векторный редактор.
Растровый редактор полезен для обработки фотографий, в том числе и для сайта. Признанный лидер в этом плане Photoshop. В нее встроен оптимизатор графики, который позволяет уменьшить размеры картинок.
Векторный редактор очень удобен для подготовки графики в силу следующих его свойств:
·         Преобразования рисунка выполняются искажений;
·         Получаются маленькие графические файлы;
·         Рисовать быстро и просто;
·         Независимое редактирование частей рисунка;
·         Высокая точность прорисовки;
·         Векторный рисунок легко преобразовать в растровые форматы
Очень хороший вариант  - векторный редактор Xara X
Посещаемость сайта тем выше, чем быстрее он просматривается. Вот почему уменьшение объема графических файлов  имеет большое значение в сайтостроении  - графические файлы создают основную часть трафика, передаваемого с Web –сервера на браузер клиента.
Для оптимизации графики я пользуюсь  Photoshop
Картинку можно заставить работать как ссылку, для этого нужно вложить тег  img внутрь тега А:
<a href="excavat.html"><img src="img/экскават.jpg" width="110" height="80" border="0" title="экскаваторы"></a>
Рисунок можно использовать и в качестве фона страницы. При этом файл фоновой графики не должен быть большим.
Если предлагается однотонный фон, то лучше предусмотреть задание цвета фона в кодах HTML. Лучше всего выглядят страницы с фоном в пастельных тонах, элементы которого сливаются в однородно окрашенную поверхность. При использовании тёмного фона шрифт должен быть ярким.
На сайте мы выкладываем уменьшенные по размерам  и разрешению картинки. Как увидеть оригинальный размер?  Можно организовать  загрузку файла с изображением в отдельное окно браузера.
Для этого надо оформить гиперссылку  с атрибутом target=”_blank
Автор: Власовец Надежда Витальевна.
Литература:
1.      Первое сентября.  Информатика №17 2007 г. Графические редакторы, с. 31
2.      Самоучитель полезных программ . Левин А.Ш.  Питер. 2008
3.      Первое сентября.  Информатика №21 2000 г.  Какой графический формат можно использовать  с. 37-40


Комментариев нет :

Отправить комментарий

Номер страницы