Nwlapcug.com


Tutorial per i CSS in Dreamweaver



Cascading Style Sheets (CSS) è una forma avanzata di codifica della pagina Web HTML che fornisce maggiore design e opzioni di formattazione. Invece di applicare singoli frammenti di codice HTML per ogni blocco di testo o la sezione della pagina, CSS consente di definire le regole di "stile" e classi, simile allo stile imposta in word processing e pagina software di impaginazione. È quindi possibile applicare gli stili agli elementi nelle tue pagine---fare la formattazione più veloce e più facile, nonché garantire uniformità in tutta la pagina o un intero sito Web. Built-in di Dreamweaver CSS caratteristica sembra complicato all'inizio, ma non dopo averlo provato un paio di volte.

Istruzioni

Utilizzando i CSS in Dreamweaver

1

Avviare un nuovo documento HTML di Dreamweaver o aprire un documento esistente in cui si desidera creare regole CSS.

2

Vai al pannello Proprietà e fare clic sul pulsante "CSS" situato sul lato sinistro del pannello. Questo modo Dreamweaver in modalità CSS.

3

Clicca la "regola di destinazione" a discesa nel pannello Proprietà e scegli "< nuova regola CSS >".

4

Fare clic sul pulsante "Modifica regola" nel pannello Proprietà. Verrà visualizzata la finestra di dialogo nuova regola CSS dove è denominare la nuova regola di stile e definire il suo comportamento.

5

Scegliere l'elenco a discesa "Tipo di selezione". Ci sono quattro opzioni su questa goccia-goccia, che hanno nomi descrittivi che spiega quello che fanno. Ad esempio, "Classe (può essere applicato a qualsiasi elemento HTML)" consente di che creare una classe di stile che è possibile applicare a qualsiasi testo nel documento. "Composto (in base alla selezione effettuata)" consente di creare una classe di stile basata su testo selezionato prima di cliccare "Modifica regola."

6

Fare clic nel campo "Nome del selettore" e digitare il nome del tuo stile. A seconda di quale tipo di selezione scelto nel passaggio precedente, certi tipi di regole di stile richiedono specifiche convenzioni di denominazione. Ad esempio, "Classe (può essere applicato a qualsiasi elemento HTML)" richiede che il nome di stile inizia con un punto (.). Quindi, se si definisce uno stile di titolo, ad esempio, è possibile denominare il primo livello di intestazione ".h1." È possibile denominare il corpo del testo "Body". Dreamweaver verrà chiesto se la convenzione di denominazione è sbagliata e vi fornirà una spiegazione di come nome per lo stile.

7

Fare clic su "Definizione della regola" elenco a discesa e scegliere come si desidera che Dreamweaver per applicare lo stile. Ci sono due opzioni: "Solo in questo documento" Crea il tag di stile nella sezione HTML Head della pagina corrente. Gli stili sono disponibili solo per questa pagina. "(New Style Sheet File)" crea un file CSS (. CSS) esterno.

La potenza dei CSS è che è possibile formattare più pagine---un intero sito---basato sullo stesso set di regole CSS. Questo si ottiene con file CSS esterni. Se si sceglie "(New Style Sheet File)," quando si fa clic su "OK" nella finestra di dialogo, Dreamweaver consente di denominare il file CSS. Se si utilizza un solo file CSS per l'intero sito, la convenzione di denominazione standard è "Styles. css". Tuttavia, un sito può avere molti fogli di stile---uno per le intestazioni, un altro per il piè di pagina, intestazioni laterali. Assegnare ai file CSS nomi significativi.

Dopo aver creato il vostro primo file esterno di CSS, la prossima volta che si apre nuova regola CSS, il file viene visualizzato in discesa la definizione della regola. Quando si crea un altro stile, assicurarsi che si aggiunge al file CSS esterno appropriato.

8

Fare clic su "OK" per visualizzare la finestra di dialogo "Regola CSS definizione for...". Questo è dove si formatta il tuo stile, come font, colore, dimensione, stile (grassetto, corsivo). Le opzioni qui sono estese, consentendo piuttosto elaborare formattazione, tra cui caselle di testo, sfondi e molte altre scelte di formattazione. Impostare tutta la formattazione desiderata per questo stile e quindi fare clic su "OK".

9

Ripetere questa procedura per creare le regole di stile aggiuntive. Per applicare uno stile a un blocco di testo, è sufficiente fare clic nel paragrafo e quindi scegliere lo stile desiderato tra la "regola di destinazione" a discesa nel pannello Proprietà.

Consigli & Avvertenze

  • Dreamweaver viene fornito con vari modelli CSS predefiniti. Puoi iniziare con uno di questi, piuttosto che la creazione di tutti gli stili da zero. Fare clic su "File" sulla barra dei menu e scegliere "Nuovo". Verrà visualizzata la finestra di dialogo "Nuovo documento". Fare clic su "Nuovo da esempio" nella colonna di sinistra e quindi scegliere "set di stile CSS. Quindi, scegliere uno dei modelli nella colonna di destra.
  • È possibile modificare la formattazione in qualsiasi momento con modifica regola di stile. Quando si modifica uno stile, tutto il testo con la regola di stile del documento - etichetta o sito, quando si utilizzano il file CSS esterni..--cambierà automaticamente.
  • Quando caricare le pagine a Internet, assicurati di caricare anche i file CSS esterni.