Aller au contenu
Zebulon

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Comment apprendre le flash

cortes

Par cortes
dans Programmation

 Partager

Messages recommandés

mediaforest Mega Power Member

mediaforest

Posté(e)
Posté(e)

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... :P

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

:P

Lien vers le commentaire
Partager sur d’autres sites

cortes Member

cortes

Posté(e)
  • Auteur
Posté(e) (modifié)

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

Modifié par cortes
Lien vers le commentaire
Partager sur d’autres sites
mediaforest Mega Power Member

mediaforest

Posté(e)
Posté(e)

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à :P

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

Lien vers le commentaire
Partager sur d’autres sites
cortes Member

cortes

Posté(e)
  • Auteur
Posté(e) (modifié)

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

 

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

 

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é par cortes
Lien vers le commentaire
Partager sur d’autres sites
Gen Godlike Member

Gen

Posté(e)
Posté(e)

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

logo.gif

 

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 :

logo.gif

 

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 ...

Lien vers le commentaire
Partager sur d’autres sites
mediaforest Mega Power Member

mediaforest

Posté(e)
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites
cortes Member

cortes

Posté(e)
  • Auteur
Posté(e)

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 !

Lien vers le commentaire
Partager sur d’autres sites
Gen Godlike Member

Gen

Posté(e)
Posté(e)
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

...

Lien vers le commentaire
Partager sur d’autres sites
  • 3 semaines après...
cortes Member

cortes

Posté(e)
  • Auteur
Posté(e) (modifié)

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) :P

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é par cortes
Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...