1. Conception d’une arborescence
3. Conception graphique des pages types
4. Organisation des dossiers et fichiers sur votre ordinateurs
5. Première page : préparation
6. Préparation des éléments (image d’un pixel) avec Photoshop
7. Insertion et parametrage d’un tableau squelette dans Dreamweaver
9. Création de tableau avec insertion des éléments
10. Première page : Le sous-menu
11. Première page : Le cadre du contenu
13. Première page : Le contenu
15. Première page : Création des styles et des liens
17. Création d’un style pour les liens du site
18. Personnalisation pour un style de lien
[hidepost]
1 Conception d’une arboresence
Pour la première étape de création de site vous devez concevoir un schéma pour la hiérachie, le nombre et l’accesibilité des rubriques
Voir la définition simple d’une arboresence2 Dimensions et résolutions
Pour la conception d’un site il est très important de définir le format ou la dimension du site.
3 Conception graphique de pages types
Dans la conception graphique d’un site on définit l’aspect visuel pour les pages principales
4 Organisation des dossiers et fichiers sur votre ordinateurs
Définition de l’espace de travail pour dreamweaver
Avant de passer à l’éxécution dans Dreamweaver, créez les dossiers qui permettront de ranger et classer les éléments qui feront partie du site
5 Première page : préparation
Construction d’un tableau de base dans Dreamweaver
Afin de reproduire votre mise en page dans une page Internet vous allez vous servir des tableaux.
Dans cet exemple, on vous montre comment insérer le premier tableau qui va permettre de centrer le contenu.
6 Préparation des éléments (image d’un pixel) avec Photoshop
L’espacement des éléments est assez délicat à obtenir dans une page Internet, surtout dans le cas de la hauteur. Pour cela, créez dans Photoshop une image d’un pixel sur un pixel. Cet image doit avoir un fond transparent et être enregistrée au format gif. Le pixel transparent servira à forcer les espacement entre les éléments de la page, on pourra lui attribuer la dimension souahitée dans Dreamweaver.
7 Insertion et parametrage d’un tableau squelette dans Dreamweaver
Dans cet étape vous allez construire à l’intérieur du tableau de base un nouveau tableau (squelette). Le squelette défini l’espace et l’emplacement des différents parties (menu, contenu, sous-menu) de la page.
8 Première page : Le menu
Préparation des éléments dans Photoshop
Dans photoshop vous allez vous servir de l’outil "tranches" et "sélection de tranches" afin de définir et enregistrer dans votre dossier "image", les éléments qui vont faire partie de votre menu. Ensuite vous enregistrez ces tranches pour le web.
9 Création de tableau avec insertion des éléments
Vous allez créer des tableaus avec plusieurs colonnes qui contiendront les images que vous avez crée.
10 Première page : Le sous-menu
Création de tableau et remplissage des colonnes.
Dans dreamweaver vous allez insérer un tableau et remplir chaque colonne avec le texte du sous-menu.
11 Première page : Le cadre du contenu
Préparation des éléments dans Photoshop. Pour la création du fond vous outilisez l’outil tranches dans photoshop pour découper les quatres angles et une partie de l’ombre porté de chaque coté
12 Création de tableau pour le fond avec insertion des éléments et utilisation d’une feuille de style (CSS)
Dans cet étape vous allez créer un tableau qui servira pour le fond. Ensuite vous allez insérer les images que vous avez enregistré avant et créer des styles.
13 Première page : Le contenu
Préparation des éléments dans Photoshop
Avant de créer le tableau pour le contenu en dessus du fond vous enregistrez les éléments graphiques dans photoshop pour le web.
14 Création de tableau pour le contenu et insertion des éléments, utilisation de la feuille de style (CSS)
Dans cet étape vous créer le tableau pour le contenu. Ensuite vous insérer le contenu dans chaque cellule et vous allez créer des styles
15 Première page : Création des styles et des liens
Créations de styles
Pour la mise en forme du texte (couleur, graisse…) vous allez créer et attribuer des styles (CSS)
16 Attribution des liens
Dans cet étape vous allez créer les autres pages et attribuer les liens vers lequel les boutons vont pointer
17 Création d’un style pour les liens du site
Pour la mise en forme des liens textes vous allez créer et attribuer des styles (CSS)
18 Personnalisation pour un style de lien
Il est possible de créer un styles personnaliser pour un les liens afin de les différencier par exemple du menu et ceux du sous-menu.