Πώς να σχεδιάσετε μια απλή ιστοσελίδα στο Div: 4 βήματα (με εικόνες)

Πίνακας περιεχομένων:

Πώς να σχεδιάσετε μια απλή ιστοσελίδα στο Div: 4 βήματα (με εικόνες)
Πώς να σχεδιάσετε μια απλή ιστοσελίδα στο Div: 4 βήματα (με εικόνες)

Βίντεο: Πώς να σχεδιάσετε μια απλή ιστοσελίδα στο Div: 4 βήματα (με εικόνες)

Βίντεο: Πώς να σχεδιάσετε μια απλή ιστοσελίδα στο Div: 4 βήματα (με εικόνες)
Βίντεο: Χάκαρε το INSTAGRAM με αυτά τα εύκολα tricks // iPhone και Android 2024, Απρίλιος
Anonim

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

Βήματα

Βήμα 1. Γνωρίστε ότι η ετικέτα 'div' χρησιμοποιείται βασικά για τη δημιουργία ξεχωριστών περιοχών ή τμημάτων της σελίδας του ιστότοπου

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

Βήμα 2. Δημιουργία φύλλου στυλ - Οι ετικέτες "Div" χρησιμοποιούν φύλλα στυλ που επιτρέπουν στον σχεδιασμό ιστοσελίδων του ιστότοπου να είναι ανεξάρτητος από δεδομένα

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

  • Μπορείτε να δημιουργήσετε φύλλο στυλ ως άλλο έγγραφο και στη συνέχεια να το συνδέσετε. Ανοίξτε ένα νέο έγγραφο σημειωματάριου, γράψτε τον κωδικό σας και αποθηκεύστε το στην επέκταση ".css".
  • Οι ιδιότητες CSS που είναι πολύ χρήσιμες είναι "χρώμα φόντου", "ύψος", "πλάτος", "float" και "clear".

Βήμα 3. Συνδέστε το φύλλο στυλ - Μπορείτε να συνδέσετε το φύλλο στυλ χρησιμοποιώντας την ετικέτα συνδέσμου

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

Σχεδιάστε μια απλή ιστοσελίδα στο Div Βήμα 1
Σχεδιάστε μια απλή ιστοσελίδα στο Div Βήμα 1
Σχεδιάστε μια απλή ιστοσελίδα στο Div Βήμα 2
Σχεδιάστε μια απλή ιστοσελίδα στο Div Βήμα 2
Σχεδιάστε μια απλή ιστοσελίδα στο Div Βήμα 3
Σχεδιάστε μια απλή ιστοσελίδα στο Div Βήμα 3

Βήμα 1. Κατανοήστε τα οφέλη από τη χρήση ετικετών div ή χωρίς πίνακα:

  • Η φόρτωση των ιστότοπων γίνεται γρηγορότερη. Ιστότοποι που βασίζονται σε ετικέτες «div» καθιστούν τα προγράμματα περιήγησης να λειτουργούν πολύ πιο γρήγορα καθώς διατίθενται σε πολύ μικρό βάρος. Το 'Div' ελέγχεται μέσω Cascading φύλλα στυλ και ως εκ τούτου, χρειάζεται λιγότερη κωδικοποίηση που βοηθά στη διατήρηση του μεγέθους του αρχείου στο ελάχιστο.
  • Το 'Div' είναι φιλικό για όλες τις μηχανές αναζήτησης - Οι ιστότοποι που βασίζονται σε CSS είναι φιλικοί προς τη βελτιστοποίηση των μηχανών αναζήτησης, καθώς επιτρέπουν στον σχεδιαστή ιστοσελίδων να διατηρεί τα κύρια άρθρα στην κορυφή επιτρέποντας στις μηχανές αναζήτησης να βρίσκουν πιο εύκολα το κύριο περιεχόμενο.
  • Ένας ιστότοπος που βασίζεται σε ετικέτα «div» εξοικονομεί εύρος ζώνης. Ένας ιστότοπος χωρίς τραπέζι έχει μικρότερο μέγεθος αρχείου, πράγμα που σημαίνει ότι εξοικονομεί το εύρος ζώνης σας. Εάν έχετε έναν τεράστιο ιστότοπο επισκεψιμότητας, όπου κάθε σελίδα περιηγείται από τους επισκέπτες του ιστότοπου, θα εξοικονομήσετε στο μέγεθος του εύρους ζώνης χωρίς να έχετε πίνακες. Αυτό το αποθηκευμένο ποσό εύρους ζώνης θα μπορούσε να είναι χρήσιμο για μια χρονική περίοδο ή στο τέλος του μήνα.
  • Cleaner Code - Οι ιστότοποι που χρησιμοποιούν ετικέτες «div» και CSS δημιουργούν καθαρότερο κώδικα. Αυτός ο καθαρότερος κώδικας επιτρέπει στα προγράμματα ανίχνευσης των μηχανών αναζήτησης να διαβάζουν το πραγματικό περιεχόμενο.

Συνιστάται: