Lovely Web [dot] Starszz [dot] Com

CODAGE DE SITE CODER UN DESIGN

Je vais essayer de vous expliquer comment créer un design.
Cette méthode est la mienne. Par là j'entend que ce n'est sûrement pas l'unique méthode et pas forcément non plus la meilleure.

N'oubliez pas d'enregistrer au fur et à mesure. On ne sait jamais...

I. Le layout.

Tout d'abord, créer un blend. Peu importe la taille. [ Voici le mien ].
Ensuite copier ce blend dans paint par exemple. Et faite les cadres ou vous mettrez vos menu et frame principale. [ Voici ce que ça me donne. ].

Maintenant que vous avez ça, il va falloir enregistrer séparément le fond et le header pour un chargement plus rapide.

D'abord le header. A vous de sélectionner (dans paint) le header à partir du bord en haut à gauche et jusqu'à atteindre le haut des cadres. [ Voir ].
Ensuite enregistrer ce que vous venez de sélectionner dans une autre feuille. [ Voir ].

Maintenant le fond. Agrandissez votre feuille paint pour quelle soit large de 1024 pixels (la largeur de l'écran). Cliquez sur Image (dans le menu en haut, puis attributs. [ Voir ].
Mettez de la couleur à l'endroit blanc. Sélectionner uniquement les lignes des cadres, copier ce que vous obtenez et enregistrez. [ Voir ].

Vous avez maintenant, toutes les parties de votre layout. Il ne reste plus qu'à coder.

II. Le codage

Ouvrez votre logiciel habituel de création de site (j'utilise Frontpage).

Dans une première page, mettez en fond de page l'image que vous venez d'enregistrer avec les lignes des cadres. [ Voir ].

Ensuite mettez le header. Pour cela, ajouter l'image et rajouter à la fin (dans la partie html) ce code : style="position: absolute; float: left; left: 0; top: 0" align="left". Celui-ci permettra de bien positionner votre image en haut à gauche. [ Voir ].

Maintenant, vous allez copier deux fois ce code entre les balises <body> (en dessous de l'image) : <iframe FRAMEBORDER="0" BORDER=0 width=# height=# src="URL OF PAGE YOU WANT THE IFRAME TO START ON" name=IFRAME NAME style="position:absolute; left:#; top:#" scrolling=CHOICE></iframe>. Il s'agit du code de l'iframe.

Maintenant, changez les informations par les vôtres : [ Voir ].
]
width=# ---> largeur (nombre)
height=# ---> hauteur (nombre)
src="http://" ---> url de la première page qui s'affichera. (par exemple main).
name= ---> Nom de l'iframe ( vous en appellerez une main et l'autre menu pour bien faire la distinction).
left:# ---> positionnement de la frame à partir de la gauche (nombre)
top:# ---> positionnement de la frame à partir du haut (nombre)

Pour connaitre les nombres à mettre vous pouvez le voir dans paint en bas à droite. [ Voir ].
]

III. Pour finir

Le design est maintenant créer.

Pour que les liens de la frame menu, aille dans le cadre principal, ajoutez target="main" à la fin de vos liens.

Pour savoir comment créer votre feuille de style, allez ici. Elle vous permettre de ne modifier qu'une seule page pour modifier toutes les couleurs du site.

... retour. - | - Des questions sur ce tutorial?