VisualStudio Pikaopas, osa 1: WEB sivujen suunnittelu

Transkriptio

1 HAAGA HELIA/IltaTiko ICT2TD005: Ohjelmisto suunnittelutaito 1 VisualStudio Pikaopas, osa 1: WEB sivujen suunnittelu Tämä pikaopas opastaa käyttämään VisualStudion web sivujen suunnittelu ja toteutusominaisuuksia. 1. Valitse File New Web Site. Projektivalinta antaa työasemapohjaisten sovellusten valikot. 2. Voit valita, mitä ryhdyt toteuttamaan. Valitse Empty Web Site. HUOMAA myös Location ja Language, ne täytyy valita asianmukaisiksi. Poikkeuksellisesti talletetaan kaikki dokumentaatio C levylle, omaan käyttäjähakemistoon. VS ei pysty ajamaan sovellusta myyltä verkon yli.

2 HAAGA HELIA/IltaTiko ICT2TD005: Ohjelmisto suunnittelutaito 2

3 HAAGA HELIA/IltaTiko ICT2TD005: Ohjelmisto suunnittelutaito 3 3. Eteesi aukeaa työskentelynäkymä: Oikeassa ruudussa näkyvät sovelluksen muodostavat komponentit. Niitä ei vielä ole tehty. Lisätään ensimmäinen komponentti, XHTML sivu. Voit tehdä sen joko: File New File valikkovalinnan tai klikkaamalla hiiren oikeata näppäintä WebSite4:n kohdalla, jolloin valitse Add new Item Lopputulos on sama. Näet kohdevalintaikkunan: Valitse HtmlPage. Voit tässä nimetä sivun, esimerkiksi Pyorasuunnitelma.htm

4 HAAGA HELIA/IltaTiko ICT2TD005: Ohjelmisto suunnittelutaito 4 4. Valitse Design näkymä: Vasemmassa reunassa näet kaikki gui komponentit, joita voit html sivulla käyttää. Vaihtoehto: Jos haluat lähteä toteuttamaan pyöräsuunnitelma sivua Fillariverstas websovellusta varten, kannattaa valita suunnitelmasivuksi (kohta 3) Web Form. Tämä valinta luo sovellukseen.asp sivupohjan (Active Server Page) jotka ovat Fillariverstassovelluksen sivupohjia. Web sovelluksen rakenne voi olla esimerkiksi: Aloitussivu, joko.asp tai.html tyypinen Sisältösivu1, yleensä.asp Sisältösivu2, yleensä.asp SisältösivuN, yleensä.asp Sivun toiminnallinen toteutus, C# komponentti Sivun toiminnallinen toteutus, C# komponentti Sivun toiminnallinen toteutus, C# komponentti.asp sivun voit toteuttaa samalla tavalla design tilassa kuin html sivun. Molemmissa tapauksissa joudut lisäämään myös omaa koodiasi sivustoon, esimerkiksi rivinvaihto täytyy toteuttaa tagilla (merkinnällä).

5 HAAGA HELIA/IltaTiko ICT2TD005: Ohjelmisto suunnittelutaito 5 Kun lisää komponentteja sovellukseesi, näet ne oikeanpuoleisessa ikkunassa: 5. Sivujen testaaminen Voit pikatestata sivun näkyvyyden Debug painikkeella: Sovellus kysyy: Tässä vaiheessa voit valita Run without debugging. Tällöin sivujasi ei validoida, eli niissä voi olla virheitä ja lopputulos selaimessa yllättää. Tavallisesti rakennamme ensin sovelluksen (Build valikko) ja sen jälkeen ajetaan sivusto.

6 HAAGA HELIA/IltaTiko ICT2TD005: Ohjelmisto suunnittelutaito 6 Sovelluksen ajaminen käynnistää paikallisen web palvelimen. Löydät kuvakkeen informaatioriviltä oikeasta alalaidasta: 6. Vinkkejä Visual Studion käyttöön opintojaksollamme Voit opiskella XML:ää, XHTML:ää ja ASP teknologiaa : Erinomainen perustaitojen sivusto: Microsoftin ASP Tutorial us/library/ms aspx Lopuksi ÄLKÄÄ ryhtykö vielä toteuttamaan sivustoa täystehoisesti. Nyt voitte miettiä sommittelua, komponentteja, millaisia navigointimahdollisuuksia käyttäjälle tarjotaan jne. Jotta sivuston toteutus sujuu jouheasti ja lopputulos toimii käyttäjän näkökulmasta hyvin, tulemme opiskelemaan vielä ylemmän tason, koko sovelluksen ulkoasuun ja toiminnallisuuteen vaikuttavia piirteitä, mm. CSS:ää ja MasterPage tekniikkaa.