Modelul "cauciuc" CSS bazat pe grila
Amplasarea site-ului ar trebui să răspundă redimensionării dispozitivului pe care este afișat și să se adapteze la acestea. Modelele "cauciuc" oferă o modalitate vizuală de a crea diferite machete care se potrivesc cu dispozitivele pe care este afișat site-ul Web.
Crearea unui aspect "din cauciuc"
1. Selectați "File" "Creați" un aspect "din cauciuc".
2. Valoarea implicită pentru numărul de coloane din rețea este afișată în centrul dispozitivului. Pentru a ajusta numărul de coloane pentru dispozitive, modificați această valoare.
3. Pentru a seta lățimea paginii în raport cu dimensiunea ecranului, setați valoarea în procente.
4. De asemenea, puteți schimba lățimea câmpului intern. Câmpul intern este spațiul dintre cele două coloane.
5. Specificați setările CSS pentru pagină. Aveți posibilitatea să creați un fișier sau să atașați un fișier existent.
Când creați un aspect pentru prima dată, parametrul pentru crearea fișierului este dezactivat. Dacă faceți clic pe butonul Nou, vi se va solicita să creați și să salvați fișierul CSS.
Pentru a trece la modul de dispunere pentru alte dispozitive, faceți clic pe pictograma corespunzătoare din setările din ecranul Design.
6. Salvați fișierul. Când salvați un fișier HTML, vi se solicită să salvați fișierele dependente, cum ar fi boilerplate.css și HTML5shiv, în folderul de pe computer. Specificați locația și faceți clic pe butonul "Copiere".
Fișierul Boilerplate.css se bazează pe placa de bază HTML5. Acesta este un set de stiluri CSS care oferă o afișare consistentă a unei pagini web pe diferite dispozitive.
Introducerea elementelor dintr-o structură "din cauciuc"
Elementele structurii "cauciuc" și alte elemente sunt indicate în panoul "Structură" sau în parametrii structurii ("Insert> Layout").
Dreamweaver 12.2 introduce trei elemente noi: o listă neordonată, o listă ordonată și un element de listă.
Următoarele elemente nu acceptă interfața de utilizator din meniu, dar pot fi definite ca "cauciuc" în Dreamweaver: H1-H6, imagine, etichetă P. Ele pot fi adăugate în vizualizarea de cod folosind HTML și CSS.
Alegeți Insert> Layout.
Selectați elementul pe care doriți să îl inserați. Elementul selectat va fi inserat în aspect.
(12.2) În dialogul care se deschide, selectați clasa sau introduceți valoarea identificatorului. Meniul "Clasă" afișează clasele din fișierul CSS specificat la crearea paginii.
(Actualizare 12.2) Când selectați un element inserat, sunt afișate opțiuni pentru ascunderea, copierea, blocarea sau ștergerea elementului Div. Pentru elementele Div suprapuse unul peste celălalt, este afișat un parametru care vă permite să schimbați elemente Div în locații.
A - Înlocuire Div - Modifică elementul selectat în prezent la un element mai mare sau mai mic.
B - Ascunde - Ascunde elementul.
C - Mutare în linie - Mută elementul pe o linie.
D - Duplicat - Duplică articolul selectat în mod curent. Stilul CSS atașat elementului este, de asemenea, duplicat.
E Șterge structura - Elimină HTML, precum și CSS. Pentru a șterge numai codul HTML, apăsați tasta Ștergere.
Cauciucuri "de pe pagină pot fi ocolite ciclic folosind tastele săgeată stânga și dreapta. Selectați marginea elementului și apăsați tasta săgeată.
Elementele născute
Pentru a pune elemente "cauciuc" în alte aceleași elemente, asigurați-vă că focalizarea este în interiorul elementului părinte. Apoi introduceți elementul copil dorit.
Se acceptă și copierea elementelor imbricate. Funcția de duplicare imbrăcată copiază HTML (elementul selectat) și creează CSS corespunzător elementului "cauciuc". Elementele absolute conținute în elementul selectat sunt poziționate corespunzător. Articolele imbricate pot fi create folosind butonul Duplicat.
Când un element părinte este șters, CSS corespunzător elementului, copiilor acestuia și codului HTML asociat sunt șterse. Articolele imbricate pot fi, de asemenea, șterse folosind butonul Ștergere (Ctrl + Ștergere combinație de taste).
Articole similare
Trimiteți-le prietenilor: