Construire son site web

Construire son site web
Les captures d'écran sont toutes en anglais car au moment où ce tutoriel a été réalisé il n'y avait pas
encore de traduction française pour webbuilder 5,5
Création de pages à longueur dynamique!
Le but est de créer un site dont les pages aux longueurs variables seront affichées dans un cadre
interne (inline frame) sans avoir à modifier les propriétés de la page hôte.
Un format standard pour un site web est de posséder une "header", une section "body", une section
"footer" (voir tutoriel "construire son site web avec photoshop et webbuilder") les concepteurs
ajustent manuellement la longueur de la section "body" selon le contenu d'une page. Un code
spécifique permet d'adapter automatiquement la longueur de la page à son contenu. Le voici:
onLoad="this.style.height=0;
this.style.height=Content.document.body.scrollHeight; Layer2.style.height=parseInt(this.style.height)
+ (parseInt(this.style.top) - parseInt(Layer2.style.top)) * 2; Layer3.style.top=
parseInt(Layer2.style.top) +
parseInt(Layer2.style.height)"
Voici la mise en application
J'ai tout d'abord crée avec photoshop les 3 sections qui seront nécessaires à la réalisation de ces
pages dynamiques.
Les dimensions des images correspondent à la largeur de la page web définie soit 800 pixels
Les voici:
Header
Body
Footer
Le site
Créez les pages nécessaires pour la mise en œuvre de ce tutoriel
Et entrez les données suivantes dans les propriétés des 3 pages
Sur la page 1 mettez du texte ou des images sur une longueur de 350 à 400 pixels
Sur la page "index" insérez 3 calques (layer) pour créer les sections "header" "body" et "footer" de
notre site
Clic du bouton droit de la souris pour ouvrir les propriétés du calque
Indiquez les réglages comme ci-dessous en n'oubliant pas de mettre les images confectionnées en
arrière-plan.
L'ordre des calques à partir du haut de la page web sera
1 Header
2 Body
3 Footer
Faire de même pour le footer après avoir inséré le calque du "body" dont les réglages diffèrent un
peu
Voici le
résultat
Header
Body
Footer
Maintenant on va s'occuper du cadre interne "inline frame"
Copiez les
réglages cidessous
Attention au
nom du Cadre
interne ici il se
nomme
"Content"
comme dans le
script présenté
plus haut dans le
tutoriel. Si vous
renommez ce
cadre il faudra
modifier son
nom également
dans le script en
respectant "la
casse"
Relier à : page interne
Page : page 1
Apparence
Barre de défilement : jamais
Attention le cadre interne ne doit pas faire partie d'un calque, c'est pour cette raison que le "body"
doit être plutôt étroit (il s'étendra automatiquement), de plus ce cadre interne doit se trouver au
dessus des autres objets
Insérez le code dans les propriétés HTML du cadre interne à l'intérieur du tag "inside tag"
Test dans votre navigateur préféré (ne pas oublier de cocher la case visualisation de tout le site)
Comme vous pouvez le voir sur la capture d'écran ça marche. La page 1 est affichée et le "body s'est
étendu de la longueur désirée. Ce n'est pas tout.
Maintenant on va ajouter une barre de navigation dont les boutons seront reliés à des pages de
longueurs différentes. Pour cela il va falloir utiliser les réglages spécifiques ci-dessous.
Insérez dans la page 2 du texte ou un objet quelconque dont la taille sera inférieure à celle du texte
de la page1
Retournez sur la page index et insérez une barre de navigation, double cliquez pour ouvrir les
propriétés et procédez aux réglages suivants
Nom du bouton: home
Relier à : page interne
Page : page 1
Cible : ouvrir dans une
nouvelle fenêtre ou
cadre
Valeur : content
(vous vous rappelez
que notre "cadre
interne se nommait
content")
Faire de même pour les autres pages sans oublier aucun des champs indiqués au –dessus.
Voici les captures d'écran des 3 pages aux contenus et longueurs différents
Home
Page 2
Page 3
Les écarts entre les longueurs de pages sont évidents!
Et voilà vous savez faire des pages aux longueurs variables selon leur contenu!