ptlb-formation à Poitiers

Tutoriels de formation
pour les infographistes débutants et avancés

Stratégie et conception de site Internet - partie 10

Création d'un site internet avec Dreamweaver
 
Retour au sommaire des vidéos -  Vidéogramme suivant ...

Regarder « Création d'un site internet avec Dreamweaver » sur youtube
Consultez notre choix de formations sur PTLB-Formation.fr

Un site internet avec Dreamweaver

Pour continuer la suite de notre démonstration, nous allons nous intéresser au logiciel Adobe Dreamweaver.

Il est pratiquement impossible d’utiliser ce logiciel sans une connaissance du html 5 et du CSS 3. Très souvent, les infographistes ne connaissent pas le JavaScript et le PHP, mais ils arrivent souvent à trouver des extraits de codes sur Internet, ce qui leur permet d’effectuer des réalisations conformes à leurs attentes.

Présentation de Dreamweaver

Voyons la présentation de Dreamweaver en deux étapes.

Prenons le site « ptlb-formation.com » qui est en cours de refonte au moment de la réalisation de ce vidéogramme.

Voici l’interface de « Dreamweaver ».

La page actuellement chargée et la page qui se nomme « index.html ».

Pour simplifier la présentation, à gauche se trouve le code et à droite se trouvent les différents éléments constitutifs du site Internet, autrement dit les fichiers qui sont sur le disque dur.

Dans le menu « affichage », puis « mode d’affichage » et enfin la commande qui se nomme « en direct ».

Il est donc possible d’alterner la vision entre le « code » et l’affichage du site Internet.

Il est même possible d’afficher simultanément ces deux modes. Pour cela, il suffit d’aller dans le menu « affichage » commande « fractionner » et sélectionner la commande « code en direct ».

Il est donc possible d’effectuer des modifications dans l’une des deux fenêtres.

Nous sommes ici en basse résolution, mais il est évident que sur un grand écran ce dispositif prend du sens.

Affichons uniquement le code : je vais dans menu affichage et je sélectionne la commande « code ».

La balise « link ».

Si on revient dans la partie code du site Internet, qui je vous le rappelle est en cours de création, nous pouvons voir des balises comme celle qui se nomme « link ». Link en anglais veut dire « lien ». Il s’agit donc du lien établi entre la page html et d’autres fichiers. Il s’agit ici de fichier CSS. Le premier de la liste se nomme « foundation.css ».

Vous l’aurez compris, le morceau de code sélectionné permet de créer un lien entre le fichier « index.html » et le fichier qui se nomme « foundation.css ».

En cliquant en haut vers la gauche il est possible d’afficher le fichier « foundation.css ».

Tout le code inscrit à l’écran concerne la présentation de la page.

Pour faire simple, en « html », j’écris le mot « bonjour » et c’est le fichier « CSS » qui attribuera la police de caractère, la taille des caractères, la couleur, l’emplacement, etc.

La page html est reliée au fichier CSS, mais également à d’autres fichiers.

HTML, CSS, JavaScript et SVG

En cliquant sur le double chevron qui se trouve en haut et à droite, il est possible de voir la liste complète des fichiers rattachés aux fichiers html. On trouvera ici des fichiers JavaScript et les fichiers SVG « le SVG est un format d’image vectorielle ».

En présentant le logiciel de cette façon-là, il est évident qu’apprendre le html, les CSS, le JavaScript n’est pas une opération qui peut s’effectuer en quelques heures. Il s’agit d’un véritable apprentissage.

Toutefois, il est possible de réaliser des choses simples dans Dreamweaver.

Refermons la fenêtre « index.html » en cliquant sur la petite croix.

Allons dans le menu « fichier » et utilisons la commande « nouveau » et choisissons « html » puis cliquons sur le bouton « créer ».

Ici, nous n’afficherons que le code. Une page s’affiche et il est possible de voir dans celle-ci des éléments de code qui ont déjà été évoqués.

Le début du fichier commence par la balise .html et se termine par la balise « /html » nous diront plutôt « fin de html ».

En dessous se trouvent les balises « head » qui entourent notamment la balise « title » qui permet de donner un nom à la page.

Encore en dessous se trouve la balise « body ». Le contenu placé à l’intérieur des balises body sera visible par l’internaute.

Reprenons notre exemple.

Dans le menu « affichage », j’utiliser la commande « fractionner » puis la commande « en direct ».

Je positionne mon curseur de la souris à l’intérieur des balises « body » pour que la nouvelle entrée de texte vienne se positionner à cet endroit.

Titre de niveau 01

Dans le menu « insertion », je choisis la commande « titre » puis l’option « H1 ». Je double-clique sur le texte afin de le sélectionner et le remplacer par « PTLB - Formation ».

Dans la fenêtre code, pour être sûr que mon curseur soit au bon endroit, je le place derrière la Balise « H1 » et j’appuie sur la touche entrée pour réaliser un « retour chariot ».

Titre de niveau 03

Je retourne dans le menu « insertion », je choisis la commande « titre » puis l’option « H3 ».

Je double-clique sur le texte afin de le sélectionner et le remplacer par l’accroche.

Dans la partie du haut, je positionne le curseur juste après les « : » et j’appuie simultanément sur la touche « majuscule » et la touche « entrée ».

Je place le curseur de la souris dans la fenêtre « Code » afin que celui-ci soit réactualisé.

Si en regardant le code, nous pouvons constater que les choses sont relativement simples. Le titre est entouré des balises « H1 », l’accroche est entourée des balises « H3 » et le retour à la ligne est programmé, nous dirons plutôt « coder », par la balise « BR ».

Allons dans le menu fichier et sélectionnons la commande « enregistrer sous ».

Toujours sur le même disque dur, nous allons créer un nouveau dossier qui se nomme « dreamweaver ».

À l’intérieur de celui-ci nous sauvons notre document sous le nom « index.html ».

Pour la suite de notre travail, il est nécessaire que le fichier PDF et que l’image colorisée soit contiguë aux fichiers .html.

Sur le disque de l’ordinateur, je vais dans le répertoire qui se nomme « éléments préparatoires » et je sélectionne le fichier « PDF » et l’image « jpg ».

J’utilise le raccourci clavier « contrôle + C » pour copier.

J’utilise maintenant le raccourci clavier « contrôle + V » pour coller ces fichiers dans le dossier « dreamweaver »

Je retourne de nouveau dans Dreamweaver.

Dans la partie code, je place le curseur après la balise « fin de H3 ».

Et j’appuie sur la touche entrée.

Dans le menu « insertion », j’utilise la commande qui se nomme « image ».

Importation d’image

Sélectionnons notre image qui se nomme «la-colorisation-a-l-aide-de-photoshop.jpg ».

Comme nous l’avons vu dans les autres démonstrations, cette image est trop grande.

En regardant de code, nous pouvons voir que cette image mesure 1520 pixels de largeur par 808 pixels de hauteur.

Il est possible de modifier ces chiffres pour réduire la taille de l’image. Mais ici, nous préférerons utiliser les pourcentages afin que l’image soit toujours en rapport avec l’affichage-écran. Nous remplacerons 1520 par 80 % et 808 par 80 %.

Je note la présence de la balise « Alt » qui je vous le rappelle correspond au texte alternatif et qui permet aux malvoyants de connaître la teneur de l’image. Ici, il sera possible d’inscrire entre les « guillemets » la phrase suivante « Portrait d’une personne avant colorisation et après colorisation grâce au logiciel Photoshop »

Balise Title

Ajoutons une balise « title ». Cette balise informera Google et celle-ci permettra d’afficher une infobulle lorsque le curseur sera placé sur l’image.

Balise Alt

Plaçons le curseur devant la balise « Alt » est et inscrivons le terme suivant «  title="" » plaçons le texte de l’info bulle entre les 2 guillemets « Photoshop est l’outil idéal pour la colorisation d’images avec des effets les plus surprenants ».

Occupons-nous maintenant du lien hypertexte concernant le téléchargement de fichier PDF.

Plaçons notre curseur juste avant la balise de « fin de body ».

Je vais dans le menu « insertion « et je sélectionne la commande paragraphes ». Il me suffit de remplacer le texte proposé par « Dreamweaver ».

Nous inscrirons par exemple : « Télécharger notre catalogue de formation ».

Cette opération peut aussi bien s’effectuer dans la fenêtre de prévisualisation ou directement dans le code.

Il nous faut maintenant créer un lien comme nous l’avons fait dans les autres exemples. Pour cela je surligne la phrase dans le code.

Hyperlink

Je vais dans le menu « insertion » et je sélectionne la commande « hyperlink ». Une fenêtre s’affiche.

Dans le champ qui correspond à lien, nous cliquons sur l’icône « dossier ».

La fenêtre « sélectionner un fichier » s’affiche et il suffit de sélectionner le fichier PDF et cliquez sur le bouton « OK ».

Dans la fenêtre qui se nomme « hyperlink ». Je clique sur le petit chevron qui correspond à la rubrique « cible ». Un menu déroulant apparaît : Ici nous choisirons le terme « _blank ». C’est-à-dire sur un autre onglet.

Autrement dit, la fenêtre cible permet de déterminer l’emplacement de l’affichage du « fichier PDF ».

Je clique sur « OK » pour refermer la fenêtre.

Vous noterez que la phrase s’est transformée, celle-ci est devenue bleue soulignée comme la couleur des liens traditionnels.

Je vais dans le menu fichier et j’utilise la commande « enregistrer ». Retournons une fois de plus dans « filezilla ». Sur la partie du disque dur, je fais le nécessaire pour afficher le « dossier » qui se nomme « Dreamweaver ».

Sur le serveur distant, je remonte dans le répertoire qui se nomme « démo ». Déplaçons le dossier « Dreamweaver » dans le dossier « demo » du serveur distant.

Une fois que l’ensemble des fichiers sont copiés, il suffit de retourner dans le navigateur et modifier l’adresse pour que celle-ci pointe sur le répertoire Dreamweaver.

En laissant un instant le curseur de la souris sur l’image, nous voyons apparaître l’info bulle.

En réduisant la taille de notre navigateur, nous pouvons constater la diminution de la photographie. En effet celle-ci est toujours à 80 % de la fenêtre du navigateur.

En cliquant sur « télécharger notre catalogue de formation » celui-ci se charge dans un nouvel onglet.

Retournons sur l’onglet numéro un du navigateur pour voir de nouveau notre site Internet.

Le nom de la page

Vous remarquerez en haut du navigateur que le document se nomme « document sans nom ».

Retournons dans Dreamweaver, il est facile de voir que c’est le terme employé entre les 2 balises « title ».

Ici, nous remplacerons le terme « document sans nom » par le terme « Le blog de PTLB - Formation ».

Pour disposer les éléments de façon différente dans la page, en modifiant, par exemple, les polices de caractère, les couleurs l’alignement des textes et des images, il est nécessaire d’utiliser les CSS.

Nous allons réaliser un tout petit exemple tout à fait symbolique. Cet exemple consistera inscrire des consignes CSS à l’intérieur de la page html grâce à la balise « style ».

Pour cela, plaçons le curseur à l’intérieur de la balise « H1 », mais après le chiffre « 1 ».

Et inscrivons le thème suivant « style="text-align: center ;" ».

Le titre se retrouve centré.

Ajoutons un deuxième argument qui concerne la couleur du texte en inscrivant entre le « ; » et le « guillemet » le terme suivant « color: #e30613; ».

Ici, les deux consignes CSS sont tout à fait compréhensibles par tout un chacun.

Enregistrons de nouveau notre page.

Dans » Fillezilla », dans le disque dur, j’ouvre le répertoire Dreamweaver pour y sélectionner le fichier qui se nomme « index.html ».

Je déplace fichier et je place sur le serveur distant.

De retour dans le navigateur, il suffit de rafraîchir la page est de constater les modifications.

Le nom de la page s’appelle « Le blog de PTLB - Formation » et le « titre » est centré et sa couleur est rouge.

Dans Dreamweaver, refermons la page « index.html ».

Les modèles de Dreamweaver

Dans le menu « fichier », j’utilise la commande « nouveau ».

Et je sélectionne la rubrique qui se nomme « modèles de démarrage ». Dans la deuxième colonne, je choisis « mise en page standard » puis dans la troisième colonne, je choisis « standard - une seule grille ». Et je clique sur « créer ».

Dans le menu « affichage », je sélectionne la commande « mode d’affichage » et je choisis le mode « en direct ».

En haut de l’écran se trouve « 1 barre verte » et « 2 barres bleues ».

Celle-ci possède des valeurs.

La barre verte correspond au mode d’affichage 320 pixels.

En cliquant sur celle-ci, je peux voir le site adapté aux Smartphones.

En cliquant sur la barre bleue qui contient les valeurs 321 et 767 pixels, je peux voir le site présenté pour les smartphones et les tablettes en mode verticale.

Et enfin le dernier mode qui va de 768 à 1096 pixels : Celui-ci sera réservé aux ordinateurs voire à certaines tablettes en fonction de la résolution.

Il s’agit ici d’un modèle de site Internet responsive dont il suffira de changer les images et modifier les faux textes.

La modification des couleurs et des typographies se fera dans la partie CSS.

Par la suite, d’autres difficultés apparaîtront lorsqu’il faudra réaliser des formulaires de contact qui exige le PHP.

Nos cours et de nombreux tutoriels sur Internet proposent des solutions.

Voilà pour cette présentation extrêmement rapide de Dreamweaver.

Voir la suite sur le vidéogramme suivant ...

Pierre Tomy Le Boucher