Temes i skins

Com hem vist la pàgina principal afecta a l'estructura general d'una sèrie de pàgines dins d'una aplicació (o lloc) web. No obstant això, gairebé sempre en la implementació d'un lloc que necessita per manejar altres elements que poden canviar d'una pàgina a una altra, però ha de ser estable dins de la mateixa pàgina (com la font del text). En aquests escenaris són una eina molt útil anomenada Temes.

Si està familiaritzat amb Fulles d'Estil en Cascada (CSS) no serà difícil comprendre el funcionament dels temes. Les dues tècniques són similars perquè tots dos, de fet, es pot definir l'estil visual de les nostres pàgines web. És possible utilitzar temes per especificar estils, gràfics i altres elements en les pàgines del nostre lloc.

Els temes són bàsicament arxius de text que especifiquen les característiques que els elements d'una pàgina ASP.NET ha d'assumir i que inclou per defecte diversos, encara que per descomptat pot definir el seu propi.

Procedir amb un exemple. Crear un nou formulari web (jo ho dic EsempioTemi.aspx) i després feu clic al botó dret del ratolí sobre el nostre projecte i triar l'opció Afegir carpeta ASP.NET i triar el tipus de carpeta com a tema

Això porta a la creació de la carpeta dins d'App_Themes amb una carpeta per defecte (anomenat Theme1)

Canviar el nom de la carpeta a la Theme1 defecte i feu clic amb el botó dret del ratolí, afegint un nou element de tipus de fulla d'estils (full d'estil). Cridem a la mateixa default.css

En aquest punt hem d'establir les característiques del nostre full d'estil. Si fem doble clic sobre ella veurem que només conté una etiqueta de cos

Per afegir nous elements, feu clic al menú d'estils Afegeix Regla

Això obre la següent finestra

Suposem que voleu afegir un element de H1 a la nostra full d'estil. Element de selecció al menú desplegable i feu clic a l'element h1> per posar-lo a la llista de regles de jerarquia d'estils

Feu clic a D'acord un cop que veiem que el full d'estil es canvia de la següent manera

Per editar l'element que acaba d'inserir, feu clic amb el botó dret del ratolí en l'etiqueta i triï Generar opció d'estil. S'obrirà el quadre de diàleg Modificar estil, on anem a establir algunes propietats a voluntat

Després de fer clic a D'acord veiem les nostres opcions incloses en el full d'estil

Vam provar el nostre tema ara, afegint que el formulari web creat a principis de la Directiva Tema lliçó i escriure alguna cosa en les etiquetes h1

El text que vaig entrar m'estava posant a prova l'estil de l'aplicació i es mostrarà en el navegador d'acord a la nostra full d'estil IPOST

El mateix succeirà amb tots els elements de la nostra tancats en etiquetes H1. És evident que hem utilitzat aquesta etiqueta a tall d'exemple, però, en principi, d'una manera similar es poden personalitzar tots els elements d'un formulari web.

Finalment em referiré breument a la pell trucada. Aquests elements són una manera de configurar algunes propietats d'un grup de controls. Per exemple, pot definir diferents esquemes de color per a un tipus particular de control (com el quadre de text) que es caracteritza per diverses propietats personalitzables.

Mitjançant la definició de la pell adequada pot posar a disposició una sèrie d'opcions de visualització d'un grup de controls sense la necessitat d'establir les propietats de cada instància de cada un. Per exemple, si un TextBox formulari web conté deu i vull donar-los una mica de format només definir la pell apropiada i assignar a cada un dels quadres de text. Perquè els arxius en una pell que defineix un tipus específic de control i els atributs que s'apliquen a totes les instàncies de la mateixa.

Heus aquí un exemple. Crear una nova carpeta dins de la carpeta per defecte anomenada Skins vist anteriorment i afegir un nou element al tipus de pell a l'interior diu TestSkinFile

Inserir en les personalitzacions de l'arxiu generat per alguns controls com ara les següents

D'aquesta manera, quan s'afegeix un formulari Web components de la pell, que es portarà el conjunt de característiques. Òbviament, això es fa perquè la pell ha de ser declarat a la pàgina, similar al que es va fer anteriorment per al tema.

• <<Lliçó anterior
• Índex de l'ajuda
• Lliçó següent>>