Vizuālais html redaktors. Vizuālais HTML redaktors

Vizuālais HTML- redaktors, kas līdzīgs Macromedia Dreamweaver, bet pilnīgi bez maksas. Lielisks rīks iesācējiem, kuri tikai sāk apgūt vietņu izveides zinātni.

Kāpēc viņš ir labs? Jā, tas, ka, lai izveidotu tīmekļa lapu, nav jāpūlas ar tīmekļa programmēšanas valodu izpēti. Jūs vienkārši ierakstāt tekstu, ievietojiet attēlus vai animācijas, un NVU parūpēsies par visu "netīro" darbu, formatējot to HTML formātā.

Diemžēl šobrīd NVU attīstība ir apturēta, bet projekts ir izaudzis līdz pirmajai stabilajai versijai, un tas jau ir daudz. Apskatīsim to sīkāk.

NVU iespējas

• dažādi rediģētās lapas attēlošanas režīmi;
• plašas teksta dizaina iespējas;
• attēlu (tostarp fonu) ievietošana;
• spēja strādāt visā vietnē, nevis tikai atsevišķās lapās;
• tabulu un veidlapu veidošana;
• rediģētās vietnes publicēšana tieši no redaktora;
• savs kaskādes stila lapas (CSS) redaktors un Java Script konsole.

Tas viss un daudz kas cits ļauj no nulles izveidot nelielu vietni ar minimālām (vēlams) zināšanām HTML jomā (vai to pilnīgu neesamību :)).

Vizuālā redaktora instalēšana

Notiek lejupielāde... Instalēšana... Palaišana un skatīšanās :) (pareizi - bez liekiem žestiem ar rusifikāciju, papildus informācijas ievadīšanu utt.).

Mēs piekrītam izveidot saīsni darbvirsmā un ar to palaist NVU.

NVU interfeiss

No pirmā acu uzmetiena NVU atgādina dažus teksta redaktors. Tas ir viņa galvenais nopelns – vizuālais GUI.

Bet, skatoties uz leju, redzēsit, ka papildus parastajam ir vēl vairāki režīmi ievadītās informācijas parādīšanai:

• HTML tagi;
• un priekšskatījums.

HTML tagu režīms

"HTML tagi" ir sava veida teksta un tagu mozaīka, kas veidota kā krāsaini taisnstūri.

Šis skata režīms ir noderīgs iesācējiem, jo ​​tas parāda visus galvenos izmantotos tagus un tajā pašā laikā neuztraucas ar lielu skaitu no tiem, vienlaikus saglabājot to pašu vizuālo redaktoru.

Tāpat šajā režīmā ir ērti izpētīt tagu nosaukumus, lai vēlāk tos varētu ērti izmantot koda rediģēšanas režīmā.

Režīma kods

Režīms "Kods" ir visiem tīmekļa izstrādātājiem pazīstams logs ar rediģējamās lapas HTML kodu. Tieši no šejienes, no visiem šiem svētku logotipiem, pieaug visi interneta resursi.

Apgūstot koda valodu, jūs varat viegli pievienot savai vietnei visas vadīklas, skriptus un citus "labumus", kurus esat pieradis apbrīnot citu cilvēku vietnēs :).

Priekšskatījums

Un, visbeidzot, "Priekšskatījums" ļauj novērtēt mūsu pūliņu rezultātu, parādot lapu tādā formā, kādu tā iegūs internetā.

Ekrānuzņēmumā tas neatšķiras no teksta līdzinieka, taču ir vērts pievienot jebkādus navigācijas elementus vai skriptus, jo atšķirība atklāsies pati par sevi:

Ja jūs rediģējat šo lapu programmā Notepad kā stingrs programmētājs, jums ir nepieciešams vismaz pārlūks un vietējais tīmekļa serveris, lai to skatītu.

Un šeit, kā saka, jau "viss iekļauts".

Tagad, kad skatīšanās un rediģēšanas iespējas ir nedaudz precizētas, iedziļināsimies NVU iespējām.

NVU vizuālā HTML redaktora slēptās funkcijas

Visas pamata formatēšanas opcijas ir pieejamas kā ikonas, taču dažas opcijas ir paslēptas izvēļņu joslā.

Piemēram, izvēlnē "Fails" jūs atradīsit tādas funkcijas kā:

1. "Atveriet adresi internetā." Pateicoties Mozilla dzinējam, varat atvērt un rediģēt lapas tieši no interneta.

Tas var būt ļoti noderīgi, ja vēlaties redzēt, kā tiek veikta šī vai cita vietnes funkcija. Vienkārši ievadiet adresi atvērtajā logā un apbrīnojiet rezultātu:

2. "Eksportēt teksta formātā". Pēc vietnes apbrīnošanas varat saglabāt tās avota kodu .txt formātā cietajā diskā.

Sadaļā "Rediģēt" ir pieejami rīki pareizo vārdu meklēšanai tekstā un pareizrakstības pārbaudei.

Izvēlnē "Ievietot" varat pievērst uzmanību iespējai ievietot PHP kodu un rakstzīmes, kas nav uz tastatūras.

"Formāts" nodrošina plašas iespējas teksta, attēlu un citas informācijas izskata pielāgošanai.

Interesantākā un, pats galvenais, šeit nekur neparādītā funkcija ir “Lapas krāsa un fons”. Izmantojot šo opciju, varat viegli pievienot jebkuru fona attēlu vai vienkārši izvēlēties labu vietnes fona krāsu.

Visbeidzot, izvēlnē "Rīki" ir pieejamas tādas iespējas kā piekļuve JavaScript konsolei, CSS redaktoram un HTML koda pārbaudes rīkam.

Arī no šejienes varat piekļūt programmas iestatījumiem un NVU motīvu iestatījumiem.

secinājumus

NVU ir viegli saprotams, jo visas programmas vadīklas ir nodrošinātas ar rīka padomiem un paskaidrojumiem, un, pateicoties Mozilla.ru komandas krievu izstrādātāju grupai, ir arī ļoti laba palīdzība krievu valodā.

Vienīgais NVU trūkums ir tas, ka programmas ģenerētais kods ir ļoti apgrūtinošs un tajā ir daudz nevajadzīgu tagu. Bet lai tas ir tikai pamudinājums jums mācīties HTML un optimizēt un pilnveidot savu vietni.

Veiksmi jūsu attīstībā un panākumus visos jūsu centienos!

P.S. Šo rakstu ir atļauts brīvi kopēt un citēt, ja ir norādīta atvērta aktīva saite uz avotu un tiek saglabāta Ruslana Tertišnija autorība.

NVU ir neliela programma HTML koda rediģēšanai. HTML redaktors NVU ir vizuāls interfeiss, un tas pastāv dažādām operētājsistēmām. Šis koda redaktors tika izveidots uz Mozilla Composer HTML redaktora bāzes, kā rezultātā NVU ir diezgan vienkāršs un saprotams, un pēc savām iespējām tas jau ir tālu priekšā oriģinālajai programmai un ir pietuvojies funkcionalitātei. tādi maksas redaktori kā Dreamweaver un FrontPage.

Viena no šī koda redaktora priekšrocībām ir tā, ka jūs varat lejupielādēt NVU krievu valodā. NVU krievu lapa ir pilnībā iztulkota, kas atvieglo to lietotājiem, kuri nav pazīstami ar angļu valoda. Ja lejupielādējat NVU bez maksas krievu valodā, jūs saņemsiet ērta programma lai izveidotu labas kvalitātes lapu vai vietni, pat ja esat absolūts iesācējs. Redaktorā varat izveidot vietnes, kas atbilst visiem nepieciešamajiem interneta standartiem.

Pieredzējuši lietotāji, ja vēlas, var doties tieši uz koda rediģēšanu. Turklāt NVU ir arī citi rīki, piemēram, vietnes pārvaldnieks un CSS redaktors. Izmantojot tos, varat rediģēt atvērtās lapas attālais serveris, izmantojiet sintakses izcelšanu, pārbaudiet kodu, vai nav kļūdu utt. Redaktora saskarni ir viegli mainīt, izmantojot dažādas tēmas, un iespējas ir viegli paplašināt, instalējot NVU izveidotos paplašinājumus.

Varat izmantot visas redaktora funkcijas, ja dažu minūšu laikā lejupielādējat NVU. Šim HTML redaktoram ir cilnes, priekšskatījumi un piekļuve visbiežāk izmantotajiem tagiem, padarot vietnes izstrādi daudz ātrāku. Ir arī daudzas teksta maiņas iespējas: centrēšana, fonts, stils utt.

NVU HTML redaktora funkcijas

• var instalēt operētājsistēmās Windows, Linux, Mac OS X;
• atvērtā pirmkoda kods pieejams apskatei un modificēšanai;
• lietotājs var personīgi modificēt vai modificēt programmu saviem mērķiem;
• iespēja tieši rediģēt HTML un CSS kodu;
• neliels diska vietas daudzums, ko aizņem dators;
• elementiem ir īpašības, kuru parametri ir konfigurējami;
• sintakses izcelšana.

