Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Lataa koneellesi Xampp.zip. Pura paketti ja siirrä Xampp-kansio c:-aseman juureen. Siirry Xampp-kansioon ja käynnistä ohjelma xampp-control.exe. Käynnistä Apache ja MySql Start-painikkeilla. Avaa selain ja kirjoita osoitekenttään localhost. Paikallisen Joomlan käyttäjätunnus ja salasana ovat joppe.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4

Lataa Xampp.zip, pura paketti ja siirrä kansio xampp c:-aseman juureen. Siirry xampp-kansioon ja käynnistä ohjelma xampp-control.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Lataa koneellesi Xampp.zip. Pura paketti ja siirrä Xampp-kansio c:-aseman juureen. Siirry Xampp-kansioon ja käynnistä ohjelma xampp-control.exe. Käynnistä Apache ja MySql Start-painikkeilla. Avaa selain ja kirjoita osoitekenttään localhost. Paikallisen Joomlan käyttäjätunnus ja salasana ovat joppe.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4

Lataa Xampp.zip, pura paketti ja siirrä kansio xampp c:-aseman juureen. Siirry xampp-kansioon ja käynnistä ohjelma xampp-control. Käynnistä Apache ja MySql. Käynnistä selain ja kirjoita osoitekenttään localhost. Hallintotunnus ja salasana on joppe.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Lataa koneellesi Xampp.zip. Pura paketti ja siirrä Xampp-kansio c:-aseman juureen. Siirry Xampp-kansioon ja käynnistä ohjelma xampp-control.exe. Käynnistä Apache ja MySql Start-painikkeilla. Avaa selain ja kirjoita osoitekenttään localhost. Paikallisen Joomlan käyttäjätunnus ja salasana ovat joppe.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Tutustumme Joomla-julkaisujärjestelmään. Lataa Xampp.zip, pura paketti ja siirrä kansio xampp c:-aseman juureen. Siirry xampp-kansioon ja käynnistä ohjelma xampp-control. Käynnistä Apache ja MySql. Käynnistä selain ja kirjoita osoitekenttään localhost. Hallintotunnus ja salasana on joppe.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Lataa koneellesi Xampp.zip. Pura paketti ja siirrä Xampp-kansio c:-aseman juureen. Siirry Xampp-kansioon ja käynnistä ohjelma xampp-control.exe. Käynnistä Apache ja MySql Start-painikkeilla. Avaa selain ja kirjoita osoitekenttään localhost. Paikallisen Joomlan käyttäjätunnus ja salasana ovat joppe.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Tutustumme Joomla-julkaisujärjestelmään. Lataa Xampp.zip, pura paketti ja siirrä kansio xampp c:-aseman juureen. Siirry xampp-kansioon ja käynnistä ohjelma xampp-control. Käynnistä Apache ja MySql. Käynnistä selain ja kirjoita osoitekenttään localhost. Hallintotunnus ja salasana on joppe.

MERB09 harjoitustyö 5

Clovershop-verkkokauppaohjelmisto ja näyttö jaksossa 4a.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Lataa koneellesi Xampp.zip. Pura paketti ja siirrä Xampp-kansio c:-aseman juureen. Siirry Xampp-kansioon ja käynnistä ohjelma xampp-control.exe. Käynnistä Apache ja MySql Start-painikkeilla. Avaa selain ja kirjoita osoitekenttään localhost. Paikallisen Joomlan käyttäjätunnus ja salasana ovat joppe.

 

 

Sivulla on virhe. Kuka löytää vian?

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Lataa koneellesi Xampp.zip. Pura paketti ja siirrä Xampp-kansio c:-aseman juureen. Siirry Xampp-kansioon ja käynnistä ohjelma xampp-control.exe. Käynnistä Apache ja MySql Start-painikkeilla. Avaa selain ja kirjoita osoitekenttään localhost. Paikallisen Joomlan käyttäjätunnus ja salasana ovat joppe.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4

Lataa Xampp.zip, pura paketti ja siirrä kansio xampp c:-aseman juureen. Siirry xampp-kansioon ja käynnistä ohjelma xampp-control.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Lataa koneellesi Xampp.zip. Pura paketti ja siirrä Xampp-kansio c:-aseman juureen. Siirry Xampp-kansioon ja käynnistä ohjelma xampp-control.exe. Käynnistä Apache ja MySql Start-painikkeilla. Avaa selain ja kirjoita osoitekenttään localhost. Paikallisen Joomlan käyttäjätunnus ja salasana ovat joppe.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4

Lataa Xampp.zip, pura paketti ja siirrä kansio xampp c:-aseman juureen. Siirry xampp-kansioon ja käynnistä ohjelma xampp-control. Käynnistä Apache ja MySql. Käynnistä selain ja kirjoita osoitekenttään localhost. Hallintotunnus ja salasana on joppe.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Lataa koneellesi Xampp.zip. Pura paketti ja siirrä Xampp-kansio c:-aseman juureen. Siirry Xampp-kansioon ja käynnistä ohjelma xampp-control.exe. Käynnistä Apache ja MySql Start-painikkeilla. Avaa selain ja kirjoita osoitekenttään localhost. Paikallisen Joomlan käyttäjätunnus ja salasana ovat joppe.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Tutustumme Joomla-julkaisujärjestelmään. Lataa Xampp.zip, pura paketti ja siirrä kansio xampp c:-aseman juureen. Siirry xampp-kansioon ja käynnistä ohjelma xampp-control. Käynnistä Apache ja MySql. Käynnistä selain ja kirjoita osoitekenttään localhost. Hallintotunnus ja salasana on joppe.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Lataa koneellesi Xampp.zip. Pura paketti ja siirrä Xampp-kansio c:-aseman juureen. Siirry Xampp-kansioon ja käynnistä ohjelma xampp-control.exe. Käynnistä Apache ja MySql Start-painikkeilla. Avaa selain ja kirjoita osoitekenttään localhost. Paikallisen Joomlan käyttäjätunnus ja salasana ovat joppe.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Tutustumme Joomla-julkaisujärjestelmään. Lataa Xampp.zip, pura paketti ja siirrä kansio xampp c:-aseman juureen. Siirry xampp-kansioon ja käynnistä ohjelma xampp-control. Käynnistä Apache ja MySql. Käynnistä selain ja kirjoita osoitekenttään localhost. Hallintotunnus ja salasana on joppe.

MERB09 harjoitustyö 5

Clovershop-verkkokauppaohjelmisto ja näyttö jaksossa 4a.

 

 

Tarvikkeet

• Sivuston aihe
• Sivuston suunnitelma:
• Sivut ja niiden väliset linkit
• Sivuston layout (comp)
• Tekstit
• Kuvat ja videot
• Html-editori
• Kuvankäsittelyohjelma
• Palvelintilaa
• Ftp-ohjelma
• Käyttäjätunnukset

Työskentely DreamWeawerilla

Harjoitusmateriaali
Palstoitusesimerkki class.
Palstoitusesimerkki div.
Taulukkotaittomalleja
DreamWeaverin malli
lohkotaitto.html
Forum.zip
menu.zip

Tehtävät

1. Tee uusi sivusto ohjeen mukaan (poissaolleille).
2. Rakenna matkailusivusto valmiiksi. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.
3. Muuta mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
4. Sivulinkit voi myös luoda CSS Menu Builderilla. Testaa.
5. Muokkaa jostain ilmaisesta sivumallista Dreamweaver Template.
6. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).
7. Tee yhdelle sivulle haitari ( Insert, Spry, Spry Accordion ) ja toiselle sivulle välilehdet ( Insert, Spry, Spry Tabbed panels ).
8. Tee kuvagalleria Lightboxilla.
9. Tee sivu absoluuttisella asemoinnilla. Insert, Layout Objects, AP Div.
10. Kokeile vaihtuvaa kuvaa Insert, Image Objects, Rollover Image ja graafista navigointivalikkoa. Insert, Image Objects, Navigation Bar.

MERA09 suunnittelutehtävä

• Valitse 8 matkakohdetta
• Piirrä sivuston ulkonäkösuunnitelma (layout)
• Kirjoita tekstit
• Valitse kuvat
• Liitä kaikki word-asiakirjaan ja palauta suunnitelma osoitteeseen heikkilaakso@yahoo.com

MERB09 harjoitustyö 1

Tee kuvitteelliselle yritykselle sivusto, jossa on ainakin etusivu mainosbannereineen (index.html), yrityksen esittelysivu, tuotesivu (vähintään 10 tuotetta), historiikkisivu ja yhteystietosivu, jossa karttalinkki. Sivujen välillä tulee olla toimiva linkitys.

Suunnittele sivusto vaikkapa kynällä ja paperilla ennen kuin alat toteuttaa sitä.

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Käytä tuotteiden ulkonäön suunnitteluun Illustratoria ja Photoshopia, siis omaa materiaalia. Tallenna kuvat joko jpg- tai png-muodossa. Tuottteista voi tehdä flash-animaatioita joko tuomalla kuvat leikepöydän avulla tai File, Import, Import to stage.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Phototshop
• Illustrator
• Bannereiden toteutus
• Flash

Jos ei onnistu, harjoittele.

MERB09 harjoitustyö 2

Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Käytä sivustossa tehtävien 4-8 työkaluja. Tee esimerkiksi aikataulusivulle haitari ja eri lavoille välilehdet. Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.

MERB09 harjoitustyö 3

Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.

MERB09 harjoitustyö 4 Joomla

Lataa koneellesi Xampp.zip. Pura paketti ja siirrä Xampp-kansio c:-aseman juureen. Siirry Xampp-kansioon ja käynnistä ohjelma xampp-control.exe. Käynnistä Apache ja MySql Start-painikkeilla. Avaa selain ja kirjoita osoitekenttään localhost. Paikallisen Joomlan käyttäjätunnus ja salasana ovat joppe.