Comment Faire Un En-tête En Caoutchouc Pour Un Site Web

Table des matières:

Comment Faire Un En-tête En Caoutchouc Pour Un Site Web
Comment Faire Un En-tête En Caoutchouc Pour Un Site Web

Vidéo: Comment Faire Un En-tête En Caoutchouc Pour Un Site Web

Vidéo: Comment Faire Un En-tête En Caoutchouc Pour Un Site Web
Vidéo: Apprendre l'HTML : Chapitre 6, L'en-tête head 2024, Peut
Anonim

Lors de la création d'un site Web sur Internet, l'un des points les plus importants qu'un développeur doit prendre en compte est sa fonctionnalité, sa polyvalence et ses performances. Pour que le site s'affiche entièrement et correctement dans n'importe quel navigateur sur des ordinateurs avec une grande variété de résolutions d'écran, vous pouvez créer un en-tête "caoutchouc" pratique, composé de plusieurs éléments graphiques.

Comment faire un en-tête en caoutchouc pour un site Web
Comment faire un en-tête en caoutchouc pour un site Web

Instructions

Étape 1

Dans la première étape de la création d'un tel en-tête pour un site Web, ouvrez dans Photoshop l'image que vous avez déjà préparée pour la publication sur le Web, puis coupez-la en morceaux à l'aide de l'outil Tranche dans la barre d'outils. Coupez l'en-tête de manière à ce que la partie centrale soit vide, de sorte que vous vous retrouvez avec trois éléments graphiques. Cela permettra à l'en-tête de s'étirer pour n'importe quelle résolution d'écran.

Étape 2

Après avoir coupé l'en-tête, enregistrez-le en optimisant les fichiers lors de l'enregistrement pour le format Web (Enregistrer pour le Web). Définissez le format de fichier souhaité pour l'enregistrement - par exemple, gif, jpeg ou png. Pour modifier chaque fragment de l'image, cliquez sur l'option Outil de sélection de tranche dans le menu et redimensionnez les images afin que leur taille soit la plus petite possible avec le moins de perte de qualité de l'affichage visuel de l'image à l'écran. Enregistrez vos images modifiées au format html et images.

Étape 3

Une fois les images enregistrées, modifiez le code HTML en ouvrant le document html enregistré avec le Bloc-notes. Dans le bloc-notes, effacez toutes les lignes de code inutiles. Ne laissez que les lignes nécessaires - données sur le tableau dans lequel vos images sont intégrées:

Étape 4

Dans ces lignes, au lieu de votreimage.gif, le chemin d'accès à vos images avec la largeur et la hauteur appropriées doit être spécifié.

Étape 5

Pour que la partie médiane de l'image s'étire, en étalant les images extrêmes sur les côtés, écrivez les attributs de code correspondants dans les lignes. Spécifiez vos propres paramètres de largeur et de hauteur dans le code.

Étape 6

Téléchargez les images d'en-tête générées dans le répertoire racine de votre site, puis modifiez le code HTML avec de nouveaux chemins vers les images d'en-tête sur le serveur. Collez le code d'en-tête entre les balises.

Conseillé: