CSS Tutorial per Dreamweaver MX

June 14

i fogli di stile a cascata (CSS) sono un buon modo per creare un sito web in modo che siano in grado di influenzare i colori, font, dimensioni tipo, layout e altri aspetti del design del tuo sito su un unico documento. L'aggiornamento del documento aggiorna il look di tutto il sito, mantenendolo uniforme e semplice.

Adobe Dreamweaver MX si assiste nel vocabolario di CSS, come si crea il foglio di stile, che lo rende un buon programma da utilizzare sia per principianti ed esperti.

Creazione di un foglio di nuovo stile

Per creare un nuovo file CSS in Dreamweaver MX, avviare un nuovo documento (utilizzare CTRL + N su un PC o CMD + N su Mac), e selezionare Cascading Style Sheet dal menu a comparsa. Dreamweaver precompilare il nuovo documento con i tag di base necessarie; avete solo bisogno di iniziare a digitare tra il tag di apertura e di chiusura.

Quello che va su un foglio di stile?

Un file CSS contiene le istruzioni per ciò che vari elementi del tuo sito web simile. Ad esempio, è possibile inserire un'immagine di sfondo o il colore (o entrambi) in una pagina, impostare il tipo di carattere, dimensione e colore che si desidera per varie sezioni (come ad esempio l'intestazione pagina, il menu di navigazione, i collegamenti e il corpo del testo), e creare vari elementi di layout, come impostare la larghezza e la posizione delle colonne o elenchi.

Molto di questo viene fatto utilizzando gli ID (spesso, ma non necessariamente, usato per gli elementi importanti come un menu di navigazione) e classi.

Sintassi

La sintassi di un file CSS simile a questa:

ID {attributo1: Descrizione; attributo2: descrizione; }

o

elemento .class {attributo1: descrizione; Abilità 2: descrizione; attribute3: descrizione; }

Vocabolario e l'aiuto di Dreamweaver MX

Mentre si decide come chiamare gli ID e le classi, ci sono vocabolari specifici per gli attributi e descrizioni. Dreamweaver MX offrirà una lista di attributi, disposti in ordine alfabetico, dopo ogni spazio all'interno del vostro parentesi. Se si inizia a digitare, si restringerà l'elenco degli attributi disponibili che iniziano con le lettere digitate.

Dreamweaver non offrire suggerimenti limitate per le descrizioni, ma potrebbe essere una buona idea avere una guida di riferimento, come esercitazione Consorzio del W3 o la biblioteca Webmonkey disponibili (vedi riferimenti).

Legare il CSS al tuo sito web

Per ogni pagina del tuo sito web utilizzando un foglio di stile, è necessario aggiungere un link al foglio di stile (o fogli di stile - è possibile utilizzare più di uno se lo si desidera) all'interno della testa delle pagine.

Tale legame sarà simile a questa (posizionarlo tra i tag <head> e </ head> tag):

<Tipo di link = "text / css" rel = "stylesheet" href = "LocationAndNameOfYourStylesheet.css">