Отправляет email-рассылки с помощью сервиса Sendsay

CSS и DHTML для сайтостроительства

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Создание сайта и его продвижение" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

  Апрель 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Наталия

Статистика

779 подписчиков
-1 за неделю
←   Все выпуски   →

CSS и DHTML для сайтостроительства. Выпуск 1


Выпуск 1

Введение

Динамический HTML

Динамический HTML (Dynamic HTML, DHTML) - это единый "флакон" в котором содержатся средства для построения интерактивных и легковесных сайтов: гипертекстовый язык разметки (HyperText Markup Language, HTML), каскадные таблицы стилей (Cascading Style Sheets, CSS) и JavaScript. НЕ техническое определение DHTML может звучать так:
"Построение веб-интерфесов, используя лишь встроенные возможности браузеров".

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

Ограничения, конечно же, есть: DHTML допустим только для браузеров Netscape Communicator 4.0 и выше, и Microsoft Internet Explorer 4.0 и выше. Все примеры, которые я буду приводить в данной рассылке, прекрасно функционируют в этих браузерах. Если вы, дорогие читатели, подскажете мне, как эти примеры можно перенести на другие браузеры или просто пришлёте мне строчку, что уже функционируют, я буду вам очень благодарна, а рассылка приобретёт больше граней применимости.

Хотя составляющие DHTML технологии (HTML, CSS, JavaScript) стадартизированы, Netscape и Microsoft имплементировали их драмматически разными способами. Поэтому DHTML, который функционирует правильно в обоих браузерах (то есть кросс-браузерный DHTML), - очень сложный вопрос.

Сравните сами:
Microsoft DHTML
Netscape DHTML

Каскадные таблицы стилей

Каскадные таблицы стилей (Cascading Style Sheets, CSS) - это добавка к HTML, которая позволяет веб-разработчикам структурировать страницы фантазийным образом. Это достигается отделением содержимого страницы (текст) от его предсталения (цвет, размер, стиль, местоположение и т.д.).

Документация по CSS на английском языке:
CSS W3C
Builder.com's CSS Guide
Tutorial on CSS

и на русском:
Wikipedia о CSS
Самоучитель по CSS

JavaScript

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

JavaScript впервые начал использоваться браузером Netscape 2.0 для скриптования содержимого веб-страниц и для придания дополнительной функциональности HTML формам, фреймам и окнам. Netscape 3.0 добавил новых свойств: управление картинками и аудио/видео. Microsoft Iternet Explorer 3.0 (выпуск которого состоялся сразу после выхода Netscape 3.0) тоже предоставил свою слегка отличающуюся версию JavaScript, которую назвал JScipt.

Новые возможности JavaScript'а были добавлены и в Netscape 4.0, и в Miscrosoft IE 4.0, которые расшили разработчикам пространство управления DHTML'ем (HTML елементы, использующие CSS). Однако эти новые возможности не были стандартизированы на момент выпуска двух браузеров. В результате мы имеем сейчас две несовместимые версии JavaScript'а.

Документация по JavaScript на английском языке:
JavaScript Reference
Netscape JavaScript Guide
Microsoft JScript

и на русском:
Wikipedia o JavaScript (с ссылками на руковолства по JavaScript)

The Dynamic Duo

The Dynamic Duo - это учебное пособие созданнае Дэном Штейнманом (Dan Steinman) и служащее одним из источников данной рассылки. Отличительная особенность этого пособия - ориентированность на кросс-браузерность (то есть применимость и для Netscape и для IE). Кроме того, пособие может быть стартовой точкой для новичков в JavaScript и CSS, поскольку, хоть и рассамтривает с самого начала достаточно продвинутые темы, делает это медленно и внимательно по отношению к базовым понятиям, необходимых для понимания функционирования DHTML. Концепции программирования представлены не сильно "заумно". Однако это же является и ограничением, поскольку превращает это пособие только в схему изучения. Поэтому я очень надеюсь на Вашу помощь, дорогие подписчики, в том смысле, что я жду от вас предложений и заявок на интересующие вас темы в веб-строительстве вообще и в клинтской интерактивности сайтов в частности.

Позиционирование CSS

CSS являются базисом для DHTML как в браузере от Netscape, так и в IE от Microsoft. CSS позволяет создавать набор "стилей", которые определяют расположение и параметры элементов на вашей странице. Позиционирование каскадных таблиц стилей (CSS Positioning, CSS-P) это расширение CSS, которое даёт разработчику доступ к расположению чего бы то ни было на экране с точностью до пикселя. Я не буду пересказывать документацию CSS и CSS-P. Я вам даю линк: W3C CSS Positioning.

Итак, приступим к DHTML!

DIV таги

