2.5 Разработка веб-сайта

На данном этапе необходимо реализовать все аспекты, затронутые выше.

Для начала необходимо сверстать разработанный ранее PSD макет. Верстка сайта - это формирование HTML кода, размещающего весь контент (изображения, текст и так далее) в окне браузера согласно разработанному макету так, чтобы элементы дизайна отображались аналогично макету.

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

Второй вариант - это блочная верстка. Такой подход подразумевает повсеместное использование тега <div>, который описывается в таблицах стилей CSS. Тег <div> это тег, создающий веб элемент - слой, к которому применяется стилевое оформление. Слои можно размещать на веб-странице путем наложения их друг на друга с точностью до пикселя. При этом соблюдаются следующие принципы:

1. Разделение содержимого и оформления.

2. Активное применение тега <div>.

3. Таблицы применяются только для отображения табличных данных.

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

Будем использовать блочную верстку.

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

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