======Шаблон Notebook======
Устанавливаем шаблон стартер

  * В каталоге <dokuwiki>/lib/tpl/starter/css/ создаем копированием все файлы стилей CSS с приставкой (например notebook_)
{{:wiki:devel:templates:starter_notebook_10.png?|}}
  * Добавляем в файл ini

<code ini>
[stylesheets]

css/notebook_basic.css                = screen

; загрузить остальные стили
css/notebook_structure.css            = screen
css/notebook_design.css               = screen
css/notebook_content.css              = screen
css/notebook_includes.css             = screen

css/notebook_mobile.css               = all
</code>
<details>
<summary>«Файл ini после правки»</summary>
<code ini>
; Пожалуйста посмотрите https://www.php.net/manual/en/function.parse-ini-file.php
; из-за ограничений используемого здесь ini-формата

; Чтобы расширить этот файл или внести в него изменения, рекомендуется создать
; локальный файл conf/tpl/<имя-папки-шаблона>/style.ini, чтобы предотвратить потерю
; любые изменения после обновления.
; Пожалуйста, не забудьте скопировать раздел, в котором должны находиться ваши изменения.
; (т. е. [таблицы стилей] или [замены]) в этот файл.

; Здесь определите таблицы стилей, которые использует ваш шаблон. Второе значение
; определяет, для какого носителя вывода должен быть загружен стиль. В настоящее время
; печать, экран и все поддерживаются.
; Здесь вы можете ссылаться на файлы CSS и LESS. Файлы, упомянутые здесь, будут
; проверять наличие обновлений при рассмотрении возможности перестройки кэша, пока файлы
; включенные через операторы @import LESS, не являются

[stylesheets]

css/basic.css                         = screen
css/notebook_basic.css                = screen

; загрузить стили из шаблона «dokuwiki» по умолчанию
; некоторые из них были переименованы из *.css в *.less.
; но .css по-прежнему загружает тот же файл и обратно совместим
../dokuwiki/css/_imgdetail.css        = screen
../dokuwiki/css/_media_popup.css      = screen
../dokuwiki/css/_media_fullscreen.css = screen
../dokuwiki/css/_fileuploader.css     = screen
../dokuwiki/css/_tabs.css             = screen
../dokuwiki/css/_links.css            = screen
../dokuwiki/css/_toc.css              = screen
../dokuwiki/css/_footnotes.css        = screen
../dokuwiki/css/_search.less          = screen
../dokuwiki/css/_recent.css           = screen
../dokuwiki/css/_diff.css             = screen
../dokuwiki/css/_edit.css             = screen
../dokuwiki/css/_modal.css            = screen
../dokuwiki/css/_forms.css            = screen
../dokuwiki/css/_admin.less           = screen

; загрузить остальные стили
css/structure.css                     = screen
css/notebook_structure.css            = screen
css/design.css                        = screen
css/notebook_design.css               = screen
css/content.css                       = screen
css/notebook_content.css              = screen
css/includes.css                      = screen
css/notebook_includes.css             = screen

css/mobile.css                        = all
css/notebook_mobile.css               = all
css/print.css                         = print


; Этот раздел используется для настройки некоторых значений заполнителей, используемых в
; таблицы стилей. Изменение этого файла — самый простой способ
; придайте вашей вики новый вид.
; Определенные здесь заполнители также будут доступны как переменные LESS.
; (с удаленными подчеркиваниями и добавлением префикса @ini_)

[replacements]

;--------------------------------------------------------------------------
;------ гарантированные цветные заполнители Dokuwiki, которые может использовать каждый плагин

; основной текст и цвета фона
__text__           = "#333"                 ; @ini_text
__background__     = "#fff"                 ; @ini_background
; альтернативные цвета текста и фона
__text_alt__       = "#999"                 ; @ini_text_alt
__background_alt__ = "#eee"                 ; @ini_background_alt
; нейтральные цвета текста и фона
__text_neu__       = "#666"                 ; @ini_text_neu
__background_neu__ = "#ddd"                 ; @ini_background_neu
; цвет границы
__border__         = "#ccc"                 ; @ini_border

; выделенный текст (например, фрагменты поиска)
__highlight__      = "#ff9"                 ; @ini_highlight

; цвет ссылки
__link__            = "#00c"                ; @ini_link

;--------------------------------------------------------------------------

; они используются для других ссылок
__existing__       = "#090"                 ; @ini_existing
__missing__        = "#f30"                 ; @ini_missing

; ширина
__site_width__     = "64em"                 ; @ini_site_width
__sidebar_width__  = "16em"                 ; @ini_sidebar_width

; цвет веб-приложения (используется ядром, а не шаблоном)
__theme_color__    = "#eee"                 ; @ini_theme_color

</code>
</details>
   * С помощью инструментов разработчика браузера смотрим ширину страницы, в нашем случае 1024px
{{:wiki:devel:templates:starter_notebook_12.png?|}}
  * Авторизуемся и создадим страницу sidebar (боковая панель) 
{{:wiki:devel:templates:starter_notebook_11.png?|}}
  * и снова проверим ширину страницы и это 1024px (в принципе все стандартно)
{{:wiki:devel:templates:starter_notebook_13.png?|}}
  * бокова 256px
{{:wiki:devel:templates:starter_notebook_14.png?|}}
  * Основная 768px (768+256=1024) 
{{:wiki:devel:templates:starter_notebook_15.png?|}}
  * посмотрим на ширину понравившегося шаблона и это 922px
{{:wiki:devel:templates:starter_notebook_16.png?|}}
  * необходимо либо уменьшить ширину шаблона starter, либо увеличить выбраный макет
  * выбираю правку шаблона starter и делаю скриншот выбранного макета в размере 922px 
{{:wiki:devel:templates:starter_notebook_17.png?|}} 
  * открываем макет в редакторе (пример paint.net) и начертив прямоугольники вокруг текста измеряем размеры основной области и дополнительной панели
{{:wiki:devel:templates:starter_notebook_18.png?|}}
  * вся область 1031px (что обрежется для пк в 1024px), и основная область 473px  
{{:wiki:devel:templates:starter_notebook_19.png?|}} 
  * боковая панель 240px и видия область для мобильных устройств 570px
{{:wiki:devel:templates:starter_notebook_20.png?|}}                
=====Верстка шаблона страницы=====
  * Стандартная веб-страница содержит следующие секции:
<code html>
<html>
<body>
<header></header>
<div class="main"></div>
<footer></footer>
</body>
</html>
</code>

  * class="main" - это контейнер будущей шириной 1024px, где будет вся страница
внутри этого контейнера будут располагаться, заголовок страницы, меню, в левой стороне верхняя часть картинки, средняя и нижняя части картинки,  в правой боковое меню с оглавлением, меню входа, и прочим, а в самом низу лицензия и прочая информация. Итак поехали:
<code html>
<html>
<body>
<header></header> <!-- верхний (название и меню) контейнер шириною 1024px -->
<div class="main"> <!-- общий контейнер шириною 1024px -->
<div class="main_header"> <!-- верхний (для верха картинки) контейнер шириною 1024px -->
<div class="main_page"> <!-- левый основной контейнер шириною 473px + поля -->
<div class="main_sidebar"> <!-- правый (боковая панель) контейнер шириною 240px + поля -->
<!-- в правый (боковая панель) контейнер шириною 240px встроим еще 4 контейнера-->
<!-- содержание, поиск, новости, авторизация шириною 240px -->
<!-- которые будут распологаться друг под другом в контейнере (боковая панель) -->
<div class="main_sidebar_content"> <!-- боковая панель контейнер (содержание) шириною 240px -->
</div>
<div class="main_sidebar_search"> <!-- боковая панель контейнер (поиск) шириною 240px -->
</div>
<div class="main_sidebar_news"> <!-- боковая панель контейнер (новости) шириною 240px -->
</div>
<div class="main_sidebar_login"> <!-- боковая панель контейнер (авторизация) шириною 240px -->
</div>
<div class="main_footer"> <!-- нижний (для низа картинки) контейнер шириною 1024px -->
</div>
</div>
</div>
</div>
<footer></footer><!-- нижний (лицензия и прочее) контейнер шириною 1024px -->
</body>
</html>
</code>
  * Это и есть в общих чертах наш будущий макет (без картинок и стилей)
  * план контейнеров
{{:wiki:devel:templates:starter_notebook_21.png?|}}