Görsel HTML editörü. En İyi Ücretsiz HTML Editörleri

Bu makale en işlevsel olanlardan bazılarını sunmaktadır. CSS kod düzenleyicileriön uç geliştiriciler için. Sözdizimi vurgulama, canlı izleme, hata ayıklama ve birlikte yazma gibi özelliklerle bu hizmetler, doğrudan tarayıcı pencerenizden web geliştirme için mükemmel bir seçim olabilir.

Çevrimiçi kod editörleri

1.Kod Kalemi

HTML, CSS ve JavaScript için destek ve çok sayıda ön işlemci sunar. Haml , Markdown , Slim ve Jade şu şekilde desteklenir: HTML ön işlemcileri. CSS için Less , SCSS , Sass ve Stylus desteklenir. JavaScript için CoffeeScript , TypeScript , LiveScript ve Babel desteklenir.

Ek olarak, CodePen kullanan büyük bir geliştirici topluluğu var. Bu, deneyimli geliştiriciler tarafından oluşturulan demoları ve örnekleri bulmayı kolaylaştırır.

CodePen Pro, kodu gerçek zamanlı olarak tamamlamanıza izin veren ortak çalışma modunu destekler. Bir grup öğrencinin siz kodu açıklarken sizi takip edebileceği ve onlarla sohbet edebileceğiniz Profesör Modunun yanı sıra.

2. JSFiddle

Başka bir popüler Çevrimiçi CSS düzenleyici. Geliştiriciler tarafından oldukça uzun bir süredir başarıyla kullanılmaktadır ve CodePen ortaya çıkmadan önceki ilk kişiydi. JSFiddle, ücretsiz birlikte yazma, metin ve sesli sohbet özelliklerine sahip, kullanımı kolay bir çevrimiçi kod düzenleyicisidir. İşbirliği özelliğini kullanmak için kayıt olmanıza bile gerek yok.

JSFiddle ayrıca SCSS ve CoffeeScript'i de destekler. JSFiddle ile kod üzerinde işbirliği yapmak veya demolar yayınlamak oldukça kolaydır.

3 Canlı dokuma

Gerçek zamanlı önizleme özelliğine sahip çevrimiçi bir CSS editörüdür. Liveweave yerleşik bağlama duyarlı HTML5, CSS3, JavaScript ve JQuery kod ipuçları içerir. Ayrıca projenizi bir arşiv olarak indirmenize olanak tanır ki bu çok uygundur.

Liveweave'de JQuery , AndgularJS , Bootstrap vb. dış kütüphaneleri projelere dahil etmek oldukça kolaydır. Ayrıca, duyarlı web tasarımı geliştirmeye yardımcı olan bir cetvel aracıdır. Liveweave bir özellik sunuyor " ekip oluşturmak JSFiddle'daki birlikte düzenleme moduyla aynı işlevselliği sağlayan ".

4. Dalgıç

Bu çevrimiçi bir topluluktur (örneğin kod kalemi) web geliştirmede fikirleri kodlamak, işbirliği yapmak ve paylaşmak. Hizmet, MIT lisansı altında lisanslanan açık kaynaklı bir çevrimiçi düzenleyicidir. Daldırıcı Kaynak Kodu GitHub'da bulunabilir.

Çevrimiçi CSS stili düzenleyicisi, çalışma alanınıza birden çok dosya eklemenize olanak tanır ve ayrıca bir projeyi hızlı bir şekilde başlatmak için kullanabileceğiniz, topluluk tarafından oluşturulmuş şablonlar sağlar.

5.JS Kutusu

JavaScript koduyla işbirliği yapmak için bulut ortamı. SCSS, Less, CoffeeScript, Jade ve daha fazlası gibi çeşitli ön işlemciler için destek içerir. Google Chrome veya Firefox'taki konsol gibi işlev gören bir hata ayıklama ve kod inceleme konsolu da mevcuttur.

JS Bin ayrıca kod üretiminin herhangi bir sayıda katılımcıya etkileşimli olarak kaydedilmesini ve yayınlanmasını destekler. Bu mod, kayıtlı ve anonim kullanıcılar için ücretsiz olarak kullanılabilir.

6. CSS Destesi

Bu CSS editörü, diğer araçlara kıyasla biraz daha kolaydır. Ana işlevlere ek olarak, bir yorum işlevi içerir. Demoların paylaşılması ve gömülmesi de CSS Deck'te desteklenir.

7. kod testi

kodtest, kodunuzu farklı ekran boyutlarında test etmeniz gerektiğinde kullanışlıdır. Bu çevrimiçi araç, birkaç önceden ayarlanmış ekran boyutu arasında hızlı bir şekilde geçiş yapmanızı sağlar.

Çevrimiçi kod düzenleyicilerin demosu

Aşağıda CodePen'de oluşturduğum bir demo var. HTML , CSS ve JS kodunu görüntülemek için sekmeler arasında geçiş yapabilirsiniz. Veya Sonuç sekmesindeki şekilleri hareket ettirerek deney yapın.

Demoyu görüntüle

Çözüm

Çevrimiçi CSS editörleriçeşitli amaçlar için kullanılabilir. Örneğin, projeler üzerinde işbirliği yapmanız veya bir müşteriye bir demo göstermeniz gerekiyorsa.

Web kodu editörleri, kurulum gerektirmedikleri ve her tür cihazdan erişilebildikleri için eğitim amaçlı olarak da harikadır.

Bir geliştiriciyseniz, favori çevrimiçi kod düzenleyiciniz hakkındaki yorumları yazın.

Makalenin çevirisi " Ön Uç Web Geliştirme için 7 Ücretsiz Çevrimiçi Kod Düzenleyici» A'dan Z'ye Web Sitesi yapımı projesinin güler yüzlü ekibi tarafından hazırlanmıştır.

Hemen hemen her İnternet kullanıcısı kendi web sitesini oluşturmayı düşünmüştür, ancak herkesin en azından web programlama ve düzeninin temellerinde uzmanlaşacak zamanı ve yeteneği yoktur. Ancak çoğu durumda, karmaşık programlanabilir öğeler geliştirmeye gerek yoktur ve görsel bir site düzenleyici veya bir WYSIWYG düzenleyici kullanarak güzel ve işlevsel bir site oluşturabilirsiniz.

Bu tür programlar, göreceli kullanım kolaylığına rağmen, amatör geliştirme araçlarından uzaktır, ancak özelliği, tam olarak kullanıcının herhangi bir deneyim düzeyiyle çalışabilme becerisinde yatmaktadır.

WYSIWYG, "What you see is what you get" olarak tercüme edilen What You See Is What You Get ifadesinin İngilizce kısaltmasıdır. Yani, kullanıcının çalışırken çabalarının yaklaşık sonucunu hemen görebileceği bir geliştirme ortamından bahsediyoruz. Çoğu zaman, belirtilen kısaltmanın Rusça analoğu Runet'te kullanılır ve bu tür programlara görsel editörler denir. Bu tür uygulamaların yardımıyla, farklı programlama ve düzen dillerinde - HTML, CSS, PHP, vb. - kod oluşturabilirsiniz.

HTML ve diğer web geliştirme dilleri için en popüler WYSIWYG editörü Adobe Dreamveawer'dır. Gerçekten kullanıcı dostu bir arayüze, çok sayıda kullanılabilir araca, güncel teknolojiler için desteğe ve diğer Creative Suite uygulamalarıyla entegrasyona sahiptir. Adobe Dreamveawer'ın büyük bir artısı, ayrıntılı profesyonel belgelerin yanı sıra programla çalışma konusunda İnternette bulunabilen birçok ücretsiz dersin bulunmasıdır. Ayrıca Joomla, WordPress ve Drupal gibi yaygın kullanılan CMS motorlarıyla da çalışabilir. Geçerli sürüm CS6'dır.

Bir başka popüler görsel düzenleyici, yakın zamanda sürüm 9'a güncellenen WYSIWYG Web Builder'dır. Bu, düzen ve web programlama konusunda herhangi bir beceriye sahip olmadan yüksek kaliteli web siteleri oluşturmanıza olanak tanıyan güçlü bir çözümdür. Program, hem basit kartvizit siteleri hem de karmaşık betikler ve etkileşimli öğelerin eklenmesiyle çok sayfalı kaynaklar oluşturmanıza olanak tanır. Kit birkaç farklı şablonla birlikte gelir ve bu sırada yenilerini ekleyebilirsiniz. WYSIWYG Web Builder'ın en son sürümü bir şerit arayüzü, yeni CSS3 yetenekleri ve yüzden fazla başka iyileştirme ekler.

Ticari çözümlere ek olarak, iyi açık kaynaklı çözümler de vardır. Örneğin, dünyaca ünlü Mozilla Firefox tarayıcısını da çalıştıran Gecko motorunda oluşturulan ücretsiz görsel editör BlueGriffon.

Bu, web sayfalarını düzenlemek ve en son Web standartlarına uygun siteler oluşturmak için modern ve güvenilir bir çözümdür. BlueGriffon, HTML, PHP, CSS ve diğer web geliştirme dilleri için sezgisel, kullanıcı dostu bir arayüze sahip çok dilli bir görsel düzenleyicidir ve içinde düzenlenen belge, Firefox tarayıcısındakiyle tamamen aynı görünecektir.

WYSIWYG düzenleyici, web sayfalarını düzenlemek ve çeşitli karmaşıklık düzeylerinde tam teşekküllü siteler oluşturmak için gerçekten uygun bir araçtır. Bununla kullanıcı, kapsamlı teknik bilgiye ihtiyaç duymadan çekici web siteleri oluşturabilir.

Narod.ru'da hazır şablonlar kullanmaktan "300 ruble'den iki günde siteler oluşturmak" gibi bir reklama başvurmaya kadar kendi sitenizi oluşturmanın birçok yolu vardır. Bir çocuk bile kendi blogunu veya basit bir ana sayfasını oluşturabilir. Bu nedenle, neredeyse herkes Web'de kendi web sitesine sahip olmakla övünebilir. Çeşitli hizmetler, saniyeler içinde basit bir kişisel kullanıcı sayfası oluşturan site oluşturucuları isteyen herkesin emrindedir. İnternette böyle yüzlerce ve yüzbinlerce sayfa var. Kural olarak, birbirlerine benzerler ve hatırlanmazlar. Kişisel bir web sayfası oluşturmak için ücretsiz çevrimiçi araçları kullananlar için, bir web sitesine sahip olmak genellikle eğlencelidir, insanlar sayfayı oluşturur ve unuturlar. Çoğu durumda içeriği, köpeğinizin fotoğraflarının yayınlanmasına ve "kendiniz hakkında" birkaç bilgiye indirgenmiştir.

Başka bir şey de, bir kişinin kendi web sitesini telefon veya posta gibi bir iletişim aracı olarak algılamasıdır. Kendi web sitenize sahip olmak, işini tanıtmak isteyen herhangi bir girişimci, pratisyen bir doktor, muayenehanesini açan bir avukat, bir eğitim merkezi vb. için yararlıdır. Bu durumda sayfa özgün ve bilgilendirici olmalı, ziyaretçiler için faydalı bilgiler taşımalıdır. Bu gereksinimleri karşılayan bir site elde etmek için, tek başına ücretsiz ana sayfa oluşturucular vazgeçilmezdir. Ancak, web programlamanın temellerine hakim olmak uzun zaman alabilir. Elbette, herhangi bir sayfayı arzularınıza göre yapması için bir profesyonel tutabilirsiniz, ancak bu seçeneğin çok bariz bir dezavantajı vardır, bu nedenle çoğu kişi için kabul edilemez.

Görsel web editörleri, web programlamayı öğrenirken zamandan tasarruf etmenin ve gerekli tüm bilgilerle hızlı bir şekilde bir web sitesi oluşturmanın iyi bir yoludur. Bir yandan böyle bir programı kullanarak web projesi oluşturmak için özel bilgiye sahip olmanıza ve programcı olmanıza gerek yok. Öte yandan, bu tür uygulamalar size yaratıcı olma özgürlüğü verir ve sitenin diğer binlerce siteyle tamamen aynı görünmemesini sağlar. Görsel web editörlerinin çalışması, WYSIWYG özelliğine dayanmaktadır - Ne Görürsen Onu Alırsın (ne görürsen onu alırsın). Başka bir deyişle, düzenleme sırasında web sayfaları bir tarayıcıda görüntülenecekleriyle hemen hemen aynı görünür.

⇡ WYSIWYG Web Oluşturucu 7.1.0

geliştirici: Pablo Yazılım Çözümleri
dağıtım boyutu: 5,5 Mb
dağıtım: paylaşılan yazılım
Rus arayüzü: hayır

WYSIWYG Web Builder ve diğer görsel editörlerle oluşturulan web sayfaları ayrı bloklardan oluşur. Metin, grafik, flash videolar vb. olabilir. Kullanıcının yapması gereken tek şey, gerekli blokları seçip sayfada uygun yerlere yerleştirmek, kod ise program tarafından otomatik olarak üretilecektir.

Web tasarım konusunda hiç deneyiminiz yoksa programdaki ilk projenizi hazır bir şablon ile oluşturmaya başlamalısınız. Varsayılan olarak, WYSIWYG Web Builder'ın farklı yönlere sahip yaklaşık on şablonu vardır ve programın resmi web sitesinden birkaç düzine daha ücretsiz olarak indirilebilir. Şablonu indirdikten sonra, öğelerinden herhangi birini düzenleyebileceksiniz.

Bunu yapmak için dikey panele yerleştirilmiş çok sayıda aracı kullanabilirsiniz. Kolaylık sağlamak için kategorilere ayrılırlar: gezinme (site ağacı, gezinme menüsü), çizim (çizgi, eğri, çokgen), multimedya araçları (Flash oynatıcı, YouTube oynatıcı, Java, OLE nesnesi), web formlarıyla çalışmak için araçlar ( a bir CAPTCHA kodu eklemek için alan, bir onay kutusu, dosya indirmek için bir düğme, metin girmek için bir alan), Paypal (bu elektronik ödeme sistemiyle çalışmak için çeşitli düğmeler), vb. Hesabınızda herhangi bir fon kategorisine ihtiyacınız yoksa çalışırken, daha popüler araçlar için ekran alanı boşaltmak üzere onu daraltabilirsiniz.

Ekstra kategorisine dikkat etmeye değer. Burada fotoğraf galerisi oluşturmak, RSS formatında haberlere abonelik eklemek, slayt gösterisi yapmak, sitede arama yapmak için bir araya getirilmiş araçlar bulunmaktadır. Ayrıca, hazır Javascript kod öğelerinin tüm koleksiyonunu burada bulabilirsiniz. Bu, çeşitli görsel efektleri ve tarayıcının geçerli sürümünü belirleme, web sayfasının son değiştirilme zamanı hakkında bilgi görüntüleme ve sayfaya yer işareti koymak için bir bağlantı yerleştirme gibi faydalı araçları içerir.

Kullanıcı, WYSIWYG Web Builder'da çalışırken tamamlanmış sayfa öğelerini görmesine rağmen, site tarayıcıda çalışan editör penceresinden biraz farklı görünebilir. Sayfanın görünümünü tarayıcıda hızlı bir şekilde görüntülemek için F5 tuşuna basmanız yeterlidir. WYSIWYG Web Builder, projeyi sistemin varsayılan tarayıcısında açacaktır. Sayfaları birkaç tarayıcıda aynı anda görüntülemeniz gerekiyorsa, bunları listeye ekleyebilirsiniz.

Tipik olarak, bir site şablonu birkaç sayfadan oluşur. Uygun proje yönetimi için program penceresi, site sayfaları ağacını görüntüleyen özel bir Site Yöneticisi paneline sahiptir. Bu panelin araçlarını kullanarak şablonlara dayalı yeni sayfalar oluşturabilir, önceden sabit sürücünüze kaydedilmiş sayfaları ekleyebilir, mevcut sayfaları kopyalayabilir, özelliklerini görüntüleyebilir vb.

Çok sayıda sayfadan oluşan bir kaynak üzerinde çalışma sürecinde, çalışırlık için bağlantıların kontrol edilmesi, sayfaların boyutunun tahmin edilmesi gibi program araçları ve kök dizinine yerleştirilecek bir XML dosyası biçiminde bir site haritası oluşturucu sitenin dizini de kullanışlı olabilir. Ayrıca WYSIWYG Web Builder, web sayfalarında kullanılan tüm görüntüleri ve diğer medya dosyalarını tek bir yerde toplamanıza yardımcı olabilir.

WYSIWYG Web Builder'ın kendisi oldukça işlevsel bir düzenleyici olmasına rağmen, içinde herhangi bir araç bulamayabilirsiniz. Bu durumda, uzantı galerisine bakmaya değer - belki de istenen araç bir eklenti olarak mevcuttur. Program için 250'den fazla uzantı var ve sayıları sürekli artıyor. Uzantılar, editörün aktif kullanıcıları tarafından yazılır ve resmi forumda yayınlanır. Uzantıları WYSIWYG Web Builder'ın deneme sürümüne bağlayamayacağınızı unutmayın, bunun için programı kaydetmeniz gerekir.

⇡ Web Sayfası Yapıcı 3.21

geliştirici: www.webpage-maker.com
dağıtım boyutu: 3,66 MB
dağıtım: paylaşılan yazılım
Rus arayüzü: hayır

Web Page Maker, birkaç sayfa içeren küçük bir site oluşturmaya uygun, oldukça basit bir görsel düzenleyicidir. Bununla birlikte, sayfaya metin, vektör öğeleri, grafik dosyaları, çeşitli formatlardaki videolar, tablolar, web formları ve diğer tanıdık sayfa öğeleri ekleyebilirsiniz.

Program ayrıca, herhangi bir sitenin gezinme menüsü gibi önemli bir öğesinin hazır sürümlerine sahiptir. Web Sayfası Yapıcı, çeşitli menü seçenekleri içerir. Uygun olanı seçtikten sonra, yönü (yatay veya dikey), öğeler arasındaki mesafeyi, metin ve bağlantı parametrelerini belirterek hemen düzenleyebilirsiniz.

Bazı öğeler (örneğin, aynı gezinme menüsü) sitenin tüm sayfalarında bulunmalıdır. Herhangi bir bloğu düzenlerken, onu mevcut projenin tüm sayfalarına hızlı bir şekilde yerleştirebilir veya bulunması gereken sayfaları belirtebilirsiniz.

Program penceresinin ana kısmı çalışma alanı tarafından işgal edilir ve sağda Site İçeriği paneli bulunur. Bu paneli kullanarak, sitenin sayfalarını ve ayrıca sayfaların tek tek öğelerini yönetmek uygundur. Öğeler sekmesi, sayfadaki tüm blokları görüntüler ve her birine tıklayarak nerede olduğunu hemen görebilirsiniz. Ek olarak, her öğenin özellikler penceresini hemen arayabilir veya gereksiz blokları silebilirsiniz. Site yapısını oluşturmak için kullanılan araçlara gelince, İnternet'te zaten var olan bir kaynağa dayalı olarak yeni bir sayfa oluşturma olasılığını belirtmekte fayda var. Adresini belirtmeniz yeterlidir ve Web Page Maker sayfayı yükleyecek, bloklara ayıracak ve düzenlenebilir hale getirecektir.

Siteyi daha canlı hale getirmek için animasyon efektleri kullanılabilir. Önceden oluşturulmuş Javascript kodunun örnekleri Web Sayfası Yapıcı kitaplığında bulunabilir. Bunları kullanarak kaydırma penceresinin rengini değiştirebilir, ekranın köşesine geçerli saati gösteren bir saat yerleştirebilir, bir slayt gösterisi ekleyebilir vb.

Sitedeki çalışma tamamlandığında, proje sabit sürücünüze kaydedilebilir veya hemen bir FTP sunucusuna yüklenebilir. Üstelik bunun için ek bir istemciye gerek yoktur - Web Page Maker, FTP ile çalışmak için yerleşik araçlara sahiptir.

⇡ Kahve Fincanı Görsel Site Tasarımcısı 6.06

geliştirici: CoffeeCup Yazılımı
dağıtım boyutu: 17,6 MB
dağıtım: paylaşılan yazılım
Rus arayüzü: hayır

CoffeeCup Visual Site Designer'ın geliştiricileri muhtemelen "para kazanabileceğiniz her şeyden para kazanın" sloganıyla yaşıyorlar. Bu nedenle, bu görsel düzenleyiciyi 49$'a satın almanın, diğer birçok benzer programdan bekleyebileceğiniz tüm özellikleri size vermeyeceğini aklınızda bulundurmalısınız.

Bu nedenle, program on şablonla birlikte gelir ve gerisini indirmek için geliştiricinin web sitesine gitmeniz önerilir. İlgili sayfayı açtığınızda, ek şablonların ücretli olduğunu ve parça başına 9 ABD doları fiyatla satıldığını görebilirsiniz. Uygulama ile çalışma sürecinde kullanıcıyı bu tür "sürprizler" beklemektedir. Web formu aracı düğmesini tıkladığınızda, kullanımının 39 ABD Doları daha tutacağını göreceksiniz, sitenize bir fotoğraf galerisi eklemeyi deneyin ve bu özelliğin de ek bir ücret karşılığında kullanılabildiğini göreceksiniz.

Programın standart sürümü, metin, vektör öğeleri, grafiklerle çalışmanıza olanak tanır. Bir araç seçtikten sonra, dikey panelde ayarlarıyla birlikte kayan bir palet görünür. Kullanıcı enstrümanı değiştirene kadar ekranda kalır. Bu yaklaşım sayesinde, çalışma alanına maksimum miktarda alan tahsis edilir.

Sayaçlar ve web formları gibi yaygın web sayfası öğeleri, programda yalnızca özel bir HTML ekleme aracı kullanılarak oluşturulabilir.

Vektör öğeleriyle (oklar, çokgenler, yıldız işaretleri, belirtme çizgileri vb.) çalışırken, görünümlerini değiştirmek için çok sayıda araç kullanabilirsiniz. Örneğin, fareyi farenin üzerine getirdiğinizde şeffaflığı değiştirmek, gölge eklemek, bir nesneyi 3B yapmak, parlamasını sağlamak veya şekil değiştirmek mümkündür. Ek olarak, her nesnenin dolgusunu özelleştirebilir, doku ekleyebilirsiniz.

CoffeeCup Visual Site Designer, bir siteyi uzak bir sunucuya yüklemek için kullanılabilen yerleşik bir FTP istemcisine sahiptir. Siteyi yükledikten sonra bazı sayfalarında değişiklik yapmaya karar verirseniz, veri senkronizasyonu işlevini kullanabilirsiniz. Bu durumda, program değiştirilen sayfaları yükleyecektir. Gerekirse CoffeeCup Visual Site Designer'dan çıkmadan siteyi sunucudan tamamen kaldırabilirsiniz.

⇡ Web Sitesi X5 Evrimi 8

Geliştirici: Incomedia
dağıtım boyutu: 15.3 MB
dağıtım: paylaşılan yazılım
Rus arayüzü: evet

Çoğu görsel düzenleyici birbirine benzer. Bunun avantajları var, çünkü bu programlardan birini çözdükten sonra, daha sonra başka bir denemeye karar verirseniz, kendinizi zaten güvende hissedeceksiniz. Bununla birlikte, daha önce hiç web sitesi oluşturmadıysanız, en basit görsel düzenleyici bile başlangıçta "önce ne yapılması gerekiyor?", "hangi program araçları ana, hangileri yardımcı" gibi birçok soruyu gündeme getirebilir. ?" vesaire.

WebSite X5 Evolution programı, bir site oluşturmak için biraz farklı bir yaklaşım uygular, bu sayede birçok soru kendiliğinden kaybolur. Uygulamanın çalışması, adım adım sihirbaz ilkesi üzerine inşa edilmiştir, böylece acemi bir kullanıcı önemli hiçbir şeyi kaçırmadığından emin olabilir.

Sihirbaz size bir proje oluşturmanın tüm adımlarında rehberlik etse de, kullanıcı isteğe bağlı olarak o anda gerçekleştirmek istediği eylemleri yan menüden seçerek bazı adımlarda "atlayabilir". Toplamda beş aşama vardır.

İlki genel ayarları içerir. Yani burada site adı, yazar ve dil girilir, anahtar kelimeler seçilir, Favicon yüklenir, menü tipi seçilir (yatay veya dikey), uygun şablon seçilir (programda yüzden fazla tasarım seçeneği vardır) kitaplık), site sayfalarının üst ve alt görünümleri ayarlanır.

İkinci aşamada, bir site haritası oluşturulması, yani yapısı üzerinde düşünülmesi önerilmektedir. Araç çubuğundaki "kopyala" ve "yapıştır" düğmelerini kullanarak mevcut sayfalardan yeni sayfalar oluşturabilirsiniz. Burada kaynağın hangi sayfalarının gizleneceğini belirleyebilir, her sayfa için yenileme hızını belirleyebilirsiniz.

Sayfa adına çift tıklamak sizi sitede çalışmanın bir sonraki aşamasına götürecektir ve burada zaten doğrudan içeriğiyle ilgilenebilirsiniz. Varsayılan olarak sayfa, her birine bir nesne ekleyebileceğiniz dört bloğa bölünmüştür: metin, grafik dosyası, slayt gösterisi, tablo, flash animasyon, multimedya dosyası vb. İstenirse sayfa başına düşen blok sayısı artırılıp azaltılabilir. Sayfaya bir nesne yerleştirdikten sonra, ayarlarını tanımlamanız gerekir; örneğin, grafik dosyasının yolunu belirtme, metin yazma vb. Tüm bu işlemlerin her sayfa için yapılması gerekecektir.

Dördüncü aşamada, WebSite X5 Evolution, örneğin giriş sayfasının görünümünü tanımlama, flash reklamları görüntülemek için parametreleri ayarlama, siteye bir blog ve RSS beslemesi ekleme gibi bazı ek ayarlar belirlemenizi önerecektir.

Sunulan özellikler arasında "e-ticaret için sepet" gibi bir unsur da bulunmaktadır. Bunu kullanarak hızlı bir şekilde kendi çevrimiçi mağazanızı oluşturabilirsiniz. Ayarlarına giderek, hızlı bir şekilde ürün kategorileri oluşturabilir, teslimat koşullarını tanımlayabilir, ödeme seçeneklerini belirleyebilir, bir lisans sözleşmesi ekleyebilir ve mağaza öğelerinin görünümünü özelleştirebilirsiniz.

Son olarak, son adım projeyi dışa aktarmaktır. Bitmiş site, sabit sürücünüze kaydedilebilir veya hemen bir FTP sunucusuna yüklenebilir. Ayrıca program, proje dosyalarını başka bir bilgisayara aktarmak için kaydetmeyi mümkün kılar. Oluşturulan projenin herhangi bir aşamada programın kendi formatında kaydedilebileceğini unutmayın.

WebSite X5 Evolution ile çalışırken belki de tek rahatsızlık, sayfaları tarayıcıda önizleyememektir. Sitenin nasıl görüneceğini görmek istiyorsanız, "Test" işlevini kullanabilirsiniz, ancak projeyi oluşturmak biraz zaman alır. Ayrıca program, Internet Explorer motorunda oluşturulan sayfaları kendi tarayıcısında oluşturur.

⇡ KompoZer 0.7.10

geliştirici: Fabien Cazenave
dağıtım boyutu: 7,9 MB
dağıtım: ücretsiz
Rus arayüzü: evet

KompoZer ücretsiz ve açık kaynaklı bir görsel web editörüdür. Program yalnızca Windows için değil, Mac ve Linux için de mevcuttur. Düzenleyici, iyi bilinen Firefox tarayıcısını çalıştıran Gecko motorunu temel alır. Bu, bir dizi avantaj sağlar: ilk olarak, motor, XML, CSS ve JavaScript gibi modern web standartlarını mükemmel bir şekilde destekler. İkincisi, Gecko tabanlı düzenleyici eklentilerle genişletilebilir.

Belki de kurmak isteyeceğiniz ilk eklenti, Rusça yerelleştirme paketidir. Firefox eklentilerinin yüklenmesiyle hemen hemen aynı şekilde yüklenir: Araçlar menüsünde Uzantılar komutunu seçin ve ardından indirilen .xpi uzantılı yerelleştirme dosyasının yolunu belirtin. Eklentiyi kurduktan sonra, programı yeniden başlatmanız gerekecek ve ardından arayüz Rusça olacaktır.

Programa bir FTP istemcisi entegre edilmiştir ve yalnızca bitmiş bir projeyi indirmek için değil, aynı zamanda sunucuda zaten barındırılan bir sitenin sayfalarını hızlı bir şekilde düzenlemek için de kullanılabilir. Sunucu oturum açma bilgilerinizi belirterek, dizin ağacında gezinebilir ve düzenleme için sayfaları seçebilirsiniz. İçerikleri KompoZer penceresine yüklenecek ve anında düzenlenebilirler.

KompoZer, aynı anda birden çok sayfayla çalışmanıza olanak tanır. Her biri, aralarında hızlıca geçiş yapabileceğiniz ayrı bir sekmede açılır. Her sayfanın kendi geri alma ve yineleme geçmişi vardır. Sekme başlığındaki simgeye bakarak, sayfanın içeriğinde henüz kaydedilmemiş değişikliklerin yapılıp yapılmadığını hemen belirleyebilirsiniz.

KompoZer, web sayfası kodunu kendisi oluştursa da, gözden geçirebilir ve gerekirse bazı değişiklikler yapabilirsiniz. Her sayfanın altında, sayfanın görsel görünümü ile kod ekranı arasında geçiş yapmanızı sağlayan sekmeler bulunur.

Varsayılan olarak, en sık kullanılan araçlar program araç çubuğuna yerleştirilir: köprü ekleme, resim ekleme, tablolar, web formları oluşturmak için araçlar vb. İstenirse, bu panelin görünümünü değiştirebilir (örneğin, simgeleri küçülterek) ve ayrıca ona başka araçlar ekleyebilirsiniz.

Genel olarak, KompoZer görsel bir web editörü olmasına rağmen, web sitesi oluşturma konusunda zaten biraz deneyimi olan kullanıcılar için tasarlanmıştır. İçinde hazır şablonlar ve gezinme menüsü örnekleri bulamazsınız, ancak programa güçlü bir CSS düzenleyici entegre edilmiştir, HTML kodunu kontrol etmek ve yazım denetimi yapmak için araçlar vardır.

⇡ BestAddress HTML Düzenleyici 17

Geliştirici: Multimedya Avustralya
dağıtım boyutu: 7.1 MB
dağıtım: paylaşılan yazılım
Rus arayüzü: hayır

Bir kullanıcı, örneğin bilgisayar grafikleri, video düzenleme veya programlama gibi bir alanı incelemeye karar verdiğinde, genellikle daha deneyimli yoldaşlara yeni bir zanaat öğrenmeye başlamak için hangi programın daha iyi olduğunu sorar. Gerçekten de bazı durumlarda, başlangıçta basit araçları kullanmak ve ardından yeteneklerini anladıktan sonra daha gelişmiş editörlere geçmek daha iyidir. BestAddress HTML Editor 2010 Professional'a gelince, bu programın acemi bir web geliştiricisi için ilk ve son araç olma şansı olduğunu söyleyebiliriz.

Bir web sayfasının görsel oluşturma modunda çalışmak, bir oluşturucuyla çalışmaya benzer - öğelerin, yer düğmelerinin, grafiklerin, menülerin ve diğer site bileşenlerinin boyutunu ve rengini kendi takdirinize bağlı olarak bağımsız olarak ayarlayabilirsiniz. Neredeyse bir metin düzenleyicide olduğu gibi uygun biçimlendirme, herhangi bir sayfa öğesinin konumunu kontrol etmek için kullanılabilir. BestAddress HTML Editor 2010 Professional'da şablon bulamazsınız, ancak belirtilen adreste bulunan bir web sayfasını indirebilirsiniz. Sayfayı programda açtıktan sonra düzenleyebilirsiniz.

Editör, projeyi otomatik olarak sunucuya yükleyebilir - bunun için program, beraberinde gelen Dijital FTP Erişimi FTP istemcisini kullanır.

BestAddress HTML Editor 2010 Professional ayrıca profesyonel kodlama araçlarına sahiptir. HTML, CSS, Java ve PHP kodu çalışma ve yazma ilkelerini anlamak isteyen yeni başlayanlar belgelere başvurabilir. Etiket atama, basit işlem örnekleri vb. gibi kod yazmak için en önemli kuralları ana hatlarıyla belirtir. Basit ve anlaşılır dersler, HTML'nin yapısı hakkında kısa bir fikir verir ve yeni başlayanları "bilgi sahibi" yapar.

⇡ Sonuç

Bu incelemede açıklanan programlar, sitenizi hızlı bir şekilde oluşturmanıza ve İnternet'e yerleştirmenize olanak tanır. Unutulmamalıdır ki tüm bu uygulamalar sadece kullanıcının elindeki araçlardır. Sitenin ziyaretçilerin dikkatini çekip çekmeyeceği, iş dünyasında başarının ek bir bileşeni olup olmayacağı, yalnızca yazarın hayal gücüne ve başladığını iyileştirme arzusuna bağlıdır. Ve tabii ki, sitenin yerleştirilen umutları haklı çıkarması için, girişiminizin şanslı olması gerekir, bu da herkese diliyoruz!

HTML editörümüzün temel amacı, kaynakları geliştirirken veya içerikle doldururken uzmanlar tarafından sayfa kodu oluşturulmasını basitleştirmektir. Bu düzenleyici, bu süreci önemli ölçüde hızlandırır ve bir önizleme ile sonucu hemen görsel olarak görmeyi mümkün kılar.

BT çalışanları neden bir HTML düzenleyici kullanıyor?

Bildiğiniz gibi, sitelerin köprü metni biçimlendirme dili kullanılmadan tek bir modern kaynak yapamaz ve bir sayfanın kodunun uzunluğu birkaç bin satıra ulaşabilir. Klasik sürümde, biçimlendirme kodu yazmanın en iyi yolu normal bir not defteridir. Ana etiketlerin “kulplarla” girilmesi gereken saf haliyle kullanıcıya sunulur. Bu çok büyük bir zaman gerektirir ve tamamen mekanik bir yazım hatası yapma riski göz ardı edilmez. Bir cankurtaran olarak, çalışmayı kolaylaştırmak için, web geliştiricileri, zaten öğeleri otomatik olarak düzenleme yeteneği sağlayan HTML düzenleyiciyi aktif olarak kullanırlar, ancak en önemlisi, karakterleri manuel olarak değil, bu amaçla önceden yazılmış program kodlarını kullanarak girebilirsiniz.

Pratik HTML kod düzenleyici, potansiyel kullanıcıların ustalaşması için yeterince basittir ve deneyimsiz bir kullanıcı için bile web sayfası düzeni sorununa en iyi çözümü kolayca sunabilir.

HTML editörünün avantajları maksimumdur!

İstenen karakteri kaçırma, köşeli parantezleri kapatma, yazım hatası veya hata yapma korkusu olmadan öğelerin kodlamasını doğru bir şekilde yazmanıza olanak tanır. Araç sayfasında istediğiniz öğeyi bulmanız, üzerine tıklamanız yeterlidir - ve tüm veriler derhal girilecektir, içeriği kontrol etmenize bile gerek yoktur.
Yarı otomatik yazılım kullanılması nedeniyle kodlama hızı önemli ölçüde artar, kullanıcı belirli eylemleri gerçekleştirmek için oldukça yüksek bir zaman tasarrufu elde etmeyi bekleyebilir. Bu nedenle, kod çok daha hızlı derlenir.
PC'de ön kurulum olmadan çevrimiçi olarak kullanılabilir. Düzenleyici, dünyanın herhangi bir yerinde sorunsuz çalışmanıza izin verecek, verilerin otomatik modda kaydedilmesini sağlayacak ve sanatçı için maksimum rahatlığı garanti edecektir.
Ücretsiz, potansiyel bir müşteri için zamandan ve paradan önemli ölçüde tasarruf sağlayacak, ona sınırsız bir faaliyet alanı sağlayacak ve ona işinde çok fazla hata yapma fırsatı vermeyecektir. Yazılımın kullanımı için büyük meblağlar ödemeye gerek kalmayacak.

Dikkat çekici bir şekilde, birçok profesyonel uzman bu tür editörlerden öğrenmeyi tavsiye ediyor. Halihazırda yer almış olan kaynak geliştiriciler için, böyle bir teklif, özenli manuel yazmaya değerli bir alternatif, her şeyi hızlı ve pratik bir şekilde yapma fırsatı olacaktır.

Bir web sitesi oluştururken birkaç aşamadan geçmeniz gerekir: tasarlama, sayfa düzenleri oluşturma, içerik doldurma, siteyi sürdürme ve yazılım temeli. Web tasarımı veya sayfaların görsel tasarımı, basılı yayınlardaki mizanpaja benzer şekilde web sitesi geliştirme aşamalarından biridir. Bu süreçte site yapısı, navigasyon vb. tasarlanır yani web tasarımında amaç sadece görsel algı değil aynı zamanda kullanıcılara kolaylık da sağlamaktır.

Web tasarımcılarının mizanpaj için kullandıkları programlara HTML editörleri denir. Bu tür düzenleyicilerin iki türü vardır:

Görsel, "Gördüğünü alırsın" ilkesiyle çalışır - WYSIWYG (Ne Görürsen Onu Alırsın). WYSIWYG ile çalışırken, nihai sonuç düzenleme işlemindekiyle aynı görünecektir.
Görsel olmayan (metin). Bu tür düzenleyiciler için kodu kendiniz yazmanız gerekir, bu nedenle bu araçlar genellikle "varsayılan" seçeneğini devre dışı bırakan profesyonel web tasarımcıları tarafından kullanılır.

Her iki çalışma ilkesini birleştiren editörler de geliştirilmiştir. En iyi HTML editörünü seçmek zordur - bazıları iyi satar, diğerleri önde gelen şirketler tarafından geliştirilir, diğerleri profesyonel web tasarımcıları tarafından kullanılır, diğerleri uygun fiyatlıdır vb. eğitim seviyeleri.

Hangi editör daha iyi

Metin editörlerinin destekçileri, yalnızca manuel olarak kod oluşturabileceğinizden ve program biçimlendirmenin görsel olandan daha iyi olduğundan emindir. Hazır şablonlara göre oluşturulan siteler aslında aynı türdendir ancak var olma hakları vardır ve birçokları için oldukça uygundur. Denemek için basit bir siteye veya kişisel bir sitenin iki sayfasına ihtiyacınız olduğunda, WYSIWYG mükemmeldir.

Tıpkı birinci sınıf bir moda tasarımcısının kalıplara ve kalıplara ve bir çevirmenin sözlüğe ihtiyacı olmadığı gibi, profesyonellerin de hazır mizanpajlara ve ipuçlarına ihtiyacı yoktur. Kapsamlı bir HTML bilgisi olmadan sitelerini açmak isteyenler için metin editörlerine ihtiyaç yoktur ve bir web tasarımcısı için görsel editörler çok ilkeldir.

WYSIWYG editörleri neden iyidir?

Görsel tasarımcılar veya çevrimiçi görsel HTML editörleri, metne orijinal formlarında öğeler ve nesneler eklemenizi sağlayan vazgeçilmez bir araçtır. HTML kodu ile metin, tablo ve görseller içeren bir sayfa oluşturmak uzmanların yetkisi dahilindedir ve görsel düzenleyici kod oluşturma ihtiyacını ortadan kaldırır. Web yöneticisi, bitmiş biçimde metin içeren bir sayfa alır. Bu anlamda WYSIWYG, Microsoft Word metin düzenleyicisine benzer.

Araç çubuğu, yazmak ve düzenlemek için ihtiyacınız olan her şeye sahiptir: pano, yazdırma, yazı tipleri ve metin tasarımı, tablo, resim, form ekleme ve çok daha fazlası için düğmeler. HTML kaynak kodunu almak için, yalnızca düğmeyi tıklamanız yeterlidir, ardından kod düzenlenebilir, kopyalanabilir ve siteye aktarılabilir. WYSIWYG editörü, kısa sürede iyi bir sonuç almanızı ve sayfaları bir web kaynağında görüntülemenizi sağlayacaktır.

Görsel düzenleyici, HTML metnindeki etiketlerle birleştirilebilir - bu, web tasarımcılarının işini önemli ölçüde basitleştirir.