Visuaalne html-redaktor. Visuaalne HTML-i redaktor

Visuaalne HTML- Macromedia Dreamweaveriga sarnane redaktor, kuid täiesti tasuta. Suurepärane tööriist algajatele, kes alles hakkavad veebisaitide loomise teadust omandama.

Miks ta on hea? Jah, see, et veebilehe loomiseks ei pea pead vaevama veebi programmeerimiskeelte õppimisega. Sisestate lihtsalt teksti, sisestate pilte või animatsioone ja NVU hoolitseb kogu selle HTML-vormingus "määrdunud" töö eest.

Kahjuks on hetkel NVU arendus peatatud, kuid projekt on kasvanud esimese stabiilse versioonini ja seda on juba palju. Vaatame seda üksikasjalikumalt.

NVU võimalused

• redigeeritud lehe erinevad kuvamisrežiimid;
• rohked võimalused teksti kujundamiseks;
• piltide (sh taustade) sisestamine;
• võimalus töötada kogu saidil, mitte ainult üksikutel lehtedel;
• tabelite ja vormide loomine;
• toimetatud saidi avaldamine otse toimetajalt;
• enda kaskaadlaadilehe (CSS) redaktor ja Java Scripti konsool.

Kõik see ja palju muud võimaldavad meil luua nullist väikese saidi minimaalsete (soovitavalt) teadmistega HTML-i valdkonnas (või nende täieliku puudumisega :)).

Visuaalse redaktori installimine

Allalaadimine ... Installimine ... Käivitamine ja vaatamine :) (just nii - ei mingeid tarbetuid žeste koos venestamisega, lisateabe sisestamisega jne).

Nõustume looma töölauale otsetee ja käivitama sellega NVU.

NVU liides

Esmapilgul meenutab NVU mõnda tekstiredaktor. See on tema peamine teene - visuaalne GUI.

Kuid alla vaadates näete, et lisaks tavapärasele on sisestatud teabe kuvamiseks veel mitu režiimi:

• HTML-sildid;
• ja eelvaade.

HTML-i sildi režiim

"HTML-sildid" on tekstist ja siltidest koosnev mosaiik, mis on kujundatud värviliste ristkülikutena.

See vaaterežiim on kasulik algajatele kasutajatele, kuna see kuvab kõik peamised kasutatavad sildid ja samal ajal ei häiri neid suure hulga, jäädes samas visuaalseks redaktoriks.

Samuti on selles režiimis mugav uurida siltide nimesid, et hiljem saaksid neid hõlpsasti koodi redigeerimise režiimis kasutada.

Režiimi kood

Režiim "Koodi" on kõigile veebiarendajatele tuttav aken koos redigeeritava lehe HTML-koodiga. Just siit, kõigist nendest Doodle'idest kasvavad kõik Interneti ressursid.

Olles omandanud koodikeele, saate hõlpsalt oma saidile lisada kõik juhtelemendid, skriptid ja muud "maiustused", mida olete harjunud teiste inimeste saitidel imetlema :).

Eelvaade

Ja lõpuks, "Eelvaade" võimaldab teil hinnata meie jõupingutuste tulemust, kuvades lehe sellisel kujul, nagu see Internetis omandab.

Ekraanipildil ei erine see teksti vastest, kuid tasub lisada kõik navigeerimiselemendid või skriptid, kuna erinevus ilmneb ise:

Kui redigeerite seda lehte Notepadis nagu kõva programmeerija, vajate selle vaatamiseks vähemalt brauserit ja kohalikku veebiserverit.

Ja siin, nagu öeldakse, juba "kõik hinnas".

Nüüd, kui vaatamis- ja redigeerimisvõimalused on veidi selgemaks saanud, uurime NVU võimalusi sügavamalt.

NVU visuaalse HTML-i redaktori varjatud funktsioonid

Kõik põhilised vormindamisvalikud on saadaval ikoonidena, kuid mõned valikud on menüüribal peidetud.

Näiteks menüüst "Fail" leiate selliseid funktsioone nagu:

1. "Ava aadress Internetis." Tänu Mozilla mootorile võimaldab teil lehti avada ja redigeerida otse Internetist.

See võib olla väga kasulik, kui soovite näha, kuidas seda või teist saidi funktsiooni tehakse. Lihtsalt sisestage avanevas aknas aadress ja imetlege tulemust:

2. "Ekspordi tekstivormingusse". Pärast saidi imetlemist saate selle lähtekoodi .txt-vormingus kõvakettale salvestada.

"Muuda"-s on tööriistad tekstist õigete sõnade otsimiseks ja õigekirja kontrollimiseks.

Menüüs "Insert" saate pöörata tähelepanu võimalusele sisestada PHP-koodi ja tähemärke, mida klaviatuuril pole.

"Vorming" pakub laias valikus teksti, piltide ja muu teabe välimuse kohandamise võimalusi.

Kõige huvitavam, ja mis kõige tähtsam, siin ei kuvata funktsioon "Lehe värv ja taust". Selle valiku abil saate hõlpsasti lisada mis tahes taustapildi või valida saidi jaoks lihtsalt hea taustavärvi.

Lõpuks pakub menüü "Tööriistad" selliseid valikuid nagu juurdepääs JavaScripti konsoolile, CSS-redaktorile ja HTML-koodi kontrollimise tööriistale.

Siit pääsete juurde ka programmi sätetele ja NVU teema seadetele.

järeldused

NVU-st on lihtne aru saada, kuna kõik programmi juhtelemendid on varustatud vihjete ja selgitustega ning tänu rühmale Mozilla.ru Teami kuuluvale Vene arendajatele on olemas ka väga hea venekeelne abi.

NVU ainsaks miinuseks on see, et programmi poolt genereeritud kood on väga tülikas ja sisaldab palju tarbetuid silte. Kuid olgu see teile ainult stiimul HTML-i uurimiseks ning saidi optimeerimiseks ja täiuslikuks viimiseks.

Edu teile arengutes ja edu kõigis ettevõtmistes!

P.S. Seda artiklit on lubatud vabalt kopeerida ja tsiteerida, kui on näidatud avatud aktiivne link allikale ja säilib Ruslan Tertõšnõi autorsus.

NVU on väike programm HTML-koodi redigeerimiseks. HTML-redaktor NVU-l on visuaalne liides ja see on olemas erinevate operatsioonisüsteemide jaoks. See koodiredaktor loodi Mozilla Composeri HTML-redaktori baasil, mille tulemusena on NVU üsna lihtne ja arusaadav ning oma võimalustelt on see juba algsest programmist kaugel ees ja jõudnud lähedale sellised tasulised toimetajad nagu Dreamweaver ja FrontPage.

Selle koodiredaktori üks eeliseid on see, et saate NVU alla laadida vene keeles. NVU venekeelne leht on täielikult tõlgitud, mis muudab selle kasutajate jaoks, kes seda ei tunne, lihtsamaks inglise keel. Kui laadite NVU vene keeles tasuta alla, saate mugav programm kvaliteetse lehe või saidi loomiseks, isegi kui olete täiesti algaja. Redaktoris saate luua saite, mis vastavad kõigile vajalikele Interneti-standarditele.

Kogenumad kasutajad saavad soovi korral minna otse koodi redigeerimise juurde. Lisaks on NVU-l ka muid tööriistu, nagu saidihaldur ja CSS-redaktor. Nende abil saate redigeerida avatud lehti kaugserver, kasutage süntaksi esiletõstmist, kontrollige vigade koodi jne. Redigeerija liidest on erinevate teemade kasutamise kaudu lihtne muuta ning võimalusi avardab lihtsalt NVU jaoks loodud laienduste installimine.

Saate kasutada kõiki redaktori funktsioone, kui laadite NVU mõne minutiga alla. Sellel HTML-i redaktoril on vahekaardid, eelvaated ja juurdepääs kõige sagedamini kasutatavatele siltidele, mis muudab saidi arendamise palju kiiremaks. Teksti muutmiseks on ka palju võimalusi: tsentreerimine, font, stiil jne.

NVU HTML-i redaktori funktsioonid

• saab installida opsüsteemidele Windows, Linux, Mac OS X;
• vaatamiseks ja muutmiseks saadaval avatud lähtekoodi;
• kasutaja saab programmi isiklikult oma eesmärkidel muuta või muuta;
• HTML- ja CSS-koodi otse redigeerimise võimalus;
• arvuti hõivatud väike kogus kettaruumi;
• elementidel on omadused, mille parameetrid on seadistatavad;
• süntaksi esiletõstmine.

Vlad Merževitš

Tõhusaks tööks ei saa te ilma vajalike ja tuttavate tööriistadeta, sealhulgas HTML-koodi kirjutamisel. Seetõttu vajame veebilehtede või isegi väikese saidi esialgseks arendamiseks - see on linkide ja ühe kujundusega omavahel ühendatud lehtede komplekti nimi - vajame järgmisi programme.

• Tekstiredaktor.
• Brauser tulemuste vaatamiseks.
• Validator on programm HTML-i süntaksi kontrollimiseks ja koodi vigade tuvastamiseks.
• Graafiline redaktor.
• Viide HTML-märgenditele.

Tekstiredaktor

HTML-dokumendi saab luua igas tekstiredaktoris, isegi Notepadis, kuid mitte iga programm ei sobi selleks. Teil on vaja sellist, mis toetab järgmisi funktsioone.

• süntaksi esiletõstmine – siltide, teksti, märksõnade ja parameetrite esiletõstmine erinevates värvides. See muudab soovitud elemendi leidmise lihtsamaks, kiirendab arendaja tööd ja vähendab vigade esinemist;
• vahelehtedega töö. Sait on failide komplekt, mida tuleb eraldi redigeerida. Selleks on vaja toimetajat, kes suudab korraga töötada mitme dokumendiga. Samal ajal on mugav avada faile eraldi vahekaartidel, et kiiresti soovitud dokumendini liikuda;
• kehtiva dokumendi vigade kontrollimine.

PSPad

HtmlReader

Notepad++

Redigeeri Plus

Brauser

Brauser on programm, mis on loodud veebilehtede vaatamiseks. Alguses sobib iga brauser, kuid kogemuste ja teadmiste suurenemisega peate käivitama terve "menagery", et kontrollida saidi õiget kuvamist erinevates brauserites. Fakt on see, et igal brauseril on oma ainulaadsed funktsioonid, nii et koodi universaalsuse kontrollimiseks peate koodi üle vaatama ja kohandama, et neid arvesse võtta. Tänapäeval on kolm kõige populaarsemat brauserit Firefox, Internet Explorer ja Opera.

Mozilla Firefox

Paljutõotav ja arenev brauser, mis on pälvinud ülemaailmse tunnustuse. Selle eripäraks on lihtsus ja laiendatavus, mis saadakse spetsiaalsete laienduste abil, nagu neid nimetatakse. Esialgu on Firefoxil ainult kõige vajalikumad funktsioonid, kuid soovitud laienduste installimisega saate lõpuks kasvatada brauseri süsteemiks, mis teeb kõik teie tööks vajalikud toimingud. Firefoxi brauser on avatud süsteem, mille on välja töötanud Mozilla grupp.

Microsoft Internet Explorer (IE)

Üks vanimaid brausereid, mis on operatsioonisüsteemiga tasuta kaasas Windowsi süsteem. See määras tema populaarsuse. IE 7 versioon on mugavuse poolest oma vanadele konkurentidele lähemal, eriti on ilmunud vahelehed. Kahjuks toetab see brauser kõige halvemini HTML-i spetsifikatsiooni, nii et IE-s õige kuvamise jaoks peate mõnikord spetsiaalselt selle koodi eraldi siluma.

Ooper

Kiire ja mugav brauser, mis toetab paljusid lisafunktsioone, mis suurendavad saitidega töötamise mugavust.

safari

Apple'i poolt välja töötatud brauser on iPhone'i ja operatsioonisüsteem MacOS Apple'i arvutites. Samuti on olemas Windowsi versioon.

Google Chrome

Brauser, mis ilmus turule 2008. aasta lõpus. Arendanud Google.

Valideerija

HTML-dokumendi valideerimine on mõeldud veebilehe süntaksi vigade ja HTML-i spetsifikatsiooniga vastuolude tuvastamiseks. Sellest tulenevalt nimetatakse sellise kontrollimise programmi või süsteemi validaatoriks.

