рефераты конспекты курсовые дипломные лекции шпоры

Реферат Курсовая Конспект

Искусство оформления сайта. Практическое пособие

Искусство оформления сайта. Практическое пособие - раздел Искусство, Сергей Николаевич Бердышев ...

Сергей Николаевич Бердышев

Искусство оформления сайта. Практическое пособие

 

 

Сергей Николаевич Бердышев

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

Практическое пособие

 

Введение

 

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

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

Готовы к работе? Тогда отложите в сторону книгу, идите в магазин по продаже программного обеспечения («софта») и отыщите там диск со стандартным набором программ для веб‑дизайна, но чтобы при этом в комплект обязательно входила великолепная программка для новичков (и не только!) под названием Web Page Maker, что означает «Конструктор веб‑страниц». Установим эту программу на ваш компьютер, что совсем нетрудно сделать, так как все указания есть в прилагаемом файле Readme.txt. Вы спросите, пригоден ли ваш «комп» для профессионального, коммерческого веб‑дизайна. Уместный вопрос, и ответ на него можно найти в дальнейшем. А пока не станем бежать впереди паровоза, потому что ученическую страничку сделать можно на всяком ПК, где установлена Windows XP, Windows Vista или Windows 2000. Скорее всего, у вас какая‑то из этих операционных систем.

Откройте программку Web Page Maker («Веб Пейдж Мейкер»), кликнув пару раз на ярлычок, затерявшийся на рабочем столе. Перед вами выпрыгнет диалоговое окошечко Welcome (добро пожаловать), которое предложит – Create a web page through templates, то есть создайте веб‑страничку с помощью шаблона (рис. 1). Как видите, в этой программке есть небольшой, но оригинальный набор шаблонов. Выберем предлагаемую нам опцию: ставьте флажок и жмите ОК. Теперь компьютер предлагает выбрать шаблоны деловые или личные. Остановимся на личных, поскольку для деловых сайтов мы еще не доросли; подберем наиболее милый шаблончик: выделим его щелчком мыши и нажмем ОК.

 

Рис. 1. Создание веб‑странички по шаблону

 

Допустим вам приглянулся красивый пейзаж или большая фотография с изображением котят. Сохраним ученическую веб‑страничку на своем ПК через меню File › Save, придумав для нее название index. Почему именно такое? Потому что именно так обычно называется главная страничка сайта.

Страничка перед вашими глазами имеет какой‑то английский текст. Это перечисление достоинств программы Web Page Maker. Этот текст нам совершенно не нужен, поэтому мы заменяем его собственным. Во‑первых, разместим на главной страничке (она называется еще домашней, Home [page]) заголовок сайта, его русскоязычное название. Поскольку это ученический ресурс, то и назовем его «Образованные котята». Для этого кликнем дважды левой кнопкой мышки, наведя курсор на буквы заголовка. Откроется окошечко Text Editor – текстовый редактор. В этом окошечке удалите исходную надпись как обычно клавишами Delete или «забой» (Back Space) и сделайте свою: «Образованные котята».

Выделите ее курсором прямо в текстовом редакторе, а потом измените буквам цвет, начертание или даже шрифт по вкусу (см. рис. 2). На вашем компьютере должны быть установлены популярные текстовые редакторы Word и Блокнот или, по крайней мере, один из них. Откройте любой из них и наберите в чистом окошке следующее: «Дорогие друзья! Образованные котята приветствуют вас!» и еще какой‑нибудь текст, возможно, даже абракадабру. Теперь дважды кликните мышкой на средний текстовый блок и через редактор осуществите вставку Ctrl + V вашего текста вместо рекламы. Для красоты слова «Дорогие друзья!» отбили Enter’ом и сделали полужирными, выделив их с этой целью курсором и нажав на букву В (bold – полужирное начертание) на панели инструментов Text Editor.

 

Рис. 2. Работа в текстовом редакторе программы Web Page Maker

 

Аналогично меняем надписи сбоку на слова: «О сайте», «Фото», «Видео», «Контакты». Это будут рубрики нашего сайта. В завершение из озорства можете вставить где‑нибудь сбоку милую картинку. Для этого кликните один раз на значок Image или воспользуйтесь панелью управления, проделав путь Insert › Image (Вставка › Изображение). Найдите на своем ПК оригинальную картинку и нажмите ОК. Вот только картинка эта разместилась как‑то неудачно. Но это не проблема: наводим на нее курсор, захватим рисунок левой кнопкой мыши и перетащим в более подходящее на наш взгляд место.

Что получилось у меня, вы можете увидеть, когда подключитесь к Интернету и забьете в строку поиска URL‑адрес http://obrazcats.narod.ru. Советую, во что бы то ни стало посетить этот ресурс, поскольку он является электронным приложением к настоящему пособию. Сайт «Образованные котята» содержит массу полезных советов, интересных статей, ученических страничек, галерею скриншотов и видео с изображением основных этапов работы по созданию сайта, а также большую коллекцию расходных материалов, которые вы можете совершенно бесплатно скачать и использовать при создании собственного веб‑узла.

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

 

Глава 1. Веб‑дизайн: искусство или ремесло

 

Веб‑дизайн как ремесло

Является ли искусством веб‑дизайн или это всего‑навсего ремесло? Вопрос, надо заметить, отнюдь не праздный: от него зависит создание… Очевидно, что живопись существует для того, чтобы главным образом радовать… Говоря откровенно, споры о выборе в пользу техники или искусства столь же нелепы, как и спор «физиков и лириков»,…

Рис. 3. Экспорт wpm‑файла в формат HTML

Веб‑дизайн как искусство

Задача веб‑дизайнера, как мы поняли, состоит в том, чтобы сделать красивый, привлекательный, очень‑очень интересный и удобный для… Итак, попробуем найти ответ на каверзный вопрос ПОЧЕМУ. Прежде всего, красиво… Вот почему удобство выдвигается на первый план. Человек хорошо видит пространство и наслаждается чтением, блуждает…

Таблица 1

Цветовое и символическое решение сайта в зависимости от его тематики

Закрывая «цветную» тему, сообщим несколько технических данных. В компьютере применяется несколько моделей цвета. Если вы создаете или обрабатываете… Рядом с буквами RGB на означенной панельке вы увидите надпись «Индекс цвета»…

Рис. 5. Перевод цветовой модели рисунка из RGB в индексированный цвет

 

Крайне редко используется в сети цветовая модель Grayscale (Ч/Б), которая представляет собой опять же индексированную палитру, вот только значениям цвета в ней придается градация серого (всего 256 степеней). Черно‑белый режим необходим для старого фото или имитаций под него.

А еще на той же панельке вы можете заметить упоминание о четырехцветной субтрактивной модели CMYK (от англ. Сyan, Magenta, Yellow, blacK – голубой, пурпурный, желтый, черный), которая создана и используется в полиграфии. Перед выводом на печать графический файл должен быть конвертирован в CMYK, что называется цветоделением. Вам нужно применять цветоделение тогда, когда собираетесь импортировать файл JPEG в CorelDraw или любой другой векторный редактор для дополнительной обработки. После обработки рисунок из CorelDraw экспортируется обратно в формат JPEG с моделью RGB. Экспортировать изображение сразу в гиф (если есть такая нужда) не рекомендуется, лучше это проделать потом в Фотошопе.

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

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

> собственно графические файлы – статичные и анимированные, несущие надписи или только изображения. Эту красоту нужно использовать умеренно, чтобы не отягощать страничку избыточным «весом»;

> обычные заголовки (Headings), которые получаются посредством простого введения кода в html‑документ. С ними мы детально познакомимся в п. 3.3 пособия;

> трехмерные заголовки (3D Headings), получаемые путем использования функции фильтр, с которой мы познакомимся в той же части самоучителя;

> фоновые рисунки (Backgrounds), образующие базовый элемент темы странички. Иногда целесообразно применять вместо фонового рисунка фоновую заливку, что выгоднее, поскольку страничка становится легче и загружается быстрее;

> кнопки (Buttons), являющиеся частью навигации и по способу исполнения представляющие собой гифы;

> графические маркеры (Bullets, они же пульки), а также вообще маркированные и нумерованные списки, о которых мы тоже непременно поговорим;

> горизонтальные полосы‑разделители (Dividers) могут быть очень красивы при задании им верной длины, ширины, цвета и локализации.

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

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

Эго‑составляющая сайта. Этому аспекту не всегда уделяется достаточное внимание теоретиками веб‑дизайна, однако всякий сайт обязан иметь среди множества конструкционных элементов эго‑составляющую, как называются в их совокупности средства самоидентификации и индивидуализации посетителя. Данные средства помогают юзеру реально ощутить свое присутствие на сайте. Подробнее о технике создания эго‑составляющей будет рассказано в пункте 4.3 настоящего пособия, а пока просто перечислим такие средства. Во‑первых, курсор. Это продолжение всемогущей руки юзера. Так пусть юзер отчетливо видит свою руку, ощущает ее движения: нужно сделать для своего сайта скромный, но оригинальный, по‑своему необычный курсорчик. Например, на сайте по продаже раскрасок для малышей курсор может изображать карандаш или фломастер.[6]

Затем, если вам нужна устная реклама, полезно одну из страничек сайта отвести под коллекцию аватаров (авиков). Напомним, что аватарами называются такие потешные квадратные картинки, обычно анимэ,[7]которые используются чаще всего на форумах, блогах, в дневниках и т. д. в качестве юзерпика – портрета пользователя. Пусть люди берут ваши аватары и потом говорят о вас «под личиной» этих самых аватаров! Современные технологии позволяют сконструировать гиперактивные аватары, которые отнюдь не будут похожи на традиционные картинки‑квадратики, но всем своим видом напоминают зверьков или человечков и умеют перемещаться в пространстве сайта вместе с посетителем, реагировать на действия гостя.

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

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

Самый лучший способ общения – это предоставить юзеру возможность высказать свое мнение, например, в процессе голосования. На этот случай сайт необходимо оборудовать формами для голосования. Еще больше возможностей для общения предоставляет гостевая книга, в которой люди не просто отвечают на ваши вопросы, но и записывают все свои мысли, какие только приходят им в голову. На коммерческих сайтах гостевая совершенно не нужна. Во‑первых, в ней будут отмечаться ваши конкуренты, оставляя адреса своих ресурсов. А во‑вторых, почитайте рассказ А. П. Чехова «Жалобная книга», добавьте в него современный мат и вообразите себе, что произойдет, когда такую ерунду увидят у вас на ресурсе потенциальные покупатели.

Форум – место для общения. Cобеседниками здесь выступают гости ресурса, они ведут между собой перепалку, дают советы и т. д. Форумом в Риме называлась базарная площадь, если кто подзабыл. Для определения слова «базарный» можете воспользоваться словарями Даля или Ожегова. Когда дойдете до конца списка, вообразите себе, какой негативный заряд приобретет ваш сайт благодаря форуму. Разумеется! Коммерческому ресурсу форум необходим столь же мало, как и гостевая книга.[8]

Поэтому гораздо более полезны для наших целей контактная информация и контактные формы. С их помощью каждый может связаться с владельцем сайта в любой момент, в том числе не покидая сайта. Контактная информация важнее контактной формы. Конечно, форма облегчает быстрое оформление заказа, но ведь не все в жизни сводится к купи‑продайским отношениям! Пребывать на сайтах, где нет адреса электронной почты (e‑mail), попросту противно. А что если возник очень важный вопрос, но вы не можете его сразу сформулировать? Или, быть может, нужно задать несколько вопросов, чтобы определиться в своем выборе, а это предполагает отправку нескольких писем. Адрес электронной почты должен присутствовать обязательно, равно как и почтовый адрес (для компаний). А злоупотребление контактными формами при отсутствии полноценной обратной связи гарантирует по большей части поступление невнятных заказов такого рода, как в известном анекдоте: «Мне, плз, ДВД с киной про того чувака, который еще снимался в том кине».

Гипертекст и язык HTML. Ранее читателя уже предупредили, что понадобится освоить азы языка HTML, на котором пишутся веб‑странички. Аббревиатура HTML означает в расшифровке Hyper Text Markup Language, то есть язык разметки гипертекста. Сказанное нуждается в пояснениях. Дело в том, что WWW представляет собой не только паутину, но и технологию поддержания информационного потока, в основу которой положена гиперсвязь в виде системы переходов между источниками данных. Такая связь осуществляется за счет гипертекстовых ссылок, или, если называть их короче, гиперссылок. Ссылкой может служить фрагмент текста и рисунок. Причем на вашей html‑страничке могут полностью отсутствовать переходы (гиперссылки), однако она все равно остается HTML‑документом, поскольку написана на языке HTML, что и обеспечивает переход на нее по ссылке с других страничек сайта либо с поисковика (поисковой системы).

Найдем в Проводнике нашу ученическую страничку index.html и, выделив ее курсором, зададим команду Открыть с помощью… › Интернет‑Эксплорер. Интернет‑Эксплорер (Internet Explorer), как вам уже известно, представляет собой программу для просмотра веб‑страничек. Эта программа определенно установлена на вашем ПК, поскольку она относится к числу стандартных.

Первое, что мы увидим, это непонятный набор символов вместо нашего текста. Так передаются Эксплорером русские буквы, и подобная передача нас, естественно, не устраивает. Тогда выполним первую в нашей жизни работу с HTML языком. Для начала пройдем путь Страница › Кодировка (или Вид › Кодировка). Тогда мы увидим, что наш файл имеет кодировку ISO. Именно она и делает русские шрифты непонятными для компьютера. Выберем другую кодировку – «Кириллица (Windows)». Установив ее, посмотрим лишний раз на ученическую страничку: теперь она в нормальном виде (рис. 6). И мы можем смело пройти путь Страница › Просмотр HTML‑кода (или Вид › Просмотр HTML‑кода).

 

Рис. 6. Смена кодировки html‑странички

 

Перед нами в программе Блокнот откроется записанная на HTML языке верстка нашей странички. Документ начинается словами, заключенными в какие‑то странные кавычки: ‹HTML›‹HEAD›‹meta http‑equiv=“content‑type" content=“text/html; charset=iso‑8859‑1"›. Слова в кавычках называются тэгами (тегами), они задают форматирование html‑документа. Каждый тэг имеет определенные свойства – атрибуты, обладающие неким значением. В ходе html‑программирования мы выбираем для тэгов подходящие атрибуты и задаем последним оптимальное значение.

