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

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

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

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

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

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

  • постарайтесь просмотреть созданные вами страницы на экранах разного размера; некоторые браузеры показывают размер своего окна (например, в Опере: инструменты - общие настройки - расширенные - навигация - показывать размер окна).

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

Распространённые браузеры (по статистике сайта http://ucrazy.ru 23.08.2013 c числом посетителей ~ 25 тысяч в сутки, http://www.tbex.ru/stat/ucrazy.ru); оттуда же самые распространённые экраны, последняя цифра - битовая глубина цвета:

Браузер | Доля пользователей
Chrome     46.26%
Opera       24.21%
Firefox      17.19%
MSIE         9.22%
Safari         2.70%
KHTML       0.21%
Другой       0.21%		 Разрешение экрана | Доля пользователей
1366x768x32             15.22%
1280x1024x32           14.68%
1920x1080x32           12.86%
1680x1050x32            5.03%
1600x900x32              4.52%
1024x768x32              4.43%
1280x1024x24            4.24%
1440x900x32              4.05%
1280x800x32              3.65%
1366x768x24              3.28%
1920x1080x24            3.27%
1680x1050x24            1.41%
1024x768x24              1.37%
1360x768x32              1.31%
1600x900x24              1.22%
1440x900x24              1.21%
1280x800x24              1.00%

А вот такие же данные по другому томскому сайту http://pogodavtomske.ru с числом посетителей ~35 тысяч в сутки  (http://www.tbex.ru/stat/pogodavtomske.ru) :

Браузер | Доля пользователей
Chrome      38.93%
Opera        25.10%
Firefox       16.42%
MSIE         14.89%
Safari          4.36%
Другой        0.14%
KHTML        0.14%
Mozilla        0.02%		 Разрешение экрана | Доля пользователей
1280x1024x32            17.56%
1366x768x32              14.58%
1920x1080x32              7.87%
1024x768x32                5.34%
1280x1024x24              4.60%
1600x900x32                4.45%
1680x1050x32              3.95%
1366x768x24                3.69%
1280x800x32                3.59%
1440x900x32                3.30%
1920x1080x24               2.88%
1024x768x24                 1.50%
1680x1050x24               1.39%
1280x800x24                 1.27%
1600x900x24                 1.19%
1440x900x24                 1.17%
1024x600x32                 1.17%
1024x768x16                 1.10%

В целом статистика совпадает. Вы также можете связать свой учебник с сервером статистики, зайдя на сайт http://www.tbex.ru и скопировать оттуда код счётчика (бесплатно, разумеется).