Internet, créer son site personnel. - Yves Cornil

Plan
•
•
•
•
•
•
•
•
•
•
•
t,
rne ite
e
t
In
ns
o
s
l.
er
cré sonne
per
Yves Roger Cornil
Microcam06, Fréjus Vous Accueille
Créer son site Internet
7 mars 2005
Pourquoi publier sur Internet
2
Avant de créer son site.
• 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.
Créer son site Internet
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 …
3
• 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.
Créer son site Internet
4
Logiciels pour créer des sites Internet
Quelques logiciels complémentaires
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…
• 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 …
Créer son site Internet
5
Créer son site Internet
6
1
Combien coûtent quelques
logiciels généralistes?
Mais combien ça coûte?
Créer son site Internet
7
Combien coûtent quelques logiciels spécialisés?
Web Studio créateur 2 (PC)
29 €
Namo Web Editor 6 (PC)
129 €
Adobe Golive cs (Mac ou PC)
572 €
Dreamweaver 2004
570 €
FrontPage 2003
273 €
Créer son site Internet
Word 2003 (PC)
310 €
Word 2004 (Mac)
320€
Publisher 2003 (PC)
232 €
OpenOffice (PC ou Mac)
0€
Créer son site Internet
8
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.
9
Quelques chiffres sur Internet
Créer son site Internet
10
Sauter le pas…
• 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
• 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...
(1/2005 source JDN)
Créer son site Internet
11
Créer son site Internet
12
2
Demander des conseils
Quelques
modèles de
pages
• 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.
Créer son site Internet
13
Créer son site Internet
14
Quelques modèles de pages (suite)
Quelques modèles de pages
Page
avec
cadres
Page
sans
cadres
Créer son site Internet
15
Quelques modèles de pages (suite)
Créer son site Internet
16
Quelques modèles de pages (suite)
Page
appelant
un
document
PDF
Page avec
zones
sensibles
(mappage).
Créer son site Internet
17
Créer son site Internet
18
3
Quelques modèles de pages (suite)
Quelques modèles de pages (suite)
Page
contenant
des
adresses.
Page
utilisant
des
tableaux
Créer son site Internet
19
Créer son site Internet
Construction des pages
Composition d’une page.
•
•
•
•
•
•
•
Créer son site Internet
21
texte avec Golive
Créer son site Internet
20
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…).
Créer son site Internet
22
texte avec Namo Web Editor 3.0
23
Créer son site Internet
24
4
Le fond d’une page
Les images
• 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.
Créer son site Internet
25
Le poids des photos
• 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é
Créer son site Internet
26
Quelques gif’s animés
• 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 …).
Créer son site Internet
27
Créer son site Internet
Les liens.
Créer un lien
• 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 son site Internet
28
29
Avec
Namo
Web
Editor 3
Créer son site Internet
30
5
Exemple d’un lien sur une photo
Créer son site Internet
un lien (suite)
31
33
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 son site Internet
32
Créer une page avec
Microsoft Word
un lien (suite)
Créer son site Internet
Créer son site Internet
35
Créer son site Internet
34
Créer une page avec Microsoft Word
Vous pouvez créer des liens
aussi bien sur du texte que sur
des images
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
Créer son site Internet
36
6
Créer un lien 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.
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.
Créer son site Internet
37
Créer un fichier PDF avec
Microsoft Word version X
Créer son site Internet
38
Vous avez dit HTML ?
<html>
<head>
<title>MICROCAM06 - Page d'accueil de MICROCAM06</title>
</head>
<body bgcolor="#ffffff" background="images/f-osx.jpg">
<p><img src="images/bandm61.gif" alt="image Microcam" align="bottom"
width="500" height="59" naturalsizeflag="3">
<br>
<b><font color="#af0000" size="+1" face="Arial">Clubs Microcam clubs
de micro-informatique du </font></b><font size="+1" face="Arial"><a
href="http://www.ca-pca.fr/">Cr&eacute;dit Agricole </a></font><br>
<font face="Arial"><a
href="http://www.augfrance.com/Microcam06">Nice</a></font><font
color="#af0000" face="Arial"> - </font><font face="Arial"><a
href="http://www.augfrance.com/Microcam35">Rennes</a> </font><font
color="#af0000" face="Arial">- Caen - </font><font face="Arial"><a
href="http://www.Microcam29.net/">Quimper</a></font>
</p>
<p><b><font color="#af0000" size="+2" face="Arial">Bienvenue &agrave; Microcam06
- Nice</font></b><br>
Créer son site Internet
39
Transférer ses pages sur
Internet
Créer son site Internet
40
Exemple d’un FTP - Fetch
• 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.
Créer son site Internet
41
Créer son site Internet
42
7
Exemple d’un FTP - Fetch
Exemple d’un FTP -
Namo
Web
Editor 3
Créer son site Internet
43
Quelques adresses
Créer son site Internet
44
NamoWebEditor 3.0
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
Créer son site Internet
45
NamoWebEditor 3.0 - Page vide
Créer son site Internet
Créer son site Internet
46
NamoWebEditor 3.0 - menu fichier
47
Créer son site Internet
48
8
NamoWebEditor 3.0 - une page
Créer son site Internet
NamoWebEditor 3.0 - insertion d’une image
49
NamoWebEditor 3.0 - insertion d’une image
Créer son site Internet
50
NamoWebEditor 3.0 - insertion d’une image
51
NamoWebEditor 3.0 - insertion d’une image
Créer son site Internet
Créer son site Internet
Créer son site Internet
52
NamoWebEditor 3.0 - Publier sur Internet
53
Créer son site Internet
54
9
CuteFTP
NamoWebEditor 3.0 - Publier sur Internet
Créer son site Internet
55
CuteFTP
Créer son site Internet
56
CuteFTP
57
CuteFTP
Créer son site Internet
Créer son site Internet
Créer son site Internet
58
CuteFTP
59
Créer son site Internet
60
10
Pour suivre… TP 54
Le
Monde
est à
vous …
Créer son site Internet
62
11