* * 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
* * 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>
* * 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.
* Wiadomość do 500 znaków
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>
