Χρήσιμες συμβουλές για bloggers #2 - Εικόνες για καρτέλες μενού

   Κατ' αρχάς, αν ψάχνετε να βρείτε πού είναι το #1 της συγκεκριμένης ανάρτησης, μην βασανίζεστε. Αναφέρομαι σε αυτήν εδώ την ανάρτηση.

   Δεύτερον, αν δεν είστε blogger ή/και δεν σας ενδιαφέρει να μάθετε κάποια tips που ενδεχομένως θα σας βοηθήσουν να εμπλουτίσετε το blog σας, τότε η ανάρτηση αυτή δεν έχει να σας πει κάτι και μπορείτε να την προσπεράσετε άφοβα :).

   Αν συνεχίζετε να διαβάζετε, τότε ας ξεκινήσουμε!

    Σας έχω ήδη δείξει πώς να κάνετε το blog σας να μοιάζει με site χρησιμοποιώντας το HTML/JavaScript gadget για να φτιάξετε ένα τυπικό μενού με καρτέλες και υποκαρτέλες, πώς να φτιάχνετε σελίδες για το blog σας και πώς να διανείμετε την εκάστοτε ανάρτηση στην αντίστοιχη σελίδα.

   Αυτή τη φορά θα κάνουμε κάποιες στιλιστικές παρεμβάσεις στο μενού μας ώστε να φαίνεται - αν μη τι άλλο - πιο περίπλοκο από ένα στοιχειώδες μενού με σκέτα γράμματα (αν και οι σύγχρονες τάσεις στο web design είναι μάλλον μινιμαλιστικές). Πριν ξεκινήσουμε, όμως, δύο σημαντικές σημειώσεις. Πρώτον, για να εφαρμόσετε αυτά που εφήρμοσα κι εγώ θα χρειαστεί να έχετε κάποιες έστω στοιχειώδεις γνώσεις HTML. Δεύτερον, δεν θα παρουσιάσω βήμα - βήμα τη διαδικασία όπως την προηγούμενη φορά, αλλά απλά θα σας παραπέμψω στις κατάλληλες πηγές. Πάμε, λοιπόν!

Εικόνες για καρτέλες μενού.

   Όσο κι αν εμπλουτίσουμε με CSS τις καρτέλες του μενού μας, δεν μπορούμε να έχουμε ένα πραγματικά ξεχωριστό αποτέλεσμα. Αν θέλουμε κάτι πραγματικά ιδιαίτερο, θα πρέπει να αντικαταστήσουμε τις καρτέλες με εικόνες που θα έχουμε φτιάξει οι ίδιοι. Προσοχή, όμως, γιατί αυτό έχει δύο σημαντικά μειονεκτήματα. Πρώτον, αν στο μέλλον χρειαστεί να αλλάξουμε το μενού μας (π.χ. να προσθέσουμε καρτέλες ή υποκαρτέλες), τότε θα είναι πολύ πιο κοπιαστικό να πρέπει να φτιάξουμε μια νέα εικόνα και να τη συνδέσουμε με το μενού από ό,τι θα ήταν να προσθέσουμε απλά ένα επιπλέον αντικείμενο λίστας (li) στον κώδικά μας. Δεύτερον, θα πρέπει να έχουμε κάποιο χώρο κάπου στο internet όπου θα αποθηκεύσουμε τις εικόνες που θα αντιστοιχούν στις καρτέλες του μενού μας. Και φυσικά ο χώρος αυτός θα πρέπει να είναι αξιόπιστος, γιατί αν χαθούν από εκεί οι εικόνες μας τότε πολύ απλά δεν θα φαίνεται μετά ούτε το μενού μας. Εγώ πάντως εμπιστεύομαι το Dropbox το οποίο θεωρώ ότι είναι από τις πιο αξιόπιστες cloud storage επιλογές.

   

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

  Το πρώτο πράγμα που θα πρέπει να κάνετε, είναι να προετοιμάσετε στο πρόγραμμα επεξεργασίας εικόνας της προτίμησής σας, τόσες εικόνες όσες θα είναι και οι καρτέλες/υποκαρτέλες του μενού σας. Π.χ. το δικό μου μενού έχει πέντε καρτέλες και τρεις υποκαρτέλες, οπότε συνολικά έφτιαξα οκτώ ξεχωριστές εικόνες. Στη συνέχεια πρέπει να πάρετε αυτές τις εικόνες και να τις τροποποιήσετε ανάλογα, ώστε να αλλάζουν όταν περνάει από πάνω τους ο δείκτης του ποντικιού. Έτσι συνολικά θα καταλήξετε με δύο σετ εικόνων, ένα για όταν δεν αγγίζει τις καρτέλες ο δείκτης του ποντικιού και ένα για όταν τις αγγίζει. Επιστρέφοντας στο δικό μου παράδειγμα, μετά από όλη αυτή τη διαδικασία κατέληξα με δύο σετ των οκτώ εικόνων, σύνολο 16 εικόνες.

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

   Από εκεί και στο εξής, τον κώδικα που θα χρειαστείτε για να αντικαταστήσετε τις καρτέλες του μενού με εικόνες θα τον βρείτε εδώ (προφανώς αντικαθιστάτε τα url του παραδείγματος με τα αντίστοιχα των εικόνων σας). Η συγκεκριμένη λύση, όμως, είναι αρκετά "ετοιματζίδικη", οπότε αν δεν έχετε κάποιες γνώσεις CSS και δεν σταθείτε αρκετά τυχεροί ώστε να έρθει γάντι στην περίπτωσή σας, τότε θα δυσκολευτείτε να την προσαρμόσετε στα μέτρα σας. Αν, λοιπόν, έχετε το κίνητρο, την όρεξη και το κουράγιο για λίγη επιμόρφωση παραπάνω, τότε σας προτείνω να παρακολουθήσετε τα παρακάτω βίντεο:

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

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

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