Cum să editați stilurile într-un layout CSS în Dreamweaver - manechine

După ce creați o pagină nouă cu un aspect CSS în Dreamweaver, aveți un număr aparent infinit de opțiuni pentru editare, dar mai întâi trebuie să determinați ce stiluri din foaia de stil corespund elementelor pe care doriți să le modificați.

După cum probabil vă imaginați, puteți edita stilurile într-un aspect CSS în multe moduri pentru a vă crea propriile desene sau modele.

După ce ajustați stilurile existente pentru a obține designul de bază al paginii așa cum doriți, puteți crea cât mai multe stiluri suplimentare după cum doriți.

Cum să verificați stilurile disponibile și să efectuați modificări de bază

Puteți utiliza aceleași instrucțiuni de bază cu orice aspect CSS inclus în Dreamweaver. Pentru a edita stilurile într-un aspect CSS, urmați acești pași:

1. Deschideți un fișier de pagină bazat într-un aspect CSS Dreamweaver și alegeți Window → CSS Stiys (sau faceți clic pe fila CSS Designer pentru a extinde panoul).

   Panoul CSS Designer se deschide sau se extinde.

2. Faceți clic pentru a selecta numele foii de stil din panoul Surse din partea de sus a CSS Designer.

   Toate stilurile asociate cu noua pagină sunt listate în panoul Selectori.

   

3. Selectați numele oricărui stil afișat în panoul Selectori de design CSS.

   Regulile CSS corespunzătoare pentru stil sunt afișate în panoul Properties din partea de jos a panoului CSS Designer. Făcând clic pe lista de stiluri și examinând regulile corespunzătoare este o modalitate bună de a obține o prezentare generală rapidă a designului și de a vedea unde sunt stocate diferitele opțiuni de formatare a paginilor.

Antetul HTML5,. nav și etichete de subsol controlează secțiunile principale ale paginii. De exemplu, stilul antetului include o regulă care face culoarea de fundal verde. Astfel, pentru a schimba culoarea suprafeței antetului în partea de sus a paginii, modificați setarea culorii de fundal în regula antetului.

Cum puteți edita setările la nivel de pagină

Pentru a modifica setările la nivel de pagină - cum ar fi culoarea de fundal a paginii sau fața, dimensiunea și culoarea principalului font al textului utilizat pe întreaga pagină, urmați acești pași:

1. În panoul Selectori de design CSS, selectați stilul numit corp.

   Proprietățile definite în regula de stil selectat sunt afișate în panoul Proprietăți.

   

2. Faceți clic pe pictograma T din partea de sus a panoului Proprietăți și modificați sau adăugați fontul dorit și alte setări de text.

   Puteți schimba chipul, dimensiunea, stilul și greutatea fontului. Pentru a modifica spațiul dintre liniile de text, schimbați înălțimea liniei.

3. Derulați în jos până la zona Background din panoul Properties și utilizați culoarea bine în câmpul Background-Color pentru a specifica o culoare pentru întregul fundal al paginii.

   Alternativ, puteți introduce orice cod de culoare hexazecimal în câmpul Background-Color sau utilizați pipeta pentru a preleva orice culoare. Pentru a adăuga o imagine de fundal, faceți clic în câmpul URL din secțiunea de fundal, apoi faceți clic pe butonul Răsfoire care apare și selectați imaginea pe care doriți să o afișați ca fundal. Utilizați pictogramele Background-Repeat pentru a specifica modul în care imaginea de fundal trebuie repetată pe pagină.

4. Faceți orice alte modificări sau adăugiri la regula stilului.

Modificările aduse regulilor de stil din panoul Proprietăți sunt salvate automat și aplicate conținutului formatat conform regulii.

Modificarea zonei de conținut

Pentru a modifica lățimea sau alte setări ale zonelor principale de conținut, care controlează dimensiunea generală a paginii și antetul, subsolul și bara laterală, urmați acești pași:

1. Pentru a schimba lățimea întregii zone principale de proiectare:

   1. Faceți clic pe. container în panoul Selectors din panoul CSS Designer.

      Proprietățile. regula stilului de container sunt afișate în panoul Proprietăți, unde puteți de asemenea să modificați stilul.

   2. Modificați dimensiunea în câmpul Lățime sau introduceți un număr nou pentru lățimea dorită a paginii.

      Lățimea designului paginii este modificată automat în funcție de dimensiunea introdusă. Când modificați lățimea. stilul de container, modificați lățimea întregului design, deoarece toate etichetele și alte elemente sunt conținute în formatat cu. container stil - și toate acestea sunt setate să se extindă pentru a umple. container.

2. Pentru a modifica dimensiunea zonei de conținut a paginii, selectați stilul numit. conținut și specificați dimensiunea și alte opțiuni pe care le doriți în panoul Proprietăți.

   Dacă schimbați lățimea zonei de conținut într-un aspect care include o bara laterală, trebuie să modificați și lățimea barei laterale.

3. Pentru a modifica culoarea de fundal a oricărui stil de pe pagină, faceți clic pe numele stilului corespunzător și modificați setările din secțiunea Background din panoul Properties.

   De exemplu, în layout-urile CSS în Dreamweaver, bara laterală este definită într-un stil numit. sidebar1. Astfel, pentru a schimba culoarea de fundal, ați face clic pe. bara laterală1 din panoul Selectori, selectați categoria Fundal din panoul Proprietăți și selectați culoarea dorită. În mod similar, pentru a schimba culoarea de fundal a antetului, selectați stilul numit antet în panoul Selectori și utilizați bine culoarea.

   

4. Pentru a adăuga o imagine în antet:

   1. Selectați imaginea substituentului marcat Insert Logo și apăsați tasta Delete sau Backspace.

   2. Selectați Inserați → Imagine → Imagine și selectați o imagine utilizând caseta de dialog Selectare sursă imagine.

5. Înlocuiți textul și inserați imaginile în bara laterală și în zonele cu conținut principal.

   Puteți să adăugați sau să înlocuiți textul și să inserați imaginile în orice pagină creată dintr-un aspect CSS, la fel ca în orice altă pagină web.

6. Selectați Fișier → Salvați tot, pentru a salva pagina și stilurile.