proiect practica isa

7/16/2019 Proiect Practica ISA

1/13

Despre pagina web a firmei Nunta ca-n povesti

Acest site a fost proiectat pentru o firma virtuala, denumita Nunta ca-n povesti, cepresupune a fi drumul spre o nunta de vis, ca in povesti, dupa cum spune si numeleacesteia.

Prin intermediul acestui site, firma pune la dispozitia eventualilor vizitatori vizionareatuturor produselor necesare unui cuplu pt organizarea unei nunti, incepand cu rochii,accesorii si pana la aranjamente.

Site-ul este realizat in Dreamweaver MX 2004, program produs de Macromedia.

Site-ul contine Pagina principala (index.html)

Urmatoarea pagina Despre noi contine motto-ul firmei, o mica poveste intitulata Cespun clientii despre noi si descrierea activitatii firmei, cu ce anume le poate fi de foloscuplurilor ce vor sa isi lege destinele.

Pagina Oferta noastra contine o varietate de produse oferite de Nunta ca-n povesticum ar fi rochii de mireasa, bijuterii, lumanari, invitatii, toatele uneltele necesare uneinunti cu adevarat reusite.

Cea de-a patra pagina denumita Contact realizeaza comunicarea intre vizitatoriiinteresati de produsele firmei si personal printzr-un formular de contact (feedback form). Inacesta, ei sunt solicitati sa completeze spatiile create cu numele si adresa de e-mail, precum sieventualele comentarii legate de serviciile si produsele firmei. Tot in aceasta pagina gasitiinformatiile de contact, adresele magazinelor si numerele de telefon pe care le puteti apela sio adresa de e-mail.

In josul paginii gasim zona de cautare.

Ultima pagina, dar nu si cea mai putin importanta,denumita Noutati pune ladispozitia eventualilor vizitatori ultimele produce si servicii adaugate de firma.


2/13

2

Despre realizarea paginii in Dreamweaver MX 2004

Dreamweaver MX 2004 este un program Macromedia de web design. El este unadintre cele mai fiabile versiuni Dreamweaver existenta in domeniul IT. Acest program oferafacilitate multiple pentru realizarea unor pagini web deosebite, fara prea mult efort, chiar side catre neinformaticieni, deoarece creeaza automat codurile HTML necesara functionarii

paginii respective.Dreamweaver s-a bucurat de un larg succes nc de la sfritul anilor '90 i momentan

deine aproximativ 80% din piaa editoarelor HTML. Produsul poate fi rulat pe variateplatforme software: Mac, Windows, dar suport n acelai timp i platforme UNIX cuajutorul unor emulatoare software, cum ar fi Wine.

Dreamweaver permite folosirea majoritii browserelor instalate pe calculatorulutilizatorului, pentru a previzualiza website-ul creat. De asemenea, conine i cteva utilitarepentru administrarea site-urilor, cum ar fi cele pentru a gsi i modifica un paragraf sau olinie de cod, n ntregul web site, pe baza oricror parametri specificai de ctre utilizator. Cuajutorul panourilor de stare se poate crea cod JavaScript fr a avea cunotine de

programare.Printre avantajele Dreamweaverse numr:

crearea de pagini web att in mediu grafic cat si cod HTML, CSS saujavascript;

posibililitatea verificrii link-uri din site; verificarea compatibilitii site-ului pe mai multe browsere; upload-ul site-ului pe un server web; actualizarea / ntreinerea n timp optim a site-ului.

Prima dat cnd la lansarea programului apare o fereastr care va permite alegereaspaiului de lucru: primul este un spaiu de lucru integrat, n care toate ferestrele i panourilesunt bgate ntr-o fereastr de aplicaie mai mare i al doilea spaiu de lucru n care fiecareaplicaie se afl n propria fereastr separat iar panourile nu sunt grupate ntr-o singur

fereastr. Dac mai trziu dorim o modificare o vom face din Edit -Preferences -Generaliapsarea butonului Change Workspace care va genera pagina de alegere a spaiului delucru.

n partea de sus avem:

Menu Bar - Meniul ce conine comenzi pentru Dreamweaver. Multe opiuni dinmeniu sunt i n alte locaii precum n meniul windows, n panouri i n tag inspector. Camulte alte aplicatii bara de meniu ofer accesctre comenzile programului, precum File -Save, Edit - Undo, View- Zoom in ..etc

Insert Bar - Conine o serie de butoane ce permite inserarea diferitelor obiecte,precum text sau imagini. Exist diferite Insert Bars pe care le poi alege, depinde de tipul de


3/13

3

element pe care dorim s l bagm n pagina web. n loc de acest Tab putem folosi meniulInsert (din Meniu Bar) care conine aceleai opiuni.

Fereastra de lucru - spaiu efectiv unde vom lucra, modifica, aranja, etc. pagina web.

Partea de jos:

Properties Inspector - denumit i Tag Inspector - afieaz proprietile obiectuluiselectat. Pentru a ascunde fereastra temporar se apas pe sgeata de lng Properties, pentru avizualiza din nou tag-ul nu rmne dect s apsm din nou pe respectiva sgeat sauCTRL+ F3.

In partea dreapt:

Panoul sau Grupul de Panouri - conine un set de ferestre grupate mpreun. Pentrua vizualiza un panou (fereastr) nu trebuie dect s apsm pe numele respectiv. Grupul de

panouri permite acces ctreDesign, Code, Application, Tag, Files, Layers i History.

n Dreamweaver se pot edita paginile web in:

Design View - n modul Design/Grafic - vizualiznd direct modificrile fcute; Code View - n codul HTML, pentru cei care cunosc limbajul; Code & Design View (Split) - modul mixt - care mparte fereastra de lucru in 2:

cod i design.

Crearea unui nou site

Pentru crearea unui site nou n Dreamweaver se utilizeaz meniul Site New Site.Dreamweaver cere o serie de informaii in legtur cu respectivul site, precum numele site -ului pe care dorim s-l dam, folder-ul n care se afl sau se vor afla fiiere, folderul pentruimagini, modul de transfer (ftp, none etc.) etc.

n mod normal ar trebui s ne descurcm cu wizard-ul avnd n vedere c peste totunde trebuie s tastm ceva sunt exemple sub csua de completare. Evident c oriceinformaie introdus la nceput poate fi modificat pe parcurs din meniul Site Edit Sitecare va deschide o fereastr de editare n care vor aprea toate informaiile site-ului local.

Respectiva fereastr are: New - definire nou site, Edit - editare site deja existent,Duplicate - crearea unei dubluri a unui site deja existent, Remove - tergerea unui siteexistent; Export- exportarea definirii site-ului; Importimportarea definirii site-ului.

Dac am terminat cu definirea site-ului si nu avem nici o pagin n folderul stabilitapsm File New unde va aprea o fereastr i vom alege General (la category) i (la

basic page) HTML Create. n dreapta apare panoul cu grupuri de panouri printre care iFiles.


4/13

4

n fereastra Files vom putea vizualiza toate fiierele care se gsesc n folderul stabilitca folder rdcin. (Dac nu avem panou Files n dreapta apsm Window - Files). FereastraFiles ofera 3 moduri de vizualizare a paginilor site-ului:

Local View - vizualizare local (n folderul din pc) Remote View - vizualizare server ( n folderele din hosting) Map View - vizualizare pagini sub forma unei mape artnd legtura

(link-urile) dintre pagini.

Am ales Local View pentru a nelege i alte panouri i comenzi din Dreamweaver pecare le putem folosi.

O dat cu pagina am stabilit proprietile paginii. Din Modify am ales opiunea PageProperties pentru a afia fereastra cu proprieti a paginii.

Salvarea paginii web se face prin: File Save As n fereastra care apare introducemun nume paginii (file name) Save.

Dreamweaver Properties Bar

1. Deschidem o pagin i tastmEXAMPLE. Daca vrem s setm mrimea textuluidrept paragraf sau heading (titlu), deschidem properties (CTRL+F3) i ne uitm la drop down

menu.Stilul Preformatted (preformatat) - textul introdus va pstra n pagina web spaiile i

capetele de linie introduse n codul HTML. n mod normal codul HTML interpreteaztagurile unele dupa altele fr a ine cont de spaiile i capetele de linie, ns acest stil ne

permite s stabilim poziia unui obiect direct din codul HTML.

2. Pentru alegerea fontului si mrimii tot din Properties vom seta Font i Size.

Textul care apare ntr-o pagina web suport formatrile la nivel de caracter ( s fie

modificate font, culoare, dimensiune, grosime/nclinare), paragraf (alinierea, spaierea imarcarea), pagina i aplicarea unui stil.

Pentru a stabili fontul n Dreamweaver am selectat textul i din toolbar properties amales fontul din lista derulant. n respectiva list fonturile sunt grupate i asta pentru ca dacunbrowser nu gsete primul font s-l aleag pe urmtorul etc. Dac fontul dorit nu se afl inlist selectm ultima opiune din list (Edit Font list)i selectm fontul dorit din fereastracare apare.

3. Culoarea textului este by default negru dar aceasta se poate schimba folosindopiunea Text Color. Fcnd click pe Text Color fereastra cu paleta de culori se va deschide.Se poate schimba i textul ngroat (B) sau nclinat (I) i putem schimba i aliniatul textului:stnga, centrat, dreapta ijustify.


5/13

5

Crearea de tabele n Dreamweaver

1. Introducerea unui tabel: din seciunea Common clic pe tabel sau Insert Tablesau Ctrl+Alt+ T.

2. Setarea tabelului

Width este limea tabelului i se poate exprima n mrime absolut(pixeli) sau relativ (procente).

Columns - numrul de coloane dorit. Rows - numrul de rnduri dorit. Border - dimensiunea n pixeli a chenarului (marginea tabelului). Dac nu

dorim s aiba chenar setm dimensiunea 0(zero). Cell Padding - dimensiunea dat mrimii celulei i textului. Cell Spacing - distana dintre cellule.

O dat ce am apsat OK avem deja tabelul creat.

Aaugarea de rnduri sau coloaneClick dreapta acolo unde dorim s bgm o nou coloan sau rnd selectnd Tabel

Insert Row/Column. (above sau below). Dac tabelul este deja completat cu date i dorim sinserm noi rnduri la sfrit fie folosim prima variant, fie punemcursorul n ultima celuli apsm tasta TAB ce va creea un nou rnd.

Imprirea (divizarea) sau Contopirea (unirea) celulelorCelulele pot fi mprite n multiple coloane i rnduri. Facem click pe celula dorit i

apoi Modify Table Split Cell. n fereastra nou aprut putem alege s mprim celulan rnduri sau coloane i numrul acestora. Alternativ, putem contopi 2 sau mai mu lte celulen una singur urmnd paii Selectare celule dorite: Modify Table Merge Cells.

tergerea de rnduri sau coloanePentru a terge un rnd sau o coloan din tabel trebuie s selectm rndul/coloana

respectiv sau grupul de coloane/rnduri i s utilizm apoi ModifyTabel Delete Row/Column.

n bara Properties putem seta cam tot ce ne trebuie pentru un tabel. Rows, Cols, W(width - lime), H (height-nlime), CellPad, CellSpace, Border- setri pe care le-am fixatde cnd am fcut tabelul iniial i pot fi modicate aici.

n plus, mai sunt cteva setri. Bg Color- culoarea de background a tabelului, BgImage - imaginea de fundal a tabelului, Brdr Color - culoarea chenarului.


6/13

6

n stnga jos sunt 6 imagini n ordine reprezint:

clear colum widths - tergerea limii pecizat n caseta W; convert table widths to pixeli - transformarea modului de exprimare a

limii tabelului n pixeli; convert table widths to percent - transformarea modului de exprimare a

limii tabelului n procente; clear row heights - tergerea nlimii rndurilor precizat n caseta H; convert table heights to pixeli - transformarea modului de exprimare a

nlimii tabelului n pixeli; convert table heights to procent - transformarea modului de exprimare a

nlimii tabelului n procente.

Mrimi diferiteDac dorim ca o celul, un rnd sau o coloan s aib alte dimensiuni dect ntregul

tabel fie lucrm n design view trgnd de margini fie selectm celula/ rndul/ coloana iintroducem proprietile dorite n Properties.

abloane pentru formatarea tabelelorUn ablon grupeaz un set de formatri care vor fi aplicate tabelului selectat. Din

meniu Commands alegem Format tabel.Se va deschide o fereastr de unde putem alege unablon deja existent pe care s l aplicm tabelului. Fiecare ablon poate fi modificat dupdorin.

L ink-ur i n Dreamweaver

Link-urile sau hiperlegturile permit navigarea n cadrul unui site. Un link este compusdin elementul surs (ancora) i elementul destinaie.

Ancora poate fi un text, o imagine sau orice alt obiect. Link-urile poti fi:

absolute - calea complet ctre elementul de destinaie; relative - conine doar ultima parte a link-ului pagina.html, aceste link-

uri se folosesc doar dac paginile se gsesc n acelai folder.

Pentru a ataa un link unui text mai nti se selecteaz textul apoi din Properties seintroduce n caseta Link, se tasteaz link-ul dorit. Dac link-ul reprezint un fiier localatunci exist opiunea de a cutai alege fiierulrespectiv apsnd pe iconia de folder (undeexist i iconia de ceas) de lng caseta Link.

Pentru a atasa un link unei imagini paii sunt la fel, a nu se uita ca trebuie mai intai

selectat imaginea!

Tot n Dreamweaver cand punem un link avem opiunea de target:


7/13

7

_self - fiierul la care face trimitere link-ul se va deschide n aceeaifereastr n care se afl i link-ul;

_blank- o nou fereastr; _parent- se va deschide n fereastra printe sau frame-ul printe ale

ferestrei curente; _top - se va deschide ntr-o fereastr de browser nlturnd toate frame-

urile.

I nserarea imagin il or

Pentru a stabili sau modifica din proprietaile imaginii trebuie sa selectm imaginea iarn toolbar-ul Properties facem schimbrile dorite.

n afar de W (width - lime imagine) i H (height - nlime imagine)vom observa i

Vspace (vertical Sapce - spaiul n pixeli dintre imagine i marginea desus a paginii),

Hspace (horizontal space - spaiul tot n pixeli dintre imagine i margineadin stnga a paginii), src (sursa imaginii - calea pn la fiierul unde se afl imaginea),

Link (dac imaginea se dorete a fi un link n respectiva csu se vaintoduce o adres webdin acest moment i caseta Target va fi activ),

low src - n cazul n care imaginea este mare i ngreuneaz timpul dencrcare a paginii, se poate stabili ca naintea acestei imagini s se ncarce o altimagine schiat,

ALT - textul care va aprea cnd se va trece cu mouse-ul peste imagine(atenie este important pentru SEO s stabilii textul acesta folosind un cuvnd cheie),

border (chenarul imaginii), align (alinierea imaginii), un buton EDIT( care va declana editorul Fireworks pentru prelucrarea

imaginii) i alt buton Reset Size (resetare dimensiuni).

Tot n toolbar-ul Properties se alf i opiunea pentru map-area imaginii (Map). Map-

area imaginii presupune suprapunerea imaginii cu zone mouse sensitive (adic va reaciona laclick). Map-area imaginii nseama mprirea imaginii pe zone (hotspots - pct. fierbinti),zone care acioneaz ca un link care deschide o nou fereastr n urma unui click.

n dreptul csuei Map se va introduce un nume unic (de ex Mapa). Sub casua Map seafla 3 figuri geometrice un dreptungi, un cerc i un poligon. Selectnd una dintre figurilegeometrice se va desena peste imagine figura geometric respectiv dupa care n toolbar-ulProperties se poate bga adresa web (link), target-ul i alt.

