Распознанный текст, спецсимволы и формулы могут содержать ошибки, поэтому с корректным вариантом рекомендуем ознакомиться на отсканированных изображениях учебника выше Также, советуем воспользоваться поиском по сайту, мы уверены, что вы сможете найти больше информации по нужной Вам тематике 5.2. Разметка страниц сайта http://math.sernam.ruСайт http://math.sernam.ru служит для выполнения вычислений в дробях и состоит из трех страниц. Общий дизайн всех трех страниц подобен друг другу, поэтому рассмотрим подробно структуру первой (главной) страницы этого сайта.
В первой строке каждой страницы идет
объявление:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
для интерпретации тегов в соответствии со спецификацией XHTML 1.0. Эта строка необходима для верного представления страницы в окне браузера. В самом верху страницы расположено меню: «Научная библиотека», «Клуб читателей», «Вычисления в дробях», «Информационный ассистент» и справа указан e-mail: sc-lib@list.ru. Ниже идет непосредственно содержание страницы. Она разделена на две части: слева располагается меню: «Калькулятор», «Матрицы», «Тригонометрия», а справа – заголовок страницы «Вычисления в дробях» и строка ввода формулы с кнопкой «Вычислить» (рис. 5.3).
Рис. 5.3. Вид первой страницы сайта math.sernam.ru Для представления верхнего меню сайта
был использован блок div, в который вложены пять других блоков <div>, таким
образом, чтобы они образовывали элементы меню:
<div
class="topmenu">
Класс
topmenu определяет
стиль всего верхнего меню и имеет вид:
.topmenu
{
Здесь свойство font определяет размер и имя шрифта пунктов меню, свойство min-width: 1000px задает минимальную ширину верхнего меню, border-bottom: 1px solid #e0e0e0; указывает браузеру нарисовать линию в нижней части меню шириной 1 пиксел, непрерывную (solid) с цветом #e0e0e0. Свойство background: #fff; определяет белый цвет фона меню, и свойство padding: 0 40px 0 40px; определяет отступ в 40 пикселей от левой и правой границ блока div и 0 пикселей сверху и снизу блока. Так как пункты меню представляют собой
ссылки на другие ресурсы, то дополнительно для них задаются контекстные
селекторы:
.topmenu
a {
Первый селектор определяет цвет и оформление ссылки при ее отображении в окне браузера внутри класса topmenu. Второй селектор использует псевдокласс :hover для изменения цвета ссылки на черный, при наведении на нее курсора. Для описания стилей пунктов меню
используются классы topmenu-item и topmenu-active, имеющие вид:
.topmenu-item {
Первое свойство класса topmenu-item display: inline-block указывает браузеру отображать элемент div не как блоковый (block), а как строчный элемент (inline-block). Это свойство CSS позволяет блоковые элементы превращать в строчные элементы и является полезной особенностью каскадных таблиц стилей. Второе свойство padding: 5px 0 5px 0; задает отступы в 5 пикселей сверху и снизу пункта меню. Это сделано для того, чтобы пункт меню не сливался с верхней границей окна браузера, а внизу – с разделительной линией меню. Третье свойство margin: 0 15px 0 15px; смещает элемент пункта меню на 15 пикселей справа и слева так, чтобы элементы меню визуально были отделены друг от друга. Обратите внимание на отличие свойств padding и margin: padding добавляет пустое пространство внутрь блока, а margin смещает сам блок на странице. Составной класс .topmenu-item.last используется для отображения последнего элемента в меню, в данном случае для отображения ссылки на email. Свойство float: right; указывает браузеру расположить данный пункт от правой границы верхнего меню, которая определяется первым элементом <div class="topmenu">. В результате ссылки на другие ресурсы и ссылка на email визуально четко разделены между собой (рис. 5.3). Последний класс .topmenu-active задает стиль для выбранного пункта меню. Он отображается красным цветом color: #dd4b39, полужирным font-weight: bold, вид курсора в виде указателя cursor: pointer и снизу подчеркивается красной чертой толщиной 2 пиксела border-bottom: 2px solid #dd4b39 (рис. 5.3). Основное содержание страницы описывается
в виде блока меню, стоящего слева и таблицы, находящейся по центру оставшейся
ширины страницы. В терминах HTML-тегов это записано следующим образом:
<!-- меню
слева на странице -->
Блок меню создается с помощью блокового
элемента <div> со стилями,
заданными в классе menu-bar:
.menu-bar
{
Обратите внимание, что первым свойством класса menu-bar идет float: left. Оно необходимо, чтобы блок меню располагался слева, а таблица «обтекала» его справа. Если это свойство убрать, то блок меню также будет расположен слева, но таблица будет следовать на следующей строке за ним, т.е. под меню, что не будет согласоваться с дизайном сайта. Свойства margin-top: 100px и padding-left: 10px задают смещение сверху на 100 пикселей и определяют пустое пространство слева в 10 пикселей. Последнее свойство font определяет размер и название шрифта элементов меню. Определение свойств для тега <a> должно быть уже понятно из предыдущего изложения. Непосредственно элементы меню выполнены
в виде маркированного списка <ul> со следующими стилями:
.menu-bar-list {
Сначала задаются общие стили для всего списка в классе menu-bar-list. Свойство list-style: none означает отсутствие маркеров в списке, а свойство padding: 0px удаление каких-либо специальных смещений для элементов списка (по умолчанию присутствует смещение элементов списка слева). Для определения свойств непосредственно элементов списка, заданных в теге <li>, создается контекстный селектор .menu-bar-list li, в котором определяется min-width: 150px – минимальная ширина элементов меню, и отступы сверху и снизу padding: 5px 0 5px 0, чтобы визуально разделить пункты меню. Наконец, определен контекстный селектор в виде класса .selected, в котором задаются свойства для выбранного пункта меню: color: #DD4B39 – красный цвет и font-weight: bold – полужирный шрифт. Для представления основного содержимого страницы используется таблица, состоящая из двух ячеек, расположенных вертикально друг за другом (рис. 5.4) и центрированной по горизонтали с помощью атрибута align=center.
Рис. 5.4. Расположение таблицы для разметки основного содержимого страницы (здесь временно установлен атрибут border=1 для отображения границ таблицы) В первой (верхней) ячейки находится
название страницы «Вычисления в дробях» со стилями, заданными в классе calc-title:
.calc-title
{
а во второй ячейке записаны два блока <div>: в первом блоке отображается анимированное изображение процесса вычисления и загрузки решения (изначально оно скрыто style="display: none;"), а во втором – полученное решение при вычислении указанных дробей. Второй блок всегда отображается на экране, но т.к. изначально в нем ничего нет, то создается впечатление, что он как будто отсутствует. При нажатии на кнопку «Вычислить» происходит процесс вычисления, с помощью JavaScript решение записывается во второй блок <div> и оно отображается на экране.
|
1 |
Оглавление
|
