Webmatrix - crearea de site-uri simple

Bună ziua, dragi colegi!

Și ne continuăm seria de articole despre WebMatrix. Așadar, astăzi vă voi spune despre crearea designului, și anume despre cum să creați cu ușurință blocuri de conținut pentru reutilizare și cum să creați un aspect uniform pentru toate paginile utilizând un aspect.







Deci, datorită ASP.Net, putem crea un fișier separat cu un bloc de conținut, în care pot fi text, markup sau cod. Apoi inserăm aceste date oriunde avem nevoie și nu este nevoie să copiem conținutul în fiecare pagină. Și dacă trebuie să actualizați, trebuie doar să actualizați un fișier - iar modificările se vor răspândi automat.

Această schemă arată principiul blocurilor de conținut:

Webmatrix - crearea de site-uri simple

La momentul paginii de interogare de la un server de web, în ​​locurile în care metoda este numita «RenderPage», ASP.Net introduce blocuri de conținut. După aceea, pagina generată finită este trimisă în browser.

Acum, să vedem cum se face acest lucru în practică.

Creați "site-ul nostru", pe baza șablonului "Blank Site":

Webmatrix - crearea de site-uri simple

În dosarul rădăcină al site-ului web, creați un fișier numit index.cshtml.

Webmatrix - crearea de site-uri simple

În etichetă vom scrie următoarele rânduri:

Conținutul paginii noastre de pornire a site-ului nostru.

Ca rezultat, totul ar trebui să arate astfel:

Webmatrix - crearea de site-uri simple

Webmatrix - crearea de site-uri simple

De obicei, fișierele partajate de paginile web sunt stocate într-un folder denumit "Partajat". Prin urmare, vom crea un nou folder numit "Partajat" în directorul rădăcină:

Webmatrix - crearea de site-uri simple

Și creați în el fișiere cu numele "_header.cshtml" și "_footer.cshtml". Acesta va fi antetul și subsolul nostru:

Webmatrix - crearea de site-uri simple

Să schimbăm conținutul fișierului "_header.cshtml" la:

Acesta este antetul nostru 🙂

Conținutul "_footer.cshtml" la:

Rețineți că numele fișierului începe cu simbolul "_". Acest lucru este de a împiedica utilizatorii să solicite astfel de pagini, deoarece ASP.Net nu trimite pagini la browser-ul al cărui nume începe cu acest simbol.

Dacă încercați să consultați unul dintre aceste fișiere în browser utilizând comanda "Run in browser", vom vedea următoarele:

Webmatrix - crearea de site-uri simple






Acum, după ce ați făcut totul. adăugăm metoda "RenderPage" la codul paginii "index.cshtml":

Conținutul paginii noastre de pornire

Webmatrix - crearea de site-uri simple

După cum puteți vedea, provocând «RenderPage» metoda, ne place să subliniem conținutul unui fișier ( «_header.cshtml» sau «_footer.cshtml»), în cazul în care pentru a pune (locul în care metoda se numeste). Rezultat în browser:

Webmatrix - crearea de site-uri simple

Dacă te uiți la codul paginii prin browser, vom vedea următoarele:

Acesta este antetul nostru 🙂

Conținutul paginii noastre de pornire

După cum puteți vedea, în locurile în care am denumit metoda "RenderPage", în locul metodei, conținutul fișierelor "_header.cshtml" sau "_footer.cshtml" a apărut de fapt.

Acum, să aruncăm o privire asupra metodei "RenderBody", și anume să creăm un aspect uniform, folosind un aspect.

Ce are aspectul paginii?

Un aspect al paginii este un fel de pagină care are o structură dată, dar nu are date de afișat. Așadar, specificăm datele pe care trebuie să le afișăm și pagina de aspect în care să le afișăm.

De fapt, aspectul nostru este ca orice altă pagină HTML. Doar în ea există o metodă «RenderBody». Unde aranjăm metoda, datele pentru mapare vor fi inserate acolo!

Această schemă arată principiul metodei:

Webmatrix - crearea de site-uri simple

După cum puteți vedea, totul se întâmplă în mai multe etape:

1. Este cerută mai întâi pagina de conținut. Acesta conține codul care specifică aspectul care va fi utilizat pentru această pagină și datele pe care trebuie să le afișeze.

2. În pagina de aspect, conținutul va fi introdus în locul unde este invocată metoda "RenderBody". De asemenea, puteți introduce blocuri de conținut în aspect folosind metoda "RenderPage", așa cum am făcut deja.

3. Și după ce pagina de care avem nevoie este generată, este trimisă browserului.

Să o facem acum în practică!

Creați un fișier "_layout.cshtml" în dosarul "Partajat", aceasta va fi pagina noastră de aspect:

Webmatrix - crearea de site-uri simple

Acum modificați conținutul fișierului. Anume, vom indica stilul și locul unde vor fi inserate datele noastre.

În etichetă modificați conținutul etichetei pe - "Conținutul nostru structurat". De asemenea, folosiți eticheta <link> conectați foaia de stil:</p> <p><link href=”@Href(“/Styles/OurSite.css”)” rel=”stylesheet” type=”text/css”/></p> <p>Deoarece nu toate serverele web procesează atributul "href" al legăturilor în mod egal, folosim modulul helper "@Href".</p> <p>În etichetă <body> inserați anteturile noastre cu ajutorul metodei "RenderPage", iar în mijloc vom avea metoda "RenderBody":</p> <p>Ca rezultat, totul ar trebui să arate astfel:</p> <p><meta charset=”utf-8″ /></p> <p><title>Conținutul nostru structurat

Webmatrix - crearea de site-uri simple

Rețineți că pagina de aspect nu poate conține mai mult de un apel la metoda "RenderBody".

Acum creați foaia de stil, pe care am specificat-o în etichetă .

Dar ce este o foaie de stil cascadă?

CSS (English Cascading Style Sheets) este un limbaj formal pentru descrierea aspectului unui document scris folosind un limbaj de markup.

Dezvoltatorii web folosesc CSS pentru a specifica fonturi, culori, dispunerea blocurilor individuale și alte aspecte ale prezentării aspectului paginilor web.

Scopul principal al dezvoltării CSS a fost acela de a separa descrierea structurii logice a unei pagini web (care este produsă folosind HTML sau alte limbi de marcare) de descrierea aspectului acestei pagini web (care se face acum folosind limba oficială CSS).

Datorită acestei separări, flexibilitatea, disponibilitatea documentului, capacitatea de a controla afișajul crește. De asemenea, complexitatea și numărul repetițiilor în conținutul structural sunt reduse.

În primul rând, vom crea un "stil" al tatei și în el fișierul "OurSiteStyleSheet.css":

Webmatrix - crearea de site-uri simple

Adăugați următoarele:

frontieră de fund: 3px solid # FFFC00;

font: 2.75e / 1.75e Georgia, serif;







Trimiteți-le prietenilor: