Как создать свой сайтУроки Joomla → Урок 7. Наполняем сайт материалами (вставляем картинки)

Joomla - Урок 7. Наполняем сайт материалами (вставляем картинки)

Сегодня мы начнем наполнять наш сайт материалами, и начнем мы с тех, на которые ссылаются пункты верхнего меню сайта-образца. На нашем сайте такого меню пока нет. Дело в том, что в Joomla нельзя создать пункт меню, пока нет материала, на который этот пункт будет ссылаться. Поэтому мы сначала создадим 4 материала: Условия работы, Наши магазины, Контакты и Статьи (Карту сайта будем делать позже), а затем создадим меню.

Итак, создаем первую статью - Условия работы. Для этого, как вы уже знаете, идем в Административную панель и выбираем пункт Добавить статью:



Даем нашей статье:
  • Заголовок - Условия работы.

  • Псевдоним - cooperation (так эта страница называется на сайте-образце).

  • Раздел и Категория - Без категории.

  • Опубликовано - ДА.

  • На главной - НЕТ.

Текст самой статьи копируем с сайта-образца, форматируем и сохраняем:



Аналогично, создаем следующую статью - Наши магазины (stores). Здесь встает вопрос, как вставлять картинки в Joomla. Сами картинки расположены в двух блоках. Такую разметку удобнее всего сделать с помощью таблицы из одной строки и двух столбцов. Используя визуальный редактор, таблица задается кнопочкой Inserts a New Table:



В HTML-редакторе код таблицы, например, следующий:
<table style="border: 1px solid #671700;"> <tr> <td width="50%"> <center> Санкт-Петербург, ул.Бестужевская, д.5, Строительная База, помещение 4-А, тел.321-64-65 (доб.6150)<br /><br /> <img alt="магазин на карте" src="images/stories/shop1.jpg"/><br /><br /> </center><br /> <em><span style="color: #671700;">Режим работы:</span></em><br /> <em><span style="color: #671700;">пн-пт:</span></em> 10:00 - 19:00<br /> <em><span style="color: #671700;">сб,вс:</span></em> 10:00 - 17:00 </td> <td> <center>г.Волхов, Кировский пр., д.3, Оптовая База СТРОЙЛИГА<br /><br /> <img alt="shop2" src="images/stories/shop2.jpg"/><br /><br /> </center><br /> <em><span style="color: #671700;">Режим работы:</span></em><br /> <em><span style="color: #671700;">пн-пт:</span></em>09:00 - 19:00<br /> <em><span style="color: #671700;">сб,вс:</span></em> 10:00 - 18:00 </td> </tr> </table>


Теперь надо вставить картинки. Все изображения, которые вы будете использовать для своих статей, должны храниться в папке stories. Полный путь к этой папке у нас следующий: C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\oboi\images\stories. Сохраним сюда наши картинки shop1.jpg и shop2.jpg (их можно скопировать с сайта-образца, встав правой кнопкой мыши и выбрав - Сохранить изображение как...).

Теперь возвращаемся к нашей статье, будем вставлять в нее эти изображения. Встаем курсором мыши в место, куда хотим вставить картинку и на панели форматирования нажимаем на кнопку вставки изображения:



Откроется окно выбора изображения:



Здесь мы выбираем изображение, задаем необходимые параметры (описание, выравнивание...) и нажимаем кнопку Insert. Все, картинка вставлена:



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

Чтобы вставлять в Joomla картинки, необходимо:

  • Поместить картинки в папку stories.

  • Встать курсором мыши в то место статьи, куда хотим вставить картинку.

  • Щелкнуть по значку Insert/Edit image.

  • В открывшемся окне выбрать необходимое изображение (щелкнуть по названию в списке), задать необходимые параметры (отступы, выравнивание, описание, размеры) и нажать на кнопку Insert (Вставить).

Удалить картинку можно кнопкой Del на клавиатуре.



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

Уроки PHP Уроки PHP Уроки PHP Уроки PHP Уроки PHP Уроки PHP

Код кнопки:


уроки joomla

Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.