Библиотека Интернет Индустрии I2R.ru

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

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

Задачи веб-дизайна

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

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

Вообще говоря, язык гипертекстовой разметки страниц HTML, от которого, как от печки, приходится плясать каждому разработчику, создавался никак не для дизайна. Он был нужен для того, чтобы слегка отформатировать страницы с текстом... и всё! 90% труда веб-дизайнера состоит как раз в том, чтобы заставить этот язык служить целям, для которых он не предназначался.

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

И, наконец, браузеры (Netscape Communicator, Internet Explorer, Opera etc.). Дело в том, что разные программы, предназначенные для отображения HTML-кода, понимают и визуализируют этот самый код очень и очень по-разному, что относится и к различным версиям одного и того же браузера. Это -- ещё одна проблема, с которой веб-дизайнер сталкивается ежедневно.

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

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

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

2. Создание HTML-шаблонов.

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

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

3. Программирование I (клиентская часть).

Как правило, веб-страницы должны быть интерактивными, т. е. содержать элементы интерфейса, реагирующие на действия посетителя, которые не сводятся к щелчкам на ссылках. Чаще всего используются так называемые roll-overs, т. е. изменения внешнего вида элементов страницы, над которыми проходит курсор мыши (пример: кнопка, на которую наведён курсор, сменит цвет). Такого рода функции обеспечиваются за счёт программирования на одном из скриптовых языков (обычно JavaScript) и выполняются на компьютере посетителя страницы. Называются эти скрипты client-side scripts.

4. Внесение контента (содержания).

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

5. Программирование II (серверная часть).

Очень часто богатые возможности того или иного сайта обеспечиваются за счёт серверного программирования (server-side scripting). Функции клиентских скриптов очень и очень ограничены, большей частью из соображений безопасности. Серверный скрипт, т. е. скрипт, выполняющийся на сервере провайдера, может работать с базами данных, генерировать динамические страницы, преобразовывать форматы документов и т. д. и т. п. Веб-дизайнер может не быть программистом, но он обязан знать, как подключить к странице серверные скрипты, написанные другими людьми; эта задача входит в построение интерфейса сайта.

7. Тестирование сайта.

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

8. Загрузка файлов на сервер провайдера.

После того, как работа над сайтом закончена, готовые файлы необходимо загрузить на сервер провайдера. Это делается с помощью одного из так называемых FTP-клиентов, т. е. программ, передающих файлы по FTP-протоколу. Если при разработке использовались специализированные средства (пример: FrontPage Extensions), необходимо заранее убедиться, что сервер провайдера поддерживает все нужные сервисы; в этом случае загрузка файлов должна осуществляться при помощи специальных программ. После этого стоит ещё раз всё проверить: нередко можно обнаружить неправильные ссылки на те или иные файлы, возникшие вследствие того, что конфигурация сервера провайдера может существенным образом отличаться от конфигурации вашего компьютера.

наверх

Средства веб-дизайна

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

1. HTML

Язык гипертекстовой разметки документов: этот язык описывает каждый элемент страницы и все ссылки на объекты, находящиеся за её пределами. В настоящее время используется версия 4.0, которая существенно богаче предыдущей. К сожалению, производители браузеров так и не договорились о стандартах... существуют даже тэги (своего рода операторы языка HTML), предназначенные для одних браузеров и игнорируемые другими. Описание основ языка будет дано в следующем уроке.

2. CSS

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

3. JavaScript

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

Помимо JavaScript существует ещё и VBScript, язык с синтаксисом Visual Basic, предоставляющий примерно те же возможности, что и JavaScript, но он используется значительно реже вследствие совместимости с единственным браузером: Internet Explorer.

4. DHTML

Фактически DHTML (Dynamic HTML) есть не что иное как сочетание расширенного HTML и продвинутого JavaScript. Используя последние достижения в этой области, разработчик может на ходу менять вид и содержание ЛЮБОГО элемента веб-страницы без её перезагрузки. К сожалению, Netscape не поддерживает DHTML в полной мере, и поэтому при условии наличия требований совместимости с этим браузером приходится ограничивать функциональные возможности скриптов.

5. Java

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

6. ActiveX

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

7. CGI

Технология обмена информацией между веб-сервером и CGI-программой, т. е. такой программой, которая способна принимать и передавать данные по спецификации CGI. Мудрёно, не спорю... Проще представить себе следующее: вам наверняка приходилось встречать в Интернет формы, которые надо заполнить и куда-то там отправить по нажатию соответствующей кнопки. Так вот, после того, как вы на эту кнопку нажимаете, введённые в форму данные передаются CGI-программе, работающей на сервере, и именно эта программа отправит их по назначению, например -- добавит запись в гостевую книгу. В этом курсе мы познакомимся с CGI-скриптами, написанными на языке Perl.

8. Flash и Shockwave.

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

наверх

Инструменты веб-дизайнера

Если вы уже пытались создавать HTML-страницы, используя соответствующие возможности Microsoft Word, забудьте об этом. Если начали изучать FrontPage -- также рекомендую забыть, он вам не пригодится... я сам работал в нём два года и наконец оставил это невесёлое занятие. Вам понадобится... вот почитайте-ка ниже, что вам понадобится.

1. Adobe Photoshop

Мощное средство создания графики для Интернет и не только. Веб-дизайнера он интересует в особенности, т. к. оснащён развитыми средствами оптимизации графики, т. е. уменьшения размеров графических файлов без проигрыша в качестве или с мининальным проигрышем. Имейте в виду, что в Интернет используются два основных графических формата: GIF (для изображений с небольшим количеством цветов) и JPEG (для полноцветных фотографических изображений), с каждым из которых Photoshop справляется очень неплохо. Представьте: каждая веб-страница должна весить не более 50-100 килобайт в худшем случае... сами понимаете, без оптимизации не обойтись.

Я пользуюсь 6-й версией Photoshop, но, если у вас установлена версия 5.0 или 5.5, ничего страшного. Сайт программы:

Adobe Systems Incorporated

2. Macromedia Dreamveaver

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

Существует мнение, что HTML должен писаться только руками и только в текстовом редакторе. Это чистейшей воды снобизм: при таком «профессиональном» подходе большой заказ переживёт заказчика... да и исполнителя, возможно. Другое дело, что вы должны уметь писать HTML руками без помощи визуальных редакторов, иначе какой же вы профессионал? Лично я, к сожалению, шёл к HTML от Word'а, что существенно замедлило прогресс.

Используйте версию 4.0, она предоставляет разработчику наибольшие возможности и снабжена прекрасной информационно-справочной системой по HTML, CSS и JavaScript. Сайт программы:

Macromedia

Эта же компания разрабатывает Flash и Shockwave.

3. Notepad

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

Microsoft

4. Perl

Если вы собираетесь изучать Perl в среде Windows, установите на своём компьютере Active Perl версии 5.6 или выше. Не волнуйтесь, практически все ваши скрипты будут работать и под Unix. Сайт программы:

ActiveState -- Programming for the People

5. Perl Builder

Так вот, если вы всё ещё собираетесь изучать Perl, вам понадобится соответствующий редактор-отладчик. Используйте версию 2.0, она значительно лучше первой. Сайт программы:

Solutionsoft Home Page

6. Apache Web-server

Этот сервер вы можете использовать для тестирования веб-страниц и скриптов, написанных на языке Perl. Используйте версию 1.3.14 или более современную. Сайт программы:

The Apache Software Foundation

7. Браузеры.

Для начала достаточно, если вы будете тестировать свои страницы на совместимость в двумя браузерами: Internet Explorer 4.0 (5.хх) и Netscape Navigator (Communicator) версии 4.хх. Сайты программ:

Internet Explorer
Netscape Navigator

8. LeapFTP

Для загрузки файлов на сервер провайдера вы можете воспользоваться одним из множества FTP-клиентов. На мой взгляд, лучший из них -- LeapFTP версии 2.6 и выше. Сайт программы:

LeapWare

...

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

Я предполагаю, что на вашем компьютере уже установлены Dreamweaver 4.0 и Photoshop версии не ниже 5, в противном случае нам с вами просто нечем будет заняться.

До встречи!