Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

Навигация по сайту

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

Новые исследования поискового поведения пользователей

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

Таблицы для верстки - это не обязательно зло

Главная « Уроки Web-мастерства « Таблицы для верстки - это не обязательно зло

версия для печати

Табличная верстка …

Вы, конечно, уже слышали, что верстка на основе таблиц была заменена стилями CSS для позиционирования элементов страницы.

Однако в наш переходный период, когда разработчики браузеров совершенствуют поддержку CSS, некоторые авторы, в том числе и я, по-прежнему предпочитают использовать таблицы для формирования базового каркаса страницы.

Таблицы для верстки использовать можно, но лучше придерживаться современного веб дизайна и имеющихся тенденций по соблюдению стандартов и обеспечению доступности.

Таблицы для верстки - это не обязательно зло, и не обязательно недопустимая практика, если только ими правильно пользоваться. В этой статье я покажу, как применять таблицы для верстки с минимальным ущербом.

 

Используйте базовые табличные элементы …

Если вы используете таблицу только для верстки, применяйте минимальный набор табличных элементов:

  • table - используется для создания таблицы;

  • tr - используется для создания строк;

  • td - используется для создания ячеек таблицы;

Не следует использовать заглавия, заголовки таблиц, группы строк и все средства повышения доступности таблицы. Они лишь создадут путаницу или замедлят скорость работы при чтении с использованием вспомогательных устройств.

 

Таблицы должны быть простыми и неперегруженными …

В смысле доступности главной проблемой использования таблиц для верстки является их сложность. Не так уж редко можно встретить таблицы, которые должны обеспечить верстку с точностью до пиксела и использующие такие методы, как:

  • Таблицы, вложенные в таблицы. Иногда таких уровней много.

  • Пустые строки, вставленные исключительно для определения ширины столбцов.

  • Ячейки таблиц, содержащие рисунки GIF размером в 1 пиксел, используемые в качестве пробелов.

  • Многочисленные объединенные строки и столбцы.

  • Многократное использование презентационных атрибутов таблицы.

Использование этих методов обычно ведет к созданию чересчур сложных табличных структур и раздутой разметки. Незрячие пользователи при переходе от ячейки к ячейке могут быть дезориентированы, пытаясь постигнуть смысл содержимого. Сложность и размер файла исходного кода не принесут никакой пользы и визуальным браузерам.

Ниже я привожу пример структурной раскладки на основе таблиц, которую я с успехом использую для верстки дизайна своих работ. В этом примере в качестве основного каркаса сайта применяется легкая, совместимая со стандартами и чрезвычайно логичная табличная разметка, а за внешний вид, полностью отвечает CSS.

Такой подход позволяет быстро провести смену дизайна и значительно увеличивает скорость загрузки страниц сайта в браузере.

Вы может использовать данный шаблон в своих разработках!!! Шаблон хорошо работает во всех браузерах.

Достаточно будет просто открыть эту статью, скопировать код в код ваших страниц, а CSS-правила - в файл таблиц стилей и затем подкорректировать их для конкретных нужд.

Это очень удобно и поможет вам сэкономить время, используя готовые заготовки, лишь слегка изменив их.

Код логичной табличной разметки:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
<title>Табличная верстка</title>
<meta name="description" content="">
<meta name="keywords" content="">

<meta http-equiv="content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="content-language" content="ru">

<style>
<!--
html {
height : 100%;
}

body {
background-color: #fff;
height : 100%;
margin : 0;
padding : 0;
font-size : 0.92em;
line-height : 1.35em;
font-family : Arial, sans-serif;
}

td {
font-size : 0.92em;
line-height : 1.35em;
font-family : Arial, sans-serif;
}

h1 {
font : normal 2.25em Arial, sans-serif;
margin : 0;
padding : 0;
}
h2 {
font : normal 1.80em Arial, sans-serif;
margin : 0;
padding : 0;
}
h3 {
font : normal 1.60em Arial, sans-serif;
margin : 0;
padding : 0;
}

#masthead {
height : 100px;
background-color: #d0d0d0;
}

#head_logo_box {
width : 20%;
}
#head_logo_box h2 {
margin : 0 0 0 2.0em;
}

#head_nav_box {
width : 80%;
}

#content p {
text-align: justify;
}

#text {
padding : 0.5em 0 0 0;
background-color: #fffffe;
}

#left_col {
width : 20%;
padding : 2.0em 0 2.0em 0.5em;
vertical-align : top;
}

#main_col {
padding : 2.0em 2.0em 2.0em 0;
vertical-align : top;
}
#main_col a {
color: #0d70bd;
}
#main_col a:hover {
color: #bb0000;
}

#right_col {
width : 20%;
padding : 2.0em 0.5em 2.0em 0;
vertical-align : top;
}
#right_col a {
color: #0d70bd;
}
#right_col a:hover {
color: #bb0000;
}

/* Верхнее горизонтальное меню */

ul#nav_head {
list-style-type: none;
margin: 2.0em 0 0 0;
padding: 0;
}
ul#nav_head li {
display: inline;
}
ul#nav_head li a {
padding: 0.5em 0.5em 0.5em 0;
margin: 0 0.4em 0 0;
color: #000;
}
ul#nav_head li a:hover {
color: #bb0000;
}

/* Левое вертикальное меню */

ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#nav li {
padding : 0 0.5em 0 0;
text-align: left;
}
* html ul#nav li {
margin : 0 0 -0.8em 0;
}
ul#nav li a {
display: block;
padding: 0.5em 0.5em 0.5em 2.5em;
font-size : 1.15em;
color: #000;
}
ul#nav li a:hover {
color: #bb0000;
}
ul#nav li strong {
display: block;
padding: 0.5em 0.5em 0.5em 2.5em;
font-size : 1.15em;
font-weight : bold;
color: #000;
}

/* Нижнее горизонтальное меню */

ul#nav_footer {
list-style-type: none;
margin: 2.0em 0 0 0;
padding: 0;
}
ul#nav_footer li {
display: inline;
}
ul#nav_footer li a {
padding: 0.5em 0.5em 0.5em 0;
margin: 0 0.4em 0 0;
color: #000;
}
ul#nav_footer li a:hover {
color: #bb0000;
}

#footer {
height : 100px;
background-color: #d0d0d0;
}
#footer td {
vertical-align : top;
}

#copywrite {
width : 33%;
padding : 2.0em 0 0 2.0em;
}
#copywrite p {
margin : 0 0 0 1.0em;
}
#copywrite a {
color: #000;
}
#copywrite a:hover {
color: #bb0000;
}

#navigation {
width : 34%;
padding : 0 0 0 2.0em;
}

#contacts {
width : 33%;
padding : 2.0em 0 0 2.0em;
}
#contacts a {
color: #000;
}
#contacts a:hover {
color: #bb0000;
}
-->
</style>
 
</head>

<body>

<table width="100%" border="0" cellpadding="0" cellspacing="0" id="masthead">
   <tr>
      <td id="head_logo_box">
         <h2>ЛОГОТИП</h2>
      </td>
      <td id="head_nav_box">
         <!-- Горизонтальное меню навигации -->
         <ul id="nav_head">
            <li><a href="#">Новости</a></li>
            <li><a href="#">Статьи</a></li>
            <li><a href="#">Полезные советы</a></li>
         </ul>
      </td>
   </tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="text">
   <tr>
      <td id="left_col">
         <!-- Вертикальное меню навигации -->
         <ul id="nav">
            <li><a href="#">Новости</a></li>
            <li><a href="#">Статьи</a></li>
            <li><a href="#">Полезные советы</a></li>
         </ul>
      </td>
      <td id="main_col">      
         <h1>Основной контент</h1>
         <div id="content">
            <p>Долго эту ночь <a href="#">княжна Марья</a> сидела у открытого окна в своей комнате, прислушиваясь к звукам говора мужиков, доносившегося с деревни, но она не думала о них. Она чувствовала, что, сколько бы она ни думала о них, она не могла бы понять их.</p>
            <p>Она думала все об одном — о своем горе, которое теперь, после перерыва, произведенного заботами о настоящем, уже сделалось для нее прошедшим. Она теперь уже могла вспоминать, <a href="#">могла плакать</a> и могла молиться.</p>
          </div>            
      </td>
      <td id="right_col">      
         <p><a href="#">Простота в дизайне</a> сайта — залог успеха!</p>
         <p><a href="#">Что такое</a> белое пространство для веб дизайна?</p>
         <p><a href="#">Как правильно</a> подобрать палитру цветов для дизайна сайта?</p>
      </td>      
   </tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="footer">
   <tr>
      <td id="copywrite">
         <p>© 2008 &laquo;<a href="#">Авторские права</a>&raquo;</p>
      </td>
      <td id="navigation">
         <!-- Горизонтальное меню навигации -->
         <ul id="nav_footer">
            <li><a href="#">Новости</a></li>
            <li><a href="#">Статьи</a></li>
            <li><a href="#">Полезные советы</a></li>
         </ul>
      </td>
      <td id="contacts">
         <p><a href="http://www.korovenkov.ru/">Контактная информация</a></p>
      </td>
   </tr>
</table>

</body>
</html>
 

Использование таблиц стилей для представления внешнего вида …

Секрет простой и четко организованной таблицы для верстки состоит в том, что таблица должна использоваться только для создания базового каркаса, а все прочие вопросы, связанные с представлением, должны решаться при помощи каскадных таблиц стилей (CSS).

Хорошо уже то, что при использовании CSS исчезает необходимость в большинстве хитростей, связанных с версткой, о которых говорилось выше.

Например, одной из главных причин использования вложенных таблиц является получение для разных частей таблицы разного расстояния от границ ячейки до содержимого (cell padding). При использовании CSS такое расстояние можно указать для каждой ячейки.

Также если раньше, чтобы поместить текст в окрашенный каким-либо цветом прямоугольник, нужно было помещать текст в таблицу, состоящую из одной ячейки, то теперь CSS позволяет отобразить таким способом любой элемент, для чего нужно указать только размеры и фоновый цвет.

При использовании фоновых изображений, замены изображений и техники скругления углов, данную верстку с одной простой таблицей можно еще больше приблизить по внешнему виду к оригиналу.

Это лишь несколько примеров, показывающих как можно использовать CSS в сочетании с элементарной таблицей для верстки. Таблица формирует структуру, a CSS обеспечивает представление всех материалов, так что отпадает необходимость в дополнительных таблицах и ячейках таблиц.

Если вы перейдете к использованию такой техники, отсюда уже недалеко будет и до позиционирования средствами CSS и дизайна без таблиц.

 
Урок № 18: | Дата: 02.09.2008 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Заголовки разделов текущей страницы…

Оглавление

Используйте базовые табличные элементы…

Таблицы должны быть простыми и неперегруженными…

Использование таблиц стилей для представления внешнего вида…

 
Уроки Web-мастерства

Уроки Web-мастерства

Управление web-проектом

Как более эффективно писать для Сети?

Как сделать сайт максимально удобным?

Особенности структуры текста на Web-сайте

Создание компонентов интерфейса в XHTML

Создаем CSS-меню

Основные типы CSS-макетов

Раскрывающиеся CSS-меню

Создание многоуровневых раскрывающихся CSS-меню

CSS-методы замены текста изображениями

Прямоугольники с закругленными углами на основе CSS

CSS-методы центрирования web-страницы

CSS-эффекты наведения указателя мыши

CSS-стили для шрифтов и текста

Навигационные CSS-панели на основе списков

Свободное размещение в CSS

Создание эффекта mouseover при помощи CSS

Внедрение ролика Windows Media на Web-страницу

Добавление Flash на Web-страницу

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov