Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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

Hasonló előadás


Az előadások a következő témára: "Stílus, mesteroldal, témák Endrődi Tamás (MCT, MCP, MCITP) GDF Informatikai Intézet vezetője SZÁMALK Oktatóközpont."— 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 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 –Kódban legkésőbb a Page_PreInit()-ben Alkalmazás szinten – Web.config fájlban a tag-ben megadható mi legyen az összes.aspx oldal mesteroldala.

8 Mesteroldal használata II. Az.aspx oldalon Content kontrolok segítségével kell megadni az oldalon megjelenő egyedi tartalmat: Jelenj meg!

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 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 Téma megadása globálisan az egész alkalmazásra

14 Skin Alapértelmezett skin – Automatikusan alkalmazza minden adott típusú kontrolra. Nincs megadva a SkinID attribútum. 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.

15 Téma és Skin demó

16 Style Sheet Theme megadása Style Sheet Theme megadása az oldalon Globális Style Sheet Theme megadása

17 Precedencia sorrend 1.Theme attribútum a Page” direktívában 2. Web.config- ban 3.Lokális kontrol attribútumok az oldalon 4.StyleSheetTheme attribútum a Page” direktívában 5. Web.config-ban

18 Téma letiltása Téma letiltása egy oldalon

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


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