Macromedia DreamWeaverMacromedia DreamWeaver8.0.28.0.2

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

Μέρος 1Μέρος 1οο::Βασικές ΈννοιεςΒασικές Έννοιες

➢ Εισαγωγή στην επιφάνεια εργασίαςΕισαγωγή στην επιφάνεια εργασίας➢ Insert BarInsert Bar➢ Property BarProperty Bar➢ PanelsPanels

➢ Building a Web PageBuilding a Web Page➢ Παράδειγμα εισαγωγής εικόναςΠαράδειγμα εισαγωγής εικόνας➢ Χειρισμός ιδιοτήτων εικόναςΧειρισμός ιδιοτήτων εικόνας

➢ DreamWeaver Site ManagementDreamWeaver Site Management➢ Static Web Page DevelopmentStatic Web Page Development

➢ TablesTables➢ Frames & FramesetsFrames & Framesets➢ HTML FormsHTML Forms➢ Object BehaviorsObject Behaviors 22

10'10'

Επιφάνεια ΕργασίαςΕπιφάνεια Εργασίας➢ Εύκολη στην προσαρμογή για τον αρχάριο χρήστηΕύκολη στην προσαρμογή για τον αρχάριο χρήστη➢ Ο προχωρημένος θα βρει τις default ρυθμίσεις μάλλον Ο προχωρημένος θα βρει τις default ρυθμίσεις μάλλον

δύσχρηστεςδύσχρηστες➢ Αποτελείται από ένα σύνολο tear-off πινάκων που καλύπτουν τις πιο Αποτελείται από ένα σύνολο tear-off πινάκων που καλύπτουν τις πιο

συνηθισμένες ανάγκες του σχεδιαστή (π.χ. Database Handling, CSS, File συνηθισμένες ανάγκες του σχεδιαστή (π.χ. Database Handling, CSS, File Browser, Tag Editor κ.α.)Browser, Tag Editor κ.α.)

➢ Τα σημαντικά εργαλεία βρίσκονται σε σημεία κλειδιά της οθόνηςΤα σημαντικά εργαλεία βρίσκονται σε σημεία κλειδιά της οθόνης➢Μπορεί και να εμποδίζουν την παραγωγικότηταΜπορεί και να εμποδίζουν την παραγωγικότητα

➢ Κάποια ιδιαίτερα χαρακτηριστικά είναι “καλά κρυμμένα” και Κάποια ιδιαίτερα χαρακτηριστικά είναι “καλά κρυμμένα” και απαιτείται προσφυγή στην Βοήθεια, η οποία δεν είναι όσο εκτενής θα απαιτείται προσφυγή στην Βοήθεια, η οποία δεν είναι όσο εκτενής θα έπρεπεέπρεπε

➢ Θα μπορούσε να περιέχει περισσότερα extra χαρακτηριστικά, χωρίς να Θα μπορούσε να περιέχει περισσότερα extra χαρακτηριστικά, χωρίς να παραπέμπει σε δικτυακούς τόπουςπαραπέμπει σε δικτυακούς τόπους

33

44

55

Insert BarInsert Bar

Properties BarProperties Bar

PanelsPanels

66

Insert BarInsert Bar

➢ Η Μπάρα Εισαγωγής (Insert Bar) διαθέτει τα ακόλουθα αντικείμενα:Η Μπάρα Εισαγωγής (Insert Bar) διαθέτει τα ακόλουθα αντικείμενα:➢ Common Objects:Common Objects: Αντικείμενα συχνής χρήσης, όπως hyperlinks, tables, και Αντικείμενα συχνής χρήσης, όπως hyperlinks, tables, και

εικόνεςεικόνες➢ Layout Objects:Layout Objects: Εισαγωγή πινάκων, ετικετών <div>, ακόμα και στρώσεων Εισαγωγή πινάκων, ετικετών <div>, ακόμα και στρώσεων

