SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

О стилях и сценариях

Современные страницы не должны быть похожими на те, что встречались буквально несколько лет назад. Во-первых, из них уходит форматирование, сделанное средствами HTML. Во-вторых, для интерактивной работы с посетителем на них все чаще применяются сценарии. В современном HTML для целей оформления широко применяются каскадные таблицы стилей, которые мы кратко рассмотрим прямо сейчас, и с которыми будем очень плотно знакомиться в третьей части этой книги.

Что такое таблицы стилей

Чтобы рассмотреть форматирование при помощи CSS (верстка HTML с CSS), вновь обратимся к примеру, приведенному в листинге 1.5. Как правило, заголовки лучше выглядят, когда их выравнивают по центру. Это можно сделать двумя способами: либо указать для каждого из них выравнивание по центру, либо поместить оба в единый блок. Для первого случая добавим в начало документа index.html (в часть HEAD) следующий текст:

<style type="text/css"> h1,h2 {text-align: center;} </style>

Здесь H1 и H2 указывают, для каких элементов HTML применяется стиль, а выражение в фигурных скобках определяет собственно стилевое оформление. Если просмотреть этот документ снова, то вы увидите, что заголовки теперь выровнены по центру. Чтобы применить выравнивание сразу на несколько блоков, определим выравнивание при помощи элемента DIV. Для этого вместо определения стилей для H1 и H2, определим стиль для DIV:

div {text-align: center;}

Затем вложим оба заголовка в контейнер DIV. В результате должен получиться документ, подобный приведенному в листинге 1.8 (готовый пример находится в папке Part_1\Formatted).

Листинг 1.8. Оформление с применением CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Главная страница </title> <style type="text/css"> div {text-align: center;} </style> </head> <body> <div> <h1>Приветствую вас на своей страничке!</h1> <h2>Это - главная страница.</h2> </div> <p>А вот мое <a href="hello/hello.html">приветствие</a>.</p> </body> </html>

В браузере это будет выглядеть точно так же, как и в предыдущем варианте. В обоих случаях мы занимались уже не форматированием, а оформлением документа, для чего использовали таблицы стилей. Вообще, таблицы стилей позволяют очень гибко оформлять документ - выравнивать заголовки и абзацы, задавать цветовое и шрифтовое оформление, создавать рамки вокруг объектов, и многое другое. Причем действие таблиц стилей может распространяться как на конкретный элемент, так и целиком на страницу, или даже на множество страниц сразу. Именно поэтому они и называются каскадными. Для того чтобы не возникали конфликты между таблицами различных уровней, определены приоритеты области воздействия. Суть их сводится к тому, что чем ближе к элементу находится описание стиля, тем больший приоритет он имеет.

Рассмотрим данный аспект более внимательно. Для этого возьмем последний вариант многострадального index.html и добавим к открывающему тегу H2 атрибут STYLE, в котором укажем, что выравнивание элемента надо проводить по правому краю:

<h2 style="text-align: right">Это - главная страница</h2>

Теперь, если открыть этот документ в браузере, то строка "Это - главная страница" будет выровнена не по центру, а по правому краю. Таким образом, мы убедились, что встроенные при помощи атрибута STYLE таблицы стилей имеют наибольший приоритет, ведь получается, что стиль определен внутри тега - ближе некуда!

Ранее было отмечено, что действие каскадных таблиц стилей может распространяться на несколько документов сразу. Для этого их выносят в отдельный CSS-файл, а затем ссылаются на него из других документов. Например, создадим файл mystyle1.css такого содержания:

h1,h2 {color: red;}

Затем добавим в часть HEAD файла index.html строку:

<link rel="stylesheet" href="mystyle1.css" type="text/css">

Теперь заголовки стали красного цвета. И любой документ, имеющий ссылку на mystyle1.css будет иметь заголовки H1 и H2 красного цвета.

ПРИМЕЧАНИЕ
Из приведенных только что примеров мы уже можем обнаружить, что познакомились с двумя свойствам CSS - text-align и color. Первое отвечает за выравнивание текста, а второе - за его цвет. Разумеется, это лишь ничтожная часть возможностей таблиц стилей, но до тех пор, пока мы не приступим к более плотному их изучению, в примерах будем ограничиваться, в основном, только этими двумя свойствами.

Помимо применения общего для всех одноименных тегов определения стиля, можно создавать классы элементов. Например, если мы хотим, чтобы в одном и том же документе одни абзацы выравнивались по центру, а другие - по обоим краям, то можем создать соответствующие классы для элемента P. Делается это так, как показано на примере в листинге 1.9.

Листинг 1.9. Применение классов CSS

<head> <style type="text/css"> p.Center {text-align: center;} p.Both {text-align: justify;} </style> </head> <body> <p class="Center"> ...некоторый текст, который надо разместить по центру... </p> <p class="Both"> ...некоторый текст, который должен быть выровнен по обоим краям... </p> </body>

Здесь в определении стиля мы создали два класса для тега P: Center и Both. Для первого указано, что текст форматировать надо по центру, а для второго - по обоим краям (или, как это еще называют, по ширине окна). Для того, чтобы указать, к какому именно классу принадлежит конкретный тег, используется атрибут CLASS. Если атрибут CLASS не указан, то будет применено форматирование, принятое по умолчанию (в случае с абзацем - выравнивание по левому краю).

Кроме задания классов элементов, можно ссылаться на конкретный элемент, заданный уникальным идентификатором - ID. Это делается при помощи определения стиля, явно не привязанного ни к одному из элементов:

#mystyle1 {color: green} ... <p id="mystyle1"> этот текст должен быть зеленым! </p>

Стиль, определенный как mystyle1 будет применен к одноименному элементу, вне зависимости от того, чем этот элемент является. Важно только знать, что идентификатор (ID) элемента должен быть уникальным, т.е. на странице не должно быть более одного элемента с ID равным, например, mystyle1.

Следует учитывать, что классы и идентификаторы могут быть общими (как в примере с ID), так и привязанными к типу элемента (как в примере с классами для P). Например, если задать класс, определенный для P, иному элементу (например, H1), то такая запись не сработает. Поэтому, если вам надо создать класс, который может использоваться с любыми элементами, то используйте следующий синтаксис:

.Center {text-align: center;}

Более подробно правила определения классов и идентификаторов CSS рассмотрены в соответствующей части книги. Напоследок можно отметить, что в HTML 4 и XHTML атрибуты STYLE, CLASS и ID предусмотрены практически для всех элементов, кроме тех, что предназначены для части HEAD и некоторых других - таких как SCRIPT и PARAM.

Что такое динамические страницы

Динамический HTML (DHTML) - это вольное название прикладного программного интерфейса (API) для управления элементами документа, известного, как DOM, применительно к HTML. С его помощью вы можете изменять свойства практически любых элементов страницы. На практике это означает, что вы сможете создавать интерактивные страницы, взаимодействующие с пользователем.

Для управления элементами при помощи DHTML можно применять различные языки программирования, наиболее распространенным и универсальным из которых является JavaScript. Используя небольшие встроенные в документ программы, или, как их часто называют, сценарии (Scripts), вы сможете обрабатывать действия пользователя и иные события документа. Каждое событие может запускать определенный сценарий, который, в свою очередь, может изменять внешний вид документа без перезагрузки.

ПРИМЕЧАНИЕ
Дальнейшее развитие DHTML получило название AJAX и даже привело к появлению такого термина, как Web 2.0.

На текущий момент все браузеры поддерживают изменения внешнего вида документа "на лету", т.е. без перезагрузки.

Поскольку сценарии JavaScript, подобно шаблонам CSS, является инородными для самого языка HTML конструкциями, для их внедрения в HTML-документы используется специальный элемент - SCRIPT. В отличие от STYLE его можно помещать не только в заголовок (часть HEAD), но и в тело (BODY) документа, хотя, как правило, останавливаются на первом варианте (листинг 1.10).

Листинг 1.10. Использование сценария

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Главная страница </title> <script type="text/javascript"> alert("Всем привет!"); </script> </head> <body> Самоприветствующийся документ </body> </html>

В данном случае в HTML-элемент SCRIPT вложена программа на языке JavaScript, выполнение которой приводит к появлению окошка с надписью "Всем привет!". Поскольку выполнение сценария начинается с того момента, как он прогрузится в общем потоке документа, то приветствие появится сразу после того, как вы откроете этот файл (Part_1\Dynamic\autohi.html).

В том случае, если требуется, чтобы сценарий выполнился не сразу, а в ответ на какое-либо действие пользователя, используют специальные атрибуты HTML. Например, в атрибуте ONCLICK можно определить функцию, которая будет реагировать на щелчок мышкой по ссылке:

<a href="#" onclick="alert('Всем привет!');">Вот мое приветствие</a>

Таким образом, мы видим что, подобно CSS и атрибуту STYLE, конструкции на языке JavaScript также можно внедрять непосредственно в теги при помощи специальных атрибутов. В частности, атрибут ONCLICK, подобно STYLE, определен практически для всех элементов. Кроме того, если речь идет об элементе A, то функцию JavaScript можно вызвать непосредственно из адреса ссылки. Для этого используется ссылка, начинающаяся на javascript:

<a href="javascript:alert('Всем привет!');">Вот мое приветствие</a>

Так же, как и файлы таблиц стилей, сценарии могут быть вынесены в отдельные файлы. Делается это при помощи того же элемента SCRIPT:

<script src="myscript1.js" type="text/javascript"></script>

Разумеется, область применения сценариев гораздо шире, нежели показ сообщений: с их помощью можно "на лету" создавать страницы, управлять свойствами CSS, изменяя оформление документа и т.д. Обо всем этом будет рассказано в четвертой части этой книги.

2011-05-02 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2013 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru