Разное

Графика в html: Графика в HTML

09.02.1982

Содержание

Графика в HTML

«Графика в HTML» – шестой урок учебника HTML. В этом уроке речь пойдет о работе с веб графикой, как частью HTML страниц. Мы научимся создавать изображения в рамках HTML и настраивать их отображение.

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

Использование графики на HTML страницах.

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

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

Нельзя использовать яркие, кислотные цвета, резко контрастирующие с цветом текста, нельзя использовать фоновые цвета, близкие к цвету текста, нельзя перегружать страницу большим количеством анимации — все это отпугивает пользователя и сильно увеличивает время загрузки страницы.

Простота — есть гениальность.

Придерживайтесь этого правила и ваши страницы будут притягивать внимание.

Но простота и примитивность – совершенно разные понятия. Найдите баланс. Экспериментируйте для получения своей, уникальной формулы дизайнерского успеха…

Добавление изображений к html странице.

Для добавления к web–странице файла с изображением используется тег <img>, с обязательным атрибутом src, который будет указывать на файл с изображением.

<p><center><img src=»../img/cat.gif» alt=»Это кот «></center></p>

Форматирование изображений.

Для форматирования текста, расположенного рядом с изображением используется атрибут тега <img> – allign. Пример его работы вы можете видеть ниже:

Значение

Вид

Rigth
Hspace=10px

бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла

Left
Hspace=3px
бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
Top
Hspace=10px
Vspace=5px

бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла

Middle
Hspace=1px
Vspace=12px
бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
Bottom
Hspace=10px
Vspace=10px
бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла

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

Также форматировать изображение можно посредством атрибута border, задающего ширину рамки вокруг изображения. По умолчанию рамка вокруг изображения равна 0, а вокруг изображения, являющегося ссылкой – 2.

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

Атрибут ALT – указывает название изображения, которое учитывается поисковыми машинами при индексации сайта и отображается в пустом квадрате вместо изображения, в случае невозможности загрузки последнего. Использование этого атрибута я считаю обязательным, но об этом мы поговорим в разделе «Как раскрутить сайт самостоятельно и с нуля ».

Использование фона в HTML.

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

Я текст на красном фоне

<body bgcolor=»red»>
<p align=»center»>
я текст на красном фоне
</p>
</body>

Я текст на фоне маленького кота

<body background=
«. ./img/cat_mini.gif»>
<p align=»center»>
я текст на фоне маленького кота
</p></body>

я текст на фоне кота побольше

<body background=
«../img/cat.gif»>
<p align=»center»>
я текст на фоне кота побольше
</p></body>

Из примеров хорошо видно, как браузер тиражирует изображение.

Горизонтальная линия.

Для построения горизонтальной линии используется тег <hr>. Для изменения параметров линии, а именно, толщины и длинны, используются атрибуты SIZE и WIDTH. Для выравнивания линии, относительно центра страницы используется атрибут ALIGN. Атрибут NOSHADE используется для определения, будет ли у линии тень.

<hr align=»center» color=»#666666″ width=»400″>


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


Графическое оформление позволит сделать ваш сайт уникальным и привлекательным. При создании графики внутри HTML страниц немаловажно проводить оптимизацию изображений для уменьшения их веса, а соответственно и скорости загрузки картинок. Для небольших изображений рекомендую использовать формат .gif, для крупных — .jpeg со средними настройками качества. .png изображения являются одними из наиболее увесистых, поэтому рекомендую по возможности отказаться от их использования.

В следующий раз мы научимся работать с таблицами в html. Правильная работа с таблицами позволяет отлично позиционировать элементы и даже создавать каркасы сайтов.

Использование графики в HTML

О г л а в л е н и е

Использование графики в HTML

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

Теперь рассмотрим как вставить изображение в Web-страницу.

Для того чтобы вставить изображение в Web-страничку существует тег НТМL, который заставляет браузер выводить изображение,им является тег&ltIMG&gt с обязательным атрибутом SRC (SouRCe, источник). Имя источника представляет собой имя выводимого графического файла. Замыкающего тега не требуется.

Пример вставки изображения:

&ltIMG SRC=»image.gif» ALT=»листья»&gt

Применение графического файла вместо текстовой ссылки.

Любой графический файл можно сделать гиперссылкой , если он поддерживается Обозревателем. Для этого вместо названия ссылки нужно вставить графический элемент ,а чтобы при наведении на изображение всплывала подсказка куда приведет эта ссылка, вставляем необязательый атрибут alt и в значении указываем название инфармационного ресурса.(Параметр ALT должен быть только у рисунка):

Пример:

&ltA href=»URL»&gt&ltimg border=»5″ src=»volk.jpg» ALT=»Использование графики в HTML»&gt&lt/A&gt

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

Тег изображения &ltIMG&gt имеет один обязательный атрибут

и необязательные:

ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.

Атрибут SRC
Указывает файл изображения и путь к нему; изображение должно быть загружено в браузер и размещено в том месте документа, где расположен тег изображения.
Атрибут ALT
Позволяет указать текст, который будет выводиться вместо изображения браузерами, неспособными представлять графику. В некоторых случаях при недостаточной пропускной способности линий связи пользователи отключают отображение графики. Наличие названий вместо картинок облегчает восприятие Web-страниц в таком режиме.
Атрибут АLIGN
Определяет положение изображения относительно окружающего его текста.

Возможные значения атрибута ALIGN

ALIGN=»top» выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста.

ALIGN=»middle» выравнивает центр изображения по базовой линии строки окружающего текста.

ALIGN=»bottom» выравнивает нижний край изображения по базовой линии строки окружающего текста.

   Кроме основных значений атрибута ALIGN=»значение»- существует еще ряд аргументов, которые расширяют возможности взаимного размещения графики и текста.

Рассмотрим их подробнее.

ALIGN=»left» определяет огибаемое текстом изображение. Изображение располагается вдоль левой границы документа, а последующие строки текста огибают его справа.

ALIGN=»right»определяет огибаемое текстом изображение. Изображение располагается вдоль правой границы документа, а последующие строки текста огибают его слева.

ALIGN=»textop» выравнивает верх изображения по верхнему краю самого высокого текстового символа в строке окружающего текста. Действие этого аргумента в большинстве случаев не всегда, подобно действию аргумента ALIGN=»top».

ALIGN=»baseline» выравнивает нижний край изображения по базисной линии строки окружающего текста, то есть производит такое же действие, как и ALIGN=»bottom».

ALIGN=»absbottom» выравнивает нижний край изображения по нижнему краю строки окружающего текста.

Атрибут USEMAP
Если присутствуют атрибут USEMAP и тег &ltMAP&gt, изображение становится чувствительной картой, или «графическим меню». Если щелкнуть кнопкой мыши на активной области изображения, для которого определен атрибут USEMAP, произойдет гипертекстовый переход к информационному ресурсу, установленному для этой области. Более подробно эта тема будет рассматриваться в разделе &laquoНавигационные карты&raquo.
Атрибут BORDER
Численное значение аргумента определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует. Чтобы не вводить пользователей в заблуждение, не стоит задействовать BORDER=O в изображениях, которые представляют собой часть элемента якоря, поскольку рисунки, применяемые в качестве гиперссылок, обычно выделяются цветной рамкой.
Атрибут НSРАСЕ
Численное значение этого атрибута задает горизонтальное расстояние между вертикальной границей страницы и изображением, а также между изображением и огибающим его текстом.
Атрибут VSPACE
Численное значение этого атрибута задает вертикальное расстояние между строками текста и изображением.

 

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

&ltIMG SRC=»» ALT=»изображение» HSPACE=»10″ VSPACE=»10″ BORDER=»2″ &gt

Форматы графических файлов

Самыми распространенными графическими форматами в Web являются GIF,JPG и JPEG. — наиболее подходящие форматы для обмена изображениями между системами. Данные форматы поддерживают многие графические приложения, в том числе все программы просмотра графики World Wide Web.

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

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

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

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

Одна из наиболее распространенных ошибок заключается в интерпретации значения параметра качества от нуля до ста как процента сохраняемых данных. Чтобы развеять это заблуждение, некоторые современные программные продукты JPEG просто используют шкалу «лучшее сжатие» — «лучшее качество».

Хитрость заключается в том, чтобы при наименьшей величине параметра качества получить изображение без видимого его ухудшения. Лучше начинать со средних значений и внимательно оценивать результат. Если вы отмечаете некоторое ухудшение, попробуйте увеличить значение параметра, если нет — попытайтесь его уменьшить. При просмотре изображения обращайте внимание на следующие моменты: четкость очертаний и углов, например вокруг текста, или контур детали изображения, выделяющейся на общем фоне. Часто бывает заметно, что контур «смазан» или линия «дрожит».

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

Активные изображения

Активные изображения (image map), или изображения, чувствительные к щелчкам мыши, позволяют создать на узле графические меню произвольной формы. Активное изображение — это изображение с так называемыми активными областями (hot spots), которые ссылаются на URL других страниц или узлов.

Есть два метода формирования активных изображений: на сервере и у клиента. Изображения первого типа используют сервер для того, чтобы найти соответствующий данной активной области URL и передать на браузер нужную страницу. Активные изображения, работающие на клиентской машине, задают информацию об активной области на НТМL-странице, так что браузер сам выясняет, какие области являются активными, и запрашивает с сервера соответствующую страницу.

Активные изображения, работающие у клиента, имеют несколько преимуществ. Во-первых, страницы с ними можно перенести на другой сервер. Во-вторых, серверу не приходится выполнять лишнюю работу (например, просматривать всю информацию об активных областях), то есть нагрузка на сервер уменьшается. При использовании работающих на сервере активных изображений в каталоге сgi-bin сервера должен быть соответствующий сценарий. Из соображений безопасности многие системные администраторы не записывают сценарии в каталог сgi-bin. Поэтому более подробно мы рассмотрим создание активных изображений у клиента.

Создание активного изображения. Процесс создания активного изображения состоит из двух этапов. Сначала необходимо определить на картинке области, которые нужно сделать активными, а потом соотнести их со ссылками на другие URL. Активные области задаются перечислением их координат (в пикселах). Все это можно сделать вручную, определив координаты углов активных областей, но гораздо проще воспользоваться какой-нибудь программой, например МарЕdit.

