Главная / Создание и продвижение сайтов / САЙТОСТРОЕНИЕ / Информация / Как создать сайт-визитку в программе Web Page Maker

Как создать сайт-визитку в программе Web Page Maker

Одной из самых понятных и удобных программ для создания простых сайтов является Web Page Maker, о нем, в основном, и пойдет речь в этой статье. Мы разберем создание с нуля реального действующего сайта с помощью этой замечательной программы.

Предыстория

Моим хорошим знакомым понадобился сайт. Недавно открыли кафе, работа налаживается, постоянные посетители есть, но хотелось бы по максимуму использовать площади и заполнить «окна». Рекламу в печатных изданиях давали, теперь решили рассказать о себе в интернет. Дело хорошее.

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

Согласование макета и выбор имени сайта

К следующей встрече с заказчиком продумываю структуру сайта, рисую макет и подбираю цвета.

sozdanie-sajta-web-page-maker-01

В целом, с незначительными изменениями, макет принят.

Затем рассматриваем варианты подходящих имен в доменной зоне RU, проверяем их через whois сервис. Однословные имена давно заняты, поэтому работаем, в основном, с двухсловными — их достаточно. С учетом дальнейшего естественного продвижения будущего сайта останавливаемся на варианте kafe-voronezh.ru Тут же регистрирую выбранное доменное имя.

Можно приступать непосредственно к созданию сайта.

Подготовка графических элементов

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

Шаблонные варианты вставки изображений в контент известны: прямоугольник с рамкой или без, прямоугольник со скругленными краями, прямоугольник с тенью. Хотелось бы этого избежать. Попробуем придать изображениям оригинальный вид.

Последовательность действий с каждым отдельно взятым изображением будет такова:

1. Открываем фотографию в Фотошопе.
2. Уменьшаем размер изображения до необходимых значений (Изображение — Размер изображения).
3. Выбираем инструмент Прямоугольная область (клавиша М) и с одинаковым отступом от всех сторон изображения вручную выделяем область.

sozdanie-sajta-web-page-maker-02

4. Выбираем режим Быстрой маски (клавиша Q).

sozdanie-sajta-web-page-maker-03

5. К выделенному участку рамки применяем команду Фильтр — Штрихи — Аэрограф, выбирая подходящую к случаю длину штрихов и радиус разбрызгивания.

sozdanie-sajta-web-page-maker-04

6. Выходим из режима Быстрой маски (клавиша Q).
7. Инвертируем выделение (Выделение — Инверсия).

sozdanie-sajta-web-page-maker-05

8. Удаляем выделенную область (клавиша Delete).

sozdanie-sajta-web-page-maker-06

9. Сохраняем полученный результат в виде файла формата PNG.

Cделаем несложный логотип для сайта.

1. Создаем новый документ (Файл — Новый) размером 235х30, в нем и будем работать дальше.
2. Заливаем слой Заднего плана фоновым цветом из шаблона.

sozdanie-sajta-web-page-maker-07

3. Последовательно создаем три текстовых слоя и размещаем их друг относительно друга.

sozdanie-sajta-web-page-maker-08

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

sozdanie-sajta-web-page-maker-09

5. К каждому текстовому слою добавляем эффект падающей тени (Слой — Стиль слоя — Тень).

sozdanie-sajta-web-page-maker-10

6. Подбираем цвет шрифта в каждом текстовом слое.

sozdanie-sajta-web-page-maker-11

7. Удаляем Задний план или делаем его невидимым, отжав «глаз» на соответствующем слое.
8. Окончательный вариант сохраняем как проект в формате PSD на тот случай, если понадобится в будущем внести в него правки, и как файл в формате PNG — для дальнейшей работы.

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

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

sozdanie-sajta-web-page-maker-12

Настройка проекта

Настал черед создания самой страницы. Воспользуемся визуальным редактором для создания сайтов Web Page Maker. Выбираем пункт меню Формат — Свойства страницы.

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

sozdanie-sajta-web-page-maker-13

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

sozdanie-sajta-web-page-maker-14

На вкладке Вид выбираем выравнивание страницы по центру окна браузера, устанавливаем значение фона и цвета текста и ссылок по умолчанию. На этой же вкладке необходимо выбрать пункт «По умолчанию» и в поле справа ввести ручками windows-1251. Нужно будет выбрать эту кодировку и в настройках сайта на хостинге (у меня по умолчанию стояла UTF-8).

sozdanie-sajta-web-page-maker-15

По желанию на вкладке Эффекты можно выбрать эффект входа на страницу, его длительность и запретить копировать изображения с сайта.

sozdanie-sajta-web-page-maker-16

Последняя вкладка Заголовок нам сегодня не пригодится, но при желании можете поэкспериментировать и с ней.

Верстка страницы в визуальном редакторе

1. Добавляем блок контента. Меню Вставка — Фигура — Скругленный прямоугольник.

sozdanie-sajta-web-page-maker-17

На получившейся фигуре щелкаем правой кнопкой мыши и переназначаем свойства фигуры — отступы, размеры, цвет заливки, радиусы скругления. Для этого в окне Свойств фигуры имеется две вкладки — Общее и Цвет и границы. Ширину страницы я выбрал равной 980 точек, чтобы сайт впоследствии удобно было просматривать и на нетбуке с разрешением экрана 1024х600 и на больших разрешениях мониторов. В частности, именно на нетбуке сейчас, шаг за шагом создается сайт и пишется этот текст. В итоге манипуляций со свойствами, методом проб и ошибок получаем следующее:

sozdanie-sajta-web-page-maker-18

2. Добавляем к блоку контента меню путем выбора из имеющихся в программе вариантов: Вставка — Панель навигации. Я выбираю подходящее по цветовой гамме решение.

sozdanie-sajta-web-page-maker-19

sozdanie-sajta-web-page-maker-20

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

sozdanie-sajta-web-page-maker-21

3. Оформляем шапку сайта, размещая над блоками контента и навигации ранее подготовленные файлы логотипа и слогана в формате PNG. Аккуратно все выравниваем на странице. Сделать это можно двумя способами — с помощью мышки, удерживая объект левой кнопкой, или же перемещая выделенный предварительно объект с помощью клавиш управления курсором, удерживая при этом нажатой клавишу Ctrl.

sozdanie-sajta-web-page-maker-22

Редактирование блока контента

Добавляем на страницу ранее подготовленные изображения: Вставка — Изображение — Из файлов… Если вы когда-нибудь добавляли картинки на страницу Word-документа, с этой операцией вы справитесь без малейших затруднений.

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

sozdanie-sajta-web-page-maker-23

Выравниваем вставленные объекты в соответствии с имеющимся макетом, не забывая периодически сохранять наш проект. Страница практически готова. Осталась самая малость.

sozdanie-sajta-web-page-maker-24

Оформление подвала страницы

В подвал сайта вносим информацию о том, кому принадлежит сайт. Делается это также через меню Вставка — Текст. При необходимости вставляем в подвал коды счетчиков: Вставка — Html-код или скрипт-код. Я добавляю скрипт от Rambler и счетчик от Mail.Ru, получить их легко на соответствующих сайтах.

sozdanie-sajta-web-page-maker-25

Можно также добавить в подвале ссылку и на собственный сайт. Содержание ссылки — на свое усмотрение, например, такое: Создание и поддержка сайта — Vervekin.Ru

sozdanie-sajta-web-page-maker-26

Этого пока достаточно.

Просмотр страницы в браузере

Страница готова. Чтобы понять, как она будет выглядеть в сети интернет, достаточно выбрать пункт меню Файл — Просмотр в браузере или нажать F5. Если все нравится, оставляем страницу как есть, в случае обнаружения недостатков или ошибок — устраняем их.

По образу и подобию

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

sozdanie-sajta-web-page-maker-27

Настройка навигации

Теперь нам необходимо связать все будущие страницы сайта в единое целое, обеспечив пользователям понятную навигацию. Для этого снова дважды щелкаем на созданной панели навигации и в ее свойствах (Вкладка Параметры) выбираем тип Страница на моем сайте и заполняем поле URL, выбирая для каждой кнопки название соответствующей страницы. Чтобы связать все страницы, эти действия нужно будет произвести с панелью навигации на остальных четырех страницах.

sozdanie-sajta-web-page-maker-28

Экспорт проекта в HTML

Меню Файл — Экспорт в Html позволяет выгрузить нам в выбранную на нашем ПК папку готовый сайт в виде отдельных файлов с расширением .html и папки images со всеми используемыми изображениями. Проверяем работу сайта локально, запустив из папки с выгруженным проектом файл index.html.

sozdanie-sajta-web-page-maker-29

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

Дело за малым. Осталось залить сайт каким-либо FTP-клиентом на сервер нашего хостера. Мне удобнее делать это с помощью Total Commander’a. В директорию, выделенную нам хостером под сайт, копируем все созданные программой файлы и папку images. Другой способ публикации сайта, который кому-то, возможно, покажется проще. У Page Maker’a есть встроенный инструмент публикации, все что требуется — настроить его, заполнив все поля. И тогда публиковать проект на сайте можно будет нажатием одной единственной кнопки — F4

Осталось открыть любимый браузер и набрать адрес сайта: kafe-voronezh.ru Все замечательно, все работает! Если в процессе просмотра обнаруживаем какие-то ошибки, в проекте сайта, созданном с помощью программы Web Page Maker, делаем правки, затем снова сохраняем его и выгружаем в HTML. Отредактированный вариант опять же заливаем на хостинг с подтверждением замены всех файлов, там ему и место. Собственно, на этом наша работа над проектом завершена.

Очень надеюсь, что изложенная информация окажется полезной при создании вашего первого сайта-визитки и, возможно, последующих. При всей простоте и кажущемся минимализме Web Page Maker’а, с помощью этой программы можно создавать весьма оригинальные сайты с использованием дополнительных java-скриптов, воплощая собственные нестандартные решения. Дополнительным плюсом в пользу программы будет кроссбраузерность создаваемых ею проектов. Уверен, что при более плотном знакомстве с этой программой у вас появится еще один полезный инструмент для проектирования и разработки сайтов.

P.S. Эта статья была опубликована мной в рамках одного из конкурсов, проводимых на форуме MasterWebs.Ru. Поскольку информация до сих пор актуальна, делаю перепост. Источник: Создание сайта-визитки в программе Web Page Maker на конкретном примере.

Расскажите об этой статье в соцсетях:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *