Тема сьогоднішнього поста є досить актуальною як для рядових веб-майстрів, так і для веб-майстрів з СЕОшним ухилом. Більш того, оскільки верстка сайтів з недавнього часу для мене є основним родом діяльності, то це і моя найулюбленіша тема.
Про те і поговоримо.
Оскільки питання оптимізації сайту при його розробці для мене завжди стоять не на останньому місці, важливий початковий крок у цьому процесі - створення коду сторінок оптимального розміру. то пак використання якомога меншої кількості параметрів для тегів з винесенням їх в окремий файл каскадних таблиць стилів (CSS).
Практика 3-х з гаком років досвіду показала - як не намагайся зменшити розмір сторінки при табличному способі верстки, все-таки кількість самих тегів використовується просто величезна, тому що доводиться множинне вкладати одні таблиці в інші для отримання необхідного результату.
Адже по суті таблиці придумані саме для виведення табличних даних. а не для розмітки елементів сторінки.
Те, що розташоване в таблиці:
може бути представлено у вигляді блокової (Дівова) верстки:
і це займає набагато менший обсяг дискового простору.
Різниця в масштабах сторінки і, тим більше, цілого сайту, стає дуже істотною і безпосередньо позначається на швидкості завантаження веб-ресурсу, до чого і слід прагнути будь-якого веб-майстру.
Як то кажуть, все приходить з досвідом, тому, мабуть, кілька місяці тому, коли я вирішив спробувати DIV'и, такий тип верстки викликав у мене непідробний інтерес і з тих пір є для мене фаворитом.
Ось які переваги я бачу блокової верстки в порівнянні з табличній:
- Суттєве зменшення розміру сторінки. як правило в 2-3 рази (в залежності від складності структури сторінок), що значно зменшує час завантаження веб-сайту. При цьому незначно виросте розмір CSS-файлу, але, завдяки тому, що він одного разу кешируєтся браузером користувача та при зверненні до інших сторінок зчитується вже з його комп'ютера, в результаті сайт вантажиться набагато швидше, ніж табличний.
- Зниження загальносвітового інтернет-трафіку. Слідство 1-го пункту.
- Зниження навантаження на сервер. Знову ж наслідок 1-го пункту.
- Значно зручніше міняти оформлення сторінок сайту, винесене в CSS-файл. При цьому практично відсутня необхідність редагування HTML-коду.
Легкість маніпулювання елементами сайту. Будь SEO-фахівець підтвердить, що чим вище контент сторінки розташовується в HTML-коді, тим більш значима така сторінка з точки зору пошукової оптимізації. Пошукові системи віддадуть більше респекту такій сторінці і швидше проїндексируют її.
Завдяки можливостям Дівова верстки можна домогтися того, що в коді спочатку піде основний контент сторінки, а тільки потім шапка, ліва і / або права колонки. При цьому зовнішній вигляд сторінки абсолютно не зміниться. Безсумнівно, таблицями теж можна добитися подібного результату, проте діви дозволяють реалізувати це набагато простіше.
Уміння верстати дивами базується на знанні технології CSS. Тобто якщо Ви добре володієте таблицями каскадних стилів, то з упевненістю можу сказати, що дуже легко перебудувати на блочну верстку.
Тепер безпосередньо до практики.
Занепокоєні необхідністю вивчити якомога більше інформації про блочну верстку, в Інтернеті я не знайшов допомоги або керівництва, яке б від і до розповіло про технології даного способу верстки (як я зрозумів, на тему Дівова верстки взагалі набагато менше практикуму, ніж по табличній верстці). Проте, знайшлися веб-ресурси, на яких є необхідна інформація. Вивчивши її, можна отримати уявлення про блокової верстці і спробувати застосувати знання на практиці.
Отже, ось які джерела я пораджу. Корисно буде вивчити тим, хто хоче перейти на DIV'и і розвинути свої навички в CSS.
Ось ще кілька книг, які мені рекомендували до прочитання в одному з дискусійних листів Subscribe.Ru:
- Джеффрі Зельдман. «Web-дизайн по стандартам.» (Загальні питання проблематики сучасної верстки, історичний екскурс)
- Ден Седерхольм. «Куленепробивний web-дизайн.» (Суто практика і трюки)
- Ерік Мейер. «CSS-каскадні таблиці стилів. Детальний керівництво. »(Кажуть, що це просто біблія!)
Важливий момент, з яким Ви зіткнетеся при переході на блочну верстку - необхідність застосування різних хаков для кросбраузерності відображення сторінок. Після таблиць в Дівова верстці проявляється досить багато багів, для більшості з яких, як правило, знаходиться управа за допомогою цих самих хаков, наявних для кожного браузера.
В окремій статті, яка періодично оновлюється, я зібрав хакі для різних сучасних інтернет-браузерів: Персональні CSS-хакі для Internet Explorer, Opera, FireFox, Safari, Google Chrome.
З досвідом CSS-верстки кількість використовуваних хаков Ви зведете до мінімуму. І завжди прагнете до того, щоб обходитися без них зовсім, тому що по суті CSS-хакі - це зло.
Також хочу звернути увагу на наступне властивість, яке потрібно для завдання мінімальної ширини сторінки при блокової верстці. щоб при звуженні браузера, інформація не з'їжджала в купу (якщо ширина сторінки «гумова»):
На цьому поки все.