Editeur CSS WysiWyg

Version imprimable

30/11/2008, 22h35
olibara

Editeur CSS WysiWyg

Bonjour

Je fait mes premier pas en css et asp

Je n'y connais rien mais je suis plongé jusqu'au cou dans la maintenance d'un site pour lequel le développeur s'est volatilisé !

Tant que c'est du Csharp tout va bien !

Pous le reste je dois apprendre le plus vite possible !

Je vois un certain nombre de document CSS, je pensais naivement que VS 2005 m'auraient permis de visualiser le layout en WySiwig

C'est pas que j'aime pas lire du code, au contraire !
Mais quand meme ! faire du design de mise en page a l'aveugle ca me semble un peu spécial !
Quels sont les outils utilisés a part les editeurs de texte standards ?

Mais j'ai peut etre encore rien compris :oops:
30/11/2008, 23h21
Erwan31

Bonsoir,
je ne sais pas s'il existe des éditeurs CSS Wysiwyg avec visualisation des changement en live (fonctionnalité qui sera ajoutée à Dreamweaver CS4 au passage) mais tu peux toujours essayer de passer par Firebug (une des meilleur extension de développement front-end pour Firefox).
Il te permettra de voir tes changement appliqués en live avec saisi semi-automatique, ceci dit il est préférable de créer au préalable les sélecteurs de classe/identifiant, pseudo-calsse etc dans un éditeur texte.
01/12/2008, 07h02
olibara

Il y a quand meme un truc que je ne comprends pas bien

Si j'accede au site dont je dois m'occuper j'arrive sur une page Login.aspx
Qui me montre un bel ecran avec des boutons, des textbox des images etc

Mise en page Nickel !
Ayand l'habitude des designer de winform j'ai du mal a imaginer quue toute cette mise en page soit faite a partir d'un simple editeur de texte

De plus je n'ai pas encore non plus compris comment je pouvais visualiser cette page "off line" : si je la met dans mon browser je rcois une erreur !

Je sais !
j'imagine que pour ceux qui savent je dois passer pour un imbécile ... Mais je cherche partout pour essayer de comprendre !
01/12/2008, 09h00
Ksual

Dans les cours et tutoriels CSS : http://css.developpez.com/cours/ tu as :http://css.developpez.com/outils/?pa...css#simple-css
01/12/2008, 18h18
HiRoN

Salut,

Citation:

Je vois un certain nombre de document CSS, je pensais naivement que VS 2005 m'auraient permis de visualiser le layout en WySiwig

Personnellement, je n'utilise que le mode "Code" pour développer mon CSS + visualisation directement dans le(s) navigateur(s).
Le mode WYSIWYG de VS 2005 ne reflète pas / peu la réalité (à chaque projet que je fais sous VS, au final en mode WYSIWYG ça ressemble à rien alors que le site est compatible tout navigateur et conforme au standards W3C)...
02/12/2008, 11h04
franculo_caoulene

+1 je fais la même chose.
02/12/2008, 17h10
olibara

Merci pour vos réponses

Je vais avancer dans cette direction !
12/12/2008, 23h34
olibara

Pour franculo_caoulene et Hiron

Comment faite vous pour visualiser un CSS dans le navigateur ?

Franchement quand on a fait du WinForm pendant des mois, le design de pages web c'est l'age de la pierre taillée !!
13/12/2008, 00h25
HiRoN

Citation:

Envoyé par olibara

Comment faite vous pour visualiser un CSS dans le navigateur ?

Enregistrer, puis dans le(s) navigateur(s), F5 voir ctrl+F5 pour afficher et visualiser les modifications ?

Citation:

Envoyé par olibara

Franchement quand on a fait du WinForm pendant des mois, le design de pages web c'est l'age de la pierre taillée !!

Ce sont juste 2 domaines différents... :aie:
13/12/2008, 09h18
olibara

J'avoue ne pas bien comprendre

Je dois travailler sur un projet de site en .NET Csharp + asp EXISTANT

La partie cSharp pas de probleme
Mais je dois aussi adapter le design de ceraines pages

Vola ce que j'ai +/- compris dans le design : les .css sont des templates de style et chaque form a son asp qui fait référence au css et y ajoute ses controle

Si je prends un asp dans Visual Studio, je peux
- voir le code
- visualiser le design
- afficher dans le browser (avec cette option, je ne vois pas la page choisie mais la page login du site)

Par contre pour un css je ne sais rien faire

Et si je le glisse dans le browser c'est visual studio qui s'ouvre pour afficher le code !
13/12/2008, 16h15
c_s_s

Une feuille de style est difficile à visualiser puisqu'elle ne représente pas quelque chose de concret, elle représente une "mise en forme".

On ne peut voir le résultat d'une feuille de style que lorsqu'elle est associée à un fichier (x)html (par exemple).

Du html, c'est concret, même sans mise en forme. Des images, c'est concret. Du CSS, c'est abstrait.

Imagine que tu aies un meuble à monter.
Tu as une notice avec du texte et des illustrations, et tu as les éléments du meuble.

Le HTML, ce sont les éléments séparés du meuble. Même sans être assemblés, tu peux les voir et les reconnaitre : une vis, une planche, etc.. Par contre, tu ne vois pas forcément à quoi ressemble le meuble complet.

Les images ce sont les illustrations de la notice de montage. Ca aide à mieux comprendre la notice.

Le CSS, c'est le texte de la notice de montage : assembler la pièce A et la pièce B ; visser les pièces C ; etc.. C'est ce qui permet de monter le meuble correctement.

Sans les éléments et les illustrations, le notice ne permet pas d'imaginer et de construire le meuble, ça reste abstrait.

Si tu veux avoir un pseudo aperçu du rendu des propriétés CSS brutes, tu peux essayer d'ouvrir ton fichier .css avec un logiciel comme TopStyle Lite.
13/12/2008, 16h48
olibara

Merci pour cette tres belle explication c_s_s !!

Je digere petit a petit ces concept
Je suis en train d'essayer d'apprendre tres vite a la fois

Le XML le HTML, ASP, CSS et l'architecture d'un serveur et d'un site web

Mais je decouvre quand meme que la mise en page HTML c'est la galere quand on a pris l'habitude d'outils comme les Designer WinForm

J'avais essayé d'utiliser le Designer .NET aspx pour faire une petite page avec un calendar et deux dropdown pour avoir les heures et les minutes

Je réalise que le designer ne sert a rien, que les control se mettent n'importe où et qu'on est obligé de tout coder a la main .
13/12/2008, 17h45
HiRoN

Citation:

Envoyé par olibara

Mais je decouvre quand meme que la mise en page HTML c'est la galere quand on a pris l'habitude d'outils comme les Designer WinForm.

Comme je te l'ai dis, ce sont 2 domaines différent, personnellement je préfère le WebForm...

Citation:

Si je prends un asp dans Visual Studio, je peux
- voir le code
- visualiser le design
- afficher dans le browser (avec cette option, je ne vois pas la page choisie mais la page login du site)

Pour le dernier point :
En effet, en "générant" & "compilant" ton projet afin de l'afficher dans ton browser, de base, il charge la page mise en "page de démarrage", mais tu peux très bien te "loguer" et aller visualiser les modification que tu a apporté sur une page X. Mais entre 2 modifications du CSS, un simple F5 voir ctrl+F5 suffit pour visualiser les nouvelles modifications.