Mobiilimalli Konspekt

Mobiilisõbraliku Veebilehe Konspekt

1. Sissejuhatus

Ülesanne: Luua mobiilisõbralik, responsive veebileht anekdoodide jaoks.

Tehnoloogiad: HTML5, CSS3, PHP

2. HTML - Mobiilivaate seadistamine

Viewport meta-tag

See tag ütleb brauserile, kuidas lehte kuvada erinevatel seadmetel.

<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0;">

Mida see teeb: Leht kohandub automaatselt telefoni, tahvli või arvuti ekraanile.

Navigatsioonimenu

<div class="navbar">
    <ul class="nav-list">
        <li><a href="Anekdoot1.php">Anekdoot 1</a></li>
        <li><a href="Anekdoot2.php">Anekdoot 2</a></li>
        <li><a href="Anekdoot3.php">Anekdoot 3</a></li>
    </ul>
</div>

Mida see teeb: Loob menüü, kus saab anekdootide vahel liikuda.

3. CSS - Kujundus

Reset

Nullib kõik brauseri vaikimisi stiilid, et leht näeks kõigis brauserites ühesugune välja.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

Navigatsioonimenüü taust

Gradient teeb menüü ilusaks ja kaasaegseks.

.navbar {
    background: linear-gradient(90deg, #1e1e2f, #2b2b4f);
    padding: 1rem 2rem;
}

Flexbox menüü paigutus

Flexbox paigutab menüüelemendid kõrvuti ja tsentreerib need.

.nav-list {
    list-style: none;
    display: flex;
    gap: 2rem;
    justify-content: center;
}

Mida see teeb:

- display: flex - paigutab elemendid ühele reale
- gap: 2rem - jätab elementide vahele automaatse vahe
- justify-content: center - tsentreerib menüü

Hover efekt

Kui hiir läheb lingi peale, ilmub türkiissinine joon alla.

.nav-list li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: #00ffd5;
    transition: width 0.3s ease;
}

.nav-list li a:hover::after {
    width: 100%;
}

Mida see teeb: Animeeritud alljoon ilmub sujuvalt, kui hiir on lingi kohal.

4. PHP - Korduvkasutatavad osad

Header lisamine

<?php require("header.php"); ?>

Mida see teeb: Lisab header.php faili sisu (menüü ja HTML päis) igale lehele. Nii ei pea sama koodi kordama.

Footer ja dünaamiline aasta

<footer>
    <?php
    echo "Õpetilase tehtud leht &copy;";
    echo date("Y");
    ?>
</footer>

Mida see teeb: date("Y") kuvab automaatselt praeguse aasta, nii ei pea iga aasta käsitsi muutma.

Footer paigutus

footer {
    position: absolute;
    bottom: 0;
    background-color: #f1f1f1;
    text-align: center;
    width: 100%;
    padding: 8px;
}

Mida see teeb: Paneb jaluse lehe alumisse serva.

5. Mobiilivaade

Mis muutub telefonis?

Navigatsioonimenu:

- Flexbox kohandub automaatselt väiksemale ekraanile
- Menüüelemendid võivad minna mitmele reale
- Tsentreeritult jäävad samaks

Tekst:

- Viewport meta-tag tagab, et tekst ei lähe ekraanist välja
- Font suurused kohanduvad (kasutatud rem ühikud)

Gradient ja värvid:

- Jäävad samaks kõikidel seadmetel
- Hover efekt töötab ka puuteekraanidel

Telefonivaade:

Telefoni vaate pilt