Искусство оформления сайта - [31]

Шрифт
Интервал

и косоугольную аксонометрию. Те же приемы можно успешно практиковать и веб-дизайнеру (о чем см. п. 1.4 настоящего пособия).

Другим простым графическим элементом является кодируемая горизонтальная линия. Чтобы она появилась на страничке, достаточно набрать код ‹hr›. Добавляя этому непарному тэгу атрибуты width (длина), align (расположение) и size (толщина, размер), мы можем изменять свойства линии и даже превращать ее в геометрические фигурки. Обычно длина линии задается в процентах от величины страницы. Оптимумом для разделяющей черты считается значение 70–80 %. Но допустимо задавать длину в пикселях. При этом мы обретаем возможность нарисовать фигурку. Так, атрибуты width=60 и size=20 дают нам прямоугольник, а атрибуты width=50 и size=50 – квадрат. Цвет линии и фигурок на ее основе задается следующим образом: ‹hr noshade width=… size=… color=“red (blue, etc.)”›.

Вставка настоящего рисунка в веб-документ тоже предельно проста, она осуществляется посредством навигационной панели Web Page Maker, где есть иконка Image (или через меню Insert › Image – «Вставка › Изображение»). Но нужно уметь и пользоваться кодом. Тем более что он несложен, основывается на использовании одинарного тега ‹img›. Рассмотрим пример: ‹img src=“images/very_beautiful_girl.jpg"›: на страничке задан рисунок very_beautiful_girl.jpg, который броузер должен открыть из папки images. Атрибут src означает описание, дескрипцию тэга. Сейчас описание у нас никуда не годится, зададим дополнительные атрибуты: ‹img width=536 height=427 border=0 src=“images/very_beautiful_girl.jpg"›. Теперь у нас есть ширина, высота рисунка и толщина обрамляющей его рамки.

Эксперимента ради попробуем изменить толщину границы, напишем вместо нуля 10. Страшновато получилось (см. рис. 23, a), вот почему лучше нам добавить к рисунку новый тэг ‹div› и написать вот такую штуку: ‹div style=“border:#808080 16px window-inset"›‹img width=536 height=427 border=0 src=“images/very_beautiful_girl.jpg"›‹/div›. Тэг парный, открывающий и закрывающий свойства пространства вокруг рисунка. В данном случае, через значение border атрибута style, мы выбрали границу толщиной 16 пикселей, с форматом window-inset (оконная рама) и с расцветкой #808080 (один из оттенков серого). Мило, но выбранная нами рамка не подходит картинке по размеру (рис. 23, b). Вот почему проще будет задать указанные свойства через наш веб-конструктор. Откроем Web Page Maker, создадим новый документ, импортируем в него картинку, выделим ее и кликнем на иконку свойств Properties. Выбираем закладку Colors and Borders – заливки и границы, здесь выставляем параметры рамочки (рис. 24).

Рис. 23. Неудачные решения для рамочки
Рис. 24. Решение для рамочки от Web Page Maker

Пока мы в «Свойствах», не забудем поставить для этой картинки альтернативный текст. Выберем закладку Image и запишем название рисунка в окошечке Alt text.

Примечательно, что тэг ‹img› тоже имеет собственный атрибут align=. Когда рисунок находится в блоке ‹div›, это не особенно важно, смысл этот атрибут приобретает при внедрении рисунка в текст. Различаются следующие варианты расположения картинки:

align=“left” – текст обтекает рисунок, который располагается слева;

align=“right” – текст обтекает рисунок, который располагается справа;

align=“top” (или “texttop”) – рисунок внутри текстовой строки, его верхняя граница совпадает с верхней границей букв текста;

align=“middle” (или “absmiddle”) – рисунок внутри текстовой строки, которая вертикально выравнивается по центру рисунка;

align=“bottom” (также “absbottom” либо “baseline”) – рисунок внутри текстовой строки, и его нижняя граница совпадает с нижней границей букв текста.

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

Теперь о параметрах рисунка. Четкость растрового изображения зависит от числа точек на единицу площади. Разрешение любой графики для сети может иметь лишь два значения – 72 и 96 dpi, то есть точек на кв. дюйм. Это разрешение выставляется в графическом редакторе через функцию Imige Size (размер рисунка). Иногда приходится видеть, как броузеры охотно открывают рисунки с невообразимым разрешением, но вам бездумно надеяться на фарт не следует. Максимальное значение длины и/или ширины картинки должно составлять 400 пкс, причем желательно ограничиться 310 пкс. Рисунок, имеющий длину или ширину около 500 пкс и свыше, считается гигантским. Такие иллюстрации надо помещать только в фотогалерею.

Перед размещением на веб-страничке всякий рисунок следует обработать для осветления и добавления контрастности, в противном случае он скорее всего покажется посетителю темным размазанным пятном. В большинстве графических редакторов, и особенно в Фотошопе, осветление наилучшим задается посредством «кривых» (рис. 25). Для этого требуется пройти путь Imige › Adjustments › Curves (Изображения › Настройки › Кривые). Осветление рисунка производится в режиме RGB. В дальнейшем производится повышение контрастности, за счет чего возрастает резкость и четкость изображения (рис. 26). В Фотошопе контраст увеличивают, проходя путь Imige › Adjustments › Brightness or Contrast… (Изображения › Настройки › Яркость или Констраст).


Еще от автора Сергей Николаевич Бердышев
Организация выставочной деятельности

Настоящее издание посвящено правовым, техническим, управленческим и бухгалтерским вопросам организации и проведения выставочной деятельности. Книга затрагивает такие существенные моменты, как бюджетирование выставки, управление затратами, кастинг и тренинг персонала и т. д. Уделено внимание и недостаточно освещенным в литературе сторонам выставочной деятельности: дизайну павильона, выбору музыки, еде и напиткам, одежде, косметике и бодиарту для стендистов.Издание рассчитано в первую очередь на маркетологов и рекламистов, а также на студентов, обучающихся по специальностям 350700 «Реклама» и 350400 «Связи с общественностью».


Искусство управления складом

Настоящее практическое пособие по складскому делу охватывает такие аспекты управления складом, как организация и контроль работ, оптимизация технологических процессов, внедрение НОТ, автоматизация и механизация с учетом появления новых видов машин и устройств (в особенности погрузочно-разгрузочных), управление запасами и их инвентаризация.Издание затрагивает производство работ на складах и базах предприятий всех типов – промышленных, торговых, посреднических, а также специализирующихся на оказании услуг по хранению ТМЦ.Книга адресована руководителям компаний, содержащих складское хозяйство, линейным менеджерам, управляющим складами и складскими подразделениями, сотрудникам оптовых и розничных складов, студентам ВУЗов, изучающим логистику и деловое администрирование.


Открытия и изобретения, о которых должен знать современный человек

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


Информационный маркетинг

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


Рекламный текст. Методика составления и оформления

Настоящее пособие предлагает читателю широкий обзор эффективных технологий по созданию оригинальных и качественных рекламных текстов любого объема и любой степени сложности. Издание охватывает такие темы, как составление и дизайн текста, подбор лексики, работа со стилем, графическое сопровождение текста, создание текстов и гипертекстов для Интернета, текст в бодиарте и многое другое.Книга рассчитана на рекламистов, копирайтеров, корректоров рекламных текстов, маркетологов, психологов, бизнесменов, а также на студентов, обучающихся по специальностям 350700 «Реклама» и 350400 «Связи с общественностью».


Технологии работы с клиентами разной трудности

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


Рекомендуем почитать
Черный список

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


Добавьте в корзину. Ключевые принципы повышения конверсии веб-сайтов

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


Google. Прорыв в духе времени

Эта книга – захватывающая история самой успешной Интернет-компании в мире. В последнее время финансовый результат деятельности Google Inc. превосходит даже самые смелые ожидания инвестиционных аналитиков.Целеустремленность, научный талант, творческий поиск, смелость и любовь к эксперименту основателей компании – бывшего москвича Сергея Брина и выходца из штата Мичиган Ларри Пейджа – проложили путь к долгосрочному успеху компании. Под их руководством поисковый механизм Google стал популярнейшим ресурсом, который пользователи любят за удобство и уже испытывают к нему сильную эмоциональную привязанность.


Даркнет: Война Голливуда против цифровой революции

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


Противодействие черному PR в Интернете

Черный PR сегодня активно перемещается в Интернет. В свое время кольт сделал людей равными. Сегодня Интернет уравнял финансово сильных и слабых в медиапространстве. Глобальная сеть позволяет рядовому человеку разорить могущественную корпорацию. Маленькая компания может эффективно противостоять транснациональному монстру, не располагая никакими финансами. Умение отражать информационные атаки стало на редкость насущной проблемой для любого бизнеса.В этой книге показаны все необходимые для отражения информационного нападения в Интернет инструменты и раскрыты секреты их применения.


Образование русскоязычного сегмента Фидонет в Западной Европе

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