На минулих уроках ми зробили початковий установочний комплект для шаблону trip. який складається з файлів index.php. templateDetails.xml і дві папки css і image.
Якщо ви все робили правильно, то шаблон встановлюється на Joomla 3 без проблем. Далі ми будемо працювати над каскадних таблицями стилів. які відповідають за оформлення сторінок сайту.
Момент 1. При створенні таблиць я буду використовувати мову CSS2. На відміну від CSS3, він простіше для розуміння. Це важливо, тому що велика частина аудиторії мого сайту - новачки в веб-програмуванні. Також є ще один мінус CSS3 - ця мова зараз не підтримується всіма браузерами. Для тих же, хто мало знайомий з CSS2, для кращого розуміння, в роботі над таблицями, пропоную використовувати довідник «HTML, CSS, PHP».
Момент 2. Я завжди створюю сайти і відпрацьовую шаблони тільки на локальному сервері, встановленому на моєму комп'ютері. На хостинг заливаю вже готовий, повноцінно функціонуючий сайт з початковим контентом.
Момент 3. Я ніколи не редагую код шаблону з адмінпанелі Joomla. а використовую тільки програму Macromedia Dreamweaver. Відкриваю потрібний мені файл, редагую його, зберігаю (але не закриваю файл) і дивлюся відразу ж, які зміни відбулися на сайті. Якщо вони мені не подобаються - скасовую, вироблені раніше дії.
УВАГА: відкат назад в адмінки Joomla при редагуванні коду неможливо!
З програмою Macromedia Dreamweaver дуже зручно працювати - вона підсвічує код, допомагає писати його дуже швидко, виділяє помилки, дозволяє зробити відкат. Всю документацію по Macromedia Dreamweaver і саму програму ви можете знайти на сайті.
Ну ніби все розповіла і можна приступати до роботи. Насамперед, необхідно правильно розставити всі блоки DIV на сторінці. Зараз вони поки стоять один за одним (дивіться скрішот з попереднього уроку).
Щоб в процесі роботи добре бачити, як встають блоки, в менеджері модулів CMS Joomla я створила модуль пошуку по сайту і поставила його в позицію «user1», модуль горизонтального меню - в позицію «user2», модуль навігації по сайту - в позицію «user3 », три модуля з довільним HTML кодом - в позиції« left »,« right »,« footer ».
Спочатку я вирішила блок «header» зробити універсальним і передбачила в ньому позицію для виведення модулів «header». У цій позиції можна вивести який-небудь ротатор зображень або за допомогою модуля з довільним HTML кодом просто вивести зображення, будь-якої висоти, при цьому ширина повинна бути завжди 950рх (ширина сторінки). Це зображення можна зробити клікабельним, а також з легкістю його міняти. Для початку я просто створила подібний модуль і розмістила в ньому картинку розміром 950х250.
Використовуйте довідник по стилям CSS, якщо вам не зрозумілі будь-які параметри.
Спочатку оформляємо блок «body», задамо йому поки сірий колір фону.
Далі оформляємо безпосередньо сторінку сайту. Визначимо її ширину, пропишемо властивості шрифту, який буде використовуватися на сайті і для початку поставимо колір фону
font: 14px Arial, Helvetica, sans-serif;