Мне нужна помощь с боковым панелем (слева), где нужно указать содержание темы в html
Всем привет! Обращаюсь к вам за помощью. Сейчас делаю интерфейс, который будет содержать:
- навигационную панель для перехода на следующую или предыдущую страницу (кнопки "Назад" и "Далее");
- боковую панель (с надписью "Оглавление" посередине), где будет содержание темы (переход между страницами также);
- справа от боковой панели текст, который будет написан.
Вот, как это должно быть на примере:
У меня получится интерфейс, где боковая панель, но текст содержания тем внизу (что неправильно). Блок посередине, где должен быть текст, ниже боковой панели, это неверно. Что я не так делаю?
Код первой страницы:
.navbar {
background-color: #FEFFA8;
padding-top: 30px;
padding-bottom: 30px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.navbar a {
display: inline;
}
.previous {
background-color: whitesmoke;
color: black;
text-decoration: none;
border: 1px solid black;
padding: 4px 12px;
}
.previous:hover {
background-color: lightgray;
}
.previous_hidden {
background-color: #FEFFA8;
color: #FEFFA8;
text-decoration: none;
border: 1px solid #FEFFA8;
padding: 4px 12px;
}
.next {
background-color: whitesmoke;
color: black;
text-decoration: none;
border: 1px solid black;
padding: 4px 12px;
}
.next:hover {
background-color: lightgray;
}
.next_hidden {
background-color: #FEFFA8;
color: #FEFFA8;
text-decoration: none;
border: 1px solid #FEFFA8;
padding: 4px 12px;
}
.sidebar {
padding-top: 100%;
width: 18%;
background-color: #EAECEE;
border: 1px solid black;
}
.sidebar a {
display: flex;
}
.contents {
background-color: #EAECEE;
font-size: 14px;
color: black;
text-decoration: none;
padding: 4px 12px;
}
.contents_current {
background-color: #FEFFA8;
font-size: 14px;
color: black;
text-decoration: none;
padding: 4px 12px;
}
.contents:hover {
background-color: lightgray;
}
.body {
height: 100%;
margin-left: 18%;
margin-right: 18%;
border: 1px solid black;
}
h1 {
font-size: 28px;
}
p {
font-size: 18px;
}<style>
span.bold {
font-weight: bold;
}
</style>
<header>
<div class="navbar">
<div>
<a class="previous_hidden">Назад</a>
</div>
<div>
<a href="index7_2.html" class="next">Далее</a>
</div>
</div>
<div class="sidebar">
<a style="font-size: 18px">Оглавление</a>
<div>
<a href="index7_1.html" class="contents_current">1.1. Основные понятия</a>
</div>
<div>
<a href="index7_2.html" class="contents">1.2. Подготовительные этапы управления рисками</a>
</div>
<div>
<a href="index7_3.html" class="contents">1.3. Основные этапы управления рисками</a>
</div>
</div>
</header>
<div class="body">
<h1 align="center">Управление рисками</h1>
<h1 align="center">1.1. Основные понятия</h1>
<p>   Управление рисками рассматривается нами на административном уровне ИБ, поскольку только руководство организации способно выделить необходимые ресурсы, инициировать и контролировать выполнение соответствующих программ.</p>
<p>   Вообще говоря, управление рисками, равно как и выработка собственной политики безопасности, нужно только для тех организаций, информационные системы которых и/или обрабатываемые данные можно считать нестандартными. Типовую организацию
вполне устроит типовой набор защитных мер, выбранный на основе представления о типичных рисках или вообще без всякого анализа рисков (особенно это верно с формальной точки зрения, в свете проанализированного нами ранее российского законодательства
в области ИБ). Можно провести аналогию между индивидуальным строительством и получением квартиры в районе массовой застройки. В первом случае необходимо принять множество решений, оформить большое количество бумаг, во втором достаточно определиться
лишь с несколькими параметрами.</p>
<p>   Использование информационных систем связано с определенной совокупностью рисков. Когда риск (возможный ущерб) неприемлемо велик, необходимо принять экономически оправданные защитные меры. Периодическая (пере)<span class="bold">оценка рисков</span> необходима для контроля эффективности деятельности в области безопасности и для учета изменений обстановки.</p>
<p>   С количественной точки зрения размер риска является функцией вероятности реализации определенной угрозы (использующей некоторые уязвимости), а также величины возможного ущерба.</p>
<p>   Таким образом, суть работы по управлению рисками состоит в том, чтобы оценить их размер, выработать эффективные и экономичные меры по уменьшению этого размера и затем убедиться, что риски заключены в приемлемые рамки (и остаются таковыми).
Следовательно, управление рисками включает в себя два вида деятельности, которые чередуются циклически:</p>
<p>   - (пере)оценку (измерение) рисков;</p>
<p>   - выбор эффективных и экономичных защитных средств (<span class="bold">нейтрализация рисков</span>).</p>
<p>   По отношению к выявленным рискам возможны следующие действия:</p>
<p>   - ликвидация риска (например, за счет устранения причины);</p>
<p>   - уменьшение риска (например, за счет использования дополнительных защитных средств);</p>
<p>   - принятие риска (и выработка плана действия в соответствующих условиях);</p>
<p>   - переадресация риска (например, путем заключения страхового соглашения).</p>
<p>   Процесс управления рисками можно подразделить на следующие этапы:</p>
<p>   (1) выбор анализируемых объектов и уровня детализации их рассмотрения;</p>
<p>   (2) выбор методологии оценки рисков;</p>
<p>   (3) идентификация активов;</p>
<p>   (4) анализ угроз и их последствий, определение уязвимостей в защите;</p>
<p>   (5) оценка рисков;</p>
<p>   (6) выбор защитных мер;</p>
<p>   (7) реализация и проверка выбранных мер;</p>
<p>   (8) оценка остаточного риска.</p>
<p>   Этапы (6) и (7) относятся к выбору защитных средств (нейтрализации рисков), остальные - к оценке рисков.</p>
<p>   Уже перечисление этапов показывает, что управление рисками - процесс циклический. По существу, последний этап - это оператор конца цикла, предписывающий вернуться к началу. Риски нужно контролировать постоянно, периодически проводя
их переоценку. Отметим, что добросовестно выполненная и тщательно документированная первая оценка может существенно упростить последующую деятельность.</p>
<p>   Управление рисками, как и любую другую деятельность в области информационной безопасности, необходимо интегрировать в <span class="bold">жизненный цикл ИС</span>. Тогда эффект оказывается наибольшим, а затраты - минимальными. Ранее
мы определили пять этапов жизненного цикла. Кратко опишем, что может дать управление рисками на каждом из них.</p>
<p>   На этапе <span class="bold">инициации</span> известные риски следует учесть при выработке требований к системе вообще и средствам безопасности в частности.</p>
<p>   На этапе <span class="bold">закупки</span> (разработки) выявленные риски способны помочь при выборе архитектурных решений, играющих ключевую роль в обеспечении безопасности.</p>
<p>   На этапе <span class="bold">установки</span> выявленные риски следует учитывать при конфигурировании, тестировании и проверке ранее сформулированных требований, а полный цикл управления рисками должен предшествовать внедрению системы
в эксплуатацию.</p>
<p>   На этапе <span class="bold">эксплуатации</span> управление рисками должно сопровождать все существенные изменение в системе.</p>
<p>   При <span class="bold">выведении системы из эксплуатации</span> управление рисками помогает убедиться в том, что миграция данных происходит безопасным образом.</p>
</div>Код второй страницы:
.navbar {
background-color: #FEFFA8;
padding-top: 30px;
padding-bottom: 30px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.navbar a {
display: inline;
}
.previous {
background-color: whitesmoke;
color: black;
text-decoration: none;
border: 1px solid black;
padding: 4px 12px;
}
.previous:hover {
background-color: lightgray;
}
.previous_hidden {
background-color: #FEFFA8;
color: #FEFFA8;
text-decoration: none;
border: 1px solid #FEFFA8;
padding: 4px 12px;
}
.next {
background-color: whitesmoke;
color: black;
text-decoration: none;
border: 1px solid black;
padding: 4px 12px;
}
.next:hover {
background-color: lightgray;
}
.next_hidden {
background-color: #FEFFA8;
color: #FEFFA8;
text-decoration: none;
border: 1px solid #FEFFA8;
padding: 4px 12px;
}
.sidebar {
padding-top: 100%;
width: 18%;
background-color: #EAECEE;
border: 1px solid black;
}
.sidebar a {
display: flex;
}
.contents {
background-color: #EAECEE;
font-size: 14px;
color: black;
text-decoration: none;
padding: 4px 12px;
}
.contents_current {
background-color: #FEFFA8;
font-size: 14px;
color: black;
text-decoration: none;
padding: 4px 12px;
}
.contents:hover {
background-color: lightgray;
}
.body {
height: 100%;
margin-left: 18%;
margin-right: 18%;
border: 1px solid black;
}
h1 {
font-size: 28px;
}
p {
font-size: 18px;
}<style>
span.bold {
font-weight: bold;
}
</style>
<header>
<header>
<div class="navbar">
<div>
<a href="index7_1.html" class="previous">Назад</a>
</div>
<div>
<a href="index7_3.html" class="next">Далее</a>
</div>
</div>
<div class="sidebar">
<a style="font-size: 18px">Оглавление</a>
<div>
<a href="index7_1.html" class="contents">1.1. Основные понятия</a>
</div>
<div>
<a href="index7_2.html" class="contents_current">1.2. Подготовительные этапы управления рисками</a>
</div>
<div>
<a href="index7_3.html" class="contents">1.3. Основные этапы управления рисками</a>
</div>
</div>
</header>
</header>
<div class="body">
<h1 align="center">Управление рисками</h1>
<h1 align="center">1.2. Подготовительные этапы управления рисками</h1>
<p>   В этом разделе будут описаны первые три этапа процесса управления рисками.</p>
<p>   Выбор анализируемых объектов и уровня детализации их рассмотрения - первый шаг в оценке рисков. Для небольшой организации допустимо рассматривать всю информационную инфраструктуру; однако, если организации крупная, всеобъемлющая оценка
может потребовать неприемлемых затрат времени и сил. В таком случае следует сосредоточиться на наиболее важных сервисах, заранее соглашаясь с приближенностью итоговой оценки. Если важных сервисов все еще много, выбираются те из них, риски для которых
заведомо велики или неизвестны.</p>
<p>   Мы уже указывали на целесообразность создания карты информационной системы организации. Для управления рисками подобная карта особенно важна, поскольку она наглядно показывает, какие сервисы выбраны для анализа, а какими было решено
пренебречь. Если ИС меняется, а карта поддерживается в актуальном состоянии, то при переоценке рисков сразу станет ясно, какие новые или существенно изменившиеся сервисы нуждаются в рассмотрении.</p>
<p>   Вообще говоря, уязвимым является каждый компонент информационной системы - от куска сетевого кабеля, который могут прогрызть мыши, до базы данных, которая может быть разрушена из-за неумелых действий администратора. Как правило, в
сферу анализа невозможно включить каждый винтик и каждый байт. Приходится останавливаться на некотором уровне детализации, опять-таки отдавая себе отчет в приближенности оценки. Для новых систем предпочтителен детальный анализ; старая система, подвергшаяся
небольшим модификациям, может быть проанализирована более поверхностно.</p>
<p>   Очень важно выбрать разумную методологию оценки рисков. Целью оценки является получение ответа на два вопроса: приемлемы ли существующие риски, и если нет, то какие защитные средства экономически целесообразно использовать. Значит,
оценка должна быть количественной, допускающей сопоставление с заранее выбранными границами допустимости и расходами на реализацию новых регуляторов безопасности. Управление рисками - типичная оптимизационная задача, и существует довольно много программных
продуктов, способных помочь в ее решении (иногда подобные продукты просто прилагаются к книгам по информационной безопасности). Принципиальная трудность, однако, состоит в неточности исходных данных. Можно, конечно, попытаться получить для всех анализируемых
величин денежное выражение, высчитать все с точностью до копейки, но большого смысла в этом нет. Практичнее пользоваться условными единицами. В простейшем и вполне допустимом случае можно пользоваться трехбалльной шкалой. Далее мы продемонстрируем,
как это делается.</p>
<p>   При идентификации активов, то есть тех ресурсов и ценностей, которые организация пытается защитить, следует, конечно, учитывать не только компоненты информационной системы, но и поддерживающую инфраструктуру, персонал, а также нематериальные
ценности, такие как репутация организации. Отправной точкой здесь является представление о миссии организации, то есть о видимых снаружи основных направлениях деятельности, которые желательно (или необходимо) сохранить в любом случае. Выражаясь объектно-ориентированным
языком, следует в первую очередь описать внешний интерфейс организации, рассматриваемой как абстрактный объект.</p>
<p>   Одним из главных результатов процесса идентификации активов является получение детальной информационной структуры организации и способов ее (структуры) использования. Эти сведения целесообразно нанести на карту ИС в качестве граней
соответствующих объектов.</p>
<p>   Информационной основой сколько-нибудь крупной организации является сеть, поэтому в число аппаратных активов следует включить компьютеры (серверы, рабочие станции, ПК), периферийные устройства, внешние интерфейсы, кабельное хозяйство,
активное сетевое оборудование (мосты, маршрутизаторы и т.п.). К программным активам, вероятно, будут отнесены операционные системы (сетевая, серверные и клиентские), прикладное программное обеспечение, инструментальные средства, средства управления
сетью и отдельными системами, Важно зафиксировать, где (в каких узлах сети) хранится программное обеспечение и из каких узлов используется. Третьим видом информационных активов являются данные, которые хранятся, обрабатываются и передаются по сети.
Следует классифицировать данные по типам и степени конфиденциальности, выявить места их хранения и обработки, способы доступа к ним. Все это важно для оценки последствий нарушений информационной безопасности.</p>
<p>   Управление рисками - процесс далеко не линейный. Практически все его этапы связаны между собой, и по завершении почти любого из них может выявиться необходимость возврата к предыдущему. Так, при идентификации активов может появиться
понимание, что выбранные границы анализа следует расширить, а степень детализации - увеличить. Особенно труден первичный анализ, когда многократные возвраты к началу неизбежны.</p>
</div>Код третьей страницы:
.navbar {
background-color: #FEFFA8;
padding-top: 30px;
padding-bottom: 30px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.navbar a {
display: inline;
}
.previous {
background-color: whitesmoke;
color: black;
text-decoration: none;
border: 1px solid black;
padding: 4px 12px;
}
.previous:hover {
background-color: lightgray;
}
.previous_hidden {
background-color: #FEFFA8;
color: #FEFFA8;
text-decoration: none;
border: 1px solid #FEFFA8;
padding: 4px 12px;
}
.next {
background-color: whitesmoke;
color: black;
text-decoration: none;
border: 1px solid black;
padding: 4px 12px;
}
.next:hover {
background-color: lightgray;
}
.next_hidden {
background-color: #FEFFA8;
color: #FEFFA8;
text-decoration: none;
border: 1px solid #FEFFA8;
padding: 4px 12px;
}
.sidebar {
padding-top: 100%;
width: 18%;
background-color: #EAECEE;
border: 1px solid black;
}
.sidebar a {
display: flex;
}
.contents {
background-color: #EAECEE;
font-size: 14px;
color: black;
text-decoration: none;
padding: 4px 12px;
}
.contents_current {
background-color: #FEFFA8;
font-size: 14px;
color: black;
text-decoration: none;
padding: 4px 12px;
}
.contents:hover {
background-color: lightgray;
}
.body {
height: 100%;
margin-left: 18%;
margin-right: 18%;
border: 1px solid black;
}
h1 {
font-size: 28px;
}
p {
font-size: 18px;
}<style>
span.bold {
font-weight: bold;
}
</style>
<header>
<div class="navbar">
<div>
<a class="previous_hidden">Назад</a>
</div>
<div>
<a href="index7_2.html" class="next">Далее</a>
</div>
</div>
<div class="sidebar">
<a style="font-size: 18px">Оглавление</a>
<div>
<a href="index7_1.html" class="contents">1.1. Основные понятия</a>
</div>
<div>
<a href="index7_2.html" class="contents">1.2. Подготовительные этапы управления рисками</a>
</div>
<div>
<a href="index7_3.html" class="contents_current">1.3. Основные этапы управления рисками</a>
</div>
</div>
</header>
<h1 align="center">Управление рисками</h1>
<h1 align="center">1.3. Основные этапы управления рисками</h1>
<p>   </p>
<p>   </p>
<p>   </p>
<p>   </p>
<p>   </p>
<p>   </p>
<p>   </p>
<p>   </p>
<p>   </p>
<p>   </p>
<p>   </p>
<p>   </p>
<footer>
<p>Выполнил студент 2-го курса группы ОДБП-201вм Кондраков Михаил</p>
</footer>Ответы (1 шт):
Автор решения: SwaD
→ Ссылка
HTML - блочная верстка.
Как минимум надо из header вытащить собственно меню. Основной блок(ниже шапки), лучше обернуть в отдельный контейнер. Ну и немного стили подправить(для наглядности тут), хотя там стилей править, на самом деле еще много.
Ниже пример правки верстки
span.bold {
font-weight: bold;
}
.navbar {
background-color: #FEFFA8;
padding-top: 30px;
padding-bottom: 30px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.navbar a {
display: inline;
}
.previous {
background-color: whitesmoke;
color: black;
text-decoration: none;
border: 1px solid black;
padding: 4px 12px;
}
.previous:hover {
background-color: lightgray;
}
.previous_hidden {
background-color: #FEFFA8;
color: #FEFFA8;
text-decoration: none;
border: 1px solid #FEFFA8;
padding: 4px 12px;
}
.next {
background-color: whitesmoke;
color: black;
text-decoration: none;
border: 1px solid black;
padding: 4px 12px;
}
.next:hover {
background-color: lightgray;
}
.next_hidden {
background-color: #FEFFA8;
color: #FEFFA8;
text-decoration: none;
border: 1px solid #FEFFA8;
padding: 4px 12px;
}
.sidebar {
/*padding-top: 100%;*/
width: 18%;
background-color: #EAECEE;
border: 1px solid black;
}
.sidebar a {
display: flex;
}
.contents {
background-color: #EAECEE;
font-size: 14px;
color: black;
text-decoration: none;
padding: 4px 12px;
}
.contents_current {
background-color: #FEFFA8;
font-size: 14px;
color: black;
text-decoration: none;
padding: 4px 12px;
}
.contents:hover {
background-color: lightgray;
}
.body {
height: 100%;
/*margin-left: 18%;
margin-right: 18%;*/
border: 1px solid black;
width: 100%;
}
h1 {
font-size: 28px;
}
p {
font-size: 18px;
}
.main {
display: flex;
width: 100%;
}<header>
<div class="navbar">
<div>
<a class="previous_hidden">Назад</a>
</div>
<div>
<a href="index7_2.html" class="next">Далее</a>
</div>
</div>
</header>
<div class="main">
<div class="sidebar">
<a style="font-size: 18px">Оглавление</a>
<div>
<a href="index7_1.html" class="contents_current">1.1. Основные понятия</a>
</div>
<div>
<a href="index7_2.html" class="contents">1.2. Подготовительные этапы управления рисками</a>
</div>
<div>
<a href="index7_3.html" class="contents">1.3. Основные этапы управления рисками</a>
</div>
</div>
<div class="body">
<h1 align="center">Управление рисками</h1>
<h1 align="center">1.1. Основные понятия</h1>
<p>   Управление рисками рассматривается нами на административном уровне ИБ, поскольку только руководство организации способно выделить необходимые ресурсы, инициировать и контролировать выполнение соответствующих программ.</p>
<p>   Вообще говоря, управление рисками, равно как и выработка собственной политики безопасности, нужно только для тех организаций, информационные системы которых и/или обрабатываемые данные можно считать нестандартными. Типовую организацию
вполне устроит типовой набор защитных мер, выбранный на основе представления о типичных рисках или вообще без всякого анализа рисков (особенно это верно с формальной точки зрения, в свете проанализированного нами ранее российского законодательства
в области ИБ). Можно провести аналогию между индивидуальным строительством и получением квартиры в районе массовой застройки. В первом случае необходимо принять множество решений, оформить большое количество бумаг, во втором достаточно определиться
лишь с несколькими параметрами.</p>
<p>   Использование информационных систем связано с определенной совокупностью рисков. Когда риск (возможный ущерб) неприемлемо велик, необходимо принять экономически оправданные защитные меры. Периодическая (пере)<span class="bold">оценка рисков</span> необходима для контроля эффективности деятельности в области безопасности и для учета изменений обстановки.</p>
<p>   С количественной точки зрения размер риска является функцией вероятности реализации определенной угрозы (использующей некоторые уязвимости), а также величины возможного ущерба.</p>
<p>   Таким образом, суть работы по управлению рисками состоит в том, чтобы оценить их размер, выработать эффективные и экономичные меры по уменьшению этого размера и затем убедиться, что риски заключены в приемлемые рамки (и остаются
таковыми). Следовательно, управление рисками включает в себя два вида деятельности, которые чередуются циклически:</p>
<p>   - (пере)оценку (измерение) рисков;</p>
<p>   - выбор эффективных и экономичных защитных средств (<span class="bold">нейтрализация рисков</span>).</p>
<p>   По отношению к выявленным рискам возможны следующие действия:</p>
<p>   - ликвидация риска (например, за счет устранения причины);</p>
<p>   - уменьшение риска (например, за счет использования дополнительных защитных средств);</p>
<p>   - принятие риска (и выработка плана действия в соответствующих условиях);</p>
<p>   - переадресация риска (например, путем заключения страхового соглашения).</p>
<p>   Процесс управления рисками можно подразделить на следующие этапы:</p>
<p>   (1) выбор анализируемых объектов и уровня детализации их рассмотрения;</p>
<p>   (2) выбор методологии оценки рисков;</p>
<p>   (3) идентификация активов;</p>
<p>   (4) анализ угроз и их последствий, определение уязвимостей в защите;</p>
<p>   (5) оценка рисков;</p>
<p>   (6) выбор защитных мер;</p>
<p>   (7) реализация и проверка выбранных мер;</p>
<p>   (8) оценка остаточного риска.</p>
<p>   Этапы (6) и (7) относятся к выбору защитных средств (нейтрализации рисков), остальные - к оценке рисков.</p>
<p>   Уже перечисление этапов показывает, что управление рисками - процесс циклический. По существу, последний этап - это оператор конца цикла, предписывающий вернуться к началу. Риски нужно контролировать постоянно, периодически проводя
их переоценку. Отметим, что добросовестно выполненная и тщательно документированная первая оценка может существенно упростить последующую деятельность.</p>
<p>   Управление рисками, как и любую другую деятельность в области информационной безопасности, необходимо интегрировать в <span class="bold">жизненный цикл ИС</span>. Тогда эффект оказывается наибольшим, а затраты - минимальными. Ранее
мы определили пять этапов жизненного цикла. Кратко опишем, что может дать управление рисками на каждом из них.</p>
<p>   На этапе <span class="bold">инициации</span> известные риски следует учесть при выработке требований к системе вообще и средствам безопасности в частности.</p>
<p>   На этапе <span class="bold">закупки</span> (разработки) выявленные риски способны помочь при выборе архитектурных решений, играющих ключевую роль в обеспечении безопасности.</p>
<p>   На этапе <span class="bold">установки</span> выявленные риски следует учитывать при конфигурировании, тестировании и проверке ранее сформулированных требований, а полный цикл управления рисками должен предшествовать внедрению системы
в эксплуатацию.</p>
<p>   На этапе <span class="bold">эксплуатации</span> управление рисками должно сопровождать все существенные изменение в системе.</p>
<p>   При <span class="bold">выведении системы из эксплуатации</span> управление рисками помогает убедиться в том, что миграция данных происходит безопасным образом.</p>
</div>
</div>У вас, судя по всему ожидается очень большое количество страниц. Я бы рекомендовал вам, по возможности, перевести это все на какой нибудь сборщик, иначе замучаетесь это поддерживать.