Despre pagina web a firmei Nunta ca-n povesti

Acest site a fost proiectat pentru o firma virtuala, denumita Nunta ca-n povesti, ce presupune a fi drumul spre o nunta de vis, ca in povesti, dupa cum spune si numele acesteia. Prin intermediul acestui site, firma pune la dispozitia eventualilor vizitatori vizionarea tuturor 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 Ce spun clientii despre noi si descrierea activitatii firmei, cu ce anume le poate fi de folos cuplurilor ce vor sa isi lege destinele. Pagina Oferta noastra contine o varietate de produse oferite de Nunta ca -n povesti cum ar fi rochii de mireasa, bijuterii, lumanari, invitatii, toatele uneltele necesare unei nunti cu adevarat reusite. Cea de-a patra pagina denumita Contact realizeaza comunicarea intre vizitatorii interesati de produsele firmei si personal printzr-un formular de contact (feedback form). In acesta, ei sunt solicitati sa completeze spatiile create cu numele si adresa de e-mail, precum si eventualele comentarii legate de serviciile si produsele firmei. Tot in aceasta pagina gasiti informatiile de contact, adresele magazinelor si numerele de telefon pe care le puteti apela si o adresa de e-mail. In josul paginii gasim zona de cautare. Ultima pagina, dar nu si cea mai putin importanta,denumita Noutati pune la dispozitia eventualilor vizitatori ultimele produce si servicii adaugate de firma.

Despre realizarea paginii in Dreamweaver MX 2004

Dreamweaver MX 2004 este un program Macromedia de web design. El este una dintre cele mai fiabile versiuni Dreamweaver existenta in domeniul IT. Acest program ofera facilitate multiple pentru realizarea unor pagini web deosebite, fara prea mult efort, chiar si de 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 variate platforme software: Mac, Windows, dar suport n acelai timp i platforme UNIX cu ajutorul unor emulatoare software, cum ar fi Wine. 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. Printre avantajele Dreamweaver se numr:

crearea de pagini web att in mediu grafic cat si cod javascript; 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.

HTML, CSS sau

Prima dat cnd la lansarea programului apare o fereastr care va permite alegerea spaiului de lucru: primul este un spaiu de lucru integrat, n care toate ferestrele i panourile sunt bgate ntr-o fereastr de aplicaie mai mare i al doilea spaiu de lucru n care fiecare aplicaie 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 -General i apsarea butonului Change Workspace care va genera pagina de alegere a spaiului de lucru. n partea de sus avem: Menu Bar - Meniul ce conine comenzi pentru Dreamweaver. Multe opiuni din meniu sunt i n alte locaii precum n meniul windows, n panouri i n tag inspector. Ca multe alte aplicatii bara de meniu ofer acces ctre 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
2

element pe care dorim s l bagm n pagina web. n loc de acest Tab putem f olosi meniul Insert (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 obiectului selectat. Pentru a ascunde fereastra temporar se apas pe sgeata de lng Properties, pentru a vizualiza din nou tag-ul nu rmne dect s apsm din nou pe respectiva sgeat sau CTRL+ F3. In partea dreapt: Panoul sau Grupul de Panouri - conine un set de ferestre grupate mpreun. Pentru a vizualiza un panou (fereastr) nu trebuie dect s apsm pe numele respectiv. Grupul de panouri permite acces ctre Design, 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 pentru imagini, modul de transfer (ftp, none etc.) etc. n mod normal ar trebui s ne descurcm cu wizard -ul avnd n vedere c peste tot unde trebuie s tastm ceva sunt exemple sub csua de completare. Evident c orice informaie introdus la nceput poate fi modificat pe parcurs din meniul Site Edit Site care 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 site existent; Export- exportarea definirii site-ului; Importimportarea definirii site-ului. Dac am terminat cu definirea site-ului si nu avem nici o pagin n folderul stabilit apsm 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 i Files.
3

n fereastra Files vom putea vizualiza toate fiierele care se gsesc n folderul stabilit ca folder rdcin . (Dac nu avem panou Files n dreapta apsm Window - Files). Fereastra Files 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 pe care le putem folosi. O dat cu pagina am stabilit proprietile paginii. Din Modify am ales opiunea Page Properties pentru a afia fereastra cu proprieti a paginii. Salvarea paginii web se face prin: File Save As n fereastra care apare introducem un nume paginii (file name) Save.

Dreamweaver Properties Bar

1. Deschidem o pagin i tastm EXAMPLE. Daca vrem s setm mrimea textului drept 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 interpreteaz tagurile 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 i marcarea), pagina i aplicarea unui stil. Pentru a stabili fontul n Dreamweaver am selectat textul i din toolbar properties am ales fontul din lista derulant. n respectiva list fonturile sunt grupate i asta pentru ca dac un browser nu gsete primul font s-l aleag pe urmtorul etc. Dac fontul dorit nu se afl in list selectm ultima opiune din list (Edit Font list) i selectm fontul dorit din fereastra care apare. 3. Culoarea textului este by default negru dar aceasta se poate schimba folosind opiunea 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 i justify.
4

Crearea de tabele n Dreamweaver

1. Introducerea unui tabel: din seciunea Common clic pe tabel sau Insert Table sau 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 coloane

Click 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 s inserm noi rnduri la sfrit fie folosim prima variant, fie punem cursorul n ultima celul i apsm tasta TAB ce va creea un nou rnd.

Imprirea (divizarea) sau Contopirea (unirea) celulelor

Celulele 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 celula n rnduri sau coloane i numrul acestora. Alternativ, putem contopi 2 sau mai mu lte celule n una singur urmnd paii Selectare celule dorite: Modify Table Merge Cells.

tergerea de rnduri sau coloane

Pentru a terge un rnd sau o coloan din tabel trebuie s selectm rndul/coloana respectiv sau grupul de coloane/rnduri i s utilizm apoi Modify Tabel 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 fixat de cnd am fcut tabelul iniial i pot fi modicate aici. n plus, mai sunt cteva setri. Bg Color- culoarea de background a tabelului, Bg Image - imaginea de fundal a tabelului, Brdr Color - culoarea chenarului.
5

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 limii tabelului n pixeli; convert table widths to percent - transformarea modului de exprimare limii tabelului n procente; clear row heights - tergerea nlimii rndurilor precizat n caseta H; convert table heights to pixeli - transformarea modului de exprimare nlimii tabelului n pixeli; convert table heights to procent - transformarea modului de exprimare nlimii tabelului n procente.

a a

a a

Mrimi diferite

Dac 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 i introducem proprietile dorite n Properties.

abloane pentru formatarea tabelelor

Un 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 un ablon deja existent pe care s l aplicm tabelului. Fiecare ablon poate fi modificat dup dorin.

Link-uri n Dreamweaver
Link-urile sau hiperlegturile permit navigarea n cadrul unui site. Un link este compus din 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 linkuri 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 se introduce n caseta Link, se tasteaz link-ul dorit. Dac link-ul reprezint un fiier local atunci exist opiunea de a cuta i alege fiierul respectiv apsnd pe iconia de folder (unde exist 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:
6

_self - fiierul la care face trimitere link-ul se va deschide n aceeai fereastr 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 frameurile.

Inserarea imaginilor
Pentru a stabili sau modifica din proprietaile imaginii trebuie sa selectm imaginea iar n 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 de sus a paginii), Hspace (horizontal space - spaiul tot n pixeli dintre imagine i marginea din 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 va intoduce o adres webdin acest moment i caseta Target va fi activ), low src - n cazul n care imaginea este mare i ngreuneaz timpul de ncrcare a paginii, se poate stabili ca naintea acestei imagini s se ncarce o alt imagine 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). Maparea imaginii presupune suprapunerea imaginii cu zone mouse sensitive (adic va reaciona la click). 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 se afla 3 figuri geometrice un dreptungi, un cerc i un poligon. Selectnd una dintre figurile geometrice se va desena peste imagine figura geometric respectiv dupa care n toolbar-ul Properties se poate bga adresa web (link), target-ul i alt.

Inserarea de fiiere sunet i video

7

Pentru a crea un link la un fiier de sunet sau video astfel nct user -ul s-l descarce i s-l ruleze cand execut click pe link avem de urmat 2 pai: 1. 2. video. Pentru a ngloba un fiier de sunet sau video astfel nct el s nceap o dat cu ncrcarea 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 dup preferin. 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/BOTTOM definete alinierea; hspace = nr i vspacenr spaiul 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;

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

volume = 0%-100% procentajul utilizat din volumul sistemului. Pentru a ncepe cu bine crearea unei astfel de pagini, utilizatorii programului trebuie s denumeasc potrivit paginile ce vor intra n structura proiectului. Astfel, e necesar respectarea 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), n care am inclus toate datele i informaiile necesare mai trziu (inclusiv imaginile).

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 una reprezentand motoul nostru, iar apoi au fost introduse link-uri catre toate celelalte pagini ale site-ului. Acest table reprezinta practic antetul paginii. Latimea tabelului de antet este de 1000 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 cu literele una sub alta in coloana din mijloc, iar in coloanele de pe margini sunt 2 imagini representative realizate in Corel Paint Shop Pro.

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 una reprezentand motoul nostru, iar apoi au fost introduse link-uri catre toate celelalte pagini ale site-ului. Acest table reprezinta practic antetul paginii. Latimea tabelului de antet este de 1000 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 rand este impartiti in 2 celule, cea din stanga continand un motto, iar cea din dreata o imagine. Al doilea rand contine cateva povestioare spuse de catre clientii nostri despre noi. Al treilea rand este de asemenea impartit in 2 celule una continand o imagine si cateva date despre firma noastra. Ultimul rand contine un link Go Top la actionarea caruia cursorul se deplaseaza in partea cea mai de sus a paginii. Pentru realizarea acestui lucru inaintea antetului a fost inserata o anchor-a.

10

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 continuare avem un table cu doua coloane. Cel din stanga cuprinde o serie de categorii (link-uri) de produse 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 pagina similara cu Oferta noastra, singura diferenta fiind aceea ca, in corpul paginii, in partea dreapta a tabelului avem o serie de imagini cu produsele din categoria respective care sunt de fapt 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 pagina Despre noi.

11

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 un formular de cautare. In partea de sus a paginii avem acelasi antet ca si la paginile anterioare. In continuare avem un table cu mai multe linii care include mai intai informatii cum ar fi adresa agentiei noastre, telefoanele persoanelor de contact, adresele filialelor din Iasi si Bucuresti precum si o adresa de mail. In continuare se gaseste un formular de contact care cuprinde 3 campuri de tip TextField unde se introduce Numele, Telefonul si Adresa de mail a celor care vor san e contacteze 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 deschide clientul 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 Cauta se va deschide motorul de cautare Google si se vor afisa rezultatele cautarii dorite.

12

Realizarea paginii Noutati

Pagina Noutati cuprinde informatii despre cele mai noi servicii oferite de agentia noastra. 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 siteului www.picasion.com. Alaturi se gaseste un text care sugereaza clientilor nostri ca serviciile oferite de noi pentru gasirea celei mai bune oferte pentru o luna de miere perfecta sunt cele mai bune de pe piata. A doua si a treia linie a tabelului prezint ultimele doua oferte de excursii pentru luna de miere in Antalia. Si acesta pagina contine la final un link de tip anchor pentru deplasarea cu mai mare usurinta in partea de sus a paginii.

13