Bases de la mise en page de conception Web_Échange d'expériences

Comme vous pouvez le constater maintenant, la conception de la mise en page des pages Web devient de plus en plus importante. Les visiteurs ne veulent plus voir un site qui se concentre uniquement sur le contenu. Bien que le contenu soit important, une page ou un site n’est apprécié que lorsque sa mise en page et son contenu sont correctement intégrés. De toute façon vous ne parviendrez pas à fidéliser les visiteurs trop « pointilleux ».

1. Le concept de base de la mise en page d'une page Web

Au début, lorsque la page Web est présentée devant vous, elle est comme une feuille de papier vierge, ce qui vous oblige à utiliser vos talents de design à volonté. Au début, vous devez comprendre que même si vous pouvez contrôler tout ce que vous pouvez contrôler, si vous savez ce qu'est une norme conventionnelle ou les habitudes de navigation de la plupart des visiteurs, vous pouvez alors vous appuyer sur cela pour ajouter quelque chose qui vous est propre. Vous pouvez bien sûr créer vos propres designs, mais si vous êtes débutant, il est préférable de comprendre les concepts de base de la mise en page Web.

1. Taille de la page :

Étant donné que la taille de la page est liée à la taille et à la résolution du moniteur, la limitation de la page Web est que vous ne pouvez pas dépasser la portée du moniteur, et le navigateur prendra également beaucoup de place et la plage de pages qui vous reste deviendra de plus en plus petite. Généralement, lorsque la résolution est de 800x600, la taille d'affichage de la page est : 780x428 pixels ; lorsque la résolution est de 640x480, la taille d'affichage de la page est : 620X311 pixels, lorsque la résolution est de 1024X768, la taille d'affichage de la page est de : : 1007x600. Il ressort des données ci-dessus que plus la résolution est élevée, plus la taille de la page est grande.

La barre d'outils du navigateur affecte également la taille de la page. Généralement, les barres d'outils des navigateurs actuels peuvent être annulées ou ajoutées, donc la taille de la page est différente lorsque vous affichez toutes les barres d'outils et lorsque vous fermez toutes les barres d'outils.

Dans le processus de conception Web, faire glisser la page vers le bas est le seul moyen d'ajouter plus de contenu (taille) à la page Web. Mais je voudrais rappeler à tous qu'à moins d'être sûr que le contenu du site peut inciter les gens à faire glisser, ne laissez pas les visiteurs faire glisser la page sur plus de trois écrans. Si vous devez afficher plus de trois écrans de contenu sur une même page, mieux vaut créer des liens internes à la page pour faciliter la navigation des visiteurs.

2. Forme globale :

Qu'est-ce que la forme ? La forme est l'image d'un objet créé. Il s'agit de l'image globale de la page. Cette image doit former un tout et la connexion des graphiques et du texte doit être superposée et ordonnée. Bien que les moniteurs et les navigateurs soient rectangulaires, pour la forme de la page, vous pouvez utiliser pleinement d'autres formes de la nature et leurs combinaisons : rectangle, cercle, triangle, losange, etc.

Pour différentes formes, ils représentent différentes significations. Par exemple, le rectangle représente la formalité et les règles. Vous avez remarqué que de nombreuses pages Web du PCI et du gouvernement utilisent des rectangles comme forme générale ; les bandes circulaires représentent la douceur, l'unité, la chaleur, la sécurité, etc. De nombreux sites de mode aiment utiliser des cercles comme forme générale. forme de la page ; le triangle représente la force, l'autorité, la solidité, l'agressivité, etc. Afin de montrer son autorité, de nombreux grands sites Web commerciaux utilisent souvent des triangles car la forme générale de la page représente l'équilibre, la coordination, l'équité et ; certains sites de rencontres utilisent souvent le diamant comme forme générale de la page. Bien que différentes formes aient des significations différentes, la plupart des productions de pages Web actuelles sont conçues en combinant plusieurs graphiques, dans lesquels un certain graphique peut représenter une plus grande proportion de la composition.

3. En-tête :

L'en-tête peut également être appelé en-tête. La fonction de l'en-tête est de définir le thème de la page. Par exemple, la majeure partie du nom d'un site est affichée dans l'en-tête. De cette façon, les visiteurs peuvent rapidement savoir de quoi parle le site. L'en-tête est la clé de la conception entière de la page. Il impliquera davantage de conceptions ci-dessous et la coordination de la page entière. Des images du nom du site, du logo de l'entreprise et des bannières publicitaires sont souvent placées sur l'en-tête de la page.

4. Texte :

Le texte apparaît sous forme de lignes ou de blocs (paragraphes) sur la page, et leur emplacement détermine la visibilité de l'ensemble de la mise en page. Dans le passé, en raison des limites de la technologie de production de pages, la flexibilité de placement du texte était très limitée. Cependant, avec l'essor du DHTML, le texte peut être placé n'importe où sur la page selon vos propres besoins.

5. Pied de page :

Le pied de page fait écho à l'en-tête. L'en-tête est l'endroit où le thème du site est placé et le pied de page est l'endroit où sont placées les informations sur le producteur ou l'entreprise. Vous pouvez voir qu’une grande partie des informations de production sont placées dans le pied de page.

6. Images

Les images et le texte sont les deux éléments majeurs d'une page Web, mais ils sont indispensables. La façon de gérer la position des images et du texte est devenue la clé de la mise en page de la page entière. Et votre réflexion en matière de mise en page se reflétera également ici.

7. Multimédia

En plus des textes et des images, il existe également des sons, des animations, des vidéos et d'autres médias. Bien qu’ils ne soient pas souvent utilisés, avec l’essor des pages Web dynamiques, ils deviendront plus importants dans la mise en page des pages Web.

2. Méthode de mise en page des pages Web

Il existe deux méthodes de mise en page Web : la première est la mise en page papier ; la seconde est la mise en page logicielle. Les éléments suivants sont présentés séparément :

1. Méthode de mise en page sur papier

De nombreux concepteurs de sites Web n'aiment pas dessiner d'abord un croquis de la mise en page, mais conçoivent directement la mise en page et ajoutent du contenu sur le Web. concepteur. Cette approche sans brouillon ne vous permettra pas de concevoir d’excellentes pages Web. Ainsi, lorsque vous commencez à créer une page Web, vous devez d’abord dessiner un croquis de la mise en page de votre page sur papier.

Préparez quelques morceaux de papier blanc et un crayon Vous souhaitez concevoir un site internet à la mode.

* Sélection de la taille :

À l'heure actuelle, la résolution de 800X600 est généralement le mode de navigation conventionnel. Ainsi, afin de prendre en charge la plupart des visiteurs, la taille de votre page doit être basée sur la résolution de 800X600.

*Sélection de la forme :

Dessinez d'abord un rectangle symbolisant la fenêtre du navigateur sur le papier blanc. Ce rectangle constituera l'étendue de votre mise en page. Choisissez une forme comme thème de la page entière. Nous choisissons un cercle car il représente la douceur et est plus en phase avec la mode. Ensuite, dessinez-le au hasard dans le cadre rectangulaire. Vous pouvez essayer d'ajouter des cercles ou d'autres formes. Si vous le dessinez ainsi, vous constaterez que c'est très compliqué. En fait, si vous voulez concevoir une mise en page parfaite dès le début, ce sera plus difficile, et vous devrez trouver les formes spéciales cachées dans ces graphiques apparemment désordonnés. Notez également que vous n'avez pas à vous soucier de savoir si la mise en page que vous concevez peut être mise en œuvre. En fait, n'importe quelle mise en page imaginable peut être réalisée avec la technologie HTML actuelle.

En tenant compte de l'arc concave sur le côté gauche, afin d'atteindre l'équilibre, nous avons ajouté un rectangle (il peut aussi s'agir d'un segment de ligne) sur le côté droit de la page.

*Ajouter un en-tête de page :