(layers)(layers)➢ Form Objects:Form Objects: Αντικείμενα τύπoυ Form (πεδία κειμένου, radio buttons, Αντικείμενα τύπoυ Form (πεδία κειμένου, radio buttons,

λίστες, μενού, κουμπιά κ.α.)λίστες, μενού, κουμπιά κ.α.)➢ Text Objects:Text Objects: Special Characters, Headings κ.α.Special Characters, Headings κ.α.➢ HTML Objects:HTML Objects: Head Tags, Script Tags, Horizontal RulesHead Tags, Script Tags, Horizontal Rules➢ Application Objects:Application Objects: Αντικείμενα δυναμικής σχεδίασης, ανάλογα με την Αντικείμενα δυναμικής σχεδίασης, ανάλογα με την

τεχνολογία που χρησιμοποιεί ο χρήστηςτεχνολογία που χρησιμοποιεί ο χρήστης➢ Flash ElementsFlash Elements➢ Favorites:Favorites: Προκαθορισμένη λίστα αγαπημένων αντικειμένωνΠροκαθορισμένη λίστα αγαπημένων αντικειμένων

77

Properties BarProperties Bar➢ Ιδιαίτερα σημαντική στον χειρισμό αντικειμένων εύκολα και Ιδιαίτερα σημαντική στον χειρισμό αντικειμένων εύκολα και

γρήγοραγρήγορα➢ Αυτο-προσαρμοζόμενη στο αντικείμενο που επιλέγει ο χρήστηςΑυτο-προσαρμοζόμενη στο αντικείμενο που επιλέγει ο χρήστης➢ Κοινά χαρακτηριστικά αντικειμένων:Κοινά χαρακτηριστικά αντικειμένων:

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

88

PanelsPanels➢ Προσφέρουν εύκολη πρόσβαση σε διάφορες λειτουργίες:Προσφέρουν εύκολη πρόσβαση σε διάφορες λειτουργίες:

➢CSS Panel GroupCSS Panel Group➢CSS Styles: Cascading Style & Style Sheet ManagementCSS Styles: Cascading Style & Style Sheet Management➢LayersLayers

➢Application Panel GroupApplication Panel Group➢Behaviors: Object Behavior ManagementBehaviors: Object Behavior Management➢DatabasesDatabases➢BindingsBindings➢ComponentsComponents

➢Files Panel GroupFiles Panel Group➢Files: File Browser (of site file structure)Files: File Browser (of site file structure)➢Snippets: Συχνά χρησιμοποιούμενα scripts, markups και Snippets: Συχνά χρησιμοποιούμενα scripts, markups και

σημειώσεις.σημειώσεις.➢AssetsAssets

Building a Web PageBuilding a Web Page➢ Το κυρίως παράθυρο εργασίας αποτελείται από:Το κυρίως παράθυρο εργασίας αποτελείται από:

➢ Code ViewCode View➢ Split ViewSplit View➢ Design ViewDesign View

➢ Η δημιουργία μιας σελίδας στο Design View πρακτικά Η δημιουργία μιας σελίδας στο Design View πρακτικά αντιμετωπίζει κάθετι ως αντικείμενοαντιμετωπίζει κάθετι ως αντικείμενο

➢ Η εισαγωγή οποιουδήποτε αντικειμένου ακολουθεί το πρότυπο:Η εισαγωγή οποιουδήποτε αντικειμένου ακολουθεί το πρότυπο:➢Go to Menu, Bar, Panel Go to Menu, Bar, Panel →→ Click on Object Name Click on Object Name

➢ Μερικά hotspots συχνά χρησιμοποιούμενων αντικειμένων:Μερικά hotspots συχνά χρησιμοποιούμενων αντικειμένων:➢ Menus: Insert, Modify, TextMenus: Insert, Modify, Text➢ Bars: Insert, PropertiesBars: Insert, Properties➢ Panels: Application, FilesPanels: Application, Files

99

Building a Web Page:Building a Web Page:Image Insertion ExampleImage Insertion Example

➢ Εισαγωγή εικόνας:Εισαγωγή εικόνας:➢Δεικτοδότηση τοποθεσίας επικόλλησηςΔεικτοδότηση τοποθεσίας επικόλλησης➢Άνοιγμα παραθύρου εισαγωγής εικόνας:Άνοιγμα παραθύρου εισαγωγής εικόνας:

➢By menu: Insert By menu: Insert →→ Image Image➢By bar: Insert bar By bar: Insert bar → Common Objects → Image→ Common Objects → Image

➢Επιλογή το URL της εικόνας να είναι:Επιλογή το URL της εικόνας να είναι:➢Document (default) ή Site Root RelatedDocument (default) ή Site Root Related

➢OK OK → Η→ Η εικόνα εισάγεται στο εικόνα εισάγεται στοσημείο που δεικτοδοτήσαμεσημείο που δεικτοδοτήσαμεπροηγουμένωςπροηγουμένως

1010

Building a Web Page:Building a Web Page:Further on Image ManipulatingFurther on Image Manipulating

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

1111

Web Site ManagementWeb Site Management➢ Η διαχείριση του site ξεκινά από την δήλωσή τουΗ διαχείριση του site ξεκινά από την δήλωσή του

➢ Δημιουργία συνδέσμων και cache για τον εντοπισμό αλλαγώνΔημιουργία συνδέσμων και cache για τον εντοπισμό αλλαγών➢Κάθε αλλαγή ενημερώνει και άλλα αρχεία αυτόματαΚάθε αλλαγή ενημερώνει και άλλα αρχεία αυτόματα

➢ Παράθυρο διαλόγου Manage Sites (Site Menu Παράθυρο διαλόγου Manage Sites (Site Menu →→ Manage Sites) Manage Sites)➢ New:New: Επιλογή τύπου site και δήλωσή του. (wizard)Επιλογή τύπου site και δήλωσή του. (wizard)➢ Edit:Edit: Επεξεργασία ήδη δηλωμένων sites. (wizard)Επεξεργασία ήδη δηλωμένων sites. (wizard)➢ Duplicate:Duplicate: Δυνατότητα χρήσης site ως template για ανάπτυξη νέων.Δυνατότητα χρήσης site ως template για ανάπτυξη νέων.➢ Remove:Remove: Διαγράφει τους συνδέσμους του DW, όχι τα αρχεία.Διαγράφει τους συνδέσμους του DW, όχι τα αρχεία.➢ Export/Import: Migrating site με χρήση .ste αρχείου.Export/Import: Migrating site με χρήση .ste αρχείου.

➢ WizardWizard➢ Επιλογή Basic ή Advanced χρήστηΕπιλογή Basic ή Advanced χρήστη

➢Basic:Basic: ιδιαίτερα εύχρηστη, αποκρύπτει πολλές πληροφορίες.ιδιαίτερα εύχρηστη, αποκρύπτει πολλές πληροφορίες.➢Advanced:Advanced: όλες οι λεπτομέρειες που αφορούν το site.όλες οι λεπτομέρειες που αφορούν το site.

➢ Εισαγωγή στοιχείων: Site Name, URL, Server Technology, κ.α.Εισαγωγή στοιχείων: Site Name, URL, Server Technology, κ.α.➢ Υπάρχει built-in FTP client και ενεργοποίηση λειτουργίας checkΥπάρχει built-in FTP client και ενεργοποίηση λειτουργίας check

in/out για περιβάλλοντα με πολλαπλούς σχεδιαστέςin/out για περιβάλλοντα με πολλαπλούς σχεδιαστές 1212

Static Web Pages: Static Web Pages: TablesTables➢ Εισαγωγή πίνακα (π.χ. Insert Menu Εισαγωγή πίνακα (π.χ. Insert Menu →→ Table) Table)

➢ Table SizeTable Size➢Rows, Columns:Rows, Columns: Αριθμοί γραμμών καιΑριθμοί γραμμών και

στηλώνστηλών➢Table width:Table width: Μήκος πίνακα (σε pixels ή %)Μήκος πίνακα (σε pixels ή %)➢Border thickness:Border thickness: Πάχος περιθωρίουΠάχος περιθωρίου

(disable: 0)(disable: 0)➢Cell padding:Cell padding: Απόσταση περιεχομένωνΑπόσταση περιεχομένων

από περιθώριοαπό περιθώριο➢Cell spacing:Cell spacing: Μέγεθος διαχωριστικού κελιώνΜέγεθος διαχωριστικού κελιών

➢ Header: Header: επιλογή περιοχής headers (Left, Top, Both)επιλογή περιοχής headers (Left, Top, Both)➢ AccessibilityAccessibility

➢Caption:Caption: Περιγραφή περιεχομένων κελιούΠεριγραφή περιεχομένων κελιού➢Align caption:Align caption: Στοίχιση περιγραφής στον πίνακαΣτοίχιση περιγραφής στον πίνακα

➢ Οι ιδιότητες του πίνακα μπορούν να αλλάξουν και από την Properties Bar. Οι ιδιότητες του πίνακα μπορούν να αλλάξουν και από την Properties Bar. (Αλλαγή Format πίνακα: Commands (Αλλαγή Format πίνακα: Commands → Format Table)→ Format Table)

1313

Static Web Pages:Static Web Pages:Frames & FramesetsFrames & Framesets

➢ Δημιουργία Frameset με επιλογή απο προκαθορισμένα:Δημιουργία Frameset με επιλογή απο προκαθορισμένα:➢ File menu File menu → New → → New → Framesets Framesets → Ε→ Επιλογήπιλογή➢ Σε κενή ιστοσελίδα: Insert Σε κενή ιστοσελίδα: Insert → → HTML HTML → Επιλογή→ Επιλογή

➢ Δημιουργία Frameset from scratch:Δημιουργία Frameset from scratch:➢ Σε κενή ιστοσελίδα: Modify Σε κενή ιστοσελίδα: Modify → → Frameset Frameset → → Split Frame Up, Left, Split Frame Up, Left,

Right, Down...Right, Down...➢Ξεκινάμε από το κυρίωςΞεκινάμε από το κυρίως

παράθυρο, και αρχίζουμε ναπαράθυρο, και αρχίζουμε νατο χωρίζουμε σε frames μετο χωρίζουμε σε frames μεεπιλογή κατεύθυνσηςεπιλογή κατεύθυνσης

➢ Note for Saving:Note for Saving: Πρέπει να σωθεί τοΠρέπει να σωθεί τοκάθε frame σε ένα χωριστό αρχείο,κάθε frame σε ένα χωριστό αρχείο,και το frameset από την επιλογήκαι το frameset από την επιλογήSave Frameset As...Save Frameset As...

1414

Static Web Pages:Static Web Pages:Frames & FramesetsFrames & Framesets

➢ Επεξεργασία Ιδιοτήτων Επεξεργασία Ιδιοτήτων Frame & Frameset μπορούν Frame & Frameset μπορούν να γίνουν από την Properties να γίνουν από την Properties BarBar➢ Μερικές Ιδιότητες των Μερικές Ιδιότητες των

frames:frames: FFrame name, Frame name, Frame rame scroll, Borders and border scroll, Borders and border width, Frame resize, Margin width, Frame resize, Margin width and heightwidth and height

➢ Μερικές Ιδιότητες του Μερικές Ιδιότητες του frameset:frameset: Borders, Borders, Border Border width, Border color, Row width, Border color, Row height, Column widthheight, Column width

1515

Static Web Pages: Static Web Pages: HTML FormsHTML Forms➢ Συλλογή και επεξεργασία δεδομένων από end usersΣυλλογή και επεξεργασία δεδομένων από end users➢ Εισαγωγή από Insert Bar Εισαγωγή από Insert Bar →→ Forms Tab Forms Tab → Form Button→ Form Button

➢ Μερικές Ιδιότητες:Μερικές Ιδιότητες: Form name, Action (path σελίδας που θα την Form name, Action (path σελίδας που θα την επεξεργαστεί), Target (Action → Link Target), Method (Post || Get)επεξεργαστεί), Target (Action → Link Target), Method (Post || Get)

➢ Είδη Στοιχείων Form:Είδη Στοιχείων Form:➢ TextareasTextareas➢ Check BoxesCheck Boxes➢ Radio ButtonsRadio Buttons➢ Lists and MenusLists and Menus➢ ButtonsButtons➢ File FieldsFile Fields➢ Image FieldsImage Fields➢ Hidden FieldsHidden Fields➢ Jump MenusJump Menus

1616

Static Web Pages: Static Web Pages: HTML FormsHTML Forms

1717

Text Fields – Text Areas

Static Web Pages: Static Web Pages: HTML FormsHTML Forms

1818

Μπορούμε να εισάγουμε ομάδες (Radio Groups) για να δίνουμε την Μπορούμε να εισάγουμε ομάδες (Radio Groups) για να δίνουμε την δυνατότητα επιλογής μόνο ενός από τη λίστα (π.χ. Gender)δυνατότητα επιλογής μόνο ενός από τη λίστα (π.χ. Gender)

Checkboxes – Radio Buttons

Static Web Pages: Static Web Pages: HTML FormsHTML Forms

1919

Μπορούμε να εισάγουμε στοιχεία σε λίστες/μενού από το παράθυρο Μπορούμε να εισάγουμε στοιχεία σε λίστες/μενού από το παράθυρο διαλόγου List Values, από την Properties Barδιαλόγου List Values, από την Properties Bar

Lists – Menus

Static Web Pages: Static Web Pages: HTML FormsHTML Forms

➢ Δύο είδη κουμπιών καθορισμού όλων των πληροφοριών της Δύο είδη κουμπιών καθορισμού όλων των πληροφοριών της φόρμας: φόρμας: SubmitSubmit, , ResetReset➢ Submit:Submit: Αποστέλει όλες τις πληροφορίες της φόρμαςΑποστέλει όλες τις πληροφορίες της φόρμας➢ Reset:Reset:

ΕπαναφέρειΕπαναφέρειόλα τα στοιχείαόλα τα στοιχείαστην αρχική τουςστην αρχική τουςμορφή (διαγράφειμορφή (διαγράφειτα περιεχόμενατα περιεχόμεναπου έχει εισάγειπου έχει εισάγειο χρήστης)ο χρήστης)

➢ Η συμπεριφοράΗ συμπεριφοράκαθορίζεται απόκαθορίζεται απότην επιλογή actionτην επιλογή action

2020

Static Web Pages: Static Web Pages: HTML FormsHTML FormsData HandlingData Handling

➢ Γιατί το κλικ στο submit δεν λειτουργεί;Γιατί το κλικ στο submit δεν λειτουργεί;➢ Πρέπει να υπάρχει το αντίστοιχο script στον server που να αναλαμβάνει τον Πρέπει να υπάρχει το αντίστοιχο script στον server που να αναλαμβάνει τον

χειρισμό των πληροφοριώνχειρισμό των πληροφοριών➢ Οι προηγούμενες πληροφορίες αφορούν τον τρόπο αποστολής Οι προηγούμενες πληροφορίες αφορούν τον τρόπο αποστολής

δεδομένων από τον browser-πελάτη στο site-διακομιστή.δεδομένων από τον browser-πελάτη στο site-διακομιστή.➢ Οι λεπτομέρειες παραλαβής των δεδομένων από τον διακομιστή αφορούν τον Οι λεπτομέρειες παραλαβής των δεδομένων από τον διακομιστή αφορούν τον

δυναμικό σχεδιασμό και θα περιγραφούν στο 3ο Μέρος της παρουσίασης.δυναμικό σχεδιασμό και θα περιγραφούν στο 3ο Μέρος της παρουσίασης.➢ Χειρισμός πληροφοριών Χειρισμός πληροφοριών →→ Αρχιτεκτονική Client – Server Αρχιτεκτονική Client – Server

