Tvorba webu aneb menu na všech stránkách

Od: Datum: 13.03.13 18:53 odpovědí: 26 změna: 27.03.13 17:38
avatar

Dobrý večer může mi někdo prosím poradit jak jednoduše udělat to, aby se menu zobrazovalo na všech stránkách? Jednoduše bych udělal například menu.html a na něj odkazoval. (je to jednodušší, než ve všech souborech přepisovat menu, když do něj budu chtít něco přidat.

Momentálně mě chytlo css a tvorba webu. Tak jsem se tím začal zabývat, ale už jsem v potížích.

S tímto se aktuálně patlám: http://vasekporuba.sweb.cz A potřebuju, aby to menu bylo na všech stránkách webu totožné a nemusel jsem ho pořád do všech souborů kopírovat. Díky. (jsem začátečník. Vím co je odkaz a nějaké základy. Včera jsem se začal učit s css.)

Díky za rady.


Seznam odpovědí:
 
moment čekejte prosím, probíhá přenos dat...
Zobrazení struktury odpovědí v otázce
Skrytí struktury odpovědí v otázce
Zobrazení struktury odpovědí v otázce

 

Odpovědi na otázku:
Datum: 13.03.13 19:14
avatar

Jestli se nechcete učit php nebo jiný skriptovací (nebo programovací) jazyk, můžete celkem jednoduše použít server-side include.

Něco o použití si můžete přečíst např. zde: http://httpd.apache.org/docs/…o/ssi.html#additionalexamples , zajímat vás bude zejména ta ukázka pod Including a standard footer, protože to je přesně to, co chcete. Nakonec to můžete trochu rozšířit, nemusíte vkládat jen menu, můžete vkládat vše, co se opakuje.

Vaše stránka by tedy mohla vypadat takto (bez tagů atd, jen schéma, snad to pochopíte):

include virtual deklarace.shtml (tam uvedete html doctype, jazyk, přilinkované css, skripty atd)

..title a description, specifický pro konkrétní stránku..

include virtual menu.shtml (konec head tagu, začátek body, h1, hlavička, logo, menu horní, menu levé atd atd.. končit to bude třeba začátkem div: content)

..vlastní obsah stránky, h2, odstavce, obrázky, texty..

include virtual pata.shtml (konec divu content, pata, copyright, odkazy..)

Samozřejmě takhle můžete rozkouskovat libovolný obsah, který se bude opakovat, například bannery, odkazy na spřátelené weby, nějaké výčty, postranní sloupečky nebo cokoli dalšího.. jen pozor na to, že tyhle vkládané soubory nebudou obsahovat tag "html", ani "head" ani "body" (tedy s výjimkou těch hlavních, řídicích souborů, pokud to uděláte, jak jsem psal výše), pouze nějaký div a jeho obsah. Když se to vše poskládá dohromady, musí to dávat smysl. Include udělá jednoduše to, že zkopíruje celý soubor a nacpe ho do toho místa, kde je include napsaný. Jako ctrlC, ctrlV.

Ještě možná koukněte do nápovědy swebu, dle jejich nastavení apache serveru může být vyžadováno, aby vkládané soubory měly koncovku třeba .shtm nebo .shtml.

doplněno 13.03.13 19:45:

Jak jednou porozumíte tomu, co vám to kam vloží, je to naprosto triviální záležitost :) Navíc vám to extrémně ulehčí veškerou údržbu a změny.

IIS ho podporuje, Apache taky, jde jen o to, jak si to kvůli bezpečnosti nastaví. Bez přihlášení je v nápovědě swebu ale velký prd. Podle http://www.sweb.cz/phpinfo.php je mod_include spuštěný, takže by to mělo jít, akorát jsou zakázány includy cizích věcí, mimo váš webový prostor (což je pochopitelné).

Ohodnoceno: 0x
 
Datum: 13.03.13 19:24
avatar

Tak jsem na tím uvažoval a celkem nic jsem nepochopil. A pochybuju že ssi podporuje sweb.

Datum: 13.03.13 19:35
avatar

Momentálně jsem se zaseknul na tvorbě menu. nedaří se mi udělat to, aby na všech stránkách bylo na jednom místě. A to zkouším vše.

Datum: 13.03.13 20:00
avatar

Já mám problém si udělat rámy pomocí css, taky aby vše sedělo. Takto by to fungovalo, jen nechápu proč se to zápatí nedá až za fotku: http://vasekporuba.sweb.cz/

Datum: 13.03.13 20:15
avatar

http://pastebin.com/iPDH2Wj9 <- to, co bylo na webu před chvílí (+- s nějakou úpravou), rozkouskované tak, aby se to pak zase správně složilo. Jen pro praktickou názornou ukázku.

Zápatí je tam, kde je, protože fotka má align=left, což je ekvivalentní s float: left (mimochodem align je deprecated), tedy plave nalevo od obsahu, od odstavce s textem, od zápatí i od čehokoli dalšího, co by tam bylo. Pokud chcete "odentrovat" za plovoucím prvkem, použijte na následující prvek clear: left (nebo right nebo both, podle strany). Pokud tedy má zápatí "počkat", až všechny plovoucí prvky skončí, a teprve pak se zobrazit, dejte mu clear: both
Ohodnoceno: 0x
 
Datum: 13.03.13 20:29
avatar

A ten soubor přiřadím pomocí #include virtual="/menu.shtml" ? Takže vše co je v menu.shtml se vloží na místo, kde bude onen include? Nějak mi to nejde. Viz web

doplněno 13.03.13 20:44:

Bylo by jistě pěkné, kdyby se takto jednoduše daly vkládat informace, ale s mou chápavostí a hlavně štěstím se mi to nepodaří zprovoznit.

Datum: 13.03.13 21:59
avatar

Ano, ovšem ten include musí být uvnitř komentáře. "Obsah souboru" je komentářem pro vás (aby to bylo v jednom a nevkládalo se to načtyřikrát), ale to pod posledním "obsahem souboru" už je tak, jak má být, tedy včetně menšítka, vykřičníku, pomlček, křížku..

Třeba tuhle stránku byste do souboru Odpověď poskládal s využitím dalších šesti souborů takto:

< - include virtual="/hlavicka.shtml" - >

Příspěvek, na který odpovídáte.. Autor: , Datum: ... atd atd

Vaše odpověď: nick, mail.. atd atd

< - include virtual="/user.shtml" - >

< - include virtual="/search.shtml" - >

< - include virtual="/top.shtml" - >

< - include virtual="/soc_feed.shtml" - >

< - include virtual="/pata.shtml" - >

doplněno 13.03.13 22:00:

Smazalo mi to dvojité pomlčky :(

Ohodnoceno: 0x
 
Datum: 14.03.13 05:12
avatar

Já tomu nerozumím. Pokud to dám jako komentář, tak to přece prohlížeče ignorují a nebudou nahrávat externí obsah z jiného souboru ne?

doplněno 14.03.13 05:27:

A ještě vznikl problém ten, že v menu nefungují odkazy jen pokud dám do css pro menu float="right" . Pokud to tam není tak to funguje. Viz web.

Datum: 14.03.13 07:53
avatar

Prohlížeč to dostane už rovnou ve finální podobě.

Převod komentářů, načtení externích souborů a jejich vložení místo komentáře provádí server při zpracování požadavku. On si to v uloženém souboru najde a provede. V odpovědi to už posílá poslepované dohromady.

Ohodnoceno: 0x
 
Datum: 14.03.13 12:57
avatar

No bohužel to nejde. Musí být všechny soubory shtml? Nebo stačí jen přikládaný soubor? Mimochodem můžete mi prosím pomoct s tím proč mi nejde kliknout na odkaz v menu? Díky

doplněno 14.03.13 13:38:

Zde jsem to testoval a nefunguje a nevím proč! http://vasekisvlk.sweb.cz/

Datum: 14.03.13 14:16
avatar

Mohl bych poprosit o radu proč se sablona.html zobrazuje v záhlaví jinak, než ostatní identické stránky formátované pomocí stejného css? http://vasekporuba.sweb.cz/sablona.html

Je to prostě jiné, než úvodní stránka

doplněno 14.03.13 14:20:

ok už vím. bylo to chybně napsaným doctypem

Od: hm®
Datum: 14.03.13 14:58
avatar

Úplně první věc, důležitější než menu: definuj znakovou sadu - kódování češtiny! Já tam vidím místo všech neanglických písmen jen otazníčky a čtverečky. Podobně na tom budou všichni, kdo jako defaultní kódování v prohlížeči nemají to tvoje.

doplněno 14.03.13 15:00:

Jen dodatek: znaková sada se definuje v hlavičce např.:


Content-Type" content="text/html; charset=UTF-8">

doplněno 14.03.13 15:01:

Mezi "meta" a "http" má být mezera. Nevím, proč zmizela.

doplněno 14.03.13 15:05:

Sada UTF-8 by byla nejlepší, ale ty to máš psané ve windowsí češtině, takže jestli to nechceš uložit znovu a v UTF-8, musíš uvést


charset=WINDOWS-1250
Ohodnoceno: 0x
 
Datum: 14.03.13 16:41
avatar

Netuším jak se to mohlo stát. Automaticky pspad tam vše potřebné dává. Vše upraveno na UTF-8

Jinak to asi nebudu řešit. Všechna menu budu ručně kopírovat. Jinak je web v podstatě hotov. Možná nějaké úpravy záhlaví, zápatí a vzhledu.

doplněno 14.03.13 16:41:

http://vasekporuba.sweb.cz/index.html

doplněno 14.03.13 16:44:

jenže po změně na UTF-8 zase mě nefunguje diakritika.

doplněno 14.03.13 17:00:

Tak jsem to vše znova vytvořil a překopíroval a snad již to funguje. Tak prosím o test. díky.

Od: hm®
Datum: 15.03.13 14:22
avatar

Už to vidím hezky česky.

Ohodnoceno: 0x
 
Datum: 15.03.13 15:52
avatar

Tak jsem psal na sweb.cz na podporu a odepsali mi, že servery nepodporují ssi. Takže proto to nefungovalo. :(

Datum: 17.03.13 17:34
avatar

Ještě mě napadá, použít iframe. Právě studuju jak to funguje a asi to vyzkouším.

doplněno 17.03.13 17:57:

No tak asi nic. Mimochodem jak udělám, aby menu na některých stránkách nepřesahovalo přes zápatí? Jak nastavit čáru nad zápatím tak, aby přes ní dolů nic nešlo?

doplněno 17.03.13 17:58:

jedná se o toto: http://vasekporuba.sweb.cz/panel.html

Datum: 17.03.13 18:56
avatar

Eeeh. No, takhle umístěné menu a obsah by měly být ještě spolu v nějakém divu. Dvě vodorovné linky kolem obsahu taky v tom samém divu.

Problém je, že máte menu nastaveno s absolutní pozicí, takže je naprosto ignorováno dalším rozložením stránky, je prostě úplně mimo. S aktuálními rozměry menu (top 250, height 500), obsahu a těch čas byste musel nastavit obsahu asi tak min-height: 281px, aby to vycházelo. Je to ale celkově špatné řešení, chtělo by to celé přeskládat.

Iframe je na něco jiného, ale na to jste už asi přišel. Pomohl by obyčejný starý frame, který by ale s sebou přinesl všechny ty nevýhody, kvůli kterým se moc nepoužíval (viz jakpsatweb).

doplněno 17.03.13 18:57:

těch čar*

Ohodnoceno: 0x
 
Datum: 17.03.13 19:08
avatar

No možná se mi to povedlo. Ještě různé testy a pak přepsat celý web. viz: http://vasekporuba.sweb.cz/panel.html

Datum: 17.03.13 19:16
avatar

To už je lepší, teď už jen přepsat #zahlavi, .facebook a .toplist, aby ta stránka neměla kilometr na šířku, a bude to ok :)

Ohodnoceno: 0x
 
Datum: 17.03.13 19:22
avatar

No nějak nemůžu přijít nato proč má vše v zápatí šířku 1517px.

doplněno 17.03.13 19:34:

No tak jsem všude nastavil šířku, tak aby se to tam vešlo. No a už se posuvník nezobrazuje.

Datum: 17.03.13 19:36
avatar

Díky moc všem /hlavně dzordz/ za pomoc. Bez poradte.cz a jakpsatweb.cz bych to nikdy nedal dohromady. Zase jsem se toho hodně naučil. Díky moc.

Vím že pokud se znalý člověk podívá na kód a na css tak uvidí blbosti a spatlaný web, ale všemu moc nerozumím a tak to prostě napíši a pokud to funguje tak to neměním. Hlavně že se to zobrazuje na většině počítačů hezky.

Datum: 25.03.13 14:19
avatar

No tak bych snad jen doplnil, že jsem celý web předělal. Nyní už není vše pozicováno pomocí css, ale udělal jsem tabulku. Tabulka má celkem 4 okénka. Záhlaví, obsah, menu a zápatí. Viz web. http://www.vasekporuba.sweb.cz

Ještě se chci zeptat jak udělat to, aby text v tabulce nebyl tučným. Díky

doplněno 25.03.13 14:36:

A momentálně se mi ještě povedlo vložit menu tagem Iframe. Takže stačí změnit menu v souboru menu.html a vše se změní.

Je nádherné se takto naučit zjednodušit web.

 

Datum: 25.03.13 19:02
avatar

Je to tučné z toho důvodu, že v tabulce máte th (table header), neboli nadpisy pro sloupce/řádky. Výchozí styly prohlížečů je povětšinou jejich obsah zobrazují tučně a vodorovně centrovaný.

Když je změníte na td (obyč table cell), tučně nebudou. Pokud by i nadále měly být zarovnávány na střed, bude pak třeba přidat styl text-align.

Ohodnoceno: 0x
 
Datum: 26.03.13 06:08
avatar

Já jsem dal na hlavní obsah th, aby vyhledavač pochopil, že je to to hlavní na webu.

Datum: 26.03.13 12:25
avatar

Strukturování obsahu tak, aby ho vyhledávač považoval za důležitý, se dělá docela jinak. Můžete zkusit si počíst něco o SEO, jenže to je dneska takovej byznys na facku, jako pojišťováci a podobná chátra.. půlka nesmysly a bláboly, půlka zbytku úmyslně matoucí informace, pak občas něco informativního. Pro nejrychlejší a nejstručnější informace asi google webmaster tools (a blogy googlu, pokud se vám to chce číst).

Může se začít správně strukturovanými nadpisy, odkazy, unikátním popisem a titulkem (a samozřejmě obsahem) stránek, sitemapou a indexací, pokračovat přes html5 sémantické značky až k strukturovaným datům (schema.org) a metadatům pro sociální sítě..

Th se používají jako nadpisy sloupců a řádků datových tabulek, například zde na Moje stránka v počtu odpovědí by řádek s rubrika, počet odpovědí, hodnocených.. měl buňky th. Stejně tak levý sloupeček, auto-moto, domácnost atd, by mohl být th. V podstatě na tom moc nezáleží, bylo by to jen kvůli dodržení přístupnosti na alternativních zařízeních (čtečky).

V layoutových tabulkách (váš případ) by th určitě být neměly, bylo by to silně matoucí. (v dnešní době by i místo layoutových tabulek samotných měly být divy, ale to už je další věc :))

Ohodnoceno: 0x
 
Datum: 27.03.13 17:38
avatar

No tak jsem si s tím celý den hrál, a zkoušel vymyslet lepší, hezčí a méně spatlanou strukturu. Prozatím mám pěknou a funkční verzi. Zatím na jiném hostingu jede beta verze. Na originál adresu ji nahraju, až bude vše otestované a doladěné, Viz: http://vasekporuba.ic.cz

doplněno 27.03.13 17:39:

Na pravé menu, levé menu a zápatí jsou použity framy.

 

 

 

 

Přihlásit se k odběru odpovědí z této otázky:

Neneseme odpovědnost za správnost informací a za škodu vzniklou jejich využitím. Jednotlivé odpovědi vyjadřují názory jejich autorů a nemusí se shodovat s názorem provozovatele poradny Poradte.cz

 
Copyright © 2004-2016 Poradna Poradte.cz. Všechna práva na poradně Poradte.cz vyhrazena.