Донецкий техникум промышленной автоматики

Artisteer 4.0 створення шаблонів сайтів

  1. Вдосконалене створення шапки сайту за допомогою візуального редагування
  2. Новий інструмент виділення
  3. створення колажів
  4. Маска для текстур
  5. текстові блоки
  6. Нові опції для зображень
  7. Слайд шоу
  8. більше джерел
  9. Розмітка нижнього колонтитула
  10. Нові опції стилів
  11. Ефект тіні для тексту
  12. Нові опції скруглення для стовпців і рядів
  13. HTML елементи керування
  14. кольори
  15. Меню
  16. Межі для заголовків блоків і меню
  17. режим панелі
  18. пропозиції
  19. реорганізація параметрів
  20. плагін SDK
  21. Підтримка «Зображення і посилання» для Joomla 2.5
  22. Сумісність з попередніми версіями
  23. Схожі матеріали
  • Тип - програма для створення шаблонів сайтів Joomla, Wordpress, Blogger, Drupal, DotNetNuke.
  • Новий інструмент виділення .

    створення колажів .

    Маска для текстур .

    текстові блоки .

    Стиль спливаючого вікна Lightbox .

    Слайд шоу .

    більше джерел .

    Ефект тіні для тексту .

    Нові опції скруглення для стовпців і рядів .

    У попередній частині статті « Огляд Artisteer 4 (частина 1). Програма для створення шаблонів Joomla »Ми почали розгляд нових можливостей, заявлених в Artisteer 4.0.0.55648 Beta для Windows. У цій статті будуть розглянуті інші, не менш важливі нововведення, наприклад, підтримка плагінів для здійснення сумісності з новими системами управління вмістом.

    Вдосконалене створення шапки сайту за допомогою візуального редагування

    Artisteer 4 Beta володіє новими засобами по створенню шапки сайту (заголовка), які надають раніше недоступні можливості.

    З новими інструментами Ви зможете:

    • додавати слайд шоу в шапку сайту.
    • для кожного слайда можна задати окремі настройки. Також можна встановити ефект переходу для кожного слайда окремо.

    Ви зможете вставити слайд шоу не тільки в шапку сайту, але і в вміст сторінки, земельна ділянка (нижній колонтитул) і в бічну панель. Налаштування слайд шоу були розглянуті в статті « Огляд Artisteer 4 (частина 1). Програма для створення шаблонів Joomla ».

    Новий інструмент виділення

    Змінювати зовнішній вигляд тексту і зображень тепер можна за допомогою нового інструменту виділення в режимі реального часу. Наприклад, можна повертати і переміщати текст в заголовках так, як Ви хочете його побачити на сайті (малюнок нижче).

    Тепер Ви зможете скористатися WYSIWYG інтерфейсом, що спростить і прискорить процес створення шаблону.

    Тепер Ви зможете скористатися WYSIWYG інтерфейсом, що спростить і прискорить процес створення шаблону

    створення колажів

    Якщо Вам необхідно додати більше одного зображення в шапку сайту, то в Artisteer 4 Beta Ви зможете це зробити (малюнок нижче).

    Маска для текстур

    Маски дозволять Вам зробити частину шапки прозорою, щоб було видно фон сторінки (малюнок нижче).

    В Artisteer 3.1, прозорі маски були доступні тільки в якості спеціального ефекту текстури, обраного з галереї текстур. Ви не могли додати ще одну структуру, і якщо хотіли інший ефект, то повинні були створити власні текстури.

    В Artisteer 4.0, прозорі маски вибираються окремо, тепер можна додати маску, а також вибрати і додати ще одну текстуру на заголовок. Є додаткові опції маски, які визначають, де і як маска застосовується.

    При налаштуванні масок Вам будуть доступні опції повторення (По горизонталі, По вертикалі, Без повторення, Заливка), розташування (По центру, Внизу зліва і так далі), відображення (По горизонталі, По вертикалі), повороту і масштабування (малюнок нижче).

    текстові блоки

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

    Хочу зазначити, що для тексту всередині блоків доступні майже всі настройки форматування, як і для назви сайту і слогана сайту (гарнітура, кегль, накреслення, колір і так далі).

    Блоки призначені не тільки для тексту. Ви можете використовувати їх, щоб додати геометричні фігури, які можна стилізувати за допомогою текстури, відблисків і так далі.

    Також можна додати блоки на сторінки. Якщо Ви хочете додати слайд-шоу на сторінку Вашого сайту, то в Artisteer 4.0 це можна зробити з накладенням тексту поверх нього (рисунок нижче).

    Нові опції для зображень

    Стиль спливаючого вікна Lightbox

    При вставці зображень Artisteer 4 Beta автоматично додає клас атрибутів "art-lightbox" в тег <img /> для створення спливаючого вікна (Lightbox) для зображень. Тепер при натисканні на зображення можна переглянути його збільшену версію в вікні поверх сторінки. Ви можете включити або відключити Lightbox в настройках зображення ( «Preview») (малюнок нижче).

    Слайд шоу

    Шапка сайту - це не єдине місце, куди Ви можете помістити слайд шоу. Скрізь, де можна розмістити зображення, може бути і слайд шоу.

    більше джерел

    Тепер Ви можете вставити зображення в шаблон, вказавши його URL або вибравши потрібний з онлайн галереї (малюнок нижче).

    Розмітка нижнього колонтитула

    В Artisteer 4 Beta Ви зможете задавати певну розмітку для нижнього колонтитула (підвалу), точно так, як це робиться для сторінок (рисунок нижче). Вважаю це дуже зручним, особливо з огляду на той факт, що на багатьох сайтах нижній колонтитул грає роль додаткового меню, там розміщують контактну інформацію, логотипи партнерів і так далі.

    Нові опції стилів

    Artisteer 4.0 має додаткові розширеними можливостями з налаштування стилів для різних елементів шаблону. Наприклад, ефект тіні для тексту або нові опції скруглення для стовпців і рядів.

    Ефект тіні для тексту

    У більшості областей шаблону, де можна розташувати текст, до нього можна буде застосувати ефект тіні (малюнок нижче).

    Нові опції скруглення для стовпців і рядів

    Дана можливість була описана при розгляді редагування вмісту сторінки в статті «Огляд Artisteer 4 (частина 1). Програма для створення шаблонів Joomla ».

    HTML елементи керування

    Тепер в Artisteer 4.0 Ви зможете задати стиль для стандартних елементів управління HTML, таких як радиокнопки, чек-бокси (checkboxes) і так далі. Як правило, вони відображаються на сторінках сайтів CMS за допомогою плагінів. Але тепер, в Artisteer 4, Ви зможете налаштувати, як саме чек-бокс повинен виглядати. Спеціально для цього одна з вкладок стрічки інструментів Кнопки була перейменована в Controls і на неї були додані нові інструменти (малюнок нижче). Розглянемо цю панель більш детально. При розгляді будуть висвітлені тільки нові інструменти, які з'явилися в Artisteer 4.0.0.55648 Beta.

    До налаштувань кнопок з версії Artisteer 3 додано 3 групи інструментів.

    1. Contrlos.
    2. Пошук.
    3. Стиль і шрифти.

    У групі Controls зібрані настройки для рядка введення текстa (Input), чек-боксу і радиокнопки.

    Для HTML об'єкта управління Input Ви можете вибрати один з п'яти стилів оформлення, доступний за умовчанням (малюнок нижче).

    Для HTML об'єкта управління Input Ви можете вибрати один з п'яти стилів оформлення, доступний за умовчанням (малюнок нижче)

    Також Ви зможете налаштувати даний елемент більш точно за допомогою додаткових налаштувань, які розділені на чотири частини (рисунок нижче).

    1. Input control
    2. Градієнт.
    3. Обведення.
    4. Тінь.

    Тінь

    Основні настройки рядка введення текстa (Input) містять опції (малюнок вище), що дозволяють задати ширину поля (Автоматично або Фіксована (в пікселях)), вертикальний відступ, скругление, заливку, прозорість і налаштувати відображення тексту (Колір, Шрифт, Розмір, Стиль) .

    В як градієнт можна вибрати один з 57 стилів градієнта і задати йому контрастність.

    Для кордону (малюнок вище) можна задати ширину самої обведення (в пікселях), її стиль (один з 8), задати прозорість і колір, вибравши його з палітри кольорів, доступних за умовчанням, або задавши свій власний.

    Ставлячи ефект тіні (малюнок вище), Ви можете вибрати один з 12 доступних за умовчанням стилів або вказати її розмір (в пікселях), прозорість, відстань (в пікселях) і кут (в градусах).

    При налаштуванні чек-боксу Ви зможете вибрати один з 6 стилів оформлення, доступний за умовчанням (малюнок нижче).

    При налаштуванні чек-боксу Ви зможете вибрати один з 6 стилів оформлення, доступний за умовчанням (малюнок нижче)

    Крім цього Ви зможете задати власні настройки стилю для чек-боксу (малюнок нижче).

    Крім цього Ви зможете задати власні настройки стилю для чек-боксу (малюнок нижче)

    Вони розділені на 6 частин (рисунок вище).

    1. CheckBox.
    2. Пасивний.
    3. Наведений.
    4. Pressed.
    5. Градієнт. Аналогічно налаштувань поля введення тексту, описаного вище.
    6. Тінь. Аналогічно налаштувань поля введення тексту, описаного вище.

    У групі налаштувань CheckBox (малюнок вище) Ви зможете задати іконку «пташки» ( «галочки») для самого чек-боксу. За замовчуванням є 14 іконок з можливістю зміни кольору, але можна вказати і свою власну з файлу (JPG, JPEG, PNG, GIF). Ви можете задати відступ зліва і зверху від центру кнопки до центру «пташки» ( «галочки»), можна задати ширину і висоту всієї області кнопки (в пікселях), округлення (у відсотках), кордон (ширину і стиль), а також налаштувати відображення тексту (Колір, Шрифт, Розмір, Стиль).

    Групи налаштувань Пасивний, наведений і Pressed дозволяють задавати заливку, колір кордону і прозорість для трьох станів кнопки відповідно (пасивне, наведене, нажатое).

    Налаштування для радиокнопки аналогічні налаштуванням чек-боксу. За винятком запропонованих за замовчуванням стилів оформлення (малюнок нижче).

    Одним з важливих елементів навігації будь-якого сайту є пошук. В Artisteer 4.0.0.55648 Beta Ви можете задати товщину обведення поля пошуку, тінь (можна вказати її розмір, прозорість, відстань і кут), градієнт для області пошуку, задати іконку, яка буде відображатися в області пошуку і задати округлення країв для цього поля.

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

    В HTML версії шаблону Ви можете побачити результати роботи деяких з інструментів Artisteer 4.0.0.55648.

    кольори

    Вибір кольору також зазнав змін. Тепер при виборі кольору в розділі Додаткові кольори завжди доступні два кольори «Чорний» і «Білий» (малюнок нижче).

    При перемиканні в режим «Налаштування кольору» можна для будь-якого кольору задати прозорість за допомогою спеціального повзунка (малюнок нижче) без повернення до панелі інструментів. Варто зазначити, що зміна прозорості не завжди доступно.

    Меню

    З Artisteer 4 тепер Ви зможете створювати меню в «журнальному» стилі в кілька колонок (малюнок нижче). Доступно 4 стилю підміню.

    1. Багаторівневе.
    2. Extended.
    3. Megamenu.
    4. Megamenu Extended.

    Megamenu Extended

    У новій версії програми є кілька нових ефектів для меню і підміню, наприклад, підкреслення пунктів меню при наведенні курсору миші (малюнок нижче).

    У новій версії програми є кілька нових ефектів для меню і підміню, наприклад, підкреслення пунктів меню при наведенні курсору миші (малюнок нижче)

    Межі для заголовків блоків і меню

    Ви можете додати межу, що відокремлює заголовок блоку від блоку, і змінити її стиль (колір, товщину, тип кордону) (малюнок нижче).

    режим панелі

    В Artisteer 4.0 з'явився новий режим відображення параметрів настройки різних елементів - «Режим панелі». У правій частині екрана може відображатися додаткова панель з настройками того елемента дизайну шаблону, наприклад, меню, заголовка, картинки, з якої Ви зараз працюєте (малюнок нижче).

    Це дуже зручно, так як Вам не потрібно переходити на панель інструментів (стрічку інструментів) або відкривати додаткові діалогові вікна для зміни додаткових параметрів стилю елементів.

    При натисканні на один з елементів шаблону або вмісту сторінки, наприклад, на зображення, з'являється контекстне меню з можливістю швидкого доступу до певних інструментів (рисунок нижче).

    При натисканні на один з елементів шаблону або вмісту сторінки, наприклад, на зображення, з'являється контекстне меню з можливістю швидкого доступу до певних інструментів (рисунок нижче)

    пропозиції

    Пропозиції в новій версії програми також зазнали несуттєві зміни (малюнок нижче).

    Пропозиції для листа, вмісту і меню тепер доступні з контекстного меню в області перегляду. Для цього підведіть курсор миші до піктограми пропозиції в області попереднього перегляду або натисніть на фон правою кнопкою миші (малюнок нижче) (ця опція була доступна в попередніх версіях програми).

    Пропозиції вплинуть не тільки на стилі об'єктів вмісту, а й на його структуру.

    Рекомендується користуватися пропозиціями до того, як Ви почнете створювати вміст сторінок в Artisteer, наприклад, для автоматичної генерації вмісту сторінки. Це дуже зручно, якщо Вам (або Вашому клієнтові) не критично дотримання тематики вмісту шаблону і майбутнього сайту. Так як створювати вміст, особливо що включає більшість елементів (таблиці, малюнки, текст, маркований і нумерований списки і так далі), досить трудомісткий процес.

    реорганізація параметрів

    Багато опції в новій версії Artisteer були реорганізовані для прискорення доступу до них і для створення ще більш інтуїтивно зрозумілого інтерфейсу в цілому (малюнок нижче).

    плагін SDK

    Для забезпечення сумісності програми з іншими системами керування вмістом в Artisteer 4.0 включений набір засобів для розробників програмного забезпечення (SDK). Якщо Ви володієте необхідними навичками роботи з HTML і JavaScript, то Ви можете написати плагін, а потім розмістити його в Marketplace.

    У майбутньому в Artisteer планується включити підтримку найбільш популярних CMS і блог-платформ (про те, як створити блог на Joomla Ви можете прочитати в статті «Огляд RSBlog (частина 1 , 2 , 3 ) ») За рахунок плагінів, які Ви можете додати в Artisteer. Для отримання додаткової інформації щодо написання плагінів для Artisteer, будь ласка, зверніться до вікі-сторінці . Зараз (20.07.2012) там знаходиться 2 плагіна Hello World Plugin і Artisteer HTML Export Plugin, посилання на короткий посібник зі створення плагінів , Відповіді на часто задавані питання з цієї тематики і посилання на відповідну гілку форуму .

    Дане нововведення, допоможе розширити область використання Artisteer, зробити його більш популярним і, як наслідок, залучити більше користувачів, ідей і розробників, що буде робити програму все більш функціональною і зручною. Трохи більш детально це питання буде розглянуто в статті « Огляд Extensoft Artisteer 4 (частина 3). Програма для створення шаблонів Joomla ». Детальніше про різні лагінвх експорту Ви можете прочитати в статті « Огляд Artisteer 4.2. Шаблони Joomla 2.5 - 3.0 ».

    Підтримка «Зображення і посилання» для Joomla 2.5

    Для тих, хто створює сайти за допомогою системи керування вмістом Joomla 2.5, в Artisteer 4 передбачена підтримка додавання зображень і посилань для статей в менеджері матеріалів Joomla 2.5 (малюнок нижче).

    Сумісність з попередніми версіями

    Був проведений маленький експеримент. Шаблон, спочатку створений в Artisteer 3.1.048375 Standard Edition для Windows для Joomla 2.5 був відкритий в Artisteer 4.0.0.55648 Beta Standard Edition для Windows. У лівій частині картинки нижче шаблон версії 3.1, в правій - 4.0 (для збільшення натисніть на зображення).

    Як бачите, в результаті конвертації відбулися не дуже великі зміни. В основному, вони торкнулися ті елементи шаблону, які не можна було редагувати в Artisteer 3.1, наприклад, HTML елементи керування (рядка введення в формі реєстрації). При подальшому дослідженні результатів конвертації проекту, зробленого в версії 3.1 до версії 4.0, були виявлені невеликі похибки, наприклад, відступи в блоках чомусь збільшилися, після експорту на сайт стала погано відображатися посторінкова навігація і так далі. Але врахуйте, що зараз (20.07.2012) Artisteer 4 знаходиться на стадії бета тестування! В цілому, можна сподіватися на те, що переклад шаблонів, зроблених у попередній версії Artisteer на нову версію не викличе великих труднощів.

    Зверніть увагу на те, що після збереження проекту в Artisteer 4 він не буде відкриватися в попередніх версіях програми.

    Якщо зберегти один і той же проект як шаблон для Joomla 2.5 (ZIP архів), то вийде наступний результат:

    Artisteer 3.1.048375 Standard Edition - розмір файлу 677 Кб. 93 файлу 14 папок.

    Artisteer 4.0.0.55648 Beta Standard Edition - розмір файлу 483 Кб. 120 файлів 22 папки.

    Варто відзначити, що в разі, коли Ви створите в Artisteer 4 готові сторінки з вмістом, то розмір файлу може істотно збільшитися.

    У версії Artisteer 4.0.0.55648 Beta ще є над чим працювати. Але список тих нових і оновлених можливостей, які були заявлені на момент виходу бета версії, дуже великий. Чого тільки варта підтримка CSS3 і HTML5! А плагіни порадують розробників і веб майстрів, які використовують не підтримуються раніше в Artisteer системи управління вмістом. У наступній статті « Огляд Extensoft Artisteer 4 (частина 3). Програма для створення шаблонів Joomla »Ми розглянемо плагіни експорту, а також переваги ліцензійної версії програми.

    Схожі матеріали

    Корисні посилання: