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

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

Présentations similaires


Présentation au sujet: "1 Création de pages Web Vincent DURO IUT du Havre Cours Site WEB 2ème année GEA"— Transcription de la présentation:

1

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

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

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

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

6 5 Quest-ce qun URL Type de « serveur » (http, ftp, telnet, file) Nom de la machine (machine.domaine.pays) répertoire nom du fichier

7 6 Quel type de pages Pages personnelles CV Disponibilité (horaires, agenda) Le site de léquipe de recherche Vitrine des activités Organisation de linformation 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

8 7 Page perso simple Pages perso enseignement Pages perso recherche Réservation de matériel Site dune équipe de recherche Exemple de pages Web

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

10 9 Composition dune page WEB VisibleLe 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 lauteur La date de création et de modification Les mots clés, …

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

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

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

14 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

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

16 15 Les éditeurs dhtml É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

17 16 - Repérer les sites - enregistrer- modifier - Copier les images et les icônes intéressantes - Stocker les sites (l'adresse) dont laspect 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 Conseils

18 17 - 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 Conseils :suite

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

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

21 20 Utilisation de Netscape Composer

22 21 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 Exemple de page à réaliser Tableau Cellule de taille et couleurs Une photo

23 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 laide) La seul modification visible est dans le titre de la page, le reste nest visible que dans la source de la page

24 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

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

26 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

27 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

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

29 28 Comment éditer ses pages Pages perso (recherche, enseignement, agenda, …) 1- Demande dhé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 ladresse du site Truc : votre première page doit sappeler index.html pour que le site soit référencé automatiquement dans lannuaire de luniversité.

30 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 :

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

32 31

33 32

34 33

35 34

36 35

37 36

38 37

39 38

40 39

41 40

42 41

43 42

44 43

45 44

46 45

47 46

48 47

49 48

50 49

51 50

52 51

53 52

54 53

55 54

56 55

57 56

58 57

59 58

60 59

61 60

62 61

63 62

64 63

65 64

66 65

67 66

68 67

69 68

70 69

71 70

72 71

73 72

74 73

75 74

76 75

77 76

78 77

79 78

80 79

81 80

82 81

83 82

84 83

85 84

86 85

87 86

88 87

89 88

90 89

91 90

92 91

93 92

94 93

95 94

96 95

97 96

98 97

99 98

100 99

101 100

102 101

103 102

104 103

105 104

106 105

107 106

108 107

109 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 "1 Création de pages Web Vincent DURO IUT du Havre Cours Site WEB 2ème année GEA"

Présentations similaires


Annonces Google