IGROMANIA.RU
Registration
MoreLess
Популярные за неделю
Популярные за месяц
Ассасины и тамплиеры на большом экране. Фильм «Кредо убийцы» Кино > Ассасины и тамплиеры на большом экране. Фильм «Кредо убийцы»
Ассасины и тамплиеры на большом экране. Удался ли эксперимент?
Комментариев: 51
«Викинг». The Return of the (Vi)king Кино > «Викинг». The Return of the (Vi)king
«300 спартанцев» Зака Снайдера и «Гладиатор» Ридли Скотта успешны и узнаваемы, но ни капли ни историчны. Российский «Викинг» идет другим путем.
Комментариев: 33
Самые интересные проекты января: от Gravity Rush 2 и Resident Evil 7 до Yakuza 0 и Tales of Berseria Спец > Самые интересные проекты января: от Gravity Rush 2 и Resident Evil 7 до Yakuza 0 и Tales of Berseria
Продолжение Gravity Rush, возвращение «Обители зла», приключения в мире японской мафии и прочие интересности.
Комментариев: 10
Planet Coaster: парк развлечений своими руками Рецензии > Planet Coaster: парк развлечений своими руками
С самого детства мечтали построить идеальный парк аттракционов? Planet Coaster от Frontier Developments это позволяет!
Комментариев: 4
Главные новинки CES 2017: от VR-устройств до «умных» велосипедов и систем слежения за холодильником Железный цех > Главные новинки CES 2017: от VR-устройств до «умных» велосипедов и систем слежения за холодильником
Подводим итоги крупнейшей международной выставки потребительской электроники.
Комментариев: 2
Бурные 1980-е. Первые впечатления от Yakuza 0 В разработке > Бурные 1980-е. Первые впечатления от Yakuza 0
Знаменитая серия отправляет в прошлое, чтобы рассказать историю о том, как Кадзума Кирю стал одним из самых известных мафиози.
Комментариев: 1

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

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

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

Каркас сайта

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

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

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

Основные элементы интерфейса Macromedia Dreamweaver.

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

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

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

Создать незамысловатую веб-страничку в Macromedia Dreamweaver можно всего за 15 минут. Разработка же полноценного сайта может затянуться на долгие месяцы.

С интерфейсом программы мы познакомились, приступим к разработке нового проекта. Первым делом разберемся с так называемым цветовым решением сайта и настройкой базовых атрибутов. На панели параметров (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.

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

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

Пример форума, зарегистрированного на www.mybb.ru.

Мы сделали заглавную страницу сайта, остальные делаются точно так же. Когда вы сделаете все разделы своего сайта, настанет время объединить их в единое целое. Для этого нам понадобится меню навигации. Чтобы поместить его на веб-страницу, выберите пункт меню 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?

В 2016 году вышло немало всяческих переизданий, ремейков и HD-версий. Выбираем лучшие из них.
«300 спартанцев» Зака Снайдера и «Гладиатор» Ридли Скотта успешны и узнаваемы, но ни капли ни историчны. Российский «Викинг» идет другим путем.
Франшизы родом из девяностых продолжают доказывать, что им почти нет равных на арене.
Подводим итоги крупнейшей международной выставки потребительской электроники.
Комментарии к статьям
Войти и прокомментировать                Войти под логином игромании | Зарегистрироваться
Главные новости
Самые комментируемые статьи за месяц:
Кино > Ассасины и тамплиеры на большом экране. Фильм «Кредо убийцы»
Спец > Лучший мой подарочек — это Xbox One S!
Спец > Достать геймпад и плакать: игры, берущие за душу: от Ori and the Blind Forest и This War Of Mine до BioShock Infinite и Life is Strange
Спец > Игра в кубики. В чем сила Minecraft?
Кино > «Викинг». The Return of the (Vi)king
Рецензии > Соборы в небесах. Обзор Space Hulk: Deathwing
Железный цех > В ожидании ZEN. Тестируем игровой компьютер Edelweiss MSI Edition на базе AMD 970
Спец > Горячий осенне-зимний сезон Windows Store. Главные игровые новинки
Спец > На скорости 160 км/ч, или Как работают гоночные игры
Прямым текстом > Darksiders: Warmastered Edition — жизнеспособное чудище Франкенштейна
Поиск по сайту Игровые платформы: PC  |   X360  |   XONE  |   PS3  |   PS4  |   Wii  |   Wii U  |   PSP  |   Vita  |   NDS  |   3DS  |   Android  |   iOS
1997-2017 ООО «Игромедиа». Мнение авторов и посетителей сайта может не совпадать с мнением редакции. Полное или частичное воспроизведение материалов сайта и журнала допускается только с согласия редакции. Для прямого контакта с редакцией пишите на основную почту «Игромании.ру».
Пользовательское соглашение

КОММЕРЧЕСКИЕ ССЫЛКИ:
Механизм выбора платформы позволяет отображать на страницах информационного портала материалы, относящиеся строго к выбранным платформам.

Каждый пользователь индивидуально выбирает для себя интересующие его игровые платформы.
 
Rambler's Top100 Яндекс цитирования