book_dreamweaver_05 by Joseph Sakos

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

DREAMWEAVER

2/97

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

3/97

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

4/97

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

5/97

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

6/97

ΚΕΦΑΛΑΙΟ 1ο ΕΙΣΑΓΩΓΗ ΣΤΟ DREAMWEAVER Το Dreamweaver είναι ένας ε̟εξεργαστής HTML ̟ου δίνει στους χρήστες δυνατότητες ο̟τικού σχεδιασµού και ε̟εξεργασίας, σε συνδυασµό µε την άµεση ε̟εξεργασία του κώδικα. Το Dreamweaver βοηθάει στη µείωση του χρόνου ̟αραγωγής των το̟οθεσιών Ιστού σας και ̟αρέχει εργαλεία για τη διαχείριση και τη συντήρηση αυτών των το̟οθεσιών. Σας ε̟ιτρέ̟ει να δηµιουργείτε το̟οθεσίες Ιστού ε̟ο̟τικά χωρίς να ̟ρέ̟ει να γνωρίζετε λε̟τοµέρειες για HTML, CSS, και JavaScript. Κάντε εκκίνηση του Dreamweaver χρησιµο̟οιώντας το εικονίδιο συντόµευσης του ̟ρογράµµατος το ο̟οίο βρίσκεται στην ε̟ιφάνεια εργασίας, ̟ατώντας 2κλικ. Εναλλακτικά δείξτε στο µενού έναρξη/όλα τα ̟ρογράµµατα και ε̟ιλέγετε Dreamweaver (για να ανοίξει το µενού έναρξη µ̟ορείτε να ̟ατάτε το κουµ̟ί των windows).

Το Dreamweaver ̟αρέχει δύο ε̟ιλογές χώρους εργασίας για τους χρήστες το Designer (Σχεδιαστή) και το Coder (Προγραµµατιστή). Ο Χώρος Σχεδιαστή ενσωµατώνει όλα τα ̟αράθυρα και τα ̟άνελ του Dreamweaver σε ένα ̟εριβάλλον βελτιστο̟οιηµένο για την ο̟τική δηµιουργία το̟οθεσιών Ιστού, ιδανικό για σχεδιαστές. Μ̟ορείτε να εναλλάσσεστε α̟ό τον ένα χώρο εργασίας στον άλλο ό̟οτε θέλετε ε̟ιλέγοντας Edit/ Preferences, ε̟ιλέγοντας την κατηγορία General και ̟ατώντας το κουµ̟ί Change Workspace (Αλλαγή χώρου εργασίας). Αν αλλάξετε τις ρυθµίσεις χώρου εργασίας, ̟ρέ̟ει να κλείσετε και να ξανανοίξετε το Dreamweaver για να ισχύσει η αλλαγή.

Σελίδα Εκκίνησης Αν είναι η ̟ρώτη φορά ̟ου ανοίγετε το Dreamweaver, ̟ρέ̟ει να δείτε µια σελίδα εκκίνησης (Start Page) ̟ου ̟εριέχει συνδέσµους µε ̟ρόσφατα έγγραφα, την ε̟ιλογή δηµιουργίας εγγράφου α̟ό µια ̟οικιλία τύ̟ων αρχείων, δείγµατα σχεδίων σελίδων ̟ου µ̟ορούν να σας δώσουν µια αφετηρία για την κατασκευή των δικών σας το̟οθεσιών ̟όρους του ̟ρογράµµατος. Εξ ορισµού, η σελίδα εκκίνησης εµφανίζεται κάθε φορά ̟ου ανοίγετε το Dreamweaver εκτός αν ενεργο̟οιήσετε το ̟λαίσιο ελέγχου Don’t Show again (Να µην εµφανιστεί ξανά). Όταν αρχίσετε να δηµιουργείτε µια σελίδα ή να εξερευνάτε τις υ̟όλοι̟ες ε̟ιλογές της ενότητας Get Started (Ξεκίνηµα), η σελίδα εκκίνησης κλείνει µόνη της. Copyright© 2009-2012 -SYSTEM- All rights reserved

7/97

8/97

Εξερεύνηση του χώρου εργασίας ΟΜΑ∆ΕΣ ΠΑΝΕΛ ΣΕΛΙ∆Α ΕΚΚΙΝΗΣΗΣ ΓΡΑΜΜΗ ΕΡΓΑΛΕΙΩΝ ΕΙΣΑΓΩΓΗΣ

ΕΠΙΘΕΩΡΗΤΗΣ Ι∆ΙΟΤΗΤΩΝ

9/97

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

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

ΕΙΚΟΝΑ

ΗΜΕΡΟΜΗΝΙΑ

ΠΡΟΤΥΠΑ

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

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

ΠΟΛΥΜΕΣΑ

10/97

Για να κάνετε α̟όκρυψη της γραµµής εργαλείων 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 (Μεγέθυνση) σας ε̟ιτρέ̟ουν αντίστοιχα να ε̟ιλέγετε, να κυλάτε τη σελίδα, να µεγεθύνετε ή να σµικρύνετε τη σελίδα. Το ε̟όµενο χειριστήριο δείχνει το τρέχον ̟οσοστό µεγέθυνσης της σελίδας. Τέλος η γραµµή κατάσταση σας ενηµερώνει για την κωδικο̟οίηση του κειµένου σελίδας. Η κωδικο̟οίηση λέει στο φυλλοµετρητή ̟οιο σύνολο χαρακτήρων ̟ρέ̟ει να χρησιµο̟οιήσει για την εµφάνιση των γραµµατοσειρών στη σελίδα.

11/97

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

12/97

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

13/97

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

Το ̟ρώτο βήµα της δηµιουργίας µιας το̟οθεσίας Ιστού είναι να ορίσετε ή να δηµιουργήσετε στον υ̟ολογιστή σας το φάκελο ̟ου θα ̟εριέχει όλα όσα θα ̟εριέχονται στην το̟οθεσία. Αυτή η διαδικασία ονοµάζεται ορισµός το̟ικής το̟οθεσίας. Ο καθοριζόµενος φάκελος, γνωστός ως το̟ικός βασικός φάκελος (local root folder), θέτει τα όρια της το̟ικής το̟οθεσίας ̟ου βρίσκεται στο σκληρό σας δίσκο και λειτουργεί ως είδωλο της α̟οµακρυσµένης το̟οθεσίας, η ο̟οία είναι η ̟ραγµατική το̟οθεσία στο διακοµιστή Ιστού ̟ου θα βλέ̟ουν οι ε̟ισκέ̟τες σας. Ο ορισµός µιας το̟ικής το̟οθεσίας σας δίνει τη δυνατότητα να διατηρείτε την ίδια ιεραρχία φακέλων µεταξύ της το̟ικής και της α̟οµακρυσµένης έκδοσης, ̟ράγµα κρίσιµο στη δηµιουργία και τη διατήρηση µιας λειτουργικής το̟οθεσίας. Η δηµιουργία µιας το̟ικής το̟οθεσίας, η ο̟οία α̟ό τον το̟ικό βασικό φάκελο µέσα στον ο̟οίο κατασκευάζετε τη δοµή των αρχείων και των φακέλων της το̟οθεσίας σας, δεν ε̟ιτρέ̟ει στην το̟οθεσία να α̟οθηκεύσει αρχεία έξω α̟ό τον το̟ικό βασικό φάκελο. Τα αρχεία του σκληρού σας δίσκου ̟ου βρίσκονται έξω α̟ό τον το̟ικό βασικό φάκελο δεν µ̟ορούν να µεταφερθούν στον α̟οµακρυσµένο διακοµιστή. Αυτός ο ̟εριορισµός εξασφαλίζει ότι, καθώς ανα̟τύσσετε την το̟οθεσίας σας, δε θα έχετε ̟ρόσβαση σε αρχεία ̟ου δε θα είναι διαθέσιµα όταν οι το̟οθεσία γίνει διαθέσιµη στο ∆ιαδίκτυο. Πολλές λειτουργίες του Dreamweaver, ό̟ως η ενηµέρωση όλων των αναφορών ̟ρος ένα αρχείο ̟ου έχει µετακινηθεί σε διαφορετική θέση στην το̟οθεσία, α̟αιτούν τον ορισµό µιας το̟ικής το̟οθεσίας ώστε να λειτουργήσουν. Πρέ̟ει συστηµατικά να δηµιουργείτε και να εργάζεστε ̟άντα σε το̟ικές το̟οθεσίες. Αν δεν το κάνετε αυτό, ίσως έχετε ̟ροβλήµατα µε τους συνδέσµους, τις διαδροµές και τη διαχείριση των αρχείων. Για να Ορίσετε µια το̟ική το̟οθεσία σε Έκδοση cs4 ̟ρέ̟ει να δείξετε: ∆είξτε στο µενού 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 Copyright© 2009-2012 -SYSTEM- All rights reserved

14/97

server technology such as? (θέλετε να χρησιµο̟οιήσετε τεχνολογία διακοµιστή ό̟ως οι 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 (Τέλος). Για να Ορίσετε µια το̟ική το̟οθεσία σε Έκδοση cs5 ̟ρέ̟ει να δείξετε: ∆είξτε στο µενού Site (Το̟οθεσία)/New Site (Νέα το̟οθεσία)/̟ληκτρολογήστε όνοµα στο Site name/ ορίστε φάκελο α̟οθήκευσης του site στο Local site folder. Με ενεργο̟οιηµένη την καρτέλα Advanced Settings / Local info ̟ληκτρολογήστε στο ̟εδίο Web URL την διεύθυνση Ιστού της το̟οθεσίας σας. Πατήστε στο κουµ̟ί Save.

15/97

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

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

Χρήση της οθόνης Υ̟οδοχής Η οθόνη υ̟οδοχής α̟οτελεί τον ̟ιο γρήγορο τρό̟ο για να δηµιουργήσετε µια νέα σελίδα HTML. Εµφανίζεται όταν κλείνετε όλα τα υ̟όλοι̟α ̟αράθυρα εγγραφών. Για να δηµιουργήσετε µια νέα σελίδα α̟ό την οθόνη υ̟οδοχής: Όλα τα στοιχεία στην οθόνη υ̟οδοχής είναι σύνδεσµοι. Στην ενότητα Create New (∆ηµιουργία νέου) ̟ατήστε στην ε̟ιλογή HTML. Η εφαρµογή θα δηµιουργήσει µια νέα κενή σελίδα. Για να δηµιουργήσετε µια νέα σελίδα α̟ό το ̟λαίσιο διαλόγου New Document: ∆είξτε στο µενού File/ New, θα εµφανιστεί το ̟λαίσιο διαλόγου New Document µε ενεργή την καρτέλα Blank Page (κενή σελίδα) α̟ό το ̟εδίο Page Type της δεύτερης στήλης ε̟ιλέγουµε HTML ενώ α̟ό την Τρίτη στήλη Layout την ε̟ιλογή none. Πατήστε στο κουµ̟ί Create (∆ηµιουργία).

Α̟οθήκευση της σελίδας Για να α̟οθηκεύσετε τη σελίδα σας, δείξτε στο µενού File/ save ή save as Συµβουλές: Μη χρησιµο̟οιείτε ̟οτέ κενά διαστήµατα σε ονόµατα αρχείων. Χρησιµο̟οιήστε χαρακτήρες υ̟ογράµµισης ή ̟αύλες αντί για κενό. Μη χρησιµο̟οιείτε ειδικούς χαρακτήρες, ό̟ως %, *, >, / Copyright© 2009-2012 -SYSTEM- All rights reserved

16/97

Μη χρησιµο̟οιείτε κόµµατα ή τελείες. Α̟οφύγετε να ξεκινάτε µε αριθµούς τα ονόµατα των αρχείων. ∆ιατηρήστε τα ονόµατα των φακέλων και των αρχείων όσο το δυνατόν µικρότερα.

17/97

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

ΑΛΛΑΓΗ CS5

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

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

Εµφάνιση – Α̟όκρυψη της Document ∆είξτε View/ Toolbars/ Document

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

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

18/97

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

19/97

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

Ορισµός Χρώµατος φόντου Στο Dreamweaver µ̟ορείτε να αλλάξετε εύκολα το χρώµα του φόντου µιας σελίδας, µε τη βοήθεια µιας ̟αλέτας χρωµάτων γνωστής ως ̟αλέτας χρωµάτων ασφαλών για τον ιστό. Αυτή η ̟αλέτα είναι µια συλλογή α̟ό 216 χρώµατα ̟ου εµφανίζονται όµοια στους φύλλοµετρητές.

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

20/97

Παρατηρήστε ότι τα δεκαεξαδικά ισοδύναµα των χρωµάτων εµφανίζονται στην κορυφή της ̟αλέτας καθώς µετακινείτε το σταγονόµετρο ε̟άνω α̟ό τα δείγµατα. Στην 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

21/97

• • •

Η ε̟ιλογή 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) ̟εριθώριο της σελίδας.

22/97

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

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

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

23/97

ΚΕΦΑΛΑΙΟ 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 + ∆ιάστηµα όσες φορές θέλετε.

24/97

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

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

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

25/97

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

Μορφο̟οίηση Χαρακτήρων Η ̟ιο συνηθισµένη µορφο̟οίηση του κειµένου είναι η έντονη ή η ̟λάγια γραφή και φυσικά το Dreamweaver υ̟οστηρίζει αυτή τη λειτουργία είτε µέσω σήµανσης HTML είτε ενός κανόνα CSS. Μ̟ορεί να εφαρµόσει ̟ολλά άλλα στυλ κειµένου, µερικά α̟ό τα ο̟οία αφορούν εξειδικευµένες χρήσεις. Copyright© 2009-2012 -SYSTEM- All rights reserved

26/97

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

Αλλαγή Γραµµατοσειράς Εφαρµόστε α̟ό τον ε̟ιθεωρητή Ιδιοτήτων ή α̟ό το µενού Format/ Font

Αλλαγή Γραµµατοσειράς Σελίδας ∆είξτε στο µενού Modify/ Page Properties/ Appearance/ Page Font

27/97

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

Ορισµός Χρώµατος Γραµµατοσειράς • ∆είξτε στο µενού Modify/ Page Properties/ Appearance/ Text Color (χρώµα κειµένου) • Α̟ό το κουµ̟ί Text Color του Ε̟ιθεωρητή Ιδιοτήτων

28/97

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

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

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

29/97

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

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

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

30/97

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

31/97

ΚΕΦΑΛΑΙΟ 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

32/97

• • • • • • • • • • •

•

εικόνα, ό̟ως στην ̟ερί̟τωση ενός εφέ εναλλαγής (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 (̟ερίγραµµα)

33/97

Για να αλλάξετε χρώµα στο ̟ερίγραµµα µε ε̟ιλεγµένη την εικόνα µεταφερθείτε στον κώδικα και στον κώδικα της εικόνας και το̟οθετήστε τον κέρσορα ̟ριν την λέξη src= , ̟ατήστε το ̟λήκτρο space α̟ό το ̟ληκτρολόγιο και ε̟ιλέξτε να ̟ροσθέσετε ένα ̟εδίο styles=””. Θα εµφανιστεί µ̟ροστά σας το ̟αρακάτω ̟τυσσόµενο µενού. ∆ι̟λο̟ατήστε στην ε̟ιλογή Border - Color, α̟ό το ̟τυσσόµενο µενού των χρωµάτων ε̟ιλέξτε το χρώµα ̟ου θέλετε και γυρίστε σε ̟ροβολή σχεδίασης για να δείτε το α̟οτέλεσµα. Άλλος ένας τρό̟ος αλλαγής χρώµατος σε ̟ερίγραµµα εικόνας είναι ο εξής: Για να αλλάξετε χρώµα στο ̟ερίγραµµα µε ε̟ιλεγµένη την εικόνα, µεταφερθείτε στο ̟άνελ CSS STYLES (εµφανίστε το ̟άνελ α̟ό το µενού Window/CSS STYLES), στο ̟άνελ ε̟ιλέξτε Current για να εµφανιστεί το CSS το ο̟οίο έχει καθοριστεί για την ε̟ιλεγµένη εικόνα. Πατήστε στην ε̟ιλογή Add Property και α̟ό το ̟τυσσόµενο µενού ε̟ιλέξτε τη φράση border-color. Ακριβώς α̟ό ̟άνω θα εµφανιστεί ένα ̟εδίο καθορισµού χρώµατος ̟εριγράµµατος. Πατήστε στο κουµ̟ί δείγµατος χρώµατος και ε̟ιλέξτε το χρώµα ̟ου θέλετε να έχει το ̟ερίγραµµα της εικόνας.

Εναλλακτικό Κείµενο σε Εικόνες Είναι συνήθως αόρατα τµήµατα των Ιστοσελίδων και βοηθούν τόσο εσάς όσο και τους χρήστες της το̟οθεσίας σας. Alt

Ε̟ιλέξτε την εικόνα και στον Ε̟ιθεωρητή Ιδιοτήτων στο ̟εδίο ̟ληκτρολογήστε το κείµενο ̟ου θέλετε.

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

34/97

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

Για να εµφανίσετε το ̟άνελ Assets ∆είξτε στο µενού Window/ Assets.

Εισαγωγή Εικόνας α̟ό το ̟άνελ Assets Πατήστε στο έγγραφο για να το̟οθετήσετε το σηµείο εισαγωγής εκεί ̟ου θέλετε να εµφανιστεί η εικόνα.

35/97

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

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

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

New Favorites Folder (Νέος

Προσθήκη εικόνας µέσα σε φάκελο στα Αγα̟ηµένα Σύρετε την εικόνα ̟ου θέλετε µέσα στο φάκελο των αγα̟ηµένων

36/97

ΚΕΦΑΛΑΙΟ 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

37/97

Εισαγωγή εικόνας σε ∆εσµευτικό Θέσης Αν δεν έχετε την τελική εικόνα, µ̟ορείτε να ̟ροσθέσετε ένα δεσµευτικό θέσης γι’ αυτή. Ένα δεσµευτικό θέσης (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 (Ξάκρισµα) του ε̟ιθεωρητή ιδιοτήτων.

38/97

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

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

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

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

39/97

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

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

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

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

40/97

ΚΕΦΑΛΑΙΟ 16ο ∆ΗΜΙΟΥΡΓΙΑ ΣΥΝ∆ΕΣΜΩΝ

HTML (Hypertext Markup Language - Γλώσσα Σήµανσης Υ̟ερ-κειµένου) Η δύναµη της HTML ̟ροέρχεται α̟ό την ικανότητα της να συνδέει κείµενο µε άλλα έγγραφα µέσω συνδέσµοων ̟ου δεν είναι ούτε σειριακοί ούτε γραµµικοί. Ο φυλλοµετρητής συνήθως ε̟ισηµαίνει αυτές τις ̟εριοχές (συνήθως µε χρώµα ή υ̟ογράµµιση) για να δείξει ότι είναι σύνδεσµοι. Ε̟ειδή οι σύνδεσµοι α̟οτελούν τόσο µεγάλο µέρος της ανά̟τυξης µιας το̟οθεσίας Ιστού, υ̟άρχουν ̟ολλοί τρό̟οι για να τους δηµιουργήσετε. Εσείς θα βρείτε ̟οια µέθοδος είναι η καλύτερη για εσάς.

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

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

41/97

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

∆ηµιουργία Συνδέσµων Υ̟ερ-κειµένου Ε̟ιλέξτε τη λέξη µεταφερθείτε στον ε̟ιθεωρητή ιδιοτήτων/ ̟εδίου Link/ browse for file (Αναζήτηση αρχείου)

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

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

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

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

42/97

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

43/97

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

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

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

Εργαλείο

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

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

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

44/97

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

45/97

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

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

46/97

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

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

47/97

αναδυόµενο µενού, και έ̟ειτα ε̟ιλέξτε 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 (Παρεµβολή γραµµών ή στηλών).

48/97

Αλλαγή µεγέθους στοιχείων ̟ίνακα Πατήστε στο κάτω ή το δεξιό όριο του ̟ίνακα. Ο ̟ίνακας θα ε̟ιλεγεί και γύρω του θα εµφανιστεί ένα ̟ερίγραµµα µε λαβές αλλαγής µεγέθους. Σύρετε µια α̟ό τις λαβές αλλαγής µεγέθους. Για να αυξήσετε το ̟λάτος του ̟ίνακα, σύρετε τη λαβή στη δεξιά ̟λευρά του ̟ίνακα για να αυξήσετε το ύψος του ̟ίνακα, σύρετε τη λαβή στην κάτω ̟λευρά του ̟ίνακα, για να αυξήσετε το µέγεθος του ̟ίνακα και ̟ρος τις δύο διαστάσεις ταυτόχρονα, σύρετε τη λαβή στην κάτω δεξιά γωνία του. Κρατώντας ̟ατηµένο το ̟λήκτρο 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 (Αριστερά) το̟οθετεί τον ̟ίνακα στην αριστερή ̟λευρά της σελίδας και ε̟ιτρέ̟ει το κείµενο να αναδι̟λωθεί στη δεξιά ̟λευρά του ̟ίνακα.

49/97

• •

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

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

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

50/97

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

51/97

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

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

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

52/97

ΚΕΦΑΛΑΙΟ 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, για να δια̟ιστώσετε ̟ως θα φαίνονται αυτή σε οθόνες διαφορετικών µεγεθών,

53/97

χρησιµο̟οιώντας το µενού Edit/Preferences/Status bar Window Size (Μέγεθος Παραθύρου). Στο κάτω µέρος του ̟αραθύρου, ̟ατήστε στο µαύρο βέλος στα δεξιά της εµφάνισης τρέχοντος µεγέθους ̟αραθύρου. Ε̟ιλέξτε την ανάλυση ̟ου θέλετε.

54/97

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

55/97

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

56/97

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

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

57/97

Κατηγορίες 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) – Περιθώριο (Ίδια για όλα, Ε̟άνω, ∆εξιά, Κάτω, Αριστερά)

58/97

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 Rule στο κάτω µέρος του ̟άνελ CSS Styles Selector Type (Τύ̟ος ε̟ιλογέα)

59/97

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

60/97

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 (Περίγραµµα)

61/97

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

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

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

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

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

62/97

Αναδηµιουργία στοιχείου βιβλιοθήκης Ε̟ιλέξτε το στοιχείο και ̟ατήστε στο κουµ̟ί Recreate του ε̟ιθεωρητή ιδιοτήτων

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

63/97

ΚΕΦΑΛΑΙΟ 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

64/97

•

ορισµένες σε ̟οσοστά στήλες ή γραµµές, δίνεται χώρος µετά τις ορισµένες σε ̟ίξελ στήλες ή γραµµές και ̟ριν τις ορισµένες σε σχετικές µονάδες. 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

65/97

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

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

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

66/97

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

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

67/97

µια ετικέτα φόρµας (form tag). Αν ε̟ιλέξετε No, το ̟εδίο ή τα κουµ̟ιά δε θα λειτουργούν ως τµήµα φόρµας.

Οι ε̟ιλογές ̟ου ισχύουν µόνο για τις φόρµες είναι οι εξής: • Form ID (Αναγνωριστικό φόρµας): Αν ̟ρόκειται να κάνετε ε̟ικύρωση (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 (Κωδικού ̟ρόσβασης).

68/97

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

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

Προσθήκη ̟λαισίου ελέγχου Τα ̟λαίσια ελέγχου (Check box) δίνουν τη δυνατότητα στους χρήστες να διαλέξουν µια ή ̟ερισσότερες ε̟ιλογές α̟ό µια οµάδα σχετικών µεταξύ τους στοιχείων. Τα ̟λαίσια ελέγχου συνήθως χρησιµο̟οιούνται όταν θέλετε οι χρήστες να µ̟ορούν να ενεργο̟οιήσουν όσο το δυνατόν ̟ερισσότερες ε̟ιλογές. Οι ε̟ιλογές ̟ου έχετε είναι: Copyright© 2009-2012 -SYSTEM- All rights reserved

69/97

•

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

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

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

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

70/97

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

Προσθήκη στοιχείων Λίστας Κειµένου Μ̟ορείτε να δηµιουργήσετε µια κυλιόµενη λίστα ή ένα κυλιόµενο µενού α̟ό τα ο̟οία οι ε̟ισκέ̟τες θα κάνουν ε̟ιλογές. Μια κυλιόµενη λίστα (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.

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

71/97

ο̟οίων αρχεία γραφικών ή αρχεία 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):Αν χρησιµο̟οιήσετε ̟ροτρο̟ή, ενεργο̟οιήστε το συγκεκριµένο ̟λαίσιο ελέγχου.

72/97

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

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

73/97

Για να εισάγετε µια εναλλαγή εικόνων, δείξτε στο µενού 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

74/97

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

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

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

Προσθήκη συµ̟εριφορών σε εικονοχάρτες Η µετακίνηση του δείκτη του ̟οντικιού ε̟άνω σε ο̟οιοδή̟οτε σηµείο µιας τυ̟ικής εικόνας εναλλαγής καλεί το σενάριο της JavaScript και ̟ροκαλεί την εναλλαγή της Copyright© 2009-2012 -SYSTEM- All rights reserved

75/97

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

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

Αλλάξτε τη σειρά των συµ̟εριφορών Ε̟ιλέξτε ένα συµβάν και χρησιµο̟οιήστε το ε̟άνω ή το κάτω βέλος για να αλλάξετε τη σειρά.

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

∆ηµιουργία µηνύµατος γραµµής κατάστασης Ένα µήνυµα γραµµής κατάστασης µ̟ορεί να δώσει στους χρήστες ̟ερισσότερες ̟ληροφορίες σχετικά µε το ̟ου θα τους οδηγήσει ένας σύνδεσµος. Αυτό το µήνυµα, ̟ου

76/97

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

77/97

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

78/97

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

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

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

79/97

ΚΕΦΑΛΑΙΟ 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 (Προσθήκη καρτέλας)

80/97

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

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

81/97

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

82/97

•

• • •

•

Μενού 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 δεν ε̟ιτρέ̟ει την ε̟εξεργασίας του. Η ε̟ιλογή αυτή δε δουλεύει αν δεν έχετε ορίσει α̟οµακρυσµένη το̟οθεσία.

83/97

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

∆ηµιουργία φακέλου Ενώ βρίσκεστε στο ̟άνελ Files, ̟ατήστε µε δεξί ̟λήκτρο / New Folder

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

Μετακίνηση αρχείου έξω α̟ό το φάκελο Ενώ βρίσκεστε στο ̟άνελ Files, ̟ατήστε ε̟άνω στο αρχείο /κρατήστε ̟ατηµένο και σύρετε κάτω α̟ό το φάκελο.

∆ιαγραφή αρχείου Στο ̟άνελ Files, ̟ατήστε ε̟άνω στο αρχείο/ Delete/ ΟΚ στο µήνυµα της ε̟ιβεβαίωσης.

∆ιαγραφή Φακέλου Στο ̟άνελ Files, ̟ατήστε ε̟άνω στον φάκελο/Delete/ ΟΚ στο µήνυµα της ε̟ιβεβαίωσης.

84/97

ΚΕΦΑΛΑΙΟ 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/ ΟΚ. Στο Dreamweaver CS5» Για να ορίσετε σύνδεση µε την α̟οµακρυσµένη το̟οθεσία δείξτε στο µενού Site/ New Site/ Manage Sites/ Edit / καρτέλα Advanced Settings / Local info / Default image folder (Α̟οµακρυσµένος Φάκελος) καθορίστε τον α̟οµακρυσµένο φάκελο και ̟ατήστε Save.

85/97

ΚΕΦΑΛΑΙΟ 34ο ΑΝΕΒΑΣΜΑ ΚΑΙ ΣΥΓΚΑΛΥΨΗ ΑΡΧΕΙΩΝ Γιατί κάνουµε ανέβασµα αρχείων Αφού ορίσετε µια α̟οµακρυσµένη το̟οθεσία ̟ρέ̟ει να ανεβάσετε τα αρχεία. Μ̟ορείτε να ανεβάσετε ολόκληρη την το̟οθεσία και έτσι να αντικαταστήσετε όλα τα αρχεία ̟ου υ̟άρχουν στο διακοµιστή ή µόνο τα νέα ή τα τρο̟ο̟οιηµένα. Α̟ό το ̟άνελ Files, ε̟ιλέξτε µία το̟οθεσία ̟χ το USB/ Put/ ΟΚ. Site/ Manage Sites/ Edit/ καρτέλα Advance settings / Cloaking/ Cloak files ending with και ̟ληκτρολογήστε τις καταλήξεις.png .fla .pdf./ Save

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

86/97

ΚΕΦΑΛΑΙΟ 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

87/97

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

88/97

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

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

Commands / Check

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

89/97

ΚΕΦΑΛΑΙΟ 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 και ̟ερικό̟τει το ̟εριεχόµενο ̟ου δε χωράει χωρίς να ̟ροσθέτει ράβδους κύλισης.

90/97

• •

Η ε̟ιλογή 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

91/97

φυλλοµετρητές. Αν και οι ̟ερισσότεροι σύγχρονοι φυλλοµετρητές υ̟οστηρίζουν τις στρώσεις, οι ̟αλαιότερες εκδόσεις εµφανίζουν τα ̟εριεχόµενα των 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 στοιχείων σε ̟ίνακα, µ̟ορείτε να κάνετε όλες τις α̟αραίτητες ρυθµίσεις στον ̟ίνακα.

92/97

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

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

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

93/97

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

Ορισµός καννάβου σε κουκκίδες Μενού View/ Grid/ Grid Settings/ Display: Dots

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

Εµφάνιση/ Α̟όκρυψη Οδηγών Οι οδηγοί µ̟ορούν να κάνουν σχεδόν τα ίδια ̟ράγµατα µε τον κάνναβο και ακόµη ̟ερισσότερα. Μ̟ορείτε να τους κλειδώσετε στη θέση τους, και να τους ορίσετε σε ̟οσοστά της σελίδας, ε̟ίσης µ̟ορείτε να ορίσετε να έλκονται τα στοιχεία α̟ό τους οδηγούς. Μενού View/ Guides

Προσκόλληση στους Οδηγούς Μενού View/ Guides/ Snap to Guides.

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

94/97

ΚΕΦΑΛΑΙΟ 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

95/97

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

96/97

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

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

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

97/97