CSS3 Teppo Räisänen

Slides:



Advertisements
Samankaltaiset esitykset
E4X © Reiska, JavaScript  Keksittiin 1995 (Ensin Netscape 2 selaimeen: Mocha  LiveScript  JavaScript)  Standardoitiin vuonna 1997  ECMA-262.
Advertisements

TERVETULOA Kurssi 1 A Tunne hiiren oikeanlainen käyttö
Internetin palvelut Matti Meikäläinen. Internet-sivut (WWW) •Internetin suosituin palvelu •Sivujen selailuun tarvitaan WWW-selain –Mozilla Firefox –Internet.
JavaScript oliot © Reiska, DOM Oliot  JavaScript sisältää paljon valmiita DOM olioita, on sisältänyt jo DOM level 0 (ns. Legacy DOM) alkaen  WWW-ympäristössä.
Internetin ilmaisohjelmat
Verkot: internet ja HTML Jaana Holvikivi Metropolia.
HTML-kielen perusteet Osa 1 Vilho Kemppainen
Näkövammaiset opiskelijat ja IT-ratkaisut
CSS-tyylisivut © Reino Aarinen, 2014.
WIKISPACE ohjeita. Sivun muokkaaminen •Valitse Edit This Page •Kirjoittele, lisää kuvia, muokkaa tekstiä •Tallenna •Muokkaa lisää….history näyttä kaikki.
Työskentely verkoissa Jaana Holvikivi EVTEK Tietojenkäsittelyn historiaa luku 2001 Ensimmäiset tietokoneet PC:t Suuret tietokoneet laskentaan,
Julkaisukielet ja - tekniikat tMyn1 Julkaisukielet ja -tekniikat •Verkko-ohjelmointi voidaan jakaa kahteen osaan: asiakaspuolen ja palvelinpuolen ohjelmointiin.
Vipu 2014 Sovelluksen esittely
HTML-kielen perusteet Osa 5 Vilho Kemppainen
Verkkotaitokoulutus Aloitus. Koulutuksen sisältö Verkonkäytön perustaitoja (3.11.) Tiedonhaku verkossa (10.11.) Työnhaku verkossa (17.11.) Asiointi ja.
Tekstiasiakirjan kirjoittaminen
HAKUKONEOPTIMOINTI Jaakko Rautiainen. Aihealue Hakukoneiden toiminta Web-sivun optimointi.
OULU ADVANCED RESEARCH ON SOFTWARE AND INFORMATION SYSTEMS Teppo Räisänen | Oulun yliopisto Facebook ohjelmointi - FBML Teppo Räisänen
CSS ja sen sovellukset Vesa Jussila. Esitys  Yleistä –Historia –Etuja ja huonoja puolia –Mediatyypit  Käyttö –Laatikkomalli –CSS-taitto –Sovelluksia.
Vapaa aihe Kysymykset.
CSS perusteet Metropolia. Juhana Lindström Web-kehittäjä – 4 vuotta verkkosivujen toteuttamista ja ylläpitoa – Toteuttanut tai kehittänyt yli 20 eri verkkosivustoa.
Kuvien liittäminen html- dokumenttiin. IMG-elementti l l Parametrit Align=”top” | ”middle” | ”bottom” teksti alkaa kuvan yläreunan tasalta | keskeltä.
HTML5 video, audio, canvas
PowerPoint-esitys OHJE.
XHTML ja linkit Inline-elementti Linkki tehdään a-elementillä ja linkin kohde ilmoitetaan href- attribuutilla Absoluuttinen linkki Helian pääsivulle: Siirry.
XHTML-perusteita Teppo Räisänen
XML/DTD – osa 3 Teppo Räisänen
DTD Teppo Räisänen Liiketalouden yksikkö.
402T20E Digitaalisen sovellustuotannon työvälineet, 3 op Flash MX –perusteet Ari Vainionpää.
XPath Teppo Räisänen Liiketalouden yksikkö.
 MODx on julkaisujärjestelmän ja sovelluskehyksen risteytys, jonka lisenssinä on kaikille ilmainen avoimen lähdekoodin GNU GPL. MODx on suunniteltu ammattilaisten.
RSS Teppo Räisänen
CSS – osa 1 Teppo Räisänen
CLT132 Visuaalisuus: suunnitteluperiaatteita CSS, Internal Style Sheet (viikko 8)
XSL & JavaScript Teppo Räisänen
Merkistöstandardeista
CSS Dreamweaverilla Matti Viitala KaHa/OAMK 2005.
XML – osa 2 Teppo Räisänen
1 2. Tietoverkot Internet: maailman laajuinen verkko tietokoneverkoista Transmission Control Protocol/Internet Protocol (TCP/IP) Tieto lähetetään paketteina.
XSL Teppo Räisänen
XSL Teppo Räisänen
PDF –dokumentit Adobe Acrobatilla Taina Joutsenvirta Valtiotieteellinen tiedekunta
CSS - aloitus ICT01D – syksy 2005 Mirja Jaakkola, Helia.
Listat eli luettelot listaelementit ovat lohkoelementtejä:  lista ja listan alkiot alkavat uudelta riviltä  listan jälkeen tuleva elementti alkaa uudelta.
Silverlight Expression Blend 3 työkaluna. Mikäs on Silverlight? (1/2) Pääasiassa teknologia webbiin –Internet Explorer –Mozilla –Opera –Safari.
Monimedian työkurssi www-teknologioiden rajoitteet Ilmari Laakkonen.
Internetin palvelut Matti Meikäläinen. Internet-sivut (WWW) Internetin suosituin palvelu Sivujen selailuun tarvitaan WWW-selain –Mozilla Firefox –Internet.
Silverlight Expression Blend 3 työkaluna. Mikäs on Silverlight? (1/2) Pääasiassa teknologia webbiin –Internet Explorer –Mozilla –Opera –Safari.
Tyylimäärittelyjen käyttö Nykyaikana html-dokumentin (webbisivun tai webbisivuston) muotoilu tehdään kätevimmin tyylimäärittelyjen avulla (CSS-määrittelyt)
 Perustettu v.2003  Toimii kaikissa PC / MAC / LINUX koneissa  Yhteensopiva kaikkien yleisimpien Internet- selainten kanssa :Internet Explorer, Firefox,
Mukautuvat web-sivut Joni Korpi 01/20. Määritelmä Sivu, jonka asettelu – ja mahdollisesti sisältö – muuttuvat laitteen koon mukaan. 02/20.
Luokan OneNote - muistikirja Jatko Sisältö 1. Apuohjelma 2. Työpöytäversio ja synkronointi 3. Materiaalin lisääminen muistikirjaan (PDF, Powerpoint,
Helsingin normaalilyseo Jani Kiviharju Syksy 2016
Web-ulkoasun kehitys Web-ulkoasun visuaalinen evoluutio 1990-luvulta nykypäivään: Kiinteälevyinen, ASCII-pohjainen Vain tekstisivuja, 100% leveys Muutamia.
Tyylitiedosto html-koodin apuna
WWW-sivuston ja verkkopalveluiden rakentaminen
Luettelot ja sekalaisia komentoja
Helsingin normaalilyseo Jani Kiviharju syksy 2016
www-sivuston ja verkkopalveluiden rakentaminen
Saavutettavuuden takaamisen tekniset ratkaisut
JavaScript – DOM JavaScript objektit
Cascading Style Sheets
Johdatusta selainohjelmointiin
Teppo Räisänen CSS – osa 1 Teppo Räisänen
Kuvagalleria Adobe Bridget -ohjelmalla
Power Point 2007 ohje.
CLT132 Tehtävät (viikko 9).
CLT132 Tehtävät (viikko 8).
Google Docs Teppo Räisänen,
Teppo Räisänen CSS – osa 2 Teppo Räisänen
Esityksen transkriptio:

CSS3 Teppo Räisänen

Yleistä CSS = Cascading Style SheetsCascading Style Sheets CSS CSS CSS 3 Kehittely alkoi 2005 Koostuu erilaisista suosituksista

Yleistä CSS 3 Perusidea ei eroa aikaisemmista CSS- versioista Mukana on kuitenkin paljon uusia ominaisuuksia

Yleistä Suurin ongelma on, että eri selaimet tukevat CSS 3:ea eri tavoin Selaimen ytimenä on moottori, joka tulkitsee HTML:n ja rakentaa sivun kuvan sen perusteella Eri selaimissa eri ytimet, jotka tulkitsevat CSS 3:ea hivenen eri tavoin

Yleistä Mozilla Gecko Firefox Webkit Google Chrome, Safari Presto Opera Trident Microsoft Internet Explorer

Yleistä Keskeisiä elementtejä Background Border Font Box-model Columt Text

Yleistä Muita elementtejä Transitions (3D/2D) Speech Animations Pseudo-class Angles Selectors

Box model

CSS3 Eri selaimilla on erilainen notaatio CSS3 elementeille CSS-tiedostossa CSS3-elementit merkitään yleensä kolme kertaa

CSS3 Webkit-selaimien ymmärtämä muoto Alkuun kirjoitetaan -webkit- Mozilla-selaimien ymmärtämä muoto Alkuun –moz- Geneerinen CSS3 (jota ei kyllä vielä tueta) Merkitään normaalisti

CSS3 -webkit-box-shadow: 5px 5px 5px #888; -moz-box-shadow: 5px 5px 5px #888; box-shadow: 5px 5px 5px #888; Tekee varjon, joka on 5 pikseliä elementin oikealla ja alla. Varjon häivytys 5 pikselin leveydeltä Väriltä harmaa (888)

CSS3