Обучение wysiwyg web builder 9.

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

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

Еще одна новинка – кнопки социальных сетей для WYSIWYG Web Builder 11 . Чувствую, как скептики готовы возразить: «Зачем заострять проблему, которая решается просто. Зашел на онлайн сервис, скопировал код и просто вставил в нужное место.». Скажите, зачем новичку и не только начинающему лезть в коды, забивать, и так опухшую голову не нужной информацией – можно сделать все гораздо проще. При создании целевых страниц и так приходиться делать массу вещей: продумать дизайн, подготовить контент, подготовить графические элементы и т.д. Все это отнимает время, а его вечно не хватает. Сократить время, улучшить возможности программ помогают расширения (скрипты и плагины). Так вот у Артема Горина есть интересное расширение – кнопки социальных сетей для Web Builder . Правда на его страничках ссылка на скачивание вроде бы присутствует, но ведет в никуда. Кто ищет – тот находит. Смотрим ролик

Создание проекта сайта - основные шаги

Установка программы и русский язык интерфейса

Скачайте последнюю версию программы WYSIWYG Web Builder, зайдя на страницу http://www.wysiwygwebbuilder.com/download.html .

При необходимости установите русский язык интерфейса -

Кодировка

Для установки кодировки страниц сайта в меню Page выберите Site Properties (Свойства сайта) - раздел Language - Character Set - установите русскую кодировку: Windows-1251 (Cyrillic Alphabet - Windows), KOI-8R, KOI-8U, ISO-8859-5 (или UTF-8).

Установка кодировки для WYSIWYG Web Builder 9 и 10 - Лента - вкладка Page - раздел Site - Site Properties - вкладка General - раздел Language - Character Set.

Возможно, что установленная кодировка для всего сайта не подойдет для отдельных страниц. В этом случае смените кодировку для таких страниц, используя Свойства страницы - вкладку General- Language (например, смените Windows-1251 на UTF-8).

Установите русский язык - Options - Page Language - Russian . Установка русского языка нужна только для поисковых систем.

Создание сайта

Сайт в программе WYSIWYG Web Builder можно создать двумя путями: с использованием шаблона и самостоятельно ("с нуля"), не используя шаблоны.

Создание сайта с использованием шаблонов - наиболее простой и быстрый способ создать свой сайт. На сайте программы имеется большой выбор шаблонов. Версия испытания идет с 12 шаблонами.
Пример страницы, созданной по шаблону

Для создания сайта по шаблону в меню File выберите New Web Site From Template .

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

Примечание: с версии WYSIWYG Web Builder 10 возможно создание сайта не только для большого экрана настрольного компьютера, но и для экранов разных размеров, в т.ч. для мобильных телефонов
См. Сайты для разных экранов

Самостоятельное создание сайта

Нужно учесть, что при этом выборе Вам придется изучить справку программы в полном объеме.

В первую очередь Вам нужно ознакомиться с интерфейсом программы (см. Интерфейс ), а также с командами, содержащимися в меню (см. Меню ).

Примечание: Интерфейс редактора с версии WYSIWYG Web Builder 9 изменился - наряду со строкой меню стало возможным использовать ленту (см. Лента ).

В меню File выберите New Web Site
Откроется пустая первая (иначе - главная, домашняя, index) страница.

Свойства сайта

Чтобы открыть окно свойств сайта, в меню Page выберите Site Properties .

На четырех вкладках окна определяются общие свойства сайта: название сайта, размеры страниц, установка страницы по центру, кодировка и язык страниц, фон, цвета текста и ссылок, мета- данные и прочее.

Установленные свойства будут применяться как свойства по умолчанию для всех страниц сайта.
См. Свойства сайта
Для отдельных страниц сайта могут устанавливаться свои свойства (см. Свойства страницы ).

Страницы сайта

Домашняя страница

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

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

Общие свойства страниц сайта Вы определяете в Свойствах сайта (меню Page - Site Properties ). Для определения свойств отдельных страниц используйте свойства страницы, для чего в меню View выберите Page Properties (или: используйте Ленту - вкладку Page - Page Properties ).
Здесь Вы можете определить название страницы, фоновое изображение/цвет, цвета текста, размеры страницы и другое.

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

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

Новые страницы

Для добавления или для удаления страниц сайта используется Site Manager - Менеджер Сайта (панель справа вверху), а также меню Page .

Каждый раз, когда Вы добавляете новую страницу к своему вебсайту, она будет добавлена к Менеджеру Сайта. Чтобы редактировать ранее созданные страницы, Вы можете дважды щелкнуть названием страницы, чтобы открыть страницу в окне редактирования.

Объекты страницы

WYSIWYG Web Builder располагает большим количеством различных объектов, которые можно вставить на страницы сайта.

Редактор использует абсолютное позиционирование объектов - объекты расположены в строго определенном месте в соответствии с заданными координатами (при этом объекты могут накладываться друг на друга).

Для вставки объектов можно использовать:

• Меню Insert ,
• Панель вставок (Toolbox),
• Ленту - вкладку Insert
• Контекстное меню страницы

Важнейшие объекты (текст, таблицы, изображения, ссылки, объекты HTML и пр.) расположены на Панели вставок в разделах Standard и Images.

Для вставки объекта нужно щелкнуть по его названию (в меню Insert или на панели вставок) и растянуть рамку объекта в окне редактирования.

Примечание: WYSIWYG Web Builder - визуальный редактор. Большинство объектов можно вставить на страницы, не прибегая к написанию кода. Тем не менее у редактора есть функция вставки собственного html-кода.

