Головна

Створення гнучкої сітки

  1.  Amp; && 385. Створення нового документа
  2.  Customize the Resource Deck (Створення колоди ресурсів).
  3.  RAID0 - Створення дискової послідовності (Striping)
  4.  Архаїчний Єгипет. Створення централізованої держави.
  5.  Б) Відтворення, або відродження.
  6.  Бриф на створення імені
  7.  У яких організаціях рекомендується створення кабінетів з охорони праці або куточків охорони праці?

Уявіть, що дизайнер настільки вражений вашої швидкої і якісною роботою над заголовком, що надіслав вам інший макет, і тепер вам потрібно написати код для блога сайту Robot or Not (Мал. 2.9).

Мал. 2.9. Нове завдання - перетворення ескізу в гнучкий макет

Плюс до всього дизайнеру настільки сподобалася робота, що він надіслав коротку схему змісту сторінки (Мал. 2.10), Завдяки чому ми можемо не витрачати час на планування. Потрібно якось його віддячити.

Мал. 2.10. Схема розташування елементів для нашого блогу

Ми можемо швидко і вправно перевести його схему в базову структуру верстки:

Recently in The Bot Blog

...

...

Наша розмітка вийшла простий і акуратною, семантично вірною і чудово підходить для контенту. Ми створили основний контейнер для всієї сторінки (#page), який, в свою чергу, містить модуль. blog. Всередину нього ми помістили ще два блоки: один з класом. main для головного змісту статті, а другий з класом. other для всього іншого. Звучить, звичайно, не дуже поетично, але, з іншого боку, це і не збірка віршів.

А тепер припустимо кілька етапів - як це робиться на кулінарних шоу, де кухар кладе в каструлю сирі продукти, а через хвилину виймає з духовки повністю готову індичку. (Ця метафора прекрасно демонструє те, як часто я дивлюся кулінарні шоу ... або готую індичку.)

І все ж припустимо, що ми вже створили всі CSS, пов'язані зі шрифтами, фоновими зображеннями і всіма елементами нашого дизайну, що не мають відношення до макету (Мал. 2.11). Тепер ми можемо зосередитися виключно на створенні «гумовою» сітки.

Мал. 2.11. Робота над шаблоном закінчена! Якщо, звичайно, не брати до уваги те, як він повинен виглядати в самому кінці

Так як же нам перетворити ці блоки. main і. other в потрібні колонки? У нас вже є схема контенту і основна розмітка, тепер давайте уважніше поглянемо на фізичні параметри сітки в оригінальному дизайні (Мал. 2.12).

Мал. 2.12. Тепер наша сторінка заснована на сітці!

Сама сітка розділена на 12 колонок по 69 пікселів кожна, відокремлених один від одного проміжками шириною в 12 пікселів (12px). У сумі колонки і проміжки дають нам повну ширину в 960px. Сам же блог шириною 900 пікселів відцентровано по горизонталі в межах полотна.

Ось вони, деталі високого рівня. І якщо ми уважно розглянемо дві колонки в блозі (Мал. 2.13), То побачимо, що ширина лівої основної колонки (.main в нашій розмітці) становить 566 пікселів, в той час як ширина правої допоміжної (.other) - тільки 331 піксель.

Мал. 2.13. Давайте-ка вивчимо деталі і виміряємо ширину внутрішніх колонок

Щось занадто багато пікселів навколо, так? І якби пікселі нас влаштовували, ми могли б просто перенести їх в CSS. (Ей! Це дуже важливо!)

#page {

margin: 36px auto;

width: 960px;

}

.blog {

margin: 0 auto 53px;

width: 900px;

}

.blog.main {

float: left;

width: 566px;

}

.blog.other {

float: right;

width: 331px;

}

Відмінно. Ми встановили ширину #page в 960 пікселів, відцентрувати в ній модуль .blog шириною 900 пікселів, задали ширину. main (566) і. other (331) і нарешті розмістили ці колонки поруч. Результат виглядає шикарно (Мал. 2.14).

Мал. 2.14. Ми позбулися непотрібних пікселів, і наш дизайн майже готовий. Чи ні?

І хоча наш макет ідеально збігається з оригінал-макетом, він вийшов зовсім негнучким. Фіксована ширина в 960px робить нашу сторінку абсолютно байдужою до змін розмірів області перегляду. Іншими словами, якщо ширина вікна буде менше 1024 пікселів, перед читачем з'явиться смуга горизонтальної прокрутки (Мал. 2.15).

І нас це, м'яко кажучи, не влаштовує.

Мал. 2.15. Дизайн виглядає відмінно, але він зовсім негнучкий. Давайте це виправимо

 контекстне відновлення |  Від пікселів до відсотків


 анотація |  Від наукового редактора |  Наша чуйна мережу |  А тепер пристебніть ремені |  чуйна архітектура |  шлях вперед |  Медіазапроси (media queries), модуль специфікації CSS3. |  гнучка сітка |  гнучкі шрифти |  Гнучкі поля і відступи |

© 2016-2022  um.co.ua - учбові матеріали та реферати