Конструктор html5: Google выпустил HTML5-редактор для веб-дизайна / Habr – Визуальный конструктор HTML-форм? — Хабр Q&A

Бесплатность

Персональная версия программы позволяет создать и поддерживать HTML сайт абсолютно бесплатно.

Скриншоты

Основное окно программы

Просмотр в режиме смартфона

Встроенный фоторедактор

10 полезных инструментов для работы с HTML5. Редакторы, конструкторы HTML5.

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

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

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

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

График совместимости браузеров с HTML5/CSS3. Он интерактивен и предлагает функции для проверки, какие браузеры поддерживают тот или иной элемент, а какие нет. Вы можете фильтровать определенные результаты, и проверять, какую поддержку следует ожидать от устройств. Если вы хоть чуть-чуть знакомы с HTML5, но хотите изучить технологию подробнее, и применить ее на практике, этот инструмент может очень вам пригодиться.

Это ПО для разработки веб-страниц, которое чем-то напоминает функционал CMS, потому что здесь вы получаете то, что видите. Инструмент позволяет вам быстро набрасывать CSS-таблицы, создавать классы, id, и многое другое. И все это реализуется всего при помощи одного спрайт-изображения. Здесь используется фоновое позиционирование для расположения определенных областей спрайта, и создаются блочные элементы для страницы. Стоит отметить, что инструмент бесплатный, и при этом позволяет вам быстрее и проще справиться с созданием HTML5-страниц.

Этот инструмент позволяет вам создавать HTML5-код с использованием кросс-браузерного элемента audio. Инструмент очень удобен, так как был заранее подготовлен для выполнения различных задач, и при этом он предлагает вам множество цветов и шаблонов, из которых можно выбрать что-нибудь подходящее. Если вы взглянете на сайт, то увидите на что способен этот инструмент. Стоит отметить, что некоторые элементы будут вам незнакомы, если только начинаете работать в сфере разработки.

Это HTML5-видеоплеер, который позволяет вам встраивать код таким образом, чтобы люди могли по нему кликать. Он также допускает использование Javsacript-библиотеки, и у вас есть возможность разрабатывать собственные CSS/HTML-шаблоны для ваших видеороликов. К тому же, вы сможете воспроизводить видео на любом устройстве, даже если они не поддерживают Javascript, так как данный плеер основан на HTML5-технологии. Это очень отличный инструмент, который поможет вам извлечь выгоду от публикации видеороликов при помощи технологии HTML5.

Это многофункциональный редактор, разработанный при помощи HTML5. Здесь предусмотрены подход с прогрессивным внедрением изменением, и это может оказаться именно тем, что вам нужно в процессе разработки. Здесь представлена хорошая семантическая HTML5-разметка и используются имена классов, что облегчает рабочий процесс. Если у вас есть Google Chrome, то вы можете воспользоваться преимуществом ввода текста при помощи речи, правда технологию пока еще сложно называть завершенной.

Этот инструмент представляет собой генератор спрайтов для HTML5. Он позволяет вам перетаскивать файлы на плоскость, и затем, посредством нажатия кнопки, создавать спрайты и таблицы стилей. Он все еще находится на стадии разработки и доработки, и на данный момент работает только в Firefox и Chrome, но вам обязательно стоит оценить его. Он очень прост в использовании и позволит вам сэкономить уйму времени на разработке собственных веб-сайтов на HTML5.

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

Источник: http://supreme2.ru/

Алексей Повловский

Конструкторы сайтов — Часть 2

Хотите создавать сайты без знания кода? Здесь собраны лучшие конструкторы сайтов. Сейчас существует очень много разных конструкторов, но действительно хороших не так много. Первым делом необходимо смотреть позволяет ли конструктор создавать сайты в последней версии HTML, то есть HTML5. И второе требование — это выбор такого сервиса, который действительно упрощает процесс создания дизайна сайта и позволяет создавать не только одностраничники без знания кода.

Первую часть статьи смотрите по ссылке — Конструкторы сайтов.

А также посмотрите альтернатику лендингам и сайтам — квиз сайты.

1. IM Creator

• Этот сервис является бесплатным и имеет ряд шаблонов на выбор

Сервис IM Creator был создан в 2011 году и очень быстро стал одним из лидеров по созданию сайтов на HTML5. IM Creator имеет большую коллекцию шаблонов по умолчанию, которые отсортированы по категориям.

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

2. SquareSpace

• Есть пробная версия, чтобы посмотреть подходит ли этот сервис для вас

SquareSpace — это сервис, который позволяет создавать красивые сайты на HTML5 в считанные минуты.

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

Этот сервис является платным, но его можно использовать бесплатно (пробную версию) с ограниченными возможностями.

3. Dunked

• Dunked позволяет создавать адаптивный дизайн для сайта даже не прикасаясь к коду

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

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

4. Strikingly

• Сайты, созданные с помощью данного сервиса, являются хорошо оптимизированными для поисковых машин

Strikingly — это конструктор сайтов на HTML5, который вы можете использовать для создания красивых шаблонов. Но эти шаблоны не только очень привлекательно, но и адаптивны(правильно смотрятся как на маленьких экранах, так и на больших). А также очень быстрые, что касается загрузки.

5. Easy WebContent

• Easy WebContent только недавно начал поддерживать HTML5

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

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

Этот сервис позволяет добавлять изображения, HD видео, аудиозаписи другие файлы на свой сайт.

6. Weebly

• Как и прошлые конструкторы, этот также поддерживает разработку сайтов на HTML5

Данный сервис является одним из «новичков» в области создания сайтов на HTML5.

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

7. Moonfruit

• Бесплатный сервис для создания сайтов

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

Moonfruit это сервис, который позволяет создавать сайты на HTML5 с минимальными усилиями. Как и в прошлых конструкторах, все шаблоны являются полностью адаптивными для мобильных устройств.

8. Breezi

• Здесь вы найдете шаблон, наиболее соответствующий вашим нуждам

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

Шаблоны являются полностью адаптивными для всех видов экранов. Также для редактирования шаблонов можно использовать редактор Breezi.

Вывод

Здесь я рассмотрел еще несколько сервисов, которые позволяют создавать полностью адаптивные сайты на HTML5 без профессиональных знаний.

Успехов!

С Уважением, Юрий Немец

Как мы сделали первый в рунете конструктор HTML5 баннеров

Такой себе, мини-фотошоп в браузере.

Вы уверены, что он первый в рунете? А то достаточно громкое заявление )

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

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

Если уж зашла речь о конкурентах, то чем собираетесь их бить?

Я дизайнер и владелец дизайн-студии, поэтому обращаю большое внимание на внешний вид и удобство интерфейсов. Когда мы начали разработку, у всех наших конкурентов были довольно страшненькие, устаревшие интерфейсы. «УРА!» — подумал я, ведь мы сделали зашибенный и удобный canva-like интерфейс. Но время идет, и конкуренты начали обновлять свои сервисы, так что в этом плане, увы, конкурировать будет сложно.

Вообще идея такова, что секретарь Нюра из Глуходальнинска зашла на наш сервис и по поручению директора за 15 минут сделала для компании крутой баннер. Даже не сделала, а выбрала из 1000 шаблонов тот, который наиболее им подходит. А ребята из веб-студии «Быстродел» зашли и сделали для клиента по-быстрому пакован баннеров с готовыми ресайзами. Ну вот так.

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

Как вы вообще додумались его сделать?

Мы делали баннеры для своих студийных продуктов, это готовые решения для 1С-Битрикс. Поскольку флеш умирал, я не хотел делать баннеры на флеше, а начал искать подходящие аналоги. Скачал Google Web Designer, который сейчас типа наш конкурент, зашел, ужаснулся, и закрыл. И это, заметьте, я работаю дизайнером лет так с 14-ти, работал практически со всеми графическими программами, но, блин, реально сложно разобраться.

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

И правда, ведь в основном не надо супер-навороченной функциональности. Тексты, картинки, кнопки, анимация. Я обрадовался и сразу подумал что надо сделать такой сервис на русском и для местной публики.

Откуда такое странное название придумалось, BannerBoo?

Я уже не помню первоначальные идеи, но в названии нужно, чтобы было слово «banner». Это хорошо для поисковиков и вообще, для быстрого понимания, о чем сервис. Помню, мы остановились было на похожем «BannerBee», но домен .com был занят и выкупить его стоило несколько тысяч долларов. Так что с легкой нашей руки «BannerBee» превратился в «BannerBoo», нам понравилось, так и оставили ).

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

Да правда ). Мы уже три статьи наклепали и в каждой мы говорим о том же ). Но есть нюансы, и они важные.

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

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

Третье — эффективность адблокеров переоценивают. Да, есть статистика, что больше 40% людей во всем мире отключают рекламу, но есть и такие моменты:

• все больше крупных игроков интернет-рынка (Facebook) выражают свое недовольство программами блокировки рекламы. Соответственно, они имеют вес, чтобы влиять на индустрию и лоббировать свои интересы
• появились программы, которые обходят блокираторы и все равно показывают рекламу (Page Fair)
• cами блокираторы рекламы (например AdBlock Plus) идут на уступки и создают новые стандарты для рекламы, при которых она будет показываться даже с включенным блокиратором
• блокираторы рекламы в мобильных браузерах только начинают появляться, а в нативных приложениях вы не заблокируете их никак.

Так что это все — уравнение со многими неизвестными. Будет развиваться рынок, будем развиваться и меняться мы. Тем более планов по развитию у нас ого-го.

Отлично. Почти переубедили. Ну давайте про планы, раз начали.

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

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

Дайте цифры какие-то. Посещения, доходы, расходы, инвестиции.

Мы закрытую альфу запустили 28 апреля 2016. То есть около 4 месяцев назад. Бета-версию — 10 августа, чуть больше месяца назад. В месяц пока к нам приходит около 1000 посетителей, рекламу никакую мы не давали, приходят с органического поиска. Сейчас, когда начали публиковаться на Spark.ru, посещение возросло — в день публикации статьи набегает до 200 человек. Регистрации на сервисе тоже вырастают — если в среднем около 10 регистраций в день, то после публикации их число может вырастать до 50-ти.

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

Доходов нет пока — это понятно ). Мы не будем делать сервис платным, пока не допилим полноценный релиз. Но даже после этого мы сделаем «forever free» тариф — с некоторыми ограничениями, но бесплатный. Тем пользователям, которые будут зарегистрированы у нас до выпуска финальной версии, мы подарим пол года бесплатного сервиса без ограничений.

Расходы не считали еще, но пока тянем ). Доходы студии позволяют держать проект на плаву, да и сотрудников пока немного, так что все терпимо. Инвестиции тоже пока не ищем — хотя я понимаю, что они могли бы придать ускорение для развития проекта.

Ага, вот и до сотрудников добрались. Сколько вас работает над проектом?

Раз-два и обчелся ). У проекта два сооснователя, это я и Надя Юзькова, full-stack программист и просто отличный человек ). Собственно благодаря ей все и стало возможным, потому что потянуть большую команду на стадии развития очень сложно. Говорят, что у стартапа должно быть минимум два кофаундера, потому что по-другому инвесторы не сильно любят, так что у нас в этом плане все хорошо. Она — технический специалист, я больше по дизайну и общей идеологии ). Кроме этого, есть дизайнер, который делает шаблоны баннеров прямо в сервисе и ресайзит их, иногда этим занимаюсь я — для души. Ну и понятно, что на подхват есть около 10 сотрудников студии, которых можно привлечь в случае крайней необходимости.

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

Да, вам не кажется довольно странным, что вы берете интервью сам у себя?

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

Отлично! Тогда желаю удачи и жму вашу правую… Нет это моя правая — жму вашу левую руку! Пишите еще!

Беседовал с собой Михаил Хейна, сооснователь и руководитель Bannerboo.com

Конструктор сайтов HTML WebSite X5 Evolution 10

В предыдущей статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 5). Создание веб сайтов» мы продолжили рассмотрение объектов, которые предоставляет конструктор сайтов HTML. В этой статье мы завершим их рассмотрение.

Объекты

Карта

В статье «Обзор Incomedia WebSite X5 10 Free (часть 4). Бесплатный конструктор сайтов» мы уже познакомились с новым, для десятой версии программы, объектом Карта (рисунок ниже). Рассмотрим новые опции. Также предлагаю Вам ознакомиться с видео уроком, в котором есть пример использования данного объекта.

Создание интернет сайтов для организаций, как правило, требует указания адреса организации, и хорошим тоном станет отображение этого адреса на карте. В отличие от Free версии в Website Evolution доступно три вида «экранов» карты (опция Экран).

1. Карта.
2. Street View.
3. Street View и Карта.

Режим Карта (рисунок выше) позволяет отображать «обычную» схематическую карту.

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

Конструктор сайтов HTML позволяет совместить в одной области просмотра два типа просмотра – Street View и Карта (рисунок ниже).

Как видите, Incomedia WebSite X5 Evolution 10 обладает  более расширенными настройками объекта Карта, чем Free версия.

Flash-анимация

В статье «Обзор Incomedia WebSite X5 10 Free (часть 4). Бесплатный конструктор сайтов» была рассмотрена вкладка Основной объекта Flash-анимация (рисунок ниже).

Website Evolution предлагает дополнительные возможности по работе с flash анимацией. На вкладке Эксперт (рисунок ниже) Вы сможете добавить дополнительные файлы и папки, которые необходимы для корректной работы flash анимации. Например, если flash выполнен не одним файлом, а состоит из нескольких, то вы можете «подключить» их на свой сайт.

Website X5 Evolution позволяет «связывать» файлы, необходимые для корректной работы flash, непосредственно, самой страницей сайта. В некоторых случаях это позволит улучшить внешний вид страницы и сохранить логику работы flash файла. Для этого Вам достаточно нажать на кнопку Добавить (рисунок ниже) и в поле Связанные файлы для загрузки на сервер указать те файлы, которые необходимо загрузить на сервер для нормальной работы flash. В поле Относительный путь к серверу Вам необходимо указать имя директории, в которую следует загружать выбранные файлы. Опция Связать файл со страницей (только для .js и .css) позволит Вам поместить код файлов JS и CSS вашего flash объекта, если такие есть, в тело страницы сайта в секцию HEAD.

Website X5 позволяет задать папку на сервере, в которую, по умолчанию, будут загружаться все файлы SWF (опция Путь для выгрузки Flash-файла).

Список продуктов

Создание интернет сайтов коммерческого характера может предполагать продажу каких-то товаров непосредственно на сайте. В статье «Обзор WebSite Evolution 10 (часть 2). Конструктор сайтов» мы уже затрагивали средства электронной коммерции, которые предоставляет конструктор сайтов HTML. Как создавать товары, а также другие настройки инструментов интернет магазина на Incomedia WebSite X5 Evolution 10 мы рассмотрим в статье «Обзор WebSite Evolution 10 (часть 9). Создание сайта своими руками». Объект Список продуктов (рисунок ниже) позволяет размещать на странице сайта уже созданные товары для того, чтобы посетители сайта могли их рассмотреть и купить. Предлагаю Вам ознакомиться с видео уроком, в котором показано как работать с данным объектом.

Incomedia предусмотрела возможность сортировки товаров в нужном Вам порядке. Доступны следующие направления сортировки:

• Свои настройки. Можно выставить товары в той последовательности, которая Вам нужна. При помощи кнопок Вверх и Вниз.
• Имя. Сортировка по имени товара.
• Категория. Сортировка по имени категории товара.
• Цена. Сортировка по стоимости товара.

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

Incomedia Website содержит дополнительные настройки, которые позволяют произвести более тонкую настройку страницы с товарами. Они собраны на вкладке Настройки (рисунок выше). В 11-й версии появилась возможность добавления товара в корзину без необходимости каждый раз переходить в неё.

Режим отображения. Доступно пять режимов отображения товаров:

1. Только текст.
2. Изображение и текст.
3. Текст и изображение.
4. Только картинки.
5. Чередовать картинки и текст.

На рисунке ниже показаны пять типов отображения товара на странице в порядке списка выше.

Incomedia Website X5 позволяет задать количество товаров в одной строке на странице сайта (опция Количество кадров в строке).

Высота кадра. Высота области «карточки» товара в пикселях.

Ширина изображения (%). Ширина изображения товара в процентах от общей ширины области объекта Список продуктов.

Внутреннее поле. Отступ в пикселях от содержимого «карточки» товара до границы области объекта Список продуктов.

Цвет текста. Цвет шрифта описания товара.

Цвет фона. Цвет фона карточки товара. Возможна прозрачность.

Шрифт. Данные опции позволяют задать кегль, гарнитуру и начертание шрифта описания товара.

Толщина рамки. Толщина обводки «карточки» товара в пикселях. Можно задать разное значение для разных сторон.

Цвет. Цвет обводки «карточки» товара в пикселях. Возможна прозрачность. Можно задать разное значение для разных сторон.

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

Тень. Вы можете задать тень для «карточки» товара. Доступны опции: Цвет, Смещение по X, Смещение по Y, Диффузия, Размер.

Из спадающего списка Показать цену Incomedia WebSite X5 Evolution 10 позволяет Вам выбрать один из четырёх вариантов отображения цены:

1. С учётом налога.
2. Без учёта налога.
3. С учётом налога VAT info.
4. Без учёта налога VAT info.

VAT (от английского Value Added Tax) – это то же самое, что и НДС в России и Украине, но для стран европейского союза и Великобритании.

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

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

В новой версии программы в этом объекте появились новые возможности. О них Вы можете подробнее прочесть в статье «Обзор Incomedia WebSite X5 Professional 10 (часть 1). Создание статического сайта».

HTML и виджеты

В статье «Обзор WebSite Evolution 10 (часть 2). Конструктор сайтов» были  рассмотрены все доступные виджеты данного объекта. А в статье «Уроки WebSite X5 (часть 2)» Вы сможете прочесть о примере вставки стороннего слайдера на страницу сайта.

О новых виджетах Вы можете прочесть в статье «Обзор Incomedia WebSite X5 11 Professional. Программа для создания HTML сайтов».

Расширенные настройки

Создание интернет сайтов в Incomedia WebSite X5 Evolution 10, как уже говорилось ранее, разделено на пять этапов. Четвёртый – «Расширенные настройки».

На этом этапе Вам предлагается сделать более тонкую настройку Вашего сайта.

Главное меню

В статье «Обзор Incomedia WebSite X5 10 Free (часть 4). Бесплатный конструктор сайтов» уже были рассмотрены некоторые параметры раздела Главное меню (рисунок ниже). Рассмотрим только новые.

Об изменениях данного инструмента в новой версии программы Вы можете прочесть в статье «Обзор Website X5 v14. Новшества программы».

Вкладка Общие и Пункты меню аналогичны бесплатной версии. На вкладке 3D-стиль (рисунок выше) Вы можете настроить внешний вид самих пунктов меню.

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

1. Прямоугольник.
2. Скруглённый прямоугольник.
3. Скруглённый прямоугольник сверху.
4. Скруглённый прямоугольник снизу.
5. Скруглённый прямоугольник слева.
6. Скруглённый прямоугольник справа.
7. Скруглённый прямоугольник слева-сверху.
8. Скруглённый прямоугольник слева-снизу.
9. Скруглённый прямоугольник справа-сверху.
10. Скруглённый прямоугольник справа-снизу.
11. Бриллиант.
12. Бриллиант сверху.
13. Бриллиант снизу.
14. Бриллиант слева.
15. Бриллиант справа.
16. Бриллиант слева-сверху.
17. Бриллиант слева-снизу.
18. Бриллиант справа-сверху.
19. Бриллиант справа-снизу.
20. Круг.
21. Трапеция сверху.
22. Трапеция снизу.
23. Трапеция сверху слева.
24. Трапеция снизу справа.
25. Трапеция сверху справа.
26. Трапеция снизу справа.
27. Параллелограмм слева.
28. Параллелограмм справа.

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

Радиус закругления позволяет задать степень скругления углов пунктов меню. Опция Слияние форм кнопок сделает пункт меню в виде прямоугольника без скруглений и объединит все пункты меню в единую линию при условии. Данная опция работает в сочетании с такими опциями как Пропорции и Стиль рамки.

Конструктор сайтов HTML позволяет Вам задать особые эффекты оформления меню при помощи опции Пропорции. Можно задать один из тринадцати типов пропорции:

1. Плоский.
2. Плоский на подложке.
3. Фаска.
4. Вогнутая рамка.
5. Пластик.
6. Светящийся.
7. Гель.
8. Рельефный.
9. Стекло.
10. Светлый.
11. Офис 2003.
12. Офис 2007.
13. Vista.

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

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

1. Сверху – Слева.
2. Сверху.
3. Сверху – Справа.
4. Справа.
5. Снизу – Справа.
6. Снизу.
7. Снизу – Слева.
8. Слева.
9. По центру.

На рисунке ниже приведён пример различного направления света (в порядке следования их в списке выше) для пропорции Плоский на подложке.

Коэффициент градации (от 0 до 10) позволяет задать «чёткость» проявления градиента.

Непрозрачность изображения (от 1 до 100) позволяет задать степень прозрачности пункта меню.

Создание интернет сайтов, в целом, при помощи Incomedia WebSite X5 Evolution 10 — это пошаговый процесс. То же самое происходит при работе с каждым объектом. Вы пошагово меняете его настройки для достижения нужного результата.

Стиль рамки. Каждый пункт меню можно обвести ив рамку. Доступно четыре вида рамок.

1. Нет.
2. Обычный.
3. Фаска.
4. Вогнутая рамка.

На рисунке ниже показаны три примера рамок (со 2 по 4 из списка выше).

Опции Внешняя ширина и Внутренняя ширина позволяют задать ширину внешней и внутренней рамки вкладок меню в пикселях от 0 до 15.

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

Пример настройки стиля главного меню средствами Website Evolution Вы можете посмотреть на тестовом сайте.

Раскрывающееся меню

Очень часто создание интернет сайтов подразумевает наличие категорий и подкатегорий тем (разделов) сайта. Это должно быть отражено в меню. Incomedia WebSite X5 Evolution 10 при помощи расширенных настроек Стиль раскрывающегося меню (рисунок ниже) позволяет настроить внешний вид подменю.

Сам инструмент разделён на три вкладки.

1. Общие.
2. Пункты меню.
3. 3D-стиль. Данная вкладка аналогична вкладке 3D-стиль инструмента Главное меню, рассмотренного выше.

На вкладке Общие (рисунок выше) собраны основные настройки стилей раскрывающегося меню.

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

1. Расположить в один столбец.
2. Расположить в несколько столбцов.

Ширина. Ширина подпунктов меню в пикселях.

Поля. Отступ от текста пункта меню до края пункта меню в пикселях по горизонтали и вертикали.

Шрифт. Можно задать кегль, гарнитуру и начертание шрифта.

Выравнивание. Выравнивание надписей пунктов меню (Слева, По центру, Справа).

Эффект. Эффект появления и исчезновения подпунктов меню. Доступно пять.

1. Нет.
2. Исчезновение.
3. Эффект ухода вверх.
4. Эффект ухода влево.
5. Эффект ухода вверх и влево.

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

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

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

1. Пункт меню. Когда на него не наведён курсор мыши.
2. Элемент при наведении курсора мыши. Пункт меню, когда на него навели курсор мыши.
3. Разделитель. Оформление разделителя меню. Подробнее о том, каким образом можно создавать разделители, Вы можете прочесть в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 3). Создание сайтов».

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

• Цвет фона. Цвет фона подпункта меню.
• Цвет текста. Цвет текста надписи подпункта меню.
• Цвет рамки. Цвет обводки подпункта меню.
• Фоновое изображение. Incomedia WebSite X5 Evolution 10 в качестве фона позволяет задать изображение формата JPEG, JPG, GIF, PNG.
• Маркер списка. Можно отображать небольшое изображение формата JPEG, JPG, GIF, PNG рядом с каждым пунктом раскрывающегося меню.

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

В настройках элемента Разделитель присутствуют опции, рассмотренные выше.

В конце статьи «Обзор WebSite Evolution 10 (часть 10). Создание сайта HTML» Вы можете скачать файл проекта (*.IWZIP) тестового сайта к данному циклу статей.

Как видите, конструктор сайтов HTML Incomedia WebSite X5 Evolution 10 позволяет немного упростить работу путём применения одного стиля элемента сразу на всех страницах сайта. В следующей статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 7). Создание сайта с нуля» мы продолжим рассмотрение расширенных настроек программы и затронем такие как: Меню страницы, Стиль и модели, Страница приветствия и Рекламное сообщение.

Похожие материалы

Полезные ссылки: