Teeman rakentaminen Wordpressiin

Koko: px
Aloita esitys sivulta:

Download "Teeman rakentaminen Wordpressiin"

Transkriptio

1 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... 6 Uuden teeman luominen... 7 CSS... 7 Header ja Footer pohjat...10 Index pohja...11 Sivupalkki...13 Kommentit...13 Leiskasta koodiksi...14 Style.css...15 Header.php...15 Teeman tekeminen verkossa...16 WordPress Theme generator...16 Dotemplate...17 CSSEZ...18 Theme Generator...19 Koneelle asennettavat ohjelmat...20

2 2 Johdanto Wordpress on blogialustana numero 1. Sillä on jo miljoonia käyttäjiä. Wordpress on myös alkanut vallata tavallisia CMS-markkinoita eli se on nykyisin myös julkaisualusta. Wordpressille on saatavissa valmiita ulkoasuja eli teemoja (theme). Usein tulee kuitenkin eteen tilanne, että valmiista teemasta ei saa muokattua mieleistään silloin on tehtävä kokonaan uusi teema. Tässä oppaassa käydään läpi uuden teeman luomisen perusteet. Wordpressteemaa tehdessä pitää muistaa yleiset periaatteet. Tärkein sääntö on, että pyrit hyvään ja valiidiin koodiin niin HTML:n kuin CSS:n osalta. Tee lisäksi teema viimeisimmälle WP:n versiolle. Valmiin teeman muokkaaminen Wordpressin mukana tulee aina valmis teema nimeltä default. Kopioi koko kansion sisältö omaan kansioosi. Teema löytyy seuraavalla kaavalla eli ensin wamp -> www -> kansio -> wp content -> themes Kun kopiointi on valmis eli kansiossa themes on kansio omalla nimelläsi ja sen sisällä on sama sisältö kuin kansiossa default on kaikki kunnossa. Avaa seuraavaksi omasta kansiostasi tiedosto style.css ja tee muutokset.

3 3 Theme Name: (sama nimi kuin kansiolla) Theme URI: (missä teema sijaitsee?) Description: (kuvaus) Version: (versio) Author: (kuka loi teeman?) Author URI: (kotisivusi) Mene tämän jälkeen ylläpitoon ja valitse oma teemasi. Sitten voit katsella sitä tai laittaa vaikka aktiiviseksi.

4 4 XHTML:n perussäännöt Uusi teema kannattaa luoda käyttäen validia XHTML-koodia. XHTML:n perussäännöt on kuvattu W3C:n kotisivuilla. Seuraavat esimerkit perustuvat pääosin sivuilta saatuihin tietoihin. Pienet kirjaimet XHTML:ssä kaikki muut elementit paitsi <!DOCTYPE> kirjoitetaan pienaakkosilla. Se on XHTML-standardi. Oikein Väärin <html> <p> <HTML> <P> Sisäkkäisten elementtien järjestys Ensin aloitettu elementti päätetään aina viimeksi. Ei siis päällekkäisyyksiä. Sama sääntö HTML:ssä, mutta sitä ei koskaan noudateta. Oikein Väärin <p><b>lihavoi</b></p> <p><b>lihavoi</p></b> Tagien päättäminen Kaikki tagit mitkä aloitetaan, pitää myös päättää. Oikein Väärin <p>tämä on oikein</p> <p> Ei näin <b>lihavaa... Tyhjät tagit päätetään myös XHTML:ssä päätetään myös tyhjät tagit. Tyhjiä tageja ovat <hr> <br> ja <img>, jota siis päätettään kauttaviivalla näin <hr />. Oikein <br /> <hr /> <img src="jussi.jpg" /> Väärin <br> <hr> <img src="jussi.jpg>. HUOM! Ennen kauttaviivaa on siis välilyönti. Ei siis näin <hr/> vaan näin <hr />

5 5 Arvot lainausmerkkeihin Koskee myös numeroita. Oikein Väärin <table width="50%" border="0" cellpadding="5" cellspacing="0"> <table width= 50% border= 0 cellpadding=5 cellspacing=0> Teeman tiedostot Teemalla on aina kaksi tiedostoa style.css ja index.php. Ulkoasun määrää style.css ja mukaan otettavat elementit päättää index.php. Tai on tietenkin muitakin tiedostoja, mutta jotta teeman voi valita tarvitaan nuo kaksi em tiedostoa. style.css (sisältää tiedot teeman luojasta ja säätää ulkoasun, Pakollinen) index.php (kaikista tärkein, se kerää mukaan muut elementit, Pakollinen) single.php (usein sama kuin index.php tarvitaan lähinnä yksittäistä blogimerkintää varten) page.php (usein sama kuin index.php tarvitaan lähinnä yksittäistä sivua varten) archive.php (arkisto) category.php (luokittelu) search.php (haku) 404.php (kun sivua ei löydy) comments.php (säätää kommentit, jos puuttuu niin oletusten mukaisesti) comments-popup.php (säätää popupkommentit, jos puuttuu niin oletusten mukaisesti) author.php (tarvitaan, jos halutaan kirjoittajan mukaan) date.php (tarvitaan jos halutaan päivämäärän mukaan) Sanasto Template (malli, pohja). Template säästää työaikaa, koodi kirjoitetaan vain kerran. Template file (mallitiedosto) sisältää sivuston eri osat. Theme (teema) Sisältää kaikki tiedostot sivuston rakennetta ja ulkoasua varten. Sotketaan yleensä templateen. Hierarkia Templaten hierakian ylimmäisenä on index.php. Se kokoaa yhteen muut templatet kuten esim 404.php, joka tarkoittaa löytämätöntä sivua. Tässä kuusi tärkeintä tiedostoa templaten rakentamista varten.

6 6 Template Tässä alla esimerkki siitä miltä sivuston template eli pohja voisi näyttää. Yläosan nimi on header.php. Sinne tulee yleensä tietoja blogista kuten esim blogin nimi ja kuvaus. Index.php sisältää kirjoitukset ja kommentit. Se on merkattu punaisella, koska se muuttuu. Muut osat ovat lähes koko ajan muuttumattomia. Kun kirjoitat esim. blogimerkinnän tapahtuu muutos juuri tuossa osassa sivua. Sidebar.php sisältää yleensä arkiston ja kategoriat. Footer.php on osa, jossa tietoja esim. tekijästä.

7 7 Uuden teeman luominen Luo uusi kansio nimellä uusiteema samaan paikkaan missä muutkin teemat sijaitsevat. CSS Seuraavaksi luodaan CSS-tiedosto (style.css), jossa samalla perustiedot teemasta. Koodi css:ään tuossa alla body { padding: 0; margin: 0; text-align: center; background-color: #ccc; color: #000; font: 76% Arial, Helvetica, sans-serif; } /* layout jolla punainen reunus*/ #layout { width: 63em; margin: 0 auto; text-align: left; border: 1px solid #000; } /* ylapalkki */ #ylapalkki { width: 100%; border-bottom: 1px solid #000; float: left; }

8 8 #ylavasen { float: left; } #ylapalkinsisalto { padding: 5px; } /* palstat */ #palstat { width: 100%; clear: both; } /* sisalto */ #teksti{ width: 68%; float: right; } #tekstinsisalto { padding: 5px; border: 1px solid blue; } /* sininen reunus */ /* navigaatio */ #navigaatio{ width: 32%; float: left; } #navigaationsisalto { padding: 5px; border: 1px solid green; } /* vihreä reunus */ /* alapalkki */ #alapalkki { width: 100%; border-top: 1px solid #000; clear: both; } #alapalkinsisalto { padding: 5px; } CSS-tiedoston alkuun kuitenkin vielä ne perustiedot. Kopioi vaikka default-teeman css:stä perusrunko tai kirjoita alla olevan esimerkin mukaan.

9 9 Toinen palikka mikä tarvitaan on index.htm, joka tässä alla. <?xml version="1.0"?> <!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> <title></title> <link rev="made" href="mailto:" /> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" href="tyyli.css" type="text/css"> </head> <body> <div id="layout"> <div id="ylapalkki"> <div id="ylavasen"> <div id="ylapalkinsisalto"><h1>yläpalkki</h1> <div id="palstat"> <div id="teksti"> <div id="tekstinsisalto"><h2>paulo Freire</h2> <p>paulo Freire syntyi Brasiliassa vuonna 1921 maansa köyhimmälle alueelle.</p>

10 10 <div id="navigaatio"> <div id="navigaationsisalto"><h2>navigaatio</h2> <div id="alapalkki"> <div id="alapalkinsisalto"><h2>alapalkki</h2> </body> </html> Header ja Footer pohjat Jokaisella sivulla ovat elementteinä header.php ja footer.php. Luodaan ne seuraavaksi. Koodi header osioon tässä <?xml version="1.0"?> <!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> <title></title> <link rev="made" href="mailto:" /> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta name="generator" content="notetab Light 6.12" /> <meta name="author" content="" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="tyyli.css" type="text/css"> </head> <body> <div id="layout"> <div id="ylapalkki"> <div id="ylavasen"> <div id="ylapalkinsisalto"><h1>yläpalkki</h1>

11 11 Sitten laitetaan yläosa uusiksi eli haetaan tiedot WorPressiä varten. Kannattaa napata default teemasta. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes()?>> <head profile="http://gmpg.org/xfn/11"> <title><?php bloginfo('name');?> <?php wp_title();?></title> <meta http-equiv="content-type" content="<?php bloginfo('html_type');?>; charset=<?php bloginfo('charset');?>" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>" type="text/css" media="screen,projection" /> <?php wp_head();?> </head> Lopuksi vielä blogin nimi ja kuvaus paikoilleen <div id="ylapalkinsisalto"> <p class="description"><?php bloginfo('description');?></p> <h1><a href="<?php echo get_option('home');?>/"><?php bloginfo('name');?></a></h1> <ul id="nav"> <?php wp_list_pages('sort_column=menu_order&title_li=');?> </ul> wp_title() Sivun title. wp_head() Javascrptin linkit. get_option() Hakee kannasta. wp_list_pages() Hakee sivut kannasta Alapalkista tulee ulos jotain tällaista Index pohja Tämä on kaikista tärkein. Sinne laitetaan ensinnäkin footer ja header

12 12 <?php get_header();?> <?php get_footer();?> Tee tiedosto nimellä index.php, jonne kaivat sisällön kohdasta index.html. Kas näin. <?php get_header();?> <div id="palstat"> <div id="teksti"> <div id="tekstinsisalto"><h2>paulo Freire</h2> <p>paulo Freire syntyi Brasiliassa vuonna 1921 maansa köyhimmälle alueelle.</p> <div id="navigaatio"> <div id="navigaationsisalto"><h2>navigaatio</h2> <div id="alapalkki"> <div id="alapalkinsisalto"><?php get_footer();?> </body> </html> Sitten katsomaan miltä uusi sivu näyttää (muista valita nykyinen template)

13 13 Seuraavaksi haetaan sisältöä. Sijoita seuraavaa kohta siihen kohtaan jossa oli tekstiä Freirestä. <?php if ( have_posts() ) : while ( have_posts() ) : the_post();?> <h2><a href="<?php the_permalink()?>"><?php the_title();?></a></h2> <?php the_content();?> <p><?php the_time('f j, Y');?> at <?php the_time('g:i a');?> <?php the_category(', ');?> <?php comments_number('no comment', '1 comment', '% comments');?></p> <?php endwhile; else:?> <h2>woops...</h2> <p>sorry, no posts we're found.</p> <?php endif;?> <p align="center"><?php posts_nav_link();?></p> Sivupalkki Tee seuraavaksi tiedosto functions.php ja sijoita siihen koodi suoraan defaultin vastaavasta tiedostosta. Tee seuraavaksi tiedosto sidebar.php ja sijoita sinne koodi suoraan defaultin vastaavasta tiedostosta Lopuksi teet index.ph tiedostoon seuraavan lisäyksen. <?php get_sidebar();?> Kommentit Laitetaan index.php tiedostoon sinne viestin alle päivämäärän jälkeen <?php comments_template(); // Get wp-comments.php template?> Kokeile ja huomaat kuinka css repeilee. Joten sinne muutoksia.textarea#comment { width: 400px; padding: 5px; }.commentmetadata { font-size: 10px; } Viimeistelyä Muokkaa blogin ostikkon css h1 a { text-decoration:none; color:#333; } Ja tavlisten www-sivujen CSS

14 14 #nav ul{margin:0; padding: 10px 0px 4px 4px ; text-align:left; border:none; background:white; font:100% Verdana,Arial,sans-serif; font-weight:bold; color:#fff; background-color: transparent; } #nav li{display:inline; margin-left:0em; text-decoration:none; } #nav ul a{text-decoration:none; padding:0px 7px 0 5px; border-width:1px; border-style:none solid none none; border-color:#fff; } #nav a:link{color:#fff; text-decoration:none;} #nav a:visited{color:#fff; text-decoration:none;} #nav a:hover{background-color: transparent; color:#000; text-decoration:none;} #nav a#current{background-color: transparent; color:#fff} Leiskasta koodiksi Ensin pitää olla leiska, joka leikataan palasiksi eli saat lopputuloksena html-tiedoston ja css-tiedoston. Siirrä seuraavaksi molemmat tiedostot kansioon wp-content/themes kansioon, jonne teet vielä oman kansion. Sitten kopsaat oletustyllistä tiedostot comments.php ja searchform.php luomaasi kansioon.

15 15 Style.css Kansiosat default käyt kopsaamassa tyylin yläosasta tiedot ja laitat oman tiedoston (style.css) alkuun. /* Theme Name: WordPress Default Theme URI: Description: The default WordPress theme based on the famous <a href="http://binarybonsai.com/kubrick/">kubrick</a>. Version: 1.6 Author: Michael Heilemann Author URI: Tags: blue, custom header, fixed width, two columns, widgets Kubrick v1.5 This theme was designed and built by Michael Heilemann, whose blog you will find at The CSS, XHTML and design is released under GPL: */ Header.php Kopioi seuraavaksi kaikki yläpalkkiin koodi index.html-tiedostosta ja tallenna se tiedostoon header.php Seuraavaksi menet knasioon default ja sieltä tiedostosta head.php kopsaat omaan kansiosi header.phptiedostoon seuraavat palikat.

16 16 Seuraavaksi Navigation Menu (wp_list_pages) Muuta LI kohdat pois ja tilalle <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?> Teeman tekeminen verkossa Verkosta löytyy paikkoja, joissa voit tehdä oman teemasi. Yleensä teema tallennetaan omalle koneelle zippakettina. WordPress Theme generator Tämä on varsin helppokäyttöinen ja hyvin toimii leiskan koon ja palstojen muuttaminen. Oikealla näkyy syntynyt tilanne

17 17 Kun ulkoasu on valmis voit tallentaa sen. Dotemplate Tämä on loistavan helppo käyttää. Aktivoit elementin ja pääset muokkaamaan sitä. Huono puoli on, ettei täysin valmista templatea WordPressille.

18 18 CSSEZ Tämä on hankala käyttää ja lopuksi vie kyllä tiedot WordPressiä varten, mutta ei vakuuta. Jotenkin hankala käyttää. Lisäksi pitää vielä reksiteröityä.

19 19 Theme Generator Tämä ei ihan vakuuta. Tekee kyllä jotakin, mutta teema ei vaan toimi. Tai melkein toimii.

20 20 Valmiit pohjat Valmiin pohjan ideana on, että sinun tarvitsee ainoastaan muokata css-koodia, jotta sivu saisi uuden ulkoasun. WP-Themer Kit Kätevästi valmiita pohjia muokattavaksi. Koneelle asennettavat ohjelmat Tämä on loistava ja helpookäyttöinen työkalu. Valmiita pohjia löytyy muokattavaksi ja vienti Wordpress teemaksi sujuu leikiten.

21 21 Käyttöliittymä on hyvin yksinkertainen. Juhani kehuu ohjelmaa näin: Tunnustaako kukaan kokeilleensa tai peräti käyttäneensä Artisteeria? :) Itse kokeilin trial-versiota ja hämmästyttävää kyllä, sillä "tehty" teema toimi Drupal 6:ssa ilman mitään havaittavia ongelmia. [ ] Siinä mielessä, että monikin lahjakas Adoben CS:t tunteva graafikko lienee tälläkin hetkellä sisällönhallintajärjestelmien vetovoiman suhteen vielä suht latentissa tilassa, koska php+xhtml+css opintomenestys on saattanut lähimenneisyydessä jäädä turhan heikon puoleiseksi. (http://drupal.fi/fi/keskustelut/tapaus-artisteer) Lisää tietoa Webdesignerwallin ohjeet. Pitäisi toimia. How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial So you want to create WordPress themes huh?

22 22 Tämä on valitettavasti aiemmille versioille, muuten ihan hyvä. How to create wordpress theme from scratch WordPress tutorial How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

Julkaisun!laji!! Opinnäytetyö! Sivumäärä!! 39!

Julkaisun!laji!! Opinnäytetyö! Sivumäärä!! 39! MAINOSALANVERKKOSIVUSTONERITYIS0 PIIRTEETJANIIDENTOTEUTTAMINEN HeikkiAla0Nikkola Opinnäytetyö Toukokuu2013 Mediatekniikankoulutusohjelma Tekniikanjaliikenteenala Tekijä(t) ALA0NIKKOLAHeikki Julkaisunlaji

Lisätiedot

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

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

Lisätiedot

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (www.jarisarja.fi)

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (www.jarisarja.fi) 1 Sivupohja flat file julkaisujärjestelmälle Versio 1.1 /syyskuu 2011 Kirjoittanut Jari Sarja (www.jarisarja.fi) 2 Sisältö 1. Johdanto... 4 2. Ruudukkopohjainen taitto... 5 2.1. 960 Grid System... 5 2.2.

Lisätiedot

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009

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

Lisätiedot

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 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

Lisätiedot

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. 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.

Lisätiedot

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: 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),

