Pour installer la langue fran\u00e7aise, t\u00e9l\u00e9chargez \u00e0 cette adresse : Un rapide aper\u00e7u de l’interface : Dans la zone des 4 onglets, en bas, cliquez sur Source<\/span> vous avez alors dans l’espace de travail le code source, le code html qui sera interpr\u00e9t\u00e9 par votre navigateur pour afficher la page web ; vous pouvez donc cr\u00e9er votre page \u00ab\u00a0visuellement\u00a0\u00bb c’est WYSIWYG en mode Normal, ou vous amuser \u00e0 la cr\u00e9er en tapant le code en mode Source… Au passage, dans ce dossier, \u00e0 c\u00f4t\u00e9 de votre fichier index.html vous allez cr\u00e9er un dossier intitul\u00e9 images, dans lequel vous pouvez copier le fichier logocorrelyce2.png en t\u00e9l\u00e9chargement avec cet article (profitez en pour t\u00e9l\u00e9charger \u00e9galement le fichier form.txt, mais lui sur le Bureau)<\/p>\n Attaquons le vif du sujet… Et comme il n’est pas la peine, forc\u00e9ment, de toujours r\u00e9 inventer la roue, je vous invite \u00e0 visiter Espace Doc WEB, site des documentalistes de l’acad\u00e9mie de Lyon et pr\u00e9cis\u00e9ment la page Un portail internet au CDI<\/a> o\u00f9 vous trouverez non seulement deux portails \u00e0 t\u00e9l\u00e9charger, l’un pour le coll\u00e8ge, l’autre pour le lyc\u00e9e, mais aussi tous les conseils pour les adapter, sachant qu’ils ont \u00e9t\u00e9 r\u00e9alis\u00e9s avec Nvu, qui, depuis, est devenu Kompozer !<\/p>\n Pour aller plus loin avec Kompozer…<\/p>\n – une documentation sur le logiciel avec le site Framasoft : – deux tutoriels en ligne : Dans cet article nous allons voir comment r\u00e9aliser une page d’accueil en html sur laquelle s’ouvrira par d\u00e9faut votre navigateur web. Vous avez certainement d\u00e9j\u00e0 d\u00e9clar\u00e9 un site, une page sur le web, comme accueil ; mais, le saviez -vous, cette page peut \u00eatre un fichier stock\u00e9 sur votre ordinateur, […]<\/p>\n","protected":false},"author":237,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[195],"tags":[],"class_list":["post-1243","post","type-post","status-publish","format-standard","hentry","category-archives"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"docazur","author_link":"https:\/\/www.pedagogie.ac-nice.fr\/doc-azur\/author\/docazur\/"},"rttpg_comment":0,"rttpg_category":"Archives<\/a>","rttpg_excerpt":"Dans cet article nous allons voir comment r\u00e9aliser une page d’accueil en html sur laquelle s’ouvrira par d\u00e9faut votre navigateur web. Vous avez certainement d\u00e9j\u00e0 d\u00e9clar\u00e9 un site, une page sur le web, comme accueil ; mais, le saviez -vous, cette page peut \u00eatre un fichier stock\u00e9 sur votre ordinateur, […]","post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.pedagogie.ac-nice.fr\/doc-azur\/wp-json\/wp\/v2\/posts\/1243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pedagogie.ac-nice.fr\/doc-azur\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pedagogie.ac-nice.fr\/doc-azur\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pedagogie.ac-nice.fr\/doc-azur\/wp-json\/wp\/v2\/users\/237"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pedagogie.ac-nice.fr\/doc-azur\/wp-json\/wp\/v2\/comments?post=1243"}],"version-history":[{"count":1,"href":"https:\/\/www.pedagogie.ac-nice.fr\/doc-azur\/wp-json\/wp\/v2\/posts\/1243\/revisions"}],"predecessor-version":[{"id":1245,"href":"https:\/\/www.pedagogie.ac-nice.fr\/doc-azur\/wp-json\/wp\/v2\/posts\/1243\/revisions\/1245"}],"wp:attachment":[{"href":"https:\/\/www.pedagogie.ac-nice.fr\/doc-azur\/wp-json\/wp\/v2\/media?parent=1243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pedagogie.ac-nice.fr\/doc-azur\/wp-json\/wp\/v2\/categories?post=1243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pedagogie.ac-nice.fr\/doc-azur\/wp-json\/wp\/v2\/tags?post=1243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nhttp:\/\/kompozer.net\/l10n\/
\nle pack Fran\u00e7ais (fr -FR) c’est un fichier .xpi,
\ndans Kompozer, cliquez dans le menu principal sur Tools > Extensions<\/span> puis sur install<\/span>, indiquez l’emplacement du fichier .xpi t\u00e9l\u00e9charg\u00e9 puis sur install now<\/span>. Red\u00e9marrez Kompozer<\/p>\n
\nOn y trouve l’habituel menu principal : Fichier Edition Affichage Format Tableau Outils Aide [1]<\/span>
\nUne barre d’outils \u00e0 trois niveaux [2]<\/span>
\nUn onglet (par d\u00e9faut nomm\u00e9 Sans titre) [3]<\/span>
\nLes valeurs largeur et hauteur de la page web en pixel [4] <\/span>et [5]<\/span>
\nLa zone de travail [6]<\/span>
\nLes quatre onglets d’affichage, par d\u00e9faut mode Normal, le plus utilis\u00e9 avec le mode Source [7]<\/span>
\nUne ligne d’affichage qui indique dans le code html o\u00f9 l’on se trouve par rapport \u00e0 ce qu’on voit \u00e0 l’\u00e9cran. Par exemple, en ouvrant le logiciel, Kompozer a commen\u00e7\u00e9 la cr\u00e9ation d’une page web Sans titre, le curseur clignote au d\u00e9but (le 0\/0 des axes est toujours en haut \u00e0 gauche) donc la ligne affiche la balise body. [8]<\/span><\/p>\n![\"\"](\"https:\/\/www.pedagogie.ac-nice.fr\/doc-azur\/wp-content\/uploads\/sites\/40\/2020\/07\/Statique.png\")
<\/p>\n
\nBref, revenez en mode Normal<\/span> et cliquez sur Fichier > Enregistrer sous<\/span>, une fen\u00eatre s’ouvre vous demandant le titre de la page (\u00e0 ne pas confondre avec le nom de fichier), ce titre est ce qui appara\u00eetra en haut du navigateur lorsqu’on visitera la page. On va l’appeler en majuscules PORTAIL CDI, ok<\/span>, puis indiquez o\u00f9 l’enregistrer (il vaut mieux un nouveau dossier uniquement pour ce projet) et changez le nom de fichier pour index.html, enregistrez<\/span>.<\/p>\n
\nDans un article pr\u00e9c\u00e9dant, nous avons retenu l’id\u00e9e d’une page web \u00e0 la taille de l’\u00e9cran ; pour la mise en page nous allons utiliser la vieille technique des tableaux ; mais d’abord r\u00e9glons la taille d’affichage : dans la ligne des balises, cliquez sur body<\/span> [note : attention, les balises sont indiqu\u00e9es ici dans les crochets sinon elles seraient interpr\u00e9t\u00e9es et fausseraient l’affichage de cet article !], puis \u00e0 l’aide de la souris redimensionnez la largeur et la hauteur ; pour avoir la taille exacte en fonction des \u00e9crans de vos pc, passez en mode Source<\/span> et tapez les valeurs d\u00e9sir\u00e9es, par exemple : body style=\u00a0\u00bbheight: 950px; width: 1260px;\u00a0\u00bb [ligne 8], revenez au mode Normal<\/span>.
\nPartons sur un tableau de 2 lignes, 2 colonnes, donc cliquez sur Tableau<\/span> > ins\u00e9rer > tableau<\/span>.
\nDans la premi\u00e8re cellule, tapez un texte de bienvenue ; dans la deuxi\u00e8me nous allons faire un lien vers le site lecdi.net par exemple, tapez cette expression puis s\u00e9lectionnez la avec la souris puis dans la barre d’outils cliquez
\nsur le bouton \u00ab\u00a0lien\u00a0\u00bb <\/span>(le maillon de cha\u00eene) et collez dans la fen\u00eatre \u00ab\u00a0Propri\u00e9t\u00e9s du lien\u00a0\u00bb l’adresse du site (http:\/\/www.lecdi.net\/) vous pouvez \u00e9galement d\u00e9finir la \u00ab\u00a0cible\u00a0\u00bb, c’est \u00e0 dire, dans quelle fen\u00eatre s’ouvrira le lien (m\u00eame fen\u00eatre, ou une nouvelle), ok<\/span>, puis enregistrez<\/span> votre travail.
\nPour la troisi\u00e8me cellule, nous allons nous servir d’une image comme support d’un lien ; une fois le curseur positionn\u00e9 dans la cellule, cliquez sur Insertion > Image<\/span>… et dans la fen\u00eatre \u00ab\u00a0Propri\u00e9t\u00e9s de l’image\u00a0\u00bb<\/span>, donnez le chemin vers le fichier logocorrelyce2.png que vous avez t\u00e9l\u00e9charg\u00e9 et enregistr\u00e9 (dans le sous dossier \u00ab\u00a0images\u00a0\u00bb), v\u00e9rifiez que l’option \u00ab\u00a0l’URL est relative \u00e0 l’adresse de la page\u00a0\u00bb<\/span> est bien s\u00e9lectionn\u00e9e, puis en guise de texte alternatif, tapez Catalogue de ressources num\u00e9riques et cliquez sur ok<\/span>. Pour cr\u00e9er le lien, un clic gauche<\/span> sur l’image, puis cliquez sur le bouton lien<\/span> (ou clic droit > cr\u00e9er un lien) et tapez l’adresse de CORRELYCE (le mieux \u00e9tant d’avoir le site ouvert et de copier -coller l’adresse), ok<\/span>, puis enregistrez<\/span>…
\nDans ce cas de figure, Kompozer ne propose pas de cible, mais dans le mode Source<\/span>, en regardant le code g\u00e9n\u00e9r\u00e9 pour le lien vers lecdi.net on peut copier -coller [target=\u00a0\u00bb_blank\u00a0\u00bb] juste apr\u00e8s [.html\u00a0\u00bb].Enregistrez votre travail.
\nUne petite pause bien m\u00e9rit\u00e9e pour voir ce que \u00e7a donne, avant le dessert…
\nAllez dans votre dossier de travail et cliquez droit <\/span>sur index.html ouvrir avec > internet explorer <\/span>(ou Firefox)… alors ? Il faudra jouer sur les propri\u00e9t\u00e9s du tableau pour obtenir un affichage correct
\nRevenons \u00e0 Kompozer, je vous laisse explorer les modifications des propri\u00e9t\u00e9s du tableau, sachant qu’il est bien utile, une fois la taille de la page d\u00e9finie, de donner \u00e0 son tableau une taille relative en % et non plus en pixels… ou de masquer toutes les bordures…
\nDe m\u00eame, je tiens \u00e0 rappeler qu’en \u00e9tudiant bien Kompozer on d\u00e9couvre une liste assez compl\u00e8te d’outils pour cr\u00e9er et mettre en forme vos pages web.
\nJe pr\u00e9f\u00e8re que nous compl\u00e9tions notre tableau avec un lien vers bcdi -web, mais d’un genre un peu particulier ; ce bcdi -web est une page web, avec un formulaire pour interroger la base… je vous propose d’int\u00e9grer le code html de ce formulaire pour l’afficher dans la quatri\u00e8me cellule !
\nVous avez t\u00e9l\u00e9charg\u00e9 le fichier form.txt, ouvrez le avec le bloc -notes ou wordpad, voici le fameux code, r\u00e9duit \u00e0 l’essentiel.
\nD’un c\u00f4t\u00e9 vous avez Kompozer ouvert, cliquez<\/span> dans la quatri\u00e8me cellule tapez Recherche rapide, sautez une ligne, puis allez dans le mode Source<\/span>, r\u00e9p\u00e9rez exactement o\u00f9 clignote le curseur ; de l’autre copiez le code \u00ab\u00a0bcdi\u00a0\u00bb<\/span> (en html, form c’est la balise qui d\u00e9clare un formulaire) et collez le<\/span> dans Kompozer, enregistrez.<\/span>
\nDans le code que vous avez t\u00e9l\u00e9charg\u00e9, l’adresse pointe vers \u00ab\u00a0mon\u00a0\u00bb bcdi -web donc dans le mode Source<\/span> de Kompozer, il ne vous reste plus qu’\u00e0 remplacer l’adresse :[\u00ab\u00a0http:\/\/bcdi.ac -nice.fr\/coudon\/bcdiweb.cgi\/DATA\u00a0\u00bb] par celle de votre<\/u> bcdi -web, sans oublier les guillemets ! Enregistrez votre travail et ouvrez votre fichier.html avec votre navigateur…<\/p>\n
\nhttp:\/\/www.framasoft.net\/article2243.html<\/p>\n
\nhttp:\/\/info.sio2.be\/kpz\/
\nhttp:\/\/claroline.patrickplante.org\/kompozer\/<\/p>\n","protected":false},"excerpt":{"rendered":"