INF1026: Outils de bureautique, logiciels et Internetgdac.uqam.ca/INF1026/Cours/Seance13.pdfUQAM INF1026 1 Séance 13: Conception de sites web Partie 2 Chargée de cours: Ange Adrienne

UQAM INF1026 1

Séance 13: Conception de sites webPartie 2

Chargée de cours: Ange Adrienne NYAMEN TATODépartement Informatique

Session Été 2017 – Groupe 20

INF1026: Outils de bureautique, logiciels et Internet

UQAM INF1026

Notions abordées

Rappel sur les notions de HTML et CSS

Retour sur WordPress

Gérer les articles

Gérer les catégories

Gérer les pages

Administration de WordPress

Aller plus loin

2

UQAM INF1026

Rappels

Pourquoi 2 langages ? HTML et CSS.

HTML: Son rôle est de gérer et organiser le contenu.

C'est donc en HTML que vous écrirez ce qui doit être

affiché sur la page : du texte, des liens, des images…

Vous direz par exemple : « Ceci est mon titre, ceci est

mon menu, voici le texte principal de la page, voici une

image à afficher, etc. ».

CSS (Cascading Style Sheets): Le rôle du CSS est de

gérer l'apparence de la page web (agencement,

positionnement, décoration, couleurs, taille du texte…).

3

UQAM INF1026

Rappels

Pourquoi 2 langages ? HTML et CSS.

4

UQAM INF1026

Rappels

Structure d’une page HTML

<!doctype html>

<html>

<head>

<title>J'aime Schnaps.it</title>

</head>

<body>

Hello World

</body>

</html>

Remarque: c’est le titre qui apparaît dans les résultats de

recherche.

5

UQAM INF1026

Rappels

Mise en forme avec CSS

Pour mettre en forme un élément directement:

Syntaxe:

<balise style="prop1:val1, prop1:val2">

Exemple:Lorem ipsum dolorsit amet, consectetur adipiscing elit. Duis dolorelit, vulputate vitae molestie ac, luctus egetaugue.

Lorem ipsum dolorsit amet, consectetur adipiscing elit. Duis dolorelit, vulputate vitae molestie ac, luctus egetaugue.

6

UQAM INF1026

Rappels

Propriétés CSS utiles

font-size 1.3em, 16px, 120%...

font-family times, courier, arial...

color black, red, #FF0000...

text-align left, center, right, justify

border 3px solid black

background white

7

UQAM INF1026

Rappels

Les CMS (Content Mangement System)

Écrire le HTML à la main c’est fastidieux et long.

Comment créer un site web professionnel plus facilement ?

Un CMS ou système de gestion de contenu, est une famille de

logiciels servant à la conception et à la mise à jour dynamique de

sites web.

Il faut tout de même avoir quelques notions de bases sur

l’utilisation du HTML

Il existe plusieurs CMS dont les plus utilisés sont: WordPress,

Joomla et Drupal.

8

UQAM INF1026


Accéder à son site

http://URL.wordpress.com

Exemple: http://INF1026uqam.wordpress.com

Accéder au tableau de bord

http://URL.wordpress.com/wp-admin/

Exemple: http://INF1026uqam.wordpress.com/wp-admin/

Accéder aux options de design (changer le titre de votre site, etc.)

https://wordpress.com/customize/URL.wordpress.com

Exemple:

https://wordpress.com/customize/inf1026uqam.wordpress.com

9

http://inf1026uqam.wordpress.com/

http://inf1026uqam.wordpress.com/wp-admin/

https://wordpress.com/customize/inf1026uqam.wordpress.com

UQAM INF1026


Les accès rapides

10

UQAM INF1026


Les accès rapides

Accéder au paramétrage de votre site via le bouton “Mon site”

Accéder à la recherche dans Wordpress, à d’autres informations

comme les sites que vous avez aimés, vos abonnements, etc. via

le bouton “Lecteur”

Ajouter un nouvel article dans votre site web en cliquant sur le

bouton:

Accéder rapidement aux options de design via ce menu (en bas à

droite de votre site web):

11

UQAM INF1026


Gérer les articles

Un article est une ressource qui peut être du texte, une vidéo, un

son, une citation, bref une mélange de contenus qui peuvent être

différents.

Les articles sont affichés sur la page d’accueil ou dans les pages

de catégories et peuvent être accessibles via les menus.

Nous verrons comment les afficher avec les menus…

12

UQAM INF1026


Gérer les articles

Comment créer un nouvel article ?

Rendez-vous dans votre tableau de bord.

13

UQAM INF1026


Gérer les articles

Saisir l’article

14

Code HTML

Contenu de l’article ici

Le titre de votre article

Insérer des images, des vidéos, etc.

Insérer un lien hypertexte

UQAM INF1026


Gérer les articles

Publier l’article: Il est très important de publier un article après sa

création ou sa modification pour que les modifications puissent

être visibles au niveau de votre site web.

15

Enregistrer sans publier

Voir l’article sans le publier

Publier à une date précise

Publier l’articletout de suite

UQAM INF1026


Gérer les articles

Ajouter l’article à une catégorie

16

Les différentes catégories crées pour votre site web

Ajouter une nouvelle catégorie

UQAM INF1026


Gérer les articles

Format de l’article

17

UQAM INF1026


Gérer les articles

Supprimer un article (1ere Méthode)

18

Passer la souris sur le nom de l’article que vous voulez supprimer.

UQAM INF1026


Gérer les articles

Supprimer un article (2eme Méthode)

19

▪ Sélectionner l’article en cliquant sur la case àcocher devant son nom.

▪ Déroulez la liste au dessus des articles et choisir“Déplacer dans la corbeille”

▪ Cliquez ensuite sur “Appliquer”▪ Vous pouvez supprimer plusieurs articles à la fois

en les sélectionnant tous.

1

2

3

UQAM INF1026


Mise pratique 1

Créer un article dans votre site

Mettez y du contenu

Publier le…

20

UQAM INF1026



Accéder aux catégories

21

Liste de vos catégories

UQAM INF1026



Créer une nouvelle catégorie

22

Le nom sera utilise dans la liste descatégories et dans les menus.

Hiérarchiser les catégories ensélectionnant un parent.

La description peut être affichée dansla liste des catégories

UQAM INF1026


Mise en pratique 2

Renommez la catégorie “Uncategorized” ou « Non classé » en

“Non catégorisé”.

Ajoutez une nouvelle catégorie.

Associez la nouvelle catégorie à un article (celui que vous avez

crée dans la mise en pratique 1)

23

UQAM INF1026


Gestion des pages

Une page est une ressource

Sert à afficher de l’information statique, qui ne bouge pas

contrairement aux articles.

24

UQAM INF1026


Gestion des pages

Lien d’accès rapide à la page

25

UQAM INF1026


Mise pratique 3

Créez une page et y ajouter du contenu

26

UQAM INF1026


Gestion des menus

Par défaut, votre site ne contient pas de menu

Ajoutez des menus pour créer des liens vers des pages, des

catégories ou des ressources externes.

La position des menus dans la page dépend du thème.

27

UQAM INF1026


Gestion des menus

Ajouter un menu

Source: http://moz-code.org/uqam/index.html

28

http://moz-code.org/uqam/index.html

UQAM INF1026


Gestion des menus

Afficher le menu dans le thèse


29


UQAM INF1026


Gestion des menus

Ajouter un élément de menu:

▪ Une page

▪ Des liens

▪ Des catégories (Articles)


30


UQAM INF1026


Ordonner les menus

Ordonner les éléments du menu avec la souris (Glisser –

déposer).

Permet de créer des sous-menus

31

UQAM INF1026


Configurer un élément du menu

Déplier un élément pour le configurer

32

UQAM INF1026


Mise pratique 4

Créez un menu pour votre site

Ajouter les éléments suivants:

▪ Lien vers une catégorie

▪ Lien vers une page

▪ Lien vers une ressource externe (Le site de l’UQAM par

exemple)

33

UQAM INF1026


Gérer les thèmes

Le thème correspond à l’apparence de votre site

Il définit les remplacements réservés : titre et logo, menus,

gadgets, etc.

34

UQAM INF1026


Gérer les thèmes

Comment accéder à la configuration de thèmes ?

35

UQAM INF1026


Gérer les thèmes

Choisir un thème

36

Voir les thèmes gratuits

Thème actif

UQAM INF1026


Gérer les thèmes

Survoler un thème avec la souris

Choisir “Aperçu” pour voir ce que donne le thème avec votre site

web

Choisi “Activer” pour utiliser ce thème avec votre site

37

UQAM INF1026


Gérer les thèmes

Personnaliser le thème actif:

Couleurs

En-têtes (titre du site, etc.)

Menus

Frontal

Zones réservées (Widgets, etc.)

38

UQAM INF1026


Mise pratique 5

Changer le thème de votre site

Changer le titre

Changer la couleur d’arrière plan

Changer l’image d’entête si il y’en a

39

UQAM INF1026


Gérer les Gadgets

Zones de gadgets: dépendent du thème

40

UQAM INF1026


Mise pratique 6

Supprimez les gadgets de base

Choisissez 3 gadgets utiles

Ajoutez les à votre site

41

UQAM INF1026

Configuration et réglages: WordPress

Inviter des utilisateurs WordPress à :

Suivre votre site

Écrire des articles

Modifier des articles

Contribuer au contenu

Administrer le site

42

UQAM INF1026


Gestion des droits

Administrateur: tous les droits

Éditeur: gérer les articles, pages et catégories

Auteur: gérer ses propres articles

Contributeur: écrire des articles mais pas les publier

Visiteur (follower, viewer): lire et commenter les articles et pages

43

UQAM INF1026


Exporter/Importer des données

Permet de déplacer le contenu d’un site vers un autre, faire des

sauvegardes, migrer de version ou de CMS

Il est également possible de supprimer votre site via le sous menu

du menu « outils » (voir image ci-dessus)

44

UQAM INF1026


Gérer les options avancées du site

Options de rédaction

Options de lecture

Gérer les commentaires

Partager le contenu sur des réseaux sociaux

Etc.

45

UQAM INF1026


Changer la page d’accueil

Utiliser une page statique comme page d’accueil.

46

UQAM INF1026

FIN DU COURS

47

Documents

INF1026: Outils de bureautique, logiciels et Internetgdac.uqam.ca/INF1026/Cours/Seance13.pdfUQAM INF1026 1 Séance 13: Conception de sites web Partie 2 Chargée de cours: Ange Adrienne