• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Css e iFrames
 

Css e iFrames

on

  • 19,644 views

CSS e Iframes (material das aulas)

CSS e Iframes (material das aulas)

Statistics

Views

Total Views
19,644
Views on SlideShare
19,075
Embed Views
569

Actions

Likes
3
Downloads
0
Comments
0

12 Embeds 569

http://piadasdodell.blogspot.com.br 467
http://www.slideshare.net 68
http://www.piadasdodell.blogspot.com.br 13
http://esec-acf.pt 9
http://piadasdodell.blogspot.ru 3
http://piadasdodell.blogspot.com 2
http://piadasdodell.blogspot.pt 2
http://www.piadasdodell.blogspot.com 1
http://www.docshut.com 1
http://www.sincrono.com.br 1
http://dev.atp.usp.br 1
http://feeds.feedburner.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Css e iFrames Css e iFrames Presentation Transcript

    •  
      • As Folhas de Estilos são:
        • 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.
      • CSS é o mecanismo para dizer ao browser como formatar os elementos de documentos HTML.
      • É 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.
      • Diferenças entre CSS e HTML?
      • HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados
      • O HTML produz páginas Web que são:
        • Muito complexas,
        • Difíceis de ler e de manter,
        • Desnecessariamente grandes.
      • CSS é uma linguagem de folha de estilo proposta pelo W3C com o objectivo de separar o estilo do conteúdo da página.
      • A linguagem HTML era usada somente para estruturar textos.
        • Marcar textos definindo &quot;isto é um cabeçalho &quot; ou &quot;isto é um parágrafo&quot; usando tags HTML tais como <h1> e <p>.
      • Com a popularidade da Web, os designers começaram a sentir a necessidade de encontrar meios de construir layout para os documentos online.
      • A frase “Precisa do navegador X para visualizar esta página&quot; tornou-se, nessa fase, comum nos sites.
        • 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.
    • O que são CSS?
      • CSS é uma lista de regras onde cada regra começa com um selector ao qual as propriedades são associadas.
      • O selector indica a que elemento as propriedades se aplicam.
      • NomeElemento
      • {
      • display: block;
      • }
      • Exemplo: HTML
      • <body bgcolor=&quot;#FF0000&quot;>
      • Exemplo: CSS
      • body {background-color: #FF0000;}
      • O bloco básico de uma folha de estilo é a regra .
      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
        • h1 { color: red }
      Selector Atributo Valor Declaração
      • O selector é o elemento/tag que definimos (na maioria das vezes trata-se de uma tag HTML).
      • Uma declaração , por sua vez, também é composta por duas partes: uma propriedade e um valor.
        • 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 “{ } “
    • Cada estilo criado, é definido através da seguinte sintaxe: ·selector {atributo1: valor; atributo2: valor ...}
      • Elemento - descreve o elemento ao qual o estilo será aplicado. Poderá ter o mesmo nome que a tag HTML. É também conhecido por selector.
      • Atributo – a propriedade do elemento a formatar. Deve ser um nome de atributo CSS válido, Ex.: o atributo font-size.
      • Valor – valor dado ao atributo. Deve ser um valor válido para o atributo em questão, Ex.: 20pt para font-size.
      • Atributo:valor – Para múltiplas declarações, separam-se com (;).
    • Texto com esta cor aplicada
      • Um estilo CSS que aplicamos a um parágrafo (selector) a formatação do tipo de letra Comic Sans MS (declaração)
      • p {font-family: “Comic Sans MS”}
      • Texto com este estilo aplicado
    •  
    • 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
    • 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;>
      • Para a criação de estilos incorporado, basta colocar as tags <STYLE>...</STYLE>
      • e os estilos dentro da própria tag página HTML.
      • Exemplo:
      • <HTML>
      • <HEAD>
      • <TITLE> Estilos Incorporados</TITLE>
      • <STYLE TYPE=&quot;text/css&quot;><!--
      • P {background-color: #FFFFFF;
      • font-family:'Comic Sans MS';
      • Font-size: 14pt}
      • -->
      • </STYLE>
      • </HEAD>
      • </BODY>
      • </HTML>
      • Os estilo Inline, o atributo STYLE é definidos dentro da própria tag a definir.
      • A sintaxe para definir um estilo inline é a seguinte:
      • <p STYLE=&quot;color: green; font-family: ‘arial‘> Texto com CSS</p >
    •  
      • Controlo do layout de vários documentos a partir de uma simples folha de estilos;
      • Maior precisão no controlo do layout;
      • Aplicação de diferentes layouts para servir diferentes meios (ecrã, impressora, etc.);
      • Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento
        • O suporte das folhas de estilo nos browsers está actualmente razoavelmente solidificada. A maioria dos browsers suporta a especificação CSS1 (completamente) e CSS2
      • 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.
      • 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.
      • 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.
    • [CSS]
      • No modo ALL – Permite supervisionar todas as REGRAS e PROPRIEDADES que afectam todo o documento
      • No modo CURRENT – O painel de Estilos CSS permite supervisionar as REGRAS e PROPRIEDADES CSS que afectam um elemento seleccionado na página
      • Botões do Painel CSS
      • A.Vista de categoria
      • B.Vista de lista
      • C.Vista das propiedades establecidas – só mostra as propriedades que se estabeleceram
      divide as propriedades CSS: fonte, fundo, bloco, borda, quadro, lista, posição e extensões A B C
      • D. Juntar uma Folha de estilos – permite vincular/juntar uma folha de estilos externa ao documento
      • E. Nova regra CSS – permite seleccionar o tipo de estilo a criar
      • F. Editar estilo CSS
      • G. Eliminar regra CSS
      D E F G
      • E. Nova regra CSS – permite seleccionar o tipo de estilo a criar
      • Selector Class
        • Um estilo que pode ser aplicado a vários
        • Serve para criar uma class , utilizando um ( . ) ponto no inicio e um nome que quer para classe.
      • Name: .table
      • Define in: Nova folha de estilos
      • Apenas no documento
      • Selector TAG
        • redefine uma marca HTML existente
      • 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
      • Por exemplo
        • A Tag td identifica as células com dados
      • Selector Advanced
        • Criar estilos para pseudo-classes
        • Configura as tags do link nos seus estados:
      • Define In:
        • A - New Style Sheet File
          • Define onde o CSS vai ficar guardado
          • Cria um documento CSS externo que pode ser aplicado a outros documentos HTML
          • sempre muda.
      A B
      • B - This Document Only
        • Cria estilos no próprio documento
        • Tudo o que cria como CSS irá para dentro do mesmo ecrã (documento html).
      • As Folhas de Estilo Externas podem ser importadas ou linkadas em outras páginas
    • 1
      • Font - Selecciona uma fonte para o texto.
      • Size –Ta manho da fonte
      • Style – Estilo da fonte
      • Line Height – aumenta o espaço na vertical
      • Weight – peso da fonte. É possível definir um valor numérico, e quanto mais baixo esse valor, mais clara é a fonte.
      • Varient – Letras sempre em maiúsculas
      1
      • Case – Capitalize [primeira letra em maiúsculo], UpperCase [todo o texto em maiúsculo] e LowerCase [em minúsculo]
      • Color
      • Decoration
    • 2
      • Background Color – cor de fundo
      • Background Image – imagem de fundo
      • Repeat
        • no-repeat, não permite a duplicar
        • repeat, permite a repetição
        • repeat-x , repete na horizontal
        • repeat-y , repete na vertical
      2
      • Attachment
        • fixed, fixa a imagem no fundo
        • scroll, permite a imagem deslizar junto com o fundo
      • Posição que a imagem de fundo assume
        • Horizontal Position
        • Vertical Position
    • Inline Frames
      • Consiste na inserção de páginas web (arquivos) dentro de outras páginas web (arquivos) .
        • São diferentes das Frames (quadros) - divisões da mesma página em secções
      • As iFrames são reconhecidas somente nos navegadores MSIE 4 , NN 6 e Opera 5 ou superiores
      • O código HTML gerado para inserção de uma iFrame é:
      • <iframe></iframe>
      • No DW MX 2004
        • Insert > TAG > HTML TAGS > iFrames
      • Atributos básicos de uma iFrame
        • 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);
      • Atributos básicos de do Editor de TAGS de uma iFrame
      1 2 3 4 5 6 7 8 9
      • 1 Souce: src=&quot;conteudo.htm&quot; É a url do arquivo que vai ficar dentro do iframe, exemplo <iframe src=&quot;conteudo.html&quot;>
      • 2 = Name: O nome do iframe campo, mas que é obrigatório caso queira fazer algum link abrir dentro dele.
      • 3 = Whidth: É dimensão horizontal definida para a iFrame
      • 4 = Height: É dimensão vertical definida para a iFrame.
      • 5 = Margin Whidth: É a largura da margem na horizontal.
      • 6 = Margin Height: É a largura da margem na vertical.
      • 7 = Alignment: É o alinhamento do iFrame.
      • 8 = Scrolling: Qual a opção da barra de rolagem.
      • 9 = Show Borders: Se vai possuir bordas ou não.
      • Browser Especific
      1 2 3 4
      • 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
      • O símbolo do lado informa a aceitação de iFrames desde o Explore 3 ou superior.
      • 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.
      • 3 = Allow Transparency : permite um iFrame transparente.
      • 4 = Frame Contains Application: é uma aplicação de segurança que informa que o conteúdo é um HTML e é seguro
      • Style Sheet/Accessibility
      1 2 3 4
      • 1 = Class: Aplicação de um estilo CSS
      • 2 = ID: é uma referência que se dá ao código.
      • 3 = Style: Aplica um estilo diferente para o IFrame.
      • 4 = Title: Título normalmente é o mesmo que o ID.