Sebbene ci sarebbe ben molto da dedicare al riguardo dell'acronimo CSS (Cascading Style Sheets), fogli di stile a cascata sfutttati per la presentazione di documenti HTML e la sua evoluzione XHTML, ci limitiamo ad introdurli brevemente come innovatori nella gestione degli sfondi, bordi, font, colore, interlinea, decorazioni, spaziature, paragrafi, giustificazione...
Elementi a cui il designer tiene molto, e se curati sono in grado di fondere efficienza con professionalità e bellezza. Comodi nell'utilizzo consentono di personalizzare pienamente il proprio Layout di pagina. Importante è acquisire dimestichezza nell'uso ed il gioco è fatto.
La presente guida ha lo scopo di presentare semplici passi per familiarizzare con l'applicazione, vediamo appunto come l'editor Expression Web consente di crearli e renderli adattabili.
Creare un Foglio di Stile - CSS
 Prima di procedere: aprire un documento vuoto o la pagina a cui applicare lo Stile che si andrà a creare. La presente guida sceglie un documento vuoto digitando una frase di esempio. Vedasi immagine:
Selezionare il testo interessato:
E servirsi del menù Formato per selezionare la voce Stili CSS e sottovoce Applica stili...
L'operazione appena effettuata, permetterà di visualizzare la finestra Applica Stili che segue. Click sul Nuovo Stile, come nell'immagine:
Dalla finestra di dialogo che si mostra:
- Nel campo Selettore digitare un nome indicativo allo stile in creazione e nella forma: .nome.
- Nel campo Definisci in selezionare la voce Nuovo foglio di stile, dall'apposito menù a tendina, e nei campi che seguono inserire tutti i dati che caratterizzeranno lo stile in creazione.
Infine tasto Ok per salvare lo stile.
Con le operazioni appena eseguite, abbiamo creato un Foglio di stile e uno Stile :
- Foglio di stile esterno: si tratta di un semplice documento di testo a cui assegnare l'estesione .css.
- Stile interno: tutte le istruzioni del foglio di stile sono contenute all'interno del codice della pagina stessa, fra i tag <head> e </head>: inoltre e' possibile usare css in linea, ovvero richiamando direttamente dall'interno di un tag HTML.
Nei passi successivi questo passaggio sarà più chiaro. Procedere con le operazioni e alla seguente finestra che si mostra, click sul tasto Si. 
Dalla finestra di dialogo Applica stili sarà ben visibile lo stile appena creato, che la guida sceglie di chiamare .testo, ed il foglio di stile a cui ancora non abbiamo definito un nome (ci verrà richiesto di farlo durante il salvataggio della pagina.htm contente lo stile stesso, ma vedremo in seguito):
Selezionare il testo da formattare e clik sullo stile creato: .testo, vedasi immagine:
Per annullare lo stille appena applicato, selezionare nuovamente la frase e click sulla voce Cancella stili:
Procediamo ora con il salvataggio del documento.htm.
Servendoci quindi del menù File, selezionare la voce Salva con nome...
Nel campo indicato, digitare il nome da associare al documento.htm. Tasto Salva per procedere.
Successivamente si mostrerà la seguente finestra di dialogo: sarà necessario indicare un nome al Foglio di stile.css creato.
Per essere più chiari, possiamo definirlo il documento che farà da contenitore dello stile appena creato e di tutti quelli che si realizzeranno in seguito. Digitare il nome nel campo indicato e proseguire dal tasto Salva.
Come creare un nuovo Stile all'interno dello stesso documento Foglio di stile.css:
Dalla finestra di dialogo Applica Stili, click sul tasto Nuovo Stile, come indicato nell'immagine che segue:
Si visualizzerà la finestra Nuovo Stile:
- Nel campo Selettore digitare un nome indicativo allo stile in creazione e nella forma: .nome.
- Nel campo Definisci in selezionare la voce Foglio di stile esistente , dal menù a tendina, e nei campi che seguono inserire tutti i dati che caratterizzeranno lo stile in creazione.
Infine tasto Ok per salvare e procedere.
Lo Stile appena creato è ben visibile dalla finestra di dialogo Applica stili. Selezionare il testo interessato e click sul nuovo stile.
Quella che segue (immagine 2) è la finestra che l'applicazione mostrerà in seguito l'operazione di salvataggio del documento.hmt. Tasto Ok per proseguire.
Dopo l'operazione appena effettuata, l'applicazione in automatico aprirà la visualizzazione del codice del Foglio di stile.css. Questo perchè, aggiungendo un nuovo stile, è stata apportata una modifica al suo interno.
Come associare il Foglio di Stile.css a nuovi documenti.htm
Quindi dalla finestra Applica stili, click sul link Associa foglio di stile...
Si visualizzarà la finestra di dialogo Associa foglio di stile: vedasi immagine sottostante. Indicare il perscorso esatto del documento.css, dal tasto Sfoglia, rendendo attive le opzioni: Associa a Pagina corrente e Associa come Collegamento.
Tasto Ok per proseguire.
Dalla finestra di dialogo Applica stili, sarà visibile il Foglio di stile.css e i rispettivi stili: .testo e .link che lo compongono.
Il risultato sarà il seguente: il Foglio di stile, seguendo la procedura indicata, sarà applicabile a tutti i documenti .htm che si andranno a creare in seguito.
|
