Creare un'area modificabile di InContext Editing

Un'area modificabile di InContext Editing è costituita da una coppia di tag contenente l'attributo ice:editable nel tag di apertura. L'area modificabile definisce uno spazio della pagina che è modificabile dagli utenti direttamente da un browser.
Nota: se aggiungete un'area modificabile di InContext Editing a una pagina basata su un modello di Dreamweaver, la nuova area modificabile di InContext Editing deve trovarsi all'interno di un'area già modificabile.

  1. Effettuate una delle seguenti operazioni:

    • Selezionate un tag div, th o td da trasformare in area modificabile.

    • Spostate il punto di inserimento nella posizione della pagina in cui desiderate inserire una nuova area modificabile.

    • Selezionate esattamente un'area modificabile in un modello di Dreamweaver (file DWT).

    • Selezionate nella pagina altro contenuto da rendere modificabile (ad esempio un blocco di testo).

  2. Scegliete Inserisci > InContext Editing > Crea area modificabile.

  3. Le opzioni disponibili variano in base alla selezione.

    • Se avete selezionato un tag div, th o td, il tag viene trasformato automaticamente in un'area modificabile.

    • Se inserite una nuova area modificabile vuota, effettuate una delle seguenti operazioni:

      • Selezionate Inserisci una nuova area modificabile nel punto di inserimento corrente e fate clic su OK. Nel codice viene automaticamente inserito un tag div con l'attributo ice:editable nel tag di apertura.

      • Selezionate Trasforma il tag superiore in area modificabile se desiderate impostare il tag superiore della selezione come elemento contenitore dell'area. Potete trasformare solo alcuni tag HTML, ovvero div, th e td.

        Nota: la seconda opzione è disponibile solo se il nodo di origine soddisfa tutti i criteri per la trasformazione. Deve essere ad esempio uno dei tag trasformabili elencati e non deve essere soggetto agli errori elencati in Messaggi di errore di InContext Editing.

    • Se avete selezionato un'area modificabile di un modello di Dreamweaver, fate clic su OK nella finestra di dialogo Crea area modificabile. Attorno all'area modificabile del modello viene applicato un tag div che agisce da contenitore per la nuova area modificabile di InContext Editing.

    • Se si è selezionato altro contenuto da rendere modificabile, effettuate una delle operazioni seguenti:

      • Selezionate "Racchiudi la selezione corrente in un tag DIV, quindi trasformala" per racchiudere la selezione in un tag div e trasformarla in un'area modificabile. Il tag div in cui Dreamweaver racchiude il contenuto funziona da contenitore dell'area modificabile.
        Nota: l'aggiunta di tag div alle pagine potrebbe alterare il rendering della pagina e gli effetti delle regole CSS. Se ad esempio è presente una regola CSS che applica un bordo rosso attorno ai tag div, viene visualizzato un bordo rosso attorno alla selezione corrente quando attorno ad essa viene applicato un tag div che viene trasformato. Per evitare questo tipo di conflitto, potete riscrivere le regole CSS che agiscono sulla selezione corrente oppure annullare la trasformazione (Modifica > Annulla) e quindi selezionare e trasformare un tag supportato attorno al quale non è necessario applicare un tag div.

      • Selezionate Trasforma il tag superiore in area modificabile per fare in modo che Dreamweaver renda il tag superiore della selezione l'elemento contenitore dell'area modificabile. Potete trasformare soltanto determinati tag HTML: div, th e td.

  4. Nella vista Struttura, fate clic sulla linguetta blu dell'area modificabile per selezionarla (se non è già selezionata).
    Nota: se lavorate con un modello di Dreamweaver, fate attenzione a selezionare l'area modificabile di InContext Editing (l'area del contenitore) e non l'area modificabile del modello di Dreamweaver.

  5. Selezionate o deselezionare le opzioni nella finestra di ispezione Proprietà Area modificabile. Le opzioni selezionate risulteranno disponibili agli utenti quando essi modificano i contenuti dell'area modificabile in un browser. Ad esempio, se selezionate l'opzione Grassetto, gli utenti possono rendere il testo grassetto; se selezionate l'opzione Elenco numerato ed Elenco puntato, gli utenti possono creare elenchi numerati e puntati; se selezionate l'opzione Collegamento, gli utenti possono creare collegamenti ecc. Spostando il cursore del mouse sull'icona di ogni opzione potete visualizzare una descrizione comando relativa all'opzione.

  6. Salvate la pagina.

    Se state aggiungendo la funzionalità InContext Editing a una pagina per la prima volta, Dreamweaver segnala l'aggiunta dei seguenti file di supporto di InContext Editing al sito: ice.conf.js, ice.js e ide.html. Al momento di caricare la pagina, verificate di aver caricato questi file sul server; in caso contrario, la funzionalità InContext Editing non funziona nei browser.