Comment apprendre le flash

mediaforest · le 14 avril 2006

Lol

Bon un fichier CSS.. heu, comment cela? tu n'aurai pas par hasard une ligne de commande qui ferait un cela? (plus simple) et est ce que ce fichier css je le colle dans ma page index.html?

Merci M'sieur

Un fichier CSS, est un fichier à part, dont les données sont "incluses" dans ta page html avec une ligne du type :

<link href="../styles.css" rel="stylesheet" type="text/css">

placée dans la section <head></head> d'un fichier html.

C'est ce que l'on appelle une feuille de style, le principe est le même qu'en PAO : on sépare le contenu (le texte, les images...) et la mise en forme (le style) ce qui permet de modifier rapidement l'aspect de tout un site, en changeant seulement la feuille de style.

La définition des styles dans un fichier CSS se présente sous cette forme :

body {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
font-style: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin: 0;
}
input {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
}
tbody {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
font-style: normal;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
}
h1 {
font-weight: bold; 
color: #008C0D;
font-family: Arial, Helvetica, sans-serif;
font-size: 150%;
text-align: center;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
font-weight: bolder;
color: #0094D5;
text-align: left;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
font-weight: bold;
color: #0094D5;
text-align: left;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
color: #0094D5;
text-align: left;
}
h5	{
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
color: #008C0D;
text-indent: 1cm;
}

Là j'ai redéfini certains tags standard, en modifiant la couleur tu texte, la taille des police, la police par défaut, etc...

J'ai un pote qui a fait un site pour une autre Communauté de Communes, en respectant le plus strictement possible les règles que je décrivait plus haut. Si tu as installé l'extension webdeveloper, en utilisant l'option désactiver le CSS tu peux comparer l'aspect de la page brute et l'aspect mis en forme avec le css, tu verras c'est impressionnant...

voici le lien : http://www.cc-estuaire.fr

cortes · le 14 avril 2006

La vache, oui le site est vraiment très bien fait !

Alors

1: faut que je laisse tomber Namo qui ne gère pas le CSS apparemment ??

2: il faudrait que je refasse toutes les pages html déjà conçues avec namo ??

4 : Donc, c'est avec une page de style css que je vais modeler le site?

5 : pour les menus, les photos, les liens etc... C'est sur des pages html... ?

6 : <Si tu as installé l'extension webdeveloper, en utilisant l'option désactiver le CSS tu peux comparer l'aspect de la page brute et l'aspect mis en forme avec le css> Hu, c'est quoi?

7 : Quoi prendre comme logiciel qui fait du css? (mis à part pas notepad ++ que je trouve complexe)

En tout cas, c'est quand même pas si simple que cela pour le css, malgré les liens donnés par tesgaz, si je comprends bien, il faut que je reparte totalement à zéro pour le site.

Merci à vous tous en tout cas

Modifié le 14 avril 2006 par cortes

mediaforest · le 14 avril 2006

1: faut que je laisse tomber Namo qui ne gère pas le CSS apparemment ??

Je viens d'installer la version trial de namo, et les feuilles de style sont gérées, pas d'une manière très pratique, mais c'est utilisable. Cherche CSS dans l'aide en ligne

2: il faudrait que je refasse toutes les pages html déjà conçues avec namo ??

Dans un premier temps, tu peux retoucher tes pages existantes en rajoutant un lien vers un fichier CSS que tu élaboreras au fur et à mesure que tes connaissance progresseront... tout ce qui n'est pas défini dans le css utilise les valeurs par défaut

4 : Donc, c'est avec une page de style css que je vais modeler le site?

5 : pour les menus, les photos, les liens etc... C'est sur des pages html... ?

exactement, avec le css tu pourras redéfinir le style de tous les tags html standards (<A href>, <p>, <img>, <table>, <td>, <form> etc...) mais tu pourras aussi définir tes propres "classes" applicables à un menu, un paragraphe, un bouton...

en sachant que tu peux inclure plusieurs css complémentaires pour une même page et aussi un css différent pour différentes pages...

6 : <Si tu as installé l'extension webdeveloper, en utilisant l'option désactiver le CSS tu peux comparer l'aspect de la page brute et l'aspect mis en forme avec le css> Hu, c'est quoi?

webdeveloper est une extension pour les navigateurs Mozilla, Seamonkey, Firefox, tous dérivés de Netscape.

Je te conseille fortement d'utiliser l'un de ces navigateurs, tout d'abord parce qu'ils sont bien moins exposés aux malware en tout genre qu'explorer, ensuite parce qu'il respectent bien mieux les règles du W3C, qu'il disposent de possibilités d'extension quasi-infinies grace aux plugins et extensions, et enfin parce qu'ils bénéficient du suivi et du support d'une importante communauté de développeurs.

Et aussi Mozilla et Seamonkey intègrent un éditeur html équivalent à NVU dont on te parlait plus haut, je ne l'utilise pas énormément, parce que je code principalement en PHP, et que pour la mise en forme j'utilise dreamweaver, mais il à le mérite d'être "visuel" et d'être là

7 : Quoi prendre comme logiciel qui fait du css? (mis à part pas notepad ++ que je trouve complexe)

Essaie d'approfondir les possibilités de namo puisque tu l'as, mais il faudrait peut-être obtenir la dernière version, autrement fais une recherche sur "Editeur CSS" tu devrais en trouver pas mal. Au niveau des notepads, il y a l'excellent notepad2 (qui est il me semble dans la zone téléch de zebulon) et qui affiche en coloration syntaxique une grosse quantité de formats de fichier, dont css, xml, php et bien sur html...

En tout cas, c'est quand même pas si simple que cela pour le css, malgré les liens donnés par tesgaz, si je comprends bien, il faut que je reparte totalement à zéro pour le site.

Peut-être pas repartir à zéro, mais le re-modeler avec une optique différente. Mais c'est le lot du développement web : comme internet est en perpétuelle évolution, il faut souvent se remettre en question !

:-P

Bon courage en tout cas

cortes · le 14 avril 2006

Ok pour tout cela même si j'en perds pas mal mon langage

J'ai très "étudié" le site : pompage-css et avec Namo , je confirme qu'il lit le css.

J'ai donc 'essayé' de suivre quelques indications sans me perdre mais il y a une chose que je n'ai pas bien compris, ce sont pour les hyperliens

Pour l'instant j'ai pu modeler une page d'accueil et le rendu ma foi, s'avère très joli après avoir mis la main à la pate!

J'ai pu arriver à faire des menus de navigation sur cette page. Mais, voilà ...

Comment fait on pour que les liens marchent?

Par exemple, je vais sur l'onglet appellé "territoire' qui est dans la barre de navigation en haut, il faut donc créer une page en html 'territoire", ok de là il faut que je lui indique dans cette page avec une ligne de commande css qu'elle s'ouvre quand on clique sur son onglet dans la page d'accueil.

Mais, j'ai un trou, je suis dessus depuis au pas mal d'heures mais là je n'arrive pas à piger

Je me perds entre les ancres (si vous voyez ce que je veux dire...car avec le css, si j'ai bien compris, c'est une ligne de commande avec l'adresse du lien (des ancres),

mais avec Namo les hyperliens sont créés automatiquement qu'en html.

Alors, le problème : je travaille en local et quand il faut que j'indique l'hyperlien, lequel prendre? l'adresse du site avec le nom de la page (www.adressedusite/accueil.html) ou un lien en local ?

Si l'un de vous qui avez suivi peut m'aiguiller, se sera pas de refus !

Merci

Modifié le 15 avril 2006 par cortes

Gen · le 15 avril 2006

[HS]

On a un bon petit tuto made in dylav sur le CSS : http://forum.zebulon.fr/index.php?showtopic=90992

A lire aussi

[/HS]

En ce qui concerne ton problème d'hyperlien, l'adresse à mettre pour ton site est l'adresse relative non pas l'adresse absolue.

Ex d'utilisation des adresses absolues :

<a href="http://forum.zebulon.fr/img/zebulon/logo.gif"><img src="http://forum.zebulon.fr/img/zebulon/logo.gif" /></a>

nous donne :

Ex d'utilisation des adresses relatives :

<a href="img/zebulon/logo.gif"><img src="img/zebulon/logo.gif" /></a>

ce qui nous donne la même chose :

dans le cas d'utilisation d'une adresse relative je n'ai indiqué que l'adresse qu'il restait à parcourir au navigateur pour trouver l'image à partir du point où il était : http://forum.zebulon.fr/ ... donc je n'ai pas besoin de reprendre cette partie de l'adresse ...

mediaforest · le 16 avril 2006

Je ne suis pas tout à fait d'accord avec gen :

un lien vers une adresse du type :

http://forum.zebulon.fr/img/zebulon/logo.gif

:

est une adresse "complète". C'est utilisé lorsque l'on fait un lien vers un site "extérieur"

effectivement,

<a href="img/zebulon/logo.gif"><img src="img/zebulon/logo.gif" /></a>

est un lien relatif à l'endroit où se trouve le lien... mais si ce code se trouve sur une page dont l'adresse est :

http://forum.zebulon.fr/utilisateurs/index.html

ce lien mènera vers l'image :

http://forum.zebulon.fr/utilisateurs/img/zebulon/logo.gif

ce qui n'est pas la même chose...

Alors qu'un lien absolu est un lien indiqué à partir de la "racine" du site :

<a href="/img/zebulon/logo.gif"><img src="/img/zebulon/logo.gif" /></a>

ce qui est important c'est le slash "/" en début d'adresse qui indique que le "chemin" est défini à partir de l'origine du site. Dans ce cas, même si ce lien est situé sur la page

http://forum.zebulon.fr/utilisateurs/index.html

, il pointera quand même vers

<img src="http://forum.zebulon.fr/img/zebulon/logo.gif" />

cortes · le 16 avril 2006

Meci les gars pour vos précisions

Mais alors pour les liens, bossant en local actuellement sur le site, il est donc inutile d'indiquer l'adresse futur du site pour que les liens marchent?

comme dans l'expemple : http://forum.zebulon.fr/img/zebulon/logo.gif

moi en local : j'aurai pas de http:// avec la mise en place des pages...

Ce la se fera tout seul dès que c'est mis sur le FTP?

ou alors il faudra que manuellement je change les adresses? (un boulot très astraignant)

Merci en tout cas pour toutes vos réponses !

Gen · le 16 avril 2006

Mais alors pour les liens, bossant en local actuellement sur le site, il est donc inutile d'indiquer l'adresse futur du site pour que les liens marchent?

Voilà

moi en local : j'aurai pas de http:// avec la mise en place des pages...
Ce la se fera tout seul dès que c'est mis sur le FTP?

disons que, en l'absence d'éléments d'une adresse c'est le navigateur Internet qui va "completer" virtuellement tes adresses lors de la consultation du site...

Si dans ta page il n'y a que

<a href="img/zebulon/logo.gif">lien</a>

Il va en déduire que le protocole :

http://

le serveur :

forum.zebulon.fr

et le chemin :

sont les mêmes que la page en cours. Il complètera de lui même l'adresse ... si tu mets ton pointeur de souris sur ce lien tu auras l'adresse complète qui s'affiche dans la barre d'état :

http://forum.zebulon.fr/img/zebulon/logo.gif

...

cortes · le 16 avril 2006

Ok merci beaucoup Gen pour ces précisions apportées !

cortes · le 6 mai 2006

Bien le bonjour à tous

bon le site avance, doucement. Je voulais savoir à quoi sert les boites css.

Je voudrai faire une page de lien, (je les ai mis à gauche de la page) comme une page standart mais à droite ou plutôt le milieu de la page est vide (terriblement vide)

Je voulais savoir si les boites css peuvent être utilisées pour y entrer par exemple un titre, quelques lignes et une photo du site à voir en cliquant dessus. Et comment appliquer une boite css. Mais surtout à quoi servent les boites css.

Ou alors est ce qu'une autre solution est envisageable pour faire des genres de cadres mais tout en voyant sur la page le cadre dessiné.

Merci pour vos réponses

Modifié le 6 mai 2006 par cortes

Connexion

Pas encore inscrit ?

Comment apprendre le flash

Messages recommandés

mediaforest

cortes

mediaforest

cortes

Gen

mediaforest

cortes

Gen

cortes

cortes

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer