Taustaa 4. Toimenpiteet 6. Tyylitellyn tekstin sivu 10. Tekstin ja kuvien sijoittelusta 13. Lisäämme toisen sivun 17. Edit-näkymä 20.

Transkriptio

1 RapidWeaver-opas

2 RapidWeaver-opas 1 RapidWeaver - sivustoeditori 1.1 Taustaa 4 2 Aloitus 2.1 Toimenpiteet 6 3 Ensimmäinen sivu Tyylitellyn tekstin sivu 10 Tekstin ja kuvien sijoittelusta 13 4 Toisen sivun lisäys 4.1 Lisäämme toisen sivun 17 5 Sivun ulkoasut Edit-näkymä 20 Preview-tila 21 6 Sivuston tallennus ja siirto Tallennus paikallisesti 24 Testatun sivustosi asetuksia 26 Tiedostojen siirto palvelimelle 28

3 RapidWeaver - sivustoeditori RapidWeaver-opas - 3

4 Taustaa Palaa tästä takaisin tvt-sivustolle. RapidWeaver ohjelmalla luodaan, muokataan ja ylläpidetään web-sivustoja sekä siirretään niitä palvelimelle. Voit hakea demoversion tästä Mac-ohjelmasta ositteesta: Tuolla demoversiolla voit tehdä nämä harjoitukset kotona (Mac-ympäristössä). Sivusto koostuu useista sivuista (erityyppisistäkin). Aluksi kannattaa sivusto luoda johonkin oman tietokoneen paikalliseen hakemistoon. Siellä sitä voi rauhassa testata ja vasta kun se toimii moitteettomasti, siirretään se FTP:n kautta jollekin www-palvelimelle (siirtoon käytämme ohjelmaa Cyberduck). Sibelius-Akatemiassa sivustosi pitää laittaa Amadeus-palvelimella olevaan public_html kansioosi, jonka oikeudet täytyy asettaa arvoon 755. Tämä on versio Ilmoitelkaa virheistä! RapidWeaver-opas - 4

5 RapidWeaver-opas - 5 Aloitus

6 Toimenpiteet Käynnistä ohjelma Saat oheisen projektivalintaikkunan jossa voit aloittaa uuden projektin, selailla lisukkeita (monet ovat maksullisia) tai kirjautua maksulliseen opetusvideovarastoon. Oikealla puolella näet viimeisimmät projektisi jotka on helppo avata kaksoisosoittamalla. Yleensä valitaan kohta 1 eli "Create a New RapidWeaver Project" ellei avata aikaisempaa projektia. TEE: Aloitamme uuden projektin osoittamalla kohtaa 1 jonka jälkeen RapidWeaver (jäljempänä RW) kysyy uuden projektin aloitusvaihtoehtoja. RapidWeaver-opas - 6

7 Projektin aloitusvaihtoehtoja 1. Voit selailla ja valita aikaisemmin tallennettuja FTP-palvelimien yhteystietoja (mm. minne tallennat sivustosi nettiin ja millä tunnuksilla/salasanoilla) 2. Voit asettaa heti alkuun sivustosi yleisasetuksia (osoitteen, ftp-palvelimen, logon, perustekstit jne.) 3. Voit aloittaa myös vain lisäämällä uusia sivuja TEE: Valitsemme kohdan 3 eli luomme heti alkuun uuden sivun välittämättä siitä, mihin se menee ja mitä asetuksia sillä on. Sivutyyppivalikko Klikattuasi edellisen kuvan kohtaa 3, kysyy RW uuden sivun tyyppiä. Koko sivustosi voi koostua useista erilaisista sivuista eli aina kun lisäät sivustoosi uuden sivun, näet oheisen sivutyyppivalikon RapidWeaver-opas - 7

8 Muutamien sivutyyppien selityksiä: 1. Tekee sivun, jolle voi kätevästi liittää jaettavia tiedostoja sekä niihin liittyviä lisäselvityksiä. 2. Tekee valokuva-albumin jossa on helppo selailla ja katsella sinne sijoittamiasi valokuvia. 3. Erityinen (maksullinen ja Sibikselle hankitty) sivutyyppi, johon voi asemoida useita eri sivuja. Yleensä kaikki myöhemmin hankittavat lisäominaisuudet vaativat tämän sivutyypin olemassaoloa (kannatta siis hankkia!). Tätä varten teen ehkä myöhemmin oman erillisopaan. 4. Tyylitelty vapaa tekstisivu vastaten tekstinkäsittelyikkunaa. Voit kirjoittaa, muotoilla ja asemoida vapaasti tekstiä, linkkejä sekä kuvia. Tämä vaihtoehto lienee yleisin aloitussivun tyyppi (Home-sivu). TEE: Valitsemme ensimmäiseksi sivutyypiksi kohdan 4 eli "Styled Text" RapidWeaver-opas - 8

9 RapidWeaver-opas - 9 Ensimmäinen sivu

10 Tyylitellyn tekstin sivu Tällä ensimmäisellä sivulla kokeilemme erilaisia tekstin kirjoitustapoja sekä liitämme sivulle myös linkkejä. Styled Text sivu Valittuamme tyylitellyn tekstisivutyypin, pitää meidän antaa sivullemme nimi. Kätevää lienee antaa ensimmäiselle sivulle nimeksi "Koti" tai "Home". Tarkoituksena on, että tältä sivulta aloitetaan sivustomme selailu ja tämä sivu näkyy aina ensimmäisenä kun sivustomme avataan. TEE: Kirjoita vasemmassa sarakkeessa olevaan aktivoituun kenttään sivun nimeksi "Koti" Monasti kannattaa tarkistaa (tai muokata) sivun lisämääreitä. Niitä pääsee katselemaan klikkaamalla kuvavalikkopalkin oikealla olevaa sinistä i-kuvaketta (Page Info). TEE: Osoita pyöreää, sinistä "Page Info" kuvaketta. RapidWeaver-opas - 10

11 Page Info, Page Inspector eli työstettävän sivun lisäasetuksia Tässä tarkasteluikkunassa kannattaa ainakin katsella sivun yleisiä asetuksia (1. General Settings). Joskus voit muutella myös tyyliasetuksia. Styles välilehdellä voit määritellä mm. käytettäviä värejä, määrittää sivun leveyden ja näytetäänkö sivupalkkia (Sidebar) vaiko ei. 2. Tässä voit valita näkeekö käyttäjä tätä sivua lainkaan (Enabled), näytetäänkö se valikoissa jotta siihen voi hypätä ja avataanko sivu omassa uudessa ikkunassa (jolloin siellä ei voi palata taaksepäin). 3. Voit nimetä sivun uudelleen, asettaa avautuvan ikkunan otsikon (Browser Title), voit määritellä sivullesi hakemistossasi oman kansion sekä määritellä sivulle sen tiedostonimen. Huomaa, että index.html niminen sivu avautuu aina automaattisesti, sen nimeä ei erikseen tarvitse kirjoittaa osoitteen perään: = RapidWeaver-opas - 11

12 4. Ruksaamalla laatikon voit asettaa tälle sivulle yleisasetuksista poikkeavan otsikkotekstin (Title), alaotsikon (Slogan) sekä sivun alaviitteen (Footer) Emme tee tässä harjoituksessa muutoksia Ikkunan vasen sarake Vasemmalla tulet näkemään kaikki sivustosi eri sivut allekkain (kohta 1). Voit jälkikäteen muuttaa niiden järjestystä raahamalla niitä alas-/ylöspäin. Kun alat lisäillä sivustollesi erilaisia materiaaleja (PDF, JPG, MP3, WAV jne.), kannattaa ne raahata kotikoneen hakemistoista kohtaan RESOURCES (2). Itse tiedostot tulevat säilymään kotikoneellasi alkuperäisissä hakemistoissa, mutta näin RW tietää missä ne siellä ovat ja niihin on siten helpompaa linkittää. Kun lopuksi siirrät sivustosi jollekin palvelimelle, niin RW osaa tuolloin siirtää myös kaikki sivustoosi liittyvät muut tiedostot samassa paketissa ettei sinun tarvitse enää muistella missä ne alunperin olivatkaan. RapidWeaver-opas - 12