Свойства объектов

Для определения свойств вставленного объекта его сначала нужно выделить - щелкнуть по объекту.

Свойства выделенного объекта определяются в Properties Inspector - Инспекторе свойств (панель внизу справа).
С введением в WYSIWYG Web Builder 9 Ленты большинство настроек вставленных объектов расположено на соответствующих вкладках и разделах Ленты.

Позиционирование объектов

Для установки вставленных объектов можно применять простое перетаскивание мышкой.

Для установки объектов на странице можно применить:

Линейки - меню View - Rulers
Сетку - меню View - Grid
Направляющие линии - меню View - Guide
Для работы с этими инструментами в WYSIWYG Web Builder 9 и 10 применяйте Ленту - вкладку View - Guides .

При вставке на страницу различного вида панелей навигации одновременно определяются и ссылки на определенные страницы сайта.

WYSIWYG Web Builder использует расширение.wbs.

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

Предварительный просмотр

В меню File выберите Preview (F5), чтобы анонсировать текущую страницу в Вашем браузере.

В зависимости от настроек предварительного просмотра (Tools -> Options -> Misc), Вы можете или анонсировать единственную страницу или весь вебсайт.

Также возможно изменить браузер, который используется для просмотра по умолчанию. Для этого в меню File выберите Preview in Browser - Edit Browser List .

В меню File выберите Publish , чтобы издать Ваши страницы к местной папке или отдаленному серверу ПРОГРАММЫ ПЕРЕДАЧИ ФАЙЛОВ.

Дополнительно:

1. Обучающая программа в Интернете ("Быстрый старт" англ. язык)
http://www.wysiwygwebbuilder.com/getting_started.html справка программы (на англ. языке) имеется в меню Help - Help Topics (F1).

3. Справка формата PDF может быть загружена со страницы:
http://www.wysiwygwebbuilder.com/download.html

4. Список часто задаваемых вопросов доступен на форуме:
http://www.wysiwygwebbuilder.com/forum/viewforum.php? f=10

5. Для Часто задаваемых вопросов или другой поддержки пожалуйста посетите: http://www.wysiwygwebbuilder.com/support.html.

Последнее обновление - апрель 2015 г.

YSIWYG Web Builder — одна из тех программ, о предназначении которых можно судить по их названиям. Этот веб-редактор позволяет создавать полноценные страницы и даже целые сайты без знания HTML-разметки, PHP-кода и прочих средств, которыми оперируют профессиональными веб-разработчиками. Программа очень проста в использовании: есть рабочая область, на которую предлагается добавлять различные элементы сайта. Таким образом, задача пользователя сводится к подбору нужных элементов и размещению их на странице. Генерация кода происходит полностью автоматически. На любом этапе работы над проектом можно быстро посмотреть, как будет выглядеть страница в браузере.

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

Что касается графических элементов, то можно добавлять как векторные рисунки (с использованием линий, стрелок, кривых и многоугольников), так и растровые. Благодаря наличию инструментов для работы с изображениями их предварительная обработка в стороннем редакторе может и не понадобиться. WYSIWYG Web Builder позволяет выполнять обрезку, изменять параметры яркости, контрастности, насыщенности цветов, применять такие эффекты, как размытие, шум и сепия, преобразовывать в оттенки серого и т. д.

При помощи WYSIWYG Web Builder можно добавлять на сайт веб-формы. Это пригодится, например, при создании опроса или регистрации пользователей. Формы могут быть сложными и содержать области для ввода текста пользователем, поля для установки флажков и переключатели, которые используются для выбора одного варианта из нескольких предложенных. Кроме форм на сайт можно добавлять такие компоненты, как всплывающие окна, разворачивающиеся меню навигации и слайд-шоу. Отдельный набор инструментов программы предназначен для размещения кнопок, при нажатии на которые пользователь сможет оплатить товары или услуги посредством системы PayPal или же сделать добровольное пожертвование автору сайта.

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

Для WYSIWYG Web Builder существует более двухсот дополнений, которые не поддерживаются официально, однако вполне работоспособны. С помощью них можно быстро добавить на сайт такие востребованные элементы, как подписка на новости посредством RSS, поиск в Google, проигрыватель для воспроизведения MP3-файлов и т. д. Другие дополнения расширяют функциональность самой программы — например, добавляют в нее инструмент для проверки орфографии, средство для быстрого создания логотипов и даже полноценный HTML-редактор для опытных пользователей, которые хотят собственноручно вносить изменения в код.

С недавних пор полубил программу WYSIWYG Web Builder
Может кому-то помогут уроки к этой программке

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

Но как же быть? Ведь постигнуть основы HTML, CSS, JavaScript и программирования довольно сложно, а существующие CMS платформы содержат однотипные шаблоны и тоже требуют определенных знаний в редактировании и настройке кода. Как создать сайт самостоятельно, не прибегая к программированию и верстке? Выход есть. Используйте WYSIWYG Web Builder. Это графический редактор позволяющий пользователю собирать сайт из привычных элементов (картинки, текст, фигуры, встроенные меню навигации, галереи) в самой программе. Просто двигайте, изменяйте размеры, вводите текст, создавайте галереи и меню сайта нажатием одной клавишей мыши. Программа WYSIWYG Web Builder генерирует HTML код и создает страницы сайта автоматически и все что вам будет нужно - это опубликовать ваш сайт на вашем хостинге используя несложное меню этой замечательной программы. Кстати, этот сайт также был создан в редакторе WYSIWYG Web Builder.

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

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