Dreamweaver tutorial - lectii online

Dreamweaver -elemente de interfata

Dreamweaver este un editor HTML (Hypertext Markup Language- limbaj de marcare prin hypertext), un instrument de creatie si un instrument de gestionare a siturilor Web, toate intr-un singur program.

OBS:

- HTML este limbajul paginilor Web. Acest limbaj este alcatuit mai ales din perechi de etichete, incluse intre paranteze unghiulare(<>).

- Etichetele delimiteaza obiecte dintr-o pagina Web, precum textul, sau sunt de sine statatoare.

- Unele etichete, cum este cea folosita pentru insertia imaginilor in paginile Web, sunt etichete simple.

- Eticheta de inceput a unui set de etichete pereche arata astfel: <table>, in timp ce eticheta de sfarsit incepe cu caracterul / (</table>)

- Etichetele contin valori ale atributelor care influenteaza modalitatea de aparitie a obiectelor dintr-o pagina.

- Dreamweaver insereaza toate etichetele si atributele HTML pentru dvs.

Dreamweaver este un editor de pagini Web de tip WYSIWYG (What You See Is What You Go) usor de utilizat.

Dreamweaver permite crearea de situri si editarea siturilor existente. Dreamweaver nu schimba si nici nu rearanjeaza liniile de program HTML. O caracteristica a programului este ROUNDTRIP (cu dus-intors) ce permite mentinerea siturilor intr-o stare perfect intacta.

INTERFATA PROGRAMULUI

La deschiderea aplicatiei, implicit se deschide o fereastra fara continut, denumita "fereastra Document", cu palete flotante in partea superioara a acesteia.

Fereastra de document afiseaza pagina Web asa cum va aparea in browser-ul Web.

Fereastra de document contine:

1 bara de titlu - contine titul paginii curente si intre paranteze numele fisierului plasat.

2 bara de meniuri

3 bara de stare - ce contine:

3. 1 selectorul de etichete - asigura un acces facil la etichetele HTML care sunt implicate in orice obiect de pe ecran

3. 2 meniul pop-up Window size - contribuie la re-crearea unei anumite rezolutii de ecran in Dreamweaver (ex. 640×480 sau 800×600)

Obs. Valorile afisate in stanga reprezinta dimensiunile estimate ale ferestrei browserului.

Ele sunt mai mici

3. 3 statisticile de descarcare

3. 4 bara Mini-Launcher (mini-lansator)

Obs. Deoarece largimea de banda reprezinta frecvent o problema atunci cand dezvoltati lucrari pentru Web, este bine sa se cunoasca dimensiunea fisierului si timpul de descarcare pentru pagina web. Timpul de descarcare estimat prezentat in bara de stare este bazat pe viteza modemului, data in categoria Status Bar a meniului Dreamweaver Preferences. Viteza prestabilita a modemului este 56 Kbps.

Palete si inspectori

Stabilirea proprietatilor, deschiderea paletelor, crearea animatiilor si adaugarea functionalitatilor in pagina Web sunt posibile prin intermediul peletelor si inspectorilor. Majoritatea comenzilor din Dreamweaver sunt disponibile in mai multe locuri, de regula sub forma unei comenzi dintr-un meniu sau dintr-o paleta.

Paletele Dreamweaver sunt andocabile, ceea ce inseamna ca pot fi combinate intr-o paleta comuna cu rubrici, pentru a economisii spatiu in fereastra document.

Toate paletele si toti inspectorii sunt lansati din meniul Window.

Daca paleta este deschisa, langa numele comenzii (in meniul Window) se gaseste un marcaj de validare.

Pentru a inchide o paleta sau un inspector, fie executati clic in caseta close, fie deselectati numele din meniul Window.

Numele comenzilor din meniul Window pot fi usor diferite de numele paletelor sau ale inspectorilor pe care le lanseaza.

Obs. Initial, paletele din Dreamweaver sunt andocate toate la un loc. Paletele CSS Styles si HTML Styles sunt andocate cu paletele Library si Template. Paletele History, Frames. Layers si Behaviors sunt de asemenea, andocate impreuna intr-un grup separate. Inspectorii HTML Source si Timelines sunt grupati la un loc intr-o alta paleta. Puteti aduce modificari in configuratia de andocare. Anulati andocarea unei palete selectandu-i eticheta si tragand-o cu mouse-ul in afara ferestrei sale curente. Pentru a andoca o paleta, trageti si plasati eticheta sa intr-o fereastra care contine o alta paleta sau alte palete. Pentru a redimensiona o paleta, deplasati cursorul la marginea paletei si trageti marginile paletei la dimensiunea dorita. Daca paleta este suficient de lata, veti putea vedea pictograma si titlul paletei pe eticheta sa, in partea de sus. Totusi, daca fereastra paletei este prea mica pentru a permite afisarea titlurilor fiecarei etichete, veti vedea numai pictograma paletei.

Aplicatia Launcher

Aplicatia Launcher este o paleta care contine butoane care deschid si inchid paletele si ferestele din Dreamweaver. Cand o paleta este deschisa, butonul sau din paleta Launcher este apasat. Prin selectarea unui buton in timp ce acesta este apasat, paleta sau fereastra respective se vor inchide. Daca paleta nu este prima de sus, prin executia unui clic pe butonul apasat paleta va fi adusa in pozitia respectiva, un al doilea clic va determina inchiderea paletei.

Obs. Puteti stabili pictogramele care apar in paleta Launcher in sectiunea Floting Palettes (palete flotante) a meniului Dreamweaver Preferences. Deschideti meniul Dreamweaver Preferences selectand comanda Preferences din meniul Edit. Pur si simplu executati clic pe butonul + pentru a adauga articole din paleta Launcher. Selectati un articol si executati clic pe butonul - pentru a-l elimina din paleta Launcher. Pentru a rearanja articolele folositi butoanele cu sageti orientate in sus, respectiv in jos.

Inspectorul PROPERY

Afiseaza toate proprietatile obiectului curent selectat (text, imagini, sunet, video). Aspectul sau se modifica in functie de obiectul selectat.

Configurarea prestabilita a inspectorului Property implica inchiderea expandorului care contine proprietati avansate.

Obs. Pictograma expandorului se afla plasata in caseta Property coltul dreapta jos.

Paleta Object

Contine butoane pentru insertia unor elemente comune ale paginilor Web- imagini, tabele, formulare, hiperlegaturi etc.

Bara de meniuri contine meniurile autoderulante:

File - creare, deschidere, salvare, import, export fisiere

Edit - mutare, copiere, selectie, cautare, inlocuire, Preference-ajuta la configurarea elementelor de interfata Dreamweaver

View - activeaza/dezactiveaza vederea continutului sectiunii Head, a elementelor invizibile, a chenarelor de strat, table si cadru, a barei de stare si a hartilor de imagini; activarea/dezactivarea riglei, rularea programelor plug-in, afisarea unei imagini de copiere

Obs. Prevent Layer Overlaps-impiendica suprapunerea starturilor

Insert - permite inserarea obiectelor in pagina Web. Pentru aceste obiecte se regasesc in paleta Object butoane de comanda.

Modify - permite modificarea proprietatilor obiectului current selectat.

Text - ofera acces la modalitati de "reglare fina" a aspectului textului din pagina Web. Multe din aceste comenzi se regasesc in inspectorul Property corespunzator textului selectat.

Commands - comenzi utile pentru curatare HTML, Word HTML etc.

Site - comenzi pentru gestionarea site-ului

Help - ofera asistenta utilizatorului pentru utilizarea aplicatiei Dreamweaver; contine comenzi pentru inregistrare on-line a programului Dreamweaver, afisarea versiunii.

Obs. Fisierele de asistenta sunt in format HTML. Multe dintre acestea includ filme ilustrative realizate cu programul Shockweare.

Fisierele de asistenta se intalnesc si sub forma unor cadre ce contin butoane de navigare si un cuprins al subiectelor de asistenta

Meniul de context

Activat atunci cand efectuati clic dreapta pe un obiect. Contine comenzi pentru prelucrarea obiectului curent selectat.

Avantajele programului Dreamweaver

- Stiluri HTML - definirea si aplicarea stilurilor bazate pe HTML standard (ex. text aldin, rosu, centrat)

- Editor rapid de etichete - deschide eticheta HTML a obiectelor curent selectate, permitand editarea portiunii respective a programului HTML, fara a parasi fereastra Document.

- Inspector HTML andocabil

- Baza de cod Macintosh nativa (initial a fost conceput pe Macintosh)

- Inregistrarea si anularea inregistrarii fisierelor direct di fereastra Document, fara a mai deschide fereastra SITE

- Sincronizarea fisierelor locale si de la distanta in acelasi timp. Aceasta comanda preia fisiere mai recente de la server si plaseaza fisiere mai recente in situl aflat la distanta, in acelasi timp.

- Medii externe de lansare si editare

- "Curatarea" fisierelor Word HTML - prin eliminarea codurilor XML lipsite de importanta, stilurilor si etichetelor brevetate. Remediaza liniile de HTML incorecte si formateaza programul asa cum doriti.

- Harti de imagine inline - permit realizarea legaturilor fara a intra intr-o caseta de dialog separat (inspectorul Property)

- Insert Fireworks HTML - Fireworks permite fragmentarea obiectelor grafice si salvarea programului HTML care "asambleaza" componentele.

- Insertia datelor tabelare - importarea datelor din alte tabele create cu alte aplicatii (ex. Tabel creat cu EXCEL)

- Note de proiectare = note cu privire la revizuirea fisierelor, la mesajele de avertizare, la locatiile fisierelor si altele direct in fisier. Se poate realiza o astfel de nota care se deschide automat la viitoare deschidere a fisierului, ceea ce reprezinta un avantaj pentru proiectantii site-urilor.

- Marcare pe server dus-intors (Round Trip Server Markup) - extinsa pentru a include ASP, CFML, PHP

- Paleta History

- Meniuri si scurtaturi adaptabile - implica editarea fisierului menu. xml, care defineste sistemul de meniuri din program.

- Extensibilitatea programului - adaugarea de noi functii API

Lectia 2

I. Creare, salvare, deschidere, inchidere pagina Web

1. Creare

File->New

2. Salvare

File ->Save->selectie folder unde se salveaza pagina->editare nume pagina

3. Deschidere

File->Open

4. Inchidere

File->Close

II. Stabilirea proprietatilor paginii

Modify->Page Properties sau Page Properties din meniul de context al paginii

=> stabilire titlul paginii, fundalul paginii (culoare sau imagine), culoarea fontului, culoarea textului pentru linkuri vizitate/nevizitate, margini pagina

Obs.

In HTM, culorile sunt reprezentate prin 3 valori hexazecimale, precedate de caracterul #. De exemplu, valoarea RGB a culorii albe este #FFFFFF, unde valoarea pentru rosu (red) este FF, pentru verde (green) este FF, iar pentru albastru (blue) este FF.

Majoritatea browserelor afiseaza numele standard al culorii in locul codului hexazecimal. De exemplu, pentru rosu se afiseaza "red" in loc de #FF0000.

Marginile paginii sunt interpretate diferit functie de browserul utilizat. Astfel, Internet Explorer foloseste valoarea marginii din stanga, respectiv sus, iar Netscape Navigator foloseste valoarea latimii, respectiv inaltimii paginii

Butonul Apply aplica setarire din fereastra de dialog fara inchiderea acesteia; butonul OK inchide fereastra de dialog cu salvarea setarilor

III. Vizualizarea paginii intr-un browser

File-> Preview in Browser

Obs.

Edit Browser List permite editarea listei cu browsere recunoscute de Dreamweaver.

Pentru un nou browser se specifica locatia si fiserul corespunzator browserului (Browse), numele acestuia (Name) si optiunea pentru activare rapida de la tastatura: Primary -> F12, Secondary-> Ctrl+F12

Lectia 3

Formatarea textului

Inspectorul Property corespunzator textului selectat

1. Elemente standard HTML de formatare (lista Format)

- None - nici ununul

- Paragraph - aplica etichetele <p>, </p>

- Heading 1, , Heading 6 - aplica etichete de tip heading (titlu) - la aplicarea unei astfel de eticheta tot textul de pe linia respectiva capata dimensiunea etichetei respective.

- Preformatted (ante-formatat) - afiseaza textul folosind un corp de litera fix sau ne-proportional

2. Corp de litera (lista Font)

Obs. Utilizarea unui grup de corpuri de litera, in locul unui singur corp de litera, mareste posibilitatea ca persoanele care citesc pagina dvs. sa dispuna de minimum unul din corpurile de litera din grup.