Kuidas kontrollida HTML-faili kehtivust

Kui teil on juurdepääs Internetile, peaksite minema aadressile http://validator.w3.org ja sisestama kontrollitava dokumendi või saidi tee spetsiaalsel kujul. Pärast kinnitamist kuvatakse võimalikud vead või kiri, et dokument on edukalt kinnitatud.

Korrastatud

Kohaliku HTML-faili kontrollimiseks või Interneti-ühenduse puudumisel on loodud programm Tidy. Mõned redaktorid, näiteks PSPad, sisaldavad juba sisseehitatud Tidy't ja dokumentide valideerimist saab teha ilma täiendavate tööriistadeta.

Graafiline redaktor

Piltide töötlemiseks ja veebilehel avaldamiseks ettevalmistamiseks on vaja graafikaredaktorit. Kõige populaarsem sedalaadi programm on Photoshop, millest on saanud fotode töötlemise ja veebisaitide graafika loomise standard. Kuid enamasti on Photoshopi võimsus üle jõu käiv ja parem on kasutada midagi lihtsamat ja nobedamat. Eelkõige võimaldab Paint.Net programm teha piltidega kõik vajalikud manipulatsioonid, lisaks on selle kasutamine tasuta.

HTML-i märgendi viide

Kõigi siltide ja nende parameetrite peast meeldejätmine on alguses keeruline, seega peate teatud probleemi selgitamiseks perioodiliselt juhendit uurima. Üldiselt vajavad head giidi kõik, olenemata treenituse tasemest.

Interneti-kataloogid

HTML-märgendite kirjeldus (inglise keeles)
http://www.w3.org/TR/html4/index/elements.html

Sellelt saidilt leiate ka ühe parima Runeti siltide juhendi.

Visuaalne HTML-i redaktor, mis sarnaneb Macromedia Dreamweaveriga, kuid on tasuta.

Viimati rääkisin teile, kuidas kontrollida oma saidi toimivust kasutades kohalik Denveri server. Kuid selle saidi loomise küsimus jäi lahendamata. Proovime selle tüütu möödalaske parandada – täna räägin teile ühest programmist, millega saate teha lihtsa veebisaidi, isegi ilma HTML-i programmeerimise ja muude nippide tundmiseta.

Juhin teie tähelepanu tasuta visuaalne HTML-i redaktor NVU.

Miks ta on hea? Jah, see, et veebilehe loomiseks ei pea pead vaevama veebi programmeerimiskeelte õppimisega. Sisestate lihtsalt teksti, sisestate pilte või animatsioone ja kogu selle HTML-i kaunistamise "määrdunud" töö võtab võimust NVU.

Kahjuks praegu areng NVU peatatud, kuid projekt on kasvanud esimese stabiilse versioonini ja seda on juba palju.

NVU võimalused

• toetus mitu kuvamisrežiimi redigeeritav leht;
• täpsemad valikud teksti redigeerimine;
• sisesta pilte(kaasa arvatud taust);
• toimetamineüksikud lehed ja terved saidid;
• vormide ja tabelite loomine;
• õigekirjakontroll;
• võimalus saidi väljaanded otse programmist;
• sisseehitatud CSS-redaktor ja Java Scripti konsool.

Kõik see ja palju muud võimaldavad meil luua nullist väikese saidi minimaalsete (soovitavalt) teadmistega HTML-i valdkonnas (või nende täieliku puudumisega :)).

Allalaadimine ... Installimine ... Käivitamine ja vaatamine :) (just nii - ei mingeid tarbetuid žeste koos venestamisega, lisateabe sisestamisega jne). Nõustuge looma töölaual otsetee ja käivitage see koos sellega NVU:

NVU liides

Pilgu pealt NVU näeb välja nagu mingi tekstiredaktor. See on selle peamine eelis - visuaalne graafiline liides. Kuid allpool vaadates näete, et lisaks tavapärasele on veel mitu kuvamisrežiimid sisestatud teave: HTML-sildid, kood ja eelvaade.

HTML-i sildi režiim

"HTML-sildid" on omamoodi tekstist ja siltidest koosnev mosaiik, mis on kujundatud värviliste ristkülikutena. See vaaterežiim on kasulik algajatele kasutajatele, kuna see kuvab kõik peamised kasutatavad sildid ja samal ajal ei häiri neid suure hulga, jäädes samas visuaalseks redaktoriks. Selles režiimis on hea selgeks õppida siltide nimed, et hiljem saaksid neid hõlpsasti kooditöötlusrežiimis kasutada.

Režiimi kood

Režiim "Kood" on muudetava lehe HTML-koodiga aken, mis on tuttav kõigile veebiarendajatele. Just siit kasvavad kõigist nendest kritseldustest välja kõik Interneti ressursid. Olles omandanud koodikeele, saate hõlpsalt oma saidile lisada kõik juhtelemendid, skriptid ja muud "maiustused", mida olete harjunud teiste inimeste saitidel imetlema :).

Eelvaade

Ja lõpuks "Eelvaade" võimaldab teil hinnata meie jõupingutuste tulemusi, kuvades lehe sellisel kujul, nagu see Internetis omandab. Ekraanipildil ei erine see teksti vastest, kuid tasub lisada kõik navigeerimiselemendid või skriptid, kuna erinevus ilmneb ise:

Nüüd, kui vaatamise ja redigeerimise võimalused on veidi selgeks saanud, vaatame võimalusi põhjalikumalt. NVU. Suhtlema programmiga saate kasutada menüüriba või kasutades piktogrammid ja sümbolid selle all.

NVU visuaalse HTML-i redaktori varjatud funktsioonid

Kõik põhilised vormindamisvalikud on saadaval ikoonidena, kuid mõned valikud on menüüribale peidetud ega ilmu koheselt.

Näiteks menüüs "Fail" Selliseid leiate funktsioonid,, kuidas:

1. "Aadressi avamine Internetis". Tänu Mozilla mootorile võimaldab teil lehti avada ja redigeerida otse Internetist. See võib olla väga kasulik, kui soovite näha, kuidas seda või teist saidi funktsiooni tehakse. Lihtsalt sisestage avanevas aknas aadress ja imetlege tulemust:

2. "Ekspordi tekstivormingusse". Pärast saidi imetlemist saate selle lähtekoodi .txt-vormingus kõvakettale salvestada.

AT "Redigeerimine" selleks on tööriistad otsingõiged sõnad tekstis ja õigekirja kontrollija.

Menüüs "Sisesta" tähelepanu võib pöörata võimalusele PHP koodi sisestamine ja märgid, mida klaviatuuril pole.

"Formaat" pakub selleks suurimaid võimalusi tekstivaate seaded, pilte ja muud teavet. Kõige huvitavam ja mis kõige tähtsam, siin ei ole kuskil kuvatud võimalust "Lehekülje värv ja taust". Seda suvandit kasutades saate hõlpsasti lisada mis tahes taustapildi või lihtsalt määrata saidi taustavärvi.

Lõpuks menüü "Tööriistad" pakub selliseid funktsioone nagu juurdepääs JavaScripti konsoolid, toimetaja css ja tööriist HTML-i valideerimine kood. Siit pääseb ka juurde seaded programmid ja teema seaded disain NVU.

AT NVU lihtne mõista, kuna kõik programmi juhtnupud on varustatud näpunäiteid ja selgitusi ning tänud rühmale Venemaa arendajaid alates Mozilla meeskond seal on ka väga hea abi vene keeles. Ainus negatiivne NVU seal on see, et programmi genereeritud kood on väga tülikas ja sellel on palju lisamärgendeid. Kuid olgu see teile ainult stiimul HTML-i uurimiseks ning saidi optimeerimiseks ja täiuslikuks viimiseks.

Edu teile arengutes ja edu kõigis ettevõtmistes :)!!!

P.S. See artikkel on mõeldud tasuta levitamiseks. Selle kopeerimine autorsust säilitades on teretulnud Ruslan Tertõšnõi ja kõik P.S. ja P.P.S.

P.P.S. Sulle võib meeldida ka mõni teine ​​üsna mõistlik

Soovitaks ka head HTML raamat mida ise kasutasin: