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

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

Урок 2. Головне — ідея: 18 комментариев

  1. Ой добре! Нарешті хтось розкаже про КСС, мовою рівня дитячого садка!! Так шо , можливо я навіть щось зрозумію! Чекаю наступних уроків!
    А шапку ти не там розмістила. Зебра буде в голову мерзнути (:.
    Отже, питання яке я обіцяв задати. Теж не в тему, але… Як зробити напівпрозорий фон для для блоку із коментарями? Шоп боді-фон був видний.

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

    А можна я відповім на попередній коментар? 😉

    seeker_ua треба створити маленький квадратик такого кольору, який тобі потрібно і надати йому властивість прозорості приблизно 50%, а потім підставити як бекграунд в цсс в блок вузької колонки.

    a.betka писала мені в коментаріях до мого першого шаблону тут: zamitka.blox.ua/2009/10/Pogovorimo.trackback?key=b09387213f

    a.betka, а в мене таке робоче запитання: обмеження розміру файлу цсс на Блоксі стосується кількості знаків чи якогось іншого параметру? Почала робити шаблон, а мені не дозволяє зберігати в ньому всі зміни, які я хочу. Це тут shablon15.blox.ua/html .

  3. «такої проблеми не виникало » — ещё как виникало 🙂

    пишет: невозможно что-то… бла-бла-бла…

    для эксперимента добавь текста в любой цсс — увидишь!

    там ограничение!

    в заметках — ограничения, в цсс — ограничения… шо за жизнь?!,

  4. Добрий день!

    А в мене таке питання: чи є можливість в сss прописати кнопочки і поля для вводу тексту? Наприклад, якщо я хочу зробити сторінку-анкету, де користувач пише відповіді на питання, а потім натискає кнопку і його дані зберігаються. Якщо ні, то можливо є якісь альтернативи?

  5. Такі речі робляться не за допомогою css. Css відповідає тільки за зовнішній вигляд сторінки. Для розробки простої форми (що буде тільки збирати дані і зберігати в окремому файлику) можна обійтися HTML’ом та Css. Для розробки складних форм потрібно вчити щось із цього: Javascript, Flash, PHP чи DHTML. Вставити подібну форму до блога на Блоксі можливо, якщо вона буде реалізована за допомогою Javascript, Flash, DHTML, але не PHP.

    DHTML — це не мова, а специфічна назва для сукупності засобів, за допомогою яких розроблюються динамічні веб-сторінки: HTML, JavaScript, HTML DOM, та CSS.

    Тобто, у такої форми має бути розмітка ( HTML), дизайн (CSS) і ще щось, що зробить її динамічною — надасть можливість збереження, обробки та стягнення даних з сервера.

  6. mandrivnik,

    розкажіть докладніше, якою саме має бути форма. Я тоді зможу конкретно сказати, що саме потрібно знати для її розробки.

  7. пять коп вставлю 😉

    вот прикольный сервис: main-ip.ru/?cont=forma

    предоставляет формы обратной связи в том числе.

    а вообще, mandrivnik, уточните задачу.

    «зберігаються» где?

    в случае с формой обратной связи, вы будете получать данные из формы на e-mail

    а там уж зберигайте как хотите, обрабатывайте, публикуйте.

    ещё можно «народом» пользоваться.

    у них много готового есть. формы, опросы…

    вот «народное» решение — dupa-blox.narod.ru/addfoto.html

    я получаю фото от пользователя и публикую его

    дёшево и сердито 😉

  8. a.betka, 4you: дякую!

    Це мені потрібно для одного інститутського проекту. Спасибі за сервіс main-ip.ru/?cont=forma , він цілком підійшов.

  9. a.betka, маю ще питання: чи є на блоксі можливість додавати мітки до статей? Розділи — це добре, але інколи трапляється, що замітку можна віднести одразу до кількох тем, і саме тут би зручно було скористатися мітками.

  10. Щось не зовсім вийло. Дивіться, я розмістив код на бічній панелі в victorpolyanko.blox.ua/html, але коли спробував зареєструвати його на main-ip.ru, отримав повідомлення, що «форма на сторінці не знайдена». Я вставив код у розділі «Вигляд — Елементи — Поле на html-код під закладками». Можливо, потрібно в іншому місці?

  11. Я перевірив різні варіанти, і виявив, що HTML свариться на textarea.
    А взагалы, моя проблема не в CSS, тому більше про неї тут не писатиму 🙂

    Дякую за поради 🙂

  12. mandrivnik
    да, блокс текстареи не любит… но надурить можно 🙂

    присмотритесь всё-таки к «народу».

    там проще и, главное, количество «анкет» не ограничено!

  13. какую-то нужно «книгу жалоб» завести что-ли 🙂

    вот, жалуюсь:
    div id=»sharePostBlock» class=»InfoUserCommCommentedEntry»

    что вот это?! как это? или это так надо?

    и id и class…

    а классу этому два объекта относятся! хочешь изменить один — изменяются оба!

    кошмарный сон

    (из «белого» шаблона это)

  14. username,

    сегодня обязательно отвечу, но позже.

    П.С.: Приз был выслан вчера.

  15. «сегодня обязательно» — та можете так уж не спешить 😉
    главное, чтобы в принципе решение было…
    а то хто ж это выдержит?! к одному классу — два разных абсолютно объекта!

    про приз — видел 😉 ловлю-ю-ю

Обсуждение закрыто.