Использование в вёрстке


Содержание

Верстка веб-сайтов

10 ноября 2020 года. Опубликовано в разделах: Азбука терминов. 20797

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

Что нужно знать для верстки сайтов? Как минимум, основы работы с графическими редакторами (Photoshop, Gimp, Krita), язык HTML, CSS, библиотеки Java Script (JS).

Если мы нажмем в браузере правую кнопку мыши и выберем «Просмотреть HTML-код», то увидим следующее:

Это и есть сверстанная веб-страница.

Виды верстки

Верстку можно поделить на два основных вида:

  • Табличная. Для описания элементов применяются таблицы. Вся страница представляет собой скопление таблиц
    . В настоящее время такая верстка считается устаревшей.
  • Блочная. HTML-документ представлен как совокупность блоков

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

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

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

    • Вырежите иконки, кнопки, картинки. Сложите графику в отдельную папку.
    • Выпишите шрифты, которые необходимо будет отразить в CSS.
    • Создайте файлы index.html и styles.css (можно назвать их по-другому). HTML – это будущая сверстанная страница сайта, CSS – файл стилей.
    • Начинайте с шапки. Пропишите базовые элементы в теге head файла HTML. Здесь следует указать кодировку, путь к таблице стилей, title и т.д.
    • Стратегия верстки. С левого угла дизайн-макета по диагонали вниз начинайте описывать страницу. Сначала «одевайте» в HTML шапку сайта (слева направо), потом спускайтесь ниже и заканчиваете переносом в код правой нижней части макета. Вы можете нарушить данное правило и производить верстку так, как вам удобно.
    • Сначала верстайте структуру веб-страницы в HTML. Затем в CSS выносите идентификаторы и классы. Это можно делать параллельно с версткой. Каждый класс должен иметь адекватное название, которое дает понимание, что он означает. Смешно и непрофессинально выглядят названия типа «verh_shapki», «cherny_shrift_konec» и т.п.
    • Закрывайте все теги, проверяйте правильность их вложения.
    • Работа над HTML заканчивается, и верстальщик полностью переходит на работу с файлом стилей: дополняет его, дорабатывает и т.п.
    • Стилизация выполняется в определенном порядке. Сначала элементу задаются общие правила (фон блока, отступы), затем специфические свойства типа цвета рамок, размещение картинок внутри блока и т.п..
    • Возвращайтесь обратно к HTML-файлу, если странице необходима динамика. Для этого предусмотрены JavaScript-библиотеки. Например, можно сделать меняющийся слайдер или адаптивное меню. Код библиотек должен быть минимизирован.
    • Тестирование и проверка на ошибки. Проверьте, как ведет себя страница в разных браузерах при разных разрешениях монитора. Можно пользоваться онлайн-сервисами или специальными инструментами типа
    • Изучите страницу на валидность – отсутствие ошибок в коде.

    Какая верстка считается качественной

    • Блочная – с применением

    Инструменты верстальщика

    • Обработка изображений: Adobe Photoshop, Gimp, Krita.
    • Работа с кодом: Notepad++, Adobe DreamViewer, SublimeText, CoffeeCup HTML Editor, UltraEdit,Firebug, Winless, CSS3 Generator
    • Работа с JS: Front Page, NetBeans.
    • Проверка на кроссбраузерность и валидность: Crossbrowsertesting, IE Tester, Dr Watson, Validator.w3, Css validator, Markup validtor.

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

    Специалисты студии SEMANTICA проведут комплексный анализ сайта по следующему плану:

    – Технический аудит.
    – Оптимизация.
    – Коммерческие факторы.
    – Внешние факторы.

    Мы не просто говорим, в чем проблемы. Мы помогаем их решить

    Блочная верстка сайта — html и css, и почему начинающим повезло больше, чем тем кто верстает уже давно

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

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

    Почему вам повезло больше, чем верстальщикам, начавшим работу уже давно

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

    В нее встраивался head – голова, основная часть. Та, в которую входит логотип, какая-то основная информация типа телефонов и так далее.

    Далее сайтбар. Это боковая панель. В нее можно запихнуть навигационное меню, ссылки, списки, рекламу.

    Далее врисовывалось основное меню для перехода по категориям.

    Основная контентная часть. Текст статьи, вводное приветствие или что-то иное.

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

    Чуть позже появились новые стандарты. Табличную верстку заменила блочная. Тег «div» — это и есть блочная верстка. Можете посмотреть код любого сайта. Кликните правой кнопкой мыши и выберите «Просмотр кода элемента». Взгляните на мой скриншот. Тут есть блок главной страницы, футера, левой и правой колонки. Все они подписаны.

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

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

    Пошаговая инструкция: как делаются сайты

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

    Более 80% людей просто смотрят на непонятный набор символов, вспоминают школьную программу по математике: логарифмы, дифференциалы – сходят с ума, пугаются и забывают об этой теме: «Пойду лучше китайский выучу, оно-то проще будет».

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

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

    Она изготавливается в особом фотошоповском формате, типа блокнотного txt или вордовского doc. Из psd, так называется этот формат, раскраиваются блоки. Для этого есть специальная кнопка в меню слева.

    После того как документ раскроен. Его можно «Экспортировать для web» и в результате на компьютере появляется папка images, которую верстальщик использует для распределения картинок по сайту.

    Я сделал этот вариант за минуту, он не правильный. Просто хотелось вам показать примерный результат. Вы можете скачать электронную версию моего psd-макета (скачать) и попробовать сделать свою, правильную версию, посмотрите, какие картинки пригодятся для размещения и как вы их будете вырезать. Заодно попробуете поработать самостоятельно над шаблоном в photoshop.

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

    Ваш первый сайт. Верстка займет всего пять минут

    Над самой версткой можно работать в программе Notepad++. Сегодня я не буду затрагивать программу Adobe Dreamweaver, т.к. это тема отдельной статьи, но отмечу, что она как раз создана для верстальщиков.

    Работы над сайтом обычно не начинаются с создания файла style.css, но думаю что так вам будет интереснее. Это основной документ, в котором описывается как именно будет выглядеть ваш портал. Все просто. Даже английский учить не обязательно.

    Background – это цвет фона.

    Кликнув два раза в Photoshop по цветовой палитре вы можете узнать и другие цвета.

    Вот так будет выглядеть html документ с текстовой составляющей. Уже знакомые меню, тела и контейнеры… тег h2 тоже должен быть вам знаком. Это заголовки. Впишите в них свои слова.

    Скачайте эти два документа в одну папку и откройте с помощью Notepad ++, затем отредактируйте цвет и текст, а затем запустите index.html с любого браузера (скачать).

    Получится примерно такой вариант.

    Поздравляю. Это ваша первая страница в интернете! Вы сделали ее, у вас получилось. Естественно, что вместо цвета можно вставить и картинку, которая была вырезана из фотошопа в документ images. Для этого нужно просто прописать путь. Как вы видите, ничего супер сложного тут нет.

    И напоследок… качаем видео уроки

    Как я вам уже говорил, самое сложное в верстке – это найти хорошие обучающие материалы. Сам я начинал с книг и только через две недели смог сделать свой первый индекс-файл. Чтобы вы понимали, без таблицы стилей (css) она будет выглядеть вот так.

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

    1. Html — уроки для начинающих.
    2. Css — уроки для начинающих.
    3. Бесплатный мини-курс по вёрстке сайта.

    Желаю вам успехов в ваших начинаниях. Уверен, что совсем скоро вы начнете не только учиться, но и работать онлайн, а также реализовывать невероятные проекты!

    Если вам понравилась эта статья – подписывайтесь на рассылку и получайте больше полезных материалов для совершенствования собственных навыков!

    Особенности верстки сайта: что нужно знать веб-дизайнеру

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

    Как происходит верстка сайта

    Для начала разберемся, что такое верстка и зачем она нужна.

    Процесс создания сайта происходит в несколько этапов и одним из последних является верстка сайта. Этим занимается соответствующий специалист — верстальщик. Создание веб-страниц происходит с помощью специальных языков программирования: HTML, CSS и JavaScript. Используя возможности этих языков, разработчик превращает созданный в графическом редакторе макет в полноценную интернет-страницу для отображения в браузере. Так выглядит наш блог изнутри:

    Верстка осуществляется в несколько этапов:

    Из макета вырезаются основные изображения, элементы, фоны и прочее:

    1. Прописывается структура сайта с помощью языка разметки HTML. Размечается расположение основных блоков и элементов, проставляются ссылки.
    2. Далее элементам придается внешнее оформление с помощью стилей CSS. Задается фон для страницы и необходимых элементов, подгружается типографика, задается цветовая гамма страницы, размещаются изображения из макета.
    3. Если на сайте подразумевается динамика, используется JavaScript, с помощью которого создается анимация и другие динамические эффекты.
    4. Созданная страница тестируется, проверяется наличие ошибок и отображение сайта в различных браузерах и на других устройствах.

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

    Что следует знать дизайнеру

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


    1. Подготовка макета к верстке.
    2. Использование модульной сетки.
    3. Разработка адаптивного дизайна.
    4. Создание стайлгайдов.
    5. Использование векторной графики.
    6. Работа с текстом.
    7. Создание анимации.

    Остановимся на каждом подробнее.

    Подготовка макета: правила и рекомендации для дизайнера

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

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

    1. Порядок в слоях

    Пожалуй, самое простое правило для дизайнера. Чтобы разработчик не тратил время на понимание, какой слой соответствует тому или иному элементу, лучше навести порядок в слоях. Придумать для каждого слоя осмысленные названия (вместо «Слой 1» — «Кнопка_Шапка» и прочее), распределить слои по группам (например, группа «Хедер», «Футер» и так далее). Также нужно удалить скрытые ненужные слои, так как верстальщик может не заметить и допустить ошибку, разместив элемент на сайте. Соблюдение данных рекомендаций позволяет верстальщику понять логику дизайна и облегчает его ориентирование по макету.

    2. Целые числа

    Для более качественного перенесения макета в браузер лучше отказаться от дробных значений расстояний и отступов.

    3. Наличие всех состояний элементов

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

    4. Используемые технические характеристики

    При работе с графическим редактором, необходимо обозначить нужные характеристики макета: цветовое пространство (RGB, а не CMYK), расстояния в пикселях, разрешение (72 dpi) и прочее.

    5. Цветовая гамма

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

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

    Использование модульной сетки

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

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

    Разработка адаптивного дизайна

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

    Наш сайт в декстопной версии:

    В мобильной версии:

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

    Создание стайлгайдов и других документов

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

    Решение данной проблемы простое. Дизайнер может создать документ, в котором будут описаны все используемые типовые элементы на сайте. Кнопки, заголовки, небольшие блоки, веб-формы и прочее будут создаваться в соответствии с документом, что упростит разработку и упорядочит дизайн. Выдержка из стайлгайда Яндекса:

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

    Использование векторной графики

    При создании дизайна часто используются векторные изображения — иконки, логотипы, векторные иллюстрации. Чтобы такие картинки корректно отображались в конечной версии сайта, дизайнеру рекомендуется импортировать их в SVG — векторном формате, который часто используется при верстке сайтов. Больше об SVG можно прочитать здесь.

    Работа с текстом

    Часто при создании макета используется «рыбный» текст — набор бессмысленных предложений, который никак не связан с тематикой сайта. Кто-то использует латинскую версию Lorem Ipsum, кто-то более осмысленный текст вроде отрывка из «Войны и мира». Однако, использование такого текста чревато изменениями в конечной версии сайта.

    Вставляя написанный копирайтером текст, верстальщик может изменить макет до неузнаваемости. Все тщательно просчитанные дизайнером отступы, подобранный кегль может исчезнуть из-за полотна текста. Идеальный вариант — макет, разработанный под конкретный контент. Однако, если написанного текста нет, можно поступить в обратном порядке — дать ТЗ копирайтеру под дизайн. Так обе стороны окажутся в выигрыше.

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

    Требуется определенная работа с типографикой. Лучше, если характеристики шрифта будут выражены в целом значении (кегль 12,342 лучше заменить на 12). Также если дизайнер не применяет стандартные веб-шрифты из Google Fonts, лучше приложить используемую типографику к макету (в ttf или других форматах, удобных для разработчика).

    Создание анимации

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

    Анимацию можно создать в Photoshop или предназначенных для этого программах: Adobe Animate, Adobe After Effects, Principle и прочее.

    Другие способы найти взаимопонимание с верстальщиком

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

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

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

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

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

    Современные виды верстки сайтов HTML. Требования к верстке

    Поговорим о правильной верстке сайтов. Фиксированная, блочная, адаптивная, мобильная, резиновая, гибкая, семантическая, валидная, кроссбраузерная верстка. Давайте посмотрим, что все это значит.

    Верстка сайтов на HTML/HTML5 и CSS/CSS3

    С начала года я занялся подтягиванием своих слабых мест в веб технологиях. Разобравшись, я описал план самостоятельного изучения HTML и CSS, а также HTML5 и CSS3. Я придерживался этого плана и результат получился неплохим.

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

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

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

    Что такое верстка сайта, долго объяснять я думаю не стоит. Если коротко, то это создание HTML кода и CSS-таблиц стилей по задуманному ранее дизайну. Чаще всего страницы верстают на основе подготовленного заранее в фотошопе psd-макета.

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

    Требования к современной верстке

    Чем качественнее выполнена верстка сайта, тем лучше будет работать сайт или блог. Профессиональную верстку может выполнить только хороший специалист верстальщик. Какие же требования сегодня предъявляют к верстке? Вот они:

    • кроссбраузерность
    • адаптивность
    • минимум кода
    • высокая скорость загрузки страниц
    • семантичность
    • валидность

    Давайте разберем какие бывают виды верстки сегодня и вам станет понятно что все это значит.

    Виды верстки сайтов

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

    • Фиксированная верстка или статическая . Вне зависимости от размеров окна браузера или устройства ширина страниц будет постоянной. Все элементы занимают строго определенную ширину в пикселях на странице. Если разрешение экрана большое и окно браузера развернуто на весь экран, то, как правило, по бокам остается свободное место. И наоборот, на мобильных устройствах при фиксированной верстке снизу на странице появляется полоса прокрутки.
    • Резиновая верстка . Страница занимает всю ширину браузера, каких бы размеров она не была и на каком бы устройстве вы не открыли эту страницу. Ширина элементов страницы задается в процентах от ширины окна, и поэтому занимают всю доступную область. При этой верстке тяжело добиться хорошего удобного дизайна при всех возможных разрешениях экранов, ведь страницы будут выглядеть по-разному.
    • Табличная верстка или верстка таблицами . В данном случае сетка страницы строится с помощью таблиц. Представьте, что на странице есть главная таблица, а в ее ячейках при необходимости располагают вложенные таблицы, а в их ячейках могут быть новые таблицы и так до бесконечности. Код получается громоздким, это очень неудобно, да и надобности в этом уже нем. Сегодня так страницы уже давно не верстают. Более того, поисковики не любят такие страницы и плохо их индексируют. Если вам нужно, вы можете разместить на странице таблицу или несколько, но только не делайте с их помощью структуру страницы.
    • Блочная верстка, верстка блоками или div-верстка . Это, пожалуй, самая распространенная верстка сегодня. Сетка страниц конструируется из множества блоков

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

    По собранной мной статистике около 40% людей посещают страницы моего блога с мобильных устройств. Причем со смартфонов более 30% и с планшетов около 7%. Да, у меня на блоге адаптивный шаблон и он неплохо смотрится со смартфонов. Пока что есть ошибки в валидации, но думаю, что руки скоро наконец дойдут до этого.

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

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

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

    • Практика по основам адаптивной верстки в HTML5 и CSS3
    • Практика верстки сайта под мобильные устройства
    • Веб-дизайн: практический курс создания лендинга
    • Веб-дизайнер — профессионал. Создание востребованных макетов
    • Современные тенденции веб-разработки
    • Научись создавать красивые, современные подписные и продающие страницы
    • Все о создании сайтов
    • Пошаговый план создания сайта
    • Школа блоггинга

    Надеюсь, что статья была интересной, и вы нашли для себя что-то полезное.

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

    Желаю профессиональной верстки вашим сайтам и блогам!

    SEO-верстка сайта

    SEO-верстка сайта — это верстка html-кода страниц сайта, где приоритетное значение отдается размещению текстовых блоков ближе к началу html-кода страницы. Сайт может выглядеть абсолютно одинаково при совершенно разной верстке страницы. СЕО-верстка основывается на том, что: чем ближе к началу HTML-кода расположен контент, тем он релевантнее с точки зрения поисковой системы .

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

    SEO оптимизированная верстка

    Как вы думаете, при прочих равных, какой сайт лучше подает информацию: тот, где полезный контент начинается на 20 строке html-кода или 320? Навороченный сайт может быть интересен человеку. Первые 3 секунды. Но дальше посетитель начнет искать то, за чем он пришел на страницу. Это наглядно работает на примере лендингов. С поисковым роботом примерно то же самое, только прелюдия в виде 300 станиц кода его не впечатлит, а скорее разочарует.

    Представьте, что чем дальше от начала страницы находится полезная информация, тем меньше интереса к ней проявляет поисковый робот. Ведь зачем мы сделали страницу? Чтобы разместить на ней самую важную в мире информацию. Так зачем ее прятать? Быстрая индексация — один из важных факторов ранжирования страниц по запросам.

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


    СЕО-верстка — примеры

    Как это выглядит на практике. Возьмем примитивную верстку.

    Пример простой верстки:

    Чтобы сделать верстку более SEO френдли, разместим блок content ближе к тегу body.

    Пример SEO-верстки:

    Не углубляясь в тонкости css верстки, меняем местами блоки sidebar и content при помощи свойства float. И вот у нас вместо длинного меню, кнопок репостов и прочей ерунды сразу после хедера, начинается контент.

    При большом желании можно сделать так, чтобы блок content находился в html-коде даже выше блока header. Пишите в комментариях, как по-вашему это можно сделать.

    Верстальщик и СЕО-верстка элементов сайта

    Если верстальщик не заложит в код необходимые для SEO элементы, оптимизация всего сайта может оказаться малоэффективной. Первый и основной элемент страница важный для сео — это title страницы сайта, о котором трудно забыть. Хуже дело обстоит с мета-тегами meta keywords и meta description. Важность этих элементов сложно переоценить, однако их часто недооценивают или вовсе про них забывают. Еще одной важнейшей частью html-страницы являются теги H1, H2, H3. Почему бы не оформить заголовок поста или название товара в интернет-магазине в тег H1, и тем самым указать поисковому роботу на важность элемента. Но нет, тегами h1,2,3 часто пренебрегают или используют их некорректно.

    Сайты, на которых у изображений прописан атрибут ALT встречаются нечасто, хотя alt используется для SEO оптимизации изображений по запросу, и может помочь картинкам сайта попасть на видимые позиции в сервисы вроде Яндекс.Картинки и Google Картинки. Но какое до этого дела верстальщику, если SEO для него — пустой звук. Это же касается атрибута title для ссылок. И еще по поводу ссылок. Трудно винить верстальщика за точную верстку по дизайну, но немаловажно учитывать то, что ссылки на сайте всегда должны иметь нижнее подчеркивание. Да, это не всегда вписывается в дизайн от веб-дизайнера, который не слышал про SEO-верстку. Вопрос неоднозначный.

    Пишите в комментариях, как вам кажется, надо ли подчеркивать ссылки на сайте, все или только в тексте?

    Валидная SEO-верстка

    Во-первых — SEO-верстка должна быть кроссбраузерной (возлюби Internet Explorer 6, как самого себя), чтобы у всех посетителей сайт отображался одинаково.
    Во-вторых — SEO-верстка должна быть валидной. То есть пройти валидацию (проверку на соответствие стандартам W3C). Проверить валидность верстки сайта можно через официальный валидатор W3C.
    Ходит много споров по вопросу важна ли валидность верстки для СЕО оптимизации сайта . Верстка с ошибками — как текст с ошибками. Неграмотный текст — неграмотная верстка. Делайте грамотную SEO-вестку.

    Полезные советы по СЕО верстке

    • Старайтесь оптимизировать верстку, убирая лишние блоки.
    • Оптимизируйте html код страницы.
    • Оптимизируйте таблицы стилей css и выделяйте их в отдельный файл и даже папку.
    • Размещайте на сайте навигацию «Хлебные крошки».
    • Не увлекайтесь тегами B и STRONG. Лучше всего использовать тег strong и только в тексте. Остальное можно выделить стилями.
    • Используйте H1 для заголовка контента. Не используйте в верстке дизайна сайта теги от H2, H3 и т.д. Оставьте их для текстовой части контента.
    • Делайте ссылки на сайте, и особенно в тексте, подчеркнутыми (underline) и отличающимися по цвету от основного текста.
    • Делайте все части контента открытыми по умолчанию, чтобы не приходилось активировать какой-либо элемент, чтобы увидеть контент полностью.
    • Долой портянки! Слишком длинные страницы — зло. Они долго грузятся, плохо индексируются, да и после 5-7 прокрутки вниз у посетителя может отпасть всякое желание листать дальше.

    Старайтесь упрощать и оптимизировать все элементы сайта. Чем сложнее — тем больше ошибок. Старайтесь ставить на первое место контент. Ведь именно ради контента сделана страница. По крайней мере, с точки зрения поисковой оптимизации сайта.

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

    Что такое верстка текста? Основные понятия, принципы и способы

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

    История

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

    Когда цифровые технологии стали развиваться, верстку текста стали производить на компьютерах, появились специализированные программы. Самые популярные из них, которые сегодня используются большинством профессионалов, это AdobePageMaker, Adobe InDesign, Ventura Publishe, CorelDraw, Adobe FrameMaker, Microsoft Publisher. При этом для простейшей верстки текста книжкой Word также подойдет, хоть и является преимущественно текстовым редактором.

    Разновидности верстки

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

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

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

    Требования к книжно-журнальным изданиям

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

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

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

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

    Создание организации и способы верстки текста

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

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

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

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

    Программы для верстки текста

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

    Adobe PageMaker — самая первая издательская настольная система, которая увидела свет еще в 1985 году. Приложение базировалось на графическом интерфейсе пользователя. Разработчики регулярно совершенствовали программу, например, в седьмой версии была добавлена возможность поддерживать печать переменных данных, расширились возможности для экспорта и импорта файлов Microsoft Office, появился модуль импорта файлов PDF.

    При этом в 2004 году официально было объявлено, что разработка PageMaker завершается, но компания будет по-прежнему выпускать и продавать свой продукт. Преемником стала программа Adobe InDesign. Это более усовершенствованная программа верстки, которая позволяла создавать документы для их вывода на типографские машины промышленных масштабов, а при желании на самые простые пользовательские принтеры. Созданные документы можно было экспортировать во всевозможные форматы электронных изданий.

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

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

    Основные правила

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

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

    Сплошной текст верстать совсем несложно. Обратим внимание, что оформление начальных полос при этом может быть трех видов, все это способы верстки текста:

    • со спуском;
    • со спуском, но с инициалами;
    • со шмуцтитулом в виде «шапки».

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

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

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

    Это основные способы преобразования верстки текста, которые можно применять и для сложного текста.

    Как размещать стихотворения в верстке

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

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

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

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

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

    Драматический текст

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

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

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

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

    Верстка таблиц и формул

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

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

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

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


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

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

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

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

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

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

    Размещение иллюстраций при верстке текста

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

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

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

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

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

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

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

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

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

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

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

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

    Вот примерное соотношение размера шрифта для подписей под рисунками или фотографиями:

    • при наборе основного текста 12 кеглем, подписи делаются кеглем в 8 или 10 пунктов;
    • если основной текст набран 10 кеглем, то размер подписи к иллюстрации 8 пунктов;
    • если текст набран 8 кеглем, то размер подписи к рисунку остается таким же.

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

    Ревью верстки: 10 полезных замечаний и советов

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

    Code-review для верстки часто пренебрегают, отчасти, возможно, из-за сложившегося стереотипа, что верстать нужно, набрав побольше воздуха, зажмурившись и раскидываясь хаками и костылями, пока не будет достигнута та самая неуловимая кроссбраузерность. А поддерживать чужую верстку — только человеку с крепкими нервами и достаточным запасом медикаментов.

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

    Ошибка 1: Не продумана структура проектной папки

    Довольно часто верстальщикам ставят задачи постранично и макеты предоставляют тоже постранично. Это иногда порождает иллюзии, что работы мало и вся верстка будет прекрасно себя чувствовать в 2–3 папках, а если нет, то всегда найдется время поправить структуру. Но чем больше блоков и страниц сверстано, чем ближе к релизу и чем больше страниц / компонентов уже интегрировано, тем сложнее что-то изменить.

    Предлагаю с первого же коммита поддерживать прозрачную структуру. Вот пример структуры проектной папки, которую мы использовали на зимней стажировке 2020:

    Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

    Совсем необязательно в точности копировать эту структуру, достаточно обратить внимание на ряд моментов:

    1. Вспомогательные документы, блоки и страницы живут отдельно

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

    В scss общие стили типа reset, или подключения шрифтов, или лейаута верхнего уровня стоит также хранить отдельно от стилей для страниц и блоков. Также целесообразно импортировать все в один документ (например, main.scss) и только этот документ компилировать в css. По объективным причинам таких документов может быть несколько (например, из-за ограничения по количеству селекторов / весу css-документа в IE9 или для поставки специфических стилей для редко встречающихся устройств отдельно от основного документа), но, как и с Jade, не стоит компилировать все подряд.

    2. Jade-блоки = БЭМ-блоки

    Если у вас небольшой опыт работы с шаблонизаторами, это дробление может слегка напугать, но на самом деле работать с большим количеством документов для компонентов гораздо удобнее, чем в одном документе с тремя тысячами строк. Ничто не мешает объединять компоненты в директории, если проект большой. Так компоненты легко переиспользовать и «инклюдить» на разные страницы, а для компонентов с разными состояниями и/или разным контентом (например, для кнопок) можно написать миксин, который может в качестве входных параметров принимать контент, модификатор или значение атрибута.

    В итоге в коде index.jade и других страниц должна быть строчка, указывающая на базовый шаблон, возможно, 1–2 тега верхнего уровня, инклюды и вызов миксинов.

    3. Scss зеркалит Jade

    Если в Jade-директории blocks есть какой-то документ, то стили для него должны находиться в Scss-директории blocks в документе с таким же названием.

    Например, согласно структуре, указанной выше, стили для jade/1_blocks/header.jade должны лежать в scss/3_blocks/header.scss , а не где-то еще. Если следовать этому простому правилу, то вносить изменения будет удобно всем разработчикам на проекте, даже новым.

    Для тех, кому необходимо запушить структуру проектной папки сразу после создания (т.е. когда большая часть папок пуста), напоминаю про существование .gitkeep , документа, который позволит гиту «затрекать» вашу пустую директорию.

    Добавить .gitkeep во все пустые папки можно с помощью этой команды:

    После заполнения папок не забудьте удалить ненужные .gitkeep.

    Ошибка 2: копипаста есть, комментариев нет

    С копипастой нужно быть особенно аккуратным: вдумчиво все перечитать, исправить «под проект» и удалить лишнее. Однажды мне встретилось:

    , при этом обычный содержал совершенно другую строку :).

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

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

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

    Про смешивание пробелов и табов, одинарных и двойных кавычек можно даже не говорить – бездумная копипаста рано или поздно принесет эти прелести в проект (кстати, чтобы поддерживать единый стиль, можно воспользоваться EditorConfig).

    У авторов статей есть такой прием — вычитка, когда написанный текст перечитывают несколько раз, чтобы исправить пропущенные ошибки и перефразировать предложения, которые плохо звучат. Рекомендую активно проводить вычитку своего кода и особенно копипасты. Еще в борьбе с копипастой в стилях может очень пригодиться csscomb.

    Ошибка 3: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss

    Великая сила амперсанда в Sass позволяет писать стили по БЭМ и делать это еще нагляднее. Такой код:

    Будет скомпилирован в:

    Когда есть такой удобный инструмент, даже речи быть не может о повторе и переопределении стилей для одного блока. Если селектор .block уже написан в каком-то документе, то в другом документе его быть не должно. Встретиться снова этот селектор может только в медиазапросе (причем, за редким исключением, медиазапрос должен находиться в этом же документе), подробнее о медизапросах поговорим чуть позже.

    Блок — это отдельный компонент, который не знает о других блоках и их расположении.

    «Блок — логически и функционально независимый компонент страницы, аналог компонента в Web Components… Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.» (источник)

    Такой код будет ошибочным, т.к. состояние одного блока влияет на элемент в другом блоке:

    Если возникает необходимость так написать, значит, что-то пошло не так на этапе именования, нужно незамедлительно вернуться к Jade и исправить атрибуты class так, чтобы каждый блок был независимым. Если же заплатка нужна срочно и времени на изменения разметки нет, то оставьте комментарии TODO в обоих документах: в scss и в jade.

    Говоря о том, что блок не знает о других блоках, хочется вкратце упомянуть об одном полезном псевдоклассе, о котором постоянно забывают новички. Представьте лейаут верхнего уровня: есть блок с основным контентом и блок aside. Для двух этих блоков указана ширина в %, но на одной странице aside нет и ширина блока с основным контентом должна быть 100%. Тут нам на помощь придет псевдокласс only-child :

    Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

    В случаях, когда only-child не подходит, используйте модификаторы.

    Ошибка 4: не использовать миксины, когда можно использовать миксины

    Миксины очень помогают следовать принципу DRY (Don’t Repeat Yourself), их активно используют в scss для таких абстрактных задач, как сетка, но о них почему-то забывают, когда речь заходит о верстке компонент. Например, у вас есть кнопки разных цветов, у которых на ховере происходит инверсия цвета. Для инверсии можно написать миксин и сделать стили чуточку чище:

    Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

    Также советую обратить внимание на плейсхолдеры, которые, к сожалению, мне пока не встречались в верстке новичков.

    В Jade тоже следует активнее использовать миксины. Например, для svg-спрайтов:

    Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

    Ошибка 5: беспорядок в медиазапросах

    Частая ошибка — смешивать mobile-first и desktop-first подходы. Сейчас, когда IE8 перестал фигурировать в спеках, можно смело переходить на mobile-first. Если макеты готовы только для десктопа, попробуйте повлиять на дизайнера, ссылаясь, например, на эту книгу. В любом случае, будете вы использовать min-width или max-width , используйте что-то одно. Иначе в какой-то момент станет тяжело отслеживать логику изменения стилей, а значит, проблематично поддерживать верстку.

    Кроме того, не стоит писать медиазапросы по хардкоду, используйте как минимум переменные для брейкпоинтов. Т.е. вместо:

    Переменные для брейкпоинтов стоит хранить в отдельном документе или в layout.scss. Можно пойти дальше, прочитать эту статью и выбрать один из предложенных подходов (или написать свой).

    В scss есть возможность вкладывать медиазапросы в правила. Например:

    Это будет скомпилировано в:

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


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

    Ошибка 6: не интересоваться UX-проектированием

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

    Для начала предлагаю обратить внимание на типичную ошибку новичка: ссылки и кнопки маленького размера, между ними мало пространства. Это ок, если взаимодействие происходит мышкой, но совершенно не годится, когда речь идет о тач-устройствах. Многократные попытки попасть по ссылке, которые в результате приводят к попаданию по соседней ссылке, очень быстро выводят пользователей из себя. Наверняка каждый из нас бывал в такой ситуации, и первое, что хочется сделать, — покинуть неудобный сайт. Чтобы такого не происходило с вашими пользователями, советую почитать гайдлайны от Google или SmashingMagazine.

    Ошибка 7: все в пикселях, даже font-size

    Советую сделать (если вы еще нее сделали) переход с px на em и rem для таких значений, как:

    • размер шрифта и высота строки,
    • размеры иконок,
    • размеры кнопок,
    • вертикальный ритм.

    В рамках БЭМ для блока: rem для размера шрифта блока, em — для остальных величин блока. Для элемента есть 2 стратегии:

    1. em для размера шрифта, если структура html уже утвердилась и вряд ли добавится / убавится еще один уровень вложенности,
    2. rem — если в рамках блока вероятны изменения (перемещение элементов, добавление или удаление оберток и т.п.).

    Чтобы понять разницу между единицами изменения или выбрать между em и rem, предлагаю обратить внимание на канал DevTips, на котором в весьма непринужденной форме объясняются основы верстки.

    Также с псевдоэлементами и em стоит быть осторожней:

    «Если в IE9+для одного и того же псевдоэлемента задать размер шрифта через разные селекторы, то он просто перемножит все размеры шрифтов.» (источник)

    Ошибка 8: не думать о переполнении и предельных значениях

    Верстая по макету, мы имеем дело с идеальной ситуацией. Так новички довольно часто забывают про угрозу переполнения, т.е. когда контент не помещается в блок или элемент и выходит за его пределы. Эту ситуацию нужно срочно исправлять, ведь верстальщик — это еще и своего рода переводчик интерфейса с языка дизайнерского на язык, понятный программистам. Поэтому очень важно в процессе верстки выявить предельные значения объема текста для кнопок, заголовков и прочих элементов с ограниченной вместимостью. Об этих предельных значениях стоит сообщить разработчикам (как минимум написать комментарий в HTML) и по возможности ограничить переполнение в css:

    Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

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

    Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

    Можно также с надеждой смотреть в сторону object-fit, однако у этого свойства пока довольно слабая поддержка.

    Ошибка 9: уделять недостаточно внимания графике

    Графику обычно делят на 3 части: иконки, изображения контента, фоновые изображения. С фоновыми изображениями у новичков обычно проблем не возникает, а вот с иконками и контентными изображениями все не так хорошо.

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

    Контентные изображения, например, фото товара, — главная причина большого веса сайтов. На десктопах (особенно на экранах с большой плотностью пикселя) нам нужны изображения в большом разрешении. Их вес обычно не вызывает проблем, т.к. в основном десктопы используют высокоскоростные подключения с неограниченным трафиком. Пользователи мобильных устройств же вынуждены выкачивать лишние мегабайты изображений. А если у них низкая скорость передачи данных, бывают обрывы? Получаем не очень довольных пользователей. Остается только надеяться, что они не в роуминге. Эту ситуацию легко исправить с помощью атрибута scrset у или с помощью тега

    . Постепенно поддержка этих возможностей становится лучше, а для старых браузеров есть полифил. Для подробного ознакомления с техникой поставки разных контентных изображений для разных устройств советую бесплатный курс «Responsive images» от Udacity.

    Ошибка 10: Pixel Perfect? Не, не слышал.

    Не зря этот пункт последний в этой статье — о Pixel Perfect часто забывают (кстати, не только новички). С одной стороны, верстальщик почти всегда действует, опираясь на макет, с другой — немножко от этого макета отступает. В процессе работы над проектом какие-то компоненты могут меняться местами, от каких-то отказываются, появляются новые и т.п. Размеры элементов могут немного меняться в зависимости от контента (смотри переполнение и предельные значения). В конце концов, дизайнер может допустить ошибку при выравнивании элементов по сетке. Все это – адекватные причины, чтобы локально отказаться от pixel perfect и верстать «по ситуации». В идеале каждое отступление от макета должно быть задокументировано.

    В случаях, когда нет причин отклоняться от макета, стоит четко ему следовать (помочь в этом может, например, расширение для Chrome — Pixel Perfect).

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

    Как грамотно использовать rem в адаптивной вёрстке?

    Я типа начинающий верстальщик, и у меня есть некоторые проблемы с пониманием мира.

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

    И, поскольку для текста читабельнось важнее красивого расположения, следовало бы все «типографские размеры» приводить в rem. При этом к типографским размерам по идее относятся также отступы margin у всех текстовых элементов и отступы padding у их контейнеров, а также иногда ширина контейнеров (чтобы примерно попадать в количество букв), и наверно, что-то ещё.
    В результате образуется куча гемора при сочетании графических размеров в пикселах и типографских в непредсказуемых rem. И это в добавок к «композиционным» размерам в процентах. Особенно если у дизайнера получилось, что базовый шрифт не 16px, а какие-нибудь 14.25px±50%. Как вы вобще с этим работаете?

    Вопрос — насколько эта заморочка корректна и оправдана.
    1. Реально ли пользователи подстраивают размер шрифта?
    2. Что именно относить к «типографским размерам» которые надо бы в em/rem?

    Верстка с иллюстрациями

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

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

    Правило:иллюстрация должна смотреть на полосу.

    Эта емкая формулировка может быть не слишком понятна, так что поясним ее. Если иллюстрация является портретом или на ней изображен предмет с четко заложенным движением (например, автомобиль), то есть разница в том, с какой стороны полосы ее расположить. Взгляд человека должен быть обращен к центру полосы, и точно так же, к примеру, любые транспортные средства должны иметь перед собой полосу, чтобы «ехать» (рис. 4.6).

    Рис. 4.6. Неправильное (слева) и правильное (справа) размещение иллюстрации на полосе

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

    Примечание

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

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

    Открытую версткууместно использовать при большом размере иллюстраций, размещая изображения вверху или внизу страницы на всю ширину полосы, реже – слева или справа (на всю высоту).

    Такая композиция позволяет зрительно «облегчить» полосу. Темные иллюстрации чаще размещают снизу (чтобы они не «задавливали» текст), а светлые чаще ставят вверх страницы (наоборот, чтобы текст не «давил» на иллюстрации) (рис. 4.7). Единых правил по размещению иллюстраций при открытой верстке нет, и во многом дизайнеру придется полагаться на собственный вкус и знания композиции.

    Рис. 4.7. Открытая верстка крупных иллюстраций

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

    Рис. 4.8. Открытая верстка мелких иллюстраций

    Закрытая версткапредполагает, что иллюстрация зажата между строками текста, расположенными сверху и снизу. Такая композиция более тяжелая, однако часто используется, если иллюстрации выполнены на светлом (белом) фоне и у них не видно прямоугольных границ (рис. 4.9). Строки текста позволяют зрительно «ограничить» иллюстрацию, и можно не создавать рамку вокруг изображения.

    Рис. 4.9. Закрытая верстка

    Верстка в оборкуиспользуется, если ширина иллюстрации меньше ширины полосы. Есть выбор – оставить пустое пространство по сторонам (иллюстрация обычно выставляется по центру полосы) или заполнить пустое место текстом (рис. 4.10). Оборкой как раз и называется текст, обтекающий иллюстрацию с одной стороны.

    Рис. 4.10. Верстка в оборку

    Верстка в оборку имеет смысл в том случае, если для текста осталось достаточно пространства. Бессмысленно втискивать короткие строчки в 2–3 см свободного места; в этом случае необходимо либо уменьшить иллюстрацию по ширине, либо отказаться от верстки в оборку.

    Иллюстрацию с белым фоном текст может обтекать не по прямоугольной форме, а по произвольному контуру рисунка (это еще называется фигурным обтеканием). Во времена «ручной» верстки такие операции были очень трудоемки, однако с появлением компьютерного макетирования обтекание по произвольному контуру создать гораздо легче (рис. 4.11).

    Рис. 4.11. Верстка в оборку с фигурным обтеканием текстом

    Правило:иллюстрация никогда, никогда не может разрывать строку.

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

    Рис. 4.12. Ошибка верстки: разрыв строк заверстанной иллюстрацией

    Глухая версткавозможна при многоколоночной верстке, когда иллюстрация располагается между колонками и ни одной стороной не выходит к полям (рис. 4.13). Этот способ по понятным причинам используется чаще других в газетной практике, а в журналах применяется реже из стремления сделать полосу визуально более легкой.

    Рис. 4.13. Глухая верстка

    Как уже говорилось, поля страницы у газеты были «неприкосновенными» – по техническим причинам там нельзя ничего размещать. У журнала и книги поля можно использовать в практических целях, например расположить на них иллюстрации.

    Примечание

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

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

    Рис. 4.14. Верстка с выходом на поле

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

    Рис. 4.15. Верстка на полях

    Верстка под обрезпредполагает, что иллюстрация заполняет поле до конца. Этот метод применяется только для крупных иллюстраций, поскольку они должны не просто доходить до края страницы, но и выступать за край на несколько миллиметров – поэтому потери при обрезке страницы неизбежны (рис. 4.16).

    Рис. 4.16. Верстка под обрез

    Примечание

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

    В богато иллюстрированных журналах под иллюстрации могут отводить полные страницы. Такие иллюстрации называются полосными (если расположены вертикально) (рис. 4.17) или поперечными (если горизонтальная иллюстрация повернута на странице на 90°). Они часто верстаются под обрез. Иногда под фотографии киноактеров, музыкантов, под рекламные плакаты фильмов отводят целые развороты. Часто такие фотографии размещаются в середине журнала – на цельных разворотах, которые читатели могут аккуратно вынуть из журнала и использовать как плакат. Такие иллюстрации называются распашными (от слова «распахиваться») и также обычно верстаются под обрез. Другим вариантом распашной иллюстрации является пример на рис. 4.18.

    Рис. 4.17. Полосная иллюстрация

    Рис. 4.18. Распашная иллюстрация

    Здесь иллюстрация «проходит» через корешок, не полностью занимая площадь обеих страниц.

    Не нашли то, что искали? Воспользуйтесь поиском:

    Лучшие изречения: При сдаче лабораторной работы, студент делает вид, что все знает; преподаватель делает вид, что верит ему. 9336 — | 7292 — или читать все.

    188.64.174.135 © studopedia.ru Не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования. Есть нарушение авторского права? Напишите нам | Обратная связь.


    Отключите adBlock!
    и обновите страницу (F5)

    очень нужно

    Верстка сайта на основе полученных знаний по Html и CSS (пример использования директив @import и @media)

    Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Наша сегодняшняя задача состоит в том, чтобы сформировать так называемый макет сайта не с помощью Html таблиц (вчерашний день верстки), а с помощью элементов Div. Т.е. нам нужно будет на дивах построить верхнюю часть (шапку), нижнюю часть (футер) и три колонки для примера.

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

    Казалось бы, что повторяться не стоит, но я и не собираюсь этого делать. Сегодня будет описан принципиально другой способ верстки сайта, а также параллельно рассмотрим назначение директив @import и @media (с собачкой впереди) в уже изученном нами (на базовом уровне, конечно же) языке стилевой разметки CSS.

    Верстка сайта на блоках — а оно вам надо?

    Более того, мы с вами на текущий момент уже успели разобрать и язык Html по косточкам, опираясь при этом на первоисточник в лице консорциума W3C. Однако, думаю, что не все прониклись моими увещеваниями и сразу же бросились изучать Справочник CSS для начинающих, а также Учебник Html.

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

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

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

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

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

    Общий успех веб проекта зависит зачастую именно от таких мелочей, разбирательство с которыми легко (а зачастую и очень даже приятно) можно задвинуть в дальний угол. Я вот только одного не могу вспомнить — что мне позволило перешагнуть тот невидимый барьер, сотканный из лени и вялости мышления. Возможно, что просто так легли карты. Поэтому пожелаю вам тоже преодолеть этот барьер, но не могу сказать как именно это сделать.

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

    Итак, приступаем к верстке. Для начала создаем и обзываем папку для хранения файлов нашего будущего веб проекта, а затем создаем внутри нее текстовый файлик с расширением .html и названием index. Также создаем внутри этой папки еще одну, которую обзываем CSS (в ней будут жить наши внешние файлы стилей).

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

    Ну, а теперь скопируйте приведенную чуть ниже «рыбу» в свой index.html. Для работы с кодом довольно удобно использовать универсальный редактор Notepad ++ с подсветкой, хотя, при обладании навыком работы, более функциональным решением может оказаться Дримвьювер:

    Вначале как всегда должна идти директива doctype, назначение которой подробнейшим образом описано в приведенной по ссылке статье. Внутри тега meta мы указываем кодировку текста utf-8 для его правильной интерпретацией браузером, при открытии в нем нашего проекта. Каждый документ в сети Интернет должен иметь заполненный тег Title (заголовок страницы), поэтому мы и его добавили в «рыбу».

    Далее следует служебная гиперссылка link, с помощью которого мы подключаем внешний файл CSS стилей к этому Html документу (нюансы описаны по приведенной ссылке).

    Ну, а между тегами Body должен размещаться, собственно, контент, который будет вставляться в файл непосредственно (в случае статичного сайта, например, как на Яндекс Народе), или же опосредованно из базы данных (в случае сайта динамического, на основе какой-либо бесплатной CMS (движка)).

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

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

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

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

    Используем директиву @import при верстке

    Суть его заключается в использовании директивы @import, с помощью которой из одного файла с CSS правилами можно будет подключить другой файл стилевого оформления. В этом случае наша верстка будет удовлетворять общепринятым правилам. Итак, допустим, что мы в начале osnovnoy.css прописываем подключение общего файлика стилевого оформления:

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

    Теперь при интерпретации этого кода браузером пользователя, на место директивы @import встанут те CSS правила, которые в файлике obdhiy были вами прописаны. Дальше браузер уже будет рассматривать правила из самого этого файлика osnovnoy, которые при возникновении конфликта будут иметь больший приоритет в силу своего более низкого расположения в коде. Вот такие вот маленькие хитрости верстки сайта на простом примере.

    Давайте начнем верстать поэтапно, задавая Html элементы в index.html и описывая их в общем файлике obdhiy.css. В нем пока оставим лишь одну директиву @import для вызова общего стилевого файла. Для начала зададим один внешний контейнер, в котором будут жить все остальные элементы нашего макета. Изменяя или выравнивая такой контейнер мы будет осуществлять действия над всем макетом, а внутренние элементы будут под него подстраиваться.

    Открываем и закрываем теги Div, а также прописываем в открывающем теге ID (уникальный идентификатор, а бывает еще и CLASS) с наиболее приглянувшимся вам значением (я выбрал «kont»). Использование именно ID обусловлено тем, что другого такого контейнера у нас просто быть не может.

    Значение этого ID будет служить селектором (читайте про них в приведенной в предыдущем абзаце статье), который подскажет браузеру, что прописанные для него свойства следует применять именно к этому внешнему контейнеру. Перейдем теперь к прописыванию данных правил для этого внешнего контейнера в obdhiy.css:

    Вначале прописаны несколько стилевых правил для тэга Html (можно было бы и для Body), которые задают некоторые свойства для всего сайта. Background и color задают, соответственно, цвет фона и текста для всех веб страниц (читайте про способы задания цвета в Html и CSS коде), правило font задает начертание и размер шрифта, который будет использоваться по умолчанию, если для каких-то элементов не будет описан font отдельно.

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

    Давайте посмотрим, что получилось в итоге (откройте для этого index.html в любом браузере):

    Теперь давайте выровняем наш макет по середине. Для этого достаточно задать margin со значением Auto. Для нашего макета контейнером будет являться в конечном итоге область просмотра, и при значении Auto как по вертикали, так и по горизонтали, умный браузер в первом случае сбросит внешние отступы в ноль (по вертикали), а вот по горизонтали он сделает отступы слева и справа равными, что нам как раз и требуется.

    Повторяться про 8 пикселей у тега Body не буду, ибо вы сами сможете это прочитать, например, в статье про правило Position. Если захотите этот отступ убрать, то пропишите в вашем стилевом файле для селектора body margin:0.

    Создаем блоки для нашего будущего макета

    Теперь давайте продолжим верстку нашего сайта и добавим внутрь элемента Div с >

    Вступительные теги из «рыбы» я опустил, чтобы не повторяться, но вы их, естественно, оставьте. Элементы с ID header и footer будут в нашей верстке отвечать за «шапку» и «подвал» сайта. С серединкой же будет чуток сложнее, ибо для ее формирования мы сразу же используем два блока: с ID vnesh и вложенный в него vnutr.

    Осталось теперь только описать в стилевом файле obdhiy.css все это безобразие, иначе четыре элемента блочной верстки так и будут следовать на веб странице друг под другом.

    Т.к. наши блоки пока не будут содержать контента, то мы им временно зададим высоту с помощью Height (при этом для блока с ID kont высоту уже можем убрать за ненадобностью, но добавим для него внутренний отступ padding в десяток пикселов), а также цветовой фон (для наглядности) с помощью все того же правила Background.

    Среднюю часть нашего макета мы отодвинули на десяток пикселей сверху и снизу (читайте про Margin (top, bottom, left, right) по приведенной чуть выше ссылке), а справа и слева дополнительного отступа не задавали (margin:10px 0;). В результате получим следующий макет:

    Красота, да и только. Следующим этапом верстки станет создание колонок внутри средней области. Наша задача состоит в том, чтобы получить три колонки одинаковой высоты. Когда в фаворе была табличная верстка, то сделать это было не просто, а очень просто, т.к. ячейки таблицы (td или th) по высоте были друг с другом связаны.

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

    У браузера Интернет эксплорер есть ограничение на использование одной фоновой картинки для одного Html элемента, поэтому нам и понадобилось для создания правой и левой колонки создавать два вложенных блока — vnutr и vnesh. Но давайте все посмотрим на примере, иначе объяснить будет сложновато.

    Итак, в нашем способе верстки сайта, для создания правой и левой колонки придется вспомнить, как работает сборное правило Background (см. ссылку выше). Вспомнили? Тогда берем заранее подготовленные изображения цветных полосок размером, например, 200 на 20 пикселей. Обычно такого типа графику принято сохранять в формате растровой графики Png для получения наилучшего соотношения размер-качество.

    Я, для примера, сделал полоски с градиентной заливкой, чтобы они не ассоциировались с заливкой фона блочного элемента обычным цветом (через background-color) и назвал их left.png и right.png:

    Как я уже говорил чуть выше, в той папке, где у вас лежит index.html, необходимо создать подпапку (например, images) и закинуть в нее наши полоски для левой и правой колонок. Все, почву для продолжения верстки мы подготовили и пора приступать к стилевому оформлению наших будущих колонок трехколоночного макета.

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

    Для блока с ID vnesh мы назначили фоновым изображением right.png, при этом разрешив ему копировать себя по вертикали (читайте про Background-repeat) и прижав его вплотную к правому краю блока (позиционирование по вертикали нам не важно, т.к. по этой оси осуществляется размножение картинки — читайте про Background-position по приведенной чуть выше ссылке).

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

    Для блока с ID vnutr мы назначили фоновым изображением left.png, при этом разрешив ему копировать себя по вертикали и спозиционировав его в крайне левое положение, которое используется по умолчанию (позиционирование по вертикали нам не важно, т.к. по этой оси осуществляется размножение картинки).

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

    Продолжаем верстку и добавляем колонки в макет

    Хотя и кажется, что мы получили то, что хотели, однако это не так. Фоновые картинки не являются колонками для будущего контента, увы и ах, но колонки нам еще предстоит создать. Для этого опять открываем на редактирование index.html и добавляем три блока Div внутрь уже имеющего блока с ID vnutr. Не мудрствуя лукаво, присвоим им вполне говорящие ID — left, right и center:

    Да, я еще один блок добавил с ID rasporka, назначение которого станет понятно по ходу дела. Чтобы не задавать специально высоту для пустых колонок, я добавил в них некий бредовый текст, который и позволит нам наглядно лицезреть колонки с контентом на веб странице, но только после того, как мы оформим их должным образом в нашем стилевом файле obdhiy.css.

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

    Сразу оговорюсь, что пришло время убрать задание высоты через Hight в селекторе vnutr, ибо это дело мы ставили для наглядности. Левую колонку мы заставляем с помощью CSS правила float плавать влево, а правую — вправо. Ширину колонок мы выбираем равной ширине фоновых картинок right.png и left.png (в нашем случае она одинакова и равна 200px), о которых мы говорили чуть выше.

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

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

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

    Левая и правая колонки представляют из себя плавающие элементы, которые по определению не взаимодействуют с блочными тегами (DIV как раз является блочным, ибо для него по умолчанию прописано Display block).

    Следовательно, переполнение левой или правой колонки не вызовет пропорциональное увеличение блоков с ID vnutr и vnesh (плавающие элементы на высоту своих родителей или, другими словами, контейнеров не влияют), а значит контент вылезет за их пределы, наедет на футер и вообще выйдет за границы макета. Беда.

    Но у нас имеется четвертый блочный элемент с ID podporka, который не содержит никакого контента (а значит и не будет виден на веб странице) и которой предназначен именно для устранения этого казуса. В коде obdhiy.css мы пропишем для этого селектора простое правило clear:both. Вследствие этого блок с ID podporka приобретет полезное нам свойство — он будет учитывать любой плавающий перед ним элемент (имеется в виду, расположенный выше в коде).

    Т.о. при увеличении контента в правой или левой колонке произойдет пропорциональное смещение вниз элемента с ID podporka, а т.к. этот тег уже не является плавающим, то блоки с ID vnutr и vnesh будут его учитывать и пропорционально увеличивать свой размер по вертикали:

    Теперь вроде бы все работает правильно. Однако, наша верстка сайта еще не закончена. Допустим, что мы сделали в index.html таким образом макет главной страницы, а вот для какого-нибудь другого раздела вид макета должен будет отличаться (например, там должно быть не три, а только две колонки). Как выходить из этой ситуации?

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

    Ну и файлик с таблицами каскадным стилей нам придется новый использовать, например, razdel.css. Вот именно в них мы и будем вносить изменения, а заодно посмотрим поподробнее, как же именно использовать директиву @import в таких случаях.

    Давайте начнем с razdel.html:

    Мы изменили заголовок страницы Title и поменяли название подключаемого файлика стилей на razdel.css. При этом, естественно, необходимо будет в папке CSS этот самый файл стилевой разметки создать. Осмелюсь вам напомнить, что для index.html мы подключали стилевую разметку через osnovnoy.css, в котором была прописана одна единственная директива @import для подгрузки правил из файлика obdhiy.css:

    Мы не будем оригинальными в нашей умной версте и в самом начале нового (еще пустого) стилевого файла пропишем абсолютно такую же директиву. Тем самым мы получим опять-таки трехколоночный макет, однако, дописав чуть позже всего несколько правил, мы запросто превратим его в двухколоночный. Даже не так. Мы создадим еще один файлик в папке CSS с названием dvekolonki.css и следующим содержанием:

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

    Ну вот, теперь для завершения верстки двухколоночного макета осталось только этот самый dvekolonki.css подключить в файлике razdel.css, окончательное содержимое которого будет теперь выглядеть так:

    Все правила, стоящие в коде ниже (из dvekolonki.css), будут иметь приоритет более высокий, а значит именно их действо мы и будет наблюдать на веб странице. В результате при открытии razdel.html вы уже сможете наблюдать двухколоночный вариант макета:

    Собственно, дополнительной нашей задачей было рассмотреть варианты использования директивы @import в современной верстке сайтов, с чем, я считаю, мы справились.

    Теперь еще осталось продемонстрировать работу директивы @media, о которой я заикнулся в начале статьи. К верстке она имеет весьма опосредованное отношение, но все же не сказать о ней было бы, наверное, недальновидно.

    Верстка макета для печати с помощью директивы @media

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

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

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

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

    Имеется две возможности указать с помощью media то, для какого именно устройства нужно применять данные стили. Можно указать атрибут media в теге Link, с помощью которого подключаются внешние стилевые файлики. Но в этом случае браузер будет делать лишний запрос к серверу, что не есть хорошо. Однако, такой способ имеет право на жизнь и выглядеть это безобразие будет примерно так:

    У атрибута media можно использовать и другие значения:

    1. all — используется по умолчанию и означает, что данный файл стилей нужно будет использовать для абсолютно любых устройств вывода
    2. braille — устройства для чтения пальцами (для слепых или слабовидящих)
    3. handheld — КПК, смартфоны и прочая мелочь
    4. print — принтеры
    5. screen — экраны мониторов пользователей, на которых они будут просматривать ваш сайт
    6. speech — речевые браузеры
    7. projection — проекторы
    8. tty — телетайпы и прочая рухлядь, на которой нельзя использовать размерность в пикселах
    9. tv — старый добрый телевизор

    В приведенном чуть выше примере мы, с помощью атрибута Media, подключили к веб документу отдельный файл стилей для отображения на мониторе и отдельный для вывода на печать (print.css). Нам как раз подобное и нужно реализовать в этом уроке верстки, но лучше будет сделать это немного другим способом, с использованием именно директивы @media прописанной в файле стилей.

    Если вы обратили внимание, то при таком способе верстки, который выбрали мы (с использованием @import), у нас имеется общий файлик стилей, который подключается всегда через эту самую директиву — obdhiy.css. Вот именно в нем мы и начнем колдовать.

    @media имеет свой собственный синтаксис:

    В нашем файлике obdhiy.css не будем заключать все уже имеющиеся правила внутрь директивы @media screen, достаточно в самом его конце просто дописать необходимые CSS правила для вывода документа на печать с помощью @media print:

    Если вы помните, то селектор * означает применение всех этих стилевых правил для абсолютно всех элементов Html кода. Правда такой селектор имеет минимальный из возможных приоритетов, поэтому задавая цвет для всех элементов черным, а фон прозрачным, с помощью правил color и background, мы вынуждены не доводить дело до подсчета приоритетов с помощью установки !important.

    Для селектора Html мы прописали задание умолчательного шрифта в абсолютных единицах pt (пунктах), ибо принтеру так понятнее. Ну и шрифт задали любой с засечками (serif). C помощью display:none мы запретили отображения обвеса (шапки, футера и колонок), а с помощью margin:0 разрешили контенту из средней колонки занимать все доступное пространство по ширине.

    Последний селектор a[href]:after заковырист и, чтобы лучше понять о чем именно он говорит, советую пробежаться по следующим публикациям про селекторы атрибутов ([href]) и селекторы псевдоэлементов (after). Но нужен он нам для довольно простой цели — увидеть на бумаге, куда именно ведут гиперссылки.

    Псевдоэлемент after позволяет осуществлять генерацию контента во время построения документа браузером. After позволит нам добавить URL адрес гиперссылки сразу после того места, где эта самая ссылка проставлена. Делается это с помощью специального CSS правила content, которое работает только для двух псевдоэлементов: after и before.

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

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

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

    Илон Маск рекомендует:  Что такое код asp logextfiletime
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL