Video: Как создать сайт мечты #1 - Adobe Dreamweaver CC (SMGroup) (Noiembrie 2024)
Adobe ar fi putut să se bazeze pe laurii săi când a actualizat Dreamweaver la ultima sa încarnare în serviciul Creative Cloud bazat pe abonament, sub denumirea de Dreamweaver CC. În incarnarea sa anterioară ca Dreamweaver CS6, parte a Adobe Suite Creative 6, editorul avansat al site-ului Adobe a avut deja o concurență serioasă sau deloc serioasă ca instrument pentru crearea și menținerea site-urilor web cu multiplă formă de astăzi. Dreamweaver CS6, de exemplu, a introdus machete web "grilă fluidă" gata de utilizare, care folosesc CSS pentru a schimba automat paginile web în funcție de dimensiunea ecranului, făcând ușor construirea unei singure utilizări a site-ului cu telefoane, tablete și desktop-uri fără complex. Codificare manuală CSS necesară anterior.
Noul Dreamweaver CC îmbunătățește funcția de grilă de fluid prin susținerea elementelor structurale HTML5, precum secțiuni și articole. De asemenea, adaugă un instrument de economisire la egalitate de efort, un nou proiectant CSS care utilizează o interfață grafică interactivă pentru modificarea proprietăților CSS precum umbrele și colțurile curbate, așa că nu trebuie decât să faceți clic și să trageți pentru a modifica cod CSS complex în timp ce vedeți rezultatele în real timp. Suportul complet pentru fonturile bazate pe Web - descărcate de pe serverele Adobe în timp ce browserul încarcă o pagină - facilitează crearea de modele atrăgătoare. De asemenea, ca și restul suitei Creative Cloud, Dreamweaver primește, de asemenea, o interfață simplificată și mai ușor de personalizat și funcționează identic atât sub Windows cât și cu OS X.
Pro și Semi-Pro
Dreamweaver este un instrument la nivel profesional care merită să-l aveți - dacă vă puteți permite - chiar dacă sunteți non-profesionist. Utilizatorii Dreamweaver pentru prima dată pot fi intimidați de multitudinea de meniuri și panouri de proprietăți în aspectul implicit, dar în curând devine clar cum să le utilizați pentru a obține acces rapid la controalele avansate asupra elementelor CSS sau pentru a comuta rapid între afișele care arată cum o pagină web va arăta atunci când este imprimată sau când este afișată pe ecrane de dimensiuni diferite. Designerii web avansați pot face clic pe un meniu de widget-uri UI bazate pe JavaScript în codul lor pentru a crea dialoguri pop-up, date-pickers, meniuri în stil de acordeon și orice altceva în repertoriul actual al efectelor UI. Dar utilizatorii chiar și mai puțin avansați pot crea site-uri flexibile compatibile HTML5, care arată bine pe orice platformă.
Începeți să țeseți vise
Pornind de la o pagină goală sau un aspect de eșantion, faceți clic pe elemente dintr-un panou Insert pentru a adăuga elemente precum șabloane (cu regiuni editabile și neadecvate), multimedia (HTML5 sau Flash) și caracteristici HTML standard. Ecranul implicit este împărțit într-un panou de cod și într-un panou de design WYSIWYG, dar puteți alege unul sau altul, sau puteți face panoul de proiectare „Live” pentru a vizualiza conținut media ca video sau conținut care va fi difuzat dintr-o bază de date atunci când pagina apare într-un browser. Un lucru pe care îl admir în legătură cu Dreamweaver este faptul că nu favorizează tehnologiile proprii ale Adobe, cum ar fi Flash peste standarde deschise, cum ar fi video HTML5, dar oferă suport egal pentru ambele - și chiar oferă un player HTML5 cu aspect mai bun și mai folositor decât cel integrat. Flash Player.
Când construiți o pagină cu funcția de grilă fluidă a Dreamweaver, aplicația creează mai întâi o pagină care conține o grilă de coloane verticale care sunt vizibile în Dreamweaver, dar nu atunci când pagina apare într-un browser. În mod implicit, o pagină proiectată pentru telefoane se încadrează în patru dintre aceste coloane invizibile. Când aceeași pagină este afișată pe o tabletă, aceasta umple opt coloane și douăsprezece coloane atunci când sunt afișate pe o mașină desktop.
Când comutați între dimensiunile ecranului în fereastra de editare a Dreamweaver, conținutul site-ului dvs. se rearanjează pentru a se potrivi cu lățimea specificată pentru tipul specific de ecran și puteți utiliza panoul CSS Designer pentru a regla forma, dimensiunea și alte proprietăți. a elementelor individuale care să se potrivească diferitelor dimensiuni ale ecranului.
