Faire un site web élégant facilement

Le
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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 4
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Jean-Noel Chavannes
Le #26331240
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 :


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*
voir_le_reply-to
Le #26331245
Fra

[...] 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 :

La page de l'éditeur de 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" :

- 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 :
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
- 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 :
Tu y trouveras peut-être l'option (Spip ? Drupal ?) à laquelle tu
n'avais pas pensé...

hth,

--
Gérald
fra
Le #26331264
Jean-Noel Chavannes
Jette un coup d'oeil à Sandvox



Merci. Je vais essayer.
--
Fra
fra
Le #26331271
Gerald
La page de l'éditeur de 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 :
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
fra
Le #26331272
Gerald
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
michel.vauquois
Le #26331273
Fra
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
fra
Le #26331275
Fra
*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 :


<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">
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
michel.vauquois
Le #26331282
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
Quelqu'un saurait-il me dire pourquoi j'ai une marge de 8 pixels autour
de ce menu (haut gauche droite) ?
code :


<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">
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
fra
Le #26331279
MV
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
jperrocheau
Le #26331303
Fra
Quelqu'un saurait-il me dire pourquoi j'ai une marge de 8 pixels autour
de ce menu (haut gauche droite) ?
code :


<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"> 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:

<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
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
______________________________________________________________________
Publicité
Poster une réponse
Anonyme