| | | | | | | | | | | | | |
| <<Despre - DreamweaverMX>>
| |
| | | | | | | | | | | | | |
| Deci, programul este instalat pe calculator.NU?Dupa ce intri in program iti va aparea o fereastra de unde sa iti alegi interfata preferata de lucru si selestezi Dreamweaver 4 Workspace. Ce folosesti in permanenta: | |
| | | | | | | | | | | | | |
| | |
| Bara
de proprietati | |
| | | | | | | | | | | | | |
| |
 |
|
 |
| | | | | | | |
| | | | Bara de instrumente | | |
| | | | | | | | | | |
| | Css Style si Behaviours | | | | | | | | | |
| | | | | | | | | | | | |
| | | | | | | | | | | | | |
| Selecteaza de la View chemarul albastru, adica Layout view(vezi imaginea de mai sus cu bara de instrumente).Vei lucra mult cu layout, mai precis cu Draw Layout Table(chenar verde) si Draw Layout Cell(chener albastru).Acestea te ajuta la paginarea corecta a continutului.Layout Table este suprafata de lucru iar Layout Cell este suprafata in care se lucreaza.Acestor tabele li se pot atribui efecte cu ajutorul CSS-urilor, dar asta putin mai tarziu.Bara de proprietati este si ea extrem de importanta. Mai intai trebuie sa iti definesti site-ul.Cum? Simplu.Creezi un director pe hard-disk cu numele site-ului respectiv sau simplu un nume sugestiv.Este directorul in care vei lucra in permanenta.E directorul parinte unde iti vor fi stocate toate fisierele site-ului.Pe bara de meniuri este optiunea SITE. Adica site > New Site...Apare o fereastra.Click Advanced.In chenarul de la Site Name scrii numele site-ului, apoi la Local Root Folder faci un click pe icoana galbena si iti localizezi directorul creat.Intri in director (care este gol) si apesi butonul Select.Asa ai reusit sa iti definesti site-ul si spatiul de lucru. In directorul parinte creaza inca doua directoare:Html si Pictures unde in primul vei salva tot ce tine de paginile site-ului iar in celalalt tot ce tine de poze si butoane.poti sa faci si alte directoare dupa cum iti place.E importanta ordinea.Daca toate sunt amestecate e grav si va fi un adevarat chin sa compui site-ul. Eu iti recomand sa lucrezi cu Frame-uri sau cadre.Ce sunt ele si la ce sunt benefice?Acestea sunt pagini simple, individuale, integrate intr-una singura.Exista un frameset (componenta tuturor celorlalte frame-uri intr-o singura pagina) ce contine frame-uri secundare si intotdeauna un main frame(cadru principal in care se va deschide tot "continutul" butonului apasat). Vezi exemplul de mai jos:
| |
| | | | | | | | | | | | | |
| | | | | | | |
 |
| | |
| | | | | | | | | | | | | |
| Cum asamblezi in Dreamweaver meniul facut in Photoshop,folosind frame-uri? (Adevarul este ca se poate si fara frame-uri) | |
| | | | | | | | | | | | | |
| Fa urmatoarele: -deschide Dreamweaver-ul | |
| -pe bara de instrumente apasa butonul common care este la vedere(e scris), si din lista selecteaza optiunea frames.(optiunea numarul 4) | |
| -ceea ce vezi acolo sunt diferite moduri de a pune frame-uri.Cele de acolo sunt gata facute.Formele acestea sunt standard.Patratul colorat indica frame-ul principal.Ca sa iti faci o idee, click pe Top Frame.Atentie:daca lasi mouse-ul deasupra butoanelor vei vedea numele lor.Vei avea 3 frame-uri,top,main si frameset-ul. | |
| -click View > Visual Aids > Frame Borders, asta pentru a vedea marginile cadrelor. | |
| -frame-urile se pot selecta.Fa click pe prima jumatate din suprafata de lucru si o sa vezi ca bara aceea ce indica faptul ca poti scrie va palpaii.Blink,blink.Asta este valabil si pentru a doua jumatate din spatiul de lucru.Totusi aceste frame-uri trebuie denumite. | |
| | | | | | | | | | | | | |
| Selecteaza frame-ul1 sau cel de sus.Sub bara de meniu(File,Edit,View...etc) ai un chenar cu Untitled Document.Sterge chestia asta si scrie tu un nume,care sa fie sugestiv.EX:top(sa stii ca este frame-ul de sus).Asa faci si cu celalalt frame. | |
| | | | | | | | | | | | | |
| | | | | | | | |
 |
| | |
| | | | | | | | | | | | | |
| -deci ai denumit cele doua frame-uri.Dar am zis ca sunt 3.Pe al trei-lea il denumesti astfel.Selectezi linia ce imparte spatiul de lucru in doua.Ca mai sus vei avea un Untitles Document.Important:numele care il dai este la alegere.Poti sa scrii ce vrei.EX: :: Welcome to the Official site of Ageneratia 2004.Chestia asta va aparea pe bara de start din Windows. | |
| | | | | | | | | | | | | |
| | |
 |
| | | |
| | | | | | | | | | | | | |
| -cum salvezi frame-urile? Exista 2 modalitati. 1) modalitatea asta nu o recomand dar hai sa fie...Apesi un F12. Butonul asta te ajuta sa vezi site-ul in Internet Explorer.Imediat dupa apasare esti intrebat daca vrei sa salvezi frame-urile.De unde stii ce frame trebuie sa salvezi.Te uiti in spatele ferestrei unde este indicat cu o margine groasa(se vede bine) frame-ul care trebuie sa-l salvezi.Faci salvarile in directorul site-ului adica in Html.Toate frame-urile secundare se vor gasi in acest director, iar frame-ul principal(cel compus din toate) il vei salva neaparat in afara acelui director Html.Totul va arata asa:in directorul site-ului se vor gasi alte doua directoare Html si Pictures dar si un fisier index.html. 2) asta va recomand.Click pe primul frame.Apoi File > Save Frame As... La frame1 dai nume EX: top sau menu sau ce vrei tu.Click frame2 si il salvezi cu un nume main sau altul.Repet: aceste 2 frame-uri vin salvate in directorul Html.Mai ramane frame-ul 3.Click pe linia ce desparte frame-urile secundare.Vei observa ca marginile sunt cu linie punctata.Click File > Save frameset as... unde in casuta cu File Name vei scrie index.html.Nu doar index...mai pui si un .html (asta este pagina principala) Atentie: (in general) daca vrei sa vezi cum arata ce ai lucrat apasa F12 pentru Preview. Acum trebuie sa editezi putin frame-urile.Click dreapta pe primul frame > Page Properties si alege de la Background o culoare.Atentie:culoarea sa fie aceeasi cu cea aleasa in Photpshop cand ai dat culoare la foaia de lucru. | |
| | | | | | | | | | | | | |
| -linia ce desparte frame-urile se poate misca in sus sau in jos.Trebuie sa vezi 2 sageti opuse, cand esti cu mouse-ul deasupra liniei. Fa asta pentru a avea spatiu de lucru mai mare.Muta linia pana la jumatatea ecranului. | |
| | | | | | | | | | | | | |
| -acum trebuie sa pui un Layout table.Selecteaza frame1(top),click pe chenarul verde si traseaza un dreptunghi,dupa ochi,cam cat ar fi de mare meniul(facut in Photoshop).In continuare, ca sa asamblezi meniul vei folosi Layout Cell.Vei face multe dreptunghiuri.Atentie:tabelele(amandoua) se pot marii sau micsora dupa extremitati,marcate cu mici patratele. | |
| | | | | | | | | | | | | |
| -adauga un Layout Cell.Click chenarul albastru si pe suprafata tabelului cu verde, traseaza un dreptunghi.Chenarul il modofici pana ajunga in extremitatea din stanga sus. | |
| | | | | | | | | | | | | |
| | | | | | | | |
 |
| | |
| | | | | | | | | | | | | |
| -in interior se va gasi primul buton. | |
| -trebuie sa ai in directorul site-ului un subdirector pe care sa-l numesti butoane si sa copiezi butoanele acelea cu _on si _off in director.Click in interiorul Layout Cell-ului.Pe bara de instrumente selecteaza common.Langa imaginea cu rosu (f), ai un buton Rollover Image.Click pe buton.In fereastra ce apare nu conteaza numele.La optiunea Original Image > Browse,intra in directorul butoane pe care l-ai creeat.Click Home Page_on.La optiunea Rollover Image faci la fel dar pui Home Page_off. | |
| | | | | | | | | | | | | |
| -dupa cum vezi chemarul albastru este putin mai mare decat butonul Home Page.Selecteaza chenarul si micsoreaza-l pana la extremitatile butonului. | |
| | |
| | | | | | | | | | | | | |
| -asa vei face si pentru restul butoanelor. | |
| | | | | | | | | | | | | |
| -acum trebuie sa pui in pagina. Adica sa dai meniului o pozitie mai convenabila.Click dreapta pe Layout Table > Align > Center. Asa ai pus chenarul verde la mijloc. | |
| | | | | | | | | | | | | |
| | | | | | | | |
 |
| | |
| | | | | | | | | | | | | |
| -selecteaza frame-ul 2, traseaza un Layout Table(nu prea mare, sa fie potrivit). Acum folosesti bara de proprietati.Ideea este ca trebuie ca ambele tabeluri sa fie egale ca latime.PAS1:selectezi primul Layout Table din frame1.Pe bara de proprietati vei avea Width si Height, de unde trebuie sa ti minte numarul de la Width.PAS2:acum selectezi Layout Table din frame-ul 2 si in loc de valoarea care este trecuta acolo la Width scrii tu numarul de la tabelul celalalt (width). | |
| | | | | | | | | | | | | |
| | |
| | | | | | | | | | | | | |
| - Align > Center si pentru Layout Table-ul din frame-ul 2. Pentru acest tabel inaltimea sa fie mare(cam cat ecranul, daca nu mai mare).Pune un background.Selecteaza tabelul si pe bara de proprietati gasesti un chenar (patrat mic Bg) de unde pui o culoare.Apasa un F12 si ai sa vezi ca tabele nu sunt chiar unul sub altul.Ar trebui sa rezolvi si problema asta.Cum? Click pe bara de meniu Window > Other > Frames sau Shift +F2. In fereastra ce apare ai toate frame-urile (de unde poti sa le selectezi).Click pe TopFrame din aceasta fereastra. Pe bara de proprietati click Scroll > auto.Acum apasa F12 si vezi diferenta. | |
| | | | | | | | | | | | | |
| -main frame-ul este cel care il multiplici pentru a obtine suprafetele de lucru pentru toate botoanele.Adica EX: daca eu apas butonul despre noi imi afiseaza ceva in frame2(sau main), daca apas butonul poze imi afiseaza ceva tot in main frame etc.De fapt imi afiseaza doar continuturi diferite in schimb suprafata ce cuprinde continutul este aceeasi,doar ca are alt nume. -in main frame traseaza un Layout Cell si scrie ceva(orice).Apasa ctrl+S (salvarea fisierului).Sterge ce ai scris initial si scrie altceva.Daca vrei pune si un background.Apoi click File > Save as... tot in directorul Html dar scrie alt nume.Poti scrie exact numele butonului care apasat te va duce la continutul paginii respective.Inca odata sterge ce ai scris si scrie altceva.Salveaza tot in acelasi director.Acum ai 3 pagini carora le vor fi asociate 3 butoane(Home Page, Despre noi, Autori). -cum faci link-urile?Click pe butonul Home Page, cel din frame1(cel facut in Photoshop).Pe bara de proprietati scrie undeva link.Dai click pe fisierul galben.Iti alegi din directorul Html main.htm apoi click OK. Mai jos de link ai target de unde selectezi Main Frame.Asa faci si pentru celelalte butoane.Apasa apoi F12 si vezi efectul.
-fonturile le selectezi de pe bara de proprietati.Culoarea si marimea
la fel.Este ca in Word. | |
| | | | | | | | | | | | | |
| -in concluzie lucrezi mult cu chenarele.Despre Css-uri nu iti mai spun ca nu mai pot.Daca vrei poti sa ma intrebi si iti voi explica.
-ceea ce am prezentat mai sus, sunt chestii usoare. Ai nevoie de putina
imaginatie.
Sper sa imi intelegi "scrisul" si sa te descurci.Daca ai
intrebari nu ezita sa intrebi.OK?
Sa scuzi greselile de ortografie. | |
| | | | | | | | | | | | | |
| THE END | |
| | | | | | | | | | | | | |
| | |
| | | | | | | | | | | | | |