Uno dei motivi per imparare a progettare pagine Web con InDesign è l’abbondante set di strumenti del programma per la creazione di contenuti, oltre alla formattazione dei contenuti di base. Ad esempio, è possibile utilizzare il controllo Opacità del programma e altri strumenti di stratificazione per creare un’immagine a più livelli per l’intestazione di una pagina Web. Per la progettazione della pagina, puoi anche utilizzare lo strumento Cornice rettangolare per bloccare le ampie sezioni di ciascuna pagina: inclusi intestazione, area di navigazione e contenuto del corpo. Utilizzare lo strumento testo per creare il contenuto di testo per quelle sezioni.
1
Fare clic sul comando “Nuovo” del menu File, quindi fare clic sulla voce “Web” dal controllo Preset. Fare clic su “OK” per creare il documento.
2
Fare clic sullo strumento Cornice rettangolare dalla tavolozza Strumenti, la cui icona è un rettangolo incrociato. Trascina sul documento per posizionare la cornice in corrispondenza o vicino alla parte superiore del documento e su tutta la larghezza del documento. Questo frame conterrà l’intestazione della pagina, ad esempio un’immagine di sfondo sovrapposta al testo che descrive il tuo sito.
3
Usa lo strumento Cornice rettangolare per creare una cornice sotto la cornice dell’intestazione e allineata con il bordo sinistro del documento. Questo riquadro conterrà i collegamenti per la navigazione ad altre pagine Web.
4
Usa Cornice rettangolare per creare una cornice sotto l’intestazione il cui bordo sinistro coincide con il bordo destro della cornice di navigazione e il cui bordo destro è il bordo destro del documento. Questo costituisce la cornice per la visualizzazione del body copy, come teaser per articoli su altre pagine del sito.
5
Premere “V” per eseguire lo strumento Selezione, quindi fare clic sul riquadro dell’intestazione per selezionarlo. Fare clic con il pulsante destro del mouse, quindi fare clic su “Contenuto”, seguito da “Grafica” per indicare che questo riquadro conterrà dati grafici.
6
Fai clic sul comando “Inserisci” del menu File, quindi individua e fai doppio clic su un’immagine che desideri utilizzare sullo sfondo dell’intestazione. Trascina il cursore “Opacità” del pannello Effetti verso sinistra fino al segno del 50 percento, per sfumare l’immagine abbastanza da poter vedere chiaramente il testo sopra di essa.
7
Premi “T” per eseguire lo strumento Testo, quindi trascina sulla parte dell’intestazione su cui desideri aggiungere il testo che annuncia il tuo sito. Digita il testo, quindi premi “Esc” quando hai finito per rilasciare lo strumento Testo.
8
Usa lo strumento Testo per creare una casella di testo all’interno del riquadro di navigazione, per contenere i link di navigazione della pagina. Fare clic su un colore dal pannello Colori per caricare quel colore per il testo: il blu è comunemente usato per il testo indicato con collegamenti ipertestuali. Quindi digita il tuo primo collegamento di navigazione nella casella di testo (“Chi siamo”, ad esempio). Digita i link rimanenti allo stesso modo. Utilizza il pannello Colore per selezionare il nero, quindi utilizza lo strumento Testo per digitare qualsiasi testo non collegato a un collegamento ipertestuale che desideri seguire il collegamento ipertestuale: ad esempio, potresti digitare “La nostra missione, storia e biografie” sotto il collegamento “Chi siamo”.
9
Usa lo strumento Testo e il pannello Colore per creare il testo del collegamento ipertestuale per il contenuto del corpo della pagina, come hai fatto per il riquadro di navigazione. Ad esempio, fai prima clic su un colore nel pannello Colore simile al colore dei collegamenti ipertestuali del riquadro di navigazione. Utilizza lo strumento Testo per digitare il titolo di un articolo con collegamento ipertestuale (ad esempio “Aumentare la produttività con orari flessibili”).
10
Fare clic sul colore nero nel pannello Colore, quindi digitare un testo senza collegamento ipertestuale che fornisce un teaser o un riepilogo per il titolo dell’articolo. Scegli caratteri, colori o altre caratteristiche specifici per il contenuto del corpo, assicurandoti che siano soddisfatti i seguenti criteri: in primo luogo, i collegamenti per il contenuto del corpo dovrebbero essere simili ai collegamenti nel riquadro di navigazione. In secondo luogo, il testo del teaser senza collegamento ipertestuale che descrive i collegamenti dovrebbe apparire simile al testo senza collegamento ipertestuale nel riquadro di navigazione. Terzo, assicurati che il testo del collegamento ipertestuale del corpo sia chiaramente diverso dal suo testo senza collegamento ipertestuale, come con il contenuto del riquadro di navigazione creato in precedenza.
11
Fare clic su “Esporta” dal menu File e fare clic su “HTML” per il parametro Tipo. Digita un nome file nella casella di testo “Nome file” e fai clic su “Salva” per completare l’esportazione in HTML. Successivamente è possibile modificare la pagina e introdurre la codifica del collegamento ipertestuale in un editor di pagine Web come Dreamweaver o in un editor di testo come WordPad.