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

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

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

 

 

Создание карты сайта

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

Создание карты сайта

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

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

Обратите максимальное внимание и отнеситесь со всей ответственностью к заполнению полей Заголовок страницы, Описание страницы, Ключевые слова и Имя файла. Это параметры, которые помогут поисковой системе лучше понять содержимое страницы и, как следствие, повысить её позицию в поисковой выдаче.

Обратите Ваше внимание на то, что при использовании, например, русских и\или украинских букв в именах страниц в поле Имя файла все неизвестное символы (буквы русского и\или украинского алфавита) будут заменены на знак тире. Это не очень хорошо. Задайте имя страницы вручную. Указав только буквы английского алфавита, цифры, знаки тире и нижнего подчёркивания. Рекомендую использовать транслитерацию. Например, имя страницы «Плагины для Firefox», а имя файла сделать «plaginy-dlja-firefox». Вы можете воспользоваться сервисом Translit.ru для перевода русских надписей в транслит согласно стандартам. Поддерживается транслитерация для следующих языков: русский, иврит, армянский, украинский, белорусский, греческий, грузинский, литовский, казахский.

На рисунке ниже показан пример созданной структуры сайта (автоматически создаётся меню).

Меню сайта

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

Создание страниц

Третий шаг «Создание страниц» самый объёмный. На нём Вы заполняете содержимое каждой страницы.

Но перед этим Вы задаёте «модульную сетку» страницы (рисунок ниже).

Создание страниц

В левой части окна Incomedia WebSite Free вы создаёте таблицу, в ячейке которой будут располагаться объекты (Текст, Изображение, Flash анимация, Видео и аудио). Именно эти объекты и составляют страницы Вашего сайта.

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

Над областью сетки страницы сайта, в окне WebSite X5 9 есть 7 инструментов. Рассмотрим их немного детальнее (только те, что доступны в версии WebSite X5 9 Free).

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

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

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

Модульная сетка

На рисунке ниже показана часть главной страницы сайта уже в сгенерированном виде в браузере. Также Вы можете просмотреть созданный сайт в HTML версии.

Пример страницы

Объекты

В WebSite X5 9 Вам доступно для расположении на странице 4 объекта:

  1. Текст.
  2. Изображение.
  3. Flash анимация.
  4. Видео и аудио.

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

Стоит отметить, что в более новой версии программы Вам доступно больше объектов. Детальнее об этом Вы можете прочесть в статье «Обзоh Incomedia WebSite X5 10 Free (часть 4). Бесплатный конструктор сайтов».

Давайте рассмотрим каждый из этих объектов более детально.

Текст

Данный объект (рисунок ниже) представляет собой текстовый редактор на подобии WordPad.

Объект Текст

В редакторе есть две панели инструментов. На верхней панели расположены инструменты Вырезать, Копировать, Вставить, Специальная вставка (вставка текста с сохранением некоторых элементов форматирования из Microsoft Word), Отменить действие, Повторить действие, Вставка ссылки, Активировать HTML код, Вписать содержимое в ширину ячейки (имеется в виду равномерно расположить текст внутри ячейки модульной сетки страницы), Тёмный фон (устанавливает тёмный фон страницы. Удобно, если Вы выбрали светлый цвет для текста). При помощи инструмента Активировать HTML код Вы можете вставить в редакторе любой текст, выделить его, нажать на этот инструмент и после генерации страницы он не будет показан на самой странице, но будет вписан в код страницы. На рисунке ниже, в верхней его части, показано окно редактора со вставленной фразой «Сайта Aleksius.com разработал <a href="/aleksius.com" target="_blank">Хорошевский Алексей</a>», в средней части рисунка – сгенерированная страница, на которой не виден данный текст, а в нижней HTML код сгенерированной страницы, в котором отображается надпись.

Пример работы инструмента Активировать HTML

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

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

Ссылки

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

Вкладка Описание

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

Всплывающая подсказка

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

Файл или URL

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

