-
Cómo crear su propia imagen Cuadro de desplazamiento
-
Muchos sitios web cuentan con una galería de fotos donde varias imágenes se pueden mostrar en una sola página. Hay varias maneras de presentar una galería de imágenes. Una manera de mostrar imágenes sería incluirlos dentro de un cuadro de desplazamiento. Los visitantes pueden ver cada imagen en la colección mediante la selección de la barra de desplazamiento y moviéndolo en la dirección que les gustaría. El uso de código HTML, se puede crear un cuadro de desplazamiento de imagen para visualizar varias imágenes.Instrucciones
1 Crear una página en blanco utilizando el código HTML. El código debe incluir todos los elementos esenciales, como las etiquetas HTML, cabeza, título y el cuerpo. Un ejemplo se muestra a continuación. Si el cuadro de imagen de desplazamiento es una característica para ser incorporado en una página existente, este primer paso se puede omitir.
<Html>
<Head>
<Title> Título del documento </ title>
</ Head>
<Body>
</ Body>
</ Html>2 Ahora que se ha creado la página, habrá necesidad de ser un área designada para el cuadro de imagen de desplazamiento. Para ello, cree una tabla dentro de las etiquetas del cuerpo del código HTML.
<Table cellspacing = "2" cellpadding = "0">
<Tr><td></ Td>
</ Tr>
</ Table>3 La tabla tiene que ser un ancho particular. Para este ejemplo, el ancho será de 400 píxeles. Designar el ancho de la etiqueta de la tabla superior, como se muestra a continuación.
<Table width = "400px" cellspacing = "2" cellpadding = "0">
4 Con la tabla creada, el cuadro de desplazamiento de imagen tiene ahora un área a residir en. Ahora hay que hacer el cuadro de desplazamiento. Creación de etiquetas div, hacer que el área de la caja del cuadro de desplazamiento. Designar a la altura y anchura para el cuadro de desplazamiento.
5 Otro estilo debe ser añadido para crear la función de desplazamiento. Escriba el "desbordamiento: desplazarse;" estilo dentro de la etiqueta div junto a los ajustes de anchura y altura. Si prefiere no incluir un borde, escriba "border: ninguna frontera". Las nuevas características de estilo de la caja de desplazamiento debe ser similar al código de abajo.
<Div style = "height: 250px; ancho: 400px; overflow: desplazarse; fronteriza: no-frontera;"> </ div>
6 Las imágenes deben ser añadido para hacer el cuadro de desplazamiento cuadro completo. Si una carpeta de imágenes no existe ya para su sitio web, crear uno. Tomar imágenes que se colocan en el cuadro de desplazamiento y editarlos con un programa de edición de fotos. Tenga en cuenta que no tiene las imágenes más grande que la anchura total del cuadro de desplazamiento. Aquí, las imágenes no serían ninguna mayor que 400 píxeles.
7 Crear una etiqueta de imagen dentro de los <td> </ td> etiquetas. Colocar tantas imágenes como desee e incluir una o dos etiquetas de saltos entre cada imagen. Esto creará espacio entre las imágenes. Un ejemplo del código de la imagen se muestra a continuación.
<Img /> <br /> <br /> <img />
8 Una vez que todas las imágenes se han colocado, el cuadro de desplazamiento cuadro se completa. Un ejemplo de la tabla de código de acabado se muestra a continuación.
<Table width = "400px" cellspacing = "2" cellpadding = "0">
<Tr><td><Div style = "height: 250px; ancho: 400px; overflow: desplazarse; fronteriza: no-frontera;">
<Img /> <br /> <br /> <img /> <br /> <br /> </ div>
</ Td>
</ Tr>
</ Table>Consejos y advertencias
- estilos adicionales se pueden agregar a la caja del cuadro de desplazamiento. Los estilos ofrecido arriba sólo contienen los conceptos básicos.
