GreekTuts » HTML

Απλό Σύστημα Εγγραφής Χρηστών

Jimakos — Wed, 21 Jul 2010 07:50:22 +0000

H Φόρμα Εγγραφής

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

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

forma.php




Φόρμα Εισαγωγής στοιχείων



Όνομα : 

Κωδικός:

Email :

Η Βάση Δεδομένων

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

Ας δούμε λοιπόν πως θα δημιουργήσουμε αυτή την βάση :

Δημιουργία βάσης :

CREATE DATABASE `Greektuts` ;

έπειτα αφού επιλέξουμε την βάση δημιουργούμε έναν πίνακα:

Δημιουργία πίνακα:

CREATE TABLE `Greektuts`.`Register` (

`Name` VARCHAR( 40 ) NOT NULL ,
`Password` VARCHAR( 40 ) NOT NULL ,
`Email` VARCHAR( 60 ) NOT NULL ,
PRIMARY KEY ( `Name` )

) ENGINE = MYISAM ;

Έτσι έχουμε δημιουργήσει την βάση μας και τον πίνακα μας .

Διαχείρηση Δεδομένων

Τώρα το κομμάτι του κώδικα που θα διαχειριστεί τα δεδομένα:

Δημιουργούμε ένα αρχείο php με όνομα register.php

Για αρχή θα δημιουργήσουμε μια function για να διαχειριζόμαστε την σύνδεση μας με την βάση

Λοιπόν δημιουργήσαμε μια μέθοδο για να μπορούμε να την καλούμε όποτε εμείς θέλουμε

Ας δούμε αναλυτικά τι κάναμε μέχρι στιγμής

Είναι ο κώδικας σύνδεσης στην βάση

$connection=mysql_connect("$localhost","$db_username","db_password") or die("Δεν επιτεύχθηκε η σύνδεση");

Σημαντικό*

Αντικαταστήστε το $localhost,$db_username,$db_password και παρακάτω το $db_name

με τα δικά σας στοιχειά ένα παράδειγμα :

$connection=mysql_connect("localhost","root","") or die("Δεν επιτεύχθηκε η σύνδεση");

Η σύνδεση αυτή καθορίζει το όνομα της βάσης την οποία θέλουμε να επιλέξουμε

$db_selct=mysql_select_db($db_name,$connection) or die("Δεν επιτεύχθηκε η σύνδεση με τον πίνακα ");

Έπειτα προχωράμε παρακάτω :


Εδώ απλά κάνουμε έναν έλεγχο απλό για το αν έχουν εισαχθεί δεδομένα στην φόρμα που είχαμε δημιουργήσει προηγουμένως.
Ας το πάρουμε κομμάτι κομμάτι
session_start();

αυτή η μέθοδος θα μας χρησιμεύσει αργότερα για την επιστροφή μηνυμάτων στον χρήστη .
Ο παρακάτω κώδικας ελέγχει αν έχει “πατηθεί “ το κουμπί Καταχώρησε αν όντως έχει “πατηθεί”
τότε βγάζει όλα τα δεδομένα από το $_SESSION['errors'] ώστε να μην έχουμε κολλήματα αργότερα
if(isset($_POST['submit'])){
unset($_SESSION['errors']);

Εδώ κάνουμε έναν έλεγχο από τους πιο απλούς που θα μπορούσατε να κάνετε
ελέγχουμε αν το πεδίο όνομα είναι άδειο αν ναι τότε εκχωρούμε μέσα στο $_SESSION  το ακόλουθο μήνυμα. Το ίδιο γίνετε για όλα τα πεδία τα οποία θέλουμε να ελέγξουμε.
if(empty($name)){
$_SESSION['errors']=" Το πεδίο όνομα θα πρέπει να συμπληρωθεί ";
}

Παρατήρηση στο δεύτερο έλεγχο και ούτω κάθε ξης βάζουμε μια . πριν το =
Τέλος προσθέτουμε λίγο ακόμη έλεγχο και είμαστε έτοιμοι
if(!isset($_SESSION['errors'])){
db_con();
$query=mysql_query("SELECT * FROM register where Name='$name' ") or die("Κάτι πήγε στραβά");
$check=mysql_num_rows($query);
if($check >0){
$_SESSION['error2']="Το όνομα χρήστη $name υπάρχει ήδη στην βάση ";
header( "Location: forma.php" );
}
else {
$query=("INSERT INTO register (Name, Password,Email) VALUES ('$name', '$pass', '$email')");
$insert=mysql_query($query);
}
}
else {
header( "Location: forma.php" );
}
}

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

Eισαγωγή στην HTML5 μέρος 1ο

Pantso — Mon, 17 May 2010 11:55:13 +0000

Τι είναι η HTML5;

Η HTML5 είναι η νέα έκδοση της γνωστής γλώσσας προγραμματισμού HTLM. Η προηγούμενη έκδοση, η οποία χρησιμοποιούμε ακόμα σήμερα, βγήκε το 1999. Από τότε όμως έχουν αλλάξει πολλά στον παγκόσμιο ιστό, και έτσι η ανάγκη για standards και πλήρη συμβατότητα οδήγησε το World Wide Web Consortium (W3C) και το Web Hypertext Application Technology Working Group (WHATWG) να συνεργαστούν και να δημιουργήσουν την νέα αυτή γλώσσα. Η HTML5 είναι ακόμα υπό ανάπτυξη, αλλά μερικοί browsers υποστηρίζουν από τώρα κάποια χαρακτηριστικά της και κάποιες λειτουργίες της.

Κάποιοι βασικοί κανόνες που έχουν οριστεί για την HTML5 είναι:

Βάση για τα νέα χαρακτηριστικά να είναι οι HTML, CSS, DOM, και η JavaScript
Ελαχιστοποίηση των plugins (όπως το Flash)
Καλύτερη λειτουργία εντοπισμού λαθών
Περισσότερο markup για να αντικατασταθεί το scripting
Πλήρη συμβατότητα ανεξαρτήτως συσκευής

Νέα Χαρακτηριστικά

Κάποια από τα νέα χαρακτηριστικά της HTML5 είναι:

Το στοιχείο canvas για το drawing
Τα στοιχεία video και audio για αναπαραγωγή πολυμέσων
Νέα στοιχεία περιεχομένου όπως τα footer, header, nav και section
Νέα στοιχεία δημιουργίας φόρμας όπως τα calendar, date, time, email, url και search

Video στην HTML5

Μέχρι σήμερα, για να παίξουμε ένα video σε έναν browser χρειαζόμαστε κάποιο plugin (πρόσθετο) όπως το Flash ή το QuickTime.

H HTML5 μας καθορίζει έναν νέο τρόπο, και αυτός είναι με την χρήση του στοιχείου video. Ας δούμε πως χρησιμοποιείται

Το μόνο που χρειάζεται να γράψουμε για να εμφανίσουμε το video μας είναι:

Για να εμφανίσουμε ένα μήνημα σε όλους όσους πάνε να δούνε το video μας από κάποιον browser που δεν υποστηρίζει το στοιχείο video της HTML5 γράφουμε


Ο φυλλομετρητής σας δεν υποστηρίζει το στοιχείο video της HTML5.

Τέλος μια πιο εξειδικευμένη χρήση του στοιχείου video είναι η εξής:




Your browser does not support the video tag.

Υποστηριζόμενα Video Files/Browsers

Ιδιότητες

autoplay: To video θα ξεκινήσει αυτόματα μόλις φορτώσει
controls: Θα εμφανίζονται ή όχι τα κουμπιά όπως το play
height: To ύψος σε pixels
loop: Αν θα επαναλαμβάνεται το video μετά το τέλος του
preload: Το video θα φορτώνεται μαζί με την σελίδα
src: Το URL του video
width: To πλάτος σε pixels

Audio στην HTML5

Ότι ισχύει σε σχέση με τα videos και τα plugins, ισχύει και για τα audio clips. Έτσι η HTML5 μας ορίζει το στοιχείο audio για την αναπαραγωγή ήχων.

Το μόνο που χρειάζεται να γράψουμε για να αναπαράγουμε τον ήχο μας είναι:

Για να εμφανίσουμε ένα μήνημα σε όλους όσους πάνε να ακούσουν τον ήχο μας από κάποιον browser που δεν υποστηρίζει το στοιχείο audio της HTML5 γράφουμε


Ο φυλλομετρητής σας δεν υποστηρίζει το στοιχείο audio της HTML5.

Τέλος μια πιο εξειδικευμένη χρήση του στοιχείου audio είναι η εξής:




Your browser does not support the audio element.

Υποστηριζόμενα Audio Files/Browsers

Ιδιότητες

autoplay: ο ήχος θα ξεκινήσει αυτόματα μόλις φορτώσει

controls: Θα εμφανίζονται ή όχι τα κουμπιά όπως το play

loop: Αν θα επαναλαμβάνεται ο ήχος μετά το τέλος του

preload: Ο ήχος θα φορτώνει μαζί με την σελίδα

src: To URL του ηχητικού κομματιού μας

Ευχαριστούμε πολύ τα W3Schools για αυτό το βοήθημα

Στο δεύτερο μέρος της εισαγωγής στην HTML5 θα δούμε το στοιχείο Canvas και τα tags της HTML5

Μετακινούμενα Παράθυρα 2o Μέρος

Pantso — Sat, 15 May 2010 08:00:51 +0000

Βήμα 1

Ξεκινάμε από εκεί που είχαμε μείνει στο πρώτο μέρος. Αφού έχουμε έτοιμη την σελίδα μας, επόμενο βήμα είναι να φορτώσουμε την βιβλιοθήκη 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 που φτιάξαμε χτές, και μέσα στο γράφουμε

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

Βήμα 3

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



Τελευταία Άρθρα
Μαθήματα ECDL
Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. Περισσότερα...
Eiσαγωγή στην PHP Μέρος 2
Σε αυτό το άρθρο θα δούμε το δεύτερο μέρος της εισαγωγής στην PHP, συνέχίζοντας από εκεί που είχαμε μείνει.Περισσότερα...
Δημιουργήστε το δικό σας sticker
Σε αυτό το βοήθημα θα δούμε βήμα βήμα πως μπορούμε να δημιουργήσουμε το δικό μας αυτοκόλλητο στο Photoshop.Περισσότερα...


Γράψτε για το GreekTuts
Θέλετε και εσείς να γράψετε άρθρα για το GreekTuts; Διαβάστε περισσότερα εδώ. Οποιοσδήποτε μπορεί να στείλει, γι'αυτό αδράξτε την ευκαιρία και στείλτε μας και εσείς.


Συνεντεύξεις
Συνέντευξη με τον Γεράσιμο Τσιάμαλο
O Γεράσιμος δέχτηκε να μας παραχωρήσει μια συνέντευξη στα πλαίσια του μήνα WordPress και να μοιραστεί μαζί μας τις εμπειρίες του και τις δουλειές του. Περισσότερα...



Δωρεάν Μαθήματα ECDL
Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. Mέσα από την σειρά οδηγών που ξεκινάει τον Ιούνιο, θα μάθετε και εσείς να χρησιμοποιείτε σαν επαγγελματίες τον υπολογιστή στις κύριες εφαρμογές αυτοματισμού γραφείου και τις βασικές υπηρεσίες του διαδικτύου.



Γίνε Συνδορμητής Στο GreekTuts
Κερδίστε πρόσβαση σε επιπλέον υλικό και άρθρα, αλλά και πολλές άλλες παροχές και προσφορές αγοράζοντας μία απο τις συνδρομές που σας προσφέρει το GreekTuts.


RSS Feed
Μαθήματα ECDL
Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL.


Επικοινωνία...
Επικοινωνήστε μαζί μας







Οι Φίλοι μας στο Twitter

Έτσι δημιουργούμε 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. Αυτό το κάνουμε προσθέτοντας στο του index.html και κάτω από τα 2 scripts τον εξής κώδικα

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

Μετακινούμενα Παράθυρα 1o Μέρος

Pantso — Fri, 14 May 2010 11:59:09 +0000

Στο πρώτο μέρος λοιπόν θα “στήσουμε” την ιστοσελίδα μας, δομικά και στυλιστικά, στην οποία στο δεύτερο μέρος θα προσθέσουμε περιεχόμενο, και θα κάνουμε τα κουτιά που περιέχουν το περιεχόμενο να μπορούν να γίνουν drag n drop.

Βήμα 1

Ας ξεκινήσουμε πρώτα δημιουργώνας την σελίδα μας σε HTML. Ανοίγουμε ένα νέο αρχείο με το όνομα index.html και γράφουμε τον εξής κώδικα





Μετακινούμενα Παράθυρα μέρος 1ο - GreekTuts.net

Βήμα 2

Ας προσθέσουμε λοιπόν την επικεφαλίδα την φόρμα αναζήτησης και το μενού πλοήγησης. Στο γράφουμε




GreekTuts




Κεντρικη
Σχετικα
Blog
Υπηρεσιες
Επικοινωνια

Βήμα 3

Ας προσθέσουμε και το υποσέλιδο μας. Κάτω ακριβώς από τον παραπάνω κώδικα γράφουμε



Σχετικά
Υπηρεσίες
Blog
Επικοινωνία


Άρθρο 1
Άρθρο 2
Άρθρο 3
Άρθρο 4
Άρθρο 5


Όροι Χρήσης
Απόρητο
Sitemap




Σχεδιασμός & Ανάπτυξη : Pantso για το GreekTuts.net

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

Δημιουργία μενού πλοήγησης με τα CSS3

Ssstratos — Tue, 30 Mar 2010 23:42:57 +0000

Σε προηγούμενο βοήθημα είδαμε πως μπορούμε να δημιουργήσουμε ένα μενού πλοήγησης στο Photoshop. Ας μετατρέψουμε τώρα αυτό το γραφικό σε λειτουργικό μενού με html και css.

Τι θα χρειαστούμε

Για την δημιουργία του μενού θα χρειαστούμε τα εξής:

Την εικόνα bg.jpg για το φόντο
Ένα μικρό πλαίσιο
και σκιά

HTML

Δημιουργούμε ένα νέο αρχείο με το όνομα index.html και γράφουμε τον εξής κώδικα:






Menu







Home
About
Blog
Advertise
Contact
Tutorials
Freebies
Services

CSS

Ας δώσουμε ζωή στο μενού μας.

Δημιουργούμε ένα αρχείο και το ονομάζουμε style.css. Γράφουμε τον εξής κώδικα:

#nav-menu{
background: url(bg.jpg) no-repeat;
width: 901px;
height: 62px;
border: 1px solid #000000;
border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}

#nav-menu ul{
list-style: none;
padding: 0;
margin: 0;
width: 901px;
height: 62px;
}

#nav-menu li{
float: left;
margin: 0 0.15em;
}

#nav-menu li a{
height: 4em;
line-height: 3.6em;
float: left;
width: 6.7em;
display: block;
color: #ffffff;
text-decoration: none;
text-align: center;
}

#nav-menu li a:hover{
background-color: rgba(0, 0, 0, 0.2);
height: 60px;
}

Επίσης, δημιουργούμε ένα ακόμα αρχείο με το όνομα ie.css και γράφουμε:

#nav-menu{
border: none;
}
#nav-menu li a:hover{
background-color: #000;
}

(αυτό θα βελτιώσει την εμφάνιση του μενού στον Internet Explorer)

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

Προσθήκη Εικονιδίων Στους Συνδέσμους με jQuery

Pantso — Tue, 30 Mar 2010 10:19:57 +0000

Ξεκινάμε επιλέγοντας τα εικονίδια μας. Τα εικονίδια που θα επιλέξουμε, θα ήταν σωστό να έχουν μέγεθος 16×16 pixels, έτσι ώστε να μπορούμε να τα προσθέσουμε και σε κείμενο παραγράφου, χωρίς να καταστρέψουμε το ύψος της γραμμής του κειμένου. Ένα πολύ καλό μέρος για να ψάξουμε τα εικονίδια που θέλουμε είναι το IconFinder

CSS

Στο αρχείο CSS που χρησιμοποιούμε, θα προσθέσουμε τις παρακάτω γραμμές κώδικα:

a.pdf {
background: url(images/pdf.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

a.txt {
background: url(images/text.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

a.zip {
background: url(images/zip.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

a.email {
background: url(images/email.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

a.external {
background: url(images/link.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

jQuery

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

Επεξήγηση κώδικα
Ουσιαστικά ο κώδικας μας ψάχνει τα href tags για καταλήξεις. Αντιστοίχως λοιπόν όπoυ βρεί την κατάληξη που θα ψάξουμε, προσθέτει την αντίστοιχη κλάση, ώστε να μπορούμε μετά να αλλάξουμε την εμφάνιση του με τα CSS.

Ο παραπάνω κώδικας κάνει το εξής:
$(document).ready(function() – Ελέγχουμε ότι η σελίδα έχει φορτώσει πλήρως πρίν κάνουμε το οτιδήποτε
$(“a[href$='.pdf']“) – Ψάχνουμε τα a[href] tags. Όπου βρεί την κατάληξη .pdf
.addClass(“pdf”); – προσθέτει την κλάση pdf.

Τέλος πρέπει να κάνουμε την σελίδα μας να φορτώνει την βιβλιοθήκη της jQuery. Αυτό το κάνουμε γράφοντας στο μέρος της σελίδας μας τον εξής κώδικα:

Δημιουργήστε το δικό σας Βιογραφικό

Pantso — Sat, 13 Mar 2010 14:58:58 +0000

Πρώτα από χρειαζόμαστε τον “άδειο” καμβά μας. Δημιουργούμε ένα νέο αρχείο html και γράφουμε τον κώδικα




     Βιογραφική Σελίδα

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

Τώρα θα προσθέσουμε στο το μέρος του κώδικα μας τα εξής:

Όνοματεπώνμο
Accounting Technician | Web Designer

Διεύθυνση:

123 Οδός, Αθήνα 12345
Τηλέφωνο:
(+30)210 12 34 567
E-mail:
mailto:yourname@yourdomain.com">yourname@yourdomain.com
Ιστοσελίδα:
http://www.yourdomain.com">www.yourdomain.com
Φωτογραφία:
assets/img/photo.jpg" title="Glenn McKeown" >φωτογραφία

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque adipiscing facilisis suscipit. Duis lectus purus, rhoncus at euismod ac, tristique eget felis. Integer dictum, nisl eget pretium consequat, quam enim scelerisque elit, ac dictum nisl dolor id dui. Nullam eu lacus nisl. "

Εργασία
Νοε 2004 - Σήμερα

Roads Service Management Accounts
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien quis elit pretium ornare. Donec augue risus, pellentesque eget hendrerit id, ultricies nec erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ιουλ 2001 - Νοε 2004
Senior Web Designer
This is an example of how a paragraph might look with a few hyperlinks thrown in. You may to link to your #">portfolio site, your #">blog, a previous employer or #">something else. Be sure to keep it relevant and within the scope of the job you are applying for.

Δεκ 1999 - Ιουλ 2001
Circus Performer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien quis elit pretium ornare. Donec augue risus, pellentesque eget hendrerit id, ultricies nec erat.

Εκπαίδευση
2006 - 2008
Belfast Institute of Further & Higher Education
Institute of Accounting Technicians in Ireland – with Distinction.

1993 - 2000

Ballymena Academy
A-Levels: Economics, Computing

GCSE: Biology, Business Studies, Information , English, Maths, Geography, Physics, Media Studies, Spanish

Συστάσεις
Current Employer
Lorem ipsum

Management Accounts

Lorem ipsum

Management Accounts

Previous Employer
Lorem ipsum

Management Accounts

Lorem ipsum

Σεμινάρια

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Εξειδίκευση
Λογισμικό

MS Office
Dreamweaver
Photoshop

Γλώσσες Προγραμματισμού

HTML / CSS
PHP
Javascript
Web Standards

Επιπλέον Ειδικέυσεις

Communnication skills
Project management
Presentation skills

Επιπλέον Πληροφορίες
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque adipiscing facilisis suscipit. Duis lectus purus, rhoncus at euismod ac, tristique eget felis. Integer dictum, nisl eget pretium consequat, quam enim scelerisque elit, ac dictum nisl dolor id dui. Nullam eu lacus nisl.

Τέλος για να δώσουμε την τελική μορφή του βογραφικού μας θα γράψουμε τον εξής κώδικα στο

CSS3 Gradient

Linear background

#linearBg {
height: 100px;
background-color: #1a82f7; /* fallback color */
background-image: url(images/linear_bg_2.png); /* fallback image */
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}

Η εικόνα που θα χρησιμοποιήσουμε είναι αυτή.

Κάντε μια επισκόπηση και θα δείτε ένα απίθανο gradient φτιαγμένο με CSS.

Ακορντεόν jQuery

Pantso — Thu, 04 Feb 2010 09:07:26 +0000

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

Αφού είδαμε το τελικό αποτέλεσμα είμαστε έτοιμοι να δοκιμάσουμε να φτάσουμε σε αυτό και εμείς. Ας ξεκινήσουμε λοιπόν

HTML

Ξεκινάμε δημιουργώντας ένα κενό έγγραφο html με το όνομα index.html, το οποίο θα περιέχει τον εξής κώδικα :





Ακορντεόν jQuery - GreekTuts

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

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

Καρτέλα 2
Βάζοντας αναζήτησης παραγωγικής πω μια, με απλό θέματα παράγει μου. Νέες πρώτοι τελειώσει κι λες, οι στα νόμιζες σταματάς συνεντεύξης, όλη εσφαλμένη κατάσταση δωροδοκηθούν πω. Του κι τότε τους προγραμματιστής, το γραφικά μέγιστη εντυπωσιακό έξι, πω μια καθώς αναφορά αποκλειστικούς. Στα ώς μπουν εκτελέσει παραδοτέου, ναί δείξει ειδικά αλλάζοντας τα, το πως πλέον βρίσκονται ανταγωνιστής. Εργασίας χρησιμοποιούσες πω ένα, οι ανά γραφικά ευκολότερο συγχωνευτεί, μέρος γι'αυτό καλύτερο στη τα.
Καρτέλα 3
Εγώ τα γραφικά κακόκεφος εκφράσουν, πάντα εξοργιστικά σε σας. Το από κόψεις συνεχώς συγχωνευτεί, σας σταματάς μπορούσε οι. Το ροή αθόρυβες σίγουρος απομόνωση. Έργων γλιτώσει βάζοντας νέο αν, εγώ φτιάξε γι'αυτό πρόσληψη μα, σπίτι άτομο το μας. Που ύψος γειτονιάς περιβάλλον οι, σας μη θέλεις γίνεται προσπαθήσεις, γίνεται ευκολότερο αναγκάζονται κι ματ. Θα που εκφράσουν αναφέρονται μεταγλωτίσει, αφού κύκλο νιρβάνα πω μου, κάποιο υπηρεσία ματ μη.
Καρτέλα 4
Ως χάος τοπικές δημιουργήσεις ήδη, να αφήσεις συζήτηση επεξεργασία όσο. Ματ δε κύκλο μόλις διοίκηση, ναι κεντρικό φθηνότερος διοικητικό το, τότε γραμμές κακόκεφους όχι ώς. Όσο ας λοιπόν τεσσαρών, μπουν αρέσει γραφικά άρα το. Ροή μη ελέγχους παραγωγικής πιθανότητες, θα ειδικά εκτελέσει συγκεντρωμένοι όρο. Το νέα ελέγχους προσθέσει περισσότερο.

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

Παρατηρήστε ότι στην τελευταία καρτέλα(Καρτέλα 5) προσθέσαμε και μια εικόνα, αφού μας δίνεται η δυνατότητα αυτή.

CSS

Αφού δημιουργήσαμε την σελίδα μας, ήρθε η ώρα να της δώσουμε και μορφoποίηση.

Δημιουργούμε ένα κενό αρχείο, το μετονομάζουμε σε styles.css και γράφουμε τον εξής κώδικα:

body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
background-color:#898989;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #666666 url(images/arrow-square.gif) no-repeat right -51px; /* Εδώ ορίζουμε το background, που στην περίπτωση μας είναι τα πλαϊνά κουμπάκια */
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
color:#ffffff;
}
.accordion h3:hover {
background-color: #333333;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background:#E0E0E0;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}

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

jQuery

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

Την βιβλιοθήκη της jQuery θα την βρείτε εδώ

Τέλος θα πρέπει να δημιουργήσουμε το script το οποίο θα ευθύνεται για την κίνηση του ακορντεόν μας. Έτι γράφουμε στο μέρος του html αρχείου τον εξής κώδικα :

Αυτό ήταν. Πλέον έχουμε ένα ακορντεόν με πλήρη κίνηση μέσω jQuery.

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

HTML5 : Χρήσιμες Ιστοσελίδες

Pantso — Tue, 15 Dec 2009 11:03:14 +0000

Πηγή άρθρου Line25.com