Различия

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

--- software:development:demo:responsive_site_layout_notebook [2024/03/10 18:32] – [Ссылки и Дополнения] vladpolskiy
+++ software:development:demo:responsive_site_layout_notebook [2024/03/10 23:19] (текущий) – [Ссылки и Дополнения] vladpolskiy
@@ Строка 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>
 =====Шаблон страницы при верстки=====
@@ Строка 76: / Строка 84: @@
   - **%%</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" разберем данный код:
@@ Строка 144: / Строка 237: @@
   - **%%<div id="menu_btn" class="openbtn" onclick="myFunction()" href="javascript:void(0);">%%** <color #22b14c>- начало контейнера кнопки выпадающего меню. onclick="myFunction()" задает функцию кнопке при нажатии . href="javascript:void(0);" указывает, что ссылка ничего не делает в данный момент</color>
   - **%%<span></span>%%** <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?|}}
 =====Ссылки и Дополнения=====
@@ Строка 152: / Строка 369: @@
   * {{ :software:development:demo:prefixfree.rar |плагин prefixfree}}
   * {{ :software:development:demo:images.rar |папки images с иконками, картинкой фона и т.д. }}
+  * {{ :software:development:demo:notebook.rar |архив папки примера notebook}}