En el diseño y la construcción de una página de la cartera, su trabajo debe hablar por sí mismo. Concéntrese en el estilo limpio y un fácil de navegar formato que no distraiga al visitante. Todo lo que necesitas para crear una cartera es algo de HTML básico y CSS, junto con imágenes de su trabajo. Este proyecto contribuye a la buena práctica CSS porque su diseño simple aún necesita un trucos de diseño de pareja. Usted aprenderá a centrar el contenido de la página y crear un formato de estilo de cuadrícula para mostrar imágenes con la información.
Instrucciones
Crear archivos y HTML
1
Bloc de notas abierto o un editor de código y comenzar con un nuevo archivo, en blanco. Copie y pegue el siguiente código en su archivo:
<! DOCTYPE html>
<Html>
<Head>
<title></title>
</ Head>
<Body>
<Body>
</ Html>
Escriba el nombre de su cartera entre los "<title>" etiquetas. Guarde el archivo con extensión HTML.
2
Añadir esta línea de código por debajo de los "<title>" etiquetas:
<Link rel = "stylesheet" href = "portfolio.css">
Desde su HTML utiliza el doctype HTML5, no es necesario añadir un atributo "tipo" de esta etiqueta. Crear un archivo en blanco y guárdelo como "portfolio.css".
3
Crear un DIV y darle un nombre de identificación de la "envoltura". Dentro de ese DIV, añadir un título y un texto a su cartera. Este contenido se va dentro de los "<body>" etiquetas:
<Div id = "wrap">
<H1> Mi cartera </ h1>
<P> Parte de la información acerca de mí mismo y el trabajo que hago. </ P>
</ Div>
4
Coloque un conjunto de "<div>" etiquetas debajo de la propaganda sobre su cartera y darle un nombre de ID de "cartera". Este DIV cartera contendrá una galería de imágenes de su trabajo.
<Div id = "cartera">
</ Div>
5
Creación de la primera entrada de la cartera. Como se trata de una cartera, necesita una miniatura de la obra que se presenta así como un título y una frase o dos sobre lo que hiciste. Todo esto va a ir dentro de un solo, flotando DIV:
<Div class = "item">
<Img src = "path / to / thumbnail1.png" alt = "Mi Primer Proyecto">
<H3> Mi Primer Proyecto </ h3>
<P> Un proyecto de diseño que hice para la universidad. Esto era para una obra de caridad local. </ P>
</ Div>
Copie y pegue el ejemplo anterior en el código HTML, dentro del DIV cartera. Cambie la ruta del archivo y el texto para que coincida con su primer proyecto. Use esto como una plantilla para añadir más entradas a la página, colocando cada nueva DIV después de la última.
El estilo de la Cartera Con CSS
6
Vuelve a tu archivo CSS y el estilo de fondo y las fuentes de la cartera:
body {
background: url #eeeeee ('path / to / background.png');
color: # 555555;
font-family: Georgia, serif;
font-size: 13px;
}
En la propiedad "background", el primer valor que se muestra es un color hexadecimal, seguido de la ruta URL a una imagen de fondo. Saque la ruta URL si usted no desea utilizar una imagen. Los "colores" colores de propiedad del texto.
7
Estilo de texto para los títulos:
h1, h2 {
font-family: Arial, sans-serif;
color: # 333333;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 18px;
}
Dado que las partidas de este ejemplo ambos utilizan el mismo tipo de letra Arial gris y oscuro, se pueden encadenar "h1" y "h2", junto con una coma separando.
8
Establezca un ancho para el DIV envoltura y hacer que centrar en la página:
envuelva {
width: 960px;
margin-left: auto;
margin-right: auto;
}
Este código, junto con la envoltura de DIV, se centrará todos de los contenidos de la página. Un ancho de 960 píxeles es común para los sitios web y se utiliza en muchos sistemas de redes CSS, en particular 960 Grid System.
9
Dé la cartera de una anchura y centrarla así; que llegará a ser centrado dentro del DIV envoltura:
cartera {
width: 900px;
margin-left: auto;
margin-right: auto;
}
10
Estilo y flotar cada entrada cartera:
.item {
float: left;
margin-right: 10px;
margin-bottom: 20px;
}
cartera img {
frontera: #bbbbbb sólido 1px;
padding: 5px;
fondo: #ffffff;
}
Cuando usted flota DIVs dentro de un DIV que contiene, van a llenar todo el espacio horizontal y luego continuar en la siguiente fila de abajo. Esto crea un efecto de mosaico. Dé a cada elemento de un derecho y margen inferior para proporcionar el espaciamiento entre ellos.
Consejos y advertencias
- Esta cartera se verá mejor si usted hace cada Thumbnail El mismo tamaño.