Πώς να προσθέσετε και να μορφοποιήσετε κείμενο στο Dreamweaver

Πολλοί άνθρωποι εκπλήσσονται ευχάριστα από το πόσο εύκολα μπορούν να δημιουργήσουν μια βασική ιστοσελίδα με κείμενο και εικόνες στο Dreamweaver. Μπορείτε να κάνετε βασική μορφοποίηση κειμένου χρησιμοποιώντας τις επιλογές μορφοποίησης HTML του Dreamweaver, συμπεριλαμβανομένων των ετικετών επικεφαλίδας και παραγράφου. Ξεκινήστε με αυτές τις βασικές ετικέτες HTML για να κρατήσετε τα πράγματα απλά στην αρχή.

Πώς να προσθέσετε κείμενο σε μια ιστοσελίδα στο Dreamweaver

Για να προσθέσετε κείμενο σε μια σελίδα, μπορείτε απλώς να κάνετε κλικ για να εισαγάγετε τον κέρσορα στην κορυφή μιας σελίδας και να πληκτρολογήσετε. Εάν θέλετε να προσθέσετε κείμενο που έχετε κάπου αλλού, όπως σε ένα αρχείο που δημιουργήθηκε στο Microsoft Word, μπορείτε να αντιγράψετε και να επικολλήσετε το κείμενο στο Dreamweaver αντί να το πληκτρολογήσετε ξανά.

Το Dreamweaver προσφέρει πολλούς τρόπους διατήρησης της μορφοποίησης όταν αντιγράφετε και επικολλάτε κείμενο από άλλο πρόγραμμα. Αυτή η δυνατότητα είναι ιδιαίτερα σημαντική όταν αντιγράφετε κείμενο από το Microsoft Word, διότι εάν απλώς επικολλήσετε κείμενο ως έχει, κινδυνεύετε να συμπεριλάβετε πολύ επιπλέον κώδικα που είναι μοναδικός για το Microsoft Word και μπορεί να προκαλέσει προβλήματα στην ιστοσελίδα σας.

Μπορείτε να αλλάξετε την προεπιλογή για τον τρόπο με τον οποίο το Dreamweaver χειρίζεται τη μορφοποίηση όταν επιλέγετε Επεξεργασία→ Επικόλληση, αλλάζοντας τις Προτιμήσεις στην κατηγορία Αντιγραφή/Επικόλληση. Μπορείτε επίσης να επιλέξετε Επεξεργασία→ Ειδική επικόλληση για να εμφανίζονται αυτές οι επιλογές κάθε φορά που επικολλάτε νέο περιεχόμενο.

Ακολουθούν οι τέσσερις κύριες επιλογές σας για την εισαγωγή κειμένου όταν επιλέγετε Επεξεργασία→ Ειδική επικόλληση καθώς και τρεις τρόποι για να κάνετε πιο συγκεκριμένη την επιλογή σας:

• Μόνο κείμενο: Το Dreamweaver αφαιρεί οποιαδήποτε μορφοποίηση και εισάγει απλό κείμενο.

• Κείμενο με δομή: Το Dreamweaver περιλαμβάνει παραγράφους, λίστες, πίνακες και άλλες επιλογές δομικής μορφοποίησης.

• Κείμενο με βασική μορφοποίηση Structure Plus: Το Dreamweaver περιλαμβάνει δομική μορφοποίηση καθώς και βασική μορφοποίηση, όπως έντονη και πλάγια γραφή.

• Κείμενο με πλήρη μορφοποίηση Structure Plus: Εκτός από τις προηγούμενες επιλογές, το Dreamweaver περιλαμβάνει μορφοποίηση που δημιουργείται από φύλλα στυλ σε προγράμματα όπως το Microsoft Word.

• Διατήρηση αλλαγών γραμμής: Οι αλλαγές γραμμής διατηρούνται, ακόμα κι αν δεν διατηρείτε άλλες επιλογές μορφοποίησης. Αυτή η επιλογή δεν είναι διαθέσιμη εάν επιλέξετε Μόνο κείμενο.

• Εκκαθάριση διαστήματος παραγράφων του Word: Αυτή η επιλογή καταργεί τον ειδικό κώδικα μορφοποίησης που είναι μοναδικός για το Microsoft Word και δεν είναι απαραίτητος (και δεν συνιστάται) για κείμενο στον Ιστό.

• Μετατροπή έξυπνων εισαγωγικών σε ευθεία εισαγωγικά: Τα έξυπνα εισαγωγικά — η κοινή ονομασία για εκείνα τα φανταχτερά σγουρά εισαγωγικά που οι σχεδιαστές λατρεύουν να χρησιμοποιούν σε έντυπα έγγραφα — απαιτούν έναν ειδικό χαρακτήρα για να εμφανίζεται σωστά στον Ιστό και αυτός ο ειδικός χαρακτήρας δεν λειτουργεί σε όλα τα προγράμματα περιήγησης ιστού . Για να αποφύγετε αυτό το πιθανό πρόβλημα, επιλέξτε αυτό το πλαίσιο και μετατρέψτε όλα τα έξυπνα εισαγωγικά σας σε ευθύ.

Πώς να μορφοποιήσετε κείμενο με τις ετικέτες επικεφαλίδας στο Dreamweaver

Μία από τις καλύτερες επιλογές μορφοποίησης για επικεφαλίδες είναι η συλλογή ετικετών επικεφαλίδων. Σε HTML, χρησιμοποιώντας ετικέτες επικεφαλίδας (

,

, και ούτω καθεξής) η μορφοποίηση κειμένου που χρησιμεύει ως τίτλος ή επικεφαλίδα προσφέρει πολλά πλεονεκτήματα. Οι ετικέτες επικεφαλίδων έχουν σχεδιαστεί για να εμφανίζονται σε σχετικά μεγέθη, με

το μεγαλύτερο,

μικρότερος,

μικρότερο ακόμα, και ούτω καθεξής

.

Επομένως, ανεξάρτητα από το προεπιλεγμένο μέγεθος κειμένου μιας ιστοσελίδας (και τα μεγέθη κειμένου μπορεί να διαφέρουν λόγω των ρυθμίσεων του προγράμματος περιήγησης και της πλατφόρμας υπολογιστή), οποιοδήποτε κείμενο έχει μορφοποιηθεί με

Η ετικέτα είναι πάντα μεγαλύτερη από το κείμενο που έχει μορφοποιηθεί

.

Η δημοφιλής πεποίθηση είναι ότι πολλές μηχανές αναζήτησης δίνουν προτεραιότητα σε λέξεις-κλειδιά σε κείμενο μορφοποιημένο με ένα

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

ετικέτα μόνο μία φορά ανά σελίδα.

Για να μορφοποιήσετε κείμενο με ετικέτα επικεφαλίδας, ακολουθήστε τα εξής βήματα:

Επισημάνετε το κείμενο που θέλετε να μορφοποιήσετε.

Στο Property inspector, στο κάτω μέρος του χώρου εργασίας, βεβαιωθείτε ότι είναι επιλεγμένο το κουμπί HTML στην αριστερή πλευρά του inspector.

Χρησιμοποιήστε την αναπτυσσόμενη λίστα Μορφή για να ορίσετε μια επιλογή επικεφαλίδας.

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

Credit: Φωτογραφία από την Casey Stoll

Γενικά, το Property inspector είναι ο ευκολότερος τρόπος εφαρμογής βασικής μορφοποίησης, αλλά μπορείτε να βρείτε αυτές τις επιλογές μορφοποίησης HTML επιλέγοντας Μορφή→ Μορφή παραγράφου και, στη συνέχεια, επιλέγοντας μια επιλογή επικεφαλίδας από το υπομενού που εμφανίζεται.

Πώς να προσθέσετε παραγράφους και αλλαγές γραμμής στο Dreamweaver

Όταν δημιουργείτε σχέδια σελίδων για τον ιστό, πρέπει να εργάζεστε με πολλούς περιορισμούς που μπορεί να φαίνονται μπερδεμένοι στην αρχή. Η σχεδίαση ιστοσελίδων και η σχεδίαση εκτύπωσης διαφέρουν θεμελιωδώς και αυτό μπορεί να κάνει ακόμη και φαινομενικά απλές εργασίες πιο περίπλοκες από ό,τι θα περίμενε κανείς. Ο τρόπος με τον οποίο δημιουργείτε αλλαγές παραγράφων και γραμμών είναι ένα καλό παράδειγμα.

Εάν εργάζεστε σε προβολή σχεδίασης στο Dreamweaver και πατάτε το πλήκτρο Enter (Windows) ή το πλήκτρο Return (Mac), το Dreamweaver εισάγει μια ετικέτα παραγράφου ή

, στον κώδικα, ο οποίος δημιουργεί μια αλλαγή γραμμής ακολουθούμενη από μια κενή γραμμή.

Εάν θέλετε μια αλλαγή γραμμής χωρίς την επιπλέον κενή γραμμή, κρατήστε πατημένο το πλήκτρο Shift ενώ πατάτε Enter (ή Return) για να πείτε στο Dreamweaver να εισαγάγει την
ετικέτα στον κώδικα, δημιουργώντας μια αλλαγή γραμμής.

Η βέλτιστη πρακτική είναι να αποφύγετε τη χρήση πολλαπλών ετικετών παραγράφων ή διαλείμματος για τη δημιουργία επιπλέον χώρου σε μια ιστοσελίδα (και δεν θα διατηρήσουν όλα τα προγράμματα περιήγησης τον κενό χώρο, εάν τη δημιουργήσετε με αυτόν τον τρόπο). Εάν θέλετε να προσθέσετε πολύ χώρο μεταξύ παραγράφων ή άλλων στοιχείων σε μια σελίδα, η καλύτερη επιλογή σας είναι να χρησιμοποιήσετε CSS.

Εάν εργάζεστε σε προβολή κώδικα και προσθέτετε χώρο χρησιμοποιώντας το κλειδί Enter ή Return, προσθέτετε κενό χώρο στον κώδικα. Ο επιπλέον χώρος στον κώδικα HTML μπορεί να είναι χρήσιμος, επειδή ο επιπλέον χώρος μπορεί να διευκολύνει την ανάγνωση του κώδικα, αλλά γενικά, δεν επηρεάζει τον τρόπο εμφάνισης μιας σελίδας σε προβολή σχεδίασης ή σε πρόγραμμα περιήγησης ιστού.