Le "header", ou haut de page web, rend votre site unique, lui permet de se différencier des autres et de refléter les spécificités de votre projet Internet. À l'aide d'un en-tête original et bien fait, vous pouvez décorer et affiner n'importe quelle page Web, et pour créer l'en-tête vous-même, vous devez apprendre à mettre en page cet élément Web.
Instructions
Étape 1
Si vous souhaitez que votre site ait des dimensions statiques et constantes, vous devez créer un en-tête statique qui ne change pas en fonction du changement de largeur de l'écran. Déterminez la largeur et la hauteur de l'en-tête (par exemple, 996 x 230) et insérez une image d'arrière-plan dans le bloc supérieur à l'aide du code CSS suivant, où header-1.jpg
arrière-plan: # a6b7d3 url (img / header-1.jpg) sans répétition;
largeur: 996px;
hauteur: 230px;
} Le code HTML d'un en-tête de ce type ressemblera à ceci:
Étape 2
Si le site est construit de manière à ce que ses dimensions soient ajustées à la largeur de l'écran, l'en-tête doit être composé en tenant compte de toutes les principales résolutions de moniteur. La largeur maximale d'un tel en-tête doit être de 1920 pixels. Pour insérer un tel en-tête, utilisez le code CSS: #header {background: # a6b7d3 url (img / header-2.jpg) no-repeat center; height: 250px;} Le code HTML dans ce cas est similaire au précédent. Le code CSS a été modifié dans certains paramètres - il dispose désormais d'un attribut pour centrer l'image d'en-tête, ce qui lui permet d'adapter l'arrière-plan à n'importe quelle largeur d'écran.
Étape 3
Vous pouvez également créer un en-tête plus complexe, découpé en plusieurs blocs d'arrière-plan, dont la position changera en fonction de la taille de la fenêtre. Le CSS pour un tel en-tête est plus complexe et étendu, et consiste à répéter plusieurs éléments d'arrière-plan en fonction des dimensions flottantes de la fenêtre du navigateur dans laquelle votre site peut être consulté.
