Présentation de DS-EditeurHTML

La nouvelle version 4.x est un éditeur multi-fenêtrage. Le nombre de fenêtres est limité à la taille de la mémoire disponible.
Meilleur éditeur HTML WYSIWYG français gratuit

DS-EditeurHTML est un éditeur Web Internet au format DHTML " WYSIWYG ".(Dynamic HTML)
Les fichiers crées sont compatibles avec IE, Mozilla FireFox, Opéra, Netscape, etc.... (IE Version 6 ou 7 conseillée)

DS-EditeurHTML permet  :

• d'insérer des liens, tableaux, images, lignes horizontales, cibles ou signets, vidéo etc.
• de déplacer les images en 2nd plan
• de redimensionner les images
• de visualiser le résultat avec une visionneuse Internet ou en mode texte.
• d'insérer des fichiers au format HTML ou TXT dans le document en cours
• de copier ou coller les informations provenant d'autres documents.
• de retouver les cibles ou signet sur la page
• d'insérer un texte défilant paramétrable
• de visualiser les images et de créer automatiquement des vignettes - Format BMP-JPEG-GIF 256 Couleurs
• de retrouver le code couleur HTML
• d'importer des fichier au format RTF
• d'exporter le code html au format RTF
• de retrouver les adresses Internet des fichier .URL
• de visualiser les vidéos et fichiers multimédias
• de créer des zone cliquables sur image
• de créer des pages Internet avec des cadres (Frames)
• de choisir les couleurs des barres de défilement (IE Version 6 conseillée)
• de créer des boutons avec lien JavaScript ou VbScript
• de créer des textes avec couleurs dégradées
• de créer automatiquement des albums photos avec vignettes au format JPEG
• de créer et modifier les documents HTML en mode texte
• de créer et d'insérer des scripts en JavaSript ou VbScript
• de choisir le type de codage HTML
• de modifier ou créer les étiquettes META du document
• de créer des textes 3D afin d'améliorer la présentation de vos pages HTML
• d'insérer une animation de type Flash
• d'insérer des images au format PNG
• de créer des bannières et boutons Web 
• de créer des scripts et menus avec un nouvel assistant javascript v1.1
• de créer des tableaux HTML avec un assistant
• d'ouvir un document à partir d'une adresse Internet
• d'insérer des scripts ou des fichiers de style en mode éditeur
• d'insérer des boutons de style CSS
• de créer des fichiers auto exécutables à partir de documents HTM
• de créer automatiquement des fichiers de style .CSS
• d'insérer automatiquement des images survolées (RollOver) 
• de créer des effets de transition sur les pages
• d'insérer des objets ActiveX multimédia
• de créer des diaporamas avec défilement automatique en javascript
• de créer et d'insérer des calendriers au format HTML ou Texte 
• DS-EditeurHTML possède des quantités d'assistants pour faciliter la création de vos pages Web
• DS-Editeur HTML possède un editeur PHP 
• ...

Assistant de création de boutons et bannières :Cet assistant permet de créer des boutons ou bannières Web. A utiliser pour créer des boutons 3D pour RollOver. Les boutons ou bannières sont sauvegardées au format BMP-JPEG ou GIF 256 couleurs.

Assistant de création de bannières  : Cet assistant permet de créer des bannières afin de mettre en valeur vos entêtes de pages html. Les bannières sont sauvegardées au format BMP-JPEG ou GIF 256 couleurs.

Assistant Javascript : Cet assistant permet de créer automatiquement des scripts au format CSS que vous pouvez insérer avec le mode texte.
Les différents scripts assistés :

• Barres de défilement en couleurs
• Barres d'état avec texte défilant
• Mouse Over sur image
• Création de menus verticaux
• Protection de pages Web par mot de passe
• Texte déroulant dans une boîte de texte
• Message animé de bienvenue
• Texte rebondissant sur une page
• Roll Over sur les barres de défilement
• Création de fenêtres Pop Up
• Ajouter un site en favoris
• Crypter son adresse E-Mail
• Créer des balises META
• Créer des fichiers de style .CSS 
• Créer des effets de transition entre page

Assistant de création de Calendrier HTML : Cet assistant permet de créer des calendriers au frmat HTML ou texte sous foreme de tableaux. Le code généré doit être sauvegardé puis inséré en mode editeur à partir de DS-EditeurHTML

Assistant de formatage du code HTML   :Cet assistant permet de formater le code source du document HTML avec plusieurs options d'identation. Le but étant de rendre plus lisible le code source.

Assistant d’extraction et de test des liens URL  :Cet assistant permet d’extraire tous les liens contenus dans un fichier HTML. La liste des liens peut être enregistrée au format HTML dans un fichier au format HTML. Les liens commençant par http:// peuvent être testés en ligne.

Assistant de création de fichiers autoexécutables : Cet assistant permet de créer un fichier autoexécutable (.exe) à partir de vos documents HTML. Cette première version ne gère pas les sous dossiers. Le fichier exécutable est une visionneuse qui peut contenir tout votre site en un seul fichier.

Assistant de conversion de format HTML vers Texte : Cet assistant permet de filtrer les balises d’un document HTML afin de transformer celui ci au format texte.

Préférences: Permet de personnaliser et d’affecter les options de paramétrage de DS-EditeurHTML.

• Chemin de Internet Explore, Netscape ou autre navigateur.
• Couleurs et police de l’éditeur mode texte (Code source)
• Chemin des logiciels de transfert FTP et traitement d’images
• Affichage de l'explorateur de fichiers, Affichages, etc.
• Paramétrage des barres d'outils - Visibilité et alignement

Quitter: Quitte DS-EditeurHTMLRetour au sommaire

Annuler: Annule la dernière commande.

Rétablir: Permet de rétablir la dernière commande. A utiliser lors de suppression accidentelle. Etc.

Couper: Coupe la sélection.

Copier: Copie la sélection dans le presse-papier.

Coller: Colle la sélection dans le presse-papier.

Tout sélectionner: Sélectionne tous les éléments de la page.

Rechercher texte sur la page : Permet de rechercher une chaîne de caractères sur la page en cours.

Grille aimantée: Permet d'utilser la grille non visible pour aligner automatiquement les éléments sur la page.

Pas de la grille: Permet de régler la pas de la grille en pixels.

Placer le curseur à la fin du document: Le curseur est positionné directment en fin de page.Retour au sommaire

Menu Affichage

Bordures: Affiche les bordures des éléments telles que les zone de texte flottantes.

Détails: Affiche les détails du document.

Arbre de création : Affiche l'arbre de création de la page Internet. Vous pouvez modifier le conteneu des élément HTML à l'aide d'un double clic sur l'élément désiré.

Code HTML sélectionné : Affiche le code HTML sélectionné dans une boîte de texte.

Mode aperçu Internet : Permet de visualiser rapidement le document HTML en mode aperçu. Le document ne peut être modifié dans ce contexte. A la différence avec le menu < Aperçu Internet > du menu fichier, il n'existe pas de bouton <Fenêtre précédente ou suivante>. Seule le document en cours peut être visualisé.

Boîte à outils-Explorateur de fichiers/Propriétés balises TAG  : Permet d'afficher ou de cacher l'explorateur de fichiers HTML. Un double clic sur un des fichiers de la liste permet d'ouvrir le document HTML dans une nouvelle fenêtre. Le second onglet permet d'afficher et de modifier les propriétés des balise TAG du document.

Barres d'outils (Visibilite) : Permet d'afficher ou de cacher les barres d'outils.

Barres d'outils (Alignement) : Permet d'aligner les barres d'outils en haut, bas, gauche, droit de la fenêtre.

Nota : La sauvegarde du paramétrage de l'affichage des barres d'outils se fait dans le menu <Fichier><Préférences>.
Le menu <Affichage> <Barres d'outils> permet de modifier temporairement l'affichage et la configuration des barres d'outils.

Afficher la boîte de modification du code HTML : Cette option permet d’afficher la boîte de texte du code HTML sélectionné qui permet de modifier les propriétés des éléments HTML comme sous le mode texte. Avec cette option on pourra modifier les propriétés des cellules d’un tableau sans passer par le mode texte.

Afficher dans Internet Exploreur : Affiche le document HTML en cours dans IE.Afficher dans NetScape : Affiche le document HTML en cours dans NetScape.

Afficher dans Opéra : Affiche le document HTML en cours dans Opéra.

Afficher dans Mozilla Firefox : Affiche le document HTML en cours dans Mozilla Firefox.Autre Navigateur: Affiche le document HTML en cours dans un autre navigateur. (Paramétrage à effecter dans le menu <Préférences>.

Nota : VisuHTM est un navigateur multifenêtrage gratuit, plus rapide que IE, et disponible sur mon site Internet.

Retour au sommaire

Image : Permet soit d'insérer une nouvelle image, soit de modifier les propriétés de l'image sélectionnée. Possibilité de voir les fichiers GIF animés.

Image survolée : Permet  d’insérer une image avec un effet de RollOver.
Cette option permet de réaliser un effet de bouton enfoncé par exemple. La condition est que les 2 images soient de même taille. La seconde image est affichée au survol de la souris.

Lien : Permet soit d'insérer un nouveau lien, soit de modifier les propriétés du lien sélectionné. Pour créer un lien, il faut sélectionner un texte et cliquer soit sur le bouton < Insérer un lien > (Barre outils de gauche) soit menu <Insérer un lien>. Ce menu ne permet pas de modifier ou de visualiser les propriétés d'un lien à partir d'une image. Choisir l'option <Lien / Propriétés du lien sur image> ci-dessous.

Image / Propriétés de l'image sélectionnée  : Permet soit d'insérer une nouvelle image, soit de modifier les propriétés de l'image sélectionnée.

Lien / Propriétés du lien sur image : Permet soit d'insérer un nouveau lien, soit de modifier les propriétés du lien sélectionné sur une image. Pour créer un lien sur une image, il faut sélectionner un texte et cliquer soit sur le bouton < Insérer un lien > (Barre outils de gauche) soit menu <Insérer un lien>.

Image / Propriétés de l'image sélectionnée :  Permet soit d'insérer une nouvelle image, soit de modifier les propriétés de l'image séletionnée.

Lien / Propriétés du lien sélectionné : Permet soit d'insérer un nouveau lien, soit de modifier les propriétés du lien sélectionné. Pour créer un lien, il faut sélectionner un texte et cliquer soit sur le bouton < Insérer un lien > (Barre outils de gauche) soit menu <Insérer un lien>.

Il est conseillé de rechercher le chemin d'un fichier avant de créer un lien sur un fichier.

Ligne horizontale : Insère une ligne horizontale paramétrable.

Fichier HTML ou TXT : Insère un fichier HTML ou TXT à la position du curseur.

Ligne de texte HTML: Insère une ligne de texte au format Normal HTML.

Cible / Signet sur la page : Une cible est une sorte d'étiquette ou Label qui permet de créer un saut vers cette cible à partir d'un lien créé sur la même page. Vous pouvez copier dans le presse papier le nom de la cible crée afin de l'insérer dans un lien.
Le lien crée vers la cible doit être précédé du symbole # et choisir <Autre> dans la liste déroulante du type de lien.

Vidéo / Multimédia : Insère une vidéo ou affiche les propriétés du fichier multimédia. Les format reconnus sont AVI et MPEG pour les vidéos.

Texte Défilant : Insère un texte défilant.

Texte avec couleurs dégradéés : Insére un texte avec couleurs dégradées à la position du curseur.

Zone de texte flotant : Insère une zone de texte flotant. Ce texte passe automatiquement au 2nd Plan et peut être déplcé sur la page.

Objet Flash : Insère une animation de type Flash. L'animation peut être visiualisée dans le fenêtre de sélection.

Saut de ligne : Insère soit un saut de ligne normal, ou un saut de ligne avec réinitailaisation des marges droite ou gauche.

Couche : Insère une couche de type "LAYER".

Saut  de page : Insère un saut de page à la position du curseur.

Date et Heure : Insère la date ou l'heure suivant un des 5 formats proposés.

Caractères spéciaux : Insère un caractère spécial à la position du curseur.Musique de fond / Fichier Multimédia : Insère une musique de fond ou une vidéo. La balise utilisée est la balise EMBED. Cette balise n’a pas besoin de balise de fin.

Bouton : Création d'un bouton. Un double clic sur le bouton permet de modifier le nom. Un lien JavaScript avec un événement "onclick" peut être automatiquement crée.

Bouton <Parcourir...> : Création d'un bouton Parcourir à la recherche d'un fichier. Un double clic sur le bouton permet de modifier le nom.Bouton de style CSS : Crée et insère un bouton CSS. Attention un numéro de bouton est affecté à chaque création. Il ne doit pas y avoir de boutons de mêmes numéros sur un même document.

Case à cocher: Insère une case à cocher.

Boîte de texte : Insère une boîte de texte avec une seule ligne.

Boîte detexte multilignes : Insère une boîte de texte avec possiblité d'insérer plusieurs lignes de texte.

Liste déroulante : Insère une liste déroulante avec options paramétrables. Le mode texte permet de modifier le texte des options.

Formulaire FORM   : Insère un objet formulaire.

Zone de groupe : Insère une zone de groupe.

Insère des objets ActiveX multimédia de type :

• Lecteur Windows Média Player vidéo AVI-MPEG
• Lecteur QuickTime vidéo MOV
• Objet Flash Animation Flash Macromédia
• Lecteur Windows Média Player audio MIDI

Supprimer le lien sélectionné : Supprime le lien sélectionné positionné sur le curseur.

Menu Scripts /  Evénements

Insérer un script dans le BODY – Début du document : Insère un script dans le corps (BODY) au début du document. Il faut s’assurer que la premiere chaîne de caractères soit <SCRIPT> et la dernière soit </SCRIPT>Insérer un fichier de style CSS dans le body – Début du document : Insère un fichier de style CSS dans le corps (BODY) au début du document. Les balises <STYLE> en début de fichier de style et </STYLE> en fin de fichier sont automatiquement ajoutées.Insérer un script dans le BODY – Fin du document : Insère un script dans le corps (BODY) en fin du document. Il faut s’assurer que la premiere chaîne de caractères soit <SCRIPT> et la dernière soit </SCRIPT>Insérer un fichier de style CSS dans le body – Fin du document : Insère un fichier de style CSS dans le corps (BODY) en fin du document. Les balises <STYLE> en début de fichier de style et </STYLE> en fin de fichier sont automatiquement ajoutées.Evénement dans le BODY : Permet l’appel d’un script dans la ligne de déclaration du BODY.

Les événements pouvant être appelés : Onload, Onunload, Onblur, Onfocus, Onresize, Onscroll.Appel d’un fichier de style .CSS : Permet d’insérer dans le corps du document (BODY) l’appel d’un fichier de styleCSS.

Résultat :

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

Retour au sommaire

---

Menu Format du texte

Permet d'affecter automatiquement un type de texte dans l'éditeur.

Les différénts formats: Normal - Formaté - Adresse - En-tête - Liste numérotée - Liste à puce - Paragraphe - Etc

Retour au sommaire

---

Menu Tableau

Insérer un tableau: Insère un tableau à la position du curseur. Le nombre de lignes, de colonnes et les couleurs sont paramétrables. La modification du nombre de lignes ou de colonnes se fera avec la touche droite de la souris lorsque le curseur se trouve sur le tableau.

Insérer: Insère Ligne - Colonne - Cellules.

Supprimer: Supprime Ligne - Colonne - Cellules.

Fusionner les cellules: Fusionne les cellules sélectionnée en une seule cellule. Pour que le menu soit actif il faut qu'au moins deux cellules soient sélectionnnées.

Fractionner les cellules: Fractionne la cellule sélectionnée en 2 cellules

Propriétés du tableau : Affiche les propriétés du tableau sélectionné

Propriétés de la cellule : Affiche les propriétés de la cellule du tableau sélectionné


Voir Touche bouton droit de la souris.

Retour au sommaire

---

Menu 2nd Plan

Pour faire passer un élément au 2nd plan, il faut sélectionner un élément du premier plan puis touche droite de la souris - Menu < Passer au 2nd Plan >.

Le 2nd Plan permet de déplacer et de redimensionner les éléments sur la page. (tableaux , images, etc.)

Position absolue/Annuler la dernière postion: Place l'élément au second plan ou en position précédente.

Mettre au premier plan: Force l'élément sélectionné à revenir au premier plan.

Envoyer à l'arrière plan: Force l'élément sélectionné sur le 2nd plan.

Avancer d'un plan: Si 2 éléments sont actifs au second plan, cette option permet d'intervenir au niveau des couches de visibilité. Cas des images supperposées, etc.

Reculer d'un plan: Permet lors de la supperposition d'éléments du 2nd plan d'intervertir le niveau de visibilité de l'élement sélectionné.

Mettre au dessus du texte: Si l'élément est au second plan, le texte à l'arrière plan ne sera pas visible.

Mettre au dessous du texte: Le texte d'arrière plan sera visible. L'élément au 2nd plan sera considéré comme transparent.

Vérouiller la position: Bloque l'élément sélectionné dans sa position. Il ne peut plus être déplacé.

Retour au sommaire

---

Menu Utilitaires

Rechercher le chemin d'un fichier: Cette option permet de copier dans le presse-papier le chemin complet d'un fichier. Cette option est à utiliser avant de créer un lien sur un fichier. Il suffit ensuite de coller le résultat de la recherche dans le lien. (file://)

Retrouver les cibles sur la page: Permet de retrouver et de copier dans le presse papier le nom d'une de cible présente sur la page. A utiliser avant de créer un lien vers une cible. (Autre)

Rechercher l'adresse Internet d'un fichier URL: Cette option permet de copier dans le presse-papier l'adresse d'un fichier .URL afin de créer un lien vers un site Internet. Il suffir de coller le résultat dans la fenêtre de création de liens. (http://)Codes couleurs HTML : Permet de retrouver les codes couleurs HTML. Le code peut être copié dans le presse papier.Voir fichiers Vidéo / Multimédia  : Permet de rechercher et d'ouvrir les fichiers multimédia.Voir fichier Images / Création de Vignettes : Permet de parcourir les dossiers pour retrouver et visualiser les images. Les images peuvent être enregistrées au format JPG avec un taux de compression paramétrable ou au format GIF 256 couleurs. Une vignette peut être crée à partir du fichier image.Convertisseur de format d'image: Permet de convertir les format d'image. BMP > GIF - GIF > BMP - JPEG > BMP - BMP > JPEGCréation de zones cliquables sur image  : Cet utilitaire permet de créer des zones cliquables (Avec lien) sur une partie d’une image.

Principe de création de zones :

• Ouvrir un fichier image au format JPEG ou GIF
• Sélectionner le type de zone que ous désirez créer (Polygone - Rectangle - Cercle)
• Cliquez sur le bouton <Accepter>
• Affecter un lien Internet pour cette zone
• Créer le code HTML
• Sauvegarder le fichier au format TXT ou HTML
• Sous DS-EditeurHTML insérez le fichier texte ou HTML à la position désirée. Menu <Insertion d’un fichier>

Logiciel de transfert FTP : Permet de lancer votre logiciel de Transfert FTP à partir de DS-EditeurHTML.
Nota : DS-FTP est un logiciel de transfert FTP gratuit qui permet de télécharger vos document Web sur votre site.
Ce logiciel est disponible sur mon site Internet.Logiciel de traitement d'images : Permet de lancer votre logiciel de traitement d'images à partir de DS-EditeurHTML.
Nota : DS-Image est un logiciel de traitement d'image gratuit qui permet de créer ou de modifier les images disponible sur mon site Internet.
Ouvre et Enregistre les images au format courant BMP-JPEG-GIF. Possède quelques filtres et effets spéciaux. Etc...Logiciel de Carnet d'adresses : Permet de lancer votre logiciel de Carnet d'adresses à partir de DS-EditeurHTML.
A défaut le logiciel de Carnet d'adresses est le carnet d'adresses de Outlook : C:\Program Files\Outlook Express\wab.exeRetour au sommaire

---

Menu Aide

A Propos: Affiche le numéro de version du logiciel

Aide : Affiche cette aideIndex HTML : Affiche un index sur le code HTML

Aide en ligne : Nécessite une connexion Internet. Se connecte sur mon site Internet d’aide à la création d’un site Internet :

 

http://www.serdef.fr/CreerSite/Intro_CreerSiteWeb.htm

Retour au sommaire

---

Conseils de création de site perso et de pages Web

1 – Création d’un site  Vous Pouvez consulter<Créer gratuitement un site Web>

Avant de vous lancer dans la création de pages Internet, ou d’un site Web perso, un moment de réflexion s’impose.

Les conseils :

· Avant toute chose, définissez avec précision le thème traité sur votre site, le contenu des pages html, les photos ou images, les fichiers multimédias, le contenu de la page d’acceuil, d’introduction, de navigation, les liens, etc.

· Important : La première page affichée doit être relativement simple et doit se charger rapidement. Evitez les photos de grande résolution, les animations lourdes. Si votre première page est longue à se charger, les visiteurs risquent rapidement de se lasser er d’abandonner la consultation de votre site perso.

· Définissez la structure arborescente de vos dossiers dans laquelle vos allez créer vos pages HTML. Il faut que toutes vos pages HTML et les fichiers constituants vos pages soient sur un même lecteur et dans des sous dossiers du dossier principal.

Exemple :

Dossier principal :
C:\Mes Documents\Site Perso

Sous Dossiers :
C:\Mes Documents\Site Perso\Images
C:\Mes Documents\Site Perso\Pages
C:\Mes Documents\Site Perso\Animations
C:\Mes Documents\Site Perso\Multimédia
C:\Mes Documents\Site Perso\etc.

Le bon fonctionnement de votre site dépend de cette organisation.
Vous devrez créer une structure identique, avec les mêmes sous dossiers sur le serveur de votre Fournisseur d’Accès Internet (FAI)

Une solution simple est  de créer un seul dossier dans lequel seront tous vos fichiers.

Une fois que votre structure est définie, que vos fichiers sont correctement placés dans les sous dossiers vous pouvez commencer à créer vos pages HTML.2 – Conseils d’utilisation de DS-EditeurHTML

Utilisation de pages avec cadres (FRAMES)

Si vous désirez utiliser une page avec des cadres, il faut définir avant toute chose le nom des cadres et les noms des fichiers HTML qui seront lancés au lancement de votre page.

Exemple :
Création d’une page avec 3 cadres :  Nom du fichier Index.html ( Ce nom est souvent demandé par votre FAIL en tant que page principale et de référencement de site.)

Cadre 1 : Nom : Titre - Fichier : Titre.html
Cadre 2 : Nom : Sommaire - Fichier : Sommaire.html
Cadre 3 : Nom : Principal - Fichier : Acceuil.html

Si vous désirez que les liens situés dans la page Sommaire.html soient redirigés vers le cadre 3 Principal, il faut indiquer dans les propriétés de la page Sommaire.html que le cadre destination est Principal.3 – Publication de vos pages et fichiers sur le serveur

Avant toute opération créer les sous dossiers correspondant à votre arborescence de votre disque dur.
Envoyer vos fichiers en respectant la structure arborescente identique. Le fichier HTML principal (Index.html) doit se trouver sur la racine du serveur.

DS-FTP est un logiciel de transfert FTP freeware qui permet de réaliser toutes ces opérations. ( A voir sur mon site Internet)Retour au sommaire

---

Auteur

DEFARGE Serge
20, Rue Elsa Triolet
03410 DOMERAT

TEL 04.70.03.25.40
FAX 04.70.03.25.40

• E-Mail :  serdef@tele2.fr
• Url : http://www.serdef.fr
• Url :  http://home.tele2.fr/serdef  
• Url :http://serge.defarge.free.fr
• Aide en ligne : http://www.serdef.fr/CreerSite/Intro_CreerSiteWeb.htm

Merci d'utiliser DS-EditeurHTML.

Retour au sommaire

---