1 / 65

ДИНАМИЧЕСКИЙ HTML

ДИНАМИЧЕСКИЙ HTML. Динамический HTML ( dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым

gregory-rosales
Download Presentation

ДИНАМИЧЕСКИЙ HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ДИНАМИЧЕСКИЙ HTML Динамический HTML (dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым Реализация DHTML основывается на: непосредственно HTML, каскадных таблицах стилей (cascadestylesheets – CSS) и языке сценариев (JavaScript или VBScript)

  2. Каскадные таблицы стилей (CascadeStyleSheets – CSS) Каскадные таблицы стилей предоставляют удобный способ добавления к web-страницам сложных атрибутов форматирования С их помощью можно определить гарнитуры и размеры шрифтов, способ выравнивания и другие характеристики, до мельчайших деталей определить параметры текста, цветов, графики, линий, цитат и т.д. Можно создать таблицу стилей и использовать её для всех документов, расположенных на сервере, что придаст стройность и строгость всему web-сайту Таблица стилей – это набор правил, который управляет форматированием тэгов HTML в web-документе

  3. Правило каскадных таблиц стилей Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения селектор {определение} Селектор – любой тэг HTML Определение также состоит из двух частей: свойства и его значения, разделенных знаком двоеточия (:) В одном правиле можно задать несколько определений, разделённых символом точка с запятой (;) селектор {свойство1: значение1; свойство2: значение2; …}

  4. Синтаксис правил каскадных таблиц стилей не чувствителен к регистру (селекторы, свойства и их значения можно задавать как строчными, так и прописными буквами, или в смешанном порядке) Любая грамматическая ошибка приводит к тому, что правило пропускается анализатором браузера, и никакого предупреждающего сообщения не появляется

  5. Встраивание таблиц стилей в документ • Связывание Таблица стилей храниться в отдельном файле Присоединяется с помощью тэга <LINK> в разделе HEAD <LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css">

  6. Внедрение Таблица стилей задаётся в стилевом блоке в разделе HEAD Используется тэг <STYLE> <STYLE TYPE="text/css"> селектор {свойство: значение} … </STYLE>

  7. Импортирование В тэге <STYLE> можно импортировать внешнюю таблицу стилей STYLE TYPE="text/css"> @import: URL (адрес css); </STYLE> • Встраивание в тэги документа Каждый тэг HTML имеет параметр STYLE, в котором можно задать значения его свойств в соответствии с синтаксисом каскадных таблиц стилей <Н1 STYLE= "color: red"> 3аголовок отображается красным цветом </Н1>

  8. Группирование Для уменьшения размеров таблиц стилей можно группировать разные элементы страницы HTML в виде списка через запятую, если для них задаётся одно правило H1 {font-family: Arial} H2 {font-family: Arial} H3 {font-family: Arial} Можно задать в виде H1, H2, Н3 {font-family: Arial}

  9. Можно группировать свойства элемента H1 {font-weight: bold} H1 {font-size: 14pt} H1 {font-family: Arial} • Можно задать в виде H1 {font-weight: bold; font-size: 14pt; font-family: Arial} • Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном H1 {font: bold 14pt Arial}

  10. Селекторы Правила каскадных таблиц стилей влияют на отображение всех элементов заданного типа в документе <STYLE TYPE="text/css"> H1 {color: red} </STYLE> Для одного тэга можно создавать различные классы <STYLE TYPE="text/css"> H1.red {color: red} H1.blueBgrd {color: red; background-color: blue} </STYLE>

  11. Использование классов • В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS <Н1 CLASS="red"> Красный шрифт </Н1> <Н1 CLASS="blueBgrd"> Красный шрифт на синем фоне </Н1>

  12. Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента <STYLE TYPE="text/css"> .red {color: red} .blueBgrd {color: red; background-color: blue} </STYLE> <Н1 CLASS="red"> Красный шрифт </Н1> <P CLASS="blueBgrd"> Красный шрифт на синем фоне </P>

  13. В качестве селектора можно использовать уникальное идентификационное имя элемента, предваряя его символом # <STYLE TYPE="text/css"> #par24 {letter-spacing: 1 em} H1#form3 {color: red; background-color: blue} </STYLE> <Н1 ID=form3>Красный шрифт на синем фоне</Н1> <P ID=par24> Разреженные слова в абзаце </Р>

  14. Свойства форматирования элементов • В каскадных таблицах стилей все доступные свойства форматирования элементов в документе HTML разбиты на 8 категорий • Шрифт • Цвет и фон • Текст • Блок • Визуальное форматирование • Печать • Фильтры и переходы • Псевдоклассы и другие свойства

  15. Единицы измерения, используемые для задания значений свойств

  16. Шрифты Шрифты различаются по • внешнему виду (начертанию) • размеру • стилю (прямой, курсив или наклонный) • "жирности" отображения (нормальный, полужирный)

  17. Определение шрифта • Свойство font-family задаёт приоритетный список шрифтов body {font-family: Impact, "Times New Roman", serif} • типовые семейства шрифтов • serif (например, Times) • sans-serif (например, Helvetica) • cursive (например, Zapf-Chancery) • fantasy (например, Western) • monospace (например, Courier)

  18. Стиль шрифта • Свойство font-styleопределяет стиль шрифта • normal • italic • oblique • font-variant - шрифт капитель (small-caps) H1 {font-style: normal} H2 {font-style: italic} H3 {font-style: oblique} Н4 {font-variant: small-caps}

  19. Жирность шрифта • Свойство font-weight выбирает из заданного семейства шрифт определённой жирности • Числовые значения (9 категорий): 100 (самый бледный), 200, 300 .. 900 (самый жирный) • Ключевые слова: normal, bold H1 {font-weight : normal} H2 {font-weight : bold} H3 {font-weight : 500}

  20. Размер шрифта Свойство font-size определяет размер шрифта line-height - высота строки

  21. Для сочетания всех возможных стилей для шрифта используется свойство font Все значения свойств задаются через пробелы в порядке font-style, font-variant, font-weight, font-size, line-height и font-family Первые три свойства могут не задаваться, что соответствует установке их значений в normal Размер шрифта и высота строки (свойство line-height) задаются через косую черту Элементы списка семейств шрифтов свойства font-family задаются через запятую Р {font: oblique 12pt/14pt "Times Cyr", serif}

  22. <HTML> <HEAD> <TITLE>шрифты</TITLE> <STYLE TYPE="text/css"> body {font: oblique 24pt/36pt "CourierNew", monospace} </STYLE> </HEAD> <BODY> Текст 1 <P STYLE = "font-size: 14pt"> Текст 2 <P STYLE = "line-height: 24pt"> Текст 3 <P STYLE = "font-style: normal"> Текст 4 <P> Текст 5 </BODY> </HTML>

  23. Цвет и фон

  24. Цвет элемента color- цвет текста элемента <HTML> <HEAD> <TITLE>шрифты</TITLE> <STYLE TYPE="text/css"> body {font-size:24pt; color: red} p {color: blue} </STYLE> </HEAD> <BODY> Текст 1 <P> Текст 2 </P> Текст 3 </BODY> </HTML>

  25. Фон • background-color – цвет фона (начальное значениеtransparent - прозрачный) • background-image – фоновое изображение • background-repeat - повторяемость фонового изображения • repeat • repeat-x • repeat-y • no-repeat • background-attachment – прокрутка фона • fixed • scroll

  26. background-position – начальное положение фонового изображения • ключевыезначения: left, right, center, top и bottom • проценты • абсолютные единицы длины • Свойство background позволяет одновременно устанавливать значения всех свойств фонового изображения • body {background: URL(pic1.jpg) no-repeat fixed 10mm 10mm}

  27. Форматирование текста • Позволяет определить • расстояние между словами • расстояние между буквами в словах • отступы и высота строк в абзацах

  28. word-spacingвлияет на расстояние между словами • letter-spacing влияет на расстояние между символами • line-height – расстояние между базовыми линиями двух соседних строк • text-transform – преобразование текста • capitalize – все слова отображаются с прописной буквы • uppercase – все буквы прописные • lowercase – все буквы строчные

  29. text-decoration - задаёт подчеркивание, надчеркивание или перечеркивание текста • underline – подчеркивание • overline – надчеркивание • line-through – перечеркивание • text-align – выравнивание текста • left • right • center • justify • text-indent – отступ первой строки

  30. vertical-align – положение элемента по вертикали относительно элемента-родителя • baseline – выравнивание базовой линии элемента по базовой линии родителя • middle – выравнивание средней точки элемента на уровне базовой линии родителя плюс половина ширины блока содержимого родителя • sub – элемент отображается в виде нижнего индекса • sup – элемент отображается в виде верхнего индекса • text-top – выравнивание верха элемента с верхом шрифта элемента-родителя • text-bottom – выравнивание низа элемента с низом шрифта элемента-родителя • top – выравнивание верха элемента с верхом самого высокого элемента строки • bottom – выравнивание низа элемента с низом самого низкого элемента строки

  31. Пример <HTML> <HEAD> <TITLE>шрифты</TITLE> </HEAD> <BODY> <P>текст1 <P STYLE="letter-spacing: 0.5em"> текст2 <P STYLE="letter-spacing: 1em; text-transform: capitalize"> текст3 <P STYLE="text-transform: lowercase"> тЕкСт4 <P STYLE="text-decoration: underline; color: red">текст5 <P STYLE="text-decoration: overline">текст6 <P STYLE="text-decoration: line-through; color: blue">текст7 <P STYLE="text-align: right; color:green">текст8 <P STYLE="text-indent: 20">текст9 </BODY> </HTML>

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

  33. Относительныйспособ определяет смещение элемента относительно его естественного положения в потоке отображения элементов Абсолютныйспособ удаляет элемент из естественного потока позиционирования и позволяет разместить его на странице абсолютно произвольным образом Статическийспособ предполагает естественный поток отображения элементов страницы в окне браузера в соответствии с иерархией объектов документа

  34. Значения свойства position absolute – что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента fixed – близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы relative – положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения static – элементы отображаются как обычно inherit – наследует значение родителя

  35. Свойство bottom (top) • Устанавливает положение нижнего края содержимого элемента • Отсчёт координат зависит от свойства position: • при относительном позиционировании элемента, отсчёт ведется от нижнего края исходного положения элемента • при абсолютном — относительно нижнего края окна браузера

  36. Значение bottom при абсолютном позиционирование элемента Значение bottom относительно родителя

  37. Свойство left (right) • Для позиционированного элемента определяет расстояние от левого края родительского элемента • Отсчет координат зависит от значения свойства position: • если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края • в случае значения relative, left отсчитывается от левого края исходного положения элемента • если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от левого края родителя

  38. Значение свойства left относительно окна браузера Значение свойства left относительно исходного положения

  39. Значение свойства left относительно родителя

  40. Синтаксис left: значение | проценты | auto | inherit вкачестве значений принимаются любые единицы длины auto – не изменяет положение элемента inherit – наследует значение родителя

More Related