Εργαστήριο 17 Εκπαιδευτικό Εργαστήριο Πληροφορικής Χειμερινό Εξάμηνο 2006 Οικονομικό Πανεπιστήμιο Αθηνών Τμήμα Διοικητικής Επιστήμης & Τεχνολογίας.

Παρουσίαση με θέμα: "Εργαστήριο 17 Εκπαιδευτικό Εργαστήριο Πληροφορικής Χειμερινό Εξάμηνο 2006 Οικονομικό Πανεπιστήμιο Αθηνών Τμήμα Διοικητικής Επιστήμης & Τεχνολογίας."— Μεταγράφημα παρουσίασης:

1 Εργαστήριο 17 Εκπαιδευτικό Εργαστήριο Πληροφορικής Χειμερινό Εξάμηνο 2006 Οικονομικό Πανεπιστήμιο Αθηνών Τμήμα Διοικητικής Επιστήμης & Τεχνολογίας

2 Macromedia Dreamweaver 3

3 Εργαστήριο 173 Εκκίνηση εφαρμογής: Start – Programs – Macromedia Dreamweaver 3 Βασικό Παράθυρο: Στο κυρίως παράθυρο εμφανίζεται το κείμενο, όπως εμείς το δημιουργούμε και περίπου όπως αυτό θα εμφανιστεί σε ένα Web Browser Η title bar του παραθύρου εμφανίζει τον τίτλο της σελίδας και σε παρένθεση το όνομα του αρχείου και έναν αστερίσκο εφόσον το αρχείο περιέχει αλλαγές που δεν έχουν σωθεί Στο κάτω αριστερό μέρος του παραθύρου υπάρχει ο tag selector, όπου εμφανίζονται τα tags που χρησιμοποιούνται σε ένα επιλεγμένο κείμενο Στο κάτω δεξιά μέρος υπάρχουν κάποια κουμπιά (mini-launcher) που ενεργοποιούν συγκεκριμένες παλέτες και παράθυρα Λίγο πιο αριστερά εμφανίζονται μια εκτίμηση του μεγέθους του κειμένου καθώς και ο χρόνος για να γίνει download η σελίδα Εκκίνηση – Βασικό Παράθυρο

4 Εργαστήριο 174 Toolbars Toolbars του Dreamweaver: Αποτελείται από 3 κύρια toolbars: Properties toolbar Εδώ καθορίζονται τα χαρακτηριστικά όλων των αντικειμένων. Οι επιλογές σε αυτή τη μπάρα αλλάζουν ανάλογα με το αντικείμενο που επεξεργαζόμαστε. Όταν πατήσουμε το βελάκι More και εφόσον έχει επιλεγεί κάποιο αντικείμενο, εμφανίζονται κάποιες επιπλέον επιλογές, σχετικές με το επιλεχθέν αντικείμενο Toolbar για εικόνα

5 Εργαστήριο 175 Toolbars (συνεχ.) Objects toolbar Από αυτή τη μπάρα μπορούμε εύκολα να εισάγουμε διάφορα HTML αντικείμενα. Πατώντας το βελάκι στην κορυφή της μπάρας μπορούμε να μεταβούμε σε όλες τις κατηγορίες αντικειμένων που υπάρχουν Launcher Από εκεί μπορούμε να εκκινήσουμε συγκεκριμένες παλέτες και παράθυρα του Dreamweaver : •Site: Απ’ όπου γίνεται η διαχείριση του site μας •Library: Όπου μπορούν να κρατηθεί μια συλλογή αντικειμένων, καθώς και templates •HTML Styles & CSS Styles: Όπου ορίζονται και εφαρμόζονται στυλ •Behaviors: Όπου εφαρμόζονται ή τροποποιούνται συγκεκριμένες συμπεριφορές αντικειμένων •History: Παρουσιάζεται μια λίστα με όλες τις ενέργειες που έχουν γίνει στο τρέχον κείμενο, από τη στιγμή που αυτό ανοίχτηκε •HTML Source: Όπου παρουσιάζεται ο HTML κώδικας, μέσα στον οποίο μπορούμε να επέμβουμε και να τον τροποποιήσουμε ανάλογα.

6 Εργαστήριο 176 Δημιουργία Τοπικού Site Για δημιουργία ενός νέου site πάμε στο menu Site  Define Sites όπου μπορούμε με το New να ορίσουμε ένα νέο site (ή από το Site  New Site) Στο παράθυρο που εμφανίζεται: Εισάγουμε το όνομα του site Ορίζουμε το τοπικό μονοπάτι Επιλέγουμε εάν θέλουμε να ανανεώνεται αυτόματα η τοπική λίστα αρχείων Ορίζουμε το remote path Επιλέγουμε εάν θέλουμε να χρησιμοποιήσουμε Cache για να επιταχύνουμε την ενημέρωση των συνδέσμων (προτείνεται να επιλεγεί) Από το ίδιο παράθυρο μπορούμε να ορίσουμε τον FTP Server μας, τον Web Server μας, τον τρόπο εμφάνισης του site map κ.α. Πατάμε ΟΚ, οπότε και εμφανίζεται το Site Window περιέχοντας τη λίστα με όλα τα αρχεία και τους φακέλους του τοπικού μας site. Αυτή η λίστα μπορεί να χρησιμοποιηθεί και για τη διαχείριση των αρχείων (copy, paste, delete, move,...) Καλό είναι το site window να μένει ανοιχτό

7 Εργαστήριο 177 Δημιουργία Αρχικής Σελίδας Αποθήκευση Αρχικής Σελίδας File  Save As. Στο παράθυρο επιλέγουμε να αποθηκευτεί η σελίδα μέσα στο site που δημιουργήσαμε και της ορίζουμε ένα όνομα (π.χ. Homepage.html, index.html, main.html κλπ)  Save Ορισμός Τίτλου Σελίδας Με δεξί κλικ του ποντικιού επιλέγουμε Page Properties (ή από το menu Modify  Page Properties) Στο πεδίο Title καταχωρούμε το τίτλο που επιθυμούμε να έχει η σελίδα και OK Εάν δεν καταχωρήσουμε κάποιο τίτλο, η σελίδα θα εμφανίζεται στον Browser ως Untitled Document

8 Εργαστήριο 178 Templates Μπορούμε να δημιουργήσουμε template, Τα οποία και να εφαρμόζουμε σε όσες σελίδες του site μας επιθυμούμαι, ώστε να υπάρχει μία ομοιομορφία Αποθήκευση Υπάρχουσας Σελίδας ως Template Πάμε στο menu File  Open και επιλέγουμε τη σελίδα που θέλουμε Πάλι στο File  Save as Template Στο παράθυρο που εμφανίζεται στο πλαίσιο Save As εισάγουμε ένα όνομα για το template  Save Δημιουργία νέου Template Πάμε στο menu Window  Templates Στο παράθυρο που εμφανίζεται από το βελάκι πάνω δεξιά επιλέγουμε New Template (ή από το πρώτο εικονίδιο στη κάτω μπάρα) Δίνουμε ένα όνομα στο Template ενώ αυτό είναι επιλεγμένο Edit Template Πάμε στο menu Window  Templates Στο παράθυρο που εμφανίζεται κάνουμε διπλό κλικ πάνω στο όνομα του template που θέλουμε και κατόπιν τροποποιούμε ανάλογα το template Εφαρμογή Template σε σελίδα Μπορούμε να δημιουργήσουμε μια σελίδα βασισμένη σε ένα template από το menu File  New from Template

9 Εργαστήριο 179 Εισαγωγή & Μορφοποίηση Κειμένου Εισαγωγή Κειμένου Η εισαγωγή κειμένου μπορεί να γίνει πληκτρολογώντας απευθείας κείμενο μέσα στη σελίδα είτε κάνοντας copy και paste κειμένου από κάποια άλλη εφαρμογή (από το menu Edit ή με το δεξί κλικ του ποντικιού) Μορφοποίηση Κειμένου Από το menu Text μπορούμε να κάνουμε διαφόρων ειδών μορφοποιήσεις που αφορούν τη γραμματοσειρά, αλλά και την παράγραφο: •Indent & Outdent: Εσοχή & Εξοχή •Format: Καμία, παράγραφος ή επικεφαλίδες •List: Για δημιουργία λίστας (με bullets, αριθμημένη, κλπ) •Alignment: Καθορισμός στοίχισης •Font: Επιλογή γραμματοσειράς •Style: Επιλογή στυλ (bold, italic, underline, κλπ) •Size: Επιλογή μεγέθους γραμματοσειράς •Size Increase & Size Decrease: Αύξηση ή μείωση μεγέθους •Color: Επιλογή χρώματος γραμματοσειράς Σημείωση: Η μορφοποίηση μπορεί να γίνει και από τη Properties Toolbar

10 Εργαστήριο 1710 Εισαγωγή & Ιδιότητες Πίνακα Εισαγωγή Πίνακα Για να εισάγουμε έναν πίνακα πάμε στο menu Insert  Table Στο παράθυρο που εμφανίζεται: •Rows: Εισάγουμε τον αριθμό των γραμμών •Columns: Εισάγουμε τον αριθμό των στηλών •Cell Spacing: Καθορίζουμε την απόσταση μεταξύ των κελιών •Cell Padding: Καθορίζουμε το μέγεθος των κελιών •Width: Καθορίζουμε το πλάτος του πίνακα (είτε σε pixels, είτε σε % ποσοστό) •Border: Καθορίζουμε το πλαίσιο του πίνακα (0 για καθόλου πλαίσιο)  ΟΚ Ιδιότητες Πίνακα Από τα Properties του πίνακα (Δεξί κλικ και Properties) και επιλέγοντας κελί, στήλη ή γραμμή μπορούμε να κάνουμε τις επιθυμητές μορφοποιήσεις. •Horz & Vert : Στοίχιση (οριζόντια & κάθετη) του κειμένου σε σχέση με το κελί •W & H: Καθορισμός πλάτους & ύψους •Bg or Bg: Τοποθέτηση εικόνας ή χρώματος σαν background •Brdr: Καθορισμός πλαισίων

11 Εργαστήριο 1711 Ενέργειες πάνω σε Πίνακα Με δεξί κλικ πάνω στον πίνακα και Table (ή από το menu Modify  Table) Select Table: Επιλογή όλου του πίνακα Merge cells: Συγχώνευση επιλεγμένων κελιών Split cell: Διαχωρισμός ενός κελιού σε περισσότερα Insert Row: Εισαγωγή γραμμής Insert Column: Εισαγωγή στήλης Insert Rows or Columns: Εισαγωγή γραμμών ή στηλών Delete Row: Διαγραφή γραμμής Delete Column: Διαγραφή στήλης Εμφωλευμένοι πίνακες (Nested Tables) Υπάρχει η δυνατότητα εισαγωγής πίνακα μέσα σε κάποιο κελί ενός ήδη υπάρχοντος πίνακα. Η διαδικασία εισαγωγής είναι η ίδια.

12 Εργαστήριο 1712 Εισαγωγή & Ιδιότητες Εικόνας Εισαγωγή Εικόνας Για να εισάγουμε έναν πίνακα πάμε στο menu Insert  Image και επιλέγουμε την εικόνα που έχουμε αποθηκεύσει κάπου στο site Ιδιότητες Εικόνας Από τα Properties της εικόνας (Δεξί κλικ και Properties) •Name: Ονομασία της εικόνας (προαιρετικά) •W & H: Καθορισμός πλάτους & ύψους •Src: Καθορίζει το source file της εικόνας •Link: Καθορίζει ένα υπερσύνδεσμο της εικόνας •Align: Στοίχιση της εικόνας •Alt: Κείμενο που θα εμφανίζεται στον Browser όταν πηγαίνουμε το ποντίκι μας επάνω στην εικόνα •V Space & H Space: Προσθέτει χώρο σε pixels στις πλευρές της εικόνας •Target: Καθορίζει το frame ή το παράθυρο όπου πρέπει να φορτωθεί ή συνδεδεμένη με την εικόνα σελίδα •Low Src: Καθορίζει την εικόνα που πρέπει να φορτωθεί πριν τη σελίδα •Border: Καθορίζει το πλαίσιο γύρω από την εικόνα

13 Εργαστήριο 1713 Links Link σε άλλη σελίδα ή αρχείο Επιλέγουμε το αντικείμενο (κείμενο, εικόνα, πίνακα, κλπ) πάνω στο οποίο θέλουμε να εισάγουμε link Από το menu Modify επιλέγουμε Make Link ή με δεξί κλικ και πάλι Make Link ή απευθείας από το παραθυράκι με τα properties στο πλαίσιο Link ή με CTRL+L Βάζουμε το μονοπάτι της σελίδας ή του αρχείου που θέλουμε να οδηγεί το link, είτε πληκτρολογώντας το, είτε επιλέγοντας το από το παράθυρο Select File που εμφανίζεται (εάν βρισκόμαστε στα properties πρέπει να πατήσουμε το εικονίδιο με το κίτρινο φακελάκι), είτε εάν είμαστε στο παράθυρο των properties με τη βοήθεια του εικονιδίου point-to-file τραβάμε με το ποντίκι μας και επιλέγουμε απευθείας το επιθυμητό αρχείο από τη λίστα φακέλων και αρχείων του site. Στο πλαίσιο Target επιλέγουμε το που θέλουμε να εμφανιστεί η σελίδα ή το αρχείο στο οποίο οδηγούμαστε με το link, οι σημαντικότερες επιλογές είναι: •Εάν δεν επιλέξουμε τίποτα, θα μας το φορτώσει στο ίδιο παράθυρο •_blank: Το φορτώνει σε νέο παράθυρο

14 Εργαστήριο 1714 Links (συνεχ.) Link σε ηλεκτρονική διεύθυνση (e-mail) Αφού επιλέξουμε και πάλι το αντικείμενο, από το menu Insert επιλέγουμε E-mail Link και πληκτρολογούμε την e-mail διεύθυνση ή στο παράθυρο των properties στο πλαίσιο Link γράφουμε mailto: και κατόπιν την e-mail διεύθυνση Link σε σημείο της ίδιας σελίδας Πρώτα πηγαίνουμε στο σημείο της σελίδας στο οποίο θέλουμε να οδηγούμαστε, από το menu Insert επιλέγουμε Named Anchor (ή με Control+Alt+A) και στο πεδίο Anchor Name γράφουμε ένα όνομα για το σημείο αυτό (ή και αριθμό εάν το επιθυμούμε) Κατόπιν επιλέγουμε το αντικείμενο που θέλουμε να εισάγουμε το link και το δημιουργούμε βάζοντας στο πεδίο του Link το σύμβολο # και ακολούθως το όνομα που δώσαμε στο σημείο που θα οδηγεί το link. Το ίδιο μπορούμε να πετύχουμε χρησιμοποιώντας και το εικονίδιο point-to-file, τραβώντας το στο σημείο που έχουμε ορίσει. Ενέργειες πάνω σε link Αν θέλουμε να αλλάξουμε ένα link στο menu Modify επιλέγουμε Change Link (ή απευθείας από το παράθυρο των properties) Αν θέλουμε να αφαιρέσουμε ένα link στο menu Modify επιλέγουμε Remove Link (ή το σβήνουμε απευθείας από το παράθυρο των properties)