O objetivo deste tutorial é mostrar a facilidade que o fireworks nos trás para desenvolver interfaces web e demonstrar também que CSS não é nenhum bixo de 7 cabeças!
PASSO 1
Primeiro vamos estudar o layout e definir quais serão as regiões principais para estruturar o html.
PASSO 2
Para criar o html, abra seu editor de texto preferido (notepad, dreamweaver, textmate, etc) Aqui usamos o Smultron. O que temos que fazer então é criar as áreas seguindo nossas regiões do layout:
O HEADER
<![CDATA[<div id="header">
<div class="wrapp"><img src="images/logo.jpg"/></div>
</div>]]>
O CONTENT
Aqui nós usamos 2 div's para o conteúdo central por estarmos usando as sombras nas laterais.
<![CDATA[<div id="content">
<div id="main">
</div>
</div>]]>
O MENU
<![CDATA[<div id="content">
<div id="main">]]>
<![CDATA[<div id="menu">
<!-- *** Principal Navigation *** -->
<ul class="nav_left">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#" class="last">Contact</a></li>
</ul>
<!-- *** Links right side *** -->
<ul class="nav_right">
<li><a href="#">Login</a></li>
</ul>
</div>
]]><![CDATA[
</div>
</div>]]>
APOIO ABAIXO DO MENU
<![CDATA[<div id="content">
<div id="main">
<div id="menu">
<!-- *** Principal Navigation *** -->
<ul class="nav_left">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#" class="last">Contact</a></li>
</ul>
<!-- *** Links right side *** -->
<ul class="nav_right">
<li><a href="#">Login</a></li>
</ul>
</div>
]]>
<![CDATA[<div id="sub_nav">
<span class="tip">Zee is a small studio located in Brazil.</span>
<span class="links"><a href="#">Register</a> |
<a href="#">Request Password</a></span>
</div>
]]>
<![CDATA[</div>
</div>]]>
O CÓDIGO COMPLETO
<![CDATA[
<body>
<div id="header">
<div class="wrapp"><img src="images/logo.jpg"/></div>
</div>
<div id="content">
<div id="main">
<div id="menu">
<!-- *** Principal Navigation *** -->
<ul class="nav_left">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#" class="last">Contact</a></li>
</ul>
<!-- *** Links right side *** -->
<ul class="nav_right">
<li><a href="#">Login</a></li>
</ul>
</div>
<div id="sub_nav">
<span class="tip">Zee is a small studio located in Brazil.</span>
<span class="links"><a href="#">Register</a> |
<a href="#">Request Password</a></span>
</div>
<!-- *** Round corners for the content *** -->
<div class="center1">
<div class="center2">
<!-- *** Round corners each item *** -->
<div class="item1">
<div class="item2">
<div class="content-item">
<h1>Donec porttitor ligula eu dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque,
id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat.
Sed quis velit. Nulla facilisi. Nulla libero.
Vivamus pharetra posuere sapien. Nam
consectetuer. Sed aliquam, nunc eget
euismod ullamcorper, lectus nunc ullamcorper
orci, fermentum bibendum enim nibh eget ipsum.
Donec porttitor ligula eu dolor.</p>
</div>
</div>
</div>
<!-- *** Round corners each item *** -->
<div class="item1">
<div class="item2">
<div class="content-item">
<h1>Donec porttitor ligula eu dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque,
id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat.
Sed quis velit. Nulla facilisi. Nulla libero.
Vivamus pharetra posuere sapien. Nam
consectetuer. Sed aliquam, nunc eget
euismod ullamcorper, lectus nunc ullamcorper
orci, fermentum bibendum enim nibh eget ipsum.
Donec porttitor ligula eu dolor.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
]]>
Salve este arquivo como menu.html.
PASSO 3
Agora que temos o código pronto, vamos abrir nosso arquivo .png e exportar as imagens que serão usadas em nosso CSS. Para isso vamos usar a ferramenta Slices e criar todos os slices necessários de acordo com as imagens:
PASSO 4
Salve todas as imagens em uma pasta images, direto na raiz onde se econtra o arquivo menu.html.
PASSO 5
Com todas as imagens na mão e o código pronto, vamos agora começar nosso CSS. Aqui eu uso o CSSEdit para trabalhar, mas você pode usar seu editor de preferência. Para iniciar cole o seguinte código no "HEAD" do menu.html:
<![CDATA[<link rel="stylesheet" type="text/css" href="style.css"/>]]>
PASSO 6
Usamos aqui tb um arquivo para resetar todas as configurações padrão das tags, o que nos facilita para manipular os objetos no layout. Baixe o arquivo "reset.css" (está no zip em anexo no final do tutorial com todo o site) e deixe na raiz junto com o arquivo menu.html. Abra um documento novo de css e salve como nome de style.css. No top do documento, vamos importar o reset.css com o seguinte código:
<![CDATA[@import url("reset.css");]]>
PASSO 7
Começamos então criando o estilo de nossos ID's principais. Veja como tinhamos falado que no #content e no #main é onde apilcamos as sombras laterais.
<![CDATA[
body {
font-family: Arial, Helvetica, Geneva, sans-serif;
color: #000;
background: #595D67;
}
#header {
height: 100px;
background: url(images/bg_header.jpg) left top repeat-x;
position: relative;
}
#content {
width: 844px;
position: relative;
margin: 0 auto;
background: url(images/bg_shadow_left.jpg) left top repeat-y #434752;
}
#main {
background: url(images/bg_shadow_right.jpg) right top repeat-y ;
padding-bottom: 30px;
}
#menu {
height: 30px;
background: url(images/bg_menu.jpg) left top repeat-x;
margin: 0 7px;
}
.wrapp {
width: 844px;
position: relative;
margin: 0 auto;
}
#footer {
height: 100px;
background: url(images/bg_footer.jpg) left top repeat-x;
position: relative;
}
]]>
Repare também que a largura do #content é de 844px, pois são os 700px do corpo mais 7px de sombra para cada lado. Uma dica que é legal de salientar aqui é como centralizamos este conteúdo principal. São 3 os atributos que utilizamos para ele ficar sempre no centro do browser: width, position e margin. Veja:
<![CDATA[
#content {
width: 844px;
position: relative;
margin: 0 auto;
background: url(images/bg_shadow_left.jpg) left top repeat-y #434752;
}
]]>
PASSO 8
Agora vamos ao nosso menu. Reveja o código que utilizamos para ele. O "ul" é onde colocamos todos nossos links. Note que utilizamos um class="nav_right" no segundo "ul", pois vamos posicionar este no lado direito do menu, é o que usamos aqui como nosso link de Login.
<![CDATA[<div id="menu">
<!-- *** Principal Navigation *** -->
<ul class="nav_left">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#" class="last">Contact</a></li>
</ul>
<!-- *** Links right side *** -->
<ul class="nav_right">
<li><a href="#">Login</a></li>
</ul>
</div>
]]>
Vamos entao posicionar nossos "ul" e colocar as imagens das extemidades do menu:
<![CDATA[
#menu ul.nav_left {
padding-left: 30px;
height: 30px;
background: url(images/bg_leftMenu.jpg) left top no-repeat; /** img da esquerda **/
}
#menu ul.nav_right{
position: absolute; /** para pode posicionar ele do lado direito do menu **/
right: 7px;
top: 0;
padding-right: 30px;
height: 30px;
background: url(images/bg_rightMenu.jpg) right top no-repeat; /** img da direita **/
}
]]>
Quase finalizando então vamos colocar o estilo dos nossos links e ver como eles irão se comportar:
<![CDATA[
#menu ul li {
float: left; /** precisamos deste float para funcionar no IE **/
background: url(images/divider_menu.jpg) left top no-repeat;
}
#menu ul li a.last { /** usamos aqui um class para colocar o divisor no ultimo link **/
background: url(images/divider_menu.jpg) right top no-repeat;
}
#menu ul li a,
#menu ul li a:link,
#menu ul li a:active,
#menu ul li a:visited{
display: block;
float: left;
height: 30px;
padding: 0 18px;
text-decoration: none;
color: #FFF;
font: .96em/28px "Lucida Grande", Lucida, Verdana, sans-serif;
}
#menu ul li a:hover {
background: url(images/bg_menu_active.jpg) left top repeat-x;
}
]]>
PASSO 9
Aqui mostramos só como irá ficar o estilo para o texto e links de apoio abaixo do menu. É aqui que aplicamos a sombra de baixo do menu também.
<![CDATA[
#sub_nav {
height: 50px;
background: url(images/bg_shadow_subNav.jpg) left top no-repeat;
margin: 0 7px;
line-height: 50px;
position: relative;
font-size: .8em;
color: #CCC;
}
#sub_nav span.tip {
left: 30px;
position: absolute;
}
#sub_nav span.links {
right: 30px;
position: absolute;
color: #F90;
}
#sub_nav span.links a,
#sub_nav span.links a:link,
#sub_nav span.links a:active,
#sub_nav span.links a:visited {
text-decoration: none;
color: #F90;
}
#sub_nav span.links a:hover {
text-decoration: underline;
}
]]>
PASSO 10
Você precisa agora fazer os boxes de texto de baixo para finalizar o layout. Não vamos entrar em detalhes sobre esta etapa pois não é o objetivo principal deste tutorial, mas vamos falar melhor sobre round corners e boxes de texto em outro artigo. Mas se baixar os arquivos finais e analisar verá que o processo é bem simples.
RESULTADO FINAL
Para ver então como deverá ficar seu layout, totalmente tabless e cross-browser, veja aqui o resultado final.