Lors de la conception de sites, vous devez souvent résoudre une question fondamentale: quel sera le comportement de la page lorsqu'elle sera ouverte avec différentes résolutions d'écran ? Il y a deux options ici - pages de site "caoutchouc" (étirement) ou statique. La première option sera discutée. Quelle que soit votre préférence pour la mise en page, le principe principal de la conception extensible est une relative évolutivité.
Il est nécessaire
- - connaissance du HTML;
- - programme pour éditer le code html.
Instructions
Étape 1
Sélectionnez le fichier principal de votre modèle de site, qui reflétera le balisage principal. Il peut s'agir d'un fichier index.html ou index.php. L'un des meilleurs logiciels d'édition de modèles de sites visuels est Macromedia Dreamweawer. Le montage nécessaire se fera sur la base de ce programme.
Ouvrez le fichier modèle ou créez-en un nouveau par commande "Fichier" - "Nouveau", catégorie - "Page de base" - "HTML" ou catégorie "Page dynamique" - "PHP". Nous considérons ici le cas général où la structure du site est enregistrée dans exactement l'un des deux fichiers.
Étape 2
Ce n'est un secret pour personne depuis longtemps qu'il existe différents types de mise en page - sur des tableaux, sur des blocs div et combinés (tables et blocs en même temps). La balise html est responsable de la mise en page du tableau
Spécifiez un pourcentage (100 %) pour chaque propriété. Cela aura pour effet d'étirer automatiquement les cellules du tableau sur des écrans avec n'importe quelle géométrie. Il peut s'agir d'un moniteur de 19 pouces ou d'un smartphone - chacun d'eux reproduira correctement le contenu.
Étape 3
Si vous devez spécifier exactement la correspondance entre les cellules du tableau, utilisez l'exemple suivant:
| … … le contenu de la cellule 1. … | … … le contenu de la cellule 2. … |
Ici, vous verrez que l'une des cellules est spécifiée avec une largeur de 30% de tout ce qui est défini pour le tableau lui-même. Un calcul simple montre qu'il reste 100 % -30 % = 70 % pour la deuxième cellule. N'oubliez pas que dans ce cas, l'une des cellules du tableau ne doit pas avoir l'attribut width défini. Le navigateur fera tous les calculs tout seul et étirera correctement le tableau avec les cellules. Le contenu à l'intérieur des tableaux s'étirera et se rétrécira également correctement sur différents écrans.
Étape 4
Dans une situation avec une disposition div, les blocs de balises sont étirés par défaut sur toute la largeur de l'écran et se succèdent de gauche à droite, de haut en bas. Pour affiner leur géométrie, créez une classe CCS ou un identifiant (ID), dans lequel vous précisez par exemple les attributs et/ou pour la catégorie de taille et de position de la boite (Box). N'oubliez pas de lier le style spécifié au fichier de balisage du site et de lier la classe (ID) à la balise souhaitée. Habituellement, il est placé au tout début du script, définissant toute la future géométrie du site:
… … contenu du site. …
Ou comme ça:
… … contenu du site. …
Le code de la règle CSS sera le suivant:
… Ma classe {
largeur: 30 %;
hauteur: 50 %;
}
#ma pièce d'identité {
largeur: 30 %;
hauteur: 50 %;
}
