Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Faire un site web élégant facilement

31 réponses
Avatar
fra
Hello

Mon frère m'a demandé de lui faire un site web pour son activité. Je lui
ai fait une page de base avec SeaMonkey, mais j'aimerais faire quelque
chose de plus classe avec un menu statique en haut (éventuellement
translucide quand ça défile), avec des transitions de page ou des
remplacement de contenus (plutôt que le chargement d'une nouvelle page).

J'ai des connaissances extrêmement limitée en html (c'est pour ça que
j'utilise SeaMonkey -comme j'utiliserais word-).

J'ai fais quelques essais avec WordPress sur les pages perso de free
mais j'ai vite été bloqué. Il a fallu que j'utilise une ancienne version
de wordpress et je n'arrive pas à changer de thème (peut être à cause de
l'ancienne version). Je n'ai pas trouvé non plus comment placer un beau
menu bandeau en haut. Et pour le moment ça ressemble à un blog tout
moche et non à un site "commercial".

Je cherche donc un outil très facile d'usage qui permette de faire des
sites classes avec les effets html5 que l'on peut voir actuellement.

Et là vous me dites : "si ça existait tous les web-designers seraient au
chômage".
Mais en vrai, ça existe ou pas ?

Merci d'avance.
--
Fra

10 réponses

1 2 3 4
Avatar
Jean-Noel Chavannes
Le 27.12.14 à 16:16, l'estimable internaute, * (Fra)*,
se manifesta en tapotant :

'llo !


[...] Je cherche donc un outil très facile d'usage qui permette de faire des
sites classes avec les effets html5 que l'on peut voir actuellement.



Jette un coup d'oeil à Sandvox :

<http://www.karelia.com/products/sandvox/>

En version d'essai, la publication (ou l'export) est limité à un
maxi. de 5 pages.

À+,
--
Jean-No‘ël

*news* /a r o b a s e/ *cetonor* /p o i n t/ *com*
Avatar
voir_le_reply-to
Fra wrote:


[...] mais j'aimerais faire quelque
chose de plus classe avec un menu statique en haut (éventuellement
translucide quand ça défile), avec des transitions de page ou des
remplacement de contenus (plutôt que le chargement d'une nouvelle page).

Je cherche donc un outil très facile d'usage qui permette de faire des
sites classes avec les effets html5 que l'on peut voir actuellement.



Quand Apple a jeté l'éponge iWeb, qui était pourtant bien pratique (et
qui fonctionne encore sous Mavericks : si tu trouves un donateur, un
simple copier/coller suffit), je suis passé à RapidWeaver de Realmac
Software, dont l'ergonomie était supposée être semblable. La page
wikipédia qui lui est consacrée donne aussi des alternatives qui peuvent
t'intéresser :
<https://fr.wikipedia.org/wiki/RapidWeaver>

La page de l'éditeur de Rapidweaver :
<http://realmacsoftware.com/rapidweaver/>

Quelques remarques :

- Il n'est pas donné (80¤) d'autant que, selon moi, sans l'achat
conjoint de "Stacks" (30 ¤) il reste limité façon "iWeb" (avec Stacks,
c'est carrément beaucoup plus adaptable à tous les besoins). Prévoir
aussi l'achat de thèmes "bien faits" autour de 30 ¤ pièce chez des
éditeurs tiers.

- le choix des insérables et thèmes "tiers" :
<http://realmacsoftware.community/addons>

- Jusqu'à la version 5 (cet automne) il était distribué sur l'App Store.
Pour des raisons d'impossibilité d'avoir des prix de "mise à jour" (si
j'ai bien compris) différents du prix de vente, ils ne le distribuent
plus (pour l'instant ?) que sur leur propre site.

- Dans la page addons/Themes, on trouve de très bon créateurs de choses
modernes, et j'attire plus particulièrement ton attention sur les
productions de multithemes :
<http://www.multithemes.com/rapidweaverthemes/index.html>
les pages d'exemple de Velum ou Regen pourraient correspondre à ce que
tu recherches comme effet.

- L'ergonomie de rapidweaver s'est améliorée avec la version 6 mais
reste un peu obscure et nécessite une accoutumance. Prévoir un tube
d'aspirine et des séances de relaxation. Prévoir aussi de mettre un peu
les mains dans du code pour bien faire, et de devoir gérer une aide
essentiellement anglophone. Voilou. Suite en privé si besoin (via mon
adresse "reply-to").

- Une alternative beaucoup plus économique mais il ne s'agit que d'un
éditeur HTML "simple", nécessitant de tout coder à la mano, Taco HTML
Edit <http://tacosw.com>. Pour mémoire.

- Tu sembles avoir été déçu par l'agrégateur CMS que tu as testé.
J'attire toutefois ton attention d'une part sur la grande variété des
choix possibles, et d'autre part sur le fait que l'hébergeur OVH (sans
actions dans l'affaire) propose un grand nombre d'installations "clés en
main" de ces modules, qui facilitent la vie :
<http://www.ovh.com/fr/g1402.modules-hebergements-mutualises#choix_du_module>
Tu y trouveras peut-être l'option (Spip ? Drupal ?) à laquelle tu
n'avais pas pensé...

hth,

--
Gérald
Avatar
fra
Jean-Noel Chavannes wrote:

Jette un coup d'oeil à Sandvox



Merci. Je vais essayer.
--
Fra
Avatar
fra
Gerald wrote:

La page de l'éditeur de Rapidweaver :
<http://realmacsoftware.com/rapidweaver/>

Quelques remarques :

- Il n'est pas donné (80¤) d'autant que, selon moi, sans l'achat
conjoint de "Stacks" (30 ¤) il reste limité façon "iWeb"



Je vais voir ça.

[...]

- Jusqu'à la version 5 (cet automne) il était distribué sur l'App Store.
Pour des raisons d'impossibilité d'avoir des prix de "mise à jour" (si
j'ai bien compris) différents du prix de vente, ils ne le distribuent
plus (pour l'instant ?) que sur leur propre site.



Tant mieux !


- Dans la page addons/Themes, on trouve de très bon créateurs de choses
modernes, et j'attire plus particulièrement ton attention sur les
productions de multithemes :
<http://www.multithemes.com/rapidweaverthemes/index.html>
les pages d'exemple de Velum ou Regen pourraient correspondre à ce que
tu recherches comme effet.

- L'ergonomie de rapidweaver s'est améliorée avec la version 6 mais
reste un peu obscure et nécessite une accoutumance. Prévoir un tube
d'aspirine et des séances de relaxation.



Oula ! Ca fait plus vraiment envie d'un seul coup !

[...]



Merci d'avoir pris le temps de détailler tout ça.
--
Fra
Avatar
fra
Gerald wrote:

Quand Apple a jeté l'éponge iWeb, qui était pourtant bien pratique (et
qui fonctionne encore sous Mavericks



J'ai encore une version 3 et elle tourne sous Yosemite. Mais franchement
c'est très limité !!!
-Largeurs de pages fixe.
-Je n'ai rien trouvé pour créer un menu en haut.
-Ergonomie à chier.

Bon à force de fouiller le web j'ai trouvé les fonctions qui me
manquaient :
-un css qui s'appelle "wifeo_pagemenu"* pour créer des menus bandeau
-un javascript qui s'appelle "bgMax" pour que l'image de fond s'adapte à
la taille de la fenêtre

Je suis quand même étonné que ce genre de fonction n'existe pas dans des
trucs comme iWeb ou wordpress.


*Pour wifeo_pagemenu je n'ai pas encore trouvé comment faire pour que le
menu soit collé en haut avec aucune ligne de pixels autour.
--
Fra
Avatar
michel.vauquois
Fra wrote:

Bon à force de fouiller le web



Pour une base de site assez solide, il y a aussi HTML Kickstart et tout
son environnement mais si tu n'as jamais mis les mains dans du HTML...
http://www.99lime.com/elements/
--
Michel Vauquois
Que Dieu vous garde... Moi j'ai pas le temps (RD)
http://photos.michelvauquois.free-h.fr/
http://art-doise.michelvauquois.free-h.fr
Avatar
fra
Fra wrote:

*Pour wifeo_pagemenu je n'ai pas encore trouvé comment faire pour que le
menu soit collé en haut avec aucune ligne de pixels autour.



Quelqu'un saurait-il me dire pourquoi j'ai une marge de 8 pixels autour
de ce menu (haut gauche droite) ?
code :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body
bgcolor="#000000" text="#ffffff" vlink="#96be1c" alink="#96be1c"
link="#96be1c">
<font face="Helvetica, Arial, sans-serif">
<style type="text/css">.wifeo_pagemenu >
a{color:#FFFFFF;text-decoration:none} .wifeo_pagemenu:hover >
a{color:#FFFFFF;text-decoration:none;font-weight:bold} .wifeo_rubrique >
a{color:#FFFFFF;text-decoration:none} .wifeo_rubrique:hover >
a{color:#FFFFFF;font-weight:bold;text-decoration:none}
.wifeo_pagesousmenu > a{color:#FFFFFF;text-decoration:none}
.wifeo_conteneur_menu{border-spacing:0px}
.wifeo_conteneur_menu{width:100%;display:table;background-color:#7D7D7D;height:50px;border-bottom:0px
solid #7D7D7D} .wifeo_pagemenu > a, .wifeo_rubrique >
a{text-decoration:none;display:table-cell;vertical-align:middle;height:50px;padding:0
0px;width:100%;font-size:18px;text-align:center;-webkit-transition:all
0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}
.wifeo_pagemenu > a:hover, .wifeo_pagesousmenu >
a:hover{background-color:#7D7D7D;font-size:20px} .wifeo_rubrique:hover >
a{background-color:#7D7D7D;font-size:20px} .wifeo_pagemenu,
.wifeo_rubrique{float:left;position:relative;width:33.333%;text-align:center;display:table}
.wifeo_sousmenu{left:0;opacity:0;position:absolute;top:0;visibility:hidden;z-index:1;width:100%}
@media screen and
(min-device-width:1024px){.wifeo_sousmenu{-webkit-transition:all 0.25s
ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}}
.wifeo_rubrique:hover
.wifeo_sousmenu{opacity:1;visibility:visible;top:50px}
.wifeo_pagesousmenu{border-left:0px solid #7D7D7D} .wifeo_pagesousmenu
a{background:#7D7D7D;width:100%;display:inline-block;height:38px;padding:0px
0;font-size:18px;text-align:center;-webkit-transition:all 0.25s
ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}
.wifeo_pagesousmenu
a:hover{background:#7D7D7D;width:110%;display:inline-block}</style>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<nav>
<div class="wifeo_conteneur_menu">
<div class="wifeo_rubrique"><a href="#mw999">A propos</a>
<div class="wifeo_sousmenu"></div>
</div>
<div class="wifeo_rubrique"><a href="#mw999">Réalisations</a>
<div class="wifeo_sousmenu"></div>
</div>
<div class="wifeo_rubrique"><a href="#mw999">Contacts</a>
<div class="wifeo_sousmenu"></div>
</div>
</div>
</nav>
</font>
</body>
</html>

--
Fra
Avatar
michel.vauquois
Bonjour,

Je pense que ce genre de question aurait meilleur accueil sur le forum
dédié : fr.comp.infosystemes.www.auteurs

Je fais suivre avec un fu2 approprié.

++++++++++
Fra wrote:

Quelqu'un saurait-il me dire pourquoi j'ai une marge de 8 pixels autour
de ce menu (haut gauche droite) ?
code :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body
bgcolor="#000000" text="#ffffff" vlink="#96be1c" alink="#96be1c"
link="#96be1c">
<font face="Helvetica, Arial, sans-serif">
<style type="text/css">.wifeo_pagemenu >
a{color:#FFFFFF;text-decoration:none} .wifeo_pagemenu:hover >
a{color:#FFFFFF;text-decoration:none;font-weight:bold} .wifeo_rubrique >
a{color:#FFFFFF;text-decoration:none} .wifeo_rubrique:hover >
a{color:#FFFFFF;font-weight:bold;text-decoration:none}
.wifeo_pagesousmenu > a{color:#FFFFFF;text-decoration:none}
.wifeo_conteneur_menu{border-spacing:0px}
.wifeo_conteneur_menu{width:100%;display:table;background-color:#7D7D7D;height:50px;border-bottom:0px
solid #7D7D7D} .wifeo_pagemenu > a, .wifeo_rubrique >
a{text-decoration:none;display:table-cell;vertical-align:middle;height:50px;padding:0
0px;width:100%;font-size:18px;text-align:center;-webkit-transition:all
0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}
.wifeo_pagemenu > a:hover, .wifeo_pagesousmenu >
a:hover{background-color:#7D7D7D;font-size:20px} .wifeo_rubrique:hover >
a{background-color:#7D7D7D;font-size:20px} .wifeo_pagemenu,
.wifeo_rubrique{float:left;position:relative;width:33.333%;text-align:center;display:table}
.wifeo_sousmenu{left:0;opacity:0;position:absolute;top:0;visibility:hidden;z-index:1;width:100%}
@media screen and
(min-device-width:1024px){.wifeo_sousmenu{-webkit-transition:all 0.25s
ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}}
.wifeo_rubrique:hover
.wifeo_sousmenu{opacity:1;visibility:visible;top:50px}
.wifeo_pagesousmenu{border-left:0px solid #7D7D7D} .wifeo_pagesousmenu
a{background:#7D7D7D;width:100%;display:inline-block;height:38px;padding:0px
0;font-size:18px;text-align:center;-webkit-transition:all 0.25s
ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}
.wifeo_pagesousmenu
a:hover{background:#7D7D7D;width:110%;display:inline-block}</style>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<nav>
<div class="wifeo_conteneur_menu">
<div class="wifeo_rubrique"><a href="#mw999">A propos</a>
<div class="wifeo_sousmenu"></div>
</div>
<div class="wifeo_rubrique"><a href="#mw999">Réalisations</a>
<div class="wifeo_sousmenu"></div>
</div>
<div class="wifeo_rubrique"><a href="#mw999">Contacts</a>
<div class="wifeo_sousmenu"></div>
</div>
</div>
</nav>
</font>
</body>
</html>
++++++++++


--
Michel Vauquois
Que Dieu vous garde... Moi j'ai pas le temps (RD)
http://photos.michelvauquois.free-h.fr/
http://art-doise.michelvauquois.free-h.fr
Avatar
fra
MV wrote:

Je pense que ce genre de question aurait meilleur accueil sur le forum
dédié : fr.comp.infosystemes.www.auteurs

Je fais suivre avec un fu2 approprié.



OK merci. J'ai cherché un nom de groupe en français contenant html et
n'ai trouvé que alt.fr.langages.html qui est vide.
--
Fra
Avatar
jperrocheau
Fra wrote:

Quelqu'un saurait-il me dire pourquoi j'ai une marge de 8 pixels autour
de ce menu (haut gauche droite) ?
code :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head> <meta http-equiv="content-type" content="text/html;
charset=UTF-8"> </head> <body bgcolor="#000000" text="#ffffff"
vlink="#96be1c" alink="#96be1c" link="#96be1c"> <font face="Helvetica,
Arial, sans-serif"> <style type="text/css">.wifeo_pagemenu >
a{color:#FFFFFF;text-decoration:none} .wifeo_pagemenu:hover >
a{color:#FFFFFF;text-decoration:none;font-weight:bold} .wifeo_rubrique
a{color:#FFFFFF;text-decoration:none} .wifeo_rubrique:hover >


a{color:#FFFFFF;font-weight:bold;text-decoration:none}
.wifeo_pagesousmenu > a{color:#FFFFFF;text-decoration:none}
.wifeo_conteneur_menu{border-spacing:0px}
.wifeo_conteneur_menu{width:100%;display:table;background-color:#7D7D7D
; height:50px;border-bottom:0px solid #7D7D7D} .wifeo_pagemenu > a,
.wifeo_rubrique >
a{text-decoration:none;display:table-cell;vertical-align:middle;height:
50px;padding:0
0px;width:100%;font-size:18px;text-align:center;-webkit-transition:all
0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}
.wifeo_pagemenu > a:hover, .wifeo_pagesousmenu >
a:hover{background-color:#7D7D7D;font-size:20px} .wifeo_rubrique:hover
a{background-color:#7D7D7D;font-size:20px} .wifeo_pagemenu,


.wifeo_rubrique{float:left;position:relative;width:33.333%;text-align:c
enter;display:table}
.wifeo_sousmenu{left:0;opacity:0;position:absolute;top:0;visibility:hid
den;z-index:1;width:100%} @media screen and
(min-device-width:1024px){.wifeo_sousmenu{-webkit-transition:all 0.25s
ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}}
.wifeo_rubrique:hover
.wifeo_sousmenu{opacity:1;visibility:visible;top:50px}
.wifeo_pagesousmenu{border-left:0px solid #7D7D7D} .wifeo_pagesousmenu
a{background:#7D7D7D;width:100%;display:inline-block;height:38px;paddin
g:0px 0;font-size:18px;text-align:center;-webkit-transition:all 0.25s
ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}
.wifeo_pagesousmenu
a:hover{background:#7D7D7D;width:110%;display:inline-block}</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<nav> <div class="wifeo_conteneur_menu"> <div class="wifeo_rubrique"><a
href="#mw999">A propos</a> <div class="wifeo_sousmenu"></div> </div>
<div class="wifeo_rubrique"><a href="#mw999">Réalisations</a> <div
class="wifeo_sousmenu"></div> </div> <div class="wifeo_rubrique"><a
href="#mw999">Contacts</a> <div class="wifeo_sousmenu"></div> </div>
</div> </nav> </font> </body> </html>



Ce sont les browsers, Safari comme Firefox (user agent stylesheet), qui
rajoutent une marge de 8 pixels pour ne pas avoir de texte au ras de
limite de la fenêtre.

body[bgcolor=#000000] {
. background-color: black;
}

body[text=#ffffff] {
. color: white;
}

element.style {
.
}
Matched CSS Rules
user agent stylesheet
body {
. display: block;
. margin: 8px;
. margin-top: 8px;
. margin-right: 8px;
. margin-bottom: 8px;
. margin-left: 8px;
}


Cela dit, si le code ci-dessus est le code d'iWeb, ce n'est pas très
"conforme". Ce serait mieux comme cela:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<style type="text/css">.wifeo_pagemenu >
a{color:#FFFFFF;text-decoration:none} .wifeo_pagemenu:hover >
a{color:#FFFFFF;text-decoration:none;font-weight:bold} .wifeo_rubrique >
a{color:#FFFFFF;text-decoration:none} .wifeo_rubrique:hover >
a{color:#FFFFFF;font-weight:bold;text-decoration:none}
.wifeo_pagesousmenu > a{color:#FFFFFF;text-decoration:none}
.wifeo_conteneur_menu{border-spacing:0px}
.wifeo_conteneur_menu{width:100%;display:table;background-color:#7D7D7D;height:50px;border-bottom:0px
solid #7D7D7D} .wifeo_pagemenu > a, .wifeo_rubrique >
a{text-decoration:none;display:table-cell;vertical-align:middle;height:50px;padding:0
0px;width:100%;font-size:18px;text-align:center;-webkit-transition:all
0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}
.wifeo_pagemenu > a:hover, .wifeo_pagesousmenu >
a:hover{background-color:#7D7D7D;font-size:20px} .wifeo_rubrique:hover >
a{background-color:#7D7D7D;font-size:20px} .wifeo_pagemenu,
.wifeo_rubrique{float:left;position:relative;width:33.333%;text-align:center;display:table}
.wifeo_sousmenu{left:0;opacity:0;position:absolute;top:0;visibility:hidden;z-index:1;width:100%}
@media screen and
(min-device-width:1024px){.wifeo_sousmenu{-webkit-transition:all 0.25s
ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}}
.wifeo_rubrique:hover
.wifeo_sousmenu{opacity:1;visibility:visible;top:50px}
.wifeo_pagesousmenu{border-left:0px solid #7D7D7D} .wifeo_pagesousmenu
a{background:#7D7D7D;width:100%;display:inline-block;height:38px;padding:0px
0;font-size:18px;text-align:center;-webkit-transition:all 0.25s
ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s
ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}
.wifeo_pagesousmenu
a:hover{background:#7D7D7D;width:110%;display:inline-block}</style>
</head>
<body bgcolor="#000000" text="#ffffff" vlink="#96be1c" alink="#96be1c"
link="#96be1c">

<!-- <font face="Helvetica, Arial, sans-serif"> -->
<nav>
<div class="wifeo_conteneur_menu">
<div class="wifeo_rubrique">
<a href="#mw999">A propos</a>
<div class="wifeo_sousmenu">
</div>
</div>
<div class="wifeo_rubrique">
<a href="#mw999">Réalisations</a>
<div class="wifeo_sousmenu">
</div>
</div>
<div class="wifeo_rubrique">
<a href="#mw999">Contacts</a>
<div class="wifeo_sousmenu">
</div>
</div>
</div>
</nav>
<!-- </font> -->
</body>
</html>

J'ai éliminé le tag font qu n'a pas d'intérét lorsqu'il y a une feuille
de style. Le tag nav est inconnu en HTML 4.01 Transitional//EN.

--
Jacques Perrocheau
______________________________________________________________________
1 2 3 4