Разметка

После того как была определена идея и концепция дизайна сайта пришло время для реализации. Из прочитанного и изученного материала стали понятны дальнейшие шаги. И проделана следующая работа:
1. Разработана структура сайта согласно правилам распределения файлов по соответствующим папкам.
2. Определена подходящая цветовая гамма с определением основного доминирующего цвета, а также для фона, вторичного и акцентирующего цветов.
3. Подобраны шрифты
4. При помощи графического редактора
- Распределены основные элементы страниц
- Разработан прототип общего вида
- По прототипу собран макет с использованием выбранных цветовых решений и шрифтов.
5. Работа над разметкой началось с изучения языка гипертекстовой разметки HyperText Markup Language. При помощи блоков, с применением необходимого числа идентификаторов и оптимального количества классов. Их имена соответствуют назначению и понятны интуитивно (logo, square, home и т.д.). Все теги использованы по их прямому назначению, так абзацы заключены в теги p, навигация в теги nav и т.д. Согласно правилам, атрибуты, используемые в тегах, написаны в кавычках. Надпись Filipp Freelancer это логотип, являющийся ссылкой перехода на главную страницу.
6. Расположение блоков и включённых в них элементов в соответствии с созданным ранее макетом произведено, подчёркивая выбранный стиль, с подключением каскадных таблиц стилей (Cascading Style Sheets), состоящих из селектора и блока объявлений, с учётом кроссбраузерности для Google, Yandex, Firefox, IE, Safari и Opera. В правилах использованы одинаковые единиц измерения для используемых величин, отклонение используемых элементов расположения блоков, согласно макетных размеров от 3 до 5 пикселей. Надписи на кнопках и ссылках написаны на одном языке, одинаковым шрифтом и размером, кнопки стандартно оформлены, настроены с использованием свойства наследования, а сами файлы правил CSS, вынесены в отдельную папку и подключены в коде HTML файла. Коды разметки HTML и стилей CSS оптимально минимизированы с использованием комментариев. Страницы после вёрстки соответствуют выбранному стилю дизайна с идентичным расположением блоков, как в макете и с соблюдением параметров шрифтов: межстрочных интервалов, расстояния между буквами и словами и т.д.