Studiul de caz 01 Crearea primului site Dreamweaver MX 2004

Etapa 1 Etapa 2 Etapa Etapa Etapa Etapa 3 4 5 6 – Crearea site-ului – Organizarea site-u crf r ş l re l li u ead o a ia oe : er fr ie şl io er – Definirea parametrilor paginii – Introducerea şr a textului im r f ae o ta – Inserarea şr a imaginii im r f ae o ta – sreu i e Ira ăi ex na lt hr ee g rp t i t

na ş r a i i c ret g sr im r m n a ez o ee o ta g.E.E. E n o g W î ri l ţ pn e c v ci aă b a s oe n i n e e c s sţn ti i i e ă ei t oaeo r ir ue m n e na : x . sreu i e ee grp t i t Etapa 1. gş lt hr c s I. pu n r o a ar dm r ş rg uăi i câ t p: i 1. u t e er m dl nă o e a .. 2.ao t . 4. e r ă o i n Ira ăi ex na lt hr .P ş .ro).D. Definirea parametrilor paginii. 5.N. eu i e ă i gr p x t t ăă e t r e t e -ul Pş lt oi i (inde. . e P idaen pet at dd acţ ui o d ll t rne c sie z e n s r e e el e t î e t n n m e za n s u e u c ri le . Ind rş r a textului: „. E lt N D oi e e e! x n” iţ să t . 3. numit Primul site. C r i aa s re o nr i ea r i ae a şgz t e -ului. Pş lt oi i.N.01 Studiu de caz – crearea primului site Dreamweaver MX 2004 Site-u c v v scţ l a ă i ăr î p r iă -la e e nm t en i acest studiu de caz este foarte simplu.upg-ploiesti. i ® un deceniu de tue i m rea r ca f a oe ot I . e Ira f ae ai r pi l-ul site-ului I. îo c r ui e ne a i t n da m ll o c ea mt (Basic). Crearea site-ului EXRIU EC I Ţ CREAREA UNUI NOU SITE 2 C ţ ssub Dreamweaver MX 2004.D.

SITE 1. Tane s aţul i s t m i et e Primul -ului site. MANAGE SITES. ţc ip c New Site.P P P?iar S EA JoH ).. he â d ndt l 3. apoi ex t c pb n ea l eu u cţ i ui c tl o Studii de caz 3 4... erS i ă e e l m ă a act d g ceş aa a e o Î s di Site Definition n e el ct d g aa a o for.. ac ţ n ti a i z Basic (modul v o a Basic c m p ef a e au i mi r iţ n ţ e i o i n r t i e mu ec c o Advanced).MENIUL SITE... A N. ct d g m a e l o te a ab n r No („ c ţu ua ti t ld i v o i o Do ... NEW. f z s di Site Definition for. Î el execut le n nSite mi u a i Manage Sites. Ra. 2. ” . you want to work with a server technology such as ColdFusion.. Î aaea uăr n s d i r o. P TS S r P . .. ia e uice a p xt c p r o ea l i cţ i butonul .

E uic p b n xt ea l e u u cţ i c tl o . Ra. a e ui t a a o eal o i r i cţc o i pe butonul (folder) pentru a selecta folder-u ă i ll ldn o rc c ăă a (D:\Primul site\). Îo f s a a r l n ue t c ţi n ar r tim e ă i pu a. cţ clic pe butonul . 6.5. g None.a e r 2 a a erD m a M 0 f z m ăewv X 0 i ă cr e 4ş e un rezumat al tuturor parametrilor site-ului dn or ue a . i uărae a m a lţ l o te ei iar a e ui p u u p x tc e t l o ea l b n i cţc i o . D at a c c e ă s f r as e pţ-l o n f ct ts l u o r ui d e t a eă . 4 . v b ndip x tc u r . Î elr t cte n n d l d aa mi e ni s d u u n e a d gr o. ma s vt ă 7. cţ at mt ea r î e on x t e n s e E ui a cm i .

Etapa 2. Îa l . R t pi ş pentru a ea a 1 i pţ ş e i i 2 crea folder-ul imagini.ea lu n n Files e ui c pu o x tc cţi c butonul din dreapta al mouse-ului pe site-ul Primul site. . Îu n i lţ oi c untitled cu html.  ______________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ Studii de caz 5 2. 3. Organizarea site-u cr or ş l re l li u ead o a iaf e : er fr ie şl io er EXRIU EC I Ţ CREAREA FOLDERELOR C ţl l ş r f rhtml i eoe a de ie imagini. cţc New u i Folder. PANOUL FILES. Î el n n mi u cea x tcp oxl ea le nt e ui t . NEW FOLDER 1.

Remarci:  O r structura arborescentă bv sa eţ i a cru l . ea i New cţc c Taul iu aţ m fr. e in l imagini s ţ i indeploiesti.HTML IE ŞR F I UUINDEPLOIESTI.GIF IE LI ŞR Ş SALVAREA I Cţ f r î l html. Eo i N .EXRIU EC I Ţ CRAE ERA F I ULUI INDEX. Ex tccu butonul din dreapta al mouse-ului pe folder-ul html. iar ea l cţc ui i apoi e ui p x t le file. 3. D i n e folder-ul imagini sub numele indeploiesti. E lt N . index. 2.gif (logo-ul site-ului a fr r o -ul î d e a ie l fu v il aş r I . ed f r lo o e o ăd e  Pentru moment pagina dn orW n ci ue a ma s v t e uo e ă b n ţ n nimic.P şî l m n r pi g v i ga e r ă o n . ş i e r  Ue cn ae m a s ă e p dna e el r z a eeuără p c ţ iraen r m ă îtlr o a p te v rui sr l t o a e ee m e o paginii.gif. fr e nd a o i er-ul iu şl i index. tot ceea ce am realizat a fost organizarea site-u î l ş l fr î u oen i d i n e fe i. lt .o i . Pş D e.html (pagina de index a site-ului). 6  ______________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ .html. s neiu t i ee i şl Sai i c reto aţ ae a ez l-ul site-ului I . NEW FILE 1.i) .

htm: i r r a r ai nm i i i  Page font: Verdana. Îaa ng index.  Background: #FFFF00.html e ui pu u pn i x t let l ea i b n cţc c o . Î s di Page Properties. 3. CATEGORIA APPEARANCE 1.Etapa 3. categoria Appearance d i r t n e el ct d g aa a o eţ a r f pm i i ae n i i paginii. Arial. 2. D hţ ce l e i d mt s eo n index. MENIUL MODIFY. 4. Studii de caz 7 . Definirea parametrilor paginii EXRIU EC I Ţ PARAMETRIZAREA PAGINII Fs ao Appearance (caseta de dialog Page Properties) pentru a oi tr lie i o cg ţ a d i ăir t i i ei t pm ipn fu o a e a g index. via Meniul Modify fi s dd g i ct ş a e a l o Page Properties.  Size: 24 pixels.html via Window c iu u d Files. A ţaaei Page Properties. PAGE PROPERTIES.

2. e uii eao s e a l o x t c p cg ea l cţ c tr ei a Title/Encoding. În n a id ţ z Title n ui ani. o t c Zece r e o : 8 Ra. CATEGORIA TITLE/ENCODING (1) 1. Fs n t iai ma s rţ g dn or ii i b i vt ă oi a li ou ţ din metodele: Page Properties / Bara de instrumente ale documentului / C lsT o să M d u H L.html) titlul: Zece ani. Îctd d g n aa e i Page Properties. ur PAGE PROPERTIES.EXRIU EC I Ţ ATRIBUIREA UNUI TITLU PAGINII A upn ue a (index. l i eşăb dt ngr. erT pn a aî reu aau m ălai f z a t avtl ci g s i n a i t u i e l i u oi .

01 Transitional//EN" "http://www. c o -u b eş a Î ml i d ţ n p c u â Title n ui ani. E ui pu u x t let l ea i b n cţc c o . 2. Îl n <title> dsia ne t e el mu i ce n ţ <head> î uUntitled Document en u n i lţ oi c cu Zece ani. C să ou dr s <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.w3. font-size: 24px.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.td. } --> </style></head> <body> </body> </html> Studii de caz 9 . } body { background-color: #FFFF00.BARA DE INSTRUMENTE (2) 1. Helvetica. E ui p x t le ea i View cţc c Toolbar Document (ă l l e a t d t a ns f) a o r ut i.th { font-family: Arial. charset=iso8859-2"> <title>Zece ani</title> <style type="text/css"> <!-body.org/TR/html4/loose. 2. sans-serif. t c Zece r e o : CO U SRĂ D L U S HTML (3) 1.

3. lt n cu . d n ei ţ lt u e i e e! o i ncu x n” i® e ed să t . I d ţ la tastat textul: n ui t cde r e o u r ă ît v l n e iă a dr . 4. i eg n u „. BUTONUL 1. a acc ® i e au e .. E uic î f s xt ea l n e t cţ i c rr ea a documentului index.Etapa 4.html. d nd I . E o i e ie N Pş u e D e e e! l du bc x n” ă iţ să s t â n n l a n E ui îcnro s sţr rpa x t l ll a ră e cc l c ea i o î e i ir at s i cţc u c d i na a u el cn ţ i e . Ircc l c® naat s i : sţr rpa e ia u e e l Îb Insert.html. r en u u o da t ăx „.. 2. Ra. categoria Text.. e t t t : NE au t I a u D P ş. l s rel.si dinaintea virgulei er Îp l mă cn a de ţ u sf zatl eşăr r . i . na r a e uiceu x t c pb nul ea l cţ i t o  10 . BARA INSERT. Introducerea şr a textului im r f ae o ta EXRIU EC I Ţ INTRODUCEREA UNUI TEXT I d ţ d mt n ui o e l t c î c n index. CATEGORIA TEXT.

un deceniu de existenţă!</body> 11 QUICK TAG EDITOR (2) 1. ur CO U SRĂ D L U S HTML (1) 1. A ţd u HTML ş ă ţ mt fi u r i c ls ş o să a i ui e l a ge n <sup>. E ui p s pentru a actualiza codul HTML. Ploieşti<sup>&reg. 3.D. . Sc cc l c® e aat s i . x t le t ea i t F5 cţc a c a Vaţ aa e î ili g W n zi pn ua z i bt r -un browser.</sup>.E. d al u e C să ou dr s <body> I. l ţr rpa e ia u e t e l Studii de caz 2.N.EXRIU EC I Ţ APLICAREA ELEMENTULUI DE FORMATARE <SUP> A a l n doae p ţe t er a<sup> cc l pa f i li m u f t i e el c mr at u e ®o n r r si au eic l ld o s c ls o să d u HTML/Quick Tag Editor.

Vaţ aa e î ili g W n zi pn ua z i bt r -un browser.N. un deceniu de existenţă! </body> 6. Ta şl ţ aţ ie i s su s t t i ea c <sup>. 4. Ploieşti<sup>&reg. A ţ i ad . A nt Enter pentru acceptarea elementului HTML. 5. C să ou dr s <body> I. ca s ţţt iia o a Ai c lM e a n ao H Ln t aţd T g r li u z e.  ______________________________________________________________ 12 _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ . fi c g i i Qk E r ş uT t a o 3.D.E.</sup>.2.

imaginea indeploiesti. i .gif. COMANDA IMAGE 1. 3.Etapa 5. 2. Ex t c p b n x t c p fr ea l cţ c şl i e ea l e u u cţ i ui c tl o 13 Studii de caz . rS i ă e e l ceş aa a e o Îaa d g ns d i Select Image Source. ca s ţţt iia o a Î el n nInsert e ui ponImage. MENIUL INSERT. iar apoi cte l e a o e ao -ul l ţl eie c d e uii eiuindeploiesti. . E ui îcnro s sţ aei i u l x tc n u c d iiri i ( d d i eal ll a r ă e m n m a pn cţc o î e i na ga et ăi i ţ i a d xst e te ) t ir . Inserarea şr a imaginii im r f ae o ta EXRIU EC I Ţ INSERAREA ŞFR AA E UNEI IMAGINI IO M TRA Iri iut d na etp x i sţ dd e n e m a ă t folderul imagini.gif. 4. mi u x t lemd ea i ca cţc c a Rem ă a act d g a. s tf rimagini. f z s di Select Image Source. ena ă A nt Enter.

Vaţ aa e î ili g W n zi pn b t ua z i r -un browser.5. e a ae l ţ ga ei n tm . ea aeeum ăid nţ gan ab tmu t mn i t uă i l 5. cţc b n ier nc u e ui pu u (Center).upg-ploiesti. C ri i p r î nţo de prezentare.LG TR T HIPERTEXT A uminaeuhr : t i ai ee ăa e t rţ g ir lt i e http://inde.ro. Etapa 6.1 5. e a ae l ţ ga ei n tm Î s tl n po Properties. ee gr Ira ăi na lt hipertext sreu i EXRIU EC I Ţ TRANSFORMAREA UNEI IMAGINI Î RO E ĂU Ă N .2 Sc i i. x t let l ea i c o 6. ii n stg r p x bi i t 14 1. INSPECTORUL PROPERTIES Sc i i.

. Vaţ aa e î ili g W n zi pn b t ua z i r -un browser.gif" width="122" height="69" border="0"></a> </p> 5.2. Îp u n a l . z Site n Files î o o n n a v lis t p u ii zz ua t u aţ r r r l u a iu c mi dn ort ue a s ma s i vt e ă . ă i ) File Ai c lM e a n ao H Ln t aţd T g r li u z e. ./imagini/indeploiesti. nn c l st po u http://inde.ro"> <img src=".ro.upg-ploiesti. C să ou dr s <p align="center"> <a href="http://inde. îz Link no n a i d ţ da e n ui r W : t c as r e o e b 3. 4. Saaaep ama s pn e v aţg W ( dn oraă b i l pn br u e a v ii i m v t g W !a Save. Î ier Properties.  ______________________________________________________________ _________________________________________________________________ _________________________________________________________________ 15 Studii de caz 6.upg-ploiesti.

Ta gri e er eţ ăa e t c s lt hr pa t eu p x i t e ar-o.7. ţa i t c e 16 .