Κατά το σχεδιασμό ιστότοπων, συχνά πρέπει να λύσετε ένα θεμελιώδες ερώτημα: ποια θα είναι η συμπεριφορά της σελίδας όταν ανοίγει με διαφορετικές αναλύσεις οθόνης; Υπάρχουν δύο επιλογές εδώ - "καουτσούκ" (τεντώνοντας) σελίδες ιστότοπου ή στατικές. Θα συζητηθεί η πρώτη επιλογή. Όποια και αν είναι η προτίμησή σας για τη διάταξη, το βασικό δόγμα του τεντωμένου σχεδιασμού είναι η σχετική επεκτασιμότητα.
Είναι απαραίτητο
- - γνώση HTML
- - πρόγραμμα για επεξεργασία κώδικα HTML.
Οδηγίες
Βήμα 1
Επιλέξτε το κύριο αρχείο για το πρότυπο του ιστότοπού σας, το οποίο θα αντικατοπτρίζει την κύρια σήμανση. Μπορεί να είναι αρχείο index.html ή index.php. Ένα από τα καλύτερα λογισμικά επεξεργασίας προτύπων οπτικών ιστότοπων είναι το Macromedia Dreamweawer. Η απαραίτητη επεξεργασία θα γίνει βάσει αυτού του προγράμματος.
Ανοίξτε το αρχείο προτύπου ή δημιουργήστε ένα νέο με την εντολή "Αρχείο" - "Νέο", κατηγορία - "Βασική σελίδα" - "HTML" ή κατηγορία "Δυναμική σελίδα" - "PHP". Εδώ εξετάζουμε τη γενική περίπτωση όταν η δομή του ιστότοπου εγγράφεται σε ένα από τα δύο αρχεία.
Βήμα 2
Από καιρό δεν υπήρξε μυστικό ότι υπάρχουν διαφορετικοί τύποι διάταξης - σε πίνακες, σε div-blocks και σε συνδυασμό (πίνακες και μπλοκ ταυτόχρονα). Η ετικέτα html είναι υπεύθυνη για τη διάταξη του πίνακα
Καθορίστε ένα ποσοστό (100%) για κάθε ιδιοκτησία. Αυτό θα επιτύχει το αποτέλεσμα του αυτόματου τεντώματος κελιών τραπεζιού σε οθόνες με οποιαδήποτε γεωμετρία. Μπορεί να είναι οθόνη 19 ιντσών ή smartphone - καθένα από αυτά θα αναπαράγει σωστά το περιεχόμενο.
Βήμα 3
Εάν πρέπει να καθορίσετε ακριβώς την αντιστοιχία μεταξύ κελιών πίνακα, χρησιμοποιήστε το ακόλουθο παράδειγμα:
| … … το περιεχόμενο του κελιού 1. … | … … τα περιεχόμενα του κελιού 2. … |
Εδώ θα δείτε ότι ένα από τα κελιά καθορίζεται με πλάτος 30% ό, τι ορίζεται για τον ίδιο τον πίνακα. Ένας απλός υπολογισμός δείχνει ότι 100% -30% = 70% παραμένει για το δεύτερο κελί. Να θυμάστε ότι σε αυτήν την περίπτωση ένα από τα κελιά του πίνακα δεν πρέπει να έχει το χαρακτηριστικό πλάτος. Το πρόγραμμα περιήγησης θα κάνει όλους τους υπολογισμούς από μόνο του και θα τεντώσει σωστά τον πίνακα με κελιά. Το περιεχόμενο μέσα στους πίνακες θα τεντωθεί και θα συρρικνωθεί σωστά σε διαφορετικές οθόνες.
Βήμα 4
Σε μια κατάσταση με διάταξη div, τα μπλοκ ετικετών τεντώνονται από προεπιλογή στο πλήρες πλάτος της οθόνης και ακολουθούν το ένα μετά το άλλο από αριστερά προς τα δεξιά, από πάνω προς τα κάτω. Για να βελτιώσετε τη γεωμετρία τους, δημιουργήστε μια κλάση CCS ή ένα αναγνωριστικό (ID), στο οποίο καθορίζετε, για παράδειγμα, τα χαρακτηριστικά ή / και για την κατηγορία μεγέθους και θέσης του πλαισίου (Πλαίσιο). Μην ξεχάσετε να συνδέσετε το καθορισμένο στυλ με το αρχείο σήμανσης ιστότοπου και να συνδέσετε την κλάση (ID) στην επιθυμητή ετικέτα. Συνήθως τοποθετείται στην αρχή του σεναρίου, ορίζοντας όλη τη μελλοντική γεωμετρία του ιστότοπου:
… … περιεχόμενο ιστότοπου. …
Ή σαν αυτό:
… … περιεχόμενο ιστότοπου. …
Ο κωδικός για τον κανόνα CSS θα έχει ως εξής:
… η τάξη μου {
πλάτος: 30%;
ύψος: 50%;
}
#η ταυτότητά μου {
πλάτος: 30%;
ύψος: 50%;
}
