- Créer, enregistrer et mettre en forme la page d'index. Modifier les propriétés de la page. L'afficher dans le navigateur

Transcription

1 Digital et Web : HTML - Devenir Web Master Sessions Mars Avril Mai Digital et Web : HTML - Devenir Web Master Public & pré-requis Toute personne ayant une bonne connaissance de l'internet Maîtriser l'environnement Windows et avoir de bonnes connaissances sur l'internet : la philosophie, la navigation, les recherches. Objectifs & Pédagogie Connaître les étapes de construction d'un site Web, identifier les métiers, choisir et utiliser les technologies et outils de création de pages statiques et/ou dynamiques, savoir rendre son site attractif et référencer son site. Théorie et pratique Contenu Les technologies et les métiers - Différencier Intranet / Internet / Extranet - Recenser les technologies et les métiers associés - Connaître le champ d'action de chaque outil et de chaque langage utilisés dans les projets de construction de site WEB - Savoir mixer les technologies (HTML, CSS, PHP, JavaScript, Photoshop, Flash ) - Cibler les problématiques de connexion, de débit et de sécurité Créer des pages statiques avec un éditeur (FrontPage ou Dreamweaver) Page 1 sur 6

2 - Présentation du logiciel : éditeur de pages & gestionnaire de sites - Rappel du vocabulaire : http, html, url, ftp, lien - Les différentes palettes d'outils - Création d'un site en local :Définir le site - Créer, enregistrer et mettre en forme la page d'index. Modifier les propriétés de la page. L'afficher dans le navigateur - Placement des objets sur la page -. Utiliser les tableaux pour la composition des pages : création en mode standard et en mode mise en forme. Passage d'un mode à un autre -. Utiliser les calques et les convertir en tableaux - Les images -. Insérer des images survolées -. Délimiter des zones réactives sur les images -. Insérer et modifier un bouton et un objet de texte Flash - Les différents types de liens -. Créer des liens internes et externes. Créer des liens messagerie -. Utiliser les ancres pour naviguer à l'intérieur des pages Créer un menu de re-routage - Les formulaires -. Créer un formulaire et ajouter des objets de type champ texte, case à cocher, champ liste déroulante - Les cadres (frames) -. Définition d'une page de cadres. Création de jeux de cadres - Mise en ligne du site -. Vérifie les liens du site - Paramétrer les informations du serveur Web hôte - Automatiser la mise en page : les modèles Page 2 sur 6

3 -. Créer un modèle de page et préciser les régions modifiables -. Créer une page à partir d'un modèle -. Appliquer un modèle à une page existante -. Modifier un modèle et mettre à jour les pages liées - Augmenter l'interactivité et ajouter du dynamisme aux pages : les comportements -. Identifier et utiliser les comportements disponibles -. Réalisation de Popup, de Roll-over, de menu contextuel Maîtriser le HTML et manipuler les CSS - Connaître l'historique du langage, la signification des termes HTML, HTTP, Web - Connaître la technologie de l'hypertexte - Maîtriser la structure d'une page HTML - Connaître les différents liens en HTML - Développer en HTML -. Créer une première page Web, enregistrer au format HTML, lancer la page depuis IE -. Enrichir une page Web avec du texte, le présenter, appliquer des mises en forme, utiliser la couleur, les titres, les listes à puces numérotées, du texte pré formaté - Enrichir une page Web avec des images -. Les différents formats d'images -. Rechercher et insérer une image, la placer dans du texte -. Utiliser et modifier les propriétés des images -. Utiliser une image comme lien. Insérer des images animées - Enrichir une page Web avec des tableaux -. Définir la structure du tableau, saisir les données, appliquer une bordure -. Présenter le texte. Fusionner des cellules horizontalement ou verticalement - Créer un page Web à partir d'autres pages Web Page 3 sur 6

4 -. Définir des cadres (ou Frame) -. Placer des pages Web ou des images dans les cadres - Définir des liens hypertextes -. Créer des liens dans une même page -. Créer des liens pour activer d'autres pages - Intégrer un script récupéré sur l'internet dans une page HTML pour animer ou ajouter des effets - Créer des pages élaborées -. Définir le cadre d'utilisation, découvrir le langage -. Utiliser les styles dans une balise. Définir un ensemble de styles dans une balise Style -. Créer et utiliser des feuilles de styles (.CSS) Créer des pages dynamiques - Choisir la technologie : ASP ou PHP - ASP : Mise en place d'un serveur SQL en local - PHP : Installation PHP sur Windows (EasyPHP). Description du fonctionnement - SQL : le langage commun -. Mise en place de la base de données : Établir un Modèle Conceptuel des Données simple, créer les tables, saisir quelques enregistrements dans les tables -. Interroger les tables en utilisant le SQL (Select, Conditions, opérateurs logiques, tris ) -. Créer des requêtes actions Update, Delete - Créer du code PHP ou ASP dans une page HTML -. Principe et philosophie, les avantages et les limites -. La syntaxe -. Les variables -. Les opérandes, les tests, les boucles -. Les tableaux Page 4 sur 6

5 -. Savoir passer le contenu d'une variable d'une page à une autre via un lien Hypertexte - Accès à la base de données MySql avec PHP ou SQL Serveur avec ASP. Se connecter - Créer un fichier d'en-tête de connexion - Récupérer les informations de la base de données et les afficher dans la page WEB - Créer un formulaire de saisie ou d'interrogation - Enregistrer des données depuis un formulaire - Gérer les passages de variables d'un formulaire à un autre - Gérer les sessions : Authentification, Identifiant unique, Passer des informations par l'url Optimiser l'aspect graphique et la navigation - Le concept de base -. Rappels de l'utilisation de Photoshop -. La résolution et les contraintes liées au Web -. Les formats d'enregistrement pour le Web - La création graphique -. Les formes vectoriels. Les calques. Les masques de fusion -. Les effets de calques. Les styles de calques. La transparence des calques - Le Web -. Les dropplets. Les styles. Bibliothèque des couleurs -. Création d'animations (Gif animés). Création d'effets de survols (rollover) de boutons ou d'images -. Création de mappage avec l'outil tranche : découpe d'une image en plusieurs morceaux - Les exportations -. Les formats d'enregistrement: en Gif Jpeg Png. D'animations. Cartes mappées -. Tranches. Le nouveau format de Viewpoint (zoom sur image) - Les couleurs Page 5 sur 6

6 -. La compression des couleurs pour une optimisation des images pour le web -. Sémantique : Les couleurs et l'inconscient collectif - L'ergonomie -. Les règles de l'ergonomie pour une meilleure gestion de navigation Mise en place d'un projet Web - Mise en place d'un cahier des charges : les chapitres, l'ergonomie, la charte graphique, les accroches, les choix techniques, les durées, les coûts ) - Le maquettage (Mise en œuvre, optimiser le rédactionnel, créer une maquette, contrôle de qualité et phases de tests) - Promouvoir le site (Les mots clés, les techniques de référencement) Page 6 sur 6