Студопедия — основы HTML – Андрей Лоскутов, изд. «Москва» 2010 г
Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

основы 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, работать с ним очень легко, к примеру для того что бы получить информацию о объекте достаточно включить редактор исходного кода, встроенного в браузер и навести на объект.







Дата добавления: 2015-06-15; просмотров: 362. Нарушение авторских прав; Мы поможем в написании вашей работы!



Практические расчеты на срез и смятие При изучении темы обратите внимание на основные расчетные предпосылки и условности расчета...

Функция спроса населения на данный товар Функция спроса населения на данный товар: Qd=7-Р. Функция предложения: Qs= -5+2Р,где...

Аальтернативная стоимость. Кривая производственных возможностей В экономике Буридании есть 100 ед. труда с производительностью 4 м ткани или 2 кг мяса...

Вычисление основной дактилоскопической формулы Вычислением основной дактоформулы обычно занимается следователь. Для этого все десять пальцев разбиваются на пять пар...

Примеры решения типовых задач. Пример 1.Степень диссоциации уксусной кислоты в 0,1 М растворе равна 1,32∙10-2   Пример 1.Степень диссоциации уксусной кислоты в 0,1 М растворе равна 1,32∙10-2. Найдите константу диссоциации кислоты и значение рК. Решение. Подставим данные задачи в уравнение закона разбавления К = a2См/(1 –a) =...

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

В теории государства и права выделяют два пути возникновения государства: восточный и западный Восточный путь возникновения государства представляет собой плавный переход, перерастание первобытного общества в государство...

Мотивационная сфера личности, ее структура. Потребности и мотивы. Потребности и мотивы, их роль в организации деятельности...

Классификация ИС по признаку структурированности задач Так как основное назначение ИС – автоматизировать информационные процессы для решения определенных задач, то одна из основных классификаций – это классификация ИС по степени структурированности задач...

Внешняя политика России 1894- 1917 гг. Внешнюю политику Николая II и первый период его царствования определяли, по меньшей мере три важных фактора...

Studopedia.info - Студопедия - 2014-2024 год . (0.01 сек.) русская версия | украинская версия