ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ

Το Πρόγραμμα Dreamweaver

 

Τι Είναι το DreamWeaver

Το πρόγραμμα DreamWeaver της εταιρείας Macromedia είναι ένα κορυφαίο πρόγραμμα δημιουργίας και επεξεργασίας ιστοσελίδων, δηλαδή κώδικα HTML, που είναι ιδιαίτερα εύκολο και φιλικό στη χρήση του. Το όνομα DreamWeaver προέρχεται από ένα παλιό ρομαντικό τραγούδι. Το DreamWeaver είναι εξαίρετο για να μπορούμε να δημιουργήσουμε στα γρήγορα φόρμες (forms), πλαίσια (frames), πίνακες (tables) και άλλα αντικείμενα της HTML. Είναι, όμως, ιδιαίτερα καλό όταν θέλουμε να δώσουμε σε μια ιστοσελίδα τη δυνατότητα να κάνει κάτι. Πρέπει να έχουμε υπόψη μας ότι το DreamWeaver μπορεί να χρησιμοποιηθεί και για τη δημιουργία εφαρμογών πολυμέσων.

Το DreamWeaver έχει δυνατότητες για δημιουργία δυναμικής HTML (DHMTL) και επιτρέπει κίνησης γραμμής χρόνου, απόλυτη τοποθέτηση περιεχομένων, δημιουργία επιπέδων (layers) και συγγραφή σεναρίων (scripts). Το DreamWeaver περιέχει δικές του συμπεριφορές (behaviors), που είναι έτοιμα scripts τα οποία μπορούμε να προσθέσουμε πολύ εύκολα σ’ ένα αντικείμενο.

Το DreamWeaver μάς παρέχει την ελευθερία να σχεδιάσουμε οπτικά την εμφάνιση μιας ιστοσελίδας και τη δύναμη να την κάνουμε να λειτουργεί όπως ακριβώς θέλουμε. Μπορούμε να δημιουργήσουμε τη δική μας προσωπική ιστοσελίδα (personal web page) ή μια ολόκληρη περιοχή (web site) σ’ ένα εταιρικό δίκτυο (intranet).

 

Τα Βασικά Στοιχεία του DreamWeaver

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

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

 

Η Γραμμή Κατάστασης

Ο επιλογέας σήμανσης παρέχει εύκολη πρόσβαση στις σημάνσεις της HTML που χρησιμοποιούνται σ’ οποιοδήποτε αντικείμενο πάνω στην οθόνη και ενεργοποιεί, δηλ. εμφανίζει με έντονη γραφή, την επιλογή της σήμανσης εκείνης που ελέγχει ένα αντικείμενο. Ο επιλογέας σήμανσης διευκολύνει την επιλογή όλου του σώματος της ιστοσελίδας μ’ ένα κλικ στη σήμανση <body>. Από το αναδυόμενο μενού μεγέθους παραθύρου μπορούμε να αναδημιουργήσουμε μια συγκεκριμένη ανάλυση οθόνης, όπως για παράδειγμα 640 x 480 ή 800 x 600. Οι διαστάσεις που αναφέρονται στα δεξιά δείχνουν την ανάλυση της οθόνης και οι αριθμοί που αναφέρονται στα αριστερά είναι οι εκτιμώμενες διαστάσεις του παραθύρου του φυλλομετρητή.

Για να δημιουργήσουμε τις δικές μας προσαρμοσμένες ρυθμίσεις για μεγέθη παραθύρων, πρέπει να επιλέξουμε την επιλογή Edit Sizes… από το αναδυόμενο μενού μεγέθους παραθύρου. Θα μεταφερθούμε στην κατηγορία Status Bar του πλαισίου διαλόγου Preferences, όπου μπορούμε να προσθέσουμε το δικό μας προσαρμοσμένο μέγεθος παραθύρου.

Τα στατιστικά στοιχεία φόρτωσης της ιστοσελίδας μας είναι το εκτιμώμενο μέγεθος αρχείου και ο χρόνος φόρτωσης της ιστοσελίδας, κατά προσέγγιση. Ο εκτιμώμενος χρόνος φόρτωσης που εμφανίζεται στη γραμμή κατάστασης βασίζεται στις ρυθμίσεις του modem, από την κατηγορία Status Bar του πλαισίου διαλόγου Preferences. Η προεπιλεγμένη ρύθμιση modem είναι τα 56 Kbps. Το τελευταίο στοιχείο της γραμμής κατάστασης είναι το MiniLauncher, που αποτελεί μια ελαχιστοποιημένη έκδοση του Launcher, που θα δούμε αργότερα.

 

Παλέτες και Επιθεωρητές

Με τις παλέτες (palettes) και τους επιθεωρητές (inspectors) του DreamWeaver μπορούμε να δώσουμε τιμές σε ιδιότητες, να ανοίξουμε παλέτες, να δημιουργήσουμε κινήσεις και να προσθέσουμε λειτουργικότητα στην ιστοσελίδα μας. Οι παλέτες του DreamWeaver έχουν τη δυνατότητα σταθεροποίησης (fixing), που σημαίνει ότι μπορούν να συνδυαστούν σε μια κοινή παλέτα με καρτέλες, για να απελευθερώσουν έτσι χώρο στο παράθυρο Εγγράφου. Όλες οι παλέτες και όλοι οι επιθεωρητές εκκινούν από το μενού Window. Οι παλέτες του DreamWeaver είναι αρχικά σταθεροποιημένες όλες μαζί. Οι CSS Styles και HTML Styles είναι μαζί με τις παλέτες Library και Template. Οι παλέτες History, Frames, Layers και Behaviors βρίσκονται επίσης όλες μαζί σε μια ξεχωριστή ομάδα.

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

Με την επιλογή Preferences του μενού Edit ή με τα πλήκτρα Control+U ανοίγει το πλαίσιο διαλόγου Preferences, όπου στην ενότητα Floating Palettes μπορούμε να προσθέσουμε εικονίδια στον Launcher με το πλήκτρο + και να αφαιρέσουμε εικονίδια με το πλήκτρο -. Για να εξοικονομήσουμε χώρο στην οθόνη, μπορούμε να κλείσουμε τον Launcher και να χρησιμοποιήσουμε στη θέση του τον Mini Launcher, από τη γραμμή κατάστασης.

Ο Property Inspector εμφανίζει τις ιδιότητες ενός αντικειμένου που έχουμε επιλέξει και αλλάζει μορφή ανάλογα με το αντικείμενο. Για να εμφανίσουμε και τις προχωρημένες ιδιότητες, κάνουμε κλικ στο βέλος ανάπτυξης, που βρίσκεται στην κάτω δεξιά γωνία του Property Inspector. Η παλέτα αντικειμένων (Object Palette) περιέχει πλήκτρα για να εισάγουμε κοινά στοιχεία ιστοσελίδας, όπως εικόνες, πίνακες, φόρμες και δεσμούς. Από την πτυσσόμενη λίστα Object Palette της καρτέλας General του πλαισίου διαλόγου Preferences, μπορούμε να επιλέξουμε αν τα πλήκτρα θα εμφανίζονται μόνο με εικονίδια ή μόνο με κείμενο ή και με εικονίδια και με κείμενο. Η παλέτα αντικειμένων περιέχει εξ ορισμού τους εξής έξι πίνακες : Characters, Common, Forms, Frames, Head και Invisibles.

 

Δημιουργία και Μορφοποίηση Ιστοσελίδας

Για να δημιουργήσουμε μια νέα ιστοσελίδα, επιλέγουμε New από το μενού File ή πατάμε τα πλήκτρα Control+N. Το DreamWeaver θα ανοίξει ένα νέο παράθυρο εγγράφου για τη νέα ιστοσελίδα . Αν μόλις εκκινήσαμε το DreamWeaver, το πιο πιθανό είναι ότι θα εμφανισθεί ένα κενό παράθυρο, στο οποίο μπορούμε να αρχίσουμε να προσθέτουμε κείμενο, εικόνες και άλλα αντικείμενα. Μπορούμε να αρχίσουμε να πληκτρολογούμε μέσα στο παράθυρο εγγράφου για να εισάγουμε κείμενο στην ιστοσελίδα. Για να στοιχίσουμε ένα κείμενο, το επιλέγουμε και χρησιμοποιούμε τις επιλογές του Property Inspector ή του υπομενού Align4 του μενού Text.

Τον τίτλο του εγγράφου τον ορίζουμε στο πλαίσιο διαλόγου ιδιοτήτων σελίδας (Page Properties), που εμφανίζεται με την επιλογή Page Properties… του μενού Modify ή με τα πλήκτρα Control+J ή με δεξί κλικ σ’ ένα κενό μέρος του παραθύρου εγγράφου και επιλογή του Page Properties… από το πτυσσόμενο μενού. Γράφουμε τον τίτλο της ιστοσελίδας στο πλαίσιο κειμένου Title. Ο τίτλος της ιστοσελίδας αποτελεί ένα πολύ σημαντικό στοιχείο της, καθώς εμφανίζεται στη γραμμή τίτλου του DreamWeaver και του φυλλομετρητή. Είναι ακόμη το στοιχείο που αποθηκεύεται στους σελιδοδείκτες (bookmarks) ή στα αγαπημένα (favorites), οπότε πρέπει να είναι περιγραφικός και να μπορούμε να τον θυμόμαστε εύκολα. Ακόμη, πολλές μηχανές αναζήτησης (search engines) ταξινομούν σελίδες με βάση λέξεις του τίτλου τους.

