Risorse di Dreamweaver CS4
|
Impostazione delle proprietà CSS
È possibile definire le proprietà delle regole CSS quali il carattere del testo, il colore di sfondo e delle immagini, le impostazioni di spaziatura e di layout e l'aspetto delle voci di elenco. Per prima cosa, creare una nuova regola, quindi impostarne le seguenti proprietà.
Definizione delle proprietà Tipo CSSLa categoria Tipo della finestra di dialogo Definizione regola CSS consente di definire le impostazioni di base di carattere e tipografiche per uno stile CSS.
- Se non è già aperto, aprite il pannello Stili CSS (Maiusc + F11).
- Fare doppio clic su una regola o una proprietà esistente nel riquadro superiore del pannello Stili CSS.
- Nella finestra di dialogo Definizione regola CSS, selezionare Tipo, quindi impostare le proprietà di stile.
Se non sono rilevanti per lo stile, lasciare vuote le seguenti proprietà:
- Font-family
- Imposta il tipo di carattere o le serie di tipi di carattere associate allo stile. I browser visualizzano il testo utilizzando il primo tipo di carattere del gruppo che risulta installato sul sistema dell'utente. Per questioni di compatibilità con Internet Explorer 3.0, indicare come primo un carattere Windows. L'attributo font è supportato da entrambi i browser.
- Font-size
- Definisce la dimensione del testo. L'utente può impostare una dimensione specifica, selezionandone il valore corrispondente e l'unità di misura, oppure una dimensione relativa. I pixel funzionano bene come unità di misura perché evitano la distorsione del testo all'interno del browser. L'attributo size è supportato da tutti i browser.
- Font-style
- Specifica lo stile del carattere: Normal (normale), Italic (corsivo) o Oblique (obliquo). L'impostazione predefinita è Normal. L'attributo Stile è supportato da entrambi i browser.
- Line-height
- Imposta l'altezza della riga in cui viene collocato il testo. Questa impostazione viene in genere denominata interlinea. Selezionando Normal, l'altezza della riga viene calcolata automaticamente in base alla dimensione del carattere selezionata. In alternativa, inserire un valore esatto e selezionare un'unità di misura. L'attributo line height è supportato da entrambi i browser.
- Text-decoration
- Consente di aggiungere al testo i seguenti effetti: sottolineatura, linea sopra, barrato e intermittente. L'impostazione predefinita per il testo normale è None (nessuno). L'impostazione predefinita per i collegamenti è Underline (sottolineato). Se l'impostazione per il collegamento è none, è possibile eliminare la sottolineatura definendo una classe speciale. L'attributo decoration è supportato da entrambi i browser.
- Font-weight
- Applica al carattere un valore di grassetto preciso o relativo. Normal equivale a uno spessore di 400; Bold corrisponde a 700. L'attributo weight è supportato da entrambi i browser.
- Font-variant
- Consente di impostare la variante maiuscoletto nel testo. Questo attributo non può essere visualizzato nella finestra del documento di Dreamweaver. L'attributo variant è supportato da Internet Explorer ma non da Navigator.
- Text-transform
- Rende maiuscola la prima lettera di ogni parola all'interno della selezione oppure consente di impostare tutto il testo in maiuscole o minuscole. L'attributo case è supportato da entrambi i browser.
- Color
- Imposta il colore del testo. L'attributo color è supportato da entrambi i browser.
- Dopo aver impostato tutte le opzioni, selezionare un'altra categoria CSS sul lato sinistro del pannello per impostare ulteriori proprietà di stile oppure fare clic su OK.
Definizione delle proprietà Sfondo degli stili CSSLa categoria Sfondo della finestra di dialogo Definizione regola CSS consente di definire le impostazioni dello sfondo per uno stile CSS. Le proprietà dello sfondo possono essere applicate a qualsiasi elemento contenuto in una pagina Web. È possibile creare uno stile che aggiunga un colore o un'immagine di sfondo agli elementi della pagina, come ad esempio dietro al testo, a una tabella, alla pagina ecc. È anche possibile impostare la posizione di un'immagine di sfondo.
- Se non è già aperto, aprite il pannello Stili CSS (Maiusc + F11).
- Fare doppio clic su una regola o una proprietà esistente nel riquadro superiore del pannello Stili CSS.
- Nella finestra di dialogo Definizione regola CSS, selezionare Sfondo, quindi impostare le proprietà di stile.
Se non sono rilevanti per lo stile, lasciare vuote le seguenti proprietà:
- Background-color
- Imposta il colore di sfondo dell'elemento. L'attributo background color è supportato da entrambi i browser.
- Background-image
- Imposta l'immagine dello sfondo per l'elemento. L'attributo background image è supportato da entrambi i browser.
- Background-repeat
- Determina la modalità di ripetizione dell'immagine di sfondo. L'attributo Repeat è supportato da entrambi i browser.
No Repeat visualizza l'immagine una sola volta all'inizio dell'elemento.
Repeat affianca, orizzontalmente e verticalmente, più occorrenze dell'immagine dietro l'elemento.
Repeat‑x e Repeat‑y riproducono, rispettivamente, una striscia di immagini orizzontali e verticali. Le immagini vengono tagliate e adattate al contorno dell'elemento.
Nota: usare questa proprietà per ridefinire il tag body e per impostare un'immagine di sfondo che non viene affiancata o ripetuta.
- Background-attachment
- Determina se l'immagine dello sfondo deve rimanere fissa o scorrere attorno al contenuto. Alcuni browser interpretano l'opzione Fixed come Scroll. L'attributo attachment è supportato da Internet Explorer ma non da Netscape Navigator.
- Background-position (X) e Background-position (Y)
- Specificano la posizione iniziale dell'immagine di sfondo rispetto all'elemento che la contiene. Queste due opzioni possono essere utilizzate per centrare l'immagine di sfondo in mezzo alla pagina, sia rispetto all'asse orizzontale (X) che rispetto a quello verticale (Y). Se la proprietà attachment è impostata su Fixed, la posizione dell'immagine viene calcolata rispetto alla finestra del documento e non rispetto all'elemento che la contiene.
- Dopo aver impostato tutte le opzioni, selezionare un'altra categoria CSS sul lato sinistro del pannello per impostare ulteriori proprietà di stile oppure fare clic su OK.
Definizione delle proprietà Blocco di testo degli stili CSSLa categoria Blocco di testo della finestra di dialogo Definizione regola CSS consente di definire le impostazioni di spaziatura e allineamento di tag e proprietà.
- Se non è già aperto, aprite il pannello Stili CSS (Maiusc + F11).
- Fare doppio clic su una regola o una proprietà esistente nel riquadro superiore del pannello Stili CSS.
- Nella finestra di dialogo Definizione regola CSS, selezionare Blocco di testo, quindi impostare le seguenti proprietà di stile. (Lasciare vuote le proprietà che non sono rilevanti per lo stile.)
- Word-spacing
- Imposta lo spazio tra le parole del testo. Per impostare un valore specifico selezionare Valore dal menu a comparsa, quindi inserire un valore numerico. Nel secondo menu a comparsa, selezionare l'unità di misura (ad esempio, pixel, punti e così via).
Nota: i valori negativi sono accettati, ma la modalità di visualizzazione dipende dal browser. Questo attributo non può essere visualizzato nella finestra del documento di Dreamweaver.
- Letter-spacing
- Aumenta o riduce lo spazio tra le lettere o i caratteri. Per ridurre lo spazio tra i caratteri, specificare un valore negativo, ad esempio (-4). Le impostazioni della spaziatura tra lettere prevalgono su quelle del testo giustificato. L'attributo Letter-spacing è supportato da Internet Explorer 4 e versioni successive e da Netscape Navigator 6.
- Vertical-align
- Specifica l'allineamento verticale dell'elemento al quale viene applicato. Questo attributo può essere visualizzato nella finestra del documento di Dreamweaver solo se applicato al tag <img>.
- Text-align
- Imposta la modalità di allineamento del testo all'interno dell'elemento. L'attributo Text Align è supportato da entrambi i browser.
- Text-indent
- Specifica di quanto deve essere rientrata la prima riga di testo. È possibile utilizzare un valore negativo per creare uno spostamento verso sinistra della prima riga, ma la modalità di visualizzazione dipende dal browser. Questo attributo può essere visualizzato nella finestra del documento di Dreamweaver solo se il tag viene applicato a elementi a livello di blocco. L'attributo Text-indent è supportato da entrambi i browser.
- White-space
- Determina in che modo viene gestito lo spazio vuoto all'interno dell'elemento. Le tre opzioni disponibili sono: Normal comprime lo spazio vuoto; Pre tratta lo spazio come se il testo fosse racchiuso tra tag pre (ovvero, lo spazio vuoto, compreso lo spazio tra le parole, le tabulazioni e i ritorni a capo viene rispettato); Nowrap indica che viene inserito un ritorno a capo solamente in corrispondenza del tag br. Questo attributo non può essere visualizzato nella finestra del documento di Dreamweaver. L'attributo White-space è supportato da Netscape Navigator ma non da Internet Explorer 5.5.
- Display
- Specifica se un elemento viene visualizzato o meno con relativa modalità di visualizzazione. Selezionando la voce None si disattiva la visualizzazione dell'elemento in questione.
- Dopo aver impostato tutte le opzioni, selezionare un'altra categoria CSS sul lato sinistro del pannello per impostare ulteriori proprietà di stile oppure fare clic su OK.
Definizione delle proprietà Elementi di pagina degli stili CSSUtilizzare la categoria Elementi di pagina della finestra di dialogo Definizione regola CSS per definire le impostazioni dei tag e delle proprietà che controllano il posizionamento degli elementi sulla pagina.
Quando si applicano le impostazioni di padding (spazio dall'elemento al bordo) e margin (Margine), è possibile selezionare un solo lato dell'elemento oppure è possibile utilizzare l'impostazione Uguale per tutto per applicare le medesime impostazioni a tutti i lati di un elemento.
- Se non è già aperto, aprite il pannello Stili CSS (Maiusc + F11).
- Fare doppio clic su una regola o una proprietà esistente nel riquadro superiore del pannello Stili CSS.
- Nella finestra di dialogo Definizione regola CSS, selezionare Elementi di pagina, quindi impostare le seguenti proprietà di stile. (Lasciare vuote le proprietà che non sono rilevanti per lo stile.)
- Width e Height
- Impostano la larghezza e l'altezza dell'elemento.
- Float
- Determina attorno a quale lato di un elemento si posizionano altri elementi, quali testo, div PA, tabelle, e così via. Gli altri elementi vengono disposti normalmente intorno all'elemento mobile. L'attributo Float è supportato da entrambi i browser.
- Clear
- Definisce i lati che non consentono il posizionamento di elementi PA. Se sul lato libero è presente un elemento PA, l'elemento impostato come libero viene spostato al di sotto. L'attributo Clear è supportato da entrambi i browser.
- Padding
- Specifica la quantità di spazio che deve intercorrere tra il contenuto dell'elemento e il suo bordo (o margine, se l'elemento è sprovvisto di bordo). Per impostare la spaziatura interna per singoli lati dell'elemento, deselezionare l'opzione Uguale per tutto.
- Uguale per tutto
- Definisce gli stessi attributi di spaziatura dal bordo (Superiore, Destro, Inferiore e Sinistro) per l'elemento a cui si applica l'impostazione.
- Margin
- Specifica la quantità di spazio da interporre tra il bordo di un elemento (o la spaziatura interna, se l'elemento è sprovvisto di bordo) e un altro elemento. Questo attributo può essere visualizzato nella finestra del documento di Dreamweaver solamente se applicato a elementi a livello di blocco di testo (paragrafi, intestazioni, elenchi, ecc.). Per impostare il margine per singoli lati dell'elemento, deselezionare l'opzione Uguale per tutto.
- Uguale per tutto
- Definisce le stesse proprietà di margine (Superiore, Destro, Inferiore e Sinistro) per l'elemento a cui si applica l'impostazione.
- Dopo aver impostato tutte le opzioni, selezionare un'altra categoria CSS sul lato sinistro del pannello per impostare ulteriori proprietà di stile oppure fare clic su OK.
Definizione delle proprietà Bordo degli stili CSSLa categoria Bordo della finestra di dialogo Definizione regola CSS consente di definire le impostazioni (larghezza, colore e stile) dei bordi intorno agli elementi.
- Se non è già aperto, aprite il pannello Stili CSS (Maiusc + F11).
- Fare doppio clic su una regola o una proprietà esistente nel riquadro superiore del pannello Stili CSS.
- Nella finestra di dialogo Definizione regola CSS, selezionare Bordo, quindi impostare le seguenti proprietà di stile. (Lasciare vuote le proprietà che non sono rilevanti per lo stile.)
- Style
- Imposta lo stile visivo del bordo, il cui aspetto può variare in base al browser. Per impostare lo stile del bordo per singoli lati dell'elemento, deselezionare l'opzione Uguale per tutto.
- Uguale per tutto
- Definisce le stesse proprietà di stile del bordo (Superiore, Destra, Inferiore e Sinistra) per l'elemento a cui si applica l'impostazione.
- Width
- Imposta lo spessore del bordo dell'elemento. L'attributo Width è supportato da entrambi i browser. Per impostare lo spessore del bordo per singoli lati dell'elemento, deselezionare l'opzione Uguale per tutto.
- Uguale per tutto
- Definisce lo stesso spessore del bordo (Superiore, Destra, Inferiore e Sinistra) per l'elemento a cui si applica l'impostazione.
- Color
- Imposta il colore del bordo. È possibile impostare il colore del bordo di ogni lato in modo indipendente, ma la modalità di visualizzazione dipende dal browser. Per impostare il colore del bordo per singoli lati dell'elemento, deselezionare l'opzione Uguale per tutto.
- Uguale per tutto
- Definisce lo stesso colore del bordo (Superiore, Destra, Inferiore e Sinistra) per l'elemento a cui si applica l'impostazione.
- Dopo aver impostato tutte le opzioni, selezionare un'altra categoria CSS sul lato sinistro del pannello per impostare ulteriori proprietà di stile oppure fare clic su OK.
Definizione delle proprietà Elenco degli stili CSSLa categoria Elenco della finestra di dialogo Definizione regola CSS consente di definire le impostazioni degli elenchi (dimensione e tipo di punto) per i tag di elenco.
- Se non è già aperto, aprite il pannello Stili CSS (Maiusc + F11).
- Fare doppio clic su una regola o una proprietà esistente nel riquadro superiore del pannello Stili CSS.
- Nella finestra di dialogo Definizione regola CSS, selezionare Elenco e impostare le seguenti proprietà di stile. (Lasciare vuote le proprietà che non sono rilevanti per lo stile.)
- List-style-type
- Imposta l'aspetto dei punti elenco o dei numeri di un elenco. L'attributo type è supportato da entrambi i browser.
- List-style-image
- Consente di impostare un'immagine personalizzata da utilizzare per i punti elenco. Fare clic sul pulsante Sfoglia (Windows) o Scegli (Macintosh) per individuare l'immagine oppure digitarne il percorso.
- List-style-position
- Specifica se applicare al testo della voce di elenco un a capo automatico o un rientro (verso l'esterno) o un a capo automatico verso il margine sinistro (interno).
- Dopo aver impostato tutte le opzioni, selezionare un'altra categoria CSS sul lato sinistro del pannello per impostare ulteriori proprietà di stile oppure fare clic su OK.
Definizione delle proprietà Posizione degli stili CSSLe proprietà di stile Posizione determinano come viene posizionato sulla pagina il contenuto associato allo stile CSS selezionato.
- Se non è già aperto, aprite il pannello Stili CSS (Maiusc + F11).
- Fare doppio clic su una regola o una proprietà esistente nel riquadro superiore del pannello Stili CSS.
- Nella finestra di dialogo Definizione regola CSS, selezionare Posizione, quindi impostare le proprietà di stile desiderate.
Se non sono rilevanti per lo stile, lasciare vuote le seguenti proprietà:
- Position
- Determina la modalità di posizionamento dell'elemento selezionato nel browser in base alle seguenti opzioni:
Absolute Colloca il contenuto in base alle coordinate inserite nelle caselle Posizione rispetto all'elemento antenato più vicino (con posizione assoluta o relativa) oppure, in mancanza di esso, rispetto all'angolo superiore sinistro della pagina.
Relative Colloca il blocco di contenuto in base alle coordinate inserite nelle caselle Posizione rispetto alla posizione del blocco all'interno del flusso di testo del documento. Ad esempio, se si assegna a un elemento una posizione relativa e un valore di 20 pixel per le coordinate superiore e sinistra, l'elemento viene spostato di 20 pixel a destra e di 20 pixel in basso rispetto alla sua posizione normale all'interno del flusso del documento. Gli elementi possono essere posizionati anche in modo relativo, con o senza coordinate (In alto, In basso, Sinistra, Destra), in modo da definire un contesto per gli elementi secondari con posizione assoluta.
Fixed Colloca il contenuto in base alle coordinate inserite nelle caselle Posizione, rispetto all'angolo superiore sinistro del browser. Il contenuto rimane fisso in questa posizione quando l'utente fa scorrere la pagina.
Static Colloca il contenuto nella posizione che gli è propria all'interno del flusso del testo. Si tratta della posizione predefinita di tutti gli elementi HTML posizionabili.
- Visibility
- Determina la condizione iniziale di visualizzazione del contenuto. Se non specificate un'impostazione per la proprietà Visibility, il contenuto utilizza per impostazione predefinita il valore del tag superiore. L'impostazione di Visibility predefinita del tag body è visible. Selezionare una delle seguenti opzioni di Visibility:
inherit (predefinito) Utilizza la proprietà di visibilità del tag superiore del contenuto.
visible Visualizza il contenuto indipendentemente dal valore del tag superiore.
hidden Nasconde il contenuto indipendentemente dal valore del tag superiore.
- Z‑Index
- Determina l'ordine di sovrapposizione del contenuto. Gli elementi con un ordine superiore appaiono sopra quelli con un valore di ordine inferiore (o privi di un valore). I valori possono essere positivi o negativi. Se il contenuto ha una posizione assoluta, risulta più facile modificarne l'ordine di sovrapposizione utilizzando il pannello Elementi PA.
- Overflow
- Determina l'effetto che si produce se il contenuto di un contenitore (ad esempio, un elemento DIV o P) supera le dimensioni definite. Queste proprietà controllano l'espansione nel modo seguente:
visible Aumenta le dimensioni del contenitore in modo da rendere visibile tutto il contenuto. Il contenitore viene espanso verso il basso e verso destra.
hidden Le dimensioni del contenitore rimangono invariate e la parte di contenuto in eccesso rimane nascosta. Non vengono visualizzate barre di scorrimento.
scroll Al contenitore vengono aggiunte delle barre di scorrimento, indipendentemente dal fatto che le dimensioni del contenuto siano superiori o meno a quelle del contenitore. Il fatto che siano sempre disponibili delle barre di scorrimento evita la confusione derivante dall'apparire e scomparire delle barre di scorrimento in un ambiente dinamico. Questa opzione non può essere visualizzata nella finestra del documento.
auto Visualizza le barre di scorrimento solo quando il contenuto supera le dimensioni del contenitore. Questa opzione non può essere visualizzata nella finestra del documento.
- Placement
- Specifica la posizione e le dimensioni del blocco di contenuto. La posizione viene interpretata dal browser sulla base dell'impostazione di Tipo. Se il contenuto del blocco supera le dimensioni specificate, i valori delle dimensioni vengono ignorate.
Le unità predefinite per posizione e dimensione sono i pixel. È possibile utilizzare anche le seguenti unità di misura: pc (pica), pt (punti), in (pollici), mm (millimetri), cm (centimetri), (ems), (exs) e % (percentuale del valore principale). Le abbreviazioni devono seguire il valore senza spazi intermedi, ad esempio 3mm.
- Clip
- Definisce la parte del contenuto che è visibile. È possibile accedere all'area di ritaglio con un linguaggio di script, ad esempio JavaScript, e modificarne le proprietà per creare effetti speciali, come gli effetti wipe. Questi effetti possono essere impostati utilizzando il comportamento Cambia proprietà.
- Dopo aver impostato tutte le opzioni, selezionare un'altra categoria CSS sul lato sinistro del pannello per impostare ulteriori proprietà di stile oppure fare clic su OK.
Definizione delle proprietà Estensioni degli stili CSSLe proprietà degli stili delle estensioni includono opzioni per filtri, interruzioni di pagina e puntatori.
Nota: in Dreamweaver sono disponibili molte proprietà Estensioni, ma per accedervi è necessario passare dal pannello Stili CSS. Per visualizzare facilmente l'elenco delle proprietà Estensioni disponibili, aprite il pannello Stili CSS (Finestra > Stili CSS), fate clic sul pulsante Mostra vista Categoria nella parte inferiore del pannello ed espandete la categoria Estensioni.
- Se non è già aperto, aprite il pannello Stili CSS (Maiusc + F11).
- Fare doppio clic su una regola o una proprietà esistente nel riquadro superiore del pannello Stili CSS.
- Nella finestra di dialogo Definizione regola CSS, selezionare Estensioni, quindi impostare le seguenti proprietà di stile. (Lasciare vuote le proprietà che non sono rilevanti per lo stile.)
- Page-break-before
- Aggiunge un'interruzione pagina forzata durante la stampa prima o dopo l'oggetto gestito dallo stile. Selezionare l'opzione che si desidera impostare nel menu a comparsa. Nessuna versione 4.0 dei browser supporta questa opzione, ma le versioni future potrebbero offrire tale supporto.
- Cursor
- Cambia l'immagine del puntatore quando la sua icona si trova sopra a un oggetto controllato dallo stile. Selezionare l'opzione che si desidera impostare nel menu a comparsa. Questo attributo è supportato da Internet Explorer 4.0 e versioni successive e da Netscape Navigator 6.
- Filter
- Applica degli effetti speciali, come la sfocatura o l'immagine negativa, all'oggetto controllato dallo stile. Selezionare un effetto dal menu a comparsa.
- Dopo aver impostato tutte le opzioni, selezionare un'altra categoria CSS sul lato sinistro del pannello per impostare ulteriori proprietà di stile oppure fare clic su OK.
|