Веб-дизайн и верстка. ЖСО-201. Лабораторное занятие №2. Простое меню с колонками на HTML и CSS

марта 06, 2020

Веб-дизайн и верстка. ЖСО-201. Лабораторное занятие №2. Простое меню с колонками на HTML и CSS

Для создания простого меню вам нужно перейти в свой блог, создать новое сообщение и переключиться из режима "создать" в режим "HTML". Рекомендованная тема блога - Notable, параметры страницы: сайдбар - тема - настроить - дополнительно - ширина - ширина области с контентом - 1280 px, боковая панель - 320 рх.

Часть 1 - горизонтальное меню.

1) Указываем doctype, язык страницы и ее название в теге <title>:

<!DOCTYPE html>

<head>

Далее нам нужно создать стили меню и колонок в CSS. Для этого начинаем указывать в Notepad++:

2) Содержимое стилей - фон страницы. Можно оставить как у меня - прозрачный:

body {

background-color: transparent;

margin: 0 auto;

}

3) контейнер меню - ширина по странице:

#wrapper {

margin: 0 auto;

width: 100%;

text-align: center;

}

4) Навигационное меню с шириной в пикселях:

nav {

margin: 0 auto;

margin-top: 3em;

width: 1100px;

}

5) Общий уровень навигации - текст слева, блоки - в ряд:

nav ul {

text-align: left;

display: inline;

margin: 0;

padding: 1em 1em 1em 0;

list-style: none;

}

6) Сами блоки меню и их цвет (замените на свой):

nav ul li {

display: inline-block;

margin-right: .01em;

position: relative;

padding: 1em 3em;

background: blue;

-webkit-transition: all 0.2s;

-moz-transition: all 0.2s;

-ms-transition: all 0.2s;

-o-transition: all 0.2s;

transition: all 0.2s;

}

7) Текст в блоках - шрифт, размер и цвет (у меня белый, можете изменить на свой):

nav li a {

padding-bottom: 1em;

text-decoration: none;

cursor: pointer;

font-size: 14px;

padding: 21px;

text-decoration: none;

font-weight: bold;

font-family: Consolas, monaco, monospace;

color: white;

}

8) Меню при наведении курсора - меняете цвет на свой:

nav ul li:hover {

background-color: skyblue;

}

9) Уровень подменю:

nav ul li ul {

padding: 0;

position: absolute;

top: 3.5em;

left: 0;

width: 16em;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

display: none;

opacity: 0;

visibility: hidden;

-webkit-transiton: opacity 0.2s;

-moz-transition: opacity 0.2s;

-ms-transition: opacity 0.2s;

-o-transition: opacity 0.2s;

-transition: opacity 0.2s;

}

10) Подменю с цветом вкладок (цвет вкладок меняете на свой):

nav ul li ul li {

background-color: skyblue;

display: block;

color: #ffffff;

text-shadow: 0 1px 0 #000;

}

11) Подменю с цветом при наведении курсора (замените на свой):

nav ul li ul li:hover {

background-color: steelblue;

}

nav ul li:hover ul {

display: block;

opacity: 1;

visibility: visible;

}

12) Для добавления простых колонок под меню нужно добавить на страницу CSS-стиль этих колонок и затем подключить их в HTML. Для этого создаем идентификатор шаблона, например, #maket и указываем в нем атрибут ширины макета в процентах ( у меня - 145%). После этого закрываем идентификатор.

13) Обозначаем селекторы таблиц-колонок с идентификаторами левой и правой. Ширину вы задаете свою, как и фоновые цвета каждой из колонок:

TD {
vertical-align: top;
padding: 5px;
}

TD#leftcol {
width: 800px;
background: #87ceeb;
}

TD#rightcol {
width: 500px;
background: #4169e1;
}

14) После этого задаем подвал сайта с помощью селектора footer и указываем его атрибуты: цвет (background-color), цвет текста (color) и ширину (width) в процентах (равна ширине всего макета)

15) Сохраняете параметры стилей как CSS и загружаете в репозиторий google-сайтов (sites.google.com). Создавать репозиторий рекомендуется в классическом интерфейсе.

16) Встраиваете CSS перед закрывающим тегом </head>

Переходим к HTML и в том же порядке указываем те же элементы меню

17) Открываем тег <body>

18) Создаем контейнер, соответствующий тому, что был в CSS:

19) Открываем навигационное меню и создаем его как список. В примере четыре вкладки и два подменю, у вас должно быть пять вкладок и три подменю.

<nav>

<ul>

<ul>

<li><a href="#">Подменю 1</a></li>

<li><a href="#">Подменю 2</a></li>

</ul>

</li>

</ul>

</nav>
</div>

20) После закрытой части меню навигации задаем колонки как таблицу с идентификатором макета:

<table cellspacing="0" id="maket">

21) Внутри указываем тело таблицы с идентификатором колонки (левой и правой):
<tbody>
<tr>
<td id="leftcol">содержимое колонки</td>
<td id="rightcol">содержимое колонки</td>
</tr>
</tbody>
</table>

22) Аналогичным образом вы создаете вторую и третью строку колонок (то есть дублируете пункты 20 и 21) - в итоге у вас должен получиться макет из двух колонок и трех строк.

23) После тега </body> вставляете тег подвала страницы <footer> и указываете в нем произвольное содержимое.

24) Закрываете </html>

Если все верно, то ваше меню будет выглядеть следующим образом: https://konoplevtech3.blogspot.com/2019/02/css.html

Ссылки на выполненное задание принимаются в комментариях до 20:00 10 марта.