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

Το Πρόγραμμα Dreamweaver
(Προχωρημένα Θέματα)

 

Δημιουργία Φόρμας

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

Το αντικείμενο φόρμας είναι ένα αόρατο στοιχείο (invisible element) και όταν προσθέτουμε μια φόρμα σε μια ιστοσελίδα, το DreamWeaver την παριστά σαν ένα κόκκινο πλαίσιο με διάστικτες γραμμές, αν έχουμε επιλέξει προηγουμένως το πλαίσιο ελέγχου Form Delimiter της κατηγορίας Invisible Elements του πλαισίου διαλόγου Preferences.

Για να εισάγουμε μια φόρμα, ανοίγουμε την κατηγορία Forms της παλέτας αντικειμένων, τοποθετούμε τον δρομέα στο σημείο που θέλουμε να εισάγουμε τη φόρμα και κάνουμε κλικ στο εικονίδιο Insert Form ή επιλέγουμε Form από το μενού Insert. Θα εμφανισθεί ένα πλαίσιο με κόκκινη διάστικτη γραμμή που παριστά τη φόρμα.

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

Για να επιλέξουμε μια φόρμα, κάνουμε κλικ στην κόκκινη διάστικτη γραμμή και οι ιδιότητες της φόρμας που εμφανίζονται στον Property Inspector είναι οι εξής

Για να διαγράψουμε μια φόρμα, ο ευκολότερος τρόπος είναι να κάνουμε δεξί κλικ στην κόκκινη διάστικτη γραμμή και να επιλέξουμε Remove Tag <form> από το πτυσσόμενο μενού.

 

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

Για να προσθέσουμε ένα πεδίο κειμένου σε μια φόρμα, κάνουμε κλικ στο σημείο της φόρμας που θέλουμε να το εισάγουμε και μετά στο εικονίδιο Insert Text Field ή επιλέγουμε Text Field από το υπομενού Form Objects4του μενού Insert. Αν δεν έχουμε δημιουργήσει μια φόρμα προηγουμένως ή αν εισάγουμε το πεδίο κειμένου εκτός φόρμας, θα εμφανισθεί ένα πλαίσιο διαλόγου που θα μας ρωτάει αν θέλουμε να εισαχθεί ένα form tag. Αν απαντήσουμε Yes, το DreamWeaver θα εισάγει μια φόρμα γύρω από το πεδίο κειμένου που δημιουργήσαμε.

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

Στο πλαίσιο κειμένου Char Width μπορούμε να θέσουμε το μέγεθος του πεδίου κειμένου και τον αριθμό των χαρακτήρων που θα είναι ορατοί μέσα στο πεδίο. Το πλαίσιο κειμένου Max Chars περιορίζει τον αριθμό των χαρακτήρων που μπορούμε να εισάγουμε μέσα σ’ ένα πεδίο κειμένου. Πρέπει να έχουμε υπόψη μας ότι ένα πεδίο κειμένου μπορεί να περιέχει μέχρι 32.700 χαρακτήρες.

Στην ομάδα επιλογών Type μπορούμε να επιλέξουμε ένα από τα εξής τρία πλήκτρα επιλογής για να ορίσουμε τον τύπο ενός πεδίου κειμένου :

Σ’ ένα πεδίο κειμένου πολλών γραμμών, στη θέση του πλαισίου κειμένου Max Chars εμφανίζεται το πλαίσιο κειμένου Num Lines, όπου μπορούμε να εισάγουμε τον αριθμό των γραμμών του πεδίου κειμένου. Ακόμη, γίνεται ενεργή η πτυσσόμενη λίστα Wrap, όπου μπορούμε να επιλέξουμε αν θα γίνεται αναδίπλωση σε νέα γραμμή ή όχι. Στο πλαίσιο κειμένου Init Val μπορούμε να προσθέσουμε ένα κείμενο που θα εμφανίζεται αρχικά μέσα στο πεδίο κειμένου. Το κείμενο αυτό μπορεί να είναι κάποιες οδηγίες ή μια εξ ορισμού τιμή που ο χρήστης θα μπορεί να αλλάξει αν θέλει.

 

Προσθήκη Πλήκτρων Επιλογής και Πλαισίων Ελέγχου

Για να δημιουργήσουμε ένα πλήκτρο επιλογής, επιλέγουμε το αντικείμενο Insert Radio Button από την παλέτα αντικειμένων ή Radio Button από το υπομενού Form Objects4του μενού Insert. Δίνουμε σ’ όλα τα πλήκτρα επιλογής το ίδιο όνομα για να τα ομαδοποιήσουμε.

Από την ομάδα επιλογών Initial State μπορούμε να επιλέξουμε αν ένα πλήκτρο επιλογής θα είναι επιλεγμένο (Checked) ή όχι (Unchecked) όταν ανοίγει η φόρμα. Στο πλαίσιο κειμένου Checked Value μπορούμε να ορίσουμε μια τιμή όταν θα επιλέγουμε ένα πλήκτρο επιλογής και η οποία θα χρησιμοποιηθεί από το script επεξεργασίας της φόρμας.

Για να δημιουργήσουμε ένα πλαίσιο ελέγχου, επιλέγουμε το αντικείμενο Insert Checkbox από την παλέτα αντικειμένων ή Check Box από το υπομενού Form Object4του μενού Insert. Τα πλαίσια ελέγχου δεν τα ομαδοποιούμε.

 

Προσθήκη Λιστών και Σύνθετων Πλαισίων

Με το εικονίδιο Insert List/Menu μπορούμε να εισάγουμε μια λίστα τιμών από τις οποίες μπορεί να επιλέξει ο χρήστης. Μπορούμε να δημιουργήσουμε είτε μια λίστα με συγκεκριμένο αριθμό γραμμών ή ένα πτυσσόμενο μενού (σύνθετο πλαίσιο) που εμφανίζει όλες τις τιμές της λίστας. Για να δημιουργήσουμε μια λίστα, επιλέγουμε το αντικείμενο Insert List/Menu από την παλέτα αντικειμένων ή επιλέγουμε List/Menu από το υπομενού Form Object4του μενού Insert.

Στον Property Inspector μπορούμε να δώσουμε ένα όνομα στη λίστα και να επιλέξουμε τον τύπο της από τα πλήκτρα επιλογής Menu και List της ομάδας επιλογών Type. Αν επιλέξουμε λίστα, θα ενεργοποιηθεί το πλαίσιο κειμένου Height για να ορίσουμε πόσες γραμμές θα είναι ορατές στη λίστα καθώς και το πλαίσιο ελέγχου Allow multiple για να μπορούμε να επιλέγουμε πολλαπλές τιμές από τη λίστα με το πλήκτρο Control.

Για να καταχωρήσουμε τιμές στη λίστα, κάνουμε κλικ στο πλήκτρο List Values και τις καταχωρούμε στο αντίστοιχο πλαίσιο διαλόγου. Για κάθε στοιχείο εισάγουμε μια ετικέτα Item Label και μια τιμή Value, όπου το πρώτο είναι αυτό που βλέπει και επιλέγει ο χρήστης και το δεύτερο είναι αυτό που θα υποβληθεί στο script ή στην εφαρμογή του διακομιστή για επεξεργασία. Μπορούν να έχουν και την ίδια τιμή. Αν επιλέξουμε ένα στοιχείο στο πλαίσιο Initially Selected, θα είναι αυτό το προεπιλεγμένο, αλλιώς θα είναι το πρώτο στοιχείο της λίστας.

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

 

Προσθήκη Πλήκτρων Εντολής

Σε μια φόρμα μπορούμε να προσθέσουμε τους εξής τέσσερις διαφορετικούς τύπους πλήκτρων εντολής :

Για να εισάγουμε ένα πλήκτρο εντολής σε μια φόρμα, κάνουμε κλικ στο εικονίδιο Insert Button από την παλέτα αντικειμένων ή επιλέγουμε Button από το υπομενού Form Objects4του μενού Insert και το DreamWeaver προσθέτει ένα πλήκτρο του τύπου Submit.

Στην ομάδα επιλογών Action μπορούμε να επιλέξουμε ένα τα τρία πλήκτρα επιλογής Submit form, Reset form και None για να πάρει το πλήκτρο εντολής την αντίστοιχη μορφή. Μπορούμε να δεχθούμε τα προεπιλεγμένα ονόματα που δίνει το DreamWeaver στα πλήκτρα εντολής ή να δώσουμε δικά μας ονόματα και μπορούμε να ορίσουμε και δικές μας ετικέτες στο πλαίσιο κειμένου Label.

Μπορούμε να προσθέσουμε ένα απλό πλήκτρο εντολής (command button) οπουδήποτε σε μια ιστοσελίδα και όχι απαραίτητα μέσα σε μια φόρμα, κάνοντας κλικ στο εικονίδιο Insert Button και επιλέγοντας None σαν ενέργεια. Μπορούμε να εφαρμόσουμε μια συμπεριφορά σ’ ένα πλήκτρο εντολής που να εκκινεί από ένα κλικ πάνω του.

Για να προσθέσουμε ένα πεδίο εικόνας, κάνουμε κλικ στο εικονίδιο Insert Image Field από την παλέτα αντικειμένων ή επιλέγουμε Image Field από το υπομενού Form Object4του μενού Insert και επιλέγουμε μια εικόνα από το πλαίσιο διαλόγου Select Image Source. Όταν ο χρήστης κάνει κλικ στην εικόνα, υποβάλλονται τα περιεχόμενα της φόρμας καθώς και οι συντεταγμένες του σημείου όπου έκανε κλικ. Στον Property Inspector μπορούμε να δούμε το όνομα, το πλάτος, το ύψος, το αρχείο προέλευσης, το εναλλακτικό κείμενο και τις ιδιότητες στοίχισης της εικόνας.

 

Προσθήκη Μενού Μετάβασης

Ένα μενού μετάβασης (jump menu) είναι μια πτυσσόμενη λίστα που περιέχει δεσμούς με τους οποίους μπορούμε να πηγαίνουμε σ’ άλλες περιοχές του Internet ή σε διαφορετικές ιστοσελίδες μέσα στην τρέχουσα περιοχή. Για να προσθέσουμε ένα μενού μετάβασης, κάνουμε κλικ στο εικονίδιο Insert Jump Menu από την παλέτα αντικειμένων ή επιλέγουμε Jump Menu από το υπομενού Form Objects4του μενού Insert.

Στο πλαίσιο διαλόγου Insert Jump Menu μπορούμε να γράψουμε τα ονόματα των στοιχείων στο πλαίσιο κειμένου Text και το αντίστοιχο URL του δεσμού στο πλαίσιο κειμένου When Selected, Go To URL. Στο πλαίσιο κειμένου Menu Name δίνουμε ένα όνομα στο μενού μετάβασης.

Αν επιλέξουμε το πλαίσιο ελέγχου Insert Go Button After Menu, θα εμφανισθεί ένα πλήκτρο εντολής με την ετικέτα Go δίπλα στο μενού μετάβασης, για να μπορούμε να πηγαίνουμε στην αντίστοιχη ιστοσελίδα κάνοντας κλικ πάνω του. Αν επιλέξουμε το πλαίσιο ελέγχου Select First Item After URL Change, θα επανεμφανίζεται το πρώτο στοιχείο μετά από κάθε επιλογή μετάβασης.

Για να επεξεργαστούμε ένα μενού μετάβασης αφού το έχουμε δημιουργήσει, το επιλέγουμε και κάνουμε διπλό κλικ στη συμπεριφορά Jump Menu στον Behavior Inspector.

 

Αποστολή και Αντίδραση σε Δεδομένα Φόρμας

Τα δεδομένα που εισάγουμε σε μια φόρμα, μπορούμε να τα επεξεργαστούμε τοποθετώντάς τα σε μια βάση δεδομένων, στέλνοντάς τα σε μια διεύθυνση e-mail, στέλνοντάς τα πίσω στον φυλλομετρητή ή κάνοντας κάποιο άλλο είδος επεξεργασίας. Τα δεδομένα της φόρμας πρέπει να τα στείλουμε σ’ ένα script στον διακομιστή. Ορισμένα από τα είδη πληροφοριών που θα θέλαμε να περιέχει μια φόρμα είναι παραγγελίες, απαντήσεις σε ερωτήματα, σχόλια, βιβλία επισκεπτών, δημοσκοπήσεις ή ακόμα και λήψεις αρχείων.

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

 

Επικύρωση των Δεδομένων μιας Φόρμας

Πριν να δεχθούμε και να επεξεργαστούμε τα δεδομένα μιας φόρμας, πρέπει να βεβαιωθούμε ότι οι πληροφορίες είναι σωστές και στη σωστή μορφή. Προς τον σκοπό αυτό, το DreamWeaver χρησιμοποιεί τη συμπεριφορά Validate Form, η οποία απαιτεί από τον χρήστη να εισάγει σωστά τα δεδομένα της φόρμας πριν να τα υποβάλει σ’ ένα script ή σε μια εφαρμογή στον διακομιστή.

Μπορούμε να επικυρώσουμε μια ολόκληρη φόρμα προσαρτώντας την ενέργεια Validate Form στο πλήκτρο εντολής Submit ή να επικυρώσουμε μεμονωμένα πεδία μιας φόρμας προσαρτώντας την ενέργεια Validate Form σ’ αυτά. Στην πρώτη περίπτωση είναι το συμβάν onClick που εκκινεί τη συμπεριφορά και στη δεύτερη το συμβάν onBlur. Δημιουργούμε μια φόρμα που περιέχει πεδία κειμένου και για να την επικυρώσουμε, επιλέγουμε το πλήκτρο εντολής Submit ή ένα πεδίο κειμένου της φόρμας. Ανοίγουμε τον Behavior Inspector και προσθέτουμε τη συμπεριφορά Validate Form.

Θα εμφανισθεί το πλαίσιο διαλόγου Validate Form, το οποίο περιέχει στη λίστα Named Fields όλα τα πεδία κειμένου της φόρμας. Πρέπει να επιλέξουμε το πλαίσιο ελέγχου Required αν πρέπει να καταχωρήσουμε κάτι σ’ ένα πεδίο κειμένου.

Στην ομάδα επιλογών Accept υπάρχουν τα εξής τέσσερα πλήκτρα επιλογής :

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

 

Δημιουργία Περιοχής Web

Ανοίγουμε το παράθυρο Site για να ορίσουμε έναν κατάλογο root μιας περιοχής Web (Web site), ο οποίος είναι ο κύριος κατάλογος όπου βρίσκονται τα αρχεία και οι άλλοι κατάλογοι (υποκατάλογοι). Για να ανοίξουμε το παράθυρο Site μπορούμε να κάνουμε κλικ στο εικονίδιο Show Site από το Launcher ή το Mini-Launcher ή με την επιλογή Site του μενού Window ή με το πλήκτρο F8. Όταν ορίζουμε την περιοχή Web στο παράθυρο Site, το DreamWeaver θεωρεί αυτόν τον κατάλογο και όλους τους καταλόγους και τα αρχεία που περιέχει σαν τον αποκλειστικό χώρο μέσα στον οποίο θα εργαζόμαστε.

Όταν ορίζουμε την περιοχή Web στο DreamWeaver, στην ουσία ορίζουμε μια τοπική και μια απομακρυσμένη περιοχή. Εργαζόμαστε με τα αρχεία στην τοπική μας περιοχή και μετά τα εκφορτώνουμε (upload) στην απομακρυσμένη περιοχή με εντολές FTP του DreamWeaver. Για να δημιουργήσουμε μια νέα περιοχή Web στο DreamWeaver, επιλέγουμε New Site από το μενού Site του παραθύρου Site ή Edit Sites από την πτυσσόμενη λίστα Current Sites. Θα εμφανισθεί το πλαίσιο διαλόγου Site Definition στο οποίο θα εισάγουμε όλες τις διαδρομές προς την τοπική και την απομακρυσμένη περιοχή.

Αν έχουμε ήδη ορίσει μία τουλάχιστον περιοχή, θα εμφανισθεί το πλαίσιο διαλόγου Edit Sites, όπου μπορούμε να κάνουμε κλικ στο πλήκτρο New για να εμφανισθεί το πλαίσιο διαλόγου Site Definition. Στο πλαίσιο διαλόγου Edit Sites υπάρχουν όλες οι περιοχές Web που έχουμε δημιουργήσει και μπορούμε να χρησιμοποιήσουμε τα πλήκτρα Edit, Duplicate και Remove για να τις διαχειριστούμε.

Στο πλαίσιο διαλόγου Site Definition υπάρχουν πέντε κατηγορίες και πρέπει να βεβαιωθούμε ότι είναι επιλεγμένη η κατηγορία Local Info. Εισάγουμε ένα όνομα για την περιοχή Web στο πλαίσιο κειμένου Site Name. Στο πλαίσιο κειμένου Local Root Folder μπορούμε να εισάγουμε τη διαδρομή προς τον τοπικό φάκελο που θα αποτελεί το root της περιοχής Web ή να κάνουμε κλικ στο διπλανό εικονίδιο φακέλου για να αναζητήσουμε τον φάκελο και να τον επιλέξουμε.

Αν επιλέξουμε το πλαίσιο ελέγχου Refresh Local File List Automatically, θα ανανεώνεται αυτόματα η τοπική λίστα αρχείων κάθε φορά που προστίθεται ένα αρχείο στην περιοχή Web. Στο πλαίσιο κειμένου HTTP Address εισάγουμε το URL που τελικά θα οδηγεί στην ολοκληρωμένη περιοχή Web.

Αν επιλέξουμε το πλαίσιο ελέγχου Enable Cache, το DreamWeaver θα ενημερώνει αυτόματα τους δεσμούς στην περιοχή μας αν μετονομάσουμε ή μετακινήσουμε ένα αρχείο. Τα αρχεία της περιοχής μας θα εμφανισθούν στην περιοχή Local Folder του παραθύρου Site, ενώ στα αριστερά της θα υπάρχει η περιοχή Remote Site.

 

Προσθήκη Απομακρυσμένης Περιοχής

Αφού ορίσουμε μια περιοχή Web, μπορούμε να ορίσουμε μια απομακρυσμένη περιοχή, η οποία μπορεί να βρίσκεται είτε σ’ έναν διακομιστή ενός τοπικού δικτύου (LAN) ή σ’ έναν διακομιστή που προσπελαύνεται από το Internet μέσω FTP. Και με τους δύο τρόπους, αυτός ο διακομιστής εκτελεί το λογισμικό διακομιστή Web και κάνει την περιοχή μας Web διαθέσιμη είτε μέσω του Internet ή σ’ ένα εταιρικό δίκτυο (Intranet).

Για να προσθέσουμε πληροφορίες απομακρυσμένης περιοχής σε μια περιοχή Web, ανοίγουμε το πλαίσιο διαλόγου Edit Sites, επιλέγοντας Edit Sites από το μενού Site ή Edit Sites από την πτυσσόμενη λίστα Current Sites. Επιλέγουμε την περιοχή Web που θέλουμε και κάνουμε κλικ στο πλήκτρο Edit Στο πλαίσιο διαλόγου Site Definition επιλέγουμε την κατηγορία Remote Info. Στην πτυσσόμενη λίστα Access υπάρχουν οι εξής επιλογές : FTP, Local/Network και None.

Επιλέγουμε πρόσβαση Local/Network όταν ο απομακρυσμένος κατάλογος βρίσκεται μέσα στο τοπικό δίκτυο. Εισάγουμε τη σχετική διαδρομή στο πλαίσιο κειμένου Remote Folder. Θα πρέπει να γνωρίζουμε σε ποιον κατάλογο βρίσκονται τα αρχεία μας για να είναι προσπελάσιμα στο Web.

Επιλέγουμε πρόσβαση FTP αν πρέπει να μεταφέρουμε αρχεία μέσω του Web σ’ έναν απομακρυσμένο διακομιστή. Εισάγουμε το όνομα του διακομιστή FTP στο πλαίσιο κειμένου FTP Host με τη μορφή ftp.domain.gr, χωρίς το πρωτόκολλο ftp://. Στο πλαίσιο κειμένου Host Directory εισάγουμε τον κατάλογο root της περιοχής μας Web και στα πλαίσια κειμένου Login και Password το όνομα εισδοχής και τον κωδικό πρόσβασης που έχουμε για τον διακομιστή FTP.

 

Μεταφορά Περιοχής Web σε Απομακρυσμένο Server

Αν προσπελαύνουμε έναν απομακρυσμένο διακομιστή από το Internet χρησιμοποιώντας FTP, θα συνδεόμαστε όταν λαμβάνουμε ή όταν στέλνουμε αρχεία στον διακομιστή και μετά θα αποσυνδεόμαστε. Δεξιά από την πτυσσόμενη λίστα Current Sites υπάρχουν τα πλήκτρα Connect, Refresh, Get και Put. Το πλήκτρο Connect/Disconnect καθορίζει μια σύνδεση προς έναν διακομιστή FTP και δεν είναι απαραίτητο όταν έχουμε πρόσβαση LAN προς την απομακρυσμένη περιοχή. Με το πλήκτρο Refresh μπορούμε να ανανεώσουμε τα παράθυρα της τοπικής και της απομακρυσμένης περιοχής.

Με το πλήκτρο Get μπορούμε να πάρουμε αρχεία από την απομακρυσμένη περιοχή και να τα μεταφέρουμε στην τοπική περιοχή, ενώ με το πλήκτρο Put μπορούμε να μεταφέρουμε αρχεία από την τοπική στην απομακρυσμένη περιοχή. Για να πάρουμε (Get) ή να μεταφέρουμε (Put) αρχεία από και προς την απομακρυσμένη περιοχή, τα επιλέγουμε στην απομακρυσμένη ή στην τοπική περιοχή αντίστοιχα και κάνουμε κλικ στο αντίστοιχο πλήκτρο.

 

Τι Είναι τα Server Side Includes

Με τα server side includes μπορούμε να τοποθετούμε πληροφορίες δυναμικά στις ιστοσελίδες μας. Σύμφωνα με την τεχνική αυτή, ο διακομιστής επεξεργάζεται μια εντολή που έχουμε εισάγει στην ιστοσελίδα και εισάγει τα κατάλληλα αρχεία στην ιστοσελίδα μας όταν ο χρήστης την προσπελαύνει. Ένα server side include (SSI) επιτρέπει στον διακομιστή να τοποθετήσει εξωτερικά δεδομένα σε μια ιστοσελίδα. Τα δεδομένα αυτά μπορεί να είναι ένα string χαρακτήρων ή ένα ολόκληρο αρχείο. Τα πέντε βασικά πράγματα που μπορούν να κάνουν τα server side includes είναι τα εξής :

Για να δουλέψουν τα server side includes, πρέπει να γνωρίζουμε κάποια πράγματα για τον διακομιστή μας, όπως ότι ο κατάλογος όπου θα τοποθετηθεί η ιστοσελίδα μας πρέπει να έχει παραμετροποιηθεί ώστε να επιτρέπει server side includes. Ακόμη, πρέπει να γνωρίζουμε ποια επέκταση αρχείου αναγνωρίζει ο διακομιστής σαν την πιο πιθανή για να περιέχει server side includes. Πρέπει οπωσδήποτε να έρθουμε σ’ επαφή με τον διαχειριστή Web (Web master) πριν να σχεδιάσουμε server side includes στην περιοχή μας Web.

Συνήθως οι διακομιστές έχουν παραμετροποιηθεί έτσι ώστε να ψάχνουν για SSI μόνο μέσα σε αρχεία με επέκταση .shtml, .shtm, .stm ή και άλλες επεκτάσεις που ενημερώνουν τον διακομιστή ότι υπάρχει ένα server side include μέσα στην ιστοσελίδα. Ο διακομιστής αναλύει μόνο αυτές τις σελίδες, ψάχνοντας για server side includes και τις επεξεργάζεται. Τα περιεχόμενα του αρχείου που αναφέρονται σ’ ένα server side include, εισάγονται από τον διακομιστή όταν ζητηθεί το αρχείο.

 

Εισαγωγή ενός Server Side Include

Τα server side includes μοιάζουν με σχόλια HTML. Μπορούμε να εισάγουμε σχόλια σε μια ιστοσελίδα, επιλέγοντας το αντικείμενο Insert Comment από το τμήμα Invisibles της παλέτας αντικειμένων ή την εντολή Comment από το υπομενού Text Objects μενού Insert. Θα εμφανισθεί το πλαίσιο διαλόγου Comment με το πλαίσιο κειμένου Comment.

Χρησιμοποιούμε τα σχόλια για να περιγράψουμε μια ιστοσελίδα ή για να εξηγήσουμε ένα μέρος του κώδικα ή και για άλλες επεξηγηματικές λειτουργίες. Ένα σχόλιο εμφανίζεται στο DreamWeaver σαν ένα αόρατο αντικείμενο. Αν κάνουμε κλικ στο πλήκτρο Quick Tag Editor στον Property Inspector, μπορούμε να δούμε τον κώδικα HTML που πρόσθεσε το DreamWeaver για το σχόλιο. Τα σχόλια δεν είναι ορατά σ’ όσους επισκέπτονται την ιστοσελίδα μας, εκτός κι αν προβάλλουν τον κώδικα της HTML.

 

Μετατροπή Σχολίου σε Server Side Include

Για να εισάγουμε ένα server side include σε μια ιστοσελίδα, εισάγουμε ένα σχόλιο και τοποθετούμε το σύμβολο # πριν από τον κώδικα για το server side include. Ο διακομιστής θα αντικαταστήσει το server side include με το κατάλληλο κείμενο ή μ’ ο,τιδήποτε εισάγει το server side include. Μερικές από τις εντολές server side includes που μπορούμε να τοποθετήσουμε σε μια ιστοσελίδα είναι οι εξής :

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

 

Εισαγωγή ενός Αρχείου

Το DreamWeaver διαθέτει ένα ειδικό αντικείμενο server side include για να μπορούμε να εισάγουμε ένα αρχείο σε μια ιστοσελίδα. Το αντικείμενο αυτό εισάγει μια αναφορά μέσα στην ιστοσελίδα προς ένα εξωτερικό αρχείο. Πρώτα δημιουργούμε το εξωτερικό αρχείο που θέλουμε να περιλαμβάνεται στην ιστοσελίδα μ’ έναν επεξεργαστή κειμένου όπως είναι το Σημειωματάριο (Notepad) των Windows και το αποθηκεύουμε στον ίδιο κατάλογο με την ιστοσελίδα με την επέκταση .txt ή .html.

Ανοίγουμε μια ιστοσελίδα στο DreamWeaver και τοποθετούμε το σημείο παρεμβολής εκεί όπου θέλουμε να εμφανισθεί το κείμενο του αρχείου. Επιλέγουμε το αντικείμενο Insert Server-Side Include από το τμήμα Common της παλέτας αντικειμένων ή την εντολή Server-Side Include από το υπομενού Script Objects του μενού Insert.

Στο πλαίσιο διαλόγου Select File επιλέγουμε το αρχείο κειμένου και το κείμενό του θα εμφανισθεί στην ιστοσελίδα. Ο Property Inspector εμφανίζει το όνομα του αρχείου, τον τύπο του και το πλήκτρο Edit για να το επεξεργαστούμε. Σ’ αντίθεση με τα στοιχεία βιβλιοθήκης, το DreamWeaver δεν εισάγει κώδικα HTML για το server side include στην ιστοσελίδα, αλλά μια σήμανση σχολίου σαν την εξής :

<!-- #include file="florina.txt"-->

 

Προσθήκη Ημερομηνίας

