PageEdit un éditeur de page WYSIWYG en temps réel [Chrome]

Les personnes qui utilisent Chrome ou Firefox à des fins de développement Web savent qu'il existe de très bons outils disponibles pour chaque navigateur qui facilitent grandement le développement de pages. De l'extension Firebug de Firefox aux outils de développement Web intégrés de Chrome, les développeurs peuvent éditer rapidement et facilement le code qu'ils voient sur une page et afficher instantanément les modifications, ce qui leur permet de déterminer ce qui fonctionne ou non..

Cependant, tout au long du processus, vous devrez toujours vous familiariser avec le code HTML, CSS et Javascript, ce qui peut ne pas être le meilleur choix pour les personnes qui ne connaissent pas grand chose au code. Heureusement, il existe une extension pour Chrome qui vous permet de modifier les pages de la manière WYSIWYG..

Installation

Pour installer cette extension, cliquez simplement sur le lien dans Chrome pour aller à la page de téléchargement de l'extension. Cliquez à nouveau et ça va installer en quelques secondes. Vous pouvez activer la nouvelle extension via son bouton en haut à droite.

Caractéristiques principales

En cliquant sur le bouton de l'extension, vous pourrez modifier la page sur laquelle vous êtes actuellement. Vous devrez également cliquer sur le bouton pour chaque autre page que vous souhaitez modifier, même si elle se trouve dans un onglet différent. Après avoir cliqué sur le bouton, de nombreux outils vous permettront de faire beaucoup de choses avec le contenu de la page. Vous pouvez non seulement modifier la mise en forme, mais également ce que les pages disent elles-mêmes. Il suffit de cliquer et de commencer à taper comme s'il s'agissait de votre traitement de texte.

Actions du menu contextuel

Si vous faites un clic droit sur un élément, vous obtenez une liste de différentes actions que vous pouvez effectuer avec tout ce que vous avez cliqué. Pour le texte, vous obtenez des options comme Coller, Modifier Div, Supprimer Div, et Propriétés de la liste à puces. Si vous cliquez sur un lien, vous verrez également des options pour le modifier ou le supprimer. Bien sûr, vous pouvez aussi toujours ajouter un lien en utilisant le bouton approprié dans la barre d’outils en haut de la page..

Propriétés de l'image

En cliquant sur une image, vous pouvez consulter ses propriétés, notamment l’adresse URL, le texte alternatif, la largeur et la hauteur, etc., qui sont également modifiables. Vous pouvez même éditer des informations plus avancées, telles que l'URL du lien de l'image et diverses autres informations sur lesquelles les développeurs Web pourraient en savoir plus..

Enregistrer vos modifications

Enfin, lorsque vous avez terminé toutes les modifications, vous pouvez les regarder jusqu'à ce qu'il soit temps de fermer votre navigateur ou vous pouvez enregistrer la page entière, y compris vos modifications, dans un fichier HTML. Cliquez simplement sur le bouton Enregistrer. Une fenêtre apparaît avec un lien que vous pouvez cliquer avec le bouton droit de la souris et choisir. “Enregistrer le lien sous“. La meilleure partie à ce sujet est que cela enregistre la source, vous avez donc toujours cela au cas où vous en auriez besoin.

Conclusion

PageEdit est une extension très soignée qui vous permet de modifier des pages de manière amusante et qui ne suit pas non plus les outils de développement traditionnels. J'espère que vous pourrez vous amuser plus avec cet outil qu'avec tout autre outil pour créer des pages Web. Avez-vous besoin d'une idée rapide? Essayez de choisir une page, modifiez-la à votre guise, enregistrez-la sur votre disque dur, puis indiquez à votre navigateur de l'utiliser comme page d'accueil. Par exemple, vous pouvez utiliser la page de destination par défaut de Google et remplacer le logo par une image personnalisée..

Si vous voulez apprendre un peu de code, essayez notre guide sur XHTML.!

Pensez-vous que PageEdit est une bonne idée? Voulez-vous l'utiliser par rapport aux outils de développement traditionnels? Faites le nous savoir dans les commentaires!

En savoir plus sur: Google Chrome, HTML, Web Design, Développement Web, Outils pour les webmasters, Éditeurs WYSIWYG.