Веб-дизайн для начинающих
Прошло больше года с момента публикации в «Игромании» последней статьи, посвященной веб-дизайну. Все это время вы бомбардировали наш почтовый ящик просьбами написать о том, как создать собственную домашнюю страничку или даже игровой портал. Больше всего писем приходило от новичков, поэтому наша сегодняшняя статья ориентирована именно на них.
Данный материал не является детальным руководством по тому, как сделать свой сайт (да и невозможно описать столь большой объем работ в рамках одной статьи), но в нем вы найдете описание всех основных шагов на пути к собственному «хомячку» (от английского 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?
«…Без перфекционизма Итагаки оставшиеся сотрудники Team Ninja не смогли достойно продолжить историю Рю Хаябусы. Бесконечные QTE, скучный сюжет, несбалансированный мультиплеер и неуместная поддержка PS Move легко отпугнут не только новичков, но и давних по...
18 04 2024 16:55:43
«…Главное впечатление, которое оставила первая часть презентации, — новый «Ведьмак» превращается в карамельный Fable 2. Тот же стиль, то же настроение — разве что нимб над головой Геральта не возникнет, даже если он ухитрится не заглянуть ни к одной город...
17 04 2024 18:44:24
...добавили в игру шесть улучшенных высокоуровневых существ. Сегодня мы изменим их внешний вид. Архиличи с новеньким номером «Мании» под мышкой, паладины со сверкающим магическим копьем, владычицы тени с крашеными волосами — все это буде...
16 04 2024 1:51:31
По сравнению с консервативными «Молотом времени» и «Немой стражей» «Гнев Богов» действительно новаторский сет.Впервые за последние два года разработчики «Берсерка» добавили в игру новый тип карт — экип...
15 04 2024 23:59:48
«…Идеальный подарок для вашего ребенка. Игра с миниатюрами, которые нужно постоянно докупать, кажется дорогим удовольствием, но стоит помнить, что каждая локация Disney Infinity — это, по сути, уникальный гeймплей и уникальная кампания, прохождение которо...
14 04 2024 15:14:22
О номинации Из года в год лучшие гонки выбирать все сложнее. С одной стороны, игры должны развлекать, и с этой задачей успешнее справляются аркады, в которых нет места усложненной физике автомобилей. А с другой — есть…|Игромания...
13 04 2024 23:56:45
Если вам нужно более прозрачное сравнение, на каком уровне находятся в данный момент исследования AI, поясняем: пока что самая мощная нейронная сеть может моделировать интеллект… ну, максимум таpaкана...
12 04 2024 13:38:15
“Если вы новичок и хотите познакомиться со знаменитым игровым сериалом, то Civilization III может стать отличным стартом. Это виртуозно сбалансированная стратегия с наркотически затягивающим гeймплеем, неплохой графикой и удобным интерфейсом. Не жанровая...
11 04 2024 17:58:22
«…Criterion ожидаемо променяли светлую и спокойную одноэтажную Америку на бурлящий красками промышленный пригород, свернутые в гармошку куски металла на колесиках — на сияющие «Порше», а Guns 'N' Roses — на Bullet for My Valentine. И все это сверху полили...
10 04 2024 20:35:24
В ноябре позапрошлого года мы открыли редакционный блог. С самого начала предполагалось, что это будет теплое местечко, где каждый сотрудник редакции сможет свободно высказаться на волнующую его тему. Кое-кто счел, что очередная Call of Duty…|Игромания...
09 04 2024 0:26:18
нововведения приходится выискивать буквально с лупой. Так, список оружия пополнился целым одним образцом. Графика по сравнению с оригиналом стала много лучше, но по нынешним стандартам картинка смотрится бедно. Искусственный интеллект чуточку поумнел. Гос...
08 04 2024 17:58:45
«…В 2004 году на Xbox была нехватка jRPG — вот вам солнечная игра Sudeki (которая под этот жанр попадает, конечно же, довольно условно), в 2012-м у Xbox 360 нет своего God of War — вот вам Bloodforge. Ощущение, что Climax просто раз в тысячу лет затыкает...
07 04 2024 7:48:38
Для того чтобы войти в консоль, нажимаем кнопку "~" (тильда). BeMyMonkey - мастер-код. После его ввода можно вводить все остальные коды. God - режим бога. Invisible - невидимость. Loaded - дает все оружие и патроны к нему. AllAmmo - пополняет боезапас ка...
06 04 2024 18:51:44
выглядит как игра без пяти минут высшей лиги, такой стопроцентный ААА-хит. Если она вся выглядит так, как она выглядела на презентации в Нью-Йорке, мы станем свидетелями невероятной истории: игра, которая однажды уже создала жанр survival horror, переизоб...
05 04 2024 12:46:47
Первый эпизод Kentucky Route Zero вышел ещё в 2013 году. Семь лет разработки! Такие долгострои не каждый день видишь — что в большой, что в малой индустрии. Многие уже и не надеялись дожить до релиза последнего эпизода, но он всё же…|Игромания...
04 04 2024 23:57:28
В прошлую пятницу мы обозрели ровно половину лучших мобильных игр сентября. Настала пора рассмотреть оставшиеся. Bad Piggies Финны из Rovio однозначно не в ладах с животным миром. Птички у них исключительно злые, а хрюшки — плохие и…|Игромания...
03 04 2024 20:39:18
«…Сразу после анонса Of Orcs and Mеn казалась салонной шуткой, анекдотом в духе модной ныне пародии на стандарты и штампы ролевых игр — дескать, Cyanide Studio и Spiders решили дать нам поиграть не за рыцарей и паладинов, а за орка и гоблина, которые идут...
02 04 2024 7:38:22
Недавно «Игромания» побеседовала с Себастьяном Войцеховским, главой студии People Can Fly. В первую очередь поляки известны миру благодаря культовой серии Painkiller и лихой Bulletstorm. CEO студии ответил на пару вопросов о…|Игромания...
01 04 2024 9:48:15
“По стилю игра напоминает Half-Life, или, если угодно, No One Lives Forever. Сильная и богатая сюжетом сингл-часть, много скриптовых сцен. Сюжет, мягко говоря, фантастичен и даже отдает некоторой бредовостью. Но завлекает и затягивает — быть может, именно...
31 03 2024 1:47:19
Когда автор этих строк узнал, что издателем SAS Anti-Terror Force является та же компания, что выпустила Miami Vice (см. позапрошлый номер “Игромании”), ему стало откровенно плохо. Еще одного такого потрясения организм мог и не перенест...
30 03 2024 18:33:35
По сути TDU2 – тот же симулятор мажора, что и раньше. И скупка дорогих суперкаров, коттеджей и брендовых солнечных очков тут не менее важна, чем гонки....
29 03 2024 15:32:18
Думаю, не открою большого секрета, если скажу, что журналистов (в том числе игровых) всячески дрессируют избегать в своих текстах штампов и шаблонных выражений. «Спинномозговой экшен», «колосс на глиняных ногах»,…|Игромания...
28 03 2024 2:48:38
Игрокам в «Ratchet & Clank: Сквозь миры» предлагается 20 различных пушек на выбор. И каждая из них по-своему уникальна — не зря серия славится особым вниманием к дизайну оружия. Мы опробовали всё за вас…|Игромания...
27 03 2024 16:12:30
Немногие знают, но на этом месте должна была быть рецензия на компьютерную игру «Инстинкт», не к ночи будет помянута. По каким-то внутриполитическим причинам на середине разработки лицензия на фантастический боевик по сценарию отца Иоанна Охлобыстина...
26 03 2024 18:46:36
Приставка Atari 2600 в этом году празднует свое сорокалетие. Она появилась на полках магазинов в конце 1970-х и разошлась тиражом свыше 40 миллионов коробок. Atari не была первым производителем домашних игровых систем, уступив эту роль Magnavox, но…|Игромания...
25 03 2024 13:58:23
Первые попытки популяризации спорта среди любителей малоподвижного образа жизни предпринимались еще в начале 80-х годов. Однако официальным названием новая игровая концепция обзавелась сравнительно недавно. Журналисты придумали и растиражировали слова Exe...
24 03 2024 15:21:14
Два месяца прошло с момента, как мы опубликовали предыдущий выпуск рубрики «Разумный компьютер», а значит, настало время обновить информацию. Что же, посмотрим, как изменилась ситуация на рынке за это время, что нового появилось и…|Игромания...
23 03 2024 7:25:19
«…Рассказ про доктора Неда нещадно эксплуатирует популярную тему живых мертвецов, но делает это с присущим Borderlands юмором и стилем. Попасть на остров (наперед скажем, что действие остальных DLC также разворачивается в отдельных локациях) можно через т...
22 03 2024 8:46:12
«…В DiRT 2 на высокой скорости становится по-настоящему неуютно — подвеска ходит ходуном, а на трассе могут неожиданно проявиться «сюрпризы», оставленные ранее проезжавшими машинами. Потерянный кем-то бампер, выкатившийся на дорогу булыжник или вообще вст...
21 03 2024 10:42:16
Друзья, как-то так вышло, что на нашем сайте есть множество статей и новостей о League of Legends, но актуальной рецензии на игру как таковой не было. Последний раз мы предметно разбирали проект в журнале в 2013 году, и с тех пор много воды утекло.…|Игромания...
20 03 2024 14:56:19
Вода стремительно заполняет корабль, не оставляя иного выбора, кроме бегства. При этом под ногами будут путаться не только паникующие жители корабля-города, но и террористы, готовые умереть ради своей странной веры. Воде, впрочем, все равно, кто стоит на...
19 03 2024 22:54:43
Дорогие игроманы, спешим обрадовать вас! Наши постоянные читатели наверняка заметили, что список отечественных локализаций на страницах нашего журнала растет и ширится от номера к номеру, а даты выхода указываются все более и более точно. За это следуе...
18 03 2024 8:44:31
«…Если с GeForce GTX 680 мы еще сомневались, называть ли NVIDIA новым королем видеокарт, то с выходом GTX 690 мы можем твердо сказать: компания выпускает самые быстрые платы в мире. Стоят они, конечно, от 35 999 рублей за штуку, но если вы не хотите стесн...
17 03 2024 0:25:39
«…первая игра Tale of Tales, события которой демонстрируются от первого лица. Вернее, даже от лица неодушевленного предмета. Главные действующие лица: Саломея, Иродиада, Иоанн Креститель и его палач, за сценами из пьесы с их участием мы наблюдаем как бы с...
16 03 2024 10:14:42
среди сотни наборов различных шахмат, которыми вы можете сыграть, появился трехмерный анимированный набор Rayman Raving Rabbids. Те есть каждую фигуру тут символизирует один из тех самых кроликов, которые стали негласным символом Ubisoft. Выглядит это, ко...
15 03 2024 11:56:27
Что для вас значит аббревиатура CS? Civil Service, Computer Science, углеродистая сталь или последняя версия Photoshop? Yahoo находит 26 миллионов сайтов с упоминанием этой аббревиатуры, из которых всего 3 миллиона относятся к игре. Разве стоит об...
14 03 2024 16:40:25
"...почему же тогда весь мир словно сошел с ума, а фанаты ревут, как стадо слонов, требуя немедленной публикации пятого романа о Гарри Поттере? Все дело в той непередаваемой атмосфере, которую удалось создать Джоан Ролинг в своих книгах. “Поттериада” — ли...
13 03 2024 0:32:39
«…двадцать лет назад это была серьезная, суровая игра про то, как обезьяна пыталась вернуть себе человеческий облик. А теперь — яркая, сочная аркада. Обезьяны-враги прыгают на собственном, простите, пуке, очкастые мартышки управляют какими-то клоунскими м...
12 03 2024 17:22:23
24 часа в сутки вопросы по созданию, модифицированию и вскрытию игр принимаются на адрес gamedev@igromania.ru Дешевые тайтлы, получающие низкие рейтинги в игровой прессе, зачастую приносят солидный доход издателям. Зачем разработчики…|Игромания...
11 03 2024 3:17:49
Про тактику стрельбы из этого вида оружия скажу следующее. Старайтесь стрелять очередями по 3-4 патрона. Тогда вы сможете стрелять максимально точно. Конечно, если вы стреляете из положения сидя, то можно палить очередями по шесть патронов, но в ближнем б...
10 03 2024 23:22:41
«…Пока остальные разработчики учат нас управлять временем, предлагают воровать пироги с помощью собственных копий и пытаются рассказать взрослую историю через метафоричные мозаики — словом, делают все, чтобы придать жанру солидности, — интернациональный т...
09 03 2024 2:32:36
Эти вещи провалялись в Аравии несколько тысячелетий. А потом аппарат для управления роботом нашел арабский мальчик по имени Аладдин. Историю Аладдина вы, наверное, знаете. А. и Б. Стругацкие. “Попытка к бегству” Для Америки культ комик...
08 03 2024 21:57:11
► Передачи Игровая культура Время: 22:05 В этом выпуске: косплей плюс cтpиптиз — новый взгляд на персонажей Borderlands. Прыгучий ассасин наделал шума в Сан-Диего. В EVE Online состоялось самое крупное в истории звездное…|Игромания...
07 03 2024 9:57:36
 Опасности и приключения — вот два главных "конька" любой современной игры. Ведь что может быть лучше, чем опасности, которые совсем не опасны, и приключения, за которыми не надо бежать за…|Игромания...
06 03 2024 3:48:40
дело в художниках. Да-да, в художниках и дизайнерах игр. Потому что считать-то все это красивое разрушаемое окружение не так уж и сложно — нужные библиотеки на все случаи жизни уже давно можно бесплатно скачать. Но вот для того, чтобы было что счита...
05 03 2024 15:13:49
Планирование считается одним из самых красивых способов полета. Хотя бы потому, что планеру не нужен мотор, а необходим лишь поток воздуха, обтекающий крыло. Но не такое это простое дело, как может показаться на первый взгляд, что наглядно демо...
04 03 2024 11:30:40
Шани — The Witcher 3 Наташа Кочеткова, широко известная на международной арене косплея как Narga, славится своими образами из вселенной Warcraft. Но не так давно дeвyшка поближе познакомилась со вселенной The Witcher, и следом за её…|Игромания...
03 03 2024 23:59:24
В работе над российской локализацией FIFA 10 самое активное участие принимали два Василия – Соловьев и Уткин. Мы воспользовались возможностью и задали каждому по несколько интересующих нас вопросов. Ниже вы можете прочесть интервью Василия…|Игромания...
02 03 2024 16:51:24
Поприветствуйте одиннадцатую игру серии Need for Speed. Так уж сложилось, что нечетные игры этой серии выходят шедеврами — вспомните хотя бы Porsche Unleashed или Most Wanted. Эти игры заслуженно признают лучшими в серии. Их четным собратьям повез...
01 03 2024 16:53:26
DmC: Devil May Cry 2013 года — перезапуск «классической» серии Devil May Cry от сторонних разработчиков Ninja Theory — собрала ну очень противоречивые отзывы. Фанаты классики бранили её на чём свет стоит: и…|Игромания...
29 02 2024 19:56:10
Еще:
Игры -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 ::
