Șabloane dinamice
Șabloane web dinamice
Un site tipic este format din pagini care conțin mai multe elemente comune tuturor paginilor. Astfel de elemente pot fi antet și subsol, bannere, bare de navigare, titluri etc.
Șablonul Web dinamic vă permite să creați pagini principale.
Uneori trebuie să actualizați designul tuturor paginilor site-ului. Folosirea paginilor principale vă permite să faceți acest lucru în modul cel mai simplu - trebuie să actualizați aspectul doar al paginii principale, schimbând astfel toate paginile create pe baza paginii principale.
Pagina principală creează zone care nu pot fi modificate și zone care pot fi editate.
Șabloanele web dinamice nu trebuie confundate cu paginile principale ASP.NET.
Crearea unui șablon dinamic
Pentru a crea un șablon web dinamic, din meniul Fișier, faceți clic pe New - Page - Dynamic WebTemplate.
Salvați pagina creată ca master.dwt.
Importați fișierul de stil (styles.css) din folderul Examples \ Ch19 \ Files \ Website și atașați-l la noul dvs. model dinamic Web Template.
Trebuie să definiți câteva zone editabile pentru șablon (fără astfel de zone, șablonul nu va funcționa). Puteți crea zone pentru editare în zona bannerului superior și în zona principală de conținut.
Plasați cursorul pe pagină, din meniul Format, selectați Șablon web dinamic - Gestionați regiuni editabile.
Va fi inserat un cadru în pagină, în interiorul căruia va fi localizată regiunea editabilă. Ajustați dimensiunile cadrului (de exemplu, pentru un material de testare, cadrul poate ocupa cea mai mare parte a paginii).
Creați o pagină după șablon
Pentru a utiliza șablonul de rețea dinamic, trebuie să îl atașați la pagină.
Creați o pagină salvând-o.
În meniul Format, selectați Șablon web dinamic - Atașați șablonul Web dinamic. În listă, selectați master.dwt.
Faceți clic pe Deschideți. Expression Web afișează o fereastră de dialog care vă spune că fișierul a fost actualizat. Faceți clic pe Închideți.
Deschideți șablonul creat (avem master.dwt). Modificați șablonul. Salvați modificările.
Expression Web va deschide o fereastră cu un mesaj că paginile create cu acest șablon vor fi actualizate. Faceți clic pe Da - paginile vor fi actualizate. Se va afișa numărul de pagini actualizate. Faceți clic pe Închideți.
Alternativ, puteți deschide Șablonul de rețea dinamică și selectați Format - Șablon web dinamic - Actualizați paginile atașate pentru a actualiza toate paginile.
Pentru a actualiza doar câteva pagini, utilizați Format - Șablon web dinamic - Actualizați paginile selectate.
Puteți modifica pagina nu numai în zonele accesibile, ci în orice zonă, dacă treceți la modul cod și modificați direct codul.
În acest caz, sunt disponibile două opțiuni:
Restaurați întotdeauna conținutul care nu poate fi editat în timp ce editați această pagină - restaurați codul anterior
Păstrați toate modificările - salvați modificările din cod.
Administrarea zonelor editabile
Pentru a re-afișa zona editabilă, selectați zona pe care doriți să o editați din fereastra listei de zone și faceți clic pe butonul Modificare.
Dacă doriți să reîncepeți afișarea zonei disponibile în mod curent pe pagina curentă, faceți clic pe butonul Ștergere pagină curentă.
Zonele editabile pot fi adăugate, redenumite sau șterse.
Pentru a adăuga o nouă zonă editabilă, plasați cursorul acolo unde doriți noua regiune editabilă și selectați Format - Șablon web dinamic - Gestionați regiuni editabile.
Pentru a redenumi o regiune, utilizați Format - Șablon web dinamic - Gestionați regiuni editabile în meniu.
Codul șablonului dinamic
Deși lucrul cu șabloane dinamice este mai potrivit în modul de proiectare, trebuie să aveți o idee despre ceea ce se întâmplă în prezent cu codul paginii.
După crearea unui nou șablon dinamic, codul va fi:
În mod implicit, fiecare șablon dinamic Web conține două zone editabile numite doctitle (titlu) și corp ("corpul" paginii).
Codul #BeginEditable și #EndEditable specifică începutul și sfârșitul regiunii editabile.
Acest cod indică faptul că o regiune editabilă este inserată în zona antetului. Domeniul de aplicare include un tabel (mainTable).
Să presupunem că doriți să faceți nu numai întreaga tabelă disponibilă pentru editare, ci doar linia de jos. În modul de proiectare, nu puteți face acest lucru, dar în modul cod, puteți.
Fragmentul de cod corectat va arăta astfel:
Astfel, numai a doua linie a tabelului este disponibilă pentru editare, tot ceea ce nu este disponibil pentru editare.