Cum Codez O Pagina Facuta In Photoshop?

[+MrTea]

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]

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]

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

[gaby]

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]

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]

Asta cu body background cred ca deja e "deprecated"

 

Foloseste CSS pentru a aplica backgroundu sau orice alt stil.

[+MrTea]

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

[gaby]

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]

dar backgroundu' unde sa-l bag?

[gaby]

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

[gadeas]

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]

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]

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]

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

[gadeas]

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]

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]

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]

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

[Iusti]

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

[gaby]

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]

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