Одной из самых понятных и удобных программ для создания простых сайтов является
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+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
|