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:
- Web Developer Toolbar - dobrý nástroj pro ladění webu pro Firefox
- Web Accessibility Toolbar - něco podobného pro IE
- XHTML 1.0 - specifikace v angličtině
- XHTML 1.0 - totéž v oficiálním překladu do češtiny
Postup - jednotlivé kapitoly
Začátek
Obsah - XHTML
Formátování
Dokončení
