Σε μια προσπάθεια να κάνουμε πιο κατανοητά και διακριτά τα βήματα που χρειάζεται να ακολουθηθούν, αλλά και τις γνώσεις που χρειάζονται, για την δημιουργία μιας ιστοσελίδας, από την σκέψη μέχρι την υλοποίηση και την συντήρηση, προσφέρουμε σε όλους τους επισκέπτες μας μια σειρά από προσωπικούς online εκπαιδευτικούς οδηγούς που θα ξεκινήσει τον Σεπτέμβριο.

Αν ενδιαφέρεστε να συμμετάσχετε στις εκπαιδεύσεις και να μάθετε και εσείς πως να δημιουργείτε ιστοσελίδες με τον σωστό τρόπο, διαβάστε περισσότερες πληροφορίες παρακάτω.

Τι είναι τα GreekTuts Sessions

Τα GreekTuts Sessions είναι μια σειρά από προσωπικούς online εκπαιδευτικούς οδηγούς που θα ξεκινήσουν από τον Σεπτέμβριο. H διεξαγωγή αυτών των οδηγών θα γίνει μέσω μιας online πλατφόρμας e-learning, που σας προσφέρει δυνατότητα αλληλεπίδρασης με τον παρουσιαστή σας. Οι εκπαιδεύσεις είναι προσωπικές, πράγμα που σημαίνει ότι έχετε την δυνατότητα να μάθετε όλα όσα χρειάζεστε από το σπίτι σας, τις ώρες και μέρες που σας βολέυουν.

Κατά την παρουσίαση, θα μπορείτε να δείτε σε video την εκπαίδευση και να κάνετε ερωτήσεις όσο συχνά χρειαστεί. Το μόνο εργαλείο που θα χρειαστείτε είναι ο αγαπημένος σας browser, και πολύ όρεξη για μάθηση.

Επίσης, μετά την ολοκλήρωση των εκπαιδεύσεων, θα μπορείτε να έχετε πλήρη πρόσβαση στα video αλλά και σε όλο το εκπαιδευτικό υλικό, με τους κωδικούς σας για πάντα.

Πακέτα Εκπαιδεύσεων

Σας προσφέρουμε 2 διαφορετικά πακέτα συμμετοχής στις εκπαιδεύσεις, για να διαλέξετε αυτό που σας συμφαίρει και σας βολέυει.

• Πλήρες Πακέτο – Για παρακολούθηση όλης της σειράς
• Συγκεκριμένο Κεφάλαιο – Για παρακολούθηση ενός συγκεκριμένου κεφαλαίου

* Οι τιμές των 2 πακέτων θα ανακοινωθούν σύντομα.

Περιεχόμενα Online Εκπαιδεύσης

Κεφάλαιο 1 – HTML & CSS

Σε αυτό το κεφάλαιο θα καλύψουμε όλες τις βασικές έννοιες για την γλώσσας προγραμματισμού του internet, την HTML, και θα δούμε όλα όσα χρειάζεται για το πώς μπορούμε να δώσουμε μορφοποίηση και στύλ στις σελίδες μας, με την χρήση των CSS.

Κεφάλαιο 2 – Javascript & jQuery

Σε αυτό το κεφάλαιο θα καλύψουμε όλες τις βασικές λειτουργίες για την Javascript και θα δούμε πως μπορούμε έυκολα και γρήγορα να κάνουμε το περιεχόμενο της ιστοσελίδας μας πιο ενδιαφέρον και διαδραστικό για τον χρήστη. Επίσης θα δούμε τα πάντα για την διάσημη βιβλιοθήκη jQuery

Κεφάλαιο 3 – Front End Design

Σε αυτό το κεφάλαιο θα δούμε όλες τις βασικές αρχές που πρέπει να ακολουθούμε κατά την διάρκεια σχεδιασμού μιας ιστοσελίδας, και ποιά είναι τα λάθη που πρέπει να αποφέυγουμε. Επίσης θα δούμε και θα αναλύσουμε ποιά είναι τα διάφορα styles και trends που ακολουθούνται από designers σε όλο τον κόσμο.

Κεφάλαιο 4 – WordPress

Σε αυτό το κεφάλαιο θα μάθουμε για πάντα για το WordPress. Από το πως θα στήσουμε ένα δικό μας απλό blog, μέχρι πως θα δημιουργήσουμε μια κομψή και περίπλοκη ιστοσελίδα χρησιμοποιώντας το WordPress. Τέλος θα δούμε την δομή ενός θέματος και ενός plugin και θα μάθουμε τα βασικά για την δημιουργία του δικού σας θέματος και του δικού σας Plugin.

Κεφάλαιο 5 – SEO & Promotion

Σε αυτό το κεφάλαιο θα μιλήσουμε για τις μηχανές αναζήτησεις και για το πώς μπορούμε να ανεβάσουμε την ιστοσελίδα μας ψηλά στις λίστες αποτελεσμάτων. Θα δούμε διάφορες τεχνικές προαγωγής της σελίδας μας, και όλα όσα πρέπει να αποφύγουμε κατά την προσπάθεια του Search Engine Optimization.

Φόρμα Εκδήλωσης Ενδιαφέροντος

Μπορείτε να συμπληρώσετε την φόρμα εκδήλωσης ενδιαφέροντος που ακολουθεί, και εμείς θα επικοινωνήσουμε μαζί σας για να συζητήσουμε τις μέρες και τις ώρες που θα γίνονται οι εκπαιδεύσεις, αλλά και να σας λύσουμε τυχόν απορίες που μπορεί να έχετε για το πρόγραμμα των εκπαιδεύσεων.

[contact-form-7]

<p id="back-top">
          <a href="#top"><span></span>Go to Top</a>
</p>

Στον παραπάνω κώδικα, δημιουργούμε μια παράγραφο με συγκεκριμένο ID ώστε να μπορούμε να δώσουμε styles και εντολές της jQuery. Μέσα περιλαμβάνουμε ένα anchor link το οποίο περιέχει ένα span στο οποίο θα βάλουμε το εικονίδιο μας, και το κείμενο για τον χρήστη.

Συνεχίζοντας με την CSS θα δώσουμε κάποια μορφοποίηση στο νέο div που δημιουργήσαμε γράφοντας τον εξής κώδικα:

#back-top                     {position: fixed;bottom: 30px;margin-left:-65px;}
#back-top a                  {color:#000000;display:block;font:12px/100% "Trebuchet MS",Arial,Helvetica,sans-serif;text-align:center;text-decoration:none;text-transform:uppercase;width:48px;margin-bottom:10px;}
#back-top a:hover    {color: #3a9ef4;}
#back-top span           {background:url(../images/bak-top.png) no-repeat scroll center center #DDDDDD;display:block;height:48px;margin-bottom:4px;width:48px;}

Με τον παραπάνω κώδικα δίνουμε στην παράγραφο μας αποστάσεις και συγκεκριμένη θέση στην σελίδα μας, που δεν θα αλλάζει ακόμα και αν κάνουμε scroll. Επίσης δίνουμε χρώμα στο κείμενο του link και την εικόνα παρασκηνίου για το κουμπάκι μας (το εικονίδιο), Τέλος δίνουμε και ένα χρώμα στον σύνδεσμο όταν κάνουμε hover.

Συνεχίζοντας με την jQuery, θα γράψουμε τον κώδικα που θα κρύβει και θα εμφανίζει το κουμπάκι που δημιουργήσαμε, και τέλος θα έχει την λειτουργικότητα που θέλουμε. Γράφουμε τον εξής κώδικα:

$(document).ready(function(){
          // Κρύβουμε το div μόλις φορτώσει η σελίδα
          $("#back-top").hide();
          // Μόλις γίνει scroll πάνω από 100 pixels, εμφανίζουμε το div
          $(function () {
                    $(window).scroll(function () {
                              if ($(this).scrollTop() > 100) {
                                        $('#back-top').fadeIn();
                              } else {
                    $('#back-top').fadeOut();
                    }
          });
          // Μόλις πατήσουμε το anchor, κάνουμε scroll το document με animation 800ms
          $('#back-top a').click(function () {
                    $('body,html').animate({
                    scrollTop: 0
                    }, 800);
                    return false;
                    });
          });
});

Στον παραπάνω κώδικα αρχικά κρύβουμε το div μόλις φορτώσει η σελίδα. Μετά, αν γίνει scroll πάνω από 100 pixels, εμφανίζουμε το div, και τέλος μόλις πατήσουμε το anchor, κάνουμε scroll το document με animation 800ms.

Αυτό ήταν! Πλέον δίνουμε την δυνατότητα στους επισκέπτες μας να κάνουν auto-scroll στην σελίδα μας

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Δημιουργούμε ένα αρχείο dbconn.php με τον παρακάτω κώδικα

<?php
function dbconnect() {
// Σύνδεση με διακομιστή
$db_connect = mysql_connect("localhost", "db_user", "db_password")
or die ("Αποτυχία σύνδεσης στον διακομιστή");
// Αν χρησιμοποιείτε κωδικοποίηση utf8 και δεν σας εμφανίζει σωστά τα
ελληνικά
// mysql_query("SET NAMES 'utf8'", $db_connect);
// Επιλογή βάσης δεδομένων
$db_select = mysql_select_db("db_name", $db_connect)
or die ("Αποτυχία επιλογής βάσης δεδομένων");
}
?>

Με το παρακάτω, συνδεόμαστε στην mysql

mysql_connect("localhost", "db_user", "db_password")

Μην ξεχάσετε να αντικαταστήσετε τα localhost ο host της βάσης db_user το όνομα του χρήστη της βάσης db_password ο κωδικός του χρήστη της βάσης db_name το όνομα της βάσης. or die (“Αποτυχία σύνδεσης στον διακομιστή”); Αν για κάποιο λόγο παρουσιαστεί πρόβλημα, εμφανίζεται το μήνυμα “Αποτυχία σύνδεσης στον διακομιστή”. Κάποιες φορές, όταν η βάση είναι κωδικοποιημένη σε utf8, τα ελληνικά γράμματα εμφανίζονται με ερωτηματικά. Για να το διορθώσουμε, εισάγουμε το παρακάτω:

mysql_query("SET NAMES 'utf8'", $db_connect);

Τέλος επιλέγουμε το όνομα της βάσης

$db_select = mysql_select_db("db_name", $db_connect)

Διευκολύνει να έχουμε την παραπάνω συνάρτηση σε ξεχωριστό αρχείο, και όποτε τη χρειαζόμαστε να το εισάγουμε. Έτσι, αν θέλουμε να αλλάξουμε για παράδειγμα τον κωδικό ή τον χρήστη, το κάνουμε σε ένα αρχείο. Για να εισάγουμε το αρχείο της συνάρτησης σε ένα άλλο αρχείο php χρησιμοποιούμε την εντολή include() ως εξής:

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();

ΕΝΤΟΛΕΣ

// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Αν και δεν είναι απαραίτητο να κάνουμε αποσύνδεση, καλό θα ήταν να μην το ξεχνάμε.

Προσθήκη και ενημέρωση εγγραφών σε βάση δεδομένων

Έστω ο πίνακας clients (id, name, surname) με το id ρυθμισμένο σε auto_increment ώστε να αυξάνεται μόνο του με κάθε εγγραφή που προσθέτουμε. Αρχικά δημιουργούμε ένα αρχείο add.php ή update.php και καλούμε τη συνάρτηση που δημιουργήσαμε πριν, ώστε να συνδεθούμε στη βάση δεδομένων.

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
…
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Στη συνέχεια με τον παρακάτω κώδικα δηλώνουμε τι θέλουμε να εισάγουμε και που.

// Προσθήκη δεδομένων
$qAdd = mysql_query("INSERT INTO clients (id, name, surname)
VALUES ('', 'Νίκος', 'Παπανικολάου')") or die
("Παρουσιάστηκε πρόβλημα κατά την εισαγωγή των αρχείων."));
if ($qAdd)
{
echo "Τα δεδομένα προστέθηκαν.";
}

Ενώ με τον παρακάτω τι θέλουμε να αλλάξουμε/επεξεργαστούμε.

// Ενημέρωση δεδομένων
$qUpdate=mysql_query("UPDATE clients SET name = 'name', surname =
'surname' WHERE id='1' ");
if ($qUpdate)
{
echo "Τα δεδομένα ενημερώθηκαν.";
}

Έτσι το αρχείο add.php παίρνει την παρακάτω μορφή,

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
// Προσθήκη δεδομένων
$qAdd = mysql_query("INSERT INTO clients (id, name, surname)
VALUES ('', 'Νίκος', 'Παπανικολάου')") or die
("Παρουσιάστηκε πρόβλημα κατά την εισαγωγή των αρχείων."));
if ($qAdd)
{
echo "Τα δεδομένα προστέθηκαν.";
}
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Ενώ το update.php την παρακάτω:

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
// Ενημέρωση δεδομένων
$qUpdate=mysql_query("UPDATE clients SET name = 'name', surname =
'surname' WHERE id='1' ");
if ($qUpdate)
{
echo "Τα δεδομένα ενημερώθηκαν.";
}
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Εμφάνιση εγγραφών από βάση δεδομένων

Αρχικά δημιουργούμε ένα αρχείο index.php και καλούμε τη συνάρτηση που δημιουργήσαμε πριν, ώστε να συνδεθούμε στη βάση δεδομένων.

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
…
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Στη συνέχεια με τον παρακάτω κώδικα «τραβάμε» τα αποτελέσματα από την βάση μας.

// Ερώτημα προς την βάση
$q=mysql_query("SELECT * FROM clients ");
$num = mysql_num_rows($q);
// Αν υπάρχουν αποτελέσματα
if ($num > 0 ) {
$i=0;
while ($i < $num) {
// Δημιουργία σύντομων ονομάτων μεταβλητών
$name = mysql_result($q,$i,"name");
$surname = mysql_result($q,$i,"surname");
// Εκτύπωση μεταβλητών
echo "Όνομα: $name<br />";
echo "Επώνυμο: $surname <br />";
// Αν δεν υπάρχουν αποτελέσματα
++$i; } } else { echo "Δεν έχουν καταχωρηθεί δεδομένα για εσάς ακόμα."; }

Έτσι το αρχείο παίρνει την παρακάτω μορφή.

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
// Ερώτημα προς την βάση
$q=mysql_query("SELECT * FROM clients ");
$num = mysql_num_rows($q);
// Αν υπάρχουν αποτελέσματα
if ($num > 0 ) {
$i=0;
while ($i < $num) {
// Δημιουργία σύντομων ονομάτων μεταβλητών
$name = mysql_result($q,$i,"name");
$surname = mysql_result($q,$i,"surname");
// Εκτύπωση μεταβλητών
echo "Όνομα: $name<br />";
echo "Επώνυμο: $surname <br />";
// Αν δεν υπάρχουν αποτελέσματα
++$i; } } else { echo "Δεν έχουν καταχωρηθεί δεδομένα για εσάς ακόμα."; }
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Μπορούμε να συμπεριλάβουμε και διάφορα κριτίρια στην αναζήτησή μας, όπως αν το όνομα είναι «Νίκος». Αυτό γίνεται προστέτοντας στο mysql query το WHERE name=’Νίκος’

$q=mysql_query("SELECT * FROM clients WHERE name=’Νίκος’");

Διαγραφή εγγραφών από βάση δεδομένων

Αρχικά δημιουργούμε ένα αρχείο delete.php και καλούμε τη συνάρτηση που δημιουργήσαμε πριν, ώστε να συνδεθούμε στη βάση δεδομένων.

<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
…
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Στη συνέχεια με τον παρακάτω κώδικα δηλώνουμε τι θέλουμε να διαγράψουμε.

// Αφαίρεση δεδομένων
$qRemove = mysql_query("DELETE FROM clients WHERE id='1' ");
if ($qRemove)
{
echo "Τα δεδομένα αφαιρέθηκαν.";
}
Έτσι το αρχείο παίρνει την παρακάτω μορφή.
<?php
// Εισαγωγή του αρχείου με την συνάρτηση
include(“dbconn.php”);
// Καλούμε την συνάρτηση
dbconnect();
// Αφαίρεση δεδομένων
$qRemove = mysql_query("DELETE FROM clients WHERE id='1' ");
if ($qRemove)
{
echo "Τα δεδομένα αφαιρέθηκαν.";
}
// Αποσύνδεση απο τον διακομιστή
/mysql_close($db_connect);
?>

Στα επόμενα βοηθήματα, θα δημιουργήσουμε φόρμες εισαγωγής, επεξεργασίας, προβολής και διαγραφής εγγραφών, και θα ασχοληθούμε με την επαλήθευση των δεδομένων που μας δίνει ο χρήστης.

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Ξεκινάμε από εκεί που είχαμε μείνει στο πρώτο μέρος. Αφού έχουμε έτοιμη την σελίδα μας, επόμενο βήμα είναι να φορτώσουμε την βιβλιοθήκη jQuery και την επιπλέον βιβλιοθήκη jQueryUI. Στον οδηγό μας θα χρησιμοποιήσουμε αυτές τις δύο βιβλιοθήκες της Javascript για να προσθέσουμε την λειτουργία drag n drop στα παράθυρα μας. Επισκεπτόματε την ιστοσελίδα http://jqueryui.com/download και κατεβάζουμε το πακέτο ώς είναι. Έτσι θα έχουμε 2 αρχεία, το jquery-1.3.2.min.js και το jquery-ui-1.7.2.custom.min.js. Μετά τα αποθηκεύουμε μαζί με τα αρχεία της ιστοσελίδας μας αλλά σε έναν νέο φάκελο με το όνομα scripts.

Βήμα 2

Ανοίγουμε το index.html που φτιάξαμε χτές, και μέσα στο <head> γράφουμε

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Έτσι συμπεριλαμβάνουμε τα δύο αρχεία που κατεβάσαμε, και λέμε στην ιστοσελίδα μας να τα φορτώσει κατά την εκκίνηση.

Βήμα 3

Πρίν κάνουμε οτιδήποτε άλλο, ας προσθέσουμε το περιεχόμενο στην σελίδα μας. Στο <body> του αρχείου index.html και πιο συγκεκριμένα μέσα στο div content προσθέτουμε

<div class="column">
<div class="widget">
<h3>Τελευταία Άρθρα</h3>
<p><strong>Μαθήματα ECDL</strong><br />Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. <a href="#">Περισσότερα...</a></p>
<p><strong>Eiσαγωγή στην PHP Μέρος 2</strong><br />Σε αυτό το άρθρο θα δούμε το δεύτερο μέρος της εισαγωγής στην PHP, συνέχίζοντας από εκεί που είχαμε μείνει.<a href="#">Περισσότερα...</a></p>
<p><strong>Δημιουργήστε το δικό σας sticker</strong><br />Σε αυτό το βοήθημα θα δούμε βήμα βήμα πως μπορούμε να δημιουργήσουμε το δικό μας αυτοκόλλητο στο Photoshop.<a href="#">Περισσότερα...</a></p>
</div>
<div class="widget">
<h3>Γράψτε για το GreekTuts</h3>
<p>Θέλετε και εσείς να γράψετε άρθρα για το GreekTuts; Διαβάστε περισσότερα εδώ. Οποιοσδήποτε μπορεί να στείλει, γι'αυτό αδράξτε την ευκαιρία και στείλτε μας και εσείς.</p>
</div>
<div>
<h3>Συνεντεύξεις</h3>
<p><strong>Συνέντευξη με τον Γεράσιμο Τσιάμαλο</strong><br />O Γεράσιμος δέχτηκε να μας παραχωρήσει μια συνέντευξη στα πλαίσια του μήνα WordPress και να μοιραστεί μαζί μας τις εμπειρίες του και τις δουλειές του. <a href="#">Περισσότερα...</a></p>
</div>
</div>
<div id="featured">
<h2>Δωρεάν Μαθήματα ECDL</h2>
<p>Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. Mέσα από την σειρά οδηγών που ξεκινάει τον Ιούνιο, θα μάθετε και εσείς να χρησιμοποιείτε σαν επαγγελματίες τον υπολογιστή στις κύριες εφαρμογές αυτοματισμού γραφείου και τις βασικές υπηρεσίες του διαδικτύου.</p>
</div>
<div class="column">
<div class="widget">
<h3>Γίνε Συνδορμητής Στο GreekTuts</h3>
<p>Κερδίστε πρόσβαση σε επιπλέον υλικό και άρθρα, αλλά και πολλές άλλες παροχές και προσφορές αγοράζοντας μία απο τις συνδρομές που σας προσφέρει το GreekTuts.</p>
</div>
<div class="widget">
<h3>RSS Feed</h3>
<strong>Μαθήματα ECDL</strong>
<p>Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL.</p>
</div>
<div class="widget">
<h3>Επικοινωνία...</h3>
<p>Επικοινωνήστε μαζί μας</p>
<input type="text" value="Όνομα..." />
<input type="text" value="Email..." />
<textarea rows="4" cols="20" value="Μήνυμα..."></textarea>
</div>
</div>
<div class="column">
<div class="widget">
<h3>Οι Φίλοι μας στο Twitter</h3>
<center><img src="styles/twitt.png"></img></center>
</div>
</div>

Έτσι δημιουργούμε 3 στήλες, με 3 blocks στις 2 πρώτες, και 1 block στην τρίτη. Columns είναι οι στήλες και widgets τα blocks.

Βήμα 4

Ανοίγουμε το screen.css στον φάκελο styles, και προσθέτοντας τον εξής κώδικα θα δώσουμε μορφή στο περιεχόμενο μας

#featured {
width:                    592px;
padding:                6px;
margin:                    6px;
margin-left:            18px;
margin-top:                16px;
float:                    left;
height:                    200px;
background:                #333333 url("accent.jpg") no-repeat scroll -200px -40px;
border-radius:            5px;
-moz-border-radius:        5px;
-webkit-border-radius:    5px;
}
#featured h2 {
margin-left:            340px;
color:                    #ffffff;
font-size:                20px;
font-weight:            bold;
}
#featured p {
margin-left:            342px;
color:                    #ffffff;
}
.column {
width:                    290px;
padding:                6px;
margin:                    0;
margin-left:            12px;
float:                    left;
min-height:                300px;
height:                    100%;
}
.widget {
position:                relative;
padding:                6px;
margin:                    0;
margin-top:                10px;
background:                #f3f3f3 url(grad1.png) no-repeat top right;
border-radius:            5px;
-moz-border-radius:        5px;
-webkit-border-radius:    5px;
min-height:                30px;
overflow:                hidden;
border:                    1px solid #C9C9C9;
}
.widget h3 {
margin-top:                -6px;
color:                    #0f57bb;
font-size:                1.6em;
line-height:            2em;
font-weight:            normal;
border-bottom:            1px solid #999999;
background:                transparent url(movable.png) no-repeat center left;
text-indent:            12px;
cursor:                    hand;
text-shadow:            0 1px 0 #FFFFFF;
}

