E- m ail destinatario: specifica l'indirizzo a cui deve essere inviata l'e-mail di notifica di ricezione dei dati
6.2 Finestra Proprietà Pagina
6.2.3 Sezione Esperto
Attraverso le opzioni di questa finestra si agisce manualmente sul codice HTML generato per la Pagina a cui si sta lavorando.
Estensione del file generato: specifica l'estensione con la quale verrà salvato il file relativo alla Pagina. Di default viene proposta l'estensione .HTML ma, in alternativa, è possibile scegliere fra .PHP, .ASP, .CFM e .JSP. Anche il file index.html relativo alla Home Page può essere salvato con un'estensione diversa. Solo per le Pagine Protette (vedi il comando Protetta nella Barra Strumenti della Mappa) non è possibile modificare il formato del file generato che rimane necessariamente .PHP.
Codice personalizzato: definisce la posizione all'interno del codice HTML della Pagina in cui deve essere inserito il codice personalizzato: Prima dell'apertura del tag HTML, Dopo l'apertura del tag HEAD, Prima della chiusura del tag HEAD, Proprietà del tag BODY (es style, onload, ecc.) (ovvero all'interno dell'istruzione <BODY>, ad esempio: <BODY onload="alert('Hello!')">), Dopo l'apertura del tag BODY, Prima della chiusura del tag BODY. Selezionata la posizione, è disponibile un campo in cui digitare o incollare la porzione di codice che deve essere inserita all'interno del codice HTML della Pagina creato in automatico dal Programma.
L'opzione Codice personalizzato è utile quando, per esempio, si vogliono collegare dei particolari fogli di stile (CSS), oppure quando si devono lanciare degli eventi sull'onload della Pagina. In particolare, per il corretto funzionamento di alcuni JavaScript, che possono essere inseriti attraverso l'apposito Oggetto Codice HTML, è richiesto l'inserimento di opportune righe di codice sia nella sezione <HEAD> che nella sezione <BODY> del file HTML della Pagina.
Nello scrivere del codice personalizzato è possibile utilizzare la stringa [CURPAGE]: il Programma la sostituirà in automatico con il nome del file corrispondente alla Pagina corrente.
Questo è particolarmente utile per inserire annotazioni come quelle relative al tag link rel=”alternate” e al tag link rel=”canonical” (utilizzati per segnalare a Google™ la configurazione a URL separate di Siti Desktop e Mobile), o al tag link rel="alternate" hreflang="x" (utilizzato per segnalare a Google™ versioni in lingua diversa dello stesso Sito).
Infine, nella sezione Impostazioni SiteMap sono raggruppate alcune opzioni utili per lavorare sulla SiteMap del Sito:
Inserisci questa Pagina nella SiteMap: opzione attiva di default, include la Pagina nella SiteMap creata per il Sito.
Priorità dei contenuti: assegna un punteggio alla Pagina, per indicarne l'importanza in relazione alle altre Pagine del Sito. Questo parametro viene riportato all'interno della SiteMap generata.
Frequenza di aggiornam ento: specifica con quale frequenza viene aggiornata la Pagina. Questo parametro viene riportato all'interno della SiteMap generata.
Passo 4 - Pagine
7
Dopo aver articolato la Mappa del Progetto, si può procedere alla creazione delle singole Pagine inserite nel Sito. La finestra Creazione della Pagina permette, quindi, di definire la struttura di impaginazione e di effettuare l'inserimento dei contenuti.
Il percorso e il Titolo della Pagina alla quale si sta lavorando viene riportato come Pagina corrente.
Reference: La Griglia di impaginazione
Per rendere più intuitiva l'impaginazione dei contenuti, WebSite X5 propone una Griglia che, di default, è composta da 2 righe e 2 colonne: è sufficiente trascinare gli Oggetti disponibili all'interno delle Celle di tale Griglia (un Oggetto per Cella), per comporre la Pagina.
Ovviamente, è possibile aggiungere righe e colonne in modo da disporre di un numero superiore di Celle e, in più, è possibile definire manualmente la larghezza delle singole colonne. Come vedremo, grazie a queste possibilità di disegno della Griglia e al fatto di poter disporre un Oggetto anche su più Celle adiacenti, è possibile ottenere impaginazioni anche molto raffinate.
Una precisazione importante: l'impiego della Griglia serve unicamente per semplificare e guidare l'impaginazione dei contenuti. Fatta eccezione per pochi e specifici casi particolari, rappresentati da combinazioni di impaginazione molto complesse, la Griglia di impaginazione non viene "tradotta" come tabella nel codice HTML delle Pagine. In tutti i casi, la Griglia di impaginazione non sarà mai visibile durante la navigazione con il Brow ser.
Come anticipato, ogni Cella della Griglia può contenere un unico Oggetto ma ciascun Oggetto può essere disposto anche su più Celle adiacenti orizzontalmente o verticalmente, in modo da occupare uno spazio superiore della Pagina.
L'aspetto delle Celle della Griglia di impaginazione cambia a seconda dei diversi stati che può assumere:
se contiene un Oggetto che ancora non è stato costruito, riporta l'icona corrispondente al tipo di Oggetto su uno sfondo di righe oblique grigie;
se contiene un Oggetto che è già stato costruito, riporta l'icona corrispondente al tipo di Oggetto su uno sfondo azzurro sfumato;
se contiene l'Oggetto selezionato, vengono visualizzati il perimetro e le maniglie di selezione.
Per maggiore comodità, tutte le righe della Griglia sono numerate (l'indicazione è riportata sulla sinistra) mentre i cursori per agire sulla larghezza delle colonne sono posizionati sul bordo inferiore.
Reference: I comandi della Barra Strumenti
Immediatamente sopra la Griglia di impaginazione è presente una Barra Strumenti che mette a disposizione i seguenti comandi:
Contenuto
Apre la finestra che consente di procedere alla creazione dell'Oggetto selezionato nella Griglia di impaginazione. La finestra richiamata varia in base al tipo di Oggetto (Testo, Immagine, ecc...).
Stile
Richiama la finestra Stile dell'Oggetto per definire l'aspetto grafico dell'Oggetto selezionato all'interno della Griglia di impaginazione.
Margini
Richiama la finestra Margine e Allineamento: attraverso le opzioni disponibili è possibile sia impostare il valore in
pixel per i margini esterni ed interni dell'Oggetto corrente che allineare verticalmente e/o orizzontalmente l'Oggetto rispetto alla Cella in cui è contenuto (vedere, Il Box Model in WebSite X5).
Estendi
Fa in modo che l'Oggetto selezionato si estenda oltre la larghezza della Pagina (determinata dal Modello) e occupi tutto lo spazio messo a disposizione dalla finestra del Brow ser.
Il pulsante è sempre attivo ma, di fatto, agisce solo se l'Oggetto selezionato è l'unico presente nella riga. Sulla Griglia di impaginazione, gli Oggetti per i quali è stata attivata la funzione Estendi sono facilmente individuabili dal momento che sono più larghi delle colonne che compongono la Pagina. Cliccando una seconda volta sul pulsante Estendi, l'Oggetto torna al suo comportamento normale adattandosi alla larghezza della Pagina e non più a quella della finestra del Brow ser.
Effetto
Richiama la finestra Effetto di visualizzazione per definire la transizione da associare all'Oggetto selezionato all'interno della Griglia di impaginazione.
Assegna un'Ancora all'Oggetto selezionato
Crea un'Ancora e la associa all'Oggetto selezionato nella Griglia di impaginazione. Cliccando sulla freccia a lato del pulsante, è possibile visualizzare un menu con i seguenti comandi: Inserisci Ancora..., Modifica... e Rimuovi.
L'Ancora è un riferimento che serve per identificare la posizione di un Oggetto all'interno della Pagina: viene utilizzata per impostare collegamenti diretti all'Oggetto stesso.
Aggiungi una Riga prim a della Cella selezionata/Aggiungi una Colonna prim a della Cella selezionata Aggiungono una nuova Riga o una nuova Colonna nella Griglia di impaginazione. Cliccando sulla freccia a lato dei pulsanti, è possibile scegliere se la Riga/Colonna deve essere aggiunta prima o dopo la Cella selezionata. Si possono creare griglie con un massimo di 64 righe e di 12 colonne.
Rim uovi la Riga selezionata/Rim uovi la Colonna selezionata
Eliminano la Riga o la Colonna selezionata dalla Griglia di impaginazione. Al minimo, la Griglia di impaginazione è composta da un'unica Cella (1 riga x 1 colonna).
Stile Righe
Richiama la finestra Stile delle Righe per definire l'aspetto grafico della della fascia della Pagina occupata dagli Oggetti inseriti nella riga in questione della Griglia di impaginazione.
Responsive
Richiama la finestra Impostazioni Responsive per specificare il comportamento dei singoli Oggetti inseriti in funzione della risoluzione della Pagina.
Per poter lavorare con le opzioni della finestra Impostazioni Responsive è necessario aver scelto di creare un Sito Responsive attivando l'omonima opzione presente nella finestra Risoluzioni e Responsive Design.
Reference: La lista degli Oggetti disponibili
A fianco della Griglia di impaginazione è riportato l'elenco degli Oggetti disponibili. Per inserire un Oggetto in una Pagina è sufficiente selezionare l'icona che lo rappresenta dall'elenco, trascinarla e rilasciarla sulla Griglia di impaginazione, in corrispondenza della Cella che deve occupare.
Per agevolarne la scelta, gli Oggetti possono essere filtrati e gestiti attraverso i seguenti comandi:
Elenco Filtri
Propone l'elenco dei filtri disponibili per selezionare, tra tutti gli Oggetti disponibili, quelli utili per un determinato scopo. È possibile, per esempio, visualizzare tutti i Contenuti principali Pagina oppure i Contenuti principali Modello.
Mostra la Gestione degli Oggetti
Richiama la finestra Gestione degli Oggetti attraverso la quale è possibile gestire l'installazione, la disinstallazione e l'aggiornamento di tutti gli Oggetti che non vengono installati di base con il programma.
Gli Oggetti che rientrano fra i Contenuti principali Pagina e i Contenuti principali Modello sono:
Oggetto Titolo
Oggetto Menu
Oggetto Testo Oggetto Immagine
Oggetto Tabella Oggetto Galleria
Oggetto Video/Suono Oggetto Modulo di Contatto
Oggetto Commenti e Voti Oggetto Animazione HTML5
Oggetto Catalogo Prodotti Oggetto Contenuto Dinamico
Oggetto Codice HTML
Oggetto Cerca
Una volta inserito un Oggetto nella Griglia di impaginazione è sufficiente selezionarlo e cliccare sul pulsante Contenuto (o fare doppio click in sua corrispondenza) per aprire la finestra che ne permette l'effettiva creazione.