Πώς να ευθυγραμμίζετε τα στοιχεία με τους πλωτήρες στο Dreamweaver

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

πίστωση: Εικόνα από το istockphoto. com

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

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

Οι διατάξεις CSS που περιλαμβάνονται στο Dreamweaver CC έχουν ήδη στυλ επιπλεύσεων που μπορείτε να χρησιμοποιήσετε για την ευθυγράμμιση στοιχείων προς τα δεξιά και προς τα αριστερά. Αυτά τα στυλ τάξεων ονομάζονται. fltlft (για, το μαντέψατε, πλωτήρας αριστερά) και. fltrt (για το δικαίωμα πλωτήρα).

Για να δημιουργήσετε δύο στυλ τάξης που μπορείτε να χρησιμοποιήσετε για να ευθυγραμμίσετε εικόνες και άλλα στοιχεία στα αριστερά και δεξιά μιας σελίδας, ακολουθήστε τα εξής βήματα:

Κάντε κλικ στο σύμβολο συν στον πίνακα επιλογής σχεδιαστή CSS.

1. Ανάλογα με αυτό που υπάρχει στη σελίδα, ένα νέο όνομα στυλ ή ένα κενό πεδίο όπου μπορείτε να εισάγετε ένα όνομα στυλ προστίθεται στον πίνακα επιλογών.

   Κάντε διπλό κλικ για να επιλέξετε το όνομα που έχει προσθέσει το Dreamweaver στον πίνακα και να το αλλάξετε στο όνομα που θέλετε για το νέο σας στυλ ή κάντε κλικ για να επιλέξετε το κενό πεδίο και να εισάγετε ένα όνομα.

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

   Κάντε διπλό κλικ στο νέο όνομα και επεξεργαστείτε το όπως θέλετε.

3. Αν και μπορείτε να ονομάσετε αυτά τα στυλ ό, τι προτιμάτε, τα στυλ ευθυγράμμισης συνήθως ονομάζονται με τα συντομογραφημένα fltrt και fltlft, τα οποία στέκονται για το float δεξιά και το πλωτήρα αριστερά αντίστοιχα.

   Για παράδειγμα, εάν δημιουργήσετε ένα στυλ για να ευθυγραμμίσετε τα στοιχεία στα αριστερά, θα το ονομάσετε. fltlft.

   Στον πίνακα "Ιδιότητες", κάντε κλικ στο εικονίδιο που ορίζει το στοιχείο "Πλωτή προς αριστερά".

4. Χρησιμοποιήστε τις ρυθμίσεις περιθωρίου στον πίνακα Ιδιότητες για να δημιουργήσετε περιθώριο γύρω από το στοιχείο που έχει επιπλεύσει.

   

5. Είναι καλή πρακτική να προσθέσετε χώρο περιθωρίου στην αντίθετη πλευρά από τη ρύθμιση float. Αν δημιουργείτε στυλ για να μετακινήσετε μια εικόνα προς τα αριστερά, προσθέστε 5 ή 10 εικονοστοιχεία χώρου στο δεξιό πεδίο περιθωρίου.Όταν ευθυγραμμίζετε μια εικόνα στην αριστερή πλευρά της σελίδας, δημιουργείται ένα περιθώριο ανάμεσα στην εικόνα και σε οποιοδήποτε άλλο στοιχείο που τυλίγεται δίπλα στην εικόνα.

   Επιλέξτε την εικόνα ή άλλο στοιχείο που θέλετε να ευθυγραμμίσετε στη σελίδα.

6. Επιλέξτε το όνομα του στυλ που δημιουργήσατε από το αναπτυσσόμενο μενού Class στο Property inspector.

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

   Επαναλάβετε τα βήματα 1-7, μία φορά με το πλέγμα ρυθμισμένο στο Δεξιά και 5 έως 10 εικονοστοιχεία του περιθωρίου περιθωρίου στο αριστερό πεδίο περιθωρίου στην κατηγορία Κιβώτιο και πάλι με το Ρυθμιστικό Ρύθμισης σε Αριστερά και 5 έως 10 εικονοστοιχεία χώρου περιθωρίου στο δεξιό πεδίο περιθωρίου στην κατηγορία Κιβώτιο.