Mudanças entre as edições de "Criar página de "Site em manutenção""

De Task Wiki
Ir para: navegação, pesquisa
 
(16 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 12: Linha 12:
 
Abaixo, disponibilizamos tutorial para criação de uma página simples de "Site em manutenção" com sua logomarca e dados de contato (e-mail e telefone):<br><br>
 
Abaixo, disponibilizamos tutorial para criação de uma página simples de "Site em manutenção" com sua logomarca e dados de contato (e-mail e telefone):<br><br>
 
<br>
 
<br>
[[Arquivo:elipse_1.png]] Primeiramente, será preciso fazer o download do arquivo '''index.html''' e então alterar os campos destacados dentro do próprio código;<br>
+
[[Arquivo:elipse_1.png]] Primeiramente, deverá copiar o código abaixo e colar em um editor de textos simples (exemplo 'Bloco de notas') e salvar o arquivo com nome '''index.html'''<br>
 
<br>
 
<br>
[[Arquivo:elipse_2.png]] Em seguida, deverá salvar o arquivo mantendo o nome original e envia-lo juntamente com a imagem (logo do seu site) ao nosso servidor (para enviar os arquivos, basta seguir o tutorial sobre '''FTP'''; <br>
+
<pre>
 +
<html lang="en">
 +
<head>
 +
  <meta charset="UTF-8">
 +
  <title>TÍTULO DO SITE</title>
 +
  <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
 +
  <style>
 +
    body{
 +
      font-family: 'Titillium Web', sans-serif;
 +
      color: #666666;
 +
      text-align: center;
 +
    }
 +
    .box{
 +
      background-color: #fff;
 +
      width: 500px;
 +
      margin: 50px auto;
 +
    }
 +
    #title {
 +
      font-size: 30px;
 +
      margin-top: 25px;
 +
    }
 +
    #descricao{
 +
      font-size:20px;
 +
      margin: 20px auto;
 +
    }
 +
    #logo {
 +
      margin-top: 25px;
 +
      max-width: 365px;
 +
      height: auto;
 +
    }
 +
    #logo-task {
 +
      width: 75px;
 +
    }
 +
  </style>
 +
</head>
 +
<body>
 +
  <div class="box">
 +
    <img src="logo.png" id="logo">
 +
    <div id="title">
 +
      SITE EM MANUTENÇÃO
 +
    </div>
 +
    <div id="descricao">
 +
      (99) 99999-9999<br>
 +
      falecom@task.com.br
 +
    </div>
 +
    <a href="http://task.com.br" target="_blank">
 +
      <img src="https://www.task.com.br/img/task/img-task-instagram.jpg" id="logo-task">
 +
    </a>
 +
  </div>
 +
</body>
 +
</html>
 +
</pre>
 +
<br>
 +
[[Arquivo:elipse_2.png]] Em seguida, abra o arquivo salvo (index.html) e altere os campos destacados abaixo dentro do próprio código:<br>
 +
Procure por '''TÍTULO DO SITE''' e altere para outro de sua preferência;<br>
 +
Procure pelo telefone de contato '''(99) 99999-9999''' e altere por seu número de telefone;<br>
 +
Procure pelo e-mail de contato '''falecom@task.com.br''' e altere por seu e-mail de contato;<br>
 +
Procure por '''logo.png''' e altere para o mesmo nome do arquivo de imagem com a logo de seu site;
 +
<br>
 +
<br>
 +
[[Arquivo:elipse_3.png]] Salve o arquivo;<br>
 +
<br>
 +
[[Arquivo:elipse_4.png]] Por fim, deverá enviar o arquivo "index.html" e o arquivo de imagem com sua logo ao nosso servidor (para enviar os arquivos, basta seguir o tutorial sobre [https://wiki.task.com.br/index.php/Gerenciador_de_FTP_-_Filezilla FTP];<br>
 +
<br>
 +
[[Arquivo:elipse_5.png]] Ao finalizar o envio dos arquivos, poderá testar o site pelo seu navegador de internet.<br>
 
<br>
 
<br>
[[Arquivo:elipse_3.png]] Ao finalizar o envio dos arquivos, poderá testar o site pelo seu navegador de internet.<br>
 

Edição atual tal como às 18h17min de 15 de fevereiro de 2021

Abaixo, disponibilizamos tutorial para criação de uma página simples de "Site em manutenção" com sua logomarca e dados de contato (e-mail e telefone):


Elipse 1.png Primeiramente, deverá copiar o código abaixo e colar em um editor de textos simples (exemplo 'Bloco de notas') e salvar o arquivo com nome index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TÍTULO DO SITE</title>
  <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
  <style>
    body{
      font-family: 'Titillium Web', sans-serif;
      color: #666666;
      text-align: center;
    }
    .box{
      background-color: #fff;
      width: 500px;
      margin: 50px auto;
    }
    #title {
      font-size: 30px;
      margin-top: 25px;
    }
    #descricao{
      font-size:20px;
      margin: 20px auto;
    }
    #logo {
      margin-top: 25px;
      max-width: 365px;
      height: auto;
    }
    #logo-task {
      width: 75px;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="logo.png" id="logo">
    <div id="title">
      SITE EM MANUTENÇÃO
    </div>
    <div id="descricao">
      (99) 99999-9999<br>
      falecom@task.com.br
    </div>
    <a href="http://task.com.br" target="_blank">
      <img src="https://www.task.com.br/img/task/img-task-instagram.jpg" id="logo-task">
    </a>
  </div>
</body>
</html>


Elipse 2.png Em seguida, abra o arquivo salvo (index.html) e altere os campos destacados abaixo dentro do próprio código:
Procure por TÍTULO DO SITE e altere para outro de sua preferência;
Procure pelo telefone de contato (99) 99999-9999 e altere por seu número de telefone;
Procure pelo e-mail de contato falecom@task.com.br e altere por seu e-mail de contato;
Procure por logo.png e altere para o mesmo nome do arquivo de imagem com a logo de seu site;

Elipse 3.png Salve o arquivo;

Elipse 4.png Por fim, deverá enviar o arquivo "index.html" e o arquivo de imagem com sua logo ao nosso servidor (para enviar os arquivos, basta seguir o tutorial sobre FTP;

Elipse 5.png Ao finalizar o envio dos arquivos, poderá testar o site pelo seu navegador de internet.