web page maker что это

Аналоги программы

Похожие программы смотрите в наших подборках программ

Источник

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

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

Предыстория

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Методические рекомендации по созданию сайта с помощью визуального редактора сайтов Web Page Maker

Методические рекомендации по созданию сайта с помощью визуального

редактора сайтов Web Page Maker

Цель : Научиться работать в визуальном редакторе создания сайтов, научиться создавать тематические HTML сайты из нескольких страниц.

(Заранее создайте папку с необходимыми для сайта рисунками, музыкой, видео, текстом и т. д )

Тема, цель – Мой личный сайт для размещения

информации о себе и общения с

Структура сайта – это организация его страниц

Количество страниц – 9

Макет страницы

1. С оздание новой страницы

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

ВАРИАНТЫ :

А) Выберем Файл-Новый сайт из шаблона

В результате у вас появятся несколько шаблонных страниц, которые можно изменять по своему вкусу, наполнять своей информацией.

2. Д ействия со страницами Страницы можно : Добавлять

Клонировать

Удалять

Импортировать html страницу

Добавьте (клонируйте) нужное количество страниц, переименуйте их по-своему.

Для изменения любого объекта (текст, рис и т.д) на странице, достаточно щелкнуть по нему два раза Левой кнопкой мыши :

1) При изменении текста, появляется текстовый редактор (Меняем текст и нажимаем ОК)

2) При изменении рисунка, появляется окно выбора рисунка.(Выбираем рисунок из своей папки)

4. Д обавление новых объектов

Для добавления новых объектов на страницу служит меню Вставка

5. С войства страницы

В меню ФОРМАТ можно задать СВОЙСТВА СТРАНИЦЫ ( заголовок, цвет фона, ключевые слова и т.д.)

Заголовок
Определяет название документа, оно появляется в строке заголовка браузера (в самом верху).

Автор
Определяет имя автора документа, либо другую информацию, связанную с авторскими правами.

Ключевые слова
Можно вводить слова, разделяя их запятой. Эти слова используются поисковыми машинами (напр. Google, Yandex и т.п.), которые относят документ к той или иной категории.

Описание
Здесь могут быть заданы краткое описание содержания документа для поисковых машин интернета.

Задайте свойства страницы

6. С оздание второй страницы

Есть несколько путей создания второй странички:

1. Нажмите кнопку Добавить новую страницу в панели

Содержание сайта с правой стороны экрана. (Чтобы скрыть

или отобразить панель, нажмите F8.)

2. Появится новый пустой файл. По умолчанию

Web Page Maker назовёт его » page2 «.

Нажмите кнопку Клонировать страницу в панели

Содержание сайта с правой стороны экрана.

2.Появится копия этого файла. По умолчанию Web Page Maker назовёт его «page2«.

7. П ереименование веб-страницы:

1. Выберите страницу, которую вы хотите переименовать

2. Кликните правой на имени файла и нажмите

3. Введите новое имя страницы.

Теперь на вашем сайте уже есть не менее двух страниц, и вам следует создать между ними гиперссылки

Для создания ссылки на другую страницу вашего сайта:

1. Выделите текст или изображение на «первой» странице.

Для выделения текста, кликните дважды по текстовому полю,

и с помощью курсора выберите необходимый вам диапазон текста в Текстовом редакторе.

2.Нажмите кнопку «Задать гиперссылку» на панели инструментов. Появится диалог «Гиперссылка «.

3. Выберите «Страница на моём сайте «

из выпадающего меню Тип.

4.Для создания гиперссылки на другой

сайт выберите Тип – Другой сайт и

запишите URL адрес другого сайта.

Примечание1 : В рабочем окне программы ссылки не функционируют, они работают только в браузере.

С помощью Web Page Maker’а вы можете создать веб-сайт, содержащжно любое угодное вам количество веб-страниц. Каждый сайт начинается с первой страницы.

Для просмотра веб-страниц в браузере:

1. Нажмите кнопку Просмотр (F5) в панели инструментов.

По окончанию просмотра просто закройте страницу в браузере.

Примечание3 : при просмотре ваших страниц в виде HTML вы можете проверить работоспособность всех локальных ссылок на своём сайте, просто пройдитесь по ссылкам и удостоверьтесь в том, что все они работают

Чтобы сохранить ваш сайт :

2. Появится диалоговое окно «Сохранить как «. Введите имя вашего сайта в соответствующее окно (без расширения).

Источник