Úvodem ISBN Internet a web 2 Některé základní pojmy 2 Některé pojmy ještě podrobněji... 5 WWW server 5 Co je HTML?

Transkript

1 Úvodem Předmětem této brožury je FrontPage 2000 a jejím cílem je praktické zvládnutí základů tvorby webových stránek. Nebudeme se detailně zabývat prostředím aplikace FrontPage nebo podrobnostmi jednotlivých nabídek a nástrojů. Někteří čtenáři budou možná postrádat i filozofování nad tím, co to je Internet, kde se vzal Web a kam to vše směřuje. Vyhneme se, pokud to jen bude možné, i všem technickým podrobnostem. Účelem zde není vyčerpávající výklad o aplikaci FrontPage a už vůbec ne o tak nesmírně širokém tématu jakým je Internet, World Wide Web a vývoj aplikací. S touto příručkou byste ale měli být schopni vytvořit fungující web bez znalosti programování a seznámit se s některými základními technikami a jejich použitím v programu FrontPage. Pokud budete potřebovat nahlédnout do kuchyně Internetu, jeho protokolů, technických podrobností sítí nebo programovacích jazyků, najdete na našem knižním trhu řadu publikací mezi nimi dokonce některé docela dobré. Na tuto brožuru navážou postupně další, které se budou zabývat např. grafickým návrhem webových stránek, vývojářskými nástroji i vlastním jazykem HTML. Zaměření těchto publikací máte v rukou i vy sami. Podívejte se na anketu na nebo kde můžete svým hlasem ovlivnit témata dalších připravovaných sešitů ediční řady PCWorld Edition. Svoje připomínky, náměty a poznámky zasílejte: UNIS Publishing, s.r.o. Jundrovská 33, Brno tel.: fax: knihy@win.cz OBSAH Internet a web 2 Některé základní pojmy 2 Některé pojmy ještě podrobněji... 5 WWW server 5 Co je HTML? 6 Něco málo k návrhu webu 6 Základy FrontPage 7 Začínáme web za 5 minut 8 Jednostránkový web 8 Co vše je špatně? 13 Příprava grafiky pro web 13 Možnosti FrontPage při úpravě obrázků 14 Vylepšujeme web 18 Šablony 18 Témata 27 Tabulky 31 Hotspot 36 Web na zelené louce 39 Vytvoření nového webu 39 Domovská stránka 40 Doplnění stránek 40 Navigace 42 Samostatný navigační panel 45 Obsah 46 Databáze 49 Formuláře 68 Průvodce formulářem 68 ISBN PCWorld Edition Návrh webu a FrontPage 2000 Informace v této knize jsou zveřejněny bez ohledu na jejich případnou patentovou ochranu. Jména produktů byla použita bez záruky jejich volného použití. Vydavatel a autoři nepřebírají žádnou odpovědnost ani žádnou jinou záruku za použití údajů uvedených v této knize a z toho vyplývajících následků. Veškerá práva jsou vyhrazena na kopie celé, ale i částí knihy pořízené jakýmkoliv způsobem pro účely obchodu. Žádná část této knihy nesmí být použita v žádném jiném informačním médiu a na žádném jiném nosiči dat za účelem obchodu bez předchozího písemného souhlasu vydavatele. Pavel Kristián 2001 UNIS Publishing, s.r.o. Vyšlo v lednu

2 MS FrontPage 2000 Internet a web O Internetu již bylo napsáno takové množství zasvěcených i povrchních materiálů, že jste se určitě s některým z nich setkali, a to i v případě, že čtete pouze některý z časopisů zabývajících se pohlavním životem našich prominentů. Internet je všude kolem nás, a o tom, že se stále šíří, a že stále více lidí hledá aktivní přístup k němu, svědčí i to, že jste si koupili tuto publikaci. I když pravděpodobně většinu základních pojmů z oblasti Internetu znáte, bude na místě si alespoň vybrané pojmy připomenout. Na tomto místě bych chtěl připomenout některé námi vydané publikace, které mohou pomoci zájemcům o pokročilejší témata: Active Server Pages 3.0 Profesionálně (1200 stran, vyšlo v roce 2000) VBScript Průvodce vývojáře (780 stran, vyšlo v roce 2000) Elektronický obchod s Visual Basicem, ASP, SQL Server a MTS (600 stran, únor 2001) Hacker Proof bezpečnost Internetu (aktualizované vydání, březen 2001) Některé základní pojmy Internet Vlastní slovo Internet je zkratkou slova internetwork (asi bychom mohli říci prostředí propojených počítačových sítí, nebo síť počítačových sítí ). Původním záměrem bylo vytvořit univerzální systém pro agenturu Advanced Research Project Administration ministerstva obrany USA (DARPA), následovalo jeho rozšíření na akademickou půdu a od počátku 90. let se Internet stal neustále rostoucím informačním prostředím umožňujícím komunikaci mezi nesčetným množstvím počítačů na celém světě. Internet nemá majitele, je to sada různorodých počítačových sítí propojených prostřednictvím bran, které zpracovávají přenos dat a převod zpráv a komunikují spolu prostřednictvím sady protokolů TCP/IP. Intranet Všeobecně používaný termín označující využití internetových technologií v interních sítích organizací. Jedná se o síť s protokolem TCP/IP, která může, ale vůbec nemusí být připojena k síti Internet. WWW World Wide Web (WWW nebo jenom Web) jedná se o jednu z nejmladších služeb v síti Internet. Informace jsou v síti WWW doručovány ve formě hypertextu a hypermedií, obvykle pomocí jazyka HTML, s dokonale zpracovanými schopnostmi odkazování. Síť WWW je sada hostitelských systémů sítě Internet, která tyto služby v síti Internet zpřístupňuje pomocí protokolu HTTP. WWW síť je možné si představit jako množinu dokumentů webových stránek uložených na nejrůznějších HTTP serverech na celém světě a dostupných na základě URL (viz URL). TCP/IP Transmission Control Protocol/Internet Protocol. Komunikační standard pro všechny počítače v rámci Internetu. Protokol TCP na straně odesílání dělí data, která mají být odeslána, na datové segmenty. Protokol IP zařazuje segmenty do paketů (část informace odesílaná prostřednictvím sítě s pevnou strukturou i velikostí) obsahujících vedle vlastních dat v binární, tj. neznakové podobě, také záhlaví s identifikačním číslem, zdrojovou a cílovou adresou a údaje pro kontrolu chyb. Protokol IP poté pakety odesílá k doručení do směrovače. Na straně příjemce protokol IP přijme pakety, rozloží je zpět na datové segmenty dat, a protokol TCP je uspořádá do původní sady dat. 2

3 Internet a web HTTP Hypertext Transfer Protocol. Protokol pro komunikaci klientů a serverů WWW. HTTP je protokol na úrovni aplikací určený pro distribuované a propojené informační systémy využívající více medií text, obrázky, zvuk nebo video. FTP File Transfer Protocol. Standardní internetový vysokorychlostní protokol pro přenášení souborů z jednoho počítače do druhého. ISDN Integrated Services Digital Network. Nová technologie nyní nabízená většinou poskytovatelů telefonních služeb jako rychlejší alternativa k tradičním modemům. Síť ISDN spojuje hlasové a digitální síťové služby do jednoho média, což umožňuje nabízet zákazníkům digitální datové služby a hlasové spojení na jediné telefonní lince. Linka ISDN s telefonickým připojením nabízí rychlost až b/s. Jedná se o typ telefonní linky, který zvyšuje rychlost rozlehlé sítě WAN na přenosové rychlosti 64 nebo 128 kb/s na lince ISDN. Linku ISDN musí nainstalovat telefonní společnost na straně serveru i na straně účastníka. HTML Hypertext Markup Language. Jazyk používající, který se používá k vytváření hypertextových dokumentů přenositelných z jedné platformy na druhou. Soubory HTML jsou jednoduché textové soubory, ve kterých se pro formátování a hypertextové odkazy používají tagy značky. Jedná se o formátovací jazyk používaný zejména u dokumentů v síti WWW. DHTML Dynamické HTML. Sada nových funkcí od aplikace Internet Explorer verze 4.0 umožňující vytvářet dokumenty HTML, které dynamicky mění svůj obsah a dokáží reagovat na akce uživatelů. Pomocí jazyka DHTML mohou tvůrci na stránce WWW poskytnout speciální efekty, aniž by se spoléhali na programy běžící na straně serveru. Na rozdíl od standardního HTML vyžadují ale DHTML dokumenty podporu od použitého prohlížeče. Prohlížeč Klientský nástroj pro navigaci a přístup k informacím v síti Internet nebo intranet. Prohlížeč analyzuje jazyk HTML a informace zobrazuje na obrazovce počítače. Známým představitelem je aplikace Microsoft Internet Explorer. Doména (v síti Internet) Jednoduchý název, například microsoft.com, používaný pro server v síti Internet. Úplný název domény FQDN (Fully Qualified Domain Name) také obsahuje název serveru, například samples.microsoft.com. Název domény Část struktury názvů v systému DNS (Domain Name System). Název domény je název, kterým se doména označuje v síti. Názvy domén představují textovou formu IP adresy prostředku, přičemž používají jedinečný název počítače serveru a zaměření činnosti, například.com u obchodních organizací nebo.edu pro akademické instituce. Názvy domén mohou mít několik částí, které jsou odděleny tečkami. Například je název domény serveru společnosti Microsoft, kde je jedinečný název serveru společnosti Microsoft v síti WWW a.com je typ zaměření společnosti (v tomto případě obchodní organizace). V běžných případech se používá jako přípona i označení státu, tedy cz pro Českou republiku, sk pro Slovensko apod. 3

4 MS FrontPage 2000 URL Uniform Resource Locator. Konvence vytváření názvů jednoznačně označujících umístění počítače, adresáře nebo souboru v síti Internet. Adresa URL také určuje odpovídající protokol sítě Internet, jako je HTTP nebo FTP. Příklad adresy URL: Zde je specifikace použitého protokolu HTTP, je název domény a pcwedition.htm je název dokumentu. IP adresa Adresa protokolu Internet Protocol (IP). Jedinečná adresa, která hostitele identifikuje v síti. Označuje počítač jako 32bitovou adresu, která je v celé síti s protokolem TCP/IP jedinečná. IP adresa je obvykle ve tvaru desítkových čísel oddělených tečkami, který popisuje každý oktet (osm bitů nebo jeden bajt) IP adresy jako desítkovou hodnotu a každý oktet odděluje tečkou. Například: Server WWW Zde je situace hodně zamotaná. Všeobecně se jedná o počítač vybavený serverovým softwarem, který pomocí protokolů sítě Internet jako HTTP a FTP odpovídá na požadavky klienta sítě WWW v síti s protokolem TCP/IP. Často se ale tento pojem zjednodušeně používá i pro označení vlastního souboru webových stránek. V této publikaci se budu snažit pro tento případ používat slovo web. ISP (Internet Service Provider) poskytovatel služeb sítě Internet. Veřejný poskytovatel vzdálených připojení k síti Internet. Společnost nebo vzdělávací instituce umožňující vzdáleným uživatelům připojení k síti Internet pomocí telefonického připojení nebo nainstalováním pronajímaných linek. web (psáno s malým w) budeme tím označovat konkrétní domovskou stránku (home page) a všechny ostatní připojené stránky (dokumenty včetně obrázků, multimédií apod.) a další soubory zajišťující funkcionalitu webu. Všechny soubory webu jsou obvykle uloženy ve strukturovaných složkách na jednom WWW serveru nebo na jednom počítači. Stránka WWW Dokument sítě World Wide Web. Stránky mohou obsahovat téměř cokoli - zprávy, obrázky, filmy a zvuky. Vedle vlastního obsahu jsou na stránkách umístěny i objekty, které slouží k navigaci pohybu jak po obsahu vlastní stránky, tak i odkazy na jiné stránky tohoto nebo jiného serveru. Na konkrétní stránku se můžete podívat zadáním jejího URL v aplikaci prohlížeče. Domovská stránka Úvodní stránka home page obvykle s informacemi o dále poskytovaných stránkách. Domovská stránka je výchozí bod webu nebo jeho části. Domovský adresář Kořenový adresář webu, v němž jsou uloženy soubory tvořící jeho obsah. Adresář je přístupný uživateli a obsahuje soubory a programy. Domovský adresář webu obvykle obsahuje domovskou stránku. Dynamická stránka Stránka WWW vytvořená automaticky teprve na základě informací poskytnutých uživatelem. Dynamické stránky pouze pomocí nástrojů FrontPage nevytvoříte. Doporučuji např. naši publikaci Active Server Pages 3.0 Profesionálně. 4

5 Internet a web Obrazová mapa (také klikací mapa ) bitmapový obrázek, který obsahuje odkazy na několik adres URL prostřednictvím aktivních oblastí (hotspot) na obrázku. Klepnutím na různé části obrazové mapy lze přejít k různým prostředkům na serveru. Obrazové mapy mohou být na straně serveru nebo klienta. Obrazové mapy na straně serveru mapují jednotlivé adresy URL na serveru a vyžadují skripty CGI. Obrazové mapy na straně klienta skripty CGI nevyžadují, protože mapování adres URL je obsaženo v souboru HTML. Program Microsoft Content Analyzer podporuje obrazové mapy na straně klienta a odkazy zobrazuje jako podřízené stránky nadřízené stránky obrazové mapy. Hypertext Dokument obsahující hypertextové odkazy na jiné dokumenty (na rozdíl od tzv. fulltextových odkazů, které platí uvnitř jednoho dokumentu). Klepnutím na hypertextový odkaz se zobrazí další dokument. Tyto odkazy jsou v textu obvykle barevně odlišeny, mění se na nich tvar kurzoru a případně se zobrazuje i vysvětlující text. FrontPage-Extended web Virtuální web doplněný o FrontPage Server Extensions, které představují podporu takovým funkčním rozšířením jako jsou čítač návštěv, možnost editace webu přímo na serveru (tj. bez nutnosti přenášet upravené nebo nové stránky z počítače na server), automatická obnova odkazů při odstranění, přemístění nebo změně názvu stránky, podpora spolupráce s Microsoft Office, Visual SourceSafe, a Index Serverem, spolupracuje s řadou platforem jako Windows NT nebo UNIX, stejně jako s užívanými servery, např.microsoft Internet Information Services (IIS), WebSite nebo Netscape. FrontPage Server Extensiont Serverová rozšíření aplikace FrontPage skupina souborů instalovaná na serveru WWW, která dává serveru možnost využívat zvláštní funkce aplikace Microsoft FrontPage. Pomocí serverových rozšíření aplikace FrontPage mohou správci prohlížet a spravovat server WWW v grafickém rozhraní. Tvůrci pak mohou stránky WWW na serveru IIS vzdáleně vytvářet, editovat a odesílat. Některé pojmy ještě podrobněji... WWW server Server WWW je vyhrazené místo v počítačové síti, na kterém se návštěvníkům zpřístupňují informace ve formě stránek nebo dokumentů. Návštěvníci musí pro přístup k serveru použít speciální prohlížecí software prohlížeč. Takovým prohlížečem může být například Microsoft Internet Explorer nebo Netscape Navigator apod. Úkolem prohlížeče je zobrazit stránky HTML umístěné na serveru WWW jako text a grafiku na monitoru návštěvníka. Pod pojmem počítačová síť si lze představit na jedné straně celosvětovou síť Internet, na straně druhé třeba lokální síť spojující několik počítačů v rámci jednoho pracoviště intranet. Informace zpřístupněné na WWW serveru mohou být jak ve formě stránek HTML, ale i jako dokumenty v jiných formátech. V tomto druhém případě je pro otevření dokumentu nutná serverová aplikace, která dokáže odpovídající typ dokumentu otevřít. V předchozím odstavci byl zmíněn intranet. Má smysl ještě vedle možností vlastního sdílení dokumentů provozovat v rámci intranetu i WWW server? Určitě ano, přístup k informacím na WWW serveru (pro 5

6 MS FrontPage 2000 nejmenší síťová prostředí realizovaný např. pomocí Personal Web Serveru) může eliminovat rozdíly mezi verzemi aplikačního SW, nekompatibilitu danou hardwarovou platformou, operačními systémy apod. Když se návštěvníci pomocí prohlížeče připojí k serveru WWW, obvykle se zobrazí tzv. domovská stránka. Provedení a vzhled domovské stránky, na které je obvykle uveden obsah dostupný na daném serveru WWW, je velmi důležitý. Platí zde totéž, co se říká o prvním kontaktu s neznámým člověkem názor si utvoříte po prvních několika sekundách. Domovská stránka je základním rozcestníkem, ze kterého budou návštěvníci vašich stránek vycházet při hledání dalších informací. Je třeba, aby byly zajímavé, přitažlivé, logicky organizované a aby obsahovaly nezbytné informace. Více než jinde o domovských stránkách platí, že méně znamená více. Není nic horšího, než domovská stránka, která se nenatáhne ani za vynucenou kuřáckou přestávku, třeba jenom za cenu super efektu, který zde zobrazíte na úkor navigačních či jiných informací. Někdy je vhodné použít tzv. splah screen, i když je to postup mnohými zavrhovaný. Splash screen je jakási zástupná stránka, která se rychle zobrazí a slouží k hlavně k tomu, aby odlákala pozornost návštěvníka od frustrujícího sledování pomalu se pohybujícího ukazatele stahovaného obsahu pravé domovské stránky. Někdy může být použití splash screen smysluplné např. upozornění na novinku, nebo informace o důležité změně apod. Co je HTML? HTML je zkratka termínu Hypertext Markup Language. HTML je celosvětový standardní způsob používání vloženého kódování neboli značek označujících formátování, které má být v textu použito. Aby bylo například slovo ahoj zobrazeno tučně jako v této nápovědě, musí textový soubor čtený prohlížečem obsahovat následující značky: <strong>ahoj</strong>. Autor stránky WWW může vytvořit obyčejný textový soubor a vložit do něj značky tak, aby vznikla stránka zobrazitelná prohlížečem, bez ohledu na to, ve kterém operačním systému prohlížeč pracuje. Díky této nezávislosti na platformě je použití dokumentů ve formátu HTML ideálním způsobem výměny informací mezi jinak nekompatibilními počítačovými systémy. Nedostatkem HTML může být to, že používání značek je poněkud nepraktické a pro autora není vždy snadné předpovědět vzhled výsledné stránky v prohlížeči návštěvníka. Přestože většina značek formátu HTML je převáděna ve všech prohlížečích, existují také značky, které lze zpracovat pouze v určitých prohlížečích. Jestliže na stránkách svého serveru použijete právě tyto značky, nemusí se návštěvníkům zobrazit tyto stránky tak, jako vám. Převádění většího počtu dokumentů do formátu HTML může být nepohodlná a časově náročná činnost, především jsou-li soubory v původním formátu pravidelně aktualizovány. K usnadnění vytvoření HTML souboru nabízí nyní celá řada aplikací textových editorů, grafických nebo sázecích programů... export dokumentu do tvaru HTML. Vždy je ale nutné si ověřit, jak tento převod funguje, zda není nutné vypustit používání některých prvků apod. Důležité pro vás je to, že v této příručce se s žádným HTML kódem nesetkáte. Něco málo k návrhu webu Jak jsem se zmínil již na začátku, připravuje se sešit se zaměřením na grafický design webu, ale přece jenom i zde bych se chtěl o některých problémech alespoň okrajově zmínit. U webu je nutné vzájemně sloučit čtyři atributy: obsah - struktura - funkcionalita - vzhled. Přitom vše je vzájemně provázáno a často jsou požadavky na dokonalé zajištění jedné vlastnosti protichůdné vzhledem k druhé. Pokud bude na vašich stránkách zajímavý obsah, budou je lidé navštěvovat; pokud ale bude ovládání webu mizerné, budete mít sice hodně návštěvníků, ale také hodně naštvaných. Zajímavý vzhled může být na úkor dobré orientaci, atd. Je určitě dobré prohlédnout si jiné weby, zejména z vaší branže, a pokusit se ujasnit si, co se vám na konkurenci líbí a co ne. Je zbytečné "krást", ale neškodí nechat se inspirovat druhými. Pro- 6

7 Internet a web hlédněte si stránky svých konkurentů, zkuste se na nich pohybovat a uvědomte si jejich slabá místa a naopak jejich přednosti. Nehazardujte s trpělivostí návštěvníka. Budou-li vaše stránky příliš "objemné" a tedy dlouho stahované, nebo budou mít příliš vysoké nároky na hardware i software klienta, může se stát, že návštěvník ukončí připojení ještě před tím, než si stačil prohlédnout vaše "umělecké" dílo. Mějte vždy na mysli, že ne všichni jsou vybaveni posledními technickými vymoženosti, ať již jde o vlastní počítač, grafickou kartu a monitor a zejména se nedomnívejte, že rychlost připojení, které dosahujete vy díky připojení ISDN, mají k dispozici všichni! Rozvažte si, proč vlastně stránky vytváříte. Může to být nabídka nového produktu, představení firmy, anketa pro zjištění názoru návštěvníků, stránky poskytující informace apod. Ne vždy je na první pohled zřejmé, o co se budete snažit jde o firemní stránku, na které chcete také nabízet produkty firmy, nebo jde o nabídku zboží s možností získat bližší informace o dodavateli či výrobci? Budete-li mít cestovní kancelář, začnete představením krajských poboček nebo lukrativních zájezdů? Víte dobře, kdo je cílovým zákazníkem? Jste naladěni na stejné vlně i co se týče výrazových prostředků? Nenudíte nebo naopak neodrazujete přílišnou agresivitou? Optimalizovali jste svoje stránky s ohledem na různé platformy a prohlížeče? To se týká zejména grafiky a multimedií, ale i předpokládaného rozlišení obrazovky a rozměrů stránky. V centru naší pozornosti na následujících asi 80 stranách bude především otázka návrhu vlastního webu, úpravy jeho struktury, zajištění odkazů mezi stránkami, možnosti používání a přístupu k databázím, ukázky vytvoření interaktivních prvků a jejich začlenění do webu a řada dalších témat. A ještě jedna zlatá rada je zbytečné se rozčilovat, když se vše zhroutí právě v okamžiku, kdy si říkáte: "Ještě upravím toto a potom to hned zazálohuji!" Základy FrontPage Schválně jsem si nechal na tuto část málo místa. V brožuře se budu vyhýbat takovým věcem, jak vkládání textu na stránku a jeho formátování, přidání oddělovacích čar... Pokud znáte jen trochu práci např. s Wordem, je vám jasné, jak můžete změnit velikost písma, font, styl odstavce apod. Možná pro vás budou zpočátku nepřijatelné anglické názvy např. Heading 1 apod., ale pokud jim nerozumíte, tak to zkuste a uvidíte. Budu se naopak snažit zaměřit na to, abyste dokázali vytvořit něco, co bude fungovat. Navíc, pro grafické ztvárnění máte ve FrontPage celou řadu témat (motivů), které udělají spoustu práce za vás. A pokud vám to nebude stačit, najdete na trhu dost knih, podle kterých sice nic neuděláte, ale naleznete v nich detailní překlad jednotlivých položek nabídek, tlačítek... 7

8 MS FrontPage 2000 Začínáme web za 5 minut Nejlépe bude pustit se hned do práce. Byli jste na zajímavé dovolené, máte řadu fotografií a mnoho přátel po celé republice. Nejjednodušším způsobem, jak se podělit o zážitky z cesty, bude vytvořit web a dát o něm svým přátelům a známým vědět. Nebudeme se zabývat sehnáním poskytovatele internetových služeb providera; různé nabídky i na bezplatné zřízení jednoduchého webu najdete na řadě známých portálů. Vše, co tedy potřebujete udělat, je vytvořit obsah a strukturu webu a přenést je na vyhrazené místo u providera. Sedněte tedy k počítači a pusťte se do práce. Jednostránkový web Po spuštění programu FrontPage se otevře základní okno aplikace, které je rozděleno na několik částí. Převážnou část prvků okna dobře znáte: titulkový pruh s ovládacími tlačítky a systémovou nabídkou, pruh nabídek, panel základních nástrojů apod. Standardně se při levém okraji okna zobrazí panel zobrazení s ikonami, které reprezentují jednotlivé režimy zobrazení určené pro specifické práce na vašem webu. Základní okno aplikace FrontPage. Toto standardní nastavení můžete změnit a individuálně přizpůsobit obdobně jako u všech aplikací sady MS Office Panely nástrojů lze přetažením umístit k jiným stranám okna nebo je ponechat jako samostatné plovoucí panely. Pomocí View > Toolbars můžete zapnout zobrazení jiných panelů nástrojů, případně příkazem View > Toolbars > Customize libovolně pracovní prostředí a jeho nástroje upravit. Pro vytvoření nového webu vyberte postupně položky File > New > Web. Otevře se dialogové okno, ve kterém se nabízejí základní šablony webů. Jak můžete v okně vidět, je zde předpřipravena celá řada možností, jak rychle vytvořit základ webu. Protože právě začínáme, vybereme to nejjednodušší One Page Web (jednostránkový web). Na pravé straně okna v rozbalovacím seznamu Specify the location of the new web (Urči umístění nového webu) napište, kde se má nový web vytvořit. V podstatě můžete zvolit několik druhů umístění: přímo váš webový server v tomto případě byste zadali adresu, např. Web by se vytvářel přímo na webovém serveru a pokud by vše bylo v pořádku, byl by ihned funkční. Tento režim práce je ale třeba zásadně zavrhnout. Můžete si ho snad dovolit na intranetu na vaší lokální síti, ale jinak nikdy neumisťujte na webový server něco, co nemáte ověřeno a zkontrolováno. Navíc se vystavujete nebezpečí, že při výpadku připojení přijdete o data, práce se zbytečně zpomaluje a našli bychom řadu dalších důvodů, proč něco takového nedělat. A konečně, takovýto režim práce by vám musel umožnit i váš provider. My budeme 8

9 Zač ínáme web za 5 minut nejprve vytvářet diskovou verzi webu, tj. soubory budou uloženy ve složce, kterou zadáte na disku vašeho počítače. Nic nebrání tomu, abychom nepoužili implicitně nabízenou variantu umístění C:\Dokumenty\My Webs\myweb1. Na okraj pouze jedna poznámka: nepoužívejte pro umístění vytvářeného webu již existující složku obsahující soubory nebo uprostřed stromu adresářů, např. složku C:\Dokumenty. V případě, že budete web odstraňovat za pomoci programu FrontPage (což lze doporučit, protože se tím odstraní nejen soubory, ale také všechny informace, které FrontPage o tomto webu udržuje), dojde ke zrušení všeho, co složka webu obsahuje. Dovedete si jistě představit, co by se stalo, pokud byste odstranili web vytvořený třeba v kořenovém adresáři pevného disku C:\ vašeho počítače! Pro vytvoření nového webu vyberte postupně položky File > New > Web. Otevře se dialogové okno, ve kterém se nabízejí základní šablony webů. Protože právě začínáme vybereme to nejjednodušší One Page Web (jednostránkový web). Jako umístění ponecháme např. přednastavenou hodnotu C:\Dokumenty\My Webs\myweb1 a práci v okně uzavřeme klepnutím na tlačítko OK. Po klepnutí na OK problikne na obrazovce okno, které informuje o tom, že FrontPage zakládá na uvedeném místě nový web vytváří potřebnou strukturu složek a souborů, které budou pro web vytvořený na základě FrontPage, potřebné. To je také důvodem toho, proč vám pro přenesení takového webu nebude stačit překopírovat pouze vámi vytvořené soubory, ale je nutné přenést celou strukturu FrontPage webu. Po návratu zpět do hlavní obrazovky FrontPage vás očekává v tomto případě prázdná stránka new_page_1.htm a vlevo přibyl oproti předchozímu sloupec označený jako Folder list (seznam složek) se zobrazenou strukturou složek nového webu. Pokud oblast Folder list nevidíte, můžete si ji zobrazit buď pomocí tlačítka Folders na panelu zobrazení nebo příkazem View > Folder list z pruhu nabídek. Vedle dvou základních adresářů (_private a images) je v kořenové složce webu umístěn soubor index.htm. To je dokument, který se zobrazí v prohlížeči, pokud při přístupu na webový server nezadáte dokument, ale uvedete pouze název webu, například Obdobný význam může mít soubor se jménem default.htm, nebo default.asp, záleží na nastavení webového serveru. 9

10 MS FrontPage 2000 Byl vytvořen nový, prázdný web, obsahující pouze základní strukturu, kterou navrhuje FrontPage. Poklepejte na ikonu souboru index.htm, tím otevřete obsah tohoto souboru v pracovní ploše a můžete začít s úpravou stránky. Uděláme vše velmi jednoduše vytvoříme pouze nadpis a na plochu umístíme několik obrázků z dovolené se slovním doprovodem. Práce s programem je v této fázi podobná jako např. s MS Wordem. Nejprve napište titulek stránky a potom vložíme obrázek. Ke vložení obrázku použijete buďto tlačítko Insert Picture From File z panelu nástrojů, nebo příkaz Insert > Picture > From File. Otevře se dialogové okno, ve kterém je třeba určit umístění obrázku. K dispozici máte několik možností: přednastaveno je vyhledání obrázku z vlastní složky webu (v našem případě ze složky C:\Dokumenty\My Webs\myweb1), vyhledání z internetu, případně výběr obrázku z pevného disku vašeho počítače. Obrázek, který chcete vložit na stránku, můžete získat z několika zdrojů: ze složek webu, který právě budujete, zadáním URL (tedy vyhledáním v nějakém jiném dokumentu umístěném na internetu). Klepnutím na tlačítko Průzkumníka vpravo dole (viz obrázek) můžete vyhledat potřebný soubor i na pevném disku počítače. FrontPage dokáže pracovat s řadou známých typů obrázků (BMP, TIFF, TGA, RAS, EPS, PCX, PNG, PCD, WMF a samozřejmě GIF a JPEG). Při ukládání webu budou obrázky, které nejsou ve formátu GIF nebo JPEG, konvertovány obsahují-li méně než 256 barev do formátu GIF, jinak převedeny na JPEG. 10

11 Zač ínáme web za 5 minut Vybrali jsme tedy jeden z obrázků z dovolené a po jeho natažení na stránku dostaneme asi takovýto pohled: Obrázek je evidentně příliš velký, je nutno upravit jeho velikost. Můžete to udělat buďto tažením polohovacích bodů v rozích obrázku, nebo přímým nastavením velikost obrázku. Klepněte pravým tlačítkem myši na obrázek, z místní nabídky vyberte Picture Properties a přejděte na kartu Appearance. Zde je řada nastavení, která můžete použít pro úpravu vzhledu obrázku: - Alignment určí pozici obrázku na stránce s možnostmi zarovnání vlevo, na střed nebo vpravo; - Horizontal/Vertical spacing velikost volného místo ve vodorovném nebo svislém směru před obrázkem; - Specify size umožní nastavit přesně velikost obrázku v jednotkách pixel nebo v procentech původní velikosti obrázku. Zaškrtávací políčko Keep aspect ratio zachovává poměr stran při změně velikosti obrázku. Ponecháte-li toto políčko volné, můžete nastavit velikost svislé i vodorovné strany obrázku individuálně. Vzhledem k tomu, že počítám s možností prohlížení mého webu na monitoru s rozlišením 640 x 480 zvolil jsem rozměr obrázku asi na čtvrtinu šířky obrazovky, tj. 150 pixelů. Po úpravě velikosti obrázku dopíšeme nějaký vhodný text, vložíme případné další obrázky a jsme s prací hotovi zhruba za slibovaných 5 minut. Naše dílo nyní vypadá asi takto: 11

12 MS FrontPage 2000 Naše stránka je tvořena dvěma fotografiemi doplněnými jednoduchými texty. Chcete-li se podívat, jak tato stránka vypadá v prohlížeči, tj. jak ji asi uvidí návštěvník vašeho webu, uložme nejprve web buďto příkazem File > Save nebo přímo tlačítkem Save na panelu nástrojů. V průběhu ukládání budete vyzváni k potvrzení uložení externích souborů (v našem případě obou použitých obrázků) na nové místo. V našem případě s výhodou použijeme existující adresář pictures. Pro změnu uložení obrázků na jiné místo můžete klepnout na tlačítko Change Folder a zvolit jinou složku. Je to vhodné např. tehdy, když budete mít více obrázků, které chcete mít uloženy podle nějakého vlastního třídicího kritéria, např. podle roku dovolené apod. Vytvořenou stránku si prohlédnete jednoduše přímo v prostředí FrontPage klepnutím na záložku Preview na dolním okraji pracovní plochy. Jinou možnost vám dává příkaz File > Preview in Browser. V následně otevřeném dialogu si můžete vybrat prohlížeč, který chcete použít pro prohlídku stránky. Nastaven je váš implicitní prohlížeč, do seznamu můžete ale přidat další pomocí tlačítka Add. Možnost prohlédnutí si obsahu webu v několika různých prohlížečích, nebo i v několika jejich starších verzích, vám poskytne kontrolu nad tím, co mohou návštěvníci vašeho webu vidět. 12

13 Co vše je špatně? Zač ínáme web za 5 minut V podstatě je špatně téměř vše, co jsme udělali. Nezabíhejme příliš do grafické úrovně našeho webu k tomu připravujeme samostatnou publikaci, ale přece jenom několik slov o tom, co by měl web obsahovat: - při přístupu na stránku by měl návštěvník dostat jasnou odpověď na otázku Kde jsem a co zde mohu najít? ; - orientace na stránce musí být jasná, přehledná a logická; - stažení stránky a její otevření v prohlížeči nesmí být příliš pomalé a výsledky musí být dostatečně kvalitní bez ohledu na hardware a použitý prohlížeč na straně klienta; - návštěvník by měl mít možnost oslovit majitele webu. Vzhledem k těmto odrážkám je zřejmé, že náš web z nich nesplňuje téměř nic. V dalších kapitolách si ukážeme, jak odstranit některé nedostatky, zde se zmíníme pouze o úpravě grafiky pro web. Příprava grafiky pro web Web bez grafiky je dnes nepředstavitelný. Nejde jenom o to, že grafika působí efektně, řada informací podaná v grafické podobě lépe vystihne podstatu věci. Například výsledky hospodaření ve formě grafu dají jasnější obrázek než jakýkoliv popis nebo tabulka údajů. Grafika má ale naopak jeden velmi nepříjemný rys je velmi velká (ve smyslu množství bajtů, které je třeba přenést po síti směrem k uživateli). Pro srovnání: text od začátku stránky až sem má asi 1300 znaků a mohli bychom ho velmi dobře zobrazit na jedné obrazovce o rozlišení 640 x 480 bodů. Uložíme-li tento text včetně formátování ve tvaru HTML, bude mít takový soubor asi 6 kb. Obrázek 640 x 480 bodů při použití pouze 256 barev by měl zhruba 300 kb a ve větší barevné hloubce (tj. dokonalejším barevném provedení) třeba také 1 MB. I když použijete komprimovaný soubor, jeho velikost se může pohybovat přibližně mezi kb, tj. grafický soubor je mnohonásobně větší než soubor textový. To samo o sobě není pro prohlížeč problémem, problémem je ale přenos po síti. Podívejte se na následující tabulku, která vám poskytne přehled o rychlostech přenosu podle způsobu připojení: Přenosová rychlost Popis připojení Čas na přenesení 100 kb souboru 14,4 Kbps Dnes již pomalé modemy 60 s 28,8 Kbps Střední úroveň modemů 30 s 56 Kbps Rychlé modemy 15 s ISDN Speciální telefonní linka 7 s Ethernet Standardní počítačová síť < 1 s Časy uvedené v tabulce budou spíše o něco vyšší, protože jsou ovlivňovány řadou dalších nepříznivých vlivů. Na velikosti souborů se podílí především grafika, to znamená, že množství a velikost obrázků velmi nepříznivě ovlivňuje rychlosti stažení vašich stránek a jejich zobrazení v prohlížeči. A z toho plyne pokud chcete optimalizovat rychlosti, zabývejte se především grafikou. Naštěstí FrontPage udělá velkou část práce za vás. Pokud na stránku umístíte grafiku v některém z povolených formátů, FrontPage ji automaticky při ukládání webu převede na formát GIF (v případě, že grafika obsahuje méně než 256 barev) nebo formát JPEG. Lze jenom doporučit upravit grafiku mimo FrontPage v některém ze specializovaných grafických editorů: Adobe Photoshop, Corel PhotoPaint, PaintShop Pro, Gimps a celé řadě dalších. Pokud používáte skener, máte možnost použít i úpravy přímo při skenování. Tato problematika je velmi obsažná a věnovali jsme jí několik samostatných publikací, například: Skenování, úprava obrázků a tisk, Grafika a animace na webu, Velká kniha Photoshop apod. 13

14 Možnosti FrontPage při úpravě obrázků MS FrontPage 2000 Nejprve mi dovolte jednu poznámku: již minuly doby, kdy grafika na webu byla proto, že to bylo možné. Grafickým prvkům se jistě nemá smysl vyhýbat, ale nesnažte se je na stránku ani nacpat násilím. Bude-li váš web zaměřen například na poskytování právních informací, je zbytečné na něj cpát efektní obrázky, které ale nemají s obsahem nic společného. Na druhou stranu však máte i v tomto strohém obsahu textově orientovaných stránek možnost vyřádit se například na grafice ovládacích (navigačních) prvků, záhlaví stránky s logem, animovaných odrážkách apod., které mohou přispět k přehlednosti, upozornit na hlavní témata, vypíchnout věci důležité... Pro orientaci v dalším výkladu připomínám, že mluvíme o tzv. bitmapové grafice, tj. o obrázcích složených z barevných bodů (jako např. fotografie), nikoliv o vektorové grafice, což jsou obrázky skládané z jednodušších vektorových objektů čára, kruh, obdélník... Odkud brát obrázky, pokud nejste profesionální grafici? Především existují celé sady obrázků dodávaných s nejrůznějšími programy, ať již jako tzv. kliparty (drobná grafika tvořená obvykle ucelenými tématicky orientovanými sadami obrázků, např. různé postavičky, obličeje, zvířata, objekty jako rámečky, šipky apod., které lze použít v elektronicky připravovaných dokumentech většinou BEZ porušení autorských práv), sady fotografií a nejrůznějších dalších obrázků. Známé jsou galerie obrázků dodávané s programem CorelDRAW. Jiným zdrojem nejrůznějších obrázků je přímo internet. Zkuste spustit některý z vyhledávačů a zadejte picture, image nebo clipart Před použitím stažených nebo jinak získaných obrázků byste se ale měli zajímat i o autorská práva nebo o podmínky, za kterých můžete obrázky použít. V řadě případů jsou obrázky volně k dispozici, někdy si autor vyhradí uvedení zdroje, ale v řadě případů nelze obrázky volně používat! Jinou možností je skenování vlastních fotografií a filmů, nebo obrázky pořízené přímo digitálním fotoaparátem. V naprosté většině případů je ale nutné obrázky před jejich umístěním na web upravit. Základními úpravami pro použití obrázku na web jsou: - změna typu souboru obrázku - přizpůsobení velikosti obrázku - přizpůsobení palety barev Změna typu souboru Bitmapové obrázky můžete získat v nejrůznějších formátech, mezi nejznámější patří BMP, TIF, PCX, GIF, JPEG, PNG... Na webových stránkách se používají tři poslední z uvedených, s tím, že formát PNG je málo vhodný, protože není podporován některými staršími prohlížeči. Formát GIF je charakteristický tím, že podporuje pouze 256 barev, ale na druhou stranu vám umožňuje vytvářet jednoduché animace. V souboru formátu GIF může být totiž uloženo více obrázků současně, které může prohlížeč postupně zobrazovat. Další charakteristickou vlastností je možnost nastavení jedné barvy jako průhledné. Formát GIF je vhodný především pro obrázky, které jsou vytvářeny na počítači nebo obsahují větší jednobarevné plochy apod. Druhý typ JPEG (JPG) byl vytvořen pro práci s fotografiemi. Tento formát umožňuje velmi propracovanými algoritmy vycházejícími ze zákonitostí lidského vidění velmi výrazně redukovat počet barev a tím i velikost obrázku bez zřetelnější ztráty kvality obrázku. Oba dva převody dokáže provést FrontPage automaticky nejpozději při ukládání webové stránky. Velikost obrázku Při práci na webu se na rozdíl třeba od tisku pracuje s rozměry obrázku udávanými v tzv. pixelech obrazových bodech. Je důležité si uvědomit rozdílnost dvou pojmů: změna velikosti (resizing) a převzorkování (resampling). U obrázku, který vložíte na stránku, můžete upravit velikost, ve které se bude zobrazovat, ale přitom zachovat počet pixelů, které obrázek obsahoval. Můžete například dosáhnout toho, aby se obrázek o rozměru 200 x 100 pixelů (obrazových bodů) zobrazil v 50% velikosti na obrazovce tedy zabere 100 x 50 14

15 Zač ínáme web za 5 minut pixelů, velikost souboru ale zůstává stále stejná! Pokud víme, že obrázek budeme zobrazovat ve velikosti 100 x 50 pixelů, můžeme ho předem převzorkovat na tento menší rozměr. Oproti původnímu obrázku, který obsahoval 200 x 100 = 20 tisíc pixelů, bude upravený obrázek představovat 100 x 50 = 5 tisíc pixelů. Tím jsme dosáhli čtyřikrát menší velikosti grafického souboru, ve kterém je obrázek uložen, a to se jistě projeví na čase potřebném ke stažení obrázku! Přitom při prohlížení obou obrázků uživatel nezaznamená žádnou změnu, protože oba obrázky se na monitoru zobrazí ve velikosti 100 x 50 pixelů. Přizpůsobení palety barev U bitmapových obrázků může mít obecně každý pixel jinou barvu. V zásadě je možné barvu obrazového bodu definovat dvěma způsoby: buďto jako směs tří barevných složek RGB (R red, červená, G green, zelená, B blue, modrá) nebo jako pořadové číslo barvy z pevně dané barevné palety. Pomocí složek RGB lze definovat více než 16 milionu barev, např. bílá = RGB(255,255,255), černá RGB(0,0,0) nebo oranžová barva RGB(255,114,31). Každá složka může nabýt hodnoty mezi a k jejímu popisu je tedy třeba právě jeden bajt. Pro popis barvy v každém pixelu jsou tedy třeba 3 bajty. Velikost souboru s obrázkem bude počet_pixelů_vodorovně x počet_pixelů_svisle x 3. Pro náš případ obrázku 100 x 50 pixelů by to bylo asi (100 x 50 x 3) 15 kb. Pokud použijeme některou z pevných palet (obsahují obvykle maximálně 256 barev), postačí pro uvedení indexu barvy v paletě jediný bajt (plus prostor pro definování barev palety, tj. 256 x 3 bajty). Pro popis barevného obrázku 100 x 50 pixelů by nám tedy stačil soubor o velikosti asi 6 kb. Do hry ještě vstupují různé kompresní algoritmy, které dokáží výrazně snížit velikost grafického souboru. Omezení počtu barev ale není dáno jenom požadavkem na velikost přenášeného souboru, ale také hardwarovými možnostmi počítače návštěvníka našeho webu, především kvalitou jeho grafické karty. Je zapotřebí počítat s tím, že stále ještě existují počítače osazené grafickými kartami s velikostí paměti 1 MB a možná i méně. Takováto grafické karty zvládají právě tak oněch 256 barev při rozlišení 800 x 600 bodů. Navíc, pokud budete současně zobrazovat více obrázků a obrázky nejsou jednotně zpracované, tj. paleta barev každého z nich je jiná, obsahuje jiné barvy, mohou nastat problémy se správným zobrazením barev i u menšího počtu barev nebo při nižším rozlišení. Aby se těmto problémům předešlo byla definována tzv. webová paleta, která obsahuje výběr barev takový, aby byly bez problému zobrazeny jak na platformě Windows, tak i Mac. Blíže se touto problematikou zabýváme v již dříve uvedených publikacích Skenování, úprava obrázků a tisk případně Grafika a animace na webu. Nástroje FrontPage pro práci s grafikou Pro práci s obrázky nabízí FrontPage celou řadu nástrojů, které můžete vybírat buď formou příkazů nebo rychleji z panelu nástrojů: Vložit obrázek z externího zdroje Zvýraznit aktivní oblast Vložení textu do obrázku Vytvoř polygonální aktivní oblast Automatický náhled Eliptická aktivní oblast Absolutní pozice na stránce Obdélníková aktivní oblast Umístit do popředí Oříznutí Nástroj pro výběr Přesunout do pozadí Průhlednost Otočit doleva Převzorkování Otočit doprava Snížit jas 3D okraj Překlopit vodorovně Zvýšit jas Vypraný vzhled Překlopit svisle Snížit kontrast Obrázek v šedé škále Zvýšit kontrast Obnovit obrázek z původního zdroje 15

16 MS FrontPage 2000 Použití nástrojů je většinou jasné z popisu. Použití některých nástrojů si průběžně ukážeme. Pokud nemáte jiný grafický editor, postačí vám zde uvedené nástroje na většinu operací s obrázky, které budete chtít provést. Pokud vám ale na vzhledu vašeho webu bude mimořádně záležet, doporučuji provést většinu zásadních úprav grafiky mimo FrontPage ve specializovaném grafickém editoru (Photoshop, PhotoPaint, PaintShop Pro...). Jediný nástroj, který zcela ve FrontPage chybí, je možnost práce s barevnou paletou, tj. řízené úpravy a snižování počtu barev. V panelu nástrojů máte pouze dva zástupce: vypraný vzhled (Wash Out) a obrázek ve škále šedé (Black and White). Nástroj Převzorkování (Resample) použije aktuálně nastavenou velikost obrázku, proto proveďte převzorkování vždy až jako poslední krok, několikrát po sobě provedené převzorkování výrazně zhorší kvalitu obrázku, zvláště, pokud by šlo o zmenšení a následné zvětšení počtu pixelů. Velikost horního obrázku byla několikrát upravena a vždy bylo provedeno převzorkování (Resample). Jak je zřetelně vidět, kvalita obrázku výrazně utrpěla. Převzorkování proveďte vždy jako zcela poslední úpravu, až po definitivním umístění obrázku. Pro jistotu mějte vždy v zásobě i původní obrázek. Zejména nespoléhejte na možnost obnovy z internetového zdroje, protože při příštím požadavku na stažení originálního obrázku nemusí existovat ani obrázek, ale ani web, ze kterého jste obrázek stáhli. Ještě jedna poznámka: nástroj Průhlednost (Set Transparent Color) dokáže pracovat pouze s formátem GIF. Pokud je obrázek ve formátu JPEG (nebo před uložením stránky v jiném bitmapovém formátu), budete dotázání na možnost převodu obrázku do formátu GIF. Většinou se průhlednosti vybrané barvy využívá u kreslených obrázků pro odstranění pozadí, ale můžete tím dosáhnout i zajímavých efektů u fotografií. Při použití nástroje Průhlednost (Set Transparent Color) se kurzor změní na symbol kouzelné hůlky a barva, kterou klepnutím označíte, bude průhledná uvidíte tedy přes ni objekty ležící pod obrázkem. U dvou obrázků vedle byl použit nástroj na zprůhlednění vybrané barvy, ale jak vidíte s dosti problematickým výsledkem. U obrázku majáku jsme sice odstranili modré pozadí, ale už si neporadíme s nešťastným bílým pruhem na pravém okraji. Zde by to chtělo obarvit tento pruh na modro (mimo FrontPage) a teprve potom nastavit průhlednost. U druhého obrázku jsem chtěl odstranit eliptické pozadí, ale jak je vidět, je složeno z více barev a proto zde zůstaly jakési paprsky za prostřední postavou. Bohužel lze vybrat pouze jednu konkrétní barvu, takže i v tomto případě si bez externího editoru neporadíme. 16

17 Zač ínáme web za 5 minut Na závěr této části se ještě podíváme na možnosti vytváření miniatur pro zobrazování grafiky. Z různých důvodů může být užitečné zobrazovat místo skutečného obrázku pouze jeho miniaturu, může to být přehlednější, stažení stránky je rychlejší... Vložení miniatury místo plného obrázku je velmi jednoduché: na definitivní místo vložíte skutečný obrázek, klepnete na něj a klepnete na tlačítko Auto Thumbnail na panelu nástrojů Picture. To je vše. Vlastnosti zobrazení miniatury upřesníte na kartě Auto Thumbnail v dialogovém okně Page Options, které otevřete příkazem Tools > Page Options. Na této kartě můžete nastavit rozměr miniatury: vyberte jeden z rozměrů, který chcete nastavit a zadejte v poli Pixels jeho velikost v obrazových bodech (pixelech). Vybrat můžete šířku (Width), výšku (Height) nebo nejkratší/nejdelší stranu (Shortest/Longest Side). Dále můžete zvolit tloušťku rámečku kolem miniatury zaškrtnutím políčka Border thickness a zadáním tloušťky v pixelech. Poslední políčko umožňuje zobrazit miniaturu se zkosenými okraji. Miniatura představuje vlastně samostatný, z originálu nově vytvořený obrázek, a můžete tedy nastavit jeho vlastnosti. Klepněte na miniaturu pravým tlačítkem a vyberte příkaz Picture Properties. V dialogu, který se následně objeví, můžete mimo jiné nastavit cíl odkazu, tedy dokument, který se má v prohlížeči zobrazit, pokud klepnete na miniaturu. Protože jsme vytvářeli miniaturu z vloženého obrázku, je zde uveden právě odkaz na tento původní obrázek. Pro nastavení způsobu zobrazení tohoto dokumentu klepněte na tlačítko s tužkou vedle políčka Target Frame (cílový rám, okno). Blíže si použití těchto nastavení ukážeme v následujících ukázkách. 17

18 Vylepšujeme web MS FrontPage 2000 Po prvním překotném začátku budeme náš návrh webu vylepšovat. Ke všemu použijeme pouze nástroje, které nám poskytuje FrontPage. Přitom se budeme snažit o maximální zjednodušení naší práce, nejsme ani profesionálové grafici, ani specialisté vývojáři. Šablony Použití šablon (template) znáte již určitě z jiných aplikací MS Office, asi nejčastější je jejich používání ve Wordu. Šablona je předpřipravený dokument, který může obsahovat nejrůznější prvky společné pro všechny vytvářené stránky od základního formátování, podbarvení nebo podtisku až po nejrůznější prvky vložené na stránku. Používáním šablon se zjednoduší a zrychlí příprava stránek a zajistí se jejich jednotný vzhled. Velmi důležité je používání šablon v případě, že stránky vytváří více pracovníků, například v místní síti intranet. FrontPage podobně jako i ostatní aplikace MS Office nabízí celou řadu již předpřipravených šablon. K dispozici máte jak šablony pro vlastní stránky, tak i celé předpřipravené weby pro určité standardní nasazení. Podívejme se nejprve na šablony samotných stránek. Dialogové okno New se otevře příkazem File > New > Page. Pokud zvolíte novou stránku jiným způsobem (tlačítko na panelu nástrojů, z místná nabídky...) vloží se nová prázdná strna. Jak vidíte, obsahuje tento dialog tři karty, nás z toho bude zajímat pouze karta General. (Druhá záložka se týká stránek dělených na rámy a třetí tzv. kaskádových stylů.) Šablonu zvolíte klepnutím na ikonu a potom tlačítkem OK. Jak vidíte, zobrazuje se vpravo dole náhled stránky. Nemá smysl zde popisovat, co na které šabloně je a k čemu je vhodná, nejlépe vám poslouží právě náhled. Po vytvoření nové stránky můžete upravovat jednotlivé již předpřipravené prvky a samozřejmě přidávat prvky vlastní. Obrázek na následující straně ukazuje jak vypadá stránka vytvořená na základě jedné ze šablon. FrontPage vám umožňuje samozřejmě i navrhovat vlastní uživatelské šablony. Při vytváření šablony stránky postupujte stejně, jako byste připravovali běžnou stránku. Naformátujte stránku a vložte všechny společné objekty. Rozvažte, které objekty budou na všech stránkách vždy stejné (např. firemní logo, provedení záhlaví stránky a podobně) a které chcete na finální stránce ještě individuálně upravovat. V tomto druhém případě je vhodné zvolit takový text nebo obrázek, který na potřebu úpravy zřetelně upozorní. Všimněte si, že i implicitní šablony FrontPage obsahují např. místo skutečného textu cosi nesrozumitelného tak, aby i na první pohled bylo zřejmé, že se prvek musí upravit. 18

19 Vylepšujeme web Jak vidíte, stránka je připravena a nyní můžete přepisovat texty, měnit šířky jednotlivých oblastí, upravovat obrázky... Pokud chcete stránku uložit jako šablonu, provedete to pomocí příkazu File > Save As. V dialogu, ve kterém zadáváte umístění, vyberete v rozbalovacím seznamu Save as Type položku FrontPage Template. Není nutné se zabývat umístěním, šablony se standardně umísťují do složky C:\Windows\Application Data\Microsoft\FrontPage\Pages. Klepnutím na tlačítko Save se dostanete do dalšího dialogu, kde můžete zadat titulek (Title), který se zobrazí při následném výběru šablony. Další položkou je název (Name), který představuje jméno, pod kterým budou všechny soubory související s touto šablonou uloženy. Do pole Description můžete napsat popis této šablony, který vám později může pomoci ujasnit si, proč a k čemu vlastně tato šablona je. Pokud klepnete na tlačítko Browse, otevře se seznam všech uživatelsky vytvořených šablon. Pokud označíte některou z nich, bude její obsah nahrazen právě ukládanou šablonou. Po uložení můžete takto vytvořenou šablonu používat stejně jako i jiné interní šablony FrontPage. Je ale třeba při vytváření nové stránky použít místo tlačítka New na panelu nástrojů příkaz File > New > Page. Tím otevřete dialog New, ve kterém máte přehled všech dostupných šablon stránek. 19

20 MS FrontPage 2000 Požadovanou šablonu vyhledejte v seznamu. Klepnutím na její ikonu se vpravo zobrazí náhled stránky a popis, který jste dříve zadali. Chcete-li některou nepotřebnou šablonu zrušit, musíte ve složce C:\Windows\Application Data\Microsoft\ FrontPage\Pages vyhledat adresář se jménem odpovídajícím zadanému názvu šablony Name. V programu např. Průzkumník tuto složku zrušte i se všemi soubory, které obsahuje. Na vedlejším obrázku vidíte umístění složky Pages s uživatelskými šablonami. Každá šablona je umístěna v samostatné složce, která obsahuje všechny potřebné soubory zde je to např. soubor obrázku, který na stránce je. Pokud chcete zrušit uživatelskou šablonu, odstraňte celou složku. Tento způsob práce vám dává i jisté možnosti, jak si nezaplácat dialogové okno a udržovat šablony v pořádku. Pokud jich máte více (např. připravujete různé weby) stačí vám vždy přikopírovat nebo odstranit složky se stránkami z nějakého jinde umístěného archívu. Stejně jsou umístěny i ostatní šablony v adresářích CSS (kaskádové styly) a Frames (šablony stránek členěných do rámečků). 20

21 Vylepšujeme web Dále se podívejme blíže, jaké šablony nám FrontPage přímo nabízí pro přípravu celého webu. One Page Web vytvoří web s jednou prázdnou stránkou Corporate Presence Wizard slouží pro návrh webu pro prezentaci firmy Customer Support Web vytvoří web s technickou podporou pro zákazníky Discussion Web Wizard vytvoří web s diskusním fórem, který obsahuje také fulltextové vyhledávání v tématech Empty Web vytvoří prázdný web (neobsahující žádnou stránku) Import Web Wizard průvodce, který umožní vytvořit web z dokumentů, které máte na vašem lokálním disku nebo vyhledáte na internetu Personal Web vytvoří osobní stránky Project Web vytvoří web o projektu s přednastavenými členy projektu, kalendářem, stavem projektu, archívem a diskusním fórem V políčku Specify the location of the new web zadáte název a umístění webu. Pokud chcete vytvořit web v již existujícím webu, zatrhněte zaškrtávací políčko Add to current Web. Doporučuji vyzkoušet si postupně všechny průvodce, najdete tam řadu zajímavých a použitelných postupů, a hlavně není nutné vše znovu objevovat. Pro náš případ bude vhodný Personal Web, pokud se nespokojíme s jednostránkovým One Page Web. Nabídka předpřipravených webů umožňuje velmi rychle vytvořit i kostru složitého a strukturovaného webu, včetně celé řady ovládacích prvků. Takto vytvořený web můžete snadno a rychle modifikovat podle vlastní potřeby. Po krátké chvíli je základ webu vytvořen. V oblasti Folder List vidíte, že do složky webu přibyly nějaké soubory, připomínám, že soubor index.htm je tím souborem, který bude implicitně otevřen při přístupu na náš web (pokud není webový server nastaven jinak). Pokud není panel Folder List zobrazen, zapněte ho příkazem View > Folder List. 21

22 MS FrontPage 2000 Abychom si prohlédli strukturu webu, zjistili z kolika stránek sestává a jak jsou propojené, klepněte na tlačítko Navigation v panelu zobrazení. Polotovar webu, vytvořený automaticky při použití šablony Personal web, obsahuje domovskou stránku a tři dceřinné stránky. Názvy, které vidíte jsou titulky stránek. To, že jim odpovídají i názvy htm souborů, které popisují vlastní stránku, není podstatné, ale je to vhodné. Změníte-li titul, např. přepíšeme Interests na Zájmy, nezmění se již automaticky název odpovídajícího souboru htm a bylo by nutné upravit název ručně. Podívejme se ale na jednotlivé stránky a upravme je pro naši potřebu. Nejprve domovská stránka v pracovním režimu ji otevřeme jednoduše poklepáním na obdélníček Home Page v zobrazení Navigation nebo poklepáním na ikonu souboru index.htm na panelu Folder List. Jak vidíte z následujícího obrázku, provedl za nás průvodce docela hezký kus práce, je ale zapotřebí si vše podrobně projít. 22

23 Vylepšujeme web Na obrázku je vidět polotovar domovské stránky vytvořené po zadání File > New > Web a výběru Personal Web. V záhlaví stránky je prozatímní název Home Page, na stránce je řada dalších automaticky generovaných objektů. Všimněte si, že změna názvu stránky Interests na Zájmy, kterou jsme udělali v zobrazení Navigation, se již projevila a to změnou textu u navigačního prvku na levém okraji stránky. Vlastní stránka je již plně funkční, o čemž se můžete přesvědčit klepnutím na záložku Preview na dolním okraji pracovní plochy. Nejprve upravíme existující prvky a potom si přidáme svoje vlastní. Začneme nastavením vlastností celé stránky (na nastavení parametrů webu jako celku se podíváme později). Příkazem Tools > Page Options otevřete dialogové okno nastavení stránky Page Options. V něm najdete celkem šest záložek. Protože nechceme zabíhat do úprav HTML, podíváme se pouze na: - General (obecné) slouží pro nastavení kontroly pravopisu při psaní (políčko Check spelling as you type) a volby jazyka pro tuto kontrolu. - Compatibility (kompatibilita) umožní nastavit kompatibilitu s různými druhy prohlížečů a jejich verzemi a také podporu skriptování v jazycích JavaScript nebo VBScript, používání ovládacích prvků ActiveX a řadu dalších. - AutoThumbnail (základní nastavení miniatury) přednastavené vlastnosti miniatur, které zastupují plnou velikost obrázku na stránce. Nastavit můžete velikost některého z rozměrů Width (šířka), Height (výška), Shortest (nejkratší) nebo Longest side (nejdelší strana v pixelech, Border thickness (tloušťka okraje v pixelech) a případně i Beveled edge (zkosení okraje). Najeďte nyní myší na titulek Home Page. Jak vidíte, kurzor se změnil na ruku s visačkou, což označuje, že můžete upravovat vlastnosti tohoto objektu. Buďto na objekt titulek Home Page poklepejte, nebo na něj klepněte pravým tlačítkem myši a z místní nabídku vyberte položku Page Banner properties (vlastnosti ti- 23

24 MS FrontPage 2000 tulku stránky). Otevře se jednoduchý dialog, ve kterém můžete nastavit základní vlastnosti titulku zobrazení ve formě textu nebo obrázku a změnit text titulku. Napsal jsem vtipné Vítejte! a po klepnutí na OK ihned uvidíte výsledek ve zobrazení stránky na pracovní ploše. Já bych ale chtěl přidat k titulku i fotografii a pod titulek ještě doplnit další text. Umístěte kurzor úplně na levý okraj pruhu titulku, až se změní na kurzor pro vkládání textu. Na toto místo můžete nyní napsat nějaký text nebo vložit např. obrázek, což je přesně to, co chceme. Poloha kurzoru je na levém okraji pruhu titulku a kurzor má tvar I. Na toto místo vložíme obrázek, například svoji fotku nebo něco, co dobře charakterizuje naši stránku. Pokud bychom vytvářeli firemní web, bylo by to ideální místo pro vložení firemního loga. (Pokud se rozhodnete vložit obrázek, podívejte se prosím o nějakou stránku zpět na poznámky, které se týkají úprav obrázků pro web.) Pokud byste se rozhodli doplnit ještě třeba řádek textu pod titulek, mohli byste to provést obdobně jako s obrázkem: umístěte kurzor na pravý okraj titulku, až se změní na kurzor pro vkládání textů. Zde můžete napsat další text, třeba i více řádků. Můžete i svým vlastním textem zcela nahradit Page banner tedy titulek stránky. Jak titulek stránky odstraníme? Klepněte na něj tlačítkem myši a stiskněte klávesu Delete. Pokud si to rozmyslíte a budete chtít objekt titulku stránky (se kterým je přece jenom možné dělat různé věci) na stránku vrátit, použijte příkaz Insert > Page banner. Výhoda záhlaví stránky provedeného jako text může být v přece jenom pohodlnějším formátování. 24

25 Vylepšujeme web Pokud potřebujete lépe vidět konce odstavců, kotvy obrázků a podobné formátovací značky pro lepší orientaci, postačí klepnout na tlačítko (View All, zobrazit vše) na standardním panelu nástrojů. Obrázek ukazuje stav naší stránky s vloženým obrázkem, titulek stránky je nahrazem napsaným textem. Jasně jsou vidět konce odstavců, přechody na nový řádek apod. V záhlaví stránky nám chybí ještě naformátovat cosi obsahující záhadný text [Edit the properties... Takto je zatím označen polotovar navigačních tlačítek, které nám umožní pohyb po jednotlivých stránkách webu. Náš web je poměrně jednoduchý, je tvořen domovskou stránkou a třemi dceřinými stránkami. Abychom se mohli po těchto stránkách pohybovat, potřebujeme tlačítko pro přechod na každou z těchto stránek. Později si ukážeme ještě podrobnější nastavení. Poklepejte kurzorem myši na řádek [Edit the properties... (nebo na něj klepněte pravým tlačítkem a vyberte Navigation Bar properties, vlastnosti panelu pro navigaci). Otevře se dialogové okno, které si popíšeme trochu blíže: Část Hyperlinks to add to page (odkazy, které budou přidány na stránku): - Parent level (rodičovská úroveň) - Same level (stejná úroveň) - Back and next (předchozí a další) - Child level (dceřiná úroveň) - Top level (vrcholová úroveň) - Child pages under Home (dceřinná úroveň domovské stránky) Těmito přepínači si můžete vybrat, na kterou úroveň stránek, vzhledem k aktuální stránce, chcete odkazy vložit. Navíc můžete zaškrtnutím políček přidat odkaz na domovskou stránku nebo stránku rodiče. Vše, co zadáte, se graficky zobrazí na schématu vlevo. Přitom obdélníček s tmavým rámečkem symbolizuje postavení výchozí stránky, tmavý obdélníček je stránka, na kterou bude navigační prvek přidán. V dolní části můžete nastavit orientaci navigačních prvků vodorovně nebo svisle, a provedení jako text nebo tlačítko (Buttons) 25

26 MS FrontPage 2000 V našem jednoduchém případě nám podle tohoto schématu postačí vybrat poslední přepínač Child pages under Home (dceřinná úroveň domovské stránky) a zaškrtnout pouze Home Page. Pro navigační prvky umístěné v záhlaví stránky má smysl zvolit vodorovnou (Horizontal) orientaci a vybereme si prvky provedené jako tlačítka (Buttons). A takto vypadá výsledek: Jak vidíte, automaticky se vytvořila tlačítka, která by nás měla přepnout na některou jinou stránku. Na tlačítkách již jsou v podstatě bez našeho přičinění uvedeny názvy stránek, které se převzaly z titulků. V případě domovské stránky se objevuje název Home. Pokud ho chcete změnit, otevřete příkazem Tools > Web Settings dialogové okno Web settings (nastavení webu) a zde na kartě Navigation změňte text u položky Home, například na Domů. Tím jsme v podstatě u konce s nastavením záhlaví naší domovské stránky. Jak to ale bude s ostatními stránkami? Nejlépe bude prohlédnout si práci na listu Preview nebo příkazem File > Preview in Browser přímo v prohlížeči. V prohlížeči zaregistrujeme několik věcí: 1. Navigace bez našeho většího přispění skutečně funguje. 2. Zavazí nám obrázek, který zakrývá první tlačítko 3. K našemu překvapení se záhlaví, které jsme vytvořili na jedné stránce, opakuje i na všech stránkách ostatních, a i na těchto stránkách je plně funkční. 26

27 Vylepšujeme web S obrázkem si nemusíme příliš lámat hlavu. Buďto zvětšíme mezeru mezi obrázkem a tlačítky třeba vložením prázdného řádku za text na mé stránce obrázků z dovolených. nebo změníme umístění obrázku. Obrázek jsme sice původně vložili na místo v textu, ale můžeme ho v podstatě posunout kamkoliv. Klepněte na obrázek, tím ho vyberete a nyní klepněte na tlačítko Position Absolutely (volné umístění). Nyní můžete obrázek tažením myší umístit do takové polohy, aby tlačítku nepřekážel. Další možností je umístit obrázek za tlačítka. Označte obrázek a klepněte na tlačítko Send Backward (přesuň dozadu). Konečně bychom mohli nastavit i průhlednost bílé plochy u dolního okraje obrázku tak, aby zakrytá část tlačítka byla vidět. (Poznámka: pokud si potřebujete osvěžit paměť, kde jsou tlačítka umístěna, podívejte se do části Možnosti FrontPage při úpravě obrázků.) Později si ukážeme práci s tabulkami, které dokáží zajistit polohu textu a obrázků asi nejlépe. Bod 1., tj. že navigace funguje, nás asi nepřekvapí, proč bychom to tak jinak dělali? Zajímavější je bod 3., že se provedená nastavení promítla i na ostatní stránky. Tato skutečnost souvisí s vlastností Shared Borders (sdílené okraje), ke které se podrobněji dostaneme později. Vlastnost Shared Borders byla nastavena díky použití šablony. Každá věc má ale i svůj rub: nastavení, která provedete, jsou v rámci tohoto webu společná. To znamená, že pokud nějakým způsobem nakonfigurujete navigační panel např. tak, jako my s použitím tlačítek Child pages under Home (dceřinná úroveň domovské stránky) a Home Page bude to asi na webu s více stránkami fungovat. Pokud byste ale chtěli třeba na jedné stránce přecházet na stránky na stejné úrovni (Same level) a na jiné zahrnout např. rodičovskou stránku (Parent level), nepůjde to. Nastavení jsou jednotná, jde vlastně o jedno nastavení. Přitom pokud nebude určitá možnost reálná, např. neexistuje nadřazená stránka pro domovskou stránku, navigační panel se nezobrazí. Máte ale možnost se pokusit provést nastavení tak, aby vyhovovalo většině stránek a např. na domovské, nebo naopak na posledních stránkách stromové struktury příslušný sdílený okraj vypnout. U domovské stránky, která může mít poněkud odlišný vzhled od ostatních (např. větší logo, větší nadpis apod.) to vůbec nemusí být na závadu. Je také možné zkombinovat horní a levý okraj a na každém mít jinak nakonfigurovaný navigační panel. Na levém panelu můžete obsluhovat např. horizontální pohyb po stejné úrovni a na horním panelu mohou být tlačítka pro vertikální posuny a pro přechod na některé pevně vybrané stránky. Tímto způsobem lze i v komplikovanějších případech využít možnosti automatického vytvoření navigace. Témata I když Microsoft v aplikacích Office používá pro tuto vlastnost označení motiv, já zůstanu u označení téma, protože je podobnější anglickému Theme. Pokud se nám nelíbí grafika stránek, ani v tomto případě není nutné pouštět se do složitých úprav. FrontPage nabízí velké množství tzv. témat. Jde o varianty grafického provedení jednotlivých objektů na ploše, obrázku na pozadí stránek a podobně. Příkazem Format > Theme otevřete dialogové okno Themes. 27

28 MS FrontPage 2000 V dialogu je možné především nastavit rozsah stránek, pro které se grafické provedení změní: - All pages změna bude provedena jednotně na všech stránkách - Selected pages změna se bude dotýkat pouze aktuálně vybraných stránek V zájmu celkově jednotného vzhledu stránek bych doporučoval použít tlačítko All pages. Podívejme se na to, jaké možnosti vám FrontPage poskytuje. Po otevření okna budete muset chvilku počkat, než budou všechna témata, která jsou k dispozici, načtena. Po načtení se v seznamu na levém okraji okna objeví přehled všech témat. Klepněte na jedno z nich a v ploše Sample of Theme se vykreslí ukázka grafického ztvárnění stránky. Pro rychlejší procházení seznamem použijte místo klepnutí myší kurzorové šipky nahoru a dolů. 28

29 Vylepšujeme web Takto se vám zobrazí jednotlivá témata v ukázce. Toto grafické provedení není definitivní a neměnné. Tvoří vlastně jenom základ grafiky vaší stránky a můžete provádět další vlastní úpravy. Tyto úpravy lze provést jak na stránkách nástroji pro formátování, tak i přímo zde v okně Themes. Možnosti úprav jsou natolik rozsáhlé, že se jim budu věnovat poněkud podrobněji. Klepněte na tlačítko Modify (upravit) a zobrazí se přídavný panel nástrojů. Zde najdete nabídku tří možných úprav, na které se nyní podíváme. Colors Toto tlačítko umožní pozměnit základní nastavení barev textu a některých grafických prvků. 29

30 MS FrontPage 2000 V dialogovém okně Modify Theme můžete pracovat na celkem třech kartách: Color Schemes, Color Wheel a Custom. Na kartě Color schemes (barevné schéma) můžete pozměnit použité barvy aktuálního tématu podle nastavení barev z tématu jiného.karta Color Wheel vám dovolí libovolně modifikovat barvy použité ve schématu. A konečně máte k dispozici karu Custom, na které si můžete vybrat přímo jednotlivý prvek a pro něj nastavit barvu (na obrázku se nastavuje barva titulku stránky Banner Text): Pictures Dalším tlačítkem v základním dialogovém okně Themes je tlačítko Pictures. Pomocí něho můžete obměňovat tvar všech grafických prvků, které jsou na stránce použity. 30

31 Vylepšujeme web V rozbalovacím seznamu Item si vyberte položku, kterou chcete změnit. Nebudu zde uvádět překlady názvů, protože každý prvek v ukázce na pravě polovině dialogového okna má uvedenu popisku. Chcete-li tedy změnit např. grafický vzhled titulku, vyberte v rozbalovacím seznamu Item položku Banner. Na kartě Picture se popiska u textového pole změní na Banner a můžete buďto zadat název obrázku ve formátu gif, který chcete použít, nebo ho vyhledat tlačítkem Browse. Ve vyhledávacím okně máte nabídku obrázků, které jsou dostupné přímo ve vašem webu, můžete ale použít tlačítko pro vyhledání jak na internetu, tak i na pevném disku počítače. Obrázek, který použijete nemusí být ve formátu gif, ale bude do něj převeden. Připomínám pouze, že gif obrázek podporuje max. 256 barev a proto může při konverzi dojít ke ztrátě barevné kvality obrázku. Za vhodnější považuji provést úpravu obrázku, tj. nastavení přesných rozměrů a barev mimo FrontPage v některém grafickém editoru. Na kartě Font můžete nastavit písmo použité pro příslušné texty na grafickém prvku. Text Posledním tlačítkem pro úpravy tématu je tlačítko Text. V dialogovém okně, které se zobrazí můžete nastavit písmo pro každý styl textu, který se používá na vaší stránce, tj. normální text, nadpis 1... Písmo je možné později změnit, ale zde provedete počáteční nastavení tak, jak vám budou většinou vyhovovat. Uložení vlastního tématu Jakmile provedete některé změny v nastavení barev, obrázků nebo textu, objeví se na panelu v dialogovém okně Themes další dvě tlačítka: Save (uložit) a Save as (uložit jako). Tlačítkem Save byste provedli změnu zabudovaného tématu a proto doporučuji zvolit Save as, které uloží změny jako uživatelem definovaný styl pod zadaným jménem. Podobně jako u práce se šablonami, ani zde se numusíte starat o místo uložení. Uživatelská témata jsou automaticky ukládána do složky C:\Windows\Application Data\Microsoft \Motivy do složek, které jsou označovány podle zadaného názvu uživatelem vytvořeného tématu. Na začátku této části jsem se zmínil o počeštění Theme na Motiv v aplikacích Office, zde vidíte, že i složka, ve které jsou motivy/témata uloženy, má český název. Ale určitě nepoužívejte český název pro vlastní vytvořené téma. Název se sice bude správně zobrazovat v seznamu témat, ale v názvu podsložky, ve které bude na disku uložen, i vlastního souboru budou české znaky a mezery nahrazeny krátkou pomlčkou. Tabulky Pokud jsme s globálními úpravami vzhledu našeho webu spokojeni, můžeme se pustit do práce na stránkách. Je zapotřebí si uvědomit, že základem HTML stránek je vlastně textová stránka. Pomineme-li různá vylepšení, jde o plynulý text, do kterého jsou vkládány např. obrázky. Rozvržení textu na stránce je do značné míry vázáno na velikost stránky. To, jestli bude obsah znázorněn třemi řádky nebo se vejde na jeden, je dáno aktuální velikostí okna prohlížeče, použitým rozlišením a nastavenou velikostí písma. To je velmi nepříjemné, pokud chcete zachovat určité grafické vztahy mezi určitými objekty. Vzpomeňte si například, jak se nám při menším okně prohlížeče posunul text titulku stránky až do vloženého obrázku. Je řada způsobů jak dosáhnout zachování určitého nastavení. Jedním z nejpoužívanějších způsobů, a současně i velmi jednoduchých, je použití tabulek. Podívejme se na stránku Photo Album tak, jak ji vytvořil průvodce. 31

32 MS FrontPage 2000 Na stránce je stávající úvodní text a obrázky ze šablony, kterou jsme použili. Já bych raději zvolil nějaké jiné uspořádání, třeba obrázky vlevo a u nich popisy na pravé straně Upravíme nejprve úvodní text na stránce. Podle potřeby můžete formátovat jak text použitím jiného písma, tak i odstavce použitím stylů. Tento způsob práce je velmi podobný např. práci ve Wordu a asi je zbytečné se jím blíže zabývat. Snad ještě poznámku o nastavení jazyka. Pokud chcete nastavit češtinu pro aktuální stránku pro kontrolu pravopisu, klepněte na stránce pravým tlačítkem a z místní nabídky vyberte Page Properties. Klepněte na ouškou karty Language a v rozbalovacím seznamu nastavte Czech. Podívejme se blíže na použití tabulek. Klepněte na místo, kam chcete vložit tabulku. Tabulku můžete vložit v podstatě kamkoliv v existujícím textu. Můžete používat i tabulky vložené v buňkách tabulky. Můžete slučovat jednotlivé buňky dohromady atd. Pokud je vám známá práce s tabulkami ve Wordu, využijete tyto znalosti i zde. Příkazem Table > Insert > Table otevřete dialogové okno pro nastavení základních parametrů tabulky. Později můžete měnit jak počet řádků a sloupců, tak i vzhled tabulky. Zadejte základní parametry tabulky. Hodnota Cell padding upravuje vzdálenost mezi obsahem buňky a okrajem buňky. Definuje tedy jakýsi vnitřní okraj. Cell spacing udává vzdálenost mezi jednotlivými buňkami. Pokud zadáte hodnotu větší než 0, budou mezi buňkami mezery. 32

33 Vylepšujeme web Takto vypadá tabulka, kterou jsme právě vytvořili. Nyní můžeme do buněk v tabulce vkládat údaje. Do buněk v levém sloupci budeme vkládat obrázky a vpravo napíšeme doprovodné texty. Obrázky vložíme do buněk způsobem, který jsme si již ukázali nejjednodušeji tlačítkem Insert Picture from File z panelu nástrojů. Jakmile je obrázek vložen, zobrazí se ve skutečné velikosti, která je pro nás nepřijatelná. Proto na vložený obrázek ihned po vložení klepnete myší a klepnete na tlačítko Auto Thumbnail na panelu nástrojů Pictures (viz také dříve uvedená část Možnosti FrontPage při úpravě obrázků). Tím z obrázku vytvoříte miniatury. Pokud chcete upravit velikosti těchto náhledových obrázků, použijte k tomu dialog Auto Thumbnails na stejnojmenné kartě okna Page Options zobrazeného příkazem Tools > Page Options. Tím dosáhnete požadovaného vzhledu obrázků. Pro úpravu rozměrů buněk ve vodorovném směru najedete kurzorem myši na dělicí čáru a jakmile se kurzor změní na dvojitou šipku, stisknete levé tlačítko myši a přetáhnete čáru do potřebné polohy. Dělicí čáru nemůžete u obrázku přetáhnout dál, než dovolí zadaný rozměr a definovaná hodnota vnitřního okraje Cell padding. 33

34 MS FrontPage 2000 Po této úpravě a vložení textu bude naše stránka vypadat takto: Obrázky už mají jakýs takýs konzistentní vzhled, možná ruší čáry kolem a nastavení pevné šířky tabulky. Zkusíme parametry tabulky upravit. Klepněte pravým tlačítkem myši na tabulku a z místní nabídky vyberte Table Properties (nebo příkazem Table > Properties > Table). V dialogu jsem pozměnil oproti původnímu zadání tabulky a nastavil: - Borders > Size na 0, aby se vůbec nezobrazovaly okraje buněk. - zaškrtl jsem políčko Use background picture a tlačítkem Browse jsem vybral obrázek pro pozadí celé tabulky. Protože se jednalo u původně obrázek ve formátu TIF, upravil jsem ho pomocí tlačítka Properties. 34

35 Vylepšujeme web Protože se jedná o fotografii, zvolil jsem jako vhodný formát JPEG, který je právě pro fotografie optimalizován. Formát PNG nedoporučuji, přestože dává velmi dobré výsledky, protože ho neumí zobrazit starší prohlížeče. Jako další úpravy jsem všechny texty v tabulce převedl na bílé a tučné písmo. Takhle vypadá naše tabulka po provedených úpravách. Pokud budete chtít tabulku upravit, například přidat řádky nebo sloupce, klepněte na tabulku a použijte příkaz Table > Insert a zvolte položku podle potřeby. 35

36 MS FrontPage 2000 Ještě poznámka k použití obrázků: pokud jsou originály obrázků ve formátu jiném než GIF, JPG (nebo PNG ) a použijete pro jejich zobrazení na stránce miniatury (Thumbnail), budou tyto náhledy vytvořeny podle nastavení na kartě Auto Thumbnails okna Page Options. Jakmile ale klepnete na miniaturu, bude se chtít otevřít plná verze obrázku a zobrazí se dialogové okno s dotazem, zda chce návštěvník obrázek otevřít ze serveru nebo stáhnou na svůj počítač. Toto je okno, které se zobrazí při pokusu otevřít obrázek, který není v jednom z implicitních webových formátů GIF, JPG a PNG. Tento postup je vhodný, pokud chcete poskytnout uživateli kvalitní obrázek třebo pro potřeby tisku. Pokud ale jde pouze o prohlížení, je to zbytečné a bude to velmi zdržovat. Pro běžnou potřebu se u fotografií bude vždy hodit formát JPG, u kterého můžete nastavit kvalitu při převodu z původního TIFu. Na druhou stranu tím, že se obrázky JPG, GIF a PNG stahují okamžitě při přístupu na stránku, se zase pozdrží prvotní natažení stránek. Vyberte si. K čemu všemu dalšímu jsou vhodné tabulky: samozřejmě pro klasické tabulky, uspořádání textu do více sloupců, tzv. klikací mapy, jednoznačné rozmístění objektů na stránce... Připomínám, že nastavením tloušťky okraje (Borders > Size) na 0, nebudou oddělovací čáry vidět a tabulka vůbec nebude vypadat jako tabulka. Doporučuji prohlédnout si ukázky šablon, kde je v celé řadě případů tabulka použita. Jako dobrou ukázku práce s tabulkami doporučuji některé pasáže naší knihy HTML kouzla na Webu. Hotspot Pod tímto podivným názvem se skrývá možnost vytvářet aktivní oblasti na obrázcích. Můžete tak nabídnou uživateli obrázek, jehož některé části budou schopny provádět předem definované činnosti. Tyto tzv. klikací mapy byly (a jsou) značně oblíbené i zatracované. Pokud je použijete, měli byste návštěvníkovi jasně ukázat, co by mělo být předmětem jeho zájmu, jinak bude přemítat, proč mu zobrazujete obrázek, když on očekává navigační tlačítka. Podívejte se např. na web kde je navigace jasná zajímá mě určitý časopis, tak na jeho logo klepnu. V tomto případě je navigace výmluvnější než jakékoliv tlačítko. 36

37 Vylepšujeme web V našem případě, kdy máme fotografie z různých dovolených po celé Evropě můžeme použít třeba mapu Evropy jako základ a hotspot přidat do míst, kde jsme byli a odkud máme obrázky. Obrázek mapy jsem předem upravil v grafickém editoru tak, že na místech, ze kterých budu dělat odkazy je výraznější barva a kolečko. Na tato místa umístíme hotspot. Klepněte na obrázek a tím zobrazíte panel nástrojů Picture. Na panelu nástrojů vyberte ikonu pro Circular Hotspot kruhová aktivní plocha. Kolem míst, která máme na mapě již předznačena vytáhneme postupně tímto nástrojem aktivní oblasti. Já jsem je udělal trochu větší, aby kurzor změnil svoji podobu dříve velmi špatné jsou příliš malé hotspoty, které se obtížně hledají, zvláště pokud nejsou jinak vyznačeny. Pokud budete potřebovat hotspot posunout, použijte k tomu nástroj Select výběr z panelu Picture. Jakmile vytáhnete první hotspot, otevře se dialogové okno, ve kterém jste vyzváni k zadání odkazu. Můžete v podstatě zadat cokoliv odkaz na existující stránku, dokuemnt na webu nebo na disku vašeho počítače... V našem případě budeme postupně přiřazovat stránky s fotografiemi, např. itálie99.htm apod. Šikovnou možností je i použití tlačítka s ikonou prázdné stránky, které umožní vytvořit novou prázdnou stránku ihned a současně odkaz na ni. To znamená, že nemusíte přerušit práci s vytvářením hotspot vždy, když zjistíte, že ještě nemáte vytvořenu stránku, na kterou se chcete odkazovat. 37

38 MS FrontPage 2000 Zde je vybrána stránka alpy99.htm a na ni bude směřovat odkaz. Čtyři tlačítka vpravo od textového pole URL vám umožňují vyhledat dokument na Webu, pomocí Průzkumníka na vašem počítači, odeslat zprávu elektronickou poštou nebo vytvořit novou stránku a na ni směřovat odkaz. V předchozím dialogu jste si mohli všimnout i políčka Target frame (cílový rám, okno) s tlačítkem s ikonou tužky. Toto tlačítko použijete k otevření nového dialogu, ve kterém můžete zadat způsob, jak se zobrazí odkazovaná stránka, když v prohlížeči klepnete na hotspot. První možnost říká, že dokument bude zobrazen podle přednastavení stránky (k tomuto nastavení můžete použít zaškrtávací políčko vlevo dole zvolte některou možnost, zaškrtněte políčko a klepněte na OK. Toto implicitní nastavení můžete samozřejmě kdykoliv změnit, můžete ho změnit i pro jednotlivé hotspoty). Protože rámy nebudou předmětem této brožury, uvedu pouze možnost: - Whole Page v celostránkovém zobrazení - New Window v novém okně prohlížeče Odkazy můžete kdykoliv upravit. Stačí klepnout na obrázek, nástrojem Select pravým tlačítkem klepnout na hotspot a zvolit Pictures Hotspot Properties nebo Hyperlink. Dostanete se do dialogu, ve kterém můžete změnit nastavení odkazu. Pokud nemáte hotspoty nějak výrazně označeny, můžete si pomoci tlačítkem Highlight Hotspots, které všechny aktivní plochy s odkazy v obrázku zvýrazní. 38

39 Web na zelené louce Web na zelené louce Jednoduchý web jsem již dokázali vytvořit, což tak něco složitějšího? Uděláme si web pro knižní vydavatelství UNISP. A začneme z ničeho, i když jsme si již ukázali použití vzorových webů, které jsou k dispozici přímo ve FrontPage a jejichž použití může výrazně zkrátit dobu pro vytváření webu. Vytvoření nového webu Spustíme FrontPage a zvolíme File > New > Web. V nabídce průvodců pro vytvoření nového webu vybereme Empty web (prázdný web) a klepneme na tlačítko OK. V panelu zobrazení Views klepněte na tlačítko Navigation. Pracovní plocha obsahuje pouze instrukci pro další postup. Jak můžeme vidět, byla vytvořena pouze základní struktura adresářů, jinak je náš web zcela prázdný. Text na ploše říká pro vytvoření domovské stránky klepněte na tlačítko New Page. 39

40 Domovská stránka MS FrontPage 2000 Prvním krokem bude tedy vložení domovské stránky. Klepněte na tlačítko New page na panelu nástrojů. Pokud bychom chtěli použít některou předdefinovanou nebo vlastní šablonu, použili bychom místo toho příkaz File > New > Page. Jedním nebo druhým způsobem vytvoříme novou stránku, která obsahuje v tomto zobrazení malou ikonu domečku na znamení, že se jedná o domovskou stránku vytvářeného webu. Doplnění stránek Pod touto domovskou stránkou bychom chtěli vytvořit tři stránky nabízených produktů: Novinky, Knihy a PCWE (PCWorld Edition). Klepněte myší na obdélníček domovské stránky a třikrát klepněte na tlačítko New. Jak vidíte na obrázku, doplnili jsme tři nové stránky, jejichž rodičovskou stránkou (tj. přímým předchůdcem) je domovská stránka. Názvy stránek New Page 1... změníme podle jednotlivých produktů. Pozor ale na to, že jednou věcí je název (Title) stránky a druhou je název souboru, ve kterém je stránka umístěna. Při vytvoření měla stránka název např. New Page 1 a zatím nebyla umístěna v žádném souboru podívejte se na předchozí obrázek. Ve složce mujweb6 zatím žádné soubory pro stránky New Page 1 až New Page 3 nejsou. 40

41 Web na zelené louce Názvy souborů se generují z aktuálních titulků stránek. Pokud si chcete ušetřit práci, je dobré vědět, že struktura souborů se vytváří až v okamžiku, kdy buďto web uložíte nebo když přepnete zobrazení z režimu Navigation na jiné, např. Page. Pokud tedy nejdříve změníte titulek stránky a potom teprve přejdete do jiného zobrazení, budou si vzájemně názvy souborů a titulky stránek odpovídat. Pokud teprve následně změním název stránky, název souboru zůstává již beze změny. Pokud byste chtěli přizpůsobit i název souboru, udělejte to v některém z prostředí FrontPage, ne například pomocí Průzkumníka. Změny provedené ve FrontPage se aktualizují automaticky, změny které provedete mimo FrontPage mohou narušit konzistentnost vašeho webu. Všimněte si, že v místní nabídce přidaných stránek není ihned po vytvoření stránky k dispozici příkaz Properties (vlastnosti). Ten se zpřístupní teprve až bude vytvořen odpovídající soubor htm. Vedle přejmenování můžete umístit soubory, které patří k jedné stránce, třeba i do vlastní složky. Stačí například ve zobrazení Folder list (seznam složek) klepnout pravým tlačítkem na složku, pod kterou chcete vytvořit nový adresář. Z místní nabídky zvolte New folder (nový adresář). Změnit název takto vytvořené složky můžete např. pomocí místní nabídky (pravé klepnutí na složku a příkaz Rename) nebo složku označíte a ještě jednou klepnete na název. Já jsem v ukázce nazval tuto složku Novinky a přetáhl jsem do ní myší soubor new_page_1.htm, který je možné také přejmenovat na Novinky.htm. Záleží pouze na vás, ale je velmi záhodno udržovat pořádek a přehled jak ve složkách, tak i v souborech na webu. 41

42 MS FrontPage 2000 Ke stránce KNIHY bych chtěl přidat ještě členění podle kategorií, např. Grafika, Operační systémy, Office a případně další. Přidám tedy odpovídající stránky. Tím jsme vytvořili základní schéma našeho webu a můžeme přistoupit k vytvoření obsahu a nástrojů pro pohyb mezi stránkami. Začněme právě tím posledně jmenovaným navigací. Navigace Někde na začátku této brožury jsem se zmínil, že Web představuje obrovské množství dokumentů rozmístěných po počítačích (webových serverech) po celém světě. Každý dokument má svoje umístění a je dostupný prostřednictvím URL. Stejně tak je možné přistupovat i k jednotlivým stránkám vašeho webu prostřednictvím URL, ale to by obecně nebylo příliš šťastné řešení, navíc by uživatelé webu museli znát i názvy souborů. Podívejte se například na strukturu našeho knižního webu. Pokud byste chtěli zobrazit například stránku KNIHY, museli byste použít URL ve tvaru Zde zastupuje unispubl název našeho webu (v mém konkrétním případě je to adresa, na které je umístěna domovská stránka na mém Personal Web Serveru). Rozumnějším řešením je doplnit stránky o odkazy, pomocí kterých se můžete pohybovat po jednotlivých stránkách našeho webu, ale i mimo něj. Na druhou stranu se vám někdy může hodit i to, že některé stránky, na které nebudou přímo ukazovat odkazy a navigační prvky z jiných stránek, nejsou běžně dostupné, ale uživatel, který zná URL, se na ně může bez problémů podívat. Můžete mít např. tímto způsobem vytvořeny "soukromé" stránky pro některé zákazníky apod. Uvozovky jsou zde proto, že tento způsob důvěrné komunikace není vůbec bezpečný. Navigaci mezi stránkami, tak jak jsme o ní mluvili, je možné doplnit ručně, ale my využijeme toho, co nám nabízí FrontPage tj. automaticky generovaný navigační panel. K tomu, abychom mohli velmi snadno tuto možnost použít, využijeme další z prvků nabízených FrontPagem tzv. sdílené (společné) okraje, Shared Brorders. Z nabídky Format vybereme příkaz Shared Borders a podíváme se, co nabízí dialogové okno, které se otevře. 42

43 Web na zelené louce V dialogu Shared Borders máte především možnost nadefinovat, zda toto nastavení platí pro všechny (All pages) nebo pouze pro vybrané stránky (Selected pages). Dále můžete určit, u kterého (nebo kterých okrajů) chcete sdílené okraje vytvořit. K dispozici máte volby Top (nahoře), Left (vlevo), Right (vpravo) a konečně Bottom (dole). Je zapotřebí si uvědomit, že existuje jakási významová hierarchie pro tato umístění. Nejvýznamnější je horní a potom levý okraj, které se používají pro základní a nejdůležitější informace a pro umístění navigačních panelů. Dolní okraj se používá spíše jako místo pro sdělení druhotných informací (např. spojení na webmastera apod.), bývají zde navigační prvky vztahující se k tomuto dokumentu (přechod nahoru...), pravý okraj mívá funkci nástěnky bývají zde různé zajímavé informace, speciální nabídky... Pro nás jsou zajímavá zaškrtávací políčka Include Navigation buttons, tj. zahrnout i tlačítka pro navigaci. Zaškrtneme obě dvě a klepněte na OK. Protože jsme nastavili platnost pro všechny stránky (All pages), bude toto nastavení platit pro všechny stránky, které jsou zahrnuty do navigační struktury. Později je možné nastavit každou stránku individuálně v tom smyslu, že na ní můžeme zobrazování jednoho nebo obou sdílených okrajů vypustit. K tomu, jak vypustit stránku z navigační struktury, se dostanu později. Zde na obrázku už je upraven titulek stránky (Page Banner), tento postup jsme si ukázali už v minulé kapitole, proto se jím nezabývám. Na prázdné stránce index.htm máme zatím titulek, jeden hotový navigační blok a druhý, který potřebuje upravit vlastnosti, aby mohl být regulérně zobrazen (zatím je místo něho napsán již známý text [Edit the properties... 43

44 MS FrontPage 2000 Nastavení navigačního panelu provedeme opět pomocí místní nabídky. Pravým tlačítkem klepněte na text [Edit the Properties... a vyberte příkaz Navigation Bar Properties. Pokud byste nerespektovali upozornění na potřebu úpravy navigačního panelu, pravděpodobně byste v definitivním zobrazení v prohlížeči žádná navigační tlačítka v tomto případě neviděli. Toto už je nám známé okno vlastností navigačního tlačítka. Připomenu pouze jedinou věc: můžete nastavit, zda si přejete zobrazovat nebo ne sdílené okraje na konkrétní stránce. Nemůžete ale různě nastavit navigační panel v jednom okraji pro různé stránky. Nastavení navigačního panelu je společné pro všechny stránky, na kterých je příslušný sdílený okraj zapnut. Obvykle je možné individuálně řešit úpravu domovské stránky. Vedle toho, že odstraníte celý sdílený okraj z některé stránky, máte k dispozici i možnost vyjmout stránku z navigační struktury. Přepněte se do pohledu Navigation, kde uvidíte přehledně celou strukturu webu. Pravým tlačítkem klepněte na stránku, kterou chcete vyjmout z navigační struktury, a nyní buďte opatrní. První přepínač vám nabízí možnost Remove this page from all navigation bars, tedy odstranit tuto stránku ze všech navigačních panelů, a to je volba, kterou chcete použít. Druhý přepínač Delete this page from the Web odstraní aktuální stránku z webu, stránka již nebude existovat. Na tuto operace nemůžete použít funkci Undo, stránku již zpět nevrátíte, byla definitivně zrušena. 44

45 Web na zelené louce Pokud je stránka, kterou odstraňujete (ať již z navigační struktury nebo absolutně z webu), rodičovskou stránkou celé větvě, bude dialog vypadat takto: Úvodní text vás informuje, že z vybrané stránky vychází další stránky. První přepínač má stejnou funkci jako v předchozím případě, ale bude z navigační struktury odstraněna i celá navazující větev. Druhý přepínač odstraní bez návratu vybranou stránku a celou větev stránek pod ní z webu. Jaké jsou ale ještě jiné možnosti, jak jednoduše vyřešit navigaci? FrontPage jich nabízí celou řadu. My si ukážeme jenom dvě ukázky. U dalších postupů jsem zvolil jedno z přednastavených témat, aby tlačítka na stránce vypadala trochu jinak než jenom jako prosté texty v závorce (příkazem Format > Theme otevřete dialog Themes a ze seznamu si vyberete to, které nejlépe splňuje vaše představy). Samostatný navigační panel Navigační panel nemusí být samozřejmě součástí pouze sdíleného okraje. Můžete ho umístit v podstatě libovolně na stránku a v takovém případě ho můžete zcela individuálně nakonfigurovat na každé stránce, kam ho dáte. Bylo by samozřejmě vhodné, aby byl panel na každé stránce umístěn stejně. Zde by se hodilo vytvořit uživatelskou šablonu. Navigační panel vložíte na místo kurzoru na stránce příkazem Insert > Navigation Bar. Pokud chcete navigační panel na umístit jinak, postupujte takto: Klepněte na objekt navigačního panelu. Příkazem Format > Position otevřete dialogové okno Position. Zde klepněte buďto na obrázek s popiskou Absolute (pro umístění na stránce bez ohledu na rozmístění textu) nebo Relativ (můžete zadat umístění objektu jako vzdálenost od polohy místa textu, ke kterému je svázán). Pokud jste zvolili Absolute najeďte kurzorem myši těsně k okraji vybraného objektu navigačního panelu. Musíte najít takovou polohu, kdy kurzor nemá tvar tvar ruky s visačkou, ale změní se na směrový kříž. Potom můžete přetáhnout panel do libovolné polohy. Je také možné zadat přímo souřadnice polohy v dialogu Position. 45

46 Obsah MS FrontPage 2000 Jinou možností je použití tzv. obsahu. Umístěte kurzor do místa na stránce, kam chcete vložit obsah webu. Pokud zvolíte místo ve sdíleném okraji, bude se obsah zobrazovat na všech stranách, kde je tento okraj zapnut. Pokud zvolíte plochu mimo sdílené okraje, bude se nastavení týkat pouze aktuální stránky. Příkazem Inser > Component > Table of Contents otevřete následující dialog. (Poznamenávám, že přidání obsahu je součástí tzv. Front Page Server Extension, viz úvodní část brožury.) V tomto dialogu nastavíte nejprve stránku, na které začne obsah. Může, ale nemusí to být nejvyšší stránka ve struktuře. Pokud neznáte název souboru, vyhledáte ho pomocí tlačítka Browse. Další zaškrtávací políčka znamenají: - Show each page only one každá stránka bude zobrazeno pouz jednou, i když se ve struktuře může objevovat vícekrát. - Show pages with no incoming hyperlinks zobrazovat i stránky, na které nesměřuje žádný odkaz - Recompute table... obsah bude upraven vždy, když bude editována jakákoliv jiná stránka. 46

47 Web na zelené louce Po odklepnutí OK se v pracovní ploše stránky zobrazí vložený prvek obsah (Table of Content): Nesmíte se nechat mýlit zobrazením, pokud si chcete prohlédnout, co bylo na vaši stránku skutečně vloženo, musíte přejít do prohlížeče. Nestačí ani přechod na list Preview. Použijte příkaz File > Preview in Browser. Takto vypadá skutečné zobrazení obsahu, který jsme vložili na stránku. Pokud byste chtěli nastavení změnit, klepněte v pracovní ploše stránky na objekt Table of Content pravým tlačítkem a příkazem Table of Content Properties se dostanete do již známého dialogu, ve kterém můžete pozměnit nastavení. Všimněte si například, že i když jsme vlastně na domovské stránce, v seznamu nám "straší" odkaz na Home Page. Pokud byste chtěli tento vlastně zbytečný odkaz odstranit, stačí nastavit v dialogu Table of Contents Properties velikost písma v rozbalovacím seznamu Heading Font Size na none. Pokud chcete změnit umístění (možná již po několikáté upozorňuji na to, že vše je svázáno s místem v textovém dokumentu, kde byl kurzor v okamžiku, kdy jste vkládali např. objekt obsahu) označte klepnutím objekt obsahu a příkazem Format > Position otevřete dialogové okno, které jsme si vysvětlovali již v případě 47

48 MS FrontPage 2000 umisťování navigačních tlačítek. Zvolíte-li v tomto dialogu jako umístění Absolute, můžete v podstatě přetáhnout obsah kamkoliv na stránku. Dovolím si na tomto místě malé upozornění. Pokud pracujete se sdílenými okraji (Shared Borders) je součástí těchto okrajů to, co vytvoříte, vložíte... přímo na příslušném okraji. Pokud vložíte nějaký prvek do vlastní stránky a potom ho přetáhnete na sdílený okraj, není tento prvek součástí okraje a nebude se automaticky na jiných stránkách zobrazovat. Pokud chcete změnit příslušnost prvku (obrázku, obsahu, panelu navigace...), vyjměte ho z původního umístění a vložte na jiné cílové místo. Provedete to třeba tak, že na prvek klepnete pravým tlačítkem, z místní nabídky vyberete Cut (vyjmout), klepnete pravým tlačítkem myši na nové místo (např. na sdíleném okraji) a zvolíte příkaz Paste (vložit). K dispozici jsou samozřejmě i klávesové zkratky Ctrl+X, Ctrl+C a Ctrl+V pro vyjmutí, kopírování a vložení. A ještě jedna poznámka možnost volného umístění se zachováním příslušnosti k původnímu umístění můžete využít i pro opačný případ. Můžete např. chtít na všech stránkách zobrazovat určitý prvek mimo oblast sdílených okrajů. Je možné takovýto prvek vytvořit (např. vložením obrázku) na sdílený okraj a následně ho přetáhnout jinam. Ať již bude nově prvek umístěn na sdíleném okraji nebo ne, bude součástí okraje a proto se bude zobrazovat na všech stránkách, kde je tento okraj zapnut. 48

49 Databáze Databáze Ukázali jsme si na několika příkladech možnost vytvoření stránek s pevným statickým obsahem. Pokud budete chtít takové stránky změnit, musíte je nahradit novými. To je sice použitelné třeba v případě, kdy na Webu představuji fotografie z dovolené a stránky budu aktualizovat jednou za půl roku, není to ale použitelné v případě, kdy budu chtít provádět aktualizaci třeba každý den. Předem zamítneme možnosti programování a spolehneme se pouze na to, co poskytuje FrontPage. Nalezneme zde řadu nástrojů, které k tomuto úkolu můžeme použít. Vytvořili jsme již základní stránky vydavatelství a teď bychom chtěli nějak zautomatizovat zobrazování publikací. Ideální by k tomu byla nějaká databáze, do které bychom jenom doplňovali data a webový server by již automaticky aktualizoval obsah stránek. A to vše chceme udělat bez jediného řádku programu. Před tím, než se do tohoto problému pustíme, je třeba upozornit na několik věcí. Budete potřebovat webový server, který podporuje ASP a dokáže spolupracovat i s databází, kterou použijete. Pro vytváření stránek, které si ukážeme je nutná podpora FrontPage Server Extension, není ale nutná pro vlastní běh stránek. Ukážeme si to sice ještě později, ale již teď upozorňuji, že výsledky neuvidíte ani při použití listu Preview ani příkazem File > View in Browser. Musíte stránky publikovat skutečně na webový server, samozřejmě postačí třeba i Personal Web Server (který ostatně používám já pro ukázky). Více než v jiných dosud zmíněných případech je nutné si vyzkoušet fungování s různými prohlížeči než pustíte stránky do světa. Začneme od vlastních dat, která budeme zobrazovat. Připravíme si základní údaje třeba v programu Access no dobře, už to slyším až sem, jak se všichni těšíte na Access. Tak sáhnu po něčem, co asi mají všichni. Doufám, že budete spokojeni s Excelem. Samozřejmě, že použití databázového systému Access vám poskytne větší možnosti pro řešení náročnějších úloh, je z něj blíže k nasazení MS SQL Serveru apod. Pro řadu úloh vám ale skutečně postačí jednoduché nástroje, které znáte. Otevřete Excel a vytvořte si tabulku databázi. (Já se omlouvá, že následující postup bude hodně podrobný, ale chyba v jednom kroku může znehodnotit celou práci, a pátrání po tom, kde se co špatného událo,, když nemáte dostatečně podrobný popis postupu, by bylo velmi úmorné.) Zde je jednoduchá tabulka vytvořená v Excelu. Obsahuje pouze data orientovaná po sloupcích. Sloupce tvoří tzv. pole, hodnoty v řádcích jsou potom jednotlivé záznamy (anglicky record) pro jednotlivé knihy. Důležitým krokem je označení takto vytvořené oblasti jménem. Tažením myší označte celou oblast. 49

50 MS FrontPage 2000 Příkazem Vložit > Název > Definovat otevřete základní dialog pro zadání názvu vybrané oblasti. Do textového pole napište libovolný název, který budete dále pro tuto datovou oblast používat. Klepněte na talčítko Přidat a OK. Sešit Excelu uložte, pod libovolným názvem, já jsem z nedostatku fantazie použil opět Knihy.xls. Abyste mohli data ve vašem webu používat, musíte je nejprve do webu přidat. K tomu slouží příkaz File > Import. Dialogové okno, které se tímto příkazem otevře je v podstatě velmi jednoduché. Zobrazuje seznam souborů vybraných pro import a jejich URL, tedy informace o umístění. Při otevření bude toto okno prázdné. Použijte tlačítko Add File (pro přidání jednoho souboru; pokud byste chtěli importovat celou složku máte k dispozici tlačítko Add Folder, případně pro import z umístění na Webu použijte tlačítko From Web). Dostanete se do nám již známého vyhledávacího okna, ve kterém použijete tlačítko Průzkumníka, najdete soubor Knihy.xls a odklepete OK. Práci s vyhledáváním si můžete ulehčit tím, že soubor Knihy.xls umístíte přímo do složky, ve které vytváříte diskovou verzi webu, v mém případě je to D:\ mujweb6. To ale neznamená, že jste tím zpřístupnili tento soubor pro všechny operace. Je rozdíl mezi webem a složkou na disku. Příkaz Import zajistí, že web příslušný soubor "vidí" a zařadí si ho do svých struktur. Po vybrání souboru a několikerém potvrzení OK se vrátíte do původního okna: 50

51 Databáze Toto je výsledek výběru souboru knihy.xls v původní složce. Nově zobrazená tlačítka v okně umožní: - Modify upravit označenou položku (např. změnit umístění...) - Remove odstraní položku ze seznamu. Vlastní import provedete tlačítkem OK. Po úspěšném importu datového souboru Knihy.xls umístěte kurzor na plochu stránky, kde budete chtít vytvořit datový list. Dále použijeme průvodce připojením k databázi a jejím zobrazením. Proveďte příkaz Insert > Database > Results. 51

52 MS FrontPage 2000 V tomto dialogu máte následující možnost: - použít pro vyzkoušení možností ukázkovou databázi Northwind. Pozor, pokud používáte českou verzi Office, jsou některé soubory přejmenované a budete muset provést dílčí úpravy názvů složek a souborů. - v rozbalovacím seznamu (na obrázku je neaktivní) se zobrazí aktuální připojené databáze, a z nich byste si mohli vybrat - my použijeme vytvoření nového databázového připojení (Use a new database connection) a klepnete tedy na tlačítko Create. Dostanete se do dalšího okna, ve kterém je (zatím prázdný) seznam připojení. Klepneme na Add. V tomto okně je přehled importovaných souborů, které mohou být databází ve vašem webu. Abyste soubor knihy.xls viděli, musíte jednak v dolním rozbalovacím seznamu vybrat odpovídající příponu a tím i ovladač. Pokud jste importovali jinam než do kořenové složky, musíte vyhledat soubor v odpovídající složce webu. Já doporučuji pro bezchybné fungování používat pro práci s daty kořenovou složku. Po označení souboru knihy.xls klepněte na OK. 52

53 Databáze V tomto dialogu ponecháme nastavení jaké je a pokročíme dále tlačítkem OK. Vrátili jsme se k původnímu oknu se seznamem databázových připojení našeho webu. Jak vidíme, je připojena databáze knihy. Určitě doporučuji provést ověření tohoto připojení tlačítkem Verify (ověř). Ověření databázového připojení proběhlo a je v pořádku. Můžeme pokračovat dál tlačítkem OK. 53

54 MS FrontPage 2000 A jsme v zpět v prvním kroku práce s průvodcem Database Results Wizard. Jak vidíte, vytvořili jsme úspěšně databázové připojení a můžeme pokračovat dále tlačítkem Next. Ve druhém kroku průvodce vybereme zdroj záznamů, tedy odkud budeme načítat data. Vypadá to možná trochu podivně, vždyť pracujeme s daty ze souboru knihy.xls? Je ale zapotřebí si uvědomit, že v tomto souboru může být několik pojmenovaných oblastí, nebo pokud bychom pracovali s databází vytvořenou v Accessu, měli bychom na výběr celou řadu tabulek dotazů apod. V našem případě je k dispozici pouze jediný zdroj dat a tím je pojmenovaná oblast knihy. Pokračujte tlačítkem Next. To, že je zatím vše v pořádku, signalizuje i následující okno. Vidíte zde seznam polí, která se budou zobrazovat na naší stránce. Jak je vidět, jsou zde zahrnuta všechna pole, která jsme na listu v Excelu vytvořili. Pokud byste chtěli některá z nich ze zobrazení vypustit, klepněte na tlačítko Edit list. 54

55 Databáze Ve čtvrtém kroku můžete zvolit některý z přednastavených způsobů uspořádání tabulky. Vyhnu se popisu, protože jednotlivé možnosti se přehledně zobrazují vpravo dole v ukázce. Zaškrtávací políčka znamenají: - Use table borders použít okraje tabulky. Pokud budete chtít tabulku zobrazit s linkami mezi řádky a sloupci, zaškrtněte toto políčko. V každém případě budete ještě mít možnost vzhled tabulky upravit. - Expand table to width page tabulka bude roztažena na celou šířku stránky v závislosti na aktuálním zobrazení. - Include header row with column labels zobrazí i záhlaví tabulky s popisem sloupců. V tomto posledním pátém kroku můžete zadat způsob zobrazování jednotlivých záznamů údajů o jednotlivé knize. Buďto lze zobrazovat na jedné stránce všechny záznamy a použít svislý posuvník pro pohyb po datech, nebo zvolíte, kolik záznamů se má maximálně na stránce zobrazit a po záznamech se budete pohybovat pomocí navigačních tlačítek. Já jsem ponechal možnost zobrazovat 5 záznamů současně na jedné stránce. Vše odsouhlasíme tlačítkem Finish. Nechal jsem toto okno velké, protože je důležité. Říká se v něm: "Tato stránka obsahuje komponentu, která vyžaduje jinou příponu souboru, aby mohla pracovat správně. Použijte příkaz Save As nebo přejmenujte tuto stránku a použijte příponu.asp". Soubor stránky tedy musí mít příponu asp namísto původní htm. Pokud tuto úpravu neprovedete, budete dostávat pouze chybová hlášení a správný výsledek nikdy neuvidíte. Změnu udělejte ihned, je tak důležitá, že na ni budete stále upozorňováni, jak ukazuje následující obrázek: 55

56 MS FrontPage 2000 Na obrázku je několik věcí. Šipka ukazuje, že jsem skutečně přepsal příponu souboru stránky na.asp. Přesto, že jsem to udělal, nevidíte žádná data, pouze jakousi podivnou tabulku. V ní ještě dvě žluté plochy. Tyto plochy obsahují důležitá upozornění. První říká, že to, co je zobrazeno, nebude správně fungovat, pokud nebudete zobrazovat prohlížečem z webového serveru. A znovu je zde upozornění na nutnou příponu.asp. Druhé pole pouze upozorňuje na konec databázové oblasti. Pokud se přes toto varování pokusíte zobrazit stránku např. na listu View nebo pomocí File > View in Browser, budete notně zklamáni: 56

57 Databáze To, co upozornění slibovalo, se stalo: data nejsou zobrazena! Pro regulérní zobrazení je nutno pracovat s webovým serverem, nestačí diskově orientovaný web. Musíme náš web publikovat. Já používám pro tyto účelu Personal Web Server. K publikování webu lze použít příkaz File > Publish nebo stejnojmenné tlačítko na panelu nástrojů. Nebudu zde zacházet do detailů, protože možnosti a postup publikování se může lišit případ od případu. V případě zájmu čtenářů je možné některou z dalších brožur PCWorld Edition věnovat např. problematice osobních webových serverů. Po úspěšném ukončení publikování vytvořeného webu na webový server, je možné si výsledek prohlédnout v prohlížeči. K vebu na mém osobním webovém serveru na počítači, přistupuji jako Při přechodu na stránku s vloženou databází jsou údaje zobrazeny v pořádku, jsou vidět i navigační tlačítka pro přechod na další stránky. 57

58 MS FrontPage 2000 Jaký je vlastně význam toho, co jsme zatím udělali? Nešlo to jednodušeji, beze všech těch složitostí? Mohli jsme samozřejmě takovou tabulku třeba i přímo vytvořit ve FrontPage. Tím bychom ale na stránku dostali pouze mrtvá data a v případě jakékoliv změny bychom museli opravovat stránku. Při postupu, který jsem použil v této ukázce jsou data živá, jsou uložena v souboru knihy.xls, a to, co se zobrazí na stránce se napřed přečte z uvedeného souboru. Pokusme se nyní provést nějaké změny v souboru knihy.xls. Otevřeme soubor knihy.xls a do pojmenované oblasti knihy přidáme nový řádek. Do tohoto nového záznamu vložíme data. 58

59 Databáze Porovnáte-li si oba předchozí obrázky, vidíte, že změny byly úspěšné.. Aby se ale tyto změny projevily, musíme upravený soubor dodat na webový server. V mém případě to bylo jednoduché, protože jsem měnil přímo data souboru knihy.xls umístěná ve složce na mém serveru. Pokud se bude jednat o vzdálený server buďto znovu celý web publikovat, nebo pomocí ftp přenést soubor knihy.xls nebo použít jiný způsob, který vám umožňuje váš internet provider. Změnami nemám na mysli pouze doplnění nebo úpravu dat, muže jít třeba i o seřazení, jak je ukázáno na předchozím obrázku hodnoty jsou seřazeny podle ceny. Co se ale stane, pokud doplníme do tabulky nové pole? Chtěl bych vedle stávajících údajů doplnit ještě jiné, na které jsem předem nemyslel. Doplnění v Excelu (nebo databázovém programu Access) nebude žádným problémem. Jak se ale tyto změny promítnou do našeho webu? 59

60 MS FrontPage 2000 V Excelu jsem přidal do tabulky celý sloupec. Obsahuje informace o obrázcích titulních stránek publikací. Jak je vidět, žádné změny se nezobrazily. V tomto případě nám nezbude, než se vrátit zpět do FrontPage a provést dílčí úpravy našeho webu zde. 60

61 Databáze Klepněte pravým tlačítkem někde do oblasti databáze a z místní nabídky vyberte Database Result Properties. V dialogovém okně Displayed Fields (zobrazená pole) vidíte ihned příčinu našeho neúspěchu změna, kterou jsme provedli v tabulce byla zachycena, ale pole nebylo automaticky zařazeno mezi zobrazovaná pole. Klepněte na název pole OBRAZEK a potom na tlačítko Add>>. Tím jste přidali pole OBRAZEK k seznamu zobrazovaných polí. Všimněte si také tlačítek Move Up a Move Down. Těmi můžete měnit pořadi polí v seznamu Displayed fields. Označte např. pole OBRAZEK, které se standardně přidalo na konec seznamu, a čtyřikrát klepněte na Move Up. Tím přesunete toto pole na první místo v seznamu. Zopakujeme nyní celý postup s publikováním změněného webu a podíváme se na výsledek. Změny se provedly, ale tak nějak v koutku duše jsem si myslel, že webový server pozná, že chci zobrazit obrázky titul- 61

62 MS FrontPage 2000 ních stránek, a ne názvy souborů, ve kterých jsou obrázky uloženy. Co s tím? Je vůbec možné nějak snadno obrázky zobrazit? Vyzkoušejte si tento postup. Vraťte se zpět do FrontPage a otevřete diskovou verzi webu pro úpravy. Umístěte kurzor do pole, kde je napsáno <<OBRAZEK>> a tento text smažte. 62

63 Databáze Nyní již známým postupem vložte na místo do tabulky obrázek titulní stránky první knížky Active Server Pages 3.0 ze souboru ASP.gif. Velikost obrázku je možné upravit tažením polohovacích bodů. Je v podstatě jedno, jaký obrázek použijete, protože vše se následně upraví. Já jsem prostě použil jeden z obrázků titulních stránek a převedl jsem ho pomocí tlačítka Auto Thumbnail na miniaturu, jejíž rozměry mám přednastaveny. Klepněte pravým tlačítkem na obrázek a zvolte Picture Properties. V dialogovém okně použijte tlačítko Browse pro přechod do dalšího okna. 63

64 MS FrontPage 2000 Zobrazí se toto okno pro vyhledání zdroje obrázků. Nás ale v podstatě žádné obrázky nezajímají, chceme zadat jako zdroj informace, které jsou uvedeny v databázi. Proto klepněte na tlačítko Parametrs. V tomto okně vymažte hodnotu v poli Path, pokud zde bude nějaká uvedena. Dále klepněte na tlačítko Insert Field Value (vložit hodnotu pole). Otevře se seznam názvů polí, která jsou v tabulce, kterou jsme použili pro vstup hodnot. V našem případě se otevře seznam s názvy TITUL, OBRÁZEK, STRAN, CD a CENA. Vyberte položku OBRÁZEK. Práci s dialogovým oknem ukončete pomocí OK. 64

65 Databáze Po návratu zpět do okna Picture Properties vidíte, že v řádku Picture source je uvedena zcela jiná hodnota, než původně. Výraz, který je zde napsán, přesměrovává zdroj obrázku skutečně již podle informace uvedené v poli OBRÁZEK v tabulce, která je zdrojem pro tuto datovou oblast naší stránky. V poli Text napište místo ASP.GIF něco jiného. Tento text se zobrazí, když nebude možné zobrazit požadovaný obrázek. Já jsem tam napsal Obálka. 65

66 MS FrontPage 2000 Po návratu do okna stránky vidíte, že obrázek nám zmizel a je zde pouze ikonka symbolizující jeho polohu. Abyste si mohli výsledek práce prohlédnout, musíte web opět publikovat. V prohlížeči (všimněte si opět adresy přejdete na stránku KNIHY (u mě je to dokument new_page_2.asp) a vidíte, že obrázek zde skutečně je. Máme ale několik problémů: zaprvé se zobrazil pouze jeden obrázek a místo ostatních je zobrazena ikonka chybějícího obrázku a text Obálka (viz poznámka u obrázku na předchozí straně). Obrázek je také jinak velký. První problém je dán tím, že jsem skutečně obrázky do webu neimportoval. Vrátím se proto do mého pracovního diskového webu, importuji (File > Import) sem obrázky a to do kořenové složky webu. Obrázky jsou již na správném místě. 66

67 Databáze Aby se vše zobrazovalo správně, je více než vhodné obrázky předem upravit: použijte některý z přímo podporovaných formátů webu GIF nebo JPEG (JPG). Upravte obrázky na finální velikost, např. všechny na šířku 60 pixelů. Uvědomte si, že jsme pro chybějící obálky (jde třeba o připravované tituly) použili jednotný obrázek neni.gif. Doplňte i tento obrázek. V případě, že jsme nezasahovali do struktury databáze a neměnili nic co se týče zobrazování apod., bude nám stačit odeslat na webový server pouze nové obrázky. Pokud něco nebude v pořádku, zvolte publikování. A takto vypadá finální výsledek, kterého jsme dosáhli bez napsání jediného řádku kódu! Samozřejmě, že tabulka by chtěla ještě graficky upravit, zarovnat hodnoty, upravit rámečky buněk atd., ale to již zvládnete spolehlivě sami. Chtěl bych jenom připomenout, že toto provedení se hodí pouze pro skutečně jednoduché stránky. Pokud byste chtěli vytvořit skutečný obchod, navíc se zajištěnou bezpečností, museli byste použít jiné nástroje. Uvedený postup vám ale umožní prezentovat svoje výrobky, nabídku služeb apod. i v případě, že nejste profesionálové v oblasti webových serverů. Navíc jste schopni velmi jednoduše celou stránku aktualizovat pouze změnou dat v excelovském sešitu knihy.xls. bez jakéhokoliv zásahu do vlastní stránky, co více si lze přát? A samozřejmě je to i jednoduchý postup, jak umožnit i řadovým pracovníkům dostat řadu informací třeba na podnikový intranet. 67