TUTORIAL. TUTORIAL. Créez en quelques minutes votre site Internet!

Transcription

1 Créez en quelques minutes votre site Internet!

2 SOMMAIRE : Choisir une interface graphique - Nommez votre site... page 03 5 étapes de création... page 04 Les outils de création graphique... page 05 Mise en forme simple... page 06 Présentations avec alignements à gauche ou centré... page 07 Insertion d une image... page 08 Enregistrement - Mise en ligne... page 09 Création de page avec tableau... page 10 Propriétés du tableau... page 11 Propriétés des cellules... page 12 Insertion d une image dans le tableau... page 13 Insertion de texte dans le tableau... page 14 Fusionner deux cellules... page 15 Création d une colonne... page 16 Finition du tableau... page 17 Création d un lien hypertexte... page 18 Formules de création de lien et URL... page 19 Finition et mise en ligne... page 20

3 3 Pour créer votre site Internet, cliquez sur le lien : «Votre Site Internet» 1- Choisissez dans les modèles présentés celui qui vous convient en cliquant dessus. Les flèches de défilement permettent de choisir parmi les interfaces graphiques disponibles. Donnez un nom à votre site. Créez votre sous-domaine. Par exemple : monassociation.association-service.com Insérez le logo de votre association. Nommez les 5 pages de votre site. Attention : certaines interfaces limitent le nombre de caractère à 10.

4 4 Vous êtes maintenant prêt à créer votre première page Internet. Cliquez sur le lien : «Modifier la première page». Vous pouvez créer votre page depuis l écran qui s affiche. La fenêtre de travail est réduite. Vous pouvez l agrandir à la taille de votre écran en cliquant sur le lien : «Ouvrir l espace de travail dans une fênetre plus grande» Deux modes de création sont à votre disposition. Le mode «Design» et le mode «HTML». En mode Design, vous pouvez créer votre page directement dans l espace de travail figurant à l écran. En mode HTML, vous pouvez créer votre page dans un logiciel spécialisé et ensuite copier le code source dans le générateur de site Association-Service. Attention : dans ce cas il faut toutefois importer toutes les images une à une sur le serveur Association-Service. A défaut, elles seraient invisible à l écran. Pour opter pour l un ou l autre mode, il suffit de cliquer sur le lien correspondant en bas à droite de la zone de travail.

5 Les outils de création graphique : 5 Action antérieure Numéros Créer un lien Importer une image Importer une animation Flash Supprimer les styles html Type de caractères Gras, Italique, Souligné, Barré Augmenter les marges à gauche Couleur du texte Exposant Action suivante Puces Défaire un lien Propriétés d une image Créer un trait de séparation horizontal Afficher/ Cacher les bordures Alignements Augmenter les marges à droite Couleur du fond Indice Police Créer un tableau Propriétés de la cellule Insérer colonne Supprimer colonne Partager la cellule horizontalement Partager la cellule verticalement Taille Propriétés du tableau Insérer ligne Supprimer ligne Fusionner avec cellule de droite Fusionner avec cellule du bas

6 MISE EN FORME SIMPLE Une première solution consiste à créer une page très simplement comme si vous écriviez une lettre. Placez le curseur en haut à gauche de votre zone de travail. Insérez vos textes. Mettez vos textes en forme avec les outils d alignement, de taille, de police de caractère, de couleur,... en cliquant sur les outil correspondants. 6 Palette de couleur pour texte, fonds,...

7 7 Présentation avec alignement du texte à gauche Présentation avec alignement centré du titre et de l image

8 8 INSERTION D UNE IMAGE Pour insérer une image, il faut cliquer sur le bouton : «Importer une image». Attention : attendez l affichage complet de l écran d importation : A défaut, cliquez sur le bouton d agrandissement en pleine page en haut à droite de votre écran. Les images qui s affichent sont celles qui sont déjà enregistrées sur le serveur Association-Service. Si l image que vous souhaitez insérer n y figure pas, il vous faut tout d abord la télécharger sur le serveur Association-Service avant de pouvoir l insérer dans votre site en création. L opération est très simple. Cliquez sur le bouton «Parcourir», puis sélectionner parmi les fichiers sur votre ordinateur, l image que vous souhaitez importer. Cliquez sur le bouton «Envoyé» Votre image est maintenant transférée sur le serveur Association-Service. Il vous suffit maintenant de cliquer sur le bouton OK pour insérer votre image dans votre page Internet. Attention : pour des facilités d affichages, optez pour des images de faible dimension et au format jpg, png, gif. Astuce : pour animer vos pages, insérez des animations Gif.

9 Votre page est maintenant créée. Il vous faut maintenant l enregistrer sur le serveur en cliquant sur «Envoyer». 9 Attention : pour mettre en ligne vos créations ou modifications, il faut impérativement cliquer sur le lien : «Mettre en ligne vos modifications». Votre page est maintenant en ligne. Mon Association

10 10 MISE EN FORME PAR TABLEAU Nous allons maintenant créer une page présentant une architecture plus complexe. Les textes, images et titres ci-dessous ne constituent que des exemples vous permettant de découvrir les différentes fonctionnalités du générateur de site Association-Service. Tout d abord, saisissez le titre : PRÉSENTATION Avec les outils d alignement, de choix de caractère et de couleur, mettez en forme selon votre choix. Allez à la ligne puis cliquez sur le bouton : «Trait de séparation horizontal» Une ligne horizontale apparait sur toute la largeur de votre écran.

11 Allez à la ligne. Si vous souhaitez disposer votre texte sur deux ou plusieurs colonnes, il faut au préalable créer un tableau. Placez le curseur en-dessous de la ligne horizontale que vous venez de créer et aligné à gauche. Cliquez sur le bouton : «Créer un tableau» Nous allons créer un tableau comportant 2 ligne et 3 colonnes. Astuce : pour que votre tableau s adapte automatiquement à la largeur de tous les écrans, définissez une largeur de 100 %. Vous avez également le choix d une bordure ou non avec épaisseur de cadre. Si vous ne souhaitez pas de bordure, sélectionner o pixels. Vous pouvez également choisir une couleur de fond ou encore insérer une image en fond de tableau en utilisant les boutons à votre disposition dans le menu ci-dessous : 11 Votre tableau est maintenant visible dans votre espace de travail. Agrandissez le vers le bas en utilisant les outils d étirement aux extrémités du tableau.

12 12 Cliquez dans la cellule en haut et à gauche et cliquez sur le bouton «Propriété de la cellule» Cliquez sur le bouton d alignement «en haut» de la cellule. Astuce : définissez une largeur de cellule de 25 % du tableau afin de délimiter la largeur de la cellule. Indiquez une hauteur de 10 % par exemple. De cette façon, en inérant une image, elle s adaptera automatiquement à la dimension de l image. Cliquez sur OK. Procédez de même avec la cellule du milieu en haut. Cliquez sur OK.

13 13 Cliquez dans la cellule en haut à gauche. Insérez une image selon le mode d insertion vu précédemment (page 8). Celle-ci, selon sa taille, occupera éventuellement tout l écran. Redimensionnez l image en agissant sur les coins. Réduisez l image de façon à ce qu elle s adapte aux dimensions de la cellule. Vous observerez qu en dessous d une certaine dimension de l image, la cellule conserve ses proportions.

14 14 Insérez maintenant du texte dans la cellule voisine de l image. Cliquez dans la cellule en bas à gauche et définissez les mêmes paramètres de cellule que précédemment, mais sans limitation de hauteur. Cliquez sur OK.

15 Nous allons maintenant fusionner les deux premières cellules du bas. Pour cela il suffit de cliquer à l intérieur de la cellule de gauche, puis de cliquer sur le bouton : «Fusionner avec la cellule de droite». Les deux cellules ont fusionné pour n en faire qu une seule. 15 Saisissez maintenant votre texte dans cette nouvelle cellule.

16 Définissez les propriétés de la cellule en haut à droite de votre tableau. Cette cellule aura une largeur de 50 %, représantant ainsi la seconde moitié de l écran. Cliquez sur OK. 16 Cliquez dans la cellule en haut et à droite et fusionnez avec la cellule du bas. Une colonne complète est maintenant disponible.

17 17 Complétez cette colonne avec du texte que vous mettrez en forme selon vos souhaits avec les outils de texte (alignement, augmentation de marge, police, couleur, etc...)

18 18 LIEN HYPERTEXTE : Nous allons créer maintenant au bas de la page un lien de contact par . Pour cela, il vous suffit de saisir le texte que vous souhaitez : Par exemple : contact : monassociation@association-service.com Pour créer un lien hypertexte de contact par , il vous suffit de sélectionner la zone de texte souhaitée :

19 19 Puis de cliquer sur le bouton : «Insérer un lien» Dans le champ «lien», insérez la formule suivante (sans espaces) : mailto:votre adresse Exemple : mailto:monassociation@association-service.com L adresse ci-dessus constitue un exemple que vous pourrez remplacer par toute adresse valide de votre choix. Cliquez sur OK. Votre lien hypertexte est ainsi créé. Pour créer un lien vers une adresse Internet, la procédure est identique. Il suffit de remplacer la formule précédente par l adresse Internet complète commençant par : Exemple : http//: adresse internet du site souhaité http//:

20 20 Votre page est maintenant créée. Il vous faut maintenant l enregistrer sur le serveur en cliquant sur «Envoyer». Mon Association Attention : pour mettre en ligne vos créations ou modifications, il faut impérativement cliquer sur le lien : «Mettre en ligne vos modifications». La réalisation de cette page représente un exercice qui nous aura permis de découvrir les diverses fonctionnalités du générateur de sites Internet. Laissez maintenant libre cours à votre imagination et après quelques essais vous saurez réaliser un site Internet avec une présentation de qualité professionnelle.