Лабораторная работа № 3. Использование каскадных таблиц стилей при РазработкЕ html-страниц
Цель работы: изучение языка HTML и разработка информационного сайта, использование CSS для дизайна веб-страниц.
1 Теоретические сведения
1.1 Лайтбокс без использования JavaScript
|
Рис.1 |
Разметка:
<div id="container">
<div id="header">
<h1>Лайтбокс на XHTML & CSS (без использования JavaScript)</h1>
</div>
<div id="content">
<h2>Нажмите на ссылки в тексте ниже, чтобы увидеть лайтбокс в действии</h2>
<p>Soon after the peace on Naboo <a href="#">planet</a> had been restored, a gungan Dao-Dao decided to go hunting. However, he found a strange metal container with an emblem of the Trade Federation on it. </p>
<p>Dao-Dao <a href="#">regarded</a>it as trash and threw it into the forest. But the very next moment poor gungan was attacked by the whistling hive of droid flies — the modern weapon constructed by the Federation. He had to immediately alarm all gungans! But Dao-Dao decided to defeat the flies himself and create an indestructible power field around them. </p>
</div>
<div id="footer">
</div>
</div>
Разметка очень простая. На данном этапе у нас есть две ссылки, которые ведут в никуда. Данные ссылки в конечном итоге будут использоваться для включения лайтбоксов, но сначала нам нужно добавить разметку для этих лайтбоксов после контейнера <div>:
<ul id="lightboxes">
<li id="lightbox-about">
<div class="box">
<h3>Заголовок подтемы</h3>
<p>
Now you are asked for help by the organizers of the Winter Olympic Games 2014, which, as you know, will be held in Yekaterinozavodsk. And although there are still 6 years ahead, the first sport facility is already put into operation. It is the track for the skiing race.
</p>
</div>
</li>
<li id="lightbox-more">
<div class="box">
<h3>Заголовок текста в лайтбоксе</h3>
<p>
It was decided to construct a huge screen near the tribunes, which would show the name of a current leader during the race. It is known, that only the first N letters of English alphabet are used to write the names of the sportsmen, and each of the N letters should appear in each name exactly once. Technically, the screen looks like a word with letters from the English alphabet; each of these letters can either shine or stay dark.
</p>
</div>
</li>
</ul>
Добавим следующий код CSS в секцию <head> вашего документа (встроенный CSS используется только для наглядности):
html {
font-size: 75%;}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;}
body {
background-color: #f8f8f8;
font-family: arial, helvetica, sans-serif;
color: #777;
text-align: center;
font-size: 1.0833em;
line-height: 1.6923em;}
a {
color: #09F;}
h2 {
font-weight: normal;}
p {
margin: 0 0 1.6923em 0;}
#container {
width: 100%;
height: 100%;}
#header,
#content,
#footer {
text-align: left;
width: 870px;
margin: 0 auto;
padding: 40px;}
#header,
#footer {
background-color: #eee;}
#header h1 {
margin: 0;}
#header p {
margin: 5px 0 0;}
#content {
background-color: #fff;}
/* ---------------------------------------------------------- */
/* Лайтбоксы
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
Все относительно просто, но надо сделать несколько пояснений, почему определенные элементы имеют заданные свойства. Для лайтбокса основную роль играет следующий стиль:
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
Элемент <li> действует как покрывающий слой, который виден непосредственно под прямоугольником лайтбокса. Мы задаем ему высоту в 9999px исходя из предположений, что никто не будет иметь разрешение экрана больше такой величины. Мы не используем свойство height: 100% потому, что это вызывает ошибку при изменении размеров окна.
Обратите внимание, что мы используем RGBa для цвета фона. Internet Explorer, как всегда, не поддерживает RGBa. Поэтому нужно добавить специфическую разметку и стиль для IE, чтобы обойти проблему. Поместите следующий код CSS в секцию <head> вашего документа:
<!--[if IE]>
<style type="text/css">
#lightboxes .ie-bg {
background: #000;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
filter: alpha(opacity=75);}
</style>
<![endif]-->
Затем добавьте следующую разметку внизу определения ваших лайтбоксов (перед закрывающим тегом</li> каждого лайтбокса):
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
Кто-нибудь наверняка обратит внимание, что таким образом вызывается ActiveX попап в IE, но тем не менее без использования JavaScript.
Если посмотреть на промежуточный результат, то лайтбокс располагается под нашим контентом, что не соответствует представлениям о данном элементе веб интерфейса. Таким нам нужно добавить свойств CSS, чтобы лайтбокс располагался поверх контента. Следующий код надо добавить к стилю #container:
position: absolute;
top: 0;
left: 0;
Данный код может несколько смущать. Почему мы добавляем его к #container, а не к стилю элемента #lightboxes? Потому, что если добавить его к стилю элемента #lightboxes, то данный элемент-потомок будет всегда над #container (вне зависимости от ничего), таким образом мы никогда не сможем нажать на ссылку в области контента снова, даже когда лайтбокс будет ‘закрыт’. А мы располагаем #container между элементами наследниками #lightboxes. Почему это необходимо станет понятно на следующем шаге.
Также нам нужно видеть одновременно только один лайтбокс, поэтому добавим к стилю #lightboxes:
overflow: hidden;
Это работает, потому что для элемента #lightboxes в CSS задана высота в 100% от размера окна. Таким образом он скрывает все, что выступает за высоту окна. Однако Internet Explorer требует дополнительных действий, чтобы получить такой же эффект. Нужно добавить следующий код в раздел CSS для IE в условном комментарии, который был вставлен ранее:
#lightboxes {
position: relative;}