Web-sivusto

Web-sivusto koostuu pääpiirteissään seuraavista osista

  • Header Sivuston nimi, logo ja iskulause
  • Access / Navigation / Navi Päänavigoinnin paikka
  • Container Sivuton sisältö tekstit ja kuvat
  • Sidebar Widget alue (ei pakollinen alue)
  • Footer Copyright merkinnät ja yhteystiedot

Nämä alueet ovat container-alueen sisällä.

Yksinkertainen sivusto

Tässä on yksinkertaisen sivuston runko, jota muokkaamalla on mahdollista saada aikaan mitä mielikuvituksellisempia sivustoita. Sivusto koostuu kahdesta osasta index.html ja style.css. Ne tulee tallentaa samaan kansioon, niin sivusto toimii.
HTML-koodi nimeä tietodosto index.html

<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sivuston nimi</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container"><!--Kehys piirtää nettisivun ympärille laatikon, jolla sisältö on helppo pitää kurissa-->
<div id="header"><a href="index.html">
Sivun nimi
</a></div>
<div id="access">
  <ul>
    <li><a href="index.html">Etusivu</a></li>
<!--Kirjoita #merkkien tilalle nettisivun osoitteet ja korvaa valikko nimet asiaan kuuluvilla termeillä-->
    <li><a href="index.html">Etusivu</a></li>
    <li><a href="#">Valikko 1</a></li>
    <li><a href="#">Valikko 2</a></li>
    <li><a href="#">Valikko 3</a></li>
    <li><a href="#">Valikko 4 </a></li>
  </ul>
</div>
<div id="content">
Tähän tulee sivuston sisältö
</div>
<div id="footer">
Tänne tulee tekijän oikeus tiedot 2012
&copy; Lumenidea</div>
</div>
</body>
</html>

CSS-tyyliteidosto. Nimeä tiedosto style.css

@charset "UTF-8";
/* CSS Document */

body {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #000;
}

#container {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    background-color: #666;
}

#header {/*yläbannerin muotoilu*/
    clear: both;
    background-color: #CCC;
}

#header a {/*sivuston nimen muotoilu*/
    font-size: xx-large;
    text-decoration: none;
    color: #333;
}

#sidebar {/*Valikon sijainti ja tausta*/
    float: left;
    width: 180px;
    background-color: #CCC;
}

#sidebar ul li a {/*valikon linkkien muotoilu muotoilu*/
    color: #333;
    text-decoration: none;
    list-style-type: none;
}

#content {/*sisältö osan muotoilu*/
    float: right;
    width: 780px;
    background-color: #CCC;
    padding: 10px;
}

#footer {/*tekijän oikeus muotoilu*/
    clear: both;
    text-align: center;
    background-color: #CCC;
}

/*Fonttien muotoilu*/
b {/*Lihavoidun tekstin muotoilu*/
}
a:link {/*Linkin normaali muotoilu*/
}
a:visited {/*Käydyn linkin muotoilu*/
}
a:hover {/*hiiri linkin päällä*/
}
a:active {/*hiiri linkin päällä ja pohjassa*/
}

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

*