Βήμα 5

Θα χρησιμοποιήσουμε τις εξής εικόνες

accent.jpg

grad1.png

movable.png

twitt.png

Βήμα 6

Τώρα που έχουμε τα πάντα έτοιμα, θα προσθέσουμε την λειτουργία drag n drop. Αυτό το κάνουμε προσθέτοντας στο <head> του index.html και κάτω από τα 2 scripts τον εξής κώδικα

<script type="text/javascript">
$(document).ready(function(){
$(".column").sortable({
connectWith: '.column',
cursor: 'hand',
handle: 'h3',
opacity: 0.2,
change: function(e, i) {
// Post data back to server or update cookie
}
});
$(".widget").append('<div></div>');
$(".close").click(function(){
if ($(this).parent().data("collapsed")=="yes") {
$(this).parent().data("collapsed","no");
$(this).parent().animate({height:$(this).parent().data("height")});
} else {
$(this).parent().data("height",$(this).parent().height());
$(this).parent().data("collapsed","yes");
$(this).parent().animate({height:30});
}
});
});
</script>

Βήμα 7

Στο screen.css θα προσθέσουμε τον παρακάτω κώδικα, για να διορθώσουμε κάποιες ατέλεις που δημιουργούνται

.widget .close {
width:                    25px;
height:                    25px;
position:                absolute;
top:                    0;
right:                    0;
cursor:                    pointer;
}
.ui-sortable-helper {
border:                    3px solid #0f57bb;
cursor:                    move;
}

Βήμα 8

Πλέον η σελίδα μας είναι έτοιμη. Κάθε block που υπάρχει σε αυτήν, μπορεί να μετακινηθεί, και να μικρύνει ή να μεγαλώσει πατώντας το μπλέ κουμπάκι στην επικεφαλίδα του.

Δείτε παρακάτω το τελικό αποτέλεσμα

Οι συνδρομητές μας μπορούν παρακάτω να κατεβάσουν τα αρχεία του βοηθήματος

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Βήμα 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 με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Πρώτα από όλα θα δημιουργήσουμε τον καμβά μας. Ανοίγουμε ένα νέο αρχείο μεγέθους 580×450 pixels. Βάφουμε την επιφάνεια με κάποιο χρώμα και μετά επιλέγουμε τα Blending Options του layer και κάνουμε τις εξής ρυθμίσεις

Βήμα 2

Χρησιμοποιώντας το Ellipse Tool και κρατώντας το shift πατημένο θα δημιουργήσουμε έναν κύκλο στο κέντρο του καμβά μας

Βήμα 3

Επιλέγοντας το Direct Selection Tool και πατώντας πάνω στον κύκλο μας μπορούμε να δούμε τα τέσσερα σημεία τα οποία τον αποτελούν. Εμείς θα επιλέξουμε τα δύο νοτιοανατολικά σημεία.

Επιλέγουμε λοιπόν το ένα σημείο και κρατώντας πατημένο το Alt φέρνουμε τον κάτω οδηγό μέχρι το δεύτερο σημείο μας

Κάνουμε το ίδιο και για το κάτω σημείο του κύκλου μας

Βήμα 4

Δημιουργούμε τώρα έναν δεύτερο κύκλο με το Ellipse Tool και μετά επιλέγουμε το Rectangle Tool και πατάμε το μείον στο πληκτρολόγιο μας (-). Τώρα δημιουργούμε ένα παραλληλόγραμμο πάνω από τον δεύτερο μας κύκλο. Με το μείον (-) επιλεγμένο, ουσιαστικά αφαιρούμε από τον κύκλο το τετράγωνο και έτσι μένουμε με ένα μέρος του κύκλου μονο

Βήμα 5

Μετά, χρηστιμοποιόντας το Transform Tool (Ctrl+T) περιστρέφουμε το νέο μας σχήμα και το φέρνουμε να ταιριάξει με τον κύκλο μας

Βήμα 6

Πλεόν έχουμε κάτι που μοιάζει με αυτό που θέλουμε να φτιάξουμε. Τώρα λοιπόν θα επιλέξουμε τα Blending Options του νέου σχήματος μας και θα βάλουμε τις εξής ρυθμίσεις

Έτσι φτάνουμε στο παρακάτω αποτέλεσμα

Βήμα 7

Επόμενο μας βήμα είναι να δώσουμε χρώμα στο αυτοκόλλητο μας. Έτσι λοιπόν ανοίγουμε τα Blending Options του μεγάλου κύκλου μας και κάνουμε τα εξής

Βήμα 8

Τώρα θα δημιουργήσουμε έναν φωτισμό για το αυτοκόλλητο μας. Δημιουργούμε λοιπόν έναν νέο κύκλο και μετ το Direct Selection Tool επιλέγουμε το κάτω σημείο του και πατάμε δεξί κλίκ και Delete Anchor Point

Μετά με τον τρόπο που είδαμε στο βήμα 3 κάνουμε το σχήμα μας κάπως έτσι

Βήμα 9

Εδώ είναι λίγο περίπλοκο για αρχάριους οπότε διαβάστε προσεκτικά.

Μετά, επιλέγουμε στο Layer μας να βάλουμε μια μάσκα (1). Επιλέγουμε το Gradient Tool (2) και μετά το χρώμα μας από μάυρ0 σε άσπρο, την επιλογή Radial Gradient, και το Reverse (3). Τέλος με το Gradient Tool προσπαθούμε να κάνουμε την μάσκα μας όπως στην εικόνα που ακολουθεί (4)

Αφού λοιπόν έχουμε ολοκληρώσει το παραπάνω βήμα, επιλέγουμε τέλος το Blend Mode του layer σε Overlay

Βήμα 10

Με το Transform Tool θα φέρουμε τον φωτισμό μας πάνω στον κύκλο και θα τον περιστρέψουμε μέχρι να ταιριάξει. Τελευταίο βήμα είναι να προσθέσουμε το κείμενο μας με ότι εφέ θέλουμε εμείς και αυτό ήταν.

Τελικό Αποτέλεσμα

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Δείτε τι περιέχει το σετ

Όλοι μας οι συνδρομητές μπορούν να κατεβάσουν τα εικονίδα από τον σύνδεσμο που ακολουθεί.

Δεν  είστε συνδρομητής; Μάθετε περισσότερα για τις συνδρομές στο GreekTuts.net εδώ

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Μαζί με τα εικονίδια θα βρείτε :

• To .psd αρχείο το οποίο μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε νέα εικονίδια
• Το κάθε εικονίδιο σε .icns αρχείο για MAC
• Το κάθε εικονίδιο σε .png αρχείο(256×256 px)

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