Inserarea de fiiere sunet i video


8/13

8

Pentru a crea un link la un fiier de sunet sau video astfel nct user-ul s-l descarce is-l ruleze cand executclick pe link avem de urmat 2 pai:

1. Se selecteaz textul/imaginea dorit.2. n Properties la Link se introduce adresa web ctre fiierul de sunet sau

video.

Pentru a ngloba un fiier de sunet sau video astfel nct el s nceap o dat cuncrcarea paginii trebuie s urmm civa pai:

1. Se deschide pagina n care se dorete sunetul respectiv.2. Punem cursorul n pagin n locul unde se dorete s apar controller-ul

de sunet.3. Prin metoda drag and drop se adaug fiierul respectiv i se

redimensioneaz duppreferin.

Parametrii fiierelor de sunet

src = - obligatoriu, este sursa fiierului; type=[tipMIME]pentru tipul de fiiere MIME; name = numele fiierului de sunet sau video. Dac se utilizeaz

aceast valoare trebuie inclus i atributul master-sound (fr valori); hidden - ascunde controller-ul; height i width -pentru determinarea nlimii i lungimii controller-ului

vizibil align =LEFT/RIGHT/TOP/BOTTOMdefinete alinierea; hspace = nr i vspacenrspaiul n jurul controller-elor vizibile; autostart (autoplay) = true/false - determin rularea sunetului sau

imaginii imediat ce se incarc; controls = console/smallconsoe/true/false - dac fiierul de sunet sau cel

video va avea controale i n ce stil; loop = true/false/nr (specificarea numrului) - determin dac sunetul

sau imaginea va fi rulat continuu;

volume = 0%-100% procentajul utilizat din volumul sistemului.

Pentru a ncepe cu bine crearea unei astfel de pagini, utilizatorii programului trebuie sdenumeasc potrivit paginile ce vor intra n structura proiectului. Astfel, e necesarrespectarea anumitor reguli. De exemplu, n denumirea fiierelor create nu se folosesc spaii,trebuie evitate majusculele (deoarece s-ar putea crea confuzii la o nou accesare a acestora),nu se folosesc caracterele speciale, iar extensiile fiierelor trebuie s fie de tipul .html sau .htm . Astfel, am creat un folder de baz al site-ului ce urma s fie creat (un root folder), ncare am inclus toate datele i informaiile necesare mai trziu (inclusiv imaginile).


9/13

9

Prezentarea detaliata a fiecarei pagini in parte

Realizarea primei pagini Pagina principala

Pagina Despre noi reprezinta pagina de inceput a site-ului nostru.Background-ul acestei pagini si al tuturor celorlalte este reprezentat de o imagine de

tip .gif reprezentand niste trandafiri, imagine oarecum reprezentativa temei site-ului.In partea de sus a paginii avem un table cu doua randuri si doua coloane in celulele

caruia au fost inserate mai intai doua imagini, una reprezentand sigla firmei si unareprezentand motoul nostru, iar apoi au fost introduse link-uri catre toate celelalte pagini alesite-ului. Acest table reprezinta practic antetul paginii. Latimea tabelului de antet este de1000 pix, aceasta fiind fixa indiferent de rezolutia monitorului pe care se vizualizeaza site-ul(de aceea recomandam o rezolutie minima de 1024 x 768).

In continuare se gaseste un tabel cu o linie si trei coloane care contine un text scris culiterele una sub alta in coloana din mijloc, iar in coloanele de pe margini sunt 2 imaginirepresentative realizate in Corel Paint Shop Pro.


10/13

10

Realizarea paginii Despre noi

Pagina Despre noi cuprinde informatii despre firma noastra.In partea de sus a paginii avem un table cu doua randuri si doua coloane in celulele

caruia au fost inserate mai intai doua imagini, una reprezentand sigla firmei si unareprezentand motoul nostru, iar apoi au fost introduse link-uri catre toate celelalte pagini alesite-ului. Acest table reprezinta practic antetul paginii. Latimea tabelului de antet este de1000 pix, aceasta fiind fixa indiferent de rezolutia monitorului pe care se vizualizeaza site-ul(de aceea recomandam o rezolutie minima de 1024 x 768).

Corpul paginii este de asemenea format dintr-un table cu patru randuri. Primul randeste impartiti in 2 celule, cea din stanga continand un motto, iar cea din dreata o imagine. Aldoilea rand contine cateva povestioare spuse de catre clientii nostri despre noi. Al treilearand este de asemenea impartit in 2 celule una continand o imagine si cateva date despre

firma noastra. Ultimul rand contine un link Go Topla actionarea caruia cursorul sedeplaseaza in partea cea mai de sus a paginii. Pentru realizarea acestui lucru inainteaantetului a fost inserata o anchor-a.


11/13

11

Realizarea paginii Oferta noastra

Pagina Oferta noastra cuprinde informatii despre serviciile oferite de noi.

In partea de sus a paginii avem acelasi antet ca si la paginile anterioare. In continuareavem un table cu doua coloane. Cel din stanga cuprinde o serie de categorii (link-uri) deproduse oferite de noi, iar cea din dreapta contine un gif animat si text sugestiv paginii.

La apasarea oricarui link ce contine categorii de produse va deschide o noua paginasimilara cu Oferta noastra, singura diferenta fiind aceea ca, in corpul paginii, in parteadreapta a tabelului avem o serie de imagini cu produsele din categoria respective care sunt defapt niste link-uri ce vor avea ca efect deschiderea imaginii respective intr-o fereastra noua,la dimensiune maxima. Aceste subpagini au la final link-ul Go Top, prezentata la paginaDespre noi.


12/13

12

Realizarea paginii Contact

Pagina Contact cuprinde informatii despre agentia noastra, cum putem fi contactati,precum si un formular prin care cei care doresc ne pot scrie. Tot aici mai este inclus si unformular de cautare.

In partea de sus a paginii avem acelasi antet ca si la paginile anterioare. In continuareavem un table cu mai multe linii care include mai intai informatii cum ar fi adresa agentieinoastre, telefoanele persoanelor de contact, adresele filialelor din Iasi si Bucuresti precum sio adresa de mail.

In continuare se gaseste un formular de contact care cuprinde 3 campuri de tipTextField unde se introduce Numele, Telefonul si Adresa de mail a celor care vor san econtacteze precum si o zona de tip TextArea unde doritorii pot introduce un text mai lung.

Formularul se activeaza cu ajutorul butonului Trimite la actionarea caruia se deschideclientul de mail de pe statia utilizatorilor pentru a putea fi trimise informatiile din acest

formular catre adresa noastra de mail.Aceasta pagina mai cuprinde si un formular de cautare petru interactivitatea site-ului

nostru. Doritorii vor tasta un text dorit in casuta destinata, iar la actionarea butonului Cautase va deschide motorul de cautare Googlesi se vor afisa rezultatele cautarii dorite.


13/13

13

Realizarea paginii Noutati

Pagina Noutati cuprinde informatii despre cele mai noi servicii oferite de agentianoastra.

In partea de sus a paginii avem acelasi antet ca si la paginile anterioare. In continuare

avem un table cu trei linii. Prima linie cuprinde un gif animat realizat prin intermediul site-ului www.picasion.com. Alaturi se gaseste un text care sugereaza clientilor nostri caserviciile oferite de noi pentru gasirea celei mai bune oferte pentru o luna de miere perfectasunt cele mai bune de pe piata.

A doua si a treia linie a tabelului prezint ultimele doua oferte de excursii pentru lunade miere in Antalia.

Si acesta pagina contine la final un link de tip anchor pentru deplasarea cu mai mareusurinta in partea de sus a paginii.
http://www.picasion.com/http://www.picasion.com/http://www.picasion.com/

proiect practica isa

Documents