Лабораторная работа №8
<ФРЕЙМЫ>
Фреймовая структура Web-сайта
Обычно Web-страница представляет собой единый документ, демонстрируемый в рабочем окне браузера и занимающий это окно целиком. Однако современный стандарт HTML позволяет разделить рабочее окно на несколько независимых зон (фреймов), в каждой из которых будет демонстрироваться своя Web-страница.
Например, можно сформировать на экране три фрейма: сверху – горизонтальную полосу с заголовком страницы, слева – вертикальную полосу с «кнопочным меню», где каждая кнопка является гиперссылкой на одну из подчиненных страниц, а вся остальная часть окна браузера отведена под собственно страницу, причем при щелчке мышью на «кнопках» содержимое третьего фрейма будет менятся, а остальных двух – оставаться неизменным. Кроме того, если основная часть страницы слишком велика и не уменьшается в отведенной для нее области экрана, то при прокручивании ее текста в третьем фрейме с помощью клавиш PageUp, PageDown содержимое двух первых фреймов также не меняется, тогда как на обычной, бесфреймовой странице заголовок и «кнопки» при такой прокрутке «уплывали» бы за верхний край рабочего окна.
Создание фреймовой структуры в HTML
Для того, чтобы создать документ с использованием фреймов, надо создать управляющий HTML-документ, содержащий инструкции, которые задают способ разбиения окна на части.
<frameset>. Определяет структуру Web-страницы; атрибуты в его составе задают число строк и столбцов. Тэгу <frameset> соответствует закрывающийся тэг </frameset>. В управляющем документе, формирующем Web-страницу с фреймами тэг <frameset> используется вместо тэга <body>.
<frame>. Описывает содержимое конкретного фрейма в составе Web-страницы. Данный дескриптор содержит атрибут src=”x”, где х – это относительный или абсолютный URL HTML-документа.
<noframes>. Данные, указанные в составе элемента <noframes>, отображаются в том случае, если броузер не поддерживает фреймов. В данном тэге атрибуты непредусмотрены.
Лабораторная работа №9
<Технология CSS>
Теоретические сведения
Технология CSS (Каскадных таблиц стилей)
Рассмотрим следующий пример. Разместив на страничках текстовую информацию и должным образом ее отформатировав, вы вдруг решили поменять оформление всех заголовков второго уровня, встречающихся на страницах. Для этого вам придется открывать каждую страницу, изменять оформление заголовков, сохранять страницу, открывать следующую и т.д. А представьте, что на вашем сайте более сотни таких страниц? Технология CSS позволяет решить эту проблему.
Рассмотрим другой пример. Посмотрите, как выглядят ваши странички при других установках броузера. Например, загрузите страничку в Internet Explorer и выберите пункты меню броузера Вид - Размер шрифта - Самый крупный. Шрифт пропорционально увеличиться, изменив тем самым внешний вид вашей странички, причем не в лучшую сторону. И эту проблему можно решить, если использовать технологию CSS.
Рассмотрим причины появления технологии CSS. Первоначально в языке HTML не было средств (тегов и атрибутов), преднаначенных для "украшения" элементов, размещаемых на Web-странице. Т.е. в первой версии HTML нельзя было вообще изменять размер текста, его гарнитуру и цвет, нельзя было даже использовать таблицы. В следующих версиях языка стали появляться некоторые теги и атрибуты, отвечающие за оформление страницы. Но все равно, этих средств оказалось не достаточно. К тому же, некоторые из "новых" тегов и атрибутов по-разному интерпретируются различными броузерами. Одним из таких "офромительских" тегов является тег <font>, использование которого сильно нагромождает html-код.
Было принято решение "разделить" html-код страницы - все оформление страницы вынести в отдельный файл и подключать этот файл к каждой странице сайта. Другими словами, в html-коде должны были остаться теги, определяющие элементы (абзацы, таблицы, ссылки, изображения и др) и не задающие их оформление. А оформление страницы содержалось бы в отдельном файла в виде правил. Например, правило p {color: blue} в этом файле назначало бы тексту абзацев синий цвет. Такие внешние файлы и называются Каскадными таблицами стилей (Cascading Styles Sheets) и имеют расширение .css. Каскадными они называются потому, что, изменив в файле CSS лишь одно правило, например, p {color: red}, изменения применяются ко всем страницам, к которым подключен данный файл. В данном случае все абзацы на страницах станут красными.
Как видите, использование технологии CSS предоставляет огромные возможности по оформлению Web-страниц и на самом деле является инструментов профессионального Web-дизайнера.
Классовые селекторы
Пример правила для классового селектора:
.base-text {color: blue; font-style: italic}
Данное правило будет применяться лишь к тем элементам Web-страницы, у которых в теге присутствует атрибут class со значением "base-text". Таким образом, данное правило будет применяться к следующему абзацу:
<p class="base-text">Текст абзаца</p>
К тем, элементам, у которых нет атрибута class="base-text", данное правило применяться не будет.
Данное правило будет применяться лишь к тем элементам Web-страницы, у которых в теге присутствует атрибут ID со значением "nazvanie". Таким образом, данное правило будет применяться к следующему заголовку:
<h1 id="nazvanie">Любой заголовок</h1>
К тем, элементам, у которых нет атрибута id="nazvanie", данное правило применяться не будет.
Контекстные селекторы
Пример правила для контекстного селектора:
td p {color: red}
Данное правило будет применять лишь к тем абзацам, которые находятся внутри тега td, т.е. внутри ячейки таблицы.
Псевдо-классы
Данный тип селекторов позволяет задавать оформление для различных состояний гиперссылок:
a:link {color:blue} - правило для обычной непосещенной ссылки;
a:visited {color: darkred} - правило для посещенной ссылки;
a:active {color:red} - правило для активной ссылки;
a:hover {text-decoration:none} - правило для ссылки, на которую навели указатель мыши.
<!DOCTYPE html>
<html>
<head>
<title>Профессиональное обучение</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="styles/fonts.css"/>
<link rel="stylesheet" type="text/css" href="styles/cernel.css"/>
<link rel="stylesheet" type="text/css" href="styles/main-content.css"/>
<script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script type="text/javascript" src="scripts/jquery.slimscroll.min.js"></script>
<!--nivo-slider-->
<script type="text/javascript" src="scripts/unslider.min.js"></script>
</head>
<body>
<div class="menu-icon close"></div>
<div class="contents" style="left:-470px">
<div class="relative slimscroll">
<div class="title">Оглавление</div>
<ul class="level-1">
<li><a page="cover">Начало</a></li>
<li><a page="input">Введение</a></li>
<li>Раздел 1. Общие вопросы методики преподавания общетехнических дисциплин профессионального обучения
<ul class="level-2">
<li>1 Общедидактические принципы обучения в системе профессионального обучения
<ul class="level-3">
<li><a page="chapter1_1">1.1 Понятие принципов обучения</a></li>
<li><a page="chapter1_2">1.2 Классификация принципов</a></li>
</ul>
</li>
<li>2 Формы организации теоретического обучения
<ul class="level-3">
<li><a page="chapter2_1">2.1 Основные формы организаций теоретического обучения</a></li>
<li><a page="chapter2_2">2.2 Урок</a></li>
</ul>
</li>