Что такое компьютерная верстка

Обновлено: 06.07.2024

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

Что такое верстка сайта

Все те, кто в той или иной мере касались веб-разработки, вероятно знают, что такое верстка сайта и как происходит данный процесс. Но для тех, кто только начинает свой путь разработчика или просто познаёт мир интернет-технологий мы доступно разъясним все тонкости.

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

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

Верстка сайта: с чего начать

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

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

Большинство профессионалов уже перешли и продолжают переходить на более гибкую верстку, то есть блочную. Её суть заключается в создании сайта на основе блоков, или как их ещё называют тегов - «div». Они содержат в себе текст, изображения и т.д. Главный их плюс и особенность в том, что при верстке они могут накладываться друг на друга.

Адаптивная верстка сайта: что это такое

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

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

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

Что нужно для верстки сайтов

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

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

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

Примерами программного обеспечения, специализирующегося на компьютерной вёрстке, являются программы QuarkXPress, Adobe InDesign, Scribus, Microsoft Publisher, Apple Pages.

История

Начало компьютерной вёрстке было положено в 1985 году, когда вышла созданная корпорацией Aldus программа PageMaker [1] и персональный лазерный принтер LaserWriter компании Apple Computer. Возможность создания WYSIWYG макетов страницы на экране монитора с последующей распечаткой на принтере была новой как для компьютерной индустрии, так и для типографского дела. Термин «desktop publishing» был предложен Полом Брейнердом, основателем Aldus Corporation.

Ранние системы компьютерной верстки на сегодняшний день выглядят весьма примитивными. Связка PageMaker-LaserWriter-Macintosh 512K была не совсем стабильной, часто зависала, использовался чёрно-белый экран, невозможно было контролировать кернинг, трекинг и другие важные для вёрстки параметры. Но в то время отзывы о системе были одобрительными.

Технологии, разработанные Adobe Systems, заложили фундамент для дальнейшего развития компьютерной вёрстки. Принтеры LaserWriter и LaserWriter Plus содержали во встроенной ROM-памяти масштабируемые шрифты от Adobe.

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

Улучшение и расширение инструментов для работы с текстом и графикой для компьютеров привлекло внимание профессионального печатного сообщества к системам компьютерной вёрстки. Переломным моментом стало появление в 1990-х годах программы QuarkXPress, а также расширение базы компьютерных шрифтов. QuarkXPress стала доминирующей системой на рынке. В начале 2000-х набрала популярность программа Adobe InDesign. Это произошло благодаря ее большим возможностям, а также интеграции с другими программами от Adobe, которые были доминирующими в сфере компьютерного дизайна, обработки изображений и фотографий, аудио- и видеоредактирования.

Компьютерная вёрстка (англ. Desktop publishing — «настольное издательство», сокращённо DTP) — использование персонального компьютера и специального программного обеспечения для создания макета с целью последующей печати в типографии или на принтере.

Начало компьютерной вёрстке было положено в 1985 году, когда вышла созданная корпорацией Aldus программа PageMaker[1] и персональный лазерный принтер LaserWriter компании Apple Computer. Возможность создания WYSIWYG макетов страницы на экране монитора с последующей распечаткой на принтере была новой как для компьютерной индустрии, так и для типографского дела. Термин «desktop publishing» был предложен Полом Брейнердом, основателем Aldus Corporation.

В 1986 году вышла программа Ventura Publisher для компьютеров под ОС MS-DOS. В то время как PageMaker имитировала процесс создания макета страницы вручную, Ventura Publisher автоматизировала этот процесс путем использования тэгов (tags) и таблиц стилей (style sheet), что позволило автоматизировать процесс создания индексов и элементов макета страницы. Таким образом Ventura Publisher была удобнее PageMaker при создании макетов книг и многостраничных документов.

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

Часть 1. Верстка стандартными средствами

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

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.

Структура файлов

Первым шагом давайте создадим простую структуру файлов для наших файлов.

Создаем папку с названием нашего проекта, например Whitesquare.
В ней создаем пустой файл index.html.
В папке проекта создаем папку css с пустым файлом styles.css.
В папке проекта создаем пустую папку images.

Предварительный осмотр

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

Как будут нарезаться изображения?
Какими будут основные стили?
Какой макет у нас получится?

Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.

Общие изображения

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

Сохраним логотипы следующим образом:
/images/logo.jpg
/images/footer-logo.jpg

В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.jpg

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.jpg
/images/h1-bg.jpg

Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.

Основные стили

И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

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

Прописываем все эти стили в styles.css:

В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».

Каркас HTML

И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:

Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.

Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.

Макет

В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).

Опишем это в теге body:

Wrapper используется для объединения блоков и их выравнивания по центру страницы.

Затем укажем стили блоков:

Логотип

Вставляем логотип в тег header:

Дополнительных стилей не требуется.

Поиск

Вставляем форму поиска в тег header:

И стили выравнивания по правому краю для нее:

Для отображения меню необходимо создать список со ссылками внутри тега nav:

CSS стили для него будут следующие:

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

Заголовок страницы

Заголовок страницы помещается в div с идентификатором heading

Заголовок имеет следующие стили:

Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

Колонки

Для того, чтобы создать колонки страницы нужно прописать следующие стили:

Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.

Подменю

Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:

И применяем к подменю следующие стили:

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

Контент сайдбара

В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.

В html это выглядит так:

В стилях укажем шрифты, цвета и отступы:

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

Цитата

Вёрстку контента начнём с добавления цитаты.

Добавим код цитаты в раздел section

И применим для него стили:

Здесь нет ничего нового, так же — шрифты, фоны и отступы.

Контент

Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после

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

, которому зададим следующие стили:

Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.

Блок «Our team»

При верстке этого блока добавим сначала заголовок:

А затем два блока-строки с карточками сотрудников

Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:

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

Футер

Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.

Для начала создадим контейнер футера с этим блоками:

И применим к нему оформление:

Контейнер с находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.

Лента Твиттера

Верстаем содержимое ленты Твиттера:

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

Карта сайта

Карта сайта представляет собой два блока со ссылками:

Социальные ссылки

Вставляем набор ссылок в контейнер

Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Копирайт

Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.

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

Читайте также: