Microsoft Expression Web - Página da Web em branco

Como já criamos nosso site, agora precisaremos criar nossa Home Page. No capítulo anterior, criamos um site de uma página, e nossa página inicial foi criada naquela época automaticamente pelo Expression Web. Portanto, se você criou um site em branco, precisará criar uma página inicial para seu site.

O Microsoft Expression Web pode criar os seguintes tipos de páginas -

  • HTML
  • ASPX
  • ASP
  • PHP
  • CSS
  • Pagina principal
  • Modelo Dinâmico da Web
  • JavaScript
  • XML
  • Arquivo de texto

Neste capítulo, criaremos uma página HTML e sua folha de estilo correspondente.

Crie uma página em branco

Para criar uma página em branco, você pode simplesmente ir ao menu Arquivo e selecionar New → Page… opção de menu.

Na nova caixa de diálogo, você pode criar diferentes tipos de páginas em branco, como página HTML, página ASPX, página CSS, etc. e clique em OK.

Como você pode ver aqui, o código padrão já foi adicionado pelo 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>

Como você pode ver, sua página recém-criada tem o nome de arquivo Untitled_1.html ou Untitled_1.htm. Você precisará salvar a página pressionando Ctrl + S e especificar o nome.

Como nosso site já contém um index.htmlpágina, não precisamos de outra. No entanto, se você criou um site vazio, nomeie esta páginaindex.html.

Para ver sua web em um navegador, vamos ao menu Arquivo e selecione o Preview in Browser → Any browser, digamos que o Internet Explorer.

Crie uma página CSS

Vamos guiá-lo pelo processo passo a passo de criação de uma página CSS.

Step 1 - Para criar uma página CSS, vá ao menu Arquivo e selecione New → Page… opção de menu.

Step 2 - Selecione General → CSS e clique em OK.

Step 3 - Salve a página e digite um nome para a folha de estilo.

Step 4 - Clique no Save botão.

Step 5 - Agora, vamos para a página index.html.

Step 6 - no Manage Styles Panel, clique Attach Style Sheet.

Step 7 - Navegue até sua folha de estilo e selecione a página Atual em “Anexar a” e Link em “Anexar como” e clique em OK.

Step 8 - Agora, você verá que uma nova linha é adicionada automaticamente na página index.html.

<link href = "sample.css" rel = "stylesheet" type = "text/css" />

Step 9 - o bodyelemento define o corpo do documento. Para estilizar o<body>tag, precisamos criar um novo estilo. Primeiro, selecione a tag body na Visualização de design e clique em Novo estilo… no painel Aplicar estilos ou no painel Gerenciar estilos, que abrirá a caixa de diálogo Novo estilo.

Aqui, você pode definir as diferentes opções para o seu estilo. A primeira etapa é selecionar o corpo na lista suspensa Seletor e, em seguida, selecionar a folha de estilo Existente na lista suspensa “Definir em”.

Step 10 - No URL, selecione o sample.cssArquivo. No lado esquerdo, há uma lista de categorias como fonte, plano de fundo, etc. e atualmente a fonte está destacada. Defina as informações relacionadas à fonte de acordo com seus requisitos, conforme mostrado na captura de tela acima e clique em OK.

Step 11- Agora você pode ver na visualização do design que a cor de fundo e a fonte foram alteradas para o que selecionamos. Agora, se você abrir o arquivo sample.css, verá que todas as informações são armazenadas automaticamente no arquivo CSS.

Vamos visualizar nossa página da web em um navegador. Você observará que o estilo é aplicado a partir do arquivo CSS.