Acheter

Créer votre première page HTML

de : Adobe Dreamweaver CS4 : Les fondamentaux

Créer votre première page HTML Adobe Dreamweaver CS4 : Les fondamentaux
Insérer un objet Flash Adobe Dreamweaver CS4 : Les fondamentaux
Paramétrage du site Web dans Dreamweaver Adobe Dreamweaver CS4 : Les fondamentaux

À propos de cette vidéo

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.

Un extrait de : Adobe Dreamweaver CS4 : Les fondamentaux

Dans cette formation vidéo, vous découvrirez les fondamentaux des techniques nécessaires à la construction d´un site web. Avec cette nouvelle version, Adobe a nettement amélioré les fonctionnalités de Dreamweaver, avec notamment l’intégration avec Photoshop, ou bien les composants Spry.

EUR 49,95

Acheter

Formations similaires

Bonus en ligne

Les points-clés à connaître pour comprendre comment un site Web interagit par rapport à internet.

Principes de base
- Présentations générales du logiciel et des principales fonctionnalités.
  
  Introduction
  
  01:27
- Voici quelles sont les étapes pour réaliser un site Web depuis votre ordinateur jusqu'à la mise en ligne chez votre hébergeur.
  
  Les étapes obligatoires
  
  04:30
- 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.
  
  Choisir un nom de domaine et un hébergeur
  
  05:38
- 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.
  
  Les balises utiles au référencement
  
  03:07
Votre application de développement Web dans le détail et première approche de la construction d'une page Web.

Dreamweaver présentation
- 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.
  
  Présentation de l'interface
  
  02:47
- 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.
  
  Créer votre site Web Dreamweaver
  
  02:36
- 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.
  
  Créer votre première page HTML
  
  04:07
- 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.
  
  Organiser la page à l'aide des tableaux
  
  03:36
- 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.
  
  Organiser la page avec des DIV
  
  03:22
- Il s'agit ici de réaliser une page Web en plaçant précisément les différents éléments constituant la page.
  
  Organiser la page avec des DIV PA
  
  04:26
Les techniques de mise en page et en forme d'une page HTML.

Mise en forme d'une page HTML
- Manipulons les éléments généraux de la page comme la couleur de fond ou les marges.
  
  Mise en forme générale d'une page
  
  04:10
- La mise en forme du texte directement inclue dans le code HTML n'est pas recommandée mais cela peut être utile dans certaines circonstances.
  
  Mise en forme HTML
  
  03:35
- 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.
  
  Feuille de style interne
  
  05:05
- En utilisant cette technique, il devient possible de gérer une multitude de pages HTML à partir d'une seule feuille de style.
  
  Feuille de style externe
  
  07:05
- 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.
  
  Feuille de style externe
  
  10:53
Les liens hypertexte sont la base même d'internet. Ils permettent aux visiteurs d'évoluer de page en page ou de site en site.

Lier des pages HTML
- Dans cette vidéo nous abordons la navigation à l'intérieur d'une même page avec la technique des ancres nommées.
  
  Liens internes à la page (Les ancres)
  
  06:08
- Comment permettre aux visiteurs de naviguer de page en page sur notre site et vers un autre site.
  
  Liens externes à la page sans ciblage
  
  02:47
- Le ciblage ajouté aux liens permet d'atteindre par exemple un site externe dans une nouvelle fenêtre du navigateur.
  
  Liens externes à la page et ciblage
  
  02:06
- 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.
  
  Liens et ciblage du cadre de destination
  
  02:32
- Toutes les techniques précédentes peuvent être employées ensemble.
  
  Liens complets
  
  04:01
Dans ce chapitre nous allons voir comment créer des liens particuliers autres que des liens classiques de navigation.

Les liens spéciaux
- 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.
  
  Liens de téléchargement de fichiers
  
  03:48
- Cette technique n'est pas la meilleure mais elle permet sans programmation de permettre aux visiteurs de nous envoyer un mail.
  
  Lien de courrier électronique
  
  05:28
- Les images aussi peuvent servir à faire des liens vers d'autres pages ou d'autres sites.
  
  Utilisation d'images comme hyperliens
  
  03:08
- 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.
  
  Images avec des zones réactives
  
  06:48
- Faire réagir une image au survol du pointeur permet d'attirer l'attention du visiteur sur un point particulier de la page.
  
  Images survolées
  
  04:15
Il existe différentes méthodes pour organiser la navigation dans un site Web. Il est important de choisir la méthode la plus facile et rapide pour permettre aux visiteurs d'atteindre l'information.

Organiser la navigation dans un site
- Cette navigation est la plus simple mais elle oblige à parcourir les pages pour atteindre l'information désirée.
  
  Navigation linéaire
  
  02:15
- 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.
  
  Navigation par frame
  
  07:24
- 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.
  
  Navigation par Iframe
  
  08:15
Ajax Spry est la technologie Ajax d'Adobe. Cette technologie permet de créer de l'interactivité avec les visiteurs à l'aide de composants sans avoir à programmer.

Les composants Ajax Spry
- 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.
  
  Introduction à AJAX
  
  02:08
- 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 composant Accordéon Spry
  
  06:26
- Le menu Spry permet de doter votre site d'un menu avec si besoin des sous-menus.
  
  Le composant Barre de menu Spry
  
  06:35
- 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.
  
  Le composant Panneau d'onglets Spry
  
  07:35
- 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.
  
  Les infos-bulles Spry
  
  05:23
- 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.
  
  Panneau réductible Spry
  
  03:54
- 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.
  
  Insérer une source de données Spry
  
  05:42
Un formulaire est une étape incontournable dans la réalisation d'un site Web. Vous aurez tôt ou tard besoin de recevoir des informations de la part de vos visiteurs. Pour cela il faut impérativement passer par les formulaires.

Les formulaires
- 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.
  
  Création de formulaires
  
  05:20
- Les champs de texte permettent la saisie d'information de type nom, prénom, intitulé, message, etc. Ils sont la base d'un formulaire.
  
  Champs de texte
  
  01:38
- 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.
  
  Champs de texte Spry
  
  02:44
- Les cases à cocher servent à proposer aux visiteurs des choix multiples. Par exemple choisir différentes catégorie de produits ou services.
  
  Cases à cocher
  
  02:51
- 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.
  
  Boutons radio
  
  02:18
- 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.
  
  Boîte combo et boîte de liste
  
  03:24
- La validation d'un formulaire est l'étape qui permet de passer au serveur la saisie des informations pour réaliser un traitement.
  
  Validation d'un formulaire
  
  03:40
- 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.
  
  Boîte combo comme menu de navigation
  
  02:30
- Les champs cachés d'un formulaire permettent de passer au serveur des informations à l'insu des visiteurs.
  
  Utiliser des champs cachés
  
  01:37
- 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.
  
  Ensemble de champs
  
  01:53
- 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.
  
  Amélioration de l'aspect des formulaires
  
  05:42
Une dose de multimédia dans votre site Web est indispensable pour créer un point attractif. Il est possible d'implémenter des vidéos, des sons, des animations. Mais attention à ne pas en abuser.

Insérer des objets multimédia
- Les animations Flash sont devenues des classiques présents sur presque tous les sites sous la forme de bannière publicitaire par exemple.
  
  Insérer un objet Flash
  
  03:07
- Les podcast sont à la mode. Ils permettent par exemple de véhiculer sous forme de vidéos l'actualité de votre entreprise.
  
  Insérer une vidéo
  
  06:20
- 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.
  
  Insérer du son
  
  07:18
Les illustrations sur une page doivent venir en complément ou en opposition avec le texte de la page. Ne mettez jamais d'illustrations gratuitement.

Gérer les illustrations
- 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.
  
  Modification des propriétés des images
  
  02:16
- 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.
  
  Optimisation des images pour le Web
  
  05:33
- 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.
  
  Dreamweaver et Photoshop CS4
  
  06:00
Les feuilles de style sont aujourd'hui un outil incontournable dans la création des pages HTML tant au niveau de la mise en page que de la mise forme.

Première approche des feuilles de style
- Les feuilles de style apportent une souplesse inégalée tant pour les modifications que pour la création.
  
  L'intérêt des feuilles de style
  
  02:56
- Il est important de comprendre la structure des feuilles de style et l'interaction avec les pages HTML pour pouvoir les utiliser facilement.
  
  Règles, classes et attributs
  
  06:31
- Les feuilles de styles sont au centre de cette version de Dreamweaver. Des nouveaux outils sont disponibles pour vous faciliter le travail.
  
  Outils de Dreamweaver pour manager les CSS
  
  03:23
Réaliser un site Web peut rapidement devenir une tâche répétitive. Pour améliorer votre productivité il existe des outils simples pour vous éviter de refaire les mêmes manipulations.

Outils de productivité
- Le gabarit est un outil permettant une bonne interaction entre le graphiste ou directeur artistique et l'intégrateur Web.
  
  Utilisation d'un gabarit
  
  03:22
- 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.
  
  Utilisation des modèles
  
  06:48
Il s'agit ici d'une première approche des pages dynamiques pour en comprendre la logique et l'intérêt.

Site Web dynamique
- 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.
  
  Définition et installation du serveur Web
  
  05:04
- 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.
  
  Paramétrage du site Web sur le serveur Apache
  
  02:56
- Maintenant il faut régler Dreamweaver pour qu'il puisse dialoguer avec le serveur.
  
  Paramétrage du site Web dans Dreamweaver
  
  02:08
- 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.
  
  Création de notre première page PHP
  
  02:36
- Quelque soit le langage de programmation, les modes de pensée restent identiques. Seul le vocabulaire et la syntaxe changent.
  
  Programmation PHP, quelques fondamentaux
  
  05:18
- 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.
  
  Création d'une base de données
  
  06:14
- Comment afficher le contenu de ma base de données dans ma page HTML ? Est-il possible de mettre en forme les renseignements ?
  
  Lecture de la base de données
  
  08:20
- 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.
  
  Filtrer la lecture de la table
  
  06:35
- Lors de l'affichage, pour faciliter la lecture il est possible de trier les données dans un ordre ou dans un autre.
  
  Trier des enregistrements
  
  04:59
- 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.
  
  Ecriture directement dans la base de données
  
  05:30
- L'utilisation conjointe d'un formulaire et d'une base de données permet une grande souplesse dans le stockage des données.
  
  Ecriture par un formulaire HTML
  
  07:49