El tutorial de hoy le enseñará cómo usar Div+CSS para cortar la página PSD en páginas HTML. Este sitio web siempre ha realizado muy pocos tutoriales, y la mayoría de ellos son relativamente fragmentarios. En el futuro, publicaremos y traduciremos lentamente más tutoriales como este.
Primera mira al efecto
La imagen a continuación son las representaciones. Después de cortarlo, la cabeza y la parte inferior pueden ser más anchas ...
Crea una nueva carpeta
Para comenzar, cree una carpeta en su computadora. Lo llamé Zmool. Luego cree nuevas imágenes de carpetas en la carpeta y coloque todas las imágenes del sitio web. A continuación, abra el editor de códigos (DreamWeaver) y cree un archivo HTML llamado index.html en el directorio raíz, que es nuestra plantilla de página de inicio. Ahora cree un nuevo archivo CSS y fíjelo en el archivo style.css. Como se muestra en la figura a continuación:
Abra el archivo index.html. En la parte superior de la etiqueta de la cabeza, agregue el enlace a su hoja de estilo (style.css). Puede usar el siguiente código.
<link href = style.css rel = stylesheet type = text /css />
El código de encabezado es el siguiente:
<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = UTF-8/> <title> Modern Design Studio </title> <link href = style.css rel = stylesheet type = text/css/> </head> <body> </body> </html>
Crear estructura HTML
Ahora, configuraremos la estructura del archivo HTML. Establecer 3 secciones (título, contenido, pie de página) como a continuación:
<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; Charset = UTF-8/> <title> Documento sin título </title> <link rel = stylesheet type = text/css href = style.css/> </head> <body> <divid = header> </div> <div it = content> </div Id = pie> </div> </body> </html>
Fondo de corte
Nuestro archivo PSD contiene muchos efectos de textura. Necesitamos eliminar todo esto y luego agregarlos a la página web con el código para que el efecto de la página Div sea consistente con el efecto de diseño.
<body> <div id = header> <div id = contenedor> </div> </div> <div id = content> <div id = contenedor> </div> </div> <div id = pie> <div Id = contenedor> </div> </div> </body>
Ahora abra la capa diseñada originalmente en Photoshop, escúchala, excepto por la capa de fondo.
Ahora tome la herramienta de corte, seleccione el fondo, guarde el formato web de la página web (Alt + Shift + Ctrl + S). Luego, el archivo de carpeta de imagen guardado se llama fondo.jpg.
Establecer un estilo de fondo
Abra el archivo style.css, establezca el estilo básico, el estilo de fondo y el ancho de la parte principal, como sigue:
* {margen: 0px; Padding: 0px;} cuerpo {fondo: url (imágenes/fondos.jpg);}#contenedor {margin: auto; Ancho: 960px;}Cortar la cabeza
Regrese a Photoshop, oculte la llamada capa, excepto el fondo de la cabeza, y use el mismo método para cortar la imagen de fondo de la cabeza en formato web, y guarde el nombre del archivo como head.jpg.
Editar el código de fondo principal
Edite el siguiente código en el archivo style.css:
#Header {Background: url (imágenes/header.jpg); altura: 124px;}Cortar el logotipo de la cabeza
En este momento, corte la capa del logotipo y oculte todas las capas, incluida la capa de fondo. Corta la capa del logotipo como el mismo método que el anterior para guardarla como logo.png. NOTA: Guardo como imagen de formato PNG.
Agregar para agregar logotipo en la página
Ahora vuelva a HTML y agregue el siguiente código <div id = logo>…. </div> en #Header #Container.
<div id = header> <div id = contenedor> <div id = logo> <a href =#> <img src = images/logo.png> </a> </div> </div> </div>
Ahora, cambie al archivo style.css a continuación y escriba el estilo #logo.
#logo {margin-top: 20px; border: none;}Editar código de navegación
A continuación se muestra el código en la página. El encabezado incluye dos partes: logotipo y navegación.
<Div ID = Header> <Div Id = Container> <Div Id = logo> <a href =#> <img src = image/logo.png> </a> </iv> <ul> <li> <a href =#> blog </a> </li> <li> <a href =#> contactar </a> </li> </div> </div>
El estilo de navegación es el siguiente:
Ahora, agregue los estilos de navegación en la tabla CSS ~, UL, Li y Link A Styles:
#Header Li {Color:#959595; list-style: none; float: left; margin-right: 20px; font-family: myriad pro, arial; font-weight: bold; font-size: 24px;}#Header li a {color:#959595; Decoración de texto: Ninguno; Padding: 10px;}#Header Header ul {float: right; margin-top: -40px;}#encabezado li a: hover {fondo:#202020; color:#d2d2d2; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px;}Ahora haz la parte media
Ahora agregamos dos divs a la parte media del contenido de la página, como se muestra en la figura a continuación:
<div id = content> <div id = contenedor> <div id = presentador> </div> <div id = párrafo> </div> </div> </div>
Cambie a la página de Photoshop PSD, corte la parte media y asígnele el nombre. JPG. La siguiente figura:
Agregue el siguiente código a su página HTML y alguna introducción de texto:
<div id = content> <div id = contenedor> <div id = presentado> <a href =#> Más proyectos </a> <p> <span> Proyecto de cartera, 5 de enero de 2010 </span> ¿Alguna vez ha querido crear un diseño de cartera limpio y agradable? En este tutorial le mostraré cómo diseñar un diseño de cartera de cartera azul limpio. ¿Alguna vez has querido crear un diseño de cartera limpio y agradable? En este tutorial le mostraré cómo diseñar un diseño de cartera de azul limpio en Adobe Photoshop. </p> </div> <div ID = párrafos> </div> </div> </div>
En el archivo PSD, oculte otras llamadas capas, deje solo la parte de la capa del botón, corte la parte del botón, guarde el formato PNG y lo hágalo button.png.
Ahora agregamos estas imágenes a la página, cambiamos a la página del archivo CSS y agregamos el siguiente código, que incluye el estilo de fondo y el estilo de botón.
#Featued {Background: URL (Images/Stened.jpg) No-Repeat; Altura: 381px; Margin-Top: 30px; Margin-Left: 80px;}#Presentado a {fondo: url (imágenes/botón.png); altura: 30px; ancho: 124px; text-indent: -99999px; posición: absoluto; margin-top: 330px; margen-izquierda: 180px;}#presentó un: hover {posposición de fondo: 0px 30px;}Ahora agregemos algunos estilos de DummyText:
.dummyText {color:#d2d2d2; ancho: 245px; margin-top: 150px; posición: absoluto; fuente-familia: arial, helvetica, sans-serif; font-size: 12px; line-tight: 180%; margin-left: 290px;}. dummyText Span {Font-Size: 16px; Color:#191919; Font-Weight: Bold;}Se agrega lo siguiente para agregar imágenes para mostrar la siguiente sección de introducción de categoría
La parte del código de la página es la siguiente.
<div id = párrafos> <p> <span> hermoso </span> WebDesignfan es un blog relacionado con el diseño sobre diseño web, Photoshop, regalos y tutoriales. Publicamos información útil dedicada a diseñadores y desarrolladores web. Aquí puede encontrar recursos gratuitos como vectores, temas de WordPress y mucha inspiración. </p> <p> <span> efectivo </span> WebDesignfan es un blog relacionado con el diseño sobre diseño web, Photoshop, regalos y tutoriales. Publicamos información útil dedicada a diseñadores y desarrolladores web. Aquí puede encontrar recursos gratuitos como vectores, temas de WordPress y mucha inspiración. </p> <p> <span> funcional </span> WebDesignfan es un blog relacionado con el diseño sobre diseño web, Photoshop, regalos y tutoriales. Publicamos información útil dedicada a diseñadores y desarrolladores web. Aquí puede encontrar recursos gratuitos como vectores, temas de WordPress y mucha inspiración. </p> </div>
El contenido en nuestra parte media debería verse así:
<div id = content> <div id = contenedor> <div id = presentado> <a href =#> Más proyectos </a> <p> <span> Proyecto de cartera, 5 de enero de 2010 </span> ¿Alguna vez ha querido crear un diseño de cartera limpio y agradable? En este tutorial le mostraré cómo diseñar un diseño de cartera de cartera azul limpio. ¿Alguna vez has querido crear un diseño de cartera limpio y agradable? En este tutorial, le mostraré cómo diseñar el diseño de cartera de azul limpio en Adobe Photoshop. </p> </div> <div ID = párrafos> <p> <span> hermoso </span> Webdesignfan es un blog relacionado con el diseño sobre diseño web, photoshop, freebies y tutoriales. Publicamos información útil dedicada a diseñadores y desarrolladores web. Aquí puede encontrar recursos gratuitos como vectores, temas de WordPress y mucha inspiración. </p> <p> <span> efectivo </span> WebDesignfan es un blog relacionado con el diseño sobre diseño web, Photoshop, regalos y tutoriales. Publicamos información útil dedicada a diseñadores y desarrolladores web. Aquí puede encontrar recursos gratuitos como vectores, temas de WordPress y mucha inspiración. </p> <p> <span> funcional </span> WebDesignfan es un blog relacionado con el diseño sobre diseño web, Photoshop, regalos y tutoriales. Publicamos información útil dedicada a diseñadores y desarrolladores web. Aquí puede encontrar recursos gratuitos como vectores, temas de WordPress y mucha inspiración. </p> </div> </div> </div>
Vaya a su archivo CSS y agregue el siguiente código.
#Paragraphs Span {Font-Family: Myriad Pro, Helvetica, Sans-Serif; Font-Size: 22px; Font-Weight: 600; Carta-Spacing: -2px;}#párrafos {margen-marginés: 80px; font-family: ARIAL, Helvetica, sans-serif; color:#191919; tamaño de la fuente: 12px; margen-top: 15px;}. párrafo {ancho: 250px; margen-izquierda: 15px; float: izquierda;}Esto es lo que hemos hecho hasta ahora:
La parte inferior del sitio web se maneja a continuación
Ahora que hemos terminado esa parte, comenzaremos a crear el pie de página.
Primero, en su archivo PSD, esconde otras capas, excepto las capas de textura de pie de página y pie de página, y luego corte y guarde las cosas de la carpeta de pie de página como pie de página.jpg.
Luego córtelo nuevamente y corte el botón y los gráficos de pájaros. Nombrar it SEIGE.png y Bird.jpg respectivamente.
Editar el código inferior
El pie de página inferior incluye algún texto y una imagen del pájaro con un enlace.
Así que agregue el siguiente código a la página HTML.
<div id = pie> <div id = contenedor> <p> 2010? Estudio de diseño ficticio. Diseño de WebDesignfan. </p> <a href =#> síganos en Twitter </a> <img src = images/bird.jpg/> </div> </div>
Ahora, edite el código de estilo de pie de página en la parte inferior de la siguiente manera:
#footer {fondo: url (imágenes/footer.jpg); altura: 71px; margin-top: 191px;}#footer p {font-family: arial, Helvetica, sans-serif; font-size: 12px; color:#959595; posición: absoluto; margin-top: 30px;}#pie de pie de pie de pie de pie de pie:#959595; a {fondo: url (imágenes/seguimiento.png); text-indent: -9999px; posición: absoluto; altura: 27px; ancho: 124px; margen-izquierda: 730px; margin-top: 30px;}#pies img {flotante: derecho; margen-top: 10px;}Usamos Pooter.jpg como fondo del pie de página y luego agregamos algunos estilos de texto.
Para el enlace a la imagen del pájaro en la parte inferior, utilizamos el mismo método antes, utilizando el efecto flotante para colocarla.
Efecto final
Descarga de archivos (0,7 MB)
Incluso ahora se acabó. No sé si lo entiendes. Si no lo entiende, deje un mensaje. Si no lo entiendes, lo agregaré y lo modificaré nuevamente, jaja ~