Desenvolvedor Web Docente André Luiz Silva de Moraes
|
|
- Lívia Aurélia Casqueira Gameiro
- 8 Há anos
- Visualizações:
Transcrição
1 Roteiro 3: Layout básico e Div's: técnicas com uso de ID's e Classes Objetivos Compreender a importância do uso de Elementos de Div no desenvolvimento de Layouts de página; Explorar e aplicar o uso de classes e ID s na formatação de elementos com CSS; Introdução Uma das grandes preocupações do desenvolvedor Web sempre foi com o layout das suas páginas. Sempre foi um dilema optar entre uma página bonita ou uma página que realmente funcione como o esperado. O layout nunca foi fácil de ser elaborado e requer ainda muita preocupação com cores utilizadas, imagens, logitipos, etc. Junto disso, a estilização de elementos existentes no corpo da página é importante para manter um padrão visual nas páginas, isto pode ser observado em grandes portais da internet. O que se percebe é, que ao navegar em determinados portais de internet é possível saber em qual endereço está-se visitando apenas pela sua marca visual. Isto se deve ao fato da aplicação de estilização de parágrafos, tabelas, imagens, espaçamentos, etc, através das regras de CSS. Este roteiro tem como objetivo concentrar na formulação de layouts de página básicos juntamente da estilização de conteúdos para controlar a disposição dos elementos na página. O uso de Divs Uma DIV foi criada para fornecer um mecanismo genérico para agrupar e prover estrutura aos documentos. O elemento div é semanticamente neutro: ele não tem qualquer valor semântico, é simplesmente um elemento container. O elemento div deverá ser usado quando não estiver disponível um outro elemento container e semântico, capaz de substituí-lo tal como são os cabeçalhos, parágrafos, listas etc. Traduzindo: uma div não influencia em nada na página sem ter suas propriedades alteradas, mas ela permite que os elementos da página possam ser organizados quando colocados dentro delas na estrutura do HTML. Por este fato elas passaram a ser utilizadas para compor o layout das páginas. A figura 25 ilustra um exemplo do esquema de uso das divs: Figura 25: Esquema de uso de Div's na estrutura do HTML As divs são utilizadas na estrutura das páginas geralmente para separar as partes da página, criando as áreas reservadas para agrupar os itens do cabeçalho da página, do conteúdo e do rodapé. Desta forma o desenvolvedor pode personalizar o posicionamento, fundo, alinhamento, etc, dos demais itens da página através do CSS. A figura 26 ilustra um exemplo disso. Instituto Federal de Santa Catarina- Campus Garopaba Pág 19
2 Figura 26: Código de Exemplo com uso de div's e resultado de sua aplicação Aparentemente o visual demonstrado na figura 26 não altera nada na página. Mas com uso do CSS é possível personalizar algumas propriedades e deixar a página com um visual totalmente diferente. A figura 27 ilustra o resultado das modificações. Figura 27: Página com estilos CSS aplicados nas Divs A figura 27 ilustra modificações realizadas no css da página que resultaram na imagem demonstrada utilizando pequenas propriedades aplicadas apenas nas Div's. Estas propriedades são ilustradas na figura 28 a seguir: Figura 28: Código CSS aplicado nas Divs para posicionamento e redimensionamento Instituto Federal de Santa Catarina- Campus Garopaba Pág 20
3 As principais propriedades utilizadas no posicionamento e redimensionamento de DIV's são detalhadas na tabela x a seguir: Propriedade width height margin-left margin-right margin-top margin-bottom Descrição Controla a largura de um elemento, controlado por padrão em pixels. Controla a altura de um elemento, controlado por padrão em pixels. Controla a margem esquerda de um elemento, controlado por padrão em pixels. A margem é contada sempre a partir do lado 0 dela, ou seja, se é margem esquerda a medida inicia a partir da esquerda. Controla a margem direita de um elemento, controlado por padrão em pixels. A margem é contada sempre a partir do lado 0 dela, ou seja, se é margem direita a medida inicia a partir da direita. Controla a margem superior de um elemento. Controla a margem inferior de um elemento. Tabela 4: Tabela de propriedades para dimensões e posicionamento Utilizando ID's e Classes em elementos Formatar ID's utilizando o CSS é importante para dar cara a um site. Fazendo isto diretamente no CSS com uso do elemento DIV pode ter algumas limitações.por exempo, se quiser diferenciar algumas propriedades de suas div's, pode ser que não seja possível sem utilizar alguns recursos extras. ID's Um ID permite identificar elementos na sua página, fazendo com que possam receber formatações únicas para eles através do CSS. Ao invés de utilizar o CSS inline, o uso de ID permite que sejam identificados elementos e formatados em várias páginas ao mesmo tempo. O uso de id's em elementos é demonstrado na figura a seguir: De acordo com o exemplo demonstrado, para utilizar um id no html é necessário incluir diretamente na tag desejada a identificação do elemento no formato: <elemento id="nomeid">conteúdo</elemento> No CSS, para controlar elementos com uso de ID's, é necessário utilizar o símbolo # precedendo o nome do id criado no HTML, no seguinte formato: #elemento{ propriedade: valor; } Exemplo de uso e resultado dos ID's aplicados em página: Figura 29: Exemplo de uso de ID's no CSS Instituto Federal de Santa Catarina- Campus Garopaba Pág 21
4 OBSERVAÇÃO: Geralmente os ID's acabam sendo mais utilizados em elementos da estrutura da página e em alguns elementos especiais da página. Classes Uma CLASSE permite criar formatações para grupos de elementos, independente da página que estão. No CSS basta especificar quais propriedades se quer modificar e alterá-las. O uso das classes é demonstrado na figura 30: Figura 30: Exemplo de configuração de classes no HTML Da mesma forma que os ID's, de acordo com o exemplo demonstado, para utilizar Classes é necessário também identificar os elementos que participarão de classes no formato: <elemento class="nomeclasse">conteúdo</elemento> Na configuração do CSS as classes é necessário preceder o elemento com um ponto antes do nome da classe que quiser formatar, no seguinte formato:.nomeclasse{ propriedade: valor; } Exemplo de uso e resultado das CLASSES aplicadas em página: Figura 31: Exemplo de configuração de classe Quando são utilizadas as classes? É muito comum serem utilizadas em grupos de elementos na estrutura da página. OBSERVAÇÃO: Diferença entre ID e CLASSE? ID é utilizado para identificar um único elemento em uma ou várias páginas, e CLASSES são utilizadas em vários elementos em uma ou várias páginas. Instituto Federal de Santa Catarina- Campus Garopaba Pág 22
5 Tarefas 1. Utilizando toda a estrutura que foi criada no Roteiro 3 (Página do cheff online), copie todos os arquivos e diretórios para serem utilizados no Roteiro 4. Apenas para a sua organização nomeie o diretório de destino como Roteiro4. 2. No css externo, formate uma borda nos elementos de coluna (td{ } ) para obter um resultado semelhante ao exemplo abaixo na página fale-conosco: Dica: as propriedades utilizadas foram border e background-color. 3. No css externo, formate configurações para o elemento table{ } utilizando as propriedades border-collapse, e background-color. A propriedade border-collapse trata das bordas da tabela e os principais valores disponíveis para ela são collapse ou separate. Tente recriar o exemplo a seguir: 4. No css externo que foi criado na aula anterior, em seguida realize as seguintes configurações: 4.1) Crie uma classe no CSS com o nome de.linha com as propriedades a seguir: color; tex-decoration; background-color; 4.2) Crie um ID no CSS com o nome de #CABECALHO com as propriedades a seguir: color; tex-decoration; background-color; 4.3)Com uso destas propriedades, tente recriar o mesmo efeito da figura a seguir na página fale-conosco.html. Depois determine qual foi a funcionalidade de cada propriedade utilizada. Instituto Federal de Santa Catarina- Campus Garopaba Pág 23
6 5. Acessar o site e utilizar o exemplo de uso de DIV s no site Cheff Online. Copie o código e cole no seu editor e tente adaptar a estrutura para o site do cheff-online de acordo com o exemplo demonstrado. A figura x ilustra o resultado inicial do layout a ser utilizado e a figura x ilustra o resultado após a aplicação no site Cheff Online. Exemplo de adaptação ao site Cheff Online: Figura 32: Resulado inicial da configuração de layout Figura 33: Exemplo da configuração do layout já aplicado Dicas para a modificação do layout e utilização para o Cheff Online: O layout utilizado tem várias propriedades aplicadas, mas o importante é identificar que as colunas foram elaboradas com DIV's, todas com posicionamento fixo. Ou seja, será necessário especificar o posicionamento delas caso queira modificar a div mais para cima ou mais para baixo. As propriedades mais importantes aplicadas são detalhadas na tabela a seguir: Propriedade top left position paddingbottom Descrição Controla o posicionamento de um elemento a partir de outro partindo do topo. Controla o posicionamento de um elemento a partir de outro partindo da esquerda. Permite determinar como o elemento se comportará no seu posicionamento. Se o posicionamento for definido como absolute o elemento fica fixo no mesmo lugar que foi definido. Controla o espaçamento inferior que um elemento terá desde a sua borda até o seu conteúdo. É uma margem imaginária que praticamente todos os elementos tem. Muito utilizada para a criação de menus. O Arquivo de CSS externo antes utilizado deverá ser incrementado com as novas propriedades utilizada neste layout. Instituto Federal de Santa Catarina- Campus Garopaba Pág 24
7 Note que existem configurações para os seguintes itens: Propriedade #topo #conteudoesq #conteudodir #colesq #sepesqcolcentral #coldir #sepcolcentraldir #colcentral Descrição Responsável por controlar a div no topo. Armazena o conteúdo da coluna esquerda, deverá ser baixado na estrutura e ter sua margem esquerda alterada. Armazena o conteúdo da coluna direita, deverá ser baixado na estrutura e ter sua margem direita alterada. Consiste em toda a coluna esquerda. A maioria das modificações acompanharão as realizadas em div conteudoesq. Não será modificado. É a linha que separa a coluna esquerda da central. Consiste em toda a coluna Direita. A maioria das modificações acompanharão as realizadas em div conteudodir. Não será modificado. É a linha que separa a coluna central da direita. Constitui a coluna e o conteúdo central. Referências "Propriedade border-collapse", disponível em "Página do Maujor", disponível em Instituto Federal de Santa Catarina- Campus Garopaba Pág 25
Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes
Roteiro 3: Introdução a Linguagem CSS Desenvolvimento de Sites com PHP e Mysql Objetivos Vincular folhas de estilo CSS em páginas de Internet; Compreender a sintaxe CSS; Controlar a formatação dos elementos
Leia maisPosicionamento e Layout com CSS
Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto
Leia maisRoteiro 2: Conceitos de Tags HTML
Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias
Leia maisRoteiro 7: Ferramentas de trabalho Editores de texto
Roteiro 7: Ferramentas de trabalho Editores de texto Objetivos Detalhar conceitos sobre ferramentas de edição de texto; Explorar recursos do libreoffice writer; Explorar recursos do Microsoft Word; Explorar
Leia maisDesenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável
Leia maisDesenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção
Leia maisWEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou
Leia maisManual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web
Manual do Publicador Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Sumário Painel de Administração... 3 1 - Inserção de post... 5 2 Publicação de post com notícia na área headline (galeria de
Leia maisLista e Tabelas. Fundamentos da Linguagem Web
Lista e Tabelas Fundamentos da Linguagem Web Bruno Angelo Medeiros Março de 2015 LISTAS O que são? Tipos Ordenadas Não ordenadas De definição Exemplos Exercícios LISTAS - O QUE SÃO? São uma forma de organização
Leia maisLayouts de páginas com HTML e CSS
Layouts de páginas com HTML e CSS Layouts de Páginas com CSS.... 2 Layout com tamanho Líquido... 2 Layout com tamanho Fixo... 3 Desenvolvendo um layout com tamanho fixo.... 5 Layouts de Páginas com CSS.
Leia maisCSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata
CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,
Leia mais02 - Usando o SiteMaster - Informações importantes
01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,
Leia maisAPOSTILA WORD BÁSICO
APOSTILA WORD BÁSICO Apresentação O WORD é um editor de textos, que pertence ao Pacote Office da Microsoft. Suas principais características são: criação de textos, cartas, memorandos, documentos, mala
Leia maisTema UFPel 2.0 WP Institucional Guia de Opções de Personalização
Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Sumário 1. Configurações Iniciais...2 1.1. Configurando o Menu Personalizado...2 1.2. Configurando os Widgets...3 2. Localize o nome de
Leia maisObservações importantes:
Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:
Leia maisResponsive Web Design
Professor: http://jemaf.github.com DESENVOLVIMENTO DE APLICAÇÕES WEB - INFORMATICA - COLTEC/UFMG 2014 Introdução Atualmente, a web é acessada de qualquer lugar, em qualquer dispositivo. Acesso a web: Anos
Leia mais4. Características Gerais das Tabelas do HTML
4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag
Leia maisTutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados
Tutorial Plone 4 Manutenção de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através do
Leia maisAula 04 Word. Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/
Aula 04 Word Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/ Agenda da Aula Editor de Texto - Word Microsoft Office Conjunto de aplicativos para escritório que contém programas
Leia maisDefinindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar
Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,
Leia maisALBUM DE FOTOGRAFIAS NO POWER POINT
ALBUM DE FOTOGRAFIAS NO POWER POINT O PowerPoint é uma poderosa ferramenta que faz parte do pacote Office da Microsoft. O principal uso desse programa é a criação de apresentação de slides, para mostrar
Leia maisDOCUMENTAÇÃO DO FRAMEWORK - versão 2.0
DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 Índice 1 - Objetivo 2 - Descrição do ambiente 2.1. Tecnologias utilizadas 2.2. Estrutura de pastas 2.3. Bibliotecas já incluídas 3 - Características gerais 4 - Criando
Leia maisCAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com.
3 de 13 Índice 1. Mapa CSS e legenda das principais imagens que compõe as paginas...4 a. Conhecimentos desejáveis:...4 b. Modelos Clássico e Fundo Fixo:...4 c. Para o designer o que muda entre o modelo
Leia maisMicrosoft Word INTRODUÇÃO
INTRODUÇÃO O Word é uma ferramenta utilizada para o processamento e editoração eletrônica de textos. O processamento de textos consiste na possibilidade de executar e criar efeitos sobre um texto qualquer,
Leia maisAula 5 Microsoft PowerPoint 2003: Criando uma Apresentação
Universidade de São Paulo/Faculdade de Saúde Pública Curso de Saúde Pública Disciplina: HEP 147 - Informática Aula 5 Microsoft PowerPoint 2003: Criando uma Apresentação 1 Introdução ao Microsoft PowerPoint
Leia maisUniversidade Federal do Mato Grosso - STI-CAE. Índice
CAPA Universidade Federal do Mato Grosso - STI-CAE Índice 1. Página da área administrativa... 1.1 Botões e campo iniciais... 2. Explicar como funcionam as seções... 2.1. Seções dinâmicos... 2.1.1 Como
Leia maisCRIAÇÃO DE SITES (AULA 9)
Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 9) Cor do primeiro plano: a propriedade 'color' A propriedade color define a cor
Leia maisCRIAÇÃO DE SITES (AULA 7)
Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 7) CSS significa CascadingStyleSheetes(Folhas de Estilo em Cascata). Não seria ótimo
Leia maisRoteiro 3: Apresentações eletrônicas (parte 1)
Roteiro 3: Apresentações eletrônicas (parte 1) Objetivos Criar apresentações eletrônicas com uso do software libreoffice; Exportar arquivos em formato pdf; Compreender conceitos sobre imagens digitais;
Leia maisManual da Administração do site Abrasel 2.0
Manual da Administração do site Abrasel 2.0 Caro usuário, Você está recebendo o manual que lhe dará acesso ao administrador do site 2.0 onde será possível fazer as seguintes alterações: Inserir notícias
Leia maisBarra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas
Microsoft Power Point 2003 No Microsoft PowerPoint 2003, você cria sua apresentação usando apenas um arquivo, ele contém tudo o que você precisa uma estrutura para sua apresentação, os slides, o material
Leia maisSíntese da aula anterior
Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações 1 O que vamos fazer hoje? Vamos utilizar o que aprendemos da aula anterior juntamente com Utilização de imagens
Leia maisPower Point. Autor: Paula Pedone
Power Point Autor: Paula Pedone INTRODUÇÃO O POWER POINT é um editor de apresentações, pertencente ao Pacote Office da Microsoft. Suas principais características são: criação de apresentações através da
Leia maisTABLELESS E PROJETO ESTRUTURAL
Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se
Leia maisWORD PARA TRABALHOS ACADÊMICOS
WORD PARA TRABALHOS ACADÊMICOS Março de 05 UNIVERSIDADE FEDERAL DE SANTA CATARINA. Biblioteca Universitária. Programa de capacitação. CONFIGURANDO PÁGINAS A5 - Clique na Aba Layout da Página e clique em
Leia maisColeção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução Nesta quinta edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos o estudo do Windows Mail, um cliente
Leia maisA seguir voce vai poder acompanhar, em 10 passos, como gerenciar o conteúdo das páginas pelas quais voce é responsável.
A seguir voce vai poder acompanhar, em 10 passos, como gerenciar o conteúdo das páginas pelas quais voce é responsável. Índice Geral TULogarUT 3 TUConhecer e VisualizarUT 6 TUÁrea de Edição / Blocos e
Leia maisVejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :
TABELAS As tabelas são muito importantes para o designer de uma home-page. Com elas podese fazer alinhamentos que dificilmente seriam possíveis com simples comandos. A funcionalidade de uma tabela faz
Leia maisManual de utilização da Ferramenta para disparo de E-mkt
Manual de utilização da Ferramenta para disparo de E-mkt 1 Índice Menu e-mail marketing...03 Conteúdo da mensagem...04 Listas de contatos...15 Ações de e-mail marketing...19 Perguntas frequentes...26 2
Leia maisCRIANDO TEMPLATES E LEGENDAS
CRIANDO TEMPLATES E LEGENDAS Este tutorial tem como objetivo instruir passo à passo como criar templates de peças, utilizar os novos recursos de cadastro de propriedade de peças e criação de legenda. 1-
Leia maisCurso de Capacitação em Gerenciador de Conteúdo PLONE
Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Estrutura Viewlets 21 Portlets 26 2 Estrutura Intermediário Depois de conhecer a estrutura principal do Plone e realizar as configurações
Leia maisManual do Painel Administrativo
Manual do Painel Administrativo versão 1.0 Autores César A Miggiolaro Marcos J Lazarin Índice Índice... 2 Figuras... 3 Inicio... 5 Funcionalidades... 7 Analytics... 9 Cidades... 9 Conteúdo... 10 Referência...
Leia maisProfessor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1
Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Do inglês, Cascading Style Sheet, ou folha de estilo em cascata. É uma linguagem
Leia maisUFPel Departamento de Informática. Tutorial Google Docs. Profa. Lisane Brisolara de Brisolara
UFPel Departamento de Informática Tutorial Google Docs Profa. Lisane Brisolara de Brisolara Sumário O que é o Google Docs Seus principais recursos Editor de textos/documentos Editor de planilhas eletrônicas
Leia maisConstrução Páginas de Internet
Construção Páginas de Internet Definir um Site no Frontpage Objectivos da sessão: No final da sessão os formandos deverão ser capazes de: Saber o que são os metadados do Frontpage; Distinguir entre Sites
Leia maisMicrosoft Access: Criar relatórios para um novo banco de dados. Vitor Valerio de Souza Campos
Microsoft Access: Criar relatórios para um novo banco de dados Vitor Valerio de Souza Campos Conteúdo do curso Visão geral: O produto final Lição: Inclui oito seções Tarefas práticas sugeridas Teste Visão
Leia maisPersonalizações do mysuite
Personalizações do mysuite 1. mysuite... 2 2. Customização de campos... 3 3. Importação de dados... 3 4. Integração de sistemas... 3 5. Personalização do Atendimento Online... 4 5.1. Imagens de online
Leia maisRoteiro de Estudos e Atividades Avaliativas HTML
Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar
Leia mais4.14 - Imagens: <img src="..."> src <img src="tecnologia.jpg"> único atributo que não pode ser omitido neste TAG Nota: img
4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
Leia maisAula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013
Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário
Leia maisApostilas OBJETIVA Escrevente Técnico Judiciário TJ Tribunal de Justiça do Estado de São Paulo - Concurso Público 2015. Caderno 1.
Caderno 1 Índice MS-Windows 7: conceito de pastas, diretórios, arquivos e atalhos, área de trabalho, área de transferência, manipulação de arquivos e pastas, uso dos menus, programas e aplicativos, interação
Leia mais#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.
#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores
Leia mais4.14 - Imagens: <IMG SRC="..."> SRC <IMG SRC="tecnologia.jpg"> único atributo que não pode ser omitido neste tag Nota: img
4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
Leia maisQuestão - 01. Essência do Excel 2003...
Valdir Questão - 01 Como deve proceder o usuário do Microsoft para que sejam atualizados os cálculos das funções ou fórmulas utilizadas nas planilhas? a) Pressionar a tecla F9 no teclado b) Pressionar
Leia maisVoltado para novos usuários, este capítulo fornece uma instrução para edição de Leiaute do SILAS e suas funções.
13. Editor de leiautes Voltado para novos usuários, este capítulo fornece uma instrução para edição de Leiaute do SILAS e suas funções. Neste capítulo uma breve explicação será apresentada sobre a organização
Leia maisLOJAS ESPECIAIS 2014
LOJAS ESPECIAIS 2014 LOJAS ESPECIAIS 2014 ÍNDICE Personalização da Página 3 Dúvidas Frequentes 6 LOJAS ESPECIAIS 2014 PERSONALIZAÇÃO DA PÁGINA Para iniciar a personalização acesse Catalogo Gerenciar Categorias
Leia maisIntrodução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
Leia maisWebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira
WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo
Leia maisTopo para a loja virtual Brasmarket com imagens
Topo para a loja virtual Brasmarket com imagens Este tutorial é para orienta-lo na criação do topo da sua loja virtual Brasmarket usando o programa Paintnet que é gratuito e simples de usar Primeiro faça
Leia maisClique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010.
1 Publisher 2010 O Publisher 2010 é uma versão atualizada para o desenvolvimento e manipulação de publicações. Juntamente com ele você irá criar desde cartões de convite, de mensagens, cartazes e calendários.
Leia maisAula 03 PowerPoint 2007
Aula 03 PowerPoint 2007 Professor: Bruno Gomes Disciplina: Informática Básica Curso: Gestão de Turismo Sumário da aula: 1. Abrindo o PowerPoint; 2. Conhecendo a Tela do PowerPoint; 3. Criando uma Nova
Leia maisLidar com números e estatísticas não é fácil. Reunir esses números numa apresentação pode ser ainda mais complicado.
, ()! $ Lidar com números e estatísticas não é fácil. Reunir esses números numa apresentação pode ser ainda mais complicado. Uma estratégia muito utilizada para organizar visualmente informações numéricas
Leia maisNoções de Word versão 2010 para Trabalhos Acadêmicos
Noções de Word versão 2010 para Trabalhos Acadêmicos Elaborado pela Biblioteca Universitária Objetivo Dar noções do uso do word de acordo com as orientações do documento Trabalhos acadêmicos na UNISUL(TAU).
Leia mais7. Cascading Style Sheets (CSS)
7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma
Leia maisMicrosoft Office Excel 2007
1 Microsoft Office Excel 2007 O Excel é um programa dedicado a criação de planilhas de cálculos, além de fornecer gráficos, função de banco de dados e outros. 1. Layout do Excel 2007 O Microsoft Excel
Leia maisMicrosoft PowerPoint
Microsoft PowerPoint Microsoft PowerPoint é utilizado para desenvolver apresentações. Os trabalhos desenvolvidos com este aplicativo normalmente são apresentados com o auxílio de um datashow. Apresentações
Leia maisAplicações de Escritório Electrónico
Universidade de Aveiro Escola Superior de Tecnologia e Gestão de Águeda Curso de Especialização Tecnológica em Práticas Administrativas e Tradução Aplicações de Escritório Electrónico Microsoft Word Folha
Leia maisCOMO COLABORAR NO WIKI DO MOODLE 1. Orientações para produção escolar colaborativa no wiki do Moodle:
COMO COLABORAR NO WIKI DO MOODLE 1 Ilse Abegg e Fábio da Purificação de Bastos e-mail: iabegg@mail.ufsm.br O wiki no Moodle é uma ferramenta de atividade que visa produção escolar colaborativa. Isso significa
Leia maisINTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO As imagens são armazenadas em forma de arquivos, principalmente PNG (para desenhos) ou JPG (para fotos) Para incluir imagens usa-se
Leia maisPrática 3 Microsoft Word
Instituto Federal de Educação, Ciência e Tecnologia do Estado da Paraíba, Campus Sousa Disciplina: Informática Básica Prática 3 Microsoft Word Assunto: Tópicos abordados: Prática Utilização dos recursos
Leia maisExibindo o Catálogo (Tarefa C) Prof. Fellipe Aleixo (fellipe.aleixo@ifrn.edu.br)
Exibindo o Catálogo (Tarefa C) Prof. Fellipe Aleixo (fellipe.aleixo@ifrn.edu.br) Iteração C1: CRIANDO A LISTAGEM DO CATÁLOGO Feedback do Cliente O cliente foi queseonado sobre prioridades Gostaria de ver
Leia maisBem- Vindo ao manual de instruções do ECO Editor de COnteúdo.
Manual de Instruções ECO Editor de Conteúdo Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. O ECO é um sistema amigável e intui?vo, mas abaixo você pode?rar eventuais dúvidas e aproveitar
Leia maisGuia de Início Rápido
Guia de Início Rápido O Microsoft Word 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Barra de Ferramentas de Acesso Rápido
Leia maisREITORA Ulrika Arns. VICE-REITOR Almir Barros da Silva Santos Neto. DIRETOR DO NTIC Leonardo Bidese de Pinho
REITORA Ulrika Arns VICE-REITOR Almir Barros da Silva Santos Neto DIRETOR DO NTIC Leonardo Bidese de Pinho COORDENAÇÃO DE APOIO AO USUÁRIO Pierre Correa Martin 1 UNIVERSIDADE FEDERAL DO PAMPA NTIC NÚCLEO
Leia maisManual de Utilização. Site Manager. Tecnologia ao serviço do Mundo Rural
Manual de Utilização Site Manager Tecnologia ao serviço do Mundo Rural Índice 1. Acesso ao Site Manager...3 2. Construção/Alteração do Menu Principal...4 3. Inserção/ Alteração de Conteúdos...7 4. Upload
Leia maisDisciplina: Programas de Edição de Textos Professora: Érica Barcelos
Disciplina: Programas de Edição de Textos Professora: Érica Barcelos CAPÍTULO 4 4. RECURSOS PARA ILUSTRAÇÕES Uma característica que difere os processadores de textos dos editores é a possibilidade de gerar
Leia maisUtilizamos um tema no Mais Fórmula 1 que possui algumas peculiaridades. Irei explicar passo-a-passo cada uma delas.
Mais Fórmula 1 Instruções de postagem no Mais Fórmula 1. O Mais Fórmula 1 está hospedado na UOL HOST e é gerenciado pelo Wordpress. O Wordpress é um dos melhores sistemas de gerenciamento de conteúdo do
Leia maisSérie ArcGIS Online I. Aprenda em 20. Módulo 4. Configure pop-ups. www.academiagis.com.br
Série ArcGIS Online I Aprenda em 20 Módulo 4 Configure pop-ups Junho/2015 academiagis@img.com.br www.academiagis.com.br 1 Configure pop-ups No módulo 3, você trabalhou com várias propriedades diferentes
Leia mais&XUVRGH,QWURGXomRDR (GLWRUGH3ODQLOKDV([FHO
Universidade Federal de Viçosa Departamento de Informática &XUVRGH,QWURGXomRDR (GLWRUGH3ODQLOKDV([FHO Flaviano Aguiar Liziane Santos Soares Jugurta Lisboa Filho (Orientador) PROJETO UNESC@LA Setembro de
Leia maisÍNDICE... 2 INTRODUÇÃO... 3. A série... 3
WORD 2007 E 2010 ÍNDICE ÍNDICE... 2 INTRODUÇÃO... 3 A série... 3 01 CAPTURAS DE TELA WORD 2010... 3 02 IMAGENS 2007/2010... 5 03 NOTAS DE RODAPÉ... 13 04 NUMERAÇÃO DE PÁGINAS... 15 05 CONTAR PALAVRAS...
Leia maisAmbiente de Aprendizagem Moodle FPD Manual do Aluno
Ambiente de Aprendizagem Moodle FPD Manual do Aluno Maio 2008 Conteúdo 1 Primeiros passos...4 1.1 Tornando-se um usuário...4 1.2 Acessando o ambiente Moodle...4 1.3 O ambiente Moodle...4 1.4 Cadastrando-se
Leia maisCOLÉGIO ESTADUAL PAULO LEMINSKI APOSTILA SOBRE O BROFFICE IMPRESS
COLÉGIO ESTADUAL PAULO LEMINSKI APOSTILA SOBRE O BROFFICE IMPRESS CURITIBA 2014 2 Conteúdo Definição:... 2 Detalhando a tela:... 4 BARRA DE FERRAMENTAS DESENHO... 4 PREENCHIMENTOS... 5 RÉGUAS E GUIAS...
Leia maisAPOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)
APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1 - Área de trabalho e personalizando o sistema... 3 A área de trabalho... 3 Partes da área de trabalho.... 4 O Menu Iniciar:...
Leia maisIntrodução aos Sistemas Informáticos
I 1. Dentro da janela da ferramenta de construção de portais web FrontPage, crie uma página nova e guarde-a como index.htm. 2. Escreva nessa página o texto "O Meu Primeiro Portal Web". Formate-o com o
Leia maisProgramação para Internet
Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos
Leia maisÍNDICE... 3 INTRODUÇÃO... 4. A série... 4
EXCEL 2007 e 2010 2 ÍNDICE ÍNDICE... 3 INTRODUÇÃO... 4 A série... 4 01 LISTA COM VALIDAÇÃO... 5 02 FUNÇÕES FINANCEIRAS... 7 03 FUNÇÃO DE BANCO DE DADOS... 12 04 RÓTULOS... 15 05 TABELA DINÂMICA... 18 06
Leia maisREITORA Ulrika Arns. VICE-REITOR Almir Barros da Silva Santos Neto. DIRETOR DO NTIC Leonardo Bidese de Pinho
REITORA Ulrika Arns VICE-REITOR Almir Barros da Silva Santos Neto DIRETOR DO NTIC Leonardo Bidese de Pinho COORDENAÇÃO DE APOIO AO USUÁRIO Sandro da Silva Camargo UNIVERSIDADE FEDERAL DO PAMPA NTIC - NÚCLEO
Leia maisRoteiro 2: (Planilhas Eletrônicas) - Função procv / manipulação de formulários
Roteiro 2: (Planilhas Eletrônicas) - Função procv / manipulação de formulários Objetivos Explorar funções de procura e referência; Explorar ferramentas para controle de formulários em planilhas; Importar
Leia maisApresentação Prática
Apresentação Prática Este curso contém exercícios com editor de texto Word e também exemplos de acesso à Internet e deve ser utilizado para a apresentação do Método de ensino a pessoas que já tenham tido
Leia maisMICROSOFT EXCEL - AULA NÚMERO 06
MICROSOFT EXCEL - AULA NÚMERO 06 IMPRIMINDO PLANILHAS E GRÁFICOS Até este ponto, você viu como introduzir dados e criar formulas, formatar texto e criar gráficos. Agora você vai apresentar os dados ou
Leia maisMICROSOFT POWER POINT
MICROSOFT POWER POINT Programa destinado a criação e exibição de apresentações em seu computador. Através de ferramentas poderosas, você poderá preparar apresentações profissionais de forma simples e rápida.
Leia maisVamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.
3.5 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao
Leia maisPLANNER CONSULTORIA E SISTEMAS
Índice Adicionando a tag HTML em seu site Pág. 1 Customização da aparência da tag HTML Pág. 2 Passando valores para os campos do formulário do cliente no P-Atendimento Pág. 2 Passando valores dinâmicos
Leia maisTutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.
Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT. PÁGINA: 2 de 21 Nenhuma parte deste documento pode ser utilizado ou reproduzido, em qualquer meio
Leia maisPASSO-A-PASSO PARA USUÁRIO DO MOODLE
PASSO-A-PASSO PARA USUÁRIO DO MOODLE Tornando-se um usuário No ambiente Moodle alunos e tutores são usuários do sistema. Assim, o primeiro passo, para todos, é tornar-se usuário. Este manual é dirigido
Leia maisCSS - Parte 02. Prof. Marciano dos Santos Dionizio
CSS - Parte 02 Prof. Marciano dos Santos Dionizio Imagens de fundo [backgroundimage] A propriedade CSS background-image é usada para definir uma imagem de fundo. Usaremos a imagem de uma borboleta para
Leia maisAdapti - Technology Solutions www.adapti.net Leonor cardoso nº 331 Fone : (041) 8844-7805 81240-380 Curitiba - PR MANUAL DO USUÁRIO
MANUAL DO USUÁRIO 1 Índice Administração de Documentos...2 Lista de documentos criados...3 Criando um novo documento...3 Barra de ferramentas do editor...4 Editando um documento...7 Administrando suas
Leia mais