Управление и оптимизация / Osnovi informatsionnikh i komputernikh tekhnologiy 2011
.pdf
У создаваемого сайта может быть либо фиксированный – размеры элементов указываются в фиксированных единицах измерения, либо «резиновый» дизайн, при котором размеры указываются в процентном отношении.
Главная страница состоит из следующих элементов: заголовок, меню, информационный блок. В случае необходимости можно еще добавить несколько разделов, например новости.
Создание "каркаса" страницы.
При создании «каркаса» можно использовать табличную или блочную верстку.
Любой макет можно представить в виде таблицы, ячейки которой имеют требуемые размеры, позиции, оформление и содержание. Данный метод является универсальным и прост. Но он имеет достаточно существенный недостаток – нет средств для поддерживания изменений дизайна и достаточно жесткая привязка к содержимому документа.
В настоящее время достаточно широко используется «блочная» верстка. Данные способ верстки предоставляет достаточно большую свободу оформления и положения элементов (контейнеров), содержащих информацию. А использование CSS заметно упрощает оформление документа в целом.
Создать документ, содержащий таблицу со следующей структурой:
Мы подробно рассмотрим технологию такой верстки, чтобы htmlстраница:
81
−не зависимо от разрешения экрана, браузера (возьмем самые популярные: IE, Firefox, Opera), темы оформления Windows и
настроения вебмастера, выглядела бы одинаково - как на макете;
−была "читаемой" даже при отключенной графике;
−имела легкий, удобный для редактирования html-код;
−растягивалась на полную ширину экрана.
Разметки с фиксированной и непостоянной шириной имеют как свои преимущества, так и недостатки. С одной стороны фиксированные размеры позволяют оставлять дизайн неизменным, но при малых размерах экрана появляется полоса прокрутки. С другой стороны непостоянная ширина может сжать дизайн настолько сильно, что страница будет нечитаемой. Решит эту проблему можно указав минимальные и максимальные размеры блоков.
Блоки отображаются в порядке их описания в документе: слева – направо, сверху – вниз.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--указывается тип документа--> <html>
<head> <!--заголовок страницы-->
<meta http-equiv="Content-Type" content="text/html; charset=windows1251">
</head>
<body>
<div class=colontitul align="center" >
<!-- Блок, содержащий информацию о заголовке --> <h1>Символика МЧС</h1>
</div>
<div style=" width:30%; float:left " >
<!--меню, которое расположено слева и имеет ширину 20% от страницы -->
</div>
<div style="width:70%; float:left "> <!--основной текст документа--> </div>
<div class=colontitul style="clear:both">
<!-- Блок, обычно содержащий контактную информацию, ссылки на похожие сайты, ссылки на партнеров
82
Clear:both означает, что элемент, к которому будет применено это свойство будет перенесен вниз под все блоки в текущем потоке -->
</div>
</body>
</html>
Рекомендации: суммарная ширина расположенных рядом блоков должна составлять 100%, включая отступы, рамки и др. поэтому рекомендуется использовать везде одинаковые единицы измерения.
Аналогичную структуру имеют и остальные три страницы.
Создадим меню. Каждый элемент таблицы должен являться гиперссылкой, ведущей на страницу с соответствующим содержимым. Данный элемент должен быть одинаковым для всех страниц, так же как и заголовок. Меняться должно только содержимое основного текста документа. Можно добавить фон или сделать ссылки в виде графических кнопок, в этом случае необходимо создать три рисунка-кнопки, которые в дальнейшем будут служить гиперссылками.
<div style=" width:30%; height:100%; float:left; background-color: #105783" >
<!--меню, которое расположено слева и имеет ширину 30% от страницы --> <p>
<table border=0px> <tr>
<td ><a href="nz.htm" style="color:#FFFFFF; fontsize:24px">Нагрудные знаки МЧС России</a></td>
</tr>
<tr>
<td>><a href="pv.htm" style="color:#FFFFFF; fontsize:24px">Переходящие вымпелы МЧС России</a></td>
</tr>
<tr>
<td > ><a href="em.htm" style="color:#FFFFFF; fontsize:24px">Эмблемы МЧС России </a></td>
</tr>
</table>
</div>
Зададим оформление страницы. Для лучшего дизайна можно задать стилевое оформление, фон страницы, в заголовок достаточно часто добавляют символику, эмблему. При этом следует помнить, что он должен быть читаемым. Можно использовать фирменные цвета. При выборе дизайна важно учитывать назначение создаваемого сайта.
83
Вблоке, содержащем основную информацию можно добавить текст, иллюстрации и др.
Внижнем колонтитуле может быть указана контактная информация или информация о сайтах по смежной тематике.
Витоге получим первую страницу нашего сайта.
Создадим теперь страницы, которые будут содержать необходимую информацию. Структура данной страницы, будет такая же, как и главной. Поэтому рассмотрим содержимое основного блока div. Будем создавать страницу «Нагрудные знаки МЧС России», «Переходящие вымпелы», «Эмблемы МЧС».
Создаем оставшиеся страницы с использованием базового шаблона и заполняя их содержимым.
Пример содержимого основного текста.
<div style="width:70%; float:left "> <!—основной текст документа-->
<h1 align="center">НАГРУДНЫЕ ЗНАКИ МЧС РОССИИ</h1>
<p align="center"><b>Нагрудный знак МЧС России «Почетный знак МЧС России»</b></p>
<div align="center"><img src="picture/ris1.jpg" width="172" height="234" align="middle">
</div>
84
<p align="center"><strong>Учрежден приказом МЧС России от
25.03.1998 г. № 200</strong></p>
<p align="justify">Награждаются сотрудники МЧС ………..</p> </div>
Страница будет иметь следующий вид.
При создании сайта и оптимизации его загрузки часто изменяют содержимое только одного основного блока. Для этого используют специальные методы JavaScript. Рассмотрение данного вопроса не входит в данное пособие.
Каскадные таблицы стилей CSS
Начнем с рассмотрения примера. Предположим, нам нужен красный цвет фона web-страницы:
В HTML это можно сделать так: <body bgcolor="#FF0000">
С помощью CSS того же самого результата можно добиться так: body {background-color: #FF0000;}
Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:
85
Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Наиболее удобным является третий - то есть внешней/external способ добавления таблице стилей.
Метод 1: Инлайн/In-line (атрибут style)
Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:
<html>
<head>
<title>Example<title>
</head>
<body style="background-color: #FF0000;"> <p>This is a red page</p>
</body>
</html>
Метод 2: Внутренний (тэг style)
Второй способ вставки CSS-кодов - HTML-тэг <style>. Например: <html>
<head>
<title>Example<title> <style type="text/css">
body {background-color: #FF0000;} </style>
</head>
<body>
<p>This is a red page</p> </body>
</html>
Метод 3: Внешний (ссылка на таблицу стилей)
Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В данном учебнике мы будем использовать именно этот метод.
86
Внешняя таблица стилей это просто текстовый файл с расширением
.css, который обычно располагается там же где и остальные файлы, содержащие информацию сайта. Главная идея состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Обратите внимание, как указан путь к вашей таблице стилей атрибутом
href.
Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" /> </head>
<body>
...
Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.
То есть, если вы, например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать, просто изменив один код в центральной таблице стилей.
При применении каскадных таблиц стилей используется свойство наследования - перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
87
Наследование позволяет задавать значения некоторых параметров единожды, определяя их для родителей верхнего уровня. Допустим, требуется установить цвет и шрифт для основного текста. Достаточно воспользоваться селектором BODY, добавить желаемые атрибуты для него, и цвет текста внутри абзацев и других текстовых элементов поменяется автоматически.
Отметим, что необязательно, чтобы макет страницы представлял собой набор колонок, выстроенных в один ряд. Иногда встречается дизайн с произвольным размещением, то есть когда создается набор блоков с абсолютным позиционированием и координатами границ, выраженными в пикселях или процентах.
#main { bottom: 10%; left: 5%; width: 40%;
}
#title { top: 50%; left: 50%;
width: auto;
}
#title h1 { margin: 0;
}
#block2 { top: 2%; right: 2%; width: 25%;
}
div:hover { z-index: 1;
}
...
<div id="main"> <p>
<strong>Центральный блок</strong> имеет ширину 40% (от ширины страницы)
и позиционирован абсолютно следующим образом: bottom: 10%;
left: 5%;. </p>
<p>
"Неправильный" дизайн - с произвольным размещением элементов - используется
88
обычно когда на странице совсем немного содержимого. </p>
</div>
<div id="title"> <h1>
Заголовок</h1> </div>
<div id="block2">
<strong>Блок 2 </strong>позиционирован при помощи свойств top: 2%; right:
2%;
</div>
Иногда для такого оформления страниц используют термин «неправильный дизайн». Заметим, что каждый такой элемент является дочерним по отношению к блоку их содержащему, в частности к BODY и наследуют все его свойства. Однако если в атрибутах данных блоков эти свойства изменены, то данные значения являются приоритетными. При задании нескольких стилей важно определить приоритет использования.
Если для элемента HTML определено более одного стиля, то все стили будут последовательно "каскадированы" в новую "виртуальную" таблицу стилей, согласно следующим правилам:
1.стили, используемые по умолчанию браузером;
2.стили, хранящиеся во внешней таблице;
3.стили, хранящиеся во внутренней таблице стилей (внутри тега
<head>);
89
4.встроенный стиль (внутри элемента HTML).
Таким образом, встроенный стиль (внутри элемента HTML) имеет наивысший приоритет, т.е. будет переопределять стиль, который объявлен в теге <head>, во внешней таблице стилей или в браузере (значение по умолчанию).
При дизайне части используют псевдоклассы, которые позволяют создать специальные эффекты для некоторых элементов, сделать дизайн более творческим. Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши.
Синтаксис применения псевдоклассов следующий. Селектор:Псевдокласс { Описание правил стиля } Вначале указывается селектор, к которому добавляется псевдокласс,
затем следует двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов, для создания оформления, отличного от стандартного (A.menu:hover {color: green}), а также к контекстным селекторам (.menu A:hover {background: #fc0}). Если псевдокласс указывается без селектора впереди (:hover), то он будет применяться ко всем элементам документа.
Условно все псевдоклассы делятся на три группы:
−определяющие состояние элементов;
−имеющие отношение к дереву элементов;
−указывающие язык текста.
Кпервой группе относятся псевдоклассы, которые определяют текущее состояние элемента и применяют стиль к нему только в этом случае.
Active - происходит при активации пользователем элемента. Например, при наведении курсора на ссылку и нажатии левой кнопки мыши.
Link - применяется к непосещенным ссылкам, т.е. ссылкам, на которые пользователь еще не нажимал. Браузер, причем, сохраняет историю посещений некоторое время, поэтому ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован переход раньше.
Hover - активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
Visited - данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно.
Лабораторная работа
«Создание Web сайта с использованием каскадных таблиц стилей»
Цели работы:
1.Познакомиться с основными принципами создания сайта с использованием каскадных таблиц стилей.
90