Различия

Показаны различия между двумя версиями страницы.

--- software:development:demo:responsive_site_layout_notebook [2024/03/10 18:23] – [Шаблон страницы при верстки] vladpolskiy
+++ software:development:demo:responsive_site_layout_notebook [2025/02/01 09:24] (текущий) – внешнее изменение 127.0.0.1
@@ Строка 1: / Строка 1: @@
 ======Адаптивная вёрстка сайта (notebook)======
 Адаптивная верстка сайта (от английского, 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|Отзывчивый дизайн]].
+=====Пример сайта=====
+Пример сайта выполненного в [[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>
 =====Шаблон страницы при верстки=====
@@ Строка 32: / Строка 40: @@
 {{: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, которые еще не до конца стандартизированы.
+Создадим в одноименных папках файлы <fc #22b14c>notebook.css</fc> и <fc #22b14c>notebook.js</fc>. Так-же в папку 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|}}
@@ Строка 61: / Строка 69: @@
 #: Пояснительная записка блока <head>:
-  - **%%<!DOCTYPE html>%%** <color #22b14c>- указания типа текущего документа (HTML5).</color>
+  - **%%<!DOCTYPE html>%%** <fc #22b14c>- указания типа текущего документа (HTML5).</fc>
-  - **%%<html>%%** <color #22b14c>- открывающий тег, является началом блока (контейнера), который заключает в себе все содержимое веб-страницы.</color>
+  - **%%<html>%%** <fc #22b14c>- открывающий тег, является началом блока (контейнера), который заключает в себе все содержимое веб-страницы.</fc>
-  - **%%<head>%%** <color #22b14c>- открывающий тег блока , содержащего машиночитаемую информацию (metadata).</color>
+  - **%%<head>%%** <fc #22b14c>- открывающий тег блока , содержащего машиночитаемую информацию (metadata).</fc>
-  - **%%<meta charset="utf-8">%%** <color #22b14c>- указывает кодировку документа.</color>
+  - **%%<meta charset="utf-8">%%** <fc #22b14c>- указывает кодировку документа.</fc>
-  - **%%<meta name="viewport" content="width=device-width, initial-scale=1">%%** <color #22b14c>- сообщение браузеру, что ширина страницы равна ширине устройства, с которого эта страница просматривается. (width(ширина сайта) = device-width(ширина устройства) и масштаб: 1).</color>
+  - **%%<meta name="viewport" content="width=device-width, initial-scale=1">%%** <fc #22b14c>- сообщение браузеру, что ширина страницы равна ширине устройства, с которого эта страница просматривается. (width(ширина сайта) = device-width(ширина устройства) и масштаб: 1).</fc>
-  - **%%<title>Responsive site layout</title>%%** <color #22b14c>- заголовок страницы на вкладке браузера.</color>
+  - **%%<title>Responsive site layout</title>%%** <fc #22b14c>- заголовок страницы на вкладке браузера.</fc>
-  - **%%<link type="Image/x-icon" href="images/favicon.ico" rel="shortcut icon">%%** <color #22b14c>- иконка страницы на вкладке браузера.</color>
+  - **%%<link type="Image/x-icon" href="images/favicon.ico" rel="shortcut icon">%%** <fc #22b14c>- иконка страницы на вкладке браузера.</fc>
-  - **%%<link rel="stylesheet" type="text/css" href="css/Font-Awesome-6.x/css/all.css" rel="stylesheet">%%** <color #22b14c>- подключение библиотеки векторных иконок.</color>
+  - **%%<link rel="stylesheet" type="text/css" href="css/Font-Awesome-6.x/css/all.css" rel="stylesheet">%%** <fc #22b14c>- подключение библиотеки векторных иконок.</fc>
-  - **%%<link rel="stylesheet" type="text/css" href="css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet">%%** <color #22b14c>- подключение библиотеки векторных иконок.</color>
+  - **%%<link rel="stylesheet" type="text/css" href="css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet">%%** <fc #22b14c>- подключение библиотеки векторных иконок.</fc>
-  - **%%<link rel="stylesheet" type="text/css" href="css/notebook.css">%%** <color #22b14c>- подключение внешней **таблицы стилей CSS** описанный ниже.</color>
+  - **%%<link rel="stylesheet" type="text/css" href="css/notebook.css">%%** <fc #22b14c>- подключение внешней **таблицы стилей CSS** описанный ниже.</fc>
-  - **%%<script src="js/jquery/2.2.2/jquery.min.js"></script>%%** <color #22b14c>- подключение библиотеки с набором функций **JavaScript**, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций).</color>
+  - **%%<script src="js/jquery/2.2.2/jquery.min.js"></script>%%** <fc #22b14c>- подключение библиотеки с набором функций **JavaScript**, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций).</fc>
-  - **%%<script src="js/prefixfree/1.0.7/prefixfree.min.js"></script>%%** <color #22b14c>- подключение плагина **prefixfree**, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы.</color>
+  - **%%<script src="js/prefixfree/1.0.7/prefixfree.min.js"></script>%%** <fc #22b14c>- подключение плагина **prefixfree**, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы.</fc>
-  - **%%<script src="js/notebook.js"></script>%%** <color #22b14c>- подключение файл скриптов **notebook.js**, куда в дальнейшем будем писать наши функции кнопок меню и т.д.</color>
+  - **%%<script src="js/notebook.js"></script>%%** <fc #22b14c>- подключение файл скриптов **notebook.js**, куда в дальнейшем будем писать наши функции кнопок меню и т.д.</fc>
-  - **%%</head>%%** <color #22b14c>- закрывающий тег блока.</color>
+  - **%%</head>%%** <fc #22b14c>- закрывающий тег блока.</fc>
 :#
+====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" разберем данный код:
@@ Строка 130: / Строка 223: @@
 </code>
 #:Пояснительная записка блока header:
-  - **%%<body>%%** <color #22b14c>- начало блока видимой части веб-страницы.</color>
+  - **%%<body>%%** <fc #22b14c>- начало блока видимой части веб-страницы.</fc>
-  - **%%<div id='outer-wrapper'>%%** <color #22b14c>- начало внешнего блока содержания веб-страницы.</color>
+  - **%%<div id='outer-wrapper'>%%** <fc #22b14c>- начало внешнего блока содержания веб-страницы.</fc>
-  - **%%<header id='header-wrapper'>%%** <color #22b14c>- начало контейнера веб страницы,где располагается логотип, название сайта, поисковая форма, навигационные ссылки и др.</color>
+  - **%%<header id='header-wrapper'>%%** <fc #22b14c>- начало контейнера веб страницы,где располагается логотип, название сайта, поисковая форма, навигационные ссылки и др.</fc>
-  - **%%<nav class='header section' id='header'>%%** <color #22b14c>- начало контейнера меню веб-страницы.</color>
+  - **%%<nav class='header section' id='header'>%%** <fc #22b14c>- начало контейнера меню веб-страницы.</fc>
-  - **%%<div id='header-inner'>%%** <color #22b14c>- сам контернер с название сайта, слоганом и кнопкой меню</color>
+  - **%%<div id='header-inner'>%%** <fc #22b14c>- сам контернер с название сайта, слоганом и кнопкой меню</fc>
-  - **%%<div class='titlewrapper'>%%** <color #22b14c>- начало контейнера названия сайта</color>
+  - **%%<div class='titlewrapper'>%%** <fc #22b14c>- начало контейнера названия сайта</fc>
-  - **%%<a href="tryhow_js_mobile_navbar_hor.php"><h1 class='title'>Notebook</h1></a>%%** <color #22b14c>- Название сайта в виде ссылки.</color>
+  - **%%<a href="tryhow_js_mobile_navbar_hor.php"><h1 class='title'>Notebook</h1></a>%%** <fc #22b14c>- Название сайта в виде ссылки.</fc>
-  - **%%<div class='descriptionwrapper'>%%** <color #22b14c>- начало блок слогана.</color>
+  - **%%<div class='descriptionwrapper'>%%** <fc #22b14c>- начало блок слогана.</fc>
-  - **%%<p class='description'><span>Наша записная книга</span></p>%%** <color #22b14c>- текст слогана.</color>
+  - **%%<p class='description'><span>Наша записная книга</span></p>%%** <fc #22b14c>- текст слогана.</fc>
-  - **%%<div class="topnav">%%** <color #22b14c>- начало блока скрытого меню.</color>
+  - **%%<div class="topnav">%%** <fc #22b14c>- начало блока скрытого меню.</fc>
-  - **%%<div id="myLinks">%%** <color #22b14c>- блок ссылок-кнопок скрытого меню.</color>
+  - **%%<div id="myLinks">%%** <fc #22b14c>- блок ссылок-кнопок скрытого меню.</fc>
-  - **%%<a href="tryhow_js_mobile_navbar_hor.php"> Контакт </a>%%** <color #22b14c>- Кнопки - ссылка.</color>
+  - **%%<a href="tryhow_js_mobile_navbar_hor.php"> Контакт </a>%%** <fc #22b14c>- Кнопки - ссылка.</fc>
-  - **%%<div id="menu_btn" class="openbtn" onclick="myFunction()" href="javascript:void(0);">%%** <color #22b14c>- начало контейнера кнопки выпадающего меню. onclick="myFunction()" задает функцию кнопке при нажатии . href="javascript:void(0);" указывает, что ссылка ничего не делает в данный момент</color>
+  - **%%<div id="menu_btn" class="openbtn" onclick="myFunction()" href="javascript:void(0);">%%** <fc #22b14c>- начало контейнера кнопки выпадающего меню. onclick="myFunction()" задает функцию кнопке при нажатии . href="javascript:void(0);" указывает, что ссылка ничего не делает в данный момент</fc>
-  - **%%<span></span>%%** <color #22b14c>- полоски на кнопке.</color>
+  - **%%<span></span>%%** <fc #22b14c>- полоски на кнопке.</fc>
 :#
+====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>%%** <fc #22b14c>- начало блока видимой части веб-страницы.</fc>
+  - **%%<div id='outer-wrapper'>%%** <fc #22b14c>- начало внешнего блока содержания веб-страницы.</fc>
+:#
+===Пример верхнего колонтитула===
+{{: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}}