Первое слово показывает нам, что перед нами действительно html‑документ. Второе начинает собой «шапку» (заголовок, англ. head) этого документа, куда включается вся наиболее важная информация о страничке. Что такое content, понятно: это информационное наполнение. Оно имеет вид текста text, внедренного в тело HTML‑документа. Буквы ISO во фразе charset=iso‑8859‑1 подсказывают, что этот атрибут и есть указатель кодировки. Сейчас мы сменили кодировку на кириллицу, и теперь остается сделать так, чтобы компьютер всегда использовал в отношении этой странички кодировку кириллицы. Поэтому удалите значение атрибута charset – вместо iso‑8859‑1 напишите windows‑1251. Вот вы уже и научились писать на HTML кое‑что важное. Об остальном узнаете из пункта 3.2 настоящего пособия.

Заметьте, много внимания языку HTML не уделяется, поскольку его тонкости вы изучите самостоятельно в процессе работы со специализированной литературой. Дело в том, что настоящий веб‑дизайнер должен сначала научиться воображать странички, конструировать их гармоничными и привлекательными, а уж только потом осваивать технические приемы верстки. Если же человек овладел техникой, а потом принимается за постижение гармонии, то его путь будет более длительным и трудным (хотя при упорстве завершится тоже успешно). Ведь такой человек в два раза дольше будет изучать технические приемы, поскольку не сможет понять их назначения. Когда же мастер твердо знает, как и над чем станет работать, он в два счета выучит технологию дизайна.

 

Исторические традиции в веб‑искусстве

Понятно, что никакой глубокой истории веб‑дизайн – столь молодое направление в искусстве, находящееся еще на стадии полуремесла, – не имеет.… > традиция Запада; > традиция Востока;

Рис. 7. Круговорот стихий согласно учению у‑син

 

Статичнаяземля, служащая основой для движения‑син, в веб‑дизайне представлена html‑кодом. Html‑код служит тем неизменным фундаментом, который определяет свойства как отдельных страничек, так и самого веб‑узла. Код отчасти управляет пространством сайта и страниц. Стоит поменять что‑то в коде, как перед нами будет несколько иной ресурс.

Дерево рождается из земли и начинает великий круговорот син. Оно олицетворяет такие понятия, как рождение, утро, восход солнца, восток. Стихии дерева соответствует структура сайта как отражение концепции, идеи ресурса, как средство передать его информационное наполнение. Дерево‑структура склонно расти, ветвиться, усложняться; главная задача его мощных ствола и ветвей – доносить живительную силу до листьев‑страничек. И в то же время листва вбирает в себя космическую энергию и поддерживает жизнь структуры, направляет ее развитие: точно также активность посетителей обеспечивает обратную связь и подсказывает, в каком направлении развиваться далее ресурсу. В ходе взаимодействия со страничкой юзер как бы тестирует структуру узла, проверяет ее потенциал, юзабилити, адекватность тематике сайта.

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

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

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

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

> усиливая землю, возрождаешь металл (оптимизированный html‑код позволяет полноценно использовать контент, делает контент заметным для роботов, освобождает больше места в документе для текстовых фрагментов);

> усиливая землю, сдерживаешь огонь (мы реже и аккуратнее применяем тяжеловесные элементы темы, динамические эффекты и стили, когда используем простые html‑эффекты для украшения слов и букв, для создания оригинальных надписей, для получения графических элементов в виде рамок, линий, маркированных списков);

> увлажняя воду, укрепляешь дерево (правильное применение шрифтов и графики в навигации за счет создания четко спланированных гиперссылок гарантирует укрепление и рост древовидной структуры сайта).

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

 

Заглядываем в будущее

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

Рис. 8. Эскиз главной странички ресурса про хатха‑йогу

 

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

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

 

 

Глава 2. Веб‑дизайн как технология

 

Собираем инструментарий

Живописцу для плодотворной работы нужны правильно подобранные кисти, веб‑дизайнеру – «железо» и «софт». Начнем с описания аппаратного… При использовании нескольких «тяжелых» графических пакетов показано применять… Ничуть не менее важен объем оперативной памяти RAM и свободной памяти (емкости) винчестера. Оперативной называется…

Рис. 9. Сохранение рисунка для Web

 

В случае покупки монитора с кинескопом нелишне будет обратить внимание на тип трубки и размер маски. Предпочтением пользуются типы кинескопов вроде Black Matrix, Black Planar и Black Trinitron. В последнее время среди продавцов появилась мода рекламировать сверхплоские экраны указанных марок. Нужно знать, что плоский экран для трубки – недостаток, небольшая кривизна физически необходима электронному лучу для создания наиболее качественного изображения. Поэтому покупаться на такую рекламу нельзя. Зато сверхчерные кинескопы (Black) действительно обеспечивают высокое качество изображения. Теперь о теневой маске. Это конструкционный элемент электронно‑лучевой трубки, обеспечивающий нормирование растра. Сегодня невыгодно пользоваться кинескопами с размером маски свыше 0,28 мм. В оптимуме нужно брать дисплей с маской кинескопа 0,26‑0,28 мм.

Экран любого – как жидкокристаллического, так и классического – дисплея может иметь разное разрешение, измеряемое в пикселах[10]и задаваемое свойствами маски и люминофорного покрытия. Наиболее часто встречаются разрешения 640 × 480, 800 × 600, 1024 × 768, 1260 (1200) × 800, 1280 × 1024. Сразу скажем, что 640 × 480 и 800 × 600 безнадежно устаревают, полноценная работа с подобным разрешением экрана невозможна. Умный веб‑дизайнер вынужден приобретать дисплей с максимально возможным разрешением и научиться копаться в настройках своего ПК, чтобы периодически менять показатель разрешения: с максимума понижать до минимума. Это позволит увидеть готовый сайт глазами других пользователей – как самых «продвинутых», так и безнадежно «отсталых».

Перейдем к CD‑ и DVD‑ROMам. Человек, который сделал веб‑дизайн своим бизнесом, обязан вложить деньги в ПК и приобрести для него два накопителя – и CD‑, и DVD‑ROM. Дело в том, что на оба будут приходиться высокие нагрузки, так что если использовать только DVD, то устройство долго не протянет. DVD понадобится для работы с тяжелыми файлами, в особенности видео, для создания коллекций и хранения наработанных материалов, от которых приходится периодически очищать винчестер. СD полезен в повседневной рутине: записи готовых проектов заказчику, инсталляции программок и т. д.

Выбор мышки и ее коврика – тоже занятие непростое. Здесь важно учесть ряд специфических моментов, одним из которых является баллистический эффект, как называется зависимость между точностью позиционирования и скоростью движения устройства. Большинство современных мышей обладают баллистическим эффектом в пределах от 200 до 900 DPI, причем «вебист» должен отдавать предпочтение мышам с наиболее высоким DPI. При создании игровых сайтов, например он‑лайн казино, показано использовать мыши со значением баллистического эффекта 900‑1000 DPI и выше.

Далее стоит принять во внимание разницу между оптическими и «шариковыми» (оптико‑механическими) мышами. Механические мыши неудобны тем, что их нужно периодически открывать и чистить. Оптические– тем, что для их эксплуатации желательно использовать специальный коврик (с другим они станут работать хуже). Повреждение коврика для оптической мыши означает появление неполадок в ее работе. Впрочем, и механическим мышам желательно покупать особые коврики – «махровые», поскольку такие увеличивают сроки службы устройства. Вместе с тем оптическая мышь обладает большими достоверностью и надежностью.

Добавим к сказанному, что в последнее время стало модным снабжать продаваемых мышат комплектом экзотических драйверов (программок), расширяющих возможности устройства. Во‑первых, такие драйверы не всегда совместимы с «родным» программным обеспечением ПК. Во‑вторых, они занимают большой объем памяти, который лучше забить чем‑то более полезным. А в‑третьих, драйвер мыши по‑настоящему исправно работает, если является резидентской («родной») программой.

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

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

> он лишен светодиодных индикаторов LED, что снижает возможности контроля за его состоянием;

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

Сказанное не значит, что внутренние модемы плохи. По причине относительной дешевизны и существенной компактности они хороши для тех, кто неактивно работает в Сети. Но веб‑дизайнер к числу этих счастливцев явно не относится.

 

Основное программное обеспечение

Компьютер – это просто груда железа. Чтобы она заработала, требуется установить на ПК специальные программы. Это азбучные истины, и сейчас мы… Операционная система (ОС). Так называется пакет программ, создающих среду для… Блокнот. Другой наш верный друг и соратник – это Блокнот. Многие юзеры, далекие от работы с сайтами, незаслуженно…

Дизайнерские программы

А теперь перейдем к знакомству с программами, непосредственно связанными с конструированием сайтов. Наш добрый знакомый Web Page Maker, над которым… W.Y.S.I.W.Y.G. имеют много минусов, но на начальном этапе следует пользоваться… Программки из семейства W.Y.S.I.W.Y.G. превосходят по потенциалу такие средства для создания и редактирования…

Программы для работы с изображениями

Все программы для работы с графикой различаются на вьюверы (viewers) и графические редакторы. Первые предназначены для просмотра и простейшего… Редакторы различаются на векторные и растровые, в зависимости от типа графики.… Названные форматы являются рабочими для веба. Формат JPEG (Joint Pictures Encoding Group – группа кодирования…

Программы для работы с текстом

Программы для обработки текста носят название текстовых редакторов. Чаще всего веб‑дизайнер при составлении контента использует тексты,… Другая программа, с которой предстоит вам столкнуться в работе, – Adobe… И напоследок назову Microgetics Font Effects, представляющий собой программу для создания оригинальных логотипов и…

Броузеры

Броузер (браузер) – это программа для просмотра документов, размещенных в Интернете. Тому, кто хочет вести персональную страничку, вполне достаточно… Полезный совет: на многих компьютерах жесткий диск (винчестер) разбит надвое,…  

Глава 3. Сайт – инструмент для работы

 

3.1. Ответы на вопросы: «зачем» и «как»

 

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

На начальном этапе главным является создать грамотный контент, вникнуть в его логическую структуру и расставить приоритеты при разработке. Эти три вопроса решаются комплексно. Прежде всего, нужно подумать, на кого рассчитан наш сайт, иными словами, «user forever»![11]Так, издательство работает главным образом с четырьмя группами посетителей:

1) читающая публика, которая забредает на сайт в стремлении узнать что‑нибудь о книгах и авторах. Читатели являются одновременно и покупателями, вот еще почему заслуживают обхождения и внимания;

2) авторы – их трудами создается товарная продукция, которой и ведется торговля, приносящая издательству прибыль;

3) штатные работники на вакантные должности – верстальщики, корректоры, редакторы, иллюстраторы и все прочие люди, которые нетленное творение иного автора превращают в книгу;

4) партнеры – книготорговые организации, типографии, библиотеки и т. д.

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

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

Лапидарность при составлении контента главной странички (равно как и некоторых других) – это и великая радость и большое зло для веб‑дизайнера. Радость потому, что маленький текст легко и быстро читается и возбуждает интерес, желание продолжить ознакомление с ресурсом. Зло состоит в том, что поисковая система тем быстрее и легче находит ваш сайт, чем крупнее и богаче его контент. Сразу скажу, что эта проблема решается использованием скрытого текста. Дизайнер берет большой кусок текста, объемом около 500 знаков, и вставляет его в открытый html‑код главной странички сразу после слова (тэга) ‹body›. Чтобы этот текст был скрытым, он заключается в кавычки вида: ‹! – здесь ваш текст– ›. На страничке этот кусок не объявится, зато поисковик будет его свободно читать и засчитывать. (Убрав лишнее, возмести ущерб!)

Вопрос: какой контент лучше всего выбрать для скрытого текста? Ответ:наиболее полно отражающий тематику сайта. В случае с издательским ресурсом проблема снимается сама собой: скрытый текст требуемого объема напишет любой редактор, рассказав в этом кусочке о книгоиздательской деятельности вообще и своего издательского дома в частности. Когда приходится работать с лесоперерабатывающим предприятием, у которого в штате нет редакторов, то в скрытый текст можно скопировать куски текста про деревообрабатывающую промышленность, современные технологии лесопереработки, использовав специальную литературу и/или статьи из электронной энциклопедии. Совет: когда копируете статьи из электронной энциклопедии, не забывайте заменять сокращения полным написанием слов. Поисковой системе неинтересен контент вида: «ДАВИД‑ГОРОДОК, г. (с 1940) в Беларуси, Брестская обл., на р. Горынь. 7,7 тыс. жит. (1991). Инструмент. пр‑во. Возн. в кон. 11 или нач. 12 вв.». Вы думаете, машина поймет эти сокращения?

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

И еще одно замечание! Не увлекайтесь скрытыми текстами, поскольку они портят html‑код, причем портят в разных отношениях. Только один не очень большой текст и только на главной страничке. Все остальные страницы должны быть свободны от этой писанины. И если ваш веб‑редактор сам вставляет скрытый текст в процессе верстки – удаляйте эти вставки без пощады!

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

Во‑первых, в левом верхнем углу главной и всякой другой страницы нужно разместить логотип, снабдив его при этом ссылкой на index.html на всех остальных страницах сайта. Домашнюю страничку обязательно должны украшать главное меню и меню второго уровня (дочерний элемент), сконструированные в соответствии с логической структурой ресурса. В главное меню вносятся ключевые моменты в общении издателя с публикой через сайт. В частности, обязательны пункты:

> «Об издательстве» – оно и правильно, чтобы никто не подумал, будто перед ним какие‑нибудь шарлатаны, пригревшиеся на книжном бизнесе. Здесь рассказывается, сколько издательству лет, какие награды и заслуги оно имеет, чего добилось за годы своего существования, на чем оно специализируется, а также немного сухой юридической информации – организационно‑правовая форма и иные выдержки из Устава;

> «Наши книги» – знакомство с продукцией чрезвычайно важно, поскольку фирма познается по товарам ее, равно как лев – по когтям;

> «Авторам» – тоже верный подход, поскольку чем больше авторов, тем больше продукции хорошей и разной;

> «Магазин» – то есть электронный, если таковой имеется. А если нет, то ссылке придается вид «Магазины» и здесь указываются адреса и телефоны книготорговых организаций, осуществляющих сбыт продукции данного издательства;

> «Контакты» – раздел представляет всех контактных лиц издательства, готовых к общению с вами по любому вопросу.

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

> «Приветствие директора» – открытое письмо директора посетителям ресурса и друзьям издательства. Большой пространный документ, полный слоганов и теплых слов, вроде американского The President’s Letter, который никто и никогда читать не станет, но который все посмотрят. Приятно все‑таки. Размещать эту вещь на главной страничке нелепо;

> «Вакансии» – вакантные должности издательства. Сюда не следует относить авторов, но только верстальщиков, менеджеров, корректоров, уборщиц и прочий персонал. Автор – это особый человек, так что, по традиции, пишущей братии выделяется отдельная ссылка;

> «Партнерство» – информация для деловых партнеров: финансовая, юридическая, контактная и прочая, какая только уместна;

> «Наши баннеры» – здесь, после предложения обменяться рекламными картинками‑баннерами, при клике на который можно перейти на другой ресурс. Здесь же даются баннеры для скачивания и коды к ним;

> «Ссылки» – сайт предлагает обменяться ссылками с другими заинтересованными ресурсами;

> «Скачать» – халява от издательства: картинки и тексты (обычно: отдельные главы из собственных книг), которые могут живо заинтересовать гостей.

Главное меню рекомендуется располагать вверху странички, под главным рисунком и логотипом, причем желательно все пункты разложить в строку. Второстепенное меню встраивается сбоку, обычно слева. Главное меню иногда, при развитой структуре сайта, стоит снабдить выпадающими, или всплывающими подменю (см. рис. 10). Единственный минус подменю состоит в сложности реализации, поскольку для этого требуется писать скрипты, то есть команды. Но зато и публику удастся порадовать, поскольку выпадающее подменю повышает скорость работы с сайтом. Например, писателям очень удобно пользоваться меню, в котором пункт «Авторам» разбивается в подменю на три подпункта: «Постоянным авторам»,[12]«Новым авторам», «О наших авторах». Заметим, что пункт «О наших авторах» должен присутствовать и в подменю к пункту «Об издательстве»: хорошие авторы – это живая реклама.

 

Рис. 10. Выпадающее подменю (образец)

 

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

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

«ПЕРВАЯ, ПРЕДЫДУЩАЯ, СЛЕДУЮЩАЯ, ПОСЛЕДНЯЯ» – верхняя и

«Вы на ‹…›‑й странице. Все страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10» – нижняя. И рад бы сделать удобнее, но это предел вирутального комфорта.

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

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

Чтобы получить хорошую страничку, полезно чертить эскизы от руки или на компьютере. Электронные эскизы можно готовить непосредственно в Web Page Maker, ибо он словно специально создан для веб‑экспериментирования. А можно и в CorelDraw, поскольку это одинаково удобно и даже имеет некоторые преимущества. Такой эскиз можно экспортировать в файл растровой графики для распечатки, задав необходимые параметры, тогда как с эскиза из Web Page Maker нужно сначала сделать скриншот (снимок с экрана, выполняется нажатием на клавишу Print Screen, сокращенно PrtScr), а потом еще вставлять этот скриншот в Фотошоп (Crtl + V) и обрабатывать там. На рис. 11 вы видите эскиз, выполненный в Кореле. На лицо явные ляпы при симпатичном, в целом, дизайне:

> слишком много графики – причем графики на главной страничке, отчего ждать ее загрузки, видимо, тридцать лет и три года;

> надписи не кликабельны, жать приходится на картинки, а это плохо для сайта (особенно если навигационные картинки скверно грузятся);

> наряду с активными соседствуют неактивные иллюстрации, что сбивает с толку посетителя;

> нет ни имени URL, ни намека на контактную информацию, ни даже традиционной ссылки «Контакты» (я предположил, что гость, кликнув на нужную рубрику, увидит сразу контактную форму и e‑mail, но думать за других – не самое благородное занятие);

> текст неотредактирован (въедливый посетитель заметит досадную опечатку «ПРОДКТОВ» и вознегодует: ладно бы ошиблись в большом куске из инструкции к какой‑нибудь кофемолке, так нет – допустили ляп в крохотном контенте, причем на главной страничке!).

 

Рис. 11. Эскиз сайта, выполненный в CorelDraw

 

Несомненные плюсы эскиза, которые мы сохраним в новом варианте сайта:

> классное, запоминающееся название;

> удачный логотип;

> эффектное обрамление текста, обеспечивающее запоминаемость сайта;

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

Стоит ли расстраиваться? Отнюдь, радоваться надо, так как на ошибках учатся. Не пугайтесь, если у вас поначалу что‑то пойдет не так! И не стремитесь к полному идеалу, ибо идеальность – понятие относительное. Что хорошо для одного ресурса, то будет погибелью для другого. Не питайте иллюзий, не корите себя, не повышайте планку день ото дня: за те два дня, что вы читали эту книжку, вы и так добились невероятно многого. С чем вас и поздравляю. А чтобы добиться большего, нам придется познакомиться поближе с языком HTML‑программирования.

 

Язык HTML

Изучение веб‑дизайна начинается с юзабилити и артистичности, пусть даже веб‑странички приходится рисовать в Corel. Глубокое изучение… Вдобавок для работы в программе Web Page Maker знать основы программирования… Помня об этом, вновь откроем в Блокноте нашу первую html‑страничку. Посмотрим, с чего она начинается. Это тэг…

Рис. 12. Структура html‑кода простейшего документа

 

Запись кода тривиальна, в теле имеются всего две строки. Первая описывает рисунок: ‹img border=“ 0” src=“file://images.files/girl.jpg” width=“ 275” height=“416”›. Кстати, сразу видно, что перед нами код, сгенеренный каким‑то редактором. Веб‑дизайнер написал бы короче и проще: ‹img width=275 height=416 border=0 src=“images.files/girl.jpg”›. Следующая строка – текстовый абзац. Он ограничивается тэгами ‹p›‹/p›. Внутри них размещаются тэги ‹b›‹/b›, задающие полужирное (bold) начертание фразы. И наконец, внутри этих тэгов комфортно разместился текст, который увидит юзер.

Итак, что такое язык HTML, мы, в общем, поняли. Теперь нужно научиться писать и редактировать на нем то, что не способна сделать машина без участия человека. В первую очередь сюда относится служебный тег ‹!DOCTYPE›. Какие‑то редакторы его ставят сами, какие‑то – нет, поэтому научимся писать его самостоятельно. Обойтись без него можно… теоретически. А вот на практике броузеры да и другие программы обработки иногда требуют, чтобы в начале HTML‑документа (хотя бы главной странички) обязательно помещался он. В традиционной записи тэг имеет вид:

‹!DOCTYPE HTML PUBLIC “‑//W3C//DTD XHTML 1.1//EN”›

Теперь познакомимся с мета‑тэгами. Так называются тэги, целиком и полностью размещаемые в заголовке html‑документа, между метками ‹head›‹/head›. Они обозначаются meta name= и предназначаются в целях размещения сведений для поисковых машин и рекламной информации. В Web Page Maker, как и в других веб‑редакторах, есть функция вставки некоторых мета‑тэгов (Properties › Document Properties – Свойства › Свойства документа). Однако возможности таких программ по части внедрения мета‑тэгов ограничены.

Тэг ‹meta name=“revisit” content=“… days”› задает периодичность переиндексации сайта некоторыми поисковыми машинами, которые на это рассчитаны. Остается только поставить число дней. Тэг ‹meta name=“robots” content=“index, all”› управляет работой поисковых роботов, заставляя их прочитывать весь текст, а не начальные несколько строк. Эти два тэга лучше использовать на главной и еще нескольких важных страницах, но только не на всех. У меня они занимают примерно 10 % страниц ресурса. Роботы не любят, когда их упорно к чему‑то принуждают. Тэг ‹meta name=“site‑created” content=“…”› устанавливает дату создания страницы. Соответственно тэг ‹meta name=“expires” content=“…”› отображает дату закрытия страницы. Использовать два последних тэга необязательно.

Тэг ‹meta name=“autor” content=“…”› служит для указания имени автора и дополнительной информации о нем, обычно контактной (e‑mail). В тэг ‹meta name=“copyright” content=“…”› вносится название организации в целях защиты авторских прав. Тэг ‹meta name =“resource‑type” content =“document”› показывает тип ресуса (для обычных HTML документов значение мета тэга – всегда «document»). Иногда полезно включить тэг ‹meta name=“generator” content=“…”›, чтобы показать, в какой программе сверстана страничка, поскольку это нередко помогает броузеру прочитать ту ахинею, которую накрутил визуальный редактор.

Но это не тэги, а баловство одно. Лучше посмотрим вот на эти два: ‹meta name=“description” content=“…”› и ‹meta name=“keywords” content=“…”›. Мета‑имя «description» носит примечание content. Контент – это, как сообщалось ранее, текстовое (информационное) наполнение странички. Контент в мета‑тэгах включает в себя два компонента – описание и ключевые слова. В контент «description» следует внести лаконичное, но полное и понятное описание проекта либо текущей странички. Описание должно быть выполнено так, чтобы оно индивидуализировало страничку, выделяло ее среди прочих страничек во Всемирной Сети. Следующее мета‑имя – «keywords» (ключевые слова), куда относятся термины, словосочетания и, реже, обрывки фраз, обеспечивающие быстрый и легкий поиск вашего ресурса пользователям Интернет. Придумывая ключевые слова, нужно подбирать их так, чтобы они:

> сообщали, о чем этот сайт;

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

При этом мета‑тег «keywords» включает не свыше 800 знаков, а «description» – 200 знаков. Но практика показывает, что это многовато: веб‑дизайнеры советуют использовать ключевых слов на 150–200 знаков и описание на 60‑100 знаков. Обратим внимание, что тэг «Ключевые слова» может иметь разное оформление:

‹meta name =“title” content=“…”› или

‹meta name=“page‑topic” content=“…”›

Нежелательно копировать сюда содержание тэгов ‹title› и «description». Кстати, мета‑имя «description» тоже обладает другой формой записи: ‹meta name=“abstract” content=“…”›.

Не все, что вставляется в «шапку», относится к рекламе и командам для робота. Сюда входят и другие тэги, из которых мне хотелось бы отметить ‹title› – заголовок страницы. Посмотрите вновь на рис. 12, на титульный тэг. Иллюстрация показывает, какой эффект дает ‹title›: это название страницы, отображаемое поисковиком и броузером. По длине тэг не должен превышать 70–75 символов (это примерно 20 слов). Чем длиннее тэг, тем труднее вашу страничку сохранить на ПК пользователя. По собственному опыту знаю, что сохранить на свой ПК полюбившуюся страничку с названием более чем из 7 слов в Internet Explorer уже невозможно.

Лучше познакомимся с кодом body документа. На многих сайтах случается видеть указания: «сделать стартовой» или «добавить в избранное». Это ценные указания, которые помогают юзеру не забывать про ваш ресурс, часто бывать на нем и рекомендовать друзьям. А самое главное, такие надписи уже подчеркивают значимость ресурса. Запишем код этих команд.

Добавить в избранное: ‹a href=“#” onClick=“window.external.addFavorite('URL', 'title'); return false;”›сюда текст или рисунок‹/a›. Сделать стартовой: ‹a onclick=“this.style.behavior='url(#default#homepage) ;this.setHomePage('URLSite'); return false;” href=“#”›сюда текст или рисунок‹/a›

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

‹a href= – вот таким значком. Потом вношу команду: “#” onClick=“window.external.addFavorite('URL', 'title'); return false;”›

Теперь указывает свойства рисунка, изображающего сердечко: ‹img width=468 height=60 border=0 – это указание размеров, как нам известно, а после них ставится:

alt=“Добавить в избранное” – альтернативный текст, обозначаемый сокращением alt. Этот текст появляется при наведении курсора на рисунок (см. рис. 13). Также альтернативный текст можно видеть на загрузившейся страничке, картинки которой пока еще запаздывают с загрузкой. И заканчивает описание рисунка вот это:

src=“images.files/herz.gif”› – наименование его самого и папочки, в которой он расположен. После закрываем ссылку тэгом ‹/a›. Попробуйте сами, проще не бывает!

 

Рис. 13. Пример альтернативного текста (воображаемый сайт)

 

И уж если речь пошла о ссылках, то надо именно сейчас рассказать об этой основе гипертекста, главном достоинстве HTML. Все ссылки имеют вид ‹a href=“адрес”›видимое посетителю название‹/a›. Вместо текста можно поместить картинку, которая станет кликабельной (как баннер, например). При этом ссылка примет вид: ‹a href=“адрес”›‹img srс=“адрес графического файла”›‹/a›. Страничка, на которую мы переходим, может открыться в этом же окне, а может в новом. Чтобы открыть ее в новом окне, нужно в теге ‹a href› установить атрибут target= со значением “_blank”: ‹a href=“адрес” target=“blank”›видимое посетителю название‹/a›. Значение “_self” открывает новую страничку в старом окне броузера, однако писать такую команду необязательно: компьютер выполняет открытие в том же окне по умолчанию, то есть и в отсутствие комментариев.

Перечисленное необязательно делать вручную, визуальные редакторы хорошо пишут ссылки сами. Так, в Web Page Maker достаточно выделить изображение, кликнув на него, затем кликнуть на иконку «Гиперссылка» (Hyperlink) и в появившемся диалоговом окошечке набить адрес и выбрать значение атрибута target (см. рис. 14).

 

Рис. 14. Установка гиперссылки на кликабельном рисунке.

 

Ссылки по способу написания адреса различаются на абсолютные и относительные. Профессионалы советуют применять относительные ссылки. Например, вместо “http://obrazcats.narod.ru/index.html” достаточно написать просто “index.html”, и компьютер переместит юзера куда надо. Однако подобная простота хуже воровства. Мой собственный опыт показывает, что без указания папки легко находится единственно и только главная страничка, иногда еще несколько. Более трех адресов компьютер уже обслуживает с трудом, нередко отмечаются сбои. Впрочем, если вы усложнили физическую структуру узла, то вам уже необязательно писать в ссылке имена всех директорий. Так, вместо “http://obrazcats.narod.ru/pages/scripts/rain.html” можно записать лаконичное “pages/scripts/rain.html”, пропустив название корневой папки. Это удобно по ряду причин. Во‑первых, уменьшает вес страничек, а во‑вторых, позволяет менять адрес сайта, не меняя внутренних ссылок.

Закрывая тему ссылок, скажем несколько слов об их цвете. Цвет ссылок полагается указывать в тэге body, при этом выполняется запись: ‹body link=“#код цвета № 1” vlink=“#код цвета № 2” alink=“код цвета № 3”›. В этой записи используются атрибуты link – цвет неиспользуемой ссылки; vlink – цвет ссылки при наведении мыши; alink – цвет ссылки в момент клика. Разумеется, выставлять все цвета вовсе необязательно, обычно достаточными оказываются два – цвет простой ссылки (синий) и цвет использованной ссылки (фиолетовый). Профи не советуют экспериментировать с цветами гиперссылки, ее внешний вид должен быть привычен и понятен для юзера. Само собой, нельзя пускать ссылку не подчеркнутой. И одновременно нельзя подчеркивать в тексте слова, не являющиеся гиперссылками.

О кодах цветов мы уже говорили. Каждый такой код представляет собой последовательность из шести знаков, которая на самом деле состоит из трех чисел, записанных в шестнадцатиричной системе счисления. При этом первые две цифры показывают значение красной составляющей, вторые две – зеленой, а третья пара – синей. Узнать коды можно из специальных справочников, в том числе публикуемых в Интернете (см. http://obrazcats.narod.ru/pages/txt/colors.html), а также самостоятельно – при помощи Фотошопа, в котором есть палитра цветов и оттенков с указателем их номеров (см. рис. 15).

 

Рис. 15. Генератор цветового кода в Adobe Photoshop

 

Ссылки могут не только куда‑то вести, но и помогать нам производить некоторые действия. Таковы ссылки для скачивания и почтовые ссылки. Рассмотрим сейчас первые из них. Допустим мы создаем страничку загрузок downloads. Запустим вновь Web Page Maker и создадим в нем страничку. Теперь кликнем на Insert (Вставить) на навигационной панели и выберем опцию Html Code or Script Code (см. рис. 16), чтобы перед нами появилось окошко редактора кодов. Сюда и нужно записывать дополнительные команды на языке гипертекста, которые мы хотим разместить на сайте. Производим запись ссылки для скачивания:

‹а class=act href=“download или имя другой папочки, где хранятся материалы для скачивания/название архива. rar”›Скачать книгу «Я. Нильсен. Веб‑дизайн»‹/а›.

 

Рис. 16. Вставка кодов и скриптов в Web Page Maker.

 

Несомненно в глаза вам бросилась надпись Script Code. Ранее в книге уже говорилось о скриптах – командах для броузера, которые позволяют добиться появления различных визуальных эффектов. Познакомимся с некоторыми скриптами, которые могут оказаться очень полезны в повседневной работе веб‑дизайнера. Начнем с «украшательного», поскольку с такими, конечно же, интереснее работать. Предположим, что мы оформляем страничку сайта, посвященного осенней теме в русской поэзии, и нам понадобился для этих целей эффект дождя. Эффект дождя воспроизводит на экране падение сотен капель. Чтобы получить то же самое на своей страничке, нужно открыть ее html‑код и вписать в body документа следующий скрипт: табл. 2. (Чтобы вам не пришлось корпеть над столбцом из непонятных значков длиной в несколько страниц, скрипт разбит на блоки и размещен в столбцах таблицы).

 

Таблица 2

Описание скрипта

Чаще всего требуется поставить или убрать пробел между какими‑то из значков, а этого на листе бумаги так просто не передашь. Внимательно… А пока сделаю ценное предупреждение. Все эти дожди, листопады, метели и т. д.…  

Сила слова

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

Рис. 17. Принцип Чишольма в Интернете

 

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

Нужно помнить о том, что не каждый компьютер в состоянии поддерживать экзотические шрифты. Вот почему следует пользоваться наиболее простыми и расхожими – такими, как Arial, Times New Roman, Tahoma, Verdana. Для пущей самобытности стиля можно применять различные гарнитуры, то есть вариации в рамках одного шрифта (например, Arial Black для заголовков). Вдобавок стоит использовать, где положено, разные начертания – курсив, полужирный и полужирный курсив, кроме подчеркнутого, поскольку последний напоминает гиперссылку и станет вводить юзеров в заблуждение на грани раздражения. Веб‑дизайнеру не помешает изучать принципы тайп‑дизайна (шрифтового дизайна), подсказывающие, как правильно использовать шрифты, чтобы обеспечить адекватное восприятие текста и поддержать заинтересованность читателя. Подбор шрифтов осуществляется с учетом используемых основных элементов текста.

К основным текстовым элементам относятся:

1) текст документа;

2) заголовок;

3) девиз, слоган, цитата;

4) контактные данные.

Базовый текст документа желательно набирать кеглем 10–14. Это область стандартных решений: легкочитаемые шрифты, преимущественно без засечек: Arial, Helvetica, Times New Roman.

Заголовок рекомендуется выполнять более крупным шрифтом, привлекающим внимание. В данном случае можно побаловаться трудно читаемым шрифтом с неординарной гарнитурой (Helvetica, Tahoma, Arial – без засечек, Baltica – c засечками). Впрочем, разумнее всего ставить заголовки в виде изображений или кодировать их на языке HTML, о чем мы поговорим ниже.

Девизы, слоганы и цитаты принято набирать шрифтами на 1–2 пункта меньше базового текста. Поскольку буквы такого размера мелки, их лучше пускать шрифтом без засечек – Helios, Helvetica, Arial, Tahoma. Показано пускать текст цитат курсивом, а слоганов – еще и полужирным курсивом, чтобы он стал более заметен.

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

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

Современные технологии позволяют подстраивать сайт под кегль (размер) и вид шрифта, удобные и доступные для пользователя. Новичку осилить подобные хитрости с ходу не удастся, поскольку для этого требуется изучение языка CSS. Вдобавок в ходе применения стандартных шрифтов подобные трудности вряд ли возникнут. Вот почему пока ограничимся только одним несложным кодом. Допустим, некоторые заголовки в тексте выполнены неброским, но красивым шрифтом Copperlate Gothic Bold синего цвета. Этот шрифт встречается едва ли не повсеместно, однако найдется немало юзеров, у которых ПК отобразить его не умеет. Для таких посетителей сайта пишется стиль:

‹style›

‹!‑

Example{font‑family: Copperlate Gothic Bold, Tahoma;

font‑weight; bolder; font‑size: 20 pt;

color: blue}

– ›

‹/style›

Запись font‑family показывает, что в отсутствии шрифта Copperlate Gothic Bold броузеру надлежит применять шрифт Tahoma.

Тот или иной шрифт по своему графическому исполнению способен вызывать у читателя определенные ассоциации, которые разумный веб‑дизайнер использует для усиления эффекта, производимого сайтом на юзера. Название игры, громкая реклама, дружеское объявление, строгий отчет, сухая информационная записка – все они по большому счету нуждаются в старательно подобранных шрифтах. Если дизайнеру столь важно эмоциональное воздействие шрифта, то нужно создать надпись в CorelDraw, Corel Paint Shop или любой другой приспособленной для этих целей программе, а затем экспортировать ее как рисунок, который будет вставлен на сайте вместо заголовка. Разумеется, такой рисунок должен сопровождаться альтернативным текстом, передающим выполненную вами надпись.

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

‹img src=“images.files/bukvica_s.gif” width=“ 120” height=“ 110” border=“ 0” align=“left” аlt=“С”›коро сказка сказывается, да не скоро сайт верстается

Настоятельно рекомендуется установка атрибута align=“left”, чтобы текст обтекал буквицу. Обязательно поставить альтернативный текст, чтобы при медленной загрузке рисунка или при отключенной графике не приходилось гадать, какую букву изображает гиф.

Действенный способ обойтись без какой‑либо графики, но при этом создать оригинальный текст, – применение фильтров и кодирование заголовков. Начнем с самого простого – закодируем заголовок. Для этого достаточно выделить в HTML нужный текст парными тэгами заголовков: ‹Н1›, ‹Н2›, ‹НЗ›, ‹Н4›, ‹Н5› и ‹Н6› (показаны в порядке убывания без закрывающих тэгов). Использовать заголовки выгоднее потому, что их обожают поисковики. Обилие заголовков с интересными фразами гарантирует приток к вам на ресурс посетителей. То есть заголовки для поисковых роботов имеют такое же значение, как и ключевые слова, при этом значимость заголовка тем выше, чем меньше его индекс: заголовок Н1 значит для робота больше, чем заголовок Н2 и уж тем более Н6. Каждому заголовку можно придать свойства, добавив атрибут style с подходящими значениями:

‹H2 style=“font‑family: вид шрифта; font‑size: размер (рекомендуется в процентах от базового); color: ваш цвет на английском”›ЗАГОЛОВОК‹/H2›

А теперь рассмотрим применение фильтров, благодаря которым мы можем получить своеобразные надписи. Из наиболее востребованных фильтров нужно назвать Blur, Shadow, DropShadow, FlipH, FlipV, Wave, Mask и Glow. Фильтр Blur придает буквам объемность, Shadow и DropShadow – разные виды теней, FlipH и FlipV – обеспечивают поворот слова (фразы) по горизонтали и вертикали соответственно, Wave – волнистость, Mask – показывает шрифт таким, словно бы он выделен курсором, а Glow – размытость краев. Ниже приводится запись этих фильтров, а на рис. 18 показан готовый результат. Все коды даны для надписи, пущенной по центру с параметрами width – 400, height – 60, font‑size (размер) – 30pt, font‑weight (начертание) – bold (полужирный), color – green (зеленый цвет).

 

Рис. 18. Результат применения фильтров (снизу вверх): Blur, Shadow, DropShadow, FlipH, Wave, Mask, Glow

 

Код для фильтра Blur: ‹p style=“filter: Blur(Add= 1', Direction= 30 , Strength= 10 ); width: 400; height: 60; font‑size: 30pt; font‑weight: bold; text‑align: center; color: green”›ИНДУСТРИЯ‹/p›

Этот фильтр, как видно, реализуется за счет параметров Add (определяет степень размытия текста), Direction (направление размытия), Strength (смещение размытия). При этом возможны две степени размытия – 1 (умеренная) и 0 (сильная). Направление размытия задается числами от 0 до 315, поэкспериментируйте с ними и проверьте, что дает каждое из них.

‹p style=“filter: Shadow(Color= #000000 , Direction= 130 ); width: 400; height: 60; font‑size: 30pt; font‑weight: bold; text‑align: center; color: green”›ЗАГАДКА ПРИРОДЫ‹/p›

Фильтр имеет параметры Color, задающий цвет тени, и Direction, задающий направление, в котором эта тень отбрасывается (опять‑таки от 0 до 315).

‹p style=“filter: DropShadow(Color= #000000 , OffX= 3', OffY= 3', Positive= 130 ); width: 400; height: 60; font‑size: 30pt; font‑weight: bold; text‑align: center; color: green”›ПЛЯШУТ ТЕНИ НА СТЕНЕ‹/p›

Та же тень, но более удаленная от текста, для чего и нужны параметры OffX – смещение по оси абсцисс, OffY – смещение по оси ординат, Positive – размещение тени справа или слева. При этом правой позиции соответствует значение 1, а левой позиции – 0.

‹p style=“filter: FlipH; width: 400; height: 60; font‑size: 30pt; font‑weight: bold; text‑align: center; color: green”›КОРОЛЕВСТВО КРИВЫХ ЗЕРКАЛ‹/p›

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

‹p style=“filter: Wave(Freq= 5', Add= 0', LightStrength= 1', Phase= 2', Strength= 2'); width: 400; height: 60; font‑size: 30pt; font‑weight: bold; text‑align: center; color: green”›БЕГУТ РУЧЬИ…‹/p›

Здесь мы встречаем массу новых параметров. Freq задает число волн, Add отображает или скрывает окантовку (в зависимости от значения – 0 или 1), LightStrength устанавливает силу волн, Phase показывает начальную фазу волны, ну а Strength – волнистость вообще, то есть интенсивность волн.

‹p style=“filter: Mask(Color='green'); width: 400; height: 60; font‑size: 30pt; font‑weight: bold; text‑align: center”›ЧЕЛОВЕК‑НЕВИДИМКА‹/p›

Предельно простой фильтр, имеющий лишь один параметр – цвет фона, окружающего буквы.

‹p style=“filter: Glow(Strength= 6', Color= #00FF00 ); width: 400; height: 60; font‑size: 30pt; font‑weight: bold; text‑align: center; color: green”›ПОСЛЕ ДОЖДЯ‹/p›

Фильтр обладает двумя параметрами. Strength показывает интенсивность ореола, а Color – его окраску.

Назовем и некоторые другие украшения текста. Они весьма многочисленны, причем количество их растет, точно снежный ком. Много полезных украшений вы найдете на нашем сайте «Образованные котята», а здесь приведен пример одного из наиболее простых и одновременно полезных – зачеркивание, задаваемое тэгом ‹strike›. Оно может применяться как в шутливых текстах, так и в текстах вполне серьезных: о правилах русского языка (зачеркивание ошибок), о ценовых скидках (зачеркивание старых цен), о результатах голосований (зачеркивание фамилий проигравших кандидатов), о результатах тестирования (зачеркивание неверных ответов) и т. д. Тэг парный, ему необходимо закрытие в виде ‹/strike›. По слухам, какие‑то броузеры понимают сокращенное написание этого тега – ‹S›, но для обеспечения стопроцентной совместимости лучше писать тэг полностью.

Говоря о спецэффектах, нельзя не вспомнить про динамические эффекты, из которых здесь будет рассмотрена бегущая строка. Она легко вставляется через Web Page Maker, в котором достаточно пройти путь Insert › Marquee – «Вставка › Бегущая строка». В диалоговое окошко всплывающего текстового редактора заносится фраза, которую мы хотим прокручивать (рис. 19). Словам строки можно придать разные цвет и начертание, а некоторые даже сделать гиперссылками. Так мы и поступим, внесем в редактор следующую фразу: «Компания „Сказочная роскошь“ предлагает вашему вниманию унитазы плюшевые (в широком ассортименте), скамеечки для ног золотые (с подогревом), самонаполняющиеся джакузи». Подчеркнутые слова будут ссылками, кликая на которые потенциальный покупатель сможет больше узнать о рекламируемом товаре. В коде документа данная запись принимает вид:

‹marquee width=… height=…›‹font style=“font‑size:13px” color=“#000000” face=“Tahoma"›‹div›Компания «Сказочная роскошь» предлагает вашему вниманию ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/unitaz.html”›унитазы плюшевые‹/a›‹/i›‹/font› (в широком ассортименте), ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/skameika.html”›скамеечки для ног золотые‹/a›‹/i›‹/font› (с подогревом), ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/djakkuzi.html”›самонаполняющиеся джакузи‹/a›‹/i›‹/font›‹/div›‹/font›‹/marquee›

 

Рис. 19. Вставка бегущей строки в Web Page Maker

 

На этом можно было бы успокоиться, но Web Page Maker не дает нам полного управления бегущей строкой. Допустим, что мы захотели кое‑что изменить в этом тексте. Во‑первых, нас совершенно не устраивает движение словесной ленты справа налево. Затем мы найдем, что прокрутка неудобна для покупателя, поскольку ему приходится ловить ссылки. Вот почему наш идеал – сдвиг, при котором текст выкатывается на страничку из ниоткуда, движется до некоего предела, а потом замирает неподвижно. И конечно, нам хотелось бы отрегулировать скорость строки, а также как‑то зрительно обособить ее от остального текста, например специфическим фоном и рамочкой. Для этого добавим к тэгу ‹marquee› следующие атрибуты:

‹marquee width=… height=… behavior=“slide” direction=“right” scrolldelay=“ 70” style=“border‑style: double; border‑width: 5; padding‑left: 3; padding‑right: 3; padding‑top: 2; padding‑bottom: 2” bgcolor=“#C0C0C0”›‹font style=“font‑size:13px” color=“#000000” face=“Tahoma"›‹div›Компания «Сказочная роскошь» предлагает вашему вниманию ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/unitaz.html”›унитазы плюшевые‹/a›‹/i›‹/font› (в широком ассортименте), ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/skameika.html”›скамеечки для ног золотые‹/a›‹/i›‹/font› (с подогревом), ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/djakkuzi.html”›самонаполняющиеся джакузи‹/a›‹/i›‹/font›‹/div›‹/font›‹/marquee›

Атрибут «поведение» behavior имеет значение «сдвиг» – slide. Атрибут «направление» direction получил значение «направо» – right. Атрибут «задержка прокрутки» scrolldelay принят равным 70. Атрибут «стиль» style (который весьма вместителен и может включить в себя немало чего другого) содержит следующие параметры: стиль рамочки border‑style – двойная (double), с шириной (border‑width) 5 пкс, при отступе текста от рамки слева (padding‑left) в 3 пкс, справа (padding‑right) в 3 пкс, сверху (padding‑top) в 2 пкс, снизу (padding‑bottom) в 2 пкс. Цвет фона для бегущей строки задается атрибутом «фоновый цвет» bgcolor.

Разумеется, текст украшают не только буквицы и заголовки, но и аккуратное форматирование. Заветным желанием всех начинающих дизайнеров является сохранение текста в такой верстке, какая ему предана в Блокноте. Оказывается это возможно. Для данной цели вам потребуется заключить весь текстовый массив между тэгами ‹pre›‹/pre›, которые сохранят разбиение на строки, выполненное в блокноте. Разрывы между абзацами и принудительные переносы на новую строку удобнее всего не отбивать в визуальном редакторе, а помечать непарным тэгом ‹br› (не нуждается в закрытии).

Что касается непосредственно абзаца, то как вы могли видеть, для его верстки применяется два рода парных тэгов – ‹р›‹/р› и ‹div›‹/div›. Они почти одинаковы, так что применять вы можете в равной степени и тот и другой, вот только ‹div› – это новшество последних лет, ожидается, что он вытеснит собой ‹р›. Броузеры пока понимают оба тэга, но вот веб‑редакторы пишут преимущественно ‹div›. И лучше переходить на новые тэги.

Главный атрибут тэга ‹div› (‹р›) – align=, обозначающий выравнивание. Выравнивание осуществляется по центру (center), по левому краю (left) и по правому краю (right). Например: ‹div align=“right”›А вот и я!‹/div›.

Другим важным способом организации текста является маркированный и нумерованный список, удобный для каких‑либо перечислений. Он приятен для глаз и облегчает чтение большого массива информации. Задается маркированный список всегда парным тэгом ‹ul›‹/ul›. Каждый отдельный элемент, напротив которого стоит маркер, буква или число, полагается обозначать парным тэгом ‹li›‹/li›, который обладает тем удивительным свойством, что не требует к себе закрытия. То есть ‹/li› можно писать, а можно и не писать, греха в том не будет. Маркированный список задается в Web Page Maker через текстовый редактор точно так же, как в Word’е (см. рис. 20).

 

Рис. 20. Создание маркированного списка в Web Page Maker

 

Но в этой программе маркер всегда является черным кружочком (Bullet style). Если нам нужно воспользоваться другим видом маркера – незакрашенным кружочком, квадратиком или картинкой‑иконкой из папочки images.files, то нам придется научиться вносить свою правку в html‑код. Пишем к тэгу маркированного списка атрибут стиля ‹ul style=“list‑style‑type:…;”›. На место многоточия нужно внести название выбранного нами маркера. Черный кружочек называется disc, но он нам не нужен, так как ставится программой самостоятельно. Незакрашенный кружочек обозначается словом circle, а квадратик – square. Если нам понадобилось поместить на место маркера картинку, то атрибуту придаем новое значение, меняя type (тип) на image (изображение): ‹ul style=“list‑style‑image: url( ваша папка для картинок/название рисунка. gif);”›.

Нумерованный список быстро и легко задается также через текстовый редактор в веб‑конструкторе. Однако и в этом случае код знать полезно на случай внештатных ситуаций. Например, нам нужно поменять нумерацию с арабской на латинскую. Тогда мы открываем код и вносим правку в тэг ‹ol›. Изначально он не имеет атрибутов, поскольку арабская нумерация ставится по умолчанию. Мы подставляем type=“I” или “i”, что дает нумерацию римскими цифрами, прописными или строчными (обратите внимание на то, что арабский нумерованный список тоже может задаваться через type=, значение которого будет “ 1”). Аналогично задается буквенный список, атрибут которого принимает значение TYPE=“A” или “а”, что означает использование прописных или строчных латинских букв.

Если список разрывается, а потом возобновляется, нужно использовать атрибут start=. К примеру, если список оборвался на числе 15, то его продолжение мы начнем с записи ‹ol start=“16”›.

Напоследок скажем несколько слов про допустимые объемы контента. Здесь справедливо правило «магической семерки», как называется ключевой принцип минимизации текста, найденный опытным путем неутомимыми рекламистами: максимальное число букв в слове – 7, максимальное число слов в предложении – 7, максимальное число предложений в тексте – 7, максимальное число коротких абзацев (по 2–3 предложения) на странице – 7.[15]

С текстом мы разобрались, но сайт может говорить с нами не только через письменные слова, но и через звуковое сопровождение. Звуковое сопровождение бывает двух видов – фоновый звук и звук с проигрывателя. С проигрывателем все понятно. Посетитель заходит на сайт, видит интерфейс аудиоплейера и прокручивает запись, которую ему пообещали. Подобные трюки очень хороши для музыкальных и персональных ресурсов. Организовать нечто подобное у себя вы можете, открыв в Web Page Maker спецально для этих целей сверстанную вами страничку и пройдя путь Insert › Object › Audio, а затем выбрав нужный объект (см. рис. 21). Одна беда – этот проигрыватель запускает запись сразу, как только загрузилась страничка.

 

Рис. 21. Вставка аудиофайла в Web Page Maker

 

Откроем код документа, чтобы исправить это недоразумение. Размещение аудиофайла задается тэгом ‹embed› (он же может использоваться и для видео, если только видеоролик не имеет формата AVI). Здесь мы увидим, что тэгу по умолчанию присвоен атрибут autostart= со значением true, хотя для наших целей нужно другое – false. Производим замену. Проверяем правильность написания кода, внося по ходу и другие необходимые поправки, чтобы в конечном итоге тэг принял вид:

‹embed src=“адрес папки с аудиофайлами/название файла” width=… (введите нужное значение) height=… (введите нужное значение) autostart=false›

Значения ширины и высоты рекомендую оставлять именно такими, какие предложил конструктор, поскольку они обычно наиболее удобны. Обратите внимание: на рисунке нетрудно заметить, что название файла записано русскими буквами – «Титаник». Прежде чем импортировать такой файл, переименуйте его, записав буквами латинского алфавита, причем пользуйтесь только строчными буквами: «titanik». Почему так, вы узнаете позднее, из п. 5.2.

Перейдем к фоновым звукам на сайте. К сожалению, они сильно раздражают, мешают работать, а иногда и просто пугают своей неожиданностью и резкостью. Вот почему применять их следует вдумчиво и очень осторожно. Если перед нами ресурс, посвященный какой‑нибудь эстрадной певице, но на главной странице или в фотоальбоме можно разместить звуковой фон (например, на одном из сайтов про Бритни Спирс звучит песенка «Oops, I did it again»). Но в остальных случаях звуковой фон почти всегда неуместен. Впрочем, на моем ресурсе есть страничка релаксации – на тот случай, если гостям захочется чего‑нибудь оригинального (http://busbook.narod.ru/relax.html). Ссылка, ведущая туда, предупреждает, что нужно предварительно включить колонки или встроенный динамик, чтобы насладиться музыкой природы. На страничке размещается гиф с анимированным изображением водопада, а звуковым фоном служит приятный звук падающей воды – слушай, смотри, медитируй.

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

 

 

Глава 4. Зрелищность сайта

 

Темы (фоновые рисунки)

Напомню, что темой называется единое графическое решение для всех элементов, составляющих интерфейс каждой из страниц сайта. Основу, стиль и дух… Программки типа W.Y.S.I.W.Y.G. предлагают веб‑программистам коллекцию… Проведем аналогию. Самообразование веб‑дизайнера похоже на следствие пса Фу‑фу из забавных детских…

Рис. 22. Формирование рабочего набора кистей в программе Pixarra Twisted Brush

Иллюстрации и видео

Не стоит стремиться создавать чрезмерно насыщенные графикой странички, какие мой гуру Нильсен называет «пышными». Пышные странички плохи тем, что… Напомню, что весом файла называется его объем в байтах. Веб‑страница… Вместе с тем несложная геометрическая графика позволяет добиваться многомерности композиции объектов на…

Рис. 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… (Изображения › Настройки › Яркость или Констраст).

 

Рис. 25. Осветление рисунка в Adobe Photoshop

 

Рис. 26. Повышение контрастности рисунка в Adobe Photoshop

 

Ранее назывались многочисленные программки для создания Gif‑анимации и просто хороших гифов. Все программы хороши – выбирай на вкус, как сказал бы на моем месте Маяковский. Но ради выгоды дизайнера лучше приобрести и установить на ПК Bannershop GIF Animator, поскольку работать с ним предельно просто и вдобавок он позволяет создать не только и не столько гифы, сколько баннеры – главный вид гифов, «населяющих» виртуальную реальность. Попробуем создать в Bannershop экспериментальный баннерок с динамичным изображением смайла.[17]

Для начала определимся с размером баннера. Запускаем Bannershop, выбираем опцию blank animation (анимация с чистого листа) и проходим путь Animation › Frame Size (Анимация › Размер фрейма), благодаря чему перед нами возникает диалоговое окошечко с вариантами всех существующих на свете фреймов – то бишь рамочек – для баннеров. Размеры фрейма можно поменять и самостоятельно, сделав нестандартный баннер, но такие в Сети используются редко. Выберем квадратную кнопку 125 х 125 или близкую по форме, так как в нее легко вписать круглую рожицу (рис. 27).

 

Рис. 27. Выбор фрейма для баннера в Bannershop GIF Animator

 

Теперь нарисуем смайл в CorelDraw, используя геометрические фигурки и заливку. Не забудьте задать линиям толщину 1,5–2 пункта, иначе их не будет видно при экспорте в растровую графику. Сдублируем смайл (Copy и затем Paste в новом месте), изменив что‑нибудь во внешности этой мордашки. Можно сделать своего вампиром и у второго смайла подрисовать треугольнички клыков. Теперь экспортируем каждый из смайлов в формат JPEG, а потом откроем оба рисунка в Фотошопе. Обрежем их так, чтобы длина и ширина соотносились строго определенным образом, в нашем случае – 1 к 1 (квадрат). Вот перед нами два кадра. Пройдем путь Image › Mode › Indexed Color (Изображение › Режим › Индекс цвета), поставив флажок на индексированный цвет, поскольку RGB нам непригоден. Далее экспортируем оба кадра в формат GIF через меню File › Export (Файл › Экспорт).

Вернемся в Bannershop, пройдем путь Image › Import Image (или кликнем на соответствующую иконку на панели управления) и через окно поиска отыщем два готовых кадра, превращенных в гифы. Вставляем сначала первый кадр. Если он оказался крупнее размеров фрейма, проходим путь Image › Image Size (Изображение › Размер изображения). Забиваем в диалоговое окошко числа 125 и 125, кликаем на ОК, после чего программа сама вставляет рисунок в фрейм. Пройдем путь: Frame › Insert New Frame › After Current Frame (Фрейм › Вставить новый фрейм › После текущего фрейма, см. рис. 28/1) и повторим операцию со вторым кадром. Затем сохраняем анимацию – File › Save GIF Image (рис. 28/2). Обратим внимание, что мы не установили скорость смены фреймов. По умолчанию она задается в 1 секунду. Если такая скорость вас не устроит, перед сохранением рисунка пройдите путь Frame › Frame Delay (Фрейм › Задержка фрейма) и установите нужную скорость смены кадров (оптимум 0,3–0,5 секунды).

 

Рис. 28. Создание новых фреймов и сохранение анимации в Bannershop GIF Animator

 

По мере тренировки в разных программах вы научитесь создавать разнообразные красочные гифы. А пока обратим внимание на функцию Animation › HTML Options, которую также задает иконка на панели управления View HTML Options (Смотреть опции HTML). Кликнем на нее, и мы увидим сгенерированный html‑код, который нужно вписать в html‑код верстаемой странички, чтобы на ней появился этот баннер. Если у нас возникнет потребность снабдить гиф комментариями и гиперссылкой, то достаточно внести нужную информацию в соответствующие поля – URL и description, как программа самостоятельно преобразует html‑код. Остается только скопировать его, поставив корректный адрес вашего рисунка в сети (по умолчанию компьютер пишет адрес сохранения гифа на вашем ПК, см. рис. 29). Впрочем, Web Page Maker, которым вы пока пользуетесь, делает эту функцию не особенно нужной, но помнить о таком свойстве Bannershop’а не помешает.

 

Рис. 29. Генератор html‑кода в Bannershop GIF Animator

 

Гифы позволяют отказаться от использования громоздких видеороликов, которые не всегда получается поместить на сайте. Гиф‑анимация по сути дела представляет собой короткий ролик, который и хорош и легок по килобайтам. В некоторых случаях целесообразно имеющийся ролик перегнать в гиф. Новичкам для этой цели посоветую воспользоваться программкой Avi to Gif Converter с очень простым, интуитивным управлением. Все, что нужно делать дизайнеру при работе с этой программкой, – кликать на иконки с всплывающими подсказками. Сначала открыть видеофайл формата *.avi, затем, просмотрев его (а заодно и счетчик кадров), указать на рабочей панельке начальный и конечный кадр для анимации. Далее нужно ввести в подходящие ячейки размеры будущего гифа – его длину и ширину в пикселах. И кликнуть на обособленную иконку «Пуск». Когда файл готов, его сохраняют в нужную папочку, откуда со временем переместят на сайт (см. рис. 30).

 

Рис. 30. Управление в программе Avi to Gif Converter:

 

1 – открыть видеофайл *.avi; 2 – счетчик кадров; 3 – начальный кадр; 4 – конечный кадр для анимации; 5 – ширина *.gif; 6 – высота *.gif; 7 – конвертировать; 8 – сохранить

 

Если же размещение видео принципиально важно, то для этой цели в Web Page Maker припасена опция Insert › Object › Windows Media Video (Вставка › Объект › Видео для Windows, см. рис. 31). Опция применима к файлам видео для Windows, то есть формата AVI. К сожалению, в самом конструкторе видеофайл не просматривается, но имеет вид пустой рамочки. Для просмотра надо открыть страничку в броузере уже после экспорта в HTML. Сверстаем тренировки ради какую‑нибудь пробную страничку, используя видеоролик с сайта «Образованные котята», находящийся по адресу: http://obrazcats.narod.ru/other/video.html.

 

Рис. 31. Вставка видеоролика в программе Web Page Maker

 

Видео крепится в html‑документе посредством тэга ‹img›, как и картинка. Вот только атрибутом, задающим имя файла, является dynsrc=. Не помешает снабдить тэг дополнительным атрибутом start=, показывающим, когда броузер станет проигрывать видео. Значение атрибута start= может быть «fileopen» – то есть сразу после загрузки странички; а может быть «mouseover» – то есть после наведения указателя мыши на изображение. Есть и другой атрибут loop=, значение которого, всегда числовое, показывает количество проигрываний, причем «0» означает бесконечное повторение. Посмотрите код вашей странички в Блокноте и скорректируйте выполненную конструктором запись атрибутов, придав видеоролику следующие качества: ‹img dynsrc=“ваша папка/videostudy.avi” width= на выбор height= на выбор border=0 start=mouseover loop=2› (обратите внимание, что атрибуты не отделяются друг от друга ни запятой, ни точкой с запятой!). Попробуйте сказать заранее, что у вас получится.

А теперь обратим внимание на один такой принципиально важный, каверзный момент, как управление свойствами видео– и графических файлов. К сожалению, об этом думают немногие компании, а между тем для коммерческой организации либо любой другой организации, заинтересованной в притоке посетителей на свой сайт, полезно освоить управление общими свойствами файла – properties. Допустим, какой‑то случайный посетитель вашей странички приметил у вас на сайте стоящие картинки, видео, тексты‑download. И не просто приметил, но еще и скачал их себе, а потом вдобавок ко всему взял да и разослал копии друзьям. Как же сделать так, чтобы эти тиражируемые материалы послужили первоклассной устной рекламой? Куда можно поставить сообщение о своем ресурсе и своей компании?

Оказывается, способ такой есть. Вот, предположим, есть фотография Анжелины Джоли, и это фото нужно разместить на ресурсе. Понятно, что поклонников Джоли множество, поэтому фотку многие скачают, а потом растиражируют по знакомым. При скромной посещаемости очень молодого ресурса порядка 1400 человек в месяц, на стоящую фотографию польстятся до 20 % гостей, итого 220 визитеров. Каждый из них отправит фото хотя бы одному другу (скорее всего кто‑то отправит десяти друзьям, а кто‑то – никому, но в среднем будем считать, что именно одному другу). В результате имеем аудиторию в 440 человек, из которых 220 в принципе, при известном везении, могут стать новыми гостями вашего ресурса, повысив вам посещаемость до уровня 1840 человек в следующем месяце.

Зная об этом, нужно открыть фото Джоли в любом вьювере, какой только есть. Какой‑то вьювер есть и вас, даже если вы не ставили его на свой ПК сами: программка для просмотра изображений (фоток) обязательно прилагается к любой Windows. Простоты ради открываем фотографию через вьювер «Фотоальбом Windows», который установился на ПК в комплекте с операционной системой. Выбираем опцию Файл › Свойства (File › Properties), и перед нами появляется плашка с информацией о файле. Выберем закладку «Прочие [свойства]», и мы увидим, как много можем вписать о себе, точнее о своем бизнесе и электронном ресурсе. Выделяем курсором поля «Заголовок», «Тема» и проч. – и вносим туда нужную информацию (см. рис. 32): URL, e‑mail, сотовый телефон контактного лица компании, юридический или фактический адрес (при необходимости и возможности), наименование компании, сфера ее деятельности.

 

Рис. 32. Заполнение формы свойств рисунка‑jpeg

 

Оставим в покое мою Джоли и обратимся к реалиям российского бизнеса. Допустим, на сайте вымышленного туристического агентства «МегаГлобус» есть прелестный рисунок, изображающий «тропический рай». В свойства такого рисунка стоит внести: Заголовок – Ваша гостиница на Гран‑Канариа; Тема – Доступный отдых на Канарах; Ключевые слова – Канары, отдых, туризм; Комментарии – Сайт: www.megaglobus.com; почта: megaglobus@mail.ru; Авторские права – Турфирма «МегаГлобус» (с) 2008. (Увы, с гифами этот номер не пройдет, столь податливы лишь jpg‑файлы.)

При таком подходе стоит кому‑либо кликнуть на эту картинку в Проводнике на своем ПК или открыть файл во вьюевере, как этот человек немедленно получит многочисленные сведения о вашей компании. Если видимые сведения его заинтригуют, он может открыть свойства файла и узнать больше сведений, что в известной мере побудит его посетить вашу страничку в Интернете или как‑нибудь еще связаться с вами. Не стоит наверное и говорить, что в первую очередь контактная информация вносится в большие и красивые картинки. Например, на сайте придуманной нами турфирмы «МегаГлобус» может иметься отдельная секция, выделенная под обои для рабочего стола и содержащая зрелищные фотки с видами экзотических стран. Отметим, что трюк с обоями могут использовать далеко не только турфирмы, но и:

> компании по торговле легковыми автомобилями (обои с машинами);

> компании по торговле экологически чистыми продуктами (обои с видами природы);

> компании по торговле косметикой или женской одеждой (фото топ‑моделей);

> а также некоторые другие.

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

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

 

Эго‑составляющая сайта

Ранее нам уже перечислялись важнейшие психологические основы индивидуализации посетителя. Попробуем сейчас технически реализовать некоторые из них,… Установите эту программку на свой ПК и смело продолжайте чтение. Произведите… ‹style›‹!‑BODY{

Рис. 34. Образцы иконок favicon в Избранном

 

Наш следующий герой – аватар. Авики могут быть статическими, то есть неподвижными, и анимированными. Удобнее всего изготавливать статические аватары в Photoshop, а подвижные – в Image Ready. Специфическим свойством авика являются его размеры и форма. Это всегда квадрат величиной 100 х 100, реже – 64 х 64, 80 х 80, 120 х 120. Набросаем алгоритм создания аватара. Для начала откройте изображение, из которого намерены сделать авик, пройдя путь File › Open (Файл › Открыть). Обрежьте картинку инструментом Crop, после чего уменьшите размер аватарки: Image › Image Size до 100 х 100 или около того (по вкусу). Лучше всего сохранять готовую картинку File › Save for Web.

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

 

Таблица 3[18]

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

Затем в тело документа вносится следующий код: ‹span id='img00 style='position: absolute; left:‑100px;… ‹Script Language='JavaScript'›

Глава 5. Приложения

 

Готовые решения

В заключительной главе мы рассмотрим еще одну дизайнерскую программу из семейства W.Y.S.I.W.Y.G., которая позволяет новичку в деле веб‑дизайна… Но временами деятельность веб‑дизайнера оказывается более чем шаблонной,… Одновременно нам предстоит освоить на практике справедливость требования Net– centric corporate culture – требования…

Рис. 35. Мастер Сайтов в Net Objects Fusion

 

Рис. 36. Задание страниц веб‑узла в Net Objects Fusion

 

Выставим рядом с отобранными страничками флажки. При установке каждого флажка появляется плашка с предложением четырех вариантов взаимного расположения слоев на будущей страничке. Если устраивает расположение, заданное по умолчанию, то можно оставить все как есть. Из всего разнообразия предложенных страничек мной были выбраны: Home (Домашняя), About (О герое сайта), Downloads (Скачать), Contact Us (Контакты), Events (События), Photo Gallery (Фотогалерея), FAQ (Часто задаваемые вопросы), Links (Ссылки). Кликаем на Next и заполняем форму с личными и контактными данными, указывая в ней то, что, по нашему мнению, поспособствует установлению скорейшего контакта с посетителями сайта. Если что‑то вас не устроит, то жмите на Back (Назад), если же все сочтете верным, то выбирайте Finish (Готово).

Когда вы кликаете на «Готово», программа сохраняет весь проект как один файл под деловым названием (Business Name) с расширением *.nod, что, очевидно, содержит аббревиатуру от наименования самого редактора (Net Objects). Перед вами появляется древовидная структура сайта. Остается только выбирать странички, верстать их и задавать им необходимые свойства. Разберем этот процесс пошагово на примере одной типовой странички – Домашней, с которой и предлагает нам начать работу Мастер Сайтов.

На панельке Properties (Свойства) выбираем имя странички (желательно index), после чего записываем в ячейку Title мета‑тэг титула «Дефо: Главная». После кликнем на кнопку Custom Names и зададим названия баннеров и навигационных кнопочек, которые приведут нас на главную со всех частей сайта. А попутно укажем формат странички – HTML. На следующих вкладышах панельки Properties находим окошко для указания ключевых слов, заполним его: Даниэль Дефо, Даниель Дефо, английская литература, романы, жизнь и удивительные приключения, Робинзон Крузо, Моль Фландерс, Великобритания, Daniel Defoe, de Foe и т. д. Поставим флажок в окошке напротив надписи «Применить мета‑тэги ко всем страничкам» (Apply Meta tags to all pages).

Установим защиту для странички, пользуясь закладкой Protect Page на плашке Properties. Выставим здесь флажки там, где сочтем необходимым. Некоторые, например, защищают странички своих ресурсов от копирования (From copying), но мне такой подход совершенно не по душе. Пусть люди заходят и копируют, качают все, что им только в голову взбредет. И вам советую поступать также при верстке своего проекта. Повторим заполнение имен для всех остальных страничек, для чего нам понадобится выделить нужную страничку и с помощью плашки Properties выставить свои значения в окошках Name, Title, Custom Name. При этом вызывая Custom Name, не забудем установить для каждой странички File Extension – расширение файлов. Пусть оно будет *.htm или *.html, поскольку именно с таким мы прежде имели дело.

Если вы вдруг решите, что объема некоторой странички окажется недостаточным, то вам потребуется доделать нужное количество дочерних страничек для того или иного раздела сайта. Например, вся биография Дефо явно не уместится на страничке About, вот почему мы выделяем эту страничку курсором и кликаем на иконку New Page на панели управления. В результате получаем добавленную дочернюю страничку. Она пока безымянная и лишена многих свойств, настройку которых мы производим с помощью плашки Properties.

Когда этот этап работ остался позади, можно вернуться к главной, выделив ее, и кликнуть на иконку Page на панели инструментов, что позволит перейти к редактированию выделенной странички, то есть Домашней. На этом рассказ о создании сайта можно завершить. Работа с отдельными страничками нами хорошо изучена, а по интерфейсу Net Objects Fusion сильно напоминает старую добрую Microsoft Expression Web (при этом кое в чем даже попроще, так что с дизайном странички легко будет разобраться).

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

В общем виде потребности приобретают форму древа. Рассмотрим такое древо, используя для этой цели специальные обозначения. Обозначим главную цель как АА, тогда сопутствующие второстепенные цели получают обозначения Аа, аА и аа. Главная задача пользователя состоит в том, чтобы найти АА. Очевидно, что первое сообщение – это то, которое удержит посетителя на сайте, то есть сообщение вида Аа – «вы нашли то, что искали, вот общие сведения, за конкретикой переходите сюда». Контент Аа напрямую ведет к контенту АА. Рядом с контентом АА соседствуют ссылки на контенты вида аА – комментарии, дополнения, полезные сведения, прямо или косвенно затрагивающие существо главного вопроса. Со страничек, заполненных контентом аА, должны быть переходы на контент аа, который малосущественен и используется главным образом для не очень занятого посетителя, собирающего дополнительные данные о компании. (Кроме того, дополнительный контент хорош тем, что повышает посещаемость сайта в целом и улучшает его обнаружение поисковыми системами; поэтому, кстати, со страниц с контентом аа должны иметься переходы на страницу с наполнением АА.)

Предположим, вами создается ресурс по продвижению работ по озеленению садов, балконов и квартир, выполняемых некой условной фирмой «Аленький цветочек». Запустим Мастера Сайтов в HTML‑редакторе Net Objects Fusion и быстренько сверстаем нужный нам сайт. Укажем для него следующие странички:

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

От нее ответвляется страница About – О компании (очень кратко о главном: деятельность компании, спектр услуг, расценки, консультации).

Другая дочерняя страница: Contact Us – Контакты (e‑mail компании, телефоны контактных лиц с указанием имен и должностей); от нее ответвляется Location – Расположение (продолжая страничку контакты, указывает фактические адреса филиалов в разных городах страны с картами маршрутов).

Затем с главной ведет страница Services – Работы. Это подробный рассказ об услугах компании «Аленький цветочек» с упором на конечный результат, то есть рассказ о том, что может приобрести в этой компании потенциальный клиент. От данной странички отходят дочерние Catalog, Download(s), Listings.

Catalog – Каталог. Это иллюстрированный указатель конкретных работ по дому и саду, которые выполняет компания; на этот раз конечный результат не описывается, но сообщается, сколько потребуется времени и денег на ту или иную работу; здесь же имеются калькулятор и формы для оформления заказа. Download(s) – Скачай. Здесь помещаются скачиваемые в виде zip‑архивов прейскуранты (допустимо включить, при желании, секцию ботанической литературы, подборку занимательных статей по садоводству). Listings – Списки, то есть списки видов и сортов растений, с которыми работает компания; списки семян, которые рассылает компания своим клиентам; списки обслуженных VIP‑клиентов, оставивших хорошие рекомендации.

Теперь обратимся к отходящей от домашней странички Events – События (собственные мероприятия и промо‑акции компании, награждения, участие в конкурсах, демонстрация работ, корпоративные праздники). С ней логически связана Photo Gallery – Фотогалерея (преимущественно образцы работ: поменьше раздражающих физиономий, побольше радующей глаз зелени; отдельную секцию галереи стоит посвятить обоям на рабочий стол, изображающим радующие глаз цветники[20]).

Завершают ресурс FAQ и Links, тоже отходящие от домашней. FAQ – Часто задаваемые вопросы (по садоводству, цветоводству, по условиям оказания услуг компанией «Аленький цветочек»). Links – Ссылки (на родственные и дружественные ресурсы, в том числе посвященные комнатным и садовым растениям).

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

Допустим, что первичный шаблон сайта нам не особенно понравился, и мы его решили немного оживить. В данном редакторе для этого есть замечательная возможность в виде библиотеки стилей. По завершении работ с конструированием сайта нам достаточно лишь кликнуть на иконку Style на панели управления и сделать свой выбор, просмотрев коллекции стилей. В коллекции Classic Site Styles для нашего «Аленького цветочка» нашлись два хороших шаблона – Gardening (садоводство) и Sunflower (подсолнух). Можно выбрать для примера «Садоводство» (см. рис. 37), потому что этот стиль дает красивый интерфейс сайта и славное меню. Кликаем теперь на иконку Set Style (установить стиль) и подтверждаем, что выбранный нами стиль должен быть применен к конструируемому сайту.

 

Рис. 37. Шаблон «Садоводство» в Net Objects Fusion

 

В дальнейшем странички можно дорабатывать здесь же или в другом HTML‑редакторе. Встроенный в Net Objects Fusion редактор удобен тем, что наглядно показывает структуру готового html‑документа и поэтому снижает вероятность ошибки при редактуре гипертекста и/или вставке новых html‑объектов. Открыть HTML‑код странички можно, проделав путь Go › HTML Source. Выполнив все доработки, готовый сайт можно запустить в Интернет, просто кликнув на иконку Publish Site (опубликовать сайт), хотя удобнее загрузить тщательно отредактированные странички через страничку загрузки самого хоста.

Консультационный центрможет быть обособленным либо являться продолжением сетевого ресурса компании. Предположим простоты ради, что у нас консультационный центр является рубрикой сайта «Аленький цветочек» либо прикрепленным к последнему подсайтом. Консультационный центр тесно связан гиперссылками с FAQ, отчасти даже повторяя его. Инструментарий на сайте консультационного центра должен предоставлять посетителю возможность активно работать с предоставляемой информацией, своевременно и полноценно обрабатывать часть документальных материалов он‑лайн, чтобы не приходилось искать в кипе бумаг на столе справочники и т. д. (А если юзер вообще работает через Интернет‑кафе, то мы приятно порадуем его.)

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

С этой целью в редактор кодов программы Web Page Maker или непосредственно в тело документа через блокнот либо иной упрощенный редактор записывается соответствующий скрипт «Калькулятор» со странички http://obrazcats.narod.ru/pages/scripts/scripts.html (готовый результат проверьте в действии на страничке http://obrazcats.narod.ru/pages/scripts/calculator.html).

Рассмотрим теперь пример другого веб‑инструмента, пригодного для активного использования на сайте консультационного центра. Это счетчик расстояний по прямой между разными городами мира, что может показаться интересно и полезно как бизнесменам, так и любителям авиапутешествий и морских круизов. Такой счетчик можно разместить в центре консультаций по выбору услуг турагентств и авиакомпаний. Чтобы сконструировать подобное устройство, требуется скачать код на нашем учебном сайте со странички http://obrazcats.narod.ru/pages/scripts/scripts.html, при этом обратив внимание на тот факт, что часть кода внедряется в шапку html‑документа ‹head›, сразу после всех мета‑тэгов и титула ‹title›.

Понятно, что этот скрипт управляет работой счетчика расстояний. В body документа нужно скопировать кое‑что другое: сам счетчик, то есть его интерфейс и некоторые вспомогательные механизмы, работающие по приведенному выше скрипту. Код интерфейса и скрытых «под ним» механизмов записывается целиком внутри тегов ‹form›. Окончательный результат можно увидеть и опробовать в действии на страничке http://obrazcats.narod.ru/pages/scripts/airdistance.html.

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

Прежде всего для отправки заказа в режиме он‑лайн можно использовать контактную форму. Формы удобны, понятны, приятны. Ими легко и с удовольствием пользуются все посетители. Откроем html‑код странички для формирования заказов (ссылки на которую ведут СО ВСЕХ ПРОЧИХ СТРАНИЦ ресурса) и в тело документа внесем описание простейшей формы:

‹Н2›Доброго времени суток, уважаемый посетитель нашего магазина!‹Н2›

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

‹form name=“mailer” method=“post”

enctype=“text/plain” onSubmit=“(document.mailer.action += mailtoandSubject)”›

Введите ваше имя:‹br›

‹input type=“text” name=“Name” size=“ 24”

onChange=“msg(this.form)”›‹br›

Укажите тему сообщения (Заказ/Дозаказ):‹br›

‹input type=“text” name=“Subject” size=“ 24”

onChange=“msg(this.form)”›‹br›

Сюда впишите наименование товара и ваши контактные данные:‹br›

‹textarea name=“Message” cols=“ 40” rows=“ 6”

onChange=“msg(this.form)”›‹textarea›‹br›

‹input type=“submit” value=“Отправить

onClick=“return checkIt()”›

‹input type=“reset” value=“Очистить”›‹/form›

‹p›Благодарим за покупку! Пусть наши цветы всегда радуют ваш взгляд.‹/p›

Заметим, что приведенный здесь пример неудачен. Вместо слова «Очистить», которое поставлено намеренно, нужно написать «Сброс» или «Очистить форму». Дело в том, что два одинаковых по длине слова на букву «О» (отправить и очистить), расположенные на двух соседствующих кнопочках послужат причиной множества досадных ошибок, отчего ваш сайт невзлюбят посетители. Примите сказанное к сведению и запишите код в вашем редакторе, после чего проверьте через опцию просмотра. Форма готова, но она пока непригодна для отправки сообщений. Для этой цели нам нужно написать команду‑скрипт, которая целиком помещается в заголовке документа. Напомню, что скрипты разумнее всего писать не промеж мета‑имен, а непосредственно перед закрывающим тэгом ‹/head›:

‹script language=“JavaScript”›

function checkIt() {

//____________________

if (document.forms.mailer.Name.value!= “”) {

} else {

alert (“nОбласть “Имя” в форме. nnБудьте добры ввести свое имя.”);

document.forms.mailer.Name.focus();

return false;

}

//____________________

if (document.forms.mailer.Subject.value!= “”) {

} else {

alert (“nОбласть “Тема” в форме. nnБудьте добры указать тему.”);

document.forms.mailer.Subject.focus();

return false;

}

//____________________

if (document.forms.mailer.Message.value!= “”) {

} else {

alert (“nОбласть “Сообщение” в форме. nnБудьте добры назвать товар и контактные сведения.”);

document.forms.mailer.Message.focus();

return false;

}

//____________________

}

function msg() {

document.mailer.action = “mailto: здесь ваш почтовый адрес

mailtoandSubject = ((`?Subject=` +

document.mailer.Subject.value) + ` amp;Body=` +

document.mailer.Message.value);

}

‹/script›

Совершенно очевидно, что три «присказки», которыми открывается скрипт и которые начинаются со слов «если документ…», – это функции проверки. Стоит покупателю забыть заполнить какую‑нибудь ячейку формы, как компьютер немедленно оповестит его об этом. Но поскольку у нас диалоговых окошек только три, то, наверное, использовать данные функции будет чистой воды издевательством над собой. Выбрасываем их из скрипта, оставляя только функцию отправки, помещенную последней. Однако вы еще вернетесь к этой страничке, когда вам потребуется сверстать более сложную форму. Обратим внимание и на значок //____________________. Это обозначение разделителя функций, совершенно ненужное для компьютера, так что можете и от него отказаться. Но в больших формах все же стоит пользоваться подобным разделителем, чтобы не запутаться в собственных письменах.

Но пока рассмотрим еще один способ эффективной отправки сообщений, а именно – активный e‑mail. Напишите на веб‑страничке свой или любой другой адрес электронной почты, после чего откройте код документа и внесите в этот адрес следующие изменения. Во‑первых, выделите его как ссылку ‹a href=“mailto: ваш адрес”›Пишите, чтобы оформить заказ!‹/a›. Готово – адрес активен, хотя сейчас им неудобно пользоваться. Поэтому введем несколько дополнительных указаний для компьютера. Сделаем так, чтобы полученное менеджером по этой ссылке письмо отличалось от остальных, то есть заранее имело указание темы: ‹a href=“mailto: ваш адрес?subject=Заказ”›Пишите, чтобы оформить заказ!‹/a›. Отлично, а теперь создадим в письме некое подобие формы, чтобы клиенту оставалось только заполнить пустые строчки: ‹a href=“mailto: ваш адрес?subject=Заказ amp;Body=Здравствуйте! Заказываю… (впишите наименование товара) под номером… (впишите №) по цене… (впишите цену) руб. в количестве. Мой e‑mail:… (если есть); телефон:… (если есть).”›Пишите, чтобы оформить заказ!‹/a›.

Когда менеджер использует несколько почтовых ящиков, то неплохо направить письмо сразу на все или, по меньшей мере, некоторые из них. Для этого вносим в код дополнительные адреса: ‹a href=“mailto: ваш адрес?subject=Заказ amp;Body=Здравствуйте! Заказываю… (впишите наименование товара) под номером… (впишите №) по цене… (впишите цену) руб. в количестве… (укашите количество). Мой e‑mail:… (если есть); телефон:… (если есть). amp;cc=ваш второй адрес (будет записан как копия)”›Пишите, чтобы оформить заказ!‹/a›.

Центр послепродажного обслуживания скорее всего будет расположен на том же сайте, что и собственно магазин – ведь размещать их особняком было бы в высшей степени нелепо. И тем не менее здесь обособлено два ресурса. Дело в том, что некоторые магазины не обрабатывают интернет‑заказы, зато активно принимают жалобы, вопросы и пожелания через Сеть. Так что на сайте такой организации может и не вестись электронная торговля, зато здесь будет размещен центр послепродажного обслуживания, что служит проявлением особой внимательности и уважения к клиентам. Напомню, что являюсь противником форумов и гостевых книг на деловых ресурсах. Зато никто не имеет ничего против форм, которые можно быстренько заполнить и отправить куда следует, если, конечно, формы не заменяют собой адрес электронной почты, поскольку в этом случае они вредны. Кодировка такой формы в принципе сходна с кодировкой формы для формирования заказа, но присутствуют и некоторые различия. Рассмотрим их внимательно:

‹p›Доброго времени суток, уважаемый посетитель нашего магазина! Что вы думаете о нашем веб‑узле, товарах, организации? Что вы считаете нужным сказать нам? Мы будем признательны за предоставленные сведения.‹/p›

‹form name=“mailer” method=“post”

enctype=“text/plain” onSubmit=“(document.mailer.action += mailtoandSubject)”›

‹p›‹strong›Тип отправляемого сообщения:‹/strong›‹/p›

‹dl›‹dd›‹input type=“radio” name=“MessageType” value=“Praise”›Благодарность ‹input type=“radio” name=“MessageType” value=“Problem”›Вопрос ‹input type=“radio” name=“MessageType” value=“Suggestion”›Предложение ‹input type=“radio” name=“MessageType” value=“Complaint”›Жалоба ‹/dd›‹/dl›

‹p›‹strong›К какой области относится ваше сообщение?‹/strong›‹/p›

‹dl›‹dd›‹select name=“Subject” size=“1”›

‹option selected›Веб‑узел‹/option›

‹option›Фирма‹/option›

‹option›Товары‹/option›

‹option›Офис‹/option›

‹option›Персонал‹/option›

‹option›(Другое)‹/option›‹/select›

Другое:‹input type=“text” size=“ 26” maxlength=“ 256” name=“SubjectOther”›‹/dd›‹/dl›

‹p›‹strong›Введите текст сообщения в следующее поле:‹/strong›‹/p›

‹dl›‹dd›‹textarea name=“Comments” rows=“ 5” cols=“42”›‹/textarea›‹/dd›‹/dl›

‹p›‹strong›Как с вами связаться?‹/strong›‹/p›

‹dl›‹dd›‹table›‹tr›

‹td›Ваше имя‹/td›‹td›‹input type=“text” size=“ 35” maxlength=“ 256” name=“Username”›‹/td›‹/tr›

‹tr›‹td›Эл. адрес‹/td›‹td›‹input type=“text” size=“ 35” maxlength=“ 256” name=“UserEmail”›‹/td›‹/tr›

‹tr›‹td›Телефон‹/td›‹td›‹input type=“text” size=“ 35” maxlength=“ 256” name=“UserTel”›‹/td›‹/tr›‹/table›‹/dd›‹/dl›‹dl›

‹dd›‹input type=“checkbox” name=“ContactRequested” value=“ContactRequested”›

Свяжитесь со мной по данному вопросу как можно быстрее.‹/dd›‹/dl›

‹p›‹input type=“submit” value=“Отправить”›

‹input type=“reset” value=“Сброс”›‹/p›‹/form›

Такая форма весьма сложна для начинающего веб‑дизайнера, но у вас все получится. Начинать ее конструирование следует с наиболее простых элементов, например удалив или объединив в одну некоторые ячейки. И всегда ставьте пункт «Благодарность» на первое место: начинать перечень с жалобы опасно для бизнеса.

 

5.2. «Ургентная хирургия»

 

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

Наиболее типичные ургентные случаи – не открывается рисунок или не работает гиперссылка. В этом случае наверняка допущена опечатка в коде или даже не опечатка, а имеет место использование неположенного символа. Если есть возможность быстро добраться до дома или Интернет‑кафе – бегом туда, проверьте написание ссылки/имени рисунка. Проверьте совпадает ли содержимое кода странички с тем, что фактически существует в Сети (адрес узла, имя и формат рисунка). Обратите внимание на большие и маленькие буквы, упростите их название при необходимости. Здесь чаще всего возникают неприятные моменты, которые потом попортят ваш ресурс, в связи с чем вот мой дружеский совет. При верстке странички:

1) всегда и повсюду пользуйтесь только английским языком (кроме написания самого контента, разумеется);

2) не ставьте пробелов в названиях и ссылках, в крайнем случае на месте требуемого пробела поместите нижнее подчеркивание вот такого вида _ (например: ded_moroz.jpg);

3) никогда не используйте больших (прописных, то есть заглавных) букв в названиях и ссылках, поскольку это повышает вероятность ошибок (тем более что Web Page Maker и некоторые другие визуальные редакторы обладают кошмарной способностью превращать заглавные буквы в названии импортируемых картинок в строчные);

4) никогда не применяйте в названиях знаков препинания, звездочек, математических и иных символов и т. д.;

5) не пишите слишком длинные, «километровые» названия для рисунков, вроде i_know_you_love_only_me_…_etc.gif. Это ни к чему!

Вот и вся профилактика. Если не открывается какая‑то из новых страничек вашего сайта, то дело может быть не только в неправильной ссылке. Велика вероятность того, что эта страничка либо вовсе не загружена на хост, либо загружена под другим именем, либо загружена в неправильную папку корневого каталога. В том случае, когда вы не обнаружили причины, из‑за которой не хочет загружаться новая страничка, или когда новая страничка отсутствует в каталоге, надлежит быстренько, непосредственно в Интернет‑кафе, открыть на компьютере Блокнот или Word и создать на них html‑страничку, что совершенно нетрудно. В эту страничку записывается следующий код:

‹br›‹br›‹p style=“filter: Shadow(Color= #000000 , Direction= 130 ); width: 400; height: 60; font‑size: 30pt; font‑weight: bold; text‑align: center; color: green”›ПРОСИМ ПРОЩЕНИЯ!‹/p›‹br›

‹p align=“left”›По техническим причинам настоящая страничка временно не открывается.‹br›Вы можете вернуться на предыдущую страничку либо перейти на новые, указанные в перечне ниже.‹br›Спасибо за понимание.‹/p›‹br›‹br›

‹HR width=80 % align=“center”›‹/HR›‹br›

‹H2 align=“center”›ПЕРЕЧЕНЬ ДОСТУПНЫХ СТРАНИЧЕК‹/H2›

Далее пойдут ваши ссылки. Код тривиален и хорошо вам известен. Его не нужно учить наизусть: достаточно понимать, что тут написано – и он крепко‑накрепко запомнится сам. Линии, заголовки, фильтры, абзацы – все это мы учили. Не спешите немедленно забивать в Блокнот или веб‑редактор все то, что здесь упомянуто. Сначала попробуйте мысленно представить себе, какой именно будет окончательная страничка. Затем попытайтесь добавить чего‑нибудь своего в код, хотя бы измените цвет надписи «Просим прощения!» с зеленого на красный или синий. Что делать с ургентной страничкой, думаю, вам понятно.

И наконец, совершенно злодейская ситуация: у вас исчез текст. То есть он попросту не виден на страничке, хотя явно присутствует на положенном месте в html‑коде. Проверьте наличие на странице скрытого текста. Очень хорошо, если в вашем Интернет‑кафе на компьютерах установлена FrontPage или другой достаточно продвинутый редактор: он подсвечивает невидимый текст серым цветом, что упрощает вашу задачу. Найдите начало невидимого текста и удалите знаки невидимости с лишними комментариями либо поставьте границы (скорее всего вами не была прописана закрывающая скобка). Второе объяснение вашему ЧП – неправильно указанные, «перекрывающие» друг друга значения тэгов ‹div›. До тех пор, пока вы недостаточно свободно читаете на HTML, самый легкий выход из ситуации состоит в элементарном удалении одного из препятствующих тэгов.

Рассмотрим сказанное на примере моего ресурса. Первоначально на страничке download.html (для скачивания книг) использовано форматирование текста ‹div class=right›, но потом верстку усложнена:

‹div style=“position: absolute; overflow: hidden; left:278px; top:300px; width:781px; height:2813px; z‑index:17"›‹DIV class=right›‹H3›Наше место в экологической истории‹/H3›

… (и т. д., и т. п.)‹/div›‹/div›

Казалось бы, ничего страшного. Однако если оставить старое форматирование ‹div class=right› наравне с новым, то итогом станет не более сложная визуальная структура текста, а просто напросто отсутствие видимого текста в броузере. Так что тэги ‹div class=right›‹/div › придется удалить. Наверняка и у вас произошло нечто похожее.

 

Юридические аспекты

Редко какая книга по дизайну и маркетингу не содержит критики чужих ошибок, разбора недочетов, которые допустила та или иная фирма. Немногочисленные… Даже гуру Нильсен не удержался и пожурил как‑то раз сайт Международного… Вам смешно, а мне грустно. Сайты создаются под разные категории посетителей, абсолютного качества и всемирного…

Литература

 

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

Дунаев В. Сценарии для Web‑сайта: PHP и Java Script. / 2‑е изд. – СПб.: БХВ‑Петербург, 2008. [Самоучитель по популярным языкам для написания скриптов, содержащий немало готовых примеров]

Кинкоф Ш. В. Наглядный самоучитель HTML. – М.: НТ‑Пресс, 2008. [Пособие по глубокому изучению языка HTML]

Комолова Н. В. HTML: Самоучитель. – СПб.: Питер, 2008. [Масса полезной информации о графике и мультимедиа, в том числе советы по баннерной рекламе]

Тихонов А. И. Динамический HTML. /2‑е изд. – М.: Бином, 2008. [Все о DHTML, чтобы на вашем сайте буковки сновали и кнопки мигали]

Томас Д., Хэнсон Д. Х. Гибкая разработка веб‑приложений в среде Rails. – СПб.: Питер, 2008. [В книге даются основы программирования в среде Rails, достаточные для создания собственного Интернет‑магазина]

Чебыкин Р. Самоучитель HTML и CSS. – СПб.: БХВ‑Петербург, 2008. [Раскрывая сущность HTML и CSS, автор знакомит читателя с тонкостями юзабилити]

 


[1]Длительное блуждание по Сети, особенно без определенной цели, называется серфингом, поэтому и юзера такого склада нужно называть серфером (серфингистом)

 

[2]Строго говоря, буквы любого алфавита, иероглифы, пиктограммы и математические символы представляют собой тоже разновидности кодов, так как информация в незакодированном виде для человека недоступна.

 

[3]Такие файлы открываются еще в программах из семейства текстовых редакторов «Мастер» и «Лексикон». Однако в наши дни «Мастер» и «Лексикон» почти не известны компьютерщику.

 

[4]«Родной» принято называть на сленге компьютерщиков программу, в которой как раз и создавался файл, используемый в текущий момент.

 

[5]Более сложную структуру могут позволить себе лишь сайты или разделы сайтов, отведенные под библиотеки, газеты и т. д., поскольку здешние визитеры изначально настроены на то, чтобы почитать, а значит, никуда не спешат. На коммерческих сайтах подобное усложнение недопустимо. Если потенциальный клиент не найдет в три клика прайсы, контактные формы или еще что‑нибудь в том же роде, то он быстренько убежит с сайта.

 

[6]Хотя техника изготовления курсоров здесь подробно описана в пособии, коллекцию шаблонных курсоров можно скачать на нашем ресурсе «Образованные котята» по адресу http://obrazcats.narod.ru/other/cursors.html.

 

[7]Еще один случай ошибки. Правильнее «аниме», но, похоже, в русском языке закрепилось неверное написание.

 

[8]Сказанное, однако, вовсе не означает, что коммерческим сайтам не стоит мелькать на страничках уже готовых форумов. Еще как стоит!

 

[9]Вукс Т. История дизайна: от Сократа до Баухауза. – http://www.nundesign.com [эл. ресурс]

 

[10]Пиксел (пкс) – точка изображения, кодирующая какой‑то один цвет

 

[11]Если вы не знаете английского, то его придется выучить, поскольку иначе создавать сайты не получится: дизайнерские программы работают главным образом на этом языке, а также справочная документация, доступная через интернет, написана почти исключительно на английском. Если не хотите учить этот язык – оставьте надежду стать веб‑дизайнером. Кстати, приведенная здесь фраза означает «юзер во веки веков».

 

[12]Иной раз полезно ТРИЖДЫ ПОДУМАТЬ, а уже потом что‑то писать. Например, сюда так и просятся слова «Старые авторы», но лучше таких авторов назвать постоянными. Как по‑вашему, приятно ли будет какой‑нибудь тридцатилетней поэтессе услышать про себя, что она – старуха?!

 

[13]Вот почему выгоднее не переписывать скрипты с книг, а копировать из Интернета. Все выложенные в этом издании скрипты, а также некоторые другие можно скачать в файлах формата *.txt с сайта «Образованные котята» (http://obrazcats.narod.ru/pages/scripts/scripts.html).

 

[14]Дедюхина А. Он нас всех посчитал // Эксперт. № 47, 2002. С. 42–43.

 

[15]Школьник Л. С., Тарасов Е. Ф. Язык улицы. – М.: Наука, 1977. С. 27.

 

[16]Большую коллекцию готовых фоновых рисунков, выполненных в Pixarra Twisted Brush, можно найти на сайте «Образованные котята» по адресу http://obrazcats.narod.ru/pages/txt/themes.html

 

[17]Для тех, кто пока мучается с английским, подскажу, что слово shop означало в старой Британии не столько лавку, сколько ремесленную мастерскую. И хотя сегодня остальному миру оно известно в первом значении, в названиях «софта» (Фотошоп, Баннершоп и т. д.) имеется в виду не магазин, а именно мастерская.

 

[18]Смотри также коллекцию скриптов на http://obrazcats.narod.ru/pages/scripts/scripts.html

 

[19]Огромную коллекцию полезных бесплатных скриптов вы найдете на сайтах http://appletlib.tripod.com, http://www.dynamicdrive.com, http://sababa.webhost.ru, http://obrazcats.narod.ru и, конечно, на http://javascript.internet.com

 

[20]Эксклюзив для заказчиков мужского пола – обои с красивыми девушками в красивых цветниках.

 

– Конец работы –

Используемые теги: искусство, оформления, сайта, Практическое, пособие0.087

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

Что будем делать с полученным материалом:

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

Еще рефераты, курсовые, дипломные работы на эту тему:

Буторин Л.В., Вахтанов С.И., Шевелев И.А. Механика. Учебно – практическое пособие. – М.: МГУ ТУ, 2011
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РФ... МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ... ТЕХНОЛОГИЙ И УПРАВЛЕНИЯ...

ПО ВЫПОЛНЕНИЮ ПРАКТИЧЕСКОГО ЗАДАНИЯ по дисциплине Финансы организаций Тема и варианты практического задания разработаны в соответствии с учебным материалом дисциплины. МЕТОДИЧЕСКИЕ УКАЗАНИЯ
ПО ВЫПОЛНЕНИЮ ПРАКТИЧЕСКОГО ЗАДАНИЯ по дисциплине Финансы организаций... ВВЕДЕНИЕ Тема и варианты практического задания разработаны в соответствии с учебным материалом дисциплины Учебные цели и задачи...

Соколов Г.И. Искусство этрусков. — М.: Искусство, 1990. — 319 с., ил. — Очерки истории и теории изобразит. искусств
ВВЕДЕНИЕ... с Искусство этрусков живших в первом тысячелетии до н э конец VIII I вв до н э на территории Апеннинского...

Практическое пособие по сохранению имущества при разводе
Начнем. Несмотря на то, что вы в браке и у вас не видны тучи на горизонте семейной жизни, всегда предполагайте их наличие. Для этого определитесь с… С детьми есть риск, что при их совершеннолетии они могут поступить крайне не… Финансовая опора всегда позволяет спокойно переносить супружеские невзгоды, поскольку отношение к ним совсем другое.…

Методическое пособие для выполнения практических работ по дисциплине Математика часть 1
Методическое пособие для выполнения практических работ по дисциплине... для профессий начального профессионального образования и специальностей среднего профессионального образования...

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

Искусство словесной атаки: Практическое руководство
Искусство словесной атаки Практическое руководство... Содержание...

Практическое пособие по охоте на мужчин
Практическое пособие по охоте на мужчин... ПРЕДИСЛОВИЕ... Наверное эту книгу следовало писать в возвышенно романтическом стиле Потому что именно такой стиль наиболее близок...

Учебное пособие Для выполнения практических и контрольных работ "Линейная алгебра” Пермь 2010
высшего профессионального образования... Пермский государственный технический университет... Учебное пособие Для выполнения практических и контрольных работ...

Методическое пособие для практических (семинарских) занятий по дисциплине «Электротехника и электроника. Электротехника»
для практических семинарских занятий... по дисциплине Электротехника и электроника Электротехника... для направления подготовки Информатика и вычислительная техника...

0.038
Хотите получать на электронную почту самые свежие новости?
Education Insider Sample
Подпишитесь на Нашу рассылку
Наша политика приватности обеспечивает 100% безопасность и анонимность Ваших E-Mail
Реклама
Соответствующий теме материал
  • Похожее
  • По категориям
  • По работам