tuto design de page aspx

Bonjour

Il y a un truc que je ne comprends pas bien
J'ai l'habitude de travailler en C# et WinForm. Quand j'ai du faire il y a un petit temps déja mon premier design WinForm j'ai tres facilement compris tout seul comment faire et en moins d'une heure j'avais ma premiere WinForm opérationele.
Par ci par là j'entends dire WinForm c'est dépassé que le language de design HTML c'est beaucoup plus mieux, ASPX c'est plus facile etc...

Personellement ca fait +/- 48 heure que j'essaye d'elaborer le design de ma premiere page aspx on posant des questions sur tous les forums et je constate helas que personne n'est capable de me donner la moindre indication sur les rudiment de de design d'une page aspx ni meme de me donner le lien vers un tuto qui m'aiderait

Personellement j'ai le sentiment que faire un design de form aspx c'est l'age de la pierre par rapport a WinForm !

:?:oops:

Citation:

---

Envoyé par olibara

Personellement ca fait +/- 48 heure que j'essaye d'elaborer le design de ma premiere page aspx on posant des questions sur tous les forums et je constate helas que personne n'est capable de me donner la moindre indication sur les rudiment de de design d'une page aspx ni meme de me donner le lien vers un tuto qui m'aiderait

---

Un tuto :fleche: http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/.

Merci pour ce tuto, ca m'éclaire un peu plus

Est ce que cela signifie que quand je veux reproduire +/- une WinForm je dois creer une div pour chaque composant ?

Exemple :
j'ai deux checklistbox cote a cote
en dessous du premier listbox un combo
en dessous de chaque listbox un bouton
Et deux textbox que je dois visuellement associer au premier checklistbox

Comme je suis tout a fait debutant dans ce type de design et que je constate qu'il est tres dificile de trouver UNE maniere de faire j'aimerais commencer par LA bonne maniere

Merci de votre aide

Bonjour

Le design d'une page WEB ne peut être fait qu'en HTML et CSS. ASpx, c'est du DOTNET (comme déjà précisé). winform, c'est une invention microsoft, qui a mon sens ne veut rien dire. De plus ces deux termes se réfèrent au côté serveur.

"checklistbox" kesako ?
"combo" tu veux peut-être parler d'un select ? Utiliser la balise HTML <select></select>
"textbox" : un champs input ? Utiliser la balise <input type="text">
Pour le bouton, deux possibilités : la balise <input type="button"> ou <button></button>



Je déplace donc ce post dans la partie HTML, où tu trouveras toute l'aide nécessaire.

Merci roro06

Citation:

---

"checklistbox" kesako ?

---

Je voulais dire CheckBoxList

Citation:

---

"combo" tu veux peut-être parler d'un select ? Utiliser la balise HTML <select></select>

---

Effectivement ;)

Mais mon problème reside moins dans le choix du composant et son utilisation que le positionnement du composant dans la page

Exemple

Mon select doit se trouvé EN DESSOUS du CheckBoxList, je dois placer deux CheckBoxList l'un A COTE de l'autre
On vient de m'aiguiller vers les tables, mais j'ai lu ailleurs qu'il vallait mieux eviter les tables :?

Citation:

---

winform, c'est une invention microsoft

---

Sans doute ! Mais c'est tres pratique et quand tu a appris a faire du design en WinForm t'est un peu perdu avec le design HTML (et c'est peu dire ..) !!
C'est comme avoir pris l'habitude de développer en language de haut niveau C++, C# ou autre et tout d'un coup devoir reecrire l'application en assembleur, sans compter qu'il semble que dans ce domaine il n'y a aucune approche normalisée :calim2:

Re :

Citation:

---

On vient de m'aiguiller vers les tables, mais j'ai lu ailleurs qu'il vallait mieux eviter les tables

---

... Vieux débat ...:roll:

Il y a effectivement 2 possibilités Principales pour aligner des éléments sur une page, les tableaux ou les CSS.

Pour les tableaux, c'est un peu la solution de facilité, mais ça marche nickel :

Code:

---

1 2 3 4 5 6 7 8 9

<table> <tr> <td><select>gnagnagna</select> </td> </tr> <tr> <td align="center"><input type="checkbox"> gnagnagna</td> </tr> </table>

---

C'est la méthode basique, des millions de débutants, amateurs, pros s'en contentent.

L'autre est l'approche CSS, qui apporte l'avantage indéniable d'être maléable. c'est à dire que tu peux refaire entièrement le design de ta page (couleur, disposition de chaque élément) sans y toucher : un simple changement de la feuille de style permet ce changement. En retour l'approche est plus difficile.
Le tuto donné en lien par Macmillenium constitue un bon départ.

Bonjour

Ci-joint le modele de ma form en WinForm, j'imagine qu'il est tout a fait illusoire de reproduire ce design de maniere simple a l'aide d'un tableau et qu'il vaut mieux repenser completement l'organisation de la page afin de regrouper les éléments selon la taille des lignes et colonnes du tableau

J'ose cependant imaginer qu'il devrait y avoir comme en excell un possibilité de fusionner des cellules mais que c'est partir dans une autre galère :aie:

Je commence a comprendre pourquoi tant de formulaires web sont si peu ergonomique on incompréhensible..... Quand je vois l'energie a consacrer pour placer simplement quelques elément !

Mais je garde le secret espoir que quelqu'un me dise que je n'ai rien compris et que c'est beaucoup plus simple que je ne le pense !

En tout cas juste pour tester je viens de m'amuser a reproduire a l'identique le design de ma form en WebForm : 3 minutes montre en main !!

Si je parvenais a le reproduire en moins de deux heure en WebForm, je serais déja tres heureux :D

Re

Citation:

---

Mais je garde le secret espoir que quelqu'un me dise que je n'ai rien compris et que c'est beaucoup plus simple que je ne le pense !

---

Oui, c'est faisable. Un simple clic droit sur la fenêtre --> "Afficher la source" te fera apparaître le code HTML/CSS généré par ton visual Studio préféré.

Citation:

---

j'imagine qu'il est tout a fait illusoire de reproduire ce design de maniere simple a l'aide d'un tableau

---

La question qui se pose maintenant est : As-tu les bases nécessaires en HTML et CSS pour développer un page Web, avec formulaire ? un petit tour ici t'ouvrira certainement quelques horizons (oublies pour l'instant HTML5, pas encore complètement implémenté)

Citation:

---

Oui, c'est faisable. Un simple clic droit sur la fenêtre --> "Afficher la source" te fera apparaître le code HTML/CSS généré par ton visual Studio préféré.

---

Ca j'avais déja trouvé heureusement ;)

Citation:

---

La question qui se pose maintenant est : As-tu les bases nécessaires en HTML et CSS pour développer un page Web, avec formulaire ?

---

Certainement pas et c'est la que le gouffre apparait : on a beau avoir des année d'expèrience de développement et dans différents languages, afronter le design en HTML c'est se retrouver dans un autre monde avec des gens qui parlent dans une autre langue avec une autre logique et qui se comprennent difficilement :calim2:

Il me semble que le mieux c'est de commencer par ceci :

Citation:

---

http://a-pellegrini.developpez.com/t...-css/tableaux/

---

Bonjour,

Je viens encore de ramer pendant deux heures sur le principe de design en tableaux.

Si j'ai bien compris, je dois de preference faire mon design sur papier d'abord ensuite evaluer combien de lignes et colonnes au total seront necessaire pour placer tous mes elements du formulaires 'labels, textbox, select etc..'

Ensuite creer la table, fusionner les cellules prenant plus de place horizontalement ou verticalement et placer mes elément

J'ai du mal a croire que le design HTML soit une telle galere !!

J'ai l'impression de devoir faire des brouillon a la mains pour ecrire une lettre sur la machine a écrire a ruban de mon arriere grand pere :?

OU puis-je trouver un tuto qui explique comment faire un formulaire simple du style de mon exemple ??

Je veux dire, pas simplement une serie de textbox pour introduire un pavé d'adresse ?

Voici +/- 20 heures effective que je cherche a reproduire en HTML ASPX ce que je peux faire en 3 minutes en WinForm

Je pose probablement beaucoup de questions idiotes et les spécialiste doivent certainement sourire d'ironie en m'écoutant me débatre dans cette galere !

Je me demande quand meme combien de temps il faudrais a un specialiste HTML et ASPX pour reproduire mon petit modele WinForm
(presenté quelques post plus haut)

Ci-joint un modele de la voie sur laquelle je me suis embarqué a l'aide d'une table
Un spécialiste aurait-il l'immense bonté d'un peu de bienveillance dans mes débuts difficiles en HTML et me dire si je suis sur la bonne piste
Ou me corriger si nécessaire car avec ca j'ai pas l'impression de programmer et encore moins de développer mais plutot de me flageller !
J'ose penser que tous les développeurs utilisant HTML ne sont pas forcément masochistes ! :bug::sm::furieux::traine::aie:

Merci

C'est pas facile d'expliquer comment faire une interface web, ce n'est pas magique il n'y a pas de méthodes précisent, l'expérience est la meilleur des solution.

en tout cas, si tu veux te mettre a faire des page aspx, autant oublier tout de suite la mise en page en tableau, ce n'est pas la bonne solution.

conçoit plus l'intégration comme un découpage en plusieurs blocks qui peuvent eux meme contenir d'autres blocks.

Par rapport a ce que tu as fait ca pourrait donner un truc comme ca :

le squelette de ta page

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<!-- 1er bloc qui contient tout --> <div class="container"> <!-- bloc qui représente la colonne de gauche --> <div class="left"> <!-- les p et les ul peuvent être considérés comme des blocs --> <p>Dagen</p> <!-- les ul sont recommandés pour faire une liste --> <ul> <li><input type="checkbox" /><label>unbound</label></li> <li><input type="checkbox" /><label>zondag</label></li> <li><input type="checkbox" /><label>etc...</label></li> </ul> <p> <select> <option>unbound</option> <option>autre</option> </select> </p> </div> <!-- bloc qui représente la colonne de droite --> <div class="right"> <div class="van"> <p>van<br />(hh:mm)</p> <p><input type="text" /></p> </div> <div class="tot"> <p>tot<br />(hh:mm)</p> <p><input type="text" /></p> </div> </div> </div>

---

les styles qui vont mettre tout ca un minimum en forme

Code:

---

1 2 3 4 5 6 7 8 9 10

.container{}   .container .left, .container .right { float: left; /* avec ca tu dis a tes blocs de se mettre cote à cote */ }   .container .right .van, .container .right .tot { float: left; }

---

voila en gros comment réaliser ce que tu souhaites obtenir jusqu'à présent
a toi ensuite de rajouter d'autres blocs au bon endroit pour étoffer ton interface.

j'ai pas tout détaillé, y'a quelques subtilités a connaitre ensuite, mais comme je t'ai dit, seul l'expérience pourra te les apporter.

Merci Beaucoup kohsaka

Voilà une réponse qui m'aide a dissiper le brouillard et qui me confirme que les tableaux ce n'est pas une bonne idée !!

Je repasse en <div>
Ca viendra je le veux ! :D

Bonjour kohsaka

Je me replonge la dedans et j'ai fais une nouvelle form en organisant les <div> comme tu me l'a suggeré
De ce coté la ca va et je commence a voir ma form dans le designer

Par contre ou et comment dois-je declarer les styles (je travaille avec Visual Web developper 2008)

Merci de votre aide

Code:

---

1 2 3 4 5 6 7 8 9

.container{}   .container .left, .container .right { float: left; /* avec ca tu dis a tes blocs de se mettre cote à cote */ }   .container .right .van, .container .right .tot { float: left; }

---

le code ci-dessous est la base de ta page aspx.
pour ce qui est des styles, je te conseille de les mettre dans une feuille de style (add>new item>style sheet).

