Что такое верстка страницы
Верстка сайта представляет собой описание программным кодом визуальной части веб-сайта. Независимо от того, какой браузер использует пользователь, сайт должен выглядеть и работать корректно при любом разрешении монитора.
Процесс верстки — один из самых важных этапов создания интернет-ресурса, поскольку от работы верстальщика зависит:
Что такое валидная верстка?
Понятие верстки тесно переплетается с понятием валидности. Валидная верстка веб-сайта — написание HTML и CSS кода, который соответствует стандартам W3C и успешно проходит тест на валидаторе.
Во-первых, данное понятие имеет огромное значение для SEO оптимизации сайта, поскольку грамотно построенный код положительно влияет на поведение поисковых роботов, а во-вторых валидный код — гарантия того, что верстальщик не допустил логических и синтаксических ошибок при программировании.
Страница даже с незначительными ошибками в коде не пройдёт через валидатор. Следует помнить, что лучший валидатор — браузер, поскольку восприятие сайта браузером — это восприятие сайта посетителем.
Базовые правила верстки сайта
Каковы основные правила качественной и грамотной верстки?
Основные подходы к верстке сайта
Предположим, что существуют два блока, стоящих рядом. Существует несколько основных подходов к вёрстке сайта:
Кроме подходов, существуют ещё и различные типы вёрстки.
Табличная верстка
Суть такой вёрстки заключается в применении сетки таблиц с невидимой границей, в которых удобно размещать разнообразные элементы.
Совсем недавно до появления блоков и слоёв это был самый популярный тип вёрстки, имеющий множество преимуществ:
Однако имеет место быть и небольшая ложка дёгтя:
Блочная верстка сайта
Слои, которые создаются с помощью тега div, представляют собой крайне удобные структурные элементы, оформление которых задаётся с помощью таблиц стилей CSS.
Блочная верстка сайта имеет следующие преимущества:
Несмотря на громадный ряд преимуществ, блочная CSS верстка имеет также и недостатки:
Верстка слоями: преимущества, недостатки, сфера применения
Достоинствами вёрстки слоями являются:
К недостаткам вёрстки слоями можно отнести:
Вёрстка слоями предоставляет дизайнерам возможность ничем не ограничивать свою фантазию, однако имеет некоторые технические сложности.
Страницы со слоями не имеют единого стандарта отображения браузерами, поэтому одна и та же страница в браузерах Opera и Google Chrome может выглядеть по-разному.
Таким образом, единые общепринятые правила верстки не существуют, и в каждом конкретном случае следует действовать по ситуации.
Однако, табличный метод верстки, несмотря на указанные недостатки, практикуется повсеместно и зарекомендовал себя как максимально надёжный.
Как сверстать веб-страницу. Часть 1
Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.
Часть 1. Верстка стандартными средствами
Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков.
Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.
Структура файлов
Первым шагом давайте создадим простую структуру файлов для наших файлов.
Предварительный осмотр
После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:
Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.
Общие изображения
На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, пустое изображение, два логотипа и кнопки социальных сетей.
Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png
В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png
Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png
Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.
Основные стили
И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.
На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.
Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.
Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.
Прописываем все эти стили в 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 пикселей.
Лента Твиттера
Верстаем содержимое ленты Твиттера:
Из интересных моментов здесь следующее: подчеркивание у заголовка мы сделали через нижнюю границу, а сам блок твиттера, как и последующие блоки выровняем по левому краю и задаём ширину.
Карта сайта
Карта сайта представляет собой два блока со ссылками:
Ссылкам задаем цвет и оставляем подчеркивание только для наведённых.
Колонки со ссылками делаем через инлайновые блоки и затем свойством #sitemap div + div отодвигаем вторую колонку от первой.
Социальные ссылки
Вставляем набор ссылок в контейнер
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.
Копирайт
Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.
Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:
На этом наши работы закончены. Готовый проект можно скачать здесь.
Что такое верстка элементов сайта: что она значит и как правильно верстать страницы
Все, кто хоть раз сталкивался с веб-разработкой, наверняка имеет представление об этом процессе. Тем же, кто сейчас совершает свои первые шаги в этой сфере, или просто отличается любопытством от природы, мы расскажем, что же это такое — верстка сайта.
Если seo-специалисты провели аудит вашего интернет-ресурса и уже выставили на вас задачи по исправлению вёрстки сайта, но вы не знаете с какой стороны к ним подойти и у вас некому эти задачи реализовывать, вы можете обратиться к специалистам “Студии 17”. Мы занимаемся не только разработкой, но и оказываем качественную техническую поддержку.
Создание web-страниц
Предполагает собой визуальное наполнение ресурса, прописанное специальным кодом программы. Иначе выражаясь, это рациональное и грамотное распределение и стыковка всех элементов. В роли составляющих стандартно используются: текстовые блоки с заголовками, всевозможные изображения и таблицы.
Изначально продумывается и создается в граф-редакторе сам дизайн. Что-то вроде обложки-представления, позволяющей понять, как будет смотреться идея после реализации. А потом на базе разработанного оформления уже создается полноценная html-страница.
Для лучшего понимания представьте себе, что редактору литературного печатного издания автор принес очередную главу своего произведения на 5 страниц. Писатель, конечно, очень спешил сдать работу в срок, о читабельности второпях напечатанного текста он и не задумывался.
О том, как наилучшим образом расположить текстовые блоки, сделав их доступными для восприятия, соответствующие иллюстрации и уместить все это на пяти полосах журнала размышляет уже дизайнер. Он оформляет надлежащим образом шапку, размещает текст, отмечает заслуживающие моменты отличным от основного шрифтом. Потом подбирает и вставляет картинки. В итоге получается общая картина того, как будет смотреться и читаться глава в напечатанной форме. Все, дизайнер сделал свое дело, теперь очередь за наборщиком. Он создает страницу и пускает ее в печать.
Как и тот, кто осуществляет набор, html-верстальщик задействует в своей работе специальное оборудование. Для верстки web-страниц ему необходимо знать все о таких графических редакторах, как: «Фотошоп», «Джимп», «Крита», и уметь ими пользоваться. Навыки использования HTML, CSS, Java Script также обязаны присутствовать.
В итоге все выглядит следующим образом (чтобы все увидеть, достаточно сделать правый щелчок мышки в окне браузера и выбрать опцию «просмотр кода»):
Разновидности
Создавать любой сайт приходится с учетом двух типов разработки:
Верстка, как несложно догадаться, имеет отношение ко второму виду. Она не контролирует непосредственно функционал ресурса. Так, она не может отвечать за процесс регистрации юзеров в сообществе, количество товаров в корзине интернет-магазина и т.д. Вычислительные действия, входящая и исходящая информация, загрузка и хранение данных не в ее компетенции. Ее задача — надлежащим образом расположить все нужные составляющие на странице, давая возможность работать с ними пользователям.
Разбираясь с вопросом, что значит веб-верстка, следует знать, что она представлена несколькими видами.
Валидная
Это довольно обширное понятие, которое означает, что прописанные коды HTML и CSS обязаны соответствовать установленному стандарту W3C. Веб-страница при этом должна правильно отображаться на устройствах, используемых юзерами при выходе в сеть.
Валидность играет немаловажную роль для SEO-оптимизации, только неосведомленный в программировании человек может не знать об этом. Сформированный по всем правилам код оказывает положительное влияние на поведение роботов-поисковиков. Кроме этого, валидная комбинация гарантирует отсутствие ошибок со стороны верстальщика при программировании. Наличие даже несущественных погрешностей приведет к тому, что ресурс не пройдет через валидатор, который в подавляющем большинстве случаев представлен браузером, отвечающим за восприятие информации юзером.
Табличная
Верстание сайтов с помощью данного типа верстки до недавнего времени было широко распространено. Основывается она на использовании сетки таблиц, границы которых не видны, а располагать в них всевозможные элементы очень удобно. Этот вид характеризуется рядом ощутимых плюсов.
Нельзя не отметить и некоторые недостатки:
Блочная
Слои, созданные тегами div, весьма подходящие детали. Оформляются они при задействовании CSS-таблиц.
Из плюсов такой верстки стоит отметить:
Думая, как сверстать веб-страницу блоками, стоит помнить и об имеющихся у нее недостатках:
Верстка слоями
Это поэтапное наложение деталей кода html. Параметры можно менять, используя JS и VBS. Это дает мастеру своего рода простор и позволяет задействовать разнообразные эффекты. Плюсы здесь следующие:
Из минусов нельзя не отметить:
Да, такой тип позволяет дизайнерам воплотить в жизнь свои самые смелые фантазии. Но при этом следует быть готовым к возникновению определенного рода технических сложностей. Для начинающих мастеров браться за подобную работу — не лучшая идея. Чтобы гарантировать заказчику хороший результат, необходимо обладать опытом и большим багажом знаний в программировании.
На самом деле каких-либо строгих правил, которые надлежит соблюдать при любой ситуации — нет. Существуют лишь основные, придерживаться которых желательно, дабы избежать многочисленных ошибок и не переделывать многократно одно и то же.
Базовые правила верстки сайта
Среди них нужно перечислить самые основные, которых довольно много. Но следовать им все-таки нужно, иначе не удастся достичь желаемого результата.
Что это такое — верстка веб-страниц на сайте: с чего начинать
Первоочередное условие для верстальщика — наличие макета, его нужно детально рассмотреть и представить объем будущей работы.Дальнейшие действия следует производить в установленном порядке:
Можно считать на вопрос: что значит сверстать сайт, мы ответили.
Признаки правильной верстки
Эта глава подытожит рекомендации, данные выше. Верстальщик все сделал правильно, если видит следующие результаты своей деятельности:
Основные подходы
Разобравшись, что означает верстка элементов сайта, следует узнать, какие подходы осуществляют к ее созданию.
Инструменты верстальщика
Когда веб-мастер считает, что сверстать страницу — это плевое дело и делает все абы как, привлекательность, функциональность ресурса и его место в рейтинге находятся под угрозой. К сожалению, мельтешащие по монитору элементы и запутанная навигация — не редкость. О популярности ресурса при таком раскладе не может быть и речи.
Специалист обязан хорошо разбираться в этом и задействовать на практике инструменты:
HTML-верстка: что это такое и какие основные правила процесса
Правила процесса верстки
В разработке сайта версткой называется процесс перевода дизайн-макета сайта в цифровой вид, читаемый браузерами, с учетом приведенных выше требований. Верстальщику нужно позаботиться о том, чтобы сайт не только выглядел красиво и в соответствии с макетом, но и был правильно реализован с технической точки зрения. В противном случае дальнейшие улучшения сайта и его продвижение будут затруднены.
Валидность верстки
Чтобы разработчикам было проще верстать были разработаны специальные стандарты валидности написанного кода. На данный момент актуален стандарт WC3. Страницы, использующие данный стандарт, обычно лучше индексируются поисковыми системами, их проще продвигать, они более удобные для пользователей, плюс, их проще улучшать при необходимости.
Валидность страницы определяется:
Стандартный шаблон расположения элементов в верстке
Для определения валидности верстки можно использовать специальные сервисы, однако ее можно проверить и в браузере, перейдя в режим разработчика. В нем настраивается размер и формат страницы, что позволяет посмотреть, как будет вести себя верстка на разных устройствах и размерах экрана.
Правила валидности верстки
Среди веб-разработчиков есть общепринятые стандарты, которым должна соответствовать HTML-верстка. Некоторые из них уже упоминались выше. Вот полный список общепринятых правил с пояснениями:
В идеале ваша верстка должна соответствовать всем указанным условиям.
Структура проекта
Помимо соблюдения основных правил валидной верстки важно соблюдать иерархию файлов и папок в проекте. Здесь можно выделить несколько рекомендаций:
Пример структуры файлов и папок в небольшом проекте
Подходы и типы верстки
Подходы к верстке определяют общее поведение сайта. Их существует несколько:
Пример фиксированной верстки
Пример резинового макета
Пример адаптивного макета
Пример поведения отзывчивой верстки
Типы же верстки стоит рассмотреть более подробно. Их выделяют всего три.
Табличный тип
По аналогии с фиксированной версткой является уже устаревшим решением. Суть заключается в том, что страница разбивается на таблицу с невидимыми границами. Ячейки этой таблицы заполняются контентом, создавая имитацию дизайна. Несмотря на то, что этот тип верстки уже устарел, ему все же обучают, плюс, некоторые заказчики могут требовать верстать сайт таблицами.
Пример табличной верстки
Свои позиции этот тип верстки сохраняется по следующим причинам:
Однако, если бы все было так хорошо, то от табличной верстки никто не отказывался бы до сих пор:
Сейчас не рекомендуется верстать сайт полностью, основываясь только на табличной верстке. Однако в верстке некоторых элементов вполне может быть использован подобный подход.
Блочный тип
Пример блочной верстки
У блочного типа верстки выделяют следующие весомые преимущества:
Благодаря своим преимуществам блочная верстка является стандартом HTML-верстки. Конечно, у нее есть некоторые минусы, но они незначительны:
Рекомендуется уделить как можно больше внимание обучению этому типу верстки, так как он является самым популярным и вряд ли будет вытеснен в ближайшее время.
Верстка слоями
Такое решение появилось недавно и пока еще не сильно распространено. Помимо знаний HTML и CSS здесь потребуются углубленные познания в JavaScript, поэтому данный тип верстки не подойдет новичкам. Он позволяет быстро реализовывать самые разнообразные дизайн-идеи и эффекты. Пока технология только обрабатывается.
У верстки с помощью слоев выделяют такие преимущества:
Так как верстка слоями это пока еще новое направление, у него имеются свои недостатки:
Пока верстка слоями используется в крупных и/или нестандартных проектах. Вероятно, в ближайшем будущем этот тип верстки станет более распространенным, но общим стандартом, как блочная верстка, вряд ли станет.
Заключение
Задача HTML-верстальщика перенести разработанный дизайн-макет в понятный для браузера интерактивный вид. Помимо знаний самого HTML верстальщику будет не выжить без знаний CSS. Также очень желать освоить JavaScript хотя бы на самом базовом уровне.
Выбор технологий верстки может лежать полностью на верстальщике, если в ТЗ от заказчика не сказано иначе. Необходимо придерживаться общепринятых правил в верстке и, желательно, использовать наиболее популярные современные подходы к верстке. Анализируйте свои возможности, техническое задание и другие условиям, чтобы выбрать наиболее оптимальный путь для реализации поставленной задачи.