13 Tekstin ja kuvien sijoittelusta Tee ja kokeile oheisen mallin mukaisesti! Kirjoittele jotain sivulle. Esimerkiksi: 1. Kirjoitin tekstiä nuo kaksi riviä. Sitten aktivoin ensimmäisen rivin ja valitsin 2. Alapalkista tekstimuotoiluja 3. Kirjoitin lisää tekstiä ja raahasin jonkun kuvan kotikoneeni hakemistosta uudelle riville. Kuva oli tosi suuri, joten tuplaklikkasin sitä 4. ja muutin avautuneessa "Media Editor" ikkunassa sen skaalauksen 10% 5. Kirjoittelin lisää tekstiä ja muutin sen fonttikokoa ylävalikon "Format" valikosta. RapidWeaver-opas - 13

14 Tiedostojen lisääminen resursseihin Raahasin kotikoneeltani "FourBrothers.mp3" tiedoston RESOURCES aluelle koska haluan käyttää tätä tiedostoa jossain sivustollani. Kaikki linkitettävät tiedostot kannattaa kerätä tuohon RESOURCES alueelle, niihin on myöhemmin helppo linkittää. Tiedoston linkitys Koska minulla on nyt mp3-tiedosto linkitettävissä, kirjoitin hieman tekstiä ja 1. aktivoin tekstini "kuunneltavaksi" 2. klikkasin alavalikkopalkin linkkipainiketta RapidWeaver-opas - 14

15 3. ja avautuvassa linkki-ikkunassa valitsin URL-painikkeesta linkitettäväksi materiaaliksi resurssin "FourBrothers.mp3" Kun käyttäjä klikkaa linkkitekstiä, alkaa mp3-tiedosto soida. Sivuston linkitys 1. aktivoin tekstin "sivustolle" 2. klikkasin linkkipainiketta 3. ja linkki-ikkunassa kirjoitin Sibiksen www-osoitteen (huomaa täydellinen URL-kirjoitusmuoto eli osoite alkaa tekstillä Valitsin myös tuon linkin avautumaan omaan ikkunaan, jotta sen voi jättää näkyviin kun selailee alkuperäisellä sivustolla. RapidWeaver-opas - 15

16 RapidWeaver-opas - 16 Toisen sivun lisäys

17 Lisäämme toisen sivun Valitsemamme uusi sivutyyppi sopii hyvin suurien tiedostomäärien jakamiseen. Uuden sivun tekeminen RW ikkunan vasemmassa alanurkassa on iso plusmerkki (+). Painamalla sitä luot valitsemasi uuden sivutyypin. TEE: Valitsemme "File Sharing" sivutyypin ja annamme sivun nimeksi "Tiedostojako" File Sharing sivun rakenne 1. Ylös voit kirjoittaa mitä tahansa käyttäjälle osoitettua yleistä tekstiä. Tämä teksti tulee näkymään sivun yläosassa (laita loppuun pari tyhjää rivivaihtoa, nin saat tilaa) 2. + ikonia painamalla luot uuden jaettavan tiedostovalinnan RapidWeaver-opas - 17

18 3. määritä onko linkkisi tiedosto kiintolevylläsi (File), vaiko linkki internetin toiselle sivulle (External URL), oletusarvoisesti se on tiedosto 4. Source-kohtaa klikkamalla avautuu käyttöjärjestelmän tiedostohaku, josta voit valita varsinaisen tiedoston jonka haluat liittää 5. Title-sarakkeeseen tulee oletusarvoinen otsikkoteksti, jota voit muokata 6. Description-sarakkeeseen voit kirjoittaa täydentävää tekstiä liittyen ladattavaan tiedostoon Kohdan 2 plussaa painamalla saat lisää tiedostolatauksia. TEE: Hae vaikkapa joku PDF-tiedosto sekä muokkaa Title ja Description tekstejä. RapidWeaver-opas - 18

19 RapidWeaver-opas - 19 Sivun ulkoasut

20 Edit-näkymä Olet koko ajan ollut muokkausnäkymässä (Edit), jossa siis rakennat sivuja ja lisäät niihin materiaaleja. Edit-näkymästä kertoo ikkunan alaosassa oleva kynään siirretty liukukytkin: Voit koska tahansa siirtää tuon valitsimen "silmän" puolelle, jolloin näet sivusi esikatselutilassa (Preview). Esikatselutila pyrkii näyttämään sivun sellaiselta kuin se näyttää selaimella. Tässä tilassa ei voi muokata sivun sisältöjä! RapidWeaver-opas - 20

21 Preview-tila Valitsemme vasemmalta "Koti" sivun ja vaihdamme näkymäksi "silmän" eli esikatselutilan. Tältä sivumme tulee näyttämään selaimissa. Huomaamme, että oikealla puolella näkyy tarpeeton tyhjä sivupalkki (emme ole laittaneet sinne mitään). Poistamme tarpeettomasti tilaa vievän sivupalkin. TEE: 1. valitse sininen painike "Page Info" RapidWeaver-opas - 21

22 2. valitse välilehti "Styles" ja sieltä 3. avaa "Sidebar" josta aktivoit "Hide" TEE: Toista sama myös sivulle "Tiedostojako" Sivun ulkoasun vaihtoehtoja Ollessasi esikatselutilassa (se silmä), voit klikata ikkunan ylälaidasta kuvakepainiketta "Themes", jolloin sinulle avautuu monien eri ulkoasujen valintaluettelo. Kokeile eri vaihtoehtoja! Valintaluettelo poistuu, kun painat samaa "Themes" ikonipainiketta uudelleen. Huom! Kun olet vaihtanut ulkoasua, täytyy sinun taas huolehtia kunkin sivun yleisasetuksista ja sivupalkeista uudelleen ("Page Info" ikonipainikkeen takaa Page Inspector-valinnat)! RapidWeaver-opas - 22

23 Sivuston tallennus ja siirto RapidWeaver-opas - 23

24 Tallennus paikallisesti Sivusto kannattaa tallentaa paikallisesti johonkin omaan kansioon. Sieltä voit sitten avata selaimellasi index.html tiedoston (tuplaklikkaa tiedostoa) ja testata sen ulkoasua ja linkkejä. Muista, että sinun ei ole välttämätöntä viedä sivustoasi edes nettiin! Miksi? Koska moinen web-sivusto voidaan jakaa ystäville/oppilaille USB-tikulla ja he voivat katsella sitä kotona rauhassa ilman nettiyhteyttä. Tämä on hyvä pedagoginen keino jakaa monimediamateriaalia! Saitin vienti paikalliseen kansioon Olet varmaan jo tehnyt koneellesi jonkun kansion (vaikkapa Testisivusto). Ellet ole, tee se nyt. TEE: Luo koneellesi kansio ja anna sille nimeksi: Testisivusto Valitse sitten RW:n File-valikosta Export Site ja eteesi ponnahtaa huomautus, että Emme ole asettaneet sivustollemme perusosoitetta. Teemme sen nyt. Klikkaa OK-painiketta. Sivuston osoitteen asetus Valitse RW:n valikosta Site/Show Site Setup (tai näppäinlyhenne cmd-1) ja kirjoita kohtaan "Web Address" vaikkapa teksti " (nimessä ei ääkkösiä saatikka välilyöntejä) Joku nimi täytyy olla, jotta sivuston sisäiset linkitykset toimisivat. Huom! Tämän osoitteen EI tarvitse olla lopullinen osoite. Hoidetaan asia kuntoon myöhemmin. Kun nyt uudestaan valitset tuon File/Export Site niin taas RW huomauttaa, että tätä RW:n RapidWeaver-opas - 24

25 sivustodokumenttia ei ole nimetty ja tallennettu. Anna siis tälle RW:tiedostolle joku nimi (esim. testi) ja tallenna sivusto valitsemaasi hakemistoon (esim. sinne Testisivusto). Sivuston paikallinen testaus Mene nyt luomaasi kansioon "Testisivusto" (mikäli nimesit sen sellaiseksi). Tuplaklikata siellä olevaa "index.html" tiedostoa ja selaimesi avaa sen (Sibiksessä se avautuu Firefoxilla). Selaimen osoiterivillä näkyy osoite, joka alkaa tekstillä file:/// Se kertoo sen, että sivusto on koneellasi eikä internetissä (jolloin se alkaisi tekstillä ). Voit nyt rauhasssa testailla kaikkia toimintoja ja linkkejä. Jos löytyy korjattavaa, jatka sivuston muokkausta RW-ohjelmalla ja Exportoi se uudelleen sekä testaa taas uudelleen. RapidWeaver-opas - 25

26 Testatun sivustosi asetuksia Kun sivuston toiminta on moitteetonta paikallisesti kokeiltuna, voimme turvallisin mielin siirtää sen Internetiin. Sibelius-Akatemian web-palvelu toimii siten, että sinun amadeus.siba.fi -hakemistossa on kansio public_html. Kaikki sinne siirretty HTML-materiaali näkyy Internetissä. Sivuston web-asetukset TEE: Valitse RW:ssä Site/Show Site Setup ja kirjoita ikkunassa Web Address -kenttään seuraava osoite: ~ merkki saadaan Mac-koneella painamalla alt-näppäin alaspainettuna Å-kirjaimen oikealla puolella olevaa näppäintä. Osoitteen perään ei tarvitse kirjoittaa aloitussivun nimeä "index.html", koska index-sivu avautuu aina automaattisesti. Mikäli kuitenkin haluat hieman suojella sivustosi näkyvyyttä, voisit kirjoittaa tunnuksesi perään kenoviivalla erotettuna jonkun kansionimen, esim. kamaa/ RapidWeaver-opas - 26

27 Silloin täytyy katsojan kirjoittaa koko osoite voidakseen avata sivustosi oikeasta kansiosta ( Tämähän tietysti edellyttää, että olet luonut Cyberduckilla public_html kansiosi sisään tuon kansion. Voit jakaa ystäville sivustosi osoittetta myös muodossa: se näyttää hienommalta ;-) TEE: Muuta tarvittaessa kenttien Title, Slogan ja Footer sisältöjä! (vaikkapa: Title: tp47 tehtävät, Slogan: nimesi ja aineryhmäsi, Footer: mitä lystäät) Äsken asettamasi saittiasetukset määrittelevät nyt sivustosi osoitteen ja siellä näkyvät tiedot. RapidWeaver-opas - 27

28 Tiedostojen siirto palvelimelle Käytämme FTP-ohjelmaa Cyberduck siirtämään sivustomme palvelimelle sekä asettamaan tarvittavia oikeuksia. Voit hakea Cyberduck -ohjelman osoitteesta: Tiedostojen siirto Cyberduckilla Tiedostojen siirtoon soveltuu parhaiten erillinen ftp-toimintoa varten tehty tietokoneohjelma. FTP-ohjelmalla voidaan siirtää tiedostoja minkä tahansa laitteiden välillä kunhan niihin on vain käyttäjätunnukset ja salasanat. TEE: Asetettuasi RW-ohjelmassa sivusto-osoitteen kuntoon, käynnistä Cyberduck ja valitse sen valikosta File/New Browser Avautuneessa Cyberduckin selainikkunassa valitse "Open Connection" Kirjautuminen Amadeukselle Saat uuden valikko-ikkunan. TEE: 1. Valitse salattu ja turvallinen SFTP-yhteys (Secure FTP) RapidWeaver-opas - 28

29 2. Anna Sibelius-Akatemian palvelimen nimi (amadeus.siba.fi) 3. Kirjoita siban käyttäjätunnuksesi (eri kuin uniartsin!!!) 4. Kirjoita salasanasi TEE: Avautuneessa ikkunassa tuplaklikkaa kansio "public_html" auki. Tiedostojen siirto paikalliselta koneelta Sibelius-Akatemian Amadeus-palvelimelle Kun Cyberduckissa on haluttu kansio avoinna, voit raahata sinne tiedostoja koneeltasi. TEE: Avaa kansiosi "Testisivusto" ja aktivoi siellä olevat tiedostot (cmd-a tai Edit/Select All) 1. tartu johonkin aktivoiduista tiedostoista 2. ja raahaa ne Cyberduckissa olevaan public_html kansion ikkunaan. Seuraavassa lisätietoa heille, jotka halusivat laittaa sivustonsa public_html kansiossa olevan toisen kansion sisään. Muuten voit hypätä suoraan kohtaan "Käyttöoikeuksien asettaminen" RapidWeaver-opas - 29

30 Uuden kansion luonti palvelimelle Jos haluat luoda palvelimelle (Amadeus) uuden kansion, niin 1. Avaa Cyberduckin selainikkunan mutteri-ponnahdusvalikko 2. Valitse kohta "New Folder" Mikäli et jaksa muistaa yllä olevaa ikonia, niin saat komennon myös Cyberduckin yläpalkin valikosta FIle Anna nimeämisikkunassa kansiollesi nimi (yrita valttaa skandeja, koska Internet ei tykkaa niista). Näin olet luonut public_html kansioosi uuden kansion. RapidWeaver-opas - 30

31 Kansion tuhoaminen palvelimelta Aktivoi haluttu kansio hiiren kakkospainikkeella ja avautuvasta ponnahdusvalikosta valitset "Delete" tai aktivoi kohde klikkaamalla kerran sen päällä ja valitse Cyberduckin yläpalkin valikosta File/Delete Vastaa sitten Cyberduckin esittämään kysymykseen Delete (harkitse, tätä ei voi perua!). Käyttöoikeuksien asettaminen Palvelimilla on yleensä annettu eri tiedostoille/hakemistoille erilaisia oikeuksia jotka sitten sallivat eri käyttäjille erilaisia toimintaoikeuksia (lukea, kirjoittaa, suorittaa). Normaalisti sinun ei tarvitse välittää oikeuksista (koska sinulla on kaikki oikeudet omiin tiedostoihin/kansioihin). RapidWeaver-opas - 31

32 Kun teet omia WWW-sivuja, niin silloin on syytä varmistaa, että kaikkiin sivuihin sekä niiden sisältämiin tiedostoihin on annettu UNIX oikeudet 755 (joskus 644 riittää eli Execute on kaikkialta pois päältä). Katso yllä olevaa kuvaa, siinä on uudelle kansiolle annettu www-selauksen vaatimat oikeudet! Mikäli annat vasta myöhemmin nämä oikeudet public_html kansiollesi, klikkaa kohtaa "Apply changes recursively". Tällöin kaikki kansion jo sisältämät tiedostot saavat nämä oikeudet. 1. Sinä (Owner) saat lukea, kirjoittaa sekä ajaa ohjelmia 2. Ryhmät (Group) saavat vain lukea ja ajaa ohjelmia 3. Ulkomaailma (Others) saa vain lukea ja ajaa ohjelmia TEE: Asetamme kansiolle public_html sellaiset oikeudet, että sisältö näkyy Internetissä: a) palaa Cyberduckissa takaisinpäin tasolle, jossa näet kansion public_html b) klikkaa hiiren kakkospainikkeella Cyberduck-ikkunassa kansiota public_html c) valitse avautuvassa ponnahdusvalikossa valinta Info d) näpäytä välilehteä Permissions e) tee kuvan osoittamat valinnat tai kirjoita kenttään "UNIX Permissions" numeroksi 755 f) paina painiketta Apply changes recursively Lopullinen testaus Siirrettyäsi koneeltasi kansion "Testisisvusto" sisällön Amadeus-palvelimelle public_html kansioon ja asetettuasi sen oikeudet arvoon 755, voitkin jo kokeilla kuinka sivustosi näkyy netissä! TEE: Avaa joku selain ja kirjoita sen osoitekenttään teksti: (mikäli laitoit vielä lisäkansion, niin Mikäli kaikki on sujunut oikein, näet nyt sivustosi Internetissä (kuten kaikki muutkin, jotka tietävät osoitteen). Jos taas saat ikkunan, jossa sanotaan, että Permissions denied t.m.s., niin käy korjaamassa public_html oikeudet! Lähetä myöhemmin minulle s-postissa vain tuo nettiosoite sekä nimesi ja aineryhmäsi tiedot. Kiitos mielenkiinnosta! Kommentoi jos jaksat: RapidWeaver-opas - 32