Post on 19-Aug-2020
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>
<p>Hello World</p>
</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:<p style="text-align: justify">Lorem ipsum dolorsit amet, consectetur adipiscing elit. Duis dolorelit, vulputate vitae molestie ac, luctus egetaugue.</p>
<p>Lorem ipsum dolorsit amet, consectetur adipiscing elit. Duis dolorelit, vulputate vitae molestie ac, luctus egetaugue.</p>
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
Retour sur WordPress
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
UQAM INF1026
Retour sur WordPress
Les accès rapides
10
UQAM INF1026
Retour sur WordPress
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
Retour sur WordPress
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
Retour sur WordPress
Gérer les articles
Comment créer un nouvel article ?
Rendez-vous dans votre tableau de bord.
13
UQAM INF1026
Retour sur WordPress
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
Retour sur WordPress
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
Retour sur WordPress
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
Retour sur WordPress
Gérer les articles
Format de l’article
17
UQAM INF1026
Retour sur WordPress
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
Retour sur WordPress
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
Retour sur WordPress
Mise pratique 1
Créer un article dans votre site
Mettez y du contenu
Publier le…
20
UQAM INF1026
Retour sur WordPress
Gérer les catégories
Accéder aux catégories
21
Liste de vos catégories
UQAM INF1026
Retour sur WordPress
Gérer les catégories
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
Retour sur WordPress
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
Retour sur WordPress
Gestion des pages
Une page est une ressource
Sert à afficher de l’information statique, qui ne bouge pas
contrairement aux articles.
24
UQAM INF1026
Retour sur WordPress
Gestion des pages
Lien d’accès rapide à la page
25
UQAM INF1026
Retour sur WordPress
Mise pratique 3
Créez une page et y ajouter du contenu
26
UQAM INF1026
Retour sur WordPress
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
Retour sur WordPress
Gestion des menus
Ajouter un menu
Source: http://moz-code.org/uqam/index.html
28
UQAM INF1026
Retour sur WordPress
Gestion des menus
Afficher le menu dans le thèse
Source: http://moz-code.org/uqam/index.html
29
UQAM INF1026
Retour sur WordPress
Gestion des menus
Ajouter un élément de menu:
▪ Une page
▪ Des liens
▪ Des catégories (Articles)
Source: http://moz-code.org/uqam/index.html
30
UQAM INF1026
Retour sur WordPress
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
Retour sur WordPress
Configurer un élément du menu
Déplier un élément pour le configurer
32
UQAM INF1026
Retour sur WordPress
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
Retour sur WordPress
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
Retour sur WordPress
Gérer les thèmes
Comment accéder à la configuration de thèmes ?
35
UQAM INF1026
Retour sur WordPress
Gérer les thèmes
Choisir un thème
36
Voir les thèmes gratuits
Thème actif
UQAM INF1026
Retour sur WordPress
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
Retour sur WordPress
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
Retour sur WordPress
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
Retour sur WordPress
Gérer les Gadgets
Zones de gadgets: dépendent du thème
40
UQAM INF1026
Retour sur WordPress
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
Configuration et réglages: WordPress
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
Configuration et réglages: WordPress
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
Configuration et réglages: WordPress
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
Configuration et réglages: WordPress
Changer la page d’accueil
Utiliser une page statique comme page d’accueil.
46
UQAM INF1026
FIN DU COURS
47