HTML-Таблиці, теорія

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

Тицни сюди

Іншими словами,  відвідувач побачить просто набір інформації 🙂 Розглянемо наступну сторінку:

Тицни сюди

З’явилася структура, завдяки якій ресурс має навігаційну панель і більш «професіний» вигляд. Я спеціально навела приклади сторінок з ресурсу Народ.ру, бо їх робили не професіонали, а звичайні люди, яким стало цікаво поекспериментувати з кодуванням  – такі, як ми з вами.

Погляньте на свій власний блог знаючи, що він також має табличну структуру. Спробуйте намалювати  її в уяві (або й на папері).  До речі, не відкладайте папір далеко, бо сьогодні він буде потрібен.

Розглянули блоги? Якщо так, то скоріше за все, вже помітили —  спочатку була саме таблиця. Не тексти, не графічні елементи, не CSS, а таблиця. І вже на неї, як м’язи і шкіра на скелет нарощувалися шапки з назвою та описом блога, меню, місця під банери і рекламу, різноманітні кнопочки і графічні елементи.

А до таблиці?…

До таблиці була ідея. Ідея про те, що саме, яких розмірів і де має знаходитися в блозі. Звичайно, як будь-яка інша ідея, ця спочатку прописувалася на папері, а потім вже втілювалася у життя. Подумайте, що обов’язково має бути на сайті вашої мрії? Я назву декілька елементів:

  1. Мальований заголовок
  2. Логотип
  3. Бокова панель з меню
  4. Текстове поле
  5. Місце для лінків на інші ресурси

 

Це – дуже проста модель, що не враховує безліч інших варіантів – чати, закладинки, календарі і т.д. Якщо у вашій уяві з’явилося більше елементів – просто супер J Запишіть їх.

А тепер – візьмемо аркуш паперу і спробуємо накреслити всі ці елементи у вигляді таблички:

Нумерація згідно с моїм списком елементів вище

Приблизно так буде виглядати сторінка з подібним каркасом. Увага! Сайту що на малюнку, не існує. Тобто, дизайн у нього зовсім не такий 🙂

Тож домашнє завдання:

а) роздивитися якомога більше каркасів у різних веб-сторінок і

б) намалювати каркас для власного проекта — будемо працювати далі 🙂

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*