Creazione di stili per l'editor HTML

Con un sito di pubblicazione di Microsoft Office SharePoint Server 2007, i proprietari del contenuto possono creare e aggiornare le pagine Web del sito semplicemente utilizzando il browser. Il gestore di un reparto, ad esempio, può utilizzare un browser per pubblicare annunci e altre informazioni, come mostrato nella figura seguente, direttamente sul sito Web.

Pagina per la pubblicazione nel browser

Lo sviluppatore o il progettista di un sito Web, creando stili da applicare a parti di pagine create dai layout di pagina, consentono ai creatori del contenuto di migliorare l'aspetto delle pagine. La creazione di stili personalizzati consente inoltre di standardizzare l'aspetto delle pagine. In questo articolo viene illustrato come uno sviluppatore o un progettista Web può utilizzare Microsoft Office SharePoint Designer 2007 per la creazione di stili personalizzati da applicare a pagine per la pubblicazione create o modificate nel browser.

Importante : Questo articolo si applica solo ai siti presenti su un server in cui è in esecuzione Office SharePoint Server 2007. La pubblicazione deve essere inoltre attivata anche nel sito principale della raccolta siti. Per aprire e modificare i layout di pagina, l'utente deve disporre inoltre delle autorizzazioni di modifica per il sito principale.

Contenuto dell'articolo

Utilizzo dell'editor HTML in un sito di pubblicazione

Creare stili per l'editor HTML

Utilizzo dell'editor HTML in un sito di pubblicazione

La creazione di stili personalizzati per le pagine da pubblicare richiede la conoscenza di alcuni concetti chiave di Office SharePoint Server 2007. Di seguito vengono esaminati alcuni di questi concetti.

Correlazione tra le pagine per la pubblicazione e i layout di pagina

I layout di pagina sono modelli che consentono di controllare l'aspetto di una pagina, i campi della pagina e i campi del contenuto disponibili e gli elementi, ad esempio elenchi e raccolte, presenti nella pagina. È possibile impostare, ad esempio, un layout di pagina per i report di viaggio, un altro layout di pagina per i notiziari e un terzo layout di pagina per gli aggiornamenti dei piani. Gli utenti autorizzati possono creare quindi nuove pagine per la pubblicazione in base a tali layout. Le pagine create avranno un formato coerente con il tipo specifico di contenuto previsto. Gli utenti possono creare pagine per la pubblicazione nei browser, dove potranno selezionare un layout di pagina per ogni pagina creata.

Finestra di dialogo con un elenco di layout di pagine per la pubblicazione

I layout di pagina possono essere modificati in Office SharePoint Designer 2007. Per ulteriori informazioni, vedere l'articolo Personalizzazione del layout di una pagina di pubblicazione.

Origine della formattazione dei layout di pagina

La formattazione dei layout di pagina deriva dalle pagine master, ovvero i modelli di pagina che definiscono aree di contenuto condiviso, ad esempio intestazioni, piè di pagina e il riquadro di spostamento sinistro, e che utilizzano fogli di stile per il controllo della formattazione di testo, collegamenti ipertestuali, celle, tabelle e molti altri elementi. La formattazione dei layout di pagina può derivare anche dai fogli di stile applicati direttamente. Le regole di formattazione iniziali di un layout di pagina possono derivare, ad esempio, da una pagina master, ma è possibile aggiungere in qualsiasi momento altri fogli di stile al layout di pagina per definire con maggiore precisione la formattazione delle pagine create dal layout. Nella pagina master su cui si basa un layout di pagina, ad esempio, può essere specificato che per tutto il testo normale verrà utilizzato il tipo di carattere Verdana, ma è possibile aggiungere un foglio di stile al layout di pagina in cui si specifica che in tutte le pagine aggiunte verrà utilizzato il tipo di carattere Arial per il testo normale. La formattazione e i tag di una pagina per la pubblicazione, ad eccezione dei campi contenuto, deriva direttamente dal layout di pagina da cui la pagina è stata creata.

Modificare il contenuto nelle pagine per la pubblicazione

Le pagine per la pubblicazione vengono create nel browser. Dopo la creazione, una pagina può essere modificata selezionandola e scegliendo Modifica pagina dal menu Azioni sito.

Comando Modifica pagina del menu Azioni sito

Con la pagina aperta, è possibile selezionare Modifica contenuto per aprire l'editor HTML e modificare i campi RTF.

Comando Modifica contenuto in una pagina aperta

Nota : I campi non RTF, ad esempio i campi data, presentano editor propri.

Dall'editor HTML è possibile aggiungere o modificare il contenuto, modificare manualmente tipi di carattere e formattazione o scegliere tra molte altre opzioni. Per applicare uno stile al testo, selezionarlo, fare clic su Stili e quindi scegliere lo stile da applicare.

Elenco Stili dell'editor HTML

Origine degli stili dell'editor HTML

Gli stili disponibili nell'editor HTML derivano da due fogli di stile situati nella directory _layouts del sito o del sito secondario:

  • Il foglio di stile HtmlEditorCustomStyles.css, in cui viene definita la formattazione per gli stili personalizzati, si trova nel percorso seguente:

    http://sito/_layouts/1033/styles/HtmlEditorCustomStyles.css

  • Il foglio di stile HtmlEditorTableFormats.css, in cui viene definita la formattazione per le tabelle, si trova nel percorso seguente:

    http://sito/_layouts/1033/styles/HtmlEditorTableFormats.css

Poiché questi fogli di stile si trovano in directory _layouts protette, non è possibile modificarli in Office SharePoint Designer 2007. È possibile tuttavia sovrascrivere gli stili presenti nei fogli di stile applicando stili aggiuntivi al layout di pagina utilizzato per la creazione di pagine per la pubblicazione.

Torna all'inizio

Creare stili per l'editor HTML

Per creare nuovi stili per l'editor HTML, aprire il sito in Office SharePoint Designer 2007 e quindi utilizzare le procedure seguenti.

Individuare e aprire il layout di pagina

Se un layout di pagina è già stato creato e si desidera ora creare nuovi stili in modo che risultino disponibili per l'utilizzo nell'editor HTML del browser, individuare e aprire il layout di pagina. È possibile eseguire questa operazione facendo doppio clic sul layout di pagina o su una pagina per la pubblicazione creata da quel layout di pagina.

  1. In Office SharePoint Designer 2007, aprire il sito contenente il layout di pagina da modificare.

  2. Nell'Elenco cartelle, individuare una pagina in cui viene utilizzato il layout di pagina a cui si desidera applicare un nuovo stile e fare doppio clic sulla pagina.

    Nota : Le pagine per la pubblicazione sono memorizzate nella raccolta documenti Pagine del sito. Fare doppio clic su una pagina per la pubblicazione è un modo rapido per individuare e aprire il layout di pagina a cui è collegata la pagina per la pubblicazione. Se già si conosce il nome del layout di pagina per cui si desidera creare un nuovo stile, è possibile fare doppio clic sul layout di pagina anziché sulla pagina.

    Elenco cartelle con un messaggio relativo alla modifica di una pagina o del layout di pagina sottostante

    Poiché le pagine per la pubblicazione possono essere modificate solo nel browser, in un messaggio viene richiesto se si desidera modificare la pagina nel browser o il layout di pagina sottostante.

  3. Fare clic su Modifica layout di pagina.

    Verrà aperto il layout di pagina.

Sovrascrivere uno stile esistente

Per sovrascrivere uno stile esistente, è possibile copiarlo dai fogli di stile HtmlEditorCustomStyles.css o HtmlEditorTableFormats.css in un altro foglio di stile utilizzato dalla pagina e quindi modificarlo. Poiché i fogli di stile presenti nella directory _layouts vengono applicati per primi, gli stili in tutti gli altri fogli di stile utilizzati dal layout di pagina sovrascrivono gli stili dei fogli di stile HtmlEditorCustomStyles.css o HtmlEditorTableFormats.css.

  1. Nel browser Web, selezionare il percorso del foglio di stile da cui si desidera copiare uno o più stili, digitando uno dei percorsi seguenti nella barra Indirizzo del browser:

    http://sito/_layouts/1033/styles/HtmlEditorCustomStyles.css

    —oppure—

    http://sito/_layouts/1033/styles/HtmlEditorTableFormats.css

  2. Quando si riceve un messaggio in cui si richiede come si desidera utilizzare il file, fare clic su Apri.

    In Office SharePoint Designer 2007 verrà aperto il foglio di stile.

  3. Selezionare lo stile da modificare, fare clic con il pulsante destro del mouse e quindi scegliere Copia dal menu di scelta rapida.

    Foglio di stile con menu di scelta rapida e comando Copia

  4. In Office SharePoint Designer 2007, aprire o ritornare al layout di pagina per cui si desidera sovrascrivere lo stile e quindi fare clic su Opzioni nel riquadro attività Gestione stili.

    Nota : Se il riquadro attività Gestione stili non è visibile, scegliere Gestione stili dal menu Riquadri attività.

  5. Verificare che il comando Visualizza gli stili utilizzati nella pagina corrente sia selezionato.

    Menu Opzioni con il comando Visualizza gli stili utilizzati nella pagina corrente selezionato

  6. Nel riquadro attività Gestione stili, fare doppio clic su uno dei fogli di stile utilizzati in questa pagina, ad esempio pageLayout.css, per aprire il foglio di stile per la modifica.

    Ogni foglio di stile applicato alla pagina corrente viene visualizzato come un'intestazione di sezione nell'elenco Stili CSS del riquadro attività Gestione stili. Per modificare un foglio di stile, fare doppio clic sulla relativa intestazione.

  7. Scorrere fino alla fine del foglio di stile, fare clic con il pulsante destro del mouse sul punto in cui si desidera incollare lo stile e quindi scegliere Incolla dal menu di scelta rapida.

  8. Modificare lo stile nel modo desiderato.

    Nota : Il riquadro attività Proprietà CSS offre un approccio visivo per la modifica dello stile. Se questo riquadro attività non è visibile, scegliere Proprietà CSS dal menu Riquadri attività.

  9. Per salvare il foglio di stile, scegliere Salva dal menu File.

Al successivo utilizzo dell'editor HTML per la modifica di un articolo creato da questo layout di pagina, lo stile modificato sarà disponibile per l'utilizzo e verrà visualizzato nell'elenco Stili.

Elenco Stili con stile modificato

Creare un nuovo stile

È possibile anche creare un nuovo stile e renderlo disponibile nell'elenco Stili dell'editor HTML. Poiché è più semplice partire da uno stile esistente che immetterne uno nuovo, in questa sezione viene illustrato come creare un nuovo stile copiando e rinominando uno stile esistente.

  1. Nel browser, selezionare il percorso del foglio di stile da cui si desidera copiare gli stili, digitando uno dei percorsi seguenti nella barra Indirizzo del browser:

    http://sito/_layouts/1033/styles/HtmlEditorCustomStyles.css

    —oppure—

    http://sito/_layouts/1033/styles/HtmlEditorTableFormats.css

  2. Quando si riceve un messaggio in cui si richiede come si desidera utilizzare il file, fare clic su Apri. In Office SharePoint Designer 2007 verrà aperto il foglio di stile.

  3. Selezionare lo stile da modificare, fare clic con il pulsante destro del mouse sullo stile e quindi scegliere Copia dal menu di scelta rapida.

    Foglio di stile con menu di scelta rapida e comando Copia

  4. In Office SharePoint Designer 2007 aprire o ritornare al layout di pagina a cui si desidera aggiungere il nuovo stile e quindi fare clic su Opzioni nel riquadro attività Gestione stili.

    Nota : Se il riquadro attività Gestione stili non è visibile, scegliere Gestione stili dal menu Riquadri attività.

  5. Verificare che il comando Visualizza gli stili utilizzati nella pagina corrente sia selezionato.

    Menu Opzioni con il comando Visualizza gli stili utilizzati nella pagina corrente selezionato

  6. Nel riquadro attività Gestione stili, fare doppio clic su uno dei fogli di stile utilizzati in questa pagina, ad esempio pageLayout.css, per aprire il foglio di stile per la modifica.

    Ogni foglio di stile applicato alla pagina corrente viene visualizzato come un'intestazione di sezione nell'elenco Stili CSS del riquadro attività Gestione stili. Per modificare un foglio di stile, è possibile fare doppio clic sulla relativa intestazione.

  7. Scorrere fino alla fine del foglio di stile, fare clic con il pulsante destro del mouse sul punto in cui si desidera incollare lo stile e quindi scegliere Incolla dal menu di scelta rapida.

  8. Modificare lo stile nel modo desiderato.

    Se non si desidera sovrascrivere lo stile esistente copiato, è necessario modificare il nome dello stile. Se, ad esempio, si desidera che il nuovo stile sia nominato redHeadline, modificare il codice CSS

.ms-rteCustom-ArticleTitle, .ArticleTitle{font-weight: bold;font-family: Arial;font-size: 14pt;color: #8C0000;text-transform: capitalize;}

nel modo seguente

.ms-rteCustom-redHeadline, .redHeadline{font-weight: bold;font-family: Arial;font-size: 14pt;color: #8C0000;text-transform: capitalize;}

Nota : Il riquadro attività Proprietà CSS offre un approccio visivo per la modifica dello stile. Se questo riquadro attività non è visibile, scegliere Proprietà CSS dal menu Riquadri attività.

  1. Per salvare il foglio di stile, scegliere Salva dal menu File.

    Al successivo utilizzo dell'editor HTML per la modifica di un articolo creato da questo layout di pagina, lo stile modificato sarà disponibile per l'utilizzo e verrà visualizzato nell'elenco Stili.

    Elenco Stili con stile modificato

Torna all'inizio

Amplia le tue competenze
Esplora i corsi di formazione
Ottieni in anticipo le nuove caratteristiche
Partecipa al programma Office Insider

Queste informazioni sono risultate utili?

Grazie per i tuoi commenti e suggerimenti

Grazie per il tuo feedback! Potrebbe essere utile metterti in contatto con uno dei nostri operatori del supporto di Office.

×