основы HTML – Андрей Лоскутов, изд. «Москва» 2010 г

 

Приложение 1

При создании данного html-документа использованы языки как css, java, shcw-flash.

Сайт протестирован в других браузерах, одинаково отображается, без сбоев производятся переходы по блокам, без затруднения воспроизводятся медиа файлы.

При создании документа помимо главного каскадной таблицы стилей ещё был задействован документ tabs.css при помощи которого готовый html-документ выглядит именно таким образом, как было задано в каскадных таблицах.

Структура файла каскадной таблицы стилей tabs.css:

* {margin: 0; padding: 0;} (начало каскадной страницы, в котором задано что документ выполнен без различных видимых отступов)

body {margin: 30px; font: 13px/1.5 "Trebuchet MS", Tahoma, Arial;} (тело документа выполнено на поле величиной 30 пикселей, шрифт, размер которого составляет 13 пикселей по умолчанию)

a {color: #0094D6;} (цвет поля)

p {padding: 7px 0;} (габариты строки меню)

h1 {font-size: 21px; font-weight: normal; margin: 0 0 30px;}(размер шрифта:21 пиксель, шрифт: нормальный)

 

.section { (команда, задаёт секцию)

width: 100%; (размер секции соответствует 100%)

background: #EFEFEF; (цвет фона секции)

margin: 0 0 30px; (ориентация секции)

}

ul.tabs { (вводится команда таблицы – списка)

height: 335px; (его высота составляет 335 пикселей)

line-height: 25px; (высота каждой линии: 25 пикселей)

list-style: none; (отсутствие лист-стилей)

border-bottom: 1px solid #DDD; (цвет кнопки-строки списка)

background: #FFF; (цвет фона)

}

.tabs li { (вводится команды списка таблицы)

float: left; (расположение: слева)

display: inline; (отображение: в линию)

margin: 0 1px -1px 0; (отступ)

padding: 0 13px 1px; (отступы по краям)

color: #777; (цвет элементов списка)

cursor: pointer; (курсор: точечный)

background: #F9F9F9; (задний фон имеет цвет под номером F9F9F9)

border: 1px solid #E4E4E4;(цвет однопиксельного объекта)

border-bottom: 1px solid #F9F9F9; (цвет кнопки)

position: relative; (определение позиции)

}

.tabs li:hover, (ввод команды вертикального интерактивного меню)

.vertical.tabs li:hover { (вертикальное меню соответствует заданному в предыдущем разделе таблице-списку)

color: #F70; (цвет меню)

padding: 0 13px; (ориентация)

background: #FFFFDF; (цвет фона)

border: 1px solid #FFCA95; (цвет одного пикселя фона)

}

.tabs li.current { (ввод команды, отображающего выбранный элемент меню таблицы списка)

color: #444; (цвет во время выбора)

background: #EFEFEF; (цвет фона)

padding: 0 13px 2px; (ориентация выбранного элемента меню)

border: 1px solid #D4D4D4; (цвет пикселя выбранного элемента меню)

border-bottom: 1px solid #EFEFEF; (цвет кнопочной надписи)

}

.box { (элемент, вводящий контейнеры)

display: none; (отображение)

border: 1px solid #D4D4D4;(цвет, который будет отображаться)

border-width: 0 1px 1px; (ориентация контейнеров)

background: #EFEFEF; (фон контейнеров)

padding: 0 12px; (ориентация фона)

}

.box.visible {(команда, отображающая контейнер)

display: block; (отображать блок, соответствующий поочередному тексту в блоке)

}

 

.section.vertical { (отображение вертикальной секции меню)

width: 80%; (соотношение размера)

border-left: 260px solid #FFF; (цвет 260 пикселей соответствует цвету под номером FFF (белый))

}

.vertical.tabs { (вертикальный список)

width: 260px; (габариты: 260 пикселей)

float: left; (расположение: слева)

display: inline; (отображение: линейное)

margin: 0 0 0 -260px; (отступы)

}

.vertical.tabs li { (вертикальный элемент списка)

padding: 0 13px; (расположение)

margin: 0 0 1px; (ориентация)

border: 1px solid #E4E4E4; (цвет 1 пикселя)

border-right: 1px solid #F9F9F9; (цвет соответствующий одному пикселю)

width: 232px; (ширина)

height: 25px; (высота)

}

.vertical.tabs li:hover {(вертикальный список таблицы)

width: 231px; (ширина вертикального списка таблицы)

}

.vertical.tabs li.current { (вертикальный активный элемент списка таблицы)

width: 233px; (ширина вертикального выбранного элемента списка таблицы)

color: #fff; (цвет выбранного элемента списка)

background: #EFEFEF; (цвет фона выбранного элемента списка таблицы)

border: 1px solid #D4D4D4; (цвет)

border-right: 1px solid #EFEFEF;

margin-right: -1px; (расположение)

}

.vertical.box { (вертикальный блок)

border-width: 1px; (высота вертикального элемента блока)

}

Приложение 2

 

Так же для того что бы в документе отображались элементы java нужно создать отдельную, третью каскадную таблицу к документу и ввести:

.gp-gallery-picture-zoom {

border: 1px solid #bbb;

margin: -6px 0 0 -6px;

position: absolute;

z-index: 100;

padding: 5px;

background: white;

box-shadow: 0 0 10px #999;

}

.gp-gallery-picture-hover {

box-shadow: 1px 1px 5px #333;

}

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

При создании html-страницы особая работа в оформлении страницы осуществлялось при помощи браузера Google Chrome, работать с ним очень легко, к примеру для того что бы получить информацию о объекте достаточно включить редактор исходного кода, встроенного в браузер и навести на объект.