23/2/22, 4:26 π.μ.

Δημιουργία νέου εγγράφου HTML στο Dreamweaver

Δημιουργία νέου εγγράφου HTML στο Dreamweaver

Η συγκεκριμένη άσκηση μπορεί να εκτελεστεί από οποιαδήποτε έκδοση του Dreamweaver. Οι εικόνες και το περιβάλλον εργασίας του παραδείγματος είναι, ωστόσο, από τη νεώτερη
έκδοση του Adobe Dreamweaver CC.

1. Ξεκινήστε τη λειτουργία του Dreamweaver.

2. Επιλέξτε File New για να δημιουργήσετε ένα νέο έγγραφο.

3. Στο παράθυρο διαλόγου New Document επιλέξτε New Document στο αριστερό μέρος του παραθύρου.

4. Στην ενότητα Document Type επιλέξτε HTML ως τύπος εγγράφου.

5. Στην ενότητα Framework επιλέξτε None ενώ στο πεδίο Doc Type: επιλέξτε HTML5.

6. Κάντε κλικ στο κουμπί Create (δημιουργία) για να δημιουργήσετε το νέο έγγραφο HTML.

https://rea.elke.uoa.gr/rea/lesson/FAF0D969-30E3-458A-856B-64BEC8D516C9/askisi1.html 1/11
23/2/22, 4:26 π.μ. Δημιουργία νέου εγγράφου HTML στο Dreamweaver

Εικόνα 1. Δημιουργία νέου εγγράφου HTML στο Dreamweaver

Ένα νέο παράθυρο εγγράφου ανοίγει στο Dreamweaver. Το έγγραφο μπορεί να εμφανίζεται με τέσσερις βασικούς τρόπους:

προβολή Code (κώδικα),

προβολή Split (διαιρεμένη προβολή κώδικα – σχεδίασης),

https://rea.elke.uoa.gr/rea/lesson/FAF0D969-30E3-458A-856B-64BEC8D516C9/askisi1.html 2/11
23/2/22, 4:26 π.μ. Δημιουργία νέου εγγράφου HTML στο Dreamweaver

προβολή Design (σχεδίασης), ή

προβολή Live.

Στην προβολή Code (κώδικα) θα διαπιστώσετε ότι το μεγαλύτερο μέρος της δομής της σελίδας (hmtl, head, body) εμφανίζεται αυτόματα στο Dreamweaver. Το Dreamweaver παρέχει ένα
τεράστιο πλεονέκτημα σε σχέση με ένα απλό επεξεργαστή κειμένου. Η βασική δομή βρίσκεται ήδη στη θέση της, η οποία περιλαμβάνει όλες τις βασικές ετικέτες για τη δημιουργία
εγγράφου στην HTML. Αυτό που απομένει είναι να προσθέσετε το περιεχόμενο της σελίδας.

https://rea.elke.uoa.gr/rea/lesson/FAF0D969-30E3-458A-856B-64BEC8D516C9/askisi1.html 3/11
23/2/22, 4:26 π.μ. Δημιουργία νέου εγγράφου HTML στο Dreamweaver

Εικόνα 2

7. Κάντε κλικ στο κουμπί Split ώστε να μεταβείτε στη διαιρεμένη προβολή, δηλαδή στην προβολή όπου εμφανίζεται και ο κώδικας αλλά και η σχεδίαση, δηλαδή η εμφάνιση της
ιστοσελίδας.

8. Στην προβολή κώδικα, εισάγετε το δρομέα μετά την ετικέτα ανοίγματος του κυρίως σώματος της σελίδας και πληκτρολογήστε τη φράση «Άσκηση 1».

9. Μετακινήστε το δείκτη στην αρχή του κειμένου και ξεκινήστε να πληκτρολογείτε για να ανοίξετε το χαρακτηριστικό υπόδειξης κώδικα. Θα διαπιστώσετε ότι το Dreamweaver θα
ανοίξει αυτόματα μια αναπτυσσόμενη λίστα με συμβατά στοιχεία κώδικα (βλέπε Εικόνα 3).

10. Κάντε κλικ στο στοιχείο h1 από τη λίστα, ώστε να το εισάγετε στον κώδικα. Πληκτρολογήστε για να κλείσετε την ετικέτα. Θα διαπιστώσετε ότι το Dreamweaver κλείνει αυτόματα την

ετικέτα κεφαλίδας που μόλις δημιουργήσατε . Στην περίπτωση που το κείμενο είναι εκτός της ετικέτας να το εισάγετε μέσα στην ετικέτα της κεφαλίδας.

11. Πατήστε Enter/Return για να εισάγετε αλλαγή γραμμής.

12. Δημιουργήστε μία νέα παράγραφο εισάγοντας την ετικέτα . Πληκτρολογήστε τη φράση «Welcome to my first Dreamweaver page».

https://rea.elke.uoa.gr/rea/lesson/FAF0D969-30E3-458A-856B-64BEC8D516C9/askisi1.html 4/11
23/2/22, 4:26 π.μ. Δημιουργία νέου εγγράφου HTML στο Dreamweaver

Εικόνα 3

https://rea.elke.uoa.gr/rea/lesson/FAF0D969-30E3-458A-856B-64BEC8D516C9/askisi1.html 5/11
23/2/22, 4:26 π.μ. Δημιουργία νέου εγγράφου HTML στο Dreamweaver

Εικόνα 4

13. Στην προβολή σχεδίασης θα διαπιστώσετε ότι στη νέα παράγραφο εμφανίζεται ένα εικονίδιο με τρεις γραμμούλες. Πατήστε στο κουμπί Edit HTML attributes και επιλέξτε τα κουμπιά
για να εφαρμόσετε έντονη (B) και πλάγια γραφή στο κείμενο. Εάν έχετε παλιότερη έκδοση μπορείτε να εφαρμόσετε στυλ στο κείμενο από τον Property Inspector (panel Properties).

https://rea.elke.uoa.gr/rea/lesson/FAF0D969-30E3-458A-856B-64BEC8D516C9/askisi1.html 6/11
23/2/22, 4:26 π.μ. Δημιουργία νέου εγγράφου HTML στο Dreamweaver

Εικόνα 5

Θα διαπιστώσετε ότι στην προβολή Code το Dreamweaver έχει αυτόματα εισάγει τις ετικέτες και . Αυτές οι ετικέτες παράγουν την εμφάνιση της έντονης και
πλάγιας μορφοποίησης στο επιλεγμένο κείμενο.

https://rea.elke.uoa.gr/rea/lesson/FAF0D969-30E3-458A-856B-64BEC8D516C9/askisi1.html 7/11
23/2/22, 4:26 π.μ. Δημιουργία νέου εγγράφου HTML στο Dreamweaver

Εικόνα 6

14. Μεταβείτε στην ετικέτα (tag) του τίτλου και αλλάξτε τον τίτλο που εμφανίζεται στη γραμμή τίτλου του browser σε Exercise 1.

https://rea.elke.uoa.gr/rea/lesson/FAF0D969-30E3-458A-856B-64BEC8D516C9/askisi1.html 8/11
23/2/22, 4:26 π.μ. Δημιουργία νέου εγγράφου HTML στο Dreamweaver

Εικόνα 7

Δείτε πώς εμφανίζεται η δομή της σελίδας σας στο DOM panel που βρίσκεται στα δεξιά του παραθύρου εργασίας του Dreamweaver.

https://rea.elke.uoa.gr/rea/lesson/FAF0D969-30E3-458A-856B-64BEC8D516C9/askisi1.html 9/11
23/2/22, 4:26 π.μ. Δημιουργία νέου εγγράφου HTML στο Dreamweaver

Εικόνα 8

15. Επιλέξτε File save ώστε να αποθηκεύσετε το έγγραφο HTML που μόλις δημιουργήσατε στον τοπικό σας Η/Υ. Δώστε στο αρχείο το όνομα askisi1. Το Dreamweaver προσθέτει
αυτόματα, κατά την αποθήκευση, την κατάλληλη επέκταση (html).

16. Επιλέξτε File Real-time Preview (ή Preview in Browser σε προηγούμενη έκδοση ή F12) ώστε να κάνετε προεπισκόπηση της σελίδας στο επιθυμητό πρόγραμμα περιήγησης
(web browser).

https://rea.elke.uoa.gr/rea/lesson/FAF0D969-30E3-458A-856B-64BEC8D516C9/askisi1.html 10/11
23/2/22, 4:26 π.μ. Δημιουργία νέου εγγράφου HTML στο Dreamweaver
Εικόνα 9

Εικόνα 10

κλείσιμο

https://rea.elke.uoa.gr/rea/lesson/FAF0D969-30E3-458A-856B-64BEC8D516C9/askisi1.html 11/11