book_dreamweaver by sofos kush

Σπουδές Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας και εκπαιδευτικό λογισμικό “face to face” ΔΑΦΝΗ: ΑΒΕΡΩΦ 48 ΤΗΛ.: 210 9761101, 210 9761102 ΜΑΡΟΥΣΙ: ΔΗΜΗΤΡΑΣ 3 & ΠΑΝΑΘΗΝΑΙΩΝ ΤΗΛ.: 210 8026216, 210 8026058 ΚΑΤΕΡΙΝΗ: ΜΕΓ. ΑΛΕΞΑΝΔΡΟΥ 32 ΤΗΛ.: 23510 25115

DREAMWEAVER

2/96

ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1:  Εισαγωγή στο Dreamwever Μάθημα 2:  Γραμμές εργαλείων document Μάθημα 3:  Προετοιμασία τοποθεσίας ιστού Μάθημα 4:  Ορισμός τοπικής τοποθεσίας Μάθημα 5:  Δημιουργία και αποθήκευση νέας σελίδας Μάθημα 6:  Εξερεύνηση εργαλείων Μάθημα 7:  Τίτλος σελίδας Μάθημα 8:  Καθορισμός φυλλομετρητή Μάθημα 9:  Εισαγωγή και μορφοποίηση κειμένου Μάθημα 10:  Στοίχιση και εσοχές κειμένου Μάθημα 11:  Προσθήκη ειδικών χαρακτήρων

3/96

Μάθημα 12:  Εισαγωγή εικόνας φόντου Μάθημα 13:  Εισαγωγή εικόνας από το πάνελ assets Μάθημα 14:  Ροή Κειμένου Γύρω από εικόνες Μάθημα 15:  Εισαγωγή Κινούμενων εικόνων Flash Μάθημα 16:  Δημιουργία συνδέσμων Μάθημα 17:  Δημιουργία εικονοχαρτών Μάθημα 18:  Σχεδιασμός με πίνακες Μάθημα 19:  Ταξινόμηση πίνακα Μάθημα 20:  ΄Ένθετοι πίνακες Μάθημα 21:  Ιχνογράφηση Μάθημα 22:  Δημιουργία CSS φύλλων στυλ Μάθημα 23:  Δημιουργία στοιχείου βιβλιοθήκης Μάθημα 24:  Δημιουργία πλαισίων Copyright© 2009-2012 -SYSTEM- All rights reserved

4/96

Μάθημα 25:  Δημιουργία φόρμας Μάθημα 26:  Αλληλεπίδρασης με το χρήστη Μάθημα 27:  Έλεγχος φυλλομετρητή Μάθημα 28:  Δημιουργία αναδυόμενου μενού Μάθημα 29:  Εργαλείο αναδυόμενου μενού Μάθημα 30:  Επικύρωση φόρμα Μάθημα 31:  Πάνελ files Μάθημα 32:  Προσθήκη φακέλων σε τοποθεσία Μάθημα 33:  Σύνδεση απομακρυσμένου διακομιστή Μάθημα 34:  Ανέβασμα και συγκάλυψη αρχείων Μάθημα 35:  Εύρεση και αντικατάσταση Μάθημα 36:  Έλεγχος ορθογραφίας

5/96

Μάθημα 37:  Δημιουργία AP στοιχείων Μάθημα 38:  Κάνναβος, χάρακας, οδηγός Μάθημα 39:  Συμπεριφορά σε AP στοιχεία Μάθημα 40:  Επέκταση εγκατάστασης Μάθημα 41:  Quick time

6/96

ΚΕΦΑΛΑΙΟ 1ο ΕΙΣΑΓΩΓΗ ΣΤΟ DREAMWEAVER Το Dreamweaver είναι ένας επεξεργαστής HTML που δίνει στους χρήστες δυνατότητες οπτικού σχεδιασμού και επεξεργασίας, σε συνδυασμό με την άμεση επεξεργασία του κώδικα. Το Dream weaver βοηθάει στη μείωση του χρόνου παραγωγής των τοποθεσιών Ιστού σας και παρέχει εργαλεία για τη διαχείριση και τη συντήρηση αυτών των τοποθεσιών. Κάντε εκκίνηση του Dreamweaver χρησιμοποιώντας το εικονίδιο συντόμευσης του προγράμματος το οποίο βρίσκεται στην επιφάνεια εργασίας. Το Dreamweaver παρέχει δύο επιλογές χώρους εργασίας για τους χρήστες το Designer (Σχεδιαστή) και το Coder (Προγραμματιστή). Ο Χώρος Σχεδιαστή ενσωματώνει όλα τα παράθυρα και τα πάνελ του Dreamweaver σε ένα περιβάλλον βελτιστοποιημένο για την οπτική δημιουργία τοποθεσιών Ιστού, ιδανικό για σχεδιαστές. Μπορείτε να εναλλάσσεστε από τον ένα χώρο εργασίας στον άλλο όποτε θέλετε επιλέγοντας Edit/ Preferences, επιλέγοντας την κατηγορία General και πατώντας το κουμπί Change Workspace (Αλλαγή χώρου εργασίας). Αν αλλάξετε τις ρυθμίσεις χώρου εργασίας, πρέπει να κλείσετε και να ξανανοίξετε το Dreamweaver για να ισχύσει η αλλαγή.

Σελίδα Εκκίνησης

Αν είναι η πρώτη φορά που ανοίγετε το Dreamweaver, πρέπει να δείτε μια σελίδα εκκίνησης (Start Page) που περιέχει συνδέσμους με πρόσφατα έγγραφα, την επιλογή δημιουργίας εγγράφου από μια ποικιλία τύπων αρχείων, δείγματα σχεδίων σελίδων που μπορούν να σας δώσουν μια αφετηρία για την κατασκευή των δικών σας τοποθεσιών πόρους του προγράμματος. Εξ ορισμού, η σελίδα εκκίνησης εμφανίζεται κάθε φορά που ανοίγετε το Dreamweaver εκτός αν ενεργοποιήσετε το πλαίσιο ελέγχου Don’t Show again (Να μην εμφανιστεί ξανά). Όταν αρχίσετε να δημιουργείτε μια σελίδα ή να εξερευνάτε τις υπόλοιπες επιλογές της ενότητας Get Started (Ξεκίνημα), η σελίδα εκκίνησης κλείνει μόνη της.

7/96

Εξερεύνηση του χώρου εργασίας

ΣΕΛΙΔΑ ΕΚΚΙΝΗΣΗΣ

ΟΜΑΔΕΣ ΠΑΝΕΛ ΓΡΑΜΜΗ ΕΡΓΑΛΕΙΩΝ ΕΙΣΑΓΩΓΗΣ

ΕΠΙΘΕΩΡΗΤΗΣ ΙΔΙΟΤΗΤΩΝ

8/96

ΚΕΦΑΛΑΙΟ 2ο ΓΡΑΜΜΕΣ ΕΡΓΑΛΕΙΩΝ DOCUMENT Πριν προχωρήσετε στη δημιουργία ιστοσελίδων, πρέπει να εξοικειωθείτε με την ποικιλία εργαλείων και πάνελ της διασύνδεσης του Dreamweaver, που σας επιτρέπουν να δημιουργείτε εύκολα τοποθεσίες Ιστού. Μετακινήστε το δείκτη του ποντικιού επάνω από το παράθυρο Εγγράφου και τη γραμμή εργαλείων Document. Αφήστε το δείκτη πάνω από κάποιο κουμπί για να δείτε το όνομά του. Το μεγαλύτερο μέρος της εργασίας σχεδιασμού και δημιουργίας κώδικα γίνεται μέσα στο παράθυρο Εγγράφου. Αυτή η περιοχή είναι γνωστή ως το “σώμα” της σελίδας, όπου μπορείτε να προσθέσετε, να τροποποιήσετε και να διαγράψετε τη μεγάλη ποικιλία των στοιχείων που συνιστούν μια ιστοσελίδα. Κάτω από τις καρτέλες εγγράφων που έχετε ανοίξει θα δείτε τη γραμμή εργαλείων Document. Η γραμμή εργαλείων Document αποτελείται από 3 τμήματα: • Κουμπιά κατάστασης προβολής: Σας επιτρέπουν να επιλέξετε μια από τις προβολές Design (Σχεδίασης), code (Κώδικα) και Split (Διαίρεσης) για το έγγραφό σας. Η περιοχή αυτή περιλαμβάνει τα κουμπιά Live View (Ενεργός προβολή) και Live Code (Ενεργός κώδικας). • Τίτλος Σελίδας: Κάθε σελίδα χρειάζεται έναν περιγραφικό τίτλο. Για να κάνετε απόκρυψη της γραμμής εργαλείων Insert Window/Insert (ξετσεκάρω) Για να κάνετε εμφάνιση της γραμμής εργαλείων Insert Window/Insert (τσεκάρω)

Επεξήγηση εργαλείων ΠΙΝΑΚΑΣ

ΕΙΚΟΝΑ

ΗΜΕΡΟΜΗΝΙΑ

ΠΡΟΤΥΠΑ

ΥΠΕΡΣΥΝΔΕΣΜΟΣ

ΣΥΝΔΕΣΜΟΣ ΗΛΕΚΤΡΟΝΙΚΟΥ ΤΑΧΥΔΡΟΜΕΙΟΥ

ΠΟΛΥΜΕΣΑ

9/96

Για να κάνετε απόκρυψη της γραμμής εργαλείων Document View/ Toolbars/Document (ξετσεκάρω) Για να κάνετε εμφάνιση της γραμμής εργαλείων Document View/ Toolbars/Document (τσεκάρω) Για να κάνετε απόκρυψη της γραμμής εργαλείων Standard View/ Toolbars/ Standard (ξετσεκάρω) Για να κάνετε εμφάνιση της γραμμής εργαλείων Standard View/ Toolbars/ Standard (τσεκάρω) Υπάρχουν τρεις καταστάσεις προβολής στο Dreamweaver: η προβολή Σχεδίασης (design), η προβολή κώδικα (Code) και η προβολή Διαίρεσης (Split), η οποία συνδυάζει την προβολή Σχεδίασης και την προβολή Κώδικα. Τα κουμπιά για τις καταστάσεις αυτές είναι στην αριστερή άκρη της γραμμής εργαλείων Document.

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

Η γραμμή κατάστασης είναι το κατώτατο τμήμα του παραθύρου εγγράφου. Συχνά ονομάζεται επιλογέας ετικετών (tag selector), παρόλο που το όνομα αυτό είναι σωστό μόνο για το αριστερό μέρος. Η δεξιά πλευρά της γραμμής κατάστασης περιέχει περισσότερα χειριστήρια. Τα εργαλεία Select (Επιλογή), Hand (Χέρι) και Zoom (Μεγέθυνση) σας επιτρέπουν αντίστοιχα να επιλέγετε, να κυλάτε τη σελίδα, να μεγεθύνετε ή να σμικρύνετε τη σελίδα. Το επόμενο χειριστήριο δείχνει το τρέχον ποσοστό μεγέθυνσης της σελίδας. Τέλος η γραμμή κατάσταση σας ενημερώνει για την κωδικοποίηση του κειμένου σελίδας. Η κωδικοποίηση λέει στο φυλλομετρητή ποιο σύνολο χαρακτήρων πρέπει να χρησιμοποιήσει για την εμφάνιση των γραμματοσειρών στη σελίδα.

10/96

ΚΕΦΑΛΑΙΟ 3ο ΠΡΟΕΤΟΙΜΑΣΙΑ ΤΟΠΟΘΕΣΙΑΣ ΙΣΤΟΥ Μια καλή τοποθεσία Ιστού πρέπει να λειτουργεί διαισθητικά και να δημιουργεί μια θετική, μοναδική εμπειρία στο χρήστη. Η δημιουργία μιας αποτελεσματικής τοποθεσίας Ιστού ξεκινάει με τον καθορισμό και τη σύνοψη των λόγων για τους οποίους την κατασκευάζετε. Πριν αρχίζει να δουλεύετε με τις σελίδες, θέστε στον εαυτό σας ή στον πελάτη σας τις παρακάτω ερωτήσεις: Ποιο είναι το κοινό σας; Η γνώση του κοινού στο οποίο απευθύνεστε είναι ζωτική. Ο καθορισμός ενός γενικού προφίλ χρήστη σας βοηθάει να προσεγγίσετε απότελεσματικά το κοινό σας. Ίσως έχετε πολλά είδη χρηστών σε αυτή την περίπτωση, αναπτύξτε ένα προφίλ για το καθένα από αυτά. Τι τεχνολογία διαθέτουν οι χρήστες; Είναι σημαντικό να ξέρετε τον τύπο εξοπλισμού που χρησιμοποιείται από τους επισκέπτες σας, ώστε να δημιουργήσετε μια τοποθεσία προσπελάσιμη από το κοινό σας. Τι χρειάζεται αυτή η τοποθεσία; Τι θέλετε να αποκομίσουν οι επισκέπτες της τοποθεσίας σας; Σκεφθείτε το σκοπό που θα εξυπηρετεί η τοποθεσίας σας και πως θα τη χρησιμοποιεί κάθε πιθανός χρήστης. Τι πρέπει να περιλαμβάνει η τοποθεσία για να εξυπηρετεί το σκοπό της; Χρησιμοποιήστε τα προφίλ χρηστών που δημιουργήσατε για να προσδιορίσετε πιθανά σενάρια για τον τρόπο που θα χρησιμοποιούν οι επισκέπτες την τοποθεσία σας. Με βάση αυτά, μπορείτε να προσδιορίσετε τα είδη περιεχομένου που χρειάζονται. Τι περιεχόμενο χρειάζεται για την τοποθεσία; Ο προσδιορισμός και η συγκέντρωση των συστατικών στοιχείων της τοποθεσίας σας αποτελεί ένα σημαντικό τμήμα της προετοιμασίας σχεδιασμού και παραγωγής μιας τοποθεσίας Ιστού. Πρέπει να συγκεντρώσετε όλα τα περιεχόμενα όπως κείμενο, εικόνες και στοιχεία πολυμέσων που θα χρησιμοποιηθούν στην τοποθεσία. Η οργάνωση αυτών των στοιχείων σας επιτρέπει να δημιουργήσετε μια ολοκληρωμένη τοποθεσία Ιστού. Τι μήνυμα θέλετε να μεταδίδει η τοποθεσίας σας; Είναι βασικό να γνωρίζετε ακριβώς τι θέλετε να πείτε στους επισκέπτες σας. Αν δεν έχετε ξεκαθαρίσει τι θέλετε να πείτε, μάλλον το ίδιο πρόβλημα θα έχουν και οι επισκέπτες σας. Αποσαφηνίστε το μήνυμα της τοποθεσίας σας. Η επικοινωνία με τους επισκέπτες σας είναι θεμελιώδες τμήμα της διατήρησης μιας αποτελεσματικής τοποθεσίας, και αυτή η επικοινωνίας εξαρτάται από τη δομή της τοποθεσίας σας. Copyright© 2009-2012 -SYSTEM- All rights reserved

11/96

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

12/96

ΚΕΦΑΛΑΙΟ 4ο ΟΡΙΣΜΟΣ ΤΟΠΙΚΗΣ ΤΟΠΟΘΕΣΙΑΣ

Το πρώτο βήμα της δημιουργίας μιας τοποθεσίας Ιστού είναι να ορίσετε ή να δημιουργήσετε στον υπολογιστή σας το φάκελο που θα περιέχει όλα όσα θα περιέχονται στην τοποθεσία. Αυτή η διαδικασία ονομάζεται ορισμός τοπικής τοποθεσίας. Ο καθοριζόμενος φάκελος, γνωστός ως τοπικός βασικός φάκελος (local root folder), θέτει τα όρια της τοπικής τοποθεσίας που βρίσκεται στο σκληρό σας δίσκο και λειτουργεί ως είδωλο της απομακρυσμένης τοποθεσίας, η οποία είναι η πραγματική τοποθεσία στο διακομιστή Ιστού που θα βλέπουν οι επισκέπτες σας. Ο ορισμός μιας τοπικής τοποθεσίας σας δίνει τη δυνατότητα να διατηρείτε την ίδια ιεραρχία φακέλων μεταξύ της τοπικής και της απομακρυσμένης έκδοσης, πράγμα κρίσιμο στη δημιουργία και τη διατήρηση μιας λειτουργικής τοποθεσίας. Η δημιουργία μιας τοπικής τοποθεσίας, η οποία από τον τοπικό βασικό φάκελο μέσα στον οποίο κατασκευάζετε τη δομή των αρχείων και των φακέλων της τοποθεσίας σας, δεν επιτρέπει στην τοποθεσία να αποθηκεύσει αρχεία έξω από τον τοπικό βασικό φάκελο. Τα αρχεία του σκληρού σας δίσκου που βρίσκονται έξω από τον τοπικό βασικό φάκελο δεν μπορούν να μεταφερθούν στον απομακρυσμένο διακομιστή. Αυτός ο περιορισμός εξασφαλίζει ότι, καθώς αναπτύσσετε την τοποθεσίας σας, δε θα έχετε πρόσβαση σε αρχεία που δε θα είναι διαθέσιμα όταν οι τοποθεσία γίνει διαθέσιμη στο Διαδίκτυο. Πολλές λειτουργίες του Dreamweaver, όπως η ενημέρωση όλων των αναφορών προς ένα αρχείο που έχει μετακινηθεί σε διαφορετική θέση στην τοποθεσία, απαιτούν τον ορισμό μιας τοπικής τοποθεσίας ώστε να λειτουργήσουν. Πρέπει συστηματικά να δημιουργείτε και να εργάζεστε πάντα σε τοπικές τοποθεσίες. Αν δεν το κάνετε αυτό, ίσως έχετε προβλήματα με τους συνδέσμους, τις διαδρομές και τη διαχείριση των αρχείων. Για να Ορίσετε μια τοπική τοποθεσία πρέπει να δείξετε: Δείξτε στο μενού Site (Τοποθεσία)/New Site (Νέα τοποθεσία)/Site Definition με ενεργοποιημένη την καρτέλα Advanced. Αν στο πλαίσιο διαλόγου είναι ενεργοποιημένη η καρτέλα Advanced, πατήστε στην καρτέλα Basic για να εμφανιστεί η οθόνη Editing Files. Στη συνέχεια, στο πεδίο What would you like to name your site (Ποιο όνομα θέλετε να δώσετε στην τοποθεσία σας;) πληκτρολογήστε το όνομα του site. Το όνομα της τοποθεσίας είναι μόνο για δική σας αναφορά. Στο πεδίο What is the HTTP Address (URL) of the site (Ποια είναι η διεύθυνση HTTP (URL) της τοποθεσίας σας;), πληκτρολογήστε τξ διεύθυνση Ιστου της τοποθεσίας σας. Πατήστε στο κουμπί Next. Η εφαρμογή θα σας ρωτήσει Do you want to work with a server technology such as? (θέλετε να χρησιμοποιήσετε τεχνολογία διακομιστή όπως οι Copyright© 2009-2012 -SYSTEM- All rights reserved

13/96

ColdFusion, ASP.NET, ASP, JSP or PHP). Πατήστε στο ραδιοπλήκτρο No, I do not want to use a server technology (Όχι δε θέλω να χρησιμοποιήσω τεχνολογία διακομιστή). Πατήστε στο κουμπί Next/ θα εμφανιστεί η οθόνη Editing Files. Η εφαρμογή θα σας ρωτήσει How do you want to work with your files during development? (Πως θέλετε να επεξεργάζεστε τα αρχεία σας κατά την ανάπτυξη;) Πατήστε στο ραδιοπλήκτρο Edit local copies on my machine, then upload to server when ready (recommended) (Επεξεργασία των τοπικών αντιγράφων πρώτα στον υπολογιστή μου, και ανέβασμα στο διακομιστή όταν είναι έτοιμα (συνιστάται)). Η άλλη επιλογή Edit directly on server using local network (Επεξεργασία απευθείας στο δικομιστή μέσω τοπικού δικτύου) αφορά ειδικές καταστάσεις στις οποίες ο διακομιστής Ιστού βρίσκεται στο τοπικό σας δίκτυο αντί να είναι προσπελάσιμος μέσω Διαδικτύου. Στην ίδια οθόνη, το Dreamweaver θα σας ρωτήσει Where on your computer do you want to store your files? (Που θέλετε να αποθηκεύσετε τα αρχεία στον υπολογιστή σας;) Πατήστε στο εικονιδίου του φακέλου στα δεξιά του πεδίου κειμένου για να ανοίξετε ένα πλαίσιο διαλόγου με τίτλο Choose local root folder for site sitename (Επιλογή τοπικού βασικού φακέλου για την τοποθεσία sitename) και αναζητήστε στο σκληρό σας δίσκο το φάκελο που περιέχει τα αρχεία της τοποθεσίας/ Πατήστε στο κουμπί Next. Θα εμφανιστεί η οθόνη Sharing Files (Κοινή χρήση αρχείων). Από το αναδυόμενο μενού How do you want to connect to your remote server? (Με ποιο τρόπο θέλετε να συνδεθείτε στον απομακρυσμένο διακομιστή;) επιλέξτε None (Κανένα). Σε αυτή την περίπτωση απλός δημιουργούμε την τοπική τοποθεσία/ Πατήστε στο κουμπί Next. Θα εμφανιστεί η οθόνη Summary (περίληψη) και πατήστε στο κουμπί Done (Τέλος).

14/96

ΚΕΦΑΛΑΙΟ 5ο ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΑΠΟΘΗΚΕΥΣΗ ΝΕΑΣ ΤΟΠΟΘΕΣΙΑΣ Αφού ορίσετε την τοπική σας τοποθεσία, είστε έτοιμη να δημιουργήσετε τις ιστοσελίδες σας. Όποτε δημιουργείτε μια σελίδα, το πρώτο πράγμα που πρέπει να κάνετε είναι να αποθηκεύετε το έγγραφό σας.

Δημιουργήστε Νέας Σελίδας

Η πρώτη σελίδα HTML που θα δημιουργήσετε σε μια νέα τοποθεσία θα πρέπει να είναι σελίδα ευρετηρίου (Index page), δηλαδή η πρώτη σελίδα που θα φορτώνουν αυτόματα οι φυλλομετρητές Ιστού αν κάποιος επισκέπτεται την τοποθεσία. Ανάλογα με τον τρόπο ονομασίας των σελίδων στην τοποθεσίας σας, η σελίδα ευρετηρίου μπορεί να έχει διάφορα ονόματα, αλλά το πιο συνηθισμένο είναι index.html. Αφού δημιουργήσετε τη σελίδα ευρετηρίου, πρέπει να δημιουργήσετε και άλλες σελίδες για την τοποθεσία σας. Όπως συμβαίνει συχνά με το Dreamweaver, υπάρχουν περισσότεροι από ένας τρόποι για να εκτελέσετε τη συγκεκριμένη εργασία. Μπορείτε να δημιουργήσετε μια νέα σελίδα χρησιμοποιώντας την οθόνη Υποδοχής ή το πλαίσιο διαλόγου New Document.

Χρήση της οθόνης Υποδοχής

Η οθόνη υποδοχής αποτελεί τον πιο γρήγορο τρόπο για να δημιουργήσετε μια νέα σελίδα HTML. Εμφανίζεται όταν κλείνετε όλα τα υπόλοιπα παράθυρα εγγραφών. Για να δημιουργήσετε μια νέα σελίδα από την οθόνη υποδοχής: Όλα τα στοιχεία στην οθόνη υποδοχής είναι σύνδεσμοι. Στην ενότητα Create New (Δημιουργία νέου) πατήστε στην επιλογή HTML. Η εφαρμογή θα δημιουργήσει μια νέα κενή σελίδα. Για να δημιουργήσετε μια νέα σελίδα από το πλαίσιο διαλόγου New Document: Δείξτε στο μενού File/ New. Θα εμφανιστεί το πλαίσιο διαλόγου New Document με ενεργό την καρτέλα Blank Page (κενή σελίδα). Πατήστε για να επιλέξετε μια από τις καρτέλες της αριστερότερης στήλης. Η δεύτερη στήλη θα εμφανίσει τα διαθέσιμα στοιχεία για την καρτέλα που επιλέξατε. Το όνομα της συγκεκριμένης στήλης θα αλλάξει επίσης ώστε να ταυτίζεται με το όνομα της καρτέλας. Πατήστε στο στοιχείου που θέλετε στη δεύτερη στήλη. Πατήστε στο κουμπί Create (Δημιουργία).

Αποθήκευση της σελίδας

Για να αποθηκεύσετε τη σελίδα σας, δείξτε στο μενού File/ save ή save as

15/96

Συμβουλές:  Μη χρησιμοποιείται ποτέ κενά διαστήματα σε ονόματα αρχείων. Χρησιμοποιήστε χαρακτήρες υπογράμμισης ή παύλες αντί για κενό.  Μη χρησιμοποιείτε ειδικούς χαρακτήρες, όπως %, *, >, /  Μη χρησιμοποιείτε κόμματα ή τελείες.  Αποφύγετε να ξεκινάτε με αριθμούς τα ονόματα των αρχείων.  Διατηρήστε τα ονόματα των φακέλων και των αρχείων όσο το δυνατόν μικρότερα.

16/96

ΚΕΦΑΛΑΙΟ 6ο ΕΞΕΡΕΥΝΗΣΗ ΕΡΓΑΛΕΙΩΝ Μετακινήστε τον δείκτη του ποντικιού επάνω από το παράθυρο Εγγράφου και την γραμμή εργαλείων Document. Αφήστε το δείκτη πάνω από κάποιο κουμπί για να δείτε ολόκληρη την περιγραφή του ονόματος του.

Εναλλαγή από μία προβολή σε άλλη

Πατήστε κλικ πάνω από το παράθυρο Εγγράφου και την γραμμή εργαλείων Document εναλλάξ στις προβολές Split (διαίρεσης), Code (Κώδικα), Design (σχεδίασης).

Ετικέτα <body>

Στην κάτω αριστερή γωνία του παραθύρου του Εγγράφου υπάρχει η ετικέτα <body>. Χρησιμοποιήστε τις ετικέτες για να μετακινείστε γρήγορα στην ιεραρχία του κώδικα για να δείτε ποιο στοιχείο επεξεργάζεστε και να μπορείτε πιο εύκολα να επιλέξετε άλλα στοιχεία.

Εμφάνιση – Απόκρυψη της Document Δείξτε View/ Toolbars/ Document

Ο Επιθεωρητής Ιδιοτήτων

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

Εμφάνιση – Απόκρυψη της Properties Δείξτε στο μενού window/ Properties

17/96

Χρήση των Πάνελ

Τα περισσότερα πάνελ του Dreamweaver είναι αγκυρωμένα – συνδεδεμένα σε παράθυρα με καρτέλες – μέσα σε ομάδες πάνελ ανάλογα με τις λειτουργίες τους. Μπορείτε να προσπελάζετε πάνελ μέσα από αυτές τις ομάδες καθώς και από το μενού Window. Η αγκύρωση μεγιστοποιεί την περιοχή εργασίας στην οθόνη σας ενώ σας δίνει γρηγορότερη πρόσβαση στα πάνελ που θέλετε. Κάθε ομάδα πάνελ μπορεί να επεκταθεί ώστε να εμφανίσει όλα τα πάνελ που περιέχει ή να συμπτυχθεί ώστε να φαίνεται μόνο το όνομα της ομάδας. Στο μενού Window τα κρυμμένα πάνελ δεν έχουν σημάδι ελέγχου δίπλα στο όνομά τους. Για να εμφανίσετε ένα κρυμμένο πάνελ, επιλέξτε το από το μενού Window. Αν το πάνελ που θα επιλέξετε ανήκει σε μια ομάδα πάνελ που δεν είναι εκείνη τη στιγμή διαθέσιμη, εμφανίζονται τόσο το πάνελ όσο και η ομάδα που περιέχει το επιλεγμένο. Στην περίπτωση που η ομάδα με το πάνελ της επιλογής σας είναι ορατή αλλά συνεπτυγμένη, αν ενεργοποιήσετε το πάνελ από το μενού Window η ομάδα θα αναπτυχθεί και θα εμφανίσει το επιλεγμένο πάνελ.

18/96

ΚΕΦΑΛΑΙΟ 7ο ΤΙΤΛΟΣ ΣΕΛΙΔΑΣ Για ποιο λόγο χρησιμοποιείτε τίτλο κάθε εγγράφου HTML; Ο τίτλος χρησιμοποιείται για την αναγνώριση του εγγράφου. Εμφανίζεται σε μια γραμμή τίτλου στο φυλλομετρητή, χαρακτηρίζει το περιεχόμενο μιας σελίδας, και εμφανίζεται ως όνομα σελιδοδείκτη σε λίστες Αγαπημένων (Favorites) Είναι μια σύντομη, περιεκτική φράση, που να ξεκινάει με το όνομα της τοποθεσίας και να περιγράφει το σκοπό του εγγράφου. Το Dreamweaver εξ ορισμού δίνει στο αρχείο τον τίτλο Untitled Document, εάν το ξεχάσετε εσείς.

Ορισμός Χρώματος φόντου

Στο Dreamweaver μπορείτε να αλλάξετε εύκολα το χρώμα του φόντου μιας σελίδας, με τη βοήθεια μιας παλέτας χρωμάτων γνωστής ως παλέτας χρωμάτων ασφαλών για τον ιστό. Αυτή η παλέτα είναι μια συλλογή από 216 χρώματα που εμφανίζονται όμοια στους φύλλομετρητές. Modify/ page Properties/ Category (κατηγορία)/ Appearance (Εμφάνιση)/ Background Color Η οθόνη Appearance (Εμφάνιση) του πλαισίου διαλόγου page Properties δεν εμφανίζει προεπιλογές, αν και στο Dreamweaver το λευκό είναι το προεπιλεγμένο χρώμα για το παράθυρο Εγγράφου. Αν δεν ορίσετε χρώμα φόντου, η σελίδα χρησιμοποιεί την προεπιλογή του φυλλομετρητή όταν κάποιος χρήστης ανοίγει τη σελίδα. Επειδή οι προεπιλογές των φυλλομετρητών μπορεί να ποικίλουν, συνιστάται να ορίζετε πάντα το χρώμα φόντου της σελίδας.

19/96

Παρατηρήστε ότι τα δεκαεξαδικά ισοδύναμα των χρωμάτων εμφανίζονται στην κορυφή της παλέτας καθώς μετακινείτε το σταγονόμετρο επάνω από τα δείγματα. Στην HTML, τα χρώματα καθορίζονται σε δεκαεξαδικό κώδικα με βάση τα χρώματα RGB: κόκκινο, πράσινο και μπλε (Red, Green, Blue). Ο δεκαεξαδικός κώδικας είναι ένα αριθμητικό σύστημα με βάση το 16 που χρησιμοποιεί τους αριθμούς 0 εως 9 και τα γράμματα A ως F. Στους εξαψήφιους κωδικούς που χρησιμοποιεί η HTML για την περιγραφή των χρωμάτων, τα πρώτα δύο ψηφία αντιπροσωπεύουν το κόκκινο. Τα δεύτερα δύο το πράσινο. Τα τελευταία δύο το μπλε. Η κατηγορία Appearance (CSS) στο πλαίσιο διαλόγου Page Properties διαθέτει τις παρακάτω επιλογές που εφαρμόζουν στυλ CSS: • Η επιλογή Page Font (Γραμματοσειρά σελίδας) καθορίζει την προεπιλεγμένη οικογένεια γραμματοσειρών που θα χρησιμοποιούν οι ιστοσελίδες σας. • Η επιλογή Size (Μέγεθος) καθορίζει το προεπιλεγμένο μέγεθος γραμματοσειράς. Το Dreamweaver χρησιμοποιεί το συγκεκριμένο μέγεθος εκτός αν αυτό υποσκελίζεται από κάποιο φύλλο CSS.. • Η επιλογή Text color (Χρώμα κειμένου) σας επιτρέπει να καθορίσετε το προεπιλεγμένο χρώμα για το κείμενο. • Η επιλογή Background Color (Χρώμα φόντου) σας δίνει τη δυνατότητα να καθορίσετε το προεπιλεγμένο χρώμα για το φόντο της σελίδας. Copyright© 2009-2012 -SYSTEM- All rights reserved

20/96

• • •

Η επιλογή Background Image (Εικόνα φόντου) σας επιτρέπει να καθορίσετε την εικόνα που θα εμφανίζεται πίσω από όλο το κείμενο και τις εικόνες της σελίδας. Η επιλογή Repeat (Επανάληψη) καθορίζει τον τρόπο με τον οποίο θα εμφανίζεται η εικόνα φόντου αν δεν καλύπτει ολόκληρη τη σελίδα. Η επιλογή Margins (Περιθώρια) σας δίνει τη δυνατότητα να καθορίσετε το αριστερό (Left), το δεξιό (Right), το επάνω (Top) και το κάτω (Bottom) περιθώριο της σελίδας.

Η κατηγορία Appearance (HTML) στο πλαίσιο διαλόγου Page Properties διαθέτει τις παρακάτω επιλογές που υλοποιούνται με σήμανση HTML: • Η επιλογή Background Image (Εικόνα φόντου) σας επιτρέπει να καθορίσετε την εικόνα που θα εμφανίζεται πίσω από όλο το κείμενο και τις εικόνες της σελίδας. • Η επιλογή Text (Κειμένο) σας επιτρέπει να καθορίσετε το χρώμα για το κείμενο. • Η επιλογή links (Σύνδεσμοι) σας επιτρέπει να καθορίσετε το χρώμα για το κείμενο των συνδέσμων. • Η επιλογή Visited links (Χρησιμοποιημένοι Σύνδεσμοι) σας επιτρέπει να καθορίσετε το χρώμα για το κείμενο των συνδέσμων που έχουν χρησιμοποιηθεί. • Η επιλογή Active links (Ενεργοί Σύνδεσμοι) σας επιτρέπει να καθορίσετε το χρώμα για το κείμενο των συνδέσμων όταν πατάτε στο κείμενο με το ποντίκι. • Η επιλογή Margins (Περιθώρια) σας δίνει τη δυνατότητα να καθορίσετε το αριστερό (Left), το δεξιό (Right), το επάνω (Top) και το κάτω (Bottom) περιθώριο της σελίδας.

21/96

ΚΕΦΑΛΑΙΟ 8ο ΚΑΘΟΡΙΣΜΟΣ ΦΥΛΛΟΜΕΤΡΗΤΗ Καθώς αναπτύσσετε ιστοσελίδες, πρέπει συνεχώς να ελέγχετε πως θα φαίνεται η δουλειά σας σε διαφορετικούς φυλλομετρητές όπως ο Internet Explorer και ο Netscape. Ό,τι βλέπετε στο παράθυρο Εγγράφου του Dreamweaver είναι μόνο μια προσέγγιση του τρόπου που θα φαίνονται οι σελίδες. Κάθε φυλλομετρητής εμφανίζει διαφορετικά τις ιστοσελίδες και αν και ορισμένες διαφορές είναι μικρές, κάποιες άλλες ίσως να είναι πολύ σημαντικές. Ίσως παρατηρήσετε μάλιστα διαφορές μεταξύ διαφορετικών εκδόσεων του ίδιου φυλλομετρητή. Όσο περισσότερες δοκιμές κάνετε στην τοποθεσία σας σε πολλούς φυλλομετρητές και λειτουργικά συστήματα, και κάνετε τις κατάλληλες αλλαγές στις σελίδες σας, τόσο πιο βέβαιοι θα είστε ότι οι επισκέπτες τις τοποθεσίας σας θα βλέπουν τις σελίδες όπως εσείς θέλετε να φαίνονται. Το Dreamweaver σας δίνει τη δυνατότητα να προσδιορίζετε ποιους φυλλομετρητές θέλετε να χρησιμοποιήσετε για την προεπισκόπηση. Για να συντομεύσετε τη διαδικασία, μπορείτε να ορίσετε έναν πρωτεύοντα και ένα δευτερεύοντα φυλλομετρητή, με ένα πλήκτρο συντόμευσης για τον καθένα.

Για να κάνετε Προεπισκόπηση Πατήστε στο εικονίδιο Preview in Explorer (Προεπισκόπηση στον explorer) ή πατήστε το λειτουργικό πλήκτρο F12.

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

File (Αρχείο) / Preview in Browser (Προεπισκόπηση στο φυλλομετρητή) / Edit Browser List (Επεξεργασία λίστας φυλλομετρητών). Να θυμάστε με + προσθέτω, ενώ με – αφαιρώ.

22/96

ΚΕΦΑΛΑΙΟ 9ο ΕΙΣΑΓΩΓΗ ΚΑΙ ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ Ορισμός Προτιμήσεων κειμένου

Μπορείτε να προσθέσετε κείμενο σε μια σελίδα, αντιγράφοντας και επικολλώντας το από ένα υπάρχον έγγραφο, Μπορείτε εύκολα να ανοίξετε και το Dreamweaver και την εφαρμογή από την οποία θέλετε να πάρετε περιεχόμενο, έπειτα αντιγράψτε και επικολλήστε ή επιλέξτε και σύρετε το κείμενο ή το στοιχείο που θέλετε μέσα στο Dreamweaver. To Dreamweaver μπορεί επίσης να ανοίξει αρχεία δημιουργημένα σε εφαρμογές επεξεργασίας κειμένου ή σελιδοποίησης, με την προϋπόθεση όρι αυτά τα αρχεία αποθηκεύτηκαν ως αρχεία κειμένου ASCII. Τα αρχεία κειμένου (αρχεία .txt) στο Dreamweaver, ανοίγουν πάντα σε νέο παράθυρο σε προβολή κώδικα. Αφού ανοίξετε ένα αρχείο κειμένου στο Dreamweaver, μπορείτε να αντιγράψετε και να επικολλήσετε το κείμενο που θέλετε σε κάποιο άλλο έγγραφο. Για να εισάγετε σωστά κείμενο από αρχεία ASCII και να διατηρήσετε τις αλλαγές γραμμών πρέπει να αλλάξετε τις προτιμήσεις του μενού Line Break Type (Τύπος αλλαγής γραμμής) ώστε να ταιριάζει στο λειτουργικό σύστημα όπου δημιουργήθηκαν τα αρχεία κειμένου που θέλετε να εισαγάγετε. Δείξτε Edit (Επεξεργασία)/ Preferences (Προτιμήσεις) για να ανοίξετε το πλαίσιο διαλόγου Preferences, επιλέξτε την κατηγορία Code Format (Μορφή κώδικα) από τη λίστα κατηγοριών και από το μενού Line Break Type, επιλέξτε CR LF/ΟΚ

Προσθήκη αλλαγής γραμμής Shift + Enter

Εισαγωγή κειμένου από το Word στο Dreamweaver Edit/ Copy – Edit/ Paste Control + C / Control + V

Προσθήκη Μη Συλλαβιζόμενου Διαστήματος

Η HTML αναγνωρίζει μόνο ένα κοινό κενό διάστημα. Για πολλά κενά διαστήματα χρησιμοποιείται ένας ειδικός χαρακτήρας που λέγεται μη συλλαβιζόμενο κενό διάστημα (non-breaking space). Για να προσθέσετε μη συλλαβιζόμενα διαστήματα πατήστε το συνδυασμό πλήκτρων του πληκτρολογίου Control + Shift + Διάστημα όσες φορές θέλετε. Copyright© 2009-2012 -SYSTEM- All rights reserved

23/96

ΚΕΦΑΛΑΙΟ 10ο ΒΑΣΙΚΗ ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ Μπορείτε να προσθέσετε κείμενο στο έγγραφο, πληκτρολογώντας το απευθείας στη σελίδα. Στην HTML έχετε στη διάθεσή σας μια ποικιλία επιλογών βασικής μορφοποίησης κειμένου. Οι περισσότερες μορφοποιήσεις HTML είναι εξαιρετικά περιορισμένες – δεν έχετε μεγάλο έλεγχο στο μέγεθος, τις αποστάσεις και τη στοίχιση.

Στοίχιση κειμένου

Οι επιλογές στοίχισης που έχετε στη διάθεσή σας είναι η προεπιλογή (χωρίς στοίχιση), Align Left (Στοίχιση αριστερά), Align Center (Στοίχιση στο κέντρο), Align Right (Στοίχιση Δεξιά), Justify (Πλήρης στοίχιση). Η προεπιλογή είναι ίδια με την αριστερή στοίχιση. Εφαρμόστε στοίχιση κειμένου Από τη γραμμή Επιθεωρητή ιδιοτήτων Από το μενού Format / Align/ Left – Right – Center - Justify

Εσοχές κειμένου

Οι εσοχές εφαρμόζονται σε ολόκληρες παραγράφους και δεν μπορείτε να προσθέσετε εσοχή μόνο στην πρώτη γραμμή αν δεν χρησιμοποιήσετε CSS. Όταν χρησιμοποιείτε το κουμπί Text Indent (Εσοχή κειμένου), το κείμενο αποκτά εσοχές και στο δεξιό και στο αριστερό περιθώριο της σελίδας. Δεν μπορείτε να ελέγξετε το μέγεθος της εσοχής επειδή αυτό καθορίζεται από το φυλλομετρητή και μπορεί να διαφέρει από φυλλομετρητή σε φυλλομετρητή. Εφαρμόστε Εσοχές κειμένου Από τη γραμμή Επιθεωρητή ιδιοτήτων Από το μενού Format / Indent – Outdent

24/96

Δημιουργία Λιστών

Το Dreamweaver δημιουργεί τρεις βασικούς τύπους λιστών: διατεταγμένες, μη διατεταγμένες και ορισμών. Μια διατεταγμένη λίστα ή αριθμημένη λίστα (order list) αποτελείται από στοιχεία που είναι αριθμημένα ή αλφαβητικά. Μια μη διατεταγμένη λίστα (unordered list) συχνά ονομάζεται λίστα με κουκκίδες (bulleted list) επειδή κάθε στοιχείο της λίστας έχει μια κουκκίδα πριν από αυτό. Το σύμβολο της κουκκίδας που εμφανίζει εξ’ ορισμού το Dreamweaver μπορεί να αλλάξει και να γίνει δίσκος, κύκλος ή τετράγωνο. Οι λίστες ορισμών (definition lists) αποτελούνται από όρους και τους ορισμούς τους. Και στους τρεις τύπους λίστας, κάθε στοιχείο πρέπει να έχει τη δική του παράγραφο ώστε να είναι σωστά μορφοποιημένη η λίστα. Order List (αριθμημένη λίστα) Unorder List (μη διατετεγμένη λίστα) ή αλλιώς Bulleted List (λίστα με κουκκίδες) Definition List (Λίστες ορισμών) Εφαρμόστε • από τον Επιθεωρητή Ιδιοτήτων • Μενού Formats/ List/ Definition List - Unorder List - Order List Format/ List/ Properties List Type (τύπος λίστας) Style (Στυλ της λίστας) Start Count (έναρξη αρίθμησης)

Ένθετες λίστες (Nested Lists)

Οι ένθετες λίστες είναι λίστες μέσα σε άλλες λίστες Για να ενθέσετε το στοιχείο που θα δημιουργήσετε, πατήστε στο κουμπί Text Indent του Επιθεωρητή Ιδιοτήτων.

Μορφοποίηση Χαρακτήρων

Η πιο συνηθισμένη μορφοποίηση του κειμε΄νου είναι η έντονη ή η πλάγια γραφή και φυσικά το Dreamweaver υποστηρίζει αυτή τη λειτουργία είτε μέσω σήμανσης HTML είτε ενός κανόνα CSS. Μπορεί να εφαρμόσει πολλά άλλα στυλ κειμένου, μερικά από τα οποία αφορούν εξειδικευμένες χρήσεις. Οι επιλογές που υπάρχουν είναι: Bold ( έντονα) Italic ( Πλάγιο)

25/96

Underline (Υπογραμμισμένο) Strikethrough ( Το κείμενο εμφανίζεται με μια οριζόντια γραμμή να το διατρέχει στο μέσο του) Teletype (Το κείμενο εμφανίζεται συνήθως με γραμματοσειρά σταθερού πλάτους όπως η Courier) Emphasis (Το κείμενο εμφανίζεται με πλάγια στην οθόνη. Κάνει τα βοηθήματα ανάγνωσης να το τονίζουν) Strong (Το κείμενο εμφανίζεται με έντονα στην οθόνη. Κάνει τα βοηθήματα ανάγνωσης να το τονίζουν) Code (Απεικονίζει κώδικα προγραμματισμού, συνήθως με γραμματοσειρά σταθερού πλάτους) Variable (Χρησιμοποιείται για τη σήμανση των μεταβλητών στον κώδικα προγραμμάτων. Εμφανίζεται συνήθως με γραμματοσειρά σταθερού πλάτους. Sample (Προορίζεται για δείγματα της εξόδου κάποιου προγράμματος υπολογιστή ή σεναρίου. Εμφανίζεται συνήθως με γραμματοσειρά σταθερού πλάτους) Keyboard (Προορίζεται για την απεικόνιση κειμένου που θα πληκτρολογούσε κάποιος χρήστης. Εμφανίζεται συνήθως με γραμματοσειρά σταθερού πλάτους) Citation (Χρησιμοποιείται για τη σήμανση παραπομπών και αναφορών. Εμφανίζεται συνήθως με πλάγια γραφή) Definition (Χρησιμοποιείται για τη σήμανση της πρώτης καθοριστικής χρήσης ενός όρου σε κάποιο έγγραφο. Εμφανίζεται συνήθως με πλάγια γραφή) Deleted (Χρησιμοποιείται για τη σήμανση κειμένου που έχει διαγραφεί. Εμφανίζεται με τον ίδιο τρόπο όπως η διάκριτη διαγραφή. Inserted (Χρησιμοποιείται για τη σήμανση κειμένου που έχει προστεθεί. Εμφανίζεται με τον ίδιο τρόπο όπως το υπογραμμισμένο κείμενο). Εφαρμόστε ένα στυλ κειμένου από το μενού Format/ Style

Αλλαγή Γραμματοσειράς

Εφαρμόστε από τον επιθεωρητή Ιδιοτήτων ή από το μενού Format/ Font

Αλλαγή Γραμματοσειράς Σελίδας

Δείξτε στο μενού Modify/ Page Properties/ Appearance/ Page Font

Αλλαγή Μεγέθους Γραμματοσειράς

Στην HTML, οι διαθέσιμες επιλογές μεγεθών γραμματοσειρών είναι περιορισμένες. Το μέγεθος του κειμένου ορίζεται ως χαρακτηριστικό της ετικέτας <font>. Για να κάνετε αλλαγή μεγέθους γραμματοσειράς, από τον Επιθεωρητή Ιδιοτήτων και την επιλογή CSS, δείξτε στο μενού size (Μέγεθος) και επιλέξτε μια τιμή.

26/96

Ορισμός Χρώματος Γραμματοσειράς

• Δείξτε στο μενού Modify/ Page Properties/ Appearance/ Text Color (χρώμα κειμένου) • Από το κουμπί Text Color του Επιθεωρητή Ιδιοτήτων

27/96

ΚΕΦΑΛΑΙΟ 11ο ΠΡΟΣΘΗΚΗ ΕΙΔΙΚΩΝ ΧΑΡΑΚΤΗΡΩΝ Όταν δουλεύετε στο Dreamweaver, μερικές φορές πρέπει να χρησιμοποιήσετε χαρακτήρες που δεν είναι προσπελάσιμοι απευθείας από το πληκτρολόγιο. Αυτοί οι ειδικοί χαρακτήρες έχουν κωδικούς HTML ή εναλλακτικά πλήκτρα συντόμευσης που ίσως είναι δύσκολο να θυμάται κανείς.

Εισαγωγή ειδικών χαρακτήρων

Επιλέξτε Text στη γραμμή εργαλείων Insert. Πατήστε στο αναδυόμενο μενού Special Characters και μετά τον ειδικό χαρακτήρα που θέλετε. Μπορείτε επίσης να δείξετε Insert/ HTML/ Special characters και διαλέξτε τον ειδικό χαρακτήρα από το υπομενού.

Αν ο χαρακτήρας που θέλετε δεν υπάρχει στο μενού επιλέξτε Other Characters (Άλλοι χαρακτήρες) από το αναδυόμενο υπομενού στο πάνελ Insert ή επιλέξτε Other (Άλλοι) από Copyright© 2009-2012 -SYSTEM- All rights reserved

28/96

το υπομενού Insert/ HTML/ Special Characters. Θα εμφανιστεί το πλαίσιο διαλόγου Insert Other Character (Εισαγωγή άλλου χαρακτήρα). Πατήστε στο χαρακτήρα που θέλετε να χρησιμοποιήσετε και ύστερα πατήστε στο κουμπί ΟΚ για να κλείσετε το πλαίσιο διαλόγου.

Προσθήκη Οριζόντιων διαχωριστικών Γραμμών

Μια οριζόντια (διαχωριστική) γραμμή (horizontal rule) είναι μια γραμμή που διατρέχει κατά πλάτος τη σελίδα και διαχωρίζει τις ενότητες του περιεχομένου. Τοποθετήστε το σημείο εισαγωγής στη θέση που θέλετε να προσθέσετε τη γραμμή. Στην κατηγορία Common της γραμμής εργαλείων Insert, πατήστε στο κουμπί Horizontal Rule (Οριζόντια γραμμή).

Επεξεργασία οριζόντιας διαχωριστικής γραμμής

Για να επεξεργαστείτε την οριζόντια διαχωριστική γραμμή, μεταφερθείτε στη γραμμή ιδιοτήτων. Οι επιλογές που έχετε είναι: W (πλάτος) H (ύψος) Align (Στοίχιση) Shading (Σκίαση) Μπορείτε επίσης να στοιχίσετε τη γραμμή οριζόντια, επιλέγοντας Left (αριστερά), Center (κέντρο) ή Right (δεξιά) από το μενού Align (Στοίχιση). Η προεπιλεγμένη στοίχιση για τις οριζόντιες γραμμές είναι στο κέντρο.

29/96

Αυτόματη Προσθήκη Ημερομηνίας

Για να παρακολουθείτε την ημερομηνία της τελευταίας τροποποίησης μιας σελίδας της τοποθεσίας σας ή ίσως θέλετε να βλέπουν οι επισκέπτες σας πότε ενημερώθηκαν τελευταία φορά οι πληροφορίες στη σελίδα. Το Dreamweaver σας δίνει τη δυνατότητα να τοποθετείτε την ημερομηνία και την ώρα στις σελίδες σας. Το Dreamweaver μπορεί να ενημερώνει αυτόματα την ημερομηνία και την ώρα κάθε φορά που αποθηκεύετε. Από την κατηγορία Common της γραμμής εργαλείων Insert πατήστε date (Ημερομηνία) Ανοίγει το πλαίσιο διαλόγου Insert Date (Εισαγωγή ημερομηνίας) Day Format (Μορφή Ημέρας) Date Format (Μορφή ημερομηνίας) Time Format (Μορφή ώρας) Update automatically on Save (Αυτόματη ενημέρωση κατά την αποθήκευση) . Η δυνατότητα αυτή είναι πολύ χρήσιμη αν θέλετε να ξέρουν οι επισκέπτες σας πότε ενημερώθηκε η σελίδα για τελευταία φορά.

30/96

ΚΕΦΑΛΑΙΟ 12ο ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΑΣ ΦΟΝΤΟΥ Μια εικόνα φόντου είναι γενικά μια μικρή εικόνα που τοποθετείται σε παράθεση (tiled) στη σελίδα σας, επαναλαμβανόμενη στο πλάτος και το ύψος του παραθύρου του φυλλομετρητή. Μια τέτοια εικόνα φόντου δεν επηρεάζει την ύπαρξη (ή την έλλειψη) ράβδων κύλισης στη σελίδα σας. Μπορείτε να ορίσετε και χρώμα φόντου και εικόνα φόντου για τις σελίδες σας. Σε αργές συνδέσεις ή παλαιότερους αργούς φυλλομετρητές, ίσως δείτε το χρώμα φόντου να εμφανίζεται πρώτο – ένας σοβαρός λόγος για να ορίζετε χρώμα φόντου ακόμη και αν σχεδιάζετε να χρησιμοποιήσετε εικόνα φόντου. Αφού φορτωθεί, η εικόνα φόντου παραμένει στην οθόνη επικαλύπτοντας το χρώμα φόντου.

Χρήση Εικόνας Φόντου

Δείξτε στο μενού Modify/ Page Properties/ Appearance/ Background Image

Τοποθέτηση Εικόνων

Το Dreamweaver μπορεί να προσθέσει στην ιστοσελίδα σας εικόνες που προέρχονται από τον τοπικό δίσκο ή που προέρχονται από τον τοπικό σας δίσκο ή που υπάρχουν ήδη στην τοποθεσία Ιστού. Εξ ορισμού, το Dreamweaver σας προτρέπει να προσθέσετε εναλλακτικό κείμενο (alternate text) στην εικόνα, δηλαδή κείμενο το οποίο θα διαβάζεται δυνατά από τα προγράμματα ανάγνωσης οθόνης που χρησιμοποιούν άτομα με προβλήματα όρασης. Αν στις σελίδες σας έχετε εικόνες χωρίς εναλλακτικό κείμενο, είναι εύκολο να το προσθέσετε. Φυσικά, μπορείτε να διαγράψετε με ευκολία εικόνες από τη σελίδα. Οι πιο συνηθισμένες υποστηριζόμενες μορφές γραφικών στον Ιστό είναι η GIF και η JPEG. Όταν αποφασίζετε αν θα αποθηκεύσετε ένα γραφικό ως GIF ή JPEG, επιδιώξτε την υψηλότερη ποιότητα και το μικρότερο δυνατό μέγεθος αρχείου. Για να εισάγετε μία εικόνα, τοποθετήστε το σημείο εισαγωγής στη θέση που θέλετε και δείξτε • Καρτέλα Common, της γραμμής εργαλείων Insert / Images • Μενού Insert/ Image

Καθορισμός Ιδιοτήτων εικόνας

Εκτός από τη στοίχιση, υπάρχουν και άλλες ιδιότητες που μπορείτε να καθορίσετε για τις εικόνες μέσω του Επιθεωρητή Ιδιοτήτων. • Η ιδιότητα ID (αναγνωριστικό) σας επιτρέπει να δώσετε στην εικόνα ένα όνομα. Χρησιμοποιείτε το όνομα για να αναφερθείτε στην εικόνα μέσα σε σενάρια, και πρέπει να καταχωρίσετε ένα όνομα ώστε τα σενάρια να μπορούν να χειριστούν την Copyright© 2009-2012 -SYSTEM- All rights reserved

31/96

• • • • • • • • • • •

•

εικόνα, όπως στην περίπτωση ενός εφέ εναλλαγής (rollover). Δεν μπορείτε να χρησιμοποιήσετε κενά διαστήματα ή σημεία στίξης στο όνομα της εικόνας. Η Ιδιότητα W (width) είναι το πλάτος. Η Ιδιότητα H (height) είναι το ύψος). Η Ιδιότητα Src (Source – Προέλευση) δείχνει τη διαδρομή προς το αρχείο της εικόνας στην τοποθεσία σας. Η Ιδιότητα Link (Σύνδεσμος) εμφανίζει τον προορισμό αν η εικόνα διαθέτει σύνδεσμο προς κάποιο URL. Η Ιδιότητα Alt Δείχνει το εναλλακτικό κείμενο. Η Ιδιότητα Class εμφανίζει την κλάση CSS που έχει εφαρμοστεί στην εικόνα (αν υπάρχει) Η Ιδιότητα Edit (Επεξεργασία) περιλαμβάνει κουμπιά που σας δίνουν την δυνατότητα να επεξεργαστείτε την εικόνα με κάποιο εξωτερικό πρόγραμμα. Η Ιδιότητα Map (χάρτης) περιλαμβάνει ένα πεδίο και τέσσερα εργαλεία που σας επιτρέπουν να προσθέσετε έναν εικονοχάρτη. Η Ιδιότητα V Space (Κατακόρυφος χώρος) σας δίνει τη δυνατότητα να καθορίσετε κατακόρυφα περιθώρια (σε πίξελ) επάνω και κάτω από την εικόνα. Η Ιδιότητα H Space (Οριζόντιος χώρος) σας επιτρέπει να καθορίσετε οριζόντια περιθώρια (σε πίξελ) στη δεξιά και την αριστερή πλευρά της εικόνας. Η Ιδιότητα Target (Προορισμός) προσδιορίζει το πλαίσιο ή το παράθυρο στο οποίο θα φορτώνει ο προορισμός ενός συνδέσμου. Το αναδυόμενο μενού Target περιλαμβάνει τα ονόματα όλων των πλαισίων στο τρέχον πλαισιοσύνολο. Υπάρχουν 4 ακόμα πιθανοί προορισμοί. Ο _blank φορτώνει το συνδεδεμένο αρχείο σε ένα νέο παράθυρο φυλλομετρητή. Ο _parent φορτώνει το συνδεδεμένο αρχείο στο γονικό πλαισιοσύνολο. Ο _self φορτώνει το συνδεδεμένο αρχείο στο ίδιο πλαίσιο ή παράθυρο με το σύνδεσμο. Ο _top φορτώνει το συνδεδεμένο αρχείο στο πλήρες παράθυρο του φυλλομετρητή και αφαιρεί όλα τα πλαίσια. Η Ιδιότητα Original (πρωτότυπο) δείχνει τη θέση του πρωτότυπου αρχείου που αποτελεί τη βάση για την προεπιλεγμένη εικόνα.

Προσθήκη Περιγράμματος σε εικόνα

Ορισμένες φορές θα χρειαστεί να “αποσπάσετε” μια εικόνα από το φόντο για να την κάνετε να ξεχωρίζει. Ένας τρόπος να δημιουργήσετε αυτό το εφέ είναι να προσθέσετε περίγραμμα στην εικόνα. Ένα περίγραμμα μπορεί να τραβήξει την προσοχή σε μια εικόνα και να δώσει ένα συγκεκριμένο ύφος σε μια τοποθεσία. Ορισμένες φορές το περίγραμμα ίσως δηλώνει σύνδεσμο. Όταν αναθέσετε σύνδεσμο σε εικόνα, το χρώμα περιγράμματος θα είναι το προεπιλεγμένο Link Color (Χρώμα συνδέσμων) που καθορίστηκε στο πλαίσιο διαλόγου Page Properties Από τον Επιθεωρητή Ιδιοτήτων καταχωρίστε μια τιμή στο πεδίο Boarder (περίγραμμα)

32/96

 Για να αλλάξετε χρώμα στο περίγραμμα με επιλεγμένη την εικόνα, μεταφερθείτε στο παράθυρο που φαίνεται ο κώδικας. Μεταφερθείτε στο σημείο που αναφέρετε στην εικόνα, μετά τα χαρακτηρίστηκα της εικόνας τοποθετήστε το δρομέα και πατήστε κενό. Από το πτυσσόμενο μενού που θα εμφανιστεί, διπλοπατήστε στην επιλογή Style και από το επόμενο πτυσσόμενο μενού που θα εμφανιστεί διπλοπατήστε στην επιλογή Border - Color, από το πτυσσόμενο μενού των χρωμάτων επιλέξτε το χρώμα που θέλετε και γυρίστε σε προβολή σχεδίασης για να δείτε το αποτέλεσμα.

Εναλλακτικό Κείμενο σε Εικόνες

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

Alt

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

33/96

ΚΕΦΑΛΑΙΟ 13ο ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΑΣ ΑΠΟ ΤΟ ASSETS Το πάνελ Assets (Πόροι σας δίνει τη δυνατότητα να οργανώνετε τα περιεχόμενα της τοποθεσίας σας μέσα από το Dreamweaver. Ίσως είναι δύσκολο να διαχειρίζεστε όλες τις εικόνες σας, ειδικά αν επεξεργάζεστε μια μεγάλη τοποθεσία. Το πάνελ Assets σας παρέχει έναν τρόπο να παρακολουθείτε αυτές τις εικόνες. Μπορείτε να χρησιμοποιήσετε το πάνελ Assets με δύο τρόπους: Μπορείτε να το εμφανίσετε με τη λίστα Site (Τοποθεσία), που σας δίνει μια πλήρη λίστα των εικόνων στην τοποθεσία σας ή να το εμφανίσετε με τη λίστα Favorites (Αγαπημένα), που σας δείχνει μόνο τις εικόνες που σημάνατε ως “αγαπημένες”. Και οι δύο προβολές σας επιτρέπουν να προσθέσετε μια επιλεγμένη εικόνα στη σελίδα σας.

Για να εμφανίσετε το πάνελ Assets Δείξτε στο μενού Window/ Assets.

Εισαγωγή Εικόνας από το πάνελ Assets

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

34/96

Αν δεν εμφανίζεται ήδη, πατήστε στην καρτέλα για το πάνελ Assets ή επιλέξτε Window/ Assets. Πατήστε στο ραδιοπλήκτρο Site στην κορυφή του πάνελ Assets. Οι εικόνες της τοποθεσίας Ιστού θα εμφανιστούν στη λίστα των πόρων. Πατήστε στην εικόνα που θέλετε να προσθέσετε. Στο τμήμα προεπισκόπησης του πάνελ Assets, θα εμφανιστεί μια προεπισκόπηση της εικόνας. Πατήστε στο κουμπί Insert (Προσθήκη) στη βάση του πάνελ Assets ή σύρετε την εικόνα από τη λίστα πόρων μέσα στο έγγραφο.

Προσθήκη στη λίστα Αγαπημένα

Η τοποθέτηση εικόνων, στη λίστα με τα Αγαπημένα (Favorites) μπορεί να σας εξοικονομήσει χρόνο. Μπορείτε να προσθέσετε οποιαδήποτε εικόνα περιλαμβάνεται στην τοποθεσία, στη λίστα με τα Αγαπημένα σας. Κάθε τοποθεσία έχει τη δική της λίστα Αγαπημένων. Αυτή η λίστα είναι κενή όταν αρχίζετε να χρησιμοποιείτε το Dreamweaver. Λίστα Site (Τοποθεσία) του πάνελ Assets, επιλέξτε την εικόνα / πατήστε Add to Favorites (Προσθήκη στα Αγαπημένα)

Δημιουργία Φακέλου στα Αγαπημένα Εικονίδιο Images / Favorite (Αγαπημένα)/ Πατήστε Φάκελος Αγαπημένων)

New Favorites Folder (Νέος

Προσθήκη εικόνας μέσα σε φάκελο στα Αγαπημένα

Σύρετε την εικόνα που θέλετε μέσα στο φάκελο των αγαπημένων

35/96

ΚΕΦΑΛΑΙΟ 14ο ΡΟΗ ΚΕΙΜΕΝΟΥ ΓΥΡΩ ΑΠΟ ΕΙΚΟΝΕΣ Όπως και για το κείμενο, οι εικόνες μπορούν να στοιχηθούν στην αριστερή πλευρά, στη μέση ή στη δεξιά πλευρά της σελίδας. Επίσης, μπορείτε να ελέγξετε τον τρόπο με το κείμενο αναδιπλώνεται γύρω από τις εικόνες. Στον επιθεωρητή Ιδιοτήτων, υπάρχουν τέσσερις ρυθμίσεις που μπορείτε να χρησιμοποιήσετε για κατακόρυφη στοίχιση: Default (προεπιλεγμένη), Bottom (Κάτω), Middle (μέσο) και Top (Επάνω). Δύο ρυθμίσεις ελέγχουν την οριζόντια στοίχιση: Left (αριστερή) και Right (δεξιά).

Προσαρμογή του χώρου γύρω από μια εικόνα Στον Επιθεωρητή Ιδιοτήτων, πληκτρολογήστε μια τιμή στο πεδίο H Space και enter. Πληκτρολογήστε μια τιμή στο πεδίο V Space

και enter.

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

Προσθήκη Δεσμευτικού Θέσης Εικόνας

• Στην κατηγορία Common / Images/Image Placeholder (Δεσμευτικό θέσης εικόνας) • Μενού Insert/ Image Objects/ Image Placeholders •

Πεδίο Name (όνομα) Πεδία Width (πλάτος) & Height (ύψος) Πεδία Alternate text

36/96

Εισαγωγή εικόνας σε Δεσμευτικό Θέσης

Αν δεν έχετε την τελική εικόνα, μπορείτε να προσθέσετε ένα δεσμευτικό θέσης γι’ αυτή. Ένα δεσμευτικό θέσης (placeholder) μπορεί να προστεθεί και να χρησιμοποιηθεί για να δείξει περίπου πως θα φαίνεται η τελική εικόνα στη σελίδα σε σχέση με κείμενο, πίνακες ή άλλα στοιχεία. Για να εισάγετε ένα δεσμευτικό εικόνας, Στην κατηγορία Common της γραμμής εργαλείων Insert, πατήστε στο μενού Image και διαλέξτε την επιλογή Image Placeholder (Δεσμευτικό θέσης εικόνας). Για να εισάγετε εικόνα στο δεσμευτικό, διπλοπατήστε στο δεσμευτικό και εντοπίστε την εικόνα.

Ρύθμιση προτιμήσεων επεξεργασίας εικόνας

Καθώς δημιουργείτε ιστοσελίδες με το Dreamweaver, ίσως διαπιστώσετε ότι πρέπει να τροποποιήσετε τις εικόνες που χρησιμοποιείτε. Το Dreamweaver διευκολύνει αυτή τη διαδικασία παρέχοντας σας ένα γρήγορα τρόπο να ανοίξετε την εικόνα στο πρόγραμμα που θα καθορίσετε. Edit/ Preferences / File Types/ Editors (Τύποι αρχείων/ Προγράμματα επεξεργασίας) από τη λίστα Category του πλαισίου Preferences/ επιλέξτε .jpg από τη λίστα Extensions (Προεκτάσεις). Πατήστε στο κουμπί (+) επάνω από τη λίστα Editors και επιλέξτε ένα πρόγραμμα επεξεργασίας εικόνων, π.χ. Program Files/ Adobe/ Photoshop. Make Primary (Πρωτεύον)

Βασική Επεξεργασία Εικόνων

Ξάκρισμα (crop) Πατήστε στο εργαλείο

Crop (Ξάκρισμα) του επιθεωρητή ιδιοτήτων.

37/96

Φωτεινότητα και Αντίθεση (Brightness & Contrast) Πατήστε στο εικονίδιο επιθεωρητή ιδιοτήτων.

Brightness & Contrast (Φωτεινότητα και Αντίθεση) του

Όξυνση Sharpen Πατήστε στο εικονίδιο

Sharpen (Όξυνση) του επιθεωρητή ιδιοτήτων.

38/96

ΚΕΦΑΛΑΙΟ 15ο ΠΡΟΣΘΗΚΗ ΚΙΝΟΥΜΕΝΩΝ ΕΙΚΟΝΩΝ FLASH Με το Flash, μπορείτε να δημιουργείτε διανυσματικά γραφικά, κινούμενες εικόνες και ταινίες. Μπορείτε να προσθέσετε κινούμενες εικόνες Flash στα έγγραφά σας όσο εύκολα προσθέτετε οποιαδήποτε ψηφιογραφική εικόνα, με την προϋπόθεση να υπάρχει η κινούμενη εικόνα. Δεν μπορείτε να δημιουργήσετε τέτοια είδη κινούμενων εικόνων απευθείας μέσα στο Dreamweaver – πρέπει να χρησιμοποιήσετε το Flash. Για να προσθέσετε μια κινούμενη εικόνα Flash από τη γραμμή εργαλείων Insert και την κατηγορία Media επιλέξτε SWF

. Εντοπίστε το αρχείο Flash για να το εισάγετε.

Μεταφερθείτε στο Properties (επιθεωρητή ιδιοτήτων), με επιλεγμένη την κινούμενη εικόνα Flash: Loop (Επανάληψη) Autoplay (Αυτόματη Αναπαραγωγή).

Αναπαράγετε το δεσμευτικό θέσης των κινούμενων εικόνων Επιλέξτε το δεσμευτικό θέσης που περιέχει την κινούμενη εικόνα Flash. Πατήστε στο κουμπί Play (Αναπαραγωγή) στον Επιθεωρητή Ιδιοτήτων. Πατήστε επάνω στην κινούμενη εικόνα Flash και από τις λαβές, αλλάξτε της το μέγεθος είτε από τις λαβές, είτε από τον επιθεωρητή ιδιοτήτων W (Πλάτος) και H (Ύψος).

39/96

ΚΕΦΑΛΑΙΟ 16ο ΔΗΜΙΟΥΡΓΙΑ ΣΥΝΔΕΣΜΩΝ HTML (Hypertext Markup Language - Γλώσσα Σήμανσης Υπερ-κειμένου)

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

Ορισμός χρώματος και μορφής συνδέσμου Modify/ Page Properties/ Links.

Link Color (Χρώμα συνδέσμου) Visited Links (Χρησιμοποιημένοι Σύνδεσμοι) Rollover Links (Σύνδεσμοι εναλλαγής εικόνων)

40/96

Active Links (Ενεργοί σύνδεσμοι)

Δημιουργία Συνδέσμων Υπερ-κειμένου

Επιλέξτε τη λέξη μεταφερθείτε στον επιθεωρητή ιδιοτήτων/ πεδίου Link/ browse for file (Αναζήτηση αρχείου)

Μενού Target (Προορισμός)

_blank (Κενός), φορτώνει το συνδεδεμένο έγγραφο σε νέο ανώνυμο παράθυρο _parent (Γονικός), φορτώνει το συνδεδεμένο έγγραφο μέσα στο γονικό σύνολο πλαισίων ή στο γονικό παράθυρο που περιέχει το σύνδεδμο _Self (Ίδιος), φορτώνει το συνδεδεμένο έγγραφο μέσα στο ίδιο γονικό πλαίσιο ή παράθυρο με το σύνδεσμο. Αυτό ο προορισμός είναι ίδιος με τον προεπιλεγμένο _top (Επάνω), φορτώνει το συνδεδεμένο έγγραφο σε ολόκληρο το παράθυρο φυλλομετρητή αφαιρώντας όλα τα πλαίσια

Δημιουργία Συνδέσμων Γραφικών

Επιλέξτε το γραφικό μεταφερθείτε στον επιθεωρητή ιδιοτήτων/ πεδίου Link/ browse for file (Αναζήτηση αρχείου)

Επώνυμη Αγκύρωση

Όταν ένα έγγραφο είναι μεγάλο ή έχει πολλές ενότητες, ίσως χρειαστεί να δημιουργήσετε μια σειρά από συνδέσμους που θα μεταφέρουν το χρήστη σε συγκεκριμένα σημεία μέσα στο έγγραφο. Αυτή η τεχνική αντικαθιστά την ανάγκη να χρησιμοποιεί ο χρήστης εκτεταμένα τη ράβδο κύλισης για να βλέπει μεγάλα τμήματα κειμένου. Μια επώνυμη αγκύρωση (named anchor) σημειώνει το σημείο της σελίδας όπου θα μεταφέρει το χρήστη ένας σύνδεσμος. Για να χρησιμοποιήσετε μια αγκύρωση, πρέπει να δημιουργήσετε τουλάχιστον δύο στοιχεία: την ίδια την αγκύρωση και το σύνδεσμο προς την αγκύρωση. Τοποθετήσετε το σημείο εισαγωγής στο σημείο που θέλετε την επώνυμη αγκύρωση. Στην κατηγορία Common του πάνελ Insert πατήστε στο κουμπί Named Anchor (Επώνυμη αγκύρωση) για να ανοίξετε το πλαίσιο διαλόγου Named Anchor.

41/96

Επιλέξτε ένα όνομα για την αγκύρωση το οποίο θα είναι μοναδικό στη σελίδα. Μην ξεχνάτε ότι η αγκύρωση θα αποτελεί τμήμα μιας διεύθυνσης URL, οπότε μπορεί να περιέχει μόνον έγκυρους χαρακτήρες: δεν επιτρέπονται τα κενά διαστήματα, σύμβολα, ερωτηματικά κλπ. Επιλέξτε το σημείο που θέλετε να γίνει η σύνδεση και στο πεδίο Link του Επιθεωρητή Ιδιοτήτων πληκτρολογήστε # ακολουθούμενο από το όνομα της αγκύρωσης.

42/96

ΚΕΦΑΛΑΙΟ 17ο ΔΗΜΙΟΥΡΓΙΑ ΕΙΚΟΝΟΧΑΡΤΩΝ Έχετε επίσης τη δυνατότητα να διαιρέσετε την εικόνα σε πολλές συνδεδεμένες περιοχές που ονομάζονται θερμά σημεία (hotspots) Χρησιμοποιώντας έναν εικονοχάρτη (image map) για την τοποθέτηση των μεμονωμένων θερμών σημείων στην εικόνα. Αυτά τα θερμά σημεία δεν πρέπει να είναι αναγκαστικά ορθογώνια, άλλα μπορούν να έχουν και άλλα σχήματα.

Εργαλείο Εργαλείο

Oval Hotspot (Οβάλ Θερμό σημείο) Rectangle Hotspot (Ορθογώνιο Θερμό σημείο)

Εργαλείο

Polygon Hotspot (Πολυγωνικό Θερμό σημείο)

Επιλέξτε το γραφικό που θέλετε. Από τον επιθεωρητή επιλέξτε το θερμό σημείο που θέλετε. Πατήστε και σύρετε επάνω στο γραφικό για να το εισάγετε. Εμφανίζεται μια ημιδιαφανής τυρκουάζ περιοχή με λαβές. Και ο επιθεωρητής ιδιοτήτων εμφανίζει τις ιδιότητες του θερμού σημείου. Μεταφερθείτε στον επιθεωρητή ιδιοτήτων/ πεδίου Link/ browse for file (Αναζήτηση αρχείου).

Προσθήκη Συνδέσμου Ηλεκτρονικού Ταχυδρομείου

Η παροχή ενός συνδέσμου προς μια διεύθυνση ηλεκτρονικού ταχυδρομείου (e-mail) διευκολύνει τους επισκέπτες που έρχονται σε επαφή μαζί σας από μια ιστοσελίδα. Πρέπει πάντα να περιλαμβάνετε κάποια μέθοδο επαφής που να επιτρέπει στους επισκέπτες να αλληλογραφούν ή γενικά να επικοινωνούν με κάποιο στον οργανισμό σας. Email Link της κατηγορίας Common, στη γραμμή εργαλείων Insert Link ή επιλέξτε Insert/ Email Link.

43/96

Συμπληρώστε το πεδίο κειμένου με το κείμενο που θέλετε να εμφανίζεται στο φυλλομετρητή και στο πεδίο Email πληκτρολογήστε τη διεύθυνση ηλεκτρονικού ταχυδρομείου και πατήστε ΟΚ.

44/96

ΚΕΦΑΛΑΙΟ 18ο ΣΧΕΔΙΑΣΜΟΣ ΜΕ ΠΙΝΑΚΕΣ Ένας τρόπος γρήγορης κατασκευής ιστοσελίδων είναι να τοποθετήσετε περιεχόμενο όπως κείμενο και εικόνες απευθείας μέσα σε ένα έγγραφο. Μπορείτε να αναδιπλώσετε κείμενο γύρω από μια εικόνα, να στοιχίσετε κείμενο ή εικόνες και να δημιουργήσετε μπλοκ κειμένου με εσοχές – αλλά δεν μπορείτε να κάνετε πολύ περισσότερα σχετικά με τη διάταξη και την τοποθέτηση των στοιχείων. Ένας άλλος τρόπος να αποκτήσετε έλεγχο στην τοποθέτηση στοιχείων στις σελίδες σας είναι να χρησιμοποιήσετε πίνακες. Οι πίνακες σας επιτρέπουν να παρουσιάζετε πληροφορίες με οργανωμένο τρόπο. Περιέχουν γραμμές και στήλες , που σχηματίζουν τα κελιά, στα οποία μπορείτε να τοποθετείτε περιεχόμενο. Τα κελιά μπορούν να συγχωνευθούν και να δημιουργήσουν μεγαλύτερα κελιά. Η οργάνωση περιεχομένου σε πίνακες σας επιτρέπει να σχεδιάζετε σελίδες με μεγαλύτερη ακρίβεια. Με τη χρήση πινάκων, μπορείτε να τοποθετείτε αντικείμενα σε συγκεκριμένες θέσεις στη σελίδα και να δημιουργείτε πιο πολύπλοκες οπτικές συνθέσεις.

Δημιουργία Πίνακα Από τη γραμμή Insert / Layout/ Table Στο πλαίσιο διαλόγου Table που θα εμφανιστεί δώστε τα παρακάτω στοιχεία: Rows (γραμμές) Columns (στήλες) Table Width (Πλάτος πίνακα) Boarder Thickness (Πάχος περιγράμματος) Cell padding (Συμπλήρωμα κελιών). Για να καθορίσετε το ποσό του χώρου (σε πίξελ) μεταξύ του περιεχομένου και του περιγράμματος των κελιών. Cell spacing (Απόσταση κελιών). Για να καθορίσετε τον αριθμό των πίξελ για το χώρο μεταξύ των κελιών. Header (Επικεφαλίδα) Summary (Περίληψη) Πατήστε ΟΚ και ο πίνακας θα εμφανιστεί στη σελίδα σας. Όταν ο πίνακας είναι επιλεγμένος ή όταν το σημείο εισαγωγής του βρίσκεται σε ένα κελί του, το Dreamweaver εμφανίζει πράσινες γραμμές διάστασης επάνω στον πίνακα. Η επάνω γραμμή δείχνει το πλάτος του πίνακα σε πίξελ. Κάθε στήλη με πλάτος έχει επίσης μια γραμμή διάστασης η οποία δείχνει το πλάτος της σε πίξελ, αν έχετε καθορίσει σταθερό πλάτος για τη στήλη.

45/96

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

Με επιλεγμένο το κείμενο που θέλετε να αντιγράψετε δείξτε στο μενού Edit/ Copy για αντιγραφή – Edit/ Paste για επικόλληση Ή πατήστε στο συνδυασμό των πλήκτρων Control + C για αντιγραφή/ Control + V για επικόλληση.

Επιλογή Πίνακα

Για να επιλέξετε ολόκληρο τον πίνακα πατήστε στην επάνω αριστερή γωνία του πίνακα ή πατήστε στην κάτω ή στη δεξιά γωνία του πίνακα ή πατήστε μέσα στον πίνακα και δείξτε στο μενού Modify (Τροποποίηση) / Table (Πίνακας)/ Select Table (Επιλογή πίνακα). Για να επιλέξτε μια ολόκληρη γραμμή τοποθετήστε το δείκτη του ποντικιού στο αριστερό άκρο μιας γραμμής. Ο δείκτης θα μετατραπεί σε βέλος. Πατήστε για να επιλέξετε ολόκληρη τη γραμμή. Μπορείτε να πατήσετε και να σύρετε για να επιλέξετε πολλές γραμμές. Τα περιγράμματα των κελιών της επιλεγμένης γραμμής θα επισημανθούν. Για να επιλέξετε μια ολόκληρη στήλη τοποθετήστε το δείκτη του ποντικιού στο επάνω όριο της στήλης. Ο δείκτης θα μετατραπεί σε βέλος. Πατήστε για να επιλέξετε ολόκληρη τη στήλη. Μπορείτε να πατήσετε και να σύρετε για να επιλέξετε πολλές στήλες ή πατήστε στο τρίγωνο στη γραμμή διάστασης επάνω από οποιαδήποτε στήλη, για να εμφανίσετε ένα Copyright© 2009-2012 -SYSTEM- All rights reserved

46/96

αναδυόμενο μενού, και έπειτα επιλέξτε Select Column (Επιλογή στήλης). Τα περιγράμματα των κελιών της επιλεγμένης στήλης θα επισημανθούν. Για να επιλέξετε ένα κελί πατήστε και σύρετε μέσα στο κελί ή πατήστε μέσα στο κελί και επιλέξτε Edit (Επεξεργασία)/ Select all (Επιλογή όλων) ή πατήστε στο συνδυασμό πλήκτρων Ctrl+A ή αν το κελί είναι κενό, τριπλοπατήστε μέσα σε αυτό. Για να επιλέξετε πολλά γειτονικά κελιά πατήστε μέσα στο πρώτο κελί που θέλετε να επιλέξετε και σύρετε μέχρι το τελευταίο ή πατήστε μέσα στο πρώτο κελί, κρατήστε πατημένο το πλήκτρο Shift και μετά πατήστε μέσα στο τελευταίο κελί.

Μορφοποίηση κελιών Πίνακα

Merge (Συγχώνευση) Split (Διαίρεση) Horizontal (Οριζόντια) Vertical (Κατακόρυφα) Width & Height (Πλάτος & Ύψος) No Wrap ( Χωρίς αναδίπλωση) Background Color (χρώμα φόντου)

Συγχώνευση και Διαίρεση κελιών

Επιλέξτε τα κελιά που θέλετε να συγχωνεύσετε. Επιλέξτε Modify/ Table/ Merge cells ή πατήστε με το δεξιό πλήκτρο του ποντικιού και επιλέξτε Table/ Merge Cells από το μενού συντόμευσης. Τα κελιά θα συγχωνευθούν. Τοποθετήστε το σημείο εισαγωγής στο κελί που θέλετε να διαιρέσετε σε δύο ή περισσότερα κελιά. Επιλέξτε Modify/ Table/ Split Cell ή πατήστε με το δεξιό πλήκτρο του ποντικιού και επιλέξτε Table/ Split Cell από το μενού συντόμευσης. Θα εμφανιστεί το πλαίσιο διαλόγου Split Cell. Επιλέξτε αν θέλετε να διαιρέσετε το κελί σε γραμμές ή στήλες. Πληκτρολογήστε τον αριθμό των νέων γραμμών ή στηλών για τη διαίρεση. Πατήστε ΟΚ. Το κελί θα διαιρεθεί σε δύο ή περισσότερα κελιά.

Προσθήκη Γραμμών ή Στηλών

Με επιλεγμένο τον πίνακα που θέλετε, δείξτε στο μενού Modify/ Table/ Insert Rows or Columns (Παρεμβολή γραμμών ή στηλών).

47/96

Αλλαγή μεγέθους στοιχείων πίνακα

Πατήστε στο κάτω ή το δεξιό όριο του πίνακα. Ο πίνακας θα επιλεγεί και γύρω του θα εμφανιστεί ένα περίγραμμα με λαβές αλλαγής μεγέθους. Σύρετε μια από τις λαβές αλλαγής μεγέθους. Για να αυξήσετε το πλάτος του πίνακα, σύρετε τη λαβή στη δεξιά πλευρά του πίνακα για να αυξήσετε το ύψος του πίνακα, σύρετε τη λαβή στην κάτω πλευρά του πίνακα, για να αυξήσετε το μέγεθος του πίνακα και προς τις δύο διαστάσεις ταυτόχρονα, σύρετε τη λαβή στην κάτω δεξιά γωνία του. Κρατώντας πατημένο το πλήκτρο Shift καθώς σύρετε, θα διατηρήσετε τις αναλογίες του πίνακα. Για να αλλάξετε το πλάτος των στηλών, επιλέξτε τη στήλη που θέλετε να αλλάξετε. Σύρετε το δεξιό περίγραμμα της στήλης για να αυξήσετε το πλάτος της ή από τον επιθεωρητή ιδιοτήτων, πληκτρολογήστε έναν αριθμό στο πεδίο W (Width – πλάτος). Για να αλλάξετε το ύψος των γραμμών, επιλέξτε τη γραμμή που θέλετε να αλλάξετε. Σύρετε το κάτω περίγραμμα της γραμμής για να αυξήσετε το ύψος της ή στον επιθεωρητή ιδιοτήτων, πληκτρολογήστε έναν αριθμό στο πεδίο H (Height – ύψος).

Διαγραφή στοιχείων πίνακα

Για να διαγράψετε έναν πίνακα, επιλέξτε τον πίνακα πατώντας στη δεξιά ή την κάτω πλευρά του και πατήστε το πλήκτρο Backspace (Delete). Για να διαγράψετε γραμμές, επιλέξτε μια ή περισσότερες γραμμές και πατήστε το πλήκτρο Backspace (Delete) ή δείξτε στο μενού Modify/ Table/ Delete Row ή πατήστε στη γραμμή με το δεξί πλήκτρο του ποντικιού και επιλέξτε Table/ Delete Row από το μενού συντόμευσης. Για να διαγράψετε στήλες, επιλέξτε μια ή περισσότερες στήλες και πατήστε το πλήκτρο Backspace (Delete) ή δείξτε στο μενού Modify/ Table/ Delete Column ή πατήστε στη γραμμή με το δεξί πλήκτρο του ποντικιού και επιλέξτε Table/ Delete Column από το μενού συντόμευσης.

Καθορισμός στοίχισης πίνακα

Μπορείτε να καθορίσετε τη στοίχιση του πίνακα αναδιπλώνοντας σε κάποιες περιπτώσεις το κείμενο γύρω από αυτόν. Μπορείτε να επιλέξετε τέσσερα διαφορετικά είδη στοίχισης: • Η στοίχιση Default (Προεπιλεγμένη) χρησιμοποιεί την προεπιλεγμένη στοίχιση του φυλλομετρητή (συνήθως τοποθετεί τον πίνακα στην αριστερή πλευρά της σελίδας). Η ρύθμιση αυτή αποτρέπει την αναδίπλωση του κειμένου στη δεξιά πλευρά του πίνακα. • Η στοίχιση Left (Αριστερά) τοποθετεί τον πίνακα στην αριστερή πλευρά της σελίδας και επιτρέπει το κείμενο να αναδιπλωθεί στη δεξιά πλευρά του πίνακα.

48/96

• •

Η στοίχιση Center (Κέντρο) τοποθετεί τον πίνακα στο κέντρο της σελίδας χωρίς αναδίπλωση κειμένου. Η στοίχιση Right (Δεξιά) τοποθετεί τον πίνακα στη δεξιά πλευρά της σελίδας και επιτρέπει στο κείμενο να αναδιπλωθεί στην αριστερή πλευρά του πίνακα.

Για να καθορίσετε τη στοίχιση ενός πίνακα, επιλέξτε τον πίνακα και στον Επιθεωρητή Ιδιοτήτων, επιλέξτε τη στοίχιση που θέλετε από το αναδυόμενο μενού Align. Για να καθορίσετε τη στοίχιση κελιών, τοποθετήστε το σημείο εισαγωγής στο κελί που θέλετε να μορφοποιήσετε. Στον Επιθεωρητή Ιδιοτήτων, από το αναδυόμενο μενού Horz (Οριζόντια) επιλέξτε Default, Left, Center ή Right. Η επιλογή Default έχει συνήθως το ίδιο οπτικό αποτέλεσμα με τη left.

Καθορίστε το χρώμα φόντου ενός κελιού

Τοποθετήστε το σημείο εισαγωγής στο κελί που θέλετε να μορφοποιήσετε. Στον Επιθεωρητή Ιδιοτήτων, πατήστε στην παλέτα δίπλα στη λέξη Bg (Φόντο) για να εμφανίσετε τον επιλογέα χρωμάτων, και επιλέξτε χρώμα φόντου για το κελί.

49/96

ΚΕΦΑΛΑΙΟ 19ο ΤΑΞΙΝΟΜΗΣΗ ΠΙΝΑΚΑ Μπορείτε να εφαρμόσετε μια απλή ταξινόμηση σε έναν πίνακα, μόνο για τα περιεχόμενα μιας στήλης. Μπορείτε επίσης να εφαρμόσετε μια πιο σύνθετη ταξινόμηση ως προς τα περιεχόμενα δύο στηλών. Επίσης δεν μπορείτε να ταξινομήσετε πίνακες που περιέχουν συγχωνευμένα κελία. Για να ταξινομήσετε τον πίνακα, επιλέξτε τον και δείξτε στο μενού Commands/ Sort Table (Διαταγές/ Ταξινόμηση Πίνακα). Θα εμφανιστεί το πλαίσιο διαλόγου Sort Table. Από το αναδυόμενο μενού Order (Σειρά) στα αριστερά, επιλέξτε αν θέλετε να ταξινομήσετε τη στήλη αλφαβητικά ή αριθμητικά. Από το αναδυόμενο μενού Order στα δεξιά επιλέξτε αν θέλετε να ταξινομήσετε τη στήλη σε αύξουσα ή φθίνουσα σειρά. Αν θέλετε να ταξινομήσετε με βάση ένα δεύτερο σύνολο κριτηρίων, επαναλαμβάνετε τη διαδικασία και χρησιμοποιήστε το σύνολο Then by (Έπειτα κατά) στα αναδυόμενα μενού. Κάντε τις επιλογές σας από τη λίστα Options (Επιλογές) και πατήστε ΟΚ. Sort By (Ταξινόμηση Κατά) Order (σειρά) Sort includes the first row (Η ταξινόμηση περιλαμβάνει την πρώτη γραμμή)

50/96

Εξαγωγή Πίνακα

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

Θα εμφανιστεί το πλαίσιο διαλόγου Export Table. Από το αναδυόμενο μενού Delimiter (οριοθέτης), επιλέξτε το χαρακτήρα του οριοθέτη που θέλετε να χρησιμοποιήσετε στο εξαγόμενο αρχείο κειμένου. Οι επιλογές σας είναι οι εξής: Tab, Space, comma, semicolon ή Colon. Από το αναδυόμενο μενού Lines Breaks (Αλλαγές γραμμών), επιλέξτε το λειτουργικό σύστημα προορισμού για το αρχείο κειμένου. Οι επιλογές που έχετε είναι Windows, Mac ή Unix. Ο λόγος που υπάρχει αυτή η επιλογή είναι ότι κάθε πλατφόρμα έχει διαφορετικό τρόπο να σημαίνει το τέλος μιας γραμμής κειμένου. Πατήστε στο κουμπί Export (Εξαγωγή). Θα εμφανιστεί το πλαίσιο διαλόγου Export Table As (Εξαγωγή πίνακα ως). Δώστε ένα όνομα στο αρχείο, μεταφερθείτε στη θέση που θέλετε να το αποθηκεύσετε και πατήστε στο κουμπί Save (Αποθήκευση).

Χρήση εικόνων σε πίνακες

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

51/96

ΚΕΦΑΛΑΙΟ 20ο ΈΝΘΕΤΟΙ ΠΙΝΑΚΕΣ & ΈΛΕΓΧΟΣ ΔΙΑΤΑΞΗΣ Ένας ένθετος (nested) πίνακας είναι ένας πίνακας που τοποθετείται μέσα σε ένα κελί κάποιου άλλου πίνακα. Οι ένθετοι πίνακες χρησιμοποιούνται συχνά για τη δημιουργία ιστοσελίδων που σε άλλη περίπτωση θα έπρεπε να χρησιμοποιήσουν έναν πολύπλοκο πίνακα.

Σχεδιασμός για οθόνες υπολογιστών

Ένας σχεδιαστής ιστού, πρέπει να υπολογίσει ένα μεγάλο αριθμό πιθανοτήτων. Πρέπει να λάβετε υπόψη σας όχι μόνο την ποικιλία των φυλλομετρητών που ίσως χρησιμοποιούν οι χρήστες, αλλά επίσης το μέγεθος και την ανάλυση των οθονών τους. Οι τύποι οθονών όπου οι χρήστες μπορούν να εμφανίσουν τις ιστοσελιδες έχει αυξηθεί και θα εξακολουθήσει να αυξάνεται. Οι χρήστες ανοίγουν τις ιστοσελίδες σε υπολογιστές , τηλεοράσεις, κινητά τηλέφωνα, υπολογιστές παλάμης και άλλες πολλές νέες συσκευές. ΑΝΑΛΥΣΗ ΣΕ PIXEL 160 x 160 240 x 320 544 x 372 640 x 240 640 x 480 800 x 600 1024 x 768 1280 x 1024

ΣΥΣΚΕΥΗ Υπολογιστής παλάμης Pocket PC Τηλεόραση Ιστού Windows Οθόνη 14 ιντσών Οθόνη 15 έως 17 ιντσών Οθόνη 17 έως 19 ιντσών Οθόνη 21 ιντσών

Χρήση μεγέθους παραθύρου για τον έλεγχο της διάταξης

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

52/96

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

53/96

ΚΕΦΑΛΑΙΟ 21ο ΕΙΚΟΝΑ ΙΧΝΟΥΣ Ορισμένες φορές, μπορεί να σας δοθούν σελίδες που έχει σχεδιάσει κάποιος άλλος σε ένα πρόγραμμα επεξεργασίας εικόνων όπως το Adobe Photoshop ή το Quark Xpress ή ίσως έχετε ένα στιγμιότυπο οθόνης από μια σελίδα. Αν μπορείτε να μετατρέψετε τη σελίδα σε εικόνα JPEG, GIF ή PNG, μπορείτε να εισαγάγετε αυτή την εικόνα στο Dreamweaver και να τη χρησιμοποιήσετε ως οδηγό ή εικόνα ίχνους (tracing image), για να αναδημιουργήσετε τη σελίδα HTML. Η εικόνα ίχνους είναι ορατή μόνο μέσα στο Dreamweaver. Δεν ενσωματώνεται στον κώδικα HTML και δε φαίνεται στο φυλλομετρητή. Η εικόνα ίχνους εμφανίζεται πίσω από οτιδήποτε υπάρχει στη σελίδα σας στο Dreamweaver. Όταν χρησιμοποιείτε μια εικόνα ίχνους, το χρώμα του φόντου ή η εικόνα φόντου της σελίδας σας κρύβεται, αλλά το χρώμα ή η εικόνα φόντου εμφανίζεται όταν ανοίγετε τη σελίδα σε ένα φυλλομετρητή. Για να εισάγετε μια εικόνα ίχνους, δείξτε στο μενού View (Προβολή)/ Tracing Image (εικόνα ίχνους) πατήστε στο κουμπί Load

54/96

Ορίστε τη διαφάνεια (transparency)

Page Properties (Ιδιότητες Σελίδας) / Tracing Image/ Transparency View/ Tracing Image/ Reset Position (Επαναφορά θέσης) View/ Tracing Image/ Align with selection (Ευθυγράμμιση με την επιλογή) View/ Tracing Image/Adjust Position (Προσαρμογή θέσης)

55/96

ΚΕΦΑΛΑΙΟ 22ο ΔΗΜΙΟΥΡΓΙΑ CSS ΦΥΛΛΩΝ ΣΤΥΛ Τα Φύλλα Επάλληλων Στυλ (Cascading Style Sheets – CSS) σας δίνουν τη δυνατότητα να καθορίζετε πως θα εμφανίζονται στις ιστοσελίδες σας διάφορα στοιχεία, όπως κείμενο και εικόνες. Στυλ είναι μια ομάδα χαρακτηριστικών μορφοποίησης που ορίζεται με ένα μοναδικό όνομα, το οποίο λέει στο φυλλομετρητή πώς να εμφανίσει ένα στοιχείο. Τα στυλ στα έγγραφα της HTML σας βοηθούν να ελέγχετε σε μεγάλο βαθμό τη μορφοποίηση. Τα πλεονεκτήματα που έχει η χρήση στυλ είναι ότι, κάνετε μια αλλαγή σε ένα χαρακτηριστικό του στυλ, ενημερώνονται αυτόματα όλα τα στοιχεία που ελέγχονται από αυτό το στυλ. Οι παλαιότεροι φυλλομετρητές αγνοούν τα CSS, αν και ο Internet Explorer3.0 αναγνωρίζει μερικά χαρακτηριστικά τους. Τα καλύτερα αποτελέσματα επιτυγχάνονται με φυλλομετρητές έκδοσης 5.0 ή μεταγενέστερης, οι οποίοι υποστηρίζουν ένα μεγαλύτερο εύρος δυνατοτήτων. Κάθε φορά που δημιουργείτε ένα νέο συνδυασμό χαρακτηριστικών σε μια σελίδα, το Dreamweaver δημιουργεί ένα νέο στυλ, το οποίο στη συνέχεια εμφανίζεται στο μενού Class του επιθεωρητή ιδιοτήτων.

Εμφάνιση παλέτας CSS Window/ CSS Styles

56/96

Κατηγορίες CSS

Οι κατηγορίες CSS του Dreamweaver είναι: Type (κείμενο) • Font-family (Οικογένεια γραμματοσειρών) • Font-size (Μέγεθος γραμματοσειράς) • Font-style (Στυλ γραμματοσειράς) • Line-height (Ύψος γραμμής) • Text-decoration (Διακοσμητικά στοιχεία κειμένου) • Font-weight (Βάρος γραμματοσειράς) • Font-variant (Παραλλαγή γραμματοσειράς) • Text-transform (μετασχηματισμός κειμένου • Color (Χρώμα) Background (Φόντο) • Background-color (Χρώμα φόντου) • Background-image (Εικόνα φόντου) • Background- repeat (Επανάληψη φόντου) • Background- attachment (Προσάρτημα φόντου) • Background- position Χ – Υ (Θέση φόντου Χ – Υ) Block (Μπλοκ) • Word- spacing (Απόσταση λέξεων) • Letter- spacing (Απόσταση χαρακτήρων) • Vertical- align (κατακόρυφη στοίχιση) • Text- align (Στοίχιση κειμένου) • Text- Indent (Εσοχή κειμένου) • White- space (Κενός χώρος) • Display (Εμφάνιση) Box (Ορθογώνιο) • Width (Πλάτος) • Height (Ύψος) • Float (κινητό) • Clear (Ελεύθερος χώρος) • Padding (Same for all, Top, Right, Bottom, Left) – Συμπλήρωση (Ίδια για όλα, Επάνω, Δεξιά, Κάτω, Αριστερά) • Margins (Same for all, Top, Right, Bottom, Left) – Περιθώριο (Ίδια για όλα, Επάνω, Δεξιά, Κάτω, Αριστερά)

57/96

Boarder (περίγραμμα) • Style (Same for all, Top, Right, Bottom, Left) – Στυλ (Ίδια για όλα, Επάνω, Δεξιά, Κάτω, Αριστερά) • Width (Same for all, Top, Right, Bottom, Left) – Πλάτος (Ίδια για όλα, Επάνω, Δεξιά, Κάτω, Αριστερά) • Color (Same for all, Top, Right, Bottom, Left) – Χρώμα (Ίδια για όλα, Επάνω, Δεξιά, Κάτω, Αριστερά) List (Λίστα) • List- style- type (λίστα – στυλ – τύπος) • List- style- image (λίστα – στυλ – εικόνα) • List- style- position (λίστα – στυλ – θέση) Positioning (Τοποθέτηση) • Position (θέση) • Width (Πλάτος) • Height (Ύψος) • Visibility (Ορατότητα) • Z- Index (Δείκτης – Ζ) • Overflow (Υπερχείλιση) • Placement (Top, Right, Bottom, Left) – Τοποθέτηση (Επάνω, Δεξιά, Κάτω, Αριστερά) • Clip (Top, Right, Bottom, Left) – Περικοπή (Επάνω, Δεξιά, Κάτω, Αριστερά) Extensions (Επεκτάσεις) Page- break- before (Αλλαγή σελίδας πριν) Page- break- after (Αλλαγή σελίδας μετά) Cursor visual effect (Οπτικό εφέ δείκτη) Filter Visual effect (Οπτικό εφέ φίλτρου)

Δημιουργία εξωτερικών στυλ

Αν και μπορείτε εύκολα να αλλάζετε διάφορα χαρακτηριστικά μορφοποίησης, όπως γραμματοσειρά, μέγεθος και χρώμα σε μεμονωμένα έγγραφα, τα εξωτερικά στυλ μπορούν να διευρύνουν τις επιλογές σας και να διευκολύνουν την εφαρμογή αυτών των ίδιων στυλ σε άλλα έγγραφα της τοποθεσίας σας. Αντί να δημιουργείτε ξανά τα στυλ σας σε κάθε σελίδα που θέλετε να τα χρησιμοποιήσετε , μπορείτε να χρησιμοποιήσετε ένα εξωτερικό φύλλο στυλ και να αποθηκεύσετε εκεί όλα τα στυλ σας, αποκτώντας έτσι πιο εύκολη πρόσβαση σε κάθε έγγραφο στο οποίο είναι προσαρτημένο το φύλλο στυλ. Πατήστε στο εικονίδιο New CSS Style στο κάτω μέρος του πάνελ CSS Styles Selector Type (Τύπος επιλογέα)

58/96

Class (Τάξη), δημιουργείτε τάξεις, οι οποίες δε συνδέονται με κανένα συγκεκριμένο στοιχείο. Tag (Ετικέτα), σας επιτρέπει να ορίσετε μια ετικέτα HTML ως στοιχείο που θα επανοριστεί από το στυλ

Επεξεργασία υπάρχοντος στυλ

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

Επιλέξτε το στυλ που θέλετε να επεξεργαστείτε και πατήστε στο κουμπί Edit Style (επεξεργασία στυλ) στο κάτω μέρος του πάνελ CSS Styles

Ορισμός φόντου με CSS

New CSS Style/ Selector Type/ Tag/Body/ Define In/ New style sheet/OK/ Background (Φόντο)/ Background color/ OK

59/96

Background color (Χρώμα φόντου) Background Image (Εικόνα φόντου) Repeat (επανάληψη) Horizontal Position (οριζόντια θέση) Vertical Position (Κατακόρυφη θέση)

Στυλ για πίνακες

New Css Style/ Selector Type/ Tag/Body/ Define In/ New style sheet/OK/ Background (Φόντο)/ Box (πλαίσιο) New Css Style/ Selector Type/ Tag/Body/ Define In/ New style sheet/OK/ Background (Φόντο)/ Boarder (Περίγραμμα)

60/96

ΚΕΦΑΛΑΙΟ 23ο ΧΡΗΣΗ ΣΤΟΙΧΕΙΩΝ ΒΙΒΛΙΟΘΗΚΗΣ Ένα στοιχείο βιβλιοθήκης είναι ένα τμήμα περιεχομένου, το οποίο μπορεί να ξαναχρησιμοποιηθεί σε πολλές σελίδες. Διαχωρίζεται από τις άλλες σελίδες της τοποθεσίας σας και αποθηκεύεται σε ένα αρχείο της βιβλιοθήκης (Library)Μπορείτε να δημιουργήσετε ένα στοιχείο βιβλιοθήκης επιλέγοντας ένα ή περισσότερα στοιχεία ενός εγγράφου και προσθέτοντας τα στη βιβλιοθήκη. Μετά από αυτό, το Dreamweaver μετατρέπει την επιλογή σας σε μη επεξεργάσιμο περιεχόμενο, το οποίο συνδέεται με το αντίστοιχο στοιχείο βιβλιοθήκης.

Δημιουργία στοιχείου βιβλιοθήκης Πατήστε

στην καρτέλα Assets (Πόροι) στην ομάδα πάνελ και στο κουμπί Library

(Βιβλιοθήκη) / New Library Item (Νέο στοιχείο βιβλιοθήκης)/ Untitled για να επισημάνετε το όνομα και πληκτρολογήστε

Τοποθέτηση στοιχείου βιβλιοθήκης σε σελίδα Καρτέλα Assets (Πόροι) στην ομάδα πάνελ και στο κουμπί Library (Βιβλιοθήκη) επιλέξτε το στοιχείο που θέλετε/ Insert

61/96

Αναδημιουργία στοιχείου βιβλιοθήκης

Επιλέξτε το στοιχείο και πατήστε στο κουμπί Recreate του επιθεωρητή ιδιοτήτων

Ενημέρωση αναφορών βιβλιοθήκης

Modify/ Library/ Update Pages (Τροποποίηση/ Βιβλιοθήκη/ Ενημέρωση σελίδων). Επιλέξτε Entire site στο look in.

62/96

ΚΕΦΑΛΑΙΟ 24ο ΔΗΜΙΟΥΡΓΙΑ ΠΛΑΙΣΙΩΝ Μια τυπική σελίδα HTML αποτελείται από μια περιοχή η οποία περικλείει ολόκληρο το παράθυρο του φυλλομετρητή. Κάθε μια από αυτές τις ανεξάρτητες περιοχές είναι ένα υποσύνολο του μεγαλύτερου παραθύρου του φυλλομετρητή που τις περιέχει. Τα πλαίσια συνήθως χρησιμοποιούνται για να ορίσουν περιοχές πλοήγησης και περιεχομένου μιας σελίδας. Συνήθως , η περιοχή πλοήγησης παραμένει σταθερή, ενώ η περιοχή περιεχομένου αλλάζει κάθε φορά που ο χρήστης πατάει σε ένα σύνδεσμο. Το πλαισιοσύνολο ορίζει τη συνολική εμφάνιση μιας σελίδας η οποία χρησιμοποιεί πλαίσια – τον αριθμό των περιοχών με πλαίσια στη σελίδα, το μέγεθος κάθε πλαισίου και τα χαρακτηριστικά του περιγράμματος. Το ίδιο το πλαισιοσύνολο δεν έχει κανένα περιεχόμενο καθορίζει ποιο έγγραφο HTML θα χρησιμοποιηθεί σε κάθε πλαίσιο. Το έγγραφο πλαισιοσυνόλου είναι το αρχείο με το οποίο συνδέεστε όταν επισκέπτεστε μια ιστοσελίδα με πλαίσια. Για να δημιουργήσετε μια ιστοσελίδα με πλαίσια δείξτε στο μενού File/ New/ Page From Sample/ Frameset/ Fixed Top, Nested Left (Σταθερή κορυφή, Αριστερή ένθεση)/ Create (Δημιουργία)

Αποθήκευση Πλαισίου

Δείξτε στο μενού File/ Save FramesetAs (Αποθήκευση πλαισιοσυνόλου ως) Δείξτε στο μενού File/ Save all (Αποθήκευση όλων). Με αυτό τον τρόπο, το πλαισιοσύνολο και όλα τα ανοιχτά αρχεία θα αποθηκευτούν ταυτόχρονα. Αν αποθηκεύσετε τα αρχεία για πρώτη φορά, το Dreaweaver θα σας ζητήσει να δώσετε ένα όνομα σε κάθε αρχείο πριν την αποθήκευσή του.

Αλλαγή μεγέθους πλαισίου

Τοποθετήστε το δείκτη επάνω στο οριζόντιο περίγραμμα του πλαισίου πατήστε και σύρετε. Όταν θέλετε να αλλάξετε το μέγεθος της στήλης, έχετε στη διάθεσή σας τις εξής μονάδες μέτρησης: • Pixel: (Πίξελ) Αυτή η επιλογή ορίζει απόλυτο μέγεθος της επιλεγμένης στήλης ή γραμμής ίσο με τον αριθμό των πίξελ που καταχωρίζετε. Είναι η καλύτερη επιλογή για οποιοδήποτε πλαίσιο πρέπει να έχει καθορισμένο μέγεθος. Αν άλλες στήλες ή γραμμές καθοριστούν με διαφορετική μονάδα, σε αυτές θα δοθεί χώρος μόνο όταν πάρουν το πλήρες μέγεθός τους οι ορισμένες σε πίξελ στήλες ή γραμμές. • Percent: (Ποσοστό) Αυτή η επιλογή καθορίζει ένα ποσοστό μεγέθους το οποίο πρέπει να έχει η τρέχουσα στήλη ή γραμμή μέσα στο πλαισιοσύνολό της. Στις Copyright© 2009-2012 -SYSTEM- All rights reserved

63/96

•

ορισμένες σε ποσοστά στήλες ή γραμμές, δίνεται χώρος μετά τις ορισμένες σε πίξελ στήλες ή γραμμές και πριν τις ορισμένες σε σχετικές μονάδες. Relative: (Σχετική μονάδα)Αυτή η επιλογή καθορίζει ότι στην τρέχουσα στήλη η γραμμή δίνεται χώρος με βάση τις τρέχουσες αναλογίες ως προς άλλες στήλες ή γραμμές. Στις ορισμένες σε σχετική μονάδα στήλες ή γραμμές, κατανέμεται χώρος μετά τις ορισμένες σε πίξελ ή ποσοστό, αλλά καταλαμβάνουν όλο τον υπόλοιπο χώρο. Αν ρυθμίσετε το κάτω ή το δεξιό πλαίσιο σε σχετική μονάδα, το μέγεθος του πλαισίου αλλάζει ώστε να καταλάβει το υπόλοιπο πλάτος ή ύψος του παραθύρου Εγγράφου.

Ορισμός ιδιοτήτων πλαισίου

Πατήστε επάνω στο πλαισιοσύνολο που θέλετε και από τον επιθεωρητή ιδιοτήτων:

Frame Name: Όνομα πλαισίου. Δίνει ένα απαραίτητο αναγνωριστικό στο πλαίσιο. Κάθε πλαίσιο πρέπει να έχει ένα όνομα. Αυτό που χρειάζεστε είναι ένα όνομα που θα σας βοηθάει να καταλαβαίνετε τη διάταξή σας, όπως για παράδειγμα LeftFrame. Δεν επιτρέπονται κενά στο όνομα. Src: Προέλευση. Είναι το URL της σελίδας που θα εμφανίζεται αρχικά στο πλαίσιοσύνολο. Scroll: Κύλιση. Οι επιλογές είναι No (Καμιά), Auto (Αυτόματη), Default (Προεπιλεγμένη). Η πρώτη σημαίνει ότι το πλαίσιο δεν θα έχει ράβδο κύλισης, η δεύτερη ότι θα εμφανίζεται αυτόματα μια ράβδος κύλισης αν το περιεχόμενο του πλαισίου είναι περισσότερο από αυτό που μπορεί να χωρέσει και η Τρίτη επιλογή αποτελεί την προεπιλογή του φυλλομετρητή που είναι συνήθως ή Auto. Boarder: Περίγραμμα Boarder Width: Πάχος περιγράμματος Boarder Color: Χρώμα περιγράμματος Value: Τιμή (μήκος) Untis: Μονάδες μέτρησης Οι ιδιότητες Margin width (Πλάτος περιθωρίου) και Margins Height (Ύψος περιθωρίου) αναφέρονται στο περιθώριο γύρω από ένα μεμονωμένο πλαίσιο. No resize : Χωρίς αλλαγή μεγέθους. Η ενεργοποίηση του πλαισίου αυτού σημαίνει ότι δεν υπάρχει τρόπος να αλλάξετε το μέγεθος ενός πλαισίου στο φυλλομετρητή. Αν δεν το ενεργοποιήσετε, οι χρήστες θα μπορούν να σύρουν το περίγραμμα του πλαισίου στο παράθυρο του φυλλομετρητή. Copyright© 2009-2012 -SYSTEM- All rights reserved

64/96

Άνοιγμα υπάρχουσας σελίδας σε πλαίσιο

Μπορείτε να ανοίξετε τα αρχεία κατευθείαν μέσα από το πλαίσιο ώστε να τα δοκιμάσετε ή να τα τροποποιήσετε. Για να ανοίξετε File/ Open in frame

Χρήση του πάνελ Frames

Αν το πάνελ Frames δεν είναι ορατό, επιλέξτε Window/ Frames για να το εμφανίσετε. Καλό είναι να διατηρείτε το πάνελ ορατό όταν επεξεργάζεστε τοποθεσίες με πλαίσια. Παρέχει μια μικροσκοπική προβολή των πλαισίων μέσα σε ένα πλαισιοσύνολο. Επίσης, έτσι έχετε έναν εύκολο τρόπο να επιλέγετε ένα μεμονωμένο πλαίσιο ή ολόκληρο το πλαισιοσύνολο.

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

65/96

ΚΕΦΑΛΑΙΟ 25ο ΔΗΜΙΟΥΡΓΙΑ ΦΟΡΜΩΝ Πριν προσθέσετε στοιχεία σε μια σελίδα, όπως μεμονωμένα πεδία και κουμπιά, πρέπει να δημιουργήσετε τη φόρμα που θα φιλοξενήσει αυτά τα στοιχεία. Οι φόρμες λειτουργούν ως αποδέκτες των πεδίων, των κουμπιών, των μενού και άλλων αντικειμένων που μπορούν να χρησιμοποιήσουν οι επισκέπτες για να καταχωρίσουν ή να επιλέξουν πληροφορίες, οι φόρμες καθορίζουν επίσης τι θα γίνει με τα δεδομένα μετά την υποβολή τους.

Η περιοχή που καταλαμβάνει η φόρμα αναγνωρίζεται από τις κόκκινες διάστικτες γραμμές στο παράθυρο Εγγράφου, αυτή η περιοχή ορίζεται στον κώδικα με τις ετικέτες <form> και </form>. Αυτές οι κόκκινες γραμμές είναι αόρατα στοιχεία τα οποία εμφανίζονται μόνο στο Dreamweaver, όταν ανοίγετε τη σελίδα σε κάποιο φυλλομετρητή, τίποτα δεν επισημαίνει την περιοχή φόρμας. Δεν μπορείτε να σύρετε αυτές τις κόκκινες γραμμές – το μέγεθος της περιοχής φόρμας εξαρτάται από το τι θα τοποθετήσετε μέσα σε αυτή, και μπορεί να καταλάβει οριζόντια ολόκληρο το διαθέσιμο πλάτος και κατακόρυφα όσο απαιτείται για να χωρέσει το περιεχόμενο. Η φόρμα που τοποθετήσατε στη σελίδα εκτείνεται σε ολόκληρο το πλάτος του κελιού. Σε μια σελίδα μπορείτε να προσθέσετε πολλές φόρμες. Όμως, δεν είναι δυνατόν να ενθέσετε μια φόρμα μέσα σε μια άλλη φόρμα με HTML. Το Dreamweaver δημιουργεί γενικά ονόματα φορμών. Τα ονόματα αυξάνονται αυτόματα αριθμητικά κάθε φορά που δημιουργείτε μια φόρμα. Όλα τα ονόματα φορμών πρέπει να είναι μοναδικά και να μην περιέχουν ειδικούς χαρακτήρες. Τα ονόματα των φορμών είναι σημαντικά αναγνωριστικά, ιδιαίτερα αν έχετε περισσότερες από μια φόρμες σε μια σελίδα ή αν χρησιμοποιείτε μια βάση δεδομένων για πληροφορίες που συγκεντρώνονται ή ζητούνται μέσω φόρμας. Τα ονόματα φορμών χρησιμοποιούνται και για τον έλεγχο των φορμών με τη χρήση γλωσσών σεναρίων όπως η JavaScript. Πρέπει να τοποθετήσετε όλα τα πεδία και τα κουμπιά φόρμας μέσα στις κόκκινες διάστικτες γραμμές διαφορετικά, δε θα αποτελούν μέρος της φόρμας. Αν προσπαθήσετε να προσθέσετε πεδία φόρμας έξω από τις κόκκινες γραμμές, το Dreamweaver θα εμφανίσει ένα πλαίσιο προειδοποίησης με επιλογές Yes ή No, ρωτώντας σας αν θέλετε να προσθέσετε

66/96

μια ετικέτα φόρμας (form tag). Αν επιλέξετε No, το πεδίο ή τα κουμπιά δε θα λειτουργούν ως τμήμα φόρμας. Οι επιλογές που ισχύουν μόνο για τις φόρμες είναι οι εξής: • Form IF (Αναγνωριστικό φόρμας): Αν πρόκειται να κάνετε επικύρωση (validation) της φόρμας σας με JavaScript, η φόρμα πρέπει να έχει όνομα. Επιπλέον, κάποια CGI (που σημαίνει Common Gateway Interface – κοινή διασύνδεση Πύλης Δικτύου – και είναι πρόγραμμα που εκτελείται στο διακομιστή και ερμηνεύει τα δεδομένα που στέλνει η φόρμα σας), απαιτούν οι συσχετισμένες φόρμες να έχουν συγκεκριμένο όνομα. • Action (Ενέργεια): Αυτό είναι το πρόγραμμα που εκτελείται στο διακομιστή Ιστού κατά την υποβολή της φόρμας. Θα χρειαστεί κάποιο όνομα του από το διαχειριστή του συστήματος σας ή τον πάροχο υπηρεσιών. Αναφέρεται συχνά και ως CGI συστήματος (System CGI). • Method (Μέθοδος): Οι πιο κοινές επιλογές είναι οι GET και POST. Η δεύτερη μεταβιβάζει τα δεδομένα της φόρμας ως τμήμα της κεφαλίδας της αίτησης προς το διακομιστή. Η πρώτη μεταβιβάζει τα δεδομένα ως τμήμα του URL της αίτησης προς τον διακομιστή. Για τον λόγο αυτόν, και επειδή η GET έχει προορισμό μήκους, συνήθως χρησιμοποιείται η μέθοδος POST. • Enctype (Τύπος περιβλήματος): Το πεδίο αυτό περιγράφει τον τύπο του περιβλήματος (Enclosure type) που στέλνεται στο διακομιστή. Η προεπιλογή είναι application/x-www-form-urlencoded. Η μοναδική περίπτωση που είναι καλύτερα να χρησιμοποιήσετε τον τύπο Multipart/form-data είναι όταν ζητάτε από τους επισκέπτες σας να ανεβάσουν ένα αρχείο.

Προσθήκη πεδίου κειμένου

Τα πεδία κειμένου (text fields) προορίζονται για τη συλλογή πληροφοριών που θα πληκτρολογήσει ο χρήστης. Τα πεδία κειμένου μιας γραμμής χρησιμοποιούνται για συνοπτικές απαντήσεις, όπως μια λέξη ή φράση. Η επιλογή Max Chars περιορίζει το συνολικό αριθμό των χαρακτήρων που μπορεί να καταχωρίσει ένας χρήστης. Αρχικά, αυτό το πεδίο κειμένου είναι κενό και ο αριθμός των χαρακτήρων που μπορεί να καταχωρίσει ο χρήστης είναι απεριόριστος. Αν η τιμή μέγιστου αριθμού είναι μεγαλύτερη από την τιμή πλάτους χαρακτήρων (Char Width), ο χρήστης μπορεί να εξακολουθήσει να πληκτρολογεί δεδομένα και το κείμενα να κυλάει προς τα αριστερά μέσα στο πεδίο, καθώς ο χρήστης πληκτρολογεί πέρα από την ορατή περιοχή. Η κύλιση τελειώνει στην τιμή του μέγιστου αριθμού χαρακτήρων. Στην επιλογή Type (τύπος) υπάρχουν 3 τιμές: Single line (μιας γραμμής), Multi line (πολλών γραμμών) και Password (Κωδικού πρόσβασης).

67/96

Η επιλογή Init val (Αρχική τιμή) του πεδίου σημαίνει ότι το κείμενο αυτό εμφανίζεται όταν φορτώνεται η σελίδα.

Προσθήκη πεδίου κειμένου πολλών γραμμών

Μπορείτε να χρησιμοποιήσετε πεδία κειμένου πολλών γραμμών (multi-line text fields) για να συλλέξετε μεγαλύτερο όγκο πληροφοριών από ένα χρήστη, παρέχοντας μια περιοχή κειμένου με πολλές γραμμές στις οποίες θα μπορεί να πληκτρολογήσει δεδομένα. Όταν χρησιμοποιείτε τα πεδία κειμένου πολλών γραμμών, υπάρχει μια πρόσθετη επιλογή στον επιθεωρητή Ιδιοτήτων το μενού Wrap (Αναδίπλωση), το οποίο είναι διαθέσιμο μόνο για τα πεδία κειμένου πολλών γραμμών. Είναι απενεργοποιημένο (αμυδρό) και για τα πεδία κειμένου μιας γραμμής και για τα πεδία κειμένου κωδικού πρόσβασης. Η αναδίπλωση καθορίζει πόσο από το κείμενο που πληκτρολογείτε σε ένα πεδίο πολλών γραμμών θα εμφανίζεται αν μπορεί να χωρέσει περισσότερο κείμενο στην ορατή περιοχή. Οι επιλογές αναδίπλωσης είναι: • Η επιλογή Default (Προεπιλογή) χρησιμοποιεί την προεπιλογή του φυλλομετρητή. Αυτή η ρύθμιση επιλέγεται αυτόματα όταν διαλέγετε Multiline στο πεδίο Type. • Η επιλογή Off (Απενεργοποίηση) σταματάει την αναδίπλωση του κειμένου στην επόμενη γραμμή. Το κείμενο συνεχίζεται σε μια γραμμή έως ότου πατηθεί το πλήκτρο Return ή Enter. Το κείμενο κυλάει προς τα αριστερά καθώς ο επισκέπτης πληκτρολογεί έξω από το όριο της ορατής περιοχής. • Η επιλογή Virtual (Εικονική) αναδιπλώνει το κείμενο στην επόμενη γραμμή, αλλά η αναδίπλωση δεν εφαρμόζεται στα δεδομένα όταν αυτά υποβάλλονται. • Η επιλογή Physical (Φυσική) αναδιπλώνει το κείμενο στην επόμενη γραμμή, και η αναδίπλωση εφαρμόζεται στα δεδομένα και όταν αυτά υποβάλλονται. • Η επιλογή Num lines (Αριθμός γραμμών) είναι ο αριθμός των γραμμών που θέλετε να καταλαμβάνει το πεδίο στη σελίδα. Αν θέλετε μόνο μια γραμμή, χρησιμοποιήστε πεδίο κειμένου. • Η επιλογή Disabled (Απενεργοποιημένη) και Read only (Μόνο για ανάγνωση) εκτελούν παρόμοιες, αλλά όχι ίδιες λειτουργίες. Το Disabled εμφανίζει την περιοχή κειμένου έτσι ώστε ο χρήστης να μην μπορεί να την επιλέξει ή να την επεξεργαστεί. Αυτό είναι χρήσιμο όταν η σελίδα σας περιέχει JavaScript συνθήκης, ο οποίος θα ενεργοποιήσει την περιοχή κειμένου, αν ο χρήστης εκτελέσει μια συγκεκριμένη ενέργεια. Με το Read Only, ο χρήστης δεν μπορεί να επιλέξει και να αντιγράψει τα περιεχόμενα του πεδίου.

Προσθήκη πλαισίου ελέγχου

Τα πλαίσια ελέγχου (Check box) δίνουν τη δυνατότητα στους χρήστες να διαλέξουν μια ή περισσότερες επιλογές από μια ομάδα σχετικών μεταξύ τους στοιχείων. Τα πλαίσια ελέγχου συνήθως χρησιμοποιούνται όταν θέλετε οι χρήστες να μπορούν να ενεργοποιήσουν όσο το δυνατόν περισσότερες επιλογές. Οι επιλογές που έχετε είναι:

68/96

•

Checkbox name (όνομα πλαισίου ελέγχου): Είναι το όνομα του πεδίου και χρησιμοποιείται από σενάρια επικύρωσης JavaScript και σενάρια CGI διακομιστή (server- side CGI). Checked value (Τιμή ενεργοποίησης): Είναι η τιμή που θα μεταβιβαστεί στο διακομιστή (και στον κώδικα JavaScript του πελάτη) αν ο χρήστης έχει ενεργοποιήσει το πλαίσιο ελέγχου. Initial State (Αρχική κατάσταση): Αναφέρεται στην εμφάνιση του πλαισίου ελέγχου όταν η σελίδα φορτώνεται για πρώτη φορά – είναι το πλαίσιο ελέγχου επιλεγμένο ή όχι;

Προσθήκη Πεδιοσυνόλου

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

Προσθήκη ραδιοπλήκτρων

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

Προσθήκη ομάδας ραδιοπλήκτρων

Στην ομάδα ραδιοπλήκτρων (radio group) μια μόνο επιλογή μπορεί να είναι ενεργός στη συγκεκριμένη ομάδα. Όταν εισάγετε μια ομάδα ραδιοπλήκτρων θα σας ζητηθεί να καταχωρίσετε τα πεδία: • Name (Όνομα). Η ομάδα των ραδιοπλήκτρων χρειάζεται ένα όνομα που θα συνδέει όλα τα ραδιοπλήκτρα. Το όνομα δεν εμφανίζεται στην τελική φόρμα. • Radio buttons Label (Λεζάντα ραδιοπλήκτρων). Κάθε ραδιοπλήκτρο πρέπει να έχει μια λεζάντα για να διαφέρει από τα γειτονικά του. • Radui button Value (Τιμή ραδιοπλήκτρου). Κάθε ραδιοπλήκτρο χρειάζεται μια τιμή, η οποία μεταβιβάζεται στο σενάριο CGI ή JavaScript του διακομιστή. • Lay out using (Διάταξη με χρήση). Τα ραδιοπλήκτρα κανονικά είναι στοιχισμένα κατακόρυφα, οπότε εδώ επιλέγετε πως θέλετε να δημιουργηθεί η συγκεκριμένη διάταξη στη σήμανση HTML. Οι επιλογές σας είναι Line breaks (Αλλαγές γραμμών) και Table (Πίνακας). Η πρώτη επιλογή είναι σχεδόν πάντα αρκετή.

69/96

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

Προσθήκη στοιχείων Λίστας Κειμένου

Μπορείτε να δημιουργήσετε μια κυλιόμενη λίστα ή ένα κυλιόμενο μενού από τα οποία οι επισκέπτες θα κάνουν επιλογές. Μια κυλιόμενη λίστα (Scrolling list) σας δίνει τη δυνατότητα να επιτρέπετε στους χρήστες σας να διαλέγουν πολλές γειτονικές ή μη γειτονικές επιλογές. Το μενού περιορίζει τους χρήστες σε μια επιλογή. Και στους δύο τύπους, τα στοιχεία που επιλέγει ο χρήστης επισημαίνονται. Οι επιλογές που έχετε είναι: • List/ Menu: Είναι το όνομα του πεδίου που μεταβιβάζεται στο σενάριο CGI/ JavaScript του διακομιστή όταν το τελευταίο επεξεργάζεται τη φόρμα. • Type: Οι επιλογές Menu ή List για αναδυόμενο μενού είναι επιλέξτε Menu • Initially selected (Αρχική επιλογή): Μπορείτε να καθορίσετε μια από τις επιλογές του μενού ως προεπιλογή, που θα εμφανίζεται κατά τη φόρτωση της σελίδας. • List Values: πατώντας σε αυτό το κουμπί, ανοίγετε ξανά το πλαίσιο διαλόγου List Values ώστε να αλλάξετε τα περιεχόμενα του καταλόγου.

Προσθήκη Κουμπιών

Οι φόρμες συχνά έχουν δύο κουμπιά: ένα για την αποστολή των δεδομένων της φόρμας (Submit – Υποβολή) και ένα για τον καθορισμό της φόρμας (Reset – Επαναφορά). Το κουμπί Submit δίνει στο φυλλομετρητή την εντολή να στείλει τα δεδομένα. Το κουμπί Reset καθορίζει όλες τις πληροφορίες από τα πεδία της σελίδας. Οι επιλογές που έχετε είναι: • Button name (Όνομα κουμπιού): Είναι το όνομα του κουμπιού, γενικά, χρησιμοποιείτε το όνομα Submit για να ορίζεται κουμπιά υποβολής και το όνομα Reset για τα κουμπιά επαναφοράς. • Value (Τιμή): Είναι το μήνυμα του εμφανίζεται στο ίδιο το κουμπί Submit. Είναι συνήθως η λέξη “Submit”, αλλά μπορεί να είναι η φράση “Place Order” (Υποβολή παραγγελίας) , η λέξη ΟΚ ή οτιδήποτε άλλο πιστεύετε ότι θα είναι κατανοητό από τους χρήστες σας. • Action (Ενέργεια): Υπάρχουν 3 πιθανές ενέργειες. Οι Submit form (Υποβολή φόρμας) και Reset form (Επαναφορά φόρμας) λειτουργούν με τον αναμενόμενο τρόπο. Η ενέργεια None (καμιά) δημιουργεί ένα γενικό κουμπί, το οποίο μπορεί αργότερα να ρυθμιστεί ώστε να προκαλεί κάποια ενέργεια JavaScript.

Δημιουργία μενού μετάβασης

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

70/96

οποίων αρχεία γραφικών ή αρχεία PDF. Το μενού μετάβασης περιέχει ένα εύχρηστο περιβάλλον σύνδεσης με σελίδες της τοποθεσίας σας, αν η λίστα του δεν είναι πολύ μεγάλη. Όταν εισάγετε ένα Jump Menu, θα εμφανιστεί το πλαίσιο διαλόγου Jump Menu. Συμπληρώστε το εξής: Menu items (Στοιχεία μενού): Μην πληκτρολογήσετε τίποτε σε αυτόν τον κατάλογο. Καθώς προσθέτετε στοιχεία στο μενού, αυτά θα εμφανιστούν αυτόματα. Text (Κείμενο): Πληκτρολογήστε το κείμενο που θέλετε για το στοιχείο του μενού. Εδώ μπορείτε να πληκτρολογήσετε και μια προτροπή όπως Choose one (Επιλέξτε ένα). Για να είναι το κείμενο προτροπή, αφήστε κενό το URL. Open URLs in (Άνοιγμα URL σε): Επιλέξτε το παράθυρο στο οποίο θέλετε να εμφανιστεί το URL. Menu ID (Αναγνωριστικό μενού): Πληκτρολογήστε το όνομα που θα χρησιμοποιούν τα σενάρια JavaScript. Insert go button after menu (Προσθήκη κουμπιού Go μετά από το μενού): Ενεργοποιήστε στο το πλαίσιο ελέγχου αν θέλετε να υπάρχει κουμπί Go. Αν ο φυλλομετρητής του χρήστη δε χρησιμοποιεί javaScript ή αν η τοποθεσία χρησιμοποιεί πλαίσια, το κουμπί Go είναι απαραίτητο. Select first item after URL change (Επιλογή πρώτου στοιχείου μετά από την αλλαγή URL):Αν χρησιμοποιήσετε προτροπή, ενεργοποιήστε το συγκεκριμένο πλαίσιο ελέγχου.

71/96

ΚΕΦΑΛΑΙΟ 26ο ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΜΕ ΤΟ ΧΡΗΣΤΗ Η αλληλεπίδραση με τους χρήστες και η ανατροφοδότηση που παρέχουν αυτοί αποτελούν σημαντικά συστατικά μέρη των τοποθεσιών Ιστού τα οποία, όταν ενσωματωθούν αποτελεσματικά, προσφέρουν πολλά πλεονεκτήματα. Μερικά από αυτά είναι ότι βοηθάτε τους χρήστε να καταλάβουν καλύτερα το περιεχόμενο και το σκοπό της τοποθεσίας σας και να μπορέσουν να κινηθούν ευκολότερα σε αυτή, αλλά και ότι τους παρέχετε μια πιο ευχάριστη και αποδοτική εμπειρία. Υπάρχουν πολλοί τρόποι να προσθέσετε αλληλεπιδραστικά στοιχεία σε μια σελίδα. Μερικά παραδείγματα από τα πολλά εργαλεία που μπορούν να χρησιμοποιηθούν για τη δημιουργία σελίδων με αλληλεπιδραστικά στοιχεία είναι οι δυναμικές σελίδες και οι οδηγούμενες από βάσεις δεδομένων σελίδες, στοιχεία Flash και Quick time. Ένα από τα πιο συνήθη και αποτελεσματικά εργαλεία για τη δημιουργία αλληλεπιδραστικών τοποθεσιών Ιστού είναι η JavaScript, δηλαδή, τα σενάρια περιέχονται στις ιστοσελίδες και τα επεξεργάζεται ο φυλλομετρητής.

Προσθήκη Εναλλαγής εικόνων

Μια από τις συνήθεις χρήσεις της JavaScript σε ιστοσελίδες είναι η δημιουργία εναλλαγής εικόνων (rollover) μια εικόνα που αλλάζει όταν ο χρήστης μετακινεί το δείκτη του ποντικιού του επάνω της. Οι εναλλαγές εικόνων συνδυάζουν τη χρήση δύο εικόνων στον ίδιο χώρο. Όταν κάποιος χρήστης επισκεφθεί για πρώτη φορά μια σελίδα που χρησιμοποιεί εναλλαγές εικόνων, οι συνδυασμοί των εικόνων εμφανίζονται στην αρχική τους κατάσταση. Καθώς ο δείκτης κινείται πάνω από την εναλλασσόμενη εικόνα εμφανίζεται μια νέα εικόνα στη θέση της πρώτης. Η νέα εικόνα συχνά αναφέρεται ως κατάσταση “on” ή “over” της εικόνας. Καθώς ο χρήστης απομακρύνει το δείκτη από την εικόνα αυτή μπορεί είτε να επιστρέψει στην αρχική της μορφή είτε να διατηρήσει τη δεύτερη μορφή της.

72/96

Για να εισάγετε μια εναλλαγή εικόνων, δείξτε στο μενού Insert επιλέξτε Image Objects/ Rollover. Συμπληρώστε τα παρακάτω πεδία: • Image name (Όνομα εικόνας): Είναι το όνομα που χρησιμοποιεί το σενάριο JavaScript εσωτερικά για να αναφέρεται στην εικόνα. • Original Image (Αρχική εικόνα): Η διαδρομή προς την κατάσταση Up της εικόνας, δηλαδή αυτό που εμφανίζεται όταν φορτωθεί η σελίδα. • Preload rollover image (Προφόρτωση εικόνας εναλλαγής): Πρέπει ν επιλέξετε αυτό το πλαίσιο ελέγχου ώστε η έκδοση Over της εικόνας να είναι στην κρυφή μνήμη του φυλλομετρητή όταν χρειαστεί. • Alternate text (Εναλλακτικό κείμενο): Είναι οι εναλλακτικές πληροφορίες για χρήστες με φυλλομετρητές κειμένου. • When clicked, Go to URL (Μετάβαση στο URL κατά το πάτημα): Είναι η διεύθυνση URL της ιστοσελίδας που θέλετε να ανοίγει όταν ο χρήστης πατάει στην εικόνα. Πατήστε ΟΚ για να αποδεχτείτε τις αλλαγές.

Προσθήκη Συμπεριφορών

Το Dreamweaver απλοποιεί τη διαδικασία χρήσης τυπικών λειτουργιών της javaScript με τη βοήθεια των συμπεριφορών (Behaviors) – έτοιμων ρουτινών κώδικα JavaScript τις οποίες μπορείτε εύκολα να ενσωματώσετε στην τοποθεσία Ιστού σας. Μια συμπεριφορά συνδυάζει ένα συμβάν χρήστη με μια ενέργεια ή σειρά ενεργειών, οι οποίες εκτελούνται ως αποτέλεσμα αυτού του συμβάντος. Για να εμφανίσετε το πάνελ Behaviors Δείξτε στο μενού Window/ Behaviors

73/96

Για να προσθέσετε μια συμπεριφορά, επιλέξτε το γραφικό που θέλετε. Δείξτε στο μενού Window/ Behaviors / Add behavior και επιλέξτε τη συμπεριφορά που θέλετε.

Τι είναι ενέργεια

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

Τι είναι συμβάν

Είναι αυτό που προκαλεί την ενέργεια. Για παράδειγμα, η κίνηση του δείκτη του ποντικιού ενός χρήστη επάνω από την εικόνα ή το πάτημα ενός κουμπιού είναι ένα συμβάν. Σε αυτή την περίπτωση το συμβάν είναι το onMouseOver (δείκτης του ποντικιού επάνω από), που αποτελεί την προεπιλογή για την εναλλαγή εικόνων στο Dreamweaver.

Προσθήκη συμπεριφορών σε εικονοχάρτες

Η μετακίνηση του δείκτη του ποντικιού επάνω σε οποιοδήποτε σημείο μιας τυπικής εικόνας εναλλαγής καλεί το σενάριο της JavaScript και προκαλεί την εναλλαγή της Copyright© 2009-2012 -SYSTEM- All rights reserved

74/96

εικόνας. Πολλές φορές όμως μπορεί να θέλετε να γίνει η εναλλαγή μόνο όταν ο χρήστης τοποθετεί το δείκτη του ποντικιού επάνω σε συγκεκριμένο σημείο της εικόνας. Σε αυτές τις περιπτώσεις, μπορείτε να χρησιμοποιήσετε εκονοχάρτες (image maps) για να ορίσετε περιοχές θερμών σημείων (hotspot). Σε μια εικόνα προσθέστε ένα hot spot (θερμό σημείο), μενού Window/ Behaviors/ Add behavior

Επεξεργασία Ενεργειών και συμβάντων

Μπορείτε να επεξεργαστείτε τις ενέργειες και τα συμβάντα τα οποία συνδυάζονται για να δημιουργήσουν συμπεριφορές, με πολλούς τρόπους. Μπορείτε να αλλάξετε το συμβάν στο οποίο αντιστοιχεί μια ενέργεια, να συνδέσετε πολλές ενέργειες με ένα μόνο συμβάν, και να αλλάξετε τη σειρά με την οποία εμφανίζονται αυτές οι ενέργειες Επιλέγουμε ένα αντικείμενο με μια συμπεριφορά μενού Window/ Behaviors, αλλάξτε όποιες παραμέτρους θέλετε και πατήστε στο κουμπί ΟΚ.

Αλλάξτε τη σειρά των συμπεριφορών

Επιλέξτε ένα συμβάν και χρησιμοποιήστε το επάνω ή το κάτω βέλος για να αλλάξετε τη σειρά.

Διαγράψτε μια συμπεριφορά

Στο πάνελ Behaviors, επιλέξτε το όνομα της συμπεριφοράς που θέλετε να διαγράψετε. Πατήστε στο κουμπί με το σύμβολο πλην ή πατήστε στο πλήκτρο Delete.

Δημιουργία μηνύματος γραμμής κατάστασης

Ένα μήνυμα γραμμής κατάστασης μπορεί να δώσει στους χρήστες περισσότερες πληροφορίες σχετικά με το που θα τους οδηγήσει ένας σύνδεσμος. Αυτό το μήνυμα, που Copyright© 2009-2012 -SYSTEM- All rights reserved

75/96

εμφανίζεται στη γραμμή κατάστασης στη βάση του παραθύρου του φυλλομετρητή, αντικαθιστά την προεπιλεγμένη εμφάνιση του URL ή της διαδρομής προς τη συνδεδεμένη σελίδα. Window/ Behaviors/ Add behavior / set text of status Bar. Ανοίγει το πλαίσιο διαλόγου Set Text of Status Bar, με ένα πεδίο κειμένου όπου μπορείτε να πληκτρολογήσετε το μήνυμά σας. Τώρα στο πάνελ Behaviors εμφανίζεται η ενέργεια Set Text of Status Bar.

76/96

ΚΕΦΑΛΑΙΟ 27ο ΕΛΕΓΧΟΣ ΦΥΛΛΟΜΕΤΡΗΤΗ Δεν υποστηρίζουν όλοι οι φυλλομετρητές μεγάλο εύρος συμβάντων και άλλες προηγμένες δυνατότητες. Με την ενέργεια Check Browser, μπορείτε να αναγνωρίσετε τους φυλλομετρητές που χρησιμοποιούν οι επισκέπτες της τοποθεσίας ιστού και να τους ανακατευθύνετε σε μια άλλη σελίδα, αν θέλετε να τους παρέχετε προηγμένες δυνατότητες που δεν εμφανίζονται σωστά σε άλλους φυλλομετρητές. Αν χρησιμοποιείτε αυτή τη δυνατότητα, καλό είναι να διατηρήσετε τη σελίδα που περιέχει τη συμπεριφορά ελέγχου του φυλλομετρητή πολύ μικρή σε μέγεθος, ώστε να φορτώνεται και να ανακατευθύνει τον επισκέπτη γρήγορα. Αν είναι πολύ μεγάλη, μπορεί να πάρει πολύ χρόνο η φόρτωσή της πράγμα που μπορεί να κάνει τους επισκέπτες να περιμένουν όχι μόνο μέχρι να φορτωθεί αυτή η σελίδα αλλά και μέχρι να φορτωθεί η σελίδα στην οποία θα τους κατευθύνει. Για να κάνετε έλεγχο του φυλλομετρητή δείξτε στο μενού Window/ Behaviors/Add Behavior/ Deprecated/ Check Browser Στο παράθυρο Check Browser που εμφανίζεται, επιλέξτε για Internet Explorer έκδοσης 4.0 επιλέξτε Go to URL (μετάβαση σε URL). Αφήστε ανοιχτό το παράθυρο. Στο παράθυρο Check Browser που εμφανίζεται, πατήστε στο κουμπί Browse (αναζήτηση). Επιπλέον χαρακτηριστικά για νέα παράθυρα είναι: Navigation toolbar (γραμμή εργαλείων πλοήγησης) Location toolbar (γραμμή εργαλείων θέσης) Status bar (Γραμμή κατάστασης) Menu bar (Γραμμή μενού) Scrollbars needed (ράβδοι κύλισης όταν χρειάζονται) Resize handles (λαβές αλλαγής παραθύρου) Window name (όνομα παραθύρου)

77/96

ΚΕΦΑΛΑΙΟ 28ο ΔΗΜΙΟΥΡΓΙΑ ΑΝΑΔΥΟΜΕΝΟΥ ΜΕΝΟΥ Ένα από τα πιο κοινά στοιχεία διασύνδεσης με το χρήστη που μπορείτε να προσθέσετε σε μια τοποθεσία είναι η κλασσική γραμμή μενού.

Δημιουργία Spry Menu Bar

Εργαλειοθήκη Insert / Spry/ Spry Menu Bar. Αποφασίστε αν τη θέλετε οριζόντια γραμμή μενού ή κατακόρυφη γραμμή μενού. Πατήστε στο ΟΚ για να αποδεχθείτε την επιλογή σας. Στη σελίδα σας θα εμφανιστεί η γραμμή μενού, ενώ στον Επιθεωρητή Ιδιοτήτων φαίνονται τα προεπιλεγμένα δεδομένα.

Δημιουργία Υπομενού στο Spry Menu Bar.

Με επιλεγμένο το Spry Menu Bar / επιθεωρητή ιδιοτήτων (properties), επιλέξτε το πεδίο / μεταφερθείτε στην 2η στήλη και πατήστε στο κουμπί “+” Add Menu List. Μετατρέψτε όλες τις επιλογές του μενού σε συνδέσμους, διαλέγοντας την επιλογή και αλλάζοντας το πεδίο Link (Σύνδεσμος) με το URL της κατάλληλης σελίδας.

78/96

ΚΕΦΑΛΑΙΟ 29ο ΕΡΓΑΛΕΙΟ SPRY TABBED PANELS Ένα άλλο συνηθισμένο στοιχείο διασύνδεσης είναι τα πάνελ με καρτέλες, τα οποία δίνουν στις ιστοσελίδες παρόμοια μορφή με τις εφαρμογές. Η δημιουργία πάνελ με καρτέλες ήταν μια χρονοβόρα και δύσκολη διαδικασία πριν από τη βιβλιοθήκη Spry.

Δημιουργία SPRY TABBED PANELS

Εργαλειοθήκη Common / Spry/ Spry Tabbed Panels. Η πρώτη καρτέλα θα εμφανίζεται πάντα εξ ορισμού όταν φορτώνεται η σελίδα μπορείτε να το αλλάξετε επανορίζοντας το πεδίο Default panel (Προεπιλεγμένο πάνελ) στον Επιθεωρητή Ιδιοτήτων.

Μοτονομασία μιας Καρτέλας SPRY TABBED PANELS

Διπλοπατήστε στο όνομα της καρτέλας και πληκτρολογήστε το όνομα που θέλετε

Προσθήκης νέας καρτέλας SPRY TABBED PANELS

Πατήστε επάνω στην ετικέτα του SPRY TABBED PANELS για να επιλέξετε και από τον επιθεωρητή ιδιοτήτων πατήστε στο (+) Add Panel (Προσθήκη καρτέλας)

Αφαίρεση καρτέλας SPRY TABBED PANELS

Πατήστε επάνω στην ετικέτα του SPRY TABBED PANELS για να επιλέξετε και από τον επιθεωρητή ιδιοτήτων πατήστε στο (-) Remove Panel (Προσθήκη καρτέλας)

79/96

ΚΕΦΑΛΑΙΟ 30ο ΕΠΙΚΥΡΩΣΗ ΦΟΡΜΑΣ Μερικές φορές, οι χρήστες κατά λάθος ή εσκεμμένα καταχωρίζουν λάθος στοιχεία, ή αφήνουν ένα πεδίο χωρίς να το συμπληρώσουν. Αντί να περιμένετε μέχρι να σταλεί η φόρμα, μπορείτε να ελέγχετε τα δεδομένα καθώς ο χρήστης τα καταχωρίζει ή ακριβώς πριν η φόρμα σταλεί στο διακομιστή. Η συμπεριφορά Validate Form (Επικύρωση φόρμας) ελέγχει το περιεχόμενο των πεδίων κειμένου μιας φόρμας και εξασφαλίζει ότι ο χρήστης έχει καταχωρίσει τις κατάλληλες πληροφορίες.

Για να επικυρώσετε μια φόρμα

Μενού Window επιλέξτε Behaviors. Πατήστε στο κουμπί Add Behavior/ Validate Form Required (Απαιτούμενο):Ενεργοποιήστε αν ο χρήστης πρέπει να πληκτρολογήσει δεδομένα στο πεδίο ώστε η φόρμα να γίνει αποδεκτή. Fields (Πεδία): Επιλέξτε ένα πεδίο στο πλαίσιο. Anything (οτιδήποτε): Επιλέξτε το ραδιοπλήκτρο αυτό, αν ζητάτε από τους χρήστες να πληκτρολογήσουν οποιοσδήποτε συνδυασμούς κειμένου και αριθμών. Number (Αριθμός): Επιλέξτε το ραδιοπλήκτρο αυτό, αν ζητάτε από τους χρήστες να πληκτρολογήσουν ταχυδρομικό κώδικα, αριθμό τηλεφώνου, ή άλλα αριθμητικά δεδομένα. Email address (Διεύθυνση ηλεκτρονικού ταχυδρομείου): Επιλέξτε το ραδιοπλήκτρο αυτό αν θέλετε να ελέγχετε για το σύμβολο @ μέσα στα δεδομένα που πληκτρολογούνται. Number from (Αριθμός από): Επιλέξτε αυτό το ραδιοπλήκτρο αν θέλετε να ελέγξετε ότι ο αριθμός ανήκει σε ένα συγκεκριμένο εύρος τιμών.

80/96

ΚΕΦΑΛΑΙΟ 31ο ΠΑΝΕΛ FILES Το πάνελ Files (Αρχεία), στο οποίο εμφανίζεται η δομή των αρχείων και των φακέλων της τοποθεσίας σας, μπορεί να εμφανίζεται είτε σταθεροποιημένο είτε ανεπτυγμένο σε μεγαλύτερο παράθυρο. Μπορείτε να χρησιμοποιήσετε το πάνελ Files στη συνεπτυγμένη ή την ανεπτυγμένη μορφή του για να φέρετε σε πέρας ένα μεγάλο εύρος εργασιών συντήρησης όπως προσθήκη, διαγραφή, μετονομασία και μετακίνηση αρχείων και φακέλων. Η πραγματοποίηση της συντήρησης των αρχείων μιας τοποθεσίας μέσω του Dreamweaver εξασφαλίζει ότι θα ενημερώνονται αυτόματα οι διαδρομές προς τους συνδέσμους, τις εικόνες και άλλα στοιχεία, αν χρειάζεται – το Dreamweaver παρακολουθεί τις αλλαγές σας και ενημερώνει τα αρχεία σας με βάση τις αλλαγές που κάνετε μέσα σε μια τοποθεσία. Από την άλλη, αν κάνετε αλλαγές στα αρχεία ή τους φακέλους μέσω των βοηθημάτων My Computer (Windows) ή File Manager (Διαχείρισης αρχείων) της Εξερεύνησης των Windows (Windows Explorer), το Dreamweaver δεν αναγνωρίζει τις αλλαγές και δεν μπορεί να διατηρήσει τις σωστές διαδρομές. Για να εμφανίσετε το πάνελ Files Δείξτε στο μενού Window/ Files

81/96

•

• • •

•

Μενού Show (Προβολή): Εμφανίζει όλες τις τοποθεσίες που ορίσατε και σας παρέχει πρόσβαση σε άλλα αρχεία του υπολογιστή σας καθώς και γρήγορες συνδέσεις με απομακρυσμένες τοποθεσίες. Κουμπί Connect/ Disconnect (Σύνδεση/ Αποσύνδεση): Σας συνδέει ή σας αποσυνδέει με την απομακρυσμένη τοποθεσία. Αν δεν έχετε ορίσει απομακρυσμένη τοποθεσία, πατώντας στο κουμπί αυτό ανοίγετε το πλαίσιο διαλόγου Site Definition (Ορισμός τοποθεσίας). Εξ ορισμού, το Dreamweaver αποσυνδέει μια απομακρυσμένη τοποθεσία FTP αν έχει παραμείνει σε αδράνεια για περισσότερο από 30 λεπτά. Κουμπί Refresh (Ανανέωση): Ανανεώνει τις λίστες του τοπικού και του απομακρυσμένου καταλόγου. Οι αλλαγές που τυχόν κάνατε στις λίστες αρχείων θα εμφανιστούν μετά την ανανέωση. Αν κάνετε αλλαγές στην τοποθεσία έξω από το Dreamweaver, στο Finder (Macintosh) ή στην Εξερεύνηση των Windows (Windows), ενδέχεται να χρειαστεί να ανανεώσετε τα τοπικά αρχεία σας για να δείτε τις αλλαγές. Set files (Αρχεία τοποθεσίας): Testing Server (Διακομιστής Δοκιμής) Κουμπί Get Files (Λήψη αρχείων): Αντιγράφει τα επιλεγμένα αρχεία από την απομακρυσμένη τοποθεσία στον τοπικό σας φάκελο, αντικαθιστώντας τα υπάρχοντα τοπικά αντίγραφα. Η επιλογή αυτή δε δουλεύει αν δεν έχετε ορίσει απομακρυσμένη τοποθεσία. Κουμπί Put Files (Αποστολή αρχείων): Αντιγράφει τα επιλεγμένα αρχεία από τον τοπικό φάκελο στην απομακρυσμένη τοποθεσία αντικαθιστώντας τα υπάρχοντα απομακρυσμένα αντίγραφα. Η επιλογή αυτή δε δουλεύει αν δεν έχετε ορίσει απομακρυσμένη τοποθεσία. Κουμπί Check out Files (Παραλαβή αρχείων): Αντιγράφει τα επιλεγμένα αρχεία από τον απομακρυσμένο διακομιστή στον τοπικό φάκελο, αντικαθιστώντας τα υπάρχοντα αντίγραφα. Το αρχείο τότε χαρακτηρίζεται ως “παραληφθέν”. Αν ένα αρχείο παραληφθεί, το Dreamweaver δεν επιτρέπει την επεξεργασίας του. Η επιλογή αυτή δε δουλεύει αν δεν έχετε ορίσει απομακρυσμένη τοποθεσία.

82/96

ΚΕΦΑΛΑΙΟ 32ο ΠΡΟΣΘΗΚΗ ΦΑΚΕΛΩΝ ΣΕ ΤΟΠΟΘΕΣΙΑ Μπορείτε να δημιουργήσετε νέους φακέλους και σελίδες στην τοποθεσία σας απευθείας στο πάνελ Files, το οποίο σας επιτρέπει να δημιουργήσετε γρήγορα τη δομή των αρχείων και των φακέλων της τοποθεσίας. Μπορείτε να δημιουργήσετε αμέσως σελίδες οι οποίες λειτουργούν ως δεσμευτικά θέσης, και να προσθέσετε αργότερα το περιεχόμενο.

Δημιουργία φακέλου

Ενώ βρίσκεστε στο πάνελ Files, πατήστε με δεξί πλήκτρο / New Folder

Μετονομασία αρχείου

Στο πάνελ Files, διπλο-πατήστε με κενό ανάμεσα στα πατήματα, σβήστε το όνομα που ήδη υπάρχει και πληκτρολογήστε το νέο

Μετακίνηση αρχείου έξω από το φάκελο

Ενώ βρίσκεστε στο πάνελ Files, πατήστε επάνω στο αρχείο /κρατήστε πατημένο και σύρετε κάτω από το φάκελο.

Διαγραφή αρχείου

Στο πάνελ Files, πατήστε επάνω στο αρχείο/ Delete/ ΟΚ στο μήνυμα της επιβεβαίωσης.

Διαγραφή Φακέλου

Στο πάνελ Files, πατήστε επάνω στον φάκελο/Delete/ ΟΚ στο μήνυμα της επιβεβαίωσης.

83/96

ΚΕΦΑΛΑΙΟ 33ο ΣΥΝΔΕΣΗ ΜΕ ΑΠΟΜΑΚΡΥΣΜΕΝΟ ΔΙΑΚΟΜΙΣΤΗ Όταν δημιουργείτε τις δικές σας τοποθεσίες, πρέπει να αντιγράφετε τα τοπικά αρχεία σε μια απομακρυσμένη τοποθεσία μετά την ολοκλήρωση δημιουργίας της τοποθεσίας σας, ώστε να μπορούν οι επισκέπτες να βλέπουν τις ιστοσελίδες σας. Η απομακρυσμένη τοποθεσία βρίσκεται στο διακομιστή Ιστού και αποτελεί τον προορισμό των αρχείων και των φακέλων από την τοπική τοποθεσία στο σκληρό δίσκο του υπολογιστή σας. Το Dreamweaver μπορεί να συνδεθεί στο διακομιστή Ιστού με διάφορους τρόπους. Η πιο συνηθισμένη ονομάζεται FTP, χρησιμοποιείται όταν ο διακομιστής σας βρίσκεται στο Διαδίκτυο ή στο ενδοδίκτυο της εταιρείας σας. Πριν ξεκινήσετε τη δημιουργία σύνδεσης θα χρειαστείτε τα εξής στοπιχεία:  Τον τύπο σύνδεσης,  Τη διεύθυνση για το διακομιστή σας,  Το όνομα της σύνδεσης (login), που συχνά ονομάζεται και όνομα χρήστη (user name), με το διακομιστή,  Των κωδικό πρόσβασης (password) που συνοδεύει το όνομα σύνδεσης,  Τη διαδρομή του φακέλου στο διακομιστή που περιέχει την τοποθεσία σας.  Για να ορίσετε σύνδεση με την απομακρυσμένη τοποθεσία δείξτε στο μενού Site/ New Site/ Manage Sites/ Edit / καρτέλα Advanced /Remote Info και επιλέξτε Local/ Network στο πεδίο Access/ Remote Info / Remote Folder (Απομακρυσμένος Φάκελος) καθορίστε τον απομακρυσμένο φάκελο/ Remote Info Ενεργοποιήστε το πλαίσιο ελέγχου Automatically upload files to server on save/ ΟΚ

84/96

ΚΕΦΑΛΑΙΟ 34ο ΑΝΕΒΑΣΜΑ ΚΑΙ ΣΥΓΚΑΛΥΨΗ ΑΡΧΕΙΩΝ Γιατί κάνουμε ανέβασμα αρχείων

Αφού ορίσετε μια απομακρυσμένη τοποθεσία πρέπει να ανεβάσετε τα αρχεία. Μπορείτε να ανεβάσετε ολόκληρη την τοποθεσία και έτσι να αντικαταστήσετε όλα τα αρχεία που υπάρχουν στο διακομιστή ή μόνο τα νέα ή τα τροποποιημένα. Από το πάνελ Files, επιλέξτε μία τοποθεσία πχ το USB/ Put/ ΟΚ. Site/ Manage Sites/ Edit/ καρτέλα Advance / Cloaking/ Cloak files ending with και πληκτρολογήστε τις καταλήξεις.png .fla .pdf./ ΟΚ

Τι είναι η συγκάλυψη αρχείων

Καθώς αναπτύσσετε την τοποθεσία του ιστού σας, ίσως θέλετε να εμποδίσετε το ανέβασμα ή το κατέβασμα ορισμένων αρχείων. Για παράδειγμα αν έχετε ένα μεγάλο αριθμό ταινιών Flash και Quick time ενσωματωμένες στις σελίδες σας, ίσως δε θέλετε να αντικαθιστάτε αυτά τα αρχεία στον τοπικό σας φάκελο ή στον απομακρυσμένο διακομιστή κάθε φορά που λαμβάνετε ή στέλνετε αρχεία – ίσως όμως θέλετε να ανεβάζετε αυτόματα άλλα εξαρτημένα αρχεία. Ίσως επίσης έχετε αρχεία προέλευσης γραφικών στον τοπικό σας φάκελο – συνήθως δε χρειάζεται να ανεβάζετε τα αρχεία προέλευσης σε απομακρυσμένους διακομιστές γιατί δεν είναι απαραίτητα στους επισκέπτες για να δουν τις σελίδες, ενώ καταλαμβάνουν πολύ χώρο. Μπορείτε να συγκαλύψετε τύπους φακέλων ή αρχείων ώστε να μην περιλαμβάνονται στις λειτουργίες μεταφοράς τοποθεσίας. Οι συγκαλούμενοι φάκελοι και αρχεία δεν εμφανίζονται στα πάνελ Assets και Files.

85/96

ΚΕΦΑΛΑΙΟ 35ο ΕΥΡΕΣΗ ΚΑΙ ΑΝΤΙΚΑΤΑΣΤΑΣΗ Το Dreamweaver σας παρέχει ένα ισχυρό εργαλείο αναζήτησης, τη λειτουργία Εύρεσης και αντικατάστασης (Find and Replace). Με αυτό το εργαλείο, μπορείτε να πραγματοποιείτε αναζητήσεις στο τρέχον έγγραφο, σε έναν καθορισμένο φάκελο ή σε μια ολόκληρη τοποθεσία. Όταν βρείτε το στοιχείο που αναζητάτε, μπορείτε να το τροποποιήσετε ή να το αντικαταστήσετε. Η δυνατότητα Εύρεσης και Αντικατάστασης μπορεί να σας γλιτώσει πολύ χρόνο όταν, για παράδειγμα, θέλετε να κάνετε μαζικές αλλαγές σε ένα έγγραφο ή μια ολόκληρη τοποθεσία. Θα χρησιμοποιήσετε τη λειτουργία Εύρεσης και Αντικατάστασης για να κάνετε διάφορες αλλαγές σε έναν αριθμό εγγράφων. Μενού Edit (Επεξεργασία)/ Find and Replace (Εύρεση και Αντικατάσταση).

Find in (Εύρεση σε). Μπορείτε να ψάξετε για κείμενο στο τρέχον έγγραφο (current document, η προεπιλογή) σε επιλεγμένο κείμενο (Selected text), στα ανοιχτά έγγραφα (open document), σε συγκεκριμένο φάκελο (Folder) που θα επιλέξετε, σε επιλεγμένα αρχεία της τοποθεσίας 9Selected Files in Site) ή σε ολόκληρη την τρέχουσα τοπική τοποθεσία (Entire Current Local Site). Find Next (Εύρεση επόμενου) Find All (Εύρεση όλων) Replace (Αντικατάσταση). Πληκτρολογήστε το κείμενο με το οποίο θέλετε να αντικαταστήσετε το κείμενο της αναζήτησης. Replace all (αντικατάσταση όλων). Selected Text (Επιλεγμένο κείμενο) Folder (φάκελος) Copyright© 2009-2012 -SYSTEM- All rights reserved

86/96

Entire Current Local Site (Ολόκληρη η τρέχουσα τοπική τοποθεσία) Matche Case (Ταύτιση πεζών κεφαλαίων). Επιστρέφει αποτελέσματα με τα ίδια κεφαλαία και πεζά γράμματα με το κείμενο που πληκτρολογήσατε στο πεδίο Find. Match Whole World (Ταύτιση ολόκληρης λέξης). Βρίσκει μόνο το κείμενο που ταυτίζεται με μία ή περισσότερες ολόκληρες λέξεις. Ignore Whitespace (να αγνοούνται τα κενά διαστήματα). Ορίζει στο Dreamweaver να μη λαμβάνει υπόψη του επιπλέον κενά διαστήματα. Είναι εξ’ ορισμού ενεργοποιημένη, και σας συνιστούμε να μην την απενεργοποιήσετε. Use Regular expression (Χρήση κανονικής παράστασης). Σας επιτρέπει να χρησιμοποιήσετε χαρακτήρες μπαλαντέρ για να δημιουργήσετε εξαιρετικά σύνθετες αναζητήσεις.

87/96

ΚΕΦΑΛΑΙΟ 36ο ΕΛΕΓΧΟΣ ΟΡΘΟΓΡΑΦΙΑΣ Η σωστή ορθογραφία παίζει πολύ σημαντικό ρόλο στην τελική εμφάνιση της τοποθεσίας σας. Το Dreamweaver μπορεί να ελέγξει την ορθογραφία του κειμένου των ιστοσελίδων σας περίπου με τον ίδιο τρόπο με τους επεξεργαστές κειμένου όπως το Microsoft Word.

Για να εφαρμόσετε τον ορθογραφικό έλεγχο, δείξτε στο μενού Spelling.

Commands / Check

Change to (αλλαγή σε) Suggestions (Προτάσεις) Ignore (Αγνόηση). Για να ορίσετε στον ελεγκτή ορθογραφίας να αγνοήσει τη συγκεκριμένη παρουσία της λέξης Change (Αλλαγή). Για να αντικαταστήσει την παρουσία της λέξης Ignore All (Αγνόηση όλων). Για να αγνοήσει όλες τις παρουσίες της λέξης στο έγγραφο. Change All (Αλλαγή όλων). Για να αντικαταστήσει όλες τις παρουσίες της λέξης στο έγγραφο. Add to personal (προσθήκη στο προσωπικό λεξικό). Αν η λέξη που βρήκε το Dreamweaver είναι σωστή και θέλετε να την προσθέσετε στο προσωπικό σας λεξικό ώστε να μην επισημανθεί ξανά ως λάθος.

88/96

ΚΕΦΑΛΑΙΟ 37ο ΔΗΜΙΟΥΡΓΙΑ AP ΣΤΟΙΧΕΙΩΝ Τα Ap Element είναι ένας ορθογώνιος “αποδέκτης” για περιεχόμενο HTML το οποίο μπορείτε να το τοποθετήσετε με ακρίβεια στη θέση που θέλετε σε ένα παράθυρο φυλλομετρητή. Τα Ap μπορούν να “φιλοξενήσουν” μια μεγάλη ποικιλία στοιχείων: κείμενο, εικόνες, πίνακες. Οτιδήποτε μπορείτε να συμπεριλάβετε σε ένα έγγραφο HTML μπορείτε να το τοποθετήσετε και σε ένα ap στοιχείο. Τα ap υποστηρίζονται μόνο από φυλλομετρητές έκδοσης 4.0 ή νεότερης. Όταν χρησιμοποιούνται σε συνδυασμό με φύλλα επάλληλων στυλ, μπορούν να διαχειριστούν διάταξη και εμφάνιση, και όταν χρησιμοποιούνται σε συνδυασμό με συμπεριφορές παρέχουν αλληλεπιδραστικότητα. Για να εμφανίσετε το πάνελ Ap Element, δείξτε στο μενού Window/ AP Element

Μορφοποίηση AP Στοιχείου

Με επιλεγμένο ένα AP στοιχείο, μεταφερθείτε στον επιθεωρητή ιδιοτήτων (properties). Από το πεδίο Bg Color ( χρώμα για το φόντο) Ενώ με επιλεγμένο το κείμενο που περιέχεται στο Ap στοιχείο, από τον επιθεωρητή μπορείτε να αλλάξετε την γραμματοσειρά, το μέγεθος κ.τ.λ. Πατήστε επάνω στο ορθογώνιο, όταν εμφανίζεται ο μαύρος σταυρό και σύρετε για να τοποθετήσετε το κάθε Ap στοιχείο στη σωστή θέση. Το μέγεθος του Ap στοιχείου προσαρμόζεται αυτόματα ώστε να φιλλοξενήσει όλο το περιεχόμενο τους. Όταν το περιεχόμενο υπερβαίνει το καθορισμένο μέγεθος, οι αρχικές τιμές πλάτους και ύψους υποσκελίζονται. Όταν συμβεί κάτι τέτοιο, η ρύθμιση Overflow (Υπερχείλιση) του επιθεωρητή ιδιοτήτων καθορίζει τον τρόπο που θα “συμπεριφερθεί” η στρώση. • Η προεπιλογή Visible αυξάνει το μέγεθος του Ap στοιχείου προς τα κάτω και δεξιά, όσο είναι απαραίτητο ώστε να είναι ορατά όλα τα περιεχόμενα. • Η επιλογή Hidden διατηρεί το μέγεθος του Ap stoixe;ioy και περικόπτει το περιεχόμενο που δε χωράει χωρίς να προσθέτει ράβδους κύλισης.

89/96

• •

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

Υπάρχουν δύο επιλογές που σας επιτρέπουν να ορίσετε το φόντο ενός Ap στοιχείου: • Bg Image (Εικόνα φόντου): Καθορίζει μια εικόνα φόντου για το Ap στοιχείο. Πληκτρολογήστε τη διαδρομή της εικόνας μέσα στα πεδία κειμένου ή πατήστε στο εικονίδιο του φακέλου για να επιλέξετε μια εικόνα προέλευσης. Το φόντο ενός Ap στοιχείου μπορεί να μην εμφανίζεται σε όλους τους φυλλομετρητές. • Bg Color (Χρώμ φότνου): Ορίζει ένα χρώμα φόντου για το Ap στοιχείο. Αφήστε το πεδίο κειμένου κενό ή επιλέξτε την προεπιλογή No Color (το κενό δείγμα χρώματος με την κόκκινη διαγώνια γραμμή) στην κορυφή του μενού χρωμάτων αν θέλετε να ορίσετε διαφάνεια. Το πάνελ AP Element εμφανίζει μια λίστα με όλα τα AP στοιχεία που υπάρχουν στη σελίδα σας. Μπορείτε να χρησιμοποιήσετε αυτό το πάνελ για να επιλέξετε ένα AP στοιχείο, να την ονομάσετε, να αλλάξετε την ορατότητα της, να τροποποιήσετε τη σειρά στοίβαξης, ή να επιλέξετε πολλές στρώσεις σε μια σελίδα. Όταν δημιουργείτε ένα Ap στοιχείο, αυτή τοποθετείται στην κορυφή της λίστας στρώσεων του πάνελ, εφόσον υπάρχουν και άλλα – οι καταχωρίσεις των Ap στρώσεων παρουσιάζονται σε φθίνουσα σειρά. Αν το AP είναι κρυμμένο, οι μοναδικοί τρόποι να το επιλέξετε είναι μέσω του πάνελ AP Element και την ένδειξη των AP στοιχείων.

Αλλαγή της σειράς στοίβαξης των AP στοιχείων

Μπορείτε να αλλάξετε τη σειρά στοίβαξης AP στοιχείων. Η συγκεκριμένη δυνατότητα αποδεικνύεται ιδιαίτερα χρήσιμη όταν χρησιμοποιείτε επικαλυπτόμενα AP στοιχεία και θέλετε να καθορίσετε τη σειρά με την οποία στοιβάζονται. Για να αλλάξετε τη σειρά στοίβαξης των AP, επιλέξτε στο πάνελ AP Element το AP στοιχείο που θέλετε και σύρετε προς τα κάτω ή προς τα πάνω στη λίστα. Σταματήστε να σύρετε και αφήστε όταν εμφανιστεί μια λεπτή μαύρη γραμμή στο σημείο που θέλετε Για να μετονομάσετε ένα AP στοιχείο, διπλοπατήστε επάνω στο AP στοιχείο, στο πάνελ AP Element. Μη χρησιμοποιήσετε κενά διαστήματα ή ειδικούς χαρακτήρες στα ονόματα των Ap στοιχείων. Ένα όνομα Ap πρέπει να είναι μοναδικό – μη δίνετε το ίδιο όνομα σε περισσότερα από ένα Ap στοιχεία.

Μετατροπή Ap στοιχείων σε Πίνακες

Τα Ap στοιχεία είναι ένας εύκολος τρόπος να σχεδιάζετε τη σελίδα σας, μπορεί όμως να περιορίσουν το κοινό στο οποίο απευθύνεστε επειδή δεν υποστηρίζονται από όλους τους Copyright© 2009-2012 -SYSTEM- All rights reserved

90/96

φυλλομετρητές. Αν και οι περισσότεροι σύγχρονοι φυλλομετρητές υποστηρίζουν τις στρώσεις, οι παλαιότερες εκδόσεις εμφανίζουν τα περιεχόμενα των Ap στοιχείων χωρίς τη συγκεκριμένη θέση και χωρίς καμιά δυνατότητα ελέγχου. Αν αποφασίσετε να σχεδιάσετε τη σελίδα σας με AP στοιχεία, μπορείτε να μετατρέψετε τα στοιχεία σε πίνακα ώστε να παρέχετε μια εναλλακτική σελίδα για τους επισκέπτες των οποίων οι φυλλομετρητές δεν υποστηρίζουν τα AP στοιχεία. Δοκιμάστε τις σελίδες σας σε διάφορους φυλλομετρητές και προσπαθήστε να προσδιορίσετε τους φυλλομετρητές που μπορεί να χρησιμοποιούν οι επισκέπτες σας, για να αποφασίσετε αν η εναλλακτική σελίδα χρειάζεται. Για να μετατρέψετε τα Ap στοιχεία σε πίνακα, δείξτε το μενού Modify (Τροποποίηση)/ Convert (Μετατροπή)/ AP Divs to table (AP Divs σε πίνακα). • Η επιλογή Most Accurate (Μέγιστη ακρίβεια) δημιουργεί ένα κελί πίνακα για κάθε Ap στοιχείο, με όσα πρόσθετα κελιά χρειάζονται ώστε να διατηρηθούν οι καθορισμένες αποστάσεις μεταξύ των AP στοιχείων. • Η επιλογή Smallest: Collapse Empty Cells (Ελάχιστο: σύμπτυξη κενών κελιών) καθορίζει τα όρια των AP στοιχείων πρέπει να ευθυγραμμιστούν αν βρεθούν μέσα στην καθορισμένη απόσταση σε πίξελ. Αν διαλέξετε αυτή την επιλογή, ο τελικός πίνακας θα έχει όσο το δυνατόν λιγότερες κενές γραμμές και στήλες. • Η επιλογή Use Transparent GIFs (Χρήση διαφανών GIF) συμπληρώνει την τελευταία γραμμή του πίνακα με διαφανείς εικόνες GIF, πράγμα το οποίο εξασφαλίζει ότι ο πίνακας θα έχει την ίδια μορφή σε όλους τους φυλλομετρητές. Με αυτή τη λειτουργία ενεργοποιημένη, δε θα μπορείτε να επεξεργαστείτε τον τελικό πίνακα σύροντας τις στήλες του. Όταν είναι απενεργοποιημένη, ο τελικός πίνακας δε θα περιέχει τις διαφανείς εικόνες GIF, και η εμφάνιση του μπορεί να είναι ελαφρώς διαφορετική από φυλλομετρητή σε φυλλομετρητή. • Η επιλογή Center on Page (Κεντράρισμα στη σελίδα) τοποθετεί τον τελικό πίνακα στο κέντρο της σελίδας. Με αυτή την επιλογή απενεργοποιημένη, ο πίνακας θα στοιχιστεί αριστερά. • Η επιλογή Layout Tools (Εργαλεία διάταξης) σας επιτρέπει να ορίζετε τις επιλογές διάταξης ή καννάβου που προτιμάτε. Αν στη σελίδα σας υπάρχουν επικαλυπτόμενες στρώσεις, θα εμφανιστεί ένα προειδοποιητικό πλαίσιο διαλόγου το οποίο σας πληροφορεί ότι το Dreamweaver δεν μπορεί να μετατρέψει τις στρώσεις σε πίνακα. Αν συμβεί κάτι τέτοιο, επιστρέψτε στο έγγραφό σας και φροντίστε να μην υπάρχει επικάλυψη σε καμιά από τα AP στοιχεία. Τυχόν κρυφές στρώσεις θα διαγραφούν. Μετά τη μετατροπή των Ap στοιχείων σε πίνακα, μπορείτε να κάνετε όλες τις απαραίτητες ρυθμίσεις στον πίνακα.

91/96

ΚΕΦΑΛΑΙΟ 38ο ΚΑΝΝΑΒΟΣ – ΧΑΡΑΚΑΣ – ΟΔΗΓΟΣ Όταν δουλεύετε με AP στοιχεία ίσως χρειαστεί να χρησιμοποιήσετε καννάβους και χάρακες ως οπτικούς οδηγούς για να τοποθετείτε τα AP στοιχεία στη σελίδα σας. Ο κάνναβος εμφανίζει την ιστοσελίδα σας με ένα πλέγμα ευθειών όπως των μπλοκ σχεδίασης, διευκολύνοντας σας να διαπιστώσετε αν τα στοιχεία της σελίδας είναι στοιχισμένα οριζόντια ή κατακόρυφα. Δε γίνεται καμιά αλλαγή στη σελίδα σας και οι ευθείες φαίνονται μόνο στο Dreamweaver.

Εμφάνιση/ Απόκρυψη Καννάβου

Στο παράθυρο Εγγράφου εμφανίζεται ο κάνναβος. Ένα σημάδι ελέγχου δίπλα στη διαταγή δείχνει ότι η συγκεκριμένη επιλογή είναι ενεργοποιημένη. Μενού View/ Grid/ Show Grid.

Προσκόλληση σε κάνναβο

Αυτή η επιλογή ενεργοποιεί ή απενεργοποιεί τη λειτουργίας έλξης στον κάνναβο. Το σημάδι ελέγχου δίπλα στη διαταγή δείχνει ότι η συγκεκριμένη επιλογή είναι ενεργοποιημένη. Όταν η επιλογή είναι ενεργοποιημένη, οι στρώσεις έλκονται στις γραμμές του καννάβου όταν τις μετακινείτε κοντά τους.

92/96

Για να ενεργοποιήσετε ή να απενεργοποιήσετε την προσκόλληση στον κάνναβο, δείξτε στο μενού View/ Grid/ Snap to Grid.

Ορισμός καννάβου σε κουκκίδες

Μενού View/ Grid/ Grid Settings/ Display: Dots

Εμφάνιση/ Απόκρυψη χάρακα

Στο παράθυρο Εγγράφου εμφανίζονται οι χάρακες. Το σημάδι ελέγχου δίπλα στη διαταγή δείχνει ότι η συγκεκριμένη επιλογή είναι ενεργοποιημένη. Μπορείτε να τροποποιήσετε τις μονάδες μέτρησης που χρησιμοποιούνται στους χάρακες επιλέγοντας View/ Rulers/ Pixels, Inches ή Centimeters. Η ενεργός μονάδα μέτρησης έχει δίπλα της ένα σημάδι ελέγχου. Για να εμφανίσετε ή να απενεργοποιήσετε το χάρακα δείξτε στο μενού View/ Ruler/ Show Ruler.

Εμφάνιση/ Απόκρυψη Οδηγών

Οι οδηγοί μπορούν να κάνουν σχεδόν τα ίδια πράγματα με τον κάνναβο και ακόμη περισσότερα. Μπορείτε να τους κλειδώσετε στη θέση τους, και να τους ορίσετε σε ποσοστά της σελίδας, επίσης μπορείτε να ορίσετε να έλκονται τα στοιχεία από τους οδηγούς. Μενού View/ Guides

Προσκόλληση στους Οδηγούς

Μενού View/ Guides/ Snap to Guides.

Τροποποιήστε τις ρυθμίσεις των οδηγών

Δείξτε στο μενού View/ Guides/ Edit Guides (Προβολή/ Οδηγοί, Επεξεργασία Οδηγών) . Εδώ μπορείτε να καθορίσετε τα εξής: Τα χρώματα του οδηγού και της απόστασης, αν οι οδηγοί θα εμφανίζονται ή όχι, αν τα στοιχεία θα έλκονται από τους οδηγούς ή οι οδηγοί από τα στοιχεία ή κανένα από τα δύο και αν οι οδηγοί θα είναι κλειδωμένοι ή όχι.

93/96

ΚΕΦΑΛΑΙΟ 39ο ΣΥΜΠΕΡΙΦΟΡΑ ΣΕ AP ΣΤΟΙΧΕΙΑ Μπορείτε να συνδυάσετε AP στοιχεία και συμπεριφορές για να δώσετε στους επισκέπτες σας τη δυνατότητα να αλληλεπιδρούν με τη σελίδα σας.

Προσθήκη συμπεριφοράς

Επιλέξτε το AP στοιχείο που θέλετε να πάρει κάποια συμπεριφορά. Δείξτε στο μενού Window/ Behaviors/ Add Behavior/ Effects Appear/ Fade/ On mouse over

Αφαίρεση ενός εφέ και προσθήκη νέου εφέ

Με επιλεγμένο το AP στοιχείο που θέλετε να του αφαιρέσετε ένα εφέ και να προσθέσετε ένα νέο. Δείξτε στο μενού Window/ Behaviors/ Remove Behavior. Δείξτε και πάλι στο μενού Window/ Behaviors/ Add Behavior/ Effects Blind/ On mouse over.

Προσθήκη ράβδων κύλισης

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

94/96

ΚΕΦΑΛΑΙΟ 40ο ΕΠΕΚΤΑΣΗ ΕΓΚΑΤΑΣΤΑΣΗΣ Το Dreamweaver έχει σχεδιαστεί έτσι ώστε να είναι δυνατή η επέκταση των δυνατοτήτων του. Ως αποτέλεσμα, μπορείτε να επεκτείνετε τις λειτουργίες του Dreamweaver χρησιμοποιώντας επεκτάσεις (extensions) – μικρά προγράμματα τα οποία μπορούν να προστεθούν για να αυξήσουν τη λειτουργικότητα του προγράμματος. Υπάρχουν πολλά διαφορετικά είδη επεκτάσεων, οι οποίες ποικίλουν από απλά αντικείμενα της HTML ως πιο πολύπλοκες διαταγές της JavaScript. Για την εγκατάσταση, τη διαχείριση, και την κατάργηση επεκτάσεων μπορείτε να χρησιμοποιείτε το βοήθημα Dreamweaver Extension Manager (Διαχειριστής Επεκτάσεων του Dreamweaver). Για να εγκαταστήσετε μια επέκταση δείξτε στο μενού Commands/ Manage Extensions, βρείτε το φάκελο που θέλετε/ επιλέξτε την επέκταση π.χ. Calendar/ Άνοιγμα.

95/96

ΚΕΦΑΛΑΙΟ 41 QUICK TIME Η Quick Time είναι μια δημοφιλής μορφή βίντεο για τον Ιστό που διατίθεται και για το Macintosh και για τα Windows. Οι ταινίες Quick Time μπορούν να είναι απλά βίντεο ή να περιέχουν αλληλεπιδραστικά στοιχεία όπως Flash και JavaScript. Μπορείτε να εισάγετε ταινίες Quick Time με την ίδια ευκολία που εισάγετε ταινίες Flash.

Προσθήκη Video Δείξτε στη γραμμή εργαλείων Insert/ Common επιλέξτε Plugin (Συνδεόμενη υπομονάδα)/ Εντοπίστε το αρχείο που θέλετε π.χ. Countryside.mov /ΟΚ

Αλλαγή ιδιοτήτων

Μεταφερθείτε στον επιθεωρητή ιδιοτήτων (properties), με επιλεγμένο το αντικείμενο και πληκτρολογήστε στο πεδίο W (πλάτος) και H (ύψος) τις τιμές που θέλετε.

96/96