3832 681550
Контакты
Услуги под ключ
Список услуг
Разработка дизайна
  • Разработка стиля
  • Креативный дизайн
  • Графический дизайн
  • Создание анимации
  • 3D моделирование
Разработка сайта
  • Разработка концепции
  • Верстка HTML и CSS
  • Установка CMS
  • Доработка Веб модулей
  • Наполнение контентом
Раскрутка сайта
  • Подготовка SEO стратегии
  • SEO копирайтинг
  • Оптимизация страниц
  • Реклама в Google и Яндекс
  • Поисковое продвижение
Поддержка сайта
  • Обновление контента
  • Модернизация модулей
  • Мониторинг Веб ресурсов
  • Обучение персонала
Заказать услугу
Главная → Статьи → Основы верстки – особенности и тонкости процесса
13.01.2014

Основы верстки – особенности и тонкости процесса


Основы верстки – особенности и тонкости процесса

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

  • HTML и CSS – особенности и ограничения.
  • Владеть приемами и основами верстки.
  • Знать особенности браузеров.

Тонкости верстки, на что стоит обращать внимание?

Как известно, верстка является творческой работой, поэтому выделить четкий алгоритм невозможно. Нет конкретной догмы, существует лишь множество примеров. К примеру, дизайнер подготовил макет, который он создал в любом графическом редакторе. Если клиенту нравится работа, то следующим этапом макет попадает к верстальщику для формирования HTML-кода. Специалист анализирует рисунок и составляет алгоритм для перевоплощения его в веб-страницу. Зачастую, картинки разбиваются на отдельные блоки. Выделяют шапку сайта и основной контент.

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

Что стоит определить верстальщику?

  • Какой цвет фона у будущей веб-страницы.
  • Шрифт, его цвет и размер.
  • Текст отдельно взятых модулей.
  • Размер шрифта, цвет заголовков.
  • Линии, рамки и их особенности параметров.

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

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

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


Вам понравился сайт?

Рассказать друзьям