Путь верстальщика: с нуля до сеньора

2.9 Окружения

Для верстки специальных видов текста LATEX определяет множество  окружений для разных типов форматирования:

beginназвание     текст    

endназвание


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

В следующих разделах рассказывается обо всех важных окружениях.

2.9.1 Список, перечисление и описание

Окружение itemize подходит для простых списков, окружение enumerate — для нумерованных списков, а окружение description — для описаний.

\flushleft
\begin{enumerate}
\item Вы можете как угодно 
смешивать окружения списков: 
\begin{itemize}
\item Но это может смотреться 
глупо.
\item С минусом.
\end{itemize}
\item Поэтому помните:
\begin{description}
\item вещи не станут
умнее от помещения в список.
\item вещи, однако,
вполне можно представить 
списком.
\end{description}
\end{enumerate}

Типы иллюстраций при верстке журналов

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

Фиксированный макет — ширина Веб- страницы выставлена в неизменное значение, не зависящее от разрешения экрана пользователя. Разработчику сайта ширина окна браузера пользователя неизвестна, поскольку она может меняться в самых широких пределах. Ширина зависит от разрешения монитора, длины его диагонали, размера окна. Необходимо определить, на какое минимальное разрешение экрана монитора рассчитан сайт(Стат. используемых разрешений монитора, liveinternet.ru — разрешения мониторов). Определившись с ответом на этот вопрос, мы получаем конечное число пикселей – особенно важным параметром является количество пикселей, характеризующих ширину. От этого конечного числа нужно вычесть 20 пикселей (ширину вертикальной полосы прокрутки, которая присутствует в браузерах по умолчанию) – и мы получим ширину макета сайта в пикселях. То есть если расчетное разрешение по ширине равно 1024 – то ширина макета должна быть 1004(рекомендуется 1000, 980-960) пикселя (не больше), или же если 1280 – то 1260, и так далее.

При разрешении экрана монитора 800×600 наиболее распространенной является ширина в 760 пикселей. Для 1024х780 пикселей 960 – 980 пикселей.

Для создания фиксированного макета, следует продумать некоторые предварительные моменты:

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

Ширина элемента в браузере складывается из значений ширины самого блока (width), отступов (margin), полей (padding) и границ (border). .

Табличная вёрстка

Основная статья: Табличная вёрстка

Преимущества и недостатки

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

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

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

Кроме того, использование таблиц для целей оформления не соответствует концепции семантичной вёрстки, подразумевающей использование элементов (тегов) в соответствии с их смыслом, семантическим значением. Элемент <table> и сопутствующие (<tr>,<th>,<td> и др.) предназначены для разметки табличной информации (то есть такой, в которой имеется смысловая связь между элементами, принадлежащими одному столбцу или одной строке). W3C, как разработчик языка HTML, призывает использовать HTML для логической разметки информации, а оформление (в том числе позиционирование различных блоков) описывать отдельно от (X)HTML-разметки (с помощью CSS, например).

Распорки

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

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

Общие правила

  1. Верстка должна быть, как правило, единообразной во всем издании. Например, отбивки от текста заголовков одного значения должны быть примерно одинаковыми на протяжении всего издания, спуски равнозначных начальных полос равны и т.д.
  2.  Полосы набора должны быть приводными, т. е. границы и строки лицевой (нечетной) полосы должны совпадать с границами и строками оборотной (четной) полосы. Поэтому: • а) высоту частей текста, набранных шрифтом по кеглю меньшим или большим, чем шрифт основного текста, необходимо доводить при помощи отбивок до размера, кратного кеглю шрифта основного текста; • б) высоту любых элементов полосы (заголовков, клише, таблиц, формул и т. д.) при помощи отбивок также нужно доводить до размера, кратного кеглю шрифта основного текста; • в) нельзя прокладывать шпоны между абзацами или строками текста ради того, чтобы довести высоту полосы до заданного размера: это нарушит приводность полос.
  3. Полоса не должна начинаться «висячей» строкой, т.е. концевой строкой абзаца, особенно неполной (причины—пауза при переходе со страницы на страницу непосредственно перед следующей паузой—началом нового абзаца, что ухудшает условия чтения, и нарушения прямоугольности полосы).
  4.  Полоса, особенно нечетная, не должна заканчиваться первой строкой абзаца.
  5.  Последнюю строку нечетной полосы не следует заканчивать переносом, поскольку перенос через страницу усложняет чтение. От этого правила разрешается отступать, если, следуя ему, придется нарушить другие технические правила набора или верстки.
  6. 6. При выгонке и вгонке строк по техническим причинам нельзя увеличивать или уменьшать пробелы между словами сверх допускаемых пределов.

Особенности профессии

Верстальщик посредством кода HTML, CSS и JavaScript создает HTML-шаблон, реализация которого состоит из нескольких этапов:

  • анализ графического дизайна сайта;
  • подборка модели шаблона;
  • нарезка графических спрайтов;
  • сборка HTML-шаблона.

В настоящее время существует большое количество компьютерных программ, которые автоматизируют труд верстальщика, различные текстовые редакторы с подсветкой кода, визуальные редакторы (Notepad++, Adobe Dreamweaver), front-end фреймворки (наборы фрагментов кода и библиотек классов для ускоренной разработки макета сайта путем прототипирования — ZurbFoundation-4 и т.п.). Они позволяют писать большие фрагменты кода в наглядном режиме, то есть результат каждого этапа работы можно наблюдать в отдельном окне. Но профессиональный HTML-верстальщик этими программами не пользуется. Он должен уметь использовать кодировку HTML вручную, без помощи визуальных редакторов, чтобы обеспечить максимальную корректность кода в минимальном весе.


HTML-верстальщик должен знать каскадные стилевые таблицы CSS, владеть JavaScript и базовыми навыками web-программирования на языках PHP, Perl или Java, а также основными графическими редакторами Photoshop, Fireworks, Gimp. Опытный верстальщик может создать небольшой сайт, используя текстовый редактор Microsoft Word c минимальным количеством средств и инструментов.

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

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

Модульность и виды подходов к вёрстке

Типовые веб-макеты
Одноколоночный Двухколоночный Трёхколоночный

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

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

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

Семантическая вёрстка страницы

Основными инструментами для вёрстки являются фреймы, таблицы и div. В стандарте HTML5 фреймы больше не поддерживаются, а для работы стали доступны «семантические» блоки: header, main, nav, section, article, aside, footer. Однако блоки не дают определённых преимуществ, а являются лишь «синтаксическим сахаром».

Табличный подход

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

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

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

На момент 2011 года табличная верстка считается устаревшей.

Вёрстка слоями

Слой (от имени тега <layer>) — разработка компании Netscape, использованная в браузере Netscape Navigator. Тег позволял показывать или скрывать его содержимое, устанавливать положение относительно окна браузера, накладывать слои друг на друга и включать содержимое блока из файла. В спецификацию HTML не был включён.

Блочная вёрстка

Блочная вёрстка — верстка с помощью тега <div> и описывающего их множество таблицы стилей (CSS). Тег появился вследствие сознательного отказа консорциума «CSS Positioning (CSS-P)» от тега <layer>, чтобы создать аналогичный тег, но с поддержкой CSS в духе остальных тегов. С помощью блочной верстки реализуют концепцию семантической вёрстки.

Вёрстка фреймами

Основная статья: Фрейм (HTML)

Вёрстка фреймами — верстка с помощью одноимённого тега <frame>, который имеет иной способ позиционирования, а внутри себя включает отдельные html-страницы.

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

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

3 правила адаптивной верстки

  1. Задавайте метатег viewport
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    , таблица возможных параметры мета-тега viewport:

  2. CSS Media Queries: стили для мобильного устройства с разрешением указанным в свойствах @media
    @media only screen
    and (min-device-width 320px)
    and (max-device-width 568px) {
        .header {
            background-color #257965;
        }
    }
  3. Задавайте свойства CSS в процентах, например:
    .reviews {
        width 22%;
        font-size 140%;
        padding-top 2%;
        margin-top 2%;
        margin-bottom 4%;
    }

Табличная верстка

Метод табличной верстки устарел. Основными причинами отхода от такого способа считается огромное количества кода, которое возникает вследствие описания каждой ячейки отдельными тегами. Также стоить заметить, что каждая ячейка обладает стенками, которые необходимо также описать. Код обычной веб-страницы, которая верставется табличным способом, больше в 4-5 раз кода страницы, которая создается блочным методом.

Блочная верстка

Блочная верстка или верстка с помощью слоев.

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

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

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

Коротко о тэгах

Эта статья будет коротенькой, что для меня не характерно Поскольку предназначена она для “своих”, то есть тех, кто проходит бесплатный тренинг в рамках необычного проекта “Одна семья”. и не дошел еще до сорок пятого шага (почему 45-го? А вот узнаете, когда дойдете )

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

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

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

На момент написания этой статьи в проекте “Одна семья” уже зарегистрировалось более 4800 человек и число их растет день ото дня. Так что семья у нас многодетная!


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

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

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

Примеры:

1) в данном случае мы имеем в редакторе заголовок “ИНТЕРЬЕР САНАТОРИЯ” в открывающем и закрывающем его тэге <h> и последующий за ним абзац текста в тэге <p> (по треугольным скобкам машина определяет, что это тэг):

Выглядит эта абракадабра в опубликованной статье так:

2) ну а здесь заключаем текст в элемент оформления “цитата” тэгом <blockquote>, плюс к этому еще и включаем в него ссылку на одну из опубликованных ранее статей:

Вуаля:

Ограничения

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

Многообразие форматов

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

Верстка отличается различными подходами к этому вопросу:

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

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


С этим читают