Archive for the 'Dreamweaver' Category

Listas Anidadas en HTML

Friday, October 6th, 2006

Antes de empezar con este tema te recomiendo leer Listas en HTML, para una mejor comprension de este tema.

Este tema lo vamos a ilustrar con un sencillo ejemplo:

Para mejorar tu presencia en Internet necesitas:

     

  1. Promocionar tu sitio Web.     
     

  1. Clasificados
  2. Foros
  3. Blogs   
  4. Radio
  5. TV
  • Atraer trafico hacia tu sitio web.     
    1.  

    2. Intercambio de enlaces.
       
       

    1. No hacer SPAM
    2. intercambio con sitios de tematica similar. 
       

    1. invitar al webmaster a realizar el intercambio de enlaces.
  • Promoverlo en la papeleria publicitaria de tu empresa.
     
    1.  

    2. Tarjetas de presentacion
    3. broshures
    4. volantes
    5. Flyers   

    Haz clic aqui para ver el codigo de este ejempo.

    Como se aprecia en el codigo lo unico que debemos hacer es no cerrar la lista principal sino hasta el fin de la lista.

    Te recomiendo que veas el codigo de este ejemplo.

     

    El parrafo en HTML

    Tuesday, October 3rd, 2006

    En HTML la etiqueta para introducir un parrafo es < p > y su etiqueta de cierre < /p >.

     

    Cuando escribimos en el modo de Diseño en Dreamweaver en la parte del codigo por cada “enter” que presionamos de teclado, se agrega un < p >.

    Uno de los pequeños problemitas que tenemos en el block de notas a la hora de agregar contenido, es que no importa cuantas veces presionemos “Enter”, todo el texto se mostrara com un solo y unico bloque, lo que hara que perdamos por completo la estetica.

     

    Para resolver este inconveniente utilizaremos la etiqueta < br >
    , la cual colocaremos en el lugar exacto en el cual queramos insertar un salto de linea.

    Por ejemplo:

    mi nombre es Walter < br  / >mi sitio es Soluciones SEO < br / > Resido en Nicaragua.

    Se visualizaria asi:

    Mi nombre es Walter
    Mi sitio es Soluciones SEO
    Resido en Nicaragua.

    Nuestra Primera Pagina HTML

    Monday, October 2nd, 2006

    En la barra de herramientas del documento, se nos muestran 3 pestañas “Codigo, Dividir, Diseño”, ahora explicaremos cada una de ellas.

    Codigo:
    Nos muestra el Codigo de nuestra pagina web, en este modo podemos editar nuestra pagina web desde el puro codigo HTML, para ello tenemos que familiarizarnos con el lenguaje HTML.

    Dividir:
    Nos divide nuestra pantalla, de manera que nos muestra en el nivel superior (generalmente) el codigo de nuestra pagina y en el nivel inferior el Diseño o vista previa de los cambios efectuados en el codigo.

    Diseño:
    Este modo se usa cuando no queremos codificar en HTML, y funciona a manera de WYSIWYG, como un editor comun de texto al estilo Word.

    El lenguaje HTML.

    Vamos a familiarizarnos un poco con el lenguaje HTML, pero antes hay que decir que HTML no es un lenguaje de programacion sino un lenguaje de marcas, esto quiere decir que cualquier error que comentamos en la sintaxis no nos dañará la computadora en ninguna de sus partes (Software o Hardware), sino que no nos presentará el resultado final de la manera que nosotros esperabamos.

    Es cierto que no es lenguaje de Prgramacion pero tiene una sintaxis que debemos respetar a cabalidad.

    Todo lo que se encuentre dentro de los simbolos “< " y ">” se llama etiqueta, las etiquetas le indican al navegador que eso es una orden y tiene un significado para el, Ejemplo < body >.

    A continuacion la estructura basica de una pagina web:

    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    < html>
    < head>
    < title>Documento sin título< / title>
    < meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    < body >
    < /body >
    < / html>

    Interfaz de Dreamweaver

    Monday, October 2nd, 2006

    En este tema conoceremos la interfaz de Dreamweaver MX 2004.

    En Dreamweaver, los paneles se organizan en grupos. El panel seleccionado en un grupo de paneles aparece como una ficha. Cada grupo de paneles puede ampliarse o contraerse (circulos verdes y rojos) y acoplarse o desacoplarse con otros grupos de paneles.

    Captura de pantalla de la Interfaz de Dreamweaver

    Los grupos de paneles (pueden cambiar su posicion izquierda a derecha dependiendo del espacio de trabajo que definimos a la hora de instalacion), también se pueden acoplar a la ventana de aplicación integrada (sólo en Windows). Esto facilita el acceso a los paneles sin saturar el espacio de trabajo.

    El espacio mas grande de nuestra pantalla es ocupada por la pantalla de Bienvenida, la cual esta dividida en 3 columnas; la columna izquierda nues presenta una lista de los 10 documentos creados o editados más recientemente (Documentos Recientes); la columna central nos presenta las opciones de documentos que podemos crear con Dreamweaver, en estos momentos trabajaremos unicamente con documentos HTML; y por ultimo la columna derecha nos presenta opciones para crear documentos a partir de plantillas prediseñadas (no lo usaremos).

    Pantalla de bienvenida de Dreamweaver 

    Una vez que demos clic en HTML (observa la flecha en la imagen superior), tendremos nuestro documento de la siguiente manera: