Microsoft Expression Web - Guida rapida
Microsoft Expression Web è uno strumento professionale completo per la progettazione, lo sviluppo e la pubblicazione di siti Web ricchi di funzionalità conformi agli standard Web. È possibile utilizzare Expression Web per creare pagine Web e siti che consentono di trasferire file tra il computer e l'account di hosting.
Expression Web può progettare e sviluppare pagine Web utilizzando HTML5, CSS 3, ASP.NET, PHP, JavaScript, XML + XSLT e XHTML.
Expression Web 4 richiede .NET Framework 4.0 e Silverlight 4.0 per l'installazione e l'esecuzione.
Microsoft Expression Web - Cronologia
Microsoft Expression Web - Storia Microsoft ha rilasciato la prima versione Community Technology Preview (CTP) di Expression Web il 14 maggio 2006.
Microsoft Expression Web 4 è stato rilasciato il 7 giugno 2010.
Ha aggiunto l'opzione di componenti aggiuntivi HTML e l'accesso a una funzionalità basata sul Web per testare le pagine sui browser che non possono essere installati sul sistema dell'utente, come i browser Mac OS X o Linux.
Fornisce inoltre un controllo SEO che consente di analizzare i siti Web già creati rispetto alle migliori pratiche per ottenere il posizionamento nei motori di ricerca più alto possibile.
Expression Web Service Pack
Expression Web Service Pack Expression Web 4 Service Pack 1 è stato rilasciato a marzo 2011 e ha aggiunto il supporto per IntelliSense per HTML5 e CSS.
Expression Web 4 Service Pack 2 è stato rilasciato nel luglio 2011. Ha risolto una serie di problemi e introdotto nuove funzionalità come:
- Supporto per jQuery IntelliSense
- un pannello per la gestione degli snippet
- Pannello snapshot interattivo
- funzionalità di commento / rimozione dei commenti nella visualizzazione codice e
- personalizzazione dell'area di lavoro e della barra degli strumenti.
Nel dicembre 2012, Microsoft ha annunciato che Expression Studio non sarà più un prodotto autonomo. Expression Blend viene integrato in Visual Studio, mentre Expression Web e Expression Design ora saranno prodotti gratuiti.
Requisiti di sistema
Per creare un sito Web utilizzando Microsoft Expression Web, il computer deve soddisfare i seguenti requisiti:
- È necessario disporre almeno di Windows XP con Service Pack 3 o dei sistemi operativi più recenti.
- Dovresti avere un PC con 1 GHz o processore più veloce.
- Il tuo PC dovrebbe avere 1 GB di RAM o più.
- Il tuo PC dovrebbe avere 2 GB o più di spazio disponibile su disco rigido.
- Dovresti avere .NET Framework 4.0 e Silverlight 4.0.
- Il tuo PC dovrebbe supportare la grafica Microsoft DirectX® 9.0.
- Dovresti avere un'unità compatibile con DVD.
- Dovresti avere un monitor con risoluzione 1024 × 768 o superiore con colore a 24 bit.
- Alcune funzionalità del prodotto richiedono Firefox 3.0 o successivo, Internet Explorer 8. Quindi dovresti avere la stessa versione.
I requisiti effettivi e le funzionalità del prodotto possono variare in base alla configurazione del sistema e al sistema operativo.
Microsoft fornisce una versione gratuita di Microsoft Expression Web che può essere scaricata da https://www.microsoft.com/en-pk/download/details.aspx?id=36179
Installazione
Step 1 - Prima di poter installare Expression Web, sarà necessario avere installato .NET Framework 4.0.
Step 2- Una volta completato il download, esegui il programma di installazione. Verrà visualizzata la seguente finestra di dialogo.
Step 3 - Fare clic sul pulsante Accetta.
Step 4 - Seleziona il pulsante di opzione Sì, quindi fai clic su Avanti.
Step 5- Puoi anche scegliere un'altra posizione per l'installazione. Seleziona la posizione e fai clic sul pulsante Installa.
Viene avviato il processo di installazione.
Una volta completata l'installazione, vedrai la seguente finestra di dialogo.
Step 6 - Fare clic su Fine per continuare.
Nel capitolo precedente, abbiamo installato Microsoft Expression Web e ora siamo pronti per iniziare a lavorarci. In questo capitolo impareremo come creare un nuovo sito web da zero.
Crea un sito web
Per creare un nuovo sito Web, apriamo Microsoft Expression Web.
Successivamente, è necessario seguire i passaggi indicati di seguito.
Step 1 - Seleziona Site → New Site… opzione di menu.
Step 2 - Si aprirà la seguente finestra di dialogo da cui è possibile creare o importare diversi tipi di sito Web.
Step 3 - Per semplicità selezioniamo General → One Page Site.
Specificare la posizione oppure è possibile accedere alla posizione in cui si desidera creare il nuovo sito Web.
Digita il nome del tuo sito web nel campo del nome e fai clic su OK.
Step 4 - Il nuovo web verrà creato con una pagina denominata default.htm. Rinominiamolo inindex.html con un clic destro sul file e facendo clic sull'opzione Rinomina.
Step 5 - L'impostazione predefinita doctype utilizzato in Expression Web è:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">Puoi vederlo semplicemente passando al code view.
Puoi modificare il doctype da Tools → Page Editor Options → Authoring.
Step 6 - Adesso aggiungiamo <h1> tag all'interno del body tag e del testo come mostrato nel codice seguente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
</head>
<body>
<h1>
This my first Web page
</h1>
</body>
</html>Step 7 - Per vedere il nostro web in un browser, andiamo nel menu File e selezioniamo il file Preview in Browser → Any browser, diciamo, Internet Explorer.
Aprirà il nostro sito Web in Internet Explorer.
Poiché abbiamo già creato il nostro sito Web, ora dovremo creare la nostra Home Page. Nel capitolo precedente, abbiamo creato un sito Web di una pagina e la nostra home page è stata creata in quel momento automaticamente da Expression Web. Quindi, se hai creato un sito web vuoto, dovrai creare una home page per il tuo sito.
Microsoft Expression Web può creare i seguenti tipi di pagine:
- HTML
- ASPX
- ASP
- PHP
- CSS
- Pagina principale
- Modello Web dinamico
- JavaScript
- XML
- File di testo
In questo capitolo, creeremo una pagina HTML e il suo foglio di stile corrispondente.
Crea una pagina vuota
Per creare una pagina vuota, puoi semplicemente andare al menu File e selezionare New → Page… opzione di menu.
Dalla nuova finestra di dialogo, puoi creare diversi tipi di pagine vuote come pagina HTML, pagina ASPX, pagina CSS, ecc. E fare clic su OK.
Come puoi vedere qui, il codice predefinito è già stato aggiunto da Microsoft Expression Web.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<h1>
This is a blank web page
</h1>
</body>
</html>Come puoi vedere, la tua pagina appena creata ha il nome del file Untitled_1.html o Untitled_1.htm. Dovrai salvare la pagina premendo Ctrl + S e specificare il nome.
Poiché il nostro sito Web contiene già un file index.htmlpagina, non abbiamo bisogno di un altro. Tuttavia, se hai creato un sito Web vuoto, assegna un nome a questa paginaindex.html.
Per vedere il tuo web in un browser, vai al menu File e seleziona il file Preview in Browser → Any browser, diciamo Internet Explorer.
Crea una pagina CSS
Ti guidiamo attraverso il processo passo passo per creare una pagina CSS.
Step 1 - Per creare una pagina CSS, vai al menu File e seleziona New → Page… opzione di menu.
Step 2 - Seleziona General → CSS e fare clic su OK.
Step 3 - Salva la pagina e digita un nome per il foglio di stile.
Step 4 - Fare clic su Save pulsante.
Step 5 - Ora andiamo alla pagina index.html.
Step 6 - Nel Manage Styles Panel, fare clic Attach Style Sheet.
Step 7 - Sfoglia il tuo foglio di stile e seleziona la Pagina corrente da "Allega a" e Collega da "Allega come" e fai clic su OK.
Step 8 - Ora vedrai che una nuova riga viene aggiunta automaticamente nella pagina index.html.
<link href = "sample.css" rel = "stylesheet" type = "text/css" />Step 9 - Il bodyelemento definisce il corpo del documento. Per modellare il<body>tag, dobbiamo creare un nuovo stile. Per prima cosa, seleziona il tag body nella vista Progettazione e poi fai clic su Nuovo stile ... nel pannello Applica stili o nel pannello Gestisci stili, che aprirà la finestra di dialogo Nuovo stile.
Qui puoi definire le diverse opzioni per il tuo stile. Il primo passaggio consiste nel selezionare il corpo dall'elenco a discesa Selettore e quindi selezionare il foglio di stile esistente dall'elenco a discesa "Definisci in".
Step 10 - Dall'URL, seleziona il file sample.cssfile. Sul lato sinistro, c'è un elenco di categorie come carattere, sfondo, ecc. E attualmente il carattere è evidenziato. Imposta le informazioni relative al carattere secondo i tuoi requisiti come mostrato nello screenshot sopra e fai clic su Ok.
Step 11- Ora puoi vedere nella vista Progettazione che il colore di sfondo e il carattere sono cambiati in quello che abbiamo selezionato. Ora, se apri il file sample.css, vedrai che tutte le informazioni vengono automaticamente memorizzate nel file CSS.
Vediamo in anteprima la nostra pagina web in un browser. Noterai che lo stile viene applicato dal file CSS.
In questo capitolo, tratteremo il layout di base delle tue pagine web. Prima di creare il layout della nostra pagina web, dobbiamo pensare al nostro contenuto e quindi progettare il modo in cui vogliamo presentare quel contenuto, poiché è il contenuto che sarà visibile sul nostro sito web.
Sta a noi come presentiamo i nostri contenuti in modo che i nostri spettatori trovino il nostro sito e poi rimangano a controllarlo. Il layout includerà probabilmente il logo o il banner dell'azienda in alto, il menu di navigazione, un'area di contenuto che può includere più colonne e il piè di pagina nella parte inferiore della pagina.
In precedenza, gli sviluppatori utilizzavano le tabelle per ottenere questo aspetto. Le tabelle hanno creato un gruppo di caselle utilizzate per creare righe e colonne. Ora, i web designer usano<div>s per formare le caselle e CSS per posizionare quelle caselle sulla pagina.
tag <div>
Di seguito sono riportate alcune delle caratteristiche del tag <div>.
Il tag <div> definisce una divisione o una sezione in un documento HTML e semplifica la gestione, lo stile e la manipolazione di tali divisioni o sezioni.
Viene utilizzato per raggruppare elementi di blocco per formattarli con CSS.
I browser di solito inseriscono un'interruzione di riga prima e dopo l'elemento div.
Il tag <div> è un elemento a livello di blocco.
Il tag <div> può contenere quasi tutti gli altri elementi.
Il tag <div> non può essere all'interno di un tag <p>.
Esempio
Diamo un'occhiata a un semplice esempio in cui useremo i tag <div> </div> per creare le varie caselle e regole di stile.
Step 1 - Apri Expression Web e quindi il file index.html pagina che abbiamo creato nel capitolo precedente.
Step 2- Come si vede nello screenshot qui sopra, la vista codice è evidenziata per impostazione predefinita. Puoi lavorareCode View o Design View, ma puoi anche vedere la vista divisa che aprirà sia la vista codice che la vista struttura. Quindi selezioniamo il fileSplit View opzione.
Step 3 - Il bodyelemento definisce il corpo del documento. Per applicare uno stile al tag <body>, dobbiamo creare un nuovo stile. Seleziona prima il tag del corpo in visualizzazione struttura, quindi fai clic suNew Style…nel pannello Applica stili, che aprirà la finestra di dialogo Nuovo stile. Qui puoi definire le diverse opzioni per il tuo stile.
Step 4 - Il primo passo è selezionare il file body dal Selectorelenco a discesa e quindi selezionare il foglio di stile esistente da "Definisci in" nell'elenco a discesa. Dall'URL, seleziona il file CSS che abbiamo creato nel capitolo precedente.
Sul lato sinistro c'è un file Categoryelenco come Carattere, Sfondo, ecc. e il Carattere corrente viene evidenziato. Imposta le informazioni relative ai caratteri secondo i tuoi requisiti come mostrato nello screenshot qui sopra.
Step 5 - Seleziona il file Background colortu vuoi. È inoltre possibile selezionare l'immagine per lo sfondo utilizzando il pulsante del browser. Una volta che hai finito con lo sfondo, definisci i tuoi bordi, se lo desideri.
Step 6 - Selezioniamo il file double lineopzione per il bordo e scegli la larghezza e il colore anche dagli elenchi a discesa. Una volta che hai finito con lo stile, fai clic su Ok.
Step 7- Ora puoi vedere nella vista struttura che il colore di sfondo è cambiato in quello che abbiamo selezionato. Se apri il file sample.css, vedrai che tutte le informazioni vengono automaticamente memorizzate nel file CSS.
Step 8 - Vai al index.html pagina di nuovo e trascina il file <div> dal pannello "Casella degli strumenti" e rilasciarlo nella pagina aperta.
Step 9 - Sopra il code view, vedrai <body> e <div> fare clic su <div>e quindi nel pannello Applica stili fare clic su Nuovo stile…. che aprirà la finestra di dialogo Nuovo stile.
Digita "#container" nel campo Selector. Il segno cancelletto # è un selettore di ID. Dall'elenco a discesa "Definisci in", seleziona il foglio di stile esistente e seleziona l'opzione "Applica nuovo stile alla selezione del documento". Vai alla categoria Sfondo.
Step 10 - Seleziona il colore di sfondo, seleziona il colore bianco e poi vai alla categoria Box.
Step 11 - Definisci padding e margin e poi vai al Position categoria
Step 12- Imposta la larghezza al 90%. Tuttavia, non specificare l'altezza perché qui vogliamo che il contenitore si espanda quando entriamo nel contenuto. Fare clic sul pulsante OK.
Allo stesso modo, aggiungiamo stili per intestazione, navigazione in alto, navigazione a sinistra, contenuto principale e piè di pagina.
sample.css
Di seguito è riportato il codice in sample.css foglio di stile dopo aver aggiunto tutti gli stili sopra menzionati.
body {
font-family: Calibri;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
color: #0000FF;
background-color: #CCFFFF;
background-image: none;
border: medium double #FF0000;
}
#container {
background-color: #FFFFFF;
padding: 8px;
margin: 8px;
width: 90%;
}
#header {
background-color: #54B431;
background-repeat: no-repeat;
background-position: right center;
height: 170px;
}
#top-nav {
height: 50px;
border-top: solid medium #006600;
border-bottom: solid medium #006600;
background-color: #FFFFFF;
}
#left-nav {
margin: 20px 0px 10px 0px;
width: 180px;
float: left;
border: thin dashed #006600;
}
#main-content {
margin: 20px 10px 10px 200px;
background-color: #CCFFCC;
}
#footer {
border-top: 2px solid #006600;
clear: both;
padding: 10px 0px;
text-align: center;
}index.html
Di seguito è riportato il codice nel file index.html dopo aver aggiunto tutti i tag <div>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<style type = "text/css"></style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "top-nav"></div>
<div id = "left-nav"></div>
<div id = "main-content"></div>
<div id = "footer"></div>
</div>
</body>
</html>Produzione
Il layout della pagina nella visualizzazione struttura apparirà come mostrato nello screenshot seguente.
In questo capitolo impareremo un altro modo di progettare il layout di una pagina. Nell'ultimo capitolo, abbiamo usato il foglio di stile per applicare gli stili all'intestazione, al piè di pagina, ecc. Ma puoi anche specificare gli stili nella stessa pagina HTML senza usare un foglio di stile aggiuntivo.
Questo non è il modo consigliato per progettare un layout, tuttavia, solo per scopi di comprensione, tratteremo questa tecnica qui. Prova a seguire i passaggi indicati di seguito.
Step 1 - Aggiungiamo una pagina HTML e chiamiamola layoutdemo.html
Step 2 - Ora aggiungi il file <div> tag dalla casella degli strumenti.
Step 3 - Nel Apply Styles pannello, fare clic sul file New Style…
Step 4- Quando selezioni l'opzione Pagina corrente dal menu a discesa "Definisci in", lo stile verrà salvato nella stessa pagina HTML. Imposta il carattere per la tua pagina e poi vai alla categoria Sfondo.
Step 5- Imposta il colore per lo sfondo. È inoltre possibile impostare le categorie Bordo, Riquadro e Posizione e quindi fare clic su OK.
layoutdemo.html
Puoi vedere che lo stile viene aggiunto nello stesso file HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
<style type = "text/css">
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
color: #800000;
background-color: #C0C0C0;
padding: 8px;
margin: 8px;
width: 90%;
}
</style>
</head>
<body>
<div id = "container"></div>
</body>
</html>Allo stesso modo, puoi aggiungere altri stili come intestazione, piè di pagina, contenuto principale, ecc. Come mostrato sopra.
In questo capitolo impareremo come aggiungere la navigazione orizzontale o menu items al sito web.
Step 1 - Per creare voci di menu o navigazione orizzontale, aggiungiamo il seguente codice in <div id = “top-nav”> nel file index.html, che contiene l'elenco delle voci di menu.
<div id = "top-nav">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>Step 2- È un semplice elenco puntato per il menu principale. Per creare un collegamento ipertestuale, vai aldesign view o code view.
Step 3 - Seleziona l'elemento che desideri utilizzare come collegamento ipertestuale e premi Ctrl + K.
Step 4 - Fare clic sul pulsante Descrizione schermata….
Step 5 - Immettere il testo che si desidera come suggerimento sullo schermo e fare clic su OK.
Step 6 - Nel Text to display campo, inserisci Home e seleziona il file index.html, quindi fai clic su OK.
Step 7 - Allo stesso modo, aggiungi collegamenti ipertestuali per altre voci di menu, come mostrato nel codice seguente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset=utf-8" http-equiv = "Content-Type" />
<style type = "text/css"></style>
<link href = "sample.css" rel="stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "top-nav">
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
<li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
<li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
</ul>
</div>
<div id = "left-nav"> </div>
<div id = "main-content"> </div>
<div id = "footer"> </div>
</div>
</body>
</html>Step 8 - Per impostare lo stile per la navigazione in alto, vai a Manage Styles pannello.
Step 9 - Fare clic con il pulsante destro del mouse su “#top-nav”e seleziona Modifica stile. Seleziona la categoria "Bordo" e modifica la larghezza in sottile.
Step 10 - Seleziona la categoria Box e deseleziona la spaziatura interna "Uguale per tutti" e inserisci 10 nei campi superiore e inferiore.
Step 11 - Vai al Position categoria.
Step 12 - Rimuovere il 50 dal heightcampo e fare clic su OK. Dal pannello Applica stili, fai clic su Nuovo stile ...
Step 13 - Entra #top-nav ulnel campo Selettore e selezionare il foglio di stile esistente dal menu a discesa "Definisci in". Nella categoria Blocco, seleziona centro dal campo di allineamento di prova e vai alla categoria Elenco.
Step 14 - Seleziona none dal list-style-type campo e fare clic su OK.
Step 15 - Ancora una volta, dal Apply Styles fare clic su Nuovo stile ... Invio #top-nav ul linel campo Selector. Quindi seleziona il foglio di stile esistente dal menu a discesa "Definisci in" e vai alla categoria Layout.
Step 16 - Seleziona inline dal display campo e fare clic su OK.
Step 17 - Vai al pannello Applica stili, fai clic su Nuovo stile ... Invio #top-nav ul li a nel campo Selettore e selezionare il foglio di stile esistente dal menu a discesa "Definisci in" e selezionare il bianco come colore del carattere.
Step 18 - Vai al Background categoria.
Step 19 - Seleziona green come colore di sfondo e vai al file Box category.
Step 20 - Imposta il file padding values e fare clic su OK.
Step 21- Ora andiamo di nuovo al pannello Applica stili e fai clic su Nuovo stile. accedere#topnav ul li a:hover nel campo Selettore e selezionare il foglio di stile esistente dal menu a discesa "Definisci in" e selezionare black come la font color.
Step 22 - Adesso vai al Background category.
Step 23 - Seleziona il colore di sfondo per la tua opzione di menu quando il mouse è posizionato sulla voce di menu e vai alla categoria Bordo.
Step 24- Seleziona lo stile, la larghezza e il colore del bordo e fai clic su OK. Per controllare come appare, vai al menu File e seleziona Anteprima nel browser.
Quando passi il mouse su una voce di menu, cambierà lo sfondo e il colore del carattere.
In questo capitolo impareremo come aggiungere la navigazione verticale o voci di menu al sito web. Andiamo passo dopo passo.
Step 1 - Per creare voci di menu o navigazione verticale, aggiungiamo il seguente codice in <div id = “left-nav”> nel file index.html che contiene l'elenco delle voci di menu.
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>Step 2- È un semplice elenco puntato per il menu principale. Per creare un collegamento ipertestuale, vai aldesign view o code view.
Step 3 - Seleziona l'elemento che desideri utilizzare come collegamento ipertestuale e premi Ctrl + K.
Step 4- Fare clic sul pulsante Descrizione schermata…. Inserisci il testo che desideri come filescreentip e fare clic su OK.
Step 5 - Nel Text to display campo, inserisci Home e seleziona il file index.html, quindi fai clic su OK.
In questa fase, la nostra pagina index.html appare come segue:
Step 6 - Aggiungere altri collegamenti ipertestuali per altre voci di menu, come mostrato nel codice seguente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<style type = "text/css"></style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "top-nav">
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
<li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
<li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
</ul>
</div>
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
<li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
<li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
</ul>
</div>
<div id = "main-content"></div>
<div id = "footer"></div>
</div>
</body>
</html>Step 7- Per impostare lo stile per la navigazione in alto, vai al pannello Gestisci stili. Fare clic con il tasto destro su#left-nav e seleziona Modifica stile ...
Step 8 - Immettere il valore 0.9 nel campo della dimensione del carattere e selezionare em dall'elenco a discesa accanto alla dimensione del carattere e vai alla categoria Box.
Step 9- Controlla il riempimento "Uguale per tutti" e inserisci 5 nel campo superiore e fai clic su OK. Dal pannello Applica stili, fai clic su Nuovo stile ...
Step 10 - Entra #left-nav ulnel campo Selector. Selezionare il foglio di stile esistente dal menu a discesa "Definisci in" e nella categoria Elenco, selezionare nessuno dal campo del tipo di stile dell'elenco e fare clic su OK.
Step 11 - Ancora una volta, dal Apply Styles pannello, fare clic su New Style. Deseleziona l'imbottitura "Uguale per tutti". Immettere 0.2 nel campo inferiore e fare clic su OK.
Step 12 - Entra #left-nav ul li nel campo Selettore e seleziona il foglio di stile esistente dal menu a discesa "Definisci in" e vai alla categoria Casella.
Step 13 - Vai al pannello Applica stili e fai clic su Nuovo stile.
Step 14 - Entra #left-nav ul li a nel campo Selettore e selezionare il foglio di stile esistente dal menu a discesa "Definisci in" e selezionare il bianco come colore del carattere.
Step 15- Vai alla categoria Sfondo. Seleziona il colore come colore di sfondo
Step 16 - Vai al Box categoria e impostare i valori di riempimento.
Step 17 - Vai al Layoutcategoria. Selezionareblock dal display menu a discesa e fare clic su OK.
Step 18- Ora andiamo di nuovo al pannello Applica stili e fai clic su Nuovo stile. accedere#left-nav ul li a:hovernel campo Selettore e selezionare il foglio di stile esistente dal menu a discesa "Definisci in". Seleziona il nero come colore del carattere.
Step 19- Ora vai alla categoria Sfondo. Seleziona il colore di sfondo per l'opzione di menu quando il mouse passa con il mouse sulla voce di menu e fai clic su OK.
Step 20 - Per controllare come appare, vai al menu File e seleziona Anteprima nel tuo browser.
Quando passi il mouse su una voce di menu, cambierà lo sfondo e il colore del carattere.
In questo capitolo impareremo come assicurarci che sia il nostro codice HTML che CSS siano convalidati. Microsoft Expression Web offre diversi modi per verificare la presenza di errori di codice nelle pagine Web e il codice non compatibile con un particolare schema HTML e CSS.
La barra di stato e la vista Codice segnalano errori di codice e incompatibilità in una singola pagina, mentre il riquadro attività Compatibilità elenca tutti gli errori di codice e le incompatibilità in una o più pagine o in un intero sito Web.
Expression Web identifica il codice incompatibile utilizzando uno schema del documento basato sulla dichiarazione DocType in una pagina.
Se la pagina non contiene una dichiarazione DocType o il DocType non viene riconosciuto, Expression Web utilizza un file secondary schema.
Quando crei un sito e lavori sulle sue pagine, dovresti sviluppare l'abitudine di convalidare le pagine. Microsoft Expression Web dispone di vari strumenti che possono essere molto utili durante la convalida delle pagine Web. Esistono due opzioni molto utili in Expression Web, quindi andiamo al menu Strumenti e selezioniamo l'opzione Editor di pagine.
La scheda Generale offre due opzioni:
Highlight Invalid HTML - Questa opzione, se selezionata, mostrerà un HTML non valido in uno schema di colori specifico e l'impostazione predefinita in testo rosso su sfondo giallo.
Highlight Incompatible HTML - Questa opzione se selezionata, mostrerà una sottolineatura ondulata sotto il codice che non è compatibile con gli standard HTML.
Barra di stato
Quando la pagina Web aperta corrente contiene un errore di codice, viene visualizzato un file Code Error Detected icona (evidenziata nello screenshot seguente).
Supponiamo che tu abbia dimenticato il simbolo ">" in un tag </div> -
<div id = "footer"></div>In questo caso, la barra di stato nella parte inferiore della finestra del programma visualizza l'icona Rilevato errore codice.
Quando selezioni "Vai a errore" dal menu a discesa, ti porterà alla riga in cui si verifica l'errore e potrai correggere facilmente la sintassi.
Quando la pagina contiene un codice incompatibile con il DocType specificato, la barra di stato visualizza un file HTML Incompatibility Detected icona.
Supponiamo che tu abbia usato "hre" per un collegamento ipertestuale invece di "href", che è un errore.
<li><a href = "index.html" title = "Site Home Page">Home</a></li>La barra di stato mostra l'icona Incompatibilità HTML rilevata come mostrato nello screenshot seguente.
Quando selezioni "Vai a errore" dal menu a discesa, ti porterà alla riga in cui si trova l'errore e potrai correggere facilmente la sintassi.
Rapporto di compatibilità
Un rapporto di compatibilità controlla le pagine e i file CSS per errori di codice e il codice che non è compatibile con il DocType e lo schema CSS specificato. È possibile generare un rapporto che controlla solo file particolari o un intero sito web.
Step 1 - Per generare un rapporto di compatibilità, vai al menu Strumenti e fai clic sull'opzione Rapporti di compatibilità….
Step 2- La finestra di dialogo Verifica compatibilità fornisce diverse opzioni per controllare solo determinati file nel sito, aprire tali file o selezionarli nel riquadro attività Elenco cartelle o nella visualizzazione Sito Web. Selezionare le opzioni secondo il requisito e fare clic sul pulsante Verifica.
Step 3- Il riquadro attività Compatibilità si apre e lo stato della generazione del rapporto viene visualizzato nella parte inferiore del riquadro attività. Facendo doppio clic su qualsiasi riga, ti porterà alla posizione in cui si è verificato l'errore.
Un modello Web dinamico è una copia master basata su HTML di una pagina Web che è possibile creare per contenere impostazioni, formattazione ed elementi di pagina come testo, grafica, layout di pagina, stili e aree di una pagina Web che possono essere modificate.
Quando si allega un modello Web dinamico alle pagine di un sito Web, tale modello definisce il layout per quelle pagine. È possibile utilizzare un numero qualsiasi di modelli Web dinamici in un sito Web e allegare un modello Web dinamico a tutte le pagine desiderate.
Utilizzando modelli Web dinamici, è possibile creare pagine HTML che condividono lo stesso layout. Oltre a fornire un layout condiviso, puoi rendere disponibili alcune regioni in un modello per la modifica, impedendo al contempo modifiche ad altre regioni in quel modello.
Ciò significa che puoi consentire ad altri di aggiungere e modificare il contenuto, pur mantenendo il layout delle pagine e il modello stesso.
La necessità di modelli Web dinamici
Il concetto più importante del design del sito Web è mantenere un aspetto coerente per il tuo sito e con Dynamic Web Template puoi ottenerlo. Il modello Web dinamico fornisce:
Pagine di base come Sitemap, Contatti, Informazioni e pagine di ricerca. Un visitatore dovrebbe essere in grado di raggiungere la tua home page da qualsiasi pagina del sito.
Navigazione coerente in tutto il tuo sito.
Aspetto coerente in tutto il sito.
Crea un modello web dinamico
Per creare un modello DWT (Dynamic Web Template), inizia con una pagina HTML vuota e la salvi come file *.dwt file. Andiamo passo dopo passo e impariamo di più al riguardo.
Step 1 - Apri il file index.html e seleziona File → Save As… opzione di menu, che aprirà la finestra di dialogo Salva con nome.
Seleziona il modello Web dinamico (* .dwt) dal menu a discesa Salva come e cambia il nome del file dall'indice al master.dwt e fare clic sul pulsante Salva.
Step 2- Ora vedrai un nuovo file master.dwt creato nell'elenco delle cartelle. Creiamo un nuovo file HTML e chiamiamolo index_2.html. Apriamo il file master.dwt e nella Vista Progettazione o nella Vista Codice, fare clic con il pulsante destro del mouse all'interno dei tag <div> del contenuto principale.
Step 3 - Dal menu, seleziona Gestisci regioni modificabili ... che aprirà la finestra di dialogo Regioni modificabili.
Step 4- In Nome regione, digitare un nome per la regione modificabile, quindi fare clic su Aggiungi. Ripeti per aggiungere ulteriori regioni modificabili, se lo desideri.
Step 5- Dopo aver aggiunto tutte le regioni modificabili, fare clic su Chiudi. Ora vai al file index_2.html e selezionalo anche nell'elenco delle cartelle.
Step 6 - Vai al menu Formato e seleziona Dynamic Web Template → Attach Dynamic Web Template… che aprirà la finestra di dialogo Allega modello web dinamico.
Step 7 - Seleziona il file Dynamic Web Templateche qui è il file master.dwt e fare clic sul pulsante Apri. Riceverai un messaggio di avviso. Fare clic su Sì.
Step 8- Puoi vedere che lo stesso modello è applicato al file index_2.html. Allo stesso modo, puoi aggiungere lo stesso modello a tutte le pagine HTML che desideri sul sito web.
Step 9- In questa pagina puoi modificare solo la sezione dei contenuti principali. Se sposti il mouse sull'altra sezione, vedrai che non è modificabile e anche il cursore del mouse si trasforma in una croce rossa.
Step 10 - Per vedere come appare, vai al menu File e seleziona Anteprima nel tuo browser.
In questo capitolo impareremo come aggiungere un'opzione di ricerca o una casella di ricerca al sito web. Se si tratta di un sito di grandi dimensioni, sarà necessario disporre di una casella di ricerca nel sito in modo che l'utente possa trovare facilmente qualsiasi dato. Ce ne sono molti gratuiti disponibili come Windows Live, Google, ecc.
Windows Live Search
I passaggi seguenti mostrano come aggiungere una casella di ricerca di Windows Live alla pagina Web e quindi impostare il modulo di ricerca per eseguire la ricerca in tutto il Web o solo nel sito Web.
Step 1 - Crea una nuova pagina HTML e chiamala SearchPage.
Step 2 - Vai al menu Formato e seleziona Dynamic Web Template → Attach Dynamic Web Template…opzione. Seleziona il file master.dwt e fai clic sul pulsante Apri.
Step 3 - Aggiungiamo il seguente codice all'interno dell'area modificabile.
<form method = "get" action = "http://search.live.com/results.aspx">
<input type = "hidden" name = "cp" value = "1252"/>
<input type = "hidden" name = "FORM" value = "FREESS"/>
<table style = "background-color: #ffffff;">
<tr>
<td>
<a href = "http://search.live.com/">
<img src = "http://search.live.com/s/affillogoLive.gif"
style = "border:0px;" alt = "Live Search"/>
</a>
</td>
<td>
<input type = "text" name = "q" size = "30" />
<input type = "submit" value = "Search Site"/>
<input type = "hidden" name = "q1"
value = "site:http://www.microsoft.com/expression"/>
</td>
</tr>
</table>
</form>
Step 4- Salva la pagina. Vai al menu File e seleziona Anteprima nel browser.
Step 5- Vedrai Windows Live Search nella tua pagina web. Inseriamo qualcosa nella ricerca e facciamo clic sul pulsante Cerca nel sito
Step 6- Come puoi vedere, cercherà sul web. Se desideri limitare la ricerca solo al tuo sito web, devi specificare il dominio del tuo sito nel seguente nome invece dihttps://www.microsoft.com/expression
<input type = "hidden" name = "q1" value = "site:http://www.microsoft.com/expression"/>Step 7 - Allo stesso modo, puoi aggiungere l'opzione di ricerca di Google aggiungendo il seguente codice nella regione modificabile.
<form method = "get" action = "http://www.google.com/search">
<div style = "border: 1px solid black; padding: 4px; width: 20em; margin: 0px auto 0px auto">
<table border = "0" cellpadding = "0">
<tr>
<td class = "center">
<input type = "text" name = "q" size = "25" maxlength = "255" value = "" />
<input type = "submit" value = "Google Search" />
</td>
</tr>
<tr>
<td align = "center" style = "font-size: 75%">
<input type = "checkbox" name = "sitesearch"
value = " http://www.microsoft.com/expression" checked = "checked" />
Only search this website<br />
</td>
</tr>
</table>
</div>
</form>Step 8 - Salva la tua pagina HTML e vedrai una casella di ricerca, un pulsante di ricerca, una casella di controllo e un'etichetta della casella di controllo.
Step 9 - Per limitare gli utenti a cercare solo nel tuo sito web, seleziona la casella di controllo e vai al pannello Proprietà tag e imposta la proprietà Valore sull'URL del tuo sito web, ad esempio https://www.microsoft.com/expression.
Step 10- Salva la tua pagina e visualizzala in anteprima nel browser. Ora vedrai l'opzione di ricerca di Google nella tua pagina web.
Le immagini sono molto utilizzate nelle pagine web per renderle interessanti e fornire una migliore esperienza utente. In questo capitolo impareremo come aggiungere immagini al sito web. Come al solito, andiamo passo dopo passo e impariamo il processo in dettaglio.
Step 1 - Per iniziare ad aggiungere immagini, creiamo un nuovo sito di una pagina e cambiamo il nome del file default.html in index.html.
Step 2- Ora dobbiamo includere immagini nel sito Web in modo da poterle utilizzare nella pagina Web. Creiamo una nuova cartella. Nell'elenco delle cartelle, fare clic con il pulsante destro del mouse sul nome del sito Web.
Step 3- Al momento, non ci sono immagini in questa cartella. Per aggiungere immagini in questa cartella, è sufficiente selezionare e trascinare le immagini dal disco rigido e rilasciarle sulla cartella delle immagini.
Vedrai che le immagini vengono aggiunte al sito web images cartella, come mostrato nello screenshot seguente.
Step 4- Ora queste immagini sono incluse nel tuo sito web ma nessuna di queste viene utilizzata in una pagina web. Un modo semplice per aggiungere un'immagine nella pagina Web è trascinare l'immagine dalla cartella delle immagini e rilasciarla nella vista codice dove si desidera aggiungere l'immagine nella pagina Web.
Supponiamo di voler aggiungere un'immagine sotto l'intestazione. Quando si rilascia l'immagine e si rilascia il pulsante del mouse, verrà visualizzata la seguente finestra di dialogo.
Qui puoi specificare il testo alternativo e la descrizione lunga. Quindi fare clic su OK e salvare la pagina web. Adesso puoi vederlo<img> il tag viene aggiunto con il nome alternativo e l'origine dell'immagine.
Step 5 - Segui la stessa procedura e aggiungi la seconda immagine insieme al nome e alla fonte alternativi.
Ora il index.html il file apparirà come segue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
</head>
<body>
<h1> Working with images </h1>
<img alt = "Beautiful Birds" src = "images/birds.jpg" />
<img alt = "Other Birds" src = "images/birds2.jpg" />
</body>
</html>Step 6 - Il Picture Propertiesla finestra di dialogo consente di accedere agli attributi dell'immagine più comunemente utilizzati. Quando si fa doppio clic su un'immagine, verrà visualizzata la finestra Proprietà immagine.
In Expression Web, la finestra di dialogo Proprietà immagine ha due schede, General e Appearance.
Di seguito sono riportate le opzioni disponibili in General tab.
Picture - Contiene il nome della cartella / del file dell'immagine grafica.
Alternate Text- Digita il testo che desideri venga visualizzato per le immagini durante il download dell'immagine, quando non può essere trovata o quando un visitatore del sito sposta il puntatore su di essa. Questo testo verrà utilizzato anche da uno screen reader se il tuo visualizzatore ne utilizza uno.
Long Description- A volte alcune parole potrebbero non essere sufficienti per descrivere la tua immagine. Grafici e grafici sono esempi. Fare clic su Sfoglia per selezionare un file che contiene una descrizione più lunga dell'immagine.
Location - Se vuoi collegare la tua immagine a una pagina web o un'immagine più grande, inserisci qui il collegamento ipertestuale.
Target Frame - Se la pagina corrente è una pagina con frame, questa opzione indica in quale frame deve essere visualizzato il collegamento OPPURE è possibile scegliere di aprire l'immagine o la pagina in una nuova finestra.
Le seguenti opzioni sono disponibili in Appearance tab.
Wrapping Style - Specifica il modo in cui l'immagine galleggia nella pagina, ad esempio Nessuno, Sinistra o Destra.
Layout - In questa sezione è possibile impostare l'allineamento, lo spessore del bordo, i margini orizzontali e verticali.
Size- Expression Web imposta automaticamente le proprietà di larghezza e altezza per l'immagine in base alle dimensioni effettive dell'immagine. Invece di ridimensionare la tua immagine cambiando queste dimensioni, ridimensiona l'immagine usando il tuo editor grafico.
Step 7- Ora, vediamo l'anteprima della pagina web nel browser; visualizzerà il seguente output.
In questo capitolo impareremo come utilizzare i collegamenti ipertestuali nel tuo sito web. Una delle cose che rende il Web così espansivo è la capacità delle pagine Web di collegarsi ad altre pagine Web.Hyperlinks oppure i collegamenti si trovano in quasi tutte le pagine web.
I collegamenti ipertestuali consentono inoltre agli utenti di fare clic e di passare interamente a una pagina diversa, un punto all'interno di una pagina, un'immagine o un'altra posizione su Internet. Di seguito sono riportate alcune delle caratteristiche importanti del collegamento ipertestuale:
Gli strumenti e le opzioni per i collegamenti ipertestuali di Expression Web semplificano l'utilizzo dei collegamenti ipertestuali.
Le visualizzazioni di collegamenti ipertestuali e i report di Expression Web facilitano inoltre la ricerca e la correzione di collegamenti interrotti e non corretti.
Un collegamento ipertestuale può essere una parola, un gruppo di parole o un'immagine che, se cliccata, ti porterà in un nuovo documento o in una posizione all'interno del documento corrente.
Tag di ancoraggio
In HTML, <a>Il tag noto come tag di ancoraggio viene utilizzato per creare un collegamento a un altro documento. Un ancoraggio può puntare a un'altra pagina html, un'immagine, un documento di testo o un file pdf, tra gli altri. Ecco il codice di base di un'ancora<a> etichetta.
<a href = "url">Text to be displayed as link<a>In <a> tag, l'attributo "href" viene utilizzato per indirizzare il collegamento al documento e le parole tra l'apertura e la chiusura del tag di ancoraggio verranno visualizzate come collegamento ipertestuale.
Quando sposti il cursore su un collegamento in una pagina web, la freccia si trasformerà in una piccola mano.
Un URL è un indirizzo che specifica un protocollo, un server Web e un percorso di file.
Esistono due tipi di URL, absolute e relative. Unabsolute URL contiene un indirizzo completo mentre un file relative URLmanca una o più parti dell'indirizzo. Tuttavia, il browser Web ottiene le informazioni mancanti dalla pagina che contiene l'URL.
Esempio
Diamo un'occhiata a un semplice esempio in cui useremo entrambi absolute e relative URLs.
Step 1 - Per prima cosa, apri il file index.html pagina e aggiungi le seguenti righe nel file main content sezione.
<div id = "main-content">
<p> Absolute URL Example: </p>
<p> Google </p>
<p> Youtube </p>
<p> Relative URL Example: </p>
<p> Home Page 2 </p>
</div>Di seguito è riportata l'implementazione completa di index.html pagina.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<style type = "text/css">
#left-nav ul li a:hover {
color: #000000; background-color: #116611;
}
#left-nav ul li a:hover {
color: #000000; background-color: #66FF99;
}
</style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"> </div>
<div id = "top-nav">
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
<li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
<li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
</ul>
</div>
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
<li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
<li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
</ul>
</div>
<div id = "main-content">
<p> Absolute URL Example: </p>
<p> Google </p>
<p> Youtube </p>
<p> Relative URL Example: </p>
<p> Home Page 2 </p>
</div>
<div id = "footer"> </div>
</div>
</body>
</html>Step 2 - Salviamo la pagina web e vedrai il testo nella sezione del contenuto principale.
Step 3 - Nella visualizzazione struttura, fai clic con il pulsante destro del mouse su Google e quindi seleziona Collegamento ipertestuale ... dal menu che aprirà il file Insert Hyperlink dialogo.
Step 4- Nel campo Indirizzo, specificare l'URL della home page di Google e fare clic su OK. Allo stesso modo, fai clic con il pulsante destro del mouse su YouTube nella visualizzazione struttura e seleziona Collegamento ipertestuale ...
Step 5- Nel campo Indirizzo, specifica l'URL della home page di YouTube e fai clic su OK. Ora per il relativo tasto destro del mouse su "Home Page 2" e selezionare Collegamento ipertestuale ... dal menu che aprirà la finestra di dialogo Inserisci collegamento ipertestuale.
Step 6- Per il percorso relativo, selezionare index_2.html nel campo dell'indirizzo ed Expression Web otterrà il percorso rimanente dal file index.html, poiché entrambi questi file si trovano nella stessa directory. Fare clic su OK.
Come si può vedere, queste parole sono ora sottolineate, il che significa che vengono creati collegamenti ipertestuali.
Step 7- Il colore del carattere predefinito è blu e anche il colore del carattere predefinito per i collegamenti ipertestuali è blu. Per modificare il colore predefinito del collegamento ipertestuale, selezionare uno qualsiasi dei collegamenti ipertestuali e andare suFormat menu e selezionare Background… opzione di menu.
Ora vedrai la seguente finestra di dialogo.
Step 8 - Cambiamo il colore del collegamento ipertestuale in verde.
Nella schermata seguente, vedrai che il colore del collegamento ipertestuale è cambiato in verde.
Step 9 - Vediamo ora in anteprima questa pagina web in un browser.
Se fai clic sul link di Google, verrai indirizzato alla home page di Google.
Step 10- Allo stesso modo, se torni alla home page e fai clic sul collegamento YouTube, verrai indirizzato alla home page di YouTube. Torniamo alla home page.
Clicca il Home Page 2 e vedrai che apre il file index_2.hmtl file.
In questo capitolo impareremo come aggiungere video al sito Web e quali formati sono supportati in Expression Web. Con l'aiuto dei video, puoi facilmente attirare l'attenzione dei potenziali clienti sui prodotti o servizi della tua azienda.
Microsoft Expression Web è uno strumento di progettazione Web che semplifica il processo di aggiunta di video promozionali, di marketing o di formazione alle pagine Web. Puoi inserire facilmente i tuoi video nella visualizzazione Progettazione di Microsoft Expression.
Per impostazione predefinita, Expression Web supporta formati di codifica video come Silverlight, Adobe Flash, WMV, ASF, MWA, AVI, WVX e MPEG.
Esempio
Facciamo ora un esempio per comprendere il processo di aggiunta di un video in modo graduale.
Step 1 - Aggiungi un nuovo file HTML e chiamalo videodemo.html.
Step 2- Fare clic con il mouse nella posizione all'interno della pagina Web in cui deve essere inserito il video. Supponiamo di voler aggiungere un video sotto l'intestazione.
Step 3 - Vai al Insert menu → Mediache aprirà il sottomenu contenente l'elenco dei formati di lettore video supportati per impostazione predefinita da Expressions. SelezioniamoWindows Media Player.
Step 4- Individua il video che desideri utilizzare. Seleziona il nome del file video e fai clic sul pulsante Inserisci per inserirlo nella pagina web. Salva il file premendo Ctrl + S e vedrai la finestra di dialogo Salva file incorporati.
Step 5 - Fare clic su OK e vedrai che il file multimediale viene aggiunto alla cartella del sito web.
Di seguito è riportato il codice in videodemo.html page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<h1> Video Demo</h1>
<p>
<object id = "media1" height = "200" type = "video/x-ms-wmv" width = "200">
<param name = "filename" value = "logo.wmv" />
</object>
</p>
</body>
</html>Step 6- Vediamo ora in anteprima la pagina web in un browser. Vedrai che il video è in riproduzione.
Expression Web ha molti strumenti per lavorare con pagine HTML statiche, ma ha anche strumenti per creare pagine più dinamiche. Le pagine dinamiche spesso recuperano dati o contenuti da una fonte di dati. In questo capitolo impareremo come creare un'origine dati SQL da utilizzare nelle pagine dinamiche.
Esempio
Diamo un'occhiata a un semplice esempio in cui creiamo un elenco a discesa e riempiamo l'elenco recuperando i dati dal database utilizzando SQL DataSource.
Step 1 - Inizia creando un nuovo sito web vuoto.
Chiamiamolo SQLDataSource. Fare clic su OK.
Step 2- Vedrai che expression web ha creato una cartella per noi. Tuttavia, poiché abbiamo scelto di creare un progetto vuoto, non abbiamo ancora alcun file.
Expression Web non deve essere utilizzato solo per creare siti HTML statici; possiamo creare siti dinamici utilizzando pagine e controlli con molta facilità.
Step 3- Expression web ci consente anche di creare molti contenuti dinamici senza dover necessariamente essere uno sviluppatore. Quindi aggiungiamo un file ASPX dal fileFile → New Pageopzione di menu. Seleziona ASPX nel modello centrale e fai clic su OK.
Step 4 - Qui creeremo un controllo nel nostro modulo che deve accedere ai dati da un database per creare un sito web dinamico.
In questo caso particolare, creeremo un'origine dati SQL che recupererà i dati dal database.
Step 5 - Vai alla casella degli strumenti e trascina il file DropDownList e rilasciarlo all'interno del file <form>tag nella vista codice oppure puoi anche rilasciarlo nella sezione del modulo in vista struttura. Vedrai che il codice viene aggiunto da Expression Web.
Qui, vogliamo collegare alcuni dati dal nostro database e memorizzarli nel nostro elenco a discesa. Quindi, la prima cosa di cui abbiamo bisogno è il database.
Step 6 - Crea una nuova cartella nella cartella del tuo progetto andando al file New → Folder opzione di menu.
Step 7 - Chiama questa cartella App_Data.
Step 8 - Dobbiamo importare un database nel nostro progetto utilizzando il file File → Import → File… opzione di menu.
Step 9 - Si aprirà il file Importfinestra di dialogo, come mostrato di seguito. Fare clic sul pulsante Aggiungi file… che aprirà la finestra di dialogo Apri file.
Step 10 - Naviga nel database (*.mdf file) che si desidera includere nel sito Web e fare clic su Apri.
Step 11- Apri MyTestDatabase.mdf. Verrà visualizzata la seguente finestra di dialogo. Fare clic su OK.
Step 12- Ora puoi vedere che il file del database è stato aggiunto nella cartella App_Data. Quando si dispone di un controllo come un elenco a discesa ed Expression Web consente di associare i dati ad esso, verrà visualizzata una piccola freccia nell'angolo in alto a destra nella visualizzazione struttura.
Step 13- Questo è il menu contestuale corrente che può permetterci di svolgere un'attività molto specifica per quel particolare controllo e uno di questi è scegliere un'origine dati. Quindi facciamo clic suChoose Data Source… e questo aprirà la procedura guidata di configurazione dell'origine dati.
Step 14- Al momento non abbiamo un'origine dati. Selezioniamo l'opzione Nuova origine dati dal menu.
Qui importeremo un database SQL. Selezioniamo il database e facciamo clic su OK.
Step 15- Ora, dobbiamo specificare la stringa di connessione. Facciamo clic sul pulsante Nuova connessione.
Step 16 - Selezionare il file di database di Microsoft SQL Server e fare clic su OK.
Step 17 - Fare clic sul pulsante Sfoglia per individuare il file di database.
Step 18 - Selezionare il file di database e fare clic sul pulsante Apri o fare doppio clic sul file di database.
Step 19 - Per testare la connessione, fare clic sul pulsante Test connessione.
Verrà visualizzata la seguente schermata. Fare clic sul pulsante OK.
Step 20- Ora configureremo l'origine dati. Fare clic su Avanti nella schermata successiva.
Seleziona la casella di controllo e fai di nuovo clic su Avanti.
Step 21- Qui vedrai tutte le tabelle del tuo database. Selezioniamo il fileStudent tavolo.
Step 22- E vedrai tutte le colonne nella casella di riepilogo. SelezionareID e LastName. In fondo, puoi vedere che sta effettivamente creando una query. Puoi anche usare il fileWhere o ORDER BY clauses. Una volta terminata la query, fare clic su Avanti.
Step 23 - Fare clic su Test Querypulsante. Visualizzerà il filequery result come mostrato di seguito.
Step 24- Nella seguente finestra di dialogo, l'origine dati è selezionata per impostazione predefinita. "Selezionare un campo dati da visualizzare in DropDownList" è il campo che verrà effettivamente visualizzato. Selezioniamo LastName e selezioniamo l'ID da "Seleziona un campo dati per il valore di DropDownList" e fai clic su Ok.
Come puoi vedere nello screenshot seguente, DataSource viene aggiunto nella visualizzazione struttura.
Di seguito è riportato il codice completo nel file ASPX, creato da Expression Web.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language = "C#" %>
<html dir = "ltr" xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<form id = "form1" runat = "server">
<asp:DropDownList id = "listID" runat = "server" DataSourceID = "SqlDataSource1"
DataTextField = "LastName" DataValueField = "ID">
</asp:DropDownList>
<asp:SqlDataSource ID = "SqlDataSource1" runat = "server"
ConnectionString = "<%$ ConnectionStrings:MyTestDatabaseConnectionString %>"
SelectCommand = "SELECT [ID], [LastName] FROM [Student]">
</asp:SqlDataSource>
</form>
</body>
</html>Step 25 - Salviamo la pagina web premendo Ctrl + S.
Chiama questa pagina SQLDatasource.aspx e fai clic su Salva.
Step 26- Vediamo in anteprima questa pagina in un browser. Verrà visualizzato un elenco a discesa che contiene il cognome degli studenti del fileStudent tavolo.
In questo capitolo impareremo come creare una pagina Web da un documento Microsoft Word utilizzando Expression Web. Invece di creare pagine da zero, puoi anche utilizzare Microsoft Word per il contenuto Web e quindi portare quel contenuto nella tua pagina HTML.
Diamo un'occhiata a come ottenere risultati ottimali durante l'utilizzo del contenuto di Microsoft Word.
Crea una nuova pagina HTML e chiamala worddemo.html. Applica il modello web dinamico (* .dwt) a questa pagina HTML.
Ecco un esempio Worddocumento con alcuni stili applicati e una tabella. Per prima cosa, copia l'intero documento negli Appunti, quindi passa a Expression Web. Incolla il documento in una sezione del contenuto principale della pagina web.
Si noti che quando il contenuto viene incollato in Expression Web, viene visualizzata un'icona. Questo è indicato come ilpaste options button. Facendo clic su di esso, possiamo scegliere diversi modi in cui il contenuto viene incollato in Expression Web.
L'impostazione predefinita Match Destination Formatting significa che Expression Web utilizzerà qualsiasi formattazione già applicata nella pagina Web corrente.
Ad esempio, l'intestazione del documento in questo documento è stata disegnata utilizzando lo stile H1 in Microsoft Word. Una volta incollato nella pagina, Expression Web applicherà la formattazione allo stile Titolo uno in Expression Web.
Se selezioni il file Keep Source Formattingopzione, quindi Expression Web applicherà comunque lo stile H1 al testo. Tuttavia, in questo caso creerà una nuova classe CSS chiamata Style one che riformatta il testo in modo che assomigli a Word.
Se selezioniamo Remove Formatting, la pagina ha un aspetto molto simile a prima, ma se guardi la formattazione delle tabelle, vedrai che ora è solo testo normale.
Gli stili forniti in Expression Web sono ancora in vigore, ma tutti gli stili specifici del documento di Word sono ora scomparsi.
Il keep HTML only optionsi applica solo quando si copia il codice HTML. L'ultima opzione nel menu delle opzioni di incolla èKeep Text onlye questa è l'opzione che vuoi scegliere se vuoi davvero solo il testo da Word. Quando selezioni questa opzione, si aprirà la seguente finestra di dialogo Incolla testo.
Da qui possiamo scegliere esattamente come formattare il testo. La prima opzione rimuove tutte le interruzioni di riga di formattazione, i paragrafi, ecc. E lo sostituisce con un solo grande blocco di testo.
Puoi vedere che abbiamo perso la tabella nel documento e tutta la formattazione. Puoi giocare con le opzioni sul filePaste Textla finestra di dialogo. Selezioniamo l'opzioneMatch Destination Formatting.
Quando si visualizza l'anteprima di questa pagina Web in un browser, apparirà come la seguente schermata.
Il controllo GridView viene usato per visualizzare i valori di un'origine dati in una tabella. Ogni colonna rappresenta un campo, mentre ogni riga rappresenta un record. In questo capitolo impareremo un processo molto semplice per visualizzare i dati da un database su una pagina web in un GridView.
Step 1 - Creiamo una nuova pagina ASPX nel progetto SQLDataSource e chiamiamola gridview.aspx
Step 2- Nella casella degli strumenti, vedrai i controlli ASP.NET. Trascina il controllo GridView e rilascialo sulla sezione del modulo.
Puoi vedere che il menu di scelta rapida di GridView è aperto. Ora seleziona il file<New data source…>dall'elenco a discesa Scegli origine dati. Verrà visualizzata la Configurazione guidata origine dati.
Step 3- Selezionare il database poiché otterremo i dati dal database SQL e specificare l'ID dell'origine dati. Fare clic su OK.
Step 4- Selezionare la stringa di connessione esistente, che abbiamo creato nel capitolo SQL DataSource, poiché in questo capitolo utilizzeremo lo stesso database. Fare clic su Avanti.
Step 5 - Ai fini della comprensione, selezioniamo la tabella Studente e facciamo clic su * checkboxche recupererà tutte le colonne dalla tabella degli studenti. Fare clic su Avanti.
Step 6 - Nella seguente procedura guidata, puoi testare la query, quindi facciamo clic sul file Test Query pulsante.
Facendo clic Next, verrà visualizzata la seguente schermata:
La vista del design di gridview.aspx appare come segue -
Step 7- Vediamo in anteprima la pagina web in un browser. Apparirà come segue:
Questa è una semplice tabella senza alcuna formattazione.
Step 8 - È possibile formattare GridView da GridView Context menù.
Clicca il Auto Format…collegamento. Nella finestra di dialogo Formato automatico, ci sono molti schemi predefiniti. Seleziona uno schema secondo le tue esigenze e fai clic su OK.
Vediamo di nuovo l'anteprima della pagina web in un browser. Assomiglierà al seguente screenshot.
In questo capitolo impareremo le pagine master ASP.NET. Quando creiamo una pagina master, possiamo disporla, applicare stili e aggiungere controlli ASP.NET nello stesso modo delle altre pagine in Microsoft Expression Web. Il layout e il contenuto che creiamo in una pagina master vengono applicati alle pagine allegate alla pagina master. È un concetto simile aDynamic Web Template.
I modelli web dinamici ti consentono di applicare un aspetto comune a tutte le pagine del tuo sito web. Poiché i modelli Web dinamici vengono applicati nelle pagine a cui sono allegati in fase di progettazione, l'applicazione delle modifiche a tutte le pagine di un sito può causare un ritardo mentre l'HTML viene aggiornato in tutte le pagine.
Se il server esegue ASP.NET, le pagine master ASP.NET consentono funzionalità simili definendo le aree modificabili nel modello. Tuttavia, l'applicazione del modello al contenuto personalizzato nelle pagine viene eseguita dinamicamente in fase di esecuzione.
Esempio
Diamo un'occhiata a un semplice esempio in cui creeremo una pagina master utilizzando un modello CSS e utilizzeremo questa pagina master per creare altre pagine.
Step 1 - Apri il file index.html pagina in cui abbiamo definito diverse sezioni utilizzando il foglio di stile CSS.
Step 2 - Dal File menu, vai a New → Page e vedrai la finestra di dialogo Nuova pagina.
Step 3 - Dal riquadro di sinistra, selezionare ASP.NET e dall'elenco centrale, selezionare Pagina master e fare clic sul pulsante OK.
Step 4 - La schermata sopra produrrà un pop-up denominato Untitled1.master. Salva questa pagina e assegnagli un nomedefault.master.
Step 5- Vogliamo inserire il nostro design nella pagina master che verrà condivisa in tutto il nostro sito. Quindi copiamo il codice del contenuto che vorresti avere su ogni pagina dal codice index.html e incolliamo il codice nella pagina default.master.
Step 6- Ora abbiamo un layout che vorremmo utilizzare su ogni pagina del sito. Tuttavia, se dovessimo iniziare a creare le pagine di contenuto ora, non saremmo in grado di inserire effettivamente alcun contenuto in questo layout. Quindi, dobbiamo creareASPX contentpagine dalla pagina master. Per fare ciò, dobbiamo aggiungere il filecontent region così da poter aggiungere contenuto alle pagine specificate.
Nella visualizzazione struttura, fai clic con il pulsante destro del mouse nel punto in cui desideri inserire il contenuto nelle tue pagine. Supponiamo di voler aggiungere contenuto nella sezione del contenuto principale e quindi fare clic suManage Microsoft ASP.NET Content Regions…
Step 7 - Nella procedura guidata Gestisci aree di contenuto, inserisci il file Region Name e fare clic Close.
Step 8- Come si può vedere nello screenshot seguente, il Content PlaceHolder viene aggiunto nella sezione del contenuto principale. Ora dobbiamo aggiungere la pagina web ASPX.
Step 9 - Vai al menu File e seleziona New → Create from Master Page…
Step 10 - Vai alla pagina default.master e fai clic su OK.
Step 11 - Ora viene creata una nuova pagina ASPX e tutti gli stili di layout vengono applicati dalla pagina master.
Aggiungi del testo nella sezione principale.
Step 12 - Salva questa pagina e chiamala mypage.aspx e quindi visualizzarlo in anteprima in un browser.
In questo capitolo impareremo come aggiungere una tabella dati nella tua pagina web. Creiamo una nuova pagina HTML, ma qui vogliamo applicare anche il modello Web dinamico alla nostra pagina HTML.
Step 1 - Andiamo nel menu File e selezioniamo New → Create from Dynamic Web Template…
Si aprirà la seguente finestra di dialogo come mostrato nello screenshot seguente.
Step 2 - Seleziona il file master.dwt file e quindi fare clic sul pulsante Apri.
Step 3 - Salva la pagina web e chiamala datatable.html.
Step 4 - In Visualizzazione struttura, vai alla sezione del contenuto principale e rimuovi il testo.
Step 5 - Avanti, vai al Table → Insert Table… opzione di menu che aprirà la finestra di dialogo Inserisci tabella.
Seleziona il numero di righe e colonne. È inoltre possibile impostare diverse opzioni di layout come allineamento, spaziatura interna, dimensione e colore del bordo e colore di sfondo, ecc. Al termine, fare clic su OK.
Step 6 - La visualizzazione struttura di datatable.html apparirà ora come segue:
Ora, se guardi la vista codice della pagina, vedrai che il codice seguente viene aggiunto da Expression Web.
<table class = "auto-style2" style = "width: 100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>Step 7 - Nel pannello delle attività Gestisci stili, fai clic con il pulsante destro del mouse “.auto-style2”. Fai clic su Scegli classe di rinomina "auto-style2".
Step 8 - Nella finestra di dialogo Rinomina classe, immettere mytable nel New namecampo. Assicurati che Rinomina riferimenti di classe in questa pagina sia spuntato, quindi fai clic su OK.
Ora, dai un'occhiata alla tua pagina web in visualizzazione struttura. Apparirà come segue:
Step 9 - Per formattare questa tabella e applicarvi uno stile, vai al pannello delle attività Gestisci stili e fai clic su New Style…
Step 10- Nella finestra di dialogo Nuovo stile, impostare le impostazioni del bordo e quindi fare clic su OK. C'è un'altra opzione per formattare la tabella dei dati. Nella visualizzazione struttura, fare clic con il pulsante destro del mouse sulla tabella e selezionareModify → Table AutoFormat…
In questa finestra di dialogo vedrai i diversi formati e altre impostazioni. Selezioniamo il formato Professional e facciamo clic su OK.
Step 11 - Ora, la visualizzazione struttura della tua pagina web ha il seguente aspetto:
Aggiungiamo alcuni dati nella visualizzazione struttura.
Step 12- Salva la tua pagina web e visualizzala in anteprima in un browser. Apparirà come il seguente screenshot.
In questo capitolo impareremo come pubblicare un sito web. Microsoft Expression Web è uno strumento completo per lo sviluppo di siti Web. È possibile utilizzare Expression Web per creare pagine Web e siti che consentono di trasferire file tra il computer e l'account di hosting.
Step 1 - Diamo uno sguardo al sito che vogliamo pubblicare.
Nell'ultima versione di Expression Web, vengono aggiunte nuove funzionalità di pubblicazione come:
- La possibilità di escludere dalla pubblicazione intere cartelle anziché solo file.
- La possibilità di pubblicare facilmente la pagina corrente.
Step 2- Se desideri che un file o una cartella specifici non vengano pubblicati sul sito, fai clic con il pulsante destro del mouse su quella cartella o file ed escludilo dalla pubblicazione. Supponiamo di voler escludere il fileindex_2.html file.
Come mostrato nello screenshot qui sopra, fare clic su Exclude from Publishingpulsante. Allo stesso modo, puoi escludere anche altri file.
Step 3- Ora che hai finito di progettare il sito, dovrai pubblicarlo in modo che il mondo lo possa vedere. Expression Web supporta diversi scenari di pubblicazione diversi.
Per pubblicare il sito, prima dobbiamo assicurarci di aver salvato tutte le pagine. In caso contrario, una volta avviato il processo di pubblicazione, verrà ricevuto un avviso.
Ora andiamo al menu Strumenti.
Seleziona il Recalculate Hyperlinks…opzione. ClicYes nella schermata successiva.
Step 4 - Vai al Site menu e fare clic su Publishing opzione di menu.
Step 5 - Se è la prima volta che il sito viene pubblicato, riceveremo il messaggio Add a publishing destination, come mostrato nello screenshot seguente.
Step 6 - Fare clic sul messaggio e su quanto segue Connection Settingsapparirà la finestra di dialogo. Immettere tutte le informazioni richieste nella finestra di dialogo Impostazioni di connessione, quindi fare clic suAdd pulsante.
Verrà visualizzata la seguente finestra di dialogo. ClicYes.
Step 7 - Se l'impostazione di pubblicazione è già impostata, riceveremo il messaggio Connect to current publishing destination. Fare clic sul messaggio o utilizzare il fileConnect To pulsante sul Site View tab.
Step 8- Una volta avviato il processo di pubblicazione, è possibile vedere i file trasferiti. Al termine, riceveremo un messaggio che indica che il caricamento del file è terminato.
La prossima volta che pubblicheremo un sito, questo processo confronterà il sito del server con ciò che si trova sul computer. Se sul server remoto sono presenti file che abbiamo eliminato dal Web sul computer, potrebbe apparire una finestra di messaggio che chiede se vogliamo eliminarli. Se siamo sicuri che non siano più necessari, fai clic su OK.
In questo capitolo impareremo come copiare il sito su un computer locale utilizzando Expression Web. A differenza di Esplora risorse, in Expression Web non è presente il Cestino. Se cancelliamo inavvertitamente il sito Web o le pagine all'interno del sito, ci troveremo in una situazione di ripristino.
Step 1 - Per eseguire un backup del sito Web, apriamo il sito in Expression Web.
Step 2 - Vai al menu Strumenti e fai clic sull'opzione Ricalcola collegamenti ipertestuali….
Fare clic su Sì, come mostrato nello screenshot seguente.
Step 3 - Avanti, vai al Site menu e fare clic sul Publishing opzione di menu.
Step 4 - Se è la prima volta che pubblichiamo questo sito, riceveremo un messaggio Add a publishing destination, come mostrato nello screenshot seguente.
Step 5 - Fare clic sul messaggio e sul file Connection Settings apparirà la finestra di dialogo.
Nel Namecampo, inserisci il nome del sito. ScegliereFile System dal Connection Typemenu a discesa e quindi passare alla posizione in cui si desidera eseguire il backup del sito Web. Quindi fare clic suAdd pulsante.
Step 6- Se la cartella attualmente non esiste, ci verrà chiesto di crearla. Fare clic su "Sì" e il Web verrà creato.
Step 7 - Una volta connesso, fai clic sul menu a discesa "Visualizza" e seleziona Tutti i file.
Step 8 - Seleziona tutti i file sul lato sinistro.
Step 9 - Fare clic su right arrow Pulsante (→).
Una volta avviato il processo di pubblicazione, i file verranno visualizzati come trasferiti. Al termine, verrà visualizzato un messaggio che suggerisce che i file sono stati caricati.
In questo capitolo impareremo come installare i componenti aggiuntivi in Expression Web. Un Expression Web Add-in, è un pacchetto software esterno che fornisce funzionalità aggiuntive o avanzate all'interno di Expression Web.
I componenti aggiuntivi possono essere scaricati dalla seguente posizione https://msdn.microsoft.com/en-us/expression/jj873995. Ad esempio, scarichiamo il componente aggiuntivo AddFeed.
Step 1- Apriamo Expression Web e andiamo al menu Strumenti. Clicca ilAdd-Ins…opzione di menu.
Step 2- Se è la prima volta che viene installato un componente aggiuntivo, verrà visualizzato un elenco vuoto nella finestra di dialogo Gestisci componenti aggiuntivi. Facciamo clic sul fileInstall pulsante.
Step 3 - Seleziona il file AddFeeds.xadd file e fare clic su Open pulsante.
Step 4- Una volta installato, ti mostrerà la seguente schermata. Chiederà se vogliamo abilitare il componente aggiuntivo. Lo schermo fornirà tutte le informazioni sul particolare componente aggiuntivo da installare. Fare clic su Sì.
Step 5 - A seconda dei componenti aggiuntivi installati, saranno disponibili in un numero di posizioni.
Step 6 - Avanti, vai a Insertmenù. Vedrai il fileTwitter or RSS Feed opzione che viene ora aggiunta dopo l'installazione del componente aggiuntivo.
È possibile seguire gli stessi passaggi per installare più componenti aggiuntivi secondo i requisiti.