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

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

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

 

 

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

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

Для создания иерархии страниц служит второй шаг разработки сайта – Sitmap Creation (рисунок ниже).

Конструктор сайтов

Конструктор сайтов Incomedia WebSite X5 Free 10 позволяет Вам создать до 10 страниц включая главную. Окно программы состоит из трёх основных частей. Панели инструментов над таблицей со страницами, самой таблицы и панели кнопок справа от таблицы. Из инструментов над таблицей в Incomedia WebSite X5 Free 10 Вам доступны только инструменты Cut, Copy, Paste. Они позволяют вырезать, скопировать или вставить страницу.

В панели кнопок справа от таблицы в WebSite X5 Free 10 Вам доступны кнопки New Page (создание новой страницы), Remove (удаление существующей страницы), Rename (переименование существующей страницы), Properties (доступ к опциям страницы) и кнопки, позволяющие перемещать страницу вверх или вниз по иерархии. Рассмотрим опции страницы, доступные в Incomedia WebSite X5 10 Free, на примере главной страницы (рисунок ниже).

Incomedia WebSite X5 10 Free

Как видите, они чем-то напоминают настройки сайта, рассмотренные в статье «Обзор Incomedia WebSite X5 Free 10 (часть 2). Программа конструктор сайтов». Активировав опцию Extended Page Title, Вы сможете задать заголовок страницы. Обратите внимание на то, что если Вы вписали название сайта на этапе настройки сайта в поле Website Title, то к указанному заголовку будет приписано название сайта в формате « - Aleksius.com» (без кавычек). Например, если в качестве имени сайта на первом шаге создания Вы указали «Aleksius.com» (без кавычек), а в настройках страниц в поле Extended Page Title Вы вписали «Главная», то в итоге заголовок будет выглядеть так: «Главная - Aleksius.com». Пример Вы можете посмотреть на тестовом сайте. Напомню, что для улучшения SEO «показателей» Вашего сайта длина заголовка должна быть не более 70 символов, включая пробелы и знаки препинания. Также заголовок должен быть информативным, описывающим содержание страницы, легко читаемым, содержать ключевое слово и быть «уникальным», не повторяющимся в точности на других страницах Вашего сайта.

Page Description. Аналогично опции Website Description, рассмотренной ранее в статье «Обзор Incomedia WebSite X5 Free 10 (часть 2). Программа конструктор сайтов».

Website Keywords. Аналогично опции Website Keywords, рассмотренной ранее в статье «Обзор Incomedia WebSite X5 Free 10 (часть 2). Программа конструктор сайтов».

Активировав опцию File Name, Вы сможете задать URL имя самой страницы, которое отображается в адресной строке браузера. Есть несколько рекомендаций:

  • имя страницы должно быть описательным. Содержать ключевые слова и отражать основную суть содержимого страницы. Например, для статьи «Обзор Incomedia WebSite X5 Free 10 (часть 3). Создаем сайт сами» URL имя может быть таким «website-x5-free-10-sozdaem-sajt-sami» (без кавычек). Лучше не делать имена типа «qwd3756». Исключение – статья и правда посвящена чему то, что называется «qwd3756».
  • Не надо делать слишком длинные имена.
  • Не надо использовать знаки препинания, другие символы (кроме тире «-» и нижнего подчёркивания «_»).
  • В качестве замены пробела между словами лучше использовать тире «-», чем нижнее подчёркивание «_».
  • Используйте одну «схему создания» адресов на всём сайте. Например, если статья называется «Создаем сайт сами», то её имя может быть, например, «sozdaem-sajt-sami» или «create-a-website-yourself» (без кавычек). Но определившись с тем, переводить название адресов на английский или использовать транслитерацию, делайте так во всех случаях. Как исключения – названия на английском языке в сочетании с русскими словами. Например, для статьи «Обзор Incomedia WebSite X5 Free 10 (часть 3). Создаем сайт сами» URL имя может быть таким «website-x5-free-10-sozdaem-sajt-sami». Если Вы группируете статьи по месяцам и годам и выбрали формат год, месяц, название статьи, например, «2013- aprel-website-x5-free-10-sozdaem-sajt-sami», то делайте это для всех статей. Не стоит делать, к примеру, так «aprel-website-x5-free-10-sozdaem-sajt-sami-04-2013».
  • Используйте только буквы английского алфавита в нижнем регистре и цифры.

Помимо созданных Вами страниц автоматически создается страница с картой сайта (рисунок ниже).

Создаём сайт сами

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

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

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

WebSite X5

В WebSite X5 создание страницы можно условно разделить на две части. Сначала создаёте и настраиваете макет страницы, а затем размещаете и настраиваете объекты в строках и столбцах этой таблицы. Окно (рисунок выше) можно условно разделить на четыре части (панель инструментов над макетом страницы, макет страницы, перечень объектов справа от макета и окно предварительного просмотра под перечнем объектов). Рассмотрим панель инструментов над макетом страницы, когда в таблицу помещены разные объекты (рисунок ниже).

Incomedia WebSite X5

В Incomedia WebSite X5 Free 10 Вам доступно шесть инструментов.

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

Set an Anchor to the selected Object. Позволяет добавить якорь (рисунок ниже) на объект на странице.

Вставка якоря

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

Incomedia WebSite

В Incomedia WebSite теперь можно создать ссылку не просто на другую страницу сайта, а на определённое место на странице сайта. Раньше, например, в версиях 8 и 9, это было невозможно сделать  визуальными средствами программы. Как сделать ссылку с якорем мы рассмотрим далее. Если выделить объект с якорем, то из спадающего списка кнопки Set an Anchor to the selected Object можно выбрать команду Edit (изменить имя якоря) или Remove (удалить якорь). Требования к имени якоря аналогично требованиям к URL имени страницы.

Add a Row before the selected Cell. При помощи данного инструмента Вы сможете добавлять строки в таблицу макета страницы над выбранной строкой. Открыв спадающий список можно переключиться на режим Add a Row after the selected Cell, что даст возможность добавлять строки в таблицу макета страницы под выбранной строкой.

Add a Column before the selected Cell. При помощи данного инструмента Вы сможете добавлять столбцы в таблицу макета страницы перед выбранным столбцом. Открыв спадающий список можно переключиться на режим Add a Column after the selected Cell, что даст возможность добавлять столбцы в таблицу макета страницы после выбранного столбца.

Remove the selected Row. При помощи данного инструмента Вы сможете удалять строки из таблицы макета страницы.

Remove the selected Column. При помощи данного инструмента Вы сможете удалять столбцы из таблицы макета страницы.

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

Объекты

В Incomedia WebSite X5 Free 10 доступно шесть объектов.

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

В программе Вы можете наблюдать ещё шесть (Таблица, Галерея, E-mail форма, Гостевая книга, Список товаров, HTML и виджеты), но они доступны в Incomedia WebSite X5 Evolution 10. Купить WebSite X5 Evolution можно на официальном сайте. После этого Ваш конструктор сайтов станет гораздо более функциональным.

Текст

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

Incomedia

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

Инструменты Cut, Copy, Paste (вырезать, копировать, вставить) позволяют вырезать, скопировать или вставить фрагмент текста.

Paste Special. Инструмент специальной вставки, который позволяет вставить текст, например, из Microsoft Word с сохранением форматирования. Например, исходный тест в Microsoft Word выглядит как показано на рисунке ниже.

Текст

При вставке его в текстовый редактор программы при помощи инструмента Paste Special и Paste получаем два немного разных результата (рисунок ниже). Примеры Вы можете посмотреть на тестовом сайте.

WebSite X5 Free

WebSite X5 Free позволяет отменять (или повторять) действия, совершённые над текстом (объекты Undo и Redo). Например, если случайно удалили абзац, то, нажав на Undo, можно вернуть его. То есть отменить последнее действие. Можно отменять несколько последних команд. Но до того, как Вы закроете окно с текстовым редактором. После этого отмена невозможна.

Insert Link. Этот инструмент позволяет создать ссылку или назначить другое действие при нажатии на текст (рисунок ниже).

WebSite X5 10

WebSite X5 10 позволяет создать ссылку на страницу сайта – действие Website Page (рисунок выше). В поле Website Page можно выбрать страницу, на которую необходимо перейти при нажатии на ссылку. Если на этой странице есть якорь, то в спадающем списке Internal Page Anchor можно указать, к какому конкретно объекту страницы необходимо перейти. В качестве «способа» открытия.

  • Open in the same window. Откроет ссылку в той же вкладке (окне).
  • Open in a new window. Откроет ссылку в новой вкладке (окне).
  • Open in a popup window. Откроет ссылку во всплывающем окне. Спадающий список Size (рисунок ниже) позволит задать ширину и высоту всплывающего окна. Keep Ratio – сохранение пропорций.

Страница сайта

Примеры открытия окна тремя разными способами Вы можете посмотреть на тестовом сайте.

Действие Fileor URL (рисунок ниже) позволяет задать ссылку на «внешний» сайт (поле Internet file) или указать путь к файлу, например, предназначенного для загрузки. Можно открыть ссылку разными способами, описанными выше. По аналогии с действием Website Page. Примеры работы данного действия Вы можете посмотреть на тестовом сайте.

Файл или URL

E-mail Address. Данное действие (рисунок ниже) позволяет отправить письмо на заданный адрес с электронной почты (Send an e-mail to) с указанием темы (поле Subject) и текста (поле Message). Опция Enable e-mail address protection позволит Вам усложнить попадание указанного в поле Send an e-mail to почтового адреса в базы спамеров при автоматическом сканировании сайта на наличие таких адресов.

E-mail адреса

При нажатии на ссылку с действием E-mail Address у пользователя откроется программа, назначенная почтовым клиентом по умолчанию. У меня это Mozilla Thunderbird (рисунок ниже).

Mozilla Thunderbird

Поля Кому и Тема будут заполнены данными, которыми Вы заполнили соответствующие поля при настройке действия E-mail Address. В поле ввода текста будет введён текст из поля Message. Пользователь сможет отредактировать, удалить или добавить любое значение этих полей. Примеры работы данного действия Вы можете посмотреть на тестовом сайте.

Internet call. Позволит Вашим пользователям при нажатии на ссылку с этим действием открыть программу типа Skype, или аналогичную, и начать вызов того абонента, адрес которого Вы введёте в поле Start an Internet call. Помимо вызова абонента есть ещё несколько вариантов (спадающий список Action Type):

  • Addcontact. Добавляет указанного Вами в поле Start an Internet call абонента в список контактов пользователя в программе Skype, или аналогичной.
  • Chat. Начинает чат с указанным Вами абонентом.
  • Show profile. Показывает сведения об указанном Вами абоненте.
  • Skype Voice Mail. Активирует использование сервиса Skype Voice Mail.
  • Send file. Отправляет файл указанному Вами в поле Start an Internet call абоненту средствами Skype или аналогичной программы.

Internet call

Print Page. При нажатии на ссылку с действием Print Page будет отправлена на печать текущая страница сайта. У данного действия нет дополнительных настроек. Примеры работы данного действия Вы можете посмотреть на тестовом сайте.

Massage Box. Вы сможете задать текст, который будет появляться в виде окна сообщения (поле Message Text) (рисунок ниже). Примеры работы данного действия Вы можете посмотреть на тестовом тестовом сайте. Данная возможность не всегда корректно работает. В некоторых случаях окно сообщения может не появляться. Такое наблюдалось на тестовом сайте в Mozilla Firefox 20.0.1. В Yandex 1.5.1105.412 (bf0e85f), Internet Explorer 10.0.9200.16540 х64 , Opera 12.15 и Google Chrome 26.0.1410.64 m всё отображалось корректно.

Massage Box

Если опция Show as a popup window включена, то сообщение появится в виде «системного» всплывающего окна (рисунок ниже). Обратите внимание, что в этом случае оформление окна зависит от браузера, его версии а также установленной у пользователя операционной системы и её оформления.

Massage Box 2

Если опция отключена, то окно с сообщением появится в стиле Lightbox (рисунок ниже).

Massage Box 3

Sitemap. Данное действие не имеет дополнительных настроек. При нажатии на ссылку с этим действием пользователь перейдёт на страницу карты Вашего сайта. Примеры работы данного действия Вы можете посмотреть на тестовом сайте.

Помимо этого для каждой ссылки можно задать описание на вкладке Description (рисунок ниже).

Description

В области Text Вы вводите само описание всплывающей подсказки. В поле Image File можно указать изображение (в формате JPG, JPEG, GIF, PNG, PSD, BMP, TIF, DIB, PCX, RLE, TGA, WMF), которое появится рядом с текстом подсказки. Поле Tooltip width служит для указания ширины подсказки в пикселях. Image width (%) – размер картинки от её исходного размера в процентах. Также Incomedia WebSite X5 Free 10 позволяет указать положение картинки по отношению к тексту (Top, Bottom, Left, Right). Для этого служит опция Image Position.

После объекта Insert Link в панели инструментов текстового редактора Incomedia WebSite X5 Free 10 идёт инструмент Enable HTML Code. Он позволяет преобразовывать вставленный в текст HTML код. Например, если Вы вставите в объект Текст следующую строку:

 <a title="Защита Joomla от взлома. Защита компьютера от вирусов" href="http://aleksius.com/joomla/rasshireniya/">Расширения</a>

и не включите инструмент Enable HTML Code, то конструктор сайтов Incomedia WebSite X5 Free 10 отобразит это в виде текста, как есть. Пример Вы можете просмотреть на тестовом сайте. Если активировать Enable HTML Code, то WebSite X5 Free 10 преобразует его в ссылку. Пример Вы можете просмотреть на тестовом сайте.

Fit Contentto Cell Width. При редактировании текста в Incomedia WebSite X5, если Вы хотите добиться лучшего результата, постоянно приходится переключаться из окна редактора в окно просмотра. Например, чтобы отследить, как выглядит тест, нет ли переносов инициалов и так далее. Данная опция изменяет ширину текста в окне редактора до ширины ячейки, в которой он находится на странице сайта. Это упрощает работу с текстом. Данная опция не влияет на сам текст на сайте.

Иногда бывают случаи, когда текст должен быть белым или очень светлым. Настолько светлым, что на белом фоне редактора текста его не видно. На сайте, где чёрный или тёмный фон, всё отлично. Но при редактировании текста его надо делать или чёрным или можно воспользоваться инструментом Light/dark background. В результате, Вам будет проще работать с текстом (рисунок ниже).

Фон

Данная опция не влияет на отображение текста или фона на сайте.

Далее в  панели инструментов тактового редактора Incomedia WebSite X5 Free 10 расположен спадающий список с шрифтами, которые Вы можете применить к тексту на своём сайте. Обратите внимание на то, что если Вы выбираете «экзотический» шрифт, то его может не оказаться у пользователя, который будет просматривать Ваш сайт. Это чревато или нарушением дизайна, или затруднением доступа к информации на страницах Вашего проекта.

Далее следует спадающий список, где Вы можете выбрать или указать размер шрифта, затем идут три инструмента Bold, Italic, Underlined, которые позволяют задать начертание текста жирное, курсив или подчёркнутое – соответственно.

При помощи инструмента Text Color (рисунок ниже) Вы можете задать цвет текста.

Text Color

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

  • Bullet List. Инструмент, позволяющий создавать маркированные списки.
  • Unindent.  Позволяет сместить абзац влево.
  • Indent. Позволяет сместить абзац вправо.

После этого идут четыре инструмента (Align Left, Align Center, Align Right, Justify), которые позволяют выровнять текст по левому, правому краю, по центру и по ширине (соответственно).

Изображение

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

Изображение

  • Local Fileon PC. При помощи данной опции Вы указываете путь на локальном компьютере к изображению.
  • Internet file. Можно указать URL адрес изображения.
  • Title. Заголовок изображения, который будет показан в качестве всплывающей подсказки. В тестовом браузере Incomedia WebSite X5 Free 10 он не отображается. Заголовок поможет поисковым системам лучше «понять», что это за изображение. Это может улучшить Ваши позиции в поисковой выдаче по изображениям. Рекомендую отнестись к описанию изображения так же ответственно, как и к заголовкам страниц (описано в статье выше).
  • Alternative Text. Если изображение будет недоступно или у пользователя отключен показ изображений в браузере, то он увидит вписанный в это поле текст.
  • Link. Позволяет задать ссылку (действие) по нажатию на изображение. Список действий аналогичен тем, которые были описаны выше в статье при рассмотрении объекта Текст.

Конструктор сайтов Incomedia WebSite X5 Free 10 обладает редактором, позволяющим обрабатывать изображения. Нажав на кнопку Edit, Вы откроете окно этого редактора (рисунок ниже).

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

Оно разделено на две вкладки.

  1. Crop and rotation.
  2. Filters.

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

  • X-coordinate. Координата левого верхнего угла границы обрезки по оси Х.
  • Y-coordinate. Координата левого верхнего угла границы обрезки по оси Y.
  • Width. Ширина области обрезки в пикселях.
  • Height. Высота области обрезки в пикселях.

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

Область обрезки

  • Flip Horizontal. Отражение изображения по горизонтали.
  • Flip Vertical. Отражение изображения по вертикали.
  • No rotation. Вернуть изображение в то положение, которое было до его поворота.
  • Rotate by 90 degrees. Повернуть изображение на 90 градусов.
  • Rotate by180 degrees. Повернуть изображение на 180 градусов.
  • Rotate by 270 degrees. Повернуть изображение на 270 градусов.

В области Preview Вы видите изменения, которые задаёте на текущем этапе редактирования. В области Final Preview Вы можете видеть то, как изображение будет выглядеть после всех изменений. Incomedia WebSite X5 Free 10 позволяет сохранить изменённое изображение в файл формата PNG. Для этого достаточно нажать Save As.

На второй вкладке Фильтры (рисунок ниже) WebSite X5 10 предоставляет Вам возможность цветовой и не только коррекции изображения. Доступно восемь фильтров с настройками.

Фильтры

  1. Brightness/Contrast. Позволяет редактировать яркость (опция Brightness) и контрастность (опция Contrast) изображения.
  2. RGB. Позволяет изменять «количество цвета» по трём каналам: красный, зелёный, синий.
  3. HSL. Позволяет изменять тон (опция Hue), насыщенность (опция Saturation) и светлоту (опция Brightness) изображения. Основывается на цветовой модели  HSL.
  4. Sharpen. Позволяет увеличить чёткость изображения.
  5. Blur. Позволяет размыть изображение.
  6. Black and White. Преобразовывает цветное изображение в чёрно-белое (оттенки серого). Дополнительных настроек нет.
  7. Sepia. Применяет эффект сепии (оттенок коричневого цвета) к изображению.
  8. Mosaic. Задаёт «эффект мозаики» для изображения.

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

Фильтры 2

Пример работы данного объекта Вы можете наблюдать на тестовом сайте.

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

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

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

 

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