| Autor | Zpráva | ||
|---|---|---|---|
| Bajusik Profil |
#1 · Zasláno: 3. 2. 2014, 17:32:12
Ahojte, potřebuju radu. Jsem začátečník a dělám kamarádce web. Potřebovala bych poradit jak docílit toho, aby se webovka ukazovala ideálně na středu obrazovky a byla tak nějak ucelená všude stejně? Jsem začátečník, takže prosím jako začátečníkovi :D Jedná se mi tady o tyto dvě stránky:
http://zkusebniweby.wz.cz/katka/template020/index2.html http://zkusebniweby.wz.cz/katka/template020/vedlejsi/vedlejsi1.html Díky moc všem za radu :-) |
||
| janbarasek Profil |
#2 · Zasláno: 3. 2. 2014, 17:50:33
Bajusik:
Na 1380px a 1024px se mi to zobrazuje celkem dobře, takže s tím problém není. Nicméně se to obvykle řeší tak, že se celý web vloží do nějakého elementu (v dnešní době nejčastěji DIV) a tomu se nastaví pevná šířka. V dnešní době má smysl dělat šířku 1000px, někdy i více. Příklad: <div style="width: 1000px; margin-left: auto; margin-right: auto;"> Celý kód... </div> |
||
| Bajusik Profil |
#3 · Zasláno: 3. 2. 2014, 18:43:11
A můžeš mi prosím tady u té stránky poradit jak to nastavit aby to fungovalo? Aby mi levé menu neodskočilo tak daleko od flash prezentace? Budu moc vděčná. Tady je ta stránka:
http://zkusebniweby.wz.cz/katka/template020/new.htm díky moc |
||
| janbarasek Profil |
#4 · Zasláno: 3. 2. 2014, 18:53:50
Bajusik:
Ach jo, který prase ten kód psalo? Hádám, že nějaký generátor stránek. Koukal jsem se na kód a vidím tam úseky jako: <div style="width: 1000px; margin-left: auto; margin-right: auto;"</div><tr><td> </td></tr> O výsledku validátoru ani nemluvě (Dokument neprošel validací, 18 chyb a 48 varování.). Nechci tě tím moc zatěžovat, ale dost to napoví o kvalitě autora webu a jeho znalostech, oprav aspoň část z toho, pokud narazíš na nějaký konkrétní problém, tak sem můžeš napsat. Nikdo ti nebude optimalizovat celé kódy, to je už na tobě. Nechci tě nějak shazovat a kazit tvoje plány v nadějném tvůrci webů, nicméně tudy cesta opravdu nevede. Očividně neznáš ani základy HTML, doporučuji začít úplně od začátku, tady je výborně sepsaný maniuál, jak na to: Základní kurz tvorby stránek Myslím, že naše rady jsou v tomto případě zbytečné, protože je stejně nebudeš umět aplikovat. Kdyby ano, tak jsi aspoň ten můj ukázkový kód vložil správně... grr...! PS: Zápisy typu tohoto vážně nechápu: <p> </p> |
||
| freddy Profil * |
#5 · Zasláno: 3. 2. 2014, 20:04:58
Jestli máte team viewer a chcete, tak vam to klidne udelam :-)
Když uvidíte jak to píšu, tak snad vam to neco da |
||
| Fisir Profil |
#6 · Zasláno: 3. 2. 2014, 20:26:45
Reaguji na janbaraska:
„dělat šířku 1000px, někdy i více […] width: 1000px;“
Ale ne takhle. Co když budu mít monitor užší, než 1000 px? Nehledě na to, že ty tvoje marginy se dají zkrátit na margin: auto.
„není ukočený tag DIV“ Neříkej mi, že nevidíš, že chybí „jen“ >. Mohl jsi to napsat konkrétněji.
„O výsledku validátoru ani nemluvě“ Tragédie. Vadí něčemu, že není určený stylovací jazyk atributů style? To samé se skriptovacím jazykem. Sada chyb u elementu embed je způsobená především tím, že tam vůbec ten embed je.
„Zápisy typu tohoto vážně nechápu“ Tady nejsme u kritiky webu, tady se radí (respektive by se mělo). Neslušelo by se tomu „praseti“ prozradit, že se ke stejnému efektu dopracuje marginem?
|
||
| Bajusik Profil |
Dík za lichotku :D fakt se to učím, takže mi klidně říkej i demente nebo jakkoli chceš, ale žádný učený z nebe nespadl a já jsem navíc ještě ženská tak bacha :D blondýna ale nejsem ;-) Pracuji ve frontpage, takže asi spoustu prvků si tam ten front dá sám, co jsem pochopila. Nicméně, jak jsem tak brouzdala po tomhle webu ( mám fakt co dělat ) nejsympatičtější mi je varianta, kdy jsem si udělala tabulku o třech sloupcích. Do levého sloupce jsem pomocí FP vytvořila menu, uprostřed dala flash promítání fotek a vpravo chtěla umístit 4 obrázky. Nahrát se mi to nahrálo, vytvořit vytvořilo, ale trošku bojuju s pár věcmi a to: 1. Pořád ten stejný problém, že stránka se mi neukazuje uprostřed ani zleva ani zprava ani shora ani zdola ( čili na velkém monitoru mám stránku namáčknutou vlevo nahoře ) 2. Rozhodilo se mi menu, kdy jsem měla původne tlačítko na tlačítku pod sebou, teď se mezi nimi udělala malinká mezera 3. Vpravo podobný problém, jelikož mělo být logo a pod tím dvě tlačítka kousek pod sebou a pod nimi logo. Budu ráda za každou radu opravdu. Fakt se to učím a tak mi pomůže by´t i jen nakopnutí :-)
Freddy: bohužel viewer nemám a byla bych raději za psanou verzi, kterou si můžu vklidu projít a zapamatovat. Samo že pochopím že mě všichni pošlete do háje :D ale tak nějak bych tomu ráda přišla na kloub :-) Díky všem Tady tedy poslední verze: http://zkusebniweby.wz.cz/jinak/jinak.html |
||
| janbarasek Profil |
#8 · Zasláno: 3. 2. 2014, 22:10:25
Bajusik:
„demente nebo jakkoli chceš, ale žádný učený z nebe nespadl a já jsem navíc ještě ženská tak bacha“ Nenadával jsem tobě, ale tomu generátoru. Ach jo, za posledních 14 dní se mi stalo už 3x, že jsem nadával na generátor a dotyčný si to vztáhnul na sebe. Nesnáším jakékoli editory. Měla by ses naučit základy psaného HTML, abys stránky psala rovnou pomocí kódu, ne programem. Není to sice jednoduché, ale naučit se to dá (i já jsem se to naučil v rámci možností a to je co říct). „Pořád ten stejný problém, že stránka se mi neukazuje uprostřed ani zleva ani zprava ani shora ani zdola ( čili na velkém monitoru mám stránku namáčknutou vlevo nahoře“ Protože ten kód je rozbitý, chybějí tam kusy kódů, jsou tam napsané blbosti... Musíš se naučit základy fungování HTML, abys pochopila, proč je to špatně. „Samo že pochopím že mě všichni pošlete do háje“ To se tady nesmí ;) Fisir: „Co když budu mít monitor užší, než 1000 px?“ V dnešní době? Jaký je u tebe rok? „tady se radí (respektive by se mělo)“ Mohl jsi se všimnout, že jsem neprve napsal, co se mi nelíbí a pak jsem to shrnul jako možné řešení. Důležité je dostat tázaného do problému, aby byl přinucen ho řešit a pochopil své chyby. Aspoň nám to tedy tak ve škole vždycky říkávali. |
||
| Keeehi Profil |
#9 · Zasláno: 3. 2. 2014, 22:33:01
<div width= "1000px"; margin=auto </div> >>>>>>> <div style="width: 1000px; margin:auto"> zde je celý zbytek stránky a pak až následuje ukončovací /div </div> Jinak tam máš 2x deklaraci doctype. Dále tomu javascriptovému kódu chybí značky tagy <script></script> kolem.
Další věcí je, že tabulky pro vytvoření rozložení na stránce už dávno nejsou v módě. Můžou způsobovat pomalé načítání stránky a mají i jiné nevýhody. Jak psal už janbarasek, je dobré psát kód ručně. IDE se zvýrazňováním syntaxe a napovídáním mohou práci urychlit. Člověk má ale pořád kód pod neustálou kontrolou. Osobně mi přijde mnohem složitější opravovat chyby generátorů než si to napsat celé ručně. A teď ta nejzábavnější část. Každý prohlížeč vykresluje různé věci na stránce různým způsobem. Důvodů je pro spoustu, ale o teď nejde. Výsledkem je, že člověk musí mít s tvorbou layoutu dost zkušeností aby byl schopen to napsat tak aby se vyhnul problémům, opravil bugy některých verzí a nakonec vytvořil stránku, která by se zobrazovala stejně pěkně napříč všemi prohlížeči a různým konfiguracím displaye, OS atp. Kromě toho, že se o to člověk snaží pokaždé, zrovna webová prezentace pro fotografa musí být v tomto ohledu IMHO dokonalá. Dále do toho kecají věci jako je sémantika, přístupnost, SEO atp. Je to celkem alchymie a osvojit si ji trvá celkem dlouho. Tím tě nechci od toho odrazovat. Právě naopak, jpw.cz a djpw.cz jsou skvělá místa kde pouť začít, jen jsem chtěl vlastně říct, že než si to všechno osvojíš, bude to nějakou dobu trvat a výsledky v průběhu nebudou moc reprezentativní. |
||
| Bajusik Profil |
#10 · Zasláno: 3. 2. 2014, 22:47:17
Díky moc za rady i odkazy :-) určitě s tím něco provedu, ráda bych se naučila aspoň něco. Fakt díky :-)
|
||
| Keeehi Profil |
Tak jsem si s tím pohrál a upravil na to, z čeho by se dalo třeba vycházet:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>New Page 3</title>
<script>
<!--
function FP_preloadImgs() {
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
// -->
</script>
<style>
body {background: #C9C7CB url('/images1/wall1.jpg');}
menu {margin: 0; list-style: none; padding: 0;}
menu li {margin-bottom: 0.22em;}
menu li a {font-size: 12pt; text-decoration: none; color: #1F978A; font-family: Segoe Print, Tahoma, "Lucida Grande CE", lucida, sans-serif; text-align: center; line-height: 30px; vertical-align: middle; background-image: url('button/button6F.png'); display: block; height: 30px; width: 149px;}
menu li a:hover {background-image: url('button/button70.png');}
menu li a:active {background-image: url('button/button71.png');}
#content {width:1000px; margin: 100px auto 0;}
#left {float: left; width: 185px;}
#middle {float: left; width: 490px}
#right{float: left; width: 325px;}
</style>
</head>
<body onload="FP_preloadImgs('button/button70.png', 'button/button71.png')">
<div id="content">
<menu id="left">
<li><a href="#">Úvod</a></li>
<li><a href="#">Svatby</a></li>
<li><a href="#">Těhotenství</a></li>
<li><a href="#">Newborn</a></li>
<li><a href="#">Děti</a></li>
<li><a href="#">Rodina</a></li>
<li><a href="#">O mně</a></li>
<li><a href="#">Na focení</a></li>
<li><a href="#">Ceník</a></li>
<li><a href="#">Kontakt</a></li>
</menu>
<object id="middle" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="movie" value="jinak.swf">
<param name="quality" value="High">
<embed src="jinak.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="middle" width="490" height="335">
</object>
<div id="right">
<img border="0" src="images1/logo.gif" width="290" height="97" style="display: block; margin: 100px auto 0;">
</div>
</div>
</body>
</html>Musel jsem předělat buttony, takže jsou poteba použít tyto obrázky: files.cejhon.cz/button6f.png files.cejhon.cz/button70.png a files.cejhon.cz/button71.png |
||
| Fisir Profil |
#12 · Zasláno: 4. 2. 2014, 17:44:06
Reaguji na janbaraska:
„Jaký je u tebe rok?“ Něco okolo 2014. Ukážeš mi prosím tvůj mobil s šířkou alespoň 1000 px? (Ano, to mobily řeší odzoomováním, ale to mrňavé písmo se pak blbě čte, což zase Windows Phone řeší tak, že ho prostě natvrdo zvětší, to pak ale nevypadá moc hezky a někdy se rozpadne rozložení.) |
||
| janbarasek Profil |
#13 · Zasláno: 4. 2. 2014, 18:26:25
Fisir:
Na mobilu bych spíše řešil problém s tím, že bych neviděl ten obří flash, takže by na té stránce zůstalo jen to menu, které můžu bez starostí zobrazit přes obsah displaye. Zkrátka jsem chtěl naznačit, že dnes má prakticky každý počítač minimální rozlišení 1024px na něco a že užší weby nemá smysl dělat. Pokud si myslíš opak, tak se podívej na prvních 10 navštěvovaných náhodných stránek, které na webu najdeš a uvidiš, že mám pravdu. |
||
| Trejpa Profil |
#14 · Zasláno: 4. 2. 2014, 20:26:50
janbarasek:
„dnes má prakticky každý počítač minimální rozlišení 1024px“ Z čeho usuzuješ, že velikost monitoru je stejná jako plocha pro zobrazení stránky (viewport)? Prakticky nikdy na počítači neprohlížím web v okně na celou šířku a výšku, obvykle si vystačím s polovinou obou rozměrů. Skoro každodenně mám možnost pozorovat desítky různých uživatelů a ti jsou na tom podobně. V době, kdy se zvyšuje počet přístupů z mobilních zařízení, jejichž šířka a výška je variabilní a obvykle začíná od nějakých 600 px, je tvorba webu založeného na jedné pevné šířce nad 1000 px značně nepraktická. Buď je vhodné zvolit elastické provedení nebo nějaké to přeskládávání (responzivní styly). |
||
|
Časová prodleva: 10 let
|
|||
0