| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| software:development:demo:responsive_site_layout_notebook [2024/03/10 17:13] – [2. Блок header] vladpolskiy | software:development:demo:responsive_site_layout_notebook [2024/03/10 23:19] (текущий) – [Ссылки и Дополнения] vladpolskiy |
|---|
| ======Адаптивная вёрстка сайта (notebook)====== | ======Адаптивная вёрстка сайта (notebook)====== |
| Адаптивная верстка сайта (от английского, responsive web design, иногда — adaptive web design) — это создание структуры HTML-документа на базе HTML-разметки, предусматривающей автоматическую адаптацию веб-страницы в зависимости от размера экрана устройства пользователя. Иными словами - это макет веб-страницы, автоматически подстраивающийся под размер экрана разнообразных гаджетов пользователя, таких как планшеты и смартфоны. | Адаптивная верстка сайта (от английского, responsive web design, иногда — adaptive web design) — это создание структуры HTML-документа на базе HTML-разметки, предусматривающей автоматическую адаптацию веб-страницы в зависимости от размера экрана устройства пользователя. Иными словами - это макет веб-страницы, автоматически подстраивающийся под размер экрана разнообразных гаджетов пользователя, таких как планшеты и смартфоны. |
| {{:software:development:demo:blender3d_demo_0.jpg?550 |}} В адаптивной вёрстка предполагается использование современных технологий, делающих основные элементы, изменяющими свой размер и расположение на странице, исходя из ширины окна. При этом отсутствуют и полосы прокрутки. Для просмотра контента достаточно просто листать страницы вниз. Для отображения на смартфонах и планшетах лишние элементы отсеивают: убирают графические объекты, сворачивают меню, оставляя только самые значимые блоки. Параллельно увеличивается размер элементов управления, чтобы нужную кнопку без труда можно было нажать пальцем, ведь на обычном сайте попасть по ссылке с первого раза удается не всегда. Все это достигается с помощью медиа-запросов, которые лежат в основе данной технологии, меняют масштаб элементов, а CSS свойства дают полную свободу действий, управляя компоновкой и расположением блоков на странице, автоматически преобразуя шаблон. | {{:software:development:demo:notebook_site_1000.png?550 |}} В адаптивной вёрстка предполагается использование современных технологий, делающих основные элементы, изменяющими свой размер и расположение на странице, исходя из ширины окна. При этом отсутствуют и полосы прокрутки. Для просмотра контента достаточно просто листать страницы вниз. Для отображения на смартфонах и планшетах лишние элементы отсеивают: убирают графические объекты, сворачивают меню, оставляя только самые значимые блоки. Параллельно увеличивается размер элементов управления, чтобы нужную кнопку без труда можно было нажать пальцем, ведь на обычном сайте попасть по ссылке с первого раза удается не всегда. Все это достигается с помощью медиа-запросов, которые лежат в основе данной технологии, меняют масштаб элементов, а CSS свойства дают полную свободу действий, управляя компоновкой и расположением блоков на странице, автоматически преобразуя шаблон. |
| Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы. Основные примеры создания приведены в статье [[software:development:web:docs:learn:css:css_layout:responsive_design|Отзывчивый дизайн]]. | Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы. Основные примеры создания приведены в статье [[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|ссылке]]. для понимания примера необходимо сузить просматриваемую страницу в браузере или просмотреть на компьютере и в браузере мобильного устройства. |
| | |
| | <html> |
| | <iframe height="1800" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code/notebook/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> |
| | </iframe> |
| | </html> |
| |
| =====Шаблон страницы при верстки===== | =====Шаблон страницы при верстки===== |
| \\ | \\ |
| {{:software:development:demo:notebook_1.jpg?400|}} | {{:software:development:demo:notebook_1.jpg?400|}} |
| | \\ |
| | Создадим в одноименных папках файлы <color #22b14c>notebook.css</color> и <color #22b14c>notebook.js</color>. Так-же в папку css {{ :software:development:demo:font-awesome-6.x.rar |скачаем}} и разархивируем папку шрифтов «Font Awesome» – набора иконок, который используется для веб-разработки и создания интерфейсов. А в папку js скачаем и разархивируем библиотеки с набором функций {{ :software:development:demo:jquery.rar |JavaScript}}, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций) и плагин {{ :software:development:demo:prefixfree.rar |prefixfree}}, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы. Так-же поступим с папкой {{ :software:development:demo:images.rar |images}}. |
| | \\ |
| | {{:software:development:demo:notebook_site_3.png?400|}} |
| | \\ |
| |
| ====1. Блок <head>==== | ====1. Блок <head>==== |
| - **%%</head>%%** <color #22b14c>- закрывающий тег блока.</color> | - **%%</head>%%** <color #22b14c>- закрывающий тег блока.</color> |
| :# | :# |
| | ====2. Общие CSS-стили==== |
| |
| ====2. Блок header ==== | <code css CSS> |
| | /* Общие стили |
| | ----------------------------------------- */ |
| | 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; |
| | } |
| | </code> |
| | ====3. Блок header ==== |
| В данный блок поместим логотип, слоган, меню (в нашем случае кнопку скрытого меню) и верхнюю часть картинки- тела нашей веб-страницы и открыв "Пояснительную записку блока main" разберем данный код: | В данный блок поместим логотип, слоган, меню (в нашем случае кнопку скрытого меню) и верхнюю часть картинки- тела нашей веб-страницы и открыв "Пояснительную записку блока main" разберем данный код: |
| |
| </body> | </body> |
| </code> | </code> |
| #:Пояснительная записка блока main: | #:Пояснительная записка блока header: |
| - **%%<body>%%** <color #22b14c>- начало блока хранения содержания веб-страницы (контента).</color> | - **%%<body>%%** <color #22b14c>- начало блока видимой части веб-страницы.</color> |
| - **%%<div class="container">%%** <color #22b14c>- начало контейнера контента веб страницы.</color> | - **%%<div id='outer-wrapper'>%%** <color #22b14c>- начало внешнего блока содержания веб-страницы.</color> |
| - **%%<div class="posts-list">%%** <color #22b14c>- начало контейнера с анонсом статей.</color> | - **%%<header id='header-wrapper'>%%** <color #22b14c>- начало контейнера веб страницы,где располагается логотип, название сайта, поисковая форма, навигационные ссылки и др.</color> |
| - **%%<article id="post-1" class="post">%%** <color #22b14c>- начало контейнера с анонсом 1й статьи.</color> | - **%%<nav class='header section' id='header'>%%** <color #22b14c>- начало контейнера меню веб-страницы.</color> |
| - **%%<div class="post-image"><a href=""><img src="blender3d_demo/blender3d_demo_1.</color>png" ></a></div>%%** <color #22b14c>- блок вставки картинки с указанием месторасположения файла.</color> | - **%%<div id='header-inner'>%%** <color #22b14c>- сам контернер с название сайта, слоганом и кнопкой меню</color> |
| - **%%<div class="post-content">%%** <color #22b14c>- начало блока текстовой информации 1й статьи.</color> | - **%%<div class='titlewrapper'>%%** <color #22b14c>- начало контейнера названия сайта</color> |
| - **%%<div class="category"><a href="">Features</a></div>%%** <color #22b14c>- блок указания категории 1й статьи.</color> | - **%%<a href="tryhow_js_mobile_navbar_hor.php"><h1 class='title'>Notebook</h1></a>%%** <color #22b14c>- Название сайта в виде ссылки.</color> |
| - **%%<h2 class="post-title">Blender 3.</color>6 LTS</h2>%%** <color #22b14c>- блок заголовка 1й статьи.</color> | - **%%<div class='descriptionwrapper'>%%** <color #22b14c>- начало блок слогана.</color> |
| - **%%<p>%%**Blender 3D program Blender is one of the most popular 3D modeling software. This is a multifunctional software, acquaintance with which will be useful for those who are interested in 3d graphics and who want to understand the basic principles of this industry.</color> - **%%</p>%%** <color #22b14c>- блок текста 1й статьи.</color> | - **%%<p class='description'><span>Наша записная книга</span></p>%%** <color #22b14c>- текст слогана.</color> |
| - **%%<div class="post-footer">%%** <color #22b14c>- начало блока "Читать далее" 1й статьи.</color> | - **%%<div class="topnav">%%** <color #22b14c>- начало блока скрытого меню.</color> |
| - **%%<a class="more-link" href="">Continue Reading</a>%%** <color #22b14c>- блок надписи "Читать далее" 2й статьи.</color> | - **%%<div id="myLinks">%%** <color #22b14c>- блок ссылок-кнопок скрытого меню.</color> |
| - **%%<div class="post-social">%%** <color #22b14c>- начало блока иконок-ссылок социальных сетей.</color> | - **%%<a href="tryhow_js_mobile_navbar_hor.php"> Контакт </a>%%** <color #22b14c>- Кнопки - ссылка.</color> |
| - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <color #22b14c>- иконка-ссылка "facebook".</color> | - **%%<div id="menu_btn" class="openbtn" onclick="myFunction()" href="javascript:void(0);">%%** <color #22b14c>- начало контейнера кнопки выпадающего меню. onclick="myFunction()" задает функцию кнопке при нажатии . href="javascript:void(0);" указывает, что ссылка ничего не делает в данный момент</color> |
| - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <color #22b14c>- иконка-ссылка "twitter".</color> | - **%%<span></span>%%** <color #22b14c>- полоски на кнопке.</color> |
| - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <color #22b14c>- иконка-ссылка "pinterest".</color> | |
| - **%%</div>%%** <color #22b14c>- конец блока иконок-ссылок социальных сетей.</color> | |
| - **%%</div>%%** <color #22b14c>- конец блока "Читать далее" 1й статьи.</color> | |
| - **%%</div>%%** <color #22b14c>- конец блока текстовой информации 1й статьи.</color> | |
| - **%%</article>%%** <color #22b14c>- конец контейнера с анонсом 1й статьи.</color> | |
| - **%%<article id="post-2" class="post">%%** <color #22b14c>- начало контейнера с анонсом 2й статьи.</color> | |
| - **%%<div class="post-image"><a href="">%%** <color #22b14c>- начало блока вставки видеофайла с указанием месторасположения.</color> | |
| - **%%<video width="100%" controls="controls" poster="blender3d_demo/poster.</color>jpg">%%** <color #22b14c>- начало вставки видеофайла с указанием ширины, вставки панели управления, и файла-постера с указанием месторасположения.</color> | |
| - **%%<source src="video/duel.</color>ogv" type='video/ogg; codecs="theora, vorbis"'>%%** <color #22b14c>- | |
| - **%%<source src="blender3d_demo/vesna(720p).</color>mp4" type='video/mp4; codecs="avc1.</color>42E01E, mp4a.</color>40.</color>2"'>%%** <color #22b14c>- месторасположение встраиваемо видеофайла с указанием кодеков.</color> | |
| - **%%</video>%%** <color #22b14c>- закрывающий тег вставки видеофайла.</color> | |
| - **%%</a></div>%%** <color #22b14c>- конец блока вставки видеофайла с указанием месторасположения.</color> | |
| - **%%<div class="post-content">%%** <color #22b14c>- начало блока текстовой информации 2й статьи.</color> | |
| - **%%<div class="category"><a href="">Download</a></div>%%** <color #22b14c>- блок указания категории 2й статьи.</color> | |
| - **%%<h2 class="post-title">Spring</h2>%%** <color #22b14c>- блок заголовка 2й статьи.</color> | |
| - **%%<p>%%**Is the story of a shepherdess and her dog who encounter ancient spirits in order to continue the cycle of life.**%%</p>%%** <color #22b14c>- блок текста 2й статьи.</color> | |
| - **%%<div class="post-footer">%%** <color #22b14c>- начало блока "Читать далее" 2й статьи.</color> | |
| - **%%<a class="more-link" href="">Continue Reading</a>%%** <color #22b14c>- блок надписи "Читать далее" 2й статьи.</color> | |
| - **%%<div class="post-social">%%** <color #22b14c>- начало блока иконок-ссылок социальных сетей.</color> | |
| - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <color #22b14c>- иконка-ссылка "facebook".</color> | |
| - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <color #22b14c>- иконка-ссылка "twitter".</color> | |
| - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <color #22b14c>- иконка-ссылка "pinterest".</color> | |
| - **%%</div>%%** <color #22b14c>- конец блока иконок-ссылок социальных сетей.</color> | |
| - **%%</div>%%** <color #22b14c>- конец блока "Читать далее" 2й статьи.</color> | |
| - **%%</div>%%** <color #22b14c>- конец блока текстовой информации 2й статьи.</color> | |
| - **%%</article>%%** <color #22b14c>- конец контейнера с анонсом 2й статьи.</color> | |
| - **%%</div>%%** <color #22b14c>- конец контейнера с анонсом статей.</color> | |
| :# | :# |
| | ====4. Стили блока header==== |
| | |
| | <code css CSS> |
| | /* стили верхнего колонтитула header |
| | ----------------------------------------- */ |
| | #header-wrapper { |
| | background:url(../images/notebook_header_ch.png) no-repeat; |
| | height:110px; |
| | padding:24px 50px 0 75px; |
| | position:relative;} |
| | #header-inner { |
| | background-position: center; |
| | margin-left: auto; |
| | margin-right: auto;} |
| | #header { |
| | margin: 0px; |
| | color:#666666;} |
| | #header h1 { |
| | margin: 0px; |
| | font-family:Droid Serif, Georgia, serif; |
| | font-weight:bold; |
| | font-size:30px; |
| | color:#0C211A; |
| | text-shadow:1px 1px #fff; |
| | letter-spacing:-2px; |
| | padding:0; |
| | line-height:40px;} |
| | #header a { |
| | color:#666666; |
| | text-decoration:none;border:none; } |
| | #header a:hover { color:#666666; } |
| | |
| | /* стили слогана |
| | ----------------------------------------- */ |
| | #header .description { |
| | margin: 0px; |
| | padding:0px; |
| | font-size:10px; |
| | color:#666; |
| | text-transform:uppercase; |
| | font-family:Arial, Helvetica, sans-serif; } |
| | |
| | |
| | |
| | |
| | /* стили кнопка навигации |
| | ----------------------------------------- */ |
| | |
| | .topnav #myLinks { |
| | display: none; |
| | position: absolute; /* позиционируется относительно ближайшего родительского элемента */ |
| | cursor: pointer; /* форму курсора, когда он находится в пределах элемента. */ |
| | height:42px; /* высота кнопки*/ |
| | border-radius: 3px; /* радиус углов кнопки */ |
| | right: 136px; /* отступ справа совпадает с началом кнопки */ |
| | top: 31px; /* отступ сверху кнопки */ |
| | |
| | |
| | } |
| | |
| | .topnav a { |
| | float: right; |
| | padding: 10px 12px; /*высота от верха кнопки и растояние между кнопками*/ |
| | font-size: 20px; /*высота шрифта*/ |
| | border-radius: 3px; /* радиус углов кнопки */ |
| | background-color:#c0c0c0; /* Цвет символа */ |
| | } |
| | |
| | /* настройка кнопки меню */ |
| | .openbtn { |
| | position: absolute; /* позиционируется относительно ближайшего родительского элемента */ |
| | background:#696969; /*Цвет кнопки серый*/ |
| | cursor: pointer; /* форму курсора, когда он находится в пределах элемента. */ |
| | width: 50px; /* ширина кнопки */ |
| | height:42px; /* высота кнопки*/ |
| | border-radius: 3px; /* радиус углов кнопки */ |
| | right: 90px; /* отступ справа кнопки */ |
| | top: 31px; /* отступ сверху кнопки */ |
| | } |
| | |
| | /* настройка полос кнопки меню */ |
| | .openbtn span{ |
| | display: inline-block; /* разрешение устанавливать ширину и высоту элемента */ |
| | position: absolute; /* позиционируется относительно ближайшего родительского элемента */ |
| | height:3.5px; /* ширина полосы */ |
| | width: 30px; /* длина полосы */ |
| | background: #fff; /* цвет полосы */ |
| | left: 10px; /* отступ от края кнопки слева */ |
| | } |
| | |
| | /* span (1)расположение первой полосы относитель верхней границы кнопки */ |
| | .openbtn span:nth-of-type(1) { |
| | top:10px; |
| | } |
| | |
| | /* span (2)расположение второй полосы относитель верхней границы кнопки */ |
| | .openbtn span:nth-of-type(2) { |
| | top:20px; |
| | } |
| | |
| | /* span (3)расположение третей полосы относитель верхней границы кнопки */ |
| | .openbtn span:nth-of-type(3) { |
| | top:30px; |
| | } |
| | </code> |
| | ====5. Код javascript кнопки меню==== |
| | В данный блок поместим логотип, слоган, меню (в нашем случае кнопку скрытого меню) и верхнюю часть картинки- тела нашей веб-страницы и открыв "Пояснительную записку блока main" разберем данный код: |
| | |
| | <code javascript JavaScript> |
| | function myFunction() { |
| | var x = document.getElementById("myLinks"); |
| | if (x.style.display === "block") { |
| | x.style.display = "none"; |
| | } else { |
| | x.style.display = "block"; |
| | } |
| | } |
| | </code> |
| | #:Пояснительная записка блока header: |
| | - **%%<body>%%** <color #22b14c>- начало блока видимой части веб-страницы.</color> |
| | - **%%<div id='outer-wrapper'>%%** <color #22b14c>- начало внешнего блока содержания веб-страницы.</color> |
| | :# |
| | |
| | ===Пример верхнего колонтитула=== |
| | {{:software:development:demo:notebook_site_4.png?|}} |
| | =====Ссылки и Дополнения===== |
| | |
| | * {{ :software:development:demo:font-awesome-6.x.rar |папка шрифтов «Font Awesome»}} |
| | * {{ :software:development:demo:jquery.rar |библиотеки с набором функций JavaScript}} |
| | * {{ :software:development:demo:prefixfree.rar |плагин prefixfree}} |
| | * {{ :software:development:demo:images.rar |папки images с иконками, картинкой фона и т.д. }} |
| | * {{ :software:development:demo:notebook.rar |архив папки примера notebook}} |
