Learning Design
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
Accueil  Dernières imagesDernières images  Rechercher  S'enregistrerS'enregistrer  Connexion  
-28%
Le deal à ne pas rater :
Précommande : Smartphone Google Pixel 8a 5G Double Sim 128Go ...
389 € 539 €
Voir le deal

 

 Commencer un site... Avec un fond et un header.

Aller en bas 
AuteurMessage
loulou
Modératrice
loulou


Féminin
Nombre de messages : 2256
Age : 41
Localisation : Belgique
Logiciels : photofiltre studio + photoshop 7.0

Commencer un site... Avec un fond et un header. Empty
MessageSujet: Commencer un site... Avec un fond et un header.   Commencer un site... Avec un fond et un header. EmptyDim 1 Nov - 16:44

Voila,
Pour commencer un site avec un header et un fond, vous avez besoin de créer 3 pages en PHP : header.php qui contiendra votre header et votre fond, la page footer.php qui contient le menu, et la page index.php qui referme le tout, qui contient tout.


1) La première page est la page "header.php".
Cette page ressemble à une page html pour ceux qui connaissent un peu, sauf qu'on a pas besoin de fermer les balises <HTML> et <BODY>. Ces balises seront terminées dans une autre page ! Wink

Voici le code à insérer dans votre nouvelle page ouverte avec Notepad ++

Code:
<html>
<head>
<title>Titre de mon site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<!-- On ouvre le balise body et on met le fond de la page -->
<BODY background="http://url_de_limage_de_fond.jpg" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<!-- On met le design -->
<img src="http://img.png" align="left">

<!-- on ouvre maintenant la balise de la zone de texte pour le contenu (Remplacer les dimensions)-->
<div id="contenu" style="position: absolute; width:LARGEUR DU HEADER MOINS 190 px; z-index: 1; left:0px; top:HAUTEUR DU HEADERpx">

Ensuite, on sauves la page sous "header.php" Tout ce qui est code à modifier sera fait plus tard en classe, je vous expliquerai le tout. Pour l'instant, ne modifiez RIEN !

2) Le menu : C'est la page qui termine le site, donc on oublie pas de fermer les balises de tout à l'heure !

Ouvrez une nouvelle page sous notepad++, puis insérez ce code :

Code:
<!-- on referme la balise de la zone de texte pour le contenu -->
</div>

<!-- on ouvre maintenant la balise de la zone de texte pour le menu (Remplacer les dimensions)-->
<div style="position: absolute; left:LARGEUR DE LA ZONE DE CONTENU px; width:175px; top:HAUTEUR DU HEADERpx; z-index: 1;" align="justify">

<!--Vous pouvez maintenant mettre votre texte-->
<h1> Menu</h1>
Lien<br>
Lien<br>
Lien<br>
Lien<br>
Lien<br>
Lien<br>

<!--Et on oublie pas de refermer les balises body et html-->
</body></html>

Comme pour la page header.pho, on oublie pas de sauver sa nouvelle page sous le nom de footer.php ! De même, les modifications seront expliquées en classe !


3) Index.php

Cette fois encore on ouvre une nouvelle page sous notepad++ que l'on sauvera à la fin sous "index.php"
Cette page regroupera grace aux include, les deux autres pages créées précédemment (header et footer)
C'est sur l'index.php qu'on arrivera quand on cliquera sur votre nom de site. En général, c'est sur cette page qu'on mets les news...

Code à insérer :

Code:
<!-- Include qui permet d'afficher le haut du site -->
<? include'header.php';?>

<!-- Le contenu de votre site en HTML (vous pouvez aussi ajouter un script en PHP)  -->
<B>Bienvenue</B>
 Bonjour !

<!-- Include qui permet d'afficher le menu du site -->
<? include'footer.php';?>

Voilà !

L'étape suivante, une fois que vous avez sauvé les 3 pages, est de les mettre sur votre site grace à fillezilla ou un autre programme ftp
A ce sujet, un nouveau topic sera réalisé dans les prochains jours !

Topic réalisé grace au cours de mYn
Revenir en haut Aller en bas
 
Commencer un site... Avec un fond et un header.
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Un header et un fond

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Learning Design :: World wide web :: L'école :: Anciens cours d'élèves :: Site-
Sauter vers:  
Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser