présente Conception d’un petit site Web

2 4-nov-03© Préambule Cette présentation fait suite à celle intitulée « Imaginer, concevoir, mettre en ligne et maintenir un site Web » qui décrit tous les points auxquels il faut prêter attention avant la réalisation d’un site. Nous aborderons cette fois-ci l’aspect pratique de la conception d’un petit site.

3 4-nov-03© Agenda Bref rappel des points essentiels de la précédente présentation. Mise en place d’un site avec l’offre Apple. Intégration d’un album photo avec un site web. Mise en place d’un site avec l’offre de Voila.com. Outil un peu plus complet : Contribute 3.0 de Macromédia

4 4-nov-03© Rappel des épisodes précédents - 1 Un bon site ne peut être réalisé qu’avec de bons ingrédients. (Images suffisamment grandes, de bonne qualité, texte en quantité suffisante, divers éléments graphiques pour la mise en page…)

5 4-nov-03© Rappel des épisodes précédents - 2 Vous concevez votre site web sur votre ordinateur. Un site Web contient plusieurs fichiers (images, pages, etc). Ces fichiers se trouvent sur votre machine. Pour que les gens puissent se connecter à votre site Web il faut que les fichiers soient téléchargés sur un serveur Web. (machine accessible 24h/24 partout dans le monde) Via FTP on télécharge les fichiers sur le serveur. INTERNET FTP Serveur Web : Identifiant : monidentifiant Mot de passe : monmotdepasse Sur votre ordinateur vous concevez votre site, puis vous le téléchargez sur un serveur web. Internautes se connectent au site HTTP

6 4-nov-03© Un album photo lié à un site web - 1 L’offre Apple permet de gérer ses photos dans une application dédiée (appelée iPhoto). Il est possible de mettre en ligne une sélection de photos en deux clics de souris via « Homepage ». Un ensemble d’outils Web présents dans l’offre.mac savent communiquer avec certains programmes présents sur le Macintosh.

7 4-nov-03© Un album photo lié à un site web - 2 Voici l’album photo. On sélectionne un certain nombre de clichés On clique sur le lien « homepage » qui est l’éditeur de pages Web.

8 4-nov-03© Un album photo lié à un site web - 3 Un certain nombre de modèles de présentation sont proposés dans un onglet latéral. (encadrement des photos, fond d’écran, etc)

9 4-nov-03© Un album photo lié à un site web - 4 Il est possible de présenter le site en deux ou trois colonnes. Un compteur de visite ainsi qu’un lien pour envoyer un courriel sont également disponible. Il ne reste plus qu’à cliquer sur le bouton « Publish » pour publier le site sur votre web.

10 4-nov-03© Un album photo lié à un site web - 5 Homepage propose différents types de pages pour votre site web : Album de photos Album de vidéos Partage de fichiers Menu de site CV Etc

11 4-nov-03© Un album photo lié à un site web - 6 Un site web construit en 5 minutes !

12 4-nov-03© Créer un site web avec Voila.com - 1 Voila.com propose via son site web de concevoir des sites web très simples. Il y a deux modes de fonctionnement : –Gestion de sites avec l’aide d’un assistant (ce que nous allons voir) –Uniquement offre d’hébergement. (un client FTP via le web pour télécharger vos réalisations est proposé) Des modèles de présentation de pages web sont fournis. Les couleurs peuvent être choisies par l’utilisateur.

13 4-nov-03© Créer un site web avec Voila.com - 2 Des modèles de présentation de pages web sont fournis. Les couleurs peuvent être choisies par l’utilisateur. Dans la figure de gauche se trouve un exemple de modèle de présentation.

14 4-nov-03© Créer un site web avec Voila.com types de modèles de mise en page sont proposés.

15 4-nov-03© Créer un site web avec Voila.com - 4 Il est possible de modifier l’aspect des caractères. (taille, police de caractères, style, couleur, etc) Les cases de commande peuvent être affectées d’un fond spécifique sélectionné parmi une liste proposée.

16 4-nov-03© Créer un site web avec Voila.com - 5 Ci-contre le site en cours d’élaboration. Les zones vertes indiquent les différentes parties qui peuvent être modifiées sur la première page du site via l’interface.

17 4-nov-03© Créer un site web avec Voila.com - 6 D’autres modèles sont accessibles pour les pages du contenu du site. On remarque sur la gauche une mini-présentation de l’architecture du site. 8 pages en plus de la page de garde sont disponibles pour votre site.

18 4-nov-03© Créer un site web avec Voila.com - 7 Ci-dessus une page de contenu du site présenté sous forme de deux colonnes. Chaque colonne comporte un style qui lui est propre.

19 4-nov-03© Créer un site web avec Voila.com - 8 Notre site accédé à l’adresse suivante : Il n’y a qu’une page qui apparaît dans le menu de la 1ère page car une seule page à été mise en ligne. (la page de présentation) On remarquera le bandeau publicitaire de VOILÀ en haut de la fenêtre. Ce dernier ne peut pas être supprimé.

20 4-nov-03© Contribute - 1 Contribute de Macromedia offre de riches fonctionnalités de gestion de sites Web. Il permet le travail collaboratif. Il est très simple pour réaliser des modifications de sites déjà en ligne.

21 4-nov-03© Contribute - 2 Il est possible de « reprendre » un site déjà en ligne…

22 4-nov-03© Contribute - 3 Les principales étapes sont : Se connecter à un site Web Rechercher une page à modifier Modifier une page Web Publier les modifications

23 4-nov-03© Contribute - 4 Différents modèles sont proposés avec le logiciel pour concevoir des sites de différents types.

24 4-nov-03© Conception de petits sites Web Pour information les sites Web conçus par sont réalisés avec Golive de la société Adobe.

25 4-nov-03© Conception de petits sites Web Questions ?