Πώς να δημιουργήσετε μια διάταξη στήλης υγρού σε μια στήλη στο Dreamweaver - ανδρείκελα

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

1. Επιλέξτε Αρχείο → Νέα.

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

2. Από την αριστερή πλευρά της οθόνης, επιλέξτε Layout Grid Layout.

   Οι επιλογές παραθύρου Νέου εγγράφου αλλάζουν στις επιλογές πλέγματος υγρών.

   

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

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

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

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

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

   Από προεπιλογή, το Dreamweaver ορίζει κάθε περιθώριο για να καλύψει το 25% του διαθέσιμου χώρου.

6. Χρησιμοποιήστε την αναπτυσσόμενη λίστα για να καθορίσετε ένα doctype.

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

7. Κάντε κλικ στην επιλογή Δημιουργία.

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

8. Καταχωρίστε ένα όνομα για το αρχείο CSS και κάντε κλικ στην επιλογή Αποθήκευση.

   Ένα νέο αρχείο HTML ανοίγει στον χώρο εργασίας του Dreamweaver, αλλά δεν έχει ακόμα αποθηκευτεί. Το αρχείο CSS που ονομάσατε αποθηκεύεται και το όνομά του γίνεται ορατό στον πίνακα Αρχεία.

   Σημείωση: Σε αντίθεση με τη διαδικασία δημιουργίας άλλων τύπων σελίδων στο Dreamweaver, το αρχείο CSS αποθηκεύεται πρώτα και το αρχείο HTML αποθηκεύεται σε ένα μεταγενέστερο βήμα.

9. Επιλέξτε Αρχείο → Αποθήκευση

   Το παράθυρο διαλόγου Αποθήκευση ως ανοίγει.

10. Καταχωρίστε ένα όνομα για το αρχείο HTML και κάντε κλικ στο OK.

    Το παράθυρο διαλόγου Αποθήκευση ως κλείνει και εμφανίζεται μια ειδοποίηση στο Dreamweaver που σας ενημερώνει ότι η διάταξη του πλέγματος υγρού σας απαιτεί δύο επιπλέον αρχεία: boilerplate. css και απαντήστε. min. js.

11. Κάντε κλικ στο OK για να αντιγράψετε την πλάκα.css και απαντήστε. min. js στο φάκελο του ιστότοπού σας.

    Και τα τρία αρχεία προστίθενται στον πίνακα Αρχεία και επιστρέφετε στο αρχείο HTML που έχετε ονομάσει πρόσφατα στον χώρο εργασίας του Dreamweaver.

    

12. Δώστε στη σελίδα έναν τίτλο εισάγοντας κείμενο στο πεδίο Title (Τίτλος) στο επάνω μέρος του χώρου εργασίας.

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