Scribd Logo
Upload

Welcome to Scribd!

  • Άσκηση 1: Δημιουργία νέου εγγράφου HTML στο Dreamweaver

    Uploaded by

    AlexandrosAristeridis
    4 views6 pages

    Original Title

    541D2378-23D8-436D-AB4B-103D9DCF809E

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views6 pages

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

    Uploaded by

    AlexandrosAristeridis

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    Άσκηση 1: Δημιουργία νέου εγγράφου 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.

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

    Ένα νέο παράθυρο εγγράφου ανοίγει στο Dreamweaver. Το έγγραφο μπορεί


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

    Εικόνα 2

    7. Κάντε κλικ στο κουμπί Split ώστε να μεταβείτε στη διαιρεμένη προβολή,
    δηλαδή στην προβολή όπου εμφανίζεται και ο κώδικας αλλά και η
    σχεδίαση, δηλαδή η εμφάνιση της ιστοσελίδας.
    8. Στην προβολή κώδικα, εισάγετε το δρομέα μετά την ετικέτα ανοίγματος
    του κυρίως σώματος της σελίδας <body> και πληκτρολογήστε τη
    φράση «Άσκηση 1».
    9. Μετακινήστε το δείκτη στην αρχή του κειμένου και ξεκινήστε να
    πληκτρολογείτε <h για να ανοίξετε το χαρακτηριστικό υπόδειξης
    κώδικα. Θα διαπιστώσετε, ότι το Dreamweaver ανοίξει αυτόματα μια
    αναπτυσσόμενη λίστα με συμβατά στοιχεία κώδικα (βλέπε Εικόνα 3).
    10. Κάντε κλικ στο στοιχείο h1 από τη λίστα, ώστε να το εισάγετε στον
    κώδικα. Πληκτρολογήστε > για να κλείσετε την ετικέτα. Θα
    διαπιστώσετε ότι το Dreamweaver κλείνει αυτόματα την ετικέτα
    κεφαλίδας που μόλις δημιουργήσατε </h1>. Στην περίπτωση που το
    κείμενο είναι εκτός της ετικέτας <h1> να το εισάγετε μέσα στην ετικέτα
    της κεφαλίδας.
    11. Πατήστε Enter/Return για να εισάγετε αλλαγή γραμμής.
    12. Δημιουργήστε μία νέα παράγραφο εισάγοντας την ετικέτα <p>.
    Πληκτρολογήστε τη φράση «Welcome to my first Dreamweaver
    page».

    Εικόνα 3

    Εικόνα 4

    13. Στην προβολή σχεδίασης θα διαπιστώσετε ότι στη νέα παράγραφο


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

    Εικόνα 5

    Θα διαπιστώσετε ότι στην προβολή Code το Dreamweaver έχει αυτόματα


    εισάγει τις ετικέτες <strong> και <em>. Αυτές οι ετικέτες παράγουν την
    εμφάνιση της έντονης και πλάγιας μορφοποίησης στο επιλεγμένο κείμενο.

    Εικόνα 6

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

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

    Εικόνα 8

    15. Επιλέξτε File > save ώστε να αποθηκεύσετε το έγγραφο HTML που
    μόλις δημιουργήσατε στον τοπικό σας Η/Υ. Δώστε στο αρχείο το όνομα
    askisi1. Το Dreamweaver προσθέτει αυτόματα, κατά την αποθήκευση,
    την κατάλληλη επέκταση (html).
    16. Επιλέξτε File > Real-time Preview (ή Preview in Browser σε
    προηγούμενη έκδοση ή F12) ώστε να κάνετε προεπισκόπηση της
    σελίδας στο επιθυμητό πρόγραμμα περιήγησης (web browser).
    Εικόνα 9

    Εικόνα 10

    You might also like