Aulikki Hyrskykari. CSS valitsimista CSS sääntöjen kohditaminen CSS värit Kuvista verkkosivulla
|
|
- Leo Mauno Hänninen
- 7 vuotta sitten
- Katselukertoja:
Transkriptio
1 Aulikki Hyrskykari CSS valitsimista CSS sääntöjen kohditaminen CSS värit Kuvista verkkosivulla Jaoetaan pseudovalitsimet edelleen kahteen alaluokkaan: 1. Pseudoelementtivalitsimet o liitetään elementin nimen perään kahdella kaksoispisteellä erotettuna o luo maagisen pseudoelementin, joka eivät oikeasti ole olemassa 2. Pseudoluokkavalitsimet o liitetään elementin nimen perään kaksoispisteellä erotettuna o elementtiä haetaan jonkun muun ominaisuuden, kuin elementtityypin, tai attribuuttien tai niiden arvon perusteella
2 Yhteen elementtiin kohdistuu usein monta tyylisääntöä o yhdessä tyylitiedostossa saattaa olla useita o sääntöjä saatetaan tuoda useasta lähteestä o sääntöjä periytyy elementille automaattisesti (äidiltä) Minkä mukaan elementin ulkoasu määräytyy? Kolme pääperiaatetta: o sijanti (location), o periytyminen (inheritance) ja o painoarvo (specificity) Elementtien ulkonäkoon vaikuttavat säännöt, jotka joka on voitu kohdistaa sille o selaimen oletustyyleissä o selaimessa käyttäjän itsensä määrittäminä tyyleinä (esim. Firefoxissa asetuksissa tai usercontent.css tiedoston kautta) o dokumentissa - erillisessä css tiedostossa - dokumentin otsikko osassa <style> elementissä - elementin style attribuutin avulla Ylläolevalla listalla alempana annettu sääntö kumoaa ylempänä annetun o ulompana annettu sääntö valuu sisemmäs (cascades), ellei uusi sääntö sitä kumoa
3 Esimerkki: sivulla käytettävän kirjasimen määrittäminen jokaiselle elementille erikseen? ei vaan <body> elementille font family piirre + periytyminen CSS piirteiden yhteenvetotaulukko: kustakin piirteestä määritellään seuraavat ominaisuudet Määritellään listan alkioissa käytettäväksi tekstin värinä sinistä ja sovelletaan sitä järjestämättömään listan alkioon li { color: blue; <ul> <li>tässä ensimmäinen listan alkio </li> <li> <p> Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen. Tässä ensimmäinen kappale. </p> <p>ja tässä toinen kappale</p> </li> </ul> Tekstin väri oli alun perin musta: millä värillä listan toisen alkioiden kappaleet kirjoitetaan? o piirre color on periytyvä piirre o toinenkin listan alkio kirjoittuu sinisellä
4 Entä jos määritetään listan vasempaan reunaan leveä reunus? li { color: blue; border left: 3em solid red; Mikä on tulos? <ul> <li>tässä ensimmäinen listan alkio </li> <li> <p> Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen. Tässä ensimmäinen kappale. </p> <p>ja tässä toinen kappale</p> </li> </ul> VAI? Reunus ei siis periytynyt, mutta o piirteen voi kuitenkin pakottaa periytymään: arvo inherit li { color: blue; border left: 3em solid red; p { border left: inherit; <ul> <li>tässä ensimmäinen listan alkio </li> <li> <p> Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen. Tässä ensimmäinen kappale. </p> <p>ja tässä toinen kappale</p> </li> </ul> Nyt koodi tuottaisi vasemmanpuoleisen tuotoksen
5 Annetaanpa listalle taustaväri li { color: blue; border left: 3em red; background color: lime; p { border left: inherit; <ul> <li>tässä ensimmäinen listan alkio </li> <li> <p> Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen. Tässä ensimmäinen kappale. </p> <p>ja tässä toinen kappale</p> </li> </ul> Kumpi tulos? VAI? VAI? Onko taustaväri periytyvä piirre? o taustaväri ei ole periytyvä piirre, joten ilmeisesti ei o siis vasemmanpuoleinen oikein? Kokeile o listan toinen alkio (kappaleet) ei tule eri värillä kuin muu lista o oikeanpuleinen tuotos miksi? Piirteillä on alkuarvot (oletusarvot): taulukossa initial value o taustaväri on oletusarvoisesti läpinäkyvä (taulukossa arvo transparent)
6 Sääntö kohdistetaan aina tiettyyn elementtiin o mitä spesifisempi sääntö, sitä suurempi painoarvo o jos samaan elementtiin kohdistuu useampia sääntöjä, elementtiin sovelletaan sääntöä, joka on painoarvoltaan suurempi o toisin sanoen spesifisemmin kohdistettu sääntö ylittää karkeammin kohdistetun säännön. Painoarvo lasketaan säännön valitsimien painoarvojen summana seuraavasti: valitsin painoarvo Miksi? p 1 1 ev div p (2 ev).puu (1 lv) div p.puu 12 (1+1+10) (2 ev+1 lv) #lehti iv body #sisalto.vaihtoehtoinen p (2ev 1 lv 1 iv) elementissä kirjoitettu sääntö: <p style="margin left:20px"> 1000 id valitsemella annetut säännöt ovat siis ylivoimaisesti painavavimpia, jos jätetään elementin attribuuttiin kirjoitettu sääntö huomiotta Saman painoarvon sääntöjen kesken voimaan jäävä sääntö määräytyy säännön sijainnin mukaan.
7 Erityistilanne: o kaikki nämä säännöt on mahdollista kumota antamalla säännölle määritys!important p { font size:large;!important Esimerkiksi o Jos käyttäjä omassa tyylitiedostossaan antaa!important määrityksen o kumoaa kaikki muut säännöt o ehkä haluaisi muuttaa body elementin kirjasinkoon Tarkoitettu edelläkuvatuntyyppisiin erikoistilanteisiin o käytöstä tulisi siis pidättäytyä o vaikka sen avulla saisikin helposti joitain tilanteita hoidetuksi Ohjenuora sääntöjen kirjoittamiselle: o pyri tekemään säännöistä mahdollisimman yleisiä ja mennä spesifisiin sääntöihin vain kun tilanne tosiaan niin vaatii o mitä alhaisempi kynnys hyvin spesifisien sääntöjen käyttämiseen on, sitä helpommin tyylipohjasta tulee sekava ja vaikeasti ylläpidettävä Artikkeleja / blogeja aiheesta o Jim Jeffers: The Art and Zen of Writing css o Bobby Jack: Stop breaking inheritance o Inayaili de Leon: CSS Specificity And Inheritance
8 Värin voi määritellä usealla tavalla. CSS:ssä nimettyjä värejä o 16 perusvärin lista: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow o olivat aiemmin määriteltynä jo HTMLssä o CSS3:ssa on määritelty lisäksi 147 muuta nimettyä väriä: color/#svg color Nämä 163 väriä ovat vain pieni osa täysvärikuvassa käytettävissä olevista 16,7 miljoonasta värisävystä Tarkemman värinmäärityksen voi tehdä käyttäen o RGB /RGBA väriformaattia tai o HSL/HSLA formaatteja o A versioissa on mukana koko kuvan läpinäkyvyys RGB väri määritellään kolmella luvulla: punaisen, vihreän ja sinisen värin määrä o kolmen värin intensitetti voidaan siis määrittää joko - desimaalilukuna: 0 255, - prosenttina: 0% 100% tai - tai heksadesimaalilukuna: 00 FF o CCS väreissä kaksi ensimmäistä koodausta annetaan - suluissa kolmena pilkuilla toisistaan erotettuna lukuna - sulkujen eteen kirjoitetaan tunnus rgb - esim. musta 0m rgb(0,0,0) = rgb(0%,0%,0%) o Heksadesimaaliesitys - alkaa # merkillä jota seuraa - kuusi (tai kolme) merkkiä joukosta: 0, 1.. 9,a,..f. - esim. musta on # (tai #000)
9 Esimerkkejä - rgb(0,0,0) = rgb(0%,0%,0%) = # on musta väri - rgb(255, 255, 255) ta= rgb(100%,100%,100%) = #ffffff on valkoinen - rgb(54,165,63) = rgb(21%, 65%, 5%) =#36c93f on ruohonvihreä - rgb(153,0,5) = rgb(60%, 0%, 13%) = # on tiilenpunainen RGBA värit o määritellään kolmen luvun lisäksi neljäs luku o määrittää värin läpinäkyvyyden desimaalilukuna väliltä 0 1 o mitä lähempänä nollaa luku on, sen läpinäkyvämpi kuva on o Esimerkiksi - rgba(153,0,51,0.9) ei kuulla paljon vielä läpi, mutta - rgba(153,0,51,0.2) on hyvin läpikuultava väri Verkosta löytyy hyviä työkaluja värien määritykseen, esimerkiksi: ColorZilla Firefoxiin tai w3schoolin värinpoimija Toinen tapa määritellä värisävy (CSS3) Tässäkin määrittely tapahtuu kolmella luvulla o värisävy (hue) o värikylläisyys (saturation) o ja vaaleuden aste (lighness) Ensimmäinen näistä luvuista ilmaistaan luvulla väliltä ja kaksi jälkimmäistä prosentteina Esimerkiksi o hsl(0, 0%,0%) on musta o hsl(0, 0%, 100%) valkoinen o hsl(124, 58%, 50%) ruohonvihreä ja o hsl(340, 100% 30%) tiilenpunainen HLSA värissä o neljäs luku prosenttilukuna läpinäkyvyydelle o muuten analoginen RGBA määrityksen kanssa
10 Tärkeitä o sivuston keventäjinä o ilmeen luojina o usein myös informaatiota sisältävinä elementteinä Kuvia käytettäessä tulee muistaa kuvien tekijänoikeudet o voit tuoda sivulle vain itse ottamaasi kuvan, tai o kuvan, jonka käyttöoikeudet eksplisiittisesti sallivat sen käyttämisen sillä tavalla ja siinä yhteydessä, jossa aiot kuvaa käyttää Creative Commons lisenssoinnin kautta on saatavissa eri tavoin vapaita tai rajoitetusti käytettävissä olevia kuvia Googlen kuvahaku o voit rajoittaa koskemaan vain vapaasti käytettävissä olevia kuvia o tarkennettu haku (kohta: Käyttöoikeudet) Vaikka kuva olisikin vapaasti käytettävissä o kuvan yhteyteen jollain tavoin hyvä liittää mainita kuvan tekijästä o jos se vaan on löydettävissä. Joissain tilanteissa tarpeen piirtää tai luoda kuvia "lennossa oesimerkiksi jossain grafiikkaa sisältävässä nettipelissä o HTML5:ssä uusi <canvas> elementtin o<canvas> on nimensä mukaisesti taustakangas kuvalle oitse kuva luodaan tai tuodaan taustakankaalle esim. javascriptillä tai jollain muulla skriptikielellä oemme siis käsittele <canvas> kuvia tässä yhteydessä Käsitellään siis <img> elementin avulla sivulle tuotuja kuvia
11 Piirretään käyttäen geometrisia olioita o viivoja, suorakaiteita, ellipsejä, Bezier käyriä, jne. o vektrorigrafiikan iso etu on sen skaalautuvuus o se säilyy terävänä kaikissa kooissa laadun kärsimättä. Vektorigrafiikkaa käytetään o esim. kirjasinten toteutuksessa, ja o logojen ja julisteiden suunnittelussa Vektorigrafiikkaa tukevia piirto ohjelmilla o esim. Freehand, Illustrator o toimisto ohjelmien piirtotyökalut Kun kuva tuodaan sivulle <img> elementin avulla o vektorigraafisena luotu kuvakin muunnetaan useimmiten bittikarttakuvaksi o yleisimmät formaatit: jpeg, gif ja png formaatit o <img> elementin avulla on kuitenkin mahdollista tuoda myös vektorigraafisia kuvia (svg piirrokset tai yksisivuiset pdf tiedostot) Valokuvat ovat aina bittikarttakuvia (rasterigrafiikkakuvia) o bittikarttakuvat koostuvat pisteistä, kuvapikseleistä. o yksi kuvapikseli voi saada arvokseen jonkun värin o kuvan värisyvyys (kuinka monta väriä kuvassa on käytettävissä) o vaikuttaa suoraan kuvan kokoon Esim. o kuvan värisyvyys on 8 bittiä - kunkin kuvapikselin esittämiseen varataan 8 bittiä - kullakin kuvapikselillä voi olla 2 8 =256 toisistaan poikkeavaa väriä o värisyvyys on 24 bittiä o täysvärikuva o yksi kuvapikseli voi tällöin saada yhden 2 24 =16,7 miljoonasta värisävystä o kuvakoko kasvaa kolminkertaiseksi.
12 JPG (Joint Photographic Expert Group) Suunniteltu tiivistämään jatkuvasävyisiä (continuoustone) väri tai harmaasävykuvia. o+ säilyttää värit (täysvärituki, 24 bittiä) o+ pakkaussuhteen voi määrätä portaattomasti o pakkaus vaikuttaa kuvan tarkkuuteen o ei tue läpinäkyvyyttä o ei tue animointia Graphics Interchange Format Sopiva tiivistysformaatti piirroksille, logoille ja muille kuville, joissa on käytössä vähän eri värejä. o värisyvyys 8 bittiä o kuvassa maksimissaan 256 väriä o gif pakkausalgoritmi patentoitu Unisys yhtiölle o + säilyttää kuvan tarkkuuden o+ tukee läpinäkyvyyttä o+ tukee animointia (peräkkäisten kuvien sitominen animaatioksi
13 Portable Network Graphics GIF korvaajaksi kehitetty patenteista vapaa tiivistysformaatti o + säilyttää kuvan tarkkuuden, mutta tiivistys tehokkaampaa kuin GIF kuvissa o + tukee läpinäkyvyyttä o ei tue animointia o selainten vanhat versiot eivät tue tätä formaattia Yleisohje: PNG kuvia voi käyttää muuten o paitsi isohkoissa, paljon pieniä väripintoja sisältävissä valokuvissa, jolloin JPGkuvat toimivat paremmin o tai tilanteissa, jossa sivujen toimita vanhoilla selaimilla ovat syystä tai toisesta olennaita. Läpinäkyvien kuvien avulla o on mahdollista luoda monimutkaisempia asetteluja o kuvan ääriviivan ei tarvitse olla suorakulmio, tai kuvia on helpompi sijoitella osittain päällekkäin. o GIF ja PNG tukevat läpinäkyvyyttä - kuvankäsittelyohjemissa voi määritellä läpinäkyvät alueet - GIF kuvissa voi yhden 256:sta väristä määritellä läpinäkyväksi, ts. yksi pikseli voi olla läpinäkyvä, tai sillä on väri - PNG kuvat tukevat ns. alpha läpinäkyvyyttä (alpha transparency), jolloin pikseli voi olla osittain tai kokonaan läpinäkyvä - PNG kuvien avulla on helpompi saada pehmeästi häpyviä reunoja tilanteissa joissa GIF kuvan reuna näyttäisi rosoiselta ja pykälikkäältä. o JPG ei tue läpinäkyvyyttä
Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/27/2014
27.3.2014 Aulikki Hyrskykari JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto Edellinen luento o Videotiedostot - palvelimelle tallennetun videon tuonti verkkosivulle - HTML5 videoformaatit - videon
LisätiedotAulikki Hyrskykari Antti Sand
Aulikki Hyrskykari Antti Sand Edellinen luento o Videotiedostot - palvelimelle tallennetun videon tuonti verkkosivulle - HTML5 videoformaatit - videon nouto sivulle verkosta o Äänitiedostot o CSS taustaa,
LisätiedotDigitaalisen median tekniikat css tyylimääritykset jatkuu
Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit
LisätiedotDigitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1
Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit
LisätiedotKuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
LisätiedotAulikki 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ätiedotAulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/21/2014
20.3.2014 Aulikki Hyrskykari Edellinen luento o sisältömalleista, attribuuteista globaalit attribuutit o osan sisältö o osan sisältö - dokumentin rakenteen määrittely - dokumentin sisällön
LisätiedotDigitaalisen median tekniikat css tyylimääritykset Harri Laine 1
Digitaalisen median tekniikat css tyylimääritykset 30.4.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää
LisätiedotDigitaalisen median tekniikat css tyylimääritykset
Digitaalisen median tekniikat css tyylimääritykset 26.3.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää
LisätiedotKuva 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ätiedotKUVANKÄSITTELYN TEORIAA
KUVANKÄSITTELYN TEORIAA BITTIKARTTAKUVA Pikseli Resoluutio Bittisyys Värimallit RGB ja CMYK Kuvan tallennusmuotoja VEKTORIGRAFIIKKA Pikseli Bittikarttakuva muodostuu pienistä vierekkäisistä neliöistä eli
LisätiedotUlkopuolisen 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ätiedotAulikki Hyrskykari Antti Sand
Aulikki Hyrskykari Antti Sand Edellinen luento o sisältömalleista, attribuuteista globaalit attribuutit o -osan sisältö o -osan sisältö - dokumentin rakenteen määrittely - dokumentin sisällön
LisätiedotCode 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ätiedotDigitaalisen median tekniikat css tyylimääritykset
Digitaalisen median tekniikat css tyylimääritykset 18.9.2007 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää
LisätiedotUlkoasun muokkaus CSS-tiedostossa
Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css
LisätiedotKuvankäsi*ely 1. Digitaaliset kuvat ja niiden peruskäsi3eet. Kimmo Koskinen
Kuvankäsi*ely 1 Digitaaliset kuvat ja niiden peruskäsi3eet Kimmo Koskinen Mitä kuvankäsi3ely on? Digitaalisten kuvien monipuolista muokkausta: - korjailua: roskien poisto, punaiset silmät jne - muuntelua:
LisätiedotHajautetut käyttöliittymät. Kuvat www-sivulla
Hajautetut käyttöliittymät Kuvat www-sivulla Perusteita Pikselien väri näytöllä muodostuu punaisesta, sinisestä ja vihreästä valosta, jotka erilaisina yhdistelminä muodostavat kaikki muut värit ja yhdessä
Lisätiedotvalitsin 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ätiedotTaulukkolaskennan edistyneempiä piirteitä, Kuvakäsittelystä
Taulukkolaskennan edistyneempiä piirteitä, Kuvakäsittelystä Taulukkolaskennasta käsitellään edistyneempiä piirteitä harjoituksen H7 pohjalta Kuvankäsittelystä pikselit, väriresoluutio ja kuvan koko resoluutio,
LisätiedotAjatus 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ätiedotCSS 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ätiedotHTML5 video, audio, canvas. Mirja Jaakkola
HTML5 video, audio, canvas Mirja Jaakkola Video webbisivulla HTML5 mahdollistaa videon lisäämisen webbi-sivuille ilman plugineja. Yleisimmät videoformaatit webissä: Mpeg-4 eli H.264 Ogg Flash Perustuu
LisätiedotMAASEUDUN SIVISTYSLIITON GRAAFINEN OHJEISTO 1.1. Maaseudun Sivistysliiton graafinen ohjeisto 1.1
Maaseudun Sivistysliiton graafinen ohjeisto 1.1 Hahmo Design Oy 2.3.2018 Sisällysluettelo Ydinilme MSL:n tunnus 3 Tunnuksen käyttö 4 Tunnusoriginaalitiedostot 5 Värit 6 Typografia 7 2 ydinilme > tunnus
LisätiedotKuvankäsittely. DigiReWork Annamari Mäenhovi Kati Nieminen
Kuvankäsittely DigiReWork 14.11.2017 Annamari Mäenhovi Kati Nieminen Työpajan sisältö Valokuvaamisen karkeat perusteet Kuvien ottamisen ja käyttämisen laillisuus Digitaalinen kuva Erityisvaatimukset alustoille
LisätiedotHTML & 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ätiedotTaulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara
Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005
LisätiedotCSS-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ätiedotJuha-Pekka Ruuska 17.01.03 BITTIKARTTAGRAFIIKKA, BITTIKARTTAKUVAT ELI RASTERIKUVAT...2
BITTIKARTTAGRAFIIKKA, BITTIKARTTAKUVAT ELI RASTERIKUVAT...2 VEKTORIGRAFIIKKA...2 BITTIKARTTAKUVAT...2 BITTIKARTTAKUVAN PIKSELIKOKO...2 BITTIKARTTAKUVAN RESOLUUTIO...2 RGB-KOLMIVÄRIMALLI...3 BITTIKARTTAKUVANVÄRISYVYYS
LisätiedotEntiteetit 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ätiedotEdellinen luento o sisällön ryhmittelystä jatkoa o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla
25.3.2014 Aulikki Hyrskykari Edellinen luento o sisällön ryhmittelystä jatkoa o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla Tällä kertaa o Videotiedostot -
LisätiedotCascading 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ätiedotCSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö
CSS - aloitus ICT01D syksy 2005 Mirja Jaakkola, Helia Ulkopuolisen tyylitiedoston käyttö Tyylimääritykset sijaitsevat erillisessä.css-tiedostossa, joka linkitetään xhtml-dokumenttin head-lohkossa linkelementillä:
LisätiedotNavigointi 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ätiedotVerkkosivut 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ätiedotTee 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ätiedotLUENTO 6 KUVANKÄSITTELY
LUENTO 6 KUVANKÄSITTELY TIEY4 TIETOTEKNIIKKATAIDOT SYKSY 2017 JUHANI LINNA ANTTI SAND 17.10.2017 LUENTO 6 17.10.2017 Tällä luennolla Taustaa harjoitukseen YH3b Miksi? Digitaalinen kuva Kuvankäsittelyohjelmat
LisätiedotRATA-SM -sarjan graafinen ohjeistus Alkusanat Kuvapankki
GRAAFINEN OHJEISTUS RATA-SM -sarjan graafinen ohjeistus Tähän ohjeeseen on koottu RATA-SM -sarjan ulkoisessa ja sisäisessä viestinnässä käytettävien materiaalien ulkoasua koskevat ohjeet. Tärkeää on muistaa
LisätiedotG R A A. Kaarinan Pojat ry:n graafinen ohjeistus
G R A A FI O HJ E IS Kaarinan Pojat ry:n graafinen ohjeistus N E N T US Logo Kaarinan Pojat ry:n logon tulee näkyä kaikissa KaaPon materiaaleissa, myös joukkueiden tuottamissa materiaaleissa. Logoa käytetään
LisätiedotLOGO 2. LOGO. Autokeskuksen yritystunnus on Autokeskus-logo.
8 LOGO Autokeskuksen yritystunnus on Autokeskus-logo. Autokeskuksen logoa käytetään aina vaakamuodossa. Logoa ei saa latoa, piirtää tai asetella uudelleen. Logon mittasuhteita tai väritystä ei saa muuttaa.
LisätiedotMainoksen taittaminen Wordilla
Mainoksen taittaminen Wordilla Word soveltuu parhaiten standardimittaisten (A4 jne) word-tiedostojen (.docx) tai pdf-tiedostojen taittoon, mutta sillä pystyy tallentamaan pienellä kikkailulla myös kuvaformaattiin
LisätiedotGRAAFINEN OHJEISTO
GRAAFINEN OHJEISTO 8..06 Sisältö Merkki ja tekstiosa 3 Suoja-alue 4 Tunnuksen värit (värillinen tunnus) 5 Tunnuksen värit (harmaasävyinen tunnus) 6 Tunnuksen sähköiset originaalit toimisto-ohjelmiin 7
LisätiedotDigitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa
LisätiedotDigitaalisen median tekniikat xhtml Harri Laine 1
Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa
LisätiedotHTML5 -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ätiedotH 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ätiedotMuita 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ätiedotTiedostomuodon valitseminen kuville
Kuvan lisääminen sivulle Valitse työkaluriviltä Lisää Kuva tiedostosta painike 1. Ruudulle aukeaa sekä Kuva-ikkuna että Valitse tiedosto ikkuna 2. Selaa Valitse tiedosto ikkunassa esiin se kuva, jonka
LisätiedotWWW-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ätiedotFlash. Tehtävä 1 Piirtotyökalut, kokeile niitä. Liiketalous syksy 2012
Flash Tehtävä 1 Piirtotyökalut, kokeile niitä RectangleTool ja Oval Tool Kokeile rectangle ja oval-piirtotyökaluja käytä eri värejä ja reunan paksuuksia Primitive-objekteilla on enemmän ominaisuuksia,
LisätiedotCSS. 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ätiedotGRAAFINEN OHJEISTO 2017
GRAAFINEN OHJEISTO 2017 Graafinen ohjeisto ja sen käyttötarkoitus Sisällys Tullinkulman Työterveys Oy:n uusi aputoiminimi on Pirte ja se otetaan käyttöön vuoden 2018 alusta alkaen markkinoinnissa ja muussa
LisätiedotKun 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ätiedotKys /Kaarisairaala, Evoluutio julkisivuteos, 2015 Partanen & Lamusuo Oy DIGI PRINT. Aineistovaatimukset ja aineiston siirto
Kys /Kaarisairaala, Evoluutio julkisivuteos, 2015 Partanen & Lamusuo Oy DIGI PRINT Aineistovaatimukset ja aineiston siirto Digiprint- tekniikka Tulostettavan kuvan maksimikoko 2500 x 4000 mm. 6 perusväriä
LisätiedotOhjeet 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ätiedotH 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ätiedotNotepad++ 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ätiedotEtikettien suunnittelu. Kuka ja millä välineillä? Tiina Myllymäki
Etikettien suunnittelu Kuka ja millä välineillä? Tiina Myllymäki Myyvä etiketti syntyy tilaajan ja suunnittelijan yhteistyönä Toimeksiannon sisällön määrittelyä varten käydään keskustelu työn taustasta
Lisätiedot1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE VÄRILLINEN LOGO LOGO VÄRILLISELLÄ POHJALLA MUSTA LOGO 7 1.
1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE 4 1.2 VÄRILLINEN LOGO 5 1.3 LOGO VÄRILLISELLÄ POHJALLA 6 1.4 MUSTA LOGO 7 1.5 EI NÄIN 8 3 1.1 Logo ja turva-alue neste jacobsin logo Neste Jacobsin uusi tekstilogo
LisätiedotSuupohjan koulutuskuntayhtymä. Graafinen ohjeisto
Suupohjan koulutuskuntayhtymä Graafinen ohjeisto Graafinen ohjeisto Tämä graafinen ohjeisto antaa perusohjeet Vuoksin visuaalisen ilmeen käytöstä markkinointiviestinnässä. Graafisen ohjeiston noudattamisella
LisätiedotKotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com
Kotisivujen teko Jan Lindholm Kirkkonummen kansalaisopisto Syksy 2014 koodari.eu jsbin.com Käyttäjätunnus / Salasana aoppilas.01 / aoppilas#2013# aoppilas.02 / aoppilas#2013# aoppilas.03 / aoppilas#2013#
LisätiedotOhjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 27.1.2010 T-106.1208 Ohjelmoinnin perusteet Y 27.1.2010 1 / 37 If-käsky toistokäskyn sisällä def main(): HELLERAJA = 25.0 print "Anna lampotiloja, lopeta -300:lla."
LisätiedotAleksanterinkadun Appro. Tunnusohjeisto 25.2.2015
Tunnusohjeisto 25.2.2015 sisällys tunnus 3 1 tunnus tekstillä 4 2 tekstitön tunnus 5 tunnuksen väriversiot 6 tunnus kuvan päällä 7 tunnus 1 n tunnus eli visuaalinen tunniste viittaa muotokieleltään Lahden
LisätiedotArvokas. Graafinen ohjeistus
Graafinen ohjeistus Sinä olet arvokas! -ohjelma rakentaa yhdenvertaisempaa Suomea, jossa jokaisella lähtökohdista ja elämäntilanteesta riippumatta on mahdollisuus kokea olevansa merkityksellinen osa yhteisöä
LisätiedotKotisivuohjeet. 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ätiedotVERKOSTO GRAAFINEN OHJE
2018 SISÄLTÖ 3 Pikaohje 4 Tunnus ja suoja-alue 5 Tunnuksen versiot 6 Tunnuksen käyttö 7 Fontit 8 Värit 9 Soveltaminen ----- 10 Verkosto Lapset 2 suoja-alue Tunnuksen suoja-alueen sisäpuolella ei saa olla
LisätiedotCSS - 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ätiedotTIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word
LisätiedotVÄYLÄVIRASTO GRAAFINEN OHJEISTO 4/2019
VÄYLÄVIRASTO GRAAFINEN OHJEISTO 4/2019 YKSINKERTAINEN ON KAUNISTA Väylän liikemerkki koostuu sanasta VÄYLÄ ja sinisen sävyisestä tunnuksesta. Tunnuksessa on V-kirjain, jonka negatiivisesta tilasta muodostuu
LisätiedotInternetsivujen 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ätiedot1/2016 GRAAFINEN OHJEISTO
GRAAFINEN OHJEISTO 1.1.2016 1 Sisällys 1. Tunnus... 4 2. Värit... 5 3. Suoja-alue... 6 4. Typografia... 6 5. Käyntikortti... 7 6. Lomakkeisto... 8 7. Kirjekuoret... 9 8. PowerPoint... 10 9. Ilmoittelu...
LisätiedotGRAAFINEN OHJEISTO
GRAAFINEN OHJEISTO SISÄLTÖ LEIRITUNNUS 3 LEIRITUNNUKSEN KÄYTTÖ 4 SUOMEN PARTIOLAISTEN TUNNUS 5 TYPOGRAFIA & VÄRIT 6 VÄRIEN, KUOSIEN JA TYPOGRAFIAN KÄYTTÖ 7 ILME-ESIMERKKI 8 KUVIEN KÄYTÖSTÄ 9 KÄYTTÖOHJE:
LisätiedotOhjelmoinnin peruskurssi Y1
Ohjelmoinnin peruskurssi Y1 CSE-A1111 16.9.2015 CSE-A1111 Ohjelmoinnin peruskurssi Y1 16.9.2015 1 / 26 Mahdollisuus antaa luentopalautetta Goblinissa vasemmassa reunassa olevassa valikossa on valinta Luentopalaute.
LisätiedotDigitaalisen median tekniikat. Luento 3: CSS
Digitaalisen median tekniikat Luento 3: CSS Luennot 1. Intro 2. XHTML 3. CSS Box Model Selektorit Esimerkkiä yms. 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys & saavutettavuus 7. Palvelinohjelmointi
LisätiedotLisä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ätiedotJOKKY OSK. Logo ja graafinen ohjeistus. Jaana Salo. JEDU / Piippola, Media 15A
JOKKY OSK Logo ja graafinen ohjeistus Jaana Salo JEDU / Piippola, Media 15A 12.2.2016 JOKKY osuuskunnan logo TAUSTAA -Värit samat, kuin JEDU:n logossa -Osuuskunnan logo kuvastaa verkostoa ja osuuskunnan
LisätiedotLogon perusmuoto ja käyttö
Logon perusmuoto ja käyttö 100% musta 80% musta Ensisijaisesti pyritään aina käyttämään tällä sivulla esitettyä vihreän väristä logon perusmuotoa. Sivun oikealla puolella on esiteltynä logon toimivuus
LisätiedotTIEDOSTOFORMAATIT. Lyhyt selostus erilaisista tiedostoformaateista
TIEDOSTOFORMAATIT Lyhyt selostus erilaisista tiedostoformaateista Herlokki Solmunen 0000000 31.1.2008 SISÄLLYSLUETTELO 1 Johdanto...1 2 Erilaiset toimistosovellusten formaatit...1 2.1 MS Office versioon
LisätiedotAineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi.
Yleisohjeet mainosaineistoille Aineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi. Kun lähetät aineistoja sähköpostitse,
LisätiedotKuvassa on 18 * 20 pikseliä 133 * 149 pikseliä 266 * 298 pikseliä Tiedostokoko: 2 kb 19 kb 120 kb
P E R U S T E E T LSET KUVAT Kuva muodostuu pikseleistä Vie paljon tilaa (Tiedostoon tallentuu jokaisen yksittäisen pisteen paikka ja väri) Kuvan laatu kärsii etenkin kuvaa suurennettaessa Ohjelmia: Photoshop,
LisätiedotGRAAFINEN OHJEISTO versio 1.0
03.11.2017 GRAAFINEN OHJEISTO versio 1.0 SISÄLLYS Graafisen ohjeiston tarkoitus on nimensä mukaisesti ohjeistaa, selkeyttää ja yhdenmukaistaa Vierailu- ja innovaatiokeskus Joen yhteydessä tapahtuvaa viestintää.
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
LisätiedotEditorin käyttö. TaikaTapahtumat -käyttöohje
Editorin käyttö TaikaTapahtumat -käyttöohje Yleistä ohjelmasta etaika-järjestelmän HTML-moduuli sisältää tekstieditorin, joka on monipuolinen apuväline tehtäessä materiaalia sivustolle (esim. tapahtumakohtaiset
LisätiedotSUOMEN VAPAAKIRKON LAPSI- JA NUORISOTYÖN GRAAFINEN OHJEISTO
SUOMEN VAPAAKIRKON LAPSI- JA NUORISOTYÖN GRAAFINEN OHJEISTO SISÄLTÖ Johdanto...3 Logo...4 Logon käyttö...6 Logo ja sloganit...8 Typografia...10 Värit...12 Valokuvien käyttö...14 2 Suomen Vapaakirkon lapsi-
LisätiedotGRAAFINEN OHJEISTO OLLILA TRANS OY
GRAAFINEN OHJEISTO OLLILA TRANS OY Ohjeiston sisältö Tämän ohjeiston tarkoitus on antaa selkeät suuntaviivat Ollila Trans Oy:n viestinnälle. Annettuja ohjeita noudattamalla yrityksestä annetaan yhtenäinen,
LisätiedotKylä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ätiedotKVPS Tukena Oy Graafinen ohjeisto 04/2018
1 KVPS Tukena Oy Graafinen ohjeisto 04/2018 2 Graafinen ohjeisto Tervetuloa tutustumaan KVPS Tukena Oy:n graafisiin ohjeisiin. Tämä ohjeisto sisältää ohjeita ja vinkkejä brändi-identiteetin käyttöön ja
LisätiedotSISÄLLYS. Tunnus 3 Värit 5 Typografia 6 Visuaalinen elementti 7 Ilmesovellukset 8 Kuvien käyttö 11. Uusimaa hanke Graafinen ohjeistus
GRAAFINEN OHJEISTUS SISÄLLYS Tunnus 3 Värit 5 Typografia 6 Visuaalinen elementti 7 Ilmesovellukset 8 Kuvien käyttö 11 Uusimaa 2019 -hanke Graafinen ohjeistus TUNNUS Uusimaa 2019 -hankkeen tunnus on kaksikielinen.
LisätiedotReiluus saapui työpaikalle -viestintäohje
Reiluus saapui työpaikalle -viestintäohje Elokuu 2010 Ohjeistus Reiluus saapui työpaikalle -logon käyttöön markkinointi- ja viestintämateriaaleissa Sisällysluettelo: 1. Esittely 2. Käyttöoikeudet 3. Logon
LisätiedotTunnus. Tunnuksen VÄRIVERSIOT. Min. 20 mm
Graafinen ohje Tunnus Oulu Sinfonian tunnuksena käytetään ensisijaisesti ohessa kuvattua liikemerkin ja nimilogon kiinteää yhdistelmää. Käytössä on huolehdittava, että tunnuksen mittasuhteet sekä nimilogon
LisätiedotGRAAFINEN OHJEISTO. kesä 2017 / v.1.0
GRAAFINEN OHJEISTO kesä 2017 / v.1.0 JOHDANTO Tämän graafisen ohjeiston tarkoitus on ohjeistaa Eläinterapeutin visuaalisen ilmeen käyttöä ja määritellä ulkoasua, sekä visuaalista viestiä. Graafisen ohjeistoon
LisätiedotGRAAFINEN OHJEISTUS. Ilves ry
GRAAFINEN OHJEISTUS Ilves ry Copyright Ilves ry Versio 1.0 / Marraskuu 2015 YLEISTÄ Tämä ohjeistus on rakennettu ohjenuoraksi Ilves ry:n henkilökunnalle sekä kaikille urheiluseuran sidosryhmille, joilla
LisätiedotLogo. 2. Toissijainen käyttö. 1. Ensisijainen käyttö. YTN graafinen ohjeisto
Graafinen ohjeisto Logo YTN:n logosta on kaksi versiota. Ensisijaisesti käytetään logon versiota numero 1. Versiota 2 käytetään erityistilanteissa, kuten erittäin pienessä koossa. 1. Ensisijainen käyttö
Lisätiedot1.Esipuhe. Esipuhe. Graafinen ohjeisto Rauman Lukko
Sisällys Sisällys 1. Esipuhe Teksti 2. Liikemerkki ja värit eri käyttötilanteissa 2.1 Esimerkkejä liikemerkin käytöstä eri taustoissa 3. Liikemerkin mitat ja suoja-alue 4. Logo ja liikemerkki 5. Slogan
LisätiedotKUVAMUOKKAUS HARJOITUS
KUVAMUOKKAUS HARJOITUS PUNASILMÄISYYS, VÄRI, KUVAKOKO, RAJAUS PUNASILMÄISYYS Kuvien punasilmäisyyden joutuu kohtaamaan usein huolimatta kameroiden hyvistä ominaisuuksista. Ohjelma tarjoaa hyvän työvälineen
LisätiedotTunnus. Typografia. Värit. Kuvamaailma. Sovellukset. päävärit lisävärit. värivariaatiot koko käyttö suoja-alue. internet Office
graafinen ohjeisto Tunnus värivariaatiot koko käyttö suoja-alue Typografia internet Office Värit päävärit lisävärit Kuvamaailma valokuvat graafiset elementit kuvituskuvat Sovellukset PowerPoint Mikä on
LisätiedotHämeenlinnan Offset-Kolmio Paino Oy:n aineisto-ohjeet
Hämeenlinnan Offset-Kolmio Paino Oy:n aineisto-ohjeet Sivun koko Painotuotteen sivun koon tulee olla taitto-ohjelmassa määritetty sivun lopulliseksi kooksi. Tarvittavat leikkuuvarat (Bleed), vähintään
LisätiedotKauneimmat Joululaulut: Visuaalisen ilmeen ohjeisto
Kauneimmat Joululaulut: Visuaalisen ilmeen ohjeisto 7.3.2017 Tämä on vuonna 2017 uusitun Kauneimpien Joululaulujen visuaalisen ilmeen ohjeisto. Ohjeiston mukana toimitetaan alkuperäiset logotiedostot,
LisätiedotTunnuksen käyttö 28.4. 2014
Tunnuksen käyttö 28.4. 2014 Sisältö Saatteeksi Tässä ohjeistossa määritellään Lähienergiatunnuksen käyttöä, linjataan ehdot sen käyttöoikeudelle ja kerrotaan valvonnasta. Ohjeiston tarkoituksena on selkeyttää
LisätiedotSISÄLLYS JOHDANTO 5. KUVAT 1. TUNNUS - SANOMA 6. VERKKOSIVUT 2. TUNNUS - KÄYTTÖ 7. TUOTEKORTIT JA ESITTEET. 2.1 Suoja-alue. 7.
GRAAFINEN OHJEISTO SISÄLLYS JOHDANTO 1. TUNNUS - SANOMA 2. TUNNUS - KÄYTTÖ 2.1 Suoja-alue 2.2 Eri osien käyttö 2.3 Minimikoot 5. KUVAT 6. VERKKOSIVUT 7. TUOTEKORTIT JA ESITTEET 7.1 Tuotekortit 7.2 Esitteet
Lisätiedot