Planification de la conception et de la mise en forme de la page

La plupart des projets de conception Web naissent de storyboards ou d'organigrammes convertis en exemples de pages par les concepteurs ou les développeurs. Vous pouvez utiliser Studio 8 pour créer des exemples de page au fur et à mesure que vous progressez dans la conception. Une fois que vous avez un aperçu de l'apparence que vous voulez donner à vos pages, vous pouvez commencer à planifier leur mise en forme dans Dreamweaver.

Créer des maquettes de pages pour déterminer l'apparence de votre site

La planification préalable de la conception et de la mise en forme de vos pages Web permet de gagner un temps considérable lors du processus de développement. Il est essentiel de vérifier la cohérence de la conception et de la mise en forme de vos pages. Donnez aux pages Web du site une apparence similaire, un même modèle de couleurs, une même navigation, etc. Cette approche cohérente permet d'orienter vos utilisateurs et de les faire ainsi bénéficier d'une meilleure expérience.

Vous pouvez utiliser Fireworks ou Flash pour créer une maquette des pages principales de votre site Web. Les maquettes des pages représentent en général la conception de la mise en forme, les composants techniques, les motifs et la couleur, ainsi que les images graphiques ou d'autres types d'éléments.

Par exemple, il faut tenir compte du schéma suivant :



Une maquette dans Fireworks peut ressembler à ceci :



Une fois la création d'une maquette dans Fireworks terminée, vous pouvez l'exporter sous la forme d'un fichier Flash SWF. Votre travail peut ensuite être affiché par tout ordinateur exécutant Flash Player.

Didacticiel associé

Création de mises en forme de pages dans Dreamweaver

La mise en forme est l'un des aspects les plus importants de la conception Web. La mise en forme d'une page détermine la manière dont votre page s'affichera dans le navigateur, par exemple où seront placés les menus, les images et le contenu Flash. Dreamweaver propose différentes façons de créer et de contrôler la mise en forme de vos pages Web.

Une méthode courante pour créer une mise en forme est de positionner les éléments en utilisant des tableaux HTML. Un tableau comprend au moins une ligne ; chaque ligne comporte au moins une cellule. Les tableaux sont très utiles pour présenter des données tabulaires et mettre en forme du texte et des images dans une page Web.

La mise en forme d'une page créée dans Dreamweaver à l'aide de tableau peut ressembler à ceci :



Pour mettre en forme des pages dans Dreamweaver, vous pouvez également placer des éléments à l'aide des feuilles de style en cascade (CSS). Cette méthode est de plus en plus utilisée car elle offre un meilleur contrôle et une plus grande flexibilité que les tableaux. Si vous savez correctement vous servir des feuilles de style en cascade (CSS), vous pouvez utiliser les balises <div> pour créer des blocs de mise en forme de CSS, puis placer ces blocs sur la page à l'aide des styles.

Didacticiel associé


 

M'envoyer un message électronique lorsque des commentaires sont ajoutés à cette page | Rapport de commentaire

Page en cours: http://livedocs.adobe.com/studio/8_fr/exploring/04_work5.htm