ΤΜΗΜΑΤΟΣ ΔΙΕΘΝΟΥΣ ΕΜΠΟΡΙΟΥ ΠΑΡΑΡΤΗΜΑΤΟΣ ΚΑΣΤΟΡΙΑΣ ΤΕΙ ΔΥΤΙΚΗΣ ΜΑΚΕΔΟΝΙΑΣ

Transcript

1 Όλγας Παπαδοπούλου Συνεργάτιδας ΤΜΗΜΑΤΟΣ ΔΙΕΘΝΟΥΣ ΕΜΠΟΡΙΟΥ ΠΑΡΑΡΤΗΜΑΤΟΣ ΚΑΣΤΟΡΙΑΣ ΤΕΙ ΔΥΤΙΚΗΣ ΜΑΚΕΔΟΝΙΑΣ Καστοριά, Ιούνιος 2007

2 ΠΕΡΙΕΧΟΜΕΝΑ σελ. ΚΕΦ.1 ΤΟ ΠΕΡΙΒΑΛΛΟΝ ΤΟΥ DREAMWEAVER ΜΧ (version 6.0) Το Παράθυρο του Dreamweaver ΜΧ Εστιάστε στα βασικά: TΜενού και πτυσσόμενα μενού (υπομενού) 5T 1.3 Οι μπάρες εργαλείων Ο επιθεωρητής ιδιοτήτων Χρήσιμες επισημάνσεις 16 ΚΕΦ.2 ΑΣΚΗΣΕΙΣ ΕΦΑΡΜΟΓΗΣ Άσκηση 1 Δημιουργία νέου ιστοχώρου (web site) 18 Άσκηση 2 Δημιουργία ιστοσελίδας (web page) Ορισμός ιδιοτήτων 22 Άσκηση 3 Λίστες 26 Άσκηση 4 Τροποποίηση ιδιοτήτων σελίδας και εισαγωγή εγγράφου 29 Άσκηση 5 Στυλ παραγράφου και στυλ χαρακτήρα (HTML styles) 32 Άσκηση 6 Ενσωματωμένα και εξωτερικά φύλλα στυλ (CSS styles) 36 Άσκηση 7 Εισαγωγή εικόνας 42 Άσκηση 8 Πλαίσια (Frames) 46 Άσκηση 9 Πίνακες (Tables), Σύνδεσμοι (Links) και Επίπεδα (Layers) 54 Άσκηση 10 Φόρμες (Forms), Πτυσσόμενα Μενού (Jump Menus), Επώνυμες Αγκυρώσεις (Named Anchors) και Εικόνες Εναλλαγής (Rollover Images) 65 Κατοχύρωση Domain name και φιλοξενία ιστοσελίδων 86 Επίλογος 87 Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 2

3 ΚΕΦ.1 ΤΟ ΠΕΡΙΒΑΛΛΟΝ ΤΟΥ DREAMWEAVER MX (v.6) 1.1. Το Παράθυρο του Dreamweaver MX Εκκινήστε το πρόγραμμα Dreamweaver MX: Έναρξη > Προγράμματα > Macromedia Dream Weaver MX. Εξερευνήστε το παράθυρο του Dreamweaver MX T1. Στη γραμμή των μενού περιλαμβάνονται (στα πτυσσόμενα μενού) όλες οι εντολές του Dreamweaver ΜΧ. 2. Καρτέλες με τις κατηγορίες αντικειμένων που μπορείτε να εισάγετε στην σελίδα σας. 3. Εδώ εμφανίζονται τα εικονίδια των κατηγοριών. Μπορείτε να εκτελέσετε κάποιες εντολές πατώντας τ αντίστοιχα κουμπάκια. 4. Ειδικά κουμπιά εντολών. 5. Κουμπιά ελέγχου για τις ανοιχτές σελίδες (έγγραφα). Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 3

4 Εδώ εμφανίζεται ο τίτλος του εγγράφου και σε παρένθεση το όνομα αρχείου. Aν δεν δώσετε τίτλο στην σελίδα σας, όπως εδώ, εμφανίζεται ο τίτλος Untitled Document. 7. Οι χάρακες. 8. Το πλέγμα τοποθέτησης. 9. Η περιοχή εργασίας (παράθυρο εγγράφου). 10. Τα κουμπιά εμφάνισης και απόκρυψης των βοηθητικών πάνελ. 11. Ο επιλογέας σήμανσης της γλώσσας HTML. 12. Στατιστικά στοιχεία φόρτωσης και διαφορετικές εμφανίσεις σχετικά με την οθόνη. 13. Επιθεωρητής Ιδιοτήτων (εμφανίζει τις ιδιότητες των χρησιμοποιούμενων αντικειμένων) 14. Περιοχή προβολής των βοηθητικών πάνελ. Εδώ εμφανίζεται το πάνελ (Site Files) του site με όνομα xekinima. 15. Περιοχή προβολής απαντήσεωv (βοήθειας) για το Dreamweaver ΜΧ. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 4

5 1.2 Εστιάστε στα βασικά: Μενού και πτυσσόμενα μενού (υπομενού) Γραμμή των μενού Μελετήστε τις επί μέρους εντολές-λειτουργίες που προσφέρει κάθε μενού UΤο μενού FileU επιτρέπει τη δημιουργία, το άνοιγμα και αποθήκευση σελίδων κ.λ.π. New Δημιουργία νέας σελίδας Open Άνοιγμα μιας σελίδας Open in Frame Άνοιγμα σε πλαίσιο Close Κλείσιμο του τρέχουσας σελίδας Save Αποθήκευση της σελίδας Save as Αποθήκευση της σελίδας με διαφορετικό όνομα Save as Template Αποθήκευση της σελίδας ως πρότυπο Save All Αποθήκευση όλων των ανοιχτών σελιδων Import Εισαγωγή δεδομένων από εξωτερική πηγή Export Εξαγωγή δεδομένων Preview in Browser Προεπισκόπηση στο φυλλομετρητή Check Pages Έλεγχος των σελίδων μας για λάθη Exit Έξοδος από το Dreamweaver Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 5

6 UΤο μενού EditU επιτρέπει αναίρεση, αντιγραφή κ.λ.π. Undo Αναίρεση της τελευταίας ενέργειας Redo Αναίρεση της αναίρεσης Cut Αποκοπή του επιλεγμένου στοιχείου Copy Αντιγραφή του επιλεγμένου στοιχείου Paste Επικόλληση του περιεχομένου του πρόχειρου Clear Διαγραφή του επιλεγμένου στοιχείου Copy HTML Αντιγραφή κομματιού κώδικα Paste HTML Επικόλληση του παραπάνω κώδικα Select All Επιλογή Όλων Select Parent Tag Επιλογή της πατρικής ετικέτας Select Child Επιλογή ένθετης ετικέτας Find and Replace Εύρεση και αντικατάσταση κειμένου Find Next Εύρεση επόμενου Keyboard Shortcuts Συντομεύσεις πληκτρολογίου Preferences Ρυθμίσεις του Dreamweaver Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 6

7 UΤο μενού View Code Προβoλή σε μορφή κώδικα Design Προβολή σε μορφή σχεδίασης Code and Design Προβολή και των δύο παραπάνω με την οθόνη χωρισμένη στη μέση Switch Views Διακόπτης εναλλαγής προβολών Refresh Design View Ανανέωση της προβολής σχεδίασης Table View Visual Aids Προβολή κρυφών στοιχείων (Διαστάσεις πίνακα, διαστάσεις περιγραμμάτων, αόρατα στοιχεία κ.α.) Rulers Εμφάνιση και απόκρυψη του χάρακα Grid Εμφάνιση και απόκρυψη του πλέγματος Tracing Image Επιλογή για το Tracing Image που βρίσκεται στο Page Properties Plugins Επιλογές για διάφορα πρόσθετα προγραμματάκια (Plugins) Hide Panels Απόκρυψη των βοηθητικών panels Toolbars Εμφάνιση και απόκρυψη των γραμμών εργαλείων Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 7

8 UΤο μενού InsertU Tag Εισαγωγή ετικέτας Image Εισαγωγή εικόνας Image Placeholder Εισαγωγή αντικειμένων εικόνας Interactive Images Εισαγωγή εναλασσόμενης εικόνας, Μπάρας Πλοήγησης (Navigation Bar) κ.ά. Media Εισαγωγή αντικειμένων Flash, Applets, Plugins κ.α. Table Εισαγωγή πίνακα Table Objects Εισαγωγή αντικειμένων πίνακα Layer Εισαγωγή επιπέδων (Layers) Frames Εισαγωγή Πλαισίων Template Objects Επιλογές για τη διαμόρφωση ενός προτύπου Form Εισαγωγή φόρμας και αντικειμένων φόρμας Form Objects Εισαγωγή αντικειμένων φόρμας Link Εισαγωγή υπερσυνδέσμου που οδηγεί σε Hyperlink Εισαγωγή υπερσυνδέσμου Named Anchor Εισαγωγή άγκυρας Date Εισαγωγή ημερομηνίας Horizontal Rule Εισαγωγή οριζόντιας γραμμής Special Characters Εισαγωγή ειδικών χαρακτήρων Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 8

9 Get More Objects Σύνδεση με το TUwww.macromedia.comUT για download περισσότερων αντικειμένων UΤο μενού ModifyU Page Properties Επεξεργασία των ιδιοτήτων της σελίδας Template Properties Επεξεργασία των ιδιοτήτων ενός προτύπου Selection Properties Εμφάνιση και απόκρυψη των ιδιοτήτων του επιλεγμένου στοιχείου στο κάτω μέρος του Dreamweaver Edit Tag επεξεργασία μιας επιλεγμένης ετικέτας Quick Tag Editor Γρήγορη επεξεργασία μιας επιλεγμένης ετικέτας Make Link Δημιουργία υπερσύνδεσμου στο επιλεγμένο στοιχείο Remove Link Κατάργηση υπερσυνδέσμου εάν υπάρχει Open Linked Page Άνοιγμα της συνδεδεμένης σελίδας Link Target Επιλογές για το άνοιγμα της νέας τοποθεσίας Table Εντολές επεξεργασίας ενός πίνακα Frameset Εντολές επεξεργασίας ενός Frameset (σύνολο πλαισίων) Navigation Bar Εντολές επεξεργασίας Μπάρας Πλοήγησης Arrange Εντολές επεξεργασίας επιπέδων (Layers) Align Εντολές στοίχισης των στοιχείων Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 9

10 Library Εντολές επεξεργασίας των βιβλιοθηκών Templates Εντολές επεξεργασίας πρότυπων σελίδων UΤο μενού TextU Indent Προσθέτει στο επιλεγμένο κείμενο μία εσοχή Outdent Προσθέτει στο επιλεγμένο κείμενο μία εξοχή Paragraph Format Δίνει στην επιλεγμένη παράγραφο μορφή επικεφαλίδας Align Στοιχίζει την επιλεγμένη παράγραφο List Πρόσθεση κουκίδων και αρίθμηση στο επιλεγμένο κείμενο Font Αλλάζει τη γραμματοσειρά στο επιλεγμένο κείμενο Style Αλλάζει το στυλ στο επιλεγμένο κείμενο HTML Styles Εφαρμόζει ένα στυλ HTML στο επιλεγμένο κείμενο CSS Styles Εφαρμόζει ένα στυλ CSS στο επιλεγμένο κείμενο Size Αλλάζει το μέγεθος στο επιλεγμένο κείμενο Size Change Αλλάζει το μέγεθος στο επιλεγμένο κείμενο με μέτρηση του Dreamweaver Color Αλλάζει το χρώμα στο επιλεγμένο κείμενο Check Spelling Εκτελεί τον ορθογράφο (μόνο Αγγλικά) Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 10

11 UΤο μενού Commands Start Recording Αρχίζει η εγγραφή μίας μακροεντολής Play Recorded Command Εκτελεί τη εγγεγραμένη μακροεντολή Edit Command List Επεξεργασία της λίστας των εντολών Get More Commands Σύνδεση με το TUwww.macromedia.comUT για download περισσότερων commands Manage Extensions Διαχείριση πρόσθετων λειτουργιών Apply Source Formatting Εντολή σε περίπτωση που γράφουμε εμείς τον κώδικα HTML Apply Source Formatting to Selection Εντολή σε περίπτωση που γράφουμε εμείς τον κώδικα HTML Clean Up Word HTML Εντολή για επεξεργασία κατά την εισαγωγή εγγράφου Word Optimize Images in Fireworks Εντολή επεξεργασίας φωτογραφίας στο Fireworks Create Photo Album Δημιουργία Photo Album (απαραίτητο το Fireworks) Set Color Scheme Ορισμός συδυασμού χρωμάτων της σελίδας Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 11

12 Format Table Εντολή μορφοποίησης ενός πίνακα Sort Table Εντολή ταξινόμησης ενός πίνακα UΤο μενού SiteU Site Files Εντολή διαχείρησης των υπαρχόντων Sites Site Map Εντολή για εμφάνιση χάρτη του site New Site Εντολή για δημιουργία νέου site Edit Sites Εντολή για επεξεργασία υπάρχοντος site Get Εντολή κατεβάσματος αρχείων από τον server Check Out Εντολή αν δουλεύουμε σε τοπικό δίκτυο Put Εντολή ανεβάσματος αρχείων στον server Check In Εντολή αν δουλεύουμε σε τοπικό δίκτυο Undo Check Out Αναίρεση της εντολής Check Out Locate in Site Εντολή για τοποθέτηση στο τοπικό site Reports Εντολή για αναφορές Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 12

13 UΤο μενού Window Επιτρέπει την προβολή διαφόρων χρήσιμων καρτελών, παλετών και επιλογών στο παράθυρο του Dreamweaver, όπως π.χ. της μπάρας εργαλείων, του επιθεωρητή ιδιοτήτων, της παλέτας HTML Styles CSS Styles και Behaviors κ.λ.π. Insert προβολή της μπάρας εργαλείων Properties προβολή του Επιθεωρητή Ιδιοτήτων HTML Styles προβολή παλέτας για αυτό το στυλ CSS Styles προβολή παλέτας για αυτό το στυλ Behaviors προβολή παλέτας για συμπεριφορές κ.λ.π. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 13

14 1.3 Οι μπάρες εργαλείων του Dreamweaver Η καρτέλα Common σας επιτρέπει να χρησιμοποιείτε τις πιο συνηθισμένες εργασίες για την σελίδα σας. Αυτές είναι: Εικόνες, Υπερσύνδεσμοι, σύνδεσμοι, Άγκυρες, Πίνακες, Επίπεδα κ.α Π.χ. μπορείτε να εισάγετε μια εικόνα, πατώντας το κουμπάκι για εικόνα (image) ή σέρνοντας το κουμπάκι στην επιφάνεια εργασίας Χρησιμοποιώντας την καρτέλα Layout μπορείτε να δείτε την προβολή της σελίδας σας και τους πίνακες που έχετε χρησιμοποιήσει με διαφορετική μορφή. Η καρτέλα Text αφορά μορφοποίηση κειμένου. Η καρτέλα Tables αναφέρεται σε επεξεργασία πινάκων. Η καρτέλα Frames αναφέρεται σε επεξεργασία πλαισίων. Η καρτέλα Forms επιτρέπει επεξεργασία ιδιοτήτων για φόρμες. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 14

15 1.4 Ο επιθεωρητής ιδιοτήτων Ο επιθεωρητής ιδιοτήτων εμφανίζεται στο κάτω αριστερό μέρος του παραθύρου του Dreamweaver (βλ. παραπάνω σελ.4). Παρουσιάζει τις ιδιότητες του αντικειμένου που επεξεργάζεστε τη συγκεκριμένη στιγμή. Αλλάζει δηλαδή μορφή ανάλογα με το αντικείμενο που επιλέγετε. Ο επιθεωρητής ιδιοτήτων σας επιτρέπει να επεξεργαστείτε τις ιδιότητες της σελίδας όπου βρίσκεστε π.χ. για κείμενο ή εικόνα, πίνακες, πλαίσια, συνδέσμους κ.λ.π. Μπορείτε να ανοίξετε τον επιθεωρητή ιδιοτήτων (αν δεν εμφανίζεται στο κάτω δεξιό μέρος της επιφάνειας εργασίας) επιλέγοντας από τη γραμμή μενου Window > Properties ή πατώντας τα πλήκτρα Ctrl + F3 Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 15

16 1.5 ΧΡΗΣΙΜΕΣ ΕΠΙΣΗΜΑΝΣΕΙΣ UΣχετικά με τα ονόματα αρχείων και φακέλλων Το όνομα του ιστοχώρου, το όνομα των αρχείων και των φακέλλων όπου θα αποθηκεύουμε τις σελίδες πρέπει υποχρεωτικά να γράφονται στ αγγλικά (λατινικά). Δεν πρέπει στο όνομα να υπάρχουν κενά, μπορεί όμως να χρησιμοποιηθεί κάτω παύλα υπογράμμισης (underscore) π.χ. new_site. Σε όλα τα αρχεία (files, frames) πρέπει να υπάρχει η επέκταση htm ή html π.χ. selida1.html topframe.htm Προσοχή! Όλα τα αρχεία ενός site να τα αποθηκεύετε στον ίδιο φάκελλο. UΘέλετε να πληκτρολογήσετε κείμενο στα Ελληνικα; Πριν ξεκινήσετε να γράφετε το κείμενο στο παράθυρο εγγράφου, επιλέγετε από τη γραμμή μενού Modify > Page Properties και επιλέγετε Document Encoding Greek (ISO ). UΠροεπισκόπηση / PreviewU Αν καθώς επεξεργάζεστε μία σελίδα θέλετε να δείτε πως θα εμφανίζεται στον φυλλομετρητή (browser) του χρήστη, εναλλακτικά: α) πατήστε το εικονίδιο και επιλέξτε τον browser που θέλετε να κάνετε προεπισκόπηση. β) από τη γραμμή μενού επιλέξτε File Preview in Browser (Προεπισκόπηση στο φυλλομετρητή). γ) πατήστε το πλήκτρο F12. UΠερισσότερος χώροςu Πατώντας το πλήκτρο F4 βλέπετε το παράθυρο του Dreamweaver χωρίς περιττές πληροφορίες. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 16

17 UΚΑΙ ΚΑΠΟΙΕΣ ΣΥΜΒΟΥΛΕΣ, ΠΡΙΝ ΑΣΧΟΛΗΘΕΙΤΕ ΜΕ ΔΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙΔΩΝ Εγκαταστήστε στον υπολογιστή σας το λογισμικό Dreamweaver MX Μελετήστε πολύ καλά όσα παρουσιάσαμε στις προηγούμενες σελίδες και πειραματιστείτε με τα μενού, τα εργαλεία και τις επιλογές που προσφέρονται. Να παρακολουθείτε με προσοχή τις παραδόσεις του εργαστηρίου του Ηλεκτρονικού Εμπορίου Ι, να συνεργάζεστε με τους συμφοιτητές σας και να κρατάτε σημειώσεις σε όσα παρουσιάζουν και εξηγούν οι διδάσκοντες. TΑν καθώς δουλεύετε μόνη ή μόνος, χρειάζεστε επειγόντως βοήθεια και τα έχετε δοκιμάσει όλα (υλικό σημειώσεωνασκήσεων), μην πανικοβάλλεστε: ανοίξτε τη βοήθεια (Help) από τη γραμμή μενού του Dreamweaver ΜΧ. Αν είστε οπτικός τύπος, κατεβάστε οδηγίες χρήσης σε βίντεο (Dreamweaver MX 2004 Visual Tutorial notes) από το URL: TUhttp:// Να θυμάστε: το Dreamweaver απευθύνεται και σε αρχάριους, οι οποίοι με συνεχή προσπάθεια εξελίσσονται σε προχωρημένους! Για κάθε απορία που λύνετε εξελίσσεστε βήμα-βήμα! Η αρχή είναι το ήμισυ του παντός! ΛΟΙΠΟΝ; ΤΙ ΛΕΤΕ; ΕΤΟΙΜΟΙ ΓΙΑ ΤΟ ΤΑΞΙΔΙ ΣΤΟΝ ΚΟΣΜΟ ΤΩΝ ΙΣΤΟΣΕΛΙΔΩΝ; Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 17

18 ΚΕΦ.2 Α Σ Κ Η Σ Ε Ι Σ Ε Φ Α Ρ Μ Ο Γ Η Σ Άσκηση 1 ΔΗΜΙΟΥΡΓΙΑ ΝΕΟΥ ΙΣΤΟΧΩΡΟΥ (WEB SITE) Να δημιουργήσετε ένα νέο site με το όνομα xekinima και να το αποθηκεύσετε στα έγγραφά μου: α) σε φάκελλο που θα δημιουργήσετε προηγουμένως γι αυτό το σκοπό. β) σε φάκελλο που θα δημιουργήσετε μέσα από το πλαίσιο διαλόγου Site Definition. UΑπάντηση - Εφαρμογή βήμα-βήμαu (α) υποερώτημα της άσκησης: Στον υπολογιστή σας, στη θέση C:\Τα έγγραφα μου δημιουργήστε (με δεξί κλικ) ένα νέο φάκελο με όνομα efarmoges_dreamweaver. Ανοίξτε (με διπλό δεξί κλικ το φάκελο) efarmoges_dreamweaver και δημιουργήστε ένα νέο φάκελο με όνομα eisagogi. Εκκινήστε το πρόγραμμα Dreamweaver για να δημιουργήστε το νέο site. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 18

19 Από τη γραμμή των μενού, επιλέξτε το μενού Site και κατόπιν από το πτυσσόμενο μενού επιλέξτε New Site. Στο πλαίσιο διαλόγου Site Definition να ορίσετε τις βασικές παραμέτρους του site συμπληρώνοντας τα πεδία ως εξής: 1) στο Site Name πληκτρολογείστε το όνομα που θα δώσετε στον ιστοχώρο (web site) σας: xekinima Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 19

20 2) στη συνέχεια, πρέπει να ορίσετε τη θέση αποθήκευσης των αρχείων σας (where on your computer do you want to store your files?) με κλικ στον κίτρινο φάκελο θα ορίσετε το φάκελο στο σκληρό δίσκο (όπου θα αποθηκεύσετε τα αρχεία του ιστοχώρου σας): Αναζητήστε στη θέση C:\Τα έγγραφα μου τον φάκελο efarmoges_dreamweaver μέσα από τον οποίο επιλέξτε (με διπλό αριστερό κλικ) το φάκελλο eisagogi. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 20

21 (β) υποερώτημα της άσκησης: στο πλαίσιο διαλόγου Site Definition, αντιμετωπίζοντας το ερώτημα where on your computer do you want to store your files, κάντε αριστερό κλικ στον κίτρινο φάκελο για να αναζητήσετε τη θέση C:\Τα έγγραφα μου και μετά με δεξί κλικ μέσα στο παράθυρο δημιουργήστε το φάκελλο efarmoges_dreamweaver και μέσα σ αυτόν δημιουργείστε νέο φάκελλο με όνομα eisagogi. Επιλέξτε (με διπλό αριστερό κλικ) τον φάκελλο eisagogi. Ολοκληρώνοντας, διαπιστώνετε ότι οι ενέργειές σας σήμαναν κάποια αλλαγή στο παράθυρο του Dreamweaver: συγκεκριμένα (δεξιά) στην περιοχή Site πάνελ (Site Files) στο πεδίο τίτλου εμφανίζεται Uτο όνομα που δώσατε στο siteu κάτω από τον τίτλο, στο παράθυρο του site, εμφανίζεται Uο φάκελος όπου αποθηκεύσατε το siteu Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 21

22 Άσκηση 2 ΔΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙΔΑΣ ΚΑΙ ΟΡΙΣΜΟΣ ΙΔΙΟΤΗΤΩΝ Να δημιουργήσετε μια ιστοσελίδα με το όνομα selida1.html μέσα στο site xekinima που δημιουργήσατε στην άσκηση 1. Στη συνέχεια, να ορίσετε τις ακόλουθες ιδιότητες για τη σελίδα σας: Τίτλος Σελίδας : Κεντρική Σελίδα Χρώμα υπόβαθρου : # Χρώμα γραμματοσειράς : #CCFFFF Document Encoding : Greek (ISO ) Να πληκτρολογήσετε στην σελίδα σας το κείμενο: Κάθε αρχή και δύσκολη! Να αποθηκεύσετε την σελίδα μέσα στο φάκελλο του site σας. Ολοκληρώνοντας, δείτε πως θα φαίνεται στο φυλλομετρητή η ιστοσελίδα σας. UΑπάντηση - Εφαρμογή βήμα-βήμαu Εκκινήστε το πρόγραμμα DreamWeaver. Από τη γραμμή των μενού επιλέξτε Site > Site Files Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 22

23 Στο παράθυρο του Dreamweaver (δεξιά) στην περιοχή Site πάνελ (Site Files) εμφανίζεται ο φάκελος όπου έχετε ορίσει να αποθηκεύονται τα αρχεία του site xekinima C:\Τα έγγραφάμου/efarmoges_dreamweaver/eisagogi. Μέσα σ αυτόν τον φάκελλο θα αποθηκεύσετε την ιστοσελίδα που θα δημιουργήσετε. Κάντε δεξί κλικ πάνω σ αυτόν τον φάκελο και επιλέξτε New File Όπως διαπιστώνετε, κάτω από τον φάκελο του site δημιουργήθηκε ένα αρχείο Untitled.html. Δώστε σ αυτό το αρχείο το όνομα selida1.html. Στη συνέχεια μπορείτε να επεξεργαστείτε την πρώτη σας σελίδα κάνοντας διπλό κλικ πάνω στο αρχείο selida1.html. Εναλλακτικά για δημιουργία της σελίδας θα μπορούσατε από τη γραμμή μενού να επιλέξτε File > New File και να ορίσετε ότι θα αποθηκευτεί στο φάκελλο του site xekinima. Για να ορίσετε τις ιδιότητες της σελίδας σας επιλέξτε από την γραμμή των μενού Modify > Page Properties και αφού ολοκληρώσετε τη συμπλήρωση των επιθυμητών τιμών στα πεδία πατήστε ΟΚ. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 23

24 Πληκτρολογήστε το κείμενο στο παράθυρο εγγράφου. Στο παράθυρο του Dreamweaver έχετε το εξής αποτέλεσμα: Αποθηκεύστε, επιλέγοντας από τη γραμμή μενού File > Save Για να δείτε πως θα φαίνεται στο φυλλομετρητή η σελίδα σας (δηλαδή πως θα τη βλέπει στο Web ο χρήστης Διαδικτύου): επιλέξτε File > Preview in Browser (Προεπισκόπηση στο φυλλομετρητή) ή πατήστε το εικονίδιο ή πατήστε το πλήκτρο F12. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 24

25 Εδώ βλέπετε πως θα φαίνεται η σελίδα σας στον φυλλομετρητή Internet Explorer. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 25

26 Άσκηση 3 ΛΙΣΤΕΣ (ΔΙΑΤΕΤΑΓΜΕΝΕΣ ΚΑΙ ΜΗ ΔΙΑΤΕΤΑΓΜΕΝΕΣ) Να δημιουργήσετε ένα ιστοχώρο (site) με όνομα fititika_nea και να τον αποθηκεύσετε στα έγγραφά μου μέσα στο φάκελο efarmoges_dreamweaver όπου θα δημιουργήσετε νέο φάκελλο με όνομα lists_styles. Κατόπιν, μέσα στο site fititika_nea, να δημιουργήσετε μια ιστοσελίδα με όνομα prova1.html, τίτλο σελίδας : Κεντρική Σελίδα, χρώμα υπόβαθρου : #6633CC, χρώμα γραμματοσειράς : #FFFFFF, Font :Times New Roman, Times, Serif Size : 5, Document Encoding : Greek (ISO ). Στην συνέχεια πληκτρολογήστε το παρακάτω κείμενο με επικεφαλίδα και λίστες (με κουκίδες και αρίθμηση): Φοιτητικά Νέα Καλώς ήλθατε στην κεντρική μας σελίδα. Καλή πλοήγηση. Τι γοητευτικός είναι ο κόσμος του διαδικτύου! Η πλοήγηση ανεξάντλητη! Και πόσο δύσκολη αλήθεια η ζωή του φοιτητή! Η προσπάθειά μας στηρίζεται: 1. στις γνώσεις που θα πάρουμε από το εργαστήριο Ηλεκτρονικού εμπορίου Ι. 2. στις εφαρμογές που θα επιχειρούμε μετά από κάθε μάθημα. 3. στη δίψα μας για διαρκή μάθηση και ενημέρωση. Στην κεφαλίδα (Φοιτητικά Νέα) να ορίσετε Format: Heading1, Font : Default, Size 7. Ολοκληρώνοντας, δείτε πως θα φαίνεται στο φυλλομετρητή η ιστοσελίδα σας. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 26

27 UΑπάντηση - Εφαρμογή βήμα-βήμαu Από τη γραμμή των μενού, επιλέξτε το μενού Site > New Site. Για να καθορίσετε το Site, στο Site Name πληκτρολογείστε το όνομα που θα δώσετε στον ιστοχώρο (web site) σας: fititika_nea Αντιμετωπίζοντας το ερώτημα where on your computer do you want to store your files, θα ορίσετε το φάκελο στο σκληρό δίσκο όπου θα αποθηκεύσετε τα αρχεία του ιστοχώρου σας: με αριστερό κλικ στον κίτρινο φάκελο αναζητήστε στη θέση C:\Τα έγγραφα μου τον φάκελο efarmoges_dreamweaver, επιλέξτε τον (με διπλό αριστερό κλικ) και μετά με δεξί κλικ μέσα στο παράθυρο δημιουργείστε νέο φάκελλο με όνομα lists_styles. Αφού ολοκληρώσετε τον καθορισμό του site, στο παράθυρο του Dreamweaver (δεξιά) στην περιοχή Site πάνελ (Site Files): στο πεδίο τίτλου εμφανίζεται το όνομα fititika_nea και μέσα στο παράθυρο του site, εμφανίζεται ο φάκελος lists_styles. Κάντε δεξί κλικ πάνω στο φάκελο και επιλέξτε New File. Όπως διαπιστώνετε, κάτω από τον φάκελο δημιουργήθηκε ένα αρχείο Untitled.html. Δώστε σ αυτό το αρχείο το όνομα prova1.html. Κάνοντας διπλό κλικ πάνω στο αρχείο prova1.html επεξεργαστείτε την σελίδα. Για να ορίσετε τις ιδιότητες της σελίδας σας επιλέξτε από την γραμμή των μενού Modify > Page Properties και αφού ολοκληρώσετε τη συμπλήρωση των επιθυμητών τιμών στα πεδία πατήστε ΟΚ. Από τον επιθεωρητή ιδιοτήτων μπορείτε να ορίσετε για την κεφαλίδα (αφού την επιλέξετε) τον επιθυμητό τύπο γραμματοσειράς (Font) και το μέγεθος (Size). Δημιουργείστε τη λίστα με τις κουκίδες (μη διατεταγμένη) επιλέγοντας το σχετικό κείμενο και από τη γραμμή των μενού επιλέξτε Text > list > Unordered. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 27

28 Εναλλακτικά, μπορείτε να δημιουργήσετε τη λίστα πατώντας το κουμπί (Unordered List) του επιθεωρητή ιδιοτήτων. Δημιουργείστε τη λίστα με αριθμούς (διατεταγμένη) επιλέγοντας το σχετικό κείμενο και από την γραμμή των μενού επιλέξτε Text > list > Ordered. Εναλλακτικά, μπορείτε να δημιουργήσετε τη λίστα πατώντας το κουμπί (Ordered list) του επιθεωρητή ιδιοτήτων. Στο παράθυρο του Dreamweaver έχετε το εξής αποτέλεσμα: Αποθηκεύστε (File > Save). Για να δείτε πως θα φαίνεται στο φυλλομετρητή η σελίδα σας: επιλέξτε File > Preview in Browser (Προεπισκόπηση στο φυλλομετρητή) ή πατήστε το εικονίδιο ή πατήστε το πλήκτρο F12. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 28

29 Άσκηση 4 ΕΙΣΑΓΩΓΗ ΕΓΓΡΑΦΟΥ ΚΑΙ ΤΡΟΠΟΠΟΙΗΣΗ ΙΔΙΟΤΗΤΩΝ ΣΕΛΙΔΑΣ Στην σελίδα με το όνομα prova1.html (που δημιουργήσατε στην προηγούμενη άσκηση), να προσθέσετε στο κάτω μέρος της σελίδας το παρακάτω κείμενο: Στείλτε τις σκέψεις και τις προτάσεις σας στη δ/νση TUnea@kastoria.teikoz.grUT α) αντιγράφοντάς το από έγγραφο του Word β) εισάγοντας το συγκεκριμένο έγγραφο του Word. Στο νέο κομμάτι κειμένου βάλτε εσοχή, αλλάξτε τον τύπο γραμματοσειράς σε Arial, Helvetica, sans-serif και χρώμα κειμένου σε #99FFCC, και αυξήστε το μέγεθος γραμματοσειράς. Αποθηκεύστε τις αλλαγές με το όνομα prova2.html. Δείτε πως θα φαίνεται στο φυλλομετρητή η σελίδα σας. UΑπάντηση - Εφαρμογή βήμα-βήμαu α) Για να αντιγράψετε κείμενο από το Word: στο Dreamweaver, ανοίξτε τη σελίδα με το όνομα prova1.html: α) επιλέγοντας από την γραμμή των μενού File > Open File και αναζητώντας την σελίδα στο φάκελλο του site ή β) επιλέγοντας Site > Site Files στο παράθυρο του site fititika_nea εμφανίζεται ο φάκελος lists_styles. Κάντε κλικ στο + μπροστά από το φάκελο για να δείτε κάτω από τον φάκελο τις σελίδες του site και ανοίξτε το αρχείο prova1.html. Από την γραμμή των μενού επιλέξτε και ορίστε Document Encoding : Greek (ISO ). Modify > Page Properties Από την γραμμή μενού επιλέξτε Text > Format > Preformatted text ή από τον επιθεωρητή ιδιοτήτων επιλέξτε: Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 29

30 στο έγγραφο του Word, με επιλεγμένο το κομμάτι κειμένου, επιλέξτε αντιγραφή (με δεξί κλικ ή πατήστε τα πλήκτρα Ctrl+C) Στο παράθυρο του Dreamweaver, επικολλήστε το κείμενο στο επιθυμητό σημείο της σελίδας (με δεξί κλικ ή πατήστε τα πλήκτρα Ctrl+V) β) Για να εισάγετε έγγραφο από το word, πρέπει πρώτα να το αποθηκεύσετε σαν ιστοσελίδα. Κατόπιν ανοίξτε τη σελίδα με το όνομα prova1.html Επιλέξτε από τη γραμμή μενού File > Import > Import Word Html. Στο πλαίσιο διαλόγου Open επιλέξτε το αρχείο που θέλετε να εισάγετε και πατήστε Open. Στο πλαίσιο διαλόγου Clean Up World Html (με όλα τα πεδία επιλεγμένα) πατήστε ΟΚ. Για να βάλετε εσοχή στο νέο κομμάτι κειμένου, επιλέξτε το και πατήστε το κουμπί indent από τον επιθεωρητή ιδιοτήτων ή εναλλακτικά από την γραμμή των μενού επιλέξτε Text > Indent. Για αλλαγή στον τύπο της γραμματοσειράς, με επιλεγμένο το κείμενο, επιλέξτε Text > Font ή από τον Επιθεωρητή Ιδιοτήτων: Για αλλαγή στο χρώμα της γραμματοσειράς, με επιλεγμένο το κείμενο, επιλέξτε Text > Color ή από τον Επιθεωρητή Ιδιοτήτων στο πεδίο δίπλα στο βελάκι σημειώστε την επιθυμητή απόχρωση. Για αύξηση μεγέθους γραμματοσειράς, με επιλεγμένο το κείμενο, επιλέξτε Text > Size Change (+1) ή από τον Επιθεωρητή Ιδιοτήτων στο πεδίο Size επιλέξτε +1. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 30

31 Αποθηκεύστε τις αλλαγές με το όνομα prova2.html (File > Save as) αναζητώντας στη θέση C:\Τα έγγραφα μου τον φάκελλο efarmoges_dreamweaver, επιλέξτε τον (με διπλό αριστερό κλικ) και μετά επιλέξτε τον φάκελλο lists_styles. Στο παράθυρο του Dreamweaver έχετε το εξής αποτέλεσμα: Για να δείτε πως θα φαίνεται στο φυλλομετρητή η σελίδα σας: επιλέξτε File > Preview in Browser (Προεπισκόπηση στο φυλλομετρητή) ή πατήστε το εικονίδιο ή πατήστε το πλήκτρο F12. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 31

32 Άσκηση 5 ΣΤΥΛ ΠΑΡΑΓΡΑΦΟΥ ΚΑΙ ΣΤΥΛ ΧΑΡΑΚΤΗΡΑ (HTML STYLES) Στην σελίδα prova2.html του site fititika_nea, να κάνετε τις ακόλουθες αλλαγές: Στην κεφαλίδα της σελίδας εφαρμόστε ένα νέο στυλ χαρακτήρα παραγράφου με τα εξής χαρακτηριστικά: Name : kefalida When Applying : Clear Existing Style Font : Arial Narrow Size : 7 Color : #99FFCC Style: Bold Στην δεύτερη λίστα, εφαρμόστε ένα νέο στυλ παραγράφου με τα εξής χαρακτηριστικά: Name : lista When Applying : Clear Existing Style Font : Georgia, Times New Roman, Times, serif Size : 6 Color : #99FFFF Format: Heading 2 Αποθηκεύστε τις αλλαγές με νέο όνομα prova3.html. Δείτε πως θα φαίνεται στο φυλλομετρητή η ιστοσελίδα σας. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 32

33 UΑπάντηση - Εφαρμογή βήμα-βήμαu Ανοίξτε τη σελίδα με το όνομα prova2.html: α) επιλέγοντας από την γραμμή των μενού File > Open File και αναζητώντας την σελίδα στο φάκελλο του site ή β) επιλέγοντας Site > Site Files στο παράθυρο του site fititika_nea εμφανίζεται ο φάκελος lists_styles. Κάντε κλικ στο + μπροστά από το φάκελο για να δείτε κάτω από τον φάκελο τις σελίδες του site και ανοίξτε το αρχείο prova2.html. Για να εφαρμόσετε ένα στυλ χαρακτήρα: επιλέξτε το κείμενο (την κεφαλίδα) και από την γραμμή μενού επιλέξτε Window > Html Styles. Κάντε κλικ στο κουμπί New style Στο πλαίσιο διαλόγου Define HTML style στο πεδίο Name πληκτρολογείστε το όνομα του στυλ (Kefalida) και στα υπόλοιπα πεδία τις επιθυμητές τιμές. Πατήστε ΟΚ. Κάθε φορά που θέλετε να εφαρμόσετε το στυλ kefalida επιλέξτε το κείμενο και με δεξί κλικ επιλέξτε HTML Styles και μετά επιλέξτε το συγκεκριμένο στυλ kefalida. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 33

34 Για να εφαρμόσετε ένα στυλ παραγράφου: κάντε κλικ μέσα σε κάποιο σημείο της παραγράφου με την αριθμημένη λίστα και από την γραμμή μενού επιλέξτε Window > Html Styles. Κάντε κλικ στο το κουμπί New style Στο πλαίσιο διαλόγου Define HTML style στο πεδίο Name πληκτρολογείστε το όνομα του στυλ (lista) και στα υπόλοιπα πεδία τις επιθυμητές τιμές. Πατήστε ΟΚ. Στην περιοχή των βοηθητικών πάνελ (Design HTML Styles) εμφανίζονται τα στυλ που μόλις δημιουργήσατε. Κάθε φορά που θέλετε να εφαρμόσετε το στυλ lista κάντε κλικ μέσα στην παράγραφο και με δεξί κλικ επιλέξτε HTML Styles και μετά επιλέξτε το συγκεκριμένο στυλ lista. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 34

35 Αποθηκεύστε τις αλλαγές με το όνομα prova3.html (File > Save as) αναζητώντας στη θέση C:\Τα έγγραφα μου τον φάκελλο efarmoges_dreamweaver, επιλέξτε τον (με διπλό αριστερό κλικ) και μετά επιλέξτε τον φάκελλο lists_styles. Στο παράθυρο του Dreamweaver έχετε το εξής αποτέλεσμα: Για να δείτε πως θα φαίνεται στον φυλλομετρητή η σελίδα σας: επιλέξτε File > Preview in Browser ή πατήστε το εικονίδιο ή πατήστε το πλήκτρο F12. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 35

36 Άσκηση 6 ΕΝΣΩΜΑΤΩΜΕΝΑ ΦΥΛΛΑ ΣΤΥΛ ΚΑΙ ΕΞΩΤΕΡΙΚΑ ΦΥΛΛΑ ΣΤΥΛ (CSS STYLES) Στην σελίδα prova3.html του site fititika_nea, να κάνετε τις ακόλουθες αλλαγές: Κάτω από τη κεφαλίδα της σελίδας, στις δυο σειρές που ακολουθούν, εφαρμόστε ένα εσωτερικό φύλλο στυλ που θα δημιουργήσετε με όνομα style1 Κατηγορία Type Font: Times New Roman, Times, Serif Size: x-large Style: Normal Decoration: Underline Color: #FFCCCC Στην λίστα με τις κουκίδες και στις δυο τελευταίες σειρές, εφαρμόστε ένα εξωτερικό CSS style που θα δημιουργήσετε με όνομα exstyle και όνομα αρχείου exstyle. Κατηγορία Type Font: Arial, Helvetica, sans serif Size: 24 pixels Weight: bold Style: normal Line Height: 35 pixels Color: #FF99CC Κατηγορία Background Repeat: repeat-y Attachment: scroll Horizontal Position: left Vertical Position: top Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 36

37 Κατηγορία Block Word Spacing: 2 pixels Letter Spacing: 4 pixels Vertical Alignment: top White space: normal Να αλλάξετε την απόχρωση υπόβαθρου της σελίδας σε # Αποθηκεύστε τις αλλαγές με νέο όνομα prova4.html. Δείτε πως θα φαίνεται στον φυλλομετρητή η σελίδα σας. UΑπάντηση - Εφαρμογή βήμα-βήμαu Ανοίξτε τη σελίδα με το όνομα prova3.html: α) επιλέγοντας από την γραμμή των μενού File > Open File και αναζητώντας την στο φάκελλο του site ή β) επιλέγοντας Site > Site Files στο παράθυρο του site fititika_nea εμφανίζεται ο φάκελος lists_styles. Κάντε κλικ στο + μπροστά από το φάκελο για να δείτε κάτω από τον φάκελο τις σελίδες του site και ανοίξτε το αρχείο prova3.html. Για να δημιουργήσετε ένα εσωτερικό φύλλο στυλ, επιλέξτε από τη γραμμή μενού Window > CSS Styles και κάντε κλικ στο κουμπί New Style Στο πλαίσιο διαλόγου New CSS Style στο πεδίο name δηλώστε style1, επιλέξτε Type class και This Document Only. Πατήστε ΟΚ. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 37

38 Στο πλαίσιο διαλόγου Style Definition επιλέξτε την κατηγορία Type και συμπληρώστε τα πεδία. Πατήστε ΟΚ. Κάθε φορά που θέλετε να εφαρμόσετε αυτό το στυλ, επιλέξτε το κείμενο, κάντε δεξί κλικ και από το πτυσσόμενο μενού επιλέξτε CSS Styles και από εκεί το συγκεκριμένο στυλ (style1). Για να δημιουργήσετε ένα εξωτερικό φύλλο στυλ, επιλέξτε από τη γραμμή μενού Window > CSS Styles και κάντε κλικ στο κουμπί New Style Στο πλαίσιο διαλόγου New CSS Style, στο πεδίο name δηλώστε exstyle, επιλέξτε Type Redefine HTML Tag και New Style Sheet File και πατήστε ΟΚ. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 38

39 Στο πλαίσιο διαλόγου Save Style Sheet File As να δηλώσετε το όνομα exstyle και να ορίσετε ότι θα αποθηκευτεί το στυλ στον φάκελλο lists_styles μέσα στον φάκελλο efarmoges_dreamweaver. Στο πλαίσιο διαλόγου CSS Style Definition επιλέξτε την κατηγορία Type και δηλώστε τις τιμές στα πεδία. Κατόπιν δηλώστε τις τιμές στα πεδία για την κατηγορία Background και για την κατηγορία Block. Ολοκληρώνοντας, πατήστε ΟΚ. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 39

40 Για να εφαρμόσετε αυτό το (εξωτερικό) στυλ, στην κεφαλίδα της σελίδας κάντε κλικ στο κουμπί Attach Styles. Στο πλαίσιο διαλόγου Link External Style Sheet πατήστε Browse. Στο πλαίσιο διαλόγου Select Style Sheet File αναζητήστε το αρχείο css και επιλέξτε το. Επιστρέφοντας στο πλαίσιο διαλόγου Link External Style Sheet επιλέξτε Link (για σύνδεση της σελίδας με το φύλλο στυλ) ή επιλέξτε Import για εισαγωγή του φύλλου στυλ στη σελίδα. Στο εξής, όταν θέλετε να εφαρμόσετε αυτό το στυλ, θα επιλέγετε το κείμενο, θα κάνετε δεξί κλικ και από το πτυσσόμενο μενού επιλέγετε CSS Styles και από εκεί το συγκεκριμένο στυλ (exstyle). Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 40

41 Για να αλλάξετε απόχρωση υπόβαθρου της σελίδας επιλέξτε Modify > Page Properties και στο πεδίο Background δηλώστε την επιθυμητή απόχρωση # Αποθηκεύστε τις αλλαγές με το όνομα prova4.html (File > Save as) αναζητώντας στη θέση C:\Τα έγγραφα μου τον φάκελλο efarmoges_dreamweaver, επιλέξτε τον (με διπλό αριστερό κλικ) και μετά επιλέξτε τον φάκελλο lists_styles. Στο παράθυρο του Dreamweaver έχετε το εξής αποτέλεσμα: Για να δείτε πως θα φαίνεται στον φυλλομετρητή η σελίδα σας: επιλέξτε File > Preview in Browser ή πατήστε το εικονίδιο ή πατήστε το πλήκτρο F12. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 41

42 Άσκηση 7 ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΑΣ Στην σελίδα με το όνομα prova4.html του site fititika_nea, να κάνετε τις εξής αλλαγές: Χρώμα υπόβαθρου : # Κάτω από την κεφαλίδα να εισάγετε το κείμενο: Το κλειδί στην επιτυχία! Στο νέο κομμάτι κειμένου, να εφαρμόστε το στυλ CSS exstyle. Να εισάγετε στην σελίδα σας, κάτω από την κεφαλίδα μια σχετική χιουμοριστική εικόνα με ανάλογο εναλλακτικό κείμενο και μια εικόνα κλειδιού δίπλα στο νέο κομμάτι κειμένου και να προσαρμόσετε τις διαστάσεις τους. Αποθηκεύστε τις αλλαγές με το όνομα images.html. Δείτε πως θα φαίνεται στον φυλλομετρητή η σελίδα σας. UΑπάντηση - Εφαρμογή βήμα-βήμαu Ανοίξτε τη σελίδα με το όνομα prova4.html: α) επιλέγοντας από την γραμμή των μενού File > Open File και αναζητώντας την σελίδα στο φάκελλο του site ή β) επιλέγοντας Site > Site Files στο παράθυρο του site fititika_nea εμφανίζεται ο φάκελος lists_styles. Κάντε κλικ στο + μπροστά από το φάκελο για να δείτε κάτω από τον φάκελο τις σελίδες του site και ανοίξτε το αρχείο prova4.html. Για να ορίσετε νέα απόχρωση υπόβαθρου της σελίδας σας επιλέξτε από την γραμμή των μενού Modify > Page Properties και στο πεδίο Background δηλώστε την επιθυμητή απόχρωση (#008885). Πατήστε ΟΚ. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 42

43 Πληκτρολογήστε (κάτω από την κεφαλίδα) το κείμενο: Το κλειδί στην επιτυχία! Για να εφαρμόσετε το στυλ exstyle, επιλέξτε το κομμάτι νέο κειμένου, κάντε δεξί κλικ και από το πτυσσόμενο μενού επιλέξτε CSS Styles και από εκεί το συγκεκριμένο στυλ (exstyle). Για εισαγωγή της εικόνας: τοποθετήστε τον δρομέα στο επιθυμητό σημείο επιλέξτε από την γραμμή μενού Insert > Image ή πατήστε (από τις μπάρες εργαλείων) το κουμπάκι στο πλαίσιο διαλόγου Select Image Source αναζητήστε το αρχείο της εικόνας, επιλέξτε το και πατήστε το κουμπί Select. Κατόπιν εμφανίζεται ενα πλαίσιο διαλόγου για δημιουργία αντίγραφου της εικόνας: πατήστε ναι. Συμβουλή: καλό είναι πριν εισάγετε την εικόνα, να αντιγράψετε το αρχείο της εικόνας μέσα στον φάκελλο του site (frames_tables_links) δημιουργώντας φάκελλο με όνομα images. Για να αλλάξετε τις διαστάσεις της εικόνας και να την στοιχίσετε, ώστε να προσαρμοστεί στη σελίδα σας, επιλέξτε την εικόνα και κάντε τις αλλαγές από τον επιθεωρητή ιδιοτήτων. Στο πεδίο Alt θα πληκτρολογήσετε το επιθυμητό εναλλακτικό κείμενο για την πρώτη εικόνα (π.χ. Στον πίνακα σπασίκλες!) Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 43

44 Αποθηκεύστε τις αλλαγές με το όνομα images.html (File > Save as) αναζητώντας στη θέση C:\Τα έγγραφα μου τον φάκελλο efarmoges_dreamweaver, επιλέξτε τον (με διπλό αριστερό κλικ) και μετά επιλέξτε τον φάκελλο lists_styles. Στο παράθυρο του Dreamweaver έχετε το εξής αποτέλεσμα: Για να δείτε πως θα φαίνεται στο φυλλομετρητή η σελίδα σας: επιλέξτε File > Preview in Browser (Προεπισκόπηση στο φυλλομετρητή) ή πατήστε το εικονίδιο ή πατήστε το πλήκτρο F12. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 44

45 Εδώ βλέπετε πως θα φαίνεται το εναλλακτικό κείμενο, όταν ο χρήστης περνάει με το ποντίκι, επάνω από την εικόνα Εδώ βλέπετε πως θα φαίνεται η σελίδα σας στον φυλλομετρητή Internet Explorer. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 45

46 Άσκηση 8 ΠΛΑΙΣΙΑ (FRAMES) Να δημιουργήσετε ένα ιστοχώρο (web site) με όνομα fititikes_ekdromes και να τον αποθηκεύσετε στη θέση τα έγγραφά μου μέσα στο φάκελο efarmoges_dreamweaver όπου θα δημιουργήσετε νέο φάκελλο με όνομα frames_tables_links. Κατόπιν, μέσα στο site fititikes_ekdromes, να δημιουργήσετε τρεις σελίδες ως εξής: Κεντρική Σελίδα Τίτλος σελίδας : Τουρίστας Φοιτητής Ο φορέας Υλοποίησης Τίτλος σελίδας : Ο φορέας Υλοποίησης Τα Προγράμματα Τίτλος Σελίδας : Τα προγράμματα Όνομα αρχείου : index.html Όνομα αρχείου : foreas.html Όνομα αρχείου : programmes.html Να ανοίξετε την κεντρική σελίδα (index.html) και να την διαιρέσετε σε τρία πλαίσια (κεντρικό, επάνω και αριστερό). Στο επάνω πλαίσιο πληκτρολογήστε Τουρίστας Φοιτητής. Στο αριστερό πλαίσιο πληκτρολογήστε σε λίστα τον τίτλο των δυο άλλων σελίδων (Ο φορέας Υλοποίησης, Τα Προγράμματα) Στο κεντρικό πλαίσιο να εισάγετε το κείμενο : Φοιτητής ή Τουρίστας; Ανακαλύψτε πως μπορεί να συνυπάρχουν και οι δυο ιδιότητες. Επιλέξτε προτάσεις εκδρομών που απευθύνονται αποκλειστικά σε ομάδες φοιτητών συγγενών ειδικοτήτων. Ζήστε αξέχαστες ομαδικές εμπειρίες σε ελκυστικούς προορισμούς, επιλέγοντας προγράμματα διακοπών και μάθησης που συνδυάζουν το ταξίδι με τη γνώση και την περιπέτεια. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 46

47 Κάτω από την κεφαλίδα (Φοιτητής ή Τουρίστας;) να εισάγετε οριζόντια γραμμή σε μέγεθος (W)610 X (H)10, Align: Default, Shading. Να ορίσετε τις εξής ιδιότητες και χαρακτηριστικά για την κεντρική σας σελίδα (index.html): Απόχρωση υπόβαθρου: #CCCCFF Απόχρωση γραμμάτων: Τύπος γραμματοσειράς : Arial Document Encoding : Greek (ISO ). Όνομα και τίτλος επάνω πλαισίου : top frame Όνομα και τίτλος αριστερού πλαισίου : left frame Όνομα και τίτλος κεντρικού πλαισίου : main frame Χρώμα υπόβαθρου πλαισίων : CCCCFF Χρώμα περιγράμματος πλαισίων: Top Frame : Τουρίστας Φοιτητής : Η1, έντονα, στοίχιση στο κέντρο Main Frame (Φοιτητής ή Τουρίστας;) : Format : Η2, έντονα και πλάγια, στοίχιση στο κέντρο Main Frame (κείμενο) : Format paragraph, Arial Narrow, size: 4, στοίχιση στο κέντρο Left frame (Λίστα επιλογών) : Format : H4, Arial Narrow, size : None, list : Unordered list Να αποθηκεύσετε κάθε πλαίσιο ξεχωριστά (το επάνω πλαίσιο με όνομα αρχείου topframe.htm, το αριστερό πλαίσιο με όνομα αρχείου leftframe.htm και το κεντρικό πλαίσιο με όνομα αρχείου mainframe.htm) Να αποθηκεύστε το σύνολο των πλαισίων με όνομα αρχείου index.htm. Πειραματιστείτε αλλάζοντας σε σκούρο το υπόβαθρο (#000066) και ανοιχτόχρωμο το κείμενο (#CCCCFF) του επάνω και αριστερού πλαισίου, και εισάγετε οριζόντιες γραμμές κάτω από τους τίτλους της λίστας στο αριστερό πλαίσιο. Να ορίσετε μέγεθος γραμμάτων 5 στο κεντρικό πλαίσιο. Να εισάγετε στο κεντρικό πλάισιο, κατάλληλες αλληγορικές εικόνες (για φοιτητή και φύση), δεξιά και αριστερά της επικεφαλίδας. Τέλος, δείτε πως θα φαίνεται στον φυλλομετρητή η σελίδα σας. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 47

48 UΑπάντηση - Εφαρμογή βήμα-βήμα Από τη γραμμή των μενού, επιλέξτε το μενού Site > New Site. Για να καθορίσετε το site, στο Site Name πληκτρολογείστε το όνομα που θα δώσετε στον ιστοχώρο (site) σας: fititikes_ekdromes Για να ορίσετε τη θέση αποθήκευσης των αρχείων σας (where on your computer do you want to store your files?) με αριστερό κλικ στον κίτρινο φάκελο αναζητήστε στη θέση C:\Τα έγγραφα μου τον φάκελο efarmoges_dreamweaver, επιλέξτε τον (με διπλό αριστερό κλικ) και μετά με δεξί κλικ μέσα στο παράθυρο δημιουργείστε νέο φάκελλο με όνομα frames_tables_links τον οποίο θα επιλέξετε. Αφού ολοκληρώσετε τον καθορισμό του site, στο παράθυρο του site fititikes_ekdromes εμφανίζεται ο φάκελος του site frames_tables_links. Κάντε δεξί κλικ πάνω στο φάκελο και επιλέξτε New File. Όπως διαπιστώνετε, κάτω από τον φάκελο δημιουργήθηκε ένα αρχείο Untitled.html. Δώστε στο αρχείο το όνομα index.html. Με την ίδια διαδικασία κάνοντας δεξί κλικ πάνω στο φάκελο του site frames_tables_links και επιλέγοντας New File θα δημιουργήσετε και τις άλλες δυο σελίδες (με όνομα αρχείου foreas.html και programmes.html αντίστοιχα) Στο παράθυρο του Dreamweaver (δεξιά), στα αρχεία των site (Site Files ), κάτω από τον φάκελλο του site, εμφανίζονται τα αρχεία των σελίδων που μόλις δημιουργήσατε και αποθηκεύσατε. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 48

49 Aνοίξτε και επεξεργαστείτε την κεντρική σελίδα index.html κάνοντας (διπλό αριστερό) κλικ επάνω στο αρχείο index.html. Για να διαιρέστε την κεντρική σελίδα σε πλαίσια επιλέξτε από τη γραμμή μενού Insert > Frames > Top Nested Left ή από τις μπάρες εργαλείων κάντε κλικ στο κουμπάκι Frames και επιλέξτε την επιθυμητή διάταξη πλαισίων Θα ορίσετε τις ιδιότητες κάθε πλαισίου χωριστά, κάνοντας κλικ μέσα στο πλαίσιο και επιλέγοντας από την γραμμή των μενού Modify > Page Properties και ολοκληρώνοντας πατήστε ΟΚ. Για να ορίσετε γραμματοσειρά Arial Narrow, από τον Επιθεωρητή Ιδιοτήτων στο πεδίο κλικ στο βελάκι και επιλέξτε Edit Font List κάντε και μετά από τα Available Fonts επιλέξτε Arial Narrow και πατήστε το κουμπάκι με το διπλό βελάκι (στη μέση) για να μεταφέρετε τη γραμματοσειρά στο αριστερό πλαίσιο Chosen Fonts. Μπορείτε να ορίσετε το χρώμα του περιγράμματος κάθε πλαισίου, αφού επιλέξετε το πλαίσιο (με κλικ στο περίγραμμά του) και μετά από τον επιθεωρητή ιδιοτήτων να επιλέξετε στο πεδίο Border Yes και στο πεδίο Border Color να ορίσετε τον κωδικό της επιθυμητής απόχρωσης. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 49

50 Μπορείτε να εισάγετε οριζόντια γραμμή τοποθετώντας τον δρομέα στο επιθυμητό σημείο και επιλέγοντας Insert > Horizontal Rule ή από τις μπάρες εργαλείων με κλικ στο αντίστοιχο κουμπάκι και από τον επιθεωρητή Ιδιοτήτων να ορίσετε τις επιθυμητές ιδιότητες της γραμμής. Θα αποθηκεύσετε κάθε πλαίσιο χωριστά, κάνοντας κλικ μέσα στο πλαίσιο και μετά από τη γραμμή μενού επιλέγοντας File > Save Frame As (το επάνω πλαίσιο με όνομα αρχείου topframe.htm, το αριστερό πλαίσιο με όνομα leftframe.htm και το κεντρικό πλαίσιο με όνομα mainframe.htm) Για να αποθηκεύσετε μαζί όλα τα πλαίσια επιλέξτε τα (με κλικ σε ένα από τα όρια των πλαισίων) και από τη γραμμή μενού επιλέξτε File > Save Frameset As (ορίζοντας όνομα αρχείου: index.htm). Στο παράθυρο του Dreamweaver (δεξιά), στα αρχεία των site (Site Files ), κάτω από τον φάκελλο του site, εμφανίζονται τα αρχεία των σελίδων και των πλαισίων που μόλις δημιουργήσατε και αποθηκεύσατε. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 50

51 Στο παράθυρο εγγράφου του Dreamweaver έχετε το εξής αποτέλεσμα: UΠειραματιστείτε κάνοντας αλλαγές στη σελίδα σας Στο κεντρικό πλαίσιο, με επιλεγμένο το κείμενο, θα αυξήσετε σε 5 το μέγεθος γραμμάτων, από τον επιθεωρητή ιδιοτήτων: Στο επάνω και αριστερό πλαίσιο: επιλέγοντας από τη γραμμή μενού Modify > Page Properties θα ορίσετε σκούρο υπόβαθρο (#000066) και ανοιχτόχρωμο κείμενο (#CCCCFF). Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 51

52 Στο αριστερό πλαίσιο θα εισάγετε οριζόντιες γραμμές κάτω από τους τίτλους της λίστας (τοποθετώντας τον δρομέα στο επιθυμητό σημείο και επιλέγοντας Insert > Horizontal Rule ή από τις μπάρες εργαλείων με κλικ στο αντίστοιχο κουμπάκι και από τον επιθεωρητή Ιδιοτήτων θα ορίσετε τις επιθυμητές ιδιότητες της γραμμής). Για εισαγωγή αλληγορικής εικόνας, αριστερά της κεφαλίδας: τοποθετήστε τον δρομέα στο επιθυμητό σημείο επιλέξτε από την γραμμή μενού Insert > Image ή πατήστε (από τις μπάρες εργαλείων) το κουμπάκι στο πλαίσιο διαλόγου Select Image Source αναζητήστε το αρχείο της εικόνας, επιλέξτε το και πατήστε το κουμπί Select. Κατόπιν εμφανίζεται ενα πλαίσιο διαλόγου για δημιουργία αντίγραφου της εικόνας: πατήστε ναι. Συμβουλή: καλό είναι πριν εισάγετε την εικόνα, να αντιγράψετε το αρχείο της εικόνας μέσα στον φάκελλο του site (frames_tables_links) δημιουργώντας φάκελλο με όνομα images. Με επιλεγμένη την εικόνα, ορίστε τις ιδιότητες της στον επιθεωρητή ιδιοτήτων: αλλάζοντας τις διαστάσεις της αν είναι απαραίτητο και στοιχίστε την, ώστε να την προσαρμόσετε στη σελίδα σας. Με τον ίδιο τρόπο εισάγετε και μια αλληγορική εικόνα δεξιά της κεφαλίδας και ορίζετε τις ιδιότητές της στον επιθεωρητή ιδιοτήτων: Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 52

53 Στο παράθυρο εγγράφου του Dreamweaver θα έχετε το εξής αποτέλεσμα: Αποθηκεύστε τις αλλαγές (File > Save Frame as ) Για να δείτε πως θα φαίνεται στον φυλλομετρητή η σελίδα σας, επιλέξτε File > Preview in Browser ή πατήστε το εικονίδιο ή πατήστε το πλήκτρο F12. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 53

54 Άσκηση 9 ΠΙΝΑΚΕΣ (TABLES), ΣΥΝΔΕΣΜΟΙ (LINKS) ΚΑΙ ΕΠΙΠΕΔΑ (LAYERS) Στον ιστοχώρο fititikes_ekdromes (της άσκησης 8): 1) να ξαναδημιουργήσετε την κεντρική σελίδα (όνομα αρχείου index_tables.html) εισάγοντας 2 πίνακες, έναν πίνακα επάνω με 1 γραμμή και 1 στήλη και 1 πίνακα κάτω με 1 γραμμή και 2 στήλες. 2) να συνδέσετε την κεντρική σελίδα (index.htm) με τις σελίδες foreas.html και programmes.html, δημιουργώντας στο αριστερό πλαίσιο συνδέσμους μέσα σε πίνακα (2 γραμμών και 1 στήλης με εικόνα σαν υπόβαθρο). 3) στη σελίδα με τίτλο Τα Προγράμματα (programmes.html), να ορίσετε τις εξής ιδιότητες: Χρώμα γραμμάτων: Τύπος γραμματοσειράς : Arial Document Encoding : Greek (ISO ). Για την κεφαλίδα της σελίδας (Τα Προγράμματα) να ορίσετε Format: Heading1 Font: Default Size: 6 Χρώμα: # στοίχιση: στο κέντρο. Να εισάγετε το κείμενο (σε Format Heading 4, στοίχιση:κέντρο): Τα προγράμματα μας υλοποιούνται-χρηματοδοτούνται με συνεργασία φορέων τοπικής αυτοδιοίκησης και τριτοβάθμιων ιδρυμάτων. Απευθύνονται σε φοιτητές διαφόρων ειδικοτήτων και έχουν στόχο τη σύνδεση της γνώσης με τον πολιτισμό και το περιβάλλον. Προσφέρουν θαυμάσιες διακοπές με συμβολικό κόστος, με αντάλλαγμα συμμετοχή σε αναπτυξιακές μελέτες. Περιλαμβάνουν: παροχή υποστηρικτικής γνώσης, από ακαδημαϊκούς δασκάλους, την πρώτη εβδομάδα κάθε προγράμματος. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 54

55 P σειρά: P στήλης: P και P στήλης: συμμετοχή των φοιτητών σε ομάδα μελετών τις επόμενες εβδομάδες, με επίβλεψη καθηγητών Πανεπιστημίων και ΤΕΙ. διαμονή σε παραδοσιακούς ξενώνες και εκδρομές στη φύση και την παράδοση. Αυτή την περίοδο τρέχουν δυο προγράμματα: Τίτλος προγράμματος Περιγραφή Συμμετοχή Διαδρομές στη Φύση και τον Πολιτισμό Παραδοσιακή Αρχιτεκτονική και Βιώσιμη Ανάπτυξη Διαμονή για 2 μήνες στο ξακουστό Πήλιο Ν. Μαγνησίας. Μελέτη ανάπτυξης οικοτουρισμού μέσω προβολής της πηλιωρίτικης αρχιτεκτονικής και αξιοποίησης των φυσικών διαδρομών της περιοχής, με σεβασμό στο περιβάλλον. Συντονιστές καθηγητές του Πανεπιστημίου Θεσσαλίας και ΤΕΙ Λάρισας). Διαδρομές με άλογα στο μαγευτικό βουνό και βουτιές στις υπέροχες παραλίες. Διαμονή για 2 μήνες στα περίφημα Ζαγοροχώρια Ν.Ιωαννίνων. Μελέτη για ανάπτυξη οικοτουρισμού μέσω προβολής της ζαγορίσιας αρχιτεκτονικής και του φυσικού κάλλους και μέσω αξιοποίησης φυσικών προϊόντων της περιοχής (αρωματκά βότανα, μανιτάρια). Συντονιστές καθηγητές του τοπικού Πανεπιστημίου και ΤΕΙ. Διαδρομές στη χαράδρα του Βίκου και εξτρήμ σπορ στον Αώο και Βοϊδομάτη. Φοιτητές (τελευταίου έτους) σχολών: Πολυτεχνικών, Οικονομικών και Πληροφορικής. Συμβολικό ποσό συμμετοχής: 100 Φοιτητές (τελευταίου έτους) σχολών: Πολυτεχνικών, Οικονομικών και Πληροφορικής. Συμβολικό ποσό συμμετοχής: 100 Θα εισάγετε τον παραπάνω πίνακα και θα ορίσετε τις εξής ιδιότητες: Για 1P η υπόβαθρο:#ffff99, περίγραμμα:#66ffff, στοίχιση: κέντρο. Για 2η και 3η σειρά της 1P στοίχιση στο κέντρο, υπόβαθρο: #FFFFCC. Για 2η και 3η σειρά της 2P ης ης απόχρωση γραμμάτων: # Bold, 3P ης υπόβαθρο: #99CCCC. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 55

56 Κάτω από τον πίνακα να εισάγετε το κείμενο Επικοινωνήστε μαζί μας με το οποίο να δημιουργήστε σύνδεσμο ηλεκτρονικού ταχυδρομείου Να εισάγετε layer επάνω και κάτω από την επικεφαλίδα της σελίδας. Ολοκληρώνοντας, δείτε πως θα φαίνονται στον φυλλομετρητή οι σελίδες σας και επιβεβαιώστε τη λειτουργικότητα των συνδέσμων. UΑπάντηση - Εφαρμογή βήμα-βήμαu UΥποερώτημα 1U Από τη γραμμή μενού επιλέξτε Site > Site Files και εκεί επιλέξτε το site fititikes_ekdromes. Στο παράθυρο του site εμφανίζεται ο φάκελος frames_tables_links. Κάντε δεξί κλικ και επιλέξτε New File. Όπως διαπιστώνετε, κάτω από τον φάκελο δημιουργήθηκε ένα αρχείο Untitled.html. Δώστε στο αρχείο το όνομα index_tables.html. Για να δημιουργήσετε την κεντρική σελίδα όχι με πλαίσια αλλά με πίνακες, εργαστείτε ως εξής: Για να εισάγετε πίνακα, τοποθετήστε το δρομέα στο επιθυμητό σημείο και: πατήστε τα πλήκτρα Ctrl + Alt + T ή από τη γραμμή μενού επιλέξτε Insert > Table ή από τη μπάρα εργαλείων κάντε κλικ στο σχετικό εικονίδιο Εισάγετε έναν πίνακα με 1 γραμμή και 1 στήλη. Στο πλαίσιο διαλόγου Insert Table συμπληρώστε τα πεδία και πατήστε ΟΚ. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 56

57 Επιλέξτε τον πίνακα και θα ορίσετε τις επιθυμητές ιδιότητές του από τον επιθεωρητή ιδιοτήτων: Πληκτρολογήστε μέσα στο κελί, την επικεφαλίδα Τουρίστας Φοιτητής και ορίστε ιδιότητες: Εισάγετε έναν πίνακα κάτω με 1 γραμμή και 2 στήλες. Στο πλαίσιο διαλόγου Insert Table συμπληρώστε τα πεδία και πατήστε ΟΚ. Επιλέξτε τον πίνακα και θα ορίσετε τις επιθυμητές ιδιότητές του από τον επιθεωρητή ιδιοτήτων: Στο αριστερό κελί πληκτρολογήστε τους τίτλους σελίδων και στο δεξιό κελί πληκτρολογήστε το κείμενο. Επιλέξτε το αριστερό κελί (Ctrl+κλικ) και ορίστε ιδιότητες: Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 57

58 Αποθηκεύστε τις αλλαγές (File > Save as με όνομα index_tables.html). Στο παράθυρο του Dreamweaver έχετε το εξής αποτέλεσμα για τη σελίδα index_tables.html UΥποερώτημα 2 Ανοίξτε και επεξεργαστείτε την κεντρική σελίδα index.htm α) επιλέγοντας από την γραμμή των μενού File > Open File και αναζητώντας την σελίδα στο φάκελλο του site ή β) επιλέγοντας Site > Site Files στο παράθυρο του site fititikes_ekdromes εμφανίζεται ο φάκελος frames_tables_links. Κάντε κλικ στο + μπροστά από το φάκελο για να δείτε κάτω από τον φάκελο τις σελίδες του site και ανοίξτε το αρχείο index.htm. Στη σελίδα αυτή θα επεξεργαστείτε το κεντρικό πλαίσιο (mainframe.htm). Για να εμφανιστούν τα όρια των πλαισίων, επιλέξτε από τη γραμμή μενού View > Visual Aids > Invisible Elements. UΕισαγωγή πίνακα και συνδέσμων Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 58

59 Για να συνδέσετε την κεντρική σελίδα (index.html) με τις σελίδες foreas.html και programmes.html, εισάγετε στο αριστερό πλαίσιο πίνακα με 2 σειρές και 1 στήλη όπου θα επικολλήσετε το όνομα κάθε σελίδας (Ο φορέας Υλοποίησης Τα Προγράμματα), εργαζόμενοι ως εξής: Για να εισάγετε πίνακα, τοποθετήστε το δρομέα στο επιθυμητό σημείο και: πατήστε τα πλήκτρα Ctrl + Alt + T ή από τη γραμμή μενού επιλέξτε Insert > Table ή από τη μπάρα εργαλείων κάντε κλικ στο σχετικό εικονίδιο Στο πλαίσιο διαλόγου Insert Table συμπληρώστε τα πεδία και πατήστε ΟΚ. Στη συνέχεια, στο πρώτο κελί επικολλήστε το κείμενο Ο φορέας Υλοποίησης και στο δεύτερο κελί το κείμενο Τα Προγράμματα. Επιλέξτε τον πίνακα και θα ορίσετε τις επιθυμητές ιδιότητές του από τον επιθεωρητή ιδιοτήτων. Ορίστε μια εικόνα σαν υπόβαθρο κελιών (από το πεδίο Bg Image) κάνοντας κλικ στο φάκελλο και αναζητώντας και επιλέγοντας μια κατάλληλη εικόνα. Για να ορίσετε ιδιότητες κελιών: Ctrl+κλικ στο κελί και επιλέξτε επιθυμητό πλάτος και ύψος (από τα πεδία UW Uκαι UHU). Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 59

60 Για δημιουργία συνδέσμων: Επιλέξτε τον τίτλο σελίδας (Ο φορέας Υλοποίησης) και στον επιθεωρητή ιδιοτήτων, ορίστε Format:Heading 4, χρώμα: # Στο πεδίο Link πληκτρολογήστε το όνομα αρχείου της σελίδας σύνδεσης (foreas.html). Στο πεδίο Target επιλέξτε (με το βελάκι) blank. Πατήστε ΟΚ. Κατόπιν επιλέξτε τον τίτλο της άλλης σελίδας (Τα Προγράμματα) και στον επιθεωρητή ιδιοτήτων, ορίστε Format:Heading 4, χρώμα: # Στο πεδίο Link πληκτρολογήστε το όνομα αρχείου της σελίδας σύνδεσης (programmes.html). Στο πεδίο Target επιλέξτε (με το βελάκι) blank. ΟΚ. Αποθηκεύστε τις αλλαγές (File > Save Frame as ). Στο παράθυρο εγγράφου του Dreamweaver θα έχετε το εξής αποτέλεσμα για τους συνδέσμους, μέσα στον πίνακα, στο αριστερό πλαίσιο της κεντρικής σελίδας Τουρίστας Φοιτητής: ο τίτλος κάθε σελίδας εμφανίζεται με γαλάζιο χρώμα και υπογραμμισμένος (καθώς μετατράπηκε σε σύνδεσμο). Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 60

61 P και P σειρά P στήλης UΥποερώτημα 3 Ανοίξτε το αρχείο programmes.html. Για να ορίσετε τις ιδιότητες της σελίδας σας επιλέξτε από την γραμμή των μενού Modify > Page Properties και αφού ολοκληρώσετε τη συμπλήρωση των επιθυμητών τιμών στα πεδία πατήστε ΟΚ. Πληκτρολογήστε την επικεφαλίδα Τα Προγράμματα. Από τον επιθεωρητή ιδιοτήτων μπορείτε να ορίσετε για την κεφαλίδα (αφού την επιλέξετε) το Format, τον επιθυμητό τύπο και μέγεθος γραμματοσειράς, χρώμα και στοίχιση. Να εισάγετε το κείμενο κάτω από την κεφαλίδα και ορίστε Format Heading 4 και στοίχιση στο κέντρο. Εισάγετε πίνακα τοποθετώντας το δρομέα στο επιθυμητό σημείο και όπως παραπάνω (Insert > Table.) Στη συνέχεια θα ορίσετε τις επιθυμητές ιδιότητες του πίνακα (από τον επιθεωρητή ιδιοτήτων) επιλέγοντας την επιθυμητή απόχρωση υπόβαθρου κελιών (από το πεδίο Bg). Παράδειγμα, για την 2P ιδιότητες ως εξής: η 3P η της 1P ης του πίνακα ορίζετε τις Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 61

62 UΕισαγωγή συνδέσμου Πληκτρολογήστε το κείμενο Επικοινωνήστε μαζί μας, επιλέξτε το και από τον επιθεωρητή ιδιοτήτων να ορίσετε Format:Heading 3 και στοίχιση κέντρο. Για να δημιουργήσετε σύνδεσμο , επιλέξτε το κείμενο και εναλλακτικά: α) από τη γραμμή μενού επιλέξτε Insert > link ή β) από τη μπάρα εργαλείων πατήστε το κουμπάκι (Insert link) και στο πλαίσιο διαλόγου Insert link, στο πεδίο πληκτρολογείστε την διεύθυνση ηλεκτρονικού ταχυδρομείου fititika@kastoria.teikoz.gr ή γ) από τον επιθεωρητή ιδιοτήτων στο πεδίο link πληκτρολογείστε mailto:fititika@kastoria.teikoz.gr UΕισαγωγή επιπέδου (layer) επάνω και κάτω από την κεφαλίδα Για να εισάγετε επίπεδο, από τη μπάρα εργαλείων, κάντε κλικ στο εικονίδιο σχεδίασης επιπέδου (Draw Layer) και σύρτε το σταυρόνημα μέσα στη σελίδα, για να χαράξετε το επιθυμητό μέγεθος επιπέδου, επάνω από την επικεφαλίδα της σελίδας και μετά με τον ίδιο τρόπο κάτω από την επικεφαλίδα. Κάντ κλικ στο περίγραμμα του επιπέδου και στον επιθεωρητή ιδιοτήτων θα κάνετε κλικ στο φάκελλο, δίπλα από το πεδίο Bg Image, για να αναζητήσετε και να επιλέξετε, μια κατάλληλη εικόνα σαν υπόβαθρο (εννοείται ότι την εικόνα αυτή την έχετε από πριν εντοπίσει και αποθηκεύσει στο φάκελλο images του site). Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 62

63 Στο παράθυρο εγγράφου του Dreamweaver θα έχετε το εξής αποτέλεσμα για την σελίδα Τα Προγράμματα (programmes.html) Για να δείτε πως θα φαίνονται στον φυλλομετρητή οι σελίδες σας: επιλέξτε File > Preview in Browser ή πατήστε το εικονίδιο ή πατήστε το πλήκτρο F12. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 63

64 Εδώ βλέπετε πως θα φαίνεται η κεντρική σελίδα σας (Τουρίστας Φοιτητής) στον φυλλομετρητή Internet Explorer. Επιβεβαιώστε τη λειτουργία των συνδέσμων στο αριστερό πλαίσιο: κάνοντας κλικ στον τίτλο σελίδας π.χ. Τα Προγράμματα, διαπιστώνετε ότι οδηγείστε πράγματι στην αντίστοιχη σελίδα σύνδεσης. Kάνοντας κλικ στο Επικοινωνήστε μαζί μας διαπιστώνετε ότι ανοίγει το πρόγραμμα για αποστολή μηνύματος στη δ/νση που ορίσατε Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 64

65 P Άσκηση 10 ΦΟΡΜΕΣ (FORMS), ΠΤΥΣΣΟΜΕΝΑ ΜΕΝΟΥ (JUMP MENUS), ΕΠΩΝΥΜΕΣ ΑΓΚΥΡΩΣΕΙΣ (NAMED ANCHORS) ΚΑΙ ΕΙΚΟΝΕΣ ΕΝΑΛΛΑΓΗΣ (ROLLOVER IMAGES) Στον ιστοχώρο fititikes_ekdromes (της άσκησης 9): 1) Δημιουργείστε μια νέα σελίδα photos.html, με φωτογραφίες των προορισμών και εξωτερικούς συνδέσμους για βίντεο. Συνδέστε την σελίδα με τις άλλες σελίδες του site, δημιουργώντας πτυσσόμενο μενού. Με τη νέα σελίδα θα συνδέεται η κεντρική σελίδα index.htm (προσθέστε 3P σειρά στον πίνακα στο αριστερό πλαίσιο της κεντρικής σελίδας). 2) Στη σελίδα Τα Προγράμματα (programmes.html): α) Αντικαταστήστε τα επίπεδα με πίνακα 2 σειρών και 3 στηλών, με υπόβαθρο διαφορετική εικόνα σε κάθε σειρά. Η μεσαία στήλη της κάτω σειράς θα περιέχει την εμπλουτισμένη κεφαλίδα Τα Προγράμματα και η συμμετοχή σας. β) Να εισάγετε, στα αριστερά κελιά του πίνακα μια εικόνα εναλλαγής (rollover image) για το Ζαγόρι και μια για το Πήλιο. Κάτω από τον πίνακα, εισάγετε μια κατάλληλη αλληγορική εικόνα. Κάτω από αυτή την εικόνα, πληκτρολογήστε το κείμενο Ταξιδέψτε σε περιοχές μοναδικού φυσικού κάλλους! Ενα άγγιγμα κλικ στα φτερά της πεταλούδας, σας προσφέρει μια πρώτη γεύση από το μαγευτικό Ζαγόρι και το μυθικό Πήλιο!!! (format:heading 2, size: 5, χρώμα γραμμάτων:#663366) Δεξιά αυτού του κειμένου να εισάγετε μια πεταλούδα (εικόνα), την οποία θα συνδέσετε με τη νέα σελίδα photos.html. Στο κάτω μέρος της σελίδας, να εισάγετε μια εικόνα με όνομα Κεντρική που θα οδηγεί τον χρήστη πίσω στην Κεντρική Σελίδα (index.html). Και στις τρεις εικόνες να εισάγετε εναλλακτικό κείμενο. γ) Στο κάτω μέρος της σελίδας, να διαγράψτε το κείμενο Επικοινωνήστε μαζί μας και να εισάγετε φόρμα με στοιχεία: Δηλώστε τη συμμετοχή σας στο πρόγραμμα που επιθυμείτε Όνομα Επίθετο Σχολή Φοίτησης Δ/νση Τρ οπος Πληρωμής Επιλεγόμενος Προορισμός Ζαγόρι Πήλιο (σε πτυσσόμενη λίστα) Submit η Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 65

66 Για την 1η σειρά της φόρμας να ορίσετε format : Heading1, P P font: Arial, Helvetica, sans-serif, size: 5, χρώμα γραμμάτων: #660000, υπόβαθρο: FFFFCC. Για τις υπόλοιπες σειρές της φόρμας να ορίσετε format: Paragraph, font: Arial, Helvetica, sans-serif, size: 4, χρώμα γραμμάτων:#000033, υπόβαθρο:#ebd7fb. Να εισάγετε κουμπί για υποβολή της φόρμας μέσω . Να συνδέσετε την κεφαλίδα (της σελίδας) με τη φόρμα, με επώνυμη αγκύρωση που θα δημιουργήσετε στην 1η σειρά της φόρμας. Να επιβεβαιώσετε τη λειτουργία συνδέσμων, εικόνων, αγκύρωσης και φόρμας. Απάντηση - Εφαρμογή βήμα-βήμα U U Υποερώτημα 1 U U Για να δημιουργήσετε νέα σελίδα: στο παράθυρο του site fititikes_ekdromes εμφανίζεται ο φάκελος του site frames_tables_links. Κάντε δεξί κλικ πάνω στο φάκελο και επιλέξτε New File. Στο αρχείο Untitled.html που δημιουργείται κάτω από το φάκελλο, δώστε το όνομα photos.html. Ανοίξτε και επεξεργαστείτε την νέα σελίδα photos.html. Αναζητήστε και εισάγετε φωτογραφίες από τις περιοχές Ζαγορίου και Πηλίου. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 66

67 Δημιουργείστε εξωτερικούς συνδέσμους (Hyperlinks) που θα οδηγούν τον χρήστη σε άλλα web site, με φωτογραφίες, βίντεο και παρόμοιο υλικό: Στο κάτω μέρος της σελίδας πληκτρολογήστε το κείμενο Σύνδεσμοι για φωτογραφικό υλικό και βίντεο Ζαγόρι Πήλιο Επιλέξτε το κείμενο Σύνδεσμοι για φωτογραφικό υλικό και βίντεο και από τον επιθεωρητή ιδιοτήτων ορίστε μορφοποίηση Heading 3 και στοίχιση στο κέντρο. Επιλέξτε το κείμενο Ζαγόρι και από τον επιθεωρητή ιδιοτήτων ορίστε μορφοποίηση Heading 4, στοίχιση στο κέντρο και στο πεδίο Link πληκτρολογήστε τη διεύθυνση (URL) προορισμού και στο πεδίο Target επιλέξτε (με το βελάκι) parent. Επιλέξτε το κείμενο Πήλιο και στον επιθεωρητή ιδιοτήτων εργαστείτε ομοίως. Στο παράθυρο εγγράφου του Dreamweaver θα έχετε το εξής αποτέλεσμα για τους συνδέσμους που δημιουργήσατε (εμφανίζονται υπογραμμισμένοι): Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 67

68 UΔημιουργία Πτυσσόμενου Μενού (Jump Menu) Στο κάτω μέρος της σελίδας, πληκτρολογήστε το κείμενο Σε ποιά σελίδα θέλετε να επιστρέψετε; (από τον επιθεωρητή ιδιοτήτων ορίστε Heading 5, στοίχιση κέντρο). Τοποθετείστε το δρομέα κάτω από το κείμενο και εισάγετε πτυσσόμενο μενού (αντικείμενο φόρμας) επιλέγοντας Insert > Form Objects > Jump Menu Στο πλαίσιο διαλόγου Insert Jump Menu θα ορίσετε τα στοιχεία του μενού: μέσα στο πεδίο Text πληκτρολογήστε Τα Προγράμματα για το πεδίο When Selected, Go to URL κάντε κλικ στο κουμπί και αναζητήστε και επιλέξτε την αντίστοιχη σελίδα programmes.htm Στο πεδίο Options επιλέξτε Insert Go Button. Kάντε κλικ στο κουμπί και εργαστείτε με παρόμοιο τρόπο για την Κεντρική και κατόπιν για τον Φορέα Υλοποίησης. Πατήστε ΟΚ. Στο παράθυρο εγγράφου του Dreamweaver δημιουργήθηκε μια φόρμα (κόκκινο περίγραμμα) με το πτυσσόμενο μενού. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 68

69 Κάνοντας κλικ μέσα στη φόρμα θα ορίσετε από τον επιθεωρητή ιδιοτήτων κεντρική στοίχιση. Κάντε κλικ στο περίγραμμα του πτυσσόμενου μενού και στον επιθεωρητή ιδιοτήτων, στο πεδίο Target επιλέξτε (με το βελάκι) blanc. Στη φόρμα, κάντε κλικ στο κουμπάκι Go και στον επιθεωρητή ιδιοτήτων, στο πεδίο Action επιλέξτε Submit form. Στο πτυσσόμενο μενού, κάνοντας κλικ στο βελάκι εμφανίζονται (στον επιθεωρητή ιδιοτήτων) στο πεδίο Initially Selected τα στοιχεία του πτυσσόμενου μενού που εισάγατε. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 69

70 P σειράς, P σειρά UΣύνδεση της κεντρικής σελίδας (index.htm) με τη νέα σελίδα (photos.html) Ανοίξτε την κεντρική σελίδα Τουρίστας Φοιτητής (index.htm). Στο αριστερό πλαίσιο, στον πίνακα προσθέστε 3P η (τοποθετήστε το δρομέα στο δεύτερο κελί και με δεξί κλικ επιλέξτε Table > Insert Row) και στο νέο κελί πληκτρολογήστε Οι Προορισμοί Φωτογραφίες και video Επιλέξτε το κείμενο Οι Προορισμοί και δημιουργείστε σύνδεσμο με τη σελίδα photos.html ως εξής: Στον επιθεωρητή ιδιοτήτων, στο πεδίο Link πληκτρολογήστε το όνομα αρχείου της σελίδας σύνδεσης (photos.html). Στο πεδίο Target επιλέξτε (με το βελάκι) blank. Ορίστε Format:Heading 4, χρώμα: # Πατήστε ΟΚ. Στο παράθυρο εγγράφου του Dreamweaver θα έχετε το εξής αποτέλεσμα για τους συνδέσμους, μέσα στον πίνακα με τις 3 σειρές, στο αριστερό πλαίσιο της κεντρικής σελίδας Τουρίστας Φοιτητής: στο κελί της 3P ης το κείμενο Οι Προορισμοί εμφανίζεται με γαλάζιο χρώμα και υπογραμμισμένο (καθώς μετατράπηκε σε σύνδεσμο). Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 70

71 UΥποερώτημα 2αU Ανοίξτε τη σελίδα Τα Προγράμματα (programmes.html) Μπορείτε να μετατρέψετε τα επίπεδα σε πίνακες (Modify > Convert > Layers to Tables) και στο πλαίσιο διαλόγου που εμφανίζεται να ορίσετε παραμέτρους: Επιλέξτε τον πίνακα και από τον επιθεωρητή ιδιοτήτων ορίστε τις ιδιότητές του Επιλέξτε τα κελιά της επάνω σειράς του πίνακα και συγχωνεύστε τα: με δεξί κλικ επιλέξτε Table > Merge Cells. Επιλέξτε το συγχωνευμένο κελί και ορίστε ιδιότητες, εισάγοντας σαν υπόβαθρο κατάλληλη εικόνα: Επιλέξτε την κεφαλίδα και επικολλήστε την στο κάτω μεσαίο κελί συμπληρώνοντας το κείμενο και η συμμετοχή σας. Θα ορίσετε ιδιότητες, επιλέγοντας σαν υπόβαθρο κατάλληλη εικόνα: Στο παράθυρο εγγράφου του Dreamweaver εμφανίζονται οι αλλαγές: Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 71

72 UΥποερώτημα 2βU Στη σελίδα Τα Προγράμματα (programmes.html): Για εισαγωγή στα αριστερά κελιά του πίνακα εικόνων εναλλαγής (rollover images), αναζητήστε και επιλέξτε εικόνες ίδιου μεγέθους για τους προορισμούς (Ζαγόρι και Πήλιο), και εργαστείτε ως εξής: τοποθετήστε τον δρομέα στο επιθυμητό σημείο στο επάνω αριστερό κελί επιλέξτε από την γραμμή μενού Insert > Interactive Images > Rollover Image ή πατήστε (από τις μπάρες εργαλείων) το κουμπάκι στο πλαίσιο διαλόγου Insert Rollover Image με κλικ στο Browse αναζητήστε το αρχείο της πρώτης εικόνας (Original Image) Πηλίου και επιλέξτε το. Κάντε το ίδιο για την εικόνα εναλλαγής (Rollover Image) που θα εμφανίζεται όταν ο χρήστης περνά πάνω από την εικόνα. ΟΚ. Να επαναλάβετε τη διαδικασία στο κάτω αριστερό κελί με εικόνες Ζαγορίου. Για εισαγωγή της αλληγορικής εικόνας, κάτω από τον πίνακα: τοποθετήστε τον δρομέα κάτω από τον πίνακα στο επιθυμητό σημείο επιλέξτε από την γραμμή μενού Insert > Image ή πατήστε (από τις μπάρες εργαλείων) το κουμπάκι στο πλαίσιο διαλόγου Select Image Source αναζητήστε το αρχείο της εικόνας, επιλέξτε το και πατήστε το κουμπί Select. Κατόπιν εμφανίζεται ενα πλαίσιο διαλόγου για δημιουργία αντίγραφου της εικόνας: πατήστε ναι. Συμβουλή: καλό είναι πριν εισάγετε μια εικόνα, να αντιγράψετε το αρχείο (της εικόνας) μέσα στον φάκελλο του site (frames_tables_links) στο φάκελλο images. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 72

73 Στη συνέχεια, με επιλεγμένη την εικόνα, ορίστε τις ιδιότητες της στον επιθεωρητή ιδιοτήτων: α) αλλάξτε τις διαστάσεις της αν είναι απαραίτητο και στοιχίστε την, ώστε να την προσαρμόσετε στη σελίδα σας. β) στο πεδίο Alt πληκτρολογήστε το εναλλακτικό κείμενο (Γευτείτε τη σοφία της Φύσης) που θα εμφανίζεται όταν ο χρήστης περνάει με το ποντίκι πάνω από την εικόνα. Κάτω από αυτή την εικόνα, πληκτρολογήστε το κείμενο Ταξιδέψτε σε περιοχές μοναδικού φυσικού κάλλους! Ενα άγγιγμα κλικ στα φτερά της πεταλούδας, σας προσφέρει μια πρώτη γεύση από το μαγευτικό Ζαγόρι και το μυθικό Πήλιο!!! και από τον επιθεωρητή ιδιοτήτων ορίστε τις επιθυμητές ιδιότητες. Δεξιά του κειμένου εισάγετε μια εικόνα πεταλούδας, εργαζόμενοι όπως παραπάνω (για την προηγούμενη εικόνα). Με επιλεγμένη την εικόνα πεταλούδας, ορίστε τις ιδιότητες της στον επιθεωρητή ιδιοτήτων: α) αλλάξτε τις διαστάσεις της εικόνας αν είναι απαραίτητο και στοιχίστε την, ώστε να την προσαρμόσετε στη σελίδα σας. β) στο πεδίο Alt πληκτρολογήστε το εναλλακτικό κείμενο (Φωτογραφίες Ζαγορίου και Πηλίου) που θα εμφανίζεται όταν ο χρήστης περνάει με το ποντίκι πάνω από την εικόνα. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 73

74 γ) δεξιά από το πεδίο Link κάντε κλικ στο φάκελλο και αναζητήστε και επιλέξτε τη σελίδα όπου θα οδηγείται ο χρήστης (photos.html). Για εισαγωγή εικόνας που θα οδηγεί τον χρήστη πίσω στην Κεντρική Σελίδα (index.html), αναζητείστε μια μικρή, κατάλληλη γι αυτό το σκοπό εικόνα και εργαστείτε όπως παραπάνω. Με επιλεγμένη την εικόνα, ορίστε τις ιδιότητες της στον επιθεωρητή ιδιοτήτων: α) αλλάξτε τις διαστάσεις της εικόνας αν είναι απαραίτητο και στοιχίστε την, ώστε να την προσαρμόσετε στη σελίδα σας. β) στο πεδίο Alt πληκτρολογήστε το εναλλακτικό κείμενο (Επιστροφή στην Κεντρική Σελίδα) που θα εμφανίζεται όταν ο χρήστης περνά με το ποντίκι πάνω από την εικόνα. γ) δεξιά από το πεδίο Link κάντε κλικ στο φάκελλο και αναζητήστε και επιλέξτε τη σελίδα σύνδεσης, όπου θα οδηγείται ο χρήστης (index.html). UΥποερώτημα 2γ Κάτω από τον πίνακα, διαγράψτε το κείμενο Επικοινωνήστε μαζί μας και εισάγετε τη ζητούμενη φόρμα ως εξής: Επιλέξτε από τη γραμμή μενού Insert > Form Κάντε κλικ στο κόκκινο περίγραμμα της φόρμας και στον επιθεωρητή ιδιοτήτων στο πεδίο Action πληκτρολογήστε Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 74

75 P σειρά P σειρά P σειρά Στο πεδίο Method επιλέξτε (με το βελάκι) POST. Κατόπιν μέσα στη φόρμα εισάγετε πίνακα με 7 σειρές και 2 στήλες. Για να εισάγετε πίνακα: τοποθετήστε το δρομέα στο επιθυμητό σημείο και: πατήστε τα πλήκτρα Ctrl + Alt + T ή από τη γραμμή μενού επιλέξτε Insert > Table ή από τη μπάρα εργαλείων κάντε κλικ στο σχετικό εικονίδιο Στην πρώτη σειρά του πίνακα συγχωνεύστε τα 2 κελιά (με επιλεγμένα τα κελιά κάντε δεξί κλικ και επιλέξτε Table > Merge Cells). Μέσα σ αυτό το συγχωνευμένο κελί, πληκτρολογήστε το κείμενο Δηλώστε τη συμμετοχή σας στο πρόγραμμα που επιθυμείτε και ορίστε μορφοποίηση για το κείμενο, από τον επιθεωρητή ιδιοτήτων: Στην 2P η του πίνακα, πληκτρολογήστε Όνομα και στο διπλανό κελί εισάγετε πεδίο κειμένου επιλέγοντας Insert > Form Objects > Text Field Στην 3P η του πίνακα, πληκτρολογήστε Επίθετο και στο διπλανό κελί εισάγετε πεδίο κειμένου (μπορείτε να αντιγράψετε με Ctrl+C το προηγούμενο και να το επικολλήσετε με Ctrl+V). Στην 4P η του πίνακα, πληκτρολογήστε Σχολή Φοίτησης και στο διπλανό κελί εισάγετε πεδίο κειμένου (μπορείτε να αντιγράψετε με Ctrl+C το προηγούμενο και να το επικολλήσετε με Ctrl+V). Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 75

76 2P P στήλη, P σειρά P σειρά P σειρά P μέχρι P σειρά P σειρά P στήλης Στην 5P η του πίνακα, πληκτρολογήστε Δ/νση και στο διπλανό κελί εισάγετε πεδίο κειμένου (μπορείτε να αντιγράψετε με Ctrl+C το προηγούμενο και να το επικολλήσετε με Ctrl+V). Στην 6P η του πίνακα, πληκτρολογήστε Τρόπος Πληρωμής και στο διπλανό κελί εισάγετε πεδίο κειμένου (μπορείτε να αντιγράψετε με Ctrl+C το προηγούμενο και να το επικολλήσετε με Ctrl+V). Μπορείτε να καθορίσετε το πλάτος του πεδίου κειμένου που εισάγατε στη η κάνοντας κλικ μέσα στο πεδίο και από τον επιθεωρητή ιδιοτήτων να συμπληρώσετε την επιθυμητή τιμή στο πεδίο Char Width, όπως για παράδειγμα Στην 7P η του πίνακα, πληκτρολογήστε Επιλεγόμενος Προορισμός και συγχωνεύστε τα 2 κελιά (με επιλεγμένα τα κελιά κάντε δεξί κλικ και επιλέξτε Table > Merge Cells). Στη συνέχεια, από τον Επιθεωρητή Ιδιοτήτων, θα ορίσετε τις επιθυμητές ιδιότητες του πίνακα, επιλέγοντας επιθυμητή μορφοποίηση κειμένου και επιθυμητή απόχρωση υπόβαθρου κελιών (από το πεδίο Background Color). Παράδειγμα, για την 1P η του πίνακα ορίζετε τις ιδιότητες ως εξής: Για την 2P ως εξής: η και 6P η της 1P ης του πίνακα ορίζετε τις ιδιότητες Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 76

77 P σειρά, UΔημιουργία Πτυσσόμενης Λίστας Στην 7P η κάτω από το κείμενο Επιλεγόμενος Προορισμός εισάγετε πτυσσόμενη λίστα επιλέγοντας Insert > Form Objects > List/Menu Ορίστε τα στοιχεία της λίστας πληκτρολογώντας μέσα στο παράθυρο στο πεδίο Item Label Ζαγόρι και κάντε κλικ στο κουμπί Κατόπιν πληκτρολογήστε Πατήστε ΟΚ. Πήλιο και κάντε κλικ στο κουμπί Στον επιθεωρητή ιδιοτήτων, στο πεδίο Initially Selected εμφανίζονται τα στοιχεία της πτυσσόμενης λίστας. Στο πεδίο Type να επιλέξτε List και να ορίσετε Height 1 για να επιλέγει ο χρήστης τον προορισμό (Ζαγόρι ή Πήλιο) από τη μπάρα κύλισης. Για να εισάγετε κουμπί υποβολής της φόρμας τοποθετείστε το δρομέα στο επιθυμητό σημείο και επιλέξτε Insert > Form Objects > Button Όπως διαπιστώνετε, στο συγκεκριμένο σημείο δημιουργήθηκε το κουμπάκι. Κάνοντας (αριστερό) κλικ σ αυτό το κουμπάκι, από τον επιθεωρητή ιδιοτήτων στο πεδίο Action επιλέξτε Submitt form. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 77

78 Το κουμπάκι που εισάγατε εμφανίζει πάνω του την ετικέτα Submit Επιλέξτε τη φόρμα (κόκκινο περίγραμμα) και στον επιθεωρητή ιδιοτήτων ορίστε στο πεδίο Action να γίνεται υποβολή της φόρμας στη δ/νση πληκτρολογώντας Στο πεδίο Target επιλέξτε (με το βελάκι) blank. Στο πεδίο Method επιλέξτε (με το βελάκι) POST. Η φόρμα που δημιουργήσατε έχει τη μορφή Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 78

79 UΔημιουργία Επώνυμης Αγκύρωσης Για να συνδέσετε την κεφαλίδα της σελίδας (Τα Προγράμματα και η συμμετοχή σας) με τη φόρμα, με επώνυμη αγκύρωση, δηλαδή με κλικ στην κεφαλίδα, ο χρήστης να οδηγείται στη φόρμα, εργαστείτε ως εξής: Τοποθετείστε το δρομέα στην πρώτη γραμμή της φόρμας, δεξιά από το κείμενο Δηλώστε τη συμμετοχή σας στο πρόγραμμα που επιθυμείτε και για να δημιουργήσετε εκεί επώνυμη αγκύρωση: από τη γραμμή μενού επιλέξτε Insert > Named Anchor ή από τις μπάρες εργαλείων κάντε κλικ στο κουμπάκι. Στο συγκεκριμένο σημείο εμφανίζεται το σύμβολο της αγκύρωσης. Στον επιθεωρητή ιδιοτήτων δώστε στην αγκύρωση όνομα (π.χ. simmetoxi). Επιλέξτε την κεφαλίδα Τα Προγράμματα και η συμμετοχή σας και στον επιθεωρητή ιδιοτήτων στο πεδίο link πληκτρολογήστε το σύμβολο # και το όνομα της αγκύρωσης (#simmetoxi) Προσοχή! ανάμεσα στο σύμβολο # και το όνομα μην αφήνετε κανένα κενό. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 79

80 Στο παράθυρο εγγράφου του Dreamweaver: α) Η κεφαλίδα Τα Προγράμματα και η συμμετοχή σας που συνδέεται με την επώνυμη αγκύρωση, Uεμφανίζεται σαν σύνδεσμοςu (υπογραμμισμένη): β) Στη φόρμα, δεξιά από το κείμενο, στην πρώτη γραμμή του πίνακα, Uεμφανίζεται η αγκύρωσηu που δημιουργήσατε UκαιU στο κάτω μέρος της σελίδας εμφανίζεται Uη εικόνα ΚεντρικήU. Για να δείτε πως θα φαίνονται στον φυλλομετρητή οι σελίδες σας: επιλέξτε File > Preview in Browser ή πατήστε το εικονίδιο ή πατήστε το πλήκτρο F12. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 80

81 Επιβεβαίωση-δοκιμή λειτουργικότητας των εικόνων, των συνδέσμων, U του πτυσσόμενου μενού, της αγκύρωσης, και της φόρμας Βλέποντας στο φυλλομετρητή την σελίδα programmes.html: Περνώντας, με το ποντίκι, πάνω από την αλληγορική εικόνα που εισάγατε, εμφανίζεται πράγματι το εναλλακτικό κείμενο (Γευτείτε τη σοφία της Φύσης). Διαπιστώστε τη λειτουργικότητα της εικόνας petalouda: περνώντας με το ποντίκι, πάνω της, εμφανίζεται το εναλλακτικό κείμενο (Φωτογραφίες Ζαγορίου και Πηλίου) και κάνοντας κλικ πάνω της οδηγείστε πράγματι στην σελίδα φωτογραφιών (photos.html) Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 81

82 U Στο κάτω μέρος της σελίδας Φωτογραφίες Περιοχών (photos.html): α) κάνοντας κλικ σε ένα σύνδεσμο βίντεο π.χ. UΖαγόρι θα διαπιστώσετε ότι πράγματι οδηγείστε στην αντίστοιχη τοποθεσία σύνδεσης. β) στο πτυσσόμενο μενού, επιλέξτε (με το βελάκι) Τα Προγράμματα για επιστροφή στην αντίστοιχη σελίδα. Διαπιστώνετε ότι πατώντας το κουμπάκι Go οδηγείστε πράγματι πίσω στη σελίδα Τα Προγράμματα. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 82

83 Στη σελίδα Τα Προγράμματα, διαπιστώστε τη λειτουργικότητα των εικόνων εναλλαγής (rollover images): περνώντας πάνω τους με το ποντίκι, εμφανίζεται πράγματι η δεύτερη εικόνα (εναλλαγής). Στη σελίδα Τα Προγράμματα, διαπιστώστε τη λειτουργικότητα της εικόνας της εικόνας Κεντρική: περνώντας πάνω της με το ποντίκι, εμφανίζεται πράγματι το εναλλακτικό κείμενο (Επιστροφή στην Κεντρική Σελίδα). Κάνοντας κλικ πάνω στην εικόνα Κεντρική, οδηγείστε πράγματι στην Κεντρική Σελίδα (Τουρίστας Φοιτητής) Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 83

84 Στην κεντρική σελίδα (Τουρίστας Φοιτητής): κάνοντας κλικ στο αριστερό πλαίσιο στο σύνδεσμο Τα Προγράμματα οδηγείστε πράγματι πίσω στη σελίδα Τα Προγράμματα. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 84

85 Στη σελίδα Τα Προγράμματα, διαπιστώστε τη λειτουργικότητα της αγκύρωσης: σαν χρήστης, κάνοντας κλικ στην κεφαλίδα της σελίδας πράγματι οδηγείστε στην φόρμα, όπου μπορείτε να συμπληρώσετε τα πεδία, να επιλέξετε προορισμό από τη μπάρα κύλισης στην πτυσσόμενη λίστα και τέλος πατώντας το κουμπάκι Submit, διαπιστώνετε ότι ο Explorer σας ζητά έγκριση για να υποβληθεί η φόρμα μέσω ηλεκτρονικού ταχυδρομείου. Υλικό μάθησης εργαστηρίου η-εμπορίου Ι 85