La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Création de pages Web Vincent DURO IUT du Havre

Présentations similaires


Présentation au sujet: "Création de pages Web Vincent DURO IUT du Havre"— Transcription de la présentation:

1 Création de pages Web Vincent DURO IUT du Havre
Cours Site WEB 2ème année GEA

2 Plan Session 1 : Une page simple Session 2 : Webmaster
Comment devenir webmaster Composition d’une page Web Les éditeurs d’html Netscape Composer Réaliser une page Web simple Comment publier son site Session 2 : Webmaster Le langage HTML

3 Plan Session 1 : Une page simple Session 2 : Webmaster
Comment devenir webmaster Composition d’une page Web Les éditeurs d’html Netscape Composer Réaliser une page Web simple Comment publier son site Session 2 : Webmaster Le langage HTML

4 Comment devenir Webmaster
Un serveur (CRI) Un espace réservé Votre ordinateur Un éditeur d’HTML (Netscape Composer) Le Web mondial

5 Qu’est-ce q’un URL http://perso.univ-rennes1.fr/Eric.Hitti/index.html
Type de « serveur » (http, ftp, telnet, file) Nom de la machine (machine.domaine.pays) répertoire nom du fichier

6 Quel type de pages Pages personnelles CV
Disponibilité (horaires, agenda) Le site de l’équipe de recherche Vitrine des activités Organisation de l’information Mise à disposition de biblio, de programmes Proposition de thèses et de DEA Le site de l’équipe pédagogique Transparents en ligne QCM et formulaires en ligne Réservation de salles et de matériels

7 Exemple de pages Web Page perso simple
Pages perso enseignement Pages perso recherche Réservation de matériel Site d’une équipe de recherche

8 Plan Session 1 : Une page simple Session 2 : Webmaster
Comment devenir webmaster Composition d’une page Web Les éditeurs d’html Netscape Composer Réaliser une page Web simple Comment publier son site Session 2 : Webmaster Le langage HTML

9 Composition d’une page WEB
Visible Le texte  Les images fixes ou animées , du son, des icônes Les liens Les tableaux  Les formulaires Les applications, … Moins visible Le titre de la page Tableau sans bordures Des cadres (frames), … Pas visible Le nom de l’auteur La date de création et de modification Les mots clés, …

10 L'origine de la page WEB E r i c
Transmettre des informations à l'autre bout du monde Le code ASCII=255 caractères Le fichier informatique L'éditeur de texte (Bloc-notes) E r i c Le traitement de texte (Word) E r i c  Instructions de mise en forme  balises

11 L'origine de la page WEB : éditeur simple
- Je veux : Eric <i> Eric </i> - Je créé un fichier .HTML Et j'utilise des balises de mise en forme Je visualise le résultat à l'aide d'un navigateur (Netscape) qui interprète le code

12 L'origine de la page WEB : éditeur évolué
- Je veux : Eric en gras - Je sélectionne le texte avec ma souris Eric - J'utilise le bouton adéquat Fichier.html <b> Eric </b> L'éditeur modifie le code en insérant les balises au bon endroit Et en même temps donne un aperçu du résultat

13 L'origine de la page WEB : un fichier complet
La page source en .htm ou .html Elle est créé à l'aide d'un simple éditeur de texte HTML n'est pas un langage de programmation ! Ce n'est qu'un langage de description de documents. Le navigateur (Netscape) permet de visualiser la page web en interprétant le code

14 Plan Session 1 : Une page simple Session 2 : Webmaster
Comment devenir webmaster Composition d’une page Web Les éditeurs d’html Netscape Composer Réaliser une page Web simple Comment publier son site Session 2 : Webmaster Le langage HTML

15 Les éditeurs d’html Éditeurs simples (on tape directement du HTML)
- Tout éditeur de texte - Htmledit - Arachnophilia … Éditeurs évolués (WYSIWYG) - Netscape Composer - Dreamweaver (Prendre contact avec le CRI) - Frontpage (Prendre contact avec le CRI) AolPress NVU Site de téléchargement

16 Conseils - Repérer les sites - enregistrer- modifier
Copier les images et les icônes intéressantes Stocker les sites (l'adresse) dont l’aspect est intéressant Utiliser les minuscules pour tous les noms de fichiers Des images de petite taille < 50 Ko, Répartir l'information sur plusieurs fichiers Petits fichiers visualisés sur deux écrans maxi L'information dans chaque fichiers doit pouvoir être comprise indépendamment du contexte du document qui l'a appelé Utiliser une table des matières ou un index Utiliser plusieurs fenêtres indépendantes ? (frames) Donner la date de la version actuelle (un historique des modifications) Conserver les mêmes conventions de graphique et de style sur l'ensemble de vos documents

17 Conseils :suite - Préparez une arborescence de votre site
- Spécifiez les liens vers vos différentes pages Votre site doit être modulable (pour accueillir de nouvelles rubriques) Pour que votre site soit correctement visible dans une résolution de 800 x 600, basez vous sur une largeur de 750

18 Quelques sites de références
Site de téléchargement Université Numérique de Bretagne Cours de HTML

19 Plan Session 1 : Une page simple Session 2 : Webmaster
Comment devenir webmaster Composition d’une page Web Les éditeurs d’html Netscape Composer Réaliser une page Web simple Comment publier son site Session 2 : Webmaster Le langage HTML

20 Utilisation de Netscape Composer

21 Exemple de page à réaliser
Titre de la page Ma page perso Université rennes1 adresse mail Enseignement Recherche a b Biblio 1 2 Titre Mots clés Description En-tête 1 En-tête 2 Lien site univ Lien courrier Tableau invisible Centré, réduit Liste à puces abc Liste à puces 123 Fond d'écran Une photo Tableau Cellule de taille  et couleurs 

22 Netscape Composer Fichier-Nouveau-Page vierge Fichier-Enregistrer sous
Donner le nom du fichier Donner le titre de la page HTML Format-Propriétés et couleurs de la page Générales : Titre, Auteur, Description, Mots clés Couleurs et arrières plans (utiliser l’aide) La seul modification visible est dans le titre de la page, le reste n’est visible que dans la source de la page

23 Netscape Composer : caractères
Format-Propriétés des caractères (Sélectionner au préalable avec la souris le texte à traiter) Gestion de la police (type, taille, style, couleurs,…) Associer un lien d'une source (texte cliquable) vers un document (nom_fichier) vers un (mailto:adresse) vers un site (http://nomdusite) Gestion du paragraphe liste à puces, alignement, titre de niveau n Truc : La fin d'un paragraphe est défini par Entrée, pour rester dans le même paragraphe en réalisant un saut de ligne utiliser : shift+Entrée

24 Netscape Composer : Images
Insérer-Images Donner l’adresse de l’image Alignement de l’image et rebouclage du texte autour de l’image Dimensions de l’images (peut être régler avec la souris) Définir un lien quand on clique sur l’image Trucs : -Mettre toutes vos images dans un même répertoire et tous les noms en minuscules -Utiliser un chemin relatif

25 Netscape Composer : Tableau
Insérer-Tableau Largeur des bords = 0  sans encadrements Arrière-plan (couleurs, images) par cellule, par ligne, par tableau Taille, alignement (par cellule ou par ligne) Une cellule vide  pas d'encadrement sur cette cellule (il faut mettre au mini un espace) Format-Propriétés du tableau Permet de modifier (centrage, couleur de fond, …) la cellule ou la ligne correspondant à l'emplacement du curseur. Truc : cliquer sur Appliquer pour voir un aperçu sans quitter la boite de dialogue

26 Netscape Composer : Le résultat
Vérifier le résultat sur plusieurs navigateurs Netscape : en utilisant l'icône Internet explorer , Mozilla firefox, … L'interprétation n'est pas toujours la même et certains peuvent mal interpréter ou ne pas interpréter du tout. Il ne vous reste plus qu'à publier votre page

27 Plan Session 1 : Une page simple Session 2 : Webmaster
Comment devenir webmaster Composition d’une page Web Les éditeurs d’html Netscape Composer Réaliser une page Web simple Comment publier son site Session 2 : Webmaster Le langage HTML

28 Comment éditer ses pages
Pages perso (recherche , enseignement, agenda, …) 1- Demande d’hébergement du site 2- Transfert des fichiers sur le seveur du CRI Utilisation de RearSite : 3- Tests et corrections Pages labo ou équipe Prendre contact avec le CRI pour définir l’adresse du site Truc : votre première page doit s’appeler index.html pour que le site soit référencé automatiquement dans l’annuaire de l’université.

29 RearSite Ce site permet de :
- Déposer des documents sur un service Web, - Créer des forums - Créer des salons de bavardage (chat) - Créer calendriers partageables - Bâtir des QCM multimédias (en cours de construction). Pour y avoir accès : Pour l'utiliser :

30 Plan Session 1 : Une page simple Session 2 : Webmaster
Comment devenir webmaster Composition d’une page Web Les éditeurs d’html Netscape Composer Réaliser une page Web simple Comment publier son site Session 2 : Webmaster Le langage HTML

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108 Références : - Cours « création de pages WEB » de Eric Hitti
(Université de Rennes) Cours « Introduction au langage HTML » de Jean-Luc Mari (UnivMed_Esil) « Cours HTML »


Télécharger ppt "Création de pages Web Vincent DURO IUT du Havre"

Présentations similaires


Annonces Google