Веб-дизайн для начинающих

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

Данный материал не является детальным руководством по тому, как сделать свой сайт (да и невозможно описать столь большой объем работ в рамках одной статьи), но в нем вы найдете описание всех основных шагов на пути к собственному «хомячку» (от английского home page — домашняя страница).

В качестве инструмента мы воспользуемся одним из самых популярных редакторов веб-контента — Macromedia Dreamweaver.

Каркас сайта

Первый этап разработки сайта — детальное планирование. Все ошибки нужно найти и исправить, когда дизайн есть еще только на бумаге, — тогда его можно отредактировать при помощи простого ластика. Если же вы умело перенесете все ошибки в электронную версию своего сайта, то ластик не поможет — придется править килобайты кода.

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

Второй важный этап — разработка четкой иерархии. Вы заранее должны знать, в каких папках будут лежать картинки, в каких шрифты, а в каких — другие элементы вашего сайта.

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

Запустите приложение и в появившемся меню выберите пункт Create New HTML. Большую область редактора занимает рабочее поле, в котором, собственно, и создается сайт. Пользователь сам может выбрать, разрабатывать новый проект на уровне кода или же воспользоваться более простым и интуитивно понятным режимом шаблонов для дизайнера. Для переключения между режимами над рабочим окном располагаются три специальные закладки с названиями Code — написание страниц на уровне HTML-кода, Design — режим дизайна и Split — некий усредненный вариант.

Здесь же располагается поле, в котором можно указать заголовок страницы, который будет отображаться в браузере ( Title ), кнопки для быстрого теста странички и дебаггинга (устранения ошибок). Для правки параметров различных элементов вашего сайта в программе существует специальная панель Properties , она занимает всю нижнюю область редактора. Под шапкой главного меню Macromedia Dreamweaver находится инструментальная панель, на которую вынесены лишь самые нужные для работы инструменты — кнопки для вставки картинок, комментариев и таблиц.

С интерфейсом программы мы познакомились, приступим к разработке нового проекта. Первым делом разберемся с так называемым цветовым решением сайта и настройкой базовых атрибутов. На панели параметров ( Properties ) щелкните по кнопке Page Properties. Перед вами появится окно настройки основных атрибутов документа. Здесь можно задать тип и размер основного шрифта — поле Page Font и Size, цвет основного текста — Text Color , цвет фона — Background Color , установить в качестве фонового рисунка текстуру — Background Image.

Если вы выберите в списке Category пункт Links, то получите доступ к настройкам параметров гиперссылок: основной цвет гиперссылки и цвет ссылок, на которых пользователь уже побывал. В категории Headings можно отредактировать атрибуты заголовков: начертание шрифта, цвет и ряд других параметров. В группе Title/ Encoding настраиваются параметры кодировки страницы, в поле Title — заголовок проекта, который будет отображаться в браузере. Закончив формировать при помощи описанных настроек цветовую гамму странички, сохраните изменения и покиньте данную форму.

Перейдем к созданию каркаса сайта и в качестве примера сделаем главную страницу. Убедитесь, что в панели инструментов выбран пункт Common (основные инструменты), щелкните по кнопке Table с изображением таблицы. В появившемся окне задайте число строк — Rows и столбцов — Columns. При необходимости вы можете настроить и ряд других атрибутов нового компонента — задать ширину элемента, его описание. Начинается самое интересное — нам нужно сформировать основу сайта из базовой таблицы. Растяните ее по рабочему полю странички таким образом, чтобы сформировать колонку для панели навигации, выделите место под новостной блок, рекламный отсек и логотип. Ваш сайт может иметь любое количество элементов, но удобнее всего сделать таблицу из трех столбцов (новости, панель навигации и рекламный блок) и двух строк (первая будет полностью отведена под логотип).

Распространенная проблема: логотип (или любой другой элемент веб-страницы) довольно большой, и хочется выделить под него единую область на экране, а не пытаться составить изображение из трех раздельных элементов, занимающих разные ячейки. Как быть в таком случае? Зажмите клавишу Ctrl и выделите, скажем, три ячейки в верхнем отсеке таблицы, затем кликните правой кнопкой мышки по выделенной области и в контекстном меню выберите пункт Table/ Merge Cells. Все выбранные секции будут объединены в единое поле. При необходимости вы можете изменить основные свойства выделенного компонента в панели Properties — установить толщину бордюра ( Border ), его цвет ( Brdr color ), фон ячеек ( Bg Color ) и ряд других атрибутов. Если вы снимете выделение с основной таблицы и перейдете в одну из ячеек, то получите доступ к настройкам выравнивания текста ( Horz , Vert ) начертанию шрифтов и их цвету.

Теперь, когда каркас заглавной страницы готов, самое время подгрузить на нее элементы оформления. Начнем с импорта картинок. Поместите курсор в то место экрана, куда вы собираетесь вставить новый арт, пусть это будет верхняя строка таблицы. После этого на панели инструментов нажмите кнопку с изображением дерева и укажите путь к нужному изображению. Свойства изображения задаются на вкладке Properties — здесь можно поместить картинку в рамку, изменив значение атрибута Border. Если вы хотите сделать из картинки гиперссылку (пользователь кликает по картинке, и происходит автоматический переход на другой сайт или веб-страницу), впишите адрес в поле Link на панели Properties. Если вы делаете переход в рамках вашего сайта, то вписать нужно только имя и расширение страницы, например, gallery. html.

Основа сайта готова. Самое время довести страничку до ума: добавьте таблицу в поле новостей и заполните ее произвольным текстом, например: « Мы открылись! », в рекламный блок поместите несколько артов в духе « Здесь могла быть ваша реклама », сделайте ряд других косметических преобразований.

Меню навигации

Мы сделали заглавную страницу сайта, остальные делаются точно так же. Когда вы сделаете все разделы своего сайта, настанет время объединить их в единое целое. Для этого нам понадобится меню навигации. Чтобы поместить его на веб-страницу, выберите пункт меню Insert/Image Objects/Navigation Bar. Перед вами появится окно создания нового меню. В поле Element name введите кодовое имя пункта на английском языке без пробелов (это внутреннее имя, которое будет фигурировать только в HTML-коде). Затем импортируйте в поля Up Image , Over Image и Down Image различные вариации изображения одной и той же кнопки — базовую картинку кнопки, изображение во время наведения курсора и картинку после клика мышкой.

Перейдите к метке When Clicked, Go to URL и укажите ссылку на страницу нового раздела вашего сайта, например, Soft. html. Чтобы добавить кнопку для перехода в новый раздел вашего сайта, щелкните мышкой по кнопке с изображением « + » (убираются пункты с помощью кнопки «-») Кнопки с изображением черных стрелок позволяют менять приоритет пунктов меню. Не забудьте, что меню навигации должно быть на каждой странице вашего сайта, а не только на заглавной.

О том, как прикрутить к сайту полноценный форум, мы, скорее всего, поговорим в одном из ближайших номеров «Игромании», на первое же время проще всего создать форум на одном из бесплатных генераторов. Один из самых удачных — сервис myBB ( www.mybb.ru ), он поддерживает более пятидесяти стилей оформления, есть встроенная поисковая система сообщений и прочие вкусности. Идеальный выбор для новичков, которых не смущает, что в верхней части каждой страницы форума будут располагаться рекламные баннеры.

Размещение сайта в интернете

Финишный рывок — размещение сайта в интернете. Регистрировать домен первого уровня (вида www.имя.ru ) вы, скорее всего, не будете, поэтому вам прямая дорога на популярные бесплатные хостинги второго уровня: www.narod.yandex.ru, www.nm.ru, www.jino-net.ru. Если первые два хостинга в представлении не нуждаются, то о третьем скажем пару слов. После регистрации на Jino-Net вы получите бесплатный адрес вида логин.jino-net.ru , 70 Мб дискового пространства, возможность использования MySQL ( 20 Мб ), SSI , FTP , PHP 5 , а также подключать к сайту различные форумы, гостевые книги и галереи.

* * *

Мы рассмотрели основные этапы создания несложного веб-сайта в редакторе Macromedia Dreamweaver. Если тема вас заинтересовала, то напишите нам и расскажите, о чем еще вы хотели бы прочитать на страницах журнала. О раскрутке сайта через поисковые системы? Или о том, как создать форум на одном из популярных движков? А может быть вам интересно, как встраивать в сайт элементы, написанные на Flash?