Различия

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

--- software:development:demo:responsive_site_layout_notebook [2024/03/10 19:33] – [3. Блок header] 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>
 =====Шаблон страницы при верстки=====
@@ Строка 361: / Строка 369: @@
   * {{ :software:development:demo:prefixfree.rar |плагин prefixfree}}
   * {{ :software:development:demo:images.rar |папки images с иконками, картинкой фона и т.д. }}
+  * {{ :software:development:demo:notebook.rar |архив папки примера notebook}}