VisualStudio Pikaopas, osa 1: WEB sivujen suunnittelu

Save this PDF as:

WORD PNG TXT JPG

Koko: px

Aloita esitys sivulta:

Download "VisualStudio Pikaopas, osa 1: WEB sivujen suunnittelu"

Riitta-Liisa Halttunen
2 vuotta sitten
Katselukertoja:

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.

Projektivalinta antaa työasemapohjaisten sovellusten valikot. 2. Voit valita, mitä ryhdyt toteuttamaan. Valitse Empty Web Site.

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

Lisätään ensimmäinen komponentti, XHTML sivu.

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ä).

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ä.

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.

Sivujen testaaminen Voit pikatestata sivun näkyvyyden Debug painikkeella: Sovellus kysyy: Tässä vaiheessa voit

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.

microsoft.com/en us/library/ms972337.aspx Lopuksi ÄLKÄÄ ryhtykö vielä toteuttamaan sivustoa täystehoisesti.

Samankaltaiset tiedostot

VisualStudio Pikaopas, osa 1: WEB-sivujen suunnittelu

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.