Vizuális html szerkesztő. Vizuális HTML szerkesztő

Vizuális HTML- a Macromedia Dreamweaverhez hasonló szerkesztő, de teljesen ingyenes. Remek eszköz kezdőknek, akik csak most kezdik elsajátítani a weboldalkészítés tudományát.

Miért jó? Igen, az a tény, hogy egy weboldal létrehozásához nem kell bajlódnia a webes programozási nyelvek tanulmányozásával. Csak szöveget kell begépelnie, képeket vagy animációkat szúrnia be, és az NVU elvégzi a HTML formátumban való formázással kapcsolatos összes "piszkos" munkát.

Sajnos jelenleg az NVU fejlesztése szünetel, de a projekt az első stabil verzióra nőtt, és ez már sok. Nézzük meg részletesebben.

NVU képességek

• a szerkesztett oldal különböző megjelenítési módjai;
• bőséges lehetőségek a szövegtervezéshez;
• képek beszúrása (beleértve a háttereket is);
• a teljes webhelyen való munkavégzés képessége, nem csak az egyes oldalakon;
• táblázatok és űrlapok készítése;
• a szerkesztett oldal közzététele közvetlenül a szerkesztőtől;
• saját lépcsőzetes stíluslap (CSS) szerkesztő és Java Script konzol.

Mindez és még sok más lehetővé teszi, hogy minimális (lehetőleg) HTML ismeretekkel (vagy azok teljes hiányával :) a semmiből készítsünk egy kis oldalt.

A vizuális szerkesztő telepítése

Letöltés... Telepítés... Indítás és megtekintés :) (igaz - nincs felesleges gesztus oroszosítással, további információk megadásával stb.).

Megállapodunk, hogy létrehozunk egy parancsikont az asztalon, és elindítjuk vele az NVU-t.

NVU interfész

Első pillantásra az NVU hasonlít néhányra szöveg szerkesztő. Ez a fő érdeme - vizuális GUI.

De lefelé nézve látni fogja, hogy a szokásos mellett számos további mód is van a beírt információk megjelenítésére:

• HTML címkék;
• és előnézet.

HTML címke mód

A "HTML-címkék" egyfajta szövegből és címkékből álló mozaik, amelyet színes téglalapként terveztek.

Ez a nézeti mód a kezdő felhasználók számára hasznos, mivel megjeleníti az összes használt fő címkét, ugyanakkor nem zavarja őket nagy számmal, miközben ugyanaz a vizuális szerkesztő.

Ezenkívül ebben a módban kényelmes a címkék neveinek tanulmányozása, hogy később könnyen felhasználhassa őket a kódszerkesztő módban.

Mód kód

A "Kód" mód minden webfejlesztő számára ismerős ablak a szerkesztett oldal HTML-kódjával. Innen, ezekből az emblémákból származik az internet összes erőforrása.

Miután elsajátította a kódnyelvet, könnyedén hozzáadhat webhelyéhez minden olyan vezérlőt, szkriptet és egyéb "jót", amelyet mások webhelyein megszokott csodálni :).

Előnézet

És végül, az „Előnézet” lehetővé teszi, hogy értékelje erőfeszítéseink eredményét, és az oldalt olyan formában jelenítse meg, amelyet az interneten szerez.

A képernyőképen nem különbözik a szöveges megfelelőtől, de érdemes bármilyen navigációs elemet vagy szkriptet hozzáadni, mivel a különbség megmutatkozik:

Ha ezt az oldalt a Jegyzettömbben szerkeszti, mint egy hardcore programozó, legalább egy böngészőre és egy helyi webszerverre van szüksége a megtekintéséhez.

És itt, ahogy mondják, már "all inclusive".

Most, hogy a megtekintési és szerkesztési lehetőségeket kicsit tisztáztuk, nézzük meg alaposabban az NVU képességeit.

Az NVU Visual HTML Editor rejtett funkciói

Minden alapvető formázási lehetőség elérhető ikonként, de néhány lehetőség el van rejtve a menüsorban.

Például a "Fájl" menüben olyan funkciókat találhat, mint:

1. "Nyisson meg egy címet az interneten." A Mozilla motorjának köszönhetően közvetlenül az internetről nyithat meg és szerkeszthet oldalakat.

Ez nagyon hasznos lehet, ha látni szeretné, hogyan működik ez vagy az a funkció a webhelyen. Csak írja be a címet a megnyíló ablakban, és csodálja meg az eredményt:

2. "Exportálás szöveges formátumba". Az oldal megcsodálása után a forráskódját .txt formátumban mentheti merevlemezére.

A "Szerkesztés"-ben vannak olyan eszközök, amelyek segítségével megkeresheti a megfelelő szavakat a szövegben és ellenőrizheti a helyesírást.

A "Beszúrás" menüben figyelni lehet a PHP kód és a billentyűzeten nem található karakterek beszúrásának lehetőségére.

A "Formátum" opciók széles skáláját kínálja a szöveg, a képek és egyéb információk megjelenésének testreszabásához.

A legérdekesebb, és ami a legfontosabb, hogy itt sehol sem jelenik meg az "Oldalszín és háttér". Ezzel a lehetőséggel könnyedén hozzáadhat bármilyen háttérképet, vagy egyszerűen kiválaszthat egy jó háttérszínt a webhelyhez.

Végül az "Eszközök" menü olyan lehetőségeket kínál, mint a JavaScript-konzol, a CSS-szerkesztő és a HTML-kód-ellenőrző eszköz elérése.

Szintén innen érheti el a programbeállításokat és az NVU-téma beállításait.

következtetéseket

Az NVU könnyen érthető, mivel a program minden vezérlőeleme eszköztippekkel és magyarázatokkal van ellátva, és a Mozilla.ru Team orosz fejlesztőinek egy csoportjának köszönhetően orosz nyelven is nagyon jó segítség található.

Az NVU egyetlen hátránya, hogy a program által generált kód nagyon körülményes és sok felesleges címkét tartalmaz. De legyen ez csak ösztönzés arra, hogy tanulmányozza a HTML-t, és optimalizálja és tökéletesítse webhelyét.

Sok sikert a fejlesztésekhez, és sok sikert minden törekvésében!

P.S. A cikk szabadon másolható és idézhető, feltéve, hogy a forrásra mutató nyílt aktív hivatkozást feltüntetik, és Ruslan Tertyshny szerzőségét megőrzik.

Az NVU egy kis program a HTML kód szerkesztésére. HTML szerkesztő Az NVU vizuális felülettel rendelkezik, és létezik különféle operációs rendszerekhez. Ez a kódszerkesztő a Mozilla Composer HTML szerkesztő alapján készült, aminek eredményeként az NVU meglehetősen egyszerű és érthető, képességeit tekintve pedig már messze megelőzi az eredeti programot, és megközelítette a funkcionalitást. olyan fizetett szerkesztők, mint a Dreamweaver és a FrontPage.

Ennek a kódszerkesztőnek az egyik előnye, hogy letöltheti az NVU-t orosz nyelven. Az NVU orosz oldala teljesen le van fordítva, ami megkönnyíti azoknak a felhasználóknak a dolgát, akik nem ismerik angol nyelv. Ha letölti az NVU-t ingyen oroszul, akkor megkapja kényelmes program jó minőségű oldal vagy webhely létrehozásához, még akkor is, ha teljesen kezdő vagy. A szerkesztőben olyan webhelyeket hozhat létre, amelyek megfelelnek az összes szükséges internetes szabványnak.

A tapasztaltabb felhasználók, ha szükséges, közvetlenül szerkeszthetik a kódot. Ezenkívül az NVU más eszközökkel is rendelkezik, mint például a Site Manager és a CSS Editor. Ezekkel szerkesztheti a megnyitott oldalakat távoli szerver, használjon szintaktikai kiemelést, ellenőrizze a hibakódot stb. A szerkesztő felülete könnyen változtatható a különböző témák használatával, a lehetőségek pedig egyszerűen bővíthetők az NVU-hoz készített bővítmények telepítésével.

A szerkesztő összes funkcióját használhatja, ha néhány percen belül letölti az NVU-t. Ez a HTML-szerkesztő lapokkal, előnézetekkel és hozzáféréssel rendelkezik a leggyakrabban használt címkékhez, ami sokkal gyorsabbá teszi a webhelyfejlesztést. A szöveg módosítására is számos lehetőség van: középre igazítás, betűtípus, stílus stb.

Az NVU HTML szerkesztő jellemzői

• telepíthető Windows, Linux, Mac OS X rendszerre;
• Megtekinthető és módosítható nyílt forráskód;
• a felhasználó személyesen módosíthatja vagy módosíthatja a programot saját céljaira;
• a HTML és CSS kód közvetlen szerkesztésének lehetősége;
• a számítógép által elfoglalt kis lemezterület;
• az elemek olyan tulajdonságokkal rendelkeznek, amelyek paraméterei konfigurálhatók;
• szintaxis kiemelése.

Vlad Merzsevics

A hatékony munka érdekében nem nélkülözheti a szükséges és ismert eszközöket, beleértve a HTML-kód írását is. Ezért a weboldalak vagy akár egy kis webhely kezdeti fejlesztéséhez - ez a hivatkozásokkal és egyetlen tervezéssel összekapcsolt oldalkészlet neve - a következő programokra van szükségünk.

• Szöveg szerkesztő.
• Böngésző az eredmények megtekintéséhez.
• A Validator egy program a HTML szintaxis ellenőrzésére és a kód hibáinak észlelésére.
• Grafikus szerkesztő.
• Hivatkozás a HTML címkékre.

Szöveg szerkesztő

HTML dokumentum bármilyen szövegszerkesztőben elkészíthető, akár Jegyzettömbben is, azonban nem minden program alkalmas erre a célra. Olyanra van szüksége, amely támogatja a következő szolgáltatásokat:

• szintaxis kiemelés - címkék, szövegek, kulcsszavak és paraméterek kiemelése különböző színekkel. Ez megkönnyíti a kívánt elem megtalálását, felgyorsítja a fejlesztő munkáját és csökkenti a hibák előfordulását;
• füles munka. Az oldal külön-külön szerkesztendő fájlok halmaza, amihez egy szerkesztőre van szükség, aki egyszerre több dokumentummal is tud dolgozni. Ugyanakkor kényelmes a fájlok külön lapokon történő megnyitása a kívánt dokumentumhoz való gyors navigáció érdekében;
• az aktuális dokumentum hibáinak ellenőrzése.

PSPad

HtmlReader

Jegyzettömb++

Plusz szerkesztése

Böngésző

A böngésző egy olyan program, amelyet weboldalak megtekintéséhez terveztek. Eleinte bármelyik böngésző megteszi, de a tapasztalat és a tudás növekedésével egy egész "menázsiát" kell indítania, hogy ellenőrizze a webhely helyes megjelenítését a különböző böngészőkben. Az a tény, hogy minden böngészőnek megvannak a maga egyedi jellemzői, ezért a kód egyetemességének ellenőrzéséhez át kell tekintenie és módosítania kell a kódot, hogy ezeket figyelembe vegye. Ma a három legnépszerűbb böngésző a Firefox, internet böngészőés az Opera.

Mozilla Firefox

Ígéretes és fejlődő böngésző, amely világszerte elismerést kapott. Jellemzője az egyszerűség és a bővíthetőség, amelyet speciális kiterjesztések révén érnek el, ahogy nevezik őket. A Firefox kezdetben csak a legszükségesebb funkciókat tartalmazza, de a kívánt bővítmények telepítésével végül olyan rendszerré fejlesztheti a böngészőt, amely végrehajtja a munkája elvégzéséhez szükséges összes műveletet. A Firefox böngésző a Mozilla csoport által kifejlesztett nyílt rendszer.

Microsoft Internet Explorer (IE)

Az egyik legrégebbi böngésző, amely az operációs rendszerrel ingyenes Windows rendszer. Ez meghatározta népszerűségét. Az IE 7 verzió a kényelem szempontjából közelebb áll régi versenytársaihoz, különösen a fülek jelentek meg. Sajnos ez a böngésző támogatja a legrosszabbul a HTML specifikációt, így az IE-ben való helyes megjelenítéshez néha külön-külön kell debugolni a kifejezetten hozzá tartozó kódot.

Opera

Gyors és kényelmes böngésző, amely számos további funkciót támogat, amelyek növelik a webhelyekkel való munka kényelmét.

szafari

Az Apple által kifejlesztett böngésző beépített iPhone és operációs rendszer MacOS az Apple számítógépeken. Van egy Windows-verzió is.

Google Chrome

Egy böngésző, amely 2008 végén jelent meg a piacon. A Google által kifejlesztett.

Validátor

A HTML-dokumentum érvényesítése a weboldal szintaxisának hibáinak és a HTML-specifikációtól való eltérések észlelésére szolgál. Ennek megfelelően az ilyen ellenőrzésre szolgáló programot vagy rendszert validátornak nevezzük.

Hogyan ellenőrizhető a HTML-fájl érvényessége

Ha rendelkezik internet-hozzáféréssel, lépjen a http://validator.w3.org webhelyre, és egy speciális űrlapon adja meg az ellenőrizni kívánt dokumentum vagy webhely elérési útját. Az érvényesítés után megjelennek az esetleges hibák, vagy megjelenik egy felirat, hogy a dokumentum érvényesítése sikeresen megtörtént.

Takaros

Helyi HTML-fájl ellenőrzésére, vagy ha nincs internetkapcsolat, a Tidy programot tervezték. Egyes szerkesztők, például a PSPad, már tartalmaznak beépített Tidy-t, és a dokumentumok ellenőrzése további eszközök nélkül is elvégezhető.

Grafikus szerkesztő

A képek feldolgozásához és a weboldalon való közzétételhez grafikus szerkesztő szükséges. A legnépszerűbb ilyen program a Photoshop, amely a fotók feldolgozásának és a weboldalak grafikai készítésének szabványává vált. De a Photoshop ereje legtöbbször túlzás, és jobb valami egyszerűbb és ügyesebbet használni. Különösen a Paint.Net program lehetővé teszi az összes szükséges manipuláció elvégzését a képekkel, ráadásul ingyenesen használható.

HTML címkereferencia

Először nehéz fejből megjegyezni az összes címkét és paramétereiket, ezért időnként át kell tekintenie a kézikönyvet egy adott probléma tisztázása érdekében. Általában mindenkinek szüksége van egy jó vezetőre, függetlenül a képzettség szintjétől.

Online könyvtárak

A HTML-címkék leírása (angol nyelven)
http://www.w3.org/TR/html4/index/elements.html

Ezen a webhelyen megtalálja a Runet címkéinek egyik legjobb útmutatóját is.

A Macromedia Dreamweaverhez hasonló vizuális HTML-szerkesztő, de ingyenes.

Legutóbb arról beszéltem, hogyan ellenőrizheti webhelye teljesítményét a használatával helyi Denver szerver. De maga az oldal létrehozásának kérdése megoldatlan maradt. Próbáljuk meg kijavítani ezt a bosszantó mulasztást – ma egy olyan programról mesélek, amivel akár HTML programozás és egyéb trükkök ismerete nélkül is elkészíthetsz egy egyszerű weboldalt.

felhívom a figyelmét ingyenes vizuális HTML szerkesztő NVU.

Miért jó? Igen, az a tény, hogy egy weboldal létrehozásához nem kell bajlódnia a webes programozási nyelvek tanulmányozásával. Csak beírsz szöveget, beszúrsz képeket vagy animációkat, és a HTML-ben való díszítés minden "piszkos" munkája átveszi az irányítást. NVU.

Sajnos jelenleg a fejlesztés NVU felfüggesztették, de a projekt az első stabil verzióra nőtt, és ez már sok.

NVU képességek

• támogatás több megjelenítési mód szerkeszthető oldal;
• speciális opciók szövegszerkesztés;
• beszúrni képeket(beleértve a hátteret is);
• szerkesztés egyes oldalak és teljes webhelyek;
• űrlapok és táblázatok létrehozása;
• helyesírás-ellenőrzés;
• lehetőség helyszíni kiadványok közvetlenül a programból;
• beépített CSS szerkesztő és Java Script konzol.

Mindez és még sok más lehetővé teszi, hogy minimális (lehetőleg) HTML ismeretekkel (vagy azok teljes hiányával :) a semmiből készítsünk egy kis oldalt.

Letöltés... Telepítés... Indítás és megtekintés :) (igaz - nincs felesleges gesztus oroszosítással, további információk megadásával stb.). Fogadja el, hogy létrehoz egy parancsikont az asztalon, és futtassa vele NVU:

NVU interfész

Egy pillantásból NVUúgy néz ki, mint valami szövegszerkesztő. Ez a fő érdeme - egy vizuális grafikus felület. De ha lentebb nézünk, látni fogja, hogy a szokásoson kívül még több van megjelenítési módok bevitt információk: HTML-címkék, kód és előnézet.

HTML címke mód

"HTML címkék" egyfajta szövegből és címkékből álló mozaik, amelyet színes téglalapként terveztek. Ez a nézeti mód a kezdő felhasználók számára hasznos, mivel megjeleníti az összes használt fő címkét, ugyanakkor nem zavarja őket nagy számmal, miközben ugyanaz a vizuális szerkesztő. Ebben a módban jó megtanulni a címkék neveit, hogy később kódszerkesztő módban is könnyen használható legyen.

Mód kód

Mód "A kód" egy ablak a szerkesztett oldal HTML kódjával, amely minden webfejlesztő számára ismerős. Innen nő ki az internet összes forrása ezekből a firkákból. Miután elsajátította a kódnyelvet, könnyedén hozzáadhat webhelyéhez minden olyan vezérlőt, szkriptet és egyéb "jót", amelyet mások webhelyein megszokott csodálni :).

Előnézet

És végül "Előnézet" lehetővé teszi, hogy értékelje erőfeszítéseink eredményét, és az oldalt olyan formában jelenítse meg, ahogyan azt az interneten megszerzi. A képernyőképen nem különbözik a szöveges megfelelőtől, de érdemes bármilyen navigációs elemet vagy szkriptet hozzáadni, mivel a különbség megmutatkozik:

Most, hogy a megtekintési és szerkesztési lehetőségeket kicsit tisztáztuk, nézzük meg alaposabban a lehetőségeket. NVU. Kölcsönhatásba kerül programmal használhatja menüsor vagy használatával piktogramokés az alatta lévő szimbólumok.

Az NVU Visual HTML Editor rejtett funkciói

Minden alapvető formázási lehetőség elérhető ikonként, de néhány lehetőség el van rejtve a menüsorban, és nem jelenik meg azonnal.

Például a menüben "Fájl" Találsz ilyeneket funkciók,, hogyan:

1. "Cím megnyitása az interneten". A Mozilla motorjának köszönhetően közvetlenül az internetről nyithat meg és szerkeszthet oldalakat. Ez nagyon hasznos lehet, ha látni szeretné, hogyan működik ez vagy az a funkció a webhelyen. Csak írja be a címet a megnyíló ablakban, és csodálja meg az eredményt:

2. "Exportálás szöveges formátumba". Az oldal megcsodálása után a forráskódját .txt formátumban mentheti merevlemezére.

NÁL NÉL "Szerkesztés" eszközök vannak hozzá keresés a megfelelő szavakat a szövegben és helyesírás-ellenőrző.

A menün "Beszúrás" figyelmet lehet fordítani arra a lehetőségre PHP kód beillesztésés olyan karakterek, amelyek nincsenek a billentyűzeten.

"Formátum" számára nyújtja a legnagyobb lehetőségeket szövegnézet beállításai, képeketés egyéb információk. Itt van a legérdekesebb, és ami a legfontosabb, sehol nem mutatott lehetőség "Az oldal színe és háttere". Ezzel az opcióval könnyedén hozzáadhat bármilyen háttérképet, vagy egyszerűen beállíthatja a webhely háttérszínét.

Végül a menü "Eszközök" olyan funkciókat biztosít, mint a hozzáférés JavaScript konzolok, szerkesztő cssés eszköze HTML érvényesítés kód. Innen is elérheti beállítások programok és téma beállítások tervezés NVU.

NÁL NÉL NVU könnyen érthető, mivel a programban szereplő összes kezelőszerv fel van szerelve eszköztippekés magyarázatokat, valamint köszönetet mondunk egy orosz fejlesztőcsoportnak Mozilla csapat van egy nagyon jó is segítség oroszul. Az egyetlen negatívum NVU van, hogy a program által generált kód nagyon körülményes és sok extra tag van benne. De legyen ez csak ösztönzés arra, hogy tanulmányozza a HTML-t, és optimalizálja és tökéletesítse webhelyét.

Sok sikert a fejlesztésekhez és sok sikert minden igyekezetedhez :)!!!

P.S. Ez a cikk ingyenes terjesztésre készült. Szívesen másolható a szerzőség megőrzése mellett Ruszlan Tertysnijés minden P.S. és P.P.S.

P.P.S. Tetszhet egy másik meglehetősen értelmes

Én is szeretnék ajánlani egy jót HTML könyv amit magam használtam: