Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (
|
|
|
- Ari Saarnio
- 9 vuotta sitten
- Katselukertoja:
Transkriptio
1 1 Sivupohja flat file julkaisujärjestelmälle Versio 1.1 /syyskuu 2011 Kirjoittanut Jari Sarja (
2 2 Sisältö 1. Johdanto Ruudukkopohjainen taitto Grid System Mockup mallit Sivuston rakenne eli HTML Laitetaan ensin title paikoilleen Sivun kehys Yläpalkki Navigaatio Sivuston ala-osa Oikea ja vasen palsta Alapalkki Koodin validointi Sivuston ulkoasu eli CSS Sivuston perusasetus Kehys Yläpalkki Navigaatiopalkki Alaosa Palstat Alapalkki Navigaatio paikoilleen Palstojen viimeistely Sivupohja Pluck julkaisujärjestelmälle Oma kansio teemalle Tiedosto info.php CSS tiedosto Theme tiedosto... 22
3 Teeman pakkaaminen Kuvagalleria Sivuphja CMSimplelle CSS tiedosto Tiedosto nimeltä template Lähteet... 38
4 4 1. Johdanto Sivupohja eli englanniksi theme määrittää sekä sivuston ulkoasun että käyttöliittymän. Sivupohjia tehdään yleensä vain yksi, koska silloin muutokset voidaan toteuttaa helposti ja nopeasti. Kaikki julkaisujärjestelmät hyödyntävät sivupohjia ja nykyisin sivuja ei juuri kannata muulla tavoin tehdä kuin julkaisujärjestelmillä. Moni käyttää valmiita sivupohjia, mutta mieleisen saa tekemällä sen itse. Helpointa sivupohjan luominen on Photoshopilla, mutta onnistuu se muillakin ohjelmilla. Sivupohjan idea on, että sen läpi ajetaan kaikki tarvittava. Jos sivustolla on esim sivua, silti ne kaikki ajetaan aina saman sivupohjan läpi. Enää ei kannata tehdä kuten ennen, että ensin tehtiin yksi sivu ja sitten sitä kopioitiin. Jos esim sivua halutaan muuttaa, tarkoittaa se kaikkien sivujen muuttamista. Sivupohjaa muuttamalla pääsee helpommalla. Tässä alla esimerkki miltä sivupohja voisi näyttää. On olemassa sivuston rakenne: yläpalkki, sisältö ja navigointi. Noille eri alueiille määritellään toiminnot esim. mistä tulee yläpalkki ja mistä tulee sisältö? Sisältö on yleensä se vaikein osa. Toisaalta nykyiset julkaisujärjestelmät ovat tuon sivupohjan koodauksen osalta varsin helppokäyttöisiä.
5 5 2. Ruudukkopohjainen taitto Webleiskan suunnittelussa auttaa φ, jonka arvo on 1,62. Mikäli sivun leveys on 800 pikseliä ja se jaetaan kahteen palstaan niin näin 800/1.62 = 494, jolloin toinen solu on = 306. Tosin hommaa voi yksinkertaistaa jakamalla leiskan kolmeen osaan sekä vaaka- että pystysuunnassa. Yläpalkki on silloin yksi kolmannes sivusta ja yläpalkin voi jakaa vielä kolmeen osaan, jolloin navigaation koko on 1/3 yläpalkista. Katso esim. Varkauden kaupungin sivuja ( jossa tuo periaate toteutuu hyvin. Myös Osuuspankki on onnistunut hyvin: Kannattaa myös käydä lukemassa artikkeli Grid systems in webdesign. Pointtina on lähinnä se, että sivusto olisi kultaisen leikkauksen mukainen tai ainakin sen suuntainen. Vinkki Verkossa on runsaasti ilmaisia oppaita:ks esim. 50 Totally Free Lessons in Graphic Design Theory Grid System Web-sivujen asettelua helpottamaan on kehitetty 960 Grid System. Nathan Smithin kehittämä työkalu on CSS-kehys, joka on saavuttanut suurta suosiota web-kehittäjien keskuudessa. Nimensä mukaisesti työkalu pohjautuu 960 pikselin sivuleveyteen ja se on saatavilla 12- ja 16-palstaisina versioina. Syy miksi kehys pohjautuu juuri 960 pikselin sivuleveyteen, on luvun 960 jaollisuus monella kokonaisluvulla. (Heiskanen 2011.) Tämä kyseinen ruudukko ja ohjeita löytyy mm seuraavilta sivuilta.
6 Mockup mallit Käyttöliittymän suunnittelussa kannattaa käyttää apuna mockup malleja eli hahmotelmia käyttöliittymän rakenteesta. Hyvä ohjelmia käyttöliittymän suunnitteluun löytyy seuraavista linkeistä
7 7 3. Sivuston rakenne eli HTML Kun sivusto on alun perin suunniteltu hyvin, on helppo siirtyä seuraavaan vaiheeseen. Eli leiskan ollessa valmis, on aika jatkaa eteenpäin. Ideana on tehdä kaikki valmiiksi ulkoasun suhteen eli psd tiedosto on alkuvaiheen työkalu. Kun leiska on valmis ja hyväksytyy, alkaa seuraava vaihe. Vaiheita ei kannata tehdä päällekäin eikä rinnakkain. Sivuston rakenne kirjoitetaan HTML koodiin. Tähän työhön tarvitset hyvän tekstieditorin. Lataa netistä HTML tiedoston runko, joka tässä alla. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> </head> <body> </body> </html> Sitten koodaillaan pala kerrallaan leiskan osaset paikoilleen HTML tiedostoon Laitetaan ensin title paikoilleen. Tämä tulee HEAD osioon ja lähinnä laitetaan, jotta selaimessa näkyisi oikein. <title>hc Crusaders</title>
8 Sivun kehys Laitetaan sivulle kehys, joka määrittää sen mihin kaikki kasataan. Tämä osa on yleensä keskitetty. Sen ympärille jää taustaa riippuen näytön koosta Yläpalkki Yläpalkki täytyy sijoittaa sivun kehyksen sisään. Sen on oltava äsken luotujen div tagien välissä.
9 Navigaatio Navigaatio tulee kehyksen sisään ja yläpalkin alapuolelle Sivuston ala-osa Alaosa koostuu oikeasta ja vasemmasta palstasta, mutta palstat pitää ensin sitoa toisiinsa.
10 Oikea ja vasen palsta Sitten oikea ja vasen palsta, jotka molemmat ovat alaosan sisällä Alapalkki Viimeiseksi laitamme alapalkin eli footerin paikoilleen. Se tulee kehyksen sisään.
11 Koodin validointi Validoi tekemäsi HTML koodi, ettei sinne ole pesiytynyt virheitä. Validaattori löytyy osoitteesta: Kun kaikki menee oikein on lopputulos kuten alla. Esimerkistä puuttui merkistö eli UTF-8 sekä html:n määrittely. Yläosa kuten alla.
12 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>hc Crusaders</title> </head> Jos HTML-tiedosto ei ole kunnossa, ei ole mitään syytä jatkaa. HTML:n hyvä rakenne on kaiken perusta.
13 13 4. Sivuston ulkoasu eli CSS Laitetaan ensimmäiseksi HTML-tiedostoon linkitys, jotta sivuston ulkoasua voidaan muokata CSS:n avulla. HTML-tiedoston HEAD osio kuten alla. Eli koodi liitettiin alla olevalla pätkällä. <link type="text/css" rel="stylesheet" media="all" href="css/tyyli.css" /> Tee seuraavaksi tiedosto tyyli.css ja sijoita se kansioon css Sivuston perusasetus Nyt muokataan vain ja ainoastaan CSS tiedostoa. Laitetaan aluksi sivun perusasetukset kohdilleen. Ensimmäiseksi poistamme sivun heilumisen eli sen, että välillä on vierityspalkki ja välillä taas ei. Laitetaan sivulle myös taustakuva ja väri. Samalla määritellään myös kirjasimet.
14 14 html{ height:100%; margin-bottom:1px; } body{ font-family:verdana,arial,sans-serif; font-size:90%; margin:0; padding:0; background-color:#fff; background-image: url('../gfx/tausta.jpg'); background-repeat:repeat-x; } Tässä vaiheessa sivu on kuten alla olevassa kuvassa. Tässä vaiheessa voit validoida CSS:n, jotta se lähtisi heti alusta oikein.
15 Kehys Sivuston kehys on se osa missä kaikki sisältö. Se keskistetään keskelle sivua. #kehys{ width:960px; margin-left:auto; margin-right:auto; display:table; } 4.3. Yläpalkki 4.4. Navigaatiopalkki 4.5. Alaosa Alaosan pääkehys kuten alla.
16 Palstat Tarvitaan oikea ja vasen palsta, jotka phi arvin mukaisesti laskettu Alapalkki Alapalkki paikoilleen kuten alla. Erityisen tärkeää tuosa kohden on clear:both, koska muutoin alapalkki sijoittuu väärin. Eli kelluttaminen on lopetettava.
17 17 5. Navigaatio paikoilleen Sivu on viittä vaille valmis. Siitä puuttuu kuitenkin navigaatio. Ajatuksena on käyttää navigaatiossa Googlen kirjasimia, joten HTML sivun alkuun on kirjoitettava seuraava rimpsu. <link href=' Yanone+Kaffeesatz' rel='stylesheet' type='text/css' /> Lisäksi navigaation sisään on kirjoitettava navigaation koodi, johon päästään kiinni CSS:llä. Nykyaikainen navigaatio tehdään aina CSS:llä hyödyntäen HTML listaelementtiä. Jokaisesta listaelementistä (LI), tulee yksi navigaation osanen eli linkki, jota voi napsauttaa. <div id="navigaatio"> <ul> <li><a href="#" class="navilinkki">etusivu</a></li> <li><a href="#" class="navilinkki">joukkue</a></li> <li><a href="#" class="navilinkki">peliasu</a></li> <li><a href="#" class="navilinkki">kuvia</a></li> <li><a href="#" class="navilinkki">vieraskirja</a></li> <li><a href="#" class="navilinkki">historia</a></li> <li><a href="#" class="navilinkki">info</a></li> </ul> </div> Tämän jälkeen HTML sivu on aika taas unohtaa. Tee kuitenkin varmuuden vuoksi validointi. Sitten CSS:n kimppuun, jonne märitellään kuinka listaelementtejä UL ja LI käsitellään. CSS:llä poistetaan mm. pallukat. Lisäksi sillä voidaan laittaa lista siten, että se on vaakasuorassa.
18 18 #navigaatio ul{ margin:0; padding: 6px px; } #navigaatio ul li{ list-style:none; display:inline; } a.navilinkki{ text-decoration:none; color:#000; padding:0px 22px 0px 0px; font-family:'yanone Kaffeesatz'; font-size:130%; } a.navilinkki:hover{ text-decoration:none; color:#fff; }
19 19 6. Palstojen viimeistely Tekstin asemointia pitää kokeilla. Suunnista osoitteeseen: Laita teksti paikoilleen sekä oikeaan että vasempaan palstaan. Huomaat, ettei teksti asetu vielä lainkaan nätisti. Asia korjaantuu helposti muuttamalla oikean ja vasemman padding arvoja. Tällä hetkellä ne ovat nolla eli niitä ei ole. Huomaa kuitenkin, että kun lisäät täytettä on palstaa kavenettava samassa suhteessa. Eli jos molemmille puolelle täytettä 10px, on palstan leveys kasvanut 20px, joka määrä on vähennettävä width arvosta. Eli jos vasemmalle täytettä 20px niin leveys ei voi enää olla 368 vaan 348. Lopputulos näkyy selaimen kautta tarkasteltuna kutakuinkin kuten alla. Siinä on nyt valmis sivupohja, joka sisältää HTML-tiedoston, CSS tiedoston sekä kuvat.
20 20 7. Sivupohja Pluck julkaisujärjestelmälle Kun sivupohja on valmiina, tarvitsee vain hieman muokata, jotta se toimisi julkaisujärjestelmän kanssa. Ensimmäisenä kokeilemme julkaisujärjestelmää nimeltä PLUCK. Asenna se koneellesi WAMPiin. Ohjelma löytyy osoitteesta: Oma kansio teemalle Kun asennus on valmis, voit aloittaa sivupohjan tekemisen. Ihan ensimmäiseksi luot themes kansioon kansion kansioon nimeltä hcc. Seuraavaksi luot kansioon seuraavat kolme tiedostoa. style.css - CSS-tiedosto (aiemmin luomasi CSS tiedosto) theme.php - tärkein tiedosto eli siellä on HTML:n runko. (aiemmin luomasi index.htm tiedosto) info.php - sisältää tiedot teemasta (ihan uusi)
21 Tiedosto info.php Tiedostoista info.php sisältää perustiedost teemasta. Se voisi olla kuten alla. <?php //HC Crusadersin sivupohja //Designer: Jari Sarja, $themedir = "hcc"; $themename = "HC Crusaders"; $module_space[0] = "main"; $module_space[1] = "footer";?> Alla selostus mitä mikäkin osa tarkoittaa.
22 22 Kohta main on tärkeä lähinnä siltä kannalta, että sivulle asennetaan jokin moduuli kuten esim. blogi CSS tiedosto CSS tiedostolle ei tarvitse tässä vaiheessa tehdä juuri mitään. Tallenna se nimellä style.css. Se pieni muutos, on kuvien polkujen muuttaminen. Poista kuvien edestä../ ja siirrä myös kuvat paikoilleen eli kuvakansio gfx Theme tiedosto Tämä on sama kuin luomasi HTML tiedosto. Mutta siihen lisätään hieman koodia, jotta toiminnallisuus saataisiin mukaan. Ihan ensimmäisesi estetään tiedoston näyttäminen suoraan selaimessa. Alla oleva koodi kaikkein ylimmäksi sivulla. Siis jopa ennen Doctypeä. <?php //Estetään suora pääsy tiedostoon. defined('in_pluck') or exit('pääsy kielletty!');?>
23 23 Head osiosta voimme poistaa titlen ja CSS:n liittämisen, koska molemmat hoituvat koodilla, joka alla. <?php theme_meta();?> Sisällön saamme paikoilleen seuraavalla koodilla. Tämä kohtaan vasen palsta. Laitetaan siihen varmuuden vuoksi koodi myös Blomia varten. <?php theme_content();?> <?php theme_area('main');?> Alapalkkiin kirjautumistiedot ja powered by paikoilleen. <a href="<?php echo SITE_URL;?>/login.php">admin</a> powered by <a href=" Oikeaan palstaan voisi hakea iframen kautta suoraan jotakin HCC:n nykyisiltä sivuilta. <iframe src=" name="iframe" width="300" marginwidth="10" height="400" marginheight="10" scrolling="auto"> Lopuksi navigaato paikoilleen. <?php theme_menu('ul', 'li', 'active',1);?> Ja CSS:n loppu kuten alla.
24 24 #navigaatio ul{ margin:0; padding: 6px px; } #navigaatio ul li{ list-style:none; display:inline; } ul a { text-decoration:none; color:#000; padding:0px 22px 0px 0px; font-family:'yanone Kaffeesatz'; font-size:20px; } ul a:hover{ text-decoration:none; color:#fff; } Lähinnä tuossa CSS-tiedostossa muutettiin kohtaa a.navilinkki, koska Pluckiin ei voi määritellä linkille omaa class tunnistetta. Ja alapalkin kirjautuminen kannattaa siistiä CSS:n avulla. Laitamme täytettä (padding) yläreunaan 4 pikseliä. Lisäksi keskitämme tekstin vaakasuunnassa.
25 25 #alapalkki { clear:both; background-image:url('gfx/alapalkki.jpg'); height:38px; padding: 4px 0 0 0; text-align:center;} 7.5. Teeman pakkaaminen Teeman pakkaaminen ei ole ihan pieni juttu. Ensin pitää tehdä.tar tiedosto, josta sitten sorvataan ohjelmalla Win Gz uusi tiedosto Kuvagalleria Pluckin kuvagalleria ei ole kauneimmasta päästä. Kuvat menevät taulukkoon ja alekkain. Kuitenkin käyttäjä haluaa kuvat usein kuten alla.
26 26 Muutos tapahtuu muokkaamalla tiedostoa functions.
27 27 Siellä pitää muokata seuraavaa kohtaa. Sen pitäisi olla kuten alla.
![28 <a href="<?php echo SITE_URL;?>/data/modules/albums/albums_getimage.php?image=<?php echo $album;?>/<?php echo $image['filename_image'];?>" rel="lytebox[album]" title="<?php echo $image['title'];?](/docs-images/31/15183116/images/28-0.png ">\"> <img src=\"<?php echo SITE_URL;?>/data/modules/albums/albums_getimage.php?image=<?php echo $album;?>/thumb/<?php echo $image['filename_image'];?>\" alt=\"<?php echo $image['title'];?>\" title=\"<?")
28 28 <a href="<?php echo SITE_URL;?>/data/modules/albums/albums_getimage.php?image=<?php echo $album;?>/<?php echo $image['filename_image'];?>" rel="lytebox[album]" title="<?php echo $image['title'];?>"> <img src="<?php echo SITE_URL;?>/data/modules/albums/albums_getimage.php?image=<?php echo $album;?>/thumb/<?php echo $image['filename_image'];?>" alt="<?php echo $image['title'];?>" title="<?php echo $image['title'];?>" /> </a> Eli taulukko reivitään pois samoin kuin kuvan selitykset. Ja kuvat tallennetaan ilman selityksiä. Sit vaan galleria valitsemalla moduulit ja albumit. Tee galleria ja siirrä kuvat ilman kuvauksia ja otsikoita. Sitten valitset sivun, jolle haluat gallerian. Oikealla näkyy valikko, josta gallerian voi liittää.
29 29 8. Sivuphja CMSimplelle CMSimplelle löytyy hyvä paketti avkympin sivuilta. Pakettiin on laitettu mm kunnollinen editori. Laita paketti koneellesi. Tunnus on admin ja salasana on kettu. Vaihtoehtoisesti CMSimplen peruspaketti. Oma template eli oma malli tai sivupohja tehdään helpoiten niin, että kopioidaan oletustemplate uuteen kansioon ja annetaan sille uusi nimi. Ensin kopioidaan kansio default, sitten liitetään samaan kansioon (templates) ja lopuksi vaihdetaan nimi. Tämän jälkeen avataan uusi kansio tutkittavaksi. Tärkein muokattava tiedosto on template eli avataan se ja tehdään muutokset. Logiikka templatessa on sama kuin alla olevassa kuvassa.
30 CSS tiedosto Css tiedosto menee vanhalla kaavalla, mutta muuta polku kansio on images. Esim alapalkki näin kuten alla. Ja kannattaa käyttää sitä äskeistä Pluck esimerkkiä. #alapalkki { clear:both; } background-image:url('images/alapalkki.jpg'); height:38px; padding: 4px 0 0 0; text-align:center; Siirrä vielä kuvat kansioon images niin homma on CSS tiedoston osalta valmis.
31 Tiedosto nimeltä template Template eli sivupohja tarvitsee enemmän muutoksia. Yläosa kuten alla. <?php echo head();?> Tuo pieni pätkä hoitaa head osion. Sitten sisältö yhtä helposti. <?php echo editmenu();?><?php echo content();?><?php echo submenu();?> Lopuksi vielä navigaatio,. <?php echo toc();?> Tuon yllä olevan koodin seurauksena navigaatio menee väärin. Koodissa lukee. <div id="navigaatio"> <ul class="menulevel1"> <li class="sdoc">etusivu</li> <li class="doc"><a href="/cmsimple2011/?kissa">kissa</a></li> <li class="doc"><a href="/cmsimple2011/?koira">koira</a></li> <li class="doc"><a href="/cmsimple2011/?j%26auml%3bnis">jänis</a></li> <li class="docs"><a href="/cmsimple2011/?talviurheilu">talviurheilu</a></li> <li class="doc"><a href="/cmsimple2011/?vieraskirja">vieraskirja</a></li> <li class="doc"><a href="/cmsimple2011/?yhteystiedot">yhteystiedot</a></li> </ul> </div> Siksi CSS:ään vielä muutoksia.
32 32 #navigaatio ul{ margin:0; padding: 6px px; } #navigaatio ul li{ list-style:none; display:inline; } ul a { text-decoration:none; color:#000; padding:0px 22px 0px 0px; font-family:'yanone Kaffeesatz'; font-size:20px;} ul a:hover{ text-decoration:none; color:#fff;}.doc a{ text-decoration:none; color:#000; padding:0px 22px 0px 0px; font-family:'yanone Kaffeesatz'; font-size:20px;}.sdoc { text-decoration:none; color:#000; padding:0px 22px 0px 0px; font-family:'yanone Kaffeesatz'; font-size:20px;}
33 33 HUOM! Tekstin muokkaus ei toimi. Sieltä puuttuu editori. Joten kirjoita bodyyn vielä yksi muutos: <?php echo onload();?> Body sen jälkeen kuten alla. <body <?php echo onload();?>>
34 34 9. Sivupohja GetSimplelle GetSimplen sivupohjat löytyvät kansiosta theme. Otamme sieltä pohjaksi sivupohajn nimeltä Cardinal, koska se sisältää vain perustiedot. Kopioi kansio Cardinal ja tallenna se nimellä Hcc CSS paikoilleen CSS sijoitetaan tiedostoon style.css, josta kaikki entinen pois. Alkuun voit tehdä pienen lisäyksen perustiedosta, jos niin haluat.
35 35 Laita kuvat kansioon images ja muuta polut sen mukaisiksi. Poista sieltä entiset turhat tiedostot Tiedosto template.php Ihan sivun alkuun seuraava rimpsu, joka estää suoran pääsyn kyseiseen templateen. <?php if(!defined('in_gs')){ die('you cannot load this page directly.'); } /**************************************************** * template.php GetSimple Hcc theme for the GetSimple CMS * *****************************************************/?> Tämän jälkeen HEAD osioon seuraavat palat, joilla saadaan sivulle Title ja tarpeelliste metatiedot. Lisäksi siinä linkitetään CSS paikoilleen. <title><?php get_page_clean_title();?> < <?php get_site_name();?></title> <?php get_header();?> <meta name="robots" content="index, follow" /> <link rel="stylesheet" type="text/css" href="<?php get_theme_url();?>/style.css" media="all" />
36 36 Body laitetaan kuten alla. <body id="<?php get_page_slug();?>" > Sitten navigaatio. <ul id="nav"> <?php get_navigation(return_page_slug());?> </ul> Lopuksi sisältö paikoilleen. <?php get_page_content();?> 9.3. Toimiiko? Vaihda teema ylläpidon kautta ja kokeile toimiiko. Luultavasti navigaatio on vielä pielessä, mutta muuta CSS:n loppu kuten alla. #navigaatio ul a{ text-decoration:none; color:#000; padding:0px 22px 0px 0px; font-family:'yanone Kaffeesatz'; font-size:130%; } #navigaatio ul a:hover{ text-decoration:none; color:#fff; } 9.3. Alapalkin viilaus Alapalkki on vielä miten sattuu. Laitetaan sinne perustiedot. <a href="admin/pages.php" >Kirjaudu</a> <a href=" >Powered by GetSimple</a> Ja viilataan CSS:ää.
37 37 #alapalkki { clear:both; height:36px; width:960px; background-image: url('images/alapalkki.jpg'); background-repeat:no-repeat; text-align:center; padding: 6px 0 0 0; } Sitten se on aika lailla valmis Sivupalkkiin asiaa Sivupalkin saat helpoiten mukaan kopioimalla tiedoston sidebar.php kansiosta innovation. Laita se kansioon Hcc, jonka jälkeen templateen laitetaan kyseinen palkki paikoilleen.
38 38 Lähteet Heiskanen, H. (2011). 960 Grid System web-kehityksen apuvälineenä. [Online: Luettu
HTML:n perusteet. Jari Sarja / Otavan Opisto 2012. Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.
HTML:n perusteet Jari Sarja / Otavan Opisto 2012 Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.0 -lisenssillä 1 11. Sivuston taittaminen HTML:n avulla Sivuston taittaminen tarkoittaa
Navigointi Verkkomultimedia ICT1tn004. Elina Ulpovaara
Navigointi Verkkomultimedia ICT1tn004 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on? Mihin sivulta
HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.
HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan
http://www.microsoft.com/expression/
Verkkojulkaisuharjoitus1 TAVOITE Harjoituksen tarkoituksena on opiskella käyttämään verkkojulkaisueditoria (Microsoft Expression Web) ja käynnistämään verkkosivu internetissä. VERKKOSIVUEDITORIN KÄYTTÖOHJEITA
Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009
Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate
XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:
XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa: Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue),
Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.
Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.2012 Hakemisto 1. Sivustot internetissä... 2 2. Yleistä... 2 3.
Alkuun HTML5 peliohjelmoinnissa
Paavo Räisänen Alkuun HTML5 peliohjelmoinnissa www.ohjelmoimaan.net Tätä opasta saa vapaasti kopioida ja levittää ei kaupallisissa tarkoituksissa. Sisällysluettelo 1: Alkusanat 2: Alkuun 3: Pelinäkymä
Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com
Lisätehtävät Frantic 2015 sivu 1 www.frantic.com Fontit - Google fonts Fonttien käyttäminen verkossa ilman uusien fonttien lataamista on melko rajattua, sillä koskaan ei voi tietää mitä fontteja vastaanottajan
Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/
Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,
Teeman rakentaminen Wordpressiin
1 Teeman rakentaminen Wordpressiin Jari Sarja lokakuu 2009 Sisältö Johdanto... 2 Valmiin teeman muokkaaminen... 2 XHTML:n perussäännöt... 4 Teeman tiedostot... 5 Sanasto... 5 Hierarkia... 5 Template...
GetSimple 2.03.1. Jari Sarja. Maaliskuu 2011
1 GetSimple 2.03.1 Jari Sarja Maaliskuu 2011 2 Sisältö 1. Johdanto... 3 2. Asennus... 4 3. Asetukset... 11 3.1. Kieliasetukset... 12 4. Sivut... 15 4.1. Sivun muokkaus... 15 4.2. Uuden sivun luominen...
selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård
selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård CSS selectorit Elementti HTML CSS otsikko h1 { color: pink; Luokka HTML CSS
Ulkoasun muokkaus CSS-tiedostossa
Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css
Kuukauden kuvat kerhon galleriaan 1.4.2016 lähtien kuukaudenkuvaajan kuvagalleria on siirretty uudelle palvelimelle osoitteeseen:
Kuukauden kuvat kerhon galleriaan 1.4.2016 lähtien kuukaudenkuvaajan kuvagalleria on siirretty uudelle palvelimelle osoitteeseen: http://www.kamera73.fi/kuukaudenkuvaaja Kukin seuran jäsen voi laittaa
Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.
3 HTML ja XHTML Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.
HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.
HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen
Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti
1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23
Ylläpitoalue - Etusivu
Crasmanager 5.2 Ylläpitoalue - Etusivu Sivut osiossa sisällön selaus ja perussivujen ylläpito. Tietokannat osiossa tietokantojen ylläpito. Tiedostot osiossa kuvien ja liitetiedostojen hallinta. Työkalut
Lappi.fi -pikaohje Kittilän kylille:
Lappi.fi -pikaohje Kittilän kylille: Tämän pikaohjeen avulla pääsette alkuun sivujenne tekemisessä, mutta suosittelemme täydellisten Lappi.fi -ohjeiden lukemista ennen sivujenne tekemistä. Ohjeet löytyvät
valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda
Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda
Websitebaker. versio 1.3. Jari Sarja. Syyskuu 2011
1 Websitebaker versio 1.3 Jari Sarja Syyskuu 2011 2 Sisältö 1. Johdanto... 4 2. WSB:n asennus omalle koneelle... 5 2.1. XAMPPin asennus... 7 2.2. Tietokannan luominen... 18 2.3. Asennus omalle koneelle
KOTISIVUKONE ULKOASUEDITORI
KOTISIVUKONE ULKOASUEDITORI Kun olet luonut itsellesi kotisivut, voit aloittaa ulkoasun yksityiskohtaisemman räätälöimisen. Kotisivukone tarjoaa helppokäyttöisen ulkoasueditorin, jonka avulla saat sivujen
Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä
Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä Viestintäpalvelut 9.6.2015 1 Sivupohjan tekeminen Ennen kuin alat tekemään hankkeen sivuja, tilaa Viestintäpalveluilta hankesivupohja ja ilmoita
Kuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE
KOTISIVUJEN PÄIVITYSOHJE 1 SISÄLLYSLUETTELO KIRJAUDU PALVELUUN...3 KÄVIJÄSEURANTA...4 SIVUJEN PÄIVITYS...5 Sisältö...6 Sisältö / Työkalut...8 Sisältö / Taulukko...9 Sisältö / Kuvien tuominen...10 Sisältö
VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE
VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE JULKAISUJÄRJESTELMÄÄN KIRJAUTUMINEN. Osoitekenttään kirjoitetaan www.domain.fi/admin. Kirjoita käyttäjätunnus: xxxxxx. Salasana:
Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012
Tiedostot Uudet ominaisuudet: - Ei Tiedostot-kohtaa alueen sisällä, vaan tiedostonvalitsin, jolla tiedostot tuodaan alueelle siihen kohtaan missä ne näytetään - Firefox-selaimella voi työpöydältä raahata
KÄYTTÖOHJE. Servia. S solutions
KÄYTTÖOHJE Servia S solutions Versio 1.0 Servia S solutions Servia Finland Oy PL 1188 (Microkatu 1) 70211 KUOPIO puh. (017) 441 2780 info@servia.fi www.servia.fi 2001 2004 Servia Finland Oy. Kaikki oikeudet
Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla
1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.
ejuttu ohjeet kuinka sitä käytetään.
ejuttu ohjeet kuinka sitä käytetään. 1. Artikkelin lisääminen a. Kirjaudu sisään b. Lisää sisältöä c. Artikkeli i. Lisää pääkuva 1. Pääkuvalle kuvateksti ii. Anna artikkelille otsikko iii. Ingressi-kenttään
Yleistä. Suositukset. Rakenne
Yhdistysavaimen ulkoasuohjeistus Jyty-liiton yhdistyksille 27.5.2015 Yleistä Tämä on Jytyliiton yhdistyksille laadittu ohjeistus ulkoasun rakentamisesta Yhdistysavain-julkaisujärjestelmään. Tavoitteena
Teeman rakentaminen WordPressin versioon 3.0. Jari Sarja marraskuu 2010
1 Teeman rakentaminen WordPressin versioon 3.0 Jari Sarja marraskuu 2010 2 Sisältö 1. Johdanto... 4 1.1. Mitä tarvitaan?... 4 2. Valmiin teeman muokkaaminen... 5 2.1. Teeman tiedostot... 8 2.2. Sanasto...
Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne
Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,
KÄYTTÖOHJE / Ver 1.0 / Huhtikuu WordPress KÄYTTÖOHJE Sotkamo 2016
/ / WordPress KÄYTTÖOHJE Sotkamo 2016 Sisältö Sisältö 1. Yleistä 2. Kirjautuminen ylläpitoon 2.1. Kirjaudu osoitteessa: http://sotkamo.valudata.fi/admin Myöhemmin: http://www.sotkamo.fi/admin 2.2 Salasana
Juricon Nettisivu Joomlan käyttöohjeet
Juricon Nettisivu Joomlan käyttöohjeet Sisällysluettelo Julkaisujärjestelmä hallinta... 3 Joomla-järjestelmän ylävalikolla on seuraavia:... 3 Valikot... 4 Kategoriat ja artikkelit... 5 Lisäosat ja moduulien
Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista
Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?
Kyläsivujen InfoWeb-ohje
Kyläsivujen InfoWeb-ohje Kirjoita internet-selaimesi osoitekenttään kyläsivujen hallintaosoite; www.yla -savo.fi/admin Saavut seuraavalle sivulle, johon kirjoitat käyttäjätunnuksesi ja salasanasi: Paina
HTML5 & CSS3 perusteet
Verkkokurssin tuotantoprosessi kurssin harjoitustyönä suunniteltu toteutettavissa oleva verkkokurssi. HTML5 & CSS3 perusteet Sisältö: 1. Ideointi 2. Tausta-analyysi 3. Sisällön suunnittelu 4. Pedagoginen
Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä
Verkkojulkaiseminen Minna Väisänen HTML5-tehtävä Kirjoita Dreamweaverissa oheisen nettisivun koodi. Lisää xx-kohtiin omat tietosi. Kuvan nimi on joki.jpg. Ensin tehdään sivusto ja sitten yksittäinen sivu.
Uutiskirjesovelluksen käyttöohje
Uutiskirjesovelluksen käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com 2 Sisällys Johdanto... 1 Päänavigointi...
Ohjelman käyttöön ei sisälly muita kuluja kuin ohjelman lisenssimaksu ja mahdolliset webbipalvelusi käyttömaksut.
Kotisivu ohje Kotisivu - ohjelmisto on webbipohjainen kotisivujen julkaisujärjestelmä jossa käyttäjä ei tarvitse erityistaitoja kyetäkseen julkaisemaan webbisivuja. Jos osaat käyttää Microsoft Word tekstinkäsittelyohjelmaa,
GetSimple 3. Tiedostopohjainen julkaisujärjestelmä. Jari Sarja / Otavan Opisto 2013
GetSimple 3 Tiedostopohjainen julkaisujärjestelmä Jari Sarja / Otavan Opisto 2013 Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.0 -lisenssillä Sisältö 1. Johdanto... 4 2. Asennus...
Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2013
Aineistot Kun laitat Muokkaustilan päälle, näet jokaisessa osiossa Lisää aineisto-valikon tai Add an activity or resource valikon (Asetukset lohko Activity chooser on toiminnon ollessa päällä). Valitse
Punomo Tee itse -julkaisun tekeminen
Punomo Tee itse -julkaisun tekeminen Tässä pikaohje Uuden Punomon Tee itse -julkaisujen tekemiseen. Kun ensimmäinen juttusi on tehty tätä ohjetta noudattaen, seuraava homma hoituu maalaisjärjellä. Uudistuvan
Kirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta.
Kirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta. Sisäänkirjauduttuasi näet palvelun etusivulla helppokäyttöisen hallintapaneelin. Vasemmassa reunassa on esillä viimeisimmät tehdyt muutokset
Google-dokumentit. Opetusteknologiakeskus Mediamylly
Google-dokumentit 1 2 3 Yleistä 1.1 Tilin luominen 4 1.2 Docs-päävalikkoon siirtyminen 7 Dokumentit-päävalikko 2.1 Kirjaudu Dokumentteihin 9 2.2 Lähetä tiedosto Google-dokumentteihin 11 2.3 Uuden asiakirjan
/ * PROSESSORIN C-KIELINEN OHJELMA */
/ * PROSESSORIN C-KIELINEN OHJELMA */ #define AVR_ATtiny2313 #define F_CPU 12000000UL #include #include #include void InitUART (unsigned char baudrate); unsigned
NETTISIVUOHJE. MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen
NETTISIVUOHJE SISÄLTÖ 2 JULKAISUJÄRJESTELMÄ tietoa WordPress julkaisujärjestelmästä perustoiminnot (kirjautuminen, asetukset) 6 MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen
Rakennusten elinkaarimittareiden verkkotyökalun käyttöohje. www.360optimi.com/kiinteistopassi
Rakennusten elinkaarimittareiden verkkotyökalun käyttöohje www.360optimi.com/kiinteistopassi Bionova Consulting, luottamuksellinen Viimeksi päivitetty 9. syyskuuta 2014 Käyttöohjeen sisällysluettelo Luo
VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE
VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE JULKAISUJÄRJESTELMÄÄN KIRJAUTUMINEN. Osoitekenttään kirjoitetaan www.domain.fi/admin. Kirjoita käyttäjätunnus: xxxxxx. Salasana:
Ohjeita peda.net palvelun Luo uusi osioon
Ohjeita peda.net palvelun Luo uusi osioon - Elikkä tuo kyseinen kohta löytyy omalta sivultasi oikeasta ylä-laidasta, kuten alla näkyvästä kuvasta näkyy. Sekä tuo kyseinen kohta näkyy luokkien sivuilla
HTML5 jatkuu luettelo, linkit, sisäinen kehys, taulukko. Mirja Jaakkola
HTML5 jatkuu luettelo, linkit, sisäinen kehys, taulukko Mirja Jaakkola Luettelot Luetteloelementillä esitetään eri tyyppisiä luetteloja ja listoja Luetteloelementeille on ominaista: luettelo ja luettelorivit
Uuden Peda.netin käyttöönotto
Sisällysluettelo Uuden Peda.netin käyttöönotto...2 Sisään- ja uloskirjautuminen...2 OmaTila...3 Peda.netin yleisrakenne...4 Työvälineet - Sivut...5 Sivun lisääminen omaan profiiliin:...5 Sivun poistaminen
Navigointi Verkkomultimedia ICT1tn004
Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?
Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012
Aineistot Uudet ominaisuudet: - Ei Tiedostot-kohtaa alueen sisällä, vaan tiedostonvalitsin, jolla tiedostot tuodaan alueelle siihen kohtaan missä ne näytetään - Firefox-selaimella voi tiedostot siirtää
PROJEKTISIVUJEN PAÄ IVITTAÄ MISEN OHJEET
PROJEKTISIVUJEN PAÄ IVITTAÄ MISEN OHJEET Suomen partiolaiset Finlands scouter ry 04/2013, muokattu 02/2015 Tämä ohje on tarkoitettu Suomen Partiolaisten hallinnoimien projektisivustojen sisällöntuottajille
Ohjeita kirjan tekemiseen
Suomen Sukututkimustoimisto on yhdessä Omakirjan kanssa tehnyt internetiin uuden Perhekirja-sivuston. Se löytyy osoitteesta: www.omakirja.fi -> Kirjat -> Perhekirja tai http://www.omakirja.fi/perhekirja?product=6
Munstadi Wordpress ohjeet
Munstadi Wordpress ohjeet Sisällys Kirjautuminen... 4 Ohjauspaneeli... 4 Sisällön luominen... 6 1.1 Sivut... 6 1) Uuden sivun luominen (tai vanhan muokkaaminen)... 6 2) Otsikon valinta ja tekstisisällön
Google Sites: sivun muokkaaminen (esim. tekstin, kuvien, linkkien, tiedostojen, videoiden ym. lisääminen)
Google Sites: sivun muokkaaminen (esim. tekstin, kuvien, linkkien, tiedostojen, videoiden ym. lisääminen) 1. Valitse sivu, jolle haluat lisätä sisältöä tai jota haluat muutoin muokata, ja klikkaa sitä.
Joomla pikaopas. Yksinkertainen opas, jossa neuvotaan esimerkkisivuston teko Joomla julkaisujärjestelmällä vaihe vaiheelta.
Joomla pikaopas Yksinkertainen opas, jossa neuvotaan esimerkkisivuston teko Joomla julkaisujärjestelmällä vaihe vaiheelta. Paavo Räisänen www.ohjelmoimaan.net Tätä opasta saa vapaasti kopioida, tulostaa
UpdateIT 2010: Uutisten päivitys
UpdateIT 2010: Uutisten päivitys Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com 2 Sisällys Uutisen lisääminen... 1
Oy Karltek Ltd internet-sivujen uusiminen. Eveliina Aaltonen
Oy Karltek Ltd internet-sivujen uusiminen Eveliina Aaltonen Audiovisuaalisen viestinnän ammattitutkinto Eurajoen kristillinen opisto, 2015 1 ASIAKAS JA PROJEKTI... 3 1.1 Asiakas...3 1.2 Projektin kuvaus...3
H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
Ohjeistus yhdistysten internetpäivittäjille
Ohjeistus yhdistysten internetpäivittäjille Oman yhdistyksen tietojen päivittäminen www.krell.fi-sivuille Huom! Tarvitset päivittämistä varten tunnukset, jotka saat ottamalla yhteyden Kristillisen Eläkeliiton
Westiekerho.fi päätoiminnallisuudet
Sitefactory Oy Juuso Hurri / Ohjelmoija juuso.hurri@sitefactory.fi 26.6.2015 Westiekerho.fi päätoiminnallisuudet Tämä dokumentti esittelee westiekerho.fi palvelun päätoiminnallisuudet joita tarvittaan
Sivuston muokkaus WordPressin kanssa
Sivuston muokkaus WordPressin kanssa Sivuston muokkaus WordPress-hallintajärjestelmän kanssa on hyvin helppoa. Sitä vähän tutkimalla ja tätä ohjetta lukemalla sen käyttö tulee nopeasti tutuksi. Olen myös
Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara
Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005
ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu
ETAPPI ry JOOMLA 2.5 Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Sivu 1(16) Sisällysluettelo 1 Joomla! sivuston sisällöntuotanto... 2 2 Artikkeleiden julkaisu sivustolla... 4 3 Artikkelin julkaisemista
Suvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014
Aineistot Kun laitat Muokkaustilan päälle, näet jokaisessa osiossa Lisää aktiviteetti tai aineisto - linkin. Valitse linkin takaa avautuvasta listasta, millaisen aineiston haluat alueelle tuoda, ja paina
WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY
1 WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY 10.4.2015 Lounea Oy Tehdaskatu 6, 24100 Salo Puh. 029 707 00 Y-tunnus 0139471-8 www.lounea.fi Asiakaspalvelu 0800 303 00 Yrityspalvelu 0800 303 01 Myymälät 0800 303
BLOGGER. ohjeita blogin pitämiseen Googlen Bloggerilla
BLOGGER ohjeita blogin pitämiseen Googlen Bloggerilla Sisältö Blogin luominen... 1 Uuden blogitekstin kirjoittaminen... 4 Kuvan lisääminen blogitekstiin... 5 Lisää kuva omalta koneelta... 6 Lisää kuva
Kuva xhtml-sivulla. Mirja Jaakkola
Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri
Sami Hirvonen. Ulkoasut Media Works sivustolle
Metropolia ammattikorkeakoulu Mediatekniikan koulutusohjelma VBP07S Sami Hirvonen Ulkoasut Media Works sivustolle Loppuraportti 14.10.2010 Visuaalinen suunnittelu 2 Sisällys 1 Johdanto 3 2 Oppimisteknologiat
Sivupohjien täyttö suppeat sivupohjat
Sivupohjien täyttö suppeat sivupohjat Tässä kuvataan sivupohjien muokkaus askelittain yksinkertaisemman sivupohjan avulla. Tätä ohjetta tunnollisesti seuraamalla saat aikaan yksinkertaiset, mutta toimivat
Wordpress. Bloggaamisen perusteet tekniset minimitoimet, joilla pääset alkuun
Wordpress Bloggaamisen perusteet tekniset minimitoimet, joilla pääset alkuun Mikä alusta käyttöön? Tarjolla on runsaasti eri bloggausalustoja Blogger ja Wordpress ovat suosituimmat ilmaiset blogialustat
Editorin käyttö. TaikaTapahtumat -käyttöohje
Editorin käyttö TaikaTapahtumat -käyttöohje Yleistä ohjelmasta etaika-järjestelmän HTML-moduuli sisältää tekstieditorin, joka on monipuolinen apuväline tehtäessä materiaalia sivustolle (esim. tapahtumakohtaiset
Johdatus ohjelmointiin
Johdatus ohjelmointiin EXAM tentin liitetiedostojen lataaminen, käyttäminen ja palauttaminen Kerro mahdolliset puutteet tai parannusehdotukset: pietari.heino@tut.fi Tällä sivulla on selitetty lyhyesti
PUTTERI JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE
PUTTERI JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE JULKAISUJÄRJESTELMÄÄN KIRJAUTUMINEN. Osoitekenttään kirjoitetaan www.domain.fi/admin. Kirjoita käyttäjätunnus: xxxxxx. Salasana:
HTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset...
HTML-ohjeet Sivun perusrakenne ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset... ...tänne tulee javascript-koodi...
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4
Siemens Webserver OZW672
Siemens Webserver OZW67 Climatix IC pilvipalvelu Kytke laite lämpöpumpun ohjaimeen Kytke laite verkkopiuhalla internetiin Mene nettiselaimella Climatix IC palveluun Luo käyttäjätili ja rekisteröi laite
opiskelijan ohje - kirjautuminen
opiskelijan ohje - kirjautuminen estudio on Edupolin kehittämä e-oppimisympäristö koulutusryhmän verkkoalustana perinteisen luokkaopetuksen tukena. etäopiskelussa ja -opetuksessa kotoa tai työpaikalta.
eportfolio ammatillisen kasvun ja oman osaamisen kuvaaminen
eportfolio ammatillisen kasvun ja oman osaamisen kuvaaminen Esimerkkejä eportfolioista ja lisätietoa eportfolio /web-sivujen julkaisupalveluista Few examples of eportfolios / personal websites. (with permission
H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
Webpalvelin muistitikulle - Ohje
- Ohje Jari Sarja jari.sarja @ 2017 Creative Commons Nimeä-JaaSamoin 4.0 Kansainvälinen SISÄLLYSLUETTELO 1 Johdanto... 3 1.1 Miksi asennus muistitikulle?... 3 2 Webpalvelimen asennus... 4 3 Käyttöliittymä...
KURRA HOCKEY RY Nettisivujen joukkueen ylläpito-ohje Piia Heiniö, 1/2018. Kurra Hockey Ry 1
KURRA HOCKEY RY Nettisivujen joukkueen ylläpito-ohje Piia Heiniö, 1/2018 Kurra Hockey Ry 1 Kirjautuminen ylläpitoon https://www.kurra.fi/jasen Kirjaudu sisään saamillasi tunnuksilla Kurra Hockey Ry 2 Päivitä
Turun yliopiston Nelli ohje käyttöönottoon
Turun yliopiston Nelli ohje käyttöönottoon Perusajatus Perusajatus on sulkea metalib sivu sarakkeeseen, jonka vierelle toiseen sarakkeeseen sijoitetaan hakemistovalikko. Metalib sivujen muokkaus Metalib
SeaMonkey pikaopas - 1
SeaMonkey pikaopas SeaMonkey on ilmainen ja yksinkertainen www-sivujen teko-ohjelma. Sillä on kätevää koostaa yksinkertaisia sivuja ilman, että täytyy tietää jotain HTML-koodista. Tämä opas esittelee sivuston
DIGITAALISEN TARINAN TUOTTAMINEN MICROSOFT PHOTO STORY 3- OHJELMAN AVULLA VAIHEINEEN
OMAN ALAN ESITELMÄ DIGITAALISENA TARINANA Laaditaan digitarina jostakin oman alan aiheesta (ks. lista aiheista). Edetään seuraavasti: 1. Valitse listalta aihe. Voit myös ehdottaa omaa aihetta. 2. Mieti,
Googlen pilvipalvelut tutuksi / Google Drive
Googlen pilvipalvelut tutuksi / Google Drive Koulutuksen aikana harjoitellaan tiedostojen ja kuvien siirtoa Google Drive-palveluun sekä tiedostojen jakamista Lisäksi harjoitellaan Google Docs (Asikirjat)
Lapin Veikot suunnistusjaosto Iltarastien tulospalveluohjeet versio 29.4.2016 Pentti Poikela
Lapin Veikot suunnistusjaosto Iltarastien tulospalveluohjeet versio 29.4.2016 Pentti Poikela 2.5.2016 2 Sisältö... 1 1. Laitteet ja ohjelmat... 3 2. Tulospalvelun yleisohjeet... 3 3. E-Result ohjeet...
XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola
XHTML jatkuu linkit, listat, taulukot Mirja Jaakkola Sisällys 3. Linkki (anchor) 4. Suhteellinen linkki 5. Sivun sisäinen linkki 6. CSS ja linkit 7. Tehtävä 8. Listat eli luettelot 9. Järjestämätön lista
UpdateIT 2010: Editorin käyttöohje
UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...
Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen
Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ennen kuin aloitat: 1. Asenna tietokoneeseesi ilmainen Miso Regular fontti, jonka saat täältä: https://www.fontspring.com/fonts/marten- nettelbladt/miso
Office_365_loppukäyttäjän ohje. 15.5.2015 Esa Väistö
Office_365_loppukäyttäjän ohje 15.5.2015 Esa Väistö 2 Sisällysluettelo Kuvaus... 3 Kirjautuminen Office_365:een... 3 Valikko... 4 Oppilaan näkymä alla.... 4 Opettajan näkymä alla... 4 Outlook (Oppilailla)...
VSP webmail palvelun ka yttö öhje
VSP webmail palvelun ka yttö öhje Kirjaudu webmailiin osoitteessa https://webmail.net.vsp.fi Webmailin kirjautumissivu, kirjoita sähköpostiosoitteesi ja salasanasi: Sähköpostin päänäkymä: 1: Kansiolistaus
Ohje. ipadia käytetään sormella napauttamalla, kaksoisnapsauttamalla, pyyhkäisemällä ja nipistämällä kosketusnäytön
ipadin käyttö 1. Käynnistä ipad oikeassa yläreunassa olevasta painikkeesta. 2. Valitse alareunasta nuoli Avaa. Vedä sormella nuolesta eteenpäin palkin verran eli pyyhkäise. Tietoturva Käyttöön tarvitaan
A* Reitinhaku Aloittelijoille
A* Reitinhaku Aloittelijoille Alkuperäisen artikkelin kirjoittanut Patrick Lester, suomentanut Antti Veräjänkorva. Suom. huom. Tätä kääntäessäni olen pyrkinyt pitämään saman alkuperäisen tyylin ja kerronnan.