Struture d'une page
Ci-contre une image vous présentant une page type du site (cliquez dessus pour l'agrandir), 4 zones y sont indiquées (notées de 1 à 4).Help&Web dispose de fonctionnalités puissantes pour vous simplifier le travail et parmis elles le contenu partagé, ce terme désigne des portions de codes qui seront réemployées telles quelles dans plusieurs rubriques,C'est un peu le principe des pseudos-frame du php.
Si vous ouvrez le projet "helpandweb.com" sous Help&Web vous ne verrez dans vos rubriques que le contenu de la zone 2, les autres sont placées dans du contenu partagé, l'avantage est que vos rubriques ne sont pas encombrées par le code commun.
- header pour la zone 1
- colright pour la zone 3
- footer pour la zone 4
Positionnement CSS
Pour gérer le positionnement de ces 4 zones Help&Web met à votre disposition le composant
Pour cela vous cliquez sur l'onglet Contenu partagé situé sous la liste des rubriques de votre projet,puis sur le bouton En-tête, vous vous positionnez alors dans la zone d'édition, partie droite c'est la même zone que pour le contenu des rubriques, et vous cliquez sur le composant

Le contenu d'En-tête est automatiquement
inséré avant le contenu de vos rubriques, tout comme le
Bas de page l'est après
Il vous suffit juste de faire pointer les propriétés
HeaderContent sur header,
RightContent sur colright et
FooterContent sur footer pour
qu'Help&Web génére correctement vos zones.Pour ce faire cliquez donc sur la marque du composant << REF(html-layout.spr:...)>> et choisissez Ouvrir dans le menu popup qui s'affiche.


Lors de la création d'un projet un assistant vous guide pour réaliser cela automatiquement, il est tout de même bon que vous sachiez le faire manuellement pour modifier un projet.
Il vous faut valider les options A partir d'un projet vierge | Site Web
Habillage par css
Et voilà le positionnement par css est réglé, nous allons voir maintenant l'habillage, cliquez sur le bouton
Pour notre positionnement ceux qui nous intéressent sont #header, #content, #colright et #footer choisissez en un puis cliquez sur le bouton Editer vous pourrez alors modifier à votre guise l'apparence de votre élément.
Petits trucs
Tout ce que placerez dans le Bas de page avant le composant
La barre marquée A suivre ... y est d'ailleurs mise, elle est réalisée à partir du composant

Toutes les vignettes de la colonne de droite sont placées dans le contenu partagé colright, des directives conditionnelles basées sur le nom des rubriques sont employées pour déterminer les images de chaque page (voir le tutorial Projet multi-formats )