Parte 1 / 4: Diseño de un sitio y en el Código con Gimp, HTML y CSS

Transcripción

1 Parte 1 / 4: Diseño de un sitio y en el Código con Gimp, HTML y CSS Muchos diseñadores de páginas web para principiantes tienen problemas para el diseño de sitios y, a continuación, la codificación de manera adecuada y acaban de pasar a las mesas y de Dreamweaver. En este tutorial te mostraré cómo diseñar un sitio en The Gimp y luego en el código XHTML y CSS válidos con divs y las clases (no cuadros). Esta es la primera parte de una serie de cuatro partes sobre este tema, esta parte se centrará en el diseño de The Gimp, parte 2, 3 y 4 estará dedicado a la codificación listo para la web. Así que volver en el próximo par de semanas o suscribirse a nuestro feed RSS. Así que aquí vamos: Paso 1 Crear una nueva imagen en The Gimp, que 960px (anchura) por 900px (altura) y lo rellenamos de color gris oscuro (333333) Paso 2 Ahora crear una nueva capa de 900px de ancho y lo llaman página, llenarlo con blanco (FFFFFF). Use las teclas de flecha para mover en el centro de la imagen como esta:

2 Paso 3 Ir a Filtros > Luz y Sombra > Drop Shadow y configurar el offset Offset X y Y a 0 y desmarca Permitir cambiar el tamaño, haga clic en Aceptar. Esto añadirá una sombra para el área de la página. Paso 4 Crear una nueva capa llamada de cabecera y hacer 900px de ancho y 150px de altura, pasar en su lugar como este:

3 Paso 5 Ajuste el color de frente a y el color de fondo a 84a3e3 y seleccione la herramienta de mezcla. Haga clic y arrastre desde la parte inferior de la capa a la parte superior para crear este efecto:

4 Paso 6 Seleccione la herramienta y haga clic en seleccionar y arrastrar un rectángulo de altura 5px en la parte superior de la capa y la rellenamos con el color de primer plano.

5 Paso 7 Ahora duplicar la capa y pulse Eliminar la capa de vaciar de su contenido, esto le ahorrará tiempo ya que no necesita crear una nueva capa y la posición de la misma. Con la herramienta Seleccionar, haga clic y arrastre la capa a través de un rectángulo de 100% de ancho y altura de 1px y lo rellenamos de negro (000000) y debajo de él exactamente lo mismo, esta vez llenado con blanco. A continuación, cambiar la opacidad de la capa a 10,0. Esto producirá este efecto (si tiene dificultades para entender el presente y, a continuación, checa mi tutorial sobre esta aquí:

6 Paso 8 Duplicar la capa de la página y borrar su contenido y, a continuación, utilizando la herramienta de seleccionar dibujar un rectángulo en la parte derecha de la página con un ancho de 320px. Llenarlo con 84a3e3 y cambiar la opacidad de la capa a 15,0, lo que presenta la siguiente:

7 Paso 9 Ahora crear una nueva capa con un ancho de 900px y una altura de 100px y lo llaman el pie de página, el lugar que en la parte inferior del diseño como este y lo rellenamos de :

8 Paso 10 Haga clic en el marco del área de grabado y añadir los elementos del menú que desea, cambiar la fuente a Arial negrita tamaño 14 de color blanco (FFFFFF) y mover la capa para que se parezca a esta:

9 Paso 11 Duplicar la capa superior de cabecera y borrar su contenido, ahora bajo el grabado líneas dibuja un rectángulo y lo rellenamos de blanco (FFFFFF) y cambiar la opacidad a 10, esto creará este efecto:

10 Paso 12 Por último, añadir que el logotipo utilizando la opción Abrir como capas en el menú Archivo y colóquelo en la parte superior izquierda de la cabecera de la zona como esta: Y eso es todo por esta parte, hemos creado un sencillo diseño que se corte en la siguiente parte de este tutorial y que ésta esté preparada para la codificación. Hay mucho mejor que los diseños que se pueden realizar en The Gimp, pero sólo quiero mostrar que los fundamentos de esta serie. Como dije al principio, volver o suscribirse a nuestro feed para ser notificado cuando las nuevas piezas están.

11 Parte 2 / 4: Diseño de un sitio y en el Código con Gimp, HTML y CSS Bienvenidos a la muy anticipada segunda parte. Mi agradecimiento a todos los que han sido estimular a prisa y escribir la parte 2, así que aquí está. En la segunda parte de esta serie de 4, voy a mostrar cómo el diseño listo el tramo para la codificación. Este es el proceso por el cual estamos básicamente de corte en cada elemento por separado las imágenes dispuesta a código en el sitio. Paso 1 Crea una nueva carpeta en el equipo y dentro de esta carpeta agregar otra carpeta llamada imágenes. Paso 2 Regresar a la imagen y abrir el diálogo de capas, seleccione un ojo al lado del logotipo de la capa, la capa hover menú de navegación y de la capa de texto para que la imagen ahora parece esto:

12 Paso 3 Ahora, utilizando la herramienta Seleccionar, haga clic y arrastre desde la esquina superior izquierda a la derecha justo encima de la línea de grabado, la región seleccionada debe 960px x 108px (busque en la parte inferior de la ventana por el 100% mientras arrastra el botón para ver el seleccionado dimensiones) Paso 4 Volver al menú Edición y seleccione Pegar este momento y, a continuación, Como Nueva Imagen. Esto abrirá una nueva imagen copiada de la región. Guardar esta imagen como en las imágenes header.png carpeta que creó anteriormente. Paso 5 Regresar a la lona, si la región ya no es seleccionado a continuación, pulse Ctrl y Z hasta que se seleccione. Si coloca el ratón sobre la parte superior de la zona seleccionada, te darás cuenta de que esta aparece:

13 Paso 6 Haga clic y arrastre esta barra superior en el área de la parte inferior de la zona seleccionada de todos el camino a la parte inferior de la cabecera de la zona en la imagen para que la selección ahora parece esto, la región seleccionada debe 960px x 42px: Paso 7 Ahora como antes la región visible Copiar y pegar como una nueva imagen, esta vez de guardarlo como menulinks.png Paso 8 Vaya ahora a la capa de diálogo y volver a la capa menuhover y regresar a la lona. El área para la menulinks debería estar aún seleccionada, ahora este tiempo, agarrar el mango de la derecha del área seleccionada y la posición alguna dentro de la zona menuhover, hacer lo mismo manejar a la izquierda para que la selección se ve algo como esto:

14 Paso 9 Copiar el área seleccionada y pegar como una nueva imagen llamándolo menuhover.png

15 Paso 10 Ahora selecciona a la izquierda de la imagen a la derecha de la imagen en cualquier lugar de la sección central de este modo: Paso 11 Copie el área visible y pegar como una nueva imagen. Guardarlo en la carpeta de imágenes llamándola page.png Paso 12 Vaya a la zona de pie de página y seleccione la región de pie de página, debe ser píxeles de alto. Y entonces, adivinen qué? Sí, tienes razón, la zona visible copia y pega como una nueva imagen y lo llaman footer.png Paso 13 Por último, haga clic en el ojo al lado del logo de la capa y seleccione la parte superior izquierda de la imagen a la parte inferior derecha del logotipo, la zona visible copia y pega como una nueva imagen llamándolo logo.png

16 Resultados Ahora debería tener una carpeta con imágenes de una carpeta llamada interior. La carpeta debe contener imágenes header.png, menulinks.png, menuhover.png, page.png, footer.png y logo.png. Puede descargar el archivo. Zip con el corte original de las imágenes y el archivo XCF aquí. En la parte 3, yo te mostraré cómo iniciar la codificación de la plantilla en XHTML y CSS válidos.

17 Parte 3 / 4: Diseño de un sitio y en el Código con Gimp, HTML y CSS Bienvenido a la parte 3 de mi serie sobre el diseño y la codificación de una página web con el Gimp, HTML y CSS. En esta parte voy a mostrarte cómo iniciar la codificación del sitio. Paso 1 Para crear los archivos que no es necesario ningún procedimiento especial, sólo el Bloc de notas o un editor de texto de algún tipo (no MS Word). En primer lugar, guardar ambos archivos en la carpeta que creó anteriormente. La estructura de la carpeta debe tener este aspecto: Paso 2 En el index.html tenemos que crear la estructura html añadir este código: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" " <html> <head> </head> <body> </body> </html> Estos se denominan etiquetas html. En la cabeza entre las etiquetas ir toda la información, como los scripts y el estilo y en las etiquetas "body" va todo el contenido.

18 Paso 3 Ahora vamos a rellenar la sección de cabecera de la plantilla, de aquí vamos a añadir el título que se muestra en la barra de título cuando ve la página y un enlace a la hoja de estilo CSS (style.css). También puede añadir metaetiquetas aquí si lo desea. Añadir este código entre las <head> y </ head>. <title> SITIO WEB </ title> <link rel=stylesheet href="style.css" type="text/css" media=screen> - -- Paso 4 Ahora vamos a añadir a los componentes de la div archivo index.html. Un div es una etiqueta que es de estilo en CSS y puede ser utilizado en HTML como un contenedor que posee contenido. A continuación se muestra una imagen de cómo el divs van a ser expuestas en nuestra plantilla:

19 Paso 5 Añadir el siguiente código al archivo index.html entre la <body> y </ body> tags: <div id="page"> </div> <div id="header"> </div> <div id="menulinks"> </div> <div id="mainarea"> </div> <div id="contentarea"> </div> <div id="sidebar"> </div> <div id="footer"> </div> Todos los elementos están contenidos dentro de la página div contentarea y la barra lateral y están contenidas en un subgrupo denominado mainarea div. Paso 6 Ahora, si usted fuera a abrir el archivo index.html ahora, usted no ve nada es porque no hemos aún estos elementos de estilo y esto es lo que vamos a empezar a hacer ahora. (Fuente) La sintaxis CSS se compone de tres partes: un selector, una propiedad y un valor: selector {property: value} Así, por ejemplo, si queríamos la cabecera para tener un ancho de 960px el código sería #header {width:960px;} # cabecera (width: 960px;) Cuando se refieren a un div que necesita para añadir un hash firmar delante del nombre (página #, # cabecera etc), sin embargo, cuando usted se refiere a una clase que necesita para añadir una. frente (. descripción. izquierda etc), vamos a entrar en más detalles sobre esto más adelante. Y para cada declaración dentro de la (y) es necesario añadir un punto y coma (;) al final de cada línea.

20 Por lo tanto, existe una rápida introducción a CSS, para más de una introducción le sugiero que se lea esta introducción. Paso 7 Vaya a su archivo style.css y agregue el siguiente código CSS. Voy a tratar de explicar a cada paso lo que hace: body { background-color:#333333; margin:0; padding:0; text-align:center; font-family:arial; font-size:12px; color:#555555; } #page { width:960px; margin:auto; padding:auto; background-image:url(images/page.png); text-align:left; } #header { # width:960px; height:108px; background-image:url(images/header.png); clear:both; }

21 #menulinks { width:960px; height:44px; background-image:url(images/menulinks.png); clear:both; } #mainarea { width:960px; clear:both; padding-top:10px; } #contentarea { float:left; width:560px; padding-left:45px; margin-bottom:10px; } #sidebar { # float:right; width:290px; padding-right:45px; } #footer { width:960px; height:100px; background-image:url(images/footer.png);

22 clear:both; } #footer p { padding-top:30px; color:#ffffff; padding-left:50px; line-height:20px; } body styling El cuerpo es básicamente la página, yo he puesto el margen y el relleno a 0, porque esto significa que no existan lagunas en la parte superior o inferior de la página. El color de fondo se ha establecido en gris oscuro, he usado un código de colores html para este (333333), puede ver los códigos de color para todos los colores aquí. Y, finalmente, yo he puesto la página para alinear texto al centro, lo que hará es hacer que el centro de la página en el centro. También he creado la familia de fuentes, por defecto el tamaño de la letra y el color de fuente. #page styling La página tiene un ancho de 960px y el margen de relleno y se han establecido para auto, esto hace de la página centrado en la web. También he añadido una imagen de fondo, se trataba de la imagen de la página que hemos creado en la segunda parte de esta serie y, por último, yo he puesto el texto alinear de nuevo a la izquierda, más todos los elementos que han centrado el texto. La claridad de la propiedad significa que se agrega debajo y por encima del anterior y siguiente componentes. #header, #menulinks and #footer styling He establecido una anchura y una altura adecuada, y añadió la imagen de fondo. #mainarea styling Este es un simple contenedor para la barra lateral y contentarea así que simplemente han creado un ancho de 960px. También hay un principio de propiedad de relleno para que el contenido de la página no está demasiado cerca de la cabecera de la zona. #contentarea styling El contentarea se ha dejado a flote, lo que significa que está en la columna de la izquierda de dos columnas. También he añadido un relleno izquierda porque de lo contrario la propiedad cuando agreguemos el contenido, no se mostrará en la zona blanca de la imagen. #sidebar styling El lateral derecho ha sido flotaba por lo que es en la columna de la derecha y también he añadido un padding derecho de propiedad para que el contenido aparece en la barra lateral área.

23 #footer p styling El relleno y relleno superior izquierda de la posición de pie de página de propiedades contenido, el color cambia a blanco (FFFFFF) y la línea está el espacio para el espacio de cada línea. Paso 8 Finalmente, para esta parte, tenemos que añadir algunos contenidos a la contentarea, barra lateral y pie de página, a fin de añadir el siguiente código html <br/> es el separador línea, sin que todos los de este texto sería agrupado en un párrafo: Contentarea: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/><br/> <br/> <br/> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat no proident, sunt en culpa qui officia deserunt mollit anim Id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/> Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/><br/> <br/> <br/> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat no proident, sunt en culpa qui officia deserunt mollit anim Id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor

24 sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/><br/> <br/> <br/> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat no proident, sunt en culpa qui officia deserunt mollit anim Id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/><br/> <br/> <br/> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat no proident, sunt en culpa qui officia deserunt mollit anim Id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sidebar: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat no proident, sunt en culpa qui officia deserunt mollit anim Id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/><br/> Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/> <br/>

25 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. Footer: <p>copyright (c) 2008 SITE NAME. <br/> <p> Copyright (c) 2008 NOMBRE DEL SITIO. <br/> All Rights Reserved.</p> Todos los Derechos Reservados. </ P> Resultados Ahora debería tener una página que se ve algo como esto: En la parte final me va a añadir el logotipo, estilo links, H1, H2 y la creación de etiquetas en el menú rollover enlaces. Puede descargar todo el trabajo que hemos hecho hasta ahora aquí.

26 Parte 4 / 4: Diseño de un sitio y en el Código con Gimp, HTML y CSS Bienvenidos a la cuarta y última parte de mi serie sobre el diseño y la codificación de un sitio web en el Gimp, HTML y CSS. En este punto quiero dar las gracias a todos los que ha estado siguiendo esta serie y espero que continúe el uso Ayuda para desarrolladores. En esta parte voy a mostrar cómo acabar con la plantilla que hemos venido creando, vamos a estilo de los elementos textuales, como la H1, H2 y etiquetas de enlace y vamos a crear la tan esperada renovación menú. Paso 1 En primer lugar vamos a añadir el logotipo de la cabecera de la zona. Abra el archivo style.css y añadir el texto siguiente: a.logo { width:353px; height:102px; float:left; background-image:url(images/logo.png); } Esto estilo en el hipervínculo que tiene un atributo de clase "logo". Cambiar el ancho de valor a la anchura del logotipo de la imagen que cortar antes. Paso 2 Abra el archivo index.html y añadir la siguiente línea entre la <div id="header"> y </ div>: <a href="./index.html" class="logo"></a> Ahora debería tener este aspecto:

27 Paso 3 Ahora vamos a la h2 etiquetas estilo que vamos a utilizar para crear los títulos de las páginas y la barra lateral. Ir al archivo style.css y agregar el siguiente código: h2 { font-size:20px; color:#333333; font-weight:bold; } y esto a la index.html archivo directamente debajo de la etiqueta <div id="contentarea">: <h2>welcome</h2> Esto creará algo como esto:

28 El uso de etiquetas h2 es bueno para SEO porque robot de Google analiza el h2 etiquetas para determinar lo que su sitio se trata. Observe también que no hay ningún punto (.) O hash (#) antes de la h2 en el CSS, esto se debe a que se trata de una opción de formato y no se trata de un div (#) o una clase (.) Paso 4 Siguiente es el estilo de los hipervínculos en el texto, en primer lugar añadir un hipervínculo al archivo index.html. (<a href= link_here >text_to_display_here</a>), la notificación se utilizará la configuración del navegador por defecto: Para este estilo de añadir lo siguiente al archivo style.css: a { font-weight:bold; color:#333333; text-decoration:none; } Ahora se ve como este: Puede estilo aún más mediante la adición de un estilo hover, por ejemplo, he añadido el siguiente código: a:hover { color:#389ccb; text-decoration:underline; } y este fue el resultado cuando se ciernen sobre el vínculo:

29 Asimismo, sólo una pequeña nota, si quieres cambiar el estilo de un elemento como un hipervínculo en un área determinada, por ejemplo al pie de página en el área luego cambiar el archivo style.css a{ a footer # { Paso 5 Y ahora, lo que tiene para todos los que se espera, el vuelco del vehículo menú enlaces.esto se hace de una manera similar a lo que ves arriba en el paso 4 utilizando la una y una: flotar en las opciones de CSS. Al hacer esto en su propio sitios / templates necesitará usar ensayo y error para obtener el derecho de las mediciones para que se vea bien, pero en este ejemplo los elementos son todos los mismos que el tutorial (si usted ha sido el siguiente otras partes correctamente, por supuesto). Añadir lo siguiente en el archivo index.html en el marco del <div id="menulinks">: <a href="#">home</a> <a href="#">about</a> <a href="#">services</a> <a href="#">contact</a> Aquí está la CSS para la renovación menulinks artículo: #menulinks a { padding-top:15px; padding-left:15px; padding-right:15px; height:27px; float:left; text-decoration:none; color:#ffffff; font-weight:bold;

30 font-size:14px; margin-top:1px; } Bien, un poco de una explicación para el código de más abajo. Utiliza el relleno para que el texto dentro de la relación centrada en la altura y la propiedad sólo es llenar el área. Cuando se utiliza este en otras plantillas de relleno superior y la altura de propiedad van a ser las propiedades que usted necesita para mantener el cambio hasta que se vea bien. He utilizado flotar: izquierda, de modo que los elementos que se muestran junto a la otra.he cambiado el color a blanco (FFFFFF), el tipo de letra negrita y el tamaño de 14px. También he añadido un margen superior de 1px porque, por alguna razón, parecía fuera de lugar sin él, el margen superior de propiedad sólo empujó el elemento hacia abajo o hacia arriba si usa un valor negativo. Para añadir el efecto hover todo lo que tienes que hacer es esto: #menulinks a:hover { # menulinks a: hover ( background-image:url(images/menuhover.png); background-imagen: url (images / menuhover.png); } ) Simple! Simple! Ahora debería tener algo como esto: Unhovered Hovered Paso 6 Por último, es todo lo que queda por hacer es pasar los enlaces a la derecha un poco, como usted puede ver en las imágenes por encima de los enlaces que salen del borde. Para mover los enlaces a la derecha vaya a la style.css y encontrar el archivo # menulinks propiedad y cambiarlo por: #menulinks { # (menulinks width:930px; ancho: 930px; padding-left:30px; height:44px;

31 background-image:url(images/menulinks.png); clear:both; } He añadido un relleno izquierda atributo con un valor de 30px y con el fin de no estropear su diseño, asegúrese de quitar la misma cantidad de la anchura atributo de relleno porque se añade a la anchura. Resultados Eso es todo, ahora debería tener algo parecido a éste: Puede descargar todos los archivos haciendo clic aquí. Por último, quisiera dar las gracias a todos ustedes por seguir este tutorial y espero que le ha ayudado considerablemente en el aprendizaje de cómo diseñar un sitio web en el Gimp y luego el código mismo. Usted podrá ahora llegar a más sitios web que utilizan las mismas técnicas utilizadas en este tutorial y mantener un ojo en tutoriales de ayuda para los desarrolladores de técnicas más avanzadas tales como efectos hover agradable. Puede suscribirse a mi feed RSS aquí.