Como construir seu próprio site: 16 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

Um guia totalmente coberto para passar do papel para a web, gratuitamente se você quiser, especialmente se algum webmaster amigável lhe dever alguns favores, mas mesmo com pouca experiência e conhecimento você pode construir um site e colocá-lo na web assim: …

Etapa 1: Ferramentas, materiais e habilidades básicas

Para fazer seu site você vai precisar de: Ferramentas - Um computador, de preferência com menos de cinco anos - Uma cópia do dreamweaver (opcional) mas é o que eu conheço e mostrarei a você - Uma cópia do photoshop, não essencial, mas definitivamente um obrigatório para quem quer um site bonito - Uma conexão com a internet no seu computador, de preferência rápida (porque torna as coisas mais rápidas) Materiais - Uma ideia - Algum espaço em disco, dependendo da finalidade do seu site - Tempo, sim, é um material valioso nisso - Um endereço de e-mail funcional, se você precisar, eles estão livres do Gmail e do hotmail. Habilidades básicas - Um conhecimento básico de como usar seu computador, a internet - Este é um intrutável sem código, é para pessoas que querem fazer um site, mas não têm ideia de como - Algumas habilidades de design seriam úteis - Saber como usar o photoshop seria legal, paint. NET ou GIMP

Etapa 2: vamos começar

Depois de saber que tipo de site deseja tornar, você toma a decisão de design.

Pense nos coolers básicos do site, no estilo dele e em como você deseja que as pessoas o naveguem. Se você está fazendo isso para uma empresa ou clube, é provavelmente melhor que o site reflita os coolers da empresa / clube e tenha recursos que imitem ou sejam baseados em coisas sobre a empresa, como botões de menu que lembram algo que eles vendem, se for um negócio. A navegação do seu site pode ser várias coisas, geralmente os três tipos principais de uso são os menus da barra lateral esquerda e direita e os menus da barra superior (eles passam por baixo do cabeçalho, como neste site). Se você está fazendo o site para você mesmo, escolha cores e recursos de design você gosta e vai de lá Palavra de advertência. não use cores realmente conflitantes e garotas tentem não ir para o rosa fluorescente (não ser sexista, isso acontece muito) Você poderia até dirigir um negócio através do seu site se quiser, tenho pouca experiência em fazer isso, mas pode ser mais fácil usando algo como as lojas do yahoo que este site usa.

Etapa 3: Iniciando o site

Bem aqui é onde começamos, vá em Meus documentos e crie para você uma pasta chamada 'Meu site ou use o nome do site, dentro dessa pasta faça uma pasta chamada' imagens 'uma chamada' páginas 'e outra chamada' arquivos ' (aquele chamado arquivo é para todos os outros arquivos que você pode estar usando no processo de criação do seu site.) Agora, ative o dreamweaver e junto com o arquivo um pouco você verá um item de menu chamado site, então clique nele e escolha o novo site, use a guia avançada (porque é mais fácil de percorrer), agora coloque o nome do seu site na caixa para o nome do site. Você verá uma caixa chamada 'pasta raiz local', esta é a pasta que você criou com o nome do seu site. A próxima caixa é rotulada 'Pasta de imagens padrão' escolha a pasta chamada imagens em sua pasta raiz. Deixe as duas caixas de seleção sozinhas, elas são como deveriam ser.

Etapa 4: vamos nos agarrar então

Depois de tomar todas as suas principais decisões no site, é hora de fazer um modelo para todas as suas páginas, isso é exatamente o que parece, um modelo para fazer páginas, um site deve ter uma aparência semelhante, de modo a evitar confusão para telespectadores e isso economiza muito tempo e esforço desperdiçado.

Em seu modelo você precisará fazer um cabeçalho, este é o banner principal que percorre o topo da página, geralmente tem o título do site / nome da empresa, um slogan e uma imagem ou logotipo refletindo o assunto do site. As melhores medidas que posso fornecer são 760 x 100-200, a altura é a preferência e também depende de para onde a barra de menu estará indo. A largura é 760 para que se encaixe nas janelas do navegador mesmo executando 800x600 res em monitores (não adianta se você não puder ver metade do site) Seu botão de menu (se você optar por torná-los não deve ser muito alto, eu recomendo 30 pixels de altura e a largura depende de muitas coisas, mas os meus são geralmente entre 100 - 1500 pixels. Então, novamente, você pode usar botões de flash que não exigem nenhum esforço de sua parte.

Etapa 5: Fazendo o modelo …

Portanto, agora escolhemos as cores do nosso site e outros enfeites, clicando com o botão direito na página em branco e indo para as propriedades da página. Para o meu o fundo vai ser preto, o texto branco e coloque o título como template agora. Você notará na imagem que todas as cores dos meus links estão definidas como azul, sugiro usar também o azul porque o azul é a cor tradicional do link e usar uma cor de link estranha estava no topo da lista de coisas que incomodam as pessoas sobre os sites e o que os torna pouco profissional.

Etapa 6: Continuação do modelo. o layout

Agora começamos nosso layout do modelo.

Clique no botão inserir mesa ou no botão desenhar mesa. Agora basta arrastar para fazer uma mesa, escolher 3x3 é um lugar prático para começar. A primeira coisa que você deve fazer é deixar sua mesa com 800 pixels de largura, você pode ver a largura na barra de propriedades na parte inferior, agora destaque a linha superior de células e clique com o botão direito, vá para a tabela no menu do botão direito e escolha mesclar células, faça com que a célula recém-formada tenha a altura de sua imagem de cabeçalho. Neste ponto, vá para as propriedades da tabela e coloque o valor zero para os valores de 'cellpad' e 'border'. Isso significa que a tabela não existe para o usuário final, mas mantém tudo no lugar. Agora vamos colocá-lo na imagem do cabeçalho que deve ser salva na pasta de imagens do site, mas se não for o dreamweaver irá perguntar se você deseja copiar o arquivo para lá. Para inserir uma aparência de imagem ao longo de sua barra de botões (a guia acima deles deve ser comum) encontre o botão com uma imagem de uma árvore em uma caixa (a maioria dos programas usa um símbolo semelhante) clique nele e uma caixa de diálogo aparecerá, apenas navegue até o seu arquivo e clique duas vezes nele. Se sua imagem apareceu no lugar errado, o cursor estava na célula errada. Agora que você está pegando o jeito da tabela, divida-se uma célula ao longo do lado que deseja na barra de menus, lembre-se de que as linhas estão cruzando as colunas ao longo do caminho. Deixe a caixa para a sua tabela de botões de menu tão larga quanto você achar que parece boa, então deixe seus botões da largura certa (ignore isto se você quiser botões de flash) Agora faça uma tabela dentro de sua célula com 1 linha e quantas colunas houver botões (você deve saber disso pelo seu plano do local, não posso ajudá-lo em nada, a escolha é sua) ou para um menu horizontal 1 coluna e tantas linhas quanto botões.

Etapa 7: Adicionando os botões do menu

Há algumas maneiras de fazer isto. Se você quiser botões de imagem simples (uma imagem clicável que se parece com um botão), insira a imagem normalmente e por enquanto isso é tudo. mais tarde, adicionaremos links para eles.

Se você quiser botões de rollover (a imagem muda quando o cursor está sobre a imagem do botão, então você precisa criar imagens para cada botão, digamos que você tenha alguns botões cinza escuro bonitos que deseja acender quando o usuário coloca o mouse sobre eles em seguida, você faz um segundo conjunto de botões que se acendem. Vá até o botão adicionar imagem cambiável na barra de ferramentas (ao lado ou próximo ao botão da imagem) e escolha o escuro para a imagem um e o claro para a imagem 2, novamente deixe o link por enquanto porque você não fez uma única página ainda. Se você quiser os botões flash, você precisa clicar na guia de mídia no topo da barra de ferramentas do botão e clicar no símbolo de inserir o botão flash (logotipo do flash com pequena barra no canto inferior.), Ele pedirá que você salve o documento antes de continuar, então salve-o como 'modelo base' ou algo que você saiba que significa o modelo principal do seu site.

Etapa 8: Criando o modelo para uso

Estamos quase terminando o nosso modelo e podemos começar em nossas páginas em breve, agora ele precisa de regiões editáveis (Locais para o conteúdo da página ir). Adicionamos isso com o botão direito e indo para o menu suspenso do modelo com o botão direito menu, escolha uma nova região editável e uma mensagem aparecerá dizendo que o documento será convertido em um modelo. Isso é bom. Faça isso com o cursor nas células da tabela para onde o conteúdo irá (aquelas abaixo e ao lado da barra de menu na minha)

Agora salve o documento, feche-o e vá para o novo arquivo e clique nas guias de modelos na parte superior, seu modelo deve estar lá, certifique-se de que a página de atualização quando a caixa de mudanças de modelo estiver marcada (salva muito trabalho depois).

Etapa 9: adicione algum conteúdo

Faça suas páginas adicionarem seu conteúdo e lembre-se de salvá-las nas pastas que você criou para páginas e colocar suas imagens na pasta de imagens que você também criou. Apenas repita o último trecho da etapa 8 sobre como fazer a página a partir de um modelo sempre que fizer um página. Observe o conteúdo falso que usei, é chamado Lorem Ispsum e é uma história sobre o bem e o mal em latim, web e designers gráficos usam isso para dar uma ideia de como o produto ficará com texto real. ele pode ser encontrado em Lipsum.com. Essas caixas azuis são as regiões editáveis que você também tem, espero.

Etapa 10: Agora fazemos nossos links

Abra o modelo que você usou (lembre-se da caixa de seleção, agora ele entra no jogo) No minuto em que os botões do menu são apenas imagens (se forem flash, veja abaixo) Agora que você tem páginas, eles podem ser botões reais, sejam imagens rollover ou normais, clique com o botão direito do mouse no botão home e vá para alterar link ou criar link (depende da versão) uma caixa de diálogo aparecerá, basta navegar até o arquivo da sua página inicial e clicar duas vezes nele. agora está vinculado à página, repita para o resto de seus botões e salve o documento, se o dreamweaver perguntar se deseja alterar todas as páginas com base no documento diga sim.

Para o botão flash, você se lembrará de que ignoramos a barra de links, então tudo o que fazemos é clicar com o botão direito no botão e clicar em editar, a tela anterior será exibida, basta clicar no botão de navegação ao lado da barra de links e encontrar seu arquivo. Agora que você deve ter um site funcional, a próxima etapa é repleta de alguns truques e coisas para páginas de fotos, etc. para tornar as coisas mais fáceis e funcionar melhor.

Etapa 11: Algumas dicas e ideias úteis

Se você estiver trabalhando no XP (possivelmente o Vista incluído), há um poderoso XP chamado redimensionador de imagens que permitirá que você redimensione suas fotos clicando com o botão direito e você pode fazer lotes e adicionar o polegar ao final de cada nome. Para uma galeria de fotos, use as miniaturas que você fez como imagens na página principal e vincule-as como botões ao arquivo de imagem maior, isso permite um carregamento mais rápido e menos páginas da galeria.

Para páginas com muito conteúdo, pode valer a pena dividir os links da página e da página anterior, isso é simples de fazer e tudo o que você faz é vinculá-los um ao outro e colocar o primeiro como o link do modelo ou de qualquer página ele está vinculado a partir de. Voltarei e adicionarei mais conforme penso neles ou conforme as pessoas os sugerem, isso é apenas o começo.

Etapa 12: Crie uma página de índice

No momento, a maioria dos hosts da web exige uma página de índice, que pode ser uma réplica da página inicial chamada 'index.htm' (esse é o nome que você terá) ou criar uma página descolada com enter site nela (se você ' re bom em flash você poderia ter uma animação para animar as coisas. Você deve sentir que está chegando perto daquele momento especial. Vá aqui …

Etapa 13: vamos conseguir um host

Agora você vai se encontrar no site para o qual te mandei, eu escolhi-o porque no que diz respeito a hosts gratuitos é ótimo e permite uma quantidade enorme de coisas, assim como armazenamento de 8gig e algo como 300 GB de largura de banda / mês.

Então siga os passos do cadastro e ative sua conta, nem olhe para aquele gerenciador de arquivos que não vamos precisar. Vá direto para sua conta e anote o nome de sua conta de FTP, o nome de usuário e a senha (igual à sua senha para a conta de hospedagem) Acessar sites, editar sites e escolher o seu vá para a guia avançado e vá para o servidor de teste (Eu sei que o meu está em informações remotas, mas testar o servidor é a maneira mais fácil de carregar o site), insira suas informações conforme mostrado na imagem.

Etapa 14: você pode sentir isso?

É hora de fazer o upload do site … Você está prestes a ter um site.

Vá até a barra de arquivos / ativos do seu site, sem dúvida parece muito diferente agora, clique no pequeno menu suspenso de visualizações e escolha o servidor de teste. Agora, o dreamweaver já salvou sua senha de FTP. Clique no botão conectar ao host remoto (aquele com três formas engraçadas). assim que disser que você está conectado, clique no botão colocar arquivos., esse é o botão que é uma seta apontando para cima. (Para uso posterior, você pode fazer logon na conta e usar obter arquivos para obter arquivos que possa ter perdido em seu computador.) Quando você clicar nisso, ele perguntará se deseja colocar todo o site no ar, certo que deve fazer com todo esse trabalho, para pequenas atualizações, você pode enviar arquivos de substituição. Quando chegar a 'index.htm', irá perguntar se deve substituí-lo, diga sim, caso contrário, o seu site irá cair após 15 dias, é por isso que o fizemos primeiro.

Etapa 15: Agora você quer um nome?

Então a ideia de ser um subsite está afetando seu ego, você tem opções, comprar um nome de domínio (não é caro sem hospedagem e você pode fazer.com.org.co.uk e.net escolher aquele que melhor se encaixa no seu nome. para o cara que quer tudo de graça, basta ir ao site dot tk Eles simplesmente espelham suas páginas, então quando você fizer isso tornar sua página inicial ou sua página de índice o link do site e escolher dizer killerjackalope.tk entendeu?

Etapa 16: Mais Qualquer Por Mais?

Agora, isso é uma resposta a uma questão candente e está sendo colocado no concurso do cortador a laser (último minuto), mas se você tiver alguma dúvida ou quiser alguma explicação extra do que apenas perguntar, se for pequeno eu responderei para você e se for uma boa, então irei adicionar uma etapa para que todos tenham a resposta para sua pergunta.

Também sei que é do tutorial anterior, mas tenho certeza que isso é o que acontece quando você tenta fazer um site no frontpage, é horrível e eu prefiro dizer para você roubar o dreamweaver do que comprar o frontpage. Em seguida, instrutível, como fazer fotos engraçadas do Hulk.