11
Création d’un site en ligne avec Weebly :

Documentation weebly

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Documentation weebly

Création d’un site en ligne avec Weebly :

Page 2: Documentation weebly

Sommaire

1 CONNEXION À WEEBLY :........................................................................................................................ 3

2 TRAVAIL DANS WEEBLY......................................................................................................................... 4

2.1 CHARTE GRAPHIQUE DU SITE :......................................................................................................................4

2.2 ARBORESCENCE DU SITE :............................................................................................................................5

2.3 CONTENU DES PAGES :................................................................................................................................6

2.4 MISE EN PLACE DE DIFFÉRENTS TYPES D’ÉLÉMENTS ET PERSONNALISATION :..........................................................7

2.4.1 Description des éléments du sous menu « de base » :......................................................................7

2.4.2 Description des éléments du sous menu « multimédia » :.................................................................8

2.4.3 Mise en place de contenu non prévu par weebly (carte google, catalogue electronique…)..............9

3 PUBLICATION DU SITE :.......................................................................................................................... 9

Page 3: Documentation weebly

1 Connexion à Weebly   :

Connecter vous à l’adresse suivante : http://www.weebly.com/?lang=fr

L’écran suivant apparaît, permettant de modifier le site sur lequel on veut travailler en cliquant sur Modifier

3

Saisir dans login ici votre nom d’utilisateur et votre mot de passe puis cliquer sur connexionZones à

remplir pour un nouveau compte weebly

Page 4: Documentation weebly

2 Travail dans Weebly

L’écran de travail de Weebly est composé de deux parties : le menu principal (horizontal) et le sous menu (vertical ; côté gauche de l’écran). Le contenu du sous menu est lié au choix d’un onglet du menu principal .

2.1 Charte graphique du site :

Pour commencer le site, il faut choisir « un décor », c’est à dire l’ensemble des éléments de présentation du site : place du menu, couleur, type de caractères…Cela se fait dans l’onglet « conception » du menu principal. Dans le sous menu, aller dans la rubrique « tous les thèmes » afin de sélectionner le « décor » voulu.

On pourra ensuite personnaliser le thème choisi (type, couleur et taille de police) dans le sous menu « options de conception ». En ce qui concerne le changement de la bannière (photo de la partie haute du site), il suffit de se placer sur l’image pour voir apparaître le bouton « edit image ». L’édition de l’image fait apparaître le menu suivant :

4

Menuprincipal

Sous menu

Onglet « conception »

Rubrique des thèmes

Ajout d’une image (ici 960*250 pixels)

Ajout de texte sur l’image)

Différents effets : rognage, rotation, opacité, effacement partie image, effets (sepia….)

Page 5: Documentation weebly

Ne pas oublier de valider les changements avec le bouton « save » ou de quitter sans sauvegarder avec le bouton « cancel ».

2.2 Arborescence du site :

Une fois le décor choisi, il faut définir les pages et sous pages du site dans l’onglet « pages » du menu principal. Pour chaque page, on clique sur le bouton « nouvelle page » puis on saisie son nom dans la rubrique « nom de la page ». Si cette page doit être une sous page, il suffit de décaler son nom sur la droite dans le bandeau de gauche. Attention, la première page est automatiquement la page de garde du site, c’est à dire la première sur laquelle on sera lorsque l’on visitera le site. On l’appelle en général « accueil » mais elle peut être renommée. Elle est identifiée par le logo représentant une maison.

Pour chaque page, on va définir des « paramètres avancés » qui serviront notamment au référencement du site : le titre de la page ; la description de la page… ne pas hésiter à répéter les mots clés qui semblent importants (un lieu géographique, une activité…)

5

Bouton nouvelle page

Renommer la page ici

Page de garde

Sous page créée en déplaçant le nom de la page vers la gauche

Accès à la définition des paramètres avancés

Boutons « save » et « cancel »

Page 6: Documentation weebly

2.3 Contenu des pages :

Se placer sur la page à créer ou modifier puis aller dans l’onglet « éléments » pour indiquer le contenu de la page.

