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.



Samankaltaiset tiedostot
Lisätehtävät. Frantic 2015 sivu 1

Ulkoasun muokkaus CSS-tiedostossa

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

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Cascading Style Sheets

selector { CSS property: value; property2: value; Code Camp for Girls Sonja Jaakkola & Sanna Nygård

Alkuun HTML5 peliohjelmoinnissa

Kotisivut helposti - osa 4

Editorin käyttö. TaikaTapahtumat -käyttöohje

Digitaalisen median tekniikat css tyylimääritykset jatkuu

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

Ohjeita kirjan tekemiseen

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

Tietosuoja-portaali. päivittäjän ohje

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

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

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

Uusi Ajatus Löytyy Luonnosta 4 (käsikirja) (Finnish Edition)

Navigointi Verkkomultimedia ICT1tn004

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

Kyläsivujen InfoWeb-ohje

Muotoilutoliot. XSL:n muotoiluoliot. Muotoiluolio. Muotoilualueet. Lohkoalueiden sijoittelu. Muotoilualueiden sijoittelu. Rivialueiden ominaisuuksia

FinFamily PostgreSQL installation ( ) FinFamily PostgreSQL

Kuva xhtml-sivulla. Mirja Jaakkola

Verkkosivut perinteisesti. Tanja Välisalo

OFFICE 365 OPISKELIJOILLE

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

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara


HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE

OPISKELIJAN PIKAOPAS

Kuukauden kuvat kerhon galleriaan lähtien kuukaudenkuvaajan kuvagalleria on siirretty uudelle palvelimelle osoitteeseen:

Digitaalisen median tekniikat. Luento 3: CSS

CSS. Tekstin muotoilua

PROJEKTISIVUJEN PAÄ IVITTAÄ MISEN OHJEET

Helsingin yliopisto/tktl XML-metakieli XSL-FO XSL-FO. XSL-FO sivut

1. Lohkon korkeus ja leveys

FinFamily Installation and importing data ( ) FinFamily Asennus / Installation

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

Code Camp for Girls. Sanna Nygård. Lokakuussa

QT tyylit. Juha Järvensivu 2008

UpdateIT 2010: Editorin käyttöohje

CSS - tyylit Seppo Räsänen

Office365 Tampereen yliopiston normaalikoulussa

GetSimple Jari Sarja. Maaliskuu 2011

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

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

UpdateIT 2010: Uutisten päivitys

You can check above like this: Start->Control Panel->Programs->find if Microsoft Lync or Microsoft Lync Attendeed is listed

Ulkopuolisen tyylitiedoston käyttö

JAKELUPISTE KÄYTTÖOHJE 2/6

Helsingin yliopisto/tktl XML-metakieli XSL-FO XSL - extensible stylesheet language XSL-FO

Kotisivut helposti - osa 3

CMS Made Simple Perusteet

24h Admin V / 24h_Admin_v100.pdf 1/9

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

Kirkkopalvelut Office365, Opiskelijan ohje 1 / 17 IT Juha Nalli

Putteri Käyttöliittymä ja ulkoasu

KÄYTTÖOHJE. Servia. S solutions

Lync Online. Järjestelmänvalvojan perusopas

Febdok 6.0 paikallisversion asennus OHJEISTUS

F-Secure KEY salasanojenhallintaohjelman käyttöönotto Mac -laitteella

Drupal-sivuston hallintaopas

anna minun kertoa let me tell you

24MAGS PIKAOHJE HALLINTAPANEELIN KÄYTTÖÖN

XNA grafiikka laajennus opas. Paavo Räisänen. Tämän oppaan lähdekoodit ovat ladattavissa näiden sivujen Ladattavat osiossa.

Uutiskirjesovelluksen käyttöohje

ohjeet. AtFlow Oy, Pekka Rönkkönen, +358 (0)

Jos haluat uuden Share-työkalun, valitse Pods -> Share -> Add New Share tai jos sinulla on jo auki Share-työkalu, näyttää se tältä:

Miten siirrän omat työni Office 365:stä Peda.nettiin sekä jaan sen siellä muille Eija Arvola

Osaamispassin luominen Google Sites palveluun

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

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/31/2014

Psychosocial Risk Management etraining. -portaalin käyttöopas

Mainosankkuri.fi-palvelun käyttöohjeita

F-Secure KEY salasanojenhallintaohjelman käyttöönotto PC -laitteella

Vehmaan kunta. Wordpress käyttöopas. Betta Digital Oy

CSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö

Kaakkois-Suomen Ammattikorkeakoulu Oy Mikkelin Ammattikorkeakoulu Oy Kymenlaakson Ammattikorkeakoulu Oy

DL SOFTWARE Uumajankatu 2 Umeågatan FIN VAASA/VASA FINLAND +358-(0) Fax +358-(0)

Wikin käyttö Perus ja kehittynyt Juha Matikainen Antti Miettinen

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin)

Palvelemme arkisin klo. 08:00-17:00

WordPress teeman vaihto

Rakennusten elinkaarimittareiden verkkotyökalun käyttöohje.

Jypelin käyttöohjeet» Ruutukentän luominen

Fiscal Digital Signage System

HTML:n perusteet. Jari Sarja / Otavan Opisto Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.

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

edocker PUBLISH! -paketinhallinnan käyttöohje 9/2015

WWW-sivujen Verkkosivujen ulkoasu (CSS)

KTKO104 Demo 3. Marika Peltonen

Lab SBS3.FARM_Hyper-V - Navigating a SharePoint site

Ylläpitoalue - Etusivu

1 Johdanto. 2 Kirjautuminen. Sisällysluettelo. Kanakoirakerho - websivujen ylläpito

Google-dokumentit. Opetusteknologiakeskus Mediamylly

OHJEET HOPSIN TEKEMISEEN KYVYT- PALVELUSSA:

Transkriptio:

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. Sivuston hallinnan kirjautuminen... 2 3.1 Käyttöoikeudet... 2 4. Admin tason ohjeita... 3 4.1 Kuvien lataus... 3 4.2 Sivupohjat... 3 4.2.1 Uuden sivupohjan luonti... 3 5. Käyttäjien hallinta... 4 5.1 Järjestelmän hallinta... 5 5.1.1 Uuden käyttäjän lisääminen... 5 5.2 Sivustolla kävijöiden hallinta... 5 6. Tunnistusta vaativat sivut... 5 6.1 Tunnistusta vaativan sivun luominen... 5 7. Sivuston taustakuvan hallinta... 6

1. Sivustot internetissä Käytössä olevat sivustot : www.huhmari.fi www.jokikunta.kylanetti.fi www.kirkonkyla.kylanetti.fi www.moksi.kylanetti.fi www.oinasjoki.kylanetti.fi www.ojakkala.kylanetti.fi www.olkkala.kylanetti.fi www.vanjarvi.kylanetti.fi www.viakas.kylanetti.fi www.kylanetti.fi tämä on projektin pilottisivusto 2. Yleistä Sivustot on luotu yhteisen pohjan perusteella, jota ylläpidetään pilottisivustolla. Sivustojen adminkäyttäjillä on oikeudet muokata järjestelmiensä ominaisuuksia haluamallaan tavalla, mutta muokatessa on muistettava että mm. järjestelmän päivitykset ja moduulien päivitykset tulisi testata huolella ennen niiden ajamista sivustoille. 3. Sivuston hallinnan kirjautuminen Sivustolle kirjaudutaan osoitteesta [sivuston www osoite]/admin 3.1 Käyttöoikeudet Jokaiselle sivustolle on määritelty hallinnan käyttöoikeudet seuraavilla tasoilla : Admin Ylläpitäjä Pääkäyttäjä Admin tasolla on oikeudet tehdä muutoksia kaikkiin järjestelmän ominaisuuksiin Ylläpitäjä tasolla on rajoitetut oikeudet sivuston ylläpitoa varten : Sivusisällön muokkaaminen Kuvanhallinta Tiedostonhallinta Uutisten hallinta Gallerian käsittely Tiedostojen hallinta

Forumin hallinta 4. Admin tason ohjeita Sivustojen hallinnassa on muutamia ominaisuuksia joita kannannattaa muuttaa vain valveutuneen administratorin toimesta. Tässä osuudessa on ohjeita järjestelmässä ylseisesti tarvittaviin ominaisuuksiin. 4.1 Kuvien lataus Sivustolla käytettävien kuvien lataamiseen hallinnassa on työkalu kohdassa sisältö/kuvahallinta Lataa kuvat tätä kautta järjestelmään jotta voit käyttää niitä sisällössä Kuvat kannattaa laittaa järkevästi nimettyihin hakemistoihin jotta ne löytyvät helpommin. Erilaisilla sivustopohjilla käytettävät yläpalkin kuvat tulee ladata hakemistoon yläpalkin_kuvat. Suositus on että kuvien formaattina käytetään png formaattia. Yläpalkkikuvien tulee olla 1200 pikseliä leveitä ja 150 pikseliä korkeita. 4.2 Sivupohjat Jokaiselle sivustolle on määritelty 5 sisäänrakennettua sivupohjaa, näitä pohjia voi tehdä tarpeen mukaan lisää ja tässä on esitetty tätä varten ohjeet. 4.2.1 Uuden sivupohjan luonti Sivupohjat löytyvät hallinnasta hakemistopolusta : Ulkoasu/sivupohjat 1. Paina kopiointilinkkiä jo olemassaolevan sivupohjan rivillä. 2. Anna uudelle sivupohjalle nimi ja paina Lähetä 3. Mene hakemistosta kohtaan Ulkoasu/tyylisivut 4. Kopioi nyt kopioimaasi sivupohjaa vastaava tyylisivu ja nimeä se uudelleen vastaamaan uutta pohjaa 5. Avaa uusi tuulisivu 6. Yläpalkin kuvan voit vaihtaa kohdassa : div#header h1 { margin: 0; padding: 0; /*these keep IE6 from pushing the header to more than the set size*/ line height: 0; font size: 0; /* this will keep IE6 from flickering on hover */

background: url(uploads/images/ylapalkin_kuvat/[kuvannimi].png) no repeat left top; Vaihda otsikko3.png haluamaksesi kuvaksi (ladataan järjestelmään kuvalatausohjeen mukaisesti) 7. Paina lähetä tallentaaksesi uuden tyylisivun 8. Mene hakemistosta kohtaan sisältö/yleiset sisältölohkot tehdäksesi sivupohjallesi uuden alapalkin 9. Valitse Lisää yleinen sisältölohko 10. Anna lohkon nimi, nimeä se footer etuliitteellä jonka jälkeen uuden sivupohjan nimi 11. Täydennä lohkon sisältö ja valitse lähetä 12. Mene nyt takaisin aikaisemmin luomaan sivupohjaan ja muuta seuraava kohta : {* Start Footer. Edit the footer in the Global Content Block called "footer" * <div class="footback"> <div id="footer"> {* stylesheet "Navigation: FatFootMenu" * <div id="footrt"> {global_content name='footer_[sivupohja]' </div> <div class="clear"></div> </div> </div> {* End Footer * Vaihda footer_[sivupohja] tilalle uuden alapalkkilokon nimi 13. Paina lähetä 14. Valitse nyt uuden sivupohjan rivillä oleva CSS kuvake 15. Poista aikaisempi tyyli : [sivupohjan nimi] 16. Valitse alareunan drop boxista juuri luomasi tyyli ja valitse Lisää uusi CSS 17. Siirrä valitsemasi CSS navigointinuolia käyttäen ylimmäiseksi 18. Voit nyt ottaa käyttöön uuden pohjan haluamallasi sivulla 5. Käyttäjien hallinta Järjestelmässä on kaksi käyttäjänhallintaa, jota ei tule sekoittaa toisiinsa. Järjestelmän hallinta (käyttäjät&ryhmät/käyttäjät) o Tänne luodaan ne käyttäjät joilla on oikeus muuttaa järjestelmän ominaisuuksia, muokata sisältöä tai luoda käyttäjiä sivustolla käviöitä varten Sivustolla käviöiden hallinta (käyttäjät&ryhmät/frontendusers) o Tänne luodaan ne käyttäjät jotka voivat päästä käsiksi sivustolla erikseen suojattuun materiaaliin tai forumiin

5.1 Järjestelmän hallinta Järjestelmänhallinnassa on määritelty kohdan 3.1 mukaiset käyttöoikeudet. Käyttäjiä voi lisätä käyttöoikeusryhmiin kohdasta käyttäjät&ryhmät/käyttäjät 5.1.1 Uuden käyttäjän lisääminen 1. Valitse kohdasta käyttäjät&ryhmät/käyttäjät lisää uusi käyttäjä. 2. Anna käyttäjän tiedot ja valitse pääsyoikeudet 3. Valitse lähetä 5.2 Sivustolla kävijöiden hallinta Mene kohtaan käyttäjät&ryhmät/frontendusermanagement Kohdasta ryhmät löytyy default oikeudet, joille on määritelty seuraavat ominaisuudet : Admin o Foorumin moderaattori o Sivuston jäsen (member) Member o Sivuston peruskäyttäjä Ryhmän nimellä voidaan rajoittaa sivusisällön näkyvyyttä ryhmäkohtaisesti (ohjeet kohdassa 6 tunnistusta vaativat sivut ). Esim. ryhmä nimellä hallitus > sivusto näyttää kirjautuneelle hallituksen jäsenelle hallitukselle kuuluvaa sisältöä. 6. Tunnistusta vaativat sivut Järjestelmään on tehty valmiiksi kirjautumissivu käyttäjien tunnistusta varten, defauttina tämä on kohdassa : Muuta / kirjautuminen 6.1 Tunnistusta vaativan sivun luominen Tunnistukseen käytetään sivustolla allaolevaa metodia : {if $ccuser->loggedin() && $ccuser->memberof('hallitus') Tervetuloa hallituksen jäsen. {else Sinulla ei ole käyttöoikeuksia. {/if Esimerkki osoitteessa : http://www.cmsms.kylanetti.fi/index.php?page=hallitukselle Huomioitavaa : Wysiwyg editori korruptoi ylläolevat metodit, joten ne on lisättävä AINA ilman editoria

Esimerkiksi hallituksen sisäisten tiedotteiden näyytämiseen if kentän tosi saarekkeeseen voidaan laittaa : {news category='hallitus' HUOM!, näiden rajoitusten käytössä kannattaa huomioida ettei millään uutissivulla tai vastaavalla ole sitten annettu oikeuksia näyttää suojattua materiaalia! Malli nähtävillä osoitteessa : http://www.huhmari.fi/index.php?page=hallituksen keskustelupaikka 2 7. Sivuston taustakuvan hallinta Sivuston taustakuvan esittämisessä on ollut projektissa valitussa sivustopohjassa haasteita ja siihen on seuraavanlainen ratkaisu : Sivun taustaa voi vaihtaa seuraavasti : Sivupohjan wrapper divisioonan ominaisuudet tyylisivussa : div#pagewrapper { /* min max width, IE wont understand these, so we will use java script magic in the <head> */ max width: 99em; min width: 60em; /* now that width is set this centers wrapper */ margin: 0 auto; background color: #000000; color: black; Tässä esimerkissä on vaihdettu taustan väriksi musta, yhtä hyvin taustaksi voi laittaa kuvan : div#pagewrapper { /* min max width, IE wont understand these, so we will use java script magic in the <head> */ max width: 99em; min width: 60em; /* now that width is set this centers wrapper */ margin: 0 auto; div#pagewrapper { /* min max width, IE wont understand these, so we will use java script magic in the <head> */ max width: 99em; min width: 60em; /* now that width is set this centers wrapper */ margin: 0 auto;

background: url(uploads/ngrey/logocms.png) repeat; Tämän lisäksi tyylisivuun pitää tehdä myös seuraavat muutokset : 1. Muutetaan sisällön tausta valkoiseksi (voi toki olla muukin väri tai vaikka kuva ) div#main { /* this is the last inside div so we set the space inside it to keep all content away from the edges of images/box */ padding: 10px 15px; /* you can set your own image here */ /* background: url(uploads/ngrey/rtup.gif) no repeat right bottom; */ background color: #FFFFFF; div.back #main { /* this is the last inside div so we set the space inside it to keep all content away from the edges of images/box */ padding: 10px 30px 1px 15px; /* you can set your own image here */ /* background: url(uploads/ngrey/wbtmleft.gif) no repeat left bottom; */ background color: #FFFFFF; 2. Muutetaan vasemman laitapalkin tausta valkoiseksi (voi toki olla muukin väri tai vaikka kuva ) div#sidebar { /* set sidebar left. Change to right, float: right; instead, but you will need to change the margins. */ float: left; /* sidebar width, if you change this change div.back and/or div.back1 margins */ width: 26%; /* FIX IE double margin bug */ display: inline; /* the 20px is on the bottom, insures space above footer if longer than content */ margin: 0px 0px 20px; padding: 0px; /* you can set your own image here */ /* background: url(uploads/ngrey/mainrt1.gif) no repeat right top; */ background color: #FFFFFF;

div#sidebara { padding: 13px 15px 3px 0px; /* you can set your own image here */ /* background: url(uploads/ngrey/mainrtup.gif) no repeat right bottom; */ background color: #FFFFFF; Malli nähtävillä osoitteessa : http://www.cmsms.kylanetti.fi/index.php?page=muuta