ensuite tu dois appeler cette feuille dans ton projet.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Site.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>

---

pour l'instant tu t'occupes du cœur de ton application, il est plus pratique de commencer par les éléments commun a ton interface. pour ca, je t'encourage vivement à utiliser une masterpage.

Salut kohsaka

Citation:

---

le code ci-dessous est la base de ta page aspx.

---

Ca (heureusement ;)) je l'avais déja assimili et j'ai deja en partie recommencé ma page sur base de tes conseil

Citation:

---

pour ce qui est des styles, je te conseille de les mettre dans une feuille de style (add>new item>style sheet).

---

Ca je vais essayer

Citation:

---

pour l'instant tu t'occupes du cœur de ton application, il est plus pratique de commencer par les éléments commun a ton interface. pour ca, je t'encourage vivement à utiliser une masterpage.

---

Mon application est ecrite en csharp et est déja fonctionelle, pour bien séparer les chose j'avais prévu de me baser sur un fichier de settings serialisée depuis une WinForm (ca je maitrise :roll:)

Ce que je dois faire maintenant c'est offrir une interface Web qui permet de modifier ces settings
Et c'est a ca que je travaille !

Merci de ton aide en tout cas

Salut dans le tutoriel CSS la syntaxe est sensiblement différente ?

Code:

---

1 2 3

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

---

A quoi servent ces slash que tu mentionne ?


Dans la feuille de style je reprends ton code betement car je n'ai pas encore saisi la syntaxe et je fais certainement une erreur qq part

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

body { .container{} .container .left, .container .right { float: left; /* avec ca tu dis a tes blocs de se mettre cote à cote */ }   .container .right .van, .container .right .tot { float: left; } }

---

alors :

Citation:

---

Mon application est ecrite en csharp et est déja fonctionelle, pour bien séparer les chose j'avais prévu de me baser sur un fichier de settings serialisée depuis une WinForm (ca je maitrise )

Ce que je dois faire maintenant c'est offrir une interface Web qui permet de modifier ces settings
Et c'est a ca que je travaille !

---

Je parlais bien de ton interface web, je me suis peut etre mal exprimé, mais en gros dans la masterpage, tu dois pouvoir retrouver ton header, ton menu ... tous les éléments communs a l'ensemble des pages de ton interface.

Citation:

---

A quoi servent ces slash que tu mentionne ?

---

/style.css va aller chercher le fichier a la racine du serveur.
/styles/style.css ira lui chercher le fichier dans le dossier styles qui se trouve a la racine du serveur.

est ce que c'est plus clair avec ces exemple ?
et aussi la syntaxe est la même que dans le tuto c'est juste que l'emplacement sur le serveur et le nom du fichier est diffèrent.

enfin revenons a ce que tu dois mettre dans ta feuille style.css :

Citation:

---

body
{
font-size: 11px;
background: #000000;
}

.container{}
.container .left, .container .right
{
float: left; /* avec ca tu dis a tes blocs de se mettre cote à cote */
}

.container .right .van, .container .right .tot
{
float: left;
}

---

il ne faut pas voir le css comme une fonction
on pourrait le traduire plutot comme ca :

Code:

---

1 2 3 4 5

cible { attribut: valeur; }

---

l'élément(s) que tu cibles est toujours suivi d'une accolade ouvrante/fermante et ne peut pas lui même en contenir

Merci kohsaka

Yep ca avance !

Bonne idée d'avoir laisse le backround a 000000 ca m'a permis de rapidement decouvrir son effet !!

Je parlais surtout du slash de fermeture

Code:

---

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

---

Citation:

---

Envoyé par olibara

Merci kohsaka

Yep ca avance !

Bonne idée d'avoir laisse le backround a 000000 ca m'a permis de rapidement decouvrir son effet !!

Je parlais surtout du slash de fermeture

Code:

---

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

---

---

ah ben les 2 sont correctes mais dépendent de la dtd que tu utilises et j'ai trou de mémoire quand a celle a utiliser avec la dtd transitional, surement celle du tuto developpez.com en fait.