1. DW ohjelman perusasetuksia
  2. Hyvä tietää myös DW:n käytössä
  3. Linkin teko DW:ssä helposti
  4. Talletuksessa tärkeää
  5. Oletusarvoista, mittayksiköistä ja mitoista
  6. Sivun katsomisesta selaimessa
  7. Käytännön tietoa/niksejä
  8. Sivujen koodin tutkiminen
  9. Lähdekoodin kommentointi
  10. Perusmäärityksiä, joita (voi olla?) hyvä laittaa aina
  11. Tarkistus -muistilista
  12. Kertaa ennen WP: näyttöä

Netti on pullollaan ohjeita nettisivujen tekemiseen

https://www.w3schools.com/

https://miiaylinen.fi/sivuasioita/

Myös Jukka K. Korpela niminen nettiguru on julkaissut aiheesta hyviä nettisivuja ja kirjoja. Kannattaa googlata ja etsiä kirjastosta/kirjakaupasta.

1. DW ohjelman perusasetuksia

  • Valitse musta tausta (jos ei ole), jotta näet kursorin
  • Valitse File/preferences -> General- Rasti pois kohdasta ”reopen documents on startup” niin pääset aina aloittamaan aina tyhjältä työpöydältä (jos haluat)
  • Valitse File/preferences ->Code Format -Rasti pois kohdasta “Indent with 2 spaces”, niiin DW ei sisentele koodia omin päin (paitsi jos haluat että sisentää)
  • Valitse File/preferences –>Code hints ”Close tags” kohdassa yllin vaihtoehto, jotta lopetustägi tulee automaattisesti vasta sitten kun aloittaa sen kirjoittamisen (jos haluat)
  • Valitse File/preferences ->Setting to sync (ei rastia)
  • Lopuksi klikkaa Apply ja Close

2. Hyvä tietää myös DW:n käytössä

  • Tee Save All -pikakomento: Edit / Keyboard Shortcuts … Esimerkiksi CTRL + ä (Tarvitset sitä todella)
  • DW paleteissa olevat mitat ovat muodossa 0,5 em (pilkku ja väliyönti). CSS-koodissa on oltava 0.5em (piste ja ilman välilyöntiä)
  • Oletusarvoisesti otsikot DW tekee boldattuna, korjaa CSS:ään, ettei DW boldaa otsikkofonttia: font-weight: 400px;
  • Oletusarvoisesti DW tekee monille elementeille vähän margin:ia, jollekin paddingia? joten reunukset täytyy määritellä css:ssä mieleisekseen (tai nollaksi jos ei halua mitään). Esim. mainille, p:lle, taulukoille, luettelolle…. Muista myös, että margin ja padding kasvattaa elementin määriteltyä korkeutta+leveyttä, joten kannattaa määritellä elementille box-sixing: border box, niin koko ei kasva.
  • Otsikoiden koot voi määritellä em tai % -yksiköissä, niin tulee hyvännäköistä joustaen eri näyttökokoihin.
  • .Jos siirrät/nimeät uudelleen DW-tiedostoja, sulje ne pois ensin DW ohjelmasta!
  • Väliotsikoiksi määrittely nopeasti DW:n html:ssä; design-näkymässä maalaa haluttu teksti ja paina CTRL + 1 (määrittelee tekstin h1:ksi CTRL + 2 määrittelee h2:ksi jne.)
  • Linkkien määrittelut DW:ssä kätevästi html:ään, klikkaa aktiivisesti esim. haluttu sana tai kuva ja avaa Window/Properties -paneeli…
  • Sivu näkyviin nettiselaimeen DW:stä: Hiiren oikealla kun klikkaa harmaata palkkia ylhäällä Open in Browser tai DW:n ala-oikeanurkassa kuvaketta, valitse selain…

3. Linkin teko DW:ssä helposti

  • Live-näkymässä klikataan 2 kertaa kohtaa jossa on linkki, se muuttuu ensin siniseksi sitten oranssiksi
    • Maalataan osoite ja leikkaa CTL + X
    • Maalataan teksti jonka haluat linkinksi ->DW tarjoaa ketjukuvaketta, Sijoitetaan CTRL V, klikataan enter
  • Window/Properties paletissa linkkien määritykset/linkiksi muotoilu on helppoa

4. Talletuksessa tärkeää

  • Älä käytä ääkkösiä koodissa tai tiedostonimissä, talleta pienaakkosina ja talleta myös ilman välejä!
  • Jos siirrät/nimeät uudelleen DW-tiedostoja, sulje ne pois ensin DW-ohjelmasta!

5. Oletusarvoista, mittayksiköistä ja mitoista

  • Oletusarvoisesti DW tekee otsikot boldattuna, korjaa CSS:ään: font-weight: 400px; (tuo 400 px = normaalivahvuus)
  • Oletusarvoisesti DW laittaa marginia ja paddingia monille elementeille, esim. mainille, vaikka paneelissa näyttää nolla! Se täytyy käydä ”klikkaamassa tai kirjoittamassa oikeaksi nollaksi” paneelissa, tai tehdä se suoraan itse CSS:ään. Tämä nolla kannattaa tarkistaa aina CSS:ssä, jos ei margin näytä muuttuvan pois koska: (Ks. seur. kohta)
  • Nolla-arvo tai mittayksikkö paneelissa ei jostain syystä aina päivity CSS:ään!
  • Otsikoiden koot voi määritellä em tai % yksiköissä (eikä px) niin tulee hyvännäköistä erilaisiin näyttökokoihin tai poikkeaviin selaimen kirjainkokoasetuksiin.
  • Joissain määrityksissä kuten margin, voidaan käyttää eri puolilla eri mittayksiköitä, eli siis vaikka toisella puolella % ja toisella px.
  • Kun laittaa paddingin prosenttina, esim. 5% (eikä px), se on pienessä näytössä kapeampi kuin isossa, esim. reunus. (joskus voi olla hyvä säästää näin tilaa pienessä).
  • Jos tekstissä on boldia tai kursiivia, muista hakea googlefontsista myös halutun fontin bold ja kursiivi-muodot, muuten voi tulla tyhmännäköistä niihin.
  • DW paleteissa olevat mitat ovat muodossa 0,5 em (pilkku ja väliyönti), kun taas CSS-koodissa on oltava 0.5em (piste ja ilman välilyöntiä)!!!
  • Header on automaattisesti täysleveä (=Containerin leveys)
  • Enää ei ajatella, että kaiken sivulle olevan asian täytyisi mahtua näytön ikkunaan (niin ettei tarvitse vierittää sivua), niinkuin joskus ajateltiin. Vaikka pöytäkonenäytöt ovat kasvaneet, niin nettisivuja katsotaan jo enemmän pienillä näytöillä kuten kännyköillä ja tableteilla, ja sivua joutuu melkein aina vierittämään joka tapauksessa…
  • Main:ille voi olla hyvä laittaa overflow-y tai main voi ”kadota” kun määrittelee float:in leftiksi tai sisältöä on enemmän kuin on mainin koko.
  • Erikokoisilla näytöillä tarvitaan erilailla tilaa, ja voi tulla ikäviä yllätyksiä, vaikka omalla pöytäkoneen/läppärin näyttöruudulla näyttää kaikki ihan hyvältä. On siis tarkistettava miltä näyttää eri näytöillä!
  • Containerin normaalileveys pöytäkoneen/läppärin näytössä tällä hetkellä 1000 – 1200 px
  • Kapeampiin näyttöihin tehdään omat määrittelyt @media… (”Mediakyselyt”) Eli tabletille esim max-width: 1000 px ja kännylle max-width: 800 px.

6. Sivun katsomisesta selaimessa

  • Sivu näkyviin nettiselaimeen DW:stä: Hiiren oikealla kun klikkaa harmaata palkkia ylhäällä Open in Browser tai DW:n ala-oikeanurkassa kuvaketta, valitse selain jne tai F12.
  • Sivun päivittymisen ”pakotus”, eli silloin tarvitaan kun normaali päivitysnappi lataa aina vaan sivun välimuistista eikä sivu oikeasti päivity. PC:ssä Firefoxissa CTRL+F5, Chromessa Shift+F5 tai F12, Safarissa shift + päivitysnappi, Macissa Cmd + shift + r .
  • Tabletissa ja kännykässä voi yrittää selainta unohtamaan vanhan version, mutta se voi olla vaikeaa. Voi yrittää 1. sulkea avoimet sivut 2. tyhjentää sivuhistorian 3. tyhjentää asetuksista välimuistiin . talletetut tiedostot, mutta näköjään joskus ei meinaa mikään auttaa ja joutuu vaan odottelemaan joitain päiviä.
  • Eri selainohjelmat, näyttökoot ja laitteet näyttävät sivun erilailla
    • (Eri selainohjelmat esim. Firefox, Chrome, IE Edge, Safari, Opera jne
    • kooltaan eri tuumaiset ja eri resoluutioiset näytöt
    • pöytäkoneissa, läppäreissä, tableteissa, kännyköissä ym. digitaalisissa näytöissä.
  • Näytöissä on erilaisia resoluutioita; nettiresoluutioon määritelty kuva voi mennä huonoksi tosi korkearesoluutioisessa näytössä!
  • Tehosteet, kuten varjostukset voivat näyttää erilaisilta eri nettiselaimissa, tai eivät toimi ollenkaan tai hidastavat? Kannattaa siis oikeastaan välttää erikoistehosteita!?

7. Käytännön tietoa/niksejä

  • Kursorin vaakaviivasta pystyviivaksi Insert nappula (delete-nappulan päällä) muuttaa (jos on vahingossa vaihtunut vaakaksi).
  • Tiedostohallinnassa kun haet tiedostoja nettisivulle tms. etkä näe tiedostopäätteitä; ->Rasti ruutuun: näytä tiedostotunnisteet .
  • Viittaus sivun kaikkiin elementteihin css:ssä: *-merkki esim. *{line-height: 1.35.
  • Voi olla hyvä määritellä taustaväri alussa (kun ensimmäistä kertaa rakentaa sivua) sellaisillekin elementeille, jotka eivät sitä tarvitse, jotta näkee ruudulla minkäkokoisen alueen ne varaavat. Taustavärin voi sitten määritellä myöhemmin pois tai paremmin sopivaksi.
  • Jos ei halua tyhmää ”odottelufonttia” jos sivun lataus sattuu kestämään, niin laita aina font-familyyn myös määrittely: sans-serif.
  • Sivun rivinväli kannattaa asettaa suhteessa fonttikokoon. Lukija on saattanut säätää sivulleen kiinteän fonttikoon ja tuleekin tyhmännäköistä jos ei ole suhteessa.

8. Sivujen koodin tutkiminen

  • Pääset tutkimaan minkä tahansa nettisivun koodia valitsemalla:
    Klikkaa hiiren oikea -> Näytä sivun lähdekoodi TAI hiiren oikea ->Inspect element
  • Lähdekoodissa voit klikata css-tiedoston katseltavaksi
  • Inspect elementillä voi tutkia esimerkiksi jonkin elementin esim. otsikon koon tai yrittääkseen ymmärtää WordPressin koodia viilatakseen sen muotoiluja mieleisekseen
  • Firefoxin lisäosa Web Developer Extension (Työkalut/Lisäosat) – voit muuttaa ”lennosta” sivun css-määrittelyä tai tutkia, mitkä css-säännöt koskevat tiettyä elementtiä

9. Lähdekoodin kommentointi

(Tekstin molemmilla puolella on välilyönnit)
Jos haluat tehdä koodiin vaikka omia muistiinpanoja itselle ja muiden iloksi

HTML-koodissa näin:                 <!– tekstikommentti tähän –!>                 

CSS-koodissa näin:                      /* tekstikommentti tähän */

10. Perusmäärityksiä, joita (voi olla?) hyvä laittaa aina

  • Kuville: css:ään min-width:auto, max-width:100% (tai voi olla 95%)
  • Kieliasetus html-sivun alkuun: kieliasetis esim. <html lang=”fi”>
  • Linkeistä pois alleviivaus: css:ään. a:link{text-decoration: none
  • Oletusmarginaali pois: css:ään ainakin bodylle usein halutaan margin: 0px
  • Oletusmarginaali aina pois, kaikille elementeille: css:ään (Tuo tähti alussa = kaikille) *{ padding: 0;   margin0; }  poistaa kaikki oletusarvot täytteelle ja marginaalille
  • Viewport – määrittely, jotta sivu näyttää heti sopivan kokoiselta kännykässäkin: Lisää HTML:ään HEAD-elementin sisään rivi: <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  • Jotta kaikki kuvat mahtuvat myös kännykän näytölle: Kirjoita css:ään: img {max-width: 100%; ja height: auto;}
  • Internet Explorerin kurinpalautus, jos sitä vielä joku erehtyy käyttämään: (Tämä head-elementin sisään lisättävä koodinpätkä saa Internet Explorer -selaimen toimimaan kuten muutkin modernit selaimet.) <meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″>
  • Meta property=”og:… -määrittelyt html-sivulle Facebookia varten, tästä on hyviä ohjeita:

Linkki https://developers.facebook.com/docs/sharing/webmasters/

Linkki https://support.google.com/webmasters/answer/7451184?hl=fi

Linkki https://developers.facebook.com/webmaster/

11. Tarkistus -muistilista

  • Rivinvälistys, tarvittaessa css:llä korjaus
  • Fontti ja fontin koko, WP:ssä oma fontti FonttiBluginilla tai Import css:llä
  • Kohderyhmän vaatimukset, fonttikoko, linkit, rakenteet?
  • Sivun väritys aiheeseen sopiva? eri näytöille sopiva
  • Kapiteeli teksti norm. tekstinä ja siihen-> css: font-variat uppercase
  • Kertomerkki oikeaoppisesti, ei äksällä
  • Etusivulla täytyy olla h1-otsikko, muttei ”Tervetuloa” tms
  • H2-otsikot kelluvien elementtien ohi tarvittaessa
  • Väliotsikoita sopivasti
  • Kappalejako sopivasti, kappaleiden aloitus järkeviin kohtiin
  • Kuvat Photoshopissa oikein optimoitu ja talletettu
  • Logot, ikonit Illustratorissa oikein käsitelty ja talletettu
  • Kuvien nimeäminen järkevästi
  • Kuviin alt-tekstit
  • Tavustusvihjeet pitkiin sanoihin ym. kikkailut
  • Pitkä viiva tarvittaessa, muut erikoismerkit ok
  • Yhteystiedot näkyvästi, helposti löydettävissä, yhteydenotto oltava helppoa
  • sähköpostilinkki vai osoite ”ei-linkkinä”?, vai kuvana (-siinäpä pulma)
  • Yhteydenottolomake jos tarvitaan
  • Linkkejä sopivasti, järkevästi ja loogisessa järjestyksessä, helposti löydettävissä
  • Oikeakielisyys, tarkista teksti tarvittaessa Word:illa ja googlaamalla sanoja
  • Tulostusoptimointi
  • Hakukoneoptimointi, ainakin eka sivu olisi hyvä optimoida
  • Validaattoritestaus koodille
  • Nopeustestaus
  • Mobiilikäytettävyys Huom. linkkipalkki, linkkien välistys, sivun taustavärit
  • Varmuuskopiointi

12. Kertaa ennen WP: näyttöä:

  • WP:n asennus-ohje, tunnukset ja salasanat
  • Hyviä teemoja ja lisäpalikoita
  • WP:n asetuksiin ekat tärkeimmät muutokset
  • WP:n lisäpalikoden asennus
  • Teeman ja lisäpalikan vaihto, niiden muokkaus jne..
  • Hyväksi todetut lisäpalikat (kuvagalleria, lomake, fontit, hakukoneoptiointi)
  • Css:n muokkaus
  • Upotukset (Facebook ym. some, YouTube, GoogleMap..)
  • Pdf:n linkitys
  • Erilaiset testilohkot, otsikointi, taulukon tekeminen…
  • Käyttäjien lisääminen erilaisilla oikeuksilla
  • Web-kuvan säädöt, tiedostomuodot
  • Logojen muokkaus/käsittely Illustratorissa

Pinterestin, Instagramin ja YouTuben kautta löytää nopeasti ohjeita ja ideoita yllin kyllin moneen asiaan…