Верстка и кодирование
После разработки дизайна сайта встает задача превратить нарисованный в Фотошопе макет в html-страницу. Этот этап называется «верстка и кодирование».
Давайте посмотрим на примере. Если кликнуть правой кнопкой мыши в тексте любой страницы и выбрать в контекстном меню «Просмотр HTML-кода», то мы увидим примерно такой экран:
Это и есть программный код. Когда мы загружаем веб-страницу, наш браузер считывает код и точно знает как и где показать текст, фото или меню. Опытный кодер верстает html-страницу таким образом, чтобы она была неотличима от исходного изображения Фотошопа. Мы внимательно относимся к этому.
Хороший сайт должен выглядеть одинаково на любом компьютере и в любом браузере. Это тоже задача верстки. Посетители могут пользоваться разными программами, но мы стремимся, чтобы каждый увидел сайт не искаженным, а таким красивым и функциональным, каким он задумывался.
Сегодня существует пять главных браузеров:
- Microsoft Internet Explorer
- Google Chrome
- Mozilla Fire Fox
- Opera
- Apple Safari
Каждый из них имеет свои особенности, которые мы обязательно учитываем при создании html-прототипа будущего сайта.
Все наши сайты кросс-браузерные, т.е. корректно отображаются во всех основных обозревателях.
Когда посетитель смотрит на сайт, он чаще всего не догадывается, что у страницы, кроме высоты и ширины, есть и третье измерение.
Страница состоит из слоев и контейнеров, расположенных один над другим, вложенных или скрытых. Сайт похож на слоеный пирог. :-) Задача кодирования - добиться расположения элементов дизайна нужным образом. Хороший код - это очень квалифицированная работа.