Tncul

Disponible uniquement sur Etudier
  • Pages : 13 (3041 mots )
  • Téléchargement(s) : 0
  • Publié le : 17 novembre 2011
Lire le document complet
Aperçu du document
Création d’un site Internet avec Dreamweaver Tutoriel
Grâce à ce tutoriel, vous allez apprendre à concevoir, créer et gérer des pages et des sites Web, sans écrire de code HTML vous-même, grâce au logiciel Macromedia Dreamweaver. Pour apprendre à utiliser le logiciel, je vous propose de créer un site Internet, dont le « look » et le contenu évolueront au fur et à mesure des séances. Le sujet estlibre, mais la structure du site est imposée : votre site contiendra une page d’accueil qui permettra, à l’aide d’un menu, d’accéder à au moins trois autres pages. Votre site aura donc la structure suivante : index.html

Page_1.html .html

Page_2.html

Page_3.html .html

I. Conception du site / maquette papier
Cette première étape consiste à concevoir votre site Internet et à réaliser lamaquette papier de votre site. Pour ce faire, référez-vous au support de cours (. I. Conception d’un site Internet dans le support de cours). Dans ce tutoriel, je vais vous expliquer comment réaliser un site exemple (que j’appellerai site_prof) dont les pages ont la structure interne suivante :

IUT de Tours – DUT TC 2 – 2011/2012 Informatique – Sabine Barrat

Chaque page de site_prof seraconstituée de trois parties principales : - l’en-tête de 800 x 90 pixels contenant le logo - la partie centrale de 800 x 500 pixels comprenant elle-même une partie navigation (le menu) de 140 x 500 et le corps de la page (le contenu) de 660 x 50 - le pied de page de 800 x 24 pixels!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ATTENTION : site_prof n’est qu’un exemple destiné à vous montrer comment utiliser Dreamweaver. Commencez par utiliser ce tutoriel afin de réaliser une copie de site_prof. Une fois le logiciel partiellement maîtrisé, vous pourrez passer à l’élaboration de votre site, qui différera de site_prof, de par sa structure interne, son nom, sa mise en forme, etc.!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

II. Réalisation du site avec le logiciel Dreamweaver
1. Préparation des fichiers
Avant même d’ouvrir le logiciel Dreamweaver, commencez par créer les fichiers dont vous aurez besoin (images ou autres) avec le logiciel graphique de votre choix (paint, photoshop, etc). Vous pouvez aussi télécharger des images (sielles sont libres de droit). Pour ce tutoriel, je n'ai préparé qu'une seule image (logo.jpg), qui sera le logo du site, aux dimensions spécifiées dans la maquette papier, soit 800 x 90 pixels :

2. Mise en route
Ouvrez Dreamweaver (menu Démarrer  Tous les programmes  Adobe Dreamweaver CS3 ou menu Démarrer  Rechercher « dream »). Dans le menu de DW, cliquez sur Site  Nouveau site. Saisissez lenom de votre site (j’ai choisi le nom « site_prof »). Faites « suivant » deux fois. Saisissez le chemin du répertoire de stockage. Faites « suivant ». A la question « comment vous connectez-vous au serveur distant ? », répondez « aucun ». Faites « suivant » puis « terminé ». Cette étape peut également se faire en cliquant sur Site  Gérer les sites (dans le menu en haut ou dans la partie droitedu logiciel qui fournit un explorateur de fichiers).

IUT de Tours – DUT TC 2 – 2011/2012 Informatique – Sabine Barrat

A l’issue de cette étape, vous devriez avoir cet écran :

3. Création de la page d’accueil
Dans l’explorateur de fichiers de Dreamweaver, faire un clic droit sur la racine de votre site dans l'explorateur de fichier de Dreamweaver (pour moi, « Site – site_prof ») etchoisissez Nouveau  Fichier. Une page sans nom est créée. Nommez la page index.html. De même, faire un clic droit sur « Site – site_prof » et faites « Nouveau dossier ». Appelez le dossier « Images ». Copier « logo.jpg » dans ce dossier. Dans l'explorateur de fichiers le nouvel élément apparaît :

Remarque : les créations de fichiers et de dossiers peuvent aussi être faites à partir du menu en haut...
tracking img