Πώς να προσθέσετε στοιχεία ρευστών σε μια διάταξη στο Dreamweaver - ανδρείκελα

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

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

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

1. Επιλέξτε Insert → Structure → Navigation.

   Εναλλακτικά, μπορείτε να κάνετε κλικ στην επιλογή Πλοήγηση στον πίνακα "Δομή εισόδου".

2. Επιλέξτε το πλαίσιο ελέγχου Εισαγωγή ως στοιχείο υγρού στο παράθυρο διαλόγου "Εισαγωγή".

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

   

3. Στο παράθυρο διαλόγου "Εισαγωγή", επιλέξτε εάν θέλετε να χρησιμοποιήσετε τον επιλογέα κλάσης ή αναγνωριστικού για να δημιουργήσετε ένα νέο στυλ για την ετικέτα που εισάγετε και, στη συνέχεια, εισαγάγετε ένα όνομα για το νέο στυλ.

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

   Τα ονόματα στυλ κλάσης πρέπει να ξεκινούν με ένα τελεία (.) Και τα ονόματα στυλ ID πρέπει να ξεκινούν με το σύμβολο λίρας (#).

4. Κάντε κλικ στο κουμπί OK.

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

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

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

6. Επιλέξτε Εισαγωγή → Δομή → Άρθρο.

   Το παράθυρο διαλόγου Εισαγωγή άρθρου ανοίγει (παρόμοιο με το πλαίσιο διαλόγου Εισαγωγή κεφαλίδας).

7. Επιλέξτε το πλαίσιο ελέγχου Εισαγωγή ως στοιχείο υγρού στο παράθυρο διαλόγου "Εισαγωγή".

8. Στο πλαίσιο διαλόγου "Εισαγωγή", επιλέξτε εάν θέλετε να χρησιμοποιήσετε τον επιλογέα κλάσης ή αναγνωριστικού για να δημιουργήσετε ένα νέο στυλ για την ετικέτα που εισάγετε και να εισαγάγετε ένα όνομα για το νέο στυλ.

9. Κάντε κλικ στο κουμπί OK.

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

10. Προσθέστε όσα στοιχεία επιθυμείτε για τη διάταξη σας επαναλαμβάνοντας τα βήματα 6-9.

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

    Σημειώστε ότι στον κώδικα, το Dreamweaver προσθέτει το πρόθεμα fluid- στο όνομα κάθε στυλ που δημιουργείτε για τις διατάξεις του πλέγματος υγρών.