| Предыдущая версия справа и слеваПредыдущая версия | |
| software:development:demo:responsive_site_layout_notebook [2024/03/10 23:19] – [Ссылки и Дополнения] vladpolskiy | software:development:demo:responsive_site_layout_notebook [2025/02/01 09:24] (текущий) – внешнее изменение 127.0.0.1 |
|---|
| {{: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}}. | Создадим в одноименных папках файлы <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|}} | {{:software:development:demo:notebook_site_3.png?400|}} |
| |
| #: Пояснительная записка блока <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="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. Общие CSS-стили==== |
| </code> | </code> |
| #:Пояснительная записка блока header: | #:Пояснительная записка блока 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==== | ====4. Стили блока header==== |
| </code> | </code> |
| #:Пояснительная записка блока header: | #:Пояснительная записка блока header: |
| - **%%<body>%%** <color #22b14c>- начало блока видимой части веб-страницы.</color> | - **%%<body>%%** <fc #22b14c>- начало блока видимой части веб-страницы.</fc> |
| - **%%<div id='outer-wrapper'>%%** <color #22b14c>- начало внешнего блока содержания веб-страницы.</color> | - **%%<div id='outer-wrapper'>%%** <fc #22b14c>- начало внешнего блока содержания веб-страницы.</fc> |
| :# | :# |
| |
