Уроки Joomla Сделай сайт самостоятельно

Уроки Joomla Сделай сайт самостоятельно (7)

Материалы по работе с Joomla

Понедельник, 25 февраля 2019 14:36

Термины

Автор

Термины в Joomla, и не только

Metadata  Метаданные это информация о других данных. Чтобы попасть на сайт по вашему запросу поисковая система выдает определенные ссылки.  В поле Description следует ввести не очень длинное но разясняющее смысл "определение" о чем эта страница, статья или сайт в зависимости на каком уровне заполнять это. Лучше, чтобы эта информация была не длинее 120 символов. 
 Keywords  В этом поле заполняются ключевые слова, фразы, по которым поисковая система выведет вас к вашим посетителям. Это могут быть и одиночные слова, и фразы. Перечислить их можно через запятую.
   
   
   
   
   
   
Суббота, 16 февраля 2019 13:21

Классы для создания меню Bootstrap4

Автор

Классы для создания меню Bootstrap4

Выпадающее

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>

Вертикальная группа кнопок

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

Выпадающее меню с заголовком

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu"> <h5 class="dropdown-header></h5>
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a> <h5 class="dropdown-header></h5>
  </div>
</div>

Группы кнопок с выпаданием

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

л

Суббота, 02 февраля 2019 20:17

HTML

Автор

Язык гипертекстовой разметки текста

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

 

 Результат      
 <  меньше чем  &lt;  &#60;
 >  больше чем  &gt;  &#62;
 &  амперсанд  &amp;  &#38;
   неразрывный пробел  &nbsp;  &#160;
 "  двойные кавычки  &quot;  &#34;
 '  одинарные кавычки  &apos;  &#39;

HTML теги и их значение

<!DOCTYPE html>  тег декларация HTML5, с него начинается любой документ написанный на HTML5.
<html></html>   Это корневой элемент, он определяет начало и конец документа. Включает в себя все остальные элементы документа. Открывающий тег помещается сразу после определения типа документа, Закрывающий тег
находится в конце документа. Этот элемент не имеет предков. В современном HTML является не обязательным, а в  XHTML всегда обязателен.
 <head></head>  Содержит информацию о  метаданных документа. Должен содержать в себе элемент title.Элемент head может выступать контейнером для таких элементов как: base, link, meta, noscript,
script и style, которые могут располагаться в произвольном порядке.
 <title></title>  является обязательным элементом определяющим заголовок документа, находится внутри элемента head, должен содержать буквы, цифры и стандартную пунктуацию. Заголовки обычно отображаются в браузере, использются поисковыми системами. Не может включать в себя другие элементы и может быть только один.
 <body></body>  обозначает тело документа, может быть только один, внутри него помещается весь видимый контент.
 <article></article>  автономная часть контента, которая может быть использована отдельно от остальной части
 <aside></aside>  в него помещается контент, который связан с окружающим содержимым, но сам будет находиться в стороне, как боковая панель.
 <audio></audio>  применяется для расположения звукового файла в веб странице, на текущий момент есть три поддерживаемых формата файлов: MP3, WAV и OGG;
При использовании с
autoplay происходит автоматическое воспроизведение мультимедийных файлов.
controls указывает на неоходимость отображения в браузере пользователя элементов управления аудио;
пример, как воспроизвести звук на веб странице:
<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
если код записать так <audio controls autoplay> аудио файл начнет воспроизводиться автоматически,
<audio controls loop> означает, что файл будет воспроизводиться снова после того как закончится
<audio controls muted> означает, что аудиовыход должен быть отключен
<audio controls preload="none"> в этом случае звук не будет загружаться автоматически при загрузке страницы, вместо "none" возможны значения : auto|metadata
src = "URL-cсылкa" указывает местоположение мультимедийного файла.

 <a></a>

 применяется в качестве определителя сслки, используется с атрибутом href, id,
Пример ссылки на локальный файл : <a href="/имя файла.html">...</a>
на внешний файл: <a href="http://cервер/путь/файл.html">...</a>
для отправки сообщения электронной почты: <a href="mailto:имя_пользователя@домен">...</a>
по id<a id="фрагмент">...</a>

<br> с его помощью формируется разрыв строки. Это пустой элемент. в html применение закрывающего тега не допускается. в xhtml для закрытия этого элемента применяется косая черта.
<button></button> с его помощью создается кнопка, используется в форме ввода данных. Есть глобальные атрибуты.
<canvas></canvas> тег контейнер для рисования графики на ходу. Для фактического рисования графики используется скрипты.
Четверг, 10 января 2019 10:13

Классы Bootstrap 4 для оформления текста

Автор

Классы Bootstrap 4 для оформления текста

Bootstrap 4 как продолжение тройки копирует почти все, что было раньше, но в нем есть и изменения. В этой статье будут приведены классы, которые используют для форматирования текста. Значит если у вас шаблон сайта сделан на Bootstrap 4 то можно смело вставлять в редактор такие классы и они будут делать то, что они должны делать по смыслу.

<div class="container">

<h2>Alerts</h2>
 <p>Alerts are created with the alert class, followed by a contextual color classes:</p>

<div class="alert alert-success"><strong>Success!</strong> This alert box could indicate a successful or positive </div>

<div class="alert alert-info" /><strong>Info!</strong> This alert box could indicate a successful or positive </div>

<div class="alert alert-warning"> <strong>Warning!</strong> This alert box could indicate a warning that might need attention. </div>


<div class="alert alert-danger"> <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action. </div>


<div class="alert alert-primary">   <strong>Primary!</strong> Indicates an important action. </div>


<div class="alert alert-secondary">   <strong>Secondary!</strong> Indicates a slightly less important action. </div>


<div class="alert alert-dark">   <strong>Dark!</strong> Dark grey alert. </div>


<div class="alert alert-light">   <strong>Light!</strong> Light grey alert. </div>


</div>

Класс "card" в Bootstrap 4 представляет собой рамку с некоторым наполнением вокруг её содержимого. Она включает в себя параметры для верхних колонтитулов, содержание, цвета и т.д.

<div class="card bg-primary text-white"> <div class="card-body">Primary card</div> </div>

<div class="card bg-success text-white"> <div class="card-body">Success card</div> </div>

<div class="card bg-info text-white"> <div class="card-body">Info card</div> </div>

<div class="card bg-warning text-white"> <div class="card-body">Warning card</div> </div>

<div class="card bg-danger text-white"> <div class="card-body">Danger card</div> </div>

<div class="card bg-secondary text-white"> <div class="card-body">Secondary card</div> </div>

<div class="card bg-dark text-white"> <div class="card-body">Dark card</div> </div>

<div class="card bg-light text-dark"> <div class="card-body">Light card</div></div>

Выпадающий текст

Lorem ipsum dolor text....

<button type="button" class="btn btn-primary"  data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

Перелистывание

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Суббота, 05 января 2019 10:34

Создание ссылок

Автор

Создание ссылок в редакторе JCE

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

Интерфейс разделен на три вкладки "ссылка", "расширенные", "всплывающие окна" okno

Первая вкладка "ссылка" содержит все необходимые поля для создания базовой ссылки.

 Адрес (URL) это относительный путь к ссылке, который ведет к определенному файлу, изображению, или месту указанному пользователем.

Текст ссылки будет отображаться, если ссылкой является текст. 

Файловый браузер   Открывает диалоговое окно каталога файлов, для выбора их в качестве ссылки.

Электронная почта. Открывает диалоговое окно для создания ссылок на электронную почту.

И окно поиск, дает возможность найти ссылку по ключевым словам или фразе. Параметры поиска можно задать, нажав на значок шестеренки. 

search

  • В поле укажите будет ли выполняться поиск по всем словам, какой то фразе, или точному соответствию;
  • установите порядок, по которому будут поступать результаты;
  • и можно выбрать значение в "Искать только";

Можно выбрат в качестве ссылки любой файл по папкам, которые расположены под строкой поиска. Нажимая на плюс она раскрывается и вы получаете доступ к файлам находящимся внутри них.

Создание ссылки

Для того, чтобы создать ссылку выбираем текст, изображение или любой другой элемент, нажимаем на значок ссылкиchain

  • открывается диалоговое окно;
  • если выделенный элемент является тектом, то он будет редактироваться в текстовом поле;
  •  редактируем выделение текста, по которому будет применена ссылка;
  • или найти содержание пункта в файлах, раскрывая их;
  • выберите способ открытия ссылки.target
  • и нажмите кнопку вставить.

Ссылка на адрес электронной почты

  • Выбираем текст или элемент в материале;
  • открываем диалоговое окно для ссылки;
  • нажимаем на конверт в поле URL;
  • вводим электронную почтуemailи нажимаем на кнопку "Создать адрес" .

Создание ссылки с помощью якоря

  • Выделяем слово, абзац, в общем то что вам нужно;
  • нажимаем на якорь в нижней строке панели редактораyachor
  • вводим название якоря, для себя, чтобы не запутаться. Не надо сложных названий, можно букву и номер, если у вас их будет много, нажимаем вставить;
  • например в начале страницы как бы заглавие для быстрой навигации по материалу вводим короткий текст и выделяем его;
  • нажимаем наше диалоговое окно ссылокyachor2
  • при создании якоря они у вас будут уже по стрелкам в "Якори статьи" там просто выбираете их и они отображаются в верхней части;
  • нажимаете ок и все ссылка готова!
Суббота, 29 декабря 2018 12:37

Веб словарь для верстальщика

Автор

Веб словарь верстальщика

В этой статье будут даны переводы и значения слов, которые используются для создания страниц на различных источниках. Все слова пока сгруппированы по алфавиту. Этот материал предназначен для начинающих  пользователей и людей, которым просто нужно сейчас узнать значение слова.

img9

Слово  Транскрипция Перевод
Access    доступ, иметь доступ
add   добавлять
Author   автор, создатель
alias   вымышленное имя, прозвище
align   выравнивать
alignement   регулировка, настройка
applie   приложить
Attachment   привязанность
background   фон
badge   знак, 
base   база, основание
bundles   набор
button   кнопка
chapter   глава
Crop    кадрирование, обрезка
Compress   сжимать
comma   запятая
compile   составлять
custom   обычай
Description   описание
describe   описывать
default   по умолчанию
dropdown   выпадающий список
Duration   продолжительность, период
editor   редактор
Enable   включать, давать возможность
entire    целый
external   внешний
event   события, случай
extra   дополнительный
Fade   увядать, тускнуть
Featured   показанный
fields   поля
glyphs   глифы (Иероглифы)
hover   нависать, висеть
intend   намереваться
key   ключевой, главный
Language   язык
 level   уровень
pairs   пары
Powered   приведенный
preset   заданный, предварительно утановленный
Preview   Просмотр
render   выводить, отображать
select   выбирать
separate   отдельный, отделять
Settings   настроить
Solv   решать
suggest   предлагать
Tag   метка
target    цель
 template   шаблон
Thumbnail   минюатюрное изображение
Title   название
transition   переход
tutorial   пособие, учебник

 

 

Понедельник, 24 декабря 2018 08:56

Joomla что это

Автор

Joomla что это.

Joomla - это система управления контентом с открытым исходным кодом.

Открытый исходный код предполагает доступность для просмотра, изучения, и изменения и возможность доработки, использовать код для создания нового в самой СМС.

СМС используется для создания веб-сайтов и онлайн приложений. Она бесплатна и постоянно  обновляется. Разрабатывается с использованием PHP.