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
fra
Olve wrote:

Ye ne souis pas non plus un spécialiste mais, avec Mozilla Firefox, on
dispose dans le menu Outils/Développement web (il faut peut être
l'installer, j'ai oublié) de plusieurs outils. Commence par Outils de
développement qui ouvre tout je crois. Bref avec "Inspecter", tu verras
la taille des zones et le code css attenant. C'est idéal pour régler les
marges / padding etc. Sinon, sous clic-droit, la dernière entrée est
"Examiner l'élément" et donne la structure css correspondante.



Tiens c'est pas mal cet outil.
Bon sinon j'ai découvert que les marges étaient ajoutées par défaut par
les navigateurs. Il faut donc que je leur force la main.
--
Fra
Avatar
fra
Jacques Perrocheau wrote:

Comme ceci, en rajoutant une valeur de 0px pour la propriété "margin"
dans le sélecteur "body" de la feuille de style :

body{ margin: 0px; }



Merci. Est-ce qu'on peut ensuite rétablir les marges après le menu ?
--
Fra
Avatar
SAM
Le 30/12/14 14:38, Fra a écrit :

Bon sinon j'ai découvert que les marges étaient ajoutées par défaut par
les navigateurs. Il faut donc que je leur force la main.




À mon idée, les marges ne sont ajoutées "par défaut" qu'au seul *body*

(si le blème sont des marges pour un menu, donc probablement un *div* ou
mieux un *ul* qui ne devraient pas être concernés )

Ha! les *li* d'un *ul* ont une marge, bien sûr !

ul { margin: 0; padding: 0; list-style: none; }
li { margin: 0 5px; padding: 2px 5px; text-align: center }

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 30/12/14 14:38, Fra a écrit :

Bon sinon j'ai découvert que les marges étaient ajoutées par défaut par
les navigateurs. Il faut donc que je leur force la main.



regardé ton exemple.

En plus de ce qu'a dit Olivier,
il manque semble t-il une } à la fin de :

@media screen and (min-device-width:1024px) {



Sinon, oui, manifestement, c'est bien la marge "naturelle" du body qui
est en cause,.

(et qui, normalement, ne devrait pas être gênante, si ?)

Cordialement,

et ... Bonne Année !
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
fra
SAM wrote:

Le 30/12/14 14:38, Fra a écrit :
>
> Bon sinon j'ai découvert que les marges étaient ajoutées par défaut par
> les navigateurs. Il faut donc que je leur force la main.

regardé ton exemple.

En plus de ce qu'a dit Olivier,
il manque semble t-il une } à la fin de :

@media screen and (min-device-width:1024px) {



Sinon, oui, manifestement, c'est bien la marge "naturelle" du body qui
est en cause,.

(et qui, normalement, ne devrait pas être gênante, si ?)

Cordialement,

et ... Bonne Année !



En mettant body{ margin: 0px; } à l'endroit ci-après ça a marché :

<style type="text/css">
body{ margin: 0px; }
.wifeo_pagemenu >

Merci et bonne année à toi aussi.
--
Fra
Avatar
Olve
--------------------
<style type="text/css">
body{ margin: 0px; }
.wifeo_pagemenu >
--------------------

Ouh la la !
Je ne sais pas si c'est le champagne mais je ne comprends rien à ce
code-là --

html : <body> ... </body>

On "stylise" le html avec du css. Soit en "inline", soit en rassemblant
dans une balise style, soit sur un fichier externe qu'on appelle.

Premier cas :
----------------------------------------
<body style="margin: 0px;"> ... </body>
----------------------------------------
Deuxième cas :
-------------------------------------
<style type="text/css">
body{ margin: 0px; }
</style>
--------------------------------------
Troisième cas :
-----------------------------------------
<link rel="stylesheet" href="monnomfavori.css" type="text/css" />
et dans le fichier monnomfavori.css, on trouve
----
body{ margin: 0px; }
----

Les déclarations de type ".blabla" dans une balise style ou un fichier
css s'applique à des class. par exemple
----------------------
<style type="text/css">
.mybody{ margin: 0px; }
</style>
qui s'utilise avec

<body class="mybody"> ...</body>
------------------------------

Certains navigateurs mangent la soupe comme elle vient, mais c'est
impossible à développer ensuite.
J'espère n'avoir pas trop dit d'âneries, le temps de la crêche est
terminé :)
Bonne année !
A.O.
Avatar
mauri
Le samedi 27 Décembre 2014 à 16:16 par 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


Certains codes me paraissent un peu flou. Mais cela ne m'étonne pas trop puisque je ne suis pas habituée à ce langage. Je ne suis pas pro Je suis même encore entrain d'enrichir mes connaissances. Actuellement, je me fais une autoformation à l'aide des tutos en ligne sur http://www.alphorm.com/tutoriel/formation-en-ligne-wordpress-4-1. Je souhaite tout de même arriver à votre niveau afin de comprendre tous ces points qui sont encore des langages extra-terrestres pour moi.
Avatar
Anne G
mauri a écrit le 23/07/15 05:29 :
Le samedi 27 Décembre 2014 à 16:16 par fra :

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 ?





Je n'ai pas chargé le message d'origine, donc je ne sais pas si tu es
sous OS X ou pas (mais j'imagine que oui).
Essaie Freeway, chez Softpress. La version d'essai est gratuite et
entièrement fonctionnelle pour un mois, ce qui m'avait amplement suffi
pour monter mon premier site dont j'étais passablement fière.

L'interface est construite pour que les gens du monde du graphisme
imprimé (comme moi) s'y retrouvent (même fonctionnement, mêmes
raccourcis), mais ça semble accessible à tous.

Certains codes me paraissent un peu flou. Mais cela ne m'étonne pas trop puisque
je ne suis pas habituée à ce langage. Je ne suis pas pro Je suis même encore
entrain d'enrichir mes connaissances. Actuellement, je me fais une autoformation
à l'aide des tutos en ligne sur
http://www.alphorm.com/tutoriel/formation-en-ligne-wordpress-4-1. Je souhaite
tout de même arriver à votre niveau afin de comprendre tous ces points qui sont
encore des langages extra-terrestres pour moi.



Wordpress, si on veut s'en servir convenablement, demande une
connaissance minimale du html.
Avatar
voir_le_reply-to
Anne G wrote:

Essaie Freeway, chez Softpress. La version d'essai est gratuite et
entièrement fonctionnelle pour un mois, ce qui m'avait amplement suffi
pour monter mon premier site dont j'étais passablement fière.



[...]

Wordpress, si on veut s'en servir convenablement, demande une
connaissance minimale du html.



Je pense qu'il faut aussi citer RapidWeaver de Realmac Software qui fut
considéré, en son temps, comme un remplaçant convenable de iWeb.
Page wikipédia et site officiel ici :
<https://fr.wikipedia.org/wiki/RapidWeaver>
<http://realmacsoftware.com/rapidweaver/>

Noter qu'ils étaient diffusés sur l'App Store jusqu'à la version 5 et
qu'ils s'en sont retirés pour une raison qui les honore : ils ne
voulaient pas faire payer le passage à la version 6 plein pot aux
utilisateurs de la version 5 et Apple ne permettait pas des achats avec
tarifs différenciés. Du coup ils diffusent à nouveau eux-mêmes.

Ce n'est pas donné mais il y a possibilité de tester avant d'acheter et
ils disposent d'un bon environnement de développeurs tiers (certains
thèmes sont gratuits et très efficaces, la plupart des autres sont
payants... mais de qualité. Un de ces éditeurs que j'aime bien :
Multithemes
<http://www.multithemes.com/rapidweaverthemes/index.html>
En bas de page, Flat et NoTheme sont gratuits et néanmoins très
efficaces. Les thèmes payants, comme Regen ou Velum que j'utilise,
présentent en plus l'adaptabilité aux tablettes et smartphones
(responsive), des capacités typographiques étendues, et de très
nombreuses options de personnalisation du thème.

Noter que pour disposer des fonctionnalités de mise en page
"traditionnelles" dans RapidWeaver, quelque soit le thème, il faut
acheter, quasi obligatoirement et en plus, le module "stacks" (pavés,
colonnes, réserves etc.)

Enfin il serait injuste de ne pas citer un environnement de création web
open-source de qualité : SPIP
<https://fr.wikipedia.org/wiki/Syst%C3%A8me_de_publication_pour_l%27Internet>
<http://www.spip.net/fr>
Mais soyons honnêtes : il faut mettre les mains dans le cambouis et
prévoir l'aspirine. Par contre c'est évidemment une initiative à
soutenir "éthiquement" !

hth,
--
Gérald
Avatar
francois.jacquemin
Gerald wrote:

Noter qu'ils étaient diffusés sur l'App Store jusqu'à la version 5 et
qu'ils s'en sont retirés pour une raison qui les honore : ils ne
voulaient pas faire payer le passage à la version 6 plein pot aux
utilisateurs de la version 5 et Apple ne permettait pas des achats avec
tarifs différenciés. Du coup ils diffusent à nouveau eux-mêmes.



Même chose avec BBEdit, qui est et reste un des meilleurs outils en HTML
come dan bien d'autres langages de programmation, web ou non.

--
F. J.
1 2 3 4