Nuovo layout a griglia fluida Dreamweaver CS6

• Aprile 27, 2024

Se sviluppi siti Web semplici o CMS complessi, hai sempre in mente questa domanda fastidiosa: sto facendo tutto il possibile per indirizzare tutti i tipi di pubblico e risoluzioni dello schermo? Bene, Dreamweaver^R CS6 ha nuove funzionalità che rendono questo un compito più semplice.

In passato, era necessario creare un file CSS diverso per ogni diversa risoluzione dello schermo e utilizzare la media query per assegnare il file CSS richiesto. Ciò ha richiesto molto tempo e si è aggiunto al costo complessivo dello sviluppo del sito, che è stata una brutta notizia sia per lo sviluppatore che per il cliente. Dreamweaver CS6 ha impiegato molto lavoro nella creazione di siti Web adattivi.

Questo nuovo processo di flusso di lavoro dipende dal nuovo layout a griglia fluida che è in qualche modo simile a un modello iniziale con layout e tipografia predefiniti per ciascuna risoluzione dello schermo per il tuo sito Web.

1. Basta fare clic su File - Nuovo layout griglia fluido dalla barra dei menu.
   
   
2. Nella finestra di dialogo Nuovo documento, verranno visualizzate le impostazioni predefinite per questa nuova pagina Web adattiva. La larghezza è fissa per ciascuna delle diverse risoluzioni dello schermo.
   
   Mobile 480px
   Tabella 768 px
   Desktop 1232px
   
   
3. Hai la possibilità di modificare il numero predefinito di colonne e la percentuale di larghezza della colonna per ciascuna risoluzione dello schermo. I valori predefiniti sono:
   
   Mobile 5 colonne - 91%
   Tablet 8 colonne - 93%
   Desktop 10 colonne - 90%
   
   
4. L'area di lavoro predefinita può mostrare il codice e le viste di progettazione. Come puoi vedere nella vista di progettazione, il nuovo file ha già un tag div. È possibile modificare l'ID e la classe predefiniti per il div nel pannello Proprietà.
   
   Naturalmente, la tua pagina web avrà bisogno di più di un div. Quindi possiamo aggiungere più div per intestazione, navigazione, principale, a parte e piè di pagina.
   
   
5. Per aggiungere un nuovo div, scegliete Inserisci tag div layout fluido griglia nel pannello Inserisci.
   
   
6. Nella finestra di dialogo, è possibile assegnare un nome all'ID per il tag.
   
   
7. Dopo aver aggiunto tutti i principali div della nostra pagina, possiamo fare clic e trascinarli per riposizionarli all'interno della griglia.
   
   

Si suggerisce di iniziare a costruire la versione mobile del nostro sito e di passare alle dimensioni più grandi. Puoi facilmente confrontare i risultati visivi mentre lavori utilizzando lo Switcher di risoluzione per risoluzioni mobili, tablet e desktop.

Quando salviamo il nostro layout, otteniamo un file HTML5 e CSS3 che funzionerà per tutte e tre le risoluzioni dello schermo. Se diamo un'occhiata all'interno di questi file, possiamo trovare informazioni su come funzionano i file per creare la nostra pagina Web adattiva.

* Adobe mi ha fornito una copia di questo software a scopo di revisione.

Copyright 2018 Adobe Systems Incorporated. Tutti i diritti riservati. Le schermate dei prodotti Adobe sono state ristampate con l'autorizzazione di Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Catalyst Flash e Flash Paper è / sono [a] marchi registrati o marchi commerciali di Adobe Systems Incorporated negli Stati Uniti e / o in altri paesi.

Istruzioni Video: Creating Adaptive Designs Using Fluid Grid Layouts in Dreamweaver CS6 (Aprile 2024).