présente Conception d un petit site Web

Transcription

1 présente Conception d un petit site Web

2 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. 4-nov-03 Comm@ssoc 2

3 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-nov-03 Comm@ssoc 3

4 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 ) 4-nov-03 Comm@ssoc 4

5 Rappel des épisodes précédents - 2 Sur votre ordinateur vous concevez votre site, puis vous le téléchargez sur un serveur web. FTP INTERNET HTTP Serveur Web : Identifiant : monidentifiant Mot de passe : monmotdepasse Internautes se connectent au site 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. 4-nov-03 Comm@ssoc 5

6 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. 4-nov-03 Comm@ssoc 6

7 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. 4-nov-03 Comm@ssoc 7

8 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) 4-nov-03 Comm@ssoc 8

9 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. 4-nov-03 Comm@ssoc 9

10 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 4-nov-03 Comm@ssoc 10

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

12 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. 4-nov-03 Comm@ssoc 12

13 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. 4-nov-03 Comm@ssoc 13

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

15 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. 4-nov-03 Comm@ssoc 15

16 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. 4-nov-03 Comm@ssoc 16

17 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. 4-nov-03 Comm@ssoc 17

18 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. 4-nov-03 Comm@ssoc 18

19 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é. 4-nov-03 Comm@ssoc 19

20 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. 4-nov-03 Comm@ssoc 20

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

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

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

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

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