Le cours Microsoft Expression Web |
Notre magasin Rue Albert 1er, 7 6810 Pin - Chiny (/fax: 061/32.00.15 |
Formations en ligne YBET | ||
Office | Internet | Techniques |
Access | Formation Internet | PC et périphériques |
Cours Excel | PHP - MySQL | Equipements réseaux |
Powerpoint | Créer son propre site | Dos et Windows |
ACCUEIL |
1. Faire simple - 2. Puces et numéros - 3. Les styles de paragraphes
Cette fois nous allons apprendre à gérer des paragraphes, d'abord simplement puis nous verrons les methodes plus spécifiques à Expression Studio Web en utilisant les styles. Cette partie est spécifique et différente par rapport à Kompozer et FrontPage (deux autres logiciels de création en HTML Wysiwyg). Ceux qui n'utilisent pas réellement ce logiciel peuvent lire la première partie et ... juste survoler la fin.
Dans
la première partie, nous avons déjà utilisé les
paragraphes d'une manière plutôt rudimentaire en le sélectionnant dans la
barre d'outils au-dessus. Nous allons un peu compléter le sujet. Reprenez votre
page d'exercice et placez le curseur dans la partie texte (la partie centrale à
gauche. Tapez quelques textes (ou utilisez ceux du précédant exercice sur les
signets). Vous remarquez que la zone reste en paragraphe par défaut. Par
contre, si vous descendez en bas de la page, sous le tableau, le texte devient
automatiquement "Paragraphe" et la zone est surmontée d'un petit P
pour vous le signaler. Pourquoi en bas et pas dans le tableau? Tout simplement
parce que les textes et images repris dans un tableau reprennent par défaut les
propriétés de
paragraphe du tableau (rappelez-vous que pour centrer le texte, nous utilisons
l'alignement des cellules et pas le petit bouton centré de la barre d'outils).
Par contre, vous pouvez imposer un style de paragraphes de texte dans une
cellule, notamment dans les parties textes, via la liste de choix du menu
déroulant, nous l'avons déjà fait pour le nom de l'entreprise au chapitre
précédant..
Dans
le menu Formal, sélectionnez la commande paragraphe. Vous optenez la fenêtre
suivante. On retrouve l'alignement (par défaut, gauche, droite, centré,
justifié), les retraits à gauche et à droite (y compris le retrait gauche sur
la première ligne) en pixels et les espacements avant le paragraphe, après,
entre les mots et l'interligne entre les lignes du même.
Remarque, vous pouvez également mettre un retrait
sur un paragraphe avec la souris en utilisant la double flèche comme ci-dessous
ou augmenter / diminuer le retrait via les deux boutons de la barre d'outils.
Deux types de paragraphes sont un peu spéciaux, il s'agit des numérotations et puces. Dans le premier cas, un chiffre va être automatiquement créé devant la ligne et s'incrémenter à la ligne suivante. Dans le deuxième cas (non trié suivant le vocabulaire de ce logiciel), il va insérer une puce devant. Pour l'utiliser nous pouvons directement cliquer sur la barre d'utils:
Une
fois un des deux types choisis, nous pouvons modifier la présentation, suivant
les propriétés du paragraphe comme ci-dessus mais aussi dans le menu Format
par "Puces et numéros" pour sélectionner le type de puce (y compris
graphique via l'onglet dédié) et le style de numérotation.
Une remarque, si vous utilisez un de ces deux types, n'utilisez pas les retraits à gauche: Internet Explorer va décaler l'ensemble, Mozilla Firefox va garder la puce ou le numéro contre la marge et décaler l'ensemble du texte: une des joie de la compatibilité des navigateurs qui modifie votre présentation.
Vous avez remarqué que dès que vous modifier quelque chose dans la police et dans le paragraphe, Expression Web crée automatiquement un nouveau style en bas à droite et l'affiche sur votre écran de création. Cette méthode est jugée plus propre, pourtant, le code et la taille de la page risque vite de s'alourdir. Si vous créez un style, il reste dans le code même si vous ne l'utilisez pas. Pour supprimer un style créé mais pas utilisé (y compris dans le codage HTML de la page): dans la partie droite, avec le menu contextuel, utilisez simplement la commande "Supprimer".
L'utilisation
de ces styles est finalement simple, la création se fait automatiquement, pour
reprendre dans une partie de texte un style existant, vous devez simplement
cliquer dessus en bas à droite. Le plus intéressant se trouve dans la partie
gauche en bas. De là vous allez pouvoir également modifier la présentation
directement par les attributs. La majorité sont inutiles (title par exemple
n'est pas réellement reprise comme standard, notament par les moteurs de
recherche, langue est déjà reprise sur la page - sauf si vous utilisez
plusieurs langues différentes sur la même page, et encore), toute la partie
Evènements est lié à des commandes
en javascript: une autre formation du site ybet.be.
En
plus, si vous sélectionnez l'onglet "Propriétés CSS", vous
retrouvez toutes les possibilités reprises dans la commande "Nouveau
style": les propriétés de la police, les bordures, et encadrements,
retraits et décalages, ... et même les sons attachés. Je vous laisse le soin
d'essayer les différentes possibilités.
Dans cette partie, nous avons appris à présenter notre texte: les propriétés des paragraphes, mais aussi des polices et textes. Dans la suite, nous reviendrons sur les styles mais d'une manière un peu plus professionnelle avec une feuille de style externe, qui reprendra les mêmes propriétés pour chaque page.
Soyons logiques, cette utilisation intempestive des style n'est pas forcément une bonne solution pour créer un site Web, et finalement va perturber le débutant (surtout quand on compare avec l'équivalent sous FrontPage, çà fait peur). Ce n'est effectivement pas le point fort de ce programme: les pages créées vont même être difficile à lire par d'autres logiciels de création de sites. Pourtant, cette méthode va être efficace pour le chapitre suivant qui va nous permettre de créer simplement un site Internet sans réelles connaissances, ni de l'HTML, ni des styles: c'est le réel point fort de ce logiciel par rapport aux autres avec l'utilisation des pages web dynamiques (déjà incluent en partie dans FrontPage2003).
La suite du Express Web> 5. Créer facilement un site Internet |
< 3. Les liens |
La formation / tutorial Microsoft Expression Web
13A.1. Introduction à Web Expression - 13A.2. Positionnement en tableaux - 13A.3. Les liens - 13A.4. Les paragraphes - 13A.5. Les modèles et la création automatique de sites.
Mise en ligne 15/07/2012
Le site YBET à Chiny (info, se dépanner, ...)