Керівництво по joomla. Урок 5. Як створити таблицю?

Що криється за нудним словом «таблиця»? Так зовсім нічого. Однак в сучасному інтернеті таблиця - важливий елемент сайту. Більш того, при детальному огляді з`ясовується, що чимала частина існуючих інтернет-ресурсів є звичайні таблиці. Дана обставина змушує мене присвятити черговий урок по роботі з системою управління контентом Joomla, роботі з таблицями.

Нерідко користувачі задають наступне питання: як розмістити кілька зображень в один ряд по центру сторінки. Ця проблема вирішується за допомогою створення і подальшого застосування таблиць. Я пропоную на прикладі рішення вищевказаної проблеми розібратися: як створювати таблиці в Joomla, як змінювати вміст комірок і багато іншого.

Як створити таблицю в Joomla?

Можливо це здасться банальним, але для того щоб створити таблицю в системі управління контентом Joomla необхідно натиснути на кнопку «Вставити редагувати таблицю». Щоб вам не витрачати час на тривалі пошуки цієї кнопки я пропоную звернути погляд на розташований нижче малюнок.

Натискання на цю кнопку викличе вікно під назвою «Властивості таблиці».

Наперед скажу, що після заповнення представлених текстових полів і вибору значень у випадних списках у нас буде створена справжня таблиця. Однак перш ніж вводити значення, давайте розберемося: що за параметри нам пропонується ввести.

Рядки і Колонки - сподіваюся для вас не стане одкровенням те, що кожна таблиця складається з рядків і колонок. Дані текстові поля дозволяють нам ввести необхідну кількість і тих і інших. Ми пам`ятаємо, що нам потрібно розмістити три зображення в один рядок, тому в текстове поле «рядки» ми вводимо значення «1», а в текстове поле «колонки» вводимо значення «3».

Ширина і Висота - кожна таблиця, втім, як і багато на цьому світі, має свої розміри. Тут нам пропонується вказати ширину і висоту таблиці. Дані значення можуть бути представлені в пікселях, і в процентах. Один піксель - це одна точка на екрані вашого монітора. Якщо розмір вказаний в пікселях, то ми говоримо про фіксованому розмірі нашій таблиці. З відсотками все трошки складніше. За 100 відсотків береться певна ширина області екрану, яка виділяється під певний контент, в даному випадку це буде стаття, що мирно розташується в основний центральній частині сайту.

На малюнку наочно показано, що 100 відсотків - це вся область що виділяється під розміщення певного матеріалу. Тобто якщо нам необхідно, щоб таблиця зайняла весь простір даної області по ширині, в поле «ширина», ви виставимо значення 100 відсотків. Однак значення «висота» ми заповнювати не будемо. Завдяки цьому наша таблиця по висоті буде збільшуватися або зменшуватися в залежності від свого вмісту.

Відео: Уроки Bootstrap 3. | Код і Таблиці № 5

Розмір бордюру - якщо це значення буде не дорівнює «0», то наша таблиця буде виглядати у вигляді своєрідної решітки, тобто кожна клітинка буде облямовують рамкою. Товщина цієї самої рамки і вказується в текстовому полі «розмір бордюру». У нашому випадку бордюр - не потрібен, тому ми виставимо в даний текстове поле «0».
Вирівнювання - цей список, що випадає дозволяє вирівняти таблицю по центру, а також по лівій і правій частині екрана. Щоб наші три картинки стояли по середині сторінки, ми вибираємо значення «по центру».

проміжок - щоб наші зображення не зливалися в одне велике полотно, а були самостійними картинками, необхідно зробити відступ один від одного. Для цих цілей служить параметр «Проміжок». Значення виставляються в пікселях.

відступ - як правило, поруч з таблицею розташовується текст та інший контент. Щоб ваша таблиці не зливалася зі своїм оточенням, необхідно зробити відступ, що можна здійснити внісши потрібне значення в пікселях у відповідне поле.

Заголовок - якщо ви хочете, щоб над вашою таблицею красувався текстовий заголовок, то рекомендую заповнити дане текстове поле.

Тепер коли всі параметри введені, ми натискаємо кнопку «Ок» і отримуємо справжню таблицю. Щоб вставити туди зображення, послідовно клацаємо мишкою по комірці і завантажуємо туди зображення. Як це зробити, детально описано в статті «Керівництво по Joomla. Урок 3. Як вставити картинку? »

Після внесення картинок в таблицю ми бачимо, що кожне зображення вирівняно по лівому краю. Набагато естетичніше виглядатиме вирівнювання по центру, тому ми натиснемо виділимо зображення мишкою, а далі натиснемо на кнопку з нехитрою назвою «По центру». Таку операцію повторимо з кожним зображенням.

Відео: # 5 Як створити верхнє меню на Joomla

Як редагувати осередок?

Система управління контентом Joomla дозволяє виробляти редагування кожної окремої комірки створеної вами таблиці. Щоб потрапити у вікно редагування конкретної комірки досить навести курсор мишки на неї і натиснути правою кнопкою мишки. Ця операція дозволить викликати контекстне меню. Бувають випадки коли браузер не дає з`явитися такому меню, а пише, що спливаючі вікна заблоковані. Нескладно здогадатися, що розв`язання цієї проблеми стане розблокування спливаючих вікон.

Відео: Урок 10 | Joomla 3 в деталях | Створення меню на сайті

Після того як з`явилося контекстне меню, ми наводимо мишку на пункт «Осередок». Нам відкриється ще одне меню, яке ми за старою доброю традицією розглянемо докладніше.
Insert Cell Before - вставити ще одну клітинку перед поточної
Insert Cell After - вставити ще одну клітинку після поточної
видалити осередки - дозволяє видалити виділені мишкою комірки
з`єднати осередки - якщо кілька поруч розташованих осередків виділено, цей пункт стає активним. Після натискання дві або більше клітинок перетворюються в одну. Слід знати, що при такому об`єднанні все вміст комірок буде втрачено.
Split Cell Horizontally - розбити осередок по горизонталі.
Split Cell Vertically - розбити осередок по вертикалі. В даному і попередньому випадку поточна комірка ділиться на дві частини, що дуже зручно коли потрібно зробити не зовсім стандартну, але таблицю де кількість осередків по горизонталі і вертикалі відрізнятиметься.
властивості комірки - це дуже серйозний пункт, натиснувши на який у нас з`явиться можливість більш тонко налаштувати зовнішній вигляд і інші параметри осередку. Тому сміливо натискаємо і спостерігаємо нове вікно:

На перший погляд настройки цього вікна дуже сильно схожі на вже знайоме нам «Властивості таблиці». Так як осередок все таки є частиною таблиці не варто забувати, що ширина і висота осередку не може перевищувати ширину і висоту таблиці.
У цьому вікні існують кілька незнайомих нам полів. Зокрема це:
Згортання тексту - дозволяє або забороняє перенесення тексту в осередку на наступний рядок при прівишенія розміру осередку по ширині.
Діапазон рядків (span) - кількість об`єднаних осередків починаючи з поточної і вправо.
Діапазон колонок (span) - кількість об`єднаних осередків починаючи з поточної і вниз.
Мабуть найкориснішим в плані оформлення є кнопка "Колір фону", яка відкриває палітру кольорів, де ми вибираємо на свій смак необхідний колір фону.

Поруч вищеописаної кнопкою розташовується «Колір бордюру», тут ми можемо вказати колір рамки що оточує нашу осередок. Тут слід враховувати, що не всі браузери погодяться відтворювати колір вашого бордюру, а тому цей елемент управління без крайньої потреби краще не чіпати.
Коли всі магічні дії з налаштування осередку зокрема і таблиці в цілому завершені, нам залишається тільки натиснути на кнопку «Зберегти» у правому верхньому кутку екрану і насолодитися видовищем прекрасних фруктів, що розташувалися в ряд по центру екрана.
На сьогодні власне все. На наступному уроці ми поговоримо з вами про посилання, навчимося їх вставляти в тіло статті, в загальному будемо продовжувати велику справу освоєння системи управління контентом Joomla.

З повагою, Гоша Комп`ютерний

Відео: Урок 5. Створення модуля форми Joomla