======Адаптивная вёрстка сайта (notebook)======
Адаптивная верстка сайта (от английского, responsive web design, иногда — adaptive web design) — это создание структуры HTML-документа на базе HTML-разметки, предусматривающей автоматическую адаптацию веб-страницы в зависимости от размера экрана устройства пользователя. Иными словами - это макет веб-страницы, автоматически подстраивающийся под размер экрана разнообразных гаджетов пользователя, таких как планшеты и смартфоны.
{{:software:development:demo:notebook_site_1000.png?550 |}} В адаптивной вёрстка предполагается использование современных технологий, делающих основные элементы, изменяющими свой размер и расположение на странице, исходя из ширины окна. При этом отсутствуют и полосы прокрутки. Для просмотра контента достаточно просто листать страницы вниз. Для отображения на смартфонах и планшетах лишние элементы отсеивают: убирают графические объекты, сворачивают меню, оставляя только самые значимые блоки. Параллельно увеличивается размер элементов управления, чтобы нужную кнопку без труда можно было нажать пальцем, ведь на обычном сайте попасть по ссылке с первого раза удается не всегда. Все это достигается с помощью медиа-запросов, которые лежат в основе данной технологии, меняют масштаб элементов, а CSS свойства дают полную свободу действий, управляя компоновкой и расположением блоков на странице, автоматически преобразуя шаблон.
Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы. Основные примеры создания приведены в статье [[software:development:web:docs:learn:css:css_layout:responsive_design|Отзывчивый дизайн]].
=====Пример сайта=====
Пример сайта выполненного в [[https://book51.ru/demo/code/notebook/index.html|адаптивной вёрстке]] можно посмотреть в разделе пример или перейдя по [[https://book51.ru/demo/code/notebook/index.html|ссылке]]. для понимания примера необходимо сузить просматриваемую страницу в браузере или просмотреть на компьютере и в браузере мобильного устройства.
=====Шаблон страницы при верстки=====
{{:software:development:demo:notebook_site_2.gif?200 |}} Мы будем использовать сематические элементы - элементы, четко описывающие их значения как для браузера, так и для разработчика. Примеры **не семантических** элементов: **(div)** и **(span)** — ничего не говорит о его содержимом. При этом примеры **семантических** элементов: **(form)**, **(table)** и **(article)** — четко определяет его содержание. Страница будет состоять из пяти основных блоков: Шапка сайта или хедер (от анг. header — заголовок) – это титульная верхняя часть страницы, в которой располагаются элементы навигации (nav или меню) и элементы, содержащие информацию о сайте, блок основного содержимого (section), блок вспомогательного содержимого (article) и (aside) — это боковая панель сайта, визуально разграниченная с контентом на странице. Благодаря ее блокам посетители понимают, что и где расположено на сайте (ранее мы знали ее как сайдбар). Ширина боковой панели обычно меньше ширины основного блока с контентом. подвал или футер (от анг. footer - нижний колонтитул) — блок в нижней части страницы. За основу преломления шаблона возьмём 768px и 480px.
\\
/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */
/* Стили CSS (по умолчанию) - для ширины viewport <768px */
/* Устроства с маленьким экраном (планшеты, 768px и выше) */
@media (min-width: 768px) {
/* Стили для устройств с шириной viewport, находящейся в диапазоне 768px - 991px */
}
/* Устройства со средним экраном (ноутбуки и компьютеры, 992px и выше) */
@media (min-width: 992px) {
/* Стили для устройств с шириной viewport, находящейся в диапазоне 992px - 1199px */
}
/* Устройства с большим экраном (компьютеры, 1200px и выше) */
@media (min-width: 1200px) {
/* Стили для устройств с шириной viewport >1200px */
}
Так-же правильным будет создать папки js (для хранения файлов скриптов), css (для хранения файлов стилей) и images (для картинок).
\\
{{:software:development:demo:notebook_1.jpg?400|}}
\\
Создадим в одноименных папках файлы
Responsive site layout
#: Пояснительная записка блока :
- **%%%%**
/* Общие стили
----------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
a {
border-bottom: 1px dotted #BBBBBB;
color: #333333;
text-decoration: none;}
#navbar-iframe{height:0px; display:none}
/* Конец и сброс стиля */
body {
background:url(../images/notebook_body.png); /*общий фон страницы*/
font-family: Geneva, Arial, Helvetica, sans-serif;/*шрифты для заголовка*/
font-size: 14px; /* Размер текста */
line-height: 1; /*межстрочный интервал текста*/
color: #000000; /*цвет текста #000000-черный*/}
p {padding: 0 0 1.3em;}
h1, h2 , h3, h4, h5, h6 {
display:block;
color:#13382A;
line-height:100%;
font-family:Droid Serif, Georgia, serif;
text-shadow:1px 1px #fff;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none;}
h1 {letter-spacing:-2px;}
h2 {
font-size:16px;
margin:10px 0 15px;
font-weight:bold;
}
a {
color:#333;
border-bottom: 1px dotted #bbb;
text-decoration:none;
}
a:hover {
color:#A3A30E;
border-bottom: 1px dotted #A3A30E;
}
/* стиль внешней оболочки всей видимой страницы Outer-Wrapper
----------------------------------------- */
#outer-wrapper {
width:922px;
margin:10px auto 0;
padding:0px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}
====3. Блок header ====
В данный блок поместим логотип, слоган, меню (в нашем случае кнопку скрытого меню) и верхнюю часть картинки- тела нашей веб-страницы и открыв "Пояснительную записку блока main" разберем данный код:
#:Пояснительная записка блока header:
- **%%%%**