You are on page 1of 88

Manual de Dreamweaver

Taller de Dreamweaver
Clase 01: Introducción Bienvenidos al curso de Dreamweaver/HTML de elwebmaster.com En este curso de 22 clases ¡¡¡Sí, 22!!!, vamos a aprender el uso del programa de Adobe para maquetado de páginas web en su versión CS3, sin dejar de lado el lenguaje de tags utilizado para la creación de las mismas. En este caso veremos el XHTML en su versión 1.0 (eXtensible Hypertext Markup Language) que es el estándar actual. A quién va dirigido este curso Este curso va dirigido tanto para los que se inician, como para usuarios avanzados de Dreamweaver y de HTML. Para cada tipo de usuario seguramente va a haber una ayuda, ya que no solo se abarcará el uso del programa o la composición del lenguaje, sino también pautas a seguir para una correcta escritura, disposiciones de la W3C, y tips de ayuda a la hora de maquetar una página. También en este curso se hará una introducción al uso de estilos, para luego intersecar con el posterior curso de CSS. Utilización del curso El curso constará de 22 clases semanales, en las que iremos viendo las distintas herramientas de Dreamweaver (desde ahora Dw) a la vez que las comparamos con su uso en lenguaje XHTML. También haremos algunas “clases taller” de ser necesario. En cada clase se verán temas específicos, diferentes, en los que se darán por sentados los conocimientos de clases anteriores. Mi recomendación personal es que todo tipo de lector, tanto avanzado como principiante, lea el curso completo, ya que algunos podrán aprender y otros repasar los temas tratados, y a su vez seguir el hilo sin quedar mal parados en ninguna de las clases. ¡Además recuerden que siempre se puede aprender algo nuevo! A tener en cuenta Hay ciertas cuestiones en este curso que hay que tener en cuenta. Por una cuestión de estándar, vamos a aprender Dw pero que quede claro que no es el único programa que se puede utilizar para crear paginas web, y además que, sabiendo HTML solo necesitaríamos un editor de texto para hacerlas. El Dw es solo una herramienta que nos facilita las cosas, pero no quiere decir que sin Dw no se pueden hacer páginas web. 1

Manual de Dreamweaver Por otro lado, como la mayoría de los softwares de la actualidad, automatiza muchas cosas dando por supuesto que el usuario las prefiere, y que no siempre es lo que nosotros necesitamos para nuestra página. Personalmente no recomiendo usar Dw sin antes saber HTML, creo que lo importante es saber HTML y usar Dw para agilizar la creación de la página, y no usar el Dw para hacer páginas más rápido de lo que sería aprender el lenguaje. No confundamos, Dw es una herramienta y no más que eso. En el curso por cada cosa que hagamos en modo visual en Dw iremos explicando su paso en lo que sería código HTML así poder aprender ambas cosas a la vez. Conclusión Bueno, entre esta introducción y el programa que podrán visitar en esta misma sección, ya tenemos un vistazo general del curso que, como deducirán va a ser muy completo (¡si no lo es en 22 clases, qué nos queda!). Empezaremos la siguiente clase con fundamentos de HTML y Dw, y luego vamos a recorrer ambos hasta manejar todas sus características a nivel avanzado. Trataremos de cubrir todos los puntos y de la mayor simplicidad posible, aunque pueden dejar sus preguntas o comentarios que van a ser respondidos ¡o incluso incorporados en el curso!

Clase 02: Objetos de Estudio ¡Bienvenidos otra vez! Ya estamos en la segunda clase de Dreamweaver/HTML. En esta clase veremos más en profundidad qué es el lenguaje HTML y cómo se articula con Dreamweaver. Además conoceremos qué aspectos trabaja este programa a la hora de crear un sitio web. Otro punto a tratar son los estándares web y cómo son interpretados por los navegadores. ¡Manos a la obra! ¿Qué es Dreamweaver? Bueno, calculo que a esta altura la mayoría de los que estarán siguiendo este curso sabrán qué es Dreamweaver pero, como no queremos dejar a nadie afuera, vamos a presentar el programa. Dw es un editor de páginas web que tiene, entre otras, la característica de poder crear las páginas web en modo visual. Las páginas se editan en HTML que en sí, es texto, y para visualizar los cambios o para ver “bien” en donde estamos parados y qué estamos tocando, debemos hacer un refresh de la página en nuestro navegador para obtener una previsualización. Dw permite mediante su modo visual, no solamente tener lo que estamos viendo actualizado constantemente, sino que también nos permite, mediante sus herramientas, crear el código 2

Manual de Dreamweaver HTML de manera visual. A modo de ejemplo, ya que esto lo abordaremos más tarde, podemos dibujar un encuadre, o crear un texto, aplicar colores, etc. sin escribir nada de código, utilizándolo como un programa gráfico o como si se tratara de un procesador de texto. Por este modo de crear páginas se dice que Dw es un editor WYSIWYG, porque lo que vamos viendo mientras creamos la página, es lo que saldrá en el navegador. Dw se encargará de pasar todo lo que hagamos a código HTML para que sea interpretado. Vale aclarar que Dw no es el único programa que sirve para la creación de páginas web. ¿Qué es HTML? El HTML es un “lenguaje de marcado” que nos permite preparar documentos web insertando en él, texto e imágenes en una serie de marcas (tags) que controlan los diferentes aspectos de la presentación y comportamiento de sus elementos. Los tags de HTML se escriben entre signos mayor y menor ( <ejemplo>) y ya vienen predefinidos de acuerdo con la versión utilizada del lenguaje (nosotros usaremos XHTML 1.0). Por ejemplo para el cuerpo de una página web se utiliza el tag <body> (bastante deducible :P). Todas las etiquetas de un documento XHTML deben ser cerradas. ¿Qué es cerrar una etiqueta? Es definir su campo de acción. Cuando nosotros ponemos una etiqueta como por ejemplo la que tomamos anteriormente, <body>, estamos marcando el comienzo del cuerpo de una página web, pero también debemos indicar el final, y esto es lo que hace una etiqueta de cierre. En este caso la etiqueta sería </body>, como ven lleva una barra adelante. Luego cuando abordemos el lenguaje veremos más cuestiones de sintaxis, por ahora dejemos esto acá. ¿Porqué el curso es de Dw/HTML? Dijimos que el Dw transformaba todo lo que hacíamos en modo visual, a HTML; entonces, ¿Para qué en el curso se incluye HTML? Bueno, en primer punto, el saber HTML ya nos desliga de usar sí o sí el Dw y por lo tanto permite que el curso sirva para gente que utilice diferentes programas. Además de esto, no es muy lindo presentar problemas a esta altura del curso, pero Dw no siempre hará las cosas como queremos, y vamos a necesitar “meter mano” en el código para poder acomodarlas a nuestro gusto. Mas allá de esto, otros motivos no menos importantes son, por ejemplo, saber lo que estamos haciendo y, además, a futuro cuando tengamos que agregar cosas externas, nuestro HTML se volverá mas abstracto (con menos información sobre su presentación) y necesitaremos tener idea de por qué las cosas están armadas de tal o cual manera. 3

Manual de Dreamweaver Pensemos que este curso va a arrancar por lo bajo, a nivel principiante, sin ningún requerimiento para poder entenderlo ni aprenderlo, pero también en su tramo final estaremos usando tanto Dw como HTML a nivel avanzado, y sin lugar a dudas para esta altura ya tendremos que manejar ambas cosas; por lo menos esta es la intención del curso. HTML y W3C El lenguaje HTML se rige bajo ciertos estándares que permiten a los creadores de webs saber la manera correcta de maquetar sus páginas asegurándose (o casi) , que serán vistasde forma correcta en prácticamente cualquier navegador actual. También permite a los creadores de navegadores web, conocer estos estándares y así prepararlos para estar siempre actualizados y sacar provecho de las ventajas de las nuevas tecnologías que van surgiendo. Establece una relación simbiótica entre los diseñadores y las empresas de software para realizar siempre productos estandarizados y actuales. Estos estándares los determina la W3C que es una organización que esta dirigida por Tim Berners-Lee, el creador de varias tecnologías web como URL, HTTP y el mismo HTML. Conclusión Hemos llegado al final de nuestra segunda clase, en la que aprendimos las nociones básicas de los objetos de estudio del curso. Ya podríamos decir que estamos preparados para abordar el uso del Dreamweaver y empezar a crear paso a paso nuestro propio sitio web.

Clase 03: Ingresando al programa ¡Hola! Bienvenidos a la clase número 3 de nuestro curso de Dreamweaver/HTML. Hoy vamos a echarle un vistazo general al programa para familiarizarnos con la interfase y para que ustedes puedan ir investigando en el transcurso de la semana. Si bien se supone que muchos aún no poseen los conocimientos necesarios para crear una página web “completa” es bueno ir metiéndose sin miedo en cada menú para tener una idea de para qué sirve cada elemento. Conociendo Adobe Dreamweaver 1- Barra de menú:

File Es

el

primer

ítem

de

la

barra

de

(Archivo): menú. 4

como tablas. 5 . Estas herramientas las van a utilizar mucho y les van a ir encontrando su utilidad a medida que trabajen con el programa. color y algunas otras cosas que las veremos cuando comencemos nuestra primera página (¡¡Vamos. cambiar la fuente. Text (texto): En este menú encontraremos todas las opciones para modificar texto como si de un procesador de texto se tratara. o eventos (¿Qué son? Lo veremos mas adelante.”Close”(cerrar). “Copy”(copiar). Tenemos aquí la opción. Insert (insertar): Aquí podremos encontrar varios tipos de objetos para poner en nuestra página.Manual de Dreamweaver En él encontramos opciones que les serán familiares en su mayoría ya que se encuentran en varios programas de escritorio (Word. jeje). No se preocupen si no entienden alguna herramienta. que no falta tanto!!). etc. Podremos alinearlo. “Select All”(seleccionar todo). cuando estemos más avanzados en el curso haremos alguna clase-taller para uso de herramientas y comodidad a la hora de usar el programa. activar reglas (rulers). o acomodar guías para poder alinear los elementos que tenemos (en modo visual). tamaño. Edit(Edición): En este menú. etc). links. “Paste”(pegar). Tambien desde aquí podemos abrir otros paneles tanto del modo visual como del modo código. Modify (modificar): Es el menú indicado para editar cualquier cosa que tengamos dentro de nuestra página. No vamos a hablar mucho sobre este menú ahora porque Dw tiene una barra de acceso rápido para insertar objetos. imágenes. agregarles links. pero que veremos como acceder a ellas desde diferentes lugares que explicaremos en futuras clases. contamos con las ya conocidas. “Abrir”(open). “Save”(guardar). que nos servirán para ajustar preferencias de visualización entre otras cosas. Desde aquí podremos cambiarle el tamaño a algunas cosas de nuestra pagina. y otras no tan comunes. Además de las opciones comunes ya tenemos otras que explicaremos con un poco más de detalle a medida que las vayamos utilizando durante el curso. poner una cuadrícula (grid). View(Ver): Este menú tiene opciones muy importantes para utilizar a la hora de hacer un sitio web. echen una mirada al menú para recordar las opciones y luego a la hora de usarlas ya sabrán donde están. Podemos realizar Zoom in/out. Excel. etc. alinearlas. y explicaremos las opciones de la misma más adelante. por lo tanto sería explicar dos veces lo mismo. o el programa no les permite utilizarla. “New”(nuevo).

) hechos por gente que aprendió como uno lo esta haciendo. Conozco gente que la ha usado para aprender incluso el uso del programa.com. veremos las opciones detalladamente. pestaña Common 6 . vamos ¡¡Anímense!! Clase 04: Panel Insert. Sin embargo creo que hacer bien una página. Úsenlo. Si bien tiene algunas cosas (como la de limpiar el código por ejemplo). investíguenlo. Podemos ocultar o mostrar otros menúes. también consiste en ir armándola prolijamente. nunca usé la ayuda. no sólo de este programa sino de ninguno. y que ya se topó con los problemas que nos topamos nosotros a la hora de usarlo. Es muy importante conocer el entorno de trabajo para no volvernos locos el día que se nos ocurra hacer algo y no sepamos donde están las cosas. utilícenlo aunque no sepan hacer una pagina en sí. Window (ventana): Este menú tiene todas las herramientas referidas a nuestro espacio de trabajo. vamos. Traten de ir familiarizándose con el programa. Si bien tiene cosas interesantes. Más adelante cuando creemos y configuremos nuestro primer sitio. se tornan inútiles (:p). Site (sitio): Este menú es el que nos permite definir nuestro sitio a la hora de empezar a trabajar con Dw. ventanas y ordenar nuestros espacios a gusto. Yo prefiero un tutorial como los que se dan en elWebmaster. como siempre los espero la semana que viene para seguir aprendiendo sobre la creación de páginas web. paneles. aunque pueden investigarlas cuando ya estemos avanzados en nuestra página. Los casos restantes. y no darle un repaso al final para acomodarlo más o menos y que siempre nos falte algo por emprolijar. como este curso va de la mano con HTML no veo la necesidad de estas herramientas. Muchas veces porque se pasan de “básicas” o se vuelven “para expertos”. Help (ayuda): Aquí encontraremos la ayuda que nos ofrece Adobe para utilizar el programa.Manual de Dreamweaver Commands: La verdad que a este menú no le encontré demasiado uso. También tiene algunas opciones para “hacernos la vida fácil” a la hora de trabajar directamente sobre un servidor. yo en mi experiencia personal. Conclusión Llegamos al final de esta clase.

pero de manera más fácil y dinámica. nos permite marcar nuestra pagina. filas. Recuerden que estamos en la fase de presentación del programa. y espaciados. y su manejo en HTML. Panel Insert (insertar) El panel de insertar nos provee de la gran mayoría de las herramientas de diseño a la hora de realizar nuestra web. Thunderbird. para luego poner links que vayan a esas marcas. Email-link: Con esta herramienta podemos crear un link a una dirección de email. Table: Nos permite crear una tabla con divisiones de columnas. buenas! Hoy vamos a presentar la cuarta clase del curso de Dw. Named Anchor: Esta herramienta nos permite crear un “punto de ancla” para luego reconocerlo. No se preocupen por los detalles porque mas adelante iremos usando cada una por separado mostrando el uso de todas sus opciones. con la dirección que hayamos puesto nosotros en el link. O sea.Manual de Dreamweaver Buenas. que es uno de los mas usados dentro del diseño 7 . tiene accesos directos a varias de las cosas que ya vimos la clase pasada en la barra de menú. Hyperlink: Mediante esta herramienta. etc. Ahora vamos a ir mostrando cada una y diciendo para que sirven. por ejemplo. Insert Div Tag: Nos permite crear el elemento Div. Pestaña Common: Aquí tenemos una vista del panel con sus pestañas y sus herramientas. directamente le abrirá su programa de mailing predeterminado (Outlook. La clase pasada vimos la barra de menú con todas sus herramientas (algunas quedaron pendientes para mas adelante por su complejidad). tamaños.). Esta semana. a un sitio externo (otra página). listo para mandar el email. vamos a ver los paneles de herramientas que. Cuando un usuario haga clic. podemos crear un enlace. además de tener muchas opciones que todavía no conocemos. a una parte de nuestra página.

En sí. para luego ubicarlos donde a nosotros nos parezca. pero está :p . entre otras cosas (que veremos mas adelante). la cual nos hayamos olvidado el nombre. pero que no afecte a la visualización (es una guía para los desarrolladores. como por ejemplo Javascript. no lo verá). y marcarle regiones editables. Images: Nos permite insertar imágenes. Comment: Sirve para ingresar un comentario dentro de nuestra página. sin contenido. Head: Con esta herramienta podemos incluir diferentes cosas en la cabecera de la página.Manual de Dreamweaver web actual. es para crear una “base” de página. No le veo otra utilidad que la de poder insertar una etiqueta. Con el podemos crear cuadros en los que pondremos contenido. La cabecera es la parte de la página que no se verá y en la que incluimos especificaciones como. Tag Chooser: Sirve para seleccionar etiquetas HTML (o de otro lenguaje) e insertarlas directamente en nuestra página. Server Side Include: Permite incluir un archivo de código por fuera de la pagina actual (ya lo veremos también mas adelante. para luego usarla con varios contenidos diferentes. Templates: Esta herramienta sirve para crear un template a partir de una página que estemos haciendo. Innecesario. que nos sirva de referencia a nosotros. cuando lo vayamos usando). si eso queremos. el título de la página. Date: Nos permite ingresar la hora actual en diferentes formatos (bastante inútil por cierto). Conclusión 8 . pero el usuario que vea la pagina. Script: Nos permite ingresar código de programación dentro de una página. y otros objetos multimedia. por ejemplo. Media: Nos permite insertar animaciones Flash.

Entre todos podremos aprender… y enseñar. para luego ubicarlos donde a nosotros nos parezca. Panel Insert (insertar). Me gustaría que los que siguen o leen el curso envíen sus preguntas o comentarios. el curso está hecho para ustedes. y ver hasta dónde llegamos. y si no aprenden. No se queden con las ganas. porque son demasiadas las herramientas a mostrar y la verdad que como este curso es para todos los niveles no quiero dejar nada afuera. Se usa en modo visual como si se tratara de una herramienta “rectángulo” de un programa de edición grafica. A veces no da el resultado deseado. Estos son cuadros en los que pondremos contenido. así que conviene usar esta herramienta con cuidado. pestala Layout Y aquí estamos de nuevo! Volvemos con todo en nuestra clase 5. en la que también se encuentra. tal vez se aburran un poco. las dudas que tengan. Hoy nos toca seguir con las demás pestañas. 9 . de nada sirve el curso entonces. Los que vengan siguiendo el curso semana a semana y no sean principiantes. Insert Div Tag: Nos permite crear el elemento Div. y los que sean principiantes y no hayan encontrado nada anteriormente que puedan entender ¡¡¡Pues acá esta la panacea del dummy webmaster!!! La semana que viene seguiremos con la exploración de los paneles de herramientas. Draw AP Div: Nos crea un elemento Div en el lugar en el que nosotros lo dibujemos a mano alzada. y luego empezaremos con nuestro sitio. Esta opción ya la vimos en la pestaña “common”. La clase pasada vimos la primer parte del panel insertar. la pestaña “common”. Pestaña Layout: Mode: Nos permite poner el modo de visualización del panel de layout. que es uno de los más usados dentro del diseño web actual.Manual de Dreamweaver Esta parte del taller es bastante larga. aunque pueden repasar. segunda parte. Clase 05: Panel Insert.

Más adelante veremos como hacer este tipo de menúes. por ahí lo más práctico sería que lo prueben una vez que aprendamos a crear una página. Spry tabbed panels: Esta herramienta es parecida a la anterior. Nos crea una pestaña que cuando la cliqueamos.Manual de Dreamweaver Spry menú bar: Nos crea una barra de menú desplegable. Es difícil de explicar su utilización. Es una especie de “spry accordion” pero de un solo botón. se nos abre una caja lentamente hacia abajo. esta herramienta nos deja incluir una fila por encima de donde estemos parados actualmente en la tabla. tamaños. filas. en la que al pasar por un elemento del menú. Spry accordion: Otro de los regalitos de Dreamweaver para decorar festivamente nuestra pagina (ya me enojé con tanta cosita inservible). Esta herramienta también se encuentra en la pestaña “common” que vimos y explicamos la clase pasada. Siempre dentro de una tabla por supuesto. Spry collapsible panel: Esta es la que más me gusto de todas las “spry”. Table: Nos permite crear una tabla con divisiones de columnas. Insert column right: Agrega una columna a la derecha de donde estemos parados actualmente en nuestra tabla. en la que podemos poner contenido. Insert row abobe: Esta herramienta nos deja insertar una fila debajo de la fila en la que estemos parados actualmente. La verdad no es la manera en la que yo la haría pero puede sacarnos de un apuro. y espaciados. Esta herramienta nos agrega un menú en forma de acordeón. pero más lindos :p . el menú se desplega hacia abajo abriendo un lugar en donde podemos agregar contenido. 10 . que cuando clickeamos cada una de las “pestañas”. nos crea una barra de pestañas. pero en vez de crearnos un menú desplegable. se despliega otro con más opciones. Insert column left: Agrega una columna a la izquierda de donde estemos parados en nuestra tabla. Insert row below: Al contrario de la anterior.

así sacamos esto mas rapido. Clase 06: Panel Insert.Manual de Dreamweaver Frames: Nos permite crear frames. Esperemos terminar pronto de verlas a todas así ya podemos crear nuestra primer página. así cuando las expliquemos a fondo con sus usos. Pestaña Forms: Form: ¿A que no saben para que sirve esta herramienta? ¡Correcto! para insertar un formulario. Los formularios nos sirven para que los usuarios puedan cargar datos. Iframe: A primera vista son parecidos a los frames ya que crean una división en nuestra página donde podemos cargar una segunda. no nos sonarán a chino mandarín. empezar a ponerlas en acción. envía todos los elementos del formulario con él. y comentar un poco más a fondo cada una. Podemos usarla tanto en modo de diseño como en modo código. la numero 6. por ahora dejemos la clase aquí. 11 . Panel Insert (insertar). y ustedes que siguen el curso tienen más para estudiar durante la semana (me imagino que estarán probando las cosas que vemos en cada taller no? jeje). y todavía nos quedan muchas más. pestañas Forms Hola! ¿Cómo andan? ¿Preparados para otra clase de Dreamweaver? En esta clase. y así nosotros recibirlos desde nuestra página. aunque tienen diferencias muy importantes. Conclusión Bueno. pero a no aflojarle. que esta es la parte más pesada pe ro es importante un reconocimiento de la interfase para ya ir sabiendo por lo menos los nombres y qué son cada una de las herramientas. Y sí… son muchas herramientas. Ya veremos a ambos más adelante y sus ventajas y desventajas. Hoy nos toca revisar las herramientas de la pestaña “Forms”. mejor. vamos a ver máaaas herramientas del panel Insert. que son divisiones de nuestra página en la podremos cargar otras páginas diferentes. Como verán las opciones de Dw son muchas. tercera parte. y si podemos llegar a ver la pestaña “Data”. Cuando un formulario es enviado.

Checkbox: Un checkbox nos permite poner una cajita de checkeo (como las que aparecen al lado de “acepta los términos y condiciones…” estas sirven para que el usuario seleccione una o mas. Por ejemplo. así el usuario no lo puede ver. Se usan mucho en los registros para seleccionar la fecha de nacimiento. Radiobutton: es igual que un checkbox. Radiogroup: es un atajo que nos brinda Dw para poder poner varios radiobuttons que pertenezcan a un mismo grupo. los administradores de sitios web. u otro archivo. Jump-menu: es como un list-menu. cuando se registran en una página. sólo que es más grande. y que al clickearlo enviara el formulario con lo que tengamos cargado. solo que sus opciones nos permiten llevar a quien las elija a otra página. y cuando este se envía. Sirven para nosotros.Manual de Dreamweaver TextField: Un textfield es un elemento de formulario. clickeando uno seleccionado. Además. Un ejemplo de un TF para que tengan una idea es el lugar donde ponen su nombre o su nickname. y tiene no solo una fila sino que puede tener varias. no se deselecciona (como pasa con los checkbox). ni cargarle datos. es el lugar donde se puede escribir texto. sólo que permite elegir uno y solo uno entre varios radiobuttons. para que luego sea enviado por nuestro formulario. Hidden Field: Un Hidden Field es un TextField. un ejemplo fácil. Este elemento va dentro de un formulario. enviará con él todos los textfields también. poder navegarlo con las barras. qué navegador esta usando (en realidad es mas útil que eso pero ya lo veremos). lo lleve directamente. aunque sí lo hace cuando clickeamos otro radiobutton del grupo. Text-Area: Un Textarea es un campo muy parecido a un textfield. List-menu: Nos permite poner un menú desplegable de selección para que el usuario pueda elegir entre una de las opciones que le pongamos. Image-field: Es un campo en el que podremos poner una imagen. podemos tener una lista de opciones de varias páginas. entre varias opciones. sólo que tiene una propiedad que lo hace oculto. y además nos pone cada radiobutton entre las etiquetas “label” que nos permiten dar una identificación a cada uno. y que cuando el usuario clickee una en el menú. 12 . y si el texto excede el tamaño del Text-Area. Sirve para contener textos grandes y también nos ofrece barras de scroll para poder setearle un tamaño. para poder precargarle información que necesitemos.

Vayan practicando las cosas que vimos. a modo de ejemplo: ¿Acepta los términos? Aquel texto es un Label de la checkbox. Spry validation checkbox: y seguimos con validaciones. File-field: Inserta una casilla con el botón de “examinar…” para que el usuario pueda buscar y enviar un archivo a nuestro sitio. sirve como botón de “enviar” pero con la diferencia que podemos ponerle la imagen que nosotros queramos. podemos seleccionar que tipo de datos debe contener el campo y. espero que no estén muy cansados de ver tantas herramientas (yo si :p ) y no se preocupen (o preocúpense) ¡¡porque vienen muchas más!! La clase que viene espero que ya estemos terminando con el panel Insert y ya dar comienzo a la creación de nuestra primera página. Button: nos permite insertar un botón. otro textfield y poner el boton de “enviar formulario” o “borrar formulario”. mirando como funcionan y sus opciones. le saldrá un cartel de error. Podemos crear un Fieldset y dentro poner los text-fields de datos del usuario. Esto sirve por ejemplo si queremos que el usuario ingrese un email en nuestro campo. Por ejemplo. 13 . pero verifica por ejemplo. si tenemos varios checkbox en un grupo y queremos que al menos uno este seleccionado (entre otras cosas). Spry validation select: al igual que el list-menu que vimos anteriormente este es igual con la diferencia que valida que el usuario haya elegido al menos una de las opciones del selector. que va a tener varias funcionalidades que podremos elegir. Spry validation textarea: Esta opción nos permite crear un textarea con validación. enviar el formulario o borrar los campos del mismo entre otras cosas. al intentar enviar el formulario nos dará error. Label: sirve para poner una descripción a un campo. si el usuario ingresa otra cosa. cuando intente enviar el formulario. que ponga realmente un email y no cualquier cosa. Spry validation textfield: esta opción nos permite agregar un campo de texto (textfield) que además de permitir que el usuario ingrese datos. Es igual a un checkbox común. Conclusión Bueno. Al igual que el anterior si el textarea no cumple con los requisitos de validación.Manual de Dreamweaver En sí. crear otro fieldset y poner los checkbox de preferencias. Fieldset: La herramienta fieldset nos permite agrupar campos de un formulario.

<!--[if !vml]--> <!--[endif]-->Emphasis: De nuevo. para dar por terminado (por el momento) el panel Insert. Como todavía estamos en la parte “principiante” de nuestro curso. tener creada una base de datos. Hoy aprenderemos de qué se tratan las pestañas Text y Favorites. Clase 07: Pestaña Text y Favorites Buenas y santas! Bienvenidos a otra clase de Dreamweaver/HTML. cuarta parte. Pestaña Text: Bold: Nos inserta un tag HTML „<strong>texto</strong>‟ que nos muestra en nuestra página el contenido en negrita (en el ejemplo sería texto).Manual de Dreamweaver No se queden solo con lo que vemos acá y nada mas. 14 . <!--[if !vml]--> <!--[endif]--> Italic: Inserta los tags <em> </em> en los cuales su contenido se verá en estilo itálica. Esta es una de las cosas inentendibles que tiene Dw. e inclusive. Panel Insert (insertar). valga la redundancia. véanlo en modo código así se van familiarizando con el HTML. La realidad es que el Bold debería tener el tag <b></b> (que existe y tiene el mismo efecto que el strong) y el strong. Sería perder el tiempo ya que se entenderá mejor más adelante y para lo único que nos va a servir ahora es para “conocer los nombres” y la verdad que nos va a atrasar en cosas más importantes para esta etapa. Es exactamente lo mismo que el “Italic”. y si se animan. así pueden entender todo lo que hace el programa. Vamos a pasar directamente a la pestaña Text y veremos también la pestaña Favorites. conocimientos de bases de datos. véanlo en vivo y en directo desde el Dw. la sección “Data” no la podemos explicar. <!--[endif]--> Strong: Es exactamente lo mismo que “Bold”. tener el <strong></strong>. porque requiere para varios de sus elementos. La pestaña que nos tocaría ver hoy sería la pestaña “Data” pero la vamos a dejar para más adelante. Esta vez nos toca (para variar) seguir con la barra de Insertar.

Estos tags conforman básicamente. Entonces porque existen diferentes? La respuesta es que como son tags comúnmente usados dentro de los textos de una página web. si no tenemos ninguno seleccionado. y las citas tendrían a su vez fuente mas chica. <!--[if !vml]--> <!--[endif]--> Block-quote: Block-quote nos crea un bloque con margen izquierdo en el cual podemos meter texto. Este sería el resultado. y las itálicas. un párrafo. lo refuerzo en negrita con un <b></b>. nos crea los tags vacíos para que escribamos dentro). terminada esta no-breve explicación. sin necesidad de un esfuerzo mayor. yo puedo predefinir a el tag <i></i> con un tamaño de letra menor (ya veremos cómo) y luego sólo necesitaría poner las citas entre <i></i> (itálica con tamaño menor) y los nombres entre <em></em> (solo itálica). lo reforzaría con un <strong></strong>. <!--[if !vml]--> <!--[endif]--> Paragraph: Nos pone un texto seleccionado entre los tags <p></p> (o bien. ya que una vez que se nos haga costumbre. y tendría a ambos con itálica. Entonces. Además. quiero que los textos citados aparezcan más chicos. pero estaría bueno acostumbrarse a trabajar así. un ejemplo para que quede más claro: Yo quiero que las citas de mi página aparezcan en itálica y los nombres propios también.Manual de Dreamweaver Acá vamos a hacer un “parate”. Lo mismo sucede con el <i></i> y el <em></em>. ¿Por qué? Quiero explicar un par de cositas: En realidad el lenguaje HTML tiene un tag <strong></strong> y un tag <b></b> en los cuales al ponerles texto dentro. es bueno poder definirles características especiales para poder usarlos en diferentes ocasiones. ahora si tengo que reforzar un encabezado que dice “Meteorito se dirige a la tierra”. sigamos con las opciones de la pestaña. Además. Solo por el valor semántico de la palabra. Los tags a nivel semántico prácticamente no se usan salvo por gente muy purista. si trabajara en una revista y tengo que reforzar un encabezado que diría “Taller de Dreamweaver”. 15 . A ver. este se verá en negrita. también existen por una “cuestión semántica”: Por ejemplo. estaríamos haciendo un trabajo prolijo. Bueno.

<!--[if !vml]--> <!--[endif]--> <!--[if !vml]--> <!--[endif]--> <!--[if !vml]--> <!--[endif]--> h1. …: Sirven para marcar cabeceras.” “Aquí tendríamos el blockquote en acción. Acá vamos a hacer otro “parate”. A tener en cuenta. por ejemplo: <p>El día esta nublado. El día esta nublado. los “enters” como “bajadas de línea” ni los espacios de la barra espaciadora. como espacios reales (sólo toma un espacio como real).” <!--[if !vml]--> <!--[endif]--> Preformatted Text: El texto que escribamos dentro de los tags de preformatted text (<pre></pre>) se va a mostrar en una letra con un buen espaciado y muy legible. h3. Para poder “hacer un enter” (bajar una línea) en nuestro texto y que se vea en el navegador tenemos que insertar el tag “<br />” y para hacer un espacio adicional en un entre dos palabras. los espacios que pongamos entre palabras u oraciones serán respetados. el h1 se utiliza 16 . Siempre que escribamos dentro del blockquote mantendríamos el margen para ordenar el texto.” Nótese que la bajada de línea (el “enter”) no fue tomado por el navegador. Volvamos con las pestañas. Además.Manual de Dreamweaver “Este texto sería un párrafo normal. tenemos que escribir ” “ Volviendo al ejemplo anterior.</p> En nuestro navegador se mostrará: “El día esta nublado.<br /> Pero a mi me gusta igual. Cuando nosotros escribimos en HTML un párrafo. deberíamos poner en el HTML: <p>El día esta nublado. h2. Pero a mi me gusta igual. el navegador no toma por ejemplo. para que en nuestro navegador salga la oración tal cual la escribimos arriba. Pero a mi me gusta igual. Pero a mi me gusta igual.</p> El resultado de esta oración si sería el siguiente.

En los ejemplos anteriores. Estas 3 funcionan en conjunto. <!--[if !vml]--> <!--[endif]--> <!--[if !vml]--> <!--[endif]--> <!--[if !vml]--> <!--[endif]--> Definition List.h3. Cuando creamos una “ul” o una “ol” esta nos indica el tipo de lista. <!--[endif]-->… <!--[if !vml]--> <!--[endif]--> List item: es el tag que va a encerrar cada uno de los elementos de una lista. La dd. cada “ítem” es un li. definition descripción. que difiere por su ordenamiento (puntos o números respectivamente. sin numeración. <!--[endif]-->item 2 <!--[if !supportLists]-->3. La dl. La dt. A modo de ejemplo: <!--[if !supportLists]-->1. Esto quiere decir. y los sucesores (h2. y cada uno de los “li” dentro de esos tipos. …… <!--[if !vml]--> <!--[endif]--> Unordered list: Nos crea una lista “desordenada”. va a crear una línea de ese tipo. definiton term. 17 . definition list.Manual de Dreamweaver generalmente para los títulos de mayor relevancia en una página. definition description: Sirven para crear una lista de definiciones. crea el título de la lista. <h2></h2>. <!--[endif]-->item 1 <!--[if !supportLists]-->2.…) para los subtítulos encadenados o textos de menor importancia con respecto a los anteriores. El tag que utilizan es el <h1></h1>. el 1 es el más grande) y formateado en negrita. A modo de ejemplo: <!--[if !supportLists]--> <!--[endif]-->Item 1 <!--[if !supportLists]--> <!--[endif]-->Item2 <!--[if !supportLists]--> <!--[endif]-->… <!--[if !vml]--> <!--[endif]--> Ordered list: Nos crea una lista ordenada. crea la descripción del término anterior. crea el término a definir. Además. definition term. los “h” ponen el texto en mayor tamaño (de acuerdo con su numeración. a modo de diccionario. aunque pueden ser otros).

pero si pasamos el Mouse por encima. Estos caracteres tienen la particularidad de que no pueden ser escritos de la manera tradicional. Quedaría <abbr title=””></abbr> Entonces nosotros podemos poner una palabra abreviada entre los dos tags. (esta es la dd) HTML: (esta es otra dt) Lenguaje de maquetación web. respectivamente). 18 . De esta manera. Su diferencia real es que el abbr se utiliza para abreviar una palabra. creado por adobe.” (para la letra “a” y la “i” con tilde. &iacute. uno de los caracteres que seleccionamos de su lista. y deben ser reemplazados para que los interprete el navegador. solo nos escribirá la abreviatura.Manual de Dreamweaver Pongo un ejemplo para que lo puedan entender: Diccionario (esta es la dl) Dreamweaver: (esta es la dt) Programa para maquetación de páginas web. y el acronym para un acrónimo. y la palabra entera en el atributo title. pero esta bueno conocerlas porque muchas veces nos pueden sacar de un apuro. no se verán en pantalla como corresponde. Un ejemplo de estos es el espacio en blanco que se escribe “ ”(sin las comillas) o las vocales con acento. <!--[if !vml]--> <!--[endif]--> Abbreviation: esta opción nos permite poner el tag <abbr></abbr> con un título dentro del primero. Ejemplo: <abbr title=”Dreamweaver”>Dw</abbr> Acronym: Funciona exactamente igual al tag anterior. Por ejemplo: <acronym title=”HyperText Markup Language“>HTML</acronym> Other Characters: Este botón nos permite agregar en donde tengamos posicionado el cursor. Su escritura en HTML es <acronym title=”"></acronym>. nos mostrará la palabra completa en un recuadro amarillo. “&aacute. (esta es otra dd) En general las Definiton list no son muy usadas por una cuestión de que la gente encuentra los mismos resultados usando otros tags.”. Caso contrario.

presionando clic derecho. Nos volvemos a ver la semana que viene ¡¡ya con tema nuevo para alegría de todos!! (o por lo menos mía :p) ¡Saludos! Clase 08: Estableciendo un área de trabajo ¡Buen día a todos! ¿Cómo van mis fieles seguidores del taller? ¡Me imagino que habrán estado practicando! Ya que por fin terminamos con nuestra querida barrita Insert. miren que es muy fácil seguir este taller. ¡Eso sí. Estaría bueno que vayan usandolas (por lo menos la pestaña text). yendo a “customize Favorites” obtendremos un panel para poder elegir todas las opciones que queramos del panel Insert y poner la que se nos ocurra. 19 . podemos empezar a movernos un poco más sobre Dreamweaver y ver lo que vayamos aprendiendo en pantalla. Conclusión Bueno.Manual de Dreamweaver Pestaña Favorites: <!--[if [endif]--> !vml]--> <!-- En esta pestaña. Preparándonos para nuestro primer sitio Y llegó la hora de armar nuestro primer sitio para investigar las herramientas y para que veamos juntos un poco más de cerca lo que vamos enseñando clase a clase. que los responderé lo mas rápido que pueda. De esta manera podremos hacer una pestaña con nuestras opciones más usadas y no depender del orden en que las puso Dw. pero es muy fácil también olvidarse lo que aprendemos! (bah. Prueben de hacerse una pestaña ustedes mismos con lo que prefieran. estas pestañas. nos llevaron unas cuantas líneas. así además de repasar las cosas que vimos hoy. recuerden que pueden dejar comentarios en la página. en el cual. y si no les sale. van incorporando mas rápido los tags HTML. yo tengo mala memoria :P). se nos abrirá un menú. si bien son de fácil uso. me ponen en práctica todo lo que veamos en las siguientes semanas.

y ahí se nos abrirá una ventana mas grande en la que definiremos el sitio. De aquí se desprenden varias opciones. una carpeta en la que vamos a guardar TODO nuestro sitio. y elegimos el menú “Files”. no podemos crear un HTML cualquiera y después andar copiando o pegando archivos de un lado para otro. se despliega un menú en el que seleccionamos “site”. Yo en el curso voy a trabajar sobre /Mis Documentos/sitios/Taller. Como vamos a crear un sitio web.Manual de Dreamweaver Para empezar. Vamos al panel de la derecha. pero no vamos a hacer esto. Una vez seleccionada esta opción nos va a aparecer una ventanita en la que vamos a elegir “New…”. Lo que hay que hacer es definir una carpeta para nuestro sitio. creamos en algún lugar de nuestra PC (o en nuestro server en caso que trabajemos directamente online). volvemos al Dreamweaver. Para esto. 20 . así el programa ya reconocerá en dónde estamos trabajando. La que nosotros vamos a elegir es “Manage Sites…”. y luego le diremos a Dw que carpeta es esta. Bueno… una vez que tengamos la carpeta creada. podríamos ir al menú File/New y crear un nuevo archivo HTML.

21 . damos clic en “Ok” para finalizar la creación del sitio.Manual de Dreamweaver En nuestro caso. El resto de las opciones no es necesario tocarlas para esta instancia. solo vamos a necesitar definir solo dos cosas. pero lo que sí debemos tener en cuenta es que la opción de “Cache” debe estar seleccionada. Luego de esto. El nombre del sitio (Taller) y el “Local root folder” que es el lugar en donde vamos a tener nuestro sitio (/Mis documentos/sitios/Taller).

Estamos listos ya para empezar a manejarla. Ya podríamos decir que estamos en la segunda fase de este curso (segunda de muchas!). El martes pasado aprendimos 22 . poder empezar a trabajar con él. y comparar algunas cosas con el “modo código” también. ahora sí. podemos empezar a crear archivos. ya hemos definido el sitio y creado nuestra primer página. Una vez que ya tenemos creado nuestro sitio. tendremos creado el sitio “Taller”. Como se puede ver yo ya creé uno de muestra y sobre el que voy a trabajar la clase que viene. listo para crearle archivos dentro. y nos quedaremos solo con el chico.html”. que se llama “index.Manual de Dreamweaver Se nos cerrara el menú grande de definición de sitio. sean bienvenidos a otra clase del Taller de Adobe Dreamweaver. Los espero la próxima semana ya con página en mano. para conocer el “modo diseño” de trabajo. podremos ver que en el panel de la derecha. Conclusión Bueno. Clase 09: Trabajo en modo diseño ¡Hola. en la sección “Files” ha quedado establecido. Lo seleccionamos y presionamos “Done” para ya por fin. en donde ahora. gente querida! ¿Cómo andan? Una vez más. a conocer sus modos de trabajo y muchas cosas más. Cliqueando con el botón derecho en nuestra carpeta principal del sitio abriremos un menú con el cual.

hay mas cosas. Bueno. en modo de vista diseño. hay otras partes que no están específicamente dentro del cuerpo. Cuando creamos una página en blanco en Dw. Vamos a tratar de conocer un par de características iniciales. en realidad lo que parece blanco no es tal. Antes de empezar vamos a dejar una imagen de nuestra página en blanco. 23 . la famosa “index.html”.Manual de Dreamweaver cómo crear la página de inicio de nuestro sitio web. hoy nos toca. Sin embargo. ya con la página creada en la clase anterior. y otras cositas predeterminadas de Dreamweaver. como por ejemplo el título. para tener de referencia a lo largo de esta clase. En la siguiente foto vamos a ver lo que realmente está en nuestra página y que la vista de diseño de Dw NO nos muestra. ver el modo de vista de diseño. Como se puede ver. porque la vista de diseño lo que realmente nos muestra es el cuerpo de la página.

y probando. donde insertaremos y veremos cada cambio que le vayamos haciendo a nuestro “body”. que este sí será el que tendrá todo el contenido de nuestra página y el que se mostrará en el modo vista de diseño de Dw. comprobar Échenle compatibilidad. Nuestro documento HTML es “XHTML 1.Manual de Dreamweaver En principio podemos ver un tag que comienza con “<!DOCTYPE”. como zoom. Cualquier duda que les vaya surgiendo me la pueden comentar. Luego de este tag tenemos el que define el documento HTML en sí. etc). El modo de vista de diseño lo podríamos dividir en 3 partes: 1. el tag <html> y su cierre al final. gente!) que es el organismo que regula los estándares del lenguaje HTML entre otras cosas. Dentro de él encontramos el tag <head></head> que contiene el tag <title></title> (que va a llevar el título de nuestra página. en este tag se define el tipo de página que vamos a hacer. El cuerpo de la página. </html>. y hand.0 Transitional”. Si bien son fáciles. el que sale en la ventana de nuestro navegador). Clase 10: Trabajo en modo código 24 . Conclusión Por ahora damos por concluida la clase. nos indicará en qué parte de nuestra página estamos parados (en este caso dentro del tag <body>) y herramientas comunes. vistazo: 2. Vayan mirando estas opciones. Por otro lado tenemos el tag <body></body>. selector. está bueno que las vayan reconociendo y cualquier cosa me preguntan vía comentario. además de otros tags como los tags <meta></meta> que sirven a los webmasters para poner especificaciones especiales. 3. así las respondemos para todo el curso y las clases se hacen más dinámicas. El pie de la ventana. ver un otras herramientas. El manejo de la ventana. Les sigo recomendando que siempre prueben las herramientas que vemos clase a clase y que vayan un poco más allá también. poner un título al documento y elegir otras opciones (hacer una vista previa en el navegador. según las normas de la W3C (¡a leer. donde podemos elegir entre los diferentes modos de vista. La próxima iremos trabajando sobre el body de nuestra página y también investigaremos qué es lo que hace Dw por detrás del modo visual.

Hoy nos toca revisar la vista de código. Lo nuevo es el panel de la izquierda con opciones específicas para el manejo de código.Manual de Dreamweaver Hola. No se asusten al escuchar (o leer. y segundo porque una vez que empecemos a usarlo. Vamos a seccionarlo por partes e ir explicando sus principales usos: 25 . Calculo que todos tendrán su sitio definido con su index. por supuesto. salvo que no tenemos las “visual aids” (el ojito) que son ayudas visuales especificas del modo de vista de diseño.html en blanco (que ¿recuerdan que no era tan blanco?) ¿¿No lo tienen?? ¡¡A leer clases anteriores! ¿¿Lo tienen??? ¡¡¡Esos son mis alumnos!!! ^_^ Bien. Otras cosas que desaparecen. la herramienta de selección (la flecha negra) y el zoom. verán que no es tan complicado como pensaban. obviamente. de gran ayuda a la hora de posicionarse en el código en documentos muy extensos. Primero porque hoy sólo veremos el área de trabajo y las opciones de manejo del código y no el código en sí. son la “manito”. vamos a dejar una imagen de la vista de código como referencia durante la clase: En la vista de código. En el área de trabajo lo primero que podemos ver es que desaparecen las reglas y aparece un numerado de líneas en su lugar. mis fieles seguidores (¡y a los nuevos también!) ¿Cómo les va? Espero que bien. en este caso) esta palabra. la parte superior de la ventana es igual a la de la vista de diseño.

Balance braces: El primero marcará una selección completa del tag padre en el que estemos posicionados con el cursor (desde la etiqueta de apertura hasta la de cierre). Line numbers. *(foto de código normal) Balance braces sirve para. si estamos parados entre 2. no nos servirá para HTML. Collapse Selection. cuando programamos en un lenguaje que usa llaves “{}” (javascript. irá seleccionando cada padre correspondiente a la actual selección. y a medida que lo vayamos apretando una y otra vez. la frase “Untitled Document” es hija del tag <title></title> y el tag <title></title> es hijo del tag <head></head>. Es muy útil a la hora de buscar el comienzo o fin de un bloque. expandirá TODAS las partes que tengamos “colapsadas”. El botón “Expand all”. tres puntos al final. Cuando estamos parados en un tag o tenemos una selección y presionamos el botón correspondiente. Dw lo que hará es minimizar esa sección de código en una sola línea y nos avisara que tiene mas en su interior colocando “…”. Collapse Tag. Por si no saben a que me refiero con padre. Expand All: Estas tres herramientas nos sirven para poder acomodar el código de nuestra página así no nos molesta a medida que avanzamos en nuestro proyecto. 26 . El segundo. Código normal Código minimizado Select parent tag. Highlight invalid code: El primero esconde la barra de numeración de líneas que está a la izquierda. presionamos el botón y selecciona todo el contenido de las mismos.Manual de Dreamweaver Open documents: Nos despliega un menú con una lista completa de los archivos abiertos con su ruta completa. pero en fin. Además nos agregara el signo “+” en el lado izquierdo para poder expandir esa sección. php…). nos marca el código erróneo resaltándolo en amarillo.

Los snippets son códigos predefinidos de diferentes cosas y en diferentes lenguajes. Move or convert CSS. o pasar código CSS de un archivo a otro. Format source code. lo contrario. se los cuento por si quieren investigar). para remover un comentario.Manual de Dreamweaver Apply comment. remueve una tabulación. Por ejemplo escribimos un texto. preformatea el código a la manera predefinida de Dw. o remover los comentarios de un área seleccionada. y muchos elementos HTML mas que nos pueden servir para ahorrar tiempo a la hora de escribir. Ident realiza una tabulación hacia la derecha de la línea o la selección que tengamos. lo seleccionamos. Format source code: Estos tres botones son realmente útiles a la hora de trabajar con grandes proyectos en los que necesitamos tener el código ordenado. u otro snippet que agregue un formulario predefinido. elegimos el tag de párrafo (<p></p>) y encerrará todo el texto dentro de esos dos tags (apertura y cierre) transformándolo en un párrafo. o nos muestra el panel de snippets de Dreamweaver. Ident code. Outdent code. sirve para convertir un estilo que le pongamos a un tag (ya veremos en futuras clases que es un estilo) en una clase o id de CSS (ya lo veremos. 27 . Wrap tag. Recent snippet. El tercer botón. A modo de ejemplo. Si algo no entienden sobre esto no duden en poner comentarios al respecto que me extiendo sobre el tema. podemos insertar desde el panel de snippets un snippet javascript que deshabilite el botón derecho en nuestra página. No lo hago ahora mismo porque no es el punto de la clase y debemos explicar todos los elementos de la barra por igual. Recent snippet nos despliega una lista de los “snippets” que hayamos usado recientemente. Move or convert CSS: Wrap tag encierra una parte de nuestro HTML que tengamos seleccionada dentro de un tag que podremos elegir cuando presionemos el botón. apretamos el botón. Les dejo una imagen de muestra para que sepan lo que es un código identado. Y por ultimo. Outdent. y a la inversa. aunque se pueden modificar varias opciones de esta herramienta. remove comment: Sirven para agregar un comentario nuevo (o comentar una sección seleccionada).

porque se acostumbran a trabajar a su manera (cada uno hace las cosas diferentes ) pues. 28 . pero bueno. esta tabulado una vez más que su “padre” (tag que lo contiene). no es mucho lo que vamos a lograr de esta manera. Clase 11: ¿Modo código o modo visual? ¡¡¡Y nos volvemos a encontrar en la clase número 11 del Taller de Adobe Dreamweaver!!! Me alegro de que todavía estén aquí. pero bueno. cada elemento que se encuentra dentro de otro. A su vez iremos utilizando estas herramientas. Es bueno que se acostumbren a identar el código ustedes mismos. el tenerlo bien identado es una ayuda MUY GRANDE. es lo que es. Comparación Empezar el contenido de esta clase con el título “comparación”. Como creo que la respuesta merece su espacio decidí incluirla al final de esta clase. esta herramienta es de GRAN ayuda. no es lo que mas me gustó. responderemos la duda de nuestro seguidor Nelson. si se “olvidan”. acá terminamos de ver el área de trabajo del modo código. En trabajos con código muy largo. y lo que sale en modo código y viceversa. que nos preguntó cuál sería el tamaño adecuado para hacer una página. además del tema de hoy. Mas adelante cuando empecemos a agregar elementos a nuestra pagina iremos viendo las diferencias entre lo que agregamos en modo visual. usando Dw o cualquier otro programa. Cualquiera que pretenda hacer una página (decente). no les molestará en nada saber algo más. y los que no están de todos modos no van a leer esto así que no importa. Conclusión Bueno. así que es importante que las vayan aprendiendo y si no las quieren usar en un futuro.Manual de Dreamweaver Como pueden ver. va a necesitar saber al menos un mínimo de HTML. aunque no lo es tanto ¿¿CÓMOOOO?? Ahora les cuento: Si bien Dw permite llegar a hacer una página completa en modo visual. sin la ayuda de la herramienta de Dw. Esta clase es especial porque.

pero no nos vamos a encasillar tanto. va a determinar el punto en que pasemos de principiantes a avanzados dentro de la maquetación de páginas web. ya que son complementarias. aunque no tenga que ver con Dw o con HTML. Como bien dijimos más arriba se puede llegar a una página completa en modo visual. A eso me refería con que no me gustaba la idea de comparación entre una manera y otra de hacer las cosas. ya que lo ideal es usar. la respuesta a su pregunta como agregado especial o “tip”: Tamaño ideal de una página 29 . o saber dónde están las que siempre usan y agilizar la creación de sitios web. más aún ahora. Conclusión Creo que la respuesta al título de esta clase sería “Modo código”. A la larga. verán que este modo les va quedando chico. no podemos considerar el modo código o el modo visual como diferentes maneras de hacer una página. entre otros) ya que el resto de las opciones nos resulta más rápido manejarlas desde el modo código. para empezar con todas las cosas bien hechas :p. de ambos. ¡¡Agregado especial!! Creo que este añadido es muy importante y.Manual de Dreamweaver Por ende. y se pasarán al modo código exclusivamente. ya que Dw nos cambia los caracteres no válidos para HTML por sus correspondientes reemplazos (por ejemplo los acentos. la realidad nos dice que el modo visual prácticamente se resume a la escritura de texto. aprovechando que recién estamos creando nuestra página. es importante saberlo. pero poco a poco cuando vayan ganando experiencia. Lo que sí cabe destacar es que el conocimiento del código. Gracias a Nelson (un seguidor del curso). Al principio (o no). De aquí que el taller además de Dw planea enseñar HTML. las cosas que nos resulten más útiles. vamos a incluir en esta clase. y a la larga tal vez muchos lo sigan usando para alguna que otra cosa. y el poder abstraer lo que se ve en pantalla y poder visualizarlo cuando vemos código. quien nos pregunto cual era el tamaño ideal para una página normal. Piensen que usándolo seguido y acostumbrándose a un modo de trabajo. Como todo. cuando tengamos un uso considerable de él. su estructuración. podremos hacer más rendidor el programa. puede que haya mucha gente que considere más practico el modo de vista de diseño. pueden customizar sus herramientas.

videosjaja. debemos tomarlos en cuenta de todos modos. que los costados del centro de la página. Podrán ver que el panel de registro.com). También podemos ver. que termina de rellenar la página en caso de que el usuario tenga una resolución mas grande (1280 x 1024. 1600 x 1200. Lo principal a pensar a la hora de hacer un diseño de una web es quién va a ser el usuario de esa página y. tenemos que calcular un usuario promedio. inicio. para luego abarcar otras resoluciones. Prueben ver la página en diferentes resoluciones de monitor para tener una idea más clara (acá les dejo el link http://www. o la información relevante sea visible dentro de ese tamaño. entre otros). usa una resolución de pantalla de 1024 x 768px. Es muy conocido el tipo de páginas de cuerpo centrado con extremos que completan el diseño. aunque no los consideramos como mayoría en nuestro modelo de usuario promedio. Es por esto que uno siempre trata de realizar su página en un tamaño acorde a “las masas” o al perfil general de nuestros usuarios. Retomando: el tamaño de nuestra página puede depender de varias cosas. subir videos. sino que también tienen un “motivo” grafico. como no lo sabemos (aunque tal vez podemos armar un perfil de posible user). etc. Como podemos ver en la imagen. para completar. el contenido de mayor relevancia.. 30 . y convendría diseñar una página en la cual el contenido. Otro punto a tener en cuenta es la gente que aún usa resolución de 800 x 600px que. Y vuelvo a hacer referencia a la página de la imagen anterior. En esta página son 950px reales.Manual de Dreamweaver Una página no tiene un tamaño preestablecido aunque se pueden encontrar muchas páginas que tienen el mismo ancho o largo que otras. tenemos una parte central que se adecúa al formato de 1024px de ancho de pantalla. Hoy por hoy un gran porcentaje de gente. debe estar considerado dentro de los 750px del “body” de nuestro sitio. debido a una no-arbitraria elección de los diseñadores a la hora de empezar a trabajar. Por ende. con “auxilios” gráficos. se deja margen para la barra de scroll que puede surgir si la página crece hacia abajo (como ven se toman en cuenta varias cosas). no se dejan descuidados. categorías. todas se encuentran en un rango de visión accesible para la mayoría de los usuarios.

es decir. el fin de semana pasó y ahora volvemos al estudio. jeje). las que se usan todo el tiempo en la creación de páginas web. por lo pronto vamos a estudiar detenidamente las que se usan dentro del armado. ya que Dw es solo una herramienta. pero sí los va a ayudar mucho. las de inserción de imágenes. van a ir mejorando sus diseños. de importancia dentro de un texto. que nos dan tema para agregar en nuestras clases y hacerlas más útiles y a la medida de ustedes que siguen nuestro curso y que serán los futuros webmasters. aunque sea mínimo de texto? Y bueno. entonces vamos a empezar por lo básico. ¿Empezamos? Las etiquetas más comunes en realidad son las que arman o distribuyen el espacio de la página. No duden en seguir preguntando y ojalá salgan más comentarios como este. escritura y formato de texto. Vamos a ir por orden jerárquico. ser un buen Webmaster. maquetador. las etiquetas para texto. Vamos a ir por partes para que no les quede ninguna duda.Manual de Dreamweaver A medida que vayan aprendiendo “a los golpes”. por supuesto. No olvidemos que no se puede ser programador. Como dije al principio del curso (creo) aprender Dreamweaver no los va a hacer diseñadores web profesionales. y algunas otras más. En sí. con todas sus propiedades. depende de muchas cosas que se hacen con la experiencia y esta se hace poniéndole ganas y tratando de aprender todo lo que se pueda (principalmente siguiendo este taller. Yo recomiendo que vayan poco a poco investigando de acuerdo a lo que vayan necesitando y. por ejemplo. como si de un diario (periódico) se tratase. ¡Espero que con ganas! Hoy nos toca conocer las etiquetas (o tags) más comunes del HTML. pero como esas las vamos a ver dentro de un par de clases. diseñador. Clase 12: Etiquetas más usadas (1) ¡Buenas! ¡Bienvenidos al Taller de Adobe Dreamweaver/HTML! ¿Cómo andan? ¿La pasaron bien el fin de semana? ¡Espero que sí! Pero bueno. todo de la noche a la mañana. Etiquetas La parte “HTMLesca” ¿Quién en una página no pone algo. 31 . leyendo y escuchando recomendaciones de otras personas que ya pasaron por las etapas que están pasando ustedes.

Además recordemos que debemos mantener un orden semántico en nuestro texto. Esto nos ayuda a mantener una sincronía entre los tipos de cosas que pongamos en nuestro sitio. Es la de mayor jerarquía entre las etiquetas de texto. con estilos. que van disminuyendo su tamaño proporcionalmente. tomen este comentario solo como una referencia de que por algo existen las etiquetas que existen. copetes. Si bien estas propiedades pueden cambiarse. primero que nada que si nosotros le “seteamos” a nuestra etiqueta h1 un tamaño. letra y grosor por defecto. cuando alguien busque por “X” palabra en Google. Entonces. en todos los lugares donde la pongamos saldrá igual (ya veremos cómo). junto con su grado de importancia. Otra cuestión es también que los buscadores (como Google) le dan preponderancia a las palabras más importantes del sitio a la hora de agregar una página a su base de datos. y no están porque sí). Existen otras etiquetas “H”. que si se encontraba en un párrafo. h3. (El tema de los buscadores es muy extenso y no sólo esto tiene que ver. no en vano están así. y sería desprolijo poner un título en un párrafo con un texto grande. que son las h2. etc. tendremos más posibilidades de aparecer más arriba en el buscador. se utiliza para títulos y comienza con la apertura <h1> y termina con el cierre </h1>. ¡Las cosas hay que hacerlas bien! 32 . y poner un párrafo en un <h1> con un texto chico.Manual de Dreamweaver h1: Esta etiqueta. Si sabemos que los tamaños de las letras se pueden cambiar y los grosores también ¿entonces qué diferencia hay? Bueno. …. Estas se utilizan en subtítulos. si esta palabra se encontraba en el título. por lo tanto tiene mayor tamaño y grosor.

y si no ¡preguntan!). ¿Y por que lo cuento? Más que nada para que sepan que todas las propiedades que le agreguen al párrafo se les agregarán a todas y cada una de las palabras en su interior (por ejemplo: color. y como cierre </i> (¡¡Ya. porque si la letra no fuera negra…. nos pone todo el texto de su interior en una letra de mayor densidad (digo mayor densidad y no “más negra”. tamaño de letra. esta etiqueta. La diferencia entre la etiqueta <b> y la etiqueta <strong> es más que nada de carácter semántico. Otra etiqueta que casi la podemos ver en cualquier página y que se usa en cualquier editor de texto común que encontremos por ahí. negritas. díganme que entendieron lo de la barra!! Jaja) 33 . podemos escribir todo el texto que queramos y tendrá la característica de pertenecer a este mismo párrafo (obviamente). Otra etiqueta para poner negritas es la que está delimitada por <strong> </strong>. Esta etiqueta comienza con <p> y termina con </p>. al igual que la anterior. itálicas. Mientras que la <b> se utiliza simplemente para resaltar un texto.Manual de Dreamweaver Siguiendo con otras etiquetas: ¿Quién no vio en su escuela primaria oraciones y párrafos? …y acá la tenemos. Dentro de estas dos.ustedes me entienden :p . nos encontramos con la etiqueta de itálicas. es la etiqueta de negrita. la etiqueta de párrafo. lo correcto sería que usemos cada una para lo que corresponde (al igual que los <h*>). que tiene como apertura <i>. etc). Y siguiendo con los formateos de texto. por si no se las digo bajito pero no cuenten nada: “/”). Esta etiqueta tiene como comienzo un <b> y como cierre un </b> (ya irán notando similitudes entre aperturas y cierres. la <strong> se utiliza para reforzar un texto. Si bien las dos se ven iguales.

y ahí sí tendremos además de el correcto uso de las etiquetas. ¡Y acá nos encontramos con los caprichos semánticos del HTML. Y nos vamos a otra más linda. y vamos más allá! Otra etiqueta que tiene el mismo efecto que las dos anteriores es la etiqueta <cita> </cita> que sirve para mostrar textos citados y que tiene el mismo efecto que las dos etiquetas anteriores. Esta etiqueta arranca con <img y cierra en él mismo. Pero recordemos que esto se puede cambiar mediante estilos. Vamos a mostrar los atributos de esta etiqueta para aprender todo lo necesario para usarla. grosor. para eso mismo. bueno. inclina el texto que contiene. Quedaría de esta manera <img />. su único cambio es el nombre. Lo lógico a pensar siguiendo lo que venimos diciendo en la clase. en caso de que la imagen no este disponible. inclinación. podrán ser diferentes también visualmente. Dentro de su interior pondremos el lugar de donde leerá la imagen y un texto alternativo a mostrar.Manual de Dreamweaver Esta etiqueta al igual que en la mayoría de los editores de documentos. (Depende la chica/o que le pongamos adentro jeje). la diferenciación específica-visual de cada una). es la etiqueta <em> </em> que significa en inglés “emphasis” (énfasis) y se utiliza. Su correspondiente en orden semántico. ¡La etiqueta de imagen! Esta etiqueta tiene la particularidad de que empieza y termina en el mismo lugar. color. y espaciado de letra específico. src 34 . o que el navegador destino no soporte imagen (¿qué raro no?). que coincide con el contenido a mostrar. con la barra. que ya veremos que son. (Aclaración: por defecto estas etiquetas vienen con un tamaño. y de esta manera nuestras etiquetas solo diferentes semánticamente. sería que esta etiqueta tendría una composición como esta: <imagen> </imagen>. pero no es así.

o lo que tengamos ganas de que cuando sea clickeado nos lleve a algún lado. ya que por defecto la etiqueta toma el tamaño real de la imagen.Manual de Dreamweaver Este atributo es la que va a contener la url del lugar en donde tengamos la imagen. con sus atributos necesarios y también con los opcionales quedaría de esta manera: <img src=”http://página. en caso de que nuestra imagen no este disponible. tiene atributos indispensables sin los cuales no funcionaria como debe. 35 . o una imagen.jpg” alt=”descripción” /> Acá tenemos la etiqueta más clickeada del mundo! ¡Con ustedes…… tururururu. alt Este atributo va a contener un texto alternativo para que. sería (y ya sin atributos opcionales) <img src=”lugardelaimagen/imagen.com/lugardelaimagen/imagen. Antes que nada tenemos que pasarle un contenido. no dejar el espacio en blanco y que la gente no sepa que es lo que iba ahí. PA! ¡¡La etiqueta para crear enlaces!! Esta etiqueta esta formada por su apertura <a> y su cierre </a> Además de su apertura y cierre.jpg” alt=”descripción” width=”100px” height=”100px” /> En caso de que tengamos la imagen en nuestro sitio. Una etiqueta completa de imagen. width/height Estas dos son otras de las propiedades de la etiqueta <img /> y son opcionales. si no ¿¡a quien vamos a clickear!? Este contenido puede ser un texto. por ende es indispensable que esté.

podría ser: <a href=”http://www.com” /> 36 .elwebmaster. Otra manera y empezando a combinar. si queremos que cargue la página en el mismo lugar en que estamos(“_self”).com” Y si lo clickearamos nos abriría una ventana nueva del navegador (o pestaña en caso de que usemos Firefox.jpg” alt=”elwebmaster.com” alt=”página de elwebmaster” target=”_blank”>Click aquí para ir a la página de elwebmaster.elwebmaster.com</a> Este enlace. por el texto alt. sin clickearlo. nos mostraría la leyenda “página de elwebmaster”. title Este atributo es el que nos abre el cuadradito amarillo famoso (tooltip) con el título del enlace cuando le pasamos por encima.com” alt=”página de elwebmaster” target=”_blank”> <img src=”logodeelwebmaster. si pasáramos sobre el link. También. en la que cargaría la página de elwebmaster. y (“_top”) y (“_parent”) que son similares a los anteriores pero se usan cuando utilizamos <frames> (cosa que no me gusta nada :p). target En este atributo vamos a indicar si queremos que nuestro enlace abra una nueva ventana para su destino (“_blank”). De esta manera un enlace completo podría ser: <a href=”http://www.Manual de Dreamweaver Los atributos de la etiqueta en sí son: href En este atributo deberemos ponerle lugar a donde queremos que nos lleve esta etiqueta cuando hagamos clic sobre ella. se mostraría en la página de esta manera: “Clic aquí para ir a la página de elwebamster.

Manual de Dreamweaver </a> De esta manera, tendríamos la imagen del logo de elwebmaster que cuando la clickeemos nos llevará a verla en una nueva ventana. Otro de los usos que le podemos dar a la etiqueta de enlaces (en realidad se llama “anchor”, en español “ancla”), es justamente el de punto de ancla. Habrán visto en alguna página que clickean un enlace y no van a otra página, sino que los lleva a una parte de esta misma. Generalmente se ve en índices o, en finales de las páginas, la leyenda “Volver arriba”. Este tipo de etiquetas es ni más ni menos que un <a> utilizado de otra manera. En el enlace que queremos que al clickear nos lleve a otra parte de nuestra página debemos poner: <a href=”#lugar”>Ir hacia el lugar</a> Y en el lugar que queremos que sea el destino cuando clickeemos el <a> anterior, debemos poner: <a name=”lugar”>Llegué a este lugar</a> Entonces cuando clickeemos en “Ir hacia el lugar” la página se correrá hacia arriba o hacia abajo, hasta que lleguemos al enlace con el nombre indicado (en este caso “lugar”). Si no entienden algo me preguntan por comentario, no sólo de esto, sino de cualquier cosa ¡recuerden! Y por último, vamos a ver la etiqueta de comentario, la etiqueta “de cierre” del día de hoy, que justamente no cierra con la “/” :p . Esta etiqueta inicia con <!– , y finaliza con –>. Todo lo que escribamos entre estas dos etiquetas no saldrá en pantalla cuando mostremos la página.

37

Manual de Dreamweaver Sirve a los creadores de páginas web, para anotarnos cosas a modo de recordatorio, o para cuando trabajamos en grupo, que otra persona sepa qué es lo que vamos haciendo paso a paso. Es buena práctica comentar nuestro código, ya que cuando se hace muy extenso, puede ser complicado de entender y nos evita tener que leernos todo para poder darnos cuenta. Ojo, también es bueno borrar los comentarios en la página final que vamos a tener subida a nuestro hosting, porque los comentarios pesan igual que cualquier otro caracter, por ende, hacen más grande nuestro HTML (y tarda más su carga).

La parte “Dreamweaveresca”
Como este taller es un conjunto entre HTML y Dreamweaver, vamos a mostrar algunas maneras de hacer las etiquetas aprovechando las herramientas que el programa nos da. Ejemplo de etiqueta A:

Seleccionamos el texto que queremos que sea un enlace, pulsamos el botón de Hyperlink (clase de barra Insert numero 1) y se nos abre la caja para completar con los datos necesarios. A mi parecer, una vez que nos acostumbremos al código, es más fácil escribirlo a mano que hacerlo en la caja. Pero bueno, de esta manera uno no se olvida los campos que tiene que completar. Ejemplo etiqueta B: 38

Manual de Dreamweaver

Como ven, seleccionamos el texto a poner en negrita, y luego apretando el botón “B” nos pondrá ese texto entre, CURIOSAMENTE, la etiqueta <strong>. El tag que debería poner en realidad sería el <b> </b> o bien el botón del Dw llamarse STRONG. Estas cosas son las que menos me gustan de Dw, que hace cosas por convención sin respetar los criterios reales de cada etiqueta. Pero bueno, también hay que saber que la W3C (ver primeras clases) esta por sacar del estándar los tags <i> y <b> para dejar solo los <strong> y <em>, así que talvez lo hayan hecho así, para que en un futuro, los tags que insertan los botones no queden desactualizados. ¡¡Por esta vez te perdonamos Dreamweaver!!

Conclusión
Bueno, llegamos al final. En esta clase vimos algunas de las etiquetas más usadas, dentro de lo que es el contenido de las páginas web. En clases siguientes veremos algunas más y luego otras, exclusivas para el armado, como las tablas y los divisores. Espero que les haya gustado la clase y que la hayan leído toda, porque salió bastante larguita :p . 39

Manual de Dreamweaver Nos vemos la semana que viene con más Taller de Dreamweaver/HTML.

Clase 13: Etiquetas más usadas (2)

¡Hola! ¿Qué tal? ¿Listos para otra clase de Dw/HTML? ¡Así me gusta, siempre dispuestos! Hoy vamos a ver más tags HTML que seguramente les serán de utilidad en algún momento de su vida como webmasters. Es importante conocer cada tipo de etiqueta, si bien hoy día mucho se maneja con CSS (tema aparte), no por eso son menos válidas y los que no sepan manejar estilos estarán agradecidos de contar con estos aliados. Conociendo otras etiquetas

Para empezar, vamos a ver uno que nos quedo colgado de la clase anterior, que es el de subrayado. Como su nombre lo dice, subraya, y se aplica a las palabras que estén en el interior de su etiqueta <u> (esto esta subrayado) </u> . Este tipo de tags (tags o etiquetas tómenlos como sinónimos en este taller), como también el <center> (este texto esta centrado) </center>, están BASTANTE fuera de moda, pero los pueden sacar de un apuro. ¿Por qué fuera de moda? Bueno, ya lo he nombrado con anterioridad: Hoy por hoy los desarrolladores han limitado el HTML a usar el lenguaje sólo para la ubicación de los elementos que componen una página. La, literalmente, “maquetación” de la página. Todo el resto, como colores, formateo de texto, fondos, etc. Se ha dejado para los “estilos”. Pero bueno, como dije arriba, está bueno saberlo, de todos modos, y si a medida que siguen el curso están haciendo algo, van a poder usarlos hasta que aprendan estilos. Volviendo a los tags: Otros de mucha utilidad son los tags <br /> y <hr />. Como ven, su cierre es en sí mismas (tienen la barra al final del mismo tag de inicio). La etiqueta <br /> lo que hace es insertar un salto de línea. Por ejemplo si escribimos un texto, y queremos que parte de él se vea debajo, podemos insertar un <br /> que nos dejará un salto entre ambos.
40

Ahora cuando terminemos de explicar estos tags HTML. Si lo hiciésemos mediante HTML puro. Si podemos todos en una imagen: 41 . para que lo entiendan “gráficamente”. negrita. vamos a verlos en funcionamiento en imágenes de Dw para que se entiendan 100% Si no. necesitaríamos meter este texto que queremos cambiar entre muchos tags (piénsenlo). para darle un formato diferente al texto de su interior mediante estilos. nos acomoda el texto que escribamos dentro.Manual de Dreamweaver En sí. Ahora mediante la etiqueta span. es como dar un ENTER en un editor de texto como Word (recuerden que en HTML los “enters” no contaban como saltos). recuerden: ¡dejen sus comentarios! Seguimos: <blockquote>texto</blockquote> Este tag. vamos a ver estos ejemplos en Dw. se utiliza para introducirlo dentro de otros tags. la etiqueta <hr /> hace algo similar: Produce el mismo efecto del <br />. Ahora veremos como funciona en Dw: <span>texto</span> Este tag. no hace nada. Supongamos que tenemos un párrafo. o por sí sólo. y queremos que sólo una palabra tenga color rojo. De a poquito nos vamos a ir dando cuenta de cuánto mejor es. Por otro lado. nosotros podremos “asignarle” a esta etiqueta todos los formatos juntos y luego el texto en su interior tendrá todas esas propiedades de una sola vez (¿ya van viendo por qué se usan los estilos aparte y HTML sólo para maquetado?). Cada uno le podrá encontrar su utilidad dependiendo las necesidades. en una especie de “caja” que tendrá un margen a la izquierda. subrayado. mayor tamaño y otra fuente (letra). Bueno. pero a su vez agrega un línea divisoria entre ambos elementos separados. al cual le dimos color azul.

están mezcladas entre sí dentro del código HTML. y se den cuenta de cómo funciona cada uno. Esto lo hice a propósito para que tengan que analizar lo que ven abajo (en lo que sería la salida de la página en el navegador). Eso sí. con el código real.Manual de Dreamweaver El dibujo está un poco complicado. si no entienden por favor pregunten así sacamos todas las dudas para seguir con cosas más interesantes y que ¡¡¡ya entren al siguiente nivel!!! Conclusión 42 . porque las etiquetas.

aquí terminamos con la parte de tags “básicos”. además de letras como la ñ y letras con acento. Bueno. etc. ¡Nos vemos la próxima! ¡Hasta luego! Clase 14: Caracteres especiales ¡Hola queridos lectores! ¿Cómo les va? ¿Me extrañaban? Jeje. Esto es de suma importancia por dos cosas: el código HTML válido y (la más importante) la visualización correcta de nuestra página por parte de los usuarios. espero que les haya gustado y que lleven el taller al día. Acá les dejo una lista de los principales caracteres: Letras: 43 . Ya dentro de poco vamos a aprender elementos que nos ayudarán a ir maquetando nuestra primera página de verdad.”. en algunos países el acento (tilde) es para un lado y en otros para el otro. una “ñ” se escribe en HTML como “ñ” (sin las comillas). visual y con imágenes. símbolos no frecuentes como el de marca registrada (la “R” chiquita dentro de un círculo) y hasta los mismos signos “<” y “>”. símbolos de diferentes tipos como la apertura de símbolo de exclamación y de pregunta. Se les llama “caracteres especiales” a un conjunto de caracteres (valga la redundancia) que no pertenecen a un común de codificaciones de alfabetización. que al ser caracteres HTML no pueden ser escritos dentro de una página tal cual se ven. Por ejemplo. una vocal con acento se escribe &(vocal)acute. A modo de ejemplo.Manual de Dreamweaver Bueno.. hoy vamos a dedicar la clase a los caracteres especiales en las páginas web. en Estados Unidos no existe la letra “Ñ”. Los caracteres especiales tienen un reemplazo para escribirlos en el HTML que empieza con el símbolo “&” y termina con un “. porque si no el navegador interpretaría lo que le sigue al signo como el nombre de un tag (etiqueta). El conjunto de caracteres abarca. para poder ir viendo el fruto de nuestras horas de estudio.

a googlear se ha dicho. Pueden probar esto. nos ayuda con esto de 2 maneras: <!--[endif]--> Una es que en modo código. pero el tema de los caracteres especiales es muy importante. verán que en realidad esta todo como debe estar. eh?) y la verdad que este tipo de descuidos estropea mucho el diseño y hace que nuestra página se vea poco profesional. ñ o lo que queramos. escribiendo cosas en modo visual y pasando a modo código. Dreamweaver. …y aportando info de Dreamweaver… Como verán puede resultar bastante molesto el tener que escribir un párrafo o el texto que sea. Cuantas veces habremos visto páginas en las que aparecen signos raros (¿No eran de Japón. cambiando todos los caracteres por los escritos arriba. es que escribiendo en modo visual. que no este acá. ya nos muestra una lista de los posibles caracteres a escribir. Clase 15: Lista 44 .Manual de Dreamweaver Otros caracteres: ¡Y el supercaracter del dia! (un espacio en blanco): Por supuesto que hay muchos caracteres especiales más. por más que en algunos navegadores se vean bien los caracteres especiales escritos tal cual son. se deben usar sus correspondientes reemplazos. que Dw nos convierte todos los caracteres automáticamente. Es importante tener en cuenta que. Conclusión Esta clase no fue la gran cosa jeje. estos son sólo una pequeña lista de los más usados. cuando empezamos a escribir el carácter (cuando escribimos el “&”). Si en algún momento necesitan alguno más raro. Pero la mejor de todas. podemos poner acentos.

que son las listas desordenadas. van a estar ordenadas por numeración o alfabéticamente. Tipos de lista Tenemos el tipo de lista UL. cuadrado o disco. sobre ciertas propiedades de las listas que acá no nombramos. Otro tipo de lista son las OL. sus diferentes tipos y las diversas aplicaciones que les podemos dar. que son las listas ordenadas. Es así que tenemos: 45 . en vez del círculo. ¡Hay que mantenerse siempre actualizados con los estándares! Partes de una lista Las diferentes partes de una lista son. ¿La esperaron con ansiedad? Espero que sí. Estas listas. Estas propiedades no las he explicado porque están desactualizadas. Las etiquetas UL tienen la característica de que cada uno de sus ítems contenidos están antecedidos por un círculo (este se puede cambiar) que lo va a definir como ítem de lista. Tal vez lean por ahí (googleando). a diferencia de las anteriores. Toda lista debe tener al menos un ítem (etiqueta contenida) que es el que realmente se verá en nuestro navegador. Ya no se usan y pronto desaparecerán del lenguaje HTML como propiedades válidas. que los podemos setear en el atributo Type de la lista. cómo son. el tag o etiqueta que la define. y disc. Este tipo de listas contiene a etiquetas LI que van a representar cada ítem en su interior.Manual de Dreamweaver ¿Como les va? Bienvenidos a otra clase de Adobe Dreamweaver/HTML. y sus etiquetas contenidas. Acá en la imagen. podemos ver los distintos tipos de visualización de listas desordenadas que tenemos: square. Hoy veremos el uso de listas. que tienen las UL. circle.

46 . Type I: Van ordenadas en números romanos (en mayúsculas). Type a: Van ordenadas alfabéticamente de la “a” a la “z” en minúsculas. son las listas de definición. Type i: Van ordenadas en números romanos (en minúsculas). Y el tercer tipo de listas. DL. Type A: Van ordenadas alfabéticamente de la “A” a la “Z” en mayúsculas.Manual de Dreamweaver Type 1: Van ordenadas numéricamente de 1 a la cantidad de ítems que tengamos.

o a cualquier elemento. será una de las primeras cosas que hagamos como ejemplo cuando veamos estilos. porque un menú desplegable con listas. entonces. así que ¡¡¡A despreocuparse. Esto se los nombro por arriba. a riesgo de sonar reiterativo. podríamos generar un menú desplegable (aplicando algunos estilos que veremos más adelante). más allá de hacer una lista de ítems común es. que para eso están creadas). usen este último en lugar del anterior. Las listas se pueden anidar unas dentro de otras. o un navegador de una página larga mediante anclas (tags <a> ¿Recuerdan? Ya lo vimos). siempre recuerden que si van a usar un elemento para hacer “x” cosa y ya hay uno que está específicamente creado para eso. por ejemplo. De todos modos. esta dado por lo que se les ocurra a ustedes en el momento y.Manual de Dreamweaver Como podemos ver las DL nos permiten poner una “especie” de título (DT) para el cual daremos una definición (DD). que en algunas clases más tendrán sus menusitos a todo color!!! :p Otro uso puede ser el de un índice. 47 . el uso que le puedan dar a una lista. y no lo voy a explicar ahora. No tiene mucha ciencia. cada uno le encontrará uso en algún momento (recuerden usar cada tipo de etiqueta según corresponda. la de crear menúes o barras de navegación en paginas web (obviamente). creando una lista principal con diferentes términos y luego en cada uno poniendo otra lista. Para qué más sirven las listas Otro uso muy común que tienen las listas.

o unas son derivadas de otras. o durante. Bueno. hoy vimos que son las listas. Clase 16: Tablas Hola ¿Qué tal? ¿Cómo andan esos estudiantes mega-responsables? Bienvenidos a una nueva clase del Taller de Adobe Dreamweaver/HTML. este ordenamiento de información no tiene mucho que ver con la maquetación de una página. y pasaron a ser lo que realmente dicen ser. y dentro se cargaba la información necesaria.Manual de Dreamweaver No reinventen elementos por el simple hecho de no querer ver cómo funciona otro o porque les quede más cómodo usar uno que se les ocurra. Estas se dividían en tantas partes como sectores iba a tener la página. A modo de ejemplo: Título Dreamweaver Descripción Programa de maquetación web Empresa Adobe Systems Incorporated Como se puede ver. pero es un tema que hay que saber porque las tablas son un elemento que de seguro van a usar en muchos lados (aunque en clases siguientes trataremos de convencerlos de que no lo hagan jeje). las tablas dejaron de ser un medio para maquetar la página entera. que ahí tienen “accesos directos” a tipos de listas y sus contenidos (ya lo vimos en clases anteriores). Conclusión Bueno. Acostúmbrense a trabajar con propiedad que es la mejor manera de ser un buen maquetador de páginas web. 48 . tablas. sus propiedades. Espero que estén entusiasmados. Traten después de leer esta clase. porque hoy vamos a ver tablas. vamos a ver en qué consiste esto de las tablas… Un poco de historia (no tan histórica) En la “vieja” web. que es medio pesado. pero que requieren de conocimientos que al día de hoy. Se usan para ordenar información en columnas o filas que mantienen una relación entre sí. Es solo para ordenamiento. Más adelante veremos otros usos más divertidos que los que pusimos recién. las tablas servían para diagramar páginas completas. tipos y algunos usos. de revisar la barra insert de Dw. puede que no tengan. ya sea que todas las partes de esas filas/columnas dependen de un mismo título. o cuando estén aplicando lo que aprendan en ella. Hoy por hoy.

Ahora sí. nuestra tabla se romperá. nos daría como resultado. Este es un problema que no parecería tal. como por ejemplo: Una tabla de una columna como título y 2 como contenido. y se metía toda la página dentro de esta tabla. que tendría 3 columnas y 2 filas. la tabla que pusimos arriba (”Un poco de historia”). No porque el HTML 0. dentro de ellos van a poder poner etiquetas <td></td> que van a corresponder a cada columna de la fila.”Empresa” y en la fila de abajo “Dreamweaver”. Propiedades El uso de las tablas a veces se complica para la gente que no las ha usado nunca. Claro está que en algún momento el HTML se basó e incluso fomentó el uso de tablas para maquetar páginas web.”Programa de maquetación web” y ” Adobe Systems Incorporated”. su apertura con su cierre.000001 haya usado tablas para maquetar páginas. pero sí que lo es. cuerpo. barras laterales y footer. Esta práctica ya es obsoleta y está por demás recomendado no utilizarla de este modo (volvemos al viejo lema que dice que las cosas se deben usar para lo que fueron hechas). cuando quiere hacer ciertas cosas. 49 . con aún más tablas anidadas. pero las tecnologías cambian y hay que adaptarse a los estándares. y a su vez. a ver como se hacen y utilizan las tablas Las tablas se encierran entre las etiquetas <table> y </table> como ya estarán acostumbrados a esta altura. porque si no definimos ciertas propiedades de antemano.”Descripción”. nos da la excusa para que hoy las usemos de ese modo sin culpa :p.Manual de Dreamweaver Antes pensaban las páginas de acuerdo a las tablas y se hacía una gigante que iba a contener la cabecera. En la fila de arriba tendríamos las tres columnas “Título”. Veamos un ejemplo: <table> <tr> <td><strong>Título</strong></td> <td><strong>Descripción</strong></td> <td><strong>Empresa</strong></td> </tr> <tr> <td>Dreamweaver</td> <td>Programa de maquetación web</td> <td>Adobe Systems Incorporated</td> </tr> </table> Esta tabla. Dentro de ellas vamos a poder poner etiquetas <tr></tr> que van a ser cada fila de la tabla.

le faltaría una columna en el primer <tr> y por ende estaría “rota”. y para esto debemos hacer uso de la propiedad colspan. Y ustedes se preguntarán por qué no anda. y al <td> de arriba le estaríamos indicando que debe ocupar el ancho de las dos columnas que tiene la tabla. Acá esta la respuesta: El problema es que el HTML considera la tabla como una cuadricula. Pasemos al ejemplo y después explicamos bien la propiedad. a veces suele suceder jeje). a nuestra tabla de arriba. por ende. se nos romperá (o andará de casualidad. si tiene todos los elementos necesarios para funcionar. los dos <td> de abajo formarían las dos columnas que tenemos en la tabla.Manual de Dreamweaver Supongamos que tenemos una tabla de esta forma: Programás de Adobe Systems Incorporated Dreamweaver A simple vista nuestra tabla sería así: Programa para maquetación web <table> <tr> <td><strong>Programas de Adobe Systems Incorporated</strong></td> </tr> <tr> <td>Dreamweaver</td> <td>Programa de maquetación web</td> </tr> </table> PERO ¡NO! Si en nuestro HTML tenemos la tabla definida así. Para que el HTML no se confunda. 50 . le tenemos que indicar que la columna de la fila uno va a ocupar el ancho de dos columnas. <table> <tr> <td colspan="2"><strong>Programas de Adobe Systems Incorporated</strong></td> </tr> <tr> <td>Dreamweaver</td> <td>Programa de maquetación web</td> </tr> </table> De esa manera tenemos la tabla bien definida.

Recuerden que la tabla. esto se va a entender aún más fácilmente. En fin. si no. Espero que esto quede entendido. o bien podríamos tener una con colspan de 2 y otra columna simple. pero se toma desde ahí en adelante. Les paso a dar la agradable noticia de que ¡¡¡¡CON LAS FILAS PASA LO MISMO!!!! Y sí. como dije antes. esta hubiese tomado el doble de ancho. y no hubiese sido la tabla que nosotros queríamos. es como una especie de grilla cuadriculada. así como tenemos que tener la misma cantidad de columnas. Veamos otro ejemplo: Estudiamos en el taller Dreamweaver Programás de Adobe Systems Incorporated Flash Illustrator Acá tenemos una tabla con 2 columnas en la fila uno y 3 columnas en la fila dos. ya saben: ¡A mandarle comentarios a Thor! Siguiendo….Manual de Dreamweaver Si abajo tuviésemos 3 columnas (3 <td>) el colspan de la de arriba debería ser de 3. la columna que tiene el colspan es la segunda de la fila uno y esto es porque el colspan nos dice cuántas columnas va a ocupar la misma. las tablas deben tener en todas sus filas la misma cantidad de columnas. si se entendió lo de colspan. así es que. Pongamos ejemplos: Estudio del Taller Programa Dreamweaver Código HTML 51 . también debemos tener la misma cantidad de filas. Si nosotros le hubiésemos puesto colspan 2 a la columna “Estudiamos en el taller”. Bien. El código correspondiente sería: <table> <tr> <td>Estudiamos en el taller</td> <td colspan="2"><strong>Programas de Adobe Systems Incorporated</strong></td> </tr> <tr> <td>Dreamweaver</td> <td>Flash</td> <td>Illustrator</td> </tr> </table> Esta tabla de arriba nos da pie para explicar algunas cosas más: Como podemos ver. la fila con mayor cantidad de columnas es la que se toma como base y al resto se le asigna “colspan” como tanto espacio ocupen ( 1 o más columnas). como era de esperarse.

Ahora vamos a ver otras menos importantes. la etiqueta <table> comparte propiedades comunes como width y height. por último y ya los dejo tranquilos. aunque la mayoría de los estilos de cualquiera de las etiquetas que aprendimos y aprenderemos los manejaremos más adelante con CSS. pero que está bueno saberlas. Van a ver que probándolo se entiende más fácil. Les dejo como tarea investigarlas.Manual de Dreamweaver Acá tenemos una columna. Cellspacing: Esta propiedad se usa en la etiqueta <table> ( <table cellspacing=”2″) y define nuestro espacio entre una celda y la otra de nuestra tabla. Además. Hasta aquí mostramos las propiedades FUNDAMENTALES que se deben conocer para poder crear una tabla. 52 . Calculo que han entendido. ¿Y qué pasa cuando tenemos una tabla así? Aquí surge la propiedad “rowspan”. ocupa el doble de largo (dos filas). Border: Esta propiedad también se usa en la etiqueta <table> e indica el borde que va a tener nuestra tabla tanto alrededor como el de las celdas en sí. pero de forma vertical. Bueno. si es que tienen ganas. la propiedad rowspan actúa de manera similar a la propiedad colspan. que en vez de ocupar el doble de ancho. sólo les quería comentar que existen otro tipos de tablas. así que ya deberían entender esto. <table> <tr> <td rowspan="2">Estudio del taller</td> <td>Programa</td> <td>Código</td> </tr> <tr> <td>Dreamweaver</td> <td>HTML</td> </tr> </table> Como podemos ver. Sé que es un tema difícil si no se lo ve por uno mismo. que en realidad son más o menos lo mismo que estas pero que varían en pequeñeces. el primer <td> faltante. presuponiendo que quedó claro lo de colspan. El <td> con rowspan 2 ocuparía el <td> faltante en la fila dos y como lo pusimos arriba de todo. y cualquier cosa me preguntan lo que necesiten. ocuparía específicamente. si no entienden. así que los invito a que abran el Dw y prueben hacer tablas a mano en modo código y luego vean los resultados en vista de diseño y vayan probando diferentes cambios. Pasemos directamente al código correcto.

si leyeron la clase anterior sabrán que tener una tabla bien armada requiere pensar cada lugar que vayamos a usar. por 53 . porque debemos tener contemplados los “rowspan” y los “colspan” que vamos a necesitar en cada parte de nuestra tabla.Manual de Dreamweaver Conclusión Clase larga ¡sí que sí! pero útil. Además de la complejidad de pensarlo (que con el tiempo uno se acostumbra). ¿Y por qué no se siguen usando tablas a la manera de antes? Bueno. ¡Sí! ¡17! ¿Cómo se pasa el tiempo. queremos poner un nuevo cuadradito para “incrustar” X cosa… Habría que cambiar todos los rowspan y colspan afectados… Durante un tiempo. provocando un mayor peso de la página y. y la dividía como quería. hay que cambiar gran parte de la estructura. Entonces uno ponía una tabla dentro de una celda de otra tabla. Imaginen que en medio de una cuadrícula que forma nuestro sitio. Clase 17: Divisores y estilos CSS (1) ¡Hola. ¿Por qué digo esto? Bueno. como ya me habrán escuchado decir (figurativamente). Espero que se haya entendido todo bien. para “zafar”. Era práctico y no teníamos que tocar nada de la anterior. pero cada vez estamos más cerca de la gloria. Pero sitios grandes que usaron estas prácticas se encontraron con que el código HTML de sus páginas se hacia INMENSO. el diseño web actual se basa en el uso de divs (una etiqueta que vamos a ver hoy) y estilos. ya para empezar con divisores. cualquier cosa me preguntan vía comentarios. Nos vemos de nuevo la semana que viene con otra edición del taller. eh? Y bueno. mucha gente anidaba tablas. No se lo pierdan que se viene lo más importante. otro factor importante es que a la hora de modificar algo en el sitio. que son la etiqueta madre de los sitios web actuales. Hoy tenemos una clase especial. un punto de inflexión entre los conocimientos generales de HTML y el maquetado de páginas a nivel profesional. jaja. mis queridos seguidores! Bienvenidos a la clase 17 del taller de Adobe Dreamweaver.

y esas también podemos ubicarlas como y donde queremos. y dentro de ella metemos cajas y las ubicamos como queremos y donde queremos. vamos a hacerlo gráfico: imaginen a los divs como cajas. estas cajas pueden tener cajas más chicas adentro. ¿Qué son los divisores? Los divisores son una etiqueta que surgió para darle forma a las páginas de la manera más práctica posible (etiqueta <div></div>). Y si tenemos ganas de cambiarle su tamaño o reacomodarlo. Entonces podemos crear unos cuantos divs con el contenido que queramos y ordenarlo en la parte de la página que queremos que se vea y listo. porque no se podía adaptar al “monstruo tablístico” actual. había que rehacer el sitio entero. Más fácil imposible. una mayor espera del usuario para cargar (además de una mayor transferencia de sus servidores). Tenemos el cuerpo de la página. les voy a explicar la nueva manera de maquetar y van a ver que solos se van a dar cuenta de las GIGANTES ventajas que tiene. Nos olvidamos de las complejidades anteriores…. Vamos a crear un cuerpo de la página y dentro vamos a ponerle un divisor. También se encontraron que cuando querían hacer un cambio grande (ya no un cuadradito como dijimos arriba). <body> <div> </div> </body> Gráficamente. Vayamos a algo visual Veamos gráficamente como sería la utilización de divs. Ahora. Podemos maquetar una página rápidamente y si es necesario modificarla también lo podremos hacer en muy poco tiempo. Además. esto no afectará a la estructura del sitio en general. ¿Cómo explicar un div? Bueno. esto sería así: 54 .Manual de Dreamweaver ende.

con estilos. armar una página web con divs es igual que dibujarla en una hoja. le decimos a los divs dónde queremos que se ubiquen. Ahora veamos un ejemplo más palpable: (fig. Estilos Y ahora viene la magia. 1) El div o contenedor que creamos recién puede. 2) Como podemos ver. acomodarse en el lugar de la página que nos quede mejor. 55 . mediante estilos. y a su vez podemos poner más divs dentro.Manual de Dreamweaver (fig. El HTML de la página que armamos arriba sería: <body> <div>(header)</div> <div>(barra lateral)</div> <div>(nota 1)</div> <div>(nota 2)</div> <div>(footer)</div> </body> Luego.

vayamos al grano. float: left. es poner el estilo que nosotros queremos que tenga la etiqueta en la etiqueta misma. float: left. líneas más arriba."> (nota 2)</div> <div style="background-color: gray. se habrán preguntado cómo con esos divs metidos uno debajo de otro sin nada más. mediante la definición de varios estilos."> (nota 1)</div> <div style="background-color: green. La segunda es mediante CSS. mediante el atributo style=”(acá pondremos los estilos)”. height: 60%."> (header)</div> <div style="background-color: blue. que pareciera no coincidir con la misma."> (barra lateral)</div> <div style="background-color: yellow. 2) definimos abajo un código HTML muy simple. height: 60%. height: 60%. width: 40%. para que cumpla con el aspecto que nosotros queremos que tenga."> (footer)</div> </body> Para que puedan diferenciar cada parte les dejo una imagen dividida por colores: 56 . que es una hoja que contiene solamente estilos. width: 100%.Manual de Dreamweaver Ustedes. y luego veremos si hacemos tiempo de ver algo de CSS y su implementación. width: 40%. Nosotros vamos a trabajar con estilos en cada etiqueta. en las etiquetas correspondientes. Ahora vamos a ver cómo hacerla coincidir. ya todos deben estar ansiosos por ver como funciona esto: En la “página” que maquetamos a mano (fig. El código REAL de la página (fig. 2) seria el siguiente: <body><div style="background-color: red. para empezar a conocerlos. height: 30%. Existen dos maneras de aplicar estilos: La primera y más básica. float: left. width: 20%. Los estilos son características especiales que le podemos dar a una etiqueta. Y en realidad no lo hace. y luego se les dice a las etiquetas cuál estilo deben tomar de esa hoja. width: 100%. height: 10%. lograríamos armar prácticamente el maquetado de una página entera. ¡Esperemos que si! Bueno.

luego pondremos párrafos. imágenes. vemos que tienen una propiedad float: left. serán estilos y sus valores. Vamos a pasar a detallar qué hace cada uno. alto y color correspondiente. logramos maquetar una página completa. Con 5 divs. con los 5 divs adentro. hacemos que ocupen el total del ancho y cuánto queremos que tenga cada uno. lista para agregarle información.Manual de Dreamweaver Ahora expliquemos un poco lo que tenemos acá: En principio. mediante la propiedad width. listas. Luego tenemos background-color: red. Obviamente. Esta propiedad les dice a los divs que van a “flotar” hacia la izquierda. En el primer div tenemos style=. pero este maquetado tiene agregados los estilos. Luego al div footer le decimos que nuevamente ocupe el 100% para “cerrar” la página y listo. Luego height: 30%. y algunos (pocos) estilos. 2). tenemos el mismo maquetado que antes. 57 . nos dice que ese div va a tener el 30% del total de la altura del documento. al igual que la fig. Lo que sea necesario para que nuestra página quede linda . etc. La siguiente es width: 100%. “apilamos” los divs del medio para formar columnas y. Esta propiedad le dice al div qué color de fondo va a tener (en este caso. hasta pegarse con el elemento anterior. además de las propiedades de ancho. o sea el ancho total de la página. dentro de los divs. Esto nos indica que el div va a tener el mayor ancho posible. como pueden ver en el primer div es rojo. De esta manera. 2). tal cual el código anterior (fig. el body. Los 3 div siguientes. Esto nos dice que todo lo que pongamos entre las comillas a continuación.

ya cerrando. nosotros lo vamos a ir viendo de a poco mientras utilizamos HTML y luego daremos algunos “tips” para hacer otras cosas interesantes (más allá del maquetado común). ya saben que cualquier duda o cosa que no les salga. Hoy vamos a ver algunos detalles más que los estilos y los divs nos pueden ofrecer. vamos a quedarnos con una parte de la página que ya maquetamos: 58 . Les confieso que estuve en duda de seguir con este tema y mejorando las cosas que vimos la clase pasada o explicar otra manera diferente de usar los divisores. pueden preguntarla vía comentarios en la clase del taller que corresponda. Clase 18: Divisores y estilos CSS (2) Hola gente. Para esto. que les sirva en la creación de sus páginas y. espero que esta clase les haya gustado. ¿cómo les va? ¿bien? ¡Me alegra! Hoy nos toca repasar los divisores y estilos que vimos la clase pasada y aprender nuevas cosas de ellos. Los divs y los estilos tienen muchísimo contenido para ver. pero al final me decidí por reafirmar el conocimiento anterior porque considero muy importante que esto quede bien claro… La clase anterior vimos cómo maquetar una página básica.Manual de Dreamweaver Conclusión Esto es ni más ni menos que una introducción. pero bueno. Bueno. como siempre. Nos vemos la semana que viene para ampliar un poco el tema que vimos hoy y profundizar sobre el uso de divs y estilos. para los estilos necesitaríamos varias clases especialmente dedicadas. En sí.

pueden dejarme un comentario. Ahora veamos qué deberíamos agregar para que realmente se vea como nosotros queremos. Ya van a comprender lo útil que les va a resultar esta clase. título. Habiendo hecho la aclaración. con algo de paciencia (o no tanta) van a terminarn entendiendo. Veamos qué le ponemos: una foto. Tenemos entonces el código original de este maquetado que es: Ahora vamos a tomar el div de la nota 1 y vamos a empezar a modificarlo. Pero antes haremos una aclaración importante: En el código que voy a poner a continuación vamos a ver algunas cosas nuevas que les pueden resultar difíciles de entender. en base a esto haremos nuestra caja. texto.Manual de Dreamweaver Vamos a tomar el sector de la nota 1 (la caja amarilla) y la vamos a rellenar con lo que se supone que es. Estuve pensando si ponerlo o no. y un pie. una nota. aquí va un poco de CSS: 59 . pero sé que ustedes. mis fieles seguidores. En caso de dudas. <div> (foto y contenido)<div>(pie)</div></div> Con este código tendríamos formada nuestra nota completa.

Manual de Dreamweaver Y este sería el resultado final del div (nota 1) de nuestro maquetado de la clase anterior (cuadro amarillo): 60 .

dado que se trata de la base del diseño actual de sitios web. ¡Comencemos! La clase pasada vimos este fragmento de código CSS: 61 . parte por parte. Hoy explicaremos el código CSS que vimos la clase pasada. Clase 19: Divisores y estilos CSS (3) ¡Hola.Manual de Dreamweaver En la próxima clase explicaré paso a paso el código que ven más arriba. Pero a la vez es bastante complejo (no difícil). bienvenidos a la tercer clase del Taller de Adobe Dreamweaver sobre divisores y estilos CSS! Seguro este es uno de los temas que más les interesa. Luego ustedes pueden hacer su propio diseño en Dreamweaver. así que ¡a practicar! jejeje ^_^. así que no se desesperen si lo que vieron les genera muchas preguntas .

float: left . es parte del maquetado que hicimos. Estilos 62 .Manual de Dreamweaver Ahora nos toca lo difícil. Luego tenemos una etiqueta <img /> la cual va a contener el logo de elwebmaster y tiene los siguientes estilos y propiedades. dejemos de lado la etiqueta <style></style> para lo último y empecemos con el <div>(nota1)</div> Dentro de la etiqueta propia del divisor.Le decimos al HTML que el color de fondo de este divisor va a ser blanco. background-color: white . 2. que es justamente comprenderlo. Veamos: En principio.Flotamos a la izquierda.Ponemos un ancho de 40% y un alto de 60%. 3. esto lo vimos la clase pasada. tenemos definidos varios estilos: 1. width/height .

Propiedades 1. la clase sólo la tiene el div que la contiene.com. para ordenar los divisores y que formen nuestra “paginita” ^_^. Dentro de este tenemos un <h2> que hace de título y varios <p> (párrafos) con links a elwebmaster (que podrían ser links directamente a esas notas). Seguimos: Ahora tenemos el título dentro del <h1> Estilos 1. 2. ¡¡¡SÍ!!!¡¡¡ Y ESO ES LO BUENO!!! 63 . Además. la hora de la verdad!!! Más abajo nos encontramos con otro divisor. parte del maquetado que hicimos la clase pasada. pero si vamos al gráfico. Pero…. Esto se debe a que LA CLASE pieNota (class=”pieNota”) tiene seteado todos esos atributos. como podemos observar. las etiquetas internas del divisor que las contiene. color: gray . src . para separar la imagen del título (el <h1> que pusimos a continuación de la imagen). <!--[endif]-->width/height – El ancho y alto que queremos que tenga nuestra imagen (si no queremos que nos ponga el que tiene por defecto la imagen en sí).. caracteres especiales. podemos ver que esta alineado como debe. ninguno de los elementos tienen algún margen por encima o debajo de ellos. para separarla de los bordes del div.Manual de Dreamweaver 1. 3. 1. Ahora bien. la imagen no se cargue. Más abajo tenemos dos <p> con margen.Nos setea el color de la fuente del h1 en gris. <br /> y otras cosas que ya fuimos viendo a lo largo del curso. ¡¡¡Y ahora. 2. dentro del divisor “nota 1″ que tiene una característica especial: tiene el atributo class=”pieNota”. <!--[endif]-->font-family: helvetica – Setea el tipo de fuente que va a tener el h1. las fuentes tienen color azul y las letras tienen un tamaño predefinido. alt – El texto alternativo que nos va a mostrar el lugar donde va la imagen en caso de que por algún motivo o error. Luego tenemos un <hr /> que nos pone una línea de separación (la podemos ver en la imagen) con un ancho del 80% del total del divisor. 2. 3. <!--[endif]-->float: left – De nuevo.El lugar donde vamos a tener nuestra foto guardada para traer y mostrar (source). Dentro del h1 tenemos un <a> que nos enlaza el título con la página de elwebmaster. 2. 3. no tienen NINGUN ESTILO. <!--[endif]-->margin-right: 20px – Ponemos un margen de la derecha de 20 píxeles. <!--[endif]-->margin-top/left: 10px – Le ponemos a la imagen un margen superior e izquierdo de 10 píxeles.

color y font-size. si dentro del <div class=”pieNota”> (el del ejemplo) tuviésemos un elemento <li>. est e no se vería afectado por los estilos que esta clase contiene. El “p”. Primero que nada analicemos el código.Manual de Dreamweaver Con sólo setear una clase a la etiqueta contenedora. Luego de seteada la etiqueta <style> para lo que necesitamos. left – 0 0 0 10px). a los que se les va a dar “un nombre” que luego se usará para relacionarlos con las etiquetas correspondientes. por ahora los dejo pensando bastante. aunque no necesariamente debe bajar la línea (como esta en el ejemplo). debe terminar con punto y coma “. en este caso. en este caso. analicemos la etiqueta <style></style> La etiqueta <style> va a contener estilos y nada más que estilos. margin-right. podemos agrupar los márgenes y paddings en una sola propiedad. va a ser el nombre con el que vamos a relacionar una etiqueta con los estilos que le pongamos dentro. De esta manera. con ese nombre hacemos referencia directamente a class=”pieNota”. Luego de designarle un nombre a en este caso. el atributo type que le va a indicar que va a contener CSS a modo de texto (text/css) y luego tenemos el atributo media que va a indicar para qué medio vamos a usar esos estilos. Dentro de los corchetes tenemos. right. margin-left. indica que sólo va a afectar a los <p> y los <h2> que se encuentren dentro del elemento que tenga esa clase. margin: 0 0 0 10px (en orden: top. no necesitamos setearle estilos a ningún elemento de adentro (salvo que queramos que un elemento tenga una propiedad en particular por sí sólo). El punto “.” que antecede el nombre. todos en uno sólo. Tenemos dentro de la etiqueta. padding. Por ende. Bueno. ahora sí. margen. y ponerle que etiquetas debe afectar. bottom. Cada estilo (al igual que con la etiqueta “style=”). Como vemos en la imagen (otro “truquito”). la clase. Conclusión 64 .pieNota”: pieNota. Entonces. screen (pantalla) pero podría ser un estilo especifico para imprimir o para video. pero si es recomendable para que sean más legibles (el código será más prolijo). indica que va a ser UNA CLASE (class=). vamos a escribir los estilos dentro. Podemos hacer un margin-top. y el “h2″ que siguen al nombre de la clase. margin-bottom. vamos a pasar a poner todos los estilos que deba tener entre “{” “}”.”. En primer lugar vemos “.

así queda claro. pero por lo menos (espero) quedó clara la ventaja de utilizar estilos y CSS dentro de la maquetación de nuestra página. nos vemos la semana que viene para otra clase del taller. fue una división de la clase de la otra semana anterior. porque CSS daría para un taller entero. Pero bueno. pudimos aplicarlos a todos los elementos de su interior sin tener que escribir una sola línea más. Bueno. Armemos un código de cómo podría ser un div de una nota X. y de ahí iremos viendo cómo funcionan los estilos con CSS. Más que claro esta en la clase pieNota. Espero que practiquen lo visto hoy. de paso pueden darse una idea sobre cómo se puede ir insertándolo dentro de un código HTML. hay muchos tips y ayudas que sólo podría dar una persona con experiencia en el tema. Y ni hablar a la antigua. lo gigante que hubiese sido nuestro código. que con sólo definir los estilos una vez en la etiqueta <style>. Recuerden que me pueden preguntar lo que quieran vía comentarios. No sé si se habrán dado cuenta. Ya estaba extrañándolos. pero la clase pasada. Clase 20: Más estilos CSS Hola muchachos y muchachas ¿cómo están? ¡Me alegro! (espero que hayan respondido “bieeeen”). Si bien no es muy difícil. así nos queda bien claro todo. de tener que poner todos los estilos a cada etiqueta por separado. así que la semana pasada no escribí el artículo literalmente. Estilos CSS Para encarar este tema vamos a poner un par de ejemplos. Trataré la semana que viene de hacer un lugarcito para una clase dedicada a este tema y a las preguntas que surjan.Manual de Dreamweaver Esta clase seguramente va a generar miles de preguntas y tal vez haya cosas que no entiendan. para tomar de ejemplo: <div> <h2>Articulo de explicacion: manejo de CSS</h2> 65 . ya volví y con ¡buenas noticias! Conseguimos espacio para poner una miniclase guía sobre CSS. No vamos a lograr avanzar profundamente en este tema. o surgen preguntas para responder y seguir avanzando. sin estilos. el div de la “nota uno”. Vamos a un ejemplo similar al de las clases pasadas. Imaginen. Esta clase estuvo bastante rebuscada.

pero requiere paciencia a la hora de usarlo.com</p> <p>w3c y maquetado correcto del html</p> </div> 66 . Bien.</p> <h2>Articulos relacionados: </h2> <p>Dw/html taller elwebmaster. se van a explicar más abajo . Hagamos un corte acá y miremos otro código. pero requiere paciencia a la hora de usarlo. nosotros armamos unos estilos en una clase “pieNota” que nos daba algunos parámetros para nuestro div.com</p> <p>w3c y maquetado correcto del html</p> </div> Bueno. Si recuerdan de la clase pasada. todos los p y los h2 seguirían siendo iguales. con un pie de página que contendría artículos relacionados. afectaba a todos los h2 y todos los p (relean las dos clases anteriores si tienen dudas).pieNota (recuerden que el punto referenciaba a una clase). Por lo tanto. No se asusten si ven cosas que no entienden. aquí tendríamos un maquetado de una nota (cortita por cierto jeje). el problema aquí es que los artículos relacionados tendrían el mismo estilo que la nota en sí.Manual de Dreamweaver <p>El CSS no es muy dificil de aprender. seguiríamos teniendo el mismo problema.</p> <div class=”pieNota”> <h2>Articulos relacionados: </h2> <p>Dw/html taller elwebmaster. <div id=”nota-uno”> <h2>Articulo de explicacion: manejo de CSS</h2> <p>El CSS no es muy dificil de aprender. . para ver cómo se podría maquetar. El tema es que en esa clase.

font-size: 12px. para toda la caja (div id=”nota -uno”). p { color: red. cambiarles el estilo con .pieNota. las “id” a diferencia de las “class” solo pueden existir UNA SOLA VE Z en todo el documento HTML. La etiqueta “id” es otra manera de referenciar a un estilo. nuestra caja con la nota anterior toma.pieNota h2.Manual de Dreamweaver </div> Bien ¿qué tenemos acá? Vemos que aparece una nueva etiqueta “id”. en vez de con un “. jeje. pero solo una etiqueta puede ser #notauno. Volviendo a los estilos De esta manera. podemos tener muchas referencias a . los h2 y los p van a estar en letra roja y con un tamaño de 16 píxeles. Es decir. } </style> De esta manera. no creo que podamos tener más de una nota número uno.pieNota. Ésta. Una aclaración importante. 67 . font-size: 16px. Para este caso. podemos marcar un estilo general para #nota-uno y luego a los artículos relacionados. al igual que la etiqueta “class”.” se referencia con un “#”. } #nota-uno . Entonces nuestros estilos quedarían así: <style type=”text/css” media=”screen”> #nota-uno h2. p { color:yellow.

que simple y fácil de entender les va a quedar el código. si siguen los consejos y los temas que vamos viendo día a día acá. Y nos ayudamos entre todos.Manual de Dreamweaver Pero.pieNota solo como un elemento individual“. así se sacan las dudas e inclusive puedan haber otros usuarios que los ayuden.titulo y para cada pie podríamos tener la clase .pieNota. Conclusión Si bien CSS da para mucho más. si están bien “chispitas” y siguen todas las explicaciones sin trabarse en ningún lado. y cuando lo comparen con cosas que hayan hecho antes. y así dependiendo en qué id (única) está.pieNota dentro de la id #nota-uno. y dependiendo de la “id” en la que se encuentren actuarían diferente. les va a causar gracia (o pena :P). Nuestro sitio quedará así resumido a un par de divs con contenido. Ya van a ver cuando maqueten un sitio ustedes.pieNota dentro de #nota-uno (#nota-uno . No duden en preguntar vía comentario cualquier problema que puedan tener. para la clase . no tengo mucho más espacio para seguir escribiendo por hoy. todos. esta clase pretendió ser una guía de su funcionamiento. Clase 21: Formularios ¡Hola amigos! ¿Cómo les fue con la práctica de CSS? ¡Porque me imagino que habrán practicado! :p 68 . Bueno. podrán preguntarse: “Por qué es necesario poner en los estilos. Bueno. Entonces podríamos tener en nuestro HTML varias clases . pero por cuestiones de espacio no se puede (no Los quiero espero la tener semana una que clase viene con cortada más taller de para nuevo). uno para cada lugar del sitio en que este ubicado. la respuesta sería esta: De esta manera podemos tener varios tipos de . jeje. los h2 y los p van a tener la letra color amarilla y el tamaño de 12 píxeles. Faltaron muchas cosas que me hubiesen gustado tocar. Espero que les haya gustado y que sigan leyendo semana a semana las clases que hago exclusivamente para ustedes.pieNota.pie. Ahora. y a otro par de ids. que van a compartir clases. Piensen que para cada cosa que tenga un titulo podríamos tener la clase . a . pero en las próximas clases trataré de “ir mechando” algo de CSS a medida que explico los siguientes temas.pieNota) y no poner a . tendría un estilo diferente. De esta manera nuestro código queda bien maquetado y podemos ordenar semánticamente nuestro sitio.

a modo de ejemplo. pero dentro de él. El segundo atributo “action” indica el lugar en que va a ser procesada la información que enviamos. en que nos cuentan un poco de formularios. Aquí les dejo un link a nuestro Taller de PHP. 69 . necesitaremos un lenguaje de programación. veamos cómo quedaría nuestra etiqueta “form” entera. el que los envía de forma oculta se llama “post” (<form method=”post”>). o asp. Luego de explicado esto. por url (junto a la dirección de nuestra página) o de forma oculta. no contiene ningún dato más que los de su funcionamiento.asp) y este se encargará de hacer lo que deba hacer con esa información. en realidad. aunque todavía sin los elementos internos que van a contener la información.php (o . El elemento formulario. como por ejemplo php. tiene dos atributos obligatorios. Para procesar la información. El atributo “method” es el encargado de indicarle al formulario la manera en que debe enviar los datos. El primero (el que se envía por url) se llama “get” (<form method=”get”>) y el segundo.php”> </form> Tenemos este formulario. habrá otros elementos que son los que van a contener la información a enviar. y de paso si quieren pueden ir aprendiendo a programar.Manual de Dreamweaver Hoy.php”. para hacer sus propias páginas dinámicas. devolver una respuesta. sea cual sea el tipo de “method” que usemos. El formulario es un elemento HTML que está delimitado por los tags <form> </form> y dentro tiene campos con datos para enviar a nuestro servidor. dos campos: usuario y contraseña. <form method=”post” action=”login. ser procesados y. Este formulario podría contener. en caso que corresponda. nos toca borrón y cuenta nueva. que llevará de forma oculta la información que contenga a un archivo php que se va a llamar “login. uno se llama “method” y otro se llama “action”. Vamos a pasar a un tema que no tiene nada que ver con lo que veníamos hablando hasta el momento: formularios. Estos elementos los veremos más adelante. Atributos de un formulario Un formulario. entonces desde nuestro formulario enviaremos la información al archivo . hoy nos dedicaremos a ver las propiedades de funcionamiento de la etiqueta formulario en sí.

La clase que viene. agregaremos una clase más que será SÓLO DE RESPUESTAS. así dentro de dos clases nos queda todo bien claro y somos la ¡envidia de los nerds del barrio! jeje. con sus propiedades. Entonces. continuemos con las etiquetas que van adentro del formulario. gente? ¿Cómo les va? ¿Revisaron lo que les dejé la clase pasada. Hoy vamos a ver la primera parte de los elementos que contiene un formulario y la semana que viene. hoy nos toca ver los elementos del formulario que hacen posible el envio de datos a través del mismo. Pero el martes 8 de julio. como está en el temario. la etiqueta que va a enviar los datos que por lo general es un botón o actúa como tal. responderemos las preguntas que fueron quedando en comentarios a lo largo del curso. Tenemos la parte de la información. Etiquetas contenedoras de información 70 . Clase 22: Dentro del Formulario ¿Qué tal. y si bien todavía no podemos hacer uno porque no conocemos las etiquetas internas que llevan la información. Antes que nada dividamos el formulario en partes para que puedan identificar su funcionamiento más fácilmente. Recuerden que cualquier pregunta que tengan. por ultimo. así que. Bueno. a prestar atención y anotar todo bien. de formularios? ¿Sí? Bárbaro ¿No? ¡¡¡No importa!!! los quiero igual. Bueno. Tenemos la parte donde se setea el destino y la manera en que se van a enviar los datos.Manual de Dreamweaver Taller de PHP: Envio de datos a través de un formulario Conclusión Hoy vimos el elemento formulario. empecemos. La clase anterior vimos la etiqueta <form> en sí. que va a estar contenida en etiquetas que van a ir dentro del formulario y tenemos. pero no explicamos como enviarlos. Además. Además de esta manera nos quedarán las preguntas frecuentes ordenadas en una sola clase. pueden enviar comentarios. y en un momento hablamos de usuario y contraseña. La etiqueta <form> ya la vimos la clase pasada y también vimos las propiedades que indican el destino a donde va a llegar la información y de qué manera la vamos a enviar. empezaremos a conocer cada una de estas etiquetas y veremos cómo quedaría un formulario completo usando algunas de ellas. que son las propiedades de la etiqueta <form> en sí. para las dudas que vayan juntando de aquí en más o las que tengan guardadas. ya tenemos una idea de su funcionamiento. la segunda.

Veamos una etiqueta <input>: <input type=”text” name=”user” value=”" /> Ahora analicémosla. Veamos algunos: <input type=”password” name=”pass” value=”" /> 71 .). -name: Name es el nombre con que le va a llegar al archivo que va a procesar la información (. -type: Esta propiedad nos va a decir qué tipo de información va a contener el input.Manual de Dreamweaver Estas etiquetas van a actuar de contenedores. tenemos varias propiedades. ¿Cómo es que contienen información? Bueno. la información de la caja. desde los cuales el formulario va a captar los datos para enviarlos según las propiedades se lo indiquen (method y action de la clase anterior). Esta etiqueta va a indicar un ingreso de datos en el formulario. Existen otro tipo de inputs. veamos mejor una etiqueta de estas a modo de ejemplo.php. el texto que enviemos. para que se entienda de la forma más clara posible y después vemos el resto de las etiquetas del formulario. buscando dentro de “user” encontrara lo que ingreso el usuario dentro del input (contenido del value). La más común de las etiquetas de un formulario es la etiqueta <input>. sera enviada al servidor bajo el nombre de “user”. -value: Es el valor que va a enviar dentro del nombre. cuando presionemos el botón “Enviar”. en este caso texto. . También vemos que además del nombre de la etiqueta (input) en sí. los datos que contenga y los va a enviar (además de buscar en las otras etiquetas que contenga). va a buscar en esta etiqueta. etc. ya que tiene la barra al final.asp. de este modo cuando nuestro script de programación lea lo que le llega desde el formulario. para ver que nos encontramos. que en realidad los que cambia es solo la propiedad “type” pero realmente son de utilidad. Como primer medida tenemos que es una etiqueta que cierra en sí misma (no se si recordarán que por allá al principio dijimos que TODAS las etiquetas deben tener un cierre). Cuando el formulario sea enviado mediante el clic en un botón. que sería una representación gráfica de la propiedad value. Como podemos ver acá. que por lo general es ingresado por el usuario.

Espero que esta clase les haya servido o les sirva en un futuro y. Ahí tienen un típico formulario compuesto por la etiqueta <form> con 2 inputs dentro. por sobre todo.php” > <input type=”text” name=”usuario” value=”" /> <input type=”password” name=”pass” value=”" /> <input type=”submit” value=”Enviar” /> </form> Y acá vemos otro tipo de input. donde vamos a ver los últimos elementos y la próxima ya es la clase de respuestas. el input de tipo submit. Nos vemos el martes que viene. solo que al indicarle el “type” en modo password. este nos crea un botón. Conclusión Bueno. que cuando le demos clic va a activar el formulario. Este formulario seria algo así: <form method=”post” action=”login. a login. lo que hace es ocultar el texto en forma de asteriscos. que va a contener el texto que pongamos en la propiedad value. en esta misma página. para que no pueda ser visto. (Recomiendo leer el taller de php. Clase 23: Dentro del Formulario (2) Buen día muchachos y muchachas ¿como les va? Hoy tenemos la segunda parte de formularios. para entender bien como funcionan los formularios desde la parte de programación). en este caso. así que vayan preparando sus preguntas para dejar durante esta semana (01/07/2008 al 08/07/2008). Habrán visto este tipo de inputs en cualquier casilla de email o en cualquier lado que tengan que loguear usuario y contraseña. uno type text (el de username) y otro type password (el de la contraseña) y para terminar el botón de envío de datos.php por post. 72 . La clase que viene. aquí vimos la primer parte de los elementos que se encuentran dentro de un formulario y cómo funcionan. veremos el resto de estos elementos e iremos anotando preguntas para la siguiente (martes 8 de julio) en la cual trataré de responder todo lo que me vayan preguntando. para que recoja la información del resto de los inputs y la envíe. es igual al anterior.Manual de Dreamweaver Este input. que la hayan pasado lindo leyéndola. para seguir con más taller.

Un ejemplo muy gráfico y que dudo que no se hayan cruzado alguna vez es la cajita que viene junto a “Acepta los términos y condiciones…”. . son excluyentes. jajaja ^_^. es la que decide bajo qué nombre se enviará esta etiqueta hacia nuestro script (. cuando lo tengamos seleccionado. etc). Este es parecido al checkbox. en un formulario. se nos deselecciona otro (siempre que pertenezcan al mismo grupo). que van a determinar la cantidad de columnas y filas que va a tener el textarea. solo que permite una sola selección. Elementos del formulario (2) Arranquemos con los textareas. o todos ellos. Estas son las típicas cajas a las que se les aplica una tilde cuando se les quiere seleccionar. una acción lógica sería “si esta chequeado (si nos llega el valor 1) dejamos seguir. Estos campos son para texto y están delimitados por sus etiquetas de apertura y cierre <textarea></textarea>. Otro elemento que también es muy usado es el radiobutton. para que sea manejado. La sintaxis es: <input type=”checkbox” name=”condiciones” value=”1″ /> Mediante este checkbox. Hoy vamos a ver algunas otras partes. Este elemento es otro input más y trabaja como los anteriores. Si nosotros tenemos un conjunto de checkbox. ademas de los inputs que vimos la clase pasada. dejemos las ironías y/o idioteces aparte y vayamos al taller. podemos seleccionar ninguno. En cambio los radiobuttons. Un textarea terminado quedaria más o menos así: <textarea rows=”5″ cols=”10″ name=”texto”></textarea> Recuerden siempre que cualquier elemento de un formulario en XHTML irá. varios. Otro de los elementos es el checkbox. En el caso de los términos y condiciones. no dejamos seguir”. Bueno. 73 . si no.php.asp. Ademas de las propiedades “rows” y “cols”. uno. tambien tienen la propiedad “name” que como ya vimos la clase pasada. enviará su value a nuestro script. El tamaño que van a tener está dado mediante sus propiedades “rows” y “cols”. claro que sí.Manual de Dreamweaver Aclaro la fecha porque sé que este taller quedará para la posteridad y tal vez sus nietos o algún que otro alienígena del futuro aprenderán de el. si seleccionamos uno. que son muy usadas en los formularios.

todos son el mismo en sí. los inputs al tener el mismo nombre (y ser de tipo radio) cuando seleccionamos uno. donde desplegará todas sus opciones. pero con diferentes opciones a enviar. de un tipo diferente. El script del servidor recibirá este valor dentro del name del select. El radiobutton que este seleccionado. Recuerden esto porque si no no funcionarán. en este caso “opcionElegida”. Esta etiqueta es un menu desplegable que muestra las opciones que contiene dentro. En este caso vamos a hacer una aclaración importante: Supongamos que tenemos varios radiobuttons a seleccionar. y es lógico que suceda ya que son acciones opuestas. 74 . Aqui dejo un ejemplo gráfico: <input type=”radio” name=”accion” value=”aceptar” /> <input type=”radio” name=”accion” value=”no aceptar” /> De esta manera. el valor de la opción que tengamos seleccionada. Me olvidaba de algo muy importante: Todos estos elementos del formulario. por eso mismo son excluyentes. se deselecciona el otro. será el que enviará su “value” al script del servidor. TODOS DEBEN TENER EL MISMO NAME. Por último y la más diferente de las etiquetas del formulario. pueden estar contenidos dentro de la etiqueta <label></label> en la que podremos asignar un texto para que acompañe al elemento que pongamos en su interior. la etiqueta <select>. y manda al script del servidor. Su sintaxis es: <select name=”opcionElegida”> <option value=”1″>Opcion 1</option> <option value=”2″>Opcion 2</option> </select> El select mostrará la típica cajita con la flecha para abajo.Manual de Dreamweaver La sintaxis de los radiobuttons es: <input type=”radio” name=”radio1″ value=”1″ /> Como ven es otro input. que pueden ser cuantas queramos (agregando etiquetas <option>) y enviará al servidor el “value” del option seleccionado dentro de todos los que tengamos.

Clase 25: Preguntas Hola a todos. Aprovechen si no entendieron algo. 7. Y. HTML y HTTP? ¿Existen atajos de teclado en Dreamweaver? ¿Cuáles son? ¿Cuál es la mejor herramienta para poner texto sobre un fondo.Manual de Dreamweaver Por ejemplo: <label>Nombre de usuario:<input type=”text” name=”usuario” value=”Ingrese aqui el nombre de usuario”/></label> Conclusión: Bueno. ya sea un color pleno. 3. pero bueno. así que estén al tanto por futuros agregados. en gradiente o sobre una imagen? 4. Tal vez haya quedado alguna cosa colgada que no recuerde en este momento (espero que no). Dentro de las preguntas verán definiciones útiles. ¿Cuál es la diferencia entre XHTML. ¡Si necesitas que profundicemos en algún tema. 75 . 2. no te olvides de dejarnos tu comentario! 1. ¿Cómo puedo hacer un degradado en los bordes de una página sin tener que pegar una imagen completa y que de ambos lados quede igual? 5. tutoriales. así trato de explicar o profundizar sobre algunos temas. ¿Puedo hacer que un link me lleve a otra parte del mismo HTML? ¿Qué etiqueta uso? Receta para hacer un formulario. consejillos y algunas recetas para optimizar nuestra forma de trabajar. HTML y HTTP HTTP significa HyperText Transfer Protocol (Protocolo de Transferencia de HiperTexto) y es el protocolo desarrollado por W3C para las acciones que se realizan en la web. Recuerden que la clase que viene es una clase EXCLUSIVA PARA RESPONDER DUDAS Y PREGUNTAS. Esta clase se irá actualizando con nuevas respuestas. Esta vez vamos a responder las preguntas que estuvieron dejando en los comentarios de las clases anteriores. Nos vemos la semana que viene. ¿Cómo inserto un botón de Adobe Flash con Adobe Dreamweaver y asegurarme de que funcione? 6. Diferencia entre XHTML. si no tienen dudas ¡también pueden ayudar via comentarios a algunos que sí las tengan! Espero que les haya gustado la clase. hoy terminamos de ver los elementos de un formulario. ¿Qué debo poner en la parte de accion? ¿Cómo validar? 1. A través de este protocolo es que se definieron la sintaxis y la semántica de la comunicación.

y directamente no valida los archivos con errores. 3. Esta evolución se debe principalmente a la diferencia entre los navegadores. los desarrolladores que crearon los navegadores se tomaron el trabajo de interpretar el código y amoldarlo para que se “vea bien”. Con XHTML estricto el texto debe ir siempre dentro de una etiqueta de párrafo: <body><p>texto</p></body>. 2. Los navegadores no son más que intérpretes de código. La sintaxis de este lenguaje tiene varias reglas: Se escribe con estructura tree o de árbol (ver imagen) Todo tag debe cerrar: <a>texto</a> Los tags deben cerrar en orden inverso al que fueron abiertos: <p><strong>texto</strong></p> Los tags pueden contener atributos: <tag atributo="valor"> Debe haber una raíz obligatoria. antes se podía poner <body>texto</body. Atajos de teclado en Dreamweaver (varias versiones) Todas las versiones de Dreamweaver incluyen una ayuda para saber cuáles son los atajos del teclado. HTML es un lenguaje basado en etiquetas o tags. aceptando algunos errores. Existe un XHTML transicional que admite algunos errores de este tipo. gradiente e imagen No es muy difícil lograr ubicar texto sobre un fondo. Los tres tratamientos de fondo son muy similares: el HTML Haz clic aquí para ver 76 .Manual de Dreamweaver estructurando la web y todos los elementos que forman parte de ella –del lado del servidor y del cliente– para posibilitar la relación entre ambas partes. Sin embargo. Texto sobre fondo: color pleno. Para ver este listado debes ir al menú de Edición (Edit) y seleccionar la opción Métodos abreviados de teclado (Keyboard Shortcuts). Esto significa que tiene que existir un tag que encierre al resto: <html> XHTML es la evolción del HTML en un lenguaje mucho más estricto. Estos atajos pueden cambiar de una versión a otra y más aún de un SO a otro. sin embargo el XHTML no. Por ejemplo. HTML significa HyperText Markup Language.

font-family:’Trebuchet MS’. height:70px.elwebmaster. Arial. width:100px. Verdana.jpg) 4. la imagen tiene las mismas dimensiones que el div.com/wpbackground-repeat:repeat-y.com/wpcontent/uploads/2008/07/div_gradiente. height:600px.elwebmaster. content/uploads/2008/07/div_imagen. width:60px.jpg” que se rep ite en y: background-repeat:repeat-y <div style=" background-image:url(http://www.jpg) Después es necesario indicar que la imagen de fondo se repite sobre el eje de x: background-repeat:repeat-x <div float:left”><p style="background-image:url(http://www. font-family:’Trebuchet height:70px. float:left"></div> 77 . style=”padding:5px. width:100px. MS’.jpg). El div mide 100px x 70px.Manual de Dreamweaver <div float:left”><p style="background-color:#FAFF33. La estructura de tu página puede estar dividida en 3 divs.elwebmaster. MS’. text-align:left”>hola</p></div> En el segundo div se ve un gradiente.elwebmaster. el código sería algo parecido a esto: El primero es el div de la izquierda. Esta imagen también está en nuestro servidor y se indica así: background- image:url(http://www. Verdana. con la imagen “gradiente_izq. style=”padding:5px. content/uploads/2008/07/gradiente_izq.com/wpcontent/uploads/2008/07/div_imagen. El div del medio es el que posee el contenido de la página. text-align:left”>hola</p></div> En el último div.com/wpcontent/uploads/2008/07/div_gradiente.elwebmaster. mientras que los dos laterales únicamente incluyen un degradado. El gradiente se genera con una imagen del 70px de alto y 1px de ancho que está subida a nuestro servidor: background-image:url(http://www. text-align:left”> hola</p></div> En el primer div el fondo se da con color pleno: background-color:#FAFF33 <div style="background-image:url(http://www. float:left”><p style=”padding:5px. height:70px. Arial.jpg).com/wpwidth:100px. Degradado en los laterales de una página El degradado en los bordes de una página se hace utilizando el mismo recurso anterior. Verdana. font-family:’Trebuchet Arial. background-repeat:repeat-x.jpg). Haz clic para ver el HTML Para lograr un resultado similar.

El enlace (Ej. Anclas: enlaces dentro de un mismo HTML Las anclas son enlaces o links que nos llevan a partes del mismo documento HTML.adobe. En el HTML tendremos dos partes: 1.elwebmaster. Insertar un botón de Adobe Flash en HTML Para incorporar un objeto de Adobe Flash en un HTML d eberás “embeber” ese objeto. Haz clic para ver el HTML con la botonera de Adobe Flash 6. en este caso: ancla1. con la imagen “gradiente_der. height:600px. El destino del enlace (Ej.. width:680px. El código de color celeste son variables visuales: el ancho y alto del SWF y el color de fondo. float:left">contenido</div> Este es el div de la derecha.: Respuesta 1) A cada parte se le agrega un código diferente: Al enlace: <a href="#ancla1">¿Cuál es la diferencia entre XHTML.jpg).com/wp-content/uploads/2008/07/botonera.Manual de Dreamweaver Este es el div donde se ubica el contenido del sitio: <div style="background-color:#c0c0c0. Luego.com/wpbackground-repeat:repeat-y. height:600px. HTML y HTTP?</a> Al destino del enlace:<a name="ancla1">La diferencia entre estos tres términos..swf” height="30" quality="high" pluginspage=”http://www.jpg” que también se repite en y: background-repeat:repeat-y <div style="background-image:url(http://www. width:60px. en tu archivo HTML agregarás el siguiente código <embed width="600" src="http://www.cgi?P1_Prod_V ersion=ShockwaveFlash” bgcolor="#6699CC"></embed> type=”application/x-shockwave-flash” El código de color naranja deberás reemplazarlo por la URL de tu SWF.: Pregunta 1) 2. 78 . float:left"> </div> 5. ¿Les suena conocido? Es el mismo sistema que utilizamos para enlazar las preguntas del listado con las respuestas.com/shockwave/download/download. content/uploads/2008/07/gradiente_der.elwebmaster. Primero necesitas tener el archivo SWF subido a tu servidor.</a> Lo más importante es que el nombre del ancla sea el mismo.

nuestros talleres de Dreamweaver y PHP dieron sus respectivas clases para la creación y validación de formularios.Manual de Dreamweaver 7. ¿Cómo hacer un formulario? En elWebmaster. Taller de Adobe Dreamweaver: Clase 21: Formularios o o o o ¿Qué es un formulario? Funcionamiento Atributos Conclusión Clase 22: Dentro del formulario o o o Elementos del formulario 1 Propiedades Conclusión Clase 23: Dentro del formulario (2) o o o Elementos del formulario 2 Propiedades Conclusión Taller de PHP: Clase 7: Envío de datos de un formulario o o o ¿Cómo armar un formulario para que sea procesado por Php? Diferentes formas de enviar un formulario Variables POST y GET Clase 8: Procesar un formulario (Parte I) o o o ¿Cómo procesar un formulario? ¿Diferentes tipos de campos? Inputs Clase 9: Procesar un formulario (Parte II) o Textarea Clase 10: Procesar un formulario (Parte III) o Selectbox Clase 11: Procesar un formulario (Parte IV) o o o Recibiendo los datos contacto_script. tanto desde el front-end (Dreamweaver) como desde el back-end (PHP).php Cuerpo del mensaje 79 .

400"> <FRAME src="archivo_frameset1.w3.gif"> </FRAMESET> 80 .org/TR/xhtml1/DTD/xhtml1-transitional.0 Transitional//EN" "http://www.w3. A este tipo de documentos se les llama frameset. Estos divs son necesarios para ordenar el contenido de la página. El resultado es una página compuesta por varios archivos HTML. La diferencia con respecto a los divs es que cada frame contiene un HTML independiente.01 Frameset//EN" "http://www. 70%"> <FRAMESET rows="200.w3.html"> <FRAME src="archivo_frameset2.dtd"> <HTML> <HEAD> <TITLE>Título del documento</TITLE> </HEAD> <FRAMESET cols="30%. divide los espacios generando distintas áreas que en el maquetado se traducen generalmente en divs contenedores.Manual de Dreamweaver o o Función mail Script completo Clase 26: Frames o cuadros Cuando el diseñador se sienta a pensar en el diagrama de su sitio web.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html. charset=utf-8" /> <title>Título del documento</title> </head> <body> <div>Contenido del documento</div> </body> </html> En un HTML con frameset tenemos un HEAD y un FRAMESET: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.dtd"> <html xmlns="http://www. Composición de un frameset En un HTML común y corriente vamos a encontrarnos con un HEAD y un BODY: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.org/TR/html4/frameset. Los frames son otra opción para diagramar una página.

para indicar las dimensiones de los frames dentro del frameset. Esto significa que el primer frame va a tener un ancho del 30% de la página y el segundo frame un 70%. Tal como escribimos arriba: <FRAMESET rows="200. En rows indicamos el tamaño en altura de las celdas de uno o varios frames. Se puede especificar todo dentro de la misma etiqueta de frameset: 81 . Estas dimensiones se pueden expresar en porcentaje. el frameset puede contener elementos noframes que proveen información alternativa al contenido del sitio en caso de que los usuarios tengan desactivados los frames.html"> <NOFRAMES> <P>Este frameset contiene: <UL> <LI><A href="archivo_frameset1.Manual de Dreamweaver <FRAME src="archivo_frameset3. 400">. las dimensiones se separan con comas). En nuestro código tenemos <FRAMESET cols="30%. 70%">. píxeles o anchos relativos (relative lenghts). Además.gif" alt="Una imagen"> <LI><A href="archivo_frameset3.html">Contenido</A> <LI><IMG src="archivo_frameset2. Cualquier elemento fuera de un frameset debe aparecer después de la primer etiqueta <FRAMESET>. Filas y columnas En los framesets se dan especificaciones de rows (filas) y cols (columnas). Si un frame ocupa todo el ancho de la página se indica con un 100%. En cols se debe indicar el tamaño en ancho de uno o varios frames (si son varios. de lo contrario la esta etiqueta es ignorada.html">Otro contenido</A> </UL> </NOFRAMES> </FRAMESET> </HTML> En el primer frameset se especifica la diagramación general de los frames.

. sino miremos el código… <html><head><meta http-equiv=”content-type” content=”text/html..com/wp-content/uploads/2007/12/3d82 . </FRAMESET> Framesets anidados Tal como existen tablas anidadas (tablas dentro de tablas). 60%"> Contenido del segundo frame y primera celda. </FRAMESET> Contenido del tercer frame. </FRAMESET> Cuándo usar frameset La ventaja de usar framesets se ve más que nada en sitios donde una porción siempre se mantiene igual. Pero no hay nada que no se pueda lograr con un poco de CSS y algunos divs.30%. Al ingresar una búsqueda de imágenes en Google.50%"> El resto de los atributos y definiciones.. podrás ver el sitio fuente debajo y la información tu búsqueda arriba.. Se puede tener una barra latera y un header en frames distintos y el contenido principal en otro. La razón actual para utilizar framesets es cuando necesitamos mostrar contenido de dos sitios diferentes..70%" cols="20%.. charset=UTF-8″><title> Google Image Result for http://www. Contenido del segundo frame y segunda celda.. <FRAMESET rows="40%. ¿Cómo? Creamos la estructura de un frameset principal y dentro de ese frameset incluimos otro frameset con sus propios frames: <FRAMESET cols="20%. 45%"> Contenido del primer frame. 35%..com. Si pensaron que los framesets estaban pasados de moda.Manual de Dreamweaver <FRAMESET rows="30%. Esto se hace con framesets.elwebmaster. fíjense en sitios de búsqueda.. existen también framesets anidados..

document) {try {frames[0]. Por eso."><frame src="http://www.getElementById('logo')) {l = d.getElementById &&d.document.com utiliza framesets en su sección en Links interesantes.}}self.elwebmaster. al igual que Google.}self.Manual de Dreamweaver pack-online-elwebmaster. 3000). También puedes eliminar el frame seleccionando “Quitar marco”.com/2007/12/03>referring page</a> for this image.elwebmaster.elwebmaster. El sitio de viajes en español Viajeros. 83 . En este caso hay únicamente dos frames: En azul se ve el contenido de Google.</script></head><frameset rows="137.elwebmaster.com donde fue publicada la imagen que el usuario busca. 3000). La idea es que cada vez que vez un enlace que está publicado en Viajeros.</noframes></frameset></html> El código que está encerrado entre las etiquetas frameset indican la diagramación del frameset.com/wp-content/uploads/2007/12/3d-packonlineelwebmaster. tengas la posibilidad de votarlo. muestra los links con un frame propio en la parte superior desde donde se puede votar.com.links[0]. You can view the <a href=http://www.var l = d. Google uses frames to display image results.target='_top'.com/2007/12/03&h=125&w=125&sz=3 5&tbnid=Nr08p1hm5R62YM:&tbnh=90&tbnw=90&hl=en&um=1&prev=/images%3Fq%3Delwe bmaster%26um%3D1%26hl%3Den%26sa%3DN&frame=small" scrolling=no marginwidth=0 marginheight=0 onload="var d = frames[0].setTimeout(’checkTopFrame()’. con la imagen pequeña.getElementById('logo').} catch(e) {location = “/error”.com/2007/12/03"><noframes>Your browser does not support frames.document.*"><frame src="/imgres?imgurl=http://www.jpg&imgrefurl=http://www.jpg</title><script>function checkTopFrame() {if (frames && frames[0] && frames[0].domain.if (d.}l. El código rojo muestra la página de elWebmaster.setTimeout(’checkTopFrame()’.

basta de irme por las ramas! Hoy tenemos la clase de tips y ayudas en la que trataré de comentarles algunas buenas prácticas a la hora de hacer una página web. ¡Al punto. Cómo usar el código Este era el primer punto ¿Por qué hice referencia al uso del código? Bueno. También tenemos la posibilidad de sacar el frame exterior de CC seleccionando “Remove Frame”: W3Schools es una web muy completa de recursos HTML. Espero haberlos ayudado con esto de los framesets. Elige la fuente del archivo. ya me dio verguenzita jeje). Ver página >> Bueno. ¿Dudas? ¿Preguntas? Déjalas en los comentarios e intentaré responderlas en breve.Manual de Dreamweaver CreativeCommons hace exactamente lo mismo en su búsqueda de archivos con derechos de copyright menos limitados. en este caso buscaremos una imagen en Flickr… Cuando tengas los resultados de la búsqueda verás el sitio fuente encerrado en un frame dentro del sitio de CreativeCommons. uso y aplicación de frames. allí podrán profundizar un poco más sobre el armado. es difícil de remontar luego de estas dos últimas clases pero trataremos de que les guste (nótese el “trataremos” despersonalizando toda responsabilidad por mi parte. Clase 27: Tips y ayudas ¡Hola muchachos/as! ¿Me extrañaron? Calculo que no¿Qué se le va a hacer? un pequeño mortal contra una diseñadora del mas allá… Pero ¿quién los saluda con tanto fervor y tantas ganas? ¡¡¡Su querido amigo Thor!!! Bueno. 84 . por dos motivos: que teníamos en el temario. eso es todo.

subtítulos. Por otro lado.Hoy por hoy los navegadores más populares (y los no tanto) soportan uso de código inválido a fin de que las páginas se vean mejor en ellos y ganar popularidad entre la gente.4> para títulos. separara los diseñadores webs. el punto es que cuando nombré la W3C en este taller e indiqué su función.3. o tal vez no. los tenga como su navegador favorito y los recomiende a otros. Recuerden el significado de cada etiqueta. Sin embargo todos los navegadores soportan ambos tipos de etiquetas. por el solo hecho de no leerse una hojita de nuevos estándares. Ademas de que la gente en general adopte estos navegadores porque “las páginas se ven mejor”. pueda haber nuevas reglas. sino también. Denle el uso que se merecen a las etiquetas. como ya lo vimos en clases anteriores. tanto sintácticamente (el ejemplo del <br /> de arriba) como semánticamente.2. Si bien la excusa de la “semántica” debería ser suficiente para escribir el código correctamente. No fue un comentario “al vuelo”. Este tip. dijimos que todas las etiquetas tienen un cierre. de los que “hacen webs”. otra excusa importantísima es que los buscadores como por ejemplo Google. hacen uso de los distintos tipos de etiquetas. o un <strong></strong> para poner un texto en negrita. para cuando este taller termine. tenemos el punto dos: 2. pero como estas reglas van cambiando con el tiempo y la gente que hace webs no actualiza sus conocimientos a la par de estas ¿qué sucede? las empresas creadoras de los navegadores soportan código “viejo” para que la gente que se quedó en la historia. La etiqueta <br> actual esta definida de esta manera “<br />” con la barra de cierre al final. mucha gente pone saltos de linea con el tag <br> ¡que no existe! Recuerden que por allá al principio del taller. No usen un <p></p> para poner un título. <h1. porque estas reglas las siguen los buscadores. El mantenerse actualizados. etc. para marcar preponderancia a la hora de poner avisos en nuestras páginas. ¿Algunos ejemplos de este tipo de practicas desactualizadas? Por ejemplo. todos los navegadores deberían atenerse a los estándares de la W3C. mi intención fue que ustedes mismos supieran de qué se trataba y que la usen para mantenerse actualizados. 85 . fue que usaran las etiquetas correctamente. <b> (para negritas) <strong> (para resaltar algo importante). no es solo por el hecho de que el código sea correcto semánticamente. En realidad. Esto nos dejaría como primer tip: ¡¡¡Manténganse actualizados!!! Tal vez.Otra cuestión que también remarqué a lo largo del curso.Manual de Dreamweaver 1.

para que sólo haga lo que necesitan. pero esto lo descubrirán con la práctica). Ahora. el segundo punto que marqué en el temario. el buscador dará preponderancia al nombre del autor a la hora de poner avisos. que no se de donde lo saque pero es un refrán conocido. y reglas a seguir creadas por muchos profesionales y recomendadas por miles de diseñadores web alrededor del mundo. si no es por ser correcto. no metan tags por todos lados ni creen mil divs solo para ordenar una palabra (esta ayuda se la debo a mi compañera de trabajo Daniela). es difícil que la culpa la tenga el estándar HTML del momento. Busquen la simplificación de su código. y compatibles con la mayoría de los navegadores. Recuerden el dicho “el haragán trabaja dos veces”. solo algo relacionado con nuestro nombre. identen cada línea que hagan para que tenga fácil lectura. escriban bien el codigo por interés! jeje Estos creo que son los dos tips que mas importancia tienen para mi a la hora de explicarles. Piensen que si hay toda una serie de especificaciones. si hay algo que aprendí a rajatabla y que descubrí que es una de las cosas más importantes a la hora de trabajar en lo que sea. me despido con el tip principal. Conclusión Bueno. espero que les sirvan los consejitos que les di en esta clase. si ponemos un título entre un <p></p> y el autor en un <h1></h1>. la tengan que reacomodar mañana. y la mejor ayuda que les puedo ofrecer: 86 . Primero que nada. y también hará sus páginas más livianas. que es muy probable que le sea menos importante a la hora de cliquear. utilicen las etiquetas de definición de documento ( <DOCTYPE…). Otra cosa que les puedo recomendar. probablemente el error no sea del lenguaje sino de ustedes y su código (aunque hay casos en que no.Manual de Dreamweaver A modo de ejemplo. no más. en fin. comenten los principios y fines de cada bloque para que puedan encontrarlo en caso de tener que modificarlo. por lo menos. Por el lado de la ayuda. y si no logran hacer algo. es que usen solo los tags necesarios. les puedo decir otro par de cositas. Eso los ayudará en el futuro. no verá en la publicidad nada relacionado con el mismo. y la gente interesada en nuestro articulo. el resto. la página que hagan hoy. y el HTML sea muy extenso. cuando necesiten otros lenguajes como Javascript. Organicen su trabajo y su código. sean ordenados. y el ganar tiempo haciendo las cosas “así nomas” hoy. los descubriran en su propio camino de webmasters. les puede costar el doble cuando tengan que modificar algo. ¡Así que recuerden. hagan las cosas bien… Recuerden que tal vez. es ser ordenado. recuerden que los estilos y el HTML les darán herramientas necesarias para hacer las cosas simples y bien.

el ir descubriendo cosas les sera entretenido en el transcurso de su trabajo. ¡Hasta luego mis fieles seguidores!! Clase 28: Clase Final Y al final. Usen el Dw y el HTML. fuimos viendo diferentes técnicas y usos de Dw y HTML en mayor o menor medida. Desde mi punto de vista. sino mostrar la manera en que se podría llegar a una desición sobre eso. Alegre porque ya están un poquito más cerca de ser webmasters. llegó el final. metanse en foros a discutir ideas. Con la practica y ya sabiendo cómo manejar HTML. y luego me volqué mas para el lado del HTML porque mi intención era mostrarles cómo se crea una página. mas allá de la herramienta que usen. lean y aprendan de errores de otros diseñadores web. o en otros en que no sabemos cómo resolver un tema puntual. Errando y acertando. Además. y ese es el mejor tip que les puedo ofrecer. aprendan de sus compañeros de laburo. o sus compañeros de estudio. Solo entre profesionales se volveran profesionales. A lo largo de este taller. practiquen y practiquen. encontrarán la mejor manera de hacer las cosas. sus conocimientos sobre Dw irán creciendo día a día. o por lo menos espero haberles acercado conocimientos que puedan usar para tomar decisiones o mejorar sus sitios en un futuro no muy distante. Siempre piensen cómo resolver las cosas ustedes mismos. 87 . que más…. busquen el porqué y luego decidan si ese “por qué” esta fundamentado.. planteé el taller como una manera de destrabar en esos momentos en que la cabeza no quiere pensar más. alegre despedida ^_^. No fue mi intención el decir cómo deben hacer tal o cual cosa. Al principio traté de darles información más del lado de Dreamweaver. No hay un “genio” del diseño web que “se las sabe todas”. ¡Buen día para todos! ¿Cómo les va? Hoy nos toca la triste y. para que puedan hacer uso práctico del programa.Manual de Dreamweaver Practiquen. o a ustedes les parece mejor de otra manera. Siempre vamos a tener cosas para descubrir y por eso mi punto de este curso. Nos vemos el martes que viene para la clase final. no importa si en un lugar dice “háganlo así”. a la vez. jueguen con ellos.

http://www. . tal vez.wikipedia.com/support/documentation/es/dreamweaver/ (manuales oficiales sobre Dw y relacionados) .w3c.Manual de Dreamweaver No les puedo decir todas las maneras de hacer las cosas porque. Espero que les haya gustado el taller y que les haya sido provechoso. alguno de ustedes encuentre una manera mejor.http://es. Mi última recomendación es que lean mis recomendaciones ( jaja ).http://www.0 Recomendaciones Bueno. Ojalá que mis clases les hayan aportado un granito de arena en su carrera de webmasters profesionales. busquen recomendaciones de otros y saquen sus propias conclusiones. sino todas.org/wiki/Web_2. pero sí puedo transmitirles mi experiencia y decirles que lo mejor es que hagan la suya propia y que tomen todo lo que tengan a mano para aprender y sacar sus propias conclusiones. 88 .http://es.http://es.org/wiki/HTML (lean ambos juntos para ver diferencias) .adobe. Traten de aprender todo lo que puedan de los demás pero siempre aportando su cuota de pensamiento y análisis para poder inclusive mejorar todos los aportes que incorporen.org/wiki/XHTML (lean ambos juntos para ver diferencias) . ya las fui dando a lo largo del taller. gran parte de las recomendaciones. Conclusión final Y acá llegó la triste hora de la despedida. así que no queda mucho por decir.wikipedia.wikipedia. Recursos Aquí les dejo algunos links importantes sobre las bases de lo visto a lo largo del taller para que tengan de referencia cada vez que necesiten.org/ .