CSS-P активно использует DIV (division-разделение), пустой не форматирующий таг. Если вы поместите фрагмент HTML документа или просто текст между <DIV> и </DIV>, то вы получите "DIV блок", "DIV елемент", "CSS-слой" или просто "слой". Таким образом, использование DIV тага ничем не отличается от большинства других HTML тагов:

<DIV>
Это DIV таг
</DIV>

Эффект от использования DIV тага такой же, как и в случае применения <P> и </P>. Но использование DIV вместе с CSS определяет, как содержимое между <DIV> и </DIV> будет размещёно на странице, какого будет цвета, размера и т.д. Для этого нужно присвоить DIV тагу аттрибут ID с "персональным" именем DIV'а:

<DIV ID="truck">
Это DIV таг c ID truck
</DIV>

Значение аттрибута ID может состоять из букв (a-z, A-Z), цифр (0-9) и символа подчёркивания (_) , но начинаться с буквы.

Подключение CSS

Подключение CSS в HTML может происходить двумя способами. Первый способ - объявление стиля тага непосредственно в самом таге:

<DIV ID="truck" style="здесь идёт определение стиля (см. ниже)">
Это стилизованый DIV таг
</DIV>

Второй способ - это использование внешнего тага STYLE:

<STYLE TYPE="text/css">
<!--
#truck {здесь идёт определение стиля (см. ниже)}
 -->
</STYLE>


<DIV ID="truck">
Это стилизованный DIV таг
</DIV>

Заметьте, как ID может использоваться для применения стилей

Кросс-браузерные свойcтва СSS

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

Название свойстваЗначение свойства
positionОпределяет как DIV так позиционируется: relative-относительно других HTML элементов, absolute - согласно определённо заданным координатам.
left (right) Расстояние в пикселах от левого (правого) края окна браузера (абсолютное позиционирование) или относительного HTML элемента (относительное позиционирование)
top (bottom) Расстояние в пикселах от верхнего (нижнего) края окна браузера (абсолютное позиционирование) или относительного HTML элемента (относительное позиционирование)
widthШирина DIV тага. Любой HTML элемент или текст, вставленный в этот DIV, должен автоматически настраиваться по длине согласно этому значению.

Важно!
Если вы используете слои для создания анимации, обязательно установите ширину явно. Потому что в IE ширина автоматически равна 100%. Тогда во время движения анимации внизу окна возникает элемент прокрутки, который снижает скорость анимации.
heightВысота DIV тага. Это свойство используется очень редко, в основном для ограничивания размеров слоя.
clipОпределяет прямоугольник, ограничивающий уровень. Прямоугольник определяется через 4 координаты: clip:rect(top,right,bottom,left);
visibilityОпределяет видимость DIV тага: visible - видимый, hidden - невидимый, inherited - наследует видимость элемента, внутри которого расположен (значение по умолчанию)
z-indexПорядок наложения слоёв друг на друга
background-colorФоновый цвет DIV тага. В Netscape это свойство применимо только к тексту, но если вы хотите рисовать прямоугольники, вы должны также прописать layer-background-color с тем же значением
layer-background-colorФоновый цвет DIV тага в Netscape
background-imageФоновая картинка DIV тага для IE
layer-background-imageФоновая картинка DIV тага для Netscape
colorЦвет текста внутри DIV тага

Синтакс CSS отличается от синтаксиса HTML: свойство, двоеточие, значение свойства, точка с запятой. Не нужно устанавливать значения для всех свойств. Кроме того, единица меры по умолчанию - пихел (точка на экране), так что необязательно ставить "px" после left, top, width, хотя и рекомендуется. Наконец, пробелы между объявлениями свойст игнорируются: вы можете разместить их в одной строке, или в разных строках, и даже с табуляцией между ними.

Если вставить эти строки
position:relative; clip:rect(0px 200px 100px 0px);
left:50px; top:10px; width:200px; height:100px; color:yellow;
background-color:#FF0000; layer-background-color:#FF0000;
вместо "здесь идёт определение стиля (см. ниже)" в примерах приведенных выше, то получится вот такой красный прямоугольник с надписью:

Это стилизованный DIV таг
Абсолютное позиционирование

Фраза "Абсолютное позиционирование" была создана вот таким стилем:

position:absolute; left:500px; top:2900px; width:80px; color:teal;

Дорогие читатели! Если у вас возникают вопросы по тексту рассылки, я буду рада на них ответить. Мой почтовый адрес идёт последней строкой в данном выпуске (at означает @). Присылайте мне также интересующие вас темы, которые я могла бы освятить в рассылке. делитесь опытом или просто комментируйте.

Всего доброго,
Наталия Македа
natalia.macheda at gmail.com
В избранное