Os locais mais básicos da web terá uma barra de título, barra de navegação com abas para diferentes páginas da web e uma seção de conteúdo . Fazer um site com o Adobe Illustrator é um dos programas de software mais fácil de usar . Existem inúmeras aplicações de design que você pode escolher e as noções básicas são fáceis de entender . Você vai usar simples gráficos de vetor para a criação de um site no Illustrator. Os gráficos vetoriais são projetos que usam pontos, linhas, curvas e formas para criar imagens ao invés de gráficos raster que utilizam pixels , como no Adobe Photoshop. Instruções
Criar uma pasta raiz e Configurando o Dreamweaver
1
Crie uma pasta no seu desktop. Para fazer isso , clique direito em seu desktop e selecione " Nova Pasta " no menu drop-down . Esta será a sua pasta raiz . Nomeie a pasta que você quiser.
2
Abrir Dreamweaver, clique em " Site" , na parte superior e selecione " New Site ". O menu de definição do site será aberto e irá levá-lo através dos passos que você precisa para criar um site no Dreamweaver.
3
Nome do seu site no campo designado. Você não precisa se preocupar com o preenchimento do campo para um URL. Depois de nomear o seu site , clique em " Avançar".
4
Defina esta próxima configuração para "Não, eu não quero usar uma tecnologia de servidor . " Clique em "Next " para ir para o próximo grupo de configurações.
5
Escolha "Editar as cópias locais na minha máquina , em seguida, fazer upload para o servidor ( a Internet) quando estiver pronto. " Em seguida, clique no ícone da pasta e , em seguida, no menu que se abre encontrar a sua pasta raiz , selecione-o e clique em "Escolher ". Quando você tiver feito isso , clique em " Next" para ir para a próxima etapa.
6
Selecione "Nenhum" para como você deseja se conectar ao servidor remoto. Clique ao lado depois de ter ajustado esta definição. Clique em "Concluído" depois de rever suas configurações.
Desenhando uma página Web no Illustrator
7
Abra o Adobe Illustrator e clique em " Create New Web Document ". Não é necessário ajustar qualquer uma das configurações , então clique em "OK " para continuar.
8
Criar uma página simples " casa" para o seu site usando a barra de ferramentas. Criar apenas uma barra de título , uma barra de navegação , e uma área para o seu conteúdo . Você pode fazer isso usando a ferramenta retângulo ea ferramenta de texto. Na barra de navegação , criar categoria sub abas para navegar para páginas diferentes. Por exemplo, se você tem um site para um restaurante, você pode configurar categoria sub abas para casa , entradas e sobremesas .
9
Selecione a ferramenta " Slice" de sua barra de ferramentas , uma vez que você tem o básico para o seu web site concebido . Crie sua primeira fatia desenhando uma caixa em torno de sua área de título . Repita este procedimento com sua área de barra de navegação e sua área de conteúdo.
10
Mude para o " Slice Select " ferramenta. Ele aparece se você segurar o botão do mouse para baixo sobre a ferramenta fatia. Clique duas vezes sobre a sua fatia título. Quando o menu " Opções Slice" abre , nomeie sua fatia e , em seguida, clique em "OK ". Repita este passo com a fatia barra de navegação ea fatia área de conteúdo.
11
Vá para o menu arquivo e escolha "Salvar para Web e Dispositivos". Você pode selecionar se você deseja salvar as imagens como GIF ou JPEG . Clique em " Salvar".
12
Escolha " Other ... " No Salvar otimizado como menu. Isto pode ser encontrado sob as fatias no menu suspenso. Você vai ter um menu que se abre com a salvar opções.
13
Mudança de "HTML " para " fatias " no menu de configurações de saída . Este menu drop-down é o segundo a partir do topo . Depois de escolher " fatias ", alterar a configuração aqui para "Gerar CSS. "
14
Alterar a cor de fundo para "None" no menu de fundo. Clique em " OK". Defina "Format " para " HTML e imagens . " Mude suas "Configurações" para " todas as fatias do usuário ".
15
Altere o nome do seu arquivo para "index" no salvar como seção. Defina o local que você está salvando como a pasta raiz que você criou na primeira seção . Clique em "Salvar " quando você tiver feito isso.
Finalizando seu site no Dreamweaver
16
Abrir Dreamweaver, selecione "File > Open " e abra o index.html arquivo que você exportou do Illustrator . Você deve ser capaz de encontrar isso em sua pasta raiz.
17
Dê a sua página web um título. No topo da página , você pode encontrar uma área para um título. Coloque o nome da página que você está trabalhando nesta seção. Por exemplo, se você estiver trabalhando em sua página inicial, você vai querer colocar "casa" em sua área de título.
18
Crie um link para o seu hotspot navegação clicando em sua fatia de navegação. Na parte inferior , clique na ferramenta mapa hotspot azul e desenhar uma caixa em torno do primeiro guia barra de navegação. Coloque o nome do arquivo HTML que você deseja vincular na caixa de ligação . Por exemplo, se você desenhar uma caixa ao redor do guia em casa, você iria escrever "index.html " na caixa de ligação . Você também precisa certificar-se de que você dê um nome tão alt navegadores para usuários cegos e surdos podem ler no link em voz alta ou escreva-o em Braille. No tipo de seção alt casa.
19
Repita este passo para cada um de seus guias barra de navegação. Por exemplo, se o seu guia ao lado da barra de navegação é para entradas, você desenharia uma caixa ao redor do guia , tipo " entrees.html " na caixa de link, e digite "entradas " na caixa de alt .
20
vincular sua área de barra de título e de sua área de conteúdo , sem a criação de um hotspot. Para fazer isso, clique sobre a imagem e adicione o nome do HTML que você deseja vincular a na área de link. Por exemplo, a barra de título estaria ligado a "index.html ". Certifique-se de área de fronteira , diz "0".
21
Vá em "Arquivo > Salvar". Esta será a home page para o seu site ea base para todas as outras páginas HTML para o seu site também.
22
Altere a propriedade de título no topo do índice para o que a próxima página seu site vai ser .
23
Escolha " arquivo> Salvar como" e nomeie o arquivo " entrees.html ". O nome deve estar em letras minúsculas e não têm espaços.
24
Repita essas etapas para todas as páginas restantes. Uma maneira fácil de olhar para isto é simplesmente olhar para cada um de seus guias barra de navegação. Cada guia vai precisar de uma página separada designada para ele.
25
testar os links clicando na imagem de um globo no topo da tela. Isto irá mostrar -lhe exatamente como seu site vai olhar uma vez carregado para um site.