Primeiros Passos
Iniciar um novo projeto não é complicado, é essencial ter elementos bem colocados, defini-los e começar a trabalhar com eles.
Um dos elementos necessários para definir a largura do design do seu site. Um dos princípios de Web Design Responsive é capaz de envolver as diferentes resoluções de tela e estes tomam o primeiro lugar largura da tela. Com monitores atuais e resoluções Mays cada vez mais grave do princípio de que deve importar muito isso, mas um fato é que hoje os novos monitores são aqueles que capturar a maior parte do tráfego para sites. Os dispositivos móveis são os que ganharam a batalha e claramente como estamos percebendo é que ele está se tornando mais comum para sites de implementar recursos para tornar seus sites mais móvel amigável, como muitos outros, acreditam que é necessário fazer muitas mudanças para ajustar cada local para uma resolução de tela diferente, acreditamos que apenas um esforço, que pode ser maior no início, mas ao longo do tempo será a melhor opção.
A resolução da tela
Hoje temos padrões web, muitos dos quais são regidos e velho tecnologias, uma das quais é a resolução da tela. Sites da internet de hoje, a maioria tem um denominador comum, todos são escalados e concebido para ser lido perfeitamente em telas de um mínimo de 1024 pixels de largura. Também recomendamos que você olhar também para essa resolução, mas ainda um pouco mais visionário. A resolução da tela é de 1024 e só por isso sabemos que nosso projeto deve ser menor do que o tamanho, por quê? Simples, mas há elementos que podem interferir e causar problemas, por exemplo, a barra de rolagem. Recomendamos a criação de seus projetos em tamanhos entre 980 e 950 pixels de largura.Resolução da tela secundária
Como nós conversamos um pouco acima, há outras decisões que devem ser tomadas em conta para criar um web design flexível, estas medidas são essencialmente movendo tanto comprimidos ou smartphones.
Para este exemplo vamos tomar algumas outras resoluções, que serão 700 pixels, 480 pixels e 320 pixels. A decisão de tomar essas medidas, muitos dispositivos têm resoluções semelhantes, de modo que iriam cobrir uma série de dispositivos já existentes no mercado.
O HTML e CSS
Um elemento que você deve olhar para recriar os exemplos que você dá aqui é a sua habilidade em HTML e muito mais no CSS. A versão que você quer é ter conhecimento em HTML 4.1 e 2, no caso da CSS, mas se você é um Rockstar em CSS 3 e HTML 5, não importa, compreender melhor e mais rápido.
Começo
Já tem bases e uma casa, porque, no artigo seguinte, vamos começar a ver o começo do seu site flexível. Idealmente, você praticá-la a si mesmo e colocar suas habilidades ou aperfeiçoar ir.
Mãos
Criar um site a partir do zero para muitos pode ser intimidante, mas é o mais fácil de mundo. Para fazê-lo, como eu discuti no artigo anterior, é preciso saber um pouco de HTML e CSS, pelo menos, com isso podemos criar um bom produto.
Validação
Para iniciar com este site precisamos focar alguns pontos importantes a fazer conceito funcional.Começamos por definir os elementos do código de cabeçalho. Como sabemos em HTML5 já não é necessário adicionar a validação do documento. Para aqueles com experiência um pouco mais, lembre-se que há muito tempo (antes de a trama com HTML5) devemos acrescentar antes da validação <HTML> como é:
<DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 TRANSIÇÃO AL / / EN">
Mas agora, com a nova norma, se somarmos essa validação absolutamente nada acontece, o site funciona perfeitamente, mas se você ainda quer continuar com a estrutura, tudo o que você precisa fazer é adicionar:
<! DOCTYPE html>
Começando com o formated
O formatado realmente é muito simples, lembre-se que o tempo começamos a começamos com um código como este:
<html>
Bem, aqui é o mesmo, não há necessidade de acrescentar mais nada para começar. Uma boa dica é que cada vez que criar um rótulo é imediatamente fechado, por isso, se eu fosse você, no momento de escrever <html> adicionar a tag de fechamento </ html>
Agora, se nós vamos com os pontos especiais.
Em HTML e HTML5 são importantes seções que dão estrutura para o site, estas seções também estão divididos por etiquetas, que são:
<head>
Dentro desta seção, vamos adicionar os valores que lhe dão os estilos de página, descrições, nomes, entre outras coisas.
<body>
No corpo tem o conteúdo da página em questão, rege-se pelos ditames de elementos dentro da cabeça.
Se levarmos o que temos até agora, a nossa estrutura de código seria semelhante a este:
<! DOCTYPE html> <html> <head> </ head> <body> </ body> </ Html>
O próximo passo é na cabeça, como eu disse um pouco mais cedo, os dados que estão dentro do corpo tag será regido pelo o que o chefe diz que, a partir daqui, podemos acrescentar a partir do título, palavras-chave, estilos e para nós um ponto muito importante, a forma como a tela é exibida, dependendo do tamanho.
Então, vamos adicionar esses itens, o que seria algo como:
<title> meu site </ title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
O título, não tem qualquer dificuldade é simplesmente o grau em que se apresenta a página, altere o <meta> se é importante para nós, o que faz com que este último é dar um reset para os estilos definidos pelo dispositivo no que implantar o site.
O próximo passo é adicionar o link para a folha de estilo, como muitos sabem adicionar folhas de estilo externas para o código é comum e que alivia a carga da página. Nosso código parecido com este:
href = "style.css" <link rel="stylesheet" type="text/css">
Dentro destas folhas de estilo é o nosso segundo ponto importante é que nós vamos adicionar uma segunda folha de estilo. Por quê? Como vimos no artigo anterior, para fazer funcionar um projeto flexível, algo introduzido chamado consultas de mídia.
Consultas de mídia
Consultas de mídia são basicamente pedaços de código que permitem diferentes estilos para um elemento.
Este é um dos pontos-chave com os quais executam o nosso projeto. Embora pudéssemos adicioná-lo à folha de estilo mesmo que usamos para dar o design do site, eu gostaria de acrescentar que, independentemente de ter um melhor controle sobre ele.
O código para adicionar seria:
href = "media-queries.css" <link rel="stylesheet" type="text/css">
Conteúdo
Nós conversamos sobre o conteúdo que está na parte do corpo e é agora que vamos começar a usá-lo. Eu decidi que a melhor maneira de mostrar como isso funciona é combinar um pouco de HTML5, HTML4, CSS e CSS3, mas parecem muitas línguas, a idéia é levar a essência de cada um para tornar a vida mais agradável e obter os resultados desejados em um curto tempo.
O principal é saber como vamos estruturar nosso projeto, eu decidi criá-lo como se segue:
Cabeçalho e barra de navegação Título Conteúdo Rodapé
Como você vê na foto é uma maneira simples como mostrar o site, não pretende preenchê-lo com itens desnecessários que não vamos usar esse tempo, apenas o básico.
Cabeçalho
Para adicionar o nosso cabeçalho este é o nosso código:
<header>
<div id="nav">
<div id="title"> <a href = "#" <img fronteira src="img/title.png"> = "0"> </ a> </ div>
<div id="logos">
<ul id="horizontal">
<li> <a href="#" border="0"> <img src="img/dribbble.png"> </ a> </ li>
<li> <a href="#" border="0"> <img src="img/behance.png"> </ a> </ li>
<li> <a href="#" border="0"> <img src="img/twitter.png"> </ a> </ li>
<li> <a href="#" border="0"> <img src="img/pinterest.png"> </ a> </ li>
</ Ul>
</ Div>
</ Div>
<Cabeçalho />
Aqui vemos que há basicamente cinco imagens e estes são divididos por 3 divs que são "nav", "title" e "logos". Embora eu poderia ter feito isso de uma forma mais fácil de criar divs diferentes heder me dá melhor controle quando se joga com os mesmos elementos em cada resolução de tela.
O título
Para fazer isso eu vou ser baseada em outra tag do HTML5 o <hgroup> que também consistem em 2 divs dentro do grupo, eles são "subnav" e "caixa", eo código ficaria assim:
<hgroup>
<div class="subnav">
<div class="box">
<h2> Olá Bem-vindo ao meu site </ h2>
</ Div>
</ Div>
</ Hgroup>
Conteúdo
Conteúdo para o qual escolhe este momento era basicamente uma série de imagens que mostram meu trabalho recente, esta série de imagens ou miniaturas deve ter a capacidade de se auto-regular, dependendo do tamanho da tela do que para ver. A melhor opção era para adicionar um novo hgroup com divs diferentes para cada imagem, e o código seria como se segue:
<hgroup>
<div id="content">
<div class="portfolio">
<div class="thumbnail mask"> <a class="thumb" href="#"> <img src="img/xuntoz.jpg"> </ a> </ div>
</ Div>
</ Div>
</ Hgroup>
No espaço da imagem que pode adicionar a quantidade que quer fotos, não há realmente nenhum limite. O próximo passo é adicionar o rodapé
O rodapé
Para isso, vamos continuar os mesmos pagamentos como os conteúdos anteriores, tags HTML5 de diferenciação e algumas divs para controlar o estilo.
O código de rodapé seria como se segue:
<rodapé> <hgroup> <div class="left_footer"> <p> locais em que participam e você pode interessados </ p> <br /> class = "footer_list"> <ul <li class="footer"> <a class="menu" href="#"> Ok hospedagem </ a> </ li> <li class="footer"> <a class="menu" href="#"> Blog Honsting Ok </ a> </ li> <li class="footer"> <a class="menu" domínios href="#"> </ a> </ li> <li class="footer"> <a class="menu" href="#"> hospedagem </ a> </ li> </ Ul> </ Div> <div class="rigth_footer"> class="footer_right"> <ul <li class="footer_2"> <a class="menu" href="#"> Home </ a> </ li> <li class="footer_2"> <a class="menu" href="#"> Bio </ a> </ li> <li class="footer_2"> <a class="menu" href="#"> contato </ a> </ li> </ Ul> </ Div> </ Hgroup> <Rodapé />
Basicamente temos feito o nosso site, temos aparado imagens, títulos e acrescentou um pouco de cor a cada seção, mas não fizemos o nosso projeto é flexível, e é isso que vamos fazer a seguir.
Lembre-se que eu mencionei que não seria uma folha de estilo definida apenas para consultas de mídia, como este é onde vamos começar a usá-lo.
Começamos por definir o número de telas para que estilizam nossos projetos, cada tela é semelhante a uma querie diferente, eu explicar vou me concentrar em dois para notar a diferença, mas no arquivo para download, teremos estilos mais específicos.diferença, mas no arquivo para download, teremos estilos mais específicos.
0 comentários:
Postar um comentário