* Mapa strony

Projektowanie, optymalizacja stron

Porady dla webmasterów


* * Download i dane pliku * *

Gdy mamy na stronie download to wpisywanie ręcznie aktualizacji danego pliku i jaki ma rozmiar może być uciążliwe.
Rozwiązaniem jest króciutki kod w php.

<?php
function dane_pliku($plik, $nazwa) {
$czas = filemtime($plik);
$data = date("d.m.Y, G:i", $czas);
$rozmiar = filesize($plik)/1024;
echo '* Aktualizacja: '.$data.' * <a href="'.$plik.'">'.$nazwa.' '.number_format($rozmiar, 2).' kB</a> *';
}
?>

Wywołanie funkcji jest przez napisanie:

<?php dane_pliku('ścieżka_do_pliku', 'nazwa_wyświetlana'); ?>

demo

* * Menu poziome rozwijane * *

Wykorzystamy kod (css) z n.w. menu poziomego i dodamy efekt rozwijania. Dodam też efekt linku blokowego, będzie ładniejszy efekt.
hover można przypisać dowolnemu znacznikowi i właśnie wykorzystamy tutaj hover przypisany do znacznika li.
Ukryć dany element strony możemy dzięki display: none aby następnie pokazać go display: block.
css :

ul { float: left; width: 505px; list-style: none; border-width: 1px 0 0 1px; border-style: solid; border-color: #000000; }
ul li { float: left; background: #ceceaa; width: 100px; text-align: center; border-width: 0 1px 3px 0; border-style: solid; border-color: #000000; }
ul li a { display: block; width: 100%; }
ul li.submenu { position: relative; }
ul li.submenu ul { display: none; width: 101px; }
ul li.submenu:hover ul { display: block; overflow: hidden; position: absolute; top: 22px; left: 0; }

html :

<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li class="submenu">rozwiń
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>

Niestety przeglądarka IE 6 i starsze wersje nie 'rozumieją' hover do innego znaczniki niż a (linki).
Zastosujemy tutaj hack, ściągamy i zapisujemy ten plik oraz dodajemy w stylach :
body { behavior:url("csshover2.htc"); }
demo

* * Menu pionowe i poziome * *

Menu zrobimy na znacznikach ul/li lub dl/dt/dd, dlatego że wtedy mamy pełną kontrolę nad całością menu.

Menu pionowe jest praktyczniej robić na trzech znacznikach (dl/dt/dd).
css :

dl { background: #ceceaa; width: 130px; border: 1px solid #000000; }
dt { background: #000000; text-align: left; padding-left: 10px; color: #ffffff; }
dd { text-align: center; border-top: 1px solid #000000; }

html :

<dl>
<dt>Menu</dt>
<dd><a href="#">link</a></dd>
<dd><a href="#">link</a></dd>
<dd><a href="#">link</a></dd>
<dd><a href="#">link</a></dd>
<dd><a href="#">link</a></dd>
</dl>

Menu poziome.
Wystarczą nam dwa znaczniki, więc użyjmy ul/li.
Kluczowym elementem w menu poziomym jest float: left;.
css :

ul { float: left; width: 505px; list-style: none; }
li { float: left; background: #ceceaa; width: 100px; text-align: center; border-width: 0 1px 3px 0; border-style: solid; border-color: #000000; }

html :

<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>

demo

* * Link blokowy * *

Na pewno spotkaliście się z efektem że dany link jest 'klikalny' nawet poza bezpośrednim obrębem linku.
W css ustalamy szerokość linku tzn. naszego 'klikalnego' pola np. 100px. Do tego trzeba dodać display: block, kod w całości wygląda tak :
a { width: 100px; display: block; }.
Trochę inaczej postępujemy gdy nasz link jest w komórce, aby nasze pole 'klikalne' zajmowało całą komórkę to wystarczy tylko display: block (aby to działało też w IE to trzeba dodać width: 100%).
Aby centrować poziomo link w bloku dodajemy: text-align: center;.
Natomiast centrowanie pionowe uzyskujemy przez dodanie line-height linkowi. Cały kod z centrowaniem wygląda tak:
a { width:100px; display:block; text-align:center; line-height:20px; }
przykład
ps. Aby lepiej było widać efekt, dodałem border: 1px solid #000000;.

* * Wyświetlenie kodu na stronie * *

Może zdarzyło Ci się że chciałeś/aś pokazać kod html na stronie bez jego wykonywania. Zasada jest prosta, żeby to zrobić trzeba znaki < i > zamienić na encje &lt; i &gt;. Niby proste, jednak gdy masz dłuższy kod wtedy jest trochę roboty z tym.
Ten skrypt zamienia to automatycznie, wystarczy w pole formularza wpisać swój kod a niżej pokaże się to co masz wkleić na swoją stronę aby kod nie był wykonywany, lecz żeby był widoczny.
demo
pobierz skrypt

* * Pozdrowienia na stronie v.3 * *

Ten skrypt dodaje możliwość pozdrowień ze strony przez odwiedzających, pozdrowienia są od razu widoczne na stronie.
Co można ustawić w pliku ?
1. Ilość znaków w jednym pozdrowieniu.
2. Czas po którym można wysłać ponownie pozdrowienie z danego komputera.
3. Ilość pozdrowień widocznych na stronie.
Oprócz tego można dostosować kolorystykę pozdrowień, formularza itd.
Należy plik pozdrowienia.txt umieścić w tym samym katalogu co formularz i nadać jemu chmod 666.

Główną część skryptu należy umieścić przed doctype.

<?php
// skrypt pochodzi ze strony www.puma.pomorze.pl, autor Puma.

$ile = 4; // ile pozdrowien ma pokazac (zero tez sie liczy)
$min_znakow = 3; // minimum znakow w pozdrowieniu
$max_znakow = 5; // maksymalnie znakow w pozdrowieniu
$min_cookies = 5; // czas po ktorym mozna ponownie wyslac pozdrowienie, 1=1 sekunda

if(isset($_COOKIE["pozd"])) { $komunikat .= 'Nie możesz tak szybko po sobie wysyłać pozdrowienia.'; }

if ((isset($_POST["pozdrowienia"])) AND (!isset($_COOKIE["pozd"]))) {

// ucina slashe, biale znaki oraz zamienia znaki specjalne m.in. zabezpiecza przed wpisaniem kodu html
$_POST["pozd"] = stripslashes(strip_tags(trim($_POST["pozd"])));
$_POST["imie"] = stripslashes(strip_tags(trim($_POST["imie"])));

// pozdrowienie mozna wyslac jezeli ilosc znakow bedzie miedzy $nim_znakow - $max_znakow
if ( (strlen($_POST["pozd"]) >= $min_znakow) AND (strlen($_POST["pozd"]) <= $max_znakow) ) {

$tekst = file("pozdrowienia.txt"); // odczytuje dane z pliku, nadac chmod 666

// zapisanie nowej linijki i starej zawartości
$plik = fopen("pozdrowienia.txt", "w");

flock($plik, 2);
fwrite($plik, "$_POST[imie] »» $_POST[pozd] rn");
for($i=0; $i<$ile; $i++) fwrite($plik, $tekst[$i]);
flock($plik, 3);
fclose($plik);
setcookie ("pozd", "pozd", time()+$min_cookies); //ustawia ciasto mowiace o tym, ze już wyslal pozdrowienia.
$_POST["pozd"] = NULL; $_POST["imie"] = NULL;
}
else {
$komunikat .= 'Pozdrowienie musi mieć '.$min_znakow.' - '.$max_znakow.' znaków';
$komunikat .= '<br />Ilość znaków w pozdrowieniu '.strlen($_POST["pozd"]).'';
} }

// odczyt pliku do tablicy
$tekst = file("pozdrowienia.txt"); // odczytuje dane z pliku, nadac chmod 666
$gwiazdka = '<span style="margin: 0 5px;">*</span>';

for($i=0; $i<$ile; $i++) {
if (strlen($tekst[$i]) > 1) {

// zmienna $tekst[] to pozdrowienie, $gwiazdka to przerywnik miedzy pozdrowieniami
$pozdrowienia .= $gwiazdka.$tekst[$i].$gwiazdka; }
} ?>

Przykładowy wygląd formularza.


<form action="" method="post">
<fieldset><legend>Pozdrowienia</legend>
<label for="pole2">Imię: </label>
<input type="text" name="imie" size="20" value="" id="pole2">
<label for="pole1">Pozdrowienia: </label>
<input type="text" name="pozd" size="40" value="" id="pole1">
<input type="submit" value="Pozdrów" name="pozdrowienia">
</fieldset>
</form>

demo

* * Wysyłanie przez stronę * *

Jest to prosty skrypt który, jednak jest czasami bardzo przydatny. Załóżmy że chcesz na swojej stronie umieścić formularz do kontaktu z Tobą, nie chcesz jednak aby otwierał się program pocztowy.
Do prawidłowego działania tego formularza potrzebujesz dwóch rzeczy :
1. Serwera z obsługą php.
2. Serwer musi posiadać włączoną funkcje mail.

<?php
echo'
<form action="'.$_SERVER['PHP_SELF'].'" method="post">
<input type="text" name="email" size="20" value="Twój e-mail" /><br />
<textarea name="tresc" cols="25" rows="5">Treść maila</textarea><br />
<input type="submit" value="Wyślij" name="wyslij" />
</form>';
if (isset($_POST[wyslij])) {
mail("puma@puma.pl", "temat", $_POST[tresc], "From: $_POST[email]"); }
?>

Jest to najprostrza forma formularza, warto potem go zabezpieczyć przed spawaniem, ale to już zostawiam Twojej inwencji twórczej.
ps. E-mail puma@puma.pl jest przykładowy i zmień go na Swój adres.

* * Wygryzanko * *

Na niektórych stronach może spotkaliście tzn. Wygryzanko. Jest to forma reklamy polegająca na wpisaniu swojego adresu strony, który potem się na tej stronie pokaże.

Plikowi wygryzanko.txt trzeba nadać chmod 777.
Oto kod wygryzanka.

<?php
if (isset($_POST[wyslij])) {
$plik = fopen("wygryzanko.txt", "w");
fwrite($plik, "$_POST[link]"); // zapis do pliku
fclose($plik); }
echo'
<form action="'.$_SERVER['PHP_SELF'].'" method="post">
<fieldset><legend>Wygryzanko</legend><br />
<label for="pole1">http://</label>
<input type="text" name="link" size="20" value="" id="pole1" />
<input type="submit" value="Wyślij" name="wyslij" />
</fieldset>
</form>';
$wygryzanko = file("wygryzanko.txt");
echo "<a href=\"http://$wygryzanko[0]\">$wygryzanko[0]</a>";
?>

demo

Portfolio

projektowanie, optymalizacja

www.puma.pomorze.pl

2017 / 12 / 11
Po
Wt
Śr
Cz
Pi
So
Ni
1
2
3
4
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
31

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