Δημιουργία ιστοτόπων/Πλοήγηση

Κάθετη πλόηγηση

Οριζόντια πλοήγηση

Καρτέλες

Σχεδιαστικοί στόχοι

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

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

τεχνικές
- css καρτέλες (γίνεται δίνοντας ένα μοναδικό όνομα-αναγνωριστικο id- σε κάθε body στοιχείο των ιστοσελίδων που απαρτίζουν τα περιεχομενα των καρτελών μας και με χρήση κληρονομικών επιλογέων μπορούμε να επιτύχουμε το αποτέλεσμα που θέλουμε,
- css + javascript
- css + javascript πλαίσιο (πχ dojo , jquery κτλ)

Κυλιόμενες πόρτες

slidingdoors
- Το τεχνικό πρόβλημα που προσπαθεί να λύσει το παραπάνω άρθρο είναι η κατασκευή οριζόντιας πλοήγησης με καρτέλες

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

Πηγαίο; κώδικας του 'κυλιώμενες πόρτες

Ο κώδικας είναι ένα xhtml αρχείο με ενσωματωμένο css φύλλο στυλ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>επεκτάσιμες καρτέλες με την τεχνική των κυλιόμενων πορτών</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    #header {
    float:left;
    width:100%;
    background:yellow;
    font-size:93%;
    line-height:normal;
    }
  #header ul {
    margin:0;
    padding:0;
    list-style:none;
    }
  #header li {
    float:left;
    background:url("images/norm_right.gif") no-repeat right top;
    margin: 0px;
    padding:0;
   border: 0px black solid ;
    }
  #header a {
    display:block;
    background:url("images/norm_left.gif")  no-repeat left top;
    padding:5px 15px;
    }
</style>
</head>
<body>
  <div id="header">
    <ul>
      <li><a href="#">Κεντρική σελίδα</a></li>
      <li id="current"><a href="#">Νέα</a></li>
      <li><a href="#">Εγχειρήματα</a></li>
      <li><a href="#">Μέλη</a></li>
      <li><a href="#">Βοήθεια</a></li>
    </ul>
  </div>
</body>
</html>

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

οι επιπρόσθετοι κανόνες css

#header #current {
    background-image:url("images/norm_right_on.gif");
    }
  #header #current a {
    background-image:url("images/norm_left_on.gif");
    }

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

Sliding-doors-tutorial-bg.gif