В продовження теми про таблиці в блозі. Хорошим тоном є прописування зовнішніх стилів CSS для оформлення. Завантаження сайту оптимізується, правити стилі простіше і швидше.
Для тих, хто недавно став блогером і не цілком розуміє, що таке HTML і CSS раджу завантажити безкоштовний курс HTML і безкоштовний курс CSS.
Створення макета в Adobe Illustrator CS6
Створення будь-якого макета починається з визначення геометричних розмірів. Мені потрібно, щоб вся таблиця вміщувалася на одному екрані. З урахуванням шаблону записи ширина вийшла 500 і висота 300 пікселів.
Зображення простіше компонувати, якщо вони мають однакові пропорції. Тому я склала всі картинки в окрему папку, дала їм нові імена. У Photoshop привела до одного розміру все зображення і оптимізувала для завантаження на сервер. Тільки після цього помістила в документ в Adobe Illustrator і поклала в макет.
Для прискорення процесу в Adobe Illustrator я включила відображення сітки і в УСТАНОВКАХ програми призначила лінії через кожні 50 пікселів з внутрішнім розподілом на 1. Ви призначайте ті параметри, які найкращим чином допоможуть скласти ваш пазл, виходячи з розмірів макета і зображень.
Хочу тільки додати, що на весь процес від ідеї, підбору картинок за кольором, призначення їм розміру до укладання в сітку я витратила близько 8 годин. Початковий макет був складніше і складався з 25 елементів. Я відмовилася від нього, оскільки деякі зображення вийшли занадто дрібними.
Установка параметрів сітки Adobe Illustrator
Макет таблиці з зображеннями в об'єднаних комірках
Створення таблиці в Adobe InDesign CS6
У Adobe InDesign CS6 я створила новий документ для Web з розмірами 500 х 300 пікселів і нульовими полями.
Створення нового документа в Adobe InDesign CS6
Потім створила текстовий фрейм. Вибрала інструмент ТЕКСТ на панелі інструментів і виділила їм всю область документа.
Створення текстового кадру в Adobe InDesign CS6
Додала таблицю з меню ТАБЛИЦЯ -> вставити ТАБЛИЦЮ з числом рядків і стовпців як в макеті. Команда доступна при активному інструменті ТЕКСТ.
Створення таблиці в Adobe InDesign CS6
На відміну від сітки в Illustrator, тут робити однаковою ширину і висоту всіх осередків не обов'язково, найдрібніші картинки в макеті можуть поміститися в одному осередку. Ділити або об'єднувати сусідні комірки слід, якщо поруч повинні розташовуватися зображення різного розміру. У мене вийшла така сітка.
Об'єднання осередків в таблиці Adobe InDesign CS6
Коли поміщала зображення, деякі осередки поділила по горизонталі і по вертикалі. У підсумку вийшло 14 стовпців і 9 рядків.
Якщо залишити ім'я файлу написаним кирилицею, то в коді таблиці ви отримаєте запис наступного виду. Та-Даам!
Розумієте, так? Такі ім'я файлу і атрибут alt прочитає тільки сервер. До того ж, це ім'я тільки одного з вісімнадцяти зображень.
Файл на сервері
Через команду помістити з меню Фото я помістила в документ все зображення з іменами як на сервері з нової папки. Оскільки всі вихідні зображення мають більший розмір, ніж розмір осередків, то, перш ніж вставити в клітинку їх потрібно зменшити. Вміщеної зображенню я змінила розміри. На знімку нижче це зазначена область зліва вгорі. Ланцюжок повинна бути замкнута, щоб зберігалися пропорції.
Розміри однієї зі сторін картинки я призначала кратні 50 пікселям, як на вихідному макеті в Illustrator.
InDesign особливим чином масштабує графічні фрейми, тому потрібно поставити галочку АВТОМАТИЧЕСКАЯ ПІДГОНКА і вибрати ЗМІСТ ПО розмір кадру. Поля відзначені на знімку праворуч вгорі.
Впровадження зображення в документ Adobe InDesign CS6
В результаті вийшла така таблиця.
Складна таблиця з об'єднаними осередками та зображеннями в InDesign CS6
У моєму проекті не потрібні жодні кордони і відступи в осередках, тому я прибрала рамку навколо таблиці, обведення осередків і інтервали в таблиці.
Обидва вікна викликаються відповідними командами з меню ТАБЛИЦЯ при активному інструменті ТЕКСТ.
На панелі параметрів у верхній частині вікна я призначила вирівнювання елементів в осередках таблиці по висоті і ширині.
Необхідно виділити всі комірки, щоб застосувати зміни і правильно прописати властивості.
Експорт в HTML зі стилями CSS
З меню Фото -> ЕКСПОРТ я вибрала формат експорту HTML. Нижче на знімках параметри, які я призначила.
Експорт в HTML з InDesign. Основні параметри
Шлях на сервері
Експорт в HTML з InDesign. параметри зображення
Тут все зрозуміло, мені ж потрібні стилі.
Експорт в HTML з InDesign. додатковими параметри
Впровадження таблиці в запис у блозі
Файл відкриється після збереження, якщо встановлена галочка ПОКАЗАТИ HTML ПІСЛЯ ЕКСПОРТУ у вкладці з основними настройками.
Відкритий в браузері файл таблиці HTML
Таблиця вставлена в запис
Додавання користувача стилів CSS
Разом з файлом HTML при експорті зі стилями InDesign CS6 створив однойменну з документом папку, в якій лежить файл CSS стилів. Він має ту ж назву і розширення .css. Я відкрила його в браузері. Ось так це виглядає.
Файл стилів CSS для таблиці
За допомогою комбінації клавіш
Скопіювала виділений текст в буфер обміну.
Відкрила чернетку записи в режимі візуального налаштування. В налаштуваннях теми знайшла вкладку ДОДАТКОВІ СТИЛІ. У вас вона може називатися трохи інакше, але суть залишається.
Впровадження призначених для користувача стилів оформлення в режимі візуального налаштування
Табличка встала як треба. Правда, деякі зображення спочатку мали неправильний розмір. Виявилося, що їм присвоєно не той клас. І на стару буває помилка. Це легко виправити.
CSS клас зображення
Потім у впроваджених стилях знайти клас з відповідними розмірами. Всі класи зображень знаходяться внизу списку стилів.
CSS клас зображень в візуальному Настроювачі
HTML код і CSS стилі таблиці з картинками можна скопіювати
HTML код таблиці з картинками
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote margin: 0;
padding: 0;
border-width: 0;
>
td, th border-style: solid;
border-width: 0px;
>
table border-collapse: collapse;
>
li display: block;
>
body font-size: 12px;
-epub-hyphens: auto;
>
table.x ------- border-color: # 000000;
border-style: solid;
border-width: 0px;
margin-bottom: 0px;
margin-top: 0px;
width: 450px;
>
p.x --- color: # 000000;
font-family: "Minion Pro», serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.2;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
text-align: left;
text-decoration: none;
text-indent: 0px;
>
td.cell-style-override-1 padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
>
p.para-style-override-1 font-size: 4px;
text-align: center;
>
p.para-style-override-2 font-size: 4px;
>
col.Row-Column-1 width: 18px;
>
col.Row-Column-2 width: 17px;
>
col.Row-Column-3 width: 56px;
>
col.Row-Column-4 width: 23px;
>
col.Row-Column-5 width: 51px;
>
col.Row-Column-6 width: 27px;
>
col.Row-Column-7 width: 46px;
>
col.Row-Column-8 width: 28px;
>
img.frame-9 height: 53px;
width: 80px;
>
img.frame-10 height: 52px;
width: 79px;
>
tr.Row-Column-11 height: 28px;
>
img.frame-12 height: 68px;
width: 46px;
>
img.frame-13 height: 30px;
width: 45px;
>
img.frame-14 height: 40px;
width: 60px;
>
tr.Row-Column-15 height: 44px;
>
img.frame-16 height: 73px;
width: 110px;
>
img.frame-17 height: 25px;
width: 37px;
>
img.frame-18 height: 121px;
width: 81px;
>
img.frame-19 height: 75px;
width: 112px;
>
tr.Row-Column-20 height: 25px;
>
img.frame-21 height: 50px;
width: 74px;
>
tr.Row-Column-22 height: 50px;
>
img.frame-23 height: 100px;
width: 66px;
>
tr.Row-Column-24 height: 26px;
>
img.frame-25 height: 31px;
width: 46px;
>
tr.Row-Column-26 height: 35px;
>
tr.Row-Column-27 height: 51px;
>