Dizajn stránkovania

Dizajn, ako vo väčšine prípadov, je kľudne na vás. Môžete použiť aj nástroje vývojára v prehliadači pri skúšaní dizajnu a potom to iba nahádzať do súboru global.css. My však použijeme konkrétny dizajn, ktorý sa dosť často využíva a budeme musieť naň použiť jednu novú hodnotu vlastnosti display, ktorá sa dá veľmi prakticky a výhodne použiť takmer všade a práve teraz uvidíte jej význam. Náš zoznam bude v riadku, každá položka bude mať orámovanie pre jednotlivé stránky, na stav hover nastavíme inú farbu a rovnako nastavíme iný dizajn pre práve aktuálnu stránku (spravíme to podobne ako v práve navštívenej stránke v menu). Toto by ste zvládli aj sami, mohlo by to vyzerať nejako takto:

 

fotogaleria.php (len zmeny):

while($photosCount > 0){

    echo '<li><a ';

    if($pageLink == $page){
        echo ' class="active" ';
    }

    echo 'href="fotogaleria.php?page='.$pageLink.'">'.$pageLink.'</a>';
    echo '</li>';
...

 

global.css (len zmeny):

/**********PAGINATION***********/
ul.pagination {
    padding: 0;
}

ul.pagination li {
    display: inline;
}

ul.pagination li a {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
}

 ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover{
    background-color: #ddd;
}

 

Ako vidíte, stránkovanie už vyzerá lepšie, je zvýraznený aktívny prvok a takisto je zvýraznenie stavu hover. Náš zoznam (ul) stránkovania chceme ešte umiestniť do stredu pod fotogalériu a pridať mu nejaký okraj hore a dole. Poďme sa ale zamyslieť nad pozíciou jednotlivých prvkov. Najvnorejenšjí prvok je odkaz (a), ktorý je defaultne inline a rovnakú hodnotu vlastnosti display sme určili aj prvku zoznamu (li). Ako vieme, tieto vnútroriadkové elementy sa vyznačujú tým, že zaberajú v riadku len toľko miesta, koľko potrebujú. Zoznam je však defaultne blokový element. My chceme stránkovanie umiestniť do stredu, použijeme na to pravidlo text-align: center pre nadradený element (div v ktorom je ul), určíme mu nejakú triedu alebo id...

 

Po pridaní tohto pravidla sa zoznam naozaj zobrazí v strede. Okrem toho je aj text v nadpise prvej úrovne zarovnaný na stred, takže pridáme pravidlo pre nadpis prvej úrovne zarovnania textu naľavo. Keďže je to ale blokový element, zaberá celú dostupnú šírku, čo je v tomto prípade zbytočné. Možno bude v tom istom riadku pri ňom niečo naľavo alebo napravo, takže nechceme, aby zaberal celú šírku ale iba toľko, koľko potrebuje. Toto vám napovedá, že by sme mohli použiť hodnotu inline. To by sme ale potom nemohli hýbať s rozmermi tohto elementu a pridávať mu napríklad okraje (margin).

 

Práve pre tento prípad sa nám hodí hodnota vlastnosti display s názvom inline-block (vnútroriadkový blok). Ako je zrejmé z názvu, jedná sa o kombináciu hodnoty inline a blok. Pre nás je teraz dôležité, že jednak sa element správa ako inline, je v riadku a nezaberá celú šírku, ale na druhej strane sa správa ako blok, má zachovaný svoj rozmer a zaberá svoje miesto, takže sa mu dajú nastavovať okraje aj horizontálne aj vertikálne. Skúste sa zobraziť nad zoznamyv nástrojoch vývojára a všimnite si, že aj jeden aj druhý zaberajú čudnú plochy a sú zvláštne umiestnené. Pridajte túto vlastnosť pre zoznam galérie (ul #gallery). Ako vidíte, galéria sa nám zúžila na jeden stĺpec. Je to preto, pretože zoznamu stačí aj takáto šírka, aby všetko zobrazil. My chceme, aby zaberal celú šírku, takže mu nastavíme sto percentntú šírku. Pridajte pravidlo inlin-block aj pre druhý zoznam.


Zobrazte sa teraz nad jednotlivé elementy v nástrojoch vývojára a uvidíte, koľko miesta zaberajú a aké sú ich okraje. Teraz by už mali obidva zoznamy zaberať takú plochu, akú chceme. Okrem toho je možné nastaviť stránkovanie okraje zhora aj zdola, aby nebolo nalepené na galériu a na spodný okraj obsahu stránky. Kód by mal vyzerať teda takto:

 

fotogaleria.php (len zmeny):

<div id="gallery-content" class="main-content right">

 

global.css (len zmeny):

#gallery{
    display: inline-block;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/**********PAGINATION***********/
#gallery-content{
    text-align: center;
}

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 10px 0px 20px 0px;
}

 

Ako je vidieť, všetko už vyzerá tak ako má. Táto hodnota má viacero výhod, dostaneme sa k nim však neskôr, odteraz ju ale v takýchto prípadoch budeme používať. Poďme si ešte na záver tejto kapitoly spraviť jednu vec. Pri miniatúrach vo fotogalérii sa zvykne na stav hover nejaky zvýrazniť, že je možné na miniatúru kliknúť a zobraziť tak jej detail (zväčšeninu). Môžeme to spraviť pomocou vlastnosti border alebo by sme mohli zväčšiť priestor okolo obrázka a nastaviť pozadie. My si teda určíme jednoduchý border, ktorý spolu s kurzorom prsta mal tvoriť jasný znak toho, že sa dá na obrázok kliknúť.

 

Musíme zvážiť ale jednu vec. Ak si spomeniete, zobrazovanie troch miniatúr v jednom riadku v galérii máme presne vyrátané na jeden pixel. Ak by sme pridali border odkazu (a:hover), zväčšilo by to jeho rozmer a tak by nám ostatné fotky odskočili do nového riadku, pretože by na ne neostalo miesto. Práve preto použijeme namiesto vlastnosti border vlastnosť outline (vonkajšia čiara, vonkajšie orámovanie), ktorá je podobná ako border. Jej hlavná výhoda je ale v tom, že spraví síce rám okolo elementu, ale nemá vplyv na jeho konečnú veľkosť. Táto vlastnosť dáva hranicu ešte za border, čiže ak by sme mali aj border aj outline, od vnútra elementu by bola najrpv border, ktorá sa ráta do rozmerov a následne outline, ktorá sa neráta. A presne to v tomto momente potrebujeme, po prejední myšou ponad fotku sa nám okolo miniatúry spraví rám a náš dizajn to nerozhodí:

 

global.css (len zmeny):

#gallery A:HOVER{
    outline: 2px solid #7d8079;
}

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Obsah súborov projektu po tejto prednáške

1 - footer.php

<div class="footer">
</div>

2 - fotogaleria.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "fotogaleria";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div id="gallery-content" class="main-content right">
<h1>Fotogaléria</h1>
<div class="line"></div>

<?php

$pictures = array();

for($i = 0; $i < 30; $i++){
$pictures[] = 'images/placeholder.jpg';
}

//zadefinovanie maximalneho poctu pre jednu stranku a nacitanie parametra (urcenie aktualnej stranky)
$countPerPage = 12;
if($_GET['page']){
$page = $_GET['page'];
}else{
$page = 1;
}

//vypocet od ktorej po ktoru fotku zobrazujeme galeriu
$start = ($page-1)*$countPerPage;
$end = $page*$countPerPage;

echo '<ul id="gallery">';
for($i = $start; $i < $end; $i++){

if($pictures[$i]){
echo '<li>';

echo '<a class="left';
if(($i+1)%3){
echo ' photo-margin';
}
echo '" target="_blank" href="'.$pictures[$i].'">';

echo '<img src="'.$pictures[$i].'">';
echo '</a>';
echo '</li>';
}
}
echo '</ul>';

//cyklus, ktory nam vypise dostatocny pocet odkazov pre jednotlive stranky
$pageLink = 1;
$photosCount = count($pictures);

echo '<ul class="pagination">';
while($photosCount > 0){

echo '<li><a ';

if($pageLink == $page){
echo ' class="active" ';
}

echo 'href="fotogaleria.php?page='.$pageLink.'">'.$pageLink.'</a>';
echo '</li>';
$photosCount = $photosCount - $countPerPage;
$pageLink++;
}
echo '</ul>';

?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

3 - global.css

BODY{
margin: 0;
background-color: #dee8e7;
font-family: Arial;
}

H1{
color: #5b6b78;
margin-bottom: 10px;
}

.line{
height: 3px;
border-top: 1px dotted #5b6b78;
border-bottom: 1px dotted #5b6b78;
margin-bottom: 25px;
}

.main{
background-color: #f6f7f1;
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

.header{
border-bottom: 1px solid #7d8079;
height: 150px;
}

.header-inner1{
}

.header-inner2{
}

.content{
}

.footer{
border-top: 1px solid #7d8079;
height: 200px;
}

.half-width{
width: 50%;
}

.full-height{
height: 100%;
}

.left{
float: left;
}

.right{
float: right;
}

.clear{
clear: both;
}

/**********MENU***********/
.sidebar{
width: 200px;
height: 400px;
}

.sidebar UL{
list-style-type: none;
padding: 0;
margin: 0;
}

.sidebar UL LI{
}

.sidebar UL LI A{
display: block;
padding: 15px 0px 15px 35px;
border-bottom: 1px solid #7d8079;
color: #7d8079;
font-family: Arial;
text-decoration: none;
text-transform: uppercase;
}

.sidebar UL LI A.active{
color: #f5f7f4;
background-color: #f96b81;
}

.sidebar UL LI:HOVER A{
background-color: #5b6b78;
color: #d6e3e9;
}

.main-content{
width: calc(100% - 241px);
min-height: 700px;
border-left: 1px solid #7d8079;
padding-left: 20px;
padding-right: 20px;
}

/**********GALERIA***********/
#gallery{
display: inline-block;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}

#gallery A{
display: block;
height: 133px;
margin-bottom: 10px;
}

#gallery A:HOVER{
outline: 2px solid #7d8079;
}

#gallery IMG, #gallery A{
width: 213px;
}

.photo-margin{
margin-right: 10px;
}

/**********PERSONS***********/
.persons{
width: 100%;
table-layout: fixed;
font-family: Arial;
}

.persons, .persons TH, .persons TD{
border: 1px solid #D9E4E6;
}

.persons TH, .persons TD{
padding: 15px;
}

.persons TH{
background-color: #167F92;
color: #FFFFFF;
font-weight: normal;
text-transform: uppercase;
}

.persons TR:nth-child(odd){
background-color: #D9E4E6;
}

.persons TR{
color: #024457;
background-color: #FFFFFF;
}

.persons TD{
font-size: 14px;
}

.persons TR:HOVER{
color: #f5f7f4;
background-color: #f96b81;
cursor: pointer;
}

/**********PERSONS***********/
.contact_form{
padding: 20px;
border: 1px solid #ebebeb;
background-color: white;
font-family: Arial;
font-size: 14px;
color: #455560;
text-transform: uppercase;
text-align: center;
}

.contact_form INPUT, .contact_form TEXTAREA, .contact_form LABEL{
display: block;
width: 100%;
}

.contact_form LABEL{
margin-bottom: 5px;
text-align: left;
}

.contact_form INPUT, .contact_form TEXTAREA{
height: 30px;
border: 1px solid #bababa;
margin-bottom: 30px;
}

.contact_form TEXTAREA{
min-height: 100px;
min-width: 100%;
max-width: 100%;
}

.contact_form INPUT[type="submit"]{
display: inline;
width: 200px;
height: 40px;
background-color: #7bc143;
border: 1px solid #6fae3c;
font-size: 16px;
color: #FFFFFF;
text-transform: uppercase;
}

.contact_form INPUT[type="submit"]:HOVER{
cursor: pointer;
background-color: #42aa44;
}

.success, .error{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 10px;
}

.success {
color: #4F8A10;
background-color: #DFF2BF;
}

.error {
color: #D8000C;
background-color: #FFBABA;
}
/**********PAGINATION***********/
#gallery-content{
text-align: center;
}

ul.pagination {
display: inline-block;
padding: 0;
margin: 10px 0px 20px 0px;
}

ul.pagination li {
display: inline;
}

ul.pagination li a {
color: black;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}

ul.pagination li a:hover{
background-color: #ddd;
}

4 - header.php

<div class="header">
<div class="header-inner1 full-height half-width left"></div>
<div class="header-inner2 full-height half-width left"></div>
</div>

5 - index.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "index";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Domov</h1>
<div class="line"></div>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

6 - kontakt.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "kontakt";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Kontakt</h1>
<div class="line"></div>

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST' && $_POST['contact_form']){
if(!preg_match('#^[a-zA-Z0-9]{5,10}$#', $_POST['name']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
echo '<p class="error">Zadajte prosim korektne udaje</p>';

//naplnenie formulara
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
}else{
//odoslanie emailu
echo '<p class="success">Vasa sprava bola uspesne odoslana.</p>';

$name = '';
$email = '';
$subject = '';
$message = '';
}

}

?>

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" class="contact_form">
<label for="email">Meno a priezvisko</label>
<input type="text" name="name" id="name" value="<?php echo $name;?>"><br><br>

<label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php echo $email;?>"><br><br>

<label for="subject">Predmet</label>
<input type="text" name="subject" id="subject" value="<?php echo $subject;?>"><br><br>

<label for="message">Správa</label>
<textarea name="message" id="message" placeholder="Zadajte text spravy..."><?php echo $message;?></textarea><br><br>

<input type="submit" name="contact_form" value="Odoslat">
</form>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

7 - menu.php

<div class="sidebar left">
<ul>
<li><a class="<?php if($actual_page == "index"){echo 'active';}?>" href="index.php">Domov</a></li>
<li><a class="<?php if($actual_page == "o-nas"){echo 'active';}?>" href="o-nas.php">O nás</a></li>
<li><a class="<?php if($actual_page == "fotogaleria"){echo 'active';}?>" href="fotogaleria.php">Fotogaléria</a></li>
<li><a class="<?php if($actual_page == "kontakt"){echo 'active';}?>" href="kontakt.php">Kontakt</a></li>
</ul>
</div>

8 - o-nas.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "o-nas";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>O nás</h1>
<div class="line"></div>

<?php
$person_1 = array('Raťafák', 'Plachta', 'plachtos@mail.sk','0903 123 123');
$person_2 = array('Od kuka', 'do kuka', 'kuko@mail.sk','0903 123 123');
$person_3 = array('Joey', 'Tribbiani', 'ako.sa.mas@mail.sk','0903 123 123');
$person_4 = array('Charlie', 'Harper', 'hooker@mail.sk','0903 123 123');
$person_5 = array('Chruno', 'Moysey', 'abstinent@mail.sk','0903 123 123');

$pole = array($person_1, $person_2, $person_3, $person_4, $person_5);

$pole[5] = array('Jardo', 'Jágr', 'legenda@mail.sk','0903 123 123');

echo '<table class="persons">';
echo '<tr>';
echo '<th>Meno</th>';
echo '<th>Priezvisko</th>';
echo '<th>Email</th>';
echo '<th>Telefónne číslo</th>';
echo '</tr>';

for($i=0; $i<count($pole); $i++){
echo '<tr>';

for($j=0; $j<count($pole[$i]); $j++){
echo '<td>'.$pole[$i][$j].'</td>';
}

echo '</tr>';
}

echo '</table>';

?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

dizajn strankovaniastrankovanie stylstrankovanie dizajncss strankovanie

IT ftip

Ako volá programátor o pomoc keď sa topí? F1, F1, F1!!!