Tutoriel : Comment créer un site internet ?
La conception de votre site
<< Retour au sommaire des tutoriels
Vous êtes prêts maintenant pour aborder la conception proprement dite de votre site, depuis le choix et la création de votre première rubrique jusqu'aux plus petits détails vous permettant de le personnaliser...
Qu'est-ce qu'une rubrique ?
Votre site va être composé de plusieurs rubriques qui apparaitront en tant qu'onglets dans votre menu. Elles vous permettent de classer vos informations professionnelles ou personnelles et peuvent prendre différentes formes: album photo, blog, page web, formulaire ou encore contenir un plan « google map ». Vous pouvez créer plusieurs rubriques de même type dans la limite de 13 rubriques au total par site.
Le type d'une rubrique est défini à sa création et ne peut plus être changé par la suite. Cependant, vous pouvez ajouter ou supprimer une rubrique à tout instant.
Elle peut être entièrement personnalisée du simple nom au design du fond d'écran en passant par la police ou les logos utilisés sur cette rubrique en particulier.
Créer sa première rubrique
Pour créer votre première rubrique, cliquez sur le bouton "ajouter une rubrique"
Vous avez le choix entre 4 types de rubriques, sélectionnez celui que vous voulez utiliser puis validez. Par défaut c'est le type blog qui est sélectionné.
Il ne vous reste plus qu'à donner un titre à votre rubrique, attention vous avez droit à 14 caractères au maximum, et à valider. Votre première rubrique est créée !
Le type blog :
Il va vous permettre de créer plusieurs articles que vous pourrez faire apparaître dans l'ordre chronologique ou dans l'ordre inverse à votre choix. Chaque article pourra aborder un thème différent. C'est avec ce type de rubrique que vous pourrez introduire sur votre site des contenus multimédias, en particulier des vidéos et proposer à vos visiteurs de vous laisser des commentaires.
Dans votre menu, l'onglet correspondant à un blog sera repéré par l'icône :
Le type album photo :
Pour partager toutes vos photos avec vos amis ou pour présenter vos activités à des clients...chaque album peut compter jusqu'à 150 photos que vous téléchargez très simplement à partir de votre ordinateur. Pour visualiser les photos en grand format, il suffit de cliquer sur l'une d'elles, vous pouvez ensuite les faire défiler. Vous avez même la possibilité de donner un titre à chacune et d'écrire un texte de présentation pour l'album.
Dans votre menu, l'onglet correspondant à un album sera repéré par l'icône :
Le type pages web :
C'est celui qui vous laisse le plus de liberté, l'idéal pour une page d'accueil..Organisez vos textes et vos images à votre guise,créez des liens,et rajoutez autant de pages que vous le souhaitez, un sommaire sera à votre disposition pour passer sans difficulté de l'une à l'autre.
Dans votre menu, l'onglet correspondant à des pages web sera repéré par l'icône :
Le type Google Maps :
Il vous permet d'intégrer un plan « google maps » dans votre site en faisant apparaître exactement la zone qui vous concerne, permettant par exemple à vos visiteurs de localiser parfaitement votre entreprise. Libre à eux ensuite de zoomer ou de se déplacer dans la carte.
Si par exemple vous habitez rue des Alouettes à Paris, vous pouvez proposer ceci :
Il suffit pour cela de coller le code HTML fourni par le site de Google dans la zone de texte de votre page yoctown.
Dans votre menu, l'onglet correspondant à un plan sera repéré par l'icône :
Le menu de votre site
Vous venez de créer votre première rubrique, votre barre de menu se présente ainsi :
et ne comporte donc pour l'instant qu'un seul onglet repéré par l'icône :
Cette icône caractérisera par la suite la rubrique que vous placerez en première position sur votre barre de menu, quel que soit son type. En général elle correspondra donc à votre page d'accueil. Les icônes de la barre de menu sont grises quand l'onglet correspondant est inactif; elles deviennent roses dès que vous cliquez sur l'onglet pour accéder à la rubrique, vous permettant ainsi de vous repérer plus facilement dans votre site.
Personnaliser son site
De nombreux moyens sont à votre disposition pour que votre site corresponde au mieux à l'image que vous vous en faites.
La partie supérieure de votre barre d'outils vous permet de modifier certains paramètres généraux de votre site. Les options présentées sont communes à tout le site : elles s'appliquent sur toutes les rubriques.
Choisir la hauteur des images en-têtes
Les images en-têtes (dites aussi "bannières") vont décorer la partie supérieure de chacune de vos rubriques. Nous vous en proposons quelques unes par défaut. Vous pouvez toutefois les choisir librement mais leur hauteur doit rester la même pour toutes les rubriques. Nous vous conseillons de la choisir entre 180 et 240 pixels mais rien ne vous empêche d'opter pour les valeurs extrêmes de 140 ou 280 pixels!. Leur largeur est bridée à 924 pixels.
Voici ce que donne la même rubrique avec les deux valeurs extrêmes...
Modifier le fond du site
Il s'agit de la couleur de la partie extérieure, zone en bleue sur la capture d'écran ci-dessous :
La couleur vous est demandée en code hexadécimal. Si comme la plupart de nos utilisateurs vous ignorez tout de cette notation, pas de panique : un nuancier vous est proposé lorsque vous cliquez dans le cadre de réponse ! Vous n'avez plus qu'à sélectionner la couleur qui vous tente le plus...
Par défaut la couleur proposée est le blanc (code FFFFFF).
Modifier l'ordre des rubriques
Dès que vous aurez créé une deuxième rubrique cette option vous sera accessible. Organisez votre menu comme vous le désirez : cliquez sur le nom de la rubrique à déplacer et, en maintenant le bouton gauche de la souris enfoncé, mettez le à l'emplacement souhaité. Validez !
Exemple : Votre menu est celui-ci :
On va intervertir l'ordre des rubriques entre les rubriques "album" et "pages"
Voici le résultat final :
Choisir le logo du site (formule Exclusive seulement)
Si vous avez opté pour la formule 'Exclusive' le logo yoctown n'apparait pas en haut à gauche de votre site:
Vous pouvez à cet emplacement mettre votre propre logo.
Parcourez votre ordinateur, sélectionnez l'image qui vous convient (taille minimale 25x25 pixels) et n'oubliez pas de valider: c'est tout! Les images sont acceptées en format .jpeg, .png ou .gif; elles seront retaillées automatiquement pour s'adapter à la place disponible.
Exemples:
Choisir l'icône du site (formule Exclusive seulement)
Dans le cas d'une formule exclusive vous pouvez également modifier l'icône qui apparaitra dans la barre de certains navigateurs internet (Firefox..). Par défaut ce sera l'icône Yoctown:
sélectionnez sur votre ordinateur l'icône qui vous convient en format .png ou .jpg ou.gif (taille minimale 25x25 pixels) et validez!
Exemples:
Personnaliser une rubrique particulière
Toute rubrique peut être entièrement personnalisée à partir de l'onglet « modifier l'apparence » dans votre barre d'outils:
Plusieurs options vous sont offertes:
Les bannières (images en-têtes):
Chaque rubrique peut être personnalisée par sa propre bannière; il s'agit d'une image au format jpeg, png ou gif, dont la taille est fixée une fois pour le site tout entier.(voir personnaliser votre site/choix de la hauteur des images en-têtes).
Une bannière par défaut vous est fournie mais vous pouvez la modifier sans problème: cliquez sur « parcourir » puis sélectionnez votre fichier image sur votre pc .Poursuivez vos choix si d'autres options vous intéressent puis validez.
L'icône décorative:
Il s'agit de l'icône qui apparaît en haut à gauche de vos rubriques.Par défaut c'est l'icône yoctown.
Cliquez sur « parcourir » puis sélectionnez sur votre pc une image qui vous servira de nouvelle icône. Elle sera redimensionnée automatiquement. Poursuivez vos choix si d'autres options vous intéressent puis validez.
Position de l'image en haut de rubrique:
Si l'image que vous avez choisie comme bannière est trop grande elle sera redimensionnée; vous pouvez choisir d'utiliser la partie supérieure, la partie centrale ou la partie inférieure de votre image. Essayez! En cas d'erreur vous pouvez recommencer sans problème et modifier votre choix...
Si au contraire l'image est trop petite elle sera automatiquement dupliquée à partir du centre, en hauteur comme en largeur, pour occuper tout l'espace disponible. Là encore rien ne vaut un test..
Vous pouvez aussi jouer sur le positionnement vertical..
Toute sélection d'une nouvelle image supprime automatiquement l'image précédente. Vous pouvez toutefois supprimer une image sans la remplacer: vous reviendrez alors à l'une des bannières par défaut de Yoctown.
Le titre:
Le titre de votre rubrique s'inscrit par défaut en bas à droite de votre bannière. Si vous préférez qu'il n'apparaisse pas, cochez la case correspondante.
S'il s'inscrit, sa couleur par défaut est le blanc parfois peu lisible sur le fond de votre image. Vous pouvez donc modifier cette couleur d'affichage. Elle est codée en hexadécimal mais le nuancier qui s'affiche lorsque vous cliquez dans le cadre vous permet de faire un choix sans rien connaître à ce codage...
Le calque:
Un motif décoratif vous est proposé; il vient se superposer à l'image qui vous sert de bannière. Selon votre goût vous pouvez l'accepter ou le refuser..
Le fond:
De nombreux fonds vous sont proposés:
Cochez celui que vous préférez, par défaut c'est le dégradé9 (dégradé de gris) qui est sélectionné.
N'oubliez pas de valider!
Exemple de résultat final:
Le point de départ:
Votre page finale:
ou encore:
