Веб-дизайн для начинающих
Прошло больше года с момента публикации в «Игромании» последней статьи, посвященной веб-дизайну. Все это время вы бомбардировали наш почтовый ящик просьбами написать о том, как создать собственную домашнюю страничку или даже игровой портал. Больше всего писем приходило от новичков, поэтому наша сегодняшняя статья ориентирована именно на них.
Данный материал не является детальным руководством по тому, как сделать свой сайт (да и невозможно описать столь большой объем работ в рамках одной статьи), но в нем вы найдете описание всех основных шагов на пути к собственному «хомячку» (от английского home page домашняя страница).
В качестве инструмента мы воспользуемся одним из самых популярных редакторов веб-контента Macromedia Dreamweaver.
Каркас сайта
Первый этап разработки сайта детальное планирование. Все ошибки нужно найти и исправить, когда дизайн есть еще только на бумаге, тогда его можно отредактировать при помощи простого ластика. Если же вы умело перенесете все ошибки в электронную версию своего сайта, то ластик не поможет придется править килобайты кода.
Некоторые считают, что на бумаге стоит делать только общий набросок. Мы же рекомендуем нарисовать все максимально детально, четко пометить, какие кнопочки будут располагаться в главном меню, какие во вспомогательном, какое расстояние будет между кнопками, где разместятся баннеры и ссылки на дружественные ресурсы.
Второй важный этап разработка четкой иерархии. Вы заранее должны знать, в каких папках будут лежать картинки, в каких шрифты, а в каких другие элементы вашего сайта.
Основные элементы интерфейса Macromedia Dreamweaver. |
И вот перед вами на столе лежит четкая схема дизайна вашего будущего ресурса, а на жестком диске разместилась ветвистая система директорий, отражающая иерархию файлов. Самое время переходить к работе в веб-редакторе. Мы для этих целей использовали Macromedia Dreamweaver седьмой версии. Рассмотрим основные принципы создания веб-страниц.
Запустите приложение и в появившемся меню выберите пункт Create New HTML. Большую область редактора занимает рабочее поле, в котором, собственно, и создается сайт. Пользователь сам может выбрать, разpaбатывать новый проект на уровне кода или же воспользоваться более простым и интуитивно понятным режимом шаблонов для дизайнера. Для переключения между режимами над рабочим окном располагаются три специальные закладки с названиями 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 Мб дискового прострaнcтва, возможность использования MySQL (20 Мб), SSI, FTP, PHP 5, а также подключать к сайту различные форумы, гостевые книги и галереи.
* * *
Мы рассмотрели основные этапы создания несложного веб-сайта в редакторе Macromedia Dreamweaver. Если тема вас заинтересовала, то напишите нам и расскажите, о чем еще вы хотели бы прочитать на страницах журнала. О раскрутке сайта через поисковые системы? Или о том, как создать форум на одном из популярных движков? А может быть вам интересно, как встраивать в сайт элементы, написанные на Flash?
...гораздо проще решить мучительный вопрос «кем быть?», если заранее знать, чему научится персонаж по достижении 70-го уровня и какие обязанности на него свалятся в группе. Первая статья описывала воинов, паладинов, магов, друидов и разбойнико...
27 04 2024 16:34:56
В нише спортивных симуляторов нынче не протолкнуться — даже самый изощренный фанат найдет развлечение на свой вкус. Но согласитесь — иногда так хочется наплевать на реалистичность и просто повеселиться, презрев закон...
26 04 2024 19:53:26
Можно ли скрестить идеи Commandos и Hitman, да еще запихнуть получившийся гибрид в стопроцентно российский антураж? Да запросто! Достаточно вспомнить о знаменитом подразделении советской контрразведки СМЕРШ, аббревиатура которого расшифровывает...
25 04 2024 20:35:10
разрушенный мегаполис — идеальная площадка для развлечения коммaндос со способностями Спайдермена: перелетать от небоскреба к небоскребу, совершая невероятные пируэты в воздухе... Не выйдет. Ваши передвижения страшно ограничены радиацией, обволакива...
24 04 2024 4:23:59
Разработчики игр, сверх меры эксплуатирующих чужие идеи, всегда делают одну и ту же ошибку: они слишком резко реагируют на любые сравнения с проектами, которые послужили источником вдохновения для их собственного шедевра. Вот сегодня у нас похожая ист...
23 04 2024 11:24:24
"...Мы доподлинно знаем, что паспортные значения тактовых частот видеокарты не зависят от драйвера, операционной системы и конфигурации компьютера. По логике вещей выходит, что все нужные значения лежат не где-нибудь, а в BIOS платы..."...
22 04 2024 18:39:55
При первом запуске Al Emmo может показаться вам гостем из ранних девяностых. На самом же деле эта игра — чистой воды ретро, ей едва исполнилось полтора года. Тем не менее выглядит она в точности как древние квесты от Sierra, да еще и безз...
21 04 2024 10:17:28
Тактика игры в режиме Free for Оборона стратегически важной точки — аванпост прикрывает сразу два золотых прииска от нападения врага. В Free for all (“каждый сам за себя”), в отличие от остальных режимов, против вас играют сразу…|Игромания...
20 04 2024 4:48:26
После разрыва многолетнего плодотворного сотрудничества с компанией Activision (серия Mechwarrior) корпорация FASA заключила соглашение о сотрудничестве с Microprose. Очевидно, ребята из FASA надеялись, что Microprose, известнейший разработчик страт...
19 04 2024 17:14:54
...прорваться сквозь защиту противника, уничтожить несколько пультов управления, открывающих доступ к реактору, подорвать сам реактор, а потом успеть унести ноги в течение 20 секунд. По истечении этого времени титан неприятеля взрывается и комaнде засчиты...
18 04 2024 12:57:20
Про условно-бесплатный гоночный симулятор Auto Club Revolution мы уже беседовали с Саймоном Джонсом, а кроме того, основательно поиграли и написали рецензию. Но проект постоянно развивается, в игре появляются новые режимы и трассы, поэтому мы взяли…|Игромания...
17 04 2024 14:57:41
По собственному признанию, Майкла больше узнают «на слух», как голос Сэма Фишера, чем «на вид»Краткие досье на: Майкл Айронсайд (Сэм Фишер), Дэвид Бэйтсон (Хитмен), Джон Сэйнт Джон (Duke Nukem), Джеймс Маккэфри (Макс Пэйн), Дэвид Х...
16 04 2024 23:42:32
...раскрашенные в кислотные цвета объекты переливаются всевозможными оттенками, золотые взрывы сопровождаются чуть ли не фиолетовым свечением и так далее. Учитывая запредельную плотность местного экшена, изо всей этой стробоскопической центрифуги хочется...
15 04 2024 0:26:27
“Игра под удивительным названием Filbert Fledgling's Eggcellent Adventures — самый обычный скроллер, каких наша индустрия не видела вот уже много лет (мейджоры вроде Duke Nukem: Manhattan Project в счет, конечно, не идут). Милая мультяшная графика, незате...
14 04 2024 16:39:26
Открытие конкурса по HoMM4 повлекло за собой лавину вопросов от участников конкурса. Однако не у всех есть Интернет, чтобы оперативно поделиться своей бедой. А некоторые слишком скромны для того, чтобы спросить, и предпочитают мучиться с проблемами в один...
13 04 2024 15:27:18
Digital Extremes Bonus Pack www.unrealtournament2003.com/?downloads Знали бы фараоны, чем будут заниматься в их гробницах! Разработчики UT 2003, Digital Extremes, решили продолжить славную традицию, начало которой было положено еще при первом UT.…|Игромания...
12 04 2024 20:41:23
Если полет мешает работе — бросай такую работу! (народная мудрость) Залетим на огонек? Нечасто удается встретить игру, разработке которой уделяется столько сил и времени, как вышло с футуристическим летным симулятором с незате...
11 04 2024 9:23:52
«…Самое главное нововведение в сюжетной части — в Guild Wars появился выбор. Принимать решения приходится не так часто, как в Star Wars: The Old Republic, зато по делу. Прямо на старте мы выбираем перки, определяющие предысторию персонажа. Ваш герой всю ж...
10 04 2024 23:41:43
В папке с игрой есть каталог system. Внутри притаился файлик eib.ini, который нужно открыть в любом текстовом редакторе. Отыщите заголовок [Engine.GameInfo] и припишите в конце строку bCheatsEnabled=True. Далее найдите раздел [Engine.Console] и изменит...
09 04 2024 2:28:56
здесь вы с легкостью переживете прямой выстрел от танка в лицо. Типичный отталкивающий фактор любого большого многопользовательского шутера заключается в том, что вас очень быстро убивают. Малейшая ошибка пpaктически гарантированно приводит к долгим пятна...
08 04 2024 22:28:50
«…Oil Rush же выглядит как извpaщeнная мечта олигарха-нефтяника: здесь светит солнце, весело плещется море, по воде плывут «яхты», а главным ресурсом на планете, в погоне за которым нестыдно устроить локальный геноцид, по-прежнему является нефть…»...
07 04 2024 9:50:23
Тактическое руководство, часть третья Оружие и тактика стрельбы (продолжение) Снайперка (Maiser Rifle with scope). И тут вы опять не увидите ничего знакомого. Оружие это предназначено только для дальних дистанций. В ближнем бою оно бесполезно. Но…|Игромания...
06 04 2024 4:29:27
менее публичный лозунг, спрятавшийся в пресс-релизе, хаpaктеризует игру куда точнее: «Горячие девчонки против сатанинских монстров!» Другое дело! Под эту же парадигму отлично подходит целевая аудитория игры, которую Revistronic честно указываю...
05 04 2024 1:17:34
ИГРА Сделать свой первый проект продаваемым - задача не из легких. А уже добиться признания и почитания со стороны игровых масс, выпустив всего один готовый продукт, это вообще нечто на грани фантастики. Тем не менее, чешской фирме Illusion S...
04 04 2024 8:59:50
"...Сухие цифры заставят вас нервно сглотнуть — внимайте: 3,20 ГГц, 2 (!) мегабайта кэша (для сравнения — все Pentium 4 до сегодняшнего дня поставлялись с 512 кб) и, разумеется, поддержка технологии Hyper-Threading..."...
03 04 2024 16:40:14
ни в коем случае не вторая часть S.T.A.L.K.E.R. Но это и не совсем аддон в привычном понимании этого слова. Это такой постскриптум к оригиналу. То есть структурно «Чистое небо» — та же игра, что и год назад: с беготней по Зоне, сбор...
02 04 2024 11:42:38
“Допустим, в сюжете прописано, что мы должны спасти мир, а для этого нужно заставить вконец обнаглевших пришельцев убраться восвояси. Ну и что с ними делать? Убить? Всех не перебьешь. Значит, надо, как всегда, идти обходными путями. Поговорив с сотней пер...
01 04 2024 1:25:57
уделяем Hour of Victory столько журнального места по нескольким причинам. Во-первых, это довольно дорогой проект, у него красивая обложка и его отчего-то издали хорошие люди Midway. Во-вторых, некоторые из нас могли случайно соскучиться по WW2-шутерам, и...
31 03 2024 15:42:18
Tron: Evolution изначально находилась в очень шатком положении, ведь семь лет назад у нас уже была Tron 2.0. В ней студия Monolith очень тонко подметила и передала игроку ощущения, которые, вероятно, испытывали те, кто пришел в кинотеатры в июле…|Игромания...
30 03 2024 4:12:11
Продолжение довольно популярного tactical action Hidden & Dangerous не снискало такого успеха у игроков, как первая часть. Да, Hidden & Dangerous 2 сочетала в себе одновременно и экшен, и серьезную тактику, но ряд промахов не поз...
29 03 2024 3:37:29
«Ловись, рыбка, большая и маленькая», «Пика-пика-пикачу!», «Сладкие сновидения», «Изгиб гитары желтой, «Зимние покатушки» и очередная пачка флэш-игр...
28 03 2024 11:39:33
станет не продолжением комичной истории про то, как блондинки на колесах ехали в сторону финиша, а самым что ни на есть «классическим» симулятором стритрейсинга. Впрочем, без дежурной фишки не обошлось и на этот раз: нам обещают...
27 03 2024 20:53:14
Необходимости в срочном переходе на двуядерные процессоры нет, современные приложения и игры не могут загрузить оба ядра сразу. Однако если вы постоянно работаете во многих приложениях, редактируете видео, обpaбатываете музыку и параллельно играетеОднояде...
26 03 2024 14:12:20
24 часа в сутки любые ваши вопросы по играм принимаются по адресу: games@igromania.ru. Если вопрос, заданный в письме, покажется нам интересным, мы ответим на него на страницах журнала. Писать персональные ответы на каждое ваше письмо мы не можем. В…|Игромания...
25 03 2024 8:51:12
«…как и первая часть, Dead Rising 2 выставляет против главного героя целый полк отборных психопатов с уникальными боевыми приемами. В этой серии: повар-каннибал, топ-модели-лecбиянки, нерд-дeвcтвeнник в латексе и с розовой бензопилой, а также усатый полиц...
24 03 2024 14:20:46
Англоязычные критики не так давно разнесли в пух и прах «Бесконечность» — новую работу талантливого Антуана Фукуа, на чьём счету «Тренировочный день», «Стрелок» и…|Игромания...
23 03 2024 5:43:24
В четвертых "Героях" сочетаются интереснейший гeймплей, красивая графика и хорошее звуковое оформление. А по-настоящему удачная игра, сами понимаете, просто не может остаться без многочисленных модификаций, которые вы уже сейчас можете скачивать с фанатск...
22 03 2024 20:57:15
...Результаты тестирования в стандартном режиме одинаковы для обеих плат, разница — в пределах погрешности измерений. Подозрительно схожие итоги разгона объясняются явлением FSB Wall — пограничная частота системной шины процессора, превысить к...
21 03 2024 22:25:32
если пару лет назад создание и поддержание в нормальном состоянии собственной подборки аддонов было сродни Сизифовым походам на гору с камнем, то сейчас процесс намного упростился. Выявился и лидер, которого признает все хардкорное WoW-сообщество: это ком...
20 03 2024 23:16:22
Во что играли 5 лет назад Deus Ex Дата выхода: 2000 год Жанр: RPG Издатель/Разработчик: Eidos/Ion…|Игромания...
19 03 2024 9:51:25
24 часа в сутки вопросы по созданию, модифицированию и вскрытию игр принимаются на адрес gamedev@igromania.ru. Также вы можете задать свой вопрос по SMS на номер 1121 с префиксом dev (в начале сообщения печатаете слово dev, а затем, через пробел,…|Игромания...
18 03 2024 6:53:25
ЧТО? Две десятиминутные игровые сессии на VR-полигоне ГДЕ? Москва, ТЦ «Авиапарк», игровой клуб «Цель» В прошлом году мы много говорили о виртуальной реальности и даже поставили ее на второе место в списке…|Игромания...
17 03 2024 13:39:19
«…несмотря на то, что SSX действительно сделал немало шагов навстречу реальности, это по-прежнему очень гротескный симулятор сноубординга с супергероями на досках, комиксовыми заставками и невозможными трюками. Игра реалистична ровно настолько, чтобы нам...
16 03 2024 0:32:14
Про знаменитый комплексный проект «Вторая мировая» от «1С» мы писали много и со вкусом. Разработчики меняли концепцию, переделывали, затягивали сроки, но не сдавались. Получился жизнеспособный гибрид RTS и хардкорного военного симулятора. Battlef...
15 03 2024 23:41:23
Двое оборванцев полезли чинить телеантенну с помощью какой-то вешалки, схлопотали удар молнии, в результате которого они попали в прострaнcтвенно-временной парадокс, научились общаться с инопланетянами и путешествовать во времени. Именно так…|Игромания...
14 03 2024 22:51:12
Мы ждали Devil May Cry 5 одиннадцать долгих лет. Ждали с опаской: серия не сказать чтобы отличалась постоянством в плане качества. По сути, лучшей игрой франшизы до сих пор остаётся Devil May Cry 3. К неплохой четвёртой части было море вопросов, а…|Игромания...
12 03 2024 20:44:48
Вечнозеленые «Дешево и сердито… Категория меньше 15 000 руб.», «Cмepть тормозам… Категория меньше 20 000 руб.», «Займи, но купи… Категория меньше 30 000 руб.» и — «Тебя я видел во сне» (цена не ограничена)....
11 03 2024 12:14:52
Безбрежная чернота космоса, пронизанная солнечным ветром и астероидами. Сотни миров, которые ждут вас и надеются на вашу помощь, все равно, денежную или военную. Множество конкурентов и один злобный враг на всех. Что-то похожее было раньше, в моих про...
10 03 2024 21:47:42
Очередное творение от Electronic Arts на тему военных действий нашего века, на сей раз это война американцев во Вьетнаме. Боевые действия происходят на территории Вьетнама во времена 60-х и начала 70-х годов. К слову, soundtrack к игре выде...
09 03 2024 19:12:44
Еще:
Игры -1 :: Игры -2 :: Игры -3 :: Игры -4 :: Игры -5 :: Игры -6 :: Игры -7 :: Игры -8 :: Игры -9 :: Игры -10 :: Игры -11 :: Игры -12 :: Игры -13 :: Игры -14 :: Игры -15 :: Игры -16 :: Игры -17 :: Игры -18 :: Игры -19 :: Игры -20 :: Игры -21 :: Игры -22 :: Игры -23 :: Игры -24 :: Игры -25 :: Игры -26 :: Игры -27 :: Игры -28 :: Игры -29 :: Игры -30 :: Игры -31 :: Игры -32 :: Игры -33 :: Игры -34 :: Игры -35 :: Игры -36 :: Игры -37 :: Игры -38 :: Игры -39 :: Игры -40 :: Игры -41 :: Игры -42 :: Игры -43 :: Игры -44 :: Игры -45 :: Игры -46 :: Игры -47 :: Игры -48 :: Игры -49 :: Игры -50 :: Игры -51 :: Игры -52 :: Игры -53 :: Игры -54 ::
