wiki:devel:templates:notebook
Различия
Показаны различия между двумя версиями страницы.
Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия | ||
wiki:devel:templates:notebook [2024/08/26 09:48] – vladpolskiy | wiki:devel:templates:notebook [2024/08/27 00:27] (текущий) – [Верстка шаблона страницы] vladpolskiy | ||
---|---|---|---|
Строка 121: | Строка 121: | ||
</ | </ | ||
</ | </ | ||
+ | * С помощью инструментов разработчика браузера смотрим ширину страницы, | ||
+ | {{: | ||
+ | * Авторизуемся и создадим страницу sidebar (боковая панель) | ||
+ | {{: | ||
+ | * и снова проверим ширину страницы и это 1024px (в принципе все стандартно) | ||
+ | {{: | ||
+ | * бокова 256px | ||
+ | {{: | ||
+ | * Основная 768px (768+256=1024) | ||
+ | {{: | ||
+ | * посмотрим на ширину понравившегося шаблона и это 922px | ||
+ | {{: | ||
+ | * необходимо либо уменьшить ширину шаблона starter, либо увеличить выбраный макет | ||
+ | * выбираю правку шаблона starter и делаю скриншот выбранного макета в размере 922px | ||
+ | {{: | ||
+ | * открываем макет в редакторе (пример paint.net) и начертив прямоугольники вокруг текста измеряем размеры основной области и дополнительной панели | ||
+ | {{: | ||
+ | * вся область 1031px (что обрежется для пк в 1024px), и основная область 473px | ||
+ | {{: | ||
+ | * боковая панель 240px и видия область для мобильных устройств 570px | ||
+ | {{: | ||
+ | =====Верстка шаблона страницы===== | ||
+ | * Стандартная веб-страница содержит следующие секции: | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <div class=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * class=" | ||
+ | внутри этого контейнера будут располагаться, | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <!-- в правый (боковая панель) контейнер шириною 240px встроим еще 4 контейнера--> | ||
+ | <!-- содержание, | ||
+ | <!-- которые будут распологаться друг под другом в контейнере (боковая панель) --> | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | * Это и есть в общих чертах наш будущий макет (без картинок и стилей) | ||
+ | * план контейнеров | ||
+ | {{: |
wiki/devel/templates/notebook.1724654885.txt.gz · Последнее изменение: 2024/08/26 09:48 — vladpolskiy