Préformation sur la Creation de Site Internet

XHTML/CSS Module 1 (4 jours)

OBJECTIFS : Savoir construire des pages HTML (composées d’image et de textes) agrémentées de styles CSS en comprenant
et en utilisant à bon escient les balises. Le tout devant respecter la sémantique des langages HTML, CSS et les normes W3C.

PRE-REQUIS : Il faut avoir utilisé l’Internet afin de posséder une petite culture Web et connaître l’environnement Mac. ou
Windows.

PUBLIC VISE : Toute personne désirant apprendre les fondements de la fabrication d’un site Web professionnel.

CONTENU DU MODULE :

• Fondement du html. Les différences entre les versions html (html 4.1 et Xhtml 1.0 transitionnel). Pourquoi le xhtml ?
• Les avantages, les inconvénients. Structure d’une page xhtml. Les DTD. Fabrication de pages html à la norme Xhtml durant les
• 4 jours.
• Sémantique html :
• Explications et utilisations des balises html des plus usités au moins connues.
• Méthodologie de la conception d’un site html : organisation, contrainte (compatibilité navigateur, résolution d’écran…),
• optimisation du poids, interactivité.
• Les différentes structures de site (centré, redimensionnable…)
• Mise en pratique par divers exercices mêlés à la théorie.
• Divers exercices sont prévus suivant le niveau initial de chaque personne (de la simple mise en page à la plus complexe).
• Mise en place de contenu au travers de balise html.
• Formatage de textes avec html, formatage étendu via les styles css.
• Fabrications de liens hypertextes et hyper graphiques.
• Fabrication de formulaires accessibles (normes W3C).
• Vérification et débogage des pages html pour : le respect des normes W3C, la compatibilité de connexion, la compatibilité
• navigateurs ancienne et nouvelle génération, la résolution d’écran…

DREAMWEAVER module 1 (3 jours)

OBJECTIFS : Savoir utiliser les outils appropriés permettant d’intégrer un site Internet afin de répondre aux exigences du
Web, la productivité avec les outils de Dreamweaver.

PRE-REQUIS : Il faut avoir des connaissances du langage HTML ou avoir suivi le cours Xhtml/ css Module 1, et connaître
l’environnement Mac. ou Windows

PUBLIC VISE : Toute personne ayant pour but d’intégrer des sites web ou/et des newsletters à l’aide d’un logiciel WYSIWYG.

CONTENU DU MODULE

• Découverte du logiciel. Méthodologie de fabrication de site : Déclaration de site. Création et génération de l’arborescence
• d’un site. Propriétés d’une page.
• Insertion de textes et d’images. Fabrication de liens hypermédia (sur des textes, images). Réglages et propriétés des
• images, tableaux, liens)
• Texte et mises en forme. Différentes techniques de mises en page et différentes méthodes de construction de pages.
• Comparaison entre le code et le mode création. Nettoyage de code. Comment concevoir des formulaires de contact, les
• formulaires et l’accessibilité.
• Envois et traitements des données de formulaires. Appréhender les normes d’accessibilité afin de construire des pages
• html conformes à celles-ci.
• Construction d’une interface de site la plus légère possible pour s’adapter à tout type de connexion Internet. Gestion des
• contraintes du web.
• Adaptabilité d’interfaces de site web en fonction de la résolution d’écran. Plusieurs exercices permettent de mettre en
• pratique la fabrication de pages html aux normes W3C XHTML 1.0 transitionnel enrichit de mise en formes à l’aide de styles
• css. Apprentissage et utilisation de différents sélecteurs et propriétés CSS. Utilisation de script JavaScript manuellement et
• génération automatique avec l’aide de Dreamweaver. Les effets de survol d’images, date dynamique
• Tests de validité W3C, interprétations des erreurs, correction de ces erreurs. Tests de compatibilité des navigateurs (plusieurs versions d’Internet Explorer, Firefox, Safari, Opéra).Mise en ligne d’un site (paramétrages)

FIREWORKS module 1 (1 jour)

OBJECTIFS : Savoir utiliser les outils appropriés permettant d’intégrer un site Internet afin de répondre aux exigences du
Web, la productivité avec les outils de dreamweaver.

PRE-REQUIS : Il faut avoir des connaissances du langage HTML ou avoir suivi le cours Xhtml/css Module 1, et connaître
l’environnement Mac. ou Windows.

PUBLIC VISE : Toutes personnes ayant pour but d’intégrer des sites web ou/et des newsletters à l’aide d’un logiciel
WYSIWYG.

CONTENU DU MODULE

• Découverte du logiciel. Méthodologie de fabrication de site : Déclaration de site. Création et génération de l’arborescence
• d’un site. Propriétés d’une page. Insertion de textes et d’images. Fabrication de liens hypermédia (sur des textes, images...).
• Réglages et propriétés des images, tableaux, liens…) Texte et mise en formes. Différentes techniques de mises en page et
• différentes méthodes de construction de pages.
• Comparaison entre le code et le mode création. Nettoyage de code. Comment concevoir des formulaires de contact, les
• formulaires et l’accessibilité. Envois et traitements des données de formulaires. Appréhender les normes d’accessibilité afin
• de construire des pages html conformes à celles-ci. Construction d’une interface de site la plus légère possible pour
• s’adapter à tout type de connexion Internet. Gestion des contraintes du web. Adaptabilité d’interfaces de site web en
• fonction de la résolution d’écran.
• Plusieurs exercices permettent de mettre en pratique la fabrication de pages html aux normes W3C XHTML 1.0
• transitionnel enrichit de mise en formes à l’aide de styles css. Apprentissage et utilisation de différents sélecteurs et
• propriétés CSS. Utilisation de script JavaScript manuellement et génération automatique avec l’aide de dreamweaver. Les
• effets de survol d’images, date dynamique... Tests de validité W3C, interprétations des erreurs, correction de ces erreurs.
• Tests de compatibilité des navigateurs (plusieurs versions d’Internet Explorer, Firefox, Safari, Opéra).
• Mise en ligne d’un site (paramétrages...)

PHOTOSHOP module 1 (2 jours)

OBJECTIFS Savoir utiliser les outils graphiques appropriés permettant de réaliser une maquette de site en fonction des
contraintes liées au web.
Les participants aborderont les étapes principales du traitement de l’image numérique, la retouche d’image, le montage
photographique, le détourage et les outils principaux du logiciel Photoshop, correspondant à ces différentes étapes

PRE-REQUIS : Une maîtrise de l’environnement Windows ou Mac/Os est nécessaire

PUBLIC VISE : Graphiste, maquettiste, illustrateur, photographe.

CONTENU DU MODULE

• Choix de la résolution Bitmap vectorielle
• Numérisation (destination d'image, mode de calcul ) les principes des images bitmap (définies par ensembles de points)
• Scan d'imprimés et dé tramage. Principe des images Vectorielles (définies par éléments géométrique
• Recadrage. Avantages et inconvenients des 2 catégories
• Taille, poids et qualité d'image (sans compression). Personnalisation, réglage des préférences
• Calcul de poids d'une image. Organisation des palettes
• Rééchantillonage d'une image. Sélections et traitements d'éléments d'images
• Comparaisons taille/poids/qualité colorimétrie. Techniques de sélections et manipulations de parties d'images.
• Corrections colorimétriques et tonales
• Corrections colorimétriques et tonales
• Ajout suppression de sélection (par masque temporaire.
• Réglage de la plage tonale (niveaux, tons foncés/clairs, histogramme)
• Transformation de sélections (Rotation, échelle, torsion,)
• Suppression de dominante couleur (Balance des couleurs, RVB, CMJ)
• Sélection à contours progressifs Remplacement de couleur (teinte, saturation,luminosité)
• Dilation/contraction d'une sélection. Bichromie et tons directs (Mode Multicouches, eps, DCS)
• Recadrage d'une image. Niveaux et Courbes
• Rééchantillonage d'une image (résolution mini). Point Blanc/Noir
• Principe de la couleur (notions élémentaires)
• Alignement des formes
• Notion de couleurs (lumière/pigments)
• Ajout et suppression de formes
• Mode de travail colorimétrique. Outil plume et ses variantes (techniques de tracés des courbes de bezier)
• Conversion de tracé de travail en sélection pixélisée Bitmap
• Conversion de tracé de travail en masque de calque
• Tracés de travail et de formes.