0. kódování textu ( hezky česky )
1. je třeba vědet, že nepíšete celou stránku, ale jen jeji část
2. rozmery stránky a formátování textu pomoci CSS
3. jak použít CSS
4. obrázky - rozměry a velikost
5. závěr
0. kódování textu ( hezky česky )
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
</head>
proč zrovna iso-8859-2?
je to
standard ( i pro Mac a UNIXy ), nikoliv
microsoft standard jako windows-1250 !
k tomu bude třeba nějaký editor, který svede uložit stránky v iso-8859-2, nebo konvertor převádějící charset windows-1250 na iso-8859-2 a naopak
1. je třeba vědet, že nepíšete celou stránku, ale jen jeji část
web stránka je složená ze 4 souborů
vy budete tvořit část mezi textem
<!-- zacátek ----> a
<!-- konec ----> kódu celé stránky,
která se volá krz proměnou
fwdp http://clone9.stopiv.cz/warbirds/czlions/index.php
?fwdp=novinky a je v extra souboru jenž vždy začíná:
</body>
<head>
<title>1st Czech Lions | Design</title>
</head>
<body>
<h3>Design</h3>
( neni zrovna obvyklé přerušovat
<body> kvůli jménu stránky, nicméně to funguje )
2. rozměry stránky a formátování textu pomocí CSS
- horní část stránky je vysoká 96px a zabírá plnou šířku
- menu po levé strane je je široké 180px
- pro samotný obsah stránky máte zbytek, je sice nastavená šířka na 600px, ale to jen kvůli zarovnání textu ( pokud vložíte obrázek nebo souvislý text bez mezer, stránka se rozšíří )
k formátování textu je použito CSS, která umí nastavit barvu textu, typ fontu, velikost a pozadí konkrétnímu tagu nebo třídě
3. jak použít CSS
"Cascading Style Sheets" (zkráceně CSS) je nadstavbou HTML ... viz.
www.w3c.org
nebudu nějak složitě popisovat jak fungují, jen uvedu jak je použito CSS na těchto stránkách
styly mám uložené v souboru
./style/standard8blue.css, který volám hned na začátku v hlavičce HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style/standard8blue.css">
</head>
<body leftmargin=0 topmargin=0 style="background-image: url('./img/design/background_lion_text.png');">
používám je pro tagy:
<body>,<div>,<p>,<table>,<dd>,<ul>,<li>,<b>,<i>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<a>,<img>,<pre>
pro příklad ukázka souboru
standard8blue.css
body
{ color: #003399; font-family: Verdana; font-size: 8pt; background-color:#ffffff;
background-attachment:fixed; background-repeat: no-repeat; background-position: 180 100; border: 0px;
scrollbar-face-color: #003399;
scrollbar-shadow-color: darkblue;
scrollbar-highlight-color: lightblue;
scrollbar-3dlight-color: blue;
scrollbar-darkshadow-color: darkblue;
scrollbar-track-color: #F2F4F8;
scrollbar-arrow-color: #F2F4F8;
}
/* SCROLLBAR-BASE-COLOR: #99CCFF;*/
/* SCROLLBAR-ARROW nepodporuje netscape a nektere IE*/
div,p,table,dd,ul,li
{ color: #003399; font-family: Verdana; font-size: 8pt;}
b { color: #003399; font-family: Verdana; font: bold; font-size: 8pt;}
i { color: #900000; font-family: Verdana; font: italic; font-size: 8pt;}
h1 { color: darkblue; font-family: Verdana; font: bold; font-size: 24pt;} /* nepodporuje netscape*/
h2 { color: darkblue; font-family: Verdana; font: bold; font-size: 18pt;} /* nepodporuje netscape*/
h3 { color: darkblue; font-family: Verdana; font: bold; font-size: 13,5pt;} /* nepodporuje netscape*/
h4 { color: darkblue; font-family: Verdana; font: bold; font-size: 12pt;} /* nepodporuje netscape*/
h5 { color: darkblue; font-family: Verdana; font: bold; font-size: 10pt;} /* nepodporuje netscape*/
h6 { color: darkblue; font-family: Verdana; font: bold; font-size: 8pt;} /* nepodporuje netscape*/
A:link { color: #3333ff; font-family: Verdana; font-size: 8pt; text-decoration: none }
A:visited { color: #0f8f2f; font-family: Verdana; font-size: 8pt; text-decoration: none }
A:hover { color: #9955FF; font-family: Verdana; font-size: 8pt; text-decoration: underline }
A:active { color: #003399; font-family: Verdana; font-size: 8pt; background-color: #ffCCFF; }
/* nepodporuje netscape*/
img { border:0; }
/* zadny ramecky okolo linku s obrazkem + zachova barvu pozadi kdyz je A:active, border:0 nepodporuje netscape */
pre { color: #000000; font-family: courier-new; font-size: 8pt; }
u těchto tagů nemusíte již definovat v HTML kódu
style
pokračováni CSS souboru - specialní barvy (class=bb)
/* trampovo prani rozkazem */
.bb { color: #003399; font-family: Verdana; font: italic; font-size:20pt;}
.bb2 { font-family: Verdana; font: bold; font-size:20pt; }
.bkgb1 { color: #ffffff; border-collapse:collapse; background-color:#3366CC;
border-top-width:1; border-right-width:1; border-bottom-width:1; border-left-width:1;
border-color:black; border-style:solid; }
.bkgb2 { color: #ffffff; border-collapse:collapse; background-color:#003399;
border-top-width:1; border-right-width:1; border-bottom-width:1; border-left-width:1;
border-color:black; border-style:solid; }
vyskytne-li se případ, gdy budete chtít použít odlišné narvy ( či negativní ), je ideální púoužít tříd definovaných výše a to následujícím způsobem
<table width=500px cellspacing="0">
<tr>
<td>bez definování tøíd se použije standardní style který je zdìdìn</td>
<td class=bb2>class bb2</td>
</tr>
<tr>
<td class=bkgb1>zajistí nejen modré pozadí, ale i bílé písmo</td>
<td class=bkgb2>které se nemusi definovat pøes tag <code><font></code></td>
</tr>
<tr>
<th class=bkgb2><code><th></code> za Vás bude psát tuène<br>proto taky nemá class=bkgb2 definované písmo</td>
<td class=bkgb1>ale jak zvýraznit jen èást textu v poli ?
<code><b></code> urèitì nebude vhodný, protože je barvený,<br> udìlá <b>pøesnì toto</b>,<br>
proto jsem nechal tag <code><strong></code> neformátovany,
<strong>tím pádem mùže zdìdit barvu defibovanou class=bkgb2<strong><br></td>
</tr>
</table>
| bez definování tříd se použije standardní style který je zděděn |
class bb2 |
| zajistí nejen modré pozadí, ale i bílé písmo |
které se nemusi definovat přes tag <font> |
<th> za Vás bude psát tučne
proto taky nemá class=bkgb2 definované písmo
| ale jak zvýraznit jen část textu v poli ?
<b> určitě nebude vhodný, protože je barvený,
udělá přesně toto,
proto jsem nechal tag <strong> neformátovany,
tím pádem může zdědit barvu defibovanou class=bkgb2
|
|
poznámka: určítě nekoho bude zajímat, proč není v
příkladu kódu použití CSS na tabulce dobře zobrazovaná čeština a v
tabulce samotné je vše v pořádku ... vysvětlenní je ale prosté, tag
<pre> ignoruje kódování stránky, a tak se Vám zobrazí přesně to co vidím já, při otevření zdrojového textu Notepadem
4. obrázky - rozměry a velikost
ne kazdý má super rychlou linku, aby si mohl dovolit stahovat velké obrazky ...
jak tedy efektivne zmenšovat obrázky ?
v první řade je třeba si uvedomit, že existuje nekolik formátů, a každý se hodí pro něco jiného
- u jpg se da nastavit "kvalita" ztrátové komprese
- u png a gif se dá snížit počet barev
pokud tedy obrázek bude obsahovat velké jednobarevné plochy a ostré barevné přechody, je vhodné využít png nebo gif s nižším počtem barev a "adaptivní" paletou, která se přizpůsobi paletě použitých barev ukládaného obrázku
zvětšenina výřezu originálu 32x32px
referenční png ve 4 barvách ( 1248 B )
jpg zmenšený na velikost referenčního obrázku ( 1361 B ) kvalita 20%
4 barevný gif ( 700 B )
5. závěr
- na stránce by neměl být definována ani jedna barva a nebo font
- pro nadpisy jsou definované tagy
<h4>,<h5>,<h6>
