NUNCA MAIS PASSE RAIVA POR NÃO CONSEGUIR RESOLVER UM PROBLEMA COM O EXCEL - GARANTIDO!

UNIVERSIDADE DO VBA - Domine o VBA no Excel Criando Sistemas Completos - Passo a Passo - CLIQUE AQUI

Você está em: PrincipalArtigosCriacaosites : Dwbasico001
Quer receber novidades e e-books gratuitos?

Dreamweaver MX 2004 Básico

 

Projeto Web – Parte 01

 

Objetivo : Iniciar a criação de um projeto Web utilizando as ferramentas do Dreamweaver MX 2004. Entender como funciona a organização dos arquivos que compõe um projeto web, conhecer as ferramentas e opções de formatação de documentos no Dreamweaver.

 

Pré-requisitos: Ter conhecimento intermediário sobre gerenciamento de arquivos e Painel de controle no Windows.

 

Organização dos Arquivos

 

A organização dos arquivos que compõe o site é de primordial importância para um projeto web desde seu desenvolvimento até a publicação.

O ideal é criar hierarquias de pastas separando-se os documentos-fonte (docs, flas, pngs) dos documentos finais.

Exemplo:

 

Neste caso, a pasta DreamweaverBásico é a pasta-pai da hierarquia e as pastas projeto01 e projeto01_arquivos armazenam os arquivos do projeto, sendo que:

 

1. projeto01 é a pasta onde os arquivos finais (os quais serão publicados na internet) estão armazenados. Nesta pasta, têm-se arquivos do tipo html, swf, .class, entre outros, e a pasta de imagens do site.

 

2. A pasta projeto01_arquivos armazena todos os arquivos-fonte utilizados para o desenvolvimento do projeto, documentos de texto, documentos do Macromedia Fireworks ou Flash, etc.

 

Definição do site

 

Definiremos um site que será inicializado neste tutorial e continuado nos próximos.

 

Seguindo os passos de 1 a 7 em “Definindo um Site no Dreamweaver” do capitulo anterior, defina um site com as seguintes caracteristicas:

 

1. Nome do site: projeto01;

 

2. Não utilizar tecnologia de servidor;

 

3. Editar cópias locais na máquina e depois fazer o upload para o servidor quando estiver pronto;

 

4. Selecione nenhum (none) para conexão com o servidor.

 

O Painel Files deve estar como na figura abaixo (esquerda).

 

5. Selecione na Tela inicial a opção HTML para criar um novo documento do tipo HTML no seu site ou, caso essa tela não esteja sendo exibida, clique no menu Arquivo (File) e na opção Novo... (New...), selecione o tipo Basic Page, HTML e clique em Criar (Create).

 

 

*:O Workspace do Dreamweaver pode ser alterado a qualquer momento entre Designer ou Coder clicando no menu Edit, Preferences, General, Change Workspace. Para o nosso curso básico de Dreamweaver utilizaremos o modo Design.

 

Formatação do documento

 

Para cada documento criado no site, podem ser definidas cores, alinhamentos, fundos, tamanhos, títulos individuais. Através da janela “Page Properties” podem ser feitas todas essas configurações.

 

1. Para exibir a janela “Page Properties”, clique com o botão direito do mouse em algum local dentro da área de edição da sua página ou use CTRL+J.

 

2. Clique na opção Page Properties… (Propriedades da Página).

 

Category: Opção que traz os itens Links, Headings, Title/Encodin, Tracing image.


3. Na janela Page Properties, selecione na lista Category (Categoria), a opção Appearance para setar as propriedades visuais da página conforme a figura abaixo:

 

 

4. A categoria Links nos oferece as opções de definição fonte (Link font), tamanho (Size), cor antes e depois de visitado, ativo e com foco (Link color, Visited links, Rollover links, Active links), além de podermos escolher quando e se queremos que o link fique com aquele famoso sublinhado (Underline style). Configure como na figura abaixo:

 

 

5. Para definição do formato dos títulos (de 1 a 6), na opção Headings pode-se setar a formatação para os títulos de 1 a 6 do documento, sendo possível seleciona uma formatação individual para cada nível de título. Deixe as opções como as da próxima figura:


 

6. Na categoria “Title/Encoding”, é onde será digitado o título da janela, o qual irá aparecer na Barra de título da janela do browser. Digite o slogan do nosso projeto “Pingüim Gelateria”.

 

 

7. Em Tracing Image é possível definir no campo “Tracing image” uma figura de plano de fundo para o documento e controlar seu nível de transparência – aplicando um efeito do tipo marca d’água – ao arrastar o ponteiro do campo “Transparency”. Para esse documento não utilizaremos imagem no plano de fundo, mas você pode fazer o teste clicando no botão “Browse…”, selecionando uma figura JPG, GIF ou BMP, por exemplo, de sua maquina e clicando no botão “Aplicar” para ver o resultado.

 

 

8. Clique no botao “Ok” para aplicar as configurações realizadas e retornar ao documento.

 

9. Digite a seguinte frase: “Pingüim Gelateria”

 

10. Selecione a frase digitada e clique com o botão direito para aplicar um estilo de título. Aponte para “Paragraph Format” e clique na opção “Heading 1”.

 

 

Note que o texto ficou formatado com o tamanho, cor e fonte escolhidos na categoria “Headings” da janela de “Propriedades da Página”:

 

 

: Não há ordem para edição das propriedades da página, sendo assim você pode alterá-las a qualquer momento durante a criação do documento e além de utilizar o meu Page Properties…, também pode realizar as configurações por meio da Barra de Ferramentas Propriedades que por padrão localiza-se na parte inferior da janela de trabalho do Dreamweaver:

 

 

1. Formato e nome da fonte (Format, Font).

 

2. Estilo e tamanho, onde o ultimo pode ser definido em pixels, centímetros, milímetros, porcentagem, e outras unidades de medida que podem ser selecionadas a qualquer momento (Style, Size).

 

3. Negrito, Itálico, e Cor (Bold, Italic, Calor).

 

4. Alinhamentos de texto (Left, Center, Right, Justify) na parte superior e, na inferior, botões de marcadores, numeradores e recuo de texto direito e esquerdo.

 

5. Link e Target para a definição de hiperlinks.

 

6. O botão com desenho de alvo (Point to file), é arrastável e, assim como o botão com a pastinha amarela, serve para setar arquivos que serão chamados ao ativar um hiperlink. A diferença é que o alvo pode ser arrastado com o mouse e solto encima de algum arquivo do computador para que o link seja estabelecido enquanto a pasta oferece a opção de procurar o arquivo nas hierarquias de pastas do disco.

 

Salvando o documento

 

Um documento do Dreamweaver pode ser salvo a qualquer momento durante a sua criação, mas deve seguir algumas regras para que não ocorram conflitos na sua publicação. Não utilizar acentuação, espaços, letras maiúsculas estará evitando problemas de incompatibilidade com os servidores.

 

Outro passo importantíssimo é armazenar os arquivos corretamente na estrutura de pastas criada para o projeto, assim como foi comentado no tópico “Organização de Arquivos” desta coluna..

 

1. Clique no menu “File, Save”.

 

 

2. Note que no campo “Save in:” já veio selecionada a pasta definida na criação do site para armazenar os arquivos. No campo “File name:”, digite o nome “index.htm” e clique no botão “Salvar”.

 

 

3. O nome do arquivo será exibido na hierarquia do painel “Files”, logo abaixo da pasta “projeto01”.

 

 

: O nome “index” é o padrão utilizado para nomear a primeira pagina do site que será exibida ao digitar o endereço de um site no browser. No próximo capitulo veremos um pouco mais sobre nomenclaturas de arquivos e convenções.

Untitled Document
FRONTPAGE - BÁSICO
1 Criação de Páginas para Internet - Introdução
1 Criando o Primeiro Arquivo HTML
DREAMWEAVER - BÁSICO
1 Introdução ao Dreamweaver MX 2004
1 Projeto Web – Parte 01
1 Projeto Web – Parte 04
1 Projeto Web – Parte 03
1 Criação de Tabelas no Dreamweaver
1 Dreamweaver Basico - Começando a usar o DreamWeaver
1 Dreamweaver Basico - Configurações de Definição de Sites
1 Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 1
1 Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 2
1 Dreamweaver Basico - Definição Básica do Design e Inserção de Conteúdo
1 Dreamweaver Basico - Criação de Links
1 Dreamweaver Basico - Configuração de Links
1 Usando Tabelas no DreamWeaver
1 Usando Imagens no Dreamweaver
1 Usando Modelos no Dreamweaver
1 Conhecendo o Dreamweaver 8
1 Usando comportamentos para criar um menu pop up no Dreamweaver
1 Usando a paleta Behaviors do Dreamweaver - Parte 1
1 Usando Camadas Para Exibir Dicas de Formulários
1 Fazendo um Site com Templates Prontos no Dreamweaver
HTML BÁSICO
1 HTML Básico - Introdução à Internet
1 HTML Básico - Alinhamento de Texto
1 HTML Básico - Cabeçalhos e Formatação de Texto
1 HTML Básico - Formatação de Texto
1 HTML Básico - Criação e configuração de links
1 HTML Básico - Criando Listas Ordenadas e Listas de Definição
1 HTML Básico - Criação de Links Internos e Externos
1 HTML Básico - Criação de Links Externos E Links de E-mail
1 HTML Básico - Inserindo Imagens na Página
1 HTML Básico - Introdução à Tabelas
1 HTML Básico - Criação de Formulários - Parte 1
1 HTML Básico - Criação de Formulários - Parte 2
DREAMWEAVER - PROGRAMAÇÃO PHP
1 Galeria de Fotos com Efeito Lightbox Dinâmica
1 Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 1)
1 Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 2)
1 Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte Final)
1 Alternando Cores da Tabela no Resultado de uma Consulta
1 Como Criar um Contador de Visitas (Acessos)
1 Criando Galeria de Fotos (Tiny SlideShow)
1 Criando Ícone para URL
1 Criando Recurso Imprimir
1 Criando Sites Auto-Ajustáveis de Acordo com a Resolução
1 Formulário de Contato com Envio de Dados por Email
1 Galeria de Fotos com Efeito Lightbox e Upload Múltiplo de Imagens
CRIANDO UM APLICATIVO PARA UMA ACADEMIA
1 Criando Aplicativo Para Academia - Parte 1
1 Criando Aplicativo Para Academia - Parte 2
1 Criando Aplicativo Para Academia - Parte 3
1 Criando Aplicativo Para Academia - Parte 4
1 Criando Aplicativo Para Academia - Parte 5
1 Criando Aplicativo Para Academia - Parte 6
1 Criando Aplicativo Para Academia - Parte Final
WEBSPHERE
1 Apresentando o WebSphere Application Server da IBM
1 Instalação do WebSphere Application Server
1 Configurando uma aplicação no WAS
1 Configurando a segurança no WAS
SISTEMA DE SALÃO DE BELEZA
1 Sistema Salão de Beleza - Parte 1
1 Sistema Salão de Beleza - Parte 2
1 Sistema Salão de Beleza - Parte 3
1 Sistema Salão de Beleza - Parte 4
1 Sistema Salão de Beleza - Parte 5
1 Sistema Salão de Beleza - Parte 6
1 Sistema Salão de Beleza - Parte 7
1 Sistema Salão de Beleza - Parte 8
1 Sistema Salão de Beleza - Parte 9
1 Sistema Salão de Beleza - Parte 10
1 Sistema Salão de Beleza - Parte 11
1 Sistema Salão de Beleza - Parte 12
1 Sistema Salão de Beleza - Parte 13
1 Sistema Salão de Beleza - Parte 14
SISTEMA PARA GERENCIAMENTO DE IMÓVEIS
1 Sistema Para Gerenciamento de Imóveis - Parte 01
1 Sistema Para Gerenciamento de Imóveis - Parte 02
1 Sistema Para Gerenciamento de Imóveis - Parte 03
1 Sistema Para Gerenciamento de Imóveis - Parte 04
1 Sistema Para Gerenciamento de Imóveis - Parte 05
1 Sistema Para Gerenciamento de Imóveis - Parte 06
1 Sistema Para Gerenciamento de Imóveis - Parte 07
1 Sistema Para Gerenciamento de Imóveis - Parte 08
1 Sistema Para Gerenciamento de Imóveis - Parte 09
1 Sistema Para Gerenciamento de Imóveis - Parte 10
1 Sistema Para Gerenciamento de Imóveis - Parte 11
Quer receber novidades e e-books gratuitos?

 
 

Contato: Telefone: (51) 3717-3796 | E-mail: webmaster@juliobattisti.com.br | Whatsapp: (51) 99627-3434

Júlio Battisti Livros e Cursos Ltda | CNPJ: 08.916.484/0001-25 | Rua Vereador Ivo Cláudio Weigel, 537 - Universitário, Santa Cruz do Sul/RS, CEP: 96816-208

Todos os direitos reservados, Júlio Battisti 2001-2024 ®

LIVRO: MACROS E PROGRAMAÇÃO VBA NO EXCEL 2016 - CURSO COMPLETO E PRÁTICO

DOMINE A PROGRAMAÇÃO VBA NO EXCEL - 878 PÁGINAS - CLIQUE AQUI