Για να προσθέσουμε την ημερομηνία τελευταίας τροποποίησης σε μια ιστοσελίδα, μπορούμε να χρησιμοποιήσουμε ένα server side include ή το αντικείμενο Date. Το server side include παίρνει την ημερομηνία τελευταίας τροποποίησης από τις ιδιότητες αρχείου της σελίδας, ενώ το αντικείμενο Date απλώς ενημερώνει την ημερομηνία ή και την ώρα κάθε φορά που αποθηκεύουμε την ιστοσελίδα στο DreamWeaver.

Όταν επιλέγουμε το αντικείμενο Insert Date από το τμήμα Common της παλέτας αντικειμένων ή την εντολή Date από το μενού Insert, εμφανίζεται το πλαίσιο διαλόγου Insert Date. Μπορούμε να επιλέξουμε μια από τις διαθέσιμες μορφές ημέρας, ημερομηνίας και ώρας από τις πτυσσόμενες λίστες Day Format, Date Format και Time Format αντίστοιχα και αν επιλέξουμε και το πλαίσιο ελέγχου Update Automatically on Save, το DreamWeaver θα ενημερώνει την ημερομηνία κάθε φορά που αποθηκεύουμε την ιστοσελίδα.

 

Ο Quick Tag Editor

Ο Quick Tag Editor είναι ο ευκολότερος και ταχύτερος τρόπος εξέτασης και επεξεργασίας μιας σήμανσης HTML. Μπορούμε να προσπελάσουμε τον Quick Tag Editor για να προβάλουμε και να επεξεργαστούμε τη σήμανση ενός αντικειμένου με τους εξής τρόπους :

Όταν επιλέγουμε το εικονίδιο Quick Tag Editor από τον Property Inspector, η σήμανση εμφανίζεται δίπλα στο εικονίδιο Quick Tag Editor, ενώ όταν επιλέγουμε τις εντολές από το μενού Modify ή από το πτυσσόμενο μενού, η σήμανση εμφανίζεται πάνω από το αντικείμενο στο παράθυρο Εγγράφου. Όταν είναι ανοικτός ο Quick Tag Editor, μπορούμε να μετακινηθούμε προς τα πάνω και προς τα κάτω μέσα στην ιεραρχία σημάνσεων της HTML, επιλέγοντας Select Parent Tag ή Select Child από το μενού Edit ή πατώντας τα πλήκτρα Control+Shift+< ή Control+Shift+> αντίστοιχα.

Ο Quick Tag Editor έχει τις εξής τρεις λειτουργίες :

Όταν είναι ανοικτός ο Quick Tag Editor, μπορούμε να εναλλασσόμαστε ανάμεσα στις τρεις αυτές λειτουργίες πατώντας τα πλήκτρα Control+T.

Η λειτουργία Insert HTML του Quick Tag Editor εμφανίζει ένα ζευγάρι κενών αγκυλών σήμανσης < > και μπορούμε είτε να εισάγουμε κείμενο είτε να επιλέξουμε από το πτυσσόμενο μενού με δεξί κλικ. Το DreamWeaver εισάγει αυτόματα τη σήμανση τέλους. Ο Quick Tag Editor εκκινεί σ’ αυτή τη λειτουργία όταν δεν έχουμε επιλέξει ένα αντικείμενο.

Με τη λειτουργία Edit Tag του Quick Tag Editor μπορούμε να επεξεργαστούμε την HTML για μια υπάρχουσα σήμανση. Για να προσθέσουμε ιδιότητες στη σήμανση, τοποθετούμε το σημείο παρεμβολής στο τέλος των περιεχομένων της σήμανσης και προσθέτουμε ένα κενό διάστημα. Με μια μικρή καθυστέρηση θα εμφανισθεί ένα πτυσσόμενο μενού με ιδιότητες κατάλληλες για τη σήμανση αυτή.

Με τη λειτουργία Wrap Tag του Quick Tag Editor μπορούμε να εισάγουμε HTML γύρω από την τρέχουσα επιλογή. Το DreamWeaver προσθέτει τη σήμανση αρχής < πριν από την επιλογή και τη σήμανση τέλους > μετά από την επιλογή.

 

back.gif (9867 bytes)

Επιστροφή