DreamWeaver Μέρος Γ: Διαχείριση Αρχείων -Mορφοποίηση κειμένου

Διαχείριση Αρχείων και Συνδέσμων

Κατά την ανάπτυξη του website σας, ενώ εισάγετε διάφορα αρχεία εικόνας, ήχου, αρχεία zip, κτλ, το Dreamweaver θα σας προτρέπει να τα αποθηκεύσει στον φάκελο που είχατε ορίσει ότι θα αποθηκεύονται τα αρχεία. Έστω ότι μεταξύ αυτών των αρχείων υπάρχει και μια εικόνα Χ η οποία εμφανίζεται όταν κάνετε κλικ σε ένα Link με όνομα «»η φωτογραφία μου». Αν τώρα εσείς μετακινήσετε ή μετονομάσετε την εικόνα Χ, τότε ενδέχεται να δημιουργηθεί πρόβλημα όταν θα κάνετε για παράδειγμα κλικ στο κείμενο «»η φωτογραφία μου» και αυτό γιατί πολύ απλά δεν θα υπάρχει η εικόνα Χ (με το όνομα το οποίο είχε αποθηκευθεί) προκειμένου να εμφανιστεί. Για να αποφύγετε τέτοιου είδους προβλήματα, καλό θα είναι απλές εργασίες όπως η μετονομασία, διαγραφή, μετακίνηση, αντιγραφή αρχείων και φακέλων να γίνεται μέσω του File Panel. Αν προβείτε σε κάποια από τις παραπάνω ενέργειες, το Dreamweaver θα σας προτρέψει να ανανεώσει τις αναφορές στα αρχεία που μετακινήθηκαν ή άλλαξαν. Για να μην δημιουργηθεί πρόβλημα, καλό είναι να επιλέγεται πάντα το Update.

Δομή του κειμένου

Όταν αναπτύσσετε το website σας, θέλετε το περιεχόμενό του να εμφανίζεται σωστά σε όλους τους φυλλομετρητές που ενδεχομένως να χρησιμοποιούν οι επισκέπτες σας. Για να συμβεί αυτό θα πρέπει να έχετε ορίσει την μορφοποίηση που θα έχουν όλα τα αντικείμενα, είτε αυτά είναι απλό κείμενο, είτε λίστες, είτε πίνακες, είτε εικόνες. Αν για παράδειγμα δεν ορίσετε την στοίχιση ενός κειμένου, ενδέχεται αυτό να εμφανίζεται διαφορετικά σε διαφορετικούς φυλλομετρητές, γεγονός το οποίο θα αδικούσε την προσπάθεια σας. Τα headings, οι παράγραφοι και οι λίστες βοηθούν στην εν γένει διαμόρφωση των σελίδων σας.

Εισαγωγή Headings – Παραγράφο

Επιλέξτε το κείμενο του οποίου το μέγεθος θέλετε να ορίσετε και στην συνέχεια από το Property Inspector, πατώντας Format θα εμφανιστεί ένα pop-up μενού από το οποίο μπορείτε να επιλέξτε το heading που θέλετε. Η εισαγωγή παραγράφων γίνεται με παρόμοιο τρόπο με την μόνη διαφορά ότι επιλέγετε Paragraph.

Λίστες
Η HTML υποστηρίζει δύο είδη λιστών, ταξινομημένες, όπου συνήθως χρησιμοποιούνται αριθμοί, και μη ταξινομημένες, που χρησιμοποιούνται βούλες (Bullets). Για να δημιουργήσετε λίστες, επιλέξτε το κείμενο το οποίο θέλετε να περιλαμβάνεται στην λίστα και πατήστε το αντίστοιχο κουμπί στην μπάρα του Property Inspector.

Άσκηση

Σε αυτήν την άσκηση θα εισάγετε κείμενο και θα δημιουργήσετε μια λίστα. Επιλέξτε για επεξεργασία την σελίδα index.html και γράψτε ένα κείμενο με κάποιο από τα πιθανά headings και δημιουργήστε και μια λίστα με bullets. Το αποτέλεσμα θα μπορούσε να είναι κάπως έτσι:

Επεξεργασία κειμένου

Έχοντας επιλέξει ένα κείμενο, μπορείτε να κάνετε πολλές λειτουργίες πάνω σ’αυτό.

Μπορείτε να:

Αλλάξετε την γραμματοσειρά του: 

Επιλέξτε κάποιον από τους έτοιμους συνδυασμούς γραμματοσειρών από τον Property Inspector ή από το Text > Font.

Αλλάξετε το στιλ και το μέγεθος της γραμματοσειράς: Από τον Property Inspector πάλι, επιλέξτε μεταξύ των Bold , Italic από τον Property Inspector, ή επιλέξτε από το μενού Text > Style. Το μέγεθος του κειμένου αλλάζει είτε μέσω του Property Inspector, είτε από το Text > Size ή Text > Size Change.
Αλλάξετε το χρώμα του κειμένου: Επιλέξτε ένα χρώμα από την Pop-up παλέτα που εμφανίζεται όταν πατήσετε το κουμπί , ή επιλέξτε Text > Color.

Δραστηριότητα

Σε αυτήν την δραστηριότητα θα εισάγουμε κείμενο σε μια σελίδα και θα το τροποποιήσουμε προκειμένου να δούμε τις βασικές αλλαγές που μπορούμε να του εφαρμόσουμε. Οι αλλαγές θα γίνουν στο αρχείο index.html.

Άσκηση

1. Εισάγετε κείμενο το οποίο θα λέει το εξής «Μια φορά και έναν καιρό, ήταν ένα κοριτσάκι, η κοκκινοσκουφίτσα που αγαπούσε πολύ την γιαγιά της η οποία ζούσεβαθιάάάά μέσα στο δάσος.»

2. Τροποποιήστε το παραπάνω κείμενο έτσι ώστε να είναι γραμμένο με font “Arial,Helvetica,Sans-Serif”, να είναι bold και η λέξη «κοκκινοσκουφίτσα» να εμφανίζεται με κόκκινο χρώμα.

3. Εισάγετε επίσης το κείμενο «Ο κακός λύκος όμως ήθελε να φάει και την γιαγιά αλλά και την κοκκινοσκουφίτσα !» ορίζοντας ταυτόχρονα να είναι γραμμένο πλάγια, με μέγεθος γραμματοσειράς 24 και με χρώμα μπλε.

4. Το τελικό αποτέλεσμα θα είναι κάπως έτσι :