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

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

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

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

Введение

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

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

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

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

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

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

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

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

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

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

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

1.1. Веб-дизайн как ремесло

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

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

Говоря откровенно, споры о выборе в пользу техники или искусства столь же нелепы, как и спор «физиков и лириков», развернувшийся на рубеже 50-х и 60-х гг. прошлого столетия, по поводу которого Борис Слуцкий отреагировал знаменитыми стихами:

Что-то физики в почете,Что-то лирики в загоне.Дело не в сухом расчете,Дело в мировом законе.

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

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

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