Vídeo: Как создать сайт мечты #1 - Adobe Dreamweaver CC (SMGroup) (De novembre 2024)
Adobe podria haver descansat en els seus llorers en actualitzar Dreamweaver a la seva última encarnació al servei Creative Cloud basat en subscripcions com Dreamweaver CC. En la seva anterior encarnació com Dreamweaver CS6, part de Creative Suite 6 d'Adobe, l'editor de llocs web avançat d'Adobe ja tenia poca o cap competència seriosa com a eina per crear i mantenir llocs web multiplataforma actuals. Dreamweaver CS6, per exemple, va introduir dissenys web preparats per a la "grilla fluida" que s'utilitzen CSS per canviar de forma automàtica les pàgines web segons la mida de la pantalla, facilitant la creació d'un lloc web únic amb telèfons, tauletes i escriptoris sense el complex. Codificació manual CSS prèviament requerida.
El nou Dreamweaver CC millora la funció de xarxa de fluids donant suport a elements estructurals HTML5 com ara Seccions i articles. També afegeix una eina d’estalvi d’esforç igualment nou, un nou dissenyador CSS que utilitza una interfície gràfica interactiva per modificar propietats CSS com ombres i cantonades corbes, per la qual cosa només cal fer clic i arrossegar per modificar el codi CSS complex mentre es veuen els resultats reals. temps. El suport complet per als tipus de lletra basats en la web (descarregats dels servidors d'Adobe mentre el navegador carrega una pàgina) facilita la creació de dissenys atractius. Així mateix, com la resta de la suite Creative Cloud, Dreamweaver també obté una interfície simplificada i fàcilment personalitzable, i funciona de manera idèntica tant a Windows com a OS X.
Pro i Semi-Pro
Dreamweaver és una eina a nivell professional que val la pena tenir, si s’ho pot permetre, encara que no sigui professional. Els usuaris de Dreamweaver per primera vegada es poden veure intimidats per la multitud de menús i panells de propietats en la disposició predeterminada, però aviat es veurà clar com utilitzar-los per obtenir accés ràpid a controls avançats sobre elements CSS o per canviar ràpidament entre pantalles que mostren com una pàgina web es veurà quan s'imprimeix o es mostra en pantalles de diferents mides. Els dissenyadors avançats de web poden fer clic en un menú de widgets de la interfície d'usuari basada en JavaScript al seu codi per crear diàlegs emergents, recollidors de dates, menús a l'estil de l'acordió i tot el que hi ha al repertori actual d'efectes de la interfície d'usuari. Però els usuaris encara menys avançats poden crear llocs web compatibles amb HTML5 flexibles que es vegin bé a qualsevol plataforma.
Comença a teixir somnis
A partir d’una pàgina en blanc o d’una disposició de mostra, feu clic en els elements d’un plafó Insereix per afegir elements com plantilles (amb regions editables i no editables), multimèdia (HTML5 o Flash) i funcions HTML estàndard. La pantalla predeterminada està dividida en un panell de codi i un panell de disseny WYSIWYG, però podeu triar un o un altre, o fer que el plafó de disseny sigui "En viu" per visualitzar contingut multimèdia com el vídeo o contingut que es servirà des d'una base de dades quan la pàgina apareix en un navegador. Una cosa que admiro de Dreamweaver és que no afavoreix les tecnologies pròpies d'Adobe com Flash sobre estàndards oberts com el vídeo HTML5, però dóna suport igual als dos, i fins i tot proporciona un reproductor de vídeo HTML5 millor i més usable que el seu integrat. Reproductor flash.
Quan creeu una pàgina amb la funció de quadrícula fluida de Dreamweaver, l'aplicació crea primer una pàgina que conté una graella de columnes verticals visibles a Dreamweaver, però no quan apareix la pàgina en un navegador. De manera predeterminada, una pàgina dissenyada per a telèfons entra en quatre d’aquestes columnes invisibles. Quan es mostra la mateixa pàgina en una tauleta, omple vuit columnes i dotze columnes quan es mostren a una màquina d'escriptori.
Quan canvieu de mida de pantalla a la finestra d’edició de Dreamweaver, el contingut del lloc es reordena per adaptar-se a l’amplada que especifiqueu per al tipus específic de pantalla i podeu utilitzar el tauler CSS Designer per ajustar la forma, la mida i altres propietats. d’elements individuals per adaptar-se a les diferents mides de pantalla.