Ohita navigointi

Kotisivujen suunnittelu 2

Tässä on lisää kotisivujen suunnittelua, mutta tällä kertaa aiheena on parantaminen. Nyt käsitellään myös mm. stylesheet, php sekä java scriptejä.

Stylesheet
Stylesheet on kätevä tapa päivittää sivun ulkoasua. Sillä voi muuttaa mm. tekstikentät, fontit, lähetä-napit, linkit jne.
Stylesheetin voi upottaa suoraan itse tiedostoon tai sitten tuoda se erikeen toisesta tiedostotsta. Jos haluat, että kaikki sivut ovat samanlaisia, niin on suositeltavaa, että tuot sen toisesta tiedostosta. Tällöin käytetään koodia:

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

Tässä kohti style.css on se tiedosto, johon on upotettu koodit, jolla määritetään sivun ulkoasu. Mutta jos haluat sitten erikseen, että upotat erillisen tyylin, niin voit käyttää koodia:

<style type="text/css">

</style>

Tässä kohti … laitetaan koodit, jolla määritetään sivun ulkoasu.

Tässä on sitten hieman koodiesimerkkejä sivujen ulkoasuista:

BODY {
background-color : #CCCCCC;
font-family : Arial, Tahoma, Helvetica, sans-serif;
}

A:LINK {
color : Blue;
font-size : 9pt;
}

A:VISITED {
font-size : 9pt;
}

A:HOVER {
background-color : #DEB887;
}

H1 {
color : #990000;
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
text-align : center;
}

H2 {
color : #990000;
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
text-align : center;
}

H3 {
color : #990000;
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size : 140%;
text-align : center;
}

H4 {
color : #990000;
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
text-align : center;
}

H5 {
color : #990000;
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size : smaller;
}

H6 {
color : #000000;
font-family : Arial, Helvetica, sans-serif;
font-style : italic;
font-weight : 800;
text-align : center;
}


P {
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
color : #990000;
text-align : center;
font-size : 9pt;
}

TEXTAREA {
background : #DEB887;
border : thick double Green;
scrollbar-3dlight-color : Gray;
scrollbar-arrow-color : Olive;
scrollbar-track-color : Green;
}

INPUT {
background : #DEB887;
border : thick double Green;
}

SELECT {
background : #DEB887;
border : thick double Green;
}

Lisää stylesheettiä voit opetella seuraavista linkeistä:
http://koti.mbnet.fi/winuus/kaytto.php”>http://koti.mbnet.fi/winuus/kaytto.php
http://www.w3.org/Style/XSL/”>http://www.w3.org/Style/XSL/

PHP
Php on ohjelmointikieli, joka suoritetaan jo palvelimella. Periaatteessa php:llä voi tehdä melkein mitä tahansa, esimerkiksi vieraskirjan, tilauslomakkeen joka tulee sähköpostiin, chatin ja vaikka mitä. Yleensä mahdollisuudet riippuvat koodaajasta.

Php:n yksi kätevin tapa on tuoda jotakin tekstiä tiedostoon. Tämä kätevä systeemi, koska jos päivität esimerkiksi sivuja niin, että lisäät sivun navigointinappeihin, niin sinun ei tarvitse tehdä kun se vain yhden kerran (ilman kopioimista). Tämä koodi siis on seuraavallainen:

<?php include “tiedosto.txt”?>

Tässä kohti tiedosto.txt:ssä on koodattu navigointinapit. .html, .php ja muutkin tiedostomuodot käyvät.

Lisää php:tä voit oppia seuraavista linkeistä:
http://www.sivut.org/php/”>http://www.sivut.org/php/
http://www.webbimestari.com/php-opas.php”>http://www.webbimestari.com/php-opas.php
http://www.ohjelmointiputka.net/oppaat_nayta.php?id=phpj”>http://www.ohjelmointiputka.net/oppaat_nayta.php?id=phpj
http://mureakuha.com/artikkelit/PHP/61”>http://mureakuha.com/artikkelit/PHP/61

Java Script
Java script on siis melkein sama kuin php paitsi, että se suoritetaan selaimessa. Java sriptillähän on huonommat mahdollisuudet tekemään hyviä scriptejä, kuten vieraskirjoja ja muita. Mutta tämän scriptikielen hyvä puoli on se, että käyttäjä voi katsoa sen lähdekoodilta, jos haluaa tietää kysymyksen vastauksen…

Java scriptillä voi hoitaa paremmin nämä pop-upit, mainonnan, bookmarkkaukset sekä aloitussivuihin pistämisen jne.

Koska itse en osaa pahemmin java sriptii, niin annan teille kasan linkkejä, joista voit katsoa tarkemmat tiedot java sripteistä:
http://www.hotscripts.com/JavaScript/”>http://www.hotscripts.com/JavaScript/
http://www.vaoltl.edu.hel.fi/projekt/KivirantaSauli_JavaScript_kurssi/121003.htm”>http://www.vaoltl.edu.hel.fi/projekt..
http://www.kase.fi/~jokaunis/Harjoitukset/JavaScript-harjoitukset/JSharj6.html”>http://www.kase.fi/~jokaunis/Harjoitukset/JavaScript-harjoitukset/JSharj6.html
Tossa linkissä on paljon suomalaisia linkkejä java sripteistä.



Mikael Kundert 01.03.03
mikaelkk@hotmail.com

Katso myös
» Kotisivujen suunnittelu osa 1
» Miksunet