Обзоры расширений Joomla

Видео уроки Website X5. Создание сайта с нуляВидео уроки Website X5. Создание сайта с нуля

Видео уроки на русском языке по самостоятельному созданию сайта с нуля в Incomedia Website X5 Evolution и Professional 12.

 

После заполнения основных настроек сайта, создания и редактирования шаблона (статья «Обзор Incomedia Website Х5 Evolution 9 (часть 1). Программа для создания HTML сайтов»), после разработки структуры, карты сайта, (статья «Обзор Incomedia Website Х5 Evolution 9 (часть 2). Программа для создания сайта)») идёт этап создания и наполнения самих страниц сайта содержимым. В качестве содержимого Вы можете использовать почти всё, что угодно (текст, видео, аудио, изображения, анимацию и так далее). Процесс создания страниц сайта в Incomedia Website Evolution можно условно разделить на три этапа.

  1. Создание модульной сетки страницы.
  2. Заполнение узлов модульной сетки объектами.
  3. Настройка и заполнение объектов содержимым.

В Incomedia Website X5 9 Evolution Вам доступно 9 объектов:

  1. Текст.
  2. Картинка.
  3. Таблица.
  4. Flash анимация.
  5. Видео и аудио.
  6. Галерея.
  7. Обратная связь.
  8. Список продуктов.
  9. HTML и виджеты.

В этой части статьи будут рассмотрены 4 объекта:

  1. Текст.
  2. Картинка.
  3. Таблица.
  4. Flash анимация.

Остальные объекты будут рассмотрены в следующей части. Инструменты и настройки, которые были рассмотрены в статье «Обзор Incomedia WebSite X5 9 Free (часть 2). Бесплатная программа для создания сайта», рассматриваться не будут. Поэтому перед тем, как приступить к прочтению возможностей Incomedia Website Evolution по созданию модульной сетки и настройкам объектов, рекомендую ознакомиться с этой главой.

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

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

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

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

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

  • Добавить контент выбранного объекта. Позволяет, нажав на определённый объект, расположенный в узлах сетки, перейти к его редактированию.
  • Формат ячейки. Позволяет настроить стиль отображения каждой отдельной ячейки более детально. Окно стиля ячейки (рисунок ниже) разделено на три вкладки: Стиль, Текст, Библиотека.

Стиль ячеек

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

Вкладка стиль

В качестве фона ячейки можно использовать изображение (JPG, GIF, PNG) (рисунок ниже). Можно задать повторение и выравнивание для изображения (данные опции были детально рассмотрены в статье «Обзор Incomedia Website Х5 Evolution 9 (часть 1). Программа для создания HTML сайтов»), насыщенность и непрозрачность цвета, а также задать в дополнение к изображению фоновый цвет.

Фон ячейки

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

Фоновое изображение

Для всех фонов можно задать границу (толщину и цвет).

Вкладка Текст (рисунок ниже) позволяет задать заголовок для каждой ячейки на странице. В тестовом сайте на главной странице слова «Обзор Incomedia Website X5 9 Free (часть 3)» в самом верху страницы под меню сделаны именно таким образом.

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

Самостоятельное создание сайта - это сложный процесс. Но данная программа его существенно упрощает. Как видно из рисунка выше Вам доступны настройки фона, цвета шрифта, его кегль и гарнитура, выравнивание (Слева, По центру, Справа), а также горизонтальное и вертикальное поле (в пикселях).

В качестве заголовка можно использовать изображение (JPG, GIF, PNG), задать ему выравнивание (Слева, По центру, Справа), а также горизонтальное и вертикальное поле (в пикселях). Это позволит Вам расширить возможности дизайна Вашего сайта.

Картинка заголовка

Вкладка Библиотека (рисунок ниже) содержит 21 стиль для оформления блока. Один из них Вы можете видеть на тестовом сайте. Стили можно добавлять самостоятельно на основании собственных настроек, что позволит применить одинаковый стиль для разных ячеек. Данная вкладка расширит Ваши возможности в дизайне сайта.

Вкладка Библиотека

Вернёмся к рассмотрению инструментов создания страниц.

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

Поля ячейки

Остальные инструменты были рассмотрены в статье «Обзор Incomedia WebSite X5 9 Free (часть 2). Бесплатная программа для создания сайта». Но ещё одним отличием Evolution версии от Free является то, что в Evolution Вы можете менять ширину столбцов при помощи маркеров под областью создания модульной сетки.

Объекты

Текст

В предыдущей статье «Обзор Incomedia WebSite X5 9 Free (часть 2). Бесплатная программа для создания сайта» были рассмотрены инструменты текстового редактора (Вырезать, Копировать, Вставить, Специальная вставка, Возврат, Вернуть, Вставить ссылку, Активировать HTML код, Выровнять содержимое по ширине ячейки, Подсветка затемнение фона, Шрифт, Размер шрифта, Жирный, Курсив, Подчёркнутый и так далее). В Incomedia Website X5 Evolution их больше (рисунок ниже).

Текст

  • Вставить изображение. Позволяет вставить непосредственно в тестовый объект файл изображения (JPG, GIF, PNG).
  • Выровнять текст по правому краю, По умолчанию, Выровнять текст по левому краю. Эти опции относятся к обтеканию текстом изображения. На тестовом сайте Вы можете видеть все три типа выравнивания рисунка.
  • Настройки Ролл-овера. Дают возможность настроить автоматическую (или «ручную») прокрутку длинного текста (рисунок ниже).

Настройки Ролл-овера

Вы можете выбрать один из пяти типов движения:

  1. Ничего – Показать Скроллербар. Это для «ручной» прокрутки пользователем текста.
  2. Один слайд.
  3. Непрерывный скроллинг.
  4. Альтернированный скроллинг.
  5. Скроллинг в секциях.

Для каждого типа, кроме Ничего – Показать Скроллербар, можно задать направление прокрутки (Справа, Слева, Снизу, Сверху), эффект (Линейный, Чередование, Колебание), для всех кроме Ничего – Показать Скроллербар и Непрерывный скроллинг, высоту (в пикселях) и длину (скорость в секундах. Для всех кроме Ничего – Показать Скроллербар). Также для всех автоматических прокруток можно задать остановку при наведении курсора мыши на текст. Пример непрерывного скроллинга с направлением сверху, скоростью 20 и остановкой при наведении Вы можете увидеть в тестовом сайте.

Картинка

Объект Картинка (рисунок ниже) позволяет вставлять в модульную сетку страницы различные изображения (JPG, GIF, PNG, PSD, BMP, TIF, DIB, PCX, RLE, TGA, WMF). Частично данный объект был рассмотрен в предыдущей статье «Обзор Incomedia WebSite X5 9 Free (часть 2). Бесплатная программа для создания сайта».

Объект Картинка

Рассмотрим дополнительные инструменты, доступные в Incomedia Website Evolution 9. Все настройки изображения разделены на три вкладки:

  1. Общие.
  2. Экран.
  3. Карта сайта.

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

  • Метод сжатия. Вы можете выбрать один из трёх методов сжатия изображения (Билинейный, Десятичный, Бикубический). Разница между этими методами заключается в серости, степени сжатия и качестве изображения. Оптимальный – Десятичный.
  • Защита. Позволяет защитить изображение от копирования путём скрытия его настоящего имени файла, помещения изображения во Flash объект и добавляя водяной знак. На тестовом сайте Вы можете видеть результат такой защиты. Обратите внимание на то, что при включении защиты изображения Вы не сможете добавить изображение в карту сайта. Также это помешает индексации изображения поисковыми системами.

Вы сможете воспользоваться простым редактором изображений, встроенным в Incomedia Website Х5 Evolution 9 (рисунок ниже).

Редактором изображений Incomedia Website Х5 Evolution 9

Он разделён на семь вкладок.

  1. Вырезать и повернуть.
  2. Фильтры.
  3. Водяной знак.
  4. Маска.
  5. Рамка.
  6. Эффекты.
  7. Библиотека.

Рассмотрим каждую из них более детально.

Вкладка Вырезать и повернуть позволяет выполнить поворот изображения (на 90, 180, 270 градусов), горизонтальное или вертикальное отражение и выполнить обрезку изображения.

Вкладка Фильтры (рисунок ниже) содержит 14 фильтров с разными настройками. Они помогут Вам изменить цветовое оформление (и не только) изображения

  1. Яркость/Контаст. Доступны опции настройки отдельно яркости, отдельно контраста.
  2. RGB. Доступны опции настройки интенсивности каждого канала (Красный, Зелёный, Синий).
  3. HSL. Доступны опции настройки интенсивности оттенка, насыщенности, яркости.
  4. Резкость. Доступны опции настрой резкости.
  5. Размытие. Доступны опции настрой уровня размытия.
  6. Чёрно-белое.
  7. Сепия.
  8. Мозаика. Доступны опции настрой размера «пазла».
  9. Портрет. Доступны опции настрой размера «пазла».
  10. Диффузия. Доступны опции настройки градиента, яркости, резкости.
  11. Масляные краски. Доступны опции настройки размера «мазка», диффузии.
  12. Холст. Доступны опции настройки размера.
  13. Шум. Доступны опции настройки уровня шума.
  14. Мрамор. Доступны опции настройки размера «плитки» и диффузия.

Вкладка Фильтры

Вкладка Водяной знак (рисунок ниже) позволяет нанести «защитное» изображение на Ваш рисунок. Данный метод поможет сохранить авторские права на изображение и не помешает индексации картинки поисковыми системами. По умолчанию в Incomedia Website Х5 Evolution 9 доступно 12 водяных знаков, плюс возможность загрузить свой. Вам также будут доступны опции поворота (на 90, 180, 270 градусов) и отражения изображения по вертикали и горизонтали.

Вкладка Водяной знак

Маска. На этой вкладке (рисунок ниже) Вы можете задать необычную форму рисунка. Доступно 82 различные формы, плюс можно задать собственную.

Вкладка Маска

Каждую из масок можно поверну на 90, 180, 270 градусов, а также отразить по горизонтали и вертикали.

Вкладка Рамка (рисунок ниже) позволяет задать рамку для изображения. Всего доступно 92 рамки и возможность задать собственную. Вам также будут доступны опции поворота (на 90, 180, 270 градусов) и отражения изображения по вертикали и горизонтали. На тестовом сайте Вы можете наблюдать результат применения рамки.

Вкладка Рамка

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

Вкладка Эффекты

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

Вкладка Библиотека

Продолжим рассмотрение вкладок объекта Картинка. На вкладке Экран (рисунок ниже) можно выбрать способ просмотра картинки. Доступно три способа.

  1. Автоматически изменить размер картинки. В данном случае Incomedia Website Х5 Evolution 9 автоматически изменит размер картинки по ширине и высоте доступной области.
  2. Увеличивать и сдвигать картинку вручную. Размер картинки не будет изменён. Будет изменён её масштаб и добавлена возможность увеличения и перемещения картинки для просмотра в пределах области объекта.
  3. Автоматически увеличивать и сдвигать картинку. Размер картинки не будет изменён. Будет изменён её масштаб и добавлена возможность увеличения и перемещения картинки для просмотра в пределах области объекта. В отличии от предыдущего способа, этот позволяет менять изображение курсора мыши при наведении на картинку. На тестовом сайте представлен пример этого способа увеличения картинки.

Вкладка Экран

Для второго и третьего способа доступны различные опции. Рассмотрим их немного детальнее.

  • Тип масштабирования. Доступно Свободное масштабирование, Горизонтальный панорамный вид, Вертикальный панорамный вид. В первом случае изображение можно будет перемещать во всех направлениях, во втором – по горизонтали, в третьем – по вертикали.
  • Максимальный ZOOM. Задаётся степень увеличения приближения картинки.
  • Разрешить увеличение картинки. Даёт возможность пользователю увеличить (уменьшить) картинку.
  • Показывать меню ZOOM. Отображает на картинке меню, позволяющее приблизить или удалить картинку. Если отключить данную опцию, то можно приближать\удалять при помощи нажатия мыши. Не рекомендую включать данную опцию, когда область картинки слишком маленькая. Так как меню может не поместиться полностью.
  • Показывать навигатор. Отображает миниатюру картинки в целом. Это облегчает просмотр большого изображения в маленькой области.
  • Включить автоматическое масштабирование. При активации данной опции изображение будет прокручиваться автоматически.

Вкладка Карта сайта (рисунок ниже) предназначена для улучшения индексации картинок поисковыми системами. Вы можете задать заголовок, описание, указать местоположение и интернет адрес картинки. Считаю данную опцию очень полезной для SEO оптимизации сайта. Как видите, программа для создания сайта Incomedia Website Х5 Evolution 9 обладает достаточно большими возможностями по работе с изображениями.

Вкладка Карта сайта

Таблица

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

Объект Таблица

  • Вставить ряд. Добавляет строку в таблицу.
  • Удалить ряд. Удаляет строку из таблицы.
  • Вставить колонку. Добавляет столбец в таблицу.
  • Удалить колонку. Удаляет столбец из таблицы.
  • Объединить ячейки. Объединяет выделенные ячейки в одну.
  • Разбить ячейки. Разъединяет ячейку на две ячейки.

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

Инструмент Границы таблицы

Flash анимация

Самостоятельное создание сайта может принести больше результатов, если использовать Flash анимацию. Incomedia Website Х5 Evolution 9 позволяет вставлять на страницу SWF файлы. Специально для этого в программе предусмотрен объект Flash анимация (рисунок ниже).

Объект Flash анимация

Опции данного объекта разделены на две вкладки Общие (рисунок выше) и Дополнительные.

Вы можете указать локальный путь или интернет адрес SWF файла. В поле Альтернативный текст Вы можете задать слово или словосочетание, которое будет отображаться вместо SWF файла, в случае, если он не отобразится на странице пользователя. Ширина и Высота позволяют задать размеры содержимого объекта Flash анимация. Версия проигрывателя (7-11) указав данную опцию, Вы задаёте версию проигрывателя, необходимую для воспроизведения того или иного SWF файла. В случае, если у пользователя не подходящая версия или вовсе отсутствует проигрыватель Adobe Flash, ему будет предложено обновить (установить) нужную версию. Также Вы можете задать прозрачный фон области объекта Flash анимация.

Иногда, для корректной работы Flash анимации не достаточно только одного файла SWF. Специально для этого в Incomedia Website Х5 Evolution 9 предусмотрена вкладка Дополнительные (рисунок ниже). Вы можете указать специальное имя папки для всех необходимых файлов и поместить их в неё.

Вкладка Дополнительные

Программа для создания сайта Incomedia Website Х5 Evolution 9 обладает ещё рядом объектов:

  • Видео и аудио.
  • Галерея.
  • Обратная связь.
  • Список продуктов.
  • HTML и виджеты.

Они будут рассмотрены в статье «Обзор Incomedia Website Х5 Evolution 9 (часть 4). Создание веб-сайта». Надеюсь, что Вы уже убедились в том, что самостоятельное создание сайта с Incomedia Website Х5 Evolution 9 достаточно простой и интересный процесс. Инструменты программы постоянно совершенствуются и дополняются, что даёт Вам всё больше и больше возможностей по созданию профессиональных сайтов.

Видео уроки Website X5. Создание сайта с нуляВидео уроки Website X5. Создание сайта с нуля

Видео уроки на русском языке по самостоятельному созданию сайта с нуля в Incomedia Website X5 Evolution и Professional 12.

 

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