Julkaisujärjestelmän käyttöohjeet BaseKit Kaikkien editorin versiota 7. uudempien versioiden ohjedokumentit
Julkaisujärjestelmän käyttöohjeet (BaseKit) Julkaisujärjestelmän käyttöohjeet (BaseKit) Kaikkien editorin versiota 7. uudempien versioiden ohjedokumentit. Editori 7 Teksti, fontit ja kuvat. Kuva-albumit. Tekstin lisäys ja muokkaus.3 Kuvaeditorin käyttö.4 Kuvapankin kuvat: etsintä ja käyttö.5 Kuvien lisäys sivustoon. Editori 7 Sivut, kansiot ja navigointi. Sivujen ja kansioiden lisäys sivustoon. Navigointivalikon sivujen järjestyksen muuttaminen.3 Navigointivalikko 3. Editori 7 Tyyli, teemat ja mallipohjat 3. Mallipohjan muuttaminen 3. Teema-välilehti 4. Editori 7 Lisäominaisuuksien ohjemateriaali 4. Dropbox-lisäominaisuus 4. PayPalin Osta nyt -lisäominaisuus 4.3 Kuvagalleria-lisäominaisuus 4.4 Upota-lisäominaisuus 4.5 Lomakkeet, kyselyt ja tutkimukset
TEKSTI, FONTIT JA KUVAT -.. Kuva-albumit. Teksti, fontit ja kuvat. Kuva-albumit Jos aiot lisätä paljon kuvia sivustoosi, ne kannattaa ryhmitellä albumeihin. Ryhmittelemällä kuvat näet vain ne kuvat, joista olet kiinnostunut, kun valitset oikean kansion. VAIHE. SIIRRY KUVIEN HALLINTAAN Jos olet jo lisännyt kuvasi tai jos haluat lisätä lisää kuvia editoriin, voit tehdä sen napsauttamalla Manage (hallinta) -vaihtoehtoa () ja valitsemalla sen jälkeen Image albums (kuva-albumit) -vaihtoehdon (). VAIHE. LISÄÄ KUVIA Lataa kuvia tietokoneestasi tai valitse kuvapankin kuvia kirjastosta napsauttamalla Add images (lisää kuvia) -painiketta (). Ennen albumien luontia kaikki kuvasi sijoitetaan samaan paikkaan (). 3
. Kuva-albumit VAIHE 3. LUO ALBUMI Valitse kuva napsauttamalla sitä, jonka jälkeen kuvan päällä näkyy sininen kuvake (). Valitse kaikki albumiin sijoitettavat kuvat ja valitse sen jälkeen avattavasta Move (siirrä) -valikosta Move to new album (siirrä uuteen albumiin) -vaihtoehto (). VAIHE 4. ANNA ALBUMILLE NIMI Anna albumille kuvaava nimi () ja napsauta sen jälkeen Create (luo) -painiketta (). 4
. Kuva-albumit VAIHE 5. SIIRRÄ KAIKKI KUVAT ALBUMEIHIN Tältä albumisi näyttävät. Albumien käyttö on hyvä tapa pitää kaikki kuvat järjestyksessä. MITÄ HYÖTYÄ ALBUMEISTA ON? Napsauta editorin vasemman reunan Images (kuvat) -välilehteä () ja napsauta sen jälkeen hakukuvaketta (). Valitse kansio, johon olet tallentanut kuvat, jotka haluat nähdä (3). Vain kyseiset kuvat tulevat näkyviin alle. Valokuvien etsiminen ja vetäminen sivustoon on näin paljon helpompaa. 3 5
. Tekstin lisäys ja muokkaus. Tekstin lisäys ja muokkaus Voit lisätä tekstiä mille tahansa sivulle VAIHE. LISÄÄ TEKSTIALUE SIVULLE Avaa lisäominaisuus napsauttamalla Add content (lisää sisältöä) -painiketta (). Napsauta ja vedä tavallinen tekstialue () tai otsikko sivullesi (3). Tekstin voi pudottaa vain sivun runko-osaan, ei ylä- tai alatunnisteeseen. 3 VAIHE. TEKSTIALUEIDEN KÄSITTELY. Kopioi tekstialue. Kopioidut kohteet näkyvät editori-ikkunan yläreunassa, ja ne voi vetää mille tahansa sivulle. Jos tekstialue on sarakkeessa, tämä kuvake avaa sarakeasetukset 3. Vedä tekstialue toiseen kohtaan sivulla 4. Poista tekstialue 5. Avaa teksti muokattavaksi napsauttamalla mitä tahansa tekstin kohtaa 3 4 5 6
. Tekstin lisäys ja muokkaus VAIHE 3. TEKSTIN MUOKKAUS. Saat tekstialueen koodin näkyviin napsauttamalla koodikuvaketta. Avattavan Style (tyyli) -luettelon avulla voit valita tekstin tyylin, kuten otsikko, lainaus, tavallinen teksti ja koodi 3. Valitse teksti ja suurenna tai pienennä sitä napsauttamalla näitä kuvakkeita 4. Kohdista tekstialueen teksti 5. Voit valita tekstin osia ja lihavoida, kursivoida tai yliviivata ne 6. Lisää tekstiin luettelomerkkejä tai numeroita 7. Lisää tekstiin ulkoinen tai sisäinen linkki tai mailto-linkki 8. Voit lisätä kuvan tekstirivien väliin 9. Muuta tekstin väriä tai taustaa 0. Jos valitset tekstin pituudeksi 00 %, näet koko tekstin sivulla, mutta jos valitset pituudeksi 50 %, näet tekstistä vain puolet ja Lisää-painikkeen, jota napsauttamalla saat näkyviin tekstin loppuosan.. Muista tallentaa tekemäsi muutokset 3 4 5 6 7 8 9 0 7
.3 Kuvaeditorin käyttö.3 Kuvaeditorin käyttö Editori 7 sisältää kuvaeditorin, jotta voit tehdä muutoksia kuviin KUVAEDITORIN AVAUS Napsauta Image (kuva) -välilehteä (). Siirrä hiiren osoitin minkä tahansa kuvan kohdalle (älä napsauta, siirrä vain hiiren osoitin), jonka jälkeen näkyviin tulee kuvakkeita. Sivellinkuvake () avaa kuvaeditorin. KUVAEDITORIN KÄYTTÖ Valitse kuvan muokkaustila (). Napsauta Save (tallenna) -painiketta (), kun olet valmis. 8
.3 Kuvaeditorin käyttö UUDEN KUVAN LISÄYS SIVULLE Aina, kun tallennat kuvan, järjestelmä luo uuden version, ja se tulee näkyviin Images (kuvat) -välilehden () alkuun. Voit käyttää kuvaa vetämällä ja pudottamalla sen sivulle. 9
.4 Kuvapankin kuvat: etsintä ja käyttö.4 Kuvapankin kuvat: etsintä ja käyttö Editori sisältää kuvapankin kuvien kirjaston, joka on laaja korkealaatuisten kuvien kokoelma. Voit käyttää kuvia sivustossasi. KUVIEN LISENSOINTI JA KUVIEN KÄYTTÖOIKEUDET Kuvapankin kuvat on lisensoitu vain sivustosi käyttöön. Kuvapankin kuvien lataus, jako tai käyttö sivustosi ulkopuolella on kielletty. Eri tilipaketteihin voi sisältyä eri määrä kuvien käyttöoikeuksia. Lisäkäyttöoikeuksia voi ostaa kotisivulta. AVAA IMAGES (KUVAT) -VÄLILEHTI Napsauta Images (kuvat) -välilehteä () ja sen jälkeen Add Images (lisää kuvia) -painiketta (). VALITSE STOCK IMAGES (KUVAPANKIN KUVAT) -VAIHTOEHTO Napsauta Stock images (kuvapankin kuvat) -painiketta (). 0
.4 Kuvapankin kuvat: etsintä ja käyttö ETSI KUVA Kirjoita hakusanat hakukenttään () ja napsauta hakupainiketta tai paina näppäimistön Enter-näppäintä. Voit etsiä yksittäisen tai usean avainsanan perusteella, esimerkiksi avainsanan taivas tai avainsanojen sininen taivas perusteella. VALITSE KUVA Valitse kuva () tai napsauta seuraavan sivun painiketta () Käytä näkyvillä olevaa kuvaa napsauttamalla Select (valitse) -painiketta (). Valitse toinen kuva napsauttamalla Back (takaisin) -painiketta (). Tärkeää: Kun napsautat valintapainiketta, kulutat yhden kuvan käyttöoikeuden. Tätä toimintoa ei voi kumota.
.4 Kuvapankin kuvat: etsintä ja käyttö KUVAPANKIN KUVAT LISÄTÄÄN KUVAKIRJASTOON Voit käyttää kuvaa vetämällä sen sivulle.
.5 Kuvan lisäys sivustoon.5 Kuvien lisäys sivustoon Kuvien lataus tietokoneesta ja niiden käyttö Editorissa. KUVAN LISÄYS Napsauta Image (kuva) -välilehteä () ja sen jälkeen Add images (lisää kuvia) -painiketta (). VALITSE KUVAN KOHDE Jos aiot ladata paljon kuvia, ne kannattaa pitää järjestyksessä luomalla albumi. Valitse Add Albums... (lisää albumeja) -vaihtoehto. Kirjoita albumin nimi () ja napsauta Save (tallenna) -painiketta (). 3
.5 Kuvan lisäys sivustoon VALITSE LADATTAVAT KUVAT. Napsauta Choose files (valitse tiedostot) -painiketta (). Valitse vähintään yksi kuva. Voit valita useita kuvia käyttämällä yhdistelmää Cmd+napsautus (Mac) tai Ctrl+napsautus (Windows) 3. Ladatut kuvat tulevat näkyviin kuvaruutuun 4. Vedä kuva sivulle 3 4 4
.5 Kuvan lisäys sivustoon 3 4 5 6 KUVAKUVAKKEET. Kopioi-lisäominaisuus. Voit lisätä kuvaan tehosteita avaamalla kuvaeditorin 3. Valitse uusi kuva 4. Jos kuva on sarakkeessa, voit valita sarakkeen tällä kuvakkeella 5. Siirrä kuva toiseen kohtaan sivulla napsauttamalla kuvaa ja vetämällä sitä 6. Poista kuva sivulta KUVAEDITORI Kuvaeditorilla voi lisätä useita tehosteita. Voit lisätä tehosteita, kehyksiä tai tarroja, rajata, muuttaa kokoa, muuttaa suuntaa, tarkentaa kontrastia, lisätä tekstiä, piirtää ja tehdä monia muita toimia. Avaa kuvaruutu napsauttamalla jotain kuvaa.. Avaa kuvaeditori napsauttamalla Edit image (muokkaa kuvaa) -painiketta. Tässä näkyy kuvan koko ja kuvatiedoston koko 3. Korvaa nykyinen kuva toisella kirjastosta valitulla kuvalla 4. Skaalaa kuva 5. Kohdista kuva 6. Voit lisätä kuvaan linkin ulkoiselle tai sisäiselle sivulle tai sähköpostitiliin 7. Alt-määritettä käytetään Web-selaimen näyttämän vaihtoehtoisen tekstin määrittämiseen, jos kuvaa ei voi näyttää 8. Tässä lisäämäsi otsikkotunniste lisätään kuvan alle. Voit määrittää otsikkotunnisteen tämän sivun kuvalle. Jos sama kuva toistuu muilla sivulla, otsikkotunniste näkyy kaikissa kuvissa. 9. Kuvaus näkyy otsikkotunnisteen alla. Jos et lisännyt otsikkotunnistetta, kuvaus näkyy kuvan alla 0. Tallenna muutokset Alt-määrite ja otsikkotunniste ovat valinnaisia, mutta niiden määritys on hyvien tapojen mukaista ja niiden määritys voi vaikuttaa hakukoneoptimointiin (SEO). 4 5 6 8 9 3 7 5
SIVUT, KANSIOT JA NAVIGOINTI -. Sivujen ja kansioiden lisäys sivustoon. Sivut, kansiot ja navigointi. Sivujen ja kansioiden lisäys sivustoon VAIHE. LISÄÄ SIVU Napsauta vasemman reunan palkin Site (sivusto) -välilehteä (). Napsauta Add a page (lisää sivu) -painiketta () VAIHE. VALITSE HALUAMASI SIVUTYYPPI Sinun on valittava luotavan sivun tyyppi: Oletusarvo: Uudella sivulla on ylätunniste, alatunniste ja navigointivalikko, mutta päärivi on tyhjä, joten voit lisätä haluamasi lisäominaisuudet. Kopioi nykyinen sivu: Sivu, jolla olet, kun luot uuden sivun, kopioidaan uudeksi sivuksi. Uuteen sivuun kopioidaan myös kaikki sivun sisältämät lisäominaisuudet. Kotisivu: Järjestelmä luo täsmälleen mallipohjan sisältämän, alkuperäisen kotisivun kaltaisen sivun. Tietoja: Tietoja-sivu sisältää ylätunnisteen, alatunnisteen ja navigointivalikon. Pääosassa on oletustekstiä ja Twitter-lisäominaisuus. Yhteystiedot: Yhteystiedot-sivu sisältää ylätunnisteen, alatunnisteen, navigointivalikon ja oletussisältöä, jota voit muuttaa halutessasi. Galleria: Tällä sivulla näkyy Galleria-lisäominaisuus, jonka avulla voit lisätä omia kuvia. Anna sivulle nimi ja napsauta Add page (lisää sivu) -painiketta. 6
. Sivujen ja kansioiden lisäys sivustoon VAIHE 3. MUOKKAA SIVUA Jos haluat muokata sivua, napsauta rataskuvaketta (). Se näkyy vain, jos olet muokattavalla sivulla. SIVUN ASETUKSET. Navigoinnin otsikko on teksti, joka näkyy navigointivalikossa.. Sivun URL-osoite näkyy selaimesi osoiterivillä. 3. Selaimen otsikko näkyy selaimen yläreunassa. Voit helpottaa tämän sivun Google-indeksointia lisäämällä avainsanoja tähän otsikkoon. 4. Lisää avainsanoja, jotka kuvaavat sitä, mitä käyttäjä voi löytää tältä sivulta. Tämä helpottaa sivun Google-indeksointia. 5. Kuvaus näkyy URL-osoitteen alla, kun toteutat Google-haun. 6. Jos et halua, että sivu näkyy navigointivalikossa, valitse tämä valintaruutu 7. Jos teet tästä sivusta kotisivun, aina, kun käyttäjät siirtyvät sivustollesi, he näkevät tämän sivun ensimmäisenä. 8. Voit jättää tämän sivun ylimmälle tasolle muiden sivujen kanssa tai voit siirtää sivun kansioon 9. Voit määrittää tilaksi Käytössä (kaikki näkevät sivun), Ei käytössä (piilottaa sivun käyttäjiltä) tai Luonnos (käyttäjät näkevät sivun, mutta jos teet siihen muutoksia ja julkaiset sivuston, tämä sivu ei päivity käytössä olevaan sivustoon). 0. Lisää skriptejä sivun <head>-- tai <body>-osaan. Käytä tätä toimintoa vain, jos osaat kirjoittaa koodia. Jos et osaa kirjoittaa koodia, editori saattaa vioittua.. Voit poistaa sivun pysyvästi napsauttamalla tätä.. Muista tallentaa tekemäsi muutokset, kun lopetat. 3. Napsauta peruutuspainiketta, jos et halua, että tässä tehtyjä muutoksia käytetään sivullasi. 6 7 3 3 4 5 8 9 0 7
. Sivujen ja kansioiden lisäys sivustoon VAIHE 4. LISÄÄ KANSIO. Lisää uusi kansio sivulle napsauttamalla Add folder (lisää kansio) -vaihtoehtoa. Kansion nimi näkyy navigointivalikossa yhdessä kaikkien muiden ylimmän tason sivujen kanssa. Kansion sisällä olevat sivut näkyvät avattavassa valikossa vain, kun viet hiiren osoittimen kansion kohdalle käytössä olevassa sivustossa.. Anna kansiolle nimi ja napsauta sen jälkeen Add folder (lisää kansio) -painiketta 3. Uusi sivu luodaan tähän kansioon. Voit muuttaa sivun nimeä valitsemalla sivun ja napsauttamalla sen jälkeen sivun vieressä olevaa rataskuvaketta. 3 8
. Sivujen ja kansioiden lisäys sivustoon VAIHE 5. LISÄÄ SIVUJA KANSIOON Lisää sivu tavanomaiseen tapaan, mutta muista valita kansio, johon haluat sijoittaa sivun (). ESIKATSELU Napsauta esikatseluvaihtoehtoa (), jos haluat nähdä, miten kansion sivut näkyvät avattavassa valikossa (). 9
. Sivujen ja kansioiden lisäys sivustoon VALINNAINEN Jos kansion sivujen nimet ovat hyvin pitkiä, ne saattavat rivittyä kahdelle tai useammalle riville, kuten edellisessä kuvassa on tapahtunut. Jos haluat kunkin sivun nimen yhdelle riville, noudata seuraavia ohjeita (nämä ohjeet sisältävät koodia, emmekä tarjoa tukea koodin kirjoittamiseen).. Napsauta yläreunan Add content (lisää sisältöä) -painiketta ja etsi Upota-lisäominaisuus. 3. Vedä Upota-lisäominaisuus sivun alareunaan (käyttäjät eivät näe lisäominaisuutta). 3. Lisää koodia napsauttamalla lisäominaisuutta. Liitä seuraava koodi: <style>.widget.extendednavigation ul li a.text { width: 50px; text-align: left!important; }.widget.extendednavigation ul li:hover ul,.widget.extendednavigation li > ul:hover { width: 50px; } </style> Napsauta Save (tallenna) -painiketta, kun olet valmis. Sivujen nimien pitäisi nyt näkyä vain yksirivisinä. 3 0
. Navigointivalikon sivujen järjestyksen muuttaminen. Navigointivalikon sivujen järjestyksen muuttaminen VAIHE. AVAA NAVIGOINTIRUUTU Avaa navigointiruutu () napsauttamalla sivuston navigointia (). VAIHE. JÄRJESTÄ SIVUT UUDELLEEN Voit muuttaa sivujen järjestystä napsauttamalla ja vetämällä tartuntapalkkia ().
. Navigointivalikon sivujen järjestyksen muuttaminen VAIHE 3. TALLENNA MUUTOKSET Kun napsautat Save (tallenna) -painiketta (), muutokset otetaan käyttöön navigointilisäosassa
.3 Navigointivalikko.3 Navigointivalikko NAVIGOINTIVALIKKO Navigointivalikko sisältyy kuhunkin mallipohjaan. Kun lisäät sivuja vasemman reunan sivustopalkkiin, huomaat, että lisäämäsi sivut näkyvät sivun navigointilisäosassa automaattisesti.. Voit muokata navigointivalikkoa napsauttamalla sitä (). Asetuspalkki tulee näkyviin vasempaan reunaan. Voit määrittää, näkevätkö käyttäjät navigointivalikon 3. Kohdista navigointivalikon sivut 4. Muuta navigointivalikon tyyliä 5. Voit muuttaa sivujen järjestystä napsauttamalla ja vetämällä tartuntapalkkia 6. Voit määrittää, että navigointivalikossa kunkin sivun vieressä näkyy kuvake 7. Tallenna muutokset, kun olet valmis 7 3 4 5 6 3
.3 Navigointivalikko NAVIGOINTIVALIKON TYYLIN MUUTTAMINEN Napsauta Edit Style (muokkaa tyyliä) -painiketta, jonka jälkeen voit muuttaa navigointivalikon ulkoasua.. Näet muutokset tässä, ennen kuin ne otetaan käyttöön navigointivalikossa. Voit halutessasi valita uuden fontin yli 35 eri fontista 3. Muuta tekstin paksuutta 4. Valitse väri värinvalitsimesta tai väriruudusta 5. Voit muuttaa fontin kokoa napsauttamalla tätä 6. Määritä rivin korkeus tässä 7. Määritä merkkien välistys 5 6 3 4 JOS OLET PIILOTTANUT NAVIGOINTIVALIKON Jos olet piilottanut navigointivalikon valitsemalla Hide temlate widget (piilota mallipohjalisäominaisuus) -valintaruudun, voit saada sen näkyviin uudelleen napsauttamalla editorin oikean yläkulman sinistä silmäkuvaketta. 7 4
TYYLI, TEEMAT JA MALLIPOHJAT - 3. Mallipohjan muuttaminen 3. Tyyli, teemat ja mallipohjat 3. Mallipohjan muuttaminen Voit muuttaa alussa valitsemaasi mallipohjaa milloin tahansa. Et menetä sisältöäsi tai muita sivustoosi jo lisäämiäsi tietoja. VAIHE. SIIRRY MALLIPOHJAN VALITSIMEEN Jos haluat muuttaa mallipohjaa, napsauta vasemman reunan Theme (teema) -välilehteä () ja siirry mallipohjan valitsimeen valitsemalla Browse templates (selaa mallipohjia) -vaihtoehto (). VAIHE. VALITSE UUSI MALLIPOHJA Näet kaikki tiliisi sisältyvät mallipohjat. Napsauta mallipohjaa, josta pidät eniten, jolloin näet sen esikatselukuvan. 5
3. Mallipohjan muuttaminen VAIHE 3. OTA UUSI MALLIPOHJA KÄYTTÖÖN. Jos pidät valitsemastasi mallipohjasta, ota se käyttöön sivustossasi napsauttamalla Use template (käytä mallipohjaa) -painiketta 3. Muista, että näet mallipohjan esikatselukuvan kaikissa eri laitteissa napsauttamalla laitteen kuvaketta 3. Jos haluat jatkaa mallipohjien selausta, napsauta All templates (kaikki mallipohjat) -vaihtoehtoa 6
3. Teema-välilehti 3. Teema-välilehti Teema-välilehden avulla voit muuttaa koko sivuston tyyliä. TEEMA-ASETUKSET Teema-välilehden avulla voit tehdä koko sivuston tyyliä koskevia muutoksia:. Napsauttamalla Browse templates (selaa mallipohjia) -painiketta näet kaikki tiliisi sisältyvät mallipohjat ja voit muuttaa mallipohjaa milloin haluat. Colours (värit) -vaihtoehdolla voit muuttaa käyttämääsi väriruutua tai muokata omaa väriruutua 3. Voit valita taustaksi tasaisen värin, liukuvärin tai kuvan 4. Fonts (fontit) -painikkeella voit muuttaa sivustosi kaikki fontit ja fonttityylit 3 4 VÄRIT Kaikkien mallipohjien mukana tulee viisi ammattisuunnittelijan luomaa väriruutua (), joiden avulla voit ottaa kaiken irti mallipohjasta. Jos haluat kuitenkin käyttää omia värejä, voit napsauttaa asetuskuvaketta (). Kukin väriruutu muuttaa jotain mallipohjassa. Yleensä (mutta ei aina), väriruudut muuttavat seuraavia kohteita:. Sivuston tausta. Valikon ja alatunnisteen tausta 3. Painikkeet ja linkit 4. Ylätunnisteet ja jakajat 5. Kappaleet 6. Navigointivalikon teksti 7. Poikittainen navigointivalikko (jos sellainen on käytössä) 8. Napsauta vain väriruutua ja valitse väri alapuolella olevasta värinvalitsimesta (8) tai kirjoita värin heksadesimaalinumero (9) sille varattuun ruutuun 3 4 5 6 7 8 9 7
3. Teema-välilehti TAUSTA Theme (teema) -välilehden taustapainikkeen avulla voit muuttaa taustaa kolmella tavalla. Voit valita taustaksi tasaisen värin (), liukuvärin () tai kuvan (3). Jos haluat käyttää taustana kuvia, joitakin kuvioita löytyy sivustosta Ava7patterns tai COLOURlovers. 3 8
3. Teema-välilehti FONTIT Kun muutat Theme Fonts (teeman fontit) -tyyliä, muutat koko sivuston tyyliä. Valitse muutettava tekstityyppi (esimerkiksi p tai paragraph).. Tässä ruudussa näet, miltä fontti näyttää sivustolla.. Valitse haluamasi fontti yli 35:stä avattavan valikon fontista. 3. Voit valita tekstin paksuudeksi normaalin, lihavoidun tai ohuen. 4. Muuta fontin väriä. 5. Voit muuttaa fontin kokoa napsauttamalla tätä. 6. Rivin korkeuden avulla voit määrittää rivien välisen etäisyyden. 7. Merkkien oletusvälistys on 0 pikseliä (px), mutta voit suurentaa tai pienentää sitä. 8. Tallenna muutokset, kun olet valmis. 8 3 4 5 6 7 9
LISÄOMINAISUUKSIEN OHJEMATERIAALI - 4. Dropbox-lisäominaisuus 4. Lisäominaisuuksien ohjemateriaali 4. Dropbox-lisäominaisuus Jos haluat, että dokumentti on käyttäjien ladattavissa, voit käyttää Dropbox-lisäominaisuutta. VAIHE. DROPBOX-TILIN LUONTI Siirry sivustoon https://www.dropbox.com ja rekisteröidy ilmaiseksi. VAIHE. SIIRRÄ TIEDOSTOT DROPBOXIIN. Voit siirtää tiedostot Dropboxiin napsauttamalla yläreunan latauskuvaketta. Voit ladata tietokoneestasi tiedostoja, joiden muoto on jokin seuraavista: DOKUMENTIT:.doc,.docx,.ppt,.pptx,.pps,.ppsx,.rtf,.markdown,.mdown,.mkdn,.md,.c,.coffee,.cpp,.css,.diff,.js,.java,.less,.php,.py,.rb,.sass,.scss,.sql,.vb,.htm,.html,.xhtml,.xml,.sh tai.txt KUVAT:.jpg,.jpeg,.png,.tiff,.tif,.gif,.bmp,.ai tai.psd VIDEOT:.3gp,.3gpp,.3gpp,.avi,.mov,.mp4,.wmv,.m4v,.mpg,.mkv,.mpeg,.vob,.flv,.mts,.mt,.ts tai.dv. Tältä ladattu tiedosto näyttää Dropbox-tilissäsi. 30
4. Dropbox-lisäominaisuus VAIHE 3. SIIRRY EDITORIIN. Napsauta editorissa yläreunan Add content (lisää sisältöä) -välilehteä () ja vieritä alaspäin, kunnes näet Dropbox-lisäominaisuuden (). Vedä se sivullesi.. Napsauta sivullasi olevaa Dropbox-lisäominaisuutta (), jotta asetuspalkki tulee näkyviin vasempaan reunaan. Napsauta Choose from Dropbox (valitse Dropboxista) -painiketta (). 3. Valitse tiedosto () ja napsauta Choose (valitse) -painiketta (). Kun julkaiset sivuston, sillä vierailevat käyttäjät voivat ladata tiedoston sivustoltasi napsauttamalla kyseistä painiketta. 3 3
4. PayPalin Osta nyt -lisäominaisuus 4. PayPalin Osta nyt -lisäominaisuus Voit lisätä PayPalin Osta nyt -painikkeen, jos haluat myydä tuotteita sivustollasi. Voit käyttää PayPalin Osta nyt -painiketta, jos haluat myydä yksittäisiä tuotteita sivustollasi, mutta et halua luoda kokonaista verkkokauppaa. Jos haluat luoda isomman kaupan useita tuotteita varten, kannattaa luoda verkkokauppa. Tuotetiedot on järjestettävä käyttämällä sarakkeita ja tekstialueita PayPalin Osta nyt -painikkeen avulla, koska se ei luo asettelua puolestasi. VAIHE. PAYPAL-PAINIKKEEN LISÄYS Napsauta Add content (lisää sisältöä) -painiketta () ja vedä PayPalin Osta nyt -lisäominaisuus () sivullesi. VAIHE. NAPSAUTA LISÄOMINAISUUTTA Avaa asetusruutu napsauttamalla sivullasi olevaa lisäominaisuutta. 3
4. PayPalin Osta nyt -lisäominaisuus VAIHE 3. MUUTA PAINIKKEEN ASETUKSIA 8. Lisää tuotteelle nimi. Tämän nimen avulla tiedät, minkä tuotteen käyttäjä on ostanut. Määritä tuotteen hinta 3. Voit määrittää tässä kunkin tuotteen lähetyskulut tai määrittää PayPal-tilillesi kiinteän maksun painon tai kokonaissumman perusteella 4. Tässä näkyy PayPal-painikkeesi teksti 5. Kohdista lisäominaisuus 6. Järjestelmä pyytää kirjoittamaan PayPal-tilisi sähköpostiosoitteen vain silloin, kun lisäät PayPal-lisäominaisuuden ensimmäisen kerran 7. Järjestelmä pyytää valitsemaan valuutan vain silloin, kun lisäät PayPal-lisäominaisuuden ensimmäisen kerran 8. Tallenna muutokset, kun olet valmis 3 4 5 6 7 Tältä painikkeesi tulisi näyttää. 33
4. PayPalin Osta nyt -lisäominaisuus VAIHE 4. MUUTA PAINIKKEEN VÄRIÄ (VALINNAINEN) Jos haluat muuttaa painikeen väriä, napsauta vasemman reunan Theme (teema) -välilehteä () ja valitse toinen väriruutu (). Yleensä, mutta ei välttämättä aina, väriruudun kolmas neliö vastaa painikkeen väriä. 3 Jos et halua muuttaa koko väriruutua, napsauta vain nykyisen väriruutusi rataskuvaketta (3) ja muuta kolmannen neliön väriä. Sarakelisäominaisuuksien avulla voit luoda kaupan. Muista lisätä myös tekstilisäominaisuus, johon voit kirjoittaa tuotteiden hinnat, ja kuvalisäominaisuus, jossa näkyy myytävä tuote. 34
4.3 Kuvagalleria-lisäominaisuus 4.3 Kuvagalleria-lisäominaisuus Uudessa editorin versiossa 7. voit lisätä kuvagallerian sivustoosi. VAIHE. VEDÄ LISÄOMINAISUUS SIVULLE. Napsauta editorin yläreunan Add content (lisää sisältöä) -painiketta. Napsauta Kuvagalleria-lisäominaisuutta ja vedä se sivullesi VAIHE. SIIRRY KUVAGALLERIAN ASETUKSIIN Vie hiiren osoitin kuvagallerian kohdalle ja lisää valokuvia lisäominaisuuteen napsauttamalla kuvakuvaketta. 35
4.3 Kuvagalleria-lisäominaisuus VAIHE 3. VALITSE KUVAT Jos haluat lisätä kaikki albumin kuvat, valitse vain Select all in album (valitse kaikki albumin kohteet) -valintaruutu. Järjestys, jossa kuvat näkyvät lisäominaisuudessa, on sama kuin tässä näkyvä järjestys. Jos haluat muuttaa kuvien järjestystä, kuvat on lisättävä yksi kerrallaan napsauttamalla niitä järjestyksessä, jossa haluat kuvien näkyvän galleriassa. LISÄOMINAISUUDEN ULKOASU Lisäominaisuus vie koko työskentelyalueen, mikä tarkoittaa sitä, että kukin kuva on leveydeltään noin 30 pikseliä, koska kuvagalleria näyttää kuvat kolmessa sarakkeessa. Kuvagallerian sarakkeiden määrän määritykseen ei ole painiketta, koska sarakkeiden määrä riippuu sivuston katseluun käytetystä laitteesta. 36
4.3 Kuvagalleria-lisäominaisuus GALLERIAN NAVIGOINTI ESIKATSELUTILA Kun olet napsauttanut jotakin kuvaa, näkyviin tulee valopöytä, jossa kuva näkyy suurempana. Voit selata gallerian kuvia napsauttamalla nuolikuvaketta () tai sulkea valopöydän napsauttamalla alareunan rastia (). KUVAGALLERIAN VETÄMINEN Voit vetää kuvagalleriaa sivustossa tai sijoittaa kuvagallerian sarakkeeseen napsauttamalla vetokuvaketta ja siirtämällä sitä. 37
4.3 Kuvagalleria-lisäominaisuus (VALINNAINEN) PIKKUKUVIEN PIENENNYS Gallerian kuvat on määritetty siten, että ne vievät 33,3 % sivun leveydestä, joten kuvat jakaantuvat kolmeen sarakkeeseen. Jos haluat jakaa kuvat useampaan sarakkeeseen ja siten pienentää pikkukuvia, vedä Upota-lisäominaisuus sivullesi (sijoita se sivun alareunaan; käyttäjät eivät näe lisäominaisuutta) ja liitä seuraava koodi lisäominaisuuden sisälle: <style>.widget.gallery ul li { padding-bottom:.5%; /*Tämä määrittää kunkin kuvan korkeuden lisäominaisuudessa*/ width:.5%; /*Tämä määrittää kunkin kuvan leveyden galleriassa*/ } </style> Voit muuttaa prosenttiarvoja haluamasi sarakemäärän mukaan. Jos haluat esimerkiksi viisi saraketta, arvojen on oltava 0 %. Jos lisäsit koodin, mutta se ei toimi julkaistussa sivustossa, sinun on kirjauduttava ulos, tyhjennettävä selaimen välimuisti, kirjauduttava sisään, lisättävä koodi uudelleen Upota-lisäominaisuuteen ja julkaistava sivusto uudelleen. 38
4.4 Upota-lisäominaisuus Upota-lisäominaisuus Voit lisätä muun toimittajan sisältöä sivulle käyttämällä Upota-lisäominaisuutta. ENNEN KUIN ALOITAT Upota-lisäominaisuutta tulisi käyttää vain <iframe>-koodin upottamiseen Sivun asettelu saattaa vioittua, jos upotat kiinteänkorkuista ja -levyistä koodia Tiedostoja tai kirjastoja ei voi ladata, joten upotettavan koodin on oltava itsenäinen Tämän lisäominaisuuden sopimaton käyttö saattaa aiheuttaa sivustosi katoamisen Emme voi avustaa muun toimittajan koodin aiheuttamien ongelmien ratkaisussa Käytä vain luotettujen sivustojen upotettua koodia osa upotetusta koodista voi olla haitallista Sivustossa http://embedresponsively.com/ on yleisten lisäominaisuuksien upotettua reagoivaa koodia. LISÄOMINAISUUDEN VETÄMINEN JA UPOTTAMINEN SIVUN RUNKO-OSAAN Napsauta (lisää sisältöä) -painiketta (), etsi Upota-lisäominaisuus () ja vedä se sivun runko-osaan (3). Lisäominaisuutta ei voi lisätä ylä- tai alatunnisteeseen. 3 39
4.4 Upota-lisäominaisuus UPOTETUN KOODIN KOPIOINTI Jos lisäät esimerkiksi YouTube-videon, URL-osoite on liitettävä yläreunan tekstiruutuun (). Napsauta sen jälkeen Embed (upota) -painiketta () ja kopioi alapuolella oleva upotettava koodi (3). 3 NAPSAUTA UPOTA-LISÄOMINAISUUTTA 40
4.4 Upota-lisäominaisuus LIITÄ UPOTETTAVA KOODI Liitä upotettava koodi () ja napsauta Save (tallenna) -painiketta (). UPOTETTU LISÄOMINAISUUS TULEE NÄKYVIIN SIVULLE Vaihda tilaksi esikatselu (), jotta näet, toimiiko upotettu koodi oikein. 4
4.5 Lomakkeet, kyselyt ja tutkimukset 4.5 Lomakkeet, kyselyt ja tutkimukset Voit käyttää ulkoisia lomaketyökaluja Editorin version 7. kanssa. EDITORI 7.:SSA ON KAHDENLAISIA LOMAKKEITA Napsauta editorin yläreunan (lisää sisältöä) -painiketta () ja vedä ja pudota sen jälkeen Lomake-lisäominaisuus () tai Rekisteröintilomake-lisäominaisuus (3) sivullesi. LOMAKE-LISÄOMINAISUUS Lomake-lisäominaisuus sisältää yhden sähköpostikentän ja yhden viestikentän. 6 Napsauta sivun Lomake-lisäominaisuutta, jonka jälkeen voit muokata sen asetuksia.. Sähköpostin otsikko näkyy sähköpostiviestin aiheena, kun joku lähettää lomakkeen. Voit muuttaa painikkeen tekstiä 3. Kirjoita sähköpostiosoite, johon haluat vastaanottaa lähetetyt lomakkeet 4. Jos haluat, että käyttäjät ohjataan edelleen jollekin toiselle sivulle lomakkeen lähetyksen jälkeen, valitse sivu avattavasta valikosta 5. Voit vaihtoehtoisesti ohjata käyttäjät edelleen toisen sivuston sivulle kirjoittamalla URL-osoitteen tähän 6. Tallenna muutokset, kun olet valmis 3 4 5 4
4.5 Lomakkeet, kyselyt ja tutkimukset REKISTERÖINTILOMAKE Voit lisätä sivustoosi rekisteröintilomakkeen, jos haluat ylläpitää tietokantaa käyttäjistä, joille voit lähettää tietoja. Napsauta sivun Rekisteröintilomake-lisäominaisuutta, jonka jälkeen voi muokata sen asetuksia.. Sähköpostin otsikko näkyy sähköpostiviestin aiheena, kun joku lähettää lomakkeen. Muuta nimiön tekstiä, jos haluat kertoa käyttäjille, mitä heidän sähköpostiviesteilleen tehdään 3. Muuta painikkeen tekstiä 4. Kirjoita sähköpostiosoite, johon haluat vastaanottaa lähetetyt lomakkeet 5. Jos haluat, että käyttäjät ohjataan edelleen jollekin toiselle sivulle lomakkeen lähetyksen jälkeen, valitse sivu avattavasta valikosta 6. Voit vaihtoehtoisesti ohjata käyttäjät edelleen toisen sivuston sivulle kirjoittamalla URL-osoitteen tähän 7. Tallenna muutokset, kun olet valmis 7 3 4 5 6 43
4.5 Lomakkeet, kyselyt ja tutkimukset JOS TARVITSET MONIMUTKAISEMMAN LOMAKKEEN, KOKEILE UPOTA-LISÄOMINAISUUTTA Jos tarvitset monimutkaisemman lomakkeen, voit tuoda näkyviin työkalujen avulla luotuja lomakkeita napsauttamalla Add content (lisää sisältöä) -painiketta () ja vetämällä Upota-lisäominaisuuden () sivullesi. Näitä työkaluja ovat JotForm ja Wufoo sekä kaikki muut reagoivia lomakemallipohjia sisältävät lomakemuodostimet ESIMERKKI: VARAUSLOMAKKEEN LUONTI JOTFORMILLA Tämä toiminto edellyttää tilin luontia sivustossa http://www.jotform.com/ Ilmaisen tilin avulla voit lähettää jopa 00 lomaketta kuukaudessa. 44
4.5 Lomakkeet, kyselyt ja tutkimukset REAGOIVAN LOMAKEMALLIPOHJAN ETSINTÄ Napsauta Form templates (lomakemallipohjat) -painiketta () ja etsi sanaa responsive (). Näkyviin tulee reagoivien lomakemallipohjien luettelo (3). 3 Valitse haluamasi. LOMAKKEEN MUOKKAUS Muokkaa lomaketta käytettävissä olevien työkalujen avulla. 45
4.5 Lomakkeet, kyselyt ja tutkimukset NOUDA UPOTETTAVA KOODI Napsauta Setup & Embed (määritä ja upota) -välilehteä () ja napsauta sen jälkeen Source Code (lähdekoodi) -painiketta (). Kopioi lähdekoodi (3). 3 SIIRRY EDITORISSA UPOTA-LISÄOMINAISUUTEEN, JONKA LISÄSIT SIVULLESI. Napsauta sivulle aiemmin lisäämääsi Upota-lisäominaisuutta (). Liitä Jotformista kopioimasi koodi () ja napsauta sen jälkeen Save (tallenna) -painiketta (). 46
4.5 Lomakkeet, kyselyt ja tutkimukset TESTAA LOMAKETTA Testaa lomaketta napsauttamalla Preview (esikatselu) -painiketta (). Lomake ei toimi sivun muokkaustilassa. Sinun on käytettävä esikatselua. Julkaise sivustosi, jotta lomake näkyy verkossa. 47