Dreamweaver Fin

Futurekids Hellas Webtour II
Μάθηµα 1
Σχεδιασµός ιστοσελίδας
Περιγραφή: Οι µαθητές θα µάθουν τα στοιχεία που συνθέτουν µια επιτυχηµένη σελίδα

στο διαδίκτυο. Στη συνέχεια θα επισκεφτούν δικτυακούς τόπους (sites)
που έχουν δηµιουργηθεί µε το DreamWeaver, ανακαλύπτοντας τις
δυνατότητες του προγράµµατος. Στο τελευταίο µέρος του µαθήµατος θα
πλοηγηθούν σε δικτυακούς τόπους(sites) ταξιδιωτικών πρακτορείων
παίρνοντας µια ιδέα του πως πρέπει να είναι η τελική µορφή του
δικτυακού τους τόπου.
Στόχοι: Καθορισµός στόχων προς επίτευξη µε τη χρήση του προγράµµατος
Dreamweaver
Αναγνώριση από τον µαθητή των στοιχείων που συνθέτουν µια
επιτυχηµένη ιστοσελίδα.
Κατανόηση της γενικής ιδέας του περιεχοµένου της ιστοσελίδας που
πρέπει να αναπτυχθεί
Ο σχεδιασµός Τι κάνει µια ιστοσελίδα επιτυχηµένη;

της σελίδας
Σ’έναν κόσµο τόσο ανταγωνιστικό όπως ο σηµερινός, το θέµα της
επισκεψιµότητας είναι σηµαντικό. Κατά συνέπεια, η επιτυχία µίας
ιστοσελίδας σχετίζεται µε την επισκεψιµότητα της. Η αυξηµένη
επισκεψιµότητα µιας ιστοσελίδας είναι αποτέλεσµα καλού σχεδιασµού και
ενδιαφέροντος περιεχοµένου.
Σε ορισµένες περιπτώσεις η επισκεψιµότητα µπορεί να µην είναι τόσο
σηµαντική. Αντιθέτως η επιτυχία του δικτυακού τόπου (site) µπορεί να
οφείλεται στις επισκέψεις περιορισµένου εξειδικευµένου κοινού, λόγω του
συγκεκριµένου θέµατος που αφορά. Για παράδειγµα, είναι προτιµότερο
ένα ιατρικό site να έχει µικρή επισκεψιµότητα από εξειδικευµένους
χρήστες, παρά µεγάλη επισκεψιµότητα από άσχετους µε το αντικείµενο
χρήστες.
Γι’αυτό το λόγο καλό είναι να επικεντρωνόµαστε στη “ποιότητα” των
επισκέψεων (προσέγγιση συγκεκριµένου κοινού, βαθµός ικανοποίησης
επισκέπτη),παρά στον αριθµό επισκέψεων.
Αυτό είναι το «κλειδί της επιτυχίας» που κάθε σχεδιαστής ιστοσελίδων
(web-designer) πρέπει να λαµβάνει υπ’όψιν του, η “ικανοποίηση” του
επισκέπτη στον οποίο απευθύνονται οι σελίδες.
Μία ιστοσελίδα µπορεί να είναι λιγότερο ή περισσότερο ελκυστική

ανάλογα µε κάποιες κοινές παράµετρους. Κάποιες από αυτές τις
παραµέτρους είναι η ταχύτητα φόρτωσης της σελίδας, η ποιότητα και η
ποσότητα του περιεχοµένου, η ευκολία πλοήγησης, η συχνότητα
ενηµέρωσης, η οµοιογένεια µεταξύ των σελίδων του site η καλή επιλογή
γραφικών και χρωµάτων, κ.ά,
Η δηµιουργία ενός καλού site δεν είναι απλή υπόθεση.
Macromedia Dreamweaver 4 1 2001-2003

Απαιτεί αρκετή προεργασία. Ξεκάθαρο σχεδιασµό, εύκολη πλοήγηση,

σωστή διάταξη του περιεχοµένου, ανάλογα µε το κοινό στο οποίο θα
απευθυνθεί.
Ένα site που έχει δηµιουργηθεί αγνοώντας τους κανόνες σχεδιασµού, ή
χωρίς να υποστηρίζει τα τελευταία plug-ins της αγοράς, δεν θεωρείται
σύγχρονο site.
Σε κάθε περίπτωση πάντως, η δηµιουργικότητα αποτελεί τον ακρoγωνιαίο
λίθο για την επιτυχία του δικτυακού µας τόπου.
Η δηµιουργία µιας καλής ιστοσελίδας απαιτεί τεχνογνωσία, σωστό

προσχεδιασµό και:
• ∆ηµιουργικότητα
• Οργάνωση
• Πρόβλεψη
• ∆οµή
• Λειτουργικότητα
Ερευνώντας Βάλτε τους µαθητές να πλοηγηθούν στις διάφορες ιστοσελίδες

Ιστοσελίδες σηµειώνοντας τα περιεχόµενα που τους ενδιαφέρουν (χρησιµοποιήστε το
Σηµειωµατάριο των Windows).
Οι µαθητές θα πρέπει επίσης, να σηµειώσουν τις διευθύνσεις που θα
χρειαστεί να επισκεφθούν αργότερα. Προτείνεται στον εκπαιδευτή να
πλοηγηθεί πρώτος σε αυτές τις σελίδες προκειµένου να καθοδηγήσει την
έρευνα.
Επίσηµος ∆ικτυακός Τόπος Macromedia Dreamweaver
http://www.macromedia.com/software/dreamweaver/
Παραδείγµατα ∆ικτυακών Τόπων σχεδιασµένων µε το Macromedia

Dreamweaver
http://homer.hcrhs.k12.nj.us/esoup/
http://www.crayola.com/
http://www.mobiledatashop.com/
http://www.mediametrix.com
http://www.friendsofed.com/
http://americanhistory.si.edu/ssb/
http://www.kelloggs.co.uk/
http://www.nationalgeographic.com/monterey/
http://www.library.northwestern.edu/
http://www.foxkids.co.uk/
Ελληνικοί ∆ικτυακοί Τόποι φτιαγµένοι µε DreamWeaver

http://www.nationalgeographic.gr/
http://www.ascompany.gr/index.jsp
http://www.shop21.gr
http://www.e-game.gr/

∆ικτυακοί Τόποι (sites) εταιριών σχεδιασµού ιστοσελίδων
www.wysiwyg.net
www.iconmedialab.es
www.doubleyou.com
www.brandmedia.com
www.teknoland.com
www.lamosca.com
∆ικτυακοί Τόποι (sites) πρακτορείων ταξιδίων:
http://www.expedia.com
http://www.hoteldiscounts.com
http://www.travelodge.com
http://www.travelocity.com/
Ελληνικοί ∆ικτυακοί Τόποι (sites) πρακτορείων ταξιδίων:

http://www.hit360.com/athenstravel/GR/
http://www.travelplan.gr/
http://www.koufonissiatours.gr/
Σηµειώσεις για Ο σχεδιασµός της ιστοσελίδας αυτής της ενότητας έχει σαν σηµείο
τον αναφοράς το πρακτορείο ταξιδίων “Halcón Viajes”
εκπαιδευτή: (www.halconviajes.com). Είναι ενδιαφέρον να επισκεφθούν οι µαθητές
αυτό το site λόγω του ο’τι παρουσιάζει όλες τις εφαρµογές που θα
αναπτύξουµε κατά τη διάρκεια της εκµάθησης του DreamWeaver.

Μάθηµα 2
Το προσχέδιο της Ιστοσελίδας
Περιγραφή : Οι µαθητές θα ανταλλάξουν απόψεις όσον αφορά τα περιεχόµενα και την

δοµή της ιστοσελίδας. Θα αποφασίσουν για το σχεδιασµό της αρχικής
σελίδας (Home Page) αλλά και της κάθε σελίδας χωριστά, καθορίζοντας
το µέρος που θα τοποθετηθούν τα λογότυπα, τα κουµπιά και τα κείµενα.
Στόχοι: Η ανάπτυξη της βασικής δοµής του δικτυακού τόπου µέσω της
συζήτησης και της ανταλλαγής απόψεων στην τάξη .
∆ηµιουργία ενός προσχεδίου των διαφόρων σελιδών. To προσχέδιο
επιτρέπει την µελλοντική κατασκεύη του δικτυακού τόπου µε τις
λιγότερες δυνατές διορθώσεις
Brainstorming Ξεκινώντας το σχεδιασµό ενός ∆ικτυακού τόπου (site), το πρώτο πράγµα

που πρέπει να επεξεργαστούµε είναι η κεντρική ιδέα. Η κεντρική ιδέα
πρέπει να λαµβάνεται υπόψιν καθ’ όλη τη διάρκεια του σχεδιασµού.
Μόλις συγκεκριµενοποιήσουµε την αρχική ιδέα, τη διανθίζουµε µε
περαιτέρω στοιχεία που προκύπτουν από το brainstorming (συζήτηση της
ιδέας µε άλλους). Κατ’αυτόν τον τρόπο η κεντρική ιδέα διαµορφώνεται
ακόµη περισσότερο, παίρνοντας σχήµα ή αποκλείοντας κάποιες λύσεις
που αρχικά φαινόντουσαν ενδιαφέρουσες, αλλά για κάποιους λόγους είναι
ανέφικτες.
Μετά το brainstorming είναι ανάγκη να απαντηθούν τα ακόλουθα
ερωτήµατα:
• Ποιο είναι το κοινό στο οποίο θα απευθύνεται ο ∆ικτυακός

τόπος (Site);
• Ποιος είναι ο πελάτης;
• Τι είδους τεχνικές απαιτήσεις έχει ο χρήστης που θα επισκευθεί
την σελίδα;
Ένα πρώτο Ακολουθεί η ανάπτυξη του Οδηγού κατεύθυνσης των γραφικών και της
σχέδιο δοµής του δικτυακού τόπου.
Μέσω του οδηγού κατεύθυνσης καθορίζουµε προϋποθέσεις που αφορούν

στο γραφικό σχεδιασµό και τη σύνδεση των ιστοσελίδων.
Οι µαθητές θα πρέπει να κρατούν σηµειώσεις χρησιµοποιώντας το
Σηµειωµατάριο, το Word, ή συµβατικές κόλλες χαρτί.
Τα συµπεράσµατα στα οποία θα καταλήξουµε, θα βρουν εφαρµογή κατά

τη διάρκεια της µελέτης µας από εδώ και στο εξής.
Σχεδιάζοντας τον οδηγό θα πρέπει πάντοτε να έχουµε υπ’όψιν το

σχεδιάγραµµα που προέκυψε µετά το brainstorming λαµβάνοντας πάντα

υπόψιν µας:
• την κεντρική ιδέα,

• τον αποδέκτη και
• τον πελάτη
Βάση αυτών των τριών παραµέτρων, ο µαθητής θα πρέπει να καθορίσει

την ταυτότητα και την «προσωπικότητα» ολόκληρου του δικτυακού
τόπου, βασιζόµενος στα παρακάτω σηµεία:
• τη δοµή του κειµένου,

• το µέγεθος της σελίδας
• τους χρωµατικούς συνδυασµούς,
• τα γραφικά,
• τη γραµµατοσειρά,
• τους πίνακες,
• τα πλαίσια,
• τα ειδικά εφφέ πάνω στο κείµενο
• τις συνδέσεις.
Ο σχεδιασµός (layout) της σελίδας, έχει ιδιαίτερη σηµασία, αφού ακόµη

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

σε αντιπαραβολή µε τη διάθεση που προκαλούν στο χρήστη.
Χρώµατα Αποτέλεσµα
Συνδυασµός απαλών τόνων Ηρεµία

(ροζ, κίτρινα, ή πράσινα)
πάνω σε «κρύο» φόντο
Ζωντανά χρώµτα συνδυασµένα Υψηλή τεχνολογία,

µε µαύρο, άσπρο, ή γκρι µοντέρνα όψη
Κόκκινο, µατζέντα και πορτοκαλί µαζί Ερέθισµα
Απαλοί τόνοι µπλε, πράσινα και καφέ Καθαριότητα
Συνδυασµός από πορτοκαλί Ζεστασιά

και κόκκινα χρώµατα, κίτρινα,
καστανά και ροζ (σε έντονους τόνους)

Οι µαθητές πρέπει να επιλέξουν από το παραπάνω πίνακα το συνδιασµό

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

τόπος (site) βρίσκεται «στον αέρα», καλή λύση είναι η ενσωµάτωση ενός
ερωτηµατολογίου σε µορφή φόρµας, µέσα από το οποίο ο χρήστης
µπορεί να ασκήσει κριτική ή να προτείνει ιδέες για την βελτίωση του site.
Η µετατροπή της αρχικής ιδέας σε δικτυακό τόπο, απαιτεί προεργασία.

Η αρχική ιδέα είναι η δηµιουργία του site ενός γραφείου ταξιδίων.
Στόχος του ∆ικτυακού τόπου (site) που θα δηµιουργήσουµε είναι η
αύξηση των πωλήσεων του γραφείου. Μέσω του δικτυακού του τόπου το
γραφείο σκοπεύει να εξυπηρετήσει τους πελάτες του, ενώ αποσκοπεί και
στην προσέγγιση νέων πελατών.
Οι µαθητές θα πρέπει να συζητήσουν για το «στήσιµο» της σελίδας

σηµειώνοντας τα συµπεράσµατα στα οποία καταλήγουν.
Η διαχείριση του αποθηκευτικού χώρου είναι ένα πολύ σηµαντικό στοιχείο

που πρέπει να λαµβάνεται πάντα υπόψιν. Όσο πιο πολλές γραφικές
απαιτήσεις και στοιχεία πολυµέσων υπάρχουν σε µια ιστοσελίδα τόσο
περισσότερο χώρο καταλαµβάνουν οι σελίδες του site στον
αποµακρυσµένο διακοµιστή (πολλοί από τους παροχείς υπηρεσιών
Internet - ISP- προσφέρουν σήµερα χώρο γύρω στα 12ΜΒ δωρεάν, ο
οποίος είναι περισσότερο από αρκετός για να υποστηρίξει µια ιστοσελίδα
µε αρκετές πληροφορίες). Είναι απαραίτητο να ξέρουµε το διαθέσιµο
χώρο του διακοµιστή (server) την ώρα που δηµιουργούµε την ιστοσελίδα
µας, γιατί αν ξεπεράσουµε την χωρητικότητα του διακοµιστή, µπορεί να
βρεθούµε στη δυσάρεστη θέση του να χρειαστεί να ξαναφτιάξουµε την
σελίδα από την αρχή.
Τα πρώτα Η καταγραφή των πιο βασικών σελίδων του δικτυακού µας τόπου σε
σχέδια σε χαρτί χαρτί είναι απαραίτητη προεργασία .
Η διαδικασία αυτή αποσκοπεί στην γραφική αναπαράσταση των στοιχείων
που προέκυψαν κατά τη διάρκεια του brainstorming. Προσχεδιάζοντας το
δικτυακό τόπο µπορούµε ευκολότερα να είµαστε συνεπείς (consistency)
στον σχεδιασµό, διατηρώντας σωστή πλοήγηση και οργάνωση του
περιεχοµένου. Ακόµη ο προσχεδιασµός είναι πολύ βασικός αφού
ελαχιστοποιεί τις µελλοντικές αλλαγές που θα κάνουµε στον δικτυακό
τόπο.
Το σχέδιό µας Σχεδιάζουµε σε µια σελίδα χαρτί προσπαθώντας να αναπαραστήσουµε τον

δικτυακό τόπο. Στο σχέδιο περιλαµβάνονται τα βασικά στοιχεία της κάθε
ιστοσελίδας, χωρίς πολλές λεπτοµέρειες.

Σηµειώσεις για Σε αυτό το σηµείο είναι σηµαντικό ο εκπαιδευτής να έχει ολοκληρωµένη

τον εκπαιδευτή γνώση του δικτυακού τόπου που θα δηµιουργήσουµε.
Επισκεφτείτε την ιστοσελίδα που δίνεται σαν παράδειγµα και µελετήστε
την δοµή της κεντρικής σελίδας καθώς και τις εσωτερικές σελίδες για να
µπορέσετε να καθοδηγήσετε τους µαθητές σας.
Η βασική Θα περιέχει γραφικά, σχεδιασµένα έτσι ώστε να µην είναι υπερβολικά

σελίδα «φορτωµένη». Ο χρόνος «κατεβάσµατος» της ιστοσελίδας είναι ένα από
τα βασικότερα στοιχεία επιτυχίας της αφού η πλειοψηφία των χρηστών
δεν θα περιµένει πάνω από 20 δευτερόλεπτα για να φορτώσει µια σελίδα.
Με λίγα λόγια όσο γρηγορότερα φορτώνει η ιστοσελίδα τόσο
περισσότεροι χρήστες θα την δουν.
Προτείνεται να δουλέψουµε µε πλαίσια (frames), δηµιουργώντας δηλαδή
έναν διαχωρισµό της βασικής σελίδας σε τρία µέρη. Το κάθε µέρος
αποτελείται από µια ξεχωριστή ιστοσελίδα ενώ η σύνθεση και των τριών
ιστοσελιδών αποτελεί την αρχική µας σελίδα. Αναφέρετε σαν παράδειγµα
ένα ύφασµα πατσγουορκ. Το κάθε κοµµάτι είναι διαφορετικό ύφασµα,
αλλά όλα µαζί συνθέτουν το πατσγουορκ.
• Γιατί να χωρίσουµε το περιεχόµενο της σελίδας σε διάφορα µέρη

(υποσελίδες);
Για τον απλό λόγο οτι αν δεν γινόταν έτσι, κάθε φορά που θα θέλαµε να
δούµε κάποια από τις ιστοσελίδες που υπάρχουν στο µενού θα
επαναφορτωνόντουσαν όλα τα γραφικά της αρχικής σελίδας. Χωρίζοντας
την, φορτώνεται µόνο το σηµείο που αντιστοιχεί στο περιεχόµενο
διατηρώντας αντιθέτως τα υπόλοιπα µέρη (εικόνες πλοήγησης, λογότυπα)
ακριβώς όπως στην αρχή χωρίς να χρειάζετε να “κατέβουν” από τον
αποµακρυσµένο διακοµιστή. Με λίγα λόγια, ο σκοπός του διαχωρισµού
της ιστοσελίδας δεν είναι άλλος από το να υπάρχει πάντα στην οθόνη ένα
µενού για πρόσβαση στα διαφορετικά περιεχόµενα, εξοικονοµώντας
χρόνο αναµονής στον χρήστη.
Ο γραφικός σχεδιασµός αυτής της βασικής σελίδας θα ακολουθήσει

ορισµένες από τις «περιπατηµένες» του Internet.
Στο επάνω µέρος της σελίδας µπορούµε να έχουµε διαφηµιστικό χώρο

(banners). Θα χρειαστεί γι’αυτό το σκοπό να αφήσουµε κάποιο χώρο κενό
Στη δική µας ιστοσελίδα δεν θα υπάρχουν αρχικά καθόλου διαφηµιστικές
λωρίδες .
Αριστερά στην σελίδα µας εµφανίζονται σε κάθετη διάταξη οι τίτλοι των

περιεχοµένων του site ή διαφορετικά η µπάρα πλοήγησης (navigation
bar). Στο δεξί µέρος εµφανίζονται τα περιεχόµενα.
Στο προσχέδιο θα πρέπει να έχουµε προνοήσει αφήνοντας κενό το τµήµα
στο οποίο θα βρίσκεται η µπάρα πλοήγησης. Η γραφική αναπαράσταση
(προσχέδιο) µπορεί να γίνει µε κάποιο από τα προγράµµατα επεξεργασίας

γραφικών (Adobe Photoshop 5.5, Corel Photo Paint 9, Paint Shop Pro6 ή
οποιοδήποτε άλλο). Η εκµάθηση προγράµµατος γραφικών δεν αποτελεί
το ζητούµενο του συγκεκριµένου µαθήµατος
Οι µαθητές πρέπει να σχεδιάσουν διαγράµµατα της αρχικής σελίδας και
τουλάχιστον µία από τις εσωτερικές σελίδες πάνω σε χαρτί.
Ο µαθητής µπορεί να χρησιµοποιήσει οποιοδήποτε πρόγραµµα
γραφικών,προτιµάει
Γενικό Επικοινωνήστε στους µαθητές σας την ανάγκη δηµιουργίας ενός
Οργανόγραµµα οργανογράµµατος (Μάθηµα 3).
της
Ιστοσελίδας Το οργανόγραµµα χρησιµεύει κυρίως για την οργάνωση και την δοµή των
περιεχοµένων. Μια ιστοσελίδα φτιαγµένη µε πλαίσια (frames) δεν είναι
µία απλή ιστοσελίδα αλλά το σύνολο πολλών διαφορετικών ιστοσελιδών.
Αν δουλέψουµε χωρίς να υπάρχει οργανόγραµµα, αργά ή γρήγορα θα
ξεχάσουµε που και πως πρέπει να τοποθετηθεί µία σελίδα ή µία
παράγραφος. Το οργανόγραµµα εξυπηρετεί δύο σκοπούς:
1. ∆ίνει µία γενική ιδέα του πως πρέπει να σχεδιαστούν τα στοιχεία

αλληλεπίδρασης που θα συνδέουν το κάθε σηµείο της ιστοσελίδας
του δικτυακού τόπου.
2. Προσφέρει µία σφαιρική εικόνα του πως πρέπει να λειτουργεί ο
δικτυακός τόπος και του που και πως πρέπει να συνδεθεί η
κάθε σελίδα.
Επιπλέον, στο οργανόγραµµα µπορούµε να ονοµάσουµε τις ιστοσελίδες

του δικτυακού τόπου, δίνοντας τους επεξηγηµατικές ονοµασίες οι οποίες
µας διευκολύνουν στην κατανόηση των περιεχοµένων.
Επιλογή της Επόµενο βήµα αποτελεί η επιλογή χρωµάτων για τον δικτυακό µας τόπο.
παλέτας
χρωµάτων Το χρώµα είναι ένας κώδικας οπτικής πληροφορίας που κατέχει
σηµαντικές ψυχολογικές ιδιότητες, απο το να ηρεµεί έως το να ταράζει.
Έτσι λοιπόν πρέπει να δώσουµε ιδιαίτερη σηµασία στην επιλογή
χρωµάτων. Το γενικό πλαίσιο, το θέµα, η φιλοσοφία της εταιρίας, είναι
ορισµένα από τα σηµεία που πρέπει να λάβουµε υπ’όψιν µας όταν
επιλέγουµε το χρώµα.
Στο Internet, εκτός από το γραφικό περιεχόµενο, τα χρώµατα πρέπει να

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

Ποιοι είναι οι καλύτεροι συνδυασµοί χρωµάτων για τον δικτυακό µας

τόπο;
Αυτό εξαρτάται και από τον σχεδιαστή, αλλά σε γενικές γραµµές οι

καλύτεροι συνδιασµοί είναι:
1. Αίσθηση ηρεµίας: συνδυασµός απαλών τόνων, κίτρινα ή

πράσινα σε κρύους φόντους.
2. Αίσθηση υψηλής τεχνολογίας: συνδυασµός ζωντανών
χρωµάτων σε µαύρο, άσπρο ή µεταλλικό γκρι.
3. Αίσθηση ερεθίσµατος: συνδυασµός του κόκκινου, του
µατζέντα και του πορτοκαλί.
4. Αίσθηση χαλάρωσης: συνδυασµός απαλών τόνων, πράσινα,
καστανά και µπλε.
5. Αίσθηση καθαριότητας: πράσινο και άσπρο, ή µπλε και άσπρο.
6. Αίσθηση ζεστασιάς: συνδυασµός χρωµάτων όπως τα κόκκινα,
τα πορτοκαλί, τα κίτρινα, τα καστανά, και τα ροζ.
Όσον αφορά την επιλογή του χρώµατος για τα κείµενα, εξαρτάται από το
χρώµα που έχει επιλεχθεί για το φόντο:
1. Για τους άσπρους φόντους, τα ανάλογα χρώµατα κειµένου είναι

το µαύρο, µπλε, κόκκινο και το σκούρο πράσινο
2. Για τους κίτρινους φόντους: µαύρο, µπλε σκούρο και κόκκινο
3. Για φόντους σε µαύρο επιλέγουµε το κίτρινο ή το άσπρο
4. Για φόντους σε σκούρο πράσινο: άσπρο
5. Για κόκκινους φόντους: άσπρο και κίτρινο.
Επιλογή της Όπως και το χρώµα, έτσι και η γραµµατοσειρά αποτελεί βασικό στοιχείο
γραµµατοσειρά που δίνει ταυτότητα και προσωπικότητα στην ιστοσελίδα. Έχουµε
ς συνηθίσει να βλέπουµε δύο καθιερωµένους τύπους γραµµατοσειρών :
Times New Roman και Arial. Οι συγκεκριµένες γραµµατοσειρές είναι
προκαθορισµένες στο λειτουργικό µας σύστηµα.
Σε µια ιστοσελίδα διακρίνουµε δύο ειδών γραµµατοσειρές:
1. Η γραµµατοσειρά των γραφικών: επιλέγεται για την δηµιουργία

των γραφικών λογότυπων ή για την αλληλεπιδραστική
σύνθεση.
2. Η γραµµατοσειρά που επιλέγεται για προγραµµατισµό σε HTML:
συχνά είναι προκαθορισµένη στο λειτουργικό σύστηµα.
Μπορούµε να διαλέξουµε διάφορα µεγέθη πάχους ή ύψους
αλλά η γραµµατοσειρά είναι ουσιαστικά πάντα η ίδια. Παρ’όλα
αυτά, µπορούµε να επιλέξουµε µια διαφορετική γραµµατοσειρά
από τον επεξεργαστή ιστοσελίδων.
Όσον αφορά το υπερκείµενο (HTML) της ιστοσελίδας, δεν

χρησιµοποιούµε ποτέ µία γραµµατοσειρά που είναι «δύσκολη» στην

ανάγνωση.
Προτεινόµενες γραµµατοσειρές: Times New Roman, Arial, Arial Narrow,
Courier, Garamond, Tahoma ή Trebuchet MS.
Περίληψη Σε αυτό το σηµείο οι µαθητές πρέπει να έχουν δύο αρχεία.
Το προσχέδιο (γραφική αναπαράσταση) των σελίδων που θα

δηµιουργήσουµε και το ηλεκτρονικό αρχείο (Σηµειωµατάριο ή Word) µε
τις σηµειώσεις-παρατηρήσεις των µαθητών.
Στο ηλεκτρονικό µας αρχείο έχουµε σηµειώσει:
• Τα αποτελέσµατα της πρώτης µας έρευνας στο Internet σχετικά

µε το σχεδιασµό ιστοσελιδών (Μάθηµα 1)
• Τις παρατηρήσεις σχετικά µε τα περιεχόµενα ιστοσελίδων από
ταξιδιωτικά πρακτορεία (Μάθηµα 1)
• Το πόρισµα από τη διαδικασία του “brainstorming”
• Το συνδυασµό χρωµάτων που θα χρησιµοποιήσουµε
• Τη γραµµατοσειρά που θα χρησιµοποιήσουµε
• Άλλες παρατηρήσεις
Οργάνωση της Κλείνουµε το µάθηµα αναφέροντας τα βήµατα που θα ακολουθήσουµε

εργασίας από εδώ και στο εξής στη διαδικασία της δηµιουργίας του δικτυακού
τόπου:
• Πρώτο βήµα: σχεδιάζουµε τα γραφικά περιεχόµενα

• ∆εύτερο βήµα: δηµιουργούµε τα περιεχόµενα κειµένου µε έναν
επεξεργαστή κειµένων
• Τρίτο βήµα: δηµιουργούµε τις διαφηµιστικές λωρίδες
• Τέταρτο βήµα: κατασκεύαζουµε την ιστοσελίδα ξεκινώντας από
την αρχική σελίδα
• Πέµπτο βήµα: ελέγχουµε την λειτουργικότητα της ιστοσελίδας
• Έκτο βήµα: βελτιώνουµε την ιστοσελίδα
• Έβδοµο βήµα: δηµοσιεύουµε την ιστοσελίδα στο Internet
• Όγδοο βήµα: φτιάχνουµε ένα αρχείο txt στον αποµακρυσµένο
διακοµιστή (remote server) το οποίο θα περιέχει τα
χαρακτηριστικά / προδιαγραφές της ιστοσελίδας.
Αυτά είναι όλα τα βήµατα που πρέπει να πραγµατοποιηθούν προκειµένου

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

των γραφικών ενός δικτυακού τόπου η προετοιµασία των γραφικών έχει ιδιαίτερη
σηµασία.

Μπορούµε να πούµε πως ο κανόνας στο σχεδιασµό σήµερα στο Internet

είναι ο συνδυασµός της απλότητας/λιτότητας και της ποιότητας των
γραφικών. Αυτό µπορεί να γίνει µόνο εξετάζοντας προηγουµένως την
σύνθεση των στοιχείων στην οθόνη ανάλογα µε τις τεχνικές
προδιαγραφές του κοινού στο οποίο απευθυνόµαστε.
Για παράδειγµα ένας καθοριστικός παράγοντας για το µέγεθος των
γραφικών είναι το µέγεθος της οθόνης του χρήστη. Μεγαλύτερη οθόνη
σηµαίνει περισσότερος χώρος για κείµενο και γραφικά. Και εδώ θα πρέπει
να προσέξουµε. ∆εν σηµαίνει ότι επειδή κάποιος χρήστης έχει οθόνη 21
ιντσών θα πρέπει εµείς να σχεδιάσουµε την ιστοσελίδα µας για οθόνες 21
ιντσών. Θα πρέπει να λάβουµε υπόψιν το µέσο όρο των χρηστών. Το
σύνηθες είναι να σχεδιάζουµε για οθόνες 17 ιντσών.
Όταν δηµιουργούµε, διορθώνουµε ή σχεδιάζουµε εικόνες για την

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

Μάθηµα 3
Γενικό Προσχέδιο της Ιστοσελίδας
Περιγραφή: Οι µαθητές θα φτιάξουν το προσχέδιο της ιστοσελίδας χρησιµοποιώντας

το πρόγραµµα Inspiration. Εναλλακτικά µπορούν να χρησιµοποιήσουν τον
κειµενογράφο του Word. Σε αυτό θα προβάλλουν τα περιεχόµενα των
σελιδών, τα ονόµατα και τους συνδέσµους (links), παρουσιάζοντας
κατ’αυτό το τρόπο ένα είδους «χάρτη» του δικτυακού τόπου.
Στόχοι: Να µπορεί ο µαθητής να σχηµατίσει µια σαφή εικόνα του συνόλου της
εργασίας ανάπτυξης
Να δηµιουργήσει ο µαθητής ένα πλάνο σύλληψης το οποίο θα
χρησιµοποιεί καθ’όλη τη διάρκεια του σχεδιασµού για να πλαισιώσει τη
δουλειά του
Περιγραφή της Θα δηµιουργήσουµε τώρα το γενικό προσχέδιο του δικτυακού τόπου
Ιστοσελίδας χρησιµοποιώντας το αρχείο Ιστοσελίδα.ins. Βάση αυτού του αρχείου και
σύµφωνα µε τις συζητήσεις των προηγουµένων µαθηµάτων,
καθοδηγήστε το µαθητή.
Γι’αυτό το σκοπό προτείνουµε να βασιστείτε στο παρακάτω σχέδιο

προκειµένου να ηγηθείτε της συζήτησης.
1. Βασική Σελίδα (παρουσίαση του δικτυακού τόπου)

2. Αρχική Σελίδα (ή Home Page)
α. Λογότυπο και όνοµα του πρακτορείου
β. Κουµπιά µε συνδέσεις (links) σε προϊόντα και υπηρεσίες
γ. Κουµπιά για πληροφορίες για την εταιρία και links σε
διάφορες φόρµες
3. ∆ιακοπές
α. Παρουσιάστε µία οθόνη µε ένα χάρτη µε επιλογές από
µέρη όπου ο χρήστης θα µπορεί να επιλέξει κάνοντας κλικ και
περνόντας σε άλλη σελίδα
1. Επιλογή ∆ιακοπών 1
4. Προσφορές
α. Στην οθόνη παρουσιάζεται µία σειρά από επιλογές
ταξιδίων µε σύντοµη περιγραφή, περιέχοντας µία φωτογραφία και
τη τιµή. Κάνοντας κλικ πάνω της περνάµε σε άλλη σελίδα µε τις
λεπτοµέρεις της προσφοράς
1. Λεπτοµέρειες Προσφοράς 1
2. Λεπτοµέρειες Προσφοράς 2
3. Λεπτοµέρειες Προσφοράς Χ
5. Αεροπορικά Εισιτήρια
α. Θα εµφανίζεται µία αίτηση για την επιλογή της πτήσης,

του µέρους κτλ. µε σύνδεση στο σύστηµα κρατήσεων

6. Εισιτήρια Τρένου
α. Θα προσφέρεται η υπηρεσία πώλησης και παράδοσης
εισιτηρίων στην κατοικία του χρήστη
7. Weekend Plan
α. Παρουσιάζεται µία λίστα προϊόντων για το
Σαββατοκύριακο τοποθετηµένα έτσι ώστε όταν το mouse του
χρήστη περνάει πάνω τους να εµφανίζεται σύντοµο κείµενο µε µια
µικρή εξήγηση του προϊόντος
β. Περιέχει επιπλέον συνδέσεις στη σελίδα ξενοδοχείων και
αυτοκινήτων
8. Κουπόνια Ξενοδοχείου
α. Παρουσίαση οθόνης µε την περιγραφή του προϊόντος
και φόρµα αναζήτησης κάποιου συγκεκριµένου ξενοδοχείου
9. Κουπόνια Αυτοκινήτων
α. Περιγραφή του προϊόντος µε συνδέσεις σε διάφορες
επιλογές τιµών
1. Επιλογή τιµής 1
2. Επιλογή τιµής Χ
10. Αποκλειστικά Προϊόντα
α. Παρουσίαση διαφόρων επιλογών: Παραλίες, Γκολφ,
Ξενοδοχεία Melia, Κέντρα Υγείας, Τουρισµός Περιπέτειας, µε συνδέσεις σε
νέες σελίδες για κάθε µία από αυτές τις επιλογές
1. Επιλογή Παραλίες: περιγραφή του προϊόντος
2. Επιλογή Γκολφ: περιγραφή του προϊόντος
3. Επιλογή Ξενοδοχεία Melia: περιγραφή του
προϊόντος
4. Επιλογή Κέντρα Υγείας: περιγραφή του
προϊόντος
5. Επιλογή Τουρισµός Περιπέτειας: περιγραφή του
προϊόντος
11. Η Εταιρία
Σελίδα µε πληροφορίες για την εταιρία, ποιοι είµαστε, κτλ
12. Εγγραφή
Προτείνουµε στον χρήστη να γραφτεί στην ιστοσελίδα για
να λαµβάνει πληροφορίες σχετικές µε ειδικές προσφορές.
13. Προτάσεις
α. Σελίδα µε φόρµα σχολίων όπου ο χρήστης µπορεί να
συµπληρώσει προτάσεις και σχόλια για την ιστοσελίδα ή τις υπηρεσίες της
14. ∆ιαγωνισµός
α. Πρόταση συµµετοχής σ’ένα διαγωνισµό.

Βασική Σελίδα (παρουσίαση του site)

Επιλογή 1
∆ιακοπών
Επιλογή 2
Home Page
Η Εταιρία ∆ιακοπών
Λογότυπο & όνοµα πρακτορείου ∆ιακοπές
Σελίδα µε πληροφορίες για την εταιρία, Κουµπιά σύνδεσης σε προϊόντα&υπηρεσίες Παρουσιάζει ένα χάρτη µε επιλογές από µέρη όπου ο χρήστης
ποιοι είµαστε, κτλ Κουµπιά για εταιρική ενηµέρωση και συνδέσεις σε θα κάνει κλικ σ’ένα µέρος και θα συνδέεται µε άλλη σελίδα
διάφορες φόρµες
Επιλογή 3
Σελίδα προσφορών ∆ιακοπων
για τον εγγεγραµένο Προσφορές
Προσφορές
χρήστη Εγγραφή Παρουσιάζει µία σειρά συνοπτικών επιλογών ταξιδιών
Καλούµε τον πλοηγό να γραφτεί στην που περιέχουν µία φωτογραφία και τη τιµή. Με κλικ περνάµε
Ιστοσελίδα για να έχει ειδικές προσφορές. σε άλλη σελίδα µε τις λεπτοµέρειες της προσφοράς
ofertas especiales
Ο πλοηγός µπορεί El
να είναι εγγεγραµένος Προσφορά 1
Φόρµα εγγραφής
για τον µη χρήστης ή όχι.
εγγεγραµένο
χρήστη Εισιτήρια Αεροπλάνου
Παρουσιάζει µία φόρµα για την επιλογή πτήσης, προορισµών, κτλ Προσφορά 2
Συνδεδεµένη µε το σύστηµα κρατήσεων
Προτάσεις
Σελίδα όπου ο χρήστης µπορεί να
κάνει προτάσεις για την ιστοσελίδα
ή τις υπηρεσίες
Εισιτήρια Τρένου
Προσφορά Χ
Παρέχεται η υπηρεσία πώλησης εισιτηρίων και παράδοη κατ’οίκον
∆ιαγωνισµός
Πρόταση συµµετοχής
σε διαγωνισµό Week End Plan
Μία σειρά προϊόντων της κατηγορίας µε περιγραφή που

εµφανίζεται όταν ο χρήστης περνάει το ποντίκι από πάνω τους .
Περιέχει επίσης συνδέσεις µε τη σελίδα ξενοδοχεία και αυτοκίνητα
Κουπ όνια Ξενοδοχείων

Παρουσιάζει τη περιγραφή του προϊόντος και µία φόρµα
αναζήτησης για συγκεκριµένα ξενοδοχεία Επιλογή Τιµής 1
Κουπ όνια Αυτοκινήτου

Περιγραφή του προϊόντος και συνδέσεις σε διάφορες τιµές
χρέωσης
Επιλογή Τιµής Χ
Αποκλειστικά Προϊόντα
Παρουσιάζει διάφορες επιλογές: Παραλίες, Γκολφ, Ξενοδοχεία Επιλογή Παραλίες
Περιγραφή του
Melia, Κέντρα Υγείας, Τουρισµός Περιπέτειας, µε συνδέσεις σε
Αρχείο Ιστοσελίδα.ins νέες σελίδες για τη κάθε επιλογή
προϊόντος
Επιλογή Γκολφ
προϊόντος
Επιλογή Ξενοδοχεία
Melia
προϊόντος
Επιλογή Κέντρα
Υγείας
προϊόντος
Επιλογή Τουρισµού
περιπέτειας
προϊόντος

Μάθηµα 4
∆ηµιουργία και άνοιγµα ιστοσελίδων
Περιγραφή: Οι µαθητές θα µάθουν πως να δηµιουργούν µια ιστοσελίδα µε Macromedia

Dreamweaver 4 και τους διάφορους τρόπους που µπορούν να την
επεξεργαστούν. Επίσης θα ασχοληθούν την οργάνωσή του δικτυακού τόπου
δηµιουργώντας φακέλους και υποφακέλους µέσα στους οποίους θα
αποθηκεύονται οι επιµέρους ιστοσελίδες και αρχεία.
Στόχοι: Παρουσίαση του προγράµµατος Macromedia Dreamweaver 4

Κατασκεύη ιστοσελίδων µε διάφορους τρόπους
∆ηµιουργία φακέλων και σελιδών µε σκοπό την καλύτερη οργάνωση των
περιεχοµένων του δικτυακού τόπου
Αποθήκευση Ένας δικτυακός τόπος µπορεί να είναι κάτι τόσο απλό όσο µία σελίδα ή µπορεί
ιστοσελίδων να είναι και µία συλλογή από µία µεγάλη ποικιλία αρχείων, µεταξύ των οποίων
µπορεί να συµπεριλαµβάνονται σελίδες, γραφικά, αρχεία ήχου, αρχεία βίντεο,
και σχεδόν οποιαδήποτε άλλη µορφή αρχείου που µπορεί κανείς να
φανταστεί.
Ανεξάρτητα από το πόσο απλό ή πολύπλοκο µπορεί να είναι το περιεχόµενο
µίας ιστοσελίδας, πάντα χρειάζεται αποθηκευτικό χώρο. Ο κάθε δικτυακός
τόπος που δηµιουργείται χρειάζεται ένα ανεξάρτητο φάκελο µέσα στο τοπικό
σύστηµα.
Οι µαθητές θα πρέπει σε αυτό το σηµείο να πάνε στον Εξερευνητή των
Windows ή στο εργαλείο που προτιµάνε και να δηµιουργήσουν ένα φάκελο
που θα περιλαµβάνει όλους τους φακέλους µε τους δικτυακούς τόπους που
θα δηµιουργήσουν (WebPages) και µέσα σε αυτόν ένα υποφάκελο ο οποίος
αποτελεί το βασικό µας κατάλογο (root directory) όπου θα αποθηκεύσουµε σε
τοπικό επίπεδο τα διάφορα αρχεία που θα χρησιµοποιήσουµε στον
συγκεκριµένο δικτυακό τόπο (WebTour). Αυτός ο φάκελος θα ονοµάζεται:
C:/WebPages/WebTour
Παρουσίαση Οι µαθητές πρέπει τώρα να τρέξουν το πρόγραµµα Macromedia Dreamweaver

του 4 από την επιφάνεια εργασίας των Windows.
προγράµµατος
Κάντε µία µικρή παρουσίαση του προγράµµατος, των διαφόρων παραθύρων
και εργαλειών του. Τονίστε στους µαθητές πως καθώς θα προχωράµε στη
παραγωγή θα εξετάζουµε τις διάφορες δυνατότητες του προγράµµατος.
Βεβαιωθείτε πως η ύπαρξη δύο παραθύρων στο ίδιο πρόγραµµα και η

λειτουργία του καθενός από αυτά είναι κατανοητή από τους µαθητές: Οι
µαθητές θα πρέπει επίσης να αναγνωρίζουν την παλέτα αντικειµένων και τον
launcher. (Aπό το µενού Window Æ Launcher για να εµφανιστεί ο Launcher,

ενώ για να εµφανιστεί η παλέτα αντικειµένων (Object) από το µενού Window,

επιλέγουµε Objects.
Εµφάνιση της παλέτας αντικειµένων και του Launcher από το µενού

Window του παραθύρου Εγγράφου του Dreamweaver
Σηµειώσεις για Eίναι πολύ σηµαντικό να δουλεύουν οι µαθητές στο σωστό παράθυρο του
τον εκπαιδευτή Dreamweaver. Βεβαιωθείτε λοιπόν πως όταν προσπαθήσουν να εµφανίσουν
την παλέτα των αντικειµένων και τον Launcher βρίσκονται στο παράθυρο
Εγγράφου του Dreamweaver. Για να τσεκάρουν τα παιδιά αν βρίσκονται στο
σωστό παράθυρο θα πρέπει να ελέγξουν την γραµµή τίτλου του παραθύρου
τους, η οποία θα πρέπει να λέει Untitled Document (Untitled 1) (ή τον τίτλο
της σελίδας και το όνοµα του αρχείου τους) και Dreamweaver, όπως στην
παραπάνω εικόνα.
Για περαιτερώ βοήθεια στη παρουσίαση του προγράµµατος χρησιµοποιήστε
το Γλωσσάριο που συµπεριλαµβάνεται στη παρούσα ύλη.
∆ηµιουργία και Χάρη στο Dreamweaver η διαδικασία δηµιουργίας ιστοσελίδων γίνεται απλή.
άνοιγµα Μπορούµε να δηµιουργήσουµε µια νέα ιστοσελίδα µε δύο διαφορετικούς
ιστοσελίδων τρόπους: από το µενού File / New (παράθυρο Εγγράφου) ή από το µενού Site
/ New Site ή Open Site ανάλογα µε τον αν «ορίζουµε» για πρώτη φορά το
site ή αν αυτό είναι ήδη «ορισµένο».
Εύλογα εδώ δηµιουργείται η απορία του τι είναι ένα «ορισµένο» site. H
διαδικασία Define Sites ή Ορισµού ∆ικτυακών τόπων θα περιγραφεί αµέσως
µετά.

Μέσω της επιλογής Site µπορούµε να δούµε την ιεραρχία φακέλων και
αρχείων του δικτυακού τόπου. Κάντε κλικ στο κουµπί Site του Launcher.
Κουµπί Site του Launcher
Για να προβάλλετε την εργαλειοθήκη του Launcher επιλέξτε από το µενού

Window / Launcher όπως προηγουµένως.

To «δεύτερο» παράθυρο (Παράθυρο του δικτυακού τόπου)
Η διαδικασία δηµιουργίας µίας ιστοσελίδας είναι παρόµοια και µε τους δύο

τρόπους. Ωστόσο, η επιλογή site διευκολύνει περαιτέρω τη δηµιουργία
καινούργιων σελιδών και αρχείων και την αυτόµατη ενηµέρωση των
συνδέσµων των σελίδων
∆ηµιουργία του Θα προχωρήσουµε µε τη δηµιουργία του δικτυακού µας τόπου µέσω της
∆ικτυακού εντολής Site / New Site.
Τόπου

Επιλογή New Site από το µενού Site
Εµφανίζεται ένα πλαίσιο διαλόγου στο οποίο ο µαθητής πρέπει να

συµπληρώσει όλα τα βασικά στοιχεία της ιστοσελίδας.

To πλαίσιο διαλόγου του Site Definition
Το πλαίσιο διαλόγου Site Definition περιέχει πέντε κατηγορίες:
• Local info: Καλό θα είναι η συγκεκριµένη κατηγορία να συµπληρωθεί

ολόκληρη. Προς το παρόν, βάζουµε µόνο την ονοµασία της ιστοσελίδας και
επιλέγουµε ένα φάκελο όπου θα αποθηκεύσουµε τα αρχεία . Αυτός ο
φάκελος ονοµάζεται βασικός τοπικός Φάκελος (root) και αντιστοιχεί στο
βασικό Φάκελο HTML του αποµακρυσµένου διακοµιστή Web.
Site Name: Web Tour
Local Root Folder: c:/WebPages/WebTour
• Remote info: εδώ καθορίζεται ο τρόπος πρόσβασης στο διακοµιστή Web.

Προς το παρόν θα το αφήσουµε None. Σε γενικές γραµµές, η πρόσβαση
σ’ένα διακοµιστή γίνεται µέσω του πρωτόκολου FTP (File Transfer
Protocol). Μέσα σε αυτή την επιλογή βρίσκεται η επιλογή Προστασίας:
είναι προαιρετική και χρησιµοποιείται από µεγάλο αριθµό χρηστών. Με τη
συγκεκριµένη επιλογή σηµαδεύονται τα αρχεία στα οποία δουλεύουµε
«σηµαδεύονται». Με αυτό τον τρόπο επιτρέπουµε στους χρήστες που
δουλεύουν ταυτόχρονα στην ίδια ιστοσελίδα να γνωρίζουν πως δεν
µπορούν να κάνουν αλλαγές σε συγκεκριµένα «σηµαδεµένα» αρχεία
ώσπου να τελειώσει η εργασία των άλλων χρηστών.

• Design Notes: πρόκειται για ένα είδος ψηφιακού τετραδίου όπου µπορούµε
να σηµειώσουµε ότι επιθυµούµε σχετικά µ’ένα συγκεκριµένο αρχείο. Αυτές
οι σηµειώσεις αποθηκεύονται σ’ένα ξεχωριστό φάκελο
• Site Map Layout: εδώ καθορίζονται οι παράµετροι για µία οπτική
αναπαράσταση της δοµής της ιστοσελίδας. Το σηµείο αυτό θα µελετηθεί
πιο διεξοδικά µόλις αρχίσει η κατασκεύη της ιστοσελίδας µας.
• File View Columns: Προς το παρόν δεν θα εξετάσουµε ούτε αυτό το

σηµείο.
Σιγουρεύοµαστε πως το κουτάκι Refresh Local Site List στην κατηγορία Local
Info είναι τσεκαρισµένο. Έτσι κάθε φορά που αντιγράφονται, που
δηµιουργούνται ή που µετακινούνται αρχεία το Dreamweaver ενηµερώνει
αυτόµατα τους ανάλογους συνδέσµους.
Τέλος, στην διεύθυνση http γράφουµε την διεύθυνση της ιστοσελίδας µας:
www.webtour.com και ελέγχουµε πως η επιλογή cache είναι ενεργοποιηµένη
(αυτό βοηθάει στο να πραγµατοποιούνται οι υπολογισµοί σύνδεσης µε πιο
αποτελεσµατικό τρόπο).
Τελειώνοντας, κάνουµε ένα κλικ στο κουµπί Οκ στο πλαίσιο διαλόγου. Έχουµε
δηµιουργήσει το φάκελο του δικτυακού µας τόπου Web Tour.
Για να φτιάξουµε µια σελίδα του δικτυακού µας τόπου, κάνουµε δεξί κλικ στο
δεξί τµήµα της οθόνης του Dreamweaver επιλέγουµε New File και πατάµε
Enter.

∆ηµιουργία νέου αρχείου html µε δεξί κλικ από το παράθυρο του

Site
Βρισκόµαστε τώρα στο παράθυρο Site – Web Tour (δείτε τον τίτλο πάνω
αριστερά στο παράθυρο). Καθώς ο δικτυακός µας τόπος είναι ακόµα κενός
χωρίς περιεχόµενα, οι δύο πλευρές φαίνονται άδειες, εκτός από το βασικό
τοπικό φάκελο WebTour και την ιστοσελίδα untitled.htm που µόλις
δηµιουργήσαµε.
Εάν ο τοπικός φάκελος δεν έχει προηγουµένως καθοριστεί ή εάν η

Σηµειώσεις για αναγραφόµενη διεύθυνση δεν είναι η σωστή τότε το Dreamweaver θα
τον ενηµερώσει πως το τάδε αρχείο δεν υπάρχει παρουσιάζοντας ένα πλαίσιο
εκπαιδευτή: διαλόγου “Define Sites ”. Η λύση θα ήταν τότε να επιλέξουµε το όνοµα της
σελίδας µας και την επιλογή Edit, το οποίο θα µας πήγαινε στο προηγούµενο
πλαίσιο διαλόγου όπου µέσω του κουµπιού της έρευνας στo δεξί µέρος του
πλαισίου Local Root Folder θα µπορούσαµε να δηµιουργήσουµε τον ανάλογο
φάκελο σε επιθυµιτή τοποθεσία. Αυτό δεν θα είναι αναγκαίο αν
δηµιουργήσουµε τον φάκελό µας όπως ακριβώς εξηγήσαµε προηγουµένως.

∆ηµιουργία και Εξηγήστε στους µαθητές πως υπάρχει κι’άλλος τρόπος δηµιουργίας σελιδών,
τροποποίηση µέσω του µενού Site.
ιστοσελίδων
µέσω του Η επιλογή Site προσφέρει δύο τρόπους δηµιουργίας ιστοσελίδων. Ο πιο
παραθύρου άµεσος είναι από το µενού File επιλέγοντας New File.
Ιστοσελίδα
Ο άλλος τρόπος είναι µέσω του πλαίσιου διαλόγου “Define Site” που µπορεί
να ανοίξει µε την εντολή Site / Define Sites. Αυτό το πλαίσιο διαλόγου
περιέχει µία λίστα όλων των ήδη καθορισµένων δικτυακών τόπων καθώς και
τέσσερα κουµπιά New, Edit, Copy, και Delete.
To πλαίσιο διαλόγου του καθορισµού του ∆ικτυακού τόπου

(Define Sites)
• New: δηµιουργεί ένα νέο φάκελο δικτυακού τόπου. Κάνοντας ένα κλικ
πάνω του εµφανίζεται το πλαίσιο διαλόγου Define site που έχουµε ήδη δει
όταν δηµιουργήσαµε την ιστοσελίδα Web Tour
• Edit: µας επιτρέπει να αλλάξουµε τις ιδιότητες ενός δικτυακού τόπου που
ήδη υπάρχει.
• Copy : µας επιτρέπει να αντιγράψουµε ένα δικτυακό τόπο ο οποίος θα
είναι ακριβώς ίδιος µε τον πρωτότυπο, µε το ίδιο όνοµα, αλλά µε τη λέξη
copy στο τέλος
• Delete : ∆ιαγραφή του δικτυακού τόπου. Η διαγραφή είναι αννέκλητη.

Σηµειώσεις για Με τη διαγραφή µίας ιστοσελίδας από τη λίστα του Dreamweaver δεν
τον διαγράφονται και τα αρχεία του φακέλου της ιστοσελίδας. Το µόνο αρχείο
εκπαιδευτή: που θα διαγραφεί είναι το αρχείο htm
Άνοιγµα Για να ανοίξουµε τον κεντρικό φάκελο (root) ενός ήδη υπάρχον δικτυακού
ιστοσελίδας τόπου από την επιλογή Site κάνουµε κλικ πάνω στην ονοµασία του στο drop
down menu της παλέτας εργαλείων.
Eπιλογή ενός ήδη καθορισµένου δικτυακού τόπου από το

αναδυόµενο µενού
Σε αυτό το σηµείο βάλτε τους µαθητές να δοκιµάσουν την εντολή αυτή

επιλέγοντας κάποιες από τις ιστοσελίδες που δηµιουργεί το Dreamweaver
καθώς φορτώνει, επιστρέφοντας έπειτα στην ιστοσελίδα Web Tour.
∆ηµιουργία Σχολιάστε µε τους µαθητές πως ο πιο κοινός τρόπος δηµιουργίας µίας νέας
νέων σελιδών σελίδας είναι µέσω της εντολής File / New από το βασικό µενού στο
και φακέλων παράθυρο Document, έτσι όπως θα έκαναν και µε οποιοδήποτε άλλο
πρόγραµµα.
Σηµειώσεις για ∆ηµιουργώντας τον δικτυακό τόπο πρέπει αρχικά να φτιάξουµε µια συλλογή
τον από ανεξάρτητες ιστοσελίδες προκειµένου να δούµε αργότερα πως µπορούµε
εκπαιδευτή: να τις συνδέσουµε µεταξύ τους. Προχωρώντας στη κατασκεύη του δικτυακού

µας τόπου, θα χρησιµοποιούµε και τους δύο τρόπους δηµιουργίας

ιστοσελίδων.

Υπάρχουν δύο τρόποι δηµιουργίας νέων σελίδων από το παράθυρο Site.

Χρησιµοποιώντας την εντολή File / New File ή κάνοντας δεξί κλικ µε το
ποντίκι πάνω στη λίστα αρχείων και επιλέγοντας New File.
Με τους ίδιοους τρόπους µπορούµε να δηµιουργήσουµε και φακέλους. (File /
New Folder και δεξί κλικ New Folder)
Η δηµιουργία αρχείων από το παράθυρο Site παρέχει ένα µεγάλο

πλεονέκτηµα σε σχέση µε την άλλη επιλογή, δηλαδή την δυνατότητα
αποθήκευσης των αρχείων κατά την διάρκεια της δηµιουργίας.
Η διαδικασία αποθήκευσης νέου αρχείου από το µενού File είναι διαφορετική
∆ηµιουργώντας και αποθηκεύοντας ταυτόχρονα όλα τα αρχεία HTM στο
παράθυρο Site εξοικονοµούµε αρκετό χρόνο και κόπο προχωρώντας αµέσως
στο «γέµισµα» των κενών σελίδων.
Επίσης, µέσω της επιλογής New File από το µενού File του παραθύρου Site,
µπορούµε να δηµιουργήσουµε υποφάκελους µε τον ίδιο τρόπο που
δηµιουργούµε αρχεία.
Πάµε τώρα να δηµιουργήσουµε τη σελίδα ευρετηρίου του δικτυακού µας

τόπου. Όταν ένας διακοµιστής web λαµβάνει ένα αίτηµα προσπαθεί να βρει
ένα αρχείο µε όνοµα index.htm ή default.htm. Εάν αυτό το αρχείο δεν
υπάρχει, ο διακοµιστής, ή στέλνει µήνυµα λαθών, ή εάν έχει ρυθµιστεί
εµφανίζει µία λίστα συνδέσµων µε σελίδες του δικτυακού µας τόπου.
Στο παράθυρο Site έχουµε δηµιουργήσει ένα αρχείο µε το όνοµα Untittled

(προκαθορισµένο). Αλλάζουµε το όνοµα απ’ευθείας µε δεξί κλικ επιλέγοντας
Rename, µετονοµάζοντας το σε index.htm.
Εναλλακτικά αν δεν έχουµε ορίσει το site µας (και δεν βρισκόµαστε στο
παράθυρο Site) επιλέγοντας File / New δουλεύουµε πάνω στην σελίδα
Untitled. Για να την αποθηκεύσουµε επιλέγουµε File / Save As.
Θα εµφανιστεί το πλαίσιο διαλόγου “Save As” όπου ονοµάζουµε και πάλι την
ιστοσελίδα µας index αποδεχόµενοι την προκαθορισµένη τοποθεσία
αποθήκευσης. Οι αλλαγές εµφανίζονται τώρα στο όνοµα του παραθύρου και
στο παράθυρο Site εµφανίζεται η σελίδα index.

Η τελική µορφή του παραθύρου Site αφού έχουµε µετονοµάσει και

την σελίδα µας σε index.htm
Με σκοπό την απλούστερη και ευκολότερη ενηµέρωση της ιστοσελίδας µας

θα δηµιουργήσουµε τώρα διαφορετικούς φακέλους για τα διάφορα
περιεχόµενά της.
Πάµε στο παράθυρο Site, επιλέγουµε File/ New Folder. Θα εµφανιστεί ένας
νέος φάκελος έτοιµος να του αλλάξουµε το όνοµά. Θα ονοµάσουµε τον
φάκελο Holidays.

O νέος φάκελος έτοιµος για µετονοµασία
Μπορούµε επίσης να κάνουµε δεξί κλικ µε το ποντίκι πάνω στη λίστα µε τα

αρχεία επιλέγοντας New Folder. Κατ’αυτό το τρόπο µπορούµε να
δηµιουργήσουµε ένα νέο φάκελο µε το όνοµα Offers.
Βάλτε τους µαθητές να δηµιουργήσουν τους υπόλοιπους φακέλους,

χρησιµοποιώντας και τις δύο µεθόδους: plane, Train, Weekend, Hotels, Cars,
Exclusive_Products, Company, Register, suggestions, και Contest. Στο τέλος,
το παράθυρο Site θα εµφανίζεται όπως το παρακάτω παράδειγµα.
Τέλος, θα δηµιουργήσουµε το υποφάκελο Images του βασικού καταλόγου

(root) όπου θα βάλουµε τις εικόνες που θα χρησιµοποιηθούν στην ιστοσελίδα.

Η τελική µορφή του Site αφού έχουµε δηµιουργήσει και τους

υποφακέλους
Περίληψη Έχουµε µάθει πως να δηµιουργούµε µία ιστοσελίδα και από τα δύο παράθυρα
και πως να ανοίγουµε ένα νέο δικτυακό τόπο και να τον οργανώνουµε σε
φακέλους και υποφακέλους.

Μάθηµα 5
Παραγωγή εικόνας στο Fireworks
Περιγραφή: Οι µαθητές θα µάθουν πως να δηµιουργήσουν µία σύνθετη εικόνα σ’ένα

επαγγελµατικό πρόγραµµα επεξεργασίας εικόνας. Η εικόνα θα χρησιµοποιηθεί
αργότερα στη δηµιουργία της ιστοσελίδας
Στόχοι: Να αναδείξουµε την ποικιλία των εργαλείων που µπορούν να

χρησιµοποιηθούν στη διαδικασία δηµιουργίας µίας ιστοσελίδας
Να παρουσιάσουµε στους µαθητές κάποιες βασικές λειτουργίες ενός
προγράµµατος επεξεργασίας εικόνας
Να ενηµερώσουµε τους µαθητές για τις δυνατότητες αυτού του είδους
προγράµµατος
Σηµειώσεις για Εάν δεν ενδιαφέρεστε να αναπτύξετε το µάθηµα αυτό, ή για λόγους χρόνου
τον εκπαιδευτή: κρίνετε πως είναι καλύτερο να µην το παρουσιασέτε, τα ανάλογα αρχεία
παρέχονται επίσης σαν πρότυπα στην ύλη του µαθήµατος.
Προετοιµασία Θα ετοιµάσουµε τώρα το λογότυπο που θα εισάγουµε σε όλες τις ιστοσελίδες

ενός λογότυπου του δικτυακού µας τόπου, χρησιµοποιώντας το πρόγραµµα Macromedia
σε Macromedia Fireworks.
Fireworks Αφού ανοίξουµε το πρόγραµµα Fireworks δηµιουργούµε ένα νέο αρχείο
εικόνας µε µέγεθος 150 x 150 πίξελς. Φροντίζουµε το αρχείο να είναι
διάφανο, έχοντας τσεκάρει την επιλογή “Transparent”

Αυτό το γραφικό λειτουργεί σαν βάση πάνω στην οποία µπορούµε να

«µοντάρουµε» την εικόνα µας.
Εισαγωγή Χρησιµοποιώντας το Μενού Εισαγωγή εικόνας εισάγουµε την εικόνα geo.gif

εικόνας που είναι αποθηκευµένη στο σκληρό δίσκο (δείχνουµε την τοποθεσία).
Με τις γωνίες µπορούµε να τροποποιήσουµε το µέγεθος της εικόνας πάνω

στην επιφάνεια. Κάνοντας ένα µόνο κλικ σε οποιοδήποτε σηµείο η εικόνα θα
ανοίξει στο φυσικό της µέγεθος. Χρησιµοποιώντας το ποντίκι µπορούµε να
την µετακινήσουµε στο κέντρο της επιφάνειας.
Κείµενο Θα δηµιουργήσουµε τώρα το κείµενο επιλέγοντας το εργαλείο κειµένου από

την οριζόντια εργαλειοθήκη και κάνοντας κλικ πάνω στην επιφάνεια στο
σηµείο που θέλουµε να γράψουµε (µπορούµε αργότερα να µετακινήσουµε το
κείµενο).
Έπειτα, στο παράθυρο που ανοίγει γράφουµε την λέξη Web, όπως στο
παράδειγµα, χρησιµοποιώντας τη παρακάτω γραµµατοσειρά και το γαλάζιο
χρώµα (θυµηθείτε πως εφ΄όσον πρόκειται για σχέδιο ο µαθητής έχει το
δικαίωµα επιλογής χρωµάτων, γραµµατοσειράς και σχεδίου).

Με την επιλογή κλίσης, µπορούµε να αλλάξουµε το κείµενό µας σε κάθετη

µορφή.
Eφφέ Στο πλαίσιο µε τις ιδιότητες επιλέγουµε τη καρτέλα εφφέ και εφαρµόζουµε το
εφφέ όπως στο παρακάτω παράδειγµα (Bisel 3 ).

Επαναλαµβάνουµε όλη τη διαδικασία και προσθέτουµε τη λέξη Tour.
Χρησιµοποιούµε τώρα το εργαλείο επιλογής, και µακραίνουµε την επιφάνεια

των γραµµάτων έτσι ώστε η τελική εικόνα να έχει τη παρακάτω όψη.
Κόβωντας την Τέλος, θα κόψουµε το περιττό τµήµα της εικόνας µέσω του µενού Μετατροπή
επιφάνεια / Κόψιµο επιφάνειας. Το λογότυπό µας είναι έτοιµο. Το µόνο που µένει είναι
να το αποθηκεύσουµε ονοµάζοντας το logowt µε επέκταση png που

χαρακτηρίζει τις images του Fireworks.
Περίληψη Είδαµε πως να δηµιουργούµε µία εικόνα και να χρησιµοποιούµε βασικά εφφέ
µέσω ενός προγράµµατος επεξεργασίας εικόνας.

Μάθηµα 6
∆ηµιουργώντας µία σελίδα - Layers
Περιγραφή: Οι µαθητές θα ξεκινήσουν τώρα το πραγµατικό σχεδιασµό των σελιδών του

δικτυακού τόπου. Θα µάθουν για τη χρήση των layers που θα τους
βοηθήσει να πετύχουν µία καλύτερη κατανοµή των διαφόρων αντικειµένων
στην οθόνη.
Στόχοι: Τροποποίηση των προκαθορισµένων ιδιοτήτων µίας σελίδας

Εισαγωγή φόντων και εικόνων
Χρήση των στρώσεων
Παρουσίαση του Πίνακα Ενεργειών
Βασική Σελίδα Έχουµε δηµιουργήσει προηγουµένως µια κενή σελίδα index.htm η οποία θα
είναι η βασική µας σελίδα. Την ανοίγουµε κάνοντας διπλό κλικ πάνω της από
το παράθυρο του Site
Σύµφωνα µε το προσχέδιο που φτιάξαµε, αυτή η σελίδα πρέπει να περιέχει τα

εξής:
• Το λογότυπο και το όνοµα του πρακτορείου

• Κουµπιά µε συνδέσεις (links) σε προϊόντα και υπηρεσίες
• Κουµπιά µε πληροφορίες για την εταιρία και συνδέσεις σε διάφορες
αιτήσεις
• Γραφικά και images
Ξεκινάµε από Χάρη στο Dreamweaver έχουµε µπορούµε να χρησιµοποιήσουµε µία παλέτα
το φόντο της προκαθορισµένων χρωµάτων που ονοµάζεται “Παλέτα χρωµάτων ασφαλή για
σελίδας. το Web” στην οποία έχουµε πρόσβαση µέσω του πλαίσιου διαλόγου Page
Properties (από το µενού Modify επιλέγουµε Page Properties .

Eµφάνιση των ιδιοτήτων της σελίδας (page properties) από το µενού

Modify
Θα διαµορφώσουµε τώρα την αρχική σελίδα (index.htm) του δικτυακού µας

τόπου Web Tour επιλέγοντας Modify / Page Properties και µπαίνοντας στο
µενού που δείχνει παραπάνω εικόνα. Εκεί µπορούµε να διαλέξουµε το χρώµα
του φόντου ή να προσθέσουµε µία εικόνα φόντου καθώς και να ρυθµίσουµε
σύµφωνα µε τις προτιµήσεις µας το χρώµα του κειµένου και των συνδέσεων .
To πεδίο Title καθορίζει τον τίτλο της σελίδας µας (ο οποίος θα φαίνεται στην
πάνω µπάρα του browser). Ονοµάστε την σελίδα Web Tours

Η τελική µορφή του πλαίσιου διαλόγου αφού έχουµε ονοµάσει την

σελίδα και έχουµε βάλει την εικόνα φόντου
Ένα πολύ βασικό πεδίο του συγκεκριµένου πλαίσιου διαλόγου είναι το πεδίο
Document Encoding. Αν η σελίδα µας είναι στα ελληνικά απαραίτητο βήµα
είναι να επιλέξουµε από το µενού Document Encoding Greek (ISO-8859-7)
Προσέξτε πως αν δεν αλλάξετε τη συγκεκριµένη επιλογή δεν θα µπορείτε να
διαβάσετε ελληνικά στον πλοηγητή σας.
Στα προηγούµενα µαθήµατα καθορίσαµε µία οµάδα χρωµάτων µε τα οποία θα

δουλέψουµε στο δικτυακό µας τόπο.
Η κεντρική σελίδα έχει µία εικόνα φόντου (clouds.jpg). Την βρίσκουµε µέσω
της επιλογής “Browse ” στο πλαίσιο διαλόγου.
Σηµειώσεις για Αν η εικόνα δεν βρίσκεται αποθηκευµένη στο βασικό κατάλογο του δικτυακού
τον τόπου θα εµφανιστεί ένα προειδοποιητικό µύνηµα ρωτώντας αν επιθυµούµε
εκπαιδευτή: να αποθηκεύσουµε την σελίδα. Απαντώντας «Ναι» ένα αντίγραφο της εικόνας
θα αποθηκευτεί στο φάκελο του δικτυακού τόπου. Έτσι όταν δηµοσιεύσουµε
την ιστοσελίδα µας στο Internet όλα τα αρχεία θα είναι διαθέσιµα. Σε αυτή τη
περίπτωση αποθηκεύουµε την εικόνα µε το όνοµα της µέσα στο φάκελο
Images. Θα ήταν χρήσιµο πριν συνεχίσουµε µε την κατασκευή του δικτυακού
µας τόπου να µεταφέρουµε τις εικόνες από το φάκελο media στον φάκελο
images που δηµιουργήσαµε. Έτσι το dreamweaver δεν θα µας ρωτάει κάθε

φορά αν θα πρέπει να αντιγράψει τις εικόνες στον καθορισµένο φάκελο.
Για να σβήσουµε µία εικόνα φόντου αρκεί να σβήσουµε το όνοµα της από το
πεδίο Background Image στο πλαίσιο διαλόγου. Αυτό δε σηµαίνει οτι θα
σβηστεί το αρχείο της εικόνας. Για να σβήσουµε το αρχείο εικόνας που δεν
χρησιµοποιείται διαγράφεται από το παράθυρο Site.
Βάζοντας µία εικόνα φόντου, δεν θα χρησιµοποιήσουµε χρώµα φόντου.

Θα χρησιµοποιήσουµε για την ιστοσελίδα µας σαν προκαθορισµένο χρώµα
κειµένου το µαύρο, καθώς η εικόνα φόντου είναι αρκετά ανοιχτόχρωµη και η
αντίθεση θα είναι καλή.
Συνδέσεις Το προκαθορισµένο χρώµα µίας σύνδεσης, δηλαδή το χρώµα που βλέπει ένας
(Links): χρήστης πριν κάνει κλικ στη σύνδεση, είναι το µπλε. Για τις συνδέσεις που
έχει ήδη επισκεφθεί είναι το µωβ και για τους ενεργοποιηµένους (το χρώµα
που αλλάζει µία σύνδεση όταν ο χρήστης κρατάει το κουµπί πατηµένο πάνω
της) είναι το κόκκινο. Αν αφήσουµε αυτά τα πεδία κενά, οι τρεις καταστάσεις
των συνδέσµων της σελίδας µας θα έχουν τα προκαθορισµένα από τον
πλοηγητή χρώµατα.
Σηµειώσεις για Καθώς πρόκειται για σχεδιασµό, οι µαθητές θα πρέπει να χρησιµοποιήσουν

τον τον συνδυασµό χρωµάτων που οι ίδιοι επιθυµούν. Η διδασκόµενη ύλη θα
εκπαιδευτή: περιέχει διάφορες προκαθορισµένες εικόνες τις οποίες όµως µπορούν να
αντικαταστήσουν οι µαθητές µε αυτές που επιθυµούν.
Εισαγωγή του Προηγουµένως δηµιουργήσαµε µε το Fireworks την εικόνα logowt.png που θα

λογότυπου χρησιµοποιούσαµε σαν το λογότυπο της εταιρίας µας. Για να την εισάγουµε
λοιπόν τοποθετούµε το βελάκι στη πρώτη γραµµή του εγγράφου Index.htm.
Επιλέγουµε Insert / Image µε το οποίο ανοίγει το πλαίσιο διαλόγου Select
Image Source. Επιπλέον, αν έχουµε επιλέξει το πεδίο “Προεπισκόπηση”
µπορούµε να δούµε την εικόνα που έχουµε επιλέξει σε µικρότερο µέγεθος.
Εντοπίζουµε το αρχείο logowt.png και ελέγχουµε πως στο πεδίο “Relative to”
γράφει Document.
Εισαγωγή της εικόνας του λογοτύπου στην σελίδα index

Όταν θα έχουµε εισάγει την εικόνα και αφού την έχουµε επιλέξει γράφουµε
logo στο πεδίο Name (στα αριστερά κάτω από την λέξη “Image”). Πρόκειται
για ένα εσωτερικό όνοµα που χρησιµοποιήται συνήθως για τις επιλογές σε
DHTML. Αν και το να ονοµάζουµε τις εικόνες δεν είναι απαραίτητο είναι µία
χρήσιµη συνήθεια.
Ο επιθεωρητής Όταν εισάγουµε ένα γραφικό, το ύψος και το πλάτος του καταχωρούνται
ιδιοτήτων αυτόµατα στον επιθεωρητή Ιδιοτήτων (Properties Inspector). Αυτά τα µεγέθη
µπορούν να αλλάξουν αλλά κάτι τέτοιο πρέπει να αποφεύγεται, µια που
µικραίνοντας µια εικόνα µε αυτόν τον τρόπο αφενός η ποιότητα της εικόνας
γίνεται χειρότερη, αφετέρου ο χρόνος φόρτωσης παραµένει ο ιδίος, αφού η
εικόνα µικραίνει χωρίς όµως να «ελαφραίνει» τη σελίδα.
Η επιλογή ALT αφορά στο κείµενο που εµφανίζεται στους πλοηγητές

(browsers) που δεν υποστηρίζουν γραφικά. Αυτή η πληροφορία είναι
σηµαντική για τα γραφικά που θεωρούνται κρίσιµα για την πλοήγηση του
χρήστη στον δικτυακό τόπο (site). Οι χρήστες των οποίων οι πλοηγητές δεν
υποστηρίζουν γραφικά διαβάζουν τις «ετικέτες» ALT µαζί µε το κείµενο της
ιστοσελίδας. Το κείµενο ALT εµφανίζεται προσωρινά όταν ο χρήστης περνάει
το βελάκι του πάνω από το γραφικό. Στη δική µας περίπτωση θα
χρησιµοποιήσουµε πάλι το όνοµα της εικόνας: logo.

Συνεχίζοντας σύµφωνα µε το σχεδιάγραµµά µας, θα τοποθετήσουµε τώρα τις

διάφορες κλιµακωτές εικόνες που διακοσµούν την σελίδα. ∆εν µπορούµε
όµως να χρησιµοποιήσουµε την ίδια τεχνική κατά την οποία τοποθετήσαµε το
λογότυπο Web Tour εφ’όσον δεν µας επιτρέπει να τοποθετήσουµε τις εικόνες
όπως επιθυµούµε µέσα στη σελίδα. Γι’αυτό το λόγο θα χρησιµοποιήσουµε τις
στρώσεις (layers).
Layers Οι στρώσεις (layers) είναι ένα επιπλέον στοιχείο που µπορεί να προστεθεί στις
ιστοσελίδες για να συµπληρωθεί το σχέδιο µας. Με τις στρώσεις, µπορούµε να
τοποθετήσουµε στοιχεία το ένα πάνω στο άλλο, αποκτώντας µεγάλη
σχεδιαστική ελευθερία.
Υπάρχουν τρεις τρόποι µε τους οποίους µπορούµε να εισάγουµε στρώσεις: οι

δύο είναι µέσω της παλέτας Objects και η άλλη µέσω του µενού. Μόλις
προσθέσουµε τις στρώσεις καταχωρούνται στη παλέτα Layers.
• Χρήση του Μενού: Έχει τις πιο περιορισµένες δυνατότητες. Αφήνει

µόνο µία καινούργια στρώση εκεί που είναι το βελάκι στην
ιστοσελίδα. Για να εισάγετε µία στρώση στη σελίδα τοποθετήστε το
βελάκι εκεί που επιθυµείτε και δώστε την εντολή Insert / Layer
από το µενού. Μετά τη δηµιουργία της στρώσης το βελάκι
τοποθετείται αµέσως µέσα στη καινούργια στρώση. Κατ’αυτό το
τρόπο αν θελήσουµε να προσθέσουµε µία καινούργια στρώση θα
προσθεθεί µέσα στην ήδη υπάρχουσα.
• Χρήση της παλέτας αντικείµενων: Με τη παλέτα αντικειµένων
έχουµε τη δυνατότητα να σύρουµε τη στρώση σε οποιοδήποτε
κενό που περιέχει στοιχεία HTML ή σε οποιοδήποτε άλλο σηµείο
της σελίδας. Το κουµπί Draw Layer βρίσκεται στην επιλογή
Common στην παλέτα Objects. Για να σύρουµε µία στρώση µε τη
παλέτα Objects κάνουµε κλικ πάνω στο Draw Layer και κρατώντας
πατηµένο το ποντίκι σύρουµε το Layer στη θέση και στο µέγεθος
που επιθυµούµε. Το κουµπί Draw Layer παραµένει ενεργοποιηµένο
ώσπου να αφήσουµε το κουµπί του ποντικιού. Αν κάνουµε κλικ σε
αυτό το κουµπί αλλά έπειτα αλλάξουµε γνώµη το απενεργοποιούµε
πατώντας το πλήκτρο Esc.

Σχεδιασµός layer από το κουµπί Draw Layer της παλέτας

αντικειµένων
Οι στρώσεις που έχουν εισαχθεί και έχουν συρθεί θα έχουν τις

προκαθορισµένες διαστάσεις. Το ίδιο συµβαίνει µε τις σχεδιασµένες στρώσεις
εκτός του ότι για αυτές µπορούµε να καθορίσουµε το ύψος και το πλάτος
τους όταν τις σχεδιάζουµε.
Θα εισάγουµε τώρα τις στρώσεις που µας δίνουν τη δυνατότητα να

συνεχίσουµε το σχέδιο µας. Οι µαθητές θα πρέπει λοιπόν να ακολουθήσουν
τα παρακάτω βήµατα:
1. Κάνουµε κλικ πάνω στο κουµπί Draw Layer και αφήνουµε το

κουµπί του ποντικιού
2. Τοποθετούµε το βελάκι του ποντικιού στο σηµείο που θέλουµε να
είναι µία από τις γωνίες της καινούργιας στρώσης
3. Πατάµε το κουµπί του ποντικιού και χωρίς να το αφήσουµε
σύρουµε το βελάκι στο σηµείο όπου θέλουµε να είναι η απέναντι
γωνία.
4. Αφήνουµε το κουµπί του ποντικιού.

Οι στρώσεις µπορεί να περιέχουν οποιοδήποτε στοιχείο που µπορεί να

τοποθετηθεί στο ορατό µέρος της ιστοσελίδας. Όταν µία στρώση
δηµιουργήται για πρώτη φορά, το βελάκι τοποθετείται αυτόµατα µέσα της,
όπου µπορείτε να γράψετε ένα κείµενο, να εισάγετε images, να προσθέσετε
πίνακες, κτλ προκειµένου να δηµιουργηθεί το περιεχόµενο της στρώσης. Για
να τοποθετήσουµε το βελάκι µέσα σε µία ήδη υπάρχουσα στρώση, κάνουµε
απλώς κλικ µέσα της. Όταν θα έχουµε προσθέσει τα στοιχεία, µπορούµε να
τα επιλέξουµε για να τροποποιήσουµε τις ιδιότητές τους µε τον ίδιο τρόπο
κατά τον οποίο γίνεται για τα στοιχεία µίας συνηθισµένης ιστοσελίδας.
Θα προσθέσουµε πέντε στρώσεις µε τις παρακάτω εικόνες:
• alaska.jpg
• MacchuPicchu.jpg
• SaintMichelFr.jpg
• Phoenix.jpg
• Russia.jpg
σύµφωνα µε την παρακάτω εικόνα.
Η σελίδα αφού έχουµε προσθέσει τις στρώσεις µε τις εικόνες

Το µέγεθος και η αρχική τοποθεσία των στρώσεων δεν µας αφορούν καθώς
έχουµε τη δυνατότητα να τις σύρουµε και να αυξοµειώσουµε το µέγεθός τους
έως να επιτύχουµε το επιθυµητό αποτέλεσµα. Επίσης, εάν µία στρώση
τυχαίνει να είναι µικρή σε σχέση µε την επιλεγµένη εικόνα, το µέγεθός της θα
προσαρµοστεί αυτόµατα στο µέγεθος της εικόνας. Αντιθέτως, εάν η στρώση
είναι µεγαλύτερη από την εικόνα που περιλαµβάνει, πρέπει κάνοντας κλικ
πάνω στη στρώση να προσαρµόσουµε το µέγεθός της (εµφανίζονται τα
“χερούλια“ που µας δίνουν τη δυνατότητα να προσαρµόσουµε το µέγεθός της
χειρωνακτικά). Οι εικόνες εισάγονται µε τον ίδιο τρόπο που βάλαµε το
λογότυπο webtour. Τα πεδία Name και ALT συµπληρώνονται
χρησιµοποιώντας τα ονόµατα των εικόνων: Alaska, Macchupicchu,
Saintmichelfr, Phoenix, Russia.
Μπορούν εδώ οι µαθητές να εισάγουν την κινούµενη εικόνα holidays.gif για

να κάνουν πιο εντυπωσιοακή την σελίδα τους.
Υπενθυµίστε πως οι εικόνες, αν δε βρίσκονται ήδη µέσα σ’ένα φάκελο θα

χρειαστεί να αποθηκευτούν σ’ένα κοινό φάκελο, κάτι για το οποίο το
Dreamweaver θα φροντίσει να µας ρωτάει σε κάθε περίπτωση. Ο φάκελος
που θα χρησιµοποιήσουµε για να αποθηκεύσουµε τις εικόνες θα είναι ο
φάκελος Images που έχουµε δηµιουργήσει γι’αυτό το σκοπό.
Ο Ενεργός Ο ενεργός πίνακας είναι µία ιδιότητα ενσωµατωµένη στην τέταρτη έκδοση
Πίνακας του προγράµµατος Dreamweaver. Εκεί µπορούµε να συγκεντρώσουµε όλα τα
αρχεία media της ιστοσελίδας µας: images, βίντεο, ήχους, χρώµατα,
αντικείµενα Flash, Quick Time, Πρότυπα και άλλα διευκολύνοντας κατ’αυτό το
τρόπο τη διαχείρηση αυτών των στοιχείων για πολλές σελίδες.
Επιλέγουµε Window / Assets για να έχουµε πρόσβαση στο πίνακα. Το

Dreamweaver θα αποθηκεύει εκεί αυτόµατα ότι ενσωµατώνουµε στην
ιστοσελίδα.

Ο πίνακας Assets
Αν χρησιµοποιούµε κάποια απ’αυτά τα αρχεία τακτικά, µπορούµε να τα

προσθέσουµε στη κατηγορία των αγαπηµένων, έτσι ώστε να µπορούµε να τα
βρίσκουµε µε µεγαλύτερη ευκολία. Για να προσθέσουµε λοιπόν ένα
αντικείµενο στα αγαπηµένα µας, το επιλέγουµε και κάνουµε κλικ στο κουµπί
που βρίσκεται στο επάνω δεξί µέρος εσωτερικά του ενεργού πίνακα και
επιλέγοντας Add To Favorites.
Περίληψη Τροποποιήσαµε τις προκαθορισµένες παράµετρους µίας σελίδας. Μάθαµε πως

να εισάγουµε στρώσεις στο σχέδιο προκειµένου να οργανώσουµε καλύτερα
τα αντικείµενα στη σελίδα. Επίσης, µελετήσαµε την εισαγωγή εικόνων σε
συγκεκριµένα σηµεία µέσα στη σελίδα καθώς και τη χρήση του Ενεργού
Πίνακα του προγράµµατος Dreamweaver.

Μάθηµα 7
“Θερµά” Κουµπιά -Πίνακες
Περιγραφή: Οι µαθητές θα µάθουν να παράγουν στοιχεία Flash µέσα από το

Dreamweaver καθώς και να χρησιµοποιούν έναν διαφορετικό τρόπο
οργάνωσης των περιεχοµένων µίας σελίδας µε τους πίνακες.
Στόχοι: Να µάθουµε τη χρήση των πινάκων για την οργάνωση των αντικειµένων
σε µια ιστοσελίδα
Να σχεδιάσουµε κουµπιά Flash σ’ένα περιβάλλον Dreamweaver
“Θερµά”
Κουµπιά Αν και µπορούµε να σχεδιάσουµε τα κουµπιά µας στο Flash ή στο Fireworks ή
σε κάποιο άλλο πρόγραµµα γραφικών, το Dreamweaver έχει µια µικρή
βιβλιοθήκη κουµπιών Flash την οποία θα χρησιµοποιήσουµε για να φτιάξουµε
τα κουµπιά µας.
Μπορούµε να τοποθετήσουµε τα κουµπιά µας κατ’ευθείαν πάνω στο φόντο,

βάζοντας το βελάκι σε διάφορα σηµεία µε το πλήκτρο Enter. Ωστόσο, εάν
θέλουµε να πετύχουµε διαβάθµιση των κουµπιών σύµφωνα µε το αρχικό µας
σχεδιάγραµµα, θα ήταν καλύτερο να χρησιµοποιήσουµε ένα πίνακα όπου
µπορούµε να τοποθετήσουµε τα κουµπιά.
Σε µια καινούργια σελίδα φτιάχνουµε ένα πίνακα µε µια στήλη και οκτώ
γραµµές χρησιµοποιώντας τη παλέτα µε τα αντικείµενα, και τοποθετώντας το
σηµείο εισαγωγής κάτω από την εικόνα µε το λογότυπο web tour.

Eισαγωγή πίνακα από την παλέτα αντικειµένων

Στο πλαίσιο διαλόγου αποδεχόµαστε τις προκαθορισµένες αξίες, εκτός από το

µέγεθος (δίνουµε 160 pixels) και το περίγραµµα που του δίνουµε την τιµή
µηδέν. Έτσι, ο πίνακας δεν θα φαίνεται στο πλοηγητή (browser).
Φροντίζουµε το ποντίκι να βρίσκεται στο πρώτο κελί του πίνακα. Έπειτα,
πάµε στο µενού Insert / Interactive images / Flash Button όπου ανοίγει το
menu της παρακάτω εικόνας
Eισαγωγή κουµπιού flash από το µενού
Θα πραγµατοποιήσουµε τις εξής αλλαγές (θυµηθείτε πως πρόκειται για ένα

σχέδιο, οπότε εάν ο µαθητής επιθυµεί να χρησιµοποιήσει άλλα εφφέ πέρα από
αυτά που αναφέρονται εδώ, δεν υπάρχει πρόβληµα, µόνο που θα πρέπει τα
εφφέ αυτά να δέχονται την εισαγωγή κειµένου στο εσωτερικό τους):
Στυλ : Soft Orange

Κείµενο: Holidays
Γραµµατοσειρά: Verdana
Μέγεθος: 10
Αποθήκευση ως: holidays_bt.swf
Προς το παρόν αφήνουµε κενό το πεδίο που αφορά τη σύνδεση.

Το πλαισιο διαλόγου δηµιουργίας κουµπιού Flash
Επαναλαµβάνουµε όλη τη διαδικασία έως ότου προσθέσουµε και τα οκτώ

κουµπιά του σχεδίου µας, τοποθετώντας το ποντίκι σε διαφορετικό κελί κάθε
φορά, διατηρώντας το στυλ και τη σύνθεση της ονοµασίας για την
αποθήκευση των κουµπιών:
Κείµενο Αποθήκευση ως
Offers Offers_bt.swf
Airplane Airplane_bt.swf
Train Train_bt.swf
Weekend WeekEnd_bt.swf
Hotels Hotels_bt.swf

Cars Cars_bt swf
Exclusive Exclusive_bt.swf
Προκειµένου να επισπευθεί η εργασία, µπορούµε να αντιγράψουµε και να

κολλήσουµε τα κουµπιά και να επεξεργαστούµε αργότερα το περιεχόµενο και
το όνοµά τους. Κάνουµε λοιπόν δεξί κλικ µε το ποντίκι πάνω σ’ένα από τα
κουµπιά και επιλέγουµε Copy. Έπειτα, τοποθετούµαστε στο σηµείο που
θέλουµε να βάλουµε το δεύτερο κουµπί και επιλέγουµε Paste. Κάνοντας διπλό
κλικ πάνω σ’αυτό το κουµπί έχουµε πρόσβαση στο πλαίσιο διαλόγου όπου
µπορούµε να επεξεργαστούµε το περιεχόµενο του και να του αλλάξουµε
όνοµα.
Η σελίδα µε όλα τα κουµπιά flash

Σηµείωση για Η ταξινόµηση µε την οποία εµφανίζονται οι πίνακες στο παράθυρο του
τους πίνακες: Εγγράφου (untitled document) δεν συµπίπτει πάντα µε τη τελική τους
τοποθέτηση σ’έναν πλοηγητή. Γι’αυτό, µόλις τελειώσουν το πίνακα, οι
µαθητές πρέπει να διαλέξουν από τη παλέτα µε τα αντικείµενα την εντολή της
προεπισκόπησης για να ελέγξουν την εµφάνιση της σελίδας τους
Μόλις το κάνουµε αυτό, πάµε στο παράθυρο Site. Βλέπουµε πως εµφανίζονται
όλα τα κουµπιά που έχουµε δηµιουργήσει σαν αρχεία flash, στο βασικό
κατάλογο της ιστοσελίδας µας, µε τα ονόµατα µε τα οποία τα έχουµε
αποθηκεύσει.
To παράθυρο του site µε τα κουµπιά flash που µόλις δηµιουργήσαµε
Επιστρέφουµε στο παράθυρο εγγράφου.
Θα δηµιουργήσουµε τώρα την Άνω Γραµµή Πλοήγησης (βλέπε σχεδιάγραµµα)

που µας δίνει τη δυνατότητα να συνδεθούµε µε τα στοιχεία της ίδιας της
εταιρίας (Company, Register, Suggestions, και Contest). Έτσι δηµιουργούµε,
µε το τρόπο που ήδη γνωρίζουµε, µία καινούργια στρώση µέσα στην οποία
φτιάχνουµε ένα πίνακα µε πέντε στήλες σε δύο σειρές.Αλλάζουµε το µέγεθος
του πίνακα σε 100%. Οι µαθητές θα πρέπει µετά να δηµιουργήσουν τα
κουµπιά ακολουθώντας τον ίδιο µηχανισµό όπως πριν.
Στο τέλος η οθόνη θα πρέπει να δείχνει όπως στην παρακάτω εικόνα.

Προσέξτε ότι ο τύπος που χρησιµοποιήθηκε για τη δηµιουργία των κουµπιών
είναι το Soft Light-Blue, ενώ τα κουµπιά έχουν τοποθετηθεί εναλλάξ για
καλύτερο οπτικό αποτέλεσµα.

Η τελική µορφή της σελίδας µας αφού έχουµε βάλει όλα τα κουµπιά
Στο παράθυρο Site µπορούµε να δούµε τώρα όλα τα αρχεία που αντιστοιχούν
στα κουµπιά που έχουµε δηµιουργήσει. Για να οργανώσουµε καλύτερα τη
διαχείριση των αρχείων θα δηµιουργήσουµε ένα νέο φάκελο τον οποίο θα
ονοµάσουµε “Buttons” και δύο υποφακέλους Horizontal (για τακουµπιά της
οριζόντιας γραµµής πλοήγησης) και Vertical (για τα κουµπιά της κάθετης
γραµµής πλοήγησης) όπου θα µετακινήσουµε τα αντίστοιχα αρχεία, κάνοντας
κλικ πάνω τους και σέρνοντας στον αντίστοιχο φάκελο.
Προσοχή στη δηµιουργία των φακέλων και των υποφακέλων! Για να
δηµιουργηθεί ο υποφάκελος Horizontal και Vertical κάνουµε δεξί κλικ πάνω
στον φάκελο Buttons.
Το Dreamweaver θα ενηµερώσει αυτόµατα τα αρχεία που σχετίζονται µε αυτά

που µεταφέραµε, δηµιουργώντας τα σωστά «µονοπάτια» (paths)

Πλαίσιο διαλόγου για ενηµέρωση των κουµπιών
Όταν ερωτηθήτε από το πλαίσιο διαλόγου αν θέλετε το DreamWeaver να

ενηµερώσει τον ∆ικτυακό σας τόπο µε τις αλλαγές που κάνατε, πατήστε
“Update”
Μετακινήστε τα κουµπιά Flash όπως η ακόλουθη εικόνα

Τοποθέτηση των κουµπιών Flash σε φακέλους και υποφακέλους
Περίληψη Στα δεδοµένα που ήδη γνωρίζαµε προσθέσαµε τη χρήση του πίνακα σαν
ακόµα ένα τρόπο οργάνωσης της κατανοµής των αντικειµένων στη σελίδα.
Επίσης, µάθαµε να δηµιουργούµε κουµπιά Flash σε περιβάλλον Dreamweaver
καθώς και να χρησιµοποιούµε ένθετους πίνακες µέσα σε στρώσεις.

Μάθηµα 8
Πλαίσια - Frames
Περιγραφή: Οι µαθητές θα µάθουν πως να χωρίζουν µία ιστοσελίδα χρησιµοποιώντας

πλαίσια έτσι ώστε ο χρόνος φόρτωσης να είναι ο µικρότερος δυνατός.
Στόχοι: Η χρήση των πλαισίων στο σχεδιασµό ιστοσελίδων.
Σελίδα Θα δηµιουργήσουµε τώρα τη σελίδα Offers (Προσφορές) βοηθούµενοι από το

Προσφορών σχεδιάγραµµα µας.
Καθώς όλες οι σελίδες του website µας θα έχουν µία παρόµοια δοµή όσον
αφορά τη κατανοµή των κουµπιών, των γραµµών πλοήγησης και των
περιεχοµένων, θα µάθουµε πως να χρησιµοποιούµε τα πλαίσια µε σκοπό να
διευκολύνουµε τη δουλειά µας και να «ελαφρύνουµε» την ιστοσελίδα.
Πλαίσια Τα πλαίσια µας δίνουν τη δυνατότητα να έχουµε πάνω από µία σελίδα
ταυτόχρονα στην οθόνη, η κάθε µία στο δικό της ορθογώνιο πλαίσιο. Ο
συνδυασµός πλαισίων ή αλλιώς frameset εµφανίζεται σαν µία σελίδα µε
διάφορα κοµµάτια τα οποία είναι ξεχωριστές σελίδες.
Γενικά, οι περισσότεροι web designers χρησιµοποιούν ένα µόνο πλαίσιο

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

περιεχόµενα HTML. Το κάθε πλαίσιο αποτελεί ένα ξεχωριστό αρχείο HTML..
Ένα σύνολο πλαισίων (frameset) είναι ένα αρχείο HTML που καθορίζει τη
δοµή µίας ιστοσελίδας µε πλαίσια. Το σύνολο πλαισίων περιέχει πληροφορίες
σχετικά µε το µέγεθος και τη τοποθεσία κάθε πλαισίου, µαζί µε τα ονόµατα
των αρχείων που συµπεριλαµβάνουν τα περιεχόµενα του καθενός.

H εργαλειοθήκη των πλαισίων και οι επιλογές που µας δίνει
Ο βασικός λόγος για να χρησιµοποιήσουµε πλαίσια είναι για να έχουµε κάποιο

λειτουργικό διαχωρισµό της ιστοσελίδας. Έτσι τα τµήµατα της ιστοσελίδας
που παραµένουν σταθερά πραγµατοποιώντας την ίδια λειτουργία, είναι µια
ξεχωριστή σελίδα η οποία παραµένει η ίδια σε όλο το δικτυακό τόπο και
«φορτώνει» κάθε φορά που καλείται από το σύνολο πλαισίων.
Χαρακτηριστικό παράδειγµα σελίδας που παραµένει σταθερή και καλείται σε
όλο το βάθος του δικτυακού τόπου είναι η σελίδα που αφορά στην γραµµή
πλοήγησης και στην οριζόντια γραµµή µε το εµπορικό λογότυπο.
Αν οι απαιτήσεις µας στο σχεδιασµό δεν περιέχουν αυτό το βασικό παράγοντα
(την οµοιογένεια σε τµήµατα της σελίδας), τα πλαίσια δεν θα µας παρέχουν
καµία επιπρόσθετη λειτουργικότητα στην ιστοσελίδα µας.
Προσοχή: Έχοντας δύο πλαίσια, έχουµε διπλασιάσει το χρόνο φόρτωσης της

ιστοσελίδας σε σχέση µε µία απλή σελίδα, µε τρία πλαίσια ο χρόνος µπορεί να

τριπλασιαστεί, κτλ. Να θυµάστε πως ανεξάρτητα από την εµφάνισή τους στην
οθόνη, αποτελούν ξεχωριστές ιστοσελίδες και το περιεχόµενό της κάθεµίας
(images, applets Java, κτλ.) θα φορτωθεί όταν ο πλοηγητής του επισκέπτη
παέι να κατεβάσει την ιστοσελίδα
∆ηµιουργούµε ένα νέο λευκό έγγραφο, το οποίο δεν θα αποθηκεύσουµε προς

το παρόν.
Θα χρησιµοποιήσουµε το λευκό έγγραφο που ανοίγει αυτόµατα το
Dreamweaver στο παράθυρο Document ή µέσω του µενού File / New σε αυτό
το παράθυρο.
Η κάθε σελίδα HTML περιέχει τουλάχιστον ένα ξεχωριστό πλαίσιο. Η
διαδικασία δηµιουργίας ενός πλαισίου στο Dreamweaver είναι πιο απλή αν
γίνει οπτικά. Για να δούµε τις άκρες των πλαισίων της σελίδας, επιλέγουµε
View / Visual Aid / Frame Borders. Θα δούµε ένα χοντρό περιθώριο γύρω από
τη σελίδα και όταν δηµιουργούµε τα πλαίσια άλλο περιθώριο που θα χωρίζει
τα πλαίσια ανάµεσά τους. Μπορούµε να επιλέξουµε το σύνολο των πλαισίων
κάνοντας κλικ σε αυτό το περιθώριο.
Υπάρχουν δύο τρόποι για να δηµιουργήσουµε ένα σύνολο πλαισίων:
µπορούµε να κάνουµε χειρωνακτική εισαγωγή ή να επιλέξουµε ανάµεσα από
διάφορα σύνολα προκαθορισµένων πλαισίων. Θα χρησιµοποιήσουµε τη
τελευταία µέθοδο η οποία χρησιµοποιήται πιο συχνά λόγω του οτι καλύπτει
τις πιο συνηθισµένες ανάγκες. Η εργασία µας θα περιοριστεί λοιπόν στο να
ονοµάσουµε τις ανεξάρτητες σελίδες.
Η ιστοσελίδα µας περιέχει τρία πλαίσια. Στο Αριστερό πλαίσιο θα

τοποθετήσουµε τα στοιχεία πλοήγησης και το λογότυπο της εταιρίας. Στο
Πάνω µία δεύτερη γραµµή πλοήγησης και στο ∆εξί θα βάλουµε τις σελίδες
των οποίων το περιεχόµενο εξαρτάται από τις συνδέσεις που θα επιλέξουµε
στο πλαίσιο πλοήγησης.
Έχουµε ήδη δηµιουργήσει µία λευκή σελίδα. Κάνουµε κλικ στην εντολή που
έχει σχέση µε την εισαγωγή δεξιού Frame και επάνω Frame σε ένθετη
µορφή, στην κατηγορία Frames στο πίνακα Αντικειµένων (Objects Palette),
όπως βλέπουµε στο παράδειγµα.

∆ηµιουργία αριστερού και πάνω πλαισίου – frame
Τώρα που η σελίδα έχει ρυθµιστεί σύµφωνα µε τον αριθµό πλαισίων που
επιθυµούµε, πρέπει να αποθηκεύσουµε το σύνολο των πλαισίων. Το αρχείο µε
το σύνολο των πλαισίων (frameset) είναι αυτό στο οποίο αναφερόµαστε όταν
δηµιουργείται µία σύνδεση µε αυτή τη σελίδα Web.
Πριν επιχειρήσετε να αποθηκεύσετε, βεβαιωθείτε ότι η σελίδα σας µοιάζει

όπως αυτή της παραπάνω εικόνας
Για να αποθηκεύσουµε το σύνολο των πλαισίων ακολουθούµε ένα από τα

παρακάτω βήµατα:
• Κάνουµε κλικ στο περιθώριο που βρίσκεται ανάµεσα στα πλαίσια του
παραθύρου, ή
• Επιλέγουµε Window / Frames και κάνουµε κλικ στο περιθώριο που
περιέχει τα πλαίσια του Frameset.

Όλα τα περιθώρια πλαισίου που συµπεριλαµβάνονται στο σύνολο των

πλαισίων αποκτούν µία σκιαγράφηση αποτελούµενη από µία γραµµή µε
τελίτσες. Στη γραµµή τίτλου εµφανίζεται “untitledFrameset”, και στον
επιθεωρητή ιδιοτήτων εµφανίζονται οι ιδιότητες του συνόλου των πλαισίων.
Επιλέγοντας το αριστερό πλαίσιο από τον πίνακα Frames µια

διακεκοµµένη γραµµή υποδικνύει το επιλεγµένο πλαίσιο
Επιλέγουµε File / Save FrameSet As και αποθηκεύουµε το αρχείο σαν

frames.htm στο βασικό φάκελο της ιστοσελίδας µας (προσωρινά)
Με το σύνολο των πλαισίων επιλεγµένο (κάντε κλικ στο εξωτερικό

περίγραµµα από το παράθυρο Frames) , γράφουµε το τίτλο της σελίδας: Web
Tour Travel (Μενού Modify / Page Properties)
Σηµειώσεις για Εάν γράψουµε το τίτλο της σελίδας χωρίς να έχουµε επιλέξει το σύνολο των
τον πλαισίων, στη πραγµατικότητα ο τίτλος θα εφαρµοστεί σε µία από τις σελίδες
εκπαιδευτή: του συνόλου των πλαισίων και όχι στο αρχείο του συνόλου των πλαισίων. Στη

γραµµή τίτλου του εγγράφου εµφανίζεται ο τίτλος της επιλεγµένης σελίδας

καθώς και το όνοµα του αρχείου. Εάν το σύνολο των πλαισίων είναι
επιλεγµένο, στη γραµµή τίτλου του εγγράφου εµφανίζονται ο τίτλος του
συνόλου και το όνοµα του αρχείου.
To σύνολο των πλαισίων (frameset) επιλεγµένο από το παράθυρο

των frames. Η ονοµασία έχει δοθεί στο σύνολο των πλαισίων
∆ηµιουργώντας Ας µη ξεχνάµε πως το περιεχόµενο ενός πλαισίου είναι µία σελίδα HTML.
το περιεχόµενο Μπορούµε να δηµιουργήσουµε τη σελίδα ξεχωριστά ή µέσα στα όρια του
πλαισίου, το οποίο είναι µία καλή ιδέα εφ’όσον κατ’αυτό το τρόπο δεν θα
δηµιουργήσουµε µία σελίδα µεγαλύτερη σε ύψος ή πλάτος από το πλαίσιο.
Η χρηστικότητα της ιστοσελίδας είναι ένας πολύ βασικός παράγοντας
επιτυχίας της. Για αυτό πρέπει να φροντίσουµε να φτιάξουµε τις σελίδες στα
πλαίσια έτσι ώστε να µην χρειάζεται ο χρήστης να µετακινηθεί µέσα σε αυτά
για να δει όλο τους το περιεχόµενο.
Ξεκινάµε από το αριστερό πλαίσιο όπου θα τοποθετήσουµε το λογότυπο και
τη γραµµή πλοήγησης.
Κάνουµε ένα κλικ στο εσωτερικό του αριστερού πλαισίου. Κατ’αυτό το τρόπο

το έχουµε επιλέξει και βλέπουµε το βέλος µέσα του. Για τη καλύτερη δυνατόν
κατάταξη, τοποθετούµε ένα πίνακα µε µία στήλη και 10 σειρές (1x10), µία για
το λογότυπο, µία κενή (για να δηµιουργήσουµε ένα κενό ανάµεσα στο
λογότυπο και τα κουµπιά) και οι υπόλοιπες 8 για τα κουµπιά. Προς το παρόν
δε θα ασχοληθούµε ούτε µε το µέγεθος του πίνακα αλλά ούτε µε αυτό του
πλαισίου.
Οι πίνακες HTML είναι πολύ παρόµοιοι µε ένα φύλλο εργασίας (excel). Στην
πραγµατικότητα, οι πίνακες στο HTML δηµιουργήθηκαν για να διευκολύνουν
τον σχεδιαστή της ιστοσελίδας στην σωστή τοποθέτηση του κειµένου, των
εικόνων και των άλλων στοιχείων στην ιστοσελίδα.
Περιέχουν σειρές και στήλες στις οποίες µπορεί να καταχωρηθούν στοιχεία
αλλά αποτελούν επίσης ένα τρόπο σχεδίασης µε περισσότερο έλεγχο στη
τοποθέτηση του κειµένου και των γραφικών. Μπορούµε να χρησιµοποιήσουµε
τα κελιά ενός πίνακα για να τοποθετήσουµε γραφικά σ’ένα σηµείο που να µην
είναι απαραίτητα το επόµενο κάθετο αντικείµενο στη σελίδα ή µπορούµε να
χρησιµοποιήσουµε ένα κελί για να δηµιουργήσουµε µία οριζόντια γραµµή για
το κείµενο.
Μπορείτε εδώ να προτείνετε στα παιδιά να πειραµατιστούν, προσθέτοντας
στοιχεία σε µια ιστοσελίδα µε η χωρίς πίνακα.
Επιλέγουµε το πρώτο κελί του πίνακά µας και τοποθετούµε την εικόνα
logowt.png που έχουµε αποθηκεύσει στο φάκελο images της ιστοσελίδας
Web Tour. Θα εµφανιστεί το µήνυµα του Dreamweaver το οποίο µας
ενηµερώνει πως αν δεν αποθηκεύσουµε τη σελίδα, θα χρησιµοποιήσει µία
εναλλακτική διαδροµή για να συνδέσει το έγγραφο. Υπενθυµίζουµε πως
δηµιουργούµε µία ανεξάρτητη σελίδα η οποία θα «καλείται» από ένα σύνολο

πλαισίων
Καθώς µπορούµε να διαπιστώσουµε η εικόνα µας δεν φαίνεται ολόκληρη. Θα

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

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

Επιλέγουµε το σύνολο των πλαισίων κάνοντας κλικ στις άκρες ανάµεσα στα
πλαίσια. Έπειτα σύρουµε την άκρη ανάµεσα στο αριστερό και στο δεξί πλαίσιο
έως ότου να είναι εµφανές το αντικείµενο µας. Αν παρατηρήσουµε τον
επιθεωρητή ιδιοτήτων, βλέπουµε πως η αριστερή στήλη έχει σκουρίνει και
διαβάζουµε επίσης πως το πλάτος της είναι (περίπου) 150 pixels. Το πλάτος
της στήλης µπορεί να καθοριστεί επίσης απ’ευθείας σε αυτό το πεδίο.
Σηµειώσεις για Όταν αποφασίζουµε το πως θα αλλάξουµε το µέγεθος του πλαισίου, πρέπει
το µέγεθος των να έχουµε υπ’όψιν µας τα παρακάτω:
πλαισίων:
• Πίξελς: Καθορίζει το µέγεθος της επιλεγµένης στήλης ή σειράς
• Ποσοστό: Ορίζει ένα ποσοστό που θα πρέπει να καταλαµβάνει η σειρά
ή η στήλη στο σύνολο των πλαισίω (frameset).
• Σχετικότητα: Αναθέτει το χώρο στις σειρές ή στήλες χρησιµοποιώντας
αναλογία διαστάσεων σε σχέση µε τις άλλες σειρές ή στήλες.
Τώρα τοποθετούµε τα υπόλοιπα κουµπιά του πίνακά µας στο αριστερό

πλαίσιο. Θα χρησιµοποιήσουµε λοιπόν το µενού Insert / Μedia / Flash
(υπενθυµίζουµε πως τα κουµπιά µας ήταν κουµπιά Flash) και θα βρούµε τα
κουµπιά µας στο φάκελο Buttons και στον υποφάκελο Vertical όπου τα
αποθηκεύσαµε.
Για καλύτερο οπτικό αποτέλεσµα κάντε κλικ στο πρώτο κελί που περιέχει
κουµπί flash και έχοντας πατηµένο το ποντίκι σύρτε προς τα κάτω
επιλέγοντας όλα τα κελιά του πίνακα που περιέχουν κουµπιά. Από τον
επιθεωρητή ιδιοτήτων (Properties Inspector) ορίστε το ύψος του κάθε κελιού
30 πίξελς (πληκτρολογήστε 30 δίπλα στο πεδίο H και Enter). Ενώ έχετε ακόµη
επιλεγµένα τα κελιά του πίνακα µε τα κουµπιά flash πατήστε το κουµπί της
κεντρικής στοίχισης στον επιθεωρητή ιδιοτήτων.

Τέλος τοποθετούµε την εικόνα φόντου (clouds.jpg) που χρησιµοποιήσαµε και

στη σελίδα index (µενού Modify / Page Properties).
Θα αποθηκεύσουµε τώρα τη σελίδα µας. Υπενθυµίζουµε πως πρόκειται για µία

ανεξάρτητη σελίδα Web. Έχοντας το αριστερό πλαίσιο ενεργοποιηµένο, αν
κοιτάξουµε τη γραµµή τίτλου του παραθύρου θα διαβάσουµε «Untitled
Document » , δηλαδή πως το έγγραφό µας δεν έχει ούτε όνοµα ούτε τίτλο.
Χρησιµοποιώντας το File / save Frame το ονοµάζουµε vnb.htm (το
αποθηκεύουµε στο βασικό φάκελο) και το ονοµάζουµε Vertical Navigation Bar
-Κάθετη Γραµµή Πλοήγησης. .
Αν πάµε στο παράθυρο Site θα δούµε το αρχείο που µόλις δηµιουργήσαµε.

Βάλτε τους µαθητές να κάνουν διπλό κλικ στο παράθυρο Site πάνω στο
αρχείο VNB.htm. Το αρχείο θα ανοίξει σ’ένα παράθυρο εγγράφου σαν
ολόκληρη σελίδα. Έτσι µπορούµε να δούµε πως είναι µία ανεξάρτητη σελίδα
Web.
Οι µαθητές πρέπει τώρα να φτιάξουν µε τον ίδιο τρόπο το άνω πλαίσιο,

εισάγοντας τα κουµπιά της οριζόντιας γραµµής πλοήγησης, τα οποία είναι
τέσσερα. Για αυτό θα χρειαστεί να δηµιουργήσουν έναν πίνακα µε τέσσερις
στήλες και µια σειρά. Στη συνέχεια πρέπει να τοποθετήσουν το ποντίκι τους
στο πρώτο κελί και µετά να εισάγουν το πρώτο κουµπί, κάνοντας κλικ στο
δεύτερο κελί να εισάγουν το δεύτερο κουµπί, κ.ό.κ. Μόλις τοποθετήσουν τα
κουµπιά θα πρέπει να ρυθµίσουν το ύψος του πλαισίου στο ελάχιστο δυνατό,
να στοιχίσουν τα κουµπιά στο κέντρο των κελιών και να το αποθηκεύσουν

σαν HNB.htm, ονοµάζοντάς το Horizontal Navigation Bar - Οριζόντια Γραµµή

Πλοήγησης. Υπενθυµίστε τους να χρησιµοποιήσουν και σ’αυτή τη περίπτωση
για φόντο σελίδας το αρχείο clouds.jpg.
Μας µένει τώρα να δηµιουργήσουµε τη σελίδα περιεχοµένων. Ακολουθώντας

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

εικόνα φόντου clouds.jpg, ονοµάζουµε τη σελίδα Offers και την
αποθηκεύουµε σαν Offers.htm. Έπειτα εισάγουµε ένα πίνακα µε τρείς στήλες
και τέσσερις σειρές (όπως είναι σύνηθες στη χρήση των πινάκων, ο αριθµός
σειρών είναι σχετικός εφ’όσον µπορούµε να προσθέτουµε επιπλέον αν
χρειαστεί)
Τώρα θα εισάγουµε τις φωτογραφίες που θα βάλουµε στα κελιά, τις οποίες θα
αποθηκεύσουµε στο φάκελο Offers του δικτυακού µας τόπου και όχι στο
φάκελο Images λόγω του ότι αυτή η σελίδα θα ανανεώνεται τακτικά και θα
χρειάζεται να «κατεβάζουµε» και να φορτώνουµε αρχεία της. Από άποψη
οργάνωσης λοιπόν, διευκολύνει να έχουµε όλα τα αρχεία της σελίδας στον
ίδιο φάκελο.
Τα αρχεία που θα χρησιµοποιήσουµε είναι (ή οποιοδήποτε άλλο αρχείο µε

εικόνες που θα θελήσουν οι µαθητές) αυτά που φαίνονται στο παράδειγµα:

Έχοντας εισάγει όλες τις εικόνες µε τη σειρά που επιθυµούµε, προσέχοντας οι

πρώτες τρεις φωτογραφίες να είναι στην πρώτη σειρά (µια σε κάθε κελί),
αφήνοντας κενή τη δεύτερη σειρά και τοποθετώντας τις τελευταίες δύο στην
Τρίτη σειρά, θα τοποθετήσουµε τώρα τα ενηµερωτικά κείµενα. Κάνουµε ένα
απλό κλικ στο κελί της δεύτερης σειράς που θέλουµε να γράψουµε. Θα
εµφανιστεί το βελάκι, και το πλαίσιο ιδιοτήτων θα µετατραπεί σύµφωνα µε
την ιδιότητα κειµένου. Από εκεί µπορούµε να επιλέξουµε το είδος γράµµατος,
το µέγεθος, κτλ. Για το αρχείο µας θα χρησιµοποιήσουµε τη γραµµατοσειρά
Arial 3 και έντονα., για το τίτλο και τη τιµή, και µέγεθος 2 για το κείµενο
περιγραφής. Στη τιµή προσθέτουµε επιπλέον χρώµα µπλε. Σε καθένα από
τους πέντε προορισµούς ο µαθητής πρέπει να εισάγει τίτλο και τιµή καθώς και
ένα µικρό κείµενο περιγραφής, ακολουθώντας τους παραπάνω κανόνες.
Οι µαθητές πρέπει να εισάγουν το κείµενο γραµµή γραµµή, πατώντας Enter

στο τέλος της κάθε γραµµής. Θα προσέξουν πως ο χώρος ανάµεσα στις
γραµµές είναι αρκετά µεγάλος, αφήνοντας ένα µεγάλο λευκό κενό ανάµεσα
τους. Για να το λύσουµε αυτό, βρίσκουµε στο πάνελ αντικειµένων το
αντίστοιχο κουτάκι για τους Χαρακτήρες. Εντοπίζουµε την εντολή για την
εισαγωγή κενού γραµµών, χρησιµοποιώντας τη στο τέλος κάθε γραµµής.
Κατ’αυτό το τρόπο το κείµενό µας θα έχει ένα ανάλογο κενό, όπως τον
επεξεργαστή κειµένου.

Εναλλακτικός τρόπος για να αλλάζετε µια γραµµή (και όχι δύο όπως όταν
πατάτε το Enter» όταν γράφετε κείµενο στο Dreamweaver είναι να πατάτε
Enter, ενώ έχετε ήδη πατηµένο το πλήκτρο Ctrl.
Η σελίδα των προσφορών µε τις φωτογραφίες και κείµενο

περιγραφής
Για την αποθήκευση ακολουθούµε την ίδια διαδικασία όπως προηγουµένως,

χρησιµοποιώντας το όνοµα Offers.htm, αλλά αυτή τη φορά αποθηκεύουµε το
αρχείο µέσα στο φάκελο Offers.
Έχουµε αποθηκεύσει το κάθε ένα από τα τρία πλαίσια που αποτελούν την
σελίδα µας, κάθε ένα από τα οποία αποτελεί µία ανεξάρτητη σελίδα web.
Πρέπει τώρα να αποθηκεύσουµε το σύνολο των πλαισίων. Αυτή θα είναι η
σελίδα στην οποία θα πρέπει να ανατρέξουµε αργότερα όταν θα
πραγµατοποιήσουµε τη σύνδεση της ιστοσελίδας. Επιλέγουµε λοιπόν File /
Save FrameSet As (πρέπει να είναι επιλεγµένο το σύνολο πλαισίων) και το
αποθηκεύουµε µέσα στο φάκελο Offers σαν F_Offers.htm.
Σύµφωνα µε το σχέδιο µας, η κάθε προσφορά έχει και τη δική της σελίδα µε
την περιγραφή της προσφοράς και µία πιο λεπτοµερής εξήγηση. Αυτό είναι
κάτι που θα πραγµατοποιήσουµε αργότερα.
Συνδεδεµένες Σύµφωνα µε την αρχική µας πρόταση, κάνοντας κλικ σε κάποια από τις ζώνες
Σελίδες που προηγουµένως καθορίσαµε, ο πλοηγητής θα πρέπει να µας µεταφέρει σε
άλλη οθόνη όπου θα περιγράφεται η επιλεγµένη προσφορά υπηρεσιών.
Πρέπει λοιπόν να δηµιουργήσουµε µία καινούργια σελίδα.
Οι µαθητές πρέπει να δηµιουργήσουν µία σελίδα µε το όνοµα κάποιας

προσφοράς, να την αποθηκεύσουν και να τη κλείσουν ανοίγoντάς την

αργότερα στο πλαίσιο όπου είναι οι προσφορές (για να έχουν µία ιδέα ως
προς το µέγεθος και τη τοποθεσία).
Μόλις το κάνουν αυτό θα πρέπει να σχεδιάσουν το περιεχόµενο της και να

αποθηκεύσουν µόνο τη σελίδα αυτή και ΟΧΙ το σύνολο των πλαισίων.
Σηµειώσεις για ∆εν θα δηµιουργήσουµε εδώ µία τέτοια σελίδα, αφήνοντας την επιλογή στον
τον εκπαιδευτή αν θέλει να τη διεκπαιρεώσει ή όχι. Για την επόµενη άσκηση
εκπαιδευτή: σύνδεσης σελιδών θα χρησιµοποιήσουµε το ήδη δηµιουργηµένο αρχείο
london.htm.
Περίληψη Μάθαµε να χρησιµοποιούµε τα πλαίσια στο σχεδιασµό ιστοσελίδων, το οποίο

µας δίνει τη δυνατότητα να βελτιστoποιήσουµε τους χρόνους
«κατεβάσµατος» των σελιδών για ορισµένα σχέδια όπου µέρος της σελίδας
παραµένει το ίδιο.
Εξειδικευτήκαµε στη χρήση των πινακών για την οργανώση των πληροφοριών
µας και µάθαµε για τη χρήση ειδικών χαρακτήρων για να καλυτερεύσουµε την
εικόνα του κειµένου στη σελίδα.

Μάθηµα 9
Πλαίσια – Χάρτες εικόνας – Φόρµες
Περιγραφή: Οι µαθητές θα συµπληρώσουν τις γνώσεις τους σχετικά µε τα πλαίσια και

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

∆ηµιουργία ενός χάρτη εικόνας (image map)
∆ηµιουργία φόρµας
Σελίδα Θα δηµιουργήσουµε µία καινούργια σελίδα µε πλαίσια που θα έχει την ίδια
∆ιακοπές κατανοµή µε τη σελίδα Offers (µία κατανοµή που θα χρησιµοποιήσουµε και
για τον υπόλοιπο δικτυακό τόπο). Από το παράθυρο έγγραφο θα
δηµιουργήσουµε πρώτα ένα νέο έγγραφο και έπειτα, χρησιµοποιώντας τη
παλέτα µε τα αντικείµενα προσαρµοσµένη για πλαίσια, θα εισάγουµε το
σύνολο πλαισίων, όπως και στην περίπτωση µε την σελίδα περιεχοµένου
offers.
Μη ξεχνάµε πως οι σελίδες που αποτελούν ένα σύνολο πλαισίων είναι

ανεξάρτητες σελίδες web. Έχοντας ήδη δηµιουργήσει τις σελίδες που
σχετίζονται µε το αριστερό πλαίσιο (VNB.htm) και το άνω πλαίσιο (HNB.htm),
θα δούµε πως µπορούµε να τις χρησιµοποιήσουµε.
Τοποθετούµε το βελάκι στο αριστερό πλαίσιο, µετατρέποντάς το σε ενεργό

πλαίσιο, πάµε στο µενού File / Open in Frame σε πλαίσιο και βρίσκουµε το
αρχείο VNB.htm στο βασικό κατάλογο της ιστοσελίδας µας. Έχοντας ανοίξει
το αρχείο, ρυθµίζουµε το πλάτος του πλαισίου.
Επαναλαµβάνουµε τη κίνηση για το άνω πλαίσιο µε το αρχείο HNB.htm. Η

σελίδα µας πρέπει τώρα να δείχνει ως εξής :

Σελίδα διακοπών µε το αριστερό και πάνω πλαίσιο ολοκληρωµένο
Πριν συνεχίσουµε θα αποθηκεύσουµε την εργασία µας. Πρέπει να

αποθηκεύσουµε την ενεργή ζώνη την οποία θα ονοµάσουµε holidays.htm
(κάνουµε κλικ στο κενό τµήµα των περιεχοµένων ενεργοποιώντας το και
αποθηκεύουµε) καθώς επίσης και το νέο σύνολο πλαισίων (επιλέγοντας το
σύνολο πλαισίων από το παράθυρο των πλαισίων) και ονοµάζοντάς το
F_Holidays.htm. Αποθηκεύουµε και τα δύο αρχεία στο φάκελο Holidays.
Χάρτες εικόνας Θα δουλέψουµε τώρα πάνω στη σελίδα Holidays.htm.
Κάνουµε λοιπόν κλικ στο αντίστοιχο πλαίσιο και, ως συνήθως, τοποθετούµε

την εικόνα φόντου, clouds.jpg. Ένας νέος τρόπος πρόσβασης στις ιδιότητες
της σελίδας είναι κάνοντας δεξί κλικ στη «λευκή» ζώνη της σελίδας µας, το
οποίο θα µας ανοίξει ένα µενού όπου µία από τις επιλογές θα είναι Page
Properties. Το όνοµα της σελίδας θα είναι φυσικά Holidays.
Ακολουθώντας πάντα το σχεδιάγραµµά µας, θα εισάγουµε στο άνω µέρος ένα

πίνακα µε µία σειρά και δύο στήλες. Τοποθετώντας το βελάκι στο πρώτο κελί
του πίνακά µας, εισάγουµε την εικόνα holidays.jpg την οποία αποθηκεύουµε
έπειτα στο φάκελο Holidays. Στο δεύτερο κελί εισάγουµε το εξής κείµενο:
Πού θέλετε να πάτε για διακοπές; Κάντε ένα κλικ στη γεωγραφική ζώνη που
επιθυµείτε και επιλέξτε το προορισµό σας

Οι µαθητές µπορούν να κεντράρουν ή να αλλάξουν τη γραµµατοσειρά, το

µέγεθος και το χρώµα της.
Η σελίδα περιεχοµένου Holidays
∆ηµιουργώντας Όταν συνδέεται µία εικόνα µε µία σελίδα, ο χρήστης µπορεί να κάνει κλικ σε
χάρτες εικόνας οποιοδήποτε µέρος της εικόνας για να πάει στη αντίστοιχη συνδεδεµένη
σελίδα. Η εικόνα µπορεί επίσης να χωριστεί σε τµήµατα εκ των οποίων το
καθένα οδηγεί σε διαφορετικές συνδέσεις αν χρησιµοποιήσουµε ένα χάρτη
εικόνας.. Οι χάρτες εικόνας δεν χρειάζεται να αποτελούνται πάντα από
ορθογώνια τµήµατα, αλλά µπορούν να έχουν κι’άλλα σχήµατα.
Θα τοποθετήσουµε στην οθόνη (στη σελίδα holidays) ένα χάρτη του κόσµου,
µε το όνοµα world-map.gif. Αφού επιλέξουµε την εικόνα στο πεδίο κειµένου
Map του επιθεωρητή ιδιοτήτων, γράφουµε WorldMap. Στην ονοµασία του
χάρτη δεν µπορούν να χρησιµοποιηθούν κενά ή ειδικοί χαρακτήρες. Μία
σελίδα µπορεί να περιέχει διάφορους χάρτες εικόνας αλλά όλοι πρέπει να είναι
µοναδικοί.
Στον επιθεωρητή ιδιοτήτων επιλέγουµε το εργαλείο αλληλεπιδραστική ζώνη

Ορθογώνιο (το πρώτο κουµπί αριστερά κάτω από το “Map” µε το µπλε
παραλληλόγραµµο) και σύρουµε έως ότου να δηµιουργηθεί ένα τετράγωνο
πάνω στη Βόρειο Αµερική (North America)

Χάρτης Εικόνας µε επιλεγµένη την επιφάνεια πάνω από τις λέξεις

North America
Εµφανίζεται µία διαφανής µπλε – πράσινη ζώνη µε «χερούλια». Ο

επιθεωρητής ιδιοτήτων µετατρέπεται σε Ιδιότητες αλληλεπιδραστικής ζώνης
όπου µπορούµε να καταχωρήσουµε τις πληροφορίες για τη σύνδεση.
Με το εργαλείο δείκτης της αλληλεπιδραστικής ζώνης, µπορούµε να
ρυθµίσουµε το µέγεθος της ζώνης µέσω των χερουλιών ή αλλιώς
τοποθετώντας το στο εσωτερικό της ζώνης τη σύρουµε σε µία νέα θέση.
Έχοντας την αλληλεπιδραστική ζώνη επιλεγµένη, γράφουµε Βόρεια Αµερική

στον επιθεωρητή ιδιοτήτων στο πεδίο κειµένου Alt. Αυτό το κείµενο
λειτουργεί όπως το κείµενο Alt της εικόνας.
Θα πραγµατοποιήσουµε το ίδιο µε τις άλλες ζώνες, χρησιµοποιώντας

διαφορετικά εργαλεία σχήµατος (οβάλ και πολυγώνια) έτσι ώστε ο χάρτης
εικόνας να δείχνει σαν το παρακάτω παράδειγµα. Σαν κείµενο Alt
χρησιµοποιούµε πάντα το όνοµα της επιλεγµένης επιφάνειας.

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

ενεργών ζωνών, να την αποθηκεύσουν και να τη κλείσουν.
Καλό θα είναι αφού δηµιουργηθεί η σελίδα οι µαθητές να επιστρέψουν στην
σελίδα του χάρτη και κάνοντας κλικ στην ανάλογη περιοχή του χάρτη να
ελέγξουν αν η σύνδεση έχει γίνει σωστά.
Για παράδειγµα µπορούν να συνδέσουν από τον επιθεωρητή ιδιοτήτων ένα
τµήµα του χάρτη που καλύπτει την Αυστραλία µε µια ιστοσελίδα australia.htm
Μόλις το κάνουν αυτό, θα πρέπει να σχεδιάσουν το περιεχόµενό της και
έπειτα να αποθηκεύσουν αυτή τη σελίδα και µόνο και ΟΧΙ το σύνολο των
πλαισίων.
Σηµειώσεις για ∆εν θα επεκταθούµε εδώ στον τρόπο δηµιουργίας µιας τέτοιας σελίδας,

τον εκπαιδευτή: αφήνοντας την επιλογή στον εκπαιδευτή αν θέλει να την δηµιουργήσει ή όχι.
Για την επόµενη άσκηση σύνδεσης σελιδών θα χρησιµοποιήσουµε το ήδη
υπάρχον αρχείο, America.htm
Σελίδα Για την ανάπτυξη αυτής της σελίδας θα µάθουµε να χρησιµοποιούµε λίστες.
Airplanes Όπως τις προηγούµενες σελίδες, Offers και Holidays, θα χρειαστεί να
δηµιουργήσουµε µία καινούργια σελίδα, να κάνουµε χρήση των πλαισίων και
να ανοίξουµε στο αριστερό και άνω πλαίσιο τις σελίδες που αντιστοιχούν στις
γραµµές πλοήγησης.
H νέα σελίδα θα ονοµαστεί airplanes.htm µε όνοµα σελίδας Αεροπλάνα.

Αντιθέτα µε τις προηγούµενες σελίδες δεν θα περιέχει ούτε εικόνες ούτε
χρώµα φόντου. Το σύνολο πλαισίων θα ονοµαστεί F_planes.htm. Και τα δύο
αρχεία θα αποθηκευτούν στο φάκελο planes του δικτυακού µας τόπου.
Σε αυτή τη σελίδα θα µάθουµε πως να δηµιουργούµε φόρµες
Φόρµες Οι φόρµες είναι ένας τρόπος ανάκτησης πληροφοριών από τους χρήστες. Τα
δεδοµένα µίας φόρµας αποστέλλονται συνήθως σε µία βάση δεδοµένων ενός
διακοµιστή ή σε µία διεύθυνση ηλεκτρονικού ταχυδροµείου. Η φόρµα µας θα
περιέχει διάφορα πεδία. Ωστόσο, δε θα καλύψουµε τοCGI, δηλαδή τη
σύνδεση επικοινωνίας ανάµεσα στο φόρµα και στη βάση δεδοµένων (ή τη
διεύθυνση ηλεκτρονικού ταχυδροµείου) όπου αποστέλλονται τα στοιχεία από
τη φόρµα.
Σηµειώσεις για CGI (Common Gateway Interfase): πρόκειται για µία σειρά εντολών ή ένα
τον εκπαιδευτή: µικρό πρόγραµµα το οποίο εκτελείται στον διακοµιστή Web και το οποίο
επεξεργάζεται τη σειρά δεδοµένων που αποστέλλει η φόρµα. Τα στοιχεία που
στέλνει µία φόρµα συνθέτουν µία συνεχής αλυσίδα κειµένου προερχόµενη
από τις πληροφορίες που εισάγει ο χρήστης. Το πρώτο καθήκον ενός CGI.
αποτελείται συνήθως από την «ανάλυση» (ή το διαχωρισµό) του κειµένου
προκειµένου να του δώσει µία ευανάγνωστη µορφή έτσι ώστε να αντιστοιχεί
µε τις πληροφορίες της φόρµας.
Για να προσθέσουµε τη φόρµα στη σελίδα µας, τοποθετούµε το βελάκι στο

σηµείο που θέλουµε να εισάγουµε τη φόρµα, δηλαδή στη σελίδα
airplanes.htm.
Έπειτα µπορούµε να προχωρίσουµε µε τους εξής δύο τρόπους:
• Κάνοντας κλικ πάνω στο εικονίδιο Insert Form στο πάνελ Forms της
παλέτας αντικειµένων, ή
• Μέσω της επιλογής µενού Insert / Form

Eισαγωγή Φόρµας
Έχοντας εισάγει τη φόρµα στη σελίδα µας, εµφανίζεται µία διακεκοµµένη

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

Σηµειώσεις για Εάν το πρόγραµµα είναι ρυθµισµένο έτσι ώστε να µη δείχνει αόρατα στοιχεία,
τον εκπαιδευτή: τότε δε θα βλέπουµε τη διακεκοµµένη γραµµή. Αυτό µπορεί να αλλάξει µέσω
του µενού View / Visual Aids / Invisible Elements.
Προκειµένου να χρησιµεύσουν σε κάτι το ουσιαστικό, οι φόρµες πρέπει να

κάνουν κάτι µε τις πληροφορίες που συλλέγουν. Αυτή η διαδικασία της
αποστολής πληροφορίας ξεκινά από τη στιγµή που ο χρήστης έχει κάνει κλικ
στο κουµπί Αποστολή (Submit). Από εκείνη τη στιγµή η φόρµα ετοιµάζεται να
στείλει στο διακοµιστή τα συλλεγµένα στοχεία έπειτα από ορισµένη
επεξεργασία.
Συνήθως, την επεξεργασία δεδοµένων τη διαχειρείζεται κάποιο εξωτερικό

πρόγραµµα. Ωστόσο, µπορεί να γίνει και µε το Java Script.
<!-- ∆ύο από τις τρεις ιδιότητες που πρέπει να καθοριστούν στον Επιθεωρητή
Ιδιοτήτων έχουν να κάνουν µε την επεξεργασία και την αποστολή
πληροφοριών. Æ
Οι ιδιότητες µίας φόρµας είναι Form Name, Action και Method.

• Form Name: Η ονοµασία µίας φόρµας δεν θα ήταν και τόσο σηµαντική
αν δε χρειαζόταν αργότερα να αναφερθούµε σε αυτή από το
πρόγραµµα επεξεργασίας των δεδοµένων που στέλνει. Θα
ονοµάσουµε τη συγκεκριµένη φόρµα airplanes_fr (όπου το fr θα
αντιστοιχεί από εδώ και στο εξής σε όλες τις φόρµες που
δηµιουργούµε)
• Action: Καθορίζει την εφαρµογή του διακοµιστή (ή του CGI) που

αναλαµβάνει να επεξεργαστεί τις πληροφορίες όταν ο χρήστης πατήσει
το κουµπί Αποστολή,. Μπορεί να χρησιµοποιηθεί επίσης για να
παραπέµψει σε µια εντολή Java Script ή στην αποστολή ηλεκτρονικού
µηνύµατος σε µια καθορισµένη από εµάς διεύθυνση.
Παραδείγµατα:

• URL ενός προγράµµατος CGI: /cgi-bin/procesarform.pl

• Ένα πρόγραµµα JavaScript: javascript: λειτουργία (), αντικαθιστούµε τη
λειτουργία µε το σωστό όνοµα
• URL ταχυδροµείου: mailto:οπουδήποτε@οτιδήποτε.com ή διευκρινίζοντας
το θέµα αλληλογραφίας που θα σταλεί :
mailto:οπουδήποτε@οτιδήποτε.com?subjetct=οτιδήποτε
Η χρήση των URLs ταχυδροµείου έχει διάφορα µειονεκτήµατα:
• Τα δεδοµένα φθάνουν στον αποδέκτη της αλληλογραφίας µε την ίδια

µορφή που τα λαµβάνει και ο διακοµιστής web, σε µορφή δηλαδή που δεν
είναι αναγνώσιµη.
• Η ενέργεια της αλληλογραφίας εξαρτάται από το αν οι χρήστες έχουν
σωστά ρυθµισµένο του ηλεκτρονικού τους ταχυδροµείου. Στην αντίθετη
περίπτωση, δε θα µπορεί να σταλεί η φόρµα.
• Αυτή η ενέργεια στέλνει µία προειδοποίηση για πιθανό πρόβληµα
ασφαλείας (εντοπίζει µη κωδικοποιηµένα στοιχεία που αποστέλλονται
µέσω ηλεκτρονικού ταχυδροµείου), που µπορεί να χρησιµοποιούν
ορισµένα άτοµα
Σηµειώσεις για
τον εκπαιδευτή:
Για τη δική µας περίπτωση θα αφήσουµε αυτό το πεδίο κενό.
• Μethod: Πρόκειται για το τρόπο µε τον οποίο τα στοιχεία της φόρµας

µεταφέρονται στο διακοµιστή web. Υπάρχουν δύο ειδών: POST και
GET. Mε τη µέθοδο GET τα στοιχεία της φόρµας «συνενώνονται» στο
URL όπου πρέπει να αποσταλούν (αναφέρεται στην ιδιότητα ενέργεια)
ενώ µε το POST τα στοιχεία στέλνονται ανεξάρτητα (στο http)
∆εδοµένου οτι δεν καθορίσαµε την ενέργεια, η µέθοδος σ’αυτή τη

περίπτωση δεν έχει σηµασία.
Προσθέτωντας Για να καλυτερεύσουµε το σχεδιασµό της φόρµας, µπορούµε να

κείµενο σε µία προσθέσουµε ένα πίνακα µέσα στα όρια της φόρµας. Αυτό θα διευκολύνει την
φόρµα: ευθυγράµµιση των ετικετών καθώς και των ίδιων πεδίων της φόρµας. Θα
εισάγουµε ένα πίνακα µε δώδεκα σειρές και τέσσερις στήλες, αρχικά, µε
πλάτος περιθώριου µηδέν έτσι ώστε να µη φαίνεται.
Σηµειώσεις για Η ανάπτυξη που ακολουθεί γίνεται µε σκοπό να επιτύχουµε την παρακάτω
τον εκπαιδευτή: εικόνα µίας τελειωµένης φόρµας. Συµβουλευτείτε τη σαν αναφορά για τα
διάφορα σηµεία που ακολουθούν.

Αφού ενοποιήσουµε τα τέσσερα κελιά της πρώτης γράφουµε τη λέξη

ΑΝΑΖΗΤΗΣΗ.
Ενοποίηση κελιών πίνακα, µε επιλογή και πάτηµα του κουµπιού της
ενοποίησης από τον επιθεωρητή ιδιοτήτων
Μέσω του επιθεωρητή ιδιοτήτων αλλάζουµε το χρώµα φόντου του κελιού σε

γκρι και χρησιµοποιούµε άσπρο για το κείµενο. Η γραµµατοσειρά που βλέπετε
στο παράδειγµα είναι Arial (και η οποία θα χρησιµοποιηθεί καθ’όλη τη

διάρκεια της άσκησης) και είναι Έντονη.
Ο επιθεωρητής ιδιοτήτων αφού δώσουµε τις κατάλληλες τιµές για

την πρώτη γραµµή
Ενοποιούµε και τα κελιά της δεύτερης γραµµής και εισάγουµε το κείµενο:

∆εχόµαστε κρατήσεις µόνο στις 72 ώρες και 361 ηµέρες από σήµερα, µε
µέγεθος γραµµατοσειράς το 2.
Λίστες Στο πρώτο κελί της επόµενης σειράς γράφουµε Από: και τα τρία υπόλοιπα
όπου θα εισάγουµε το πρώτο αντικείµενο φόρµας.
Τοποθετώντας το βελάκι σ’αυτό το κελί πάµε στο µενού Insert / Form Objects
/ List/Μenu όπου εµφανίζεται αυτό που βλέπουµε στο παράδειγµα µε το
αντίστοιχο επιθεωρητή ιδιοτήτων.
Εισαγωγή Λίστας Φόρµας από το µενού Insert
To στοιχείο που µόλις προσθέσαµε επιτρέπει στο χρήστη να επιλέξει από µία
λίστα ή από ένα µενού.
Το ίδιο µπορεί να πραγµατοποιηθεί χρησιµοποιώντας τη παλέτα αντικειµένων

Form.

Eισαγωγή λίστας φόρµας από την παλέτα αντεκειµένων
Το µενού περιορίζει τους χρήστες σε µία µόνο επιλογή, ενώ η λίστα τους δίνει
την δυνατότητα να επιλέξουν µία ή περισσότερες επιλογές αν κρατήσουν
πατηµένο το πλήκτρο Control και «κλικάροντας» σε διάφορα δεδοµένα. (Το
τελευταίο αποτελεί επιλογή του πλοηγητή αλλά τόσο το Netscape Navigator
όσο και το Microsoft Internet Explorer κάνουν χρήση του πλήκτρου Control
στις πλατφόρµες Windows και Macintosh). Καθώς θέλουµε ο χρήστης να
επιλέξει το τόπο αναχώρησής του τότε θα χρησιµοποιήσουµε το µενού.
Θα το ονοµάσουµε air_depart.
Επιθεωρητής ιδιοτήτων µε ονοµασµένο το στοιχείο φόρµας «Λίστα»

Κάνουµε τώρα ένα κλικ στο List Values και προσθέτουµε τα ονόµατα
ορισµένων από των αεροδροµίων όπως µας δείχνει το παράδειγµα (ή αυτά
που επιθυµεί ο µαθητής).
Πλαίσιο διαλόγου List Values
Το πεδίο Item Label είναι αυτό που δείχνει ο πλοηγητής, το πεδίο Value είναι
το κείµενο που αποστέλεται στο CGI ή στο διακοµιστή υποδεικνύοντας την
επιλογή.
Αν θέλουµε να αναδιοργανώσουµε τη λίστα, πρέπει να χρησιµοποιήσουµε τα

βέλη που βρίσκονται από πάνω από το πεδίο Value.
Επαναλαµβάνουµε όλη τη διαδικασία για την επόµενη σειρά, όπου θα

βάλουµε το αεροδρόµιο προορισµού αλλά αυτή τη φορά αντί να
δηµιουργήσουµε από την αρχή το στοιχείο λίστας απλώς αντιγράφουµε το
ήδη υπάρχον και το κολλάµε στο αντίστοιχο κελί. Μόνο που χρειάζεται να
αλλάξουµε το όνοµα του στοιχείου το οποίο θα ονοµάσουµε air_arriv.
Στην επόµενη σειρά τοποθετούµε την ηµεροµηνία αναχώρησης για το οποίο

θα χρειαστεί να δηµιουργήσουµε τρία στοιχεία λίστας, ένα για τους µήνες,
άλλο για τις µέρες και το άλλο για τις ώρες, σύµφωνα µε το παράδειγµα και
ακολουθώντας τη µέθοδο που εξηγήσαµε νωρίτερα τα οποία θα ονοµάσουµε

month_a, day_a, και hours_a αντίστοιχα.
Κουµπί Θα δούµε τώρα το “Είδος Ταξιδίου”. Εδώ θα έχουµε δύο επιλογές: µπορεί να
Επιλογής είναι µόνο µίας κατεύθυνσης ή επιστροφής. Για να το λύσουµε αυτό
χρησιµοποιούµε ένα κουµπί επιλογής.
Τα κουµπιά επιλογής υποδεικνύουν µία οµάδα σχετιζόµενων επιλογών.
Μέσα σε µία οµάδα επιλογών, όταν επιλέγουµε κάποια από αυτές

ακυρώνονται αυτόµατα οι υπόλοιπες. Για να προσδιορίσουµε µία ίδια οµάδα
κουµπιών πρέπει να χρησιµοποιήσουµε το ίδιο όνοµα για τη κάθε οµάδα.
Χρησιµοποιώντας το µενού Insert / Form Objects / Radio Button εισάγουµε το

κουµπί επιλογής στο αντίστοιχο κελί. Το όνοµα του κουµπιού θα είναι travel
και η ενεργοποιηµένη αξία θα είναι χωρίς επιστροφή (για το κουµπί µονής
κατεύθυνσης) ή µε επιστροφή (για το κουµπί εισιτηρίου µε επιστροφή).
Yπενθυµίζουµε πως το όνοµα του κουµπιού πρέπει να είναι το ίδιο. Η
ενεργοποιηµένη αξία είναι αυτή που θα στείλει η φόρµα στο CGI για την
ανάλυση.
O επιθεωρητής ιδιοτήτων του radio button µε προεπιλεγµένη την

τιµή «Χωρίς επιστροφή»
Στην περίπτωση που ο χρήστης διαλέξει την επιλογή Με επιστροφή, θα πρέπει

να καθορίσει επίσης την ηµεροµηνία επιστροφής. Έτσι, αντιγράφουµε τις
λίστες που δηµιουργήσαµε προηγουµένως για την ηµεροµηνία αναχώρησης
και τις κολλάµε στα αντίστοιχα κελιά µε τα ονόµατα month_e, day_e, και
hours_e, αντίστοιχα.
Στην επιλογή Πτήση, πρέπει να δηµιουργήσουµε µία λίστα/µενού που να

περιέχει τις επιλογές Οικονοµική, Business, Πρώτη.
∆οκιµάστε τώρα να δηµιουργήσουν οι µαθητές από µόνοι τους,

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

Ορισµένες αεροπορικές εταιρίες που θα µπορούσαν να περιέχονται στη λίστα

µας είναι οι εξής: British Airways, Dinar, Delta κτλ.
Ο χρήστης θα έχει επίσης τη δυνατότητα να µην επιλέξει καµµία από αυτές.

Σε αυτή την περίπτωση θα µπορεί να επιλέξει από τη λίστα «Χωρίς
προτίµηση».
Οι πτήσεις µπορούν να οργανωθούν σε σχέση µε τον αριθµό αντοποκρίσεων

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

χρήστες και στέλνει ένα κείµενο ASCII στη διεύθυνση που καθορίζεται στο
πεδίο Ενέργεια. Το κουµπί Καθαρισµός σβήνει όλες τις πληροφορίες από τα
πεδία της σελίδας.
Για να τοποθετήσουµε τα κουµπιά, βάζουµε το βελάκι στη τελευταία σειρά

του πίνακά µας και επιλέγουµε Ιnsert / Form Objects / Button. Εισάγεται ένα
κουµπί αποστολή στο ερωτηµατολόγιο ενώ ο Επιθεωρητής ιδιοτήτων
εµφανίζεται µε τις ιδιότητες του κουµπιού.
Επιθεωρητής Ιδιοτήτων κουµπιού Αναζήτησης
Στο πεδίο κειµένου Label γράφουµε Αναζήτηση.
Μετά εισάγουµε άλλο κουµπί το οποίο θα ονοµάσουµε Καθαρισµός και στο

οποίο θα δώσουµε την ενέργεια του Καθαρισµού της φόρµας.
Στη πραγµατικότητα, όταν εµείς στέλνουµε τις πληροφορίες, ο διακοµιστής

θα απαντήσει µε ένα νέο µήνυµα στην οθόνη. Η περίπτωση αυτή δε θα
εξεταστεί στο συγκεκριµένο το µάθηµα.

Τελική µορφή της φόρµας
Περιλήψη Μάθαµε πως να ανοίγουµε σελίδες ήδη δηµιουργηµένες σε πλαίσια, πως να

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

Μάθηµα 10
Ένθετα Πλαίσια – Κοινό κείµενο και Κείµενο Flash
Περιγραφή: Οι µαθητές θα µάθουν πως να τοποθετούν κείµενα και εικόνες απ’ευθείας

πάνω στο φόντο της σελίδας χωρίς να χρησιµοποιήσουν πίνακες ή
στρώσεις. Έπειτα θα δουν πως να τοποθετούν ένθετα πλαίσια µέσα στην
τωρινή δοµή της σελίδας και, τέλος, θα εξετάσουν τις διαφορές ανάµεσα σε
κείµενο φτιαγµένο µε Flash και σε απλό HTML κείµενο στο Dreamweaver.
Στόχοι: Εισαγωγή κειµένου και διανοµή εικόνων απ’ευθείας πάνω στο φόντο της
σελίδας
Χρήση ενθέτων
∆ηµιουργία κειµένου σε Flash για επίτευξη ειδικών εφφέ
Σελίδα Τρένα Η ιστοσελίδα µε τα τρένα θα περιέχει εικόνα και κείµενο . Αυτή τη φορά δε
θα χρησιµοποιήσουµε πίνακες προκειµένου να τοποθετήσουµε την εικόνα και
το κείµενο απ’ευθείαν πάνω στο φόντο της οθόνης.
Όπως και προηγούµενως, θα χρειαστεί να δηµιουργήσουµε µία καινούργα

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

ιστοσελίδας Τρένα. Όπως και µε τη σελίδα Airplane, δε θα χρησιµοποιήσουµε
εικόνα φόντου και χρώµα. Το όνοµα του συνόλου πλαισίων θα είναι
F_trains.htm ακολουθώντας το µηχανισµό ονοµασίας των σελιδών µας. Και τα
δύο αρχεία θα αποθηκευτούν στο φάκελο Trains του δικτυακού µας τόπου.
Για να συνθέσουµε τη σελίδα εισάγουµε πρώτα την εικόνα train1.jpg

(θυµηθείτε πως πρέπει πάντα να αποθηκεύουµε την εικόνα στο φάκελο της
ιστοσελίδας µας για να σιγουρευτούµε πως θα είναι διαθέσιµη την ώρα
δηµοσίευσης της σελίδας). Όταν µας ζητήσει το πρόγραµµα Dreamweaver να
αποθηκεύσουµε την εικόνα την αποθηκεύουµε στο φάκελο Train.
Στη συνέχεια εισάγουµε την εικόνα train2.jpg που επίσης έχουµε αποθηκεύσει
στον ίδιο φάκελο.
Θα προσέξουµε πως η πρώτη εικόνα εµφανίζεται κάτω από τη δεύτερη και όχι
πάνω όπως µας δείχνει το παράδειγµα. Θα χρειαστεί λοιπόν να αλλάξουµε την
ευθυγράµµιση της εικόνας train1.jpg.
Κάνουµε ένα κλικ για να επιλέξουµε την εικόνα αυτή και έπειτα στον
επιθεωρητή ιδιοτήτων επιλέγουµε την αριστερή ευθυγράµµιση (left

alignment). Πετυχαίνουµε κατ’αυτό το τρόπο το αποτέλεσµα που επιθυµούµε.
Αλλαγή ευθυγράµµισης στον επιθεωρητή ιδιοτήτων
Εισαγωγή Για να εισάγουµε το κείµενο, πατάµε Enter µετά από την εικόνα του τρένου
κειµένου και πληκτρολογούµε :
Στο Web Tour έχουµε στη διάθεσή σας ότι χρειάζεστε για να ταξιδέψετε.
Γι’αυτό θα βρείτε σε όλα µας τα γραφεία όλων των ειδών ταξίδια µε τρένο για
εσωτερικό ή εξωτερικό.
Και το πιο σηµαντικό: Σας παραδίδουµε το εισιτήριο αµέσως χωρίς επιπλέον

χρέωση!
Για να πληκτρολογήσουν το κείµενο θα πρέπει να αλλάξουν γραµµή πατώντας

Shift και Enter.
Οι µαθητές µπορούν επίσης να ανοίξουν το αρχείο train.doc , να αντιγράψουν
το κείµενο και να το αντιγράψουν απ’ευθείας στο Dreamweaver.
Έπειτα µπορούν να αλλάξουν τη γραµµατοσειρά, το µέγεθός της και να

προσθέσουν χρώµα.
Η τελικά σελίδα πρέπει να δείχνει ως εξής:

Τελική όψη σελίδας τρένων
Μην ξεχάσετε ότι πρέπει να έχετε ήδη αποθηκεύσει το σύνολο πλαισίων

F_trains.htm!
Σελίδα Week Σ’αυτή τη σελίδα δε θα ακολουθήσουµε την διαδικασία που ακολουθούσαµε
End στις προηγούµενες σελίδες, (τοποθέτηση του ποντικιού πάνω σε µία επιλογή)
αλλά θα χωρίσουµε τη σελίδα προσθέτoντας ένα πλαίσιο µέσα στο οποίο θα
αναπτύξουµε τα θέµατα που ο χρήστης θα έχει επιλέξει από αριστερά.
Σαν πρώτο βήµα, θα χρειαστεί να δηµιουργήσουµε µία καινούργια σελίδα, να

προσθέσουµε τα πλαίσια και να ανοίξουµε στο αριστερό και άνω πλαίσιο τις
σελίδες που αντιστοιχούν στις γραµµές πλοήγησης.
Επαναλαµβάνοντας συνοπτικά αυτή τη διαδικασία, αφού δηµιουργήσουµε τα
πλαίσια, κάνουνµε κλικ στο αριστερό πλαίσιο και επιλέγοντας File / Open in
Frame ανοίγουµε το vnb.htm. Tην ίδια διαδικασία ακολουθούµε και για την
πάνω µπάρα. Την επιλέγουµε και πάλι από το µενού File / Open in Frame,
αυτή τη φορά ανοίγουµε το hnb.htm.
Για τη νέα σελίδα περιεχοµένων κάνουµε κλικ στο τµήµα δεξιά κάτω.
H νέα σελίδα θα ονοµαστεί weekend.htm µε όνοµα ιστοσελίδας Week End και
θα αποθηκευτεί στο φάκελο weekend.
∆ε θα χρησιµοποιήσουµε εικόνα φόντου ούτε χρώµα (καθώς πρόκειται για

σχεδιασµό ο µαθητής έχει το δικαίωµα, αν θέλει, να χρησιµοποιήσει χρώµατα
ή εικόνα φόντου).
Το όνοµα του συνόλου των πλαισίων θα είναι F_WeekEnd.htm,

ακολουθώντας το πρότυπο ονοµασίας των ιστοσελίδων µας που αποτελούν
σύνολα πλαισίων. Και τo σύνολο πλαισίων θα αποθηκευτεί στο φάκελο
WeekEnd της ιστοσελίδας µας.

Τοποθέτηση Τοποθετούµαστε τώρα στο πλαίσιο που αντιστοιχεί στην επιφάνεια

ένθετου περιεχοµένων, στο πλαίσιο δηλαδή που θα εµφανίζεται η σελίδα Week End.
πλαισίου
Εισαγωγή δεξί πλαισίου σε σελίδα που αποτελεί τµήµα συνόλου
πλαισίων
Θα χωρίσουµε αυτό το πλαίσιο σε δύο µέρη. Για να το κάνουµε θα χρειαστεί

να χρησιµοποιήσουµε την εργαλειοθήκη πλαισίων και να επιλέξουµε
“εισαγωγή δεξί πλαισίου”. Αυτό θα δηµιουργήσει ένα πλαίσιο στα δεξιά µας,
µε µία νέα σελίδα την οποία πρέπει να αποθηκεύσουµε και την οποία θα
ονοµάσουµε προς το παρόν Content 1.htm αποθηκεύοντας την στο φάκελο
WeekEnd.
Θα χρειαστεί να επιστρέψουµε και να αποθηκεύσουµε το σύνολο των

πλαισίων.
Στο αριστερό πλαίσιο (που αντιστοιχεί στη σελίδα Week End) εισάγουµε ένα
πίνακα µε µία στήλη και δέκα σειρές. Στη πρώτη σειρά εισάγουµε την εικόνα
weekend.jpg και την βάζουµε στο κέντρο του κελιού. Έπειτα
τοποθετούµαστε στη τέταρτη σειρά.

Εισαγωγή πίνακα και εικόνας στη σελίδα weekend
Κείµενο Flash Θα µάθουµε να δηµιουργούµε κείµενο χρησιµοποιώντας τεχνολογία Flash

απ’ευθείας µέσω του Dreamweaver.
Πάµε στο µενού Insert / Interactive Images / Flash Text
Εµφανίζεται ένα πλαίσιο διαλόγου στο οποίο γράφουµε το κείµενο,

συµπληρώνοντας τα χρώµατα Color και Rollover Color, και επιλέγοντας τη
γραµµατοσειρά που θέλουµε (πρόκειται για ένα παράθυρο όπου γράφουµε
απ’ευθείας στο Dreamweaver όπου το σύνολο και το µέγεθος των
γραµµατοσειρών είναι πολύ περιορισµένα).

Εισάγουµε για κείµενο τη λέξη Entertainment επιλέγοντας δύο χρώµατα που

να διαφέρουν σε τόνο και σε µέγεθος γραµµάτων ανάµεσα στο 25 και στο 30.
Αργότερα θα δούµε και το κοµµάτι των συνδέσεων.
To πλαίσιο διαλόγου του Flash Text µε τις ανάλογες ρυθµίσεις
Το όνοµα του στοιχείου (που θα τοποθετηθεί στη βάση του παραθύρου που
έχουµε ανοίξει) θα είναι entertainment.swf.
Ολοκληρώνουµε τη διαδικασία δηµιουργώντας τα κείµενα σε flash και για τα

εξής θέµατα: Theme Parks, Fishing , Excursions.
Καθώς θα χρησιµοποιούµε τις ίδιες γραµµατοσειρές και συνδυασµούς

χρωµάτων, µπορούµε να αντιγράψουµε και έπειτα να επικολλήσουµε το
πρώτο µας κείµενο. Με διπλό κλικ πάνω του µπορούµε να το επεξεργαστουµε
για να αλλάξουµε το κείµενο και το όνοµα του αρχείου.
Σηµαντικό: Αν ακολουθήσετε τη διαδικασία αυτή, µη ξεχάσετε να αλλάξετε το όνοµα του

αρχείου.
Για την ονοµασία θα χρησιµοποιήσουµε το ίδιο πρότυπο µε πριν.

Είναι σηµαντικό σ’αυτό το σηµείο του σχεδιασµού να χρησιµοποιήτε συχνά τη

προεπισκόπηση (preview) του εξερευνητή. Αν η απόσταση των διαφόρων
επιλογών είναι µεγαλύτερη απ’ότι θα έπρεπε, ο πλοηγητής θα λανσάρει
αυτόµατα τις γραµµές πλάγιας µετακίνησης. Αν δε θέλουµε να συµβεί αυτό,
θα πρέπει να παίξουµε µε τις γραµµατοσειρές (το µέγεθός τους) και µε την
απόσταση ανάµεσα στις σειρές για να οριοθετήσουµε το χώρο.
Συνδέσεις Από τις πιθανές συνδέσεις θα δηµιουργήσουµε µόνο αυτή που πρέπει να
εµφανίζεται στη φόρτωση της σελίδας και αυτή που αντιστοιχεί στο
Entertainment. Αν περισσεύει ο χρόνος µαθήµατος µπορούν οι µαθητές να
δηµιουργήσουν τις υπόλοιπες σελίδες ακολουθώντας την ίδια διαδικασία που
εξηγείται στη συνέχεια.
Τοποθετούµε το βελάκι στην επιφάνεια της σελίδας που αντιστοιχεί στο
Content1.htm (δεξί πλαίσιο). Έπειτα τοποθετούµε την εικόνα thinking.jpg και
τη κεντράρουµε στο διαθέσιµο χώρο. Αυτό είναι το περιεχόµενο που ο
πλοηγητής θα πρέπει να βλέπει µπαίνοντας στη σελίδα:
Θα δηµιουργήσουµε τώρα µία νέα σελίδα µε τον τρόπο που µάθαµε (µενού
File / Νew και ανοίγουµε ένα νέο έγγραφο) την οποία θα ονοµάσουµε
Content2.htm. Αποθηκεύουµε στο φάκελο WeekEnd και κλείνουµε τη σελίδα.
Η συγκεκριµένη σελίδα θα χρησιµοποιηθεί για να δηµιουργήσουµε το
περιεχόµενο που αντιστοιχεί στη σύνδεση Entertainment. Καθώς όµως
πρόκειται για µία σελίδα που θα ανοίγει σε πλαίσιο, αν ξεκινήσουµε να τη
σχεδιάζουµε απ’αυτό το σηµείο τότε διατρέχουµε τον κίνδυνο του να µη
χωράει στο πλαίσιο. Αυτό που θα κάνουµε λοιπόν µόλις αποθηκεύσουµε την
σελίδα, είναι να τη κλείσουµε και να επιστρέψουµε στη βασική µας σελίδα
(που πρέπει πάντα να είναι ανοιχτή), F_WeekEnd.htm, όπου τοποθετούµαστε
στο πλαίσιο που είναι τώρα η σελίδα Content1.htm. Από το File / Open in

Frame επιλέγουµε τη σελίδα Content2.htm στο δίπλα πλαίσιο.
Έτσι, η σελίδα Content 2.htm θα ανοίξει στο πλαίσιο όπου αργότερα θα τη

συνδέσουµε και θα µπορέσουµε να σχεδιάσουµε τη σελίδα µε την ασφάλεια
του ότι θα χωρέσει στο χώρο που της έχει ανατεθεί.
Σηµαντικό: Όσο δουλεύουµε µε τη σελίδα Content 2.htm δε θα πρέπει να

αποθηκεύσουµε το σύνολο των πλαισίων. Θα πρέπει να αποθηκεύσουµε µόνο
τη σελίδα Content 2.htm. Αν αποθηκεύσουµε το σύνολο των πλαισίων θα
αντικαταστήσουµε τη σελίδα Content 1.htm στην αρχική µας όψη.
Επιστρέφοντας στη σελίδα Content 2.htm εισάγουµε ένα πίνακα µε µία στήλη
και τέσσερις σειρές. Στη πρώτη εισάγουµε την εικόνα thanassis.jpg. To
Dreamweaver µας ζητάει να µεταφέρει την εικόνα σε κάποιο από τους
φακέλους του καθορισµένου µας δικτυακού τόπου. Αποθηκεύουµε την εικόνα
στο φάκελο Weekend. Στις υπόλοιπες άλλες το παρακάτω κείµενο:
Ο Θανάσης Παπακωνσταντίνου σε Συναυλία

7 και 8 Σεπτεµβρίου - Θέατρο Πέτρας
Εισιτήρια σε όλα τα κεντρικά δισκοπωλεία
Έπειτα αποθηκεύουµε µόνο αυτό το πλαίσιο. Έτσι τελειώνουµε τη σελίδα που

θα πρέπει αργότερα να συνδέσουµε.
Η τελική µορφή της σελίδας content2.htm
Περίληψη Μάθαµε πως να εισάγουµε και να ευθυγραµµίζουµε κείµενα και εικόνες

απ’ευθείας πάνω στο φόντο της σελίδας χωρίς να χρησιµοποιήσουµε στρώσεις
ή πίνακες. Επιπλέον δηµιουργήσαµε ένα ένθετο πλαίσιο µέσα σ’ένα άλλο
πλαίσιο έτσι ώστε να µπορεί να γίνει η σύνδεση µέσα στο ίδιο το πλαίσιο.
Μελετήσαµε επίσης την επιλογή του Dreamweaver για δηµιουργία κειµένου
σε Flash, έχοντας τη δυνατότητα επιλογής χρωµάτων, γραµµατοσειράς και
µεγέθους.

Μάθηµα 11
Εξάσκηση σχεδιασµού µε Πίνακες
Περιγραφή: Οι µαθητές θα εξασκηθούν στο σχεδιασµό χρησιµοποιώντας πίνακες από

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

Σελίδα Θα δηµιουργήσουµε µια σελίδα µε βασικές πληροφορίες για ξενοδοχεία σαν

Ξενοδοχεία περιεχόµενο και µε µία φόρµα.
Σαν πρώτο βήµα, θα χρειαστεί να δηµιουργήσουµε µία νέα σελίδα, να

χρησιµοποιήσουµε πλαίσια και να ανοίξουµε στο αριστερό και άνω πλαίσιο τις
σελίδες που αντιστοιχούν στις γραµµές πλοήγησης.
Το έγγραφο ή νέα σελίδα θα ονοµαστεί hotels.htm µε όνοµα σελίδας

Ξενοδοχεία.
∆εν θα χρησιµοποιήσουµε εικόνα φόντου ή χρώµα (αλλά καθώς πρόκειται για

σχεδιασµό οι µαθητές έχουν το δικαίωµα επιλογής χρωµάτων ή εικόνας
φόντου αν το επιθυµούν).
Το όνοµα του συνόλου των πλαισίων θα είναι F_Hotels.htm, ακολουθώντας

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

εισάγουµε ένα πίνακα µε τέσσερις στήλες και δεκαπέντε σειρές στη σελίδα
Hotels.htm.

Το σύνολο πλαισίων µε τη σελίδα των ξενοδοχείων
Ενώνουµε τα κελιά στη πρώτη σειρά και εισάγουµε το τίτλο για τον οποίο
χρησιµοποιούµε την εικόνα Hotels.jpg.
Για να ενώσουµε τα κελιά τα επιλέγουµε και πατάµε το κουµπί συγχώνευσης

κελιών στον επιθεωρητή ιδιοτήτων.
Συγχώνευση κελιών

Στη συνέχεια, ενώνοντας και χωρίζοντας κελιά οι µαθητές θα πρέπει να

αναπαράγουν βήµα βήµα τον πίνακα που περιγράφεται παρακάτω.
Αφού συµπληρώσουν το περιεχόµενο αφήστε τους να δώσουν οι ίδιοι µορφή

στο πίνακα.
Η γραµµατοσειρά που χρησιµοποιήτε σε όλες τις περιπτώσεις είναι µέγεθους 2

και Arial, Helvetica....
Υπενθυµίστε στους µαθητές ότι δεν πρέπει ο πλοηγητής να εµφανίζει τις

γραµµές οριζόντιας πλοήγησης, έτσι ώστε να καθορίσουν ένα πλάτος για το
πίνακα που να χωράει σε µια οθόνη.
Θα δουλέψουµε τώρα πάνω στη πρώτη στήλη του πίνακά µας.
Επιλέγουµε τα κελιά των οκτώ στηλών της πρώτης σειράς και έπειτα τα
συγχωνεύουµε. Πληκτρολογούµε «Ξενοδοχεία» και µορφοποιούµε αναλόγως.
Επιλέγουµε τα κελιά των οκτώ στηλών της δεύτερης σειράς και
συγχωνεύουµε ξανά εισάγοντας την εικόνα photohotels.jpg.
Κεντράρουµε και µορφοποιούµε ανάλογα.

Ο πίνακας στη σελίδα hotels
Kάνουµε κλικ στο αριστερό µεγάλο κελί που δηµιουργήσαµε και εισάγουµε
την εικόνα hotels.jpg. Υπενθυµίζουµε πως κάθε φορά που εισάγουµε µία
εικόνα το Dreamweaver µας ζητάει να την αποθηκεύσουµε στην σελίδα web
που δηµιουργούµε. Σ’αυτή τη περίπτωση, αποθηκεύουµε την εικόνα στο
φάκελο Ηοtels.
Επιλέγουµε το αµέσως επόµενο κελί και τα υπόλοιπα της ίδιας σειράς και
συγχωνεύουµε. Πληκτρολογούµε το εξής κείµενο:Αν θέλετε να ξέρετε ποια
ξενοδοχεία είναι στη διάθεσή σας µε τα κουπούνια Week End Plan,
χρησιµοποιήστε τη µηχανή αναζήτησης
Κουµπιά Flash Θα δηµιουργήσουµε ορισµένα κουµπιά σε Flash έτσι όπως δηµιουργήσαµε για
τις γραµµές πλοήγησης. Ένα από αυτά θα είναι το κουµπί που θα µας
συνδέσει µε τη µηχανή αναζήτησης ενώ µε το άλλο δίνεται η δυνατότητα
αγοράς κουπονιών ξενοδοχείου στο χρήστη. Και στις δύο περιπτώσεις θα
χρησιµοποιήσουµε τα µοντέλα κουµπιών e-commerce της βιβλιοθήκης flash
Dreamweaver (ή αυτά που προτιµά ο χρήστης). Για το κουµπί της
αναζήτησης θα επιλέξουµε το e-commerce generic, σαν κείµενο του κουµπιού

θα πληκτρολογήσουµε Search ενώ το όνοµά του θα είναι search.swf. Για το

δεύτερο κουµπί θα επιλέξουµε το e-commerce cart µε κείµενο Buy και όνοµα
buy.swf αντίστοιχα.
Τελική σελίδα hotels
Σελίδα Η σελίδα αυτοκινήτων είναι παρόµοια µε αυτή που πρόσφατα κατασκεύασαµε

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

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

Αυτοκίνητα.
∆εν θα χρησιµοποιήσουµε εικόνα φόντου ή χρώµα (αλλά καθώς πρόκειται για

σχεδιασµό οι µαθητές έχουν το δικαίωµα επιλογής χρωµάτων ή εικόνας
φόντου αν το επιθυµούν).
Το όνοµα του συνόλου πλαισίων θα είναι F_Cars.htm, ακολουθώντας το

πρότυπο ονοµατολογίας των σελιδών µας. Και τα δύο αρχεία θα

αποθηκευτούν στο φάκελο cars του δικτυακού µας τόπου.
Όπως και πριν, για την καλυτέρευση του σχεδιασµού µας θα

χρησιµοποιήσουµε πίνακες.
Εισάγουµε ένα πίνακα µε δύο στήλες και ένα αριθµό σειρών x, για παράδειγµα
4. Αν χρειαστούµε επιπλέον απλώς, όπως και στο Word, πατάµε το πλήκτρο
Tab µε το βελάκι στο τελευταίο κελί.
Ενώνουµε τα κελιά της πρώτης σειράς και εισάγουµε την εικόνα cars.jpg
δίνοντας κατ’αυτό το τρόπο ένα τίτλο στη σελίδα µας.
Στη δεύτερη σειρά γράφουµε στο πρώτο κελί τα παρακάτω:
Xαρείτε τις δυνατότητες ενοικίασης αυτοκινήτων που σας προσφέρει το Web

Tour µέσα στο εθνικό δίκτυο
Έπειτα καθοδηγήστε τους µαθητές στο να δηµιουργήσουν το παρακάτω

πίνακα (πίνακας δίχως format). Η εικόνα είναι η carrental.jpg

Η σελίδα cars.htm
Μόλις καταφέρουν να σχεδιάσουν το πίνακα, επιτρέψτε στους µαθητές να

ανασχεδιάσουν τη σελίδα έτσι ώστε να µοιάζει µε το παρακάτω παράδειγµα.
Αλλάξτε το χρώµα και τη γραµµατοσειρά και διαγράψτε γραµµές και στήλες
αναλόγως. (Επιλέγοντας κελιά κάνοντας δεξί κλικ και Delete (rows η columns)

Τελική σελίδα αυτοκινήτων
Σελίδα Σαν πρώτο βήµα πρέπει να δηµιουργήσουµε τη σελίδα µας µε το σύνολο

Exclusive πλαισίων και τις κάθετες και οριζόντιες γραµµές πλοήγησης στις οποίες θα
ονοµάσουµε Exclusive.htm και F_Exclusive.htm.
Φυσικά το όνοµα της σελίδας θα είναι Αποκλειστικά και οι µαθητές θα

µπορούν να επιλέξουν αν θα βάλουν φόντο στη σελίδα.
Σαν άσκηση, οι µαθητές θα πρέπει να χρησιµοποιήσουν πίνακες προκειµένου

να πετύχουν ένα παρόµοιο σχεδιασµό µε αυτό που φαίνεται στο παράδειγµα.
Τα αρχεία εικόνας που χρησιµοποιούνται είναι τα εξής:
bal2.jpg
golf2.jpg
melia2.jpg
beaches2.jpg
prodex.jpg
farm2.jpg
wep2.jpg

Tελική σελίδα cars.htm
Περίληψη Στο τέλος του µαθήµατος, οι µαθητές θα χειρίζονται τέλεια το σχεδιασµό

σελίδας µέσω της χρήσης των πινάκων, µαθαίνοντας πως να ενώνουν κελιά,
σειρές και στήλες και να χρησιµοποιούν διάφορα formats.

Μάθηµα 12
Πρότυπα
Περιγραφή: Όταν τµήµατα ιστοσελίδων σε ένα δικτυακό τόπο επαναλαµβάνονται, το

Dreamweaver µας παρέχει τη δυνατότητα χρησιµοποίησης προτύπων. Θα
µάθουµε εδώ πως να δηµιουργούµε, να αποθηκεύουµε και να
χρησιµοποιούµε τα πρότυµα στο σχεδιασµό του δικτυακού µας τόπου
Στόχοι: Να αναγνωρίσουµε την ανάγκη εργασίας µε πρότυπα

Να µάθουµε να δηµιουργούµε και να αποθηκεύουµε πρότυπα
Να µάθουµε πως να τροποποιούµε υπάρχοντα πρότυπα
Πρότυπα Αν προσέξουµε το σχεδιάγραµµά µας, οι σελίδες προς σύνδεση σε ένα «τρίτο

επίπεδο» παρουσιάζουν όλες την ίδια δοµή: ένα λογότυπο, µία επεξήγηση και
ίσως µία καινούργια επιλογή σύνδεσης.
Σ’αυτή τη περίπτωση η χρήση προτύπων διευκολύνει πολύ τον σχεδιαστή της
ιστοσελίδας.
Όταν πρέπει να δηµιουργήσουµε µία νέα σελίδα µε όµοια σχεδίαση (και όχι
σύνολο πλαισίων) µε άλλες, η εργασία γίνεται πιο εύκολη µε τη χρήση
προτύπων. Με ένα πρότυπο µπορούµε να αλλάξουµε ή να ανανεώσουµε την
όψη του δικτυακού µας τόπου, αλλάζοντας πολλές σελίδες ταυτόχρονα
εξοικονοµώντας κόπο και χρόνο.
Σε ένα πρότυπο µπορούµε να καθορίσουµε επιφάνειες επεξεργάσιµες ή

κλειδωµένες. Όταν µια επιφάνεια είναι κλειδωµένη δεν µπορεί να αλλάξει
παρά µόνο από το πρότυπο µε το οποίο συνδέεται.
Για παράδειγµα, αν µία σελίδα περιέχει ένα κοµµάτι πλοήγησης µε γραφικές

συνθέσεις, το συγκεκριµένο τµήµα της σελίδας µπορεί να οριστεί στο
πρότυπο και έπειτα να κλειδωθεί. Αν οι συνδέσεις αλλάξουν, απλώς
αλλάζουµε το πρότυπο ενώ οι ιστοσελίδες που συνδέονται µε αυτό
ανανεώνονται αυτόµατα.
Τα πρότυπα είναι επίσης χρήσιµα όταν δουλεύουµε οµαδικά για τη δηµιουργία
µιας ιστοσελίδας. Ο σχεδιαστής µπορεί να δηµιουργήσει ένα πρότυπο και να
ορίσει κάποιες περιοχές της σελίδας σαν επεξεργάσιµες. Έτσι η υπόλοιπη
οµάδα θα γνωρίζει πια σηµεία µπορεί να «πειράξει» και πια όχι. Ο γενικός
σχεδιασµός της σελίδας παραµένει άθικτος.
Μπορούµε να δηµιουργήσουµε ένα εντελώς καινούργιο πρότυπο ή να

χρησιµοποιήσουµε µία υπάρχουσα σελίδα HTML και να την αποθηκεύσουµε

σαν πρότυπο. Στις περιοχές που πρέπει να αλλάξουν σε κάθε σελίδα, απλώς
σηµαδεύουµε το περιεχόµενο ως επεξεργάσιµο.
Θα δηµιουργήσουµε ένα πρότυπο για τις σελίδες που αφορούν τα

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

χρησιµοποιώντας στρώσεις και πίνακες ανάλογα µε τις προτιµήσεις τους. Για
την σελίδα οι µαθητές µπορούν να χρησιµοποιήσουν τις εικόνες farm2.jpg και
Greece.jpg. Μόλις το κάνουν αυτό, θα χρειαστεί να την αποθηκεύσουν σαν
rural.htm στον φάκελο Exclusive_Products. Θυµηθείτε να µην αποθηκεύσετε
τη σελίδα πλαισίων εφ’όσον τα χρησιµοποιήσαµε µόνο σαν οδηγό για τη
κατασκεύη αυτής της σελίδας.
H τελική µορφή της σελίδας rural.htm
Έχοντας αποθηκεύσει τη σελίδα, επιλέγουµε File /Save As Template. Tο

πλαίσιο διαλόγου Save As Template εµφανίζεται. Ονοµάζουµε το πρότυπο –
σ’αυτή τη περίπτωση Exclusive_pr- εφ’όοσον είναι αυτό που θα

χρησιµοποιήσουµε για όλα τα προϊόντα του µενού Exclusive, και κάνουµε κλικ
στο αποθήκευση (Save).
To πλαίσιο διαλόγου αποθήκευσης του template
Το πρότυπο προστίθεται στην ιστοσελίδα και αποθηκεύεται στο φάκελο

Templates µε το προέκταση αρχείου dwt. Το Dreamweaver δηµιουργεί το
φάκελο Templates αν δεν υπάρχει ήδη.

To DreamWeaver δηµιουργεί αυτόµατα ένα φάκελο όπου

αποθηκεύονται τα αρχεία .dwt (templates)
Νέο Πρότυπο Αντί να δηµιουργήσουµε µία σελίδα και να την αποθηκεύσουµε σαν πρότυπο,
µπορούµε να δηµιουργήσουµε ένα νέο πρότυπο για το οποίο:
1. Επιλέγουµε Window / Templates. Ανοίγει ο ενεργός πίνακας µε

επιλεγµένη τη κατηγορία Templates.
2. Κάνουµε κλικ στο New Template από το αναδυόµενο µενού που
εµφανίζεται πατώντας στο βελάκι στο πάνω δεξιά µέρος του πίνακα.
Προστίθεται ένα νέο πρότυπο χωρίς τίτλο στη λίστα των προτύπων
του ενεργού πίνακα.
3. Με το πρότυπο επιλεγµένο γράφουµε ένα όνοµα.

∆ηµιουργία νέου template από τον πίνακα Assets
Πως να Προεπιλεγµένα, όλες οι περιοχές στο πρότυπο είναι κλειδωµένες. Αν θέλουµε

προσθέσουµε να µπορούµε να αλλάζουµε πληροφορίες σε όλες τις σελίδες που
επεξεργάσιµες χρησιµοποιούν το πρότυπο, πρέπει να δηµιουργήσουµε «επεξεργάσιµες»
περιοχές σε ένα επιφάνειες ή περιοχές.
πρότυπο:
Ότι δεν είναι προκαθορισµένο σαν επεξεργάσιµο, είναι κλειδωµένο. Μπορούν
να γίνουν αλλαγές τόσο στις επεξεργάσιµες περιοχές ενός προτύπου όσο και
στις κλειδωµένες, αλλά σε µία σελίδα κατασκευασµένη βάση ενός προτύπου,
µπορούν να γίνουν αλλαγές µόνο στις επεξεργάσιµες περιοχές.
Μέσω του Πίνακα Assets και κάνοντας διπλό κλικ πάνω του, το πρότυπο
ανοίγει και βρισκόµαστε σε κατάσταση που µπορούµε να επεξεργαστούµε.
Καθορίζοντας Θα καθορίσουµε τη περιοχή εικόνας επεξεργάσιµη κάνοντας τα εξής:

µία περιοχή σαν
επεξεργάσιµη. 1. Επιλέγουµε το κελί που βρίσκεται η εικόνα
2. Επιλέγουµε Modify / Template / New Editable Region. Ανοίγει το
πλαίσιο διαλόγου New Editable Region.
3. Γράφουµε περιγραφική εικόνα σαν όνοµα. Έπειτα κάνουµε κλικ στο
Αccept.
Σηµειώσεις για Μην χρησιµοποιήτε ειδικούς χαρακτήρες στα ονόµατα των περιοχών. Επίσης,

τον το κάθε όνοµα πρέπει να είναι µοναδικό, δεν µπορούµε να επαναλάβουµε το

εκπαιδευτή: ίδιο όνοµα περιοχής στο ίδιο πρότυπο.
4. Επαναλαµβάνουµε το ίδιο µε τη ζώνη κειµένου όπου γράφουµε

περιγραφικό κείµενο και µε την εικόνα του χάρτη όπου γράφουµε
εικόνα διακόσµησης
5. Αποθηκεύουµε το αρχείο
Αν επιλέξουµε το κελί του πίνακα ή τη στρώση την ώρα που καθορίζουµε την
επεξεργάσιµη περιοχή, το όνοµα της περιοχής θα εµφανιστεί στη πάνω
αριστερή γωνία του κελιού ή της στρώσης. Αν η γραµµή ήταν µέσα στο κελί
όταν καθορίζαµε την επεξεργάσιµη περιοχή, το όνοµα εµφανίζεται στο πάνω
µέρος αριστερά καθώς και µέσα στο κελί µέσα σε κλειδιά. Όταν εφαρµόζουµε
το πρότυπο σε άλλο έγγραφο µόνο πρέπει να αντικαταστήσουµε τα κλειδιά µε
κείµενο, εικόνες ή άλλο περιεχόµενο.
H σελίδα µας αφού έχουµε καθορίσει τις επεξεργάσιµες περιοχές

Σηµειώσεις για Αν δεν µπορούµε να δούµε τα ονόµατα περιοχών, επιλέγουµε View / Visual
τον Aids / Invisible Elements.
εκπαιδευτή:
∆ηµιουργία Το παράδειγµα που ακολουθεί µπορεί να εφαρµοστεί στη δηµιουργία

σελίδας βάση οποιασδήποτε από τις υπόλοιπες σελίδες των αποκλειστικών προϊόντων.
ενός προτύπου
Καθώς έχουµε ήδη καθορίσει το µέγεθος της σελίδας µας όταν φτιάξαµε το
πρότυπο, δεν θα χρειαστεί να σχεδιαστούν οι υπόλοιπες σελίδες
χρησιµοποιώντας πλαίσια.
Ακολουθούµε τα παρακάτω βήµατα:
1. Επιλέγουµε File / New from Template. Ανοίγει το πλαίσιο διαλόγου

Select Template.
2. Εµφανίζεται µία λίστα µε όλα τα πρότυπα που έχουν δηµιουργηθεί για
την ιστοσελίδα. Επιλέγουµε Exclusive_pr και κάνουµε διπλό κλικ πάνω
του ή το επιλέγουµε και πατάµε Select. ∆ηµιουργείται µία νέα σελίδα.
3. Αποθηκεύουµε το αρχείο µε το όνοµα που του αντιστοιχεί, όχι πλέον
σαν πρότυπο αλλά σαν αρχείο htm.
Οι µαθητές πρέπει να σχεδιάσουν µία νέα σελίδα πάνω σ’ένα από τα άλλα
προϊόντα του µενού Exclusive, χωρίς να έχει τόσο σηµασία το περιεχόµενο,
πριν συνεχίσουµε µε την επόµενη άσκηση.
Αλλαγές στο Προχωρήσαµε στην επεξεργασία ενός προτύπου, µπορούµε να κάνουµε και
πρότυπο αλλαγές πάνω του.
Οι µαθητές πρέπει να προσθέσουν ένα κουµπί (το οποίο θα συνδέσουµε

αργότερα) για να δηµιουργηθεί µία σύνδεση που θα µας επιτρέπει να
επιστρέφουµε στο βασικό µενού, και να το αποθηκεύσουν.
Κατ’αυτό το τρόπο, το Dreamweaver ανοίγει το πλαίσιο διαλόγου Update

Pages, εµφανίζοντας µία λίστα µε όλα τα αρχεία που δηµιουργήθηκαν βάση
αυτού του προτύπου. Κάνουµε κλικ στο Update.
Σηµειώσεις για Οι σελίδες µπορούν επίσης να ανανεωθούν αργότερα, µέσω του µενού Modify
τον / Templates /Update Pages.
εκπαιδευτή:
Κλειδώνοντας Αν για κάποιο λόγο θελήσουµε να αφαιρέσουµε κάποια επεξεργάσιµη περιοχή,

µία περιοχή πάµε στο µενού Modify /Templates / Remove Editable Region.
Αυτό το κοµµάτι του προτύπου θα είναι τώρα κλειδωµένο και δεν θα µπορεί
να τροποποιηθεί από τα αρχεία που το χρησιµοποιούν.
Περίληψη Σε αυτό το µάθηµα µάθαµε να δηµιουργούµε, να αποθηκεύουµε και να

τροποποιούµε πρότυπα. Επίσης να δηµιουργούµε ιστοσελίδες βασισµένες σε
πρότυπα.

Μάθηµα 13 - 14
∆ηµιουργώντας Συνδέσεις
Περιγραφή: Σε αυτό το µάθηµα οι µαθητές θα µελετήσουν τη δηµιουργία

υπερσυνδέσεων που µας οδηγούν στην τελική µορφή του δικτυακού τόπου.
Θα δηµιουργήσουν υπερσυνδέσεις κοινών κειµένων, κειµένων Flash,
κουµπιών Flash, εικόνων και χάρτων εικόνων, επιλέγοντας και το µέρος που
πρέπει να ανοίξει η νέα σελίδα.
Επίσης, θα µελετήσουν τις εξωτερικές συνδέσεις, δηλαδή τις συνδέσεις σε
άλλους δικτυακούς τόπους, και τις συνδέσεις ηλεκτρονικού ταχυδροµείου.
Στόχοι: ∆ηµιουργία υπερσυνδέσεων βάση διαφόρων πηγών

Κατεύθυνση υπερσυνδέσεων σε διάφορα πλαίσια και παράθυρα
∆ηµιουργία συνδέσεων µε διευθύνσεις URL ανεξάρτητες από τον
δικτυακό µας τόπο.
∆ηµιουργία συνδέσεων σε ηλεκτρονικό ταχυδροµείο
Σηµειώσεις για Όλα τα αρχεία στα οποία θα γίνουν συνδέσεις στα επόµενα µαθήµατα ή
τον εκπαιδευτή έχουν δηµιουργηθεί από τους µαθητές κατά τη διάρκεια του προγράµµατος
µελέτης ή παρέχονται σαν πρότυπα. Τα τελευταία έχουν σχεδιαστεί, για
λόγους χρόνου, από τον εκπαιδευτή. Ωστόσο, ο εκπαιδευτής µπορεί να
προτείνει στους µαθητές να δηµιουργήσουν τις σελίδες προς σύνδεση, σαν
εξάσκηση.
Στη περίπτωση που χρησιµοποιηθούν τα πρότυπα, πρέπει πρώτα να

αποθηκευτούν στους διάφορους φακέλους της ιστοσελίδας προκειµένου να
µπορεί να γίνει αργότερα η σύνδεση.
Συνδέσεις Η σηµαντικότερη χρήση της γλώσσας HTML προέρχεται από τη δυνατότητά

της να συνδέει περιοχές του κειµένου και εικόνων µε άλλα έγγραφα. Ο
πλοηγητής τονίζει αυτές τις περιοχές (συνήθως µε χρώµα ή µε υπογράµµιση)
για να αναδείξει την ύπαρξη συνδέσεων υπερκειµένου, που συχνά
ονοµάζονται υπερσυνδέσεις ή απλώς συνδέσεις.
Μία σύνδεση HTML έχει δύο µέρη: το όνοµα του αρχείου (ή το URL του
αρχείου) µε το οποίο επιθυµεί ο σχεδιαστής να συνδεθεί ο χρήστης και το
κείµενο ή γραφικό που λειτουργεί σαν αλληλεπιδραστική ζώνη «πατήµατος»
στη σελίδα. Όταν ο χρήστης κάνει κλικ στην αλληλεπιδραστική ζώνη, ο
πλοηγητής ακολουθεί την καθορισµένη από τη σύνδεση διαδροµή για να
µεταπηδήσει στη συνδεδεµένη ιστοσελίδα.
Σε ορισµένους πλοηγητές, όταν το βέλος περνάει πάνω από τη σύνδεση, η

διαδροµή της εµφανίζεται στη ζώνη κατάστασης του πλοηγητή (κάτω
αριστερά στο παράθυρο).

Συνδέσεις µέσω Μπαίνουµε στο πρόγραµµα Dreamweaver και ανοίγουµε τη βασική σελίδα,
κουµπιών Index.htm.(Ευρετήριο)
Flash, µε ένα
έγγραφο Μόλις την ανοίξουµε κάνουµε διπλό κλικ πάνω στο κουµπί flash Holidays.
Κατ’αυτό το τρόπο, µπορούµε να το επεξεργαστούµε, µέσω του παρακάτω
πλαισίου:
Eισαγωγή υπερσυνδέσµου στο κουµπί Holidays
Οι µαθητές θα πρέπει να συµπληρώσουν ανάλογα τα πεδία Link και Target.
Στο πλαίσιο που βρίσκεται η Σύνδεση (Link), κάνουµε κλικ πάνω στο κουµπί
Browse και µπορούµε να δούµε όλα τα αρχεία που αποτελούν την ιστοσελίδα
µας. Επιλέγουµε το αρχείο F_Holidays.htm από το φάκελο Holidays.
Στο πεδίο που αντιστοιχεί στο προορισµό έχουµε τέσσερις επιλογές:
• _blank: Φορτώνει τη συνδεδεµένη ιστοσελίδα σ’ένα νέο παράθυρο

• _parent: φορτώνει το συνδεδεµένο έγγραφο στο σύνολο πλαισίων
parent ή το παράθυρο του πλαισίου που περιέχει τη σύνδεση. Αν το
πλαίσιο που περιέχει τη σύνδεση δεν είναι ένθετο τότε το

συνδεδεµένο έγγραφο φορτώνεται σε µεγιστοποιηµένο παράθυρο του

πλοηγητή.
• _self: Φορτώνει το συνδεδεµένο έγγραφο στο ίδιο πλαίσιο ή στο ίδιο
παράθυρο µε τη σύνδεση. Αυτός ο προορισµός υποννοείται γι’αυτό
συνήθως δεν χρειάζεται να διευκρινιστεί.
• _top: Φορτώνει το συνδεδεµένο έγγραφο στο παράθυρο του
πλοηγητή σε ολόκληρο το µέγεθος, (όλα τα πλαίσια καταργούνται).
Σηµείωση: Με το να ανοίγουµε νέα παράθυρα στο πλοηγητή, χρησιµοποιούµε επιπλέον

µνήµη RAM στον υπλογιστή του χρήστη
Στη δική µας περίπτωση χρησιµοποιούµε την επιλογή _self η οποία, όπως
είδαµε, δεν χρειάζεται να καθοριστεί.
Προβλήµατα Μόλις συµπληρωθούν όλα τα δεδοµένα στο πλαίσιο διαλόγου, οι µαθητές

στη δηµιουργία πρέπει να δώσουν σηµασία στο ακόλουθο µήνυµα:
σύνδεσης
(=Χρησιµοποιήστε µία απόλυτη σύνδεση – http://- αν επιθυµείτε να

αποθηκεύσετε το κουµπί σε διαφορετικό φακελο)
Στη συνέχεια οι µαθητές πρέπει να αποθηκεύσουν το κουµπί µε τις αλλαγές,

πατώντας Apply.
Θα εµφανιστεί το ακόλουθο πλαίσιο διαλόγου
Oι αλλαγές που πραγµατοποιούµε στο κουµπί Flash δεν θα αποθηκευθούν αν

δεν αλλάξουµε τη θέση αποθήκευσής του ή αν δεν καθορίσουµε µια
συγκεκριµένη διαδροµή http://
Το πρόβληµα στη δική µας περίπτωση είναι οτι δε µπορούµε να ορίσουµε µία
συγκεκριµένη διαδροµή http που να µας επιτρέπει να δοκιµάζουµε το αρχείο
πριν το «ανεβάσουµε» στο Internet. Έτσι, προκειµένου να λυθεί το
πρόβληµα, θα χρειαστεί να µετακινήσουµε τα κουµπιά από τους φακέλους
που τους αποθηκεύουµε στο βασικό κατάλογο, στο σηµείο που βρίσκεται το
αρχείο Index (Ευρετήριο).
Θα πρέπει λοιπόν οι µαθητές να µετακινήσουν τα αρχεία που

συµπεριλαµβάνονται στους φακέλους Buttons/Vertical και Buttons/Horizontal

στο βασικό κατάλογο. Για να το κάνουµε αυτό πηγαίνουµε στο παράθυρο
Site, επιλέγουµε και σέρνουµε τα αρχεία των κουµπιών στον κεντρικό µας
φάκελο.
Όπως είδαµε και προηγουµένως, το Dreamweaver θα µας ρωτήσει αν

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

σβήνουµε.
Τώρα µπορούµε να επιστρέψουµε στο κουµπί Flash, να συµπληρώσουµε τις

πληροφορίες, να τις εφαρµόσουµε και να τις αποθηκεύσουµε. Για να συνδεθεί
το κουµπί µε την σελίδα πληκτρολογούµε το «µονοπάτι» στο οποίο βρίσκεται
η σελίδα στο σκληρό µας δίσκο.
(π.χ. C:\webpages\WebTour\Holidays\f_holidays.htm) Έχουµε δηµιουργήσει
µία σύνδεση που µπορούµε να δοκιµάσουµε στον εξερευνητή.
Άλλα Ας δηµιουργήσουµε τώρα, σύµφωνα µε το προηγούµενο σχέδιο, τη σύνδεση

προβλήµατα που αντιστοιχεί στο κουµπί Offers (έτσι ώστε να δοκιµάσουµε τουλάχιστον
δύο κουµπιά ). Μόλις το κάνουµε αυτό, δοκιµάζουµε την ιστοσελίδα στον
explorer. (Πατάµε Preview ή για λόγους ευκολίας F12)
Θα παρατηρήσατε πως µόλις πάµε, για παράδειγµα, στην επιλογή Holidays

πατώντας το κουµπί Offers η σελίδα «δεν ενηµερώνεται». Γιατί συµβαίνει
αυτό;
Το πρόβληµα είναι οτι έχουµε δηµιουργήσει µία πρώτη οθόνη παρουσίασης

που δεν χρησιµοποιεί τα πλαίσια που θα χρησιµοποιήσει όλη η υπόλοιπη
ιστοσελίδα. Στη σύνδεση χρησιµοποιούµε την επιλογή _self, όπου η
ενηµέρωση γίνεται µέσα στο ίδιο το πλαίσιο όπου βρίσκεται το πλαίσιο. Αυτό
σηµαίνει πως η οθόνη µας στη πραγµατικότητα ενηµερώνεται αλλά εµείς δε
το βλέπουµε γιατί το µέγεθος του πλαισίου δεν το επιτρέπει.
Πως λύνουµε αυτό το πρόβληµα;
Έχουµε δύο επιλογές, και οι δύο προϋποθέτοντας ορισµένο βαθµό δέσµευσης

στο σχεδιασµό.
Η πρώτη είναι να δηµιουργήσουµε ένα σετ ξεχωριστών κουµπιών για τις

σελίδες µε πλαίσια. Αυτό σηµαίνει πως θα είχαµε ένα σετ κουµπιών για τη
σελίδα παρουσίασης και άλλο για την υπόλοιπη ιστοσελίδα.
Η δεύτερη είναι να αλλάξουµε την επιλογή συνδέσεων σε _top το οποίο θα

προκαλέσει τη φόρτωση όλων των πλαισίων κάθε φορά που κάνουµε κλικ σε
κάποιο κουµπί. Σαν αποτέλεσµα, η φόρτωση της σελίδας θα είναι πιο αργή για
το χρήστη.

Στη δική µας περίπτωση χρησιµοποιούµε τη δεύτερη επιλογή εφ’όσον αφορά

µία ιστοσελίδα αποθηκευµένη τοπικά.
Πάµε λοιπόν στο παράθυρο Εγγράφου Ιndex.htm και κάνουµε τις ανάλογες
αλλαγές στα κουµπιά flash που έχουµε ήδη συνδέσει και έπειτα
συµπληρώνουµε τα υπόλοιπα χρησιµοποιώντας το ίδιο κριτήριο.
Θυµηθείτε πως οι συνδέσεις πρέπει να πραγµατοποιούνται µε τα αρχεία F_XX

σε κάθε περίπτωση.
Συνδεδεµένη Χρειαζόµαστε τώρα µία σύνδεση που να µας δίνει τη δυνατότητα επιστροφής
Εικόνα στο ή στη σελίδα παρουσίασης. Χρησιµοποιούµε γι’αυτό το σκοπό το
λογότυπο της εταιρίας, το οποίο αποτελεί σχεδόν κανόνα στο σχεδιασµό
Κάνοντας κλικ πάνω στο λογότυπο Web Tour έχουµε στον επιθεωρητή
ιδιοτήτων την επιλογή σύνδεσης της εικόνας:
Στο πλαίσιο που αντιστοιχεί στη Σύνδεση (Link) κάνουµε κλικ πάνω στο
φάκελο και βρίσκουµε το αρχείο Index.htm. Συµπληρώντοντας αυτό το πεδίο
ενεργοποιούµε το πεδίο Target όπου για τους λόγους που αναφέραµε
προηγουµένως, επιλέγουµε _top.
Οι µαθητές πρέπει να κάνουν δοκιµή στον εξερευνητή.
Σηµειώσεις για Αυτό που µπορεί να συµβεί πατώντας µία επιλογή και έπειτα να θέλουµε να
τον ξαναχρησιµοποιήσουµε το λογότυπο σαν σύνδεση, αυτό να µην αντιδρά. Αν
εκπαιδευτή: πρόκειται γι’αυτή τη περίπτωση, πάµε στο παράθυρο Ιστοσελίδα, κάνουµε
διπλό κλικ στο αρχείο VNB.htm και πραγµατοποιούµε τις ίδιες αλλαγές στην
εικόνα του λογότυπου που εµφανίζεται εκεί.
Θυµηθείτε να αποθηκεύσετε όλες τις αλλαγές πριν κάνετε οποιαδήποτε δοκιµή

στον εξερευνητή. .
Συνδέοντας Φορτώνουµε τώρα τη σελίδα F_Holidays.htm.

χάρτες εικόνας
Κάνουµε κλικ στη ζώνη που αντιστοιχεί στη Βόρειο Αµερική και έπειτα
συµπληρώνουµε τον Επιθεωρητή ιδιοτήτων:
• Link: εντοπίζουµε το αρχείο America.htm

• Target: δεν συµπληρώνουµε τίποτα, εφ’όσον θέλουµε να ανοίγει πάνω
στο ίδιο πλαίσιο όπου βρίσκεται, οπότε αφορά τη προκαθορισµένη
επιλογή _self.

Προσέχουµε πριν δούµε την προεπισκόπηση της σελίδας να µεταφέρουµε τα

αρχεία εικόνας στον φάκελο images. (Στην προκειµένη περίπτωση να
µεταφέρουµε τα αρχεία εικόνας nyc1.jpg και nyc2.jpg
Σηµειώσεις για Στη σελίδα America.htm να δηµιουργηθεί µία σύνδεση χρησιµοποιώντας ένα
τον κουµπί Flash που συνδέει αυτή τη σελίδα µε τη σελίδα F_Holidays.htm, έτσι
εκπαιδευτή: ώστε να µπορεί ο χρήστης να επιστρέψει στη σελίδα απ’όπου βγήκε, χωρίς να
χρησιµοποιήσει τα κουµπιά πλοήγησης.
Οι µαθητές θα πρέπει να δοκιµάσουν τις συνδέσεις στον πλοηγητή.
Στη συνέχεια, αν οι µαθητές έχουν σχεδιάσει επιπλέον σελίδες για τις

διάφορες ενεργές ζώνες µπορούν τώρα να ολοκληρώσουν τη σύνδεσή τους.
Συνδέσεις Φορτώνουµε τώρα τη σελίδα F_Offers.htm και επιλέγουµε το κείµενο Λονδίνο

Κειµένου που αντιστοιχεί στη προσφορά µε το ίδιο όνοµα.
Στη συνέχεια συµπληρώνουµε το πεδίο Link και το πεδίο Προορισµός του

Επιθεωρητή ιδιοτήτων:
• Link: εντοπίζουµε το αρχείο London.htm

• Προορισµός: όπως και πριν δεν συµπληρώνουµε τίποτα εφ’όσον
θέλουµε να ανοίξει στο ίδιο πλαίσιο στο οποίο βρίσκεται, οπότε αφορά
τη προκαθορισµένη επιλογή _self .
H προσφορά για Λονδίνο υπογραµµισµένη και συνδεδεµένη µε το

αντίστοιχο αρχείο
Βάλτε στη σελίδα London.htm µία σύνδεση για την επιστροφή στη σελίδα
προσφορών.
Όπως πάντα, οι µαθητές πρέπει να δοκιµάσουν τη σελίδα στον εξερευνητή.

Σελίδα Καµία από αυτές τις σελίδες δε παρουσιάζει συνδέσεις, οπότε δεν είναι
Αεροπλάνα και αναγκαίο να δουλέψουµε πάνω τους, και περνάµε στη σελίδα Week End
Σελίδα Τρένα
Σελίδα Week Σ’αυτή τη σελίδα όταν κάναµε κλικ πάνω σε κάποια επιλογή, εµφανιζόταν το
End – Σύνδεση περιεχόµενο αυτής της επιλογής στα δεξιά.
Κειµένου Flash
Για να συνδέσουµε το κείµενο Flash χρειάζεται να το επεξεργαστούµε
ακολουθώντας την ίδια διαδικασία µε τα κουµπιά. Αρκεί να κάνουµε διπλό κλικ
στο κείµενο το οποίο µας ανοίγει το πλαίσιο διαλόγου που µας επιτρέπει να το
τροποποιήσουµε.
Οπως πάντα, εµφανίζονται τα πεδία Link και Target.
• Link: εντοπίζουµε το αρχείο Content2.htm

• Target: εδώ έχουµε περισσότερες επιλογές, όπως µας δείχνει το
παράδειγµα, χάρη στο σχεδιασµό της σελίδας. Στη δική µας
περίπτωση, η σωστή επιλογή είναι “right frame” δηλαδή πως θα
ανοίξει η σελίδα στο δεξί πλαίσιο.
∆εν βάζουµε σύνδεση «επιστροφή» στη σελίδα περιεχοµένων γιατί αρκεί ο

χρήστης να διαλέξει άλλη επιλογή για να αλλάξει αυτή η σελίδα.
Σηµειώσεις για 1. Αν οι µαθητές σχεδιάσαν µεγαλύτερο αριθµό σελίδων περιεχοµένων θα

τον πρέπει τώρα να ολοκληρώσουν τις διάφορες συνδέσεις σ’αυτές τις
εκπαιδευτή: σελίδες.
2. Τόσο για τη σελίδα Hotels όσο και για τη σελίδα Cars δεν έχουν
σχεδιαστεί σελίδες στις οποίες θα µπορούσε να γίνει σύνδεση. Εάν ο
εκπαιδευτής το επιθυµεί µπορεί να προτείνει στους µαθητές να
σχεδιάσουν αυτές τις σελίδες σαν εξάσκηση και έπειτα να συµπληρώσουν
τις συνδέσεις. .
Σελίδα Για αυτή τη περίπτωση έχουµε αναπτύξει µόνο τη σελίδα που αντιστοιχεί
Αποκλειστικών στον αγροτικό τουρισµό και αφορά τη χρήση της εικόνας σαν σύνδεση, κάτι
το οποίο έχουµε ήδη πραγµατοποιήσει προηγουµένως. Οι µαθητές θα πρέπει
να συνδέσουν τη σελίδα F_Exclusive µε τη σελίδα Rural, χρησιµοποιώντας το
προορισµό self. Το κουµπί επιστροφής της σελίδας αγροτικού τουρισµού
πρέπει να συνδεθεί µε τη Exclusive.htm και όχι µε τη Μ_Exclusive όπως
κάναµε προηγουµένως.
Σύνδεση µε Χρησιµοποιώντας το κουµπί προτάσεων, θα δηµιουργήσουµε µία σύνδεση

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

ηλεκτρονικού ταχυδροµείου: κουµπιά ή κείµενο Flash, χάρτες εικόνας,

images, κείµενο.
Ως συνήθως, επιλέγουµε το τρόπο που θα χρησιµοποιήσουµε για να

δηµιουργήσουµε µία σύνδεση, σ’αυτή τη περίπτωση το κουµπί Flash
προτάσεις, και κάνοντας διπλό κλικ πάνω του το τροποποιούµε. Στο πλαίσιο
σύνδεσης πρέπει να βάλουµε την εξής πληροφορία :
mailto:info@webtour.com όπου info@webtour.com είναι η ηλεκτρονική
διεύθυνση στην οποία θέλουµε να µας στέλνουν τις προτάσεις.
Όταν ο χρήστης κάνει κλικ στο κουµπί προτάσεις, ο πλοηγητής ανοίγει το

προκαθορισµένο πρόγραµµα ηλεκτρονικού ταχυδροµείου του χρήστη µε το
πεδίο Προς: ήδη συµπληρωµένο µε τη συνδεδεµένη διεύθυνση.
Άλλος τρόπος εισαγωγής συνδέσεων ηλεκτρονικού ταχυδροµείου είναι

απ’ευθείας µέσω του Μενού Insert / Σύνδεση Ηλεκτρονικού Ταχυδροµείου ή
και από το πίνακα Αντικειµένων επιλέγοντας Σύνδεση Ηλεκτρονικού
Ταχυδροµείου. Και στις δύο περιπτώσεις θα ανοίξει το παρακάτω πλαίσιο
διαλόγου:
Εισαγωγή συνδέσµου ηλεκτρονικού ταχυδροµείου
• Text: Εισάγουµε µία γραµµή κειµένου που θα τοποθετηθεί στη σελίδα

µας και θα είναι η σύνδεση ηλεκτρονική ταχυδροµείου
• E-mail: Εισάγουµε απ’ευθείας την διεύθυνση ηλεκτρονικού
ταχυδροµείου (χωρίς να χρησιµοποιήσουµε mailto:)
Φόρµα Η φόρµα εγγραφής αποτελεί ένα τρόπο που µπορούµε να αποκτήσουµε

Εγγραφής δεδοµένα από το χρήστη κρατώντας το, σε ανταλλαγή, ενηµερωµένο για τα
τελευταία νέα της ιστοσελίδας µας.
Αν ακόµα δεν το έχετε κάνει και θέλετε, βάλτε τους µαθητές να σχεδιάσουν
τη φόρµα εγγραφής
Οι µαθητές πρέπει να συνδέσουν το κουµπί Flash Εγγτραφή µε το αρχείο
register.html και σαν προορισµό να επιλέξουν _blank. Αποθηκεύουν και
δοκιµάζουν το αρχείο στον πλοηγητή. Τι γίνεται;
Ο πλοηγητής ανοίγει ένα νέο παράθυρο όπου ανοίγει το συνδεδεµένο

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

ιστοσελίδα (σε µία θυγατρική εταιρία ή σ’ενα σπόνσορα). Εχουµε το

πλεονέκτηµα του να µην γίνεται «αντικατάσταση» της σελίδας µας από άλλη
στην οθόνη του υπολογιστή του χρήστη.
Εταιρία και ∆εν έχουµε δηµιουργήσει τις αντίστοιχες σελίδες γι’αυτές τις συνδέσεις. Αν το
∆ιαγωνισµός επιθυµεί ο εκπαιδευτής µπορεί να προτείνει στους µαθητές να σχεδιάσουν τις
σελίδες αυτές, σύµφωνα µε αυτά που έχουµε δει, σαν µέθοδο αξιολόγησης.
Σαν ιδέα για τη σελίδα του ∆ιαγωνισµού, οι µαθητές θα πρέπει να

δηµοσιεύσουν στη σελίδα µία φωτογραφία από ένα τουριστικό µέρος και
έπειτα να κάνουν ερωτήσεις στο χρήστη σχετικά µε το µέρος αυτό. Οι
ερωτήσεις θα πρέπει να συµπεριλαµβάνονται µέσα σε µία φόρµα.
Περίληψη Ο µαθητής έµαθε να δηµιουργεί υπερσυνδέσεις βάση διαφόρων πηγών και να

επιλέγει το πως πρέπει να συµπεριφέρονται αυτές οι συνδέσεις, διαλέγοντας
το µέρος που θα συµβεί το επιλεγµένο γεγονός.

Dreamweaver Fin

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamweaver Fin

Uploaded by

Copyright:

Available Formats

Futurekids Hellas Webtour II

Περιγραφή: Οι µαθητές θα µάθουν τα στοιχεία που συνθέτουν µια επιτυχηµένη σελίδα

Ο σχεδιασµός Τι κάνει µια ιστοσελίδα επιτυχηµένη;

Μία ιστοσελίδα µπορεί να είναι λιγότερο ή περισσότερο ελκυστική

Η δηµιουργία ενός καλού site δεν είναι απλή υπόθεση.

Macromedia Dreamweaver 4 1 2001-2003

Απαιτεί αρκετή προεργασία. Ξεκάθαρο σχεδιασµό, εύκολη πλοήγηση,

Η δηµιουργία µιας καλής ιστοσελίδας απαιτεί τεχνογνωσία, σωστό

Ερευνώντας Βάλτε τους µαθητές να πλοηγηθούν στις διάφορες ιστοσελίδες

Επίσηµος ∆ικτυακός Τόπος Macromedia Dreamweaver

Παραδείγµατα ∆ικτυακών Τόπων σχεδιασµένων µε το Macromedia

Ελληνικοί ∆ικτυακοί Τόποι φτιαγµένοι µε DreamWeaver

Macromedia Dreamweaver 4 2 2001-2003

∆ικτυακοί Τόποι (sites) εταιριών σχεδιασµού ιστοσελίδων

∆ικτυακοί Τόποι (sites) πρακτορείων ταξιδίων:

Ελληνικοί ∆ικτυακοί Τόποι (sites) πρακτορείων ταξιδίων:

Macromedia Dreamweaver 4 3 2001-2003

Το προσχέδιο της Ιστοσελίδας

Περιγραφή : Οι µαθητές θα ανταλλάξουν απόψεις όσον αφορά τα περιεχόµενα και την

Brainstorming Ξεκινώντας το σχεδιασµό ενός ∆ικτυακού τόπου (site), το πρώτο πράγµα

• Ποιο είναι το κοινό στο οποίο θα απευθύνεται ο ∆ικτυακός

Μέσω του οδηγού κατεύθυνσης καθορίζουµε προϋποθέσεις που αφορούν

Τα συµπεράσµατα στα οποία θα καταλήξουµε, θα βρουν εφαρµογή κατά

Σχεδιάζοντας τον οδηγό θα πρέπει πάντοτε να έχουµε υπ’όψιν το

Macromedia Dreamweaver 4 4 2001-2003

σχεδιάγραµµα που προέκυψε µετά το brainstorming λαµβάνοντας πάντα

• την κεντρική ιδέα,

Βάση αυτών των τριών παραµέτρων, ο µαθητής θα πρέπει να καθορίσει

• τη δοµή του κειµένου,

Ο σχεδιασµός (layout) της σελίδας, έχει ιδιαίτερη σηµασία, αφού ακόµη

Ακολουθεί ένας πίνακας που παρουσιάζει τους χρωµατικούς συνδιασµούς

Συνδυασµός απαλών τόνων Ηρεµία

Ζωντανά χρώµτα συνδυασµένα Υψηλή τεχνολογία,

Κόκκινο, µατζέντα και πορτοκαλί µαζί Ερέθισµα

Απαλοί τόνοι µπλε, πράσινα και καφέ Καθαριότητα

Συνδυασµός από πορτοκαλί Ζεστασιά

Macromedia Dreamweaver 4 5 2001-2003

Οι µαθητές πρέπει να επιλέξουν από το παραπάνω πίνακα το συνδιασµό

Για σωστότερη αξιολόγηση, τους πρώτους µήνες που ο δικτυακός µας

Η µετατροπή της αρχικής ιδέας σε δικτυακό τόπο, απαιτεί προεργασία.

Οι µαθητές θα πρέπει να συζητήσουν για το «στήσιµο» της σελίδας

Η διαχείριση του αποθηκευτικού χώρου είναι ένα πολύ σηµαντικό στοιχείο

Το σχέδιό µας Σχεδιάζουµε σε µια σελίδα χαρτί προσπαθώντας να αναπαραστήσουµε τον

Macromedia Dreamweaver 4 6 2001-2003

Σηµειώσεις για Σε αυτό το σηµείο είναι σηµαντικό ο εκπαιδευτής να έχει ολοκληρωµένη

Η βασική Θα περιέχει γραφικά, σχεδιασµένα έτσι ώστε να µην είναι υπερβολικά

• Γιατί να χωρίσουµε το περιεχόµενο της σελίδας σε διάφορα µέρη

Ο γραφικός σχεδιασµός αυτής της βασικής σελίδας θα ακολουθήσει

Στο επάνω µέρος της σελίδας µπορούµε να έχουµε διαφηµιστικό χώρο

Αριστερά στην σελίδα µας εµφανίζονται σε κάθετη διάταξη οι τίτλοι των

Macromedia Dreamweaver 4 7 2001-2003

1. ∆ίνει µία γενική ιδέα του πως πρέπει να σχεδιαστούν τα στοιχεία

Επιπλέον, στο οργανόγραµµα µπορούµε να ονοµάσουµε τις ιστοσελίδες

Στο Internet, εκτός από το γραφικό περιεχόµενο, τα χρώµατα πρέπει να

Macromedia Dreamweaver 4 8 2001-2003

Ποιοι είναι οι καλύτεροι συνδυασµοί χρωµάτων για τον δικτυακό µας

Αυτό εξαρτάται και από τον σχεδιαστή, αλλά σε γενικές γραµµές οι

1. Αίσθηση ηρεµίας: συνδυασµός απαλών τόνων, κίτρινα ή

1. Για τους άσπρους φόντους, τα ανάλογα χρώµατα κειµένου είναι

Σε µια ιστοσελίδα διακρίνουµε δύο ειδών γραµµατοσειρές:

1. Η γραµµατοσειρά των γραφικών: επιλέγεται για την δηµιουργία

Όσον αφορά το υπερκείµενο (HTML) της ιστοσελίδας, δεν

Macromedia Dreamweaver 4 9 2001-2003

Στόχοι: Παρουσίαση του προγράµµατος Macromedia Dreamweaver 4