Адрес электронной почты

  • Интернет звонок. Данная опция (рисунок ниже) позволит Вам создать ссылку при нажатии, на которой будет выполнено одно из следующих действий: Вызов, Добавить в контакты, Начать чат, Показать профиль, Голосовая почта Skype, Отправить файл. Все эти действия относятся к работе со Skype и «привязаны» к указанному имени пользователя Skype.

Интернет звонок

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

Окно сообщения

  • Избранная страница и страница по умолчанию. Вы можете создать ссылку, при нажатии на которую заданный Вами адрес (рисунок ниже) будет добавлен пользователю или в избранное браузера, или заданная Вами страница станет стартовой страницей браузера пользователя. Пример реализации подобной ссылки приведён в HTML версии сайта.

Избранная страница и страница по умолчанию

  • Карта сайта. Создаёт ссылку, ведущую на страницу карты сайта (рисунок ниже).

Карта сайта

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

Изображение

Объект Изображение (рисунок ниже) позволяет Вам вставлять изображения (JPG, GIF, PNG, PSD, BMP, TIF, DIB, PCX, RLE, TGA, WMF) в сетку страницы (не внутрь объекта Текст).Объект Изображение

Вы можете вставить ссылку на изображение в интернете. Рекомендую заполнять поля Заголовок (появляется в виде всплывающей подсказки при наведении курсора мыши на изображение. Помогает при SEO оптимизации) и Альтернативный текст (отображается вместо изображения в случае, если у пользователя отключён показ изображений). Вы можете назначить на нажатие на изображение любое из восьми действий, рассмотренных для объекта Текст инструмент Вставка ссылки. Есть возможность задать уровень сжатия изображения (опция Качество). Советую добиться максимально приемлемого качества изображения при минимальном размере.

Помимо этого в WebSite X5 9 есть встроенный редактор изображений (рисунок ниже). Он разделён на две вкладки Обрезка и поворот и Фильтры.

Редактор изображений

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

На второй вкладке Фильтры (рисунок ниже) Вы сможете применить один из (несколько или даже все сразу) восьми фильтров.

Фильтры

  1. Яркость/Контрастность. Доступны опции Яркость, Контрастность.
  2. RGB. Доступны опции изменения интенсивности канала Красный, Зелёный, Синий.
  3. HSL. Доступны опции Оттенок, Насыщенность, Яркость.
  4. Чёткость. Доступна опция изменения степени чёткости.
  5. Размытие. Доступна опция изменения степени размытия.
  6. Оттенки серого. Переводит изображение в оттенки серого цвета.
  7. Сепия.
  8. Мозаика. Доступна опция изменения размера области мозаики.

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

Flash анимация

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

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

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

Видео и аудио

Объект Видео и аудио (рисунок ниже) позволяет вставлять на страницу сайта файлы следующих форматов: MP4, FLV, AVI, WMV, MPG, MOV, MP3, WMA, WAV, MID, AIF, M4A.

Объект Видео и аудио

Вы сможете указать для загрузки файл со своего компьютера, ссылку на файл в интернете и ссылку на файл, расположенный на YouTube. Альтернативный текст, Ширина, Высота – аналогично опциям для объекта Flash анимация. Для объекта Видео и аудио можно задать отображение панели управления воспроизведением файла (кнопки Пауза, Стоп и так далее), задать автоматическое воспроизведение файла при загрузке страницы, включить полноэкранный режим, включить автоматическое сворачивание панели управления и задать её цвет.

Пример вставки видео файла с YouTube на страницу с показан в HTML версии сайта.

Incomedia WebSite X5 9 Evolution обладает большим количеством объектов, которые существенно расширяют возможности по созданию сайтов.

В статье «Обзор Incomedia WebSite X5 9 Free (часть 3). Программа для создания сайта бесплатно» будут рассмотрены расширенные настройки и экспорт готового сайта на сервер.

Если Вас интересует новая, десятая версия программы, то Вы можете ознакомится с ней в статье «Обзор Incomedia WebSite X5 Free 10 (часть 2). Программа конструктор сайтов».

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

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

 

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