Visuele webredacteur. De belangrijkste elementen van de FrontPage-interface. Webdesign begrijpen

Inspectie door die: Identificatie van pc's in hekwerk. Het adresseringsprincipe.

HOOFDSTUK 3. BASISINFORMATIE WEBONTWERP

3.1. Webdesign begrijpen

Het World Wide Web (WWW) is momenteel een populaire en handige service op internet.
Webpagina's en websites worden veel gebruikt op het World Wide Web.

Voor het maken van websites wordt de hypertext markup language HTML (HyperText Markup Language) gebruikt.
Website bouwmethoden en tools waarmee gebouwd wordt zijn zeer divers en kunnen worden ingedeeld volgens verschillende criteria. De belangrijkste daarvan zijn de mate van automatisering van het site-ontwerp en de methodologie van het ontwikkelingsproces.

Afhankelijk van de mate van automatisering van website-ontwerp, moeten twee hoofdmethoden worden onderscheiden: visueel en programmeerbaar.

De visuele methode stelt je in staat om een ​​website te ontwerpen met een hoge mate van automatisering. Deze methode is ontstaan ​​vanuit de behoefte om de arbeidsintensiteit van het maken van een website te verminderen en de tijd die nodig is om het werk te voltooien te verkorten.

Het belangrijkste principe van de visuele methode is het principe "What I see is what I get" - WYSIWYG (van de Engelse zin "What you see is what you get"). Wanneer u sites maakt met behulp van de visuele methode, moet u tools selecteren - visuele ontwerpeditors.

De bekendste van deze editors zijn: Microsoft FrontPage, DreamWeaver (Macromedia), NamoWEbEditor, Adobe GoLive, enz. Bij het maken van een website bieden deze editors de gebruiker de mogelijkheid om te werken zonder een directe verbinding met internet. In de toekomst kan de gemaakte website op internet worden geplaatst.

Wanneer u websites maakt met deze editors, wordt voor elke webpagina die u maakt automatisch HTML-code gegenereerd, wat een set HTML-taalconstructies is.

Voor het bouwen van websites kan gebruik worden gemaakt van content management systemen CMS (Content Management System), die worden geleverd door een aantal speciale betaalde of gratis diensten. CMS-systemen zijn een soort constructeurs waarmee u een site kunt maken en in de toekomst kunt onderhouden. Bij het maken van de structuur en navigatie van een site in een CMS is diepgaande kennis van de HTML-taal meestal niet vereist. Voorbeelden van CMS-systemen zijn te vinden op Narod.ru en Boom.ru.

U kunt geen echte webmaster worden zonder de basisconstructies van de HTML-taal te kennen, en voor professioneel werk moet u de HTML-taal beheersen. Het bouwen van een website in HTML wordt vaak een programmeerbare of handmatige ontwerpmethode genoemd.

Om direct met HTML-code te werken, kunnen speciale ontwikkelingstools worden gebruikt, zoals Hotdog, HomeSite, enz. Deze programma's maken het voor een websiteontwikkelaar gemakkelijker om elementaire HTML-constructies in te voeren en te bewerken.

U kunt elementaire HTML-constructies invoeren in Kladblok. Over deze manier van werken komen we later nog te spreken.

Naast de HTML-opmaaktaal voor hypertext-documenten worden andere programmeertalen zoals Java Script en PHP gebruikt om websites te maken.

Scripts worden veel gebruikt in webdesign. Ze worden in de regel gebruikt om afzonderlijke elementen van een webpagina te maken, bijvoorbeeld vervolgkeuzelijsten, dynamische menu's, klokken, kalenders, enz.

De webontwerptechniek omvat de implementatie van website-ontwerp in verschillende hoofdfasen:

1. Ontwikkeling van het thema van de site, zijn doelen en doelstellingen.
2. Logisch ontwerp, dat omvat: de vorming van de structuur van de site (lineair, hiërarchisch), de naam van de secties, de relatie daartussen, de voorbereiding van informatie die op elke webpagina van de site wordt geplaatst.
3. Directe creatie van een site, inclusief de definitie van ontwerpmethoden en de keuze van tools ervoor.
Methoden en tools voor het bouwen van websites zijn zeer divers, u kunt bijvoorbeeld sites maken die dynamisch en statisch zijn.

De dynamische site bevat informatie die door de gebruiker kan worden gewijzigd of uit databases kan worden geladen. Dergelijke databases bevatten meestal informatie die voortdurend moet worden bijgewerkt. Zo wordt de website van een webwinkel altijd bijgewerkt met informatie over aanvullende producten en veranderende prijzen.

Een statische site wordt niet in realtime bijgewerkt.

Interactieve sites zijn wijdverbreid. Op dergelijke sites worden webpagina's gegenereerd door serverprogramma's. Informatie wordt meestal uit databases gehaald. Heel vaak wordt differentiatie van toegang tot de site gebruikt, waarbij sitebezoekers verschillende toegangsrechten hebben tot informatie die erop staat. Dergelijke sites kunnen verschillende formulieren bevatten om in te vullen.

Bij het maken van sites kunnen kant-en-klare sjablonen worden gebruikt of de constructie ervan kan worden uitgevoerd in speciale softwareomgevingen die voornamelijk op grafische afbeeldingen zijn gebouwd, enz.

?
1. Wat zijn de twee belangrijkste webontwerptechnieken die u kent?
2. Welke tools kunnen worden gebruikt om websites te maken?
3. Wat is het verschil tussen visuele en programmeerbare webdesignmethoden?
4. Waar worden scripts voor gebruikt?
5. Welke stappen moeten worden gevolgd bij het ontwerpen van een website?


3.2. Basis HTML-concepten. De structuur van een HTML-document begrijpen

3.2.1. HTML-documentstructuur

Een HTML-document is een tekstbestand zonder opmaak dat HTML-constructies bevat. Daarom kan dit document worden gemaakt in gewone teksteditors, zoals Kladblok, en vervolgens de gegenereerde bestanden opslaan met de extensie .htm of .html.

De essentie van de HTML-taal ligt in de opmaak van tekst met behulp van controletekens - tags die tussen punthaken staan.

De meeste tags zijn gepaard, d.w.z. een openingselement hebben<>en een afdekelement.

Daartussen bevinden zich de codes die de browser herkent.

HTML-document moet altijd beginnen met een afscheurtag en eindigen met een afsluiting.

Binnen zijn: kopblok en lichaam

, die teksten, afbeeldingen, audio- en videofragmenten bevat.
De belangrijkste tags die nodig zijn om een ​​HTML-document met een eenvoudige structuur te maken, worden weergegeven in de tabel:

De tag wordt in het titelblok geplaatst tekst... De tekst die in deze tag is gespecificeerd, wordt weergegeven in de kop van het browservenster.
U kunt opmerkingen in een HTML-document plaatsen die niet door de browser worden weergegeven:.

Voorbeeld 1. Maak een eenvoudig HTML-document in Kladblok. Sla het gemaakte prim1.htm-bestand op. Open het gemaakte document in een browser.
De structuur van een dergelijk document ziet er als volgt uit:



rubriek


Tekst op de eerste pagina



Het resultaat van het weergeven van een HTML-document in een browser wordt getoond in Fig. 3.1.

3.2.2. HTML-opmaak

HTML-tags kunnen attributen bevatten die parameters of eigenschappen zijn van documentopmaakelementen.
De regel voor het schrijven van attributen in een tag is als volgt:

<тег атрибут1=значение атрибут2=значение …>

Label bepaalt het uiterlijk van de hele webpagina, terwijl de afzonderlijke elementen, zoals kopteksten, tabellen, hun eigen speciale ontwerp kunnen hebben.
De keuze van de kleur van de pagina, de achtergrondafbeelding en de kleur van de tekst erop is erg belangrijk, aangezien de visuele perceptie van de hele site ervan afhangt.
De paginakleur wordt ingesteld door het attribuut bgcolor en de tekstkleur wordt ingesteld door tekst. De attribuutwaarde is een kleur die wordt gespecificeerd door de naam in het Engels of de hexadecimale code.

Voorbeeld 5. In dit voorbeeld wordt de paginakleur op twee manieren op blauw ingesteld:


of

Het resultaat van het weergeven van een HTML-document in een browser wordt getoond in Fig. 3.2.

?
1.Hoe maak je een HTML-document aan?
2. Waar zijn HTML-tags en attributen voor?

Opdrachten

1. Bekijk de tekst van het HTML-document:

a) Welke kleur van de achtergrond en tekst zal op de webpagina zijn?
b) Worden de koppen op een webpagina kleiner of groter weergegeven?

3.3. Werken met de FrontPage Visual Design Editor

3.3.1. De belangrijkste elementen van de FrontPage-interface

Microsoft FrontPage Editor behoort tot visuele webdesign-editors. Wanneer u met de FrontPage-webeditor werkt, kunt u het doen zonder kennis van de opmaaktaal voor HTML-hypertextdocumenten. De webpagina wordt eenvoudig op het scherm opgebouwd en in .html-indeling opgeslagen. De acties die in dit geval worden uitgevoerd, zijn vergelijkbaar met werken in de teksteditor Word.

De interface van de FrontPage-editor is zo eenvoudig dat de gebruiker de basistechnieken snel onder de knie kan krijgen. Na het starten van FrontPage wordt een venster geopend, waarvan de belangrijkste elementen zijn weergegeven in Fig. 3.3.

De panelen Standaard, Opmaak en Tekening zijn qua functionaliteit vergelijkbaar met die in de Word-teksteditor.

De weergave van de werkruimte is afhankelijk van de geselecteerde bedrijfsmodus. In de ontwerpmodus wordt een webpagina opgebouwd uit tekstblokken en grafische objecten. Tegelijkertijd wordt de HTML-code automatisch gegenereerd, die kan worden bekeken en bewerkt in de codemodus. Modus
Split (Figuur 3.4) is een combinatie van beide. In de weergavemodus kunt u de gemaakte pagina's bekijken.

Met behulp van het menu Beeld kunt u ook andere modi selecteren die handig zijn bij het ontwerpen van een site. De paginamodus is bedoeld voor het maken en bewerken van webpagina's. In de modus Mappen wordt de sitemapstructuur bekeken en worden bestandsbewerkingen uitgevoerd. Houd er rekening mee dat eventuele wijzigingen aan de bestanden en mappen van de site vanuit de ontwikkelomgeving moeten worden gemaakt, omdat u hiermee wijzigingen in de structuur van de onderling verbonden webpagina's van de site kunt volgen. In de modus Overgangen wordt de structuur van koppelingen tussen pagina's weergegeven en kunt u deze wijzigen. De Hyperlink-modus geeft visueel het systeem van links weer, biedt hun controle en bewerking.

3.3.2. Een website maken in FrontPage Editor

Laten we eens kijken naar de fasen en technieken van het werken in de FrontPage-editor aan de hand van het voorbeeld van de ontwikkeling van de website "Belaruskiya Pismennіki" (zie Fig. 3.3).
Om deze website te maken, is het noodzakelijk om de structuur en de beoogde inhoud te begrijpen, d.w.z. een websiteproject voorbereiden. Voor de duidelijkheid zullen we een fragment van de sitestructuur weergeven in de vorm van een schema met twee niveaus (Fig. 3.5).

Rijst. 3.5.
De eerste pagina (bovenste niveau) bevat de sitetitel "Wit-Russische poëzie", teksthyperlinks en hyperlinks met afbeeldingen van schrijvers en dichters, zodat u de pagina's van het tweede niveau kunt openen.

Op het tweede niveau plaatsen we drie pagina's met dezelfde structuur, die de volgende informatie bevatten, zoals weergegeven in figuur 3.6.

Rijst. 3.6.
Na het bekijken van een pagina van het tweede niveau, zullen we onderaan hyperlinks plaatsen om terug te keren naar de hoofd (eerste) pagina van de site en twee hyperlinks om vooruit en achteruit door de site te gaan.

Bij het ontwerpen van de site "Belaruskiya Pismenniki" zullen we de top-down constructiemethode gebruiken, dat wil zeggen dat we van het hoogste niveau naar het onderste niveau zullen bouwen. Bij het maken van webpagina's voor een site met behulp van de FrontPage-editor, zullen we voor het gemak pagina's van onder naar boven maken, dat wil zeggen dat we beginnen met het maken van de onderste pagina's.

De bestanden van alle webpagina's van de site staan ​​in een aparte map. Dit zal verder helpen om de plaatsing van de site op internet te vereenvoudigen. Het is gebruikelijk om de hoofdwebpagina-bestandsindex of main een naam te geven met de extensie .htm, hoewel deze vereiste optioneel is.

Binnen elk niveau hebben de pagina's van de site dezelfde structuur. Alle pagina's van hetzelfde niveau zijn meestal in dezelfde stijl ontworpen. De stijl van een webpagina wordt bepaald door de stijl van de tekst en afbeeldingen.

Tekststijl verwijst naar het type lettertype, grootte, stijl; inspringingen, uitlijning, regelafstand, enz. De stijl van grafische elementen wordt bepaald door de vorm, grootte, kleur, textuur van het materiaal, enz.

Sjablonen - Thema's - zijn ontwikkeld in de FrontPage-editor voor documentontwerp.

Een thema is een reeks ontwerpelementen en kleurenschema's van een document dat speciaal is ontwikkeld door een computerontwerper.

Gebruik het menu Bestand → Nieuw in het venster Websitesjablonen dat verschijnt en selecteer de website met één pagina (Fig. 3.7).

Om de selectie van ontwerpelementen en kleurenschema's te vergemakkelijken, gebruiken we een kant-en-klaar ontwerpsjabloon - een thema.

Gebruik het menu Opmaak → Thema in het dialoogvenster dat verschijnt, selecteer bijvoorbeeld het Horizon-thema en specificeer Toepassen als het standaardthema.
Het thema kan zowel op afzonderlijke pagina's als op de hele site worden toegepast. In het laatste geval wordt het thema automatisch geïnstalleerd wanneer u elke nieuwe pagina aanmaakt.

?
1. Waar is FrontPage Editor voor?
2. Wat zijn de belangrijkste elementen van de interface van de FrontPage-editor? Wat is hun doel?
3. Waarvoor wordt het thema gebruikt bij het ontwerpen van een webpagina?

3.4. Tekst opmaken en afbeeldingen invoegen in FrontPage Editor

3.4.1. Tekstopmaak

Het opmaken van tekst in de FrontPage-editor wordt uitgevoerd met behulp van de werkbalk Opmaak, evenals de vensters Opmaak (Fig. 3.8) en Paragraaf (Fig. 3.9).

Rijst. 3.8 Afb. 3.9
Nadat u de tekst in de FrontPage-editor (vergelijkbaar met Word) in het lettertypevenster hebt geselecteerd, kunt u de naam, stijl en grootte selecteren en in het alineavenster kunt u uitlijning, inspringingen en regelafstand specificeren. Voorbeelden van opgemaakte tekst worden weergegeven in afbeeldingen 3.8 en 3.9. Het is belangrijk om te onthouden dat de weergave van een webpagina op het scherm afhankelijk is van de monitorresolutie en browserinstellingen. Daarom is het gebruikelijk om de lettergrootte in conventionele eenheden in te stellen van 1 tot 7. Als de lettergrootte niet is gespecificeerd, wordt standaard aangenomen dat deze 3 is, wat bij installatie in de browser de gemiddelde lettergrootte komt overeen met 12 punten .
Om de aandacht op de informatie te vestigen, wordt een kruipende lijn gemaakt met behulp van de reeks acties: Invoegen → Webcomponent → Kruipende lijn. Voer in het eigenschappenvenster van de kruiplijn (Figuur 3.10) tekst in, stel de bewegingsrichting en -snelheid, vertragingstijd en andere parameters in.


Rijst. 3.10

3.4.2. Afbeeldingen invoegen

Het plaatsen van afbeeldingen op een webpagina is vergelijkbaar met hoe het werd gedaan in de Word-editor (menuopdracht Afbeelding invoegen).
U kunt de parameters van de afbeelding op de pagina instellen in het venster Positie, dat wordt geactiveerd met behulp van het menu Positie opmaken (Fig. 3.11). U kunt de afbeeldingsgrootte (in pixels of procent), uitlijning, randdikte, tekstomloop en andere opties instellen.
Het is belangrijk om te benadrukken dat alle afbeeldingen die we op webpagina's zien, in afzonderlijke bestanden worden opgeslagen en op de pagina zelf alleen links naar de bijbehorende bestanden.


Rijst. 3.11
Afhankelijk van de tekststroom kunnen de ingevoegde afbeeldingen op verschillende manieren worden gerangschikt (Fig. 3.12).


Het aanpassen van de positie van de afbeelding ten opzichte van andere elementen van de webpagina, zoals tekst, wordt uitgevoerd in een dialoogvenster dat wordt geactiveerd met behulp van het menu Opmaak → Positie.
FrontPage biedt elementaire beeldverwerking (aanpassingen van helderheid en contrast, rotaties, bijsnijden, enz.). Gebruik hiervoor het deelvenster Afbeeldingen, vergelijkbaar met de Word-teksteditor.

?
1. Welke opties heeft FrontPage voor het opmaken van tekst?
2. Hoe wordt de lettergrootte op webpagina's ingesteld?
3. Hoe maak je een kruipende lijn?
4. Hoe wordt de afbeelding op de webpagina geplaatst?
5. Hoe wordt de beeldaanpassing gedaan?

Opdrachten

1. Typ en bewerk het volgende dialoogvenster in de FrontPage-editor:

Laten we lachen!
Er is een nieuwe muis aan het werk. 's Avonds besloot ze Keyboard te vragen naar de arbeiders.
Luister, Klav, wie heeft de leiding?
Wat denk je?
Nou, de server is waarschijnlijk...
Nee, te oordelen naar het salaris, is hij niet de belangrijkste.
Dan Printer ... Kleur, laserlicht ...
Nee, Muis, weer door. Zie je, op tafel staat een kleine met rode ogen? Oké, ik zal zeggen - Modem. Hij is de belangrijkste, want hij verbindt ons met de hele wereld.

2. Plak de door de docent voorgestelde afbeelding in de FrontPage-editor en typ de tekstuitlijning.



3.5. Tabel invoegen in FrontPage Editor

Op een webpagina voegt de FrontPage Editor tabellen in die vaak worden gebruikt om informatie te structureren.
Met behulp van tabellen kunt u een lay-out maken in verschillende kolommen, de effecten toepassen van het samenvoegen van de afbeelding en de achtergrond, dunne lijnen plaatsen over de gehele breedte of hoogte van de pagina, enz.

Om een ​​tabel in te voegen, kunt u de standaardwerkbalk gebruiken, maar de meest complete opdrachten voor het werken met tabellen worden weergegeven in het menu Tabel. In het dialoogvenster Tabel invoegen kunt u niet alleen het aantal rijen en kolommen van de tabel specificeren, maar ook de uitlijningsmethode, achtergrondkleur van cellen, kleur en dikte van randen, ruimte tussen cellen en andere parameters (Fig. 3.13) .


Rijst. 3.13

?
1. Waar worden tabellen op webpagina's voor gebruikt?
2. Hoe voeg ik een tabel in de FrontPage Editor in?

De oefening

Maak in de FrontPage-editor een fragment van de site "Belaruskiya pismennіki" uit vier weblanden:
a) de hoofdwebpagina - "Wit-Russische Pismennik" (bestand index.htm), zoals weergegeven in figuur 3.3;
b) webpagina - "Yakub Kolas" (bestand Kolas.htm), zoals weergegeven in figuur 3.6;
c) webpagina "Yanka Kupala" (bestand Kupala.htm), zoals weergegeven in figuur 3.14;



Rijst. 3.14.

