Cum Codez O Pagina Facuta In Photoshop?

+MrTea · January 12, 2015

Stiu ca s-a mai vorbit dar nu este ce imi trebuie mie!
Am facut o imagine in photoshop si vreau sa o codez in html (vreau sa fac un Shop pentru un server RPG): http://i.imgur.com/FgKyEJT.png
Am urmat tutorialul postat de gaby () si cand salvez html imi da doar asta:

<html>
<head>
<title>shop</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (shop.png) -->
<img src="images/index.gif" width="1700" height="1200" alt="">
<!-- End Save for Web Slices -->
</body>
</html>

Dar eu as vrea cand apesi pe acel chenar unde scrie numele si pretul sa te redirectione catre un link! Cum as putea sa fac?

gadeas · January 12, 2015

Din .psd in .html nu se va intampla prin magie asa usor cu doua clickuri si sa mearga totu perfect.

Metoda simpla si "urata", sa creezi un tabel in care sa se arate fiecare imagine transparenta. Adica iei poza cu masina si bara de sub cu numele + pretu si il faci intr-un layer transparent si dupacea il adaugi intr-un tabel de genu:

<table>
  <tr>
    <td><a href="#"><img src="poza1.png" alt="Poza 1"></a></td>
    <td><a href="#"><img src="poza2.png" alt="Poza 2"></a></td>
    <td><a href="#"><img src="poza3.png" alt="Poza 3"></a></td>
    <td><a href="#"><img src="poza4.png" alt="Poza 4"></a></td>
    <td><a href="#"><img src="poza5.png" alt="Poza 5"></a></td>
  </tr>
  <tr>
    <td><a href="#"><img src="poza6.png" alt="Poza 6"></a></td>
    <td><a href="#"><img src="poza7.png" alt="Poza 7"></a></td>
    <td><a href="#"><img src="poza8.png" alt="Poza 8"></a></td>
    <td><a href="#"><img src="poza9.png" alt="Poza 9"></a></td>
    <td><a href="#"><img src="poza10.png" alt="Poza 10"></a></td>
  </tr>
</table>

Asa fiecare imagine va avea propiu link spre unde vrei sa duca si va arata intr-o forma de tabel. Pentru a schimba stilu la tabel, va trebui sa folosesti CSS.

Adoua metoda mai frumoasa si mai grea, daca nu sti HTML / CSS incat sa iti creezi propiu cod, atunci ar trebui sa inveti cum se foloseste un framework si asa vei putea face designu responsiv, incat daca intra de pe telefon sa se vada bine. Si inloc sa folosesti imagini, vei da tot stilu la nume si pret prin CSS.

+MrTea · January 12, 2015

acel cod il introduc dupa body? si cum dau si un background? si la img pot baga si link nu?

gaby · January 13, 2015

Da, il pui in body.

Background poti adauga asa: http://www.w3schools.com/tags/att_body_background.asp sau asa: http://www.w3schools.com/tags/att_body_bgcolor.asp

Imaginile au deja link in codul postat de gadeas, doar ca in locul diezului (#) va trebui sa treci URL-ul catre care vrei sa duca fiecare imagine/buton.

+MrTea · January 14, 2015

imi da asta: http://imgur.com/yUZhxrU

Codul:

<html>
<body background="bgimage.jpg">
<h1>Hello world!</h1>
<p><a href="http://www.w3schools.com">VisitW3Schools.com!</a></p>
<table>
  <tr>
    <td><a href="http://pro-gaming.ro/shop/"><imgsrc="Poze/img1.png" alt="Poza 1"></a></td>
    <td><a href="#"><img src="poza2.png" alt="Poza 2"></a></td>
    <td><a href="#"><img src="poza3.png" alt="Poza 3"></a></td>
    <td><a href="#"><img src="poza4.png" alt="Poza 4"></a></td>
    <td><a href="#"><img src="poza5.png" alt="Poza 5"></a></td>
  </tr>
  <tr>
    <td><a href="#"><img src="poza6.png" alt="Poza 6"></a></td>
    <td><a href="#"><img src="poza7.png" alt="Poza 7"></a></td>
    <td><a href="#"><img src="poza8.png" alt="Poza 8"></a></td>
    <td><a href="#"><img src="poza9.png" alt="Poza 9"></a></td>
    <td><a href="#"><img src="poza10.png" alt="Poza 10"></a></td>
  </tr>
</table>
</body>
</html>

gadeas · January 14, 2015

Asta cu body background cred ca deja e "deprecated"

Foloseste CSS pentru a aplica backgroundu sau orice alt stil.

+MrTea · January 14, 2015

Ma de ce tot ma chinuiti ma ajuta cineva sa il fac?

gaby · January 14, 2015

Nu te chinuie nimeni. Incercam sa te ajutam.

Iti apare asa pentru ca nu e corecta calea catre imagini, in rest, e ok.

Pune toate fisierele site-ului/index-ului intr-un folder "site" apoi, daca ai pozele in folder-ul site/Poze iar prima imagine pe care vrei sa o folosesti este intitulata img1.png, atunci lasi calea Poze/img1.png

Daca nu pui toate fisierele in acelasi folder folosesti calea ../Poze/img1.png

+MrTea · January 15, 2015

dar backgroundu' unde sa-l bag?

gaby · January 15, 2015

Cum adica? Daca folosesti un folder intitulat Poze pune-l in acel folder. Invata sa fii orgnizat.

gadeas · January 15, 2015

Backgroundu il pui in ce folder vrei tu si dupa intr-un fisier css adaugi:

body {
    background: url('Link spre background') no-repeat;
}

In fisieru index.html intre head trebuie sa adaugi urmatoru rand pentru sa iti citeasca fisieru css:

<link href="FisieruCSS.css" rel="stylesheet">

gaby · January 16, 2015

Daca adauga doar stilul pentru background nu cred ca e o problema daca il pune direct in index.html si nu mai face un fisier extern .css. Acum, cum vrea el.

Pentu adaugarea direct in index:

<body style="background-image:url(bgimage.jpg)">

gadeas · January 16, 2015

Corect, mai exista si alta metoda, ar fi sa adauge intre head stilu:

<style>
body {
     background-image: url('link');
}
</style>

Pentru a evita sa creeze fisieru extern

+MrTea · January 17, 2015

Mda! Renunt nu mi se primeste nimic imi arata la fel ca in pozele de sus!

gadeas · January 17, 2015

Adica iti arata la fel ca si in pozele de sus? Mai exact care?

Posteaza tot codul pe care-l ai pana acum, sa vedem ceva.

+MrTea · January 31, 2015

Nu am reusit nimic poate cineva sa mi-l faca de la 0? (m-am enervat si am sters tot ce lucrasem) ma uitam pe ecursuri.ro si faceam ca acolo dar nu-mi iesea

gaby · January 31, 2015

Si ce ne iese?

Ti-am facut un index rapid, folosindu-ma de o bucata din imaginea din primul post si image map:

Fiecare imagine duce unde vrei tu sa duca, dar pentru asta trebuie sa modifci fiecare link in parte. Eu am pus link-uri ca model, de forma:

http://link_catre_infernus.tld

+MrTea · February 1, 2015

Gaby, multumesc! Cam asa ceva! Sper sa reusesc sa ii pun si un background!

Iusti · February 5, 2015

Am o intrebare, de incepator: Toate astea se fac in New Text Document?

gaby · February 5, 2015

Nu stiu ce este "New Text Document", probabil te referi la Notepad. Daca stapanesti HTML-ul si CSS-ul, da, le poti face in Notepad. Daca nu, sau chiar daca le stapanesti, pentru un control mai bun (Design/View/Code), te poti folosi de programe precum Macromedia Dreamweaver.

gadeas · February 5, 2015

Sau "Brackets" care mie personal imi place mai mult si e free

Sign In

Cum Codez O Pagina Facuta In Photoshop?

Recommended Posts

+MrTea

gadeas

+MrTea

gaby

+MrTea

gadeas

+MrTea

gaby

+MrTea

gaby

gadeas

gaby

gadeas

+MrTea

gadeas

+MrTea

gaby

+MrTea

Iusti

gaby

gadeas

Please sign in to comment

Recently Browsing 0 members

Activity

Browse

Important Information