BEM VINDO AO CURSO DE DREAMWEAVER
O QUE É O DREAMWEAVER?
O Adobe Dreamweaver, é um Software para construção e edição de códigos de várias linguagens voltadas para web, ou seja, é um programa largamente utilizado para criação de páginas para internet (websites).
EM TERMOS MAIS ESPECÍFICOS...
Adobe Dreamweaver é o famoso aplicativo de web design desenvolvido pela gigante Adobe, com o objetivo de oferecer uma ferramenta para a modelagem de páginas da internet. O programa conta com uma interface limpa e simplificada, com ferramentas e recursos de edição visual e suporte completo ao HTML5, CSS3 e jQuery.
INTERFACE DO DREAMWEAVER
Ao Abrir o Dreamweaver, uma janela de boas vindas é exibida; a qual, propicia ao Web Design: Manipular documentos, Criar novos, e também conhecer alguns recursos do Dreamweaver.
Podemos abrir um documento recente do Dreamweaver, também podemos acessar o Explorer clicando em "Abrir..." e procurando o arquivo desejado. É possível desenvolver novos documentos com linguagens: HTML; coud fusion; PHP; AS VBS Script, XSTL, CSS, JavaScript, XML, entre outras opções...
Como o Dreamweaver incorpora (importa) para si, documentos desenvolvidos no Corel Draw; Photoshop; Fireworks e Flash; ele tem a propriedade de criar um website com uma qualidade muito boa.
Ao Trabalhar com Flash no Dreamweaver, faz-se mister que o Web Design tenha uma boa base de como usar e manipular o código Action Script.
O CSS [ Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. O seu principal benefício é a separação entre o formato e o conteúdo de um documento ] é outro código que havemos de estudar para o uso do Dreamweaver.
ÁREA RESTRITA NO DREAMWEAVER
CURIOSIDADES DO DREAMWEAVER
FORMATOS DE ARQUIVOS
Olá pessoal, na coluna anterior falei sobre como tratar corretamente uma imagem, hoje venho aqui mostrar como salvar corretamente uma imagem, para seu determinado fim.
Então vamos deixar de conversa, e saber mais os formatos de arquivos:
O Photoshop, ele pode abrir vários formatos de Arquivos, entao, vamos ver os mais conhecidos e alguns que poucas pessoas conhecem, e saber para que finalidade cada um pode ser usado:
JPEG:
Formato mais utilizado na WEB , com sistema de compactação com perda. Isto quer dizer que quanto maior a compactação. maior será a perda de qualidade. Aceita milhões de Cores, modelo RGB e CMYK. Então não é o recomendável para ser impresso, já que existem formatos que tem compactação sem perda.
GIF:
Da Compuserv. Formato muito usado na WEB, só permite 256 cores. Suporta Transparências e animações com o nome de GIf Animator. Não é recomendavel no uso de Imagens ou Fotos que contenham muitas cores, mais em cores chapadas.
BMP:
É o formato nativo do Microsoft Paint. Suporta 16 milhões de Cores , mas o principal uso está restrito a essa plataforma, principalmente para criar o " papel de parede" do Windows
TIFF:
É o formato de impressão mais usado atualmente. Suporta compactação sem perda ( ao contrário do JPEG). Não é compatível com desenhos vetoriais como o EPS, porém pode suportar até 24 canais de máscaras. Na versão avançada também suporta transparências, camadas e possue vários tipos de compactação. É um arquivo editável, pode-se trabalhar com ele no Photoshop, pois o mesmo também salva as layers.
PNG:
Foi Desenvolvido para portar arquivos coloridos de qualidade na WEB, com 16 cm de cores, transparências e compressão sem perda.
PDF:
É uma formato da Adobe baseado e, PostScript que permite vizualizar páginas com textos, desenhos vectoriais e imagens, suporta até 16 cm de cores e múltiplas páginas, porém o photoshop só permite salvar como página única.
EPS:
(Encapsulated PostScript)
O Photoshop pode abrir arquivos EPS vectoriais exportados por programas como Illustrator, FreeHand, Corel ou QuarXPress, essa ação é chamada de Rasterize porque os desenhos são convertidos para pixels. Como por exemplo: você pode criar uma arte em um desses programas acima e depois editar e dar os retoques finais no Photoshop.
PCX:
É o Formato nativo do PC PaintBrush, parente do BMP, suporta até 16 milhões de cores, mas não tem qualidade para gráfica
DCS:
( baseado na linguagem do PostScript)
Foi desenvolvido pela Quark, exclusivamente para impressão gráfica. Esse formato só admite Modelo CMYK e na versão 2.0 também duotonia.
PICT: É o formato mais nativo da APPLE, que suporta 16 cm de cores e até 4 canais alpha (para Máscaras).
FORMATOS GRÁFICOS
O componente gráfico das páginas web tem muita importância, é que o que faz com que estas seja vistosas e o que nos permite aplicar nossa criatividade para fazer o design do site uma tarefa agradável . É também uma ferramenta para aproximar os sites ao mundo onde vivemos, entretanto, é também o causador de graves erros nas páginas e fazer destas, em alguns casos, um martírio para o visitante.
As noções básicas para o uso dearquivos gráficos são simples, conhecê-las, mesmo que seja ligeiramente, nos ajudará a criar sites agradáveis e rápidos. Não cometer erros no uso das imagens é fundamental, mesmo que não seja um designer e as imagens que utiliza sejam feias, utilize-as bem e assim, estará propiciando mais visitas ao seu site.
Tipos de arquivos
NaInternet se utilizam principalmente dois tipos de arquivos gráficos GIF e JPG, pensados especialmente para otimizar o tamanho que ocupam em disco, já que os arquivos pequenos se transmitem mais rapidamente pela Rede.
O formato de arquivo GIF se usa para as imagens que tenham desenhos, enquanto que o formato JPG se usa para as fotografias. Os dois comprimem as imagens para salvá-las. A forma de comprimir a imagem que utiliza cada formato é o que os tornam ideais para um propósito ou outro.
Adicionalmente, pode-se usar um terceiro formato gráfico nas páginas web, o PNG. Este formato não tem tanta aceitação como o GIF ou o JPG, por várias razões, entre elas: o desconhecimento do formato por parte dos desenvolvedores, que as ferramentas habituais para tratar gráficos (como por exemplo, Photoshop) geralmente não suportam, e que os navegadores antigos também têm problemas para visualizá-las. Entretanto, o formato se comporta muito bem quanto a compreensão e a qualidade do gráfico conseguinte, pelo que seria útil se chega a extender seu uso.
GIF
As noções básicas para o uso de
Tipos de arquivos
Na
O formato de arquivo GIF se usa para as imagens que tenham desenhos, enquanto que o formato JPG se usa para as fotografias. Os dois comprimem as imagens para salvá-las. A forma de comprimir a imagem que utiliza cada formato é o que os tornam ideais para um propósito ou outro.
Adicionalmente, pode-se usar um terceiro formato gráfico nas páginas web, o PNG. Este formato não tem tanta aceitação como o GIF ou o JPG, por várias razões, entre elas: o desconhecimento do formato por parte dos desenvolvedores, que as ferramentas habituais para tratar gráficos (como por exemplo, Photoshop) geralmente não suportam, e que os navegadores antigos também têm problemas para visualizá-las. Entretanto, o formato se comporta muito bem quanto a compreensão e a qualidade do gráfico conseguinte, pelo que seria útil se chega a extender seu uso.
GIF
 |
| Um logotipo é um exemplo claro de imagem GIF |
Além se ser um arquivo ideal para as imagens que estão desenhadas, tem muitas outras características que são importantes e úteis.
Compressão: É muito boa para desenhos, como já foi dito. Inclusive pode ser interessante se a imagem é muito pequena, mesmo que seja uma foto.
Transparência: É uma utilidade para definir certas partes do desenho como transparentes. Desse modo, podemos colocar as imagens sobre distintos fundos sem que se veja o quadrado onde está inserido o desenho, vendo em troca a silhueta do desenho em questão. Para criar um gif transparente devemos utilizar um programa de desenho gráfico, com o qual podemos indicar que cores do desenho queremos que sejam transparentes. Geralmente, definimos a transparência quando vamos salvar o gráfico.
Cores: Com este formato gráfico podemos utilizar conjuntos de 256 cores ou menos. Este é um detalhe muito importante, visto que quanto menos cores utilizarmos na imagem, em geral, menos ocupará o arquivo. Às vezes, mesmo utilizando menos cores em um gráfico, este não perde muita qualidade, chegando a ser inapreciável à vista. Em alguns programas podemos modificar a quantidade de cores ao salvar o arquivo, em outros, fazemos enquanto criamos o gráfico.
JPG
Vejamos agora quais são as características fundamentais do formato JPG:
Compressão: Tal como dissemos anteriormente, sua gama de compressão torna ideal este formato para salvar fotografias. Além disso, com JPG podemos definir a qualidade da imagem, com qualidade baixa o arquivo ocupará menos, e vice-versa.
Transparência: Este formato não tem possibilidade de criar áreas transparentes. Se desejamos colocar uma imagem com uma área que pareça transparente procederemos assim: com nosso programa de desenho gráfico faremos com que o fundo da imagem seja o mesmo que o da página onde queremos colocá-la. Em muitos casos, os fundos da imagem e a página parecerão o mesmo.
Cores: JPG trabalha sempre com 16 milhões de cores, ideal para fotografias.
Otimizar arquivos
Para que as imagens ocupem o menos possível e se transfiram rapidamente pela Rede devemos aprender a otimizar os arquivos gráficos. Para isso, devemos fazer o seguinte:
Para os arquivos GIF: Reduziremos o número de cores de nossa aquarela. Isto se faz com nosso editor gráfico, em muitos casos poderemos fazer ao salvar o arquivo.
Para os arquivos JPG: Ajustaremos a qualidade do arquivo quando estivermos salvando. Este formato nos permite baixar muito a qualidade da imagem sem que esta perca muito em seu aspecto visual.
É imprescindível dispor para otimizar a imagem de uma boa ferramenta que nos permita configurar estas características da imagem com liberdade e facilidade. Photoshop 5.5 ou 6 é um programa bastante recomendável, pois incorpora uma opção que se chama "Salvar para Web" com a qual podemos definir as cores do gif, a qualidade do JPG e outras opções em várias amostras. Assim, com todas as opções configuráveis, vendo os resultados do tamanho do arquivo, podemos otimizar a imagem de uma maneira precisa com os resultados que desejamos.
Também existem no mercado outros programas que nos permitem otimizar estas imagens de maneira surpreendente. Uma vez que criamos a imagem, a passamos por estes programas e nos comprimem ainda mais o arquivo, fazendo-lhe rápido de transferir e, portanto, mais otimizado para Internet. Ao ser estas utilidades tão especializadas, os resultados costumam ser melhores que com os programas de edição gráfica.
Compressão: É muito boa para desenhos, como já foi dito. Inclusive pode ser interessante se a imagem é muito pequena, mesmo que seja uma foto.
 |
| Parte desta imagem é transparente |
Cores: Com este formato gráfico podemos utilizar conjuntos de 256 cores ou menos. Este é um detalhe muito importante, visto que quanto menos cores utilizarmos na imagem, em geral, menos ocupará o arquivo. Às vezes, mesmo utilizando menos cores em um gráfico, este não perde muita qualidade, chegando a ser inapreciável à vista. Em alguns programas podemos modificar a quantidade de cores ao salvar o arquivo, em outros, fazemos enquanto criamos o gráfico.
 32 Cores |  16 Cores |  8 Cores |
| Imagem tomada com distintas aquarelas de cores. Pode-se apreciar como que com poucas cores se vê bem o gráfico e como perde um pouco à medida em que lhe retiramos mais cores. | ||
JPG
 |
| Uma fotografia com formato JPG |
Compressão: Tal como dissemos anteriormente, sua gama de compressão torna ideal este formato para salvar fotografias. Além disso, com JPG podemos definir a qualidade da imagem, com qualidade baixa o arquivo ocupará menos, e vice-versa.
 |
| Uma tentativa de transparência em JPG. |
Cores: JPG trabalha sempre com 16 milhões de cores, ideal para fotografias.
Otimizar arquivos
Para que as imagens ocupem o menos possível e se transfiram rapidamente pela Rede devemos aprender a otimizar os arquivos gráficos. Para isso, devemos fazer o seguinte:
Para os arquivos GIF: Reduziremos o número de cores de nossa aquarela. Isto se faz com nosso editor gráfico, em muitos casos poderemos fazer ao salvar o arquivo.
 GIF 256 cores - 11,1 KB |
 GIF 16 cores - 7,3 KB |
 GIF 4 cores - 3,9 KB |
Para os arquivos JPG: Ajustaremos a qualidade do arquivo quando estivermos salvando. Este formato nos permite baixar muito a qualidade da imagem sem que esta perca muito em seu aspecto visual.
 JPG qualidade 0 3 KB |
 JPG qualidade 20 5,9 KB |
 JPG qualidade 50 10 KB |
 |
| Photoshop é uma ferramenta excelente para otimizar arquivos. Vendo várias cópias podemos escolher a mais adequada. |
Também existem no mercado outros programas que nos permitem otimizar estas imagens de maneira surpreendente. Uma vez que criamos a imagem, a passamos por estes programas e nos comprimem ainda mais o arquivo, fazendo-lhe rápido de transferir e, portanto, mais otimizado para Internet. Ao ser estas utilidades tão especializadas, os resultados costumam ser melhores que com os programas de edição gráfica.
CORES HEXADECIMAL
As cores possuem um papel muito importante na composição de webs. São indicadas em valores RGB, ou seja, que para conseguir uma cor qualquer misturaremos quantidades de Vermelho, Verde e Azul.
Os valores RBG são indicados em numeração hexadecimal, em base 16. (Os dígitos podemcrescer até 16). Como não existem tantos dígitos numéricos se utilizam as letras da A à F.
Os valores RBG são indicados em numeração hexadecimal, em base 16. (Os dígitos podem
| 0=0 | 4=4 | 8=8 | C=12 |
| 1=1 | 5=5 | 9=9 | D=13 |
| 2=2 | 6=6 | A=10 | E=14 |
| 3=3 | 7=7 | B=11 | F=15 |
Para conseguir uma cor, misturaremos valores desta maneira:
Onde cada valor pode crescer desde 00 até FF.
Exemplo: Como se mudaria a fonte para escrever em vermelho:
Ao Atributo cor lhe damos um valor RGB em formato hexadecimal. O caractere # se coloca ao princípio da expressão.
Outras cores:
| Laranja | #FF8000 |
| Verde turquesa | #339966 |
| Azul | #000080 |
| Cores compatíveis em todos os sistemas |
Como as páginas web têm que ser vistas por todos os usuários, e os sistemas que utilizam para entrar são distintos, há que utilizar cores compatíveis com a paleta de todos eles.
A forma de conseguir isto é limitando nossas cores aos que se podem conseguir utilizando a seguinte norma:
| Utilizaremos sempre estes valores: |
| 00 |
| 33 |
| 66 |
| 99 |
| CC |
| FF |
Exemplos: #3366FF #FF9900 #666666
Consegue-se as seguintes cores:
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
PRINCIPAIS LINGUAGENS DE PÁGINAS DA WEB FORA O HTML
Exemplo de código CSS
EXEMPLO 1
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Olá</p>
<p>Teste</p>
</body>
</html>
EXEMPLO 2
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin-left: 200px;
background: #5d9ab2 url("img_tree.png") no-repeat top left;
}
.center_div {
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
width: 90%;
background-color: #d0f0f6;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<div class="center_div">
<h1>Hello World!</h1>
<p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>
</div>
</body>
</html>
O PHP é outra alternativa de código para melhorar o visual do seu web site!
Exemplo de código PHP
EXEMPLO 1
<!DOCTYPE html>
<html>
<body>
<?php
echo strlen("Hello world!");
?>
</body>
</html>
EXEMPLO 2
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?>
</body>
</html>
Outrossim, o Dreamweaver nos possibilita trabalhar com o código e o projeto do website!
○ As Extensões de imagem mais convenientes ao Uso no Dreamweaver são:
> GIF (Graphic Interchange Format)
> JPEG (Joint Photographic Experts Group)
> PNG (Portable Network Group)
A Interface do Adobe Dreamweaver
A composição da Interface do Adobe Dreamweaver é:
○ Barra de Aplicativos
○ Barra de Ferramentas de Documento
○ Alternador da Área de Trabalho
○ Janela do Documento
○ CS Live
○Grupos de Painéis
○Seletor de Tags
○ Inspetor de Propriedades
○ Painel Arquivos
Teste de Dreamweaver
Profº Angefferson Érico
Aula 1
1- O que é o Adobe Dreamweaver? E o que contém no Painel Inserir?
2- O que nos Proporciona a tela de Boas Vindas?
3- Como localizamos a Barra de Ferramentas padrão?
4- O que compõe a Interface do Software Adobe Dreamweaver?
5- O que é o Seletor de Tags?
Aula 2
1- O que é a Linguagem HTML?
2- Como ver o código fonte de um
Website através de tecla de atalho?
3- O que são Tags? Quais os
Tipos? Cite exemplos de cada.
4- Há diferenças em digitar o
código fonte Maiúsculo; minúsculo ou misturado?
5- Anote a estrutura básica do
html.
Aula 3
1- Como configurar as definições de aparência HTML?
2- Como configurar as Definições
de links CSS?
3 - O que é o CSS? Porque Web
Designers usam ele?
Aula 4
1- Qual o passo-a-passo para configurar páginas no Adobe Dreamweaver?
2- Qual a finalidade dos Links
ativos?Quais os dois tipos de links?
3- Acerca dos fatores que carecem de uma análise antes da criação
de um web site; explique a finalidade do (a):
A- Briefing:
B- Brainstorm:
C- Análise de Navegadores
(Browsers):
D- Análise de Plataformas
(sistemas Operacionais):
E- Tipologia:
F- Público Alvo:
G- Usabilidade:
H- Análise de Concorrência:
I- Entretenimento e Dinamismo:
4- Qual o Passo a passo para iniciarmos a criação de um Website?
4- Qual o Passo a passo para iniciarmos a criação de um Website?
Aula 5
1- Podemos editar estilos de formatação no Adobe Dreamweaver?
2- Explique o funcionamento da
Regra alvo.
3- O que faz o Campo ID?
4- O atributo _blank; para que serve?
Aula 6
1- Como inserir Imagens no documento?
2- Na caixa de propriedades, quais
campos existem inerentes a imagem inserida?
Aula 7 - 10
1- Qual o procedimento para inserir um Hiperlink?
2- Como se insere tabelas no
documento?e com HTML, como se insere?
3- Para que serve a opção
"Sem Quebra"?
4- O que é o Frame? e o Iframe?
5- O que é o Frameset?
6- Como criar um Frame?
7- No html o que muda a estrutura
do código fonte se optarmos por um Frame?
8- O que é um Arquivo em
flash?
9- Explique como interagir com o
Flash no dreamweaver; e por que isso é aconselhável?
Aula 11 - 13
1- Para que servem as folhas de estilo?
2- Como Criar folhas de estilo?
3- Como podemos criar uma classe?
4- Em que caso será
necessário aplicar o estilo CSS pelo modo de código? e como será aplicado?
5- O que faz a Tag <form>?
6- Qual a finalidade do
Formulário? e como inseri-lo?
7- Qual a função dos botões?
8- Qual a finalidade da limpeza de dados de formulários? Como isso
é feito no Software Adobe Dreamweaver?
Aula 14 - 17
1- O que é o Spry?
2- Como inserir menu sanfonado no
Spry?
3- Crie um Portifólio com uso de
Spry.
4- Defina Div's APs.
5- O que são Pop-Up?
6- Podemos usar Arquivos do Fireworks no Dreamweaver?
Atividade Final Teórica - HTML
1- Que Tag faz correspondência com os campos de cabeçalho do
protocolo HTTP; onde os valores desse campo podem ser lidos pelos navegadores e
desencadear uma ação?
A- http-equiv ( )
B-
name ( )
C- content ( )
D- SDS ( )
2- O que faz a tag:
A- <H> [Headings] -
B- <P> [Paragraph] -
C- <BR> [Line Break] -
D- <HR> [Horizontal Rule] -
E- <DL> -
F- <OL> [Ordened List]
-
G- <B> [bold] -
H- <I> [Iatalic] -
I- <U> [Underline]
-
J- <S> [Strike] -
K- <BIG> -
L- <SMALL> -
M- <FONT> -
N- <A> -
O - <IMG> -
P- <TABLE> -
Q- <FRAME> -
R- <FRAMESET> -
S- <HTML> -
3- Sobre o CSS responda:
A- Quais os Benefícios?
B- Quais as limitações?
C- Como deve ser definido o atributo TYPE em versões recentes dos
Browsers?
D- Quais as 3 formas de aplicar o CSS em Web pages?
E- Quais as unidades de medida usadas em folhas de estilo?
F- Defina Herança:
G- Como especificar estilos?
H- O que são estilos contextuais?
I- O que são atalhos de CSS?
J- O que é a tabela hexadecimal?
Atividade Final Prática - DREAMWEAVER
1- Crie um Web Site de 7 Páginas; vincule as páginas (links Absolutos/ se quiser, relativos);
[use o máximo dos conhecimentos adquiridos]
O site deve ser o mais próximo da realidade de um site html ou css atual com recursos os quais poderão ser importados para o Dreamweaver seja do corelDRAW, Photoshop, Fireworks ou Flash.
OBS: O Site deverá ser criado obrigatoriamente no dreamweaver.
<html>
<head>
<title>Atividade 1 - Easy . Com</title>
<head>
<body>
<h1>Título de nível 1</h1>
<h2>Título de nível 2</h2>
<h3>Título de nível 3</h3>
<h4>Título de nível 4</h4>
<h5>Título de nível 5</h5>
<h6>Título de nível 6</h6>
<br>
</body>
</html>
3- salve com o nome página 1 na Área de Trabalho e mostre ao professor.
PÁGINA 2
1- Abra o Bloco de Notas;
2- Digite o código html a seguir
<html>
<head>
<title>Atividade 1 - Easy . Com</title>
<head>
<body bgcolor="#ffff33">
<br>
<b>Negrito</b>
<br>
<i>Itálico</i>
<br>
<u>Sublinhado<u>
<br>
<s>Tachado</s>
<br>
<big>Grande</big>
<br>
<small>Pequeno</small>
<br>
<hr>
<p align="left">Este texto está alinhado à esquerda.</p>
<br>
<p align="center">Este texto está alinhado no centro.</p>
<br>
<p align="right">Este texto está alinhado à direita.</p>
<br>
<p align="center"><big><big><big><big><big><big><b>Easy.com</big></big></big></big></big></big></b></p>
</body>
</html>
3- salve com o nome página 2 na Área de Trabalho e mostre ao professor.
O site deve ser o mais próximo da realidade de um site html ou css atual com recursos os quais poderão ser importados para o Dreamweaver seja do corelDRAW, Photoshop, Fireworks ou Flash.
OBS: O Site deverá ser criado obrigatoriamente no dreamweaver.
TESTE DE HTML
PROFESSOR: ANGEFFERSON ÉRICO
CRIE AS PÁGINAS COM OS CÓDIGOS A SEGUIR E MOSTRE AO PROFESSOR!
PÁGINA 1
1- Abra o Bloco de Notas;
2- Digite o código html a seguir
<head>
<title>Atividade 1 - Easy . Com</title>
<head>
<body>
<h1>Título de nível 1</h1>
<h2>Título de nível 2</h2>
<h3>Título de nível 3</h3>
<h4>Título de nível 4</h4>
<h5>Título de nível 5</h5>
<h6>Título de nível 6</h6>
<br>
</body>
</html>
3- salve com o nome página 1 na Área de Trabalho e mostre ao professor.
PÁGINA 2
1- Abra o Bloco de Notas;
2- Digite o código html a seguir
<html>
<head>
<title>Atividade 1 - Easy . Com</title>
<head>
<body bgcolor="#ffff33">
<br>
<b>Negrito</b>
<br>
<i>Itálico</i>
<br>
<u>Sublinhado<u>
<br>
<s>Tachado</s>
<br>
<big>Grande</big>
<br>
<small>Pequeno</small>
<br>
<hr>
<p align="left">Este texto está alinhado à esquerda.</p>
<br>
<p align="center">Este texto está alinhado no centro.</p>
<br>
<p align="right">Este texto está alinhado à direita.</p>
<br>
<p align="center"><big><big><big><big><big><big><b>Easy.com</big></big></big></big></big></big></b></p>
</body>
</html>
3- salve com o nome página 2 na Área de Trabalho e mostre ao professor.
Atividade Final Prática - HTML
Estude o conteúdo da página HTML E CSS (deste Blog) e faça uma página HTML salve com extenção .htm ou .html e mostre ao Professor.
