Índice:

Fazendo seu primeiro site do zero: 4 etapas
Fazendo seu primeiro site do zero: 4 etapas

Vídeo: Fazendo seu primeiro site do zero: 4 etapas

Vídeo: Fazendo seu primeiro site do zero: 4 etapas
Vídeo: DESENVOLVENDO MEU PRIMEIRO SITE COM HTML | 4# 2024, Julho
Anonim
Fazendo seu primeiro site do zero
Fazendo seu primeiro site do zero
Fazendo seu primeiro site do zero
Fazendo seu primeiro site do zero

Este instrutível irá mostrar-lhe como fazer seu próprio site, completamente do zero, sem aprender virtualmente qualquer html, e totalmente gratuito, embora seja necessária alguma habilidade em um programa de pintura, mas se você não tiver essa habilidade, pode pesquisar na internet para saber o que você vai fazer com a tinta pré-fabricada. a lista de coisas necessárias.

  • Acesso à Internet (provavelmente, se você está lendo isso, você tem esse)
  • Um programa de pintura
  • Cerca de uma hora de tempo (ainda mais curto dependendo da sua habilidade)
  • E alguns downloads que, claro, são gratuitos.

O primeiro download é chamado de gimp, que é basicamente uma versão diluída do photo shop, ou uma versão mais volumosa do windows paint que você decidir. Este programa Gimp também tem versões para usuários linux e mac. Em seguida, é algo que eu realmente gosto é um editor de HTML, que é. você adivinhou Ware grátis. isso é o que o torna assim que você não precisa aprender html. mas se você quiser fazer a codificação, pode fazê-lo neste programa para. NVUGot tudo isso, bom, agora, quando pronto para dar o passo no mundo da interweb.

Etapa 1: Fazendo as fotos

Fazendo as fotos
Fazendo as fotos
Fazendo as fotos
Fazendo as fotos
Fazendo as fotos
Fazendo as fotos

Esta é a etapa em que você faz todas as fotos para o seu site, é claro que você terá que ter um nome para o seu site nesta fase. Um método testado e comprovado é fazer com que uma imagem 1000x600 faça tudo o que o seu site será, tire o site instructables, por exemplo, tudo o que realmente é é um banner no topo, a barra laranja com os botões e algumas barras de menu. Basta fazer tudo como uma única imagem (apenas deixe de fora a área de conteúdo, ou seja, onde está o texto está na página do meio, apenas deixe esse local em branco) e não faça um plano de fundo, apenas preencha o plano de fundo com uma cor sólida que combine com sua página. Não vou lhe dizer dicas de pintura ou qualquer coisa que você possa ver nisso por conta própria. assim que você tiver a aparência desejada para sua página principal. uma vez que seu feito. recorte e cole tudo o que pode ser clicado, incluindo o banner e os botões individualmente em uma nova janela, e salve-o separadamente, certifique-se de salvá-los como.png, veja nas fotos um exemplo meu. O objetivo aqui é separar tudo para que você possa codificá-lo.

Outra dica é fazer uma nova pasta para salvá-los, não necessária, mas para organização

Etapa 2: juntando tudo de novo

Juntando tudo de novo
Juntando tudo de novo

Agora, para abrir o nvu, demorei um pouco de clicar, mas não é tão complicado. Eu o conduzirei passo a passo.

Primeiro, você precisa pegar a barra superior, que é definida como padrão em 600 (tenho certeza), mas você vai querer arrastá-la e torná-la 1000 de largura, faça o mesmo para o lado apenas aumente para 600. Em seguida, Se quisermos fazer o plano de fundo do site primeiro, você não usará o preenchimento usado no programa de pintura; em vez disso, vá para Formatar> Cores e plano de fundo da página e clique em usar cores personalizadas. e faça com que a cor de fundo seja a mesma que você fez no programa de pintura. A próxima coisa que você deseja fazer é adicionar o banner superior. clique no botão de imagem na barra de ferramentas. e encontre seu banner. clique em não usar texto alternativo. e ok. agora você tem sua primeira imagem em sua página. * clique na barra de código-fonte na parte inferior do programa para ver o quanto de codificação foi gasto exatamente nisso. também é uma boa maneira de aprender HTML. Carregue o resto dos botões, você pode usar texto alternativo ou não depende de você. no entanto, você precisará clicar no botão e ir para a barra de formatação nas propriedades da imagem e do link. clique na barra de links e crie um link para o que ela pertence, o botão home seria index.htm, o botão de links seria links.htm escreva a que os botões estão vinculados você precisará deles mais tarde quando terminar tudo deve ser semelhante à imagem do site antes de você cortar e colar. A última coisa que você vai querer fazer é fazer uma tabela no centro da página sob os botões, você pode mudar a cor e as bordas na barra de menu, é aqui que seu texto principal irá. escreva algo em seu site apenas para ter algo em seu site.

Etapa 3: Configurando tudo

Configurando tudo
Configurando tudo
Configurando tudo
Configurando tudo
Configurando tudo
Configurando tudo

Agora você tem o site praticamente feito. mas você provavelmente não tem tempo ou espaço necessário para configurar um servidor, e então ele não seria gratuito. mas são locais que hospedam seu site gratuitamente em seus servidores. meu favorito é. freewebs

Se você não deseja realmente fazer isso instrutível e está apenas lendo, você ainda pode fazer um site com eles têm tudo que você precisa, tudo o que você precisa fazer é escolher a aparência que deseja para o seu site e digitar o que deseja. Essa maneira de fazer isso é muito mais flexível

Faça uma conta em freewebs se o nome do seu site estiver sendo usado, não se preocupe, apenas adicione um 2 ao final do seu site por enquanto, ou seja, minas punkholy, se fosse usado, eu chamaria de punkholy2. (isso provavelmente não será o que as pessoas digitarão quando entrarem em seu site. Por último, ao criar o site, certifique-se de configurá-lo no modo html. Você vai acabar em uma tela como a terceira imagem, clique em gerenciador de site e clique para editar a página chamada index.htm apague as coisas que estão em seu, vá para a barra de código-fonte no nvu e copie e cole no editor de texto agora em branco. por último carregue as imagens no diretório principal e clique no pequeno globo para ver a página. se algo der errado comente sobre isso e me mande uma mensagem com seu html e eu verei o que posso fazer.

Etapa 4: finalizando

Bare comigo, você está quase pronto. lembra quando você teve que escrever esses nomes? Agora quando você precisa deles. faça algumas novas páginas com os mesmos nomes aos quais os botões estavam vinculados. agora copie o código html da página de índice. e copie-o nas novas páginas, após inspeção. você deve ver onde está o texto que você inseriu na página inicial. você pode deletar isso e escrever outra coisa que entraria na página, então você precisará procurar algum html se quiser adicionar links para outro site e coisas assim. mas para a maior parte dele, você deve testar seus botões para ver se eles funcionam. pense em algum conteúdo e seja feliz. * como uma etapa opcional se você obteve um nome que foi assumido e teve que colocar 2 em seu nome, vá até aqui e registre o nome que deseja. mesmo se for usado em freewebs, é provável que não seja feito aqui. por último, apenas o comentário de costume se você tiver problemas, eu sei que é um longo instrutível com muitas informações, e se eu omiti algo me diga, não questione eu, Iv fiz muitos sites e algo que eu acho óbvio pode não ser tão óbvio para alguém que é novo nisso. se você quiser um exemplo, aqui está meu sitewww.punkholy.tk.

Recomendado: