3E e 3D SIA: Lezione Html - Utilizzo di Expression WEB (incorporato in Visual Studio)
Microsoft Expression Web (incorporato da alcuni anni in Visual Studio), la guida passo passo alla creazione di un sito professionale
L'area di lavoro
L’interfaccia di Expression Web è organizzata in tre diverse aree centrali e tre diverse barre degli strumenti. L’area di lavoro offre, a sinistra, l’elenco delle cartelle e le proprietà dei tag utilizzati nel documento; a destra sono invece posizionati i pannelli degli elementi HTML pre-configurati e i pannelli dei fogli di stile incorporati nella pagina. Sia gli elementi HTML, sia le regole Css possono essere attivate con un semplice clic o con un drag and drop del mouse. L’area centrale ospita invece la pagina su cui si sta lavorando in tre diverse visualizzazioni: progettazione, con l’anteprima della visualizzazione nel browser, codice, con la struttura del codice, e doppia, con entrambe le modalità visualizzate orizzontalmente a mezzo schermo.
Linguaggi
Expression Web supporta i principali linguaggi di progettazione di pagine Web. Oltre all’HTML, è possibile scrivere codiceAsp.Net, CSS, JavaScript e PHP facendosi aiutare da Intellisense, il sistema di riconoscimento automatico di tag ed elementi che velocizza e aiuta a scegliere la giusta istruzione (Figura 4). Oltre al completamento degli elementi, per questi linguaggi Expression Web prevede anche, ma con diversi livelli di completezza, l’identificazione degli errori: nella visualizzazione codice gli elementi errati saranno evidenziati di giallo e, scorrendovi sopra il mouse, sarà anche possibile visualizzare suggerimenti su come risolvere il problema.
Figura 4. Tra le funzioni di Expression Web c’è anche un utile strumento di validazione dei file CSS
Strumenti avanzati
Expression Web ha diversi strumenti avanzati che permettono di creare siti Web complessi. Chi ha esperienza con la programmazione Asp.Net, troverà nell’editor diverse funzioni e controlli - importazione dati, pagine master, elenchi dinamici e così via - da attivare attraverso il semplice mouse. Anche le funzioni per la multimedialità sono ben integrate: dal menu Inserisci/Elementi multimediali è possibile scegliere se includere nella pagina elementi Flash, Silverlight, Windows Media o Deep Zoom: basta indicare il file da includere e scegliere, da un apposito box, le proprietà dell’elemento.
Modelli predefiniti
Expression Web 4 viene distribuito con un gran numero di modelli (template) predefiniti con cui è possibile creare un intero sito Web con un singolo clic e modificare automaticamente le aree comuni delle pagine (logo, testata e piè di pagina e così via) agendo solo su un unico elemento. Oltre ai modelli per interi siti, Expression Web include (li si trova nel menu Nuova/Pagina/Layout CSS) alcuni dei più comuni layout gestiti da fogli di stile: a due, tre colonne o con intestazioni e piè di pagina.
I moduli di test
In Expression Web 3 ha fatto la sua comparsa SuperPreview, un modulo del programma che consente di visualizzare l’anteprima della pagina creata in diversi browser (Figura 5). Uno strumento utile per verificare la compatibilità del codice e la resa grafica con diversi motori di rendering. SuperPreview funziona sia con le pagine in progettazione sia con pagine Web già online, include il motore di rendering per le varie versioni di Internet Explorer (6,7 e 8), ma può anche testare la compatibilità con browser Macintosh: in Expression Web 4 il servizio Remote browser si occupa di inviare la pagina da testare ad un servizio Web online che la restituirà formattata per Safari su Macintosh. Per chi sviluppa siti dinamici con tecnologie Asp. Net o PHP, Expression Web offre un altro utile strumento che facilita il test delle proprie creazioni: un leggero web server incorporato. Già configurato per Asp.Net, può funzionare anche con file Php aggiungendo, nelle opzioni del programma, l’indirizzo dell’eseguibile per Windows scaricabile da www.php.net.
Figura 5 - SuperPreview permette di testare un medesimo sito Web con diverse versioni di Internet Explorer
PASSO PASSO: CREARE UN SITO PROFESSIONALE CON EXPRESSION WEB 4
Dal menu Sito scegliete la voce Nuovo sito e fate clic, nella finestra che si apre, sulla voce Modelli. Scegliete dall’elenco uno dei modelli che più si addice al vostro progetto, assegnategli un nome (casella Nome) e premete Ok.
Fate doppio clic sul file master.dwt e, attraverso la linguetta in basso nella finestra, passate in modalità Progettazione. Si aprirà la master page, ossia la pagina che definisce gli stili e gli elementi comuni all’intero sito Web.
Modificate la master page in modo da farle rappresentare gli elementi del vostro sito. Cominciate dal logo per continuare con gli elementi del menu. Vi consigliamo di modificare il testo direttamente nel codice sorgente.
Dopo aver salvato la pagina master, potete cominciare a modificare le altre pagine del sito. Apritele attraverso il pannello chiamato Elenco cartelle (a sinistra dell’interfaccia), modificatele e salvatele ad una ad una.
Quando salvate pagine in cui sono stati inclusi elementi esterni (fogli di stile, immagini, video flash) comparirà l’avviso mostrato in figura. Accertatevi di fare sempre clic su Ok senza modificare le opzioni predefinite.
Dal menu Sito scegliete la voce Pubblicazione e poi fate clic su Aggiungi una destinazione di pubblicazione. Inserite i dati di login del server Ftp e fate clic su Aggiungi. Dalla finestra di destra selezionate le cartelle con i file e premete il tasto blu Pubblica.
Link con gli argomenti spiegati - HTML, manuali e software Expression Web:
Lezione completa sulle istruzioni HTML:
http://paololatella.blogspot.com/2016/09/lezione-sul-linguaggio-html-classi-iii.html
Lezione sulle regole HTML:
http://paololatella.blogspot.com/2018/10/regole-per-una-pagina-html-classe-iii-d.html
Lezione sui tag HTML:
http://paololatella.blogspot.com/2018/10/classe-iii-d-e-iii-e-sia-codice-html-da.html
Lezione sui tag link HTML:
http://paololatella.blogspot.com/2018/10/3d-sia-seconda-lezione-html-i-link.html
Lezione (prima) sui tag HTML:
http://paololatella.blogspot.com/2018/10/3d-sia-1a-lezione-sullhtml.html
Lezione in Pdf completa sull'HTML:
http://laboratoriosia.altervista.org/3DSIA/informatica/eserciziphp/filemanager_didattico2/fileman/uploads/LezioneHTML.pdf
Manuale in pdf sul Web + HTML:
http://laboratoriosia.altervista.org/3DSIA/informatica/eserciziphp/filemanager_didattico2/fileman/uploads/Linguaggio_HTML_e_Web.pdf
Link per scaricare Web Expression:
http://laboratoriosia.altervista.org/3DSIA/informatica/eserciziphp/filemanager_didattico2/fileman/uploads/Web_Trial_it.exe
Link per scaricare il tutorial di Expression Web:
http://laboratoriosia.altervista.org/3DSIA/informatica/eserciziphp/filemanager_didattico2/fileman/uploads/link_tutorial_EW.txt
Link per scaricare i templates da utilizzare in Expression Web:
http://www.expression-templates.org/expressionweb-templates-free.html
Link per scaricare la versione completa del software Web Studio (che contiene Expression Web, Expression Design e Encoder):
https://www.microsoft.com/it-it/download/details.aspx?id=7764
Link per scaricare il manuale completo aggiornato ad aprile 2014 di Microsoft Expression Web:
http://laboratoriosia.altervista.org/3DSIA/informatica/eserciziphp/filemanager_didattico2/fileman/uploads/expression-web-4.pdf
fonte articolo: http://www.i-dome.com/articolo/15381-.html
Buon studio e buon lavoro!
prof. Paolo Latella
Commenti
Posta un commento