Κατασκευή ιστοσελίδων για αρχάριους ΜΑΘΗΜΑ 2ο – NVU


Κατασκευή ιστοσελίδων για αρχάριους

ΜΑΘΗΜΑ 2ο – NVU(http://net2.com/nvu/)

 

 

Όπως αναφέραμε και στο προηγούμενο μάθημα το NVU είναι ένα πάρα πολύ ισχυρό εργαλείο για κατασκευή ιστοσελίδων χωρίς να απαιτεί ιδιαίτερες γνώσεις προγραμματισμού. Ένα πολύ σημαντικό κομμάτι στην κατασκευή ιστοσελίδων είναι οι υπερσυνδέσεις. Η υπερ-σύνδεση είναι η σύνδεση ενός εγγράφου με μια άλλη σελίδα ή αρχείο που ανοίγουμε όταν κάνουμε κλικ επάνω της. Ο προορισμός είναι συχνά μια άλλη ιστοσελίδα, αλλά μπορεί να είναι επίσης μια εικόνα, μια διεύθυνση e-mail ή ένα πρόγραμμα. Η ίδια η υπερ-σύνδεση μπορεί να είναι κείμενο ή εικόνα. Αν θέλουμε να εισάγουμε μια υπερσύνδεση σε μια λέξη όπως το Google, τότε μπορούμε να επιλέξουμε τη συγκεκριμένη λέξη που μας ενδιαφέρει και να επιλέξουμε το μενού link από τη βασική γραμμή εργαλείων. Στο παράθυρο που ανοίγει στην ιδιότητα ‘Link Location’ εισάγουμε το link που μας ενδιαφέρει, όπως http://www.google.com.

Όπως ακριβώς με οτιδήποτε άλλο εισάγουμε σε μία ιστοσελίδα που δημιουργούμε στο NVU, έτσι και οι εικόνες μπορούν να εισαχθούν πολύ εύκολα μέσα από τη γραμμή εργαλείων. Το μόνο που έχουμε να κάνουμε είναι να επιλέξουμε το εικονίδιο για την εισαγωγή εικόνας (Image). Στη συνέχεια εμφανίζεται ένα παράθυρο, το παράθυρο ιδιοτήτων της εικόνας. Το παράθυρο αυτό όπως παρατηρούμε και στην εικόνα έχει τέσσερις καρτέλες, ‘Location’, ‘Dimensions’, ‘Appearance’ και ‘Link’. Στην καρτέλα Location επιλέγουμε την εικόνα που θέλουμε να εισάγουμε από την ιδιότητα Image Location. Επίσης ορίζουμε και την τιμή της ιδιότητας Alternate text. Το κείμενο που θα ορίσουμε σε αυτή την ιδιότητα είναι το κείμενο που θα εμφανίζεται στη θέση της εικόνας, στην περίπτωση που για οποιοδήποτε λόγο ο Web Browser(φυλλομετρητής) δεν θα καταφέρει να φορτώσει την εικόνα που ορίσαμε. Επίσης, μπορούμε να ορίσουμε την ιδιότητα Tooltip η οποία είναι υπεύθυνη για το κείμενο το οποίο θα εμφανίζεται όταν ο χρήστης θα αφήνει το ποντίκι πάνω από την εικόνα. Η επόμενη καρτέλα ιδιοτήτων που φαίνεται στην παραπάνω εικόνα είναι η καρτέλα Dimensions. Στην καρτέλα αυτή ορίζουμε τις ιδιότητες που αφορούν τις διαστάσεις της εικόνας. Μπορούμε είτε να αφήσουμε την εικόνα να εμφανιστεί με τις κανονικές της διαστάσεις, είτε να ορίσουμε εμείς τις διαστάσεις που θέλουμε, απόλυτα σε Pixels (πλάτος και ύψος) ή σχετικά με % ποσοστό. Αν επιλέξουμε το Check Box  Constrain, τότε διατηρούνται οι αναλογίες πλάτους και ύψους της εικόνας. Σε αντίθετη περίπτωση οι αναλογίες της εικόνας αλλάζουν. Το ύψος και πλάτος μίας εικόνας μπορούμε να τα αλλάξουμε και μέσα από το γραφικό περιβάλλον, μετά από την εισαγωγή της, απλά επιλέγοντάς τη και μετακινώντας τα όρια του περιγράμματός της. Στην επόμενη καρτέλα Appearance, μπορούμε να ορίσουμε τις ιδιότητες Spacing Left and Right, που είναι σε Pixels το κενό που θα υπάρχει μεταξύ εικόνας και κειμένου δεξιά και αριστερά. Αντίστοιχα το Top and Bottom είναι το κενό περιθώριο που θα υπάρχει μεταξύ της εικόνας και του κειμένου πάνω και κάτω. Η ιδιότητα Solid Border ορίζει το αν θα είναι ορατό το περίγραμμα της εικόνας και το πάχος του σε Pixels. Τέλος η ιδιότητα Align Text to Image ορίζει τη θέση του κειμένου ως προς την εικόνα, δηλαδή αν το κείμενο θα αναδιπλώνεται γύρω από την εικόνα ή αν θα στοιχίζεται στο κέντρο της εικόνας, στο κάτω ή το πάνω μέρος της εικόνας. Οι τιμές που μπορεί να πάρει η ιδιότητα αυτή και το αποτέλεσμά τους είναι οι ακόλουθες.

  • At the top Στοιχίζει την εικόνα με το πάνω μέρος του υψηλότερου στοιχείου κειμένου στη γραμμή.

  • In the center Στοιχίζει την εικόνα στο μέσο της γραμμής του κειμένου.

  • At the bottom Στοιχίζει το κείμενο με το κάτω μέρος της εικόνας.

  • Wrap to the left Τοποθετεί την εικόνα στο δεξί άκρο του παραθύρου και αναδιπλώνει το κείμενο στα αριστερά της εικόνας.

  • Wrap to the right Τοποθετεί την εικόνα στο αριστερό άκρο του παραθύρου και αναδιπλώνει το κείμενο στα δεξιά της εικόνας.

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

Η συνέχεια στην επόμενη PCNews.

 


Θέμης Γλαβέλης

Υποψήφιος Διδάκτωρ Πληροφορικής

Leave a Reply

Your email address will not be published. Required fields are marked *