Dopo aver creato una nuova pagina con un layout CSS in Dreamweaver, hai a disposizione un numero apparentemente infinito di opzioni per modificarla, ma prima devi determinare quali stili nel foglio di stile corrispondono agli elementi che desideri modificare.
Come probabilmente puoi immaginare, puoi modificare gli stili in un layout CSS in molti modi per creare i tuoi progetti.
Dopo aver modificato gli stili esistenti per ottenere il design di base della pagina nel modo desiderato, puoi creare tutti gli stili aggiuntivi che desideri.
È possibile utilizzare queste stesse istruzioni di base con qualsiasi layout CSS incluso in Dreamweaver. Per modificare gli stili in un layout CSS, segui questi passaggi:
Aprire un file di pagina basato su un layout CSS di Dreamweaver e scegliere Finestra → Stili CSS (o fare clic sulla scheda Designer CSS per espandere il pannello).
Il pannello CSS Designer si apre o si espande.
Fare clic per selezionare il nome del foglio di stile nel pannello Sorgenti nella parte superiore di CSS Designer.
Tutti gli stili associati alla nuova pagina sono elencati nel pannello Selettori.
Seleziona il nome di qualsiasi stile elencato nel pannello Selettori CSS Designer.
Le regole CSS corrispondenti definite per lo stile sono visualizzate nel pannello Proprietà, nella parte inferiore del pannello Designer CSS. Fare clic sull'elenco degli stili e rivedere le regole corrispondenti è un buon modo per ottenere una rapida panoramica del design e per vedere dove sono memorizzate le varie opzioni di formattazione della pagina.
I tag HTML5 header, .nav e footer controllano le sezioni principali della pagina. Ad esempio, lo stile dell'intestazione include una regola che rende il colore di sfondo verde. Pertanto, per modificare il colore dell'area dell'intestazione nella parte superiore della pagina, è necessario modificare l'impostazione del colore di sfondo nella regola dell'intestazione.
Per modificare le impostazioni a livello di pagina, come il colore di sfondo della pagina o il carattere principale, le dimensioni e il colore del testo utilizzato in tutta la pagina, procedi nel seguente modo:
Nel pannello Selettori CSS Designer, seleziona lo stile denominato body.
Le proprietà definite nella regola di stile selezionata vengono visualizzate nel pannello Proprietà.
Fare clic sull'icona T nella parte superiore del pannello Proprietà e modificare o aggiungere il carattere desiderato e altre impostazioni di testo.
Puoi modificare il tipo di carattere, la dimensione, lo stile e lo spessore. Per modificare lo spazio tra le righe di testo, modificare l'altezza della riga.
Scorri verso il basso fino all'area Sfondo del pannello Proprietà e usa l'area dei colori nel campo Colore di sfondo per specificare un colore per l'intero sfondo della pagina.
In alternativa, puoi inserire qualsiasi codice colore esadecimale nel campo Colore di sfondo o utilizzare il contagocce per campionare qualsiasi colore. Per aggiungere un'immagine di sfondo, fai clic nel campo URL nella sezione Sfondo, quindi fai clic sul pulsante Sfoglia che viene visualizzato e seleziona l'immagine che desideri utilizzare come sfondo. Usa le icone Ripetizione sfondo per specificare come l'immagine di sfondo deve ripetersi sulla pagina.
Apportare altre modifiche o aggiunte alla regola di stile.
Le modifiche alle regole di stile nel pannello Proprietà vengono salvate automaticamente e applicate al contenuto formattato con la regola.
Per modificare la larghezza o altre impostazioni delle aree di contenuto principali, che controllano le dimensioni complessive della pagina e dell'intestazione, del piè di pagina e della barra laterale, procedi nel seguente modo:
Per modificare la larghezza dell'intera area di disegno principale:
Fare clic sullo stile .container nel pannello Selettori del pannello Designer CSS.
Le proprietà della regola di stile .container sono visualizzate nel pannello Proprietà, dove puoi anche modificare lo stile.
Modifica le dimensioni nel campo Larghezza o digita un nuovo numero per la larghezza della pagina desiderata.
La larghezza del design della pagina viene modificata automaticamente in base alla dimensione inserita. Quando modifichi la larghezza dello stile .container, cambi la larghezza dell'intero disegno perché tutte le
tag e altri elementi sono contenuti nel
formattati con lo stile .container - e sono tutti pronti per espandersi per riempire il .container
.
Per modificare la dimensione dell'area del contenuto della pagina, seleziona lo stile denominato .content e specifica la dimensione e le altre opzioni desiderate nel pannello Proprietà.
Se modifichi la larghezza dell'area del contenuto in un layout che include una barra laterale, devi modificare anche la larghezza della barra laterale.
Per modificare il colore di sfondo di qualsiasi stile sulla pagina, fai clic sul nome dello stile corrispondente e modifica le impostazioni nella sezione Sfondo del pannello Proprietà.
Ad esempio, nei layout CSS in Dreamweaver, la barra laterale è definita in uno stile denominato .sidebar1. Pertanto, per modificare il colore di sfondo, fare clic su .sidebar1 nel pannello Selettori, selezionare la categoria Sfondo nel pannello Proprietà e selezionare il colore desiderato. Allo stesso modo, per cambiare il colore di sfondo dell'intestazione, seleziona lo stile denominato intestazione nel pannello Selettori e usa bene il colore.
Per aggiungere un'immagine all'intestazione:
Seleziona l'immagine segnaposto etichettata Inserisci logo e premi il tasto Canc o Backspace.
Scegli Inserisci → Immagine → Immagine e seleziona un'immagine utilizzando la finestra di dialogo Seleziona origine immagine.
Sostituisci il testo e inserisci immagini nella barra laterale e nelle aree principali del contenuto.
Puoi aggiungere o sostituire testo e inserire immagini in qualsiasi pagina creata da un layout CSS, proprio come faresti in qualsiasi altra pagina web.
Scegli File → Salva tutto per salvare la pagina e gli stili.
Puoi utilizzare lo strumento Istantanea in Adobe Acrobat CS5 per selezionare sia testo che immagini e creare un'immagine di una determinata area all'interno di un file PDF. Il risultato viene comunemente chiamato screenshot di una sezione all'interno di un file PDF. Il risultato è un'immagine e il tuo testo non è […]
Progettato per ricercatori e scienziati, le capacità di misurazione in Photoshop CC sono piuttosto potenti. Puoi misurare qualsiasi cosa e contare il numero di qualsiasi cosa in un'immagine tecnica, magari da un microscopio o un telescopio. Se conosci la dimensione esatta di qualsiasi elemento in un'immagine, puoi scoprire praticamente qualsiasi cosa […]
Quando utilizzi gli strumenti Fluidifica in Adobe Creative Suite 5 (Adobe CS5) Illustrator, puoi piegare gli oggetti, renderli ondulati, appiccicosi o appuntiti, creando distorsioni da semplici a complesse. Gli strumenti Fluidifica possono realizzare tutti i tipi di distorsioni creative o stravaganti (a seconda di come lo guardi) ai tuoi oggetti. Voi […]
Quando hai del testo nel tuo progetto Adobe XD, puoi iniziare a modificare le proprietà del testo. Queste proprietà includono Famiglia di caratteri, Dimensione carattere, Spessore carattere, Allineamento, Spaziatura caratteri (crenatura e tracciamento), Interlinea (interlinea), Riempimento, Bordo (tratto), Ombra (ombra esterna) e Sfocatura sfondo. Quindi esaminiamo come vengono applicate queste proprietà. A proposito di leggibilità e carattere […]
Puoi utilizzare InDesign per creare e modificare la grafica del codice QR. I codici QR sono una forma di codice a barre in grado di memorizzare informazioni come parole, numeri, URL o altre forme di dati. L'utente esegue la scansione del codice QR utilizzando la fotocamera e il software su un dispositivo, come uno smartphone, e il software utilizza […]
Proprio come in Adobe Illustrator, le tavole da disegno di Photoshop offrono la possibilità di creare pagine o schermate separate all'interno di un documento. Questo può essere particolarmente utile se stai costruendo schermi per un'applicazione mobile o una piccola brochure. Puoi pensare a una tavola da disegno come a un tipo speciale di gruppo di livelli creato utilizzando il pannello Livelli. Suo […]
Avvolgere il testo in Adobe Illustrator CC non è esattamente come avvolgere un regalo: è più facile! Un ritorno a capo forza il testo a avvolgere un elemento grafico, come mostrato in questa figura. Questa caratteristica può aggiungere un po' di creatività a qualsiasi pezzo. L'elemento grafico sta costringendo il testo a avvolgerlo. Innanzitutto, crea […]
Quando si progetta in Adobe Illustrator CC, spesso è necessario che una forma abbia le dimensioni esatte (ad esempio, 2 x 3 pollici). Dopo aver creato una forma, il modo migliore per ridimensionarla a misure esatte è utilizzare il pannello Trasforma, mostrato in questa figura. Avere l'oggetto selezionato e quindi scegliere Finestra → Trasforma in […]
Scopri come applicare la trasparenza alla grafica SVG in Illustrator. Scopri come produrre SVG con sfondi trasparenti e applicare effetti di trasparenza.
Dopo aver importato le tue immagini in Adobe XD, non hai un grande controllo sulla modifica, ma puoi ridimensionare e ruotare le immagini proprio come faresti con qualsiasi altra forma. Puoi anche arrotondare facilmente gli angoli di un'immagine importata utilizzando i widget degli angoli. Mascherare le tue immagini Definendo una forma chiusa […]
