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
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
MER09 harjoitustyö 1
Rakenna matkailusivusto. 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 piirrä siihen hotspotit linkkeineen. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com.
MER09 harjoitustyö 2
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. Tee sivulinkit CSS Menu Builderilla. Tee kuvagalleria Lightboxilla.
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
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
MER09 harjoitustyö 3
Suunnittele sivusto jollekin tapahtumalle esimerkiksi rockfestivaalille. Tee valikko ( Insert, Spry, Spry Menu Bar ). Tee esimerkiksi aikataulusivulle haitari ( Insert, Spry, Spry Accordion ) ja eri lavoille välilehdet ( Insert, Spry, Spry Tabbed panels ). Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtubevideoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintolatarjontaa ym.
MER09 harjoitustyö 4
Tee sivusto täysin omasta materiaalista. Käytä joko DreamWeaverin työkaluja tai Free CSS templates, CSS Menu Builder,CSS Menu Maker ja Lightbox.
MER09 harjoitustyö 5 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.Tutustu ohjelmistoon ja tee yksinkertainen sivusto.