martes, 12 de octubre de 2010

Elementos que se puede Agregar a Dreamweaver

Tipos de objeto a insertar

La ventana y el menú Insertar, muestran varios tipos de objetos que pueden insertarse. La siguiente es la lista de las categorías que aparecen:
  • Común: Esta categoría contiene aquellos elementos que se emplean con mayor frecuencia, entre los que se encuentran divs, tablas, imágenes, hipervínculos, etc.
  • Diseño: En esta categoría, se incluyen aquellos elementos que se emplean para el diseño, como tablas, divs, marcos, etc.
  • Formularios: Contiene los botones y campos que deben emplearse en la confección de formularios
  • Datos: Tiene elementos de datos dinámicos.
  • Spry: Contiene los elementos para generar páginas de Spry y objetos de datos.
  • InContext Editing: Botones para crear páginas de InContext Editing.
  • Texto: Para insertar etiquetas de texto (h1, h2, b, i, etc.) y listas (ul, ol, li, etc.), así como otras etiquetas de texto.
  • Favoritos: Espacio destinado a colocar aquellos botones que el usuario emplea con más frecuencia. Para personalizar esta categoría, se debe hacer clic con el botón derecho del ratón y seleccionar “Personalizar Favoritos”, abriendo una ventana que permite incluir botones.

Categoría de elementos comunes

  • Hipervínculo: Cuando se selecciona insertar hipervínculo, se abre una ventana que muestra todos los atributos del vínculo. En primer lugar se debe introducir el texto del hipervínculo. En el segundo campo, se debe introducir el nombre del archivo a vincular o se puede emplear seleccionar el ícono que se encuentra a la derecha para navegar y seleccionar el archivo visualmente. Luego se selecciona el destino del hipervínculo, escribiendo el marco donde se abrirá o se selecciona alguno de los destinos prefijados. En el siguiente campo se ingresa el título que se le dará al vínculo. En clave de acceso, se introducirá una letra que servirá para seleccionar el vínculo con el teclado. En índice de ficha, se coloca un número que servirá para generar un orden de fichas.
  • Vínculo de correo electrónico Introduce un vínculo que abrirá una ventana de correo del programa de correo electrónico del usuario. Contiene dos campos, en los cuales se debe introducir el texto del vínculo y el correo electrónico que se desea vincular.
  • Anclaje con nombre: Introduce un ancla con nombre para los vínculos internos de la página.
  • Regla horizonatl: Haciendo clic en este botón, se introduce en el documento en creación un elemento <hr />, que genera una línea horizontal.
  • Tablas: Cuando se selecciona la introducción de tablas, se abre una ventana que permite seleccionar y determinar los atributos de la tabla que se está creando, como ancho, cantidad de filas y columnas, borde, relleno, espaciado entre celdas, etc.
  • Insertar etiqueta Div: Abre un cuadro donde se introducirán las características de la nueva etiqueta. En insertar, se permite especificar el nombre y la ubicación de la etiqueta. Más abajo aparecen dos campos Clase e Id. En caso de que se trate de un div que no esté contemplado en el CSS, se puede introducir una nueva regla CSS.
  • Media: Permite insertar diferentes tipos de archivos de medios en la página. Cada uno de los medios seleccionados, abren un cuadro que permite introducir las características con que se mostrará en la página.
  • Fecha: Inserta la fecha actual.
  • Server Side Include: Este botón incluye un vínculo, que cuando el usuario lo selecciona, se abre una página que incluye un archivo. Este archivo se selecciona en un cuadro que se abre cuando se hace clic en este botón.
  • Comentario: Introduce en el código etiquetas de apertura y cierre de comentario (<!– –>).
  • Head: Introduce elementos meta, como palabras clave, descripción, meta, etc.
  • Script: Introduce una etiqueta script, abriendo un cuadro que permite introducir los elementos que componen el script, como por ejemplo, seleccionar el tipo de scrip de una lista,  vincular con un archivo externo, escribir el script directamente, etc.
  • Plantillas: Haciendo clic en el ícono, se abre un menú que permite seleccionar alguna de las opciones de trabajo con plantillas.
  • Selector de etiquetas: Abre una ventana llamada selector de etiquetas, que permite seleccionar una etiqueta de una amplia lista, además de poder visualizar una descripción completa (en inglés) de la misma.
  •  
  •  

lunes, 11 de octubre de 2010

Pasos para diseñar un sitio Web


Parte 1: Conseguir Adobe Dreamweaver
   
Bueno, llegado a este punto, supongo que has de tener instalado el Macromedia Dreamweaver8 del programa en Español, por su puesto. Por eso te recomiendo que intentes conseguir esta version para poder seguir el tutorial. en tu ordenador. Nosotros utilizaremos la version
Tambien supongo que tienes un espacio web, si no lo tienes puedes acceder a uno gratuito, Aqui te dejo una lista de Servidores gratuitos muy buenos para alojar tu Web.

Parte 2: Preparar nuestro entorno de trabajo.   

Una vez que te hayas descargado e instalado el Dreamweaver, necesitas crear las carpetas en las cuales vamos a meter todo el contenido de nuestra Web. Vamos a crear dos carpetas:
Una carpeta que llamaremos "web" que es donde irá todo el contenido de nuestra web e iremos guardando nuestra página a medida que la vayamos creando. Al mismo tiempo dentro de esta carpeta "web" crearemos una nueva carpeta que llamaremos "imagenes". Esto que parece una tonteria, es MUY IMPORTANTE, ya que nos permitirá tener organizada nuestra web, y a la hora de subir la web será mucho más facil.


Parte 3: Y... ¿Como lo vamos a hacer?  
Bueno, una vez hecho todo lo anterior, te voy a explicar por encima como vamos a hacer nuestra primera pagina web. Vamos a utilizar el sistema que utilizan la mayoria de webmasters. Vamos a trabajar con Etiquetas DIV.... no te asustes !!! Son muy sencillas de utilizar, te explico por encima:
Una Etiqueta DIV es un pequeño rectangulo, donde podemos poner cosas dentro. Es decir, las DIV se utilizan para dividir la web en partes, y trabajar esas partes de forma individual. 



Es muy sencillo, a cada etiqueta le daremos un tamaño determinado. No te preocupes por eso, lo haremos mediante una Hoja de Estilo que es un documento donde escribimos el tanto el tamaño que queremos darle a las etiquetas, como la posicion que queremos que tengan. Dentro de cada DIV podremos poner muchas cosas: Texto, Tablas, Listas, Imagenes, Links ....
Una vez que ya te has familiarizado con estos conceptos, creo que estas preparado para comenzar con lo que realmente nos interesa "Crear nuestra primera WEB"

Parte 1: Empieza nuestro proyecto...Abrimos Dreamweaver 
 
Bueno, una vez que te haya quedado claro todo lo anterior, es hora comenzar con la creacion de nuestra pagina web.
1º.
Vamos a ejecutar el Dreamweaver. Vamos a Archivo > Nuevo > Página en blanco > Html.



 
Una vez dentro, puede que te asustes, ya que tiene demasiadas opciones y botones, pero descuida ya que la mayoria no los vamos a utilizar. Veras que la pantalla se divide en dos partes, la del "codigo html"  y la de "diseño"  donde veremos graficamente nuestra web

Parte 2: Poniendo el Titulo a la pagina 
 
Ubicate en la parte de Codigo y pon el Titulo que quieras a tu pagina web y ponle el título Titulo : Ejemplo Animales.




Creando nuestra Cabecera Web   

Bueno, una vez llegado a este punto debes tener la estructura de la web bien formada: Ojo, si te ves que te ha resultado facil, puedes probar haciendo diferentes diseños, añadiendo mas Etiquetas Div a la pagina, o colocandolas de diferentes formas. 

Creando nuestro Menu y Nuestro Contenido   

Para crear nuestro Menu, nos basaremos en la utilizacion de una Tabla. Es muy sencillo, colocate dentro de la Etiqueta Div que creamos con el nombre "menu". Una vez dentro, vete a Insertar > Tablas.
Elige una tabla de 1 sola columna y 10 filas por ejemplo.


Si te fijas la tabla esta entre las etiquetas <div> (indica el principio)  y  </div> (indica el final).
Una ves contruida la Tabla, puedes darle color de Fondo a las celdas, Y escribir cosas en ella.

miércoles, 6 de octubre de 2010

Modo de trabajo con Dreamweaver



Una vez visto la pequeña descripción de los elementos que conforman la panatalla principal de Dreamweaver, vamos a a ver como las introducimos en nuestro sitio web el imagenes o codigo html. Para ello tienes que tener la ventana principal del dreamweaver dividida para que se vea tanto el código HTML como el diseño así:



Diferentes vistas de Dreamweaver

Vista de Código


Conforme cree y trabaje con los documentos, Dreamweaver generará automáticamente el código HTML subyacente. Para examinar o editar este código, utilice uno de los editores de código de Dreamweaver: la vista de Código de la ventana de documento o el inspector de código.

Vista de Diseño


La vista de Diseño muestra una representación visual del documento tal y como la verá en la pantalla del navegador. Cuando trabaje en la vista de Diseño, podrá optar entre dos vistas para realizar el diseño: vista de Disposición (puede diseñar una disposición de página e insertar gráficos, texto y otros elementos multimedia) o vista Estándar (permite insertar capas, crear documentos de marcos, crear tablas o utilizar otras funciones no disponibles en la vista de Disposición y se activa haciendo clic en el icono Vista estándar del panel Objetos).

Vista Combinada


Como se señaló, es una combinación de las dos anteriores.


lunes, 4 de octubre de 2010

DREAMWEAVER

El Dreamweaver, es un programa de la empresa Adobe que sirve para diseño y programación web, básicamente para hacer o modificar páginas de Internet.es utilizado principalemte para la creacion de sitios web y aplicaciones, tambien se usa para la edicion creacion de codigo para la web.es fácil de usar y permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.
El programa es realmente muy completo y sus nuevas versiones son cada vez más sencillas, aunque siempre necesitarás conocer algo del tema para poder utilizarlo.


PANTALLA PRINCIPAL DE DREAMWEAVER


El aspecto de la pantalla de Dreamweaver nada más abrirlo se compone de los siguientes elementos:
  • La Ventana Bienvenido: aparece la primera vez que iniciamos el programa. Ofrece sugerencias para la configuración del espacio de trabajo para distintos fines e información sobre nuevas funciones para aquellos que hayan trabajado con antiguas versiones de Dreamweaver
  • La Barra de título: en la parte superior de la ventana de programa, muestra el nombre del Web abierto actualmente y los botones minimizar, restaurar y cerrar.
  • La Barra de menús: situada bajo la barra de título, permite acceder a todas las opciones del programa a través de sus menús.
  • la Ventana del documento: es el área principal de trabajo. Aquí es donde crearemos nuestras páginas Web. Esta es una ventana que se puede minimizar, maximizar y restaurar. 
  • Barra de Herramientas Documento:

Justo encima de la ventana de documento. Dreamweaver puede presentar dos barras de herramientas: Documento y Estándar. Esta que vemos por defecto es la de Documento. Actúa directamente sobre la ventana de documento:
  • Para mostrar la vista del código HTML de la página Web
  • Para mostrar un a vista conjunta del código y el diseño
  • Para mostrar la vista del diseño nuestro documento
  • Para dar un título a nuestra pagina Web en el cuadro de texto "Titulo"
  •  Barra de Herramientas Estándar:

Se muestra y oculta seleccionando Ver>Barras de Herramientas>Estándar. Presenta las opciones básicas de gestión de ficheros junto con el uso del portapapeles y las opciones de deshacer y rehacer. En el caso de la imagen esta barra está oculta.
  • Panel Insertar
Desde este panel y sus solapas, como desde su menú paralelo Insertar, introduciremos los elementos más utilizados para el diseño de los objetos de una página Web.

  • Inspector de Propiedades

Es la herramienta principal para determinar los detalles de un objeto o texto seleccionado. El contenido de este panel varía dependiendo del objeto seleccionado en la ventana de documento (texto, imagen, tabla, ...), y así modificar sus atributos.

  • Menú de Paneles


Ocupa la parte derecha de la pantalla y está diseñado para contener los paneles más utilizados por el usuario. Su uso es muy cómodo gracias a que se puede ocultar y visualizar todo el menú con solo pulsar en el botón situado en medio de la barra que lo separa del resto de la pantalla.

  • Barra de Estado

Situada debajo de la ventana de documento. A la izquierda de la barra tenemos el Selector de etiquetas HTML. Este es de gran utilidad. Si el documento es una página vacía solo se verá la etiqueta <body>. Pero a medida que la pagina se complique el Selector ampliará la lista de etiquetas según donde se sitúe el cursor. Muestra las etiquetas que rodean la posición del cursor. Como su nombre indica, hace algo más que indicar la posición en el documento. Mediante él, se puede seleccionar rápidamente cualquier elemento que rodee al cursor en uso, para modificarlo o eliminarlo.

A la derecha de la barra de estado podemos ver información sobre el documento.
  • Tamaño de la ventana de diseño del documento, en píxeles.
  • Indicador de descarga, que nos informa del tamaño del documento y el tiempo de descarga.

Nota: En los siguientes días pondre mas entradas sobre los demas temas ok.