On fait glisser un élément (par exemple « paragraphe avec titre » dans la page. Cela génère automatiquement une zone contenant un titre et du texte.

On peut imbriquer plusieurs éléments : par exemple, on commencera par faire deux colonnes puis dans chacune, on glissera un autre élément (« paragraphe avec titre » et « photo » …). Cela donnerait l’écran suivant :

6

Page 7: Documentation weebly

les images peuvent venir du micro, de la galerie photo de weebly ou d’internet

2.4 Mise en place de différents types d’éléments et personnalisation :

Outre les éléments de bases (texte, image), on va pouvoir rajouter dans weebly des éléments plus élaborés. Ils pourront être réalisé dans weebly (un diaporama, un formulaire de contact…) ou bien réalisé dans une autre application internet (carte routière avec google map, un catalogue en ligne, l’insertion d’une zone météo…). Dans ce deuxième cas, il faudra récupérer sur une application internet tierce le code html correspondant à l’application voulue et l’insérer dans weebly.

Pour chaque élément que l’on insère, un menu correspondant apparait sous les boutons d’éléments :

7

Chaque zone peut être supprimée grâce à ce bouton

Flèche de déplacement ou de copie de la zone vers une autre page

Page 8: Documentation weebly

2.4.1 Description des éléments du sous menu «   de base   »   :

Pour un élément de type « paragraphe avec titre » ou « titre » ou « paragraphe », le menu correspondant va permettre de présenter le texte (gras, italique, souligné, taille de caractères, couleur, mise en place d’un lien hypertexte, alignements)

Pour un élément de type « photo », on pourra changer l’image, lui mettre une bordure de différentes couleurs, placer l’image dans la zone et gérer les marges dans le bouton avancé

Pour un élément de type « formulaire de contact » :

Lorsqu’on glisse le formulaire de contact dans une zone d’une page, on obtient les éléments suivants :

Chaque zone du formulaire ou le bouton d’envoi peuvent être personnalisé (et notamment francisé) grâce au menu correspondant (que l’on obtient en sélectionnant la zone à modifier):

8

Boutons d’éléments

Menu correspondant à l’élément sélectionné

Sous menu « de base »

Zone nom

Zone mail

Zone commentaire

Bouton d’envoi

Préciser si la saisie est obligatoire ou

Titre du formulaire

Page 9: Documentation weebly

D’autre par, pour paramétrer l’ensemble du formulaire (à quelle adresse mail envoyer les réponses, voir les réponses déjà faites), on utilisera les boutons placés juste au dessus du formulaire :

On peut rajouter des champs au formulaire grâce aux boutons apparu dans le menu :

2.4.2 Description des éléments du sous menu «   multimédia   »   :

Pour un élément de type « galerie photo », on pourra rajouter des photos (pour les supprimer, il suffit d’utiliser la croix rouge placée au dessus de chaque photo)

2.4.3 Mise en place de contenu non prévu par weebly (carte google, catalogue electronique…)

Grâce au bouton « HTML personnalisé » des éléments de base de weebly, on peut introduire n’importe quelle application dont on a le code HTML.Par exemple, pour une carte google maps :

- Aller sur le site de google maps (http://maps.google.fr/) et faire afficher la carte voulue.- Cliquer ensuite sur le bouton « lien » de googla maps et copier (edition/copier) le contenu de

la ligne commencant par « iframe »

9

Saisir ici l’adresse du mail où envoyer les réponses

Voir ici les réponses déjà faites

Bouton lien

Ligne à copier

Page 10: Documentation weebly

- Revenir dans weebly et créer une zone « html personnalisé » puis y coller le texte html recupéré dans google maps. Cela ressemblera à cela :

- En sortant de la zone « html personnalisé », le contenu sous forme de carte apparaitra.

Pour un catalogue en ligne :

Les sites : http://fr.calameo.com ou http://issu.com permettront, après avoir créé un compte gratuit, de générer des catalogues à partir de fichiers word, pdf, excel…Là aussi, un bouton lien permettra de récupérer le code html correspondant et de l’introduire dans votre site.

3 Publication du site   :

Au fur et à mesure des modifications du site, il faudra le publier pour que ces modifications soient visibles par le visiteur. Pour cela , utiliser le bouton Publier en haut à droite du menu weebly.

Quand vous êtes en nom de domaine gratuit (nom.weebly .com), il vous proposera à chaque fois de changer de nom, ce qui amène à un écran de ce type :

10

Utiliser ce lien pour voir votre site mis à jour

Utilisez ce bouton si vous voulez acheter le nom de domaine proposé par weebly (40€ par an)