Video: CSS: Adding Custom Fonts 2024
De Janine Warner
Dacă sunteți nou în designul web sau ați creat pagini HTML de ani de zile, Adobe Dreamweaver CS6 este instrumentul ideal pentru construirea site-ului dvs. În versiunea CS6, veți găsi un nou ecran de întâmpinare și suport pentru cele mai recente fișiere de stil cascadă (CSS3) și HTML5. Dreamweaver este un program popular printre profesioniștii web profesioniști, precum și pe cei care doresc să construiască site-uri pentru hobby-uri, cluburi, familii și întreprinderi mici.
Ecranul de întâmpinare Adobe Dreamweaver CS6
Interfața grafică ușor de utilizat a Dreamweaver și o listă puternică de caracteristici îl fac o alegere populară printre designerii profesioniști de web, precum și de pasionați. Cu fiecare versiune nouă, Dreamweaver CS6 oferă funcții noi, dar tot veți găsi ecranul familiar de întâmpinare care vă va ajuta să începeți.
Dreamweaver CS6: Adăugarea de umbre de text cu CSS3
În Dreamweaver CS6, vă puteți îmbunătăți designul și vă puteți lăsa paginile mai profunde prin adăugarea de umbre de text cu reguli CSS3, cele mai recente tehnologii web. Adăugarea de umbre de text face ca cuvintele dvs. să fie mai ușor de citit, mai ales dacă designul dvs. are un fundal complex sau dacă culorile fundalului și textului nu au contrast.
Dreamweaver CS6 include suport pentru umbrele textului CSS3 când utilizați panoul Proprietăți din panoul Stiluri CSS. Puteți crea stiluri de clasă sau ID cu umbre de text și puteți adăuga umbre de text elementelor HTML existente prin definirea unui stil de etichetă, cum ar fi stilul de titlu 1 utilizat în imagine.
Codul CSS3 care creează acea umbră a textului este
h1 {text-shadow: 2px 2px 3px # 000;}
Numerele din cod specifică faptul că umbra de text trebuie extinsă la 2 pixeli spre dreapta și 2 pixeli de sub text, cu o estompare de 3 pixeli. În plus, umbra este creată cu culoarea neagră, specificată prin codul de culoare hexazecimal abreviat # 000.
Când creați reguli pentru umbrele de text, puteți specifica până la patru valori:
-
Orizontal și vertical: Sunt necesare primele două valori numerice și se specifică compensările orizontale și verticale - text (orizontal) și în partea dreaptă a textului (vertical).
-
Raza de estompare: A treia valoare specifică cantitatea de neclaritate din umbră. Dacă nu includeți raza de estompare, valoarea implicită este 0, ceea ce face umbra să apară ca o culoare solidă.
-
Culoare: A patra valoare specifică culoarea umbrei și poate fi definită utilizând un cod de culoare hexazecimal sau un cod de culoare RGBa.
Puteți adăuga o umbră de text utilizând panoul Proprietăți din partea de jos a panoului Stiluri CSS, după cum se arată în imagine.Pentru a face acest lucru, urmați acești pași:
-
Faceți clic pe linkul Adăugare proprietate din partea stângă a panoului Proprietăți CSS Stiluri.
-
Introduceți numele regulii stilului CSS3, umbra de text sau selectați regula stilului din lista derulantă.
După ce numele apare în partea stângă, o mică săgeată apare în partea dreaptă.
-
Faceți clic pentru a selecta săgeata din partea dreaptă a umbrei de text.
Apare o casetă.
-
Introduceți offseturile X și Y, raza de estompare și culoarea.
Site-uri web și resurse pentru designerii web
Designerii web experimentați - indiferent dacă folosesc Adobe Dreamweaver sau alte programe de web design - se referă adesea la resursele online pentru a-și păstra competențele și a adăuga caracteristici speciale pe site-urile lor. Această listă vă ușurează găsirea unor site-uri și resurse online care vă pot ajuta cu proiectele dvs. de web design.
-
Servicii de găzduire audio și video:
-
YouTube
-
Vimeo
-
SoundCloud
-
-
Blogging și programe CMS
-
Blogger
-
Joomla
-
MovableType
-
TypePad
-
Tumblr > WordPress
-
Servicii de partajare socială
-
-
Adăugați acest
-
Share Lockerz
-
Servicii de raportare a traficului:
-
-
Google Analytics
-
Yahoo! Web Analytics
-
HubSpot
-
Browsere web populare:
-
-
Apple Safari
-
Google Chrome
-
Microsoft Internet Explorer
-
Mozilla Firefox
-
Opera
-
Browser-ul
-
-
BrowserShots
-
Testele încrucișate ale browser-ului
-
Nisipul browserului din Spoon (fost Xenocode)
-
Resurse Dreamweaver, CSS și web design:
-
Dreamweaver Developer Center
-
-
Web Design Training at DigitalFamily. com
-
Conversii W3 HTML5 și CSS3 Resurse
-
A List Apart
-