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.