04

www.cz-milka.
net
INTERNETOVÉ TECHNOLOGIE – CLIENT SIDE P4

2008-10-21
DYNAMICKÉ HTML:
Statický a dynamický web:
Co je dynamické HTML:
Dynamické HTML (DHTML) nejedná se pouze o jedinou technologii.
DHTML zahrnuje řadu různýchzných technologií
techn ůsobí
a popisuje jak tyto technologie spolupůsobí
DHTML umožňuje uje používat konvenční
konven ní HTML, skripty, Objektový Model DokumentDokumentů, absolutní řízení
polohy, dynamické styly, multimediální filtry a řadu
adu dalších technologií, které umožňují
umož dynamicky měnit
vzhled textu a grafiky na obrazovce.
Dynamické HTML:
DHTML = integrace JavaScript, CSS a DOM:

JavaScript – skriptovací
kriptovací jazyk na straně
stran klienta vyvinutý firmou Netscape. Přidává
idává interaktivitu a podmíněné
podmín
chování do web stránek.
CSS – Cascadinging Style Sheets, představují
př doplněk k HTML, který umožňuje uje řídit prezentaci dokumentu,
včetně barvy, typu písma, zarovnávání textu i obrázk
obrázků, ..,
DOM – Document object model / Interní (uvnitř(uvnit prohlížeče)e) hierarchická organizace prvk
prvků v dokumentu.
DOM umožňuje manipulaci prvkůů v dokumentu pomocí script scriptů a listů stylů
DHTML:
-1-
www.cz-milka.net
Tři logické vrstvy web site:
Objektový Model Dokumentu:

Definovat hierarchickou strukturu pro všechny části webového dokumentu
Umožnit modifikaci
kaci této struktury (přidání
(p či odebírání)
Zajistit monitorování a manipulaci s obsahem stánky
Poskytnout informace o tom, jak položky na stránce komunikují s uživatelem a spolu navzájem.
Standardy DOM se využívají v serverových programech Javy a C++, které
které analyzují dokumenty XML
DOM:
Objektový model dokumentu je aplikační
aplika ní programové rozhraní (API) pro reprezentování nnějakého dokumentu.
DOM Level 1 – W3C, říjen 1998
DOM Level 2 – W3C, listopad 2000
DOM Level 3 – W3C, duben 2004
DOM level 0 – není standard – obvyklé prvky v prohlížečích
prohlíže před
ed standardizací w3c
The Document Object Model is a platform-
platform and language-neutral
neutral interface that will allow programs and scripts
to dynamically access and update the content, structure and style of documents. The document can be further
processed and the results of that processing can be incorporated back into the presented page.
Logical structure of documents:

Thehe nodes represent objects, which have functions and identity. As an object model, the DOM identifies:
• The interfaces
terfaces and objects used to represent
repr and manipulate a document
• The he semantics of these interfaces and objects - including
ng both behavior and attributes
• The he relationships and collaborations among
amo these interfaces and objects
Základní komponenty DOM:

Objekty – Objects
Vlastnosti – Properties
Události – Events
Metody – Methods
Kolekce – Collections
Objekty:
Objekty DOM mají příslušné
íslušné chování (funkcionalitu) a identitu. DOM identifikuje:
• Rozhraní a objekty použité k reprezentaci a manipulaci s dokumentem,
• Sémantiku těchto
chto rozhraní a objekt
objektů, včetně chování a atributů a
• Vztahy a spolupráci mezi těmito
ěmito rozhraními a objekty.
Každý prvek na stránce je reprezentován jako objekt
Příklady:
<img src= ….>
<body> … </body>
<span> … </span>
Objektový model představuje
tavuje hierarchickou reprezentaci těchto
t objektů
Odkaz na jiný objekt se v prohlížeči zajišťuje
zajiš pomocí ID atributu
Objekt můžeže obsahovat vlastnosti, události, metody a kolekce
-2-
www.cz-milka.net
Hierarchická struktura DOM:
Kořenový uzel – document node – představuje hlavní kontejner pro celý obsah
čkou HTML
Uzel pro element – element node – používá se pro každou položku popsanou značkou
Text mezi značkami < > – text node – vytváří textový uzel
Uzly pro atributy – attribute nodes
Pro poznámky – comment nodes
Uzel pro typ dokumentu – document-type
document node
Přehled nejdůležitějších objektů:

Každý HTML prvek na stránce je reprezentován jako objekt ve spojení s jinými objekty, které nemusí být
implicitně deklarovány v souboru HTML, jako je object window a document objekt. Nejčastěji
Nej využívané
objekty:
a button div document
event history img location
Navigator screen selection span
style table userProfile window
Vlastnosti:
V klasickém HTML lze modifikovat prvek nastavením atributů:
• HTML Dynamic Objectect Model
• Prvek objekt
• Atributy vlastnosti objektu
Příklad:
<img src="oldpic.gif" width="10" ID="MyImage">
Tři atributy jsou reprezentovány jako vlastnosti src, width, a id objektu IMG (IMG má cca 50 vlastností)
Čtení a zápis vlastností:

Vlastnost popisuje
isuje charakteristiku objektu.
IMG object has width and height properties, which define the image's dimensions, and the src property, which
specifies the graphics source file that the IMG object should display.
In Internet Explorer, all HTML attributes havehave equivalent properties in the Object Model: the width attribute
and the width property, …
Události:
Prohlížeč sleduje vše, co se dějeje na stránce. Nap
Například,
íklad, pokud uživatel klikne na obrázek, prohlížeč
prohlíže se dozví, že
bylo stisknuto tlačítko
ítko myši právě v okamžiku, když pointer myši byl umístěn ěn nad obrázkem. Akce nebo
„projev“ na stránce, jako je kliknutí myši,
myš se nazývá událost (an event).
Příklady:
• Onmouseover event Fired when the user positions the mouse pointer over an object
• Onmouseout event Fired when the user moves the mouse pointer outside the boundaries of an object
The onclick event is a special event that can be fired by either the mouse or the keyboard.
Zachytávání událostí:
Událost není užitečná,
ná, pokud k ní neexistuje skript, který ji obsluhuje. Such script is known as an event ha
handler
(obslužný krok události).
Příklad:
-3-
www.cz-milka.net
<HTML> <HEAD> <TITLE> > TE </TITLE></HEAD>

<BODY>
<FORM onload="alert(`BODY loaded.')">
<INPUT TYPE="button"
VALUE="Click Me"
onclick="alert(`You clicked the button.')"
onmouseover="alert(`You moused over the button.')">
</FORM>
</BODY>
</HTML>
Metody:
Metody popisují akce (operace),
erace), které je možno s objektem dělat.
d
For instance, the window object has a method named open,, which directs the window to open a new browser
window.
Volání metod:
You can use script to call one of an object's methods, causing an action to occur. A method
met name is always
followed by parentheses, as shown here:
window.open()
Different objects support different methods, ex.
Alert – causes
auses an Alert dialog box to appear, containing text and an OK button.
Collections:
Collections are, in general, the least
leas used part of the Dynamic Object Model. Collections are lists of items that
are associated with a particular object. Just as a museum has a collection of paintings or a library has a
collection of books, the Object Model also maintains collections.
Notace a názvy
V DHTML se pro přístup k objektům,
objektů metodám i vlastnostem používá tzv. tečková ková notace - jména objektů se
oddělují tečkami
kami a zapisují se postupn
postupně od nejvyššího objektu až po vlastnost nebo metodu.
Za metodu se ještě do závorek píší parametry; pok pokud
ud metoda žádné parametry nemá, píšeme prázdné závorky,
abychom ji odlišili od vlastnosti.
For example, the expression window.document.linkColor refers to the linkColor property of the document
object, which is a child object of the window object.
Names are case sensitive in the Object Model when using JavaScript. As a general rule, you should lowercase
the names of properties, methods, and collections if the names are single words (such as src or height) and use
mixed case if the names consist of multiple
multiple words (such as fileSize or fileModifiedDate).
DOM – závěr:
DOM představuje
edstavuje transparentní rozhraní, nezávislé na platform
platformě a jazyku.
Umožňuje jednotným způsobem
sobem práci s XML a HTML dokumentem
dokumentem.
DHTML – CSS:
Vývoj CSS:
V r. 1994 byl publikován první koncept nazvaný „Cascading HTML Style Sheets““ (základ kaskádových
kask stylů)
V r.1996 – Specifikace kaskádových stylů
styl 1 (level 1)
V r. 1998 bylo vydáno doporučení
čení Specifikace CSS 2 (level 2)
V současné době probíhá vývoj verze CSS 3
CSS:
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts,
fonts, colors, spacing) to Web
documents.
Help
elp to separate the presentation of the content from the content itself.
-4-
www.cz-milka.net
Základní principy CSS:

Vazba na HTML dokument:
• V dokumentu HTML
• V externím souboru (*.css)
Dědičnost – elementy, které jsou vnořeny
vno řejímat některé
v jiných elementech, mohou přejímat n vlastnosti od
nadřazených elementů
Třídy – umožňují vytvořeníení pojmenovaných vlastností či souhrnů vlastností, na které je pozd
později odkazováno
v elementu stránky
Kaskádování – třii zdroje stylových ppředpisů (autor, uživatel, klient). Stylové předpisy
ředpisy z těchto tří zdrojů se
mohou různě překrývat.
ekrývat. O tom, jak styly budou nakonec použity pro formátování dokumentu, rozhodují
pravidla kaskádování.
Styly – šablony stylů:

Umožňují snadnější a přehlednější ější ovládání celkového vzhledu web site
Kaskádovité
askádovité šablony (Sheets) stylů zajišťují
zajiš konzistenci a řád ve stylech prvků v celé kolekci dokumentů
dokument
Zajišťují nejen běžné žné formátování (které se dříve
d zajišťovalo pomocí značkyky <font>), ale i celou
c řadu dalších
efektů,, jako je nastavování mezer mezi znaky (ší
(šířka písma),
Řeší problémy přii použití rozdílných druhů
druh a verzí prohlížečů a medií
Možnosti specifikace stylů:

Výchozí styl prohlížeče
Externí soubory stylů *.css
Interní styl na úrovni dokumentu (definovaný v záhlaví)
Přímo vložený řádkový styl (největší
ětší úúčinnost)
Vazby stylů na HTML document:

Interní šablony stylů - šablony stylů na úrovni dokumentu se zapisují pomocí značky <style>.
Externí šablony stylů lze připojit
ipojit k HTML dokumentům
dokument jako:
• Propojené šablony stylů – prvek <link>
• Importované šablony stylů
Značka <style>:
Funkce – definuje šablonu stylůů na úrovni dokumentu
Atributy – dir,
ir, lang, media, title, type
Poznámky – značka se používá v záhlaví,
záhlaví koncová značka </style> se nevynechává.
nechává.
Interní styly na úrovni dokumentu:

Seznam stylů se zapisuje do značky čky <style> v záhlaví dokumentu
Atributy type a media
Hodnota atributu type se zapisuje pro CSS "text/CSS"
Atribut media umožňuje prohlížeči, či, aby určil
ur nevhodnější zobrazení pro uvažované
ažované medium. Hodnoty atributu
media jsou screen (implicitní), tty, tv, projection, braille, hanheld, print, aural a all.
Příklad:
<head>
<title>styly</title>
<style type="text/CSS">

</style>
</head>
-5-
www.cz-milka.net
Přímo vložené styly:

Aplikují
plikují se zapsáním atributu STYLE přímo
p do značky příslušného
íslušného elementu (ovlivň
(ovlivňují pouze obsah příslušné
značky)

<h1 style = ”color:blue”>”> Modrý nadpis první úrovně
úrovn </h1>

<h1 style = ”color:blue;font-style:italic”>
style:italic”> Modrý nadpis první úrovně
úrovn psaný kurzívou </h1>
Propojené šablony stylů:

Funkce – defineje vztah mezi aktuálním dokumentem
do a jiným dokumentem
Atributy – charset, class, dir, href, hreflang, id, lang, media, onclick, ondblclick, onkeydown, onkeypress,
onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,rel, rev, style, target, title,
type
Poznámky – značka se používá v záhlaví
Výhody propojených stylů:

Pro celý web site stačíí jediný soubor typu*css, což výrazn
výrazně zjednodušuje jeho správu a usnad
usnadňuje dosažení
jednotné grafické úpravy celého web site.
Po prvním načtení spolu s prvním dokumentem HTML (index.html)
(index.html) se šablona ukládá do paměti
pam cache na
straně klienta a načítání
ítání dalších dokument
dokumentů se tím podstatně urychluje.
Syntaxe definice CSS:

Selektor {vlastnost: hodnota}
• Selektor – značkaka HTML, ke které se pravidlo stylu vztahuje
• Vlastnost – definuje, co je u selektoru nastavováno
• Hodnota – definuje, na jakou hodnotu je nastavena vlastnost daného selektoru
Span {font-weight: bold}
Zápis selektoru – selektor { vlastnost1 : hodnota1 ; vlastnost2 : hodnota2 ; …}
• Selektorem je obvykle příslušný
íslušný element ((značka
ka HTML), na který chceme styly uplatnit.
• Každá vlastnost stylu má definované jméno (je ukončeno
ukon dvojtečkou)
kou) a hodnotu pro tuto vlastnost.
• Pokud vlastnost obsahuje více než 1 hodnotu, oddělují
odd se jednotlivé hodnoty čárkami.
• Pokud je v seznamu stylu uvedeno více vlastností než jedna, musí být odděleny
odd leny st
středníkem.
Možnosti zápisu v selektoru:
Styly pro existující značky:

Styly můžeme
žeme definovat pro existující zna
značky, které využíváme vícekrát v těle
le dokumentu, nap
např. h1
h1 { font-size: 200%; }
Nebo můžeme nastavit přesný esný význam pro určitou
ur značku např. pro značku em
em { font-style: italic; font-weight:
weight: bold; }
-6-
www.cz-milka.net
Styly pro obecné (generické) třídy

Styly pro definování obecné třídy:
řídy:
• .velkapismena {font-size:18pt;}
size:18pt;}
• .zluta {color: yellow;}
Vyvolávání:
• class=velkapismena
• <h3 class=zluta> </h3>
• <p class=zluta> </p>
Styly pro specifikované (regulární) třídy:

tř
Styly pro definování třídy:
<style type="text/CSS">
p.modry {color: blue;}
p.cerveny {color: red;}
</style>
Vyvolávání:
• <p class=modry> </P>
• <p class=cerveny> </P>
Hodnoty vlastností:
Klíčová slova (keywords) – např.
ř. bottom
Délky (délkové hodnoty) – např.
ř. 10px
Procentní hodnoty
Adresy URL
Barvy
Délky:
-7-
www.cz-milka.net
Zápis barev:
Vlastnosti písma – umožňují změnitnit vzhled písma (typ, tlouš

tloušťku, velikost, ...):
Font-family (viz /..)
Font-style
style (normal, italic, oblique)
Font-variant (small-caps, normal)
Font-weight
weight (normal, bold, 100,...900)
Font-size
size (20pt, percentage (150%)
Font-family obecné třídy písma:

Serif – standardní patkové písmo, nejčastěji
nej Times
Sans-serif - standardní bezpatkové písmo, obvykle Helvetica (Arial)
Cursive – zdobné písmo v kurzivě,ě, typicky Zapf_Chanery,
Fantasy – ornamentální písmo, obvykle Western
Monospace – neproporcionální písmo obvykle
obvy Courier
Písma:
BODY {FONT-FAMILY: VERDANA, SANS-SERIF; }.

H1, H2 {FONT-FAMILY: GARAMOND, „TIMES NEW ROMAN“, SERIF; }.
Vlastnosti pro barvy a pozadí:

Barvy – color
h1 {color : rgb (100%,100%,100%)
Pozadí – background:
• Background-color
• Background-image
• Background-repeat
• Background-position
li. mramor {background-image
image : url(pozadí/mramor.gif) }
-8-
www.cz-milka.net
Vlastnosti pro text – umožňujíují zarovnání textu, zv

zvětšit
tšit nebo zmenšit mezery mezi písmeny, ...
Text-align
align (left, right, center, justify)
Text-decoration
tion (none, underline, overline,...)
Text-transform
transform (none, capitalize, uppercase)
Text-indent (lenght, percentage)
Line-spacing (lenght)
Line-height
height (normal, number, lenght, percentage)
Vlastnosti pro obdélníky (boxy) a rozvržení:

rozvržení
ňují specifikovat styl, barvu a ší

CSS vlastnosti pro border – umožňují šířku hrany rámečku:
Border-style
Border-color
Border-width
Border-top
Border-bottom
Border-left
Border-right
ňují zm
CSS vlastnosti pro margin – umožňují změnit horní, pravý, dolní i levý okraj nebo všechny
šechny okraje najednou:
najednou
Margin-top
Margin-right
Margin-bottom
Margin-left
Margin
ňují zm
CSS vlastnosti pro padding – umožňují změnit vnitřní mezery v prvku:
Padding-bottom
Padding-left
Padding-right
Padding-top
Padding
ňují nastavit umístění prvků:

CSS vlastnosti pro position – umožňují
Position static, absolute, relative
Top
Left
Z-index
Visibility
Display
-9-
www.cz-milka.net
Pravidla priority stylů:

Styl definovaný blíže ke značce ce má ppřednost před vzdálenějším (největší
tší váhu má atribut STYLE u elementu);
Vlastnosti definované jako třída
ída mají větší
v váhu než obecné vlastnosti určitého
itého elementu;
Vlastnosti konkrétnějších
jších kontextových styl
stylů mají přednost před méně konkrétními;
Je-li definováno více stylů,, uplatní se pouze naposledy definovaný.
Literatura:
Staníček, P.: Kompletní průvodce
vodce CSS. Kaskádové styly. Computer Press. Praha 2003.
http://www.w3.org/CSS
www.zvon.org
http://www.westciv.com/style_master/academy/css_tutorial/index.html
- 10 -

04

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

04

Uploaded by

Copyright:

Available Formats

www.cz-milka.

INTERNETOVÉ TECHNOLOGIE – CLIENT SIDE P4

Statický a dynamický web:

DHTML = integrace JavaScript, CSS a DOM:

Tři logické vrstvy web site:

Objektový Model Dokumentu:

Logical structure of documents:

Základní komponenty DOM:

Hierarchická struktura DOM:

Přehled nejdůležitějších objektů:

Čtení a zápis vlastností:

<HTML> <HEAD> <TITLE> > TE </TITLE></HEAD>

Základní principy CSS:

Styly – šablony stylů:

Možnosti specifikace stylů:

Vazby stylů na HTML document:

Interní styly na úrovni dokumentu:

Přímo vložené styly:

Propojené šablony stylů:

Výhody propojených stylů:

Syntaxe definice CSS:

Možnosti zápisu v selektoru:

Styly pro existující značky:

Styly pro obecné (generické) třídy

Styly pro specifikované (regulární) třídy:

Vlastnosti písma – umožňují změnitnit vzhled písma (typ, tlouš

Font-family obecné třídy písma:

BODY {FONT-FAMILY: VERDANA, SANS-SERIF; }.

Vlastnosti pro barvy a pozadí:

Vlastnosti pro text – umožňujíují zarovnání textu, zv

Vlastnosti pro obdélníky (boxy) a rozvržení:

ňují specifikovat styl, barvu a ší

ňují nastavit umístění prvků:

Pravidla priority stylů:

You might also like