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

Teeman rakentaminen WordPressin versioon 3.0. Jari Sarja marraskuu 2010

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

Lisätiedot

GetSimple 2.03.1. Jari Sarja. Maaliskuu 2011

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

Lisätiedot

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

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

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

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/ 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ö,

Lisätiedot

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28 Sivupohja Joomlalle Sivupohjan tekeminen Joomlalle itse alusta saakka kuulostaa vaikealle. Työ on kuitenkin varsin helppo, jos vaan tietää tekemisen kaavan ja ymmärtää idean sivupohjasta. Joomlalle sivupohjan

Lisätiedot

Websitebaker. versio 1.2. Jari Sarja. Lokakuu 2010

Websitebaker. versio 1.2. Jari Sarja. Lokakuu 2010 1 Websitebaker versio 1.2 Jari Sarja Lokakuu 2010 2 Sisältö Johdanto... 4 2. WSB:n asennus omalle koneelle... 5 2.1. XAMPPin asennus... 5 2.2. Tietokannan luominen... 17 2.3. Postipalvelin mukaan... Virhe.

Lisätiedot

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

Blogit ja WordPress versio 1.0. 15.3.2012 Otavan Opisto Jari Sarja

Blogit ja WordPress versio 1.0. 15.3.2012 Otavan Opisto Jari Sarja Blogit ja WordPress versio 1.0 15.3.2012 Otavan Opisto Jari Sarja Sisältö 1. Bloggaus... 5 1.1. Bloggaaminen on journalismia... 5 1.2. Kuinka tehdä suosittu blogi?... 6 1.3. Blogi ja keskustelu... 7 1.4.

Lisätiedot

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja XML, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen Mikko Pohja Sisältö XML Yleensä Eri kieliä XHTML CSS XSL XML EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard

Lisätiedot

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä

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.

Lisätiedot

Tuotteiden tiedot: Lisää uuden tuotteen tiedot. Muuta tai poista tuotteen tiedot. Selaa kaikkien tuotteiden tietoja.

Tuotteiden tiedot: Lisää uuden tuotteen tiedot. Muuta tai poista tuotteen tiedot. Selaa kaikkien tuotteiden tietoja. laskutus_index http://media.stadia.fi/~0700527/laskutus/laskutus_index.html Sivu 1/1 13.12.2007 Laskutus -tietokanta Henkilöiden tiedot: Lisää uuden henkilön tiedot Muuta tai poista henkilön tiedot Selaa

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

VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN

VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN Tämän tehtävän tarkoitus on tutustuttaa ympäristöön sekä tutustuttaa wwwdokumenttien tekoon php:llä. Alkutoimet Varmistetaan, että verkkolevyllä on kansio

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

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

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

Wordpress. Bloggaamisen perusteet tekniset minimitoimet, joilla pääset alkuun

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

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

Wordpress-julkaisualusta. Mediatekniikan seminaari 18.10.2011 Harri Viitala

Wordpress-julkaisualusta. Mediatekniikan seminaari 18.10.2011 Harri Viitala Wordpress-julkaisualusta Mediatekniikan seminaari 18.10.2011 Harri Viitala 2 / 27 Sisältö 1 Yleistä 2 Asennus ja konfigurointi 3 Työkalut 4 Teema 5 Rakenne 6 Koukut, toiminnot ja suodattimet 7 Lisäosat

Lisätiedot

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

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,

Lisätiedot

Esimerkkinä http://wordpress.com/ - ilmainen blogi-julkaisujärjestelmä. WordPress:stä on myös palvelimelle asennettava versio (WordPress.

Esimerkkinä http://wordpress.com/ - ilmainen blogi-julkaisujärjestelmä. WordPress:stä on myös palvelimelle asennettava versio (WordPress. BLOGIN LUOMINEN Esimerkkinä http://wordpress.com/ - ilmainen blogi-julkaisujärjestelmä. WordPress:stä on myös palvelimelle asennettava versio (WordPress.org) Myös http://blogspot.com on ilmainen ja helppokäyttöinen

Lisätiedot

Websivujen julkaisu WordPress-julkaisujärjestelmällä CASE: McCann Worldgroup Helsinki Oy. Juha Nordlund

Websivujen julkaisu WordPress-julkaisujärjestelmällä CASE: McCann Worldgroup Helsinki Oy. Juha Nordlund Websivujen julkaisu WordPress-julkaisujärjestelmällä CASE: McCann Worldgroup Helsinki Oy Juha Nordlund Opinnäytetyö Tietojenkäsittelyn koulutusohjelma 2010 Tiivistelmä Tietojenkäsittelyn koulutusohjelma

Lisätiedot

WordPress 3.5. Tietokantapohjainen julkaisujärjestelmä. Jari Sarja / Otavan Opisto 2013

WordPress 3.5. Tietokantapohjainen julkaisujärjestelmä. Jari Sarja / Otavan Opisto 2013 WordPress 3.5 Tietokantapohjainen julkaisujärjestelmä Jari Sarja / Otavan Opisto 2013 Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.0 -lisenssillä Sisältö 1. Bloggaus... 5 2. Blogipalveluita

Lisätiedot

Modx. Versio 1.3 /lokakuu 2010. Kirjoittanut Jari Sarja (www.jarisarja.fi)

Modx. Versio 1.3 /lokakuu 2010. Kirjoittanut Jari Sarja (www.jarisarja.fi) 1 Modx Versio 1.3 /lokakuu 2010 Kirjoittanut Jari Sarja (www.jarisarja.fi) 2 Sisältö 1. Johdanto... 3 2. Imurointi, ennakkovalmistelut ja asennus... 4 2.1. Imuroiminen ja purku... 4 2.2. Kannan luominen...

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) T-111.1100 Digitaalisen median työvälineet (3 op) T-111.1100 Digitaalisen median työvälineet (3 op) Markku Laine DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

xhtml+css Survival Kit

xhtml+css Survival Kit xhtml+css Survival Kit xhtml:n ja CSS:n lyhyt oppimäärä OSA I: Muutama sana teoksesta 1. xhtml+css Survival Kit 2. Kiitokset ja kreditit OSA II: Alustus 1. Mitä xhtml ja CSS ovat? 2. xhtml-sivujen rakenne

Lisätiedot

Turun yliopiston Nelli ohje käyttöönottoon

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

Lisätiedot

OHJEET WORDPRESS-BLOGIN LUOMISEEN JA TAVALLISIMPIIN BLOGITOIMINTOIHIN

OHJEET WORDPRESS-BLOGIN LUOMISEEN JA TAVALLISIMPIIN BLOGITOIMINTOIHIN OHJEET WORDPRESS-BLOGIN LUOMISEEN JA TAVALLISIMPIIN BLOGITOIMINTOIHIN Koulutusteknologian perusopinnot Digitaalinen portfolio oppimisen tukena 2010 Essi Vuopala 1. BLOGIN LUOMINEN Mene osoitteeseen http://www.wordpress.com

Lisätiedot

HTML perusteita (ei julkiseen jakeluun)

HTML perusteita (ei julkiseen jakeluun) HTML perusteita (ei julkiseen jakeluun) Tämä opas pyrkii selvittämään joitain verkkoviestintään liittyviä käsitteitä ja antamaan perustiedot HTML- kielestä sekä musiikin WWW- julkaisusta. Internetissä

Lisätiedot

WordPress 3. Tietokantapohjainen julkaisujärjestelmä. Jari Sarja / Otavan Opisto 2013

WordPress 3. Tietokantapohjainen julkaisujärjestelmä. Jari Sarja / Otavan Opisto 2013 WordPress 3 Tietokantapohjainen julkaisujärjestelmä Jari Sarja / Otavan Opisto 2013 Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.0 -lisenssillä Sisältö 1. Bloggaus... 6 2. Blogipalveluita

Lisätiedot

CSS. Historia. Tämä materiaali vastaa kysymyksiin kuten:

CSS. Historia. Tämä materiaali vastaa kysymyksiin kuten: CSS CSS on merkintäjärjestelmä, jolla voidaan esittää selaimille dokumenttien ulkoasua koskevia ehdotuksia. Yhtä kokonaisuutta sanotaan tyyliohjeeksi eli tyylisäännöstöksi, englanniksi style sheet. (Korpela

Lisätiedot

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE

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:

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

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

http://www.microsoft.com/expression/

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

Lisätiedot

Aloita oman blogisi luominen (järjestelmä lupaa sen tapahtuvan sekunneissa ;-))

Aloita oman blogisi luominen (järjestelmä lupaa sen tapahtuvan sekunneissa ;-)) BLOGIN LUOMINEN Esimerkkinä http://wordpress.com/ - ilmainen blogi-julkaisujärjestelmä. WordPress:stä on myös palvelimelle asennettava versio (WordPress.org) Avaa http://wordpress.com/ -sivu. Aloita oman

Lisätiedot

POISSAOLOJEN SEURANTAJÄRJESTELMÄ

POISSAOLOJEN SEURANTAJÄRJESTELMÄ POISSAOLOJEN SEURANTAJÄRJESTELMÄ Opinnäytetyö PSK-Aikuisopisto Mac-datanomi, Digitaalinen viestintä Lakso Eija 15.01.2011 2 SISÄLLYSLUETTELO SISÄLLYSLUETTELO... 2 TIIVISTELMÄ... 3 1. JOHDANTO... 4 2. TYÖN

Lisätiedot

SALITE.fi -Verkon pääkäyttäjän ohje

SALITE.fi -Verkon pääkäyttäjän ohje SALITE.fi -Verkon pääkäyttäjän ohje Sisältö 1 Verkon pääkäyttäjä (Network Admin)...3 2 Verkonhallinta...3 2.1 Navigointi verkonhallintaan...3 2.2 Sivustot...3 2.1 Sivustojen toiminnot...4 2.3 Sivuston

Lisätiedot

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013.

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013. AT4-kotisivukurssi 4. jakso 5.2. 5.4.2013. Ohjeita, kotisivueditori HTML-opas http://www.iki.fi/mikaves/html/ (Mika Westerholm) Kotisivueditorit: Notepad (yksinkertainen BlueGriffon (tehokas, ilmainen)

Lisätiedot

Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA. Kirjaudu -palveluun osoitteessa www.punomo.npn.fi/wp-login.php tunnuksellasi.

Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA. Kirjaudu -palveluun osoitteessa www.punomo.npn.fi/wp-login.php tunnuksellasi. Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA Kirjaudu -palveluun osoitteessa www.punomo.npn.fi/wp-login.php tunnuksellasi. Tunnuksia jakavat Punomo.fi:n ylläpitäjät. Kun olet kirjautunut, blogin OHJAUSNÄKYMÄ

Lisätiedot

Pipfrog AS www.pipfrog.com. Ulkoasun muotoilut

Pipfrog AS www.pipfrog.com. Ulkoasun muotoilut Ulkoasun muotoilut Ulkoasun muotoilut Oman Pipfrog verkkokauppasi ulkoasun muokkaamiseksti sinun ei välttämättä tarvitse osata HTML -kieltä, ulkoasua voit helposti muuttaa myös ilman tätä taitoa. Ulkoasun

Lisätiedot

Pedacode Pikaopas. Web-sovelluksen luominen

Pedacode Pikaopas. Web-sovelluksen luominen Pedacode Pikaopas Web-sovelluksen luominen Pikaoppaan sisältö Pikaoppaassa kuvataan, miten Netbeans-työkalulla luodaan uusi yksinkertainen web-sovellus ja testataan sen toiminta. Opas kattaa kaiken aiheeseen

Lisätiedot

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE

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:

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

ICT1TN004. Lomakkeet. Heikki Hietala

ICT1TN004. Lomakkeet. Heikki Hietala Lomakkeet Heikki Hietala Lomakkeet Lomakkeita käytetään keräämään tietoa käyttäjältä ja siirtämään se palvelimelle Lomakkeen luominen ei yksin riitä, vaan pitää luoda myös lomakkeenkäsittelijä Lomakkeen

Lisätiedot

Kopseptisuunnittelu Verkkomultimedia ICT1tn004

Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Sivustokartta Käsikirjoitus Graafinen suunnitelma Elina Ulpovaara Konseptisuunnittelu ICT1TN004 toiminnallisuus toimintatarinat -> käyttötarinat kuvatarinat

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

ICT1TN004 Hakukoneoptimoin p ti Heikki Hiet Hie ala t

ICT1TN004 Hakukoneoptimoin p ti Heikki Hiet Hie ala t ICT1TN004 Hakukoneoptimointi Heikki Hietala Hakukoneoptimointi Sivuston laatiminen on vain osa työtä Laadittu sivusto on saatava myös hyvin esiin hakukoneissa Tavoitteena on kasvattaa ns. luonnollista

Lisätiedot

Kuva xhtml-sivulla. Mirja Jaakkola

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

Lisätiedot

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö

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

Lisätiedot

Sivupohjien täyttö suppeat sivupohjat

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

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

CSS-perusteet. Verkkosivustojen suunnittelu ja rakentaminen

CSS-perusteet. Verkkosivustojen suunnittelu ja rakentaminen Verkkosivustojen suunnittelu ja rakentaminen CSS-perusteet Sisällysluettelo 1 Johdanto 2 CSS:n syntaksi 3 Valitsimet 4 CSS:n liittäminen dokumentteihin 4.1 CSS erillisenä tiedostona 4.2 CSS upotettuna

Lisätiedot

Luento 1. Jouni Ikonen - Jouni.Ikonen lut.fi

Luento 1. Jouni Ikonen - Jouni.Ikonen lut.fi CT30A3200 - WWW-sovellukset Luento 1 Jouni Ikonen - Jouni.Ikonen lut.fi linkki Kalvot Arto Hämäläisen kalvojen pohjalta 1 Jouni Ikonen CT30A3200 WWW-sovellukset Tämän luennon aiheet: Kurssin yleiset asiat

Lisätiedot

HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE

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ö

Lisätiedot

XML Technologies and Applications - harjoitustyö -

XML Technologies and Applications - harjoitustyö - XML Technologies and Applications - harjoitustyö - TURUN YLIOPISTO Informaatioteknologian laitos Tietojenkäsittelytiede Harjoitustyö Helmikuu 2009 Jyri Lehtonen (72039) jyri.lehtonen@utu.fi (yksin tehty

Lisätiedot

Lyhyt ohje Ning-verkoston hallinnoimiseksi ja muokkaamiseksi

Lyhyt ohje Ning-verkoston hallinnoimiseksi ja muokkaamiseksi Lyhyt ohje Ning-verkoston hallinnoimiseksi ja muokkaamiseksi Valtti Valmis tutkinto työelämävalttina, Jenni Kaisto Sisältö NÄKYMÄ SISÄÄNKIRJAUTUESSA... 1 NINGIN HALLINNOINTI JA MUOKKAUS... 3 KOJELAUTA...

Lisätiedot

SeaMonkey pikaopas - 1

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

Lisätiedot

Vinkkejä Balsamiq Mock-Up työkalun käyttöön

Vinkkejä Balsamiq Mock-Up työkalun käyttöön Vinkkejä Balsamiq Mock-Up työkalun käyttöön Tämä ohje ei ole Balsamiqin yleinen käyttöohje, mutta tässä kerrotaan miten Balsamiqia tulisi käyttää silloin kun malleissa halutaan käyttää yhteisiä pohjia.

Lisätiedot

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

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.

Lisätiedot

Blogit ja WordPress. versio 1.0. 15.3.2012 Otavan Opisto Jari Sarja

Blogit ja WordPress. versio 1.0. 15.3.2012 Otavan Opisto Jari Sarja Blogit ja WordPress versio 1.0 15.3.2012 Otavan Opisto Jari Sarja Sisältö 1. Bloggaus... 5 1.1. Bloggaaminen on journalismia... 5 1.2. Kuinka tehdä suosittu blogi?... 6 1.3. Blogi ja keskustelu... 7 1.4.

Lisätiedot

Websitebaker. versio 1.3. Jari Sarja. Syyskuu 2011

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

Lisätiedot

WordPress-blogin perustaminen

WordPress-blogin perustaminen WordPress-blogin perustaminen Mene osoitteeseen http://wordpress.com/ ja luo itsellesi tili. Tilin luomiseen tarvitset seuraavat tiedot: sähköpostiosoitteen, käyttäjätunnuksen ja salasanan. Klikattuasi

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

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

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Antti Tolppanen DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

Wordpress- ohje nettisivujen laadintaan

Wordpress- ohje nettisivujen laadintaan Wordpress- ohje nettisivujen laadintaan Leo Suomela 2 / 13 Sisältö 1 Johdanto... 3 2 Aloitusnäkymä... 3 3 Ohjausnäkymä... 4 4 Sivujen lisäys... 6 5 Etusivun määritys... 9 6 Teeman muokkaus... 13 3 / 13

Lisätiedot

PUTTERI JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE

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:

Lisätiedot

Oy Karltek Ltd internet-sivujen uusiminen. Eveliina Aaltonen

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

Lisätiedot

Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot

Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot HTML-kielen alkeet Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot ovat tavallisia tekstitiedostoja, jotka selain tulkkaa

Lisätiedot

H9 Julkaiseminen webissä

H9 Julkaiseminen webissä H9 Julkaiseminen webissä Tässä harjoituksessa opetetaan kaksi tapaa viedä tiedostoja jakoon webin kautta (tehtävä 1 ja tehtävä 3), sekä kokeillaan yksinkertaista, jokamiehen tapaa tehdä oma sivusto (tehtävä

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

Kun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti:

Kun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti: HENKILÖKORTTIEN SUUNNITTELUSOVELLUS SOVELLUKSEN KÄYTTÖOHJE Voit kokeilla korttien suunnittelemista valmiiden korttipohjien avulla ilman rekisteröitymistä. Rekisteröityminen vaaditaan vasta, kun olet valmis

Lisätiedot

1. Mene osoitteeseen http://mahara.metropolia.fi/ 2. Kirjoita Metropolia-tunnuksesi ja salasanasi omiin tekstikenttiin ja klikkaa Login.

1. Mene osoitteeseen http://mahara.metropolia.fi/ 2. Kirjoita Metropolia-tunnuksesi ja salasanasi omiin tekstikenttiin ja klikkaa Login. 1 Sisällys 1 Johdanto... 2 2 Sisäänkirjautuminen... 2 3 Asetukset... 3 4 Profiili... 4 4.1 Profiilin muokkaaminen... 4 4.2 Profiilikuvat... 5 4.3 Ansioluettelon tekeminen... 6 4.4 Profiilisivun näkymän

Lisätiedot

Aulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA

Aulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA Aulikki Hyrskykari Antti Sand Edellinen luento o Sääntöjen kohdistaminen (periytyminen, painoarvo) o CSS värit, mittayksiköt o Typografiaa, kirjasinkokojen hallinnasta, webbikirjasimet o Lokeromalli alustavasta

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

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

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

Lisätiedot

PROJEKTISIVUJEN PAÄ IVITTAÄ MISEN OHJEET

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

Lisätiedot

Ohjelman käyttöön ei sisälly muita kuluja kuin ohjelman lisenssimaksu ja mahdolliset webbipalvelusi käyttömaksut.

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,

Lisätiedot

EeNet materiaalit ohje

EeNet materiaalit ohje EeNet materiaalit ohje EeNetin materiaaleissa voidaan ladata ja jakaa materiaaleja sekä katsoa ja keskustella materiaaleista. Materiaalit voivat olla teksti-, kuva tai videotiedostoja. Videoihin voidaan

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

Written by Administrator Monday, 05 September 2011 15:14 - Last Updated Thursday, 23 February 2012 13:36

Written by Administrator Monday, 05 September 2011 15:14 - Last Updated Thursday, 23 February 2012 13:36 !!!!! Relaatiotietokannat ovat vallanneet markkinat tietokantojen osalta. Flat file on jäänyt siinä kehityksessä jalkoihin. Mutta sillä on kuitenkin tiettyjä etuja, joten ei se ole täysin kuollut. Flat

Lisätiedot

Mikä on WordPress? itse ylläpidettävä (self-hosted) WordPress.com: ilmainen 3. osapuolen ylläpitämä pilvipalvelu (Cloud-hosted)

Mikä on WordPress? itse ylläpidettävä (self-hosted) WordPress.com: ilmainen 3. osapuolen ylläpitämä pilvipalvelu (Cloud-hosted) WordPress.com Mikä on WordPress? Tällä hetkellä maailman suosituin ns. julkaisujärjestelmä (CMS) Rakennettu blogialustaksi, nykyään myös muussa käytössä ilmainen ns. avoimen lähdekoodin julkaisujärjestelmä

Lisätiedot

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/ 1 HTML-perusteita HTML on lyhenne sanoista Hyper Text Markup Language. Aluksi oli kyse tekstidokumenteista, jotka oli linkitetty toisiinsa nk. hyperlinkkien avulla. Nykyään HTML-dokumentit sisältävät paljon

Lisätiedot

GetSimple 3. Tiedostopohjainen julkaisujärjestelmä. Jari Sarja / Otavan Opisto 2013

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

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

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

12.10.2011. Erittäin nopea tapa saada kehitysympäristö php:lle pystyyn Voidaan asentaa muistitikulle

12.10.2011. Erittäin nopea tapa saada kehitysympäristö php:lle pystyyn Voidaan asentaa muistitikulle (Ei yhtään videota tällä kertaa.) X niin kuin Cross-Platform, Apache, MySql, PHP, Perl Kehitysympäristö EI tuotantokäyttöön Monet tärkeät tietoturva-asetukset ovat oletuksena pois päältä Erittäin nopea

Lisätiedot

Vihjeitä Ratatan blogipohjan käyttämiseen ja muokkaamiseen

Vihjeitä Ratatan blogipohjan käyttämiseen ja muokkaamiseen Vihjeitä Ratatan blogipohjan käyttämiseen ja muokkaamiseen HOW TO: Blogin ilmeen muuttaminen Ennen kuin alat suunnitella blogiasi, muista, että tyylinmuokkaustyökalu, Stilbyggaren, on alunperin suunniteltu

Lisätiedot

KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN

KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN -Mene osoitteeseen keskustanuoret.fi/user - Kirjoita saamasi käyttäjätunnus ja salasana - Klikkaa yllä olevaa piirisi logoa niin

Lisätiedot

NETTISIVUOHJE. MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen

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

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

Petri Ukonsaari HEVOSHIERONTA SIVUJEN SUUNNITTELU JA TOTEUTUS WORDPRESS - SISÄLLÖNHALLINTAOHJELMISTOLLA

Petri Ukonsaari HEVOSHIERONTA SIVUJEN SUUNNITTELU JA TOTEUTUS WORDPRESS - SISÄLLÖNHALLINTAOHJELMISTOLLA Petri Ukonsaari HEVOSHIERONTA SIVUJEN SUUNNITTELU JA TOTEUTUS WORDPRESS - SISÄLLÖNHALLINTAOHJELMISTOLLA Opinnäytetyö CENTRIA AMMATTIKORKEAKOULU Tietotekniikan koulutusohjelma Heinäkuu 2014 TIIVISTELMÄ

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

Kameraseura CMS -julkaisujärjestelmän käyttöohje kerhosivujen päivitykseen

Kameraseura CMS -julkaisujärjestelmän käyttöohje kerhosivujen päivitykseen Kameraseura CMS -julkaisujärjestelmän käyttöohje kerhosivujen päivitykseen effective content management made simple. Kameraseura ry 1 Terminologia Tässä ohjeistuksessa käytetyt termit julkaisujärjestelmä,

Lisätiedot

Monikielinen verkkokauppa

Monikielinen verkkokauppa Monikielinen verkkokauppa Monikielinen verkkokauppa Monikielisen verkkokaupan luomisessa pitää Multiple Languages lisämoduuli olla aktivoituna. Klikkaa valikosta Features -> Apps Management -> näkyviin

Lisätiedot