| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| software:development:demo:responsive_site_layout_book [2024/03/08 20:55] – vladpolskiy | software:development:demo:responsive_site_layout_book [2025/02/01 09:23] (текущий) – внешнее изменение 127.0.0.1 |
|---|
| {{:software:development:demo:book_00.png?550| }} В адаптивной вёрстка предполагается использование современных технологий, делающих основные элементы, изменяющими свой размер и расположение на странице, исходя из ширины окна. При этом отсутствуют и полосы прокрутки. Для просмотра контента достаточно просто листать страницы вниз. Для отображения на смартфонах и планшетах лишние элементы отсеивают: убирают графические объекты, сворачивают меню, оставляя только самые значимые блоки. Параллельно увеличивается размер элементов управления, чтобы нужную кнопку без труда можно было нажать пальцем, ведь на обычном сайте попасть по ссылке с первого раза удается не всегда. Все это достигается с помощью медиа-запросов, которые лежат в основе данной технологии, меняют масштаб элементов, а CSS свойства дают полную свободу действий, управляя компоновкой и расположением блоков на странице, автоматически преобразуя шаблон. | {{:software:development:demo:book_00.png?550| }} В адаптивной вёрстка предполагается использование современных технологий, делающих основные элементы, изменяющими свой размер и расположение на странице, исходя из ширины окна. При этом отсутствуют и полосы прокрутки. Для просмотра контента достаточно просто листать страницы вниз. Для отображения на смартфонах и планшетах лишние элементы отсеивают: убирают графические объекты, сворачивают меню, оставляя только самые значимые блоки. Параллельно увеличивается размер элементов управления, чтобы нужную кнопку без труда можно было нажать пальцем, ведь на обычном сайте попасть по ссылке с первого раза удается не всегда. Все это достигается с помощью медиа-запросов, которые лежат в основе данной технологии, меняют масштаб элементов, а CSS свойства дают полную свободу действий, управляя компоновкой и расположением блоков на странице, автоматически преобразуя шаблон. |
| Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы. Основные примеры создания приведены в статье [[software:development:web:docs:learn:css:css_layout:responsive_design|Отзывчивый дизайн]]. | Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы. Основные примеры создания приведены в статье [[software:development:web:docs:learn:css:css_layout:responsive_design|Отзывчивый дизайн]]. |
| | |
| | За основу шаблона взята картинка книги, при наведении на которую текст книги производит ссылки на страницы книги. |
| |
| =====Шаблон страницы при верстки===== | =====Шаблон страницы при верстки===== |
| |
| <html> | <html> |
| <iframe height="1330" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code/book/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> | <iframe height="730" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code/book/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> |
| </iframe> | </iframe> |
| </html> | </html> |
| Добавим в блок %%<head>%% (голова) запись кода приведенного ниже и открыв **"Пояснительную записку блока <head>:"** разберем данный код: | Добавим в блок %%<head>%% (голова) запись кода приведенного ниже и открыв **"Пояснительную записку блока <head>:"** разберем данный код: |
| <code html HTML> | <code html HTML> |
| <!--начало веб страницы--> | <!doctype html> |
| <!DOCTYPE html> | |
| <html> | <html> |
| <!--начало блока метаданных веб страницы--> | <head> |
| <head> | <meta charset="utf-8" /> |
| <meta charset="utf-8"> | <meta name="viewport" content="width=device-width,initial-scale=1" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | <title>book</title> |
| <title>Responsive site layout</title> | <link |
| <link type="Image/x-icon" href="blender3d_demo/images/favicon.ico" rel="shortcut icon"> | href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" |
| <!-- our project just needs Font Awesome Solid + Brands --> | rel="stylesheet" |
| <link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/all.css" rel="stylesheet"> | type="text/css" /> |
| <link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet"> | <link rel="stylesheet" href="css/book.css" /> |
| <link rel="stylesheet" type="text/css" href="blender3d_demo/css/blender3d_demo.css"> | <link rel="icon" href="favicon.ico" type="image/x-icon"> |
| <script src="blender3d_demo/js/jquery/2.2.2/jquery.min.js"></script> | <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer--> |
| <script src="blender3d_demo/js/prefixfree/1.0.7/prefixfree.min.js"></script> | <!--[if lt IE 9]> |
| </head> | <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> |
| <!--конец блока метаданных веб страницы--> | <![endif]--> |
| | </head> |
| | <body> |
| | <!-- это просто меню с картинками вместо текста --> |
| | <div class="cont"> |
| | <div class="text"><img src="images/text.png" ></div> |
| | <div class="content"><img src="images/top.jpg" > |
| | <div class="image-php"><a href="https://book51.ru/doku.php?id=software:development:ps_pycharm:php:php_setting"><img src="images/php.png" alt="regular pyramid built from four equilateral triangles"></a></div> |
| | <div class="image-mysql"><a href="https://book51.ru/doku.php?id=software:development:ps_pycharm:mysql:mysql"><img src="images/mysql.jpg" ></a></div> |
| | <div class="image-html5"><a href="https://book51.ru/doku.php?id=software:development:web:docs:web:html:attributes"><img src="images/html5.jpg" ></a></div> |
| | <div class="image-css"><a href="https://book51.ru/doku.php?id=software:development:ps_pycharm:mysql:mysql"><img src="images/css.jpg" ></a></div> |
| | <div class="image-js"><a href="https://book51.ru/doku.php?id=software:development:ps_pycharm:mysql:mysql"><img src="images/js.jpg" ></a></div> |
| | </div> |
| | </div> |
| | </body> |
| | </html> |
| </code> | </code> |
| |
| #: Пояснительная записка блока <head>: | #: Пояснительная записка блока <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="blender3d_demo/images/favicon.ico" rel="shortcut icon">%%** <color #22b14c>- иконка страницы на вкладке браузера.</color> | - **%%<link type="Image/x-icon" href="blender3d_demo/images/favicon.ico" rel="shortcut icon">%%** <fc #22b14c>- иконка страницы на вкладке браузера.</fc> |
| - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/all.css" rel="stylesheet">%%** <color #22b14c>- подключение библиотеки векторных иконок.</color> | - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/all.css" rel="stylesheet">%%** <fc #22b14c>- подключение библиотеки векторных иконок.</fc> |
| - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet">%%** <color #22b14c>- подключение библиотеки векторных иконок.</color> | - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet">%%** <fc #22b14c>- подключение библиотеки векторных иконок.</fc> |
| - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/blender3d_demo.css">%%** <color #22b14c>- подключение внешней **таблицы стилей CSS** описанный ниже.</color> | - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/blender3d_demo.css">%%** <fc #22b14c>- подключение внешней **таблицы стилей CSS** описанный ниже.</fc> |
| - **%%<script src="blender3d_demo/js/jquery/2.2.2/jquery.min.js"></script>%%** <color #22b14c>- подключение библиотеки с набором функций **JavaScript**, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций).</color> | - **%%<script src="blender3d_demo/js/jquery/2.2.2/jquery.min.js"></script>%%** <fc #22b14c>- подключение библиотеки с набором функций **JavaScript**, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций).</fc> |
| - **%%<script src="blender3d_demo/js/prefixfree/1.0.7/prefixfree.min.js"></script>%%** <color #22b14c>- подключение плагина **prefixfree**, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы.</color> | - **%%<script src="blender3d_demo/js/prefixfree/1.0.7/prefixfree.min.js"></script>%%** <fc #22b14c>- подключение плагина **prefixfree**, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы.</fc> |
| - **%%</head>%%** <color #22b14c>- закрывающий тег блока.</color> | - **%%</head>%%** <fc #22b14c>- закрывающий тег блока.</fc> |
| :# | :# |
| |
| |
| |
| ====2. Блок header==== | |
| В блок заголовка <header> запишем следующие элементы блоков (контейнеров): логотип, кнопки меню и поиска по сайту, и открыв "Пояснительную записку блока <header>" разберем данный код: | |
| |
| <code html HTML> | |
| <header> | |
| <!--начало блока логотип/меню веб страницы--> | |
| <nav class="container"> | |
| <a class="logo" href=""><img src="blender3d_demo/blender3d_demo.png" ></a> | |
| <div class="nav-toggle"><span></span></div> | |
| <form action="" method="get" id="searchform"> | |
| <input type="text" placeholder="search..."> | |
| <button type="submit"><i class="fa fa-search"></i></button> | |
| </form> | |
| <ul id="menu"> | |
| <li><a href="">Features</a></li> | |
| <li><a href="">Download</a></li> | |
| <li><a href="">Support</a></li> | |
| </ul> | |
| </nav> | |
| <!--конец блока логотип/меню веб страницы--> | |
| </header> | |
| </code> | |
| #:Пояснительную записку блока <header> | |
| - **%%<header>%%** <color #22b14c>- открывающий тег блока.</color> | |
| - **%%<nav class="container">%%** <color #22b14c>- начало нашего блока колонтитула.</color> | |
| - **%%<a class="logo" href="">%%****%%<img src="blender3d_demo/blender3d_demo.png" >%%****%%</a>%%** <color #22b14c>- блок логотипа с указанием месторасположения иконки.</color> | |
| - **%%<div class="nav-toggle">%%****%%<span>%%****%%</span>%%****%%</div>%%** <color #22b14c>- блок кнопки показа/скрытия главного меню.</color> | |
| - **%%<form action="" method="get" id="searchform">%%** <color #22b14c>- начало блока формы поиска</color>. | |
| - **%%<input type="text" placeholder="search...">%%** <color #22b14c>- форма ввода текста поиска.</color> | |
| - **%%<button type="submit">%%****%%<i class="fa fa-search">%%****%%</i>%%****%%</button>%%** <color #22b14c>- кнопка-иконка поиска по сайту.</color> | |
| - **%%</form>%%** <color #22b14c>- закрывающий тег формы поиска.</color> | |
| - **%%<ul id="menu">%%** <color #22b14c>- блок главного меню.</color> | |
| - **%%<li>%%****%%<a href="">%%**Features**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Features".</color> | |
| - **%%<li>%%****%%<a href="">%%**Download**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Download".</color> | |
| - **%%<li>%%****%%<a href="">%%**Support**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Support".</color> | |
| - **%%</ul>%%** <color #22b14c>- конец блок главного меню.</color> | |
| - **%%</nav>%%** <color #22b14c>- конец нашего блока колонтитула.</color> | |
| - **%%</header>%%** <color #22b14c>- закрывающий тег блока.</color> | |
| :# | |
| ====3. Блок main ==== | ====3. Блок main ==== |
| В данный блок поместим предварительное содержимое анонса статей и открыв "Пояснительную записку блока main" разберем данный код: | В данный блок поместим предварительное содержимое анонса статей и открыв "Пояснительную записку блока main" разберем данный код: |
| </code> | </code> |
| #:Пояснительная записка блока main: | #:Пояснительная записка блока main: |
| - **%%<body>%%** <color #22b14c>- начало блока хранения содержания веб-страницы (контента).</color> | - **%%<body>%%** <fc #22b14c>- начало блока хранения содержания веб-страницы (контента).</fc> |
| - **%%<div class="container">%%** <color #22b14c>- начало контейнера контента веб страницы.</color> | - **%%<div class="container">%%** <fc #22b14c>- начало контейнера контента веб страницы.</fc> |
| - **%%<div class="posts-list">%%** <color #22b14c>- начало контейнера с анонсом статей.</color> | - **%%<div class="posts-list">%%** <fc #22b14c>- начало контейнера с анонсом статей.</fc> |
| - **%%<article id="post-1" class="post">%%** <color #22b14c>- начало контейнера с анонсом 1й статьи.</color> | - **%%<article id="post-1" class="post">%%** <fc #22b14c>- начало контейнера с анонсом 1й статьи.</fc> |
| - **%%<div class="post-image"><a href=""><img src="blender3d_demo/blender3d_demo_1.</color>png" ></a></div>%%** <color #22b14c>- блок вставки картинки с указанием месторасположения файла.</color> | - **%%<div class="post-image"><a href=""><img src="blender3d_demo/blender3d_demo_1.</fc>png" ></a></div>%%** <fc #22b14c>- блок вставки картинки с указанием месторасположения файла.</fc> |
| - **%%<div class="post-content">%%** <color #22b14c>- начало блока текстовой информации 1й статьи.</color> | - **%%<div class="post-content">%%** <fc #22b14c>- начало блока текстовой информации 1й статьи.</fc> |
| - **%%<div class="category"><a href="">Features</a></div>%%** <color #22b14c>- блок указания категории 1й статьи.</color> | - **%%<div class="category"><a href="">Features</a></div>%%** <fc #22b14c>- блок указания категории 1й статьи.</fc> |
| - **%%<h2 class="post-title">Blender 3.</color>6 LTS</h2>%%** <color #22b14c>- блок заголовка 1й статьи.</color> | - **%%<h2 class="post-title">Blender 3.</fc>6 LTS</h2>%%** <fc #22b14c>- блок заголовка 1й статьи.</fc> |
| - **%%<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>%%**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.</fc> - **%%</p>%%** <fc #22b14c>- блок текста 1й статьи.</fc> |
| - **%%<div class="post-footer">%%** <color #22b14c>- начало блока "Читать далее" 1й статьи.</color> | - **%%<div class="post-footer">%%** <fc #22b14c>- начало блока "Читать далее" 1й статьи.</fc> |
| - **%%<a class="more-link" href="">Continue Reading</a>%%** <color #22b14c>- блок надписи "Читать далее" 2й статьи.</color> | - **%%<a class="more-link" href="">Continue Reading</a>%%** <fc #22b14c>- блок надписи "Читать далее" 2й статьи.</fc> |
| - **%%<div class="post-social">%%** <color #22b14c>- начало блока иконок-ссылок социальных сетей.</color> | - **%%<div class="post-social">%%** <fc #22b14c>- начало блока иконок-ссылок социальных сетей.</fc> |
| - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <color #22b14c>- иконка-ссылка "facebook".</color> | - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <fc #22b14c>- иконка-ссылка "facebook".</fc> |
| - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <color #22b14c>- иконка-ссылка "twitter".</color> | - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <fc #22b14c>- иконка-ссылка "twitter".</fc> |
| - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <color #22b14c>- иконка-ссылка "pinterest".</color> | - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <fc #22b14c>- иконка-ссылка "pinterest".</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока иконок-ссылок социальных сетей.</color> | - **%%</div>%%** <fc #22b14c>- конец блока иконок-ссылок социальных сетей.</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока "Читать далее" 1й статьи.</color> | - **%%</div>%%** <fc #22b14c>- конец блока "Читать далее" 1й статьи.</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока текстовой информации 1й статьи.</color> | - **%%</div>%%** <fc #22b14c>- конец блока текстовой информации 1й статьи.</fc> |
| - **%%</article>%%** <color #22b14c>- конец контейнера с анонсом 1й статьи.</color> | - **%%</article>%%** <fc #22b14c>- конец контейнера с анонсом 1й статьи.</fc> |
| - **%%<article id="post-2" class="post">%%** <color #22b14c>- начало контейнера с анонсом 2й статьи.</color> | - **%%<article id="post-2" class="post">%%** <fc #22b14c>- начало контейнера с анонсом 2й статьи.</fc> |
| - **%%<div class="post-image"><a href="">%%** <color #22b14c>- начало блока вставки видеофайла с указанием месторасположения.</color> | - **%%<div class="post-image"><a href="">%%** <fc #22b14c>- начало блока вставки видеофайла с указанием месторасположения.</fc> |
| - **%%<video width="100%" controls="controls" poster="blender3d_demo/poster.</color>jpg">%%** <color #22b14c>- начало вставки видеофайла с указанием ширины, вставки панели управления, и файла-постера с указанием месторасположения.</color> | - **%%<video width="100%" controls="controls" poster="blender3d_demo/poster.</fc>jpg">%%** <fc #22b14c>- начало вставки видеофайла с указанием ширины, вставки панели управления, и файла-постера с указанием месторасположения.</fc> |
| - **%%<source src="video/duel.</color>ogv" type='video/ogg; codecs="theora, vorbis"'>%%** <color #22b14c>- | - **%%<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>%%** |
| - **%%<source src="blender3d_demo/vesna(720p).</color>mp4" type='video/mp4; codecs="avc1.</color>42E01E, mp4a.</color>40.</color>2"'>%%** <color #22b14c>- месторасположение встраиваемо видеофайла с указанием кодеков.</color> | - **%%<source src="blender3d_demo/vesna(720p).mp4" type='video/mp4; codecs="avc1.42E01E, mp4"'>%%** <fc #22b14c>- месторасположение встраиваемо видеофайла с указанием кодеков.</fc> |
| - **%%</video>%%** <color #22b14c>- закрывающий тег вставки видеофайла.</color> | - **%%</video>%%** <fc #22b14c>- закрывающий тег вставки видеофайла.</fc> |
| - **%%</a></div>%%** <color #22b14c>- конец блока вставки видеофайла с указанием месторасположения.</color> | - **%%</a></div>%%** <fc #22b14c>- конец блока вставки видеофайла с указанием месторасположения.</fc> |
| - **%%<div class="post-content">%%** <color #22b14c>- начало блока текстовой информации 2й статьи.</color> | - **%%<div class="post-content">%%** <fc #22b14c>- начало блока текстовой информации 2й статьи.</fc> |
| - **%%<div class="category"><a href="">Download</a></div>%%** <color #22b14c>- блок указания категории 2й статьи.</color> | - **%%<div class="category"><a href="">Download</a></div>%%** <fc #22b14c>- блок указания категории 2й статьи.</fc> |
| - **%%<h2 class="post-title">Spring</h2>%%** <color #22b14c>- блок заголовка 2й статьи.</color> | - **%%<h2 class="post-title">Spring</h2>%%** <fc #22b14c>- блок заголовка 2й статьи.</fc> |
| - **%%<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> | - **%%<p>%%**Is the story of a shepherdess and her dog who encounter ancient spirits in order to continue the cycle of life.**%%</p>%%** <fc #22b14c>- блок текста 2й статьи.</fc> |
| - **%%<div class="post-footer">%%** <color #22b14c>- начало блока "Читать далее" 2й статьи.</color> | - **%%<div class="post-footer">%%** <fc #22b14c>- начало блока "Читать далее" 2й статьи.</fc> |
| - **%%<a class="more-link" href="">Continue Reading</a>%%** <color #22b14c>- блок надписи "Читать далее" 2й статьи.</color> | - **%%<a class="more-link" href="">Continue Reading</a>%%** <fc #22b14c>- блок надписи "Читать далее" 2й статьи.</fc> |
| - **%%<div class="post-social">%%** <color #22b14c>- начало блока иконок-ссылок социальных сетей.</color> | - **%%<div class="post-social">%%** <fc #22b14c>- начало блока иконок-ссылок социальных сетей.</fc> |
| - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <color #22b14c>- иконка-ссылка "facebook".</color> | - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <fc #22b14c>- иконка-ссылка "facebook".</fc> |
| - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <color #22b14c>- иконка-ссылка "twitter".</color> | - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <fc #22b14c>- иконка-ссылка "twitter".</fc> |
| - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <color #22b14c>- иконка-ссылка "pinterest".</color> | - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <fc #22b14c>- иконка-ссылка "pinterest".</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока иконок-ссылок социальных сетей.</color> | - **%%</div>%%** <fc #22b14c>- конец блока иконок-ссылок социальных сетей.</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока "Читать далее" 2й статьи.</color> | - **%%</div>%%** <fc #22b14c>- конец блока "Читать далее" 2й статьи.</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока текстовой информации 2й статьи.</color> | - **%%</div>%%** <fc #22b14c>- конец блока текстовой информации 2й статьи.</fc> |
| - **%%</article>%%** <color #22b14c>- конец контейнера с анонсом 2й статьи.</color> | - **%%</article>%%** <fc #22b14c>- конец контейнера с анонсом 2й статьи.</fc> |
| - **%%</div>%%** <color #22b14c>- конец контейнера с анонсом статей.</color> | - **%%</div>%%** <fc #22b14c>- конец контейнера с анонсом статей.</fc> |
| :# | :# |
| ====4. Блок <aside> ==== | ====4. Блок <aside> ==== |
| </code> | </code> |
| #:«Пояснительная записка блока <aside> | #:«Пояснительная записка блока <aside> |
| - **%%<aside>%%** <color #22b14c>- начало контейнера контента правой колонки веб страницы.</color> | - **%%<aside>%%** <fc #22b14c>- начало контейнера контента правой колонки веб страницы.</fc> |
| - **%%<div class="widget">%%** <color #22b14c>- начало блока категорий.</color> | - **%%<div class="widget">%%** <fc #22b14c>- начало блока категорий.</fc> |
| - **%%<h3 class="widget-title">Categories</h3>%%** <color #22b14c>- блок с рамкой и названием "Категории"</color> | - **%%<h3 class="widget-title">Categories</h3>%%** <fc #22b14c>- блок с рамкой и названием "Категории"</fc> |
| - **%%<ul class="widget-category-list">%%** <color #22b14c>- начало блока перечислений категорий.</color> | - **%%<ul class="widget-category-list">%%** <fc #22b14c>- начало блока перечислений категорий.</fc> |
| - **%%<li><a href="">Features</a>(3)</li>%%** <color #22b14c>- блок категории "Features" с указанием количества статей.</color> | - **%%<li><a href="">Features</a>(3)</li>%%** <fc #22b14c>- блок категории "Features" с указанием количества статей.</fc> |
| - **%%<li><a href="">Download</a>(2)</li>%%** <color #22b14c>- блок категории "Download" с указанием количества статей.</color> | - **%%<li><a href="">Download</a>(2)</li>%%** <fc #22b14c>- блок категории "Download" с указанием количества статей.</fc> |
| - **%%<li><a href="">Support</a>(1)</li>%%** <color #22b14c>- блок категории "Support" с указанием количества статей.</color> | - **%%<li><a href="">Support</a>(1)</li>%%** <fc #22b14c>- блок категории "Support" с указанием количества статей.</fc> |
| - **%%</ul>%%** <color #22b14c>- конец блока перечислений категорий.</color> | - **%%</ul>%%** <fc #22b14c>- конец блока перечислений категорий.</fc> |
| - **%%</div>%%** - конец блока категорий. | - **%%</div>%%** - конец блока категорий. |
| - **%%<div class="widget">%%** <color #22b14c>- начало блока анонсов статей.</color> | - **%%<div class="widget">%%** <fc #22b14c>- начало блока анонсов статей.</fc> |
| - **%%<h3 class="widget-title">The last notes</h3>%%** <color #22b14c>- блок с рамкой и названием "Последние записи".</color> | - **%%<h3 class="widget-title">The last notes</h3>%%** <fc #22b14c>- блок с рамкой и названием "Последние записи".</fc> |
| - **%%<ul class="widget-posts-list">%%** <color #22b14c>- начало блока анонсов статей "Последние записи".</color> | - **%%<ul class="widget-posts-list">%%** <fc #22b14c>- начало блока анонсов статей "Последние записи".</fc> |
| - **%%<li>%%** <color #22b14c>- начало блока анонса статьи (для остальных статей идентично этому блоку).</color> | - **%%<li>%%** <fc #22b14c>- начало блока анонса статьи (для остальных статей идентично этому блоку).</fc> |
| - **%%<div class="post-image-small">%%** <color #22b14c>- начало блока вставки картинки анонса статьи.</color> | - **%%<div class="post-image-small">%%** <fc #22b14c>- начало блока вставки картинки анонса статьи.</fc> |
| - **%%<a href=""><img src="blender3d_demo/blender3d_demo_2.jpg"></a>%%** <color #22b14c>- вставка картинки с указанием месторасположения.</color> | - **%%<a href=""><img src="blender3d_demo/blender3d_demo_2.jpg"></a>%%** <fc #22b14c>- вставка картинки с указанием месторасположения.</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока вставки картинки анонса статьи.</color> | - **%%</div>%%** <fc #22b14c>- конец блока вставки картинки анонса статьи.</fc> |
| - **%%<h3>Cycles</h3>%%** **is Blender’s built-in powerful unbiased path-tracer engine that offers stunning ultra-realistic rendering. · Real-time viewport preview· CPU & GPU rendering· PBR shaders & HDR lighting support· VR rendering support** <color #22b14c>- заголовок и текст анонса статьи.</color> | - **%%<h3>Cycles</h3>%%** **is Blender’s built-in powerful unbiased path-tracer engine that offers stunning ultra-realistic rendering. · Real-time viewport preview· CPU & GPU rendering· PBR shaders & HDR lighting support· VR rendering support** <fc #22b14c>- заголовок и текст анонса статьи.</fc> |
| - **%%</li>%%** <color #22b14c>- конец блока анонса статьи (для остальных статей идентично этому блоку).</color> | - **%%</li>%%** <fc #22b14c>- конец блока анонса статьи (для остальных статей идентично этому блоку).</fc> |
| - **%%</ul>%%** <color #22b14c>- конец блока анонсов статей "Последние записи".</color> | - **%%</ul>%%** <fc #22b14c>- конец блока анонсов статей "Последние записи".</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока анонсов статей.</color> | - **%%</div>%%** <fc #22b14c>- конец блока анонсов статей.</fc> |
| - **%%</aside>%%** <color #22b14c>- конец контейнера контента правой колонки веб страницы.</color> | - **%%</aside>%%** <fc #22b14c>- конец контейнера контента правой колонки веб страницы.</fc> |
| - **%%</div>%%** <color #22b14c>- конец контейнера всего контента веб страницы.</color> | - **%%</div>%%** <fc #22b14c>- конец контейнера всего контента веб страницы.</fc> |
| :# | :# |
| ====5. Блок <footer>==== | |
| В подвале страницы разместим информацию о копирайте и открыв "Пояснительную записку блока <footer>" разберем данный код: | |
| |
| <code html HTML> | |
| <!--начало контейнера подвал веб страницы--> | |
| <footer> | |
| <div class="footer-col"><span>The Free and Open Source 3D Creation Suite © 2023</span></div> | |
| </footer> | |
| <!--конец контейнера подвал веб страницы--> | |
| </body> | |
| </html> | |
| <!--конец веб страницы--> | |
| </code> | |
| #:Пояснительная записка блока <footer>: | |
| - **%%<footer>%%** <color #22b14c>- начало блока "подвал".</color> | |
| - **%%<div class="footer-col"><span>The Free and Open Source 3D Creation Suite © 2023</span></div>%%** <color #22b14c>- блок текста копирайта.</color> | |
| - **%%</footer>%%** <color #22b14c>- конец блока "подвал".</color> | |
| - **%%</body>%%** <color #22b14c>- конец блока хранения содержания веб-страницы (контента).</color> | |
| - **%%</html>%%** <color #22b14c>- закрывающий тег, является концам блока (контейнера), который заключает в себе все содержимое веб-страницы.</color> | |
| :# | |
| ====6. Общие CSS-стили==== | ====6. Общие CSS-стили==== |
| Все нижеприведенные стили вынесены в один внешний файл CSS. | Все нижеприведенные стили вынесены в один внешний файл CSS. |
| </code> | </code> |
| |
| ====9. Стили блока aside==== | |
| |
| <code css CSS> | |
| /* правый контейнер */ | |
| aside { | |
| width: 33%;/*ширина блока*/ | |
| float: right;/*элемент выравнивается по правой стороне*/ | |
| } | |
| /* блок для виджетов */ | |
| .widget { | |
| padding: 20px 15px;/* значение полей вокруг содержимого*/ | |
| background: #dcdcdc;/* цвет блока для виджетов */ | |
| font-size: 13px;/* размер шрифта элемента */ | |
| margin-bottom: 30px;/*отступ от нижнего края элемента*/ | |
| box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);/* тень рамки блоков */ | |
| } | |
| .widget-title { | |
| font-size: 15px;/* размер шрифта элемента */ | |
| padding: 10px;/* значение полей вокруг содержимого*/ | |
| margin-bottom: 10px;/* отступ от рамки блоков */ | |
| text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/ | |
| border: 2px solid #2f4f4f;/* цвет рамки категорий */ | |
| box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени блока категорий */ | |
| } | |
| .widget-category-list li { | |
| border-bottom: 1.5px solid #2f4f4f;/* цвет и размер полос разделителей блока категорий */ | |
| padding: 8px 0;/* значение полей вокруг содержимого*/ | |
| color: #2f4f4f;/* цвет текста количества постов в категории*/ | |
| font-style: arial; /* шрифт текста наименования постов в категории*/ | |
| } | |
| .widget-category-list li:last-child { | |
| border-bottom: none;/*толщина, стиль и цвет границы внизу элемента отсутствует*/ | |
| } | |
| .widget-category-list li a { | |
| color: #2f4f4f;/* цвет текста наименований категорий постов*/ | |
| margin-right: 20px;/* отступ от текста наименований категорий постов */ | |
| font-style: normal;/*обычное начертание текста*/ | |
| } | |
| .widget-category-list li a:before { | |
| content: "\f105"; /* стрелки перед текстом наименований категорий постов*/ | |
| display: inline-block;/*элемент обтекает другими элементами страницы*/ | |
| font-family: 'FontAwesome';/*шрифты колекции иконок FontAwesome*/ | |
| margin-right: 10px;/*отступа от правого края элемента*/ | |
| color: #2f4f4f;/* цвет стрелки перед текстом наименований категорий постов*/ | |
| } | |
| .widget-posts-list li { | |
| border-top: 1.5px solid #2f4f4f;/* цвет и размер полос разделителей блока постов */ | |
| padding: 8px 0;/* значение полей вокруг содержимого*/ | |
| } | |
| .widget-posts-list li:nth-child(1) { | |
| border-top: none;/* цвет и размер полос разделителей блока постов отсутствует*/ | |
| } | |
| .post-image-small { | |
| width: 60%; /*размер - ширина картинки*/ | |
| float: left;/*положение картинки -элемент выравнивается по левой стороне*/ | |
| margin-right: 15px;/*отступ от правого края картинки*/ | |
| box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени картинки */ | |
| } | |
| .widget-post-title { | |
| float: left;/*элемент выравнивается по левой стороне*/ | |
| } | |
| </code> | |
| |
| ====10. Стили блока footer==== | ====10. Стили блока footer==== |
| </code> | </code> |
| #: Пояснительная записка | #: Пояснительная записка |
| - **%%<script src="blender3d_demo/js/blender3d_demo.js">%%** <color #22b14c>- начало подключение файла скрипта с указанием папки месторасположения.</color> | - **%%<script src="blender3d_demo/js/blender3d_demo.js">%%** <fc #22b14c>- начало подключение файла скрипта с указанием папки месторасположения.</fc> |
| - **%%</script>%%** <color #22b14c>- конец подключение файла скрипта.</color> | - **%%</script>%%** <fc #22b14c>- конец подключение файла скрипта.</fc> |
| :# | :# |
| ====13. Код скрипта для мобильного меню==== | |
| Данный скрипт работает при ширине окна браузера менее 768px, откройте "Пояснительную записку" для понимания кода скрипта. | |
| |
| |
| <code javascript JS> | |
| $('.nav-toggle').on('click', function(){ | |
| $('#menu').toggleClass('active'); | |
| }); | |
| </code> | |
| #: Пояснительная записка | |
| - **%%$('.nav-toggle').on('click', function(){ | |
| $('#menu').toggleClass('active'); | |
| });%%** <color #22b14c>- в теле **%%<header>%%** -> таблицы стиля CSS **%%.nav-toggle%%** -> блока скрытого меню **%%<div class="nav-toggle"><span></span></div>%%** имеет значение таблицы стиля CSS **%%display: none;%%** (т.е. скрыт по умолчанию и появляющейся при ширине странице меньше 768px) -> нажатие кнопки блока показа/скрытия главного меню -> стиль CSS **%%#menu%%** активный, т.е. будет показано скрытое меню -> (стиль CSS **%%#menu.active%%**).</color> | |
| :# | |
| ====14. Архив файлов примера==== | ====14. Архив файлов примера==== |
| Все файлы данного примера включая все скрипты и таблицы шрифтов и иконок упакованы в архив и доступны для скачивания.\\ | Все файлы данного примера включая все скрипты и таблицы шрифтов и иконок упакованы в архив и доступны для скачивания.\\ |
| <color #ed1c24>Вам необходимо поменять пути к файлам, согласно будущего месторасположения папок и файлов на вашем сервере.</color>\\ | <fc #ed1c24>Вам необходимо поменять пути к файлам, согласно будущего месторасположения папок и файлов на вашем сервере.</fc>\\ |
| {{ :software:development:demo:code.rar |rar arhiv 71,8mb}} | {{:software:development:demo:book.rar|rar arhiv book 409kb}} |
