Incomedia Website X1

Snadné vytváření webových stránek a prezentací cd/dvd


Vítejte po měsíční odmlce opět u dalšího dílu série Rychlokurzů. Tentokrát pro vás máme připravený nástroj pro snadnou tvorbu webových stránek a prezentací. Někteří z vás si teď říkají: "Další WYSIWYG editor" a jiní zase: "Ale tomu HTML já vůbec nerozumím." Těm prvním vzkáži, že tento program je opravdu jiný, těm druhým pak: "Nezoufejte, dnes HTML nebudete vůbec potřebovat." Ano, Website X1 opravdu není žádný HTML editor, je to spíše určitá forma na vytváření webových prezentací. Vám pak stačí do této formy nalít svá data. Pojďme se na něj tedy podívat...

Instalace

Jako vždy je třeba začít instalací. Opět ji probereme krok za krokem.
Spusťte soubor EXE.
Následuje automatické rozbalení obsahu komprimovaného instalačního média.
Objeví se uvítací obrazovka, klikněte na Next.
Akceptujte licenční ujednání (Accept).
Zvolte cílový adresář (standardně se vám nabídne velmi netradiční "C:WebSite X1", lepší tedy bude, pokud zapíšete standardní umístění "C:Program FilesWebSiteX1"), klikněte na Install.
Klikněte na Start Incomedia WebSite X1.

Start

Po spuštění vás přivítá základní obrazovka. Jak je z ní patrné, práce s programem probíhá formou průvodce. Podle vyjádření autorů vás pět kroků dovede k vytvoření základní (ale dostačující) webové prezentace k tomu se vztahují ona čísla od 1 do 5 na levé straně hlavního okna. Nyní si jednotlivé kroky popíšeme:

Krok 1 Obecná nastavení

Kliknutím na tlačítko Next se dostaneme na první stranu průvodce. Zde se máme rozhodnout, zda budeme vytvářet nový projekt (novou webovou prezentaci), nebo zda již máme nějaký projekt rozpracovaný a chceme v něm pokračovat. Pro začátek tedy zvolíme Create a new project... (pokračujte kliknutím na Next).
Nyní je třeba nastavit základní popis platný pro celou webovou prezentaci:
Title (Titulek) Tento text se objeví v záhlaví webového prohlížeče, takto také bude označen odkaz v Oblíbených. Zvolte proto něco stručného a výstižného, např. FIRMA Ukázková webová prezentace.
Author (Autor) Zde by mělo figurovat jméno autora (případně firmy). Tento údaj se poté zanese do metainformací ve webových stránkách.
E-Mail Adresa správce webových stránek, standardně se zobrazí v zápatí.
Footer Note (Patička) neboli text, který bude na stránkách až úplně dole. Často tam bývá něco jako (c) 2007 FIRMA Udicovitá 17, Podhradí, ale fantazii se meze nekladou.
Máme-li vyplněno, posuňme se na další stránku (Next). Zde máme za úkol si zvolit jedno ze dvou druhů menu. Vertical (svislé může mít až 24 položek pod sebou) nebo Horizontal (vodorovné s 5-6 položkami vedle sebe). U horizontálního menu tedy bude chybět levý navigační pruh, bude nahrazen jedním řádkem. Pokračujte s Next.
Na další stránce budeme vybírat hlavní grafické téma z připravené nabídky. Po kliknutí na vybrané téma uvidíte v pravé části okna jeho náhled. Obvykle také můžete vybrat ze dvou barevných variant, takže vyberte téma a barvu, která se vám bude nejvíce líbit. Klikněte na Next.

Krok 2 Struktura stránek

V dalším kroku budeme vytvářet strukturu našich stránek. Hlavní a zároveň vstupní stránkou je Home Page (domovská stránka). Další budou dostupné přes definované položky menu. Nejprve Home Page přejmenujeme kliknutím na její položku, poté na tlačítko Rename (nebo klávesu F2) a změníme název třeba na Domů. Nyní se vrhneme na menu. Označte položku Menu, stiskněte tlačítko New Page (nebo klávesy Ctrl+N) a novou položku pojmenujte. Takto připravíte názvy všech stránek. Vzájemné pořadí stránek můžete měnit tlačítky Move Up a Move Down nebo přetahováním položek myší (metodou drag & drop). Když budete se seznamem stránek spokojeni, klikněte na Next.

Krok 3 Obsah stránek

A nyní začínáme s vlastním vytvářením jednotlivých stránek. Podívejte se na obrázek, který vám přiblíží rozložení prvků. Vidíte, že jako první upravujeme stránku Domů. Nejprve tlačítky pro přidání řádku a přidání sloupce (popř. smazání řádku a smazání sloupce) připravíme mřížku, do níž budeme následně vkládat objekty. V našem případě jsem si připravil dva řádky a tři sloupce.
Poté jednoduchým přetažením objektu ze seznamu vpravo do buňky na naší stránce vložíme např. text, obrázek či galerii. Pokud přetáhnete objekt na rozhraní mezi dvěma buňkami, objekt se roztáhne přes obě. Podle stejné logiky přetažení objektu na místo, kde se dotýkají čtyři buňky, se objekt roztáhne přes všechny čtyři.
Nyní musíme definovat obsah jednotlivých objektů. Objekty s nedefinovaným obsahem mají bílé pozadí. Dvojklikem levým tlačítkem myši na objekt otevřete dialog s definicí obsahu. Tyto dialogy se liší podle typu objektu:
Text (Textový objekt) Zde dostaneme k dispozici jednoduchý textový editor, jehož pomocí zapíšete požadovaný text. Umožní vám měnit font a velikost písma, styl zarovnání a barvu textu. Ti z vás, kteří ovládají taje HTML, si mohou zapnout tlačítko a pak mohou do textu přímo vkládat HTML značky (např. vodorovnou čáru <hr>, odkaz <a href="stránka">text</a> nebo vnořený obrázek <img src="obrázek">).
Image (Obrázek) Kliknutím na [...] vyhledáte obrázek a tlačítkem [Otevřít] jej vložíte. V okně Preview uvidíte náhled vybraného obrázku. Do pole Descritpion: zapíšete popis obrázku a tlačítkem OK definici ukončete.
Images Browser (Miniatury) Do tohoto objektu můžete vložit více obrázků najednou (klikněte na Add a označte je), ty se potom zobrazí ve formě automaticky generované galerie náhledů. Velikost miniatur se automaticky přizpůsobí volnému místu. Jen je škoda, že miniatury nejsou klikací.
Flash animation (Flashová animace) Touto volbou máte možnost na stránku vložit (již hotový) flashový objekt (obvykle se jedná o flashový reklamní banner). Postup je prakticky stejný jako při vkládání obrázků: tlačítkem [...] vyhledáte soubor SWF, vložíte ho, následně do sekce size (pixel) vyplníte požadovanou velikost objektu. Zaškrtnutím Preview si vkládaný flash můžete prohlédnout. Vše potvrdíte tlačítkem OK.
Video/Sound Jak již název napovídá, do HTML stránky můžete vložit i videosoubor nebo ji ozvučit pomocí audiosouboru. Postup je opět naprosto stejný jako v předchozím případě, jen po kliknutí na [...] vyberete typ souboru, který budete vkládat. Podporovány jsou tyto videoformáty AVI, WMV, MOV, QT, MPG, MP2, MPA a tyto audioformáty WAV, MP3, WMA, MID.
Kdykoli se lze podívat, jak vaše prezentace vypadá. Kliknutím na tlačítko Test se otevře internetový prohlížeč s náhledem vytvářené stránky. Protože prezentace obsahuje aktivní prvky, je možné, že se v prohlížeči objeví informace, že prohlížeč aktivní obsah zablokoval.
Pro tyto stránky lze zobrazování aktivního obsahu bez obav povolit: klikněte na informační pruh, z menu vyberte Povolit zablokovaný obsah... a následně potvrďte kliknutím na Ano.
Máme-li stránku hotovou, kliknutím na Next se přesuneme na další v pořadí, a pak na další a další... Po definování obsahu i té poslední se dostaneme ke kroku 4.

Krok 4 Pokročilá nastavení

V Pokročilých nastaveních (Advanced Settings) můžeme upravit vzhled a chování některých prvků svojí webové prezentace. Main level menu (Hlavní menu) Touto volbou měníme vzhled hlavního menu. Máme možnost upravit podle našeho estetického cítění okraje, písmo i barvy menu (v záložkách General (Okraje), Text (Písmo) a Color (Barvy)). Změny vidíme okamžitě v okénku Preview. Výsledek potvrdíme tlačítkem OK nebo se vrátíme k původnímu vzhledu pomocí Cancel. Page Title (Nadpis stránky) Zde máme možnost ovlivnit barvu a písmo nadpisů jednotlivých stránek prezentace. Scrollbar (Posuvníky) Dialog pro nastavení vlastního vzhledu posuvníků.
Pokud jsme se dostatečně vyřádili s barvičkami a po kontrole (kliknutím na Test) jsme spokojeni z výsledkem, přejděme k poslednímu kroku.

Krok 5 Export

Internetová prezentace by byla k ničemu, kdyby nebyla vystavena na internetu (nebo na CD apod.). Nyní tedy musíme prezentaci dostat na cílové místo. Možnosti jsou dvě:
Export website on Internet Disponujete-li prostorem na webovém serveru, pak k tomuto serveru máte s největší pravděpodobností přístup pomocí protokolu FTP. Pokud netušíte, co to znamená, ale na papírku máte napsanou pouze adresu serveru, jméno a heslo a adresář, pak máte vše potřebné. Klikněte na Next a tyto údaje vyplňte do políček na další stránce:
FTP address je adresa serveru na internetu (může to být jméno např. "ftp.server.cz" nebo IP adresa např. "111.222.123.147").
Username a Password jsou přístupové jméno a heslo k tomuto serveru.
Volba Save password uloží nastavení FTP včetně hesla k projektu, abyste ho příště nemuseli zadávat znovu.
Initial directory je cesta (adresář) na serveru, kam máte ukládat své webové stránky (může to být např. /www/htdocs všimněte si klasických lomítek). Pokud si nejste jisti, ponechte pole prázdné a cílový adresář najdete na serveru manuálně později, po připojení.
Po kliknutí na Next se program pokusí spojit se serverem. Pokud se vše podaří, zobrazí se obsah cílového adresáře. Nyní se po serveru můžete pohybovat jako v průzkumníku (přejde o adresář výše, dvojklikem na adresář do něj vstoupíte, obnoví pohled na obsah adresáře). Až se dostanete přesně tam, kam chcete umístit svou webovou prezentaci, stiskněte Start a potvrďte OK. Soubory se začnou kopírovat na server. Po dokončení klikněte znovu na OK. Nyní už můžete spustit webový prohlížeč a podívat se na svou prezentaci umístěnou na internetu.
Export website to disk Pokud prezentaci nechcete umístit na internet (alespoň ne hned), vyberte si tuto volbu. Takto lze prezentaci exportovat do adresáře na disku a následně vypálit na CD, komprimovat a poslat někomu e-mailem, nebo se jen tak kochat pohledem na ni na lokálním disku. Takže vyberete-li tuto možnost, stisknete Next, vyhledejte cílový adresář pomocí tlačítka [...] a pak už jen klikněte na Start a následně na OK a je hotovo. Do vybraného adresáře se přesunula celá vaše webová prezentace (prohlédnout si ji můžete dvojklikem na soubor home.html).

Uložení práce a pokračování v práci

Ve kterémkoli kroku práce s programem můžete svou prezentaci uložit. Stačí jen kliknout na tlačítko Save a projekt uložit (poprvé se vás systém zeptá na jméno a místo uložení). Chcete-li projekt uložit s novým jménem, stačí kliknout na malou šipku vedle Save a vybrat Save as...
Naopak pokud se chcete vrátit k uložené práci, spusťte program, klikněte na Next a zvolte Edit an existing project. Tlačítkem [...] vyhledejte uložený projekt (bude mít příponu IWP) a pomocí Open ho otevře. Potom už stačí tlačítky Next projít jednotlivé hotové kroky a pokračovat v úpravách tam, kde jste přestali (rovněž můžete přejít přímo na konkrétní sekci kliknutím na její číslo).

Závěr

Dnes se vám do ruky dostává nástroj, který umožní i největšímu laikovi vytvořit poměrně zdařilé webové stránky a umístit je na internet. A víte, co se říká: "Kdo není na netu, jako by nebyl".