Особенности при создании веб-страниц

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

Документ, создаваемый в текстовом редакторе, предназначен для вывода на бумагу, а она имеет стандартные размеры, обычно, А4. А вот веб-странички будут просматриваться на самых разных экранах, с разным разрешением и с разными пропорциями ширина/высота. То есть ваш сайт будет выглядеть по разному на разных экранах, и нужно умудриться сделать его так, чтобы на всевозможных экранах он выглядел прилично. Это достигается только опытом, для начала - несколько рекомендаций:

  • на экране 1024 пикселя в ширину не должно быть горизонтального скроллинга (на сегодняшний день это минимальный размер среди распространённых экранов, ~ 30% их общего числа, древние экраны типа 800х600 в расчёт не берём, их < 1%);

  • если у вас широкий экран, разверните окошко редактора на ширину 1024 пкс, редактор показывает внизу справа этот размер;

  • делайте таблицы, используемые для макетирования текста, фиксированной (не относительной, в %%) ширины;

  • постарайтесь просмотреть созданные вами страницы на экранах разного размера.

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

Распространённые браузеры (по статистике сайта http://gorod.tomsk.ru 9.02.2010 c числом посещений 20-30 тысяч в сутки, http://tbe.tom.ru/browsers/gorod.tomsk.ru/ ):

Браузер/Доля пользователей
MSIE       46.86%
Opera      25.37%
Firefox     24.39%
Chrome     2.45%
Safari        0.46%
Mozilla      0.22%
Konqueror  0.13%
Другой      0.11%

Оттуда же самые распространённые экраны ( http://tbe.tom.ru/screen/gorod.tomsk.ru/ ), последняя цифра - битовая глубина цвета:

Разрешение экрана/Доля пользователей
1280x1024x32        31.75%
1024x768x32          25.57%
1280x800x32           8.95%
1680x1050x32         5.48%
1440x900x32           4.95%
1152x864x32           3.36%
1280x960x32           1.95%
1366x768x32           1.83%
1024x768x16           1.35%
1280x1024x24         1.16%
1920x1080x32         1.15%
1280x768x32           1.07%
1024x768x24           0.96%
800x600x32             0.91%
1280x1024x16         0.88%
1600x900x32           0.82%
1920x1200x32         0.56%

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