Creer un site

Charte Graphique – Design


Etape 2 : Charte graphique – Design

Vous devez centrer votre design en fonction du plan de votre site créé dans l’étape 1 . Dans la rubrique Design de votre plan, vous devrez donc bien définir les couleurs que vous allez utiliser, comment remplir vos pages, comment mettre en valeur le contenu ? quelles images ajouter ? et comment l’internaute va t il naviguer ?

    Les éléments importants sont donc :

Les couleurs

– Définissez une couleur de fond, de texte , de liens. Pour le moment ne vous inquiétez pas de la technique, choisissez vos couleurs en tenant compte des principes de bases :
– Assurez vous que la couleur de votre texte ne se fonde pas ou ne colle pas avec votre couleur de fond.
– La clef est de bien gérer les contrastes: ceci pour que le visiteur se repère dans la navigation, par exemple le gris clair ne contraste pas assez avec notre fond bleu.
– La couleur de fond doit être neutre et claire.
– Ne prenez pas d’image multicolore en image de fond
– N’utilisez pas de bleu ou rouge sur un fond noir
– N’utilisez pas de jaune sur un fond blanc
– Un fond noir peut créer des soucis d’impression
– Votre fond DOIT être le même sur chaque page
– Il est également possible de créer une couleur de lien en fonction de la valeur des pages dans votre plan , le lien vers les pages principales de votre plan pourra être d’une certaine couleur et celui vers les autres pages d’une autre.

Quoique vous définissiez pour vos couleurs, complétez votre plan de départ avec ces nouveaux éléments graphiques.

La consistance

La mise en page générale doit donner un aspect de page remplie , vous devez donc garder une attention toute particulière à ce détail.
– utilisez les mêmes polices et tailles d’écriture tout au long de vos pages.
– ne mélangez pas trop les polices.
– votre couleur de fond devra être la même sur l’ensemble des pages
– votre logo doit apparaître au même emplacement sur chacune de vos pages et être de la même taille
– vos photos ne doivent pas être trop grandes
– une fois que vous maîtrisez le html, créez vous une page type que vous réutiliserez comme modèle de base.

Les Photos, dessins, illustrations

– modifiez la taille des photos pour qu’elles se chargent rapidement dans le navigateur de votre visiteur
– toutes les illustrations doivent avoir un lien direct avec le texte
– pas trop de gifs animés , il détourne le visiteur du texte et du contenu
– les formats gifs et png , sont conseillés pour les boutons, icônes, dessins, le format jpeg pour les photographies
– ajoutez des tags html « alt » à chacune de vos photos
si vous utilisez des photos qui ne vous appartiennent pas vérifiez qu’elles sont libres des droits d’auteurs.
– ajouter un favicon à votre site

Navigation

Sur chacune de vos pages, votre visiteur doit pouvoir se repérer et savoir comment naviguer dans le site , il faut donc lui fournir un menu de navigation fonctionnel. Le plus simple est de créer des liens explicites, il est également possible de créer une barre de navigation avec image ou flash…
– Quoiqu’il en soit, pour éviter la confusion :
votre système de navigation doit apparaître sur chacune de vos pages au même endroit , en haut , à droite ou à gauche ou au bas de votre page (moins conseillé).
votre menu doit donner une idée au visiteur de ce qu’il va trouvé en cliquant sur le lien
si vous utilisez des icones , conservez les conventions par exemple , une enveloppe pour le lien de contact courriel
pour les sites qui ont plus de 10 pages , il est préférable d’avoir un plan général du site

La méthode conseillée par Vitclic

Pour un webmaster débutant, nous recommandons
1- de commencer avec des pages html classiques
2- ensuite d’apprendre à coder en html
3- puis de coder à l’aide de tableau
4- ne pas utiliser de frames
5- une fois que tous cela est bien maîtrisé de se lancer dans la conception ou la rénovation de son site en utilisant le css (ce sont des feuilles de styles (en anglais « Cascading Style Sheets », abrégé CSS) elles sont un langage qui permet de gérer la présentation d’une page et de celle de tout votre site sur un seul fichier)

Créer le plan de votre site


Etape 1: CREER LE PLAN DE VOTRE SITE

Pour établir un plan : identifiez le public visé, définissez le sujet, le thème principal de votre site. Créez un brouillon pour chaque page, planifiez la fréquence envisagée de vos mises à jour et choisissez un hébergeur.

Vous aurez également besoin pendant votre « carrière de webmestre » d’effectuer de nombreux copier-coller , si vous ne maitrisez pas cette technique : visitez notre page Copier Coller

Afin de faciliter la mise en route de votre projet : créez vous un document papier sur lequel vous tenterez de répondre à ces questions.

QUI ?
Définissez les envies de vos visiteurs. Mettez-vous à leur place : connaissances, envies, besoins , que viendront-ils chercher sur votre site?

QUOI ?
Quel message voulez-vous transmettre ? En effet , le contenu est le plus important , celui qui vous prendra le plus de temps dans votre projet de développement de site. Inventoriez les informations, documents en votre possession – Ciblez les informations qu’il vous manque – trouvez les réponses et mettez vous à écrire votre contenu en le sauvegardant par rubrique dans un fichier wordpad par exemple.

QUAND?
Quelle date de lancement ? quelle fréquence de mise à jour? Pour la plupart des webmasters elles sont hebdomadaires.

OU?
Où vais-je héberger mon site? ( rendez-vous rubrique hébergement)

POURQUOI ?
Pourquoi avez-vous envie de créer votre site? Quelques exemples : Pour le travail ? pour vendre des produits? pour partager avec des personnes ayant le même centre d’intérêt que moi ? ….

COMMENT?
La navigation , le look , nous le développerons dans la prochaine étape .

Une fois que vous avez répondu à toutes ces questions vous êtes prêts à passer à l’étape suivante. LE DESIGN : charte graphique et mise en page….

Créer un Plan Cahier des charges


Le succès de votre site résulte en partie de la création de son plan. Celui-ci est en quelque sorte la feuille de route de votre site, celle qui vous permet de vous organiser sur le papier afin de tout analyser au mieux . Les différentes étapes que nous allons développer sont :

    Etape 1 : LE PLAN Définir le thème, le sujet principal, cibler son public et ses attentes , le contenu souhaité et le style général. Egalement, choix du type d’hébergement gratuit ou payant.

      Etape 2 : LE DESIGN L’ apparence visuelle est la première chose que découvre un visiteur en entrant sur un site. Le choix des couleurs, les logos, l’organisation, la navigation, le contenu forment alors un tout qui doit être cohérent.

        Etape 3 : CODAGE LE HTML est un langage qui vous permet de mettre en page par l’utilisation de balises, de tags votre contenu et de lier les pages entre elles. Nous vous conseillerons nos logiciels gratuits préférés . A tester sans modération.

          Etape 4 : UPLOADER LES FICHIERS Indispensable le transfert des fichiers de votre ordinateur sur votre compte ftp/hébergeur , on utilise pour cela un logiciel appelé : client FTP .

            Etape 5 : VERIFICATION ET CORRECTION Etape souvent oubliée par de nombreux webmasters mais pourtant primordiale : relecture , correction des fautes, vérification des liens…

              Etape 6 : PROMOTION Soumission du site dans les annuaires de références – Meta Tags des pages. Présentation du site dans les « sites amis » et promotion « Hors-ligne »

                Etape 7 : LA VIE DU SITE Mise à jour régulière. Si vous souhaitez que vos visiteurs reviennent sur votre site, vous devez ajouter de nouvelles informations , du contenu , des photos . Faites évoluer votre site .

                  Avoir un site signifie que le travail n’est jamais fini .

                    Bienvenue dans le monde (nocturne? ) des webmasters 🙂

                    Les Bases du Html


                    Les BASES du HTML

                    TOUT CE QU’IL FAUT CONNAITRE POUR CREER SA PREMIERE PAGE


                    Toutes les pages web doivent contenir certaines lignes de codes html

                    <html>

                    <head>

                    <title>Votre Titre ICI</title>

                    <body>

                    Le texte, les images , les fichiers sons de votre pages doivent êter placés enter les balises <body> au début et </body> en fin de page.

                    </body>

                    </html>

                    Les Balises HTML

                    En html, les balises indiquent au navigateur ce qu’il doit faire. Vous utilisez donc les balises pour plusieurs raisons : quand vous changez l’apparence , la couleur, de votre texte, quand vous montrez un graphique, quand vous créer un lien vers une autre page. Toutes ses balises sont invisibles en naviguant mais elles sont primordiables.

                    Si vous souhaitez voir le code html d’une page , il vous suffit de taper simultanément sur les touches CRTL+ U de votre clavier.

                    – Toutes les balises commence par les symboles <> et terminent par les symboles </>. elles sont utilisées par paire, une pour ouvrir et l’autre pour fermer l’action

                    – Cette Balise <B> ou <strong> met votre texte en gras. Ce symbole b</B> ou </strong> termine l’effet

                    – Pour souligner un texte ou une phrase , utilisez la balise <u>

                    Attention Un texte souligné est parfois confondu avec un lien.

                    Exemple : <u>VITCLIC </u>

                    – Une balise qui n’est pas souvent utilisée . <strike> , je vous laisse deviner à quoi elle sert. BALISE – BALISE

                    – Toutes les balises fonctionnent de la même manière, vous devez indiquer au navigateur où commencer et terminer l’action. Il y a quelques exceptions comme <p> : la balise paragraphe. Vous n’êtes pas obligé d’utiliser la balise </p> pour terminer l’action , mais vous pouvez le faire et beaucoup le font.

                    – Pour contrôler la couleur de fond de votre page, de votre texte, de vos liens, vous devez ajouter le code entre les balises <body> . Par exemple pour cette page le code est « <body bgcolor= »#E7EFF8 >

                    – les liens Hypertextes :

                    Les liens internes – Pour créer un lien vers une autre page de votre site, utilisez des balises de cette façon : <a href= »lien.html » >Lien Interne</a> ce qui affichera sur votre page Lien Interne. On appelera cela une url relative.

                    Les liens externes – pour créer un lien vers une autre page externe ou un autre site <a href= »http://www.google.com » >Lien Externe</a> Ce qi affichera sur la page Lien Externe : une url absolue.

                    – Image pour afficher une image (gif ou jpg ) la balise à utiliser est <img src= »nomdefichier.jpg »> il est possible aussi de préciser la taille d’affichage de l’image <img src= »nomdefichier.jpg » width=40 height=30>

                    – Certains caractères ont une certaine siginification dans les documents html . Cela inclue les signes < > & et  » . Mais votre clavier ne vous propose aucune touche pour certains sigles tel que © Il faut donc utiliser des caracteres numériques pour les créer. Voir les caractères spéciaux.


                     

                    Vérification

                    Pensez à vérifier , tester , relire vos pages plusieurs fois avant de les mettre en ligne

                    ©VitClic.com 2007/2010 Mentions