Искусство оформления сайта. Практическое пособие
Шрифт:
Установите эту программку на свой ПК и смело продолжайте чтение. Произведите запуск программы и выберите режим создания курсора. Для начала желательно начать с неподвижного, поскольку он менее трудоемок. Перед вами откроется панелька для рисования. В ней надо заполнить клеточки соответствующими красками, а свободное пространство оставить незакрашенным. С такой работой справится и любой детсадовец, обожающий раскраски, поэтому оставляю данный этап без комментариев. Покажу только готовый результат: см. рис. 33. И заодно напишу код, который нужно использовать в html-документе, чтобы на данной страничке использовался ваш курсор:
‹style›‹!-BODY{
cursor: url(“http://название вашего веб-узла/cursors/название вашего курсора. ani”);
}-›‹/style›
1) выбор объекта (иконка или курсор); 2) готовый курсор в виде карандаша
На всякий случай можно написать расширение *.ani, словно бы ваш курсор будет анимационным, однако на самом деле он может быть каким угодно, в том числе и неподвижным с расширением *.cur. Обратите внимание на другой момент. Рекомендуется хранить ваш курсор в отдельной директории корневого каталога на сайте. В другой записи та же самая команда по использованию вашего курсора имеет вид:
‹body style=“cursor: url(http://название вашего веб-узла/cursors/название вашего курсора. ani);”›‹-Прочая информация на страничке– ›‹/body›
Анимационный курсор изготавливается путем внедрения в рисунок новых фреймов, для чего следует запустить Microangelo Animator и пройти путь Tools › New Frame(s) – «Инструменты › Новый фрейм (новые фреймы)».
В этой же программке можно с успехом рисовать крохотные иконки favicon. Такие микроскопические картиночки представляют еще один способ индивидуализации как самого ресурса, так и его посетителя. Когда используется иконка favicon? Это значок сайта, она применяется в тех случаях, когда требуется отобразить некий символ в адресной строке броузера перед URL страницы, а также в качестве иконки к закладке (в Избранном, см. рис. 34). Первым делом мы сохраняем изготовленную нами иконку как favicon.ico, после чего загружаем на сайт в основную директорию сайта (корневую папку). Затем вносим в каждую из страничек ресурса код: ‹link rel=“shortcut icon” href=“http://адрес вашего сайта/favicon.ico”›. Этот код размещается в заголовке ‹head›.
Наш следующий герой – аватар. Авики могут быть статическими, то есть неподвижными, и анимированными. Удобнее всего изготавливать статические аватары в Photoshop, а подвижные – в Image Ready. Специфическим свойством авика являются его размеры и форма. Это всегда квадрат величиной 100 х 100, реже – 64 х 64, 80 х 80, 120 х 120. Набросаем алгоритм создания аватара. Для начала откройте изображение, из которого намерены сделать авик, пройдя путь File › Open (Файл › Открыть). Обрежьте картинку инструментом Crop, после чего уменьшите размер аватарки: Image › Image Size до 100 х 100 или около того (по вкусу). Лучше всего сохранять готовую картинку File › Save for Web.
Речь об аватарах зашла неспроста. Конечно, страничка с аватарками для скачивания сделает развлекательный ресурс более популярным. Однако эта картинка отличается еще и той специфической особенностью, что может по-разному вести себя на сайте. Например, иногда она бегает за курсором, как приклеенная. Чтобы добиться такого, нужно написать в «шапку» документа скрипт, приведенный в табл. 3.
18
Смотри также коллекцию скриптов на http://obrazcats.narod.ru/pages/scripts/scripts.html
Затем в тело документа вносится следующий код:
‹span id='img00 style='position: absolute; left:-100px; top:-123px; z-index:1 ›‹img src='http://название
‹Script Language='JavaScript'›
‹!-
// End – ›‹/Script›
Желательно для подвижных аватарок подбирать небольшие размеры, порядка 80 х 80 или даже 64 х 64. Скрипты позволяют авикам не только бегать за курсором, но и неторопливо плавать за ним, с большим отрывом в расстоянии, а также просто свободно парить в пространстве сайта, плавно перемещаясь от стенки к стенке. Нужные скрипты вы сможете найти на «Образованных котятах», а пока нужно заметить, что злоупотреблять подобными фокусами даже на развлекательных ресурсах не стоит.
Полезный совет: начинающему веб-дизайнеру полезно знать, как хранить ценные скрипты, которые он может прочесть в справочнике или скачать с Интернета. [19] Для этих целей следует создать специальную папку «Скрипты» на диске D, а в ней субдиректории: «Графика», «Текст», «Математика», «Открытие странички», «Другие» – смотря по виду эффектов, которыми управляют скрипты. Когда у вас под рукой оказался полезный скрипт, который вы будете не раз использовать в работе, запустите простенький редактор вроде HTML Pad или Front Page. В нем создайте файл под кодовым номером, например script_007, и внедрите туда ваш скрипт в положенную часть (шапку и тело). В титуле документа укажите свойства скрипта, скажем: ‹title›Продвинутый калькулятор‹/title›. В дальнейшем из такого файла будет легко в нужный момент скопировать скрипт в разрабатываемый сайт.
19
Огромную коллекцию полезных бесплатных скриптов вы найдете на сайтахhttp://www.dynamicdrive.com,http://obrazcats.narod.ru и, конечно, на http://javascript.internet.com
Глава 5. Приложения
5.1. Готовые решения
В заключительной главе мы рассмотрим еще одну дизайнерскую программу из семейства W.Y.S.I.W.Y.G., которая позволяет новичку в деле веб-дизайна за считанные минуты создавать не просто отдельные странички, которые потом еще надо скреплять вместе, а сразу готовые сайты – правда, сайты небольшие и не очень сложные, но полученную заготовку всегда можно «обвешать» дополнительными страничками и дополнить различными хитростями. Знакомьтесь: HTML-редактор Net Objects Fusion. Поищите его на своем диске с веб-приложениями. Заметим, что начать рассказ о веб-дизайне можно было бы с описания этой программки, однако в этом случае на упрощение лучше не идти. Деятельность дизайнера, тем более, если рассматривать ее как искусство, становится понятнее, когда вдоволь поработаешь над каждой страничкой в отдельности. И ученический проект наш по этой же причине оказался столь сложным и необычным, связанным с астрологическими услугами.
Но временами деятельность веб-дизайнера оказывается более чем шаблонной, однообразной. В этом случае можно (особенно новичку) воспользоваться программным обеспечением, которое выполняет максимум рутинной работы. Ниже мы познакомимся с техникой создания: сайта-визитки, сайта по предложению работ и услуг, консультационного центра, интернет-магазина, электронного центра послепродажного обслуживания и сайта по продвижению финансовой рекламы. Причем не просто познакомимся, но и создадим несколько шаблонов, которые пригодятся вам в будущей деятельности.
Одновременно нам предстоит освоить на практике справедливость требования Net– centric corporate culture – требования необходимости веб-ориентированной корпоративной культуры. Сайт не должен копировать помятый клочок бумаги, который всунул мне в руку вчера сосед, сказав при этом: «Вот телефончик, звякни этим ребятам, у них купишь то, что тебе надо». Соседу-то спасибо огромное, но вот если какая-то фирма или любая другая организация задумает тем же способом заявлять о себе, то ничего хорошего нам ожидать не придется. Ориентация корпоративной культуры на интернет-маркетинг означает на практике тот факт, что сайт является не покоробленной от морского ветра вывеской на трактире «Адмирал Бенбоу», а полноценным электронным представительством компании.