Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 52 di 62
  • livello principiante
Indice lezioni

Come creare i CSS con Dreamweaver MX

Link copiato negli appunti

Esploriamo questo pannello con l'aiuto del sito The Bubble Yum Store che, per
rendere il codice aderente agli standard, è stato ripulito da tutti i tag ed
attributi non standard.

Apriamo il file template master.dwt. Selezioniamo nel pannello CSS
Styles
la modalità Edit Styles e clicchiamo
il pulsante New CSS Style situato nella parte inferiore del
pannello.

Si apre la finestra di dialogo New CSS Style. Selezioniamo
nella parte inferiore della finestra di dialogo Define In:
il pulsante di opzione (New Style Sheet File).

Opzioni per la definizione di un nuovo stile

Si apre una nuova finestra di dialogo Save Style Sheet As
e nella cartella principale del sito salviamo questo style sheet col nome w3cstyle.css.

Creazione e salvataggio di un CSS esterno all'interno di un sito locale

Ritornati alla finestra New CSS Style nella parte centrale
del pannello Type: selezioniamo il pulsante di opzione Redefine
HTML Tag
.

Definizione dello stile di un tag

Dal menu a discesa Tag nella parte superiore della finestra
scegliamo il tag body. Così finalmente possiamo definire gli stili per il tag
body con l'editor per i CSS, che si presenta in una nuova finestra di dialogo.

Definizione dello stile di body

Sulla sinistra della finestra di dialogo CSS Style Definition for tag
body in w3cstyle.css
nella colonna Category scegliamo
Background e nel selettore dei colori di Background
Color
scegliamo lo stesso sfondo che avevamo impostato dagli attributi
del tag body.

Definizione del colore di sfondo del tag body dall'editor CSS di Dreamweaver

Selezioniamo poi Box nella colonna Category e
deselezioniamo nel gruppo Margin, in basso a destra, Same
for All
e nel campo Top digitiamo 0. Clicchiamo OK
e la pagina avrà nuovamente l'aspetto precedente in più nel pannello site troveremo
il file w3c.css.

definizione dei margini del tag body

Infine selezioniamo Positioning dal menù a discesa
sulla destra Overflow: selezioniamo auto,
che permette di eliminare in IE 4 e superiore lo psazio per le barre di scorrimento
quando non è necessario. In pratica questo è il modo in linea
con gli Standard HTML e CSS per ottenere lo stesso effetto nel layout della
pagina, che si ottiene utilizzando l'attributo proprietario
Microsoft e non Standard scroll impostato ad auto.

Overflow auto del tag body

Ripetiamo la procedura per il tag p e questa volta rimaniamo nella categoria
che per prima ci viene presentata dalla finestra dell'editor CSS, ovvero Type,
scegliamo dal menu a discesa font: Edit font List e creiamo
un gruppo di font composto da trebuchet MS, Verdana, arial e sans-serif, in modo che
se sul computer dei visitatori non c'è trebuchet, il browser passa a Verdana
ed in mancanza di Verdana ad arial e così via, piuttosto visualizzare il font
di default del browser, in mancanza di trebuchet MS.

Digitiamo come size 13 e accertiamoci che l'unità di misura
nel menu a discesa sulla destra sia pixels, che corrisponde a size 2 in HTML.

Scegliamo come Color dal selettore dei colori lo stesso colore
utilizzato per il testo come attributo HTML. Clicchiamo OK
e così avremo impostato lo stile del paragrafo.

Gli stili del paragrafo nell'editor CSS

Selezioniamo il tag h3 e cambiamolo in h1 dal pannello Property
relativo al testo nel menu a discesa Format. Il titolo sarà
molto più grande ma da un punto di vista logico sarà più corretto in quanto
non ci sono altri titoli, dunque questo è un titolo di primo livello. Come per
la definizione degli stili per il paragrafo creiamo un gruppo di font personalizzato
come il precedente, ma con Comic MS Sans come primo font e il resto della lista
identica alla precedente.

Definiamo come size 18 pixel che corrispondono ad un h3, selezioniamo
lo stesso colore del carattere scelto per i paragrafi e clicchiamo OK.
Non abbiamo bisogno di impostare il Weight: a bold
in quanto il titolo è grassetto per impostazione dei browser, tuttavia
se volessimo un titolo non in grassetto, allora del menù a discesa Weight:
potremmo selezionare normal ed il titolo non sarebbe più
in grassetto.

Adesso dobbiamo definire lo stile della Library Item, poiché
la Library Item è un file indipendente non possiamo applicare
né link a stili esterrni né link interni, in quanto è un tipo di file particolare
che viene inserito all'interno di una pagina, dunque non ha un tag head dove
inserire il link a stili esterni oppure stili interni.

Possiamo allora procedere in due modi o applicare uno stile in line alla Library
Item
oppure definire gli stili dei tag della Library Item
all'interno del file template. Procediamo nel secondo modo, infatti attribuendo
degli stili nel file master.dwt essi saranno applicati a tutte le pagine dipendenti,
per cui, pur se stile interno, in questo caso possiamo avvantaggiarci dell'automazione
data dai template e quindi anche in questo caso dovremo gestire un solo stile
per tutto un sito: lo stile interno del template. Creiamo un nuovo stile e selezioniamo
Redefine HTML Tag e come tag scegliamo div e per Define
In
selezioniamo This Document Only. Diamo gli stessi
stili della categoria Type che abbiamo attribuito al paragrafo

Definizione dello stile per il tag div

Per dare uno stile al link email, creiamo i relativi stili stile selezionandoType:
Use CSS Selector
e specificando, sempre nelle opzioni, Define
In: This Document Only
.

Le opzioni del CSS selector

Definiamo così uno alla volta gli stili a:link, a:visited, a:hover, a:active
per i link dando lo stesso colore degli altri testi e per gli ultimi tre di
questi stili spuntando la casella Decoration: none, in pratica
in questo modo il link non cambierà di colore se attivo o visitato, come precedentemente
impostato nelle proprietà di pagina, ma in più abbiamo aggiunto che i link attivi
visitati e al passaggio del mouse non siano sottolineati.

definizione degli stili per i link

Salviamo il template, apriamo i file dipendenti, ovvero le pagine html, e cambiamo
i titoli da h3 ad h1.


Ti consigliamo anche