Πώς να προσθέσετε φόντο σε έναν ιστότοπο: 14 βήματα (με εικόνες)

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

Πώς να προσθέσετε φόντο σε έναν ιστότοπο: 14 βήματα (με εικόνες)
Πώς να προσθέσετε φόντο σε έναν ιστότοπο: 14 βήματα (με εικόνες)

Βίντεο: Πώς να προσθέσετε φόντο σε έναν ιστότοπο: 14 βήματα (με εικόνες)

Βίντεο: Πώς να προσθέσετε φόντο σε έναν ιστότοπο: 14 βήματα (με εικόνες)
Βίντεο: Πώς δουλεύει το Gmail και ρυθμίσεις που πρέπει να ξέρεις - Gmail Basics! 2024, Ενδέχεται
Anonim

Το παρασκήνιο είναι ένα από τα πιο σημαντικά στοιχεία ενός ιστότοπου. Ένα καλό υπόβαθρο δημιουργεί τον τόνο για τον ιστότοπο και συμπληρώνει το περιεχόμενο. Υπάρχουν πολλοί διαφορετικοί τρόποι για να προσθέσετε ένα φόντο, κάθε τρόπος με διαφορετικό σκοπό. Ορισμένες μέθοδοι σας επιτρέπουν να εφαρμόσετε το φόντο σε όλες τις σελίδες ενός ιστότοπου, ενώ άλλες περιορίζουν το φόντο μόνο σε μια συγκεκριμένη σελίδα. Αυτό το άρθρο σας διδάσκει πώς να προσθέσετε φόντο στον ιστότοπό σας χρησιμοποιώντας HTML ή CSS.

Βήματα

Μέθοδος 1 από 2: Μέθοδοι HTML

Στερεό χρωματιστό υπόβαθρο

Προσθήκη φόντου σε ιστότοπο Βήμα 1
Προσθήκη φόντου σε ιστότοπο Βήμα 1

Βήμα 1. Ένα μονόχρωμο φόντο είναι ο πιο βασικός τύπος φόντου που μπορείτε να τοποθετήσετε σε έναν ιστότοπο

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

Προσθήκη φόντου σε ιστότοπο Βήμα 2
Προσθήκη φόντου σε ιστότοπο Βήμα 2

Βήμα 2. Ανοίξτε τον κώδικα ιστού (πηγή)

Προσθήκη φόντου σε ιστότοπο Βήμα 3
Προσθήκη φόντου σε ιστότοπο Βήμα 3

Βήμα 3. Στην ετικέτα σώματος, προσθέστε ένα χαρακτηριστικό που ονομάζεται bgcolor

Τώρα, η ετικέτα σώματος πρέπει να μοιάζει με αυτό-

όπου COLORNAME είναι το όνομα του χρώματος. Το COLORNAME μπορεί να γεμίσει με πολλούς τύπους αντιπροσώπων χρώματος-

  • (όνομα χρώματος)
  • (εξαγωνική τιμή)
  • (Τιμή RGB)
Προσθήκη φόντου σε ιστότοπο Βήμα 4
Προσθήκη φόντου σε ιστότοπο Βήμα 4

Βήμα 4. Ο πειραματισμός με RGB και # μπορεί να οδηγήσει σε πολλές αποχρώσεις, αλλά μπορείτε να ακολουθήσετε τον εύκολο πρώτο τρόπο

Αλλά θυμηθείτε ότι η πληκτρολόγηση ενός ασυνήθιστου χρώματος ως "Ultramarine Blueish Green" θα οδηγήσει σε λευκό.

Προσθήκη εικόνας φόντου

Η προσθήκη εικόνας φόντου είναι ελαφρώς πιο περίπλοκη από ένα μονόχρωμο φόντο

Προσθήκη φόντου σε ιστότοπο Βήμα 5
Προσθήκη φόντου σε ιστότοπο Βήμα 5

Βήμα 1. Προσθέστε την ιδιότητα φόντου στην ετικέτα σώματος, έτσι ώστε να μοιάζει με αυτό-

όπου το SRC είναι η πηγή της εικόνας Το SRC μπορεί να βρίσκεται στον ίδιο φάκελο ή σε άλλο φάκελο/ιστοσελίδα.

  • (στον ίδιο φάκελο)
  • (μέσα σε διαφορετικό φάκελο)
  • (σε διαφορετική ιστοσελίδα)
Προσθήκη φόντου σε ιστότοπο Βήμα 6
Προσθήκη φόντου σε ιστότοπο Βήμα 6

Βήμα 2. Θυμηθείτε να πληκτρολογήσετε την επέκταση.gif /-j.webp" />

Μέθοδος 2 από 2: Μέθοδοι CSS

Προσθήκη φόντου σε ιστότοπο Βήμα 6
Προσθήκη φόντου σε ιστότοπο Βήμα 6

Στερεό χρωματιστό υπόβαθρο

Προσθήκη φόντου σε ιστότοπο Βήμα 7
Προσθήκη φόντου σε ιστότοπο Βήμα 7

Βήμα 1. Για να προσθέσετε ένα σταθερό έγχρωμο φόντο στο CSS, προσθέστε ένα χαρακτηριστικό στυλ

Μπορείτε επίσης να δώσετε αναγνωριστικά και κλάσεις και να χρησιμοποιήσετε εξωτερικά και εσωτερικά φύλλα στυλ.

Προσθήκη φόντου σε ιστότοπο Βήμα 8
Προσθήκη φόντου σε ιστότοπο Βήμα 8

Βήμα 2. Η ετικέτα του σώματός σας πρέπει να μοιάζει με αυτό-

όπου το COLORNAME είναι το όνομα του χρώματος, της εξάγωνης τιμής ή του RGB (Θυμηθείτε επίσης τα τελευταία βήματα του στερεού χρώματος φόντου στην HTML, τα παραπάνω ισχύουν και εδώ).

Προσθήκη εικόνας

Προσθήκη φόντου σε ιστότοπο Βήμα 9
Προσθήκη φόντου σε ιστότοπο Βήμα 9

Βήμα 1. Για να προσθέσετε μια εικόνα, προσθέστε το χαρακτηριστικό στυλ στην ετικέτα σώματος

Μπορείτε επίσης να δώσετε αναγνωριστικά και κλάσεις και να χρησιμοποιήσετε εξωτερικά και εσωτερικά φύλλα στυλ.

Προσθήκη φόντου σε ιστότοπο Βήμα 10
Προσθήκη φόντου σε ιστότοπο Βήμα 10

Βήμα 2. Η ετικέτα του σώματός σας πρέπει τώρα να μοιάζει με αυτό-

Προσθήκη φόντου σε ιστότοπο Βήμα 11
Προσθήκη φόντου σε ιστότοπο Βήμα 11

Βήμα 3. Να θυμάστε ότι το SRC είναι η πηγή

Μπορεί να προέρχεται από τον ίδιο φάκελο, διαφορετικό φάκελο ή διαφορετική ιστοσελίδα.

  • (στον ίδιο φάκελο)
  • (μέσα σε διαφορετικό φάκελο)
  • (σε διαφορετική ιστοσελίδα).
Προσθήκη φόντου σε ιστότοπο Βήμα 12
Προσθήκη φόντου σε ιστότοπο Βήμα 12

Βήμα 4. Θυμηθείτε να προσθέσετε και τις.εκτάσεις

Επαναλαμβανόμενο μοτίβο φόντου

Προσθήκη φόντου σε ιστότοπο Βήμα 13
Προσθήκη φόντου σε ιστότοπο Βήμα 13

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

Η ετικέτα του σώματός σας πρέπει τώρα να αλλάξει σε-

Όπου REPEAT-SETTINGS είναι οι ρυθμίσεις. Μπορεί να υπάρχουν πολλές επαναλαμβανόμενες ρυθμίσεις, όπως-

  • (Το φόντο θα επαναληφθεί τόσο κάθετα όσο και οριζόντια.)
  • (Το φόντο θα επαναληφθεί οριζόντια.)
  • (Το φόντο θα επαναληφθεί κάθετα.)

Διορθώθηκε το φόντο της εικόνας

Προσθήκη φόντου σε ιστότοπο Βήμα 14
Προσθήκη φόντου σε ιστότοπο Βήμα 14

Βήμα 1. Τα σταθερά φόντα εικόνας φαίνονται δροσερά και δεν αλλάζουν καθώς κάνετε κύλιση προς τα κάτω

Για να τα κάνετε απλά πρέπει να κάνετε μερικές απλές τροποποιήσεις στον κώδικα στην παραπάνω ενότητα. Κάντε τις τροποποιήσεις για να κάνετε την ετικέτα σώματος να μοιάζει με αυτό-

όπου το SRC είναι η πηγή της εικόνας φόντου, ΘΕΣΗ είναι η θέση της εικόνας (μπορεί να κυμαίνεται από το κέντρο έως το πάνω δεξιά). Το συνημμένο υπόβαθρο είναι ο κύριος "καταλύτης" αυτού του τύπου φόντου. Χρησιμοποιείται για να πει τη θέση του φόντου και συνιστάται να μην αλλάξει.

Συνιστάται: