|
|
|
|
|
|
|
|
|
|
- Leçon 1 - Créer des pages
- Un exemple pour créer des pages
- Ouverture du projet exemple
- Première page : saisir des données dans un formulaire
- Comment créer la page ?
- Des champs pour saisir les informations du formulaire
- Premier champ : un champ de saisie pour le nom
- Améliorer l'ergonomie de la page
- Modification du champ Adresse
- Alignement des champs
- Modification du style des champs "Login" et "Mot de passe"
- Tester la page sous un navigateur
- Conclusion
Tuto - Mon premier site WEBDEVLeçon 1 - Créer des pages Ce que vous allez apprendre : - Création d'une page formulaire.
- Création des champs.
- Amélioration de l'ergonomie de la page.
 10 mn Un exemple pour créer des pages Pour commencer à développer avec WEBDEV, nous allons simplement créer quelques pages. Ces quelques exemples vous permettront de comprendre le fonctionnement des sites Internet/Intranet et vous permettront de manipuler votre première base de données. Rappel : Les pages permettent d'afficher ou de saisir à l'écran des informations. L'internaute peut agir directement sur les pages par l'intermédiaire de champs, de boutons, etc.  Dans cette leçon, nous nous concentrons sur la création de pages simples. Nous allons donc manipuler un projet vide, déjà créé. Ouverture du projet exemple Dans WEBDEV, ouvrez le projet "Mes_Premieres_Pages" : - Affichez la page d'accueil de WEBDEV (Ctrl + <).
- Cliquez sur "Tutoriel" puis dans la zone "Tuto - Premier site", double-cliquez sur "Mes premières pages - Exercice".
 Avertissement
Cet exemple sera utilisé dans les différentes leçons de ce tuto.
Première page : saisir des données dans un formulaire Pour notre première page, nous allons créer un formulaire d'inscription. Ce formulaire va contenir plusieurs champs permettant d'identifier la personne. Comment créer la page ? La création d'une page se fait directement depuis les boutons d'accès rapide : - Cliquez sur
 parmi les boutons d'accès rapide. La fenêtre de création d'un nouvel élément s'affiche. Cette fenêtre permet de créer tous les éléments pouvant être associés à un projet. - Cliquez sur "Page" puis sur "Page". L'assistant de création d'une page s'affiche.
- Sélectionnez "Vierge".
- Validez (bouton "OK").
La page est automatiquement créée sous l'éditeur. La fenêtre de sauvegarde de la page apparaît. Cette fenêtre affiche : - Le titre de la page. Ce titre sera affiché dans la barre de titre du navigateur.
- Le nom de la page. Ce nom correspond au nom logique de la page. Ce nom sera utilisé pour manipuler la page par programmation.
- L'emplacement. Cet emplacement correspond au répertoire de sauvegarde du fichier correspondant à la page.
Dans notre exemple, cette page correspond à un formulaire. Nous allons donc lui donner ce nom. - Saisissez le titre de la page : "Formulaire".
- Validez (bouton "OK").
A savoir :
Le nom de la page (qui sera utilisé par exemple en programmation) est automatiquement déduit du titre de la page. Si ce nom ne vous convient pas, il est possible de le modifier et de spécifier un nom différent du titre de la page. Des champs pour saisir les informations du formulaire Notre première page est créée. Nous allons maintenant ajouter différents champs du formulaire. Ces champs permettront à l'utilisateur de renseigner les données nécessaires à l'inscription. Le formulaire sera constitué des champs suivants : - Nom.
- Prénom.
- Adresse.
- Email.
- Login.
- Mot de passe.
Tous ces champs sont des champs de saisie, dans lesquels l'utilisateur va saisir des données. Premier champ : un champ de saisie pour le nom Commençons par créer le premier champ de saisie qui va contenir le nom de l'utilisateur : - Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur
 . Le champ en création suit le mouvement de la souris. - Cliquez dans la page vierge pour créer le champ. Le champ est créé et des poignées sont affichées pour indiquer que le champ est sélectionné.
A savoir :
Vous devez créer un champ ? Affichez le volet "Création" de WEBDEV : tous les champs disponibles sont accessibles dans ce volet. Par défaut, le champ créé a pour libellé "Champ de saisie". Nous allons modifier ce libellé pour afficher "Nom" : - Cliquez sur le champ (simple clic) : le libellé passe en édition.
Vus préférez utiliser le clavier ? Il suffit d'appuyer sur la touche Espace ou sur la touche Entrée pour passer le libellé en édition. - Saisissez "Nom" et validez avec la touche Entrée.
- Le libellé est immédiatement modifié.
- Le nom du champ est également modifié : il apparaît dans la bulle d'aide en survol du champ : SAI_Nom.
Observez bien le nom du champ que WEBDEV propose par défaut : ce nom commence par les lettres "SAI_". Ce préfixe est automatiquement ajouté car le projet utilise une charte de programmation. Pour plus de détails, consultez Charte de programmation. Dans notre exemple, nous voulons limiter la taille de saisie du nom à 30 caractères (ce qui est déjà relativement rare). Pour cela, nous allons utiliser la fenêtre de description du champ. - Double-cliquez sur le champ.
Une fenêtre de description du champ apparaît :
Dans cette fenêtre, nous pouvons voir que : - Le champ est de type texte (1). En effet, il permet de saisir une chaîne de caractères.
- Le champ a une taille de saisie illimitée (2).
- Modifiez cette taille en saisissant 30 dans le champ "Taille de saisie (caractères)".
- Cliquez sur le bouton "OK" pour valider vos modifications.
A savoir :
Pour tous les éléments du projet, la fenêtre de description regroupe toutes les options de configuration possibles sur l'élément. Ces options sont regroupées par thème, dans différents onglets. Cette fenêtre peut être aussi bien affichée par l'option "Description" du menu contextuel que pas le raccourci Alt + Entrée. | A vous de jouer :
De la même manière, créez en dessous du champ "Nom", les champs de saisie suivants :
| | | | Libellé | Type | Taille |
|---|
| Prénom | Texte | 30 | | Adresse | Texte multiligne | | | Email | Texte | 255 | | Login | Texte | 10 | | Mot de passe | Mot de passe | 10 |
Comme vous l'avez remarqué, ces champs ne sont pas tous du même type. Pour modifier le type du champ de saisie, affichez simplement la fenêtre de description du champ et sélectionnez le type voulu. |
La base du formulaire est créée. Nous allons maintenant l'améliorer.Améliorer l'ergonomie de la page Nous avons créé une page simple en posant juste les champs dans la page. Maintenant, il faut l'améliorer, aussi bien au niveau du look qu'au niveau de l'ergonomie. Voici ce que nous voulons obtenir : - La saisie sur plusieurs lignes dans le champ Adresse.
- Alignement des différents champs de saisie
- Utilisation d'un libellé rouge pour les champs Login et Mot de passe.
Modification du champ Adresse Première amélioration, le champ Adresse. Ce champ doit afficher plusieurs lignes à l'écran. Nous allons donc l'agrandir. Pour agrandir en hauteur le champ "Adresse" : - Cliquez sur le champ "Adresse". Des poignées apparaissent, indiquant que le champ est sélectionné.
- A l'aide de la souris, cliquez sur la poignée en bas de la zone de saisie et agrandissez la zone en maintenant le bouton gauche de la souris enfoncé.
De la même façon, vous pouvez ainsi agrandir en largeur les différents champs de la page. Alignement des champs Lorsque les champs ont été déposés sur la page, ils n'ont pas forcément été alignés. Pour obtenir une interface professionnelle, il est nécessaire de vérifier et si nécessaire d'améliorer l'alignement des différents champs. Pour aligner les champs de la page : - Sélectionnez le champ "Nom" puis tous les autres champs de saisie de la page (en maintenant la touche Ctrl appuyée et en cliquant sur les différents champs).
- Affichez le volet "Alignement" du menu de WEBDEV. Ce volet contient toutes les options d'alignement disponibles pour les champs.
- Nous voulons que les bords gauches et droits des champs soient alignés. Cliquez sur l'option "Justifier (Int et Ext)".
A savoir : Le premier champ sélectionné est important. En effet, les options d'alignement se basent sur : - La taille du premier champ sélectionné : elle va servir de référence pour la taille des autres champs.
- La position du premier champ sélectionné : tous les champs sélectionnés seront alignés par rapport au premier champ sélectionné.
Modification du style des champs "Login" et "Mot de passe" Pour afficher en rouge le libellé des champs "Login" et "Mot de passe", nous allons modifier le style par défaut associé à ces champs. Le style d'un champ regroupe toutes les options d'affichage des différentes parties d'un champ. Toutes les options sont regroupées dans l'onglet "Style" de la fenêtre de description du champ. Pour modifier le style par défaut du champ Login : - Sélectionnez le champ Login.
- Affichez la fenêtre de description du champ (double-cliquez sur le champ par exemple).
- Dans l'onglet "Style", sélectionnez l'élément "Libellé (CSS)".
- Déroulez la combo "Couleur" et sélectionnez la couleur rouge.
- Validez la fenêtre de description du champ "Login".
Maintenant, nous voulons appliquer ce même style au champ "Mot de passe". Pas besoin d'effectuer à nouveau ces manipulations : il suffit de cliquer sur le champ "Mot de passe" et d'appuyer sur la touche F4.
La touche de raccourci F4 permet de rejouer sur le ou les champs sélectionnés, la dernière modification effectuée. Dans notre cas, le changement de couleur est automatiquement rejoué sur le champ "Mot de passe". Vous obtenez l'UI suivante : Tester la page sous un navigateur Nous venons de créer une première page. Nous avons amélioré son interface sous l'éditeur WYSIWYG qui nous montre la page telle qu'elle sera dans le navigateur. Mais rien ne vaut un test réel. Nous allons donc lancer le test de cette page : - Cliquez sur l'icône
 parmi les boutons d'accès rapide. - La page apparaît sous votre navigateur. Vous pouvez saisir des données, mais ces données ne sont ni traitées, ni enregistrées.
- Fermez le navigateur.
La création de cette première page nous a permis d'avoir un aperçu des fonctionnalités de WEBDEV : - la création de pages.
- la création des champs de saisie,
- les possibilités d'alignement et d'organisation des champs dans la page,
- etc.
La prochaine leçon nous permettra de créer rapidement une base de données à partir de cette première page afin d'enregistrer et de vérifier les informations saisies. Projet corrigé
Vous voulez vérifier le résultat de vos manipulations ? Un projet corrigé est disponible. Ce projet contient les différentes pages créées dans les leçons de cette partie. Ce projet correspond donc au résultat final attendu.
Pour ouvrir le projet corrigé, dans la page d'accueil de WEBDEV, cliquez sur "Tutoriel" puis dans la zone "Tuto - Premier site", double-cliquez sur "Mes premières pages - Corrigé". |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|