Lisätiedot

Kotisivut helposti - osa 4

Kotisivut helposti - osa 4 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

Lisätiedot

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 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

Lisätiedot

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai

Lisätiedot

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

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

Lisätiedot

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

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

Lisätiedot

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta

Lisätiedot

Putteri Käyttöliittymä ja ulkoasu

Putteri Käyttöliittymä ja ulkoasu Putteri Käyttöliittymä ja ulkoasu Jukka Värri 15.10.2007 Versio: 1.0 Yleistä järjestelmästä Järjestelmän merkistö on UTF-8 (Unicode). Käyttöliittymä tulee järjestelmän mukaan. Uusia käyttöliittymiä ei

Lisätiedot

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. 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

Lisätiedot

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com

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

Lisätiedot

2. PEHMEÄ XHTML XRAJAHTML

2. PEHMEÄ XHTML XRAJAHTML Luennot 1. Intro 2. PEHMEÄ XHTML XRAJAHTML Dokumentin (matalan tason) rakenne DOCTYPE ja merkistökoodaukset Elementtien syvät rajat 3. CSS 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys &

Lisätiedot

Juricon Nettisivu Joomlan käyttöohjeet

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

Lisätiedot

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.

Lisätiedot

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012

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

Lisätiedot

Ulkopuolisen tyylitiedoston käyttö

Ulkopuolisen tyylitiedoston käyttö 1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit

Lisätiedot

XHTML aloitus. Sisällys

XHTML aloitus. Sisällys XHTML aloitus XHTML-dokumentin rakenne, metatieto, kommentit, tekstit Mirja Jaakkola Sisällys 3. Taustaa 4. Selain palvelin 5. Elementin rakenne 6. Attribuutti 7. XHTML-dokumentin rakenne 8. XHTML:n DOCTYPE-määrittely

Lisätiedot

Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA

Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA Prologi Blogi voidaan määritellä verkkosivustoksi, johon yksi ihminen tai tietty ryhmä tuottaa ajankohtaista sisältöä. Blogi mahdollistaa omien ajatusten

Lisätiedot

Väitöskirja -mallipohja

Väitöskirja -mallipohja JYVÄSKYLÄN YLIOPISTO Väitöskirja -mallipohja Word 2007/2010 IT-palvelut hannele.rajaniemi@jyu.fi https://koppa.jyu.fi/avoimet/thk/vaitoskirja sovellustuki@jyu.fi Sisältö Miten toimii väitöskirja/asiakirjamallipohja?

Lisätiedot

1. Valitse käyttäjänimi 2. Kirjoita salasana 3. Anna sähköpostiosoitteesi 4. Keksi wikillesi nimi

1. Valitse käyttäjänimi 2. Kirjoita salasana 3. Anna sähköpostiosoitteesi 4. Keksi wikillesi nimi WIKISPACES-WIKIN LUOMINEN Kirjoita selaimeesi osoite http://www.wikispaces.com 1. Valitse käyttäjänimi 2. Kirjoita salasana 3. Anna sähköpostiosoitteesi 4. Keksi wikillesi nimi Paina Join-painiketta Onneksi

Lisätiedot

Worldpress ohje. Artikkelin kirjoittaminen, päivittäminen, kuvan, linkin, lomakkeen ja Google-kalenterimerkkinnän lisääminen

Worldpress ohje. Artikkelin kirjoittaminen, päivittäminen, kuvan, linkin, lomakkeen ja Google-kalenterimerkkinnän lisääminen Worldpress ohje Artikkelin kirjoittaminen, päivittäminen, kuvan, linkin, lomakkeen ja Google-kalenterimerkkinnän lisääminen Kun päivität sivuja, kirjaudu omalla salasanalla ja lisäksi jäsenten yhteisellä

Lisätiedot

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa. TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan

Lisätiedot

Kyläsivujen InfoWeb-ohje

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

Lisätiedot

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

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.

Lisätiedot

KÄYTTÖOHJE / Ver 1.0 / Huhtikuu WordPress KÄYTTÖOHJE Sotkamo 2016

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

Lisätiedot

CSS. Tekstin muotoilua

CSS. Tekstin muotoilua CSS Tekstin muotoilua Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight

Lisätiedot

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola CSS aloitus CSS Cascade Stylesheet Mirja Jaakkola Sisältö 3. Ulkopuolisen tyylitiedoston käyttö 4. Tyyliohjeen kirjoittaminen 5. style-elementti 6. style-attribuutti 7. class-attribuutti 8. id-attribuutti

Lisätiedot

Lappi.fi -pikaohje Kittilän kylille:

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

Lisätiedot

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit Internetsivujen perusrakenne Html-dokumentin keskeiset elementit ja attribuutit Websivu html-dokumentti Internetsivun rakenne kuvataan html-kielellä Html-dokumentti on tekstimuotoinen tiedosto, jossa luetellaan

Lisätiedot

Alkuun HTML5 peliohjelmoinnissa

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ätiedot

Ylläpito toimittaa sinulla sähköpostiisi käyttäjätunnuksen ja salasanan. Tässä esimerkissä

Ylläpito toimittaa sinulla sähköpostiisi käyttäjätunnuksen ja salasanan. Tässä esimerkissä Sivustolle santaskyla.net kirjautuminen Sisällysluettelo Sisällys Sivustolle santaskyla.net kirjautuminen... 1 Sisällysluettelo... 1 Käyttöoikeus... 1 Kirjautunut käyttäjä... 3 Artikkelin kommentointi...

Lisätiedot

Johdatusta selainohjelmointiin

Johdatusta selainohjelmointiin Johdatusta selainohjelmointiin Ohjelmat ja tyylit selaimessa ja HTML Jaana Holvikivi Selaimet ja HTML Selaimet: Internet Explorer, Exchange Firefox, Chrome Opera 10 Safari 4 Lukevat HTML sivuja ja asettelevat

Lisätiedot

Helsingin yliopisto WebOodi 1 Opiskelijarekisteri Versio 3.2. Tenttityökalu

Helsingin yliopisto WebOodi 1 Opiskelijarekisteri Versio 3.2. Tenttityökalu Helsingin yliopisto WebOodi 1 Tenttityökalu Tenttityökalu on oiva väline laitos- ja tiedekuntatenttien tekemiseen. Esimerkiksi tiedekuntatentissä voi tenttiä samana päivänä kymmeniä eri opintojaksoja.

Lisätiedot

Ohjeet asiakirjan lisäämiseen arkistoon

Ohjeet asiakirjan lisäämiseen arkistoon Ohjeet asiakirjan lisäämiseen arkistoon 1. Jos koneellesi ei vielä ole asennettu Open Office ohjelmaa, voit ladata sen linkistä joka löytyy Arkisto => Asiakirjapohjat sivulta seuran kotisivuilta. Jos ohjelma

Lisätiedot

Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista

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?

Lisätiedot

HTML5 -elementit jatkuu

HTML5 -elementit jatkuu HTML5 -elementit jatkuu Harjoitus: xhtml.htm -> html5.htm Muuta tämä xhtml dokumentti HTML5:ksi: http://users.metropolia.fi/~norrm/s12/kalasu/xhtml.htm Validoi myös koodisi: http://validator.w3.org/ "Mallivastaus"

Lisätiedot

Punomo Tee itse -julkaisun tekeminen

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

Lisätiedot

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä

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

Lisätiedot

Hakukoneoptimoinnin ABC

Hakukoneoptimoinnin ABC Hakukoneoptimoinnin ABC Sisältö Mitä on hakukoneoptimointi? Miten hakukoneoptimointia tehdään? Miten valitset oikeat hakusanat? Miten pääsee Googlen hakutuloksissa ensimmäiselle sivulle? Mitä on hakukoneoptimointi?

Lisätiedot

Ylläpitoalue - Etusivu

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

Lisätiedot

CSS - tyylit. 13.11.2000 Seppo Räsänen

CSS - tyylit. 13.11.2000 Seppo Räsänen CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot

Lisätiedot

RAPORTTI 25.2.2011 SUORITETUISTA KÄYTETTÄVYYSTESTEISTÄ Luuppi-projekti

RAPORTTI 25.2.2011 SUORITETUISTA KÄYTETTÄVYYSTESTEISTÄ Luuppi-projekti RAPORTTI 25.2.2011 SUORITETUISTA KÄYTETTÄVYYSTESTEISTÄ Luuppi-projekti Saila Oldén 1. JOHDANTO Tässä raportissa kuvataan perjantaina 25.2.2011 Luuppi-projektin tiimoilta suoritettujen käytettävyystestien

Lisätiedot

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen

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

Lisätiedot

Data@Flow ohjeet. AtFlow Oy, Pekka Rönkkönen, pekka@atflow.fi +358 (0)50 340 1705

Data@Flow ohjeet. AtFlow Oy, Pekka Rönkkönen, pekka@atflow.fi +358 (0)50 340 1705 Data@Flow ohjeet AtFlow Oy, Pekka Rönkkönen, pekka@atflow.fi +358 (0)50 340 1705 1 Sisällysluettelo 1. Kirjautuminen... 2 2. Sisältöalueiden muokkaaminen... 4 2.1. Sisältöalueen sisällön muokkaaminen...

Lisätiedot

Kuva: Ilpo Okkonen

Kuva: Ilpo Okkonen OodiHOPS OHJAAJAN OHJE 14.2.2017 Kuva: Ilpo Okkonen OodiHOPS Oulun yliopistossa Oulun yliopiston koulutusneuvosto on päättänyt, että OodiHOPS-toiminto otetaan käyttöön vähintään aloittavilla opiskelijoilla

Lisätiedot

PIKI-verkkokirjasto 1 Lyhyet vinkit

PIKI-verkkokirjasto 1 Lyhyet vinkit PIKI-verkkokirjasto Kirjoittamis- ja julkaisuohje vinkkeihin LKK:n ja Nuorten Mitä lainaisin / Lasten Vinkit (johdanto ja vinkit allekkain samaan artikkeliin) PIKI-verkkokirjasto 1 Kuukauden kuusi vinkkiä

Lisätiedot

EDMODO. -oppimisympäristö opettajille ja oppilaille KOONNUT: MIKA KURVINEN KANNUKSEN LUKIO

EDMODO. -oppimisympäristö opettajille ja oppilaille KOONNUT: MIKA KURVINEN KANNUKSEN LUKIO EDMODO -oppimisympäristö opettajille ja oppilaille KOONNUT: MIKA KURVINEN KANNUKSEN LUKIO HUOM! Edmodo kehittyy koko ajan, seuraavat ohjeet voivat olla jo päivityksen tarpeessa. 1 Sisällysluettelo Rekisteröityminen

Lisätiedot

Suvi Junes/Pauliina Munter Tietohallinto/Opetusteknologiapalvelut 2014

Suvi Junes/Pauliina Munter Tietohallinto/Opetusteknologiapalvelut 2014 Tietokanta Tietokanta on työkalu, jolla opettaja ja opiskelijat voivat julkaista tiedostoja, tekstejä, kuvia ja linkkejä alueella. Opettaja määrittelee lomakkeen muotoon kentät, joiden kautta opiskelijat

Lisätiedot

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta

Lisätiedot

1 (14) Ohje. Ohje. GTK-wiki. Geologian tutkimuskeskus, Verkkosivustopalvelut

1 (14) Ohje. Ohje. GTK-wiki. Geologian tutkimuskeskus, Verkkosivustopalvelut 1 (14) GTK-wiki 2 (14) Sisällysluettelo 1. Wikin ylläpito... 3 1.1. Wiki-artikkelin muokkaus... 3 1.2. Wiki-artikkelin lisääminen... 3 2. Wiki-toiminnot... 4 2.1. Ristiinlinkitys... 4 2.2. Tekstin muotoilu...

Lisätiedot

helsingintaiteilijaseura.fi WordPress-pikaohjeet

helsingintaiteilijaseura.fi WordPress-pikaohjeet 1/12 helsingintaiteilijaseura.fi WordPress-pikaohjeet Sisällysluettelo 1. Ohjausnäkymä...1 2. Työkalupakki... 2 3. Artikkelit, Näyttelyt ja Sivut...3 4. Artikkelin lisäys tai muokkaus... 4 Artikkelikuvan

Lisätiedot

Rakennusten elinkaarimittareiden verkkotyökalun käyttöohje. www.360optimi.com/kiinteistopassi

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

Lisätiedot

Navigointi Verkkomultimedia ICT1tn004

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?

Lisätiedot

Heli Karjalainen ja Eric Rousselle Discendum Oy

Heli Karjalainen ja Eric Rousselle Discendum Oy Heli Karjalainen ja Eric Rousselle Kyvyt.fi:n pohjalla nyt Mahara 1.4 Kyvyt.fi:n käyttöliittymä noudata pääosin Maharan navigointimallia Maharan uudistusten lisäksi Discendum tuo paljon uusia ominaisuuksia

Lisätiedot

Automaattitilausten hallinta

Automaattitilausten hallinta Automaattitilausten hallinta Automaattitilauksilla voidaan automatisoida kopiotilaukset tuotantolaitokselle. Työkalulla voitte määritellä kansio- sekä tiedostokohtaisia automaattitilauksia. Joka yö SokoPro

Lisätiedot

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

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

Lisätiedot

KONTTI: KOUVOLAN KAUPUNGIN INTRA

KONTTI: KOUVOLAN KAUPUNGIN INTRA KONTTI: KOUVOLAN KAUPUNGIN INTRA KONTIN KUVAUS INTRAN LOPPUKÄYTTÄJILLE ABAKO MEDIA OY 8.12.2009 Dokumentin tiedot Tekijä: Minna Laine Päiväys: 8.12.2009 Jakelu: Kouvolan kaupunki Abako projektityöryhmä

Lisätiedot

WordPress. Kysyy. Sähköpostiosoitteen Tulee aktivointi viesti. Käyttäjänimen vähintään 4 merkkiä. Salasanan

WordPress. Kysyy. Sähköpostiosoitteen Tulee aktivointi viesti. Käyttäjänimen vähintään 4 merkkiä. Salasanan WordPress 1 Tulostettu 1.11.2012 WordPress Ilmainen blogi-sivusto. Voi tehdä blogin. Täytyy vain luoda käyttäjätunnus ja salasana. Osoite on http://fi.wordpress.com/. Paina Get Started Kysyy Sähköpostiosoitteen

Lisätiedot

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla 4.4.2013 Aulikki Hyrskykari CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla Tyylipohjakieli Nimi tulee piirteiden putousmaisesta periytymisestä o cascade = vesiputous o tyylipiirteet periytyvät

Lisätiedot

Discendum Oy

Discendum Oy 1 CV+ ansioluettelon luominen ja muokkaus CV+ - Yleistä 3 CV+ -ansioluettelon luominen 5 Tietojen muokkaaminen Perustoiminnot 7 CV+ sisältöjen otsikoiden muokkaus 8 Koulutus- ja työkokemustiedot Todistuksen

Lisätiedot

KÄYTTÖOHJE. Servia. S solutions

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

Lisätiedot

CODEONLINE. Monni Oo- ja Java-harjoituksia. Version 1.0

CODEONLINE. Monni Oo- ja Java-harjoituksia. Version 1.0 CODEONLINE Monni Oo- ja Java-harjoituksia Version 1.0 Revision History Date Version Description Author 25.10.2000 1.0 Initial version Juha Johansson Inspection History Date Version Inspectors Approved

Lisätiedot

6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.)

6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.) 6. Tekstin muokkaaminen 6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.) Tekstin maalaaminen onnistuu vetämällä hiirellä haluamansa tekstialueen yli (eli osoita hiiren

Lisätiedot

Väitöskirja -mallipohja

Väitöskirja -mallipohja Väitöskirja -mallipohja Ohje: Word 2003 -versiolle Tietohallintokeskus hannele.rajaniemi@jyu.fi Sisältö Miksi tyylit ovat käteviä? Miten toimii asiakirjamallipohja? Miten lisään tekstiä: a) kirjoitan itse

Lisätiedot

Sisällys Word Wep App... 3 Excel Web App... 7 Powerpoint Web App OneNote Web App Excel Kysely Valmiin tiedoston tuonti Skydrive Pro

Sisällys Word Wep App... 3 Excel Web App... 7 Powerpoint Web App OneNote Web App Excel Kysely Valmiin tiedoston tuonti Skydrive Pro 1 Sisällys Word Wep App... 3 Excel Web App... 7 Powerpoint Web App... 11 OneNote Web App... 17 Excel Kysely... 20 Valmiin tiedoston tuonti Skydrive Pro ohjelmaan... 25 Blogi... 27 Kansiot... 28 Skydrive

Lisätiedot

PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE

PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE IT-palvelut / Hannele Rajaniemi optima-support@jyu.fi www.jyu.fi/itp/optima-ohjeet 2 Sisältö Mikä on koosteen idea? Miten saan kooste-työkalun käyttööni? Miten luon koosteen?

Lisätiedot

Siirtyminen Outlook 2010 -versioon

Siirtyminen Outlook 2010 -versioon Tämän oppaan sisältö Microsoft Microsoft Outlook 2010 näyttää hyvin erilaiselta kuin Outlook 2003. Tämän oppaan tarkoituksena on helpottaa uuden ohjelman opiskelua. Seuraavassa on tietoja uuden käyttöliittymän

Lisätiedot

CSS tyyliä sivuihin osa II. Elina Ulpovaara

CSS tyyliä sivuihin osa II. Elina Ulpovaara CSS tyyliä sivuihin osa II Elina Ulpovaara Sisällys Laatikkomalli Margin Border Padding Outline Outline-offset Pyöristetyt kulmat Border-radius Tekstiin liittyviä css-ehdotuksia Text-align Text-decoration

Lisätiedot

Android ohjelmointi Tunti 2. Käyttöliittymät ja resurssit

Android ohjelmointi Tunti 2. Käyttöliittymät ja resurssit Android ohjelmointi Tunti 2 Käyttöliittymät ja resurssit Debug Log luokka mahdollistaa debug tulostamisen ADB:n kautta konsoliin (esim. DDMS:ään) esim. Log.println(Log.INFO, TAG, Tämä on println ); Voidaan

Lisätiedot

Harjoitellaan esitysgrafiikkaohjelman käyttöä Microsoftin PowerPoint ohjelmalla.

Harjoitellaan esitysgrafiikkaohjelman käyttöä Microsoftin PowerPoint ohjelmalla. Esitysgrafiikka Harjoitellaan esitysgrafiikkaohjelman käyttöä Microsoftin PowerPoint ohjelmalla. Tallenna esimerkki.pptx tiedosto tuokion kansioon. Avaa esimerkki.pptx tiedosto PowerPoint ohjelmassa. Jäsennysnäkymä

Lisätiedot

Uuden Peda.netin käyttöönotto

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

Lisätiedot

Ajatus kaiken taustalla

Ajatus kaiken taustalla HTML ja tyylit Ajatus kaiken taustalla Perimmäisenä tarkoituksena tarjota formatointi- ja taittokieli, jonka avulla elementtirakenteisten dokumenttien ulkoasun määrittely voidaan irrottaa sisällön ja rakenteen

Lisätiedot

Kirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta.

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

Lisätiedot

OTTELUN TILASTOINTI AIKUISTEN VALTAKUNNALLISET SARJAT (LIVE)

OTTELUN TILASTOINTI AIKUISTEN VALTAKUNNALLISET SARJAT (LIVE) OTTELUN TILASTOINTI AIKUISTEN VALTAKUNNALLISET SARJAT (LIVE) OTTELUN LIVE-TILASTOINNIN ALOITTAMINEN JA LOPETTAMINEN MATCH KEY 1) HAE MATCH KEY BASKETHOTELLISTA kirjaudu baskethotelliin etsi Minun otteluni

Lisätiedot

XML kielioppi. Elementtien ja attribuuttien määrittely. Ctl230: Luentokalvot Miro Lehtonen

XML kielioppi. Elementtien ja attribuuttien määrittely. Ctl230: Luentokalvot Miro Lehtonen XML kielioppi Elementtien ja attribuuttien määrittely Ctl230: Luentokalvot 11.10.2004 Miro Lehtonen Dokumenttien mallinnus Säännöt dokumenttityypeille 3Mahdollisten dokumenttirakenteiden määrittely Samassa

Lisätiedot

Navigointi Verkkomultimedia ICT1tn004. Elina Ulpovaara

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

Lisätiedot

OTTELUN TILASTOINTI NUORTEN VALTAKUNNALLISET SARJAT

OTTELUN TILASTOINTI NUORTEN VALTAKUNNALLISET SARJAT OTTELUN TILASTOINTI NUORTEN VALTAKUNNALLISET SARJAT OTTELUN ALOITTAMINEN - TILASTON LOG-TIEDOSTON HAKEMINEN BASKETHOTELLISTA (tilasto ei livenä) Kirjaudu joukkueen yhteyshenkilön tunnuksilla baskethotelliin.

Lisätiedot

Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla

Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla Avaa Paint.NET tuplaklikkaamalla sen pikakuvaketta. Paint.NET avautuu tämän näköisenä. Edessä on tyhjä paperi. Saadaksesi auki kuvan, jota aiot pienentää

Lisätiedot

Jenniina Sutinen WWW-SIVUT TERVAPARTIO RY:LLE

Jenniina Sutinen WWW-SIVUT TERVAPARTIO RY:LLE Jenniina Sutinen WWW-SIVUT TERVAPARTIO RY:LLE WWW-SIVUT TERVAPARTIO RY:LLE Jenniina Sutinen Jenniina Sutinen Opinnäytetyö Kevät 2014 Tietotekniikan koulutusohjelma Oulun ammattikorkeakoulu TIIVISTELMÄ

Lisätiedot

NAVIGAATTORIN ASENNUS JA MUOKKAUS

NAVIGAATTORIN ASENNUS JA MUOKKAUS 1 NAVIGAATTORIN ASENNUS JA MUOKKAUS YLEISTÄ NAVIGAATTORIN KÄYTÖSSÄ... 2 NAVIGAATTORIN HAKEMINEN... 3 NAVIGAATTORIN KOPIOINTI OMALLE SAP-TUNNUKSELLE... 6 NAVIGAATTORIN MUOKKAUS ENNEN KÄYTTÖÖNOTTOA... 7

Lisätiedot

Cabas liitännän käyttö AutoFutur ohjelmassa 4.1.2012

Cabas liitännän käyttö AutoFutur ohjelmassa 4.1.2012 Cabas liitännän käyttö AutoFutur ohjelmassa 4.1.2012 Liitännän aktivointi Liitäntä on ohjelma lisämoduuli. Ensin asetetaan käyttöön FuturSoftilta saatu Liitäntä WinCabas rekisteröintikoodi. Mennään kohtaan

Lisätiedot

Kotisivut helposti - osa 3

Kotisivut helposti - osa 3 Kotisivut helposti - osa 3 Tämän artikkelisarjan kahdessa ensimmäisessä osassa esiteltiin Internet-sivujen perusteita, kotisivujen suunnittelulähtökohtia sekä HTML/XHTML-ohjelmoinnin perusteita ja yleisimmin

Lisätiedot

qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm

qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnm OMA KOTIKANSIO PUNOMO.FI- PALVELIMELLA TEEITSE-SIVUSTO 4.8.2013 Pirjo Sinervo qwertyuiopasdfghjklzxc Sisällys OMAN KOTIKANSION HALLINTA... 1 YLEISTÄ KOTIKANSIOSTA... 1 TYÖTAPAVIHJE... 2 MATERIAALIN LATAAMINEN

Lisätiedot

Tekla Structures Dialogien muokkaus

Tekla Structures Dialogien muokkaus [Asiakirjan tyyppi] [Luottamuksellisuus] Dialogien muokkaus Description Author FIN Area Support Date 10.8.2010 Reviewed by Review date Approved by Approval date Change history Date Changed by Issue Tekla

Lisätiedot

Matriisit ovat matlabin perustietotyyppejä. Yksinkertaisimmillaan voimme esitellä ja tallentaa 1x1 vektorin seuraavasti: >> a = 9.81 a = 9.

Matriisit ovat matlabin perustietotyyppejä. Yksinkertaisimmillaan voimme esitellä ja tallentaa 1x1 vektorin seuraavasti: >> a = 9.81 a = 9. Python linkit: Python tutoriaali: http://docs.python.org/2/tutorial/ Numpy&Scipy ohjeet: http://docs.scipy.org/doc/ Matlabin alkeet (Pääasiassa Deni Seitzin tekstiä) Matriisit ovat matlabin perustietotyyppejä.

Lisätiedot

Väitöskirjan kansien suunnittelu

Väitöskirjan kansien suunnittelu Väitöskirjan kansien suunnittelu Ohje koskee Lapin Yliopistopainossa painettavia julkaisuja. Väittelijä toimittaa tarvittavat tiedot tekijälle sähköisenä: - julkaisun nimi - acta sarjan numero sekä ISBN

Lisätiedot

GEOS 1. Ilmastodiagrammi Libre Office Calc ohjelmalla

GEOS 1. Ilmastodiagrammi Libre Office Calc ohjelmalla GEOS 1 Ilmastodiagrammi Libre Office Calc ohjelmalla Libre Office Calc ohjelman saat ladattua ilmaiseksi osoitteesta: https://fi.libreoffice.org/ Tässä ohjeessa on käytetty Libre Office Calc 5.0 versiota

Lisätiedot

Mendeley-viitteidenhallinta

Mendeley-viitteidenhallinta Päivitetty 12.10.2015 Mendeley-viitteidenhallinta Pikavinkkejä: lähdeaineiston tallentaminen, lähteisiin viittaaminen ja lähdeluettelon tekeminen teppo.hjelt@tut.fi Mikä Mendeley on ja miten sen saa? www.mendeley.com

Lisätiedot

- Jalkapalloa jokaiselle -

- Jalkapalloa jokaiselle - Kauden vaihto Ohjeita ylläpitäjille Arto Kalliola - Jalkapalloa jokaiselle - KAUDEN VAIHTAMINEN JOPOX-JÄRJESTELMÄSSÄ Yleistä Kun toimintakausi lähestyy loppuaan, luodaan Jopox-järjestelmään seuraavaa kautta

Lisätiedot

UpdateIT 2010: Editorin käyttöohje

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...

Lisätiedot

Muita kuvankäsittelyohjelmia on mm. Paint Shop Pro, Photoshop Elements, Microsoft Office Picture Manager

Muita kuvankäsittelyohjelmia on mm. Paint Shop Pro, Photoshop Elements, Microsoft Office Picture Manager Missio: 1. Asentaminen 2. Valokuvien tarkastelu, tallennus/formaatit, koko, tarkkuus, korjaukset/suotimet, rajaus 3. Kuvan luonti/työkalut (grafiikka kuvat) 4. Tekstin/grafiikan lisääminen kuviin, kuvien/grafiikan

Lisätiedot

WORDPRESS-TEEMAN SUUNNITTELU JA TOTEUTUS

WORDPRESS-TEEMAN SUUNNITTELU JA TOTEUTUS Opinnäytetyö (AMK) Tietojenkäsittely Sähköisen liiketoiminnan järjestelmät 2013 Aleksi Älli WORDPRESS-TEEMAN SUUNNITTELU JA TOTEUTUS Case: Puhelinklinikka.fi OPINNÄYTETYÖ (AMK) TIIVISTELMÄ TURUN AMMATTIKORKEAKOULU

Lisätiedot

Palaute. Asetukset: Nimeä palaute ja kirjoita kuvaus tai ohjeet.

Palaute. Asetukset: Nimeä palaute ja kirjoita kuvaus tai ohjeet. Palaute Palaute -työkalulla opettaja voi rakentaa kyselyn, johon opiskelijat vastaavat joko anonyymisti tai nimellään. Opettaja voi tarkastella vastauksia koosteena tai yksitellen. Asetukset: Nimeä palaute

Lisätiedot

6 XML-työkalut 1. 6 XML-työkalut

6 XML-työkalut 1. 6 XML-työkalut 6 XML-työkalut 1 6 XML-työkalut XML:n periaatteiden tutustumisen jälkeen on helpompi tutustua XML-dokumenttien käsittelyyn ja katseluun suunniteltuja työkaiuja. XML:n yleistymisen pahin pullonkaula on

Lisätiedot

Harjoitus Morphing. Ilmeiden luonti

Harjoitus Morphing. Ilmeiden luonti LIITE 1 1(5) Harjoitus Morphing Harjoituksessa käsiteltävät asiat: Objektien kopioiminen Editoitavan polygonin muokkaaminen Morph-modifier käyttö ilmeiden luomiseen Lyhyen animaation luonti set key- toimintoa

Lisätiedot