VisualStudio Pikaopas, osa 1: WEB-sivujen suunnittelu

Transkriptio

1 HAAGA-HELIA ammattikorkeakoulu ict2td005 Ohjelmiston suunnittelutaito Sivu 1 / 5 VisualStudio Pikaopas, osa 1: WEB-sivujen suunnittelu Tämä pikaopas opastaa käyttämään VisualStudion web-sivujen suunnitteluominaisuuksia. 1. Valitse File: Project: sovellukset ovat merkki- tai perinteisiä graafisia asiakas-palvelinsovelluksia. WebSite: selainsovellukset File: tiedoston luominen Project From Existing code: muokataan olemassa olevasta sovelluksesta 2. Valitse Empty Web Site. tätä käytämme web-sovellusten toteuttamiseen. Location: File System Language: Visual C# C: valitse sopiva hakemisto Poikkeuksellisesti talletetaan kaikki dokumentaatio C-levylle, omaan käyttäjähakemistoon. VS ei pysty ajamaan sovellusta myyltä verkon yli. Talleta sovelluksesi tuntien lopussa joko myylle tai muistitikulle.

2 HAAGA-HELIA ammattikorkeakoulu ict2td005 Ohjelmiston suunnittelutaito Sivu 2 / 5 Eteesi aukeaa nyt työskentelynäkymä: Oikeassa ruudussa näkyvät sovelluksen muodostavat komponentit. Niitä ei vielä ole tehty. Lisätään ensimmäinen komponentti, HTML-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 dokumenttivalintaikkunan:

3 HAAGA-HELIA ammattikorkeakoulu ict2td005 Ohjelmiston suunnittelutaito Sivu 3 / 5 Valitse HtmlPage. Voit tässä nimetä sivun. Valitse Design-näkymä: Vasemmassa reunassa näet kaikki gui-komponentit, joita voit html-sivulla käyttää. Nyt voit suunnitella perinteisen HTML/XHTML-sivun. Huomaa, että rivinvaihdot, sisennykset yms tehdään tyyleinä, attribuuttimääritelminä jne. kooditilassa. Seuraavaksi lisää harjoitussivustoon ASP-sivu (dokumentti-ikkunassa Web Form). Nyt ToolBoxissa näkyvät ensimmäisenä ASP-kontrollit (HTML:n tilalla on Standard). Valitse taas Design-tila, voit ryhtyä lisäämään komponentteja sivulle. Properties-ikkuna sivun oikeassa alareunassa on erittäin hyödyllinen. Sitä käyttäen voit nimetä kontrollit järkevästi ja määrittää niiden ominaisuudet. Sivuston ulkoasusuunnitteluun perehdymme myöhemmin. Tekniikoita on monia: - StyleSheet (tyylisivu) - MasterPage (pääsivu) - Themes - Skins Sivuston rakenne Aloitussivu, joko.asp - tai.html- tyypinen sivuston sivuston ominaisuudet sivuston ominaisuudet ominaisuudet Sisältösivu1, yleensä.asp Sisältösivu2, yleensä.asp SisältösivuN, yleensä.asp

4 HAAGA-HELIA ammattikorkeakoulu ict2td005 Ohjelmiston suunnittelutaito Sivu 4 / 5 Kun lisää komponentteja sovellukseesi, näet ne oikeanpuoleisessa ikkunassa: 3. 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.

5 HAAGA-HELIA ammattikorkeakoulu ict2td005 Ohjelmiston suunnittelutaito Sivu 5 / 5 Sovelluksen ajaminen käynnistää paikallisen web-palvelimen. Löydät kuvakkeen informaatioriviltä oikeasta alalaidasta: 4. Vinkkejä Visual Studion käyttöön opintojaksollamme Voit opiskella XML:ää, XHTML:ää ja ASP-teknologiaa : Erinomainen perustaitojen sivusto: Microsoftin ASP Tutorial 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.