Различия

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

--- wiki:devel:templates:notebook [2024/08/26 09:48] – vladpolskiy
+++ wiki:devel:templates:notebook [2024/08/27 00:27] (текущий) – [Верстка шаблона страницы] vladpolskiy
@@ Строка 121: / Строка 121: @@
 </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?|}}