Bezplatné online "vychytávky" pro webdesign - Grafika.cz - vše o počítačové grafice

Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



Webdesign

Bezplatné online "vychytávky" pro webdesign

20. února 2009, 00.00 | Zabýváte se tvorbou webových stránek? Pak vás možná zaujme deset online nástrojů pro webdesign od několika generátorů HTML/CSS kódu přes jednoduché úpravy kaskádových stylů a tvorbu navigačních menu až třeba po konvertor velikosti písem a efektové zarovnávání textu do bloků. Všechny nástroje jsou přitom zdarma a k jejich používání stačí připojení na Internet.

Oblast webdesignu skrývá celou řadu velmi zajímavých nástrojů, které mohou částečně usnadnit webdesignérům život, nebo je naopak alespoň profesionálně zaujmout. Desítka online pomůcek se může hodit například v situaci, kdy zrovna nemáte po ruce žádný vhodný HTML editor a potřebujete nutně vytvořit tabulku či upravit kaskádové styly. Nejedná se sice o nijak sofistikované pracovní nástroje a webdesignérům mohou připadat spíše úsměvně, jako šikovné "vychytávky" ale níže popsané utility či pomůcky rozhodně stojí za zmínku.

Grid designer

Jeden z nejzajímavějších online nástrojů z celé dnes popisované sady slouží k rychlému návrhu a tvorbě vícesloupcových layoutů pro webové stránky. V prostředí webového prohlížeče si můžete navrhnout počet sloupců, jejich šířku, okraje a rozestupy, v dalším kroku pak nastavíte vlastnosti nadpisů a textů pro každý sloupec zvlášť a necháte online generátor sestavit výsledný HTML/XHTML kód s příslušnými kaskádovými styly.

Kotatsu HTML Table

Generátor HTML kódu je určený k rychlému vytvoření kódu tabulky s nastavitelným počtem řádek a sloupců.




Online nástroj Grid Designer v akci


Generátor HTML tabulek KOTATSU

Deploy

Generátor základního HTML frameworku s validním HTML/XHTML (XHTML 1.1 bohužel generátor nepodporuje), CSS kódem, jQuery knihovnou a několika dalšími volbami slouží k rychlému vytvoření sady prvotních souborů pro webovou stránku.

CSS Menu Maker

Bezplatný online generátor a editor navigačních menu nabízí několik desítek designů horizontálních a vertikálních menu + několik drop-down menu. Většina z navigačních menu může obsahovat grafiku i text a jejich jednotlivé položky si nastavíte opět přímo v online editoru. Možnosti online konfigurace samotného menu jsou minimální až nulové, vygenerovaný kód i grafické prvky si samozřejmě můžete dodatečně upravit.

CSS Color Editor

Editor kaskádových stylů se specializací na vizuální změnu barev ve stylech pomocí barvového requesteru. Otevřete soubor s CSS, změníte barvy ve stylech a CSS soubor uložíte, nic víc, nic míň.


Online CSS Color Editor na změnu barev v kaskádových stylech


Nabídka několika layoutů navigačních menu v CSS Menu Makeru


CSS Menu Maker - editace položek menu a výsledný kód

CSS Redundancy Checker

Užitečný online nástroj na kontrolu obsahu kaskádových stylů pomůže odhalit zdvojené CSS prvky (hodí se zejména u složitějších stylů), druhou jeho funkcí je pak označení kaskádových stylů, na které se daná webová stránka či stránky neodkazují a můžete je tedy smazat.

CSS Super Scrub

"Kompresor" kaskádových stylů umí zkontrolovat a vypustit duplicitní mezery a další zbytečné prvky v zápisu syntaxe kaskádových stylů na několik kliknutí myší.

PX to EM

Online konvertor velikostí fontů podporuje obrazové body a em jednotky, v převodních tabulkách dále najdete i klasické poměry velikosti písem v bodech v závislosti na jejich procentuální velikosti.

PSDtoCSS online

Bezplatný online konvertor PSD souborů Adobe Photoshopu do XHTML+CSS layoutu lze v jeho komerční podobě (po registraci) zkombinovat i s řadou dalších nástrojů pro webdesign. Nečekejte žádné zázraky, automatizované rozřezání designu a jeho převedení do podoby layout webové stránky určitě nebude vždy fungovat dle vašich představ, jako "gadget" je ale PSDtoCSS konvertor určitě zajímavý.

CSS Text Wrapper

Další z generátorů HTML/CSS kódu umí efektově zarovnat texty do různých geometrických bloků. Na výběr máte různé layouty textových bloků, které mohou například navodit dojem textu obtékaného kolem obrázků podobně jako to umí každý publikační systém.


Konvertor velikostí fontů PXtoEM.com


Efektový "zarovnávač" textů CSS TEXT WRAPPER


Ukázka výstupu z CSS TEXT WRAPPERu

Tématické zařazení:

 » Rubriky  » VSE  

 » Rubriky  » Go verze  

 » Rubriky  » Webdesign  

Poslat článek

Nyní máte možnost poslat odkaz článku svým přátelům:

Váš e-mail:

(Není povinný)

E-mail adresáta:

Odkaz článku:

Vzkaz:

Kontrola:

Do spodního pole opište z obrázku 5 znaků:

Kód pro ověření

 

 

 

 

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: