Kotisivut helposti - osa 4

Transkriptio

1 Kotisivut helposti - osa 4 Artikkelisarjan kolmessa ensimmäisessä osassa esiteltiin Internet-siviuihin sekä XHTML- ja CSS-ohjelmointikieliin liittyviä perusteita. Tässä osassa kerrotaan, miten aiemmin opitut taidot voidaan yhdistää ja luoda kotisivut helposti ja nopeasti pelkän muistion ja nettiselaimen avulla. Nettisivut on mahdollista toteuttaa siististi ilman kuvankäsittelyohjelmia tai grafiikoita, ja sitä pyritään havainnollistamaan tässä artikkelissa. Aloittelevat kotisivunikkarit sortuvat usein samoihin virheisiin: sivujen taustaksi valitaan jokin omaa silmää miellyttävä mutta taustakuvaksi sopimaton kuva, sivut tungetaan täyteen kaikenlaista (vilkkuvaa) sisältöä ja sivun värimaailma valitaan väärin. Nämä ovat toki makuasioita, mutta yleisesti ottaen yksinkertaisuus on valttia ja siitä voi jopa tehdä taidetta, kun yksinkertaisuuden vie riittävän pitkälle. Vilkkuvaa tai muuten liikkuvaa sisältöä kannattaa pyrkiä välttämään, mikäli se tekee kokonaisuudesta sekavan. Taustakuvaksi kannattaa valita jokin hyvin yksinkertainen ja rauhallinen kuva, joka ei vie liikaa huomiota sivun muulta sisällöltä. Kuten artikkelisarjan ensimmäisessä osassa kerrottiin, sivujen toteutus kannattaa aloittaa suunnittelemalla karkeahko luonnos sivun rakenteesta. Tässä artikkelissa kerrotaan, miten toteutetaan seuraavanlainen sivurakenne (kuitenkin aivan erilaisella värimaailmalla). 1 / 7

2 Etukäteen suunniteltu pohjapiirros auttaa sivujen ohjelmoinnissa, koska tietää jo alussa, millaisia elementtejä sivulle tulee. Koska XHTML-koodi rakennetaan pääpiirteittäin ylhäältä alas, niin on loogista jakaa sivu päällekäisiin elementteihin. Edellä olevasta kuvasta voidaan huomata, että koko sivu koostuu kolmesta päällekäisestä lohkosta: ylätunniste, pääsisältöalue ja alatunniste (header, main area, footer). Sivun ohjelmointi voidaan siis aloittaa lisäämällä aiemmin esiteltyyn XHTML-dokumenttipohjaan edellä mainitut lohkot, jolloin koodi näyttää seuraavalta. 2 / 7

3 Matti Meikäläinen Suomen parhaat kotisivut Etusivu Minä Harrastukset Yhteystiedot Sponsorit Linkit Kattiloita Kippoja Kuppeja Rukkasia Moottorisahoja 3 / 7

4 Tervetuloa! Väliotsikko Väliotsikko Lista 1 Lista 2 Lista 2.1 Lista 2.2 Lista 3 Lista 4 1. Lista 1 2. Lista 2 4 / 7

5 3. Lista 3 4. Lista 4 Matti Meikäläinen, Kaikki oikeudet pidätetään. Etusivu Minä Harrastukset Yhteystiedot Ja sitten vielä CSS kokonaisuudessaan. html, body, div, span, a, ul, ol, li, img, p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; border: 0; outline: none; }.ali gn_left { float: left; margin-right: 15px; }.align_right { float: right; margin-left: 15px; } body { background-color: #f 0e5c4; } p { font-family: Arial, Helvetica, sans-serif; } h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #057e76; } #black_line { height: 4px; backgrou nd-color: #000000; } #wrapper { width: 1000px; margin: 0 auto; } #header { height: 80px; } #header_left { height: 80px; width: 275px; float: left; } #header #header_left p#logo { f ont-size: 32px; font-weight: bold; padding-top: 15px; color: #4d 3f2c; } #header #header_left p#slogan { font-size: 14px; paddi ng-left: 110px; color: #4d3f2c; } #header ul#navigation { list -style-type: none; float: right; font-family: Arial, Helvetica, sa ns-serif; font-size: 18px; font-weight: bolder; text-transform: uppercase; margin-top: 30px; } #header ul#navigation li { list 5 / 7

6 -style-type: none; float: left; margin: 0 5px; } #header ul#na vigation li a { text-decoration: none; padding: 4px; color: #b37 d16; border: 1px solid #f0e5c4; } #header ul#navigation li a:hov er { background-color: #faf7ef; border-top: 1px solid #bd8f33; b order-left: 1px solid #bd8f33; border-right: 1px solid #ffffff; bo rder-bottom: 1px solid #ffffff; } #etusivu #header ul#navigation l i a.etusivu { border-top: 1px solid #bd8f33; border-left: 1px soli d #bd8f33; border-right: 1px solid #ffffff; border-bottom: 1px sol id #ffffff; } #main_area { background-color: #ffffff; border: 1px solid #dabb75; padding: 25px; overflow: hidden; } #main_ar ea a { color: #057e76; } #main_area a:hover { color: #035953; } #main_area #sidebar { width: 250px; float: right; } #mai n_area #sidebar.sidebar_top { height: 45px; line-height: 45px; background-color: #ff8059; border: 1px solid #ff8059; padding-left : 15px; font-family: Arial, Helvetica, sans-serif; font-size: 16px ; font-weight: bold; color: #ffffff; } #main_area #sidebar.si debar_content { border: 1px solid #ff8059; margin-bottom: 10px; padding: 15px; color: #057e76; overflow: hidden; } #main_area #sidebar.sidebar_content ul { list-style-position: inside; } #m ain_area #sidebar.sidebar_content.sponsor { width: 100px; height : 100px; background-color: #ebe9e2; border: 1px solid #cec8b8; f loat: left; margin: 3px; } #main_area #content { float: left; width: 625px; } #main_area #content p { font-size: 16px; col or: #4d3f2c; padding-top: 8px; padding-bottom: 8px; } #main_ar ea #content h1 { margin-bottom: 10px; font-size: 32px; } #main _area #content h2 { font-size: 24px; margin-top: 10px; margin-bo ttom: 10px; } #main_area #content h3 { font-size: 18px; margin -top: 10px; margin-bottom: 10px; } #main_area #content ul, #main _area #content ol { list-style-position: inside; margin: 10px 15px ; } #footer { height: 50px; line-height: 50px; color: #4d3f2 c; } #footer ul#footer_navigation { list-style-type: none; flo at: left; font-family: Arial, Helvetica, sans-serif; font-size: 14 px; font-weight: bold; } #footer ul#footer_navigation li { flo at: left; margin-right: 15px; } #footer ul#footer_navigation li a { text-decoration: none; color: #4d3f2c; } #footer ul#footer _navigation li a:hover { textdecoration: underline; color: #372c1d; } Lisäsin XHTML-koodin bodyyn tunnisteen "etusivu" ja jokaiseen navigaatiolinkkiin kyseisen linkin nimisen luokan, joiden avulla navigaatiolinkeille on mahdollista määrittää oma tyyli, kun ollaan linkin osoittamalla sivulla. Nämä määritykset löytyvät yläpuolella olevasta CSS-koodista kohdasta "#etusivu #header ul#navigation li a.etusivu". Nyt olemme vihdoin saavuttaneet tämän artikkelisarjan päätepisteen. Toivottavasti opit tämän 6 / 7

7 Powered by TCPDF ( Tee-se-itse.fi paketin avulla niksin tai kaksi kotisivujen tekemisestä, joka ei loppujen lopuksi ole vaikeaa! 7 / 7