Upozornenie:
Kvalita dizajnu blogu vypovedá o jeho tvorcovi, preto zvážte Váš dizajn.
Pri tvorbe dizajnu by ste nemali porušiť autorské práva (napr. využiť v dizajne cudzie obrázky bez súhlasu autora alebo vlastníka).
Viditeľný vzhľad (dizajn) blogu pozostavá zo 4 súborov (v skutočnosti ich je viac - ale funkciu nepoznám). Sú to tri obrázky a jeden súbor so štýlom (CSS). Tento návod som sa rozhodol písať pre menej skusených, preto na zmenu vzhľadu podľa neho netreba ovládať CSS. Všetko potrebné sa dozviete v článku.
Dizajn budeme vytvárať editáciou existujúceho. Súbory potrebné na vytvorenie dizajnu môžete stiahnuť z
http://www.gk2-po.sk/~tkacik3d/download/blog-desing-tutorial.zip
(založené na mojom dizajne. Niekoré možnosti dizajnu, napr. rôzne zafarbenie časti počítadiel, nie sú pristupné v tejto verzii môjho CSS, pretože som sa ho snažil zjednodušiť, aj tak sa na blog.sk nevyuživajú. Editáciou pôvodnych CSS z blog.sk by sa dali dosiahnuť lepšie vysledky - ale je to zložitejšie a možno aj zbytočne.)
Súbory z ktorých dizajn pozostáva:
- top.jpg alebo top.gif - horný obrázok, rozmery okolo 760 pixelov (šírka) x 150 pixelov (výška) - tie používam ja.
- bg.gif - pozadie blogu, rozmery: šírka ako u horného obrázka a výška - podľa vzoru kt. sa bude opakovať. Šírka obrázka je preto rovnaká ako u horného, pretože súčasťou tohto obrázka sú aj zvislé čiary ohraničujúce stránku a oddeľujúce menu od článku. Umiestnené sú (v ukažkovom dizajne) na vodorovnych polohach 0,170,760 (v prípade, že by bolo menu naľavo) alebo 0,590,760 (ak je menu napravo).
- menu.gif - pozadie názvu hlavných tém v blogu (napr. ARCHÍV)
- blog.css - súbor s definíciou štýlov resp. dizajnu. Je to asi najdôležitejší súbor pri dizajne.
Tvorbu obrázkov nebudem v tomto návode rozoberať. Na tvorbu obrázkov odporučam pokročilejší grafický editor ako je Adobe Photoshop, Corel PhotoPaint (komerčné produkty), The GIMP (voľne šíriteľný, moja osobný favorit), alebo iný, ktorý preferujete. Ak sa Vám zdá editácia CSS, prípadne celkový návrh dizajnu blogu zložitý alebo si naò netrúfate, môžete ma skontaktovať na moj e-mail tkacik3d@gk2-po.sk. V takomto prípade bol by som ochotný Vám s dizajnom pomôcť resp. návrhuť a vytvoriť podľa vaších požiadavok. Ale najprv sa o to pokuste sami.
Ak celý dizajn stránky máte dokončený a otestovaný (napr. pomocou priloženeho preview.htm), stačí ho zaslať (všetky obrázky + CSS) administrátorovi blogu. Môže to chvíľu (asi do jedneho dòa - administrátor určite nestriehne vždy na blogu na každú požiadavku použivateľov) trvať pokiaľ váš dizajn administrátor nastaví na váš blog (vyžaduje si to zásah do systému - myslím). Preto prosím budťe ohľaduplný k adminovi.
Editácia CSS štýlu
Nebudem kompletne vysvetľovať CSS (viac o CSS na www.w3schools.com, vysvetlím len časti, ktoré je potrebné zmeniť oproti pôvodnému CSS.
Takže stručne: CSS definuje ako zobrazovať, nedefinuje čo zobrazovať (vynímka sú obrázky). CSS je delené na elementy a parametre (názov parametru a hodnota). Ukažkový zápis jedného elementu:body {
font-size: 8pt;
}
kde body je názov elementu, zloženou zátvorkou začína definícia elementu. font-size je parameter elementu, nasleduje dvojbodka a hodnota parametra. V tomto prípade je to 8pt. Parametre sú oddelené bodkočiarkou. Definícia elementu je uzavretá zloženou zátvorkou.
Zakladné parametre pre text | |
font-size | Veľkosť písma - udavá sa v pixeloch napr. 10px, bodoch napr. 8pt (štandardné na blog.sk) alebo bez jednotky (môže viesť k rôznemu zobrazeniu, na rôznych prehliadačoch). |
font-family | Rez písma (vo Windowse tiež známe ako font) - definuje font písma. Viacnasobné hodnoty sú oddelené čiarkou a uvadzajú aké iné písmo použiť ak hlavné (prvé v zozname) nie je dostupné. Hodnotou môžu byť aj všeobecné označenia písem: serif, sans-serif, cursive, fantasy, monospace (proporcionálne písmo - pisací stroj). |
font-style | Štyl písma môže byť: normal, italic (kurzíva), oblique (prakticky to isté ako kurzíva). |
font-weight | Hrúbka písma - môže mať hodnoty: normal, bold (hrubé), bolder (hrubšie), lighter (tenšie). |
text-decoration | Ozdobenie textu - hodnoty:none (normálne), underline (podčiarknuté), overline (čiara nad textom), line-through (preškrtnuté). |
text-align | Zarovnanie textu. Može byť: left (naľavo), center (nastred), right (napravo), justify (do bloku). |
vertical-align | Vertikálne zarovnanie textu. Može byť: top (navrch, štandardne), center (nastred), bottom (naspod). |
color | Farba textu - zapisuje sa vo slovne(zakladné farby po anglicky)alebo vo formate RGB (červená, zelená, modrá) a to hexadecimalne napr. #2a6bc3 alebo pomocou funkcie rgb(12,23,25), kde maximalna hodnota čísla je 255. |
V nasledujúcej tabuľke sú zapísané všetky podstatné elementy, ktoré definujú vzhľad stránky. Odporučam editáciu CSS z môjho štýlu (mnoho veci je tam pekne prednastavených, najprehľadnejšie zapísané). Elementy, parametre, ktoré tu nie sú uvedené nemeòte (môžete iba ak viete čo robíte).
Základ stránky | ||
---|---|---|
body | Hierarchický najvyšší element - definuje základne parametre celej stránky | |
background-color | farba pozadia stránky, na blog.sk je to farba okolo tela stránky. Zápis pozri color medzi parametrami textu. | |
parametre textu | Definuju štandardné parametre textu na stránke. Zápis pozri parametre textu (prvá tabuľka). | |
#pagewidth | širka blogu | |
width | Širka blogu je nadefinovaná až tu. Je to údaj v pixeloch (zápis napr. 760px), zvyčajne je to šírka horného obrázka. | |
Zahlavie stránky | ||
#header | rozmery a cesta k hornému obrázku | |
width | Širka horného obrázka. Hodnota je v pixeloch (zápis napr. 760px). | |
height | Výška horného obrázka. Hodnota je v pixeloch (zápis napr. 760px). | |
background-image | Cesta k obrázku. Ak je obrázok v zložke (priečinku) so štýlom, stačí uviesť iba názov súboru. zápis je url( cesta resp. názov obrázka) | |
#meno | Názov blogu | |
parametre textu | Definuju parametre textu, ktorým sa názov blogu zobrazuje. Zápis pozri parametre textu (prvá tabuľka). | |
right alebo left | Umiestnenie - Absolutna poloha názvu. Parameter môže byť left (zľava) alebo right (zprava). Hodnota udáva absolutnu pozíciu v pixeloch od daného okraja stránky (blogu). | |
top | Absolutna poloha názvu od vrchu stránky (resp. od vrchu horného obrázka). Udavá sa v pixeloch (zápis napr. 120px). Text by sa nemal dostať mimo horného obrázka. | |
width | Maxmimalna širka názvu - Hodnota v pixeloch (zápis napr. 580px) | |
visibility | Určuje či sa má na stránke zobrazovať názov blogu. Hodnota bôže byť visible (názov je zobrazený) alebo hidden (názov je skrytý, predošle parametre netreba mať nadefinované, využitie napr. ak názov blogu je už v hornom obrázku) | |
#counter | Počitadlo návštev | |
right alebo left | Umiestnenie - Absolutna poloha počítadla. Parameter môže byť left (zľava) alebo right (zprava). Hodnota udáva absolutnu pozíciu v pixeloch od daného okraja stránky (blogu). | |
top | Absolutna poloha názvu od vrchu stránky (resp. od vrchu horného obrázka). Udavá sa v pixeloch (zápis napr. 120px). Text by sa nemal dostať mimo horného obrázka. | |
parametre textu | Definujú parametre textu, ktorým sa počet návštev zobrazuje. Zápis pozri parametre textu (prvá tabuľka). | |
Menu | ||
#leftcol | Navigačné menu - poloha a rozmer | |
float | Umiestnenie - môže byť left (vľavo) alebo right (vpravo). | |
width | Širka navigačného menu - Hodnota v pixeloch (zápis napr. 170px), zvyčajne je to 170 pixelov. | |
.menubox | Položky menu | |
parametre textu | Definujú parametre textu pre položky menu. Zápis pozri parametre textu (prvá tabuľka). | |
.menubox a | Položky menu - odkazy | |
parametre textu | Definujú parametre textu pre položky menu. Zápis pozri parametre textu (prvá tabuľka). | |
.menubox a:hover | Položky menu - odkazy - ak je kurzor nad odkazom | |
parametre textu | Definujú parametre textu pre položky menu. Zápis pozri parametre textu (prvá tabuľka). | |
.titles | Položky menu - odkazy | |
background-image | Cesta k obrázku. Ak je obrázok v zložke (priečinku) so štýlom, stačí uviesť iba názov súboru. zápis je url( cesta resp. názov obrázka) | |
height | Výška nadpisu resp. obrázka v pozadí nadpisu - Hodnota v pixeloch (zápis napr. 580px) | |
parametre textu | Definujú parametre textu pre nadpisy kategórií v menu (napr. Archív). Zápis pozri parametre textu (prvá tabuľka). | |
Samotný článok | ||
#maincol | Samotný článok - poloha a rozmer | |
float | Umiestnenie - môže byť left (vľavo) alebo right (vpravo). | |
width | Širka článku - Hodnota v pixeloch (zápis napr. 580px), je to rozdiel šírky stránky a navigačného menu. | |
.txt | Samotný text | |
parametre textu | Definujú parametre textu pre samotný text článku. Zápis pozri parametre textu (prvá tabuľka). | |
.txt a | Samotný text - hypertextový odkaz | |
parametre textu | Definujú parametre textu pre odkaz. Zápis pozri parametre textu (prvá tabuľka). | |
.txt a:hover | Samotný text - hypertextový odkaz - ak je kurzor nad odkazom | |
parametre textu | Definujú parametre textu pre odkaz. Zápis pozri parametre textu (prvá tabuľka). | |
.txt table | Tabuľka | |
parametre textu | Definujú parametre textu v tabuľka. Odporúčam skopírovať parametre textu z elementu .txt.Zápis pozri parametre textu (prvá tabuľka). | |
border-width | Hrúbka okrajov tabuľky - Hodnota je v pixeloch (napr 1px). | |
border-color | Farba okrajov tabuľky - Hodnoty pozri Parametre textu - parameter color. | |
border-style | Štyl čiary okraja tabuľky - Hodnota môže byť: none (bez okraja), hidden (skrytý), dotted (bodkovaný), dashed (čiarkovaný), solid (čiara), double (dvojitá čiara), groove, ridge, inset (3D - vtlačené), outset (3D - vystupujúce). | |
background-color | Farba pozadia tabuľky. Hodnoty pozri Parametre textu - parameter color a naviac hodnota transparent - prvok nemá vlastné pozadie (zobrazuje sa to čo je za nim). | |
.txt td | Bunka tabuľky | |
parametre textu | Definujú parametre textu v tabuľka. Odporúčam skopírovať parametre textu z elementu .txt. Zápis pozri parametre textu (prvá tabuľka). | |
border-width | Hrúbka okrajov bunky - Hodnota je v pixeloch (napr 1px). | |
border-color | Farba okrajov bunky - Hodnoty pozri Parametre textu - parameter color. | |
border-style | Štyl čiary okraja bunky - Hodnota môže byť: none (bez okraja, neodporúčam), hidden (skrytý, neodporúčam), dotted (bodkovaný), dashed (čiarkovaný), solid (čiara), double (dvojitá čiara), groove, ridge, inset (3D - vtlačené), outset (3D - vystupujúce). | |
background-color | Farba pozadia bunky. Hodnoty pozri Parametre textu - parameter color a naviac hodnota transparent - prvok nemá vlastné pozadie (zobrazuje sa to čo je za nim). | |
input | Textové polia a tlačítko pri zadavaní komentára resp. odkazu | |
parametre textu | Definuju parametre textu v daných prvkoch. Doporučujem meniť len parameter color. Zápis pozri parametre textu (prvá tabuľka). | |
border-width | Hrúbka okrajov prvku - Hodnota je v pixeloch (napr 1px). | |
border-color | Farba okrajov prvku - Hodnoty pozri Parametre textu - parameter color. | |
border-style | ||
background-color | Farba pozadia prvku. Hodnoty pozri Parametre textu - parameter color a naviac hodnota transparent - prvok nemá vlastné pozadie (zobrazuje sa to čo je za nim). | |
h1 | Nádpisy | |
parametre textu | Definuju parametre textu, ktorým sa nádpis zobrazuje. Zápis pozri parametre textu (prvá tabuľka). |
Komentáre
tento članok bol
Mám len jednu otázku
done
dakujem ti
zabudol som na specialitky komentarov, ktore sme svojho casu zaviedli
snad pochopite ze ad = @ a bodka = .
re: Dmiba
Moznost vytvorit si vlastny webdizajn je fajn
je tam potrebny
thumbs.db
sm ti
design
Okrem toho, moc viditelne tu nie je nic, ani len linky.
Jo, dost kritiky, idem si vytvorit vlastny design, nech je co kritizovat :-)(-:
ten dizajn
Všetci čo ste mi mailovali ohladom dizajnu
Toto sa netyka zoll-a a enyon-a ich maily som este zastihol.
2 demage
robil som svoj blog na zaklade tvojej instruktaze, dik, ale podobne ako tvoj, kedysi este minuly tyzden, aj moj je dnes, trochu chybny. mohol by si mi dat tip co takto posuva textovu cast? mne sa to zobrazuje na lokalnom kompe v poriadku .. :(
2 demage
jedna poznamka zo dnes
tak ja neviem
a o koho vlastne ide?
uz sa ten dizajn docasne stiahol
...
chybu by trebalo specifikovat trosku blizsie...
pouzitie tabulku ako obmedzenie sirky je nefukcne lebo ta sa automaticky roztiahne (neviem ci to je dane specifikaciou html alebo reprezentaciou v prehliadacoch) aby pohltila prvky s absolutnymi rozmermi...
... v dizajne preto asi doslo k chybe pri zadani sirky menu a sirky hlavneho stlpca kde doslo po scitani k sirke vacsej ako 760px (margin + border + padding + width v rezime standard a v rezime quirk margin + width, blog bezi v rezime quirk - ani ja presne neviem o co sa tu jedna)
tych spominanych 760px je nastavenych v style prvku pagewidth, ak vnorene plavajuce elementy su sirsie su automaticky zoradene pod seba (spomynane rozhadzanie) podla toho ako sa vyskytuju v zdrojovom kode (najprv menu, potom hlavny stlpec)...
najlepsie by bolo spomynany problem vidiet, pretoze sa uz parkrat vyskytol.
este k tym rezimom...
ten spomynany problem je ze po scitani rozmerov vnorenych elementov dojdeme k rozmerom vacsim ako rodicovsky element, ktory sa roztiahne (v pripade ak dcerske elementy nie su plavajuce) alebo ich zoradi (rozhadze - ak dcerske elementy su plavajuce - float)
aktualne je to bezpredmetne
uz sa ta ten
to je sice super
2 sasan
...
toto je pre laikov?
ahoj DaMage
:D
dd
tento clanok uz nezije?
mne to...
obávam sa, že tolko času ani energie nemám
Petula
iviak