Commet créer un site Web avec Dreamweaver? partie 1 : Le squelette

05/11/2013 3 commentaires


dreamweaver le squelette d'un site web


Doc, J'ai ouvert le logiciel Dreamweaver, mais je ne sais pas par où commencer pour créer un site web! Comment débuter un site web dans Dreamweaver?



Pas de panique mon petit Marty! Après avoir fermer le fenêtre d'accueil de Dreamweaver, voici la marche à suivre pour faire le squelette de ton site... Suis moi bien!



Partie 1 : Le SQUELETTE
1) - Dans le menu, clic sur Site > Nouveau Site, Inscris le nom de ton site et indiques son dossier de destination.

2) - Dans le panneau Fichiers (Fenêtre>Fichiers), organise ton futur organigramme avec d'abord un fichier "index.html" (clic droit > Nouveau fichier). Puis, un dossier css (clic droit > Nouveau dossier) avec à l'intérieur un fichier "feuille.css".
- Crée aussi un dossier image  à la racine du site qui servira aux images de décoration du site (qui ne changent pas donc).
- Et enfin, crée pour chaque page du site, un dossier bien nommé avec sa feuille .html à l'intérieur et un dossier image correspondant aux futures images de la page.

3) - On va lier tout de suite chaque page .html au fichier "feuille.css". Ouvres une page html et clic sur l'icône en forme de chaine du panneau Styles CSS. Une fenêtre "Ajouter une feuille de style externe" apparait, recherche le fichier "feuille.css" et coches le bouton Lien et OK.
- Faire la même chose pour chaque page.

4) - On édite dès le départ le fichier "feuille.css" comme suit :

Dans le panneau Styles CSS, clic sur l'îcone "Nouvelle règle de CSS"
choisis Type de sélecteur > Balise, Nom du sélecteur> * (caractère étoile), OK. Dans la fenêtre de définition des règles, choisis Boîte > Padding = 0 et Magin =0. Ce qui permet de mettre toutes les balises à zéro et de partir sur de bonnes bases.

5) - La balise "body" est a éditer aussi. Dans le panneau Styles CSS>Nouvelle règle de CSS>Type de sélecteur>Balise>Nom du sélecteur>Body. Puis dans la fenêtre de définition des règles, Type>Font-family (avec la famille de police à utiliser). Arrière-plan>Background-color (la couleur de fond). Et surtout Boîte > Padding (pour établir une marge intérieure à notre site pour qu'il ne colle pas la fenêtre de navigation en haut (Top) et surtout en bas (Bottom).

6) - On édite aussi tout de suite une classe pour supprimer les bordures de décoration sur les images lorsque celles-ci servent de lien. Ce qui est très gênant. Dans le panneau Styles CSS >Nouvelle règle de CSS>Type de sélecteur>Composé>Nom du sélecteur> a img. Puis dans la fenêtre de définition des règles, Bordure>Width>0 px.

7) - Dans le fichier index.html, dans la partie création, entre les balises <body> et </body>, écris les mots "tetiere", "corps"et "pied" à la suite l'un en dessous de l'autre en appuyant sur Enter, afin de créer 3 paragraphes avec la balise <p>. On sélectionne le tout et on crée la div "conteneur" en cliquant sur l'icône "Insérer la balise Div" du panneau Insertion. Puis pour l' ID, tapes : "conteneur", et OK.
 8) - Crée une div pour chaque paragraphe, afin d'avoir au final 3 div à l'intérieur de la div "conteneur". Le squelette est ainsi terminé!

Attention! Je rappelle qu'il est formellement interdit d'utiliser des majuscules ou des caractères accentués pour tous les noms de vos dossiers et fichiers. 


Mmm. J'y comprends trop rien à tout ce charabia Doc... Vous n'auriez pas une version de votre exposé en plus clair?



 J'ai tout prévu Marty ! J'ai réalisé pour toi un tuto-vidéo qui reprend parfaitement l'ensemble de mon exposé ! Tu n'auras plus qu'à te laisser guider !


Dans le kit Comment  créer un site Web avec Dreamweaver? Partie 1 : Le squelette.

tu trouveras :


- 1 tuto-vidéo "pas à pas" qui te guidera dans toute l'élaboration d'un site WEb de A à Z. Par le commencement : Partie 1 : le squelete



L'accès à ce kit est cependant réservé aux membres bienfaiteurs.
Nous vous invitons à faire un don à la fondation du Doc pour la survie du site "Vite une solution doc!" à l'aide du bouton de paiement Paypal.
Ce simple geste d'encouragement servira à la gestion du site par le Doc et à son amélioration constante.
Partager cet article :

+ commentaires + 3 commentaires

Anonyme
25/1/13

j'ai fait un don à la fondation du Doc, pas eu le kit en retour.

25/1/13

Ma fondation de te remercie. Grâce à toi, je vais pouvoir finalisé mes recherches sur le presse-purée. Le lien du kit vient de t'être envoyé. Merci!!

Anonyme
9/6/15

J'ai bien eu le kit !

Enregistrer un commentaire

 
Support : Neoproject Website | WTH! Template | @ Template
Copyright © 1985-1955-2015-1885. Vite une solution Doc ! -Tous droits réservés
Template Modifié par Neoproject Website | Publié par @ Template
Propulsé par Blogger