Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
WYSIWYG Web Builder - создаем сайт из шаблона

Приветствую всех посетителей сайта!   В прошлом материале я обещала с вами поделиться шаблонами для визуального редактора WYSIWYG Web Builder. Кто еще не скачал программу или понятия не имеет, что это такое и для чего оно нужно, то за более детальной информацией идем сюда. Там же под статьей есть ссылка на скачивание WYSIWYG Web Builder 9.1.2. Данная версия бесплатна, русскоязычна и бессрочна, благодаря вложенным в архив кейгену и русификатору.

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

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

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

В данном редакторе нет громоздких контейнеров, как в Adobe Muse, содержащим внутри триггеры, композиции, тексты и картинки, поэтому разобраться с WYSIWYG Web Builder будет проще. Интерфейс программы напоминает смесь Word'a  и Power Point, так что большинство инструментов вам будет уже знакомо.

Слева от рабочего поля расположена Лента Toolbox со всеми инструментами, справа Менеджер сайтов и под ним Свойства страницы. Кстати, в WYSIWYG Web Builder можно создавать в Менеджере сайтов папки и подпапки, формируя категории и разделы, чего в Пейдже сделать нельзя. Да и Свойства страницы здесь дают больше возможностей для настроек параметров страниц сайта, чем WebPageMaker.

При запуске программы обычно появляется сообщение о том, что всегда можно вернуться к стандартному интерфейсу, убрав Ленту и пользуясь меню и панелями инструментов. Если новый интерфейс вас устраивает, то данное сообщение можно отключить, поставив галочку напротив "Не показывать это сообщение снова".








ПОДРОБНЕЕ




Web Builder lenta toolbox
Шаблоны Web Builder
Создание сайта в Веб Билдер
Что ж, программа запущена, приступаем к работе. Чтобы выбрать шаблон из предустановленных, идем по пути Файл Новый сайт по шаблону. Откроется окно с шаблонами, где кликом выбираете понравившийся и жмете ОК.
Если же среди предустановленных шаблонов вы не нашли ничего подходящего, то просмотрите подборку шаблонов, которую получите в рассылке. Чтобы использовать шаблон из архива, распакуйте нужный шаблон и установите его в программу. Для этого идем в меню Файл Открыть сайт/ На скриншоте видно, что рядом во вкладке Недавние файлы отображаются шаблоны, которые я недавно открывала.

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






В появившемся окне Обзора находим распакованный шаблон и щелкаем по файлу с расширением .wbs и внизу окна жмем кнопку Открыть. Выбранный шаблон загружен в программу и готов к редактированию. Я выбрала шаблон 1.wbs из архива и вот он открыт в программе.
Редактирование шаблона в Web Builder
Начинаем редактирование, можно начать с текстов, можно с картинок, можно идти по порядку, редактируя все по очереди, вообщем, кому как удобно. Для редактирования любого текста, достаточно дважды щелкнуть по нему, текст будет выделен тонкой рамкой, после чего удаляем исходный текст и вписываем свой.

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

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

Удаление ненужных объектов можно производить, щелкнув по ним ПКМ и выбрав пункт "Вырезать". Добавлять новые объекты удобнее через меню Вставка либо выбрав нужный элемент из Ленты Toolbox слева.

Теперь несколько слов о слайдере. Чтобы заменить исходные картинки в слайдере на свои, щелкаем два раза сначала по первой картинке. Заменив ее, под слайдером в навигации щелкаем по второй черной точке, тем самым открывая вторую картинку для замены. И так поступаем со всеми картинками, щелкая по точкам под слайдером.

Теперь давайте посмотрим, как редактируется галерея. Чтобы заменить фотографии в галерее, кликаем по любому фото, открывается окно Свойства фотогалереи. В нем отображаются превьюшки всех фотографий галереи.

Чтобы их заменить своими, нужно сначала их удалить, а затем добавить новые. Можно удалять по одному фото, тут же заменяя его новым. А можно удалить все сразу, после чего добавить свои.


Фотогалерея в Web Builder
Редактирование галереи в Web Builder
Шаблоны по умолчанию
Я выберу для примера один из предустановленных шаблонов со слайдером (№ 11). После нажатия на ОК, шаблон открывается на рабочем поле. После быстрой правки шапки шаблона вот что получилось:


Я для примера удалила два первых фото в галереее g1.ipg и g2.jpg, разместив вместо них свои картинки. Как видите, стиль оформления новых картинок не изменился, так как он задан для всех изображений галереи в настройках.
Настройки галереи
В окне Свойства фотогалереи под превьшками есть несколько параметров для настройки внешнего вида галереи. Например, можно выбрать желаемое количество столбцов, задать определенный размер эскиза, выбрать режим отображения (в том же окне браузера, во всплывающем окне или оставить по умолчанию Галерея вывесок).

Во второй вкладке этого же окна задается стилевое оформление фотографий. В наличии много готовых стилей, реально есть из чего выбрать.
Редактирование меню в Web Builder
Редактирование отзывов
Редактирование меню происходит похожим образом. Все пункты меню, как и фотографии галереии, меняются в одном окне. В шаблоне лендинга меню нет, поэтому давайте посмотрим на примере шаблона по умолчанию (№ 11). Для того, чтобы изменить названия разделов Меню, щелкаем дважды по любому из них.

В открывшемся окне "Свойства CSS меню" отображаются все пункты меню. Выделяем первый пункт и жмем кнопку Править, меняем исходное название на свое. Затем выделяем второй пункт и жмем Править и т.д. Меню редактировать лучше после того, как созданы внутренние страницы. чтобы сразу проставить ссылки из меню на нужные страницы. Хотя это можно сделать в любой момент:)) Во второй вкладке "Стиль" задается стилевое оформление гиперссылок.


Осталось пожалуй заменить фотографии в блоке отзывов. Меняются они тоже двойным кликом, после чего подгоняются по размеру. Фотографии берите на фоновой основе, иначе, если взять фото людей в формате png, они будут на черном фоне. Стилевое оформление для всех фотографий сохраняется одинаковое, как в галерее.

Для примера я заменила фото и текст в первом отзыве:
После замены логотипа и небольшой корректировки текста шапка шаблона теперь выглядит так:
Редактирование шаблона
А если к редактированию шаблона подойти основательно, добавить какие-то свои блоки, графические элементы, убрать ненужные объекты, сменить стилевое оформление, то на выходе можно получить отличный функциональный сайт. Так что дерзайте!

Если же у вас есть собственные идеи дизайна сайта и вы не нуждаетесь в шаблонах, то для вас старт начинается по такому пути: Файл Новый сайт. Рабочее поле в таком случае будет чистым и вам самостоятельно шаг за шагом придется его наполнять теми элементами, которые вы задумали.

В любом случае я желаю всем удачи и творческого вдохновения!
До новых встреч! С ув. Светлана (SvetLana_TSV).


P.S. Подписчики в этом выпуске рассылки бесплатно получат подборку шаблонов для WYSIWYG Web Builder стоимостью 2950 рублей. Не пропустите письмо!

Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!



Не забудь заглянуть в свою почту и подтвердить подписку!