Верстка сайта "Авто-Лидер Плюс"

Верстка сайта "Авто-Лидер Плюс"

Верстка – один из этапов создания сайта. Претворяя идеи дизайнера на языке разметки Интернет страниц HTML, специалист стремится максимально точно реализовать электронный макет будущего сайта. Этот процесс трудно назвать творческим, поскольку эта работа скучна и требует усердия и кропотливости.




Итак, на верстке имеется задание в виде электронного файла созданного в графическом редакторе Photoshop.  Приступая к работе мне, как специалисту по верстке, нужно внимательно изучить дизайн. Мысленно разбивая его на блоки у себя в голове понемногу строю план реализации творения. Кнопки, буквы, ссылки другие элементы дизайна не должны остаться без внимания. Наметанный глаз уже начинает видеть будущую структуру сайта состоящую из блоков и таблиц, заголовков и абзацев, графических элементов и пунктов меню. Итак, план реализации придуман, и приступаем к вырезанию графических элементов. Что бы посторонние детали не мешали, через панель управления слоями я  отключаю По-очереди не нужные в данный момент. Полученные картинки сохраняю в папку images, чего, наверное, все и ожидали.



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

Первая часть работы выполнена, и можно запускать программу создания и редактирования HTML страниц Dreamweaver. Назвав имя этой программы, я признался в страшном грехе верстальщика: настоящий специалист должен набирать текст в текстовом редакторе Блокнот. Но соблазн сэкономить 50% времени на набирании скучных слов типа padding, margin, text-decoration и других невыразительных слов настолько велик, что пока никто не видит, то можно и побаловать себя любимого. 



Существует два стиля верстки Интернет страниц: табличная и блочная. Первая подкупает своей простотой, но пугает большим объемом текста, который нужно набрать. Кроме того, малейшая мелочь может исказить выстроенную модель страницы, что означает потраченное напрасно время, либо длительная борьба с браузером за правильное отображение задуманного.
Другой стиль верстки пугает своей сложностью, которая сейчас кажется надуманной, но подкупает своей гибкостью и почти 100% гарантией правильности работы.

Итак, Наш выбор - блочная верстка. Как и положено, в таком методе написания страниц, мы верстаем первые блоки сайта до неприличия примитивными тегами DIV. Каждому блоку даем имена и в таблице стилей описываем их размер. Что бы их хорошо было видно, обрамляю их разными цветами. Немного работы над проектом и первые результаты работы можно посмотреть в браузере. Первый просмотр заготовки всегда волнующий: думаешь о том, что вдруг не так что-то сделал. Фуххх… Заработал проект! И теперь он уже как-то странно трансформируется в голове из разрабатываемого в редактируемый документ.

 

Немного любуемся работой и приступаем к добавлению в проект остальных ключевых графических элементов. Здесь я специально границы блоков выделил цветами, что бы было видно читателям статьи, что блоки расположены там, где и задуманы. Хоть они не совсем по размеру и точно по дизайну, но так все впереди. Мы над этим будем работать дальше и непременно победим этот невнятный язык HTML.



В работе верстальщика очень много программных инструментов. Одни позволяют изменять размер и формат картинок. Другие помогают искать ошибки в верстке. Третьи помогают мерить расстояние между элементами на экране. Меня всегда удивляли дизайнеры тем, что безошибочно определяют размеры букв на странице с точностью до 1 пикселя. Мне, наверное, много еще нужно работать, что бы делать так же, но я пошел на хитрость и установил программу для измерения расстояний. Несколько секунд и элементы страницы стал на свои места.  



Вот! Каркас - самую главную часть сайта я создал. Конечно, это еще не вся станица сайта как заказано по дизайну, и перед дизайнером хвастаться нечем, но основа готова. Теперь на нее будут размещены блоки содержимого страницы, подправятся размеры, уберутся бордюры. Еще много труда придется вложить в сайт: сверстать каждую страницу сайта, перевести ее в шаблон для CMS Joomla, создать документы сайта и пункты меню, отладить механизм работы меню с подсветкой активного элемента, установку компонентов сайта и много-много другого.

Ну а пока, я рад, что каркас готов и иду пить кофе, чтобы отметить рождение сайта. Как ребенка его придется кормить тегами, лечить скриптами, учить статьями и он вырастет в большой и солидный портал.

Ключевые слова для данной страницы: верстка сайта
Количество просмотров: 1946
Вернуться к списку статей

Заказать сайт в Москве, Питере, Волгограде, Астрахани   Создание и разработка сайтов   Сделать сайт-визитку   Создадим промо-сайт   Разработка информационных порталов   Создание интернет-магазина   Разработаем корпоративный сайт   Продвижение и оптимизация сайта на заказ