Μετακινούμενα Παράθυρα 1o Μέρος
Σε αυτή την μίνι σειρά βοηθημάτων, θα δούμε πως με την χρήση HTML, CSS και jQuery, μπορούμε να δημιουργήσουμε μια ιστοσελίδα στην οποία θα μπορούμε να μετακινήσουμε και να ανακατατάξουμε (με drag ‘n’ drop) τα διάφορα παράθυρα (blocks) σε διαφορετικές προκαθορισμένες θέσεις.
Στο πρώτο μέρος λοιπόν θα “στήσουμε” την ιστοσελίδα μας, δομικά και στυλιστικά, στην οποία στο δεύτερο μέρος θα προσθέσουμε περιεχόμενο, και θα κάνουμε τα κουτιά που περιέχουν το περιεχόμενο να μπορούν να γίνουν drag n drop.
Βήμα 1
Ας ξεκινήσουμε πρώτα δημιουργώνας την σελίδα μας σε HTML. Ανοίγουμε ένα νέο αρχείο με το όνομα index.html και γράφουμε τον εξής κώδικα
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Μετακινούμενα Παράθυρα μέρος 1ο - GreekTuts.net</title> <link href="styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <!-- Εδώ θα προσθέσουμε την Javascript στο 2ο μέρος //--> </head> <body> </body> </html>
Βήμα 2
Ας προσθέσουμε λοιπόν την επικεφαλίδα την φόρμα αναζήτησης και το μενού πλοήγησης. Στο <body> γράφουμε
<div id="container"> <div id="header"> <h1>GreekTuts</h1> <input type="text" id="searchbox" value="Αναζήτηση..." /> </div> <div id="navigation"> <ul> <li>Κεντρικη</li> <li>Σχετικα</li> <li>Blog</li> <li>Υπηρεσιες</li> <li>Επικοινωνια</li> </ul> </div> </div>
Βήμα 3
Ας προσθέσουμε και το υποσέλιδο μας. Κάτω ακριβώς από τον παραπάνω κώδικα γράφουμε
<div id="footer"> <ul> <li>Σχετικά</li> <li>Υπηρεσίες</li> <li>Blog</li> <li>Επικοινωνία</li> </ul> <ul> <li>Άρθρο 1</li> <li>Άρθρο 2</li> <li>Άρθρο 3</li> <li>Άρθρο 4</li> <li>Άρθρο 5</li> </ul> <ul> <li>Όροι Χρήσης</li> <li>Απόρητο</li> <li>Sitemap</li> </ul> </div> <div class="footP"> <p>Σχεδιασμός & Ανάπτυξη : <a href="http://pantso.gr" target="_blank">Pantso</a> για το GreekTuts.net</p> </div> </div>
Βήμα 4
Πλέον έχουμε την δομή της σελίδας μας έτοιμη. Ας προσθέσουμε λοιπόν και το στύλ μαζί με εικόνες. Δημιουργούμε ένα αρχείο με το όνομα screen.css και γράφουμε
body {
margin: 0;
padding: 0;
background: #9f9f9f;
color: #000000;
font-size: 62.5%;
font-family: arial, helvetica, sans-serif;
}
h1 {
font-family: helvetica, arial, sans-serif;
margin-left: 12px;
height: 120px;
width: 300px;
color: #ffffff;
text-indent: -10000px;
overflow: hidden;
background: transparent url(logo.png) center left no-repeat;
}
a {
color: #0f57bb;
text-decoration: none;
}
#searchbox {
position: absolute;
bottom: 10px;
right: 22px;
font-size: 1.8em;
font-weight: normal;
border: 1px solid #660000;
color: #bdbdbd;
padding: 5px;
bottom: 40px;
}
h2 {
color: #7FA9A5;
font-size: 1.6em;
font-weight: normal;
}
p {
font-size: 1.2em;
line-height: 1.5em;
}
#container {
margin: 0;
padding: 0;
position: relative;
width: 960px;
margin: auto;
background: #ffffff;
border-left: 10px solid white;
border-right: 10px solid white;
border-bottom: 10px solid white;
top: -20px;
}
#header {
margin: 0;
padding: 0;
position: relative;
width: 960px;
height: 120px;
background: #0f57bb url(headerbg.png) repeat-x top left;
}
#navigation {
background: transparent url(navbg.png) repeat-x top left;
height: 35px;
margin-top: 2px;
margin-bottom: 2px;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation ul li {
list-style: none;
font-size: 1.7em;
text-transform: uppercase;
float: left;
padding-left: 41px;
padding-right: 41px;
line-height: 35px;
color: #aeaeae;
border-right: 1px inset #cdcdcd;
cursor: pointer;
}
#navigation ul li:hover {
background: #394eb8;
color: #ffffff;
}
#content {
margin-top: 1px;
padding-top: 12px;
background: #dddddd;
float: left;
width: 960px;
padding-bottom: 12px;
min-height: 300px;
}
#footer {
height: 100px;
background: #313131;
color: #ffffff;
border-top: 2px solid #ffffff;
clear: left;
}
#footer ul {
margin: 0;
padding: 0;
margin-top: 10px;
float: left;
width: 290px;
padding-left: 12px;
margin-left: 12px;
border-left: 1px solid white;
}
#footer ul li {
list-style: none;
text-transform: uppercase;
line-height: 2em;
font-size: 0.8em;
}
.footP {
margin: 0 auto;
text-align: center;
}
Βήμα 5
Οι εικόνες που θα χρησιμοποιήσουμε είναι οι εξής
logo.png
headerbg.png
navbg.png
Συμπεριλαμβάνουμε τις εικόνες και το screen.css σε έναν φάκελο με το όνομα styles και αυτό ήταν! Πλέον έχουμε έτοιμη την σελίδα μας τόσο δομικά όσο και στυλιστικά. Δείτε παρακάτω ένα demo του τι έχουμε κάνει μέχρι τώρα στο πρώτο μέρος.
Στο δεύτερο μέρος, αύριο, θα δούμε πως θα προσθέσουμε το περιεχόμενο μας, και πως θα κάνουμε τα διάφορα blocks να δέχονται drag n drop, ώστε να μπορούμε να τα μετακινούμε μέσα στην ιστοσελίδα, και να τα ανακατανέμουμε όπως εμείς θέλουμε.
Οι συνδρομητές μας μπορούν παρακάτω να κατεβάσουν τα αρχεία του βοηθήματος
Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ
