Inainte de incepe crearea propriu-zisa a site-ului web, ma ocup de: 1. Planificare.

- Care sunt sectiunile principale ale structurii vizuale (layout)? - Stabilesc layout-ul site-ului web - Cate pagini creez? - Ce vor contine aceste pagini? - Cum vor fi paginile conectate intre ele?

2. Organizare
- Creez elementele grafice - Scot imagini de pe Internet si le modific in functie de necesitati - Creez documentele pe care utilizatorii le vor descarca de pe site - Introduc imaginile intr-un folder !images" si documentele intr-un folder !doc" (sau oricare alta denumire relevanta) - Scriu continutul pentru cele #-$% pagini ale site-ului

1. Planificare
O minima planificare a site-ului pe care vreau sa il creez implica stabilirea structurii vizuale a paginii (layout-ul site-ului) &n site contine mai multe sectiuni principale: partea de sus, numita antet sau 'eader, un meniu de navigare, continutul propriu-zis al site-ului dispus pe mai multe coloane sau randuri si partea de (os a site-ului, numita footer In cadrul acestor sectiuni, designerul decide a plasa unul sau mai multe elemente Layout-ul unui site este dat de succesiuna si pozitionarea acestor elemente in pagina web )e fapt, layout-ul unui site se bazeaza pe definirea de forme geometrice pentru ca fiecare element poate fi redus la dreptung'iuri de diferite marimi Important: *e 'artie, sau intr-un document word, creez structura vizuala (layoutului) site-ului meu In cazul acestui e+emplu, doresc pozitionarea elementului logo in partea superioara a site-ului, urmat de un meniu pe verticala, o imagine sugestiva plasata in 'eader si apoi continutul propriu-zis, impartit pe trei coloane si footerul )upa ce am stabilit structura vizuala, este necesar sa decid cate pagini va avea siteul, ce vor contine aceste pagini si cum vor fi conectate intre ele ,ezi mai (os: - -ayout .obcom - /arta site-ului .obCom

Logo-ul companiei Acasa Despre noi o!ele !e paturi "ermeni si con!itii - #ontact

O imagine in $ea!er

%n mesa& comercial: 'ine ati venit(..... Poza pro!usul 1 Poza cu pro!usul 2 Poza cu pro!usul )

#ateva info *uton

#ateva info *uton

#ateva info *uton

-orem ipsum dolor sit amet, consectetur adipiscing elit Integer nec odio *raesent libero Sed cursus ante dapibus diam Sed nisi 0ulla 1uis sem at nib' elementum imperdiet )uis sagittis ipsum *raesent mauris 2usce nec tellus sed augue semper porta .auris massa ,estibulum lacinia arcu eget nulla Class aptent taciti socios1u ad litora tor1uent per conubia nostra, per inceptos 'imenaeos Curabitur sodales ligula in libero Sed dignissim lacinia nunc Curabitur tortor *ellentes1ue nib' 3enean 1uam In sceleris1ue sem at dolor .aecenas mattis Sed convallis tristi1ue sem *roin ut ligula vel nunc egestas porttitor .orbi lectus risus, iaculis vel, suscipit 1uis, luctus non, massa 2usce ac turpis 1uis ligula lacinia ali1uet .auris ipsum 0ulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nib' 0ulla facilisi &t fringilla Suspendisse potenti 2+12. "oate !repturile rezervate o*#om ,-L

Logo-ul companiei Acasa Despre noi o!ele !e paturi "ermeni si con!itii - #ontact

O imagine in $ea!er

%n mesa& comercial: 'ine ati venit(..... Poza pro!usul 1 Poza cu pro!usul 2 Poza cu pro!usul )

#ateva info *uton

#ateva info *uton

#ateva info *uton

-orem ipsum dolor sit amet, consectetur adipiscing elit Integer nec odio *raesent libero Sed cursus ante dapibus diam Sed nisi 0ulla 1uis sem at nib' elementum imperdiet )uis sagittis ipsum *raesent mauris 2usce nec tellus sed augue semper porta .auris massa ,estibulum lacinia arcu eget nulla Class aptent taciti socios1u ad litora tor1uent per conubia nostra, per inceptos 'imenaeos Curabitur sodales ligula in libero Sed dignissim lacinia nunc Curabitur tortor *ellentes1ue nib' 3enean 1uam In sceleris1ue sem at dolor .aecenas mattis Sed convallis tristi1ue sem *roin ut ligula vel nunc egestas porttitor .orbi lectus risus, iaculis vel, suscipit 1uis, luctus non, massa 2usce ac turpis 1uis ligula lacinia ali1uet .auris ipsum 0ulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nib' 0ulla facilisi &t fringilla Suspendisse potenti 2+12. "oate !repturile rezervate o*#om ,-L

2. Organizarea materialelor
-ayout-ul creat ma obliga sa ma organizez $ 4bserv ca am nevoie de cateva elemente grafice: - un logo, - un buton pentru 5mai multe info6, - trei poze mici cu cele trei produse la promotie si - o imagine pe verticala sugestiva In acest caz am optat pentru un logo format doar din te+t, fara elemente grafice, pe care il creez in *aint sau 2irewor7s Imaginile le voi descarca de pe Internet ,a recomand site-ul flic.r, unde la o cautare avansata bisez afisarea doar acelor poze pe care le pot folosi pt uz comercial si le pot

modifica 4bserv ca pot sc'imba marimea pozei pe care o descarc -e descarc pe des7top si le redumesc Sau: 'ttp:88searc' creativecommons org8 4 alta metoda este sa caut pe google !free stoc7 p'otos" si de aici sa preiau imagini )e e+emplu: 'ttp:88www freedigitalp'otos net In scop educativ si nu comercial, puteti lua imagini de pe images google com % % .ai mult, fiecare pagina va avea un continut te/t pe care eu il pregatesc inainte de a ma apuca de crearea site-ului web Intr-un document 9ord plasez continutul pentru cele # pagini ale site-ului % : Alte !ocumente necesare In pagina !despre noi" vreau sa introduc trei imagini cu ec'ipa, in pagina !modele de paturi" vreau sa introduc o lista de preturi in format pdf pe care utilizatorul sa o poata descarca de pe site etc 4bserv ca am imagini si documente de urcat pe site -e pun in fol!ere separate Si aceste foldere le introduc intr-un fol!er central pe care il numesc mobcom (o denumire sugestiva)