Macromedia DreamWeaver

8.0.2

Παρουσίαση εργαλείου σχεδίασης

διεπαφής χρήστη
 ο
Μέρος 1 :
Βασικές Έννοιες
➢ Εισαγωγή στην επιφάνεια εργασίας
10'
➢ Insert Bar
➢ Property Bar
➢ Panels
➢ Building a Web Page
➢ Παράδειγμα εισαγωγής εικόνας
➢ Χειρισμός ιδιοτήτων εικόνας
➢ DreamWeaver Site Management
➢ Static Web Page Development
➢ Tables
➢ Frames & Framesets
➢ HTML Forms
➢ Object Behaviors 2
 Επιφάνεια Εργασίας
➢ Εύκολη στην προσαρμογή για τον αρχάριο χρήστη
➢ Ο προχωρημένος θα βρει τις default ρυθμίσεις μάλλον
δύσχρηστες
➢ Αποτελείται από ένα σύνολο tear-off πινάκων που καλύπτουν τις πιο
συνηθισμένες ανάγκες του σχεδιαστή (π.χ. Database Handling, CSS, File
Browser, Tag Editor κ.α.)
➢ Τα σημαντικά εργαλεία βρίσκονται σε σημεία κλειδιά της οθόνης
➢Μπορεί και να εμποδίζουν την παραγωγικότητα
➢ Κάποια ιδιαίτερα χαρακτηριστικά είναι “καλά κρυμμένα” και
απαιτείται προσφυγή στην Βοήθεια, η οποία δεν είναι όσο εκτενής θα
έπρεπε
➢ Θα μπορούσε να περιέχει περισσότερα extra χαρακτηριστικά, χωρίς να
παραπέμπει σε δικτυακούς τόπους

3
4
 Insert Bar

Panels

Properties Bar

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

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

11
 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
 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
 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
 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
 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
Static Web Pages: HTML Forms
Text Fields – Text Areas

17
 Static Web Pages: HTML Forms
Checkboxes – Radio Buttons

Μπορούμε να εισάγουμε ομάδες (Radio Groups) για να δίνουμε την

δυνατότητα επιλογής μόνο ενός από τη λίστα (π.χ. Gender)

18
 Static Web Pages: HTML Forms
Lists – Menus

Μπορούμε να εισάγουμε στοιχεία σε λίστες/μενού από το παράθυρο

διαλόγου List Values, από την Properties Bar

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

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

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

➢ File Field: Επιτρέπει upload αρχείου από τοπικό δίσκο
➢ Hidden Field: Αποστολή πληροφοριών στον server χωρίς γνώση του χρήστη 21
 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
 Static Web Pages: Object Behaviors
➢ Για διαχείριση των behaviors μιας σελίδας υπάρχει το αντίστοιχο panel
➢ Εξοικείωση με το παράθυρο του panel:
➢ Action: Ποιο είδος behavior έχει αντιστοιχιστεί σε ποια αλληλεπίδραση με το
αντικείμενο. (dc → Παραμετροποίηση)
➢ Show Set/All Events: Εμφάνιση behaviors που αφορούν το συγκεκριμένο
αντικείμενο ή όλα τα υποστηριζόμενα
behaviors
➢ Add: Επιλογή από λίστα
behaviors
➢ Remove: Αφαίρεση
από το αντικείμενο
➢ Reposition Behavior: Ρύθμιση
προτεραιότητας behavior

23
 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
 Static Web Pages: Object Behaviors
Behavior Example 2: “Check Plugin”
➢ Ελέγχει αν ο χρήστης έχει κάποιο συγκεκριμένο plugin, και ανάλογα
με το αποτέλεσμα τον παραπέμπει σε κάποιο link
➢ Ας δούμε πως μπορούμε να το χρησιμοποιήσουμε:
➢ Επιλέγουμε το αντικείμενο της σελίδας μας
➢ Προσθέτουμε το behavior: Behaviors Panel → → Check Plugin
➢ Στο παράθυρο επιλέγουμε το plugin που μας ενδιαφέρει (Flash, Quick-
Time, Windows Media Player, κλπ.), η εισάγουμε το όνομα του
➢ Στό If found, go to URL εισάγουμε το URL στο οποίο μεταβαίνουν οι
browsers που διαθέτουν το ζητούμενο plugin, ενώ στο Otherwise, go to
URL εισάγουμε εναλλακτικό URL, και επιλέγουμε ΟΚ
➢ Επιλέγουμε το Event να συμβαίνει onClick και έχουμε τελειώσει

25
 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
 Something Extra
➢F

27