Microsoft Expression Web - Pagina Web vuota

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.