Semestrální projekt TNPW1

Tato a následující stránka byly vytvořeny jednoúčelově, jako návod pro vytvoření semestrálního projektu v rámci předmětu Technologie publikování na webu na Univerzitě Hradec Králové. Možná si i ostatní v něm najdou něco zajímavého.

Pokud jste naprostí začátečníci a těžko v tom se orientujete, ráda bych Vám pomohla s vytvářením semestrálního projektu. Nehledejte tady kódy na okopírování; ale snad se mi povede Vás nasměrovat správným směrem. Nečekejte tedy, že tady najdete ukázkové projekty nebo nějaké šablony ke stažení.

Nejdřív obsah v XHTML…

Doporučuji: nejdřív v klidu nastudujte XHTML a vůbec se nestarejte o to, jak to bude vypadat, protože veškeré formátování musí být v externích stylech. Samozřejmě předpokládám že máte už rozmyšlené nějaké to téma ;-).

Připravte si nějakou osnovu, prostě si rozmyslete jaké stránky budete mít, v jakém budou vztahu, jak budou hiearchicky souviset. Tím vám vlastně vznikne menu (stránky musí obsahovat hierarchickou strukturu - menu) a zároveň taky seznam stránek (souborů).

Pak bychom se už myslím mohli pustit do první stránky. Jsme-li na tomhle úplném začátku, tak se asi nebudeme pouštět do PHP a includování souborů; na druhou stranu rámce máme zakázané. Takže nám nezbyde nic jiného, než na všechny stránky menu vložit tak, že v každé prostě bude ta samá část kódu. A protože minimální rozsah je 10 pages (souborů .htm), bylo by dobré to menu vyladit hned ze začátku, abychom ho pak nemuseli desetkrát opravovat.

…pak formátování, neboli styly

Pak by asi byl čas udělat design, neboli formátování; na té první stránce ho vyladíme, a ty další už uděláme podle té první; styl už budeme mít, maximálně do něj uděláme nějaké drobné úpravy.

Pokud budete styl vyrábět postupně a ladit ho v obou zadaných prohlížečích (požadována funkcionalita v IE 5.5+ a v Mozille), nemusíte se bát, že byste tuhle podmínku nesplnili. Hlavně nevymýšlet nějaké zběsilosti ;-). Ale přesto možná na nějaké základní problémy narazíte. V začátcích to bývá nejčastěji rozdíl ve vykreslování box modelu, automatické natahování prvků na výšku v IE atd., ale vše se dá vyřešit, hlavně když vás to nezaskočí.

Stejně opatrně je potřeba nakládat s formátováním stránky na šířku tak, aby výsledek splňoval podmínku podpory rozlišení 800x600 a více. Jedna z možností je pevná šířka stránky na cca 770px, pak - z těch jednodušších, které se nám hodí - např. plná šířka (100% šířky okna) a menu horizontální, ale existují samozřejmě i dvou- nebo třísloupcové pružné CSS layouty, tam už se ale můžete potkat s různými problémy.

Abyste zajistili přístupnost stránek i při vypnuté grafice (zákazu zobrazování obrázků), je na to jednoduchá rada - nepoužívejte je ;-). Ne, vážně. Pokud jakýkoli obrázek "nese informaci", musí být nezbytně v atributu "alt". To je jedna věc. Ale také se setkáte s weby, které používají obrázkové navigační prvky (tlačítka) - ty se vkládají přes CSS a žádný atribut alt nemají. A při vypnutých obrázcích prostě žádné menu neuvidíte.

Pokud se prokoušete tímhle vším, nebude pro vás přizpůsobení CSS pro tiskový výstup žádný problém. Jedním řádkem navíc v hlavičce připojíte druhý styl, kterému řeknete, že se má použít při tisku; v něm zadáte, že nechcete zobrazovat menu a logo a prakticky máte hotovo.

V definicích fontů je třeba použít generickou skupinu (např. monospace, serif, ... ) jako jednu z alternativ - tak na to stačí jen nezapomenout.

Jak začít

Pokud nemáte ani páru, jak vlastně ty tagy nebo co psát, podívejte se na stránku programové vybavení (zmínce o možnosti tvorby ve Frontpage nevěnujte pozornost, to je obecně platná stránka; v projektu by to asi nešlo).

Užitečné odkazy

Kromě toho, co najdete na webu TNPW, bych přidala:

Postup - jednotlivé kapitoly

Začátek

Obsah - XHTML

Formátování

Dokončení


Mozilla Firefox: Znovuzrozený prohlížeč
píše -dis- bb(zavináč)choltice.eu