UNIVERSITATEA ALEXANDRU IOAN CUZA FACULTATEA DE ECONOMIE SI ADMINISTRAREA AFACERILOR

LUCRARE PENTRU PRACTICA ISA <Pagina web>

CUPRINS
Introducere . 2 MACROMEDIA DREAMWEAVER : Despre MACROMEDIA DREAMWEAVER 3 Crearea unei pagini noi in Dreamweaver . 4 Stabilirea proprietatilor unei pagini .. 6 Inserarea si stabilirea proprietatilor unei imagini 7 Crearea unui cadru si stabilirea proprietatilor sale . 9 Inserarea butoanelor si proprietatile acestora 11 Inserarea si proprietatile obiectelor Flash ... 13 Stabilirea de Hotspot-uri pentru o imagine . 15 Deplasarea textului cu optiunea Marquee ... 16 Inserare formular de comanda (feedback form).. 17 Inserare formular de cautare (search form) FLASH Despre FLASH .... 17 Construirea obiectelor in Flash .... 18 1 2 3 FLASH MENU Despre 1 2 3 FLASH MENU . 21 Crearea menu-urilor cu programul 1 2 3 Flash menu 21

Macromedia Dreamweaver
MACROMEDIA DREAMWEAVER este un program destinat creatorilor de pagini web. Ca orice alt editor WYSIWYG, Dreamweaver stabilete standardele n materie de instrumente de authoring web. Dreamweaver este un instrument de design puternic dar simplu pentru profesioniti. Dreamweaver este o necesitate pentru toi cei care doresc s construiasc site-uri mari i dinamice. Dreamweaver poate ascunde detaliile de implementare a paginilor HTML, fcnd astfel posibil crearea cu uurin a paginilor web de ctre utilizatorii neexperimentai. Dreamweaver permite folosirea majoritii browserelor instalate pe calculatorul utilizatorului, pentru a previzualiza website-ul creat. De asemenea conine i cteva utilitare pentru administrarea site-urilor, cum ar fi cele pentru a gsi i modifica un paragraf sau o linie de cod, n ntregul web site, pe baza oricror parametri specificai de ctre utilizator. Cu ajutorul panourilor de stare se poate crea cod JavaScript fr a avea cunotine de programare. Dreamweaver-este dotat cu arhitectura extensibil. Extensiile, aa cum sunt ele cunoscute, sunt mici programe, pe care orice dezvoltator le poate scrie (de obicei n HTML i JavaScript) i pe care oricine le poate descarca i instala, acestea aducnd un spor de performan i funcionalitate mbuntit programului. Exist o comunitate de dezvoltatori care produc aceste extensii i le public (att comercial ct i gratuit) pentru probleme de dezvoltare web, de la simple efecte rollover pn la soluii complete de vnzare online. Noile caracteristici v permit s v previzualizai i de testare pagini de coninut web de dou ori la fel de repede Potrivit independent de cercetare, cu ajutorul Live View este aproape de dou ori la fel de rapid ca o previzualizare prestate pagini ntr-un browser. n plus, putei s facei clic pe un fiier pentru a vedea legate ambele sale n Codul sursa vizualiza i pagina printe n vedere Design.

Crearea unei pagini noi in Dreamweaver

Pentru crearea unui site nou in Dreamweaver se utilizeaza meniul Site>NEW. Dreamweaver solicita o serie de informatii in legatura cu respectivul site, precum numele site-ului, folder-ul in care se afla sau se vor afla fisiere, folderul pentru imagini, modul de transfer(ftp, none etc) etc. Respectiva fereastra are: New- definitie nou site, Edit - editare site deja existent, Duplicate - crearea unei dubluri a unui site deja existent, Remove - stergerea unui site existent; Export- exportarea definitiei site-ului; Import-importati definirea site-ului. Dupa definirea site-ului si nu exista nici o pagina in folderul stabilit apasati File ->New unde va aparea o fereastra si vom alege General (la category) si (la basic page) HTML ->Create. Acum in dreapta voastra aveti panoul cu grupuri de panouri printre care si Files. In fereastra Files vei putea vizualiza toate fisierele care se gasesc in folderul stabilit ca folder radacina .Fereastra Files ofera 3 moduri de vizualizare a paginilor site-ului:

Local View - vizualizare locala (in folderul din pc) Remote View - vizualizare server( in folderele din hosting) Map View - vizualizare pagini sub forma unei mape aratand legatura (link-urile) dintre pagini.

Vom alege Local View pentru a intelege si alte panouri si comenzi din Dreamweaver pe care le putem folosi. Pentru crearea unei pagini noi in Dreamweaver selectam din menu-ul File optiunea New.

 Pentru deschiderea unei pagini web anterior creata selectam optiunea Open.

Stabilirea proprietatilor unei pagini

Stabilirea fundalului unei pagini web in Dreamweaver
Pentru a stabili fundalul unei pagini web in Dreamweaver se selecteaza optiunea Background color din fereastra Page Proprieties si se alege culoarea dorita. Stabilirea unei imagini pe fundalul paginii web se selecteaza optiunea Background image ->Browse si se alege imaginea dorita.

Stabilirea proprietatilor textului

Pentru stabilirea marimii textului se selecteaza optiunea Size si se alege marimea dorita. Selectarea culorii textului se realizeaza cu optiunea Text color de unde se alege culoarea.

Inserarea si stabilirea proprietatilor unei imagini

Inserarea unei imagini
Se insereaza o imagine in Dreamweaver cu ajutorul optiunii Insert din menu,de unde se selecteaza optiunea Image si se alege imaginea dorita.

Stabilirea denumirii imaginii

In optiunea Proprities in casuta notata Src alegem cu ajutorul pictogramei din dreapta imaginea cu denumirea dorita.

 Stabilirea adresei imaginii

Pentu a putea accesa o legatura prin intermediul imaginii se stabileste link-ul in casuta denumita Link cu ajutorul pictogramei din dreapata de unde sa alege imaginea dorita pentru a fi accesata.

Stabilirea dimensiunii imaginii

Pentru a modifica proprietatile unei imagini trebuie mai intai selectata imaginea respectiva. Odata selectata in partea inferioara a paginii in ferastra Proprities completam casuta notata W (Width) cu latimea dorita iar cea notata H (Height) cu lungimea dorita pentru imaginea selectata.

Stabilirea chenarului imaginii

Daca se doreste un chenar pentru imaginea selectata se introduce in casuta denumita Border un numar ce va reprezenta grosimea chenarului

Crearea unui cadru (layer) si stabilirea proprietatilor sale

Crearea unui cadru (layer)
Pentru un aspect mai placut al paginii de lucru se poate introduce un cadru (layer) . Acest lucru se poate realiza cu optiunea Insert din menu de unde se selecteaza Layout Object apoi Layer.

Stabilirea culorii de fundal a cadrului

Proprietatile unui layer se pot stabili dupa ce a fost selectat layer-ul creat , in partea de jos a paginii in fereasta Proprities , in dreptul casutei denumite Bg color .

 Stabilirea imaginii de fundal al layer-ului

Daca in loc de culoare se doreste ca fundal o imagine tot in fereastra Proprities , la nivelul casutei notate Bg image , cu ajutorul pictogramei din dreapta se selecteaza imaginea dorita.

Stabilirea dimensiunii layer-ului

Pentru ca layer-ul sa aiba o anumita dimensiune , in cadrul aceleiasi ferestre Proprities in dreptul casutei notate W (Width) completam cu un numar corespunzator latimii dorite pentru cadrul selectat . De asemenea casuta denumita H (Height) va fi completata cu un numar corespunzator lungimii dorite pentru layer .

Stabilirea tipului layer-ului

Tipul layer-ului poate fi fixat cu ajutorul optiunii Overflow din cadrul careia se alege un anume tip dorit (exemplu : scroll) .

10

Inserarea butoanelor si proprietatile acestora

Inserarea butoanelor
Inserarea butoanelor se realizeaza cu optiunea Insert din menu dupa care selectam Media si apoi Flash Button.

Stabilirea stilului butonului

In fereastra aparuta prin optiunea Flash Button selectam din dreptul casutei Style , tipul butonului dorit .

Stabilirea denumirii butonului

11

Cu ajutorul casutei notate Button text se poate stabili denumirea butonului doriat.

Stabilirea adresei accesate prin intermediul butonului

Butonul va permite accesarea unei pagini anume doar daca se selecteaza in dreptul casutei cu denumirea Link prin intemediul optiunii Browse din dreapta pagina dorita .

Stabilirea fundalului butonului

Pentru a stabili fundalul butonului exista optiunea Bg color ce permite alegerea unei culori din gama oferita.

Salvarea butonului
Salvarea butonului se realizeaza cu ajutorul optiunii Save as .

12

Inserarea si proprietatile obiectelor Flash

Inserarea unui obiect Flash
In menu in cadrul optiunii Insert exista posibilitaea inserarii unui obiect Flash selectand optiunea Media apoi Flash . Urmatorul pas este alegeraea obiectului Flash dorit.

Stabilirea denumirii obiectului Flash

In cadrul optiunii Proprieties se selecteaza la nivelul casutei cu numele File prin intermediul pictogramei din dreapta , denumirea obiectului Flash .

13

 Stabilirea fundalului obiectului Flash

Fundalul obiectului Flash se realizeaza selectand culoarea dorita din dreptul optiunii Bg .

Stabilirea dimensiunii obiectului Flash

Pentru a stabili marimea obiectului Flash , casuta notata cu W (Width) o completam cu un numar corespunzator latimii dorite pentru obiectul Flash selectat . De asemenea casuta denumita H (Height) va fi completata cu un numar corespunzator lungimii dorite pentru obiectul Flash.

Spatierea la nivelul obiectului Flash

Acest lucru se realizeaza cu ajutorul optiunilor V space si H space unde se va completa cu numere corespunzatoare spatierii pe verticala respective pe orizontala a obiectului Flash .

14

Stabilirea de Hotspot-uri pentru o imagine

Stabilirea regiunilor pentru o imagine
Se selecteaza mai intai imaginea pentru care se vor desena regiunile apoi se va alege din menu optiunea Draw Polygon Hotspot . Astfel pe imaginea dorita se vor selecta anumitele regiuni ce vor oferi acces catre paginile dorite.

15

Deplasarea textului cu optiunea Marquee

Pentru a imprima o deplasare a textului se va folosi optiunea Marquee. Aceasta optiune necesita deschiderea paginii de lucru in modul de vizualizare Code iar apoi introducerea textului ce se va deplasa intre optiunile <marquee> si </marquee> . Pentru a se realiza un anume tip de deplasare se utilizeaza suboptiunea Behaviour . Exemplu : <marquee behaviour=alternate>TEXTUL DORIT</marquee>

16

Inserare formular de comanda (feedback form)

Inserarea unui formular de comanda sau feedback form se realizeaza prin comanda Insert din menu , selectand optiunea Form. Se allege apoi tipul casetei formularului din urmatoarele: Text field (ex. pt campurile Nume sau Prenume) Textare (ex. pt campurile Adresa sau Comentariu) Button Checkbox List/menu File field

17

Flash
Flash-ul este folosit in special pentru Programarea web/Web Design, cu ajutorul sau putand fi create acele reclame animate de pe paginile web, anumite animati, sau chiar mici programe! Flash-ul deasemenea, contine un mic limbaj de programare numit action Script! Pe baza sa putem sa programam anumite actiuni, care sa duca la buna functionare a unor mici progrmae, animatii etc! Momentan, programul cel mai util folosirea flashului este Flash Profesional 8, dar deasemenea este recomanda si flash MX(insa acesta din urma nu suporta action scripting de flash 8, deci el fiind util pentru mici animatii)

18

Construirea obiectelor n Flash

Elementele grafice pot fi desenate i remodelate direct din flash prin intermediul unor instrumente simpliste Pot fi importate din alte programe sub diverse formate Pot fi create din ActionScript: putem realiza un obiect de tip MovieClip i apoi desena n interiorul su prin intermediul unor comenzi de tip moveTo, lineTo, curveTo, fill, gradientFill .

1) Convertire la simbol:

19

2) Inserarea de key-frame-uri

3) Salvarea proiectului Flash

4) Exportul obiectului Flash

Optiumea Export : Specific modul de conversie a straturilor:
20

Fiier AI n fiier SWF Export ilustraia ntr-un singur cadru. Selectai aceast opiune pentru a pstra mtile de tiere ale stratului. Straturi AI n cadre SWF Export ilustraia de pe fiecare strat ntr-un cadru SWF separat, crend un fiier SWF animat. Straturi AI n fiiere SWF Export ilustraia de pe fiecare strat ntr-un fiier SWF separat. Vor rezulta mai multe fiiere SWF, fiecare dintre acestea coninnd un singur cadru cu ilustraia dintr-un singur strat. Straturi AI n simboluri SWF Convertete ilustraia de pe fiecare strat ntr-un simbol i o export ntr-un singur fiier SWF. Toate straturile sunt exportate ca simboluri de clipuri video SWF.

21

1 2 3 Flash menu
123 Flash Menu este un mod rapid i uor pentru a construi o gam larg de Flash meniuri. El vine cu 121 build-in template-uri, cum ar fi barele de navigare, meniuri dropdown, defilare meniuri, etc. La nceput de aceasta, ea v ofer controlul complet asupra aspectului de meniuri, inclusiv opiunile pentru specificarea font, culori, dimensiuni, etc, pentru a se potrivi cu design de site-ul dumneavoastr. Putei, de asemenea, orice embeds non fontul standard n flash meniu pentru a se asigura c utilizatorii vor vedea meniul exact aa cum ai proiectat-o. Cu ajutorul expertului public, toate aceste meniuri pot fi introduse n orice pagin de web imediat.

Crearea menu-urilor folosind programul 1 2 3 Flash menu

Pentru a realize un menu parcurgem urmatoarele etape: 1) Deschidem programul, selectam optiunea File din menu apoi click pe New.

22

2) Se alege stilul menu-ului dorit din caseta aparuta.

3) Modificam denumirea butoanelor din menu adaugand totodata legaturi spre paginile dorite. Putem deasemenea adauga sau sterge butoane folosind optiunile corespunzatoare.

23

Se modifica proprietatile menu-ului precum lungimea butoanelor , latimea lor , fontul , culoarea textului sau a butonului utilizand campurile corespunzatoare din Menu Proprieties. 4) Salvarea si publicarea menu-ului

24

25