Руководство пользователя wysiwyg web builder

Общее вступление про конструкторы сайтов

Как конструктор сайтов, WYSIWYG Web Builder (давайте будем называть его WWB) предоставляет собой мощный инструмент, на голову превосходящий своих бесплатных конкурентов, таких как Nvu или TurboSite.

Конструктор WWB, как и все программные конструкторы сайтов, выгодно отличается и от своих онлайновых конкурентов – прежде всего сервиса Wix и системы управления сайтом uCoz.

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

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

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

Сам проект сайта хранится в едином файле с расширением .wbs и одноименной с названием проекта папке с изображениями.

Ленточный интерфейс Ribbon

С выпуском 10 версии конструктор приобрел ленточный интерфейс, разработанный корпорацией Майкрософт. Весь часто вызываемый инструментарий расположен на ленточной системе, подразделенной на вкладки.

Управление объектами в конструкторе облегчается автоматическим переключением на нужную вкладку как только вы начинаете работу с самим объектом. На скриншоте ниже видно как ленточная вкладка переключена в режим «формат», при нажатии курсором изображения.

Список объектов

Лента, которая расположена в редакторе слева, это список всех объектов, которые можно вставить в ваш проект сайта. Более продвинутый верстальщик веб-страниц только улыбнется при виде списка этих объектов, так как в силу его способностей и знаний, в сайт можно внедрить вообще практически всё, что можно отобразить на сайте. Но если вы – новичок, или ленитесь разбираться в сайтостроении – первое что вас удивит – это именно этот длинный список.

Скажу по секрету, что после многодневного поиска среди онлайн- и оффлайн-конструкторов сайтов, я наткнулся на скриншот интерфейса описываемой программы WWB10. Именно потрясающее количество кнопок и списков меня вдохновили на покупку и установку именно этого конструктора. Всё же, при своей ленивости, я понимаю, что возможности HTML-разметки практически неограничены, и визуальный конструктор (кстати, WYSIWYG именно так и расшифровывается – что вижу, то и получаю) должен визуально отображать немереные возможности для построения сайта.

Вставка контента

Вставка текста

На нижеследующем скриншоте выделены все объекты главной страницы сайта. Как можно узреть, конструирование сайта представляет собой вставку блоков различных типов: блоки текста, изображений, таблиц, баннеров и кнопок. Практически всё, что может понадобиться на конструирования простого сайта, наподобие нашего amctv.ru, находится в длинном списке объектов. Достаточно лишь перетянуть нужный объект из левой колонки на пространство создаваемой страницы.

Для облегчения конструирования и создания страниц, WWB10 предлагает в своем арсенале самый различный инструментарий.

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

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

Не надо изощряться с последующим редактированием выгружаемой html-страницы, чтобы вставить бегущий текст, таблицу… всё можно создать, не выходя из WWB10.

Вставка изображений

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

Встроенный редактор изображений

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

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

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

Вставка ссылок

Как и при обычной вёрстке сайтов, свойства гиперссылки в WWB10 могут приобретать как строчки текста, так и изображения.

Ссылание может происходить на любое позволяемое html-документацией действие:

     1) предыдущая страница, перезагрузка страницы;

     2) e-mail адрес, в этом случае при нажатии на ссылку будет открываться ваш почтовый клиент;

     3) номер телефона, ник в skype;

     4) внешний файл, находящийся на вашем компьютере, в этом случае при генерации html страниц,  ваш файл также скопируется в папку с файлами сайта;

     5) самая необходимая функция – ссылка на другую страницу вашего сайта-проекта;

     6) и даже отсылка к звонку через FaceTime

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

Готовых java-скриптов (например, автоматически переадресующих пользователя на мобильную версию сайта), коих в самой программе наберется около пары десятков;

Фотогалерей (в том числе и с помощью так называемых расширений для WWB10);

Слайд-шоу изображений с тонкими настройками эффектов угасания и появления, скорости смены одного изображения на другое;

Не слишком сложных вызываемых функций из подключаемой библиотеки jQuery – табы, всплывающие окна, бегунки и полосы прогресса.

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

Оптимизация работы

Страницы сайта и перелинковка

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

Как и современные онлайновые CMS-системы (WordPress, Joomla и другие), наш оффлайновый конструктор никогда не позволит себе ошибки с неверной адресацией страниц и ссылок на них внутри сайт-проекта.

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

Навигация сайта.

Одна из самых необходимых функций – которая есть наверное на каждом сайте всемирной сети: навигационное меню.

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

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

Во-вторых – CSS-меню.

В третьих – текстовое меню.

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

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

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

Область данных и мастер-объекты

ContentPlaceHolder

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

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

Для создания так называемого каркаса сайта, WWB10 предоставляет нам инструмент под названием ContentPlaceHolder, или «Область данных».

Мастер-страница создается ровно также как и любая страница сайта – создаете, присваиваете имя, допустим, master_frame, заполняете её общим для каждой страницы контентом – шапкой, подвалом, общим меню навигации, html-кодами счетчиков посетителей, настраиваете фон.

Затем в середину этой мастер-страницы и старайтесь расположить «область данных». При настройке свойств области данных не забудьте отметить положение «расширить» при переполнении области данных.

Каркас всех страниц сайта готов.

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

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

Чтобы после генерации сайта обычные страницы с контентом объединились с мастер-страницей, в свойствах обычной страницы указываем нашу мастер-страницу как первичный фрейм.

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

Мастер-объекты

Инструмент «мастер-объект» очень похож на вышеописанную «область данных». Он также очень упростит работу с сайтом, позволяя повторно использовать объекты с одной страницы сайта на другой.

Например, создав отдельную чистую страницу master_frame2.html, с вставленным блоком html-кода, вызывающим рекламу, и проставив «мастер-объекты» с этой рекламной страницы на нескольких десятках страниц сайта, вы избавите себя от кропотливой работы в случае смены рекламодателя. Вы сможете поменять html-блок лишь на одной странице master_frame2, чтобы изменениям были подвергнуты все страницы с расположенным мастер-объектом.

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

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

Стили страниц, гиперссылок, мета-тегов.

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

Стиль мета-тегов h1-h6 также ужасает вас своим видом – при обрамлении текста тегом h1 буквы становятся великанами, выбиваясь из общего оформления сайта.

Все настройки разбросаны по программе, но все-таки присутствуют.

Оптимизация под поисковые системы

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

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

Попробуем старательно подойти к проблеме оптимизации контента и решим её средствами конструктора WWB10

Что требуют поисковики и что им не нравится.

Разметка текста.

Заголовки h1-h6

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

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

Из учебников по html-разметке можно узнать, что существует 6 уровней заголовков. Чтобы указать поисковой системе именно нужный заголовок и его уровень, текст заголовка обрамляют в теги <hX></hX>, где X – уровень заголовка, от первого до шестого.

Заголовок <h1></h1> — высший заголовок страницы (не путать с title), и должен существовать на одной странице в единственном экземпляре.

Заголовки, обрамляемые в теги h2-h6, могут существовать на странице в неограниченном количестве.

Итак, как же обрамить текст на странице конструктора в теги заголовка?

Все просто до невероятия. Выделяем текст – выбираем в контекстном меню тип заголовка – всё!

Мета-теги keywords, title, description

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

Мета-тег title – по сути имя страницы, отображаемое в открытой вкладке браузера.

Мета-тег description – краткое описание страницы, именно его вы можете видеть при запросах в поисковую систему рядом с каждым выданным результатом.

Мета-теги keywords, title, description в конструкторе WWB10 заполняются в свойствах страниц.

Тег alt (альтернативный текст)

Важный атрибут для поисковых систем.

Пока что алгоритмы поисковых систем таковы, что они не могут распознавать, что именно находится на той или иной фотографии. И тут в помощь приходит тег «альтернативный текст». Именно он сообщает подробности содержания изображения для поисковых алгоритмов. В конструкторе WWB10 тег alt прописывается в свойствах изображения.

Атрибут rel=nofollow

nofollow -это значение атрибута rel тега «a» языка гипертекстовой разметки веб-страниц HTML (rel=»nofollow»). Значение предназначено для поисковых систем: оно указывает им на то, что гиперссылке, задаваемой «a», не следует никаким образом передавать весовую значимость с вашей страницы. Закрыв внешние ссылки с помощью этого тега, вы предотвратите утекание веса поискового ранжирования с вашего сайта.

Внешние ссылки

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

Карта сайта

Инструментарий WWB10 позволяет с легкостью, парой нажатий мыши, генерировать вместе с файлами сайта и так называемую карту сайта sitemap.xml

Будьте внимательны – конструктор не знает, какой именно домен вы присвоите вашему сайту, и не повторите моей ошибки, не прописав url будущего сайта в свойствах карты сайта.

Расширения для конструктора WYSIWYG Web Builder

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

Online Photo Gallery – легкая и многофункциональная интернет фотогалерея (с базами данных) , для управления фотографиями в Интернете. От хостинга само собой будет требоваться поддержка PHP и MySQL

News Writer – очень простая онлайн-система управления контентом (CMS), которая позволяет Вам управлять определенной областью веб-страницы в Интернете.

RSS Parser – расширение информацию из rss-канала по указываемому url-адресу и выводит данные на веб-странице.

jQuery FAQ – создает список вопросов с раскрывающимся по щелчку ответом.

Недостатки конструктора

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

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

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

Что же лично мне посоветовать вам при создании сайта в WYSIWYG Web Builder?

Не сильно замахивайтесь на крупный проект – аббревиатура WYSIWYG и означает то, что внешний вид и функционал будущего сайта не будет сильно отличаться от набора статичных HTML-страничек. Да, количество расширений, предлагаемых сторонними разработчиками, вас может удивить, но это иллюзия богатых возможностей. Да, вы сможете создать в этом конструкторе страницу скачивания файла с формой ввода капчи; возможно даже сможете создать форму платежа через онлайновые платежные сервисы; автоматизированную галерею фотографий, подключаемую к базе данных… но не более.

Но при должных умениях у вас получится вполне приличный landing page, статичный html сайт, или немного продвинутый многостраничный любимый проект с фотогалереями, возможностью комментирования, удобной перелинковкой и симпатичным дизайном.

Скриншоты сайтов

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

Вывод

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

Как визуальный конструктор сайтов, WWB10 является на данный момент лучшим представителем подобного типа программ.

Дополнения и обновления:

Адаптивность сайта под разные разрешения

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

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

Такие простые сайты как мой, адаптируются в принципе легко – я создал несколько точек останова для большинства страниц:

980px по горизонтали

1255px по горизонтали

320px по горизонтали

и 790px по горизонтали

Таким образом я адаптировал сайт для компьютеров, мобильников и планшетов.

При разрешении монитора 1366*768, страница адаптирована под точку останова 1255px, почему именно 1255, а не сразу 1366? А потому что лично у меня, например, монитор, разрешением 1360 пикселей, плюс полоса прокрутки – она тоже будет забирать часть пикселей себе, плюс окаймление окна браузера – тоже пара пикселей, плюс возможное наличие боковой панели инструментов, как у меня. В общем, 1255 – это самое то.

Точка останова в 980px выбрана по тем же причинам, но под разрешение монитора 1024 пикселя по горизонтали.

Точка останова 790px – лично мой бзик, мне не создавало проблем создание этой дополнительной точки останова, и опять же часть пользователей может видеть мой сайт не в слишком урезанном виде. Например, на планшетах в книжной ориентации, при разрешении, допустим 800*1255 пикселей.

Точка останова 320px – выбрана для прохождения теста мобилопригодности сайта в гугловском и яндексовском вебмастерах. Вы можете возразить – а нафига в 2016 году нужны такие смехотворные разрешения, как 320 пикселей по горизонтали, когда производители смартфонов уже несколько лет наловчились выпускать FullHD смартфоны, или даже не FHD, а вполне себе пристойные 560-780 пикселей по горизонтали?

Хехе, скажу я вам, дисплейное разрешение и разрешение браузера, установленного на этом же смартфоне  — разные вещи. Один виртуальный пиксель браузера вполне может равняться полутора, или четырём квадратным пикселям дисплейного разрешения. Такие дела. Ну и сами представьте себе – у вас ФуллХД смартфон с экранчиком 4,5 дюйма, и что, вы реально можете спокойно читать сайт в полноэкранном разрешении? Нет, лупу в руки не берите. И щепоткой тоже не возюкайте… ой, ну что это вы делаете, вам нравится смотреть на сайт через амбразуру танка?

Лично вы можете расширить диапазон поддерживаемых разрешений, например, вплоть до FullHD. А пока же повторю – при моих настройках адаптивности, точка останова 320px влияет на все разрешения вплоть до 789 пикселей по горизонтали, точка останова 790px – на все разрешения от 790 до 979 пикселей по горизонтали, точка останова 980px – на все разрешения от 980 до 1254 пикселей по горизонтали, точка останова 1255px – на все разрешения от 1255 пикселей по горизонтали и выше.

Что же нужно делать после создания точек останова?

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

Так же можно тупо скрывать некоторые объекты на определенных точка останова – снимая галочку видимости в менеджере объектов.

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

Форма отправки

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

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

Функций на самом деле навалом, я даже не осиливаю их перечислить.

Конечно, функции адаптивности под каждое разрешение монитора присутствуют тоже.

Данная статья относится к версиям конструктора 10, 11, 12, 13 , 14, 15, 16

Правила форума
1. Название темы должно кратко описывать суть вашего вопроса, темы типа: «Помогите», «Почему», «Что это», «Что-то глючит» — будут удаляться.
2. Задавая свой вопрос, постарайтесь предоставить максимум информации о проблеме, если есть возможность, приложите шаблон проекта *.wtp.
Подробнее: Правила создания новых тем и ответов на существующие темы.
Данный форум — это место обсуждения вопроса, а не техподдержка в классическом смысле. Все участники форума Web Builder по-русски с удовольствием вам помогут, если это будет в их силах.

Общее вступление про конструкторы сайтов

Как конструктор сайтов, WYSIWYG Web Builder (давайте будем называть его WWB) предоставляет собой мощный инструмент, на голову превосходящий своих бесплатных конкурентов, таких как Nvu или TurboSite.

Конструктор WWB, как и все программные конструкторы сайтов, выгодно отличается и от своих онлайновых конкурентов – прежде всего сервиса Wix и системы управления сайтом uCoz.

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

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

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

Сам проект сайта хранится в едином файле с расширением .wbs и одноименной с названием проекта папке с изображениями.

Ленточный интерфейс Ribbon

С выпуском 10 версии конструктор приобрел ленточный интерфейс, разработанный корпорацией Майкрософт. Весь часто вызываемый инструментарий расположен на ленточной системе, подразделенной на вкладки.

Управление объектами в конструкторе облегчается автоматическим переключением на нужную вкладку как только вы начинаете работу с самим объектом. На скриншоте ниже видно как ленточная вкладка переключена в режим «формат», при нажатии курсором изображения.

Список объектов

Лента, которая расположена в редакторе слева, это список всех объектов, которые можно вставить в ваш проект сайта. Более продвинутый верстальщик веб-страниц только улыбнется при виде списка этих объектов, так как в силу его способностей и знаний, в сайт можно внедрить вообще практически всё, что можно отобразить на сайте. Но если вы – новичок, или ленитесь разбираться в сайтостроении – первое что вас удивит – это именно этот длинный список.

Скажу по секрету, что после многодневного поиска среди онлайн- и оффлайн-конструкторов сайтов, я наткнулся на скриншот интерфейса описываемой программы WWB10. Именно потрясающее количество кнопок и списков меня вдохновили на покупку и установку именно этого конструктора. Всё же, при своей ленивости, я понимаю, что возможности HTML-разметки практически неограничены, и визуальный конструктор (кстати, WYSIWYG именно так и расшифровывается – что вижу, то и получаю) должен визуально отображать немереные возможности для построения сайта.

Вставка контента

Вставка текста

На нижеследующем скриншоте выделены все объекты главной страницы сайта. Как можно узреть, конструирование сайта представляет собой вставку блоков различных типов: блоки текста, изображений, таблиц, баннеров и кнопок. Практически всё, что может понадобиться на конструирования простого сайта, наподобие нашего amctv.ru, находится в длинном списке объектов. Достаточно лишь перетянуть нужный объект из левой колонки на пространство создаваемой страницы.

Для облегчения конструирования и создания страниц, WWB10 предлагает в своем арсенале самый различный инструментарий.

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

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

Не надо изощряться с последующим редактированием выгружаемой html-страницы, чтобы вставить бегущий текст, таблицу… всё можно создать, не выходя из WWB10.

Вставка изображений

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

Встроенный редактор изображений

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

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

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

Вставка ссылок

Как и при обычной вёрстке сайтов, свойства гиперссылки в WWB10 могут приобретать как строчки текста, так и изображения.

Ссылание может происходить на любое позволяемое html-документацией действие:

     1) предыдущая страница, перезагрузка страницы;

     2) e-mail адрес, в этом случае при нажатии на ссылку будет открываться ваш почтовый клиент;

     3) номер телефона, ник в skype;

     4) внешний файл, находящийся на вашем компьютере, в этом случае при генерации html страниц,  ваш файл также скопируется в папку с файлами сайта;

     5) самая необходимая функция – ссылка на другую страницу вашего сайта-проекта;

     6) и даже отсылка к звонку через FaceTime

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

Готовых java-скриптов (например, автоматически переадресующих пользователя на мобильную версию сайта), коих в самой программе наберется около пары десятков;

Фотогалерей (в том числе и с помощью так называемых расширений для WWB10);

Слайд-шоу изображений с тонкими настройками эффектов угасания и появления, скорости смены одного изображения на другое;

Не слишком сложных вызываемых функций из подключаемой библиотеки jQuery – табы, всплывающие окна, бегунки и полосы прогресса.

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

Оптимизация работы

Страницы сайта и перелинковка

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

Как и современные онлайновые CMS-системы (WordPress, Joomla и другие), наш оффлайновый конструктор никогда не позволит себе ошибки с неверной адресацией страниц и ссылок на них внутри сайт-проекта.

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

Навигация сайта.

Одна из самых необходимых функций – которая есть наверное на каждом сайте всемирной сети: навигационное меню.

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

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

Во-вторых – CSS-меню.

В третьих – текстовое меню.

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

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

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

Область данных и мастер-объекты

ContentPlaceHolder

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

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

Для создания так называемого каркаса сайта, WWB10 предоставляет нам инструмент под названием ContentPlaceHolder, или «Область данных».

Мастер-страница создается ровно также как и любая страница сайта – создаете, присваиваете имя, допустим, master_frame, заполняете её общим для каждой страницы контентом – шапкой, подвалом, общим меню навигации, html-кодами счетчиков посетителей, настраиваете фон.

Затем в середину этой мастер-страницы и старайтесь расположить «область данных». При настройке свойств области данных не забудьте отметить положение «расширить» при переполнении области данных.

Каркас всех страниц сайта готов.

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

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

Чтобы после генерации сайта обычные страницы с контентом объединились с мастер-страницей, в свойствах обычной страницы указываем нашу мастер-страницу как первичный фрейм.

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

Мастер-объекты

Инструмент «мастер-объект» очень похож на вышеописанную «область данных». Он также очень упростит работу с сайтом, позволяя повторно использовать объекты с одной страницы сайта на другой.

Например, создав отдельную чистую страницу master_frame2.html, с вставленным блоком html-кода, вызывающим рекламу, и проставив «мастер-объекты» с этой рекламной страницы на нескольких десятках страниц сайта, вы избавите себя от кропотливой работы в случае смены рекламодателя. Вы сможете поменять html-блок лишь на одной странице master_frame2, чтобы изменениям были подвергнуты все страницы с расположенным мастер-объектом.

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

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

Стили страниц, гиперссылок, мета-тегов.

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

Стиль мета-тегов h1-h6 также ужасает вас своим видом – при обрамлении текста тегом h1 буквы становятся великанами, выбиваясь из общего оформления сайта.

Все настройки разбросаны по программе, но все-таки присутствуют.

Оптимизация под поисковые системы

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

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

Попробуем старательно подойти к проблеме оптимизации контента и решим её средствами конструктора WWB10

Что требуют поисковики и что им не нравится.

Разметка текста.

Заголовки h1-h6

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

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

Из учебников по html-разметке можно узнать, что существует 6 уровней заголовков. Чтобы указать поисковой системе именно нужный заголовок и его уровень, текст заголовка обрамляют в теги <hX></hX>, где X – уровень заголовка, от первого до шестого.

Заголовок <h1></h1> — высший заголовок страницы (не путать с title), и должен существовать на одной странице в единственном экземпляре.

Заголовки, обрамляемые в теги h2-h6, могут существовать на странице в неограниченном количестве.

Итак, как же обрамить текст на странице конструктора в теги заголовка?

Все просто до невероятия. Выделяем текст – выбираем в контекстном меню тип заголовка – всё!

Мета-теги keywords, title, description

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

Мета-тег title – по сути имя страницы, отображаемое в открытой вкладке браузера.

Мета-тег description – краткое описание страницы, именно его вы можете видеть при запросах в поисковую систему рядом с каждым выданным результатом.

Мета-теги keywords, title, description в конструкторе WWB10 заполняются в свойствах страниц.

Тег alt (альтернативный текст)

Важный атрибут для поисковых систем.

Пока что алгоритмы поисковых систем таковы, что они не могут распознавать, что именно находится на той или иной фотографии. И тут в помощь приходит тег «альтернативный текст». Именно он сообщает подробности содержания изображения для поисковых алгоритмов. В конструкторе WWB10 тег alt прописывается в свойствах изображения.

Атрибут rel=nofollow

nofollow -это значение атрибута rel тега «a» языка гипертекстовой разметки веб-страниц HTML (rel=»nofollow»). Значение предназначено для поисковых систем: оно указывает им на то, что гиперссылке, задаваемой «a», не следует никаким образом передавать весовую значимость с вашей страницы. Закрыв внешние ссылки с помощью этого тега, вы предотвратите утекание веса поискового ранжирования с вашего сайта.

