Pentru a începe proiectarea unei pagini web, faceți dublu clic pe pagina Web din Solution Explorer.
Dacă utilizați ASP.NET Proprie șablon Web site, trebuie mai întâi să creați o pagină nouă (click-dreapta pe site-ul în fereastra Solution Explorer, selectați Adăugare element nou din meniul contextual (adăugați nou element) și specificați șablonul formular web (web form)). Noua pagină include inițial numai volumul minim necesar de marcare, dar nu conține conținut vizibil și, prin urmare, va apărea ca o pagină goală în fereastra de designer vizual.
În modul Sursă, este afișat aspectul paginii (adică descriptorii de control HTML și ASP.NET), în modul Design - o imagine formatată a modului în care pagina va arăta în fereastra browserului web și în modul Split - o vedere combinată care permite vizualizarea simultană și aspectul paginii și aspectul final al acesteia.
Formal, pagina ASP.NET pentru cea mai mare parte format din XHTML, și toate controalele ASP.NET generează codul-XHTML valid, cu excepția cazului în care sunt configurate în mod diferit. Cu toate acestea, aici vom face referire la marcarea unei pagini web ca un cod HTML, deoarece poate utiliza HTML sau un standard similar, dar mai strict, XHTML.
Puteți să glisați comanda fie în structura vizibilă a paginii (în modul vizual designer), fie într-o poziție specifică în aspectul acesteia (în modul cod sursă). În ambele cazuri, rezultatul va fi același.
Există, de asemenea, o alternativă: introduceți manual descriptorul comenzii dorite în modul sursă. În acest caz, vizualizarea afișată în modul Design nu este actualizată până când nu se face clic pe zona de proiectare a ferestrei sau dacă combinația de taste este salvată pentru a salva pagina web.
Prin adăugarea unui control, îi puteți modifica dimensiunea sau puteți configura proprietățile sale în fereastra Proprietăți. Mulți dezvoltatori preferă să conecteze paginile web noi în modul Design, dar să regrupeze controalele sau setările mai detaliate în modul Sursă. Singura excepție este atunci când vine vorba de marcarea HTML: deși în Toolbox și există o filă cu elemente HTML, este de obicei mai ușor să introduceți manual descriptorii necesari pentru mânere decât să le glisați câte o pagină în același timp.
Figura de mai jos prezintă pagina web în modul Split cu marcajele originale din partea superioară și suprafața grafică din partea de jos:
Cei care au un monitor cu ecran lat, cu siguranță doriți să zona în modul Split, sunt afișate una lângă cealaltă (nu în sus și în jos). Din fericire, Visual Studio facilitează obținerea acestui tip de afișare. Tot ce trebuie să faceți - este să selectați meniul Tools (Instrumente) faceți clic pe Opțiuni (Options) în parametrul copac muta în HTML Designer -> General (Designer HTML Visual -> General), selectați Separare Views Vertically (Arată prezentare vertical) și faceți clic pe butonul OK.
Pentru a configura controlul, trebuie mai întâi să faceți clic pe el pentru ao selecta sau să îl selectați după nume din lista derulantă din partea de sus a ferestrei Proprietăți și apoi să modificați toate proprietățile necesare, de exemplu, Text, ID, ForeColor (Culoare prim plan).
Aceste setări sunt convertite automat la atributele corespunzătoare ale descriptorilor de control ASP.NET și determină aspectul inițial al acestor elemente. Visual Studio oferă chiar și "selectori" speciali (cunoscuți sub numele de UITypeEditor), care vă permit să selectați proprietăți avansate. De exemplu, puteți selecta o culoare din lista derulantă sau puteți configura fontul utilizând caseta de dialog pentru selectarea fonturilor standard.
Poziționarea absolută
Pentru poziționarea este necesar să se utilizeze toate metodele uzuale de control HTML-design pe pagina, cum ar fi punctele, sfârșiturile de linie, tabele și stiluri. În mod implicit, Visual Studio presupune că elementele ar trebui să fie plasate cu utilizarea poziției flexibile modul de streaming (flux), care permite conținutului să se dezvolte dinamic si micsora fara probleme cu aspectul.
Cu toate acestea, dezvoltatorul are, de asemenea, opțiunea de a aplica modul absolut de poziționare utilizând standardul CSS. Tot ce trebuie să faceți este să adăugați un stil CSS în linie pentru controlul dvs. cu parametrii de poziționare absolută. De exemplu, mai jos este un stil CSS care indică faptul că butonul trebuie poziționat exact la 100 de pixeli de la marginea din stânga și de 50 de pixeli din partea de sus a paginii:
După efectuarea unei astfel de modificări, butonul poate fi tras de-a lungul ferestrei în orice loc și Visual Studio va actualiza automat coordonatele de stil specificate în mod corespunzător.
La plasarea comenzilor individuale folosind modul de poziționare absolută, rareori există sens. Acest mod nu permite circuitului aranjamentul să se adapteze la diferitele dimensiuni ferestrele browser-ului și anunță problemele de aspect, atunci când desfășoară conținutul într-unul dintre elementele, rezultând într-o suprapunere a celuilalt element care are o poziție absolută.
De asemenea, facilitează crearea unor scheme de planificare inflexibilă, care ulterior sunt foarte greu de modificat. Cu toate acestea, modul de poziționare absolută, totuși, este perfect potrivit pentru plasarea de containere întregi, în interiorul cărora se poate utiliza în siguranță un conținut în flux.
De exemplu, puteți utiliza modul de poziționare absolută pentru a ancora bara de meniuri într-o anumită parte a ferestrei și pentru lista de legături din interiorul acesteia, modul normal de aspect al fluxului. Pentru un astfel de caz, containerul
recipient
Descriptori inteligenți
Descărcări HTML statice
După cum știți, paginile ASP.NET conțin controale ASP.NET amestecate cu etichete HTML obișnuite. Descriptorii HTML sunt adăugați fie prin tastare, fie prin glisarea din fila corespunzătoare din caseta de instrumente.
Visual Studio include un designer de stil foarte util, care vă permite să formatați orice element HTML static utilizând proprietățile CSS.
Pentru a le încerca, glisați un element din secțiunea HTML din caseta de instrumente
Un stil nou creat în mod similar va fi stocat ca un stil inline și scris la atributul atribut al elementului care urmează să fie schimbat. Alternativ, puteți defini un stil denumit în pagina curentă (așa cum este sugerat în mod implicit) sau într-o foaie de stil separată.
Dacă doriți să configurați elementul HTML ca un control al serverului pentru a putea gestiona evenimentele și pentru a interacționa cu acestea în cod, trebuie să comutați la modul sursă și să adăugați atributul requat runat = "server" la descriptorul de control.
Tabele HTML
Următoarele sunt acțiunile de bază pe care ar trebui să le efectuați:
Pentru a merge la masă de la o celulă la alta, trebuie să utilizați fie
Pentru a adăuga noi rânduri sau coloane în tabel, trebuie să faceți clic dreapta în interiorul celulei și să selectați din mai multe opțiuni din submeniul Inserare care reprezintă acțiunea dorită.
Pentru a modifica dimensiunea oricărei părți a mesei, faceți clic pur și simplu pe marginea corespunzătoare și glisați-o în direcția dorită.
Pentru a formata o singură celulă, trebuie să faceți clic pe fereastra Proprietăți din câmpul Stil și apoi pe butonul cu imaginea de elipsă (.). Apoi, se deschide aceeași casetă de dialog New Style, care a fost afișată în figura precedentă.
Pentru a lucra cu mai multe celule în același timp, trebuie mai întâi să le selectați ținând apăsată tasta
Pentru a îmbina celule (de exemplu, transforma două celule într-una singură, care acoperă două coloane), trebuie pur și simplu pentru a oferi celule necesare, faceți clic dreapta și selectați Modificare din meniul contextual -> Îmbinare (Edit -> Îmbinare).
Cu astfel de capabilități, probabil că nu va trebui niciodată să recurgeți la ajutorul altor instrumente de proiectare precum Dreamweaver sau Web Expression.
În practica modernă de web design, utilizarea tabelelor de aspect nu este aprobată. În schimb, majoritatea dezvoltatorilor profesioniști preferă proprietățile layoutului CSS, care funcționează la fel de bine cu Visual Studio.
Structurarea marcajului HTML
Pentru a formata aceeași bucată de cod HTML, există pur și simplu un număr infinit de moduri. Nivelele descriptive pot fi alocate prin indentare, iar descriptorii lungi sunt adesea împărțiți în mai multe linii pentru a îmbunătăți lizibilitatea. Cu toate acestea, câte indenturi ar trebui să fie și care ar trebui să fie lungimea liniei, fiecare dezvoltator se alege singur.
Datorită abundenței posibilelor opțiuni, Visual Studio nu forțează nici o formatare, ci, dimpotrivă, păstrează întotdeauna schema de capitalizare și indentare folosită de dezvoltator. Dezavantajul acestui comportament este acela că contribuie la lipsa de consecvență și la crearea paginilor web cu convenții de format variat sau descriptori incorect difuzi.
Pentru a vă ajuta să faceți acest lucru, Visual Studio oferă o caracteristică inovatoare care vă permite să definiți regulile dorite și apoi să le aplicați oriunde.
Pentru a încerca, comutați pagina în modul sursă. Apoi selectați un fragment arbitrar al codului HTML, dați clic dreapta pe el și selectați Format Selecție din meniul contextual. După aceea, Visual Studio va repara automat conținutul HTML selectat prin introducerea literelor majore, indenturilor și terminațiilor corecte ale liniilor.
Desigur, după cele de mai sus, se pune întrebarea: cine determină ce parametri de formatare sunt corecți? Deși pentru început, Visual Studio utilizează propriile setări prestabilite, aveți posibilitatea de a le configura într-un mod destul de mare.
În această secțiune, puteți specifica ce parametri de capitalizare trebuie utilizați și cât timp pot fi liniile înainte de a fi minimizați. Prin linia implicit nu se pliază până când ajung la limita sau Insistenta ochii 80 de caractere, atât de mulți dezvoltatori preferă să reducă valoarea acestui parametru. De asemenea, puteți personaliza modul în care atributele în ghilimele concluzie și dacă Visual Studio ar trebui să introducă în mod automat o potrivire de închidere prin adăugarea descriptor eticheta de deschidere.
Regulile de formatare sunt aplicate ori de câte ori este utilizată comanda Format Selection și oricând se adaugă conținut HTML prin glisarea comenzilor din modul Toolbox în modul Design. În cazul în care conținutul HTML este introdus manual, Visual Studio nu aplică regulile de formatare pentru "corecția" acestuia.
Dacă sunteți și mai hotărât, puteți să faceți clic pe butonul Opțiuni specifice etichetei și să setați reguli care se aplică numai anumitor descriptori.
De exemplu, puteți specifica Visual Studio pentru a adăuga un caracter de întrerupere a liniei la începutul și la sfârșitul unui descriptor