1. Кнопка «Читати далі»
2. Кнопки соціальних мереж збоку сайту
3. Кнопка «Вгору»
4. Вставка слайдера на сторінку
5. Схожі матеріали

У попередній статті « Уроки 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.
• Виберіть позицію і кількість кнопок.

• Натисніть на кнопку Generate Code.
• З вікна, що з'явилося скопіюйте код.
• Перейдіть в 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>» (без лапок).

Нижче вказаному спосіб створення кнопки вгору буде працювати і з об'єктом Список продуктів.

• На першому кроці створення сайту перейдіть на вкладку Експерт.
• У спадающем списку користувача код виберіть Після закривається тега 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», почнеться показ слайдів. Розглянемо, як розмістити цей слайдер безпосередньо всередині сторінки Вашого сайту.

На жаль, 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 і віджети (малюнок нижче). Тим самим Ви розміщуєте слайдер безпосередньо на сторінці вашого сайту.

• Збережіть зміни і перевірте результат.
• Якщо все правильно, експортуйте сайт.

Якщо файлів і пов'язаних зі слайдером папок багато, десятки або сотні, пропоную не додавати їх «вручну» через кнопку, а вставити тільки HTML-код «запускається файлу». Після цього за допомогою FTP-клієнта або панелі управління хостингом скопіювати всі файли і папки в директорію «files».

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

Сподіваюся, що ці уроки по WebSite X5 Вам знадобляться. Якщо у Вас є теми для подальших уроків, пишіть про них в коментарях до статей. Постараюся розглянути їх в подальшому.

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

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

Схожі матеріали

Корисні посилання: