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

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

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

 

 

Программа конструктор сайтов, тема которая была начата  в предыдущей статье «Обзор Incomedia WebSite X5 Free 10 (часть 1). Создание сайта бесплатно», состоит из пяти разделов-шагов. Каждый шаг – это технологический этап при создании сайтов.

Основные настройки

Создание сайтов без предварительно подготовленной «стратегии» может усложнить этот процесс. До начала использования конструктора сайта рекомендую максимально чётко продумать, для чего Вам сайт, для кого он предназначен (целевая аудитория), его структуру, что и где будет располагаться на страницах и так далее. Исходя из того, о чём и для кого сайт, можно определиться с его доменным именем и составить семантическое ядро (подобрать ключевые слова). Для подбора ключевых слов существует множество платных и бесплатных сервисов и программного обеспечения. Например, статистика ключевых слов Яндекса, Google тоже предоставляет подобную информацию – Google AdWords. Это может пригодиться на первом этапе создания сайта (рисунок ниже). Предыдущие настройки относились к самой программе. Общие настройки (окно General Settings) относятся к конкретному сайту.

Incomedia WebSite X5

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

Website Title. Заголовок Вашего сайта. Не рекомендуется делать его длиной более 70 или менее 8 символов (включая пробелы). Он должен быть максимально информативным и легко читаемым. Не рекомендуется просто перечислять ключевые слова в заголовке. У каждой страницы сайта должен быть уникальный заголовок.

Incomedia WebSite

Incomedia WebSite отобразит текст, введённый в поле Website Title во вкладке браузера (рисунок выше) и в коде страницы, как в примере ниже.

<!DOCTYPE html><!-- HTML5 -->

<html lang="ru" dir="ltr">

         <head>

                   <title>Aleksius.com</title>

Также, заголовок выводится на страницах с результатами поиска в Яндекс (рисунок ниже), Google и других поисковых системах.

Website Author. Текст, введённый в этом поле, будет внесён в мета-тег author в код страницы, как указано на примере ниже.

 

<meta name="author" content="ХорошевскийАлексей" />

 Website Address (URL). В данное поле необходимо ввести URL адрес своего сайта в формате «http://aleksius.com» (без кавычек). Где «aleksius.com» - непосредственно адрес Вашего сайта. Это необходимо сделать для корректной работы RSS ленты, карты сайта и средств электронной коммерции. Бесплатный конструктор сайтов не поддерживает данные возможности. Это относится к более расширенным версиям программы.

Website Description. Это описание Вашего сайта. Оно помещается в мета-тег description, как показано в примере ниже. Служит для передачи основного содержимого сайта в кратком виде. Помимо этого оно может участвовать в формировании сниппета (рисунок ниже). Рекомендуется делать описание максимально отвечающим содержанию, легко читаемым, содержащим ключевые слова и не менее 70 и не более 150 символов (включая пробелы и знаки препинания). Это может помочь Вам улучшить «SEO показатели» сайта.

 <meta name="description" content="Сайт Aleksius.com. Обзоры расширений Joomla и интернет-сервисов, безопасность сайтов и пользовательских компьютеров, создание статических сайтов" />

 Сайт в результатах поиска

Обратите внимание на то, что справа от поля бесплатный конструктор сайтов выводит счётчик символов. Очень удобно.

Website Keywords. Ключевые слова сайта, которые будут отображены в мета-теге keywords, как показано в примере ниже. Это слова, максимально отображающие смысл содержимого Вашего сайта. Не рекомендуется вписывать более 10 ключевых слов или словосочетаний. Обратите внимание, что, к примеру, «создание сайтов, бесплатный конструктор сайтов, купить WebSite X5» – это три ключевых слова, а «создание, сайта, бесплатно, бесплатный, конструктор, сайтов, купить, WebSite, X5» – это девять ключевых слов.

<meta name="keywords" content="Artisteer, AutoPlay Media Studio, Incomedia WebSite Evolution,  Защитасайта, Расширения Joomla, Artisteer 4.1, uddeIM, Attachments, Extensoft Artisteer 4, Уроки Artisteer 4" />

Content Language. При формировании кода Вашего проекта бесплатный конструктор сайтов вставляет «служебные» элементы интерфейса. Например, надпись «Главная Карта Сайта» под содержимым страницы (рисунок ниже). Вы можете ознакомиться с результатами работы программы на тестовом сайте.

Incomedia WebSite X5 Free

Incomedia WebSite X5 Free позволяет Вам редактировать подобные «служебные элементы». Для этого существует Language Content Management (рисунок ниже).

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

Создание сайтов сопряжено с тем, что Вам придётся лично отвечать за все мелочи. В том числе за перевод. Incomedia WebSite X5 Free 10 поставляется в составе с двенадцатью языками. В том числе, русским. При помощи Language Content Management Вы можете изменять и дополнять перевод. Если в составе бесплатного конструктора сайтов нет нужного Вам языка, то вы можете его создать. Для этого над списком языков есть несколько кнопок. Первая из них (слева) – Add a new Language, позволяет создать новый файл языка (рисунок ниже).

Создание нового файла языка

Для удобства Вы можете отобразить в одном окне несколько переводов (рисунок ниже).

Программа конструктор сайтов

Если Вас интересует украинский язык, то его можно скачать в статье «Украинский язык контента для WebSite X5».

Программа конструктор сайтов предоставляет возможность импорта\экспорта перевода по средствам XML файла. Фрагмент кода такого файла показан ниже.

<?xml version="1.0" encoding="utf-8"?>

<Language xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">

  <Code>UA</Code>

  <Name>Ukrainian</Name>

  <WritingDirection>LeftToRight</WritingDirection>

  <Localizations>

    <Localization>

      <Key>admin_category_select</Key>

      <Value>Выберите категорию/товар</Value>

      <Updated>2012-01-01T00:00:00</Updated>

    </Localization>

    <Localization>

      <Key>admin_comment_abuse</Key>

      <Value>Это сообщение было отмечено как нецензурное!</Value>

      <Updated>2012-01-01T00:00:00</Updated>

    </Localization>

    <Localization>

      <Key>admin_guestbook</Key>

      <Value>Гостевая

книга</Value>

      <Updated>2012-01-01T00:00:00</Updated>

    </Localization>

WebsiteIcon. Изображение (favicon.ico) в формате ICO, которое отображается во вкладке браузера и на страницах с результатами поиска (рисунки ниже).

Incomedia WebSite

Сайт в результатах поиска

Помимо этого иконка сайта отображается рядом с именем сайта в закладках браузера, если пользователи добавили Ваш сайт в избранное. Яндекс рекомендует размещать файл с именем «favicon.ico» (без кавычек) размером 16х16 пикселей в корне сайта. Можно использовать такие форматы как GIF, JPEG, PNG и BMP (источник).

Обратите внимание на то, что Incomedia WebSite X5 Free 10 использует в коде не предпочтительный для Яндекса тип (type="image/x-icon"). Пример фрагмента кода указан ниже.

<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />

Но это не мешает тому, чтобы иконка отображалась в результатах поиска. Проверено в Incomedia WebSite X5 Evolution 9.1.8.1960 и более ранних версиях программы.

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

Выбор шаблона

Бесплатный конструктор сайтов поставляется с набором шаблонов оформления для Вашего сайта (рисунок ниже). Это следующий пункт первого шага самостоятельного создания сайта – Template selection.

Купить WebSite X5

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

  1. Custom (10 штук). Категория и шаблоны в ней добавлены отдельно.
  2. Sport (12 штук).
  3. Shop (10 штук).
  4. Religion (6 штук).
  5. Nature (8 штук).
  6. Music and Dance (4 штуки).
  7. Motors (6 штук).
  8. Hobby (6 штук).
  9. Flowers and Gardens (6 штук).
  10. Entertainment (6 штук).
  11. Cinema and Theater (6 штук).
  12. Beauty (8 штук).
  13. Astronomy and Aviation (8 штук).
  14. Artistic (8 штук).
  15. Animals (10 штук).

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

Категория Custom

Категория Sport

Категория Shop

Категория Religion

Категория Nature

Категория Music and dance

Категория Motors

Категория Hobby

Категория Flowers and gardens

Категория Entertainment

Категория Cinema and theater

Категория Beauty

Категория Astronomy and aviation

Категория Artistic

Категория Animals

На тестовом сайте показан пример шаблона из раздела Sport. Отмечу, что в платной версии программы шаблонов гораздо больше. Детальнее об этом Вы можете прочесть в статье «Обзор WebSite Evolution 10 (часть 2). Конструктор сайтов».

Редактирование шаблона

После того, как Вы выбрали шаблон, бесплатный конструктор сайтов Incomedia WebSite X5 Free 10 позволит Вам немного отредактировать шапку (верхний колонтитул) и подвал (нижний колонтитул). Для этого существует страница Edit Graphic Template (рисунок ниже).

Incomedia WebSite X5 Free 10

В Incomedia WebSite X5 Free 10 редактирование шаблона разделено на две вкладки.

  1. Header.
  2. Footer.

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

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

Copy. Инструмент, позволяющий скопировать объект для последующей его вставки, например, в нижний колонтитул.

Paste. Инструмент, позволяющий вставить скопированный объект.

Undo. Отмена действия. Очень удобно, если Вы сделали что-то по ошибке.

Bring to Front. Перемещение объекта на передний план. Например, если у Вас два рисунка, то Вы можете расположить их один над другим. Наподобие слоёв в Adobe Photoshop.

Send to Back. Перемещение объекта на задний план. Наподобие инструмента Bring to Front, описанного выше.

Position and Size. Позволяет Вам задать размер и точное положение объекта на изображении (рисунок ниже).

Позиция и размер

Параметры Left и Top (рисунок выше) задают положение левого верхнего угла объекта на изображении (как система координат). Параметры Width и Height (рисунок выше) задают размер объекта в пикселях по ширине и высоте. Опция Keep Ration позволит сохранять пропорции при масштабировании объекта.

Insert Text. Вы можете добавить надпись, которая отобразится в шапке сайта. Учтите, что на сайте она будет представлена в виде картинки (не текста). При редактировании надписи Вам будут доступны инструменты, показанные на рисунке ниже.

WebSite X5

В WebSite X5 в области Text (рисунок выше) собраны опции по настройке непосредственно текста. В поле Content Вы вводите сам текст. Затем, при помощи настроек ниже выбираете шрифт, его размер и начертание (жирный или курсив). Опция Text Color позволяет задать цвет текста (рисунок ниже).

Цвет текста

Опция Background Color позволяет задать цвет фона текста. Можно использовать прозрачный фон.

В области Effects собраны инструменты, которые позволяют задать визуальные эффекты для текста. В бесплатном конструкторе сайтов Incomedia WebSite X5 Free 10 доступно шесть эффектов.

  1. Тень. Данный эффект позволяет задать тень для текста. Доступны такие опции как диффузия (размер области тени), цвет, отступ по оси Х, отступ по оси Y.
  2. Отражение. Данный эффект позволяет задать отражение для текста. Доступны такие опции как диффузия (размер области отражения) и расстояние.
  3. Цветная граница. Данный эффект позволяет задать обводку текста. Доступны такие опции как толщина и цвет обводки.
  4. Свечение. Данный эффект позволяет задать свечение текста. Доступны такие опции как диффузия (размер области свечения) и цвет.
  5. Скос. Данный эффект позволяет задать эффект, напоминающий градиент. Доступны такие опции как диффузия, глубина и угол поворота.
  6. Поворот. Позволяет повернуть текст на заданный угол.

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

На рисунке ниже показаны примеры эффектов в соответствии с порядком следования их в списке выше.

Эффекты

К тексту можно одновременно применять несколько эффектов.

На панели инструментов над областью редактирования верхнего колонтитула помимо описанных выше инструментов есть инструмент Insert Image. Он позволяет вставить изображение формата JPG, JPEG, GIF, PNG, PSD, BMP, TIF, DIB, PCX, RLE, TGA, WMF. К изображению можно будет применить аналогичные тексту эффекты (они описаны выше). Помимо этого, бесплатный конструктор сайтов Incomedia WebSite X5 Free 10 позволяет задать изображение, которое будет появляться при наведении курсора мыши на вставленную Вами картинку, опция Image File on mouse over.

Если Вы хотите убрать фон вставленной вами картинки, и он более или менее однородный, то, включив опцию Enable Transparency, Incomedia WebSite X5 Free 10 попытается удалить фон изображения. Вы должны задать цвет, который необходимо убрать, (опция Transparency Color) и указать допуск, погрешность, (опция Tolerance). Допустим, цвет фона изображения жёлтый – 255 255 0. Но на нём есть «грязные размытые пятна». Задав в опции Transparency Color  жёлтый цвет (255 255 0) и указав небольшой допуск, опция Tolerance, вы сможете добиться  лучшего эффекта, чем без указания допуска. Программа попытается удалить и жёлтый фон, и «грязные размытые пятна».

Бесплатное создание сайта требует от Вас не только создания самого сайта, но и его содержимого. Рекомендую обрабатывать изображения в растровом редакторе, а не средствами Incomedia WebSite X5 Free 10.

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

Опция Save as JPG image даёт возможность сохранить шапку сайта при экспорте в формате JPG. В противном случае, она будет сохранена как PNG. Если в шапке сайта у Вас фотография или изображение с большим количеством (более 256) цветов и градиентов, то лучше формат JPG.

Редактирование нижнего колонтитула (рисунок ниже), вкладка Footer, аналогична вышеописанной вкладке Header.

Редактирование нижнего колонтитула

Пример редактирования шапки и подвала сайта в Incomedia WebSite X5 Free 10 Вы можете увидеть на тестовом сайте.

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

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

Платная версия программы позволяет видоизменять верхний и нижний колонтитулы гораздо больше. Детальнее об этом Вы можете прочесть в статье «Обзор WebSite Evolution 10 (часть 2). Конструктор сайтов».

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

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

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

 

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