Одним из наиболее популярных вариантов верстки веб-страниц выступает двухколонный макет, где в левой колонке располагаются ссылки, а в правой колонке — основной контент. Такая схема достаточно традиционна и привычна для пользователей, поэтому также пользуется признанием среди разработчиков (рис. 1).
Рис. 1. Двухколонный макет с навигацией слева
Создание двух колонок происходит с помощью стилевого свойства float со значением left , которое применяется для левой колонки. При этом одновременно следует установить отступ слева для правой колонки, значение которого равно ширине левой колонки плюс расстояние между ними (пример 1).
Пример 1. Создание двух колонок
#leftcol { /* Левая колонка */ float: left; /* Обтекание справа */ width: 200px; /* Ширина колонки */ } #rightcol { /* Правая колонка */ margin-left: 225px; /* Отступ слева */ }
Приведенный способ создания колонок хорош тем, что ширину первого слоя можно задавать как в пикселах, так и процентах. При этом поменяются только значения свойств width и margin-left (пример 2).
Пример 2. Ширина колонки в процентах
#leftcol { /* Левая колонка */ float: left; /* Обтекание справа */ width: 20%; /* Ширина колонки */ } #rightcol { /* Правая колонка */ margin-left: 21%; /* Отступ слева */ }
Окончательный вариант создания макета приведен в примере 3.
Пример 3. Полный листинг
Байки из склепа
Алтарь демона
Утром, при ярком солнечном свете, всё выглядело совсем не так и мрачно, как планировалось, а даже наоборот. От свечей остались одни потёки, «кровь» смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо сохранились только рисунки мелом, но и они были скорее прикольные, чем злые и загадочные. Дети с неподдельным интересом разглядывали изображения, но без тени тех чувств, которые испытали взрослые ночью при луне.
Тем не менее, оказался один человек, на которого работа произвела большое впечатление, - сторож лагеря. Днём он подошёл к автору «алтаря».
Ваша работа? - начал сторож, кивая в сторону площади.
- А что такое?
- Ну, как же... Тут кровь..., перья птицы мёртвой..., знаки какие-то страшные
нарисованы..., а у вас всё же дети маленькие, они испугаться могут...
При использовании отступов и полей помним, что браузер устанавливает ширину слоя с учетом свойств width , border , padding и margin .
Сегодня мы рассмотрим очень простой элемент адаптивной верстки, такой, как текст в два столбца. Поняв смысл, вы сможете делать и три и четыре столбца, которые, достигая заданной минимальной ширины уходят вниз. Естественно, к тексту можно добавлять картинки, да и абсолютно любые элементы дизайна.
Естественно, в столбцы или колонки, можно добавлять не только текст, но и любой другой контент. Еще такую адаптивную верстку блоков называют плавающей. Из-за чего? Читайте дальше и все поймете.
Приведенные ниже примеры текста в два столбца растягиваются на всю ширину контейнера. В моем случае это примерная область контента в блогах WordPress.
Текст в два столбца из редактора WordPress
Я брал сниппет из примера и просто ставил его путем копипаста через встроенный редактор WordPress в публикацию, все отлично работает. Только редактор нужно переключать в режим HTML
Адаптивная верстка. Текст в два столбца без картинок
Можно добавить кнопку в редактор
Чтобы не прописывать код текста в два столбца каждый раз вручную можно один раз , без использования плагина. Это очень удобно.
Ну и давайте разберемся по очень простому коду адаптивной верстки двух столбцов.
Вот привожу исходник HTML текста в двух столбцах:
Text, Text, Text,
Text, Text, Text,
div class="left-col" - левая колонка с классом.left-col
div class="right-col" - правая колонка с классом.right-col
div class="clearfix" - специальный блок для отмены float . См. далее.
CSS код адаптивной верстки текста в два столбца :
Left-col, /* левая колонка */
.right-col/* правая колонка */
{
width: 50%; /* ширина */
min-width: 180px; /* минимальная ширина сужения */
height: auto; /* высота */
box-sizing: border-box;
float: left; /* плавающие блоки */
}
.left-col{
padding-right: 10px; /* отступ справа */
}
.right-col{
padding-left: 10px; /* отступ слева */
}
/*Cтили для маленьких мониторов*/
@media (max-width: 479px){
.left-col, /* левая колонка */
.right-col/* правая колонка */
{
width: 100%; /* ширина */
}
.right-col{
padding-left: 0px; /* отступ слева */
}
}
/* clearfix сбрасывает float*/
.clearfix:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
Left-col и.right-col задается ширина не фиксированная, а в процентах - width: 50%; относительная для того, чтобы столбцы растягивались относительно ширины контейнера.
Но, при достижении 180px , каждый столбец больше не уменьшается.
min-width: 180px; - задан минимальный размер колонок.
Естественно, эти размеры можно менять по своему усмотрению. Три столбца, значит ставьте width: 33.3333%; .
height: auto; - высота адаптивных столбцов, она автоматически меняется в зависимости от объема контента в столбцах.
box-sizing: border-box; - желательно прописывать при адаптивной верстке. Свойство, при котором все отступы padding , рамки border и т.д, вписываются в заданный размер контейнера. В нашем случае.left-col и.right-col .
float: left; - свойство, при котором столбцы с текстом выстраиваются горизонтально по очереди. Количество столбцов зависит от заданных ранее относительных размеров. У нас width: 50%; - два столбца.
@media (max-width: 479px) - так называемая точка прерывания. Это значит, что на мониторах, менее 479px каждый столбец растянется на всю ширину монитора. В коде задано:
Left-col и.right-col {width: 100%;}
Точки прерывания
Используя точки прерывания можно с легкостью управлять размерами элементов для разных мониторов.
@media(max-width: 479px){ } @media(max-width: 767px){ } @media(max-width: 991px){ } @media(max-width: 1199px){ } @media(min-width: 480px){ } @media(min-width: 768px){ } @media(min-width: 992px){ } @media(min-width: 1200px){ }
Сложно? Только на первый взгляд. Скачайте исходник и меняя параметры, посмотрите логику. Ну или просто скопируйте код исходника и замените текст на свой.
Адаптивная верстка. Текст в два столбца с картинками
Естественно, в адаптивные столбцы можно добавлять любые элементы. Рассмотрим пример добавления к адаптивным столбцам с текстом картинки.
Для начала сделаем сами картинки адаптивными. Для этого присвоим им какой-то класс и зададим ширину 100%.
Стили CSS для адаптивных картинок
/*Стили для адаптивных картинок*/ .img-responsive{ display: block; max-width: 100%; /* ширина, размеры в процентах*/ height: auto; margin: 20px 0px; /* отступы сверху и снизу */ background: #fff; /* для красоты цвет заполнения */ padding: 4px; /* для красоты внутренние отступы */ border: 1px solid #ddd; /* для красоты рамка серым цветом */ }
Картинки желательно подбирать 500px в ширину, что-бы на маленьких мониторах они растягивались на всю ширину экрана и выглядели красиво.
HTML разметка для адаптивных столбцов с картинками:
.............
...........
Влад Мержевич
Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.
Ширина колонок
Для начала рассмотрим самый простой вариант, когда ширина левой колонки жестко задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах через атрибут width тега
|
(пример 1).
Пример 1. Ширина колонки в пикселах
В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top . Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края. Атрибуты width и valign можно заменить стилевыми свойствами width и vertical-align с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2). Пример 2. Использование стилей
Поля внутри колонокРасстояние между колонками регулируется атрибутом cellpadding тега
В данном примере значения атрибутов cellspacing и cellpadding равны нулю, а расстояние между содержимым колонок определяется свойством padding-right , который добавляется к левой ячейке через идентификатор с именем leftcol . Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек через стили. Пример 4. Поля в ячейках
Цвет фона колонокЧтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Лучше указывать цвет через стили, это позволяет вынести оформление страницы в отдельный файл. Для этого создаем новый стилевой класс, устанавливаем для него свойство background и применяем его к требуемой ячейке (пример 5). Пример 5. Цвет фона
В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1). Рис. 1. Колонки разного цвета Разделитель колонокИспользование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 6). Пример 6. Использование трех ячеек
В данном примере вводится еще одна колонка со стилевым идентификатором spacer , это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками. На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница. Линия между колонкамиРазделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью которых создание линий значительно упрощается. Следует только установить свойство border-left для правой колонки или border-right для левой (пример 7). Пример 7. Добавление линии
Результат данного примера показан ниже. РезюмеСоздание колонок с помощью таблиц процесс достаточно простой и быстрый, следует только добавить таблицу с двумя ячейками и определить ее визуальные атрибуты. К тому же большинство параметров, определяющих вид таблицы, можно вынести в стили и таким образом ускорить процесс добавления однотипных таблиц и документов на их основе. При двухколонном макете применяются разные средства по оформлению колонок. Например, используется фоновая заливка, добавляется рамка вокруг колонок, изменяется расстояние между ними или устанавливается вертикальная разделительная линия. Все эти вещи управляются с помощью стилей, что ведет к сокращению кода, расширяет варианты модификаций таблиц и удобству разработки сайта. Для того чтобы написать текст в две колонки, нам потребуется сделать три щелчка мышью. А для того чтобы разбить уже введённый текст на две колонки, нам потребуется произвести всё те же три щелчка мышью. Но если, как говорят, цепляться к словам, то тогда четыре щелчка. Всё это сказано с юмором, желая подчеркнуть то, насколько процесс ввода текста с разделением его на две колонки прост, в сравнении, например, с выборочной нумерацией многостраничного документа. Имеющаяся специальная опция позволят не только сразу вводить текст колонками, и даже тремя, а не только двумя, но и разбить на колонки любую часть готового текста, введённого самым обычным способом. А давайте с готового текста и начнём. Итак, документ состоит из одной страницы. Мы ввели текст, и вдруг выяснилось, что текст на странице должен располагаться в две колонки. Перед тем как начать действовать, обратим внимание на линейку над страницей и на положение ползунков регулировки полей: Итак, взглянув на линейку, уверенным движением руки направляем курсор мыши в верхнее меню и щелчком разворачиваем вкладку «Разметка страницы», где вторым щелчком по значку опции с названием «Колонки», открываем окошко с вариантами:
Третьим щелчком выбираем вариант «Две»:
Теперь посмотрим, на то, что стало с текстом и с ползунками линейки:
В общем-то, можно сказать, что программа минимум выполнена. Нам нужно было расположить текст в две колонки, - мы это и сделали. Причём сделали тремя щелчками мыши. Надо признать тот факт, что текст выглядит не очень. С точки зрения типографских стандартов, текст, в разных его частях, имеет недопустимое расстояние между словами, да и заголовок не всегда должен будет занимать то место, которое он занимает в тексте нашего примера. Есть, конечно же, исключения, но, как правило, заголовок должен быть над текстом. Все эти рассуждения подвели нас к необходимости форматирования текста, после применения к готовому тексту опции «Колонки». По этой самой причине мы на линейку и обращали внимание, часть ползунков которой, автоматически сместились в центральную её часть. Если будет на то острая необходимость, то с помощью незначительного изменения полей и промежутка между колонками, мы можем помочь себе в процессе форматирования текста. Эта помощь самим себе будет выражаться в изменении параметров ширины колонок и расстояния между ними, которые мы можем сделать в специальном окошке настроек. Об этом окошке поговорим чуть позже. Для того чтобы текст выглядел более эстетично, мы, в первую очередь можем немного изменить его размер. Для более тонкого (мягкого) изменения размера шрифта можно заменить его на дробное значение. Первым делом обозначим программе то, что мы намерены редактировать весь текст полностью. С этой целью выделим его. Для выделения текста, в разделе «Редактирование» вкладки «Главная», развернём содержание пункта «Выделить» и выберем вариант «Выделить всё»:
Выделение текста произошло:
Теперь, в верхнем меню, подведём курсор мыши к строке с видимым размером шрифта и сделаем один щелчок левой кнопкой мыши, выделив этим самым щелчком цифровое обозначение размера шрифта:
После появления синего выделения сразу же начинаем вводить дробное значение, например, «11,5», а можем установить «11,3» или «11,8»:
Завершаем процедуру нажатием клавиши «Enter», а затем смотрим на изменения, которые произошли с текстом. Конечно же, сначала можно начать с целых значений размера шрифта, выбирая их из списка размеров. В процессе такой работы помочь себе мы можем и переносом отдельных слов на следующую строку, а также менять значения междустрочного интервала и интервалов между абзацами. О том, как изменять интервалы можно прочитать на страницах данного ресурса в разделе «Word». Теперь, уделим внимание заголовку. Для того чтобы заголовок был действительно заголовком, он должен возвышаться над основным текстом. Давайте его возвысим. С этой целью выделим заголовок и только его:
Теперь, вновь обратимся к опции «Колонки» и, в раскрывшемся списке вариантов, выберем вариант «Одна». После такого нашего выбора текст немного перестроится, и мы получим самый настоящий заголовок:
В том случае, когда заголовок наравне с основным текстом немного «потерял в размере», а нам бы этого вовсе не хотелось, то тогда мы снова выделяем только заголовок и возвращаем его шрифту первоначальный (устанавливаем желаемый) размер. Изменить размер шрифта заголовка мы можем перед тем, как обратимся к опции «Колонки» и сделаем выбор варианта «Одна». Если уже в готовом тексте нам необходимо, чтобы определённая его часть была разбита на колонки, то эту часть текста необходимо сначала выделить, а затем применить нужный вариант разбивки. То есть повторить уже знакомые нам действия. Выделяем ту часть текста, которую хотим разбить на колонки:
Затем, обращаемся к опции «Колонки» (вкладка «Разметка страницы») и в раскрывшемся списке вариантов выбираем «Две». И вот, что у нас получилось в результате:
Сделаем щелчок мышью в любом месте страницы для снятия выделения:
Мы видим, что первая строка левой колонки ниже первой строки правой колонки. Получилось так, что колонки находятся на разных уровнях. Устраним такое несоответствие. Для этого, установим курсор в начале первой строки правой колонки:
И нажмём «Enter»:
Если есть необходимость редактирования разбитого на колонки текста, и мы хотим прибегнуть к изменению размера шрифта, то правильнее будет осуществлять такие изменения у всего текста в целом за исключением заголовка. Но если разбивка на колонки была произведена нами с целью привлечения внимания к содержанию текста, то тогда мы с разбитым на колонки текстом работаем индивидуально. Говоря кратко, поступаем так, как нам надо и хочется. Это касается и последовательности всех действий. Ну, а если мы передумали и хотим избавиться от столбцов, то тогда выделяем этот текст, а затем в списке вариантов колонок опции «Колонки», выбираем вариант «Одна». В том случае, когда мы начинаем вводить текст с чистого листа (только начинаем создавать документ) и желаем, чтобы текст разбивался на колонки в процессе ввода, то тогда нам необходимо сделать предварительные настройки. Для того чтобы сделать эти самые настройки мы должны пройти по знакомому пути, за исключением последнего шага. Если до этого, мы, развернув вкладку «Разметка страницы» выбирали опцию «Колонки» с последующим выбором варианта разбивки (в нашем примере две колонки), то сейчас, пройдя этот путь, мы сделаем выбор вариант действий «Другие колонки…»:
В результате такого выбора перед нами откроется то самое окошко, о котором вскользь было упомянуто вначале разговора:
Если мы посмотрим на содержащиеся в нём опции, то ощутим, что интуитивно понимаем, как с помощью любой из этих опций можем влиять на готовый текст или же сделать настройки для будущего текста:
Давайте в качестве примера, посмотрим на то, как изменится список строки «Применить» в том случае, когда мы выделили часть готового текста:
Именно к этой выделенной части текста мы теперь можем применить различные настройки. Для начала нужно понять, как текст должен выглядеть, можно первоначально ввести текст, или же выбрать второй метод, когда текст еще не введен. Если текст присутствует, то будет намного легче понять, как это все выглядит. Как в «Ворде» сделать 2 колонки?Метод после написания текста:
Выглядит это не очень красиво, расстояние между словами отвратительное, заголовок, так совсем может подвинуться в другое место. Когда нужно в готовом тексте, чтобы определенная часть была разбита на колонки, то сначала выделяем этот кусок текста и выбираем нужный вариант разбивки. Повторяем действия, описанные выше.
Теперь поработаем над этим текстом.
При желании изменить разбитый текст, можно изменив размер шрифта. Не забываем о том, что функция "Колонки" содержит дополнительный пункт под названием "Другие колонки". Как в «Ворде» сделать 2 колонки текста, чтобы соответствовало полиграфическому стандарту?
Нужно принять форматирование текста с помощью опции "Колонки". Так можно изменить формат в «Ворде».
Не забываем о возможности изменения полей и промежутка между колонками. С помощью дополнительных манипуляций приведем к лучшей читабельности.
При желании изменяем интервалы на свое усмотрение.
Теперь перейдем к заголовку. Он должен возвышаться над текстом. Для этого смотрим в опции "Колонки", вариант "Одна". Однако заголовок стал меньше по размеру, тогда выделяем его и возвращаем его шрифту желаемый размер. Вариант создания колонок с использованием таблицы
Метод не совсем правильный, однако с помощью него можно создать видимость разбивки текста.
Если хотите, то уберите или оставьте границы. Различия между версиямиКак в «Ворде» сделать 2 колонки, стало понятно, но какие различия есть в опции, связанной с созданием и разделением текста на колонки в разных версиях Microsoft Word 2007 и 2003 года, а также в новейших? В Microsoft Word 2003 года немного отличаются. Интерфейс самой программы и вкладка "Разметка страницы" отсутствуют, вместо нее рядом с опцией создания таблиц и изменения положения текста находятся сразу кнопки разбивки текста на две и более составных частей. Также можно настроить тип колонки. Как в «Ворде» сделать 2 колонки? Версия 2007 года. Есть с версией 2003 года различия в следующих элементах:
Желательно во всех версиях ставить галочку в пункте "Разделитель" на вкладке "Колонки", чтобы между колонками проходила линия. В новых версиях все вышеуказанное находится во вкладке "Макет". Статьи по теме
Еще статьи из этой рубрики
|
