Cum să creați un layout de grilă într-o singură coloană în Dreamweaver - manechine

Înainte de a vă scufunda în crearea unui design complicat de grilă fluidă în Dreamweaver, vă recomandăm să încercați unul mai simplu. Începeți prin a crea o structură simplă, cu o coloană de grilă fluidă, urmând aceste instrucțiuni ușoare:

1. Selectați Fișier → Nou.

   Se deschide fereastra Document nou. Notă: Asigurați-vă că ați finalizat procesul de configurare a site-ului înainte de a începe să lucrați la un nou aspect al rețelei de fluid.

2. Din partea stângă a ecranului, selectați Fluid Grid Layout.

   Opțiunile pentru fereastra noului document se modifică la opțiunile rețelei de fluid.

   

3. Specificați numărul de coloane pe care le doriți în fiecare dintre cele trei machete.

   Pentru a adăuga sau elimina coloane, selectați câmpul de text din fiecare coloană și introduceți numărul de coloane dorite.

4. Specificați procentajul ferestrei browserului pe care doriți să îl acoperiți fiecare aspect.

   Selectați câmpul de text de sub fiecare aspect și introduceți un număr reprezentând procentajul de spațiu pe care doriți să îl acoperiți în momentul proiectării în fereastra browserului. De exemplu, în mod prestabilit, aspectul spațiului de lucru este setat pentru a ocupa 90% din spațiul disponibil, dar ați putea să-l modificați la 95% pentru a vă oferi mai mult spațiu de design și a reduce spațiul de margine.

5. Modificați procentul lățimii coloanei pentru a modifica spațiul dintre fiecare coloană.

   În mod implicit, Dreamweaver stabilește fiecare margine pentru a ocupa 25% din spațiul disponibil.

6. Utilizați lista derulantă pentru a specifica o doctype.

   În mod implicit, machetele de grilă lichidă sunt create utilizând modelul HTML5 doctype. Cu excepția cazului în care aveți nevoie să modificați doctype pentru a fi mai compatibil cu alte formate utilizate în site-ul dvs., HMTL5 este opțiunea recomandată pentru design-urile web receptive.

7. Faceți clic pe Creați.

   Dialogul Salvare ca se deschide gata pentru salvarea unui fișier CSS.

8. Introduceți un nume pentru fișierul dvs. CSS și faceți clic pe Salvați.

   Se deschide un nou fișier HTML în spațiul de lucru Dreamweaver, dar nu este încă salvat. Fișierul CSS numit este salvat și numele său devine vizibil în panoul Fișiere.

   Notă: Spre deosebire de procesul de creare a altor tipuri de pagini în Dreamweaver, fișierul CSS este salvat mai întâi și fișierul HTML este salvat într-o etapă ulterioară.

9. Selectați Fișier → Salvează

   Se deschide caseta de dialog Salvează ca.

10. Introduceți un nume pentru fișierul HTML și faceți clic pe OK.

    Caseta de dialog Salvează ca se închide și în Dreamweaver apare o notificare care vă informează că aspectul grilei dvs. de fluid necesită două fișiere suplimentare: boilerplate. css și răspundeți. min. js.

11. Faceți clic pe OK pentru a copia placa de bază.css și răspundeți. min. js în dosarul site-ului dvs.

    Toate cele trei fișiere sunt adăugate în panoul Fișiere și veți reveni la noul fișier HTML desemnat în spațiul de lucru Dreamweaver.

    

12. Dați paginii un titlu introducând textul în câmpul Titlu din partea de sus a spațiului de lucru.

Și acest lucru completează procesul de creare a unui nou set de fișiere pentru aspectul rețelei fluide.