Visual Web lapas redaktors, CSS redaktors. Topstyle

Daudzi jau sen ir bijuši, bet bieži tikai rediģēt CSS failus. Es to izmantoju kā manu galveno Html aizsargs (Tas ir par versija Pro.) Veicot lapas izkārtojumus.

Rīks

Ir daudz dažādu (profesionālu) html redaktoru uz Win platformas, un izvēlēties "izvēles sistēma" nav viegli. Es rakstu kodu manuāli, tāpēc WYSIWYG-prottors nekad nav ieinteresēts man. Izņēmums ir tikai pēdējais Dreamweaver, ko es izmantoju, lai izveidotu sarežģītas tabulas.

Es ilgu laiku izmantoju Homesite (komplektā ar Topstyle Lite), bet tas nav izstrādājis ilgu laiku - tā autors Nick Bradbury tagad ir tikai iesaistīts topstyle attīstībā. Tāpēc vienā reizē es nolēmu izmēģināt savu jauno brainchild.

Ko viņš var

Pirmkārt, topstyle redaktors ir, protams, rediģējot CSS. Tomēr viņa vecākā (apmaksātā) versija ir ideāli piemērota XHTML izkārtojumam.

Redaktoram ir pielāgota tagu izcelšana (pat automātiska klases atribūtu un ID aizvietošana no stiliem), iebūvētām validācijas funkcijām (izmantojot W3C apstiprinātājus vai lejupielādēt CSE). Kopumā gandrīz visi kā pārējie parastie redaktori. Bet viņam ir savas īpašības, kas padara vietnes, izmantojot CSS ļoti ērti.

Piemēram, viņš zina, kā veidot ziņojumus par izmantotajām klasēm, tas ir, tas liecina, kuras klases, kurās tās tika izmantotas, un kuras klases parasti bija "pazudušās" (sk. Attēlu), t.i. netiek izmantoti jebkurā vietā vietā.

Topstyle ir lielisks priekšskatījuma mehānisms: jūs varat konfigurēt to tā, ka izmaiņas atsevišķā CSS failā ir redzams uz piemēru, kas jums nepieciešams html fails. Tas ir, rediģējot vienu failu, skatiet izmaiņas otrā! Un tas viss ir uz diviem dzinējiem (Mozilla un IE), un pat ar iespēju uzdevumu ikviens Logu izmērs - vismaz 6000 × 3000 pikseļi.

Redaktoram ir "ķemmēšanas" veco dokumentu funkcijas, kurās dizains ir izgatavots HTML atribūtos, kā arī CSS noteikumu eksportam dažādiem CSS pārlūkiem / versijām.

Topstyle veido ļoti ērtu selektora koku, likvidējot jūs no nepieciešamības manuāli sakārtot elementus alfabētiskā secībā. Šajā kokā visi noteikumi par tīriem elementiem tiek parādīti vispirms, tad klases un pēc tam ID.

Protams, es vairs nedomāju strādāt bez stila inspektora paneļa, kas ir daudz ērtāk nekā līdzīgi risinājumi jebkurā Dreamweaver. Tas ļauj jums ļoti ātri veikt ikdienas operācijas - piemēram, izvēloties vēlamos fontus, krāsas utt.
Tajā pašā laikā katram noteikumam ir skaidri norādīts saderības pakāpe ar dažādām pārlūkprogrammām.

Viena no ērtākajām funkcijām: CSS balstīta krāsu palete - visas jūsu krāsas vienā vietā. Tagad jums nav nepieciešams rakstīt krāsas sākumā dokumenta vai pastāvīgi pārmeklējot, meklējot pareizo vienu.
Plus, spēja kārtot un masveidā tos aizstāt, piemēram, lai visas krāsas tumšākas (lai gan es personīgi nekad to neizmantoju).

Turklāt ir ļoti ērti formatēt stilus: piemēram, izvelciet visus noteikumus vienā rindā, lai saglabātu satiksmi, un, ja nepieciešams, atrast kaut ko, lai atgrieztos sākotnējā stāvoklī (ar noguldījumiem un nodošanu).

Parasti, noderīgas funkcijas Daudzi un bez pārslodzes, piemēram, HTML-KIT. Nav tagu ievietot paneļu, bet ir iespēja konfigurēt daudz sev. Piemēram, es norādīju karstos taustiņus teksta wrap tagos H1 ... H4, nospiežot Ctrl-1 ... Ctrl-4. Un tāpēc jūs varat norādīt jebkuru kombināciju.

Secinājums

Kopumā visi, kas vēl neizmanto Topstyle Pro - Go un Swing to no ražotāja mājas lapā.

Programma nav lēta - pārdota par 80 ASV dolāriem, bet tas ir tā vērts. Izkārtojums atbilstoši standartiem būs daudz patīkamāks. Galu galā, jautājiet savam boss iegādāties parasto rīku!

Topstyle - Cascading stila loksņu (CSS) redaktors, ko rakstījis Nick Bradbury, Creator Homesite. Topstyle satur visu, kas nepieciešams, lai izveidotu stilu tabulas, pareizi visām pārlūkprogrammām. Viegli ports uz jūsu HTML redaktoru un tiek izmantots pēc noklusējuma sistēmas līmenī visiem failiem ar paplašinājumu. CSSS. Nepieciešams izveidot un atbalstīt lielus projektus. Piemēram, saite vedņa funkcija ļauj saistīt visas projekta lapas ar stila failu, ko programma pati radīs. Jums vienkārši jānorāda vieta, kur tiek glabātas visas lapas lapas. Jūs varat atzīmēt vēl divas citas noderīgas iezīmes paketi - stila pārbaudītājs un bāreņu stili. Pirmais ļauj jums pārbaudīt jebkuru CSS failu kļūdām, otrais skatītāju esošās vietnes lapas "zaudētajiem" stiliem. Ja esat sajaukts jūsu stilos un HTML lapās ir daudzslāņu pārklājuma dažādi fonti un krāsu risinājumi, TOPTILE var izdzēst visus bloķēšanas fontu tagus un aizstāt tos ar vienu kaskādes stilu. Un tas ir tikai neliela daļa no topstyle programma.

Izgatavots divās versijās:
Topstyle Lite. - bezmaksas, vienkāršota versija
Topstyle Pro. - Pilnīga versija ar daudzām papildu funkcijām.



Lejupielādēt Topstyle Pro samaksāts (Topstyle.exe) ar www.bradsoft.com
Faila lielums: 3,7 MB
Lejupielādes laiks: -
| Meklēt spoguļus
Lejupielādēt Topstyle Lite bezmaksas (Ts3lite.exe) ar www.bradsoft.com
Faila lielums: 1,8 MB
Lejupielādes laiks: -
| Meklēt spoguļus

Jūsu komentārs un diskusija par Topstyle Pro programmu

Pirms tam, kad nebija CSS, dizainers bija manuāli parakstīt katru galvenes tagu . Tas bija ļoti sāpīgi, un tad CSS atnāca, kas ievērojami veicināja tīmekļa dizaineru dzīvi. CSS ļauj noteikt visus jūsu vietnes stilus vienā failā (vai vairākos, pēc saviem ieskatiem). Tas ļauj ietaupīt laiku un padarīt kodu elastīgāku.

Bet kāpēc mums ir vajadzīgi CSS redaktori? Katra administrācija jauna tehnoloģija Tam ir divas medaļas puses, CSS tas parādās dažu CSS īpašumu atbalstam IE pārlūkprogrammās. Un tā web dizainers ir jāatrod hack, lai labotu displeju IE pārlūkprogrammās.

CSS redaktori palīdz rakstīt kodu ātrāk un izvairīties no vairākām kļūdām.

1. Stilizētājs.

Stilizētājs ir cSS redaktorskas ļauj rediģēt CSS un redzēt izmaiņas reālā laikā. Jūs varat vienkārši ievadīt tīmekļa lapas adresi un kreisajā pusē redzēsiet tīmekļa lapu, un pa labi - CSS kodu, ko var mainīt, un izmaiņas būs redzamas pa kreisi. Jūs varat mainīt gan manuāli, parakstīt rekvizītus un izmantojot WYSIWYG redaktoru pogas.

Mainīt teksta krāsu var būt arī dinamiski. Kad krāsa mainās, parādās krāsu spektrs, kas ir līdzīgs tam, kas atrodas Adobe Photoshop.

Šajā redaktorā nav iespējams izdarīt kļūdu, jo pats redaktors pārbaudīs ievadītās vērtības.

2. Topstyle

Topstyle redaktors parāda atbalstītos stilus pārlūks Firefox., Ti, safari un pat iOS 2.0. Šī funkcija Var izmantot ar starpplatformu dizainu.

Viena no šīs redaktora funkcijām ir inspektors, kas ļauj pievienot CSS ar vienu klikšķi, kas ietaupīs laiku un izturību ar parādu un nogurdinošu kodēšanu.

Arī šis redaktors ļauj jums redzēt CSS īpašumu saderību pārlūkprogrammā, kas ir ļoti noderīga, rakstot kodu IE pārlūkprogrammai.

3. Stila meistars

Tā kā attīstītājs paziņo, stila meistars ir redaktors, ko var izmantot jebkurā CSS zināšanu līmenī. Programmā jūs varat izmantot ne tikai WYSIWYG redaktoru, bet arī rakstīt kodu manuāli (tas būtu ļoti dīvaini, ja tas nebūtu tik :)), izceļot katru īpašumu, vairāk pieredzējušiem izstrādātājiem.

Iespējams, ka šī redaktora lielākā priekšrocība ir gatavi stila modeļi. Tam ir aptuveni 20 veidnes, kas ir pareizi organizētas, kas ļauj ātri un viegli rakstīt stilu vietnei.

4. Rapid CSS redaktors

Editor Rapid CSS ir ērta, viegli-to-rēķinu programma rediģēšanai CSS faili. Viņam ir teksta redaktors Ar sintakses izcelšanu, kodu pārveidotāju un citiem.

Ar šo redaktoru jūs varat veidot savu stila tabulu savā veidā. Iebūvētais koda validators satur stila lapu ne tikai tīru, bet arī aizsargā no CSS kļūdām.

5. CSSEDIT 3.

Tūlīt es teikšu, ka šis redaktors atbalsta tikai Mac OS. Redaktoram ir skaists dizainsBet tas nav paredzēts iesācējiem. Arī datu redaktors ļauj jums redzēt izmaiņas dinamiski, reālā laikā.

Interesanta iespēja šim redaktoram ir tas, ka jūs varat aprakstīt īpašumu vienkāršā angļu valodā (ir izveidots selektora celtnieks). Iesācējam šī funkcija būs diezgan interesanta.

6. Enginsite CSS redaktors

Ja esat nopietns web dizainers, kurš rūpējas par pareizu CSS rakstīšanu, pareizi hostinga īpašībām, bet jums patiks šis redaktors.

Šajā redaktorā jūs varat pievienot klasi vai identifikatoru, izmantojot iebūvētās funkcijas, un ir iespējams arī pārvērst krāsu no Hex (heksadecimālā formātā) RGB, kas ir retums redaktoriem.

Arī redaktorā ir koda konfigurācijas funkcija.

7. Stilīgs maker

Standarta CSS redaktors, kas ļauj instalēt fontu, krāsu, rezervi, robežu un citas īpašības.



Attēlā - Topstyle Pro V 3.5 (1999 - 2006). Saskarne un palīdzība angļu valodā. Valoda (ir kreka). Cena 79,95 dolāri.
Jaunākā programmas versija ir Topstyle v 5. Svars 71 MB.

Programmas uzdevums - CSS stila tabulu izveide tīmekļa lapām.

Dažas programmas funkcijas:

CSS3 un HTML5 atbalsts. Jūs saņemsiet piekļuvi visām jaunākajām atzīmēm un īpašībām.

Priekšskatiet HTML un CSS, kamēr jūs to rakstāt

Topstyle atbalsta IE, hroma, Firefox un Safari pārlūkprogrammas.

Saites uz Topstyle ir vieglāk pārvietoties starp dokumentiem. Noklikšķiniet uz HTML klases funkcijas, lai noteiktu klasi ārējā stila lapā, vai noklikšķiniet uz enkura zīmi, lai atvērtu saistīto failu, lai rediģētu.

Smart Copy (Smart Copy) un ievietošana. Viss, kas jums jādara, ir nospiest taustiņu Ctrl + C (vai CTRL + X) un TOPTILE uzzināsiet, ko izvēlēties un kopēt. Jebkura kopija un ievietošana aizstās pašreizējo vārdu.

W3C + CSE + HTML5 pareizības pārbaude, lai dokuments ir pareizi atspoguļots dažādās pārlūkprogrammās

CSS3 ļauj definēt stila lapu konkrētiem apstākļiem. Piemēram, jums var būt viena stila lapa lielie ekrāni Un citu stila lapu mobilās ierīces. Topstyle 5 ļauj pielāgoties dažādiem risinājumiem un ierīcēm, nemainot saturu.

CSS selektora grupa (CSS selektora panelis) parāda visus dokumenta selektorus. Noklikšķinot uz jebkura selektora sarakstā, veic vēlamo vietu garā dokumentā.
HTML struktūras grupa

HTML struktūras grupa parādās zem koda redaktora un parāda HTML zīmju hierarhiju. Vecāku zīme ir vienkārša - kad nospiežat vienu no pogām HTML struktūras grupā, Topstyle 5 izvēlēsies atbilstošo HTML TEG (un tā saturu) redaktorā.

CSS grupas
Problēma var būt atrast pareizo vietu milzīgajās, neorganizētās loksnes šķērēm. Viena no spēcīgākajām topstyle funkcijām ir spēja grupēt CSS selektorus mapes struktūrā.
Izvēlieties dažus CSS noteikumus un pēc tam pieskarieties: CSS\u003e New CSS grupa - Jauna grupa CSS:
Ievadiet nosaukumu CSS Group, un Topstyle ievietos jūsu dokumentam:

/ * @Group groupname1 * /

/ * @end * /
Ja jūs neizmantojat Csssedit vai Topstyle, šīs grupas komentāri ir tikai droši nelieli komentāri. Topstyle tomēr varat pārvērst CSS grupas redaktorā un apskatīt tos atrašanās vietā.

Darbvietas:

Topstyle 5 ir izvēlne, kas atšķiras no izvēlnes iepriekšējās versijas Topstyle.

HTML rīkjosla - Topstyle iet ar HTML konfigurējamu lietotāja paneli.
Darbvietas: darbvietas atceras jūsu agrāk atvērtie dokumentiUn pēc tam atjauno tos, kas atrodas startēšanas laikā. Kad pārslēdzaties uz citu darbvietu, dokumenti par darbvietu ir atvērti, un, ja pārslēdzaties atpakaļ uz iepriekšējo darbvietu, jūsu iepriekš atvērtie dokumenti tiek atjaunoti. Tas ir ļoti noderīgs, vienlaikus ietekmējot vairākus projektus.

Jūs varat izveidot jaunu darbvietu (failu\u003e jaunu darbvietu) vai atvērt citu darbvietu (failu\u003e Open Workspace). Saglabājot jaunu darba telpu, tāpat kā tas saglabā normālu dokumentu - jūs vienkārši izvēlaties darba vietas nosaukumu.

Topstyle 5 ir panelis Ātra piekļuve Ātrā piekļuves panelis).

Topstyle pārbauda pareizrakstības kļūdas, izdrukājot, un atzīmē viņu viļņotās sarkanās līnijas.

Atbalsts Unicode. Saglabājot savu (x) hTML dokumentsJūs varat patvaļīgi izvēlēties kodēšanu dokumentam (UTF-8, UTF-16, ANSI, uc).

Topstyle 5 izveido dublēšanu katru reizi atjaunināt un saglabāt dokumentu. Pateicoties jaunajai vēstures logam, varat atvērt dublējumu, salīdzināt atšķirības vai atjaunot dublējums (Atjaunojiet iepriekšējo priekšskatījums).

Attēlu kartes - attēls, kas ir sadalīts vietās, vai "karstā plankumi". Kad lietotājs noklikšķina uz karsto punktu, darbība notiek (piemēram, pāreja uz citu tīmekļa lapu). Topstyle 5 iet ar attēlu kartes redaktoru.

Prefikss.
Ne katrs tīmekļa pārlūkprogramma pilnībā atbalsta CSS3, un pati CSS3 nav definēts. Tāpēc dažām tīmekļa pārlūkprogrammām ir nepieciešamas tā sauktās iepriekš instalētās īpašības. Prefikss nodrošina, ka pārlūkprogrammas atbalstīs eksperimentālu cSS īpašības.
Bet patiesībā tīmekļa izstrādātājiem vajadzētu izmantot tikai CSS īpašumus tikai paklausīgiem standartiem.
Prefikss filtrēs jūsu (paklausīgs standartus) CSS3 īpašības un dinamiski atjaunināt tos, pievienojot īpašības pārlūkprogrammas saderībai.

CSS gradienta ģenerators.
CSS3 un HTML5 ir iezīme, lai identificētu gradientus, izmantojot tīru CSS3, neradot nekādus attēlus. Gradientus var izmantot, lai izveidotu tīmekļa lapas. Ir iespējams izveidot lineāru gradientu (horizontālu, vertikālu vai pa diagonāli) un krāsas, kas veido gradientu.

Teksta ēnu ģenerators (teksta ēnu ģenerators).
CSS3 ir teksta ēnu radīšanas īpašums. Ir atlasīta ēnu un ievilkuma krāsa (pēc 2PX tipa 2PX).

Uzlabotas opcijas priekšskatīt failus (tikai CSS), sākot ar Topstyle 5:
Pārvietojiet pēdējo reizi izmantoto failu (-us)
Ietver HTML dokumentus, kas atrodas tajā pašā direktorijā (kā jūsu CSS dokuments)
Iekļaut HTML dokumentus, kas ir atvērti (citos kontos)

Html5.
Topstyle 5 ietver jaunu HTML5 definīciju.
HTML5 jautājumi (HTML5 validators)
HTML struktūras grupa (HTML struktūra panelis) parādās zem koda redaktora, un parāda tagus hierarhiju.
Kad jūs noklikšķiniet uz vienas no pogām HTML struktūras grupā, Topstyle 5 izvēlēsies atbilstošo HTML TEG (un tā saturu) kodu redaktorā:

Topstyle nodrošina automātiskās aizvēršanas funkciju (drukājat un Toptyle automātiski aizver zīmi ar), Tas arī ļauj viegli iesaiņot zīmi HTML:

Izmantot Google Chrome. kā iekšējo pārlūku
Topstyle vienmēr ir atbalstījusi un Internet Explorer. Un Mozilla Gecko (Firefox). Tagad Topstyle 5 ievada Google Chrome kā iekšējo pārlūkprogrammu. Citiem vārdiem sakot: priekšskatījums būs iespējams, pat ja datorā nav Google hroma.

Xray - palīdz jums vizualizēt jūsu lapas atrašanās vietu (parāda elementa pozīciju, malu, pievienošanu un mērīšanu). Papildus šīm detaļām Xray Group parāda arī CSS selektorus, kas pieder elementam. Kad noklikšķināt uz šīs CSS selektora Xray grupā, Topstyle automātiski turēs šo CSS noteikumu selektora grupā (pat tad, ja šis CSS noteikums ir kādā citā dokumentā!)

Izvēloties teksta fragmentu Topstyle 5, kad priekšskatīts, kursora pozīcija redaktorā automātiski sinhronizē ar atbilstošo tekstu.

Topstyle 5 ietver (un kopā) ar CSS sakoptu, kā arī ar analizatoru un optimizētāju (optimizētāju) CSS. Pateicoties CSS optimizācijai, jums ir ātrākas lapas. Varat arī izmantot CSS kārtību, lai formatētu savas stila lapas pārlūkprogrammas saderību.

Topstyle 5 parāda pārlūkprogrammas saderības attēlu katram īpašumam.

Google nodrošina daudzas augstas kvalitātes tīmekļa fontus ( Google Web. Fonti), kas darbojas lielākajā daļā pārlūkprogrammu. Topstyle 5 tagad atbalsta automātisko ievietošanu šiem fontiem uz jūsu lapu (-ām).

Uzlabota CSS krāsu rediģēšana - Topstyle 5 rāda nelielu krāsu paraugu krāsu zem katra CSS īpašuma. Noklikšķinot uz šīs krāsas parauga, parādās krāsu dialoglodziņš. No šejienes jūs varat viegli mainīt krāsu vērtību.
Ar Triple noklikšķiniet uz krāsu vērtības redaktorā, parādās krāsu dialoglodziņš. No šejienes jūs varat viegli mainīt krāsu zem peles kursora.

Krāsu kontrasta analizators ļauj noteikt priekšplāna un fona krāsas krāsas un pēc tam definēt, vai tie ir patiešām kontrasts:
Spilgtuma atšķirībai (jābūt vairāk nekā 125)
Krāsu atšķirība (jābūt vairāk nekā 500)
Kontrasta attiecība (jābūt vismaz 5: 1)

Papildus failu pārsūtīšanas programmai (iepriekš ievadīta Topstyle 4), Topstyle 5 tagad ietver SFTP atbalstu.
Failu stāsts - failu vēsture

Topstyle 5 pievienotā palīdzība hTML elementi! Nospiediet F1 taustiņu, bet ievietošana ir HTML zīmi, un parādīsies detalizēts HTML prece.

Superior meklēšana un aizstāšana (atrast / nomainīt) failos
Jūs varat meklēt un nomainīt attālajā vietnē (vietnē serverī tīklā) tādā pašā veidā kā vietējā mapē.
Sākot ar Topstyle 5, mēs pievienojām šādas jaunas meklēšanas iespējas un aizstāt failus:
Pašreizējā dokumenta mapē
Pašreizējā dokumenta un tā apakšmapes mapē

Uzlabota automātiskā nomaiņa (automātiska nomaiņa)
Multi-line vienumi - tagad jūs varat aizstāt savu tekstu ar vairākām rindām
Izmantojot mainīgos lielumus
Atbalsta tipa dokuments (CSS vai HTML); Tagad jums var būt atsevišķi priekšmeti CSS un HTML