Ti trovi in: Homepage » Guide » Dreamweaver » Stili CSS

Dreamweaver

Stili CSS

Pannello progettazione stili CSS

I CSS costituiscono lo "stile" della pagina e si occupano di formattare i contenuti, ovvero dell'aspetto delle pagine. Per maggiori informazioni vi rimando alla mia guida di base sui CSS. In dreamweaver è incorporato un utile editor CSS, che trovate lateralmente nella finestra "stili CSS". In Dreamweaver MX era il pannello "progettazione", mentre in Dreamweaver 8 è chiamato semplicemente CSS. Se non ce l'avete potete visualizzarlo premendo SHIFT+F11 oppure cliccando sul menu Finestra->Stili CSS.


cssNella parte bassa del pannello progettazione CSS potete notare diverse iconcine. Quello con la forma di un anello di una catena serve per collegare un foglio di stile alla pagina, se ne avete già creato uno esterno; il simbolino con la forma di un foglietto con il + invece serve per creare una nuova regola css; quella con la forma della matita serve per modificare uno stile già esistente; l'ultimo a forma di cestino serve per eliminare una regola css.
Per creare un nuova regola css, cliccate sul terzo simbolino a partire da destra, quello con la forma del foglietto bianco con il +. Vi si aprirà una nuova finestra dove potete scegliere quale tipo di stile creare: mettendo la spunta su "classe" creerete un nuovo stile personalizzato (preceduto dal punto .), spuntando tag potrete selezionare dal menu a tendina un tag specifico dell'html (body, table, img, ecc.), spuntando "avanzato" creerete un nuovo stile id o speudo-classe (preceduto da #) oppure lo stile dei link. Facciamo un esempio definendo lo stile del corpo della pagina, quindi spuntatate la seconda voce TAG e dal menu a tendina scegliete body. Più sotto potete decidere se volete creare il css come un nuovo file esterno alla pagina, oppure crearlo interno. Secondo me è sempre meglio creare un css esterno, quindi spuntate la prima voce "nuovo foglio di stile" e date OK. Vi chiederà di salvare il vostro nuovo file.css, quindi selezionate la cartella dove volete salvarlo e dategli un nome a vostro piacere, ad esempio "stile".


pannello cssVi si aprirà una nuova finestra, dove dreamweaver vi guiderà alla compilazione degli attributi dello stile per il tag selezionato. Sul menù a sinistra avete varie categorie:

  • Tipo: qui potete selezionare il carattere, il suo colore, ed altri eventuali stili.
  • Sfondo: potete impostare colore e /o immagine di sfondo, e se volete che essa venga ripetuta e in che modo;
  • Blocco di testo: potete specificare le caratteristiche dei paragrafi, quindi interlinea, margini, spaziatura tra caratteri ecc.
  • Elementi di pagina: qui potete impostare i margini della pagina, e nel caso di DIV potete settare le dimensioni e l'allineamento float.
  • Bordo: impostate le caratteristiche dei bordi
  • Elenco: personalizzate le opzioni dei punti elenco
  • Posizione: quest'area si usa generalmente con i Div Layer e permette di settate la posizione, dimensione, margini ecc.
  • Estensioni : qui potete inserire filtri aggiuntivi o personalizzare le interruzioni di pagine ed il cursore.

Nel caso del tag body, ci interessano solo le categorie Tipo, Sfondo, e Elementi di pagina. In Tipo definite il carattere e il suo colore; in Sfondo impostare il colore dello sfondo o un'eventuale immagine; in Elementi di pagina, impostate tutti i margini a 0. Infine cliccate su OK.

Ora facciamo un esempio impostando i colori dei link. Cliccate ancora sull'icona per creare una nuova regola css, ma sta volta spuntate la voce "avanzati" e dal menu a tendina scegliete a:link e date ok. Ora ci interessa personalizzare la categoria Tipo, dove dobbiamo selezionare il colore dei collegamenti, ed eventualmente l'effetto (se non vogliamo la sottolineatura dobbiamo spuntare nessuno). Volendo potete anche impostare un colore di sfondo, o creare un bordo intorno parola, scegliete voi in base ai vostri gusti. Quando avete fatto, cliccate su OK, e poi ripetete le operazioni precedenti per creare un nuovo stile avanzato anche per a:visited, a:active, e a:hover. Normalmente link,visited, e active hanno tutti e 3 lo stesso stile, l'unico che si differenzia è hover (cioè quando si passa con il cursore del mouse sopra il collegamento) per cui si definiscono dei colori diversi per dare degli effetti di attivazione.

Se desiderate modificare uno stile, selezionatelo dal menu e poi cliccate sull'icona della matita situato in basso a destra nel pannello stile css: vi si aprirà nuovamente la finestra e potrete modificare le impostazioni. Oppure se volete eliminarne uno, basterà selezionarlo e cliccare sul simbolo del cestino.

Se avete creato il css in nuovo foglio di stile, quindi esterno, andando a vedere il codice della pagina (cliccando sul menu visualizza -> codice) noterete che nella sezione <head> è comparso una riga più o meno così:

<link href="stile.css" rel="stylesheet" type="text/css">

Questo significa che il file stile.css (o il nome che gli avete dato voi se diverso) è stato collegato alla pagina. Se volete potete associarlo a più pagine, e modificandolo si aggiorneranno tutte le pagine automaticamente. Per fare ciò aprite o create una nuova pagina, e nel pannello stile CSS cliccate sul simbolo dell'anello di catena per associare il foglio di stile: selezionatelo cercandolo con sfoglia e poi date ok. Noterete che la pagina erediterà tutte le impostazioni settate nel CSS.


cssSe invece volete creare una nuova regola css personalizzata, mettete la spunta su classe e scrivete un nome, preceduto da un punto, ad esempio scrivete .bordo, poi fate ok. Andate nella categoria "Bordo" e impostate il bordo che preferite. Per esempio impostate continuo, 2 pixel, #000000 (nero), poi fate ok. Bene, ora avete creato la classe ".bordo", non vi resta che associarla a qualche cosa. Quindi inserite un'immagine nella pagina, trascinandola dal pannello File oppure cliccando sul menu Inserisci -> Immagine.


regola cssCon l'immagine selezionata, in basso nel Pannello ispezione Proprietà vedrete un campo "classe" sulla destra: dal menu a tendina selezionate la regola css ".bordo" e vedrete comparire il nostro bordo all'immagine. Ora che avete creato questa classe potete associarla anche ad altri tag, ad esempio tabelle o anche parole, sempre impostandolo nel campo "classe".


Con i CSS si possono fare molte cose, poi sta a voi sperimentare e usare un po' di fantasia per sfruttare questi stili. Se vi interessa imparare qualcosa di più sui CSS vi rimando all'omonima guida