Création d'un site avec Nvu       tuto réalisé par Reine Léa en collaboration majoritairement de P'titeMarsienne sans qui, rien n'aurait pu être fait   Comment aller d'une idée à la publication de votre site ?? Suivez les étapes et vous y arriverez.     Une information importante, il vaut mieux être tranquille pendant un long moment pour suivre avec attention chaque étape.     Il y a plusieurs étapes pour créer un site, mais tout d'abord, savoir quel sera le thème, ce que vous proposerez dans vos pages, si elles doivent être secrètes ou non, si on peut ou non y prendre du matériel, etc.... Ensuite, il faut écrire sur papier libre, l'idée des pages et leurs liens... Préparer son ossature pour ne pas oublier de matériel comme les boutons, le titre de l'index mais aussi des autres pages, préparer des bannières, savoir de combien de pages sera composé votre site pour créer des liens vers ces pages, réfléchir aux couleurs, trouver des images libre de droit ou demander l'autorisation (en ce cas, il faut mettre le lien de la personne qui vous l'offre), etc... attention de respecter les copyrights et le travail des webmasters qui mettent du matériel à votre disposition.       1ère étape   On commence par préparer son ordinateur à conserver son site. Pour cela, il faut créer sur le disque dur de votre ordinateur : c:/Users/Documents/ un dossier portant le nom de votre futur site (pour l'exemple je vous le nomme les_vacances cliquez sur l'image pour la voir en + grand Donc pour être sure de m'être faite comprendre, vous avez mis dans vos documents, un dossier portant le nom de votre site : site_vacances dans lequel vous avez mis un autre dossier qui porte le nom de images et  dans lequel vous mettrez vos images au fur et à mesure que vous les créer.   En parallèle, vous faites un autre dossier identique dans le nom que vous mettez dans vos images et dans lequel vous mettrez toutes vos images en .psp, en préparation et même en finale de façon à avoir des doubles, des possibilités de reprendre si cela ne convient pas, si vous changez de couleur, d'image ou de thème.... etc... une sorte de sauvegarde qui peut vous rendre de bien grands services le jour où vous avez un souci.   Une information importante et qui ne doit jamais quitter votre esprit, il faut tout écrire en lettres minuscules, sans espace, sans accents. Vous ne pouvez pas non plus mettre divers caractères hormis le trait de soulignement (touche _ ou 8). Ceci pour tous les dossiers que vous créez jusqu'à toutes les images que vous mettrez sur votre site.     2ème étape   Ouvrez Paint Shop Pro et Animation Shop pour créer vos fonds, vos titres et vos boutons, enfin tout ce qui décorent votre futur site. Vous avez en règle général besoin d'un titre (il ne faut pas qu'il soit trop grand, ni trop petit), 700x400 pixels est une bonne moyenne. Pour les boutons, à vous de voir la taille qu'ils auront suivant si vous devez ou non écrire dedans et ce que vous allez y écrire. Vos fonds sont préparés avec une image de 100 à 150 pixels de coté, animés ou non (attention aux yeux quand ça bouge beaucoup sur la page d'un site) Voilà ce que j'ai préparé pour la création de ce site : en taille réduite à 60% je vous montre ce que j'ai utilisé 1 c'est le titre, 2 c'est le fond que j'utilise au dessus, 3 c'est le fond que j'utilise au dessous de tout, 4 et 5 ce sont mes boutons, 6 c'est un "glitter" créer avec 3 images et du bruit pour faire mes bordures. Toutes mes images ont été enregistrées en .gif qu'elles bougent ou non. C'est mon choix, vous pouvez faire identique ou non. Je sais qu'il manque des bannières et les titres des 5 autres pages mais c'est juste pour vous montrer la création de la première page...   Sachez tout de même que je ne vous apprends pas, sur ces pages, à vous servir de Psp.. Pour cela, vous avez tout un tas de sites qui vous proposent des tutoriels qui peuvent vous aider.     3ème étape    Vous pouvez télécharger  Nvu, c'est un programme gratuit, en français et facile à utiliser pour un débutant. Vous l'installez. Cela vous permettra de préparer vos pages et voir à quoi ressemblera votre site au fur et à mesure de votre avancement dans votre travail. C'est le moment de réfléchir à comment vous allez présenter votre première page de votre site, faites attention à bien la soigner, c'est elle qui donnera envie ou non, à vos visiteurs de continuer ou de s'en aller... Une fois installé, vous l'ouvrez. Vous vous retrouvez devant cette interface Vous allez créer votre première page en cliquant sur Format/titre et propriétés de la la page puis dans la fenêtre qui s'ouvre vous allez remplir ainsi : Puisque c'est la première page, dans le titre, nommez là obligatoirement "index" puis vous mettez votre nom/pseudo ou nom du site dans l'auteur et sur la ligne description, soit vous ne mettez rien, soit vous mettez une mini description (c'est par cette description que Google vous trouvera plus facilement). Une fois que vous avez fini, cliquez sur OK. Fichier/Enregistrer sous... Dans la fenêtre qui s'ouvre, c'est déjà inscrit que c'est l'index, cliquez sur "Parcourir pour chercher votre dossier dans les documents qui s'appelle site_vacances puis sur Enregistrer. La fenêtre se ferme. Maintenant quand vous ouvrez votre dossier C:/Users/Documents/site_vacances/ vous trouvez un nouveau fichier, c'est votre page internet. L'icone sera différente suivant votre navigateur. Retournez sur Nvu, maintenant, vous voyez votre curseur sur votre page blanche se trouve en haut à gauche. Cliquez sur 1 puis faites deux fois un retour à la ligne pour positionner correctement votre curseur en 2 comme sur l'exemple. Vous allez insérer un premier tableau et pour cela, vous faites : Tableau/Insérer/Tableau, ça ouvre une nouvelle fenêtre qui propose plusieurs choix. Pour changer ces choix, il suffit de glisser la souris dessus. Vous ne cliquez QUE sur la première case comme ceci :  un tableau apparait sur votre page... Faites Tableau/Propriétés du tableau  Une fenêtre s'ouvre avec beaucoup d'informations à changer :   Dans l'onglet "Tableau", vous allez changé la Taille. Comme vous avez fait un tableau d'une case, vous n'avez qu'une ligne et qu'une colonne. Vous mettez une hauteur de 3500 PIXELS et non % de la fenêtre et dans la largeur, vous mettez 90 % de la fenêtre et non Pixels. Dans les bordures et marges vous allez régler la bordure à 0, la marge à 5 et l'espacement à 0. L'alignement du tableau sera réglé au centre Ne mettez aucune légende Pour la couleur de fond, mettez une couleur qui n'a rien à voir avec votre site de manière à retrouver cette couleur dans la source de votre page. Pour ma part, j'ai mis la couleur #FFCC00 255-204-0, c'est un jaune pas terrible. En fait il s'agit de la couleur de votre future barre. Finissez en cliquant sur "Appliquer" et changer d'onglet en cliquant sur l'onglet "Cellule" vous avez moins à changer sur cette onglet, vous mettez l'alignement du contenu de votre tableau au centre et au milieu et changer la couleur du fond avec une autre couleur forte comme ce vert pour voir ce que vous faites. J'ai choisi la couleur #33CC00, (51-204-0). Vous changerez ce vert tout comme le jaune dans votre source... Ensuite vous Appliquer et vous cliquez sur OK. Fichier/Enregistrer sous... Enregistre votre travail ainsi vous ne perdrez pas vos données et vous pouvez déjà voir ce que cela donne en faisant Fichier/Aperçu dans le navigateur... Pas terrible ces couleurs, hein ?? On va changer cela... Faites Format/Couleurs et fond de page cela va vous permettre de mettre un fond au dessous de votre premier tableau. Dans la fenêtre qui s'ouvre, changer les couleurs suivant vos choix en les personnalisants. Cela donnera les couleurs pour vos textes... Si le résultat n'est pas satisfaisant quand vous vous en servirez, vous pourrez toujours revenir à ce tableau pour changer.... Mettez l'image de fond que vous trouverez en parcourant votre ordinateur, dans vos documents/site_vacances/images/ et choisissez le fond que vous avez créé. Puis OK Ca commence à être plus joli... On attaque la source maintenant en cliquant sur l'onglet "source" voilà ce que vous voyez maintenant à l'écran : Surprenant, non ? c'est ce que l'on appelle le language HTLM. Maintenant, observez les lignes et essayez de découvrir les couleurs que j'ai mises pour les remplacer par mes créations... Vous les voyez ?? Ligne 14 il y a le jaune et ligne 19, il y a le vert... Bien sur, je n'ai pas envie de le conserver, alors je vais mettre à la place des couleurs le chemin de mes images ainsi que leur nom. Il faut changer ce qui était par ce que j'ai entouré : Cliquez sur l'onglet Aperçu et voyez le résultat : Vous pouvez maintenant cliquez sur l'onglet "Normal" pour continuer à la construction de votre page.  Faites Fichier/Enregistrer sous... Cliquez sur Enregistrer et choisissez d'écraser l'autre version. Fichier/Aperçu dans le navigateur.... Ca commence à ressembler à ce que vous souhaitez ??? C'est bien.... Allez on continue, revenez sur Nvu.... votre curseur clignote au centre de votre tableau du dessus... Faites trois ou quatre retour à la ligne Insertion/Image et dans la fenêtre qui s'ouvre : dans l'onglet "Emplacement" vous parcourez pour chercher votre image "titre", cliquez sur "ne pas utiliser de texte alternatif puis vous finissez par OK Votre titre est arrivé sur votre page... ça avance, ça avance.... Cliquez 4 fois sur le retour à la ligne (entrée) Tableau/Insérer/Tableau et cliquez sur trois cases ainsi : Tableau/Propriété du tableau, vous avez 3 tableaux qui sont cote à cote, vous allez leur mettre une bordure et un fond.... donc vous recommencez comme au point 12... Vous allez mettre un fond jaune et au dessus un fond vert... que vous transformerez à nouveau dans la source... Pour cela, faites Tableau/Propriété du tableau, l'onglet tableau et réglez ainsi : appliquer et changer l'onglet en cliquant sur "Cellule" Mettez les mêmes réglages que ceux ci : Appliquez et ça ne colorie que la colonne de gauche.... Vous recommencez pour la seconde colonne en réglant ainsi : cliquez sur suivante et surtout n'oubliez pas d'Appliquez Il reste la troisième colonne et donc, continuez ainsi : quand vous avez fini les réglages, appliquez et cliquez sur ok. Vos trois colonnes sont vertes... Maintenant, cliquez sur l'onglet "Source" et changer toutes les couleurs que vous voyez comme ceci : C'est à dire qu'au point 19, vous aviez changé la ligne 14 pour mettre en glitter et il faut le refaire à la ligne 30 aussi... la ligne 19 avait été changé pour mettre le fond2 et il faut le refaire pour les trois colonnes qui sont aux lignes 35, 37 et 39... cliquez sur "Aperçu"... ça vous plait ???? Alors on continue....en cliquant sur "normal" Positionnez vous sur la première colonne et cliquez sur le retour à la ligne 5 ou 6 fois. Insertion/Image et dans la fenêtre qui s'ouvre, chercher le bouton01, n'oubliez pas de changer l'option "texte alternatif" par "ne pas utiliser de texte alternatif"...et ok... Faites la même chose dans la colonne de droite... mais prenez le bouton02 puis ok... Cliquez sur la colonne du centre et écrivez votre texte comme vous le souhaitez avec les polices offertes par le programme ou d'autres mais je vous conseille de prendre des polices faciles à lire, de taille assez grosse car il y a des personnes qui n'arrivent pas à lire les petits caractères... Faites Fichier/Enregistrer sous.... encore une fois.. Fichiers/Aperçu dans le navigateur, cela vous montrera exactement ce qui apparaitra quand il sera mis en ligne.     Maintenant, comment faire d'autres pages Fichier/Nouveau, une nouvelle fenêtre s'ouvre, réglez ainsi : Format/Propriétés de la page cela donnera un titre à l'onglet de la nouvelle page Fichier/Enregistrer sous et lui donner le nom de la nouvelle page et enregistrer Revenir sur l'onglet "index" Cliquez sur le bouton01 pour le sélectionner Insertion/Liens et dans la fenêtre qui s'ouvre, réglez ainsi : cliquez sur l'onglet "lien" puis sur "parcourir" et cliquez sur la page que vous souhaitez lier puis ok... Fichier/Enregistrer sous et faites bien attention d'enregistrer sous le nom de "index".... Faites un essai pour vérifier que votre lien est bien fait en faisant Fichier/Aperçu dans le navigateur.... Votre page index s'ouvre et maintenant, cliquez sur le bouton01 dont vous venez de faire le lien... Normalement vous devez vous trouvez sur une page blanche... c'est donc bon... Il ne vous reste plus qu'à refaire la page "photos_plage"comme pour la page d'index, pour lui donner des couleurs et des tableaux.... Vous pouvez remettre autant de boutons que vous le souhaitez et tout autant de liens... ps : si vous avez d'autres images ou photos à mettre sur votre site, mettez les dans votre dossier Documents/site_vacances/images                     la suite...                       Soyez original(e) dans votre création et quelque soit votre style, votre site vous ressemblera... retour à l'accueil