1.3 Spuštění programu HomeSite

(1)

1. Úvod...2

1.1 Historie vzniku programu HomeSite...2

1.2 Co je to HomeSite...2

1.3 Spuštění programu HomeSite...3

1.4 První dokument...3

2. Prostředím programu...4

2.1 Panel nástrojů...5

2.1.1 Standard...5

2.1.2 Tools...9

2.1.3 Edit...12

2.1.4 View...13

2.2 Quick bar...14

2.2.1 Záložka Common...15

2.2.2 Záložka Fonts...21

2.2.3 Záložka Tables...24

2.2.4 Záložka Frames...30

2.2.5 Záložka Lists...33

2.2.6 Záložka Forms...35

2.2.7 Záložka Script...39

2.2.8 Záložky ASP, JSP, CFML...43

2.3 Pracovní plocha pro návrh stránky...43

2.4 Resource tab...44

2.4.1 Správce souborů...44

2.4.2 Správce projektů...45

2.4.3 Prohlížeč závislostí v dokumentu...46

2.4.4 Výstřižky HTML kódu...46

2.4.5 Nápověda...48

3. Zhodnocení programu HomeSite...48

(2)

1. Úvod

Tato práce se zabývá popisem programu HomeSite verze 4.5.2., výhradně popisem ovládání a funkcí tohoto editoru www stránek.

Nezabývá se popisem jazyka HTML, DHTML, CSS, JavaScriptu, CFML a ani dalších scriptů a programovacích jazyků. Dále se tato část nezabývá popisem programů přidružených k programu HomeSite a nebo externích prohlížečů, které může program HomeSite využívat.

1.1 Historie vzniku programu HomeSite

Program HomeSite jako takový vznikl tak trochu náhodou, tvůrce online komiksu Nick Bradbury byl nespokojen s mnoha tehdejšími editory a tak se dal v roce 1996 do tvorby vlastního programu. Po několika týdnech vznikl program (editor), který si oblíbilo velké množství uživatelů. Později přešel Bradbury pod firmu Allaire a vše rozjeli ve velkém. Program samozřejmě i na dále zdokonalovali.

1.2 Co je to HomeSite

V současné době je HomeSite jedním z nejlepších editorů a to dokazuje i počet jeho uživatelů, tedy registrovaných uživatelů – a těch je již přes 200 000. Autoři sami shrnují práci s HomeSitem do několika slov: „rychlost, flexibilita, maximální kontrola kódu a jednoduché ovládání“. Myslím, že je to poměrně výstižné, vše co bylo v této větě řečeno je vlastně velmi hrubá charakteristika editoru.

Program HomeSite od firmy Allaire je editor HTML kódu s barevným zvýrazňováním tagů, mnoha užitečnými a upravitelnými klávesovými zkratkami a dalšími funkcemi zrychlujícími návrh stránek. Jeho možnosti jsou velmi bohaté a uspokojí i skutečné profesionály, přesto je jeho prostředí intuitivní a snadno použitelné, takže s jeho ovládáním nebudou mít problémy ani začátečníci, kteří teprve pronikají do tajů vytváření stránek.

(3)

HomeSite neslouží jen pro psaní zdrojového HTML kódu, můžete v něm návrh stránky prohlížet přímo v zabudovaném prohlížeči (využívá Internet Explorer nebo si nastavíte svůj vlastní prohlížeč). V HomeSitu od verze 4.0 můžete stránku navrhovat i v režimu WYSIWYG (What You Se Is What You Get = „Co vidíš, je to co dostaneš“), který využívá Internet Explorer.

HomeSite je také vhodný pro správu celých WWW serverů, umí přistupovat k souborům uloženým na FTP serverech, vytvářet a spravovat projekty, najít nebo nahradit určitý text v libovolném množství souborů najednou a obsahuje řadu dalších užitečných pomůcek.

1.3 Spuštění programu HomeSite

Po nainstalování můžete HomeSite spustit jako jakoukoli jinou aplikaci Windows – nabídka START  programy  HomeSite 4.5. Pokud máte verzi Evaluation, což je zkušební 60denní verze, zobrazí se vám během nahrávání programu okno, kde jste informováni, kolik dní můžete ještě HomeSite legálně používat.

1.4 První dokument

Po spuštění HomeSite můžete rovnou začít vytvářet svou první WWW stránku.

HomeSite připravil základní obsah stránky, s nutnými úvodními tagy. Mezi tagy

<BODY> a </BODY> můžete začít psát text, který má být obsahem vaší stránky.

Chcete-li si prohlédnout, jak bude vaše stránka v prohlížeči vypadat, klepněte na záložku Browse nad editačním oknem nebo stiskněte klávesu F12. K editaci se můžete vrátit klepnutím na záložku Edit nebo opět stisknout klávesu F12.

(4)

2. Prostředím programu

Po spuštění se zobrazí pracovní plocha (viz. obrázek č. 2.1.), která je rozdělena na dvě specifické oblasti. Největší část zabírá plocha pro vlastní návrh, ve které píšete HTML kód nebo stránky jen prohlížíte. Od verze 4.0 obsahuje HomeSite také WYSIWYG editor, ve kterém stránky navrhujete rovnou tak, jak mají vypadat na webu. To znamená, že si můžete vytvořit slušně vypadající web bez znalosti HTML. Všeobecně ale platí, že vytváření webů v HTML kódu je mnohem lepší, protože máte nad celým dokumentem a hlavně nad zdrojovým kódem naprostou kontrolu, kdežto ve WYSIWYG editoru HTML kód generuje sám program. A to ve většině případů vede k jednak většímu objemu dat, ale hlavně také k tomu, že výsledný dokument nikdy neodpovídá vaší představě.

Obrázek č. 2.1.

(5)

1. Panel nástrojů – podoba s produkty řady Office není náhodná, řada tlačítek má stejnou funkci jako jejich „kancelářské“ ekvivalenty

2. Quick bar - nástrojová lišta se záložkami

3. Přepínání mezi návrhem a náhledem WWW stránky 4. Pracovní plocha pro návrh stránky

5. Tlačítka pro nastavení parametrů editace Resource tab:

6. Seznam adresářů

7. Seznam souborů v aktuálním adresáři 8. Volba obsahu zobrazeného v Resource tab

9. Záložky otevřených dokumentů

2.1 Panel nástrojů

Panel nástrojů se skládá ze čtyř částí viz. obrázek č. 2.2. Jsou to lišty standardní (standard), nástrojová lišta (tools), editační (edit) a náhledová (view).

Panel Standard Panel Tools

Panel Edit Panel View Obrázek č. 2.2.

2.1.1 Standard

Tento panel obsahuje základní funkce pro práci se souborem, jako jsou vytvoření nového souboru, otevření existujícího souboru, uložení aktuálního souboru nebo všech otevřených souborů, dále pak vyhledávání a nahrazování výrazů v textu.

(6)

Obrázek č. 2.1.1.

New (Ctrl+N) – vytvoří nový dokument, pojmenuje tento dokument untitled a vygeneruje do něj nutné úvodní tagy

Open (Ctrl+O) – otevře dialog open pro vyhledání souboru, který chcete otevřít. Tento dialog je téměř shodný se standardním dialogem Windows

Save (Ctrl+S) – uloží aktuální dokument, pokud je aktuální dokument pojmenován. Jestliže se aktuální dokument jmenuje untitled vyvolá toto tlačítko dialogové okno Save as … (ulož jako …), v tomto dialogu uvedete jméno ukládaného dokumentu

Save all – uloží všechny otevřené dokumenty, pokud se některý z otevřených dokumentů jmenuje untitled pokračuje stejně jako u příkazu Save

Find (Ctrl+F) – vyvolá dialogové okno pro vyhledávání zadaných výrazů v dokumentu, které je popsané u příkazu Replace viz. obrázek č. 2.1.2., jenom bez řádku Replace with

Replace (Ctrl+R) – vyvolá dialogové okno Replace, které slouží pro vyhledávání a nahrazování zadaných výrazů v aktuálním dokumentu viz. obrázek č. 2.1.2.

(7)

Obrázek č.2.1.2.

Find what – hledaný text Replace with – nahrazující text

Match whole words – zda se mají vyhledávat celá slova nebo jen části slov Match case – zda se mají při vyhledávání rozlišovat malá a velká písmena Direction – znamená směr vyhledávání v dokumentu

Up – nahoru od pozice kurzoru Down – dolů od pozice kurzoru

Extended Find – vyvolá dialogové okno, pro rozšířené vyhledávání, podobné oknu, které je popsané u příkazu Extended Replace, viz. obrázek č.2.1.3.

Extended Replace – vyvolá dialogové okno pro rozšířené vyhledávání a nahrazování výrazů v dokumentu, viz. obrázek č. 2.1.3.

Po spuštění rozšířeného hledání nebo nahrazování se objeví ve spodní části obrazovky okno Result, do kterého se vypíšou místa nálezu v jednotlivých souborech. V tomto seznamu bude zobrazena cesta k nalezenému souboru (File), nadpis dokumentu získaný z tagu <TITLE> (Title), nalezený text (Match), místo nálezu v počtu znaků od začátku dokumentu (Start) a délka nalezeného textu (Length).

(8)

Find what – hledaný text Replace with – nahrazující text Find where – kde se má výraz hledat

- Current document – pouze v aktuálním dokumentu - All open document – ve všech otevřených dokumentech

- In folder – ve vybrané složce. Navíc hledání můžete omezit na určité typy souborů, např. *.html prohledá všechny soubory s příponou html.

- In project –hledání ve vybraném projektu

Include subfolders – zda se mají prohledávat i podadresáře zadané složky Match case – zda se mají při vyhledávání rozlišovat malá a velká písmena

Regular expressions – zda budou při vyhledávání podporovány regulární výrazy (např. * a ?)

Skip tags while searching – zda se mají přeskočit tagy, to znamená že se prohledává pouze v zobrazovaném textu

(9)

Make backups – zda se má vytvořit záloha původního souboru, než se začne soubor prohledávat a nahrazovat výrazy novými. Tento soubor bude mít příponu .bak

2.1.2 Tools

Tento panel obsahuje prvky pro správu barev, kontrolu správnosti vytvářených dokumentů, a to nejen po gramatické stránce, ale také jsou zde prvky pro kontrolu zadaných odkazů na jiné stránky.

Pallete – zobrazí paletu, která obsahuje barvy, které se bezpečně zobrazí na všech počítačích. Pokud kliknete na některou barvu v této paletě, vloží se do dokumentu na aktuální pozici kurzoru ve formátu #RRGGBB. Po kliknutí na ikonu palety v této nabídce se zobrazí sada palet pro vaše použití, ke kterým si můžete přidávat vlastní barvy

Verify links – kontrola odkazů. Po kliknutí na tuto ikonku se ve spodní části okna aplikace objeví okno obsahující seznam odkazů v aktuálním dokumentu (viz. obrázek č. 2.1.5. okno Result)

Obrázek č.2.1.5.

(10)

Nastavení kontroly odkazů:

Spustit kontrolu odkazů Přerušit kontrolu odkazů

Nastavit URL odpovídající umístnění stránek

Nastavit max. dobu čekání u kontroly externích odkazů Nastavit proxy server

Zobrazit seznam neplatných odkazů v externím prohlížeči

Validate current document (Shift+F6) – kontrola správnosti dokumentu.

Pokud kliknete na tuto ikonu, tak se podle konfigurace validátoru zobrazí v okně Result (viz obrázek č. 2.1.5.) hlášení, varování a chyby nalezené v aktuálním dokumentu

Thumbnails – náhledy obrázků, do okna Result (viz obrázek č.2.1.5.) se postupně načtou všechny obrázky v aktuální složce. Chcete-li přenést některý z obrázků do dokumentu, prostě přetáhněte jeho náhled na požadované místo v dokumentu. Náhledy mají pevný rozměr a proto se všechny obrázky deformují tak, aby se do tohoto rozměru vešly.

Spell check (F7) – kontrola pravopisu, toto tlačítko vyvolá kontrolu pravopisu. Přestože HomeSite ke kontrole používá český slovník, dělají mu problémy česká slova. I když má ve slovníku např. slovo začátek tak toto slovo v textu označí jako chybu. Proto tuto kontrolu moc nedoporučuji.

Mark spelling errors (Ctrl+F7) – označí v dokumentu červenou vlnovkou ty slova, která nejsou ve slovníku programu HomeSite. S českými slovy je to stejné jako u kontroly pravopisu.

Style editor – spustí externí editor CSS stylů TopStyle Lite 2.0 od firmy BradSoft, který je dodáván současně s programem HomeSite

(11)

New Image Map – vytvoření obrázkové klikací mapy. Nejprve se po kliknutí na tuto ikonu zobrazí dialogové okno pro zadání obrázku a jména klikací mapy

Image name – jméno obrázku i s relativní cestou Map name – jméno klikací mapy

Po zadání těchto údajů a potvrzení stiskem tlačítka OK se spustí již samotný editor klikacích map – Image Map Editor viz obrátek č. 2.1.8. Tento editor je velice jednoduchý, stačí si pouze vybrat jaký tvar bude aktivní místo v mapě mít.

Na výběr je ze tří základních druhů – obdélník, kruh a polygon viz. obrázek č. 2.1.7. Po ukončení práce s tímto editorem se do aktuálního dokumentu vloží obrázek i s definicemi aktivních oblastí klikací mapy.

Obrázek č.2.1.7

(12)

2.1.3 Edit

Obrázek č. 2.1.9. Tento panel obsahuje prostředky pro práci s textem, například tlačítky zpět, znovu a navíc je zde tlačítko opakovaní posledního vloženého tagu. HomeSite umožňuje velice propracovanou práci se schránkou.

Nabízí totiž kromě klasického zkopírování a vyjmutí do schránky také náhled do této schránky a vložení požadované části schránky do dokumentu. Nestandardně můžeme i vložit celý obsah schránky do dokumentu.

Cut (Ctrl+X) – vyjme označený text z dokumentu a vloží ho do schránky Copy (Ctrl+C) – zkopíruje označený text do schránky

Paste (Ctrl+V) – vloží na aktuální pozici kurzoru v dokumentu poslední objekt vložený do schránky

Show clipboard – zobrazí obsah schránky s náhledy na jednotlivé části, které byly do schránky vložené. Výběrem jedné z částí schránky ji vložíte na aktuální pozici kurzoru v dokumentu

Paste all – vloží celý obsah stránky na aktuální pozici kurzoru v dokumentu Clear clipboard – smaže celý obsah schránky

Undo (Ctrl+Z) – vrátí zpět poslední provedenou operaci v dokumentu. Tuto funkci je možné používat i vícekrát za sebou

(13)

Redo (Shift+Ctrl+Z) – opět provede operaci, která byla vzata zpět funkcí Undo. Tuto funkci je možné používat i vícekrát za sebou

Repeat last tag (Ctrl+Q) – vloží do dokumentu na aktuální pozici kurzoru naposledy použitý tag, nebo část kódu, která byla programem HomeSite naposledy vložena do dokumentu

Code sweeper (Ctrl+Alt+F) – funkce pro zpřehlednění zdrojového kódu, přeformátuje tagy tak, aby byly logicky odsazeny a byla dodržena hierarchie dokumentu.

2.1.4 View

Tento panel obsahuje prvky pro prácí s prostředím programu HomeSite, to znamená prvky pro zobrazování a skrývání jednotlivých částí programu. Dále na tomto panelu můžeme najít také funkci pro zobrazení dokumentu na celou obrazovku a ikonu pro zobrazení dokumentu v externím prohlížeči

Resource tab (F9) – zobrazí nebo skryje okno Resource Tab popsané dále v textu

Results (Shift+Ctrl+L) – zobrazí nebo skryje okno Results viz. obrázek č. 2.1.5.

Quick bar (Ctrl+H) – zobrazí nebo skryje panel Quick bar popsaný dále v textu viz. obrázek č. 2.2.1.

(14)

Special charakters (Shift+Ctrl+X) – zobrazí nebo skryje okno se speciálními znaky viz. obrázek č. 2.1.11. Jednotlivé znaky je možné do dokumentu vkládat jednoduchým poklepáním na vybraný znak. Znak se vloží do dokumentu na aktuální pozici kurzoru např. ve tvaru &copy pro ©

Full screen (Ctrl+F12) – zapne nebo vypne zobrazení aktuálního dokumentu přes celou obrazovku

View External Browser List – zobrazení seznamu externích prohlížečů, pokud máte nastavený pouze jeden externí prohlížeč, zobrazí aktuální dokument v tomto prohlížeči

2.2 Quick bar

Nástrojová lišta se záložkami viz. obrázek č. 2.2.1. Quick bar je v podstatě panel se záložkami, který slouží pro rychlé vkládání tagů. Pro nejpoužívanější tagy s více parametry má HomeSite implementovaná dialogová okna pro snadnější nastavení parametrů.

(15)

2.2.1 Záložka Common

Tato záložka obsahuje základní funkce pro vkládání tagů, které použijeme téměř ve všech dokumentech. Jsou to základní tagy jako <BODY>,<BR>,<IMG SRC>

a tag <A>. Pro tyto tagy jsou v HomeSite připravená dialogová okna pro nastavení nejdůležitějších parametrů.

Quick start – spustí průvodce základního nastavení stránek viz. obrázek č. 2.2.3. Tato funkce se zpravidla pouští pouze jednou a to při vytváření nového dokumentu.

Title – titulek, který se objeví v horní liště prohlížeče Margins – okraje stránky

Top – horní okraj Left – levý okraj

(16)

Pokud dáte next objeví se dialog pro nastavení tzv. META informací viz.

obrázek č. 2.2.4.

Refresh after … seconds – zde se zadá čas, za jaký má dojít k přepnutí stránky na jinou URL adresu

With URL - zde se zadá požadovaná URL adresa kam se má stránka přepnout Keywords – zde se zadá text který má být v tagu <META KEYWORDS=””>

Description – zde se zadá text který má být v tagu <META DESCRIPTION=>

Po ukončení tohoto dialogu tlačítkem FINISH se automaticky objeví dialogové okno pro nastavení základních parametrů tagu <BODY>. Viz obrázek č. 2.2.5.

Body – spustí dialogové okno pro nastavení základních parametrů tagu

<BODY>. Viz obrázek č. 2.2.5.

(17)

Background Image – pozadí, které tvoří obrázek Background Color – barva pozadí

Text color – barva obyčejného textu Link color – barva odkazu

Visited Link color – barva použitého (navštíveného) odkazu Active Link color – barva označeného odkazu

Paragraph (Shift+Ctrl+P) – vloží do dokumentu na aktuální pozici kurzoru tag <p> a ukončovací tag </p>

Break (Shift+Ctrl+B)– vloží do dokumentu na aktuální pozici kurzoru tag

<br>

(18)

Non-breaking space (Shift+Ctrl+Space) - vloží do dokumentu na aktuální pozici kurzoru výraz  

Anchor – vyvolá dialog viz. obrázek č. 2.2.6, ve kterém se jednoduše vyplní potřebné parametry párového tagu <A>

HREF – rozbalovací seznam obsahuje již použité URL adresy pro snazší přístup. První tlačítko vybere soubor na disku, tlačítka s ikonami Internet Exploreru a Netscape Navigatoru slouží k výběru odkazu u oblíbených položek příslušných prohlížečů.

Target – zde můžete napsat název rámce (Frame), kam se má odkaz směrovat.

Pokud nepoužíváte rámce, není nutné tuto položku vyplňovat

Name – vyplňte pokud máte v dokumentu definované místo pro odkazování Image (Shift+Ctrl+I) – vyvolá dialogové okno pro vložení obrázku do dokumentu viz. obrázek č. 2.2.7.

(19)

Source – umístnění obrázku, pokud je obrázek nalezen, zobrazí se v náhledovém okně a dosadí se rozměry do parametrů WIDTH a HEIGHT

Alt. Text – alternativní text, který se zobrazí pokud necháte kurzor myši nad obrázkem

Use Map – pokud používáte tento obrázek jako klikací mapu, pak zde zadejte jméno klikací mapy a zaškrtněte volbu ISMAP

Width – šířka obrázku v bodech Height – výška obrázku v bodech

Hspace – šířka neviditelného okraje okolo obrázku vlevo a vpravo Vspace - šířka neviditelného okraje okolo obrázku nahoře a dole Border – šířka okraje okolo obrázku

Horizontal Rule – vyvolá dialog, pro nastavení parametrů tagu <HR> viz obrázek č. 2.2.8.

(20)

Align – zarovnání linky left - zleva

center – na střed right – zprava Width – délka linky Size – šířka linky

No shading – zda bude u linky stín nebo ne

Align center – podle nastavení programu vloží na pozici kurzoru tag, který slouží pro zarovnání textu na střed stránky, implicitně je to tag <div align =

"center"></div>

Align right – podle nastavení programu vloží na pozici kurzoru tag, který slouží pro zarovnání textu k pravému okraji stránky, implicitně je to tag <p align = "right"></p>

Div – vyvolá dialogové okno pro nastavení parametrů tagu <div> viz.

obrázek č. 2.2.9.

(21)

Align – zarovnání textu left - zleva

center – na střed right – zprava

justify – do bloku (podporují prohlížeče od verze 4.0 a vyšší)

2.2.2 Záložka Fonts

Na této záložce můžeme najít funkce pro formátování textu. Všechny tlačítka na této záložce vkládají do dokumentu tagy pro různé úpravy textu, kromě prvního tlačítka Font, které jako jediné na této záložce vyvolá dialogové okno pro nastavení parametrů tohoto tagu.

Font – vyvolá dialogové okno viz. obrázek č. 2.2.11., pro nastavení základních parametrů tagu <Font>.

(22)

Color – barva písma Size – velikost písma

relativ + zde zadáte o kolik bodů má být písmo větší než normální absolute zde zadáte v bodech jak velké má být písmo

relativ – zde zadáte o kolik bodů má být písmo menší než normální

Font Size + vloží do dokumentu na aktuální pozici kurzoru tag <font size="+1"></font>

Font Size – vloží do dokumentu na aktuální pozici kurzoru tag <font size="-1"></font>

Bold – vloží do dokumentu na aktuální pozici kurzoru tag <b></b>, pro tučné písmo

(23)

Italic - vloží do dokumentu na aktuální pozici kurzoru tag <i></i>, pro písmo kurzivní

Strong – vloží do dokumentu na aktuální pozici kurzoru tag <strong> a ukončovací tag </strong>

Emphasis - vloží do dokumentu na aktuální pozici kurzoru tag <em> a ukončovací tag </em>

Preformated text – vloží do dokumentu na aktuální pozici kurzoru tag

<pre> a ukončovací tag </pre>

Heading 1 – vloží do dokumentu na aktuální pozici kurzoru tag <H1> a ukončovací tag </H1>

Subscript – vloží do dokumentu na aktuální pozici kurzoru tag <sub> a ukončovací tag </sub>

Superscript – vloží do dokumentu na aktuální pozici kurzoru tag <sup> a ukončovací tag </sup>

(24)

2.2.3 Záložka Tables

Na této záložce můžeme spustit průvodce tvorbou tabulky (Table Wizard), kde můžeme jednoduše nastavit všechny parametry tabulky. Dále na této liště můžeme spustit dialogová okna pro nastavení parametrů tagů <table>, <tr> a <td>.

Dále jsou zde funkce pro samotné vložení těchto tagů do dokumentu.

Table Wizard – toto tlačítko vyvolá průvodce pro vytvoření tabulky. Po vybrání tohoto tlačítka vyvolá dialogové okno pro nastavení parametrů tabulky, které se provádí ve třech krocích. První dialogové okno, viz. obrázek č. 2.2.13., se zobrazí po kliknutí na tlačítko Table Wizard, po nastavení počtu sloupců a řádku v první dialogovém okně se můžeme přepnout do druhého dialogového okna, viz.

obrázek č. 2.2.14, tlačítkem Next. V druhém dialogovém okně se nastavují parametry celé tabulky. Po nastavení těchto parametrů se můžete přepnout do třetího dialogového okna, viz. obrázek č. 2.2.15, kde se nastavují parametry jednotlivých buněk tabulky.

(25)

Rows – slouží pro nastavení počtu řádek Columns - slouží pro nastavení počtu sloupců

Row span - slouží pro nastavení sloučení více buněk v řádku Column span - slouží pro nastavení sloučení více buněk ve sloupci

Obrázek č. 2.2.14

(26)

Alignment – zarovnání tabulky s textem na stránce

Cell spacing – mezera mezi jednotlivými buňkami tabulky Cell pading – mezera mezi okrajem a obsahem políčka

Width – šířka tabulky, zaškrtnete-li políčko Specify width, můžete zadat šířku tabulky v bodech nebo procentech obrazovky

Background – barva pozadí tabulky, zaškrtnete-li políčku Use color, můžete ze seznamu vybrat barvu pozadí tabulky

Border – šířka okraje tabulky

Frame – způsob zobrazování rámečku okolo tabulky Rules – způsob zobrazování čar uvnitř tabulky

Content – obsah políčka

Header – políčko content bude hlavičkou tabulky Width – zadání šířky políčka tabulky

(27)

No wrapping – text v políčku nebude automaticky zalomen na další řádek a místo toho se bude roztahovat šířku políčka

Content alignment – zarovnání obsahu políčka Horizontal – ve vodorovném směru

Vertical – ve svislém směru

Table dialog – otevře dialogové okno pro nastavení parametrů tagu

<table>, viz. obrázek č. 2.2.16.

Width – šířka tabulky

Border – šířka okraje tabulky

Align – zarovnání tabulky vzhledem k textu na stránce Cell padding – mezera mezi okrajem a obsahem políčka Cell spacing – mezera mezi jednotlivými políčky tabulky Na záložce Browser-specific (1) najdeme:

Border – barva okraje tabulky (pouze u Internet Exploreru)

(28)

Border Light – barva světlejší strany stínovaného okraje (pouze u Internet Exploreru)

Border Dark – barva tmavší strany stínovaného okraje (pouze u Internet Exploreru)

Datapage size – při použití propojení dat do tabulky zde specifikujete, kolik záznamů bude najednou v tabulce zobrazeno

Na záložce Browser-specific (2) najdeme:

Background image – obrázek na pozadí tabulky Height – výška tabulky

Table Row dialog - otevře dialogové okno pro nastavení parametrů tagu

<tr>, viz. obrázek č. 2.2.17.

Align – vodorovné zarovnání obsahu políček na řádku Vert. align – svislé zarovnání obsahu políček v řádce

Write end tag (optional) – vložení ukončovacího tagu, doporučeno

(29)

Na záložce Browser-specific najdeme to samé jako u dialogového okna pro nastavení parametrů tagu <table>

Table Header dialog - otevře dialogové okno pro nastavení parametrů tagu

<th>, viz. obrázek č. 2.2.18.

Obrázek č. 2.2.18.

Zde jsou popsány pouze nové parametry, ostatní jsou popsané u předcházejících funkcí.

Col span – sloučení políček přes zadaný počet sloupců Row span – sloučení políček přes zadaný počet řádků

Table Data dialog - otevře dialogové okno pro nastavení parametrů tagu

<td>, toto dialogové okno je stejné jako u tagu <th> viz. obrázek č. 2.2.18.

Table – vloží do aktuálního dokumentu na pozici kurzoru tag <table> a ukončovací tag </table>

(30)

Table row – vloží do dokumentu tag <tr> a ukončovací tag </tr>

Table header – vloží do dokumentu tag <th> a ukončovací tag </th>

Table data – vloží do dokumentu tag <td> a ukončovací tag </td>

Table caption – vloží do dokumentu tag <caption> a ukončovací tag

</caption>

Table sizer (Quick table) – tato funkce umožňuje rychle vytvořit tabulku pouhým vybráním velikosti viz. obrázek č. 2.2.19. Jednoduše si označením políček vyberete rozměry tabulky a po potvrzení vaší volby se do dokumentu vloží základní tagy tabulky, bez jakýchkoliv parametrů.

2.2.4 Záložka Frames

Na této záložce jsou funkce pro práci s rámy (frames). Je zde průvodce pro tvorbu rámů a dialogová okna pro nastavení parametrů tagů FrameSet, Frame, Floating frames a NoFrames. Také jsou zde tlačítka pro samotné vložení těchto tagů bez jakýchkoliv parametrů.

(31)

Frame Wizard – průvodce pro tvorbu rámů. Protože je průvodce pro tvorbu rámů téměř identický s průvodcem pro tvorbu tabulek nebudu ho již v této části popisovat.

Frameset dialog – vyvolá dialogové okno pro zadání základních parametrů u tagu <frameset>, což jsou parametry udávající rozměry rámu.

Rows – počet řádek Cols – počet sloupců

Frame dialog – vyvolá dialogové okno viz. obrázek č. 2.2.21., kde můžete nastavit parametry tagu <frame>

Source – jméno souboru, který se má v rámu zobrazit Name – název rámu, nutné při odkazování mezi rámy

(32)

Margin width – šířka okraje Margin height – výška okraje

Scrolling – zobrazení posuvných lišt v okně rámu

Auto – posuvné lišty se zobrazí pouze pokud jsou potřeba No – nezobrazí se, ani když text přesáhne rám

Yes – zobrazí se, i když nejsou potřeba

Noresize – pokud je tato volba zaškrtnuta, velikost rámu není možné měnit FrameBorder – zda mají nebo nemají být zobrazeny okraje rámu

Floating frame dialog – vyvolá dialogové okno pro nastavení parametrů tagu <iframe>. Toto dialogové okno je téměř identické s dialogovým oknem pro tag <frame>, proto ho již zde nebudu znovu popisovat.

Noframes dialog – vloží do aktuálního dokumentu na pozici kurzoru tag

<noframes> a ukončovací tag </noframes>

Frameset - vloží do dokumentu na pozici kurzoru tag <frameset> a ukončovací tag </framest>

Frames - vloží do dokumentu na pozici kurzoru tag <frame>

Floating frame - vloží do dokumentu na pozici kurzoru tag <iframe> a ukončovací tag </iframe>

No frames - vloží do dokumentu na pozici kurzoru tag <noframes> a ukončovací tag </noframes>

Base Target – vyvolá dialogové okno pro nastavení parametru, zde zadáte pouze Href – jméno, které slouží k odkazování mezi rámy

(33)

2.2.5 Záložka Lists

Na této záložce jsou funkce pro práci se seznamy (Lists) a s definicemi (definition). Můžeme zde najít jednoduchá dialogová okna pro vložení tagů pro číslované i nečíslované seznamy.

Quick list – zobrazí jednoduchý dialog pro vytvoření seznamu viz. obrázek č. 2.2.23.

Rows – kolik řádků bude v seznamu List Style – styl seznamu

Ordered – číslovaný seznam

Unordered – nečíslovaný seznam s odrážkami

(34)

Type – dle druhu seznamu, si můžete vybrat buď způsob číslování nebo tvar odrážky

Unordered list – vyvolá dialogové okno pro nastavení parametrů tagu <UL>, kde si vyberete pouze Typ odrážky v poli TYPE

Ordered list – vyvolá dialogové okno pro nastavení parametrů tagu <OL>, kde napíšete do políčka START číslo od kterého se mají položky v seznamu číslovat a v poli TYPE formát číslování

List item – vyvolá dialogové okno pro nastavení parametrů tagu <li>, parametry se zde zadávají stejné jako u předchozích dvou tlačítek, pouze na záložce Content můžete zadat obsah tohoto řádku seznamu

Definition list – vloží do dokumentu tyto tagy

<dl>

</dl>

Definition term – vyvolá dialogové okno pro tag <dt>, na záložce Content můžete zadat obsah zobrazovaný tímto tagem

Definition – vyvolá dialogové okno pro tag <dd>, na záložce Content můžete zadat obsah zobrazovaný tímto tagem

Menu – vloží do dokumentu na pozici kurzoru tag <menu>

(35)

2.2.6 Záložka Forms

Na této záložce jsou funkce pro práci s formulářem, tlačítky, přepínači a textovými poli. Viz. obrázek č. 2.2.24.

Form – vyvolá dialogové okno pro nastavení parametrů tagu <font> viz.

obrázek č. 2.2.25.

Action – název stránky nebo skriptu, který zpracovává data z formuláře Method – způsob předávání dat

EncType – varianty při předávání dat z formuláře Name – jméno formuláře

(36)

Submit Button – vyvolá dialogové okno pro nastavení parametrů tlačítka submit, viz. obrázek č. 2.2.26.

Name – jméno tlačítka

Value (caption) – text na tlačítku Width – výška tlačítka

Height – šířka tlačítka

Reset Button – vloží do dokumentu na pozici kurzoru tag <input type="Reset">

Text – vyvolá dialogové okno pro nastavení políčka text, viz. obrázek č. 2.2.27

(37)

Name – jméno pole ve formuláři, nutné při pozdějším odkazovaní se na toto políčko

Value – výchozí hodnota políčka Size – velikost políčka

Max Length – maximální počet znaků, které lze do políčka napsat

Readonly – obsah políčka nepůjde změnit, bude zobrazována pouze výchozí hodnota zadaná u parametru value

Hidden – vyvolá dialogové okno pro nastavení parametrů políčka Hidden, ve kterém se nastavují pouze parametry Name a Value

Text area – vyvolá dialog pro nastavení parametrů víceřádkového pole.

Cols – šířka rámečku v počtu znaků Rows – výška rámečku v počtu znaků

Na záložce Content můžete vyplnit výchozí text obsažený v políčku.

(38)

Radio Button – vyvolá dialogové okno pro nastavení parametrů přepínače, viz. obrázek č. 2.2.28.

Value – text napsaný za přepínačem

Caption – hodnota, kterou vrací tento přepínač

Chcked – je-li zaškrtnuto, bude dané políčko implicitně vybráno

Check Box – vyvolá dialogové okno, které je téměř identické s dialogem pro nastavení parametrů přepínače (radio button).

Select – vyvolá dialogové okno, pro nastavení parametrů tagu <select>, viz.

obrázek č. 2.2.29.

(39)

Obrázek č. 2.2.29.

Allow Multiple

Selections – lze vybrat ze

seznamu více položek než

jednu

Generate Option tags –

zde si můžete vygenerovat

libovolný počet

prázdných tagů

SELECT indent level –

stupeň odsazení

Number of Tags – počet

tagů, které se mají vygenerovat

2.2.7 Záložka Script

Na této záložce jsou funkce pro práci s Java scripty, aplety a také je zde podporováno vkládání funkcí ActiveX

JavaScript Tree – zobrazí strom objektů (a jejich vlastností0 scriptovacího jazyka JavaScript viz. obrázek č. 2.2.31.

(40)

JavaScript Wizard – vyvolá dialogové okno pro nastavení a vložení do dokumentu několika připravených Java scriptů.

Záložka Url Selection viz. obrázek č. 2.2.32.

- slouží k vytvoření rozbalovacího seznamu odkazů Obrázek č. 2.2.32.

Title – první řádek rozbalovacího seznamu, který je neaktivní Items - jednotlivé položky seznamu

Name – jméno odkazu URL – URL adresa odkazu

Go Button – zda má být u seznamu tlačítko Go, po stisknutí tohoto tlačítka přejde prohlížeč na vybraný odkaz ze seznamu.

Záložka Url Selection viz. obrázek č. 2.2.33.

(41)

- vloží do dokumentu script, který zobrazí v prohlížeči datum poslední úpravy dokumentu

Prefix – Text, který bude napsaný před samotným datumem poslední modifikace Use advanced options – zaškrtněte pokud chcete nastavit formát datumu

Optimized script size – zda má být optimalizována velikost scriptu Include time – zda má být zobrazen i čas poslední úpravy dokumentu Date formating – formát datumu, v jakém má být zobrazen

Format of month display – formát měsíce, v jakém má být zobrazen Záložka Browser typ

- vloží do dokumentu script, který zobrazí typ prohlížeče, který používá uživatel Zde zadáte pouze v poli prefix text, který má být napsaný před typem prohlížeče

Záložka Background fade

- na této záložce je script, který přechází od jedné barvy pozadí do druhé

(42)

Fade to – barva, na kterou se změní barva pozadí

Speed – rychlost změny jedné barvy na druhou, číslo od 2 do 255, kdy menší číslo znamená větší rychlost

Záložka Current URL

- vloží do dokumentu script, který zobrazí URL adresu k dokumentu, ve kterém je tento script

Prefix – text zobrazený před URL adresou vloženou do dokumentu tímto scriptem

Záložka Current URL

- vloží do dokumentu script, který zabrání zobrazení tohoto dokumentu v rámu, např. pokud máte někdě na jiných stránkách odkaz v rámu na tento dokument, díky vloženému scriptu se dokument zobrazí v celém okně prohlížeče viz. obrázek č. 2.2.34.

Applet – zobrazí dialogové okno pro vložení a nastavení parametrů tagu

Parametr – vyvolá dialogové okno pro vložení a nastavení parametr; tagu

<param>

Document.Write – vloží do dokumentu na aktuální pozici kurzoru výraz document.write("")

Script – vloží do dokumentu tag <script> a ukončovací tag </script>

(43)

Noscript – vloží do dokumentu tag <noscript> a ukončovací tag

</noscript>

ActiveX – vyvolá dialogové okno, pro vložení prvků ActiveX

2.2.8 Záložky ASP, JSP, CFML

Na těchto ostatních záložkách jsou funkce pro práci s programovacím jazykem ASP (Active Server Pages) a jinými programovacími jazyky. Touto problematikou se tato práce nezabývá.

2.3 Pracovní plocha pro návrh stránky

Nejvíce místa na pracovní ploše programu Homesite zabírá okno pro samotnou editaci zpracovávané WWW stránky. Na levém okraji je řada ikon, které nastavují různé volby úpravy dokumentů, viz. obrázek č. 2.3.1. Na horním okraji jsou tři záložky – Edit, Browse, Design. Tyto záložky slouží k přepínání mezi návrhem stránky v HTML kódu (Edit) nebo v zabudovaném WYSIWYG editoru (Design) a náhledem stránky (Browse).

Zavře aktuální dokument

Rozdělí pracovní plochu na dvě části

Zobrazí okno se seznamem otevřených souborů Zapne zalamování řádků

Zobrazí pomocný pruh vedle editačního okna Zobrazí čísla řádků v pomocném pruhu Zobrazí netisknutelné znaky

Schová panely nástrojů (standar, edit, tools, wiev,) + Quickbar Přejde na první otevřený dokument

Přejde na předchozí otevřený dokument

(44)

Přejde na další otevřený dokument Přejde na poslední otevřený dokument Odsadí aktuální řádku

Zruší odsazení aktuální řádky

Zobrazí na místě kurzoru okno s možnými parametry tagu Po napsání úvodního tagu automaticky připíše i ukončovací tag Po dokončení tagu se zkontroluje jeho správnost

Pod editačním oknem zobrazí okno prohlížeče, kde se ihned promítají změny

2.4 Resource tab

Tato část programu se dá v zásadě rozdělit na šest různých částí podle jejich funkcí a to na jednoduchého správce souborů, správce projektů, prohlížeč závislostí v dokumentu, výstřižky HTML kódu, nápovědu a inspektor tagů.

2.4.1 Správce souborů

Tato část Resource tab, umožňuje výběr diskové jednotky, adresáře a konkrétního souboru. Vybraný soubor pak můžeme otevřít pouhým dvojitým kliknutím myši.

(45)

Obrázek č. 2.4.1. Obrázek č. 2.4.2.

2.4.2 Správce projektů

Správce projektů, viz. obrázek č. 2.4.2. Umožňuje práci s projekty. Vybráním ikony s obrázkem složky vyvoláte klasické dialogové okno pro otevření existujícího projektu.

Nový projekt vytvoříte vybráním ikony s obrázkem kouzelnické hůlky, nebo z menu z nabídky Project vyberte položku New Project. Zobrazí se dialogové okno, kde nastavíte všechny potřebné parametry projektu:

Project Name – jméno projektu, pod tímto názvem se na disku vytvoří soubor s parametry projektu

Location – umístnění souborů projektu

Include subfolders – znamená, že do projektu budou zařazeny i soubory které jsou v podadresářích adresáře zadaného v Location

File Types – typy souborů zařazených do projektu 2.4.3 Prohlížeč závislostí v dokumentu

Zobrazí strukturu dokumentu ve formě stránek vzájemně provázaných odkazy.

Obrázek č. 2.4.3 Obrázek

č. 2.4.4.

Na obrázku vidíte dvě možné varianty zobrazení odkazů

(46)

ve stránce. Vlevo je implicitní pohled ve formátu grafu (Chart view). Tento pohled není zrovna přehledný, navíc HomeSite při každém zobrazení v tomto formátu přeskládá odkazy naprosto náhodně. Pro běžnou práci je tak výhodnější stromová struktura (Tree view) ukázaná vpavo. Způsob zobrazení volíte pomocí kontextové nabídky View Style – Tree

- Chart

2.4.4 Výstřižky HTML kódu

Při otevření této záložky je plocha panelu prázdná, zde jsou na obrázku již nastavené výstřižky. Vidíte, že výstřižky můžete libovolně pojmenovat a třídit je do složek, například podle serverů, pro které je definujete. V tomto okně budete hodně pracovat s kontextovou nabídkou. Ta při prázdném seznamu dovolí pouze vytvoření nové položky (Create Folder). Poté opět klikněte pravým tlačítkem myši a z nabídky vyberte položku Add snippet. Zobrazí se okno pro nastavení výstřižku. Ve kterém pak vyplňujete tyto položky.

Description – název výstřižku Start text – uvozovací text End text – ukončovací text

V těchto textech můžete zadat i bohatší formátování, jako odřádkování nebo odsazování textu.

Vložení výstřižku do dokumentu pak provedete pouhým poklepáním na jméno požadovaného výstřižku.

(47)

Obrázek č. 2.4.4. Obrázek č. 2.4.5.

2.4.5 Nápověda

HomeSite obsahuje bohatou a snadno přístupnou nápovědu. Najdete v ní základy práce s prostředím, ale zejména referenční příručku všech tagů, jejich parametrů a také vlastností a metod použitelných při scriptování v dynamickém HTML. Nebudete potřebovat jinou nápovědu než, která je obsažena v HomeSite.

K nápovědě se dostanete po klepnutí na záložku s obrázkem knihy s otazníkem.

Nad seznamem témat nápovědy je několik ikon, které slouží k přístupu k dalším funkcím nápovědy.

Hledání v nápovědě

Zobrazení kapitol nápovědy

Zobrazení seznamu nalezených odkazů

Přepínání mezi zobrazením textu nápovědy v levém sloupci a v editačním okně pro úpravu dokumentu

Tvorba a organizace záložek v nápovědě

(48)

3. Zhodnocení programu HomeSite

Po prvním seznámení a vytvoření alespoň několika dokumentů jak v HTML editoru, tak v WYSIWYG, mi určitě dáte za pravdu, že program HomeSite je opravdu souhrnný program na správu WWW serverů i vytváření stránek. Ať už třeba kompletní nápovědou ve které naleznete množství informací nejenom z oblasti HTML tagů, ale třeba i programovacích jazyků na web (JavaScript, PHP script, Java, nově také XML, atd.). Nebo všemi nástroji, které dobrý designér potřebuje a nemusí mít několi, třeba nekompatibilních druhů programů na ten či onen nástroj (definování klikacích map, FTP správce souborů atd.). HomeSite má všechny tyto funkce v sobě implementovány a proto se stává mocnou zbraní v rukou kreativního uživatele. Po sečtení všech dobrých a špatných vlastností se HomeSite pohybuje mezi nejlepšími HTML editory a já nemůžu udělat nic jinho, než vám ho doporučit.