Определить карту легко. Нужно открыть в МарEdit HTML-файл, содержащий изображение, на котором требуется создать активные области, после чего выбранное изображение будет загружено в рабочее окно. Затем следует выбрать тип активной области (квадрат, треугольник и круг), щелкнуть и потянуть мышкой, обозначив границу области. Программа автоматически производит запись в HTML-файл, описывающий границы активной области. Затем этой области нужно приписать URL. В любых местах изображения можно нарисовать активные области и определить для каждой из них URL. Важно оставлять между областями немного места, чтобы при чтении быть уверенным, что активизируется правильная ссылка. Границы активных областей задаются координатами углов прямоугольника и многоугольника или центра и радиуса круга. Если вы решили делать активное изображение у клиента, Мар Edit поставляет данные только для тегов . Вам придется самим задать тег изображения с атрибутом USЕМАР и поместить его после тега МАР>. Не забудьте перед именем карты в атрибуте USЕМАР записать символ «#» следующим образом:
 
&ltIMG SRC=»mytemar.jpg» USЕМАР=»#mytemap»&gt

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

&ltIMG SRC=»mytemar.jpg»ALT=»Изображения»USEMAP=»#imap»&gt
&ltMAP NAME=»imap»&gt
&ltAREA SHAPE=»rect» COORDS=»0,0,100,100″ HREF=»URL»&gt
&ltAREA SHAPE=»rect» COORDS=»100,0,200,100″ HREF=»URL»&gt
&ltAREA SHAPE=»default» nohref&gt
&lt/MAP&gt

Изображения в миниатюре

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

Далее мы рассмотрим что такое навигационные карты.

Графика в html-документах

В HTML-документах возможно использование растровой и векторной графики. Программы просмотра отображают три формата растровой графики

GIF (Graphics Interchange Format) – формат (быстрого) обмена изображениями. Используется для графики с “небольшим” количеством цветов. Этот формат допускает создание рисунков и анимационных изображений с прозрачным фоном;

JPEG (Joint Photographic Experts Group) – используется для отображений фотографий;

PNG (Portable Network Graphics) – альтернатива GIF и два формата векторной графики – технологии Shockwave и Flash компании Makromedia.

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

Фоновое изображение. Рисунок может использоваться в качестве фона Web–страницы. Для решения этой задачи используется параметр background оператора BODY. Слева по тексту приводится пример фонового рисунка. Необходимо отметить, что размер фонового рисунка значительно меньше окна программы просмотра. Поэтому фоновый рисунок будет повторяться по вертикали и по горизонтали до заполнения всего окна программы просмотра. Значение параметра background равно адресу фонового изображения. Адрес фонового рисунка указывает либо относительное местоположение рисунка (то есть путь доступа к рисунку относительно расположения исходного HTML-файла), либо его полный URI-адрес. Здесь и далее предполагается, что все рисунки размещены в папке Images, которая хранится в одной папке с исходным HTML-файлом.

Оператор BODY имеет еще один параметр, используемый для задания фонового рисунка bgproperties. Этот параметр может иметь единственное значение fixed. В этом случае фон не прокручивается вместе с текстом, а остается неподвижным относительно экрана.

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

Синтаксис элемента: одиночный тэг с двумя обязательными атрибутами — src и alt

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

Собственные атрибуты элемента <IMG>

Наименование

атрибутов

Описание атрибутов

SRC

Адрес URI-файла с графическим изображением.

ALT

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

ALIGN

Выравнивание текста относительно изображения:

left – по левой границе;

right – по правой границе;

top – по верхней границе;

middle – по центру изображения;

bottom – по нижней границе. Есть и еще ряд более “тонких” значений атрибута.

HEIGHT

Высота изображения в пикселях (рекомендуемый).

WIDTH

Ширина изображения в пикселях (рекомендуемый).

BORDER

Ширина рамки вокруг изображения (только NN).

HSPACE

Ширина свободного пространства в пикселях, которое должно отделять изображение от текста по горизонтали.

VSPACE

Ширина свободного пространства в пикселях, которое должно отделять изображение от текста по вертикали.

USEMAP

Адрес URI-файла, содержащего карту изображения (сегментированная графика).

ISMAP

Признак сегментированной графики.

Кроме перечисленных индивидуальных параметров, оператор <IMG>, также как и другие операторы, имеет ряд общих параметров и параметры для обработчиков событий.

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

Фоновые и сегментированные графические изображения масштабирования не допускают.

Пример 2.9. Использование графики в HTML-документах

<HTML>

<HEAD>

<TITLE>Проектирование WEB-сайта</TITLE>

</HEAD>

<BODY background=»Images/Fon_Tile.gif»>

<DIV><P><big><h3>Графика в HTML-документах</h3>

<P><IMG align=top hspace=10 src=»Images/Leti_tm2.gif»>Это главный

корпус Ленинградского<br>Электротехнического института

<P align=left>Графическое изображение можно<IMG align=bottom height=40

src=»Images/Cdrom.gif» width=160> включать непосредственно в

текст.</big></P></DIV>

<IMG align=left width=30% height=10% alt=»Здесь отображается РИСУНОК» src=hj>

<DIV><P>

<IMG align=bottom src=»Images/vv_pr.gif» vspace=20>

<IMG align=bottom src=»Images/vv.gif» vspace=20>Есть несколько

способоввыравнивания текста относительно изображения

<P>Просто текст</P></DIV>

</BODY>

</HTML>

Результат выполнения примера 2. 9 (рис.2.9)

Рис.2.9. Просмотр примера “Графика в HTML-документах”

В рассматриваемом примере:

  • в качестве фона документа (<BODY background=»Images/Fon_Tile.gif»>) рассматривается рисунок, который хранится в файле с именем Fon_Tile.gif в папке Images. Вид рисунка приводился в тексте параграфа;

  • рассматриваются различные способы выравнивания текста относительно рисунка;

  • при отображении рисунка Images/Cdrom.gif показывается возможность использования параметров height и width;

  • в строке <IMG align=left width=30% height=10% alt=»Здесь отображается РИСУНОК» src=hj> в параметре src задан несуществующий файл. Поэтому броузер высвечивает текст, заданный в параметре alt — «Здесь отображается РИСУНОК».

Замечание. Для отображения строки текста, указанного в качестве значения параметра alt, необходимо выделить место в окне броузера;

  • в нижней части Web – страницы приведены два же рисунка, отличающихся одним параметром — прозрачностью фона рисунка. Первый рисунок, загружаемый оператором <IMG align=bottom src=»Images/vv_pr.gif» vspace=20>, использует исходный рисунок с прозрачным фоном. Второй, загружаемый оператором <IMG align=bottom src=»Images/vv.gif» vspace=20>, использует тот же самый исходный рисунок, но с непрозрачным фоном.

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

Сегментированная графика. Элементы <MAP> и <AREA>.

Сегментированная графика или графическая карта (imagemap) представляется обычным изображением с выделенными чувствительными (активными) областями. Активные области изображения являются ссылками на адресуемые элементы гипертекста.

Графическая карта может быть создана в любом графическом редакторе, который позволяет сохранять изображения в формате GIF, JPG (JPEG) или PNG. Алгоритм создания графической карты:

  • выбирается или рисуется изображение, которое сохраняется в виде файла с расширением gif, jpg (jpeg) или png;

  • используя элемент выделения области графического редактора, выделяются чувствительные области изображения и записываются их координаты;

  • выполняется описание выделенных чувствительных областей с помощью операторов <MAP> и <AREA>.

Синтаксис описания:

<MAP name=»my_map»>

<AREA параметры>

<AREA параметры>

. . . . . . . . . . . . . . . . . . .

<AREA параметры>

</MAP>

Параметр name оператора <MAP> используется при установке графической карты в HTML-документ. Этот параметр используется также в элементе <input> и объекте <object>.

Собственные параметры оператора <AREA>

Наименование

атрибута

Описание атрибута

shape

Задает форму чувствительной области. Может принимать значения: default-точка; rect-прямоугольник; circle-окружность; poly – многоугольник.

coords

Через запятую задаются координаты соответствующих фигур: default – координаты x и y; rect-координаты x и y верхнего левого и нижнего правого углов; circle-координаты x и y центра окружности и величину радиуса; poly-координаты x и y всех вершин многоугольника.

href

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

nohref

Задает области нечувствительные к щелчку мыши.

alt

Альтернативный текст, который отображается программой просмотра или “всплывает” как подсказка.

tabindex

Задает порядок перехода по ссылкам при помощи клавиши Tab при работе с клавиатурой.

accesskey

Назначает “горячие” клавиши для быстрого доступа к элементам. Для Windows, например, accesskey=»d» переводит фокус ввода на заданную область при нажатии Alt+D.

Кроме перечисленных, оператор AREA имеет общие атрибуты и атрибуты для установки обработчиков событий.

Пример 2.10. Организация графической карты

<HTML>

<HEAD><TITLE>Крепость</TITLE></HEAD>

<BODY>

<h3 align=»center»>Орешек. Общий план</h3><BR>

<MAP name=»Крепость Орешек»>

<IMG src=»Крепость.gif» usemap=»#Крепость Орешек»>

<AREA href=»флаг.htm » shape=rect coords=»266, 32, 291, 54″>

<AREA href=»головин.htm » shape=rect coords=»245, 155, 382, 255″>

<AREA href=»мемориал.htm » shape=rect coords=»338, 77, 381, 91″>

<AREA href=»новтюрьма.htm » shape=rect coords=»387, 55, 466, 76″>

<AREA href=»нарволя.htm » shape=rect coords=»239, 40, 257, 55″>

<AREA href=»государева.htm » shape=rect coords=»136, 83, 183, 152″>

<AREA href=»4корпус.htm » shape=rect coords=»265, 96, 430, 132″>

<AREA href=»сттюрьма.htm » shape=rect coords=»294, 54, 319, 71″>

<AREA href=»местоказни.htm » shape=rect coords=»324, 54, 337, 64″>

</MAP>

<UL><LI><A href=»флаг.htm»>Флажная башня</A>

<LI><A href=»головин.htm»>Башня Головина</A>

<LI><A href=»мемориал. htm»>Мемориальный комплекс</A>

<LI><A href=»новтюрьма.htm»>Новая(народовольческая) тюрьма</A>

<LI><A href=»нарволя.htm»>Памятник народовольцам</A>

<LI><A href=»государева.htm»>Государева башня</A>

<LI><A href=»4корпус.htm»>Четвертый тюремный корпус</A>

<LI><A href=»сттюрьма.htm»>Старая тюрьма</A>

<LI><A href=»местоказни.htm»>Место казни народовольцев</A>

<HR>

</UL>

</BODY>

</HTML>

Результат просмотра графической карты (рис.2.10).

Рис.2.10. Просмотр графической карты

Строка <IMG src=»Крепость.gif» usemap=»#Крепость Орешек»> отображает изображение, хранимое в файле Крепость с расширением gif.

Строки, ограниченные операторами <MAP> и </MAP>, дают описание графической карты с именем Крепость Орешек.

Строки с оператором <AREA> описывают отдельно каждую чувствительную область и содержат адрес href документа, который будет отображаться в окне программы просмотра при выполнении ссылки.

Графическая карта (см. рис.2.10) ничем не отличается от обычного изоражения. Различие проявляется при попадании указателя мыши на активную область. Указатель мыши в этом случае меняет вид.

Графика в HTML

Здесь может быть ваша реклама…

1000
участников

5500 читателей

                                                      

       Тэг <img> позволяет WEB — вводить в HTML-документ ссылки на графические и иные типы данных. Применение этого  тэга способствует улучшению внешнего вида документов и их функциональности.

     В HTML-документах — два способа применения (использования) графики. Прежде всего, — внедрение в документ графических образов, что дает возможность пользователю видеть  изображения прямо в контексте иных  элементов документа. При проектировании документов эта техника используется чаще всего. Порой ее называют «inline image«.

src
  Это обязательный атрибут, который задает гиперссылку рисунка.
Он должен храниться в том графическом формате, который поддерживает браузер. В настоящее время большее количество браузеров поддерживает форматы изображений GIF, JPG, и PNG. Они также разрешают хранить информацию в сжатом виде. Это значит — уменьшаются сроки загрузки страницы.

<img src=»./pic/Rolls.png»> Rolls </img>

<img src=»./pic/Rolls.png» />

alt
  Необязательный атрибут, который задает текст. В случае, когда WEB-браузер не поддерживает изображение графики или в его настройках отключена загрузка изображений, при наведении на картинку взамен  нее браузером будет отображен текст. Если же данного параметра нет, то там, где должен быть  рисунок значительное количество браузеров выводит «иконку», иными словами, пиктограмму. Активизировав ее, можно увидеть изображение.

. Например:

<img src=»./pic/Rolls.png» alt=» Rolls » />

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

pixels

percent

ширина изображения в пикселях от его истинной (исходной) ширины.

ширина изображения в процентах от ширины родительского элемента или экрана

height=200

height=80%

Значения                                     Описание                                           Пример

<img src=». /pic/Rolls.png» alt=»Размер изображения 180х120 пикселей» />

width

  Этот необязательный атрибут указывает на ширину рисунка. Если width отсутствует, то применяется

оригинальная его ширина. Этот атрибут разрешает выбирать масштаб: сужать или расширять

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

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

рисунок может быть отображен некорректно.

<img src=»./pic/Rolls.png» alt=»Размер изображения 180х120 пикселей» />

pixels

percent

ширина изображения в пикселях от его истинной (исходной) ширины.

ширина изображения в процентах от ширины родительского элемента или экрана

width=100

width=50%

Значения                                     Описание                                           Пример

align
  Этот необязательный атрибут описывает место, где располагается рисунок по отношению к остальным элементам. В случае неиспользования данного атрибута большая часть браузеров в левой стороне экрана располагает изображение, а справа от него — остальные элементы.

left           рисунок будет слева относительно всех других элементов

right     рисунок будет справа относительно всех других элементов

top     элементы выравниваются по верхнему краю изображения

middle элементы будут выровнены по центру изображения

bottom элементы выравниваются по нижнему краю изображения

<img src=»./pic/Rolls.png» border=»1″ />          <img src=»./pic/Rolls.png» border=»0″ />

border
  Этот атрибут определяет размер ширины рамки возле рисунка, в пикселях. Если установлен 0, то рамка не изображается. К примеру:

vspace
   Данный необязательный атрибут, задает размер пустоты над рисунком и под ним. Это необходимо, чтобы текст его не затрагивал. Указывается в пикселях. Это очень важно при динамическом формировании рисунков, когда документ нельзя увидеть заранее.

<img src=»./pic/Rolls.png» vspace=20 />

hspace
  Это необязательный атрибут, который указывается в пикселях. Он задает размер пустого пространства справа и слева от изображения. Атрибут необходим для того, чтобы изображение не задевал текст. Это очень важно при динамическом формировании рисунков, когда документ нельзя увидеть заранее.

<img src=»./pic/Rolls.png» hspace=20 />

usemap
  Сообщает веб-браузеру о том, что установленное изображение — это карта ссылок и разрешает совершать пользователям какие-либо действия. Для этого необходимо щелкнуть мышкой на определенном месте рисунка. Эта возможность является непосредственным расширением HTML. Об этом разговор пойдет далее.


Бесплатно создаем сайт

Escape-
последовательности


Развитие и монетизация сайта

Полезная литература

Информация


Все о CSS
Самый простой курс

®

Твитнуть

  Copyright © 2012               Все права защищены. Любое — полное или частичное копирование материалов запрещено, при перепечатки ссылка на источник обязательна.

Мои услуги: быстро, качественно, не дорого. Подробнее…


Что такое SVG-графика и как её использовать — Журнал «Код»

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

Сегодня поговорим о том, как рисовать векторную графику в вебе стандартными средствами HTML.

Что такое и зачем нужно SVG

SVG расшифровывается как scalable vector graphics, «масштабируемая векторная графика». Это значит, перед нами векторное изображение, которое можно масштабировать без потери качества.

SVG — это не единственный формат векторной графики, есть много других. Но именно SVG используют на веб-страницах и в HTML-коде. Его инструкции оптимизированы для веб-разработки, и отрисовка происходит прямо в браузере. И, самое главное, все команды SVG представлены в виде текста и координат, а не в виде отдельных файлов. Это значит, что SVG-изображение можно зашить прямо в код веб-страницы, что иногда бывает незаменимо.

SVG используется в вебе для отрисовки:

  • геометрических фигур и линий,
  • логотипов,
  • элементов интерфейса на странице,
  • простых картинок и иллюстраций.

Как использовать SVG на странице

Обычно когда хотят что-то нарисовать в HTML, то используют холст с тегом <canvas> и рисуют на нём. Но плюс SVG-графики в том, что для неё не нужен отдельный холст — можно рисовать что угодно в любом месте страницы с помощью тега <svg>..</svg>. Все объекты, которые нам нужно нарисовать, задаются между этими тегами.

Например, мы можем поставить на странице любой заголовок, а потом прямо поверх него нарисовать пару зелёных кругов и красную линию:

Теперь давайте разберёмся, как это у нас получилось и что для этого нужно.

Линия

Линия — самый простой элемент SVG-графики. Чтобы нарисовать линию, нам нужно знать:

  • начальные и конечные координаты,
  • толщину линии,
  • и её цвет.

Для линии используется тег <line/>:

<line 
      x1=»50″ y1=»30″ ← начальные координаты линии
      x2=»250″ y2=»0″  ← конечные координаты
      stroke-width=»3″ ← толщина линии
      stroke=»red» ← цвет
/> 

Соберём всё вместе:

<line x1="50" y1="30" x2="250" y2="0" stroke-width="3" stroke="red"/> 

Теперь обернём эту команду в тег <svg>, поставим на страницу и посмотрим на результат:

<!DOCTYPE html>
<html lang="ru" >
<head>
  	<meta charset="UTF-8">
	<title>SVG-графика</title>
</head>
<body>
	<svg>
		<line x1="50" y1="30" x2="250" y2="0" stroke-width="3" stroke="red"/>  
	</svg>
</body>
</html>

Круг

Для круга используется команда <circle/>, в которой нам нужно указать:

  • центр круга,
  • радиус,
  • цвет заливки,
  • толщину контура,
  • цвет контура.

Чтобы нарисовать зелёный круг с жирной фиолетовой обводкой, зададим такие параметры:

<circle 
      cx=»25″ cy=»25″ ← центр круга
      r=»20″  ← радиус
      fill=»green» ← цвет заливки
      stroke-width=»5″  ← толщина контура
      stroke=»rgb(150,110,200)» ← цвет контура
/>

Соберём вместе, добавим второй круг и тоже положим это внутрь тега <svg>:

<circle cx="25" cy="25" r="20" fill="green" stroke-width="5" stroke="rgb(150,110,200)"/>
<circle cx="250" cy="32" r="30" fill="yellow" stroke-width="3" stroke="rgb(50,90,150)"/>

Прямоугольник

С прямоугольниками тоже всё просто — указываем размеры, цвет заливки, а также цвет и толщину контура:

<rect 
      width=»30″ ← ширина
      height=»20″  ← высота
      fill=»orange» ← цвет прямоугольника
      stroke-width=»1″ ← толщина контура
      stroke=»rgb(0,0,0) ← цвет контура
«/>
<rect fill="orange" stroke-width="1" stroke="rgb(0,0,0)"/>

Минус стандартного прямоугольника в том, что он всегда рисуется от точки с координатами (0,0). Если прямоугольник нужен в другом месте, используют многоугольник.

Многоугольник

Многоугольник — это фигура, которая получается так:

  1. Мы задаём любое количество точек по координатам.
  2. Через эти точки по порядку проходят линии, причём последняя точка соединяется с первой.
  3. То, что получилось внутри границ линий, закрашивается выбранным цветом.

Например, вот что нужно, чтобы нарисовать синий треугольник:

<polygon 
      points=» ← начались координаты вершин треугольника
      100,140 ← координаты первой точки
      250,118  ← координаты второй точки
      170,60 » ← координаты третьей точки
      fill=»blue» ← цвет фигуры
      stroke-width=»1″ ← ширина обводки
      stroke=»rgb(0,0,0) ← цвет обводки
«/>
<polygon points="100,140 250,118 170,60 " fill="blue" stroke-width="1" stroke="rgb(0,0,0)"/>
<!-- сразу добавим ещё одну фигуру -->
<polygon points="40,100 100,100 100,150 40,150" fill="red" stroke-width="2" stroke="rgb(100,250,110)"/>

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

Продвинутый уровень

Теперь добавим заголовок, чтобы получить картинку как в начале статьи. Пишем после тега <svg> тег <h2>:

<h2>Привет, это журнал Код!</h2>

Так как наш тег с заголовком первого уровня написан ниже тега с графикой, то браузер и разместил заголовок ниже картинок. Чтобы графика легла сверху текста, нужно пойти на хитрость:

  1. Добавить стиль к svg-тегу.
  2. В этом стиле прописать абсолютное позиционирование и установить значение z-index = -1, чтобы слои с рисунками оказались ниже всех и не мешали остальным.
  3. Также в этот стиль нужно добавить свойство display: block — оно управляет тем, как располагается содержимое всего блока. Подробно про это свойство мы рассказывали в подборке полезных CSS-команд — почитайте, если интересно, как управлять внешним видом страницы.

Добавим это в стили и соберём полную страницу:

<!DOCTYPE html>
<html lang="ru" >
<head>
  	<meta charset="UTF-8">
	<title>SVG-графика</title>
	<style type="text/css">
		svg{
			position:absolute;
			z-index:-1;
			display: block;}
	</style>
</head>
<body>
	<svg>
		<!-- круги -->
		<circle cx="25" cy="25" r="20" fill="green" stroke-width="5" stroke="rgb(150,110,200)"/>
		<circle cx="250" cy="32" r="30" fill="yellow" stroke-width="3" stroke="rgb(50,90,150)"/>
		<!-- линия -->
		<line x1="50" y1="30" x2="250" y2="0" stroke-width="3" stroke="red"/>  
		<!-- прямоугольник -->
		<rect fill="orange" stroke-width="1" stroke="rgb(0,0,0)"/>
		<!-- многоугольники -->
		<polygon points="100,140 250,118 170,60 " fill="blue" stroke-width="1" stroke="rgb(0,0,0)"/>
		<polygon points="40,100 100,100 100,150 40,150" fill="red" stroke-width="2" stroke="rgb(100,250,110)"/>
	</svg>
	<h2>Привет, это журнал Код!</h2>
</body>
</html>

Внешние SVG-файлы

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

Это особенно полезно на мониторах высокого разрешения и на мобилках: например, если вам на сайте нужны какие-то иконки, вы можете подключить их как SVG-файлы, и браузер отрисует их корректно хоть на retina-дисплеях, хоть на старых Full-HD мониторах. 

Зачем программистам сразу два монитора (а то и три)

Если хотите попробовать, скачайте любую из иконок Чикина и добавьте на сайт через тег <img src="..."> — увидите, как это красиво. Не забудьте указать width и height, чтобы векторная картинка знала, в каком размере отрисовываться. 

Что дальше

Мы разобрали только самые основы SVG-графики. Дальше будем делать красивую SVG-анимацию, рисовать логотипы и работать с векторной графикой на продвинутом уровне. Подпишитесь на нашу рассылку, чтобы не пропустить новые выпуски.

Текст:

Михаил Полянин

Редактура:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Мария Дронова

Соцсети:

Олег Вешкурцев

Веб-дизайн для начинающих. HTML, CSS, JavaScript и веб-графика, 5-е изд.

Роббинс Дженнифер

Артикул2676
ISBN 978-5-9775-4050-6
Количество страниц 956
Формат издания 165 x 233 мм
Печать черно-белая +44 цв. вклейки
Серия Внесерийные книги

2406 ₽
2045 ₽

# CSS# CSS3# HTML# Java/JavaScript# JavaScript# O’Reilly# SVG# фронтенд

  • Описание
  • Детали
  • Отзывы (0)

Описание

Книга поможет освоить веб-дизайн,  не имея опыта. На практических примерах показано, как создать простой сайт и постепенно его совершенствовать. Рассказано о создании веб-страниц, содержащих текст, ссылки, изображения, таблицы и формы. Описано применение CSS для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации. Даны основы языка JavaScript и подчеркнута его важность в веб-дизайне. Описано создание, оптимизация и сокращение времени загрузки веб-изображений.

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

В пятом издании  добавлен материал об использовании CSS Flexbox и Grid для создания сложных и гибких макетов страниц, тонкостях адаптивного веб-дизайна для отображения веб-страниц на экранах любых устройств, о работе  с командной строкой, Git и другими инструментами веб-дизайнера, а также применении  SVG-изображений

В отличие от всех других книг, которые предназначены для начинающих, эта книга поможет вам быстро освоиться с излагаемым материалом. Дженнифер объяснит каждый ваш шаг, включая некоторые весьма продвинутые концепции.
Джен Симмонс (@jensimmons), Mozilla и рабочая группа W3C CSS

Книга идеально подходит для студентов и разработчиков с любым начальным уровнем подготовки.

Вы хотите заняться веб-дизайном, не имея опыта? Это дружественное руководство даст вам превосходные возможности для старта! Вы узнаете, как устроены и работают веб-страницы, и начнете постепенно создавать свой собственный сайт. По завершении чтения книги вы сможете создать простой сайт с многоколоночными страницами.

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

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

Вы научитесь:

  • Создавать веб-страницы, содержащие текст, ссылки, изображения, таблицы и формы
  • Использовать таблицы стилей (CSS) для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации
  • Писать скрипты на языке JavaScript и узнаете почему он столь важен в веб-дизайне
  • Создавать и оптимизировать веб-изображения, сократив до минимума время их загрузки

Новое в пятом издании

  • Использование CSS Flexbox и Grid для создания сложных и гибких макетов страниц
  • Тонкости адаптивного веб-дизайна, благодаря которому веб-страницы великолепно выглядят на экранах любых устройств
  • Описание работы с командной строкой, Git и другими инструментами, входящими в набор инструментов современного веб-дизайнера
  • Применение SVG-изображений

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

Дженнифер Роббинс уже более 25-ти лет занимается веб-дизайном. Еще в 1993-м году она разработала первый коммерческий сайт — Global Network Navigator (GNN), принадлежащий издательству O’Reilly. И практически столько же лет она пишет книги о веб-дизайне. В частности, ее перу принадлежат популярные книги «HTML5, CSS3 и JavaScript. Исчерпывающее руководство» и «HTML5. Карманный справочник».

Детали

Артикул2676
ISBN978-5-9775-4050-6
Количество страниц956
Серия Внесерийные книги
ПереплетМягкая обложка
Печать черно-белая +44 цв. вклейки
Год2021
Габариты, мм233 × 165 × 52
Вес, кг0.915

Дополнительные файлы скачать: Зеркало1Дополнительные файлы скачать (Chrome): Зеркало2

  • Новинки на 2 недели раньше магазинов
  • Цены от издательства ниже до 30%
  • Акции и скидки только для подписчиков
  • Важные новости БХВ

ПОЛЕЗНАЯ РАССЫЛКА КНИЖНЫХ НОВОСТЕЙ

Подписываясь на рассылку, вы соглашаетесь с политикой конфиденциальности и обработкой своих персональных данных.


Рекомендуем также

  •  Дронов Владимир Александрович

    HTML и CSS. 25 уроков для начинающих

    963 ₽
    819 ₽
  •  Дронов Владимир Александрович, Прохоренок Николай Анатольевич

    HTML, JavScript, PHP и mySQL. Джентльменский набор Web-мастера, 5 изд.

    1458 ₽
    1239 ₽
  •  Дронов Владимир Александрович

    JavaScript. 20 уроков для начинающих

    894 ₽
    760 ₽
  •  Яблонски Джон

    Законы UX-дизайна

    646 ₽
    549 ₽

Графика — W3C

Сеть — это больше, чем текст и информация, это также является средством выражения художественного творчества, визуализации данных и оптимизация подачи информации для разных аудиторий с различные потребности и ожидания. Использование графики на веб-сайтах повышает опыт для пользователей, и у W3C есть несколько различных и взаимодополняющих технологии, которые работают вместе с HTML и сценариями, чтобы предоставить создателям веб-страниц и веб-приложений инструменты, необходимые им для обеспечить наилучшее представление своего содержания. Узнайте больше ниже о:

Этот вводной текст является шаблонным для бета-версии сайта w3.org. Мы намерены предложить сообществу разработать этот шаблон и помогите предоставить полезный контент и ссылки. Более полный пример см. страница для HTML и CSS.

Что такое графика?

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

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

Графические дизайнеры имеют в своем распоряжении множество инструментов и технологий для все, от печати до веб-разработки, и W3C предоставляет многие из базовые форматы, которые можно использовать для создания контента в открытом Интернете. Платформа.

Для чего используется графика?

Графика используется для всего: от улучшения внешнего вида веб-страниц до служить уровнем представления и взаимодействия с пользователем для полноценного веб-сайта. Приложения.

Различные варианты использования графики требуют разных решений, поэтому доступно несколько различных технологий. Фотографии лучше всего представлены с PNG, интерактивные штриховые рисунки, визуализация данных и даже пользовательские интерфейсы. нужна мощь SVG и Canvas API. CSS существует для улучшения других форматов. как HTML или SVG. WebCGM удовлетворяет потребности в технической иллюстрации и документации во многих отраслях.

Что такое PNG?

Переносимая сетевая графика (PNG) — это статический файл формат для переносимого, хорошо сжатого хранения и обмена без потерь растровые изображения (битмапы). Он имеет богатый контроль цвета с индексированным цветом, оттенки серого, поддержка истинного цвета и прозрачность альфа-канала. PNG это разработан для Интернета, с возможностями потоковой передачи и прогрессивного рендеринга. Это поддерживается повсеместно в веб-браузерах, графических инструментах разработки, изображениях наборы инструментов и другие части творческой цепочки инструментов. Файлы PNG имеют файл расширение «.PNG» или «.png» и должно быть развернуто с использованием типа носителя «изображение/png». Изображения PNG можно использовать с HTML, CSS, SVG, Canvas API и WebCGM.

Что такое SVG?

Масштабируемая векторная графика (SVG) похожа на HTML для графики. Это язык разметки для описания всех аспектов изображение или веб-приложение, от геометрии фигур до стиля текста и формы, к анимации, к мультимедийным презентациям, включая видео и аудио. Он полностью интерактивен и включает в себя DOM с поддержкой сценариев, а также декларативная анимация (через спецификацию SMIL). Он поддерживает широкий спектр визуальные функции, такие как градиенты, непрозрачность, фильтры, отсечение и маскирование.

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

Что такое CSS?

Каскадные таблицы стилей (CSS) — это язык для описания представления веб-страниц, включая цвета, макет и информация о шрифте. Его можно использовать для улучшения графических аспектов HTML и SVG. Вы можете прочитать больше на странице для HTML и CSS.

Что такое Canvas API?

Canvas API — это технология написания сценариев на стороне клиента, позволяющая создание или изменение растровых изображений (bitmaps). Он использует векторную программные методы для создания форм, градиентов и других графических эффектов, и поскольку у него нет DOM, он может работать очень быстро. Специальные скриптеры могут разрабатывать игры или даже полнофункциональные приложения, используя Canvas API, отдельно или интегрированный в HTML или SVG. Он изначально поддерживается в большинстве современных браузеров. (с библиотеками сценариев, поддерживающими все основные браузеры), и даже на некоторые мобильные устройства.

Что такое WebCGM?

Метафайл компьютерной веб-графики (WebCGM) это веб-профиль CGM, стандарта ISO для векторных и составных изображений. Определение векторного/растрового изображения. CGM имеет большое количество поклонников в технической сфере. иллюстрация, интерактивная электронная документация, геофизические данные визуализация, среди других областей применения, и широко используется в областях автомобильной, авиационной и оборонной промышленности. WebCGM имеет многие из тех же графических функций, что и SVG.

Примеры

В качестве простого примера файла изображения SVG, вот круг с градиентом чтобы придать ему трехмерный вид:

 
     
  <определения>
     
       
       
     
  
  
  
 

Подробнее

Для получения дополнительной информации об использовании открытой веб-графики см. графику W3C учебники.

Недавняя пресса

13 июня
TechWire Азия
« Предоставление живого видео таким, каким оно должно быть — в реальном времени »
31 мая
Новости Центрального Техаса сейчас
После Firefox Chrome поддерживает новый стандарт входа без пароля
20 апреля
Точка сайта
« Превратить статическое меню CSS3/HTML5 в динамическое с помощью PHP/MYSQL »
13 апреля
Ле Фигаро
« L’organisme, который контролирует веб-объявления о смерти à venir des mots de passe »

Что такое HTML-графика? (с изображением)

`;

Евгений П.

В языке гипертекстовой разметки (HTML) существует несколько способов отображения и создания графики в HTML-документе. Наиболее широко используемый тип HTML-графики — это изображения, которые размещаются непосредственно на HTML-странице, называемые встроенными изображениями, хотя существуют и другие методы, такие как использование языка сценариев или скомпилированное веб-приложение, которые можно использовать для достижения тех же результатов. Для динамически генерируемой графики для диаграмм или графиков можно использовать масштабируемую векторную графику (SVG). Также есть некоторые базовые HTML-графики, которые поддерживаются спецификацией языка и не требуют внешних файлов, таких как горизонтальные линии и маркеры в списке. Более сложная HTML-графика может быть достигнута за счет использования языка сценариев, каскадных таблиц стилей (CSS) и элемента холста HTML, что дает встроенную возможность для некоторых эффектов, которые ранее были возможны только с помощью внешних объектов и подключаемых модулей.

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

Масштабируемая векторная графика — это более сложный стиль HTML-графики. Изображение SVG рисуется путем определения форм, путей и весов линий и рисуется на лету, когда пользователь просматривает документ. Это делает SVG хорошим выбором для отображения динамических данных, таких как диаграммы или графики, но делает его очень непрактичным для использования в других типах графики, таких как создание фотореалистичных изображений. Для простой HTML-графики и в ситуациях, когда внешний файл изображения не может быть загружен, SVG может быть приемлемым вариантом.

С развитием стандарта языка HTML версии 5 (HTML5) стало возможным создавать динамическую HTML-графику на базовом языке HTML. Это делается путем рисования непосредственно на специальной поверхности, известной как холст в документе HTML. Используя JavaScript® и CSS, этот метод позволяет создавать анимации или игры, которые могут реагировать на действия пользователя или настраивать графику в зависимости от настроек веб-браузера или других данных. Однако создание графики HTML5 может быть сложной процедурой, которая может привести к созданию длинных блоков кода сценария, которые могут выполняться очень медленно на некоторых компьютерах или устройствах.

ГРАФИКА: HTML и графика

Метки высоты и ширины

Все исходные теги графики вашей страницы (даже маленькие кнопки или значки) должны включать теги HEIGHT и WIDTH . Эти теги сообщают браузеру, сколько места должно быть отведено графике на странице, и дают указание браузеру отобразить вашу веб-страницу еще до того, как графические файлы начнут загружаться. Хотя это не ускоряет загрузку (это может сделать только более быстрое соединение для передачи данных), это позволяет пользователю быстрее увидеть макет страницы. Сначала заполнятся текстовые блоки, а затем в отведенные места «зальются» графические файлы. Это означает, что пользователь может начать читать вашу страницу во время загрузки графики.

Цветные фоны

Цвета веб-фона предлагают «нулевую пропускную способность», что означает изменение внешнего вида ваших страниц без добавления графики. Они также позволяют повысить удобочитаемость ваших страниц, настроить цвет фона в соответствии с изображением переднего плана и сигнализировать о широком изменении контекста от одной части вашего сайта к другой. A List Apart использует фоновые цвета как простой способ оживить визуальный эффект своих страниц с низкой пропускной способностью:


www. alistapart.com

Выбор цвета фона очень прост в WYSIWYG (что видишь, то и получаешь) графических программах компоновки веб-страниц. К сожалению, выбор цвета без одного из этих редакторов веб-страниц — процедура, доступная только пропеллерхедам. Цвет указан в теге в шестнадцатеричном коде, в котором шесть элементов задают значения красного, зеленого и синего, которые смешиваются для создания цвета. В теге перед шестнадцатеричным кодом всегда стоит знак «#»: (#RRGGBB). Поскольку весь этот бизнес теперь визуально обрабатывается новым поколением WYSIWYG-редакторов страниц и графических редакторов, таких как Adobe Photoshop, мы не будем углубляться в секреты шестнадцатеричного выбора цвета RGB.

Цвета фона и разборчивость

Интернет изобилует страницами, читаемость которых незначительна из-за неудачно выбранных комбинаций цвета фона и цвета текста. Текст, который трудно прочитать, является помехой для зрячего читателя, а определенные цветовые комбинации делают страницы нечитаемыми для дальтоников (10% мужчин частично дальтоники). Разборчивость шрифта на экране компьютера уже нарушена из-за низкого разрешения экрана. Типичный экран компьютера Macintosh или Windows отображает текст с разрешением от 72 до 80 точек на дюйм (около 5 200 точек на квадратный дюйм), что почти в 300 раз меньше, чем разрешение типичной журнальной страницы (1 440 000 точек на квадратный дюйм). Черный текст на белом (или очень слегка тонированный () фон обеспечивает наилучшую общую контрастность и разборчивость шрифта. Черный фон значительно хуже читается, чем белый фон, даже если для максимальной контрастности используется белый шрифт. Цветной фон может работать как альтернатива простому серому браузеру по умолчанию, если цвета сохранены в очень приглушенных тонах и с низкой общей цветовой насыщенностью (пастельные, светло-серые и светло-земляные тона работают лучше всего).

Фоновые узоры

В начале 1995 года Netscape Navigator версии 1.1 предоставил авторам веб-страниц возможность использовать небольшие мозаичные изображения в формате GIF или JPEG (или одно большое изображение) для формирования фонового узора позади веб-страницы. Эта функция вызывает споры в дискуссиях о веб-дизайне, потому что страницы с большими фоновыми изображениями загружаются дольше, а фоновые узоры, как правило, затрудняют чтение страниц, если они не тщательно разработаны.

Чтобы изображение можно было использовать в качестве фоновой текстуры, оно должно быть в формате GIF или JPEG небольшого размера, в идеале размером не более 100 x 100 пикселей. По нашему опыту, фоновые рисунки JPEG загружаются немного быстрее, чем эквивалентная графика GIF. Типичная графика, используемая для фоновых рисунков, представляет собой однородные текстуры:


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

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


www.dartmouth.edu/~ac

Карты изображений

Карты изображений предлагают способ определения нескольких «живых» областей ссылок в графическом изображении на веб-странице. Карты изображений стали стандартной функцией большинства профессионально разработанных веб-сайтов, поскольку они предлагают эффективное сочетание визуальной привлекательности и, при правильном использовании, функциональности, позволяющей эффективно использовать пространство. Карты изображений особенно эффективны, когда они включены в графические заставки среднего размера в верхней части домашних страниц или в графические изображения или логотипы, характерные для ваших страниц. Например, Palm использует на своей домашней странице меню карт изображений с эффективным использованием пространства. Графика — это больше, чем меню; это помогает определить характерный «внешний вид» страниц на веб-сайте Palm:


www.palm.com

Карты изображений — единственный способ включить несколько ссылок в графическую иллюстрацию, как в этом анатомическом примере:


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

Справочное руководство по HTML: Глава 2

Справочное руководство по HTML: Глава 2 [предыдущая] [следующая] [наверх] [внизу] (1 из 1)

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

Некоторые браузеры могут читать самые разные типы файлов изображений, но некоторые могут читать только некоторые из них. Самый читаемый формат файлов .GIF. Существует множество условно-бесплатных продуктов, которые создавать .GIF или переводить один тип изображения (например, .BMP) в .GIF. Файлы изображений JPEG обычно лучше подходят для фотографических изображения или изображения с большим количеством деталей. GIF-изображения могут быть лучше для изображений с большими просторами сплошного цвета.

Чтобы включить изображение в документ HTML, используйте тег .

Предыдущая строка включает файл some.gif в вашем HTML-документе. Это предполагает, что файл находится в том же каталоге как ваш HTML-документ. Если файл находится в другом каталоге, используйте либо относительный или абсолютный путь.

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

Элементы

Тег изображения имеет несколько атрибутов, управляющих графика. Первый – это СРК. Это определяет источник для графики — Файл изображения .GIF.

Вы можете контролировать расположение изображения относительно текста строки, в которой он появляется, с помощью атрибута ALIGN. Вы можете установить ВЫРАВНИВАНИЕ на одно из девяти различных значений: ВЛЕВО, ВПРАВО, ВЕРХ, АБСМИДДЛ, ABSBOTTOM, TEXTTOP, MIDDLE, BASELINE или BOTTOM. Если вы не укажете выравнивание, по умолчанию это НИЗ.

Три способа выравнивания изображений.

Некоторые браузеры не могут отображать изображения. Вы можете включить текстовая строка, описывающая изображение с помощью атрибута ALT.

В следующем примере отображается изображение и включает описательный текст для браузеров, которые не могут отображать изображения:

 Это моя иконка
 

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

 <час>

текст вокруг  изображения.

<час>

верхний текст вокруг



изображение.

<час>

absmiddle текст вокруг



изображение.

<час>

absbottom текст вокруг



изображение.

<час>

базовый текст вокруг



изображение.

<час>

левый текст вокруг



изображение.

О, если бы мы только могли заставить текст обтекать изображение. мы могли бы сделать

такое отличное форматирование, если бы у нас была возможность позволить тексту обтекать

изображения всех видов: фотографии животных, растений, зданий и людей,

или простые линейные рисунки различных полезных видов. 


<час> правый текст вокруг изображение. О, если бы мы только могли заставить текст обтекать изображение. мы могли бы сделать такое отличное форматирование, если бы у нас была возможность позволить тексту обтекать изображения всех видов: фотографии животных, растений, зданий и людей, или простые линейные рисунки различных полезных видов.
<час>

Связывание изображений с другими страницами

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

 
 

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

 У меня крутой значок
 

Чересстрочные GIF-файлы

Чересстрочная развертка — это функция формата файла GIF. который позволяет средству просмотра или браузеру отображать файл с постепенно увеличивающимся детали за четыре последовательных прохода. Когда Navigator загружает чересстрочный GIF, первый проход начинается со строки 0 и отображает каждую восьмую строку растрового изображения данные; второй проход начинается со строки 4 и также отображает каждую восьмую строку. Точно так же третий и четвертый проходы постепенно загружают больше данных в нелинейным образом, пока не будет загружено полное изображение.

Когда Navigator загружает чересстрочный GIF, изображение постепенно исчезает. Когда загружено 50 % чересстрочного GIF-файла, пользователь может интерпретировать изображение, поскольку видна каждая четвертая строка данных. Когда Navigator загружает не чересстрочный GIF, каждая строка данных загружается последовательно. Когда загружено 50% не чересстрочного GIF, только верхняя половина изображения видно.

Навигатор и большинство других браузеров, поддерживающих формат GIF поддерживает чересстрочные GIF-файлы. Доступны сторонние инструменты в Интернете, чтобы вы могли преобразовать не чересстрочный GIF в чересстрочный формат.

Карты изображений

Карта изображения — это графическое изображение с кликабельными областями. которые ссылаются на разные страницы. Например, у вас может быть изображение с квадрат и круг, где щелчок по квадрату приведет вас на одну страницу и щелчок по кругу приведет вас на другую страницу.

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

HTML предоставляет две формы карт изображений:

  • Карты изображений на стороне клиента определяются комбинацией MAP и AREA. теги и загружаются в навигатор как гиперграфика. Когда пользователь нажимает изображение, Навигатор определяет, какой URL загрузить на основе информации в теге ОБЛАСТЬ. Атрибут USEMAP тега IMG определяет изображение как карта изображения на стороне клиента. Карты изображений на стороне клиента обычно реагируют быстро, и могут быть разработаны и протестированы на месте.
  • Карты изображений на стороне сервера определяются комбинацией A и IMG теги и загружаются в навигатор как обычные файлы IMG. Когда пользователь щелкает изображение, сервер определяет, какой URL загрузить. Атрибут ISMAP тега MG определяет изображение как карту изображений на стороне сервера. Серверная часть карты изображений могут реагировать медленнее, потому что обработка обычно занимает разместить на сервере. Для получения информации о том, как использовать Navigator JavaScript для локальной обработки см. Руководство по JavaScript.

Карта изображения на стороне клиента

Определение карты изображения на стороне клиента выполняется в два этапа. процесс:

  1. Определите карту с помощью тегов MAP и AREA. Тег MAP содержит один или более тегов AREA. Каждый тег AREA описывает отдельный регион как гиперссылку. на изображении и указывает URL-адрес, к которому он подключается.
  2. Свяжите определение карты с определенным изображением, указав Атрибут USEMAP тега IMG. Атрибут ИМЯ of MAP задает имя для карты изображения. На это имя ссылается Атрибут USEMAP в IMG, чтобы связать определение карты с изображением.

Карта изображений на стороне сервера

Определение карты изображений на стороне сервера выполняется в два этапа. процесс:

  1. Создайте файл .map, содержащий регионы для вашего файла изображения. и сохраните этот файл на сервере. Вы должны хранить его в том же каталоге как файл изображения.
  2. Ссылка на файл изображения и карты в HTML-файле с помощью IMG ярлык.

Когда пользователь щелкает область изображения на стороне сервера map, браузер отправляет координаты клика на сервер. программа imagemap на сервере использует координаты и базу данных чтобы определить URL для загрузки.

Чтобы создать карту изображений на стороне сервера, поместите IMG внутри ссылки и используйте атрибут ISMAP тега IMG, чтобы указать что изображение является картой изображения на стороне сервера. Например, чтобы включить изображение с именем logo.gif в качестве изображения на стороне сервера, используйте следующее строки в файле HTML (и убедитесь, что файл logo.gif находится в тот же каталог):

 




 

Указание областей для изображений на стороне клиента

Для изображений на стороне клиента используйте атрибут SHAPE. чтобы указать любую из следующих форм для области, определенной ОБЛАСТЬЮ тег:

  • rect указывает, что область, заключенная в AREA, является прямоугольником.
  • poly указывает, что область, заключенная в AREA, является многоугольником.
  • Circle указывает, что область, заключенная в AREA, представляет собой круг.
  • по умолчанию указывает регион по умолчанию. Вы можете использовать значение по умолчанию регион, чтобы указать URL для любой части изображения, не покрытой другим область, край.

На рис. 2.3 показано различные формы, которые может иметь область карты.

Определение регионов на карте изображения

Если вы не укажете атрибут SHAPE, Navigator использует «прямоугольник» в качестве значения по умолчанию.

Используйте атрибут COORDS для указания координат области, определяемой тегом AREA. Координаты варьируются в зависимости от значение атрибута ФОРМА:

  • Для прямоугольника x1 и y1 укажите верхний левый угол области, а x2 и y2 указывают нижний правый угол региона.
  • Для полигона, x1 и y1 указать первую вершину, x2 и y2 указывают вторую вершину и так далее. Чтобы замкнуть многоугольник, координаты последней вершины должны совпадать с координатами для первой вершины.
  • Для круга x-center и y-center укажите координаты центра, а радиус задает радиус круга.

Координаты указаны в системе с отсчетом от 0. Например, в области высотой 100 пикселей и шириной 100 пикселей координаты верхнего левого угла равны 0,0, а координаты нижнего правый угол 99,99.

Некоторые сторонние инструменты доступны в Интернете чтобы вы могли визуально указать координаты области карты.

Когда область, определенная одним тегом AREA, пересекается другой, регион, который определен первым в определении карты, имеет приоритет в области перекрытия.

Указание областей для изображений на стороне сервера

Для изображений на стороне сервера вы создаете текст ASCII файл с расширением .map, который содержит координаты областей вы хотите связать. Координаты указаны от левого верхнего угла изображения. Есть несколько хороших приложений для работы с изображениями, которые дадут вам координаты точки на изображении.

Каждая строка в файле карты указывает кликабельный область, край. Строки имеют формат:

   метод URL-адрес координата1 координата2

Метод определяет форму, указанную координатами. Методы могут быть:

    URL-адрес точки
  • x,y указывает точку на изображении, на которую можно щелкнуть. это полезно если вы щелкнете по неопределенной области, потому что щелчок будет отправлен ближайшему укажите на щелкнутую область.
  • URL-адрес круга x,y x,y указывает круг. Кругам нужны две координаты — центр круга и любая точка на краю круга.
  • rect URL x,y x,y определяет прямоугольник по его верхнему левому и нижнему краю. правые углы.
  • poly URL x,y x,y определяет многоугольник до 100 сторон. Каждая пара x, y точка, где сходятся две стороны многоугольника. Последняя пара x,y подключен к первому, чтобы заключить многоугольник.
  • URL-адрес по умолчанию определяет URL-адрес для перехода, когда кто-то щелкает в области не указаны ни по одному региону. Если вы используете точку в файле карты, то значение по умолчанию никогда не используется.

Следующий текст представляет собой пример файла карты. Линии начинающиеся с # — это строки комментариев, которые игнорируются сервером.

 # образец изображения файла карты

# Это верхний левый круг

круг http://www.netscape.com/funstuff 37,39 32,62

# Это прямоугольник посередине

прямой http://www.netscape.com/fabulous 75,7 150,39# Это точка

точка http://www.netscape.com/homepage 125,62

# Вот этот странный многоугольник

поли http://w3.netscape.com/ 175,35 190,5 200,10 220,9 219,37 203,62
 

Указание назначения ссылки

Когда пользователь щелкает область карты, Navigator отображает страница, указанная URL-адресом в атрибуте HREF.

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

Эрик Бина говорит, что мы не поддерживаем размещение MAP и IMG в отдельных файлах.

Если тег MAP и связанный с ним тег IMG находятся в разные файлы, и вы указываете относительный URL-адрес для атрибута HREF, полный URL-адрес для HREF создается с использованием URL-адреса документа, который содержит тег MAP в качестве ссылки. Если документ, содержащий MAP использует тег BASE, полный URL-адрес для HREF создается с использованием тега BASE. Значение HREF в качестве ссылки.

Любая область изображения, не имеющая Атрибут HREF не работает как гиперссылка. Если вы явно хотите чтобы регион не функционировал как гиперссылка, укажите NOHREF атрибут.

Используйте атрибут TARGET, чтобы указать имя окна или фрейма, в котором отображается URL-адрес назначения. Если вы этого не сделаете укажите атрибут TARGET, Navigator отобразит URL-адрес назначения в текущее окно или фрейм.

Пример 1: карта изображений на стороне клиента в качестве панели инструментов

В этом примере карта изображений используется в качестве панели инструментов чтобы помочь пользователям перемещаться по веб-сайту. На следующем рисунке показано как готовая карта изображений выглядит для пользователя:

Каждая кнопка на панели инструментов является отдельной областью карты изображения. Семь кнопок соответствуют областям, определенным семью Теги ОБЛАСТЬ. Следующий код определяет карту:

 <ИМЯ КАРТЫ="mainmap">

<КООРДЫ ОБЛАСТИ="0,0,65,24" HREF="/escapes/index.html">

<КООРДЫ ОБЛАСТИ="66,0,132,24" HREF="/comprod/index.html">

<КООРДЫ ОБЛАСТИ="133,0,185,24"

HREF="http://merchant.netscape.com/netstore/index.html"

ЦЕЛЬ="_top">

<КООРДЫ ОБЛАСТИ="186,0,248,24" HREF="/newsref/index.html">

<КООРДЫ ОБЛАСТИ="249,0,318,24" HREF="/assist/index.html">

<КООРДЫ ОБЛАСТИ="319,0,390,24" HREF="/commun/index.html">

<КООРДЫ ОБЛАСТИ="391,0,467,24" HREF="/business_solutions/index. html">


 

Поскольку атрибут SHAPE не указан ни для одного AREA форма каждой области по умолчанию представляет собой прямоугольник. Третья ОБЛАСТЬ тег использует значение «_top» для своего атрибута TARGET, чтобы указать что его URL загружается в полное окно Navigator.

Для панели инструментов используется изображение nav.gif, чересстрочный GIF. Тег IMG, который загружает nav.gif, использует USEMAP. атрибут, чтобы указать, что изображение является картой изображения на стороне клиента. Значение атрибута USEMAP, mainmap, также является значением, используемым для Атрибут NAME тега MAP. Следующий код связывает карту с изображение:

 
 

Пример 2: карта изображений на стороне сервера

В этом примере файл изображения logo.gif обрабатывается как карта изображений на стороне сервера, поскольку она загружается с помощью ISMAP атрибут. Тег IMG реализован внутри ссылки. Когда пользователь нажимает ссылка, координаты клика передаются в карту изображений программу в каталоге cgi-bin сервера. Файл map_logo.map файл на сервере, который содержит информацию о координатах изображение логотипа.gif. Имя файла map_logo.map передается в качестве параметра программы imagemap.

 




 

Пример 3: сочетание серверной и клиентской стороны карты изображений

В этом примере атрибуты USEMAP и ISMAP оба тега IMG указаны, поэтому изображение можно обрабатывать как карта изображения на стороне клиента или карта изображения на стороне сервера. Атрибут USEMAP имеет приоритет. Если браузер, обращающийся к странице, поддерживает клиентскую карты изображений, затем изображение обрабатывается как карта на стороне клиента; в противном случае, изображение обрабатывается как карта на стороне сервера.

 




 

Графические изображения HTML

Графические изображения HTML
Нажмите на выбор здесь СРЦ ВЫРОВНЯТЬ «ОСТАВИЛ» «ПРАВИЛЬНО» «ТОП» «ТЕКСТОП» «СЕРЕДИНА» «АБСМИДДЛ» «БАЗА» «НИЖНИЙ» «АБСБОТТОМ» ШИРИНА ВЫСОТА ГРАНИЦА HSPACE VSPACE ALT ИСМАП ПОЛЬЗОВАТЕЛЬСКАЯ КАРТА Коллекция графических изображений Teds или прокрутите страницу вниз.

Вернуться на главную страницу Teds HTML Tutorial

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

Чтобы разместить графическое изображение где-нибудь на странице, пустой im a г Электронная бирка используется:

  • : указывает, что изображение, такое как фотография, значок, анимация, мультфильм или другая графика, должно отображаться в этом месте.
Тег должен содержать дополнительные параметры как часть команды:
  • SRC=»URL/graphic.gif или .jpg» : содержит URL-адрес (унифицированный указатель ресурсов или веб-адрес) и имя файла графического изображения, например graphic.gif или graphic.jpg. Чаще всего фотография, значок или другое графическое изображение имеет формат gif (изображение в формате обмена графическими изображениями) или jpg (изображение Объединенной группы экспертов по фотографии), оба из которых распознаются большинством браузеров. Некоторые браузеры также распознают bmp (растровое изображение) и tif или tiff (изображение в формате файла изображения тега).
         Обычно источник местоположения графического файла находится в соседнем каталоге, таком как графика, или может быть в том же каталоге. Предполагая, что изображение представляет собой изображение в формате .jpg, если графика находится в соседнем графическом каталоге, тег будет выглядеть так: . Если изображение находится в том же каталоге, что и документ, тег будет читаться просто: . Если изображение находится в другом месте в Интернете, тег может выглядеть примерно так: .
  • ВЫРАВНИВАНИЕ=»ЛЕВО»|»ПРАВО»|»ВЕРХ»|»ТЕКСТВЕРХ»|»СРЕДНЯЯ»|
    «ABSMIDDLE»|»BASELINE»|»BOTTOM»|»ABSBOTTOM»
    : размещает графическое изображение в указанной позиции относительно полей страницы или текста. (Некоторые браузеры не распознают все эти параметры.)   «LEFT» выравнивает изображение по левому полю страницы и позволяет тексту обтекать правую часть изображения.
       «RIGHT» выравнивает изображение по правому полю страницы и позволяет тексту обтекать левую часть изображения.
Примечание.  Единственный способ центрировать изображение по горизонтали на странице — использовать теги
и
вокруг тега . Однако центрирование изображения таким образом предотвратит обтекание текстом любой стороны от него. Кроме того, любой параметр ALIGN=»RIGHT» или ALIGN=»LEFT в теге переопределит эффект центрирующих тегов. «ВЕРХ» выравнивает верхнюю часть изображения по верхней части самого высокого элемента в строке.
«TEXTTOP» выравнивает верхнюю часть изображения по верхней части самого высокого текста в строке; обычно, но не всегда, совпадает с параметром «TOP».
   «СРЕДНЯЯ» выравнивает середину изображения по базовой линии текущей строки.
   «ABSMIDDLE» выравнивает середину изображения по середине текущей строки.
   «BASELINE» выравнивает нижнюю часть изображения по базовой линии текущей строки.
   «НИЗ» совпадает с параметром «БАЗОВЫЙ».
   «ABSBOTTOM» выравнивает нижний край изображения по нижнему краю текущей строки; обычно, но не всегда, совпадает с параметром «BASELINE» или «BOTTOM».
  • WIDTH=»W» : определяет ширину W изображения в пикселях.
  • HEIGHT=»H» : определяет высоту H изображения в пикселях.
  • Примечание. Параметры WIDTH и HEIGHT, включенные в тег , ускоряют загрузку каждого графического изображения в браузер. Для страницы с большим количеством графики это может значительно сократить время, необходимое для полного отображения страницы. Ширину и высоту графического изображения можно определить с помощью графического программного обеспечения, такого как Paint Shop Pro или Adobe Photoshop. пропорционально можно сделать меньшее пространство , в которое может поместиться изображение (например, изображение размером 40 ×  60 в пространство 20  ×  30), сохраняя при этом отчетливый внешний вид. Однако, если изображение вписывается в пространство 90 289, пропорционально увеличенное на 90 288 (например, изображение размером 40  ×  60 в пространство размером 50  ×  75), оно будет выглядеть грубым и зернистым.
  • BORDER=»B» : создает рамку вокруг изображения с одинаковой шириной B в пикселях. (Если изображение включено в качестве гиперссылки, непросмотренные, активные и посещенные цвета границы будут такими же, как и у других текстовых гиперссылок на странице. ) значение по умолчанию : BORDER=»2″ (то есть граница шириной 2 пикселя). BORDER=»0″ приводит к тому, что нет границы вокруг изображения гиперссылки.
  • HSPACE=»H» : создает пространство шириной H в пикселях между изображением и любым текстом справа и/или слева от него. (HSPACE означает h по горизонтали пробел .)
  • VSPACE=»V» : создает пространство высотой V в пикселях между изображением и любым текстом непосредственно над и/или под ним. (VSPACE означает v ertical пробел .)
  • ALT=»альтернативное описание» : предоставляет описание изображения, которое будет отображаться вместо изображения в неграфических браузерах. В типичных графических браузерах это описание будет отображаться до загрузки изображения, а также при размещении стрелки в любом месте изображения.
  • TITLE=»title» : та же функция, что и у тега ALT, который не распознается некоторыми браузерами.
  • ISMAP : указывает карту изображения на стороне сервера.
  • USEMAP : указывает карту изображения на стороне клиента.

    Ниже приведены шесть примеров параметров выравнивания графического изображения (и других) в исходном коде HTML и того, как изображение в каждом случае будет отображаться в браузере (некоторые из них могут выглядеть очень похожими на другие). В каждом случае браузеру предлагается получить файл chilippr.gif из подкаталога с именем graphics:

    .

    Это графическое выравнивание («ВЛЕВО»):

  • chilipepperКрасный перец чили — популярный продукт питания в Нью-Мексико.  Жаркость в этом перце создает химическое вещество капсаицин (C18H27NO3).  При употреблении в пищу в организме высвобождаются естественные эндорфины, которые не только уменьшают боль от жары, но и создают ощущение общего благополучия. выглядело бы так: Красный перец чили — популярный продукт питания в Нью-Мексико. Жар в этом перце создает химическое вещество капсаицин (C 18 H 27 NO 3 ). При употреблении в пищу в организме высвобождаются естественные эндорфины, которые не только уменьшают боль от жары, но и создают ощущение общего благополучия.
    Это графическое выравнивание («ВПРАВО»): chilipepper Красный перец чили — популярный продукт питания в Нью-Мексико.  Жаркость в этом перце создает химическое вещество капсаицин (C18H27NO3).  При употреблении в пищу в организме высвобождаются естественные эндорфины, которые не только уменьшают боль от жары, но и создают ощущение общего благополучия. выглядело бы так: Красный перец чили — популярный продукт питания в Нью-Мексико. Жар в этом перце создает химическое вещество капсаицин (C 18 H 27 NO 3 ). При употреблении в пищу в организме высвобождаются естественные эндорфины, которые не только уменьшают боль от жары, но и создают ощущение общего благополучия.

    Это графическое выравнивание («TEXTTOP»):

    Красный перец чилиперец чилиэто популярный продукт питания в Нью-Мексико.  Жаркость в этом перце создает химическое вещество капсаицин (C18H27NO3).  При употреблении в пищу в организме высвобождаются естественные эндорфины, которые не только уменьшают боль от жары, но и создают ощущение общего благополучия. выглядело бы так: красный перец чили — популярный продукт питания в Нью-Мексико. Жар в этом перце создает химическое вещество капсаицин (C 18 H 27 NO 3 ). При употреблении в пищу в организме высвобождаются естественные эндорфины, которые не только уменьшают боль от жары, но и создают ощущение общего благополучия.

    Это графическое выравнивание («ABSMIDDLE»):

    Красный перец чилиКрасный перец чилиchilipepperэто популярный продукт питания в Нью-Мексико.  Жаркость в этом перце создает химическое вещество капсаицин (C18H27NO3).   При употреблении в пищу в организме высвобождаются естественные эндорфины, которые не только уменьшают боль от жары, но и создают ощущение общего благополучия. выглядело бы так: красный перец чили — популярный продукт питания в Нью-Мексико. Жар в этом перце создает химическое вещество капсаицин (C 18 H 27 NO 3 ). При употреблении в пищу в организме высвобождаются естественные эндорфины, которые не только уменьшают боль от жары, но и создают ощущение общего благополучия.

    Это графическое выравнивание («ABSBOTTOM»):

    Красный перец чилиchilipepperэто популярный продукт питания в Нью-Мексико.  Жаркость в этом перце создает химическое вещество капсаицин (C18H27NO3).  При употреблении в пищу в организме высвобождаются естественные эндорфины, которые не только уменьшают боль от жары, но и создают ощущение общего благополучия. выглядело бы так: красный перец чили — популярный продукт питания в Нью-Мексико. Жар в этом перце создает химическое вещество капсаицин (C 18 H 27 NO 3 ). При употреблении в пищу в организме высвобождаются естественные эндорфины, которые не только уменьшают боль от жары, но и создают ощущение общего благополучия.

    Чтобы просмотреть и получить различные стационарные и анимированные графические изображения, перейдите на Teds Collection of Graphic Images.

    Перейти к гиперссылкам

    Вернуться на главную страницу Teds HTML Tutorial

    Copyright 1998 Ted M. Montgomery. Все права защищены.

    Основы HTML, которые должны знать все веб- и графические дизайнеры Блог веб-дизайна Помощь веб-дизайнерам и графическим дизайнерам

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

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

    Обычно дизайнеры сосредотачиваются на «презентационном слое», но сосредотачиваться только на нем — все равно, что рассматривать фасад здания. Великие дизайнеры понимают, что знание технологий не только улучшит дизайн, но и повысит их карьерные перспективы. Дизайнеры, которые знают, как кодировать, являются большим преимуществом для междисциплинарной команды. Многие считают, что люди, которые концентрируются на определенном навыке, являются более сильными профессионалами. С другой стороны, многие люди считают, что у дизайнера с несколькими навыками есть большое преимущество перед дизайнерами, которые не являются кодерами. В конце концов, ничто не должно останавливать дизайнера, который хочет приобрести еще один навык, например программирование.

    Что такое язык программирования?

    Пин-код

    Кодирование или программирование похоже на решение головоломки. Язык программирования — это способ общения с программным обеспечением. Людей, использующих эти языки программирования, называют разработчиками или программистами. Языки программирования сообщают программному обеспечению о структуре и стиле веб-страницы или о том, как перемещать объект, когда пользователи выполняют определенное действие.

    При разработке веб-страницы разработчики должны кодировать каждый аспект веб-сайта. Они должны написать инструкции в правильном порядке для достижения желаемых результатов. После этого ваш веб-браузер, такой как Safari, Chrome, Firefox и т. д., преобразует эти коды во что-то интерактивное, чтобы его было легко использовать. Без браузера это просто текстовый файл, который могут понять только программисты. Поэтому, когда вы открываете веб-страницу, ваш браузер загружает все задействованные языки программирования и предоставляет интерактивную визуализацию. Чтобы создать веб-сайт, графический дизайнер и веб-разработчики сотрудничают и определяют разделы, над которыми они будут работать. Если дизайнеры знают эти языки программирования, они могут лучше визуализировать идею веб-сайта. Наряду с этим, они могут помочь разработчику идеально реализовать свои визуальные эффекты.

    CSS и HTML технически не являются языками программирования. Это просто информация о стиле и структуре веб-страницы. HTML и CSS находятся во внешнем интерфейсе каждого приложения и веб-страницы. Приобретение некоторых фундаментальных знаний о внешнем интерфейсе, основанном на CSS и HTML, принесет большую пользу дизайнерам. HTML означает язык гипертекстовой разметки, а CSS — каскадные таблицы стилей (язык, описывающий стили компонентов в HTML-документе). Дизайнеры были бы шокированы, увидев, как легко изучить основы HTML и CSS. CSS и HTML не основаны на логике программирования. HTML описывает структуру страниц веб-сайта и является строительным блоком страниц. HTML с JavaScript и CSS составляют основу технологий для всемирной паутины. Проще говоря, HTML сообщает веб-сайту, что отображать, а CSS сообщает, как это отображать. CSS — это простая структура кода, которая определяет цвета, положение, типографику и размеры.

    HTML:

    PIN-код

    Язык гипертекстовой разметки (HTML) является основным строительным блоком при разработке веб-сайта. HTML — это базовый язык, и для построения структуры веб-страницы требуется запомнить только некоторые HTML-команды. Он состоит из ряда элементов, которые вы используете, чтобы содержимое отображалось определенным образом. Окружающие теги могут выделять слова жирным шрифтом, курсивом, уменьшать или увеличивать их. Так что лучше рисовать идеи, чтобы помочь вам визуализировать внешний вид вашего сайта. Также неплохо решить, как вы будете хранить свои файлы, будут ли они все в одном каталоге или нет. Кроме того, вам следует подумать, сохраните ли вы файл как файл .htm или .html. Кроме того, подумайте, хотите ли вы иметь один и тот же шаблон для всех своих веб-страниц или нет.

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

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

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

    Содержимое абзаца

    Используя HTML, вы можете вставлять изображения, управлять некоторыми стилями, форматировать абзацы, создавать списки, создавать специальные символы, добавлять заголовки, создавать ссылки, управлять разрывами строк, создавать таблицы, выделять текст и многое другое.

    CSS:

    Pin

    Каскадные таблицы стилей (CSS) — это язык программирования, управляющий HTML-элементами веб-сайта и определяющий внешний вид страницы. CSS позволяет дизайнерам вносить изменения на свои веб-страницы, такие как добавление полноэкранного главного изображения, центрирование веб-страницы в окне дисплея, шрифты, используемые на веб-сайте, и использование псевдоселектора для разработки интерактивного контента, такого как формы и ссылки. Это также помогает в настройке пространства между элементами HTML с отступами и полями. С помощью CSS вы визуализируете, как отступы, границы и поля влияют на высоту и ширину компонента. После внесения изменений в таблицу стилей CSS вашего веб-сайта можно автоматически вносить изменения на каждой странице. Вносить изменения с помощью CSS проще, когда ваш веб-сайт значителен. Кроме того, CSS не только экономит время, но и делает стиль вашего веб-сайта согласованным.

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

    Кроме того, CSS уменьшит код и вместо этого увеличит содержание, которое имеет решающее значение для идентификации вашего веб-сайта поисковой системой. С момента появления Google Chrome у пользователей появилось больше браузеров, чем когда-либо, что делает совместимость браузеров серьезной проблемой для сайтов. Таблицы стилей CSS повышают адаптивность веб-сайта и гарантируют, что больше пользователей смогут просматривать ваш веб-сайт так, как вы задумали.

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

    Важность совместного использования HTML и CSS:

    Пин-код

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

    Проще говоря, CSS присваивает свойства тегу HTML, будь то несколько тегов, один тег, весь документ или несколько документов. Он существует, потому что были разработаны цвета и шрифты. Веб-дизайнерам пришлось немало потрудиться, чтобы адаптировать HTML к этим новым функциям. В 1990 году HTML не был разработан для отображения информации о физическом форматировании. Он предназначался только для определения структуры документа. HTML перерос все функции дизайна, а CSS был выпущен и изобретен в 1996 году. Затем все форматирование было удалено из документа HTML и сохранено в отдельном файле как .css.

    Каждый веб-браузер имеет таблицу стилей по умолчанию, поэтому, когда вы переходите на веб-страницу, каждая страница имеет по крайней мере одну таблицу стилей, влияющую на нее. Таблица стилей по умолчанию зависит от того, что использует посетитель. Например, если на веб-сайте нет таблицы стилей, посетитель увидит таблицу стилей по умолчанию, установленную для его браузера. Однако, если веб-разработчик установил таблицу стилей для своего веб-сайта, веб-сайт не будет отображать таблицу стилей по умолчанию. Вот где в игру вступает слово «каскадирование» CSS. Последний определенный лист стилей сообщит браузеру посетителя, какие инструкции имеют приоритет.

    Преимущества знания HTML и CSS:

    Пин-код

    Обучение кодированию пользовательского интерфейса и его предварительный просмотр дает дизайнерам возможность увидеть, как все будет выглядеть на разных устройствах. Если дизайнеры работают с HTML и CSS, они увидят, что все измеряется в пикселях (другие измерения, такие как проценты и «ems», будут преобразованы в пиксели). Понимание структуры и размеров кода, то есть того, как будут отображаться страницы, поможет лучше понять процесс разработки интерфейса. Это позволит дизайнерам практически думать о своих проектах и ​​о том, как сделать процесс более эффективным. Они поймут, чего можно достичь, а что будет сложно.

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

    Помимо обычных преимуществ, возможности трудоустройства увеличиваются, если вы знаете, как программировать, поскольку это упрощает повседневную работу и процессы проверки. Рекрутеров дизайнерских компаний всегда привлекают гибридные профили. Особенно начинающие компании стремятся найти кандидатов, которые могут работать как в области внешнего интерфейса, так и в области дизайна. Однако некоторые разработчики и дизайнеры опасаются видеть людей, обладающих обоими навыками. Но правда в том, что каждый человек должен проанализировать свои возможности, сосредоточившись на том, что увеличивает его шансы на успешную карьеру. Дизайнерам не обязательно знать все о кодировании, но основы HTML и CSS могут внести значительный вклад в ваш профиль. Изучение основ должно быть легким для дизайнеров. Чем больше знают дизайнеры, тем больше они могут исследовать различные возможности трудоустройства.

    Базовые знания HTML и CSS необходимы для того, чтобы стать прогрессивным графическим дизайнером в этом конкурентном мире. Учитывая все эти преимущества, графический дизайнер должен научиться программировать, чтобы продвинуться по карьерной лестнице. Наряду с пониманием практического использования ваших проектов, знание того, как кодировать, также позволяет вам повысить свою креативность. Вы сможете набросать свои проекты в Sketch или Photoshop, а затем воплотить свои планы так, как вы себе это представляли. Кроме того, вам не придется бежать к разработчику для решения мелких проблем с WordPress, а также разработчики будут охотно работать с вами. Независимо от того, являетесь ли вы фрилансером или работаете в дизайнерской компании, незнание языков программирования в конечном итоге ограничит вас и заставит застрять.

    Добавить комментарий

    Ваш адрес email не будет опубликован.