DreamWeaver Μέρος Δ: Σύνδεσμοι -Links

Σύνδεσμοι (Links)

Στο Dreamweaver μπορούμε να προσθέσουμε τριών ειδών links. Για να δημιουργήσετε links προς «εξωτερικά» sites, επιλέξτε το κείμενο ή την εικόνα που θα οδηγεί εκεί που θέλετε και από τον Properties Inspector (ενώ βρίσκεστε στο Design View), συμπληρώστε το URL στο οποίο θα οδηγεί ο σύνδεσμος και πατήστε Enter.

Για να δημιουργήσετε links μεταξύ των αρχείων και των σελίδων σας τα οποία θέλετε να έχετε στο website σας, επιλέξτε πάλι το κείμενο ή την εικόνα που θέλετε και στη συνέχεια μπορείτε να επιλέξετε να χρησιμοποιήσετε κάποια από τις εξής μεθόδους:

1. Πατήστε το εικονίδιο «Browse for file» και βρείτε το αρχείο που οδηγεί το link σας
.
2. Δημιουργήστε το link, δείχνοντας στο αρχείο αυτό με το κουμπί .

3. Επιλέξτε Insert > Hyperlink.

Για να δημιουργήσετε συνδέσμους προς συγκεκριμένα σημεία μέσα στην σελίδα σας, τα λεγόμενα named anchors (άγκυρες ονομάτων), κάντε τα εξής:

1. Τοποθετήστε τον κέρσορα στο σημείο όπου θέλετε να ορίσετε το εσωτερικό Link.

2. Επιλέξτε Insert > Named Anchor.

3. Δώστε ένα όνομα στο link αυτό.

4. Δημιουργήστε το link χρησιμοποιώντας το σύμβολο # ακολουθούμενο από το όνομα που δώσατε πιο πριν, για παράδειγμα #named_anchor.

Για να μπορείτε να βλέπετε τα anchors που έχετε προσθέσει, θα πρέπει να έχετε ενεργοποιήσει την δυνατότητα Preferences > Invisible Elements.

Δραστηριότητα

Στην επόμενη δραστηριότητα θα εισάγουμε πολλά διαφορετικά στοιχεία στο αρχείο index.html. Πιο συγκεκριμένα, θα συνδυάσουμε εισαγωγή κείμενου και μορφοποίηση του, εισαγωγή μιας λίστας με bullets και εισαγωγή τριών διαφορετικών ειδών συνδέσμων.

Απάντηση

1. Ανοίξτε το αρχείο index.html και εισάγετε το κείμενο «Σήμερα θα μάθουμε να φτιάχνουμε απλές σελίδες με το Dreamweaver 8 το οποίο αποτελεί ένα πολύ καλό εργαλείο για την ανάπτυξη ιστοσελίδων.»

2. Εισάγετε το κείμενο «παρακάτω είναι μια λίστα με 4 Links : » και κάντε το bold. Ξεκινήστε την δημιουργία μιας λίστας με bullets επιλέγοντας το κατάλληλο κουμπί από τον Properties Inspector.

3. Εισάγετε ως αντικείμενο της λίστας το «Link προς την σελίδα profile» και δημιουργήστε ένα σύνδεσμο από αυτό το κείμενο προς το αρχείο profile.html.

4. Επαναλάβετε το παραπάνω βήμα δημιουργώντας συνδέσμους προς τα αρχεία page1 και page2.

5. Εισάγετε ως αντικείμενο της λίστας το «Link προς την ιστοσελίδα www.in.gr» και δημιουργήστε ένα σύνδεσμο από αυτό το κείμενο προς το website www.in.gr.

Το τελικό αποτέλεσμα θα είναι όπως αυτό που φαίνεται στην παρακάτω εικόνα:

Εικόνες

Στην ενότητα 1 είδαμε πως μπορούμε να εισάγουμε εικόνες με την χρήση του tag <IMG>. Η διαδικασία εισαγωγής εικόνων στο Dreamweaver είναι πολύ πιο εύκολη. Το μόνο που έχετε να κάνετε είναι είτε να την «σύρετε» μέσα στον χώρο όπου υλοποιείτε την σελίδα σας, είτε να την εισάγετε χρησιμοποιώντας το Insert > Image.

Είναι πολύ σημαντικό να ορίσετε και εναλλακτικό κείμενο περιγραφής των εικόνων σε περίπτωση που κάποιοι browsers δεν επιτρέπουν την εμφάνιση εικόνων. Αυτό γίνεται εύκολα, ορίζοντας το πεδίο Alt. από το Properties Panel. Μπορείτε επίσης να ορίσετε αν η εικόνα σας θα έχει πλαίσιο και ποια θα είναι η στοίχισή της σε σχέση με την σελίδα.

rollover images

Πολύ χρήσιμα και εντυπωσιακά είναι και τα rollover images τα οποία χρησιμοποιούνται κυρίως για να δημιουργηθούν διαδραστικά κουμπιά. Τα rollover images έχουν το χαρακτηριστικό ότι αλλάζουν κάθε φορά που ο κέρσορας του ποντικιού περνάει από πάνω τους, Ένα παράδειγμα χρήσης τους είναι το εξής: Φανταστείτε ότι έχετε την εικόνα μιας πόρτας η οποία αλλάζει στην εικόνα μιας ανοιχτής πόρτας όταν ο κέρσορας πάει επάνω σ’αυτήν και λειτουργεί ως σύνδεσμος για να μπουν οι επισκέπτες σας σε μια άλλη σελίδα του website σας. Για να φτιάξετε ένα rollover image, θα πρέπει αρχικά να έχετε δημιουργήσει δύο εικόνες με ακριβώς ίδιο μέγεθος, στην συνέχεια επιλέγετε Insert > Image Objects > Rollover Image και στο μενού που εμφανίζεται ορίζετε την αρχική και την τελική εικόνα καθώς επίσης
και τα υπόλοιπα χαρακτηριστικά του συνδυασμού εικόνων (Image).

Image maps (χάρτες εικόνας)

Πολύ χρήσιμα είναι και τα Image maps (χάρτες εικόνας) τα οποία είναι εικόνες οι οποίες έχουν χωριστεί σε «περιοχές» ή «hotspots» όπως αλλιώς λέγονται και στα οποία όταν γίνει κλικ επάνω σε κάποιο hotspot συμβαίνει μια ενέργεια, όπως για παράδειγμα, το άνοιγμα ενός αρχείου ή η μετάβαση σε μια άλλη σελίδα. Παράδειγμα χρήσης ενός Image map που χρησιμοποιείται κατά κόρον στο Internet είναι η δημιουργία hotspots σε μια εικόνα που απεικονίζει τον χάρτη της Ελλάδας και κάθε hotspot να οδηγεί και στον δικτυακό χώρο του κάθε νομού.
Για να δημιουργήσετε ένα image map, επιλέξτε μια εικόνα που έχετε εισάγει στην σελίδα σας και από τον Property Inspector δώστε ένα όνομα στον χάρτη εικόνας που θα δημιουργήσετε. Προσέξτε έτσι ώστε να μην υπάρχει άλλος χάρτης εικόνας με το ίδιο όνομα. Στη συνέχεια, επιλέξτε κάποιο από τα έτοιμα σχήματα για το hotspot σας και σχεδιάστε επάνω στην εικόνα το hotspot αυτό. Αφότου το σχεδιάσετε , ορίστε στον Property Inspector που θα οδηγεί ο σύνδεσμος σας (Link) , καθώς επίσης και σε ποιο παράθυρο θα ανοίγει (Target). Μπορείτε να προσθέσετε πολλά hotspots στην ίδια εικόνα, ενώ για να τα επεξεργαστείτε, απλά κάντε μονό κλικ επάνω τους. Όταν τελειώσετε την επεξεργασία τους, κάντε κλικ σε κάποιο άλλο σημείο στην σελίδα σας έτσι ώστε να συνεχίσετε τον σχεδιασμό της.

Για να μετακινήσετε ή να αλλάξετε το μέγεθος ενός hotspot , μπορείτε να επιλέξετε το μαύρο
βέλος από τον Property Inspector και είτε να μετακινήσετε ολόκληρο το hotspot, είτε να
αυξομειώσετε το μέγεθος του.

Δραστηριότητα

Σε αυτή την δραστηριότητα θα εισάγουμε μια εικόνα, ένα rollover image καθώς επίσης και
έναν χάρτη εικόνων στο αρχείο index.html.

Απάντηση

1. Ανοίξτε το αρχείο index.html και εισάγετε μια εικόνα της αρεσκείας σας.
2. Εισάγετε ένα rollover image. Δηλώστε την αρχική και την τελική εικόνα αυτού.
3. Εισάγετε έναν χάρτη εικόνας και δηλώστε ότι το αριστερό μισό του θα οδηγεί στο www.in.gr, ενώ το δεξί μισό του θα οδηγεί στο www.out.gr.
4. Αποθηκεύεστε τις αλλαγές στο αρχείο και πατήστε F12 για να κάνετε προεπισκόπηση της ιστοσελίδας σας.
5. Παρατηρήστε ότι όταν μετακινείτε τον κέρσορα επάνω στην δεύτερη εικόνα η οποία είναι ένα rollover image, αυτή αλλάζει και εμφανίζει την εικόνα που είχατε ορίσει ως δεύτερη στις ρυθμίσεις
του rollover image. Επίσης παρατηρήστε ότι όταν κάνετε κλικ επάνω στην τρίτη εικόνα, ανάλογα με το
που κάνετε κλικ, μεταφέρεστε και στο αντίστοιχο website.