d) webpagina "Maksim Bagdanovich" (bestand Bagdanovich.htm), zoals weergegeven in figuur 3.15.


Rijst. 3.15

3.6. Hyperlinks maken in de FrontPage Editor

Links kunnen links bevatten naar webpagina's of andere documenten, zoals afbeeldingen, presentaties, video's, zowel op deze site (interne links) als op andere sites (externe links). Overgangen binnen het document worden uitgevoerd door hyperlinks binnen de pagina. Ze maken het gemakkelijker om door een lange pagina te navigeren, bijvoorbeeld om snel van het einde van de pagina naar het begin te springen.

Voordat u links op de pagina maakt, moet u eerst een bladwijzer maken. Hiervoor wordt de cursor op de gewenste plaats op de webpagina geplaatst. Via het menu Invoegen → Bladwijzer wordt het dialoogvenster Bladwijzer opgeroepen, waarin de naam van de bladwijzer wordt ingevoerd, bijvoorbeeld Omlaag (Fig. 3.16).

Om een ​​hyperlink te organiseren, moet u een ankerelement (tekst of afbeelding) selecteren, de knop op de werkbalk Standaard of het menu Invoegen → Hyperlink gebruiken om een ​​dialoogvenster op te roepen waarin u het verwijzingsadres (webpagina of e-mailadres, bestands- of documentnaam, en in het geval van een interne link, de bladwijzernaam) (Fig. 3.16).



Rijst. 3.16
Standaard wordt er een nieuw document geopend in het huidige browservenster, maar vanuit het venster Hyperlink toevoegen kunt u op de knop Frame selecteren klikken en in het geopende venster Frame beëindigen de opening van een nieuw document in een nieuw venster instellen ( Afb. 3.17).


Rijst. 3.17
Merk op dat in de FrontPage-editor het maken van hyperlinks wordt gedaan in de ontwerpmodus en dat u kunt testen hoe hyperlinks werken in de voorbeeldmodus.

?
1. Welke elementen kunnen als hyperlink fungeren?
2. Waar kan de hyperlink naar verwijzen?
3. Wat is het verschil tussen interne, externe en interne hyperlinks?

De oefening

Maak in de FrontPage-editor tekst- en grafische hyperlinks tussen de pagina's van de website "Belaruskiya Pismennіki", zoals weergegeven in figuur 3.18


Afbeelding 3.18

3.8. Een site publiceren

De publicatie van een site wordt de plaatsing op een server of lokale computer genoemd met de mogelijkheid om te bellen vanaf het netwerk (wereldwijd of lokaal).

Sommige servers bieden vrije schijfruimte voor de site, bijvoorbeeld www.narod.ru. Het publicatieproces van de website bestaat uit het overbrengen van uw websitebestanden naar deze server. Het adres van de overgedragen site kan er bijvoorbeeld uitzien als www.belpisateli.narod.ru.

Om een ​​site te publiceren die is voorbereid in de FrontPage-editor, gebruikt u het menu Bestand → Site publiceren om het dialoogvenster Eigenschappen externe website te openen (Fig. 3.19).
Om de gemaakte website op de narod.ru-server te plaatsen, geeft u in de regel Externe websitelocatie het adres op van de ftp-node van de narod.ru-service, die voor alle gebruikers hetzelfde is: ftp://ftp.narod. ru (afb. 3.19).



Rijst. 3.19.

In de toekomst moet de gebruiker een gebruikersnaam en wachtwoord invoeren in het venster Gebruikersnaam en wachtwoord vereisen (Fig. 3.20).


Rijst. 3.20
In het nieuwe venster dat wordt geopend, bevinden de bestanden en mappen van de gemaakte lokale website zich aan de linkerkant, en de bestanden en mappen van de externe website, bijvoorbeeld de pagina's van de site "Belaruskiya Pismennіki" (Fig. 3.21), wordt aan de rechterkant geplaatst.



Rijst. 3.21

Nadat u de modus hebt opgegeven, moeten alle bestanden van de lokale website naar de server worden gekopieerd. U moet op de knop Website publiceren klikken.

Als alle bestanden zijn gekopieerd, kan de gebruiker de website bekijken. Voer hiervoor het adres in de browserregel in, bijvoorbeeld www.belpisateli.narod.ru

?
1. Wat wordt bedoeld met websitepublicatie?
2. Hoe de site publiceren?

De oefening

Publiceer de site "Belaruskiya Pismenniki" op een lokale computer of op een beschikbare gratis server, die wordt aangegeven door de leraar.

Genomineerd door de leraar informatica van het International Lyceum "Grand" Cheban L.I.

Download informatica, schoolstudent 11e leerjaar, materialen uit informatica voor 11e leerjaar online

Als het om code-editors gaat, is het soms moeilijk om een ​​duidelijk overzicht te krijgen van alle voordelen en functionaliteit die verschillende editors te bieden hebben. Uiteindelijk is er echter minstens één vereist, dus het is erg belangrijk om te weten welke editor het beste is voor uw persoonlijke behoeften.

WYSIWYG-editors worden vaak bekritiseerd door voorstanders van "handgemaakte" code vanwege de opgeblazen, rommelige en niet-conforme broncode die ze produceren. De WYSIWYG-editors zijn de laatste tijd echter een stuk beter geworden. Soms moet u uw klanten de gemakkelijkste tools bieden om hun websites te bewerken of bij te werken. En hier zijn WYSIWYG-editors onmisbaar.

Het zou verkeerd zijn om u enkele van de "beste" editors aan te bevelen, omdat de keuze altijd afhangt van uw behoeften, basisdoelen, vaardigheden en ervaring. Daarom hebben we in dit artikel geprobeerd je een overzicht te geven van verschillende, nuttige en niet erg WYSIWYG-editors.
We hopen dat je nieuwe editors vindt waar je nog nooit van hebt gehoord. Of misschien vind je een aantal functies die je hebt gemist in je favoriete editor, of loop je het risico te experimenteren met een aantal veelbelovende opties om je workflow te verbeteren. Daarnaast kun je er achter komen welke editors je wel en welke tools je beter niet kunt gebruiken.

Wat betekent het WYSIWYG?
In dergelijke editors kunt u niet de broncode van uw documenten wijzigen, maar de weergave ervan, die (indien mogelijk) in het definitieve document wordt gepubliceerd. Dus in plaats van handmatig codeblokken te schrijven, bestuurt u het ontwerp met componenten met behulp van het editorvenster. Dit betekent dat u iets ziet dat erg lijkt op het eindresultaat, hoewel het document of de afbeelding nog steeds wordt gemaakt.
Opmerking: Dit artikel bespreekt alleen desktop-georiënteerde WYSIWYG-editors die werken onder Windows, Linux of Mac. Het geeft geen overzicht van JavaScript WYSIWIG-editors, maar u kunt een uitgebreid overzicht van dergelijke editors vinden op of.

Adobe dreamweaver

Dreamweaver (Win/Mac)

Dreamweaver, voorheen een product van Macromedia, is een van de meest gebruikte editors die ontwikkelaars kan helpen hun workflow te verbeteren en tonnen codeertijd te besparen. Terwijl eerdere versies van Dreamweaver soms mooie broncode genereerden, kan de nieuwste versie (in de meeste gevallen) volledig schone opmaak genereren.

Dreamweaver biedt ook verschillende handige tools zoals fragmentbibliotheken, ftp-beheer, een foutopsporingsserver en complexe codering. U kunt bijvoorbeeld CSS-informatie bekijken in een enkel, uniform CSS-paneel, waardoor het gemakkelijk wordt om stijlen te zien die op specifieke elementen zijn toegepast, te bepalen waar attributen worden gedefinieerd en bestaande stijlen te bewerken. Zie ook onze lijst met Dreamweaver-zelfstudies. Prijs: $ 400 (CS3-versie).

Enkele van de vele functies van Dreamweaver zijn:
* Geavanceerde CSS-bewerking
* Geïntegreerde codeeromgeving
* Spry-framework voor Ajax
* Controleer de browsercompatibiliteit.
* Integratie met Photoshop CS3 en Fireworks.
* Codefragmenten (zoals CSS-formaten)
* FTP-beheer
* XML-ondersteuning
* FLV-ondersteuning
* Leermiddelen (bijv. Adobe CSS Advisor)
* Talrijke extensies voor Dreamweaver.
Amaya
Amaya (Win/Mac/Linux)
Wat Amaya echt anders maakt dan de rest, is dat het een hybride is van een webbrowser en een webpagina-editor, zodat je op internet kunt surfen en je pagina's in dezelfde applicatie kunt bewerken. Deze tool, gemaakt door het WWW Consortium, stelt u in staat websites te beheren, hun inhoud te wijzigen en bij te werken, nieuwe afbeeldingen en links toe te voegen. Natuurlijk, als Amaya deze pagina's kan weergeven.

De nieuwste versie van de editor, Amaya 10, werd uitgebracht in februari 2008. Het is in staat om met meerdere documenten tegelijk te werken ((X) HTML, MathML (. Mml) en SVG (. Svg) documenten, kunnen tegelijkertijd worden weergegeven en bewerkt). U kunt bijvoorbeeld wiskundige formules invoegen met behulp van een pop-up: Amaya converteert ze direct via Math-ML.

Amaya bevat ook een gecombineerde annotatietoepassing (annotaties, externe opmerkingen, annotaties, notities die aan elk webdocument of een enkel deel van een document kunnen worden toegevoegd) en het ondersteunt SVG, RDF en XPointer. Open source.

Rapidweaver
RapidWeaver (Mac)
RapidWeaver is een krachtige op sjablonen gebaseerde tool voor het bouwen van websites die allerlei soorten pagina's kan genereren, zoals tekstpagina's, blogs, contactformulieren, afbeeldingsgalerijen en Flash-diavoorstellingen, en heeft een ingebouwde FTP-manager en integratie met iPhoto en Mac.

De editor bevat ondersteuning voor podcasting, inline opmerkingen, rss-feeds, permalink en tagging. RapidWeaver zal ook SEO-vriendelijk zijn. Het heeft ook veel krachtige functies, zoals themawijziging, php-weergave, mix en match WYSIWYG en HTML, slim publiceren, op XHTML en CSS gebaseerde site-output, broncodeviewer, ingebouwde foutcontrole. Alle sjablonen zijn gebaseerd op XHTML en CSS. Wat geweldig is, is dat RapidWeaver genereert geldige code. Prijs: $ 49.

Adobe Contribute
Adobe Contribute

Het belangrijkste doel van Adobe Contribute is om websites en blogs te kunnen bewerken voor gebruikers zonder enige technische kennis. Met Contribute CS3 kunnen auteurs bestaande sites en blogs bijwerken met behoud van de site-integriteit. Contribute biedt integratie met Dreamweaver, posten vanuit Microsoft Office en bewerken vanuit IE 7 en Firefox.

Met deze WYSIWYG-editor kunnen auteurs elke website of blog wijzigen of bijwerken zonder HTML te hoeven leren. Prijs: $ 169 (CS3-versie).

Adobe-golive
Adobe Goldive (Win/Mac)

In april stopte Adobe met de ontwikkeling en verkoop van GoLive 9. Adobe GoLive moedigt gebruikers aan om over te stappen naar Dreamweaver, waarna je GoLive (eigenlijk een verbazingwekkend krachtige bewerkingstool (zie hieronder)) waarschijnlijk niet zou aanbevelen aan je klanten.

Enkele Adobe GoLive 9-functies:
* Designer stijlen
* Visuele CSS-lay-out
* Plaats commando
* Adobe InDesign®-integratie
* Kleurbeheer
* Platformondersteuning
* Hulpprogramma's voor sitebeheer
* Publiceer server
* Slimme objecten

Microsoft Expression Web
Microsoft Expression (Win)

Ooit zwaar bekritiseerd vanwege zijn echt slechte webeditor (Frontpage), heeft Microsoft onlangs een editor gemaakt, Expression, die veel lijkt te erven van zijn voorgangers. Expression heeft geprobeerd een comfortabele omgeving te creëren voor internetgebruikers, met functies die erg lijken op Adobe Dreamweaver. Wanneer u echter rechtstreeks vergelijkt, biedt Dreamweaver meer en produceert het schonere code. Expression produceert echter degelijke code die aan de normen voldoet en weet hoe te werken met CSS en CSS-lay-outs.

Studio-editie met andere softwaretoepassingen (tool voor grafisch ontwerp, tool voor videocodering, enz.) kost ongeveer. $ 500. Een Expression-licentie kost $ 350. U kunt Expression krijgen door Frontpage bij te werken en geld te besparen. De proefversie van 60 dagen is gratis te downloaden, maar registratie is vereist.

Let op: Expression is geen opvolger van Frontpage, het zijn nogal verschillende ontwikkeltools. Microsoft Expression lijkt meer op Microsoft SharePoint Designer, het is meer gericht op ontwerpers en is gericht op het bieden van algemene webontwikkeling. Microsoft SharePoint Designer richt zich op het ontwikkelen en aanpassen aan op SharePoint gebaseerde sites en kan gezien worden als de grote broer van Frontpage.


Enkele Microsoft Expression-functies:
* ASP.NET 2.0-integratie
* Geavanceerde CSS-weergave
* XPath Expression Builder
* Bouw en formatteer weergaven van industriestandaard XML-gegevens
* Eigenschapsraster taggen
* Toegankelijkheidscontrole
* Realtime validatie van normen
* Volledige schema-ondersteuning

NVU (Win/Mac/Linux)

Deze editor zou een echt alternatief moeten zijn voor de dominante producten: WYSYWIG-editor voor Linux, Microsoft Windows en Mac, zou kunnen concurreren met FrontPage en Dreamweaver. En in sommige opzichten biedt Nvu meer functies dan je zou verwachten van volledig gratis software.

Nvu (uitgesproken als N-view, voor "new-view - new look") biedt een geïntegreerde FTP-manager, krachtige ondersteuning voor formulieren, tabellen en sjablonen, en is echt heel gemakkelijk te gebruiken. CaScadeS, de bekende CSS-editor, integreert als add-on in Nvu en maakt het gemakkelijk om stijlen te creëren en te beheren en om te zien hoe je stijlen direct worden toegepast in het document dat je wijzigt.

Nvu is open source en uitgebracht onder de Mozilla Public License (MPL). Helaas is de ontwikkeling van de NVU de afgelopen jaren niet doorgegaan. Een verbeterde versie van NVU is hier te vinden - KompoZer.

Enkele van de NVU-functies:
* Met Site Manager kunt u de sites bekijken die u maakt.
* XML-ondersteuning.
* Ingebouwde validator.

Kompozer
KompoZer (Win / Mac / Linux)

Deze tool is een uitloper van NVU, die is ontwikkeld nadat de verdere ontwikkeling van NVU was vertraagd. KompoZer is een webauthoringsysteem dat een webbestandsbeheerder en een WYSIWYG-editor combineert.

KompoZer is extreem gebruiksvriendelijk, waardoor het een geschikte oplossing is voor gebruikers die websites willen bouwen zonder technische kennis. In vergelijking met NVU produceert Kompozer schone opmaakcode.

De nieuwste versie werd uitgebracht in augustus 2007. Kompozer kan worden beschouwd als een alternatief voor kleine projecten en voor gebruikers zonder technische kennis. Maar het is absoluut te zwak voor professionele webontwikkelaars.

Namo WebEditor 2006
Namo WebEditor 2006 (Winnen)
Namo WebEditor combineert bijna alle tools die je nodig hebt om websites te maken in een eenvoudige en intuïtieve interface. De interface-elementen zijn extreem duidelijk, eenvoudig en gemakkelijk te gebruiken. U kunt schakelen tussen ontwerpeditor, HTML-browser en fotoviewer. U kunt ook een aantal wizards gebruiken om uw workflow te automatiseren. Namo is krachtig, maar de WYSIWYG-mogelijkheden zijn beperkt. De editor is sinds 2006 niet meer bijgewerkt, wat het genereren van broncode soms uiterst vreemd maakt. Web Editor Namo Pro wordt geleverd met een Flash-editor en grafische programma's. Er is een testversie beschikbaar. Prijs: $ 99,95.


Enkele van de Namo Webeditor-functies:
* Code Helpers voor automatisch sluitende tags
* Snelle tag-editor
* Tagkiezer
* HTML / CSS-referentie

Evrsoft eerste pagina 2006
Evrsoft Eerste Pagina 2006 (Win)
In feite wordt deze editor erg onderschat. Het is niet erg populair en is sinds 2006 niet meer bijgewerkt, maar het heeft veel zeer handige functies die in moderne WYSIWYG-editors kunnen worden opgenomen. Bijvoorbeeld de Auto History-functie - geschiedenis onthoudt alle attributen en waarden die werden gebruikt en suggereert automatisch de "juiste" waarde.

Met de Dual Preview Engine kunt u webdocumenten in meerdere browsers bekijken met First Page 2006. U kunt een voorbeeld van uw werk bekijken in Internet Explorer, Mozilla of pagina's in beide browsers naast elkaar bekijken (horizontale/verticale panelen). En bekijk code en bewerk documenten in realtime.

De eerste pagina is gratis. Een vergelijkbaar gratis alternatief (ook niet bijgewerkt sinds 2005): Selida HTML Editor.

Enkele van de functies van de eerste pagina:
* CSS-klasse-ondersteuning en automatische detectie
* Syntaxisaccentuering
* Tag Document Selectie Tool
* Tag automatisch aanvullen
* Opgeruimde HTML Power Tools
* Voorbeeld in IE terwijl u typt
* Afbeeldingstoewijzer
* CSS-stijlbladontwerper
* Serverzijde inclusief ondersteuning
* Zeer aanpasbare werkbalken en interface
* FTP-client
* Geavanceerd zoeken en vervangen in bestanden

Microsoft SharePoint Designer
Microsoft SharePoint Designer 2007 (Win)

Het is de opvolger van Microsofts Frontpage. SharePoint Designer is een standaard WYSIWYG-editor. Afgezien van het ondersteunen van interactieve ASP.NET-pagina's, biedt het niets revolutionairs. Er is een gratis proefversie beschikbaar. Er is een online versie die Internet Explorer en veel geduld vereist.

Enkele kenmerken van Sharepoint:
* ondersteuning voor interactieve ASP.NET-pagina's
* maak gegevensweergaven van RSS, XML, Office XML
* samenwerken met de ingebouwde Workflow Designer
* CSS-tools
* volg aangepaste pagina's
* spellingcontrole
* SharePoint Server 2007-integratie

NetObjects-fusie
NetObjects-fusie
Deze editor was ooit waarschijnlijk de slechtste maar nog steeds erg populaire WYSIWYG-editor. Het genereerde vreselijke broncode (alleen MS Word deed het slechter), maar werd vaak gebruikt door webhostingbedrijven en ISP's. Met NetObjects Fusion kunt u websites maken zonder enige technische kennis. Vooral als u een visitekaartje wilt maken, kunt u dat binnen enkele minuten doen. Maar als u een professionele website wilt maken, is NetObjects geen optie die het overwegen waard is.

NetObjects Fusion versie 10 is momenteel beschikbaar. De kwaliteit van de gegenereerde broncode is misschien veranderd, maar dat maakt niet uit. Er is een proefversie waarvoor u zich moet registreren bij de winkel. Daarom hebben we geen screenshot van dit product. Prijs:? 100.

Quanta plus

QuantaPlus (Linux)
Quanta Plus is stabiel, heeft een zeer gebruiksvriendelijke en veelzijdige webontwikkelomgeving. Quanta heeft een editor gemaakt die is ontworpen voor efficiënte en natuurlijke ontwikkeling en met maximale gebruikersuitbreiding.

