Olá pessoal!
Mais uma coluna com dúvidas dos emails: como fazer
um HTM abrir numa camada e como modificar o status dos links
no sentido de sublinhado. Então, vamos à matéria!
iFrames
Bom, iFrames são uma espécie
de camada onde será carregado um HTM, um txt etc. Para
isso, usaremos um código fonte para criar este iframe
com dados de margem, bordas, tamanho vertical/horizontal,
scroller etc.
Veja aqui
dois exemplos de iframe. Um puxa um arquivo htm e outro
um arquivo txt.
Para fazer inclusões como no exemplo, basta adicionar
ao código fonte esta TAG:
Nos valores de Margem você poderá
definir os valores que deseja (em nosso exemplo, todas as
margens foram definidar com valor "5").
Em SRC, você
deverá indicar o caminho e o nome do arquivo a ser
carregado.
Em Frameborder, você definirá
a espessura da borda.
Em Width/heightvocê fornecerá
os valores do tamanho horizontal e vertical respectivamente.
Em Scrolling, você poderá
definir como Yes ou No de acordo com suas necessidades.
É muito simples fazer estes iframes, recurso tal que
é muito interessante em sites com um tamanho definido
e que não podem ter seu tamanho alterado pelo tamanho
do texto. É um recurso que merece uma atenção
especial. Não é um frame mas tem as mesmas propriedades
de um. Vale a pena dar uma estudada!
CSS em links
Outro recurso muito grande para customizar
a aparência de um site. Coisas que só uma folha
de estilo pode fazer!
Este estilo consiste em tirar aquele sublinhado dos
links, fazendo-o aparecer somente no evento OnMouseOver.
Este é o estilo:
Coloque depois da TAG
e antes
da TAG
</p>
<p class="texto">Veja <a href="javascript:;" onClick="MM_openBrWindow('/web/colunistas/dreamweaver/21/exemplo_css.htm','css','width=480,height=150')">aqui</a>
um exemplo prático.</p>
<p class="texto">Bom, por hoje é só. Até
a próxima semana, e use estes recursos, darão
um novo requinte e funcionalidade ao site!</p>
<hr align="left" width="300" size="1" noshade>
<p class="texto"><font color="#669900">Extensões da semana</font><br />
<br />
Faça download das 96 extensões disponibilizadas
na última semana!<br />
<br />
<a href="http://conteudo.imasters.com.br/361/ext.zip">96 Extensões.zip</a>
<p class="texto"> Se quiserem, podem fazer pedidos para as extensões
também.
<p class="texto">Um grande Abraço à todos e até
a próxima semana.
</div>
<div id="painelInteracao">
<h2 class="tituloInformacao">Interação</h2>
<ul>
<li><a href="#comments"><strong>Comentários</strong></a></li>
<li><a href="/artigo/361/css/iframes_css_em_links/imprimir/">Imprimir</a></li>
<li><a href="#blocoIndique" onclick="$('#blocoIndique').slideDown('fast'); $('#nomeDe').focus(); return false;">Indicar</a></li>
<li><a href="http://delicious.com/save?url=http://imasters.uol.com.br/artigo/361/css/iframes_css_em_links/">Delicious</a></li>
<li><a href="http://twitter.com/home?status=iFrames+-+CSS+em+links+http://imasters.uol.com.br/artigo/361">Twitter</a></li>
</ul>
</div>
<div class="banner">
<script type="text/javascript"><!--
google_ad_client = "pub-5061030065646759";
/* 468x60, criado 10/09/09 */
google_ad_slot = "2265721737";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script> </div>
<div id="comentarios">
<h2 class="tituloInformacao" id="comments">
1 comentário </h2>
<div id="listaDeComentarios">
<div class="comentario" id="comment-7139">
<div class="informacoesComentario">
<img src="http://static.imasters.uol.com.br/img/imgbase/0.jpg" alt=" " />
<strong>
Hugo Rocco
</strong><br />
<span class="data">01/02/2006 22h25</span>
</div>
<div class="mensagem">
<h3>Iframe dinamico</h3>
<p>Gostaria de saber e se eu tiver um site dinamico como esse aqui do imaster que neim sempre o iframe vai ter o mesmo tamanho, como faço para resolver?</p>
</div>
<div class="acoes">
<a href="/artigo/361/css/iframes_-_css_em_links/#reply-7139" class="responder" rel="7139">Responder</a>
</div>
<div class="espacoResposta" id="reply-7139">
</div>
</div>
</div>
<div id="blocoComentario">
<div class="formComentario">
<form id="formComentario" action="http://imasters.uol.com.br/artigo/361/css/iframes_css_em_links/" method="post">
<div class="titulo">
<a href="#" class="cancelarResposta" title="Cancelar resposta">Cancelar resposta</a>
<h3>Qual a sua opinião?</h3>
<p class="avisoLogin">Faça login abaixo ou <a href="http://imasters.uol.com.br/cadastro/" class="cadastrar">cadastre-se</a> rapidamente.</p>
<div class="login">
<div>
<label for="strEmailComentario">E-mail:</label>
<input type="text" name="strEmailComentario" />
</div>
<div>
<label for="strSenhaComentario">Senha:</label>
<input type="password" name="strSenhaComentario" />
</div>
<div class="status"></div>
</div>
</div>
<div class="campos">
<label for="titulo" class="oculto">Título</label>
<input type="text" name="titulo" class="strTitulo" /><br />
<label for="comentario" class="oculto">Comentário:</label>
<textarea name="comentario" class="strComentario"></textarea>
<input type="hidden" name="codConteudo" value="361" />
<input type="hidden" name="indStatusLogin" value="0" />
<input type="hidden" name="codComentarioAnterior" value="" />
<label><input type="checkbox" id="acompanhe" value="1" name="acompanhe" /> Receber notificações para novos comentários</label>
<button type="submit" class="submit">Enviar comentário</button>
</div>
</form>
</div>
</div>
</div> </div>
<div id="colunaLateral">
<div class="patrocinio">
</div>
<div class="bloco">
<div class="titulo"><strong>Sobre o Autor</strong></div>
<div id="sobreOAutor">
<img src="http://static.imasters.uol.com.br/img/bd/34.jpg" alt="" />
<div>
<b>Raphael Simas</b> é Diretor de Arte da produtora Café Azul Mídia Digital e utiliza o Macromedia Fireworks como principal ferramenta para a criação para web.
</div>
<div class="email">
<a href="mailto:%72%61%70%68%61%65%6c@%63%61%66%65%61%7a%75%6c.%63%6f%6d.%62%72" >raphael@cafeazul.com.br</a>
</div>
</div>
<div id="outrosArtigos">
<strong>Outros artigos do mesmo autor:</strong>
<ul>
<li><a href="http://imasters.uol.com.br/artigo/3635/fireworks/criando_texturas_de_sujeira/" title="Criando texturas de sujeira">Criando texturas de sujeira</a></li>
<li><a href="http://imasters.uol.com.br/artigo/3579/fireworks/regulagem_de_cor_parte_02/" title="Regulagem de cor - Parte 02">Regulagem de cor - Parte 02</a></li>
<li><a href="http://imasters.uol.com.br/artigo/3493/fireworks/regulagem_de_cor_e_fireworks_8/" title="Regulagem de cor e Fireworks 8">Regulagem de cor e Fireworks 8</a></li>
<li><a href="http://imasters.uol.com.br/artigo/3459/fireworks/fatiamento_conceitos_e_exportacao/" title="Fatiamento, conceitos e exportação">Fatiamento, conceitos e exportação</a></li>
</ul>
<input type="hidden" id="codConteudo" value="361" />
<a href="#" class="verMais" rel="3242">Ver mais artigos de Raphael Simas</a>
</div>
</div>
<div class="bloco">
<div class="titulo"><a href="#" onclick="$(this).parent().next().slideToggle('fast'); return false;"><strong>Indique para um amigo</strong></a></div>
<div class="conteudo" style="display: none;" id="blocoIndique">
<div id="indique">
<form action="/artigo/361/css/iframes_css_em_links/" method="post" id="formIndique">
<div>
<input type="hidden" name="url" id="url" value="http://imasters.uol.com.br/artigo/361/css/iframes_-_css_em_links/" />
<div class="campo">
<label for="nomeDe">Seu nome:</label>
<input type="text" name="nomeDe" id="nomeDe" />
</div>
<div class="divisao">
<strong>Informações do Destinatário:</strong>
</div>
<div class="campo">
<label for="nomePara">Nome:</label>
<input type="text" name="nomePara" id="nomePara" />
</div>
<div class="campo">
<label for="emailPara">E-mail:</label>
<input type="text" name="emailPara" id="emailPara" />
</div>
<div class="campo">
<label for="captcha">Código:</label>
<input type="text" name="captcha" id="captcha" class="captcha" />
<img class="captcha" src="http://imasters.uol.com.br/inc/scripts/captcha.php" alt="captcha" />
</div>
<div class="campo">
<label for="textoPara">Mensagem:</label>
<textarea name="textoPara" id="textoPara"></textarea>
</div>
<div class="submit">
<button type="submit" id="btnIndique">Indicar</button>
</div>
</div>
</form>
</div> </div>
</div>
<div id="arroba">
<a href="http://www.treinaweb.com.br"><img src="http://static.imasters.com.br/anuncio/treinaweb/banner300x250.gif" alt="3G" width="300" height="250" border="0" /></a>
</div>
<div class="bloco">
<div class="titulo"><a href="http://www.superdownloads.com.br/"><img src="http://static.imasters.uol.com.br/imasters/img/apoio/superDownloads.png" alt="Superdownloads" /></a></div>
<div class="listaItens conteudo">
<div class="item">
<a href="http://superdownloads.uol.com.br/download/154/nvu/">
<img src="http://superdownloads.uol.com.br/imagens/screenshots/8/8/88736,3.jpg" alt=" " /> <span><strong>Nvu 1.0</strong> - Editor opensource elaborado para competir com Dreamweaver e FrontPage. Possui ferramentas como Edição de CSS, FTP e muito mais</span>
</a>
</div>
<div class="item">
<a href="http://superdownloads.uol.com.br/download/76/nvu-mac/">
<img src="http://superdownloads.uol.com.br/imagens/screenshots/4/6/46953,3.jpg" alt=" " /> <span><strong>Nvu 1.0</strong> - Editor opensource elaborado para competir com Dreamweaver e FrontPage. Possui ferramentas como Edição de CSS, FTP e muito mais</span>
</a>
</div>
<div class="item">
<a href="http://superdownloads.uol.com.br/download/137/topstyle-pro/">
<img src="http://superdownloads.uol.com.br/imagens/screenshots/7/8/78327,3.jpg" alt=" " /> <span><strong>TopStyle Pro 4.0.0.64</strong> - Dê personalidade ao seu site com este ótimo editor de CSS, o resultado pode ser vizualizado na hora</span>
</a>
</div>
<div class="item">
<a href="http://superdownloads.uol.com.br/download/144/css-compressor/">
<img src="http://superdownloads.uol.com.br/imagens/screenshots/6/3/63038,3.jpg" alt=" " /> <span><strong>CSS Compressor </strong> - Comprima os arquivos CSS que estão nas páginas do seu site para obter melhor desempenho no carregamento e na navagação do site</span>
</a>
</div>
<div class="item">
<a href="http://superdownloads.uol.com.br/download/156/csscreator-page-layout-generator/">
<img src="http://superdownloads.uol.com.br/imagens/screenshots/2/4/24336,3.jpg" alt=" " /> <span><strong>CSSCreator Page Layout Generator 2</strong> - Crie seu layout online facilmente. Para desevolver basta inserir as especificações, escolher a disposição de...</span>
</a>
</div>
</div>
</div>
<div style="margin: 20px 0; overflow: hidden;">
<script>
var adW = 300;var adH = 250;var pos = 5;var DEaff="meimaster"; var keyword = "uolhost";
var DEt=new Date(); DEt=DEt.getTime(); DErand=Math.floor(DEt*1000*Math.random());var scw=0,sch=0; if(screen.height){scw=screen.width;sch=screen.height;}var DEconn=document.body; DEconn.style.behavior='url(#default#clientCaps)'; DEconn=(DEconn.connectionType=='lan')?1:0;
document.write('<IFRAME WIDTH='+adW+' HEIGHT='+adH+' MARGINWIDTH=0 MARGINHEIGHT=0 FRAMEBORDER=0 SCROLLING=no SRC="http://bne.uol.com.br/html.ng/site=mebr&affiliate='+DEaff+'&size='+adW+'x'+adH+'&page='+pos+'&conntype='+DEconn+'&expble=0&reso='+scw+'x'+sch+'&keyword='+keyword+'&tile='+DErand+'?">');
document.write('<SCR'+'IPT LANGUAGE="JavaScript1.1" SRC="http://bne.uol.com.br/js.ng/Params.richmedia=yes&site=mebr&affiliate='+DEaff+'&size='+adW+'x'+adH+'&page='+pos+'&conntype='+DEconn+'&expble=0&reso='+scw+'x'+sch+'&keyword='+keyword+'&tile='+DErand+'?"></SCR'+'IPT>');
document.write('</IFRAME>');
</script>
</div>
</div>
</div>
<div id="rodape">
<div class="maxWidth">
<ul class="extras">
<li class="first"><h2><a href="http://imasters.uol.com.br/"><span>iMasters</span></a></h2></li>
<li><a href="http://imasters.uol.com.br/sobre/">Sobre o iMasters</a></li>
<li><a href="http://imasters.uol.com.br/politicadeprivacidade/">Política de privacidade</a></li>
<li><a href="http://imasters.uol.com.br/anuncie/">Anuncie</a></li>
<li><a href="http://imasters.uol.com.br/feeds/">Feeds iMasters</a></li>
<li><a href="http://forum.imasters.uol.com.br/">Fóruns iMasters</a></li>
<li><a href="http://imasters.uol.com.br/faleconosco/">Fale conosco</a></li>
</ul>
<p>2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.</p>
</div>
</div>
<script type="text/javascript" src="http://static.imasters.uol.com.br/core/js/jquery.js"></script>
<script type="text/javascript" src="http://static.imasters.uol.com.br/imasters/js/topo.js"></script>
<script type="text/javascript" src="http://static.imasters.uol.com.br/imasters/js/artigo.js"></script>
<script type="text/javascript" src="http://static.imasters.uol.com.br/imasters/js/conteudo_comentario.js"></script>
<script type="text/javascript" src="http://static.imasters.uol.com.br/js/2007/prettify/prettify.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write("\<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>\<\/script>" );
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-339422-2");
pageTracker._initData();
pageTracker._setDomainName(".imasters.uol.com.br");
pageTracker._trackPageview();
</script>
<script type="text/javascript" src="http://imasters.uol.com.br/clickheat/js/clickheat.js"></script>
<script type="text/javascript"><!--
clickHeatSite = 'imasters';
clickHeatGroup = 'artigo';
clickHeatServer = 'http://imasters.uol.com.br/clickheat/click.php';
initClickHeat();
//--></script>
</body>
</html> 
Feeds
Newsletter
