Dwlessons 01 lesson

1. Το Πρόγραμμα Dreamweaver
Quick Start Guide

2. Δραστηριότητα 10 (τετρ.μαθητ.5,σελ15):
Να αντιστοιχίσετε τα Tags

3. Dreamweaver
Τι Είναι το DreamWeaver
 Το πρόγραμμα DreamWeaver της εταιρείας Adobe είναι ένα κορυφαίο
πρόγραμμα δημιουργίας και επεξεργασίας ιστοσελίδων, δηλαδή κώδικα
HTML, που είναι ιδιαίτερα εύκολο και φιλικό στη χρήση του.
 Το όνομα DreamWeaver προέρχεται από ένα παλιό ρομαντικό τραγούδι.
 Το DreamWeaver είναι εξαίρετο για να μπορούμε να δημιουργήσουμε στα
γρήγορα φόρμες (forms), πλαίσια (frames), πίνακες (tables) και άλλα
αντικείμενα της HTML.
 Είναι, όμως, ιδιαίτερα καλό όταν θέλουμε να δώσουμε σε μια ιστοσελίδα τη
δυνατότητα να κάνει κάτι. Πρέπει να έχουμε υπόψη μας ότι το DreamWeaver
μπορεί να χρησιμοποιηθεί και για τη δημιουργία εφαρμογών πολυμέσων.

4. Dreamweaver Jumpstart
Τι Είναι το DreamWeaver
 Το DreamWeaver έχει δυνατότητες για δημιουργία δυναμικής HTML (DHMTL)
και επιτρέπει κίνησης γραμμής χρόνου, απόλυτη τοποθέτηση
περιεχομένων,δημιουργία επιπέδων (layers) και συγγραφή σεναρίων (scripts).
 Το DreamWeaver περιέχει δικές του συμπεριφορές (behaviors), που είναι
έτοιμα scripts τα οποία μπορούμε να προσθέσουμε πολύ εύκολα σ’ ένα
αντικείμενο.
 Το DreamWeaver μάς παρέχει την ελευθερία να σχεδιάσουμε οπτικά την
εμφάνιση μιας ιστοσελίδας και τη δύναμη να την κάνουμε να λειτουργεί όπως
ακριβώς θέλουμε.
 Μπορούμε να δημιουργήσουμε τη δική μας προσωπική ιστοσελίδα (personal
web page) ή μια ολόκληρη περιοχή (web site) σ’ ένα εταιρικό δίκτυο
(intranet).

5. Dreamweaver
 Design and Layout
 Διαχείρηση Site και File Transfer
Protocol (FTP)
 Περιβάλλον Code & Text Editor
 Υποστήριξη για Σχεδιασμό
 Mobile συσκευών (Window >
Multiscreen Preview )
 Page and code object Insert
panels

6. Dreamweaver
 Customizable
workspace layouts:
 Powerful visual aids
 Live View and Live
Code
 CSS Inspection and
the Enable/Disable
Feature
 Related files

7. Dreamweaver
 Code Navigator
 Photoshop smart
objects
 HTML5, CSS3, and
PHP code hinting

8. Dreamweaver
 File > Open. dw01lessons
 Επιλέγουμε BasicHTML.html and press Open

9. Dreamweaver
Placing images in HTML
 File > Open /
dw01lessons/Images.html πατήστε
Open
 Split button in the Document toolbar
 Common / Insert / Image / gears.jpg
από το φάκελο images / dw01lessons
 Image Tag Accessibility Attributes
βάζουμε «Gears Image» στο
Alternate / OK για την εισαγωγή
εικόνας.

10. Dreamweaver
 Colors in HTML
 Case sensitivity and
whitespace rules
 File >
Open/dw01lessons
/Whitespace.html
πατάμε Open
 Split view
 Shift+Enter
 simple Enter
 File/Save
 File/Close

11. Dreamweaver
 Element hierarchy
 <strong><p>Big bold paragraph</p></strong>
ΛΑΘΟΣ ιεραρχία
 <p><strong>Big bold paragraph</strong></p>
ΣΩΣΤΗ ιεραρχία

12. Dreamweaver
 Element hierarchy
 <strong><p>Big bold paragraph</p></strong>
ΛΑΘΟΣ ιεραρχία
 <p><strong>Big bold paragraph</strong></p>
ΣΩΣΤΗ ιεραρχία
 Creating new documents

13. Dreamweaver
Setting Up a New Site
 Site > New Site, Site name : Organic Utopia
 Advanced site-creation options

14. Dreamweaver
Adding pages
 File > New

15. Dreamweaver
Defining page properties File > New