lundi 28 novembre 2011

Comment créer un site avec Dreamweaver? Partie n°1: Le squelette

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







Pas de panique mon petit Guy! 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!

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.

1 commentaires:

merci pour ses information, je peut savoir s'il y a des logiciels simples pour la création des sites web ?

Enregistrer un commentaire