Apêndice A: Dicas e TruquesLarguras Variáveis da Página, Cantos Arredondados, Texto Redimendionáveis e mais
Larguras Variáveis de Página
O design discutido aqui é de página fluida. Ele irá ser redimensionado com a janela do navegador mantem uma margem de 10% do lado direito e do lado esquerdo. Mesmo que nós tenhamos configurado a largura das colunas em porcentagens, nós também podemos definir um valor fixo para a largura mudando o #width para um número absoluto. Fazendo layout desse modo significa mais flexibilidade. É possível mudar a largura da página editando apenas uma linha.
Um aspecto que deve se tomar cuidado quando está trabalhando com layout fluido são as imagens. Qualquer sentido você necessita expandir dentro, necessita sempre estar uma parcela da cor contínua que possa expandir. Uma parte pequena da imagem é cortada geralmente e repetida então.
Como você vê no exemplo acima, há uma área no meu que pode ser escalável. O CSS seria algo como isso:
background:url(../images/FluidImageSlicingMIDDLE.png) 0 0 repeat-x;
Compare com um cabeçalho que usa uma foto:
Não há área que pode ser repetida e assim esse tipo de cabeçalho não pode ser usado em layout fluido.
Isso se aplica em qualquer tipo de escala, vertical ou horizontal. Devendo ter uma fração da imagem que pode ser repetida.
Uma outra vantagem de ter as larguras de coluna baseadas porcentagem do uso do template é o uso de um método de definir a largura. Usando uma folha de estilo separada, é possível dinamicamente mudar a largura de uma página baseada na preferência do usuário. Você pode ver isso em ação no Compass Design.
Cantos Arredondados
Provavelmente o design mais comum no momento é aquele que usa cantos arredondados para os boxes dos módulos. O padrão atual é usar o “-3” no estilo do módulo para produzir 3 <div>‘s. Estes três e o principal <div> .module são usados para colocar 4 imagens redondas no box.
Você poderá ver em ação no http://www.joomla.org. Aqui estão as 4 imagens:
- http://www.joomla.org/templates/jw_joomla/images/jos_box_grey_bl.png
- http://www.joomla.org/templates/jw_joomla/images/jos_box_grey_br.png
- http://www.joomla.org/templates/jw_joomla/images/jos_box_grey_tl.png
- http://www.joomla.org/templates/jw_joomla/images/jos_box_grey_tr.png
E aqui está o código:
div.module-grey h3, div.moduletable-grey h3 {
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: bold;
color: #333;
margin: -2px -8px 0 -8px;
border-bottom: 1px solid #cdcdcd;
padding-left: 10px;
padding-bottom: 2px;
}
div.module-grey, div.moduletable-grey {
background: url(../images/jos_box_grey_tl.png) 0 0 no-repeat;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
div.module-grey div, div.moduletable-grey div {
background: url(../images/jos_box_grey_tr.png) 100% 0 no-repeat;
}
div.module-grey div div, div.moduletable-grey div div {
background: url(../images/jos_box_grey_bl.png) 0 100% no-repeat;
}
div.module-grey div div div, div.moduletable-grey div div div {
background: url(../images/jos_box_grey_br.png) 100% 100% no-repeat;
padding: 8px;
width: auto !important;
width: 100%;
}
div.module-grey ul, div.moduletable-grey ul {
margin: 10px 0;
padding-left: 20px;
}
Muitas técnicas existem para produzir borda arredondada. Many techniques exist to produce rounded corners. Um par de sites tem o sumário eles: css-discuss.incutio.com e Smiley Cat.
Boxes com larguras fixas usando 2 imagens
Pela primeira vez desenvolvida pelo Joomlashack, é possível diminuir pela metade o número de imagens usados em um box. Essa técnica irá criar boxes que podem ser escaláveis verticalmente mas não horizontalmente.
Dois tipos de imagens são usadas e são:
e
O CSS usado para produzir o efeito é:
.moduletable-box {
margin:0 0 10px 0;
padding:0 0 10px 0;
background:url(../images/bottom.png) bottom left no-repeat;
}
.moduletable-box h3 {
padding:8px 10px 6px 15px;
margin-bottom:8px;
text-align:left;
font:bold 1.1em Arial,Helvetica,sans-serif;
color:#fff;
background:url(../images/top.png) top left no-repeat;
}
Essa técnica é particularmente prática por algumas razões:
– A imagem da base do box pode ser reutilizada com diferentes cores
– O fundo de um H3 poderá ser escalável com o texto(a técnica do joomla.org não)
– Metade de tantas imagens é duas vezes mais rápido (aproximadamente) para carregar
É necessário setar o sufixo do módulo $style para “-2” para funcionar corretamente.
Boxes com largura e altura fluida usando 2 imagens
Mais uma técnica avançada foi desenvolvida pela Compass Design. setar o sufixo do módulo $style para “-3” para funcionar corretamente. De novo, cada <div> é usada para colocar os cantos de um box, contudo somente duas imagens são usadas. O sufixo -box da classe do módulo deve ser usada.
e
.module-box {
background: url(../images/boxright.png) top right no-repeat;
padding:0;
margin:0 0 10px 0;
}
.module-box h3 {
margin:0;
padding:0 0 4px 0;
border-bottom:#ccc 1px solid;
color: #666;
font: bold 1em Tahoma, Arial, Helvetica, sans-serif;
text-align:center;
}
.module-box div {
background: url(../images/boxleft.png) top left no-repeat;
margin:0;
padding:6px 0 0 0;
}
.module-box div div{
background: url(../images/boxleft.png) bottom left no-repeat;
padding:0 0 0 5px;
}
.module-box div div div{
background: url(../images/boxright.png) bottom right no-repeat;
padding:0 5px 5px 0;
height:auto !important;
height:1%;
}
Esta técnica irá tornar escalável vertical e horizontalmente.
Quase todas as técnicas desses dois site dá pra trabalhar em cima. Particularmente interessante o box flexível do 456bereastreet’s que pode ser customizados as bordas e os cantos. Ele somente usa uma imagem ficando fácil assim mudar as cores. A implementação dessa técnica deixamos como exercício para o leitor!
Texto Redimendionáveis
Muitos estão incorporando nos design do site a opção de modificar o tamanho dos textos possibilitando maior acessibilidade. De modo geral para melhor consistência entre os navegadores, você precisa fazer algumas poucas coisas para que possa colocar um botão para redimensionar o tamanho das letras:
1. na tag body, define um tamanho de fonte de 76%
body { font-size:76%; }
2. Define-se todas as fontes em “em”. Esse é uma unidade relativa, por exemplo:
p { font-size:1em; }
3. Fazer todos os containers dinâmicos. Um exemplo que não está funcionando é o www.joomla.org. Se você fazer ele ficar maior, o container para o menu horizontal não aumenta. Se você usa FF você pode usar as teclas (ctrl+ in FF) para aumentar a fonte. Nesse caso o layout irá quebrar. Você pode não fixar nenhum tamanho para altura dos containers e poderá ver isso funcionando em www.joomlashack.com.
4. Abaixe o selecionador de tamanho de fonte em (http://forum.joomla.org/Themes/joomla/md_stylechanger.js)
5. Coloque o arquivo em algum lugar na pasta template que você está usando
6. Coloque as imagens A+, A-, e Reset na pasta imagens do seu template
7. Cole o código seguinte no seu arquivo index.php do seu template
<script type=”text/javascript” language=”javascript” xsrc=”<?php echo $mosConfig_live_site;?> /templates/<?php echo $mainframe->getTemplate(); ?>/____1____”>
</script>
<a xhref=”index.php” title=”Increase size” onclick=”changeFontSize(1);return false;”>
<img xsrc=”<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____2____” alt=”” border=”0″ />
</a>
<a xhref=”index.php” title=”Decrease size” onclick=”changeFontSize(-1);return false;”>
<img xsrc=”<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____3____” alt=”” border=”0″ />
</a>
<a xhref=”index.php” title=”Revert styles to default” onclick=”revertStyles(); return false;”>
<img xsrc=”<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____4____” alt=”” border=”0″ />
</a>
8. Faça tudo a seguir:
– Substitua ____1____ pela posição do arquivo .js foi salvado relativo ao template
– Substitua ____2____ pelo nome de sua imagem A+
– Substitua ____3____ pelo nome de sua imagem A-
– Substitua ____4____ pelo nome de sua imagem Reset
Obrigado para r0tt3n and his FAQ do forums do Joomla por essa técnica
Menus Drop Down
Por várias razões, SEO e de acessibilidade somam-se, o autor é inclinado ser contra ao flash e ao Javascript. Melhorar enfatizar que código válido de W3C e páginas cruas, nenhuma deles é ajudada com essas aproximações. Como então iremso reproduzer esses efeitos como um menu drop down.
Bem, há um número de técnicas que você pode se usar com CSS para ter menus maisvisualmente atrativos, todo usa listas desordenada (listas) para criar o menu. Vamos olhar um, um menu drop down.O menu se chama “suckerfish”, é CSS puro, muito limpo tem apenas 12 linhas do Javascript para o IE.
Você pode ver demo aqui:
www.htmldog.com/articles/suckerfish/dropdowns/example/
Você pode encontrar manuais de como a coisa trabalha em alguns sites como:
www.htmldog.com/articles/suckerfish/dropdowns/
www.alistapart.com/articles/dropdowns/
Agora, você pôde ter observado que você a saida do menu é uma lista limpa. Isto acontece pois há um módulo que trata disso fora. Seu nome é extended_menu, você pode encontrá-lo aqui:
de.siteof.de/extended-menu.html
[nota do tradutor: Ou no extensions.joomla.org]
É o mais fácil se você lhe der um sufixo do menu e da classe do módulo. Eu usei o “mainnav” para ambos (você verá no CSS abaixo). Um par de outros ajustes que você necessitará:
– Estilo do menu: list
– Expandir o menu: Sim
.moduletablemainnav{
position:relative;
z-index:100;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
#mainlevelmainnav,#mainlevelmainnav ul{
float:left;
list-style:none;
line-height:1em;
background:transparent;
font-weight:700;
margin:0;
padding:0;
}
#mainlevelmainnav a{
display:block;
color:#f90;
text-decoration:none;
margin-right:15px;
padding:0.3em;
}
#mainlevelmainnav li{
float:left;
padding:0;
}
#mainlevelmainnav li ul{
position:absolute;
left:-999em;
height:auto;
width:11em;
font-weight:400;
background:#36f;
border:#00C 1px solid;
margin:0;
}
#mainlevelmainnav li li{
width:11em;
}
#mainlevelmainnav li ul a{
width:11em;
color:#fff;
font-size:0.9em;
line-height:1em;
font-weight:400;
}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul, #mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
left:-999em;
}
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul, #mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul, #mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul{
left:auto;
z-index:6000;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{
background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
}
Agora, apenas tenha certeza que você configurou corretamente os z-index, lembrando também que para ter um z-index, os elementos precisam algum tipo de ordenação, se não absoluto então relativo.
Por último mas não menos importante, você precisa adicionar um Javascript no cabeçalho do template index.php (ou um arquivo js) para que o IE interprete o :hover corretamente.
<script type=”text/javascript”><!–//–><![CDATA[//><!– sfHover = function() { var sfEls = document.getElementById(“mainlevelmainnav”).getElementsByTagName(“LI”); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=” sfhover”; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(” sfhover\\b”), “”); } } } if (window.attachEvent) window.attachEvent(“onload”, sfHover); //–><!]]></script>
Esta técnica está sendo discutidas nos fóruns do Joomla.
The author, Barrie North creates Joomla Templates and Tutorials at www.compassdesigns.net. This work is licensed under a Creative Commons Attribution NonCommercial ShareAlike 2.5 License.
This attributation must be reproduced in full.
isso funciona no blogger (blogspot)?