* Mapa strony

Projektowanie, optymalizacja stron

Porady dla webmasterów


* * Galeria w php z opisami * *

Galeria w php jest bardzo wygodna, nie ma konieczności jej robić ręcznie w html ani dodawać kolejnych podstron gdy zdjęć przybywa.
Pliki wygodniej jeśli posiadą nazwę 001, 002 itd. Rozszerzenie jpeg,jpg,png,gif.
Pora na kod php.

<?php
$opis = file('opisy.txt'); // plik z opisami
$duze = glob('duze/*.{jpeg,jpg,png,gif}',GLOB_BRACE); // katalog na zdjecia
$miniaturki = glob('miniaturki/*.{jpeg,jpg,png,gif}',GLOB_BRACE); // katalog na miniaturki
$ilosc = count($miniaturki); //ilosc elementow w tablicy (miniaturek)

for($i = 0; $i < $ilosc; ++$i) {
$iloscNaStronie = 8; //ilosc elementow na jednej stronie
$iloscStron = ceil($ilosc/$iloscNaStronie); } //maksymalna ilosc stron

if($_GET['strona'] && $_GET['strona'] > 0 && $_GET['strona'] <= $iloscStron) $strona = $_GET['strona']-1;
else $strona = 0;

$start = $strona * $iloscNaStronie;
if($start >= $ilosc) $start = 0; $stop = $start + $iloscNaStronie; if($stop >= $ilosc) $stop = $ilosc;

echo '<div>';
if ($strona > 0) { echo '<a href="index.php?strona='.($iloscStron - $iloscStron+1).'">[<<]</a>'; } //do przodu
if ($strona > 0) { echo '<a href="index.php?strona='.($strona).'">[<]</a>'; } //wstecz o jedna strone

for($i = 1; $i <= $iloscStron; ++$i) {
echo '<a href="index.php?strona='.$i.'" >['.$i.']</a>'; //drukowanie linkow do stron
}

if ($strona < $iloscStron-1) { echo '<a href="index.php?strona='.($strona+2).'">[>]</a>'; } //dalej o jedna strone
if ($strona < $iloscStron-1) { echo '<a href="index.php?strona='.($iloscStron).'">[>>]</a>'; } //do konca

echo '<dl>';
for ($i = $start; $i < $stop; ++$i) {
echo '
<dd><p>'.$opis[$i].'</p><a href="'.$duze[$i].'"><img src="'.$miniaturki[$i].'" alt="" /></a></dd>'; } //drukowanie elementów tablic
echo '</dl>';
echo '<div id="stopka"><p>Galeria w php : <a href="http://www.puma.pomorze.pl">Puma</a></p></div> </div>';
?>

Przykładowy kod CSS

* { margin: 0; padding: 0; }
body { margin: 20px auto; background: gold; width: 700px; text-align: center; }
a { color: brown; margin: 0 5px; }
dl { float: left; width: 100%; padding: 5px; margin-top: 5px; border: 1px solid #000000; }
dd { width: 175px; float: left; }
dd p { background: sandybrown; margin: 5px; line-height: 20px; }
dd img { border: 0; width: 150px; height: 112px; border: 1px solid #000000; padding: 5px; }
#stopka { float: left; background: sandybrown; width: 710px; margin-top: 5px; height: 25px; text-align: left; }
#stopka p { margin-left: 20px; }

Przykładowy plik z opisami

opis 1
opis 2
opis 3
opis 4
opis 5
opis 6
opis 7
opis 8

demo

* * Div divovi równy * *

Ta porada jest prosta w swej prostocie i zarazem trudna.
Robiąc strony na tabelkach i przerzucając się na div nadal chcemy 'tabelek'. Jednym z problemów przy robieniu stron na div jest to że 'nie' sposób zrobić aby dwa/trzy div obok siebie miały równą wysokość.
css :

#kontener { overflow: hidden; }
#lewy { float: left; background: #FF0000; }
#prawy { float: right; background: #0000FF; }
#lewy, #prawy { width: 50%; padding-bottom: 2000px; margin-bottom: -2000px; }

Ważnym w tym kodzie jest overflow: hidden dla div obejmującego. Dla naszych równych div trzeba dać nienaturalny padding-bottom oraz równej wysokości margin-bottom ujemny, temu padding.
html :

<div id="kontener">
<div id="lewy">
<p>lewy</p>
<p>lewy</p>
<p>lewy</p>
</div>
<div id="prawy">prawy</div>
</div>

demo

* * Rotator banerów w php * *

Rotator pobiera dane z zewnętrznego pliku (w tym przykładzie z pliku rotator.txt). Wyświetlanie jest losowe przy każdym odświeżeniu strony.
Ten rotator można wykorzystać też do losowej grafiki, cytatów.

<?php
$file = file("rotator.txt", "r"); // odczyt z pliku 'rotator.txt' danych
$ile = count($file); // linijki z calego pliku 'rotator.txt'
echo $file[rand(0,$ile)]; // liczba okreslaja poczatek(linia zero), drugi parametr- do konca pliku
?>

Oraz przykładowy plik rotator.txt
Uwaga : po każdym kodzie banera, kliknij enter aby następny kod był w nowej linii.

<a href="http://www.intermania.kom.pl"><img src="baner/01.jpg" alt="">
<a href="http://www.intermania.kom.pl"><img src="baner/02.jpg" alt="">
<a href="http://www.intermania.kom.pl"><img src="baner/03.jpg" alt="">
<a href="http://www.intermania.kom.pl"><img src="baner/04.jpg" alt="">
<a href="http://www.intermania.kom.pl"><img src="baner/05.jpg" alt="">

demo
ps. Na niektórych serwerach trzeba usunąć drugi parametr file, żeby rotator działał, czyli będzie tak :

<?php
$file = file("rotator.txt");
$ile = count($file);
echo $file[rand(0,$ile)];
?>

* * Osobny arkusz stylów dla IE * *

Przy projektowaniu stron sporo kłopotów sprawia przeglądarka IE. Dlatego czasami jest konieczność zastosowania stylu który 'widzi' tylko IE.
Podstawowy komentarz warunkowy dla IE wygląda tak:

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->

Możemy uściślić zasady dla jakiej wersji ma to być:
Zrozumie to tylko Internet Explorer w wersji 5.

<!--[if IE 5]>
<link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->

Widzieć ten komentarz będą tylko wcześniejsze wersje (czyli poniżej 6).

<!--[if lt IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->

Wszystkie komendy:
lt - mniejszy;
gt - większy;
lte - mniejszy i równy;
gte - większy i równy;

* * Układ strony na div * *

Projektowanie strony na div jest jeszcze mało popularne wśród amatorów, może dlatego że mało jest 'gotowców'.
Postaram się zaprezentować standardowy układ :
Top, menu z lewej i prawej strony, w środku treść i stopka.
Jest wiele sposobów na zrobienie takiego układu, można zastosować pozycjonowanie, float, kombinacja tych rozwiązań.
Zacznijmy od kodu html :

<div id="logo">Logo</div>
<div id="kontener">
<div id="lewa">menu</div>
<div id="srodek">tekst</div>
<div id="prawa">menu</div>
</div>
<div id="stopka">stopka</div>

Zarys strony mamy zrobiony, teraz formatowanie wszystkiego za pomocą css :

* {margin: 0; padding: 0;}
body {text-align:center; background:#E6E6FA; color:#000000; margin:0 auto; width:770px;}
#logo {width:100%; height:70px; background:#7FFFD4;}
#kontener {width:100%; position:relative;}
#lewa {position:absolute; left:0; top:0; width:120px;}
#srodek {width:530px; background:#00FFFF; border-left:120px solid #6495ED; border-right:120px solid #7FFF00;}
#prawa {position:absolute; top:0; right:0; width:120px;}
#stopka {width:100%; height:30px; background:#7FFFD4;}
#srodek p {padding:8px 4px;}

ps. Kolory są tak dobrane aby było lepiej widać cały układ div'ów.
Układ jest tak zrobiony że wizualnie div'y będą równe pod warunkiem że div środkowy będzie najdłuższy (będzie w nim najwięcej tekstu).
demo


Kolejny układ jest taki sam, oparty jest na grafice imitującej kolumny.
Kod html troszkę się różni :

<div id="logo">Logo</div>
<div id="kontener">
<div id="lewa">menu</div>
<div id="srodek">tekst</div>
<div id="prawa">menu</div>
<div id="czysc"></div>
</div>
<div id="stopka">stopka</div>

Kod css :

* { margin: 0; padding: 0; }
body { text-align:justify; background:#E6E6FA; color:#000000; margin:5px auto; width:770px; }
#logo { height:70px; background:#7FFFD4; border:5px solid #000000; }
#kontener { width:100%; height:100%; background:url(02-tlo.jpg) top center repeat-y; }
#lewa { float:left; width:125px; }
#srodek { width:510px; padding:0 5px; float:left; }
#prawa { float:right; width:125px; }
#czysc { clear:both; }
#stopka { height:30px; background:#7FFFD4; border:5px solid #000000; }

Ten układ zawsze zachowa wygląd kolumnowy, jednak jest mniej elastyczny od poprzedniego.
demo


Kolejne układ Top, menu z lewej i prawej strony, w środku treść i stopka zachowa zawsze układ kolumnowy tzn. div lewa, srodek i prawa będą równe.
Kod html :

<div id="logo">Logo</div>
<div id="kontener">
<div id="lewa">menu</div>
<div id="srodek">tekst</div>
<div id="prawa">menu</div>
</div>
<div id="stopka">stopka</div>

Kod css :

* { margin: 0; padding: 0; }
body { text-align: center; background: #E6E6FA; color: #000000; margin: 0 auto; width: 770px; }
#logo { height: 70px; background: #7FFFD4; }
#kontener { width:100%; overflow: hidden; }
#lewa, #srodek, #prawa { float: left; padding-bottom: 2000px; margin-bottom: -2000px; }
#srodek { width: 530px; background: #00FFFF; }
#lewa, #prawa { width: 120px; background: #7FFF00; }
#stopka { width: 100%; height: 30px; background: #7FFFD4; }

demo
Więcej o tym sposobie zachowania równych div >> Div divovi równy

* * Centrowanie strony * *

Sporo osób się pyta jak wycentrować stronę aby niezależnie od rozdzielności ekranu zawsze było na środku.
W stylach body { margin-right: auto; margin-left: auto; width: 770px; } (bez ustalenia szekości centrowanie nie zadziała), oczywiście można temu centrowaniu nadać color tła background-color itd.
Można ten zapis uprościć :
body { margin: 0 auto; width: 770px; }
Dla IE margin: 0 auto; działa TYLKO przy doctype strict, inaczej trzeba dodać body { text-align: center; }.
Jest to centrowanie poziome, aby uzyskać też pionowe w oknie przeglądarki należy zapis zmienić.

Załóżmy że mamy pole o wymiarach 200x200px,
<div id="pole"></div>.
Napisać position: absolute; top: 50%; left: 50%; i margin top/left minusowe połowie wymiaru naszego pola. W naszym przypadku jest to margin-top: -100px; margin-left: -100px;.

Gotowy zapis wygląda tak :
#pole {
position: absolute; top: 50%; left: 50%;
width: 200px; height: 200px;
margin-top: -100px; margin-left: -100px; }

* * Kolejność pisania a (href) * *

Jeżeli chcemy zastosować wszystkie dostępne a na stronie to bardzo ważna jest kolejność wpisywania.

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

Poszczególne linie to :
1. wygląd odsyłacza na stronie
2. wygląd odwiedzonego hiperłącza
3. link po najechaniu myszką
4. link aktywny.

Portfolio

projektowanie, optymalizacja

www.puma.pomorze.pl

2017 / 06 / 29
Po
Wt
Śr
Cz
Pi
So
Ni
1
2
3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Jeżeli skorzystałeś z moich porad,
będę wdzięczny za umieszczenie linka do mojej strony.

<a href="http://www.puma.pomorze.pl" title="Porady webmasterskie">Porady webmasterskie</a>
Konkurs WWW - forumweb.prv.pl :: 3 MIEJSCE
(2007.05)
Puma © 14.05.2006 Moje strony: Portfolio | Świat marzeń i prawdy | Aktualności - komentarze