cours_creation pages web - Université de La Rochelle

Jacques FEUGUEUR
– Université de La Rochelle
– Création de site web –
- DAEU Info 2007/2008
- CREER UN SITE Table des matières
1.ORGANISER ET ORDONNER LES FICHIERS DU SITES............................................................................2
2.ARTICULATION DU SITE...............................................................................................................................2
3.DEFINIR UN SITE..............................................................................................................................................3
4.QUELQUES CONSEILS ..................................................................................................................................3
5.CREER UNE PAGE............................................................................................................................................4
6.RELIER LES PAGES PAR DES LIENS............................................................................................................5
7.TESTER UN LIEN..............................................................................................................................................5
8.INSERER UNE IMAGE.....................................................................................................................................5
9.INSERER UN TABLEAU..................................................................................................................................6
10.MISE EN FORME.............................................................................................................................................6
11.HEBERGEUR DE SITE....................................................................................................................................7
12.- EXERCICE D'APPLICATION -.....................................................................................................................8
1/9
Jacques FEUGUEUR
– Université de La Rochelle
– Création de site web –
- DAEU Info 2007/2008
CREER UN SITE
Pour créer un site, on utilise un langage HTML, interprétés,
afin de visualiser les pages, par des navigateurs, tels que
Internet Explorer, ou Mozilla et bien d'autres...
Avec un simple éditeur de texte (wordpad, word etc...) si l'on connaît le langage HTML, on peut créer soimême des pages.
Dans le cas contraire, il existe des logiciels qui permettent d'interpréter ce langage, par des menus et des
interfaces graphiques pour insérer des tableaux, des images, du texte etc…)
Il faut quelquefois intervenir dans le langage , en rectifiant le langage HTML générées automatiquement.
•
Dreamweaver est un outil professionnel que nous allons utiliser pour créer ces pages.
1.ORGANISER
1.ORGANISER ET ORDONNER LES FICHIERS DU SITES
Il faut d'abord créer une arborescence afin d'ordonner les fichiers, dans des dossiers, créés préalablement.
•
•
Nous allons donc créer l'arborescence suivante.
Le sous-dossier -notes est créé automatiquement par Dreamweaver
2.ARTICULATION
2.ARTICULATION DU SITE
s
2/9
Mes Expériences
Mes Diplômes
Mes Formations
Ma Photo
retour
retour
retour
retour
Jacques FEUGUEUR
– Université de La Rochelle
– Création de site web –
- DAEU Info 2007/2008
3.DEFINIR
3.DEFINIR UN SITE
Allez dans le Menu 'Site/Nouveau Site'
Nommer le site
Chercher l'emplacement du dossier
créé sur votre compte W: qui
deviendra l'emplacement du site
4.QUELQUES
4.QUELQUES CONSEILS
Afin d'alléger, et d'accélérer le téléchargement des visiteurs de vos pages web :
1.
2.
3.
4.
5.
6.
7.
3/9
Réduire la dimension de vos images
Convertir les images en format plus léger tels que .jpg ou .gif, compatibles web
Éviter les animations, qui distraient les visiteurs, et chargent vos pages
Articuler votre site de façon claire, et logique
Éviter les couleurs trop agressives
utiliser les tableaux pour bien disposer plusieurs éléments d'une page.
Tester toutes vos pages
Jacques FEUGUEUR
– Université de La Rochelle
– Création de site web –
- DAEU Info 2007/2008
5.CREER
5.CREER UNE PAGE
Nous allons tout d'abord créer une première page Web en allant dans Dreamweaver et aller dans
fichier/Nouveau
1. Nommer la page, 'Menu.htm' (extension du fichier mise par défaut).
2. L'enregistrer dans le dossier 'MENU' créé précédemment.
3. Créer les pages, Expériences, Diplômes, Formations, Photo
4. Les enregistrer dans le dossier pages
5. Enregistrer votre 'photo.jpg' dans le dossier 'Image'
Créer chaque pages du même type
que ci-après
4/9
Jacques FEUGUEUR
– Université de La Rochelle
– Création de site web –
- DAEU Info 2007/2008
6.RELIER
6.RELIER LES PAGES PAR DES LIENS
1) à l'aide de l'icône suivant :
Sélectionner Les Mots 'Mes Expériences' dans la page 'Menu'
Et aller chercher le lien dans le dossier
'Pages' en sélectionnant la page 'Expérience
2)
Vous devez voir apparaître dans 'lien' l'adresse de type :
file:///c|/CREATION SITE/PAGES/Experience.htm
7.TESTER
7.TESTER UN LIEN
Vous devez systématiquement tester les liens créés, ainsi que toutes les modifications apportées à votre page.
En effet vous verrez ce qu'affichera réellement votre Navigateur (Internet Explorer ou Mozilla) qui interprète
chaque page HTML par l'icône suivant :
•
•
•
•
•
Votre page apparaît
cliquer sur le lien 'Mes Expériences'
afin de vérifier si la redirection se fait sur la page 'Mes Expériences'
Fermer le Navigateur pour retourner dans Dreamweaver
Enregistrer la page modifiée si le lien est correcte
EXERCICE :
Créer sur chaque page, un lien sur les mot 'retour', qui permettront de retourner à la page Menu.
8.INSERER
8.INSERER UNE IMAGE
•
•
•
•
5/9
Ouvrir votre page web 'Ma Photo' créée précédemment.
Aller dans le menu Insertion/Image.
Puis aller chercher le fichier image, dans le dossier approprié.
Dimensionner l'image.
Jacques FEUGUEUR
– Université de La Rochelle
– Création de site web –
- DAEU Info 2007/2008
9.INSERER
9.INSERER UN TABLEAU
Menu : Insertion/Tableau
Définir le nombre de ligne et de
colonne
Taper zéro pour rendre invisible les
bordures de tableau
Remarque :
Le tableau permet surtout de mettre en forme et d'aligner plusieurs éléments de la page, tels que images textes
etc...
Ajouter du texte sur vos pages dans les différentes rubriques (expériences, formation etc...)
10.MISE
10.MISE EN FORME
Aller dans le menu 'Modifier/Propriété de la page'.
Permet de mettre le titre qui s'affichera
dans le navigateur
Permet de mettre une image d'arrière
plan en cliquant sur 'Parcourir'
Permet sélectionner dans une palette
une couleur pour l'arrière plan de la page
ou la couleur de stage
Permet de régler la transparence
de l'image d'arrière plan
6/9
Jacques FEUGUEUR
– Université de La Rochelle
– Création de site web –
- DAEU Info 2007/2008
11.HEBERGEUR
11.HEBERGEUR DE SITE
Un hébergeur de site va stocker vos fichiers qui constituent le site ce qui permettra de rendre votre site
accessible sur le net.
Il existe plusieurs hébergeurs de site, payant ou gratuit (mais attention dans ce cas des pop up
commerciaux s'ouvriront à chaque accès de votre site par les internautes).
Free est un hébergeur bien placé sur le marché, car il propose des services complet (l'accès à des
gestions de bases de données ).
1. Si vous désirez héberger votre site, suivez les indications qui vous permettrons de vous
inscrire
2. On vous enverra votre mot passe par courrier postal :
vous activerez ensuite votre compte web (, Gérer, et Activer, votre compte pour les pages
web)
3. Point d’entrée du site :
Le serveur hébergera votre site et associera votre adresse Web d’utilisateur, à un fichier
index.html se trouvant la racine de stockage du site.
4. D'autres hébergeurs :
Lycos/Multimania, iFrance, Altern, Tiscali.
5. Précautions d'usage :
Vous pouvez utiliser des images et des textes issus d’internet. Seulement « libres de
droits» (libres de droit d’auteur).
6. Sources :
Il existe des bibliothèques d’images libres de droits.
7. Concernant les textes,
il est conseillé de créer un lien vers le site de l’auteur et de lui demander son accord, si
cela n'est pas indiqué sur les pages récupérées.
7/9
Jacques FEUGUEUR
– Université de La Rochelle
– Création de site web –
- DAEU Info 2007/2008
12.12.- EXERCICE D'APPLICATION Copier le fichier texte dans le dossier texte préalablement créé
Copier les images dans le dossier image préalablement créé
1.
2.
3.
4.
Créer la page d'accueil ci-contre avec les liens (cartes miniatures) qui renverront à des pages
individuelles détaillées par espèce avec les images et cartes
identiques,(en plus grand)
Remarques :
–
–
–
Prendre chaque paragraphe ci-après pour constituer une page par espèce.
Chaque titre et paragraphe correspond à une page pour une espèce.
Chaque page doit avoir une image de l'animal concerné en plus grand
Penser à effectuer un lien de retour pour revenir au menu principale
a. Le lynx d'Amérique du nord
b. Le lynx roux, Bobcat
c. Le lynx d'Eurasie
d. Le lynx d'Espagne ou Lynx pardelle
e. Le caracal
Le lynx d'Amériques du nord : Lynx canadensis (Kerr, 1792)
Le lynx a une fourrure longue et épaisse brun-jaunâtre possédant parfois des tâches sombres. Sa queue est
courte, avec plusieurs anneaux et une extrémité foncée. Il possède des pattes postérieures longues. Ses pieds
sont très grands et recouverts d'un pelage dense : ils peuvent mesurer 10 cm. Ces "raquettes" l'empêchent de
s'enfoncer dans la neige profonde. Ses oreilles sont surmontées d'un fin pinceau de poils noirs et il possède le
plus souvent une collerette flottante de fourrure autour du cou.
Le lynx roux, Bobcat : Lynx rufus (Schreber, 1776)
Il ressemble beaucoup au précédent mais il a généralement les pattes plus courtes et les pieds plus petits. La
fourrure est courte, douce et dense, de teintes variées. Le dos va du gris clair au brun rougeâtre, plus sombre au
milieu, la région ventrale est blanche. La robe peut-être marquée de taches noires ou brun foncé, ou de raies.
L'arrière de ses oreilles est noir avec une tache blanche bien visible. La queue est courte, blanche à la partie
inférieure marquée d'une large bande noire sur le dessus de l'extrémité et de plusieurs raies sombres.
Le lynx d'Eurasie : Lynx lynx (Linné, 1758)
Il est presque deux fois plus grand que celui d'Amérique du Nord mais les proportions du corps restent les mêmes.
Cependant le lynx d'Eurasie est d'ordinaire marqué de grandes tâches noires ou de stries bien délimitées. Les
mâles et les femelles ont souvent un collier de poils longs autour du cou et sous le menton, aussi appelé des
favoris. La couleur de sa fourrure est la plus variable parmi les lynx. Elle varie du blanc-crème au brun foncé.
8/9
Jacques FEUGUEUR
– Université de La Rochelle
– Création de site web –
- DAEU Info 2007/2008
Le lynx d'Espagne ou Lynx pardelle : Lynx pardinus (Temminck, 1827)
Le lynx d'Espagne a une robe beaucoup plus tacheté que celle du lynx d'Eurasie. Toutefois, ces deux félins sont
bâtis de la même façon. Le lynx pardelle est beaucoup plus petit que son cousin d'Eurasie comme on le remarque
souvent chez les espèces vivants plus au sud. Il pèse en moyenne 12 à 13 kg pour le mâle et un peu moins pour
la femelle. Le mâle atteint 98 cm et la femelle 88 cm. La queue mesure 12 à 13 cm chez les deux sexes. Sa forte
ressemblance avec le lynx d'Eurasie mais aussi la probable cohabitation des deux espèces dans les Pyrénées
dans le passé laisse perplexe les scientifiques. Le lynx d'Espagne est peut être une sous-espèces du lynx
d'Eurasie. Ce dont on peut être sûr est qu'ils ont un ancêtre commun qu'ils ne partagent pas avec les autres lynxs.
Les scientifiques travaillent beaucoup sur se sujet, surtout pour déterminer à quel point le lynx pardelle est
menacé.
Le caracal : Lynx caracal (Schreber, 1776)
Malgré une forte ressemblance avec les autres lynxs, le caracal est aujourd'hui considéré comme un groupe à
part. Il n'est pas encore bien placé dans l'arbre des félins mais il se rapprocherait plus du serval. Cependant,
quand j'ai commencé mon dossier, le caracal était encore plus ou moins considéré comme le lynx du désert alors
j'ai décidé de le laisser à cette place.
Le caracal : Lynx caracal (Schreber, 1776)
Le caracal possède de longues jambes, un corps élancé et une queue courte. Ses pattes postérieures sont plus
longues que les antérieures. Le pelage, court et uni, est brun-rouge sur le dos et les flancs et blanc au menton, à
la gorge et sur le ventre. L'arrière des oreilles est noir. Celles-ci sont surmontées des plus long pinceaux de poils
noirs : 4.5 cm. Des caracals complètement noirs (mélaniques) ont été signalés.
9/9