Cum implementez layout-ul in pagina web ?

Discutii despre idei - probleme legate de design, layout, scheme de culori, navigare.Adobe Photoshop,Jasc PaintShop Pro, Corel, Fireworks si alte aplicatii.

Moderator: Moderatori

abytza22
Average Member
Mesaje: 105
Membru din: Dum Iun 06, 2010 4:25 pm

Cum implementez layout-ul in pagina web ?

Mesajde abytza22 » Lun Iun 21, 2010 7:16 pm

Salutare tuturor!
De curand, am terminat de facut un layout, iar acum am inteles ca trebuie sa il introduc in deamweaver, dar am o nelamurire.....daca layout-ul este creat in photoshop, apoi bagat in dreamweaver si acesta genereaza cod HTML, atunci de ce mai am nevoie de CSS si HTML ?
Adica dreamweaver este facut pentru a-mi usura munca sau pentru a ma prostii mai tare incat sa nu invat codurile?

Deci eu am o pagina web, contine o aplicatie php care se conecteaza la baza de date, o aplicatie JavaScript, ceva cod CSS si HTML, dar nu sunt multumit de design, asa ca am zis sa creez un layout in photoshop, zis si facut. Dar acum habar nu am ce trebuie sa fac mai departe incat sa inlocuiesc vechiul design cu cel nou.
In tutorialele mele (si credeti-ma ca am multe) nu gasesc nimic bun, doar ceva legat despre dreamweaver, dar eu vreau sa invat sa creez pagini web, nu sa imi creeze un program site-ul in 5 minute.

Specific ca nu stiu prea multe despre dreamweaver, dar din cate "am auzit", am inteles ca programul creeaza pagini web pentru cei care nu stiu cod HTML si CSS, sau pentru cei lenesi, corect? sau n-am inteles eu bine?

Va rog veniti cu sfaturi !!! Va multumesc!



Avatar utilizator
vectorialpx
Senior Member
Mesaje: 4830
Membru din: Mar Mar 01, 2005 9:48 am
Localitate: Bucuresti
Contact:

Mesajde vectorialpx » Lun Iun 21, 2010 9:35 pm

E mult de povestit pe tema asta, pentru ca depinde ce vrei sa faci. Daca vrei sa mergi departe cu web-ul (adica, until death :)) atunci Dreamwaver nu te poate ajuta decat cu partea de sugestii si coloritul frumos. Pentru asta poti folosi si notepad++ sau altele, pentru ca e cel mai indicat sa scrii codul de mana, fara alte ajutoare.

Daca vrei doar sa faci o pagina web si gata [un proiect, ceva] atunci e indicat sa folosesti Dreamwaver-ul cu partea vizuala, pentru ca iti usureaza timpul si nu trebuie sa inveti unele chestii.

Referitor la taiat un layout, ai de indurat... trebuie sa inveti sa-ti stabilesti o imagine vizuala a unor obiecte si a pozitiei lor. Poti sa incepi prin a fura elemente si tehnica de la alte site-uri [vezi pe www.CSSremix.com ], cum sunt taiate, cum e CSS-ul si, poate te prinzi. Dar mai intai, trebuie sa ai cunostinte de baza de xHTML / CSS

are Birkoff tutoriale si, gasesti o multime pe google

Avatar utilizator
Birkoff
Senior Member
Mesaje: 6378
Membru din: Joi Mar 18, 2004 2:34 pm
Localitate: Bucuresti
Contact:

Mesajde Birkoff » Lun Iun 21, 2010 9:54 pm

designerul creaza layoutul site-ului intr-un program de grafica (gen photoshop) dupa care acesta arata ca o poza de o dimensiune fixa si urmeaza a fi taiat pe bucati si fiecare bucata bagata intr-o pagina html si aranjat cu ajutorul codului css ca sa arate ok pe orice browser.

aranjarea fiecarei bucati din layout se face mai simplu cu dreamweaver dar nu e neaparat necesar (adica poti scrie codul html si css si in notepad, important e sa stii ce sa scrii ca sa compui template-ul final care sa se vada ok pe toate browserele)

dupa ce ai template-ul aranjat si finalizat abia atunci il poti implementa in aplicatia ta.

photoshop, dreamweaver, eclipse sunt doar programe care te ajuta sa faci treaba mai rapid dar asta nu inseamna ca nu trebuie sa mai intervi si tu pe ici pe colo cu o bucata de cod ca sa arate cum trebuie...
1) CMS, ERP, CRM, etc... (doar pentru clienti))
2) Portofoliu, servicii, contact, blog
3) Folositi aceasta clasa sql in proiectele voastre (open source)
4) Vrei un magazin virtual la cheie, usor de folosit, cu api-uri incluse pentru maximizarea vanzarilor si multe alte facilitati? Da un semn si discutam.

abytza22
Average Member
Mesaje: 105
Membru din: Dum Iun 06, 2010 4:25 pm

Mesajde abytza22 » Mar Iun 22, 2010 1:38 am

Cred ca m-am prins cum sta treaba, fac meniul si iconitele in photoshop ca sa arate asa cum imi doresc eu, ( dar doar meniul si iconitele, nu sa fac tot site-ul in photoshop si sa-l introduc in dreamweaver pentru generare de cod, nu vreau sa folosesc dreamweaver deocamdata, poate pe viitor pentru rapiditate) apoi exportex imaginile cu meniul si iconitele din photoshop in "nu stiu" ce format (probabil jpeg) si le introduc cu ajutorul CSS in pagina , e corect?

Ma gandesc ca nu pot sa creez un site dragut doar cu css si html, fara photoshop, nu?

Eu am site-ul colorat si aranjat cu CSS, dar nu arata asa cum as vrea eu, e prea patratos si pare in stil vechi, cu photoshop pot sa creez exact ce imi doresc, pot sa imi pun imaginatia la lucru si pagina sa fie exact asa cum imi doresc eu.

Acum am meniul site-ului facut in CSS, am header, leftnav, rightnav, footer ,e ok cat de cat, dar e uratel, consider ca CSS e bun pentru fonturi , aranjarea in pagina etc. , dar cand vine vorba de design e cam limitat, cred ca ceva gen photoshop e necesar.

Stiti ce mi se pare ciudat, ca ma uit la posturi de webdesigneri pe site-uri cu job-uri si vad ca se cere Dreamweaver, probabil pentru rapiditate, nu?

Va multumesc pentru raspunsuri , voi doi mereu m-ati ajutat !
Scuze daca pun intrebari stupide, dar nu am nici o luna de cand incerc sa descopar acest domeniu, care ma fascineaza pe zi ce trece, nu stiu ce sa incerc sa invat mai repede, sunt atat de multe de invatat incat ma pierd printre ele, ma trezesc dimineata si nu stiu ce sa invat mai repede in ziua respectiva!

Avatar utilizator
Birkoff
Senior Member
Mesaje: 6378
Membru din: Joi Mar 18, 2004 2:34 pm
Localitate: Bucuresti
Contact:

Mesajde Birkoff » Mar Iun 22, 2010 2:10 am

CSS nu se foloseste pentru design ci pentru stilizarea si aranjarea continutului si a paginii.
Design-ul la pagina il faci cu imagini, bucati de imagini bagate in pagina ca sa ii dea un aspect grafic bun.
Dreamweaver te ajuta la generarea codului (pe care altfel il scrii oricum de mana manual) dar atat, oricum chiar si cu codul generat de dw tot mai trebuie sa il bibilesti si sa il aranjezi ca sa fie ok...
Photoshop (sau alt program de grafica) te ajuta sa faci design-ul unei pagini (bg, meniuri, alegerea culorilor etc)

In timp o sa intelegi valoarea fiecarei aplicatii in parte si o sa stii cand sa te folosesti de una sau de alta...
1) CMS, ERP, CRM, etc... (doar pentru clienti))
2) Portofoliu, servicii, contact, blog
3) Folositi aceasta clasa sql in proiectele voastre (open source)
4) Vrei un magazin virtual la cheie, usor de folosit, cu api-uri incluse pentru maximizarea vanzarilor si multe alte facilitati? Da un semn si discutam.

abytza22
Average Member
Mesaje: 105
Membru din: Dum Iun 06, 2010 4:25 pm

Mesajde abytza22 » Mie Iun 23, 2010 2:31 pm

Dar exista vreo diferenta intre dreamweaver si un sitebuilder banal?
Firmele de webdesign vad ca folosesc tot mai des dreamweaver, imi recomandati sa invat sa lucrez cu dreamweaver sau mai bine ma feresc de el?

Avatar utilizator
Birkoff
Senior Member
Mesaje: 6378
Membru din: Joi Mar 18, 2004 2:34 pm
Localitate: Bucuresti
Contact:

Mesajde Birkoff » Mie Iun 23, 2010 6:22 pm

studiaza IDE-urile existente pe piata si vezi care te ajuta cel mai mult in lucrul de zi cu zi.
Un bun IDE e cel care te ajuta sa faci treaba bine si cat mai rapid.
eu recomand dreamweaver pentru html/css (dreamveawer cs5 stie si css3 si html5) si zend sau eclipse pe php/mysql
1) CMS, ERP, CRM, etc... (doar pentru clienti))
2) Portofoliu, servicii, contact, blog
3) Folositi aceasta clasa sql in proiectele voastre (open source)
4) Vrei un magazin virtual la cheie, usor de folosit, cu api-uri incluse pentru maximizarea vanzarilor si multe alte facilitati? Da un semn si discutam.

Avatar utilizator
vectorialpx
Senior Member
Mesaje: 4830
Membru din: Mar Mar 01, 2005 9:48 am
Localitate: Bucuresti
Contact:

Mesajde vectorialpx » Mie Iun 23, 2010 11:34 pm

Dreamwaver nu e ceva ce se "invata", e doar ceva care se foloseste.
Adica, e ca si Word... ce faci cand deschizi Word prima data? Raspuns: scrii text. Cu timpul, facand click pe anumite butoane aflii cum sa adaugi un tabel si un WordArt. Daca stii un strop de engleza, ajungi si la chestii avansate. Deci, il folosesti! Asa si cu Dreamwaver, nu e un software complex, poti ajunge sa stii sa-l folosesti in maxim o saptamana, daca stii ce e o baza de date, ce e un stylesheet, o clasa, o imagine, un layer etc.

Mi se pare cea mai stupida cerinta la un job sa ai "cunostinte de Dreamwaver". Daca stii xHTML/CSS, poti sa programezi si-n Notepad, creierul tau face treaba nu softul.

Referitor la taiat layout-uri, este indicat ca din Photosop sa folosesti decat elementele grafice, care nu pot fi facute in CSS. Tot ce este culoare plina (culoare de background), bordura, text (font-uri web-safe) poate sa fie facut cu CSS. Photoshop apare cand ai nevoie de ceva grafic, o bulina, un buton, o imagine de fundal, un banner etc etc.

Cel mai important este sa stii sa aranjezi elementele in pagina.

Se zice ca cel mai bine este sa practici in cele mai grele conditii, deci iti recomand Notepad++.

Firmele de webdesign vad ca folosesc tot mai des dreamweaver, imi recomandati sa invat sa lucrez cu dreamweaver sau mai bine ma feresc de el?
Il poti folosi, in modul cod. Este foarte util pentru sugestii, culori si aranjarea in pagina a codului. Modul design e foarte aiurea si, desi a mai avansat, inca face prostii. E mult mai bine sa faci totul de mana.

Avatar utilizator
andrugrasu
Junior Member
Mesaje: 31
Membru din: Mar Mai 16, 2006 9:33 pm
Contact:

Mesajde andrugrasu » Sâm Iun 26, 2010 2:20 pm

Te ar putea ajuta aceasta cartulieFrom Photoshop To HTML By Jeffrey Way. este foarte practica.

abytza22
Average Member
Mesaje: 105
Membru din: Dum Iun 06, 2010 4:25 pm

Mesajde abytza22 » Sâm Iun 26, 2010 7:08 pm

Multumesc Andrugrasu pentru link! Urmand sfaturile voastre, am tras bine zilele aste cu tutoriale si se pare ca am reusit sa invat cate cava din CSS, adica sunt capabil sa tai un layout din photoshop si sa il implementez in pagina exact asa cum imi doresc eu si sa se vada la fel pe FireFox si I.E.

Acum imi dau seama ce inseamna CSS, ca nu e deloc greu si ca e foarte placut.

Tentatia de a folosi Dreamweaver a fost mare, dar acum ma bucur ca nu am facut asta si sincer nu cred ca ai nevoie de Dreamweaver, CSS e chiar usor spre deosebire de PHP care m-a terorizat 8O (stiu ca sunt doua lucruri tota diferite , dar zic si eu asa).
Eu tot copiez aplicatii PHP , le introduc in pagina si le modific putin incat sa functioneze, dar daca ma pune cineva sa creez eu o aplicatie, imi prind urechile in 700 de mii de erori.

Avatar utilizator
andrugrasu
Junior Member
Mesaje: 31
Membru din: Mar Mai 16, 2006 9:33 pm
Contact:

Mesajde andrugrasu » Dum Iun 27, 2010 12:48 pm

Cu placere. Daca poti si te descurci cauta Smashing Book si HTML & CSS: The Complete Reference, Fifth Edition By Thomas Powell
Publisher: McGraw-Hill Osborne Media 2010. Daca mai ai nevoie de ajutor spune. Carti alea alea . Spor .


Înapoi la “Design”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 1 vizitator