Microsoft Expression Web - Layout de página da web

Neste capítulo, abordaremos o layout básico de suas páginas da web. Antes de criar o layout da nossa página, precisamos pensar sobre o nosso conteúdo e, em seguida, projetar como queremos apresentar esse conteúdo, pois é o conteúdo que será visível no nosso site.

Cabe a nós como apresentamos nosso conteúdo para que nossos visitantes encontrem nosso site e depois fiquem para conferir. O layout provavelmente incluirá o logotipo ou banner da empresa na parte superior, o menu de navegação, uma área de conteúdo que pode incluir várias colunas e o rodapé na parte inferior da página.

Anteriormente, os desenvolvedores usavam tabelas para obter essa aparência. As tabelas criaram um grupo de caixas que foram usadas para criar linhas e colunas. Agora, os web designers usam<div>s para formar as caixas e CSS para colocar essas caixas na página.

tag <div>

A seguir estão alguns dos recursos da tag <div>.

  • A tag <div> define uma divisão ou seção em um documento HTML e facilita o gerenciamento, o estilo e a manipulação dessas divisões ou seções.

  • É usado para agrupar elementos de bloco para formatá-los com CSS.

  • Os navegadores geralmente colocam uma quebra de linha antes e depois do elemento div.

  • A tag <div> é um elemento de nível de bloco.

  • A tag <div> pode conter quase qualquer outro elemento.

  • A tag <div> não pode estar dentro de uma tag <p>.

Exemplo

Vamos dar uma olhada em um exemplo simples no qual usaremos tags <div> </div> para criar as várias caixas e regras de estilo.

Step 1 - Abra o Expression Web e depois o index.html página que criamos no capítulo anterior.

Step 2- Como visto na captura de tela acima, a Visualização de código é destacada por padrão. Você pode trabalhar emCode View ou Design View, mas você também pode ver a Visualização Dividida, que abrirá a Visualização de Código e a Visualização de Design. Então, vamos selecionar oSplit View opção.

Step 3 - o bodyelemento define o corpo do documento. Para definir o estilo da tag <body>, precisamos criar um novo estilo. Primeiro selecione a tag do corpo na Visualização de design e clique noNew Style…no painel Aplicar estilos, que abrirá a caixa de diálogo Novo estilo. Aqui, você pode definir as diferentes opções para o seu estilo.

Step 4 - O primeiro passo é selecionar o body de Selectorlista suspensa e, em seguida, selecione a folha de estilo existente em "Definir em" na lista suspensa. No URL, selecione o arquivo CSS que criamos no capítulo anterior.

No lado esquerdo, há um Categorylista como fonte, plano de fundo, etc. e a fonte atual é destacada. Defina as informações relacionadas à fonte de acordo com seus requisitos, conforme mostrado na captura de tela acima.

Step 5 - Selecione o Background colorvocê quer. Você também pode selecionar a imagem para o seu plano de fundo usando o botão do navegador. Quando terminar de definir o plano de fundo, defina suas bordas, se desejar.

Step 6 - Vamos selecionar o double lineopção para a borda e escolha a largura e cor também nas listas suspensas. Assim que terminar o estilo, clique em OK.

Step 7- Agora você pode ver na visualização do design que a cor de fundo é alterada para o que selecionamos. Se você abrir o arquivo sample.css, verá que todas as informações são armazenadas automaticamente no arquivo CSS.

Step 8 - Vá para o index.html página novamente e arraste o <div> no painel 'Caixa de ferramentas' e solte-o na página aberta.

Step 9 - Acima do code view, você verá <body> e <div> tags, clique no <div>e depois no painel Aplicar estilos, clique em Novo estilo…. que abrirá a caixa de diálogo Novo estilo.

Digite “#container” no campo Seletor. A marca de hash # é um seletor de ID. Na lista suspensa “Definir em”, selecione a folha de estilo Existente e marque a opção “Aplicar novo estilo à seleção de documento”. Vá para a categoria Plano de fundo.

Step 10 - Selecione a cor de fundo, vamos selecionar a cor branca e depois ir para a categoria Caixa.

Step 11 - Definir padding e margin e depois vá para o Position categoria

Step 12- Defina a largura para 90%. No entanto, não especifique a altura, pois aqui queremos que o contêiner se expanda quando entrarmos no conteúdo. Clique no botão OK.

Da mesma forma, vamos adicionar estilos para Cabeçalho, navegação superior, navegação esquerda, conteúdo principal e rodapé.

sample.css

A seguir está o código em sample.css folha de estilo depois de adicionar todos os estilos mencionados acima.

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

A seguir está o código no arquivo index.html após adicionar todas as tags <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>

Resultado

O layout de sua página na visualização do design terá a aparência mostrada na captura de tela a seguir.