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

Видео уроки Website X5 13 и 12Видео уроки Website X5 13 и 12

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

 

 

В предыдущей статье «Уроки WebSite X5 (часть 1)» мы рассмотрели вопросы создания регистрации, прав доступа на файлы и папки сайта, а также перечислили возможные причины и способы устранения того, что сайт может не экспортироваться. В этой части мы поговорим о дополнительных возможностях для сайта.

Кнопка «Читать далее»

Посетители моего сайта иногда задают вопрос: «Как сделать кнопку «Читать далее»? Чтобы на главной странице отображался сокращённый вариант статьи, под ним кнопка «Читать далее» или, как у вас «Подробнее…», а при нажатии на эту кнопку можно было перейти к полному варианту статьи». У меня на сайте это возможности самой Joomla. Есть «автоматический» способ.

  1. Создайте и настройте блог (на четвёртом шаге разработки сайта). Подробнее об этом Вы можете прочесть в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 8). Создание WEB-сайтов».
  2. Затем, на втором шаге создания сайта, перетащите мышью строку блога из части «Специальные страницы» в часть «Меню», перед главной страницей.
  3. Создайте файл «.htaccess» (без кавычек).
  4. Разместите его в корневой папке Вашего сайта.
  5. Внесите в него следующий код.

<IfModule mod_dir.c>

DirectoryIndex index.html$ blog/index.php

</IfModule>

 Это значит, если стартовая страница сайта (главная) ранее была «index.html», теперь она будет «blog/index.php». Если Вам не надо размещать таким способом статьи с кнопкой «Читать далее» на главной странице, тогда не выполняйте шаги 3-5, а на втором шаге переместите строку блога из части «Специальные страницы» в часть «Меню» куда это надо.

Могу предложить «ручной» способ создания кнопки «Читать далее». Он не очень удобный, но если описанный выше способ не подходит, то можно попробовать этот. Рассмотрим пример создания 5 вводных частей текста с кнопкой «Читать далее» и переходом к полному тексту статьи.

  1. На втором шаге разработки веб-сайта создайте 5 страниц с полными вариантами статей.
  2. Если их не нужно отображать в меню – отметьте их как скрытые страницы.
  3. На странице, где будут размещаться вводные части, создайте 5 объектов Текст. В каждом объекте разместите вводную часть статьи. Под ней разместите надпись «Читать далее».
  4. Назначьте на эту надпись действие Страница сайта и укажите страницу сайта с полным вариантом статьи.
  5. Повторите четвёртый этап в каждом текстовом объекте.
  6. Экспортируйте сайт на хостинг.

Кнопки социальных сетей сбоку сайта

Рассмотрим вопрос добавления кнопок социальных сетей на сайт. В Incomedia WebSite X5 есть специальный объект – Соц. сети. Детальнее о нём Вы можете прочесть в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 5). Создание веб-сайтов». Но некоторые пользователи сайта спрашивают: «Как добавить себе на сайт кнопки социальных сетей, как у вас справа?» (рисунок ниже).

Кнопки социальных сетей

Это можно сделать по-разному. Я использую сервис AddThis, там есть Smart Layers. Немного подробнее о сервисе AddThis Вы можете прочесть в статье «Обзор AddThis. Социальные кнопки Joomla». Выполните следующие действия для такого (рисунок выше) размещения кнопок социальных сетей у себя на сайте.

  • Зарегистрируйтесь и войдите на сайт AddThis.
  • Перейдите на страницу Smart Layers.
  • Установите переключатель Share в положение ON.
  • Выберите позицию и количество кнопок.

Smart Layers

  • Нажмите на кнопку GenerateCode.
  • Из появившегося окна скопируйте код.
  • Перейдите в Incomedia WebSite X5 и на первом шаге создания сайта на вкладке Эксперт в спадающем списке Пользовательский код выберите Перед закрывающим тегом BODY.
  • Вставьте скопированный код в поле под спадающим списком Пользовательский код.
  • Экспортируйте сайт на хостинг.

Кнопка «Вверх»

Рассмотрим пример добавления кнопки «Вверх» в сайт, сделанный на Incomedia WebSite X5 по материалам статьи «Кнопка для сайта - более 7 проверенных решений» (раздел «1. Простая кнопка "Наверх" без JavaScript»).

Не используйте данный способ, если у Вас есть объект Список продуктов на сайте! Он может не работать.

  • На первом шаге создания сайта перейдите на вкладку Эксперт.
  • В спадающем списке Пользовательский код выберите Перед закрывающим тегом BODY.
  • Вставьте туда следующий код:

<a href="#" title="Вернутьсякначалу" class="topbutton">^Наверх</a>

<style>.topbutton {

width:100px;

border:2px solid #ccc;

background:#f7f7f7;

text-align:center;

padding:10px;

position:fixed;

bottom:50px;

right:50px;

cursor:pointer;

color:#333;

font-family:verdana;

font-size:12px;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;

}</style>

  • Сохраните изменения.
  • Экспортируйте сайт.

Обратите внимание, что CSS стиль заключён в тег «<style> </style>» (без кавычек).

Нижеуказанный способ создания кнопки вверх будет работать и с объектом Список продуктов. Подробнее об этом способе Вы можете прочесть в статье «Кнопка вверх для сайта (jQuery(js), css, html)».

  • На первом шаге создания сайта перейдите на вкладку Эксперт.
  • В спадающем списке Пользовательский код выберите После закрывающегося тега BODY.
  • Вставьте туда следующий код:

 

<p id="back-top">
<a href="#top"><span></span>Вверх</a>
</p>
<style> #back-top a {
width: 108px; /* размер квадрата изначальный, без округленных углов*/
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}

/* иконка стрелки (тег span) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
/*путь к изображению стрелки вверх, можете найти в интернете любую и вставить сюда*/

-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;

/* округленные углы, радиус, если хотите круг, то укажите 60px все три параметра */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

}
#back-top a:hover span {
background-color: #777;
} </style>

 

  • Сохраните изменения.
  • Экспортируйте сайт.

Вставка слайдера на страницу

Один из посетителей в комментариях обратился с вопросом: «Как вставить слайд, сделанный при помощи WOW Slider, на сайт?». На примере слайдера рассмотрим, как вставить на сайт меню, Flash объекты и другие дополнения, которые могут быть сгенерированы подобными WOW Slider программами.

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

data1\

images\

hd_26.jpg

hd_21.jpg

hd_57.jpg

hd_40.jpg

hd_28.jpg

tooltips\

hd_26.jpg

hd_21.jpg

hd_57.jpg

hd_40.jpg

hd_28.jpg

engine1\

script.js

style.mod.css

wowslider.js

style.css

arrows.png

bullet.png

pause.png

play.png

triangle.png

wowslider.mod.js

jquery.js

fullscreen.png

index.html

iframe_index.html

 «index.html» – файл «запуска» слайдера.  Значок «\» указывает на то, что это папка. Если просто открыть в браузере файл «index.html», начнётся показ слайдов. Рассмотрим, как разместить этот слайдер непосредственно внутри страницы Вашего сайта.

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

Incomedia WebSite X5

К сожалению, Incomedia WebSite X5 не предусматривает пакетное добавление файлов и папок с вложенными файлами и подпапками.

  • Нажмите на иконку папки справа от поля Связанные файлы для загрузки на сервер. Укажите файл, который необходимо добавить. В моём примере это файл изображения (рисунок выше). Кроме «запускаемого» файла «index.html».
  • В поле Относительный путь к серверу укажите иерархическую структуру папок слайдера. Папка «files» находится непосредственно в папке сайта. Она служит для хранения различных файлов и папок. Поместим все наши файлы и папки слайдера в неё. Например, чтобы показать, что файл «hd_28.jpg» находится в папке «images», которая помещается в папке «data1», которая, в свою очередь, находится в папке «files», Вам надо указать такую конструкцию: «files/data1/images» (без кавычек).
  • Нажмите кнопку Ok.
  • Повторите эту процедуру для всех файлов и папок, которые относятся к слайдеру. Это гарантирует, что при экспорте Incomedia WebSite X5 выгрузит абсолютно все файлы и папки, необходимые для корректного отображения слайдера.
  • После чего вернитесь на вкладку HTML-код.
  • В исходном коде слайдера прописаны такие пути как, например, «data1/images/hd_28.jpg». Это значит, что файл «hd_28.jpg» находится в папке «images», которая размещена в папке «data1», что содержится в корне сайта. Но это пока не так. Наши файлы и папки все ещё находятся в папке «files».
  • Откройте файл «запуска» слайдера в любом текстовом редакторе. Например в блокноте.
  • И замените (автозаменой) все пути к файлам, добавив перед ними «files/». Например, найти «data1/images/» и заменить на «files/data1/images».
  • Скопируйте весь код и вставьте его в область на первой вкладке объекта HTML и виджеты (рисунок ниже). Тем самым Вы размещаете слайдер непосредственно на странице Вашего сайта.

Уроки WebSite X5

  • Сохраните изменения и проверьте результат.
  • Если всё правильно, экспортируйте сайт.

Если файлов и связанных со слайдером папок много, десятки или сотни, предлагаю не добавлять их «вручную» через кнопку, а вставить только HTML-код «запускаемого файла». После этого при помощи FTP-клиента или панели управления хостингом скопировать все файлы и папки в директорию «files».

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

Надеюсь, что эти уроки по WebSite X5 Вам пригодятся. Если у Вас есть темы для дальнейших уроков, пишите о них в комментариях к статьям. Постараюсь рассмотреть их в дальнейшем.

Если у Вас возникли вопросы касательно того, как и где можно купить WebSite X5, то можете обратиться к статье «Тонкости покупки Website X5 Evolution 10».

В следующей статье «Работа в Website X5. Уроки (часть 3)» мы рассмотрим такие вопросы как: вылетает или зависание программы, проблема с отправкой писем письма, кракозябры в Website X5, загрузка файлов с сайта, ссылки по тексту, вставка рекламы Google AdSense, открытие формы во всплывающем окне и перенаправление на мобильную версию сайта. Плюс, есть ещё много того, что может быть полезным на практике в четвёртой части уроков.

Видео уроки Website X5 13 и 12Видео уроки Website X5 13 и 12

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

 

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