3. Stiluri (set de caracteristici stabilite pentru caracterele utilizate la editarea paginii) -Style

Obs. CSS=Cascading Style Sheets

4. Dimensiunea caracterelor (Size)

5. Stil de editare - Bold, Italic, Undeline

6. Alinierea textului - Left, Center, Right, Justify

7. Culoarea (Textcolor)

8. Stabilirea listelor marcate si numerotate - Unordered List, Ordered List

9. Indentare - Indent, Outdent

Obs. Etchetele de tip paragraf (<p>, </p>) delimiteaza un bloc de text, plasand 2 caractere retur decar dupa blocul respectiv; iar eticheta de tip salt este o eticheta simpla care insereaza in text un singur caracter retur de car (<br /> = SHIFT+Enter = Line Break).

Lectia 4 - Stabilirea legaturilor

Hiperlegaturi, adrese URL, ancore, legaturi pentru mail

Obs. URL=Uniform Resource Locator

Principalele tipuri de cai ce pot fi stabilite pentru fisierul catre care stabiliti legatura sunt:

1. calea absoluta

Adresa URL este absoluta deoarece trebuie specificat clar:

- protocolul (HTTP, FTP)

- domeniul (www. mediapro. com)

- calea completa catre fisier

Adresa absoluta pentru un fisier de pe HDD este de exemplu: File:///C:/MyDocuments/imagine. jpg

2. calea relativa de document - recomandabil de utilizat in realizarea siteurilor

In acest caz adresa fisierului depinde de directorul in care este plasat.

Astfel:

- pentru a stabili o legatura catre un fisier plasat in directorul curent este suficient sa se editeze numele fisierului, punctul si extensia acestuia (ex. prod001. html).

- pentru a stabili o legatura catre un fisier plasat intr-un director descendent al directorului curent trebuie specificat numele directorului descendent, caracterul / si apoi numele fisierului, punctul si extensia acestuia (ex. produse/prod001. html).

- pentru a stabili o legatura catre un fisier plasat in directorul parinte al directorului curent trebuie specificata calea . . / si apoi numele fisierului, punctul si extensia acestuia (ex. . . /prod001. html).

3. calea relativa la radacina siteului - radacina sitului Web este definita sub forma unui anumit catalog al unui sit Web, de regula acolo unde este amplasata pagina de baza a sitului (ex. /depts/produse. html).

! nu se recomanda incepatorilor !

Pentru stabilirea unei legaturi catre un fisier plasat pe disc se parcurg urmatorii pasi:

1. Se selecteaza textul sau obiectul care poate fi folosit in mod logic ca legatura spre celalalt fisier.

2. Se editeaza calea si numele fisierului in caseta Link din Inspectorul Property

sau

utilizand butonul Browse se localizeaza fisierul

sau

utilizand butonul Point to File: se gliseaza mouse-ul peste fisierul afisat in fereastra Files (afisabila din meniul Window)

Obs.

1. Pentru stabilirea unei legaturi catre un sit se va edita in zona Link adresa acesteia (ex. www. preferatele. com); iar pentru stabilirea unei legaturi de e-mail se va edita in zona Link adresa de e-mail (ex. roxy88@yahoo. com)

2. Pentru a realiza o legatura de e-mail utilizatorul trebuie sa aiba o aplicatie de e-mail configurata sa lucreze cu browserele.

3. Comenzile pentru inserare legaturi sunt plasate in meniul Insert - Hyperlink, E-mail Link

Ancore = puncte de salt in pagina; se utilizeaza in paginile Web lungi; se identifica printr-un nume precedat de #.

Definirea unei ancore in pagina:

1. Se plaseaza cursorul de editare in punctul unde se insereaza ancora.

2. Insert->Named Anchor.

3. Se editeaza numele ancorei.

Pentru stabilirea unei legaturi de ancora

- se va edita in zona Link din Inspector Property corespunzator selectiei, #nume_ancora

SAU

- se utilizeaza Piont to File glisat peste ancora la care se face legatura.

Lectia 5 - Inserarea imaginilor

Cele mai uzuale formate de imagini utilizate de browsere sunt GIF (Graphic Interchange Format imagini care au blocuri de culoare continua-desene), JPEG (Joint Photographic Experts Group imagini fotografice si imagini care nu au blocuri de culoare continua-contin un gradient de culoare), PNG (Portable Network Group (ping)-inlocuitor pentru GIF-utilizeaza canalele alfa pentru transparenta)

Mod de lucru:

1. Se plaseaza cursorul de editare acolo unde se insereaza imaginea

2. Insert -> Image

3. Se localizeaza fisierul pe disc si se deschide.

Obs.

1. daca fiserul imagine este deschis din alt folder decat din folderul unde este plasata pagina Web, atunci utilizatorul va fi intrebat daca vrea o copie a acestuia in folderul care contine pagina.

2. In fereastra Source Image Select, daca este activata caseta Preview Image, atunci va fi vizibila o miniatura a imaginii.

Inspectorul Property corespunzator unei imagini contine:

- caseta cu numele imaginii

- casetele pentru stabilirea inaltimii (H=Height) si latimii (W=Width) imaginii

- SRC - contine numele fisierului inserat

- Alt -text alternativ - permite utilizatorilor sa poata citi o descriere a imaginii inainte de incarcarea acesteia

- Link - permite crearea unei legaturi intre imaginea selectata si un alt fisier.

- Border - contur pentru imagine (implicit 0)

- Butoane pentru aliniere (Left, Center, Right) in pagina

- Align - contine optiuni de aliniere ale imaginii in pagina raportat la elementele paginii

- Default - aliniere prestabilita de browser

- Baseline (linie de baza) - aliniaza marginea inferioara a imaginii cu marginea inferioara a elementului

- Top (sus) - aliniaza imaginea cu elementul situat cel mai sus. Liniile de text suplimentare se "infasoara" sub imagine

- Middle (mijloc) - aliniaza elementul in mijlocul imaginii. Liniile de text suplimentare se "infasoara" sub imagine

- Bottom (jos) - aliniaza elementul la marginea inferioara a imaginii.

- TextTop - aliniaza imaginea cu textul (nu cu elementul) situat cel mai sus.

- Absolute Bottom - aliniaza marginea inferioara a elementului plasat cel mai sus cu marginea inferioara a imaginii

- Left (stanga) - aliniaza imaginea la stanga altor elemente

- Right (dreapta) - aliniaza imaginea la dreapta altor elemente

- H Space - mareste distanta intre imagine si alte elemente ale paginii plasate in jurul acesteia - pe orizontala (Horizontal)

- V Space - mareste distanta intre imagine si alte elemente ale paginii plasate in jurul acesteia - pe verticala (Vertical)

Obs.

1. Pentru stabilirea unui editor extern de imagini - Edit->Edit with external Editors->Preference, sectiunea Files types/Editors

Imagini derulante

1. Insert->Image Objects-> Rollover Image

2. Se editeaza numele imaginii, se selecteaza fisierul original si cel derulant

3. Preload Rollover Image - permite descarcarea imaginii in memoria cache a browserului cititorului

Bara de navigare cu imagini derulante si legaturi

1. Insert -> Image Objects -> Navigation Bar

2. Pentru primul buton se editeaza numele, se incarca o imagine de tip buton neapasat, o imagine de tip "mouse deasupra butonului", o imagine de tip buton apasat. De asemenea, se poate introduce o imagine de tip "mouse deasupra butonului apasat", o imagine derulanta pentru starea "apasat" a unui buton.

Obs. Pentru a avea un aspect estetic este bine ca imaginile sa aiba aceeasi dimensiune.

3. When Clicked, Go To URL - stabileste o hiperlegatura la o pagina Web.

4. Preload Images - pentru preincarcare automata

5. Show Down Image Initially- afiseaza initial imaginea "apasat"

Imagine de copiere - utila atunci cand se re-creaza o structura de pagina; retine toate elementele paginii facilitand alinierea obiectelor.

Page Properties -> Tracing Image -> localizare fisier (GIF, JPG)

Lectia 6 - Harti de imagini

Harta de imagine reprezinta o imagine cu regiunile definite sub forma de hiperlegaturi. Aceste regiuni se numesc pete fierbinti (hotspots). Cand cititorul paginii executa clic pe o pata fierbinte, aceasta se comporta ca orice alta hiperlegatura.

In loc de a adauga o hiperlegatura la intreaga imagine , se poate defini un numar de pete fierbinti pe diferite portiuni ale unei imagini (chiar in diferite contururi).

Hartile de imagine sunt utile pentru prezentarea meniurilor grafice pe care cititorul poate executa clic pentru a selecta regiuni ale imaginii singulare.

De exemplu, pe o imagine a continentului nord-american se pot defini pete fierbinti in jurul diferitelor tari din America de Nord. Cand cititorul executa clic pe o pata fierbinte trece la o alta pagina in care citeste informatii referitoare la tara respectiva.

Un alt exemplu este legat de modul in care pot fi create meniurile. Daca pagina are un meniu grafic principal se pot defini pete fierbinti in jurul diferitelor articole de meniu. Astfel, cand cititorul executa clic pe o pata fierbinte va trece automat la o alta sectiune corespunzatoare sitului Web.

In Dreamweaver po fi create 2 tipuri de harti de imagine:

- pe parte de client - pagina Web contine toate coordonatele si hiperlegaturile definite. Aceste tipuri de harti reactioneaza mai rapid la datele de intrare ale utilizatorului, deoarece nu trebuie sa contacteze serverul pentru a obtine informatii.

- pe parte de server - se bazeaza pe un program care ruleaza pe un server Web pentru interpretarea coordonatelor si hiperlegaturilor.

Obs. Este posibil ca unele browsere sa nu inteleaga harta pe parte de client. In acest caz se poate realiza atat harta pe parte de client, cat si harta pe parte de server pentru o imagine. Harta de imagine client va avea prioritate daca browserul accepta acest tip.

Crearea unei harti de imagine

Obs.

Nu orice imagine poate fi definita harta de imagine.

Nu este obligatoriu ca imaginea sa fie harta unei tari, continent.

Mod de lucru:

1. Se insereaza imaginea care urmeaza a fi definita harta de imagine.

2. Se editeaza numele hartii in zona Map a Inspectorului Property.

3. Se selecteaza unul din instrumentele de desenare (dreptunghiular, cerc, neregulat).

4. Se deseneaza pata fierbinte in imagine.

5. Pentrul noua pata inserata se stabileste legatura (Link), un text alternativ (Alt) si o fereastra tinta (Target - _blank - permite ca fereastra curenta a browserului sa ramana deschisa si legatura sa fie deschisa intr-o noua fereastra a browserului

6. Se reiau pasii 3-5 pentru restul petelor fierbinti

Obs. In codul HTML petele firbinti sunt descrise diferit. Astfel:

- dreptunghiul - <area shape="rect" coords="x1,y1,x2,y2" href="resursa">, unde x1,y1-coordonate pentru coltul stanga-sus; x2,y2-coordonate pentru coltul dreapta-jos. (x1,y1,x2,y2-exprimate in pixeli)

- circulara (cercul) - <area shape="circlet" coords="x,y,r" href="resursa">, unde x,y-coordonate centrul cercului; r-raza cercului. (x,y,r-exprimate in pixeli)

- poligonala (maximum 10 varfuri) - <area shape="rect" coords="x1,y1,x2,y2, x3,y3, x4,y4, x5,y5, x6,y6, x7,y7, x8,y8, x9,y9, x10,y10" href="resursa">, unde (x1,y1), (x2,y2), (x3,y3), (x4,y4), (x5,y5), (x6,y6), (x7,y7), (x8,y8), (x9,y9), (x10,y10) - coordonate ale varfurilor poligonului.

Aranjarea si alinierea petelor firbinti

1. Se selecteaza petele fierbinti

CTRL+A=toate

SHIFT+clic pata = adaugare la selectie a petelor

2. Modify -> Arrange -> (trimitere in fata, spate - pentru pete fierbinti suprapuse; aliniere stanga, dreapta, sus, jos, redimensionare la aceeasi inaltime si latime)

Lectia 7 - Inserarea fisierelor multimedia

In paginile Web pot fi adaugate (pe langa text si imagini grafice) acele fisiere de suntet sau video. Majoritatea acestor fisiere ocupa o mare largime de banda = "grosimea conductei" Internet pe care o aveti la dispozitie atunci cand va conectati la Web.

Unele fisiere (RealMedia, Shockwave) ocolesc necesitatile de largime de banda mare ale fisierelor de sunet si video prin natura lor de formate cu derulare continua (streamed). Redarea unui continut cu derulare continua incepe imediat dupa o scurta perioada de memorare in buffer; continutul continua sa se descarce in fundal, in timp ce este redat continutul memorat anterior in buffer.

Majoritatea fisierelor multimedia livrate prin Web sunt comprimate folosind tehnici aflate mereu in curs de perfectionare. . Unele din formatele multimedia traditionale, cum sunt WAV (sunet), AVI (film Windows), MOV (Film Quick Time), AIFF (sunet) sunt deseori prea mari pentru a fi transmise prin Web. Unele din aceste formate necesita descarcarea intregului fisier inainte de a-l reda. Pentru livrarea acestui tip de continut (sonor, video) sunt utilizate diverse tehnologii - instrumente de comprimare si derulare continua.

Toate fisierele multimedia necesita un program creat de o terta parte pentru a fi redate in browser. Unele din aceste programe, denumite module plug-in si controale ActiveX, sunt instalate automat cu programul browser.

Nu este necesar sa presupuneti de ce module dispune cititorul paginii dvs. , ci sa-i oferiti acestuia informatii privind obtinerea unui program necesar creat de o terta parte.

Dreamweaver ofera acces la proprietatile care permit furnizarea de informatii cu privire la locatia de unde se poate descarca modulul plug-in; permite adaugarea programelor HTML pentru module plug-in specificate atat pentru Internet Explorer, cat si pentru Netscape. De asemenea, exista o comportare care va determina daca un cititor are un anumit modul plug-in.

Formate ale fisierelor de sunet in Web

Inserarea unui fisier de sunet

1. Se plaseaza cursorul de editare in punctul unde se insereaza fisierul.

2. Insert -> Media -> Plug-in

3. Se localizeaza fisierul si se deschide.

4. Noul obiect inserat are proprietati similare imaginilor (aliniere, redimensionare, src-sursa fisierului), dar pot fi stabilite si alte caracteristici specifice obiectului sunet.

De regula, se obtine un obiect plug-in inline sau inglobat, ceea ce inseamna ca controllerul obiectului plug-in apare in interiorul fluxului paginii Web.

Se poate face referire la o adresa URL folosind un fisier de sunet ca hiperlegatura. Cand utilizatorul executa clic pe legatura, browserul va lansa controllerul obiectului plug-in intr-o fereastra separata de fereastra browserului.

Plg URL - specifica atributul Plugins Page.

Daca cititorul paginii Web nu dispune de modulul plug-in pentru a asculta sunetul, atunci se poate crea o legatura spre locul de unde cititorul isi poate descarca programul.

Ex. Pentru RealMedia - https://www. real. com/player/index. html

Parameters - adauga parametrii speciali la un modul plug-in

Inserarea unui fisier FLASH

Macromedia Flash si Director au devenit standardele pentru animatie in Web. Director, creat initial pentru programe interactive bazate pe CD-ROM, are o versiune Web cu derulare continua, denumita Shockwave. Flash permite crearea de animatii mici, interactive, bazate pe Web. Caracterul interactiv al programului Flash este limitat in comparatie cu cel al programului Director, dar Flash este foarte popular datorita graficii sale vectoriale, un format graficcare este mic si scalabil.

Un alt format interactiv cu derulare continua disponibil de la Macromedia este Authorware Web Player. Programul software Authorware este folosit pentru a crea suporturi de invatare puternic interactive. Obiectul Authorware Web Player nu este instalat cu Dreanweaver, dar poate fi descarcat din situl Web Macromedia.

Fisierele multimedia sunt interpretate de browserele Netscape si Internet Explorer in 2 moduri diferite, dar cu anumite similaritati. Netscape permite utilizatorului sa extinda capacitatile browserului cu module plug-in (programe ce pot fi instalate in calculatorul utilizatorului). Netscape are un dosar Plugins in care sunt stocate aceste programe. Prin instalarea modulelor plug-in, de regula se inregistreaza la Netscape tipul MIME (Multipurpose Internet Mail Extension) adecvat. Inregistrarea unui tip MIME permite browserului Netscape sa recunoasca un fisier si sa apeleze la modulul plug-in adecvat pentru a-l rula.

Microsoft foloseste standardul ActiveX pentru a lansa si a rula continut multimedia. Multe extensii de browser create de terte parti sunt livrate atat ca modul plug-in, cat si sub forma de control ActiveX. De regula, ActiveX se instaleaza singur in fundal, fara a necesita o repornire a browserului.

Internet Explorer poate folosi module plug-in Netscape, care sunt instalate ca in Netscape.

Obs. Unii utilizatori fie au dezactivata posibilitatea de a instala controale ActivX in browser, fie sunt suspiciosi atunci cand apare o caseta de dialog in care li se cere sa descarce si sa instaleze un anumit program. De aceea trebuie precizat utilizatorilor la ce sa se astepte daca pagina are un continut care le cere sa descarce si sa instaleze in calculatoarele lor.

Inserarea unui fisier Flash sau Shochwave - se efectueaza la fel ca si inserarea unui fisier de sunet.

Parametrii care pot fi stabiliti pentru un astfel de fisier sunt LOOP si AUTOPLAY.

Etichetele <object> si <embed> sunt interpretate diferit de browsere.

Obiectul Plugin insereaza o eticheta <embed>, eticheta Netscape standard pentru obiecte plug-in, in codul HTML. Obiectele Flash si Shochwave au o proprietate TAG unde se poate selecta fie eticheta <embed>, fie eticheta <object>, fie ambele. Eticheta <object> este folosita de controale ActiveX.

Este recomandata utilizarea ambelor etichete permitand browserului sa manipuleze fisierul intr-un mod optim. Netscape recunoaste eticheta <embed> si apeleaza modulele plug-in Flash sau Shockwave, in timp ce Internet Exporer recunoaste eticheta <object> si apeleaza controale ActiveX Flash sau Shockwave. Daca Internet Explorer nu are instalat controlul ActivX corespunzator, va apela modulul plug-in adecvat .

Previzualizarea filmului Flash in fereastra de document se utilizeaza butonul Play din Inspectorul Property.

Inserarea unei legaturi catre un fisier PDF (Portable Digital Format)

Adobe Acrobat Reader este un modul plug-in distribuit gratuit, care a devenit standardul pentru livrarea fisierelor text formatate in Web. Fisierul PDF permite cititorului sa vada continutul asa cum s-a dorit sa fie vazut - corpurile de litera, asezarea in pagina si obiectele grafice apar in mod previzibil. Fisierele PDF sunt create cu aplicatia Adobe Acrobat Distiller si pot fi vizualizate cu Acrobat Reader. Un modul Plug-in Acrobat Reader este instalat, de regula, atunci cand este instalata aplicatia Reader.

Pentru a afisa un fisier PDF se creeaza, pur si simplu o hiperlegatura cu adresa URL a acestuia. Daca modulul Plug-in Acrobat este prezent, fisierul se va deschide in browser. Daca modulul Plug-in Acrobat nu este instalat, dar Acrobat Reader este instalat, fisierul PDF se va deschide in Acrobat Reader, in afara browserului.

Inserarea unei miniaplicatii JAVA

Java este un limbaj de programare folosit pentru a crea programe de sine statatoare, denumite miniaplicatii. Miniaplicatiile Java ruleaza in interiorul ferestrei browserului, exact ca si celelalte obiecte de tip sunet, video.

Obs.

1. Este posibil ca unii utilizatori sa fi dezactivat Java in browserul lor, deci trebuie sa fiti atenti atunci cand includeti informatii vitale pentru pagina Web intr-o miniaplicatie Java.

2. Java si JavaScript nu sunt unul si acelasi lucru si nici nu sunt conexe. JavaScript este un limbaj de scriptare care este folosit in dezvoltarea paginilor Web pentru configurarea proprietatilor unei pagini Web. Java este un limbaj de programare compilat, folosit pentru dezvoltarea de aplicatii.

Pentru inserarea unei miniaplicatii Java trebuie sa aveti toate fisierele adecvate pentru miniaplicatie. Numarul si tipul fisierelor pot varia. Trebuie citita documentatia miniaplicatiei care se va folosi.

Orice miniaplicatie Java folosita in pagina Web trebuie sa vina cu instructiuni. Pentru ca miniaplicatia sa functioneze, trebuie sa fie citite cu atentie instructiunile si sa se introduca corect parametrii. Daca nu este configurata corect miniaplicatia, utilizatorii vor vedea in pagina o caseta goala de culoare gri.