Παρατηρούμε ότι στη γραμμή τίτλου του παραθύρου εμφανίζεται ο τίτλος της ιστοσελίδας που καταχωρήσαμε αλλά και σε παρένθεση το όνομα αρχείου της ιστοσελίδας, που είναι ακόμα το Untitled. Το χρώμα του κειμένου της σελίδας είναι εξ ορισμού το μαύρο (#000000). Για να το αλλάξουμε, κάνουμε κλικ στο πλήκτρο Text του πλαισίου διαλόγου Page Properties και επιλέγουμε ένα χρώμα. Το DreamWeaver θα εμφανίσει τον δεκαεξαδικό κωδικό του χρώματος με το πρόθεμα # στο διπλανό πλαίσιο κειμένου. Μόλις επιλέξουμε ένα χρώμα, θα αλλάξει το χρώμα όλου του κειμένου της σελίδας.

Για να αλλάξουμε το χρώμα φόντου της σελίδας, κάνουμε κλικ στο πλήκτρο Background και επιλέγουμε ένα χρώμα με την ίδια διαδικασία. Το προεπιλεγμένο χρώμα φόντου είναι το άσπρο (#FFFFFF). Τα περιθώρια (margins) της σελίδας ορίζουν τον χώρο που μένει κενός από την ιστοσελίδα μέχρι το αριστερό και το δεξί άκρο του παραθύρου του φυλλομετρητή. Υπάρχουν οι εξής τέσσερις ρυθμίσεις για τα περιθώρια μιας ιστοσελίδας σε αντίστοιχα πλαίσια κειμένου :

Επειδή ο Internet Explorer χρησιμοποιεί τις ρυθμίσεις αριστερού και επάνω περιθωρίου και ο Netscape Navigator τις ρυθμίσεις ύψους και πλάτους περιθωρίου, για να έχει η ιστοσελίδα παρόμοια εμφάνιση και στους δύο φυλλομετρητές, πρέπει να ορίσουμε ίδιες τιμές στο αριστερό περιθώριο και στο πλάτος περιθωρίου καθώς και στο επάνω περιθώριο και στο ύψος περιθωρίου.

Για να επικολλήσουμε κείμενο από μια άλλη εφαρμογή στο DreamWeaver και να διατηρηθεί η μορφοποίηση γραμμής, πρέπει να επιλέξουμε Paste as Text ή να πατήσουμε τα πλήκτρα Control+Shift+V και όχι να διαλέξουμε το απλό Paste από το μενού Edit. Για να εφαρμόσουμε πρότυπη μορφοποίηση HTML σε κείμενο, χρησιμοποιούμε την πτυσσόμενη λίστα Format του Property Inspector. Υπάρχουν οι εξής τέσσερις βασικές επιλογές μορφοποίησης :

Για να αλλάξουμε το μέγεθος ενός κειμένου, μπορούμε να επιλέξουμε μια από τις ρυθμίσεις μεγέθους, 1 έως 7, από το πτυσσόμενο μενού Size του Property Inspector. Το προεπιλεγμένο μέγεθος κειμένου είναι το 3, οπότε μεγέθη μικρότερα του 3 φαίνονται μικρότερα από το προεπιλεγμένο κείμενο και μεγέθη μεγαλύτερα του 3 φαίνονται μεγαλύτερα από το προεπιλεγμένο κείμενο. Μπορούμε να επιλέξουμε ένα μέγεθος κειμένου +1 έως +7, για να αυξήσουμε το μέγεθος της γραμματοσειράς ή ένα μέγεθος –1 έως –7, για να μειώσουμε το μέγεθος της γραμματοσειράς σε σχέση με το προεπιλεγμένο μέγεθος γραμματοσειράς. Μπορούμε να επιλέξουμε και None για να επιστρέψουμε στο προεπιλεγμένο μέγεθος γραμματοσειράς.

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

Ο Property Inspector διαθέτει πλήκτρα για δημιουργία λιστών με κουκκίδες (unordered lists) και αριθμημένων λιστών (ordered lists) καθώς και για εσοχή (indent) ή προεξοχή (outdent) κειμένου. Με τα δύο τελευταία πλήκτρα μπορούμε ακόμη να ενθέσουμε μια λίστα μέσα σε μια άλλη λίστα. Για να προσθέσουμε μια οριζόντια γραμμή στη σελίδα, επιλέγουμε το αντικείμενο HR (Insert Horizontal Rule) από την παλέτα αντικειμένων ή την επιλογή Horizontal Rule του μενού Insert. Μπορούμε να αλλάξουμε τις ιδιότητες μιας οριζόντιας γραμμής από τον Property Inspector. Μπορούμε να δώσουμε στη γραμμή ένα όνομα στο πλαίσιο κειμένου που βρίσκεται αριστερά και κάτω και να ορίσουμε το ύψος και το πλάτος της σε pixels ή σε ποσοστό της οθόνης. Από την πτυσσόμενη λίστα Align μπορούμε να ορίσουμε τη στοίχιση της γραμμής και από το πλαίσιο ελέγχου Shading να εφαρμόσουμε ή όχι σκίαση.

 

Προεπισκόπηση σε Φυλλομετρητή

Για να δούμε την προεπισκόπηση της ιστοσελίδας μας, θα πρέπει να αποθηκεύσουμε την εργασία μας για να μπορεί το DreamWeaver να θέσει σωστά τις διαδρομές προς τα συνδεδεμένα αρχεία, όπως είναι οι εικόνες. Πρώτα, πρέπει να καθορίσουμε τον φυλλομετρητή που θα χρησιμοποιήσουμε για την προεπισκόπηση, εμφανίζοντας το υπομενού Preview in Browser4 του μενού File. Αν δεν εμφανισθούν και οι δύο δημοφιλείς φυλλομετρητές Internet Explorer και Netscape Communicator, μπορούμε να κάνουμε κλικ στο πλήκτρο Edit Browser List του ίδιου υπομενού και να τους επιλέξουμε.

Αφού ορίσουμε τους φυλλομετρητές που θα χρησιμοποιήσουμε και αποθηκεύσουμε την ιστοσελίδα μας, επιλέγουμε πάλι το υπομενού Preview in Browser4από το μενού File και μετά τον φυλλομετρητή που θέλουμε να χρησιμοποιήσουμε. Αν ο φυλλομετρητής δεν είναι ανοικτός, το DreamWeaver θα τον ανοίξει και θα δούμε την προεπισκόπηση της σελίδας. Αν ορίσουμε Primary και Secondary Browser, η συντόμευση πληκτρολογίου για τον κύριο φυλλομετρητή θα είναι το πλήκτρο F12 και για τον δευτερεύοντα φυλλομετρητή τα πλήκτρα Control+F12

 

Δημιουργία Δεσμών (Links)

Μ’ έναν δεσμό (link) ή υπερδεσμό (hyperlink) μπορούμε να πάμε σε μια άλλη ιστοσελίδα ή σε μια άλλη ενότητα της ίδιας ιστοσελίδας ή να εκκινήσουμε μια εφαρμογή ηλεκτρονικής αλληλογραφίας (e-mail). Μια διεύθυνση Web αποκαλείται URL, δηλ. Uniform Resource Locator (Ομοιόμορφος Εντοπιστής Πόρων). Όταν δημιουργούμε έναν υπερδεσμό ή τοποθετούμε ένα εξωτερικό αρχείο σε μια ιστοσελίδα, όπως ένα αρχείο εικόνας, πρέπει να εισάγουμε τη διαδρομή του. Οι δύο κύριοι τύποι διαδρομών είναι οι απόλυτες και οι σχετικές διαδρομές εγγράφου.

Η απόλυτη διαδρομή περιέχει ολόκληρη τη διαδρομή προς ένα αρχείο μέσα στο Internet, ενώ η σχετική διαδρομή περιέχει τη σχετική τοποθεσία της διαδρομής ως προς την τρέχουσα θέση μας. Ένα URL μπορεί να αποτελείται από τις εξής πέντε ενότητες :

 

Απόλυτες και Σχετικές Διαδρομές

Αν συναντήσουμε απόλυτα URL που δεν έχουν ένα όνομα αρχείου στο τέλος τους, όπως για παράδειγμα, http://www.florina.gr/history/, ο διακομιστής Web ξέρει το όνομα της προεπιλεγμένης ιστοσελίδας, που είναι ένα από τα default.htm, default.html, index.htm ή index.html. Σε μερικούς διακομιστές, οποιοδήποτε απ’ αυτά τα ονόματα θα δουλέψει.

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

Οι σχετικές διαδρομές εγγράφου δεν απαιτούν ένα πλήρες URL και η διαδρομή προς το συνδεδεμένο αρχείο εκφράζεται σχετικά ως προς το τρέχον έγγραφο. Χρησιμοποιούμε σχετικές διαδρομές όταν εισάγουμε εικόνες σε μια ιστοσελίδα που βρίσκεται στη δική μας περιοχή Web ή όταν δημιουργούμε έναν υπερσύνδεσμο σε μια ιστοσελίδα μέσα στη δική μας περιοχή Web.

 

Δημιουργία Υπερσυνδέσμου (Hyperlink)

Για να δημιουργήσουμε έναν δεσμό που θα μας πηγαίνει σε μια άλλη ιστοσελίδα μέσα στον ίδιο δικτυακό τόπο (Web site), επιλέγουμε μια λέξη ή μια φράση που θα χρησιμοποιηθεί σαν ο δεσμός προς την άλλη ιστοσελίδα, και κάνουμε κλικ στο εικονίδιο φακέλου που βρίσκεται δεξιά από το πλαίσιο κειμένου Link (Browse for File) στον Property Inspector.

Στο πλαίσιο διαλόγου Select File που θα εμφανισθεί, επιλέγουμε το αρχείο ιστοσελίδας που θέλουμε να συνδέσουμε. Το επιλεγμένο κείμενο εμφανίζεται σαν υπερδεσμός στο παράθυρο Εγγράφου του DreamWeaver, δηλ. μπλε και υπογραμμισμένο. Στο πλαίσιο κειμένου Link εμφανίζεται η σχετική διαδρομή και το όνομα του αρχείου ιστοσελίδας που έχουμε συνδέσει.

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

 

Δημιουργία Άγκυρας (Anchor)

Ο δεσμός άγκυρας (anchor) μάς μεταφέρει σ’ ένα άλλο σημείο της ίδιας ιστοσελίδας. Για να δημιουργήσουμε έναν τέτοιο δεσμό, πρώτα επιλέγουμε το σημείο στο οποίο θέλουμε να πάμε, που αποκαλείται επώνυμη άγκυρα (named anchor), και επιλέγουμε Named Anchor από το μενού Insert ή πατάμε τα πλήκτρα Control+Alt+A ή επιλέγουμε το εργαλείο Insert Named Anchor του πίνακα Invisibles της παλέτας αντικειμένων.

Στο πλαίσιο διαλόγου Named Anchor και στο πλαίσιο κειμένου Anchor Name δίνουμε ένα όνομα στην επώνυμη άγκυρα. Οι επώνυμες άγκυρες ανήκουν στα αόρατα στοιχεία (invisible elements) του DreamWeaver, που για να τα δούμε, πρέπει να επιλέξουμε Invisible Elements από το μενού View ή να πατήσουμε τα πλήκτρα Control+Shift+I. Το εικονίδιο μιας επώνυμης άγκυρας είναι μια άγκυρα με χρυσό περίβλημα. Μπορούμε να επιλέξουμε το σύμβολο μιας επώνυμης άγκυρας και να αλλάξουμε το όνομά της από τον Property Inspector.

Για να δημιουργήσουμε έναν δεσμό προς μια επώνυμη άγκυρα, επιλέγουμε το κείμενο που θα αποτελέσει τον δεσμό προς την επώνυμη άγκυρα και εισάγουμε το όνομα της επώνυμης άγκυρας με το σύμβολο # μπροστά του στο πλαίσιο κειμένου Link του Property Inspector. Μπορούμε να χρησιμοποιήσουμε επώνυμες άγκυρες και προς άλλες ιστοσελίδες ή URL που θέλουμε να συνδέσουμε. Απλά προσθέτουμε το σύμβολο # και το όνομα της επώνυμης άγκυρας στο τέλος της διεύθυνσης.

Για να δημιουργήσουμε έναν δεσμό προς μια επώνυμη άγκυρα, μπορούμε αφού επιλέξουμε το κείμενο του δεσμού, να σύρουμε το εικονίδιο Point to File, που βρίσκεται δεξιά από το πλαίσιο κειμένου Link και έχει στρογγυλό σχήμα, πάνω σε μια επώνυμη άγκυρα. Το όνομα επώνυμης άγκυρας μαζί με το πρόθεμα # θα εμφανισθεί μέσα στο πλαίσιο κειμένου Link.

 

Δημιουργία Δεσμού e-mail

Με τον δεσμό e-mail ή mailto μπορούμε να στείλουμε ένα e-mail σε μια ορισμένη ηλεκτρονική διεύθυνση, χωρίς να χρειαστεί να γράψουμε ούτε έναν χαρακτήρα του e-mail. Επιλέγουμε το κείμενο που θα συνδέσουμε και πάμε στην επιλογή EMail Link του μενού Insert. Στο πλαίσιο διαλόγου EMail Link και στο πλαίσιο κειμένου E-Mail γράφουμε το e-mail με το οποίο θέλουμε να κάνουμε σύνδεση. Όταν κάνουμε κλικ σ’ έναν τέτοιο δεσμό, φορτώνεται αυτόματα ένα πρόγραμμα ηλεκτρονικής αλληλογραφίας που έχει ήδη καταχωρημένη τη διεύθυνση του παραλήπτη.

 

Εισαγωγή Εικόνας

Για να εισάγουμε μια εικόνα σε μια ιστοσελίδα, επιλέγουμε Image από το μενού Insert ή πατάμε τα πλήκτρα Control+Alt+I ή επιλέγουμε το εργαλείο Image του πίνακα Common της παλέτας αντικειμένων. Επιλέγουμε την εικόνα που θέλουμε να εισάγουμε στο πλαίσιο διαλόγου Select Image Source και κάνουμε κλικ στο πλήκτρο OK. Αν είναι επιλεγμένο το πλαίσιο ελέγχου Preview Images, θα μπορούμε να δούμε την προεπισκόπηση της εικόνας αλλά και τις διαστάσεις της σε pixels, το μέγεθός της σε Kbytes και τον χρόνο φόρτωσης στο Internet.

Με επιλεγμένη την εικόνα, ο Property Inspector εμφανίζει τις ιδιότητες της εικόνας. Το πλαίσιο κειμένου Src εμφανίζει τη διαδρομή του αρχείου εικόνας, ενώ τα πλαίσια κειμένου W και H, το πλάτος και το ύψος της εικόνας σε pixels, αντίστοιχα. Μπορούμε να σύρουμε τις λαβές αλλαγής μεγέθους για να αλλάξουμε το μέγεθος της εικόνας ή να καταχωρήσουμε νέες τιμές στα πλαίσια κειμένου W και H. Για να επαναφέρουμε τις πραγματικές διαστάσεις της εικόνας, κάνουμε κλικ στο πλήκτρο Reset Size, ενώ με το πλήκτρο Edit μπορούμε να επεξεργαστούμε την εικόνα μ’ ένα πρόγραμμα επεξεργασίας εικόνας.

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

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

Για να αυξήσουμε την απόσταση ανάμεσα στην εικόνα και στα άλλα συστατικά της σελίδας που την περιβάλλουν, μπορούμε να δώσουμε τιμές στα πλαίσια κειμένου V Space και H Space, για το κατακόρυφο διάστημα, δηλ. πάνω και κάτω από την εικόνα, και για το οριζόντιο διάστημα, δηλ. αριστερά και δεξιά από την εικόνα.

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

Για να εισάγουμε έναν δεσμό για μια εικόνα, καταχωρούμε το URL του δεσμού στο πλαίσιο κειμένου Link ή κάνουμε κλικ στο διπλανό πλήκτρο Browse for File και επιλέγουμε την ιστοσελίδα που θέλουμε να συνδέσουμε. Στο πλαίσιο κειμένου Border μπορούμε να ορίσουμε ένα περίγραμμα σε pixels που θα περιβάλλει την εικόνα. Στο πλαίσιο κειμένου Low Src μπορούμε να ορίσουμε μια έκδοση χαμηλής ανάλυσης ή μια μικρογραφία της εικόνας η οποία θα εμφανίζεται κατά τη διάρκεια της αρχικής φόρτωσης της ιστοσελίδας και μετά θα μετατρέπεται στην κανονική εικόνα υψηλής ανάλυσης.

 

Εισαγωγή Εναλλαγής Εικόνας (Rollover)

Μια εναλλαγή εικόνας είναι μια εικόνα που αλλάζει σε μια άλλη εικόνα όταν τοποθετήσουμε τον δρομέα του ποντικιού πάνω της. Για να δημιουργήσουμε μια εναλλαγή εικόνας, θα χρειασθούμε δύο αρχεία εικόνων με τις ίδιες ακριβώς διαστάσεις. Επιλέγουμε Rollover Image από το μενού Insert ή το εργαλείο Rollover Image της παλέτας αντικειμένων. Στο πλαίσιο διαλόγου Insert Rollover Image μπορούμε να δώσουμε ένα όνομα στην εικόνα στο πλαίσιο κειμένου Image Name και να επιλέξουμε την κύρια και την εναλλακτική εικόνα με τα πλήκτρα Browse που βρίσκονται δεξιά από τα πλαίσια κειμένου Original Image και Rollover Image, αντίστοιχα.

Αν επιλέξουμε το πλαίσιο ελέγχου Preload Rollover Image, η εικόνα εναλλαγής θα φορτωθεί στη μνήμη cache του φυλλομετρητή του χρήστη και δεν θα χρειαστεί έτσι να περιμένει να φορτωθεί όταν αφήσει τον δρομέα του ποντικιού πάνω της. Μπορούμε να προσθέσουμε έναν δεσμό στην εικόνα από το πλαίσιο κειμένου When Clicked, Go To URL ή να κάνουμε κλικ στο διπλανό πλήκτρο Browse και να επιλέξουμε ένα αρχείο ιστοσελίδας.

 

Εισαγωγή Γραμμής Πλοήγησης (Navigation Bar)

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

Στο πλαίσιο διαλόγου Insert Navigation Bar εμφανίζεται ένα αρχικό, ανώνυμο πλήκτρο, το unnamed1. Δίνουμε το όνομα που θέλουμε, π.χ. button1. Με τα πλήκτρα Browse… που βρίσκονται δεξιά από τα πλαίσια κειμένου Up Image, Over Image, Down Image και Over While Down Image, μπορούμε να επιλέξουμε μια εικόνα όταν ο δρομέας βρίσκεται πάνω, όταν περνάει επάνω από το πλήκτρο, όταν κάνουμε κλικ στο πλήκτρο και μια εικόνα όταν περνάει επάνω από το πλήκτρο όταν αυτό είναι πατημένο.

Μπορούμε να εισάγουμε και έναν υπερδεσμό στο πλαίσιο κειμένου When Clicked, Go To URL ή να κάνουμε κλικ στο διπλανό πλήκτρο Browse και να επιλέξουμε ένα αρχείο ιστοσελίδας. Αν επιλέξουμε το πλαίσιο ελέγχου Preload Images, οι εικόνες θα φορτώνονται αυτόματα εκ των προτέρων και αν επιλέξουμε το πλαίσιο ελέγχου Show "Down Image" Initially, το πλήκτρο θα εμφανίζεται αρχικά πατημένο. Μπορούμε να προσθέσουμε κι άλλα πλήκτρα με το + και να αφαιρέσουμε πλήκτρα με το -. Μπορούμε να αλλάξουμε τη σειρά εμφάνισης των πλήκτρων με τα βελάκια που βρίσκονται στο επάνω μέρος του πλαισίου διαλόγου. 

Από την πτυσσόμενη λίστα Insert μπορούμε να επιλέξουμε αν η γραμμή πλοήγησης θα εμφανίζεται οριζόντια ή κατακόρυφη μέσα στην ιστοσελίδα και αν επιλέξουμε το πλαίσιο ελέγχου Use Tables, η γραμμή πλοήγησης θα δημιουργηθεί μέσα σ’ έναν πίνακα. Μπορούμε να έχουμε μόνο μία γραμμή πλοήγησης σε κάθε ιστοσελίδα και για να επεξεργαστούμε τη γραμμή πλοήγησης μιας ιστοσελίδας, επιλέγουμε Navigation Bar από το μενού Modify, για να εμφανισθεί το πλαίσιο διαλόγου Modify Navigation Bar.

 

Χρήση Εικόνας Αντιγραφής

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

Για να φορτώσουμε μια εικόνα αντιγραφής, εμφανίζουμε το πλαίσιο διαλόγου Page Properties της τρέχουσας ιστοσελίδας που σχεδιάζουμε και κάνουμε κλικ στο πλήκτρο Browse που βρίσκεται δεξιά από το πλαίσιο κειμένου Tracing Image ή επιλέγουμε Load από το υπομενού Tracing Image του μενού View. Στο πλαίσιο διαλόγου Select Image Source επιλέγουμε μια εικόνα αντιγραφής, που πρέπει να είναι της μορφής gif, jpeg ή png. Από τον αυξομειωτή (ροοστάτη) Image Transparency του πλαισίου διαλόγου Page Properties μπορούμε να ορίσουμε πόσο αδιαφανής (συμπαγής) ή διαφανής θα είναι η εικόνα αντιγραφής.

 

Προσθήκη Δεσμών σε Χάρτες Εικόνας

Ένας χάρτης εικόνας (image map) είναι μια εικόνα με περιοχές που είναι καθορισμένες σαν υπερδεσμοί και οι οποίες καλούνται ενεργές περιοχές (hotspots). Αν κάνουμε κλικ σε μια ενεργή περιοχή, αυτή λειτουργεί όπως κάθε άλλος υπερδεσμός. Με τους χάρτες εικόνας, αντί να προσθέσουμε έναν υπερδεσμό σ’ ολόκληρη την εικόνα, ορίζουμε κάποιες ενεργές περιοχές σε διαφορετικά τμήματα της εικόνας. Τις ενεργές περιοχές μπορούμε να τις δημιουργήσουμε με διαφορετικά σχήματα.

Για παράδειγμα, μπορούμε να δημιουργήσουμε έναν χάρτη εικόνας από έναν χάρτη της Δυτικής Μακεδονίας και να ορίσουμε ενεργές περιοχές για καθένα από τους τέσσερις Νομούς. Κάθε φορά που θα κάνουμε κλικ σε μια ενεργή περιοχή, θα πηγαίνουμε σε μια ιστοσελίδα με πληροφορίες για τον αντίστοιχο Νομό. Το DreamWeaver δημιουργεί χάρτες εικόνας στην πλευρά του πελάτη (client-side), πράγμα που σημαίνει ότι η ιστοσελίδα περιέχει όλες τις καθορισμένες συντεταγμένες και υπερδεσμούς. Ο άλλος τύπος χάρτη εικόνας, δηλ. ένας χάρτης εικόνας στην πλευρά του διακομιστή (server-side), εξαρτάται από ένα πρόγραμμα που εκτελείται σ’ έναν διακομιστή Web για την ερμηνεία των συντεταγμένων και των υπερδεσμών.

Οι χάρτες εικόνας στην πλευρά του πελάτη αντιδρούν πιο γρήγορα στην είσοδο από τον χρήστη, επειδή δεν χρειάζεται να έλθουν σ’ επαφή με τον διακομιστή για πληροφορίες. Όταν επιλέγουμε μια εικόνα, ενεργοποιούνται τέσσερα εργαλεία χάρτη εικόνας στην κάτω αριστερή γωνία του Property Inspector, τα οποία μπορούμε να χρησιμοποιήσουμε για να ορίσουμε ενεργές περιοχές χάρτη εικόνας. Το ένα απ’ αυτά σχεδιάζει ορθογώνια, το άλλο κύκλους και ένα άλλο πολύγωνα. Το τέταρτο είναι ένα εργαλείο δείκτη που το χρησιμοποιούμε για επιλογή ή μετακίνηση ενεργών περιοχών.

Για να δημιουργήσουμε έναν χάρτη εικόνας, εισάγουμε μια εικόνα στην ιστοσελίδα μας και την επιλέγουμε. Στο πλαίσιο κειμένου Map του Property Inspector δίνουμε ένα όνομα στον χάρτη εικόνας, το οποίο πρέπει να είναι μοναδικό και να διαφέρει απ’ άλλα ονόματα χαρτών της σελίδας. Επιλέγουμε ένα από τα τρία εργαλεία σχεδίασης και σχεδιάζουμε μια ενεργή περιοχή πάνω στην εικόνα. Με επιλεγμένη την ενεργή περιοχή που μόλις σχεδιάσαμε, γράφουμε ένα URL στο πλαίσιο κειμένου Link ή κάνουμε κλικ στο εικονίδιο φακέλου Browse for File για να κάνουμε αναζήτηση σε μια τοπική ιστοσελίδα.

Μπορούμε να συνδέσουμε μια ενεργή περιοχή με μια επώνυμη άγκυρα, εισάγοντας το σύμβολο # πριν από το όνομα της άγκυρας. Στο πλαίσιο κειμένου Alt μπορούμε να εισάγουμε ένα εναλλακτικό κείμενο για μια ενεργή περιοχή, για να εμφανισθεί σαν επεξήγηση σε φυλλομετρητές που δεν υποστηρίζουν ή είναι απενεργοποιημένη η εμφάνιση εικόνων. Από την πτυσσόμενη λίστα Target μπορούμε να επιλέξουμε ένα παράθυρο στόχου από τα _blank, _parent, _self και _top. Αν επιλέξουμε το _blank, ο υπερδεσμός θα δημιουργήσει ένα νέο παράθυρο φυλλομετρητή με τη συνδεδεμένη ιστοσελίδα μέσα σ’ αυτό.

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

<area shape="rect" coords="127,143,251,291" href="florina.html">

Η κυκλική ενεργή περιοχή είναι πάντα ένας κύκλος και όχι μια έλλειψη. Ο κύκλος ορίζεται με τις συντεταγμένες x και y του κέντρου του και την ακτίνα του. Ο κώδικας HTML για την κυκλική περιοχή έχει την εξής μορφή :

<area shape="circle" coords="138,186,77" href="kozani.html">

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

<area shape="poly" coords="85,14,32,33,…" href="kastoria.html">

Μπορούμε να επιλέξουμε πολλές ενεργές περιοχές με το πλήκτρο Shift και να τις στοιχίσουμε με τις επιλογές του υπομενού Align του μενού Modify. Μπορούμε ακόμα να χρησιμοποιήσουμε τις επιλογές Make Same Width και Make Same Height του ίδιου υπομενού για να δώσουμε το ίδιο πλάτος ή το ίδιο ύψος στις επιλεγμένες ενεργές περιοχές ή και τις επιλογές Bring To Front και Send To Back του μενού Arrange για να αλλάξουμε τη σειρά τοποθέτησης των καλυπτόμενων ενεργών περιοχών. Το DreamWeaver τοποθετεί πιο πάνω την ενεργή περιοχή που σχεδιάσαμε πρώτη.

 

Προσθήκη Αρχείων Πολυμέσων

Εκτός από κείμενο, γραφικά και εικόνες, μια ιστοσελίδα μπορεί να περιέχει αρχεία ήχου, animation και βίντεο. Ορισμένες μορφές αρχείων πολυμέσων, σαν τα αρχεία RealMedia και Shockwave, αντιμετωπίζουν τις απαιτήσεις μεγάλου εύρους ζώνης των αρχείων ήχου και βίντεο με το να είναι μορφές σε συνεχή ροή (streamline). Τα περιεχόμενα σε ροή αρχίζουν να αναπαράγονται (παίζονται) αμέσως μετά από μια μικρή περίοδο φόρτωσης και ενώ συνεχίζουν να φορτώνονται στο παρασκήνιο, αναπαράγεται το υλικό που έχει ήδη φορτωθεί. Τα περισσότερα αρχεία πολυμέσων που παρέχονται μέσω του Internet είναι επίσης συμπιεσμένα και χρησιμοποιούν όλο και βελτιούμενες τεχνικές.

Μερικές από τις παραδοσιακές μορφές πολυμέσων, όπως οι WAV, AVI, MOV και AIFF, είναι συχνά πολύ μεγάλες για να παραδοθούν μέσω του Internet. Όλα τα αρχεία πολυμέσων απαιτούν ένα πρόγραμμα τρίτου κατασκευαστή για να μπορέσουν να αναπαραχθούν σ’ έναν φυλλομετρητή. Μερικά απ’ αυτά τα προγράμματα, που αποκαλούνται πρόσθετα (plug-ins) και μηχανισμοί ActiveX (ActiveX controls), εγκαθίστανται αυτόματα με το λογισμικό του φυλλομετρητή.

 

Προσθήκη Πίνακα

Χρησιμοποιούμε τους πίνακες σε μια ιστοσελίδα με τον ίδιο τρόπο που τους χρησιμοποιούμε και σε μια εφαρμογή επεξεργασίας κειμένου. Για να εισάγουμε έναν πίνακα σε μια ιστοσελίδα, επιλέγουμε το εικονίδιο Insert Table από την παλέτα αντικειμένων ή την επιλογή Table από το μενού Insert ή πατάμε τα πλήκτρα Control+Alt+T.

Στο πλαίσιο διαλόγου Insert Table επιλέγουμε από πόσες γραμμές και στήλες θα αποτελείται ο πίνακας, καταχωρώντας τις αντίστοιχες τιμές στα πλαίσια κειμένου Rows και Columns. Στο ίδιο πλαίσιο διαλόγου μπορούμε να επιλέξουμε το πλάτος του πίνακα (Width), το μέγεθος του περιγράμματος (Border) καθώς και τις αποστάσεις των κελιών (Cell Padding) και τα διαστήματα των κελιών (Cell Spacing). Η απόσταση κελιού (cell padding) ορίζει την απόσταση ανάμεσα σ’ ένα αντικείμενο που περιέχεται μέσα σ’ ένα κελί και στο περίγραμμα του κελιού και το διάστημα κελιού (cell spacing) ορίζει την απόσταση ανάμεσα σε δύο κελιά.

Για να επιλέξουμε ολόκληρο τον πίνακα, τοποθετούμε το ποντίκι κοντά σε μια από τις εξωτερικές πλευρές του πίνακα μέχρι να πάρει το σχήμα σταυρού οπότε και κάνουμε κλικ. Ένας άλλος τρόπος είναι να κάνουμε κλικ μέσα σ’ ένα από τα κελιά του πίνακα και μετά στη σήμανση πίνακα (<table>) στη γραμμή κατάστασης. Για να επιλέξουμε ένα κελί, μπορούμε απλώς να κάνουμε κλικ μέσα σ’ αυτό, ενώ για να επιλέξουμε μια ολόκληρη γραμμή τοποθετούμε το ποντίκι λίγο πιο αριστερά από τη γραμμή του πίνακα μέχρι να μετατραπεί σ’ ένα συμπαγές μαύρο βελάκι και κάνουμε κλικ. Για να επιλέξουμε μια ολόκληρη στήλη, τοποθετούμε το ποντίκι λίγο πιο πάνω από την στήλη και κάνουμε κλικ όταν μετατραπεί σ’ ένα συμπαγές μαύρο βελάκι.

Για να επιλέξουμε μια ομάδα κελιών, κάνουμε πρώτα κλικ σ’ ένα κελί και μετά κρατάμε πατημένο το πλήκτρο Shift και κάνουμε κλικ σ’ ένα άλλο κελί, οπότε επιλέγονται όλα τα κελιά που βρίσκονται ανάμεσα στα δύο κελιά. Με το πλήκτρο Control μπορούμε να επιλέξουμε μεμονωμένα κελιά. Για να μετατρέψουμε την πρώτη γραμμή ενός πίνακα σε γραμμή κεφαλίδας, οπότε τα περιεχόμενα των κελιών της θα είναι έντονα και κεντραρισμένα, επιλέγουμε τη γραμμή και ενεργοποιούμε το πλαίσιο ελέγχου Header του Property Inspector. Οι σημάνσεις (tags) των κελιών επικεφαλίδας θα μετατραπούν από <td> σε <th>.

Για να ταξινομήσουμε τα περιεχόμενα ενός πίνακα, επιλέγουμε όλο τον πίνακα και μετά την επιλογή Sort Table από το μενού Commands. Στο πλαίσιο διαλόγου Sort Table και από την πτυσσόμενη λίστα Sort By μπορούμε να επιλέξουμε τη στήλη με βάση την οποία θα γίνει η ταξινόμηση. Από την πτυσσόμενη λίστα Order μπορούμε να επιλέξουμε αν η ταξινόμηση θα είναι αλφαβητική ή αριθμητική και από τη διπλανή πτυσσόμενη λίστα αν θα έχουμε αύξουσα ή φθίνουσα ταξινόμηση. Μπορούμε να χρησιμοποιήσουμε και την πτυσσόμενη λίστα Then By για να ορίσουμε δευτερεύουσα στήλη ταξινόμησης.

Αν η πρώτη γραμμή του πίνακα είναι γραμμή κεφαλίδας, πρέπει να μην επιλέξουμε το πλαίσιο ελέγχου Sort Includes First Row ώστε να μην συμπεριληφθεί η γραμμή κεφαλίδας στην ταξινόμηση. Αν επιλέξουμε το πλαίσιο ελέγχου Keep TR Attributes With Sorted Row, θα κρατηθεί η μορφοποίηση των γραμμών του πίνακα και μετά την ταξινόμηση. Το DreamWeaver περιέχει πολλές προκαθορισμένες μορφοποιήσεις πίνακα οι οποίες επηρεάζουν τα χρώματα, τη στοίχιση και το μέγεθος του περιγράμματος του πίνακα και με τη χρήση τους μπορούμε να μορφοποιήσουμε γρήγορα έναν ολόκληρο πίνακα.

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

Πρέπει να έχουμε υπόψη μας ότι η μεμονωμένη μορφοποίηση που κάνουμε στα κελιά ενός πίνακα υπερισχύει της συνολικής ή της προκαθορισμένης μορφοποίησης ενός πίνακα. Το υπομενού Table4του μενού Modify περιέχει εντολές για να εισάγουμε γραμμές και στήλες σ’ έναν πίνακα, να διαγράψουμε γραμμές και στήλες, να επιλέξουμε ολόκληρο τον πίνακα, να αυξήσουμε ή να ελαττώσουμε το πλάτος και το ύψος των κελιών καθώς και να ενώσουμε ή να διαιρέσουμε κελιά του πίνακα.

Για να εισάγουμε σε μια ιστοσελίδα του DreamWeaver δεδομένα από ένα αρχείο κειμένου και να τα τοποθετήσουμε κατευθείαν σ’ έναν πίνακα, κάνουμε κλικ στο εικονίδιο Insert Tabular Data της παλέτας αντικειμένων ή επιλέγουμε Tabular Data... από το υπομενού Import4του μενού File ή την εντολή Tabular Data από το μενού Insert.

Στο πλαίσιο διαλόγου Import Tabular Data κάνουμε κλικ στο πλήκτρο Browse για να επιλέξουμε το αρχείο που περιέχει τα δεδομένα του πίνακα, από την πτυσσόμενη λίστα Delimiter επιλέγουμε τον χαρακτήρα που θα είναι ο οριοθέτης των δεδομένων, ορίζουμε το πλάτος του πίνακα σε pixels ή σαν ποσοστό του πλάτους της οθόνης ή επιλέγουμε να ταιριάξει το πλάτος του πίνακα με τα δεδομένα, ορίζουμε τη μορφοποίηση της πρώτης γραμμής από την πτυσσόμενη λίστα Format Top Row καθώς και το μέγεθος του περιγράμματος από το πλαίσιο κειμένου Border.

Μπορούμε και να εξάγουμε τα δεδομένα ενός πίνακα μιας ιστοσελίδας, τα οποία θα μπορούν μετά να εισαχθούν σε μια εφαρμογή υπολογιστικών φύλλων ή βάσεων δεδομένων ή σε μια εφαρμογή που μπορεί να επεξεργασθεί οριοθετημένα δεδομένα. Για να εξάγουμε από μια ιστοσελίδα του DreamWeaver τα δεδομένα ενός πίνακα και να τα αποθηκεύσουμε σ’ ένα αρχείο, επιλέγουμε τον πίνακα ή κάνουμε κλικ σ’ ένα κελί του και πάμε στην επιλογή Tableτου υπομενού Export4του μενού File.

Στο πλαίσιο διαλόγου Export Table επιλέγουμε τον οριοθέτη από την πτυσσόμενη λίστα Delimiter και το λειτουργικό σύστημα στο οποίο θα χρησιμοποιηθούν τα δεδομένα από την πτυσσόμενη λίστα Line Breaks. Κάνουμε κλικ στο πλήκτρο Export και στο πλαίσιο διαλόγου Export Table As επιλέγουμε τον φάκελο και το όνομα του αρχείου που θα δημιουργηθεί.

 

Χρήση Πίνακα στη Διάταξη μιας Σελίδας

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

Πολλές περιοχές στο Web χρησιμοποιούν πίνακες για τη διάταξη εικόνων και κειμένων. Η χρήση ενός πίνακα για τη δημιουργία της μορφής της ιστοσελίδας παρέχει μεγαλύτερο έλεγχο επί του πώς θα εμφανίζεται η σελίδα στον τελικό χρήστη. Για να συνενώσουμε πολλά κελιά σ’ ένα μόνο κελί, τα επιλέγουμε και κάνουμε κλικ στο πλήκτρο Merges selected cells using spans του Property Inspector ή επιλέγουμε Merge Cells από το υπομενού Table4του μενού Modify ή πατάμε τα πλήκτρα Control+Alt+M.

Για να διαχωρίσουμε ένα κελί σε γραμμές ή στήλες, κάνουμε κλικ μέσα του και μετά στο πλήκτρο Split cell into rows or columns του Property Inspector ή επιλέγουμε Split Cell από το υπομενού Table4 του μενού Modify ή πατάμε τα πλήκτρα Control+Alt+S. Στο πλαίσιο διαλόγου Split Cell επιλέγουμε ένα από τα πλήκτρα επιλογής Rows ή Columns και τον αριθμό των γραμμών ή των στηλών, αντίστοιχα, στο πλαίσιο κειμένου Number of Rows ή Number of Columns. Το DreamWeaver διαχωρίζει ένα κελί σε ίσα μέρη.

 

Μετατροπή Πίνακα σε Επίπεδα

Τα επίπεδα (layers) επιτρέπουν την απόλυτη τοποθέτηση αντικειμένων στη σελίδα και απαιτούν μια πρόσφατη έκδοση ενός φυλλομετρητή. Το DreamWeaver μπορεί να μετατρέψει έναν πίνακα σε μια ομάδα επιπέδων. Για να το κάνουμε αυτό, επιλέγουμε όλο τον πίνακα και πάμε στην επιλογή Convert Tables to Layers του υπομενού Convert4 του μενού Modify ή πατάμε τα πλήκτρα Control+F6. Θα εμφανισθεί το πλαίσιο διαλόγου Convert Tables to Layers.

Αποδεχόμαστε τις προεπιλεγμένες ρυθμίσεις και κάνουμε κλικ στο ΟΚ για να δημιουργηθεί ένα επίπεδο για κάθε κελί του πίνακα. Η παλέτα Layers δείχνει όλα τα επίπεδα που δημιούργησε το DreamWeaver από τον πίνακα.

Το DreamWeaver χρησιμοποιεί τον όρο επίπεδο (layer) για να υλοποιήσει μέρος των προτύπων CSS που ορίζουν διάταξη. Τα επίπεδα είναι υποδοχείς που μας επιτρέπουν να τοποθετήσουμε στοιχεία πάνω στην οθόνη με ακρίβεια. Τα επίπεδα μπορούν επίσης να κινηθούν μέσα στο DreamWeaver.

 

Προσθήκη ενός Επιπέδου

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

Ο άλλος τρόπος είναι να επιλέξουμε Layer από το μενού Insert για να εισάγουμε ένα επίπεδο με τις τιμές πλάτους και ύψους που έχουν ορισθεί στην κατηγορία Layers του πλαισίου διαλόγου Preferences. Στην ίδια κατηγορία μπορούμε να θέσουμε ακόμα την προεπιλεγμένη σήμανση, την ορατότητα, το χρώμα φόντου και την εικόνα φόντου. Μπορούμε ακόμα να επιτρέψουμε την ένθεση, επιλέγοντας το πλαίσιο ελέγχου Nesting.

Μπορούμε να σύρουμε τις λαβές μεγέθους του περιγράμματος ενός επιπέδου για να μεγαλώσουμε ή να μικρύνουμε το επίπεδο. Από τον Property Inspector μπορούμε να αλλάξουμε το πλάτος και το ύψος ενός επιπέδου καθώς και τη θέση του μέσα στη σελίδα με τα πλαίσια κειμένου W, H, L και T αντίστοιχα, αλλά και να του δώσουμε ένα όνομα με το πλαίσιο κειμένου Layer ID, διαφορετικό από τα ονόματα που δίνει μόνο του το DreamWeaver. Το όνομα ενός επιπέδου δεν πρέπει να περιέχει κενούς χαρακτήρες και σημεία στίξης και μπορούμε να το αλλάξουμε και από την παλέτα Layers αν κάνουμε διπλό κλικ πάνω στο όνομα του επιπέδου.

 

Μετακίνηση και Στοίβαση Επιπέδων

Για να μετακινήσουμε ένα επίπεδο, το επιλέγουμε με τη λαβή που εμφανίζεται στην πάνω αριστερή γωνία του και το σύρουμε. Για να επιλέξουμε πολλά επίπεδα, χρησιμοποιούμε το πλήκτρο Shift. Μπορούμε επίσης να χρησιμοποιήσουμε την παλέτα Layers για να επιλέξουμε ένα ή περισσότερα επίπεδα. Στην ίδια παλέτα μπορούμε να ορίσουμε την ορατότητα και το z-index ενός επιπέδου. Επιλέγουμε το πλαίσιο ελέγχου Prevent Overlaps για να μην έχουμε αλληλοκαλυπτόμενα επίπεδα και μόνο αν σκοπεύουμε να μετατρέψουμε μια σχεδίαση επιπέδου σε πίνακα ώστε να μπορεί να προβληθεί σ’ όλους τους φυλλομετρητές.

Σ’ ένα επίπεδο μπορούμε να ορίσουμε ένα χρώμα φόντου με το πλήκτρο Bg Color και μια εικόνα φόντου, που θα τοποθετηθεί σε παράθεση, με το πλήκτρο Bg Image. Για να καθορίσουμε τη σειρά στοίβασης επιπέδων που αλληλοκαλύπτονται, χρησιμοποιούμε το z-index, το οποίο μπορεί να πάρει θετικές ή αρνητικές τιμές. Το επίπεδο που έχει το μεγαλύτερο z-index  βρίσκεται πάνω. Το DreamWeaver δίνει από μόνο του σ’ όλα τα επίπεδα μια τιμή z-index. Μπορούμε να ορίσουμε κι εμείς το z-index από το αντίστοιχο πλαίσιο κειμένου της παλέτας Layers.

 

Στοίχιση και Έλξη Αντικειμένων

Για να στοιχίσουμε αντικείμενα με ακρίβεια, μπορούμε να χρησιμοποιήσουμε το πλέγμα (grid). Για να εμφανίσουμε το πλέγμα, επιλέγουμε Show από το υπομενού Grid4 του μενού View ή πατάμε τα πλήκτρα Control+Alt+G. Για να έλκονται τα αντικείμενα από το πλέγμα, πρέπει να επιλέξουμε Snap To Grid από το υπομενού Grid4 του μενού View ή πατάμε τα πλήκτρα Control+Alt+Shift+G.

Για να αλλάξουμε τις ρυθμίσεις του πλέγματος, επιλέγουμε Grid Sεttings από το ίδιο υπομενού και στο πλαίσιο διαλόγου Grid Settings μπορούμε να επιλέξουμε αν θα είναι ορατό ή όχι το πλέγμα, την απόστασή του, το χρώμα του, το αν θα αποτελείται από γραμμές ή τελείες καθώς και την απόσταση της έλξης (snap).

 

Ορατότητα Επιπέδου

Με επιλεγμένο ένα επίπεδο, από την πτυσσόμενη λίστα Vis του Property Inspector μπορούμε να αλλάξουμε την ορατότητά του. Μπορούμε να ελέγξουμε την ορατότητα ενός επιπέδου και από την κατάσταση ενός ματιού στην παλέτα Layers. Το μάτι είναι ανοικτό όταν το επίπεδο είναι ορατό (visible) και είναι κλειστό όταν το επίπεδο είναι κρυμμένο (hidden), ενώ οι επιλογές default και inherit δεν έχουν αναπαράσταση ματιού. Κάνοντας διαδοχικά κλικ στο εικονίδιο του ματιού μπορούμε να αλλάξουμε την κατάσταση της ορατότητας ενός επιπέδου.

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

 

Υπερχείλιση και Αποκοπή Επιπέδου

Στην περίπτωση που τα περιεχόμενα ενός επιπέδου είναι μεγαλύτερα από το επίπεδο, μπορούμε να χρησιμοποιήσουμε μια από τις επιλογές της πτυσσόμενης λίστας Overflow για να καθορίσουμε το τι θα συμβεί. Οι επιλογές αυτές είναι οι εξής :

Στα πλαίσια διαλόγου της περιοχής αποκοπής Clip στον Property Inspector μπορούμε να ορίσουμε ποιο θα είναι το μέγεθος της ορατής περιοχής ενός επιπέδου και έτσι μπορούμε να δείξουμε μόνο ένα τμήμα αυτού που περιέχει πραγματικά το επίπεδο.

Η τιμή L καθορίζει τα pixels της αριστερής πλευράς της περιοχής από την αριστερή πλευρά του επιπέδου, η τιμή R τα pixels της δεξιάς πλευράς της περιοχής από την αριστερή πλευρά του επιπέδου, η τιμή T τα pixels της πάνω πλευράς της περιοχής από την πάνω πλευρά του επιπέδου και η τιμή B τα pixels της κάτω πλευράς της περιοχής από την πάνω πλευρά του επιπέδου.

 

Ένθετα Επίπεδα

Μπορούμε να δημιουργήσουμε ένα επίπεδο μέσα σ’ ένα άλλο επίπεδο, όπου το νέο επίπεδο θα είναι ένθετο μέσα στο πατρικό του επίπεδο. Το θυγατρικό επίπεδο μετακινείται μαζί με το πατρικό του επίπεδο και κληρονομεί τις ιδιότητες ορατότητας του πατρικού του επιπέδου. Για να δημιουργήσουμε ένα ένθετο επίπεδο, τοποθετούμε τον δρομέα μέσα στο πατρικό επίπεδο και επιλέγουμε Layer από το μενού Insert. Αν θέλουμε να χρησιμοποιήσουμε το εργαλείο Draw Layer της παλέτας αντικειμένων για να δημιουργήσουμε ένα ένθετο επίπεδο, πρέπει να σχεδιάσουμε κρατώντας πατημένο το πλήκτρο Control.

Μπορούμε επίσης να σύρουμε και να τοποθετήσουμε ένα υπάρχον επίπεδο μέσα σ’ ένα άλλο επίπεδο, αφού το επιλέξουμε στην παλέτα Layers, κρατήσουμε πατημένο το πλήκτρο Control και το αποθέσουμε σ’ ένα άλλο επίπεδο μέσα στην παλέτα Layers. Τα ένθετα επίπεδα εμφανίζονται με εσοχές μέσα στο πατρικό τους επίπεδο στην παλέτα Layers. Για να καταργήσουμε την ένθεση ενός επιπέδου, ο πιο εύκολος τρόπος είναι να το σύρουμε και να το αφήσουμε κάπου αλλού μέσα στην παλέτα Layers.

Αν έχουμε επιλέξει το πλαίσιο ελέγχου Nesting της κατηγορίας Layers του πλαισίου διαλόγου Preferences, θα μπορούμε να σχεδιάσουμε κατευθείαν μέσα σ’ ένα επίπεδο για να δημιουργήσουμε ένθετα επίπεδα. Αν καταργήσουμε την ένθεση ενός επιπέδου, είναι πιθανό να το χάσουμε από την οθόνη. Αυτό συμβαίνει γιατί όταν ένα επίπεδο είναι ένθετο, η θέση του είναι σχετική με το πατρικό του επίπεδο, ενώ μόλις ακυρώσουμε την ένθεσή του, η θέση του θα είναι σχετική με τη σελίδα. Θα πρέπει συνεπώς να αλλάξουμε τις συντεταγμένες της θέσης του.

 

Τα Πλαίσια (Frames)

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

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

Για να διαιρέσουμε ένα πλαίσιο σε δύο πλαίσια, πρώτα κάνουμε κλικ μέσα του και πάμε στην επιλογή Split Frame Right του υπομενού Frameset4 του μενού Modify. Το υπάρχον πλαίσιο θα τοποθετεί στα δεξιά και θα προστεθεί ένα νέο πλαίσιο στα αριστερά του. Στο ίδιο υπομενού υπάρχουν και οι επιλογές Split Frame Left, Split Frame Up και Split Frame Down.

Τα πλαίσια που δημιουργούμε τα αποθηκεύουμε με ξεχωριστά ονόματα ιστοσελίδων με την εντολή Save ή με τα πλήκτρα Control+S. Για να αποθηκεύσουμε τη διάταξη πλαισίου χρησιμοποιούμε την εντολή Save Frameset, ενώ με την εντολή Save All αποθηκεύουμε όλα τα περιεχόμενα των πλαισίων και τη διάταξη πλαισίου. Με την εντολή Open in Frame ή με τα πλήκτρα Control+Shift+O μπορούμε να φορτώσουμε μια υπάρχουσα ιστοσελίδα σ’ ένα πλαίσιο.

 

Ο Frame Inspector

Ο Frame Inspector παριστά οπτικά τα πλαίσια μιας ιστοσελίδας και με τη βοήθειά του μπορούμε να επιλέξουμε μεμονωμένα πλαίσια και να ορίσουμε ιδιότητες πλαισίων. Για να ενεργοποιήσουμε τον Frame Inspector, επιλέγουμε Frames από το μενού Window ή πατάμε τα πλήκτρα Shift+F2. Μπορούμε να επιλέξουμε ένα πλαίσιο κάνοντας κλικ στο αντίστοιχο πλαίσιο μέσα στον Frame Inspector ή κρατώντας πατημένο το πλήκτρο Alt και κάνοντας κλικ μέσα στο πλαίσιο στο παράθυρο Εγγράφου.

Όταν επιλέγουμε ένα πλαίσιο, οι ιδιότητές του εμφανίζονται στον Property Inspector. Στο πλαίσιο κειμένου Frame Name μπορούμε να δώσουμε ένα όνομα για ένα πλαίσιο και στο πλαίσιο κειμένου Src μπορούμε να αλλάξουμε το URL της ιστοσελίδας που φορτώνεται μέσα στο πλαίσιο. Τα ονόματα των πλαισίων χρησιμοποιούνται για να μπορούμε να στοχεύουμε μ’ έναν υπερδεσμό για φόρτωση μέσα στο πλαίσιο και δεν πρέπει να περιέχουν σημεία στίξης, όπως τελείες, παύλες ή κενά. Επίσης, δεν πρέπει να χρησιμοποιούμε τις δεσμευμένες λέξεις top, parent, self και blank.

 

Ιδιότητες των Πλαισίων

Μπορούμε να επιλέξουμε αν θα εμφανίζονται ή όχι οι οριζόντιες και οι κατακόρυφες γραμμές κύλισης ενός πλαισίου. Προς τον σκοπό αυτό υπάρχει η πτυσσόμενη λίστα Scroll, που έχει τις εξής επιλογές :

Αν επιλέξουμε το πλαίσιο ελέγχου No Resize, ο τελικός χρήστης δεν θα μπορεί να αλλάξει το μέγεθος των πλαισίων. Η προεπιλεγμένη μορφή των περιγραμμάτων των πλαισίων είναι ένα γκρι σκιασμένο περίγραμμα ανάμεσα στα πλαίσια. Μπορούμε να ενεργοποιήσουμε ή να καταργήσουμε τα περιγράμματα, να ορίσουμε το χρώμα περιγράμματος και να αλλάξουμε το πλάτος του. Οι ιδιότητες περιγράμματος μπορούν να ορισθούν μέσα σ’ ένα πλαίσιο ή στη διάταξη πλαισίων ή και στα δύο. Πρέπει να έχουμε υπόψη μας ότι οι ιδιότητες ενός πλαισίου υπερισχύουν των ιδιοτήτων της διάταξης πλαισίου.

Για να ορίσουμε το πλάτος του περιγράμματος ενός πλαισίου, πρέπει να επιλέξουμε τη διάταξη πλαισίου του, κάνοντας κλικ στη σήμανση <frameset> στον επιλογέα σημάνσεων της γραμμής κατάστασης.

Στο πλαίσιο κειμένου Border Width του Property Inspector μπορούμε να ορίσουμε ένα πάχος για το περίγραμμα του πλαισίου σε pixels και να επιλέξουμε ένα χρώμα κάνοντας κλικ στο πλήκτρο Border Color. Από την πτυσσόμενη λίστα Borders μπορούμε να επιλέξουμε να φαίνεται το περίγραμμα (Yes) ή να μην φαίνεται (No) ή την προεπιλεγμένη ρύθμιση (Default) που είναι συνήθως ίδια με την Yes.

 

Τα Αντικείμενα Πλαισίου

Τα έτοιμα αντικείμενα πλαισίου της ενότητας Frames της παλέτας αντικειμένων είναι ο ευκολότερος τρόπος για να δημιουργήσουμε πλαίσια στο DreamWeaver. Αφού εισάγουμε ένα έτοιμο σύνολο πλαίσιο, θα μπορούμε μετά να το τροποποιήσουμε με τους γνωστούς τρόπους.

Για να προσθέσουμε ένα αντικείμενο πλαισίου, κάνουμε κλικ στο εικονίδιο που θέλουμε στην ενότητα Frames της παλέτας αντικειμένων. Όλα τα περιγράμματα των πρότυπων πλαισίων είναι ανενεργά και τα πλαίσια έχουν έτοιμα ονόματα, όπως topFrame, mainFrame, leftFrame κ.ά., αλλά θα πρέπει να αποθηκεύσουμε την ιστοσελίδα του κάθε πλαισίου.

 

Στόχευση Σελίδων σε Πλαίσια

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

Στην πτυσσόμενη λίστα Target του Property Inspector υπάρχουν τα δεσμευμένα ονόματα στόχων μαζί μ’ όλα τα ονόματα πλαισίων της τρέχουσας ιστοσελίδας. Αν δημιουργήσουμε έναν υπερδεσμό και επιλέξουμε την ιστοσελίδα στόχο στο πλαίσιο κειμένου Link, θα μπορούμε να επιλέξουμε από την πτυσσόμενη λίστα Target σε ποιο πλαίσιο να εμφανίζεται.

 

Οι Συμπεριφορές (Behaviors)

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

Μπορούμε να επιλέξουμε τον φυλλομετρητή, όπως Internet Explorer ή Netscape, καθώς και έκδοση 4.0 ή νεώτερη καθώς έτσι έχουμε πρόσβαση σε πολύ περισσότερες συμπεριφορές. Ο λόγος γι’ αυτό είναι ότι οι παλιότεροι φυλλομετρητές δεν υποστηρίζουν JavaScript. Το DreamWeaver προσθέτει συμπεριφορές σε μια ιστοσελίδα για να συλλαμβάνουν είσοδο από τον χρήστη ή από την ιστοσελίδα. Αφού συλληφθεί η είσοδος, εκτελείται μια ενέργεια. Έτσι, μια συμπεριφορά είναι μια ενέργεια που εκκινείται από ένα συμβάν ή :

συμβάν + ενέργεια = συμπεριφορά

Τα συμβάντα είναι σκανδαλισμοί που συλλαμβάνονται από τον φυλλομετρητή και οι ενέργειες είναι κώδικας γραμμένος σε JavaScript που εισάγεται αυτόματα από το DreamWeaver στην ιστοσελίδα μας.

Τα πιο συνηθισμένα συμβάντα φυλλομετρητή είναι τα εξής :

Οι συμπεριφορές που περιέχει έτοιμες το DreamWeaver είναι οι εξής :

Προσαρτάμε συμπεριφορές σ’ αντικείμενα μέσα στην ιστοσελίδα και το DreamWeaver ανοίγει το πλαίσιο διαλόγου της κατάλληλης συμπεριφοράς. Αφού καθορίσουμε τα χαρακτηριστικά της συμπεριφοράς, επιλέγουμε το συμβάν που θα την εκκινεί. Το DreamWeaver εισάγει τον απαραίτητο κώδικα JavaScript στην ενότητα <head> της ιστοσελίδας και στη σήμανση του αντικειμένου για τη σύλληψη του συμβάντος και την κλήση της JavaScript.

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

Από την πτυσσόμενη λίστα Show Events For του Behavior Inspector μπορούμε να επιλέξουμε έναν συγκεκριμένο φυλλομετρητή ή μια έκδοση φυλλομετρητή. Ανάλογα με την επιλογή που θα κάνουμε, διαφορετικές ενέργειες και διαφορετικά συμβάντα θα είναι κάθε φορά διαθέσιμα.

 

Εμφάνιση και Απόκρυψη Επιπέδων

Θα δούμε τη συμπεριφορά Show-Hide Layers, με την οποία μπορούμε να εμφανίσουμε ή να αποκρύψουμε ένα επίπεδο στην ιστοσελίδα. Δημιουργούμε το επίπεδο που θα επηρεάσει η συμπεριφορά, του δίνουμε ένα περιγραφικό όνομα και γράφουμε ένα κείμενο μέσα του ή εισάγουμε μια εικόνα. Αποκρύβουμε το επίπεδο κάνοντας hidden την ιδιότητα ορατότητας. Γράφουμε το κείμενο «Εμφάνιση Επιπέδου» και το επιλέγουμε. Γράφουμε τον χαρακτήρα # στο πλαίσιο κειμένου Link του Property Inspector για να δημιουργήσουμε έναν κενό δεσμό. Αυτός είναι ο συνηθισμένος τρόπος για να δημιουργήσουμε έναν κενό υπερδεσμό (null) για να μπορέσουμε έτσι να εφαρμόσουμε μια συμπεριφορά σ’ ένα αντικείμενο.

Ανοίγουμε τον Behavior Inspector και προσέχουμε να εμφανίζεται το κείμενο <a> Actions στη γραμμή τίτλου του. Αυτό σημαίνει ότι εφαρμόζουμε τη συμπεριφορά σε μια σήμανση άγκυρας, δηλ. τη σήμανση που υλοποιεί υπερδεσμούς. Κάνουμε κλικ στο πλήκτρο + του Behavior Inspector και επιλέγουμε τη συμπεριφορά Show-Hide Layers από το πτυσσόμενο μενού. Στο πλαίσιο διαλόγου Show-Hide Layers επιλέγουμε το επίπεδο που θέλουμε να εμφανίζεται απ’ αυτή τη συμπεριφορά και κάνουμε κλικ στο πλήκτρο Show.

Η συμπεριφορά που δημιουργήσαμε θα εμφανισθεί στον Behavior Inspector με προεπιλεγμένο συμβάν το onClick. Μπορούμε να εμφανίσουμε την πτυσσόμενη λίστα των συμβάντων και να επιλέξουμε ένα άλλο συμβάν που θα εκκινεί τη συμπεριφορά. Για να επεξεργαστούμε μια συμπεριφορά, επιλέγουμε το αντικείμενο στο οποίο την εφαρμόσαμε και κάνουμε διπλό κλικ πάνω της στον Behavior Inspector. Για να την διαγράψουμε, την επιλέγουμε στον Behavior Inspector και πατάμε το πλήκτρο – ή το delete.

 

Άνοιγμα Νέου Παραθύρου

Με τη συμπεριφορά Open Browser Window μπορούμε να ανοίξουμε ένα νέο παράθυρο φυλλομετρητή και να εμφανίσουμε ένα URL. Το νέο παράθυρο φυλλομετρητή θα ανοίγει όταν κάνουμε κλικ σε μια εικόνα. Επιλέγουμε την εικόνα και προσέχουμε να εμφανίζεται το <img> Actions στη γραμμή τίτλου του Behavior Inspector.

Κάνουμε κλικ στο πλήκτρο + και επιλέγουμε τη συμπεριφορά Open Browser Window. Στο πλαίσιο διαλόγου Open Browser Window γράφουμε το URL που θα φορτωθεί στο πλαίσιο κειμένου URL to Display και καθορίζουμε το πλάτος και το ύψος του παραθύρου στα πλαίσια κειμένου Window Width και Window Height.

Ακόμη, στην ομάδα επιλογών Attributes μπορούμε να επιλέξουμε ένα ή περισσότερα από τα εξής πλαίσια ελέγχου : Navigation Toolbar, Location Toolbar, Status Bar, Menu Bar, Scrollbars as Needed και Resize Handles. Στο πλαίσιο κειμένου Window Name μπορούμε να δώσουμε ένα όνομα στο νέο παράθυρο.

 

Εμφάνιση Μηνύματος

Θα δούμε τη συμπεριφορά Popup Message, η οποία εμφανίζει ένα πλαίσιο προειδοποίησης της JavaScript μ’ ένα μήνυμα. Επιλέγουμε το αντικείμενο στο οποίο θα εφαρμόσουμε τη συμπεριφορά και την επιλέγουμε από το πτυσσόμενο μενού που εμφανίζεται με το πλήκτρο +. Στο πλαίσιο διαλόγου Popup Message γράφουμε ένα μήνυμα στο πλαίσιο κειμένου Message και επιλέγουμε το συμβάν onClick γι’ αυτή τη συμπεριφορά.

 

Προσθήκη Μηνύματος στη Γραμμή Κατάστασης

Με τη συμπεριφορά Set Text of Status Bar μπορούμε να εμφανίσουμε ένα μήνυμα στη γραμμή κατάστασης του παραθύρου του φυλλομετρητή. Επιλέγουμε ένα αντικείμενο στο οποίο θα εφαρμόσουμε τη συμπεριφορά και την επιλέγουμε από το υπομενού Set Text του πτυσσόμενου μενού συμπεριφορών. Στο πλαίσιο κειμένου Message του πλαισίου διαλόγου Set Text of Status Bar γράφουμε το μήνυμα που θέλουμε να εμφανισθεί στη γραμμή κατάστασης.

 

Μεταφορά Επιπέδων

Με τη συμπεριφορά Drag Layer μπορούμε να δημιουργήσουμε ένα επίπεδο, το οποίο ο τελικός χρήστης θα μπορεί να μετανικεί στο παράθυρο του φυλλομετρητή. Μπορούμε ακόμα και να περιορίσουμε την περιοχή μέσα στην οποία θα μπορεί να μετακινείται το επίπεδο. Μπορούμε να χρησιμοποιήσουμε τη συμπεριφορά Drag Layer για να δίνουμε τη δυνατότητα στους χρήστες να αλληλεπιδρούν μ’ αντικείμενα στην ιστοσελίδα. Για παράδειγμα, να μπορούν να μετακινούν ένα επίπεδο που περιέχει ένα υπόμνημα χάρτη ή να μπορούν να προσθέτουν μύτες, αυτιά, μάτια κ.ά. σ’ ένα άδειο πρόσωπο.

Σε μια ιστοσελίδα δημιουργούμε τέσσερα επίπεδα που μπορούν να μεταφερθούν. Μετά δημιουργούμε ένα επίπεδο που θα αποτελεί τον στόχο. Μπορούμε να εκκινήσουμε τη συμπεριφορά Drag Layer όταν φορτώνεται η ιστοσελίδα, συλλαμβάνοντας το συμβάν onLoad. Επειδή το συμβάν onLoad αποτελεί μια ιδιότητα της σήμανσης <body>, θα πρέπει να επιλέξουμε τη σήμανση αυτή στον επιλογέα σήμανσης στη γραμμή κατάστασης, οπότε επιλέγονται όλα τα αντικείμενα της ιστοσελίδας. Στη γραμμή τίτλου του Behavior Inspector εμφανίζεται το <body> Actions.

Κάνουμε κλικ στο πλήκτρο + και επιλέγουμε τη συμπεριφορά Drag Layer για να εμφανισθεί το πλαίσιο διαλόγου Drag Layer. Στην καρτέλα Basic και από την πτυσσόμενη λίστα Layer επιλέγουμε ένα από τα επίπεδα που θα μεταφερθούν και Constrained από την πτυσσόμενη λίστα Movement.

Θα εμφανισθούν τέσσερα πλαίσια κειμένου για να εισάγουμε τιμές σε pixels για τις συντεταγμένες μιας ορθογώνιας περιοχής. Για να περιορίσουμε την κίνηση σε μόνο κατακόρυφη, πρέπει να εισάγουμε 0 στα πλαίσια κειμένου Left και Right, ενώ για να περιορίσουμε την κίνηση σε μόνο οριζόντια, πρέπει να εισάγουμε 0 στα πλαίσια κειμένου Up και Down. Οι τιμές είναι σχετικές με την αρχική θέση του επιπέδου.

Αν κάνουμε κλικ στο πλήκτρο Get Current Position, θα καταχωρηθούν οι τρέχουσες συντεταγμένες της κορυφής του επιπέδου στα πλαίσια κειμένου Left και Top της ομάδας επιλογών Drop Target και το πλαίσιο κειμένου Snap if Within θα πάρει την τιμή 50, την οποία μπορούμε να αλλάξουμε. Η τιμή αυτή ορίζει το πόσο κοντά πρέπει να αποθέσουμε το επίπεδο.

Από την πτυσσόμενη λίστα Drag Handle της καρτέλας Advanced μπορούμε να επιλέξουμε Area Within Layer, ώστε να ορίσουμε μια συγκεκριμένη περιοχή του επιπέδου μεταφοράς σαν λαβή μεταφοράς. Αυτό σημαίνει ότι θα πρέπει να κάνουμε κλικ μόνο μέσα σ’ αυτή την περιοχή για να μπορούμε να μεταφέρουμε το επίπεδο. Οι συντεταγμένες που ορίζουμε στα τέσσερα πλαίσια κειμένου L, T, W και H είναι σχετικές με την πάνω αριστερή γωνία του επιπέδου μεταφοράς.

Για να εισάγουμε κώδικα JavaScript, μπορούμε να γράψουμε την εξής εντολή στο πλαίσιο κειμένου Call JavaScript :

window.status = ‘Μεταφορά …’

και στην εξής στο πλαίσιο κειμένου When Dropped Call JavaScript :

window.status = ‘Απόθεση!’

Ο πρώτος κώδικας θα εκτελεσθεί όταν μεταφέρουμε το επίπεδο και ο δεύτερος όταν αποθέσουμε το επίπεδο. Και στις δύο περιπτώσεις θα εμφανισθεί ένα μήνυμα στη γραμμή κατάστασης. Αν επιλέξουμε το πλαίσιο ελέγχου Only if snapped, ο κώδικας της JavaScript θα εκτελεσθεί μόνο αν αποθέσουμε το επίπεδο στον στόχο.

 

Κίνηση με Γραμμές Χρόνου

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

Μπορούμε να τοποθετήσουμε μια εικόνα σε μια γραμμή χρόνου και να αλλάζουμε την προέλευσή της με τον χρόνο, αλλά για να την κάνουμε να μετακινείται με τον χρόνο, πρέπει να την τοποθετήσουμε σ’ ένα επίπεδο. Όταν δημιουργούμε μια γραμμή χρόνου, το DreamWeaver εισάγει κώδικα JavaScript μέσα στην ιστοσελίδα. Εμφανίζουμε τον Timeline Inspector, επιλέγοντας Timelines από το υπομενού Others του μενού Window ή πατώντας τα πλήκτρα Alt+F9. Αποτελείται από οριζόντια κανάλια (channels) και κατακόρυφα πλαίσια (frames). Στο κανάλι Β μπορούμε να ορίσουμε συμπεριφορές που θα εκτελούνται σ’ ένα συγκεκριμένο πλαίσιο.

Η κεφαλή αναπαραγωγής, που αναπαρίσταται μ’ ένα κόκκινο τετραγωνάκι, βρίσκεται στο τρέχον πλαίσιο και ελέγχει ποιο πλαίσιο είναι επιλεγμένο. Μπορούμε να την μεταφέρουμε με το ποντίκι σ’ ένα πλαίσιο μέσα στη γραμμή χρόνου για να το προβάλλουμε. Μπορούμε να δούμε τον αριθμό του τρέχοντος πλαισίου και στο μικρό πλαίσιο κειμένου που βρίσκεται στο πάνω μέρος του Timeline Inspector, μαζί με τα πλήκτρα Rewind, Back και Play. Στο διπλανό πλαίσιο κειμένου Fps φαίνεται η ταχύτητα αναπαραγωγής της κίνησης σε πλαίσια ανά δευτερόλεπτο (frames per second). Η προεπιλεγμένη τιμή είναι 15 fps.

 

Καταγραφή μιας Απλής Κίνησης

Ο ευκολότερος τρόπος για να κάνουμε κάτι να κινείται σε μια γραμμή χρόνου είναι να το καταγράψουμε. Πρέπει να έχουμε υπόψη μας ότι όλα τα αντικείμενα που τοποθετούμε στις γραμμές χρόνου πρέπει να βρίσκονται σε επίπεδα. Για να καταγράψουμε μια διαδρομή κίνησης, επιλέγουμε το επίπεδο που θέλουμε να κινήσουμε και πάμε στην επιλογή Record Path of Layer του υπομενού Timeline4 του μενού Modify. Μεταφέρουμε την κεφαλή αναπαραγωγής στον Timeline Inspector στο πλαίσιο 1.

Επιλέγουμε τη λαβή μετακίνησης του επιπέδου και το μετακινούμε στη διαδρομή που θέλουμε. Η διαδρομή θα σημειωθεί από μια διάστικτη γραμμή και μόλις αφήσουμε το ποντίκι, η διαδρομή θα γίνει μια συμπαγής γραμμή. Έχουμε ήδη δημιουργήσει μια κίνηση γραμμής χρόνου στο DreamWeaver με προεπιλεγμένο όνομα το Timeline1. Για να αλλάξουμε το όνομα της γραμμής χρόνου, κάνομε κλικ στην πτυσσόμενη λίστα Timelines, γράφουμε το νέο όνομα και πατάμε το πλήκτρο enter. Απ’ αυτή την πτυσσόμενη λίστα μπορούμε να επιλέξουμε για να εμφανίσουμε μια γραμμή χρόνου.

Στο πρώτο κανάλι φαίνεται το όνομα του επιπέδου που μετακινήσαμε και μπορούμε να σύρουμε την κεφαλή αναπαραγωγής πάνω στα πλαίσια για να δούμε την κίνηση του επιπέδου μέσα στο παράθυρο Εγγράφου. Οι άσπροι κύκλοι που εμφανίσθηκαν μέσα στη γραμμή κίνησης καλούνται πλαίσια κλειδιά (keyframes) και αποτελούν ένα σημαντικό κομμάτι μιας κίνησης, επειδή οι αλλαγές μπορούν να γίνουν μόνο στα πλαίσια κλειδιά και το DreamWeaver αναλαμβάνει να υπολογίσει όλα τα ενδιάμεσα βήματα ανάμεσα στα πλαίσια κλειδιά.

Χρειαζόμαστε ένα πλαίσιο κλειδί κάθε φορά που η κίνηση αλλάζει διεύθυνση ή το επίπεδο αλλάζει μέγεθος ή συμβαίνει κάτι καινούργιο. Το DreamWeaver προσθέτει αυτόματα πλαίσια κλειδιά κάθε φορά που αλλάζει η διεύθυνση κατά την καταγραφή της κίνησης του επιπέδου. Αν επιλέξουμε το πλαίσιο ελέγχου Autoplay, η γραμμή χρόνου θα αναπαράγεται όταν φορτώνεται η ιστοσελίδα. Αυτή η επιλογή προσθέτει αυτόματα τη συμπεριφορά Play Timeline στη σήμανση <body>, η οποία εκκινείται από το συμβάν onLoad. Μπορούμε τώρα να κάνουμε προεπισκόπηση της κίνησης σ’ έναν φυλλομετρητή.

Για να αναπαράγεται συνέχεια η κίνηση και όχι μία μόνο φορά, πρέπει να επιλέξουμε και το πλαίσιο ελέγχου Loop, οπότε το DreamWeaver εισάγει τη συμπεριφορά Go To Timeline Frame στο κανάλι Β του Timeline Inspector σαν το τελευταίο πλαίσιο της κίνησης. Η συμπεριφορά έχει τεθεί να στέλνει την κίνηση στο πλαίσιο 1.

 

Επεξεργασία Συμπεριφοράς στο Κανάλι Β

Για να μπορέσουμε να επεξεργαστούμε μια συμπεριφορά που εισήγαγε το DreamWeaver στον κανάλι Β όταν επιλέξαμε το πλαίσιο ελέγχου Loop, πρέπει να κάνουμε διπλό κλικ στο αντίστοιχο πλαίσιο στο κανάλι Β για να εμφανισθεί ο Behavior Inspector. Αν ο Behavior Inspector είναι ήδη ορατός στο παράθυρο Εγγράφου, αρκεί να κάνουμε μονό κλικ. Το DreamWeaver έχει προσθέσει το συμβάν onFramen και την ενέργεια Go To Timeline Frame, όπου n είναι ο αριθμός του πλαισίου όπου τοποθετήθηκε το συμβάν στο κανάλι Β και στην ουσία είναι κατά 1 μεγαλύτερο από το τελευταίο πλαίσιο της γραμμής χρόνου. Αυτό το συμβάν εκκινεί όταν η κίνηση φθάσει στο καθορισμένο πλαίσιο.

Αν κάνουμε διπλό κλικ στην ενέργεια Go To Timeline Frame, θα εμφανισθεί το ομώνυμο πλαίσιο διαλόγου, όπου από την πτυσσόμενη λίστα Timeline μπορούμε να επιλέξουμε μια γραμμή χρόνου και στο πλαίσιο κειμένου Go to Frame να καταχωρήσουμε τον αριθμό του πλαισίου στο οποίο θέλουμε να πάμε, που εξ ορισμού είναι το 1. Στο πλαίσιο κειμένου Looptimes μπορούμε να επιλέξουμε πόσες φορές θα γίνει η αναπαραγωγή της κίνησης.

Για να προσθέσουμε μια συμπεριφορά στο κανάλι Β στη γραμμή χρόνου, ανοίγουμε τον Behavior Inspector και κάνουμε κλικ στο κανάλι Β και στο πλαίσιο που θέλουμε να εμφανισθεί η συμπεριφορά. Κάνουμε κλικ στο πλήκτρο + του Behavior Inspector και επιλέγουμε την ενέργεια που θέλουμε. Το συμβάν που προσθέτει το DreamWeaver είναι το onFramen, όπου n είναι ο αριθμός του πλαισίου όπου τοποθετήθηκε το συμβάν στο κανάλι Β.

 

Προσθήκη Επιπέδου στη Γραμμή Χρόνου

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

Για να δημιουργήσουμε μια διαδρομή κίνησης για το επίπεδο, κάνουμε κλικ στο πλαίσιο κλειδί αρχής και μετακινούμε το επίπεδο, αν χρειαστεί. Κάνουμε κλικ στο πλαίσιο κλειδί τέλους και μετακινούμε το επίπεδο στην τελική του θέση. Μόλις αφήσουμε το ποντίκι, θα εμφανισθεί μια γραμμή που θα δείχνει τη διαδρομή της κίνησης. Αφού έχουμε δημιουργήσει μια γραμμή χρόνου, μπορούμε να χρησιμοποιήσουμε ένα άλλο αντικείμενο στη θέση του κανονικού. Για να γίνει αυτό, κάνουμε δεξί κλικ στη γραμμή κίνησης στον Timeline Inspector και επιλέγουμε Change Object από το πτυσσόμενο μενού.

Στο πλαίσιο διαλόγου Change Object και από την πτυσσόμενη λίστα Object to Animate μπορούμε να επιλέξουμε ένα άλλο αντικείμενο που θα τοποθετηθεί στη γραμμή χρόνου στη θέση του αρχικού.

 

Προσθήκη Πλαισίου Κλειδιού

Για να δημιουργήσουμε μια πιο περίπλοκη κίνηση ή για να κάνουμε να συμβεί κάτι σ’ ένα συγκεκριμένο πλαίσιο, πρέπει να μετατρέψουμε αυτό το πλαίσιο σε πλαίσιο κλειδί. Για να εισάγουμε ένα πλαίσιο κλειδί σε μια γραμμή χρόνου, μπορούμε να κάνουμε δεξί κλικ πάνω της στο πλαίσιο που θέλουμε και να επιλέξουμε Add Keyframe από το πτυσσόμενο μενού ή να επιλέξουμε Add Keyframe από το υπομενού Timeline4 του μενού Modify ή να επιλέξουμε το πλαίσιο και να πατήσουμε το πλήκτρο F6.

Ένας πιο γρήγορος τρόπος για να εισάγουμε ένα πλαίσιο κλειδί είναι να κρατήσουμε πατημένο το πλήκτρο Control, οπότε ο δρομέας του ποντικιού παίρνει τη μορφή ενός πλαισίου κλειδιού μόλις τον τοποθετήσουμε μέσα στον Timeline Inspector, και να κάνουμε κλικ στο πλαίσιο που θέλουμε να εισάγουμε το πλαίσιο κλειδί. Μπορούμε να επιλέξουμε τώρα το νέο πλαίσιο κλειδί και να μετακινήσουμε το επίπεδο σε μια άλλη θέση. Η διαδρομή κίνησης θα τροποποιηθεί. Για να αφαιρέσουμε ένα πλαίσιο κλειδί, το επιλέγουμε και πάμε στην εντολή Remove Keyframe από τα ίδια μενού.

 

Προσθήκη Γραμμής Χρόνου

Για να προσθέσουμε μια νέα γραμμή χρόνου, μπορούμε να κάνουμε δεξί κλικ στον Timeline Inspector και να επιλέξουμε Add Timeline από το πτυσσόμενο μενού ή να επιλέξουμε Add Timeline από το υπομενού Timeline4 του μενού Modify. Για να μετακινηθούμε ανάμεσα στις γραμμές χρόνου μιας ιστοσελίδας, μπορούμε να χρησιμοποιήσουμε την πτυσσόμενη λίστα. Για να διαγράψουμε μια γραμμή χρόνου, πρέπει να την κάνουμε τρέχουσα και να χρησιμοποιήσουμε την εντολή Remove Timeline από τα ίδια μενού.

Για να εκκινήσει μια δεύτερη γραμμή χρόνου, μπορούμε να επιλέξουμε το πλαίσιο ελέγχου Autoplay που διαθέτει για να την εκκινήσουμε μαζί με την πρώτη γραμμή χρόνου. Αλλιώς, μπορούμε να την εκκινήσουμε αν προσαρτήσουμε τη συμπεριφορά Play Timeline σ’ ένα πλήκτρο εντολής (command button). Μια άλλη λύση είναι να την κάνουμε να αναπαράγεται αυτόματα μόλις τελειώσει μια άλλη γραμμή χρόνου, αν εισάγουμε τη συμπεριφορά Play Timeline στο κανάλι Β και στο τελευταίο πλαίσιο της πρώτης γραμμής χρόνου.

 

back.gif (9867 bytes)

Επιστροφή