Articles Création de Site Internet

Débuter avec Dreamweaver

13-01-11

Ce tutoriel vise à expliquer comment réaliser son premier site internet avec l’éditeur HTML CSS Dreamweaver.

Pour commencer, veuillez créer un fichier index.html pour la page d’accueil de votre site et style.css pour la mise en page. Utilisez le mode fractionné.

index.html

Dans la head de votre page, renseignez le titre du site. Dans le body du code source, créez une div par bloc (Insertion, Mise en Forme, Insérer la balise Div) et remplissez de textes, d’images et des liens hypertexte.

<!DOCTYPE html PUBLIC ″-//W3C//DTD XHTML 1.0 Transitional//EN″ ″http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd″>
<html xmlns=″http://www.w3.org/1999/xhtml″>
<head>
<meta http-equiv=″Content-Type″ content=″text/html; charset=UTF-8″ />
<title>Mon premier site internet</title>
<link href=″/styles.css″ rel=″stylesheet″ type=″text/css″ />
</head>
<body>
<div id=″page″>Contenu de la Page
<div id=″tete″>Header</div>
<div id=″tete2″>Actualité</div>
<div id=″gauche″>Gauche</div>
<div id=″centre″>Centre</div>
<div id=″droite″>Droite</div>
<div id=″pied″>Contact</div>
<div id=″pied2″>Footer</div>
</div>
</body>
</html>

style.css

Dans la feuille de style CSS, créez un style par div (Styles CSS, +), positionnez votre curseur à l’intérieur de la balise concernée pour sélectionner le titre du sélecteur.

Vous pouvez maintenant personnaliser la mise en page de chaque bloc en modifiant la règle correspondante. Dans Type indiquez la police, la taille et la couleur du texte et dans arrière-plan la couleur ou l’image de fond.

La partie Boite concerne la position et la taille des blocs:
#page

  • width = 800
  • height = 600
  • Padding 0 (idem pour tous)
  • Margin Top=0 Bottom=0 Right=auto Left=auto

#tete

  • width = 800
  • height = 100
  • Padding 0 (idem pour tous)
  • Margin Top=0 Bottom=0 Right=auto Left=auto

#tete2

  • width = 800
  • height = 20
  • Padding 0 (idem pour tous)
  • Margin Top=0 Bottom=0 Right=auto Left=auto

#gauche

  • width = 200
  • height = 560
  • Padding 0 (idem pour tous)
  • Margin Top=0 Bottom=0 Right=auto Left=auto
  • Float = left

#centre

  • width = 400
  • height = 560
  • Padding 0 (idem pour tous)
  • Margin Top=0 Bottom=0 Right=auto Left=auto
  • Float = left

#droite

  • width = 200
  • height = 560
  • Padding 0 (idem pour tous)
  • Margin Top=0 Bottom=0 Right=auto Left=auto
  • Float = right

#pied

  • width = 800
  • height = 20
  • Padding 0 (idem pour tous)
  • Margin Top=0 Bottom=0 Right=auto Left=auto

#pied2

  • width = 800
  • height = 200
  • Padding 0 (idem pour tous)
  • Margin Top=0 Bottom=0 Right=auto Left=auto

#page {

background-color: #FFF;

height: 600px;

width: 800px;

padding: 0px;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

}

#tete {

background-color: #90C;

height: 100px;

width: 800px;

padding: 0px;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

}

#tete2 {

height: 20px;

width: 800px;

padding: 0px;

margin-top: 0px;

margin-right: auto;

margin-bottom: auto;

margin-left: 0px;

background-color: #FFF;

}

#gauche {

background-color: #F0F;

padding: 0px;

float: left;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

width: 200px;

height: 560px;

}

#centre {

background-color: #F0F;

padding: 0px;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

width: 400px;

height: 560px;

float: left;

}

#droite {

background-color: #F0F;

padding: 0px;

float: right;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

width: 200px;

height: 560px;

}

#pied {

height: 20px;

width: 800px;

padding: 0px;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

}

#pied2 {

height: 200px;

width: 800px;

padding: 0px;

margin-top: 0px;

margin-right: auto;

margin-bottom: auto;

margin-left: 0px;

background-color: #0FF;

}