CSS/PHP dreamweawer

T

titou34

Membre confirmé
6 Mars 2005
44
1
Bonjour,
Je souhaite refaire un site existant (avec des frames) avec une nouvelle mise en forme CSS/PHP suivant le modele suivant (merci gloup gloup) :
http://css.alsacreations.com/xmedia/exemples/frames/frames2.php
Avec le tuto :
http://css.alsacreations.com/Tutoriels-PHP/Inclure-un-fichier-dans-un-autre-grace-a-CSS-et-PHP

Voici mon code avec 4 pages htm existantes mais ça marche PAS !!!!
<style type="text/css">
<!--
body {
margin: 0;
font-family: verdana, arial, sans-serif;
}
.haut {
width: auto;
height: 100px;
background-color: #000000;
color: #fff;
font-size: 12px;
padding: 10px;
}
.gauche {
float: left;
width: 180px;
height: 338px;

}
.frame {
margin-left: 480px;
width: auto;
height: 338px;
overflow: auto;
font-size: 14px;
}
</style>

<body>
<div class="haut">mon site .com</div>
<div class="gauche">
<ul>
<li><a href="index.php?page=accueil">Accueil</a></li>
<li><a href="index.php?page=descriptif">Descriptif</a></li>
<li><a href="index.php?page=presse">Presse</a></li>
<li><a href="index.php?page=video">Video</a></li>
</ul>
</div>
<div class="frame">
<?php
if (!isset($_GET['page'])) $page= 'accueil';
switch($page)
{
case 'accueil': include ('cdpage.htm');break;
case 'descriptif': include ('descriptif.htm');break;
case 'presse':include ('presse.htm');break;
case 'video':include ('menuvideo.htm');break;
}
?>
</div>
</body>

J'ai nommé la frame qui inclut les pages web index.php
Mais dois-je créer une page index.php ? Dois-je mettre mes pages web dans un dossier index ?
Merci pour votre aide
 
les cinq pages suivantes doivent exister au m&#234;me niveau &#224; la racine du site :

index.php -> contient le code que tu as pr&#233;sent&#233;

cdpage.htm
descriptif.htm
presse.htm
menuvideo.htm

la page index.php va se construire en fonction des clics sur les liens dans le div de classe "gauche" et placer l'un ou l'autre des pages .htm dans le div de classe frame.
 
"les cinq pages suivantes doivent exister au même niveau à la racine du site :

index.php -> contient le code que tu as présenté

cdpage.htm
descriptif.htm
presse.htm
menuvideo.htm"

Ca veut dire quoi ? Que dois-je faire
Merci
 
titou34 a dit:
Ca veut dire quoi ? Que dois-je faire
Merci
Cliquez pour agrandir...

Les pages .htm elles existent ? tu les a &#233;crites ? tu as un h&#233;bergement pour ces pages ?

Franchement, lis, r&#233;fl&#233;chis ou embauche quelqu'un.
 
"Bonjour,
Je souhaite refaire un site existant (avec des frames) avec une nouvelle mise en forme CSS/PHP suivant le modele suivant (merci gloup gloup) :"

Les pages existent donc et sont hébergées.
Je souhaiet apprendre voila la raison pour laquelle je n'embauche pas.
Cela dit je ne sais pas pourquoi mon code ne fonctionne pas.
J'ai suivi le tuto (voir ci dessus) mais ça ne fonctionne.
Merci
 
J'ai refait le tuto en adaptant un peu. Voici les fichiers : sitesansframe.zip

Pour info voici le code de la page index.php :

Bloc de code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
        <!--
        body {
        margin: 0;
        padding:0;
        position: absolute;
        width: 100&#37;;
        height: 100%;
        font-family: verdana, arial, sans-serif;
        }
        .haut {
        width: auto;
        height: 126px;
            background-color: #06C;
        color: #fff;
        padding: 10px;
        }
        .haut h1{
        font-size: 2em;
        }
        .haut h1 a{
        color: #fff;
        text-decoration: none;
        }
        .conteneur {
        height: 338px;
        width: 100%;
        }
        #menu {
        position: absolute;
        left: 0;
        width: 180px;
        height: 338px;
        background-image: url(gauche.gif);
        }
        #frame {
        margin-left: 180px; /* on place ce bloc &#224; droite du bloc menu de 180px de large */

        width: auto;
        height: 338px;
        overflow: auto; /* cette propri&#233;t&#233; va permettre le scroll de ce bloc */
        font-size: 14px;
        }
        .bas {
        width: auto;
        height: 30px;
        background-color: #06C;
        color: #fff;
        font-size: 12px;
        padding: 10px;
        }
        -->
        </style>
<?php 
/*Titres des pages*/
$pages=array(
   'accueil'=>'Accueil',
   'descriptif'=>'Descriptif',
   'presse'=>'Presse',
   'video'=>'Vid&#233;o'
);
?>    
        <title><?php echo $pages[$_GET['page']]; ?></title>
</head>
<body>
    <div class="haut">
        <h1><a href="index.php">Mon site .com</a></h1>
    </div>
    <div id="conteneur">
        <div id="menu">
            <ul>
                <li><a href="index.php?page=accueil">Accueil du site</a></li>
                <li><a href="index.php?page=descriptif">Descriptif</a></li>
                <li><a href="index.php?page=presse">Presse</a></li>
                <li><a href="index.php?page=video">Vid&#233;o</a></li>
            </ul>
        </div>
        <div id="frame">
            <?php 
            $pages=array(
               'accueil'=>'accueil',
               'descriptif'=>'descriptif',
               'presse'=>'presse',
               'video'=>'video'
            );
            if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
               include $pages[$_GET['page']].'.php';
            else
               include 'accueil.php';
            ?>    
        </div>
    </div>
    <div class="bas">Cette partie basse reste fixe</div>
</body>
</html>
Ainsi que le code de la page accueil.php :

Bloc de code: 
<h2>Page d'accueil : Une pr&#233;sentation sans Frames !</h2>

<p>Bonjour, voici un bloc scrollable : vous pouvez faire d&eacute;filer son 
  contenu... sans alt&eacute;rer le reste du site et sans utiliser d'iframes.</p>
<p>Il est &eacute;galement possible de rendre ce bloc dynamique, c'est &agrave; 
  dire de modifier son contenu pour simuler les jeux de cadres (frame) : votre 
  site restera fixe mais cette partie centrale variera en fonction des choix 
  dans le menu. </p>
<h3>sous-titre</h3>
<p>Voir pour cela la seconde partie du tuto : "simuler les 
  frames en CSS" (des connaissances minimales en PHP sont n&eacute;cessaires)</p>
<p>Blablabla blablabla blablabla blablabla blablabla blablabla</p>

<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>

<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
<h4>sous-sous-titre</h4>
<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>

<p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
<p> blablabla</p>
Je ne suis pas codeur, il y a s&#251;rement moyen de faire mieux mais &#231;a marche. :rose:
 
Raaah, il y a des erreurs quand je passe la page au validateur!!! :mad:

Bon, je cherche o&#249; est le probl&#232;me et je refais un nouveau fichier zip&#8230;



edit : j'ai corrig&#233; le code ci-dessus et j'ai recr&#233;&#233; le fichier zip. :rose:
 
C'est pareil, dans l'exemple que j'ai cr&#233;&#233; ce sont des fichiers .php qui sont inclus dans la page index.php mais le r&#233;sultat est le m&#234;me. Dans les fichiers annexes .php tu mets le code html que tu veux sans les HEAD et BODY, juste du texte (<p>), des titres(<h2>-><h6>), des images (<img src="monimage.jpg />), etc.

Maintenant c'est &#224; toi de changer les styles CSS pour modifier les couleurs des titres, des fonds, etc.

P.S. : attention l'encodage de tous les fichiers doit &#234;tre en UTF8
 
Si la modification des styles te fait peur, tu peux les changer via l'interface de dreamweaver en ouvrant le fichier index.php mais tu ne verras le résultat final qu'en regardant ton site dans le navigateur. ;)
 
J'ai fait des retouches dans le code, la hiérarchie des titres pour les pages annexes est maintenant de <h2> à <h6>, <h1> étant le grand titre en haut de page. Le fichier zip est à jour.
 
je suis total largué
je ne parviens pas à voir l'aperçu du site.
Sur dream pour une page en htm on a l'aperçu dans un navigateur mais en php je ne parviens pas a configurer pour avoir l'aperçu.
Ca semble simple simple le tuto (le site de la personne est ce que je souhaite faire et le code source semble simple aussi) mais en fait je n'y arrive pas ....pffffffffffff
 
titou34 a dit:
je suis total largu&#233;
je ne parviens pas &#224; voir l'aper&#231;u du site.
Sur dream pour une page en htm on a l'aper&#231;u dans un navigateur mais en php je ne parviens pas a configurer pour avoir l'aper&#231;u.
Ca semble simple simple le tuto (le site de la personne est ce que je souhaite faire et le code source semble simple aussi) mais en fait je n'y arrive pas ....pffffffffffff
Cliquez pour agrandir...

Tu ne peux pas avoir l'aper&#231;u d'un page php dans dreamweaver vu que tu dois voir le r&#233;sultat du programme &#233;crit en php. Pour &#231;a, il faut que tu ais install&#233; le module php que je t'ai indiqu&#233; et que ton partage web soit actif. A partir de moment l&#224;, &#224; supposer que les pages php se trouve dans le dossier acteur de ton dossier site, tu acc&#233;derais &#224; ton site par :

Bloc de code: 
http://localhost/~tonnomuser/acteur/
Tu modifies des trucs, tu passes &#224; ton navigateur, tu rafra&#238;chis la page (pomme-r), tu regardes ce que &#231;a donne, tu reviens au code, etc.
 
Titou,

Ne pars pas, on va faire autrement. Au lieu de penser contenu, php, etc, t&#233;l&#233;charge ce fichier, d&#233;zippe-le et ouvre-le dans dreamweaver et l&#224; tu pourras vraiment modifier les styles et tu auras l'aper&#231;u. Une fois le design au poil, copie les styles dans la page index.php.

Mais, pour r&#233;ussir ton design, tu dois absolument suivre le tutoriel que je t'ai donn&#233; dans l'autre sujet, sinon tu n'y arriveras jamais. Ce tutoriel est tr&#232;s facile &#224; apprendre, tu verras, faut juste se lancer&#8230;

P.S. : quand je parle de tutoriel c'est celui sur les CSS en 15 le&#231;ons
 
je n'y arrive pas...j'ai l'impression que la fonction include ne fonctionne pas...
j'ai voulu joindre mes 4 pages htm existantes pour vour si pour toi ca marche mais pas possible
merci quand m^me
 

Sujets similaires

Morebany
[HTML5]jouer/stopper/rejouer... sa webcam
Réponses
1
Affichages
2K
Développement web
Morebany
Morebany
balance
code CSS
Réponses
1
Affichages
3K
Développement web
momo-fr
momo-fr
benG
Mail : signature HTML
Réponses
1
Affichages
1K
Web et e-mail
julienboost
J
phcm64100
Signature HTML pour mail
Réponses
2
Affichages
1K
Web et e-mail
phcm64100
phcm64100
I
Plein de lien sur une image de fond
Réponses
9
Affichages
2K
Développement web
lugdanum
L
Haut Bas
Back