DREAMWEAVER MX. 7. Με ποιον τρόπο μορφοποιούμε κάποιους χαρακτήρες της σελίδας μας; Στο παράθυρο Properties υπάρχει η πιο κάτω γραμμή εργαλείων:

Transcript

1 1 Πώς δημιουργούμε ένα νέο Site; Πατάμε Site/ Manage Sites και μετά στο παράθυρο που εμφανίζεται πατάμε το κουμπάκι New και επιλέγουμε Site Στη συνέχεια θα πρέπει να δώσουμε: Α το όνομα που θέλουμε να έχει το site B Εάν θέλουμε να χρησιμοποιήσουμε κάποια τεχνολογία Server Συνήθως επιλέγουμε No, I do not want to use a server technology Γ τον φάκελο όπου θα αποθηκεύουμε τα αρχεία μας Δ τον τρόπο με τον οποίο θα συνδεόμαστε στον απομακρυσμένο server Συνήθως επιλέγουμε None Το βήμα αυτό καλά είναι να το εκτελούμε πάντοτε όταν ξεκινούμε τη δημιουργία ενός νέου χώρου ιστοσελίδων (site) ώστε όλα το υλικό του site (html αρχεία, εικόνες, flash αρχεία κτλ) να αποθηκεύονται στον ίδιο φάκελο 2 Με ποιον τρόπο αλλάζουμε τις (πιο πάνω) επιλογές που δώσαμε κατά τη δημιουργία ενός site; Πατάμε Site/ Manage Sites και μετά στο παράθυρο που εμφανίζεται κάνουμε κλικ πάνω στο όνομα του site και πατάμε το κουμπάκι Edit 3 Με ποιον τρόπο ζητάμε να χρησιμοποιηθεί ελληνική κωδικοποίηση; Πατάμε Modify/ Page Properties ή το κουμπάκι Page Properties από το παράθυρο Properties (κάτω μέρος) Στο παράθυρο που εμφανίζεται πατάμε Title/Encoding και από το μενού Encoding επιλέγουμε κάποια ελληνική κωδικοποίηση (Ελληνική (ISO)) Ο ορισμός της κωδικοποίησης πρέπει να γίνεται για όλες τις ιστοσελίδες που θέλουμε να δημιουργήσουμε οι οποίες περιέχουν ελληνικά Εισάγεται τότε αυτόματα από το Dreamweaver η εντολή <meta http-equiv="content-type" content="text/html; charset=iso "> στο τμήμα <HEAD> της ιστοσελίδας 4 Πώς δίνουμε κάποιο τίτλο στη σελίδα μας; Πάνω από τα σελίδα μας υπάρχει το πλαίσιο Title: Μπορούμε να κάνουμε κλικ στο πλαίσιο και να γράψουμε τον τίτλο που θέλουμε Εναλλακτικά μπορούμε να πατήσουμε Modify/ Page Properties ή το κουμπάκι Page Properties και αφού πατήσουμε στο Title/Encoding να δώσουμε τον τίτλο 5 Πώς εισάγουμε επιπλέον κενά; Επιπλέον κενά μπαίνουν με τον εδικό χαρακτήρα nbsp; της HTML Μπορούμε να πατήσουμε Control+Shift+Space ή Insert/ HTML/ Special Characters/ Non-Breaking Space 6 Πώς αλλάζουμε σειρά χωρίς να αρχίσουμε νέα παράγραφο; Πατώντας απλά το Enter εισάγουμε την εντολή αλλαγής παραγράφου <p> Για να εισάγουμε την εντολή αλλαγής γραμμής <br> πατάμε Shift+Enter 7 Με ποιον τρόπο μορφοποιούμε κάποιους χαρακτήρες της σελίδας μας; Στο παράθυρο Properties υπάρχει η πιο κάτω γραμμή εργαλείων: 1

2 Εδώ μπορούμε να δηλώσουμε τη μορφή (format) των χαρακτήρων (parargaphheading1, heading2 κτλ), τη γραμματοσειρά (font), το μέγεθος (size) των γραμμάτων, το χρώμα των γραμμάτων, την έντονη ή πλάγια γραφή, τη στοίχιση των παραγράφων, την εισαγωγή κουκίδων και αρίθμησης καθώς και το μέγεθος της εσοχής στα αριστερά Οι ίδιες ιδιότητες μπορούν να ρυθμιστούν από το μενού Text από το κεντρικό μενού του Dreamweaver 8 Με ποιο τρόπο εναλλάσσουμε μεταξύ των ομάδων εικονιδίων που εμφανίζονται στη γραμμή εργαλείων του Dreamweaver; Στα αριστερά της γραμμής εικονιδίων μπορούμε να ανοίξουμε, πατώντας το αντίστοιχο βελάκι, το μενού που φαίνεται πιο κάτω: Εδώ μπορούμε να επιλέξουμε την ομάδα εικονιδίων που θέλουμε να χρησιμοποιήσουμε Συνήθως χρησιμοποιείται η ομάδα Common 9 Με ποιο τρόπο βλέπουμε τον κώδικα (εντολές) της σελίδας μας; Εάν πατήσουμε το εικονίδιο Code: μας Αντίστοιχα με το εικονίδιο Design: της σελίδας μας βλέπουμε τις εντολές HTML της σελίδας βλέπουμε την τελική μορφή εμφάνισης Τέλος με το εικονίδιο Split χωρίζεται το παράθυρό μας σε δύο τμήματα ώστε να βλέπουμε ταυτόχρονα και τις δύο όψεις της σελίδας μας Τα ίδια μπορούν να γίνουν από το μενού View, από όπου διαλέγουμε είτε Code, είτε Design είτε Code and Design 10 Πώς κάνουμε προεπισκόπηση της σελίδας μας σε ένα πρόγραμμα πλοήγησης; Προεπισκόπηση μπορεί να γίνει πατώντας το εικονίδιο Εμφανίζεται τότε μία λίστα με τα προγράμματα πλοήγησης που έχουμε εγκατεστημένα στον υπολογιστή μας και διαλέγουμε αυτό που θέλουμε ώστε να δούμε τη σελίδα μας Πατώντας Edit Browser List μπορούμε να τροποποιήσουμε τη λίστα με τα προγράμματα πλοήγησης που διαθέτουμε (Internet Explorer, Netscape, Mozilla κτλ) Καλά είναι να έχουμε εγκαταστήσει στον υπολογιστή μας διαφορετικά προγράμματα πλοήγησης και όχι μόνο ένα, ώστε να μπορούμε να δούμε τον τρόπο εμφάνισης της σελίδας μας σε κάθε ένα από αυτά Η προεπισκόπηση μπορεί να γίνει και πατώντας το πλήκτρο F12 2

3 11 Πώς εισάγουμε μία εικόνα στη σελίδα μας; Πατάμε το εικονίδιο εισαγωγής εικόνας από την ομάδα εικονιδίων Common και στη συνέχεια επιλέγουμε την εικόνα που θέλουμε να εισάγουμε Eναλλακτικά πατάμε Insert/ Image Καλά είναι να έχουμε αποθηκεύσει πρώτα τη σελίδα μας Εάν η εικόνα δεν βρίσκεται στον ίδιο φάκελο με τη σελίδα μας, το dreamweaver μας ρωτάει εάν θέλουμε να το αντιγράψει στο φάκελο της σελίδας μας (καλά είναι να απαντήσουμε yes) 12 Με ποιο τρόπο εισάγουμε έναν πίνακα στη σελίδα μας; Πατάμε το εικονίδιο εισαγωγής πίνακα από την ομάδα εικονιδίων Common ή πατάμε Insert/ Table Εμφανίζετε τότε το παράθυρο εισαγωγής νέου πίνακα: Στο παράθυρο αυτό μπορούμε να δηλώσουμε τον αριθμό γραμμών (rows) και στηλών (columns), το πλάτος πίνακα (table width), το πάχος περιγράμματος (border thickness), την απόσταση του περιεχομένου των κελιών από το περίγραμμα (cell paddign), την απόσταση των κελιών (cell spacing), εάν θα έχουμε επικεφαλίδες (header), τον τίτλο του πίνακα (caption) και τη θέση του (align caption) Πατώντας OK εφαρμόζονται οι ρυθμίσεις 13 Πώς αλλάζουμε τις ιδιότητες των κελιών ενός πίνακα, να κάνουμε συγχώνευση κελιών, διαίρεση κελιών και παρόμοιες λειτουργίες; Όταν είμαστε μέσα σε κάποιο κελί ενός πίνακα ή εάν έχουμε επιλέξει κάποια από τα κελιά του, στο παράθυρο properties εμφανίζονται τα πιο κάτω εικονίδια: 3

4 Τα δύο εικονίδια κάτω από τη λέξη Cell χρησιμοποιούνται για τη συγχώνευση ή διαίρεση κάποιων κελιών Τα μενού Horz και Vert χρησιμοποιούνται για την οριζόντια και κατακόρυφη στοίχιση Τα πλαίσια W και H ορίζουν το πλάτος και το ύψος των κελιών Η ιδιότητα No Wrap ρυθμίζει εάν κάποιο κείμενο που δεν χωράει σε ένα κελί, θα καταλαμβάνει περισσότερες από μία γραμμές ή όχι Η επιλογή Ηeader μετατρέπει το κελί σε επικεφαλίδα Τα πλαίσια Bg επιτρέπουν να δώσουμε χρώμα ή εικόνα φόντου (ταπετσαρία) Τέλος το πλαίσιο Brdr δίνει το χρώμα του περιγράμματος Πώς μπορούμε να αλλάξουμε τις ιδιότητες ολόκληρου του πίνακα και όχι κάποιων μεμονωμένων κελιών; Εάν κάνουμε κλικ σε κάποιο σημείο του περιγράμματος του πίνακα, επιλέγεται όλος ο πίνακας και μπορούμε να αλλάξουμε τις ιδιότητές του από το παράθυρο Properties (κάτω μέρος) Πώς δημιουργούμε ένα σύνδεσμο (link); Μπορούμε να μετατρέψουμε μία λέξη ή φράση της σελίδας μας σε σύνδεσμο εάν την επιλέξουμε και εισάγουμε στο πλαίσιο Link στο παράθυρο Properties τη διεύθυνση όπου οδηγεί ο σύνδεσμος Στο μενού Target επιλέγουμε το frame όπου θα εμφανίζεται η σελίδα που οδηγεί ο σύνδεσμος Εναλλακτικά μπορούμε να πατήσουμε το εικονίδιο Hyperlink πιο κάτω παράθυρο: ή να πατήσουμε Insert/ Hyperlink Εμφανίζεται τότε το Εδώ μπορούμε να δώσουμε το κείμενο του συνδέσμου (text), τη σελίδα που θα φορτώνεται (link), το frame όπου θα φορτώνεται (target) και άλλα στοιχεία όπως ο τίτλος (κείμενο που εμφανίζεται σαν αναδυόμενο μήνυμα όταν το ποντίκι βρίσκεται πάνω από το σύνδεσμο), access key (πλήκτρο που αν πατηθεί οδηγούμαστε σερ αυτόν τον σύνδεσμο) και tab index (δίνει τη σειρά με την οποία γίνεται η μετάβαση από τον κάθε σύνδεσμο στον επόμενο όταν πατάμε το πλήκτρο tab) 16 Πώς μετατρέπουμε μία εικόνα σε σύνδεσμο; Αν κάνουμε κλικ πάνω σε μία εικόνα, εμφανίζεται στο παράθυρο Properties ένα πλαίσιο με όνομα Link και ένα μενού με το όνομα Target, όπου μπορούμε να εισάγουμε τη σελίδα που θα φορτώνεται κάνοντας κλικ πάνω στην εικόνα καθώς και 4

5 το frame όπου θα φορτώνεται 17 Πώς εισάγουμε ένα σύνδεσμο ηλεκτρονικού ταχυδρομείου ( link); Κάνοντας κλικ πάνω στο εικονίδιο link της ομάδας εικονιδίων Common εμφανίζεται ένα παράθυρο όπου εισάγουμε το κείμενο του συνδέσμου καθώς και το του παραλήπτη Κάνοντας κάποιος χρήστης κλικ πάνω στο σύνδεσμο, ανοίγει το πρόγραμμα αποστολής στον υπολογιστή του ώστε να στείλει στον παραλήπτη Πώς εισάγουμε anchors (σημάδια) σε μία σελίδα; Μπορούμε να βάλουμε σημάδια (anchors) σε κάποια σημεία μία σελίδας Αυτό είναι χρήσιμο σε περιπτώσεις που μία σελίδα είναι πολύ μεγάλη και θέλουμε να μετακινούμαστε εύκολα σε διαφορετικά σημεία της σελίδας Για να εισάγουμε anchor πατάμε τα το εικονίδιο named anchor της ομάδας Common εμφανίζεται ένα παράθυρο όπου εισάγουμε το όνομα του anchor Αν δώσουμε πχ το όνομα anc1 στη σελίδα page1htm, τότε για να αναφερθούμε σε αυτό το σημείο χρησιμοποιούμε το όνομα page1htm#anc1 Εναλλακτικά για την εισαγωγή anchor πατάμε Insert/ Named Anchor Πώς γίνεται η εισαγωγή μίας rollover εικόνας; Οι rollover εικόνες είναι εικόνες που αλλάζουν ανάλογα με το εάν ο δείκτης του ποντικιού είναι πάνω ή έξω από την εικόνα Για την εισαγωγή μίας τέτοιας εικόνας πατάμε το εικονίδιο της ομάδας εικονιδίων Common Συχνά το εικονίδιο αυτό δεν είναι εμφανές και για να το βρούμε πατάμε στο βελάκι στα δεξιά του εικονιδίου εισαγωγής εικόνας και ανοίγουμε το πιο κάτω μενού όπου επιλέγουμε Rollover Image Εναλλακτικά πατάμε Insert/ Image Objects/ Rollover Image Εμφανίζεται τότε το παράθυρο: 5

6 όπου στο πλαίσιο Original Image εισάγουμε την αρχική εικόνα, ενώ στο πλαίσιο Rollover Image εισάγουμε την εικόνα που θέλουμε να εμφανίζεται όταν το ποντίκι βρίσκεται πάνω από την εικόνα Στο τελευταίο πλαίσιο (When clicked, Go to URL) εισάγουμε τη σελίδα που θα φορτώνεται κάνοντας κλικ πάνω στην εικόνα 20 Με ποιον τρόπο δημιουργούμε image maps, δηλ χωρίζουμε μία εικόνα σε κομμάτια και ανάλογα με το κομμάτι όπου κάνουμε κλικ να φορτώνεται διαφορετική σελίδα; Κάνουμε κλικ πάνω στην εικόνα ώστε να εμφανιστεί στο παράθυρο properties η πιο κάτω ομάδα εικονιδίων: Έχουμε εδώ εικονίδια σχηματισμού παραλληλογράμμου, κύκλου και πολυγώνου Επιλέγουμε το σχήμα που θέλουμε, το δημιουργούμε πάνω στην εικόνα και εισάγουμε τις κατάλληλες τιμές στα πλαίσια Link και Target για τη δημιουργία του κατάλληλου συνδέσμου Στη συνέχεια επαναλαμβάνουμε την ίδια διαδικασία για τα υπόλοιπα σχήματα που θέλουμε να δημιουργήσουμε 21 Πώς εισάγουμε έτοιμα κουμπάκια flash; Στην ομάδα εικονιδίων Common υπάρχει το εικονίδιο media πατήσουμε το βελάκι στα δεξιά ανοίγει το πιο κάτω μενού: που αν το Επιλέγουμε Flash Button ώστε να εμφανιστεί το πιο κάτω παράθυρο Εναλλακτικά 6

7 πατάμε Insert/ Media/ Flash Button Επιλέγουμε εδώ το σχήμα που θέλουμε να έχει το κουμπάκι, γράφουμε το κείμενο που θα έχει πάνω του (Button text), τη σελίδα που θα φορτώνεται κάνοντας κλικ πάνω στο κουμπάκι (Link) και το frame όπου θα φορτώνεται (Target) Μπορούμε επίσης να ορίσουμε το χρώμα φόντου πίσω από το κουμπάκι (Bg color) Το κουμπάκι θα αποθηκευτεί σαν ξεχωριστό αρχείο με επέκταση swf (στο σχήμα προτείνεται το όνομα button1swf) Σε περίπτωση που θέλουμε να τοποθετήσουμε τις σελίδες μας σε ένα server θα πρέπει να βάλουμε και κάθε ένα από τα αρχεία αυτά Πριν εισάγουμε flash button θα πρέπει να έχουμε αποθηκεύσει τη σελίδα μας 22 Με ποιο τρόπο εισάγουμε κείμενο flash (flash text); Επιλέγοντας flash text από το μενού της προηγούμενης ερώτησης ή εναλλακτικά πατώντας Insert/ Media/ Flash Text εμφανίζεται το πιο κάτω παράθυρο: 7

8 όπου εδώ εισάγουμε το κείμενο που θέλουμε να εμφανίζεται (πλαίσιο Text), τη σελίδα που θα φορτώνεται εάν κάνουμε κλικ (πλαίσιο Link), το frame όπου θα φορτώνεται (Target) και το χρώμα φόντου (Bg color) και το όνομα του swf αρχείου όπου θα αποθηκευτεί Πριν εισάγουμε flash text θα πρέπει να έχουμε αποθηκεύσει τη σελίδα μας 23 Πώς εισάγουμε ένα flash αντικείμενο που υπάρχει αποθηκευμένο σε κάποιο αρχείο; Επιλέγουμε την επιλογή Flash από το μενού που χρησιμοποιήσαμε στις δύο προηγούμενες ερωτήσεις ή πατάμε Insert/ Media/ Flash Εμφανίζεται ένα παράθυρο όπου επιλέγουμε το flash αρχείο που θέλουμε να εισάγουμε και πατάμε ΟΚ Αν κάνουμε κλικ πάνω στο flash αντικείμενο της σελίδας μας τότε εμφανίζεται το κουμπάκι play loop και autoplay: στο παράθυρο properties, ενώ έχουμε και τις επιλογές Εάν η επιλογή loop είναι τσεκαρισμένη, τότε η κίνηση του flash αντικειμένου θα εκτελείται συνεχώς, ενώ με το Autoplay ζητάμε η κίνηση να εκτελείται αυτόματα με το φόρτωμα της σελίδας 24 Πώς εισάγουμε σχόλια στη σελίδα μας; Τα σχόλια (comments) είναι κάποια βοηθητικά στοιχεία τα οποία εισάγει ο δημιουργός κάποιας σελίδας και τα οποία δεν είναι ορατά στη σελίδα μας για τον τελικό χρήστη Τα σχόλια εισάγονται εντός των συμβόλων  Μπορούμε να εισάγουμε σχόλια μέσω του dreamweaver πατώντας το κουμπάκι Comment Εμφανίζεται τότε ένα παράθυρο όπου απλά εισάγουμε τα σχόλια που θέλουμε 25 Πώς δημιουργούμε frames σε μία σελίδα; 8

9 Τα frames μας επιτρέπουν να χωρίζουμε μία σελίδα σε διαφορετικά τμήματα όπου σε κάθε τμήμα μπορεί να φορτώνεται διαφορετική σελίδα Το σύνολο των σελίδων ονομάζεται frameset και αποθηκεύεται σε ξεχωριστό αρχείο Μπορούμε να δημιουργήσουμε ένα frameset εάν πάμε στην ομάδα εικονιδίων Layout και πατήσουμε στο βελάκι στο εικονίδιο Frames Εμφανίζεται τότε το μενού επιλογής του κατάλληλου frameset: Εάν επιλέξουμε πχ την επιλογή Top and Nested Left Frames το παράθυρο όπου δημιουργούμε τη σελίδα μας θα χωριστεί σε τρία τμήματα Ουσιαστικά δημιουργούμε με τον τρόπο αυτό τέσσερα αρχεία Ένα είναι το frameset το οποίο περιέχει πληροφορίες για το χωρισμό της σελίδας σε διαφορετικά τμήματα και έχουμε επίσης τρία frames όπου κάθε ένα από αυτά αποτελεί ξεχωριστό html αρχείο Μπορούμε να δημιουργήσουμε και να αποθηκεύσουμε σε ξεχωριστό html αρχείο κάθε ένα από τα frames της σελίδας μας όπως ακριβώς κάνουμε και με τις άλλες σελίδες Εάν κάνουμε κλικ στο περίγραμμα ανάμεσα σε δύο διαφορετικά frames εμφανίζονται οι πιο κάτω ιδιότητες στο παράθυρο properties: 9

10 Εδώ μπορούμε να ρυθμίσουμε την ύπαρξη ή όχι περιγράμματος (Borders), το πάχος του περιγράμματος (Border Width) και το χρώμα του (Border Color) 26 Πώς δημιουργούμε μία φόρμα; Για να δημιουργήσουμε μία φόρμα πηγαίνουμε στην ομάδα εικονιδίων Forms που έχει την πιο κάτω μορφή: Έχουμε εδώ τα πιο κάτω εικονίδια: Με το κουμπάκι Form εισάγουμε μία νέα φόρμα στη σελίδα μας και μέσα σε αυτή τη φόρμα θα πρέπει να βάλουμε όλα τα στοιχεία (πλαίσια κειμένου, κουμπάκια κτλ) που θέλουμε Εάν είμαστε σε προβολή σχεδίασης (Design) βλέπουμε ένα κόκκινο παραλληλόγραμμο το οποίο μας δείχνει τα όρια της φόρμας, ενώ οι ιδιότητες της φόρμας ( action, method κτλ) εμφανίζονται στα properties Με το κουμπάκι Text Field εισάγουμε ένα πλαίσιο κειμένου Όταν είναι επιλεγμένο, στα properties βλέπουμε τις εξής ιδιότητες: Το Char width ορίζει το μήκος του πεδίου, ενώ το Max Chars προσδιορίζει τον μέγιστο αριθμό χαρακτήρων που μπορούμε να εισάγουμε στο πλαίσιο κειμένου Με το Init val μπορούμε να δώσουμε μία αρχική τιμή που μπορεί να περιέχει το πλαίσιο Τέλος εάν τσεκάρουμε την επιλογή Multi line μπορούμε να δημιουργήσουμε πλαίσιο με περισσότερες από μία γραμμές (δηλ Textarea) Με την επιλογή Password δημιουργούμε ένα πλαίσιο εισαγωγής κωδικού (δηλ οι χαρακτήρες δεν εμφανίζονται καθώς τους πληκτρολογεί ο χρήστης) Με το Hidden Field μπορούμε να εισάγουμε κρυμμένα πεδία κειμένου τα οποία δεν είναι ορατά στον τελικό χρήστη αλλά μπορεί να χρησιμοποιεί ο δημιουργός της σελίδας στα προγράμματά του Το Textarea δημιουργεί πλαίσια κειμένου που μπορεί να έχουν περισσότερες από μία γραμμές Εκτός από τις ιδιότητες που είδαμε και στο εργαλείο Text Field, έχουμε εδώ και την ιδιότητα Num Lines που προσδιορίζει πόσες γραμμές κειμένου θα έχουμε, αλλά και την Wrap με την οποία καθορίζουμε τι συμβαίνει όταν αυτά που γράφουμε δεν χωράνε στο πλαίσιο κειμένου (αν έχουμε μπάρες κύλισης και αριστερά και κάτω κτλ) Με το Checkbox εισάγουμε μία επιλογή η οποία μπορεί να είναι τσεκαρισμένη ή όχι Οι επιλογές Checked και Unchecked στο properties ρυθμίζουν εάν η επιλογή θα είναι αρχικά επιλεγμένη ή όχι Το Radio Button λειτουργεί παρόμοια με το checkbox, με τη διαφορά ότι από μία ομάδα επιλογών radio button, μπορούμε να έχουμε τσεκαρισμένη κάθε στιγμή μόνο μία επιλογή Τα radio buttons που ανήκουν στην ίδια ομάδα έχουν όλα το ίδιο όνομα Το όνομα αυτό μπορούμε να το δούμε στο properties: 10

11 Στο πιο πάνω παράδειγμα βλέπουμε ένα radio button με το όνομα radiobutton1 Όλα τα radio buttons με αυτό το όνομα, λειτουργούν σαν ομάδα, δηλ μόνο ένα μπορεί να είναι επιλεγμένο Το Radio Group μας επιτρέπει να δημιουργήσουμε μία ομάδα από radio buttons (μπορούμε να δημιουργήσουμε τέτοιες ομάδες χρησιμοποιώντας μόνο το εικονίδιο Radio Button και δίνοντας τα κατάλληλα ονόματα, αλλά είναι πιο εύκολα με το εικονίδιο Radio Group Κάνοντας κλικ πάνω σε αυτό το εικονίδιο εμφανίζεται το παράθυρο: Εδώ δημιουργούμε τα radio buttons που θέλουμε Το κείμενο που θα υπάρχει δίπλα από ένα radio button φαίνεται στην στήλη Label Αρχικά εμφανίζονται δύο radio buttons αλλά μη χρήση του + και του μπορούμε να προσθέσουμε ή να αφαιρέσουμε radio buttons Με το εικονίδιο List/Menu μπορούμε να δημιουργήσουμε μενού επιλογών Tο παράθυρο properties έχει την πιο κάτω μορφή: Εάν κάνουμε κλικ στο κουμπάκι List Values εμφανίζεται το παράθυρο: όπου εισάγουμε τις διάφορες επιλογές που θα έχει το μενού (κάνουμε χρήση των + και για προσθήκη και αφαίρεση επιλογών, ενώ με το πάνω και κάτω βελάκι μπορούμε να αλλάξουμε τη σειρά τους) Στη στήλη Value δεν χρειάζεται να βάλουμε κάτι (θα μπορούσαμε να βάλουμε τιμές που θα τις χρησιμοποιήσουμε πχ σε κάποιο javascript πρόγραμμα) Στο properties εμφανίζεται η ιδιότητα Initially Selected με την οποία καθορίζουμε ποια επιλογή θα είναι αρχικά ενεργή Εάν τσεκάρουμε την επιλογή List από τις ιδιότητες, τότε οι επιλογές εμφανίζονται σε μορφή λίστας και μπορούμε να ορίσουμε περισσότερες από μία επιλογές να είναι ορατές στον χρήστη Το πόσες επιλογές θα είναι ορατές προσδιορίζεται από την επιλογή Height Εάν επιπλέον είναι τσεκαρισμένη η επιλογή Allow Multiple, θα μπορεί ο χρήστης να επιλέξει περισσότερες από μία επιλογές ταυτόχρονα (πχ κάνοντας χρήση του Control και του Shift ή με το ποντίκι) 11

12 Το εικονίδιο Jumb Menu μας βοηθάει να δημιουργήσουμε ένα μενού επιλογών, όπως και το προηγούμενο εικονίδιο List/Menu Η διαφορά βρίσκεται ότι σε ένα jumb menu, συνδυάζουμε την κάθε επιλογή με έναν σύνδεσμο και μόλις ο χρήστης επιλέξει μία από τις επιλογές, φορτώνεται η αντίστοιχη σελίδα Πατώντας το εικονίδιο εμφανίζεται το πιο κάτω παράθυρο: Στο πεδίο Text εισάγουμε μία επιλογή του μενού ενώ στο πεδίο When selected, go to URL εισάγουμε τον αντίστοιχο σύνδεσμο για αυτή την επιλογή (μπορούμε να χρησιμοποιήσουμε το κουμπάκι Browse για να προσδιορίσουμε τον σύνδεσμο) Από το μενού Open URLs in επιλέγουμε το frame όπου θα φορτώνεται ο σύνδεσμος (target) ενώ αν τσεκάρουμε την επιλογή Insert go button after menu θα δημιουργηθεί ένα κουμπάκι που θα γράφει Go πάνω του και όταν αυτό πατηθεί τότε θα φορτώνεται ο αντίστοιχος σύνδεσμος Οι ιδιότητες (properties) για την περίπτωση του jumb menu είναι ίδιες με αυτές που έχουμε κατά τη δημιουργία List/Menu Με το εικονίδιο Image Field εισάγουμε μία εικόνα στην οποία όμως μπορούμε να δώσουμε συμπεριφορά ανάλογη με ένα κουμπάκι (button) Δεν χρησιμοποιείται ιδιαίτερα Το File Field εμφανίζει ένα πλαίσιο κειμένου και δίπλα έχουμε ένα κουμπάκι Browse Ο χρήστης μπορεί είτε να εισάγει στο πλαίσιο ένα όνομα αρχείου, είτε να επιλέξει ένα αρχείο αφού πατήσει το κουμπάκι Browse: Με το εικονίδιο Button μπορούμε να δημιουργήσουμε κουμπάκια σε μία φόρμα Τα κουμπάκια αυτά μπορεί να είναι είτε μορφής Submit, είτε μορφής Reset, είτε κουμπάκια γενικής χρήσης Τα κουμπάκια τύπου Submit στέλνουν τα στοιχεία που έχει συμπληρώσει ο χρήστης στο πρόγραμμα που έχει προσδιορίσει ο δημιουργός της σελίδας με την ιδιότητα action κατά τη δημιουργία της φόρμας Υπάρχουν δύο μέθοδοι αποστολής των στοιχείων της φόρμας, η μέθοδος GET και η μέθοδος POST Το πρόγραμμα που προσδιορίζεται με το action βρίσκεται αποθηκευμένο στον server της σελίδας και μπορεί να είναι σε γλώσσα όπως η PHP, η Perl κτλ Τα κουμπάκια τύπου Reset απλά καθαρίζουν τα στοιχεία της φόρμας ώστε να τα ξανασυμπληρώσει Τέλος, τα κουμπάκια γενικής χρήστης κάνουν κάποια λειτουργία που προσδιορίζει ο δημιουργός της σελίδας με τη βοήθεια γλωσσών όπως η Javascript, η VBScript κτλ Εάν πατήσουμε το εικονίδιο button εισάγεται ένα νέο κουμπάκι και στο 12

13 παράθυρο properties έχουμε τις πιο κάτω ιδιότητες: Στο πλαίσιο Label εισάγουμε το κείμενο που θέλουμε να γράφει πάνω του το κουμπάκι Στις επιλογές Action επιλέγουμε τον τύπο που θέλουμε να έχει το κουμπάκι Έχουμε τον τύπο Submit form (για κουμπάκια τύπου Submit), τον τύπο Reset form (για κουμπάκια τύπου Reset) και τον τύπο None (για κουμπάκια γενικής χρήσης) Με το εικονίδιο Label εισάγουμε κείμενο σε κάποια σημεία μίας φόρμας Εισάγει την εντολή html <label> Και αυτό το στοιχείο χρησιμοποιείται σπάνια αφού μπορούμε να εισάγουμε ούτως ή άλλως κείμενο σε μία φόρμα και χωρίς την χρήση της εντολής <label> Με τη βοήθεια Fieldset μπορούμε να χωρίσουμε κάποια στοιχεία μίας φόρμας σε ομάδες και να δώσουμε ένα όνομα (label) στην ομάδα Κατά την εμφάνιση της φόρμας, πέρα από το όνομα (label), εμφανίζεται και ένα περίγραμμα γύρω από τα στοιχεία της κάθε ομάδας (fieldset) 27 Με ποιον τρόπο απαιτούμαι κάποια από τα πεδία μίας φόρμας να έχουν συμπληρωθεί από τον χρήστη ή να έχουν κάποια επιθυμητή μορφή (πχ μορφή διεύθυνσης); Έστω ότι έχουμε δημιουργήσει μία φόρμα και θέλουμε να εφαρμόσουμε κάποιους κανόνες Πατάμε Window/ Behaviors (ή Shift+F3) ώστε να εμφανιστεί το παράθυρο Behaviors (εάν δεν είναι ήδη ορατό): Κάνουμε κλικ σε κάποιο από τα στοιχεία της φόρμας, πατάμε το κουμπάκι Add Behavior και από το μενού που εμφανίζεται επιλέγουμε Validate Form Εμφανίζεται τότε το πιο κάτω παράθυρο 13

14 Βλέπουμε μία λίστα με όλα τα πεδία της φόρμας (στο παράδειγμά μας έχουμε τρία πεδία) Επιλέγουμε αυτό που θέλουμε και ορίζουμε τις ιδιότητες που επιθυμούμε στο κάτω μέρος του παραθύρου Εάν τσεκάρουμε την ιδιότητα Required ζητάμε το πεδίο να συμπληρώνεται απαραίτητα από τον χρήστη (να μην το αφήνει κενό) Εάν τσεκάρουμε την ιδιότητα Address ζητάμε να συμπληρώσει ο χρήστης απαραίτητα μία διεύθυνση ηλεκτρονικού ταχυδρομείου (να υπάρχει το κάπου στο ενδιάμεσο των χαρακτήρων) Αντίστοιχα τσεκάροντας το Number απαιτούμε την εισαγωγή ενός αριθμού ενώ αντίστοιχα στα πεδία Number from to απαιτούμε αριθμό ο οποίος θα βρίσκεται μέσα σε κάποια συγκεκριμένα όρια 28 Πώς δημιουργούμε layers; Μπορούμε να έχουμε σε μία σελίδα ορθογώνια πλαίσια όπου μπορούμε να εισάγουμε κείμενο, εικόνες ή οτιδήποτε άλλο έχουμε σε μία σελίδα Αυτό γίνεται με τη βοήθεια οδηγιών CSS αλλά το Dreamweaver το κάνει αυτόματα χωρίς να χρειάζεται να γράψουμε τέτοιες οδηγίες Για να γίνει αυτό πηγαίνουμε στην ομάδα εικονιδίων Layout και πατάμε το εικονίδιο Insert Layer Στη συνέχεια κάνουμε κλικ στη σελίδα μας στο σημείο όπου θέλουμε να τοποθετήσουμε το πλαίσιο και κρατώντας πατημένο το ποντίκι σχηματίζουμε το πλαίσιο Μπορούμε πλέον να εισάγουμε μέσα στο πλαίσιο κείμενο, εικόνες ή οτιδήποτε άλλο θέλουμε Εάν κάνουμε κλικ κάπου στο περίγραμμα του πλαισίου, τότε εμφανίζονται στο παράθυρο properties οι ιδιότητές του: Οι ιδιότητες L και T μας δίνουν τη θέση της αριστερής και πάνω γωνίας του πλαισίου Οι ιδιότητες W και H μας δίνουν το πλάτος και το ύψος του πλαισίου Η ιδιότητα Z- index είναι χρήσιμη σε περιπτώσεις που έχουμε πλαίσια τα οποία καλύπτουν εν μέρει το ένα το άλλο Το z-index μας δίνει τη θέση των πλαισίων αυτών από κάτω προς τα πάνω (δηλ αυτό που έχει z-index 2 καλύπτει αυτό που έχει z-index 1 κτλ) Η ιδιότητα Vis καθορίζει εάν το πλαίσιο είναι ορατό ή όχι, ενώ με τις ιδιότητες Bg image και Bg color προσδιορίζουμε μία εικόνα φόντου ή ένα χρώμα για το φόντο Η ιδιότητα Overflow προσδιορίζει τι γίνεται στην περίπτωση που το πλαίσιο είναι μικρό ώστε να χωρέσει όλα τα στοιχεία που εισάγαμε σε αυτό Μπορεί να πάρει τις τιμές hidden (ότι 14

15 δεν χωράει δεν φαίνεται), visible (φαίνονται όλα) ή scroll (εμφανίζονται μπάρες κύλισης) Τέλος, με τις ιδιότητες Clip μπορούμε να ζητήσουμε να κοπούν κάποια από τα περιεχόμενα του πλαισίου από αριστερά (L), δεξιά (R), επάνω (T) ή κάτω (B) 29 Με ποιο τρόπο μπορούμε να χωρίσουμε τη σελίδα μας σε διαφορετικά τμήματα και να εισάγουμε τα στοιχεία που θέλουμε σε κάθε ένα από τα τμήματα αυτά; Κάτι τέτοιο μπορεί να γίνει με τη βοήθεια των layers όπως περιγράφηκε προηγουμένως, αλλά μπορεί να γίνει καλύτερα με τη βοήθεια πινάκων Το Dreamweaver προσφέρει έναν εύκολο τρόπο να χωρίσουμε τη σελίδα σε διαφορετικά κομμάτια και παράγει αυτόματα τις αντίστοιχες εντολές δημιουργίας πίνακα Πηγαίνουμε στην ομάδα εικονιδίων Layout και πατάμε το κουμπάκι Layout Στη συνέχεια μπορούμε να χρησιμοποιήσουμε τα κουμπάκια Layout Table και Draw Layout Cell Με το πρώτο από αυτά μπορούμε να ζωγραφίσουμε το περίγραμμα του πίνακα και με το δεύτερο μπορούμε να σχηματίσουμε τα κελιά (τμήματα) από τα οποία θα αποτελείται ο πίνακας Μπορούμε έτσι εύκολα να χωρίσουμε τη σελίδα μας σε διαφορετικά τμήματα Αν θέλουμε μπορούμε να φύγουμε από τη Layout μορφή πατώντας το κουμπάκι 30 Standard Με ποιο τρόπο μπορούμε να πάρουμε βοήθεια σχετικά με τις εντολές HTML, οδηγίες CSS, εντολές Javascript κτλ; Εάν πατήσουμε Help/ Reference ή Shift+F1 εμφανίζεται ένα παράθυρο όπου μπορούμε να επιλέξουμε το είδος της βοήθειας που θέλουμε 15