1 Tvorba WWW stránek pomocí programu Microsoft FrontPage 1.1

Transkript

Počítačové sítě - Internet
1
Tvorba WWW stránek pomocí programu Microsoft FrontPage
Pomocí tohoto programu můžete vytvářet WWW stránky s minimální znalostí HTML kódu.
Bohužel takto vytvořené stránky obsahují množství chyb a nejsou validní. Program nedodržuje
nové technologické standardy. Je součástí starších balíků MS Office a lze jej doporučit pouze
naprostým laikům a začátečníkům. S programem se pracuje podobně jako s textovým editorem
Microsoft Word, to znamená, že WWW stránku vytváříme podobně jako běžný textový dokument.
Na požadované části textu vytvoříte hypertextové odkazy a nadefinujete dynamické prvky. HTML
kód se vynegeruje dle příslušných pravidel sám. Můžete si ho prohlédnout a případně doplnit ve
druhé záložce programu Microsoft FrontPage, která se zobrazuje v dolní části okna. Třetí záložka
umožňuje náhled WWW stránky jak by měla vypadat ve skutečném prohlížeči WWW.
Základní strukturu dokumentu nemusíte vytvářet, protože program si ji vytvoří sám. Pouze můžete
definovat vlastnosti stránky (barva pozadí, obrázek pozadí, rámy a podobně).
1
5 4
3
2
1 – plocha pro vytváření HTML dokumentu
2 – rychlost načtení WWW stránky v sekundách při rychlosti internetové linky 56 Kb/s
3 – záložka pro zobrazení WWW stránky jak by měla vypadat v prohlížeči
4 – záložka pro zobrazení vygenerovaného HTML kódu
5 – záložka pro normální zobrazení dokumentu
1.1 Formátování textu
Při formátování textu využijete sadu ikon Formát, kde můžete nastavit různé typy písma, velikost
písma, barvu písma, tučné písmo, kurzívu, podtržené písmo a další.
Můžete také použít z menu Formát funkci Písmo…:
Příklad formátování textu a vygenerovaného kódu:
1
Vygenerovaný kód HTML stránky naleznete na druhé záložce:
Pro lepší přehlednost a orientaci jsou jednotlivé tagy barevně rozlišeny. Pokud v Normálním
zobrazení označíte do bloku část textu, tak na záložce HTML se v kódu HTML barevně zvýrazní
právě označená oblast. V záložce Náhled máte možnost prohlédnout si výsledek vaší práce tak, jak
bude vypadat ve skutečném prohlížeči.
Zde je úplný výpis vygenerovaného HTML kódu:
<html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Nová stránka 2</title>
<style>

</style>
</head>
<body>
1. Internetová stránka
 
Toto je jeden odstavec
textu. Dále jsou zobrazeny různé druhy textu a jedna vodorovná čára
Text
psaný tučně
Text
psaný kurzívou

Podtržený text
Modrý
text
<hr>
<h1>Nadpis</h1>
Vycentrovaný
text
Kombinovaný
text
C2=A2+B2
</body>
</html>
Pokud chcete změnit vlastnosti stránky (barvu pozadí, ohraničení apod.) postupujte například takto:
1.
2.
3.
4.
5.
Klikněte pravým tlačítkem myši (v normálním zobrazení) kdekoliv na zobrazené
bílé ploše.
Ze zobrazeného plovoucího menu zvolte funkci Vlastnosti stránky.
Vyberte požadovanou záložku.
Nastavte požadované parametry.
Zvolte tlačítko OK.
Další možností nastavení vlastností stránky je vybráním funkce Vlastnosti… z menu Soubor.
3
1.2 Seznamy
Při vytvoření seznamu můžete postupovat například takto:
1.
Levým tlačítkem myší zvolte ikonu Číslování (pokud chcete vytvořit číslovaný
seznam) nebo na ikonu Odrážky.
Číslování
2.
3.
Odrážky
Zvětšit odsazení
Na stránce se zobrazí číslice nebo odrážka.
Vytvořte požadovaný seznam. Po stisku klávesy Enter se kurzor přesune na další
řádek a automaticky se vytvoří další číslo nebo odrážka.
Pokud chcete vytvořit vnořený seznam, tak pro vnoření použijte několikrát ikonu Zvětšit osazení.
Seznam se začne vytvářet opět od začátku přičemž oproti původnímu seznamu bude odsazen
směrem doprava.
Příklad:
1.3 Odkazy
Odkazy v programu Microsoft FrontPage můžete vytvořit například takto:
1.
2.
3.
4.
5.
6.
Napište jednotlivé položky, ze kterých chcete vytvořit odkazy.
Požadovanou položku označte do bloku.
Na označené položce klikněte pravým tlačítkem myši.
Ze zobrazeného plovoucího menu zvolte funkci Hypertextový odkaz.
Zobrazí se okno Vložit hypertextový odkaz, ve kterém zadejte do políčka Adresa
URL adresu požadovaného odkazu, nebo ze zobrazené stromové struktury vyberte
požadovaný dokument.
Takto postupujte u všech položek, u kterých chcete vytvořit odkazy. Vytvoření odkazu znázorňuje
podbarvení a podtrhnutí požadované položky. Barvu hypertextového odkazu můžete změnit
například ve vlastnostech stránky.
4
1
2
3
4
5
1–
2–
3–
4–
5–
vložení existujícího souboru nebo WWW stránky
vložení odkazu na místo kde se právě nachází v dokumentu kurzor myši (obdoba tagu
<A NAME=….>
vytvoření nového WWW dokumentu
vložení odkazu na elektronickou adresu
políčko pro zapsání URL adresy
Příklad:
Při vložení dynamického efektu (pro zlepšení grafické podoby WWW stránky) můžete postupovat
například takto (pro vložení dynamického efektu je použit předcházející příklad):
1.
2.
Z menu Formát zvolte funkci Efekty Dynamic HTML.
Zobrazí se okno (sada ikon) pro nastavení efektů.
1
2
3
1 – akce
5
2 – způsob použití
3 – efekt
3.
4.
Levým tlačítkem myši klikněte na požadovaném odkazu.
Levým tlačítkem myši vyberte ze zobrazeného okna pro nastavení dynamických
efektů akci, použití a efekt, který chcete nastavit.
Dynamický efekt se projeví až při zobrazení stránky v režimu Náhledu.
Aby mohl dynamický efekt fungovat, vytvoří si Microsoft FronPage tzv. JavaScript (programový
soubor), který uloží do adresáře s vytvářenou WWW stránkou. Při kopírování hotové WWW
stránky na Internetový server musíte zkopírovat i tyto programové soubory.
Jméno programového souboru v našem případě je ANIMATE.JS.
Výpis programového souboru ANIMATE.JS je při standardním zobrazení dlouhý 14 stran formátu
A4. Tady vidíte, že používání programů pro automatickou tvorbu WWW stránek přináší velkou
časouvou úsporu (nehledě na to, že pro základní efekty, které jsou většinou v těchto programech
naprogramovány, nemusíte znát programovací-skriptovací jazyk JAVA).
1.4 Obrázky, video
Do WWW stránky můžete vložit libovolný obrázek, galerii fortografií, kresbu, automatický tvar,
WrdArt, video a další. Postup vložení je shodný s textovým editorem Microsoft Word.
Obrázek můžete vložit do WWW stránky načtením z předem připraveného souboru, což může být
libovolný obrázek nebo můžete využít galerii obrázků tzv. Kliparty. V Klipartu jsou obrázky
rozděleny do kategorií a jsou zobrazeny jejich náhledy, samozřejmě můžete obrázky přidávat
a odstraňovat je. Pro vložení můžete také využít Schránku Windows. Obrázek se bude jako objekt
vkládat na pozici kurzoru. Proto nejprve nastavte textový kurzor na potřebné místo – jinak bude
objekt jinde, než jste chtěli.
Klipart
Potřebujete-li vložit obrázek z galerie Klipart, postupujte například takto:
1.
2.
3.
4.
5.
6.
6
Z menu Vložit zvolte funkci Obrázek a funkci Klipart.
Zobrazí se podokno úloh Vložit Klipart, ze kterého zvolte například funkci Galerie
médií.
Z nabídky si vyberte (kliknutím levého tlačítka myši) požadovanou kolekci
a obrázek (klipart).
Klikněte na požadovaném obrázku pravým tlačítkem myši a zvolte funkci
Kopírovat.
Uzavřete okno Galerie médií a podokno úloh.
Na požadovaném místě ve WWW stránce klikněte pravým tlačítkem myši a zvolte
funkci Vložit.
Při tomto způsobu vložení klipartu je použita Schránka Windows. Podobným způsobem můžete
vložit libovolný objekt do WWW stránky z libovolného programu. S výhodou lze také použít
kombinace kláves Ctrl + C (pro kopírování vybraného objektu do schránky) a Ctrl + V (pro vložení
objektu ze schránky na pozici kurzoru).
nebo
1.
2.
3.
4.
Z menu Vložit zvolte funkci Obrázek a funkci Klipart.
Zobrazí se podokno úloh Vložit Klipart, ze kterého zvolte například funkci Galerie
médií.
Z nabídky si vyberte (kliknutím levého tlačítka myši) požadovanou kolekci
a obrázek (klipart)
Levým tlačítkem myši přetáhněte požadovaný obrázek na požadované místo
ve WWW stránce.
V levé části dialogu jsou zobrazeny takzvané kategorie – kliknutím levého tlačítka myši
na některou z nich se zobrazí náhledy jen těch obrázků, které jsou v příslušné kategorii zařazeny.
Obrázek
Potřebujete-li vložit obrázek přímo ze souboru, postupujte například takto:
1.
2.
3.
Z menu Vložit zvolte funkci Obrázek a funkci Ze souboru...
Zobrazí se dialogové okno Obrázek, ve kterém nastavte požadovaný disk a adresář,
kde je uložen obrázek.
Potvrďte tlačítko Vložit.
WordArt
Funkce WordArt umí aplikovat na text nejrůznější efekty. Text lze psát zakřiveně či zkoseně, volit
výplně písma, natáčet objekt a další. Tyto efekty používejte ale jen tam, kde je to vhodné.
Potřebujete-li vytvořit a vložit WordArt do WWW stránky, postupujte například takto:
1.
2.
3.
Z menu Vložit zvolte funkci Obrázek a funkci WordArt…
Zobrazí se galerie WordArtu, ze které vyberte požadovaný WordArt a klikněte
levým tlačítkem myši na tlačítku OK.
Do editačního okna zapište potřebný text, nastavte vhodné písmo a jeho velikost
a potvrďte tlačítko OK. Na obrazovce se zobrazí plovoucí nástrojová lišta, pomocí
které můžete měnit vlastnosti objektu.
7
Změnu tvaru WordArtu můžete provést pomocí tlačítka Abc.
V zobrazeném objektu se nachází další tzv. deformační body, pomocí kterých můžete dále
upravovat tvar WordArtu.
Video
Při vložení video sekvence postupujte například takto:
1.
2.
3.
Příklad:
8
Z menu Vložit zvolte funkci Obrázek a funkci Video...
Zobrazí se dialogové okno Video, ve kterém nastavte požadovaný disk a adresář, kde
je uložen soubor s videem.
Potvrďte tlačítko Vložit.
1.5 Tabulky
Tato funkce umožňuje vkládat do vaší WWW stránky tabulky, které vám zajistí přehledné
uspořádání vložených údajů.
Vložení tabulky můžete provést:
 Pomocí ikony Vložit tabulku
(kliknutím levého tlačítka myši).
 Pomocí menu Tabulka, funkce Vložit a funkce Tabulka…
 Pomocí menu Tabulka a funkce Navrhnout tabulku.
Potřebujete-li vložit tabulku do WWW stránky, postupujte například takto:
1.
2.
3.
Z menu Tabulka zvolte funkci Vložit a funkci Tabulka…
Zobrazí se dialogové okno Vložit tabulku, ve kterém zvolíte počet sloupců, počet
řádků a šířku sloupců.
Ve vytvořené tabulce můžete pomocí funkce Navrhnou tabulku z menu Tabulka vložit řádky
a sloupce, podklad, nastavit všechny řádky stejně vysoké, sloučit sloupce nebo řádky apod.
Pokud využijete ikonu pro vytváření tabulky, postup se mírně změní:
1.
2.
Zvolte ikonu Vložit tabulku
.
Tažením (držte levé tlačítko myši) označte takový počet sloupců a řádků, jaký má
mít vytvářená tabulka. Po puštění tlačítka bude tabulka vložena na pozici kurzoru.
Chcete-li změnit velikost řádků a sloupců tabulky, použijte tento postup:
1.
2.
Přesuňte kurzor myši na hranu, kterou chcete posunout – kurzor změní svůj tvar
na obousměrnou šipku.
Stiskněte a držte levé tlačítko myši a tažením nastavte požadovanou velikost.
Vlastnosti tabulky nebo buňky můžete změnit takto:
1.
2.
3.
4.
Na požadované tabulce nebo buňce klikněte pravým tlačítkem myši.
Ze zobrazeného plovoucího menu klikněte na funkci Vlastnosti tabulky (buňky).
Zobrazí se dialogové okno Vlastnosti tabulky (buňky), kde nastavte požadované
parametry.
V jednotlivých buňkách tabulky můžete požívat libovolné informace (texty, číselné údaje, obrázky,
odkazy, seznamy atd.).
9
Příklad:
1.6 Symboly
Do WWW stránky pro oživení grafické podoby můžete vkládat různé symboly.
Při vkládání symbolů postupujte například takto:
1.
2.
3.
Příklad:
10
Z menu Vložit zvolte funkci Symbol…
Zobrazí se dialogové okno Symbol, ve kterém si zvolte typ písma (Webdings,
Wingdings apod.).
Dvojitým kliknutím levého tlačítka myši vložte na pozici kurzoru požadovaný
symbol (může také použít tlačítko Vložit).
1.7 Rámy
Rámy (rámce) se využívají pro rozdělení WWW stránky na více částí. V programu Microsoft
FrontPage základní nastavení rámů provedete pomocí Šablon. V dnešní době se doporučuje je
nepoužívat.
1.
2.
3.
4.
5.
Z menu Soubor zvolte funkci Nový, funkci Stránka nebo sada webových souborů
a funkci Šablony stránek…
Ze zobrazeného dialogového okna zvolte záložku Stránky rámců.
Zvolte požadované rozdělení WWW stránky.
Zobrazí se rozdělení WWW stránky, ve kterém musíte nastavit odkazy na počáteční
nebo novou WWW stránku.
Příklad:
Po nastavení všech údajů můžete vytvářet nové definované stránky. Hlavní stránku, kde je
definováno rozdělení WWW stránky na jednotlivé rámy je vhodné při ukládání pojmenovat
INDEX.HTML.
Nastavení jednotlivých rámů provedete následovně:
1.
2.
3.
4.
Levým tlačítkem myši zvolte požadovaný rám.
Z menu Rámce zvolte funkci Vlastnosti rámce.
V zobrazeném dialogovém okně Vlastnosti rámce zvolte požadované parametry.
1.8 Formuláře
Při tvorbě formuláře v programu Microsoft FronPage můžete postupovat například takto:
1.
2.
3.
Z menu Vložit zvolte funkci Formulář.
Ze zobrazeného rozvinutého menu zvolte funkci Formulář. Na WWW stránce se
zobrazí základní plocha formuláře s tlačítky Odeslat a Vynulovat.
Podobným způsobem zvolte do plochy formuláře požadované prvky formuláře
(textová pole, zaškrtávací tlačítka apod).
11
Příklad:
Nastavení vlastností formuláře provedete takto:
1.
2.
3.
4.
V základní ploše formuláře klikněte pravým tlačítkem myši.
Ze zobrazeného plovoucího menu zvolte funkci Vlastnosti formuláře.
V dialogovém okně nastavte požadované parametry.
Pokud chcete používat formuláře vytvořené programem Microsoft FrontPage musíte pro správnou
funkci serveru WWW rozšířit tento server o produkt Front Page Server Extensions.
12

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage 1.1

Transkript

Podobné dokumenty

Vkládání symbolů a clipartů

křišťálové paprsky

Kapitola 1 - výukové stránky z IT

Sada 3/9 - 13. základní škola Plzeň

Programování a užití komponent

PÅ™ehled zÃ¡sahÅ¯ SDH Svratka

Dům podle feng shui

Objekty na snímku Soubor

Licí technika CASTDON

Portaflexserie

Klikněte na tlačítko

Prezentace ke stažení

gazzag Proxy