Предыдущая страница реферата | 29  30  31  32  33  34  35  36  37  38  39 | Следующая страница реферата

Вновь документ HTML.

С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь - конструкция: document.write("А это JavaScript!")

Это действительно код JavaScript. Чтобы видеть, как этот скрипт работает, запишите данный пример как обычный файл HTML и загрузите его в браузер, имеющий поддержку языка JavaScript.
А это результат выполнения этого файла (если Вы используете браузер, имеющий поддержку JavaScript, то у Вас будет 3 строки):
Это обычный HTML документ.
А это JavaScript!
Вновь документ HTML.
События
События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver.
Существует несколько различных типов событий.

Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка
- Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет простой пример программы обработки события onClick:

CSS
Немного о CSS
Так что это такое - СSS? Cascading Style Sheets (Таблицы Каскадных Стилей)
- это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов. Приведу пример:
Вам нужно создать жирный красный подчеркнутый текст.
ПРИМЕР HTML:
Какой-то текст
А если подобный стиль нужно использовать несколько раз? Хорошо если раз 5, а если 10-20? Вот тут нам и поможет СSS. Существует три вида таблиц стилей:
Внутренние таблицы стилей, Глобальные таблицы стилей и Связанные таблицы стилей. Внутренние таблицы стилей (Inline Style Sheets) при помощи специального атрибута помещаются прямо в HTML теги. Глобальные (Global
Style Sheets) определяют стиль элементов во всем документе. Связанные
(Linked Style Sheets) могут быть использованы для нескольких документов сразу и хранятся во внешнем файле. Подробнее обо всем этом написано ниже.

Структура и правила
Селекторы (Selectors):
Синтаксис:

селектор {свойства}
Любой элемент HTML - это возможный CSS селектор. Свойства селектора определяют стиль элемента, для которого он определен.
ПРИМЕР:
H1 {color:red; size:20pt;}
Все элементы H1 в документе будут красного цвета, размером в 20 точек (pt, point).
Классовые селекторы (Class Selectors):
Синтаксис:

селектор.класс {cвойства}
CLASS - атрибут элемента в HTML, определяющий его класс. В CSS можно описать собственные стили для различных классов одних и тех же элементов.
ПРИМЕР:
H1.blue {color:blue; size:20pt;}
Все элементы H1 с атрибутом CLASS="blue" станут синими.
Классы могут так же быть описаны без явного привязывания их к определенным элементам.
Синтаксис:

.класс {свойства}
ПРИМЕР:
.green {color:green;}
В данном случае все элементы с атрибутом CLASS="green" станут зелеными.
ID селекторы (ID Selectors):
Cинтаксис:

#id {свойства}
ID - индивидуально именованный стиль. C его помощью можно создавать стилистические исключения cреди элементов одного класса.
Идентификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств. Скажем, Вы создали класс blue - синий курсив. Но Вам понадобился жирный подчеркнутый текст синим курсивом. Конечно, можно создать новый класс, но зачем? Проще описать ID.
Например "boldunderline". И все элементы класса blue с значением ID
"boldunderline" станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств класса blue и идентификатора boldunderline.
ПРИМЕР:

Пример CSS

.blue {color:blue; font-style:italic}
#boldunderline {text-decoration:underline; font-weight:bold}

Здравствуйте, это моя домашняя страница.
Пока еще в стадии разработки ...
... Но скоро откроется

Как видно из примера, атрибут ID может быть использован без указания класса
(последний параграф примера. Тогда параграф будет обладать только свойствами ID "boldunderline" (в примере - жирный, подчеркнутый текст).
Контекстуальные селекторы (Contextual Selectors):
Контекстные селекторы - это сочетания нескольких обыкновенных селекторов.
Стиль задается только элементам в заданной последовательности в зависимости от каскадного порядка.
ПРИМЕР:
P EM {color:silver;}
В данном примере все элементы EM внутри элементов P будут иметь заданный стиль.
Придание нескольким элементам одинаковых свойств:
Скажем Вам нужно придать нескольким элементам Вашей веб страницы одинаковых свойств. В этом случае при определении селекторы перечисляются через запятую перед блоком свойств.
ПРИМЕР: h1,h2,h3,p,strong {color:green; font-style:italic;}
Все элементы h1, h2, h3, p и strong будут зелеными.
Псевдоклассы и псевдоэлементы :
Синтаксис:

селектор:псевдокласс { свойства }

селектор.класс:псевдокласс { свойства }

селектор:псевдоэлемент { свойства }

селектор.класс:псевдоэлемент { свойства }
Псевдоклассы и псевдоэлементы - это особые классы и элементы, присущие CSS и автоматически определяемые поддерживеющими CSS браузерами. Псевдоклассы различают разные типы одного элемента, создавая при определении собственные стили для каждого из них. Псевдоэлементы являются частями других элементов, задавая этим частям отличный от элемента в целом стиль.
Список псевдоклассов и псевдоэлементов :
Anchor Pseudo Classes - эти псевдоклассы элемента , обозначающего ссылку. Псевдоклассы этого элемента: (ссылка), active
(активная ссылка), visited (посещенный ранее URL), hover (псевдокласс, возникающий при поднесении курсора к ссылке, не работает в Нетскейпе).
First Line Pseudo-element - first-line. Этот псевдоэлемент может быть использован с block-level элементами (p, h1 и т.д.). Он изменяет стиль первой строки этих элементов.
First Letter Pseudo-element - first-letter. Похож на first-line, но влияет не на всю строку, а только на первый символ.
ПРИМЕР : a:link,a:visited {color:blue} a:active {color:red} a:hover {text-decoration:none}
В данном примере все элементы Anchor (ссылки) будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание.

Примечание : описания нескольких свойств для одного селектора, контекстуального селектора, класса, индивидуально именованного стиля или группы объединенных селекторов отделяются друг от друга точкой с запятой
";".
Внутренние Таблицы Стилей
Как уже говорилось, использование Внутренних стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помощи атрибута STYLE в HTML теге.
ПРИМЕР HTML:
Вперед в будущее
ПРИМЕР INLINE STYLE SHEET:

Вперед в будущее
Как можно заметить, код Inline Style Sheet получился больше чем HTML.
Поэтому ISS следует использовать только если необходимо задать определенному элементу свой индивидуальный стиль, существующий в классификации CSS и нереализованный в HTML. Или же при необходимости абсолютно позиционировть данный элемент.
Глобальные Таблицы Стилей
Глобальные стили задают вид элементов всего документа. Для этого используется тег . Он размещается в заголовке документа.
ПРИМЕР:

Пример Глобальных Таблиц Стилей

h1{color:red; font-style:italic; font-size:32px}
.blue{color:blue}
#bold{font-weight:bold}

Этот заголовок написан крупным красным курсивом
Вот это слово - синие, a это - жирное.

В данном примере все элементы H1 будут написаны крупным красным курсивом, все элементы с указанным классом BLUE будут синими , а все элементы с идентификатором ID="Bold" станут жирными. Для простоты вместо можно использовать просто тег , что менее грамотно.

Связанные Таблицы Стилей
Связанные таблицы стилей используются для придания нескольким документам одного стиля и xранятся в отдельном файле. Это очень привлекательно, когда нужно выдержать сайт в одном стиле, не утруждая себя составлением таблиц для каждого документа.
ПРИМЕР:
Файл styles.css

body {background:black; font-size:9pt; color:red; font-family:Arial Black}
.base{color:blue; font-style:italic} h1 {color:white}
#bold {font-weight:bold}

В самих же HTML документах делается ссылка на этот файл при помощи тега
. Выглядит это так:
ПРИМЕР:
Файл Index.html

Просто еще один пример

Содержание Документа

SSI
SSI расшифровывается как Server Side Include. SSI - это набор команд, позволяющий включить в страницу информацию, недоступную средствами HTML, такую как вывод программ, значения переменных окружения и статистику по файлам (размер, дата создания и др.). Все это и более позволяют делать CGI- скрипты, но зачем писать целый скрипт для получения размера файла, если можно воспользоваться SSI?
SSI работает очень просто: при получении запроса на документ, содержащий
SSI-директивы, http-сервер обрабатывает документ, выполняет все SSI- директивы, а получившийся в результате документ возвращает клиенту. Http- сервер не проверяет автоматически все документы на наличие SSI-директив, а только те, которые относятся к типу, указанному в настройках сервера.
Для указания http-серверу, какие документы считать содержащими SSI- директивы, в srm.conf, находящемся в /etc/httpd/conf надо раскомментировать следующие строки:
AddType text/html .shtml
AddHandler server-parsed .shtml
После этого все документы с расширением .shtml будут проверяться на SSI- директивы. Но удобнее будет определить чтобы все .html-файлы могли содержать SSI. Это делается добавление в srm.conf следующих строчек:
AddType text/html .html # не обязательно, т.к. он и так описан.
AddHandler server-parsed .html
Теперь надо разрешить выполнение SSI в каталоге, в котором лежат твои файла. Найди в access.conf описание каталога, в котором лежат твои html'ы и добавь в его Options директиву Includes:
#было так
Options Indexes
#стало так
Options Indexes Includes
Если твой каталог не прописан, его надо прописать. Почитай доку по Apache, чтоб узнать как это делается. А если у тебя нет возможности изменять srm.conf или access.conf, т.е. ты не root, тогда за пивом, а потом к админу.
SSI-директивы включаются в html-код в виде комментариев, но определенного формата:

Использовать можно следующие SSI-директивы: echo var

Используется для вывода значения переменной окружения.

Твой IP -

Твой браузер -

Мой сервер -

Ты пришел со страницы -

А вот вывод:

Твой IP - 193.125.78.114

Твой браузер - Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)

Мой сервер - www.citforum.ru

Ты пришел со страницы - (none) include file include virtual

Включает в html-файл в месте, где идет вызов SSI, содержимое указанного файла. Отличие include file от include virtual в том, что в первом случает используется файл, находящийся в том же каталоге, что и html- файл, во втором случает указывается путь к файлу относительно текущего каталога. Если с помощью include file или include virtual включается cgi- скрипт, то в содержимое страницы попадет вывод cgi-скрипта, а не его содержание. fsize file

Вставляет размер указанного файла.

Размер файла этой страницы:

Вывод:

Размер файла этой страницы: 12k flastmod file

Вставляет время последней модификации указанного файла.

Время последней модификации файла этой страницы:

Вывод:

Время последней модификации файла этой страницы: Wednesday, 21-Jun-2000

Рекомендуем скачать другие рефераты по теме: бесплатные тесты бесплатно, рефераты по медицине.



Предыдущая страница реферата | 29  30  31  32  33  34  35  36  37  38  39 | Следующая страница реферата

Поделитесь этой записью или добавьте в закладки