Различия

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

--- wiki:devel:templates:notebook [2024/08/26 21:48] – vladpolskiy
+++ wiki:devel:templates:notebook [2024/08/27 00:27] (текущий) – [Верстка шаблона страницы] vladpolskiy
@@ Строка 138: / Строка 138: @@
   * открываем макет в редакторе (пример paint.net) и начертив прямоугольники вокруг текста измеряем размеры основной области и дополнительной панели
 {{:wiki:devel:templates:starter_notebook_18.png?|}}
-  * вся область для пк вписывается в 1024px основная область 473px
+  * вся область 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?|}}