Jak udělat hezké pozadí – CSS – Fórum – Programujte.com

Zdravím, snažím se vytvořit nějakou šablonu webu. Jestli jsem to pochopil správně, tak si zvolím velikost, třeba 1000x1000px. Poté výsledné pozadí rozřežu na hlavičku, záhlaví, zápatí a střed? U toho středu nastavim vertikální opakování, aby se přizpůsobilo stránce. Střed je vhodný volik tak, aby celkový design byl pěkný když střed zopakuji 1,2,3, 10.5 krát. Nebo je nějaká vlastnost která mi nastaví aby se vždy vložil celý obrázek?

#1 Pavelv 

background: url("...") white (no-)repeat(-x/y) (x y) ...;

Ach jo - raději se prvně nauč základy HTML a CSS... (Toto stačí dát do body{} a hotovo. Za x a y můžeš dosadit center a middle - obojí je 50% - střed.)

#2 Matěj Andrle
A jak mam udělat pozadí, když je výška proměnná? Bez opakování a deformace to nejde aby se obrázek protáhl jen v půlce. Navíc načítat jeden obrázek 1000x600px mi přijde zbytečné, když stačí pár obrázků o velikostech cca 50x50. Nebo se pletu?

#3 Pavelv
Nauč se už konečně HTML a CSS... :D Dnes se dělají vizitkové a portfoliové weby. Tam se dává jeden obrovský obrázek do hlavičky (aby to vyplnilo celou (úvodní) obrazovku) a zbytek výšky je již cosi malého, opakujícího se. Jinak ano - jinak se dávají spíše malé opakující se obrázky, ovšem kdekoliv můžeš dát nějaký větší... (Třeba na web o realitách může být na pozadí rozházeno pár domů atp.) Ovšem to vše je jen o znalostech HTML a CSS... Jak vypadá moderní web ukazuje Youtube, Google,...

#4 Matěj Andrle
Díky za tvůj příspěvek. Zasmál jsem se. Větší blbosti už jsem dlouho nečetl.

#5 crazy
Také se mi to nezdá. Můžeš nastínit nějak správný postup? Nepřijde mi nic lehčího než udělat jeden velkej obrázek a ten fláknout na web :))

#6 Pavelv
Obecný postup na vytvoření šablony webu samozřejmě není. Vždy záleží přesně na tom, jakou máš představu. Popiš konkrétněji svůj problém a já se ti pokusím pomoci.

#7 crazy
No web by měl sloužit jako osobní prezentace, časem možná web menší firmy. Představuji si stránku cca 1000px širokou, nahoře cca 150px vysoký pruh ve kterém bude logo, a další grafické blbosti. Menu bych viděl na levé straně, nějakých 200px. Na konci webu bude patička s kontaktem, mapou webu. Časem počítám i s přihlašovacím oknem, právě pod menu. Design jsem začal kreslit na plátno o velikosti 1000x1000.

Až bude šablona hotová, počítal jsem s tím, že jí rozřežu a upravím tak, aby výsledné obrázky byly co nejmenší a dalo se to efektivně poskládat.

Jinak menu bude mít cca 6 položek, bez podmenu a chci stejný vzhled pro všechny stránky. Styling chci dělat pouze pomocí css, AJAX se mi nelíbí z důvodu přenášení zátěže na klienta, a ne každý má JS zaplý.

#8 Pavelv
Design si kresli na plátno jak velké chceš. Ale dnes se dělají tzv. responsivní weby, které nemají pevně danou šířku stránky a tak se zobrazují na každém monitoru/displayi jinak. Např. pro telefon/tablet a pro velké displaye notebooků a PC. Zde na programujte tuším vyšel článek jak na resposivní weby. Tak se na něj podívej - to je moderní trend tvorby webů.

- resp. weby se nehodí pro stránky, kde je velké množství dat, protože se pak do telefonu stahuje celý kód jako pro prohlížeč, což při dnešních FUP limitech uživatelé mobilních telefonů moc neocení :)

#9 crazy
Takže hned jsem o něco moudřejší. Jak se ale pak dělá design pro takové stránky? Koukám, že trendem jsou stránky bílé, bez nějakých velkých obázků na pozadí. To se pak snáze nakreslí jen rámeček pro ohraničení textu.

Kdybych se rozhodl jít starou cestou, tedy pevná velikost, popsal jsem schůdný postup? Bohužel tworba webu je moje vedlejší činnost, tak nemám pořádně kde přeměřovat svoje zkušenosti.

#2 - Zalezi na tom... S kazdym obrazkem se posila asi 1kb hlavicka. 50 obrazku 50x50, rekeme kazdy 2k ma navic 1k hlavicku. Celkem to tedy je 150k misto 100k. Nehlede na to, ze na kazdy obraazek je extra pozadavek na soubor a musi se cekat na jeho dokonceni. Je tedy lepsi optimalizovat na co nejmene souboru za jeste celkem prijemne prace s nimi. Napriklad treba pro hru pexeso mam jeden velky obrazek, ktery pomoci css backgroung-position posouvam pro kazdou kosticku v <div>u.
Muj nazor je, ze stranky by meli byt minimalni na pocet odkazu a obrazku. Bohate na kvalitu obsahu.
Bohuzel to vypada tak, ze na strankach clovek obvykle pracne hleda, kde co maji zasite. Nema to zadnou logickou strukturu. Odkazy nejsou pojmenovane jednoduse nebo srozumitelne. Spousta lidi pouziva zlozvyky ala word jako ruzne velikosti a tucnosti pisem, barvicek, kde se jim zrovna zlibi a vubec nedbaji na nejake normy pro pisemnosti, kde se jim neco malo snazili vstipit uz na zakladni skole s urednimi dopisy a pod.
Takze, pak prijdes na stranku a snazis se tipovat, pod jakymi odkazy je asi schovany obsah, ktery hledas. Muzes to porovnat na iprima.cz a tv.nova.cz. Zkus mi tam najit nejake konkretni videjko, porad a spustit? Kolik kliku te to bude stat. Z kolika odkazu na strance jsi to vybiral? A o kolika odkazech jsi ani nevedel, ze jsou odkazy (pocty se daji zjistit nejakymi developerskymi nastroji nebo mozna info o strance, pripadne v pspadu hledanim "<a "). A kolik odkazu maji resenych pres js? No, a kdyz si obe stranky prohlizis, tak tam presne vidis to, o cem jsem rikal, s pismem nakladaji, jak se jim zachce, cvelikost, barvu, font, sklon, podtrzeni voli nahodile, podle zadne logiky.