DreamWeaver Παρουσίαση Εργαλείου για Ανάπτυξη Web-based GUIs 1

Διάρθρωση  Πρώτη σελίδα του προγράμματος  Interface  Insert bar  Properties bar  Panels bar  Document window  Menu bar  Εισαγωγή Εικόνας - Hyperlink  Διαχείριση Web site  Δουλεύοντας με Tables  Δουλεύοντας με Frame – Frameset  HTML Forms – Form objects  Behaviors 2

Τι είναι το DreamWeaver..  Είναι πρόγραμμα δημιουργίας και επεξεργασίας ιστοσελίδων, δηλαδή κώδικα HTML.  Μπορούμε να δημιουργήσουμε στα γρήγορα φόρμες (forms), πλαίσια (frames), πίνακες (tables) και άλλα αντικείμενα της HTML.  Μπορεί να χρησιμοποιηθεί και για τη δημιουργία εφαρμογών πολυμέσων.  Το DreamWeaver έχει δυνατότητες για δημιουργία δυναμικής HTML (DHMTL) και επιτρέπει κίνησης γραμμής χρόνου, απόλυτη τοποθέτηση περιεχομένων, δημιουργία επιπέδων (layers) και συγγραφή σεναρίων (scripts). Το DreamWeaver περιέχει δικές του συμπεριφορές (behaviors), που είναι έτοιμα scripts τα οποία μπορούμε να προσθέσουμε πολύ εύκολα σ ’ ένα αντικείμενο. 3

Πρώτη σελίδα του προγράμματος Μπορούμε να διαλέξουμε από ένα σύνολο χαρακτηριστικών για την εφαρμογή μας, να ανοίξουμε ένα νέο αρχείο ή ένα ήδη υπάρχον αρχείο. 4

Interface 5

Insert bar  Common objects: Μπορείς να εισάγεις γρήγορα διάφορα αντικείμενα συχνής χρήσης όπως hyperlinks,image,flash,table κτλ.  Layout objects: Γρήγορη εισαγωγή αντικειμένων τα οποία διαχωρίζουν τα δεδομένα τους όπως tables,tags,frames κτλ.  Form objects: Για εισαγωγή αντικειμένων όπως buttons,lists,menus,checkbox,textbox κτλ.  Data objects: Εισαγωγή αντικειμένων που σχετίζονται με βάσεις δεδομένων και dynamic sites.  Spry objects: Εισαγωγή αντικειμένων για XML και spry textfields,checkbox,tables κτλ.  Text objects: Εισαγωγή ειδικών χαρακτήρων, κεφαλίδων, παραγράφων κλπ.  Favorites : Μπορείς να φτιάξεις τη δική σου λίστα με αντικείμενα που θα χρησιμοποιήσεις συχνότερα. 6

Properties bar  Η Properties bar είναι μια μπάρα που αυτοπροσαρμόζεται στο αντικείμενο που έχεις εισάγει στο κείμενο σου.  Από εδώ μπορείς να μεταβάλεις κάθε παράμετρο του αντικειμένου που έχεις επιλεγμένο. 7

Panels bar  CSS(Cascading Style Sheets): Εμφανίζονται εδώ ότι αντικείμενα σχετικά με το συγκεκριμένο τρόπο σχεδίασης των sites.  Application: Εδώ εμφανίζονται πληροφορίες για data base,ajax data, dynamic data κτλ.  Tag: Μπορούμε να βάλουμε πχ javascript σε buttons και άλλα από το behaviors.  Files: Εμφανίζει τον κατάλογο που είναι αποθηκευμένο το site αλλά και τα διάφορα αρχεία που θα χρησιμοποιήσεις όπως images κτλ. 8

Document window Το σημαντικότερο παράθυρο όπου εδώ εκτελούνται όλα τα γεγονότα όπως :  Η εμφάνιση των αντικειμένων της εφαρμογής  Ο κώδικας σε html κλπ 9

Menu bar  File  Edit  View  Insert  Modify  Text  Commands  Site  Window  Help 10

Εισαγωγή Εικόνας – Hyperlink1/2  Εικόνα  Τοποθέτηση του cursor στο σημείο που θέλω την εικόνα.  Insert bar Common objects tab Image  Επιλογή της εικόνας που θέλω από το παράθυρο που ανοίγει.  Hyperlink  Insert bar Common objects tab Hyperlink ή link  Συμπλήρωση των πεδίων στο παράθυρο που ανοίγει ( Text,Link κτλ ). 11

Εισαγωγή Εικόνας – Hyperlink2/2 12

Διαχείριση Web site  menu site manage site  Από το παράθυρο διαλόγου Manage sites  New  Edit  Duplicate  Remove  Export/Import  Αν επιλέξουμε New Site εμφανίζεται ο wizard που σε καθοδηγά στη δήλωση του web site.  Basic/Advanced : Επιλογές με διαφορά σε λεπτομέρειες για τις λειτουργίες που αφορούν το site. 13

Δουλεύοντας με Tables..  Τοποθέτηση του cursor στο σημείο που θέλουμε να φτιάξουμε πίνακα.  Insert bar Table  Μπορούμε να μεταβάλουμε τις παραμέτρους που χαρακτηρίζουν τον πίνακα.  Τα χαρακτηριστικά μπορούν να αλλάξουν και από το properties bar. 14

Δουλεύοντας με Frame – Frameset1/2  Εισαγωγή στην σελίδα όπου δουλεύουμε.  Insert bar Layout tab Frames  ή Insert HTML Frames Επιλογή  Επιλογή left frame, right frame, top frame κτλ  Εισαγωγή σε νέα σελίδα  Menu File New Page from Sample Frameset  και να επιλέξουμε από την λίστα τον διαχωρισμό σε frames που θέλουμε.  Εισαγωγή σε κενή σελίδα  Modify Frameset Επιλογή  Επιλέγουμε κατεύθυνση διαχωρισμού.  Από το properties bar μπορούμε να αλλάξουμε τις ιδιότητες των frames όπως border, color, scroll κτλ 15

Δουλεύοντας με Frame-Frameset2/2 16 Όταν κάνω save τη σελίδα πρέπει να σωθεί το κάθε frame σε ξεχωριστό αρχείο όπως και το frameset με Save Frameset As

HTML Forms – Form objects1/2  Συλλογή δεδομένων από client users.  Insert bar Forms tab επιλογή του form object  Form objects  Text Field  Text area  Check Box  Radio Buttons  Radio Groups  List/Menu  Jump Menu  Buttons 17

HTML Forms – Form objects2/2  Κάθε form object επιλέγοντας το μπορούμε να μεταβάλουμε κάποια χαρακτηριστικά του από το properties bar.  Πχ Για τα Buttons μπορούμε να επιλέξουμε μεταξύ των ιδιοτήτων submit και reset  Submit αποστέλλει όλες τις πληροφορίες της φόρμας  Reset επαναφέρει τη φόρμα στην αρχική της μορφή διαγράφοντας ότι έχει εισάγει ο χρήστης  Πχ Για το List/Menu μπορούμε με επιλογή List Values να ορίσουμε τα περιεχόμενα της λίστας 18

Behaviors1/3  Μπορούμε να προσθέσουμε διαλογικότητα στην ιστοσελίδα, δηλαδή εκτελόντας μια ενέργεια να προκαλέσουμε ένα συμβάν όπως :  Κλικ με το ποντίκι  Μετακίνηση του δρομέα  Να φορτώσουμε μια ιστοσελίδα κτλ  Η διαλογικότητα απαιτεί κωδικοποίηση σε JavaScript αλλά ο DW προσθέτει μόνος όλο το κώδικα που χρειάζεται. 19

Behaviors2/3  Η διαχείρηση των Behaviors γίνεται από το panel Tag Behaviors tab  Add : Επιλογή του behavior για το αντικείμενο που έχω επιλεγμένο ( Call JavaScript, popup Message, κτλ ).  Remove: Αφαίρεση του behavior από το αντικείμενο.  Show all events: Εμφάνιση όλων των events και του behavior που έχει το καθένα.  Show set events: Εμφάνιση μόνο αυτών που έχω χρησιμοποιήσει μέχρι τώρα.  Reposition behavior Up/Down: Ρύθμιση της προτεραιότητας των behaviors που μπορεί να έχει ένα αντικείμενο. 20

Behaviors3/3 21

ΤΕΛΟΣ 22