Hot Potatoes – Γραφικά στη γραμμή πλοήγησης

Στο Hot Potatoes εξ ορισμού δημιουργείται μια οριζόντια γραμμή πλοήγησης στο επάνω μέρος κάθε σελίδας (σε αρκετά προγράμματα δημιουργείται και μια πανομοιότυπη στο κάτω μέρος της σελίδας).

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

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

ΟΔΗΓΙΕΣ

Τι θα χρειαστείτε:

• Μια άσκηση του Ηot Potatoes σε μορφή html (ιστοσελίδα)
• Έναν επεξεργαστή κειμένου (όπως το Σημειωματάριο των Windows – OXI, το   👿 MSWORD!!!)
  [προτείνω τον επεξεργαστή κειμένου NotePad++]
• Μια εικόνα κατάλληλη για γραφικό φόντου
  Εδώ θα χρησιμοποιήσω δύο εικόνες

  Ονομα αρχείου: bg.png	Ονομα αρχείου: bg2.png
  Αυτή η εικόνα θα μπει φόντο στη γραμμή πλοήγησης	Κι αυτή θα είναι το φόντο του κουμπιού, όταν θα το πατάμε

Δυσκολία

Απαιτούμενος χρόνος

5-10 λεπτά (εφόσον έχετε έτοιμες τις εικόνες)

Τι πρέπει να γνωρίζετε;

• Τα στοιχειώδη από html.
• Επιθυμητή η γνώση CSS (Cascading Style Sheets)

Τι πρέπει να κάνετε;

• Κάντε δεξί κλικ στο αρχείο html και επιλέξτε: Άνοιγμα με > Σημειωματάριο (ή όποιο άλλο πρόγραμμα επεξεργασίας κειμένου ή html έχετε)
• Αναζητήστε την παρακάτω περιοχή.
  Σε ολόκληρη αυτή την περιοχή ορίζεται η μορφή της μπάρας πλοήγησης και των κουμπιών της (Style).
  Υποδείξεις: H λειτουργία div.NavButtonBar αφορά στην μπάρα πλοήγησης, η λειτουργία .NavButton αφορά στο κουμπί (κανονική κατάσταση) και οι λειτουργίες .NavButtonUp & .NavButtonDown αφορoύν στη μορφή του κουμπιού όταν περνάμε από πάνω το ποντίκι ή όταν το πατάμε.
  Όπου βλέπετε παραμέτρους όπως: #4c4c4c, αυτές αφορούν στον 16αδικό αριθμό χρώματος.  Πάντως σας προτείνω να χρησιμοποιείτε ασφαλή χρώματα web. Ολόκληρη τη σειρά αυτών των χρωμάτων μπορείτε να τη δείτε εδώ: Ασφαλή χρώματα Web.

  /*BeginNavBarStyle*/

  div.NavButtonBar{
  background-color: #999999; (το χρώμα του φόντου)
  text-align: center;
  margin: 2px 0px 2px 0px;
  clear: both;
  font-size: 100%; (το μέγεθος της γραμματοσειράς κουμπιού)
  }

  .NavButton {
  border-style: solid; (περίγραμμα κουμπιού, εδώ συμπαγές)

  border-left-color: #cccccc;
  border-top-color: #cccccc;
  border-right-color: #4c4c4c;
  border-bottom-color: #4c4c4c;
  background-color: #999999;
  color: #000000;

  border-width: 2px; (πάχος περιγράμματος κουμπιού)
  cursor: pointer;   
  }

  .NavButtonUp {
  border-style: solid;

  border-left-color: #cccccc;
  border-top-color: #cccccc;
  border-right-color: #4c4c4c;
  border-bottom-color: #4c4c4c;
  color: #999999;
  background-color: #000000;

  border-width: 2px;
  cursor: pointer;   
  }

  .NavButtonDown {
  border-style: solid;

  border-left-color: #4c4c4c;
  border-top-color: #4c4c4c;
  border-right-color: #cccccc;
  border-bottom-color: #cccccc;
  color: #999999;
  background-color: #000000;

  border-width: 2px;
  cursor: pointer;   
  }

  /*EndNavBarStyle*/

• Πώς θα βάλουμε τις εικόνες;
  Θα προσθέσουμε την παράμετρο για εικόνα φόντου στα σημεία που επιθυμούμε (με κόκκινο χρώμα)! Έτσι …
  • για το φόντο της γραμμής πλοήγησης:
    

    div.NavButtonBar{
    background-image: url(bg.png);
    background-color: #999999;
    text-align: center;
    margin: 2px 0px 2px 0px;
    clear: both;
    font-size: 100%;

  • για το φόντο του κουμπιού πλοήγησης:
    

    .NavButtonUp {
    border-style: solid;
    background-image: url(bg.png);
    border-left-color: #cccccc;
    border-top-color: #cccccc;
    border-right-color: #4c4c4c;
    border-bottom-color: #4c4c4c;
    color: #999999;
    background-color: #000000;
    border-width: 1px; (μειώνω λίγο το πάχος, αφού το γραφικό έχει δικό του)
    cursor: hand; (το αλλάζω σε hand, οπότε όποιος πάει από πάνω θα βλέπει ένα χεράκι, αντί για το δείκτη του ποντικιού! – μόνο σε ΙΕ δυστυχώς)
    

  • για το φόντο του κουμπιού πλοήγησης, όταν περνά το ποντίκι από πάνω (mouseover) και όταν πατιέται (mousedown):
    

    .NavButtonUp {
    border-style: solid;
    border-left-color: #cccccc;
    border-top-color: #cccccc;
    border-right-color: #4c4c4c;
    border-bottom-color: #4c4c4c;
    color: #999999;
    background-color: #000000; (αλλάζοντας μόνο αυτό σε π.χ. #ffffff γλιτώνουμε και από το μαύρο χρώμα στο πάτημα του κουμπιού, που λέγαμε πιο πάνω…)
    background-image: url(bg2.png);
    border-width: 1px;
    cursor: hand;
    }
    ……………….

    .NavButtonDown {
    border-style: solid;
    border-left-color: #4c4c4c;
    border-top-color: #4c4c4c;
    border-right-color: #cccccc;
    border-bottom-color: #cccccc;
    color: #999999;
    background-color: #000000; (αλλάζοντας μόνο αυτό σε π.χ. #ffffff γλιτώνουμε και από το μαύρο χρώμα στο πάτημα του κουμπιού, που λέγαμε πιο πάνω…)
    background-image: url(bg2.png);
    border-width: 1px;
    cursor: hand;
    }

• Σημαντική παρατήρηση: Οι εικόνες θα πρέπει να είναι αποθηκευμένες στον ίδιο φάκελο με το αρχείο ιστοσελίδας (html).

• Και τώρα μπορείτε να δείτε το αποτέλεσμα κάνοντας κλικ εδώ (για επιστροφή στη σελίδα αυτή πατήστε το κουμπί <= της άσκησης)