PROJET

DATE LIEU20 MARS 2012 LCP SALLE B105

création du site internet avec Weebly

Se connecter à WeeblyPour commencer, rendez-vous sur la page d'accueil de Weebly à l'adresse suivante : http://www.weebly.com

Puis inscrivez-vous sur le site en renseignant les champs de texte nécessaires.

N'oubliez pas de cochez la case pour acceptation des conditions d'utilisation du site (que vous aurez lues bien entendu auparavant). Et pour finir, cliquez sur le bouton SIGN UP.

Créer un site avec WeeblyLors de votre première connexion, Weebly vous proposera automatiquement de créer votre tout premier site. Vous devrez tout d'abord commencer par choisir un nom pour votre site. Choisissez un nom simple et parlant. C'est ce nom qui apparaîtra en en-tête de toutes les pages de votre site.

Le site vous demande ensuite de choisir une adresse pour votre site. Par défaut Weebly, vous propose une adresse reprenant le nom de votre site.

Attention : par convention les adresses des sites Internet ne comporte jamais ni majuscule, ni espace.

Modifier l’adresse en conséquence !

Créer un site avec Weebly

Attention également, pour définir l'adresse de votre site, Weebly vous propose de choisir entre trois cas de figure différents.

Choisissez l'option A qui est gratuite et sécurisée puisque votre site sera hébergé par Weebly

Définir le style de son site

Avant de vous lancer dans la création de votre site, vous devrez en définir le design, c'est-à-dire le style. Pour cela cliquez sur l'onglet "conception" en haut de votre écran. Faites défiler les différents styles à votre disposition dans la bannière horizontale.

Lorsque vous laissez votre curseur sur une imagette, le style en question s'affiche.

Pour le sélectionner définitivement, cliquez sur l'imagette correspondante.

n.b : cochez vos design préférés pour en faire vos favoris!

Créer une page avec weebly

Ajouter des éléments simples à votre page

L'utilisation de Weebly est relativement simple. Son fonctionnement est basé sur la méthode du glisser/déposer (drag&drop). L'écran de Weebly se divise en deux espaces.

En haut la barre d'outils horizontale.

En bas, l'espace de travail.

Dans la barre d'outils, sélectionnez l'onglet "Eléments". Vérifiez que le sous-domaine "De base" est bien sélectionné. La Barre d'outils vous permet alors d'ajouter du texte et des images à votre page.

Pour se faire, rien de plus simple. Sélectionnez d'un simple clic l'icône de l'élément que vous désirez ajouter à votre page. Ne relâchez pas le bouton de votre souris, et venez déposer l'élément à l'endroit désiré sur votre page. Relâchez le bouton, lorsque l'objet est bien positionné.

Ajouter des éléments simples

Une fois l'élément positionné, il suffit d'un clic pour l'éditer : remplir du texte, le mettre en forme, sélectionner une image sur votre disque dur.

Exercice : création de la page d’accueil

Ajouter des éléments simples

Ajouter des éléments complexes

Ajouter des éléments complexes

Weebly vous permet également d'ajouter des éléments plus complexes sur vos pages.

Pour les découvrir, sélectionnez, dans l'onglet "Eléments" de la barre d'outils, le sous-domaine "Multimédia".

Vous pourrez ici ajouter différents éléments plus ou moins interactifs à votre site. Prenons l'exemple d'un élément Google Map.

Ajoutez l'élément Google Map par un glisser/déposer sur votre espace de travail. Cliquez sur l'élément et définissez ses caractéristiques : choisissez le lieu à montrer, le fond, la position et la taille de la carte...

Attention, certains éléments complexes sont réservés à la version "pro" payante de Weebly.

Ajouter des éléments complexes

Effacer un élément simple ou complexe de votre page

Il est également très simple d'effacer un élément de votre page.

Pour se faire, survoler l'élément à effacer avec le curseur de votre souris. Le cadre bleu de l'élément apparaît alors en surbrillance. Cliquez sur la petite croix rouge en haut à droite du cadre : l'effacement de l'élément est soumis à votre approbation.

Insérer une nouvelle page

Une site Internet ne vaut que s'il est constitué de plusieurs pages. Pour créer des pages supplémentaires, sélectionnez l'onglet "Pages" de la barre d'outils. Puis cliquez sur "Add Page". Vous pouvez dès lors donner un nom à cette page et commencer à l'éditer.

Attention, par défaut, Weebly crée une barre de navigation sous le titre du site : chaque page y apparaît afin de permettre à l'internaute de passer de l'une à l'autre. Si vous ne souhaitez pas que la page apparaissent dans le menu de navigation, décochez la case correspondante.

N'oubliez pas de cliquer sur "Sauvegarder les paramètres" à chaque création de page.

Insérer une nouvelle page

Créer des liens hypertextes entre vos pages

Vos pages sont créées. C'est bien ! Maintenant il faut les lier entre elles. Pour se faire, vous disposer dans chaque élément texte d'un outil "lien hypertexte", reconnaissable à son icône en forme de chaînon. Sélectionnez le texte sur lequel créer le lien, cliquez sur l'icône.

Weebly vous propose alors de créer des liens vers les pages de votre site ; mais également vers des pages extérieures sur le Web, vers des fichiers, et même vers des adresses mail.

Sélectionnez la page qui convient, ou spécifiez l'adresse de votre choix. Puis cliquez sur "Save".

Créer des liens hypertextes entre vos pages

Publier son site avec weebly

Publier son site

Publier son site avec Weebly est également très simple. Cliquez tout simplement sur le bouton "Publiez" de votre barre d'outils. Weebly vous indique alors l'adresse de votre site. C'est tout !

Publier son siteVous pouvez également modifier le site à tout moment.

Pour cela, reconnectez-vous sur le site de Weebly.

Votre espace personnel présente tous les sites que vous avez créés. Cliquez sur "Modifier" tout simplement. Lorsque toutes les modifications auront été effectuées, cliquez à nouveau sur le bouton "Publiez" de votre barre d'outils.

Version pro

Images

Les images uploadées peuvent être modifiées avec quelques outils intégrés :

- luminosité, contraste, saturation, rognage, etc...

Diaporama

Possibilité de créer un diaporama en uploadant les photos sous différents formats (jpeg, bmp, png,...)

Vidéos

Ce composant est payant!

Démonstration:

http://www.weebly.com/features.php

MERCI POUR VOTRE ATTENTION!MERCI POUR VOTRE ATTENTION!