Задачи верстки

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

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

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

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

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

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

Возьмем образец главной страницы

001-1

Сейчас нужно подвергнуть анализу рисунок и найти решение, как его перевоплотить в интернет-страницу. Для большего комфорта делается логическое разделение рисунка на раздельные блоки, с которыми будем работать дальше. Так можно распределить этот макет на два основных блока — «шапка» и основное содержание. Начнем с «шапки»

шапка сайта

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

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

Любой из приведенных способов хоть и приводит к необходимому результату, однако имеет и собственные недостатки, про которые верстальщик обязан иметь представление.

После того, как шапка будет сверстана, можно начинать работу с другим блоком. Здесь уже присутствует текст, поэтому делается формирование файла стилей, в котором определяются:

  • цвет фона интернет-страницы;
  • размер и цвет основного шрифта;
  • размер текста отдельных модулей ;
  • размер, цвет и шрифт для заголовков;
  • характеристики рамок, линий и т.д.

Далее верстальщик, применяя этот CSS-файл, делает окончательный вариант главной страницы.

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

макет второстепенной страницы

«Шапку» придется переработать, а в CSS подключить параметры вновь появившихся элементов. И эту работу предстоит проделать с каждым макетом.

В течении работы над шаблонами делается проверка, в результате которой выясняется:

  • правильно ли показываются страницы в различных браузерах и мобильных устройствах (типа ipad, смартфон и т.д.)?
  • как реагируют элементы страницы на увеличение или уменьшение шрифта в браузере?
  • как будет работать веб-сайт, если выключить просмотр изображений?
  • влияет ли на вид сайта изменение разрешения монитора?

В результате работы у верстальщика должен получиться шаблон с минимальным количеством ошибок.

Стоит заметить, что верстальщик обычно не делает все интернет-страницы веб-сайта, а делает только несколько стандартных документов, называемые шаблоном. Затем страницы создаются по ним либо динамически при помощи CMS, либо путем наполнения шаблона текстом и сохранением его в различные файлы.

Наверх

Понравилась статья? Поделиться с друзьями:

Отправить ответ

Оставьте первый комментарий!

Уведомить
avatar
wpDiscuz