Готуємо шаблони для шаблонів

Яким буде дизайн блога вже вирішено, малюнки підібрано. Залишилося тільки обрати базовий шаблон і почати працювати 🙂

Відкрийте вкладку «Вигляд» в Панелі Редагування та уважно перегляньте всі шаблони. Звертати увагу потрібно на розташування вузької шпальти (зліва вона чи зправа), шапку блога (може бути над шпальтами або на одному рівні з вузькою шпальтою) та наявність футера (як не дивно, але в деяких шаблонах він відсутній):

 

На скріншотах — «чистий» HTML двох різних шаблонів. Можна побачити, наскільки вони відрізняються 🙂

Це ті моменти, що були прописані в HTML і при всьому бажанні змінити їх ми не зможемо. Потрібно обрати найбільш сумісний з майбутнім дизайном шаблон.

Що робимо далі? Є два варіанти:

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

2) Видаляємо взагалі все з CSS’у блога і копіюємо пусті селектори з цього файлика: Файлик з пустим CSS’ом для блога

При використанні готового файлика слід пам’ятати, що в ньому зібрано селектори з декількох шаблонів — якісь із них у вашому блозі працювати не будуть. Але це не проблема — після завершення роботи варто видалити всі пусті селектори. Навряд вами буде використано всі 🙂

Чому я наголошую  увагу на повному видаленні попереднього коду з шаблона? Все просто: після завершення роботи можна не помітити залишки попереднього дизайну, які потім неодмінно помітить хтось інший 🙂

Якщо під час роботи ви зустрінете в своєму блозі селектор, не зазначений у файлику, прошу описати його в коментарі до цього уроку — файлик буде доповнено.

На цьому етапі — коли каркас та ідея майбутнього дизайну повністю готові, можна впевнено казати, що половину всієї роботи зроблено.

Урок 3. Що то таке і з чим його (правильно!) їдять

Помітила, що навіть редагуючи CSS блога іноді людина не зовсім розуміє, що ж саме вона редагує 🙂 CSS — це зовнішній вигляд, ні в якому разі не структура сторінки. Звичайно, в цьому питанні можна легко помилитися — ми ж за допомогою CSS’у робимо блоги ширшими та вужчими, замість посилань ставимо кнопочки і таке інше. Але! Все це ми робимо на готовому HTML’i. Тобто, звужуючи колонку ми не створюємо її, а лише змінюємо зовнішній вигляд. Так само робимо кнопочки з вже існуючого посилання. Якщо взяти звичайний малюнок, то HTML — то ескіз, а CSS — розфарбовка:

Хто уважний, той помітив, що на розфарбовці з’явилася сережка, якої не було на малюнку. Такі самі невеликі «сережечки» ми можемо додавати до своїх блогів за допомогою HTML-поля.

Будь-якому HTML-тегу в документі можна задати вигляд за допомогою CSS.

Приклад: у нас є тег «р» (абзац). Якщо ми хочемо змінити зовнішній вигляд всіх абзаців блога, у вікно з CSS вписуємо таке: p {background-color: green; width: 400px;} Всі абзаци у блозі (якщо не було зазначено нічого іншого) отримають зелене тло і ширину в 400 пікселів. Тобто кожного разу, коли в HTML-коді блога буде застосовуватися тег «р», на його зовнішній вигляд впливатиме надане вище CSS-правило.

Але ж абзаци в блозі існують не лише в тексті заміток — опис блога, його назва, інформація з вузьких шпальт — все це може мати в собі тег «р».  Завдяки цьому кожному елементу веб-сторінки дається власна назва, що прописується в HTML за допомогою атрибутів «id» та «class».

«id» відповідає за одинарні елементи — наприклад, опис чи назву блога.

За допомогою  «class» позначаються групи елементів, яким потрібно мати ідентичний вигляд — всі заголовки блога, або ж дати над кожною заміткою.

Назви подібних  CSS-селекторів кожен веб-дизайнер вигадує свої, в залежності від того який ресурс створюється. Завдяки цьому назви деяких селекторів у різних шаблонах можуть відрізнятися.

Для того, щоб ця взаємодія стала більш зрозумілою, я розмістила на малюнку  уявний HTML-код (зліва) і CSS для нього (зправа). Звісно, у справжньому коді всі назви будуть англійськими.

Синтаксис CSS:

Таким чином ми можемо:

а) Надати однаковий вигляд при використанні якому-небудь тегові (частіше за все це будуть теги посилань);

б) Змінювати зовнішній вигляд будь-якого елемента блога, що позначено в HTML’і атрибутами  «id» та «class».

Присутня ще одна корисна можливість. Якщо ви хочете, щоб декілька різних елементів мали однаковий вигляд, перед складанням для них правил CSS, перерахуйте їх селектори через кому. Тобто, десь так:

#BlogLinksBox a:hover, #ShareCss a:hover {}

А може бути і навпаки — в готовому дизайні ці селектори вже перераховані, а вам потрібно зробити елементи за які вони відповідають, різними. Нема нічого простішого — розділіть їх:

#BlogLinksBox a:hover {}

#ShareCss a:hover {}

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

Урок 2. Головне — ідея

Давайте сьогодні поговоримо про рибу. Так-так, про яку-небудь велику цілу рибину, що лежить перед вами на тарілці  і ніби запитує: «Агов, дівчино-хлопче, звідки ти мене почнеш їсти? З голови, або з хвоста?»

Я не думаю, що ми часто притримуємося в цьому питанні яких-небудь правил. Бо чи не все одно? Головне – з’їсти.

Дуже схожою мені уявляється ситуація з дизайнуванням. Головне – зробити дизайн. А з чого почати  — з опанування CSS’y, чи розробки зовнішнього вигляду?… Навідміну від поїдання риби, розробку інтернет-сторінки дуже важливо починати саме з голови. Тобто, із зовнішнього вигляду. Це – приємна творча справа, яка не вимагає від вас ніяких допоміжних знань чи навичок. Головне – мати гарну уяву та вміти хоч трохи працювати з графічним редактором.

Припустимо, що ви приблизно уявляєте, якого вигляду хотіли б надати своєму блогу: в теплих тонах чи холодних буде виконано дизайн; спортивний, аскетичний, веселий, романтичний чи яскравий — головне мати це уявлення.

CSS може вивчити кожна людина, що має достатньо наполегливості та часу. Вміти створювати щось нове на порожньому місці– набагато складніше. Тобто, детально розробивши найскладніший дизайнерський макет, з часом ви його таки зберете до купи за допомогою CSS. Але не факт, що вивчивши основні селектори та властивості каскадних таблиць ви зможете розробити захоплюючий дизайн. Це все одно, як зібратися написати оповідання, відктири зошит та застигнути над чистими аркушами з ручкою в руці і без жодного речення в голові. Проте, є декілька секретів успішного вигадування дизайнів. Цими секретами я сьогодні поділюся з вами.

1. Візьміть чистий аркуш паперу, олівець, лінійку та стиральну гумку на всяк випадок.

2. Накресліть приблизну схему власного блога. При цьому варто пам’ятати, що щирина-довжина шпальт може бути довільною. Оптимальний варіант, якщо ширина тіла блога не буде перевищувати 960 пікселів:

3. Обов’язковими елементами наших блогів є: тло (на малюнку цифрою не зазначено), шапка (1), тіло блога (2), широка шпальта (3), вузька шпальта (4), стрічка з категоріями та рсс (5), футер (6).

4. Розрахуйте ширину вузької та широкої колонки блога — в сумі вони не мають перевищувати 960 пікселів. Тобто, якщо широка колонка у вас складатиме 620 пікселів, вузька матиме ширину не більше 240 пікселів. Також розрахуйте висоту шапки і футера — вони можуть бути довільними. Ці розрахунки нам знадобляться пізніше.

5. Можливо, вам одразу спаде на думку який-небудь простий дизайн на кшталт вищенаведеного, але так станеться не обов’язково. Погляньте на власну схему, уявіть її в кольорі. Що хочеться на ній побачити? Квіти? Цукерки? Літаки? Гітару? Декілька різних елементів? Занотуйте все це біля схеми.

6. Тепер рушаємо до інтернету як до магазину зі списком потрібних продуктів (занотованих елементів дизайну). Вишукуємо їх зображення по черзі. Можна користуватися звичайним пошуковиком, а можна зайти на спеціальні інтернет-сторінки і пошукати там ( grsites.com | freewebpageheaders.com | pdclipart.org ).

7. Складаємо всі знайдені елементи до спеціально створеної папки на жорсткому диску. Переглядаємо їх і по черзі уявно прилаштовуємо до майбутнього шаблона. Якщо хочеться їх замалювати на макеті — просто супер!

8. Вийдіть за кордони. Малюнки зовсім не обов’язково мають розміщуватися всередині елементів. В кращих дизайнах зображення виходять за кордони. Що я маю на увазі? Градієнтні смужки на схемі вище мають кордони. Їх обмежують шапка та футер блога. На малюнку нижче у зебри кордонів нема — копита продовжуються у футері, голова у шапці блога переходить в спину, що в тілі блога:

Домашнє завдання: підберіть в інтернеті потрібні малюнки та розробіть дизайн для майбутнього шаблона на папері. Саме з цим, вже створеним у вашій уяві дизайном ми будемо працювати далі. Якщо вам буде здаватися, що виходить щось заскладне — все одно малюйте, не вагайтеся! Обов’язково приділіть увагу розмірам елементів.

Урок 1 — Інструменти

