Comment créer vos propres pages web?

Transcription

1 Comment créer vos propres pages web? Vous voulez vous aussi devenir acteur et présenter vos passions et vos envies aux yeux du monde. Présentez-les sur le WEB. Pour cela, il vous suffit de créer vos "pages perso". Vous disposez gratuitement d'un espace de 20 Mo afin de stocker votre page perso. Vous n'avez pas encore d'accès à ce service? Prenez contact par mail à La première étape consiste à créer votre site sur votre machine dans un répertoire bien précis comprenant également les images et photos, puis de les tester. Au sommaire : Composer vos pages Web Créer vos pages Web Création graphique Déposer vos pages Web Comment référencer vos pages personnelles? Composer vos pages Web Une page Web est un fichier texte écrit en langage HTML (Hyper Text Markup Language, qui a l'extension ".html"ou"htm"). En voici un exemple: Vous pouvez écrire vos fichiers à la main si vous vous en sentez capable, en utilisant n'importe quel éditeur de texte, ou vous aider d'un logiciel. Il existe de nombreuses ressources sur le Web pour apprendre à composer du HTML. Il existe de multiples logiciels qui vous assisteront dans la création de vos pages et dans la gestion de votre site. Parmi eux : Microsoft Front Page Attention : Toutes les extensions de Frontpage ne sont pas gérées par notre serveur! Netscape Composer Module simple d'édition de pages html, le Composer fait partie de la suite logiciels de Netscape Communicator, présent sur notre cd-rom. Adobe GoLive CS2 est disponible sur le site Adobe. Web Expert. Simple d'utilisation, ce logiciel vous permet de créer et de visualiser vos pages web simplement. Vous le trouverez également sur notre cd-rom. Macromedia Dreamweaver. Créé pour des utilisateurs aguerris, c'est un logiciel professionnel. Vous pouvez en obtenir une version d'évaluation sur le site de Macromédia. Créer vos pages Web Votre page principale doit s'appeler index.html ou index.htm. Les autres pages peuvent porter n'importe quel nom. Toutefois, préférez la touche "_" aux espaces dans les noms de fichiers. Faites attention à l'orthographe des noms de fichiers dans les liens : majuscules et minuscules doivent être scrupuleusement respectées! Création graphique o Button Fly De la création de boutons au traitement de photos avec application d'effets d'ombres et de reliefs. Cette version d'évaluation, très simple à utiliser, est disponible en cliquant ici. o PaintShop Pro Un logiciel de traitement d'image simple mais très complet. Une version d'évaluation est disponible en cliquant ici. o Adobe Photoshop La référence des professionnels en matière de PAO adobe. Déposer vos pages Web

2 Une fois vos pages réalisées et testées en local, il vous faut déposer votre oeuvre sur notre plateforme afin de la rendre accessible en toute heure et tout lieu. Pour se faire, il vous faut utiliser un logiciel de transfert de fichier tel que CuteFTP ou SmartFTP ou tout simplement le navigateur Internet Explorer. Vous pouvez télécharger ces derniers en version freeware ici : Téléchargez les utilitaires CutFTP et SmartFtp depuis notre espace Téléchargements. Une fois téléchargé sur votre machine, exécutez le programme afin d'installer ce dernier sur votre PC. Pour la configuration reportez vous a nos aides spécifiques afin de les paramétrer. Aide en ligne générique pour le transfert de fichiers avec Internet Explorer Aide en ligne pour CuteFtp Aide en ligne pour SmartFtp Comment référencer vos pages personnelles sur les moteurs de recherche? Vous pouvez référencer vos pages auprès des différents moteurs de recherche qui vous proposent "d'ajouter votre site" gratuitement dans leur base de référencement. Sam Le référenceur : annonce automatiquement l'existence de votre page perso auprès de 10 outils de recherche, dont Google,Nomade, AltaVista, Excite... Nomade : le guide des sites Internet en français référence les sites francophones. Yahoo : le premier moteur de recherche anglophone. Submit-it : référence votre page dans plusieurs moteurs de recherche à la fois. Francité : référence votre page dans 15 moteurs de recherche francophones. Netbooster : référence votre page dans plusieurs moteurs de recherche à la fois. Annonceur.net : Méta-référenceur francophone. Transfert de fichiers : protocole FTP 1. TRANSFERT DE FICHIER AVEC VOTRE NAVIGATEUR WEB Pour transférer vos fichiers de votre site vers notre machine, vous pouvez utiliser votre navigateur Internet Explorer à condition d'avoir une version égale ou supérieure à 5.5 Il faut ensuite valider une option comme suit : 1. Allez sous Outils - Options Internet - puis sous l'onglet Avancé 2. Cochez l'option Utiliser le mode FTP passif 3. Validez Dans la barre Adresse introduisez l'adresse suivante : Pour des pages perso : ftp://votre_login_ftp:votre_mot_de_passe_ftp@ftp.illico-metz.fr/public_html Exemple : ftp://zebus:c123456z@ftp.illico-metz.fr/public_html Un écran vous demandera la confirmation de votre login et mot de passe ftp pour ouvrir la session. Une fois la session ouverte, cliquez sur l'icône Dossier dans votre barre d'icônes pour afficher dans votre fenêtre de gauche votre machine. Puis en glissant les dossiers et/ou fichiers vers l'écran de droite, vous déposerez vos fichiers sur nos machines. Et voilà... Il ne reste plus qu'à vérifier le bon fonctionnement de votre site.

3 2. TRANSFERT DE FICHIER AVEC VOTRE CLIENT FTP Pour les Clients FTP tel que CuteFTP ou SmartFTP, il faut valider dans les options de ces logiciels le Mode PASV. Vérifiez ensuite vos paramètres de connexion comme suit : Adresse d'hôte FTP : ftp.illico-metz.fr pour les pages perso ftp.nom_du_domaine.xxx pour les pages soumises à un nom de domaine Votre Login FTP Votre Mot de passe FTP Comment configurer et utiliser CutFTP? Après avoir créé vos "pages perso" et en avoir testé son bon fonctionnement, en local sur votre machine, (voir remarques dans la rubrique création des "pages perso "), il faut les déposer sur notre serveur à votre adresse. Pour ce faire, nous allons utiliser un logiciel de transfert FTP en l'occurrence CuteFTP. Rien ne vous empêche d'utiliser un autre "client ftp". Après avoir installé CuteFtp, il faut paramétrer et personnaliser votre connexion à notre serveur. CONFIGURATION PAR ASSISTANT Lors de son installation CuteFtp vous propose un assistant de configuration. Mettez l'adresse de notre serveur : pour un site perso : ftp.illico-metz.fr/ Pour un site professionnel ayant un nom de domaine : ftp.nom_de _domaine/ Spécifiez votre login de connexion ftp à votre site ftp et son mot de passe associé.

4 Vous pouvez spécifier un répertoire de votre machine où vous pouvez stocker par défaut vos fichiers téléchargés par Cute Ftp. Si vous ne connaissez pas de répertoire précis, laissez ce champ vide. Validez l'option de connexion automatique.

5 CONFIGURATION MANUELLE - CONTROLE DES PARAMETRES DE CONNEXION Lancez l'applicatif, cliquez sur FTP, puis sur Site Manager Retrouvez votre connexion dans l'arborescence de la fenêtre de gauche. Si vous avez choisi la configuration par l'assistant, votre connexion a été automatiquement placée dans le répertoire CuteFtp Wizard Sites. Mettez votre connexion (fenêtre de droite) en surbrillance puis cliquez sur le bouton Edit site.

6 Sous l'onglet Général précisez: Host Adress: pour un site perso : ftp.illico-metz.fr/ Pour un site professionnel ayant un nom de domaine : ftp.nom_de _domaine/ User ID : votre login de connexion ftp Password : son mot de passe associé Login type : normal Host Type : Auto-detect Initial Remote Directory : public_html ftp.illico-metz.fr

7 Sous l'onglet Advanced, laissez le port à 21 Validez par ok votre connexion est prête. UTILISATION DE CUTE FTP A partir de la fenêtre Site Manager, mettez votre nom de connexion en surbrillance puis validez le bouton connect.

8 Vous êtes connecté. Dans la fenêtre de gauche, vous voyez votre disque dur et ses répertoires. Cherchez le répertoire où vous avez stocké votre site perso, afin d'y visualiser vos fichiers. Dans la fenêtre de droite, vous voyez notre serveur, et vous vous trouvez déjà dans votre répertoire. Il faut maintenant double cliquer sur le répertoire public_html (si vous n'y êtes pas déjà) pour se positionner à l'intérieur. Il faut impérativement déposer vos fichiers dans ce répertoire et non ailleurs. Sélectionnez dans la fenêtre de gauche tous les fichiers à copier, puis par glisser-déplacer, amenez les dans la fenêtre de droite, la copie s'effectue. Nota: la page de base à partir de laquelle tournent toutes les autres doit impérativement s'appeler index.html ou éventuellement index.htm. Une fois l'opération de copie réalisée, quittez votre connexion ftp, puis avec le navigateur, testez votre site. Son adresse sera du type: Si vous désirez figurer dans notre annuaire des pages personnelles, faites nous en simplement la demande en précisant le thème de votre site. ( info@illico-metz.fr ) Comment configurer et utiliser SamrtFTP? 1. CONFIGURATION DE SMART FTP Cliquez sur Tools puis Settings Dans Settings sous la rubrique Connection

9 Dans la rubrique Data Connection Mettre Mode en Passive Mode (PASV) Validez la case Limit Local Port Range puis mettre le minimun à et le maximum à Décochez Force Server IP for PASV Mode Validez par OK 2. SE CONNECTER AVEC SMART FTP Pour se connecter a votre site il faut renseigner les 3 champs suivants dans la barre adresse. ftp.illico-metz.fr/ Dans le champ adresse mettez : pour un site perso : ftp.illico-metz.fr/ Pour un site professionnel ayant un nom de domaine : ftp.nom_de _domaine/ Dans le champ Login : votre login ftp (se référez à vos éléments de contrat). Dans le champ Password : votre mot de passe ftp (se référez à vos éléments de contrat Une fois renseigné, cliquez sur l'icône en haut à gauche pour se connecter. Une fenêtre sous forme de navigateur Windows s'ouvre sur notre serveur. Cliquez sur le répertoire public_html pour afficher le contenu de votre site.

10 Ouvrez maintenant une seconde fenêtre visualisant votre machine en cliquant sur l'icône dans la barre des icônes. Votre écran doit ressembler à ceci : ftp.illico-metz.fr/ ftp.illico-metz.fr/ public_.htm Pour transférer vos fichiers de votre disque local vers notre serveur, glisser et déposer ces derniers d'une fenêtre à l'autre. 3. TELECHARGER SMART FTP