1. ábra Mester oldal alapján különböző témákkal létrehozott webhely oldalai

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "1. ábra Mester oldal alapján különböző témákkal létrehozott webhely oldalai"

Fanni Orbán
8 évvel ezelőtt
Látták:

1 Áttekintés A feladat megvalósításához Master Page (mester oldalt) oldalt készítünk. A mester oldalban a változó tartalom helyét ContentPlaceHolder vezérlő(k) jelölik. Oldalanként különböző Themes-t (témákat) használunk, egy vezérlőhöz pedig Skin-t készítünk. Szükségünk lesz továbbá a követkő vezérlőkre: Table, Menu. Az aktuális dátum megadásához felhasználjuk a DateTime osztályt. A gyakorlat feladata Készítsük el személyes honlapunkat (tartalmazzon legalább három aloldalt például család, hobbi és munka témakörökben), melyeknek felépítése és szerkezete egységes (megegyezik a főoldallal), de az egyes témák kinézete (színek, betűk, stb.) eltérőek. A honlapon legyen egy vezérlő, amelyik az aktuális dátumot mutatja és egyéni kinézetettel (skin) rendelkezik. 1. ábra Mester oldal alapján különböző témákkal létrehozott webhely oldalai Probléma Tervezés Egy több oldalból álló webalkalmazás esetén előnyös, ha minden oldalunk felépítése (vezérlők elrendezésére, az oldal szerkezetére gondolunk) közel azonos, például minden oldalon elérhető a menü. Ezért készítünk egy Master Page oldalt, melyből a többi oldalt (Content Page) származtatjuk (sablonként is tekinthetünk rá). A mester oldalra elhelyezünk egy Menu vezérlőt, mellyel a Család, Munka, Hobbi oldalakra léphetünk. Ezen oldalakat a Master Page oldalból, származtatva készítjük el. Ez azért előnyös, mert minden oldal, ami a Master Page alapján készül, tartalmazni fogja a Master Page oldal elemeit. Amennyiben bármilyen változtatásra van szükség, amelynek minden oldalon látszódnia kell, elég azt a mester oldalon módosítani. FONTOS! Minden vezérlőt, amit a mester oldal alapján létrehozott oldalon szeretnénk elhelyezni, a Content Page oldalon lévő Content vezérlőben helyezzünk el, mely egy Master Page-beli ContentPlaceHolder-rel van kapcsolatban. Ha a szerkezet azonos, akkor a kinézetet (stílust, témát) is érdemes egységesíteni. A Theme (téma) azonban sokkal több, mint a weboldalak kinézete kapcsán korábban tanult CSS. Természetesen a

Az aktuális dátum megadásához felhasználjuk a DateTime osztályt.

NET Empty Web Site sablon alapján, majd adjunk hozzá egy Master Page oldalt. 2. ábra Új Master Page létrehozása Egy Master Page hasonló, mint a már ismert Web Form, kiterjesztése MASTER.

2 CSS-t is magába foglalja, de egyes vezérlőinknek (Button, Label, stb.) egyéni kinézetet (Skin) is adhatunk. Honlapunkhoz készítsünk egy általános Theme-t, majd minden oldalon ennek az alapértelmezett témának egy változatát állítsuk be. Megvalósítás Készítsünk egy webalkalmazást az ASP.NET Empty Web Site sablon alapján, majd adjunk hozzá egy Master Page oldalt. 2. ábra Új Master Page létrehozása Egy Master Page hasonló, mint a már ismert Web Form, kiterjesztése MASTER. A markup kódban a Page direktíva helyett a következő jelenik meg az első sorban: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MesterOldal.master.cs" Inherits="MesterOldal" %> Figyeljük meg továbbá, hogy a VS2010 automatikusan elhelyez a mester oldal markup kódjában kettő ContentPlaceHolder-t, egyet a Header tartalomnak, egyet pedig az oldal tartalmának. Természetesen hozzáadhatunk az oldalhoz további ContentPlaceHolder-eket is. Ekkor a tartalom oldal annyi részt tartalmaz, ahány PlaceHolder van a mester oldalon. <asp:contentplaceholder id="infocontentplaceholder" runat="server"> </asp:contentplaceholder> Helyezzünk el egy menüt (Navigation / Menu) a mester oldalon. Készítsük el a 3 menüpontot, melyek majd a megfelelő aloldalakra mutatnak.

3. ábra Menü elhelyezése és beállítása a mester oldalon Készítsünk egy főoldalt (index.aspx) a Master Page oldal alapján. Adjuk meg, hogy melyik Master Page oldal-t szeretnénk fölhasználni. 4.

Az így létrehozott aspx oldal @Page direktívájában megjelenik, hogy melyik Master Page az alapja: <%@ Page Title="" Language="C#" MasterPageFile="~/template.

3 3. ábra Menü elhelyezése és beállítása a mester oldalon Készítsünk egy főoldalt (index.aspx) a Master Page oldal alapján. Adjuk meg, hogy melyik Master Page oldal-t szeretnénk fölhasználni. 4. ábra Web Form készítése mester oldal alapján FONTOS! Ne felejtsük el beállítani, hogy melyik Master Page-t szeretnénk használni. Az így létrehozott aspx direktívájában megjelenik, hogy melyik Master Page az alapja: <%@ Page Title="" Language="C#" MasterPageFile="~/template.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Fel2.Index" %> A Master Page oldal alapján készült oldalak esetében az adott oldalra vonatkozó specifikus tartalmat a Content vezérlőben helyezzük el, amely össze van kapcsolva a mester oldal ContentPlaceHolder vezérlőjével, ahogy azt az alábbi markup kódban látszik. <asp:contentplaceholder id="head" runat="server"> </asp:contentplaceholder> <asp:content ID="HeadContent" ContentPlaceHolderID="head" Runat="Server"> Master Page <asp:label runat="server" Text="Üdvözöllek a honlapomon!" Font-Size="Large"> </asp:content> Content Page

Amikor az adott oldal legenerálódik, akkor a Master Page oldalba behelyettesítésre kerül a Content tartalma és végül a Master Page az adott oldalhoz tartozó tartalommal kerül át HTML kódba.

4 Amikor az adott oldal legenerálódik, akkor a Master Page oldalba behelyettesítésre kerül a Content tartalma és végül a Master Page az adott oldalhoz tartozó tartalommal kerül át HTML kódba. Állítsuk be, hogy a megfelelő menüpontok a megfelelő oldalakra mutassanak (Menu Item Navigate URL tulajdonsága). Ne felejtsük el, hogy elegendő ezt a beállítást a Master Page-en beállítanunk. Írjunk minden oldalra (index, munka, hobbi, család) valamilyen tartalomhoz illő címet és szöveget. Ezeket egy Label-ben a megfelelő PlaceHolder-hez tartozó Content vezérlőben helyezzük el. A címet a head Content-ben, az információkat pedig ContentPlaceHolder1-ben. Az hobbi.aspx esetén: <asp:content ID="Content1" ContentPlaceHolderID="head" runat="server"> <asp:label runat="server" Text="Hobbim!" Font-Size="Large"> </asp:content> <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <asp:label ID="Label2" runat="server" Text="Label">Ez a hobbim! </asp:content> Hasonlóan járjunk el a többi oldal esetében is. Az index.aspx oldalt állítsuk be kezdőoldalnak. Nézzük meg az eddigi munkánk eredményét. 5. ábra Az index.aspx oldal Készítsük el az alapértelmezett Theme-t az oldalainkhoz. Adjunk a solution-höz ASP.NET Folder-t. Nevezzük el alap -nak. Ehhez a mappához adjunk egy Style Sheet-et. Ebben a CSS fájlban állítsuk be, hogy az oldalak háttérszíne halványszürke legyen.

Írjunk minden oldalra (index, munka, hobbi, család) valamilyen tartalomhoz illő címet és szöveget. Ezeket egy Label-ben a megfelelő PlaceHolder-hez tartozó Content vezérlőben helyezzük el.

5 A stílusok leírását szerkesztő segítségével is megadhatjuk. 6. ábra CSS leírás szerkesztő ablaka Miután elkészítettük a stílus leírását, azt meg is kell adnunk az oldalon, amelyiken használni szeretnénk. Ezt az oldal Page direktívájában adhatjuk meg a Theme attribútum segítségével. <%@ Page Title="" Language="C#" MasterPageFile="~/MesterOldal.master" AutoEventWireup="true" CodeBehind="Csalad.aspx.cs" Inherits="Csalad" Theme= Alap %> FONTOS! Ilyenkor nem a CSS nevét, hanem az egész Theme mappa nevét kell megadni, ahol a CSS fájl is található. Amennyiben mindegyik oldalunkra szeretnénk megadni egy adott Theme-t, akkor azt a web.config fájlban érdemes beállítani a következőképpen: <configuration> <system.web> <pages theme="alap" /> </system.web> </configuration> Nekünk a három aloldalunk Theme-je más kell hogy legyen. Hozzuk létre az ehhez tartozó Theme-ket (ThemeCsalad, ThemeMunka, ThemeHobbi néven), majd vagy beállítjuk kézzel, vagy megváltoztatjuk az oldal töltődésekor, hogy az adott oldalhoz milyen téma tartozzon. Ezt a Page_PreInit eseménykezelőjében kell megtennünk, a Page osztály Theme tulajdonságának segítségével. Már csak a dátumot tartalmazó cimkét (Label-t) kell létrehozni - érdemes a mester oldalon elhelyezni. Ennek a vezérlőnek fogunk egyedi kinézetet (Skin) adni. A már elkészített App_Themes Alap almappájához adjunk egy skin fájlt (kiterjesztése.skin). Adjunk szürke hátteret a Label-nek. Ez azt jelentené, hogy minden Label szürke lesz. Mi azonban csak a dátumot tartalmazó címkét szeretnénk ezzel az egyedi kinézettel felruházni. Módosítsuk a skin fájlt és a SkinId megadásával tegyük hivatkozhatóvá ezt az egyedi kinézetet. <asp:label runat="server" BackColor="Gray">

Ezt az oldal Page direktívájában adhatjuk meg a Theme attribútum segítségével. <%@ Page Title="" Language="C#" MasterPageFile="~/MesterOldal.master" AutoEventWireup="true" CodeBehind="Csalad.aspx.

Ehhez használjuk a DateTime osztályt a Code-Behind fájlban. <asp:label ID="DateLabel" runat="server" Text="2010.06.10." SkinID="datum"> </ asp:label> Label1.Text = Convert.ToString(DateTime.

6 A mester oldal markup kódjában a dátumot megjelenítő címkét lássuk el a SkinId-val. <asp:label runat="server" SkinID="datum" BackColor="Gray"> Már csak az hiányzik, hogy a dátum automatikusan frissüljön az oldal betöltődésekor. Ehhez használjuk a DateTime osztályt a Code-Behind fájlban. <asp:label ID="DateLabel" runat="server" Text=" " SkinID="datum"> </ asp:label> Label1.Text = Convert.ToString(DateTime.Now.Year) + ". " + Convert.ToString(DateTime.Now.Month) + ". " + Convert.ToString(DateTime.Now.Day); A következőkben az ASP.NET-es webalkalmazások készítésénél használhatjuk az ASP.NET Web Site sablont. Az így létrejövő solution több egyéb mellett tartalmaz weboldalt, mester oldalt és témát is. 7. ábra ASP.NET Web Site sablonnal generált webhely részei

Hasonló dokumentumok

Webshop készítése ASP.NET 3.5 ben I.

Webshop készítése ASP.NET 3.5 ben I. - Portál kialakíása - Mesteroldal létrehozása - Témák létrehozása Site létrehozása 1. File / New Web site 2. A Template k közül válasszuk az ASP.NEt et, nyelvnek (Language)