X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Создание сайта-визитки в программе Web Page Maker на конкретном примере
vervekin_mw
vervekin_mw
Topic Starter сообщение 23.11.2012, 23:01; Ответить: vervekin_mw
Сообщение #1


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

Предыстория


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

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

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


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

[img]http://vervekin.ru/images/01.jpg[/img]


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

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

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

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


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

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

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

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

[img]http://vervekin.ru/images/02.jpg[/img]


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

[img]http://vervekin.ru/images/03.jpg[/img]


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

[img]http://vervekin.ru/images/04.jpg[/img]


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

[img]http://vervekin.ru/images/05.jpg[/img]


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

[img]http://vervekin.ru/images/06.jpg[/img]


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

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

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

[img]http://vervekin.ru/images/07.jpg[/img]


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

[img]http://vervekin.ru/images/08.jpg[/img]


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

[img]http://vervekin.ru/images/09.jpg[/img]


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

[img]http://vervekin.ru/images/10.jpg[/img]


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

[img]http://vervekin.ru/images/11.jpg[/img]


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

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

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

[img]http://vervekin.ru/images/12.jpg[/img]


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


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

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

[img]http://vervekin.ru/images/13.jpg[/img]


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

[img]http://vervekin.ru/images/14.jpg[/img]


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

[img]http://vervekin.ru/images/15.jpg[/img]


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

[img]http://vervekin.ru/images/16.jpg[/img]


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

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


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

[img]http://vervekin.ru/images/17.jpg[/img]


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

[img]http://vervekin.ru/images/18.jpg[/img]


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

[img]http://vervekin.ru/images/19.jpg[/img]


[img]http://vervekin.ru/images/20.jpg[/img]


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

[img]http://vervekin.ru/images/21.jpg[/img]


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

[img]http://vervekin.ru/images/22.jpg[/img]


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


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

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

[img]http://vervekin.ru/images/23.jpg[/img]


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

[img]http://vervekin.ru/images/24.jpg[/img]


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


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

[img]http://vervekin.ru/images/25.jpg[/img]


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

[img]http://vervekin.ru/images/26.jpg[/img]


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

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


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

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


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

[img]http://vervekin.ru/images/27.jpg[/img]


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


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

[img]http://vervekin.ru/images/28.jpg[/img]


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


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

[img]http://vervekin.ru/images/29.jpg[/img]


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


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

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

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


При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

[img]http://www.masterwebs.ru/sp/seopult.gif[/img]

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыБыстрая индексация страниц сайта и обратных ссылок - 2Index
32 2Index 5487 Вчера, 16:33
автор: 2Index
Открытая тема (нет новых ответов) как заслужить право на создание новой темы?
7 writer80 2089 12.3.2024, 22:54
автор: Lumex
Открытая тема (нет новых ответов) <Braga/> Создание Telegram-ботов, web-приложений, крипто-бирж, сайтов.
2 newbraga 1613 10.3.2024, 22:04
автор: newbraga
Открытая тема (нет новых ответов) Перенос сайта на CMS Wordpress
8 freeax 4792 10.3.2024, 14:58
автор: freeax
Открытая тема (нет новых ответов) Какой % отказов нормален для сайта?
9 Aloof 2360 8.3.2024, 20:41
автор: ZerKuS


 



RSS Текстовая версия Сейчас: 19.3.2024, 12:17
Дизайн