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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое CMS?

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

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

Карта сайта

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

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

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

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

Заголовки

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

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

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

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

Метаданные

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

Макеты Web-страниц на основе табличной HTML-разметки

Главная « Статьи « Макеты Web-страниц на основе табличной HTML-разметки

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

Основные принципы табличной разметки…

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

Для полного описания информации, содержащейся в таблице, тег <TABLE> снабжен соответствующими элементами и атрибутами, в том числе элементом <ТН> для обозначения заголовков столбцов и строк, элементом <CAPTION>, представляющим заголовок, и атрибутом SUMMARY, обеспечивающим сжатое описание назначения и структуры таблицы.

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

При установке нулевого значения границ таблицы (<table border="0">) получаются «невидимые» таблицы, которые можно использовать для оформления различных элементов разметки, например для создания столбцов и отступов, установки интервалов и ограничения длины.

Разметка с помощью таблиц очень широко распространена, и большинство сетевых авторских инструментов используют таблицы в качестве основы макета страниц.

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

Теги представления, например <FONT>, <В> и <I>, стали вчерашним днем, когда появилась возможность использовать стили для оформления Web-документов.

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

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

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

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

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

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

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

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

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

 

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

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

При этом единственным вариантом расположения элементов на странице было их отображение в виде вертикальной последовательности. О размещении элементов в разных областях страницы оставалось только мечтать.

Пытаясь найти решение этой задачи, дизайнеры обнаружили, что для оформления вывода можно использовать структурный элемент <TABLE>, если установить значение его атрибута BORDER равным нулю (<table border="0">), и, следовательно, сделать таблицу невидимой.

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

Этот искусственный способ оказался настолько успешным, что большинство дизайнеров используют именно таблицы при создании Web-сайтов.

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

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

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

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

 
внимание!

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

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

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

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

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

Более ранние версии браузеров недостаточно эффективно поддерживают CSS (каскадные таблицы стилей) и не способны обеспечить точное отображение форм вывода на основе таблиц стилей.

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

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

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

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

 
внимание!

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

 

Используйте простые макетные таблицы…

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

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

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

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

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

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

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

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

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

 
внимание!

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

 

Используйте только основные теги таблицы…

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

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

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

Если один и тот же элемент (<TABLE>) используется для выполнения двух функций - оформление вывода и предоставление информации - и отсутствует разметка для их различения, у пользователей с ограничениями зрения не остается иного выхода, кроме рассмотрения каждой из таблиц.

В связи с необыкновенно широким распространением таблиц разметки некоторые производители программ - синтезаторов речи разрабатывают программы, которые различают таблицы разметки и таблицы данных.

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

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

В таблицах разметки должны использоваться только основные элементы разметки строк и ячеек (<TR> и <TD>).

Заголовки столбцов, заголовки таблицы, сводки - все элементы, которые дают сведения о таблице, - не имеют значения в контексте таблиц разметки.

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

 
внимание!

Программы - синтезаторы речи не в состоянии отличить «настоящие» таблицы от таблиц, используемых для оформления макета страницы, в связи с чем пользователи с ограничениями зрения вынуждены знакомиться с разметкой таблицы. Таблицы разметки должны быть как можно более ненавязчивыми, используйте только основные теги таблицы, такие как <TR> и <TD>.

 

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

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

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

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

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

При использовании звукового воспроизведения таблицы содержание оказывается отрывочным и бессмысленным. Заголовки воспроизводятся одновременно не с содержанием, к которому они относятся, а с другими заголовками.

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

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

 
внимание!

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

 

Используйте ячейки с изменяющейся шириной…

В соответствии с концепцией Сети, Web-страницы - это гибкие документы, которые могут изменяться в зависимости от способов или устройств, используемых для получения доступа к ним.

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

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

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

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

К сожалению, постоянные формы вывода снижают возможности Сети, ибо документы, созданные с их помощью, предусматривают только один вариант просмотра.

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

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

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

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

Читая напечатанные страницы, мы не можем изменить ширину столбцов, поэтому перед дизайнером стоит задача обеспечить размер шрифта и текста, подходящий для «среднего» читателя (оптимальными считаются строки, состоящие из 45-75 знаков).

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

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

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

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

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

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

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

 
внимание!

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

 

Примеры макетов на основе HTML-таблиц…

Ну что ж, мы с вами рассмотрели все основные требования, применяемые к макетным таблицам. Давайте приступим к самому главному, построению этих макетов на основе HTML-таблиц.

Ниже я приведу два самых распространенных макета на основе HTML--таблиц, которые используются при вёрстке Web-страниц.

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

Другая проблема, связанная с применением таблиц, — громоздкий код HTML, особенно при использовании нескольких вложенных таблиц. Но это не является особой проблемой, ведь у нас в резерве всегда есть стили (CSS), а с ними код упрощается неимоверно.

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

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

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

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

 

Два столбца с шапкой и нижним колонтитулом…

В примере используются три основных таблицы — верхняя и нижняя это простые таблицы, а вот то, что находится между ними и представляет для нас интерес (рис. 1).

Вначале создаем таблицу с двумя колонками шириной 25% и 75%. Для выравнивания содержимого ячеек по верхнему краю добавлен параметр valign со значением равным top.

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

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

Ширину внутренних таблиц надо задать 100%, чтобы они заполняли всю ячейку целиком, а значение отступов через параметры cellspacing и cellpadding устанавливаем по желанию.

Несмотря на громоздкость кода, скорость загрузки текста будет несколько быстрее, чем при использовании одной таблицы. Хотя при столь малом объеме информации это не сильно заметно.

 
(рис. 1) Это пожалуй, самый распространенные макет в Сети.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Основные типы макетов на основе HTML-таблиц | Двухколоночный макет с плавающей шириной, с шапкой и нижним колонтитулом</title>

<style>
<!--
body {
   margin: 0;
   padding: 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
div#menunav {
   border: 1px solid #000000;
   width: 160px;
   font-size: 11px;
   margin: 20px;
}
div#menunav ul {
   border: 0;
   margin: 15px 20px 15px 15px; padding: 0;
   list-style-type: none;
}
div#menunav li {
   border-bottom: 2px solid #800000;
   margin: 0; padding: 5px; 0;
   text-indent: 5px
}
div#menunav li:first-child {
   border-top: 2px solid #800000;
}
div#menunav a {
   text-decoration: none;
   color: #0099cc;
}
div#menunav a:hover {
   color: #ff3300;
}
/* трюк для IE Win \*/
* html div#menunav ul {
   border-top: 2px solid #800000;
}
/*конец трюка*/
-->
</style>

</head>
<body>

<table width="100%" border="0" cellpadding="0" cellspacing="5">
   <tr>
      <td><h1 align="center">ШАПКА</h1></td>
   </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td valign="top" width="25%">
         <table width="100%" border="0" cellpadding="0" cellspacing="5">
            <tr>
               <td>
                  <div id="menunav">
                     <ul>
                        <li><a href="#">раздел №1</a></li>
                        <li><a href="#">раздел №2</a></li>
                        <li><a href="#">раздел №3</a></li>
                        <li><a href="#">раздел №4</a></li>
                        <li><a href="#">раздел №5</a></li>
                        <li><a href="#">раздел №6</a></li>
                        <li><a href="#">раздел №7</a></li>
                     </ul>
                  </div>
               </td>
            </tr>
         </table>
      </td>
      <td valign="top" width="75%">
         <table width="100%" border="0" cellpadding="0" cellspacing="5">
            <tr>
               <td>
                  <h1>Заголовок 1-го уровня</h1>
                  <h2>Заголовок 2-го уровня</h2>
                  <p>Абзац...№1...</p>
                  <p>Абзац...№2...</p>
                  <p>Абзац...№3...</p>
                  <p>Абзац...№4...</p>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="5">
   <tr>
      <td><p align="center">НИЖНИЙ КОЛОНТИТУЛ</p></td>
   </tr>
</table>

</body>
</html>
 

Три столбца с шапкой и нижним колонтитулом…

 
(рис. 2) Этот макет пользуется не меньшей популярностью, чем предыдущий.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Основные типы макетов на основе HTML-таблиц | Трехколоночный макет с плавающей шириной, с шапкой и нижним колонтитулом</title>

<style>
<!--
body {
   margin: 0;
   padding: 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
div#menunav {
   border: 1px solid #000000;
   width: 160px;
   font-size: 11px;
   margin: 20px;
}
div#menunav ul {
   border: 0;
   margin: 15px 20px 15px 15px; padding: 0;
   list-style-type: none;
}
div#menunav li {
   border-bottom: 2px solid #800000;
   margin: 0; padding: 5px; 0;
   text-indent: 5px
}
div#menunav li:first-child {
   border-top: 2px solid #800000;
}
div#menunav a {
   text-decoration: none;
   color: #0099cc;
}
div#menunav a:hover {
   color: #ff3300;
}
/* трюк для IE Win \*/
* html div#menunav ul {
   border-top: 2px solid #800000;
}
/*конец трюка*/
-->
</style>

</head>
<body>

<table width="100%" border="0" cellpadding="0" cellspacing="5">
   <tr>
      <td><h1 align="center">ШАПКА</h1></td>
   </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td valign="top" width="20%">
         <table width="100%" border="0" cellpadding="0" cellspacing="5">
            <tr>
               <td>
                  <div id="menunav">
                     <ul>
                        <li><a href="#">раздел №1</a></li>
                        <li><a href="#">раздел №2</a></li>
                        <li><a href="#">раздел №3</a></li>
                        <li><a href="#">раздел №4</a></li>
                        <li><a href="#">раздел №5</a></li>
                        <li><a href="#">раздел №6</a></li>
                        <li><a href="#">раздел №7</a></li>
                     </ul>
                  </div>
               </td>
            </tr>
         </table>
      </td>
      <td valign="top" width="60%">
         <table width="100%" border="0" cellpadding="0" cellspacing="5">
            <tr>
               <td>
                  <h1>Заголовок 1-го уровня</h1>
                  <h2>Заголовок 2-го уровня</h2>
                  <p>Абзац...№1...</p>
                  <p>Абзац...№2...</p>
                  <p>Абзац...№3...</p>
                  <p>Абзац...№4...</p>
               </td>
            </tr>
         </table>
      </td>
      <td valign="top" width="20%">
         <table width="100%" border="0" cellpadding="0" cellspacing="5">
            <tr>
               <td>
                  <h2>Заголовок 2-го уровня</h2>
                  <p><a href="#">раздел №1</a></p>
                  <p><a href="#">раздел №2</a></p>
                  <p><a href="#">раздел №3</a></p>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="5">
   <tr>
      <td><p align="center">НИЖНИЙ КОЛОНТИТУЛ</p></td>
   </tr>
</table>

</body>
</html>
 
Дата: 22.09.2007 | Автор: Коровенков Юрий

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

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

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

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

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

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

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

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

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

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

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

Оглавление

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

Используйте простые макетные таблицы…

Используйте только основные теги таблицы…

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

Используйте ячейки с изменяющейся шириной…

Примеры макетов на основе HTML-таблиц…

Два столбца с шапкой и нижним колонтитулом…

Пример №1…

Три столбца с шапкой и нижним колонтитулом…

Пример №2…

 
Статьи на тему SEO

Статьи на тему SEO

Как управлять индексированием?

Разработка хорошей навигации на Web-сайте

Правильное использование элементов фраз

В защиту подчеркивания ссылок!

Два подхода в создании макетов web-страницы

Как повысить эффективность баннеров?

Оформляем сайт с учетом интересов пользователя

Поисковые машины и метаданные

Разработка сайтов в XHTML

Структура и метаструктура в XHTML

Смешанная разметка и компактный код в XHTML

Раскрутка сайтов в Интернете

Раскрутка сайта начинающего Web-мастера

Как правильно оформлять текст на сайте?

Десять причин перехода на XHTML

Фундаментальный принцип юзабилити

Применение XHTML-списков для навигации

Технологии маркетинга поисковых машин

Контентная оптимизация под поисковые машины

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

Теория оптимизационной структурной HTML-разметки

Честные технологии поисковой оптимизации сайтов

SEO-текст — поплавок для сайта

Как составить файл robots.txt?

Навигация и структура информации на сайте

Правильный подход к созданию корпоративного сайта

Что такое веб-дизайн?

Реклама и PR в Интернете

Аналитика посещаемости сайтов в Интернете

Как привлечь целевых посетителей на сайт?

Как бесплатно разместить пресс-релиз компании?

 

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

 

наверх

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

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

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

Copyright (©) 2004— by Yuriy Korovenkov