ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2

Transcript

1 ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 Dreamweaver 1/7

2 Εισαγωγή Το Dreamweaver είναι ένας HTML editor που αναπτύχθηκε από την Macromedia. Είναι WYSIWYG (What You See Is What You Get), δηλ. αυτό που θα δούμε στο Web όταν θα εκδώσουμε (publish) μια σελίδα είναι ακριβώς αυτό που βλέπουμε στον editor κατά την κατασκευή της σελίδας. Δεν χρειάζεται να γνωρίζουμε HTML. Επιτρέπει διόρθωση του πηγαίου HTML κώδικα. Έχει ενσωματωμένα εργαλεία για εισαγωγή JavaScript, υποστηρίζει layers, style sheets και παρέχει δυνατότητες διαχείρισης ενός site (απευθείας μεταφορά των Web pages στους servers, κλπ.). Καθορισμός local site Καθορισμός της δομής των σελίδων που δημιουργούμε (name, local root folder) Δημιουργία ενός local site για κάθε Web site που δημιουργούμε. Site! New Site Dreamweaver 2/7

3 Dreamweaver Interface Document Editing Window Το βασικό παράθυρο του Dreamweaver, όπου βλέπουμε την σελίδα που δημιουργούμε. Στη κάτω δεξιά γωνία βλέπουμε μερικά σύμβολα τα οποία μπορούμε επίσης να δούμε στο Launcher window. Launcher Window Το Launcher μπορεί να ανοίξει ή να κλείσει από το window menu. Dreamweaver 3/7

4 Ανοίγει επιπρόσθετα λειτουργικά παράθυρα του Dreamweaver. Αν δεν θέλουμε να έχουμε ανοιχτό το Launcher, μπορούμε να ανοίξουμε κάθε ένα από αυτά τα παράθυρα από το window menu (ή από το μικρό launcher στο βασικό παράθυρο). Properties Window Είναι ίσως το πιο σημαντικό παράθυρο στο Dreamweaver. Έχει περίπου τη λειτουργικότητα ενός formatting toolbar σε μια εφαρμογή επεξεργασίας κειμένου. Το properties window αλλάζει ανάλογα με το τι έχει επιλεγεί προηγουμένως από το κυρίως παράθυρο. Objects Window Χρησιμοποιείται για την εισαγωγή αντικειμένων (όπως π.χ εικόνες, QuickTime movies, tables, Shockwave files κλπ) στο αρχείο HTML. Τα αντικείμενα του object window μπορούν να εισαχθούν σε ένα αρχείο από το Insert menu. Στο πάνω μέρος μπορούμε να επιλέξουμε κατηγορία αντικειμένων που θέλουμε όπως: Common, Characters, Forms, Frames, Head, Invisible. Page Properties Από το Modify menu, επιλέγουμε Page Properties για τη διόρθωση του τίτλου της σελίδας, καθορισμό του background image, καθορισμό χρωμάτων για background, text, links, active links κλπ. Dreamweaver 4/7

5 Site Map Προσφέρει μια υψηλού επιπέδου οπτική αναπαράσταση ενός τοπικού site. Μπορούμε να προσθέσουμε νέα αρχεία στο site, να προσθέσουμε, διαγράψουμε και αλλάξουμε links, και να δημιουργήσουμε μια εικόνα BMP ή PICT του site. Layers Τα tables είναι πολύ χρήσιμα για την δημιουργία πολύπλοκων layouts σελίδων. Τα layers είναι ακόμα πιο χρήσιμα, εφ όσον μπορούμε να αλλάξουμε την θέση των στοιχείων μιας σελίδας, τραβώντας τα εκεί που θέλουμε. Με το Dreamweaver μπορούμε να εκμεταλλευτούμε τις δυνατότητες των παραπάνω. Dreamweaver 5/7

6 Μετατροπή table cells σε layers: Modify! Layout! Reposition Content using Layers. Μετατροπή layers σε table cells: Modify! Layout! Convert Layers to Tables. Εισαγωγή νέων layer: Insert! Layer Templates Δημιουργία documents για ένα site που έχουν κοινή δομή και εμφάνιση. Διασφαλίζουν ότι όλες οι σελίδες σε ένα site «μοιράζονται» κάποια συγκεκριμένα χαρακτηριστικά. Όταν διορθώνουμε ένα template, ενημερώνονται όλες οι σελίδες που το χρησιμοποιούν. Τα template αρχεία (.dwt) μπορούν να διορθωθούν από το κύριο παράθυρο. Σύνδεση «συμπεριφοράς» (behavior) με στοιχεία της σελίδας Συμπεριφορά! Συνδυασμός ενός event και ενός action. Τα events προκαλούν τα actions. Τα actions είναι κομμάτια έτοιμου κώδικα JavaScript που εκτελούν συγκεκριμένα tasks, όπως παίξιμο ενός ήχου ή σταμάτημα μιας ταινίας Shockwave. Το Dreamweaver προσφέρει μια σειρά από «έτοιμα» actions. Dreamweaver Behaviors & Actions Πλεονεκτήματα: Εύκολη Προσθήκη Javascripts για συχνές διαδικασίες Έλεγχος συμβατότητας των Actions μεταξύ Browsers Δυνατότητα Προσθήκης Custom Αction (Javascript) Dreamweaver 6/7

7 Άλλα χαρακτηριστικά Έλεγχος υπερσυνδέσμων: File! Check Links (Shift + F8) Διατήρηση design notes: File! Design notes Υποστήριξη HTML styles: Text! HTML styles Υποστήριξη CSS (Cascading Style Sheets): Text! CSS Styles Dreamweaver 7/7