<ul><li>As Folhas de Estilos são: </li></ul><ul><ul><li>descrições de como os documentos são apresentados no ecrã, numa im...
<ul><li>É um conjunto de regras que diz ao  browser  qual a fonte, estilo, margens, cor, a indentação, etc. devem ser usad...
<ul><li>O HTML produz páginas  Web  que são:  </li></ul><ul><ul><li>Muito complexas, </li></ul></ul><ul><ul><li>Difíceis d...
<ul><li>A linguagem HTML era usada somente para estruturar textos.  </li></ul><ul><ul><li>Marcar textos definindo &quot;is...
<ul><li>A frase “Precisa do navegador X para visualizar esta página&quot; tornou-se, nessa fase, comum nos sites.  </li></...
O que são CSS?
<ul><li>CSS é uma lista de regras onde cada regra começa com um selector ao qual as propriedades são associadas.  </li></u...
<ul><li>Exemplo: HTML </li></ul><ul><li><body bgcolor=&quot;#FF0000&quot;> </li></ul><ul><li>Exemplo: CSS </li></ul><ul><l...
<ul><li>O bloco básico de uma folha de estilo é a  regra .  </li></ul>Uma regra define como um ou mais estilos são aplicad...
<ul><li>O  selector  é o elemento/tag que definimos (na maioria das vezes trata-se de uma tag HTML).  </li></ul><ul><li>Um...
Cada estilo criado, é definido através da seguinte sintaxe: ·selector {atributo1: valor; atributo2: valor ...} <ul><li>Ele...
Texto com esta cor aplicada
<ul><li>Um estilo CSS que aplicamos a um parágrafo (selector) a formatação do tipo de letra Comic Sans MS (declaração) </l...
 
Externo -  Externo significa que os estilos definidos no CSS, encontram-se num ficheiro externo ao HTML separado. A página...
Para a definição dos estilos, basta criar um documento de texto com  a extensão .CSS, através da utilização de um editor d...
<ul><li>Para a criação de estilos incorporado, basta colocar as tags <STYLE>...</STYLE>  </li></ul><ul><li>e os estilos de...
<ul><li>Os estilo Inline,  o atributo STYLE é  definidos dentro da própria tag a definir.  </li></ul><ul><li>A sintaxe par...
 
<ul><li>Controlo do layout de vários documentos a partir de uma simples folha de estilos;  </li></ul><ul><li>Maior precisã...
<ul><li>A utilização de folhas de estilos externas ao ficheiro HTML,  permite-nos poupar tempo, ganhar flexibilidade e aum...
[CSS]
<ul><li>No modo  ALL  – Permite supervisionar todas as REGRAS e PROPRIEDADES que afectam todo o documento </li></ul><ul><l...
<ul><li>Botões do Painel CSS </li></ul><ul><li>A.Vista de categoria  </li></ul><ul><li>B.Vista de lista  </li></ul><ul><li...
<ul><li>D.  Juntar uma Folha de estilos –  permite vincular/juntar uma folha de estilos externa ao documento </li></ul><ul...
<ul><li>E.  Nova regra CSS –  permite seleccionar o tipo de estilo a  criar </li></ul>
<ul><li>Selector   Class </li></ul><ul><ul><li>Um estilo que pode ser aplicado a vários </li></ul></ul><ul><ul><li>Serve p...
<ul><li>Selector   TAG </li></ul><ul><ul><li>redefine uma marca HTML existente </li></ul></ul><ul><li>Tag:  todas as tags ...
<ul><li>Por exemplo </li></ul><ul><ul><li>A Tag  td  identifica as células com dados </li></ul></ul>
<ul><li>Selector   Advanced </li></ul><ul><ul><li>Criar estilos para pseudo-classes </li></ul></ul><ul><ul><li>Configura a...
<ul><li>Define In: </li></ul><ul><ul><li>A -  New Style Sheet File </li></ul></ul><ul><ul><ul><li>Define onde o CSS vai fi...
<ul><li>B -  This Document Only </li></ul><ul><ul><li>Cria estilos no próprio documento </li></ul></ul><ul><ul><li>Tudo o ...
<ul><li>As Folhas de Estilo Externas podem ser importadas ou  linkadas  em outras páginas </li></ul>
1
<ul><li>Font -  Selecciona uma fonte para o texto. </li></ul><ul><li>Size –Ta manho da fonte </li></ul><ul><li>Style  – Es...
<ul><li>Case –  Capitalize [primeira letra em maiúsculo], UpperCase [todo o texto em maiúsculo] e LowerCase  [em minúsculo...
2
<ul><li>Background Color – cor de fundo </li></ul><ul><li>Background Image – imagem de fundo </li></ul><ul><li>Repeat </li...
<ul><li>Attachment </li></ul><ul><ul><li>fixed, fixa a imagem no fundo  </li></ul></ul><ul><ul><li>scroll, permite a image...
Inline Frames
<ul><li>Consiste na inserção de páginas web (arquivos) dentro de outras páginas web (arquivos) .  </li></ul><ul><ul><li>Sã...
<ul><li>As iFrames são reconhecidas somente nos navegadores MSIE 4 , NN 6 e Opera 5 ou superiores  </li></ul><ul><li>O cód...
<ul><li>Atributos básicos de uma iFrame </li></ul><ul><ul><li>name  (nome da iframe); ID  (identificação da iframe); width...
<ul><li>Atributos básicos de do Editor de TAGS de uma iFrame  </li></ul>1 2 3 4 5 6 7 8 9
<ul><li>1 Souce:   src=&quot;conteudo.htm&quot;  É a url do arquivo que vai ficar dentro do iframe, exemplo <iframe src=&q...
<ul><li>4 = Height:  É dimensão vertical definida para a iFrame. </li></ul><ul><li>5 = Margin Whidth:  É a largura da marg...
<ul><li>7 = Alignment:  É o alinhamento do iFrame. </li></ul><ul><li>8 = Scrolling:  Qual a opção da barra de rolagem. </l...
<ul><li>Browser Especific </li></ul>1 2 3 4
<ul><li>1 = Horizontal Space:   Determina o espaço horizontal entre o iFrame e o resto do documento html,   sendo que x é ...
<ul><li>3 = Allow Transparency :  permite um iFrame transparente. </li></ul><ul><li>4 = Frame Contains Application:   é um...
<ul><li>Style Sheet/Accessibility  </li></ul>1 2 3 4
<ul><li>1 = Class:  Aplicação de um estilo CSS </li></ul><ul><li>2 = ID:  é uma referência que se dá ao código. </li></ul>...
Upcoming SlideShare
Loading in …5
×

Css e iFrames

15,781 views

Published on

CSS e Iframes (material das aulas)

Published in: Technology

Css e iFrames

  1. 2. <ul><li>As Folhas de Estilos são: </li></ul><ul><ul><li>descrições de como os documentos são apresentados no ecrã, numa impressão ou de que forma são pronunciados quando lidos pelo computador. </li></ul></ul><ul><li>CSS é o mecanismo para dizer ao browser como formatar os elementos de documentos HTML. </li></ul>
  2. 3. <ul><li>É um conjunto de regras que diz ao browser qual a fonte, estilo, margens, cor, a indentação, etc. devem ser usados para apresentar os conteudos. </li></ul><ul><li>Diferenças entre CSS e HTML? </li></ul><ul><li>HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados </li></ul>
  3. 4. <ul><li>O HTML produz páginas Web que são: </li></ul><ul><ul><li>Muito complexas, </li></ul></ul><ul><ul><li>Difíceis de ler e de manter, </li></ul></ul><ul><ul><li>Desnecessariamente grandes. </li></ul></ul><ul><li>CSS é uma linguagem de folha de estilo proposta pelo W3C com o objectivo de separar o estilo do conteúdo da página. </li></ul>
  4. 5. <ul><li>A linguagem HTML era usada somente para estruturar textos. </li></ul><ul><ul><li>Marcar textos definindo &quot;isto é um cabeçalho &quot; ou &quot;isto é um parágrafo&quot; usando tags HTML tais como <h1> e <p>. </li></ul></ul><ul><li>Com a popularidade da Web, os designers começaram a sentir a necessidade de encontrar meios de construir layout para os documentos online. </li></ul>
  5. 6. <ul><li>A frase “Precisa do navegador X para visualizar esta página&quot; tornou-se, nessa fase, comum nos sites. </li></ul><ul><ul><li>A CSS foi inventada para solucionar esta situação, colocando à disposição dos web designers meios sofisticados de projectar layouts suportados por todos os navegadores. </li></ul></ul>
  6. 7. O que são CSS?
  7. 8. <ul><li>CSS é uma lista de regras onde cada regra começa com um selector ao qual as propriedades são associadas. </li></ul><ul><li>O selector indica a que elemento as propriedades se aplicam. </li></ul><ul><li>NomeElemento </li></ul><ul><li>{ </li></ul><ul><li>display: block; </li></ul><ul><li>} </li></ul>
  8. 9. <ul><li>Exemplo: HTML </li></ul><ul><li><body bgcolor=&quot;#FF0000&quot;> </li></ul><ul><li>Exemplo: CSS </li></ul><ul><li>body {background-color: #FF0000;} </li></ul>
  9. 10. <ul><li>O bloco básico de uma folha de estilo é a regra . </li></ul>Uma regra define como um ou mais estilos são aplicados a um determinado elemento ou conjunto de elementos e é composta por duas partes: o Selector e as Declarações <ul><ul><li>h1 { color: red } </li></ul></ul>Selector Atributo Valor Declaração
  10. 11. <ul><li>O selector é o elemento/tag que definimos (na maioria das vezes trata-se de uma tag HTML). </li></ul><ul><li>Uma declaração , por sua vez, também é composta por duas partes: uma propriedade e um valor. </li></ul><ul><ul><li>A propriedade é o atributo que desejamos inserir para este elemento e cada propriedade tem um valor atribuído. A propriedade e o valor são separados por “:” e delimitados por chavetas “{ } “ </li></ul></ul>
  11. 12. Cada estilo criado, é definido através da seguinte sintaxe: ·selector {atributo1: valor; atributo2: valor ...} <ul><li>Elemento - descreve o elemento ao qual o estilo será aplicado. Poderá ter o mesmo nome que a tag HTML. É também conhecido por selector. </li></ul><ul><li>Atributo – a propriedade do elemento a formatar. Deve ser um nome de atributo CSS válido, Ex.: o atributo font-size. </li></ul><ul><li>Valor – valor dado ao atributo. Deve ser um valor válido para o atributo em questão, Ex.: 20pt para font-size. </li></ul><ul><li>Atributo:valor – Para múltiplas declarações, separam-se com (;). </li></ul>
  12. 13. Texto com esta cor aplicada
  13. 14. <ul><li>Um estilo CSS que aplicamos a um parágrafo (selector) a formatação do tipo de letra Comic Sans MS (declaração) </li></ul><ul><li>p {font-family: “Comic Sans MS”} </li></ul><ul><li>Texto com este estilo aplicado </li></ul>
  14. 16. Externo - Externo significa que os estilos definidos no CSS, encontram-se num ficheiro externo ao HTML separado. A página HTML possui somente uma referencia a esse ficheiro. Desta forma, podemos definir os estilos e aplica-los em diferentes páginas. Incorporado - significa que os estilos definidos no CSS, encontram-se no cabeçalho do documento HTML. Os estilos só se aplicam à página na qual se encontram. Inline – Os estilos são definidos directamente dentro da tag de HTML. O estilo só se aplica á tag no qual se encontra
  15. 17. Para a definição dos estilos, basta criar um documento de texto com a extensão .CSS, através da utilização de um editor de text. Exemplo: Estilos.css H1 {font-family: ‘arial'; font-size: 30pt; color: blue} P {font-family: ‘Verdana'; margin-left: 10px} Para se utilizar os estilos definidos, basta efectuar uma referência ao ficheiro .css, dentro do cabeçalho da página. <LINK REL=&quot;STYLESHEET&quot; HREF=&quot;Estilos.css“ TYPE=&quot;text/css&quot;>
  16. 18. <ul><li>Para a criação de estilos incorporado, basta colocar as tags <STYLE>...</STYLE> </li></ul><ul><li>e os estilos dentro da própria tag página HTML. </li></ul><ul><li>Exemplo: </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> Estilos Incorporados</TITLE> </li></ul><ul><li><STYLE TYPE=&quot;text/css&quot;><!-- </li></ul><ul><li>P {background-color: #FFFFFF; </li></ul><ul><li>font-family:'Comic Sans MS'; </li></ul><ul><li>Font-size: 14pt} </li></ul><ul><li>--> </li></ul><ul><li></STYLE> </li></ul><ul><li></HEAD> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  17. 19. <ul><li>Os estilo Inline, o atributo STYLE é definidos dentro da própria tag a definir. </li></ul><ul><li>A sintaxe para definir um estilo inline é a seguinte: </li></ul><ul><li><p STYLE=&quot;color: green; font-family: ‘arial‘> Texto com CSS</p > </li></ul>
  18. 21. <ul><li>Controlo do layout de vários documentos a partir de uma simples folha de estilos; </li></ul><ul><li>Maior precisão no controlo do layout; </li></ul><ul><li>Aplicação de diferentes layouts para servir diferentes meios (ecrã, impressora, etc.); </li></ul><ul><li>Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento </li></ul><ul><ul><li>O suporte das folhas de estilo nos browsers está actualmente razoavelmente solidificada. A maioria dos browsers suporta a especificação CSS1 (completamente) e CSS2 </li></ul></ul>
  19. 22. <ul><li>A utilização de folhas de estilos externas ao ficheiro HTML, permite-nos poupar tempo, ganhar flexibilidade e aumentar a consistência das páginas. </li></ul><ul><li>Aplicando os estilos através de um ficheiro externo, a alteração da formatação ou remodelação gráfica, torna-se tarefa fácil. </li></ul><ul><li>As páginas que utilizam CSS, tornam-se mais simples de se construir e são também mais leves, aparecendo mais depressa no browser. </li></ul>
  20. 23. [CSS]
  21. 24. <ul><li>No modo ALL – Permite supervisionar todas as REGRAS e PROPRIEDADES que afectam todo o documento </li></ul><ul><li>No modo CURRENT – O painel de Estilos CSS permite supervisionar as REGRAS e PROPRIEDADES CSS que afectam um elemento seleccionado na página </li></ul>
  22. 25. <ul><li>Botões do Painel CSS </li></ul><ul><li>A.Vista de categoria </li></ul><ul><li>B.Vista de lista </li></ul><ul><li>C.Vista das propiedades establecidas – só mostra as propriedades que se estabeleceram </li></ul>divide as propriedades CSS: fonte, fundo, bloco, borda, quadro, lista, posição e extensões A B C
  23. 26. <ul><li>D. Juntar uma Folha de estilos – permite vincular/juntar uma folha de estilos externa ao documento </li></ul><ul><li>E. Nova regra CSS – permite seleccionar o tipo de estilo a criar </li></ul><ul><li>F. Editar estilo CSS </li></ul><ul><li>G. Eliminar regra CSS </li></ul>D E F G
  24. 27. <ul><li>E. Nova regra CSS – permite seleccionar o tipo de estilo a criar </li></ul>
  25. 28. <ul><li>Selector Class </li></ul><ul><ul><li>Um estilo que pode ser aplicado a vários </li></ul></ul><ul><ul><li>Serve para criar uma class , utilizando um ( . ) ponto no inicio e um nome que quer para classe. </li></ul></ul><ul><li>Name: .table </li></ul><ul><li>Define in: Nova folha de estilos </li></ul><ul><li> Apenas no documento </li></ul>
  26. 29. <ul><li>Selector TAG </li></ul><ul><ul><li>redefine uma marca HTML existente </li></ul></ul><ul><li>Tag: todas as tags do HTML para poder utilizar. Pode fazer com que uma tabela fique sempre de uma determinada forma e todas as vezes que colocar uma tabela ela ficará sempre igual ao definido </li></ul>
  27. 30. <ul><li>Por exemplo </li></ul><ul><ul><li>A Tag td identifica as células com dados </li></ul></ul>
  28. 31. <ul><li>Selector Advanced </li></ul><ul><ul><li>Criar estilos para pseudo-classes </li></ul></ul><ul><ul><li>Configura as tags do link nos seus estados: </li></ul></ul>
  29. 32. <ul><li>Define In: </li></ul><ul><ul><li>A - New Style Sheet File </li></ul></ul><ul><ul><ul><li>Define onde o CSS vai ficar guardado </li></ul></ul></ul><ul><ul><ul><li>Cria um documento CSS externo que pode ser aplicado a outros documentos HTML </li></ul></ul></ul><ul><ul><ul><li>sempre muda. </li></ul></ul></ul>A B
  30. 33. <ul><li>B - This Document Only </li></ul><ul><ul><li>Cria estilos no próprio documento </li></ul></ul><ul><ul><li>Tudo o que cria como CSS irá para dentro do mesmo ecrã (documento html). </li></ul></ul>
  31. 34. <ul><li>As Folhas de Estilo Externas podem ser importadas ou linkadas em outras páginas </li></ul>
  32. 35. 1
  33. 36. <ul><li>Font - Selecciona uma fonte para o texto. </li></ul><ul><li>Size –Ta manho da fonte </li></ul><ul><li>Style – Estilo da fonte </li></ul><ul><li>Line Height – aumenta o espaço na vertical </li></ul><ul><li>Weight – peso da fonte. É possível definir um valor numérico, e quanto mais baixo esse valor, mais clara é a fonte. </li></ul><ul><li>Varient – Letras sempre em maiúsculas </li></ul>1
  34. 37. <ul><li>Case – Capitalize [primeira letra em maiúsculo], UpperCase [todo o texto em maiúsculo] e LowerCase [em minúsculo] </li></ul><ul><li>Color </li></ul><ul><li>Decoration </li></ul>
  35. 38. 2
  36. 39. <ul><li>Background Color – cor de fundo </li></ul><ul><li>Background Image – imagem de fundo </li></ul><ul><li>Repeat </li></ul><ul><ul><li>no-repeat, não permite a duplicar </li></ul></ul><ul><ul><li>repeat, permite a repetição </li></ul></ul><ul><ul><li>repeat-x , repete na horizontal </li></ul></ul><ul><ul><li>repeat-y , repete na vertical </li></ul></ul>2
  37. 40. <ul><li>Attachment </li></ul><ul><ul><li>fixed, fixa a imagem no fundo </li></ul></ul><ul><ul><li>scroll, permite a imagem deslizar junto com o fundo </li></ul></ul><ul><li>Posição que a imagem de fundo assume </li></ul><ul><ul><li>Horizontal Position </li></ul></ul><ul><ul><li>Vertical Position </li></ul></ul>
  38. 41. Inline Frames
  39. 42. <ul><li>Consiste na inserção de páginas web (arquivos) dentro de outras páginas web (arquivos) . </li></ul><ul><ul><li>São diferentes das Frames (quadros) - divisões da mesma página em secções </li></ul></ul>
  40. 43. <ul><li>As iFrames são reconhecidas somente nos navegadores MSIE 4 , NN 6 e Opera 5 ou superiores </li></ul><ul><li>O código HTML gerado para inserção de uma iFrame é: </li></ul><ul><li><iframe></iframe> </li></ul><ul><li>No DW MX 2004 </li></ul><ul><ul><li>Insert > TAG > HTML TAGS > iFrames </li></ul></ul>
  41. 44. <ul><li>Atributos básicos de uma iFrame </li></ul><ul><ul><li>name (nome da iframe); ID (identificação da iframe); width (largura em pixels); height (altura em pixels); src (caminho para o conteúdo da iframe. Pode ser um URL , um outro arquivo , uma imagem etc...); scrolling (determina a presença ou não de barra de rolagem - yes, no, auto); </li></ul></ul>
  42. 45. <ul><li>Atributos básicos de do Editor de TAGS de uma iFrame </li></ul>1 2 3 4 5 6 7 8 9
  43. 46. <ul><li>1 Souce: src=&quot;conteudo.htm&quot; É a url do arquivo que vai ficar dentro do iframe, exemplo <iframe src=&quot;conteudo.html&quot;> </li></ul><ul><li>2 = Name: O nome do iframe campo, mas que é obrigatório caso queira fazer algum link abrir dentro dele. </li></ul><ul><li>3 = Whidth: É dimensão horizontal definida para a iFrame </li></ul>
  44. 47. <ul><li>4 = Height: É dimensão vertical definida para a iFrame. </li></ul><ul><li>5 = Margin Whidth: É a largura da margem na horizontal. </li></ul><ul><li>6 = Margin Height: É a largura da margem na vertical. </li></ul>
  45. 48. <ul><li>7 = Alignment: É o alinhamento do iFrame. </li></ul><ul><li>8 = Scrolling: Qual a opção da barra de rolagem. </li></ul><ul><li>9 = Show Borders: Se vai possuir bordas ou não. </li></ul>
  46. 49. <ul><li>Browser Especific </li></ul>1 2 3 4
  47. 50. <ul><li>1 = Horizontal Space: Determina o espaço horizontal entre o iFrame e o resto do documento html, sendo que x é o valor do espaço em pixels </li></ul><ul><li>O símbolo do lado informa a aceitação de iFrames desde o Explore 3 ou superior. </li></ul><ul><li>2 = Vertical Space: Determina o espaço vertical entre o iframe e o resto do documento html, sendo que x é o valor do espaço em pixels. </li></ul>
  48. 51. <ul><li>3 = Allow Transparency : permite um iFrame transparente. </li></ul><ul><li>4 = Frame Contains Application: é uma aplicação de segurança que informa que o conteúdo é um HTML e é seguro </li></ul>
  49. 52. <ul><li>Style Sheet/Accessibility </li></ul>1 2 3 4
  50. 53. <ul><li>1 = Class: Aplicação de um estilo CSS </li></ul><ul><li>2 = ID: é uma referência que se dá ao código. </li></ul><ul><li>3 = Style: Aplica um estilo diferente para o IFrame. </li></ul><ul><li>4 = Title: Título normalmente é o mesmo que o ID. </li></ul>

×