Date post: | 07-Nov-2015 |
Category: |
Documents |
Upload: | bunea-petrica |
View: | 78 times |
Download: | 4 times |
Tehnici de informare i comunicare
Medii i tehnologii educaionale interactive
Medii i tehnologii educionale interactive
1
Prezentare general
Acest curs urmrete formarea cursanilor n utilizarea unui ansamblu de
tehnologii orientate spre exploatarea unui mediu colaborativ de creare i distribuire de
cunotine. Absolvenii unui astfel de curs pot contribui devisiv n rezolvarea
problemei asigurrii resurselor de formare n domenii cu rat mare de nnoire a
cunotinelor, mecatronica fiind evident, unul dintre acestea. Ca suport pentru
tehnologiile propuse se folosete reeaua Internet, cunotinele predate urmrind paii
necesari codificrii i distribuirii de informaii tehnice.
Obiective
Cursul abordeaz urmtoarele teme generale:
Comunicarea prin Internet. Arhitecturi, standarde i protocoale;
Codificarea documentelor n HTML (XHTML)
Formatarea documentelor folosind CSS (Cascade Style Sheets)
Baze de date. Pagini web generate dinamic
Platforme de e-learning. Funcii, instalare i configurare
Realizarea i publicarea materialelor de formare n format electronic
Administrarea platformei de e-learning din perspectiva profesorului
nsuirea cunotinelor incluse n material va permite cursanilor s realizeze i s
prezinte ntr-o form deosebit materialele proprii de formare elaborate pe
parcursul proiectului i nu nnumai.
Autorii
Medii i tehnologii educionale interactive
2
Capitolul I Limbajul HTML
1.1 Istoric
n urm cu peste 30 de ani, la sfritul anilor '60, Departamentul Aprrii din
S.U.A. a pus bazele primei reele de calculatoare destinat s acopere o larg
ntindere geografic, ARPAnet (Advanced Research Projects Agency Network). Scopul
reelei era schimbul de informaii cu caracter tiinific i tehnic ntre participanii la
diferite proiecte de cercetare din cadrul Departamentului Aprrii i cercettori din
instituii de nvmnt superior implicate. Rezultatele obinute n cadrul acestui
proiect au condus la definirea i apoi la standardizarea unor protocoale folosite la
transferul de date prin reelele de calculatoare (TCP/IP - Transfer Control
Protocol/Internet Protocol, HTTP - HyperText Transfer Protocol, FTP - File Transfer
Protocol i altele) i a determinat n anii '70 i '80 o extindere lent dar continu a
reelelor de calculatoare.
naintea exploziei informaionale din anii '90 au mai trebuit s apar dou
realizri importante:
1. Dezvoltarea limbajului HTML, propus de Dr. Tim Berners-Lee, ntr-un articol publicat n 1989. Articolul propunea folosirea pentru codificarea informaiei vehiculate prin reelele de calculatoare a unui subset de marcaje definite n standardul SGML (Standard Generalized Markup Language, 1986). n esen SGML propune un set de marcaje care permit reconstituirea documentelor difuzate pe suport electronic.
2. Apariia n februarie 1992 a primei aplicaii destinate navigrii pe Internet, Mosaic. Aplicaia a fost scris de studeni ai NCSA (National Center of Supercomputing Applications) din cadrul universitii statului Ilinois, USA.
Limbajul HTML a fcut obiectul unor standardizri succesive, prima versiune
finalizat fiind 2.0, n 1995 (autori Tim Berners-Lee i Dan Connoly).
Importana dezvoltrii limbajului a condus la crearea World Wide Web
Consortium (W3C), organizaie care n 1997 a finalizat versiunea 3.2 care i n prezent
este recunoscut ca standardul HTML.
Medii i tehnologii educionale interactive
3
Spre finele anilor '90 au aprut ns noi tehnologii, legate de realizarea
paginilor Web: Cascading Style Sheets (CSS), Active Server Pages (ASP), ceea ce a
determinat continuarea activitii n domeniul standardizrii a W3C, organizaia
realiznd succesiv standardele 4.0 i 4.01. Ultima versiune este 4.1, actualmente
fiind n curs de pregtire versiunea 5.
n viitorul previzibil, HTML va continua s reprezinte suportul pentru difuzarea
de informaii prin Internet.
1.2. Adresarea
Regsirea unui fiier printre miliardele de fiiere existente n World Wide Web
se bazeaz pe folosirea unui sistem unitar de adresare pus la punct odat cu
internetul. Sistemul de adresare poart numele de URL (Uniform Resource Locator).
Astfel, dac se afieaz n fereastra unei aplicaii de navigare pagina principal a
saitului proiectului FLEXFORM aceasta ar putea arta ca n figur.
n caseta pentru introducerea adresei a aplicaiei de navigare s-a tastat adresa
http://www.flexform.ro/.
Medii i tehnologii educionale interactive
4
Prima parte a adresei (http) precizeaz protocolul care trebuie folosit pentru
exploatarea fiierului, n cazul dat http (HyperText Transfer Protocol) deoarece fiierul
este n format hypertext i codificat n html.
A doua parte a adresei, www.flexform.ro identific un director de pe discul
serverului care gzduiete saitul. Ea poate fi scris i folosind adresa fizic din
Internet alocat serverului, care este format din patru numere cuprinse fiecare ntre
0 i 255. De exemplu adresele http://www.flexform.ro/ i
http://193.226.7.213/siteflex/ sunt echivalente dar a doua este mai greu de reinut.
Punerea n coresponden a celor dou modaliti de indicare a directorului care
conine pagina web dorit se realizeaz de una dintre aplicaiile pentru DNS (Domain
Name System) accesate de browser.
Dac adresa indicat n browser nu mai conine i alte caractere, serverul de
Web specificat va trimite solicitantului pagina principal a saitului, fiierul
corespunztor fiind denumit de obicei index.html.
Adresa unui fiier din Internet poate fi ns mai complex. Astfel adresa
http://www.flexform.ro/cursanti/autentif.html conine dup denumirea serverului o
cale, /cursanti/ i denumirea fiierului referit, autentif.html. Aceasta nseamn c n
directorul saitului exist un subdirector (cursanti) n care este nregistrat fiierul
autentif.html.
Se poate deci scrie:
URL = protocol + server + cale + fiier
Crearea unui numr de subdirectoare derivate din directorul principal al
saitului face ntreinerea acestuia mult mai uoar. Aa cum se va vedea n capitolele
urmtoare, chiar i n cazul unui sait mic numrul de fiiere coninnd imagini sau a
alte tipuri de fiiere poate fi destul de mare, fiind indicat o structurare a lor ca n
figur.
Medii i tehnologii educionale interactive
5
1.3 Principiile limbajului HTML
Codificarea informaiilor n HTML se bazeaz exclusiv pe informaii de tip text
(iruri de caractere ASCII). Dac informaia propriuzis este un text acest sistem de
codificare este natural. Dac ns informaia este de alt natur (o imagine, o
secven video sau audio) documentul n format HTML va conine numele fiierului
care conine informaia respectiv.
Exemplu de fiier n format hypertext:
Prima pagina Web
imagini
css
pagini web (fiiere .html)
Medii i tehnologii educionale interactive
6
NUMAI UNA
Pe umeri pletele-i curg rau
Mladie ca un spic de grau,
Cu sortul negru prins in brau,
O pierd din ochi de draga.
Si cand o vad, innebunesc;
Si cand n-o vad, ma-nbolnavesc,
Iar cand merg altii de-o petesc,
Vin popi de ma dezleaga.
n fiierul dat ca exemplu ... , ... ,
... .a. sunt denumite marcaje HTML. Unele marcaje (
sau ) conin informaii suplimentare ca valori ale unor atribute (bgcolor sau
src). Analiznd coninutul fiierului se observ c informaia propriuzis este
ncadrat ntre marcaje ... i ... . Marcajul delimiteaz
un titlu (eng. heading) iar ... delimiteaz un paragraf (eng. paragraph).
n coninutul fiierului apar i marcaje . Acestea indic trecerea la linie
nou (eng. break) i nu au pereche.
Pentru inserarea unei imagini s-a folosit tot un marcaj fr pereche, .
Acesta indic fiierul care conine imaginea. n exemplul dat atributul src are valoarea
"imagini/cobuc.jpg", deci fiierul cobuc.jpg este situat n subdirectorul imagini.
Dup scrierea fiierului n Notepad i salvarea sub numele numai_una.html se
poate deschide fiierul folosind de exemplu Internet Explorer.
Medii i tehnologii educionale interactive
7
1.4. XML, XHTML
Un limbaj similar limbajului HTML este XML. Spre deosebire de HTML, n XML
sintaxa este mai riguroas, marcajele aprnd n mod obligatoriu n perechi.
Semnificaia lor este ns nedefinit, interpretarea cznd n sarcina aplicaiilor care
exploateaz respectivele fiiere.
Faptul c limbajele de programare actuale integreaz funcii specializate
pentru prelucrarea fiierelor n format XML a favorizat apariia unui limbaj nou de
codificare a paginilor Web, XHTML.
Medii i tehnologii educionale interactive
8
Deosebirile majore dintre HTML i XHTML constau n faptul c marcajele i
atributele acestora sunt scrise cu litere mici, toate marcajele apar n perechi i valorile
atributelor sunt obligatoriu cuprinse ntre ghilimele.
Observaie: Pentru scrierea marcajelor din HTML care practic nu au nevoie de
pereche se folosete o sintax aparte. Astfel, pentru trecerea la linie nou n loc s se
secrie se va scrie mai simplu . La fel pentru inserarea imaginii se
scrie .
n XHTML pagina Web analizat deja s-ar scrie astfel:
Prima pagina Web
body { background-color: yellow; }
NUMAI UNA
Pe umeri pletele-i curg rau
Mladie ca un spic de grau,
Cu sortul negru prins in brau,
O pierd din ochi de draga.
Si cand o vad, innebunesc;
Si cand n-o vad, ma-nbolnavesc,
Iar cand merg altii de-o petesc,
Vin popi de ma dezleaga.
Fiierul astfel modificat se salveaz sub acelai nume. Primele dou linii din
fiier impun browserului modul de tratare a informaiei coninute:
Medii i tehnologii educionale interactive
9
DTD (Document Type Definition) indic pe lng natura informaiei coninute
(XHTML 1.0) i setul de marcaje utilizate. n exemplul considerat s-a indicat modelul
Strict. n loc de Strict se putea indica modelul Transitional, diferena dintre cele dou
fiind lista de marcaje i de atribute utilizabile, mai restrns n cazul variantei Strict.
A doua linie face trimitere la o adres din Internet. Fiierul referit conine
definiia riguroas a modelului Strict, respectiv modul n care trebuie interpretate
marcajele i atributele acestora. n acest mod se dorete impunerea tratrii uniforme,
de ctre toate browserele, a coninutului paginilor Web.
O alt diferen notabil a variantei XHTML fa de HTML este adugarea n
seciunea a marcajului . Acesta conine indicaii privind formatarea
coninutului paginii web sub forma unor reguli. Pentru pagina considerat s-a inclus o
singur regul:
body { background-color: yellow; }
Ea impune pentru corpul paginii (seciunea ) colorarea fundalului n
galben. Caracteristic pentru XHTML este separarea informaiilor propriuzise de
indicaiile de formatare. Astfel, n HTML pentru a scrie diferit o poriune dintr-un
paragraf am putea ntlni o succesiune de marcaje ca n exemplul urmtor:
Poezia Numai una... a fost publicata in 1837.
n XHTML acelai efect s-ar obine scriind:
Poezia Numai una... a fost publicata in 1837.
Marcajul face referin la clasa bib. Definirea ei se poate face prin
adugarea unei reguli suplimentare ntre ... :
body { background-color: yellow; }
.bib {font-style: italic; font-weight: bold; color: blue}
A doua variant de formatare, specific limbajului XHTML este interesant
deoarece orice clas astfel definit va putea fi referit n pagina Web ori de cte ori
este nevoie. Aa cum se va vedea n continuare, ansamblul de reguli introdus prin
poate fi salvat ntr-un fiier separat, utilizarea regulilor definite putnd fi
imediat extins la toate paginile care alctuiesc un sait Web dndu-le un aspect
Medii i tehnologii educionale interactive
10
unitar. De asemenea eliminarea din corpul paginii (seciunea ) a detaliilor
privind formatarea faciliteaz ntreinerea coninutului paginilor.
1.3 Marcaje XHTML
1.3.1. Generaliti Avnd n vedere avantajele limbajului XHTML i tendina actual de a se
renuna la HTML n favoarea limbajului XHTML, n cele ce urmeaz vor fi prezentate
doar cunotine de XHTML.
O pagin web este coninut ntre marcaje ... i este
constituit de cele mai multe ori din dou seciuni, head i body.
Seciunea head este delimitat prin ... iar seciunea body
este delimitat prin ... .
Practic majoritatea paginilor care vor fi scrise n cadrul cursului se vor ncadra
n structura urmtoare:
...(coninut head)
... (coninut body)
1.3.2 Paragrafe Ca i n cazul banal al unui document editat cu un procesor de texte, fiecare
fraz dintr-o pagin Web este coninut ntr-un paragraf. Pentru evidenierea unui
paragraf se folosete perechea de marcaje ... .
Medii i tehnologii educionale interactive
11
Exemplu:
Primul paragraf poate conine informaii generale. Urmtoarele peragrafe vor aduce precizri
suplimentare, n final mesajul transmis fiind limpede.
Dispunerea coninutului paragrafului este lsat la latitudinea aplicaiei de
navigare. Dac n cadrul unui paragraf trebuie totui trecut forat la linie nou, n
locul n care se dorete ruperea paragrafului se va folosi un marcaj .
Exemplu:
Pe umeri pletele-i curg rau
Mladie ca un spic de grau,
....
n unele cazuri se dorete ca browserul s nu separe pe linii consecutive dou
iruri de caractere ntre care exist spaiu. Este cazul numerelor de telefon de
exemplu. Pentru astfel de situaii se poate ncadra irul care nu trebuie separat ntre
marcaje ... .
Exemplu:
Sunai la 0745 225236 pentru informaii suplimentare.
Pentru scrierea caracterelor specifice limbii romne este indicat includerea n
seciunea head a marcajului:
Medii i tehnologii educionale interactive
12
i pentru alte caractere speciale, de exemplu pentru cele folosite la scrierea
marcajelor, trebuie folosite secvene de caractere:
- pentru caracterul spaiu
< - pentru <
> - pentru >
& - pentru &
Pentru a evidenia pri dintr-un paragraf se folosesc marcajele ...
i ... . Primul marcaj este interpretat de browsere ca
indicnd scrierea nclinat (italic) iar al doilea este interpretat ca indicnd o scriere cu
caractere ngroate (bold).
1.3.3 Titluri Titlurile din paginile web sunt ncadrate ntre marcaje ... . Ca i n
cazul procesoarelor de texte se pot folosi marcaje diferite pentru titluri de diferite
nivele : h1, h2, , h6. n lipsa unor specificaii privind mrimea caracterelor, pentru
nivelul 4 textul va fi afiat normal. Mrimea caracterelor pentru nivelele 5 i 6 va fi n
acest caz mai mic dect cea normal iar pentru 1-3 va fi mai mare.
Exemplu:
Programul de lucru cu publicul
1.3.4 Liste Marcajele XHTML permit definirea mai multor tipuri de liste.
1.3.4.1 Lista ordonat Lista ordonat este declarat prin marcajul (ordered list) i are rndurile
numerotate. Fiecare linie este ncadrat ntre marcaje ... .
Medii i tehnologii educionale interactive
13
Exemplu
Introducere
Limbajul HTML
Sistemul de operare UNIX
Publicarea saitului pe un server UNIX
Numerotarea liniilor este automat. Pentru a ncepe numerotarea de la o
valoare diferit de 1, marcajului i se va aduga atributul start=n, n fiind numrul
dorit pentru prima linie a listei:
Introducere
. . .
1.3.4.2 Lista neordonat Lista neordonat este declarat prin marcajul (unordered list) i are
rndurile precedate de puncte. Fiecare linie este ncadrat de marcaje .
Exemplu:
Introducere
Limbajul HTML
Sistemul de operare UNIX
>Publicarea saitului pe un server UNIX
1.3.4.3 Lista coninnd definiii Lista coninnd definiii este declarat prin marcajul (definition list) i are
rndurile precedate de marcaje pentru titluri i pentru definiii.
Definitii
Pagin Web
Fiier (document) aparinnd WWW.
Server Web
Medii i tehnologii educionale interactive
14
Calculator care memoreaz pagini web i le pune la dispoziia utilizatorilor reelei.
Sait Web
O colecie de pagini Web ntreinut de o firm, o instituie de nvmnt, o agenie
guvernamental sau chiar de un individ.
1.3.5 Imagini Pentru includerea n pagina web a unei imagini se folosete marcajul .
Acesta accept atributele src pentru indicarea fiierului care conine imaginea i alt
pentru definirea textului care va apare n locul imaginii dac afiarea imaginilor n
fereastra browserului este inactivat sau la plasarea cursorului mouse-ului deasupra
imaginii.
Exemplu:
Din punctul de vedere al programului de navigare, o imagine este un simbol ca
i oricare dintre caracterele afiate n pagin. Fa de text, imaginile necesit un timp
de ncrcare mai ndelungat, ceea ce impune limitarea mrimii i a numrului de
imagini din paginile web.
Imaginile pot proveni din diferite surse : alte pagini web, pot fi scanate sau
desenate cu ajutorul unei aplicaii specializate.
Medii i tehnologii educionale interactive
15
Rezoluia imaginii, cuprins uzual ntre 72 DPI (dots per inch, puncte pe inci)
i 600 DPI, influeneaz mrimea fiierului care conine imaginea. Monitoarele uzuale
afieaz punctele la 0.23-0.26 mm, deci au o rezoluie de aproximativ 96 DPI. Dac
imaginile nu trebuie ulterior imprimate i nu se dorete modificarea mrimii lor n
momentul afirii n fereastra browserului, se recomand scanarea folosind aceast
rezoluie.
Imaginile care trebuie afiate n paginile web sunt pstrate n fiiere separate.
Deoarece memorarea informaiei grafice se poate realiza folosind o multitudine de
tehnologii, prin convenie formatul fiierelor destinate afirii n cadrul paginilor web
trebuie s fie GIF (Graphics Interchange Format, avnd extensia .gif, formatul
suportnd 256 culori), JPEG (Joint Photographic Experts Group, avnd extensia .jpg,
formatul suportnd 224 = 16777216 culori) sau PNG (Portable Network Graphics,
variant ameliorat a formatului GIF avnd extensia .png).
Dac aceeai imagine este folosit pe mai multe pagini, programul de navigare
o va ncrca i memora temporar pe disc reducnd astfel timpii de ncrcare a
paginilor.
Adaptarea unei imagini la cerinele unui proiect presupune n principal
decuparea zonei interesante i redimensionarea acesteia n coresponden cu spaiul
alocat n pagin.
Exist o multitudinde de aplicaii care permit manipularea imaginilor. Cele mai
utilizate sunt urmtoarele: Adobe Photoshop, Corel Photo-Paint, Corel Paint Shop Pro,
The GIMP, Inkscape, Pixel image editor, Paint.NET sau Xara.
Alegerea unei aplicaii potrivite pentru realizarea activitilor legate de web
design este simpl dac se urmrete minimizarea costurilor deoarece numai
Inkscape, The Gimp i Paint.NET sunt gratuite. n cadrul cursului, prelucrrile de
imagini vor fi realizate cu Inkscape (http://www.inkscape.org/). Un tutorial succint
din care se poate nva folosirea aplicaiei poate fi accesat la adresa:
http://en.flossmanuals.net/Inkscape/.
Medii i tehnologii educionale interactive
16
1.3.6 Mic tutorial Inkscape Din punct de vedere al realizrii grafice, un sait trece prin dou faze.
n prima faz se realizeaz un "layout". Practic este vorba despre un fiier n
care informaia este dispus pe mai multe nivele, la baz fiind nivelul care conine un
fundal. Nivelele conin text, alte mici imagini (de exemplu fundalul unor butoane) sau
dreptunghiuri pline care delimiteaz exact zona n care va fi afiat o prezentare
(video, succesiune de imagini etc.). Pentru aceast etap se folosete o aplicaie
specializat pe informaie grafic deoarece trebuie depasate i redimensionate
imagini, trebuie create diferite efecte i construite imaginile care vor fi folosite ca
fundal.
Exemplu:
Dup ncheierea acestei etape rezultatul este prezentat firmei care a comandat
lucrarea n vederea obinerii aprobrii pentru continuare pe soluia propus.
Recomandare: Pentru reuita unui proiect este bine s fie studiate ct mai
multe realizri nrudite, o surs important de inspiraie pentru graficieni i nu numai
fiind http://www.templatemonster.com.
A doua faz, de decupare (engl. slicing), const n divizarea imaginii obinut
ca fundal n prima etap n imagini mai mici a cror alturare permite refacerea
fundalului iniial. Aceste imagini vor constitui fundalul unor blocuri care, n etapa de
integrare, vor primi informaia efectiv (text, imagini, player video, galerie de imagini
n JavaScript sau Flash, etc.).
Medii i tehnologii educionale interactive
17
n aceast etap se ascund informaiile iniial introduse n layout rmnnd
numai fundalul paginii. Apoi se decupeaz blocurile de imagine dorite i se salveaz
fiecare bloc ntr-un fiier separat. Aceste fiiere vor primi denumiri sugestive pentru a
putea fi uor identificate i integrate n blocurile care vor fi definite n etapa urmtoare
(etapa zis "de integrare").
a. Redimensionarea unei imagini
Se pornete aplicaia Inkscape, se deschide fiierul care conine imaginea (File
/ Open) i se selecteaz fiierul dorit.
Dac fiierul conine o imagine se selecteaz imaginea i apoi se selecteaz n
meniul aplicaiei Object / Transform. Aplicaia va afia o fereastr n care se
selecteaz tabul de selecie Scale. De obicei dimensiunile imaginilor sunt date n pixeli
(puncte ecran) i din acest motiv se selecteaz ca i unitate de msur px.
Medii i tehnologii educionale interactive
18
b. Decuparea unei zone dreptunghiulare
Dac se dorete decuparea unei poriuni dreptunghiulare dintr-o imagine, se
va desena un dreptunghi care ncadreaz regiunea dorit i apoi se va selecta File /
Export Bitmap i se va preciza fiierul n care se va pstra noua imagine. Fiierul va fi
n format .png.
Exemplu:
Medii i tehnologii educionale interactive
19
Numele fiierului .png (rect3679) poate fi editat. Numele iniial afiat a fost
stabilit folosind denumirea intern a obiectului (dreptunghi) folosit la selecie.
c. Slicing (decuparea imaginii de pe fundal)
nceperea lucrului la un sait presupune frecvent activiti de decupare a unei
imagini pe care un grafician a plasat-o ca fundal al saitului. n urma decuprii imaginii
folosite ca fundal vor fi obinute mai multe imagini care vor fi ulterior aplicate ca
fundal blocurilor care compun pagina Web i care vor conine informaia propriuzis
(text, alte imagini etc). Numele consacrat al acestei activiti este slicing (slice =
felie).
Deoarece n HTML blocurile care formeaz pagina sunt dreptunghiulare, ne
intereseaz doar decuparea n aceast form.
Pentru a realiza decuparea unei imagini n poriuni mai mici se vor suprapune
peste imagine o serie de dreptunghiuri care vor fi utilizate n final pentru tierea
poriunilor dorite. Pentru a realiza toate dreptunghiurile naintea decuprii
Medii i tehnologii educionale interactive
20
propriuzise, activitatea va ncepe prin declararea unui nou nivel (layer) care va
conine doar dreptunghiuri de selecie.
Noul nivel este imediat impus ca nivel curent. Numele nivelului curent este
afiat permanent n partea de jos a ferestrei aplicaiei, n bara de stare.
n noul nivel se deseneaz un dreptunghi suprapus peste una dintre zonele
care trebuie decupat. Dimensiunile dreptunghiului pot fi adaptate cu mouse-ul sau
pot fi modificate direct, schimbnd valorile afiate pe bara cu instrumente.
Medii i tehnologii educionale interactive
21
Pentru a modifica aspectul dreptunghiului (culoare, transparen) se
selecteaz n meniu Object / Fill and Stroke sau se apas butonul de pe bara cu
instrumente.
n procesul de decupare vor fi realizate evident mai multe dreptunghiuri. Din
considerente legate de uurina manipulrii acestora este bine s fie declarate parial
transparente i colorate ntr-o culoare distinct, dei naintea folosirii lor pentru
decuparea zonelor dorite acestea vor fi declarate din nou ca fiind complet
transparente. Nivelul de transparen se impune prin depalasarea ultimului cursor din
fereastr, A (prescurtare de la alpha chanel, denumirea consacrat a componentei
transparen). Transparena poate varia ntre 0 (complet transparent) i 255
(complet opac).
O funcie interesant a aplicaiei Inkscape este posibilitatea impunerii unei
alinieri perfecte a unui dreptunghi astfel desenat fa de oricare dintre laturile imaginii
iniiale sau fa de alt dreptunghi.
Rou
Verde
Albastru
Transparen
Medii i tehnologii educionale interactive
22
Pentru primul caz, alinierea fa de o latur a imaginii iniiale, se afieaz
fereastra Align and Distribute (din meniu Object / Align and Distribute sau butonul
de pe bara cu instrumente) i se selecteaz dreptunghiul (butonul ).
Situaia iniial:
i finalul:
Pentru a realiza o aliniere perfect a laturilor corespunztoare n cazul n care
sunt realizate mai multe dreptunghiuri de selecie, fereastra Align and Distribute
conine butoane care permit poziionarea unui dreptunghi fa de alt dreptunghi,
construit anterior i care este identificat implicit ca referin. Pentru a realiza o astfel
de aliniere se selecteaz cu mouse-ul ambele dreptunghiuri (dreptunghiul curent i
referina) i se apas butonul (Align tops of objecte to bottom of anchor).
Medii i tehnologii educionale interactive
23
Situaia iniial:
Comand aliniere:
Rezultat:
n procesul de decupare este necesar frcvent duplicarea unui dreptunghi deja
realizat. Pentru aceasta se selecteaz cu butonul drept dreptunghiul realizat i apoi se
selecteaz n meniul contextual afiat opiunea Duplicate. Noul dreptunghi va fi
realizat peste cel de referin, deci trebuie imediat deplasat cu mouse-ul i apoi
redimensionat i aliniat. Dimensiunile finale ale dreptunghiurilor de selecie trebuie
Medii i tehnologii educionale interactive
24
notate deoarece blocurile n care acestea vor fi plasate ca imagini de fundal trebuie s
aib aceleai dimensiuni.
n meniul contextual afiat la selectarea unui dreptunghi se afl i opiunea
Object properties. n urma selectrii acestei opiuni se afieaz o fereastr n care se
poate introduce un nume pentru dreptunghiul selectat. Acest nume va fi pstrat i
pentru fiierul care va conine poriunea din imagine decupat cu ajutorul
dreptunghiului respectiv.
Medii i tehnologii educionale interactive
25
Se reduce parametrul A la 0:
Se selecteaz File / Export Bitmap:
Se observ c numele fiierului coincide cu cel al dreptunghiului, formatul
implicit fiind evident tot .png.
Medii i tehnologii educionale interactive
26
1.3.7 Tabele
Tabelele sunt folosite n paginile web pentru prezentarea informaiilor
organizate ca tabele. Tabelele pot servi i la poziionarea informaiei dintr-o pagin
web, dar aceast soluie a fost practic abandonat odat cu extinderea utilizrii CSS
(Cascade Style Sheet).
Un tabel este format din rnduri de celule. Principalele marcaje folosite la
descrierea unui tabel sunt:
- pentru delimitarea tabelului;
- pentru delimitarea unei linii (table row)
- pentru delimitarea unei celule din cadrul tabelului (table data)
- pentru celulele din capul tabelului (table header - determin
scrierea implicit bold i centrat).
Formatul general al unui tabel este:
(ncepe definirea tabelului)
titlul, dac exist
(ncepe definirea primei linii)
coninut (prima celul din linia 1, titlul coloanei)
...
coninut (ultima celul din linia 1, titlu)
(sfritul primei linii)
(ncepe definirea liniei 2)
coninutul primei celule
...
coninutul ultimei celule
(sfritul liniei 2)
............
(nceputul ultimei linii)
coninutul primei celule
...
coninutul ultimei celule
(sfritul ultimei linii)
(sfritul tabelului)
Medii i tehnologii educionale interactive
27
Includerea unei imagini ntr-o celul a tabelului se face normal, incluznd ntre
marcajele ... marcajul :
Exemplu:
Tabele
Exemplu
Produs
Pret
Cantitate disponibila
Pantofi Lux
156
243
Pantofi Carmens
174
189
Medii i tehnologii educionale interactive
28
Dou atribute care pot fi incluse n marcajele sau permit unirea
celulelor.
a. colspan="n" - permite unirea a n celule consecutive de pe aceeai linie.
Exemplu:
Zona de est
b. rowspan="n" - permite unirea a n celule consecutive din cadrul aceleiai coloane.
Exemplu:
Valori
Pentru a nu grei la descriere, n cazul unui tabel avnd celule unite se
recomand s se porneasc de la o reprezentare grafic a acestuia pe care s se
indice celulele care trebuie efectiv descrise, ca n figur:
Medii i tehnologii educionale interactive
29
...
...
...
...
...
...
...
...
...
Exemplu fundamental:
O pagin Web tipic afieaz diverse categorii de informaii. n pagina
prezentat n continuare se pot identifica uor diferitele categorii de informaii.
Gruparea lor i plasarea n poziiile dorite, att n pagin ct i una fa de alta, se pot
realiza folosind tabele i liste formatate.
1 1 1
2 2 2
3
4
3
linia 1
linia 2
linia 3
linia 4
Medii i tehnologii educionale interactive
30
1.3.8 Marcaje pentru definirea legturilor Una dintre caracteristicile care dau putere web-ului const n posibilitatea
includerii de referine la alte pagini, din acelai sait sau din orice sait accesibil prin
reea i indicat prin adres (URL). Selectarea cu mouse-ul a unei referine provoac
afiarea imediat paginii referite.
Pentru includerea unei referine se va folosi marcajul (anchor).
1.3.8.1 Referine selectate folosind iruri de caractere Se consider o pagin web de intrare ntr-un sait destinat prezentrii
principalelor realizri artistice ale lui Michelangelo avnd coninutul urmtor:
Medii i tehnologii educionale interactive
31
Referinte
Michelangelo
Introduction
Early life in Florence
First roman sojourn
First return to Florence
The Sistine Chapel ceiling
The tomb of Julius II
The Laurentian library
The Medici tombs
The last judgement
The Campidoglio
WebMuseum, Paris: MichelangeloBiographical information and images of several of his works on
the Web.
Medii i tehnologii educionale interactive
32
1.3.8.2 Referine selectate folosind imagini n acelai fel n care sunt ataate irurilor de caractere, referinele pot fi
asociate i imaginilor dintr-o pagin web:
Imaginea folosit pentru specificarea referinei va fi implicit afiat ntr-un
chenar a crui culoare respect aceleai reguli ca i culoarea n care ar aprea irurile
de caractere folosite pentru referine.
Uneori este util plasarea unei imagini mici ntr-o pagin, avnd o legtur
spre o imagine mrit. De exemplu o pagin din saitul despre Michelangelo poate
avea n pagina despre Capela Sixtin (Sistine.html) cteva astfel de imagini:
V THE SISTINE CHAPEL CEILING
Michelangelo was recalled to Rome by Pope Julius II in 1505 for two commissions. The most important
one was for the frescoes of the Sistine
1.3.8.3 Folosirea referinelor pentru navigarea n pagini lungi Referinele pot servi i la navigarea n interiorul paginilor lungi. O referin
destinat navigrii ntr-o pagin lung se scrie astfel:
Medii i tehnologii educionale interactive
33
sau
n al doilea exemplu eticheta indic poziia din care se va realiza afiarea
paginii nume.html.
Punctele din care se dorete nceperea afirii vor fi etichetate. Pentru
declararea unei etichete se va folosi tot marcajul avnd un atribut name care
indic numele etichetei. Exemplu :
Airplanes
AIRPLANE STRUCTURE
Airplanes generally share the same basic configurationeach usually has a fuselage, wings,
tail, landing gear, and a set of specialized control surfaces mounted on the wings
and tail.
Fuselage
The fuselage is the main cabin, or body of the airplane. Generally the fuselage has a cockpit section at
the front end, where the pilot controls the airplane, and a cabin section. The cabin section may be designed
to carry passengers, cargo, or both. In a military fighter plane, the fuselage may house the engines, fuel,
electronics, and some weapons. In some of the sleekest of gliders and ultralight airplanes, the fuselage may
be nothing more than a minimal structure connecting the wings, tail, cockpit, and engines.
Wings
All airplanes, by definition, have wings. Some, like the flying wings built by the Northrop-Grumman
Corporation, based in the United States, are nearly all wing with a very small cockpit. Others have minimal
wings, or wings that seem to be merely extensions of a blended, aerodynamic fuselage, such as the space
shuttle.
Tail Assembly
Most airplanes, except for flying wings, have a tail assembly attached to the rear of the fuselage,
consisting of vertical and horizontal stabilizers, which look like small wings; a rudder; and elevators. The
components of the tail assembly are collectively referred to as the empennage.
Dac se dorete trecerea la eticheta #aripi pornind dintr-o alt pagin web,
referina ar fi trebuit scris astfel :
airplane wings
Medii i tehnologii educionale interactive
34
1.3.8.4 Folosirea referinelor pentru lansarea n execuie a unor aplicaii O referin poate declana execuia unei aplicaii instalate pe calculatorul
folosit la navigare. Dac referina conine numele unui fiier (audio, video, prezentare
multimedia etc.), aplicaia de navigare realizeaz dou aciuni: lanseaz n execuie
aplicaia asociat implicit extensiei fiierului i transfer acesteia fiierul preluat prin
reea.
a. Lansarea n execuie a aplicaiei destinat trimiterii de mesaje prin e-mail. Exemplu:
Pentru orice informatii suplimentare puteti scrie autorului lucrarii, conf.dr.ing. Mihai DAMIAN
Dac aplicaia implicit destinat trimiterii de mesaje prin pota electronic este
Outlook (integrat n Microsoft Office), aceasta va fi automat lansat n execuie i va
fi afiat fereastra de editare a unui mesaj destinat adresei indicate dup mailto.
Variant : folosirea unei imagini :
Medii i tehnologii educionale interactive
35
b. Redarea unei prezentri realizate n PowerPoint. Prezentrile multimedia realizate n PowerPoint i salvate n format PowerPoint Show, *.pps:, pot fi redate fie direct n fereastra programului de navigare (cazul aplicaiei Internet Explorer) fie n fereastra aplicaiei PowerPoint, dac aplicaia de navigare nu dispune de posibilitatea redrii acestor fiiere. Exemplu:
Pornire prezentare PowerPoint Show
c. Secvene de film. Pentru a reda o secven de film este necesar ca formatul fiierului care conine filmul s fie compatibil cu o aplicaie instalat pe calculator. De regul pentru afiarea secvenelor video se folosete aplicaia Windows Media Player (component Windows). Exemple:
Start film
Start film
Not: Dac se dorete integrarea secvenei video n pagina Web este necesar
integrarea n pagin a unei miniaplicaii specializate. O soluie gratuit, larg folosit,
este mediaplayer-ul JW Player. Acesta poate fi descrcat de la adresa
http://www.longtailvideo.com/jw/upload/mediaplayer.zip
Dup descrcare i dezarhivare se va transfera fiierul player.swf din
directorul astfel creat n directorul paginii (obligatoriu!). Secvena de cod care trebuie
inclus pentru a insera n pagina Web player-ul descrcat i modul de scriere a
parametrilor necesari rezult din exemplul urmtor.
Medii i tehnologii educionale interactive
36
allowFullScreen="true"
scale="showall"
wmode="opaque"
flashVars="file=curs13/asimo.mp4&autostart=false&image=curs13/asimo1.png"
pluginspage=
"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" />
n exemplul dat, fiierul care conine filmul redat este plasat ntr-un director
derivat (curs13/asimo.mp4). n secvena scris mai apare referit i fiierul
curs13/asimo1.png. Acesta conine o imagine care se va afia pn n momentul
acionrii butonului .
Parametrii care stabilesc dimensiunile player-ului video sunt with (limea) i
height (nlimea). Pornind de la dimensiunile filmului (480x270, valori afiate de
Windows Explorer) s-au stabilit dimensiunea 480x294. Diferena de 24 pixeli pe
vertical este necesar pentru a se putea afia bara cu instrumente de control a
player-ului. Not: Fiierul asimo.mp4 a fost descrcat din saitul www.youtube.com
folosind aplicaia gratuit YouTube Downloader.
d. Secvene sonore. Redarea acestora se face similar celor video. Fiierele coninnd secvena sonor pot avea diferite extensii, cele mai ntlnite fiind .waw sau .mp3. Exemple:
Medii i tehnologii educionale interactive
37
Start secventa sonora
Start melodie mp3
1.3.9 Hri de imagini Se poate crea o imagine avnd mai multe regiuni, fiecare fiind folosit pentru
definirea unei referine. Zonele sensibile la selectarea cu mouse-ul pot fi
rectangulare, poligonale sau circulare. Determinarea coordonatelor punctelor care
definesc regiunile se poate realiza folosind Inkscape, care afieaz n permanen
coordonatele cursorului. Marcajele care se vor folosi n acest caz sunt i
. Numele hrii se declar cu ajutorul atributului usemap="#nume" introdus
n cadrul marcajului .
Exemplu:
Pentru declararea zonelor sensibile la aciunea mouse-ului se vor folosi
atributele shape pentru a indica forma zonei i coords pentru a-i defini poziia i
dimensiunile. Modul de folosire a acestor atribute reiese din exemplele urmtoare:
a. Zon de form rectangular (shape="rect"):
(52, 70)
(29, 48)
axa X
axa
Y
Medii i tehnologii educionale interactive
38
b. Zon de form circular (shape="circle"):
c. Zon de form poligonal (shape="poly")
Exerciiu: Completai prima pagin a saitului LEGOLAB SRL adugnd legturi
conform indicaiilor din figur:
(100,100)
(50,10)
(10,80)
(150,100)
R40
Medii i tehnologii educionale interactive
39
catalog.html#baza catalog.html#pers catalog.html#anim catalog.html#massmp
catalog.html#avioane
catalog.html#masincatalog.html#robo
Medii i tehnologii educionale interactive
40
Rezolvare:
LEGOLAB
LEGOLAB - laboratorul virtual
Aici e lumea LEGO. Fara bani, doar pasiune!
Home
Noutati si promotii
Arhitectura
Oras
Creator
Jocuri
Contact
LEGO - un joc serios
Dac lumea LEGO nseamn multe piese frumoase, bine realizate si pasiune, atunci acest sait este o
parte a acestei lumi. Nu veti putea atinge micile componente dar le vei putea folosi ca si cum ar fi pe masa
voastra. Faptul ca ele vor fi doar virtuale nu e neaparat un dezavantaj, ba chiar din contra. Lego-ul virtual
inseamna 100% joaca, setul vostru fiind nelimitat. Si nu se va imprastia prin toata casa, nici nu veti pierde
elemente.
Daca nu stiti de unde sa incepeti, selectati una dintre categorii si refaceti constructiile demonstrative.
Veti invata repede cum se foloseste jocul nostru.
Diverse
Vehicule
Kituri complexe
Medii i tehnologii educionale interactive
41
Kituri 4-7 ani
Elemente de baza
Personaje
Animale
Masini simple
Kituri 7-10 ani
Avioane
Masini
Roboti
Home | Prezentare | Produse | Contact
2011. Toate drepturile rezervate. Proiectat de FLEXFORM.
Medii i tehnologii educionale interactive
42
Capitolul II CSS
2.1 Aspecte generale
Evoluia web-ului a condus la apariia unui limbaj destinat specificrii
aspectului paginilor web, CSS (eng. Cascading Style Sheets). Folosind CSS se pot
impune proprietile fonturilor, culori, se poate controla poziia imaginilor sau a altor
elemente care formeaz coninutul paginilor. naintea adoptrii pe scar larg a
cuplajului XHTML-CSS se ncerca rezolvarea problemelor legate de aspectul paginilor
web folosind marcaje HTML i atribute ale acestora dar neuniformitatea tratrii
acestora n diferite browsere a devenit o problem a crei adevrat soluie este
reprezentat de CSS.
Pe lng specificarea modului de afiare a informaiei din paginile web, CSS
ofer posibilitatea impunerii acelorai caracterisici ansamblului de pagini care
formeaz un sait.
CSS este suportat de toate browserele actuale.
Deoarece nvarea CSS presupune un mare numr de exerciii i
experimente, este bine s se acceseze saitul http://www.w3schools.com/css/.
Exerciiile din acest sait se realizeaz ntr-o aplicaie integrat n browser care permite
editarea regulilor CSS i vizualizarea imediat a efectelor.
2.2 Sintaxa CSS
Impunerea modului de afiare a informaiei n CSS se realizeaz prin reguli. O
regul indic modul n care trebuie afiat un element din pagin.
Sintaxa unei reguli este:
selector {proprietate:valoare;}
Medii i tehnologii educionale interactive
43
Exemplu:
body {
background-color: black;
}
sau, mai compact:
body {background-color: black;}
Regulile CSS pot fi definite fie ca valoare a atributului style adugat marcajelor
HTML, fie pot fi incluse la nceputul paginii, n seciunea head, ntre marcaje
... . Prima variant realizeaz o modificare local, afectnd doar informaia
afiat folosind marcajul modificat, n timp ce a doua se extinde la tot fiierul. n cele
ce urmeaz se va folosi ns numai a doua variant deoarece scopul utilizrii soluiei
XHTML+CSS n locul limbajului HTML este mai ales acela de a separa coninutul
paginilor web de informaiile de formatare.
Exemple:
Formatarea textului
p {color: white; font-family: verdana,arial; font-size:14px; background-color: purple;}
...
Text imprimat pe fond purpuriu.
...
Rezultat:
Examplu mai complicat
h1 { font-size: x-large; color: red }
h2 { font-size: large; color: blue }
body {background-color: black;
Medii i tehnologii educionale interactive
44
color: white;
}
p {
color: green;
font-family: tahoma,arial,verdana;
font-size: 12px;
}
Observaie: Dac zona de definire a stilurilor ataate diferitelor marcaje este
salvat separat, ntr-un fiier denumit de exmplu stil.css, pentru a impune ntr-o
pagin web a saitului aceleai modificri, se va include n seciunea a acesteia
un marcaj n care se va specifica fiierul care conine definiiile de stiluri, ca n
exemplul de mai jos:
. . .
Avantajul acestei soluii const din faptul c aspectul paginilor sitului n care
este inclus fiierul stil.css poate uor modificat, prin simpla editare a regulilor
coninute de acesta.
(stil.css)
stil.css
Medii i tehnologii educionale interactive
45
2.3 Selectori
Pentru a impune cui se aplic o anumit regul sau un set de reguli, n CSS se
folosesc selectori. n regulile deja scrise, body sau p care precedau regulile scrise
sunt selectori. Un selector poate fi deci numele unui marcaj XHTML i n acest caz
regulile care i-au fost ataate n zona de definire a stilurilor vor fi aplicate peste tot
unde se folosete respectivul marcaj. Dar CSS permite i declararea unor selectori noi
care vor fi folosii n coninutul paginii ca valori ale atributelor class sau id.
Posibilitatea definirii o singur dat a modului n care un marcaj XHTML
opereaz reprezint un argument important n adoptarea CSS ca soluie pentru
formatare. n paginile web anumite marcaje pot aprea de multe ori ( sau
de exemplu). Dac de fiecare dat am modifica aspectul implicit prin atribute
suplimentare fiierul rezultat ar fi mult mai mare i mai greu de pus la punct i de
ntreinut.
Exemplu fundamental:
Examplu de formatare paragraf
p {color: white; font-family: verdana,arial; background-color: purple;}
/*
Comentariu CSS pe mai multe linii
*/
.verde {color: white; font-family: verdana,arial; background-color: green;}
.albastru {color: white; font-family: verdana,arial; background-color: blue;}
#col_stg {position: absolute; left:10px; top:50px; width:200px; background:#fff; border:1px solid
#000;padding:8px;}
#col_centru {background:#fff; margin-left: 217px; margin-top:35px; border:1px solid #000;padding:8px;}
Coloana din stanga
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Medii i tehnologii educionale interactive
46
Coloana din centru
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
te feugait nulla facilisi.
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por
scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on
refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica,
pronunciation e plu sommun paroles.
n definirea stilurilor s-au specificat caracteristicile a cinci selectori: p, .verde,
.albastru, #col_stg, i #col_centru. Primul este un marcaj XHTML, deci peste tot unde acest marcaj va fi folosit va determina afiarea n modul specificat. Urmtorii doi
selectori, .verde i .albastru, vor putea fi folosii ca valori ale atributului class.
Folosirea unor selectori suplimentari astfel definii face posibil de exemplu ca anumite
zone dintr-un paragraf s fie afiate cu un stil diferit de cel obinuit, definit folosind
selectorul p.
Ultimii doi selectori sunt folosii ca valori ai atributului ID. Spre deosebire de
class, o valoare a atributul ID poate aprea ntr-o pagin o singur dat. n CSS
atributul ID se folosete n principal pentru a specifica proprietile blocurilor n care
se divide o pagin. n exemplul dat selectorii col_stg i col_centru sunt folosii n
marcajele destinate divizrii paginii n blocuri, . Practic s-au definit dou blocuri
ale cror proprieti au fost astfel stabilite nct pagina s conin dou coloane.
Rezultat:
Medii i tehnologii educionale interactive
47
Dac un selector .nume definit de programator va fi folosit numai pentru un
tip de marcaj html, la declarare se va scrie marcaj.nume{...}. Exemplu:
p.big{font-size: 2em;}
...
Scriere cu litere mari.
Un grup de reguli poate fi aplicat mai multor selectori. n astfel de cazuri,
naintea grupului de reguli sunt scrii selectorii desprii prin virgule. Exemplu:
Medii i tehnologii educionale interactive
48
p, h1, h2, h3, h4, h5 {font-family: Arial; color: black; }
2.4 Culori
Proprietile CSS pentru definirea culorilor sunt color pentru coninut i
background-color pentru culoarea fundalului.
O culoare este indicat prin nume (pentru culorile obinuite: white, black, red,
yellow, green, blue, maroon, orange, olive, purple, fuchsia, lime, navy, aqua, teal,
silver i gray) sau este definit prin componentele RGB (Red + Green + Blue, rou +
verde + albastru) care o compun. Fiecare dintre componentele culorii poate fi
exprimat printr-un numr ntreg cuprins ntre 0 i 255.
Definirea culorii poate fi realizat folosind codul hexazecimal sau zecimal. n
cazul folosirii codului hexazecimal notaia culorii ncepe cu caracterul '#' i are
formatul #rrggbb. Exemplu: #ff7c0d. n cazul n care cele trei componente ale culorii
sunt exprimate prin perechi de cifre identice se poate folosi o scriere prescurtat.
Exemplu: #ff00aa se poate scrie #f0a.
Pentru a exprima n zecimal codul unei culori se va scrie rgb(rrr, ggg, bbb).
Exemplu: color: rgb(62, 178, 12).
Pentru a obine codul culorii n hexazecimal se poate folosi Inkscape. Astfel
pentru a prelua culoarea unui punct de pe o imagine se selecteaz , se indic
punctul i se citeta codul de pe bara de stare a aplicaiei.
Aplicaia afieaz de asemenea o palet de culori n partea de jos a ferestrei.
Codul hexazecimal al unei culori din aceast palet este afiat automat la plasarea
cursorului mouse-ului peste mostra de culoare afiat.
Medii i tehnologii educionale interactive
49
2.6 Uniti de msur
Unele dintre proprietile elementelor coninute ntr-o pagin web necesit
scrierea unei dimensiuni. Cu excepia valorilor nule, dup dimensiune trebuie scris
unitatea de msur.
U.M. Explicaie
% procent. Ex: p.big {line-height: 200%}
in inch. Ex: h2 {margin: 0.5in;}
cm centimetri. Ex. h2 {margin: 0.5cm;}
mm milimetri
em 1 em este egal cu mrimea normal a fontului. Ex.
Medii i tehnologii educionale interactive
50
h1 {font-size: 2em;} (identic cu font-size:200%)
pt 1pt=1/72in
pc 1pc=12px
px pixeli. Exemplu: p {font-size: 12px}
Exemplu:
p {margin: 0 20px 0 20px}
2.7. Fonturi
n CSS fontul este definit prin denumire, dar, deoarece pe calculatorul pe care
se afieaz pagina web fontul indicat poate lipsi, dup denumirea fontului (fonturilor)
se precizeaz familia din care acesta face parte. Proprietatea futilizat este font-
family.
Fontul Familia
"Times New Roman", Gramond,
Georgia
serif
Arial, Verdana, Helvetica sans-serif
Courier, "Courier New" monospace
Exemplu:
h1 {font-family: verdana,helvetica, sans-serif;} h2 {font-family: "Times New Roman", serif;}
Majoritatea paginilor web folosesc Verdana.
nclinarea caracterelor se stabilete cu ajutorul proprietii font-style, valorile
posibile fiind normal, italic sau oblique.
Exemplu:
Medii i tehnologii educionale interactive
51
h2 { font-family: "Times New Roman", serif; font-style: italic;
}
Folosind proprietatea font-variant se poate impune scrierea cu majuscule mici
(font-variant: small-caps) sau normal (font-variant: normal).
Scrierea bold se poate impune folosind font-weight:. Proprietatea poate avea
valorile bold sau normal.
Dimensiunea caracterelor poate fi impus folosind proprietatea font-size. De
obicei mrimea este definit n pixeli (px) sau procentual (% sau em). Este
recomandat varianta definirii procentuale deoarece n acest caz rmne posibil
mrirea fontului folosind opiunile programului de navigare. Varianta definirii mrimii
caracterelor n uniti absolute (px, in, cm, etc.) se aplic n cazurile n care
modificarea mrimii fontului n momentul afirii ar afecta grav aspectul acesteia. De
exemplu textul plasat deasupra unui buton desenat nu trebuie s poat fi mrit.
Exemplu:
h1 {font-family: arial, verdana, sans-serif; font-size: 150%; font-weight: bold} h2 {font-family: "Times New Roman", serif; font-size: 120%;}
2.8. Formatarea textului
Formatarea textului se realizeaz cu un set de proprieti care permit diverse
tipuri de alinieri, indentri i spaieri.
Indentarea textului se realizeaz folosind proprietatea text-indent. Efectul
indentrii este decalarea poziiei de nceput a primei linii a fiecrui paragraf cu o
mrime impus.
Exemplu:
p { text-indent: 50px; }
Medii i tehnologii educionale interactive
52
Alinierea textului se realizeaz folosind proprietatea text-align. Valorile
posibile ale proprietii sunt: left, right, center sau justify.
Exemplu:
th { text-align: right; }
td { text-align: center; }
p { text-align: justify; }
Sublinierea sau bararea textului se realizeaz folosind proprietatea
text-decoration. avnd valorile posibile none, underline (subliniat), overline (barat),
line-through (tiat).
Exemplu:
h1 { text-decoration: underline; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
Modificarea distanei dintre caractere se realizeaz folosind proprietatea letter-
spacing.
Exemplu:
h1 { letter-spacing: 6px; }
p { letter-spacing: 3px; }
Medii i tehnologii educionale interactive
53
Controlul scrierii cu majuscule se realizeaz folosind proprietatea
text-transform. Valorile posibile sunt:
- capitalize - prima liter va fi majuscul
- uppercase - toate literele vor fi majuscule,
- lowercase - toate literele vor fi mici,
- normal - caracterele vor fi scrise normal.
2.9. Formatarea referinelor
Legturile sunt evideniate n HTML prin sublinierea irului de caractere folosit
ca suport i utilizarea unor culori distincte pentru legturile nevizitate sau vizitate. n
CSS aceste atribute implicite pot fi modificate.
Modificarea culorii, a fontului sau suprimarea sublinierii se realizeaz ca i
pentru textele obinuite.
Exemplu:
a { color: blue; text-decoration:none; }
Pentru a modifica pe rnd proprietile irului folosit pentru o referin se vor
folosi pseudoclasele:
- a:link, pentru legturi nevizitate,
- a:visited, pentru legturi vizitate,
- a:active pentru legturi active sau,
- a:hover. pentru a modifica modul de afiare a irului la plasarea
cursorului mouse-ului deasupra lui.
Exemplu:
Medii i tehnologii educionale interactive
54
a:link { color: #6699CC; } a:visited { color: #660099; }
a:active { background-color: #FFFF00; }
a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }
2.10. Colorarea scrisului i a fundalului
Culoarea folosit la scriere se definete prin proprietatea color. De exemplu
dac titlurile marcate cu trebuie scrise n rou, aceasta se poate indica prin
regula urmtoare:
h1 {color:#ff0000; }
(sau, mai simplu, h1 {color:red; }) Culoarea fundalului se impune prin proprietatea background-color. Modul n
care dispune browserul diferitele blocuri care formeaz o pagin poate fi evideniat
colornd diferit fundalul acestora, ca n exemplul urmtor:
Tabele
html {background-color:#658c96}
body {background-color:#adc0c7}
p,h1 {color: white; background-color:#076363}
Exemplu
Tabelele vor fi folosite doar in cazul in care natura informatiei impune acest lucru.
Exemplu de tabel neformatat:
Medii i tehnologii educionale interactive
55
Produs
Pret
Cantitate disponibila
Pantofi Lux
156
243
Pantofi Carmens
174
189
Medii i tehnologii educionale interactive
56
2.11. Geometria unui bloc n CSS
Informaia cu caracter grafic (text, imagine) coninut ntr-o pagin web este
dispus ntr-o serie de blocuri alturate. Browser-ul genereaz aceste blocuri
automat, la ntlnirea marcajelor care delimiteaz informaia: , ,
..., , , etc.
Arhitectura unui bloc este prezentat n figura urmtoare:
Din schi se observ c blocul este nconjurat de un contur transparent
(margin) avnd rolul de a permite distanarea blocurilor i eventual de un chenar
(border). ntre informaia efectiv coninut i border este o distan definit prin
proprietatea padding. Fundalul este colorat n culoarea definit prin proprietatea
background-color i se extinde pn la border (include deci i zona definit prin
padding).
Geometria implicit a blocurilor depinde de browser. Diferenele de la un
browser la altul nu sunt mari dar pot fi deranjante.
Modul implicit n care Internet Explorer construiete i plaseaz blocurile poate
fi evideniat construind o mic pagin web i impunnd culori diferite pentru fundalul
diferitelor blocuri.
margin (transparent) border padding
coninut
(text, imagine)
bottom
top
left right
Medii i tehnologii educionale interactive
57
Blocuri
html {background-color:yellow}
body {background-color:magenta}
p,h1 {color: white; background-color:blue}
Dispunerea blocurilor
Blocurile de text sunt dispuse unul dupa altul.
Imaginile nu sunt tratate ca blocuri. Ele sunt incluse in paragrafe sau alte tipuri de blocuri (de obicei ,
sau ) si sunt tratate ca
fiind niste caractere de o alta marime, de cele mai multe ori mai mari.
Parametrul 'margin' nu este pastrat pe directie verticala, intre doua paragrafe consecutive
existand un spatiu egal cu maximum dintre valorile parametrilor 'margin' ai celor doua blocuri
alaturate.
Rezultat:
blocul
margin pentru
sau
margin pentru (sus i jos)
Medii i tehnologii educionale interactive
58
Proprietile care pot fi specificate pentru a defini geometria unui bloc sunt:
margin, border, padding, width (limea) i height (nlimea). Pentru margin, border
i padding se pot indica dimensiuni diferite pentru fiecare dintre laturile blocului
folosind sufixele -top, -right, -bottom i left. Exemplu:
h1 {margin-left:120px; margin-right:12px;border:1px; border-color:blue;}
Pentru simplificarea scrierii dimensiunilor, dac toate cele patru valori sunt
identice se poate scrie parametru:valoare. Dac valorile sunt diferite se pot scrie
toate cele patru valori, una dup alta, desprite prin spaiu, ordinea fiind top, right,
bottom, left. Exemplu:
p {margin:12px 0 14px 120px; padding:8px;}
Not: Pentru valori nule dimensiunile pot fi omise.
Dac se impune de exemplu margin:0 pentru body, p i h1 pagina precedent
ar fi afiat astfel:
Medii i tehnologii educionale interactive
59
De altfel frecvent se impune pentru proprietatea margin=0 (implicit
margin este de aproximativ 8px, depinznd de browser).
2.12. ncadrarea blocurilor
Blocurile pot fi ncadrate cu un contur avnd caracteristicile precizate prin
proprietile border-width, border-color i border-style.
border-width permite specificarea grosimii liniei de ncadrare n pixeli sau
printr-una din valorile: thin, medium sau thick.
border-color permite specificarea culorii conturului de ncadrare.
border-style permite precizarea aspectului conturului. valorile posibile sunt
cele din figur.
2px 4px 6px 8px 10px
1px 3px 5px 7px 9px
thin medium thick
Medii i tehnologii educionale interactive
60
Exemplu de definiii de contururi de ncadrare:
h1 { border-width: thick; border-style: dotted; border-color: gold; }
h2 { border-width: 20px; border-style: outset; border-color: red; }
p { border-width: 1px; border-style: dashed; border-color: blue; }
ul { border-width: thin; border-style: solid; border-color: orange; }
Ca i n cazul proprietilor margin i padding, este posibil specificarea unor
caracteristici diferite pentru top, right, bottom i left. Pentru specificarea valorilor
specifice vor fi folosite n acest caz denumirile border-top, border-right, border-bottom
sau border-left, dup caz.
Exemplu:
h1 { border-top-width: thick; border-top-style: solid; border-top-color: red;
border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue;
border-right-width: thick; border-right-style: solid;
Medii i tehnologii educionale interactive
61
border-right-color: green;
border-left-width: thick; border-left-style: solid; border-left-color: orange; }
Observaie: Pentru border, CSS definete ordinea normal de definire a
proprietilor conturului de ncadrare ca fiind border-width -> border-style -> border-
color. Pentru o scriere mai compact se accept i o variant prescurtat de definire:
border: 1px solid blue;
2.13. Parametrii width i height
Standardul W3C permite precizarea mrimii zonei folosite pentru afiarea
informaiei. Modelul definit n standard este cel din figur.
Dac descrierea blocului include valori nenule pentru padding, border i
margin, limea efectiv se calculeaz adunnd parametrului with mrimile
corespunztoare ale celorlalte elemente ale blocului. Exemplu:
Blocuri 2
html {background-color:yellow}
body {background-color:white}
h1 {
color: white;
background-color:#ccc;
margin-left:45px;
margin-right:0;
border-width:1px;
border-style:solid;
Medii i tehnologii educionale interactive
62
border-color:#000;
padding:7px;
width:200px;
height:200px;
}
p {color: yellow; background-color:#a00;}
Dispunerea blocurilor
Blocurile de text sunt dispuse unul dupa altul.
Limea efectiv a blocului referit prin selectorul h1 este:
margin-left:45px
width:200px
padding:7px
border-width:1px;
Medii i tehnologii educionale interactive
63
L = 45 + 1 + 7 + 200 + 7 + 1 = 261px.
Proprietatea overflow permite specificarea modului de tratare a situaiei n
care coninutul unui bloc nu ncape n spaiul alocat. Situaia apare n cazul blocurilor
pentru care s-au specificat att limea ct i nlimea (width i height). Valorile
posibile sunt overflow :scroll sau overflow :hidden. n prima variant, dac se
plaseaz ntr-un bloc mai mult informaie dect permit dimensiunile acestuia vor fi
afiate automat cursoare pentru defilare (scroll).
2.14. Marcajele i
n paginile realizate pn acum coninea un numr de blocuri (definite
prin selectorii p, h1, h2 etc) dispuse unul dup altul, de sus n jos. Selectorul
descrie deci un container care conine celelalte blocuri care formeaz coninutul
paginii.
La rndul su, este coninut n .
Standardul HTML ofer ns programatorilor posibilitatea definirii de containere
suplimentare care vor conine fiecare un ansamblu de blocuri. Pentru definirea
blocurilor avnd rol de container se folosesc marcaje sau . Diferena
dintre cele dou este faptul c este de tip inline, el realiznd o grupare n
interiorul unui bloc, asemenea marcajelor sau .
Pentru o pagin obinuit marcajul va fi folosit de exemplu pentru a
defini blocuri diferite pentru capul paginii, zona de picior i corp. Separarea n blocuri
distincte a zonelor care se repet pe toate paginile saitului este interesant deoarece
de cele mai muilte ori problemele ridicate de descrierea coninutului acestora sunt mai
complicate. n plus, n timp ce pentru capul i piciorul paginii fonturile sunt de regul
de dimensiuni fixe (exprimate n px), pentru coninutul paginii dimensiunile fonturilor
vor fi exprimate n uniti relative (em, %) astfel nct cititorul s poat modifica
mrimea folosind facilitile browser-ului (n Internet Explorer se selecteaz View/Text
Size/ Larger sau Largest).
Medii i tehnologii educionale interactive
64
Exemplu fundamental:
Blocuri DIV
html {background-color:yellow;margin:0; padding:0;}
body {margin:0; padding:0;}
div {margin:0; padding:0;}
p,h1 {color: white; background-color:#000080;
margin:10px; padding:0; font-family:verdana, helvetica, sans-serif;}
p {font-size:80%;}
img {display: block; margin:10px;padding:0;float:left;}
#continut {width:700px; background-color:#008080;
text-align:left;margin:0 auto 0 auto;padding:0;}
#cap {width:700px; height:87px; background-color:#ff8080;}
#cap h1 {font-size: 20px;padding-top:30px;margin:0 10px 0 10px;}
#cap p {font-size: 10px;padding:0;}
#nav {width:700px; height:40px; background-color:#00aa00; }
#nav p {margin:0 10px 0 10px;padding-top:10px; font-size: 10px }
#colstg {width:200px; background-color:#ffffff;float: left;}
#coldr {width:500px; background-color:#aaaaaa; float:left;}
#picior {width:700px; height: 35px; background-color:#ff8080;
clear: both;text-align: center;}
#picior p {font-size:12px;margin:0 10px 0 10px;padding-top:10px;}
Dispunerea blocurilor
Blocurile de text sunt dispuse unul dupa altul.
Navigare. Navigare. Navigare. Navigare. Navigare.
Unu
Doi
Trei
Medii i tehnologii educionale interactive
65
Dispunerea blocurilor
Blocurile de text sunt dispuse unul dupa altul.
Parametrul 'margin' nu este pastrat pe directie verticala, intre doua paragrafe consecutive
existand un spatiu egal cu maximum dintre valorile parametrilor 'margin' ai celor doua blocuri
alaturate.
Copyright, webmaster etc.
Spre deosebire de , folosit la definirea de blocuri, marcajul
permite modificarea proprietilor unei poriuni din textul coninut ntr-un bloc.
Exemplu:
.profit { color:orange; }
Medii i tehnologii educionale interactive
66
.paguba { color:blue; }
Munca in echipa poate creste eficienta fiecaruia. Munca de unul singur e paguboasa.
2.15 Imagini plasate pe fundal
CSS ofer o multitudine de proprieti care pot restriciona modul de
dispunere a unei imagini pe fundalul unui bloc.
Exemplu:
Se dorete includerea unei imagini pe fundalul paginii. Imaginea va fi automat
repetat pn la umplerea spaiului disponibil.
body { background-color: #FFCC66; background-image: url("imagini/sigla.gif"); }
Fiierul care conine imaginea va fi plasat n directorul imagini derivat din
directorul care conine pagina web.
Repetarea imaginii poate fi controlat prin valorile proprietii background-
repeat. Valorile posibile sunt:
Valoare Semnificaie
background-repeat: repeat-x Repetare pe orizontal
background-repeat: repeat-y Repetare pe vertical
Medii i tehnologii educionale interactive
67
background-repeat: no-repeat Fr repetare
Exemplu:
#header { background-color: #FFCC66; background-image: url("imagini/sigla.gif"); background-repeat: no-repeat; }
n cazul n care imaginea dispus pe fundal nu este repetat iar mrimea
blocului difer de mrimea imaginii se va preciza de regul i culoarea fundalului.
Alegerea corect a culorii fundalului presupune de obicei determinarea cu Inkscape a
culorii frontierei imaginii, trecerea de la imagine la zona alturat putnd fi practic
imperceptibil.
Comportamentul imaginii n fereastr la defilarea coninutului acesteia
(scroll) este specificat prin proprietatea background-attachment. Valorile posibile ale
acestei proprieti sunt scroll sau fixed. Prima valoare specific defilarea imaginii de
fundal mpreun cu coninutul paginii n timp ce a doua indic o poziie fix a imaginii
n raport cu fereastra aplicaiei, pagina defilnd pe deasupra acesteia.
Exemplu:
#continut { background-color: #FFCC66; background-image: url("imagini/sigla.gif"); background-repeat: no-repeat; background-attachment: fixed; }
Poziia imaginii n fereastr este indicat folosind proprietatea background-
position. Exist trei moduri de a indica poziia imaginii de fundal:
- prin coordonate (de obicei pixeli):
background-position: 30px 45px;
Medii i tehnologii educionale interactive
68
- prin procente din dimensiunile zonei afiabile:
background-position: 50% 35%;
- in raport cu laturile blocului. Valorile posibile sunt top left, top right, bottom
left, bottom right sau center center.
Exemplu:
#continut { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; }
2.16. Blocuri flotante
n mod normal elementele coninute ntr-o pagin web sunt plasate de
browser unul dup altul, de sus n jos. Exist situaii n care se dorete dispunerea de
la stnga la dreapta sau de la dreapta la stnga i n aceste cazuri se va folosi la
descrierea blocurilor proprietatea float.
Medii i tehnologii educionale interactive
69
Exemplu: efectul proprietii float : left asupra unui bloc:
Blocul declarat flotant va fi cadrat n sensul dat de valoarea proprietii
(float :left sau float :right) iar restul coninutului paginii este aranjat astfel nct s
ocupe spaiul astfel creat.
Exemplul 1.
Se dorete plasarea ntr-un bloc la stnga paginii a unei figuri i apoi scrierea
unui text astfel nct acesta s ncadreze blocul, ca n figura urmtoare.
Medii i tehnologii educionale interactive
70
Blocuri
html {background-color:yellow}
body {background-color:#c83737; margin:0;}
p,h1 {color: white; background-color:#000080; margin:10px; font-family: arial, verdana, sans-serif;}
img.stg{margin-right: 10px; float:left;}
Cafeaua si Java
Java este un limbaj de programare orientat pe obiecte asemanator limbajului C++.
El a fost dezvoltat de firma Sun, prima semnalare a aparitiei sale datnd din 1991.
Conducatorul proiectului, Green James Gosling, este
considerat parintele limbajului Java. Noului limbaj i s-a dat la nceput numele Oak (eng. stejar) dar acesta a
fost revendicat de o alta firma si realizatorii l-au schimbat n Java, aluzie la sursa bauturii favorite a
memrilor echipei - cafeaua.
Exemplul 2.
Pentru evidenierea primului cuvnt al unui capitol se dorete plasarea
primului caracter ca n figura de mai jos.
.stg{
margin-right: 10px;
color: blue;
font-family: arial, verdana, sans-serif;
font-size: 300%;
Medii i tehnologii educionale interactive
71
float:left;
}
p{
color: #008080;
font-family: arial, verdana, sans-serif;
}
When you create an action, you automate a series of steps. The hardest part
about creating a new action is figuring out what functions you want to automate. Thinck about steps thst
you carry out over and whether you could be more productive if you had an action that could do them for
you.
Proprietatea clear permite plasarea unui bloc sub blocurile flotante
anterioare. Valorile posibile sunt clear:left, clear:right sau clear:both. Astfel la
descrierea unui bloc care trebuie dispus sub un numr de blocuri care definesc un
ansamblu de coloane (cazul blocului care conine piciorul paginii) folosind clear avem
garania c noul bloc nu va fi plasat peste unul dintre blocurile flotante anterioare.
Exemplul 3.
Prin folosirea proprietii clear se poate realiza efectul din pagina urmtoare:
Medii i tehnologii educionale interactive
72
div.stg{margin-right: 10px; float:left; }
.gata{ color: #008080; font-family: arial, verdana, sans-serif; clear:both; }
Java este un limbaj de programare orientat pe obiecte asemntor limbajului
C++. El a fost dezvoltat de firma Sun, prima semnalare a aparitiei sale datnd din 1991.
. . .
Exemplul 4.
Pentru scrierea coninutului unei pagini pe trei coloane s-au definit blocurile
col1, col2 i col3 ca n listingul urmtor:
div {
color: #008080; font-family: arial, verdana, sans-serif;
}
.col{
width:31%; padding-right: 15px; float: left;
}
Limbajul Java
Java este un limbaj de . . . (prima coloan)
Medii i tehnologii educionale interactive
73
Java este un limbaj de . . . (a treia coloan)
Validarea paginilor web
Pentru a avea garania corectitudinii coninutului unei pagini web, acesta poate
fi verificat cu ajutorul unei aplicaii dezvoltate de W3C i disponibile online. O metod
uoar de trimitere a paginii spre verificare presupune utilizarea ca browser fie a
aplicaiei Internet Explorer versiunea 8 fie a aplicaiei Mozilla Firefox. n cazul folosirii
aplicaiei Firefox acesteia trebuie s I se adauge extensia Web Developer . Aceast
extensie este destinat dezvoltatorilor de pagini web i ofer un ansamblu de
instrumente foarte utile. Pentru adugarea n Firefox a extensiei Web Developer se
selecteaz n meniul aplicaiei Tools / Add-ons:
Medii i tehnologii educionale interactive
74
n urma instalrii extensiei Web Developer aplicaia va afia o bar cu
instrumente suplimentar.
Pentru validarea codului unei pagini web se deschide pagina n browser i se
selecteaz pe noua bar cu instrumente Tools / Validate Local CSS sau Tools /
Validate Local HTML:
Aplicaia va transmite prin Internet
coninutul foii de stiluri spre o aplicaie
specializat (http://jigsaw.w3.org/css-
validator/validator). Raportul prezentat de
aplicaie va conine erorile depistate i apoi va
afia regulile gsite ca fiind corecte.
n Internet Explorer se va accesa Tools /
Developer Tools i n fereastra afiat se va
accesa Validate / Local CSS sau Local HTML.
Internet Explorer va accesa imediat
saitul http://jigsaw.w3.org/ i n fereastra
afiat se va selecta opiunea By file upload, ca
n figur.
Medii i tehnologii educionale interactive
75
n fereastra afiat se va selecta fiierul de validat i se va apsa butonul
Check.
Medii i tehnologii educionale interactive
76
2.17. Poziionarea blocurilor
n CSS poziionarea a blocurilor se poate realiza folosind coordonate absolute
sau relative. n mod corespunztor, proprietatea position care specific modul de
poziionare a unui bloc poate avea valoarea relative sau absolute.
Distanele care precizeaz poziia unui bloc sunt specificate printr-o pereche
de proprieti din mulimea top, right, bottom sau left.
n cazul poziionrii relative poziia blocului este specificat n raport cu
punctul n care blocul ar fi fost afiat n lipsa proprietii position.
Exemplu:
div.poz1 { position:relative; left: 200px;
Medii i tehnologii educionale interactive
77
bottom: 50px; }
Dei coninutul blocului din exemplu va fi afiat n alt poziie, browserul va
lsa neocupat zona pe care acesta ar ocupa-o n mod normal !
Poziionarea absolut difer fundamental de cea relativ. Astfel, pentru un
bloc poziionat absolut browser-ul nu va rezerva loc n pagin. El trebuie s fie
considerat ca aparinnd unui alt nivel, plasat deasupra ferestrei browserului, deci un
astfel de bloc se poate suprapune peste un alt bloc din pagin. Astfel de blocuri pot fi
folosite pentru a realiza de exemplu meniuri derulante care n stare desfurat
acoper parial coninutul paginii.
Pentru nelegerea poziionrii absolute se consider regula urmtoare:
h1 { position:absolute; top: 100px; left: 200px; }
poziia implicit
bottom: 50
left: 200
Medii i tehnologii educionale interactive
78
Coordonatele indicate (top:100px i left:200px) au ca i punct de referin
colul din stnga-sus al primului bloc poziionat n care noul bloc (h1 n cazul dat) este
coninut sau zona util a ferestrei browserului, ca n imagine, dac un astfel de bloc
nu exist.
n consecin, pentru ca un bloc poziionat absolut s aib ca i punct de
referin un bloc exterior (de obicei blocul care conine ntreaga pagin), definiia
blocului exterior trebuie s conin proprietatea position:
#bloc_ext {
width:800px;
text-align:left;
background-color:#91d38d;
position:relative;
margin:0 auto;
}
Medii i tehnologii educionale interactive
79
O astfel de definire a blocului exterior va determina de exemplu ca un bloc
interior acestuia a crui poziie este definit prin regula: {position: absolute; top:0;
left:0;} s fie poziionat n colul din stnga-sus al blocului exterior i nu n colul
ferestrei browserului.
Excemplu:
Blocuri
html {background-color:yellow}
body {background-color:#c83737;}
* {padding:0; margin:0;}
#bloc_ext {
position:relative;
width:600px;
text-align:left;
background-color:silver;
margin:0 auto;
}
p{color: white; background-color:#000080; margin:15px; font-family: arial, verdana, sans-serif;}
img.stg{margin-right: 10px; float:left;}
.suprapus {position:absolute; top:0; left:0; background-color:teal; margin:25px; color: white;
font-family: arial, verdana, sans-serif;
}
Cafeaua si Java
Java este un limbaj de programare orientat pe obiecte asemanator limbajului C++.
El a fost dezvoltat de firma Sun, prima semnalare a aparitiei sale datnd din 1991.
Conducatorul proiectului, Green James Gosling, este considerat parintele limbajului Java.
Noului limbaj i s-a dat la nceput numele Oak (eng. stejar) dar acesta a fost revendicat de o a
lta firma si realizatorii l-au schimbat n Java, aluzie la sursa bauturii favorite a memrilor
echipei - cafeaua.
Medii i tehnologii educionale interactive
80
Rezultat:
Se observ c blocul este plasat peste primul paragraf. Faptul c
este definit ca avnd margin:15px determin deplasarea n jos a blocului body a crui
frontier top coincide cu frontiera primului paragraf. Aceast deplasare afecteaz
evident i blocul bloc_ext inclus n body. Pentru a evita aceast deplasare primul
paragraf ar trebui s aib ca i body, proprietatea margin:0, deci el trebuie s fie
definit ca aparinnd unei clase aparte avnd aceast caracteristic.
p.primul {margin-top:0;}
...
Java este un limbaj de programare orientat ...
Medii i tehnologii educionale interactive
81
2.18. Suprapunerea blocurilor
Poziionarea absolut a blocurilor permite plasarea acestora oriunde n planul
xoy ataat zonei client a browserului. Dar CSS permite i specificarea poziiei pe axa
Oz (perpendicular pe planul monitorului) i implicit suprapunerea blocurilor.
Un exemplu elementar este reprezentat n figura de mai jos. Crile de joc
afiate sunt disponibile ca imagini individuale, dar trebuie afiate parial suprapuse i
ntr-o ordine precizat. Pentru a poziiona pe axa z un bloc se va folosi proprietatea
z-index a acestuia. Modul de utilizare a acesteia decurge din exemplul considerat.
Medii i tehnologii educionale interactive
82
div.ten_of_diamonds { position: absolute; left: 100px; top: 100px; z-index: 1; }
div.jack_of_diamonds { position: absolute; left: 115px; top: 115px; z-index: 2; }
div.queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; }
div.king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; }
div.ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; }
Proprietatea z-index poate avea i valori negative, situaie n care blocurile
sunt plasate sub planul paginii web. Planul ferestrei browserului are z-index:0.
2.19. Alte proprieti ale blocurilor
Pe lng cele prezentate, CSS ofer i alte proprieti. n continuare vor fi
prezentate dou dintre ele, frecvent folosite de realizatorii de situri web.
Medii i tehnologii educionale interactive
83
Proprietatea opacity permite definirea unui efect de transparen a unui
bloc. Valoarea introdusa pentru aceast proprietate este un numr subunitar,
valoarea nsemnnd 0 - lips transparen, 1 transparen total.
Exemplu :
div.background
{
width: 500px;
height: 250px;
background: url(flori.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
/* pentru Internet Explorer */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p
Medii i tehnologii educionale interactive
84
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
Proprietatea visibility permite definirea unor blocuri al cror coninut este
afiat la producerea unui eveniment. Proprietatea visibility poate lua vlorile visible
sau hidden. ntruct schimbarea valorii proprietii se realizeaz dinamic, folosind o
secven de cod programat n JavaScript, exemplificarea utilizrii acestei proprieti
se va face la sfritul cursului, dup introducerea unor noiuni de programare n
JavaScript.
2.20. Formatarea listelor
CSS pune la dispoziia utilizatorilor o serie de proprieti care permit
modificarea radical a modului de afiare a unei liste. Folosind aceste proprieti
elementele unei liste pot fi uor aranjate sub forma unui meniu folosit la navigarea n
sait.
In HTML listele sunt plasate decalat fa de marginea din stnga a blocului n
care sunt inserate. Deoarece mrimea acestei decalri i modul de realizare (padding
pentru Mozilla, Netscape, Safari sau margin pentru Internet Explorer, Opera), pentru
Medii i tehnologii educionale interactive
85
a evita problemele de plasare a listelor, la specificarea regulilor de plasare a listelor
(selectorul ul) proprietile padding i margin trebuie impuse.
ul {margin: 0; padding: 0;}
Proprietatea list-style-type este folosit pentru a impune tipul de marcator
folosit naintea fiecrui element din list.. Valorile posibile sunt none (suprimare
marcatori), disc, circle sau square pentru liste neordonate () respectiv decimal,
lower-alpha, upper-alpha, lower-roman sau upper-roman pentru liste ordonate
().
Exemple :
Unix
Windows
Linux
ul { list-style-type:disc ;}
ul {list-style-type :circle ;}
ul {list-style-type :square ;}
Unix
Windows
Linux
Medii i tehnologii educionale interactive
86
ol {list-style-type :decimal ;}
ol {list-style-type :lower-alpha ;}
ol {list-style-type :upper-alpha ;}
ol {list-style-type :lower-roman ;}
ol {list-style-type :upper-roman ;}
Proprietatea list-style-image permite nlocuirea marcatorilor standard cu o
imagine.
Exemplu de utilizare:
ul { list-style-image: url("imagini/bulina.jpg");}
Proprietatea display :inline aplicat simultan selectorilor ul i li permite
dispunerea elementelor listei pe orizontal.
ul,li {display: inline ;}
Exemplu:
Se dorete realizarea unei liste n care elementele s fie dispuse orizontal,
fiecare element fiind n acelai timp i referin spre o alt pagin.
Medii i tehnologii educionale interactive
87
Liste
ul {list-style-type :none; margin: 0; padding: 4px 20px 4px 40px; }
ul,li {display: inline;}
ul li a {font-family:arial, verdana, sans-serif; padding: 4