DREAMWEAVER
Dreamweaver este un editor HTML folosit pentru constructia de pagini web. Programul recunoaste fisierele realizare in FireWorks
Optiunea Site Definition permite definirea paginii de site dar si elemente de configurare site si de control fisiere.
Optiunea Remote Info, permite definirea serverului pe care va fi publicata pagina de site. O adresa Web se numeste URL – locator uniform de resurse. O adresa URL are urmatoarea componenta:
- http:// - protocol de comunicatie
- domeniul (ex.artesiasi.ro)
- portul de comunicare (de regula 8080)
- path – calea catre fisierul de lansare a paginii (are extensia index.htm)
Definirea unei pagini web incede cu optiunea File , New, Basic Page , HTML
In interiorul unei pagini Web, fisierele sunt legate cu ancore. Deci o pagina Web poate contina mai multe documente, suprapuse unele peste altele, incat in fata observatorului sa fie pagina cruenta. Legatura dintre aceste documente se face prin ancore (link).
Pentru a crea o ancoră :
1. Plasati punctul de inserţie în locul unde va fi amplasată ancora cu nume;
2. Selectaţi Named Anchor din meniul Insert sau Panoul Invisibles al paletei Object;
3. Denumiţi ancora în caseta de dialog Insert Named Anchor
4. OK.
Pentru a crea o legătură cu noua ancoră cu nume :
1. Selectaţi textul care va constitui legătura cu ancora cu nume;
2. Introduceţi numele ancorei precedat de simbolul # în caseta Link.
Programul permite introducerea de imagini (Insert Image), de tabele, text etc. Fiecare din aceste obiecte, pot fi folosite pentru a crea o noua legatura (ancora) cu alte imagini sau alte documente.
Crearea unui tabel cu linii si coloane, se face folosind optiunea Table din meniu Object
1. Plasaţi punctul de inserţie;
2. Selectaţi pictograma Table din paleta Object sau alegeţi comanda Table din meniul Insert. Va apărea caseta de dialog Insert Table;
3. Acceptaţi valorile prestabilite sau introduceţi propriile valori pentru Rows (rânduri) şi Columns (coloane). De asemenea, în această casetă de dialog puteţi selecta lăţimea tabelului (Width) şi dimensiunea chenarului (Border);
4. OK.
Elementele din tabel pot fi sortate folosind optiunea Sort Table din meniul Commands
Formatul imaginilor recunoscute de program sunt de tip jpg, gif sau png. Exista posibilitatea ca imaginile sa se acopere unele peste altele, procedeu numit imagini derulante folosind urmatorii pasi:( aceasta se transformă într-o altă imagine când cursorul cititorului este aşezat deasupra acesteia).
Pentru a realiza o imagine derulantă :
1. Plasati punctul de inserţie;
2. Din meniul Insert (sau din paleta Object) Rollover Image;
3. Va apărea caseta de dialog Insert Rollover Image. În caseta de sus denumiţi imaginea;
4. Selectaţi atât fişierul imagine original cât şi fişierul imagine derulat, executând clic pe butoanele Browse;
5. Dacă doriti ca imaginea derulantă să fie descărcată în memoria cache a browser-ului cititorului selectaţi caseta de validare Preload Rollover Image;
6. Adăugati o legătură la imaginea derulantă executând clic pe butonul Browse sau tastati adresa URL externă sau ancora cu nume;
7. OK.
Independent de documentale introduse intr-o pagina web, putem defini buttane cu rol de coordonare a paginilor dintr-un site, prin crearea unei bare de navigare:
1. Selectaţi obiectul Navigation Bar din paleta Object (sau din meniul Insert);
2. Iniţial este vizibil un element tip buton, fără nume. Se atribuie elementului numele primului buton sau treceţi la următoarea etapă (butonului îi va fi atribuit acelaşi nume cu al fişierului imagine);
3. Navigaţi pentru a încărca o imagine de tip buton neapăsat, o imagine de tip "mouse deasupra butonului" şi o imagine de tip buton apăsat. De asemenea puteţi introduce o imagine de tip "mouse deasupra butonului apăsat", o imagine derulantă pentru starea "apăsat" a unui buton. Pentru un aspect estetic, toate aceste imagini trebuie să aibă aceeaşi dimensiune.;
4. Introduceţi o hiperlegătură în caseta When Clicked, Go To URL;
5. Selectaţi caseta de validare Preload Images, dacă doriţi ca imaginile să fie pre-încărcată automat, Selectaţi caseta de validare Show "Down Image" Initially dacă doriţi ca butonul să pară apăsat la început;
6. Adăugaţi butoane suplimentare executând clic pe butonul plus şi repetând etapele 2-5. Rearanjaţi butoanele cu ajutorul butoanelor cu săgeţi din partea superioară a casetei de dialog Insert Navigation Bar. Pentru a şterge un buton, executaţi clic pe butonul minus;
7. În partea inferioară a casetei de dialog Insert Navigation Bar, puteţi opta pentru a insera bara de navigare orizontal sau vertical în pagina Web. Selectaţi caseta de validare Use Tables dacă doriţi ca bara de navigare să fie creată într-un tabel;
8. OK.
Procedeul poate fi folosit si pentru crearea unor zone sensibile, numite harti de imagine.(hotspot) Cand mouse-ul trece peste o astfel de zona sensibila, ea se comporta ca un buton si partite agatarea unui alt document .
Procedeul de realizzare a unei harti de imagini este urmatorul:
1. Inseraţi o imagine în pagina dvs. Web. Imaginea trebuie să fie selectată pentru ca instrumentele aferente hărţii de imagine să apară în inspectorul Property;
2. Daţi hărţii un nume în caseta Map Name. Numele trebuie să fie unic în raport cu celelalte nume de hărţi din pagină;
3. Selectaţi unul din instrumentele de desenare din inspectorul Property pentru a desena pata fierbinte;
4. Având selectată o pată fierbinte recent desenată, tastaţi o adresă URL în caseta Link sau executaţi clic pe pictograma în formă de dosar pentru a naviga spre o pagină Web locală. Puteţi lega pata fierbinte la o ancoră cu nume, introducând simbolul diez, urmat de numele ancorei;
5. Introduceţi text alternativ în caseta Alt text;
6. Selectaţi o fereastră ţintă din meniul pop-up Target al inspectorului Property;
7. Repetaţi etapele 3-6 pentru a crea toate petele fierbinţi din harta de imagine.
Imaginile introduse intr-o pagina Web pot si insotite de sunete , care se pot introduce folosind optiunea Plugin din meniul Object
5. Poziţionaţi punctul de inserţie;
6. Selectaţi obiectul Plugin din paleta Object. Va apărea caseta de dialog Select File. Navigati şi selectaţi un fişier de sunet. Executaţi clic pe Select;
7. Salvaţi pagina.
Parametri de control ai sunetului sunt:
- loop – numarul de repetari
- autostart (true / false)
- hidden (true / false)
- volume (0-100)
marți, 15 decembrie 2009
luni, 9 noiembrie 2009
S1/C12 Cod HTML (Pedagogie si Teatru)
Tehnologia HTML
Pentru a putea construi o pagina web trebuie indeplinite urmatoarele conditii:
• sa existe un nume domeniu prin care suntem accesati din Internet (de exemplu: www.arteiasi.ro) Numele domeniului se cumpara de la RNC si are extensia .ro Pentru domenii internationale se folosesc nume domenii cu extensia *.com,*.net etc.
• sa existe un server propriu cu adresa IP reala pe care sa poate fi depusa pagina web (Web Hosting) in tehnologia Linux (Apache server, PHP si Mysql), Windows server (Php, Mysql), sau Unix.
• sa existe site-ul propriu-zis format in principal din fisiere de tip html si imagini
Pagina de site se vede in internet prin intermediul unui program care se numeste browser (de exemplu Internet Explorer, Mozilla, Firefox, Opera)
Numele de domenii sunt publice, contituite in servere de nume DNS - Domain Name Server si permit conversia numelui de domeniu in adresa IP de identificare a calculatorului
HTML – notiuni de baza
HTML este un limbaj de descriere a unei pagini web. Textul pentru pagina web este incadrat intr-un numar de etichete pereche ... si are urmatoarea structura:
/* [html>
/* [head>
/* [title>
Titlul paginii
/* [/title>
/* [META NAME="nume" CONTENT="continut">
Ex.1 Link catre un document CSS
/* [link rel="stylesheet" type="text/css" href="fisier_css.css">
/* [/head>
/* [body>
.. continut pagina
/* [/body>
/* [/html>
Cod CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de exemplu formatare text, background sau aranjare in pagina, etc.), care insemna o reducere a codului paginii web, deci un acces mai rapid. Comenzile CSS sunt organizate pe 3 nivele:
- comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa:
/* [eticheta style="codul CSS dorit">
...textul sau obiectul asupra caruia este aplicat codul CSS...
/* [/eticheta>
- comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de etichete [head] si [/head] conform sintaxei:
/* [style type="text/css">
/*
/* [/style>
- comenzile de nivel 3, sau extern, care contin fisiere cu comenzi CSS, de tip *.css
Exemplu
BODY {
background-color: Navy;
color: White;
font-family: Arial, sans-serif;
}
H2 {
border-bottom: thin solid aqua;
}
H2.emphasis {
font-style: italic;
}
.keyword {
font-weight: bold;
}
Cod HTML
Un document HTML este delimitat de eticheta [html[ ... [/html[ si este format din doua zone:
/* [html>
/* [head>
/*Antet
/* [title> Document HTML [/title>
/* Informatii suplimentare
/* [META NAME=”popescu”, CONTENT=”pagina”>
/* [/head>
-corpul
/* [body bgcolor=green>
/* [font color=black size =12 face=Arial> culoare negru litera [/font>
/* [b> text [/b>
/* /* paragraf */
/* [p align=center> paragraf [/p>
/* titlul document */
/* [h1> titlul [/h1>
/* lista elemente */
/* [ul>
/* [li> catalog
/* [li> revista
/* [/ul>
/* inserare lageturi (link) catre alta pagina */
/* [a href=http://www.arteiasi.ro > text din alta pagina [/a>
/* inserare imagine */
/* [img src=”poza.gif” height=75 width=40 [/img>
/* [/body>
/* [/html>
1. Declararea imaginii care apare in pagina web se face cu sintaxa HTML:
Proprietatile unei imagini sunt
Border - poate fi doar citita si este latimea marginii din jurul imaginii specificata în pixeli
Alt - specifica textul care va fi afisat in locul imaginii(daca nu poate fi vizualizata de browser)
Align - unde sa fie plasata imaginea
Complete - poate fi doar citita si este o valoare booleana care permite sa stim daca imaginea a fost descarcata complet.
Height - inaltimea in pixeli a imaginii
Hspace - se refera la spatiul din dreapta si stanga imaginii (in pixeli)
Lowsrc - specifica un URL al unei imagini ce va fi afisata la o rezolutie scazuta
Name - se foloseste pentru a da nume unei imagini
Src - specifica URL-ul (adresa si numele) imaginii
usemap - eticheta map
Vspace - spatiul dintre partea de sus si de jos a imaginii
Width - latimea in pixeli a imaginii
Elemente HTML
1. Structura documentului HTML
Un document (fisier) HTML este alcatuit din mai multe elemente si atributele lor. Elementele principale sunt [head> ….[/head> si [body> … [/body>
Exemplu:
/* [html>
/* [head>
/* [title>Titlu Documentului[/title>
/* [/head>
/* [body>
Continutul paginii
/* [/body>
/*[/html>
2. Elemente de structura generala
/*[HTML>
/* [HEAD> Acesta are si el mai multe sub-elemente:
/* [TITLE> Cuprinde titlul documentului, [/TITLE>
/* [BASE> Cuprinde locaţia documentului in forma URL [/BASE>
/* [LINK> Cuprinde o legatura cu alte obiecte de pe WEB [/LINK>
/* [META> Cuprinde informaţii despre tastatura , cuvinte cheie etc.[/META>
/* [SCRIPT> Conţine programe in limbaj JavaScript [/SCRIPT>
/* [STYLE> Cu informaţii despre stilul de scriere a textului [/STYLE>
/* [/HEAD>
/* [BODY> continutul documentului
.. descrierea paginii
/* [/BODY>
/* [/HTML>
3. Structura elementului BODY
Exista editoare HTML Macromedia Dreamweaver, FrontPage, care scriu direct cod HTML
a) Cod HTML pentru culoarea sau imaginea din fondul paginii, textul si culoarea link-urilor. Pentru culoarea de fond (background) se foloseste atributul BGCOLOR
Exemplu
- culoare de background
/* [body bgcolor="#0000ff">[/body>
- culoarea textului este data de atributul text
/* [body bgcolor="#0000ff" text="#ff0000">[/body>
b) Cod HTML pentru link
Link-uri (LINK, VLINK si ALINK)
Aceste atribute controleaza culoarea link-ului in diferite stari
1. LINK - culoarea initiala a link-ului. Standard este albastru
2. VLINK - culoarea unui link vizitat. Standard este purpuriu.
3. ALINK - culoarea link-ului in momentul activarii. Standard este rosu.
Culori posibile
Nume Valoare RGB
Black #000000
Alb #ffffff
Exemplu
/* [body bgcolor="#ffffff" text="#ff0000" link="#0000ff" vlink="#ff00ff" alink="#ffff00">[/body>
O pagina cu fondul alb, textul rosu, link-urile albastre, link-urile vizitate vor avea culoarea roz iar culoarea link-urilor in momentul activarii va fi galben.
c) Cod HTML pentru imaginea ca fond pentru pagina (background)
[body background="imagine.gif" bgcolor="#ffffff">[/body>
d) Titluri [Hx> ... [/Hx>, unde x=1,2,3,4,5,6
Exemplu
/* [html>
/* [head>
/* [title>Titlu documentului[/title>
/* [/head>
/* [body>
/* [h1>Heading 1[/h1>
/* [h2>Heading 2[/h2>
/* [/body>
/* [/html>
e). Paragraf [p> ... [/p>
Exemplu:
/* [html>
/* [head>
/* [title>Titlu [/title>
/* [/head>
/* [body>
/* [p>Paragraf 1[/p>
/* [p>Paragraf 2[/p>
/* [/body>
/* [/html>
f) Un nou rand [br>
Tag-ul
permite sa decizi unde textul va incepe un nou rând, astfel se forteaza începerea unui nou rând.Nu are [/br>
Exemplu
/* [html>
/* [head>
/* [title>Titlu documentului[/title>
/* [/head>
/* [body>
/* [h1>Heading 1[/h1>
/* [p>Paragraf 1[br>
Linie 2
Linie 3
...
/* [p>Paragraf 2[/p>
/* [/body>
/* [/html>
g) Linie orizontala
Afiseaza o linie orizontala si nu foloseste
Elementul
foloseste urmatoarele atribute:
o - SIZE = latimea liniei, in pixeli (standard este 2)
o - WIDTH = lungimea liniei, in pixeli sau procente din lungimea afisarii paginii (standard 100%)
o - NOSHADE = afiseaza linia fara a avea un aspect 3D
o - ALIGN = aliniaza linia (Left, Center, Right), adica Stanga, Centru sau Dreapta paginii ( Standard centru)
o - COLOR = seteaza culoarea liniei
h) Formatul textului
HTML contine mai multe elemente, tag-uri si atribute, pentru afisarea textului in mai multe formate cu aspecte grafice diferite.
...
Marimea textului poate fi modificata cu elementul FONT si atributul SIZE. Atributul SIZE
poate lua valorile numerice de la 1 la 7 si pe langa acestea poate folosi, ca valoare relativa, semnele "+" sau "-". Textul normal (daca nu este specificat acest atribut) are valoarea 3.
Exemplu :
/* [font size="+2">Mare[/font>
Tipul fontului poate fi modificat cu elementul FONT si atributul FACE.
Exemplu :
/* font Arial Black
Culoarea textului poate fi modificata cu elementul FONT si atributul COLOR.
Exemplu :
/* [font color="#00dd00"> culoarea [/font>
Bold (ingrosat) [b> ... [/b>
Italic (inclinat) [i> ... [/i>
Underline (subliniat) [u> ... [/u>
Exemplu:
/* [b> Bold [/b>
/* [i> Italic [/i>
/* [u> Underline [/u>
Mai jos puteti vedea câteva exemple de coduri si modul lor de afisare in browser.
/* [html>
/* [head>
/* [title>titlu documentului[/title>
/* [/head>
/* [body>
/* [p>[font size="+1">O singura marire[/font>- normal -
/* [font size="-1">O singura micsorare[/font>
/* [b>Bold[/b>- [i> Italic [/i> - [u> Subliniat [/u> -
/* [font color="#ff0000"> Colorat [/font>
/* [em>Accentut[/em> - [strong> Strong [/strong> -
/* [tt>Tele type[/tt>[br>
/* [cite> Citatie [/cite>[/p>
/* [/body>
/* [/html>
/* [div align="valoare"> ... [/div> Poate conţine cele mai multe elemente. Tot ce este poziţionat cu elementul DIV poate fi aliniat oriunde-n pagina, indiferent daca in acel loc se afla si alt ceva (Imagine, Text, …).
/* [center> ... [/center> Va centra elementele
/* [strike> Text taiat [/strike>
/* [ Prezinta textul intr-un font mare [/big>
/* [ Prezinta textul intr-un font mic [/small>
/* [sub> Afisaza textul in pozitia subscript [/sub>
/* [sup> Aseaza textul in pozitia superscript [/sup>
/* [dfn> Defineste exemplu de termen inchis [/dfn>
/* [code> Folosit pentru extragerea unui cod de program [/code>
/* [samp> Folosit pentru simple productii de programe, scripturi , etc. [/samp>
/* [kbd> Folosit pentru text care va fi scris de utilizator [/kbd>
/* [var> Folosit pentru variabile sau argumente de comenzi [/var>
/* [q> ... [/q> - Folosit pentru citate scurte.
/*
/* ... [/address> - Cu acest element se specifica informatii cum ar fi autorul documentului si detalii pentru contact.
i) listelor neordonate [ul>
/* [li> element din lista [/li>
/* [/ul>
k) liste ordonate [ol>.
/* [li> element din lista [/li>
[/ol>
l)Adaugare Imagini
[img src=”nume.jpg” [/img>
Unde:
src - Valoarea acestui atribut determina locatia fisierului care contine imaginea.
alt - La acest atribut se scrie textul care va aparea daca imaginea nu e afisata (de unele browsere) sau cand utilizatorul va pozitiona, in browser, mouse-ul peste imagine.
align - Acest atribut permite asezarea imagini in locuri diferite pe pagina. Pot fi folosite urmatoarele optiuni: Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle , Baseline , ABSBottom
width - Valoarea acestui atribut reprezinta lungimea imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu lungimea originala.
height - Valoarea acestui atribut reprezinta inaltimea (latimea) imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu inaltimea originala.
border - Prin adaugarea acestui atribut imaginea va aparea înconjurata de un chenar, valoarea acestui atribut reprezinta grosimea chenarului, in pixeli.
hspace - Acest atribut este pentru spatiu orizontal pe ambele parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel, in pârtile orizontale ale imaginii.
vspace - Acest atribut este pentru spatiu vertical pe ambele parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel, in pârtile verticale ale imaginii.
Exemplu
/* [html>
/* [head>
/* [title>titlu documentului[/title>
/* [/head>
/* [body>
/* [img src="imagine.jpg" alt="puteti adauga orice text" align="top" width="100" height="120" border="4" hspace="10" vspace="7">
/* [/body>
/* [/html>
m) Crearea de link-uri
Link-urile (links) sunt elemente HTML cu ajutorul carora putem deschide alte pagini, sari de la un document la altul sau la alt site. Sunt foarte importante in crearea de pagini web.
/* Nume
- a este elementul specific pentru crearea link-urilor
- href este atributul care marcheaza indicarea adresei link-ului
- url este adresa link-ului (a paginii care va fi deschisa). De exemplu (http://www.marplo.net)
- title este atributul prin care se da un titlu link-ului (un text ascuns, care apare numai cand este pozitionat mouse-ul deasupra link-ului)
- Titlu link este textul ascuns care apare cand este pozitionat mouse-ul deasupra link-ului
- Nume este textul care va aparea in browser si pe care trebuie dat click cu mouse-ul. In loc de acest text se poate folosi si o imagine, astfel "Nume" va fi inlocuit cu
/* [img src="nume_imagine.extensie">
m.1) Link-uri externe - (sunt cele mai utilizate), care sunt si ele de doua feluri:
m.1.a) Link-uri externe câtre pagini ale aceluiasi site. Pentru acestea URL-ul poate sa nu includa si domeniul site-ului, cum ar fi "http://www.nume.com", ci se poate folosi doar cale in directoare, numele si extensia documentului la care se face saltul.
- daca documentul tinta se afla in acelasi director cu fisierul in care se scrie link-ul, codul va fi scris asa:
[a href="nume_fisier.extensie" title="Titlu link">Nume[/a>
- daca documentul tinta se afla intr-un director anterior celui in care se afla fisierul in care se scrie link-ul, codul va fi scris asa:
/* [a href="../nume_fisier.extensie" title="Titlu link">Nume[/a>
- daca documentul tinta se afla intr-un director din cel care se afla fisierul in care se scrie link-ul, codul va fi scris asa:
/* Nume
m.1.b) Link-uri externe câtre alte site-uri. Aici, adresa URL din link trebuie sa contina si domeniul (numele site-ului) paginii tinta, codul HTML se va scrie, de exemplu, asa:
/* Nume
m.2) Link-uri interne - sunt link-uri câtre alte texte din aceeasi pagina. Se folosesc când pagina respectiva este lunga si e nevoie sa se sara spre anumite texte din pagina.
- Pentru creare de link-uri interne trebuie urmati urmatorii pasi:
1. Se scrie urmatorul cod la textul tinta, care marcheaza locatia unde se va face saltul si se afla in aceeasi pagina cu linkul
/* Textul tinta
atributul "name" indica tinta pentru link, e un fel de semn care indica locatia.
"cuvant" poate fi orice cuvânt, trebuie sa fie unic pentru fiecare link.
"Textul tinta" este textul unde se face saltul.
2. In locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face saltul câtre textul ales), se scrie urmatorul cod:
/* Nume
Link-urile interne si externe pot fi combinate. Astfel putem face saltul câtre un anumit text aflat intr-o alta pagina. In pagina respectiva se scrie codul de la pasul 1, la textul ales pentru tinta link-ului, iar in pagina in care va fi link-ul se scrie:
/* Nume
r) Harti de imagini
Hartile de imagini sunt parti din aceeasi imagine care este "impartita" in mai multe zone, apoi in functie de zona pe care se executa click, browserul poate afisea o alta pagina.
Pentru formarea unei harti de imagini, se adauga in interiorul tag-ului "![]()
" atributul "usemap" a carui valoare reprezinta numele hartii, apoi se incepe formarea hartii prin elementul:
/*
- unde pt. "nume_harta" a atributului "name" se foloseste acelasi cuvant adaugat la "usemap"
in cadrul acestuia se adauga elemente
- acestea definesc zonele hartii imaginii si forma acestora (prin valorile atributelor),
- numarul de elemente "AREA" reprezinta numarul de suprafete (cu link-uri specifice) in care este "impartita" imaginea.
In urmatorul exemplu puteti vedea forma generala a creari unei "harti de imagini" (cu 2 cadre), URL poate fi orice adresa de site sau pagina a site-ului curent:
/* [img src="poza.jpg" usemap="#map1">
/* [map name="map1">
/* [area shape="rect" coords="9, 120, 56, 149" href="url">
/* [area shape="rect" coords="100, 200, 156, 249" href="url">
/* [/map>
Pentru a putea construi o pagina web trebuie indeplinite urmatoarele conditii:
• sa existe un nume domeniu prin care suntem accesati din Internet (de exemplu: www.arteiasi.ro) Numele domeniului se cumpara de la RNC si are extensia .ro Pentru domenii internationale se folosesc nume domenii cu extensia *.com,*.net etc.
• sa existe un server propriu cu adresa IP reala pe care sa poate fi depusa pagina web (Web Hosting) in tehnologia Linux (Apache server, PHP si Mysql), Windows server (Php, Mysql), sau Unix.
• sa existe site-ul propriu-zis format in principal din fisiere de tip html si imagini
Pagina de site se vede in internet prin intermediul unui program care se numeste browser (de exemplu Internet Explorer, Mozilla, Firefox, Opera)
Numele de domenii sunt publice, contituite in servere de nume DNS - Domain Name Server si permit conversia numelui de domeniu in adresa IP de identificare a calculatorului
HTML – notiuni de baza
HTML este un limbaj de descriere a unei pagini web. Textul pentru pagina web este incadrat intr-un numar de etichete pereche
/* [html>
/* [head>
/* [title>
Titlul paginii
/* [/title>
/* [META NAME="nume" CONTENT="continut">
Ex.1 Link catre un document CSS
/* [link rel="stylesheet" type="text/css" href="fisier_css.css">
/* [/head>
/* [body>
.. continut pagina
/* [/body>
/* [/html>
Cod CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de exemplu formatare text, background sau aranjare in pagina, etc.), care insemna o reducere a codului paginii web, deci un acces mai rapid. Comenzile CSS sunt organizate pe 3 nivele:
- comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa:
/* [eticheta style="codul CSS dorit">
...textul sau obiectul asupra caruia este aplicat codul CSS...
/* [/eticheta>
- comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de etichete [head] si [/head] conform sintaxei:
/* [style type="text/css">
/*
/* [/style>
- comenzile de nivel 3, sau extern, care contin fisiere cu comenzi CSS, de tip *.css
Exemplu
BODY {
background-color: Navy;
color: White;
font-family: Arial, sans-serif;
}
H2 {
border-bottom: thin solid aqua;
}
H2.emphasis {
font-style: italic;
}
.keyword {
font-weight: bold;
}
Cod HTML
Un document HTML este delimitat de eticheta [html[ ... [/html[ si este format din doua zone:
/* [html>
/* [head>
/*Antet
/* [title> Document HTML [/title>
/* Informatii suplimentare
/* [META NAME=”popescu”, CONTENT=”pagina”>
/* [/head>
-corpul
/* [body bgcolor=green>
/* [font color=black size =12 face=Arial> culoare negru litera [/font>
/* [b> text [/b>
/* /* paragraf */
/* [p align=center> paragraf [/p>
/* titlul document */
/* [h1> titlul [/h1>
/* lista elemente */
/* [ul>
/* [li> catalog
/* [li> revista
/* [/ul>
/* inserare lageturi (link) catre alta pagina */
/* [a href=http://www.arteiasi.ro > text din alta pagina [/a>
/* inserare imagine */
/* [img src=”poza.gif” height=75 width=40 [/img>
/* [/body>
/* [/html>
1. Declararea imaginii care apare in pagina web se face cu sintaxa HTML:
Proprietatile unei imagini sunt
Border - poate fi doar citita si este latimea marginii din jurul imaginii specificata în pixeli
Alt - specifica textul care va fi afisat in locul imaginii(daca nu poate fi vizualizata de browser)
Align - unde sa fie plasata imaginea
Complete - poate fi doar citita si este o valoare booleana care permite sa stim daca imaginea a fost descarcata complet.
Height - inaltimea in pixeli a imaginii
Hspace - se refera la spatiul din dreapta si stanga imaginii (in pixeli)
Lowsrc - specifica un URL al unei imagini ce va fi afisata la o rezolutie scazuta
Name - se foloseste pentru a da nume unei imagini
Src - specifica URL-ul (adresa si numele) imaginii
usemap - eticheta map
Vspace - spatiul dintre partea de sus si de jos a imaginii
Width - latimea in pixeli a imaginii
Elemente HTML
1. Structura documentului HTML
Un document (fisier) HTML este alcatuit din mai multe elemente si atributele lor. Elementele principale sunt [head> ….[/head> si [body> … [/body>
Exemplu:
/* [html>
/* [head>
/* [title>Titlu Documentului[/title>
/* [/head>
/* [body>
Continutul paginii
/* [/body>
/*[/html>
2. Elemente de structura generala
/*[HTML>
/* [HEAD> Acesta are si el mai multe sub-elemente:
/* [TITLE> Cuprinde titlul documentului, [/TITLE>
/* [BASE> Cuprinde locaţia documentului in forma URL [/BASE>
/* [LINK> Cuprinde o legatura cu alte obiecte de pe WEB [/LINK>
/* [META> Cuprinde informaţii despre tastatura , cuvinte cheie etc.[/META>
/* [SCRIPT> Conţine programe in limbaj JavaScript [/SCRIPT>
/* [STYLE> Cu informaţii despre stilul de scriere a textului [/STYLE>
/* [/HEAD>
/* [BODY> continutul documentului
.. descrierea paginii
/* [/BODY>
/* [/HTML>
3. Structura elementului BODY
Exista editoare HTML Macromedia Dreamweaver, FrontPage, care scriu direct cod HTML
a) Cod HTML pentru culoarea sau imaginea din fondul paginii, textul si culoarea link-urilor. Pentru culoarea de fond (background) se foloseste atributul BGCOLOR
Exemplu
- culoare de background
/* [body bgcolor="#0000ff">[/body>
- culoarea textului este data de atributul text
/* [body bgcolor="#0000ff" text="#ff0000">[/body>
b) Cod HTML pentru link
Link-uri (LINK, VLINK si ALINK)
Aceste atribute controleaza culoarea link-ului in diferite stari
1. LINK - culoarea initiala a link-ului. Standard este albastru
2. VLINK - culoarea unui link vizitat. Standard este purpuriu.
3. ALINK - culoarea link-ului in momentul activarii. Standard este rosu.
Culori posibile
Nume Valoare RGB
Black #000000
Alb #ffffff
Exemplu
/* [body bgcolor="#ffffff" text="#ff0000" link="#0000ff" vlink="#ff00ff" alink="#ffff00">[/body>
O pagina cu fondul alb, textul rosu, link-urile albastre, link-urile vizitate vor avea culoarea roz iar culoarea link-urilor in momentul activarii va fi galben.
c) Cod HTML pentru imaginea ca fond pentru pagina (background)
[body background="imagine.gif" bgcolor="#ffffff">[/body>
d) Titluri [Hx> ... [/Hx>, unde x=1,2,3,4,5,6
Exemplu
/* [html>
/* [head>
/* [title>Titlu documentului[/title>
/* [/head>
/* [body>
/* [h1>Heading 1[/h1>
/* [h2>Heading 2[/h2>
/* [/body>
/* [/html>
e). Paragraf [p> ... [/p>
Exemplu:
/* [html>
/* [head>
/* [title>Titlu [/title>
/* [/head>
/* [body>
/* [p>Paragraf 1[/p>
/* [p>Paragraf 2[/p>
/* [/body>
/* [/html>
f) Un nou rand [br>
Tag-ul
permite sa decizi unde textul va incepe un nou rând, astfel se forteaza începerea unui nou rând.Nu are [/br>
Exemplu
/* [html>
/* [head>
/* [title>Titlu documentului[/title>
/* [/head>
/* [body>
/* [h1>Heading 1[/h1>
/* [p>Paragraf 1[br>
Linie 2
Linie 3
...
/* [p>Paragraf 2[/p>
/* [/body>
/* [/html>
g) Linie orizontala
Afiseaza o linie orizontala si nu foloseste
Elementul
foloseste urmatoarele atribute:
o - SIZE = latimea liniei, in pixeli (standard este 2)
o - WIDTH = lungimea liniei, in pixeli sau procente din lungimea afisarii paginii (standard 100%)
o - NOSHADE = afiseaza linia fara a avea un aspect 3D
o - ALIGN = aliniaza linia (Left, Center, Right), adica Stanga, Centru sau Dreapta paginii ( Standard centru)
o - COLOR = seteaza culoarea liniei
h) Formatul textului
HTML contine mai multe elemente, tag-uri si atribute, pentru afisarea textului in mai multe formate cu aspecte grafice diferite.
...
Marimea textului poate fi modificata cu elementul FONT si atributul SIZE. Atributul SIZE
poate lua valorile numerice de la 1 la 7 si pe langa acestea poate folosi, ca valoare relativa, semnele "+" sau "-". Textul normal (daca nu este specificat acest atribut) are valoarea 3.
Exemplu :
/* [font size="+2">Mare[/font>
Tipul fontului poate fi modificat cu elementul FONT si atributul FACE.
Exemplu :
/* font Arial Black
Culoarea textului poate fi modificata cu elementul FONT si atributul COLOR.
Exemplu :
/* [font color="#00dd00"> culoarea [/font>
Bold (ingrosat) [b> ... [/b>
Italic (inclinat) [i> ... [/i>
Underline (subliniat) [u> ... [/u>
Exemplu:
/* [b> Bold [/b>
/* [i> Italic [/i>
/* [u> Underline [/u>
Mai jos puteti vedea câteva exemple de coduri si modul lor de afisare in browser.
/* [html>
/* [head>
/* [title>titlu documentului[/title>
/* [/head>
/* [body>
/* [p>[font size="+1">O singura marire[/font>- normal -
/* [font size="-1">O singura micsorare[/font>
/* [b>Bold[/b>- [i> Italic [/i> - [u> Subliniat [/u> -
/* [font color="#ff0000"> Colorat [/font>
/* [em>Accentut[/em> - [strong> Strong [/strong> -
/* [tt>Tele type[/tt>[br>
/* [cite> Citatie [/cite>[/p>
/* [/body>
/* [/html>
/* [div align="valoare"> ... [/div> Poate conţine cele mai multe elemente. Tot ce este poziţionat cu elementul DIV poate fi aliniat oriunde-n pagina, indiferent daca in acel loc se afla si alt ceva (Imagine, Text, …).
/* [center> ... [/center> Va centra elementele
/* [strike> Text taiat [/strike>
/* [ Prezinta textul intr-un font mare [/big>
/* [ Prezinta textul intr-un font mic [/small>
/* [sub> Afisaza textul in pozitia subscript [/sub>
/* [sup> Aseaza textul in pozitia superscript [/sup>
/* [dfn> Defineste exemplu de termen inchis [/dfn>
/* [code> Folosit pentru extragerea unui cod de program [/code>
/* [samp> Folosit pentru simple productii de programe, scripturi , etc. [/samp>
/* [kbd> Folosit pentru text care va fi scris de utilizator [/kbd>
/* [var> Folosit pentru variabile sau argumente de comenzi [/var>
/* [q> ... [/q> - Folosit pentru citate scurte.
/*
...- Folosit pentru incadrarea de citate mai lungi, creaza spatiu pentru text.
/* ... [/address> - Cu acest element se specifica informatii cum ar fi autorul documentului si detalii pentru contact.
i) listelor neordonate [ul>
/* [li> element din lista [/li>
/* [/ul>
k) liste ordonate [ol>.
/* [li> element din lista [/li>
[/ol>
l)Adaugare Imagini
[img src=”nume.jpg” [/img>
Unde:
src - Valoarea acestui atribut determina locatia fisierului care contine imaginea.
alt - La acest atribut se scrie textul care va aparea daca imaginea nu e afisata (de unele browsere) sau cand utilizatorul va pozitiona, in browser, mouse-ul peste imagine.
align - Acest atribut permite asezarea imagini in locuri diferite pe pagina. Pot fi folosite urmatoarele optiuni: Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle , Baseline , ABSBottom
width - Valoarea acestui atribut reprezinta lungimea imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu lungimea originala.
height - Valoarea acestui atribut reprezinta inaltimea (latimea) imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu inaltimea originala.
border - Prin adaugarea acestui atribut imaginea va aparea înconjurata de un chenar, valoarea acestui atribut reprezinta grosimea chenarului, in pixeli.
hspace - Acest atribut este pentru spatiu orizontal pe ambele parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel, in pârtile orizontale ale imaginii.
vspace - Acest atribut este pentru spatiu vertical pe ambele parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel, in pârtile verticale ale imaginii.
Exemplu
/* [html>
/* [head>
/* [title>titlu documentului[/title>
/* [/head>
/* [body>
/* [img src="imagine.jpg" alt="puteti adauga orice text" align="top" width="100" height="120" border="4" hspace="10" vspace="7">
/* [/body>
/* [/html>
m) Crearea de link-uri
Link-urile (links) sunt elemente HTML cu ajutorul carora putem deschide alte pagini, sari de la un document la altul sau la alt site. Sunt foarte importante in crearea de pagini web.
/* Nume
- a este elementul specific pentru crearea link-urilor
- href este atributul care marcheaza indicarea adresei link-ului
- url este adresa link-ului (a paginii care va fi deschisa). De exemplu (http://www.marplo.net)
- title este atributul prin care se da un titlu link-ului (un text ascuns, care apare numai cand este pozitionat mouse-ul deasupra link-ului)
- Titlu link este textul ascuns care apare cand este pozitionat mouse-ul deasupra link-ului
- Nume este textul care va aparea in browser si pe care trebuie dat click cu mouse-ul. In loc de acest text se poate folosi si o imagine, astfel "Nume" va fi inlocuit cu
/* [img src="nume_imagine.extensie">
m.1) Link-uri externe - (sunt cele mai utilizate), care sunt si ele de doua feluri:
m.1.a) Link-uri externe câtre pagini ale aceluiasi site. Pentru acestea URL-ul poate sa nu includa si domeniul site-ului, cum ar fi "http://www.nume.com", ci se poate folosi doar cale in directoare, numele si extensia documentului la care se face saltul.
- daca documentul tinta se afla in acelasi director cu fisierul in care se scrie link-ul, codul va fi scris asa:
[a href="nume_fisier.extensie" title="Titlu link">Nume[/a>
- daca documentul tinta se afla intr-un director anterior celui in care se afla fisierul in care se scrie link-ul, codul va fi scris asa:
/* [a href="../nume_fisier.extensie" title="Titlu link">Nume[/a>
- daca documentul tinta se afla intr-un director din cel care se afla fisierul in care se scrie link-ul, codul va fi scris asa:
/* Nume
m.1.b) Link-uri externe câtre alte site-uri. Aici, adresa URL din link trebuie sa contina si domeniul (numele site-ului) paginii tinta, codul HTML se va scrie, de exemplu, asa:
/* Nume
m.2) Link-uri interne - sunt link-uri câtre alte texte din aceeasi pagina. Se folosesc când pagina respectiva este lunga si e nevoie sa se sara spre anumite texte din pagina.
- Pentru creare de link-uri interne trebuie urmati urmatorii pasi:
1. Se scrie urmatorul cod la textul tinta, care marcheaza locatia unde se va face saltul si se afla in aceeasi pagina cu linkul
/* Textul tinta
atributul "name" indica tinta pentru link, e un fel de semn care indica locatia.
"cuvant" poate fi orice cuvânt, trebuie sa fie unic pentru fiecare link.
"Textul tinta" este textul unde se face saltul.
2. In locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face saltul câtre textul ales), se scrie urmatorul cod:
/* Nume
Link-urile interne si externe pot fi combinate. Astfel putem face saltul câtre un anumit text aflat intr-o alta pagina. In pagina respectiva se scrie codul de la pasul 1, la textul ales pentru tinta link-ului, iar in pagina in care va fi link-ul se scrie:
/* Nume
r) Harti de imagini
Hartile de imagini sunt parti din aceeasi imagine care este "impartita" in mai multe zone, apoi in functie de zona pe care se executa click, browserul poate afisea o alta pagina.
Pentru formarea unei harti de imagini, se adauga in interiorul tag-ului "
/*
- unde pt. "nume_harta" a atributului "name" se foloseste acelasi cuvant adaugat la "usemap"
in cadrul acestuia se adauga elemente
- acestea definesc zonele hartii imaginii si forma acestora (prin valorile atributelor),
- numarul de elemente "AREA" reprezinta numarul de suprafete (cu link-uri specifice) in care este "impartita" imaginea.
In urmatorul exemplu puteti vedea forma generala a creari unei "harti de imagini" (cu 2 cadre), URL poate fi orice adresa de site sau pagina a site-ului curent:
/* [img src="poza.jpg" usemap="#map1">
/* [map name="map1">
/* [area shape="rect" coords="9, 120, 56, 149" href="url">
/* [area shape="rect" coords="100, 200, 156, 249" href="url">
/* [/map>
duminică, 1 noiembrie 2009
S1/C10 Sisteme multimedia
Tehnica multimedia
Tehnologia multimedia este o modalitate de transmitere la distanta a documentelor, imaginilor grafice, animatie, filme, semnal audio, video conferinte, invatamant la distanta etc.
Informatia de baza se gaseste depozitata in calculatoare numite servere (noduri) si ea este fie descarcata pe calculatorul utilizatorului , fie consultata on-line.
Nodurile sunt identificate prin adrese :
- adrese URI care desemneaza protocolul de comunicatie folosit (HTTP sau RTP) http://... sau rtp:// ...
- adrese URL care desemneaza resursa (www.numedomeniu.extensie)
- adrese URN care defineste comportamentul temporal al elementelor din limbajul XHTML+TIME
Documentele care pot fi vizualizate prin Internet sunt constituite din text si legaturi intre noduri. Pentru transmiterea in conditii optime a informatiilor se folosesc convertoare de semnal si programe de compresie a datelor de tipul RealPlayer
Pentru realizarea documentelor multimedia s-au propus urmatoarele formate :
- pentru text : format XHTML, WML, XML
- pentru imagini BMP, EPS,JPEG,GIF,WBMP,PNG
- pentru sunet: MIDI, WAV, MP3,WMA
- pentru video: AVI,MPEG,WMV
- pentru 3D: VRML,X3D
Pentru realizarea paginilor de site s-au propus urmatoarele limbaje:
- limbajul XHTML
- limbajul XHTML+TIME
- limbajul SMIL
1. Limbajul XHTML
Textul selectat pentru o pagina Web este incadrat de o serie de marcatori ... care respecta urmatoarele reguli :
/* [html]
/* [head] incepe antet
....** definitii CSS valabile pt. tot documentul
• definire font
/* body {
font-family:Arial ;
font size:12;
color: black;
background color: white;
margin-left: 2 cm;
margin-right: 2 cm
}
• definire titluri
/* h1 {
font-size: 16pt;
font-letter: 200%;
) }
• definire paragraph
/* p {
line-height:1.2;
text-align:justify;
margin-top:0.6em;
margin-bottom: 0.6em
text-indent: 1em;
}
• definire ancore
/* a{
font-weight: bold;
text-decoration: none;
color: black;
}
Cand mouseul este deasupra ancorei, ancora devine albastra, subliniat
/* a:hover {
text-decoration:underline;
color: blue;
)
/* a:active {
color: blue ;
}
Paginile activate isi schimba culoarea
/* a:visited {
color navy ;
}
/* [/head] sfarsit de antet
/* [body] inceput corp text
.....
** definire stil de afisare
/* text text bold
/* text text italic
/* text text underline
/* text> text marit
/* text text micsorat
/* text indice
/* text exponent
/* text alt tip de font
/* text text centrat
** definire titluri
/*
/*
/*
text trece la linie noua
/* text creaza linie nenumerotata
/* text creaza linie numerotata
/* text element din lista
/*![]()
text inserare imagine
/* incepe tabel
/* acora, link catre alta resursa
/*
/* [from] formular interactiv [/form]
/* [input] text de interogare [/input]
/* [applet] text in java script [/applet]
/* [script] text in Java script [/script]
/*
/* [/body] sfarsit de corp
/* [/html]
2. Limbajul XHTML+TIME
Limbajul XHTML+TIME este o extensie a limbajului XHTML care permite introducerea in pagina de site a unor elemente de animatie :
- momentul aparitiei unui element (eveniment) in pagina de site
- durata executarii unui eveniment (sunet, imagine )
Pentru realizarea elementelor temporale limbajul foloseste o serie de atribute :
begin= “nr” numarul de secunde de inceput a evenimentului
dur= “nr” numarul de secunde cat evenimentul ramine activ
[img src=“poza.jpg” dur=“10” /]
(src – precizeaza fisierul img care va fi executat)
repeatCount =“nr” numarul de repetitii ale unui eveniment
[video src=“film.avi” repeatCount= “3” /]
end=“nr”precizeaza momentul terminarii
timeAction =“display“ permite aparitia elementului animat precizat
timeAction =“visibility“ rezerva spatiu pe ecran pentru elemental care urmeaza sa apara la momentul “display“
targetName =“nume” nume generic asociat elementului de animat
attributeName =“valoare de modificat”
from=”nr” valoare de inceput ciclu de animatie
to=”nr” valoare de sfarsit animatie
Pentru precizarea faptului ca documentul XHTML are elemente din XHTML+TIME definite, documentul html trebuie sa contina urmatoarea forma:
/* [head>
/* [html xmlns:t=“urn :schemas-microsoft-com :time”>
/* [style>
/* .time {behavior: url(#default#time2;}
/* [/style>
/* [?import namespace=“t” implementation=“#default#time2”>
/* [/head>
Limbajul foloseste urmatoarele elemente pentru redarea obiectelor multimedia:
/* [t:audio> pentru semnal audio
/* [t:video> pentru videoclipuri
/* [t:animation> pentru animatii grafice
/* [t:img> pentru imagini statice
/* [t:ref> pentru referinta fisier extern
/* [t:media> generic pentru orice tip de elemente multimedia
/* [t:animate>
/* [t:animateColor> pentru modificarea culorii
/* [t:animateMotion> pentru modificarea poztionarii
/* [t:set> pentru setare valoare de expirare a duratei
Exemplu :
...
/* [button id : “startClip”>START
/* [button id : “ stopClip ”>STOP
/* [t:media begin=“startClip.click” end=“stopClip.click”
/* src=“movie/film.avi”
/* timeAction=“display”
/* style=“height:200px; width:200px” />
Tehnologia multimedia este o modalitate de transmitere la distanta a documentelor, imaginilor grafice, animatie, filme, semnal audio, video conferinte, invatamant la distanta etc.
Informatia de baza se gaseste depozitata in calculatoare numite servere (noduri) si ea este fie descarcata pe calculatorul utilizatorului , fie consultata on-line.
Nodurile sunt identificate prin adrese :
- adrese URI care desemneaza protocolul de comunicatie folosit (HTTP sau RTP) http://... sau rtp:// ...
- adrese URL care desemneaza resursa (www.numedomeniu.extensie)
- adrese URN care defineste comportamentul temporal al elementelor din limbajul XHTML+TIME
Documentele care pot fi vizualizate prin Internet sunt constituite din text si legaturi intre noduri. Pentru transmiterea in conditii optime a informatiilor se folosesc convertoare de semnal si programe de compresie a datelor de tipul RealPlayer
Pentru realizarea documentelor multimedia s-au propus urmatoarele formate :
- pentru text : format XHTML, WML, XML
- pentru imagini BMP, EPS,JPEG,GIF,WBMP,PNG
- pentru sunet: MIDI, WAV, MP3,WMA
- pentru video: AVI,MPEG,WMV
- pentru 3D: VRML,X3D
Pentru realizarea paginilor de site s-au propus urmatoarele limbaje:
- limbajul XHTML
- limbajul XHTML+TIME
- limbajul SMIL
1. Limbajul XHTML
Textul selectat pentru o pagina Web este incadrat de o serie de marcatori
/* [html]
/* [head] incepe antet
....** definitii CSS valabile pt. tot documentul
• definire font
/* body {
font-family:Arial ;
font size:12;
color: black;
background color: white;
margin-left: 2 cm;
margin-right: 2 cm
}
• definire titluri
/* h1 {
font-size: 16pt;
font-letter: 200%;
) }
• definire paragraph
/* p {
line-height:1.2;
text-align:justify;
margin-top:0.6em;
margin-bottom: 0.6em
text-indent: 1em;
}
• definire ancore
/* a{
font-weight: bold;
text-decoration: none;
color: black;
}
Cand mouseul este deasupra ancorei, ancora devine albastra, subliniat
/* a:hover {
text-decoration:underline;
color: blue;
)
/* a:active {
color: blue ;
}
Paginile activate isi schimba culoarea
/* a:visited {
color navy ;
}
/* [/head] sfarsit de antet
/* [body] inceput corp text
.....
** definire stil de afisare
/* text text bold
/* text text italic
/* text text underline
/* text> text marit
/* text text micsorat
/* text indice
/* text exponent
/* text alt tip de font
/*
** definire titluri
/*
text
titlu/*
text
inceput paragraf/*
text trece la linie noua
/*
/*
/*
/*
/*
/* acora, link catre alta resursa
/*
/* [from] formular interactiv [/form]
/* [input] text de interogare [/input]
/* [applet] text in java script [/applet]
/* [script] text in Java script [/script]
/*
/* [/body] sfarsit de corp
/* [/html]
2. Limbajul XHTML+TIME
Limbajul XHTML+TIME este o extensie a limbajului XHTML care permite introducerea in pagina de site a unor elemente de animatie :
- momentul aparitiei unui element (eveniment) in pagina de site
- durata executarii unui eveniment (sunet, imagine )
Pentru realizarea elementelor temporale limbajul foloseste o serie de atribute :
begin= “nr” numarul de secunde de inceput a evenimentului
dur= “nr” numarul de secunde cat evenimentul ramine activ
[img src=“poza.jpg” dur=“10” /]
(src – precizeaza fisierul img care va fi executat)
repeatCount =“nr” numarul de repetitii ale unui eveniment
[video src=“film.avi” repeatCount= “3” /]
end=“nr”precizeaza momentul terminarii
timeAction =“display“ permite aparitia elementului animat precizat
timeAction =“visibility“ rezerva spatiu pe ecran pentru elemental care urmeaza sa apara la momentul “display“
targetName =“nume” nume generic asociat elementului de animat
attributeName =“valoare de modificat”
from=”nr” valoare de inceput ciclu de animatie
to=”nr” valoare de sfarsit animatie
Pentru precizarea faptului ca documentul XHTML are elemente din XHTML+TIME definite, documentul html trebuie sa contina urmatoarea forma:
/* [head>
/* [html xmlns:t=“urn :schemas-microsoft-com :time”>
/* [style>
/* .time {behavior: url(#default#time2;}
/* [/style>
/* [?import namespace=“t” implementation=“#default#time2”>
/* [/head>
Limbajul foloseste urmatoarele elemente pentru redarea obiectelor multimedia:
/* [t:audio> pentru semnal audio
/* [t:video> pentru videoclipuri
/* [t:animation> pentru animatii grafice
/* [t:img> pentru imagini statice
/* [t:ref> pentru referinta fisier extern
/* [t:media> generic pentru orice tip de elemente multimedia
/* [t:animate>
/* [t:animateColor> pentru modificarea culorii
/* [t:animateMotion> pentru modificarea poztionarii
/* [t:set> pentru setare valoare de expirare a duratei
Exemplu :
...
/* [button id : “startClip”>START
/* [button id : “ stopClip ”>STOP
/* [t:media begin=“startClip.click” end=“stopClip.click”
/* src=“movie/film.avi”
/* timeAction=“display”
/* style=“height:200px; width:200px” />
sâmbătă, 14 martie 2009
S2/C7 - Grafica 3D - Departament Teatru
Grafica 3D
• Reprezentari vectoriale – desenarea unui obiect prin puncte, linii
Algoritmul matematic compune obiectul plecand de la tipul obiectului, nr.varfuri, vertex,lungime linie etc. Avantaj (recompunerea desenului dupa deformare), spatiu mic de memorare
• Reprezentare prin harti de pixeli (bitmap)– obiectul este o imagine compusa din pixeli . Un pixel contine: coordonate punct , culoare , adincime de culoare. Dezavantaj: spatiu mare, si deformarea e cu pierdere de imagine
• Reprezentare in spatiu:
– Axa xx’ – plan orizontal
– Axa yy’ – plan vertical
– Axa zz’ – plan observator de la ochi spre obiect
• Metode de observare:
– Observator mobil: ochiul se misca in jurul obiectului
– Observator fix : in fata ecranului defileaza obiectul sau parti din el
Reprezentare obiect
• Prin puncte
• Prin retea de linii (vector) si noduri (vertex) - wireframe
• Prin retea de poligoane (petice)
• Prin compunere de obiecte
Introducerea datelor in sistem:
- definirea unor cadre (frame)
- definirea unor cadre cheie (keyframe) care definesc punctul de plecare al unei transformari
- scanare imagine , transformarea ei in cadru dupa prelucrare
Obs. Procedeul matematic de trecere de la un cadru , la unul modificat se realizeaza prin interpolare
Transformari
- scalare
- Rotire
- Deformare (skrew)
- translatie
Controlul animatiei
• Control explicit – fiecare imagine este desenata,
• Control procedural – se definesc cadrele cheie (keyframe) celelalte cadre sunt generate de program. Unele cadre influenteaza comportarea altor obiecte (un obiect arunca umbra asupra altuia)
• Controlul comportarii reale (metoda constringerii) (mingea nu trece prin perete)
• Rotoscopia – prelucarea miscarilor din lumea reala pe baza de senzori de miscare
Elemente de iluminare
- Lumina ambientala (iluminare egala peste toate obiectele)
- Lumina de reflector
- Lumina solara (de la infinit)
Flash
• Fisiere *.FLA - fisiere necompilate, executate in mediu flash cu Control-Test movie
• Fisiere *.SWF, arhive de fisiere executate cu flash player
Elemente componente
1. Scena – spatiu de desenare
2. Obiecte din scena:
- primitive
- simboluri, retinute in biblioteci (library)
- element grafic
- Movie Clip (animatie)
- Buton
- sunet
- imagine (*.jpg/bmp)
- instante –copii ale obiectelor din biblioteca
3. Def. O imagine statica dintr-o animatie se numeste cadru 9frame)
4. Linia Timeline cuprinde un sir de cadre . Un obiect poate fi atasat unui cadru. Exista cadre simple (frame) ,cadre cheie (keyframe) evidentiate printr-un cerc in interior) si cadre spatiu
Instrumente de desenare
• Rigla temporara pentru precizie.(view-rulers)
• Grila (caroiaj) (view-grid) Permite alipirea obiectelor la caroiaj (View – snapping)
• Hand(mana) – deplaseaza scena in fereastra
• Selection (sageata neagra)– selecteaza/sterge contur obiect, continut obiect
• Subselection – elimina puncte de control obiect
• Line – traseaza linie
• Pen – pune/sterge/modifica puncte de control
• Pencil – trasarea de mina
• Brush – umple continut
• Free transform
• Fill transform – modifica gradienti culoare
• Ink bottle – schimba culoare contur (calimara)
• Paint bucket – modifica continut (ulcior)
• Text – static, dinamic, Input
Layer (strat)
• Tipuri de layer
– Normal
– Ghid -
– Ghidat
– Masca – strat de definire a unei zone de decupare
– Mascat
Obs. Optiunea View layers as ouline permite evidentierea conturului pe doua layere
Obs. F5 – inserare cadru simplu
F6 – inserare cadru cheie (keyframe)
F7 – inserare cadru blank
Obs. Delete nu sterge un cadru ci doar imagine grafica din cadru
• Reprezentari vectoriale – desenarea unui obiect prin puncte, linii
Algoritmul matematic compune obiectul plecand de la tipul obiectului, nr.varfuri, vertex,lungime linie etc. Avantaj (recompunerea desenului dupa deformare), spatiu mic de memorare
• Reprezentare prin harti de pixeli (bitmap)– obiectul este o imagine compusa din pixeli . Un pixel contine: coordonate punct , culoare , adincime de culoare. Dezavantaj: spatiu mare, si deformarea e cu pierdere de imagine
• Reprezentare in spatiu:
– Axa xx’ – plan orizontal
– Axa yy’ – plan vertical
– Axa zz’ – plan observator de la ochi spre obiect
• Metode de observare:
– Observator mobil: ochiul se misca in jurul obiectului
– Observator fix : in fata ecranului defileaza obiectul sau parti din el
Reprezentare obiect
• Prin puncte
• Prin retea de linii (vector) si noduri (vertex) - wireframe
• Prin retea de poligoane (petice)
• Prin compunere de obiecte
Introducerea datelor in sistem:
- definirea unor cadre (frame)
- definirea unor cadre cheie (keyframe) care definesc punctul de plecare al unei transformari
- scanare imagine , transformarea ei in cadru dupa prelucrare
Obs. Procedeul matematic de trecere de la un cadru , la unul modificat se realizeaza prin interpolare
Transformari
- scalare
- Rotire
- Deformare (skrew)
- translatie
Controlul animatiei
• Control explicit – fiecare imagine este desenata,
• Control procedural – se definesc cadrele cheie (keyframe) celelalte cadre sunt generate de program. Unele cadre influenteaza comportarea altor obiecte (un obiect arunca umbra asupra altuia)
• Controlul comportarii reale (metoda constringerii) (mingea nu trece prin perete)
• Rotoscopia – prelucarea miscarilor din lumea reala pe baza de senzori de miscare
Elemente de iluminare
- Lumina ambientala (iluminare egala peste toate obiectele)
- Lumina de reflector
- Lumina solara (de la infinit)
Flash
• Fisiere *.FLA - fisiere necompilate, executate in mediu flash cu Control-Test movie
• Fisiere *.SWF, arhive de fisiere executate cu flash player
Elemente componente
1. Scena – spatiu de desenare
2. Obiecte din scena:
- primitive
- simboluri, retinute in biblioteci (library)
- element grafic
- Movie Clip (animatie)
- Buton
- sunet
- imagine (*.jpg/bmp)
- instante –copii ale obiectelor din biblioteca
3. Def. O imagine statica dintr-o animatie se numeste cadru 9frame)
4. Linia Timeline cuprinde un sir de cadre . Un obiect poate fi atasat unui cadru. Exista cadre simple (frame) ,cadre cheie (keyframe) evidentiate printr-un cerc in interior) si cadre spatiu
Instrumente de desenare
• Rigla temporara pentru precizie.(view-rulers)
• Grila (caroiaj) (view-grid) Permite alipirea obiectelor la caroiaj (View – snapping)
• Hand(mana) – deplaseaza scena in fereastra
• Selection (sageata neagra)– selecteaza/sterge contur obiect, continut obiect
• Subselection – elimina puncte de control obiect
• Line – traseaza linie
• Pen – pune/sterge/modifica puncte de control
• Pencil – trasarea de mina
• Brush – umple continut
• Free transform
• Fill transform – modifica gradienti culoare
• Ink bottle – schimba culoare contur (calimara)
• Paint bucket – modifica continut (ulcior)
• Text – static, dinamic, Input
Layer (strat)
• Tipuri de layer
– Normal
– Ghid -
– Ghidat
– Masca – strat de definire a unei zone de decupare
– Mascat
Obs. Optiunea View layers as ouline permite evidentierea conturului pe doua layere
Obs. F5 – inserare cadru simplu
F6 – inserare cadru cheie (keyframe)
F7 – inserare cadru blank
Obs. Delete nu sterge un cadru ci doar imagine grafica din cadru
S2/C6 - Metode de animatie in Flash Departament Teatru
ANIMATIE
Metode
1. Motion tweening
2. Shape tweening
1. Motion tweening
- Se aplica asupra simbolurilor
Modificari posibile:
- pozitie simbol
- dimensiune
- rotatie
Metode:
1. - tweening motion
2. - tweening motion along a path
Obs. In linia Timeline apare in culoare albastru deschis
1. Tweening motion
Procedeu:
1. se deseneaza un obiect
2. se transforma in simbol (Convert to symbol)
3. Se pozitioneaza cursor in cadrul Timeline, click dreapta Insert keyframe
4. Se fac modificari asupra simbolului
5. se revine in cadrul 1 din Timeline
6. Click dreapta Create tweening motion
2. Tweening along a path
1. desenez un obiect in stratul 1
2. transform in simbol (Modify – Convert to symbol)
3. Inserez un nou strat (2) (click dreapta, proprietati , Ghid, sau Modify Timeline , Ghidaj)
4. In stratul de ghidaj trasez un drum (folosind pen)
5. In timeline in cadrul 40 din stratul de ghidaj Insert frame
6. In stratul 1 pozitionez simbol la inceput traseu
7 In cadrul 40 in strat 1 , inserez keyframe
8. In cadrul 40 strat 1 pozitionez simbol la capatul cursei
9. Modify Creation Motion
3. Shape tweening (morfism)
- Nu se aplica simbolurilor
Obs, Se deschid obiecte sau grupuri de obiecte in elemente componente cu Modify – Break Apart (la text Break Apart trebuie tastata de doua ori)
Modificari posibile
- locatie
- dimensiune
- culoare
- opacitate
Obs. In linia Timeline apare in culoare verde deschis
Procedeu
1. Se deseneaza un obiect (sau imagine bitmap)
2. Daca e grup de obiecte atunci Modify - Break Apart
2. In Timeline , cadru 30 , click dreapta insert keyframe
3. Se aplica proprietati asupra obiectului (sau se sterge si se deseneaza alt obiect)
4. In cadrul 1 se alege optiunea Tween = Shape
4. Timeline effect
Se aplica asupra:
- buton,
- simbol
- imagini bitmap
Procedeu:
1. se insereaza un obiect
2. se converteste in simbol
3. click dreapta, Timeline effect
Efecte:
- blur (creza umbra sub obiect)
- expand
- explode
Metode
1. Motion tweening
2. Shape tweening
1. Motion tweening
- Se aplica asupra simbolurilor
Modificari posibile:
- pozitie simbol
- dimensiune
- rotatie
Metode:
1. - tweening motion
2. - tweening motion along a path
Obs. In linia Timeline apare in culoare albastru deschis
1. Tweening motion
Procedeu:
1. se deseneaza un obiect
2. se transforma in simbol (Convert to symbol)
3. Se pozitioneaza cursor in cadrul Timeline, click dreapta Insert keyframe
4. Se fac modificari asupra simbolului
5. se revine in cadrul 1 din Timeline
6. Click dreapta Create tweening motion
2. Tweening along a path
1. desenez un obiect in stratul 1
2. transform in simbol (Modify – Convert to symbol)
3. Inserez un nou strat (2) (click dreapta, proprietati , Ghid, sau Modify Timeline , Ghidaj)
4. In stratul de ghidaj trasez un drum (folosind pen)
5. In timeline in cadrul 40 din stratul de ghidaj Insert frame
6. In stratul 1 pozitionez simbol la inceput traseu
7 In cadrul 40 in strat 1 , inserez keyframe
8. In cadrul 40 strat 1 pozitionez simbol la capatul cursei
9. Modify Creation Motion
3. Shape tweening (morfism)
- Nu se aplica simbolurilor
Obs, Se deschid obiecte sau grupuri de obiecte in elemente componente cu Modify – Break Apart (la text Break Apart trebuie tastata de doua ori)
Modificari posibile
- locatie
- dimensiune
- culoare
- opacitate
Obs. In linia Timeline apare in culoare verde deschis
Procedeu
1. Se deseneaza un obiect (sau imagine bitmap)
2. Daca e grup de obiecte atunci Modify - Break Apart
2. In Timeline , cadru 30 , click dreapta insert keyframe
3. Se aplica proprietati asupra obiectului (sau se sterge si se deseneaza alt obiect)
4. In cadrul 1 se alege optiunea Tween = Shape
4. Timeline effect
Se aplica asupra:
- buton,
- simbol
- imagini bitmap
Procedeu:
1. se insereaza un obiect
2. se converteste in simbol
3. click dreapta, Timeline effect
Efecte:
- blur (creza umbra sub obiect)
- expand
- explode
Abonați-vă la:
Postări (Atom)