Φωλιάσματος ιστοσελίδα: πώς να κάνει την εικόνα φόντου html

Πολλοί αρχάριος σχεδιαστές ιστοσελίδων, μόνο για να σκαλίζω την ουσία της δημιουργίας χώρων, συχνά αναρωτιούνται πώς να το κάνουμε html εικόνα φόντου. Και αν κάποια από αυτά μπορεί να ασχοληθεί με αυτό το πρόβλημα, εξακολουθεί να είναι ένα πρόβλημα κατά τη στιγμή της εκτείνεται σε όλο το πλάτος της εικόνας στην οθόνη. Ταυτόχρονα, θα ήθελα να δείτε την ιστοσελίδα εμφανίζονται με τον ίδιο τρόπο σε όλα τα προγράμματα περιήγησης, γι 'αυτό θα πρέπει να πληρούν τις απαιτήσεις του cross-browser. Μπορείτε να ρυθμίσετε το φόντο με δύο τρόπους: με τη χρήση ετικετών HTML και CSS στυλ. Κάθε ίδιος επιλέγει την καλύτερη επιλογή. Φυσικά, το στυλ CSS είναι πολύ πιο βολικό, επειδή ο κώδικας του αποθηκεύεται σε ένα ξεχωριστό αρχείο και δεν καταλαμβάνουν επιπλέον ηχεία σε ετικέτες του κύριου τόπου, αλλά πρώτα ας εξετάσουμε μια απλή μέθοδος για την εγκατάσταση της εικόνας στο φόντο της ιστοσελίδας.

Βασικές ετικέτες HTML για να δημιουργήσει το υπόβαθρο

Έτσι, πάμε στο ζήτημα του πώς να κάνει την εικόνα φόντου στην html στην οθόνη. Για να φαίνονται όμορφα ιστοσελίδα, θα πρέπει να κατανοήσουν ένα αρκετά σημαντική λεπτομέρεια: είναι μόλις αρκετή για να κάνει μια κλίση φόντο ή το χρώμα του ένα στερεό χρώμα, αλλά αν θα πρέπει να εισάγετε την εικόνα φόντου, δεν θα τεντώσει όλο το πλάτος της οθόνης. Η εικόνα ήταν αρχικά απαραίτητο να πάρει ή να φτιάξετε το δικό σας σχέδιο με αυτήν την επέκταση, με την οποία θα εμφανιστούν σελίδα του site. Μόνο όταν η εικόνα φόντου είναι έτοιμο, μεταφέρετέ το σε ένα φάκελο με το όνομα «Εικόνες». Σε αυτό, εμείς θα αποθηκεύσει όλες οι χρησιμοποιούμενες εικόνες, κινούμενες εικόνες και άλλα αρχεία γραφικών. Αυτός ο φάκελος θα πρέπει να βρίσκεται στον ριζικό κατάλογο με όλα τα αρχεία HTML σας. Τώρα μπορείτε να κινηθείτε και στον κώδικα. Υπάρχουν αρκετές επιλογές για την συγγραφή κώδικα, με τον οποίο το φόντο θα αλλάξει την εικόνα.

1. Γράψτε χαρακτηριστικό tag.
2. Μέσα από το στυλ CSS στον κώδικα HTML.
3. Γράψτε στυλ CSS σε ένα ξεχωριστό αρχείο.

Όπως και στην HTML για να κάνει την εικόνα φόντου, εσείς αποφασίζετε, αλλά θα ήθελα να πω λίγα λόγια για το πώς θα ήταν η βέλτιστη. Η πρώτη μέθοδος είναι με το γράψιμο μέσω ενός χαρακτηριστικού tag έχει από καιρό παρωχημένες. Η δεύτερη επιλογή χρησιμοποιείται πολύ σπάνια, γιατί αποδεικνύεται ότι πολλά από τον ίδιο κώδικα. Μια τρίτη επιλογή είναι η πιο κοινή και αποτελεσματική. Εδώ είναι τα παραδείγματα των ετικετών HTML:

1. Η πρώτη μέθοδος καταγραφής μέσω χαρακτηριστικό ετικέτας (σώμα) σε αρχείο index.htm. Αποθηκεύεται σε αυτή τη μορφή: (φόντο σώματος = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ σώμα). Δηλαδή, αν έχουμε μια εικόνα με τον τίτλο «Εικόνα» και την επέκταση JPG, και το φάκελο που ονομάζεται «Εικόνες», τότε η είσοδος σε HTML κώδικας θα είναι κάπως έτσι: (φόντο σώματος = «Images / picture.jpg») ... (/ σώματος) .
2. Η δεύτερη μέθοδος περιλαμβάνει την εγγραφή ενός στυλ CSS, αλλά είναι γραμμένο στο ίδιο αρχείο με το όνομα index.htm. (Body style = "υπόβαθρο: url ( '../ Εικόνες / εικόνα.jpg')").
3. Η τρίτη μέθοδος καταγραφής γίνεται σε δύο αρχεία. Το έγγραφο με την ετικέτα όνομα index.htm (κεφάλι) γράφεται μια τέτοια γραμμή: (κεφάλι) (link rel = Τύπος "στυλ" = "text / css" href = «http: // ιστοσελίδα / άρθρο / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu «) (/ κεφαλή). Ένα αρχείο που ονομάζεται στυλ style.css ήδη γράψει: body {υπόβαθρο: url (Εικόνες / εικόνα.jpg «)}.

Όπως και στην HTML για να κάνει την εικόνα φόντου, καταλαβαίνουμε. Τώρα θα πρέπει να καταλάβω πώς να τεντώσει την εικόνα σε όλο το πλάτος ολόκληρης της οθόνης.

Τρόποι για να τεντώσει την εικόνα φόντου στο πλάτος του παραθύρου

Εκπροσωπούμε την οθόνη μας με τη μορφή ποσοστού. Αποδεικνύεται ότι η όλο το πλάτος και το μήκος της οθόνης θα είναι 100% × 100%. Πρέπει να τεντώσει την εικόνα σε αυτό το εύρος. Προστίθενται στη γραμμή style.css εγγραφής αρχείου εικόνας που θα τεντώσει την εικόνα σε όλο το πλάτος και το μήκος της οθόνης. Όπως είναι γραμμένο στο στυλ CSS; Είναι απλό!

σώμα

{

φόντο: url (Εικόνες / εικόνα.jpg «)

φόντο-size: 100%? / * Αυτή η θέση είναι κατάλληλη για τα περισσότερα σύγχρονα προγράμματα περιήγησης * /

}

Γι 'αυτό και βρει τον τρόπο να κάνει μια εικόνα φόντου σε html στην οθόνη. Υπάρχει επίσης μια μέθοδο καταγραφής στο αρχείο index.htm. Αν και αυτή η μέθοδος και ξεπερασμένη, αλλά για τους αρχαρίους είναι απαραίτητο να γνωρίζουν και να κατανοούν. Η ετικέτα (κεφαλή) (στυλ) div {background-size: κάλυψη? } (/ Style) (/ κεφαλή), αυτός ο δίσκος σημαίνει ότι διαθέτουμε μια ειδική μονάδα για το φόντο, το οποίο θα τοποθετηθεί σε ολόκληρο το πλάτος του παραθύρου. Έχουμε εξετάσει δύο τρόπους, πώς να κάνει μια ιστοσελίδα html εικόνα φόντου, έτσι ώστε η εικόνα είναι παραμορφωμένη σε όλο το πλάτος της οθόνης σε οποιοδήποτε από τα σύγχρονα προγράμματα περιήγησης.

Πώς να κάνει ένα σταθερό υπόβαθρο

Αν αποφασίσετε να χρησιμοποιήσετε μια εικόνα ως φόντο για το μέλλον των πόρων Ιστού, τότε το μόνο που χρειάζεται να γνωρίζουν πώς να κάνουν σταθερά, έτσι ώστε να μην είναι τεντωμένο σε μήκος και δεν χαλάσει την αισθητική εμφάνιση. Απλά με τη χρήση κώδικα HTML για να καταχωρήσετε μια μικρή προσθήκη. Θα πρέπει να καταθέσει style.css να προσθέσετε μια φράση μετά το υπόβαθρο: url (Εικόνες / εικόνα.jpg «) σταθερό? ή αντί προστίθεται μετά την τελεία χωριστή γραμμή - θέση: σταθερό. Έτσι, θα καθοριστεί ταπετσαρία σας. Κατά τη διάρκεια της κύλισης του περιεχομένου στο site, θα δείτε ότι το κείμενο γραμμές κινούνται, αλλά το φόντο παραμένει στη θέση του. Έτσι θα μάθει πώς να το κάνουμε html εικόνα φόντου, με διάφορους τρόπους.

Εργασία με πίνακες σε μορφή HTML

Πολλοί άπειροι σχεδιαστές ιστοσελίδων, αντιμέτωποι με πίνακες και μπλοκ, συχνά δεν καταλαβαίνουν πώς να κάνουν φόντο πίνακα html εικόνα. Όπως όλες οι ομάδες HTML και CSS στυλ, η γλώσσα προγραμματισμού web είναι αρκετά απλή. Και η λύση σε αυτό το πρόβλημα είναι να γράψετε ένα ζευγάρι των γραμμών του κώδικα. Θα πρέπει να γνωρίζετε ήδη ότι το γράψιμο ενός πίνακα γραμμών και στηλών, αντίστοιχα, όπως φαίνεται από τις ετικέτες (TR) και (td). Για να κάνετε το φόντο του πίνακα με τη μορφή μιας εικόνας, είναι απαραίτητο να προστεθεί στην ετικέτα (πίνακας), (tr) ή (td) μια απλή φράση σε σχέση με την εικόνα αναφοράς: φόντο = εικόνες διεύθυνση URL. Για λόγους σαφήνειας, θα δώσω μερικά παραδείγματα.

Πίνακας με μια εικόνα αντί για το παρασκήνιο: παραδείγματα HTML

Σχεδιάστε έναν πίνακα 2x3 και καθιστούν την εικόνα φόντου αποθηκεύονται στο φάκελο "Εικόνες": (φόντο πίνακα = "Images / picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (TD) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ TD) (td) 6 (/ TD) (/ tr) (/ πίνακα). Έτσι τραπέζι μας θα συνταχθεί στο φόντο της εικόνας.

Τώρα αντλήσει τα ίδια μεγέθη πλάκα των 2x3, αλλά εισαγάγετε μια εικόνα στις στήλες αριθμημένες 1, 4, 5 και 6. (πίνακας) (tr) (φόντο td = "Images / picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ TD) (/ tr) (tr) (φόντο td = "Images / picture.jpg") 4 (/ td) (φόντο td = "Images / picture.jpg") 5 ( / td) (φόντο td = "Images / picture.jpg") 6 (/ td) (/ tr) (/ πίνακα). Μετά την παρακολούθηση μπορούμε να δούμε ότι το φόντο εμφανίζεται μόνο σε αυτά τα κύτταρα στα οποία θα εγγραφεί, και δεν ολόκληρο τον πίνακα.

ιστοσελίδα cross-browser συμβατότητα

Υπάρχει ένα τέτοιο πράγμα όπως ένα cross-browser διαδικτυακή πηγή συμβατότητα. Αυτό σημαίνει ότι η περιοχή σας είναι εξίσου καλά εμφανίζεται σε διαφορετικούς τύπους και τις εκδόσεις των browsers. Θα πρέπει να είναι HTML κώδικας και CSS στυλ για να προσαρμόσετε ένα απαραίτητο προγράμματα περιήγησης. Επιπλέον, στη σύγχρονη εποχή των έξυπνων τηλεφώνων, πολλοί προγραμματιστές προσπαθούν να δημιουργήσουν χώρους και κατάλληλο για κινητή έκδοση και ένα βλέμμα υπολογιστή.