Comment Définir Un Arrière-plan Sur Un Site Web

Table des matières:

Comment Définir Un Arrière-plan Sur Un Site Web
Comment Définir Un Arrière-plan Sur Un Site Web

Vidéo: Comment Définir Un Arrière-plan Sur Un Site Web

Vidéo: Comment Définir Un Arrière-plan Sur Un Site Web
Vidéo: COURS COMPLET HTML ET CSS [42/71] - Images de fond et gestion du fond 2024, Peut
Anonim

La conception de tout site est basée sur des images et des couleurs de fond, comme une maison sur des fondations. Si vous souhaitez remplacer la base typique de votre ressource Internet par quelque chose de plus individuel, vous devez commencer par le développement de la conception. Et quand il sera prêt, il restera la partie purement technique, c'est-à-dire le remplacement de l'ancien design de l'arrière-plan du site spécifié dans le code source des pages par le nouveau. Il existe plusieurs façons de mettre cela en œuvre dans la pratique.

Comment définir un arrière-plan sur un site Web
Comment définir un arrière-plan sur un site Web

Instructions

Étape 1

Vous devez d'abord savoir de quelle manière l'arrière-plan est défini dans la version actuelle du site. Pour cela, ouvrez le code HTML de la page. Vous pouvez le faire avec un simple éditeur de texte en téléchargeant le fichier à partir du serveur à l'avance. Ou vous pouvez utiliser l'éditeur des pages du système de gestion de contenu, si vous en utilisez un. L'éditeur de page ne nécessite pas de télécharger le fichier, mais le modifie directement sur le serveur en utilisant le navigateur comme interface. Le code HTML (HyperText Markup Language) de la page que vous ouvrez est constitué de lignes d'instructions pour le navigateur. Ils décrivent les types, l'apparence et l'emplacement de chacun des éléments d'une page Web. Ces instructions sont communément appelées « balises ». L'ordre des balises elles-mêmes dans le code de la page obéit également aux règles du langage HTML - elles sont divisées en blocs, dont le premier doit être un bloc d'en-tête qui commence par une balise et se termine. Il devrait être suivi du bloc qui vous intéresse le plus maintenant - le corps du document. Il est limité aux balises et. Dans la balise d'ouverture de ce bloc (), vous pouvez mettre des informations sur le fond de la page. Ces informations dans les balises sont appelées "attributs". L'attribut de la balise body qui définit la couleur d'arrière-plan est noté bgcolor et dans le code, cela peut ressembler à ceci: Ici, nous définissons la couleur d'arrière-plan de la page sur argent. Le navigateur peut reconnaître certaines couleurs par leur nom, mais pour ne pas se tromper, il vaut mieux indiquer leurs codes hexadécimaux. Cette version avec la couleur argent dans l'expression hexadécimale ressemblera à ceci: Vous devez donc trouver la balise commençant par <body dans le code de la page et vérifier si elle a une couleur d'arrière-plan. Si tel est le cas, remplacez l'indication de couleur par votre nouvelle version et enregistrez les modifications apportées à la page.

Étape 2

L'arrière-plan de la conception actuelle de votre site peut être défini non par une couleur, mais par une image. L'attribut correspondant de la balise body est appelé background, et il peut ressembler à ceci dans le code: Ici, le background est l'image bg.jpg

Étape 3

Lorsque vous décrivez l'apparence de pages au design relativement complexe, utilisez des "feuilles de style en cascade" - CSS (feuilles de style en cascade). Des blocs de code CSS peuvent être inclus directement dans le code de la page ou contenus dans un fichier externe avec l'extension "css". Vous devez rechercher la balise de description de style commençant par <style dans la partie en-tête du code de la page (entre les balises et). S'il contient un lien vers un fichier externe, il ressemblera à ceci: @import "style.css"; Voici un lien vers une feuille de style nommée style.css. Vous devez ouvrir le fichier spécifié pour le modifier. Et s'il n'y a pas de lien, et après la balise d'ouverture <style, il y a des instructions de style, alors vous devez les modifier ici. Dans les deux options, parmi les descriptions de styles, vous devez rechercher celles liées au corps du document (body). Ce bloc de descriptions peut ressembler à ceci: body {

couleur de fond: argent;

la couleur noire;

} Ici, vous devez remplacer la valeur du paramètre background-color par la valeur de votre nouvelle couleur et mieux dans les mêmes valeurs hexadécimales. L'option d'image d'arrière-plan dans les instructions CSS devrait ressembler à ceci: body {

arrière-plan: # C0C0C0 url (img / bg.jpg) repeat-y;

la couleur noire;

} Ici, le lien vers l'image est similaire à celui discuté ci-dessus, et # C0C0C0 avant le lien signifie que l'espace de la page qui n'est pas occupé par l'image de fond aura un fond argenté. "Répéter-y" indique que l'image d'arrière-plan doit être multipliée le long de l'axe Y (vertical)."Repeat-y" peut être remplacé par "repeat-x" (réplication horizontale) ou "no-repeat" (ne pas répliquer). Si vous ne spécifiez pas du tout la répétition, l'image d'arrière-plan sera alors superposée à l'espace d'arrière-plan de la page dans toutes les directions.

Conseillé: