Эти файлы являются заглушками и, по требованиям CMS, должны отображать пустую страницу при обращении к этим папкам напрямую.
Далее, в папке css создайте пустой файл стилей template.css, а в папке language подпапку en-GB, которая будет содержать пустой файл en-GB.tpl_whitesquare.ini и файл en-GB.tpl_whitesquare.sys.ini со следующим содержимым:
TPL_WHITESQUARE_XML_DESCRIPTION="Whitesquare is the Joomla 3 site template."
Давайте подробно разберем, что все это значит. Папка language нужна для локализации, она может содержать подпапки с различными языками: en-GB, ru-RU и т.д. Каждая языковая папка включает два файла с ключами. Ключи представляют собой пару с названием ключа и его значением. Названия ключей для разных языков будут одинаковыми, а значения – разными. Такой механизм позволяет использовать шаблон для создания сайтов на разных языках. Поскольку это учебный пример, будем использовать только английский язык – en-GB. Первый файл en-GB.tpl_whitesquare.ini будет содержать ключи, которые увидят пользователи сайта, а второй - en-GB.tpl_whitesquare.sys.ini будет содержать ключи административных функций.
Далее нужно создать пустые файлы component.php, error.php и index.php. Они нам понадобятся в будущем.
Следующим шагом добавим картинки: favicon.ico, template_preview.png и template_thumbnail.png. Последние две – это превьюшки будущего шаблона и они имеют размеры 640х480 и 206х150 соответственно.
Последний файл, который нужно добавить – это templateDetails.xml. На данном этапе - это самый важный файл, он содержит подробное описание нашего шаблона:
whitesquare
2015-02-25
pcklab
http://www.pcklab.com
2014 Pixel Cook Laboratory. All Rights Reserved.
GNU General Public License version 2 or later; see LICENSE.txt
1.0.0
TPL_WHITESQUARE_XML_DESCRIPTION
css
images
js
language
component.php
error.php
favicon.ico
index.php
template_preview.png
template_thumbnail.png
templateDetails.xml
en-GB/en-GB.tpl_whitesquare.ini
en-GB/en-GB.tpl_whitesquare.sys.ini
Большая часть содержимого этого файла понятна, необходимо пояснить только следующее:
Поле description содержит тот самый ключ локализации, который мы указали в en-GB.tpl_whitesquare.sys.ini
Поле files содержит полный перечень всех файлов и папок, лежащих в корне шаблона.
Поле languages содержит список языковых файлов, а поле positions нам понадобится чуть позже.
Теперь, когда каркас шаблона готов, давайте добавим его в CMS. Для этого откройте панель администратора Joomla!, выберите пункт меню Extension -> Extension manager, перейдите на вкладку Install from Directory и в поле Install Directory укажите путь до папки whitesquare, в которой мы создавали файлы шаблона.
Нажмите кнопку Install и шаблон добавится в систему. Остается только активировать шаблон. Зайдите в меню Extension -> Template manager, найдите шаблон whitesquare в списке и в поле Default, нажмите на звездочку, это сделает наш шаблон – шаблоном по умолчанию. После этого уже можно открыть адрес сайта, где установлена Joomla! и увидите пустую страницу нашего сайта.
Предварительный осмотр
Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также, на всех страницах, кроме главной, есть сайдбар слева и название страницы. Поиск и все виды меню мы оформим в виде модулей Joomla!, а все тексты будут оформлены через механизм локализации.
Структура страниц Большинство руководств по созданию шаблонов для Joomla! ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на Joomla! в рамках предоставленных макетов.Давайте начнем со структуры страниц. Управление страницами осуществляется в панели администратора через меню Content -> Article Manager. Для добавления новой страницы нажмите кнопку New и заполните форму. В поле Title введите заголовок страницы. Остальные поля оставьте без изменений. Добавьте таким образом страницы Home, About us, Services, Partners, Customers, Projects, Careers, Contact. После добавления, список страниц должен выглядеть вот так:
Давайте подробно разберем, что здесь написано. Вначале идет PHP блок, в котором мы определяем необходимые переменные. Первая строка – это стандартная проверка безопасности Joomla! Далее мы устанавливаем переменные приложения, документа, меню и языка. Для подключения стилей и изображений также понадобится переменная, содержащая путь до нашего шаблона. И последняя переменная будет содержать проверку - является ли показываемая страница домашней. Помимо прочего, в этом же блоке подключаем локальный CSS файл нашего шаблона и удаленные стили шрифтов.
Далее идет стандартный html шаблон, в теле которого поместим два блока - .wrapper и footer. Секция head начинается с подключения стандартных заголовков Joomla! Дальше идет мета-тег перевода Internet Explorer в современный режим, а затем специальный скрипт для поддержки HTML5 тегов в старых версиях IE. Блок.wrapper содержит пустые блоки для шапки и заголовка страницы. Последней, но самой важной командой является подключение компонента внутри блока.wrapper – именно она будет добавлять содержимое страницы в шаблон и отображать информационные сообщения.
Теперь нужно стилизовать получившуюся страницу. Сохраните фон страницы в файл images/bg.png и добавьте немного базовых стилей в файл template.css:
Показать код
body {
margin: 0;
border-top: 5px solid #7e7e7e;
background: #f8f8f8 url(../images/bg.png);
color: #8f8f8f;
font: 12px Tahoma, sans-serif;
}
a {
color: #525252;
}
img {
border: 0;
}
p {
margin: 20px 0;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
}
.inputbox {
padding: 0 10px;
height: 30px;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
color: #b2b2b2;
vertical-align: top;
}
.button {
height: 32px;
border: none;
background-color: #29c5e6;
color: #fff;
font-family: "Oswald", sans-serif;
}
.image {
outline: 1px solid #c9c9c9;
border: 1px solid #fff;
}
figure img {
display: block;
}
.wrapper {
margin: auto;
max-width: 960px;
}
header {
padding: 20px 0;
}
aside {
float: left;
width: 250px;
}
aside + .item-page {
margin-left: 280px;
padding-bottom: 50px;
}
footer {
clear: both;
background: #7e7e7e;
color: #dbdbdb;
font-size: 11px;
}
После этих действий у нас должна появиться серая страница с большим нестилизованным заголовком. К нему мы вернемся позже.Логотип
После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.svg?1. В блок header нашего шаблона вставьте разметку для логотипа:
">
В качестве альтернативного текста для изображения вставляется текст через стандартную функцию локализации Text::_(). Ключа TPL_WHITESQUARE_LOGO у нас еще нет, поэтому давайте добавим его в файл \language\en-GB\en-GB.tpl_whitesquare.ini:
TPL_WHITESQUARE_LOGO="Whitesquare logo"
К сожалению, после этого текст не появится на странице сайта. Дело в том, что мы добавляем ключ локализации в шаблон, который уже используется системой, а Joomla! так устроена, что она читает ключи локализации из этого файла только при первоначальной установке шаблона. Можно конечно удалить шаблон и добавить его в систему заново, но мы поступим проще – добавим этот же ключ в системный файл {joomla_root}\language\en-GB\en-GB.tpl_whitesquare.ini, где {joomla_root} – это папка, в которую установлена Joomla!
Joomla! уже содержит собственный модуль формы поиска. Его можно найти разделе Extensions -> Module Manager панели администратора. Если в вашей CMS он не установлен, то установить его можно, нажав кнопку New и выбрав из списка пункт Search.
Для того, чтобы поместить этот модуль в шаблон – нужно создать собственную «позицию» для этого модуля. Позиции (positions) – это специально размеченные области шаблона, в которые вставляются модули. Позиции описываются в файле templateDetails.xml в блоке positions:
search
После этого вернитесь в Module Manager и откройте модуль Search на редактирование. И в полях укажите следующие значения:
Box Label: пробел
Box Text: Search
Search Button: Yes
Button position: Right
Search Button Image: No
Button text: GO
Show Title: Hide
Position: Whitesquare Search
А на вкладке Advanced в поле Module Class Suffix введите «-block». Это позволит разделить стили формы поиска от содержимого страницы поиска.
Теперь, когда модуль подготовлен, нужно вставить его в шаблон index.php:
...
Осталось добавить стили в template.css:
Показать код
Search-block {
float: right;
}
.search-query {
margin-right: -4px;
}
Меню на страницах сайта создается в три этапа: сначала нужно создать абстрактное меню и определить его пункты, затем определить для него позицию в шаблоне и последним этапом создать модуль, который свяжет абстрактное меню с конкретной позицией.
Управление списками меню осуществляется в разделе Menus -> Menu Manager панели администратора. По умолчанию там уже есть меню под названием Main Menu. Зайдите в него.
Для того, чтобы создать новый пункт меню – нажмите кнопку New и заполните открывшуюся форму – следующим образом:
Menu Title: название страницы, например About us
Menu Item Type: Single Article
Select Article: About us
Создайте аналогичным образом все пункты главного меню: Home, About us, Services, Partners, Customers, Projects, Careers, Contact.
…
menu
Далее нужно создать модуль, который будет содержать меню. Модуль главного меню по умолчанию уже установлен в Joomla!, он называется Main Menu. Откройте его через меню Extensions -> Module Manager -> Main Menu. В поле Select Menu укажите Main Menu, а в поле Position: Whitesquare Menu. Поле этого нужно перейти на вкладку Advanced и в поле Module tag выбрать значение nav, а в поле Menu Class Suffix ввести «-top». Это позволит нам задавать CSS классы для этого меню более гибко и семантично.
Давайте теперь добавим нужную позицию в сам шаблон сразу после шапки:
...
На данном этапе меню уже появится на страницах, но без стилей. Стилизуем его:
Показать код
Main-navigation {
border: 1px solid #e7e7e7;
background: #f3f3f3;
}
.menu-top {
margin: 0;
padding: 0;
}
.menu-top li {
display: inline-block;
margin: 0;
padding: 10px 30px;
list-style-position: inside;
text-transform: uppercase;
font: 14px "Oswald", sans-serif;
}
.menu-top li.current {
background: #29c5e6;
}
.menu-top a {
color: #b2b2b2;
text-decoration: none;
}
.menu-top li.current a {
color: #fff;
}
Joomla! автоматически вставляет заголовки статей в содержимое страницы, но на главной странице нам заголовок не нужен, а на других, он должен иметь совсем другую верстку, поэтому давайте просто отключим автоматическую вставку заголовка и вставим заголовок внутри шаблона так, как это нам нужно.
Для начала немного теории. Настройки отображения элементов страниц задаются в Joomla! в трёх местах:
- В настройках Article Manager задаются глобальные настройки для всех статей.
- В свойствах каждой статьи задаются настройки этой статьи и перебивают глобальные
- Если на странице добавлено меню, то настройки пункта меню, указывающего на данную страницу, будут перебивать все остальные настройки
- В панели администратора зайдите в Content -> Article manager, нажмите кнопку Options и на первой вкладке Articles для всех полей поставьте значения Hide и No.
- Далее, там же, в Article manager зайдите в каждую статью на вкладку Options и поставьте для всех полей значение Use Global.
- И последним шагом зайдите в Menus -> Menu Manager -> Main Menu и для каждой станицы на вкладке Options так же поставьте для всех полей значение Use Global.
Теперь нужно стилизовать получившийся блок. Сохраните фон заголовка в файл images /h1-bg.png и добавьте стилевые правила:
Показать код
Main-heading {
margin: 30px 0;
padding-left: 20px;
background: transparent url(../images/h1-bg.png);
}
.main-heading h1 {
display: inline-block;
margin: 0;
padding: 0 10px;
background: url(../images/bg.png);
color: #7e7e7e;
text-transform: uppercase;
font: 40px/40px "Oswald", sans-serif;
}
Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images
Images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок
После того, как все ресурсы подготовлены, давайте взглянем на блок Sitemap. Он состоит из двух колонок. Сейчас, когда нативная поддержка переноса текста по столбцам не очень хорошо поддерживается в популярных браузерах гораздо проще сделать меню, состоящее из двух столбцов. Для этого в разделе Menus -> Menu Manager создайте меню Sitemap left с пунктами Home, About, Services и Sitemap right с пунктами Partners, Support и Contact. Пункты меню должны ссылаться на соответствующие статьи. Для каждого из этих двух меню нужно создать позиции sitemap-left и sitemap-right и связать меню с позициями через новые модули Sitemap left и Sitemap right. При добавлении модулей на вкладке Advanced в поле Menu Class Suffix вставьте значение –sitemap, для того, чтобы в CSS стилях отличать этот тип меню от остальных.
Далее делаем вёрстку в блоке footer файла index.php:
23 oct
Nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
">В этом блоке используется несколько локализованных строк, давайте их добавим в файлы локализации, как мы делали в блоке логотипа:
TPL_WHITESQUARE_TWITTER_FEED_TITLE="Twitter feed"
TPL_WHITESQUARE_SITEMAP_TITLE="Sitemap"
TPL_WHITESQUARE_SOCIAL_TITLE="Social networks"
TPL_WHITESQUARE_COPYRIGHT="Copyright 2012 Whitesquare. A pcklab creation"
Прописываем стили в template.css:
Показать код
Footer-content {
margin: auto;
padding: 10px 0;
max-width: 960px;
height: 90px;
}
.footer-heading {
margin: 0 0 10px 0;
border-bottom: 1px solid #919191;
color: #fff;
text-transform: uppercase;
font: 14px "Oswald", sans-serif;
}
footer a {
color: #dbdbdb;
}
footer p {
margin: 5px 0;
}
.twitter-time {
color: #b4aeae;
}
.twitter {
float: left;
width: 300px;
}
.twitter p {
padding-right: 15px;
}
.sitemap {
float: left;
margin-left: 20px;
padding-right: 15px;
width: 150px;
}
.sitemap .column {
display: inline-block;
margin-left: 40px;
}
.sitemap .column.first {
margin-left: 0;
}
.menu-sitemap {
margin: 0;
padding: 0;
list-style-type: none;
}
.sitemap a {
display: block;
margin-bottom: 5px;
text-decoration: none;
font-size: 12px;
}
.sitemap a:hover {
text-decoration: underline;
}
.social {
float: left;
margin-left: 20px;
width: 130px;
}
.social-icon {
display: inline-block;
margin-right: 10px;
width: 30px;
height: 30px;
background: url(../images/social.png) no-repeat;
}
.social-icon-small {
display: inline-block;
margin: 5px 6px 0 0;
width: 16px;
height: 16px;
background: url(../images/social-small.png) no-repeat;
}
.twitter-icon {
background-position: 0 0;
}
.facebook-icon {
background-position: -30px 0;
}
.google-plus-icon {
background-position: -60px 0;
}
.vimeo-icon {
background-position: 0 0;
}
.youtube-icon {
background-position: -16px 0;
}
.flickr-icon {
background-position: -32px 0;
}
.instagram-icon {
background-position: -48px 0;
}
.rss-icon {
background-position: -64px 0;
}
.footer-logo {
float: right;
margin-top: 20px;
text-align: right;
font-size: 10px;
}
В итоге внутренняя страница сайта должна выглядеть вот так:
Главная страница у нас уже создана. Наполнение ее контентом выходит за рамки создания шаблона Joomla!, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самого шаблона. Первым делом необходимо нарезать все изображения этой страницы и сохранить в папку images, которая находится в корне папки, где установлена Joomla!. Назовём эти изображения так:
Home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png
Далее, перейдите в панели администратора к форме редактирования главной страницы Content -> Article Manager -> Home и на вкладке Content нажмите Tools -> Source code и введите содержимое страницы:
Показать код
Fusce vitae nibn quis diam fermentum Etiam adipscing ultricies commodo.
Read more
A word from our ceo
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.
Yane Naumoski, CEO
ServicesRead more
Our teams
Lorem ipsum
Lorem ipsum
Lorem ipsum
24/7/365 Support
Our clients
Теперь осталось стилизовать данный код.
Показать код
Slider {
margin-top: 30px;
text-transform: uppercase;
font-weight: 300;
font-family: "Oswald", sans-serif;
}
.slider .content {
padding: 30px 40px;
height: 220px;
background: #e2e2e2;
}
.slider .title {
color: #5a5a5a;
font-size: 42px;
}
.slider .subtitle {
color: #acacac;
font-size: 20px;
}
.slider .links {
display: block;
margin: 0;
padding: 10px;
border-bottom: 1px solid #e7e7e7;
background: #f3f3f3;
color: #8f8f8f;
counter-reset: list 0;
}
.slider .links li {
display: inline-block;
margin-right: 55px;
font-size: 18px;
line-height: 23px;
cursor: pointer;
}
.slider .links li.active {
color: #29c5e6;
}
.slider .links li:before {
display: inline-block;
margin-right: 10px;
width: 23px;
background: #8f8f8f;
color: #fff;
content: counter(list) " ";
counter-increment: list;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.slider .links li.active:before {
background: #29c5e6;
}
.teaser {
display: block;
float: left;
box-sizing: border-box;
padding: 0 10px;
vertical-align: top;
}
.teaser .heading {
margin: 40px 0 20px;
height: 16px;
background: transparent url(../images/h1-bg.png);
}
.teaser .bullet {
display: inline-block;
margin-right: -4px;
width: 16px;
height: 16px;
background: #29c5e6;
vertical-align: top;
}
.teaser .heading-text {
display: inline-block;
margin: 0;
padding: 0 10px;
background: url(../images/bg.png);
text-transform: uppercase;
font: normal 14px/16px "Oswald", sans-serif;
}
.teaser .image {
float: left;
margin-right: 20px;
}
.teaser .small-block {
margin-bottom: 10px;
}
.teaser .small-block .image {
margin-right: 10px;
}
.teaser .more,
.teaser .more a {
margin-bottom: 0;
color: #525252;
}
.teaser-small-heading {
display: block;
margin: 0;
color: #525252;
text-transform: uppercase;
font-weight: normal;
font-size: 11px;
}
.teaser-small-paragraph {
margin: 4px 0;
font-size: 11px;
}
.clients img {
display: inline-block;
margin-right: 30px;
}
Давайте добавим его в index.php перед вызовом контента страницы:
">
Этот блок будет выводиться на всех страницах, кроме главной. Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов.
Для полноты картины в качестве подменю предлагаю показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали другие виды меню. Создайте статьи под названиями: Lorem ipsum, Donec tincidunt laoreet, Vestibulum elit, Etiam pharetra, Phasellus placerat. Затем создайте новое меню под названием Submenu и добавьте в него вышеперечисленные страницы. После этого, создайте позицию submenu в templateDetails.xml и модуль Submenu, использующий эту позицию и меню Submenu. В свойствах модуля на вкладке Advanced укажите Menu Class Suffix: «-aside»
Блок карты особых вопросов не вызывает, не забудьте только добавить новый ключ локализации:
TPL_WHITESQUARE_OFFICES_TITLE="Our offices"
В качестве заглушки для карты создайте пустой файл sample.png и сохраните его в папку images в корне сайта Joomla!
В заключение, нам нужно добавить стили для вёрстки:
Показать код
Aside-navigation {
border: 1px solid #e7e7e7;
background: #f3f3f3;
}
.menu-aside {
margin: 0;
padding: 0;
text-transform: uppercase;
}
.menu-aside li {
padding: 10px;
border-top: 1px solid #e7e7e7;
list-style: square inside;
font: 14px "Oswald", sans-serif;
font-weight: 300;
}
.menu-aside li:first-child {
border: none;
}
.menu-aside li.current-menu-item,
.menu-aside li.current-menu-item a {
color: #29c5e6;
}
.menu-aside a {
color: #8f8f8f;
text-decoration: none;
}
.sidebar-heading {
margin: 30px 0 0 0;
padding: 10px;
background: #29c5e6;
color: #fff;
text-transform: uppercase;
font: 14px "Oswald", sans-serif;
}
.map {
margin: 0 0 30px 0;
padding: 10px;
border: 1px solid #e7e7e7;
background: #f3f3f3;
}
Теперь давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в папку images сайта Joomla! Назовите изображения вот так:
About-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg
Показать код
“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”
John Doe, Lorem IpsumLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non neque ac sem accumsan rhoncus ut ut turpis. In hac habitasse platea dictumst. Proin eget nisi erat, et feugiat arcu. Duis semper porttitor lectus, ac pharetra erat imperdiet nec. Morbi interdum felis nulla. Aenean eros orci, pellentesque sed egestas vitae, auctor aliquam nisi. Nulla nec libero eget sem rutrum iaculis. Quisque in enim velit, at dignissim est. Nulla ullamcorper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat condimentum metus. Donec sodales aliquam orci id suscipit. Proin sed risus sit amet massa ultrices laoreet quis a erat. Aliquam et metus id erat vulputate egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec vel nisl nibh. Aenean quam tortor, tempus sit amet mattis dapibus, egestas tempor dui. Duis vestibulum imperdiet risus pretium pretium. Nunc vitae porta ligula. Vestibulum sit amet nulla quam. Aenean lacinia, ante vitae sodales sagittis, leo felis bibendum neque, mattis sagittis neque urna vel magna. Sed at sem vitae lorem blandit feugiat.
Donec vel orci purus, ut ornare orci. Aenean rutrum pellentesque quam. Quisque gravida adipiscing augue, eget commodo augue egestas varius. Integer volutpat, tellus porta tincidunt sodales, lacus est tempus odio, fringilla blandit tortor lectus ut sem. Pellentesque nec sem lacus, sit amet consequat neque. Etiam varius urna quis arcu cursus in consectetur dui tincidunt. Quisque arcu orci, lacinia eget pretium vel, iaculis pellentesque nibh. Etiam cursus lacus eget neque viverra vestibulum. Aliquam erat volutpat. Duis pulvinar tellus ut urna facilisis mollis. Maecenas ac pharetra dui. Pellentesque neque ante, luctus eget congue eget, rhoncus vel mauris. Duis nisi magna, aliquet a convallis non, venenatis at nisl. Nunc at quam eu magna malesuada dignissim. Duis bibendum iaculis felis, eu venenatis risus sodales non. In ligula mi, faucibus eu tristique sed, vulputate rutrum dolor.
John Doeceo
Saundra Pittsleyteam leader
Julio Simsersenior developer
Margery Venutisenior developer
Fernando Tondreadeveloper
Ericka Nobrigaart director
Cody Roussellesenior ui designer
Erik Wollmansenior ui designer
Dona Shoffux designer
Darryl Bruntonui designer
И стили в template.css:
Показать код
Main-blockquote {
margin: 0;
padding: 10px 20px;
background: #29c5e6;
font-weight: 300;
font-family: "Oswald", sans-serif;
}
.main-blockquote p {
margin: 0;
color: #fff;
font-style: italic;
font-size: 33px;
}
.main-blockquote cite {
display: block;
margin: 0;
color: #1d8ea6;
text-align: right;
font-style: normal;
font-size: 20px;
}
.content-heading {
clear: both;
margin: 30px 0 0 0;
padding: 0 10px;
background: #29c5e6;
color: #fff;
text-transform: uppercase;
font: 30px "Oswald", sans-serif;
font-weight: 300;
}
.footer-content {
margin: auto;
padding: 10px 0;
max-width: 960px;
height: 90px;
}
.footer-heading {
margin: 0 0 10px 0;
border-bottom: 1px solid #919191;
color: #fff;
text-transform: uppercase;
font: 14px "Oswald", sans-serif;
}
footer a {
color: #dbdbdb;
}
footer p {
margin: 5px 0;
}
.team-row figure {
display: inline-block;
margin: 20px 0 0;
font-weight: 300;
font-family: "Oswald", sans-serif;
}
.team-row figure + figure {
margin-left: 43px;
}
.team-row figcaption {
margin-top: 5px;
font-weight: 300;
font-size: 16px;
}
.team-row .occupation {
display: block;
color: #29c5e6;
font-size: 14px;
}
В самом начале, когда мы создавали шаблон шапки, мы добавили в него поиск. Результатом поиска является страница, которая сейчас не очень хорошо выглядит. Давайте добавим для нее стили:
Показать код
Search {
margin-left: 280px;
padding-bottom: 50px;
}
.icon-search {
display: inline-block;
width: 21px;
height: 21px;
background: url(../images/search.png) center center no-repeat;
}
.search .btn-toolbar {
height: 30px;
}
Модуль поиска предусматривает, что в шаблоне должна быть иконка поиска для кнопки, но поскольку в дизайне ее нет, то придется добавить ее самим. Для этого найдите любую бесплатную иконку с изображением лупы и сохраните ее под названием search.png в папку images шаблона. Размер картинки должен быть 16х16 пикселей.Страница печати Помимо index.php в корне шаблона лежат еще 2 php файла. Первый из них – это сomponent.php. Этот файл отображает страницу печати, которую пользователь сможет открыть, кликнув на иконку печати в содержании каждой статьи. В самом начале мы отключили показ этих иконок в статьях через меню Content -> Article Manager -> Options -> Show Print Icon в панели администратора. Но, поскольку мы делаем универсальный шаблон, создать этот файл мы обязаны. Наполните его следующим содержимым:
Как вы видите, этот файл полностью повторяет структуру файла index.php. Отличие только в том, что мы убрали ненужные для печати блоки: шапку, футер и боковую колонку.
Последняя страница, которую осталось оформить – это страница вывода ошибки. Ее шаблон описывается в файле error.php. Код этого файла будет выглядеть следующим образом:
">
В целом структура здесь аналогична предыдущим страницам, но есть несколько нюансов. Во-первых, данный тип страницы не поддерживает конструкции вида «», поэтому пришлось отказаться от всех модулей и даже динамического блока head, поэтому теги в блоке head прописаны вручную. В заголовке страницы появился новый ключ локализации: TPL_WHITESQUARE_ERROR со значением «Error». Не забудьте прописать его в файлах локализации. И в области контента страницы выводится сообщения с кодом и текстом ошибки.
Добавить метки
Здравствуйте, уважаемые читатели. Эта статья посвящена тем, кто только начинает осваивать движок Джумлы. В сегодняшнем уроке мы с вами научимся создавать и публиковать статьи (материалы) в Joomla, научимся настраивать отображение кнопки Подробнее для перехода на полную версию статьи, а также научимся вставлять картинки в статьи.
Создание и публикация статьи (материала) в Joomla.Давайте для начала просто попробуем создать и опубликовать первый материал (article) на сайте и посмотрим, появится ли он на нашем сайте. Запомните, что любые операции с материалами в Joomla (создание новых, редактирование существующих, публикация, снятие с публикации и удаление статей) производятся в менеджере материалов. Чтобы туда попасть логинимся в админку Joomla, далее в верхнем меню переходим Материалы -> Менеджер материалов . Для создания материала жмем наверху на кнопку Создать .
Мы попадем на страницу создания материала. Данная страница состоит из нескольких вкладок. При добавлении на сайт новых статей я пользуюсь в основном вкладками: Материал и Публикация . Давайте пробежимся по всем вкладкам.
Вне вкладок расположено два элемента:
Заголовок . Здесь указываем название нашей будущей статьи. Содержимое данного поля по умолчанию отобразится в теге title страницы (это то, что выводится в заголовке окна браузера) и в тегах h1 (или h2 , в зависимости от используемого шаблона).
Алиас . Псевдоним, использующийся для формирования URL адреса страницы с нашим материалом. Если оставить пустым, то джумла сама заполнит это поле, переведя название статьи в транслит. Можно заполнить самому латинскими буквами без пробелов, допускаются дефисы и знаки подчеркивания.
Остальные элементы расположены во вкладках.
Вкладка Материал. Это основная вкладка. В ней присутствует текстовый редактор, в котором мы и набиваем непосредственно текст статьи. По умолчанию Joomla поставляется с WYSIWYG редактором TinyMCE . Кнопки редактора очень похожи на кнопки обычного текстового редактора. При наведении на кнопку появляется всплывающая подсказка, так что думаю здесь вы и сами разберетесь.
По умолчанию текстовый редактор отображается в стандартном режиме. В этом режиме отображаются не все кнопки. Как перевезти редактор в расширенный режим для отображения всех кнопок я расскажу ниже.
Справа от редактора есть еще группа полей, которые показаны на рисунке ниже.
Давайте пробежимся по ним.
Поле Состояние является важным, т.к. позволяет публиковать или снимать статью с публикации на сайте. Не опубликованные статьи не выводятся на сайте. Выставляем данное поле в значение Опубликовано .
В поле Категория выбираем из выпадающего списка категорию к которой будет относится статья. Так как мы с вами категории еще не создавали, то по умолчанию имеем только одну единственную категорию Uncategorised . Создавать категории мы будем позже в следующих уроках.
Назначение поля Избранные разберем чуть ниже в данной статье. Пока оставляем по умолчанию в значении Нет .
В поле Доступ выставлено значение по умолчанию Public , т.е. данный материал после публикации его на сайте будет доступен всем посетителям сайта. Если вы захотите в будущем, чтобы статья была доступна только зарегистрированным пользователям, нужно выбрать из выпадающего списка Registered .
Поле Язык используется только в случае, если вы создаете мультиязычный сайт. Оставляем его настройки по умолчанию в значении Все .
Следующее поле Метки появилось в Joomla начиная с версии 3.x. Метки (их еще называют тегами, англ. tags ) чем то напоминают категории, но в то же время они дополняют их, позволяя объединять в группы материалы из разных категорий. Пока оставляем это поле пустым.
Возьмите за правило всегда заполнять поля Мета-тег Description и Мета-тег Keywords . Многие вебмастера утверждают, что поисковики уже не учитывают содержимое данных полей и их заполнять не нужно. Хочу вам сказать, что по крайней мере Гугл учитывает содержимое этих полей. Вкратце скажу, что содержимое мета-тега Description используется поисковыми системами при формировании сниппетов в поисковой выдаче, а при помощи мета-тега Keywords вы помогаете понять поисковой системе какие ключевые слова несут основную смысловую нагрузку в данной статье. Ключевые слова заполняем через запятую. Пять шесть ключевиков достаточно, указываем те слова, по которым можно составить представление о содержании статьи.
Поле Мета-тег Robots указывает поисковым роботам каким образом индексировать вашу статью и нужно ли ее вообще индексировать. Если вы хотите запретить индексирование данной статьи (т.е. чтобы она не появлялась в выдаче поисковых систем), то можете выставить это поле в значение No index . Значение No Follow означает, будут ли переходить поисковые роботы по ссылкам, содержащимся на данной странице и передавать другим страницам, на которые ведут ссылки, "вес" текущей страницы. В нашем случае оставляем это поле в значении По умолчанию , что равноценно значению Index, Follow .
Остальные поля в данной вкладке заполнять не обязательно.
Сохраняем статью и открываем главную страницу сайта, чтобы посмотреть появилась ли наша статья.
Как видим, статья не появилась. Давайте разбираться, почему она не появилась.
Нам нужно понять, что выводится на главной странице сайта сразу после его установки и как сделать, чтобы созданная нами статья появилась на сайте. Для этого в верхнем меню админки Джумлы переходим по пунктам Меню - > Менеджер меню . Открываем одно единственное меню. Открываем в нем единственный пункт меню Главная и видим, что пункт меню Главная выводит Избранные материалы .
Значит, чтобы наша статья выводилась на главной странице сайта, нам нужно пометить ее как избранную. Возвращаемся в менеджер материалов, открываем созданную нами статью на редактирование и справа от редактора выставляем поле Избранные в значение Да . Сохраняем изменения и обновляем главную страницу сайта. Мы видим, что наша статья появилась на главной странице сайта. Таким образом мы выяснили, что на главной странице сайта по умолчанию после его установки выводятся избранные материалы.
В редакторе появился горизонтальный текстовый разделитель. Весь текст, который до разделителя, появится в анонсе. Сохраняем статью и смотрим. Теперь на главной выводится только часть статьи, которая до разделителя кнопки Подробнее . При переходе по кнопке Подробнее попадаем на полную версию статьи.
Вставляем картинки в статью на Joomla.Какая же статья обходится без красивой картинки? Редактор TinyMCE, который используется по умолчанию в Joomla, позволяет легко и быстро добавить картинку в материал.
Есть два способа отображения картинки в материале:
- Первый способ - это когда мы загружаем картинку на сервер нашего сайта и затем встраиваем ее в наш материал.
- Второй способ - это когда мы заливаем картинку на какой нибудь внешний хостинг картинок типа радикала или на внешние диски (Яндекс.Диск, Google Drive, Microsoft SkyDrive, DropBox) и затем встраиваем картинку в наш материал.
| Отсутствуют исходящие ссылки на внешние ресурсы, т.к. все картинки загружены на сервер сайта. | Каждая такая картинка по сути является исходящей ссылкой на внешний ресурс, где она располагается. Чем больше картинок, тем больше исходящих ссылок на внешние ресурсы. Большое количество исходящих ссылок не любят поисковые системы. Результатом может быть снижение SEO показателей сайта и некоторое проседание позиций сайта в поисковой выдаче. |
| Картинка всегда доступна, пока работает сайт. | Внешний ресурс, где хранятся картинки может оказаться недоступным, и картинки не смогут отображаться на сайте. |
| При открытии страницы сайта картинки подгружаются быстро, т.к. грузятся с локального сервера. | При открытии страницы сайта картинки могут долго подгружаться, т.к. загружаются с внешнего ресурса. |
| Чуть большая нагрузка на сервер, чем при втором способе, т.к. при каждом открытии страницы серверу приходится выполнять работу по отдаче картинки. Заметно только на сайтах с очень большой посещаемостью, на которых много картинок. Решается правильной конфигурацией веб сервера. | Нет нагрузки на сервер вашего сайта, т.к. работа по отдаче картинки возложена на внешний сервер. |
|
Подвержен хотлинкингу. Это когда люди вставляют ваши картинки на других сайтах вторым способом, т.е. в виде ссылок на ваш сайт. В этом случае серверу вашего сайта приходится выполнять дополнительную скрытую работу по отдаче картинки каждый раз, когда кем то запрашивается страница внешнего сайта, на которой опубликована картинка вашего сайта вторым способом. После выбора папки для загрузки картинки с компьютера на сервер прокручиваем модальное окно до самого низа и в разделе Загрузить файл жмем на кнопку Обзор . Выбираем нужную картинку на компьютере, которую хотим загрузить на сервер и жмем на кнопку Загрузить . В итоге наша картинка закачается в выбранную нами папку. Но это еще не все. Мы только закачали картинку на наш сервер и теперь она доступна для вставки в нашу статью. Теперь, чтобы вставить картинку в статью мы выбираем нашу картинку из списка загруженных в нашей папке и жмем на кнопку Вставить , которая расположена в правом верхнем углу модального окна. Вот теперь наша картинка появилась в нужном месте нашего редактора. Но мы видим, что наша картинка вставилась как то не так. Появился ненужный отступ в тексте. Нам нужно, что бы текст огибал картинку слева или справа. Для этого выбираем курсором мыши нашу картинку и жмем на маленькую кнопку insert/edit image в панели кнопок нашего редактора. Появится другое модальное окно, в котором в поле Source уже забит путь к нашей картинке. Переходим во вкладку Advanced и в поле Style вбиваем следующую строку: Float:left; Данное стилевое свойство выравняет картинку по левому краю и заставит текст обтекать ее справа. Для выравнивания картинки по правому краю и соответственно обтекания ее текстом слева вбиваем следующую строку: Float:right; При необходимости, мы также можем задать отступ текста от картинки указав в полях Vertical space и Horizontal space соответственно отступ по вертикали и отступ по горизонтали в пикселях. В поле Border вкладки Advanced можем указать в пикселях ширину границы вокруг картинки. Как расширить текстовый редактор в Joomla.Для того, чтобы перевезти текстовый редактор TinyMCE в расширенный режим, идем в Расширения -> Менеджер плагинов . Находим в списке плагин с названием Редактор - TinyMCE и открываем его. В поле Режим редактора выбираем Расширенный и сохраняем настройки.
Редактор в расширенном режиме имеет уже набор кнопок как на рисунке ниже.
Вот мы и опубликовали первую статью в категории по умолчанию Uncategorised . Наверняка на вашем сайте, который вы собираетесь создать, вы планируете создать несколько разделов и даже подразделов для статей. За это в Joomla отвечает менеджер категорий. В следующем уроке мы научимся создавать категории (разделы) и подкатегории сайта . Вы можете помочь проекту, рассказав о нем в социальных сетях: Спасибо!
You have no rights to post comments |
Страницу и вывести ее в меню. А это – чуть ли не самое основное и самое простое, что нужно уметь делать, чтобы создать сайт.
В «Joomla» есть два вида страниц: статичные и в разделах, чтобы создать статичную, зайдите в админ-панель движка.
Выберите пункт меню «Содержимое», в открывшимся меню выберите «Статичное содержимое».
Нажмите на кнопку «Новый». В открывшемся редакторе впишите заголовок страницы, укажите ее характеристики и свойства. Когда все сделаете, нажмите на кнопку «Сохранить». Страница создана.
Чтобы создать страницу в каком-либо разделе, вам нужно иметь хотя бы один раздел и категорию в нем. Создайте раздел: войдите в админ-панель, выберите пункт «Содержимое» - «Разделы», нажмите на кнопку «Новый», впишите название и заголовок раздела, например, «Новый раздел».
Создайте категорию: зайдите в админ-панель, выберите пункт «Содержимое» - «Категории», нажмите на кнопку новый, впишите названии и заголовок категории, например, «Новая категория». Затем выберите раздел, в котором будет находиться эта категория, то есть «Новый раздел». Сохраните настройки.
Теперь выберите пункт «Содержимое по разделам» в меню «Содержимое». Вы увидите созданный раздел. Зайдите в этот раздел, нажав левую кнопку мышки по разделу. Нажмите на кнопку «Новый», откроется редактор, впишите в нем название и заголовок страницы. Сохранитесь.
Теперь выведите ссылку на эту страницу в меню: зайдите в «Меню» - «mainmenu», нажмите на кнопку «Новый». выберите «Ссылка-объект содержимого», затем страницу, которую вы только что создали. Введите название ссылки, которая будет отображаться в меню. Также вы можете изменить положение ссылки в меню при помощи пунктов «Передвинуть выше» и «Передвинуть ниже».
Видео по теме
Источники:
- как создать страницу в joomla
Создание пустой страницы на сайте в joomla – это несложно. Для правильного безошибочного выполнения операции необходимо действовать согласно правилам создания страницы, внимательно заполняя открывающие пустые поля.
Вам понадобится
- - компьютер
- - браузер
- - учетная запись администратора в joomla
Инструкция
Пройдите авторизацию в админке. Помните, что авторизация в админке и авторизация на сайте – совершенно разные вещи. Для входа в административную панель в адресной строке к адресу вашего сайта необходимо добавить слово "/administrator " . На открывшейся странице заполните поля «логин» и «пароль», созданные заранее. Если логин и пароль введены верно, вы попадете в административную панель.
Выберете в панели инструментов вкладку «Материалы», затем – «Менеджер материалов», затем – «Создать материал».
В открывшемся окне необходимо заполнить следующие поля: «Заголовок», «Title tag», «Категория». Заголовком является небольшое словосочетание или предложение, являющееся названием статьи, которую предполагается поместить на создаваемой странице. Title tag - это заголовок, созданный для поисковых систем. Он будет обрабатываться поисковыми роботами. Title tag может отличаться от основного заголовка, однако обязательно должен содержать ключевую фразу, под которую будет написан текст. Иногда в панели инструментов joomla поля «Title tag» нет. В таком случае в «Title tag» автоматически попадет текст «Заголовка». Если вы все же хотите самостоятельно добавлять данное значение, можно установить специальный плагин contenttitle. Оставшиеся поля либо заполняются автоматически, либо необязательны для заполнения на первых этапах создания страницы.
Создадим страницу с контентом и ведущий на неё пункт меню.
Как создать материал1. В главном меню панели управления Joomla выберите Материалы -> Менеджер материалов .
2. Откроется страница с уже созданными статьями. Их можно просмотреть, отредактировать или удалить, но сейчас нас это не интересует. Чтобы добавить новую статью, нажмите кнопку Создать в левой верхней части страницы.
3. В поле Заголовок введите название статьи.
4. В основное поле вставьте её текст. Создавать материалы прямо из админ-панели удобно, потому как Joomla предлагает для этой цели функциональный и удобный визуальный редактор, основные инструменты форматирования в котором не спрятаны глубоко и у большинства пользователей не вызовут вопросов. Однако есть некоторые возможности, о которых стоит упомянуть.
- Редактор может работать как в визуальном режиме, так и в режиме просмотра исходного кода материала. Чтобы активировать его, нажмите Инструменты -> Исходный код .
- Обратите внимание на вкладки. Самое популярное действие, кроме правки текста - добавление в него картинок. Эта функция в расширенном виде доступна на вкладке Изображения и ссылки .
- Простая вставка картинок (без широких возможностей) спрятана не так далеко: Вставить -> Вставить/редактировать изображение .
Однако вместо загрузки файла картинки такой подход предполагает вставку адреса ссылки, ведущей на рисунок.
- На вкладке Материал есть кнопка Модуль , с помощью которой можно вывести разного рода содержимое (архивы статей, последние, самые популярные посты и т. д.) прямо в материале. Нажмите кнопку Модуль и выберите, информацию какого именно хотите вывести, нажав на его названии.
После выбора в материале появится новая строка кода.
5. Когда материал готов, из раскрывающегося списка Категории выберите раздел, которому он принадлежит (как создавать категории, читайте здесь). Кроме того, вы можете добавить запись в Избранное, если нажмёте Да в одноимённой области.
6. Из раскрывающегося списка Доступ выберите, кто может просматривать материал. По умолчанию установлен уровень доступа Public - это значит, что страница будет находиться в публичном доступе и просмотреть её сможет любой желающий.
7. В поле Метки введите теги поста.
8. Когда материал будет полностью готов к публикации, нажмите кнопку Сохранить .
1. В панели управления Joomla откройте Меню -> Менеджер меню .
2. Загрузится страница со списком доступных меню. Щёлкните на том, в котором должен появиться новый пункт. Шаблон, установленный по умолчанию, содержит три меню: Top (верхнее), Main Menu (отображается справа) и User Menu (меню пользователя, которое появляется только после авторизации на сайте). Новый пункт можно добавить в любое из них, но я создам его в меню Top.
В нём мы видим два совершенно ненужных пункта (Sample Sites и Joomla.org ) и один (Home ), который надо переименовать, он ведёт на главную страницу сайта. Установите флажки рядом с ненужными пунктами и нажмите кнопку В корзину , щёлкните на оставшемся пункте, в поле Заголовок меню открывшейся страницы вместо Home введите Главная и нажмите Сохранить . В результате верхнее меню сайта полностью поменяет структуру.
3. Для добавления пункта в редакторе меню Top нажмите кнопку Создать .
4. Нажмите кнопку Выбрать области Тип пункта меню открывшейся страницы.
5. Из появившегося списка выберите Материалы -> Материал (подробнее об остальных типах меню читайте здесь).
6. В области Выбор материала нажмите кнопку Выбрать .
7. Либо найдите нужный материал в списке имеющихся, либо воспользуйтесь поиском - в поле Фильтр введите заголовок вашей статьи и нажмите Искать . Когда пост будет найден, щёлкните на нём кнопкой мыши.
8. Чтобы добавить пункт, нажмите кнопку Сохранить . Обратите внимание на дополнительные настройки: в частности, вы можете задавать родительский элемент меню (с помощью этой функции можно создавать подменю), устанавливать уровень доступа (как в материалах), изменять порядок расположения элементов и т. д.
Теперь можно перейти на сайт и посмотреть, что получилось - щёлкните на вновь созданный пункт меню и посмотрите свой первый материал.
Создание страницы материала в Joomla.В статье показано как создать страницу в Joomla на примере создания материала (пример видео в конце статьи), основные действия, нюансы для начинающих.
Создание заголовков, вставка текста и изображений, создание ссылки.
Создание страницы в Joomla заключается в прикреплении контента (содержимого - текста, изображений, ссылок и пр.) к определенному адресу (url) с помощью движка. По умолчанию в движке Joomla уже стоит визуальный редактор TinyMCE, но по опыту, для качественного и удобного создания страницы в Joomla рекомендуется установить визуальный редактор JCE от разработчиков движка (CMS) Joomla. Подробнее про установку и настройку JCE для Joomla .
Начало работы в Joomla.Входим в админ панель (Панель управления) Joomla.
В административной панели Joomla нажимаем кнопку в верхнем меню МАТЕРИАЛЫ, всплывает подменю, в нем при наведении курсора на пункт МЕНЕДЖЕР МАТЕРИАЛОВ, справа появляется пункт - СОЗДАТЬ.
Или после нажатия на пункт МЕНЕДЖЕР МАТЕРИАЛОВ, в открывшемся менеджере материалов слева вверху жмем зеленую кнопку СОЗДАТЬ.
Открывается редактор материала, где и будем создавать контент (содержимое) нашей страницы.
Работа в редакторе по созданию контента страницы Joomla.По умолчанию стоит визуальный редактор TinyMCE. Принцип работы в нем похожий.
Но в данном примере будем рассматривать создание материала с помощью редактора JCE, который можно загрузить или установить из JED и в общих настройках системы установить по умолчанию. Одним из достоинств данного редактора является такие моменты, как возможность создавать всплывающие окна изображений, роликов Youtube и пр. Пример создания всплывающего окна изображений в видео ниже. Но для такого функционала дополнительно необходимо установить плагин JCE MediaBox аналогичным образом (см. картинку). После загрузки и установки данных плагинов назначаем в общих настройках системы по умолчанию редактор JCE для создания страниц и редактирования контента в модулях Joomla.
В редакторе JCE - вводим название материала (обязательное поле) (1). Материал необходимо привязать к категории. По умолчанию, если категория в правом окне (2) не выбрана, материал сохраняется в разделе Uncategorized. Создание своей категории можно подобным подобным образом.
Создание адреса страницы материала в Joomla.Адрес материала (url) при включенном в общих настройках параметры SEO (ЧПУ) будет автоматически генерироваться от названия материала. Адрес можно создать вручную (латинскими буквами без пробелов, между словами дефис) в окне Алиас (справа вверху)(3). Создание и редактирование url можно также осуществлять при помощи дополнительных SEO плагинов для Joomla. Про настройку движка Joomla для поиска читайте в статье SEO оптимизация Joomla.
Создание контента (содержимого страницы).Принцип работы визуального редактора для Joomla (JCE) в основном подобен как в документе Microsoft Word. В поле набираем текст, вставляем изображения и ссылки. Для визуального выделения текста и улучшения SEO выбираем заголовки (4). Для чего выделяем нужный текст в окне format и выбираем из списка нужный. В данном случае Heading 1 (Заголовок 1) соответствует тегу h1.
Необходимо знать, что при создании страницы, вставлять копированный текст из Word, тем более с другого сайта, рекомендуется предварительно вставив текст в блокнот, чтоб удалить сторонние стили и ссылки. В крайнем случае, выделить весь текст и нажать кнопку с символом ластика remove formatting. (5).
Вставка изображения в редактор.Для вставки картинки нажимаем на кнопку редактора Insert/Edit image/(1).
В появившемся менеджере изображений (Image manager) выбираем папку на хостинге, куда будем сохранять файл изображения (2).
Или создаем новую папку, называем ее латинскими буквами (3).
Для загрузки файла нажимаем на кнопку с символом изображения с синей стрелкой вверх (Upload) (4).
В открывшемся окне Upload (загрузка) загрузить файл можем двумя способами.
1. Перетягиванием файл из папки на компьютере в окно Upload, (5).
2. Загрузка обычным способом с помощью кнопки с символом лупы Browse выбираем в открывшемся окне свой файл в нужной папке на компьютере и нажимаем открыть (или двойной клик по файлу). (6).
3. Кнопкой Upload загружаем файл в выделенную для него папку на хостинг. (7)
Для того чтобы картинка вставилась в редакторе в нужном месте текста, необходимо нажать на загруженную картинку в Image manager! Чтобы сформировался адрес картинки (путь на хостинге, указывающий какой именно файл из какой папки вставляем в поле редактора страницы.)(1).
Можно выставить свои размеры картинки (2) (или впоследствии масштабировать ее в визуальном редакторе страницы), задать выравнивание по желаемому краю страницы (Alignment) (3), отступы (margin) (4), создать обводку (border) любой ширины и цвета (5) и другие параметры.
Желательно сразу присвоить картинке тег Title во вкладке image manager - Advanced чтобы картинка лучше искалась в интернет поиске по картинкам и название картинки всплывало при наведении на нее курсором на странице сайта.
После того, как предварительно настроили изображение, вставляем его в поле редактора материала кнопкой insert.
Дальнейшая работа с изображением в редакторе Joomla.
После вставки картинки в страницу материала просматриваем, как получилось, и при необходимости настраиваем вид изображения, выделив его. Например: масштабирование (изменение размера) производим, потянув за квадратики (маркеры) на выделенной картинке (1), выравнивание выделенной картинки можно сделать аналогично, как и текст, кнопками в панели редактора (2). Это можно сделать опять через Image manager, как описано выше. Еще про оптимизацию изображений на этой странице.
Создание ссылки в joomla.Создать ссылку можно следующим образом - вставить с помощью кнопки с символом звена цепи. Для этого выделяем текст, нажимаем на кнопку ссылки, и в открывшемся окне в поле URL вводим необходимый адрес со всеми необходимыми настройками атрибутов ссылки. В Joomla ссылки на внутренние страницы пишем без доменного имени. В итоге мы создали ссылку с анкором (текстом).
По умолчанию при сохранении страницы в Joomla настроено состояние Опубликовано. Если страница не до конца оформлена, необходимо справа нажать на зеленую кнопку Опубликовано и в выпадающем списке выбрать Не опубликовано.
Чтобы страница показывалась на сайте, ее необходимо прикрепить к пункту меню или к категории, которая уже опубликована и прикреплена к пункту меню, или адрес вставить ссылкой в текст опубликованной страницы или html модуль.