Mise en forme HTML

Présentations générales du logiciel et des principales fonctionnalités.

Voici quelles sont les étapes pour réaliser un site Web depuis votre ordinateur jusqu'à la mise en ligne chez votre hébergeur.

Le choix d'un hébergeur et d'un nom de domaine est une étape importante, nous vous donnons ici des conseils pour vous guider.

Pour permettre un référencement naturel de votre site, chaque page HTML doit contenir des balises particulières permettant au moteur de recherche de trouver et d'indexer vos pages.

La nouvelle interface du logiciel Dreamweaver est orientée vers un gain de productivité important. Dans cette vidéo nous vous présentons les points-clés à connaître pour utiliser au mieux cette interface.

Avant de créer des pages HTML dans Dreamweaver, il est indispensable de créer un site Web Dreamweaver. Nous vous expliquons dans cette vidéo comment réaliser cette manipulation.

Notre toute première page HTML avec du texte et des photos. Dans cette vidéo, nous abordons les fondamentaux de la page HTML et de son organisation.

La première idée pour mettre en page une page Web est d'utiliser les tableaux. Cette technique n'est pas la meilleure mais néanmoins il reste indispensable de savoir faire un tableau HTML.

Cette approche est bien meilleure que la précédente. C'est la technique la plus employée pour mettre en page une feuille HTML.

Il s'agit ici de réaliser une page Web en plaçant précisément les différents éléments constituant la page.

Manipulons les éléments généraux de la page comme la couleur de fond ou les marges.

L'utilisation des styles est complètement obligatoire dans la réalisation d'une page Web de nos jours. Nous voyons ici la création d'une feuille de style intégrée à la page HTML.

En utilisant cette technique, il devient possible de gérer une multitude de pages HTML à partir d'une seule feuille de style.

Les feuilles de style permettent d'agir efficacement sur tous les aspects de la page HTML aussi bien sur les éléments généraux que sur les paragraphes ou mots.

Dans cette vidéo nous abordons la navigation à l'intérieur d'une même page avec la technique des ancres nommées.

Comment permettre aux visiteurs de naviguer de page en page sur notre site et vers un autre site.

Le ciblage ajouté aux liens permet d'atteindre par exemple un site externe dans une nouvelle fenêtre du navigateur.

Si votre site est organisé autour de frame, cette technique vous permet d'ouvrir tel ou tel lien dans un cadre précis de votre page. C'est aussi valable pour les Iframes.

Toutes les techniques précédentes peuvent être employées ensemble.

Il est possible de permettre à vos visiteurs de télécharger sur son ordinateur des fichiers de toute nature comme des documents PDF, Word, Excel, etc.

Cette technique n'est pas la meilleure mais elle permet sans programmation de permettre aux visiteurs de nous envoyer un mail.

Les images aussi peuvent servir à faire des liens vers d'autres pages ou d'autres sites.

Une même image peut être découpée en zones réactives permettant ainsi de créer des liens différents en fonction de la partie de l'image cliquée.

Faire réagir une image au survol du pointeur permet d'attirer l'attention du visiteur sur un point particulier de la page.

Cette navigation est la plus simple mais elle oblige à parcourir les pages pour atteindre l'information désirée.

Le système des frames est pratique car il permet de faire un menu et de le garder présent à l'écran quelque soit la page à consulter. Il pose pourtant certains problèmes au niveau du référencement des pages.

Cette navigation permet de réaliser des sites de type tableau de bord. Cela évite à l'utilisateur d'utiliser l'ascenseur pour atteindre l'information.

Présentation de cette technologie réunissant le HTML, CSS, XML, JavaScript et XMLHttpRequest et permettant de gérer les échanges asynchrone avec le serveur.

Grace à l'accordéon il est possible de loger dans un petit espace beaucoup d'informations. L'accordéon permet aussi de structurer les informations.

Le menu Spry permet de doter votre site d'un menu avec si besoin des sous-menus.

A l'aide du composant onglets Spry vous pouvez proposer à vos visiteurs une navigation simple et rapide à l'intérieur d'une même page.

Les infos-bulles Spry permettent d'afficher au survol d'un texte ou d'une image une bulle informative pouvant contenir du texte ou une image. Idéal par exemple pour une définition de mot.

Cet outil permet de déployer un panneau contenant de l'information puis de le masquer après usage. Toujours dans l'optique d'un gain de place à l'écran.

Le composant idéal si vous n'avez pas de base de données et que vous souhaitez afficher dans une page HTML le contenu d'une autre page HTML. Cela permet par exemple d'afficher des fiches produit à partir d'une liste de produits.

La création d'un formulaire est une étape importante. En effet les visiteurs ne sont pas forcément prêts à remplir de nombreux champs. Pour ne pas les faire fuir, il faut faire un tri et limiter au strict minimum la saisie.

Les champs de texte permettent la saisie d'information de type nom, prénom, intitulé, message, etc. Ils sont la base d'un formulaire.

A l'aide du champ Spry il est possible de contrôler finement la saisie. Par exemple contrôler le nombre minimum ou maximum de caractères est possible avec le composant texte Spry.

Les cases à cocher servent à proposer aux visiteurs des choix multiples. Par exemple choisir différentes catégorie de produits ou services.

Les boutons radio permettent un choix unique. Idéal par exemple pour choisir un mode de paiement ou toute autre option nécessitant un choix unique.

Les boîtes Combo ou listes déroulantes modifiables vous permettent de proposer à vos visiteurs une liste de choix. Sous sa forme liste, la boîte Combo permet aussi des choix multiples.

La validation d'un formulaire est l'étape qui permet de passer au serveur la saisie des informations pour réaliser un traitement.

Il est possible de proposer une navigation par boîte combo soit dans votre site soit vers des sites externes. Cela permet un gain de place conséquent sur une page par rapport à l'affichage d'une liste de liens conséquents.

Les champs cachés d'un formulaire permettent de passer au serveur des informations à l'insu des visiteurs.

Pour améliorer la présentation de vos formulaires il peut être intéressant de scinder en groupe les zones à saisir. Par exemple le groupe identité contenant le nom, prénom, email. Le groupe adresse contenant le numéro de rue, le type de rue, l'adresse, le code postal et la ville.

Pour donner envie à vos visiteurs de remplir votre formulaire, il est judicieux de modifier la présentation de votre formulaire à l'aide d'une feuille de style.

Les animations Flash sont devenues des classiques présents sur presque tous les sites sous la forme de bannière publicitaire par exemple.

Les podcast sont à la mode. Ils permettent par exemple de véhiculer sous forme de vidéos l'actualité de votre entreprise.

Mettre du son sur une page Web est un choix qu'il ne faut pas faire à la légère. En effet le son est un outil puissant de reconnaissance de votre identité. Pensez par exemple à une certaine marque et à la musique qui accompagne cette marque.

Régler les paramètres de l'image est important pour intégrer celle-ci correctement dans la page face au texte qui la concerne.

Sur le Web votre principal ennemi est le poids. Chaque image doit être optimisée en terme de poids pour ne pas ralentir le chargement de votre page. Les visiteurs sont par nature impatients.

Adobe améliore votre flux de production Photoshop Dreamweaver à l'aide de cette fonctionnalité. Il est en effet possible d'importer avec liaison des photos au format PSD et de les convertir à la volée au format JPG.

Les feuilles de style apportent une souplesse inégalée tant pour les modifications que pour la création.

Il est important de comprendre la structure des feuilles de style et l'interaction avec les pages HTML pour pouvoir les utiliser facilement.

Les feuilles de styles sont au centre de cette version de Dreamweaver. Des nouveaux outils sont disponibles pour vous faciliter le travail.

Le gabarit est un outil permettant une bonne interaction entre le graphiste ou directeur artistique et l'intégrateur Web.

Cet outil est indispensable pour ceux qui souhaitent réaliser un site Web classique en HTML. Il vous permet de ne pas avoir par exemple à refaire le menu de votre site sur chaque page.

Configurer son poste de travail pour pouvoir réaliser des pages dynamiques est une étape indispensable. Vous ne pouvez pas réaliser les exercices du présent chapitre sans avoir réalisé cette installation.

Un serveur Web est un programme permettant de distribuer les pages HTML à la volée aux visiteurs. Il est le maillon indispensable pour pouvoir créer des pages dynamiques.

Maintenant il faut régler Dreamweaver pour qu'il puisse dialoguer avec le serveur.

PHP est un langage de programmation. Il permet de réaliser des opérations impossibles à faire avec le HTML comme gérer des variables, faire des boucles, etc.

Quelque soit le langage de programmation, les modes de pensée restent identiques. Seul le vocabulaire et la syntaxe changent.

La base de données est le réceptacle contenant les données que vous souhaitez afficher dans vos pages HTML. Il devient possible grâce à elle de créer dynamiquement des pages HTML.

Comment afficher le contenu de ma base de données dans ma page HTML ? Est-il possible de mettre en forme les renseignements ?

Si ma base de données contient un très grand nombre d'informations, il est obligatoire de pouvoir effectuer une sélection des informations que l'on souhaite afficher.

Lors de l'affichage, pour faciliter la lecture il est possible de trier les données dans un ordre ou dans un autre.

Il est aussi nécessaire de pouvoir écrire dans la base de données pour par exemple, tenir à jour les valeurs déjà présentes.

L'utilisation conjointe d'un formulaire et d'une base de données permet une grande souplesse dans le stockage des données.