[МУЗЫКА] [МУЗЫКА] На экране вы видите фрагмент разметки документа, которая является заготовкой для графической нотации сайта. На странице размещена секция, которая будет рамкой для нотации, а также множество блоков, которые будут символами узлов нотации. Блокам присвоены классы. Забегая вперед, скажу, что посредством стилевых описаний, заданных в классах, блоки будут смещаться сверху или сверху и слева относительно рамки нотации. На экране появился фрагмент стилевых описаний документа. В нем заданы параметры рамки, а также характеристики блока узла. Обратите внимание на то, что помимо рассмотренных ранее в описании появилось свойство box-sizing. Ему задано значение border box. Такая характеристика элемента включает ширину, в частности рамки, в общие размеры элемента. Без указания этого параметра ширина рамки увеличивает размеры элемента. Вы видите продолжение стилевых описаний. Здесь описаны классы, которые задают свойство смещения элементов символов страницы графической нотации. Рассмотренная разметка в совокупности со стилевыми описаниями в окне браузера выглядит таким образом, как вы сейчас видите на экране. Попробуйте перенести разметку и стилевые описания в ваш документ. Разметку — в секцию тела документа, стилевые описания — в секцию заголовка документа. Вы можете изменить количество элементов в разметке, а также форму и расположение элементов в стилевых описаниях. Сохраните ваш документ и откройте в окне браузера. Если что-то не получилось, вы можете обратиться к примерам веб-страниц, размещенных в материалах модуля. Представленная на экране страница — это файл Level 3.1 HTML. Для того чтобы проименовать символы страниц графической нотации, нужно внутри элементов div разместить текст названия страниц. Графическая нотация с предметизацией будет выглядеть таким образом, как представлено сейчас на экране. И страница, которую вы видите, это файл Level 3.2 HTML. Добавить описание фона элементов графической нотации можно в уже существующие классы, описывающие позиционирование элементов. В случае данной страницы это уместно, так как страница одного раздела характеризуется, с одной стороны, одинаковым смещением слева, с другой стороны, одинаковым ведущим цветом. Приведенный здесь пример — это пример цветографической нотации сайта школы дизайна политехнического университета в Гонконге. В цветографическом решении композиции сайта ведущую роль играет колористическое кодирование. Представленная на экране страница — это файл Level 3_3 HTML. Страница сайта школы дизайна насыщена цветом не настолько сильно, насколько это показывает нотация. Для корректного отображения наполненности страниц следует отредактировать стилевые описания. Во-первых, для всех символов страниц зададим гротесковую гарнитуру шрифта. Что означает эта запись конкретно, я объясню на следующем занятии. Во-вторых, зададим нижнюю границу элемента. Если нужно задать не всю рамку целиком, а только одну границу, используется не свойство bottom, а конкретно свойство border-bottom: border left или border top. Последнее свойство — это внутренний отступ. Он отодвинет текст символа страницы внутрь от края на пять пикселей. Символам страниц одного раздела зададим широкую верхнюю границу кодирующего цвета, описав свойство border top в классах задающим смещение страниц слева. Вот что получилось в результате форматирования. Представленная на экране страница — это файл Level 3_4 HTML.
