Structuration et organisation d'une page
BlueCoffee
Messages postés
25
Date d'inscription
Statut
Membre
Dernière intervention
-
inspiring Messages postés 1813 Date d'inscription Statut Membre Dernière intervention -
inspiring Messages postés 1813 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je fais des sites depuis quelques temps, mais ils sont très amateur et brouillon dans leur conception, j'aimerais travailler de façon plus propre et mieux structurer mes pages.
C'est pourquoi avant d'attaquer mon prochain site, j'aimerais des conseils, peut être basiques, sur la meilleure façon d'organiser ma page.
Voici un schéma du site : http://img163.imageshack.us/img163/6079/maqi.jpg
* En bleue : le menu.
* En vert : le contenu avec un peu de tout en fonction des pages.
* En rouge : un petit espace à droite qui contiendra un module facebook, des images, du texte.
Il y a beaucoup de solutions, quelqu'un pourrait il me proposer ce qui lui semble être la meilleure méthode ?
Je fais des sites depuis quelques temps, mais ils sont très amateur et brouillon dans leur conception, j'aimerais travailler de façon plus propre et mieux structurer mes pages.
C'est pourquoi avant d'attaquer mon prochain site, j'aimerais des conseils, peut être basiques, sur la meilleure façon d'organiser ma page.
Voici un schéma du site : http://img163.imageshack.us/img163/6079/maqi.jpg
* En bleue : le menu.
* En vert : le contenu avec un peu de tout en fonction des pages.
* En rouge : un petit espace à droite qui contiendra un module facebook, des images, du texte.
Il y a beaucoup de solutions, quelqu'un pourrait il me proposer ce qui lui semble être la meilleure méthode ?
A voir également:
- Structuration et organisation d'une page
- Supprimer une page word - Guide
- Imprimer tableau excel sur une page - Guide
- Créer une page facebook - Guide
- Comment traduire une page - Guide
- Page d'accueil - Guide
2 réponses
salut
en header je mettrai la zone bleue
le main sera la zone verte représenté par un div en float left pour que la zone rouge puis venir se coller à côté
et la zone rouge un nav
pour le header tu peux la faire en position fixed dans le CSS, elle scrollera avec l'internaute et facilite la navigation je trouve étant donné qu'elle sera toujours présente. c'est ce que j'ai fait pour mon site, si tu veux voir le lien est en dessous.
ta maquette n'est pas complexe pour l'instant (juste les gros blocs) donc c'est bon il n'y a pas compliqué à faire :)
en header je mettrai la zone bleue
le main sera la zone verte représenté par un div en float left pour que la zone rouge puis venir se coller à côté
et la zone rouge un nav
pour le header tu peux la faire en position fixed dans le CSS, elle scrollera avec l'internaute et facilite la navigation je trouve étant donné qu'elle sera toujours présente. c'est ce que j'ai fait pour mon site, si tu veux voir le lien est en dessous.
ta maquette n'est pas complexe pour l'instant (juste les gros blocs) donc c'est bon il n'y a pas compliqué à faire :)
bonsoir,
le papier a encore sont utilité :)
Personnellement, pour préparer mes créations, j'utilise cette procédure :
Sur papier :
- j'écris, textuellement, l'ensemble des blocs (et modules donc) que je vais intégrer sur le site, classés par type de pages (la Home, blog, article, portfolio, ...)
- ensuite je prépare, toujours page par page, un zoning grossier. En fait, je dessine schématiquement ma page pour avoir un apercu visuel et affiner la taille et le placement des éléments. Et du coup, je peut visualiser les differents bloc de la structure, bien que cela finisse toujours par header+ nav + content + footer, le nombre de colonne du content dependant toujours du type de page.
- quelques coup de crayon de couleur pour un petit apercu de charte graphique
Sur ordinateur :
- je créez le zoning de chaque page sur photoshop, avec utilisation de grille. Cette étape dépend du couple PC + logiciel que tu as a ta disposition
- j'élabore la charte graphique (tjrs sous photoshop)
A cette etape, j'ai l'apparence de mes pages, le placement des blocs, le design et image
Je crée ensuite la structure globale (en <div>) page par page et y intégrant juste ce qu'il faut de css et en utilisant des couleurs de fond basique (dégradé de gris) afin de vérifier que je n'ai pas de problème dans la structure établie (en général il n'y en as pas).
j'intègre la charte graphique en css
je termine la maquette par l'intégration de texte (lorem ipsum) et d'image et crée les dernieres classes CSS necessaire
C'est bien sur un peu plus compliqué et méthodique que ça, mais voici en gros la méthode que j'utilise
le papier a encore sont utilité :)
Personnellement, pour préparer mes créations, j'utilise cette procédure :
Sur papier :
- j'écris, textuellement, l'ensemble des blocs (et modules donc) que je vais intégrer sur le site, classés par type de pages (la Home, blog, article, portfolio, ...)
- ensuite je prépare, toujours page par page, un zoning grossier. En fait, je dessine schématiquement ma page pour avoir un apercu visuel et affiner la taille et le placement des éléments. Et du coup, je peut visualiser les differents bloc de la structure, bien que cela finisse toujours par header+ nav + content + footer, le nombre de colonne du content dependant toujours du type de page.
- quelques coup de crayon de couleur pour un petit apercu de charte graphique
Sur ordinateur :
- je créez le zoning de chaque page sur photoshop, avec utilisation de grille. Cette étape dépend du couple PC + logiciel que tu as a ta disposition
- j'élabore la charte graphique (tjrs sous photoshop)
A cette etape, j'ai l'apparence de mes pages, le placement des blocs, le design et image
Je crée ensuite la structure globale (en <div>) page par page et y intégrant juste ce qu'il faut de css et en utilisant des couleurs de fond basique (dégradé de gris) afin de vérifier que je n'ai pas de problème dans la structure établie (en général il n'y en as pas).
j'intègre la charte graphique en css
je termine la maquette par l'intégration de texte (lorem ipsum) et d'image et crée les dernieres classes CSS necessaire
C'est bien sur un peu plus compliqué et méthodique que ça, mais voici en gros la méthode que j'utilise