htmlDoor - HTML верстка сайта

WDC бесплатная CMS система управления сайтом: скачать админку бесплатно для сайта | Web Doors CMS - бесплатная CMS для создания и продвижения сайта

2010-03-11T11:15:00.000-08:00

WDC - бесплатная система администрирования сайта

Web Doors CMS обеспечивает:

любую структуру сайта

неограниченное количество страниц сайта

поддержку как шаблонного, так и уникального дизайна

быструю загрузку страниц сайта

полнофункциональный редактор текста, внешне напоминающий Word

возможность загрузки файлов любого содержания: изображений, архивов на скачивание, документов MS Office и др.

гибкие SEO настройки поисковой оптимизации сайта

возможность модификации системы

и многое другое

Как правильно сверстать сайт и какие бывают верстки?

2009-11-07T09:46:00.001-08:00

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

Наверняка вы часто видели советы по верстке, кучу вопросов и ответов.

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

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

Чтобы "правильно" сверстать сайт нужно соблюдать основные правила и учитывать мировые тенденции. На сегодняшний день существует два основных подхода при верстке HTML страниц - блочная верстка (верстка divами) и табличная верстка (верстка html с помощью таблиц). Кроме этого код не должен содержать ошибок. Наличие ошибок в коде не только может "сломать мозг" браузеру, который пытается его интерпретировать, но и может тормозить поисковых роботов. Ну и конечно не стоит лениться и на всех этапах просматривать сверстанную страницу во всех популярных браузерах, т.к. алгоритмы интерпритации кода в них разные и результат может быть тоже отличным от желаемого :)

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

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

Блочная верстка (верстка слоями)
Валидность HTML страниц
Кроссбраузерность

HTML Guardian - программа для защиты сайта от копирования скачать

2010-01-03T07:52:00.000-08:00

Программа для защиты сайта от копирования - HTML Guardian

Скачать программу HTML Guardian

HTML Guardian - программа для защиты сайтов от копирования.

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

Программу HTML Guardian зашифрует HTML, SHTML, JavaScript, VBscript и ASP - коды, сделает их фактически недоступными для недобросовестных разработчиков.

HTML Guardian защитит от копирования изображения размещенные на сайте, апплеты и гиперссылки.

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

Скачать программу HTML Guardian можно тут

Adobe DreamWeaver скачать бесплатно - программа для создания сайтов

2009-11-30T11:25:00.000-08:00

Adobe DreamWeaver - программа для создания сайта

Скачать программу Adobe DreamWeaver
посмотреть и скачать программы для создания сайтов

Adobe Dreamweaver - программа для создания Web-страниц. Ее возможности шире по сравнению с обычными функциями подобных редакторов.
Программа Dreamweaver позволяет создавать объекты и страницы с использованием языка DHTML, поддерживает каскадные таблицы стилей (CSS), а также слои и действия JavaScript.

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

Adobe Dreamweaver - это профессиональный инструмент для создания web-сайтов и приложений.

Художники, дизайнеры, верстальщики и программисты могут работать в единой мощной среде, предназначенной для проектирования, разработки и администрирования профессиональных web-сайтов и приложений.
Adobe Dreamweaver MX объединяет признанные средства визуальной разметки с функциями быстрой разработки web-приложений Dreamweaver UltraDev и мощными возможностями редактора Adobe HomeSite, а также легко интегрируется с Flash MX.

Полный контроль над внешний видом и деталями реализации приложений.

Можно значительно повысить продуктивность, используя интегрированную рабочую среду, общую с Adobe Flash MX и Adobe Fireworks MX, которая включает снабженные закладками окна документов, перемещаемые инструментальные панели и встроенное окно просмотра файлов.

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

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

Подсказки по синтаксису, редакторы тегов, гибкое цветовое выделение, средства выбора тегов и вставки готовых фрагментов, а также функции проверки кода - все это есть в программе Adobe Dreamweaver

Также Adobe Dreamweaver облегчают разработку приложений на базе любых популярных серверных технологий.

Adobe Dreamweaver дает возможность использовать единую интегрированную среду разработки для создания сайтов на основе HTML, XHTML, XML, ASP, ASP.NET, JSP, PHP или Adobe ColdFusion.

Существует более 700 расширений, свободно распространяемых через сайт Adobe Exchange for Dreamweaver.

ColdFusion MX поможет сделать верстку сайта быстрой.

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

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

Adobe Dreamweaver - кросс-платформенная универсальная среда разработки с поддержкой стандартов J2EE и .NET и работающая на платформах Windows и Macintosh.

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

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

В Adobe Dreamweaver есть шаблоны и макеты, а также готовые каскадные таблицы стилей, которые могут значительно ускорить работу дизайнеров.

Adobe Dreamweaver скачать бесплатно программу

скачать Adobe Dreamweaver

Посмотреть другие HTML - редакторы программы для создания сайтов

FrontPage скачать бесплатно - программа для создания сайтов

2009-11-30T10:46:00.000-08:00

Microsoft Office FrontPage - программа для создания сайтов

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

Front page от компании Microsoft - один из самых известных конструкторов сайтов.

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

В отличие от других HTML - редакторов, HTML код, созданный в FrontPage 2003, получается "чистым" и не содержит лишних тегов.
Благодаря именно чистоте кода, с помощью данной программы можно начать изучение HTML. Но и множество профессионалов продолжают верстать сайты в этом редакторе.

Если вы ошиблись в написании кода, то FrontPage 2003 укажет на ошибки и предложит пути для их исправления.

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

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

Мощная система справки и поддержки поможет быстро изучить язык HTML и создавать свои сайты.

Скачать бесплатно FrontPage

скачать с depositfiles: FrontPage 2003
скачать с letitbit: FrontPage 2003

Посмотреть другие HTML - редакторы программы для создания сайтов

Magic HTML Studio скачать программу

2009-11-30T10:25:00.000-08:00

Magic HTML Studio

Скачать программу Magic HTML Studio
посмотреть и скачать программы для создания сайтов

Программа Magic HTML Studio обладает весьма широким функционалом, однако отсутствует подсветка синтаксиса.

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

Средства и инструменты Magic HTML Studio

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

увеличить картинку

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

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

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

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

Редактор содержит готовые конструкции на Perl, которые упростят создание скриптов, имеет древовидную структуру, удобен, функционален и прост в использовании. При помощи этого редактора вы не только с легкостью создадите скрипт любой сложности, но и сможете протестировать его в среде операционной системы Windows (при наличии интерпретатора Perl). Благодаря встроенному обозревателю вы легко сможете ориентироваться в многообразии созданных проектов и файлов. Также программа содержит уникальную утилиту HTML Complector, являющуюся альтернативой использования фреймов. Программа полностью поддерживает английский и русский язык, и имеет подробную документацию на двух языках и в двух форматах.

Плюсы:
продвинутые конструкторы JavaScript и CGI-скриптов, широкие возможности для добавления динамических элементов, справочная система на русском языке.

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

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

Скачать Magic HTML Studio бесплатно

Посмотреть другие HTML - редакторы программы для создания сайтов

HTML Source скачать - программа для создания сайта

2009-11-30T10:00:00.000-08:00

HTML Source - редактор HTML кода

Скачать программу HTML Source
посмотреть и скачать программы для создания сайтов

увеличить картинку

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

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

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

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

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

В меню "Tags" сосредоточены основные группы HTML-дескрипторов.

Наибольший же интерес вызывает содержание меню "Tools", в котором и собраны все инструменты данного программного средства. Разберем его содержимое более пристально.

Пункт "Convert Case" позволяет сменить регистр букв, т.е. либо инвертировать его, либо привести к одному определенному. Следующий пункт "Convert CodePage" позволяет быстро сменить кодировку всей страницы.
Среди оставшихся пунктов необходимо отметить встроенный модуль проверки орфографии, и средство для оптимизации HTML-кода под названием Tidy, который приводит вид документа в соответствии с требованиями организации W3C, которая и занимается разработкой стандартов языка гипертекстовой разметки.

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

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

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

Таким образом, HTML Source придется по душе опытным разработчикам, причем не только как средство разработки, но и как справочное пособие.

Скачать HTML Source можно здесь

Посмотреть другие HTML - редакторы программы для создания сайтов

Macromedia HomeSite программа для создания сайтов скачать программу

2009-11-27T23:51:00.000-08:00

Macromedia HomeSite - программа для создания сайтов

Скачать программу Macromedia HomeSite

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

увеличить картинку

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

Macromedia HomeSite обеспечивают удобную подсветку синтаксиса не только HTML-страниц, но и файлов PHP, Perl, ASP, MySQL и других популярных средств разработки. Данный факт придется по душе опытным пользователям, которые не ограничиваются средствами языка гипертекстовой разметки и используют более сложные языки веб-программирования.
Если же Вас не устраивает текущая цветовая схема подсветки синтаксиса, то это не проблема - можно отредактировать существующую, или даже создать собственную. HomeSite имеет мощную справочную систему, содержащую кроме описания возможностей программы спецификации языка HTML, справочник тегов и включающая удобные всплывающие подсказки по текущему дескриптору - для их вызова достаточно нажать F2, и на экране все возможные атрибуты для данного тега.

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

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

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

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

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

Для повышения скорости создания документов можно воспользоваться клавиатурными сокращениями (горячими клавишами) - Macromedia HomeSite предоставляет обширное поле деятельности для любителей клавиатуры. Например, тегу соответствует комбинация клавиш Ctrl+Break. Впрочем, пользователь волен назначить практически любой команде удобное ему сочетание клавиш.

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

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

Скачать последнюю версию Macromedia HomeSite можно по этому адресу.

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

SiteEdit программа создания сайтов , скачать программу SiteEdit

2009-11-29T11:33:00.000-08:00

SiteEdit - программа создания сайтов

Скачать программу SiteEdit.

Программа SiteEdit создана российской компанией EdgeStile и позиционируется разработчиками как система управления сайтом. В отличие от HomeSite, SiteEdit относится к так называемым визуальным средствам разработки (WYSIWYG-редакторам).

После первого запуска программы появляется готовый шаблон веб-узла.

Структура всего узла представлена в виде различных страниц, содержащих в себе несколько разделов. Раздел, в свою очередь, может содержать в себе несколько записей или объектов. Перейдя в режим редактирования (по умолчанию F9), у нас появляется возможность редактировать существующие разделы и добавлять новые, изменить текст имеющейся записи или добавить новую запись.

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

Программа предлагает несколько шаблонов оформления: book, galeon, kafe, palm_skin, stroitel, благодаря которым можно существенно изменить облик Вашего сайта.

Все элементы страницы доступны для редактирования!
Для более кардинального изменения дизайна существует редактор дизайна.

увеличить картинку

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

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

В версиях Standard и Business программы SiteEdit имеется возможность выгрузки всего проекта сразу на хостинг, однако в бесплатной версии Start данная возможность отсутствует.

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

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

SiteEdit отлично подойдет для создания персональных страниц и несложных веб-проектов для пользователей начальной квалификации и даже для тех, кто не знает что такое HTML :)

SiteEdit выпускается в трех основных версиях - Start, Standard, Business, и двух дополнительных -Partner.

Загрузить версию Start программы SiteEdit можно отсюда.

HTML - редакторы или как сверстать HTML страничку для своего сайта за 5 минут

2009-11-27T22:44:00.000-08:00

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

HTML - редакторы или как быстро верстать HTML страницы сайта

На сегодняшний день существует большое количество программ, которые принято называть HTML - редакторами.
HTML - редакторов действительно очень много, они разные и с каждым днем их становится ещё БОЛЬШЕ!!!
Как разобраться в этом многообразии и существует ли среди них действительно стоящие?
Конечно, есть и лидеры продаж, и признанные лидеры-разработчики, имеются сведения о предпочтениях известных Web-дизайнеров, и тем не менее САМОГО ЛУЧШЕГО для всех HTML - редактора нет.
Существует большое количество хороших, грамотно написанных HTML - редакторов, предлагающих различную функциональность, требующих разной степени подготовки пользователя и, важно заметить, заметно различающихся по стоимости.

Все имеющиеся на рынке HTML-редакторы можно разделить на две большие группы:

программы, имеющие в своем составе визуальные HTML - редакторы (design-based editor) — средства, которые автоматически формируют необходимый HTML-код, позволяя разрабатывать Web-страницы в режиме WYSIWYG (What You See Is What You Get — что вижу, то и получаю);

программы - редакторы (code-based editors), которые представляют собой HTML - редактор и вспомогательные средства для автоматизации написания HTML кода.

Какой подход лучше — визуальный или основанный на написании кода?
Каждый из них имеет своих приверженцев. Сторонники чистого кодирования говорят о том, что только вручную можно создать чистый HTML код и что программная разметка точнее визуальной.
Обычно те, кто предпочитает создание сайта вручную, критикуют редакторы, предоставляющие готовые шаблоны формы и заготовки, за однотипность получающихся сайтов и "грязь", которую оставляют редакторы (лишнии теги).

Все эти точки зрения ВЕРНЫ, но не стоит быть на столько критичными. Важно понять, что верстка сайта - долгий и кропотливый процесс, а к чему все последнее время стремится человечество? Правильно, к автоматизации рутинного труда человека :).
Если продукт пользуется спросом и имеет свою нишу на рынке — это означает, что он востребован и, следовательно, имеет право на существование. Это раз.
Сегодня многие пользователи (разного уровня подготовки) занялись созданием собственных сайтов и нуждаются в различных по степени сложности продуктах. Одним пользователям необходим продукт «на вырост», другие хотят сделать персональную страничку или блог и больше не возвращаться к этому занятию. Это два.
Есть и компромиссные решения: большинство мощных редакторов, обладающих визуальными конструкторами (Microsoft FrontPage, Macromedia Dreamveawer, Adobe Golive), имеют не только визуальные средства, но и весьма развитые редакторы кода.
Например, в последней версии FrontPage 2003 реализован даже сдвоенный режим, в котором пользователь может наблюдать, как действия визуального редактора приводят к изменению кода страницы.

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

Предлагаю рассмотреть подробнее наиболее популярные из них.

Оптимизация HTML кода страниц сайта

2009-11-12T11:32:00.000-08:00

Не многие имеют высокоскоростной доступ в Интернет - это раз
Многие знают что такое грамотная верстка - это два.

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

Оптимизация HTML кода и ускорение загрузки страниц сайта

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

На скорость загрузки страниц сайта влияет много факторов.
В этой статье предлагаю рассмотреть только один из них - скорость загрузки html-кода.

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

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

Лишняя информация

При отображении HTML кода подряд следующие пробелы или знаки табуляции интерпретируются как один пробел.
Если верстка выполняется в каком-либо редакторе, каждая строка исходного текста HTML может оканчиваться не одним специальным символом (0A), а двумя - 0D и 0A. Это также излишне "утяжелит" страницу.
"Пустые строки", то есть строки, состоящие только из спецсимвола с кодом 0A (или двух спецсимволов - 0D и 0A) также увеличивают объем загружаемой страницы.

Как оптимизиовать HTML?

Не использовать готовые HTML-редакторы. Верстайте в блокноте :)

Единообразное именование ссылок

Кеш Internet Explorer регистрозависимый. Это означает, что Вы должны выбирать названия для ссылок (URL'ов), имея в виду различия строчных и прописных букв.
Давайте рассмотрим следующий пример.

<A HREF="/workshop/author/dhtml/reference/dhtmlrefs.asp">DHTML References</A>
<A HREF="/Workshop/Author/DHTML/Reference/DHTMLRefs.asp">DHTML References</A>

Обе ссылки указывают на одну и ту же страницу. Или нет? На UNIX системе эти ссылки будут, вести на две различных страницы. Internet Explorer будет различать их и отправит независимые запросы на сервер, позволяя серверу самому решить, что делать с такими запросами.
Если Вы будете аккуратны в наименовании ссылок, то сэкономите место в пользовательском кеше, и уменьшите число запросов от к серверу для открытия одного и того же ресурса.

Использование таблиц с фиксированной шириной

Таблицы замечательно подходят для организации информации. До того, как CSS-позиционирование появилось в Internet Explorer 4.0, многие авторы HTML-страниц использовали таблицы для расположения элементов согласно макету.
Если вы до сих пор используете таблицы для верстки, то стоит перейти на позиционирование при помощи Каскадных Таблиц Стилей (Cascading Style Sheets, CSS). Начиная с Internet Explorer 5 производительность страниц, использующих CSS вместо таблиц, заметно выше.
Естественно, это не является абсолютным аргументом для полного отказа от использования таблиц. Они по-прежнему могут использоваться, особенно, если вы определите соответствующий table-layout — CSS-атрибут, используемый для достижения оптимальной производительности для Internet Explorer 5+.
Следующие действия позволят Internet Explorer начать отображение таблицы еще до того, как будет получена вся информация о ней.

Установите для table CSS-атрибут table-layout в значение fixed.

Явно определите объекты col для каждого столбца.

Установите для каждого элемента col атрибут width.

Для более подробной информации можно ознакомиться со статьёй Enhancing Table Presentation.

Закрытие тегов

В отличие от XML, в HTML существует понятие неявно закрытых тегов. Они включают frame, img, li и p.
Если вы не закроете эти теги, Internet Explorer нормально отобразит вашу страницу. Если вы закроете их, Internet Explorer отобразит вашу страницу даже быстрее.
По этой причине многие пишут так:

<P>Следом идет список ингредиентов.
<UL>
<LI>один
<LI>два
<LI>три
</UL>

Однако, этот участок кода будет проанализирован гораздо быстрее, потому что он оформлен правильно (с точки зрения XML-синтаксиса), и Internet Explorer не будет искать по коду, где же заканчивается параграф или элемент списка.
<P>Следом идет список ингредиентов.</P>
<UL>
<LI>один</LI>
<LI>два</LI>
<LI>три</LI>
</UL>

Помещайте CSS в начале страницы

Помещение CSS в HEAD ускоряет ее загрузку, т.к. позволяет отрендерить ее постепенно.
Размещение CSS в конце страницы не позволяет начать постепенный рендеринг многим браузерам.
Internet Explorer не начинает рендерить страницу, чтобы не пришлось перерисовывать элементы, у которых во время загрузки изменится стиль.
Firefox начинает сразу отрисовывать страницу, в процессе загрузки, возможно, перерисовывая некоторые элементы, но это является причиной появления нестилизованного контента (FOUC — Flash Of Unstyled Content).
Спецификация HTML4 устанавливает, что таблицы стилей должны быть включены в HEAD-секцию документа: «В отличие от A, [LINK] может появляться только в секции HEAD, зато там [LINK] может встречаться сколько угодно раз».

Помещайте скрипты в конец

Скрипты (внешние .js-файлы) создают похожую проблему, но решается она ровным счетом наоборот: скрипты следует переносить в самый низ страницы, как можно ближе к тегу </body>.
Делая так, браузер будет рендерить страницу постепенно и одновременно распараллеливаем загрузку.
Постепенный рендеринг не начинается для всего контента ниже скрипта. Таким образом, нам выгоднее размещать скрипты как можно ниже.
Вторая проблема, порождаемая скриптами — они блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры загружали параллельно не более двух компонентов страницы с одного сайта.
Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. К сожалению, когда загружается скрипт, браузер не начинает никаких других загрузок, даже с других хостов.

Но в некоторых ситуациях совсем не просто перенести скрипты в конец страницы. Например, если скрипт использует document.write для вставки части контента на страницу.
Во многих случаях есть способы обхода таких ситуаций.
Альтернативным решением является отложенное выполнение скриптов. Атрибут DEFER указывает, что скрипт не содержит document.write и, видя его, браузер продолжает рендеринг страницы.
К сожалению, Firefox не поддерживает атрибут DEFER. В Internet Explorer выполнение скрипта можно задержать, но не настолько, насколько хотелось бы.
В таких случаях можно создать дополнительную функицю, разместить её в конце страницы и вызывать следующим образом <body onload="myfunction();">

Выносите javascript и CSS во внешние файлы

Использование подключаемых файлов существенно уменьшают скорость загрузки страниц, т.к. браузеры кешируют файлы скриптов и таблиц стилей. Встраиваемый в HTML код этих файлов, загружается каждый раз, когда загружается сама страница. Это уменьшает количество необходимых HTTP-запросов, но увеличивает объем HTML. С другой стороны, если скрипты и таблицы стилей находятся в отдельных файлах, скэшированных браузером, размер HTML уменьшается, не увеличивая при этом количество HTTP-запросов.
В таком случае ключевым фактором является частота, с которой кэшируются внешние .js- и .css-файлы относительно количества запросов самого HTML-документа. Это можно приблизительно оценить различными способами. Если ваши пользователи во время одного посещения загружают страницу несколько раз или загружают похожие страницы, которые используют один и тот же код — это лучший случай, чтобы получить все преимущества от вынесения кода в отдельные файлы.
Для страниц, которые загружаются всего несколько (обычно — один) раз за весь сеанс, выгодней встраивать скрипты и таблицы стилей прямо в верстку страницы, что даст выигрышь в скорости загрузки.
Для таких главных страниц, которые открываются первыми в последовательности других с этого же сайта, есть прием снижения количества HTTP-запросов за счет включения скриптов и CSS в код страницы, равно как использования всех преимуществ кэширования за счет динамической загрузки внешних файлов после загрузки всей страницы. Следующие страницы будут использовать уже скэшированные файлы.

Программы для оптимизации HTML кода

Вот некоторые их них:
HTML Optimizer
Tabifier
Модуль VITRAGE для Apache

Кроссбраузерность HTML верстки страниц

2009-11-07T09:42:00.000-08:00

Кроссбраузерность html верстки страниц

Кроссбраузерность (кроссбраузерная верстка сайта на CSS) – это совокупность CSS компонентов, которые обеспечивают единый образ страницы сайта во всех браузерах, или же в таких как IE 6, 7, 8, Firefox, Opera, Safari.

Часто у многих верстальщиков возникают проблемы с кроссбраузерностью, и иногда можно их решить с помощью приемов CSS, а иногда хочется сделать, так что бы разные CSS стили работали в разных браузерах . Данное действие можно реализовать с помощью Conditional Comments для IE, и с помощью Java Script.

Как сделать верстку кроссбраузерной во всех браузерах:

Кроссбраузерность для IE (Internet Explorer):

<!--[if IE 6]>
/* CSS для получения кроссбраузерности в IE */
<link rel="stylesheet" type="text/css" href="style/ie.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/ie7.css" />
<![endif]-->

Кроссбраузерность для Opera:

<script type="text/javascript">
if(window.opera) {
         document.write('<link rel="stylesheet" type="text/css" href="style/opera.css" />');
}
</script>

Кроссбраузерность для Firefox:

@-moz-document url-prefix() {
    a {
            color: #999999;
    }
}

Кроссбраузерность для Safari:

<script type="text/javascript">
var detect = navigator.userAgent.toLowerCase();
if((detect.indexOf('safari')) != -1) {
           document.write('<link href="style/safari.css" rel="stylesheet" type="text/css" />');
}
</script>

Кроссбраузерность с помощью PHP

Существует еще один способ достижения кроссбраузерной верстки с помощью PHP и CSS. Реализуется данный способ с помощью функции в PHP "User Agent".

echo $_SERVER['HTTP_USER_AGENT']; // Возвращает строку с пользовательскими данными (OC, браузер)

Дальше для получения кроссбраузерной верстки надо просто разобрать полученную строку и внедрить полученные данные в Java Script или прямо в PHP формировать CSS свойства.

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

Валидность HTML страницы

2009-11-07T09:43:00.000-08:00

Валидность HTML страниц, сервисы проверки валидности кода и влияние валидности на индексацию страницы

Валидной html страницей является страница не содержащая ошибок в html коде.

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

Давайте рассмотрим, сложно ли добиться правильного валидного кода и нужно ли это?

Оказывается, все достаточно просто. Как выяснилось при тестировании сайтов на валидность сервисом http://validator.w3.org/, большая часть ошибок это атрибуты тегов, отсутствующих в стандарте, а также не хватка атрибутов тегов.
Ситуации, когда есть недостающие теги, тоже присутствуют, но их гораздо меньше. И чаще всего они возникают из-за лени верстальщика, а не потому, что кто-то не знал, что их нужно закрывать (логика лентяя: зачем ставить или

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

Индексация валидной html страницы

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

В принципе, особых проблем по созданию валидного HTML кода нет.
В зависимости от используемого формата DOCTYPE определены те или иные правила для верстки.

Это лишний раз говорит что валидности HTML страницы следует уделить большое внимание.

Сервисы проверки валидности кода HTML

Скорее всего, в сети есть очень много seo и обычных сервисов для проверки валидности страниц, тем не менее, главный из них находится на сайте W3C здесь. В специальной форме вводите ссылку на свой сайт или любую его страницу, если требуется, выбираете дополнительные опции (кодировку, DOCTYPE), после чего запускаете проверку Check.

При наличии неточностей, в результатах вы получите список предупреждений и ошибок в коде. Иначе высветится приятная зеленая надпись «This document was successfully checked as XHTML 1.0 Transitional!»:)

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

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

2009-11-07T09:45:00.000-08:00

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

Табличная верстка - Верстка с использованием таблиц.

Преимущества табличной верстки

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

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

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

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

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

«Склейка» изображений
Рисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь в одно целое, выкидывая одни фрагменты или заменяя их другими изображениями.
Это бывает необходимо для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов.
Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение.
Каждая картинка помещается в определенную ячейку, параметры таблицы при этом устанавливаются такими, чтобы не возникло стыков между отдельными ячейками.

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

Недостатки табличной верстки

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

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

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

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

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

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

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

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

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

Действительной причиной их популярности является консерватизм разработчиков, привычность и быстрота верстки сайтов с их помощью.
Ясно одно — таблицы постепенно сдают свои позиции в пользу блочной верстки (верстки слоями).
Но пройдет еще несколько лет, прежде чем «табличные» сайты станут раритетом и исчезнут с простора Рунета.

Блочная верстка HTML страниц (верстка слоями)

2009-11-07T09:44:00.000-08:00

Блочная верстка html страниц, верстка слоями

Слои не таблицы

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

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

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

Что же в итоге получается? А то, что из конструктора, предназначенного для создания танка, пытаются сделать самолет. Думаете, это невозможно? Нет ничего невозможного, когда под рукой есть напильник и прорва времени. Но с другой стороны, может проще взять нужный конструктор...

Давайте для примера приведу типичную и простую схему страницы (рис. 1).

Рис. 1. Страница, созданная с помощью таблиц

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

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

Пример 1. Использование таблиц

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Сайт</title>
</head>
<body>

<table width="100%" cellpadding="5"
cellspacing="0">
<tr>
<td height="60" colspan="2" bgcolor="#666699"><h1>Заголовок
сайта</h1></td>
</tr>
<tr>
<td width="25%" bgcolor="#990033" valign="top">Левая
колонка</td>
<td bgcolor="#999966" valign="top">Правая колонка</td>
</tr>
<tr>
<td height="30" colspan="2" bgcolor="#cccccc">Подвал
страницы</td>
</tr>
</table>

</body>
</html>

Высота таблицы определяется параметром height тега <TABLE>. Хотя этот параметр отсутствует в спецификации HTML, но браузеры его понимают, что и приводит к желаемому результату. Значение 100% говорит, что таблица занимает всю доступную высоту веб-страницы.

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

За основу берется табличная верстка и с помощью слоев она воплощается максимально
близко к оригиналу.

Используются особенности слоев, сайт верстается с их учетом.

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

Высота слоев ограничена высотой контента

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

Рис. 2. Страница, созданная с помощью слоев

Высота разных колонок на данном рисунке различается, поскольку формируется за счет их содержимого.
Замечание

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

Блочная верстка

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

Расположение

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

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