Nähtud käskude järgi veebilehe sisu kokkupanekuga saab üsna varsti hakkama. Põhjalikum kujundamine aga nõuab sageli suuremat süvenemist, et taustade värvid ja piltide laiused ilusti paika saaks. Kui tahta “oma ja head” kujundust saada, siis tuleb see tee ikka läbi käia. Vahel aga on mugav end võõraste sulgedega ehtida ning kasutada mõnd juba olemasolevat kujunduspõhja. Märksõna “HTML template” või “CSS template” alt võib neid veebist hulgem leida ning mõndagi neist lubatakse vabalt kasutada.
Üksiku teate lugemine
Veebilehestikus on sisu ikka mitme lehe jagu. Kujundus aga võiks kokkukuuluvatel lehtedel ühesugune või vähemasti sarnane olla.
P2is2.php
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta name=”viewport” content=”width=device-width; initial-scale=1.0;
maximum-scale=1.0;”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>IT Nali</title>
<link href=”Styless.css” rel=”stylesheet” type=”text/css” />
<h1>IT Nali</h1>
</head>
<body>
<div id=”header”>
<div class=”nav”>
<ul>
<li><a href=”Nali.php”>Nali 1</a></li>
<li><a href=”Nali2.php”>Nali 2</a></li>
<li><a href=”Nali3.php”>Nali 3</a></li>
<li><a href=”Nali4.php”>Nali 4</a></li>
<li><a href=”Nali5.php”>Nali 5</a></li>
</ul>
</div>
</div>
<div class=”clear”></div>
Nüüd loome sellele veebilehele jaluse
Jalus2.php
<div class="nav2">
<p>Design by <a
href="http://www.mobifreaks.com">Mobifreaks.com</a></p>
</div>
</body>
</html>
Järgmisena teeme selle lehe jaoks CSS-i, mille saab leida ja kopeerida saidilt https://mobifreaks.github.io/
Styless.css
@charset "utf-8";
/* CSS Document */
body{
background:bisque;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
#header{
margin:0 auto;
background-color: bisque;
}
.nav{
font-size:14px;
background:black;
-moz-border-bottom-left-radius:6px;
-webkit-border-bottom-left-radius:6px;
border-bottom-left-radius:6px;
-moz-border-bottom-right-radius:6px;
-webkit-border-bottom-right-radius:6px;
border-bottom-right-radius:6px;
margin:0 5px;
}
.nav ul{
list-style-type:none;
margin:0;
padding:0;
}
.nav ul li{
display:inline;
margin:0;
padding:0;
}
.nav ul li:first-child{
margin:0 0 0 5px;
}
.nav ul li:last-child{
margin:0 5px 0 0;
}
.nav ul li a{
display:inline-block;
color: white;
padding:10px;text-decoration:none;
}
.nav ul li a:hover{
color:#565656;
}
h2{
font-size:16px;
font-weight:bold;
color:black;
padding:5px;
margin:0 5px;
}
p{
text-align:left;
font-size:12px;
color:bisque;
margin:5px;
padding:0;
line-height:20px;
}
p a{
color:white;
text-decoration:none;
}
p a:hover{
color:#4d4444;
}
.nav2{
font-size:14px;
background:#2d2d2d;
-moz-border-top-left-radius:6px;
-webkit-border-top-left-radius:6px;
border-top-left-radius:6px;
-moz-border-top-right-radius:6px;
-webkit-border-top-right-radius:6px;
border-top-right-radius:6px;
margin:0 5px;
}
.nav2 p{
text-align:center;
color:#f2f2f2;
margin:0 5px;
padding:5px 0;
}
.nav2 p a{
display:inline-block;
color:#88aa00;
padding:5px;
text-decoration:none;
}
.nav2 p a:hover{
color:#565656;
}
.clear{
clear:both;
}
Nüüd loome 5 faili naljadega ja ühendame need avalehe ja jalusega
Nali.php
<?php require("p2is2.php"); ?>
<h2>1.Nali</h2>
<p>
<ul>
<li>То, что не удаётся запрограммировать на ассемблере, приходится паять.</li>
</ul>
</p>
<?php require("jalus2.php"); ?>Nali2.php
<?php require("p2is2.php"); ?>
<h2>2.Nali</h2>
<p>
<ul>
<li>Напиши хороший код, и ты будешь нужен фирме пару дней.
Напиши плохой код, и ты будешь нужен фирме всю жизнь.</li>
</ul>
</p>
<?php require("jalus2.php"); ?>Nali3.php
<?php require("p2is2.php"); ?>
<h2>3.Nali</h2>
<p>
<ul>
<li>Купил айтишник себе продвинутого робота с функцией жены, небесного вида красавицу. Привез, развернул, сам за комп, ждет обед. Вдруг окрик - "Все равно сидишь, иди выкинь мусор!"</li>
</ul>
</p>
<?php require("jalus2.php"); ?>Nali4.php
<?php require("p2is2.php"); ?>
<h2>4.Nali</h2>
<p>
<ul>
<li>Сын сказал, что когда вырастет, у него будет несколько профессий: клоун, фокусник и программист. Он ещё не знает, что в IT это одна профессия.</li>
</ul>
</p>
<?php require("jalus2.php"); ?>Nali5.php
<?php require("p2is2.php"); ?>
<h2>5.Nali</h2>
<p>
<ul>
<li>Молодой хакер спрашивает у более опытного - скажи, а как ты зарабатываешь в интернете? Ну тот такой помялся и говорит - перечисли мне на счет 100 рублей, скажу. Ну тот перечислил. Ну, говорит, скажи как. - Ну как как, говорит, вот так и зарабатываю.</li>
</ul>
</p>
<?php require("jalus2.php"); ?>Nüüd näeme, kuidas meie sait töötab
Arvutis:
Telefonis:
Minu sait näeb selline välja.
Saate seda otseülekandena jälgida minu veebisaidil sellel lingil: