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

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;}

Expression Web 3 Demó Style.css

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.

Mesteroldal jellemzői File kiterjesztése .master @ Master direktíva a @ 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

Mesteroldal demó Demo/Masterpage.master

Mesteroldal használata I. Az .aspx oldalon MasterPageFile attribútum megadása a @ 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" />

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>

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

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

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

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.

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>

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" />

Téma és Skin demó

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>

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

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

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;