Jump to content

[Tutorial] Como criar um Layout Responsivo.


Recommended Posts

Olá!
 
Aproveitando minha volta ao Portal do Host, gostaria de salientar que estou voltando com os meus trabalhos com desenvolvimento front-end e quero voltar a ajudar a comunidade. Espero que não se incomodem com a minha presença. ^-^
Bom, hoje quero começar um tutorial para desenvolvermos juntos um layout responsivo para empresas de hosting. Posso contar com vocês?
 
Então vamos lá!
 
1º Organizando os arquivos e definindo tags principais.
 
Primeiro vamos criar a pasta do projeto (aqui eu defini a pasta como PDH) e em seguida crie uma sub-pasta chamada bibliotecas. Após, crie as pastas imagens e js dentro da pasta bibliotecas
Posteriormente crie os arquivos index.html estilos.css dentro da pasta do projeto.
 
Agora "chame" esses arquivos para o index.html. Como não temos mais que o estilo.css disponível, vamos chamar somente ele. Após a tag <title></title>, coloque o seguinte código:




[color=#808080]<link rel="stylesheet" href="estilo.css" type="text/css">
[/color]

Agora vamos chamar o Bootstrap, um mega framework que vai nos auxiliar com os resultados em responsive. Insira esses códigos acima do código que acabamos de inserir:




[color=#808080]<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
[/color]

Entre as tags <title></title> você vai definir o título da página correspondente ao seu projeto. O bootstrap permite que você adicione vários elementos como slides, menus de navegação e mais um monte de coisas.
Caso tenha feito tudo de acordo com post, o resultado no código será este:



d8iruX.jpg

 

 
2º Definindo estrutura e cores básicas.
 
Agora vamos definir uma parte importante do layout, o que vai chamar atenção do cliente assim que ele bater os olhos no site. Aqui vai do gosto de cada um, eu já defini minhas cores aqui e então vamos criar um *.css de base somente dedicado a essas cores. Lembrando que esse *.css de base está sujeito a modificações.
 
O resultado aqui é este:
 

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,800,700);
* {margin:0;padding:0;text-decoration:none;list-style:none}
body {border-top:5px solid #da3610;background:#fafafa;font:normal 13px 'Open Sans', sans-serif }
a {color:#da3610}
a:hover {color:#666564}

Obs: acabei importando uma fonte do Google Fonts para termos uma melhor tipografia. Caso queira escolher outra fonte, basta ir ao Google Fonts e escolher a que melhor se adequada ao seu gosto.
 
O resultado até agora foi este:
 

eCws2X.png

Bom pessoal...

 

Essa foi só uma introdução bem básica sobre o tutorial. Em breve publico a segunda parte, já que ainda tenho que escrever a mesma. Espero que gostem disso e que possam contribuir com recursos para podermos desenvolver um template bonito.

 

Inté!.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.

×
×
  • Create New...

Important Information

Do you agree with our terms?