Правильная верстка страницы: 30 рецептов правильной верстки сайта — Независимое театральное объединение "Зрительские симпатии"

Содержание

Блочная верстка или основы анатомии скелета сайтов

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

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

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

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

Различают несколько видов верстки:

I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег <table> и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:

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

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

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

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

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

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

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

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

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

Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css:

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

Для примера возьмем вот такой макет сайта, созданный в Photoshop. Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id. Получается такая структура:

Затем к готовой структуре сайта на html строкой <link rel=»stylesheet» type=»text/css» href=»style.css» /> прикрепляем файл css. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.

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

Полный код примера index.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Пример блочной верстки</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
 
<div>
	<div>
	<h3>Шапка</h3>
	</div>
		 
	<div>
	<h3>Блок навигации</h3>
	</div>
		 
	<div>
	<h3>Меню</h3>
	</div>
		 
	<div>
	<h3>Контент</h3>
	</div>
		 
	<div>
		 
	</div>
							   
	<div>
	<h3>Подвал сайта</h3>
	</div>
</div>
		 
</body>
</html>

Содержимое файла style.css:

body {
            background: #f3f2f3;
            color: #000000;
            font-family: Trebuchet MS, Arial, Times New Roman;
            font-size: 12px;
}
 
#container {
            background:#99CC99;
            margin: 30px auto;
            width: 900px;
            height: 600px;
}
 
#header {
            background: #66CCCC;
            height: 100px;
            width: 900px;
}
 
#navigation {
            background: #FF9999;
            width: 900px;
            height: 20px;
}
 
#menu {
            background: #99CC99;
            float: left;
            width: 200px;
            height: 400px;
}
 
#content {
            background: #d2d0d2;
            float: right;
 
            width: 700px;
            height: 400px;
}
 
#clear {
            clear:both;
}
 
#footer {
            background: #0066FF;
            height: 80px;
            width: 900px;
}

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

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

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

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

Правильная верстка шаблона — советы новичкам и не только…

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

Итак, теперь перейдем к нашей теме. Говорить сегодня будем про верстку. Почему я решил написать данный пост? Есть тому причины. А именно? Моя основная работа — это разработка сайтов, т.е. я создаю сайты клиентам на заказ. Естественно в этом деле не без конкурентов. Часто приходится сталкиваться с работой других верстальщиков. За 5 лет работы я накопил огромный опыт в верстке, но я тем не менее не считаю себя прям гуру верстальщиком и профи, мне есть еще чему учиться. Но извините меня, мне попадаются такие работы верстальщиков, что хочется кричать и вопить на весь интернет — корявая верстка, ужасно написанный код, скорость оставляет желать лучшего. И что самое главное, клиент ведь доволен. В общем, решил открыть глаза хоть немногим на это безобразие.

Основные моменты я разделил по группам.

Структура статьи

Код Html и Css

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

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

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

Комментарии в коде

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


/** — Сайдбар — **/
…
/** — конец Сайдбар — **/

И удобно, и визуально красиво.

Скрипты и стили только на нужных страницах

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

Лишние пробелы в html и css

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

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

Порядок подключения скриптов и стилей

В верстке есть определенные правила подключения файлов скриптов и стилей. Сначала всегда в исходном коде документа идет подключение стилей, а потом уже скриптов. Объясняется это тем, что на загрузку и выполнения скриптов тратится больше времени, чем на загрузку стилей. С использованием разметки html5 есть возможность асинхронной загрузки стилей и скриптов. Более подробно об этом можете почитать здесь. Желательно вообще все скрипты по возможности перенести в нижнюю часть страницы, до закрывающего тега </body>. Но не все скрипты могут работать при таком варианте подключения. Поэтому подключаем в подвале осторожно, следя за работоспособностью сайта.

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

Оптимизация кода css (максимально без дублирования стилей)

Прежде, чем приступать к верстке шаблона изучите сначала макет сайта в формате psd, открыв его в фотошопе. Если вы видите, что у вас идут практически одинаковые блоки по оформлению на разных страницах, то попытайтесь сделать так, чтобы у них были одни стили. Давайте объясню на примере, чтобы было понятней о чем я толкую. К примеру, вы верстаете макет интернет-магазина и у вас на главной странице выводятся блоки последних новинок товара и хиты продаж. Оформление одного товара во всех блоках одинаковое. Хиты продаж от последних новинок могут отличаться, к примеру, только скажем цветом рамки. Обычная рамка серая, а в хитах продаж она красная. Как быть? Вы задаете общий класс блоку с товаром, например, — «product» и пишете для него стили по умолчанию с серой рамкой. Далее родительскому блоку Хиты продаж вы задаете класс, к примеру, — «hot». Теперь для всех товаров с родительским классом «hot» переопределяете рамку одной строчкой кода — «border-color: red». Т.е. вам не надо копировать опять стили товара для блока Хиты продаж для того, чтобы поменять цвет рамки. Надеюсь примерно поняли к чему я клоню. Кстати, такое же оформление товара может быть и в списке товаров категории. Т.е. один написанный код оформления может использоваться на разных страницах при необходимости переопределения некоторых стилей.

Такой подход создает удобочитаемый и легкий по весу код.

Визуальный вид

Отступы

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

Вообще об отступах следует думать дизайнеру, но просто дело все в том, что дизайнер в силу своей неопытности может не учесть такой момент. В плане отступов должна существовать некая гармония, т.е. отступы в определенных блоках или между ними должны быть одинаковыми. Например, отступы между колонками сайта — 30px, внутри блоков — 15px. Я всегда стараюсь придерживаться этой гармонии, тем более в последнее время у меня все макеты сайта нарисованы по модульной сетке bootstrap. А там как раз такие вот отступы.

Также хочу сказать и об некоторых элементах, например, поля формы, кнопки. Текст в текстовом поле не должен прилипать к краям. Также и кнопки с фоном или бордюром. Например, в текстовом поле формы я всегда задаю отступы — padding: 5px 10px, т.е. сверху, снизу по 5px, а по краям — 10px. Для меня это норма, меньше уже не то.

Картинки

Частенько попадаются сайты, картинки в которых уменьшены средствами css или html. Я считаю, извините за выражение, это натуральным извращением. Во-первых, это утяжеляет страницу. Картинки хоть и визуально кажутся маленькими, на самом деле они большего разрешения и соответственно весят больше. Во-вторых, масштабирование картинок таким образом искажает их. Уменьшение картинок следует делать в графическом редакторе, далее их нужно сохранить в оптимизированном формате (оптимальное соотношение качества картинки к его весу) и только потом уже загружать на сайт. Оптимальный размер небольших картинок — это ~50кб. Если вам нужно изменить размеры большому количеству картинок, то можете воспользоваться специальной программкой — XnView MP. Ну просто замечательная программа!

Верстка максимально без картинок средствами css

Когда я верстаю макет, то я всегда стремлюсь к тому, чтобы верстать максимально без использования картинок. Почему? Да, потому что css3 дает нам такую возможность. Например, градиент — сейчас нет необходимости вырезать однопиксельную полосу и пускать ее на повторение. Другое дело, если вы хотите угодить таким браузерам, как ИЕ 7, Ие 8, но для них я ставлю заглушку. Градиент можно создать, используя определенные правила в css. Сейчас не буду вдаваться в подробности, если интересно, то можете почитать на сайте htmlbook.ru. Я же не парюсь над этими правилами, а просто использую градиент-генератор, например этот или этот.

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

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

Анимация максимально средствами css

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

Сегодня анимация на сайтах используется сплошь и рядом. Так вот, лично я считаю, что надо в это дело включать максимально css. Как я уже говорил выше css-файл браузер загружает и отрабатывает быстрее, чем js-файл. Конечно, я не говорю, что от JavaScript и jQuery стоит отказаться, вовсе нет. На самом деле бывают случае, когда анимацию мне легче сделать именно через jQuery.

В общем, по поводу использования анимации на сайте вы меня поняли.

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

В общем, друзья, давайте делать качественные сайты!

Если кто хочет покритиковать, то милости прошу в комментариях… До новых встреч!

что это такое, с чего начать работу с ней, и что для этого нужно

Есть проблемы с ранжированием, проект не растет, хотите проверить работу своих специалистов по продвижению? Закажите профессиональный аудит в Семантике

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Верстка веб-сайтов – это создание полноценной html-страницы на основе разработанного в графическом редакторе дизайна.

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

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

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

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

Виды верстки

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

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

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

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

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

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

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

Блочная – с применением<div>.
Адаптивная. кроссбраузерная – страница ведет себя корректно в разных браузерах и на мобильных гаджетах.
Валидная – без ошибок в коде.
Текстовая. То, что можно сверстать в виде текста,не верстается картинкой. Поисковая система любит текстовый контент, поэтому данный факт должен учитывать каждый верстальщик.
Код минимально короткий, все стили вынесены в отдельный файл.
Все содержимое в html и css прописано строчными буквами.
Для тега <img> (картинки) обязательно указаны высота и ширина изображения.
CSS используется преимущественно. То есть, если можно обойтись без JS — то динамика описывается в CSS.
То же самое для картинок. Если спецэффекты для шрифта можно наложить при помощи CSS, то используется текст, а не картинка.
JS файлы подключены в низу кода. Если вы подключаете их в<head>, то это плохо сказывается на скорости загрузки веб-страницы.
JS файлы объединены в один (по возможности).
Навигация по сайту реализована списками (<ul>, <li>), поисковая система быстрее понимает такую навигацию.
Правильная работа с заголовками. Чтобы у SEO-специалиста в будущем не было проблем, указывайте h2-H6 только в контентной части сайта. Размещайте заголовки по принципу: первым идет h2, потом по убыванию другие виды заголовков.
Продуманы стили всех заголовков, абзацев, картинок, списков в контентной части документа.
Структурированный код, который наглядно показывает все закрывающие и открывающие теги.

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

Обработка изображений: 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.

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

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

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

Отличия блочной вёрстки от табличной

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

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

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

Суть блочной вёрстки

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

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.

Принципы блочной вёрстки

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

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

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

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

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

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

<!DOCTYPE html>
<html>
<head>
    <title>Блочная вёрстка</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
	<div>
	<h3>header (шапка сайта)</h3>
	</div>
		 
	<div>
	<h3>Блок навигации</h3>
	</div>
		 
	<div>
	<h3>Левая панель</h3>
	</div>
		 
	<div>
	<h3>Основной контент страницы</h3>
	</div>
		 
	<div>
		 
	</div>
							   
	<div>
	<h3>footer (низ сайта)</h3>
	</div>
</div>
</body>
</html>

Разберём некоторые моменты.

<div> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.

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

Теперь добавим файл CSS, код которого приведён ниже.

body {
     background: #FFF;
     color: #000;
     font-family: Arial, sans-serif;
     font-size: 14px;
}

#header {
     background: #F5DEB3;
     width: 100%;
     height: 55px;
}
 
#container {
     background: #FFD700;
     margin: auto auto;
     text-align: center;
     width: 80%;
     height: 400px;
}
 
#navigation {
     background: #FE9798;
     width: 100%;
     height: 25px;
}
 
#sidebar {
     background: #40E0D0;
     float: left;
     width: 20%;
     height: 280px;
}

#content {
     background: #DCDCDC;
     float: right;
     width: 80%;
     height: 280px;
}
 
#clear {
     clear: both;
}
 
#footer {
    background: #00BFFF;
	width: 100%;
	height: 40px;
}

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

#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

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

Полезные ссылки:

Что должен уметь верстальщик — Блог HTML Academy

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

Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.

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

В этом и заключается суть работы верстальщиков. Они берут у дизайнеров макет (это картинка, на которой нарисован сайт — К.О.) и собирают из него страницу. Пишут HTML, CSS, используют магию гридов, флоатов, какой-нибудь БЭМ. Стараются, в общем, делают. Молодцы.

С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2020 году требуют от верстальщика работодатели.

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

Идеальная вакансия

Коля Шабалин, автор и преподаватель курсов в Академии, написал скрипт и проанализировал вакансии на hh и Хабр-карьере, выделил требования и посчитал, какие встречаются чаще. Оказалось, что усреднённая вакансия выглядела бы как-то так:

Требуется верстальщик, который:

Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
Знает HTML. В своей работе использует Сanvas. Шаблонизирует HTML с помощью PUG.
Использует Git. Умеет работать в GitHub.
Может натянуть вёрстку на CMS: Bitrix и Wordpress.
JavaScript пишет с помощью jQuery, но не чурается ES6.
Умеет автоматизировать свою работу с Node.js, npm-скрипты, Autoprefixer, Gulp или Webрасk.
Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.
Имеет своё портфолио, инициативный, готов пройти испытательный срок

Уроками информатики, как видите, даже не пахнет. Много непонятных слов, давайте разберёмся.

Верстальщический вундерлист

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

Кроссбраузерная вёрстка — это когда сайт во всех браузерах выглядит одинаково. Даже в IE11 (хотя это несколько сложно, учитывая одно из следующих требований).

SVG — векторный формат изображений, при котором картинки не портятся, если их растянуть.
Sass — это такая надстройка над CSS. Sass помогает избежать дублирования и структурировать код, в таком виде его легче поддерживать. Но с препроцессорами есть проблемы.
БЭМ — изобретение Яндекса, чтобы упростить вёрстку и разбить всё на блоки.
Canvas— сущность в HTML, на которой можно рисовать (люблю объяснять!).
PUG — шаблонизатор HTML, написанный на JavaScript для Node.js. Нужен, чтобы шаблонизировать. Все же любят шаблоны.
Git — система контроля версий, чтобы не делать Макет_2_Финальный_СПравками_final_наревью.html. Мы в Академии любим Git и написали про него много статей.
Натянуть вёрстку на CMS — взять WordPress или какой-нибудь там ещё движок для блога и сверстать страницу его встроенными средствами. Но по макету, чтобы дорого-богато.
Bootstrap — ещё одна библиотека, чтобы быстро верстать. Её много где используют, но киллерфичей верстальщика может стать понимание, как сверстать «как на бутстрапе», но с нуля.
jQuery — популярное ~~нечто~~ решение, которое используют, чтобы поудобнее работать с JavaScript. Порог вхождения низкий, запутанность кода — высокая. Вообще, после хороших курсов по JavaScript никакой jQuery будет не нужен, но если он используется в компании, то разобраться будет легко.
Node.js, npm-скрипты, Autoprefixer, Gulp, Webpack — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.

Что там с Фотошопом и Иллюстратором

Некоторые ребята говорят, что их всерьёз кто-то использует.

Практика показывает, что все потихоньку переходят на Figma, Sketch и Avocode. Ну то есть Фотошоп и Иллюстратор, конечно, ещё много где, но по сравнению с Фигмой это как заколачивать гвозди дорогущим перегруженным графическим редактором по подписке.

Ну и потом, вспомните Adobe Flash — все постепенно пересядут на нормальную технологию, никуда не денешься.

А портфолио откуда брать?

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

Что об этом всём думают в индустрии?

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

По опыту: нужно точно, быстро и адаптивно.
Точно — значит по макету: надо уметь открыть psd и померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах.
Чтобы собрать своё добро, нужно знать, где скачать Node.js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.
В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер.
Нынче если ищут именно верстальщика, а не полноценного фронта, значит последний уже есть, а вёрстки много и/или она сложная. Значит можно не знать JavaScript, но стоит освоить любой шаблонизатор, одну из популярных методологий, познакомиться с существующими библиотеками компонентов.
Чтобы тебя все хотели, нужно много и быстро верстать. А для этого нужно активно пользоваться доступными инструментами и подходами и уметь выбирать подходящие. Что, конечно, выходит далеко за рамки знания HTML и CSS.
Катя Иванова, перевела бабушку на React.

Что ещё?

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

Новая профессия не за горами

Мы перезвоним и расскажем всё о том, как стать верстальщиком.

Хочу консультацию
Нажатие на кнопку — согласие на обработку персональных данных
Структура HTML-кода | htmlbook.ru
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 4.1 показан код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Пример веб-страницы</title> </head> <body> <h2>Заголовок</h2>  <p>Первый абзац.</p> <p>Второй абзац.</p> </body> </html>
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Далее разберем отдельные строки нашего кода.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.
Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.
Табл. 4.1. Допустимые DTD
DOCTYPE Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»> В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html> В этой версии HTML только один доктайп.
XHTML 1.0
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»> Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»> Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.
В дальнейшем будем применять преимущественно строгий <!DOCTYPE>, кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.
Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.
<html>
Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).
<head>
Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title>.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
<title>Пример веб-страницы</title>
Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).
Рис. 4.2. Вид заголовка в браузере
Тег <title> является обязательным и должен непременно присутствовать в коде документа.
</head>
Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.
<body>
Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.
<h2>Заголовок</h2>
HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>…<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.
Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!— и заканчиваются тегом —>. Все, что находится между этими тегами, отображаться на веб-странице не будет.
<p>Первый абзац.</p>
Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
<p>Второй абзац.</p>
Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.
</body>
Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.
</html>
Последним элементом в коде всегда идет закрывающий тег </html>.
Семантический HTML — Основы современной вёрстки
Основы современной вёрстки
При создании вёрстки нужно учитывать семантику, то есть смысловое (логическое) значение элементов.
Основная цель любой HTML-вёрстки — передача смысла блоков. Часто, помимо пользователей, по нашим страницам ходят и роботы. Они собирают и анализируют информацию страницы. К примеру, поисковые роботы просматривают всю страницу и определяют её полезность, а также уникальность. И если для человека достаточно просто поделить страницу на части и найти шапку, основной контент, футер, то для робота это достаточно сложная задача. Робот видит исключительно нашу вёрстку и не может «глазами» отделить части макета.
Вторая важная причина необходимости создания семантической вёрстки — использование страниц людьми с ограниченными возможностями. Слабовидящие пользователи используют «скринридеры» — устройства или приложения, воспроизводящие голосом элементы страницы. Чтобы скринридер мог правильно понять, где содержится основная информация, меню, поясняющие блоки и так далее, мы должны правильно разметить страницу. Это поможет устройствам правильно разбить страницу на логические блоки и дать возможность посетителям корректно перемещаться по странице. Такая концепция называется «Доступный WEB».
Запомните: минимальная доступность лучше, чем её отсутствие.
Для решения этих вопросов в стандарте HTML5 появилось множество семантических тегов, которыми вы можете пользоваться. В этом уроке изучим базовые семантические теги и разметим целую HTML-страницу.
Шапка сайта
Верхняя область макета зачастую называется «шапкой» сайта. Она содержит название компании, основное меню, контактную информацию. Эта область очень важна для быстрой навигации по сайту, так как обычно содержит меню с основными разделами сайта.
Чтобы создать шапку сайта, используется парный тег header, внутри которого мы и располагаем необходимую информацию.
Один из примеров шапки сайта:
<header> <img src="/logo.png" alt="Логотип">  <div>  <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </div> </header>
По своему поведению тег header работает так же, как и простой div. Почти все семантические элементы являются блочными и не имеют стилей по умолчанию. Это позволяет очень быстро добавить семантику в уже существующие проекты. Если стили в этих проектах не завязаны на тегах, то достаточно просто сменить название с div на header и мы получим уже семантичную шапку сайта.
Навигация
Попробуйте взглянуть на шапку сайта из примера выше глазами компьютера. Что он там видит?
Картинку.
Блочный элемент div.
Маркированный список.
Набор ссылок.
Если вы ещё не сверстали пару своих макетов, то по такому набору можете и не понять, что набор ссылок не что иное, как основное меню сайта. Вот и роботам не всегда просто это сделать. Конечно, они уже достаточно обучены, чтобы в таком простом наборе найти меню, но меню обычно может быть не одно и быть контекстно-зависимым. Тогда робот может принять за основное меню не то, что бы мы хотели.
Как же нам ему помочь? Для этого в стандарте HTML5 появился тег nav. Он обозначает навигационную область. Причём помочь отделить основное меню от меню раздела можно с помощью других тегов, речь о которых пойдёт ниже.
Заменим простой блочный элемент div на его семантичного брата nav:
<header> <img src="/logo.png" alt="Логотип">  <nav>  <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> </header>
Главной особенностью использования nav является то, что не обязательно оборачивать все меню на странице. Обычно достаточно обернуть только главное меню и, например, не оборачивать меню в футере. При этом не запрещается иметь сразу несколько элементов nav на странице. Выделяйте ими главные меню на странице.
Уникальный контент
Основной смысл каждой страницы — уникальный контент. Это самое главное, что должно быть на вашей странице. Пользователь вполне справится без меню или футера, но если на странице нет своего уникального контента, то страница бесполезна.
Для разметки уникального контента в стандарте HTML5 появился специальный тег main. Именно он поможет обозначить область с самым важным контентом на странице. Старайтесь в нём держать только контент. Обычно меню, боковые панели и футер в эту область не входят. Исключением может быть только ситуация, если эти блоки действительно уникальны для данной страницы. Например, меню может вести по разделам страницы. В таком случае оно на полных правах может быть включено в область уникального контента.
Добавим такую область в нашу вёрстку:
<header> <img src="/logo.png" alt="Логотип">  <nav>  <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> </header> <main> <h2>Хекслет — практические курсы по программированию</h2> <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p> <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p> <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p> </main>
Наличие тега main также очень важно для мобильных браузеров. Вы могли видеть, что многие из них имеют функцию «Режим чтения». При его включении браузер автоматически удалит всё оформление и все ненужные блоки, оставив только главный контент. Этим контентом и будет являться область, заключённая в тег main. Такой режим отлично подходит для людей, у которых, в настоящий момент, слабое подключение к интернету.
Так как внутри main содержится уникальный контент страницы, то разрешено использовать только один такой тег на странице.
Секции
Контент на странице не является однородным. Обычно это цепочка логических областей, каждая из которых описывает что-то конкретное. Например, на странице могут присутствовать область с описанием преимуществ, цены, формы и так далее. Их хочется как-то выделить. И на это есть несколько причин:
С правильно разделённым контентом удобно работать. Мы легко можем перемещать такие области, менять местами или удалять. В коде их будет легко найти.
Правильная группировка разделов — важная часть при создании доступного web’а.
Для таких самостоятельных логических единиц существует специальный тег section, который внутри себя может содержать одну конкретную секцию. Добавим её в наш пример:
<header> <img src="/logo.png" alt="Логотип">  <nav>  <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> </header> <main> <h2>Хекслет — практические курсы по программированию</h2> <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p> <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p> <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p> <section> <h3>Преимущества</h3> <ul> <li>Много теории</li> <li>Много практики</li> <li>Много менторов</li> </ul> </section> </main>
Заметьте, как легко стало искать преимущества в коде, ведь они находятся в отдельной секции. Также вы могли обратить внимание на заголовок внутри секции. Так как секция — это самостоятельная единица, то почти всегда она имеет свой заголовок. Хоть это и не всегда так, и стандарт не обязывает нас включать заголовок в секцию, но старайтесь придерживаться этого правила.
Как быстро определить, стоит ли включать участок контента в отдельную секцию? Всё очень просто: если вы можете описать участок контента в одном или двух словах (преимущества, цены, форма заказа, каталог, контакты и так далее), то с большой вероятностью этот участок является самостоятельной секцией.
Независимые секции
Другим способом выделить логический участок текста является использование тега article. Может показаться, что какой смысл иметь два различных тега для выделения одного и того же?
Между section и article есть одна существенная разница: article является независимой секцией, то есть её можно перенести на любую страницу сайта или даже на другой сайт, и при этом она не потеряет своего контекста.
Представьте себе блог и отдельную статью в нём. Можем ли мы понять статью, если она вдруг окажется не в блоге, а, например, на странице с услугами? Конечно! Ведь статья — это законченный текст. Следовательно, такую статью можно обернуть в тег article.
Добавим колонку новостей в наш пример вёрстки. Сразу подумаем, как она может быть разделена. Сами по себе новости являются достаточно уникальным элементом, ведь даже если их перенести на другую страницу, то они не потеряют свою актуальность. В этом случае каждую новость можно обернуть в article. А что делать с обёрткой блока? Она объединяет по смыслу несколько различных новостей, её можно спокойно назвать одним словом, и она точно будет иметь свой заголовок. Следовательно, ей подойдёт тег section.
<header> <img src="/logo.png" alt="Логотип">  <nav>  <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> </header> <main> <h2>Хекслет — практические курсы по программированию</h2> <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p> <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p> <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p> <section> <h3>Преимущества</h3> <ul> <li>Много теории</li> <li>Много практики</li> <li>Много менторов</li> </ul> </section> <section> <h3>Новости</h3> <article> <h4>Новость 1</h4> <p>Текст новости 1</p> <a href="#">Подробнее</a> </article> <article> <h4>Новость 2</h4> <p>Текст новости 2</p> <a href="#">Подробнее</a> </article> <article> <h4>Новость 3</h4> <p>Текст новости 3</p> <a href="#">Подробнее</a> </article> </section> </main>
Дополняющие секции
Ещё одним крупным контейнером для нашего контента служит тег aside. Это область с дополнительной информацией. Она может быть как связана с текущей страницей, так и не очень. Подобные секции вы можете встречать в виде боковых панелей на сайтах. Там содержится дополнительное меню, баннеры, реклама и другая информация.
Обратите внимание, что aside не обязан являться боковой панелью по внешнему виду. Это может быть даже дополнительная информация внутри статьи. Но чаще всего внешнее оформление у такого тега именно в виде боковой панели.
Давайте добавим такую информацию в нашу вёрстку. Внутри этой дополнительной секции будет находиться ещё одно меню, которое не будем оборачивать в nav, так как оно не является основным.
<header> <img src="/logo.png" alt="Логотип">  <nav>  <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> </header> <aside> <div> <a href="#">Необязательный пункт 1</a> <a href="#">Необязательный пункт 2</a> <a href="#">Необязательный пункт 3</a> </div> </aside> <main> <h2>Хекслет — практические курсы по программированию</h2> <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p> <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p> <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p> <section> <h3>Преимущества</h3> <ul> <li>Много теории</li> <li>Много практики</li> <li>Много менторов</li> </ul> </section> <section> <h3>Новости</h3> <article> <h4>Новость 1</h4> <p>Текст новости 1</p> <a href="#">Подробнее</a> </article> <article> <h4>Новость 2</h4> <p>Текст новости 2</p> <a href="#">Подробнее</a> </article> <article> <h4>Новость 3</h4> <p>Текст новости 3</p> <a href="#">Подробнее</a> </article> </section> </main>
Дополнительное задание
Создайте файл index.html на своём компьютере и создайте собственное резюме. Используйте изученные в этом уроке теги.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Что-то не получается или материал кажется сложным?
Загляните в раздел «Обсуждение»:
задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
Word: макет страницы
/ ru / word / links / content /
Введение
Word предлагает множество вариантов макета страницы и форматирования, которые влияют на то, как содержимое отображается на странице. Вы можете настроить ориентацию страницы , размер бумаги и поля страницы в зависимости от того, как вы хотите, чтобы ваш документ выглядел.
Необязательно: загрузите наш практический документ.
Посмотрите видео ниже, чтобы узнать больше о макете страницы в Word.

Ориентация страницы
Word предлагает два варианта ориентации страницы: альбомная и книжная . Сравните наш пример ниже, чтобы увидеть, как ориентация может повлиять на внешний вид и расстояние между текстом и изображениями.
Альбомная означает, что страница ориентирована по горизонтали .
Вертикальная ориентация означает, что страница ориентирована по вертикали .
Чтобы изменить ориентацию страницы:
Выберите вкладку Макет .
Щелкните команду Orientation в группе Параметры страницы.
Появится раскрывающееся меню. Щелкните Книжная или Альбомная , чтобы изменить ориентацию страницы.
Ориентация страницы документа будет изменена.
Размер страницы
По умолчанию размер страницы нового документа составляет 8,5 на 11 дюймов. В зависимости от вашего проекта вам может потребоваться изменить размер страницы документа. Важно отметить, что перед изменением размера страницы по умолчанию вы должны проверить, какие размеры страницы поддерживает ваш принтер.
Чтобы изменить размер страницы:
Word имеет предустановленных размеров страницы на выбор.
Выберите вкладку Layout , затем щелкните команду Size .
Появится раскрывающееся меню. Текущий размер страницы будет выделен. Щелкните желаемый предопределенный страница размер .
Размер страницы документа будет изменен.
Чтобы использовать нестандартный размер страницы:
Word также позволяет настраивать размер страницы в диалоговом окне Page Setup .
На вкладке Макет щелкните Размер . В раскрывающемся меню выберите Дополнительные размеры бумаги .
Появится диалоговое окно Page Setup .
Настройте значения для Ширина и Высота , затем нажмите ОК .
Размер страницы документа будет изменен.
Поля страницы
Поле — это пространство между текстом и краем документа.По умолчанию поля нового документа установлены на Нормальный , что означает, что между текстом и каждым краем есть расстояние в один дюйм. В зависимости от ваших потребностей Word позволяет изменять размер полей документа.
Для форматирования полей страницы:
Word имеет предопределенных размеров полей на выбор.
Выберите вкладку Layout , затем щелкните команду Margins .
Появится раскрывающееся меню. Щелкните предопределенный размер поля , который вам нужен.
Поля документа будут изменены.
Для использования настраиваемых полей:
Word также позволяет настраивать размер полей в диалоговом окне Page Setup .
На вкладке Макет щелкните Поля . В раскрывающемся меню выберите Custom Margins .
Появится диалоговое окно Page Setup .
Настройте значения для каждого поля, затем щелкните ОК .
Поля документа будут изменены.
Вы также можете открыть диалоговое окно Параметры страницы, перейдя на вкладку Макет и щелкнув маленькую стрелку в правом нижнем углу группы Параметры страницы .
Вы можете использовать удобную функцию Word Set as Default для , чтобы сохранить всех форматирования изменений, которые вы сделали, и автоматически применить их к новым документам. Чтобы узнать, как это сделать, прочитайте наш урок об изменении настроек по умолчанию в Word.
Challenge!
Откройте наш практический документ.
Измените ориентацию страницы с на Книжную .
Измените размер страницы на Legal . Если размер Legal недоступен, вы можете выбрать другой размер, например A5 .
Измените значение поля на Narrow .
Когда вы закончите, ваш документ должен состоять из одной страницы, если используется формат Legal. Это должно выглядеть примерно так:
/ ru / word / Printing-documents / content /
Word 2013: макет страницы
/ ru / word2013 / форматирование-текст / содержание /
Введение
Один аспект форматирования, который вам необходимо учитывать при создании документа, — это то, нужно ли вносить изменения в макет страницы .Макет страницы влияет на отображение содержимого и включает ориентации страницы , полей и размера .

Необязательно: загрузите наш практический документ.
Ориентация страницы
Word предлагает два варианта ориентации страницы: альбомная и книжная . Альбомная означает, что страница ориентирована по горизонтали , а портретная означает, что страница ориентирована по вертикали .Сравните наш пример ниже, чтобы увидеть, как ориентация может повлиять на внешний вид и расстояние между текстом и изображениями.
Альбомная и портретная ориентация
Чтобы изменить ориентацию страницы:
Выберите вкладку Макет страницы .
Щелкните команду Ориентация в группе Параметры страницы. При нажатии команды Ориентация
Появится раскрывающееся меню. Щелкните Книжная или Альбомная , чтобы изменить ориентацию страницы. Изменение ориентации страницы
Ориентация страницы документа будет изменена.
Поля страницы
Поле — это пространство между текстом и краем документа. По умолчанию поля нового документа установлены на Нормальный , что означает, что между текстом и каждым краем есть расстояние в один дюйм. В зависимости от ваших потребностей Word позволяет изменять размер полей документа.
Для форматирования полей страницы:
Word имеет предопределенных размеров полей на выбор.
Выберите вкладку Макет страницы , затем щелкните команду Поля .При нажатии команды «Поля»
Появится раскрывающееся меню. Щелкните предопределенный размер поля , который вы хотите. Изменение полей страницы
Поля документа будут изменены.
Для использования настраиваемых полей:
Word также позволяет настраивать размер полей в диалоговом окне Page Setup .
На вкладке Макет страницы щелкните Поля . В раскрывающемся меню выберите Custom Margins … .Выбор настраиваемых полей …
Появится диалоговое окно Page Setup .
Настройте значения для каждого поля, затем нажмите OK . Диалоговое окно «Параметры страницы»
Поля документа будут изменены.
Размер страницы
По умолчанию размер страницы нового документа составляет 8,5 на 11 дюймов. В зависимости от вашего проекта вам может потребоваться изменить размер страницы документа. Важно отметить, что перед изменением размера страницы по умолчанию вы должны проверить, какие размеры страницы поддерживает ваш принтер.
Чтобы изменить размер страницы:
Word имеет предустановленных размеров страницы на выбор.
Выберите вкладку Page Layout , затем щелкните команду Size . При нажатии команды Size
Появится раскрывающееся меню. Текущий размер страницы будет выделен. Щелкните желаемый предопределенный размер страницы . Изменение размера страницы
Размер страницы документа будет изменен.
Чтобы использовать нестандартный размер страницы:
Word также позволяет настраивать размер страницы в диалоговом окне Page Setup .
На вкладке Макет страницы щелкните Размер . В раскрывающемся меню выберите Дополнительные размеры бумаги … . Выбор дополнительных размеров бумаги …
Появится диалоговое окно Параметры страницы .
Настройте значения для Ширина и Высота , затем нажмите ОК .Регулировка размера страницы
Размер страницы документа будет изменен.
Кроме того, вы можете открыть диалоговое окно «Параметры страницы», перейдя на вкладку «Макет страницы» и щелкнув маленькую стрелку в правом нижнем углу группы Параметры страницы .
Открытие диалогового окна Параметры страницы
Вы можете использовать удобную функцию Word Set as Default для , чтобы сохранить всех форматирования изменений, которые вы сделали, и автоматически применить их к новым документам.Чтобы узнать, как это сделать, прочитайте нашу статью об изменении настроек по умолчанию в Word.
Challenge!
Откройте существующий документ Word. Если хотите, можете воспользоваться нашим практическим документом.
Изменить ориентацию страницы . Если вы используете этот пример, измените ориентацию на Альбомная .
Изменить поля . Если вы используете этот пример, измените поля на Narrow .
Попробуйте настроить поля с помощью Custom Margins .
Измените размер бумаги . Если вы используете этот пример, попробуйте изменить размер бумаги на Legal .
Попробуйте настроить на размер страницы .
/ ru / word2013 / Printing-documents / content /
Макет страницы (Microsoft Word)
Макет страницы — это термин, используемый для описания того, как каждая страница вашего документа будет выглядеть при печати. В Word макет страницы включает такие элементы, как поля, количество столбцов, способ отображения верхних и нижних колонтитулов и множество других аспектов.При разработке своих страниц вы можете использовать инструменты, которые Word предоставляет в этом отношении в ваше распоряжение.
Советы, приемы и ответы
Следующие статьи доступны по теме «Макет страницы». Щелкните значок название статьи (выделено полужирным шрифтом ), чтобы увидеть связанную статью.
Добавление номеров страниц
Вы когда-нибудь хотели добавить номера страниц к вашему документу? Word позволяет контролировать многие аспекты нумерации страниц.Вот как легко добавить номера страниц.
Добавление номеров страниц в верхние или нижние колонтитулы
Хотя Word имеет формат номеров страниц по умолчанию, вы можете разработать и указать, как они должны отображаться в документе. Верхние и нижние колонтитулы делают это возможным, и этот совет объясняет, как это сделать.
Точное количество строк на странице
Для некоторых целей вам может потребоваться уместить точное количество строк на печатной странице.Это легче сказать, чем сделать, поскольку часто может казаться, что Word работает против вас. Вот как убедиться, что вы получаете именно то, что вам нужно.
Автоматическая нумерация страниц в нескольких документах
Word позволяет указать номер начальной страницы для документа, что удобно, если у вас есть несколько документов, которые нужно напечатать в последовательном порядке. В этом совете обсуждается, как можно настроить автоматическое «перетекание» номеров страниц из одного документа в другой.
Автоматические номера страниц в новых документах
Если вы хотите, чтобы номера страниц в ваших документах были по умолчанию, самым простым решением является внесение изменений в шаблоны. Затем вы можете создавать новые документы на основе шаблона, который содержит номера страниц.
Изменение полей страницы
Частью определения макета страницы является определение размера полей, окружающих текст на странице. Word позволяет легко изменять поля, используемые на ваших страницах.
Изменение номера начальной страницы
Word обычно нумерует страницы в документе, начиная с единицы и доходя до количества имеющихся страниц. При желании вы можете изменить номер начальной страницы для любого раздела документа. Как объясняется здесь, это легко сделать.
Создание точечных страниц
Хотите добавить страницу с другим номером в Word, не затрагивая весь документ? Решение немного сложное, но оно того стоит.
Создание боковых заголовков
Боковые заголовки можно использовать в качестве элемента макета для документа. Вы можете создавать боковые заголовки в документе, используя текстовые поля, как описано в этом совете.
Уменьшение расстояния между основным текстом и текстом нижнего колонтитула
Определение того, как вы хотите, чтобы текст в вашем документе отображался на печатной странице, иногда может быть немного затруднительным. Word предоставляет множество параметров, которые могут повлиять на этот внешний вид.Этот совет посвящен настройкам, которые влияют на расстояние между основным текстом и текстом нижнего колонтитула.
Шрифт по умолчанию для номеров страниц
Номера страниц являются обычным дополнением к документам и большим подспорьем для читателей. Если вы хотите легко форматировать номера страниц, вам нужно понимать, как Word их форматирует. Этот совет объясняет, как лучше всего получить желаемое форматирование.
Определение макета страницы
Перенос документа на бумагу — это главная цель текстового редактора.Вот несколько концепций, которые важны при рассмотрении того, как должна быть оформлена ваша страница.
Удаление «перед интервалом» в верхней части страницы.
При форматировании абзацев в Word у вас есть несколько вариантов настройки интервала перед, внутри и в конце каждого абзаца. Вот как убрать лишнее пространство, которое иногда может появляться вверху страницы.
Сноски в двух столбцах
При планировании того, как будут выглядеть ваши напечатанные страницы, вы можете разместить свои сноски в нескольких столбцах.Лучший способ решения этой проблемы зависит от используемой версии Word.
Получение правильного общего количества страниц
Word позволяет вставлять динамические номера страниц в документ. Однако при некотором форматировании номеров страниц трудно понять, как получить именно те номера страниц, которые вам нужны.
Четные страницы остаются пустыми
Хотите распечатать документ только на нечетных страницах распечатки? Есть несколько вещей, которые вы можете попробовать, как описано в этом совете.
Ограничение количества страниц документа
Вам нужно, чтобы ваш документ умещался на определенном количестве страниц? Это может быть практически невозможно сделать в Word; вам на самом деле может потребоваться рассмотреть другое программное обеспечение, чтобы выполнить эту работу.
Примечания на полях в Word
В некоторых типах документов используются примечания на полях слева или справа от основного текста. Заставить их появиться в Word может быть непросто, поскольку нет встроенной функции, которая их создает.В этом совете обсуждается один подход, который вы можете использовать, который включает таблицы.
Индикатор отсутствия разрыва страницы
Введите разрыв страницы в Word, и этот разрыв страницы может не отображаться на экране так, как вы ожидаете. Это связано с тем, как Word вставляет разрыв страницы в документ, как описано в этом совете.
Нет пробела перед в верхней части страницы
Хотите убедиться, что Word правильно обрабатывает пробелы перед абзацем, когда абзац находится в верхней части страницы? Проверьте то, что обсуждается в этом совете, и вы получите именно тот интервал, который хотите.
Исчезновение нечетных номеров страниц
Номера страниц на печатных страницах часто являются необходимой частью форматирования документа. Что вы будете делать, если напечатанный результат не включает некоторые из ожидаемых номеров страниц? Вот краткое обсуждение того, что может вызвать этот тип проблемы и как ее исправить.
Предотвращение запутывания заголовков
Несомненно, вы захотите отформатировать документ так, чтобы заголовки оставались в абзаце, который следует за заголовком.Вот как отформатировать заголовки, чтобы Word позаботился об этом автоматически.
Печать A4 на бумаге формата Letter
Для тех, кто во всем мире использует метрическую систему, стандартный размер многих документов называется страницей A4. Если вы не принадлежите к метрическому миру, вы можете задаться вопросом, как распечатать документы A4 на бумаге формата Letter, не затрагивая нумерацию страниц документа. Этот совет объясняет, как это сделать.
Быстрое отображение диалогового окна «Параметры страницы»
Диалоговое окно «Параметры страницы» незаменимо при настройке общего вида документа.Вы можете быстро отобразить диалоговое окно, зная, где нажимать на линейки, как описано в этом совете.
Выбор размера бумаги
В большинстве случаев мы печатаем на бумаге стандартного размера для нашего региона, например на бумаге формата Letter или A4. Однако Word позволяет выбирать любые размеры бумаги. Вот как вы указываете размер, который хотите использовать.
Создание нового раздела с нечетным номером страницы
Обычное соглашение о разбивке на страницы, используемое при публикации, заключается в том, что новые главы (а иногда и новые разделы) начинаются на странице с нечетным номером.Word упрощает такую разбивку на страницы; просто следуйте инструкциям, описанным в этом совете.
Две схемы нумерации страниц в одном документе
Word отлично подходит для нумерации страниц, если вам нужна только одна согласованная схема нумерации в документе. Если вам нужны две отдельные схемы нумерации, вам нужно применить некоторые обходные пути, описанные в этом совете.
Общие сведения о размерах страниц
Создавая документ, вы должны заботиться о конечном размере создаваемой страницы.Word поддерживает широкий спектр размеров страниц, и вы можете изменить их — «в любое время», используя приемы, описанные в этом совете.
Общие сведения о поле желоба
Практически все знают, что Word позволяет вам устанавливать верхнее, нижнее, левое и правое поля для вашего документа. Есть еще один вид маржи, который также может быть полезен. Это поле, известное как желоб, имеет очень конкретную цель в макете страницы.
Использование заголовка из одного столбца в макете из нескольких столбцов
Хотите разное количество столбцов на одной странице? Word упрощает использование, например, заголовка, в котором используется один столбец, даже если большая часть страницы состоит из нескольких столбцов.Вот как выполнить дизайн.
Использование номеров глав с номерами страниц
Вам нужно добавить номера страниц, которые также включают номер главы? Это относительно легко сделать, как описано в этом совете.
Использование непрерывных строк
Вы можете создать специальную схему нумерации страниц верхнего и нижнего колонтитула, используя вложенные поля. Этот совет показывает пример того, как вы можете использовать поля для вычисления номера следующей страницы и определения последней страницы документа.
Водяные знаки в столбцах
Если вы создаете небольшие флаеры (по два на страницу), вы можете включить графический водяной знак в качестве фона каждого из листовок. Вот несколько идей о том, как вы можете выполнить эту задачу.
Изменить поля — Word
Что бы вы хотели сделать?

Посмотреть видео
На вкладке Макет страницы в группе Параметры страницы выберите Поля , и появится галерея Поля.
Выберите тип поля, который вы хотите применить.
Примечание: Если ваш документ содержит несколько разделов, новый тип поля будет применен только к текущему разделу. Чтобы применить новый тип полей к нескольким разделам, обязательно выберите каждый из них.
3.Сделайте новые настройки полей настройками по умолчанию для вашего шаблона. Каждый новый документ, основанный на этом шаблоне, будет автоматически использовать новые настройки полей.
Выберите Margins после выбора нового поля, а затем выберите Custom Margins .
В диалоговом окне Page Setup выберите Set As Default .
На вкладке Макет страницы в группе Параметры страницы выберите Поля , и появится галерея Поля.
В нижней части галереи полей выберите Пользовательские поля .
В диалоговом окне Page Setup введите новые значения полей.
Дополнительные советы по полям
Измените поля только для части документа, выделив текст и введя новые поля в диалоговом окне Page Setup .В поле Применить к щелкните Выделенный текст . Microsoft Word автоматически вставляет разрывы разделов до и после текста с новыми настройками полей.
Для большинства принтеров требуется минимальная ширина полей. Если ваши настройки слишком узкие, Microsoft Word отображает сообщение . Одно или несколько полей установлены за пределами области печати страницы . Щелкните Fix , чтобы автоматически увеличить ширину поля.Если вы проигнорируете это сообщение, Word отобразит другое сообщение с вопросом, хотите ли вы продолжить.
Минимальные настройки полей для печати зависят от вашего принтера, драйвера принтера и размера бумаги. Чтобы узнать о минимальных настройках, обратитесь к руководству по эксплуатации принтера.
Используйте зеркальные поля для настройки разворота страниц для двусторонних документов, таких как книги или журналы.Когда вы выбираете зеркальные поля, поля левой страницы являются зеркальным отображением полей правой страницы. Внутренние поля имеют одинаковую ширину, а внешние поля одинаковой ширины.
Примечание. Чтобы изменить ширину полей, щелкните Пользовательские поля в нижней части галереи полей. Введите новые значения в поля Внутри и За пределами .
Поле с переплетом добавляет дополнительное пространство к боковому полю, верхнему полю или внутренним полям документа, который вы планируете привязать, чтобы гарантировать, что текст не будет закрыт переплетом.
1. Поля желоба для переплета
2. Зеркальное отражение полей для лицевых страниц
Для установки поля желоба
На вкладке Макет страницы в группе Параметры страницы щелкните Поля .
Щелкните Пользовательские поля .
В поле Желоб введите ширину поля желоба.
В поле Gutter position щелкните Left или Top .
Примечание: Поле Положение желоба недоступно, если вы используете Зеркальные поля , 2 страницы на листе или Вариант сгиба книги .Для этих вариантов положение желоба определяется автоматически.
Word может отображать в документе линии для обозначения границ текста.
На вкладке Файл щелкните Параметры .
Щелкните Advanced , а затем установите флажок Показать границы текста под Показать содержимое документа .
Поля страницы отображаются в документе в виде пунктирных линий.
Примечание. Вы можете просматривать поля страницы в режиме макета печати или в режиме веб-макета, и границы текста не отображаются на напечатанной странице.
Что бы вы хотели сделать?
Microsoft Word предлагает несколько вариантов полей страницы.Вы можете использовать поля страницы по умолчанию или указать свои собственные.
Добавить поля для переплета
Поле желоба добавляет дополнительное пространство к боковому полю, верхнему полю или внутренним полям документа, который вы планируете привязать, чтобы гарантировать, что текст не будет закрыт переплетом.
1. Поля желоба для переплета
2.Зеркальные поля для лицевых страниц
Установить поля для разворота страниц
Используйте зеркальные поля для настройки разворота страниц для двусторонних документов, таких как книги или журналы. В этом случае поля левой страницы являются зеркальным отображением полей правой страницы. Внутренние поля имеют одинаковую ширину, а внешние поля одинаковой ширины.
Примечание. Вы можете установить поля переплета для документа с зеркальными полями, если документу требуется дополнительное пространство для переплета.
Складывание книги
Используя параметр Сгиб книги в диалоговом окне Параметры страницы , вы можете создать буклет. Используйте тот же вариант для создания меню, приглашения, программы мероприятия или любого другого типа документа с одним центральным сгибом.
1.Word вставляет одиночный сгиб книги по центру
После того, как вы настроили документ как буклет, работайте с ним так же, как с любым документом, вставляя текст, графику и другие визуальные элементы.
Для большинства принтеров требуется минимальная ширина полей. Если вы попытаетесь установить слишком узкие поля, Microsoft Word отобразит сообщение . Одно или несколько полей установлены за пределами области печати страницы. Щелкните Fix , чтобы автоматически увеличить ширину поля.Если вы проигнорируете это сообщение, Word отобразит другое сообщение с вопросом, хотите ли вы продолжить.
Минимальные настройки полей зависят от вашего принтера, драйвера принтера и размера бумаги. Чтобы узнать о настройках минимального поля, обратитесь к руководству по эксплуатации принтера.
На вкладке Макет страницы в группе Параметры страницы щелкните Поля .
Щелкните нужный тип поля. Чтобы выбрать наиболее распространенную ширину поля, выберите Нормальное .
Примечание. Когда вы щелкаете по нужному типу полей, весь документ автоматически изменяется на выбранный вами тип полей.
Вы можете указать свои собственные настройки полей.Щелкните Margins , нажмите Custom Margins , а затем в полях Top , Bottom , Left и Right введите новые значения полей.
Чтобы изменить поля по умолчанию, щелкните Margins после выбора нового поля, а затем щелкните Custom Margins . В диалоговом окне Page Setup нажмите кнопку Default , а затем нажмите Yes .Новые настройки по умолчанию сохраняются в шаблоне, на котором основан документ. Каждый новый документ, основанный на этом шаблоне, автоматически использует новые настройки полей.
Чтобы восстановить исходные настройки полей, щелкните Margins , а затем нажмите Custom Margins . Измените поля для Верхний , Нижний , Левый и Правый на 1 «.Затем нажмите кнопку По умолчанию и нажмите Да .
Чтобы изменить поля для части документа, выделите текст, а затем установите нужные поля, введя новые поля в диалоговом окне Page Setup . В поле Применить к щелкните Выделенный текст . Microsoft Word автоматически вставляет разрывы разделов до и после текста с новыми настройками полей.Если ваш документ уже разделен на разделы, вы можете щелкнуть в разделе или выбрать несколько разделов, а затем изменить поля.
Нажмите кнопку Microsoft Office , а затем щелкните Параметры Word .
Щелкните Advanced , а затем установите флажок Показать границы текста под Показать содержимое документа .
Поля страницы отображаются в документе в виде пунктирных линий.
Примечание. Вы можете просматривать поля страницы в режиме макета печати или в режиме веб-макета, и границы текста не отображаются на напечатанной странице.
Когда вы выбираете зеркальные поля, поля левой страницы являются зеркальным отображением полей правой страницы.Внутренние поля имеют одинаковую ширину, а внешние поля одинаковой ширины.
На вкладке Макет страницы в группе Параметры страницы щелкните Поля > Зеркальное отражение .
Щелкните Поля > Пользовательские поля и в полях Внутри и За пределами введите нужную ширину.
Параметр поля переплета добавляет дополнительное пространство к боковому или верхнему полю документа, который вы планируете переплести. Поле желоба помогает гарантировать, что текст не будет закрыт переплетом.
На вкладке Макет страницы в группе Параметры страницы щелкните Поля > Пользовательские поля .
В списке Несколько страниц щелкните Обычный .
В поле Желоб введите ширину поля желоба.
В поле Gutter position щелкните Left или Top .
Примечание: Поле Положение желоба недоступно, если вы используете Зеркальные поля , 2 страницы на листе или Вариант сгиба книги . Для этих вариантов положение желоба определяется автоматически.
Щелкните созданное текстовое поле, чтобы выделить его.
Щелкните вкладку Формат на ленте.
Щелкните маленькую кнопку в нижнем левом углу группы Размер .
В окне Форматировать текстовое поле щелкните вкладку Текстовое поле .
В разделе Internal margin вы можете настроить поля до желаемого размера.
Нажмите ОК .
Если в этой статье нет ответа на ваш вопрос, вы можете в любой момент поговорить с виртуальным агентом Microsoft или другим человеком.
Руководство по управлению макетом страницы
Microsoft Excel: Руководство по управлению макетом страницы
Макет страницы используется для описания группы команд, управляющих отображением электронной таблицы при печати. Наиболее популярные команды:
Поля
Повторяющиеся заголовки
Заголовки
Верхние и нижние колонтитулы
Фон
Ориентация и размер бумаги
Эти типы задач печати и обработки бумаги рассматриваются в наших курсах, которые проводятся в Лондон и Гилфорд.
Поля — встроенные
Имеется выбор из трех встроенных настроек полей: нормальное, узкое и широкое. Чтобы попасть сюда, выберите макет страницы / поля
Настройка настраиваемых полей
Если вы посмотрите на изображение выше, вы увидите, что справа внизу раскрывающегося списка находится вариант «Настраиваемые поля»
Если вы щелкните здесь, появится всплывающее окно:
Здесь вы можете настроить поля в соответствии с вашими требованиями.Вы также можете центрировать свое изображение на странице по горизонтали, вертикали или по обоим направлениям.
Изменение полей путем перетаскивания
Для этого вам нужно перейти в режим «Макет страницы». Есть вкладка «Макет страницы», НЕ ИСПОЛЬЗУЙТЕ ЭТО. На рисунке ниже показано, как перейти в нужное место: Вид / Макет страницы
Затем с помощью мыши вы можете захватить поля и перемещать их. Когда вы возьмете его в руки, вы увидите тонкую пунктирную линию, где бы вы ни отпустили ее, это то место, где будет новое поле.Если вы допустили ошибку, просто нажмите CLTRL Z, чтобы отменить ее.
Центрирование страницы, ориентация бумаги и установка размера бумаги
По умолчанию Excel будет печатать в верхнем левом углу страницы. Если вы хотите, чтобы он был напечатан в другом месте, вам нужно сообщить ему об этом. Чтобы центрировать его на странице, нажмите:
Page Layout / Margins. Откроется небольшое всплывающее окно, и вам нужно будет нажать «Custom Margins». Это откроет окно, которое вы видите на картинке ниже. В левом нижнем углу вы увидите варианты центрирования по горизонтали и / или вертикали.
Когда вы отцентрируете оба изображения, они будут выглядеть примерно так, как показано ниже.
На верхнем рисунке в этом разделе вы также увидите, что у вас есть возможность решить, в каком направлении вы хотите получить свою бумагу.
Существует широкий выбор стандартных размеров бумаги, из которых вы можете выбрать, когда вы нажимаете кнопку «Размер», и у вас также есть возможность установить свой собственный нестандартный размер.
Настройка области печати
Область печати по умолчанию для Excel — это ВСЕ данные.Если вы не настроили свои страницы, это может создать очень запутанную стопку бумаги, особенно если у вас много столбцов.
Другой способ — установить область печати. Для этого выделите данные, которые вы хотите распечатать, щелкните макет страницы, область печати, установите область печати.
После этого область будет обведена пунктирной линией. После этого данные можно фильтровать и сортировать. Идеально, если вы хотите напечатать «10 лучших» и добавлять новые данные каждый день / неделю.
Чтобы очистить область печати, см. 1-е изображение в этом разделе, и вы увидите, где это сделать.Он находится рядом с командой для установки области печати.
Вставка / удаление разрывов страниц
Excel создаст собственные разрывы страниц в зависимости от выбранного вами размера бумаги. Однако вы можете вставить свой собственный.
На рисунке ниже я выбрал ячейку A17, чтобы распечатать раздел «Достижение золотого стандарта в обслуживании клиентов» на отдельной странице. Чтобы попасть туда, настройте макет страницы вкладки, разрывы, вставьте разрыв страницы. Вы можете видеть, что под выбором вставки есть удаление разрыва страницы и сброс всех разрывов страницы.
Если вы хотите увидеть обзор разрывов, перейдите к предварительному просмотру / просмотру разрывов страницы. Отсюда вы можете перетащить толстые синие линии с помощью мыши, чтобы сбросить разрывы страниц.
Установка фона
Фон — это область за любыми данными или диаграммами, которые вы добавляете на рабочий лист, и по умолчанию он белый. Если вам нравятся изменения, вы можете вставить графику / фотографии / изображения логотипа компании на задний план. Они вставляются с размером по умолчанию и не могут быть изменены после вставки.Если вы хотите, чтобы они были более прозрачными, вам необходимо подготовить их таким образом перед вставкой. Как вы можете видеть ниже, этот логотип слишком большой и прочный, чтобы его можно было использовать.
Чтобы вставить или удалить фон — Макет страницы, а затем фон в группе настройки страницы.
Установка строк как повторяющихся заголовков для печати
При печати длинных электронных таблиц Excel по умолчанию будет печатать заголовки столбцов только на первой странице. Если у вас длинная электронная таблица, попытка запомнить все заголовки столбцов может быть довольно запутанной.
Чтобы распечатать их на каждом листе, сделайте следующее: Макет страницы / Печать заголовков Excel автоматически поместит туда строку 1, но вы можете щелкнуть там и выбрать любую строку.
Печать линий сетки и заголовков
Линии сетки значительно упрощают чтение и понимание большого объема данных. По умолчанию они отображаются на экране, но не всегда печатаются автоматически.
Ниже вы можете увидеть, что если вы перейдете к параметрам макета страницы / листа, вы можете выбрать, следует ли просматривать и печатать линии сетки.Рядом с ним вы также увидите, что у вас есть те же варианты выбора с заголовками. Заголовки — это буквы в верхней части столбцов и числа в левой части строк.
Из рисунка выше вы можете видеть, что вы также можете масштабировать свою электронную таблицу в процентах, чтобы она соответствовала вашей бумаге. Вы можете видеть изменения на экране, поскольку пунктирные линии будут перемещаться при каждом изменении масштаба.
Дополнительные сведения о нашем курсе Excel в Лондоне и Гилфорде см. На этой странице курса.
Форматирование страницы | IT Connect
В этом разделе показано, как изменить поля и размер страницы, как вставить верхние и нижние колонтитулы и как добавить номера страниц.
Поля страницы
Поля страницы документа можно изменить, используя линейки по бокам страницы или диалоговое окно «Параметры страницы».
Чтобы использовать метод линейки для изменения полей страницы документа:
Шаги Действия
Щелкните внутри документа, чтобы выделить его.Линейка теперь будет проходить вертикально по верхнему краю документа и по горизонтали по левому краю документа.
Наведите указатель мыши на область, где белая линейка изменится на синюю. Курсор изменится на двустороннюю стрелку.
Щелкните мышью и перетащите поле в желаемое место.
Чтобы вручную установить поля страницы с помощью диалогового окна Параметры страницы:
Шаги Действия
Щелкните вкладку Макет страницы .
Щелкните стрелку в правом нижнем углу группы Page Setup .Откроется диалоговое окно Page Layout .
Вы можете ввести значения маржи в поля Верхний , Нижний , Левый и Правый . Панель Preview позволяет просматривать эти изменения.
Щелкните ОК .
Размер и ориентация страницы
По умолчанию размер страницы установлен на Letter, и большинство людей привыкло работать с этим размером. Однако Word предоставляет много разных размеров страниц, которые соответствуют размеру бумаги, например Executive, Tabloid, A3, A5.Чтобы изменить размер вашей страницы:
Шаги Действия
Щелкните вкладку Макет страницы .
Нажмите кнопку Size в группе Page Setup . Откроется меню с доступными размерами страниц.
Выберите нужный размер в меню.
Верхние и нижние колонтитулы
Заголовок — это текст, который добавляется к верхнему полю каждой страницы, например заголовок документа или номер страницы. Нижний колонтитул — это текст, который добавляется к нижнему полю каждой страницы.Выполните следующие действия, чтобы добавить в документ верхние или нижние колонтитулы:
Шаги Действия
Щелкните вкладку Вставить .
Нажмите кнопку Верхний колонтитул или Нижний колонтитул в группе Верхний и нижний колонтитулы .
Выберите стиль верхнего или нижнего колонтитула, который вам нравится, из параметров меню.
Чтобы удалить верхний или нижний колонтитул из документа:
Шаги Действия
Щелкните вкладку Вставить .
Нажмите кнопку Верхний колонтитул или Нижний колонтитул в группе Верхний и нижний колонтитулы .
Щелкните Изменить верхний колонтитул или Изменить нижний колонтитул .
Номера страниц
Чтобы добавить номера страниц к вашему документу:
Шаги Действия
Щелкните вкладку Вставить .
Нажмите кнопку Номер страницы в группе Верхний и нижний колонтитулы .
Выберите место на странице, где вы хотите разместить числа.
Макет страницы, поля и нумерация — Высшая школа — Университет Британской Колумбии — Ванкувер
Размер страницы
Весь тезис должен быть на странице размером 8,5 x 11 дюймов и размещаться в одном столбце шириной в одну страницу. Не используйте в своей диссертации две или более колонки.
Пункты
Текст диссертации должен быть в виде абзаца.
первая строка каждого абзаца должна быть с отступом, ИЛИ
, между абзацами должно быть больше места, чем между строками.
Каждая глава должна начинаться вверху новой страницы.
Маржа
Слева: 1,25 дюйма (32 мм) рекомендуется для переплета; Минимум 1 дюйм.
Справа, сверху и снизу: рекомендуется 1 дюйм; 0,75 дюйма (19 мм) минимум
Шаг
строки текста должны иметь 1,5 или двойной интервал
цитаты из более чем одной строки могут быть разделены одним интервалом
благодарности, сноски, заголовки таблиц, рисунков и иллюстраций, а также библиография могут быть разделены одним интервалом при условии, что отдельные записи разделены полным пространством
Нумерация страниц
Предварительные страницы:
Номер
должен быть пронумерован римскими цифрами в нижнем регистре (ii, iii, iv и т. Д.)
титульная страница — «i», но этот номер не должен появляться на странице.
Нумерация
начинается с «ii» на странице комитета
первая страница аннотации — страница iii
Тело диссертации:
должен быть пронумерован арабскими цифрами (1, 2, 3 и т. Д.)
первая страница текста — «1»
последующих страницы пронумерованы непрерывно, включая страницы с таблицами и рисунками, библиографиями, приложениями и указателем
Всего диссертаций:
на каждой странице, кроме титульной, должен быть номер
В диссертации не должно быть пустых страниц.
нумерация страниц и полнота будут проверены при окончательной подаче
Номер страницы:
должен располагаться на расстоянии не менее 0,5 дюйма (12 мм) от края страницы
может находиться либо внизу по центру, либо вверху или внизу справа на странице, когда страница просматривается в портретной ориентации. Предпочтителен нижний правый угол.
Страницы с альбомной ориентацией
Альбомные страницы в PDF-файле должны быть ориентированы так, чтобы их можно было читать без поворота.Вам не нужно менять расположение или ориентацию номера страницы, но можете, если хотите.
No related posts.

DOCTYPE	Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>	Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>	Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>	В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>	В этой версии HTML только один доктайп.
XHTML 1.0
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>	Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>	Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.