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

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

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

 

На скріншотах — «чистий» 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 {}

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