Joao Vitor Posted July 7, 2015 Share Posted July 7, 2015 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 e 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: 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: 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é!. 1 Quote Link to comment Share on other sites More sharing options...
Joao Vitor Posted July 7, 2015 Author Share Posted July 7, 2015 (edited) Parte 2: Parte 3: Edited July 17, 2015 by Joao Vitor Fernish 0 Quote Link to comment Share on other sites More sharing options...
tekobr Posted July 9, 2015 Share Posted July 9, 2015 Meus parabéns, um excelente tutorial, esperava por algo assim a algum tempo. Ficarei aguardando a segunda parte! 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.