Punctul 1. Foi de stil cascadă
Formatele de stil cascadă (sau specificația Foi de stil cascadă CSS) oferă programatorului un control complet asupra formei reprezentării elementelor de marcare HTML pe pagina Web. Fișele de stil vă permit să definiți fonturile, culorile și contururile fragmentelor de text, să modificați acești parametri în interiorul unui bloc de text, să aliniați blocul de text cu privire la alte blocuri și componente ale paginii. Prezența tuturor acestor posibilități ne permite să vorbim despre CSS ca mijloc de separare a structurii logice a unui document și a formei sale de prezentare. Structura logică a documentului este determinată de elementele marcajului HTML, în timp ce forma reprezentării fiecăruia dintre ele este specificată de descriptorul elementului CSS.
Visual Studio Net oferă utilizarea CSS și nu numai în aplicarea elementelor de marcare HTML. Pentru a demonstra utilizarea CSS, vom crea o soluție simplă de site web (meniu Fișier / Nou / Site Web). În Exploratorul de Soluții pentru nodul de proiect, selectați linia "Adăugați un element nou" din meniul contextual și selectați "Foaie de stil" din setul "Șabloane" din fereastra "Adăugați un element nou". După ce faceți clic pe butonul "Adăugați", fișierul "StyleSheet.css" va fi adăugat la proiectul soluției site-ului, conținutul căruia nu există decât o singură regulă necompletată în momentul creării. Foaia de stil, de regulă, conține un set de reguli de formatare care pot fi conectate la diferite elemente ale paginii.
Fiecare regulă trebuie să aibă un nume descriptiv, care poate consta dintr-una sau două părți separate printr-o perioadă. În stânga punctului poate fi mânerul elementului căruia va fi aplicată regula. Dacă nu există un descriptor, regula poate fi aplicată oricărui element. Numele clasei de identificare a regulilor este scris în partea dreaptă a punctului. În cadrul legăturii regulii sunt elementele de formatare pentru această regulă. Elementele de formatare sunt separate prin punct și virgulă. Un exemplu de set de reguli este prezentat mai jos:
În primul caz, plasați cursorul mouse-ului în interiorul bretelelor curbate ale regulii și apăsați "Ctrl" plus "Space". În tooltip (Figura 1), toate elementele posibile de formatare pentru regulă vor fi evidențiate. După selectarea elementului de formatare, acesta este plasat în regulă, iar după intrarea în colon, apare un indiciu despre tipurile și valorile posibile ale parametrului.
În cel de-al doilea caz, cursorul mouse-ului este, de asemenea, plasat în interiorul acoladei curbate a regulii și elementul Build Post este selectat în meniul contextual. Apoi, expertul Constructor de stil generează mai multe elemente de formatare pentru regula simultan.
Fig.2. Utilizarea constructorului de stil
Figura 3. Adăugarea unei foi de stil
În exemplul fișei de stil de mai sus, regula corporală este aplicată automat tuturor descriptorilor de elemente (implicit). Pentru acele elemente ale căror aspecturi dorim să vedem diferite de stilul implicit, trebuie să specificați explicit regula din proprietatea CssClass (Fig.4).
Figura 4. Utilizarea regulilor de foi de stil
Pentru trei opțiuni pentru aplicarea regulilor foaie de cascadă în cascadă la elementul Etichetă, consultați Figura 5. Să acordăm atenție faptului important - dacă controlul este dat în mod explicit unei reguli în proprietatea CssClass, elementele de formatare ale acestei reguli suprascriu elementele regulii utilizate în mod implicit. Dacă elementul de regulă nu este înlocuit, se aplică elementul de regulă implicit.
Figura 5. Utilizarea regulilor de foi de stil
Punctul 2. Temele
2.1. Conceptul unei teme. Subiecte definite local
Sarcina temei este crearea unui fișier text special conceput, care, la rândul său, poate fi inclus în soluția site-ului. Conținutul fișierului reflectă designul sau comportamentul elementelor site-ului (completează sau înlocuiește unele dintre proprietățile lor). Temele sunt plasate în directoare predefinite ale sistemului de fișiere. Deci, temele locale sunt plasate într-un folder special numit "App_Themes" în directorul rădăcină al soluției site-ului. În plus, temele pot fi definite la nivel de server și plasate într-un catalog global de subiecte (despre care vom discuta mai târziu). Inițial, vom lua în considerare utilizarea subiectelor specificate local sau, altfel, definite în soluția unui anumit site.
Pentru demonstrarea ulterioară a exemplelor, vom crea o soluție simplă pentru site și vom pune două etichete pe formular. Apoi, începeți să creați temele și începeți cu dosarul "App_Themes".
În Visual Studio, puteți crea un folder "App_Themes" și o temă în două moduri:În Solution Explorer din meniul contextual al soluției site-ul selectați imediat elementul „Add New Item“, și în caseta „Add New Item“ - „File Skin“ (numele fișierului care urmează să fie adăugată poate fi selectată la voință, sau se potrivesc în scopul, de exemplu, „Etichete“). Ca rezultat, nodul "App_Themes", dosarul tematic "Etichete" și fișierul tematic vor fi create imediat (Fig.6).
Figura 6. Creați directorul și temele "App_Themes"
Fiecare director din directorul App_Themes este considerat un subiect separat. Atașarea subiectelor nu este permisă. Fiecare subiect poate conține unul sau mai multe fișiere cu extensia ".skin". În plus, directorul „App_Themes“ Fișierele pot fi prezente pentru foi de stil în cascadă, imagini și alte tipuri de fișiere, care sunt utilizate pentru elemente de design ( „.skin“ și fișiere stylesheets sunt de obicei situate în directorul rădăcină al temei și au imaginile luate în subdirectorul " imagini "). o varietate de subiecte pot fi definite pentru paginile de pe site-ul dvs., dar activ într-un anumit moment, doar unul. și, în virtutea acestui fapt, este recomandabil să creați un singur fișier ".skin" pentru un tip de control. Fiecare fișier ".skin" poate conține o declarație de proiectare pentru controale multiple. Această declarație decoratiuni (set de template-uri de design sau piei set) conține proprietăți, care pot fi aplicate pentru a controla, și va determina apariția controlului pus în aplicare de datele de testare la soluții de rulare.
Luați în considerare conținutul fișierului creat de expertul "Labels.skin":
Șabloanele de planificare a aspectului de control sunt asemănătoare cu declararea comenzilor corespunzătoare din fișierul ".aspx". Fiți atenți la prezența atributului runat = "server" și la absența atributului "ID". În plus, șablonul de design poate conține atributul "SkinId". Pentru a clarifica scopul, creați în fișierul nostru ".skin" o pielă pentru elementul Etichetă (pentru moment, fără atributul "SkinId"):
În fișierul Default.aspx vom conecta tema pentru pagina de site (direcția "Pagină", "Temă" sau "StylesheetTheme"):
Rețineți că în fișierul Default.aspx, comenzile Label sunt definite ca:
Vom executa soluția site-ului și vom acorda atenție rezultatului (figura 7, stânga).
Figura 7. Utilizarea temei
Să introduceți atributul "SkinId" în descrierea elementului (fișierul "Labels.skin"):
Pentru a controla Label1 (Default.aspx) SkinID proprietate (pentru numai Label1) este setat la valoarea determinată în subiect (SkinID = „label1“).
Vom executa soluția site-ului și vom acorda atenție rezultatului (figura 7, în centru).
A adăugat o altă realizare a temei pentru atributul Label c SkinId = „Label2“ și o declarație BackColor = „Red“, în descrierea ( „Labels.skin“ fișier):
Pentru a controla Label2 (Default.aspx), setați proprietatea "SkinID" la valoarea definită în subiect (SkinID = "label2").
Vom executa soluția site-ului și vom acorda atenție rezultatului (figura 7, dreapta). Prin compararea rezultatelor, putem concluziona că, dacă nu utilizați atributul „SkinID“, atunci toate paginile Etichetati elemente ale site-ului vor fi afișate ca acesta este setat la cortul într-un fișier conectat teme ( „Labels.skin“), tipul de care coincide cu tipul elementului pe Pagină web. Utilizarea proprietății "SkinID" vă permite să legați definiția designului de un anumit control.
2.2. Listă de subiecte globale
Inaugurăm o greșeală deliberată în fișierul Default.aspx, înlocuind numele theme = „Etichete“ în tema = „Labels1“ și să încerce să se conformeze deciziei site-ului. Compilatorul va afișa mesajul:
Din aceasta rezultă că subiectul este căutat nu numai în directorul de soluții, ci și în cataloagele tematice globale. Unul dintre aceste cataloage este:
Pentru a pune un subiect în director, trebuie să creați dosarul Teme în acest director. Apoi, puteți pune temele într-un dosar, așa cum am făcut-o cu directorul "App_Themes".
Remediem greșeala intenționată și se va muta (acest lucru se va muta) Etichete directorul de „App_Themes“ în C: \ WINDOWS \ Microsoft.NET \ Framework \ VERSIUNEA \ ASP.NETClientFiles \ Teme. Vom împlini din nou decizia. Rezultatul va fi același ca cel prezentat în Fig.
2.3. Setarea priorității pentru a utiliza o temă
Subiectul poate fi inclus în proiect în directorul Page al fișierului .aspx utilizând cele două atribute: Theme și StylesheetTheme. Dacă utilizați atributul Theme, descrierea decorațiilor din fișierul tematic va avea o prioritate mai mare decât descrierile specificate de proprietățile comenzilor. Dacă utilizați atributul StylesheetTheme, proprietățile comenzii vor avea prioritate față de proprietățile temei. În plus, utilizând atributul StyleSheetTheme, spre deosebire de utilizarea atributului Theme, vă permite să vedeți proiectarea comenzii în faza de proiectare. Deci, atunci când utilizați StyleSheetTheme, fundalul comenzilor se va potrivi culorilor specificate în skin-urile tematice cu care sunt legate.
Să acordăm atenție unei pietre subacvatice. Să definim două teme similare (Etichete). Cel local conține descrierea layout-ului Label1, iar tema din catalogul global este descrierea decorațiilor Label1 și Label2. În faza de proiectare, am setat numele temei în fișierul Default.aspx în directiva Page (Theme sau StyleSheetTheme = "Labels"). Primul design asociat cu Label1 (SkinID = "label1") va fi preluat din tema directorului App_Themes și va fi aplicat la Label1. Pentru Label2, SkinID = "label2" asociază descrierea de proiectare pentru Label2 cu tema "Etichete" a catalogului global. La etapa de proiectare, vedem ambele comenzi în acea culoare (pentru exemplul de mai sus), care este specificată în ambele fișiere tematice ".skin". Cu toate acestea, în cazul în care soluțiile site-ului, Label2 vor rămâne în afara influenței tema catalogului la nivel mondial (în caz contrar, acesta nu nici un subiect va fi aplicat, pentru motivul că doar o singură temă poate fi activ la un moment dat).
Vă atragem de asemenea atenția asupra faptului că utilizarea subiectelor poate fi permisă și interzisă. Pentru aceasta, utilizați proprietatea de control EnableTheming.
EnableTheming - proprietatea este cascadă și extinde efectul asupra tuturor elementelor copilului. În directiva Page, proprietatea EnableTheming își extinde efectul asupra tuturor elementelor paginii. Privind în perspectivă, rețineți că EnableTheming = false nu funcționează atunci când utilizați atributul de conectare "StylesheetTheme". Și, nu depinde de ce metodă este conectată tema. Pentru a ignora toate instalației, inclusiv cele realizate folosind atributul styleSheetTheme, trebuie să specificați în pagina sau StyleSheetTheme = „“ directivă fișier de configurare (cu privire la utilizarea fișierelor de configurare, a se vedea punctul 2.4 ..) următoarea definiție:
2.4. Stabiliți o temă pentru toate site-urile de pe server sau pe întregul site
Temele pot fi setate nu numai la nivelul paginii din fișier, ci și la nivelul serverului și al site-ului. În primul caz, se folosește fișierul de configurație global machine.config, în al doilea - web.config al site-ului. Atributele pentru conectarea temei sunt aceleași cu cele utilizate la conectarea temelor la nivel de pagină: temă și stilSheetTheme.
Rețineți că temele definite pentru pagină au prioritate față de definirea subiectelor din fișierul web.config.
2.5. Utilizarea CSS în teme
Formatele de stil cascadă pot fi folosite ca parte a temelor. Dacă definim subiectul numai elemente specifice de server ale proprietăților care nu pot fi setate prin intermediul CSS, și toate celelalte proprietăți stabilite în foaia de stil, este, în unele cazuri, poate reduce considerabil traficul către server-client, prin reducerea cantității de generare a codului de pe partea server.
Pentru ca stilurile să fie utilizate în teme, fișierele cu descrierile lor ar trebui adăugate în dosarul tematic (pot exista unul sau mai multe fișiere). ASP.NET aplică fișiere cu foi de stil pentru paginile care utilizează elementele și elementele paginii selectate. Acest lucru se face automat prin includerea foii de stil într-o pagină într-un mod normal pentru pagini (directivă în etichetă
- Pentru fiecare foaie de stil, Visual Studio adaugă o singură directivă în funcție de disponibilitatea în etichetă pagina din atributul runat = "server").Adăugăm în noastre decizie două fișiere StyleSheet1.css site-ul stiluri și StyleSheet2.css (meniul contextual al subiectelor de nod Etichete, faceți clic pe „Add New Item“, alege „Foaie de stil“, specificați un nume și faceți clic pe butonul „Add“). Tipul de soluție este prezentat în Fig.
Figura 8. Soluția site-ului cu tema inclusă și CSS
Rețineți că în directiva Pagina există un atribut al utilizării temei Etichete și a directivelor în etichetă
sunt absente.În fișierul StyleSheet1.css și StyleSheet2.css adăugăm textul corespunzător al regulilor de formatare:
Fișierul Labels.scin, ca și înainte, conține intrări pentru două skin-uri. Noul lucru pe care îl facem în șabloanele de design este atributul CssClass care se referă la un anumit stil CSS:
Să executăm soluția. Rezultatul este arătat în Fig.
Figura 9. Punerea în aplicare a deciziei
Dacă ne uităm la codul sursă (Vezi meniul browserului / Source), vom vedea că ambele fișiere stiluri Visual Studio adăugate la o pagină, la fel cum am făcut-o la punctul numărul 1, și elemente de etichetare conțin o referire explicită la clasa CSS ca în paginile HTML obișnuite:
2.6. Încărcarea temelor dinamice
Asp.Net descarcă teme imediat după generarea evenimentului PreInit. Astfel, pentru a putea schimba programele tematic, trebuie să faceți acest lucru în evenimentul Page_PreInit.
Stabilirea unei teme este ușoară. În exemplul anterior, eliminăm atributul "Tema =" Etichete "în directiva" Pagină "; și puneți-l ca un cod în procesorul de evenimente PreInit. Rezultatul va fi același ca în figura 9.
Pentru a dezactiva tema, ca și înainte, vom folosi atribuirea valorii subiectului la o valoare goală:
Una dintre aplicațiile din subiectele dinamice este aceea de a oferi utilizatorului posibilitatea de a alege aspectul paginilor site-ului. Este suficient să ceri mai multe subiecte și să descarci tema aleasă de utilizator. Cu toate acestea, încărcarea de subiecte este posibilă numai în cadrul procesatorului de evenimente PreInit. Alegerea subiectului este posibilă mult mai târziu decât evenimentul PreInit. Soluția la această problemă poate fi utilizarea sesiunilor (puteți utiliza și module cookie, profiluri și alte locații de stocare disponibile).
Amintiți-vă că o sesiune sau o sesiune începe atunci când utilizatorul cere mai întâi o pagină în aplicație (pagina site-ului) și se termină atunci când aplicația (site-ul) închide în mod explicit sesiunea sau când depășirea intervalului de timp specificat este depășită. Acest lucru face posibilă stocarea în Sesiunea de obiecte a informațiilor necesare în timpul activității site-ului și accesarea acestuia din diferite pagini ale site-ului.
În același timp, obiectele de sesiune sunt disponibile și după ce reintroduceți pagina. Dacă vom alege numele listă a temei și va păstra în obiectul Session (manipulant apăsat un buton, de exemplu), apoi, la pagina postback reîncărcării atunci când salvați din nou veni mai târziu evenimente PreInit. Ca o cale de ieșire din aceasta - o provocare în sine. Apoi, în butonul de preluare a butonului de buton puteți salva numele sesiunii și, după rechemarea paginii, utilizați informațiile stocate în sesiune.
Figura 10. Soluția site-ului
Rezultatul codului este prezentat în Fig.
Figura 11. Implementarea soluției site-ului
2.7. Folosind imagini în teme
Pentru ca desenele să fie folosite în teme, ele trebuie adăugate la soluție sau accesibile prin URL. Este acceptat să plasați imaginile într-un director separat al directorului de teme. Adăugați acest dosar (meniul contextual al nodului temă Etichete, elementul "Adăugați folderul", setați numele folderului "Imagini"). Am pus în ea orice poze (de ex. Cat.gif și dog.gif).
Adăugați încă două skin-uri la fișierul Labels.skin al soluției anterioare - Imagine:
Adăugați la soluția anterioară două controale Imagine:
Să executăm soluția. Rezultatul este arătat în Fig.10.
Figura 10. Punerea în aplicare a deciziei
În acest fel, puteți include imagini în ImageButton, TreeView, Meniu și alte elemente de pagină Web.
Să luăm în considerare posibilitatea controlului dinamic al afișării imaginilor. Eliminați imaginea din fișierul Defaul.aspx și definiți Skins for Image (sau, mai degrabă, adăugați-le la diferite șabloane SkinID - "cat" și "dog"):
Următorul exemplu demonstrează modul în care puteți modifica dinamic imaginea specificată în temă (modificarea apare atunci când este afișată pagina Actualizare și depinde de cronometru):
Următorul cod arată modul în care puteți controla afișarea articolelor utilizând ViewState (imaginile se modifică de fiecare dată când butonul este apăsat):
literatură
Dacă ați venit de la un motor de căutare - vizitați pagina mea de pornire
Realizat de uCoz
Articole similare
Trimiteți-le prietenilor: