TopStyle – snadná tvorba CSS

3. prosince 1999

•

Pokud jste si již vyzkoušeli novou verzi HTML editoru HomeSite 4.5, jistě jste si všimli, že jako externí CSS editor je dodávána Lite verze programu TopStyle. Kromě této Lite verze je k dispozici i plná verze tohoto programu, distribuovaná jako shareware.

Plná verze umožňuje nejen tvorbu a editaci kaskádových stylů, ale také jejich vkládání do webových stránek a správu CSS stylů celého webu. Více se tomuto editoru podíváme na zoubek v dnešním článku. Autorem tohoto programu je firma Bradbury Software, současně je k dispozici veze 1.01. Jedná se o editor, ve kterém pracujete přímo s kódem stránky. Tvůrci vzhledu programu se snažili využít předností jiných programů: základní menu na levé straně tak připomíná obdobnou nabídku ve Front Page 2000, práce se zdrojovým kódem zase spíše Homesite. TopStyle nabízí 3 režimy práce: editaci kódu CSS souboru, dále přehledného správce webu a nakonec i podrobný pohled na propojení CSS souborů s HTML stránkami a dalšími typy souborů.

Editace CSS

V editační módu největší část plochy samozřejmě zabírá editační okno. Tvorba stylů je snadná: jednotlivé tagy můžete vypisovat přímo ručně, při psaní se Vám snaží program snaží pomoci zobrazováním nabídky (tak jak to umí např. i Microsoft Visual Studio). Další možností je použít tzv. inspektora stylů v pravé části obrazovky, který obsahuje úplný přehled vlastností i s možnými hodnotami. Tento přehled bohužel není úplný, takže např. absolutní velikosti písma nebo rozměry jednotlivých prvků, je nutné, včetně jednotek, vypisovat ručně. Výběr prvků, které chcete definovat pomocí CSS, lze provést pomocí Tag Selektoru. Kromě základních prvků můžete nadefinovat i své vlastní s využít parametrů ID nebo Class. Jinou možností je naimportovat používané tagy přímo s HTML stránky nebo s již vytvořených předloh. Je škoda, že program neumí převést vlastnosti požitých tagů do CSS – to už musíte provést sami.

Vytvořené kaskádové styly si můžete překontrolovat s využitím vestavěného CSS validátoru. Ten Vás jednak upozorní na chyby v syntaxi stránky, ale také oznámí potíže s kompatibilitou jednotlivých prohlížečů. Tento validátor však nekontroluje hodnoty jednotlivých položek. Z vlastní zkušenosti můžu říct, že takto zkontrolovaný CSS soubor bez problému funguje v MSIE, u Netscape je často nutno do kódu zasahovat. Kromě vestavěného validátoru můžete využít i W3C on-line validátor. Vytvořené stránky jsou ukládány přímo ve formátu CSS. Výsledky Vaší práce lze prohlédnout přímo ve vestavěném prohlížeči (MS Internet Explorer nebo Netscape) a samozřejmě i externě ve Vašem oblíbeném prohlížeči. Topstyle umožňuje přímo editovat i HTML soubory, tuto možnost ale moc nedoporučuji, protože při editaci složitějších souborů nebo ASP stránek se dostanete do velkých problémů.

Vkládání CSS do webových stránek

TopStyle umožňuje vkládání stylů do HTML stránek ve formě bloků (to znamená, že vytvořený kód se stává součástí stránky) nebo ve formě odkazu na externí CSS soubor. Tento postup lze použít na jednu stránku, ale také u více stránek najednou. Tady bych vyzvedl správce webu – snadno lze vytvořit „website“ a to z adresáře na lokálním disku nebo přímo z internetu. TopStyle úzce spolupracuje s Homesitem, takže lze naimportovat i projekt vytvořený v tomto programu. Při propojování CSS souborů lze pak styly aplikovat na celý website, složku nebo jen vybrané soubory. Pomocí tohoto správce pak můžete vytvořená propojení dále upravovat nebo mazat. Nedostatkem je to, že manažer neumožňuje úpravy u více souborů najednou. Úplný přehled o struktuře Vašeho webu s ohledem na CSS získáte v rámci režimu „site links“.

Spolupráce s jinými programy

U programu bych vyzvedl i podporu ostatních nástrojů pro tvorbu webových stránek. Především je to ona vzpomínaná integrace s Homesite (verze 4.0 a vyšší), která došla tak daleko, že Lite verze programu je přímo součástí nové verze Homesite 4.5. Tato „lehká“ verze je však značně okleštěná o možnosti, které přináší plná verze. Vedle toho však TopStyle spolupracuje i s jinými programy, např. s Dreamweaverem, další lze nakonfigurovat. To odpovídá záměrům autorů programu: vytvořit kvalitní externí CSS editor. Jako takový nezbývá než TopStyle 1.01 doporučit, především pak pro uživatele Homesite.

Aktuální verzi programu si můžete stáhnout také na Stahuj.cz.