ΠΛΗΡΗΣ ΟΔΗΓΟΣ ΓΙΑ ΔΗΜΙΟΥΡΓΙΑ PROFILE ΣΤΟ JOY.GR

ΕΙΣΑΓΩΓΗ:

Μετά από πολλές ώρες λιωσίματος στο PC και πολλούς καφέδες για να καταφέρω να φτιάχνω όμορφα Profiles στο JOY, και μετά από ώριμη σκέψη αποφάσισα να σας μεταφέρω με τον οδηγό αυτόν τις γνώσεις μου. Για να ακολουθήσετε τον οδηγό αυτόν θα πρέπει πρώτα να κατεβάσετε ένα πολύ χρήσιμο εργαλείο το "TopStyle Pro" το οποίο θα το βρείτε στο http://www.download.com η πατήστε αμέσως εδώ http://www.bradsoft.com/download/dloadhandler.asp?file=topstyle.exe . Το μόνο που χρειάζεται να βάλετε εσείς είναι λίγη από την φαντασία σας και είστε έτοιμοι!

Το κάθε Profil είναι ένα αρχείο HTML που βρίσκεται μέσα στον Server του JOY.GR και το οποίο δεν μπορείτε να επεξεργαστείτε πλήρως αλλά το Joy έχει αφήσει ανοιχτό το ενδεχόμενο να εισάγεις κώδικα HTML μέσα στην "επεξεργασία Profil". Μέσα στον κώδικα αυτό υπάρχει μια αναφορά σε ένα αρχείο CSS (Cascading Style Sheets) το οποίο περιέχει όλες τις εντολές της εμφάνισης του προφίλ (<link href="/community/members/page.css" type="text/css" rel="stylesheet" media="screen"/>). Από αυτά συμπεραίνουμε ότι αν κατεβάσουμε το αρχείο αυτό το page.css και το διαμορφώσουμε ανάλογα με τα χρώματα που θέλουμε και κάνουμε μια νέα αναφορά στο αυτό αρχείο μέσα από την επεξεργασία προφίλ, θα έχουμε την αλλαγή στο Design. Το νέο αρχείο βέβαια θα πρέπει να το κάνουμε πρώτα upload σε κάποιον server έτσι ώστε να βρίσκεται διαρκώς online. Ας πάρουμε όμως τα πράγματα από την αρχή...

ΒΗΜΑ 1:

Για να μπορέσουμε να δουλέψουμε και Offline πρώτα θα πρέπει να αποθηκέυσουμε το προφίλ μας στον σκληρό δίσκο. Όταν είστε στο Internet μπείτε στο προφίλ σας και στον Internet Explorer πατήστε Αρχείο -> Αποθήκευση ως. Πηγαίνετε στον φάκελο που θέλετε να αποθηκευτεί δώστε του ένα όνομα και πατήστε Αποθήκευση. Έστω ότι το αποθηκεύσατε ως joy.htm στον φάκελο C:\ . Αυτόματα θα δημιουργηθεί ένας φάκελος C:\joy.files ο οποίος θα περιέχει διάφορα αρχεία του προφίλ σας όπου το ένα από αυτά θα είναι και το page.css το οποίο και θα επεξεργαστούμε στη συνέχεια. 

ΒΗΜΑ 2:

Αφού έχετε εγκαταστήσει το TopStyle Pro (αυτήν την στιγμή κυκλοφορεί η έκδοση 3.10) εκτελέστε το και αφού φορτώσει πατήστε File -> Open και βρείτε το joy.htm στον C:\.

Στην μέση της οθόνης θα βλέπετε τον κώδικα του htm αρχείου και από κάτω ένα preview της σελίδας (επειδή όμως το Preview είναι μικρό μπορείτε να πατήσετε και στο menu Preview -> External Preview -> Internet Explorer ώστε να σας ανοίξει νέο παράθυρο του προφίλ για να ελέγχεται την κατάσταση καλύτερα). Στην γραμμή 10 βρίσκεται η αναφορά στο αρχείο page.css. Πατήστε πάνω του και θα ανοίξει το νέο παράθυρο για την επεξεργασία του css.

Στο παράθυρο αυτό εμφανίζεται όλος ο κώδικας του Design. Με καφέ γράμματα είναι όλες οι κλάσσεις και η κάθε κλάσση έχει κάποιες ιδιότητες που μπαίνουν μέσα στις αγκύλες. Όταν λέμε κλάσση εννοούμε κάποιο σημείο του προφίλ, π.χ. το κάτω μέρος του προφίλ που γράφει "Disclaimer | Privacy  © 2003-2004 Navel, all rights reserved." και είναι θαλασσί είναι η κλάσση #footer και υπάρχει μέσα στον κώδικα έτσι:

#footer {
CLEAR: both; MARGIN-TOP: 8px; PADDING-LEFT: 32px; FONT-WEIGHT: bold; FONT-SIZE: 13px; PADDING-BOTTOM: 64px; COLOR: #fff; PADDING-TOP: 8px; FONT-FAMILY: verdana, helvetica; BACKGROUND-COLOR: #49e
}

που περιέχει μέσα στις { } τις διάφορες ιδιότητες όπως την BACKGROUND-COLOR: #49e που μεταφράζεται ως το πισω χρώμα να είναι θαλασσί και την FONT-SIZE: 13px; που μεταφράζεται ώς το μέγεθος της γραμματοσειράς. Το μόνο δύσκολο της υπόθεσης είναι να απομονώσουμε μόνο εκείνες τις κλάσσεις που μας ενδιαφέρουν αφού μερικές είναι άχρηστες για τον σκοπό μας. Παρακάτω παραθέτω έναν πίνακα με τις πιο σημαντικές (τουλάχιστον για εμένα) από αυτές με τις οποίες μπορείτε να φτιάξετε ένα ωραίο προφίλ.

ΒΗΜΑ 3:

Προς το παρόν μάλλον όλα αυτά ακούγονται λίγο κινέζικα γι' αυτό ας φτιάξουμε μαζί ένα προφίλ ας πούμε... background μαύρα και να είναι με κόκκινα περιγράμματα και γραμματοσειρά κίτρινη.

Θέλουμε μαύρα background άρα θα πάμε να αλλάξουμε από τις επάνω κλάσσεις την .main, .frame και #footer. Για να βρίσκουμε πιο γρήγορα τις κλάσσεις χρησιμοποιούμαι αριστερά το κουτάκι CSS Selectors:

Βρίσκουμε έτσι το .main και στο κεντρικό παράθυρο με το CSS βλέπουμε τον κώδικα με τις ιδιότητες του που αρχικά είναι:

.main {
PADDING-BOTTOM: 8px; PADDING-TOP: 8px; BACKGROUND-COLOR: #e7f2fd
}

Μπορούμαι τώρα απλά αλλάζοντας το #e7f2fd σε Black ή τον αντίστοιχο κωδικό του μαύρου που είναι #000 να αλλάζουμε το BACKGROUND-COLOR σε μαύρο. Όμως που να θυμόμαστε όλους τους κωδικούς και τις αποχρώσεις? Στο δεξιό μέρος της οθόνης έχουμε ένα ακόμη χρήσιμο εργαλείο ώστε να παίζουμε με τις ιδιότητες έτσι αφού έχουμε πατήσει πρώτα στο .main στα Selectors στο δεξιό μέρος κάνουμε αυτήν την αλλαγή ώστε να μη γράφουμε κώδικα:

Κάνουμε το ίδιο και για την κλάσση .frame και .#footer. Στο footer σαν προεπιλογή δεν έχει καθόλου BACKGROUND-COLOR επιλογή αλλά δεν μας πειράζει γιατί στο δεξιό μέρος πάλι εκεί που λέει BACKGROUND-COLOR επιλέγουμε το μαύρο. Έτσι ο κώδικας του #footer θα γίνει έτσι:

.frame {
WIDTH: 892px; PADDING-TOP: 24px;
background-color: Black;
}

θα προστεθεί μόνη της δηλαδή η τελευταία γραμμή.

Για να δουμε μέχρι τώρα τι αλλαγές έχουμε κάνει πατάμε File -> Save. Όσο έχουμε κάνει αλλαγές και δεν έχουμε αποθηκεύσει θα φαίνεται το page.css με αστεράκι:

Πηγαίνοντας τώρα στο Preview και πατώντας Refresh (F5) θα ανανεωθεί το προφίλ και θα δούμε ότι το πίσω μέρος έχει γίνει μαύρο. 

Επειδή πολύ μπορεί να θέλουν να βάλουν ένα background αντί το μαύρο στις ιδιότητες των τριών αυτών κλάσσεων μπορούμε να προσθέσουμε την εντολή αυτή στο τέλος:

background-image: url(http://www.heathersanimations.com/backgrounds/purple/fume03.jpg);

Εννοείται ότι μπορούμε να το κάνουμε και πιο εύκολα από το δεξιό μέρος το εργαλείο Inspector και εννοείται ότι θα βρει ο καθένας ένα δικό του background από κάποιο site και θα αντικαταστήσει αυτού που έβαλα εγώ δοκιμαστικά μέσα στο url.

ΒΗΜΑ 4:

Αφού αλλάξαμε το πίσω μέρος από τα κουτιά ας αλλάξουμε τώρα το background μέσα τους. Ας το κάνουμε και αυτό μαύρο. Από τον πίνακα επάνω η κλάσση που θα χρησιμοποιήσουμε είναι η .box .body. Την βρίσκουμε λοιπόν στο εργαλείο CSS Selectors και κάνουμε το ίδιο με πριν. Αποθηκεύουμε και προχωράμε παρακάτω...

ΒΗΜΑ 5:

Ουυυπς! Μαύρη μαυρίλα πλάκωσε... Εμ μαύρο baclground στα κουτιά μαύρη και η γραμματοσειρά; Πάμε να αλλάξουμε την κλάσση DIV. Ψάξατε καλά? Χεχε σας την έφερα δεν υπάρχει αλλά θα την προσθέσετε χειροκίνητα... Βάτε στο τέλος του κώδικα του page.css αυτό:

DIV {

}

και αφού κάνετε save θα υπάρχει πλέον στο CSS Selectors. Έτσι πατήστε την από εκεί η απλά κάντε κλικ ανάμεσα στο κενό στις αγκύλες για να κάνετε τις αλλαγές στο Inspector δεξιά. Στην ιδιότητα color βρείτε το χρώμα κίτρινο η απλά πληκτρολογίστε yellow. Αν το κάνατε σωστά στον κώδικα θα έχει εμφανιστεί αυτό:

DIV{
color: Yellow;
}

Παίχτε λίγο ακόμα με το Inspector και βρείτε εκεί που λέει font-family και βάλτε την Comic Sans MS ή κάποια άλλη της αρεσκείας σας. Έτσι τελικά ο κώδικας θα είναι αυτός μέσα στο DIV:

DIV{
color: Yellow;
font-family: "Comic Sans MS";
}

ΒΗΜΑ 6:

ΜΜμμμ.... Τα headers στα κουτάκια παραμείναν θαλασσί και σκεφτόμουν να μπέναν στο κέντρο αντί για αριστερά. Για να κοιτάξω τον πίνακα... Αααα ναι! Η κλάσση .box H1 είναι! Αφού την βρείτε αλλάχτε το Background-color σε Red και το Color σε Yellow και στο text align βάλτε center. Κάντε ένα Save πάλι και δείτε τι άλλαξε:

ΒΗΜΑ 7:

Ας πάμε τώρα να αλλάξουμε τα περιγράμματα στα κουτιά, στο μενού και στις εικόνες. Κλάσσεις .box, .hmenu, .messages TABLE TD και .Files IMG. Αφού τα βρούμε στο CSS Selector θα δούμε ότι το καθένα έχει από τέσσερα border colors... Το border-top, το border-right, το border-left και το border-bottom. Κουράγιο αλλάχτε και τα τέσσερα στο καθένα, σύνολο 16 αλλαγές... Στο .box και στο .hmenu αν θέλετε πιο έντονο περίγραμμα αλλάχτε το 1px σε 2px καθώς μπορείτε να αλλάξετε και το είδος του περιγράμματος από solid π.χ. σε dotted. Παίξτε με τις ιδιότητες.

ΒΗΜΑ 8:

Το μενού είναι ακόμη θαλασσί ας το αλλάξουμε να το κάνουμε μαύρο το πίσω με κόκκινα γράμματα και όταν το ποντίκι πηγαίνει επάνω να γίνεται κίτρινο. Πηγαίνετε στο .hmenu που είναι το γενικό και βάλτε background-color:black μετά στο .hmenu UL LI.active A και βάλτε background-color:black και color:yellow για το κουμπάκι που είναι αυτήν την στιγμή ενεργό, μετά στο .hmenu UL LI A:hover και βάλτε background-color:black και color:yellow αφού είπαμε πώς θέλουμε όταν το ποντίκι πηγαίνει επάνω να γίνεται κίτρινο το link και τέλος στο .hmenu A και βάλτε color:red ώστε αρχικά να είναι κόκκινα τα γράμματα. Το μενού σας είναι έτοιμο βέβαια πειραματιστείτε για να το κάνετε όπως θέλετε.

ΒΗΜΑ 9:

Πάμε να αλλάξουμε τα links τα οποία και είναι θαλασσί ακόμα, π.χ. στην λίστα αγαπημένων. Η κλάσση είναι η .box A. Βάλτε κίτρινο ανοιχτό να μην είναι ίδιο με τους τίτλους. Προσοχή! Το .box A όπως και το DIV που είδαμε πριν δεν υπάρχει θα το προσθέσετε εσείς με τον ίδιο τρόπο. Οκ μάστορα το κάναμε αλλά όταν πάμε το ποντίκι επάνω γίνεται πορτοκαλί και δεν μας αρέσει. Ε πηγαίντε στην κλάσση Α:hover και βάλτε αντί για πορτοκαλί που έχει ως προεπιλογή red και προσθέστε background-color:yellow για να έχει ένα απλο εφφέ. Πάει κι αυτό. Κάντε Save και τσεκάρετε.

ΒΗΜΑ 10:

Πάμε να αλλάξουμε τα σχόλια στις φωτογραφίες που είναι γκρί καθώς και τα σχόλια στις ψηφοφορίες και στό ποιός έστειλε το μήνυμα. Ε δεν νομίζω να χρειάζεται να σας πώ κι αυτό πως να το κάνετε, οι κλάσεις .messages .info και .sum .info είναι. Βάλτε RED.

ΒΗΜΑ 11:

Πάμε στο shoutbox πολύ ξεπερασμένο αυτό το λευκό χρώμα με τα μαύρα γράμματα. Αλλάξτε το background σε μαύρο, το color σε yellow και τα borders πάνω, κάτω, αριστερά και δεξιά σε κόκκινο και βάλτε και καμιά καλή γραμματοσειρά.

ΒΗΜΑ 12:

Αλλάχτε τώρα και τα κουμπάκια "Πες το!" και "Ψήφισε!" βάζοντας background-color:black και color:red.

ΒΗΜΑ 13:

Τα Scroll Bars θα τα αλλάξετε μέσα στο BODY. Αποτελείτε από πολλές ιδιότητες ένα Scroll Bar όπως το κουτάκι που μετακινούμε με το ποντίκι, το πίσω background, οι σκιές, το περίγραμμα, τα βελάκια... Βάλτε το SCROLLBAR-FACE-COLOR: red,  το SCROLLBAR-TRACK-COLOR: black και τα βελάκια SCROLLBAR-ARROW-COLOR: black. Προχωράμε!

ΒΗΜΑ 13:

Αν το Banner το έχετε κατανοήσει και δεν θέλετε πια να το κοιτάτε :p προσθέστε στο τέλος με αυτό:

.top {
MARGIN-TOP: 97px; 
DISPLAY: none; 
FLOAT: right
}

ΒΗΜΑ 14:

 Μόνοι σας πια μπορείτε να αλλάξετε και το πάνω μέρος με τα links στις αντίστοιχες κλάσσεις

ΒΗΜΑ 15:

Αφού τα κάνετε όλα αυτά και αποθηκεύσετε το CSS μπορείτε αν θέλετε π.χ. να αλλάξετε όπου υπάρχει κόκκινο σε μπλε να χρησιμοποιήσετε το εργαλείο CSS Pallete Editor που βρίσκεται αριστερά το οποίο σας δείχνει τα χρώματα που έχετε χρησιμοποιείσαι ως τώρα και πόσες φορές εμφανίζονται μέσα στο προφίλ. Την αλλαγή σε όλα που έχουν κόκκινο π.χ. την κάνετε όπως βλέπετε στην παρακάτω εικόνα. Πολύ χρήσιμο εργαλείο και για τον εντοπισμό μιας κλάσσης. Π.χ. έχετε γραμματοσειρά λαχανί χρώμα αλλά δεν θυμάστε ότι είναι στο DIV στα χρώματα πατώντας στο + στο χρώμα λαχανί ανοίγει μια λίστα με όλες τις κλάσσεις που χρησιμοποιούν το χρώμα αυτό.

ΒΗΜΑ 16:

 Το αρχείο που έχει δημιουργηθεί μέχρι τώρα λογικά θα πρέπει να είναι αυτό page.css που όμως καλό θα ήτανε να φτιάξετε ένα νέο αρχείο που να έχει μέσα μόνο τις κλάσσεις που χρησιμοποιήσατε αφού όταν μπαίνετε στο προφίλ σας εκτελείτε το αρχικό μη επεξεργασμένο page.css του joy που εκτελεί όλες τις κλάσσεις που δεν έχετε πειράξει με αποτέλεσμα να εκτελούνται 2 φορές. Έτσι κάντε το νέο mycss.css και αφήστε του μέσα μόνο τις απαραίτητες κλάσσεις για να μη μπερδεύεστε κιόλας όταν φτιάξετε ένα νέο προφίλ. Θα είναι πολύ καλύτερα μετά κατά την επεξεργασία να μην έχει όλα τα άχρηστα.

ΒΗΜΑ 16:

Τώρα μένει να βάλετε το τελικό CSS να υπάρχει κάπου στο ιντερνετ. Ανοίχτε έναν λογαριασμό σε κάποιο free web host και κάντε upload το αρχείο εκεί. Προτείνω το www.oocities.org μιας και επιτρέπει να ανεβάζεις και εικόνες εκεί και να τις κάνεις Link από εκεί που μερικοί άλλοι servers δεν το επιτρέπουν. Έτσω ότι το username που βάζεις κατα την εγγραφή στο geocities είναι kostas, τότε αφού ανεβάσεις το αρχείο το full-link του θα είναι αυτό εδώ:

http://www.oocities.org/kostas/page.css

ΒΗΜΑ 17:

Τέλος αφού έκανες όλα τα παραπάνω μπες στο Joy στην επεξεργασία προφίλ και στο πεδίο "Όνομα" η σε οποιοδήποτε άλλο πεδίο (αλλά όχι και πολύ κάτω γιατί δεν θα πιάσει) συμπλήρωσε δίπλα από αυτό που έχεις την εντολή αυτή όπως ακριβώς την βλέπεις:

<link href='http://www.oocities.org/kostas/page.css' type='text/css' rel='stylesheet' media='screen'>

Στείλε αρχικά αυτό που φτιάξαμε :p

ΒΗΜΑ 18:

Άντε να σας πω και για μουσικούλα... Αρχικά βρείτε ένα αρχειάκι .mid κατά προτίμηση στο yahoo ή όπου αλλού θέλετε. Έστω ότι το αρχείο είναι αυτό http://www.heathersanimations.com/cat2.mid (μη ξεχνάτε το http ποτέ, πατήστε και πάνω του να δείτε ότι παίζει), κάπου στην επεξεργασία προφίλ προσθέστε την εντολή αυτήν: <bgsound src='http://www.heathersanimations.com/cat2.mid' loop='-1'> (εννοείται ότι αλλάζει το src ανάλογα με τη μουσικούλα που βρήκατε. Και για φωτογραφίες μέσα στο κουτί με τα στοιχεία παρόμοια κατάσταση απλά η εντολή είναι <IMG SRC='linkpalimetinfotopouthelete'>

Διαβάστε προσεχτικά τον οδηγό και πιστεύω να μην έχετε καμιά απορία για την δημιουργία, τώρα για javascripts π.χ. πεταλούδες να πετάνε, ποντίκια με εφφέ και άλλα τέτοια ψαχτείτε μόνοι σας :) Και αν φτιάξετε κάτι καλό με τον οδηγό αυτό πείτε μου στο JOY τα λέμε εκεί παιδιά! :)