Hébergement Internet évolutif
coinhg bord coinhd
 
panel  Espace Client
Compte
Mot de passe
arrow Oublié ?
arrow Créer un compte
 
coinbg bord coinbd
coinhg bord coinhd
 
panel  Newsletter
   
  Inscription
Désinscription
 
 
coinbg bord coinbd
coinhg2 bord coinhd2
 
news  News
14/03/2007
Encore et toujours des nouveautés et promotions sur Jexiste pour ce
mois de mars 2007 !


* Paiement p ...
 news
 
coinbg2 bord coinbd2
>FAQ > Création de sites > Dreamweaver

Aide technique
FAQ (questions fréquentes)
    Compte
    Noms de domaine
    Statistiques
    Technique
    E-Mail
    Services supplémentaires
FAQ (questions fréquentes) classée par categorie
Les Dossiers - Création de sites
Les Dossiers - Le droit & internet
Gagner de l'argent avec son site - Les regies
Les générateurs
Aide graphique
imode





Aperçu de Dreamweaver 4.


Voici un aperçu de l'interface de Dreamweaver 4 lors de son premier lancement.

 

1 : Page web vierge.
2 : Fenêtre d'objets.
3 : Fenêtre active du site en cours.
4 : Fenêtre de style et de comportements ( html, CSS, et comportements )
5 : Fenêtre d'historique ( les choses faites, les calques et les cadres )
6 : Fenêtre de sénari ( gestion de temps lors d'animation d'images )
7 : Fenêtre de propriétés.
8 : Fenêtre de lancement (pas très utile)


En premier lieu, fermez toutes les fenêtres sauf la page web vierge (1) et la fenêtre de propriétés (7)


Définition du site en cours.

Nous allons ici, définir le site en cours de création.
Pour cela, rien de plus simple. Depuis la page blanche (1), faites depuis le menu " Fenêtre, Fichier du site " ou simplement F8 sur le clavier.

 

Entrez le nom de votre site, et cliquez sur le dossier jaune pour indiquer à Dreamweaver où se trouve le dossier de votre site.
Validez le tout en cliquant sur OK.

Vous avez sous les yeux, la fenêtre " Principale " (fenêtre en arrière plan) de Dreamweaver où seront affichées toutes les pages, autres fichiers et dossiers contenant votre site.


Les propriétés de la page web.

Avant toutes choses, nous vous conseillons de créer deux dossiers bien précis, qui vous simplifieront les choses, notamment les mises à jour de votre site.
Dans le dossier " Mon Site " que vous aurez créé, vous allez créer un dossier " html " ou " pages " bref, un nom simple et un autre dossier " images " par exemple....
Vous devez donc voir apparaître dans la fenêtre principale de Dreamweaver :
Petit détail, nous vous conseillons de TOUJOURS utiliser des minuscules pour le nom de vos pages, images ou autres éléments de votre site.


Pour cela, clic droit de la souris sur le dossier " html " et sélectionnez dans le menu, NOUVEAU FICHIER et nommez la page en index.htm

Une fois cette page créée, double clic dessus pour charger la page.
Cliquez ensuite avec le bouton droit de la souris sur la page blanche et sélectionnez " Propriétés de la page "

Explication de la fenêtre

1 : Permet de donner un nom à la page
2 : Permet de mettre une image en arrière plan sur la page
3 : Définit la couleur de fond de la page
4 : Définit la couleur du texte sur la page
5 : Définit la couleur des liens sur la page
6 : Définit la couleur des liens déjà visités sur la page
7 : Définit la couleur d'un lien actif
8 : Définit l'espace à gauche sur la page
9 : Définit l'espace en haut sur la page
10 : Définit la taille de la marge
11 : Définit la hauteur de la marge
12 : Définit le codage de la page (suivant le pays)
13 : Permet de mettre une image en fond sur la marge
14 : Permet une transparence de l'image dans la marge


Faites les modifications dans cette fenêtre puis " Appliquez " pour valider les modifications.


Ma première page.

Nous allons créer notre première page.
Créez une nouvelle page et changez lui ses propriétés (voir la page précédente)

Vous avez maintenant votre page avec son nom, ainsi que la couleur ou l'image pour le fond.
En haut de la page, tapez du texte.....

Plus bas, vous allez simplement insérer un tableau (depuis le menu insertion/tableau) ou Ctrl+Alt+T
Choisissez une ligne, deux colonnes, 500 pixels pour la largeur et mettez des zéros au reste des " cases "

Cliquez dans la " cellule " de gauche de votre tableau, placez une image (Insertion/image depuis le menu)

Dans la " cellule " de droite, ajoutez simplement un petit texte qui définit cette image....

Le résultat sera :

Logo du site ....
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Nous reviendrons plus tard sur les possibilités des tableaux et des cellules.

Ajoutez du texte plus bas, et enregistrez votre page sous le nom
" page1.htm "

Nous allons maintenant créer un simple lien texte.
Créez une nouvelle page ex : page2.htm et mettez-y du contenu
Enregistrez votre page2.htm et fermez-la.
Ouvrez ensuite votre " page1.htm " et sous le texte que vous avez ajouté, écrivez simplement ceci :
Page2
Sélectionnez ce '" Page2 " avec votre souris.

Depuis la fenêtre de propriétés, cliquez simplement sur le petit dossier jaune et sélectionnez votre page " page2.htm" et comme Cible mettez _Self
Faites " F12 " sur votre clavier pour créer un aperçu comme si la page se trouvait sur internet, et cliquez simplement sur le lien que vous venez de créer.
Vous devriez voir la page2.htm s'ouvrir et remplacer la " page1.htm "

Nous allons voir maintenant plus en détails la " petite " fenêtre de propriétés.
Pour cela, double clic sur une surface grise de cette petite fenêtre.


1 : Format de l'espace entre les lignes
2 : Permet de choisir la police pour le texte sélectionné
3 : Permet de choisir la taille de la police pour le texte sélectionné
4 : Permet de choisir la couleur du texte sélectionné
5 : Ensemble d'outils d'alignement (B= police Gras, I = police Italique)
6 : Cellule d'adresse URL (définit l'emplacement où se trouvent les pages pour faire le lien)
7 : Cible (destination de la page à ouvrir)


Explicatif des différentes " Cibles " les plus utilisées pour les liens.
_blank : permet de faire ouvrir la page dans une autre fenêtre.
_self : permet de faire ouvrir la page dans la même fenêtre.

Mais vous pouvez, pour les utilisateurs de frames par exemple, donner en cible, le nom de la partie de votre page index où vous voulez que la page s'affiche.

Cliquez sur le bouton " Précédent " de votre navigateur pour passer à l'étape suivante.


Les frames.

Nous allons voir ici comment créer des frames avec Dreamweaver.
Avant toute chose, il y a certains points à savoir sur les frames.
Un index en frame est simplement une page coupée en plusieurs parties et chacune de celle-ci est une page différente de la page index.

Exemple :


Vous constatez donc que la page index ici (en frame) est simplement une page découpée en plusieurs parties et que chaque partie utilise une page bien précise.
C'est un moyen très simple pour la gestion d'un site, mais il faut savoir aussi que les moteurs de recherche et autres annuaires référencent mal voir même très mal les sites internet fait en frames.

Nous allons toutes fois vous montrer sur cette page comment faire des frames avec Dreamweaver.

Ouvrez une nouvelle page, et donnez lui les propriétés que vous souhaitez (couleur de fond, couleur de lien, nom de page)

Ensuite, depuis le menu, faites simplement :
Insertion/Cadres/et sélectionnez la partie que vous souhaitez fractionner :

 

Cliquez ensuite dans vos cadres (Alt + clic souris)
Vous remarquerez que la fenêtre de propriétés change complètement :

Aperçu de la fenêtre de propriétés.


Explicatif :
Cadre : le nom du cadre en question (haut pour la partie haut, bas pour la partie bas etc etc....
Vous pouvez changer le nom du " cadre " pour vous simplifier les choses, il faut aussi savoir que ce nom vous sera utile lors de la destination (Cible) de votre lien.
Ex : la partie centrale de votre index s'appelle (cadre) centre, la cible de votre lien si vous voulez donc afficher la page dans cette partie centrale sera " _centre "

Src : Cette partie indique simplement l'endroit où se trouve la page (par exemple la page haut pour la partie haut)
Bordures : indiquez simplement si vous voulez une bordure ou non à votre " frame "
Défiler : indiquez si vous voulez une barre d'ascenseur ou non pour la partie du cadre sélectionné.

Répétez toutes ces opérations pour toutes les parties des cadres de cette page.

Attention, la page contenant les " frames " (cadre haut, cadre gauche, cadre centre) devra obligatoirement s'appeler index.


Tableaux et céllules.

Nous allons voir ici, un explicatif plus poussé et bien plus complet sur les tableaux et les cellules ainsi que leur utilisation.

Créez simplement un tableau d'une ligne et de 3 colonnes, de 250 pixels de long.
Cliquez ensuite SUR le tableau, vous remarquerez que la fenêtre de propriétés change.


1 : Permet de donner un nom au tableau
2 : Définit le nombre de lignes du tableau
3 : Définit le nombre de colonnes du tableau
4 : Définit la longueur du tableau
5 : Définit la largeur du tableau
6 : Mesure du tableau en pixels ou en pourcentage
7 : Permet de définir le remplissage d'une cellule
8 : Permet l'alignement du tableau sur la page
9 : Permet de définir l'espace entre les cellules
10 : Définit l'épaisseur de la bordure du tableau et des cellules
11 : Permet de donner une couleur de fond au tableau
12 : Permet de donner une couleur au contour du tableau
13 : Permet d'utiliser une image de fond pour le tableau


Nous avons donc modifié notre " tableau " en lui définissant:
Remplissage 1, Espace entre cellules 1, Bordure 0, Alignement centrer, et couleur de l'arrière plan noir.
Pour donner une autre couleur à chaque cellule, rien de plus simple.

Vous remarquerez que votre tableau est devenu tout noir.
Cliquez simplement DANS le tableau, dans la cellule de votre choix, et sur la fenêtre de propriétés, (Ar-pl) choisissez une couleur.

     


Vous pouvez aussi changer l'alignement du texte si vous décidez d'écrire dans les cellules, cliquez pour cela dans la cellule et changez les propriétés Horiz et Vert.
Vous pouvez aussi définir la taille d'une cellule en pixels ou en pourcentage.


Petite astuce, pour avoir une simple bordure autour d'un tableau contenant plusieurs lignes et colonnes : créez auparavant un tableau d'une ligne et d'une colonne avec les propriétés Remplissage 1, Espace cellule 1, bordure 0, attribuez-lui la couleur souhaitée, cliquez simplement DANS le tableau et donnez-lui la couleur de fond de votre page, vous pourrez ensuite y placer un tableau de plusieurs colonnes et de plusieurs lignes sans pour autant que cela se voit.

Tableaux et céllules 2.

Nous allons voir ici, comment fusionner plusieurs cellules d'un tableau afin d'obtenir la disposition voulue.
Commencez par créer un tableau de 4 lignes, 5 colonnes et 100% de long.

Cliquez maintenant dans la première cellule et tout en maintenant le bouton gauche de la souris enfoncé, sélectionnez en tout les 4 premières cellules, lâchez le bouton.
Clic bouton de droite DANS une des cellules sélectionnées puis faites :
Tableau/Fusionner les cellules.
Vous remarquerez que les 4 cellules se sont simplement transformées en une seule cellule.

Vous êtes maintenant capable de fusionner des cellules et de les modifier (couleur, alignement etc. etc.)

Cette fonction est souvent très utile et vous permettra, par exemple, d'avoir dans un tableau de deux colonnes, une image dans une cellule unique et plusieurs lignes dans la cellule à côté.


Les calques.

Vous avez été nombreux à nous poser des questions sur les calques utilisés avec Dreamweaver.
Il faut savoir avant tout que la compatibilité des navigateurs n'est pas égale à l'utilisation de ces calques.
Par exemple, il faut savoir que Netscape n'interprète pas de la même façon les valeurs hauteur et largeur des calques.
Il faut savoir aussi que suivant les résolutions d'écran, l'emplacement des calques varie souvent à l'affichage de la page.

Si toutefois vous désirez quand même utiliser des calques, nous allons vous donner quelques " trucs " pour la bonne utilisation.
En premier lieu, pour ce qui est de l'alignement des calques et pour une compatibilité entre les résolutions, nous vous conseillons fortement d'exploiter le " pourcentage " pour les alignements des calques et non les valeurs pixels.


1 : Permet de donner un nom au claque
2 : Permet de définir l'emplacement horizontal
3 : Permet de définir l'alignement vertical
4 : Permet de définir la longueur du calque
5 : Permet de définir la largeur du calque
6 : Défini un ordre quand il y a plusieurs calques
7 : Choix de l'affichage du calque (visible ou non)
8 : Permet de mettre une image de fond au calque
9 : Permet de donner une couleur de fond au calque
10 : Permet d'indiquer le style de balise pour le calque
11 : Permet de choisir le mode d'affichage du calque
12 : Permet l'affichage de l'image de fond (taille....)


Vous avez aussi la possibilité d'utiliser la fenêtre des calques pour empêcher le chevauchement des calques ou encore pour simplement gérer leur ordre d'affichage (F2)