Retour Accueil

Connectez vous
Inscrivez-vous







Ou que vous soyez dans la lecture de ce TOPO, vous pouvez retrouver le menu général en utilisant le bouton en haut à gauche de votre page...

ReculMenu  AvanceTopo 2

Topo 1 -> LES PRE-REQUIS
christele001

Lorsque nous aurons terminé de rédiger ce site (dans moins d'un an) et que vous en aurez suivi la totalité des Topos , et posés toutes vos questions dans nos blogues,vous saurez réaliser totalement votre propre site web, sans aucun outil du commerce,(souvent inutils ). il vous suffira de choisir un nom de domaine (nous verrons quelques conseils à ce sujet); et le faire hébergé sur un serveur PRO. Vous saurez également utiliser tout les "Outils Google Webmaster" (gratuits bien sur) et votre site sera parfaitement référencé ,la encore sans utiliser de services payants inutils. Alors combien cela vous coutera ??? en aucun cas plus de 90 euros par an ,pour l'hébergement et de nom de domaine. Toutes les explications permettant de réaliser un site complet comme celui-ci c'est cadeau et c'est ICI .
(nota: notre travail à été lancé le 01-08-2020, nous espérons l'avoir achevé avant les vacances 2021, mais nous continuerons longtemps encore à répondre à vos questions



C'est parti !!
En réalité, écrire un site web, c'est écrire dans le langage du serveur qui nous heberge, tout les ordres pour qu'il envoie au navigateur du visiteur les pages de notre site web. Notre serveur, est paramétré en PHP ,c'est donc uniquement ce langage que nous utiliseront.Il nous suffit donc de lui décrire quel HTML envoyer au visiteur pour chaque page.
Vous l'avez compris le PHP n'envoie pas de CSS (feuille de style) ,ni de Javascript,ni images etc.. au visiteur, c'est le rôle de votre navigateur, exécutant le html qu'il reçoit du serveur de demander tout ce que nous avons décrit dans notre html ! ainsi donc vous y voyez plus clair sur qui fait quoi ! * Allez, insistons encore d'avantage, lorsque le HTML demande au serveur une feuille de style décrite dans la page ou une vidéo ou tout autre composant, le serveur n'est plus en lien avec vous via le PHP. mais c'est votre navigateur qui dialogue avec le serveur.

Toutes nos pages utilisent ,sans aller trop loin, toutes les nouvelles techniques , par exemple la feuille de style utilise pour s'adapter aux différents supports (écran d'ordinateur, tablettes, téléphones) La spécification CSS3 "Media Queries" prévue pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On parle de pratique Responsive Web Design. Egalement nous enployons les mises en page à l'aide de la conjugaison entre les modules CSS Grid layout, à l'intérieur des-quels nous incluons les mises en formes horizontales ou verticales des éléments contenus dans chaque "Grille" ainsi donc, pour le type de site comme le notre un simple découpage de nos pages en quatre zones :
le bandeau, le menu, la page , le pied de page. Comme vous pouvez le voir ici, (ce sont les 40 premiéres lignes de notre feuille CSS unique pour toutes nos pages de ce site.
Voyez le GRID de nos pages
Ainsi ce simple bout de CSS dans le HTML de notre page type, suffit à mettre en place les grandes parties d'une page classique:


.wrapper > div {
  border: 2px solid #ffffff; 
  background-color: #ffffff;
  padding: 10px;
  color: #000000;
}
.wrapper {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: 
    "bandeau"
    "ToutMenu"
    "content"
    "footer";
  min-height: 100vh;
}
.bandeau {
  grid-area: bandeau;
  text-align:center;
}
.ToutMenu {
  grid-area: ToutMenu;
  text-align:center;
}
.content {
  grid-area: content;
  text-align:left;
}
.footer  {
  grid-area: footer;
  text-align:center;
}

Ainsi toutes nos pages seront entourées d'un DIV particulier avec la classe "wrapper", et dans ce DIV se trouveront toujours le quatres DIV pour les classes
bandeau (qui servira eventuelement a mettre un bandeau et quelques objets ... nous y reviendront. ),
ToutMenu (pour le menu général du site),
content (contenant la page elle même),
footer (étant réservé au bas de page.)

* Certains se demandent sans doute mais ou mettre les éléments qu'une page peut utiliser et qui sont disposé à un endroit précis de chaque page comme le bouton HOME en haut à gauche de la page ,ou un DIV qui apparaitrait lors d'un login ou encore une image située a droite du site quand la taille de la fenétre le permet ? TOUT ces objets ne se déplaçant pas avec le scroll !
Nous y reviendront au bon moment, mais sachez que tout ces éléments se déclarent et se positionnent avant l'ouverture du DIV wrapper tout simplement. vous voyez déja la simplification extréme qu'apporte le GRID lors d'une mise en page. Tout ces DIV indépendants tel des électrons libres, feront l'objet d'un TOPO spécialement pour eux tant leur rôle est important.


Vous comprendrez facilement que toutes les pages auront trois grilles identique à quelque détails prés:
Par exemple le menu sera toujours identique à l'exeption du bouton de la page active ,qui sera par exemple brune au lieu de noir, et inactive. etc. voila pourquoi nous allons vous expliquer comment est organisé le code des pages, objet du AvanceTopo 2
.