Dreamweaver CS6. Autor(a): Daniel Furtado Camargo Atualização: Aline Alves Salles Código: A

Tamanho: px
Começar a partir da página:

Download "Dreamweaver CS6. Autor(a): Daniel Furtado Camargo Atualização: Aline Alves Salles Código: 141012A"

Transcrição

1

2

3 Dreamweaver CS6 Autor(a): Daniel Furtado Camargo Atualização: Aline Alves Salles Código: A Julho/2013 Copyright 1996/2013, NEWEDUCATION Sistema de Ensino para Educação Profissional. Todos os direitos reservados desta publicação foram reservados na forma da lei à NEWEDUCATION Sistema de Ensino para Educação Profissional.Proibida qualquer reprodução parcial ou total, seja mecânica, eletrônica, fotocópias, gravação ou outros meios, sem prévia autorização por escrito da NEWEDUCATION Sistema de Ensino para Educação Profissional.

4 Apresentação O Adobe Dreamweaver CS6 é um excelente editor profissional de HTM L para criação de sites para Web. Ele oferece facilidade para projetar, desenvolver e gerenciar sites. Através de um ambiente visual amigável o Adobe Dreamweaver CS6 permite criar sites complexos de forma rápida sem a necessidade de escrever uma linha de código. Na versão CS6 a Adobe incluiu várias ferramentas e recursos que são essenciais para tornar-se um profissional da área. A nova interface de desenvolvimento do software agiliza o trabalha ganhando velocidade na produção. O aprimoramento do recurso CSS no Adobe Dreamweaver CS6 trás agilidade para todo e qualquer tipo de site. O Adobe Dreamweaver CS6 permite construir aplicativos dinâmicos para Web com suporte para bancos de dados, porém neste material vamos trabalhar apenas com o design de sites. HTML (Hypertext Markup Language ou Linguagem de Marcação de Hipertexto) é a língua mãe para a publicação de hipertexto na World Wide Web. Representando um formato não proprietário baseado em SGM L (Standard Generalized M arkup Language - Padrão Genérico para Linguagens de M arcação), o HTM L pode ser criado e processado por uma ampla gama de ferramentas, desde simples editores de texto até ferramentas de autoria sofisticadas. Uma breve história sobre HTML A linguagem HTM L foi originalmente criada por Tim Berners-Lee quando ele trabalhava como pesquisador para o CERN e popularizada pelo aparecimento do browser M osaic criado por M arc Andreessen quando ele estudava na Universidade de Illinois. Durante os anos noventa a linguagem espalhou-se com o crescimento explosivo da Web, expandindo-se de várias maneiras. O fato de o HTM L depender de autores de páginas e de vendedores que compartilhassem as mesmas convenções acabou motivando o trabalho conjunto na criação de especificações para a linguagem. A primeira versão da linguagem HTML surgiu em 1992, seguida do HTML+, em Em novembro de 95 foi criado o HTML 2.0 sob a direção da EITF (Internet Engineering Task Force) com o objetivo de codificar práticas já comuns na época. Embora nunca tivessem alcançado um consenso geral nas discussões sobre padrões, estes rascunhos levaram à adoção de uma faixa de novas características. Os esforços do grupo de trabalho do Consórcio WWW para codificar práticas comuns em voga até o ano de 1996 resultaram no HTML 3.2, especificado em janeiro de 97. Atualmente o HTML se encontra na versão 5. Grande parte das pessoas concorda que: os documentos HTM L deveriam trabalhar bem em diferentes browsers e em diferentes plataformas; Uma vez conseguido estes objetivos os desenvolvedores de conteúdo economizariam tempo e dinheiro precisando desenvolver somente uma versão do documento. Versões Existe um grupo voltado para buscar um mínimo de padronização na Internet, especificamente na World Wide Web. Este grupo é chamado Word Wide Web Consortium ou W3C e pode ser encontrado no endereço O W3C produz o que é conhecido como "Recomendações" para HTML. São especificações criadas pelos grupos de trabalho W3C e votadas pelos Membros do Consórcio. Uma Recomendação W3C indica que foi alcançado consenso entre os membros do consórcio para determinada especificação, ou seja, esta é apropriada para uso geral. No momento em que este material está sendo desenvolvido, HTML 4.01 é recomendada como a versão mais atual da linguagem, trazendo uma série de novas características: Suporte a style sheets ou folhas de estilo: é possível controlar cores, fontes e layout das páginas Web através de uma folha de estilo. Características de internacionalização: o HTM L consegue tratar texto escrito da direita para a esquerda, como por exemplo, texto em árabe e hebraico. Isto é conseguido através do atributo LANG que pode ser usado com vários marcadores para ajudar o browser a exibir o texto de uma maneira apropriada à linguagem em questão. Características de acessibilidade: alguns usuários utilizam-se de sintetizadores de voz ou leitores de Braile quando navegam pela Web. HTM L 4 inclui características que fazem a Web mais acessível a quem tem problemas de visão ou outras deficiências. XHTML: O XHTML, ou extensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML. Combina as tags de marcação HTML com regras da XM L; este processo de padronização tem em vista a exibição de páginas Web em diversos dispositivos (televisão, palm, celular, etc.). A intenção é melhorar a acessibilidade. O XHTM L consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas. O HTML não consegue esta implementação. No entanto, não existem muitas diferenças entre o HTML e o XHTML. Para verificar se uma página XHTM L está bem construída, o melhor método é validar o código através de uma aplicação Web disponibilizada pela W3C. Objetivos Apresentar o novo ambiente de trabalho da linha CS6 Ensinar a criar e definir sites que permitem administrar e publicar com facilidade. Utilizar as ferramentas para criação de layouts básicos e avançados. Trabalhar com CSS, modelos e formulários. Apresentar os recursos de comportamentos e camadas. Criar um site durante este módulo. Apresentação básica do HTML e CSS. Ensinar as tags HTML. Ensinar as propriedades CSS. Ensinar Web Standards Criar um Web Site completo.

5 Unidade I - Introdução Aula 01 - Interface do Dreamweaver CS6 O que há de Novo? Layout da Área de Trabalho Tela Inicial Elementos da Área de Trabalho Aula 02 - Configuração do Site Definindo um Site Estrutura do Site Criando um Site Local Abrindo um Site Local Adicionando Nova Pasta ao Site Local Atividades

6 Aula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos serviços on-line apresentados pelo CS6 aonde é possível verificar páginas WEB e conteúdo local utilizando de múltiplas visualizações. Business Catalyst - serviço que permite realizar criação de sites simples até aos mais complexos. Ativar e Desativar CSS - recurso que permite ativar e desativar o CSS no layout criado. Layout da Área de Trabalho O Dreamweaver CS6 fornece três opções de layout da área de trabalho: Código - as janelas de documento mostram a visualização de código como padrão e os grupos de painéis estão encaixados à esquerda. Este layout é recomendado para programadores. Dividir - recomendado ao utilizar dois monitores. As janelas do documento e o inspetor de propriedades ficam no monitor primário e todos os painéis ficam no monitor secundário. Design - é a maneira que será utilizada neste curso. As janelas de documento e os painéis estão integrados em uma janela com os grupos de painéis encaixados à direita. Este layout é recomendado para o trabalho como web designer. Para alterar o layout da área de trabalho: Tela Inicial No menu Janela / Layout do espaço de trabalho,escolha o layout entre as três opções. Ao iniciar o Dreamweaver CS6 é exibida uma Tela Inicial que permite a criação de um novo arquivo ou abrir um já existente, apenas clicando nas opções. Caso você não queira que essa Tela Inicial seja exibida, marque a opção Não Mostrar Novamente na parte inferior esquerda dessa tela. Para exibir a tela inicial: No menu Editar / Preferências, escolha a categoria General e marque Mostrar tela de boas-vindas. É necessário fechar e abrir o Dreamweaver CS6 para que a alteração seja aceita. Tela Inicial do Adobe Dreamweaver CS6 Elementos da Área de Trabalho Área de trabalho do Dreamweaver CS6

7 A. Barra de Menus; B. Barra de Ferramentas; C. Janela do Documento; D. Alternador da Área de Trabalho; E/I. Grupos de Painéis; F. Estilos CSS; G. Seletor de Tags; H. Inspetor de Prioridades. Barra de Menus Contém todos os comandos do Dreamweaver CS6. Menu do Adobe Dreamweaver CS6 Arquivo: opções de manipulação de arquivos, como abrir, fechar e salvar; Editar: opções de manipulação do arquivo, como copiar, cortar, colar, desfazer editar preferências do software; Exibir: é possível configurar a visualização do documento inserir réguas, além de opções de zoom; Inserir: permite adicionar à página, imagens, tabelas, links, formulários, etc.; Modificar: possibilita configurar as propriedades de uma página, opções de templates, imagens, entre outros; Formatar: configuram-se tudo relacionado a texto como fonte, alinhamento, tamanho e cor; Comandos: é possível limpar tags de HTM L, formatar tabelas, organizar o código, etc.; Site: permite gerenciar a estrutura de um site, verificar links, relatórios, etc.; Janela: nesse menu estão todas as opções relacionadas à janela do Dreamweaver CS6 como barra de inserção, inspetor de propriedade, comportamento e opções de layout; Ajuda: nesse menu estão os arquivos e tutorias de ajuda. Barra de Ferramentas A Barra de Ferramentas oferece várias facilidades para criação de páginas (como títulos e visualização de arquivos). O documento é o local onde é construída a página. O documento e a barra de ferramentas são apresentados quando se edita uma página. Por isso, clique no menu Arquivo / Novo escolha Página em Branco/HTML e clique no botão Criar. Barra de ferramentas A Barra de Ferramentas contém vários itens: Código, Dividir, Design, Dinâmica, Título, Gerenciador de Arquivos e Auxílios Visuais. Código: exibe o código-fonte; Dividir: visualiza o código-fonte e o projeto (Design) na Área de Trabalho; Design: exibe o projeto; Validação da W3C: realiza a validação da página na w3c (gera uma imagem com certificado de qualidade); Gerenciador de Arquivos: gerenciador de arquivos; Visualizar/depurar no navegador: exibe o documento em um navegador predefinido (F12); Ao criar documentos no Dreamweaver CS6 o código HTM L é gerado automaticamente. Para exemplificar isso digite "Brasil Educação" na Área de Trabalho e clique no modo Código e veja o "ç" e o "~" como ficaram; Várias Telas: alteração do tamanho da página; Atualizar: atualização da página; Título: define um título para a página (<title> </title>). Janela do Documento Visualiza o código-fonte e o projeto (Design) na Área de Trabalho, esta opção só se torna válida quando colocamos na barra de ferramentas o modo Dividir. Ele faz com que tudo o que eu já esteja fazendo no código fonte, o mesmo já mostre o resultado de como será a página. Design Altera o modo de visualização da página principal, podendo escolher diferentes modelos tais como. App Developer, App Developer Plus, Classic, Coder, Coder Plus, Designer, Designer Compact, Dual Screen, Reset 'Designer', New WorkSpace, Manage WorkSpaces. Vale lembrar que este modo de visualização auxilia cada tipo de atividade que você executará, já que as configurações da tela inicial são alteradas da maneira de distribuição mas não na funcionalidade. Caso queira assistir um tutorial com diferentes áreas de trabalho acesse o link: Painel Os painéis podem ser encaixados e combinados conforme a sua necessidade. São exibidos na lateral direita do Dreamweaver CS6. O Painel possui abas sendo elas: Painel Inserir, estilo CSS e Arquivo, para expandir basta dar um duplo clique a section correspondente. Painel de Inserir Este Painel possui diversos tipos de objetos, como tabelas, comentários, cada um deste objetos é uma tag do HTM L, que são colocadas conforme são inseridas no

8 corpo da página. Painel de Inserir Hyperlink - criação de links; Link de - criação de campo para enviar s; Âncora com nome - criação de uma âncora; Régua horizontal - inserção de uma linha horizontal; Tabela - criação de tabelas; Inserir tag div - inserção de divisórias; Imagens - inclusão de imagens; Mídia - inclusão de vídeos; Widget - inclusão de janelas, botões, menus, ícones, barra de rolagem, etc.; Data - inclusão de datas Inclusão do servidor - inclusão de serviços; Comentário - comentários; Título (M eta, Palavras-chave, Descrição, Atualiza, Base, Link) - inserção de descrição, links; Script (Script, Nenhum script) - scripts de utilização; Modelos -edita e cria um novo modelo, regiões editáveis, repetitivas e opcional; Seletor de tags - escolhas de diferentes Tags. Estilo CSS No painel CSS você consegue verificar os estilos do CSS utilizado na criação da página, como por exemplo, quais as regras e as propriedades. Painel de Estilos CSS Resumo para seleção - resumo da seleção; Regras - regras adotadas do CSS; Propriedades - propriedades do CSS. Painel Arquivos Faz o gerenciamento dos arquivos e pastas, servindo como um atalho na inserção dos dados desejados que estejam arquivados no computador, ele permite acessar todos os arquivos e pastas do seu HD (Disco Local).

9 Painel de Arquivos Na seção você escolhe qual diretório vai acessar e abaixo em Arquivos Locais ele mostra as pastas e arquivos contidos neste diretório. Seletor de Tags A Barra de Status oferece várias facilidades para localizar e editar alguma tag - além do tamanho da janela. Barra de Status A Barra de Status contém vários itens: seletor de tags, tamanho da janela e tamanho do documento e tempo estimado. Seletor de tags: exibe as tags dos objetos selecionados; Selecionar/Mover/Zoom: utilizado para alternar o modo de seleção do Dreamweaver. É possível também modificar o tamanho dos objetos exibidos no documento (apenas a visualização é alterada). Tamanho da Janela: permite definir o tamanho da janela configurando-a para ser compatível aos diversos tamanhos de monitores e também nas dimensões atuais da janela do documento (em pixels); Tamanho do documento e tempo estimado : mostra o tamanho do documento incluindo os arquivos dependentes. M ostrando o tempo estimado para carregá-lo no navegador. Por padrão é calculado o tempo de download baseado em um modem de 56 Kb; Redimensionar Janela Ao clicar no Tamanho da Janela exibe o menu pop-up com diversas opções. A janela da Área de Trabalho não deve estar maximizada, pois desta forma as opções de tamanho não estarão ativas. O tamanho da janela é fornecido como as dimensões internas da janela do navegador sem bordas, enquanto que o tamanho do monitor está listado entre parênteses. Sendo assim, a opção 536 x 196 (640 x 480, padrão), por exemplo, será o tamanho da janela a ser visualizada na resolução 640 x 480 pixels. Editar Tamanho da Janela Ao clicar no Editar/Preferências é aberta a caixa de diálogo Preferências: Janela Preferências clique em quaisquer valores de Largura e/ou Altura na lista Tamanhos de Janela e digite um novo valor; clique no campo Descrição para inserir um texto descritivo sobre o tamanho que acaba de ser definido; também é possível incluir um novo tamanho, colocando o cursor no espaço em branco abaixo do último valor. Nesta caixa também é possível configurar: Velocidade de Conexão: determina a velocidade da conexão (em kilobits per second) utilizada no cálculo do tamanho de download. Enquanto o tamanho de download da página é exibido na Barra de Status, o tamanho das imagens é exibido no Inspetor de Propriedade, quando uma imagem é selecionada. Propriedades O inspetor de propriedades é uma das áreas mais utilizadas, pois permite verificar e editar as propriedades de qualquer objeto selecionado, tanto no modo projeto como no modo código. A maioria das alterações feitas nas propriedades é imediatamente aplicada à janela do documento. O tipo de elemento selecionado determinará as propriedades que aparecerão no inspetor de propriedades. As propriedades exibidas inicialmente para cada elemento são as mais comuns.

10 Inspetor de Propriedades

11 Aula 02 - Configuração do Site Definindo um Site Um dos principais recursos do Dreamweaver é o seu sistema de organização de páginas - importante para que no momento da publicação não exista nenhum problema. Para que seja possível controlar as alterações, criar links, utilizar o ftp e mesmo editar as páginas html, é necessário criar um site. Antes mesmo de o Dreamweaver entrar em cena, alguns detalhes devem ser acertados: Objetivo: imagine qual será o objetivo do site. Isso o ajudará na criação e desenvolvimento; Público-alvo: quem acessará este site. Esta e outras perguntas o ajudarão a descrever melhor seu consumidor final; Lápis e papel na mão: crie um esboço, desenhe as várias páginas imaginando o seu visual na tela, posição das fotos, textos, títulos, etc.; Coleta de informações: faça um estudo prévio, marque reuniões com o seu cliente, converse e discuta soluções com a equipe de desenvolvimento, pesquise outras fontes de informações; Proposta, contrato e cronograma : a proposta detalha todo o projeto que pretende executar, tempo e custo. O contrato é um instrumento legal de comum acordo entre as duas partes. Elabore um cronograma de desenvolvimento onde será possível acompanhar as etapas do trabalho. Definir estes itens poupa tempo, organiza e acelera o processo. Estrutura do Site A organização do site facilita o entendimento e economiza tempo. Para configurar um site comece criando uma estrutura de pastas locais em disco. É importante que esta estrutura fique bem desenvolvida, pois ela será a mesma publicada no servidor. Algumas dicas ajudarão no desenvolvimento: Classifique em categorias: coloque informações relacionadas, crie e organize bem as pastas dividindo-as por tema ou categoria; Pastas de sons e imagens: para facilitar a localização de imagens e sons é conveniente criar pastas separadas; Utilize a mesma estrutura: o site local deve ter a mesma estrutura do site remoto (servidor), desta maneira ficará mais fácil à atualização dos dados; Nomenclatura: utilize sempre letras minúsculas, sem acentuação e espaços em branco nos nomes de arquivos e pasta que serão publicados. Dessa forma evitam-se problemas na hora da publicação; Tudo no mesmo lugar: crie pastas para tudo relacionado ao seu projeto, mesmo o que não será publicado, como s, arquivos originais (PNG, FLA) e o conteúdo; Lixeira: crie uma pasta para jogar arquivos não aprovados. Se o seu cliente mudar de ideia, o arquivo não está perdido definitivamente. A estrutura do site no Adobe Dreamweaver CS6 é fundamental para o desenvolvimento de um projeto, pois a partir disso todos os arquivos serão gerenciados por ele. Com isso você terá inúmeras facilidades como: mover um arquivo de uma pasta sem ter que refazer os links do mesmo e verificar links quebrados. Crie um padrão para as pastas que não serão publicadas. Nesse exemplo, estão com letra maiúscula. Criando um Site Local No Windows Explorer ou no software que achar melhor crie a seguinte estrutura de pastas: Crie uma pasta com o nome DW_CS6. No Adobe Dreamweaver CS6 clique no menu Site / Gerenciar Sites. Gerenciar Site clique no botão Novo site.

12 É apresentado um assistente para a criação da estrutura do site: Configuração do site para DW_CS6 Para o Dreamweaver CS6, site é um conjunto de arquivos e pastas, correspondendo ao website no servidor. preencha o campo Nome do site: com o nome do site: DW CS6; preencha o campo Pasta do site local: este é o local aonde o site será salvo; clique no botão Salvar. Painel Arquivos O Painel Arquivos exibe a pasta do site atuando como um gerenciador de arquivos, permitindo copiar, colar, excluir, mover e abrir arquivos e pastas da mesma maneira que o Windows Explorer. Como acabou de criar o site, ele estará vazio. Você pode criar várias estruturas de site dentro do Adobe Dreamweaver CS6. Exemplo disso é desenvolver um site para uma empresa de calçado e outro site para um médico. Ambos os sites serão desenvolvidos no Adobe Dreamweaver CS6, mas cada um terá a sua estrutura própria. Para isso basta seguir as instruções Criando um site local para a empresa de calçado e depois para o médico. Painel Files com arquivos e pastas Abrindo um Site Local No Adobe Dreamweaver CS6: clique no menu Site / Gerenciar Sites; marque a estrutura que deseja trabalhar e clique em Fechar. Ou, utilize o seletor de sites: Removendo um Site Local Quando não se deseja mais trabalhar com um site no Adobe Dreamweaver CS6 é possível retirá-lo da lista de sites sem eliminar os arquivos e pastas. Entretanto, quando um site é removido, todas as informações de configurações são perdidas. No Adobe Dreamweaver CS6: clique no menu Site / Gerenciar Sites; marque a estrutura que deseja remover e clique em Excluir o(s) site(s) selecionado(s) no momento. Modo Avançado É possível criar um site no Dreamweaver sem a utilização do assistente.

13 Também é interessante definir a pasta padrão para as imagens utilizadas no site. Para isso, basta clicar no ícone ao lado " Pasta padrão de imagens" e defina a pasta referente ao seu site. Abrindo um Site Local É importante ao abrir o Adobe Dreamweaver CS6 indicar qual será a estrutura de site local usada. Se houver mais de uma estrutura criada: clique no menu Site / Gerenciar Sites; marque DW_CS6 e clique em Concluído. Outra forma de indicar a estrutura do site local: clique no menu Janela / Arquivo (Caso não esteja aberto este painel); clique na caixa de lista da esquerda e escolha Dreamweaver CS6. Adicionando Nova Pasta ao Site Local A criação de pastas permite organizar as informações. Crie uma pasta com nome aula_01 na pasta raiz DW_CS6. A nova pasta será criada dentro da pasta selecionada. Certifique-se de que pasta raiz Dreamweaver CS6 esteja selecionada no Painel Arquivo: clique com o botão direito dentro do Painel Arquivo e escolha Nova Pasta; digite o nome da nova pasta: aula_01.

14 Atividades 1. Durante o módulo do Adobe Dreamweaver CS6 serão construídas algumas páginas utilizando os conhecimentos obtidos em cada aula. Essas páginas estarão divididas em subpasta dentro da pasta raiz DW_CS6. Ao final será feita uma página inicial que integrará todas as páginas desenvolvidas neste módulo. É importante que a pasta raiz DW_CS6 já esteja criada dentro Adobe Dreamweaver CS6. Caso não esteja, volte para o item Criando um site local da Aula Crie subpastas para imagens, Arquivos e Lixeira dentro da sua pasta do projeto.

15 Unidade II - Elementos Básicos de HTML e Desenvolvimento do Site Aula 03 - Página Páginas XHTM L Criando uma Página em Branco Texto Semanticamente Correto Propriedades da Página Atividades Aula 04 - Criação de uma página básica Conceitos Básicos Estrutura de uma Página Tipo de Documento Aula 05 - Texto Editor de HTML do Tipo WYSIWYG Inspetor de Propriedade Barra de Inserção Aula 06 - Atividades Aula 07 - A Linguagem CSS CSS Por que usar CSS em Páginas Web? Conceitos Básicos Métodos de Uso das folhas de Estilo M edidas Utilizadas Cores Definindo o Tipo de CSS Propriedades de Texto Aula 08 - Formatação com CSS Estilo CSS Redefinição de Tags Propriedades do CSS Alterando Estilos CSS Atividades Aula 09 - Classes em CSS Inserindo um CSS Personalizado Aplicando um CSS Editando um CSS Importando um CSS Atividades Aula 10 - Abreviações Comuns do CSS Abreviações Abreviação de Font Abreviação de M argin e Padding Abreviação de Background Abreviação de Border Aula 11 - Tags, Classes e Seletores Especiais em CSS Principais usos de Tags, Classes e Seletores Especiais em CSS Elementos Filhos Declaração de M últiplas Tags e Classes Seletores de Atributos Específicos Aula 12 - Imagem Formatos de Arquivos de Imagem Inserindo uma Imagem Inspetor de Propriedades Imagem de Fundo

16 Aula 13 - Atividades Aula 14 - Tabelas O Uso de Tabelas Inserindo uma Tabela Selecionando uma Tabela ou uma Célula Propriedades da Tabela Propriedades da Célula Editando uma Tabela Importando Dados de Tabela Aula 15 - Atividades Aula 16 - Link Tipos de Link Inspetor de Propriedade Atividades

17 Aula 03 - Página Páginas XHTML No Dreamweaver CS6 o formato padrão de documento é o XHTM L 1.0 Transitional. Esse formato é compatível com praticamente 100% dos navegadores de internet atuais e possui algumas diferenças de código (e visualização) com os documentos produzidos em versões mais antigas do Dreamweaver. Criando uma Página em Branco Para criar um documento em branco, com as marcações iniciais do XHTM L: escolha Arquivo / Novo. É apresentada uma caixa de diálogo em que o usuário poderá escolher o tipo de documento. Criando um novo documento escolha a categoria Página em Branco/HTML e <nenhum(a)>; clique no botão Criar. Outra forma de criar um documento em branco: no item Criar Novo da Tela Inicial escolha HTML. Criando um novo documento O Adobe Dreamweaver CS6 criará uma página com as tags básicas. Isso pode ser percebido clicando no ícone Código na Barra do Documento ou menu Exibir / Código. Mesmo uma página em branco já vem preparada com o html padrão Texto Semanticamente Correto Existe uma preocupação muito grande na produção de textos com a semântica correta em HTML. Esse tipo de texto é mais intercambiável entre serviços de web (como o RSS). Um texto formatado de maneira correta é mais reconhecível por navegadores, mais simples de ser editado e com a possibilidade de ser exibido de maneira diferente por diversos web sites, que podem aplicar os seus próprios estilos de texto (formatando assim a aparência conforme o planejamento de design do próprio web site).

18 Algumas dicas para a criação de um texto correto: substitua todas as tags Font por estilos CSS; sempre respeite a hierarquia de títulos. Exemplo: só utilize um H3 dentro de um H2, e não depois de um H1; não crie mais do que um título principal (h1) na sua página; o negrito é utilizado para criar destaques. O itálico para citações e palavras de língua estrangeira; parágrafos são unidades de composição e não "textos separados por espaço"; o texto semanticamente correto não tem "aparência", apenas conteúdo; as definições de cor, alinhamento, fundo e tipografia são declaradas em CSS; escrever algo semântico é utilizar uma tag no contexto certo para a qual ela foi criada. Veja um exemplo de texto com a formação correta: <div> <h1>htm L</h1> <p><b>htm L</b> (acrônimo para a <i>hypertext M arkup Language</i>, que significa Linguagem de M arcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web</p> <h2>história</h2> <p><b>tim Berners-Lee</b> criou o HTM L original (e outros protocolos associados como o HTTP) em uma estação <i>nextcube</i> usando o ambiente de desenvolvimento NeXTSTEP.</p> <p>as primeiras versões do HTM L foram definidas com regras sintáticas flexíveis, o que ajudou aqueles sem familiaridade com a publicação na Web. Atualmente a sintaxe do HTM L é muito mais rígida, permitindo um código mais preciso. Através do tempo, a utilização de ferramentas para autoria de HTM L aumentou, assim como a tendência em tornar a sintaxe cada vez mais rígida. Apesar disso, por questões histórias, os navegadores ainda hoje conseguem interpretar páginas web que estão longe de ser um código HTM L válido.</p> <h2>etiquetas</h2> Todo documento HTM L apresenta,<b>etiquetas</b>, elementos entre parênteses angulares (sinais de maior e menor) (< e >); esses elementos são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:<br> <i><etiqueta>...</etiqueta></i></p> <p>isso é necessário porque as etiquetas servem para definir a formatação de uma porção do documento, e assim marcamos onde começa e termina o texto com a formatação especificada por ela.</p> </div> Esse código gera algo como: Propriedades da Página Os documentos HTM L possuem algumas propriedades básicas que, nessa versão do Dreamweaver, são formatadas através da linguagem CSS. Num projeto de web site profissional essas formatações são colocadas em uma folha de estilos separada do HTM L (esse assunto será tratado posteriormente). Escolha o menu Modificar/ Propriedades da Página. Aparência CSS: define a aparência do documento CSS. Aparência HTML: define a aparência do documento em HTM L. Links: define a aparência dos links. Cabeçalhos: define a aparência da tag Heading (<h1>...<h6>). Título/codificação: define a aparência do título (<title>) e codificação. Imagem de rastreamento: define a aparência da imagem de rastreamento. Aparência

19 Propriedades da página- Aparência (CSS) Fonte da página: configura a fonte que a página utilizará; Tamanho: configura o tamanho da fonte; Cor do texto: configura a cor da fonte; Cor do fundo: configura a cor do fundo para a página; Imagem de fundo: configura uma imagem de fundo para a página; Margem esquerda: configura a margem esquerda da página. Caso não queira margem, é necessário utilizar o valor zero; Margem superior: configura a margem superior da página. Caso não queira margem, é necessário utilizar o valor zero; Margem direita: configura a margem direita da página. Caso não queira margem, é necessário utilizar o valor zero; Margem Inferior: configura a margem do fundo da página. Caso não queira margem, é necessário utilizar o valor zero. Links Propriedades da página - Links Fonte do link: configura a fonte do link; Tamanho: configura o tamanho da fonte do link; Cor do link: configura a cor do link; Link de: configura a cor do link quando o cursor passar sobre ele; Links visitados: configura a cor do link já visitado; Links Ativos: configura a cor do link quando ele é clicado; Estilo sublinhado: configura o sublinhado do link; Sempre sublinhado; Nunca sublinhado; Mostrar sublinhado somente em sobreposição: quando o cursor passar sobre, mostra o sublinhado; Ocultar sublinhado em sobreposição: quando o cursor passar sobre, oculta o sublinhado. Cabeçalhos

20 Propriedades da página - Cabeçalhos Fonte do cabeçalho: configura a fonte da tag H1 até H6; Cabeçalho 1 ao cabeçalho 6: configura o tamanho e cor da fonte da tag H1 até H6. Título/Codificação Propriedades da Página- Titulo/codificação Título: configura o título da página; Tipo de documento (DTD): configura o tipo de documento; Codificação: configura a codificação da página, responsável pela forma como os acentos e caracteres especiais são inseridos no HTM L; Formulário de normalização: exibe o caminho da pasta raiz do site. Imagem de Rastreamento Propriedades da Página- Imagem de Rastreamento Imagem de rastreamento: configura uma imagem ao fundo, servindo de guia para a criação do layout; Transparência: configura a opacidade da imagem. Essa imagem de fundo é visível apenas dentro do Dreamweaver.

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 2 Continuação do Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 3 Capítulo 2 - Site do Dreamweaver

Leia mais

DESENVOLVIMENTO DE PÁGINAS PARA INTERNET

DESENVOLVIMENTO DE PÁGINAS PARA INTERNET UNIVERSIDADE ESTADUAL DE MARINGÁ PRÓ-REITORIA DE RECURSOS HUMANOS E ASSUNTOS COMUNITÁRIOS - PRH DIRETORIA DE RECURSOS HUMANOS - DRH DIVISÃO DE TREINAMENTO E DESENVOLVIMENTO TDE DESENVOLVIMENTO DE PÁGINAS

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 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 mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva Conceitos Fundamentais de Microsoft Word Professor Rafael www.facebook.com/rafampsilva Introdução É um editor de texto ou processador de texto? editores de texto: editam texto (assim como uma máquina de

Leia mais

Capítulo 7 O Gerenciador de Arquivos

Capítulo 7 O Gerenciador de Arquivos Capítulo 7 O Gerenciador de Arquivos Neste capítulo nós iremos examinar as características da interface do gerenciador de arquivos Konqueror. Através dele realizaremos as principais operações com arquivos

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

Conteúdo Programático do Web Design

Conteúdo Programático do Web Design Conteúdo Programático do Web Design O Ambiente Macromedia Dreamweaver Instalação do Dreamweaver Arquivos Utilizados na Apostila A Inicialização de Dreamweaver Área de Trabalho Dreamweaver Criação de uma

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

Manual de Uso Wordpress

Manual de Uso Wordpress Manual de Uso Wordpress Olá! Seja bem vindo ao igual. Agora você pode transmitir todas as notícias importantes da sua comunidade de forma mais simples e eficiente. Mas para que isso aconteça, primeiro

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

Leia mais

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 24/08/2011 No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

Leia mais

Word 1 - Introdução 1.1 - Principais recursos do word 1.2 - A janela de documento 1.3 - Tela principal

Word 1 - Introdução 1.1 - Principais recursos do word 1.2 - A janela de documento 1.3 - Tela principal Word 1 - Introdução O Word para Windows ou NT, é um processador de textos cuja finalidade é a de nos ajudar a trabalhar de maneira mais eficiente tanto na elaboração de documentos simples, quanto naqueles

Leia mais

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Aula 1 Desenvolvimento Web Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Plano de Aula Ementa Avaliação Ementa Noções sobre Internet. HTML

Leia mais

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word 1 Iniciando o Word 2010 O Word é um editor de texto que utilizado para criar, formatar e imprimir texto utilizado para criar, formatar e imprimir textos. Devido a grande quantidade de recursos disponíveis

Leia mais

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 13/AGO/2012 Sistema Gerenciador de Conteúdo Dinâmico No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

Leia mais

Barra de Títulos. Barra de Menu. Barra de Ferramentas. Barra de Formatação. Painel de Tarefas. Seleção de Modo. Área de Trabalho.

Barra de Títulos. Barra de Menu. Barra de Ferramentas. Barra de Formatação. Painel de Tarefas. Seleção de Modo. Área de Trabalho. Conceitos básicos e modos de utilização das ferramentas, aplicativos e procedimentos do Sistema Operacional Windows XP; Classificação de softwares; Principais operações no Windows Explorer: criação e organização

Leia mais

Manual de utilização do Portal Entrelace.org.br. William Oyama www.evisionbrasil.com.br

Manual de utilização do Portal Entrelace.org.br. William Oyama www.evisionbrasil.com.br Manual de utilização do Portal Entrelace.org.br William Oyama www.evisionbrasil.com.br Índice do tutorial 1 Portal entrelace.obr.br 2- Painel Administrativo 3- Informações Restritas 4- Acervo 5- Notícias

Leia mais

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3

Í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 mais

Dicas para usar melhor o Word 2007

Dicas para usar melhor o Word 2007 Dicas para usar melhor o Word 2007 Quem está acostumado (ou não) a trabalhar com o Word, não costuma ter todo o tempo do mundo disponível para descobrir as funcionalidades de versões recentemente lançadas.

Leia mais

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos.

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos. Ana Paula Ambrósio Zanelato anapaula@unitoledo.br Disciplina: Aplicações para Web Conteúdo Introdução; ; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores

Leia mais

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.

Bem- 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 mais

Microsoft Office FrontPage 2003

Microsoft Office FrontPage 2003 Instituto Politécnico de Tomar Escola Superior de Gestão Área Interdepartamental de Tecnologias de Informação e Comunicação Microsoft Office FrontPage 2003 1 Microsoft Office FrontPage 2003 O Microsoft

Leia mais

INTRODUÇÃO INICIANDO O WORD INSERIR TEXTO

INTRODUÇÃO INICIANDO O WORD INSERIR TEXTO SUMÁRIO 01 - INTRODUÇÃO 02 - INICIANDO O WORD 03 - INSERIR TEXTO 04 - SALVAR UM DOCUMENTO 05 - FECHAR UM DOCUMENTO 06 - INICIAR UM NOVO DOCUMENTO 07 - ABRIR UM DOCUMENTO 08 - SELECIONAR TEXTO 09 - RECORTAR,

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Customização Acionar modo debug 3 Propriedades Básicas 10 Arquivos de Customização 15 2 Customização Intermediário Com a definição do posicionamento

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Web Design Aula 02: HTML

Web Design Aula 02: HTML Web Design Aula 02: HTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Introdução Conceitos HTML Primeira Página Identação Incluindo o título Salvando a página Vizualizando

Leia mais

Centro de Computação - Unicamp Gerência de Atendimento ao Cliente (e-mail:apoio@turing.unicamp.br) Sumário

Centro de Computação - Unicamp Gerência de Atendimento ao Cliente (e-mail:apoio@turing.unicamp.br) Sumário Sumário Conceitos Microsoft Access 97... 01 Inicialização do Access... 02 Convertendo um Banco de Dados... 03 Criando uma Tabela... 06 Estrutura da Tabela... 07 Propriedades do Campo... 08 Chave Primária...

Leia mais

Tutorial 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. 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 mais

MICROSOFT WORD 2007. George Gomes Cabral

MICROSOFT WORD 2007. George Gomes Cabral MICROSOFT WORD 2007 George Gomes Cabral AMBIENTE DE TRABALHO 1. Barra de título 2. Aba (agrupa as antigas barras de menus e barra de ferramentas) 3. Botão do Office 4. Botão salvar 5. Botão de acesso à

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail

Leia mais

Flex. MANUAL DE USO DA FERRAMENTA FLEX O Flex como gerenciador de conteúdo

Flex. MANUAL DE USO DA FERRAMENTA FLEX O Flex como gerenciador de conteúdo 2011 MANUAL DE USO DA FERRAMENTA FLEX O Flex como gerenciador de conteúdo Aprenda como é simples utilizar a ferramenta Flex como seu gerenciador de conteúdo online. Flex Desenvolvido pela ExpandWEB 31/01/2011

Leia mais

Versão 2.2.0 PIMACO AUTOADESIVOS LTDA. Assistente Pimaco + 2.2.0. Ajuda ao Usuário

Versão 2.2.0 PIMACO AUTOADESIVOS LTDA. Assistente Pimaco + 2.2.0. Ajuda ao Usuário Versão 2.2.0 PIMACO AUTOADESIVOS LTDA. Assistente Pimaco + 2.2.0 Ajuda ao Usuário A S S I S T E N T E P I M A C O + 2.2.0 Ajuda ao usuário Índice 1. BÁSICO 1 1. INICIANDO O APLICATIVO 2 2. O AMBIENTE DE

Leia mais

Informática Aplicada. Aula 2 Windows Vista. Professora: Cintia Caetano

Informática Aplicada. Aula 2 Windows Vista. Professora: Cintia Caetano Informática Aplicada Aula 2 Windows Vista Professora: Cintia Caetano AMBIENTE WINDOWS O Microsoft Windows é um sistema operacional que possui aparência e apresentação aperfeiçoadas para que o trabalho

Leia mais

Professor Paulo Najar www.aprenderdigital.com.br

Professor Paulo Najar   www.aprenderdigital.com.br ~ 1 ~ O QUE É O BROFFICE? Broffice.org é o nome de um conjunto de programas de escritório livre (free software), disponível na internet gratuitamente (no site www.broffice.org) que oferece ferramentas

Leia mais

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes Desenvolvimento Web Introdução a XHTML Prof. Bruno Gomes 2014 Introdução HTML e XHTML Estrutura básica do documento DTDs Validação do documento Exercícios HTML e XHTML HTML (Hipertext Markup Language)

Leia mais

Prática 3 Microsoft Word

Prá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 mais

Microsoft Word INTRODUÇÃO

Microsoft 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 mais

Guia de Início Rápido

Guia 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 mais

MANUAL DO NVDA Novembro de 2013

MANUAL DO NVDA Novembro de 2013 MANUAL DO NVDA Novembro de 2013 PROJETO DE ACESSIBILIDADE VIRTUAL Núcleo IFRS Manual do NVDA Sumário O que são leitores de Tela?... 3 O NVDA - Non Visual Desktop Access... 3 Procedimentos para Download

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor 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 mais

Sumário. 1 Tutorial: Blogs no Clickideia

Sumário. 1 Tutorial: Blogs no Clickideia 1 Tutorial: Blogs no Clickideia Sumário Introdução... 2 Objetivos... 2 Instruções para utilização do Tutorial... 2 Acesso ao Portal e a Home Blog... 3 Página Inicial da área do Blog... 4 Apresentação da

Leia mais

Continuação. 32. Inserir uma imagem da GALERIA CLIP-ART

Continuação. 32. Inserir uma imagem da GALERIA CLIP-ART Continuação 32. Inserir uma imagem da GALERIA CLIP-ART a) Vá para o primeiro slide da apresentação salva no item 31. b) Na guia PÁGINA INICIAL, clique no botão LAYOUT e selecione (clique) na opção TÍTULO

Leia mais

PROJETO DE ACESSIBILIDADE VIRTUAL DO IFRS Manual Rápido do NVDA. Sumário

PROJETO DE ACESSIBILIDADE VIRTUAL DO IFRS Manual Rápido do NVDA. Sumário PROJETO DE ACESSIBILIDADE VIRTUAL DO IFRS Manual Rápido do NVDA Sumário O que são leitores de Tela?... 1 O NVDA - Non Visual Desktop Access... 1 Procedimentos para Download e Instalação do NVDA... 2 Iniciando

Leia mais

Tutorial Campus Online Gerenciando Conteúdo (Textos)

Tutorial Campus Online Gerenciando Conteúdo (Textos) Tutorial Campus Online Gerenciando Conteúdo (Textos) Para a gerência de conteúdo no site do Campus Online, é utilizado um componente do Joomla, o K2. Este componente permite que o conteúdo seja gerenciado

Leia mais

LABORATÓRIO DE INTERNET FRONTPAGE

LABORATÓRIO DE INTERNET FRONTPAGE I LABORATÓRIO DE INTERNET FRONTPAGE Prof. Antonio Geraldo da Rocha Vidal II SUMÁRIO Introdução...3 Construindo um Web Site...4 Iniciando...4 Administrando o Site...5 Navegação...5 Trabalhando com Páginas...6

Leia mais

Google Drive: Acesse e organize seus arquivos

Google Drive: Acesse e organize seus arquivos Google Drive: Acesse e organize seus arquivos Use o Google Drive para armazenar e acessar arquivos, pastas e documentos do Google Docs onde quer que você esteja. Quando você altera um arquivo na web, no

Leia mais

Tutorial para Professores com as alterações do Ambiente Moodle 2.7

Tutorial para Professores com as alterações do Ambiente Moodle 2.7 Tutorial para Professores com as alterações do Ambiente Moodle 2.7 Prezados Professores, a atualização do ambiente Moodle da versão 2.5 para a versão 2.7 gerou algumas mudanças na interface visual do Moodle.

Leia mais

Aula 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/ 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 mais

6 Aplicações Ricas para Internet

6 Aplicações Ricas para Internet 6 Aplicações Ricas para Internet DESENVOLVIMENTO WEB II - 7136 6.1. Evolução das aplicações para web O crescente número de pessoas que usufruem da informatização das tarefas cotidianas, viabilizadas na

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento 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 mais

STI - Seção Técnica de Informática. Dreamweaver. DreamWeaver 1

STI - Seção Técnica de Informática. Dreamweaver. DreamWeaver 1 Dreamweaver DreamWeaver 1 Índice Introdução 1. Conhecendo a Área de Trabalho 1.1. Barra de Título 1.2. Barra de Menus 1.3. Guias 1.3.1 Guia "Common" 1.4. Barra de "Edição do Documento" 1.5. Painéis 1.6.

Leia mais

Sumário. Os Créditos que Faltavam Introdução

Sumário. Os Créditos que Faltavam Introdução Sumário Os Créditos que Faltavam Introdução Parte Um: Bem-vindo à Web Capítulo 1: Preparação para a web 9 Apresentação da World Wide Web 9 Navegadores 10 Servidores web 14 Planejamento de um website 15

Leia mais

Bem vindo ao ajuda do software QUICKFISH para criação de sites.

Bem vindo ao ajuda do software QUICKFISH para criação de sites. Bem vindo ao ajuda do software QUICKFISH para criação de sites. SUMÁRIO 1 Exemplo de site criado no software QUICKFISH...02 2 Salvando Seu Site...03 3 Publicando Seu Site...03 4 Visão inicial do Software

Leia mais

1. ACESSO AO SISTEMA. LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com.

1. ACESSO AO SISTEMA. LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com. Manual de uso 1. ACESSO AO SISTEMA LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com.br Após acessar o link acima, favor digitar seu LOGIN

Leia mais

Ferramenta para design de web site Macromedia Dreamweaver Fábio Fernandes

Ferramenta para design de web site Macromedia Dreamweaver Fábio Fernandes Ferramenta para design de web site Macromedia Dreamweaver Fábio Fernandes Em Abril de 2005, as duas maiores gigantes em desenvolvimento de software de web, gráfico e multimídia design se juntaram: a Adobe

Leia mais

SisLegis Sistema de Cadastro e Controle de Leis

SisLegis Sistema de Cadastro e Controle de Leis Sistema de Cadastro e Controle de Leis Desenvolvido por Fábrica de Software Coordenação de Tecnologia da Informação Pág 1/22 Módulo: 1 Responsável: Desenvolvimento Ti Data: 01/11/2012 Versão: 1.0 Empresa:

Leia mais

Adapti - Technology Solutions www.adapti.net Leonor cardoso nº 331 Fone : (041) 8844-7805 81240-380 Curitiba - PR MANUAL DO USUÁRIO

Adapti - 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

Tutorial 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 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 mais

MÓDULO - I Manual Prático Microsoft Excel 2007

MÓDULO - I Manual Prático Microsoft Excel 2007 MÓDULO - I Manual Prático Microsoft Excel 2007 MÓDULO - I APRESENTAÇÃO... 1 AMBIENTE DE TRABALHO... 2 A folha de cálculo... 2 O ambiente de trabalho do Excel... 3 Faixas de Opções do Excel... 4 - Guia

Leia mais

Tutorial para Professores com as alterações do Ambiente Moodle 2.7

Tutorial para Professores com as alterações do Ambiente Moodle 2.7 Tutorial para Professores com as alterações do Ambiente Moodle 2.7 Prezados Professores, a atualização do ambiente Moodle da versão 2.5 para a versão 2.7 gerou algumas mudanças na interface visual do Moodle.

Leia mais

AULA 3: BrOffice Writer Numeração de páginas e outros comandos. Ao final dessa aula, você deverá ser capaz de:

AULA 3: BrOffice Writer Numeração de páginas e outros comandos. Ao final dessa aula, você deverá ser capaz de: AULA 3: BrOffice Writer Numeração de páginas e outros comandos Objetivo Ao final dessa aula, você deverá ser capaz de: Conhecer o controle de exibição do documento; Fazer a correção ortográfica do documento

Leia mais

Apostila de CmapTools 3.4

Apostila de CmapTools 3.4 Apostila de CmapTools 3.4 Índice Definição do software... 3 Criando um novo mapa... 3 Adicionando um conceito... 3 Alterando a formatação das caixas (Barra de Ferramentas Estilos Paleta Styles)... 7 Guia

Leia mais

Publicação web. Será ativado um assistente de publicação que lhe guiará em todas as etapas a seguir apresentadas.

Publicação web. Será ativado um assistente de publicação que lhe guiará em todas as etapas a seguir apresentadas. Publicação web Pré requisitos: Lista de questões Formulário multimídia Este tutorial tem como objetivo, demonstrar de maneira ilustrativa, todos os passos e opções que devem ser seguidos para publicar

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft OneNote 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Alterne entre a entrada por toque

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Menus Sobre a Navegação do Plone 3 Configurar Pastas 4 Visualização Padrão de Pastas 13 Conteúdo Dicas para um Conteúdo Claro 17 Ações de

Leia mais

Windows. Introdução. Introdução Sistema Operacional. Introdução Sistema Operacional. Introdução Sistema Operacional. Introdução Sistema Operacional

Windows. Introdução. Introdução Sistema Operacional. Introdução Sistema Operacional. Introdução Sistema Operacional. Introdução Sistema Operacional Windows Prof. Leandro Tonietto Cursos de Informática Unisinos Março-2008 O que é Sistema operacional? O que é Windows? Interface gráfica: Comunicação entre usuário e computador de forma mais eficiente

Leia mais

Introdução. http://www.youtube.com/watch?v=6gmp4nk0eoe

Introdução. http://www.youtube.com/watch?v=6gmp4nk0eoe Introdução http://www.youtube.com/watch?v=6gmp4nk0eoe Treinamento básico em software I Código HTML - Concebido por Tim Berners-Lee Berners-Lee atualmente mantém um blog que discute questões atuais sobre

Leia mais

Plano de Aula - Word 2010 Avançado - cód.5546 24 Horas/Aula

Plano de Aula - Word 2010 Avançado - cód.5546 24 Horas/Aula Plano de Aula - Word 2010 Avançado - cód.5546 24 Horas/Aula Aula 1 Capítulo 1 - Introdução aos Recursos Avançados do Word Aula 2 Capítulo 2 - Salvar e Proteger Documentos Aula 3 Capítulo 3 - Formatar Textos

Leia mais

OFICINA BLOG DAS ESCOLAS

OFICINA BLOG DAS ESCOLAS OFICINA BLOG DAS ESCOLAS Créditos: Márcio Corrente Gonçalves Mônica Norris Ribeiro Março 2010 1 ACESSANDO O BLOG Blog das Escolas MANUAL DO ADMINISTRADOR Para acessar o blog da sua escola, acesse o endereço

Leia mais

02 - Usando o SiteMaster - Informações importantes

02 - 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 mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual

Leia mais

VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo

VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo Introdução Recursos de acessibilidade principais Navegação usando

Leia mais

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):

Leia mais

XXIV SEMANA MATEMÁTICA

XXIV SEMANA MATEMÁTICA XXIV SEMANA ACADÊMICA DA MATEMÁTICA Minicurso: Produção de Páginas Web para Professores de Matemática Projeto de Extensão: Uma Articulação entre a Matemática e a Informática como Instrumento para a Cidadania

Leia mais

Mini manual para editar as informações no Portal bibliotecas.uff

Mini manual para editar as informações no Portal bibliotecas.uff Mini manual para editar as informações no Portal bibliotecas.uff Sumário 1.Sobre o Drupal 2.Como se logar 3.Inserindo conteúdo 4.Editando conteúdo 5.Alterando as notícias 6.Incluindo um serviço 7.Criando

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir HTML @wre2008 1 Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos

Leia mais

REITORA 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 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 mais

Manual WebAdmin News

Manual WebAdmin News Manual WebAdmin News 20/12/2008 Login: Com a integração das páginas de notícias ao site atual da empresa, você consegue publicar notícias e artigos com a cara da sua empresa, sem precisar conhecer os detalhes

Leia mais

7. Cascading Style Sheets (CSS)

7. 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 mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft OneNote 2013 apresenta uma aparência diferente das versões anteriores; desse modo, criamos este guia para ajudá-lo a minimizar a curva de aprendizado. Alternar entre o

Leia mais

Apostila Microsoft Word 2000

Apostila Microsoft Word 2000 Apostila Microsoft Word 2000 SUMÁRIO I. INTRODUÇÃO II. INSERIR TEXTO III. SALVAR UM DOCUMENTO IV. FECHAR UM DOCUMENTO V. INICIAR UM NOVO DOCUMENTO VI. ABRIR UM DOCUMENTO VII. SELECIONAR TEXTO VIII. RECORTAR,

Leia mais

Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web

Manual 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 mais

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o

Leia mais

Roteiro 7: Ferramentas de trabalho Editores de texto

Roteiro 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 mais

Manual de Utilização

Manual de Utilização Se ainda tiver dúvidas entre em contato com a equipe de atendimento: Por telefone: 0800 642 3090 Por e-mail atendimento@oisolucoespraempresas.com.br Introdução... 3 1. O que é o programa Oi Backup Empresarial?...

Leia mais

Introdução... 1. Instalação... 2

Introdução... 1. Instalação... 2 ONTE DO Introdução... 1 O que é IPP?... 1 Qual é a função de um software Samsung IPP?... 1 Instalação... 2 Requisitos do sistema... 2 Instalar o software Samsung IPP... 2 Desinstalar o software Samsung

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

Leia mais

CRIANDO TEMPLATES E LEGENDAS

CRIANDO 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 mais

Universidade Federal de Pelotas Conjunto Agrotécnico Visconde da Graça CAVG Disciplina: Informática Apresentação Gráfica

Universidade Federal de Pelotas Conjunto Agrotécnico Visconde da Graça CAVG Disciplina: Informática Apresentação Gráfica Apresentação Gráfica Microsoft Office Power Point 1 Sumário 1. MICROSOFT POWER POINT... 4 1.1. INICIANDO O MICROSOFT POWER POINT... 4 2. CONHECENDO A INTERFACE DO POWER POINT... 5 2.1. O DOCUMENTO DO POWER

Leia mais

1. Introdução a Microsoft Excel

1. Introdução a Microsoft Excel Introdução a Microsoft Excel 1. Introdução a Microsoft Excel 1.1. O que é Microsoft Excel Microsoft Excel é um software de planilha eletrônica produzido pela Microsoft Corporation, para o sistema operacional

Leia mais

MANUAL DO BLOG. Blog IBS

MANUAL DO BLOG. Blog IBS MANUAL DO BLOG Blog IBS Seja bem vindo! O Blog é um website dinâmico, um espaço virtual que usa a internet para compartilhar informações. Por meio do blog você pode publicar textos, opiniões, notícias,

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

Manual de Utilização do PLONE (Gerenciador de página pessoal)

Manual de Utilização do PLONE (Gerenciador de página pessoal) Manual de Utilização do PLONE (Gerenciador de página pessoal) Acessando o Sistema Para acessar a interface de colaboração de conteúdo, entre no endereço http://paginapessoal.utfpr.edu.br. No formulário

Leia mais

Professor: 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 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 mais