Δημιουργώ την Ιστοσελίδα Μου : Μετατρέποντας ένα PSD σε HTML
Σε αυτό το βοήθημα, θα δούμε πως μπορούμε να μετατρέψουμε ένα website layout απο psd, σε HTML σελίδα. Θα κόψουμε την εικόνα μας, και θα γράψουμε τον κώδικα της σελίδας, σε απλά βήματα για αρχάριους. Τέλος θα ελέγξουμε ότι η ιστοσελίδα μας τηρεί όλα τα standards του web desing.
Πρόλογος
Για να εκτελέσουμε αυτό το βοήθημα θα χρειαστούμε μερικά προγράμματα και κάποιες βασικές δεξιότητες.
- Πρόγραμμα επεξεργασίας εικόνας (βλ. Photoshop)
- Πρόγραμμα επεξεργασίας κώδικα (βλ. Dreamweaver)
- Βασικές γνώσεις σε HTML και CSS
- Φυλλομετρητή (βλ. Firefox)
Τελικό Αποτέλεσμα
To Layout
Οι γενικές γραμμές που θα ακολουθήσουμε είναι οι εξής
Κόψιμο της εικόνας μας
Ξεκινάμε λοιπόν κόβοντας την εικόνα μας ώστε να χρησιμοποιήσουμε τα επιμέρους κομμάτια όπως ακριβώς επιθυμούμε.
Βήμα 1
Ανοίγουμε τον επεξεργαστή εικόνας (σε αυτό το βοήθημα θα χρησιμοποιήσουμε Photoshop CS4). Επιλέγουμε το Slice Tool.
Βήμα 2
Έχοντας επιλεγμένα όλα τα layers, και ενεργό το Slice Tool, κάνουμε μια επιλογή όπως στην εικόνα, ώστε να συμπεριλάβουμε το header, το navigation και μερικά pixel απο το background.
Βήμα 3
Ακλουθώντας τα ίδια βήματα επιλέγουμε το footer και μερικά pixel απο το background, το logo μας, και όλες τις άλλες εικόνες που θα χρειαστούμε.
Βήμα 4
Έχοντας επιλέξει όλες τις εικόνες που θέλουμε, πάμε File>Save for Web & Devices.
Εδώ θα κάνουμε τις εξής ρυθμίσεις:
- Επιλέγουμε να κάνουμε export σε JPEG με Quality 100(Maximum)
- Αποεπιλέγουμε το Convert to sRGB
Τέλος επιλέγουμε Save και στον διάλογο που εμφανίζεται έχουμε τις εξής ρυθμίσεις
Έχουμε πλέον όλες τις εικόνες που χρειαζόμαστε για να ξεκινήσουμε να γράφουμε τον κώδικα της ιστοσελίδας μας
HTML
Πρώτα από όλα πρέπει να φτιάξουμε ένα κενό αρχείο με το όνομα index.html. Μετά θα δημιουργήσουμε έναν φάκελο με το όνομα images όπου θα τοποθετήσουμε όλες μας τις εικόνες. Τέλος θα δημιουργήσουμε ένα αρχείο CSS με όνομα style.css
Θα πρότεινα ότι κώδικα παρουσιάζουμε παρακάτω να προσπαθήσετε να τον γράψετε μόνοι σας, παρά να κάνετε copy/paste, ώστε να κάνετε περισσότερη εξάσκηση.
index.html
Ανοίγουμε το κενό αρχείο index.html και γράφουμε τον παρακάτω κώδικα.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>@ Internet Services</title> </head> <body> </body> </html><div id="header"> </div> <div id="left"> </div> <div id="right"> </div> <div id="footer"> </div>
Στο <div> header θα συμπεριλάβουμε το logo μας και την εικόνα παρασκηνίου για το πάνω μέρος της ιστοσελίδας μας. Στο <div> left και right θα συμπεριλάβουμε τα κείμενα μας, και τέλος στο footer το υποσέλιδο μας.
Προσθέτουμε μερικά id και classes ώστε να μπορέσουμε να κλείσουμε σωστά το περιεχόμενο μας.
<div id="main"> <div class="container"> <div id="header"> </div> <div id="left"> </div> <div id="right"> </div> </div> </div> <div id="footer"> <div class="container"> </div> </div>
Τώρα είμαστε έτοιμοι να βάλουμε τα κείμενα και τις εικόνες μας στο περιεχόμενο. Έτσι στο body γράφουμε
<div id="main"> <div> <div id="header"> <div id="logo"> <h1>Logo</h1> </div> <div style="clear:both"></div> <ul id="menu"> <li><a href="#">Κεντρική</a></li> <li><a href="#">Προϊόντα</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Επικοινωνία</a></li> <li><a href="#">Αναζήτηση</a></li> </ul> <div style="clear:both"></div> </div> <div id="content"> <div id="quote"> <img src="images/quote.jpg" alt="" width="765" height="44" /> </div> <div id="left"> <img src="images/service_01.jpg" alt="" width="350" height="226" /> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <img src="images/service_03.png" alt="" width="350" height="226" /> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="right"> <img src="images/service_02.png" alt="" width="350" height="225" /> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <img src="images/service_4.png" alt="" width="350" height="226" /> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div style="clear:both"></div> </div> </div> </div> <div style="clear:both"></div> <div id="footer"> <div> <p>Created by Pantso for GreekTuts.net</p> </div> </div>
Έχουμε έτοιμο το περιεχόμενο μας. Άν ανοίξουμε το αρχείο μας στον Firefox θα δούμε αυτό
styles.css
Έχοντας έτοιμο το περιεχόμενο μας ανοίγουμε το styles.css και αρχίζουμε να εφαρμόζουμε τα στυλ μας στο αρχείο index.html. Ξεκινάμε βάζοντας την αρχική δήλωση
body {
font-family: Arial, Helvetica, sans-serif;
background: #c4c4c4;
width:800px;
margin:0px auto;
margin-top:-22px;
}
Έχουμε ορίσει το πλάτος, το χρώμα, τα fonts και τα margins της σελίδας μας. Συνεχίζουμε βάζοντας τα στυλ για το πάνω μέρος της ιστοσελίδας μας, και το menu μας.
#main {
background: url(images/header.jpg) repeat-x;
}
#logo {
background: url(images/logo.png) no-repeat;
height:150px;
margin-top:15px;
text-indent:-999px;
width:360px;
}
.container {
width: 800px;
margin: 0 auto;
}
ul#menu {
list-style: none;
}
ul#menu li a {
color:#676666;
float:left;
font-size:18px;
height:38px;
margin-top:6px;
padding-left:5px;
padding-right:34px;
text-decoration:none;
width: 80px;
}
#container{
width:800px;
background: #e0e0e0;
}
#content{
background:#E0E0E0 none repeat scroll 0 0;
margin:0 auto;
width:800px;
}
#quote{
margin-left:20px;
}
Τώρα βάζουμε τα στυλ για το περιεχόμενο μας.
#left {
float:left;
margin-left:15px;
width:380px;
}
#left h2 {
font-size: 36px;
color: #015878;
}
#left h3 {
font-size: 24px;
color: #444444;
}
#left h4 {
font-size: 18px;
color: #373737;
font-weight: normal;
}
#left p {
font-size: 14px;
color: #595858;
}
#left small {
font-size: 12px;
color: #373737;
}
#left a {
color: #0f6c8d;
font-weight: bold;
text-decoration: none;
}
#right {
width: 380px;
float: right;
margin-right:15px;
}
#right h2 {
font-size: 36px;
color: #015878;
}
#right h3 {
font-size: 24px;
color: #444444;
}
#right h4 {
font-size: 18px;
color: #373737;
font-weight: normal;
}
#right p {
font-size: 14px;
color: #595858;
}
#right small {
font-size: 12px;
color: #373737;
}
#right a {
color: #0f6c8d;
font-weight: bold;
text-decoration: none;
}
Τέλος βάζουμε και τα στυλ για το υποσέλιδο της ιστοσελίδας μας
#footer {
background:transparent url(images/footer.jpg) repeat-x scroll 0 0;
color:#FFFFFF;
margin-top:0;
padding-bottom:0;
padding-top:13px;
text-align:center;
margin-bottom:-150px;
}
Σύνδεση του index.html με το style.css
Έχοντας πλέον έτοιμα τα δυο αρχεία μας, πρέπει να τα συνδέσουμε ώστε να μπορούν τα στοιχεία στο index.html να πάρουν τις ιδιότητες που ορίσαμε στο style.css
Αυτό το κάνουμε βάζοντας την παρακάτω γραμμή κώδικα στο <head> κομμάτι του index.html.
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
Όλα είναι έτοιμα και μπορούμε να δούμε τι έχουμε κάνει
Τελικός Έλεγχος
Πρίν κλείσουμε θα πρέπει να ελέγξουμε ότι η ιστοσελίδα μας τηρεί τα web standards και να διορθώσουμε ότι τυχόν λάθη ή παρατηρήσεις δούμε. Αυτό θα το κάνουμε αν επισκεφτούμε το http://jigsaw.w3.org/css-validator/.
Στην συγκεκριμένη περίπτωση περάσαμε όλους τους έλεγχους χωρίς πρόβλημα οπότε μπορούμε να βάλουμε πλέον τα σηματάκια του CSS Validation Service στην ιστοσελίδα μας, και να δώσουμε συγχαρητήρια στον εαυτό μας.
Το τελικό αποτέλεσμα μπορείτε να το δείτε εδώ
Τα αρχεία του βοηθήματος (εικόνες και psd) καθώς και το τελικό θέμα που δημιουργήσαμε είναι διαθέσιμα για κατέβασμα από όλους τους συνδρομητές του GreekTuts.net
Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ
Ότι βοήθεια χρειαστείς μην διστάσεις να ρωτήσεις
Να προσθέσω ότι σε IE το menu φαίνεται κάπως περίεργα. Αυτό έγινε γιατί πολύ απλά έφτιαξα όλο το άρθρο δοκιμάζοντας σε Firefox και ξέχασα να ελέγξω τον ΙΕ.
Για να το αλλάξουμε αυτό μπορούμε να μικρύνουμε το width στο ul#menu li a απο 80px σε 70px στο αρχείο style.css.