La création d’une page d’accueil personnelle

L’objectif du premier exercice Présentation de la page personnelle d’Eva Laudée À l’aide de votre navigateur, visualisez la page d’accueil d’Eva Laudée. Seulement les deux premières pages nous intéresse pour l’instant. Votre professeur vous indiquera comment trouver le site d’Eva (www.csdm.qc.ca/fgainf/evalaudee). Ces deux premières pages sont un exemple de ce que vous devrez faire comme premier exercice. On trouve dans ces deux pages les éléments de base d’une page Web : — Du texte; — Une image; — Une mise en forme (image à droite, titre en gras, etc.); — Des couleurs (couleur du fond et couleur du texte); — Une adresse de courriel; — Un lien vers une autre page. L’objectif du premier exercice L’objectif du premier exercice est donc de créer votre propre page d’accueil personnelle, ainsi qu’une page supplémentaire, tel qu’illustré dans les deux premières pages du site d’Eva. Dans ces pages, vous aurez la possibilité de vous présenter, de mettre une photo de vous et d’y associer votre adresse de courriel. Votre page personnelle devra contenir les éléments suivants : 1. Un texte de présentation; 2. Une image vous représentant; 3. Un travail de mise en forme des couleurs du texte; 4. Votre adresse de courriel active; 5. Un lien vers une deuxième page, où vous ferez une présentation de votre projet lorsqu’il sera défini.  La création d’une page d’accueil personnelle page 8 02.

La planification de la page

Avant de commencer, il est important d’accorder une attention particulière à la planification de la page. Dans un logiciel d’intégration comme Dreamweaver, on ne peut pas créer les éléments nécessaires à l’élaboration d’un site, et la plupart du travail de création se fait à l’extérieur de Dreamweaver. C’est pourquoi il est essentiel de bien se préparer avant de démarrer le logiciel. Nous parlerons des méthodes de travail un peu plus loin dans le processus, au moment où nous aurons à planifier le site dans son ensemble. Voir la section 08.01 du présent document (Les objectifs du projet). Voici tout de même une approche de planification simplifiée pour votre première page : Le texte de présentation Eh oui. Il faut écrire. Idéalement dans un logiciel de traitement de texte qui pourrait nous aider à ne pas faire de fautes! Inutile de faire de la mise en page maintenant. C’est un des aspects que Dreamweaver prend en charge car le HTML est très capricieux. Nous allons copier ce texte plus tard dans notre page. Vous pourrez le retravailler dans Dreamweaver si nécessaire. L’image Il nous faut aussi une image. Le format devrait être GIF (Graphic Interchange Format), JPEG (Joint Photographic Experts Group) ou bien PNG (Portable Network Graphics Format). Pour plus d’information sur les formats d’images dans Dreamweaver, veuillez consulter le document Utilisation de Dreamweaver, section Insertion d’images > Images – Présentation (p.281). Voir la section 03.01 du présent document (Le document Utilisation de Dreamweaver) pour l’utilisation de l’aide. La taille importe peu, mais pour cet exercice, votre image devrait être inférieure à 500 pixels par 300 pixels, à une résolution de 72 points par pouce. Aussi, surveillez le poids de votre image. Au-delà de 100 Ko (kilo-octets) par exemple, c’est lourd, donc plus long à télécharger pour les connexion de modems traditionnels. On peut utiliser n’importe quel logiciel de traitement d’image, tant que ce dernier peut faire une sauvegarde de l’image selon la compression voulue (GIF, JPEG ou PNG). Des logiciels comme Photoshop, Photoshop Element, Image Ready, Graphic Converter ou autre, peuvent très bien faire l’affaire. Une fois terminée, vous placerez cette image dans le dossier image de votre site local. La création d’une page d’accueil personnelle page 9 Voir la section 04 du présent document (L’interface de Dreamweaver). La mise en forme Prévoir la mise en forme est un exercice simple, qui permet de gagner du temps. Dans votre premier exercice, vous aurez à créer une grille dans laquelle vous devrez intégrer votre image et vos textes. Il s’agit de visualiser cette grille en plaçant les éléments de la page (image, texte, courriel, etc.) selon une disposition qui vous plaît. Vous pouvez faire des croquis, des dessins ou collages, etc. C’est à vous de déterminer la méthode qui vous convient. C’est un petit exercice qui peut s’avérer anodin, mais pour la planification d’un site plus complet, cela devient essentiel. L’acquisition d’une adresse de courriel Si vous avez déjà une adresse de courriel, vous êtes prêt! Sinon voilà une belle occasion de vous en procurer une. C’est très simple. Il existe sur la toile des fournisseurs de courriel gratuit tel que hotmail.com, entre autres. Suivez les consignes sur le site pour créer votre compte courriel. Après cela, nous pourrons démarrer Dreamweaver pour se familiariser avec l’interface.

La création d’une page d’accueil personnelle 02.01 L’objectif du premier exercice Présentation de la page personnelle d’Eva Laudée À l’aide de votre navigateur, visualisez la page d’accueil d’Eva Laudée. Seulement les deux premières pages nous intéresse pour l’instant. Votre professeur vous indiquera comment trouver le site d’Eva (www.csdm.qc.ca/fgainf/evalaudee). Ces deux premières pages sont un exemple de ce que vous devrez faire comme premier exercice. On trouve dans ces deux pages les éléments de base d’une page Web : — Du texte; — Une image; — Une mise en forme (image à droite, titre en gras, etc.); — Des couleurs (couleur du fond et couleur du texte); — Une adresse de courriel; — Un lien vers une autre page. L’objectif du premier exercice L’objectif du premier exercice est donc de créer votre propre page d’accueil personnelle, ainsi qu’une page supplémentaire, tel qu’illustré dans les deux premières pages du site d’Eva. Dans ces pages, vous aurez la possibilité de vous présenter, de mettre une photo de vous et d’y associer votre adresse de courriel. Votre page personnelle devra contenir les éléments suivants : 1. Un texte de présentation; 2. Une image vous représentant; 3. Un travail de mise en forme des couleurs du texte; 4. Votre adresse de courriel active; 5. Un lien vers une deuxième page, où vous ferez une présentation de votre projet lorsqu’il sera défini. DREAMWEAVER 4 La création d’une page d’accueil personnelle page 8 02.02 La planification de la page Avant de commencer, il est important d’accorder une attention particulière à la planification de la page. Dans un logiciel d’intégration comme Dreamweaver, on ne peut pas créer les éléments nécessaires à l’élaboration d’un site, et la plupart du travail de création se fait à l’extérieur de Dreamweaver. C’est pourquoi il est essentiel de bien se préparer avant de démarrer le logiciel. Nous parlerons des méthodes de travail un peu plus loin dans le processus, au moment où nous aurons à planifier le site dans son ensemble. Voir la section 08.01 du présent document (Les objectifs du projet). Voici tout de même une approche de planification simplifiée pour votre première page : Le texte de présentation Eh oui. Il faut écrire. Idéalement dans un logiciel de traitement de texte qui pourrait nous aider à ne pas faire de fautes! Inutile de faire de la mise en page maintenant. C’est un des aspects que Dreamweaver prend en charge car le HTML est très capricieux. Nous allons copier ce texte plus tard dans notre page. Vous pourrez le retravailler dans Dreamweaver si nécessaire. L’image Il nous faut aussi une image. Le format devrait être GIF (Graphic Interchange Format), JPEG (Joint Photographic Experts Group) ou bien PNG (Portable Network Graphics Format). Pour plus d’information sur les formats d’images dans Dreamweaver, veuillez consulter le document Utilisation de Dreamweaver, section Insertion d’images > Images – Présentation (p.281). Voir la section 03.01 du présent document (Le document Utilisation de Dreamweaver) pour l’utilisation de l’aide. La taille importe peu, mais pour cet exercice, votre image devrait être inférieure à 500 pixels par 300 pixels, à une résolution de 72 points par pouce. Aussi, surveillez le poids de votre image. Au-delà de 100 Ko (kilo-octets) par exemple, c’est lourd, donc plus long à télécharger pour les connexion de modems traditionnels. On peut utiliser n’importe quel logiciel de traitement d’image, tant que ce dernier peut faire une sauvegarde de l’image selon la compression voulue (GIF, JPEG ou PNG). Des logiciels comme Photoshop, Photoshop Element, Image Ready, Graphic Converter ou autre, peuvent très bien faire l’affaire. Une fois terminée, vous placerez cette image dans le dossier image de votre site local. DREAMWEAVER 4 La création d’une page d’accueil personnelle page 9 Voir la section 04 du présent document (L’interface de Dreamweaver). La mise en forme Prévoir la mise en forme est un exercice simple, qui permet de gagner du temps. Dans votre premier exercice, vous aurez à créer une grille dans laquelle vous devrez intégrer votre image et vos textes. Il s’agit de visualiser cette grillLa documentation de Dreamweaver

Organisation de la structure du site

.Vous n’avez pas à lire cette page de l’aide comme tel. Ce n’est qu’un exemple :

1. Accédez à l’aide en ligne en sélectionnant Utilisation de Dreamweaver dans le menu Aide du logiciel (ou appuyez sur la touche F1);

2. Dans la fenêtre du navigateur Web, choisissez le mode Sommaire dans le cadre de gauche;

3. Trouvez et cliquez sur la section Planification et configuration de votre site (en gras);

4. Trouvez À propos de la planification et de la création du site, sans cliquer (caractères gras, en retrait);

5. Puis, cliquez sur Organisation de la structure du site (caractères maigres, en retrait).Dans chaque page, les flèches (ßà) permettent de passer dans l’ordre normal du texte à la rubrique précédente ou à la rubrique suivante. Aussi, comme pour la navigation sur Internet, il est possible de revenir sur les pages visitées en cliquant sur les boutons Page précédente et Page suivante de votre navigateur, et ce sans tenir compte de l’ordre du texte.Notez également l’utilisation, à l’intérieur de la plupart des rubriques, de liens hypertextes conduisant directement à d’autres rubriques connexes.

L’index

L’index vous permet de faire des recherches structurées autour de mots-clés, classés par ordre alphabétique. Ce mode correspond à l’index de tout bon ouvrage de référence, comme dans un livre, où il se situe à la fin.C’est un mode très pratique pour chercher rapidement de l’information à propos d’un élément ou d’un aspect du logiciel dont on connaît le nom. Il suffit de cliquer sur une lettre et l’aide affiche tous les mots-clés commençant par cette lettre, et lorsque pertinent, il affiche aussi, légèrement en retrait sous le mot-clé, la liste des éléments qui réfère à ce mot-clé. Tous les mots-clés et leurs éléments associés sont cliquables et renvoient à une rubrique.Précisons que ce mode de recherche s’adresse plus particulièrement aux utilisateurs intermédiaires du logiciel, parce qu’il suppose une certaine connaissance des concepts inhérents au logiciel.

La recherche

Le mode recherche est un moteur de recherche avancé pour la consultation du document Utilisation de Dreamweaver. Il est utile aux initiés pour trouver une information précise et déjà bien cernée. Ce n’est pas une bonne manière d’aborder un thème plutôt général.On y inscrit les mots clés en les séparant par le signe +, et on clique sur le bouton Afficher les rubriques. L’aide affiche alors dans le cadre de gauche tous les titres des rubriques qui contiennent ces mots. On sélectionne alors la rubrique que l’on croit pertinente à notre recherche et on clique sur le bouton Afficher pour qu’elle apparaisse dans le cadre de droite. en plaçant les éléments de la page (image, texte, courriel, etc.) selon une disposition qui vous plaît. Vous pouvez faire des croquis, des dessins ou collages, etc. C’est à vous de déterminer la méthode qui vous convient. C’est un petit exercice qui peut s’avérer anodin, mais pour la planification d’un site plus complet, cela devient essentiel. L’acquisition d’une adresse de courriel Si vous avez déjà une adresse de courriel, vous êtes prêt! Sinon voilà une belle occasion de vous en procurer une. C’est très simple. Il existe sur la toile des fournisseurs de courriel gratuit tel que hotmail.com, entre autres. Suivez les consignes sur le site pour créer votre compte courriel. Après cela, nous pourrons démarrer Dreamweaver pour se familiariser avec l’interface.