Vlads Merževičs

Efektīvam darbam nevar iztikt bez nepieciešamajiem un pazīstamajiem rīkiem, tostarp rakstot HTML kodu. Tāpēc tīmekļa lapu vai pat nelielas vietnes sākotnējai izstrādei - tas ir lapu kopas nosaukums, kas ir savstarpēji savienotas ar saitēm un vienotu dizainu, mums ir nepieciešamas šādas programmas.

• Teksta redaktors.
• Pārlūks, lai skatītu rezultātus.
• Validator ir programma HTML sintakses pārbaudei un kļūdu noteikšanai kodā.
• Grafikas redaktors.
• Atsauce uz HTML tagiem.

Teksta redaktors

HTML dokumentu var izveidot jebkurā teksta redaktorā, pat Notepad, tomēr ne katra programma ir piemērota šim nolūkam. Jums ir nepieciešams tāds, kas atbalsta šādas funkcijas:

• sintakses izcelšana - tagu, teksta, atslēgvārdu un parametru izcelšana dažādās krāsās. Tas atvieglo vēlamā elementa atrašanu, paātrina izstrādātāja darbu un samazina kļūdu rašanos;
• darbs ar cilnēm. Vietne ir failu kopums, kas ir jārediģē atsevišķi, un tam ir nepieciešams redaktors, kas vienlaikus var strādāt ar vairākiem dokumentiem. Tajā pašā laikā ir ērti atvērt failus atsevišķās cilnēs, lai ātri pārvietotos uz vēlamo dokumentu;
• pašreizējā dokumenta pārbaude, vai tajā nav kļūdu.

PSPad

HtmlReader

Notepad++

Rediģēt Plus

Pārlūkprogramma

Pārlūkprogramma ir programma, kas paredzēta tīmekļa lapu apskatei. Sākumā derēs jebkura pārlūkprogramma, taču, palielinoties pieredzei un zināšanām, jums būs jāizveido vesela "zvērnīca", lai pārbaudītu vietnes pareizu attēlojumu dažādās pārlūkprogrammās. Fakts ir tāds, ka katrai pārlūkprogrammai ir savas unikālas funkcijas, tāpēc, lai pārbaudītu koda universālumu, jums ir jāpārskata un jāpielāgo kods, lai tos ņemtu vērā. Trīs mūsdienās populārākās pārlūkprogrammas ir Firefox, Internet Explorer un Opera.

Mozilla Firefox

Daudzsološa un attīstoša pārlūkprogramma, kas ir saņēmusi pasaules atzinību. Tās iezīme ir vienkāršība un paplašināmība, kas tiek iegūta, izmantojot īpašus paplašinājumus, kā tos sauc. Sākotnēji pārlūkprogrammā Firefox ir tikai visnepieciešamāko funkciju komplekts, taču, instalējot vēlamos paplašinājumus, ar laiku jūs varat izveidot pārlūkprogrammu līdz sistēmai, kas veic visas jūsu darba veikšanai nepieciešamās darbības. Pārlūkprogramma Firefox ir atvērta sistēma, ko izstrādājusi Mozilla grupa.

Microsoft Internet Explorer (IE)

Viena no vecākajām pārlūkprogrammām, kas tiek nodrošināta ar operētājsistēmu bez maksas Windows sistēma. Tas noteica viņa popularitāti. IE 7 versija ērtības ziņā ir tuvāka vecajiem konkurentiem, jo ​​īpaši ir parādījušās cilnes. Diemžēl šī pārlūkprogramma vissliktāk atbalsta HTML specifikāciju, tāpēc, lai pareizi parādītu IE, dažreiz ir atsevišķi jāatkļūdo īpaši tai paredzētais kods.

Opera

Ātra un ērta pārlūkprogramma, kas atbalsta daudzas papildu funkcijas, kas palielina komfortu darbā ar vietnēm.

safari

Šī pārlūkprogramma, ko izstrādājusi Apple, ir iebūvēta iPhone un operētājsistēma MacOS Apple datoros. Ir arī Windows versija.

Google Chrome

Pārlūkprogramma, kas tirgū parādījās 2008. gada beigās. Izstrādāja Google.

Validators

HTML dokumenta validācija ir paredzēta, lai atklātu kļūdas tīmekļa lapas sintaksē un neatbilstības HTML specifikācijai. Attiecīgi šādas pārbaudes programmu vai sistēmu sauc par validatoru.

Kā pārbaudīt HTML faila derīgumu

Ja jums ir piekļuve internetam, dodieties uz http://validator.w3.org un īpašā veidlapā ievadiet ceļu uz pārbaudāmo dokumentu vai vietni. Pēc apstiprināšanas tiks parādītas iespējamās kļūdas vai uzraksts, ka dokuments ir veiksmīgi apstiprināts.

Kārtīgi

Lai pārbaudītu vietējo HTML failu vai ja nav interneta savienojuma, ir izstrādāta programma Tidy. Dažos redaktoros, piemēram, PSPad, jau ir iebūvēts Tidy, un dokumentu validāciju var veikt bez papildu rīkiem.

Grafikas redaktors

Lai apstrādātu attēlus un sagatavotu tos publicēšanai tīmekļa lapā, ir nepieciešams grafiskais redaktors. Populārākā šāda veida programma ir Photoshop, kas ir kļuvusi par standartu fotoattēlu apstrādei un tīmekļa vietņu grafikas veidošanai. Taču lielākoties Photoshop jauda ir pārspīlēta, un labāk ir izmantot kaut ko vienkāršāku un veiklāku. Jo īpaši programma Paint.Net ļauj veikt visas nepieciešamās manipulācijas ar attēliem, turklāt to var izmantot bez maksas.

HTML tagu atsauce

Sākumā ir grūti atcerēties visus tagus un to parametrus no galvas, tāpēc jums periodiski jāiepazīstas ar rokasgrāmatu, lai noskaidrotu konkrētu problēmu. Kopumā ikvienam ir vajadzīgs labs ceļvedis neatkarīgi no sagatavotības līmeņa.

Tiešsaistes katalogi

HTML tagu apraksts (angļu valodā)
http://www.w3.org/TR/html4/index/elements.html

Šajā vietnē jūs atradīsiet arī vienu no labākajiem Runet tagu ceļvežiem.

Vizuāls HTML redaktors, kas līdzīgs Macromedia Dreamweaver, bet bezmaksas.

Iepriekšējā reizē es jums pastāstīju par to, kā pārbaudīt vietnes veiktspēju, izmantojot vietējais Denveras serveris. Bet pats jautājums par šīs vietnes izveidi palika neatrisināts. Mēģināsim izlabot šo kaitinošo neizdarību – šodien pastāstīšu par vienu programmu, ar kuru var izveidot vienkāršu mājaslapu pat bez zināšanām par HTML programmēšanu un citiem trikiem.

Es vēršu jūsu uzmanību bezmaksas vizuālais HTML redaktors NVU.

Kāpēc viņš ir labs? Jā, tas, ka, lai izveidotu tīmekļa lapu, nav jāpūlas ar tīmekļa programmēšanas valodu izpēti. Jūs vienkārši ierakstāt tekstu, ievietojiet attēlus vai animācijas, un viss "netīrais" darbs, kas saistīts ar šī visa noformēšanu HTML formātā, pārņem visu. NVU.

Diemžēl šobrīd attīstība NVU apturēta, bet projekts ir izaudzis līdz pirmajai stabilajai versijai, un tas jau ir daudz.

NVU iespējas

• atbalsts vairāki displeja režīmi rediģējama lapa;
• papildu opcijas teksta rediģēšana;
• ievietot attēlus(ieskaitot fonu);
• rediģēšana atsevišķas lapas un veselas vietnes;
• Veidlapu un tabulu veidošana;
• pareizrakstības pārbaude;
• iespēja vietnes publikācijas tieši no programmas;
• iebūvēts CSS redaktors un Java Script konsole.

Tas viss un daudz kas cits ļauj no nulles izveidot nelielu vietni ar minimālām (vēlams) zināšanām HTML jomā (vai to pilnīgu neesamību :)).

Notiek lejupielāde... Instalēšana... Palaišana un skatīšanās :) (pareizi - bez liekiem žestiem ar rusifikāciju, papildus informācijas ievadīšanu utt.). Piekrītiet izveidot saīsni darbvirsmā un palaist to ar to NVU:

NVU interfeiss

No skatiena NVU izskatās pēc kaut kāda teksta redaktora. Tas ir tā galvenais nopelns – vizuālais grafiskais interfeiss. Bet, skatoties zemāk, jūs redzēsit, ka papildus parastajam ir vēl vairāki displeja režīmi ievadītā informācija: HTML tagi, kods un priekšskatījums.

HTML tagu režīms

"HTML tagi" ir sava veida teksta un tagu mozaīka, kas veidota kā krāsaini taisnstūri. Šis skata režīms ir noderīgs iesācējiem, jo ​​tas parāda visus galvenos izmantotos tagus un tajā pašā laikā neuztraucas ar lielu skaitu no tiem, vienlaikus saglabājot to pašu vizuālo redaktoru. Šajā režīmā ir labi iemācīties tagu nosaukumus, lai vēlāk tos varētu ērti izmantot koda rediģēšanas režīmā.

Režīma kods

Režīms "Kods" ir logs ar rediģējamās lapas HTML kodu, kas ir pazīstams visiem tīmekļa izstrādātājiem. Tieši no šejienes visi interneta resursi izaug no visiem šiem skricelējumiem. Apgūstot koda valodu, jūs varat viegli pievienot savai vietnei visas vadīklas, skriptus un citus "labumus", kurus esat pieradis apbrīnot citu cilvēku vietnēs :).

Priekšskatījums

Un visbeidzot "Priekšskatījums"ļauj novērtēt mūsu pūliņu rezultātu, parādot lapu tādā formā, kādu tā iegūs internetā. Ekrānuzņēmumā tas neatšķiras no teksta līdzinieka, taču ir vērts pievienot jebkādus navigācijas elementus vai skriptus, jo atšķirība atklāsies pati par sevi:

Tagad, kad skatīšanās un rediģēšanas iespējas ir nedaudz precizētas, ieskatīsimies iespējas dziļāk. NVU. Mijiedarboties ar programmu, jūs varat izmantot ēdienkarte vai izmantojot piktogrammas un simboli zem tā.

NVU vizuālā HTML redaktora slēptās funkcijas

Visas pamata formatēšanas opcijas ir pieejamas kā ikonas, taču dažas opcijas ir paslēptas izvēļņu joslā un uzreiz neatklājas.

Piemēram, izvēlnē "Fails" Tādu atradīsi funkcijas,, kā:

1. "Atvērt adresi internetā". Pateicoties Mozilla dzinējam, varat atvērt un rediģēt lapas tieši no interneta. Tas var būt ļoti noderīgi, ja vēlaties redzēt, kā tiek veikta šī vai cita vietnes funkcija. Vienkārši ievadiet adresi atvērtajā logā un apbrīnojiet rezultātu:

2. "Eksportēt teksta formātā". Pēc vietnes apbrīnošanas varat saglabāt tās avota kodu .txt formātā cietajā diskā.

AT "Rediģēšana" ir instrumenti Meklēt pareizie vārdi tekstā un pareizrakstības pārbaudītājs.

Izvēlnē "Ievietot" var pievērst uzmanību iespējai PHP koda ievietošana un rakstzīmes, kas nav uz tastatūras.

"Formāts" sniedz vislielākās iespējas teksta skata iestatījumi, attēlus un cita informācija. Interesantākā un, pats galvenais, šeit nav parādīta iespēja "Lapas krāsa un fons". Izmantojot šo opciju, varat viegli pievienot jebkuru fona attēlu vai vienkārši iestatīt vietnes fona krāsu.

Beidzot izvēlne "Rīki" nodrošina tādas funkcijas kā piekļuvi JavaScript konsoles, redaktors css un rīks HTML validācija kodu. Arī no šejienes jūs varat piekļūt iestatījumi programmas un motīvu iestatījumi dizains NVU.

AT NVU viegli saprotams, jo visas programmas vadības ierīces ir aprīkotas ar rīka padomi un paskaidrojumus, un paldies krievu izstrādātāju grupai no Mozilla komanda ir arī ļoti labs palīdzība krievu valodā. Vienīgais negatīvais NVU ir tas, ka programmas ģenerētais kods ir ļoti apgrūtinošs un tam ir daudz papildu tagu. Bet lai tas ir tikai pamudinājums jums mācīties HTML un optimizēt un pilnveidot savu vietni.

Veiksmi jūsu attīstībā un panākumus visos jūsu centienos :)!!!

P.S.Šis raksts ir paredzēts bezmaksas izplatīšanai. Aicinām to kopēt, saglabājot autorību Ruslans Tertišnijs un visi P.S. un P.P.S.

P.P.S. Jums var patikt arī kāds cits diezgan saprātīgs

Es arī gribētu ieteikt labu HTML grāmata ko pats izmantoju: