Stílus, mesteroldal, témák

Az előadások a következő témára: "Stílus, mesteroldal, témák"— Előadás másolata:

1 Stílus, mesteroldal, témák
Endrődi Tamás (MCT, MCP, MCITP) GDF Informatikai Intézet vezetője SZÁMALK Oktatóközpont

2 Cascading Style Sheet (CSS)
Szintaktika: szabályhatáskör {attr:érték;attr:érték;…} Tag példa: body {font-family:ariel;font-size:10;} Osztály példa: .error {font-color:red} A pont (.) jelenti azt, hogy ez egy osztályszabály Azonosító példa: #logo {float: left; margin-left: 30px; padding-top: 50px;}

3 Expression Web 3 Demó Style.css

4 Mi is a mesteroldal? Újrafelhasználható elrendezés, kód, tartalom.
A weboldal elemeit a mesteroldal elemeivel összefésülve készül el a böngészőnek küldött webtartalom.

5 Mesteroldal jellemzői
File kiterjesztése .master @ Master direktíva Page direktíva helyett ContentPlaceHolder kontrolok “foglalják a helyett” az egyedi tartalomnak A generálódó oldal top-level HTML elemeit tartalmazza: html, head és form

6 Mesteroldal demó Demo/Masterpage.master

7 Mesteroldal használata I.
Az .aspx oldalon MasterPageFile attribútum megadása Page direktívában Page MasterPageFile="~/Mester.master" …%> Kódban legkésőbb a Page_PreInit()-ben Alkalmazás szinten Web.config fájlban a <pages> tag-ben megadható mi legyen az összes .aspx oldal mesteroldala. <pages masterPageFile="Mester.Master" />

8 Mesteroldal használata II.
Az .aspx oldalon Content kontrolok segítségével kell megadni az oldalon megjelenő egyedi tartalmat: <asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">Jelenj meg!</asp:Content>

9 Mesteroldalak egymásba ágyazása
Mesteroldalnak is lehet mesteroldala: Master Language="C#" MasterPageFile="Parent.master"%>

10 Mesteroldal felhasználása demó
Demo/Mdefault.aspx

11 Témák A téma tulajdonságok gyűjteménye: Mit tartalmaz?
Oldalak, vezérlők kinézete adható meg benne, így egységes kinézet érhető el az oldalakon Mit tartalmaz? Stíluslapok (Stylesheet) Skin-ek Képek

12 Téma létrehozása Az App_Themes mappában tároljuk a témákat.
Új téma létrehozásakor vegyünk fel egy új almappát az App_Themes alatt. Az almappa neve lesz egyben a téma neve is. Tegyünk stíluslapokat, skin-eket, képeket az almappába.

13 Téma alkalmazása Téma megadása az oldalon
Page Theme= „AlapTema" %> Téma megadása globálisan az egész alkalmazásra <configuration> <system.web> <pages theme=“AlapTema" /> </system.web> </configuration>

14 Skin Alapértelmezett skin Névvel ellátott skin
Automatikusan alkalmazza minden adott típusú kontrolra. Nincs megadva a SkinID attribútum. <asp:Label runat="server" ForeColor="red" Font-Size="14pt" Font-Names="Verdana" /> Névvel ellátott skin A kontrol skin-nek be van állítva a SkinID tulajdonsága. Ezt kell explicit megadni a kontrolon a SkinID tulajdonságban, ahhoz hogy alkalmazza a skin-t. <asp:Button runat="server" ID="MyButton" SkinID= "RedButton" />

15 Téma és Skin demó

16 Style Sheet Theme megadása
Style Sheet Theme megadása az oldalon Page StyleSheetTheme=“AlapTema" %> Globális Style Sheet Theme megadása <system.web> <pages StyleSheetTheme==“AlapTema" /> </system.web>

17 Precedencia sorrend Theme attribútum a “@ Page” direktívában
<pages Theme="themeName"> Web.config-ban Lokális kontrol attribútumok az oldalon StyleSheetTheme attribútum a Page” direktívában <pages StyleSheetTheme="themeName"> Web.config-ban

18 Téma letiltása Téma letiltása egy oldalon
Page EnableTheming="false" %>

19 Téma személyre szabása
Lehetőség a felhasználók számára személyre szabott téma megadására void Page_PreInit(object sender, EventArgs e) { Page.Theme = Profile.PreferredTheme; } void Page_PreInit(object sender, EventArgs e) { switch (Request.QueryString["theme"]) { case "Theme1": Page.Theme = "Theme1"; break; case "Theme2": Page.Theme = "Theme2"; break;

20