De editor ondersteunt zowel handcodering als de WYSIWYG-interface. Het heeft de volgende kenmerken: automatisch aanvullen van tags terwijl u tags invoert en bewerkt in de dialooginterface, projectbeheer, de mogelijkheid om PHP-code uit te voeren en te debuggen. Het heeft ook een visuele CSS-editor, CSS automatisch aanvullen, zeer uitbreidbaar en voorbeeldbaar.

De editor heeft ook interessante functies voor projectbeheer, waaronder ondersteuning voor lokale en externe (via het netwerk) projecten. Projecten kunnen worden gedownload van verschillende servers met verschillende protocollen. CVS-ondersteuning is inbegrepen, Subversion-ondersteuning is mogelijk via externe plug-ins. Quanta is gebaseerd op KDE. Vrijgegeven onder de GPL-licentie.

Snelweg
Snelweg (Mac)

Freeway (oorspronkelijk Uniqorn) wordt geleverd in twee smaken, Freeway Pro en Freeway Express. Freeway 5 Pro kan worden gebruikt om CSS-lay-outs te maken met behulp van absolute positionering. In de geavanceerde versie wordt bijvoorbeeld verbinding maken met een MySQL-database met behulp van een scripttaal zoals PHP gedaan met behulp van plug-ins die "Actions" worden genoemd. Sommige acties kunnen gratis worden gedownload op verschillende websites, maar er zijn ook commerciële, zoals acties van derden.

Er is een proefversie waarvoor u een vrij lang webformulier moet invullen. Freeway werd genomineerd voor het Creative Web Product of the Year tijdens de Macworld Awards 2008. Als je een Mac gebruikt, dan is Freeway samen met RapidWeaver de eerste optie die het overwegen waard is.

Enkele kenmerken van de snelweg:
* Meerdere hoofdpagina's
* Lay-outtools
* Linkkaart
* Linkstijlen
* Geïntegreerde .Mac-upload
* Internet Explorer-compatibiliteit
* Ondersteuning voor gesegmenteerde achtergrondafbeeldingen
* Ingebouwd voorbeeld binnen Freeway (Safari / Webkit)
* Volledige EPS (Panther & later), Illustrator, Photoshop gelaagde bestandsimport
* Snelwegwinkel
* Werken met Blogger-sjablonen

Seamonkey Componist
SeaMonkey Composer (Win / Mac / Linux)
Deze editor is een eenvoudig maar zeer krachtig alternatief voor grote commerciële toepassingen. Als opvolger van Netscape Composer heeft SeaMonkey Composer er eigenlijk niets mee te maken.

De editor is tegelijkertijd krachtig en eenvoudig en biedt dynamische afbeeldingen en het formaat van tabellen, snel invoegen en verwijderen uit tabelcellen, geavanceerde CSS-ondersteuning en ondersteuning voor gepositioneerde lagen. Een WYSIWYG-editor is ingebouwd in SeaMonkey.

Creëren
Maken (Mac)
Create combineert de basisfuncties van toepassingen zoals Illustrator, InDesign, Pages, GoLive, Canvas, Dreamweaver, QuarkExpress en organiseert ze voor eenvoudig gebruik, het is goedkoop, ontworpen voor OS X. U kunt onder andere links naar tekst en afbeeldingen van het gebruik van slepen-en-neerzetten, is er een tool die automatisch navigatie en index maakt, en u kunt vanuit één document PDF's en websites maken.

WYSIWYG Web Builder
WYSIWYG Web Builder
Web Builder is een zeer aanpasbare en uitbreidbare applicatie met veel functies, scripts en sjablonen. Nieuwe ontwerpelementen kunnen worden toegevoegd met slepen en neerzetten, er zijn veel scripts beschikbaar. Binnen de software is het mogelijk om afbeeldingen te bewerken.

PayPal eCommerce Tools geïntegreerd; heeft een rss-feedobject, een blog met ingebouwde rss en een sitemapgenerator die compatibel is met google. De editor heeft ook veel extensies zoals wachtwoordbeveiliging, rss-feed, rss-parser, fotoalbum en lightboxes.

Als u vragen heeft, raden we u aan onze

Elke webdesigner en codeur heeft een goede webpagina-editor nodig om HTML-, CSS- en JavaScript-code te maken en te bewerken. Kladblok (Windows) en Teksteditor (Mac) zijn geweldige hulpmiddelen om u op weg te helpen, maar naarmate u meer ervaring opdoet, wilt u een steviger en handiger hulpmiddel gebruiken.

Er zijn honderden geweldige editors om uit te kiezen, maar velen van hen zijn betaald. En als u geen auteursrechten wilt schenden, en het budget heeft niet het geld om een ​​commercieel product te kopen? Dit artikel onderzoekt enkele geweldige gratis editors.

  • WYSIWYG-editors. Dit zijn grafische editors waarmee je een pagina-indeling kunt bouwen en stijlen visueel kunt instellen, zoals in de bekende MS Word-tekstverwerker. Ze zijn een handig hulpmiddel voor het maken van pagina-ontwerpen, hoewel, zoals elke doorgewinterde webdesigner weet, de code nog moet worden aangepast om een ​​geweldig resultaat te krijgen.
  • Tekst redacteuren. Het is een hulpmiddel voor het rechtstreeks bewerken van HTML- en CSS-code. Sommige editors zijn bedoeld voor algemene doeleinden en hebben geen speciale opties voor het ondersteunen van webcode. Anderen zijn gespecialiseerd in het gebruik van webtalen zoals HTML, CSS, JavaScript en PHP, en hebben ingebouwde eigenschappen voor het snel invoeren van HTML-tags, CSS-eigenschappen, enzovoort. Met veel van deze editors kunt u een webpagina in een apart venster bekijken.

KompoZer (Windows, Mac, Linux)

KompoZer is een goede keuze als je een visuele editor nodig hebt met een krap budget

Komodo Edit is een goede editor, makkelijk te leren, maar toch krachtig en uitbreidbaar

Hoewel het een editor voor algemene doeleinden is, ondersteunt het HTML en CSS, en heeft het een contextuele eigenschap voor automatisch aanvullen voor HTML-tags en CSS-eigenschappen, evenals een verzameling code-inserts voor verschillende HTML-elementen. Om het meeste uit Komodo te halen, moet je de HTML Toolkit-extensie installeren, die geweldige functies bevat zoals automatisch sluiten van tags, CSS-preview en een tijdelijke tekstgenerator.

Met Komodo Edit kunt u de bewerkte pagina's in elke geïnstalleerde browser bekijken, of de ingebouwde browser in een apart venster gebruiken, zodat u tegelijkertijd kunt bewerken en het resultaat van de wijzigingen kunt zien.

De editor heeft een ingebouwde functie voor het uploaden van bestanden naar de site (FTP, FTPS, SFTP of SCP), en je kunt je bestanden ook netjes groeperen met behulp van de projectmanager-optie.

Zeer handige functie Code> Selecteer Blok... Het markeert het huidige HTML-hoofdblok, zoals het momenteel gesloten div- of ul-element. Een zeer handige functie wanneer u een hele sectie op een pagina moet selecteren om te kopiëren of te verplaatsen.

Komodo Edit heeft veel krachtige en handige functies, zoals het gebruik van reguliere expressies voor zoeken / vervangen, de mogelijkheid om externe opdrachten uit te voeren, enzovoort. Gelukkig heeft de editor ook een goed helpsysteem dat het gemakkelijk maakt om de volledige kracht van Komodo Edit onder de knie te krijgen.

Aptana Studio (Windows, Mac, Linux)

Aptana Studio is een volledig geïntegreerde ontwikkelomgeving voor webapplicaties met een breed scala aan plug-ins. Hoewel je het alleen kunt gebruiken als een HTML / CSS / JavaScript-code-editor

Notepad ++ is een geweldige vervanging voor Notepad van Windows. Hoewel het niet dezelfde set opties heeft als andere editors, is het geweldig voor het bewerken van HTML, CSS, JavaScript en andere codebestanden.

PSPad is een andere algemene editor voor Windows met veel functies die handig zijn voor HTML- en CSS-codeerders

jEdit is een platformonafhankelijke teksteditor met krachtige macro-opdrachten en plug-ins. Installeer de XML-plug-in als u webpagina's moet bewerken

TextWrangler is een lichtgewicht editor voor algemene doeleinden. Ondanks het ontbreken van speciale functies voor webontwikkeling, kan het worden gebruikt om met webpagina's te werken.

Vim is zeker moeilijk om te leren, maar als je er doorheen komt, wil je nooit meer terug!

De grootvader van teksteditors voor programmeurs Vim (een directe afstammeling van de vi-editor) is een open source, console-gebaseerde teksteditor. Het wordt door de standaardeditor geïnstalleerd op bijna alle smaken van Unix, inclusief Linux en Mac OS X. De editor is ook beschikbaar voor gebruik op Windows en vele andere systemen.

Vim is geen systeem dat je meteen kunt installeren en gebruiken zonder er ooit mee te maken te hebben. De meeste bewerkingscommando's bevatten oneven combinaties zoals wq en /. Het heeft ook drie bewerkingsmodi: modus tussenvoegsels waarin de tekst wordt ingevoerd; visueel modus voor het selecteren van tekst; en opdracht modus voor het invoeren van opdrachten. Deze functionaliteit is een erfenis van Unix uit de tijd dat er geen vensters of muis waren.

Waarom staat hij op de lijst? Als je het eenmaal onder de knie hebt, zul je overtuigd zijn van zijn snelheid en kracht. Met een paar commando's kun je iets doen in seconden dat minuten kan duren in andere editors.

Er is een groot aantal Vim-macro's en plug-ins die het gemakkelijk maken om met HTML-, CSS- en JavaScript-code te werken, inclusief syntaxisaccentuering, automatisch aanvullen, HTML Tidy en browservoorbeeld. Hier is een grote lijst met nuttige links:

  • Vim Omni automatisch aanvullen
  • HTML / XHTML-bewerking in Vim
  • Startpagina

Fraise (Mac)

Fraise is een intuïtieve editor voor Mac, met genoeg functies voor webbewerking

Net als TextWrangler en gedit is Fraise een prachtige lichtgewicht editor die een plezier is om te gebruiken. Het is een vork van de redacteur. Het is relatief nieuw en heeft geen goede webserver. Het wordt momenteel alleen ondersteund op Mac OS X 10.6 (Snow Leopard), dat wil zeggen dat als je versie 10.5 gebruikt, je Smultron moet downloaden.

Fraise heeft een aantal geweldige webbewerkingsopties:

  • Codemarkering voor HTML, CSS, JavaScript, PHP en verschillende andere programmeertalen.
  • Sluit tag (Command-T) om de huidige tag te sluiten. Dit scheelt echt tijd bij het invoeren van lijsten.
  • Handige preview met ingebouwde browser (via WebKit), met zeer handige Live Update-optie? die de browser ververst zodra de opmaak en CSS zijn gewijzigd op de pagina die wordt bewerkt.
  • Geavanceerde zoekoptie die zoeken / vervangen ondersteunt met behulp van reguliere expressies.
  • Ondersteuning voor blokken voor het snel invoeren van HTML-tags en CSS-eigenschappen.
  • Enkele handige commando's voor het manipuleren van tekst, zoals het valideren van HTML en het converteren van karakters naar HTML-elementen.

Fraise is het ontdekken waard als je op een Mac werkt en een handige editor wilt met meer opties dan de ingebouwde Teksteditor.

Hallo lieve abonnees en gasten van mijn blog. In verschillende eerdere artikelen heb ik je kennis laten maken met de basis van de css-talen en echter alleen indirect genoemde helperprogramma's. Daarom vind ik het vandaag nodig om u te vertellen over de beste visuele html-editor. Ik zal je vertellen over enkele van de populaire tools voor het bouwen van sites, en later kun je degene downloaden en uitproberen die je leuk vindt.

Raak de top tien

Op dit moment hebben bedrijven veel gespecialiseerde softwareproducten uitgebracht, met als belangrijkste doel het optimaliseren van de workflow van ontwikkelaars. Er zijn zowel betaalde als gratis editors.

Omdat mijn blog gericht is op het onderwijzen van nieuwelingen in deze branche, heb ik besloten om de beste gratis tools voor het maken van webpagina's te beschrijven. Hoogstwaarschijnlijk heb je al geraden dat we het gaan hebben over de tien handigste visuele programma's. Laten we beginnen met de gemakkelijkste.

(https://notepad-plus-plus.org/)

Het is een geweldig hulpmiddel om toekomstige ontwikkelaars op te leiden. Het programma heeft een eenvoudige gebruiksvriendelijke interface zonder onnodige toeters en bellen, ondersteunt meertaligheid, dat wil zeggen, u kunt het menu van de editor in het Russisch vertalen. De voordelen omvatten ook het benadrukken van de syntaxis van de code, de implementatie van verificatie en validatie.

PSPad(http://www.pspad.com/)

Net als het vorige programma is PSPad een tool voor algemene doeleinden die css- en html-tekst markeert, automatisch wijzigingen opslaat nadat het programma is voltooid, de juistheid van de geschreven code controleert, en waarmee u de voorbeeldmodus van de ontwikkelde pagina's kunt inschakelen. Deze visuele editor bevat meer handige functies dan Notepad ++, maar het is nog steeds een eenvoudige ontwikkelingstool.

KompoZer(http://www.kompozer.net/)

Het softwareproduct is eigendom van WYSIWYG-editors, wat betekent "wat je ziet is wat je krijgt". KompoZer is een van de leiders onder visuele editors en met een goede reden. Het stelt ontwikkelaars en ontwerpers in staat om samen te werken, omdat het is begiftigd met 3 werkingsmodi. Laten we beginnen met mijn favoriet, de codemodus.

Ondanks de afwezigheid van automatische voltooiing van gepaarde elementen van opmaaktalen, kunt u met de modus de code bewerken zoals in teksteditors. In de WYSIWYG-modus is het handig voor ontwerpers om het uiterlijk van webbronnen te ontwerpen. De gezamenlijke modus biedt de mogelijkheid voor gedetailleerde kennismaking met de opmaak van specifieke objecten.

Komodo Bewerken(http://www.activestate.com/komodo_edit/)

Krachtige tool met direct beschikbare broncode. De creatie is gebaseerd op de commerciële ontwikkelomgeving Komodo IDE, dus het product is begiftigd met veel extra voordelen: contextueel automatisch vullen en sluiten van tags, genereren van willekeurige tekst om velden in te vullen, voorbeeld van stijlopmaak, ingebouwde reguliere expressies en veel meer.

Aan dit alles wil ik toevoegen dat de mogelijkheden van het programma aanzienlijk kunnen worden uitgebreid met behulp van speciale hulpprogramma's!

jBewerken(http://www.jedit.org/)

jEdit is een platformonafhankelijk softwareproduct. Het biedt syntaxisaccentuering voor geschreven tekst, extra installatie van plug-ins om de mogelijkheden uit te breiden, waarna automatisch sluiten van tags, code-authenticatie en vele andere functies beschikbaar komen.

Voor mij persoonlijk was het struikelblok op weg naar deze editor echter de slordige en onhandige interface.

Aptana-studio(http://www.aptana.com/)

Wil je leren programmeren in een volwaardige ontwikkelomgeving, werk dan in dit product. De omgeving ondersteunt veel programmeertalen en is niet alleen geschikt voor sites, maar ook voor het schrijven van andere soorten applicaties. Maar wees bereid om wat tijd te nemen om de technische kenmerken ervan onder de knie te krijgen.

Fraise(https://www.assembla.com/home)

Dit is een teksteditor die geschikt is voor het maken van webbronnen, helaas alleen voor het Mac OS X 10.6-platform. Het programma ondersteunt kleuraccentuering van tekst in verschillende talen, biedt een voorbeeld van de gemaakte pagina's, is uitgerust met speciale commando's om het typen en syntaxiscontrole te versnellen, stelt u in staat reguliere expressies te gebruiken en voegt ook automatisch de ingevoerde eigenschappen toe.

Gedit(http://projects.gnome.org/gedit/)

Een eenvoudige teksteditor die, na het installeren van add-ons, op wonderbaarlijke wijze verandert in een webeditor. De volgende eigenschappen worden toegevoegd met behulp van hulpprogramma's:

  • Voltooiing van gepaarde elementen;
  • Genereren van tijdelijke tekst;
  • De syntaxis van de code controleren;
  • Bekijk een voorbeeld in elke browser.

Vim(http://www.vim.org/)

Een console-editor die moeilijk te leren is en veel voordelen heeft voor programmeurs. Uitgerust met 3 bedrijfsmodi.

ICEcoder(https://icecoder.net/downloads)

Het is een teksteditor die de mogelijkheid biedt om code rechtstreeks in de browser te schrijven en te bewerken. Een uitstekende moderne tool om zowel lokaal als op het netwerk te werken, uitgerust met de kenmerken van standaard editors, maar het ondersteunt het werken met databases en functies op alle platforms.

Wat mij betreft, ik verander regelmatig van WYSIWYG-programma's en probeer nieuwe versies en producten van verschillende bedrijven.

Dat is alles, veel succes met het vinden van de editor die bij u past! Deel de link met je vrienden en zorg ervoor dat je je abonneert op mijn blog voordat je vertrekt. Er zijn nog veel meer nuttige artikelen in het project. Tot ziens!

Met vriendelijke groet, Roman Chueshov

Er zijn veel manieren om uw eigen website te maken - van het gebruik van kant-en-klare sjablonen op Narod.ru tot het aanvragen van een advertentie zoals 'sites maken in twee dagen vanaf 300 roebel'. Zelfs een kind kan zijn eigen blog of een eenvoudige startpagina maken. Dat is de reden waarom bijna iedereen kan opscheppen over het hebben van een eigen website op het web. Verschillende diensten voorzien elke geïnteresseerde van websitebouwers, die in een kwestie van seconden een eenvoudige persoonlijke gebruikerspagina creëren. Er zijn honderden en honderdduizenden van dergelijke pagina's op internet. In de regel lijken ze op elkaar en worden ze niet onthouden. Voor degenen die gratis online tools gebruiken om een ​​persoonlijke internetpagina te maken, is het bezitten van een website vaak leuk, mensen maken een pagina en vergeten deze. De inhoud ervan komt in de meeste gevallen neer op de publicatie van foto's van uw hond en een paar informatie "over uzelf".

Een ander verhaal is of iemands eigen website als communicatiemiddel wordt gezien, zoals telefoon of post. Het hebben van een eigen website is handig voor elke ondernemer die zijn bedrijf wil vertegenwoordigen, een arts, een advocaat die een eigen consultatiebureau, opleidingscentrum opent, enz. In dit geval moet de pagina origineel en zinvol zijn en nuttige informatie bevatten voor bezoekers. Om een ​​site te krijgen die aan deze vereisten voldoet, zijn gratis startpaginagenerators alleen niet voldoende. Het beheersen van de basisprincipes van webprogrammering kan echter lang duren. U kunt natuurlijk een professional inhuren die elke pagina naar uw wensen maakt, maar deze optie heeft een duidelijk nadeel, dus voor velen is het onaanvaardbaar.

Visuele webeditors zijn een goede manier om tijd te besparen bij het leren van webprogrammering en om snel een website te maken en deze te vullen met alle benodigde informatie. Aan de ene kant hoef je geen speciale kennis te hebben en een programmeur te zijn om een ​​webproject te maken met een dergelijk programma. Aan de andere kant geven dit soort apps veel creativiteit en garanderen ze dat de site er niet precies uitziet als duizenden andere. De kern van het werk van visuele web-editors is de WYSIWYG-eigenschap - What You See Is What You Get (wat je ziet is wat je krijgt). Met andere woorden, tijdens het bewerken zien webpagina's er ongeveer hetzelfde uit als ze in een browser worden weergegeven.

⇡ WYSIWYG Web Builder 7.1.0

  • ontwikkelaar: Pablo Software Solutions
  • distributiegrootte: 5,5 MB
  • distributie: shareware
  • Russische interface: nee

Webpagina's die zijn gemaakt met WYSIWYG Web Builder en andere visuele editors, zijn samengesteld uit afzonderlijke blokken. Dit kunnen tekst, afbeeldingen, flashvideo's, enz. zijn. De gebruiker hoeft alleen maar de benodigde blokken te selecteren en deze op de juiste plaatsen op de pagina te plaatsen, terwijl de code automatisch door het programma wordt gegenereerd.

Als je geen ervaring hebt met webdesign, moet je beginnen met het maken van je eerste project in het programma met een kant-en-klaar sjabloon. WYSIWYG Web Builder heeft standaard ongeveer tien sjablonen in verschillende richtingen, en enkele tientallen meer kunnen gratis worden gedownload van de officiële website van het programma. Nadat u de sjabloon hebt gedownload, kunt u alle elementen ervan bewerken.

Om dit te doen, kunt u de talrijke hulpmiddelen op het verticale paneel gebruiken. Voor het gemak zijn ze onderverdeeld in categorieën: navigatie (sitestructuur, navigatiemenu), tekenen (lijn, curve, polygoon), multimediatools (Flash player, YouTube player, Java, OLE-object), tools voor het werken met webformulieren (een veld voor het invoeren van een CAPTCHA-code, een selectievakje, een knop om een ​​bestand te downloaden, een veld voor het invoeren van tekst), Paypal (verschillende knoppen om met dit elektronische betalingssysteem te werken), enz. Als u geen geldcategorie in uw werkt, kunt u het samenvouwen om ruimte op het scherm vrij te maken voor meer gevraagde tools.

Het is de moeite waard om aandacht te besteden aan de categorie Extra. Hier zijn verzamelde hulpmiddelen voor het maken van een fotogalerij, het toevoegen van een abonnement op nieuws in RSS-formaat, diavoorstellingen, zoeken op de site. U vindt hier ook een hele verzameling kant-en-klare elementen van Javascript-code. Dit zijn verschillende visuele effecten en handige hulpmiddelen zoals het bepalen van de huidige versie van de browser, het weergeven van informatie over het tijdstip waarop de webpagina voor het laatst is gewijzigd, en het plaatsen van een link om de pagina te bookmarken.

Ondanks dat de gebruiker bij het werken in de WYSIWYG Web Builder de kant-en-klare elementen van de pagina ziet, kan de site er in de browser toch iets anders uitzien dan in het werkvenster van de editor. Om snel het uiterlijk van een pagina in een browser te bekijken, drukt u gewoon op de F5-toets. De WYSIWYG Web Builder opent het project in de standaardbrowser op het systeem. Als u pagina's in meerdere browsers tegelijk wilt bekijken, kunt u deze aan de lijst toevoegen.

Een sitesjabloon bestaat doorgaans uit meerdere pagina's. Voor handig projectbeheer is er een speciaal Site Manager-paneel in het programmavenster, waar de boomstructuur van de sitepagina's wordt weergegeven. Met behulp van de tools van dit paneel kunt u nieuwe pagina's maken op basis van sjablonen, pagina's toevoegen die eerder op de harde schijf zijn opgeslagen, bestaande pagina's kopiëren, hun eigenschappen bekijken, enz.

Tijdens het werken aan een bron die bestaat uit een groot aantal pagina's, programmatools zoals het controleren van koppelingen op bruikbaarheid, het schatten van de paginagrootte en een sitemapgenerator in de vorm van een XML-bestand dat in de hoofdmap van de site kan ook van pas komen. Bovendien kan WYSIWYG Web Builder u helpen alle afbeeldingen en andere multimediabestanden die op webpagina's worden gebruikt op één plaats te verzamelen.

Ondanks het feit dat de WYSIWYG Web Builder zelf een redelijk functionele editor is, is het mogelijk dat je er geen tool in aantreft. In dit geval is het de moeite waard om de extensiegalerij te bekijken - misschien is de tool die je nodig hebt beschikbaar als plug-in. Er zijn meer dan 250 extensies voor het programma en hun aantal neemt voortdurend toe. Extensies zijn geschreven door actieve gebruikers van de editor en geplaatst op het officiële forum. Houd er rekening mee dat u geen extensies kunt koppelen aan de proefversie van WYSIWYG Web Builder, hiervoor moet u het programma registreren.

⇡ Web Page Maker 3.21

  • ontwikkelaar: www.webpage-maker.com
  • distributiegrootte: 3,66 Mb
  • distributie: shareware
  • Russische interface: nee

Web Page Maker is een vrij eenvoudige visuele editor die geschikt is voor het maken van een kleine site met meerdere pagina's. Met zijn hulp kunt u tekst, vectorelementen, grafische bestanden, video's in verschillende formaten, tabellen, webformulieren en andere bekende pagina-elementen aan de pagina toevoegen.

Het programma heeft ook kant-en-klare versies van zo'n belangrijk element van elke site als het navigatiemenu. Web Page Maker bevat verschillende menu-opties. Nadat u de juiste hebt gekozen, kunt u deze onmiddellijk bewerken door de oriëntatie (horizontaal of verticaal), de afstand tussen de elementen, de parameters van de tekst en links op te geven.

Sommige elementen (bijvoorbeeld hetzelfde navigatiemenu) zouden op alle pagina's van de site moeten staan. Wanneer u een blok bewerkt, kunt u het snel op alle pagina's van het huidige project plaatsen, of de pagina's specificeren waar het aanwezig moet zijn.

Het grootste deel van het programmavenster wordt ingenomen door het werkgebied en aan de rechterkant is het deelvenster Site-inhoud. Met behulp van dit paneel is het handig om sitepagina's en afzonderlijke pagina-elementen te beheren. Het tabblad Elementen toont alle blokken op de pagina en door op elk ervan te klikken, kunt u meteen zien waar het zich bevindt. Bovendien kunt u voor elk element direct het eigenschappenvenster oproepen of onnodige blokken verwijderen. Wat betreft de set hulpmiddelen voor het maken van een sitestructuur, is het vermeldenswaard de mogelijkheid om een ​​nieuwe pagina te maken op basis van een bestaande bron op internet. Geef gewoon het adres op en Web Page Maker laadt de pagina, verdeelt deze in blokken en maakt ze bewerkbaar.

Animatie-effecten kunnen worden gebruikt om de site levendiger te maken. Voorbeelden van kant-en-klare Javascript-code zijn te vinden in de Web Page Maker-bibliotheek. Hiermee kunt u de schuifkleur van het venster wijzigen, een klok met de huidige tijd in de hoek van het scherm plaatsen, een diavoorstelling toevoegen, enz.

Wanneer het werk aan de site is voltooid, kan het project worden opgeslagen op uw harde schijf of onmiddellijk worden geüpload naar een FTP-server. Bovendien is hiervoor geen extra client nodig - Web Page Maker heeft ingebouwde tools om met FTP te werken.

⇡ CoffeeCup Visual Site Designer 6.06

  • ontwikkelaar: CoffeeCup Software
  • distributiegrootte: 17,6 MB
  • distributie: shareware
  • Russische interface: nee

De ontwikkelaars van CoffeeCup Visual Site Designer laten zich waarschijnlijk leiden door de slogan "verdien geld met alles waar je geld mee kunt verdienen" in het leven. Daarom moet u er rekening mee houden dat als u deze visuele editor voor $ 49 koopt, u ​​niet alle functies tot uw beschikking krijgt waarop u kunt rekenen na aanschaf van de meeste andere vergelijkbare programma's.

Het programma wordt dus geleverd met tien sjablonen en om de rest te downloaden, wordt u uitgenodigd om door te gaan naar de site van de ontwikkelaar. Wanneer u de bijbehorende pagina opent, zult u zien dat extra sjablonen worden betaald en worden verkocht voor $ 9 per stuk. Soortgelijke "verrassingen" wachten op de gebruiker tijdens het werken met de applicatie. Klik op de knop van de webformuliertool en u zult zien dat u nog eens $ 39 moet betalen om ermee te werken, probeer een fotogalerij aan de site toe te voegen en u zult zien dat deze functie extra kosten met zich meebrengt.

De standaardversie van het programma maakt het mogelijk om met tekst, vectorelementen, afbeeldingen te werken. Na het selecteren van een tool verschijnt een zwevend palet met zijn instellingen op het verticale paneel. Het blijft op het scherm totdat de gebruiker van instrument verandert. Dankzij deze aanpak wordt er zoveel mogelijk ruimte toegewezen aan het werkgebied.

Gemeenschappelijke elementen van webpagina's, zoals tellers en webformulieren, kunnen alleen in het programma worden gemaakt met een tool voor het invoegen van aangepaste HTML-code.

Bij het werken met vectorelementen (pijlen, polygonen, sterren, toelichtingen, enz.), kunt u tal van hulpmiddelen gebruiken om hun uiterlijk te veranderen. Het is bijvoorbeeld mogelijk om de transparantie te wijzigen, een schaduw toe te voegen, een object driedimensionaal te maken, het te laten gloeien of van vorm te veranderen tijdens het zweven. Bovendien kunt u de vulling van elk object aanpassen, een textuur toevoegen.

De CoffeeCup Visual Site Designer heeft een ingebouwde FTP-client waarmee u uw site kunt uploaden naar een externe server. Als u na het laden van de site besluit om enkele van de pagina's te wijzigen, kunt u de gegevenssynchronisatiefunctie gebruiken. In dit geval laadt het programma de pagina's die zijn gewijzigd. Indien nodig kunt u de site zelfs volledig van de server verwijderen zonder de CoffeeCup Visual Site Designer te verlaten.

⇡WebSite X5 Evolution 8

  • ontwikkelaar: Incomedia
  • distributiegrootte: 15,3 MB
  • distributie: shareware
  • Russische interface: ja

De meeste visuele editors lijken op elkaar. Dit heeft zijn voordelen, want nadat je met een van deze programma's te maken hebt gehad, voel je je al zeker als je later besluit een andere te proberen. Als u echter nog nooit met het maken van websites te maken heeft gehad, kan zelfs de eenvoudigste visuele editor in het begin veel vragen oproepen, zoals: "wat moet er eerst gebeuren?", "Welke tools van het programma zijn standaard en welke zijn extra?" enzovoort.

WebSite X5 Evolution heeft een iets andere benadering van het maken van websites, dus veel vragen verdwijnen vanzelf. De werking van de applicatie is gebaseerd op het principe van een stapsgewijze wizard, waardoor een beginnende gebruiker er zeker van kan zijn dat hij niets belangrijks heeft gemist.

Ondanks het feit dat de wizard u door alle fasen van het maken van een project leidt, kan de gebruiker, indien gewenst, enkele fasen "overslaan" en in het zijmenu de acties kiezen die hij op dat moment wil uitvoeren. Er zijn in totaal vijf fasen.

De eerste toont de algemene instellingen. Dus hier worden de naam van de site, auteur en taal ingevoerd, trefwoorden geselecteerd, de Favicon wordt geladen, het menutype wordt geselecteerd (horizontaal of verticaal), een geschikte sjabloon wordt geselecteerd (er zijn meer dan honderd ontwerpopties in de programmabibliotheek), wordt het uiterlijk van de bovenste en onderste delen van de sitepagina's ingesteld.

In de tweede fase wordt voorgesteld om een ​​sitemap te maken, dat wil zeggen, na te denken over de structuur ervan. Met de knoppen "kopiëren" en "plakken" op de werkbalk kunt u nieuwe pagina's maken op basis van de bestaande. Hier kunt u bepalen welke pagina's van de bron worden verborgen, specificeer de vernieuwingsfrequentie voor elke pagina.

Als u dubbelklikt op de naam van de pagina, gaat u naar de volgende fase van het werk op de site, en hier is het al mogelijk om rechtstreeks met de inhoud ervan om te gaan. Standaard is de pagina opgedeeld in vier blokken, aan elk waarvan u een object kunt toevoegen: tekst, grafisch bestand, diavoorstelling, tabel, flash-animatie, multimediabestand, enz. Indien gewenst kan het aantal blokken op de pagina worden vergroot of verkleind. Nadat u een object op de pagina hebt geplaatst, moet u de instellingen ervan definiëren, bijvoorbeeld het pad naar een grafisch bestand opgeven, tekst typen, enz. Al deze bewerkingen moeten voor elke pagina worden uitgevoerd.

In de vierde stap vraagt ​​WebSite X5 Evolution u om enkele aanvullende instellingen op te geven, zoals het uiterlijk van de introductiepagina definiëren, de weergave-opties voor flash-advertenties instellen en een blog en RSS-feed aan de site toevoegen.

Tot de aangeboden mogelijkheden behoort een element als de "E-commerce winkelwagen". Hiermee kunt u snel uw eigen online winkel maken. Als u naar de instellingen gaat, kunt u snel productcategorieën maken, leveringsvoorwaarden definiëren, betalingsopties selecteren, een licentieovereenkomst invoegen en het uiterlijk van winkelitems aanpassen.

Ten slotte wordt in de laatste stap het project geëxporteerd. De voltooide site kan worden opgeslagen op uw harde schijf of onmiddellijk worden geüpload naar een FTP-server. Bovendien maakt het programma het mogelijk om projectbestanden op te slaan om ze over te zetten naar een andere computer. Houd er rekening mee dat het project dat wordt gemaakt, in elk stadium in het eigen formaat van het programma kan worden opgeslagen.

Misschien is het enige ongemak bij het werken met WebSite X5 Evolution het onvermogen om pagina's in een browser te bekijken. Als u wilt zien hoe de site eruit zal zien, kunt u de "Test"-functie gebruiken, maar het duurt even om het project te genereren. Bovendien genereert het programma pagina's in zijn eigen viewer, gemaakt op de Internet Explorer-engine.

⇡ KompoZer 0.7.10

  • ontwikkelaar: Fabien Cazenave
  • distributiegrootte: 7,9 MB
  • distributie: gratis
  • Russische interface: ja

KompoZer is een gratis open source visuele webeditor. Het programma is niet alleen beschikbaar voor Windows, maar ook voor Mac en Linux. De editor is gemaakt op de Gecko-engine, waarop de bekende Firefox-browser draait. Dit heeft een aantal voordelen: ten eerste ondersteunt de engine perfect moderne webstandaarden zoals XML, CSS en JavaScript. Ten tweede kan de op Gecko gebaseerde editor worden uitgebreid met plug-ins.

Misschien is de eerste add-on die u wilt installeren het Russische lokalisatiepakket. Het wordt op vrijwel dezelfde manier geïnstalleerd als plug-ins voor Firefox: selecteer in het menu Extra de opdracht Extensies en geef vervolgens het pad op naar het gedownloade lokalisatiebestand met de extensie .xpi. Na het installeren van de plug-in moet u het programma opnieuw opstarten, waarna de interface Russisch wordt.

Een FTP-client is geïntegreerd in het programma, bovendien kan het niet alleen worden gebruikt om het voltooide project te downloaden, maar ook om snel de pagina's van de site die al op de server wordt gehost, te bewerken. Nadat u de aanmeldingsgegevens voor de server hebt opgegeven, kunt u door de directorystructuur navigeren en pagina's selecteren om te bewerken. Hun inhoud wordt in het KompoZer-venster geladen en kan direct worden bewerkt.

KompoZer maakt het mogelijk om met meerdere pagina's tegelijk te werken. Elk van hen opent in een apart tabblad, waar u snel tussen kunt schakelen. Elke pagina heeft zijn eigen geschiedenis voor ongedaan maken en opnieuw uitvoeren. Door naar het icoon in de kop van een tabblad te kijken, kun je direct zien of er wijzigingen zijn in de pagina-inhoud die nog niet zijn opgeslagen.

Hoewel KompoZer zelf de code voor de webpagina's genereert, kunt u deze bekijken en indien nodig enkele wijzigingen aanbrengen. Er zijn tabbladen onderaan elke pagina die u kunt gebruiken om te schakelen tussen de visuele weergave van de pagina en de weergave van de code.

Standaard worden de meest gebruikte tools op de programmabalk geplaatst: een hyperlink toevoegen, een afbeelding invoegen, tabellen, tools voor het maken van webformulieren, enz. Als u wilt, kunt u het uiterlijk van dit paneel wijzigen (bijvoorbeeld door de pictogrammen kleiner te maken) en er ook enkele andere hulpmiddelen aan toevoegen.

Over het algemeen is KompoZer, ondanks het feit dat KompoZer een visuele webeditor is, ontworpen voor gebruikers die al enige ervaring hebben met het maken van sites. U zult geen kant-en-klare sjablonen en voorbeelden van navigatiemenu's vinden, maar het programma heeft een krachtige CSS-editor geïntegreerd, tools voor het controleren van HTML-code en spellingcontrole.

⇡ BestAddress HTML-editor 17

  • ontwikkelaar: Multimedia Australië
  • distributiegrootte: 7,1 MB
  • distributie: shareware
  • Russische interface: nee

Wanneer een gebruiker besluit een bepaald gebied te bestuderen, bijvoorbeeld computergraphics, videobewerking of programmeren, stelt hij meer ervaren kameraden vaak een vraag - met welk programma het beste is om een ​​nieuw ambacht onder de knie te krijgen. In sommige gevallen is het echt beter om in het begin eenvoudige hulpmiddelen te gebruiken en vervolgens, nadat u hun mogelijkheden heeft begrepen, over te gaan naar meer geavanceerde editors. Wat betreft BestAddress HTML Editor 2010 Professional, kunnen we zeggen dat dit programma alle kans heeft om het eerste en laatste hulpmiddel te worden voor de beginnende webontwikkelaar.

Werken in de modus van visuele constructie van een webpagina lijkt op werken met een ontwerper - u kunt naar eigen goeddunken de grootte en kleur van elementen, plaatsknoppen, afbeeldingen, menu's en andere componenten van de site instellen. Handige opmaak, bijna zoals in een teksteditor, kan worden gebruikt om de positie van pagina-elementen te bepalen. U vindt geen sjablonen in BestAddress HTML Editor 2010 Professional, maar u kunt een webpagina downloaden die zich op het opgegeven adres bevindt. Nadat u de pagina in het programma hebt geopend, kunt u deze vervolgens bewerken.

De editor kan het project automatisch uploaden naar de server - hiervoor gebruikt het programma de meegeleverde FTP-client Digital FTP Access.

BestAddress HTML Editor 2010 Professional bevat ook professionele coderingstools. Nieuwelingen die willen begrijpen hoe HTML-, CSS-, Java- en PHP-code werken en schrijven, kunnen de documentatie raadplegen. Het schetst de belangrijkste regels voor het schrijven van code, zoals - het toewijzen van tags, voorbeelden van de eenvoudigste bewerkingen, enz. Eenvoudige en duidelijke tutorials geven een snel begrip van de structuur van HTML en houden de nieuweling up-to-date.

⇡ Conclusie

Met de programma's die in deze review worden beschreven, kunt u snel uw site maken en op internet plaatsen. Houd er echter rekening mee dat al deze toepassingen slechts hulpmiddelen zijn in de handen van de gebruiker. Of de site de aandacht van bezoekers zal trekken, of het een extra onderdeel van zakelijk succes zal worden, hangt uitsluitend af van de verbeeldingskracht van de auteur en van zijn verlangen om te verbeteren wat hij begon. En natuurlijk, om ervoor te zorgen dat de site de gestelde hoop rechtvaardigt, moet je poging gepaard gaan met veel geluk, wat we iedereen wensen!