Comment construire un site Web étape par étape avec des structures filaires

Utilisez des feuilles de style en cascade, ou CSS, pour créer une représentation filaire de votre site Web. Les wireframes sont des schémas graphiques dont les formes indiquent l'emplacement du texte et des graphiques sur les pages publiées de votre site. CSS est un langage permettant de spécifier l'emplacement de chaque élément de page Web sur la page, ainsi que le style et le formatage de chaque élément. Ce projet crée un site Web d'une seule page, bien que le processus de création de pages supplémentaires soit identique à celui de la page d'accueil.

1.

Procurez-vous un morceau de papier millimétré dont les lignes sont séparées par des carrés d'un pouce. Pour chaque division de la page de votre site, tracez un rectangle sur le papier représentant l'emplacement de cette division sur la page Web. Par exemple, si vous souhaitez créer une division contenant des liens de navigation sur le côté gauche de votre page Web, tracez un rectangle sur le côté gauche du papier graphique. Rédigez des étiquettes indiquant la division de page Web représentée par chaque rectangle. Par exemple, écrivez "Navigation" dans le rectangle de navigation.

2

Utilisez les lignes du papier quadrillé pour mesurer la distance entre le coin supérieur gauche de la page et le coin supérieur gauche de chacun des rectangles de la page. Écris ce nombre dans le rectangle. Par exemple, le coin supérieur de votre bloc de navigation peut être situé à deux pouces de la gauche et un pouce du haut de la page. Vous pourriez écrire "Position: 2, 1" dans ce cas.

3

Mesurez la largeur et la hauteur de chaque rectangle et écrivez les dimensions dans le rectangle comme vous l'avez fait avec les coordonnées du coin supérieur gauche.

4

Collez dans WordPad ou un autre traitement de texte le framework HTML suivant. Ces instructions définissent une page Web avec deux exemples de blocs DIV que vous pouvez utiliser pour reproduire les rectangles de votre papier quadrillé sur une page Web de votre navigateur.

Tapez votre contenu ici. Tapez votre contenu ici.

5

Tapez sur les noms de classe "sampleDIV" dans la section Style avec un nom unique pour l'une de vos divisions de page Web. Pour l'exemple de division de navigation, vous pouvez taper "navigationBlock". Utilisez les commandes copier et coller de votre traitement de texte pour créer une entrée supplémentaire dans la section Style pour chaque rectangle de votre papier quadrillé. Tapez sur le nom de classe "sampleDIV" de chaque entrée avec un nom décrivant la fonction de l'un de vos rectangles.

6

Tapez sur les valeurs dans les attributs "Haut", "Gauche", "Largeur" ​​et "Hauteur" pour chaque style avec les dimensions que vous avez notées pour chaque rectangle. Pour le style de bloc de navigation, les attributs que nous venons de mentionner pourraient ressembler à ceci:

div.navigationBlock {position: absolute; à gauche: 2 pouces; en haut: 1 pouce; largeur: 2 pouces; hauteur: 3 pouces; style de bordure: solide; }

7.

Tapez sur la valeur attribuée à la propriété Class pour chaque balise HTML DIV de l'exemple de modèle avec le nom de classe que vous avez défini dans la section Style de la page Web. Pour le bloc de navigation, votre balise DIV pourrait ressembler à ceci:

Les liens de navigation vont ici.

8

Enregistrez le document avec n'importe quel nom de fichier se terminant par "htm" pour le marquer en tant que page Web. Utilisez l'explorateur Windows pour accéder à la page Web. Double-cliquez sur la page pour la charger dans votre navigateur afin que vous puissiez voir à l'écran le fil de fer que vous avez conçu sur le papier quadrillé.

9

Cliquez sur l'icône de la barre des tâches de votre traitement de texte pour revenir au traitement de texte. Tapez sur l'exemple de contenu filaire du modèle avec votre contenu actuel. Par exemple, remplacez le texte d'exemple "Les liens de navigation vont ici" par un lien de navigation réel tel que:

À propos de nous.

dix.

Suivez les instructions de votre hôte Web pour télécharger les pages terminées de votre site sur les serveurs de l'hôte pour publier votre site.