Tutorial per i CSS in Dreamweaver

March 7

Tutorial per i CSS in Dreamweaver


Cascading Style Sheets (CSS) è una forma avanzata di codifica pagina web HTML che fornisce maggiori opzioni di progettazione e di formattazione. Invece di applicare i singoli frammenti di codice HTML per ogni blocco di testo o sezione della pagina, CSS consente di definire regole "stile" e le classi, in modo simile ai set di stile di elaborazione di testi e software di impaginazione. È quindi possibile applicare gli stili agli elementi sulle tue pagine --- rendendo la formattazione più semplice e veloce, oltre a garantire l'uniformità in tutta la pagina o un intero sito web. caratteristica CSS built-in di Dreamweaver sembra complicato in un primo momento, ma non dopo aver provato un paio di volte.

istruzione

Utilizzando i CSS in Dreamweaver

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

2 Vai al pannello Proprietà e fare clic sul pulsante "CSS" che si trova sul lato sinistro del pannello. Questo mette Dreamweaver in modalità CSS.

3 Fare clic su "Regola mirata" discesa nel pannello Proprietà e scegliere "<nuova regola CSS>".

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

5 Fare clic sul "Tipo di selezione" a discesa. Ci sono quattro opzioni su questa goccia-goccia, che hanno nomi descrittivi che spiegano quello che fanno. Ad esempio, "Classe (può applicare a qualsiasi elemento HTML)" consente di creare una classe di stile si può applicare a qualsiasi testo nel documento. "Compound (in base alla selezione)" consente di creare una classe di stile in base al testo selezionato prima di fare clic su "Modifica regola."

6 Fare clic nel campo "Nome Selector" e digitare il nome tuo stile. A seconda del tipo di selezione si è scelto nel passaggio precedente, alcuni tipi di regole di stile richiedono specifiche convenzioni di denominazione. Ad esempio, "Classe (può applicare a qualsiasi elemento HTML)" richiede che il nome dello stile inizia con un punto (.). Quindi, se si definisce uno stile di voce, per esempio, è possibile chiamare il primo livello di titolo ".h1." Si potrebbe chiamare il corpo del testo ".body". Dreamweaver verrà chiesto se la convenzione di denominazione è sbagliato, e vi fornirà una spiegazione di come dare un nome allo stile.

7 Fare clic su "Definizione delle regole" a discesa e scegliere come Dreamweaver per applicare lo stile. Ci sono due opzioni: "Questo documento solo" crea le tag di stile nella sezione head HTML della pagina corrente. Gli stili sono disponibili solo per questa pagina. "(New Style Sheet File)" crea un file esterno CSS (css).

La potenza di CSS è che è possibile formattare diverse pagine --- --- un intero sito in base alla stessa serie di regole CSS. Questo risultato è ottenuto con i file CSS esterni. Se si sceglie "(Nuovo file foglio di stile)," quando si fa clic su "OK" nella finestra di dialogo, Dreamweaver richiede di assegnare un nome al file CSS. Se si utilizza un solo file CSS per l'intero sito, lo standard convenzione di denominazione è "styles.css." Tuttavia, un sito può avere molti fogli di stile --- uno per le intestazioni, un altro per i piè, barre laterali. Lascia la tua file CSS nomi significativi.

Dopo aver creato il primo file esterno CSS, la prossima volta che si apre regola CSS Nuovo, i display di file nella Regola Definizione discesa. Quando si crea un altro stile, assicuratevi di aggiungere al file CSS esterno appropriato.

8 Fai clic su "OK" per visualizzare la "Definizione delle regole CSS per ..." finestra di dialogo. Questo è dove si formatta il tuo stile, come il carattere, la dimensione, lo stile (grassetto, corsivo), colore. Le opzioni sono ampie, permettendo per la formattazione piuttosto elaborata, tra le 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 ulteriori regole di stile. Per applicare uno stile a un blocco di testo, è sufficiente fare clic nel paragrafo, e poi scegliere lo stile desiderato dalla "Regola mirata" discesa nel pannello Proprietà.

Consigli e avvertenze

  • Dreamweaver viene fornito con diversi modelli CSS predefiniti. Si può iniziare con uno di questi, piuttosto che creare tutti gli stili da zero. Fai clic su "File" sulla barra dei menu e scegliere "Nuovo". Si apre la finestra di dialogo "Nuovo documento". Fai clic su "Nuovo da campione" nella colonna di sinistra, e poi scegliere "Imposta di stile CSS. Poi, scegliere uno dei modelli nella colonna di destra.
  • È possibile modificare la formattazione di stile in qualsiasi momento con Modifica regola. Quando si cambia uno stile, tutto il testo etichettato con la regola di stile nel documento - o di un sito, quando si utilizzano file CSS esterni - cambierà automaticamente.
  • Quando caricare le pagine Internet, assicurarsi che anche caricare i file CSS esterni.