Do autor: Olá amigos! Como os humanos, os sites têm seu próprio esqueleto, que pode ser visto em seu código. É improvável que um usuário comum, "caminhando" na Internet, examine o código HTML. Mas não apenas designers de layout - eles estão sempre interessados \u200b\u200bem ver o trabalho de outra pessoa. Escrever código limpo, equilibrado e compatível com o navegador é uma forma de arte. Hoje falaremos com você sobre como compreendê-lo, ou, em outras palavras, como aprender de forma rápida e eficaz como fazer o layout de páginas web.

Onde o layout começa?

O layout do site é uma descrição de seu componente visual pelo código do programa. Além disso, o site deve ter uma aparência e funcionar corretamente em qualquer navegador (seja cross-browser). Aprender como criar sites do zero deve começar com a criação de um layout PSD você mesmo, apesar do fato de que, em teoria, um web designer deveria criá-lo.

A principal tarefa do designer de layout é processar o material que chega até ele na forma de textos, imagens, catálogos, etc., e transformá-lo em páginas da web com base no web design aprovado.

No entanto, imagine que você é uma espécie de designer de layout 2 em um e, por algum motivo, teve que fazer o layout de um layout em vez de um designer que não se preocupa profundamente com seus problemas.

Para aprender rapidamente a desenhar layouts, por mais banal que pareça, você só precisa desenhar muitos deles. Ver sem fim o trabalho de outras pessoas também o ajudará muito. Ao fazer isso, preste atenção a todos os pequenos detalhes, quais cores, gradientes, fontes, recuos, etc. são usados.

Com o tempo, você mesmo começará a sentir o que parece bonito e o que não é. No início, você pode simplesmente pegar e copiar, por exemplo, os elementos da interface de outras pessoas. Isso o fará pensar sobre como esses mesmos elementos são construídos e de que são feitos. E então belos designs deixarão de ser algo mítico para você, porque você saberá como criar algo semelhante.

Ferramentas de layout de site

Em termos de ferramentas, muitos web designers usam Adobe Photoshop para criar interfaces. Você pode fazer o que quiser com este programa.

Tem gente que só trabalha com gráficos vetoriais e usa para criar layouts Ilustrador da Adobe.
E outro editor que não experimentei, mas que, segundo rumores, é uma alternativa bastante válida ao anterior, é o Sketch, mas só funciona no Mac OS.

Apresentando - HTML

A próxima etapa após renderizar o layout é seu layout e a criação de um modelo HTML. HTML é uma linguagem usada para marcar documentos na Internet e é interpretada pelos navegadores para facilitar a exibição como um documento.
Usamos a marcação HTML para marcar onde o texto, as imagens e os botões serão exibidos na página da web e em que ordem eles se seguirão. Os principais conceitos nesta linguagem são tags, atributos, elementos e entidades.

O recurso da web mais básico nada mais é do que uma coleção de páginas HTML. Se o site for estático, após o layout você realmente receberá sua versão final, e não apenas um template. Hoje em dia, esses sites, é claro, são muito raros. Todas as páginas da web modernas são geradas dinamicamente, usando alguma lógica do lado do servidor, que você mesmo escreve ou usará já pronto usando qualquer CMS (sistema de gerenciamento de conteúdo).

Sem essa lógica do lado do servidor, a maioria dos serviços online que usamos todos os dias e com os quais estamos acostumados seria impossível. No que diz respeito ao HTML, é uma linguagem completamente descomplicada.

Em Runet, há um grande número de aulas pagas no layout do site e outros materiais com uma base de aprendizado decente. Na minha opinião, aprender esse idioma sozinho não é um problema.

Melhorando - CSS

Depois de dominar os fundamentos do HTML, você pode ir direto para aprender CSS (folhas de estilo em cascata), que permitem definir fontes, cores, a localização de blocos individuais do site.

Em termos de CSS, posso recomendar um bom que o ajudará a construir uma carreira como designer de layout, mesmo que você não tenha nenhum conhecimento básico de webdesign e layout.

No entanto, gostaria de avisar que treinar para se tornar um designer de sites não é uma tarefa tão fácil. Existem muitas sutilezas e nuances no layout. Em geral, para que você possa olhar o layout e imaginar imediatamente a hierarquia de seus elementos, como exatamente eles podem ser dispostos e com a ajuda de quais propriedades, tudo isso requer muita experiência prática.

É obrigatório aprender todas as tags, atributos e propriedades HTML / CSS?

O HTML tem muitas tags e atributos diferentes, enquanto o CSS tem propriedades que podem ter valores diferentes. Portanto, muitos novatos estão preocupados com a questão: por onde começar o layout do site e você precisa memorizar todos esses valores, tags e propriedades?

Claro, se você tem uma memória fotográfica única, então não será difícil aprender tudo isso e, ao mesmo tempo, os três volumes de "Guerra e Paz" de cor. Caso contrário, você não precisa memorizar todas essas palavras.

No começo, quando você conhecer CSS, ainda estará olhando para o que cada propriedade e cada valor dessa propriedade faz. Com o tempo, você compreenderá o que pode ser feito usando folhas de estilo em cascata, e algumas dessas propriedades / valores serão depositados em sua cabeça de qualquer maneira. Bem, se você, claro, não sofre de amnésia

O mesmo vale para qualquer linguagem, incluindo JavaScript, PHP, etc. Qualquer coisa que você usar com frequência será lembrada por conta própria. Tudo o que você raramente usa, você pode espiar no livro de referência, que há muitos na rede. Não há nada de vergonhoso nisso e, vou lhe contar um segredo, todos os webmasters fazem isso.

Simplificamos o processo de layout

Para aqueles momentos em que você precisa criar rapidamente algum tipo de interface ou protótipo de algum site, existem frameworks CSS como Bootstrap. Ele permite que você se torne um webmaster, programador da web e designer de layout, tudo em um, sem conhecimento de folhas de estilo, linguagens de programação e marcação de hipertexto.

Quando você tiver um bom domínio de CSS e começar a digitar algo por si mesmo, único, pode não ter mais flexibilidade suficiente nesta linguagem e vai querer usar algum tipo de pré-processador CSS. Os pré-processadores removem todo o lixo do código CSS, tornam-no mais limpo e lógico, aumentam o grau de abstração usando variáveis \u200b\u200be outros "truques". Os pré-processadores mais populares são LESS, Sass e Stylus.

Acrobacia - JavaScript

Conforme você estuda tutoriais de layout de site mais avançados, encontrará HTML incluído elementos JavaScriptque tornam as páginas da web interativas. Se você planeja fazer não apenas o back-end, mas também o desenvolvimento do front-end, precisa conhecer JavaScript em um nível muito bom.

Além da linguagem em si, você precisa conhecer toda a infraestrutura que existe ao seu redor (bibliotecas, frameworks, interfaces de navegador, etc.). Pode levar de um ano para você dominar todos esses elementos e indefinidamente (dependendo se você tem uma vida pessoal).

Vamos resumir

Então, como você já, espero, entendeu, um designer de layout é uma profissão muito importante e antiga da Internet, que depende de:

velocidade de carregamento do site;

a adequação de sua exibição em navegadores diferentes;

adaptabilidade para várias telas de usuário;

conformidade com os padrões HTML e requisitos dos motores de busca.

É tudo por agora. Não se esqueça de se inscrever nas novidades do nosso blog, para não perder toda a diversão em aprender a montar sites do zero.

Até a próxima, queridos colegas e aqueles que estão apenas embarcando neste difícil, mas muito emocionante caminho de desenvolvimento web!

Você está interessado em uma pergunta como estudar o layout de sites você mesmo? Com a devida perseverança, todos podem estudar o layout dos sites.

Tópico da postagem de hoje: Por onde começar a estudar layout? Esta questão está longe de ser ociosa e cada um escolhe seu próprio caminho. Vou contar como comecei essa fascinante jornada pelo mundo Html e CSS. Espero que para alguns de vocês isso se torne, se não uma estrela-guia, pelo menos um guia para o objetivo.

Então, o que é layout do site? Se você ainda não está em um tanque, ouça: layout, neste caso, não significa digitar em letras iniciais um artigo novo no jornal Iskra, mas a transformação de um layout de site desenhado no Photoshop diretamente em um site funcional.

Em outras palavras, layout é codificação, gravação de dados em HTML que qualquer navegador que se preze transformará em um site bonito e compreensível.

Para um visitante comum do site, esse código permanecerá invisível, escondido atrás da parte de trás do navegador. No entanto, isso não significa de forma alguma que possa ser assim. O código deve ser bonito, conveniente e correto!

Então, por onde você começa a aprender HTML? A primeira coisa que me vem à cabeça é comprar um livro. E quanto mais grosso, melhor. Talvez alguém se beneficie com isso.

Mas pessoalmente, depois de alguma experiência com tais "tijolos", desenvolvi um claro reflexo de repulsão. Pela simples razão de que lá as informações são fornecidas em excesso.

Lembra da escola? O cidadão médio não precisa saber química, física, anatomia, etc., na medida em que está tentando situar-se no cérebro.

Então aqui: em um livro grosso há muito supérfluo, e quando há muito, turva os olhos, evoca um bocejo e transforma o treinamento em 2 a 3 dias de tormento, seguido por lançar essa ciência profundamente no forno. E isso é tudo.

Portanto, eu pessoalmente escolhi um caminho diferente. Eu comprei um livreto. Nem um pouco grosso. E ainda não me canso de recomendá-lo aos meus alunos, porque a relevância do livro ainda é recente e muito procurada. autor do livro Artemy Lomov, e é chamado "HTML, CSS, scripts: a prática de criar sites"... Editora "BHV-Petersburg".

Neste livro, tudo é moderado: há um pouco de história da web, um pouco de padrões. Mas o mais importante é que o material básico em HTML, CSS e JavaScript seja apresentado de forma bastante inteligível e simples. Para um iniciante aprender o layout de um site, ele é obrigatório!

Mas um livro não é suficiente. Meu método de estudo não é novo, mas também é muito eficaz. Você não precisa de um livro, mas de vários. O truque aqui é que cada autor escreve de maneira um pouco diferente. Quando você lê o mesmo tópico em diferentes variações, o quadro geral se torna claro muito mais rápido e é muito mais lembrado.

Meu segundo livro foi uma versão eletrônica de um tutorial sobre Dreamweaver da Macromedia, de autoria de Vladimir Dronov.

Em geral, para começar, é muito útil adquirir este programa. Dreamwiever é um editor visual que permite ver tanto o exterior quanto o interior do site. Ou seja, sua apresentação externa quanto para os visitantes, e interna - diretamente o código.

Uma grande vantagem deste programa é a capacidade de visualizar (novamente em modo dual) qualquer site que exista na rede.

Por exemplo, gostei de um site com uma colocação bonita e conveniente de blocos, salvei a página inteira com fotos e depois lancei esta página no Dream. E voila! Tudo é visível onde e o quê. Embora no início nem tudo seja tão óbvio como gostaríamos. Este livro é apenas um grande ajudante aqui.

Claro, eu não usei nenhum editores visuais, mas consigo sobreviver com um editor de texto simples como o PSPad. Mas uma experiência considerável foi adquirida. E o mais importante - versátil. É por isso que o próprio objeto é fácil e estruturado o suficiente para caber na cabeça.

A propósito, a estrutura é o fator mais importante no aprendizado de qualquer idioma. E o HTML também é uma linguagem. E falarei sobre essa estrutura na próxima vez.

Enquanto isso, compre alguns livros úteis. E leia meu blog Conselho Web. Aqui você também encontrará muitas dicas úteis para o layout de um site. Comece a aprender o layout do site com pelo menos.

UPD de 25.10.2012: Para iniciantes, recomendo este artigo - The Way of a Layout. Tudo é descrito com muito mais detalhes lá, com links e outras coisas úteis.

Do autor: Dia bom! Para os não iniciados, há algo misterioso e até, pode-se dizer, assustador no layout. Quando vamos ao site, vemos uma bela foto, uma estrutura esguia e um menu deslizante suavemente. Mas por trás de tudo isso está o trabalho de uma boa pessoa, um elo de ligação entre um web designer e um programador web - uma “eminência cinza” que não apenas criou o código para todos os elementos do site, mas também tentou fazê-los aparecer corretamente em todos os navegadores. Vamos falar sobre as nuances dessa profissão de internet e como se tornar um designer de layout do zero.

Não repita seus erros!

Como você sabe, o avarento paga duas vezes ou mais. No entanto, muitos sites aparentemente atraentes sofreram com a mesquinhez de seus clientes e, após um exame mais detalhado, possuem códigos nojentos. Freqüentemente, os sites são fixados às pressas em programas especiais que não são totalmente dominados. Como resultado, o código acaba sendo desajeitado, desordenado, inflexível e mais parecido com um dump do que uma linha organizada de tags HTML, propriedades CSS e scripts Java.

No futuro, economizar em um layout de alta qualidade pode representar um desserviço: devido ao código não otimizado, os custos de promoção do site aumentam, surgem problemas de compatibilidade entre navegadores (certos elementos do site são exibidos de forma inadequada em alguns navegadores e em diferentes usuários telas), e então tudo tem que ser redigitado. Choramingar ...

Mas não vamos repetir os erros desses aspirantes a construtores de sites? Se você está pensando em como se tornar um bom designer de layout, então comece imediatamente a estudar seriamente HTML e CSS e, no futuro, poderá dominar PHP, Java e outras linguagens de programação. Além disso, existem muitos cursos de vídeo excelentes sobre layout de HTML para iniciantes na Internet.

Como um designer de layout começa?

Como você já entendeu, o designer de layout desempenha o papel mais importante ao criar um site. Ele gera código de página da web usando linguagens de marcação HTML e XHTML usando folhas de estilo CSS em cascata.

JavaScript. Início rápido

Primeiro, um designer de layout recebe um layout de site de um web designer, na maioria das vezes no formato do programa Adobe Photoshop - um modelo PSD, que é um modelo para layout. O modelo reflete totalmente o design da futura página da web, seu tamanho e layout de todos os componentes (imagens, logotipo, botões, menus, etc.).

A principal vantagem do modelo PSD é que ele suporta uma estrutura de imagem em várias camadas. Isso significa que cada elemento do design está em uma camada separada, de modo que podem ser editados independentemente um do outro. Isso simplifica muito o layout, pois leva em consideração suas capacidades ao recriar um design com usando CSS e HTML.

Tendo admirado o layout, o designer de layout prossegue diretamente para o layout. Ele escreve cada elemento do site na forma de código HTML em um programa especial ou editor de textoprojetado para programadores como o Notepad ++.

Claro, para se tornar um compositor de HTML, você tem que praticar muito, aprender tags, atributos e propriedades. Neste artigo, não vou me alongar em explicar esse material, você mesmo pode descobrir, que, em minha opinião, até um colegial pode dominar.

Noções básicas de layout por exemplo

Por exemplo, vamos pegar um modelo básico de logotipo de 2 colunas que usaremos como imagem de fundo. O resto das partes são definidas usando HTML, e os tamanhos e estilos são definidos usando classes CSS.

O site em nosso exemplo consiste em "Conteúdo", "Barra lateral" e "Rodapé". A estrutura de uma página da web pode ser definida usando tags div. Cada elemento deve estar localizado em uma camada de contêiner de modelo separada. Por exemplo, as partes Conteúdo e Barra lateral estão dentro de uma camada:

JavaScript. Início rápido

Aprenda os fundamentos do JavaScript com um exemplo prático de construção de um aplicativo da web

< div class = "header" > < / div > < div class = "pages" > < div class = "content" > < h2 > Conteúdo< / h2 > < / div > < div class = "sidebar" > < h2 > Painel lateral< / h2 > < / div > < div class = "foot" > < / div > < / div > < div class = "footer" > < h2 > Porão< / h2 > < / div >

Usamos classes CSS para definir as configurações de estilo. O parâmetro background especifica a cor do background. Definimos as dimensões usando as propriedades de altura e largura. As margens das bordas superior, esquerda e direita da janela são definidas pelos valores margin-top, margin-left e margin-right.

A cor e o fundo são definidos imediatamente para o topo. O caminho para o corte da imagem do modelo PSD é especificado no campo especial da imagem de fundo.

Cabeçalho (margem esquerda: automático; margem direita: automático; margem inferior: 10px; largura: 1000px; altura: 100px; borda: 1px sólido # 000000; plano de fundo: # 009966; imagem de fundo: url (img / 1. gif);) .pages (margin-left: auto; margin-right: auto; width: 1000px;) .content (margin-right: 10px; width: 806px; height: 450px; border: 1px solid # 000000; background: # 999999; float: left;) .sidebar (width: 180px; height: 450px; border: 1px solid # 000000; background: # FF9900; float: left;) .foot (clear: both;) .footer (margin-top : 10 px; margin-left: auto; margin-right: auto; width: 1000 px; height: 50 px; border: 1 px solid # 000000; background: # 333399;)

Cabeçalho ( margem - esquerda: automático; margem - direita: automático; margem - inferior: 10px; largura: 1000px; altura: 100px; borda: 1px sólido # 000000; plano de fundo: # 009966; background - imagem: url (img / 1.gif); Páginas ( margem - esquerda: automático; margem - direita: automático; largura: 1000px; Conteúdo ( margem - direita: 10px; largura: 806px; altura: 450px; borda: 1px sólido # 000000; plano de fundo: # 999999; flutuar: esquerda; Barra Lateral ( largura: 180px; altura: 450px; borda: 1px sólido # 000000; plano de fundo: # FF9900; flutuar: esquerda; Esse layout permite a separação do estilo dos elementos do código HTML, bem como a possibilidade de sobrepor camadas umas sobre as outras. Facilita a criação de vários efeitos visuais: dicas de ferramentas, menus suspensos, listas, etc. O principal elemento do layout do bloco é a tag div que mencionamos anteriormente. Ele seleciona um determinado trecho de código em ambos os lados - uma camada. Todas as tarefas de estilo são movidas para fora dos limites do código HTML em CSS, que são acessados \u200b\u200busando classes ou IDs. Simplificamos o processo de layout Em geral, não é necessário puxar todo o fardo do conhecimento sobre o layout em sua corcunda. Na Internet, você pode baixar modelos pré-construídos ou usar estruturas CSS, por exemplo, Bootstrap. A beleza de usar este framework é que seus criadores já cuidaram de todas as nuances do layout (suporte para diferentes resoluções de tela, compatibilidade entre navegadores, etc.). Você só precisa especificar o que, quando e como exibir na tela, o Bootstrap faz o resto sozinho. Além disso, graças à sua popularidade, será mais fácil para seu colega completar seu código. Claro, os frameworks têm suas desvantagens, então como podemos ir sem eles? Suas ferramentas são mais adequadas para prototipagem e criação de páginas da web secundárias, como páginas de administração. Design mais específico é melhor para escrever com "canetas". Vamos resumir Na Internet, existem recursos com uma estrutura complexa e muito complexa, em que o layout é a etapa mais demorada na criação de um site. O posicionamento absoluto com código JavaScript e o aninhamento complexo de camadas complicam significativamente o trabalho de um designer de layout, mas ao mesmo tempo o tornam um dos mais bem pagos em Runet. Para se tornar um designer de sites do zero, você não precisará apenas passar por alguns, mas também colocar o máximo de desejo, esforço e tempo no negócio. Também é útil assinar as atualizações do nosso blog e ler regularmente artigos úteis que irão aumentar suas qualificações e, portanto, seu valor no mercado de trabalho. Boa sorte com o seu layout, e até breve nas páginas deste blog! JavaScript. Início rápido Aprenda os fundamentos do JavaScript com um exemplo prático de construção de um aplicativo da web

• Estilos são um conjunto de parâmetros que determinam a posição, aparência e funcionalidade dos elementos em uma página da web. A principal vantagem dos estilos é que eles fornecem muito mais opções de formatação, design e layout em comparação com o HTML que já é nativo para você. Este poderoso sistema pode ser montado em documentos separados, portanto, não se mistura com o código HTML. Esta é a base; mais, mais simples e claro - aqui: http://htmlbook.ru. Comece a se familiarizar com a seção “CSS” do “Auto-Tutorial”, e o livro de referência simplificará muito a compreensão de termos desconhecidos. No futuro, você também precisará da seção "Layout de bloco".
• Para aqueles que são particularmente persistentes e curiosos sobre programação, recomendamos os sites http://www.xiper.net, http://css-live.ru. Aqui estão os tutoriais que revelam os segredos do uso de técnicas "avançadas" de HTML e CSS. Se você possui língua Inglesa - certifique-se de visitar os recursos http://css-tricks.com/, http://net.tutsplus.com/, onde você pode encontrar não apenas texto, mas também tutoriais em vídeo.

Acrobacia - JavaScript!

Usar o JavaScript dará interatividade às suas páginas da web. Conforme você estuda esse layout mais avançado, incorpore gradualmente o JavaScript em seu HTML.

• Uma base de informações suficiente para aprender este idioma é de propriedade do recurso http://javascript.ru. Inclui muitos materiais essenciais, discussões e dicas para um ensino de qualidade.
• A primeira parte do livro de David Flanagan “JavaScript Guia detalhado”Será um ótimo guia para os fundamentos do JavaScript. A segunda parte descreve o ambiente de desenvolvimento para scripts fornecidos pelos navegadores. A terceira parte é uma referência extensa ao JavaScript básico e a quarta é o lado do cliente.
• Para simplificar a implementação do JavaScript em uma página web, é utilizada a biblioteca jQuery, também escrita em JavaScript. O site oficial http://jquery.com e o livro "jQuery A Comprehensive Guide to Advanced JavaScript" (Ber Bibo, Yehuda Katz) fornecem uma maneira fácil de explicar tudo o que você precisa saber sobre a linguagem.
• A estrutura modular gratuita Mootools fornece assistência significativa no desenvolvimento de JavaScript.

Pequenos truques de grandes mestres

Mesmo para designers de layout experientes, estamos prontos para fornecer informações que podem melhorar significativamente o trabalho. O site hthttp: //www.xiper.net definitivamente será útil para criar um código de layout otimizado. Siga as seções “Aprendizagem” e “Técnicas Prontas”, que contêm soluções e tecnologias avançadas para o uso de scripts.

Existem também muitos serviços para otimizar o layout. Recomendamos prestar atenção aos recursos dedicados a este tópico:

1. http://www.google.com/webfonts ; - fornecerá uma coleção de fontes que você pode conectar às suas páginas.
2. http://www.fontsquirrel.com/fontface/generator - Converte qualquer fonte e gera CSS para ser colado em uma folha de estilo.
3. http://stm.dp.ua/web-design/color-html.php - uma ampla gama de cores e seus códigos.
4. O CSS Sprite Service reduzirá o número de solicitações HTTP para downloads de imagens que seu site envia. O artigo http://www.xiper.net/collect/html-and-css-tricks/overclock-site/sprite.html vai lhe dizer mais sobre isso.
5. A seção "Validação de documentos" no site http://htmlbook.ru irá familiarizá-lo com o conceito de validadores. O código de cada página deve estar de acordo com a especificação desenvolvida pelo Consórcio W3 www.w3c.org. Vários exemplos de validadores (código html e validação de código css) são fornecidos aqui: http://validator.w3.org/, http://jigsaw.w3.org/css-validator/.
6. http://caniuse.com - cross-browser checker - um serviço que ajudará a evitar a exibição de layout diferente em vários navegadores.

+ Bônus agradável prometido

Se a sua sede de conhecimento profissional ainda não foi totalmente satisfeita, nos apressamos em agradar - isso não é tudo. Você também pode aprender HTML e CSS usando a seguinte literatura:

• Mark Pilgrim “HTML5. Funcionando "
• Eric Meyer “CSS - Cascading Style Sheets: A Comprehensive Guide”
• Peter Lubbers, Brian Albers, Frank Salim "HTML5 para profissionais: ferramentas poderosas para o desenvolvimento de aplicativos da Web modernos"
• Stephen Schafer “HTML, XHTML e CSS. Bíblia do usuário "
• Eric Freeman, Elizabeth Freeman "Aprendendo HTML, XHTML e CSS".

P.S. Depois de tomar a decisão de aprender HTML, pare de usar editores especiais. Escreva em um notebook normal ou Notepad ++, isso o ajudará a adquirir rapidamente as habilidades necessárias. Se você é um defensor da comunicação interativa - torne-se um convidado frequente de fóruns especializados:

• http://www.cyberforum.ru/html/
• http://ru.html.net/forums/viewforum.php?f\u003d49
• http://www.html.by/
• http://forum.htmlbook.ru/

Peça conselhos a colegas mais experientes, compartilhe seu próprio conhecimento com os recém-chegados!

Esperamos que este artigo seja um guia valioso para você no aprendizado de programação. O próximo material será dedicado à linguagem do lado do servidor de programação PHP.

, , ... Agora ele pode ser usado apenas para criar as próprias tabelas, mas não para a página inteira, esta é uma tecnologia há muito desatualizada, foi completamente substituída por layout de bloco. Não vou negar que o layout de blocos é mais difícil de aprender, mas tem muitas vantagens sobre o layout tabular.

Layout de bloco

Como você deve ter adivinhado acima, este artigo se concentrará no layout do bloco, se o artigo anterior era, como um introdutório, agora trataremos mais especificamente de um exemplo - como fazer um site do zero... Durante meu estudo de layout, estava em busca de um manual detalhado sobre como criar passo a passo até mesmo a página html mais simples. Neste artigo, quero considerar cada linha de código com o máximo de detalhes possível e explicar os princípios de trabalho com html, para que qualquer novato neste negócio possa entender. Espero poder fazer isso. 🙂

Então, vamos começar. Por exemplo, peguei um protótipo simples, não pode ser chamado de layout, um layout normal é desenhado em formato psd, mas temos em jpg. O principal para nós é entender o princípio de como criar sites usando layout de blocos.Para trabalhar com layout de blocos, você precisa saber não só html, mas também css (folhas de estilo em cascata). Durante a série de artigos sobre layout do site, estamos apenas com você e estudaremos esse conjunto estilos css, que no futuro sempre ajudará você a fazer quase todos os wireframes de layouts / mockups, porque o princípio é o mesmo.

Então aqui está o layout (clicável).

Vemos 4 partes lógicas disso:

• Cabeçalho do site (doravante referido como cabeçalho, cabeçalho);
• Coluna da esquerda (doravante referida como barra lateral esquerda);
• Coluna da direita (doravante referida como conteúdo);
• Rodapé (doravante chamaremos rodapé, rodapé);

Então, é claro, vamos começar com o bloco de cabeçalho. Temos uma maquete de 1000 pixels de largura (px).

Para começar, direi que o layout é feito usando tags html. Por exemplo,