Manuál jak vytvořit webovou stránku

 

Nejčastější otazky:

Vytvoření nového dokumentu:

Zde se budeme zabývat hlavně příkladem, jak vytvořit webovou stránku vaší firmy, včetně toho, jak stránku na web umístit. Naučíme se základní věci, které potřebujeme vědět k tvorbě webových stránek, vzhledu webu a jak zařídit flexibilitu stránek. Obrázky jsou pořizovány ve verzi 1.05 a mohou se od ostatních verzí malinko lišit.

 

Spusťte editor a počkejte na zobrazení okna, zobrazeného níže. Pokud jste neměnil nastavení po instalaci programu, tak se tato stránka zobrazí automaticky. Pokud tomu tak není, vyvolejte tuto možnost v Nastavení:

Stiskněte F5 a vypněte možnost Nezobrazovat naposledy otevřené dokumenty (text se může opět trochu lišit).

 

Zvolte možnost Použít průvodce.

 

Otevře se následující okno:

 

Vyplňte údaje dle okna. Z tohoto okna bude použit pouze titulek stránky (text Vítejte na soukromých stránkách). Tento text můžete nahradit jiným. Bude zobrazen v záhlaví okna Microsoft Internet Explorer.

Můžete také zvolit barvu pozadí stránky (vyberte barvu ze seznamu a zaškrtněte políčko použít barvu pozadí).

Použití zvuků na stránkách nedoporučuji, protože zvukové soubory jsou náročné na velikost a internet je na přenos příliš pomalý.

Použití obrázků na pozadí je možné za předpokladu, že použijete slabé barvy s jednobarevnými plochami (možnost vybrání ve složce Pictures v instalačním adresáři aplikace Html-Wap editor). Vysoce kontrastní pozadí ruší čitelnost textu. Dá se ale také použít dvoubarevné pozadí, které by dělilo stránku na 2, 3 i 4 pruhy.

 

Po vyplnění všech údajů klepněte na tlačítko Další >.

 

Zde doporučuji všechny údaje ponechat. Můžete nastavit možnost Barva textu, ale na bílém pozadí (pokud jste nezvolil jiné) je černá dobře vidět. Barvu odkazů nenastavujte, protože pro úpravu vzhledu se více hodí styl odkazů (viz další strana).

 

Pokud jste zvolil obrázek na pozadí, můžu vám doporučit možnost Pevná fixace obrázku na pozadí. To způsobí, že obrázek se nebude na pozadí rolovat s textem, ale zůstane připíchnut.

 

Po vyplnění všech údajů klepněte na tlačítko Další >.

 

A zde se dostáváme k možnostem, kdy už ani Microsoft Word nestačí. Dostáváme se ke stylům odkazů. Na obrazovce jsou sice nainstalovány pouze 3 styly, ale ve verzi 1.10 je jich více a mají možnost tvorby nových stylů. V políčku Náhled stylu můžete vidět, jak se odkaz změní po ukázání kurzorem myši na odkaz. Doporučuji ponechat první styl, protože je na bílé stránce nejefektivnější.

 

Po vybrání stylu ze seznamu klepněte na tlačítko Dokončit >.

 

 

 

 

Místo, kam máte napsat obsah celé vaší stránky je označen.

Zadání adresy autora:

Otevřete záložku Doplňky a zde klepněte na tlačítko  .

 

Mezi tagy <ADDRESS> a <ADDRESS> vložte svou adresu. K odřádkování použijte tag <BR>, který naleznete v záložce Formát textu pod tlačítkem  .

TIP: Internet Explorer ignoruje vfeškerá odřádkování, více jak jednu mezeru a jakékoliv odřazení pomocí tabulátorů.

 

 

Toto by však nebylo pěkné a proto na úplný vrch stránky umístíme nadpis 2 úrovně. Naleznete jej pod záložkou Nastavení fontu a pod tlačítkem  .

Při stisku tlačítka  držte klávesu ALT. Spustí se vám okénko se zarovnáním a v něm zvolte hodnotu center. Tím docílíte zarovnání nadpisu na střed stránky. Ještě jednou stiskněte toto tlačítko, aby došlo k uzavření tagu. Nyní mezi tagy <H2 align=“center“> a </H2> vložte nadpis stránky.

 

Poznámka: Na konci nadpisu není nutné udávat tag <BR> pro odřádkování, protože aplikace Microsoft Internet Explorer (MSIE) po nadpisu odřádkuje sama. Pro pořadek však můžete tag <BR> využít. Na vzhled stránky v tomto případě nebude mít vliv.

 

Nyní musíme přesunou nadpis stránky nad adresu. To provedeme tím, že označíme celý obsah tagu <ADDRESS> včetně tohoto tagu a přesuneme označený text za tag </H2>. Okno editoru totiž podporuje metodu Drag&Drop, kde stačí označit text a přesunou jej na požadované místo. Tím jsme se naučily posouvat bloky textů.

Nyní stránku uložíme a pustíme si jí v aplikace MSIE:

 

Stránka zatím nic moc, ale na konci se pustíme do Kaskádových stylů CSS (Cascading StyleSheets) a vzhled stránky ještě upravíme.

 

Aby údaje adresy byly nějak oddělené, použijeme vodorovnou linku, kterou vytvoříme pomocí tagu <HR> a jeho parametrů. Naleznete jej v záložce Formát textu a pod tlačítkem  . Opět při stisku tlačítka držte klávesu ALT, abyste se dostali do rozšířených nastavení:

 

 

Opět vám doporučuji nastavit linku tak, jak je na obrázku. Podle pozadí stránky se tento styl docela hodí.

Vysvětlení činnosti: Zaškrtli jsme přepínač Speciální barva, aby se nastavila barva vodorovné linky. Zvolili jsme hodnotu Red, což způsobí zbarvení linky načerveno. Dále jsme zaškrtly políčko Rozměry, abychom nastavily rozměry linky. Rozměry lze nastavovat v obrazovkových bodech, ale také v procentech. V šířce jsme nastavily hodnotu 75%, takže se linka vykreslí na ¾ stránky. Výška linky jsou 2 obrazovkové body (pixely). Nakonec jsme nastavily zarovnání na střed, protože 75% linka zarovnána jinam než na střed vypadá velice divně.

 

 

Dále se už musíte řídit sám sebou. Ukážu vám zde jak vytvořit hypertextový odkaz:

Stiskněte CTRL+L:

 

Do pole Adresa externího souboru zadáte adresu souboru, kam odkaz ukazuje. Do pole Text hypertextového odkazu zadáte text odkazu.

Poté klepněte na tlačítko Vytvořit odkaz. Je dobré rozdělit odkazy každý na nový řádek. Toho docílíte tagem <BR>.

 

Nastavení stylu tagu ADDRESS:

Umístěte kurzor mezi tagy </STYLE> a </HEAD> jako na obrázku červenou barvou:

 

 

Stiskněte CTRL+W a spustí se vám průvodce stylem CSS.

Nastavte jej tak, jako ukazuje obrázek:

 

Důležitý je zvýrazněný tag ADDRESS, jinak styl si můžete zvolit svůj. Doporučuji si namíchat tmavě zelenou barvu pomocí palety RGB.

 

A nyní stránku opět uložíme a podíváme se na ni v MSIE:

 

Pokud na odkaz ukážeme myší:

 

Cílový program vypadá asi takto:

 

Zde si můžete prohlédnout již vytvořený příklad

 

<HTML><HEAD><TITLE>Vítejte na soukromé stránce</TITLE>

<STYLE type="text/css">

<!--

BODY {

color: Black;

A:link { color: Blue; }

A:visited { color: Purple; }

A:active { color: Red; }

}

A {font-family: Tahoma; font-size: 11; color: #000000; background-color: #F7F3EF; text-decoration: "none"}

A:hover {font-family: Tahoma; font-size: 11; color: #000000; background-color: #B5BED6; text-decoration: "underline"}

-->

</STYLE>

<STYLE TYPE="text/css">

<!--

ADDRESS { font-family: "Times New Roman CE";

font-size: 12pt;

font-weight: bold;

font-style: normal;

text-decoration: none;

color: rgb(0%, 60%, 36%);

}

-->

</STYLE>

</HEAD>

<BODY>

 

<H2 ALIGN="center">Nadpis stránky</H2>

<ADDRESS>

       David Kolář<BR>

       Seydlerova 5/2150<BR>

       Praha 5 - 158 00<BR>

       Česká republika<BR>

</ADDRESS>

<HR COLOR=Red SIZE=2 WIDTH=75% align=center>

<a href="http:\\www.razdva.cz/hedit">Adresa programu Html-Wap editor</a>

</BODY>

</HTML>