Macromedia DreamWeaver Παρουσίαση εργαλείου σχεδίασης διεπαφής χρήστη

Transcript

1 Macromedia DreamWeaver Παρουσίαση εργαλείου σχεδίασης διεπαφής χρήστη

2 ο Μέρος 1 : Βασικές Έννοιες Εισαγωγή στην επιφάνεια εργασίας Insert Bar Property Bar Panels 10' Building a Web Page Παράδειγμα εισαγωγής εικόνας Χειρισμός ιδιοτήτων εικόνας DreamWeaver Site Management Static Web Page Development Tables Frames & Framesets HTML Forms Object Behaviors 2

3 Επιφάνεια Εργασίας Εύκολη στην προσαρμογή για τον αρχάριο χρήστη Ο προχωρημένος θα βρει τις default ρυθμίσεις μάλλον δύσχρηστες Αποτελείται από ένα σύνολο tear-off πινάκων που καλύπτουν τις πιο συνηθισμένες ανάγκες του σχεδιαστή (π.χ. Database Handling, CSS, File Browser, Tag Editor κ.α.) Τα σημαντικά εργαλεία βρίσκονται σε σημεία κλειδιά της οθόνης Μπορεί και να εμποδίζουν την παραγωγικότητα Κάποια ιδιαίτερα χαρακτηριστικά είναι καλά κρυμμένα και απαιτείται προσφυγή στην Βοήθεια, η οποία δεν είναι όσο εκτενής θα έπρεπε Θα μπορούσε να περιέχει περισσότερα extra χαρακτηριστικά, χωρίς να παραπέμπει σε δικτυακούς τόπους 3

4 4

5 Insert Bar Panels Properties Bar 5

6 Insert Bar Η Μπάρα Εισαγωγής (Insert Bar) διαθέτει τα ακόλουθα αντικείμενα: Common Objects: Αντικείμενα συχνής χρήσης, όπως hyperlinks, tables, και εικόνες Layout Objects: Εισαγωγή πινάκων, ετικετών <div>, ακόμα και στρώσεων (layers) Form Objects: Αντικείμενα τύπoυ Form (πεδία κειμένου, radio buttons, λίστες, μενού, κουμπιά κ.α.) Text Objects: Special Characters, Headings κ.α. HTML Objects: Head Tags, Script Tags, Horizontal Rules Application Objects: Αντικείμενα δυναμικής σχεδίασης, ανάλογα με την τεχνολογία που χρησιμοποιεί ο χρήστης Flash Elements Favorites: Προκαθορισμένη λίστα αγαπημένων αντικειμένων 6

7 Properties Bar Ιδιαίτερα σημαντική στον χειρισμό αντικειμένων εύκολα και γρήγορα Αυτο-προσαρμοζόμενη στο αντικείμενο που επιλέγει ο χρήστης Κοινά χαρακτηριστικά αντικειμένων: Element Icon: Εικονίδιο αντικειμένου προς επεξεργασία Quick Help: Ανοίγει το μενού βοήθειας Quick Tag Editor: Αλλαγή ιδιοτήτων tag χωρίς ανάμιξη με κώδικα Collapsible Arrow: Εμφανίζει/Αποκρύπτει περαιτέρω (advanced) ιδιότητες 7

8 Panels Προσφέρουν εύκολη πρόσβαση σε διάφορες λειτουργίες: CSS Panel Group CSS Styles: Cascading Style & Style Sheet Management Layers Application Panel Group Behaviors: Object Behavior Management Databases Bindings Components Files Panel Group Files: File Browser (of site file structure) Snippets: Συχνά χρησιμοποιούμενα scripts, markups και σημειώσεις. Assets 8

9 Building a Web Page Το κυρίως παράθυρο εργασίας αποτελείται από: Code View Split View Design View Η δημιουργία μιας σελίδας στο Design View πρακτικά αντιμετωπίζει κάθετι ως αντικείμενο Η εισαγωγή οποιουδήποτε αντικειμένου ακολουθεί το πρότυπο: Go to Menu, Bar, Panel Click on Object Name Μερικά hotspots συχνά χρησιμοποιούμενων αντικειμένων: Menus: Insert, Modify, Text Bars: Insert, Properties Panels: Application, Files 9

10 Building a Web Page: Image Insertion Example Εισαγωγή εικόνας: Δεικτοδότηση τοποθεσίας επικόλλησης Άνοιγμα παραθύρου εισαγωγής εικόνας: By menu: Insert Image By bar: Insert bar Common Objects Image Επιλογή το URL της εικόνας να είναι: Document (default) ή Site Root Related OK Η εικόνα εισάγεται στο σημείο που δεικτοδοτήσαμε προηγουμένως 10

11 Building a Web Page: Further on Image Manipulating Με κλικ στην εικόνα Η μπάρα ιδιοτήτων προσαρμόζεται: Image Thumbnail: Μινι Προεπισκόπηση Εικόνας Image Size: Μέγεθος εικόνας σε KB Image Name: Χαρακτηριστική ονομασία αντικειμένου W και H: Πλάτος και Ύψος εικόνας. Src: Το file path της εικόνας στον δίσκο Link: Σύνδεσμος παραπομπής (κενό: η εικόνα δεν παραπέμπει πουθενά) Alt: Εναλλακτικό κείμενο για την εικόνα Align: Στοίχιση εικόνας κ.α. 11

12 Web Site Management Η διαχείριση του site ξεκινά από την δήλωσή του Δημιουργία συνδέσμων και cache για τον εντοπισμό αλλαγών Κάθε αλλαγή ενημερώνει και άλλα αρχεία αυτόματα Παράθυρο διαλόγου Manage Sites (Site Menu Manage Sites) New: Επιλογή τύπου site και δήλωσή του. (wizard) Edit: Επεξεργασία ήδη δηλωμένων sites. (wizard) Duplicate: Δυνατότητα χρήσης site ως template για ανάπτυξη νέων. Remove: Διαγράφει τους συνδέσμους του DW, όχι τα αρχεία. Export/Import: Migrating site με χρήση.ste αρχείου. Wizard Επιλογή Basic ή Advanced χρήστη Basic: ιδιαίτερα εύχρηστη, αποκρύπτει πολλές πληροφορίες. Advanced: όλες οι λεπτομέρειες που αφορούν το site. Εισαγωγή στοιχείων: Site Name, URL, Server Technology, κ.α. Υπάρχει built-in FTP client και ενεργοποίηση λειτουργίας check in/out για περιβάλλοντα με πολλαπλούς σχεδιαστές 12

13 Static Web Pages: Tables Εισαγωγή πίνακα (π.χ. Insert Menu Table) Table Size Rows, Columns: Αριθμοί γραμμών και στηλών Table width: Μήκος πίνακα (σε pixels ή %) Border thickness: Πάχος περιθωρίου (disable: 0) Cell padding: Απόσταση περιεχομένων από περιθώριο Cell spacing: Μέγεθος διαχωριστικού κελιών Header: επιλογή περιοχής headers (Left, Top, Both) Accessibility Caption: Περιγραφή περιεχομένων κελιού Align caption: Στοίχιση περιγραφής στον πίνακα Οι ιδιότητες του πίνακα μπορούν να αλλάξουν και από την Properties Bar. (Αλλαγή Format πίνακα: Commands Format Table) 13

14 Static Web Pages: Frames & Framesets Δημιουργία Frameset με επιλογή απο προκαθορισμένα: File menu New Framesets Επιλογή Σε κενή ιστοσελίδα: Insert HTML Επιλογή Δημιουργία Frameset from scratch: Σε κενή ιστοσελίδα: Modify Frameset Split Frame Up, Left, Right, Down... Ξεκινάμε από το κυρίως παράθυρο, και αρχίζουμε να το χωρίζουμε σε frames με επιλογή κατεύθυνσης Note for Saving: Πρέπει να σωθεί το κάθε frame σε ένα χωριστό αρχείο, και το frameset από την επιλογή Save Frameset As... 14

15 Static Web Pages: Frames & Framesets Επεξεργασία Ιδιοτήτων Frame & Frameset μπορούν να γίνουν από την Properties Bar Μερικές Ιδιότητες των frames: Frame name, Frame scroll, Borders and border width, Frame resize, Margin width and height Μερικές Ιδιότητες του frameset: Borders, Border width, Border color, Row height, Column width 15

16 Static Web Pages: HTML Forms Συλλογή και επεξεργασία δεδομένων από end users Εισαγωγή από Insert Bar Forms Tab Form Button Μερικές Ιδιότητες: Form name, Action (path σελίδας που θα την επεξεργαστεί), Target (Action Link Target), Method (Post Get) Είδη Στοιχείων Form: Textareas Check Boxes Radio Buttons Lists and Menus Buttons File Fields Image Fields Hidden Fields Jump Menus 16

17 Static Web Pages: HTML Forms Text Fields Text Areas 17

18 Static Web Pages: HTML Forms Checkboxes Radio Buttons Μπορούμε να εισάγουμε ομάδες (Radio Groups) για να δίνουμε την δυνατότητα επιλογής μόνο ενός από τη λίστα (π.χ. Gender) 18

19 Static Web Pages: HTML Forms Lists Menus Μπορούμε να εισάγουμε στοιχεία σε λίστες/μενού από το παράθυρο διαλόγου List Values, από την Properties Bar 19

20 Static Web Pages: HTML Forms Δύο είδη κουμπιών καθορισμού όλων των πληροφοριών της φόρμας: Submit, Reset Submit: Αποστέλει όλες τις πληροφορίες της φόρμας Reset: Επαναφέρει όλα τα στοιχεία στην αρχική τους μορφή (διαγράφει τα περιεχόμενα που έχει εισάγει ο χρήστης) Η συμπεριφορά καθορίζεται από την επιλογή action 20

21 Static Web Pages: HTML Forms Data Handling Γιατί το κλικ στο submit δεν λειτουργεί; Πρέπει να υπάρχει το αντίστοιχο script στον server που να αναλαμβάνει τον χειρισμό των πληροφοριών Οι προηγούμενες πληροφορίες αφορούν τον τρόπο αποστολής δεδομένων από τον browser-πελάτη στο site-διακομιστή. Οι λεπτομέρειες παραλαβής των δεδομένων από τον διακομιστή αφορούν τον δυναμικό σχεδιασμό και θα περιγραφούν στο 3ο Μέρος της παρουσίασης. Χειρισμός πληροφοριών Αρχιτεκτονική Client Server Άλλα στοιχεία φορμών: File Field: Επιτρέπει upload αρχείου από τοπικό δίσκο Hidden Field: Αποστολή πληροφοριών στον server χωρίς γνώση του χρήστη 21

22 Static Web Pages: Object Behaviors Τι είναι τα behaviors? Tα behaviors του DW αντιπροσωπεύουν συναρτήσεις JavaScript κώδικα <html> <head> <title>sample JavaScript</title> <script language="javascript"> function showmessage() { window.alert("hello"); } </script> </head> <body> <input type="button" value="click Me" onclick="showmessage();" /> </body> </html> 22

23 Static Web Pages: Object Behaviors Για διαχείριση των behaviors μιας σελίδας υπάρχει το αντίστοιχο panel Εξοικείωση με το παράθυρο του panel: Action: Ποιο είδος behavior έχει αντιστοιχιστεί σε ποια αλληλεπίδραση με το αντικείμενο. (dc Παραμετροποίηση) Show Set/All Events: Εμφάνιση behaviors που αφορούν το συγκεκριμένο αντικείμενο ή όλα τα υποστηριζόμενα behaviors Add: Επιλογή από λίστα behaviors Remove: Αφαίρεση από το αντικείμενο Reposition Behavior: Ρύθμιση προτεραιότητας behavior 23

24 Static Web Pages: Object Behaviors Behavior Example 1: Call JavaScript Το behavior αυτό είναι ιδανικό για την εισαγωγή inline JavaScript, χωρίς την εναλλαγή σε Code View Ας δούμε πως μπορούμε να χρησιμοποιήσουμε την συνάρτηση Close() Επιλέγουμε το αντικείμενο της σελίδας μας Προσθέτουμε το behavior: Behaviors Panel Call Javascript Στο παράθυρο εισάγουμε: window.close(); και ΟΚ Κάνοντας κλικ στην πρώτη στήλη του Event, επιλέγουμε με ποια αλληλεπίδραση θέλουμε να εκτελείται ο κώδικας που εισάγαμε (εδώ επιλέγουμε onclick = με κλικ στο αντικείμενο, το παράθυρο κλεινει) 24

25 Static Web Pages: Object Behaviors Behavior Example 2: Check Plugin Ελέγχει αν ο χρήστης έχει κάποιο συγκεκριμένο plugin, και ανάλογα με το αποτέλεσμα τον παραπέμπει σε κάποιο link Ας δούμε πως μπορούμε να το χρησιμοποιήσουμε: Επιλέγουμε το αντικείμενο της σελίδας μας Προσθέτουμε το behavior: Behaviors Panel Check Plugin Στο παράθυρο επιλέγουμε το plugin που μας ενδιαφέρει (Flash, QuickTime, Windows Media Player, κλπ.), η εισάγουμε το όνομα του Στό If found, go to URL εισάγουμε το URL στο οποίο μεταβαίνουν οι browsers που διαθέτουν το ζητούμενο plugin, ενώ στο Otherwise, go to URL εισάγουμε εναλλακτικό URL, και επιλέγουμε ΟΚ Επιλέγουμε το Event να συμβαίνει onclick και έχουμε τελειώσει 25

26 Static Web Pages: Object Behaviors Behavior Example 3: Open Browser Window Ανοίγει pop-up παραμετροποιημένο παράθυρο στο επιλεγμένο URL Ας δούμε πως μπορούμε να το χρησιμοποιήσουμε: Επιλέγουμε το αντικείμενο της σελίδας μας Προσθέτουμε το behavior: Behaviors Panel Open Browser Window Στο παράθυρο επιλέγουμε το URL στο οποίο μεταβαίνει, τις διαστάσεις του νέου παραθύρου, και τα χαρακτηριστικά του: Scrollbars, Menu bar, Status bar κ.α. Στo Window Name εισάγουμε το χαρακτηριστικό όνομα του παραθύρου για πιθανή αναφορά αργότερα Επιλέγουμε το Event να συμβαίνει onclick και έχουμε τελειώσει 26

27 Something Extra F 27