Stílus, mesteroldal , témák

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. CascadingStyleSheet (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ívaa @ 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 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-benmegadható mi legyen az összes .aspxoldal 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: 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 AzApp_Themesmappában tároljuk a témákat. Új téma létrehozásakor vegyünk fel egy új almappát az App_Themesalatt. 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 Automatikusan alkalmazza minden adott típusú kontrolra. Nincs megadva a SkinIDattribú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 SkinIDtulajdonsá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 Skindemó

16. Style Sheet Thememegadá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. Precedenciasorrend Theme attribútum a “@ Page” direktívában <pages Theme="themeName"> Web.config-ban Lokáliskontrol 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; } }