No século passado, o layout de páginas da web era domínio de poucos profissionais. Os avanços na tecnologia simplificaram muito essa tarefa. Agora, qualquer usuário da Internet pode criar um site.
É necessário
- - pacote de software para layout de página da web;
- - um editor gráfico raster para a criação de elementos de design.
Instruções
Passo 1
Faça uma lista dos elementos que estarão presentes no site. Podem ser componentes como um menu de navegação, um formulário de pesquisa, um banner publicitário ou de informações, uma lista de amigos. O nome do projeto geralmente é indicado no topo da página, pode haver um menu de navegação horizontal. A parte central é atribuída ao conteúdo principal do site. Na parte inferior da página, geralmente são colocados contadores de presença, informações de contato para feedback.
Passo 2
Crie um layout de site em um editor gráfico. A principal tarefa aqui é determinar a aparência dos elementos, sua posição relativa. Não use cores muito brilhantes. Uma paleta de cores neutras é percebida melhor. Use um estilo consistente para os blocos. Tente fazer o design o mais amigável possível. Evite elementos que são difíceis de implementar em HTML e CSS.
etapa 3
Salve o layout da página em formato bitmap sem perda de qualidade. Defina os elementos de estilo a serem renderizados usando HTML. Podem ser menus, links, tabelas, formulários de pesquisa. Extraia o restante dos elementos do layout e salve-os em arquivos separados. Crie dois documentos de texto em seu disco rígido. Altere a extensão de um deles para.htm. Ele conterá o código responsável pela posição relativa dos elementos. O segundo arquivo conterá as folhas de estilo.
Passo 4
Abra o primeiro arquivo em um editor de HTML. Coloque nos elementos de design da página salvos anteriormente em arquivos de bitmap. Crie links de texto, tabelas e outros elementos que precisam ser renderizados em HTML. Atributos de elementos, como cor, tamanho da fonte, presença de bordas, gravação em um arquivo CSS. Se você precisar animar os elementos da página, use JavaScript.
