Concevoir un site Web de A à Z Ce cours permet à létudiant de réaliser de façon professionnelle un site internet de A à Z.

Slides:



Advertisements
Présentations similaires
SI28 FLASH MX Partie 1 Jérémy Dufetre - Ludovic Pilache.
Advertisements

Gérer un site avec Kompozer
12 novembre 2012 Grégory Petit
Intégration des images
Mars 2013 Grégory Petit
Prologue : les premiers préparatifs Première étape : Ouvrir le logiciel de création de pages au format HTML (pages Web) Deuxième étape : enregistrer la.
Photoshop3 Caméra Modifier les couleurs Revenir sur les calques et leur utilisation. Exercice sur lintégration des images de diverses façons Enregistrement,
Les présentations assistées par ordinateur (préAO)
Pourquoi est-il nécessaire d'installer de nouveaux logiciels sur votre ordinateur ? J'exclus de cette présentation l'installation de nouveaux matériels.
Formation Site Web Animation Pédagogique Ecole de Dommartin.
Lancement de Microsoft Word
Traitement de texte +.
Concevoir un site web de A a Z Cours 3. Aujourd’hui Découper sa page en tranche pour une intégration graphique optimale avec Photoshop L’intégration des.
S'initier au HTML et aux feuilles de style CSS Cours 5.
POWERPOINT.
Principes, usages et conception
S'initier au HTML et aux feuilles de style CSS Cours 5.
SI 28 - Écriture interactive & multimédia Dreamweaver Séance 1 Petit Clara & Palfart Julien Printemps2008 Printemps 2008.
Plan de formation Publisher
Création d'un fichier image
Adobe Photoshop Création Bitmap.
Création d’un site Web -Création « Graphique » de pages Création « Graphique » de pagesCréation « Graphique » de pages -Le graphisme Le graphismeLe graphisme.
Dreamweaver Séance 1.
Premiers pas avec Flash
SI28 Dreamweaver- Séance 1
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
Présentation de Dreamveawer
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
Adobe Photoshop CS2 Morand-Pinçon David Michaut Charlotte SI28 – Ecriture intéractive et multimédia R R.
Bloc 1 - UE 5 - Technologies de l’information et de la communication TIC Bachelier en immobilier T. SOUMAGNE.
Présentation du Logiciel Photoshop 6.0
FLASH MX 1ère Séance. Introduction Création d’animation pour le Web, pouvant contenir une forte interactivité. Faible poids des fichiers. Compatible avec.
Présentation Dreamweaver 8 (1) Nina BOUAZIZ et Matthieu DI RUSSO SI28.
Guillaume MICHAUD – Yvan LECOMTE
SI 28 – Image Ready NJIWOUA Franck GI 02. Présentation d’Image Ready Image ready : Image ready : - Complément de Photoshop pour le traitement d’images.
FLASH MX : séance 1 Vivien FILIPPINI Jeanne VERRE Exposé SI28.
DREAMWEAVER Première séance Villaron Audrey – Shibly Tarek.
Exposé DREAMWEAVER 2 Guillaume DUBREUIL Adrien HADOUX.
Photoshop SI28 . P07 Fanny Fourmentez . Clémence Debaig.
SI28 Partie 1 Bruno Binet FLASH MX. Les atouts de Flash Création d’animation pour le Web, pouvant contenir une forte interactivité Faible poids des fichiers.
Pluvinage Raphaël – Si28. Pour quoi faire? / / Logiciel de graphisme orienté vers le web, dérivé de Photoshop (Même Interface) / Utilisation : Optimisation.
Mathieu Pluvinage Marie Vilain
Photoshop 6 Brandenbourger Clément Morisset Ludovic.
Flash MX er Séance LIU Xinlei GI02.
Plan de la présentation Le langage HTML Dreamweaver MX Les premiers outils pour créer une page web :  Propriétés d’une page  Création de cadres  Création.
SI28 Malépart Céline Jérémy Palmier
Davy Olivier - SI28 - Séance du 20/10/2004. Ce logiciel offre de nombreuses possibilités, dont voici quelques exemples :  Correction et retouche d'images.
Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008.
Ha Thi Binh Minh & Favre Eric
SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P PRESENTATION Dreamweaver 2.
Sophie Bernier – Pierre Badelon SI28 - Séance du 14/11/2006 Exercices :
SI28 Flash séance 1 Dessins et Animations. Présentation de Flash  Création d’animations pour le Web, pouvant contenir une forte interactivité.  Faible.
Photoshop 6.0 Mathieu GASPARD Nicolas HEITZ SI28.
DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Écriture interactive & multimédia Présentation Dreamweaver 8.
Photoshop CS 2
DREAMWEAVER MX2 - Séance 2 Les calques Les comportements Les scénarios Les formulaires Les feuilles de style Les modèles Les cadres Mise en ligne Jérôme.
On va découvrir la magie de ....
SI 28 - Présentation Image Ready Aurélie Letenoux GSU 4.
SI28 : Adobe Image Ready 3.0 Agathe Edange.
Elise Pierrot, GSU04 ImageReady, traitement d’image pour le WEB Présentation SI28.
Introduction au HTML Qu’est ce que le HTML ?
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
AKOONE Farouck LI Li SI 28 A2004. Flash permet de : Créer des animations pour le Web, pouvant contenir une forte interactivité Des fichiers de faible.
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
Université de Picardie Jules VerneLuis Pires Adobe Illustrator 1.Introduction 2.Formats 3.Applications 4.Interface 5.Fonctionnalités.
LAMOUR Mathieu Présentation du logiciel SI28 Automne 2004.
Garcia Patrick - Moutel Mathieu. SOMMAIRE Introduction à Photoshop Les différents formats d’images L’espace de travail Les calques Les filtres.
SI28 : Adobe Image Ready 3.0 Alexandre Clienti. Utilité du logiciel :  Logiciel de graphisme orienté vers le web, dérivé de photoshop (interface quasi-identique)
Présentation Courtin maxime – GI05Automne Présentation | Rappel Photoshop | ImageReady | Utils Courtin Maxime – GI05 2 / 17 Automne 2004 Plan :
1 er séance SI28 A2004 YIN Lei Emmanuel Eugene. Plan de l’exposé  Introduction au HTML  Le HTML dans le bloc-notes (notepad)  Présentation de Dreamweaver.
Transcription de la présentation:

Concevoir un site Web de A à Z Ce cours permet à létudiant de réaliser de façon professionnelle un site internet de A à Z

Présentation des gens Le prof et les élèves, tour de table. - Quelles sont vos connaissances actuelles? - Pourquoi avoir choisit ce cours?

Présentation du cours -Utilisation de Dreamweaver -Notions de HTML -Design graphique du site en Photoshop -Intégration des tranches dans Dreamweaver -Lutilisation du service FTP pour les transfers de fichier

Aujourdhui -Exploration des outils: Dreamweaver et Photoshop -Exercices de base

Photoshop Photoshop est un logiciel de retouche, de traitement et de dessin assisté par ordinateur édité par Adobe. Photoshop est un logiciel travaillant sur des images bitmap. Ces images sont constituées de pixels. Reconnu par les infographistes professionnels à travers sa galerie de filtres et doutils graphiques, il est maintenant enseigné dans les plus grandes écoles. La version 1.0 date de 1990

Photoshop Alternatives: Le logiciel libre GIMP, Pixia, Paint.Net et CorelDraw

Formats supportés Photoshop possède son propre format de projet (PSD), qui est plus quun simple format de fichier. Le programme accepte également dimporter et dexporter des fichiers dimage dans les formats les plus courants (GIF, JPEG, TIFF, PNG, ILBM, etc.).

Barre de menu Espace de travail Barre doutil Fenêtres de couches Barre de paramètres de loutil

Photoshop Exploration des outils de base - La main - La flèche - Loutil de sélection et baguette magique - Découper (Crop) - Le crayon, le pinceau - Létampe - Loutil de texte

Photoshop Régler lopacité Les couches (Calques) - Le classement - Les outils de vérouillage - Les masques - Les filtres Les couleurs Interagir entre divers espaces de travail

Photoshop Quelques filtres - Le brouillage - Texture craquelure - Éponge Lajustement des niveaux Les options de sauvegarde

Laboratoire Rendre limage « St-tite » plus acceptable avec les outils précedemment utilisés Faire le montage suivant: Modifier la tête de Sarkozy ou Charest avec une tête danimal

Dreamweaver Adobe Dreamweaver un éditeur de site web de type WYSIWYG. Utilisable autant par le néophyte que par le professionnel. L'utilisateur peut choisir entre un mode création permettant d'effectuer la mise en page directement à l'aide d'outils simples, comparables à un logiciel de traitement de texte (insertion de tableau, d'image, etc). Il est également possible d'afficher et de modifier directement le code HTML qui compose la page. Il offre la possibilité de concevoir des feuilles de style et les liaisons avec des bases de données.

Dreamweaver Alternatives: Microsoft Expression Web, les logiciels libres Kompozer et Nvu.

Barre de menu Barre de document Contenu de la page HTML (À cause du mode Code) Barre de codage Barre de propriétés Gestion des sites web et des fichiers

Dreamweaver Exploration des outils de base - Mode code/split/design - Gestion des sites web - Création du premier fichier index.html - Utilisation des propriétés - Insertion des images

Dreamweaver Survol du HTML - Le titre - Les hyperliens - Les tableaux - Les balises et ses attributs - h1 a h5, balises de titre - gras, italique, souligné - les listes

Dreamweaver Apprendre a gérer les fichiers Voir le résultat dans un navigateur

Laboratoire Faire un site web avec deux pages Chacune de ces pages doit posséder un hyperlien menant vers lautre page Mettre une image dans chaque page

Laboratoire Reproduisez le plus fidèlement possible le site web suivant:

Devoir Penser au thème de votre site Penser à la structure hiérarchique Préparer des textes en format.doc pour chaque page