00-эксперимент

Новости. Оформление

+Важно 16 января, 04:37

Таблицы: масштабируемость

Смотрим отображение при уменьшении размеров экрана

+Важно 17 января, 10:51

Таблицы

Примеры на разные случаи

Справочный блок

Оформление через таблицы в Текстовом блоке.

Для справки

Здесь используем 2 отдельные таблицы.
1 таблица: Заголовок (Для справки): Внутренний отступ 2. 1 колонка (левая граница) залита #c9c9b5. 2 колонка залита #f8f8ec. Вставлена таблица 1х1 с внутренним отступом 7 и написан текст.
2 таблица: Всё точно так же, только 2-ю колонку с этим тектосм не заливаем.

Для справки

Здесь 4 таблицы друг за другом.
1 таблица: Заголовок. Внутренний отстп 7, залито #f8f8ec.
2 таблица: ширина 100%, внутренний отступ 2, заливка #c9c9b5.
3 таблица: внутренний отступ 7 (чтобы текст по левой стороне был ровно с Заголовком) без заливки. Сюда пишем важный и нужный текст, который хотим выделить. Это сама Справка.
4 таблица: ширина 100%, внутренний отступ 2, заливка #c9c9b5.
Сложно. Учитывая, что при копировании заливка не копируется и нужно вручную заливать отдельные ячейки.

Для справки

Здесь всего 2 таблицы.
1 таблица: Заголовок. Внутренний отступ 10, залито #e5e5ca, чуть темнее
Вставлена линия
2 таблица: внутренний отступ 10 (чтобы текст по левой стороне был ровно с Заголовком) без заливки. Сюда пишем важный и нужный текст, который хотим выделить. Это сама Справка.
Вставлена линия
Уже проще

Для справки

Здесь всего 2 таблицы.
1 таблица: Заголовок. Внутренний отступ 10, залито #e5e5ca, чуть темнее
2 таблица: внутренний отступ 10 (чтобы текст по левой стороне был ровно с Заголовком) залито #f8f8ec. Сюда пишем важный и нужный текст, который хотим выделить. Это сама Справка.
Тоже просто

Многоуровневое меню

Проба сделать одно меню вместо кучи отдельных страниц:

Муниципальные задания и отчеты об их исполнении
► Утверждённые муниципальные задания
❯❯ Утверждённые муниципальные задания: 2024 год
■ Вдруг ещё подменю…
❯❯ Утверждённые муниципальные задания: 2023 год

Здесь каждый элемент меню (строка) — переход на новую страницу. Будем убирать лишние и упрощать :)

Не получилось. Убираем лишние страницы - добавляются пункты переходов по ссылке. Теперь каша получилась. А годы будут добавляться :)
Всё равно каждый квартал - отдельная страница. Или надо всё в Аккордеоны собирать.

Используем: Контейнер заливаем бежевым фоном и скругляем углы. Добавляем по порядку 2 текстовых блока: 1 - Заголовок (таблица с иконкой и текстом) - заливаем темнее. 2 - таблица с годами (и кварталами). Эти 2 контейнера помещаем в общий Контейнер и делаем Компоновку списка (flexbox).

Утверждённые
муниципальные задания

❯

2024 год

❯

2023 год

Отчеты и оценки
исполнения муниципальных заданий

2024 год ❯	1 квартал	2 квартал	3 квартал	4 квартал	ИТОГ
2023 год ❯	1 квартал	2 квартал	3 квартал	4 квартал	ИТОГ

Расчет норматива затрат

Базовый норматив затрат

Отчёты по годам

Для копирования выбираем контейнер «конт-Год-кварталы». Вставляем перед контейнером с таким же названием. В контейнере всего 1 текстовый блок с Таблицей.

2024 год

1 квартал

2 квартал

3 квартал

4 квартал

❯

ИТОГ

2023 год

1 квартал

2 квартал

3 квартал

4 квартал

❯

ИТОГ

Цветовые схемы

Цитата. Блок для выделения текста. Важного и нужного, ибо другого здесь и быть не может. А этот текст идёт красной линией по всей странице, несёт глубинный смысл всей информации. Поэтому мы его и выделяем.

Салатовый


Цветовая схема - Салатовый цвет. Вариант для таблицы.
Белый цвет строки	500
Цвет строки чередованием	27
строка 3	144
строка 4	286

Салатовый яркий

Цветовая схема - Салатовый цвет. Яркий. Вариант для таблицы.
Белый цвет строки	500
Цвет строки чередованием	27
строка 3	144
строка 4	286

Синий


Цветовая схема - Синий цвет. Вариант для таблицы.
Белый цвет строки	500
Цвет строки чередованием	27
строка 3	144
строка 4	286

Вариант в серых тонах

Цветовая схема - чистый серый. Вариант для таблицы.
Белый цвет строки	500
Цвет строки чередованием	27
строка 3	144
строка 4	286

Вариант в тёплых тонах

Цветовая схема. Серый, тёплый. Вариант для таблицы.
Белый цвет строки	500
Цвет строки чередованием	27
строка 3	144
строка 4	286

Вариант в холодных тонах

Цветовая схема - холодный серый. Вариант для таблицы.
Белый цвет строки	500
Цвет строки чередованием	27
строка 3	144
строка 4	286

Вариант

Заголовок #cfdfb1		.	Фон заголовка #d9d6ce	сумма	.
Белый цвет строки	500	.	Белый цвет строки	500 ₽	.
Цвет правой колонки #e0eec6	27	.	Цвет правой колонки #e7e7df	1 050 ₽	.
строка 3	144	.	строка 3	277 ₽	.
Фон #f4ffe4	286	.	Фон #f4f4f0	124 ₽	.
#8f9d78		.	#9a968b		.

В таблице серого цвета слева и справа колонки ячеек с границей белого цвета (white) - колонки с точками.

Интересно отображение:

левая сторона колонки - отображение цвета границы предыдущей колонки (gray)
правая сторона колонки - граница белым цветом :)

Заголовок раздела

▼ Контейнер: Иконка + Заголовок

Заголовок раздела

▼ Обыкновенный Текстовый блок и в нём вставлена Таблица. Но здесь иконку вставляем в виде файла PNG без фона. Фоном заливаем ячейку таблицы. Полоски сверху и снизу - рамка (сверху и снизу) текстового блока.

Заголовок раздела

Размеры Заголовков. Вписал в таблицу, чтобы были видны отступы. В Новостях - размеры другие.

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Переход по ссылке

Блоком Факты, преимущества

Здесь нельзя задать подчёркивание у ссылок. И надо сначала каким-то способом загрузить файл в нужный раздел и скопировать адрес ссылки. Это проще делать в текстовом блоке. Два разных оформления

Переход на страницу Новостей

Неудобно заполнять. Нужно сначала как-то загрузить файл в нужную папку, и только потом указать ссылку для скачивания.

Если делать в Текстовом блоке обыкновенной ссылкой, то там сразу даёт загрузить файл в нужное место и выбрать его.

Муниципальное бюджетное учреждение дополнительного образования «Детская школа искусств г.Шарыпово»

Блоком Контакты

Здесь должна быть ссылка. Сейчас просто текст без возможности перехода по ссылке.

Блоком Меню

Можно выбирать только разделы сайта. Нельзя выбрать файл для скачивания. На 3 колонки (см. компоновку). Задана высота Объектов в списке

Контейнер: Иконка + Текстовый блок

Разные виды оформления.

Перечень предприятий,
осуществляющих деятельность на территории муниципального образования города Шарыпово Красноярского края

Таблица - Контейнер

Контейнер = 1 колонка (текст) + 2 колонка (текст) + 3 колонка (иконка для скачивания файла) + 4 колонка (текст - дата).
И так каждую строку. Потом просто копировать. Заливка построчно. Нижний блок с синей рамкой внизу.

Управление образованием. Заголовок 6

СОШ № 1

Сводный отчет о фактическом исполнении муниципального задания муниципальным бюджетным общеобразовательным учреждением «Средняя общеобразовательная школа №1» за 2 квартал 2023 г.

25.07.2023

СОШ № 1

25.07.2023

2023: Итоги деятельности

Администрации города Шарыпово за год

Программа поддержки местных инициатив

Всероссийская ассоциация развития местного самоуправления

города Шарыпово

Всероссийский фестиваль «Открытие»

Парк «Центральный»

Контакты + рисунок карты с переходом на Карты.Яндекс

Контейнер: Изображение со ссылкой перехода (карта) + блок Факты и преимущества (контакты). Блок взят из раздела Муниципальные закупки и конкурсы

Администрация города Шарыпово

662314, Красноярский край, г.Шарыпово, ул.Горького, д.14А

adm@57.krskcit.ru

8 (39153) 21-1-90

пн-пт: 8.00 - 17.00, перерыв на обед с 12.00 до 13.00

+ КСП: экспертно-аналитическая деятельность

Найдено 7 документов

Заключение от 06.12.2024 № 119 по экспертизе проекта Решения Шарыповского городского Совета депутатов «О бюджете городского округа города Шарыпово на 2025 год и плановый период 2026-2027 годов»

119

Опубликовано: 18.12.2024

Внешняя проверка годовой бюджетной отчётности за 2023 год главного администратора (распорядителя) бюджетных средств.

б/н

Опубликовано: 22.08.2024

Итоги реализации Прогнозного плана (Программы) приватизации муниципального имущества за 2022 год

Опубликовано: 22.08.2024

ЗАКЛЮЧЕНИЕ № 59 от 18.07.2024 Итоги реализации Прогнозного плана (Программы) приватизации муниципального имущества за 2023 год

Опубликовано: 27.07.2024

Заключение Контрольно-счетной платы города Шарыпово по экспертизе проекта Решения Шарыповского городского Совета депутатов от 27.04.2024 №41 «Об исполнении бюджета городского округа города Шарыпово за 2023 год»

Опубликовано: 26.06.2024

ЗАКЛЮЧЕНИЕ № 127 от 08.12.2023 на проект Решения Шарыповского городского Совета депутатов «О бюджете городского округа города Шарыпово на 2024 год и на плановый период 2025-2026 годов»

127

Опубликовано: 14.12.2023

Заключение № 113 от 05.12.2022 на проект Решения Шарыповского городского Совета депутатов «О бюджете городского округа города Шарыпово на 2023 год и плановый период 2024-2025 годов»

113

Опубликовано: 26.03.2023

▲ в начало блока

Заголовок аккордеона с документами

ДОКУМЕНТЫ
строки чередуем по цвету, но нижний - серый с рамкой внизу для отбивки блока. Затем добавляем блоки выше: копируем «контейнер (внутренний)» и вставляем выше.

Найдено 0 документов

Ничего не найдено

Найдено 0 документов

Ничего не найдено

Или так

Найдено 0 документов

Ничего не найдено

Найдено 0 документов

Ничего не найдено

Заголовок аккордеона текстового блока

ПРОГРАММА РАЗВИТИЯ
муниципального образования города Шарыпово Красноярского края

Текст программы по развитию нашего славного муниципального округа города Шарыпово на текущий год, который станет знаковым в истории процветания благосостояния всего населения и улучшении уровня жизни.

Внизу, после контейнера - текст-2. Отступ внизу 40

▲ в начало списка

Заголовок Блока

Поликлиника №1 (Взрослая)

8 (39153) 61-1-55 (доб. 255)

office@sharcrb.ru

г.Шарыпово, Больничный городок, корпус 1

https://shargb.ru

График работы

понедельник-пятница с 7:30 до 18:00, суббота с 9:00 до 14:00

Руководитель

Ильященко М.Ю. Заместитель главного врача по АПР

Терапевтическое отделение (стационар)
Заведующая	Чеботарь Н.М.	8 (39153) 61-1-14 (доб. 309)
Старшая медсестра	Голощапова Т.В.	8 (39153) 61-1-14 (доб. 311)
Приёмный покой		8 (39153) 61-1-14 (доб. 316)
Педиатрическое отделение (стационар)
Заведующий	Фиронов А.Ф.	8 (39153) 61-1-14 (доб. 321)
Ординаторская		8 (39153) 61-1-14 (доб. 322)
Пост		8 (39153) 61-1-14 (доб. 327)
Наркология
Заведующий	Рубцова Н.А.	8 (39153) 61-1-55 (доб. 341)

▲ к началу списка

Ниже - блоки по отдельности

Вверху (перед контейнерос с Аккордеоном - текстовый блок: текст-1

06.11.2019 № 317 «О присвоении спортивных разрядов»
06.11.2019 № 316 «О присвоении спортивных разрядов»
06.11.2019 № 315 «О присвоении спортивных разрядов»
06.11.2019 № 314 «О присвоении спортивных разрядов»
14.10.2019 № 291 «О присвоении спортивных разрядов»
06.05.2019 № 127 «О присвоении спортивных разрядов»
25.04.2019 № 116 «О присвоении судейской категории»
31.01.2019 № 41 «О присвоении спортивных разрядов»
16.01.2019 № 9 «О присвоении спортивного разряда»

Внизу, после контейнера - текст-2. Отступ внизу 40

▲

Блок в 2 цвета

просто пример оформления

03-Блок

показать ▼/▲ скрыть

Делаем как в уроке

Видеоурок_№25_Как_создать_контейнер_с_выпадающим_текстом

Блок, в блоке Кнопка, ниже - текст. В свойствах текста, в разделе Оформление, указываем Скрыть - При нажатии на родительский блок (аккордеон). Самый нижний вариант.

Здесь просто Родительский блок решил сделать не кнопкой а оформить блок: Текст в виде кнопки + текст справа - показать / скрыть. Но тогда курсор не меняется при наведении на Родительский блок.

Лучше делать кнопкой?

Картинка + текст

вертикально

контейнер: Картина + контейнер: Текст + контейнер: иконка + телефон

Контакты для обращений по внеплановым отключениям ГВС

Филиал «Берёзовская ГРЭС» ПАО «Юнипро»

Картинка + текст (меню)

горизонтально

контейнер: Картина + Текст (меню)

При уменьшении экрана до 720 рх - картинка и меню становятся вертикально по ширине страницы.

Контейнер сборный

При уменьшении экрана до 500 блоки становятся вертикально. Сложно сделано: куча контейнеров в контейнере. Я бы сделал проще - одну таблицу в каждом блоке. Сделаю как-нибудь.

Поиск участкового по адресу

МВД Российской Федерации

Отчеты участковых уполномоченных

МВД Российской Федерации

Переделал. Остался один тектовый блок с Заголовком и таблицей.

Поиск участкового по адресу

МВД России

мвд.рф/district

Отчёты участковых уполномоченных

МВД России

мвд.рф/district

00-эксперимент

Таблицы: масштабируемость

Таблицы

Утверждённые муниципальные задания

❯

2024 год

❯

2023 год

Отчеты и оценки исполнения муниципальных заданий

2024 год ❯

2023 год ❯

Расчет норматива затрат

Базовый норматив затрат

Отчёты по годам

2024 год

2023 год

Цветовые схемы

Салатовый

Заголовок раздела

Заголовок раздела

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Переход по ссылке

Таблица - Контейнер

Управление образованием. Заголовок 6

Контакты + рисунок карты с переходом на Карты.Яндекс

Администрация города Шарыпово

+ КСП: экспертно-аналитическая деятельность

Заголовок аккордеона с документами

Или так

Заголовок аккордеона текстового блока

Заголовок Блока

Ниже - блоки по отдельности

Блок в 2 цвета

03-Блок

Делаем как в уроке

Лучше делать кнопкой?

Картинка + текст

вертикально

Картинка + текст (меню)

горизонтально

Контейнер сборный

Поиск участкового по адресу

МВД России

Отчёты участковых уполномоченных

МВД России

Утверждённые
муниципальные задания

Отчеты и оценки
исполнения муниципальных заданий