cours_creation pages web - Université de La Rochelle
Transcription
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