Plan. Avant de créer son site. Quelques logiciels complémentaires

(1)

Inte rnet , crée r so n sit e

pers onne l.

Yves Roger Cornil Microcam06, Fréjus Vous Accueille

7 mars 2005 Créer son site Internet 2

Plan

• Pourquoi publier sur Internet?

• Quelques prérequis et quelques logiciels

• Combien ça coûte?

• Rappels sur Internet

• Quelques modèles de pages

• Construction de pages

• Créer des pages avec Microsoft Word

• Vous aviez dit HTML?

• Le transfert des fichiers

• Quelques réalisations personnelles

• Et pour suivre …

Créer son site Internet 3

Pourquoi publier sur Internet

• Vous commencez à être un utilisateur averti d'Internet.

• Vous avez une passion et vous voulez la partager.

• Vous animez une association et vous voulez utiliser ce moyen moderne de communication.

• Bref, il y plein de bonnes raisons pour franchir le pas pour devenir un acteur et plus seulement un consommateur d'Internet.

Avant de créer son site.

• Prendre un abonnement à un fournisseur d'accès Internet, payant ou gratuit, qui vous met à disposition un espace disque

(généralement 100 Mo) pour héberger votre œuvre.

• Il vous faut ensuite un logiciel de création de pages HTML.

• Et des logiciels complémentaires.

• Créer des pages personnelles sur Internet, c'est d'abord de la créativité, du bon goût avant d'être de

l'informatique de haut niveau.

Logiciels pour créer des sites Internet Logiciels généralistes (traitement de texte) ou

logiciels spécialisés.

• Quelques logiciels généralistes:

- AppleWorks, Microsoft Word, Microsoft Publisher, OpenOffice, Star Office…

• Quelques logiciels spécialisés:

- Dreamweaver, Freeway, FrontPage, Adobe Golive, HomeSite, NamoWeb Editor, Netscape Composer, WebExpert…

Quelques logiciels complémentaires

• Traitement des images :

- Graphic Converter (Mac), PaintShop Pro (PC), PhotoShop (Mac ou PC), PhotoShop Elements (Mac ou PC)…

• Création de Gif’s animés:

- AnimationShop (avec Paint Shop Pro), e-Picture Pro (Mac ou PC)

• Eventuellement FTP :

- Cute-FTP (PC), Fetch (Mac), FTP Expert (PC)…

• Si vous créez des sites avec des animations sophistiquées :

- Macromedia Flash …

(2)

Mais combien ça coûte?

Combien coûtent quelques logiciels généralistes?

0€

OpenOffice (PC ou Mac)

232 € Publisher 2003 (PC)

320€

Word 2004 (Mac)

310 € Word 2003 (PC)

Combien coûtent quelques logiciels spécialisés?

273 € FrontPage 2003

570 € Dreamweaver 2004

572 € Adobe Golive cs (Mac ou PC)

129 € Namo Web Editor 6 (PC)

29 € Web Studio créateur 2 (PC)

Généralités sur Internet

• Internet est un réseau mondial d'ordinateurs interconnectés (Web, toile)

• accessible, généralement, par

l'intermédiaire d'un Fournisseur d’Accès Internet (F

.

A

.

I

.

)

• au prix de communications téléphoniques locales (avec éventuellement des forfaits)

• ou d’une connexion ADSL.

Quelques chiffres sur Internet

• 24,14 millions d’internautes en France

(janvier 2005 source JDN)

• 7,64 millions de foyers ont une connexion Internet

(12/2004 source JDN)

• Dont 6,5 millions de connexions au haut débit

(1/2005 source JDN)

Sauter le pas…

• Vous vous lancez, vous faites, vous refaites vos pages, vous téléchargez des logiciels des éditeurs , vous glanez des images Gif et Jpeg, des sons, des plugins ... bref vous passerez beaucoup de temps.

• Mais le métier de graphiste ne s'invente

pas...

(3)

Demander des conseils

• Vous aurez un avantage certain si vous faites partie d'un club micro-informatique, tels que les clubs Microcam ou Fréjus Vous Accueille.

• A plusieurs, c'est plus facile et il y a toujours quelqu'un pour vous donner le bon conseil.

Quelques modèles de

pages

Quelques modèles de pages

Page sans cadres

Quelques modèles de pages (suite)

Page avec cadres

Quelques modèles de pages (suite)

Page avec zones sensibles (mappage).

Quelques modèles de pages (suite)

Page

appelant

un

document

PDF

(4)

Quelques modèles de pages (suite)

Page utilisant des tableaux

Quelques modèles de pages (suite)

Page contenant des adresses.

Construction des pages

Composition d’une page.

• Une page est composée:

• d'un titre (facultatif)

• Du texte

• D’un fond

• Des images (fixes ou animées)

• des liens, sur du texte, sur des images, des fichiers …

• Des sons (.wav, realplayer, midi), des films (QuickTime, Avi, Divx…).

texte avec Golive texte avec Namo Web Editor 3.0

(5)

Le fond d’une page

• Pour agrémenter vos pages insérez une image de fond ou une couleur.

• L'image sera en général une petite image (en format Gif ou jpeg) qui se multipliera sur votre page telle une mosaïque.

• Attention à ce que l'image ne rende pas difficile la lecture de votre page.

Les images

• Les navigateurs Internet acceptent les images en format:

• Jpeg (.jpg) ou Png (.png) pour les photos -16 M couleurs

• Gif (.gif) pour les images - 256 couleurs.

- gif progressif

• - gif animé

Le poids des photos

• Veillez à minimiser la taille (en kilo-octets) de vos images.

• Pour l’affichage des images réduisez la définition des images (72 ou 96 pixels par inch).

• Réduisez la grandeur des images et choisissez un bon taux de compression.

• Utilisez des logiciels spécialisés (Graphic Converter, PaintShop Pro, PhotoShop …).

Quelques gif’s animés

Les liens.

• Les liens permettent d’afficher une autre page, de votre site ou vers un autre site Internet.

• Ou une image, une vidéo…

• Dans le cas de texte, le lien est généralement visible au niveau de la couleur (violet)

• La flèche de la souris se transforme, généralement,en main

Créer un lien

Avec

Namo Web

Editor 3

(6)

Exemple d’un lien sur une photo

un lien (suite)

Créer une page avec Microsoft Word

Pour insérer une image, placez le curseur à l’endroit désiré de votre document, puis allez dans le menu insertion image à partir d’un fichier ou images de la bibliothèque de Word (clip art).

Créer une page avec Microsoft Word

Pour insérer un lien hypertexte sur une image, sélectionnez l’image puis allez sur le menu insertion lien hypertexte.

Vous pouvez aussi utiliser la commande ctrl k

Vous pouvez créer des liens

aussi bien sur du texte que sur

des images

(7)

Créer un lien avec Microsoft Word

Vous entrez le nom du fichier (ici oepop1.gif) ou vous passez par le menu document de la boîte de dialogue insérer un lien hypertexte.

Vous pouvez aussi insérer une info-bulle qui sera affichée par le navigateur Microsoft Internet Explorer mais aussi avec Microsoft Word.

Sauvegarder le fichier HTML avec Microsoft Word

Pour transformer votre document Word en format html, il suffit de l’enregistrer en tant que page Web.

Créer un fichier PDF avec Microsoft Word version X

Vous avez dit HTML ?

<html>

<head>

<title>MICROCAM06 - Page d'accueil de MICROCAM06</title>

</head>

<img src="images/bandm61.gif" alt="image Microcam" align="bottom"

width="500" height="59" naturalsizeflag="3">

Clubs Microcam clubs de micro-informatique du <a href="http://www.ca-pca.fr/">Crédit Agricole </a>

<a

href="http://www.augfrance.com/Microcam06">Nice</a> - <a href="http://www.augfrance.com/Microcam35">Rennes</a> - Caen - <a

href="http://www.Microcam29.net/">Quimper</a>

Bienvenue à Microcam06 - Nice

Transférer ses pages sur Internet

• Pour transférer ses pages personnelles on utilisera un logiciel de transferts de fichiers (FTP)

• Ou, mieux, on utilisera les fonctions de transferts (publier) de son logiciel de création de pages.

Exemple d’un FTP - Fetch

(8)

Exemple d’un FTP - Fetch

Exemple d’un FTP -

Namo Web Editor 3

Quelques adresses

Pages personnelles sur Wanadoo:

http://perso.wanadoo.fr/frejusva http://perso.wanadoo.fr/forum-julii/

Pages personnelles sur Free : http://yves.cornil.free.fr Adresse avec nom de domaine http://www.cornil.com

Adresse comprise dans un nom de domaine:

http://www.augfrance.com/Microcam06

NamoWebEditor 3.0

NamoWebEditor 3.0 - Page vide NamoWebEditor 3.0 - menu fichier

(9)

NamoWebEditor 3.0 - une page

NamoWebEditor 3.0 - insertion d’une image

NamoWebEditor 3.0 - insertion d’une image NamoWebEditor 3.0 - Publier sur Internet