jpg est la forme de mise en page que nous avons obtenue à partir de .jpg et 2.jpg, nous devrions donc ajouter un en-tête de page. Généralement, l'en-tête de page est situé en haut de la page, nous avons donc ajouté un en-tête de page pour .jpg Afin d'équilibrer l'arc à gauche et le rectangle à droite, nous avons ajouté un en-tête de page rectangulaire et laissé la page. l'en-tête croise l'arc de gauche.

*Ajouter du texte :

Ajoutez du texte et des graphiques à la partie vierge de la page. Comme il y a un rectangle sur le côté droit de la page comme feuille, le texte placé dans la zone vide ne semblera pas déplacé en raison de l'arc sur la gauche.

*Ajouter des images :

Les images sont des supports nécessaires pour embellir la page et illustrer le contenu. Ajoutez l'image ici, le cas échéant.

Après les étapes ci-dessus, la présentation générale d'une page de mode apparaîtra. Bien entendu, il ne s’agit pas du résultat final, mais d’une référence importante pour votre future production.

2. Méthode de mise en page logicielle

Si vous n'aimez pas utiliser du papier pour dessiner vos intentions de mise en page, vous pouvez également utiliser un logiciel pour effectuer ces tâches. Ce logiciel est Photoshop. Les fonctions d'édition d'images de Photoshop sont encore plus pratiques lorsqu'elles sont utilisées pour concevoir des mises en page Web. Contrairement à l'utilisation du papier pour concevoir des mises en page, Photoshop peut facilement utiliser des couleurs, des graphiques et utiliser la fonction de calque pour concevoir des idées de mise en page qui ne peuvent pas être réalisées avec du papier.

3. Technologie de mise en page des pages Web

1. Application des feuilles de style en cascade

Dans la nouvelle norme HTML4.0, CSS (Cascading Style Sheet) a été proposé. textes et images avec une précision totale. CSS peut paraître un peu compliqué pour les débutants, mais c'est effectivement une bonne méthode de mise en page. Des idées que vous n'avez jamais pu réaliser peuvent être réalisées avec CSS. Actuellement sur de nombreux sites, l’utilisation de feuilles de style en cascade est un excellent reflet d’un site. Vous pouvez trouver de nombreuses introductions et méthodes d’utilisation de CSS en ligne. Bien entendu, les standards WEB de plus en plus populaires (XHTML+CSS) préconisent fortement la séparation du contenu et de la présentation, et servent de transition pour la prochaine génération de XML d'échange de données (c'est-à-dire XHTML).

2. Disposition des tableaux

La disposition des tableaux semble être devenue un standard Si vous naviguez sur un site, ils doivent être disposés en tableaux. L’avantage de la disposition en table est qu’elle peut gérer différents objets sans se soucier de l’influence entre les différents objets. De plus, les tableaux sont plus pratiques pour positionner des images et du texte que pour utiliser CSS. Le seul inconvénient de la disposition des tableaux est que la vitesse de téléchargement des pages souffre lorsque vous utilisez trop de tableaux. Pour la mise en page des tableaux, vous pouvez simplement rechercher la page d'accueil d'un site, l'enregistrer sous forme de fichier HTML et l'ouvrir avec un outil d'édition de page Web (un logiciel WYSIWYG est requis. Vous verrez comment cette page utilise les tableaux).

　3. Disposition des cadres

Je ne sais pas pourquoi, mais les pages avec une structure de cadres ont commencé à être détestées par de nombreuses personnes, probablement à cause de leur compatibilité. Mais du point de vue de la mise en page, la structure de trame est une bonne méthode de mise en page. Tout comme une disposition de tableau, il place différents objets sur différentes pages pour le traitement. Le cadre pouvant annuler la bordure, cela n'affecte généralement pas l'apparence générale.

Le guide de mise en page que je vais vous présenter aujourd'hui ne couvre pas toutes les techniques de mise en page de pages Web. Dans un sens, je souhaite vous guider sur la façon de placer correctement les images et le texte lors de la création de pages Web, et sur la manière d'avoir une conception sautante.