1 урок блондинки опубліковано!

Чим користуються блондинки під час повсякденної роботи в Інтернеті? Ну аж ніяк не Однокласниками.ру та Вконтакті! З першого уроку ви дізнаєтеся, якими інструментами потрібно оволодіти для успішного дизайнування (не тільки на Блоксі). Якщо ви читали попередню версію блога, то швидко зорієнтуєтеся що до чого і мабуть, одразу почнете щось творити. Якщо ж ви новенький на цьому блозі — нічого страшного! Просто встановіть потрібні програми та чекайте на продовження розповіді.

 

Перейти до уроку>>>

Урок 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’y, а незабаром з’являться і самі уроки 🙂

В категорії «Блог CSS’шника» будуть публікуватися всі новини, що стосуються даного блога. Тобто, якщо довгий час не навідуватися за CSS’ом до Блондинки, про всі новини що тут відбулися, можна дізнатися з головної сторінки.

Перейти до Вступу>>>

Вступ

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

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

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

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

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

Зміст

Вступ

Урок 1
Наші інструменти

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

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

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

Урок 5
Гра у прямокутнички разом з Firefox та Opera

Урок 6
А яке у нас body?

Урок 7
Розфарбуйте мене!

Урок 8
Шапка — блогу голова

Урок 9
Крок вперед, крок назад, вниз та вгору

Урок 10
Широка шпальта

Урок 11
Вузька шпальта

Урок 12
Найголовніше — спілкування

Урок 13
Друге обличчя

Урок 14
А якщо губи Ніканора Іванича та прилаштувати до носа Івана Кузьміча?

Словник

Післямова

Дизайн змінено

Разом зі зміною формату блога мені здалося доцільним змінити його дизайн. Я видалила всі попередні CSS-коди та переписала їх що називається, «з чистого листа». Ця зміна — тільки основа для нового вигляду блога. Різноманітні дрібнички (календар, категорії, коментарі і т. д.) з часом наберуть іншого вигляду.

Чи подобаєтьмя вам прозорий чорно-білий варіант блога? Можливо, хочеться додати кольорів? Якщо хочеться щось змінити або додати — напишіть в коментарях до цієї замітки. Доки дизайн не буде остаточно готовий, CSS блога відкритий для редагування 🙂