O tutorial de hoje ensinará como usar o div+css para cortar a página do PSD em páginas HTML. Este site sempre fez muito poucos tutoriais, e a maioria deles é relativamente fragmentária. No futuro, publicaremos e traduziremos lentamente mais tutoriais como este.
Primeiro olhe para o efeito
A imagem abaixo são as representações. Depois de cortá -lo, a cabeça e o fundo podem ser mais largos ...
Crie uma nova pasta
Para começar, crie uma pasta no seu computador. Eu o chamei de zmool. Em seguida, crie novas imagens de pasta na pasta e coloque todas as imagens do site. Em seguida, abra o editor de código (Dreamweaver) e crie um arquivo html chamado index.html no diretório raiz, que é o nosso modelo de página inicial. Agora crie um novo arquivo CSS e nomeie -o o arquivo style.css. Como mostrado na figura abaixo:
Abra o arquivo index.html. Na parte superior da etiqueta da cabeça, adicione o link à sua folha de estilo (style.css). Você pode usar o seguinte código.
<link href = style.css rel = stylesheet type = text /css />
O código do cabeçalho é o seguinte:
<! Doctype html public -// w3c // dtd xhtml 1.0 transitório // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <title> Modern Design Studio </ititle> <link href = style.css rel = stylesheet type = text/css/> </head> <body> </body> </html>
Crie estrutura HTML
Agora, configuraremos a estrutura do arquivo HTML. Defina 3 seções (título, conteúdo, rodapé) como abaixo:
<! Doctype html public -// w3c // dtd xhtml 1.0 transitório // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <título>
Corte de fundo
Nosso arquivo PSD contém muitos efeitos de textura. Precisamos cortar tudo isso e adicioná -los à página da web com código para tornar o efeito da página div consistente com o efeito do design.
<body> <div id = cabeçalho> <div id = contêiner> </div> </div> <div id = content> <div id = container> </div> </div> <div id = rodapé> <div id = container> </div> </div> </body>
Agora abra a camada originalmente projetada no Photoshop, oculte -a, exceto a camada de fundo.
Agora pegue a ferramenta de fatiamento, selecione o plano de fundo, salve o formato da web da página da web (alt + shift + ctrl + s). Em seguida, o arquivo de pasta de imagem salvo é nomeado Background.jpg.
Defina o estilo de fundo
Abra o arquivo style.css, defina o estilo básico, o estilo de fundo e a largura da parte principal, como segue:
* {margem: 0px; preenchimento: 0px;} corpo {background: url (imagens/background.jpg);}#contêiner {margem: auto; Largura: 960px;}Corte a cabeça
Volte ao Photoshop, oculte a chamada camada, exceto o fundo da cabeça e use o mesmo método para cortar a imagem do fundo da cabeça no formato da Web e salve o nome do arquivo como Head.jpg.
Edite o código de fundo da cabeça
Edite o seguinte código no arquivo style.css:
#Header {Background: url (imagens/header.jpg); altura: 124px;}Corte o logotipo da cabeça
Neste momento, corte a camada do logotipo e oculte todas as camadas, incluindo a camada de fundo. Corte a camada de logotipo do mesmo método acima para salvá -lo como logo.png. Nota: Salve -o como imagem de formato PNG.
Adicionar para adicionar logotipo na página
Agora retorne ao HTML e adicione o seguinte código <div id = logotipo>…. </div> em #Header #Container.
<div id = cabeçalho> <div id = contêiner> <div id = logo> <a href =#> <img src = imagens/logo.png> </a> </div> </div> </div>
Agora, mude para o arquivo style.css abaixo e escreva o estilo #logo.
#logo {margin-top: 20px; borda: nenhum;}Editar código de navegação
Abaixo está o código na página. O cabeçalho inclui duas partes: logotipo e navegação.
<div id = cabeçalho> <div id = contêiner> <div id = logo> <a href =#> <img src = imagens/logo.png> </a> </div> <ul> <li> <a href =#> <li> <a href =#> blog </a> </li> <li> <a href =#> contato </a> </li> </div> </div>
O estilo de navegação é o seguinte:
Agora, adicione os estilos de navegação na tabela CSS ~, ul, li e vincule um estilos:
#Header li {cor:#959595; estilo de lista: nenhum; float: esquerda; margem-direita: 20px; font-family: Myriad Pro, Arial; Fonte-peso: BOLD; font-size: 24px;}#cabeçalho Li a {cor:#959595; ul {float: direita; margem-top: -40px;}#cabeçalho li a: hover {background:#202020; cor:#d2d2d2; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px;}Agora faça a parte do meio
Agora, adicionamos duas divs à parte do meio do conteúdo da página, conforme mostrado na figura abaixo:
<div id = content> <div id = contêiner> <div id = destacado> </div> <div id = paragraphs> </div> </div> </div>
Mude para a página do Photoshop PSD, corte a parte do meio e nomeie -se que ele tenha apresentado.jpg. A figura a seguir:
Adicione o código a seguir à sua página HTML e alguma introdução de texto:
<div id = content> <div id = contêiner> <div id = destacado> <a href =#> mais projetos </a> Neste tutorial, mostrarei como criar um layout limpo do portfólio azul. Você já quis criar design de portfólio limpo e agradável? Neste tutorial, mostrarei como criar um layout limpo do portfólio azul no Adobe Photoshop.
No arquivo PSD, oculte outras camadas chamadas, deixe apenas a parte da camada de botões, corte a parte do botão, salve o formato PNG e nomeie-o botão.png.
Agora, adicionamos essas imagens à página, mudamos para a página do arquivo CSS e adicionamos o código a seguir, que inclui o estilo de fundo e o estilo de botão.
#FEATURED {Background: URL (imagens/destaque.jpg) No-repetir; altura: 381px; margem-top: 30px; margem-esquerda: 80px;}#em destaque A {Background: URL (imagens/botão.png); altura: 30px; largura: 124px; texto-indent: -9999px; posição: absoluto; margem-top: 330px; margem-left: 180px;}#apresentou a: curto {posição de fundo: 0px 30px;}Agora vamos adicionar alguns estilos de DummyText:
.DUMMYTEXT {Color:#d2d2d2; largura: 245px; margem-top: 150px; posição: absoluto; família de fontes: arial, helvetica, sans-serif; font-size: 12px; span {font-size: 16px; cor:#191919; font-peso: negrito;}A seguir, é adicionado para adicionar imagens para exibir a seguinte seção de introdução de categoria
A parte do código da página é a seguinte.
<div id = parágrafos> <p> <p> belo </span> webdesignfan é um blog relacionado ao design sobre web design, photoshop, brindes e tutoriais. Publicamos informações úteis dedicadas a web designers e desenvolvedores. Aqui você pode encontrar recursos gratuitos, como vetores, temas do WordPress e muita inspiração. </p> <p> <pan> eficaz </span> webdesignfan é um blog relacionado ao design sobre web design, photoshop, brindes e tutoriais. Publicamos informações úteis dedicadas a web designers e desenvolvedores. Aqui você pode encontrar recursos gratuitos, como vetores, temas do WordPress e muita inspiração. </p> <p> <span> funcional </span> webdesignfan é um blog relacionado ao design sobre web design, photoshop, brindes e tutoriais. Publicamos informações úteis dedicadas a web designers e desenvolvedores. Aqui você pode encontrar recursos gratuitos, como vetores, temas do WordPress e muita inspiração. </p> </div>
O conteúdo da nossa parte do meio deve ser assim:
<div id = content> <div id = contêiner> <div id = destacado> <a href =#> mais projetos </a> Neste tutorial, mostrarei como criar um layout limpo do portfólio azul. Você já quis criar design de portfólio limpo e agradável? Neste tutorial, mostrarei como criar um layout limpo do portfólio azul no Adobe Photoshop. Publicamos informações úteis dedicadas a web designers e desenvolvedores. Aqui você pode encontrar recursos gratuitos, como vetores, temas do WordPress e muita inspiração. </p> <p> <pan> eficaz </span> webdesignfan é um blog relacionado ao design sobre web design, photoshop, brindes e tutoriais. Publicamos informações úteis dedicadas a web designers e desenvolvedores. Aqui você pode encontrar recursos gratuitos, como vetores, temas do WordPress e muita inspiração. </p> <p> <span> funcional </span> webdesignfan é um blog relacionado ao design sobre web design, photoshop, brindes e tutoriais. Publicamos informações úteis dedicadas a web designers e desenvolvedores. Aqui você pode encontrar recursos gratuitos, como vetores, temas do WordPress e muita inspiração. </p> </div> </div> </div>
Vá ao seu arquivo CSS e adicione o seguinte código.
#paragraphs span {font-family: Myriad Pro, Helvetica, Sans-Serif; Size da fonte: 22px; peso da fonte: 600; espaçamento com letra: -2px;}#parágrafos {margin-left: 80px; font-family: arial, helvetica, Sans-serif; cor:#191919; tamanho da fonte: 12px; margem-top: 15px;}.Isso é o que fizemos até agora:
A parte inferior do site é tratada abaixo
Agora que terminamos essa parte, começaremos a criar o rodapé.
Primeiro, no seu arquivo PSD, oculte outras camadas, exceto as camadas de textura do rodapé e rodapé, e depois corte e salve o material da pasta de rodapé como rodapé.jpg.
Em seguida, corte -o novamente e corte o botão e os gráficos de pássaros. Nome It Siga.png e Bird.jpg, respectivamente.
Edite o código inferior
O rodapé inferior inclui algum texto e uma imagem do pássaro com um link.
Portanto, adicione o código a seguir à página HTML.
<div id = rodapé> <div id = contêiner> <p> 2010? Estúdio de design ficcional. Design de WebDesignfan.
Agora, edite o código de estilo rodapé na parte inferior da seguinte forma:
#footer {Background: url (imagens/footer.jpg); altura: 71px; margin-top: 191px;}#Footer p {Font-Family: Arial, Helvetica, sans-sef; a {Background: URL (imagens/siga.png); texto-indent: -9999px; posição: absoluto; altura: 27px; largura: 124px; margem-left: 730px; margin-top: 30px;}##Foother IMG {Float: Direito; Margin-top: 10px;};Utilizamos o Footer.jpg como plano de fundo do rodapé e adicionei alguns estilos de texto.
Para o link para a imagem do pássaro na parte inferior, usamos o mesmo método antes, usando o efeito flutuante para posicioná -lo.
Efeito final
Download de arquivo (0,7 MB)
Mesmo agora acabou. Não sei se você entende. Se você não entende, deixe uma mensagem. Se você não entende, eu vou adicioná -lo e modificar novamente, haha ~