Внешние ссылки

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

Карта сайта

Инструментарий WWB10 позволяет с легкостью, парой нажатий мыши, генерировать вместе с файлами сайта и так называемую карту сайта sitemap.xml

Будьте внимательны – конструктор не знает, какой именно домен вы присвоите вашему сайту, и не повторите моей ошибки, не прописав url будущего сайта в свойствах карты сайта.

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

Online Photo Gallery – легкая и многофункциональная интернет фотогалерея (с базами данных) , для управления фотографиями в Интернете. От хостинга само собой будет требоваться поддержка PHP и MySQL

News Writer – очень простая онлайн-система управления контентом (CMS), которая позволяет Вам управлять определенной областью веб-страницы в Интернете.

RSS Parser – расширение информацию из rss-канала по указываемому url-адресу и выводит данные на веб-странице.

jQuery FAQ – создает список вопросов с раскрывающимся по щелчку ответом.

Недостатки конструктора

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

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

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

Что же лично мне посоветовать вам при создании сайта в WYSIWYG Web Builder?

Не сильно замахивайтесь на крупный проект – аббревиатура WYSIWYG и означает то, что внешний вид и функционал будущего сайта не будет сильно отличаться от набора статичных HTML-страничек. Да, количество расширений, предлагаемых сторонними разработчиками, вас может удивить, но это иллюзия богатых возможностей. Да, вы сможете создать в этом конструкторе страницу скачивания файла с формой ввода капчи; возможно даже сможете создать форму платежа через онлайновые платежные сервисы; автоматизированную галерею фотографий, подключаемую к базе данных… но не более.

Но при должных умениях у вас получится вполне приличный landing page, статичный html сайт, или немного продвинутый многостраничный любимый проект с фотогалереями, возможностью комментирования, удобной перелинковкой и симпатичным дизайном.

Скриншоты сайтов

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

Вывод

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

Как визуальный конструктор сайтов, WWB10 является на данный момент лучшим представителем подобного типа программ.

Дополнения и обновления:

Адаптивность сайта под разные разрешения

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

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

Такие простые сайты как мой, адаптируются в принципе легко – я создал несколько точек останова для большинства страниц:

980px по горизонтали

1255px по горизонтали

320px по горизонтали

и 790px по горизонтали

Таким образом я адаптировал сайт для компьютеров, мобильников и планшетов.

При разрешении монитора 1366*768, страница адаптирована под точку останова 1255px, почему именно 1255, а не сразу 1366? А потому что лично у меня, например, монитор, разрешением 1360 пикселей, плюс полоса прокрутки – она тоже будет забирать часть пикселей себе, плюс окаймление окна браузера – тоже пара пикселей, плюс возможное наличие боковой панели инструментов, как у меня. В общем, 1255 – это самое то.

Точка останова в 980px выбрана по тем же причинам, но под разрешение монитора 1024 пикселя по горизонтали.

Точка останова 790px – лично мой бзик, мне не создавало проблем создание этой дополнительной точки останова, и опять же часть пользователей может видеть мой сайт не в слишком урезанном виде. Например, на планшетах в книжной ориентации, при разрешении, допустим 800*1255 пикселей.

Точка останова 320px – выбрана для прохождения теста мобилопригодности сайта в гугловском и яндексовском вебмастерах. Вы можете возразить – а нафига в 2016 году нужны такие смехотворные разрешения, как 320 пикселей по горизонтали, когда производители смартфонов уже несколько лет наловчились выпускать FullHD смартфоны, или даже не FHD, а вполне себе пристойные 560-780 пикселей по горизонтали?

Хехе, скажу я вам, дисплейное разрешение и разрешение браузера, установленного на этом же смартфоне  — разные вещи. Один виртуальный пиксель браузера вполне может равняться полутора, или четырём квадратным пикселям дисплейного разрешения. Такие дела. Ну и сами представьте себе – у вас ФуллХД смартфон с экранчиком 4,5 дюйма, и что, вы реально можете спокойно читать сайт в полноэкранном разрешении? Нет, лупу в руки не берите. И щепоткой тоже не возюкайте… ой, ну что это вы делаете, вам нравится смотреть на сайт через амбразуру танка?

Лично вы можете расширить диапазон поддерживаемых разрешений, например, вплоть до FullHD. А пока же повторю – при моих настройках адаптивности, точка останова 320px влияет на все разрешения вплоть до 789 пикселей по горизонтали, точка останова 790px – на все разрешения от 790 до 979 пикселей по горизонтали, точка останова 980px – на все разрешения от 980 до 1254 пикселей по горизонтали, точка останова 1255px – на все разрешения от 1255 пикселей по горизонтали и выше.

Что же нужно делать после создания точек останова?

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

Так же можно тупо скрывать некоторые объекты на определенных точка останова – снимая галочку видимости в менеджере объектов.

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

Форма отправки

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

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

Функций на самом деле навалом, я даже не осиливаю их перечислить.

Конечно, функции адаптивности под каждое разрешение монитора присутствуют тоже.

Данная статья относится к версиям конструктора 10, 11, 12, 13 , 14, 15, 16

Руководство по WYSIWYG Web Builder

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

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

• Визуальное проектирование сайта (What-You-See-Is-What-You-Get).
• Не требуется знаний HTML! Просто перетащите объекты на страницу!
• Стандартные выходы HTML4, HTML5, XHTML, CSS3, PHP.
• Поддержка шаблонов (100+).
• HTML5 Аудио/Видео, YouTube, Flash, Видео и многое другое!
• Слайд-шоу, фото галереи, замещающие изображения, ролловер текст.
• Навигационные панели, Меню и многие другие навигационные функции.
• Интернет панель администратора добавлять / редактировать / копировать и удалять страницы.
• Встроенная поддержка нескольких популярных редакторов, как CKEditor, TinyMCE и CLEditor.
• Использование отдельных «дизайн блоков для оптимальной гибкости, что позволяет легко интегрировать ее в существующие макеты.
• Отдельное меню CMS объект для перемещения между интернет-страницами. В меню есть множество настраиваемых параметров.
• Встроенные функции поиска для поиска онлайн-контента.
• Поддержка AJAX позволяет пользователю быстро перемещаться между страницами, не придется перезагружать всю страницу!
• CMS интегрируется с инструментами администрирования, вы можете назначить различные функции разным пользователям CMS, но и иметь глобальную администратора.
• CMS отслеживает просмотр страниц.
• Также поддерживает внешние страницы, так что вы можете смешивать онлайн-контента со стандартной страницы.
• Создавайте HTML5 / CSS3 сайты уже сегодня! HTML5 типа документа (HTML5 оптимизирован на выходе).
• HTML5 аудио / видео и YouTube поддержка HTML5.
• HTML5 и поддержку в форме и других инструментах для рисования.
• CSS3 непрозрачность, граница радиуса, тени.
• Маркированные списки: круг, диск, квадрат, числа (1, 2, 3), буквы (а, б, в), римские (I, II, III) и пользовательские изображения.
• Карта изображений.
• Панели навигации.
• Готовые к использованию Java скрипты.
• CSS3 градиенты. Добавить интересные эффекты градиент, используя родной CSS3 (без изображения).
• CSS3 навигационное меню. Создать удивительным меню без использования JavaScript или изображений.
• Специальные символы.
• Вращающиеся компоненты изображения (полезно для создания баннеров).
• Поддержка сторонних дополнений, используя инструмент расширения Builder.
• Импорт существующих HTML- страниц!
• Стили гиперссылок, чтобы настроить цвета / форматирования гиперссылок.
• Встроенный Frame компонент (IFRAME)
• В компоненте меню легко создать выпадающее меню навигации.
• Встроенные OLE компоненты.
• CSS3 фотогалерея.
• Создание веб-сайтов также легко с функцией Drag & Drop
• Простота создания форм с помощью встроенного в форме мастера плюс инструменты форм, проверки CAPTCHA.
• Расширенные средства графики как формы, textArt, вращение, тени и многие другие эффекты изображения.
• Полностью интегрированный JQuery UI (аккордеон, вкладки и т.д.), анимация, эффекты и встроенную поддержку ThemeRoller.
• Google Sitemap Generator / PayPal электронная коммерция. Защита страниц паролем.
• Много средств навигации доступны: навигация, вкладки меню, выпадающие меню.
• Встроенное слайд-шоу, фото галерея, карта изображений, баннеров и т.д.
• Поддержка YouTube, Flash Video, Windows Media Player и другие видео форматы.
• Уникальные расширения (дополнения) системы, уже более чем 250 доступных расширений!
• И многое, многое другое…

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

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

Скачайте последнюю версию программы 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 9 изменился — наряду
со строкой меню стало возможным использовать ленту (см.
Лента ).

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

Чтобы открыть окно свойств сайта, в меню 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 Ленты большинство настроек
вставленных объектов расположено на соответствующих вкладках и разделах
Ленты.

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

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

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

— Grid
Направляющие линии — меню View

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

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 г.

WYSIWYG Web Builder — программа для создания сайта

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

Для тех, кто не обладает этими составляющими, можно воспользоваться простейшим способом —
заказать сайт-визитку, личный блог или лендинг на сайте
https://varavar.ru/prices/sayt-wizitka
. А для тех, кто готов самостоятельно поучаствовать в создании своего ресурса, я предлагаю познакомиться еще с одним инструментом для создания сайтов — программой WYSIWYG Web Builder, умеющей создавать красивые и функциональные проекты. Она вполне подходит для новичков, поскольку для работы с WYSIWYG Web Builder вам не потребуется знание HTML-разметки, PHP-кода, скриптов, которыми оперируют профессиональные веб-разработчики.

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

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

Данная программа имеет много встроенных инструментов для работы с текстами и изображениями. Если в Пейдже имеются только «зачатки» таких инструментов, то в WYSIWYG Web Builder они довольно продвинутые и позволяют оформлять контент на профессиональном уровне. Для тех, кто «вырос» из Пейджа, данная программа станет достойной заменой.

Также тем, кто не смог разобраться в тонкостях Adobe Muse, запутавшись в установке и настройках разных виджетов, рекомендую попробовать WYSIWYG Web Builder, тем более что к нему в Интернете есть масса уроков, как в текстовом формате, так и видеороликов. Ссылки на обучающие ресурсы найдете в конце статьи.

Кроме того, для WYSIWYG Web Builder есть готовые шаблоны, которые можно использовать как основу для создания собственных уникальных дизайнов, редактируя их по своему усмотрению. Также в программе имеются готовые java-скрипты для отображения текущей даты и времени, ссылок для занесения страницы в закладки, прыгающих букв, мигающего текста и т. д.

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

WYSIWYG Web Builder
— это оффлайновый конструктор сайтов, в котором можно создавать HTML-страницы и сайты без знания HTML, CSS, Javascript, PHP. Объекты страницы можно просто перетаскивать мышкой с панели элементов и задавать им нужные параметры в окне свойств. Вроде бы программа для домохозяек и ленивых школьников. Но на самом деле конструктор может пригодится и опытным вебразработчикам для предварительного быстрого макетирования, для ускорения процессов создания лендингов с адаптивной версткой, для настройки анимации, для встраивания готовых дизайнерских решений и даже для интеграции сайта с CMS.

Интерфейс конструктора

Интерфейс программы во многом похож на интерфейс среднестатистического векторного редактора или редактора деловой графики. Слева или сверху выбираем инструмент, с помощью которого создаем на странице объект. Перетаскиваем и масштабируем объект с помощью мыши. Выравниваем взаимное расположение с помощью направляющих и набора соответствующих кнопок. Справа в окне свойств производим тонкую настройку параметров объекта.
Слева в области Blocks есть готовые дизайнерские шаблоны.
Но, в отличие от векторного редактора, в WYSIWYG Web Builder можно не только рисовать графические фигуры и добавлять изображение с текстом, но располагать на странице большое количество HTML-элементов: меню, формы, галерею изображений, слайд-шоу, медиа объекты, виджеты…
Когда вы создаете многостраничный сайт, то в правой части интерфейса программы вам пригодится окно «Менеджер сайта», в котором будет отражаться структура сайта и предоставлены инструменты для оперирования страницами.
Центральная рабочая область снабжена линейками, что облегчает быстрое точное позиционирование элементов на странице. Если у вас есть макет страницы в PSD формате, то WYSIWYG Web Builder — одно из самых удобных решений для работы по созданию страницы по макету (см. видео в конце статьи).

Основные возможности

Возможности вёрстки

🔶 Формирование web-страницы из стандартных html-элементов (текстовые блоки, изображения, таблицы, фреймы, формы…)
🔶 Добавление на страницу медиа-объектов (видео, аудио, Flash, Java-объекты…)
🔶 Виджеты для работы и изображениями (галерея, слайд-шоу, коллаж…)
🔶 Плагины для расширения функционала (таймер, поиск по сайту, блог…)
🔶 Возможность добавить свой код на страницу (HTML, Javascript, Java…)
🔶 Готовые jQuery скрипты (гармошка, автодополнение, календарь, меню…)
🔶 Иконки из предустановленного набора
🔶 Рисование векторных фигур (линии, овалы, многоугольники…)
🔶 Выбор формата сохранения векторных фигур при публикации (svg, canvas, растр)
🔶 Возможность манипулировать элементами по событию
🔶 Возможность анимировать элементы (CSS, jQuery)
🔶 Таймлайн для анимации
🔶 Возможность использования web-шрифтов
🔶 Возможность управлять взаимным расположением элементов на странице (выравнивание на плоскости, ранжирование по глубине)
🔶 Работа со слоями
🔶 Добавление примечаний на страницу (не видны при публикации)
🔶 Проставление мета-тэгов страницы
🔶 Формирование адаптивного дизайна с помощью точек останова и/или сетки верстки
🔶 Проставление ссылок и анкоров
🔶 Элементы для работы с PayPal (добавления в корзину, покупки, пожертвования…)
🔶 Элементы администрирования сайта (форма авторизации и регистрации, смена пароля, досттуп к странице…)
🔶 Элементы для работы с CMS (администрирование, меню, поиск…)

Функциональные возможности

🔷 Просмотр сайта перед публикацией (открывается в браузере по-умолчанию)
🔷 Публикация сайта (на диске сохраняются html, css, js, медиа-файлы…)
🔷 Сохранение проекта (на диске сохраняется файл *.wbs и медиа-файлы для работы над сайтом в дискретном режиме)
🔷 Создание направляющих линий с возможностью «прилипания» к ним объектов страницы
🔷 Импорт существующих HTML-страниц
🔷 Автосохранение проекта
🔷 Резервное копирование проекта (в том числе по FTP)
🔷 Выбор темы интерфейса программы
🔷 Встроенный менеджер стилей
🔷 Встроенный валидатор ссылок
🔷 Встроенный менеджер материалов
🔷 Генерация карты сайта
🔷 Глобальная замена контекста по всем страницам сайта/проекта
🔷 Пакетная обработка свойств всех страниц
🔷 Настройка поиска по сайту

Особенности конструктора

При верстке страницы в интерфейсе программы HTML-код править нельзя, его можно только просмотреть. Однако после публикации вы можете редактировать все файлы сайта, что для знающего верстальщика будет полезно. Любой конструктор генерит избыточный код, но если говорить о WYSIWYG Web Builder, то его код можно охарактеризовать как умеренно избыточный, что выгодно отличает его от аналогов.
После нескольких удачных публикаций программа может сохранить страницы сайта с красным фоном и абракадаброй вместо title . Это очень легко правится в html-файле (отредактируйте текст между тэгами и ) и в css-файле (отредактируйте значение background-color в разделе body).

Скачать

К скачиванию предлагается портабельная версия WYSIWYG Web Builder 12.5 для Windows с поддержкой русского языка. Пароль для распаковки архива традиционный: сайт
Распакуйте архив и программа готова к применению — запускать надо файл WWB1223ZaPusk.exe .

Руководство по WYSIWYG Web Builder

​

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

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

• Визуальное проектирование сайта (What-You-See-Is-What-You-Get).
• Не требуется знаний HTML! Просто перетащите объекты на страницу!
• Стандартные выходы HTML4, HTML5, XHTML, CSS3, PHP.
• Поддержка шаблонов (100+).
• HTML5 Аудио/Видео, YouTube, Flash, Видео и многое другое!
• Слайд-шоу, фото галереи, замещающие изображения, ролловер текст.
• Навигационные панели, Меню и многие другие навигационные функции.
• Интернет панель администратора добавлять / редактировать / копировать и удалять страницы.
• Встроенная поддержка нескольких популярных редакторов, как CKEditor, TinyMCE и CLEditor.
• Использование отдельных «дизайн блоков для оптимальной гибкости, что позволяет легко интегрировать ее в существующие макеты.
• Отдельное меню CMS объект для перемещения между интернет-страницами. В меню есть множество настраиваемых параметров.
• Встроенные функции поиска для поиска онлайн-контента.
• Поддержка AJAX позволяет пользователю быстро перемещаться между страницами, не придется перезагружать всю страницу!
• CMS интегрируется с инструментами администрирования, вы можете назначить различные функции разным пользователям CMS, но и иметь глобальную администратора.
• CMS отслеживает просмотр страниц.
• Также поддерживает внешние страницы, так что вы можете смешивать онлайн-контента со стандартной страницы.
• Создавайте HTML5 / CSS3 сайты уже сегодня! HTML5 типа документа (HTML5 оптимизирован на выходе).
• HTML5 аудио / видео и YouTube поддержка HTML5.
• HTML5 и поддержку в форме и других инструментах для рисования.
• CSS3 непрозрачность, граница радиуса, тени.
• Маркированные списки: круг, диск, квадрат, числа (1, 2, 3), буквы (а, б, в), римские (I, II, III) и пользовательские изображения.
• Карта изображений.
• Панели навигации.
• Готовые к использованию Java скрипты.
• CSS3 градиенты. Добавить интересные эффекты градиент, используя родной CSS3 (без изображения).
• CSS3 навигационное меню. Создать удивительным меню без использования JavaScript или изображений.
• Специальные символы.
• Вращающиеся компоненты изображения (полезно для создания баннеров).
• Поддержка сторонних дополнений, используя инструмент расширения Builder.
• Импорт существующих HTML- страниц!
• Стили гиперссылок, чтобы настроить цвета / форматирования гиперссылок.
• Встроенный Frame компонент (IFRAME)
• В компоненте меню легко создать выпадающее меню навигации.
• Встроенные OLE компоненты.
• CSS3 фотогалерея.
• Создание веб-сайтов также легко с функцией Drag & Drop
• Простота создания форм с помощью встроенного в форме мастера плюс инструменты форм, проверки CAPTCHA.
• Расширенные средства графики как формы, textArt, вращение, тени и многие другие эффекты изображения.
• Полностью интегрированный JQuery UI (аккордеон, вкладки и т.д.), анимация, эффекты и встроенную поддержку ThemeRoller.
• Google Sitemap Generator / PayPal электронная коммерция. Защита страниц паролем.
• Много средств навигации доступны: навигация, вкладки меню, выпадающие меню.
• Встроенное слайд-шоу, фото галерея, карта изображений, баннеров и т.д.
• Поддержка YouTube, Flash Video, Windows Media Player и другие видео форматы.
• Уникальные расширения (дополнения) системы, уже более чем 250 доступных расширений!
• И многое, многое другое…

Руководство по WYSIWYG Web Builder

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

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

• Визуальное проектирование сайта (What-You-See-Is-What-You-Get).
• Не требуется знаний HTML! Просто перетащите объекты на страницу!
• Стандартные выходы HTML4, HTML5, XHTML, CSS3, PHP.
• Поддержка шаблонов (100+).
• HTML5 Аудио/Видео, YouTube, Flash, Видео и многое другое!
• Слайд-шоу, фото галереи, замещающие изображения, ролловер текст.
• Навигационные панели, Меню и многие другие навигационные функции.
• Интернет панель администратора добавлять / редактировать / копировать и удалять страницы.
• Встроенная поддержка нескольких популярных редакторов, как CKEditor, TinyMCE и CLEditor.
• Использование отдельных «дизайн блоков для оптимальной гибкости, что позволяет легко интегрировать ее в существующие макеты.
• Отдельное меню CMS объект для перемещения между интернет-страницами. В меню есть множество настраиваемых параметров.
• Встроенные функции поиска для поиска онлайн-контента.
• Поддержка AJAX позволяет пользователю быстро перемещаться между страницами, не придется перезагружать всю страницу!
• CMS интегрируется с инструментами администрирования, вы можете назначить различные функции разным пользователям CMS, но и иметь глобальную администратора.
• CMS отслеживает просмотр страниц.
• Также поддерживает внешние страницы, так что вы можете смешивать онлайн-контента со стандартной страницы.
• Создавайте HTML5 / CSS3 сайты уже сегодня! HTML5 типа документа (HTML5 оптимизирован на выходе).
• HTML5 аудио / видео и YouTube поддержка HTML5.
• HTML5 и поддержку в форме и других инструментах для рисования.
• CSS3 непрозрачность, граница радиуса, тени.
• Маркированные списки: круг, диск, квадрат, числа (1, 2, 3), буквы (а, б, в), римские (I, II, III) и пользовательские изображения.
• Карта изображений.
• Панели навигации.
• Готовые к использованию Java скрипты.
• CSS3 градиенты. Добавить интересные эффекты градиент, используя родной CSS3 (без изображения).
• CSS3 навигационное меню. Создать удивительным меню без использования JavaScript или изображений.
• Специальные символы.
• Вращающиеся компоненты изображения (полезно для создания баннеров).
• Поддержка сторонних дополнений, используя инструмент расширения Builder.
• Импорт существующих HTML- страниц!
• Стили гиперссылок, чтобы настроить цвета / форматирования гиперссылок.
• Встроенный Frame компонент (IFRAME)
• В компоненте меню легко создать выпадающее меню навигации.
• Встроенные OLE компоненты.
• CSS3 фотогалерея.
• Создание веб-сайтов также легко с функцией Drag & Drop
• Простота создания форм с помощью встроенного в форме мастера плюс инструменты форм, проверки CAPTCHA.
• Расширенные средства графики как формы, textArt, вращение, тени и многие другие эффекты изображения.
• Полностью интегрированный JQuery UI (аккордеон, вкладки и т.д.), анимация, эффекты и встроенную поддержку ThemeRoller.
• Google Sitemap Generator / PayPal электронная коммерция. Защита страниц паролем.
• Много средств навигации доступны: навигация, вкладки меню, выпадающие меню.
• Встроенное слайд-шоу, фото галерея, карта изображений, баннеров и т.д.
• Поддержка YouTube, Flash Video, Windows Media Player и другие видео форматы.
• Уникальные расширения (дополнения) системы, уже более чем 250 доступных расширений!
• И многое, многое другое…

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

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

Скачайте последнюю версию программы 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 г.

WYSIWYG Web Builder — программа для создания сайта

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

Для тех, кто не обладает этими составляющими, можно воспользоваться простейшим способом —
заказать сайт-визитку, личный блог или лендинг на сайте
https://varavar.ru/prices/sayt-wizitka
. А для тех, кто готов самостоятельно поучаствовать в создании своего ресурса, я предлагаю познакомиться еще с одним инструментом для создания сайтов — программой WYSIWYG Web Builder, умеющей создавать красивые и функциональные проекты. Она вполне подходит для новичков, поскольку для работы с WYSIWYG Web Builder вам не потребуется знание HTML-разметки, PHP-кода, скриптов, которыми оперируют профессиональные веб-разработчики.

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

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

Данная программа имеет много встроенных инструментов для работы с текстами и изображениями. Если в Пейдже имеются только «зачатки» таких инструментов, то в WYSIWYG Web Builder они довольно продвинутые и позволяют оформлять контент на профессиональном уровне. Для тех, кто «вырос» из Пейджа, данная программа станет достойной заменой.

Также тем, кто не смог разобраться в тонкостях Adobe Muse, запутавшись в установке и настройках разных виджетов, рекомендую попробовать WYSIWYG Web Builder, тем более что к нему в Интернете есть масса уроков, как в текстовом формате, так и видеороликов. Ссылки на обучающие ресурсы найдете в конце статьи.

Кроме того, для WYSIWYG Web Builder есть готовые шаблоны, которые можно использовать как основу для создания собственных уникальных дизайнов, редактируя их по своему усмотрению. Также в программе имеются готовые java-скрипты для отображения текущей даты и времени, ссылок для занесения страницы в закладки, прыгающих букв, мигающего текста и т. д.

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

WYSIWYG Web Builder
— это оффлайновый конструктор сайтов, в котором можно создавать HTML-страницы и сайты без знания HTML, CSS, Javascript, PHP. Объекты страницы можно просто перетаскивать мышкой с панели элементов и задавать им нужные параметры в окне свойств. Вроде бы программа для домохозяек и ленивых школьников. Но на самом деле конструктор может пригодится и опытным вебразработчикам для предварительного быстрого макетирования, для ускорения процессов создания лендингов с адаптивной версткой, для настройки анимации, для встраивания готовых дизайнерских решений и даже для интеграции сайта с CMS.

Интерфейс конструктора

Интерфейс программы во многом похож на интерфейс среднестатистического векторного редактора или редактора деловой графики. Слева или сверху выбираем инструмент, с помощью которого создаем на странице объект. Перетаскиваем и масштабируем объект с помощью мыши. Выравниваем взаимное расположение с помощью направляющих и набора соответствующих кнопок. Справа в окне свойств производим тонкую настройку параметров объекта.
Слева в области Blocks есть готовые дизайнерские шаблоны.
Но, в отличие от векторного редактора, в WYSIWYG Web Builder можно не только рисовать графические фигуры и добавлять изображение с текстом, но располагать на странице большое количество HTML-элементов: меню, формы, галерею изображений, слайд-шоу, медиа объекты, виджеты…
Когда вы создаете многостраничный сайт, то в правой части интерфейса программы вам пригодится окно «Менеджер сайта», в котором будет отражаться структура сайта и предоставлены инструменты для оперирования страницами.
Центральная рабочая область снабжена линейками, что облегчает быстрое точное позиционирование элементов на странице. Если у вас есть макет страницы в PSD формате, то WYSIWYG Web Builder — одно из самых удобных решений для работы по созданию страницы по макету (см. видео в конце статьи).

Основные возможности

Возможности вёрстки

🔶 Формирование web-страницы из стандартных html-элементов (текстовые блоки, изображения, таблицы, фреймы, формы…)
🔶 Добавление на страницу медиа-объектов (видео, аудио, Flash, Java-объекты…)
🔶 Виджеты для работы и изображениями (галерея, слайд-шоу, коллаж…)
🔶 Плагины для расширения функционала (таймер, поиск по сайту, блог…)
🔶 Возможность добавить свой код на страницу (HTML, Javascript, Java…)
🔶 Готовые jQuery скрипты (гармошка, автодополнение, календарь, меню…)
🔶 Иконки из предустановленного набора
🔶 Рисование векторных фигур (линии, овалы, многоугольники…)
🔶 Выбор формата сохранения векторных фигур при публикации (svg, canvas, растр)
🔶 Возможность манипулировать элементами по событию
🔶 Возможность анимировать элементы (CSS, jQuery)
🔶 Таймлайн для анимации
🔶 Возможность использования web-шрифтов
🔶 Возможность управлять взаимным расположением элементов на странице (выравнивание на плоскости, ранжирование по глубине)
🔶 Работа со слоями
🔶 Добавление примечаний на страницу (не видны при публикации)
🔶 Проставление мета-тэгов страницы
🔶 Формирование адаптивного дизайна с помощью точек останова и/или сетки верстки
🔶 Проставление ссылок и анкоров
🔶 Элементы для работы с PayPal (добавления в корзину, покупки, пожертвования…)
🔶 Элементы администрирования сайта (форма авторизации и регистрации, смена пароля, досттуп к странице…)
🔶 Элементы для работы с CMS (администрирование, меню, поиск…)

Функциональные возможности

🔷 Просмотр сайта перед публикацией (открывается в браузере по-умолчанию)
🔷 Публикация сайта (на диске сохраняются html, css, js, медиа-файлы…)
🔷 Сохранение проекта (на диске сохраняется файл *.wbs и медиа-файлы для работы над сайтом в дискретном режиме)
🔷 Создание направляющих линий с возможностью «прилипания» к ним объектов страницы
🔷 Импорт существующих HTML-страниц
🔷 Автосохранение проекта
🔷 Резервное копирование проекта (в том числе по FTP)
🔷 Выбор темы интерфейса программы
🔷 Встроенный менеджер стилей
🔷 Встроенный валидатор ссылок
🔷 Встроенный менеджер материалов
🔷 Генерация карты сайта
🔷 Глобальная замена контекста по всем страницам сайта/проекта
🔷 Пакетная обработка свойств всех страниц
🔷 Настройка поиска по сайту

Особенности конструктора

При верстке страницы в интерфейсе программы HTML-код править нельзя, его можно только просмотреть. Однако после публикации вы можете редактировать все файлы сайта, что для знающего верстальщика будет полезно. Любой конструктор генерит избыточный код, но если говорить о WYSIWYG Web Builder, то его код можно охарактеризовать как умеренно избыточный, что выгодно отличает его от аналогов.
После нескольких удачных публикаций программа может сохранить страницы сайта с красным фоном и абракадаброй вместо title . Это очень легко правится в html-файле (отредактируйте текст между тэгами и ) и в css-файле (отредактируйте значение background-color в разделе body).

Скачать

К скачиванию предлагается портабельная версия WYSIWYG Web Builder 12.5 для Windows с поддержкой русского языка. Пароль для распаковки архива традиционный: сайт
Распакуйте архив и программа готова к применению — запускать надо файл WWB1223ZaPusk.exe .

Руководство по WYSIWYG Web Builder

​

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

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

• Визуальное проектирование сайта (What-You-See-Is-What-You-Get).
• Не требуется знаний HTML! Просто перетащите объекты на страницу!
• Стандартные выходы HTML4, HTML5, XHTML, CSS3, PHP.
• Поддержка шаблонов (100+).
• HTML5 Аудио/Видео, YouTube, Flash, Видео и многое другое!
• Слайд-шоу, фото галереи, замещающие изображения, ролловер текст.
• Навигационные панели, Меню и многие другие навигационные функции.
• Интернет панель администратора добавлять / редактировать / копировать и удалять страницы.
• Встроенная поддержка нескольких популярных редакторов, как CKEditor, TinyMCE и CLEditor.
• Использование отдельных «дизайн блоков для оптимальной гибкости, что позволяет легко интегрировать ее в существующие макеты.
• Отдельное меню CMS объект для перемещения между интернет-страницами. В меню есть множество настраиваемых параметров.
• Встроенные функции поиска для поиска онлайн-контента.
• Поддержка AJAX позволяет пользователю быстро перемещаться между страницами, не придется перезагружать всю страницу!
• CMS интегрируется с инструментами администрирования, вы можете назначить различные функции разным пользователям CMS, но и иметь глобальную администратора.
• CMS отслеживает просмотр страниц.
• Также поддерживает внешние страницы, так что вы можете смешивать онлайн-контента со стандартной страницы.
• Создавайте HTML5 / CSS3 сайты уже сегодня! HTML5 типа документа (HTML5 оптимизирован на выходе).
• HTML5 аудио / видео и YouTube поддержка HTML5.
• HTML5 и поддержку в форме и других инструментах для рисования.
• CSS3 непрозрачность, граница радиуса, тени.
• Маркированные списки: круг, диск, квадрат, числа (1, 2, 3), буквы (а, б, в), римские (I, II, III) и пользовательские изображения.
• Карта изображений.
• Панели навигации.
• Готовые к использованию Java скрипты.
• CSS3 градиенты. Добавить интересные эффекты градиент, используя родной CSS3 (без изображения).
• CSS3 навигационное меню. Создать удивительным меню без использования JavaScript или изображений.
• Специальные символы.
• Вращающиеся компоненты изображения (полезно для создания баннеров).
• Поддержка сторонних дополнений, используя инструмент расширения Builder.
• Импорт существующих HTML- страниц!
• Стили гиперссылок, чтобы настроить цвета / форматирования гиперссылок.
• Встроенный Frame компонент (IFRAME)
• В компоненте меню легко создать выпадающее меню навигации.
• Встроенные OLE компоненты.
• CSS3 фотогалерея.
• Создание веб-сайтов также легко с функцией Drag & Drop
• Простота создания форм с помощью встроенного в форме мастера плюс инструменты форм, проверки CAPTCHA.
• Расширенные средства графики как формы, textArt, вращение, тени и многие другие эффекты изображения.
• Полностью интегрированный JQuery UI (аккордеон, вкладки и т.д.), анимация, эффекты и встроенную поддержку ThemeRoller.
• Google Sitemap Generator / PayPal электронная коммерция. Защита страниц паролем.
• Много средств навигации доступны: навигация, вкладки меню, выпадающие меню.
• Встроенное слайд-шоу, фото галерея, карта изображений, баннеров и т.д.
• Поддержка YouTube, Flash Video, Windows Media Player и другие видео форматы.
• Уникальные расширения (дополнения) системы, уже более чем 250 доступных расширений!
• И многое, многое другое…

Приветствуем вас! WYSIWYG Web Builder-позволяет создавать профессиональные веб-страницы HTML и jQuery. У конструктора есть функции, позволяющие создавать страницы с использованием блоков, макетов сетки, а также кодирования для продвинутых пользователей.

WYSIWYG Web Builder имеет инновационную модель макета для CSS под названием Flexbox, которая представляет собой мощный способ выравнивания и распределения объектов.

Эта функция позволяет настраивать макеты, которые могут быть созданы с помощью GUI или путем кодирования.

Builder — это удобное для пользователя приложение. WYSIWYG Web Builder позволяет создавать веб-проекты на основе CSS без знания HTML.

Вы можете просто перетаскивать элементы страницы с места на место, добавлять изображения, текст, веб-формы, вставлять Active X, Java и другие продвинутые элементы.

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

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

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

Некоторые плагины, которые могут быть полезны при создании веб-сайтов, включая адаптивное выпадающее меню, корзину Paypalmini, соединитель MySQL и т. д.

Обзор функций WYSIWYG Web Builder

WYSIWYG Web Builder имеет инструменты как для начинающих, так и для профессиональных дизайнеров / разработчиков:

• Адаптивный веб-дизайн. Встроенная поддержка сетки макета, flexbox, сетки css или фиксированных макетов с точками останова. Web Builder облегчает пользователям создание адаптивных веб-сайтов без знания HTML.
• Добавление совершенно любого веб-шрифта на сайт.
• Включено более 150 предустановленных анимаций.
• Используйте готовые блоки, чтобы быстро начать работу. Доступно более 150 блоков.
• Поддержка шрифтов Awesome, Material Icons и многих других библиотек иконок.
• Сотни расширений для добавления дополнительных функций в программное обеспечение. Включая слайд-шоу, навигацию, аудио / видео, веб-камеры, просмотрщики данных и т. д.
• Перетаскивайте объекты из панели инструментов на странице в любом месте!
• Мастер форм. Большое количество готовых форм.
• Объект Captcha для (PHP) форм.
• Вставка собственных HTML или Javascripts.
• Встроенный FTP-клиент для управления вашими онлайн-файлами.
• Фотогалерея с множеством интересных функций, таких как рамки для картин, поддержка слайд-шоу, лайтбокс: slimbox, prettyphoto, fancybox.
• Навигационные панели, меню вкладок, меню слайдов Mega Menu и многие другие варианты навигации.
• Поддержка шаблонов. Уже доступно более 200 шаблонов!
• Поддержка сторонних надстроек (расширений. Доступно более 250 расширений!
• Инструменты изображения: контрастность, яркость, оттенок / насыщенность, отражение, поворот, трафареты и т.д.
• Инструмент WaterMark для изображения с множеством опций.
• Инструменты рисования: линии + стрелки, пиктограмма, многоугольник, кривая и т.д.
• Поворот изображений и фигур.
• Объект RSS-канала с опцией подкаста.
• Генератор Sitemap.
• Инструменты входа / Защита паролем страницы.
• Поиск по сайту, легко добавить функциональность поиска сайта на ваш сайт.
• Текст RollOver, отображает текстовый баннер поверх изображения с помощью мыши. Включает в себя прохладные эффекты слайда и затухания.

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

С уважением Вячеслав и Валерия!

Понравился материал? Поделитесь с друзьями!