CMS Joomla! для початківців - №27

Останні новини

Опитування (НОВЕ!)

Авторизація

Останні 3 записи в гостьовій

Сайти як хмарочоси

Так чому б не прискорити механізми створення онлайн площ:

  1. Застосування методу "що бачу - те співаю". Щогодинна транскрибація думок та образів із постингом у блоги.
  2. Масовий парсинг з наступним, масовим, рерайтингом і постінгом.

Шаблони Joomla. Частина 6. (Модулі - СТИЛЬНИЙ ДИЗАЙН НА таблицях. Продовження)

Рівень:Користувач - Веб-майстер

Здрастуйте, шановні передплатники. Сьогодні ми продовжимо розмову про стильове оформлення модулів. Спробуємо відтворити дизайн модулів сайту MailList.ru. Чому саме його? Бо там він яскраво виражений. Відкрийте, наприклад, сайтhttp://MailList.ru/", попередньо відключивши завантаження зображень у Вашому браузері. Приємно виглядає так? Звертаємо увагу, що ми будемо відтворювати дизайн якомога точніше із зовнішньої точки зору.HTML-структуру сайту ми відтворювати не будемо, а використовуємо власні прийоми, трохи спрощені в деяких випадках. швидко можна створити дизайн не гірше за будь-який популярний сайт в мережі.

У нас є навчальний шаблон, розроблений у випуску розсилки №25, який ми будемо допрацьовувати (завантажити вихідний шаблон).

План розробки

У вихідному шаблоні стилями оформлені самі модулі, а у відтворюваному дизайні видно, що модулі знаходяться в контейнері (це правий та лівий стовпці з обрамленням). Необхідно змінити поточний стиль модулів і встановити стиль дляконтейнера, яким є осередки таблиці, в які виводяться модулі.

Зміна стилю модулів

Необхідно отримати таке:

  • Модулі мають заголовок з фоном (це вже є), фон у самому модулі та рамку по нижній межі модуля (в оригіналі це реалізовано зображенням, а ми зробимо стилями).
  • Між модулями є вертикальний інтервал, який також відтворимо.

Це для таблиці в цілому, тепер для осередку:

  • додали padding-bottom для забезпечення мультибраузерності;
  • додали background-color, модуль фону.

Встановлення стилю контейнера

Задамо стиль для осередків таблиці, в яких виводяться модулі (у шаблоні для відповідних тегів

Ми вирішили проблему єдиним стилем border-top-width. При цьому всередині смуги простим способом не написати текст. Якщо подивитися оригінальний сайт, в ньому над центральним стовпцем є напис "Поштові розсилки MailList.Ru". Використовуючи наше рішення, такий напис не створиш, у таблиці необхідно створювати додаткові осередки. У оригінального сайту розмітка, взагалі, набагато складніша. Наприклад, розриви між стовпцями, задаються теж додатковими осередками з малюнками-розтяжками, а ми лише задамо для таблиці значення властивості cellspacing = "5" (докладніше про це нижче), а візуальний ефект той самий!

Останні штрихи

Щоб результат праць виглядав більш-менш естетично. Зробимо ще кілька дій:

  • для стовпця з контентом зробимо такий самий зовнішній вигляд, для чого в тезі відповідного осередку встановимо властивість class=maillist
  • в результаті стовпці злилися один з одним. Щоб виправити ситуацію, задамо для таблиці значення якості cellspacing="5"
  • шапкушаблону зробимо такого ж стилю
  • помічаєте, що розтягнута на весь екран сторінка виглядає гіршою за фіксовану сторінку maillist? Особливо це помітно, якщо ви використовуєте роздільну здатність монітора "1280" або більше. Зробимо сторінку фіксованою за шириною розміром 1000px. Для цього у шаблоні у всіх каркасних таблицях замінимо властивість width="100%" на align="center" width="1000px"

Шаблон у роботі та його дистрибутив

Подивитися шаблон на демо-сайті (ім'я шаблону efft_table_27).

Автор цієї статті:Леонід Мальков