2121➢ Άλλα στοιχεία φορμών:Άλλα στοιχεία φορμών:

➢ File Field:File Field: Επιτρέπει upload αρχείου από τοπικό δίσκο Επιτρέπει upload αρχείου από τοπικό δίσκο➢ Hidden Field:Hidden Field: Αποστολή πληροφοριών στον server χωρίς γνώση του χρήστη Αποστολή πληροφοριών στον server χωρίς γνώση του χρήστη

<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>

Static Web Pages: Static Web Pages: Object BehaviorsObject Behaviors

2222

Τι είναι τα behaviors?Tα behaviors του DW αντιπροσωπεύουν συναρτήσεις JavaScript κώδικα

Static Web Pages: Static Web Pages: Object BehaviorsObject Behaviors

2323

➢ Για διαχείριση των behaviors μιας σελίδας υπάρχει το αντίστοιχο panelΓια διαχείριση των behaviors μιας σελίδας υπάρχει το αντίστοιχο panel➢ Εξοικείωση με το παράθυρο του panel:Εξοικείωση με το παράθυρο του panel:

➢ Action:Action: Ποιο είδος behavior έχει αντιστοιχιστεί σε ποια αλληλεπίδραση με το Ποιο είδος behavior έχει αντιστοιχιστεί σε ποια αλληλεπίδραση με το αντικείμενο. (dc αντικείμενο. (dc →→ Παραμετροποίηση) Παραμετροποίηση)

➢ Show Set/All Events:Show Set/All Events: Εμφάνιση behaviors που αφορούν το συγκεκριμένο Εμφάνιση behaviors που αφορούν το συγκεκριμένο αντικείμενο ή όλα τα υποστηριζόμενααντικείμενο ή όλα τα υποστηριζόμεναbehaviorsbehaviors

➢ Add:Add: Επιλογή από λίστα Επιλογή από λίσταbehaviorsbehaviors

➢ Remove:Remove: Αφαίρεση Αφαίρεσηαπό το αντικείμενοαπό το αντικείμενο

➢ Reposition Behavior:Reposition Behavior: Ρύθμιση Ρύθμισηπροτεραιότητας behaviorπροτεραιότητας behavior

Static Web Pages: Static Web Pages: Object BehaviorsObject BehaviorsBehavior Example 1: “Call JavaScript”Behavior Example 1: “Call JavaScript”

2424

➢ Το behavior αυτό είναι ιδανικό για την εισαγωγή inline JavaScript, Το behavior αυτό είναι ιδανικό για την εισαγωγή inline JavaScript, χωρίς την εναλλαγή σε Code Viewχωρίς την εναλλαγή σε Code View

➢ Ας δούμε πως μπορούμε να χρησιμοποιήσουμε την συνάρτηση Ας δούμε πως μπορούμε να χρησιμοποιήσουμε την συνάρτηση Close()Close()➢ Επιλέγουμε το αντικείμενο της σελίδας μαςΕπιλέγουμε το αντικείμενο της σελίδας μας➢ Προσθέτουμε το behavior: Προσθέτουμε το behavior: Behaviors Panel Behaviors Panel → → → Call→ Call

JavascriptJavascript➢ Στο παράθυρο εισάγουμε: Στο παράθυρο εισάγουμε: window.close();window.close(); και και ΟΚΟΚ➢ Κάνοντας κλικ στην πρώτη στήληΚάνοντας κλικ στην πρώτη στήλη

του Event, επιλέγουμε με ποιατου Event, επιλέγουμε με ποιααλληλεπίδραση θέλουμε να εκτε-αλληλεπίδραση θέλουμε να εκτε-λείται ο κώδικας που εισάγαμε (εδώλείται ο κώδικας που εισάγαμε (εδώεπιλέγουμε επιλέγουμε onClickonClick = με κλικ στο = με κλικ στοαντικείμενο, το παράθυρο κλεινει)αντικείμενο, το παράθυρο κλεινει)

Static Web Pages: Static Web Pages: Object BehaviorsObject BehaviorsBehavior Example 2: “Check Plugin”Behavior Example 2: “Check Plugin”

2525

➢ Ελέγχει αν ο χρήστης έχει κάποιο συγκεκριμένο plugin, και ανάλογα Ελέγχει αν ο χρήστης έχει κάποιο συγκεκριμένο plugin, και ανάλογα με το αποτέλεσμα τον παραπέμπει σε κάποιο linkμε το αποτέλεσμα τον παραπέμπει σε κάποιο link

➢ Ας δούμε πως μπορούμε να το χρησιμοποιήσουμε:Ας δούμε πως μπορούμε να το χρησιμοποιήσουμε:➢ Επιλέγουμε το αντικείμενο της σελίδας μαςΕπιλέγουμε το αντικείμενο της σελίδας μας➢ Προσθέτουμε το behavior: Προσθέτουμε το behavior: Behaviors Panel Behaviors Panel → → → Check Plugin→ Check Plugin➢ Στο παράθυρο επιλέγουμε το plugin που μας ενδιαφέρει (Flash, Quick-Στο παράθυρο επιλέγουμε το plugin που μας ενδιαφέρει (Flash, Quick-

Time, Windows Media Player, κλπ.), η εισάγουμε το όνομα τουTime, Windows Media Player, κλπ.), η εισάγουμε το όνομα του➢ Στό If found, go to URL εισάγουμε το URL στο οποίο μεταβαίνουν οι Στό If found, go to URL εισάγουμε το URL στο οποίο μεταβαίνουν οι

browsers που διαθέτουν το ζητούμενο plugin, ενώ στο Otherwise, go to browsers που διαθέτουν το ζητούμενο plugin, ενώ στο Otherwise, go to URL εισάγουμε εναλλακτικό URL, και επιλέγουμε ΟΚURL εισάγουμε εναλλακτικό URL, και επιλέγουμε ΟΚ

➢ Επιλέγουμε το Event να συμβαίνει onClick και έχουμε τελειώσειΕπιλέγουμε το Event να συμβαίνει onClick και έχουμε τελειώσει

Static Web Pages: Static Web Pages: Object BehaviorsObject BehaviorsBehavior Example 3: “Open Browser Window”Behavior Example 3: “Open Browser Window”

2626

➢ Ανοίγει pop-up παραμετροποιημένο παράθυρο στο επιλεγμένο URLΑνοίγει pop-up παραμετροποιημένο παράθυρο στο επιλεγμένο URL➢ Ας δούμε πως μπορούμε να το χρησιμοποιήσουμε:Ας δούμε πως μπορούμε να το χρησιμοποιήσουμε:

➢ Επιλέγουμε το αντικείμενο της σελίδας μαςΕπιλέγουμε το αντικείμενο της σελίδας μας➢ Προσθέτουμε το behavior: Προσθέτουμε το behavior: Behaviors Panel Behaviors Panel → → → Open Browser → Open Browser

WindowWindow➢ Στο παράθυρο επιλέγουμε το URL στο οποίο μεταβαίνει, τις διαστάσεις του Στο παράθυρο επιλέγουμε το URL στο οποίο μεταβαίνει, τις διαστάσεις του

νέου παραθύρου, και τα χαρακτηριστικά του: Scrollbars, Menu bar, Status νέου παραθύρου, και τα χαρακτηριστικά του: Scrollbars, Menu bar, Status bar κ.α.bar κ.α.

➢ Στo Window Name εισάγουμε το χαρακτηριστικό όνομα του παραθύρου για Στo Window Name εισάγουμε το χαρακτηριστικό όνομα του παραθύρου για πιθανή αναφορά αργότερα πιθανή αναφορά αργότερα

➢ Επιλέγουμε το Event να συμβαίνει onClick και έχουμε τελειώσειΕπιλέγουμε το Event να συμβαίνει onClick και έχουμε τελειώσει

Something ExtraSomething Extra➢ FF

2727