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.

 

 

 

 

 

Linkit
Sivut.web
XHTML/CSS-opas, asettelu
MV-net
Petepeweb
Kokemuksia ja näkemyksiä digimediasta
Taulukkotaitto

Johdatus käyttöliittymän visuaaliseen suunnitteluun

Dreamweaver Developer Center
Dreamweaver CS4 Tutorial
Dreamweaver MX opas

LayOutGala
Free CSS templates
CSS Zen Garden
CSS Menu Builder
CSS Menu Maker
SourceTec, kaupallinen
Glish

Favicon

Lightbox
J Album
A permanent image click gallery
Kuvagalleriat
Icons
Ramasa metatags

KompoZer
Charles Cook online
Picasa
Sumo
The Gimp
K-free

Wix