Допоміжних інструментів для кодування нам знадобиться вкрай мало – я як була прихильником аскетизму в цьому питанні, так ним і залишилася. Але є такі речі, без яких розробка складного дизайну із задоволення може перетворитися на марудну справу. Наше сьогоднішне завдання – встановити на комп’ютер всі те, про що йде мова далі.

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

Тож в першу чергу давайте подбаємо про зовнішній вигляд наших майбутніх дизайнів. Звичайно, можна робити дизайн без графіки, але буде він сухим і нецікавим. Картинки для дизайнів нам доведеться змінювати в розмірах, різати, експериментувати з їх кольоровими гамами, а якщо виникне натхнення, то і колажі робити. Якщо ви працюєте з Фотошопом, питання редагування графіки вирішується просто. Якщо ні – завантажте на комп’ютер маленьку програмку Paint.net. Посилання веде на сайт з російською версією програмки, довідкою та уроками до неї. Як блондинка блондинкам скажу – функції Paint.net можна вивчити за один день.

Як ви гадаєте, скількома браузерами я користуюся при черговій розробці дизайну? Насправді, трьома: Інтернет Експлорером (він є у кожного користувача Windows, тож встановлювати його не потрібно), Оперою і Файрфоксом. Чому так?

Завдяки чудернацькому збігу обставин CSS у різних браузерах буде відображатися по різному. Тож якщо ви ставитеся до дизайнування серйозно, потрібно мати принаймні 3 різні браузери для перевірки зовнішнього вигляду результатів власного кодування. Найпроблемніший у коректному відображенні CSS’у — Internet Explorer. Скажу чесно, дизайнери палко ненавидять Internet Explorer. При розробці складного проекту Explorer стає найстрашнішим кошмаром, що може наснитися. Краще б того Explorer’у не було. Але за законами Мерфі Explorer — чи не найуживаніший інтернет-браузер. Це завдяки тому, що він початково встановлений до всім нам відомоїї операційної системи. Багато корисних CSS-властивостей не працюють в Explorerі, та й нові версії CSS’у він підхоплює останнім з браузерів (якщо взагалі їх підхоплює). Explorer — дуже незручний для кодування будь-чого, тож я в ньому тільки перевіряю вже готові дизайни, а якщо щось відображається некоректно, підлаштовую за допомогою інших браузерів. Можливо, цей мій словесний виступ здається надто бурхливим, але якщо ви будете багато приділяти уваги кодуванню, скоро почнете думати так само, як і я.

Зазвичай для перегляду інтернет-сторінок я користуюся Оперою. Вона багато кому не подобається, але все ж таки є досить популярним (і зручним як на мене) браузером. В Опері присутні корисні функції, за допомогою яких ви можете переглянути структуру будь-якого сайту. Для цього потрібно натиснути на меню «Вигляд» (Вид) у верхній панелі та вибрати «Стиль» зі списку. Далі за стрілочкою обираємо «Режим користувача», якщо бажаємо переглянути сайт взагалі без CSS, тобто, один HTML. Зробіть таке з головною сторінкою Блокса або власним блогом — буде над чим поміркувати 🙂 Є корисним передивитися таким чином базові шаблони Блокса — ви зможете побачити, що їх HTML відрізняються один від одного. Для того, щоб повернутися до нормального вигляду, перемикніть на «Режим автора». Наступний, дуже важливий для нас елемент — class і id. Якщо його увімкнути, ви побачите всі CSS-селектори вашого блога. Деякі з них не прописані в стандартному CSS-коді, який ми з вами редагуємо. Ну і останній важливий пункт меню — «Видимий контур у елементів». Натиснувши на нього, ви побачита як побудовано блочну структуру блога.

Якщо Оперу не обов’язково встановлювати (замість неї ви можете користуватися Хромом, наприклад), то Mozilla Firefox для плідної роботи вкрай необхідна! Встановіть Мозіллу і додатковий плагін до неї під веселою назвою Firebug (вогняний жук). Відкрийте Мозіллу і натисніть на клавішу F12 — внизу вікна з’явиться велика панель з повним кодом сайта та безліччю функцій.

В першу чергу нас цікавлять 4 елементи (див малюнок):

1. Натисніть на цю кнопочку, а потім поводіть мишею по сайту.

2. Якщо активна ця вкладка, ви бачите HTML сторінки або її елемента.
3. Якщо активна друга вкладка, ви бачите CSS елементів
4. Якщо натиснути на будь-який блок сторінки за допомогою кнопочки з пункту 1, в цьому вікні з’явиться CSS елемента, який буде підлягати редагуванню в реальному часі. Без залежності від того, ваш це сайт або чужий 🙂

Давайте пограємося з головною сторінкою Блокса.

1. Відкрийте сторінку www.blox.ua, натисніть на F12 якщо у вас вже встановлено Firebug (якщо ні, то завантажте).
2. Оберіть елемент для досліджень (знущань) за допомогою кнопочки з блакитною стрілочкою (див. вище). Хай елементом для досліджень буде сірий фон Блокса. Тобто, просто клацніть мишею на сірому фоні.
3. У правому віконечку Firebug відкриється код елемента body Блокса. Спробуйте змінити колір його бекграунду 🙂 Що вийшло в мене:

 

Рожевий — то справжній колір блондинки! (червоні кола окреслюють активні області, на які вам потрібно звернути увагу, щоб зробити те ж саме).
Не переймайтеся, всі причинені Блоксу зміни будете бачити тільки ви. Firebug дозволяє редагувати елементи в реальному режимі, але зберегти таке редагування в інтернеті не на своєму ресурсі — неможливо.

Як я працюю з трьома браузерами? В Опері відкриваю вікно редагування CSS’у блога. В Мозіллі за допомогою Firebug змінюю дизайн якого-небудь елемента, копіюю код та вставляю його в Опері у вже відкрите вікно редагування. Коли все готове — тестую шаблони в трьох браузерах… в першу чергу — в сумнозвісному Експлорері. Можливо, це не найкращий варіант налаштування свого робочого місця. В будь-якому разі, якщо ви знайдете більш зручний спосіб для дизайнування шаблонів, користуйтесь ним! Для кожної людини стиль роботи — індивідуальний.

Домашнє завдання: Завантажте всі програми, про які йшлося в цьому уроці та спробуйте змінити що небудь за допомогою Firebug. Ознайомтеся з графічним редактором. Якщо ви вже вмієте робити найпростіші редагування фото та зображень, цей пункт домашнього завдання виконувати не обов’язково 🙂

Вступ

Люди, коли обирають нові книжки невідомого автора, поділяються на декілька типів: на тих, що купують книжку бо сподобалася обкладинка; на тих, що читають анотацію (критику) і таким чином вирішують, купувати книжку чи ні; а також на тих, хто переглядає зміст або прочитує перші декілька абзаців. Вступу не читає майже ніхто, хоча це може виявитися цікавою справою. Наприклад, читати вступи до книжок Стівена Кінга то справжня насолода – щиро раджу.

З «правильного» вступу можна довідатися багато чого цікавенького. Іноді автор дозволяє зазирнути до своєї голови і дати можливість читачеві побачити, яким чином трапилася його книга. Відкрию одну таємницю – дуже багато книжок не пишуться, вони трапляються. Ніби просто в якийсь момент приходить їхній час з’явитися в цьому світі. І тоді твої друзі починають з різних боків торочити: «А чи не написати тобі….» Або ти застрягаєш на декілька днів у якому-небудь БездоріжноДалекоВідДому, і нічого іншого не залишається, як почати писати щоб згаяти час, доки це ДалекоВідДому не перетвориться з Бездоріжно на Виїздне.

Нещодавно я виявила, що властивість «траплятись» мають не тільки книжки, а й блоги. Ця серія нових уроків з CSS саме «трапилася», а не була написаною. Трапилася з ваших запитань; з того досвіду що я отримала, складаючи попередні уроки, а також з палкого бажання систематизувати і якось належно оформити знання, що будуть потрібні кожному хто вирішить погратися з дизайном власного блога на Blox.ua. Звісно, ці уроки стануть у пригоді і за межами Блоксу, але насамперед вони призначені та налаштовані до тієї платформи, на якій знаходиться даний блог (в минулому це питання викликало чимало непорозумінь, тож я вирішила наголосити на ньому окремо).

Чому тепер CSS від блодинки, а не для чайників, наприклад? По-перше, ще роки півтори-два тому я в CSS’і була справжньою блондинкою. Тож іще не встигла забути, яким шляхом в моїй голові з’являлися потрібні знання. Саме таким шляхом я спробую надати їх в оновленій структурованій серії уроків. По-друге —  мені, як дівчині, легше уявити себе блондинкою, аніж чайником 🙂 Ну не було такого, щоб з моїх вух та носа йшла пара від роздратування коли щось не вдається; не настільки я емоційна людина. І по-третє, професіонали з цих уроків не дізнаються нічого нового. Будуть тільки прописні істини, розказані не занадто комп’ютеризованою мовою. Тож якщо ви професіонал – не витрачайте даремно час, гортаючи цей блог – він має фейсконтроль. Вільний вхід – тільки «блондинкам», «чайникам» та «напівчайникам» у CSS’i.

П.С.: Тепер цей блог дуже схожий на книгу. Він має обкладинку (дизайн), Зміст та Вступ. Не вистачає тільки сторінок з текстами, але скоро вони з’являться. Якщо ви дочитали до цього місця, то належите до рідкісної категорії людей, що приділяють увагу вступам. А яким чином ви обираєте нові книги?