Créer Un Site Web Avec Ooo

WebOOo
Crer un site web avec OOo
Mars 2004
Ralis avec : OOo 1.1.0 Plate-forme / Os : Toutes
Fr.OpenOffice.org
OpenOffice.org Documentation : WebOOo
Table des Matires

1 Comprendre lorganisation dun site web..................................................................................3
1.1 Crer sa maquette..................................................................................................................3
1.2 Organiser la structure du site.................................................................................................4
1.3 Prparer les composants du site............................................................................................5
2 Crer ses pages web : mthode..................................................................................................6
2.1 Lancer OOo............................................................................................................................6
2.2 Rdiger votre texte ................................................................................................................7
2.3 Crer vos autres pages web...................................................................................................7
2.4 Crer les liens ........................................................................................................................7
2.5 Grer les liens......................................................................................................................10
3 Amliorer la prsentation ..........................................................................................................11
3.1 Mettre un titre.......................................................................................................................11
3.2 Choisir un fond de page .....................................................................................................11
3.3 Mettre en forme le texte.......................................................................................................12
3.4 Insrer une image.................................................................................................................13
3.5 Travailler avec un tableau....................................................................................................15
3.6 Aspect visuel dune page......................................................................................................19
3.7 Aide.......................................................................................................................................19
4 Approfondir : complments pour utilisateurs avancs.......................................................... 19
4.1 Lien interne dans une page .................................................................................................20
4.2 Voir le code HTML................................................................................................................21
4.3 Travailler avec des frames (cadres).....................................................................................21
4.4 Image map ...........................................................................................................................22
4.5 Dautres possibilits .............................................................................................................23
5 La barre doutils : utilisation.....................................................................................................23
6 Dautres mthodes de cration de pages html........................................................................25
6.1 Transformer une page existante en page web.....................................................................25
6.2 L"Autopilote" ........................................................................................................................25
7 Conclusion...................................................................................................................................26
8 Crdits .........................................................................................................................................27
9 Licence.........................................................................................................................................27
Fr.OpenOffice.org 2 / 27
1 Comprendre lorganisation dun site web
De nombreux utilisateurs d'OOo ignorent le module "Document HTML" qui est

peu exploit et pour lequel il n'existait pas encore de How-to. Or, d'une part, les logiciels
"wysiwyg"1 gratuits et libres sont rares2 et, d'autre part, savoir crer quelques pages web devient
une ncessit pour un grand nombre de personnes, en particulier pour les collgiens, lycens et
tudiants qui sont les plus fidles utilisateurs d'OOo en raison de sa polyvalence, de sa gratuit et
bien sr de ses fonctionnalits avances. De plus, utiliser Ooo pour crer des pages web se
rvle d'une trs grande simplicit et efficacit d'autant que l'interface trs conviviale est
commune aux autres modules du logiciel. Pourquoi s'en priver ? Il permet de raliser rapidement
un site web complet que lon soit nophyte ou utilisateur averti.
Ce didacticiel est destin aux dbutants, aussi, seules les fonctions

lmentaires indispensables dOOo, en mode cration de pages html seront explicites.
Lobjectif est triple :
-dabord, comprendre la structure dun site web.

-ensuite, assimiler la notion de "lien".
-enfin, matriser les fonctions de mise en forme afin de prsenter correctement une page web.
Quelques informations complmentaires destines aux utilisateurs avancs sont

indiques au chapitre 4. Avant dexpliciter les principales fonctions dOOo, il est indispensable de
comprendre et avoir une vue densemble dun "site web" et des "liens" qui permettent la
navigation.
La cration dun site web exige mthode, rigueur et organisation. Avant tout, il faut
penser la structure du site qui sorganise partir de la page de dmarrage, toujours nomme
index.html (ou parfois default.html), en effet tout navigateur comprend quil sagit de la page de
dmarrage du site (mme si le fichier de dpart nest pas indiqu dans ladresse du site).
Attention, OOo par dfaut utilise lextension html et non pas htm : il faudra tre vigilant sur ce
point car une erreur dextension empche louverture dune page... Il ny a aucune diffrence entre
les deux, par commodit, il sera conserv lextension propose par OOo, soit .html.
1.1 Crer sa maquette
Ce travail, indispensable, surtout pour un dbutant se ralise... avec un papier et un

crayon ! Il peut ressembler au schma ci-aprs qui indique pour chaque page son contenu et les
liens raliser.
Crer une maquette papier permet de rflchir lorganisation gnrale de son futur
site. Quel thme et quel contenu ? Pour quoi faire ? A qui sera destin ce site ? Quel plan
choisir ? Comment organiser lensemble des informations ? Comment vont sarticuler les pages ?
Quel thme traiter par page ? Comment seront prsentes les pages : Titre ? Parties ?
Conclusion ? Liens ? ...
1 "What You See Is What You Get" ce qui est conu apparat directement lcran comme dans un
navigateur (pas de code html taper)
2 Il existe galement "Composer" fourni avec le navigateur gratuit et libre "MOZILLA" qui est aussi un
excellent produit recommander (ex: navigation avec onglets...)
La maquette prsente correspond un mini site "webooo" cr loccasion de ce

didacticiel, elle a donc un unique objectif pdagogique. Ainsi, lon pourra visualiser et mieux
comprendre ce que lon peut raliser avec OOo et qui est expliqu dans ce How-to.
Ces pages sont situes www.soshg.org/webooo/
index.html page3a.html
page1.html - texte dfilant

page2.html
page3.html
- insertion dimages
page autopil.html
- un lien vers 3b
- avec un lien vers une adresse
de mail - un fond de page en couleur
- la date et lheure sont insrs
page1.html page2.html page3.html
- lien interne la page - liens externes (internet)
- ligne horizontale - fond de page color - tableaux comportant des liens

vers des pages internes a et b
- liens vers divers fichiers ( sons,
vido, pdf, flash) - lien retour page accueil sur
image - tableau / barre de menu
- insertion dimage... en gif anim
- lien retour page index
page3b.html
+ - avec un lien vers 3a
dossier "autopil" - une image en vignette
avec la cliquable vers une grande
image
Page autopilote
1.2 Organiser la structure du site
La maquette ralise, il faut prparer et organiser son futur travail : crer les
dossiers et sous dossiers dans un dossier gnral du site web. Cela suppose donc que le
concepteur sache crer des dossiers, soit partir de l'explorateur windows, soit partir du "poste
de travail" et du dossier "Mes documents".
Voici les dossiers qui correspondent "webooo", dont la maquette vient d'tre
prsente.
DOSSIER => webooo Crer dabord un dossier-web qui contiendra tous les
fichiers et sous dossiers du site.
Puis crer tous les sous dossiers
Remarquer la prsence de sous dossiers spcialiss

pour incorporer les fichiers des divers mdias quil
faudra dabord avoir rcuprs !
Ici, le site ne comprenant que 5 fichiers (pages). Un

dossier spcifique pour les ranger n a pas t cr, les
pages sont "en vrac" la racine ; dans le cas dun site
volumineux, il est ncessaire de crer des sous dossiers
de pages.
Bien entendu, lon peut multiplier les sous dossiers...

Plus tard, il sera toujours possible dajouter des sous
dossiers complmentaires
1.3 Prparer les composants du site
Ensuite, il faut ajouter et ranger les composants ncessaires : tous les documents
(des fichiers) quil faudra insrer dans les futures pages html. Cela suppose un travail prparatoire
de recherche ou de cration (par exemple, scanner ...) des documents ncessaires, suivi d'un
ventuel ajustement avec le logiciel idoine. Ainsi, les images bitmap seront recadres et
redimensionnes pour obtenir une taille raisonnable de 600/400 pixels maximum, puis elles seront
allges lors de leur enregistrement au format jpeg qui permet de rgler la "compression" pour
obtenir le meilleur rapport qualit/poids.
A titre d'exemple voici le contenu des dossiers prsents ci-dessus.
image
Images : Elles sont uniquement aux formats gif / jpg / png, et, de
prfrence en rsolution de 72 dpi, avec un poids de 50 ko
maximum et une taille maximum de 600/400 pixels environ.
(ici une mme image "ecram" a t enregistre en 4 compressions

jpeg diffrentes pour montrer comment varie le rapport poids /
qualit image... voir chapitre 3-4 et la "page 3a" du site de
dmonstration)
Penser faire, si ncessaire, des images rduites en vignettes
cliquables (utiliser le Freeware Xnview qui permet travailler sur des
"lots" dimage redimensionner en une seule action)
vignette
Vignettes: Images trs rduites et lgres d'images existantes.
Il est conseiller de conserver le mme nom que la photo en grande
taille et dajouter un prfixe (ici, v-) afin de faciliter lidentification
dans le cas dun grand nombre de photos
gifanim
Gis anims: Remarquer que les fichiers gif sont trs lgers bien
qu'anims !
son
Sons: Aux formats wav, mp3 ou mid
vido
Vidos Attention, ces fichiers sont toujours volumineux.
doc
Autres documents : Eventuellement intgrer
-des pages web complmentaires existantes vers lesquelles vous
devez faire des liens
-tous les autres documents ayant des formats spcifiques (fichiers
pdf, swf ...)
autopil
Ce dossier servira ranger les fichiers crs par lautopilote
2 Crer ses pages web : mthode
2.1 Lancer OOo
Fichier / Nouveau / Document html
Immdiatement Enregistrer votre page dans le dossier ddi. La premire page sappellera
obligatoirement index.html
Rappel : par dfaut OOo utilise lextension html.
Par la suite, lors de lenregistrement des autres pages : Respecter les noms "Dos" de 8
lettres au nom du fichier. Ni majuscules, accents, espaces. En effet, dans le cas contraire,
lors du transfert ultrieur de vos pages sur un serveur web, il se pourrait quelles ne soient pas
reconnues par lordinateur distant qui ne fonctionne pas comme le votre (systme dexploitation
diffrent).
2.2 Rdiger votre texte
OOo, module document HTML, ressemble un traitement de texte classique,

toutefois il existe quelques restrictions et moins de souplesse dans les possibilits d'agencement
du texte et des insertions. Aussi, pour amliorer laspect et la prsentation dune page web, voir
le chapitre3 qui apporte un certain nombre de solutions pratiques. En particulier, il est expliqu
comment positionner plus facilement des lments (images....), en crant des tableaux sans
bordure ce qui permet une disposition plus originale.
Noubliez pas denregistrer votre page.
2.3 Crer vos autres pages web

Si ncessaire, de la mme manire, crer toutes les autres pages qui composent votre site web.
(bien les enregistrer)
Par la suite, il sera toujours possible de les modifier ou den ajouter d'autres.
2.4 Crer les liens

Cest la notion de base acqurir !
D'abord, vrifier qu'OOo est bien configur :

Paramtrage : OpenOffice.org doit avoir t paramtr correctement pour faire des "liens relatifs"
le vrifier sous Outils / Options / Chargement-enregistrement o lon dfinit la cration de liens
relatifs :
A noter qu'il est obligatoire que les fichiers concerns se situent sur le mme disque ou lecteur
afin de raliser des liens relatifs.
Ensuite, crer les liens:

Il est ncessaire davoir enregistr la page html avant de faire un lien, afin quil
sagisse de liens relatifs et non pas des liens absolus qui indiquent ladresse complte du fichier
sur le disque dur, ce qui ne fonctionnerait plus lorsque les fichiers seront transfrs sur le serveur
web !
Slectionner le support du lien (un ou des mots ou une image) puis cliquer sur licne
ou Menu Insertion / Lien.
Une boite de dialogue apparat:
Choisir parmi les 4 options de gauche :
-DOCUMENT (existant) :
Cliquer sur pour slectionner le document (Si vous avez bien enregistr votre page, OOo
crera automatiquement un lien relatif mme si lon voit dans la fentre un chemin absolu, comme
ci-dessus)
ou
ventuellement, taper son "chemin " en indiquant une adresse relative (ex: page1.html), si le
fichier est au mme niveau, c'est dire dans le mme dossier.
et surtout pas une adresse absolue : C:\Documents and Settings\toto\Mes documents\ooo-
doc\webooo\page1.html (qui ne fonctionnerait plus ailleurs, sur un autre ordinateur distant comme
un serveur web lorsque le site web sera positionn sur linternet)
Il nest pas utile, dans un premier temps de complter "cible" et "paramtres", par dfaut, OOo
ouvre le lien dans la mme fentre du navigateur (paramtre _self).
Ensuite "Appliquer".
Prcisons que le lien peut tre ralis vers un document autre quune page html, comme :
-un son au format wav, mp3, mid ...
-une page au format pdf ou rtf
-une image au format gif, jpg png
-un document au format flash .swf ou .pdf

...
Il suffit dindiquer lemplacement du fichier " Chemin " en cliquant sur (comme pour tout
document)
Pour visualiser le document, le navigateur lancera, si ncessaire, le plug-in (logiciel

complmentaire) ncessaire louverture du document (ex : Acrobat Reader, Flash...)
-ADRESSE INTERNET (site web externe), il faut la rdiger (sans aucune faute !) ou
ventuellement la copier/coller. Si ncessaire, cliquer sur loutil de navigation pour
rcuprer une adresse de page web partir du navigateur.
Puis "Appliquer".
Lon pourra, ventuellement, demander que louverture de cette page web se ralise dans une
autre fentre du navigateur (par dfaut, cest dans la mme fentre que s ouvrent les pages). Il
suffira de prciser dans "paramtres supplmentaires" cadre "_blank"
-ADRESSE DE COURRIER lectronique ou Mail, il faut la rdiger (sans faire de faute) ou

ventuellement la copier/coller
Puis "Appliquer".
-NOUVEAU DOCUMENT:
Complter la nouvelle bote de dialogue, de prfrence diter immdiatement le nouveau
document.
Il est prfrable davoir cr le document html avant et donc, il vaut mieux viter cette pratique
2.5 Grer les liens
Attention, la dmarche est ici spcifique OOo !
-Supprimer un lien : le slectionner puis clic

droit et apparat le Menu contextuel choisir
par dfaut et le lien disparat !
Ou
utiliser le menu droulant : Format / par
dfaut.
-Modifier le texte support dun lien : cliquer sur le lien avec la touche puis modifier le texte
du lien
-Modifier ladresse du lien: cliquer sur le lien avec la touche , puis cliquer sur et
modifier ladresse, puis Appliquer.
(Attention : en slectionnant le lien existant puis en utilisant le menu Insertion/Hyperlien ou
Edition/Hyperlien, il faut imprativement r-crire dans "texte" ce qui servait de support de lien,
dans le cas contraire, c'est uniquement l'adresse du lien qui s'affiche !)
-Supprimer le support du lien (et le lien) : le slectionner par cliquer/glisser puis appuyer sur la
touche SUP
3 Amliorer la prsentation
3.1 Mettre un titre

Tant que le titre nest pas indiqu, OOo, comme le navigateur, affiche en haut de la page le nom
du fichier :
Aller dans Fichier / Proprit et complter longlet "description"
Renseigner titre, sujet et mots cls ce qui permettra aux "robots dindexation" des moteurs de
recherche de mieux identifier votre page.
Ensuite OOo (comme le navigateur) indique :
Attention, le titre est diffrent du nom du fichier: Le fichier "page2.html" a comme titre "Page 2 de
Sitooo".
3.2 Choisir un fond de page
OOo permet de choisir une couleur de fond de page (choisir une couleur claire....) ou une image
comme fond de page (choisir une image sobre ...)
Format / Page / Onglet : Arrire plan

Choisir :
-couleur : la slectionner
ou
-une image : indiquer ladresse du fichier image
3.3 Mettre en forme le texte
Il faut distinguer :
Le paragraphe : il devrait tre mis en forme uniquement avec des mises en forme standard
proposes par OOo dans la fentre de mise en forme ou dans le styliste (F11 ou Format Styliste)
en slectionnant, en bas, "STYLES HTML".
Lon peut, comme en traitement de texte classique modifier les styles et crer des styles
personnels pour le format html.
Fentre de mise en forme (HTML) Styliste (F11 ou Format / Styliste)
Le texte et les caractres

Ils sont mis en forme avec la barre doutils ddis, comme en traitement de texte classique :
Ici, les explications sont superflues ! Bien remarquer que les styles de paragraphe sont indiqus
sur la gauche (ici, "corps de texte").
3.4 Insrer une image

Il faut dabord avoir prpar ses images aux formats gif, jpeg ou png, avec des caractristiques
adaptes au web :
-en 72 dpi de rsolution (pour une image scanne)
-avec un poids maximum qui ne devrait pas dpasser 50 ko pour faciliter un affichage rapide
-la taille galement doit tre raisonnable (ne pas dpasser 600/400 pixels).
Puis
Au point dinsertion (dans un texte ou dans un tableau), Menu ou Icne : Insertion /Image puis
indiquer son chemin
Ensuite, il est conseill de modifier immdiatement ses proprits, en faisant un clic droit puis
en vrifiant en particulier l"ancrage" ("comme caractre" facilite parfois la position) et
lalignement (qui varie selon lancrage dcid)
A noter deux possibilits qui permettent damliorer une prsentation dimages sur
un site :
-proposer une version en miniature de limage, une "vignette", il suffit de cliquer sur cette
vignette pour voir apparatre limage en plus grande taille. Pour le raliser, dabord crer des
vignettes (plus grande dimension de 100 pixels maximum et un poids de 3 4 ko le plus
souvent), ensuite, aprs avoir slectionn la vignette, faire un lien classique vers le fichier de la
mme image en grande taille (ou vers un autre document).
A noter que pour crer un ensemble de pages comportant uniquement des images, le freeware
XnView gnre automatiquement des pages web partir dune srie dimages.
-raliser des "images map" ou zones ractives sur une image avec des liens actifs (voir
chapitre 4-4)
Par ailleurs, Ooo:

-autorise le copier/coller dimages, dans ce cas, automatiquement limage colle sera
enregistre dans le mme dossier que la page web et avec un nom de fichier reprenant le dbut
du nom du fichier de la page html suivi dun chiffre :
-propose des images dans la "Gallery" qu'il suffit de glisser-dposer. Il faut ouvrir la gallery
avec l'icne puis l'agrandir avec .
Apparaissent alors les thmes, en particulier :

Arrire plan (62), Page Web (93), Puces (62), Rgles (25), Sons (35) qui comprennent de
nombreuses images au format gif.
Le thme page web regroupe des images qui conviennent particulirement aux sites web :
Attention : Aprs avoir gliss/dpos une image de la gallery sur votre page web,
lenregistrement, OOo va crer nouveau fichier image (format .gif) quil positionne dans le mme
dossier que le fichier html (avec un nom quasi identique). Il est prfrable de modifier en
dplaant ce fichier gif dans un dossier image et donc, il faudra ensuite refaire le travail : insertion
"image" partir du dossier ! Une autre possibilit, la plus rigoureuse et mthodique, consiste
copier dabord tous les fichiers images de la Gallery ncessaires, dans le dossier image du site
(le nom du fichier image et son emplacement apparat lorsque lon clique sur les images de la
GALLERY). Voir lexemple de la ligne insre page1 du mini site webooo.
3.5 Travailler avec un tableau
Lors de la ralisation de pages web, utiliser ponctuellement des tableaux permet une mise en
page plus souple avec la certitude que les lments insrs soient fixes (images en particulier).
Remarquer quil est souvent utile de supprimer le "cadre" afin doptimiser la prsentation.
Voici deux exemples qui permettent d'optimiser un site avec l'aide d'un tableau :
- Concevoir toute une page web partir d'un seul tableau "relatif" (en %) permet d'adapter
automatiquement l'affichage de la page html proportionnellement la taille de l'cran (et de ses
rglages). Ainsi les divers lments "fixs" dans les cellules apparatront positionns de la mme
manire sur tout cran.
-Concevoir un tableau dune seule ligne qui sert de barre de menus en haut de chaque page du
site : il suffit de copier/coller ce tableau sur toutes les pages pour obtenir un menu qui facilite la
navigation. (voir lexemple dans le mini site propos : "webooo", page3.html)
Pour crer un tableau :

Menu: Insertion / Tableau
ou
Icne "Tableau"
puis dterminer la taille du tableau (colonnes et lignes).

Ensuite insrer texte ou image.
Ci aprs un mme tableau (3 colonnes et 2 lignes) avec et sans bordure :
image image
image image
Exemple dune barre de menu conue partir dun tableau dune seule ligne :
Index Page 1 Page 2 Page 3
ATTENTION : OOo a un bug lorsquon lon ralise un lien vers la page active support mme du lien !
Exemple, sur la page "page3.html", dans le cas dun menu, le lien vers cette "page3" ne fonctionnera pas car
OOo refuse dcrire cette adresse dans le code html et renvoie automatiquement vers la racine du site! Pour
solutionner, il faut raliser le lien manuellement en mode "texte source html " et enregistrer aussitt !
Aussi, les dbutants viteront de faire un lien de ce type, ce qui nest pas nuisible puisque quil sagit de la
page active. Toutefois lintrt de ce menu est de le "copier/coller" sur toutes les pages du site, auquel cas le
dysfonctionnement surviendrait !
Pour finaliser laspect dun tableau, aller dans:

- le Menu Contextuel (en cliquant dans le tableau puis clic droit) puis complter les divers
onglets:
ou
-Format /tableau
Il est fortement conseill dafficher un tableau en valeur relative (%) Ainsi quelque soit la
dimension de lcran, les proportions seront conserves.
Ici, le tableau occupera 50 %

de la largeur de la page et
sera centr sur cette page.
CONSEIL:
-Alignement : viter
automatique afin de pouvoir
cocher relatif pour indiquer
un %
En principe, ici, seul

lalignement vertical est
configurer
(sauf en cas de tableau
tendu o il faut ajuster les
enchanements)
Ici, lon indiquera la

valeur relative en % de la
largeur de chaque colonne
par rapport lensemble du
tableau (les valeurs sajustent
automatiquement en cas de
modification)
Si lon ne souhaite pas de

bordure, configurer comme
indiqu, dans le cas contraire
slectionner la disposition
des lignes, le style de
bordure et la couleur, lombre
ventuelle.
Lon peut configurer la

couleur de larrire plan du
tableau, y compris pour une
seule cellule, comme ici.
Les autres menus utiles pour un tableau
Menu FORMAT : Cellule / Ligne / Colonne
Il sagit de pouvoir modifier les lments constitutifs dun tableau (cellule, ligne, colonne) pour les
slectionner, insrer ou supprimer, modifier la dimension ainsi que pour agir lintrieur dune
cellule.
D'abord slectionner l'lment du tableau concern puis :
CELLULE -Fusionner plusieurs cellules en 1 seule
-Scinder une cellule en plusieurs cellules
-Position du texte dans la cellule
(haut/centre/bas)
LIGNE -Hauteur amne:
il peut tre prfrable de garder hauteur

dynamique qui permet un ajustement
automatique en fonction du contexte
-Slectionner la ligne
-Insrer dautres lignes
-Supprimer la (les) ligne slectionne
CELLULE -Fusionner plusieurs cellules en 1 seule

-Scinder une cellule en plusieurs cellules
-Position du texte dans la cellule
(haut/centre/bas)
COLONNE -Largeur amne:
-largeur optimale permet doptimiser et

adapter la largeur dans le contexte
Slectionner la colonne
-Insrer dautres colonnes
-Supprimer la (les) colonne
3.6 Aspect visuel dune page

OOo permet de visualiser le rsultat en 2 modes, ce qui est pratique et permet de corriger une
apparence qui ne convient pas :
Aspect "Navigateur" ou "impression" : cliquer sur
Il faut prciser quune page web a comme vocation dtre vue dans un navigateur. Son apparence
pour une impression est souvent diffrente : un logiciel de cration de pages web nest pas un
traitement de texte ! Aussi est-il conseill, avant dimprimer, de vrifier laspect impression. OOo,
module HTML permet donc de le vrifier rapidement.
3.7 Aide
OOo propose un menu daide trs utile: Menu Aide/Sommaire/ Onglet index puis indiquer les
termes par exemple : HTML / Hyperlien(s)
4 Approfondir : complments pour utilisateurs avancs
4.1 Lien interne dans une page

Il sagit de raliser un lien vers une "cible" dans le document (cas dune longue page web).
Pour atteindre un emplacement spcifique dans le mme document texte, dabord saisissez un
repre de texte ou ancre cet emplacement (Insertion - Repre de texte et lui donner un nom)
Ensuite, lors de la ralisation du lien, partir de la bote de dialogue "Hyperlien", cliquer sur
pour obtenir la boite de dialogue "Cible dans le document" et ouvrir "Repres de texte" pour
slectionner la cible
ce qui donnera en suite :
4.2 Voir le code HTML

Les utilisateurs avancs pourront visualiser le code html gnr par OOo (un code "propre"
contrairement celui gnr par Word ou Frontpage express...)
Cliquer sur ainsi, par exemple, vous pourrez vrifier que liens sont bien relatifs
-cas dun fichier dans le mme dossier :
<A HREF="fichier.htm">
- cas dun fichier dans un dossier diffrent
<A HREF="../dossier/fichier.htm">
Cas du bug cit chapitre 3-5:

Voici le code demand, par exemple, sur la page index (dans le menu, un lien vers cette mme
page) : <A HREF="index.html">
Voici le code quaffichera en ralit OOo <A HREF=""> ou <A HREF="../nomdudossier">

quil faudra donc corriger manuellement comme indiqu ci-dessus
4.3 Travailler avec des frames (cadres)
Les utilisateurs avancs pourront crer des cadres ou frames.

Attention, crer un site avec des cadres est complexe, de plus le rsultat nest pas toujours
apprci par les internautes, aussi, ne pas en abuser !
Par dfaut OOo nest pas configur pour le faire (compatibilit Netscape 4) aussi
aller dans Outils/Options puis catgorie Chargement/Enregistrement puis Export et choisir Internet
Explorer.
Ainsi, dans le menu INSERTION est apparu "CADRE" quil faudra complter (Nom du
cadre et adresse du fichier mettre dans ce cadre). En crer plusieurs, si ncessaire (pas trop !)
Les positionner sur la page (poignes vertes). Enfin enregistrer la page.
Pour
supprimer un
cadre, le
slectionner
puis touche
supprim ; pour
modifier un
cadre, le
slectionner
puis
Edition/Objet/
Proprit
Lorsque lon cre des cadres ou frames, lors de la cration des liens, lon utilise les "paramtres
supplmentaires" pour indiquer la cible du lien :
_blank = nouvelle fentre
_self = dans la fentre dappel du lien (paramtre par dfaut)
_parent = fentre "mre", soit le cadre parent du lien (ou mme fentre sil ny a pas de fentre
"mre")
_top= dans toute la fentre (il ny aura pas de cadre)
4.4 Image map
Une image Map est une image dont une zone est active comme lien.
Il faut dabord avoir insr une image, puis la slectionner
Ensuite pour faire un lien sur un zone dlimite de limage: Menu Edition / Image map
ce qui provoque louverture dune boite de dialogue qui affiche limage slectionne:
Faire la slection avec les outils Dessin proposs, ventuellement modifier les points, ensuite,
dans la zone adresse, saisir l'URL du fichier ouvrir lorsquon cliquera sur la zone active puis, si
ncessaire, la frame. Enfin, appliquer
4.5 Dautres possibilits

Il suffit d'utiliser OOo Writer pour accder de nouvelles possibilits comme, par exemple, la
barre doutils de dessin, le texte dfilant. Il suffit de crer le dessin ou le texte dfilant puis de le
copier /coller dans la page html (ou enregistrer la page faite avec Writer au format html)
Le dessin conu avec la

barre doutils sera
automatiquement
sauvegard par OOo qui
crera automatiquement les
fichiers images.
5 La barre doutils : utilisation

OOo propose une barre doutils situe sur le ct gauche de lcran :
-cadre
-image
-tableau
-document
Cette barre peut tre dtache (par cliquer-dposer) -caractres spciaux
Elle permet dinsrer rapidement les lments suivants : -section
-repre de texte
INSERER DES CHAMPS automatiquement -date 07/03/04

-heure12:35:00
-Numro de page 24
-Nombre de pages 27
-Sujet Un mini site web
avec plusieurs pages html
avec OOo
-Titre Crer des pages
web avec OOo
-Auteur Gilles Badufle
-Autres (affiche une
nouvelle fentre)
Pour que certains champs soient activs, il faut au pralable

avoir renseign "Fichier/Proprits
Insrer un objet -diagramme : en liaison avec

un tableau
-math
-cadre ou frame
-objet ole (Object Linking and
Embedding... pour les "pros"
-plugin : composant logiciel qui
tend les capacits d'un navigateur
Web.
Rserv aux utilisateurs avancs
-applet : langage java, pour
les"pros"
FONCTIONS DE FORMULAIRE Champs classiques de

formulaire
Non expliqu dans le cadre dun

tutoriel pour dbutants
Rserv aux utilisateurs avancs
EDITE AUTOTEXTE Insre du texte prrdig

et prformat
(DES) ACTIVE LE CORRECTEUR ORTHOGRAPHIQUE
(DES) ACTIVE UNE RECHERCHE Pour rechercher et

remplacer un lment de
texte
AFFICHE/MASQUE CARACTERES NON IMPRIMABLES
AFFICHE/MASQUE LES IMAGES
MODE: MISE EN PAGE ou IMPRESSION Important pour vrifier

laspect de la page dans
les deux modes
TEXTE SOURCE HTML
6 Dautres mthodes de cration de pages html

Pour crer des pages web, OOo propose deux autres possibilits :
6.1 Transformer une page existante en page web
Ainsi avec Writer, au format sxw ( ou mme partir dun tableau ou dune prsentation ralis
avec OOo) il est possible de transformer le document en une page web : il suffit douvrir le
document et de l"enregistrer sous " au format document html (crer ensuite les liens).
Si la page possde des images, Ooo les enregistrera automatiquement dans le mme dossier que
la page html (avec un nom de fichier reprenant celui de la page html)
6.2 L"Autopilote"
Lautopilote est une base de donnes de modles quil suffit de complter.
Menu: Fichier/Autopilote pour voir les divers modles de pages web auxquels des styles diffrents
peuvent tre associs.
Slectionner un modle et son style puis cliquer sur "Crer". Ensuite modifier la page puis
enregistrer votre travail.
Voir un exemple dans le site "webooo" ralis avec OOo.
7 Conclusion
A prsent, la cration de pages web ne doit plus avoir de secrets ! Bien sr, lditeur
html dOOo permet essentiellement la cration de sites simples, qui suffiront dans la plupart des
cas... Pour raliser des sites complexes, il faudra ensuite utiliser des logiciels plus puissants mais
payants comme Dreamweaver. Les diteurs "wysiwyg" gratuits, libres et en franais sont rares (A
noter lexcellent Editeur "Composer" intgr Mozilla, navigateur libre et gratuit).
Le principal dfaut dOOo est labsence de la gestion de feuilles de style en .css

(feuilles de style externes en particulier) et le bug lors de la cration de liens vers la page support
du lien. Gageons que la prochaine version palliera ces petites lacunes.
Plus tard, il faudra mettre en ligne, sur linternet, votre site web. Cela suppose que
votre fournisseur daccs vous propose un hbergement ou que vous ayez ouvert un site chez un
hbergeur gratuit (comme Free). Pour accder au serveur web distant, votre fournisseur vous a
fourni :
-ladresse URL de votre site web //chezmoi.free.fr
-les donnes de configuration pour accder au serveur web, un identifiant: toto, ladresse ftp
du serveur web: ftpperso.free.fr et un mot de passe : monmotdepasse .
Pour transfrer tous vos fichiers, vous devez utiliser un logiciel FTP spcialis dans le
tlchargement, de prfrence un logiciel libre comme Filezilla http://filezilla.sourceforge.net/,
voir lexcellent tutoriel de Framasoft http://www.framasoft.net/article1941.html
Vous devez, la premire utilisation, le configurer avec vos identifiants. Ensuite vous
vous connectez au serveur distant, le logiciel FTP affiche dun ct le dossier personnel web de
votre ordinateur, et, de lautre ct, le dossier distant fourni par votre fournisseur daccs.
Il suffit de copier ses fichiers vers le serveur distant (les slectionner, puis cliquer sur une flche
ou faire un glisser/dposer).
Plus tard, il faudra actualiser rgulirement son site web: tout fichier modifi ou
nouveau devra tre transfr sur le serveur : l'ancien fichier sera automatiquement cras.
8 Crdits
Auteur : Gilles BADUFLE www.soshg.org
Site web associ ce how-to : www.soshg.org/webooo/index0.htm
Dernire modification : Mars 2004
Conception : OOo 1.1 et Gadwin PrintScreen pour les captures cran
Liaison : Projet Documentation OpenOffice.org - Fr.OpenOffice.org
9 Licence
Notice de Licence de Documentation Publique
Le contenu de cette Documentation est soumis la Licence de Documentation Publique dans sa

Version 1.0 (la "Licence"); vous ne ne pouvez utiliser cette Documentation que si vous respectez
les conditions de cette Licence. Une copie de la Licence est disponible l'adresse suivante
http://fr.openoffice.org/files/documents/67/1518/PDL_fr.sxw
La Documentation d'origine s'intitule Crer des pages web avec OOo. L'Auteur initial de la
documentation dorigine est Gilles Badufle Copyright 2004. Tous droits rservs. (Coordonnes
de l'auteur Initial :www.soshg.org ).
Documentation libre de reproduction et de distribution (voir licence) pour toute utilisation

libre et gratuite.

Créer Un Site Web Avec Ooo

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Créer Un Site Web Avec Ooo

Încărcat de

Drepturi de autor:

Formate disponibile

WebOOo

Crer un site web avec OOo

Table des Matires

1 Comprendre lorganisation dun site web

De nombreux utilisateurs d'OOo ignorent le module "Document HTML" qui est

Ce didacticiel est destin aux dbutants, aussi, seules les fonctions

Lobjectif est triple :

-dabord, comprendre la structure dun site web.

Quelques informations complmentaires destines aux utilisateurs avancs sont

1.1 Crer sa maquette

Ce travail, indispensable, surtout pour un dbutant se ralise... avec un papier et un

La maquette prsente correspond un mini site "webooo" cr loccasion de ce

Ces pages sont situes www.soshg.org/webooo/

page1.html - texte dfilant

page1.html page2.html page3.html

- lien interne la page - liens externes (internet)

- ligne horizontale - fond de page color - tableaux comportant des liens

- lien retour page index

1.2 Organiser la structure du site

Remarquer la prsence de sous dossiers spcialiss

Ici, le site ne comprenant que 5 fichiers (pages). Un

Bien entendu, lon peut multiplier les sous dossiers...

1.3 Prparer les composants du site

(ici une mme image "ecram" a t enregistre en 4 compressions

2 Crer ses pages web : mthode

2.1 Lancer OOo

Fichier / Nouveau / Document html

Rappel : par dfaut OOo utilise lextension html.

2.2 Rdiger votre texte

OOo, module document HTML, ressemble un traitement de texte classique,

Noubliez pas denregistrer votre page.

2.3 Crer vos autres pages web

2.4 Crer les liens

D'abord, vrifier qu'OOo est bien configur :

Ensuite, crer les liens:

ou Menu Insertion / Lien.

Une boite de dialogue apparat:

Choisir parmi les 4 options de gauche :

-un document au format flash .swf ou .pdf

Pour visualiser le document, le navigateur lancera, si ncessaire, le plug-in (logiciel

-ADRESSE DE COURRIER lectronique ou Mail, il faut la rdiger (sans faire de faute) ou

2.5 Grer les liens

Attention, la dmarche est ici spcifique OOo !

-Supprimer un lien : le slectionner puis clic

3.1 Mettre un titre

Aller dans Fichier / Proprit et complter longlet "description"

3.2 Choisir un fond de page

Format / Page / Onglet : Arrire plan

3.3 Mettre en forme le texte

Fentre de mise en forme (HTML) Styliste (F11 ou Format / Styliste)

Le texte et les caractres

3.4 Insrer une image

Par ailleurs, Ooo:

avec l'icne puis l'agrandir avec .

Apparaissent alors les thmes, en particulier :

3.5 Travailler avec un tableau

Pour crer un tableau :

puis dterminer la taille du tableau (colonnes et lignes).

Index Page 1 Page 2 Page 3

Pour finaliser laspect dun tableau, aller dans:

Ici, le tableau occupera 50 %

En principe, ici, seul

Ici, lon indiquera la