Editor vizual de pagini web, editor CSS. TopStyle. Editor vizual de pagini web, editor CSS Ce poate face?

Mulți oameni îl folosesc de mult timp, dar adesea doar pentru editarea fișierelor CSS. Îl folosesc ca principal Editor HTML (despre care vorbim O Versiuni Pro) în producerea machetelor de pagină.

Instrument

Există multe editoare HTML diferite (profesioniști) pe platforma win, iar alegerea unui „sistem de alegere” nu este deloc ușoară. Scriu cod manual, așa că editorii WYSIWYG nu au fost niciodată interesanți pentru mine. Singura excepție este cel mai recent Dreamweaver, pe care îl folosesc pentru a crea tabele complexe.

eu pentru o lungă perioadă de timp Am folosit Homesite (împreună cu TopStyle Lite), dar nu a fost dezvoltat de multă vreme - autorul său Nick Bradbury dezvoltă acum TopStyle. Prin urmare, la un moment dat, am decis să încerc noua lui creație.

Ce poate face?

În primul rând, editorul TopStyle este, desigur, pentru editarea CSS. Cu toate acestea, versiunea sa mai veche (plătită) este perfect potrivită pentru aspectul XHTML.

Editorul are evidențierea personalizabilă, completarea etichetelor (chiar și înlocuirea automată a atributelor de clasă și id dintr-un fișier de stil), funcții de validare încorporate (folosind validatoare W3C sau CSE descărcabile). În general, aproape tot ce fac alți editori normali. Dar are și propriile sale caracteristici care fac dezvoltarea site-ului web Ajutor CSS foarte confortabil.

De exemplu, poate construi rapoarte despre clasele folosite, adică arată care clase au fost folosite unde și care au fost în general „pierdute” (vezi figura), adică nu sunt folosite nicăieri pe site.

TopStyle are un mecanism de previzualizare excelent: îl puteți configura astfel încât modificările într-un fișier CSS separat să fie afișate în exemplul de care aveți nevoie fișier HTML. Adică, în timp ce editați un fișier, vizualizați modificările pe altul! Și toate acestea pe două motoare (Mozilla și IE), și chiar cu capacitatea de a specifica orice dimensiunea ferestrei - cel puțin 6000x3000 pixeli.

Editorul are funcții pentru „pieptănarea” documentelor vechi în care designul este inclus în atributele HTML, precum și exportul regulilor CSS pentru diferite browsere/versiuni CSS.

TopStyle construiește un arbore de selecție foarte convenabil care vă scutește de a fi nevoit să alfabetizați manual elementele. Acest arbore afișează mai întâi toate regulile pentru elementele pure, apoi clasele și apoi ID-ul.

Desigur, nu îmi mai pot imagina că lucrez fără panoul Style Inspector, care este mult mai convenabil solutii similareîn unele Dreamweaver. Vă permite să efectuați foarte rapid operațiuni de rutină - cum ar fi selectarea fonturilor, culorilor dorite etc.
În același timp, pentru fiecare regulă este arătat clar gradul de compatibilitate cu diferite browsere.

Una dintre cele mai convenabile caracteristici: paleta de culori pe Bazat pe CSS- toate culorile tale într-un singur loc. Acum nu mai trebuie să scrieți culorile la începutul documentului sau să vă târați în mod constant în căutarea ceea ce aveți nevoie.
În plus, capacitatea de a le sorta și înlocui în masă, de exemplu, face toate culorile mai închise (deși eu personal nu am folosit niciodată acest lucru).

În plus, capacitatea de a formata stilurile este foarte convenabilă: de exemplu, trageți toate regulile într-o singură linie pentru a economisi traficul și, dacă trebuie să găsiți ceva, readuceți-l la starea inițială (cu liniuțe și cratime).

În întregime, funcții utile mult și fără supraîncărcare, cum ar fi html-kit, de exemplu. Nu există panouri de inserare a etichetelor, dar puteți personaliza multe pentru dvs. De exemplu, am atribuit taste rapide pentru a încheia textul în etichetele H1 ... H4 apăsând Ctrl-1 ... Ctrl-4 . Și astfel puteți seta orice combinații.

Concluzie

În general, toți cei care nu folosesc încă TopStyle Pro - mergeți și descărcați-l de pe site-ul producătorului.

Programul nu este ieftin – se vinde cu 80 de dolari – dar merită. Dispunerea conform standardelor va deveni mult mai plăcută. În cele din urmă, cere-i șefului tău să-ți cumpere un instrument adecvat!

Imaginea prezintă TopStyle Pro v 3.5 (1999 - 2006). Interfață și ajutor în limba engleză. limba (există o localizare). Preț: 79,95 USD
Cea mai recentă versiune a programului este TopStyle v 5. Greutatea este de 71 MB.

Scopul programului este de a crea tabele Stiluri CSS pentru pagini web.

Unele caracteristici ale programului:

Suport CSS3 și HTML5. Veți avea acces la toate cele mai recente caracteristici și proprietăți ale etichetelor.

Previzualizează HTML și CSS în timp ce le scrii

TopStyle acceptă browserele IE, Chromium, Firefox și Safari.

Crearea de link-uri în TopStyle facilitează navigarea între documente Faceți clic pe o etichetă de clasă HTML pentru a naviga la acea definiție de clasă într-o foaie de stil externă sau faceți clic pe o etichetă de ancorare pentru a deschide fișierul asociat pentru editare.

Copiere și lipire inteligentă. Tot ce trebuie să faceți este să apăsați Ctrl+C (sau Ctrl+X), iar TopStyle va da seama ce să selecteze și să copieze Smart Copy and Paste va înlocui cuvântul curent.

Validare W3C + CSE + HTML5 pentru a se asigura că documentul se afișează corect în diferite browsere

CSS3 vă permite să definiți o foaie de stil pentru anumite condiții. De exemplu, este posibil să aveți o foaie de stil pentru ecrane mariși o altă foaie de stil pentru dispozitive mobile. TopStyle 5 vă permite să vă adaptați diverse solutiiși dispozitive fără a modifica conținutul.

Panoul de selecție CSS arată toți selectoarele din documentul dvs. Făcând clic pe orice selector din listă, vă duce la locația dorită într-un document lung.
Grupul de structuri HTML

Grupul de structură HTML apare sub editorul de cod și arată ierarhia atributelor HTML. Selectarea unei etichete părinte este ușoară - când faceți clic pe unul dintre butoanele din panoul de structură HTML, TopStyle 5 va selecta eticheta HTML corespunzătoare (și conținutul acesteia) în editor.

Grupuri CSS
Găsirea locului potrivit în foi de stil uriașe și dezorganizate poate fi o provocare. Una dintre cele mai puternice caracteristici ale TopStyle este capacitatea de a grupa selectoarele CSS într-o structură de foldere.
Selectați unele reguli CSS și apoi faceți clic pe: CSS > Grup CSS nou - Grup nou CSS:
Introduceți un nume pentru grupul dvs. CSS și TopStyle va introduce următoarele în document:

/* @group GroupNume1 */

/* @Sfârşit */
Dacă nu utilizați CSSEdit sau TopStyle, aceste comentarii de grup sunt doar mici comentarii sigure. Cu toate acestea, în TopStyle, puteți restrânge grupurile dvs. CSS în editor și le puteți vizualiza într-un aspect bazat pe foldere.

Spațiul de lucru:

TopStyle 5 are un meniu diferit de meniu versiunile anterioare TopStyle.

Bara de instrumente HTML - TopStyle vine cu o bară de instrumente HTML configurabilă de utilizator.
Spațiile de lucru își amintesc de cele anterioare documente deschise, iar apoi le restaurează la pornire. Când treceți la alt spațiu de lucru, documentele referitoare la acel spațiu de lucru sunt deschise, iar dacă reveniți la spațiul de lucru anterior, documentele deschise anterior sunt restaurate. Acest lucru este extrem de util atunci când lucrați la mai multe proiecte în același timp.

Puteți crea un spațiu de lucru nou (Fișier > Spațiu de lucru nou) sau puteți deschide un alt spațiu de lucru (Fișier > Deschide spațiu de lucru). Salvarea unui nou spațiu de lucru este la fel cu salvarea unui document normal - pur și simplu alegeți un nume pentru spațiul de lucru.

TopStyle 5 are un panou acces rapid(Panou de acces rapid).

TopStyle verifică erorile de ortografie pe măsură ce tastați și le marchează cu linii roșii ondulate.

Suport Unicode. Când îți salvezi (X) document HTML Puteți alege liber codificarea documentului dvs. (UTF-8, UTF-16, ANSI etc.).

TopStyle 5 creează o copie de rezervă de fiecare dată când actualizați și salvați un document. Datorită noii ferestre Istoric, puteți deschide o copie de rezervă, puteți compara diferențele sau puteți restaura copie de rezervă(restaurează previzualizarea anterioară).

Hărțile de imagine sunt o imagine care este împărțită în regiuni sau „puncte fierbinți”. Când un utilizator face clic pe un hotspot, are loc o acțiune (de exemplu, accesarea unei alte pagini Web). TopStyle 5 vine cu un editor de hărți imagine.

Prefixr
Nu orice browser web acceptă pe deplin CSS3, iar CSS3 în sine nu este complet dezvoltat. Acesta este motivul pentru care unele browsere web necesită așa-numitele proprietăți prestabilite. Prefixr asigură că browserele acceptă proprietăți CSS experimentale.
Dar, în realitate, dezvoltatorii web ar trebui să folosească numai proprietăți CSS conforme cu standardele.
Prefixr va filtra proprietățile dvs. CSS3 (conforme cu standardele) și le va actualiza dinamic pentru a adăuga proprietăți de compatibilitate cu browserul.

Generator de gradient CSS.
CSS3 și HTML5 au caracteristica de a defini degrade folosind CSS3 pur, fără a fi nevoie să creați imagini. Gradienele pot fi folosite pentru a crea fundalul paginilor web. Puteți crea un gradient liniar (orizontal, vertical sau diagonal) și culorile care alcătuiesc gradientul.

Generator de umbre de text.
CSS3 are o proprietate text shadow. Selectați culoarea umbrei și indentarea umbrei (cum ar fi 2px 2px).

Opțiuni îmbunătățite pentru fișierele de previzualizare (numai CSS) începând cu TopStyle 5:
mutați ultimele fișiere de previzualizare utilizate în partea de sus a listei
includeți documente HTML care se află în același director (cu documentul dvs. CSS)
includeți documente HTML care sunt deschise (în alte conturi)

HTML5
TopStyle 5 include o nouă definiție HTML5.
Verificarea calității HTML5 (HTML5 Validator)
Panoul de structură HTML apare sub editorul de cod și arată ierarhia etichetelor.
Când faceți clic pe unul dintre butoanele din grupul de structură HTML, TopStyle 5 va selecta eticheta HTML corespunzătoare (și conținutul acesteia) în editorul de cod:

TopStyle oferă un atribut de închidere automată (Tu tastați , iar TopStyle va închide automat caracteristica cu), vă permite, de asemenea, să împachetați cu ușurință eticheta HTML:

Utilizare Google Chrome ca un browser intern
TopStyle a susținut întotdeauna și Internet Explorerși Mozilla Gecko (Firefox). Acum TopStyle 5 introduce Google Chrome ca browser intern. Cu alte cuvinte: previzualizarea va fi posibilă chiar dacă nu aveți Google Chrome pe computerul dvs.

XRAY - vă ajută să vizualizați aspectul paginii dvs. (afișează poziția, marginile, umplutura și dimensiunile unui element). Pe lângă aceste detalii, grupul XRAY arată și selectoarele CSS care se aplică elementului. Când faceți clic pe aceasta Selector CSSîn grupul XRAY, TopStyle va naviga automat la acea regulă CSS din grupul de selecție (chiar dacă acea regulă CSS se află în alt document!)

Când selectați o bucată de text în TopStyle 5 în timpul previzualizării, poziția cursorului în editor este sincronizată automat cu textul corespunzător.

TopStyle 5 include (și se integrează cu) CSS Tidy, precum și un analizor și optimizator CSS. Datorită optimizării CSS, aveți pagini mai rapide. De asemenea, puteți utiliza CSS Tidy pentru a formata foile de stil pentru compatibilitatea cu browserul.

TopStyle 5 arată imagini de compatibilitate cu browserul pentru fiecare proprietate.

Google oferă multe fonturi web de înaltă calitate ( Google Web Fonturi), care funcționează în majoritatea browserelor. TopStyle 5 acceptă acum inserare automată aceste fonturi în paginile dvs.

Editare îmbunătățită a culorilor CSS - TopStyle 5 arată un mic eșantion de culoare sub fiecare proprietate CSS. Când faceți clic pe acest eșantion de culoare, apare un dialog de culoare. De aici, puteți modifica cu ușurință valoarea culorii.
Când faceți triplu clic pe o valoare de culoare în editor, apare un dialog de culoare. De aici, puteți schimba cu ușurință culoarea sub cursorul mouse-ului.

Analizorul de contrast de culoare vă permite să identificați culorile din prim plan și culorile de fundal și apoi să determinați dacă acestea oferă de fapt contrast:
Diferența de luminozitate (trebuie să fie mai mare de 125)
Diferența de culoare (trebuie să fie mai mare de 500)
Raportul de contrast (trebuie să fie de cel puțin 5:1)

Pe lângă FTP (introdus anterior în TopStyle 4), TopStyle 5 include acum suport SFTP.
Istoricul fișierelor

TopStyle 5 adaugă ajutor pentru elemente HTML! Apăsați tasta F1 în timp ce marcajul se află în eticheta HTML și va apărea ajutor detaliat pentru elementul HTML.

Căutare/Înlocuire îmbunătățită în fișiere
Puteți căuta și înlocui pe un site la distanță (un site pe un server din rețea) în același mod ca și pe un folder local.
Începând cu TopStyle 5, am adăugat următoarele noi opțiuni de căutare și înlocuire în Fișiere:
într-un folder documentul curent
în folderul documentului curent și subdosarele acestuia

Înlocuire automată îmbunătățită
clauze cu mai multe linii - acum puteți înlocui textul cu mai multe linii
folosind variabile
suport tip document (CSS sau HTML); Acum puteți avea articole separate pentru CSS și HTML

TopStyle este un editor de foi de stil în cascadă (CSS) scris de Nick Bradbury, creatorul HomeSite. TopStyle conține tot ce aveți nevoie pentru a crea foi de stil care sunt corecte în toate browserele. Portează cu ușurință în editorul HTML și este implicit la nivel de sistem pentru toate fișierele cu extensia .css. Indispensabil pentru crearea și susținerea proiectelor mari. De exemplu, funcția Link Wizard vă permite să legați toate paginile proiectului la un fișier de stil, pe care programul însuși îl va crea. Trebuie doar să specificați locația în care sunt stocate toate paginile site-ului. Pot fi remarcate alte două caracteristici utile ale pachetului - Style Checker și Orphan Styles. Primul vă permite să verificați orice fișier CSS pentru erori, al doilea scanează paginile existente ale site-ului pentru stiluri „pierdute”. Dacă sunteți confuz în ceea ce privește stilurile dvs. și există o suprapunere pe mai multe straturi de diferite fonturi și scheme de culori pentru link-urile de pe paginile html, TopStyle poate elimina toate etichetele de font din pagină și le poate înlocui cu un singur stil în cascadă. Și aceasta este doar o mică parte din ceea ce poate face programul TopStyle.

Disponibil în două versiuni:
TopStyle Lite- versiune gratuită, simplificată
TopStyle Pro- versiune completă () cu multe caracteristici suplimentare.

	Descărcați TopStyle Pro plătit (topstyle.exe) de pe www.bradsoft.com
	Dimensiunea fișierului: 3,7 MB Timp de încărcare: -	| căutare în oglindă
	Descărcați gratuit TopStyle Lite (ts3lite.exe) de pe www.bradsoft.com
	Dimensiunea fișierului: 1,8 MB Timp de încărcare: -	| căutare în oglindă

Comentariul și discuția dvs. despre programul TopStyle Pro

Anterior, când nu exista CSS, designerul trebuia să atribuie manual o etichetă fiecărui titlu . A fost foarte dureros și apoi a apărut CSS, care a făcut viața mult mai ușoară pentru web designeri. CSS vă permite să definiți toate stilurile pentru site-ul dvs. într-un singur fișier (sau mai multe, la discreția dvs.). Acest lucru economisește timp și face codul mai flexibil.

Dar de ce avem nevoie de editori CSS? Fiecare introducere tehnologie nouă are două fețe ale monedei, în CSS acest lucru se reflectă în suportul unor proprietăți CSS în browserele IE. Și astfel, designerul web trebuie să găsească un hack pentru a repara afișarea în browserele IE.

Editorii CSS vă ajută să scrieți codul mai rapid și să evitați multe greșeli.

1. STILISANT

STYLIZER este un editor CSS care vă permite să editați CSS și să vedeți modificările în timp real. Puteți introduce pur și simplu adresa paginii web și în stânga veți vedea pagina web, iar în dreapta este codul CSS care poate fi schimbat și modificările vor fi vizibile în stânga. Îl puteți schimba manual specificând proprietățile sau folosind butoanele editorului WYSIWYG.

De asemenea, puteți schimba dinamic culoarea textului. Când schimbați culoarea, apare un spectru de culori, similar cu cel găsit în Adobe Photoshop.

Este imposibil să faceți o greșeală în acest editor, deoarece aici editorul însuși va verifica valorile pe care le introduceți.

2.TopStyle

Editorul TopStyle arată stilurile acceptate Browsere Firefox, IE, Safari și chiar iOS 2.0. Această oportunitate poate fi utilizat în dezvoltarea de design multi-platformă.

Una dintre caracteristicile utile ale acestui editor este Inspector, care vă permite să adăugați Proprietăți CSS cu un singur clic, ceea ce va economisi timp și efort în timpul unei codări lungi și plictisitoare.

Acest editor vă permite, de asemenea, să vedeți compatibilitatea proprietăților CSS în browser, ceea ce este foarte util atunci când scrieți cod pentru browserul IE.

3. Maestru de stil

Potrivit dezvoltatorului, Style Master este un editor care poate fi folosit la orice nivel de cunoștințe CSS. Programul poate folosi nu doar un editor WYSIWYG, ci și să scrie cod manual (ar fi foarte ciudat dacă nu ar fi așa :)), cu evidențierea fiecărei proprietăți, pentru dezvoltatorii mai experimentați.

Poate cel mai mare avantaj al acestui editor este - șabloane gata făcute stiluri. Are aproximativ 20 de șabloane, organizate corespunzător, care fac să vă stilați site-ul web rapid și ușor.

4. Editor rapid CSS

Rapid CSS Editor este un program de editare ușor de utilizat, foarte personalizabil fișiere CSS. El are editor de text cu evidențierea sintaxelor, completarea codului și altele.

Cu acest editor, puteți formata foaia de stil așa cum doriți. Validatorul de cod încorporat nu numai că va păstra foaia de stil curată, dar vă va proteja și de erorile CSS.

5.CSSEdit 3

Voi spune imediat că acest editor acceptă doar MAC OS. Editorul are design frumos, dar nu este destinat utilizatorilor începători. Editorul de date vă permite, de asemenea, să vedeți modificările dinamic, în timp real.

O caracteristică interesantă a acestui editor este că puteți descrie o proprietate în limba engleză simplă (Selector Builder a fost creat pentru aceasta). Pentru un începător, această caracteristică va fi destul de interesantă.

6. Editor CSS EngInSite

Dacă ești un web designer serios căruia îi pasă ortografie corectă CSS, plasarea corectă a proprietăților, dar vă va plăcea acest editor.

În acest editor, puteți adăuga o clasă sau un identificator folosind funcții încorporate și există, de asemenea, posibilitatea de a converti culoarea din HEX (format hexazecimal) în RGB, ceea ce este rar pentru editori.

Editorul are și o funcție de completare a codului.

7. Stylish Maker

Un editor CSS standard care vă permite să setați font, culoare, margine, chenar și alte proprietăți.