Paginas en HTML (Listas y tablas en Dreamweaver)

Creación de paginas en Dreamweaver


Para comenzar la creación de nuestra pagina utilizando Dreamweaver los primero seria crear nuestro documento en blanco, para ello en la pantalla de inicio daremos clic en la opción:


Seleccionaremos HTML, Colocaremos el titulo de la pagina (lo que el programa colocara dentro de la etiqueta <tittle></tittle> y clic en crear:

Una vez creado podemos cambiar entre las vistas Diseño, En Vivo y Código

Tablas en Dreamweaver (HTML)

Una tabla HTML (<table>) es un conjunto de celdas (<td> o <th>) organizadas en filas (<tr>) que a su vez se organizan en grupos de filas (<thead>, <tbody> o <tfoot>). Además, la tabla puede tener una leyenda (<caption>) y hacer referencia a las columnas (<col> y <colspan>).

Para crear una tabla en html es necesario utilizar las etiquetas antes mencionadas para identificar las celdas, columnas, filas ,etc.
Para comprender mejor un ejemplo:

<table border="1">
  <caption>Ejemplo de tabla</caption>
  <tbody>
    <tr>
      <td></td>
      <th>A</th>
      <th>B</th>
    </tr>
    <tr>
      <th>1</th>
      <td>A1</td>
      <td>B1</td>
    </tr>
    <tr>
      <th>2</th>
      <td>A2</td>
      <td>B2</td>
    </tr>
  </tbody>
</table>

Se mostrara:



 Para crear una tabla en dreamweaver de forma mas facil vamos a dar un clic en la pestaña insertar > tabla:


Nos mostrara una pequeña ventana donde indicaremos el tamaño y otros parametros de nuestra tabla:


Al dar clic en el botón aceptar y estando en la vista de dividir (diseño/código) nos mostrara lo siguiente:


Como se puede observar el programa automáticamente nos genera el código HTML de lo que creemos y modifiquemos en la vista de diseño.
Esto nos permite modificar la tabla como si trabajáramos en un libro de Excel.

Al seleccionar la tabla desde el panel de propiedades podemos modificar las propiedades de una forma mas sencilla:

Para generar una vista previa en el navegador solo debemos presionar la tecla F12, la primera ves solicitara colocar un nombre al archivo:





Para cambiar el navegador predeterminado que es Explorer, debemos dar clic en el boton de vista previa > editar lista:



Luego seleccionaremos nuestro navegador de preferencia, lo indicaremos como principal y clic en el botón aceptar:


Listas en Dreamweaver 

HTML ofrece a los autores varios mecanismos para especificar listas de información. Todas las listas deben contener uno o más objetos de lista.
Las listas se diferencian en html según la etiqueta de apertura:

  • <ul> Unordered List - Lista sin orden (sin numeración)
  • <ol>  Order List - Lista ordenada (Con Numeración)

 Las listas pueden contener:

    • Información no ordenada.
    • Información ordenada.
    • Definiciones.
La lista anterior, por ejemplo, es una lista no ordenada, creada con el elemento UL:

<UL>
<LI>Información no ordenada. 
<LI>Información ordenada. 
<LI>Definiciones. 
</UL>

 Una lista ordenada, creada por medio del elemento OL, debería contener información para la cual debe ponerse énfasis en el orden, como en una receta de cocina:

  1. Mezcle los ingredientes secos íntimamente.
  2. Vierta los ingredientes líquidos.
  3. Remueva durante 10 minutos.
  4. Hornee durante una hora a 300 grados.

Las listas de definiciones, creadas por medio del elemento DL, consisten generalmente en una serie de parejas término/definición (si bien las listas de definiciones pueden tener otras aplicaciones). Por ejemplo, se podría usar una lista de definiciones en la publicidad de un producto:

Menor coste
¡La nueva versión de este producto cuesta mucho menos que la versión anterior!
Más fácil de usar
¡Hemos cambiado el producto para que sea mucho más fácil de usar!
Seguro para los niños
Puede dejar a sus hijos solos en una habitación con este producto y no se harán daño (no lo garantizamos).

Esto se define en HTML como sigue:

<DL>
<DT><STRONG>Menor coste</STRONG>
<DD>¡La nueva versión de este producto cuesta mucho menos que la versión anterior!
<DT><STRONG>Más fácil de usar</STRONG>
<DD>¡Hemos cambiado el producto para que sea mucho más fácil de usar!
<DT><STRONG>Seguro para los niños</STRONG>
<DD>Puede dejar a sus hijos solos en una habitación con este producto
    y no se harán daño (no lo garantizamos).
</DL>

Las listas pueden además estar anidadas, pudiendo usarse al mismo tiempo tipos diferentes de listas, como en el ejemplo siguiente, que es una lista de definiciones que contiene una lista no ordenada (los ingredientes) y una lista ordenada (los pasos a seguir):

Ingredientes:
  • 100 g de harina
  • 10 g de azúcar
  • 1 taza de agua
  • 2 huevos
  • sal, pimienta
Pasos a seguir:
  1. Mezcle los ingredientes secos íntimamente.
  2. Vierta los ingredientes líquidos.
  3. Remueva durante 10 minutos.
  4. Hornear durante una hora a 300 grados.
Notas:
Puede añadir uvas para mejorar la receta.

La presentación exacta de los tres tipos de listas depende del agente de usuario. Desaconsejamos a los autores el uso de listas únicamente con el fin de dar sangría al texto. Éste es un aspecto estilístico que se se resuelve apropiadamente con hojas de estilo.


Para crear una lista en Dreamweaver debemos seguir los siguientes pasos:

  • Crear nuestro archivo 
  • Dar clic en la pestaña instertar > Lista


  • Luego solo debemos agregar los elementos con la etiquetas <li></li>


Referencias:
  • https://www.mclibre.org/consultar/htmlcss/html/html-tablas.html#:~:text=Una%20tabla%20HTML%20%28%3Ctable%3E%29%20es%20un%20conjunto%20de,grupos%20de%20filas%20se%20muestran%20en%20este%20orden%3A
Share:

Buscar este blog

Entradas Populares

Categorías