Insérer pages news, galeries... et un menu déroulant.

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

portoss
Salamandre
Messages : 26
Inscription : 26 mai 2010, 17:01

Insérer pages news, galeries... et un menu déroulant.

Message par portoss »

Bonjour à tous,
Ceci est mon premier message sur ce forum (que je trouve bien fait d'ailleurs).
Voilà je souhaite crée mon premier site web. Ne connaissant rien à la programmation, j'ai choisit le logiciel Kompozer afin de m'aider. A l'aide de tutoriels et autres, j'ai "acquis" les bases. J'ai déjà crée ma page d'accueil (le plus simple). Mais maintenant je bute, j'aimerais crée une page secondaire (une page news) sur lequel s'afficherait 5 news par page et création automatique de la page suivante lorsque plus de 5 news (comme sur ce forum lorsque il y a plusieurs messages on passe à la page suivante en cliquant sur page 2 sauf que là j'aimerais que ça soit dans l'ordre décroissant (du plus récent au plus ancien)).
J'ai effectué quelque recherche et il se trouve qu'il faut un script php avec ou sans base de données. Le probléme étant que je ne sais pas comment l'incorporer dans Kompozer et où le trouver (j'en ai déjà tester quelques un mais sans succès :cry: ).
Je précise aussi que je n'est pas d'hébergeur.
Voilà en espérant avoir été assez clair et en vous remerciant d'avance pour votre aide.


Voici ce que j'aimerais faire :
Image


Évidemment j'ai d'autres questions (comme l'ajout d'un menu déroulant) mais on verra après !!!

Plateforme : Windows Seven
Version de Kompozer : 0.8b3 (20100301)
Extension : je pense que j'en ai aucune
Dernière modification par portoss le 27 mai 2010, 15:07, modifié 1 fois.
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Mon 1er site : aide en tt genre (page news, galerie...)

Message par Ymai »

Bonjour
Malheureusement, je crains qu'il n'y ait pas de solution simple au problème.
Insérer un petit script PHP dans KompoZer est très aisé:
> Insertion > Code PHP
Mais s'il s'agit de quelque chose d'un peu costaud -comme ce projet de news, KompoZer n'est plus du tout adapté. N'oublions pas qu'il s'agit, par conception, d'un outil qui permet d'écrire sans peine du code HTML propre.
Coder en PHP n'est pas son affaire. :cry:
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
portoss
Salamandre
Messages : 26
Inscription : 26 mai 2010, 17:01

Re: Mon 1er site : aide en tt genre (page news, galerie...)

Message par portoss »

Soit, mais m'est-il vraiment impossible de crée cette page sans notion de codage ?
Ne pourrais-je pas insérer un code php déjà prêt ou autres ? Du style http://www.lephpfacile.com/howto/2-comm ... ews-en-php ?
N'existe t-il pas des script php news prêt à l'emploi ?

Si c'est vraiment "impossible", quelle est la meilleure solution ? Dois-je absolument modifier la page html à chaque news et toutes les faire suivre ?
Bref, beaucoup de questions... :roll:

Sinon pour un menu déroulant, est-ce possible ? Comment faire ?

Désolé, mais même en effectuant des recherches je ne comprends pas trop les principes !
Dorémi
Arias
Messages : 9
Inscription : 27 mars 2010, 10:23

Re: Insérer pages news, galeries... et un menu déroulant.

Message par Dorémi »

Il existe 2 sortes de sites web, les sites statiques en html, c'est ce que kompozer sais faire, et les sites dynamiques en php. Il est aussi possible de faire des sites statiques en php avec par exemple des tags

Code : Tout sélectionner

<h2>News</h2>
<hr>Voici les nouvelles
<p>
La 1ère nouvelle :
<br>
<?php
include 'news.inc';
?>
ceci va inclure le fichier news.inc dans la page.

Tu peux faire autant de fichiers que de news, mais ce sera à toi de gérer avec des tags include comment tu veux les inclure. Cela deviendra vite fastidieux quand tu commenceras à avoir beaucoup de news et qu'il faudra décaler tous les tags d'une unité...

Reste la solution du site web dynamique, là php est généralement couplé avec une base de donnée type mysql ou autre. Il existe plein de code plus ou moins prêt à l'emploi. Les plus connus sont des trucs comme phpbb pour les forum, ou les programmes de wiki.
portoss
Salamandre
Messages : 26
Inscription : 26 mai 2010, 17:01

Re: Insérer pages news, galeries... et un menu déroulant.

Message par portoss »

:shock: je pense que je vais laissé tomber :cry: je cherche un truc simple... j'ai déjà essayer des codes prêt à l'emploi mais à chaque fois ça part dans tout les sens, j'arrive pas à les intégrés au site :(
En attendant de devenir un pro (c'est pas demain la veille :roll: ), je mettrais toutes les news sur une page simple (comme si j'écrivais sous Word). Mais faudra que je trouve vite une solution parce que, sinon, j'aurais une page de 20m50 :lol:
Bref... pour faire une galerie où, lorsque je clique sur l'image, elle s'ouvre en grand... c'est sur le même principe ? Idem pour le menu déroulant ?

P.S. : merci quand même pour la réponse :wink:
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Re: Insérer pages news, galeries... et un menu déroulant.

Message par chinon37 »

Pour les menus déroulants, tu as tout un tas d'exemples ici: http://fabiwan.kenobi.free.fr/css/NestedLists.html# avec le code dans la page pour chaque menu
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
portoss
Salamandre
Messages : 26
Inscription : 26 mai 2010, 17:01

Re: Insérer pages news, galeries... et un menu déroulant.

Message par portoss »

Merci pour ta réponse, cependant je n'arrive pas à l'intégrer sur mon site.
Par exemple, je copie ce code :

Code : Tout sélectionner

<ul class="navlist">
  <li>
    <a href="#">Chapitre un</a>
    <ul>
      <li><a href="#">un :: sub A</a></li>
      <li><a href="#">un :: sub B</a></li>
      <li><a href="#">un :: sub C</a></li>
      <li><a href="#">un :: sub D</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Chapitre deux</a>
    <ul>
      <li><a href="#">deux :: sub 1</a></li>
      <li><a href="#">deux :: sub 2</a></li>
      <li><a href="#">deux :: sub 3</a></li>
      <li><a href="#">deux :: sub 4</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Chapitre trois</a>
    <ul>
      <li><a href="#">trois :: sub alpha</a></li>
      <li><a href="#">trois :: sub beta</a></li>
      <li><a href="#">trois :: sub gamma</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Chapitre quatre</a>
    <ul>
      <li><a href="#">quatre :: sub I</a></li>
      <li><a href="#">quatre :: sub II</a></li>
      <li><a href="#">quatre :: sub III</a></li>
      <li><a href="#">quatre :: sub IV</a></li>
      <li><a href="#">quatre :: sub V</a></li>
      <li><a href="#">quatre :: sub VI</a></li>
    </ul>
  </li>
</ul>
pour obtenir ce menu :
Image

et j'obtiens sur Kompozer :
Image

Comment dois-je faire ? Vous pourriez me faire une explications simple et détaillé SVP ? :)
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Insérer pages news, galeries... et un menu déroulant.

Message par Ymai »

Bonjour
portoss a écrit :Comment dois-je faire ? Vous pourriez me faire une explications simple et détaillé SVP ? :)
Pour sauter très loin, rien de tel qu'un bon élan :D
Toutes les explications, simples et détaillées sont disponibles là: http://josar.free.fr/tutoKompozer/MenusPlan.html
ou même là: http://info.sio2.be/kpz/4/
Il y en a même un peu plus.
Mais si l'on veut que quelqu'un soit capable de nager, il ne suffit pas forcément de lui montrer les mouvements sur le bord du bassin.
Franchement, cela vaut le petit détour.

[À part]Et à placer deux métaphores dans le même message, je trouve que je deviens bon.[/À part]
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Re: Insérer pages news, galeries... et un menu déroulant.

Message par chinon37 »

Ymai a écrit :[À part]Et à placer deux métaphores dans le même message, je trouve que je deviens bon.[/À part]
Auto-congratulation? Houlà, ta modestie va en prendre un coup :P :D :lol:
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
portoss
Salamandre
Messages : 26
Inscription : 26 mai 2010, 17:01

Re: Insérer pages news, galeries... et un menu déroulant.

Message par portoss »

:? J'arrive pas à faire ce menu déroulant !!!
Je suis les conseils du site http://josar.free.fr/tutoKompozer/MenuVerticDyn.html, j'ai essayé 4 fois, même fait du copier-coller, pensant que c'est moi qui oubliais quelque chose mais même comme ça, le même résultat, j'obtiens toujours un truc du genre :
Image*

Je deviens dingue :x :x :x

Quelqu'un pourrait me donner le html complet à insérer ou un tuto pour newbies ????
Ou tout simplement m'aider ?
SVP... hellllpppppp...

Ymai a écrit:[À part]Et à placer deux métaphores dans le même message, je trouve que je deviens bon.[/À part]
Auto-congratulation? Houlà, ta modestie va en prendre un coup :P :D :lol:
:mrgreen:
Fabrice.Tres.Net
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Re: Insérer pages news, galeries... et un menu déroulant.

Message par Fabrice.Tres.Net »

Cela veut dire que ton css (feuille de styles) est mal appliqué... sans la page cela va être dur.

Met dans ta page en ligne et donne nous l'adresse, tu peux l'appeler mes_essais.html
portoss
Salamandre
Messages : 26
Inscription : 26 mai 2010, 17:01

Re: Insérer pages news, galeries... et un menu déroulant.

Message par portoss »

Euh... comment dire ? Je n'ai toujours pas d'hébergeur :oops: j'attends d'avoir fini niveau création avant de pouvoir choisir (pour être sur de choisir le bon hébergeur en fonction de la taille de mes fichiers et de l'hébergeur en lui même).

Mais voici le code html :

Code : Tout sélectionner

<html>
<head>
<script></script>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>mes essais</title>
<style type="text/css">
#menu {
border-bottom: 1px solid #333333;
padding: 10px 10px 10px 5px;
border-right-width: 1px;
width: 180px;
background-color: white;
background-position: right top;
color: #cc0000;
float: right;
margin-left: 10px;
background-repeat: no-repeat;
text-decoration: none;
}
div#menu a {
color: white;
}
div#menu li {
}
div#menu a:hover {
color: #cc0000;
}
div#menu li a:hover {
border-left: 5px solid #cc0000;
padding-left: 5px;
background-color: white;
color: #cc0000;
}

</style>
</head>
<body style="color: rgb(81, 152, 174); background-color: black;"
alink="#000099" link="#0000d8" vlink="#008d00">
<div style="text-align: center;">&nbsp;<br>
<table
style="text-align: left; width: 1626px; margin-left: auto; margin-right: auto; background-color: white; height: 257px;"
border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; background-color: rgb(3, 3, 3);">
<div
style="text-align: center; background-color: rgb(204, 204, 204);"><span
style="color: rgb(0, 0, 153);">Accueil&nbsp;
&nbsp; &nbsp;
&nbsp;&nbsp; News &nbsp; &nbsp;
&nbsp; &nbsp;&nbsp; Encyclopedia
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Contact</span><br
style="color: rgb(0, 0, 153);">
<div style="text-align: center; background-color: white;"><span
style="text-decoration: underline; color: rgb(0, 0, 153);"></span><br
style="color: rgb(0, 0, 153);">
<span style="text-decoration: underline; color: rgb(0, 0, 153);">Encyclopedia
:</span><br style="color: rgb(0, 0, 153);">
<span
style="background-color: transparent; color: rgb(0, 0, 153);"
id="result_box" class="long_text"><br>
</span>
<div style="text-align: left;">
<ol style="color: rgb(0, 0, 153);">
<li>
<h3><span style="text-decoration: underline;">Navigation :</span><br>
</h3>
</li>
</ol>
<ul>
<li style="color: rgb(0, 0, 153);"><span
style="background-color: transparent;" id="result_box"
class="long_text">Animaux</span> </li>
<ul>
<li><a href="D%E9finition.html">D&eacute;finition</a></li>
<li><a href="Images.html">Images</a></li>
<li><a href="Vid%E9os.html">Vid&eacute;os</a></li>
</ul>
<li style="background-color: white; color: rgb(0, 0, 153);"><span
style="background-color: transparent;" id="result_box"
class="long_text">Faunes</span></li>
<li style="background-color: white;"><span
style="background-color: transparent; color: rgb(0, 0, 153);"
id="result_box" class="long_text">Dictionnaire</span><span
style="color: rgb(0, 0, 153);"></span></li>
</ul>
<ul>
</ul>
</div>
</div>
</div>
<div style="text-align: center;">
<div
style="text-align: right; background-color: rgb(102, 102, 102);"> </div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Je sais que ça à l'air complétement débile, mais j'ai un peu bidouiller la page, pour pas qu'on voit à quoi ressemble mon site (je veux faire la "surprise"), j'ai juste modifier la couleur et changer un peu le texte mais sans toucher au principal (le css et le menu est intact). Désolé si ça dérange mais bon, chacun ces manies :!:
Fabrice.Tres.Net
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Re: Insérer pages news, galeries... et un menu déroulant.

Message par Fabrice.Tres.Net »

Premier point:
tu peux oublier les tableaux pour la mise en page de ton site.

deuxième point: ton en-tête n'a pas de doctype cela devrait ressembler à qlq chose comme

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr">
Ensuite, nous pourrons voir les autres problèmes.
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Insérer pages news, galeries... et un menu déroulant.

Message par Ymai »

Malheureusement, je crains que la feuille de style utilisée ne soit pas en rapport avec un menu dont les sous-éléments apparaissent au survol de la souris. Il s'agit simplement de la feuille de style proposée par Josar pour autre chose.
D'autre part, le code HTML ne correspond pas à celui qui est proposé par Kazé. Donc, même en utilisant la "bonne" feuille de style, il ne peut rien se passer (j'avoue que j'ai un peu sacré sur ce point-là).

Un conseil, peut-être: prendre le code proposé là par kazé

Code : Tout sélectionner

<ul class="navlist">
  <li>
    <a href="#">Chapitre un</a>
    <ul>
      <li><a href="#">un :: sub A</a></li>
      <li><a href="#">un :: sub B</a></li>
      <li><a href="#">un :: sub C</a></li>
      <li><a href="#">un :: sub D</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Chapitre deux</a>
    <ul>
      <li><a href="#">deux :: sub 1</a></li>
      <li><a href="#">deux :: sub 2</a></li>
      <li><a href="#">deux :: sub 3</a></li>
      <li><a href="#">deux :: sub 4</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Chapitre trois</a>
    <ul>
      <li><a href="#">trois :: sub alpha</a></li>
      <li><a href="#">trois :: sub beta</a></li>
      <li><a href="#">trois :: sub gamma</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Chapitre quatre</a>
    <ul>
      <li><a href="#">quatre :: sub I</a></li>
      <li><a href="#">quatre :: sub II</a></li>
      <li><a href="#">quatre :: sub III</a></li>
      <li><a href="#">quatre :: sub IV</a></li>
      <li><a href="#">quatre :: sub V</a></li>
      <li><a href="#">quatre :: sub VI</a></li>
    </ul>
  </li>
</ul>
et la feuille de style correspondante (fort joliment nommée pChinon37.css) et qui est un peu cachée dans http://fabiwan.kenobi.free.fr/css/menus/
Jouer un peu avec celle-ci puis l'adapter.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
portoss
Salamandre
Messages : 26
Inscription : 26 mai 2010, 17:01

Re: Insérer pages news, galeries... et un menu déroulant.

Message par portoss »

Fabrice.Tres.Net a écrit :Premier point:
tu peux oublier les tableaux pour la mise en page de ton site.

deuxième point: ton en-tête n'a pas de doctype cela devrait ressembler à qlq chose comme

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr">
Ensuite, nous pourrons voir les autres problèmes.
:oops: j'ai oublier de copier l'en-tête (mais quel crétin je suis :!: )
Pour les tableaux j'ai pas très bien compris. J'ai juste mis un tableau central pour écrire dedans et que ma page soit centré ainsi que l'écriture (de plus je ne voulais pas que le site prenne toute la page juste le milieu... bref vous avez compris). En gros, je veux faire le "central" comme sur ce site http://www.vinslorieux.com/ (devinez comment je l'ai trouver :P )... le menu déroulant est vraiment pas mal :D
Ymai a écrit :(j'avoue que j'ai un peu sacré sur ce point-là).
Là je n'ai absolument rien compris !!!
Ymai a écrit :(fort joliment nommée pChinon37.css)
On se demande d'où ça vient :roll:
Ymai a écrit :Un conseil, peut-être: prendre le code proposé là par kazé

Code : Tout sélectionner

  <ul class="navlist">
      <li>
        <a href="#">Chapitre un</a>
        <ul>
          <li><a href="#">un :: sub A</a></li>
          <li><a href="#">un :: sub B</a></li>
          <li><a href="#">un :: sub C</a></li>
          <li><a href="#">un :: sub D</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Chapitre deux</a>
        <ul>
          <li><a href="#">deux :: sub 1</a></li>
          <li><a href="#">deux :: sub 2</a></li>
          <li><a href="#">deux :: sub 3</a></li>
          <li><a href="#">deux :: sub 4</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Chapitre trois</a>
        <ul>
          <li><a href="#">trois :: sub alpha</a></li>
          <li><a href="#">trois :: sub beta</a></li>
          <li><a href="#">trois :: sub gamma</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Chapitre quatre</a>
        <ul>
          <li><a href="#">quatre :: sub I</a></li>
          <li><a href="#">quatre :: sub II</a></li>
          <li><a href="#">quatre :: sub III</a></li>
          <li><a href="#">quatre :: sub IV</a></li>
          <li><a href="#">quatre :: sub V</a></li>
          <li><a href="#">quatre :: sub VI</a></li>
        </ul>
      </li>
    </ul>
et la feuille de style correspondante (fort joliment nommée pChinon37.css) et qui est un peu cachée dans http://fabiwan.kenobi.free.fr/css/menus/
Jouer un peu avec celle-ci puis l'adapter.
Très bonne idée que je testerais demain sans perdre une minute en espérant que ça fonctionnera.

[A part]J'ai l'impression que plus j'avance, plus je me perds. En tout cas je vous remercie pour votre aide précieuse ainsi que pour votre rapidité à répondre à mes questions[/A part]
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité