I. Définition du site

Dimension: px

Commencer à balayer dès la page:

Download "I. Définition du site"

Michelle Larocque
il y a 8 ans
Total affichages :

1 I. Définition du site Utilisation de Dreamweaver La création du site ne devrait se faire qu'une seule fois. En effet, sur un ordinateur personnel, cette définition est enregistrée dans le profil de l'utilisateur (concrètement, un emplacement où sont inscrits ses préférences, les favoris de son navigateur, l'apparence de son bureau, etc ). A l'iep, le profil est effacé chaque fois qu'un étudiant ferme sa session, afin de ne pas saturer l'espace disponible sur le serveur. Ceci rend obligatoire la définition du site à chaque séance de travail. Pour définir un site, deux solutions : Utiliser le panneau "Site" et activer le menu Site/Nouveau site Utiliser dans la barre de menu, le menu "site" et activer l'article "Nouveau site". Dans les deux cas, l'action aboutit au même résultat, à savoir l'apparition du panneau permettant de définir le site. Institut d'etudes Politiques Page 1

l'apparence de son bureau, etc ). A l'iep, le profil est effacé chaque fois qu'un étudiant ferme sa session, afin de ne pas saturer l'espace disponible sur le serveur.

2 Par défaut, le panneau est dans la version "assistant". Ceci est trop rudimentaire et ne permet pas de prendre en compte certains paramètres. Mieux vaut cliquer sur l'onglet "avancé". cliquer ici Le nom du site n'a une importance que sur un ordinateur personnel (pour retrouver la définition à la prochaine séance de travail), pas à l'iep. Il faut commencer par renseigner les informations locales. Celles-ci concernent l'emplacement du dossier contenant le site sur le disque dur de l'utilisateur. A l'iep, il faut le mettre dans votre répertoire personnel, dans un sous-dossier créé à cet effet. cliquer et naviguer pour indiquer l'emplacement du dossier du site. Cette étape est importante, car un site est une collection de fichiers situés dans un même dossier. Une mauvaise définition de l'emplacement de ce dossier sur le disque local entraînera une implémentation défectueuse des liens entre fichiers. Si vous avez vos paramètres de connexion, fournis par votre hébergeur, vous pouvez également renseigner les informations distantes afin de procéder à la mise en ligne de vos fichiers (voir plus loin). Institut d'etudes Politiques Page 2

Il faut commencer par renseigner les informations locales. Celles-ci concernent l'emplacement du dossier contenant le site sur le disque dur de l'utilisateur.

3 II. Création de fichiers. Si l'emplacement local du site est correctement défini, la façon la plus "sûre" (càd au bon emplacement) de créer un fichier est la suivante : Cliquer avec le bouton droit de la souris sur le dossier racine du site, dans le panneau Site. Dans le menu contextuel, choisir "Nouveau fichier". Dans le panneau Site, le fichier créé apparaît sous le nom provisoire "untitled.htm". Si c'est la page d'accueil (la première à être vue par l'internaute) la convention est de la nommer "index.html". Pour cela, il faut saisir le nom du fichier immédiatement. Enfin, appuyer sur la touche "entrée" après avoir saisi le nom du fichier, ou double-clic sur son nom dans le panneau "site". Ceci va ouvrir le fichier dans l'espace de travail et permettre de le modifier. Institut d'etudes Politiques Page 3

racine du site, dans le panneau Site. Dans le menu contextuel, choisir "Nouveau fichier". Dans le panneau Site, le fichier créé apparaît sous le nom provisoire "untitled.htm".

4 Nom du fichier titre de la page HTML (tag <title>. Penser à renseigner correctement ce tag. III. Feuille CSS. La mise en place d'une feuille CSS (cascading style sheet) est le moyen le plus rationnel d'obtenir une charte graphique homogène et facilement modifiable. L'idée est de stocker les définitions de mise en forme du texte dans un emplacement unique, un fichier particulier. Son extension est obligatoirement.css et son nom doit être conforme aux standards de nommage ISO (pas de caractère spécial, éviter les espaces, etc ). A. Création de la feuille Panneau "création", onglet "styles CSS" 1 cliquer sur le bouton "Attacher une feuille de style" 2 Taper un nom valide, par exemple : "stylespierre.css" Institut d'etudes Politiques Page 4

L'idée est de stocker les définitions de mise en forme du texte dans un emplacement unique, un fichier particulier. Son extension est obligatoirement.

5 3 - A la question reproduite à gauche, il faut bien entendu répondre "Oui". La feuille est maintenant crée, il faut commencer à définir des styles. B. Création des styles Le plus simple est de redéfinir la mise en forme des balises HTML standards. Commençons par le style de plus haut niveau, celui de la balise <BODY>. 1 Cliquez sur le bouton "Nouveau Style CSS" 2 Vérifiez que le nom de fichier de la feuille soit bien celui que vous venez de créer 3 Choisissez le bouton-radio "Redéfinir la balise HTML" 4 Sélectionnez la balise "body" dans la liste déroulante Les différentes rubriques de la boîte de création de style permettent de paramétrer l'aspect de la page et du style par défaut : Institut d'etudes Politiques Page 5

1 Cliquez sur le bouton "Nouveau Style CSS" 2 Vérifiez que le nom de fichier de la feuille soit bien celui que vous venez de créer 3 Choisissez le bouton-radio "Redéfinir la balise

6 En cliquant sur "appliquer", on peut voir les modifications se répercuter dans la fenêtre de création. C. Modification d'un style existant 1 Cliquer sur "Modifier les styles" dans le panneau des Styles CSS. 2 Double-clic sur le style que vous désirez modifier D. Réutilisation d'une feuille de style Après avoir créé un nouveau fichier (par exemple "etudes.htm") selon la procédure vue au premier chapitre, vous désirez utiliser la même feuille de style. Institut d'etudes Politiques Page 6

2 Double-clic sur le style que vous désirez modifier D.

7 1 cliquer sur le bouton "Attacher une feuille de style" 2 cliquer sur "parcourir" (cette fois, le fichier existe déjà) 3 sélectionner le fichier correspondant à votre feuille CSS. 4 Valider en cliquant sur OK, etc Au point de vue du HTML, ceci insère une ligne dans la partie <HEAD> de la oage : <link href="stylespierre.css" rel="stylesheet" type="text/css"> Au chargement de la page, le navigateur va devoir charger également le fichier "stylespierre.css", et présenter la page à l'internaute selon les spécifications indiquées dans la feuille. Cette composition est parfois visible à l'écran. IV. Mise en ligne des fichiers. Pour mettre en ligne vos fichiers, vous devez revenir à la définition du site. Pour cela, plusieurs actions sont possibles : Double-clic sur le nom du site dans le panneau "Site". OU, Menu Site/Modifier les sites, choisir votre site dans la liste. On obtient la boîte vue au chapitre 1. Choisir "informations distantes". Institut d'etudes Politiques Page 7

css" rel="stylesheet" type="text/css"> Au chargement de la page, le navigateur va devoir charger également le fichier "stylespierre.

8 1 Choisir Accès : "FTP" (file transfer protocol) 2 "Host Name" : c'est le nom de domaine du serveur web de votre hébergeur. 3 Votre login 6 Faire un test 4 Votre mot de passe. 5 si vous êtes derrière un Firewall, donner son IP. 7 Valider Pour mettre en ligne, il faut vous connecter : 1 - connexion 2 afficher la fenêtre FTP Enfin, vous pouvez transférer vos fichiers à partir du gestionnaire FTP de Dreamweaver. Institut d'etudes Politiques Page 8

5 si vous êtes derrière un Firewall, donner son IP.

9 1 sélectionner les fichiers à transférer 2 "Glisser déposer" Si tout se passe bien, les noms de fichier apparaissent à gauche, dans la partie concernant les fichiers en ligne chez votre hébergeur. C'est en fait un gestionnaire de fichiers classique, permettant de renommer, détruire, copier des fichiers, de créer, copier, renommer et détruire des répertoires, avec la particularité de travailler sur deux ordinateurs : le votre et celui de votre hébergeur. Fichiers distants, sur le disque de l'ordinateur de votre hébergeur. Fichiers locaux, sur le disque dur de votre machine Institut d'etudes Politiques Page 9

C'est en fait un gestionnaire de fichiers classique, permettant de renommer, détruire, copier des fichiers, de créer, copier, renommer et détruire des

Documents pareils

Transfert de fichiers (ftp) avec dreamweaver cs5 hébergement et nom de domaine. MC Benveniste

Transfert de fichiers (ftp) avec dreamweaver cs5 hébergement et nom de domaine MC Benveniste 2013 Configuration Vous devez au préalable avoir un hébergeur, qui vous aura fourni les codes ftp, le log-in