Taller Dreamweaver

Manual de Dreamweaver

1

Taller de Dreamweaver

Clase 01: Introduccin

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 pginas web en su versin CS3,

sin dejar de lado el lenguaje de tags utilizado para la creacin de las

mismas. En este caso veremos el XHTML en su versin 1.0 (eXtensible

Hypertext Markup Language) que es el estndar actual.

A quin 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 composicin del lenguaje, sino tambin pautas a seguir para una

correcta escritura, disposiciones de la W3C, y tips de ayuda a la hora de maquetar una pgina.

Tambin en este curso se har una introduccin al uso de estilos, para luego intersecar con el

posterior curso de CSS.

Utilizacin 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.

Tambin haremos algunas clases taller de ser necesario.

En cada clase se vern temas especficos, diferentes, en los que se darn por sentados los

conocimientos de clases anteriores.

Mi recomendacin personal es que todo tipo de lector, tanto avanzado como principiante, lea

el curso completo, ya que algunos podrn aprender y otros repasar los temas tratados, y a su

vez seguir el hilo sin quedar mal parados en ninguna de las clases. Adems 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 cuestin de estndar, vamos a aprender Dw pero que quede claro que no es el nico

programa que se puede utilizar para crear paginas web, y adems que, sabiendo HTML solo

necesitaramos 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 pginas web.


2

Por otro lado, como la mayora 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 pgina.

Personalmente no recomiendo usar Dw sin antes saber HTML, creo que lo importante es saber

HTML y usar Dw para agilizar la creacin de la pgina, y no usar el Dw para hacer pginas ms

rpido de lo que sera aprender el lenguaje.

No confundamos, Dw es una herramienta y no ms que eso.

En el curso por cada cosa que hagamos en modo visual en Dw iremos explicando su paso en lo

que sera cdigo HTML as poder aprender ambas cosas a la vez.

Conclusin

Bueno, entre esta introduccin y el programa que podrn visitar en esta misma seccin, ya

tenemos un vistazo general del curso que, como deducirn 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 caractersticas 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 ms en profundidad qu es

el lenguaje HTML y cmo se articula con Dreamweaver. Adems

conoceremos qu aspectos trabaja este programa a la hora de crear un

sitio web. Otro punto a tratar son los estndares web y cmo son

interpretados por los navegadores. Manos a la obra!

Qu es Dreamweaver?

Bueno, calculo que a esta altura la mayora de los que estarn siguiendo este curso sabrn qu

es Dreamweaver pero, como no queremos dejar a nadie afuera, vamos a presentar el

programa.

Dw es un editor de pginas web que tiene, entre otras, la caracterstica de poder crear las

pginas web en modo visual.

Las pginas 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

pgina en nuestro navegador para obtener una previsualizacin.

Dw permite mediante su modo visual, no solamente tener lo que estamos viendo actualizado

constantemente, sino que tambin nos permite, mediante sus herramientas, crear el cdigo


3

HTML de manera visual. A modo de ejemplo, ya que esto lo abordaremos ms tarde, podemos

dibujar un encuadre, o crear un texto, aplicar colores, etc. sin escribir nada de cdigo,

utilizndolo como un programa grfico o como si se tratara de un procesador de texto.

Por este modo de crear pginas se dice que Dw es un editor WYSIWYG, porque lo que vamos

viendo mientras creamos la pgina, es lo que saldr en el navegador. Dw se encargar de pasar

todo lo que hagamos a cdigo HTML para que sea interpretado.

Vale aclarar que Dw no es el nico programa que sirve para la creacin de pginas web.

Qu es HTML?

El HTML es un lenguaje de marcado que nos permite preparar documentos web insertando

en l, texto e imgenes en una serie de marcas (tags) que controlan los diferentes aspectos de

la presentacin y comportamiento de sus elementos.

Los tags de HTML se escriben entre signos mayor y menor ( ) y ya vienen

predefinidos de acuerdo con la versin utilizada del lenguaje (nosotros usaremos XHTML 1.0).

Por ejemplo para el cuerpo de una pgina web se utiliza el tag (bastante deducible :P).

Todas las etiquetas de un documento XHTML deben ser cerradas. Qu es cerrar una etiqueta?

Es definir su campo de accin.

Cuando nosotros ponemos una etiqueta como por ejemplo la que tomamos anteriormente,

, estamos marcando el comienzo del cuerpo de una pgina web, pero tambin

debemos indicar el final, y esto es lo que hace una etiqueta de cierre.

En este caso la etiqueta sera , como ven lleva una barra adelante.

Luego cuando abordemos el lenguaje veremos ms cuestiones de sintaxis, por ahora dejemos

esto ac.

Porqu el curso es de Dw/HTML?

Dijimos que el Dw transformaba todo lo que hacamos 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.

Adems 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 cdigo para

poder acomodarlas a nuestro gusto.

Mas all de esto, otros motivos no menos importantes son, por ejemplo, saber lo que estamos

haciendo y, adems, a futuro cuando tengamos que agregar cosas externas, nuestro HTML se

volver mas abstracto (con menos informacin sobre su presentacin) y necesitaremos tener

idea de por qu las cosas estn armadas de tal o cual manera.


4

Pensemos que este curso va a arrancar por lo bajo, a nivel principiante, sin ningn

requerimiento para poder entenderlo ni aprenderlo, pero tambin 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 intencin del curso.

HTML y W3C

El lenguaje HTML se rige bajo ciertos estndares que permiten a los creadores de webs saber

la manera correcta de maquetar sus pginas asegurndose (o casi) , que sern vistasde forma

correcta en prcticamente cualquier navegador actual. Tambin permite a los creadores de

navegadores web, conocer estos estndares y as prepararlos para estar siempre actualizados

y sacar provecho de las ventajas de las nuevas tecnologas que van surgiendo. Establece una

relacin simbitica entre los diseadores y las empresas de software para realizar siempre

productos estandarizados y actuales.

Estos estndares los determina la W3C que es una organizacin que esta dirigida por Tim

Berners-Lee, el creador de varias tecnologas web como URL, HTTP y el mismo HTML.

Conclusin

Hemos llegado al final de nuestra segunda clase, en la que aprendimos las nociones bsicas de

los objetos de estudio del curso.

Ya podramos 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 nmero 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 an no poseen los conocimientos

necesarios para crear una pgina web completa es bueno ir metindose sin miedo en cada

men para tener una idea de para qu sirve cada elemento.

Conociendo Adobe Dreamweaver

1- Barra de men:

File (Archivo):

Es el primer tem de la barra de men.


5

En l encontramos opciones que les sern familiares en su mayora ya que se

encuentran en varios programas de escritorio (Word, Excel, etc).

Tenemos aqu la opcin, New(nuevo), Abrir(open),

Save(guardar),Close(cerrar), y otras no tan comunes, pero que veremos como

acceder a ellas desde diferentes lugares que explicaremos en futuras clases.

Edit(Edicin):

En este men, contamos con las ya conocidas, Copy(copiar), Paste(pegar), Select

All(seleccionar todo), etc.

Adems de las opciones comunes ya tenemos otras que explicaremos con un poco ms

de detalle a medida que las vayamos utilizando durante el curso.

View(Ver):

Este men tiene opciones muy importantes para utilizar a la hora de hacer un sitio

web. Podemos realizar Zoom in/out, activar reglas (rulers), poner una cuadrcula

(grid), o acomodar guas para poder alinear los elementos que tenemos (en modo

visual).

Tambien desde aqu podemos abrir otros paneles tanto del modo visual como del

modo cdigo, que nos servirn para ajustar preferencias de visualizacin entre otras

cosas.

Estas herramientas las van a utilizar mucho y les van a ir encontrando su utilidad a

medida que trabajen con el programa, echen una mirada al men para recordar las

opciones y luego a la hora de usarlas ya sabrn donde estn.

No se preocupen si no entienden alguna herramienta, o el programa no les permite

utilizarla; cuando estemos ms avanzados en el curso haremos alguna clase-taller para

uso de herramientas y comodidad a la hora de usar el programa.

Insert (insertar):

Aqu podremos encontrar varios tipos de objetos para poner en nuestra pgina, como

tablas, imgenes, links, etc.

No vamos a hablar mucho sobre este men ahora porque Dw tiene una barra de

acceso rpido para insertar objetos, y explicaremos las opciones de la misma ms

adelante, por lo tanto sera explicar dos veces lo mismo.

Modify (modificar):

Es el men indicado para editar cualquier cosa que tengamos dentro de nuestra

pgina. Desde aqu podremos cambiarle el tamao a algunas cosas de nuestra pagina,

alinearlas, agregarles links, o eventos (Qu son? Lo veremos mas adelante, jeje).

Text (texto):

En este men encontraremos todas las opciones para modificar texto como si de un

procesador de texto se tratara.

Podremos alinearlo, cambiar la fuente, tamao, color y algunas otras cosas que las

veremos cuando comencemos nuestra primera pgina (Vamos, que no falta tanto!!).


6

Commands:

La verdad que a este men no le encontr demasiado uso. Si bien tiene algunas cosas

(como la de limpiar el cdigo por ejemplo), como este curso va de la mano con HTML

no veo la necesidad de estas herramientas, aunque pueden investigarlas cuando ya

estemos avanzados en nuestra pgina.

Sin embargo creo que hacer bien una pgina, tambin consiste en ir armndola

prolijamente, y no darle un repaso al final para acomodarlo ms o menos y que

siempre nos falte algo por emprolijar.

Site (sitio):

Este men es el que nos permite definir nuestro sitio a la hora de empezar a trabajar

con Dw. Tambin tiene algunas opciones para hacernos la vida fcil a la hora de

trabajar directamente sobre un servidor.

Ms adelante cuando creemos y configuremos nuestro primer sitio, veremos las

opciones detalladamente.

Window (ventana):

Este men tiene todas las herramientas referidas a nuestro espacio de trabajo.

Podemos ocultar o mostrar otros menes, paneles, ventanas y ordenar nuestros

espacios a gusto.

Help (ayuda):

Aqu encontraremos la ayuda que nos ofrece Adobe para utilizar el programa.

Si bien tiene cosas interesantes, yo en mi experiencia personal, nunca us la ayuda, no

slo de este programa sino de ninguno.

Muchas veces porque se pasan de bsicas o se vuelven para expertos. Los casos

restantes, se tornan intiles (:p).

Conozco gente que la ha usado para aprender incluso el uso del programa. Yo prefiero

un tutorial como los que se dan en elWebmaster.com;) hechos por gente que

aprendi como uno lo esta haciendo, y que ya se top con los problemas que nos

topamos nosotros a la hora de usarlo.

Conclusin

Llegamos al final de esta clase, como siempre los espero la semana que viene para seguir

aprendiendo sobre la creacin de pginas web.

Traten de ir familiarizndose con el programa, utilcenlo aunque no sepan hacer una pagina en

s. Es muy importante conocer el entorno de trabajo para no volvernos locos el da que se nos

ocurra hacer algo y no sepamos donde estn las cosas.

senlo, investguenlo, vamos, vamos Anmense!!

Clase 04: Panel Insert, pestaa Common


7

Buenas, buenas! Hoy vamos a presentar la cuarta clase del curso de Dw. La clase pasada vimos

la barra de men con todas sus herramientas (algunas quedaron pendientes para mas

adelante por su complejidad).

Esta semana, vamos a ver los paneles de herramientas que, adems de tener muchas opciones

que todava no conocemos, tiene accesos directos a varias de las cosas que ya vimos la clase

pasada en la barra de men, pero de manera ms fcil y dinmica.

Panel Insert (insertar)

El panel de insertar nos provee de la gran mayora de las herramientas de diseo a la hora de

realizar nuestra web.

Ahora vamos a ir mostrando cada una y diciendo para que sirven. No se preocupen por los

detalles porque mas adelante iremos usando cada una por separado mostrando el uso de

todas sus opciones, y su manejo en HTML. Recuerden que estamos en la fase de presentacin

del programa.

Pestaa Common:

Aqu tenemos una vista del panel con sus pestaas y sus herramientas.

Hyperlink:

Mediante esta herramienta, podemos crear un enlace, por ejemplo, a un sitio externo

(otra pgina), a una parte de nuestra pgina.

Email-link:

Con esta herramienta podemos crear un link a una direccin de email.

Cuando un usuario haga clic, directamente le abrir su programa de mailing

predeterminado (Outlook, Thunderbird, etc.), con la direccin que hayamos puesto

nosotros en el link, listo para mandar el email.

Named Anchor:

Esta herramienta nos permite crear un punto de ancla para luego reconocerlo.

O sea, nos permite marcar nuestra pagina, para luego poner links que vayan a esas

marcas.

Table:

Nos permite crear una tabla con divisiones de columnas, filas, tamaos, y espaciados.

Insert Div Tag:

Nos permite crear el elemento Div, que es uno de los mas usados dentro del diseo


8

web actual. Con el podemos crear cuadros en los que pondremos contenido, para

luego ubicarlos donde a nosotros nos parezca.

Images:

Nos permite insertar imgenes, entre otras cosas (que veremos mas adelante).

Media:

Nos permite insertar animaciones Flash, y otros objetos multimedia.

Date:

Nos permite ingresar la hora actual en diferentes formatos (bastante intil por cierto).

Server Side Include:

Permite incluir un archivo de cdigo por fuera de la pagina actual (ya lo veremos

tambin mas adelante, cuando lo vayamos usando).

Comment:

Sirve para ingresar un comentario dentro de nuestra pgina, que nos sirva de

referencia a nosotros, pero que no afecte a la visualizacin (es una gua para los

desarrolladores, pero el usuario que vea la pagina, no lo ver).

Head:

Con esta herramienta podemos incluir diferentes cosas en la cabecera de la pgina. La

cabecera es la parte de la pgina que no se ver y en la que incluimos especificaciones

como, por ejemplo, el ttulo de la pgina.

Script:

Nos permite ingresar cdigo de programacin dentro de una pgina, como por

ejemplo Javascript.

Templates:

Esta herramienta sirve para crear un template a partir de una pgina que estemos

haciendo, y marcarle regiones editables.

En s, es para crear una base de pgina, sin contenido, para luego usarla con varios

contenidos diferentes, si eso queremos.

Tag Chooser:

Sirve para seleccionar etiquetas HTML (o de otro lenguaje) e insertarlas directamente

en nuestra pgina. No le veo otra utilidad que la de poder insertar una etiqueta, la cual

nos hayamos olvidado el nombre. Innecesario, pero est :p .

Conclusin


9

Esta parte del taller es bastante larga, porque son demasiadas las herramientas a mostrar y la

verdad que como este curso es para todos los niveles no quiero dejar nada afuera.

Los que vengan siguiendo el curso semana a semana y no sean principiantes, tal vez se aburran

un poco, aunque pueden repasar; 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 exploracin de los paneles de herramientas, y luego

empezaremos con nuestro sitio.

Clase 05: Panel Insert, pestala Layout

Y aqu estamos de nuevo! Volvemos con todo en nuestra clase 5. La clase pasada vimos la

primer parte del panel insertar, la pestaa common. Hoy nos toca seguir con las dems

pestaas, y ver hasta dnde llegamos.

Me gustara que los que siguen o leen el curso enven sus preguntas o comentarios; las dudas

que tengan. No se queden con las ganas, el curso est hecho para ustedes, y si no aprenden,

de nada sirve el curso entonces. Entre todos podremos aprender y ensear.

Panel Insert (insertar), segunda parte.

Pestaa

Layout:

Mode:

Nos permite poner el modo de visualizacin del panel de layout.

Insert Div Tag:

Nos permite crear el elemento Div, que es uno de los ms usados dentro del diseo

web actual. Estos son cuadros en los que pondremos contenido, para luego ubicarlos

donde a nosotros nos parezca. Esta opcin ya la vimos en la pestaa common, en

la que tambin se encuentra.

Draw AP Div:

Nos crea un elemento Div en el lugar en el que nosotros lo dibujemos a mano alzada.

Se usa en modo visual como si se tratara de una herramienta rectngulo de un

programa de edicin grafica. A veces no da el resultado deseado, as que conviene

usar esta herramienta con cuidado.


10

Spry men bar:

Nos crea una barra de men desplegable, en la que al pasar por un elemento del

men, se despliega otro con ms opciones. La verdad no es la manera en la que yo la

hara pero puede sacarnos de un apuro. Ms adelante veremos como hacer este tipo

de menes, pero ms lindos :p .

Spry tabbed panels:

Esta herramienta es parecida a la anterior, pero en vez de crearnos un men

desplegable, nos crea una barra de pestaas.

Spry accordion:

Otro de los regalitos de Dreamweaver para decorar festivamente nuestra pagina (ya

me enoj con tanta cosita inservible). Esta herramienta nos agrega un men en

forma de acorden, que cuando clickeamos cada una de las pestaas, el men se

desplega hacia abajo abriendo un lugar en donde podemos agregar contenido. Es

difcil de explicar su utilizacin, por ah lo ms prctico sera que lo prueben una vez

que aprendamos a crear una pgina.

Spry collapsible panel:

Esta es la que ms me gusto de todas las spry. Nos crea una pestaa que cuando la

cliqueamos, se nos abre una caja lentamente hacia abajo, en la que podemos poner

contenido. Es una especie de spry accordion pero de un solo botn.

Table:

Nos permite crear una tabla con divisiones de columnas, filas, tamaos, y

espaciados. Esta herramienta tambin se encuentra en la pestaa common que

vimos y explicamos la clase pasada.

Insert row abobe:

Esta herramienta nos deja insertar una fila debajo de la fila en la que estemos

parados actualmente. Siempre dentro de una tabla por supuesto.

Insert row below:

Al contrario de la anterior, esta herramienta nos deja incluir una fila por encima de

donde estemos parados actualmente en la tabla.

Insert column left:

Agrega una columna a la izquierda de donde estemos parados en nuestra tabla.

Insert column right:

Agrega una columna a la derecha de donde estemos parados actualmente en nuestra

tabla.


11

Frames:

Nos permite crear frames, que son divisiones de nuestra pgina en la podremos

cargar otras pginas diferentes.

Iframe:

A primera vista son parecidos a los frames ya que crean una divisin en nuestra

pgina donde podemos cargar una segunda, aunque tienen diferencias muy

importantes. Ya veremos a ambos ms adelante y sus ventajas y desventajas.

Conclusin

Bueno, por ahora dejemos la clase aqu. Como vern las opciones de Dw son muchas, y

todava nos quedan muchas ms. Esperemos terminar pronto de verlas a todas as ya

podemos crear nuestra primer pgina, empezar a ponerlas en accin, y comentar un poco

ms a fondo cada una.

Clase 06: Panel Insert, pestaas Forms

Hola! Cmo andan? Preparados para otra clase de Dreamweaver? En esta clase, la numero 6,

vamos a ver maaas herramientas del panel Insert.

Y s son muchas herramientas, pero a no aflojarle, que esta es la parte ms pesada pero es

importante un reconocimiento de la interfase para ya ir sabiendo por lo menos los nombres y qu

son cada una de las herramientas, as cuando las expliquemos a fondo con sus usos, no nos sonarn

a chino mandarn.

Hoy nos toca revisar las herramientas de la pestaa Forms, y si podemos llegar a ver la pestaa

Data, mejor, as sacamos esto mas rapido, y ustedes que siguen el curso tienen ms para

estudiar durante la semana (me imagino que estarn probando las cosas que vemos en cada taller

no? jeje).

Panel Insert (insertar), tercera parte. Pestaa Forms:

Form: A que no saben para que sirve esta herramienta? Correcto! para insertar un

formulario. Podemos usarla tanto en modo de diseo como en modo cdigo.

Los formularios nos sirven para que los usuarios puedan cargar datos, y as nosotros recibirlos

desde nuestra pgina.

Cuando un formulario es enviado, enva todos los elementos del formulario con l.


12

TextField: Un textfield es un elemento de formulario, es el lugar donde se puede

escribir texto, para que luego sea enviado por nuestro formulario.

Este elemento va dentro de un formulario, y cuando este se enva, enviar con l todos los

textfields tambin.

Un ejemplo de un TF para que tengan una idea es el lugar donde ponen su nombre o su nickname,

cuando se registran en una pgina.

Hidden Field: Un Hidden Field es un TextField, slo que tiene una propiedad que lo

hace oculto, as el usuario no lo puede ver, ni cargarle datos.

Sirven para nosotros, los administradores de sitios web, para poder precargarle informacin que

necesitemos, un ejemplo fcil, qu navegador esta usando (en realidad es mas til que eso pero ya

lo veremos).

Text-Area: Un Textarea es un campo muy parecido a un textfield, slo que es ms

grande, y tiene no solo una fila sino que puede tener varias.

Sirve para contener textos grandes y tambin nos ofrece barras de scroll para poder setearle un

tamao, y si el texto excede el tamao del Text-Area, poder navegarlo con las barras.

Checkbox: Un checkbox nos permite poner una cajita de checkeo (como las que

aparecen al lado de acepta los trminos y condiciones estas sirven para que el usuario

seleccione una o mas, entre varias opciones.

Radiobutton: es igual que un checkbox, slo que permite elegir uno y solo uno entre

varios radiobuttons. Adems, clickeando uno seleccionado, no se deselecciona (como pasa con los

checkbox), aunque s lo hace cuando clickeamos otro radiobutton del grupo.

Radiogroup: es un atajo que nos brinda Dw para poder poner varios radiobuttons que

pertenezcan a un mismo grupo, y adems nos pone cada radiobutton entre las etiquetas label

que nos permiten dar una identificacin a cada uno.

List-menu: Nos permite poner un men desplegable de seleccin para que el usuario

pueda elegir entre una de las opciones que le pongamos. Se usan mucho en los registros para

seleccionar la fecha de nacimiento.

Jump-menu: es como un list-menu, solo que sus opciones nos permiten llevar a quien

las elija a otra pgina, u otro archivo.

Por ejemplo, podemos tener una lista de opciones de varias pginas, y que cuando el usuario

clickee una en el men, lo lleve directamente.

Image-field: Es un campo en el que podremos poner una imagen, y que al clickearlo

enviara el formulario con lo que tengamos cargado.


13

En s, sirve como botn de enviar pero con la diferencia que podemos ponerle la imagen que

nosotros queramos.

File-field: Inserta una casilla con el botn de examinar para que el usuario pueda

buscar y enviar un archivo a nuestro sitio.

Button: nos permite insertar un botn, que va a tener varias funcionalidades que

podremos elegir. Por ejemplo, enviar el formulario o borrar los campos del mismo entre otras

cosas.

Label: sirve para poner una descripcin a un campo, a modo de ejemplo:

Acepta los trminos? Aquel texto es un Label de la checkbox.

Fieldset: La herramienta fieldset nos permite agrupar campos de un formulario.

Podemos crear un Fieldset y dentro poner los text-fields de datos del usuario, crear otro fieldset y

poner los checkbox de preferencias, otro textfield y poner el boton de enviar formulario o

borrar formulario.

Spry validation textfield: esta opcin nos permite agregar un campo de texto

(textfield) que adems de permitir que el usuario ingrese datos, podemos seleccionar que tipo de

datos debe contener el campo y, si el usuario ingresa otra cosa, cuando intente enviar el

formulario, le saldr un cartel de error.

Esto sirve por ejemplo si queremos que el usuario ingrese un email en nuestro campo, que ponga

realmente un email y no cualquier cosa.

Spry validation textarea: Esta opcin nos permite crear un textarea con validacin. Al

igual que el anterior si el textarea no cumple con los requisitos de validacin, al intentar enviar el

formulario nos dar error.

Spry validation checkbox: y seguimos con validaciones. Es igual a un checkbox comn,

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.

Conclusin

Bueno, espero que no estn muy cansados de ver tantas herramientas (yo si :p ) y no se preocupen

(o preocpense) porque vienen muchas ms!!

La clase que viene espero que ya estemos terminando con el panel Insert y ya dar comienzo a la

creacin de nuestra primera pgina.

Vayan practicando las cosas que vimos, mirando como funcionan y sus opciones.


14

No se queden solo con lo que vemos ac y nada mas, vanlo en vivo y en directo desde el Dw, as

pueden entender todo lo que hace el programa, y si se animan, vanlo en modo cdigo as se van

familiarizando con el HTML.

Clase 07: Pestaa Text y Favorites

Buenas y santas! Bienvenidos a otra clase de Dreamweaver/HTML. Esta vez nos toca

(para variar) seguir con la barra de Insertar. Hoy aprenderemos de qu se tratan las

pestaas Text y Favorites.

La pestaa que nos tocara ver hoy sera la pestaa Data pero la vamos a dejar para ms

adelante, porque requiere para varios de sus elementos, conocimientos de bases de datos, e

inclusive, tener creada una base de datos.

Como todava estamos en la parte principiante de nuestro curso, la seccin Data no la

podemos explicar. Sera perder el tiempo ya que se entender mejor ms 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

ms importantes para esta etapa.

Vamos a pasar directamente a la pestaa Text y veremos tambin la pestaa Favorites,

para dar por terminado (por el momento) el panel Insert.

Panel Insert (insertar), cuarta parte.

Pestaa Text:

Bold: Nos inserta un tag HTML texto que nos muestra en

nuestra pgina el contenido en negrita (en el ejemplo sera texto).

Italic: Inserta los tags en los cuales su

contenido se ver en estilo itlica.

Strong: Es exactamente lo mismo que Bold.

Esta es una de las cosas inentendibles que tiene Dw.

La realidad es que el Bold debera tener el tag (que existe y tiene el mismo

efecto que el strong) y el strong, tener el , valga la redundancia.

Emphasis: De nuevo.

Es exactamente lo mismo que el Italic.


15

Ac vamos a hacer un parate. Por qu? Quiero explicar un par de cositas:

En realidad el lenguaje HTML tiene un tag y un tag en los

cuales al ponerles texto dentro, este se ver en negrita.

Lo mismo sucede con el y el , y las itlicas.

Entonces porque existen diferentes?

La respuesta es que como son tags comnmente usados dentro de los textos de una

pgina web, es bueno poder definirles caractersticas especiales para poder usarlos en

diferentes ocasiones.

A ver, un ejemplo para que quede ms claro:

Yo quiero que las citas de mi pgina aparezcan en itlica y los nombres propios

tambin. Adems, quiero que los textos citados aparezcan ms chicos.

Entonces, yo puedo predefinir a el tag con un tamao de letra menor (ya

veremos cmo) y luego slo necesitara poner las citas entre (itlica con tamao

menor) y los nombres entre (solo itlica), y tendra a ambos con itlica, y

las citas tendran a su vez fuente mas chica.

Adems, tambin existen por una cuestin semntica:

Por ejemplo, si trabajara en una revista y tengo que reforzar un encabezado que dira

Taller de Dreamweaver, lo refuerzo en negrita con un , ahora si tengo que

reforzar un encabezado que dice Meteorito se dirige a la tierra, lo reforzara con un

. Solo por el valor semntico de la palabra.

Los tags a nivel semntico prcticamente no se usan salvo por gente muy purista, pero

estara bueno acostumbrarse a trabajar as, ya que una vez que se nos haga costumbre,

estaramos haciendo un trabajo prolijo, sin necesidad de un esfuerzo mayor.

Bueno, terminada esta no-breve explicacin, sigamos con las opciones de la pestaa.

Paragraph: Nos pone un texto seleccionado entre los

tags (o bien, si no tenemos ninguno seleccionado, nos crea los tags vacos para

que escribamos dentro).

Estos tags conforman bsicamente, un prrafo.

Block-quote: Block-quote nos crea un bloque con

margen izquierdo en el cual podemos meter texto. Este sera el resultado.


16

Este texto sera un prrafo normal.

Aqu tendramos el blockquote en accin.

Siempre que escribamos dentro del blockquote mantendramos el margen para

ordenar el texto.

Preformatted Text: El texto que escribamos dentro de

los tags de preformatted text () se va a mostrar en una letra con un buen

espaciado y muy legible. Adems, los espacios que pongamos entre palabras u

oraciones sern respetados.

Ac vamos a hacer otro parate.

Cuando nosotros escribimos en HTML un prrafo, por ejemplo:

El da esta nublado.

Pero a mi me gusta igual.

En nuestro navegador se mostrar:

El da esta nublado. Pero a mi me gusta igual.

Ntese que la bajada de lnea (el enter) no fue tomado por el navegador.

A tener en cuenta, el navegador no toma por ejemplo, los enters como bajadas de

lnea ni los espacios de la barra espaciadora, como espacios reales (slo toma un

espacio como real).

Para poder hacer un enter (bajar una lnea) en nuestro texto y que se vea en el

navegador tenemos que insertar el tag y para hacer un espacio adicional en un

entre dos palabras, tenemos que escribir

Volviendo al ejemplo anterior, para que en nuestro navegador salga la oracin tal cual la

escribimos arriba, deberamos poner en el HTML:

El da esta nublado. Pero a mi me gusta igual.

El resultado de esta oracin si sera el siguiente.

El da esta nublado.

Pero a mi me gusta igual.

Volvamos con las pestaas.

h1, h2, h3, : Sirven para marcar cabeceras, el h1 se utiliza


17

generalmente para los ttulos de mayor relevancia en una pgina, y los sucesores

(h2,h3,) para los subttulos encadenados o textos de menor importancia con respecto a

los anteriores.

Adems, los h ponen el texto en mayor tamao (de acuerdo con su numeracin, el 1

es el ms grande) y formateado en negrita.

El tag que utilizan es el , ,

Unordered list: Nos crea una lista desordenada.

Esto quiere decir, sin numeracin.

A modo de ejemplo:

Item 1

Item2

Ordered list: Nos crea una lista ordenada.

A modo de ejemplo:

1. item 1

2. item 2

3.

List item: es el tag que va a encerrar cada uno de los

elementos de una lista. Cuando creamos una ul o una ol esta nos indica el tipo de

lista, y cada uno de los li dentro de esos tipos, va a crear una lnea de ese tipo.

En los ejemplos anteriores, cada tem es un li, que difiere por su ordenamiento

(puntos o nmeros respectivamente, aunque pueden ser otros).

Definition List, definiton term, definition description: Sirven para crear

una lista de definiciones.

La dl, definition list, crea el ttulo de la lista.

La dt, definition term, crea el trmino a definir.

La dd, definition descripcin, crea la descripcin del trmino anterior.

Estas 3 funcionan en conjunto, a modo de diccionario.


18

Pongo un ejemplo para que lo puedan entender:

Diccionario (esta es la dl)

Dreamweaver: (esta es la dt)

Programa para maquetacin de pginas web, creado por adobe. (esta es la dd)

HTML: (esta es otra dt)

Lenguaje de maquetacin web. (esta es otra dd)

En general las Definiton list no son muy usadas por una cuestin de que la gente

encuentra los mismos resultados usando otros tags, pero esta bueno conocerlas porque

muchas veces nos pueden sacar de un apuro.

Abbreviation: esta opcin nos permite poner el tag

con un ttulo dentro del primero.

Quedara

Entonces nosotros podemos poner una palabra abreviada entre los dos tags, y la palabra

entera en el atributo title.

De esta manera, solo nos escribir la abreviatura, pero si pasamos el Mouse por encima,

nos mostrar la palabra completa en un recuadro amarillo.

Ejemplo: Dw

Acronym: Funciona exactamente igual al tag anterior.

Su escritura en HTML es


19

Pestaa Favorites:

En esta pestaa, presionando clic derecho, se nos abrir un men, en el cual, 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.

De esta manera podremos hacer una pestaa con nuestras opciones ms usadas y no

depender del orden en que las puso Dw.

Prueben de hacerse una pestaa ustedes mismos con lo que prefieran, y si no les sale,

recuerden que pueden dejar comentarios en la pgina, que los responder lo mas rpido

que pueda.

Conclusin

Bueno, estas pestaas, si bien son de fcil uso, nos llevaron unas cuantas lneas.

Estara bueno que vayan usandolas (por lo menos la pestaa text), as adems de repasar

las cosas que vimos hoy, van incorporando mas rpido los tags HTML.

Nos volvemos a ver la semana que viene ya con tema nuevo para alegra de todos!! (o

por lo menos ma :p)

Saludos!

Clase 08: Estableciendo un rea de trabajo

Buen da a todos! Cmo van mis fieles seguidores del taller? Me imagino

que habrn estado practicando! Ya que por fin terminamos con nuestra

querida barrita Insert, podemos empezar a movernos un poco ms sobre

Dreamweaver y ver lo que vayamos aprendiendo en pantalla.

Eso s, me ponen en prctica todo lo que veamos en las siguientes semanas,

miren que es muy fcil seguir este taller, pero es muy fcil tambin olvidarse

lo que aprendemos! (bah, yo tengo mala memoria :P).

Preparndonos para nuestro primer sitio Y lleg la hora de armar nuestro primer sitio para investigar las herramientas y para que veamos

juntos un poco ms de cerca lo que vamos enseando clase a clase.


20

Para empezar, podramos ir al men File/New y crear un nuevo archivo HTML, pero no vamos a

hacer esto.

Como vamos a crear un sitio web, no podemos crear un HTML cualquiera y despus andar copiando

o pegando archivos de un lado para otro.

Lo que hay que hacer es definir una carpeta para nuestro sitio, y luego le diremos a Dw que

carpeta es esta, as el programa ya reconocer en dnde estamos trabajando.

Para esto, creamos en algn lugar de nuestra PC (o en nuestro server en caso que trabajemos

directamente online), una carpeta en la que vamos a guardar TODO nuestro sitio.

Yo en el curso voy a trabajar sobre /Mis Documentos/sitios/Taller.

Bueno una vez que tengamos la carpeta creada, volvemos al Dreamweaver.

Vamos al panel de la derecha, y elegimos el men Files.

De aqu se desprenden varias opciones. La que nosotros vamos a elegir es Manage Sites.

Una vez seleccionada esta opcin nos va a aparecer una ventanita en la que vamos a elegir

New, se despliega un men en el que seleccionamos site, y ah se nos abrir una ventana

mas grande en la que definiremos el sitio.


21

En nuestro caso, solo vamos a necesitar definir solo dos cosas. 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).

El resto de las opciones no es necesario tocarlas para esta instancia, pero lo que s debemos tener

en cuenta es que la opcin de Cache debe estar seleccionada.

Luego de esto, damos clic en Ok para finalizar la creacin del sitio.


22

Se nos cerrara el men grande de definicin de sitio, y nos quedaremos solo con el chico, en donde

ahora, tendremos creado el sitio Taller.

Lo seleccionamos y presionamos Done para ya por fin, poder empezar a trabajar con l.

Una vez que ya tenemos creado nuestro sitio, podremos ver que en el panel de la derecha, en la

seccin Files ha quedado establecido, listo para crearle archivos dentro.

Cliqueando con el botn derecho en nuestra carpeta principal del sitio abriremos un men con el

cual, ahora s, podemos empezar a crear archivos.

Como se puede ver yo ya cre uno de muestra y sobre el que voy a trabajar la clase que viene, que

se llama index.html.

Conclusin

Bueno, ya hemos definido el sitio y creado nuestra primer pgina.

Estamos listos ya para empezar a manejarla, a conocer sus modos de trabajo y muchas cosas ms.

Los espero la prxima semana ya con pgina en mano, para conocer el modo diseo de trabajo,

y comparar algunas cosas con el modo cdigo tambin.

Ya podramos decir que estamos en la segunda fase de este curso (segunda de muchas!).

Clase 09: Trabajo en modo diseo

Hola, gente querida! Cmo andan? Una vez ms, sean bienvenidos a otra

clase del Taller de Adobe Dreamweaver. El martes pasado aprendimos


23

cmo crear la pgina de inicio de nuestro sitio web, la famosa index.html.

Bueno, hoy nos toca, ya con la pgina creada en la clase anterior, ver el modo de vista de diseo.

Vamos a tratar de conocer un par de caractersticas iniciales, y otras cositas predeterminadas de

Dreamweaver.

Antes de empezar vamos a dejar una imagen de nuestra pgina en blanco, en modo de vista

diseo, para tener de referencia a lo largo de esta clase.

Cuando creamos una pgina en blanco en Dw, en realidad lo que parece blanco no es tal, porque la

vista de diseo lo que realmente nos muestra es el cuerpo de la pgina.

Sin embargo, hay otras partes que no estn especficamente dentro del cuerpo, como por ejemplo

el ttulo.

En la siguiente foto vamos a ver lo que realmente est en nuestra pgina y que la vista de diseo

de Dw NO nos muestra.

Como se puede ver, hay mas cosas.


24

En principio podemos ver un tag que comienza con


25

Hola, mis fieles seguidores (y a los nuevos tambin!) Cmo les va? Espero

que bien, por supuesto. Hoy nos toca revisar la vista de cdigo. No se

asusten al escuchar (o leer, en este caso) esta palabra.

Primero porque hoy slo veremos el rea de trabajo y las opciones de

manejo del cdigo y no el cdigo en s, y segundo porque una vez que

empecemos a usarlo, vern que no es tan complicado como pensaban.

Calculo que todos tendrn su sitio definido con su index.html en blanco (que recuerdan que no

era tan blanco?) No lo tienen?? A leer clases anteriores!

Lo tienen??? Esos son mis alumnos!!! ^_^

Bien, vamos a dejar una imagen de la vista de cdigo como referencia durante la clase:

En la vista de cdigo, la parte superior de la ventana es igual a la de la vista de diseo, salvo que

no tenemos las visual aids (el ojito) que son ayudas visuales especificas del modo de vista de

diseo.

En el rea de trabajo lo primero que podemos ver es que desaparecen las reglas y aparece un

numerado de lneas en su lugar, de gran ayuda a la hora de posicionarse en el cdigo en

documentos muy extensos.

Otras cosas que desaparecen, obviamente, son la manito, la herramienta de seleccin (la flecha

negra) y el zoom.

Lo nuevo es el panel de la izquierda con opciones especficas para el manejo de cdigo.

Vamos a seccionarlo por partes e ir explicando sus principales usos:


26

Open documents:

Nos despliega un men con una lista completa de los archivos abiertos con su ruta completa.

Collapse Tag, Collapse Selection, Expand All:

Estas tres herramientas nos sirven para poder acomodar el cdigo de nuestra pgina as no nos

molesta a medida que avanzamos en nuestro proyecto.

Cuando estamos parados en un tag o tenemos una seleccin y presionamos el botn

correspondiente, Dw lo que har es minimizar esa seccin de cdigo en una sola lnea y nos avisara

que tiene mas en su interior colocando , tres puntos al final.

Adems nos agregara el signo + en el lado izquierdo para poder expandir esa seccin.

El botn Expand all, expandir TODAS las partes que tengamos colapsadas.

Cdigo normal

Cdigo minimizado

Select parent tag, Balance braces:

El primero marcar una seleccin completa del tag padre en el que estemos posicionados con el

cursor (desde la etiqueta de apertura hasta la de cierre), y a medida que lo vayamos apretando

una y otra vez, ir seleccionando cada padre correspondiente a la actual seleccin.

Por si no saben a que me refiero con padre, la frase Untitled Document es hija del tag

y el tag es hijo del tag . *(foto de cdigo normal)

Balance braces sirve para, cuando programamos en un lenguaje que usa llaves {} (javascript,

php), si estamos parados entre 2, presionamos el botn y selecciona todo el contenido de las

mismos.

Es muy til a la hora de buscar el comienzo o fin de un bloque, pero en fin, no nos servir para

HTML.

Line numbers, Highlight invalid code:

El primero esconde la barra de numeracin de lneas que est a la izquierda.

El segundo, nos marca el cdigo errneo resaltndolo en amarillo.


27

Apply comment, remove comment:

Sirven para agregar un comentario nuevo (o comentar una seccin seleccionada), y a la inversa,

para remover un comentario, o remover los comentarios de un rea seleccionada.

Wrap tag, Recent snippet, 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 botn.

Por ejemplo escribimos un texto, lo seleccionamos, apretamos el botn, elegimos el tag de prrafo

() y encerrar todo el texto dentro de esos dos tags (apertura y cierre) transformndolo en

un prrafo.

Recent snippet nos despliega una lista de los snippets que hayamos usado recientemente, o nos

muestra el panel de snippets de Dreamweaver.

Los snippets son cdigos predefinidos de diferentes cosas y en diferentes lenguajes.

A modo de ejemplo, podemos insertar desde el panel de snippets un snippet javascript que

deshabilite el botn derecho en nuestra pgina, u otro snippet que agregue un formulario

predefinido, y muchos elementos HTML mas que nos pueden servir para ahorrar tiempo a la hora

de escribir.

Si algo no entienden sobre esto no duden en poner comentarios al respecto que me extiendo sobre

el tema. No lo hago ahora mismo porque no es el punto de la clase y debemos explicar todos los

elementos de la barra por igual.

El tercer botn, Move or convert CSS, 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, se los cuento

por si quieren investigar), o pasar cdigo CSS de un archivo a otro.

Ident code, Outdent code, Format source code:

Estos tres botones son realmente tiles a la hora de trabajar con grandes proyectos en los que

necesitamos tener el cdigo ordenado.

Ident realiza una tabulacin hacia la derecha de la lnea o la seleccin que tengamos.

Outdent, lo contrario, remueve una tabulacin.

Y por ultimo, Format source code, preformatea el cdigo a la manera predefinida de Dw, aunque

se pueden modificar varias opciones de esta herramienta.

Les dejo una imagen de muestra para que sepan lo que es un cdigo identado.


28

Como pueden ver, cada elemento que se encuentra dentro de otro, esta tabulado una vez ms que

su padre (tag que lo contiene).

En trabajos con cdigo muy largo, el tenerlo bien identado es una ayuda MUY GRANDE.

Es bueno que se acostumbren a identar el cdigo ustedes mismos, sin la ayuda de la herramienta

de Dw, pero bueno, si se olvidan, esta herramienta es de GRAN ayuda.

Conclusin

Bueno, ac terminamos de ver el rea de trabajo del modo cdigo. Mas adelante cuando

empecemos a agregar elementos a nuestra pagina iremos viendo las diferencias entre lo que

agregamos en modo visual, y lo que sale en modo cdigo y viceversa.

A su vez iremos utilizando estas herramientas, as que es importante que las vayan aprendiendo y

si no las quieren usar en un futuro, porque se acostumbran a trabajar a su manera (cada uno hace

las cosas diferentes ) pues, no les molestar en nada saber algo ms.

Clase 11: Modo cdigo o modo visual?

Y nos volvemos a encontrar en la clase nmero 11 del Taller de Adobe Dreamweaver!!! Me

alegro de que todava estn aqu, y los que no estn de todos modos no van a leer esto as que no

importa.

Esta clase es especial porque, adems del tema de hoy, responderemos la duda de nuestro

seguidor Nelson, que nos pregunt cul sera el tamao adecuado para hacer una pgina. Como

creo que la respuesta merece su espacio decid incluirla al final de esta clase.

Comparacin Empezar el contenido de esta clase con el ttulo comparacin, no es lo que mas me gust, pero

bueno, es lo que es, aunque no lo es tanto CMOOOO?? Ahora les cuento:

Si bien Dw permite llegar a hacer una pgina completa en modo visual, no es mucho lo que vamos

a lograr de esta manera.

Cualquiera que pretenda hacer una pgina (decente), usando Dw o cualquier otro programa, va a

necesitar saber al menos un mnimo de HTML.


29

Por ende, no podemos considerar el modo cdigo o el modo visual como diferentes maneras de

hacer una pgina, ya que lo ideal es usar, de ambos, las cosas que nos resulten ms tiles.

A eso me refera con que no me gustaba la idea de comparacin entre una manera y otra de hacer

las cosas, ya que son complementarias.

A la larga, la realidad nos dice que el modo visual prcticamente se resume a la escritura de

texto, ya que Dw nos cambia los caracteres no vlidos para HTML por sus correspondientes

reemplazos (por ejemplo los acentos, entre otros) ya que el resto de las opciones nos resulta ms

rpido manejarlas desde el modo cdigo.

Como bien dijimos ms arriba se puede llegar a una pgina completa en modo visual, pero poco a

poco cuando vayan ganando experiencia, vern que este modo les va quedando chico, y se pasarn

al modo cdigo exclusivamente.

De aqu que el taller adems de Dw planea ensear HTML.

Como todo, podremos hacer ms rendidor el programa, cuando tengamos un uso considerable de

l.

Piensen que usndolo seguido y acostumbrndose a un modo de trabajo, pueden customizar sus

herramientas, o saber dnde estn las que siempre usan y agilizar la creacin de sitios web.

Conclusin Creo que la respuesta al ttulo de esta clase sera Modo cdigo, pero no nos vamos a encasillar

tanto.

Al principio (o no), puede que haya mucha gente que considere ms practico el modo de vista de

diseo, y a la larga tal vez muchos lo sigan usando para alguna que otra cosa.

Lo que s cabe destacar es que el conocimiento del cdigo, su estructuracin, y el poder abstraer

lo que se ve en pantalla y poder visualizarlo cuando vemos cdigo, va a determinar el punto en

que pasemos de principiantes a avanzados dentro de la maquetacin de pginas web.

Agregado especial!! Creo que este aadido es muy importante y, aunque no tenga que ver con Dw o con HTML, es

importante saberlo, ms an ahora, aprovechando que recin estamos creando nuestra pgina,

para empezar con todas las cosas bien hechas :p.

Gracias a Nelson (un seguidor del curso), quien nos pregunto cual era el tamao ideal para una

pgina normal, vamos a incluir en esta clase, la respuesta a su pregunta como agregado especial o

tip:

Tamao ideal de una pgina


30

Una pgina no tiene un tamao preestablecido aunque se pueden encontrar muchas pginas que

tienen el mismo ancho o largo que otras, debido a una no-arbitraria eleccin de los diseadores a

la hora de empezar a trabajar.

Lo principal a pensar a la hora de hacer un diseo de una web es quin va a ser el usuario de esa

pgina y, como no lo sabemos (aunque tal vez podemos armar un perfil de posible user), tenemos

que calcular un usuario promedio.

Es por esto que uno siempre trata de realizar su pgina en un tamao acorde a las masas o al

perfil general de nuestros usuarios.

Hoy por hoy un gran porcentaje de gente, usa una resolucin de pantalla de 1024 x 768px, y

convendra disear una pgina en la cual el contenido, o la informacin relevante sea visible

dentro de ese tamao, para luego abarcar otras resoluciones, con auxilios grficos, para

completar.

Es muy conocido el tipo de pginas de cuerpo centrado con extremos que completan el diseo.

Como podemos ver en la imagen, tenemos una parte central que se adeca al formato de 1024px

de ancho de pantalla.

En esta pgina son 950px reales, se deja margen para la barra de scroll que puede surgir si la

pgina crece hacia abajo (como ven se toman en cuenta varias cosas).

Tambin podemos ver, que los costados del centro de la pgina, no se dejan descuidados, sino que

tambin tienen un motivo grafico, que termina de rellenar la pgina en caso de que el usuario

tenga una resolucin mas grande (1280 x 1024, 1600 x 1200, entre otros).

Prueben ver la pgina en diferentes resoluciones de monitor para tener una idea ms clara (ac les

dejo el link http://www.videosjaja.com).

Otro punto a tener en cuenta es la gente que an usa resolucin de 800 x 600px que, aunque no

los consideramos como mayora en nuestro modelo de usuario promedio, debemos tomarlos en

cuenta de todos modos.

Por ende, el contenido de mayor relevancia, debe estar considerado dentro de los 750px del

body de nuestro sitio.

Y vuelvo a hacer referencia a la pgina de la imagen anterior. Podrn ver que el panel de registro,

inicio, subir videos, categoras, etc., todas se encuentran en un rango de visin accesible para la

mayora de los usuarios.

Retomando: el tamao de nuestra pgina puede depender de varias cosas.


31

A medida que vayan aprendiendo a los golpes, van a ir mejorando sus diseos.

No olvidemos que no se puede ser programador, diseador, maquetador, todo de la noche a la

maana.

Yo recomiendo que vayan poco a poco investigando de acuerdo a lo que vayan necesitando y, por

supuesto, leyendo y escuchando recomendaciones de otras personas que ya pasaron por las etapas

que estn pasando ustedes.

Como dije al principio del curso (creo) aprender Dreamweaver no los va a hacer diseadores web

profesionales, ya que Dw es solo una herramienta, pero s los va a ayudar mucho.

En s, ser un buen Webmaster, depende de muchas cosas que se hacen con la experiencia y esta se

hace ponindole ganas y tratando de aprender todo lo que se pueda (principalmente siguiendo

este taller, jeje).

No duden en seguir preguntando y ojal salgan ms comentarios como este, que nos dan tema para

agregar en nuestras clases y hacerlas ms tiles y a la medida de ustedes que siguen nuestro curso

y que sern los futuros webmasters.

Clase 12: Etiquetas ms usadas (1)

Buenas! Bienvenidos al Taller de Adobe Dreamweaver/HTML! Cmo

andan? La pasaron bien el fin de semana? Espero que s! Pero bueno, el

fin de semana pas y ahora volvemos al estudio. Espero que con ganas!

Hoy nos toca conocer las etiquetas (o tags) ms comunes del HTML, las

que se usan todo el tiempo en la creacin de pginas web. Vamos a ir por partes para que no

les quede ninguna duda. Empezamos?

Las etiquetas ms comunes en realidad son las que arman o distribuyen el espacio de la

pgina, pero como esas las vamos a ver dentro de un par de clases, por lo pronto vamos a

estudiar detenidamente las que se usan dentro del armado, por ejemplo, las de insercin de

imgenes, escritura y formato de texto, y algunas otras ms, con todas sus propiedades.

Etiquetas

La parte HTMLesca

Quin en una pgina no pone algo, aunque sea mnimo de texto?

Y bueno, entonces vamos a empezar por lo bsico, las etiquetas para texto.

Vamos a ir por orden jerrquico, es decir, de importancia dentro de un texto, como si de un

diario (peridico) se tratase.


32

h1: Esta etiqueta, se utiliza para ttulos y comienza con la apertura y termina con el cierre

.

Es la de mayor jerarqua entre las etiquetas de texto, por lo tanto tiene mayor tamao y

grosor.

Si bien estas propiedades pueden cambiarse, no en vano estn as.

Existen otras etiquetas H, que son las h2, h3, , que van disminuyendo su tamao

proporcionalmente, junto con su grado de importancia. Estas se utilizan en subttulos, copetes,

etc.

Si sabemos que los tamaos de las letras se pueden cambiar y los grosores tambin entonces

qu diferencia hay?

Bueno, primero que nada que si nosotros le seteamos a nuestra etiqueta h1 un tamao,

letra y grosor por defecto, con estilos, en todos los lugares donde la pongamos saldr igual (ya

veremos cmo).

Esto nos ayuda a mantener una sincrona entre los tipos de cosas que pongamos en nuestro

sitio.

Otra cuestin es tambin que los buscadores (como Google) le dan preponderancia a las

palabras ms importantes del sitio a la hora de agregar una pgina a su base de datos.

Entonces, cuando alguien busque por X palabra en Google, tendremos ms posibilidades de

aparecer ms arriba en el buscador, si esta palabra se encontraba en el ttulo, que si se

encontraba en un prrafo.

(El tema de los buscadores es muy extenso y no slo esto tiene que ver, tomen este

comentario solo como una referencia de que por algo existen las etiquetas que existen, y no

estn porque s).

Adems recordemos que debemos mantener un orden semntico en nuestro texto, y sera

desprolijo poner un ttulo en un prrafo con un texto grande, y poner un prrafo en un

con un texto chico.

Las cosas hay que hacerlas bien!


33

Siguiendo con otras etiquetas:

Quin no vio en su escuela primaria oraciones y prrafos?

y ac la tenemos, la etiqueta de prrafo.

Esta etiqueta comienza con y termina con . Dentro de estas dos, podemos escribir

todo el texto que queramos y tendr la caracterstica de pertenecer a este mismo prrafo

(obviamente).

Y por que lo cuento? Ms que nada para que sepan que todas las propiedades que le

agreguen al prrafo se les agregarn a todas y cada una de las palabras en su interior (por

ejemplo: color, negritas, itlicas, tamao de letra, etc).

Otra etiqueta que casi la podemos ver en cualquier pgina y que se usa en cualquier editor de

texto comn que encontremos por ah, es la etiqueta de negrita.

Esta etiqueta tiene como comienzo un y como cierre un (ya irn notando similitudes

entre aperturas y cierres, por si no se las digo bajito pero no cuenten nada: /).

Otra etiqueta para poner negritas es la que est delimitada por , esta

etiqueta, al igual que la anterior, nos pone todo el texto de su interior en una letra de mayor

densidad (digo mayor densidad y no ms negra, porque si la letra no fuera negra.ustedes

me entienden :p , y si no preguntan!).

La diferencia entre la etiqueta y la etiqueta es ms que nada de carcter

semntico.

Mientras que la se utiliza simplemente para resaltar un texto, la se utiliza para

reforzar un texto.

Si bien las dos se ven iguales, lo correcto sera que usemos cada una para lo que corresponde

(al igual que los ).

Y siguiendo con los formateos de texto, nos encontramos con la etiqueta de itlicas, que tiene

como apertura , y como cierre (Ya, dganme que entendieron lo de la barra!! Jaja)


34

Esta etiqueta al igual que en la mayora de los editores de documentos, inclina el texto que

contiene.

Su correspondiente en orden semntico, es la etiqueta que significa en ingls

emphasis (nfasis) y se utiliza, bueno, para eso mismo.

Y ac nos encontramos con los caprichos semnticos del HTML, y vamos ms all!

Otra etiqueta que tiene el mismo efecto que las dos anteriores es la etiqueta

que sirve para mostrar textos citados y que tiene el mismo efecto que las dos etiquetas

anteriores, su nico cambio es el nombre, que coincide con el contenido a mostrar.

(Aclaracin: por defecto estas etiquetas vienen con un tamao, color, inclinacin, grosor, y

espaciado de letra especfico. Pero recordemos que esto se puede cambiar mediante estilos,

que ya veremos que son, y de esta manera nuestras etiquetas solo diferentes

semnticamente, podrn ser diferentes tambin visualmente, y ah s tendremos adems de el

correcto uso de las etiquetas, la diferenciacin especfica-visual de cada una).

Y nos vamos a otra ms linda. (Depende la chica/o que le pongamos adentro jeje).

La etiqueta de imagen!

Esta etiqueta tiene la particularidad de que empieza y termina en el mismo lugar.

Lo lgico a pensar siguiendo lo que venimos diciendo en la clase, sera que esta etiqueta

tendra una composicin como esta: , pero no es as.

Esta etiqueta arranca con


35

Este atributo es la que va a contener la url del lugar en donde tengamos la imagen, por

ende es indispensable que est.

alt

Este atributo va a contener un texto alternativo para que, en caso de que nuestra

imagen no este disponible, no dejar el espacio en blanco y que la gente no sepa que es

lo que iba ah.

width/height

Estas dos son otras de las propiedades de la etiqueta y son opcionales, ya que

por defecto la etiqueta toma el tamao real de la imagen.

Una etiqueta completa de imagen, con sus atributos necesarios y tambin con los opcionales

quedara de esta manera:

En caso de que tengamos la imagen en nuestro sitio, sera (y ya sin atributos opcionales)

Ac tenemos la etiqueta ms clickeada del mundo!

Con ustedes tururururu, PA!

La etiqueta para crear enlaces!!

Esta etiqueta esta formada por su apertura y su cierre

Adems de su apertura y cierre, tiene atributos indispensables sin los cuales no funcionaria

como debe.

Antes que nada tenemos que pasarle un contenido, si no a quien vamos a clickear!?

Este contenido puede ser un texto, o una imagen, o lo que tengamos ganas de que cuando sea

clickeado nos lleve a algn lado.


36

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.

title

Este atributo es el que nos abre el cuadradito amarillo famoso (tooltip) con el ttulo del

enlace cuando le pasamos por encima.

target

En este atributo vamos a indicar si queremos que nuestro enlace abra una nueva

ventana para su destino (_blank), si queremos que cargue la pgina en el mismo

lugar en que estamos(_self), y (_top) y (_parent) que son similares a los

anteriores pero se usan cuando utilizamos (cosa que no me gusta nada :p).

De esta manera un enlace completo podra ser:

Click

aqu para ir a la pgina de elwebmaster.com

Este enlace, se mostrara en la pgina de esta manera:

Clic aqu para ir a la pgina de elwebamster.com

Y si lo clickearamos nos abrira una ventana nueva del navegador (o pestaa en caso de que

usemos Firefox, en la que cargara la pgina de elwebmaster.

Tambin, por el texto alt, si pasramos sobre el link, sin clickearlo, nos mostrara la leyenda

pgina de elwebmaster.

Otra manera y empezando a combinar, podra ser:


37

De esta manera, tendramos 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 espaol ancla), es justamente el de punto de ancla.

Habrn visto en alguna pgina que clickean un enlace y no van a otra pgina, sino que los lleva

a una parte de esta misma.

Generalmente se ve en ndices o, en finales de las pginas, la leyenda Volver arriba.

Este tipo de etiquetas es ni ms ni menos que un utilizado de otra manera.

En el enlace que queremos que al clickear nos lleve a otra parte de nuestra pgina debemos

poner:

Ir hacia el lugar

Y en el lugar que queremos que sea el destino cuando clickeemos el anterior, debemos

poner:

Llegu a este lugar

Entonces cuando clickeemos en Ir hacia el lugar la pgina 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 slo de esto, sino de cualquier cosa

recuerden!

Y por ltimo, vamos a ver la etiqueta de comentario, la etiqueta de cierre del da de hoy, que

justamente no cierra con la / :p .

Esta etiqueta inicia con .

Todo lo que escribamos entre estas dos etiquetas no saldr en pantalla cuando mostremos la

pgina.


38

Sirve a los creadores de pginas 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 prctica comentar nuestro cdigo, ya que cuando se hace muy extenso, puede ser

complicado de entender y nos evita tener que leernos todo para poder darnos cuenta.

Ojo, tambin es bueno borrar los comentarios en la pgina final que vamos a tener subida a

nuestro hosting, porque los comentarios pesan igual que cualquier otro caracter, por ende,

hacen ms grande nuestro HTML (y tarda ms 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 botn 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 cdigo, es ms fcil 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:


39

Como ven, seleccionamos el texto a poner en negrita, y luego apretando el botn B nos

pondr ese texto entre, CURIOSAMENTE, la etiqueta .

El tag que debera poner en realidad sera el o bien el botn del Dw llamarse

STRONG.

Estas cosas son las que menos me gustan de Dw, que hace cosas por convencin sin respetar

los criterios reales de cada etiqueta.

Pero bueno, tambin hay que saber que la W3C (ver primeras clases) esta por sacar del

estndar los tags y para dejar solo los y , 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!!

Conclusin

Bueno, llegamos al final.

En esta clase vimos algunas de las etiquetas ms usadas, dentro de lo que es el contenido de

las pginas web.

En clases siguientes veremos algunas ms y luego otras, exclusivas para el armado, como las

tablas y los divisores.

Espero que les haya gustado la clase y que la hayan ledo toda, porque sali bastante larguita

:p .


40

Nos vemos la semana que viene con ms Taller de Dreamweaver/HTML.

Clase 13: Etiquetas ms usadas (2)

Hola! Qu tal? Listos para otra clase de Dw/HTML? As me gusta, siempre

dispuestos! Hoy vamos a ver ms tags HTML que seguramente les sern de

utilidad en algn momento de su vida como webmasters.

Es importante conocer cada tipo de etiqueta, si bien hoy da mucho se

maneja con CSS (tema aparte), no por eso son menos vlidas y los que no

sepan manejar estilos estarn 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 estn en el interior de

su etiqueta (esto esta subrayado) .

Este tipo de tags (tags o etiquetas tmenlos como sinnimos en este taller), como

tambin el (este texto esta centrado) , estn 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 slo para la ubicacin de los

elementos que componen una pgina. La, literalmente, maquetacin de la pgina.

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 estn haciendo algo, van a poder usarlos hasta que aprendan estilos.

Volviendo a los tags:

Otros de mucha utilidad son los tags y .

Como ven, su cierre es en s mismas (tienen la barra al final del mismo tag de inicio).

La etiqueta lo que hace es insertar un salto de lnea.

Por ejemplo si escribimos un texto, y queremos que parte de l se vea debajo, podemos

insertar un que nos dejar un salto entre ambos.


41

En s, para que lo entiendan grficamente, es como dar un ENTER en un editor de

texto como Word (recuerden que en HTML los enters no contaban como saltos).

Por otro lado, la etiqueta hace algo similar:

Produce el mismo efecto del , pero a su vez agrega un lnea divisoria entre ambos

elementos separados.

Ahora cuando terminemos de explicar estos tags HTML, vamos a verlos en

funcionamiento en imgenes de Dw para que se entiendan 100%

Si no, recuerden: dejen sus comentarios!

Seguimos:

texto

Este tag, nos acomoda el texto que escribamos dentro, en una especie de caja que

tendr un margen a la izquierda.

Cada uno le podr encontrar su utilidad dependiendo las necesidades.

Ahora veremos como funciona en Dw:

texto

Este tag, no hace nada, se utiliza para introducirlo dentro de otros tags, o por s slo,

para darle un formato diferente al texto de su interior mediante estilos.

Supongamos que tenemos un prrafo, al cual le dimos color azul, y queremos que slo

una palabra tenga color rojo, subrayado, negrita, mayor tamao y otra fuente (letra).

Si lo hicisemos mediante HTML puro, necesitaramos meter este texto que queremos

cambiar entre muchos tags (pinsenlo).

Ahora mediante la etiqueta span, 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 slo para

maquetado?).

De a poquito nos vamos a ir dando cuenta de cunto mejor es.

Bueno, vamos a ver estos ejemplos en Dw. Si podemos todos en una imagen:


42

El dibujo est un poco complicado, porque las etiquetas, estn mezcladas entre s dentro

del cdigo HTML.

Esto lo hice a propsito para que tengan que analizar lo que ven abajo (en lo que sera la

salida de la pgina en el navegador), con el cdigo real, y se den cuenta de cmo

funciona cada uno.

Eso s, si no entienden por favor pregunten as sacamos todas las dudas para seguir con

cosas ms interesantes y que ya entren al siguiente nivel!!!

Conclusin


43

Bueno, aqu terminamos con la parte de tags bsicos, espero que les haya gustado y

que lleven el taller al da.

Ya dentro de poco vamos a aprender elementos que nos ayudarn a ir maquetando

nuestra primera pgina de verdad, visual y con imgenes, para poder ir viendo el fruto

de nuestras horas de estudio.

Nos vemos la prxima!

Hasta luego!

Clase 14: Caracteres especiales

Hola queridos lectores! Cmo les va? Me extraaban? Jeje. Bueno, hoy

vamos a dedicar la clase a los caracteres especiales en las pginas web.

Esto es de suma importancia por dos cosas: el cdigo HTML vlido y (la ms

importante) la visualizacin correcta de nuestra pgina por parte de los

usuarios.

Se les llama caracteres especiales a un conjunto de caracteres (valga la

redundancia) que no pertenecen a un comn de codificaciones de alfabetizacin. Por ejemplo, en

Estados Unidos no existe la letra , en algunos pases el acento (tilde) es para un lado y en otros

para el otro, etc.

El conjunto de caracteres abarca, adems de letras como la y letras con acento, smbolos de

diferentes tipos como la apertura de smbolo de exclamacin y de pregunta; smbolos no

frecuentes como el de marca registrada (la R chiquita dentro de un crculo) y hasta los mismos

signos , que al ser caracteres HTML no pueden ser escritos dentro de una pgina tal cual

se ven, porque si no el navegador interpretara lo que le sigue al signo como el nombre de un tag

(etiqueta).

Los caracteres especiales tienen un reemplazo para escribirlos en el HTML que empieza

con el smbolo & y termina con un ;.

A modo de ejemplo, una se escribe en HTML como (sin las comillas), una

vocal con acento se escribe &(vocal)acute;.

Ac les dejo una lista de los principales caracteres:

Letras:


44

Otros caracteres:

Y el supercaracter del dia! (un espacio en blanco):

Por supuesto que hay muchos caracteres especiales ms, estos son slo una pequea lista de los

ms usados.

Si en algn momento necesitan alguno ms raro, que no este ac, a googlear se ha dicho.

y aportando info de Dreamweaver

Como vern puede resultar bastante molesto el tener que escribir un prrafo o el texto que sea,

cambiando todos los caracteres por los escritos arriba.

Dreamweaver, nos ayuda con esto de 2 maneras:

Una es que en modo cdigo, cuando empezamos a escribir el carcter (cuando escribimos el &),

ya nos muestra una lista de los posibles caracteres a escribir.

Pero la mejor de todas, es que escribiendo en modo visual, podemos poner acentos, o lo que

queramos, que Dw nos convierte todos los caracteres automticamente.

Pueden probar esto, escribiendo cosas en modo visual y pasando a modo cdigo, vern que en

realidad esta todo como debe estar.

Conclusin

Esta clase no fue la gran cosa jeje, pero el tema de los caracteres especiales es muy importante.

Cuantas veces habremos visto pginas en las que aparecen signos raros (No eran de Japn, eh?) y

la verdad que este tipo de descuidos estropea mucho el diseo y hace que nuestra pgina se vea

poco profesional.

Es importante tener en cuenta que, por ms que en algunos navegadores se vean bien los

caracteres especiales escritos tal cual son, se deben usar sus correspondientes reemplazos.

Clase 15: Lista


45

Como les va? Bienvenidos a otra clase de Adobe Dreamweaver/HTML. La esperaron con ansiedad?

Espero que s. Hoy veremos el uso de listas; cmo son, sus diferentes tipos y las diversas

aplicaciones que les podemos dar.

Tal vez lean por ah (googleando), sobre ciertas propiedades de las listas que ac no nombramos.

Estas propiedades no las he explicado porque estn desactualizadas. Ya no se usan y pronto

desaparecern del lenguaje HTML como propiedades vlidas. Hay que mantenerse siempre

actualizados con los estndares!

Partes de una lista

Las diferentes partes de una lista son, el tag o etiqueta que la define, y sus etiquetas

contenidas.

Toda lista debe tener al menos un tem (etiqueta contenida) que es el que realmente se

ver en nuestro navegador.

Tipos de lista

Tenemos el tipo de lista UL, que son las listas desordenadas.

Este tipo de listas contiene a etiquetas LI que van a representar cada tem en su interior.

Las etiquetas UL tienen la caracterstica de que cada uno de sus tems contenidos estn

antecedidos por un crculo (este se puede cambiar) que lo va a definir como tem de

lista.

Ac en la imagen, podemos ver los distintos tipos de visualizacin de listas

desordenadas que tenemos: square, circle, y disc; que los podemos setear en el atributo

Type de la lista.

Otro tipo de lista son las OL, que son las listas ordenadas.

Estas listas, a diferencia de las anteriores, en vez del crculo, cuadrado o disco, que

tienen las UL, van a estar ordenadas por numeracin o alfabticamente.

Es as que tenemos:


46

Type 1:

Van ordenadas numricamente de 1 a la cantidad de tems que tengamos.

Type a:

Van ordenadas alfabticamente de la a a la z en minsculas.

Type A:

Van ordenadas alfabticamente de la A a la Z en maysculas.

Type i:

Van ordenadas en nmeros romanos (en minsculas).

Type I:

Van ordenadas en nmeros romanos (en maysculas).

Y el tercer tipo de listas, son las listas de definicin, DL.


47

Como podemos ver las DL nos permiten poner una especie de ttulo (DT) para el cual

daremos una definicin (DD).

No tiene mucha ciencia, cada uno le encontrar uso en algn momento (recuerden usar

cada tipo de etiqueta segn corresponda, que para eso estn creadas).

Para qu ms sirven las listas

Otro uso muy comn que tienen las listas, ms all de hacer una lista de tems comn

es, por ejemplo, la de crear menes o barras de navegacin en paginas web

(obviamente).

Las listas se pueden anidar unas dentro de otras, entonces, creando una lista principal

con diferentes trminos y luego en cada uno poniendo otra lista, podramos generar un

men desplegable (aplicando algunos estilos que veremos ms adelante).

Esto se los nombro por arriba, y no lo voy a explicar ahora, porque un men

desplegable con listas, ser una de las primeras cosas que hagamos como ejemplo

cuando veamos estilos, as que A despreocuparse, que en algunas clases ms tendrn

sus menusitos a todo color!!! :p

Otro uso puede ser el de un ndice, o un navegador de una pgina larga mediante anclas

(tags Recuerdan? Ya lo vimos).

De todos modos, el uso que le puedan dar a una lista, o a cualquier elemento, esta dado

por lo que se les ocurra a ustedes en el momento y, a riesgo de sonar reiterativo, siempre

recuerden que si van a usar un elemento para hacer x cosa y ya hay uno que est

especficamente creado para eso, usen este ltimo en lugar del anterior.


48

No reinventen elementos por el simple hecho de no querer ver cmo funciona otro o

porque les quede ms cmodo usar uno que se les ocurra.

Acostmbrense a trabajar con propiedad que es la mejor manera de ser un buen

maquetador de pginas web.

Conclusin

Bueno, hoy vimos que son las listas, sus propiedades, tipos y algunos usos.

Ms adelante veremos otros usos ms divertidos que los que pusimos recin, pero que

requieren de conocimientos que al da de hoy, puede que no tengan.

Traten despus de leer esta clase, o durante, o cuando estn aplicando lo que aprendan

en ella, de revisar la barra insert de Dw, que ah tienen accesos directos a tipos de

listas y sus contenidos (ya lo vimos en clases anteriores).

Clase 16: Tablas

Hola Qu tal? Cmo andan esos estudiantes mega-responsables? Bienvenidos a una nueva clase

del Taller de Adobe Dreamweaver/HTML.

Espero que estn entusiasmados, porque hoy vamos a ver tablas, que es medio pesado, 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).

Bueno, vamos a ver en qu consiste esto de las tablas

Un poco de historia (no tan histrica) En la vieja web, las tablas servan para diagramar pginas completas. Estas se dividan en tantas

partes como sectores iba a tener la pgina, y dentro se cargaba la informacin necesaria.

Hoy por hoy, las tablas dejaron de ser un medio para maquetar la pgina entera, y pasaron a ser lo

que realmente dicen ser, tablas.

Se usan para ordenar informacin en columnas o filas que mantienen una relacin entre s, ya sea

que todas las partes de esas filas/columnas dependen de un mismo ttulo, o unas son derivadas de

otras. A modo de ejemplo:

Ttulo Descripcin Empresa

Dreamweaver Programa de maquetacin web Adobe Systems Incorporated

Como se puede ver, este ordenamiento de informacin no tiene mucho que ver con la maquetacin

de una pgina. Es solo para ordenamiento.


49

Antes pensaban las pginas de acuerdo a las tablas y se haca una gigante que iba a contener la

cabecera, cuerpo, barras laterales y footer; y se meta toda la pgina dentro de esta tabla, con

an ms tablas anidadas.

Esta prctica ya es obsoleta y est por dems recomendado no utilizarla de este modo (volvemos

al viejo lema que dice que las cosas se deben usar para lo que fueron hechas).

Claro est que en algn momento el HTML se bas e incluso foment el uso de tablas para

maquetar pginas web, pero las tecnologas cambian y hay que adaptarse a los estndares.

No porque el HTML 0.000001 haya usado tablas para maquetar pginas, nos da la excusa para que

hoy las usemos de ese modo sin culpa :p.

Ahora s, a ver como se hacen y utilizan las tablas Las tablas se encierran entre las etiquetas y como ya estarn acostumbrados a

esta altura, su apertura con su cierre.

Dentro de ellas vamos a poder poner etiquetas que van a ser cada fila de la tabla, y a su

vez, dentro de ellos van a poder poner etiquetas que van a corresponder a cada

columna de la fila.

Veamos un ejemplo:

Ttulo

Descripcin

Empresa

Dreamweaver

Programa de maquetacin web

Adobe Systems Incorporated

Esta tabla, nos dara como resultado, la tabla que pusimos arriba (Un poco de historia), que

tendra 3 columnas y 2 filas.

En la fila de arriba tendramos las tres columnas Ttulo;Descripcin;Empresa y en la fila de

abajo Dreamweaver;Programa de maquetacin web y Adobe Systems Incorporated.

Propiedades El uso de las tablas a veces se complica para la gente que no las ha usado nunca, cuando quiere

hacer ciertas cosas, como por ejemplo:

Una tabla de una columna como ttulo y 2 como contenido.

Este es un problema que no parecera tal, pero s que lo es, porque si no definimos ciertas

propiedades de antemano, nuestra tabla se romper.


50

Supongamos que tenemos una tabla de esta forma:

Programs de Adobe Systems Incorporated

Dreamweaver Programa para maquetacin web

A simple vista nuestra tabla sera as:

Programas de Adobe Systems

Incorporated

Dreamweaver


PERO NO!

Si en nuestro HTML tenemos la tabla definida as, se nos romper (o andar de casualidad, a veces

suele suceder jeje).

Y ustedes se preguntarn por qu no anda, si tiene todos los elementos necesarios para funcionar.

Ac esta la respuesta:

El problema es que el HTML considera la tabla como una cuadricula, por ende, a nuestra tabla de

arriba, le faltara una columna en el primer y por ende estara rota.

Para que el HTML no se confunda, le tenemos que indicar que la columna de la fila uno va a ocupar

el ancho de dos columnas, y para esto debemos hacer uso de la propiedad colspan.

Pasemos al ejemplo y despus explicamos bien la propiedad.

Programas de


Dreamweaver


De esa manera tenemos la tabla bien definida, los dos de abajo formaran las dos columnas

que tenemos en la tabla, y al de arriba le estaramos indicando que debe ocupar el ancho de

las dos columnas que tiene la tabla.


51

Si abajo tuvisemos 3 columnas (3 ) el colspan de la de arriba debera ser de 3, o bien

podramos tener una con colspan de 2 y otra columna simple.

Veamos otro ejemplo:

Estudiamos en el taller Programs de Adobe Systems Incorporated

Dreamweaver Flash Illustrator

Ac tenemos una tabla con 2 columnas en la fila uno y 3 columnas en la fila dos.

El cdigo correspondiente sera:

Estudiamos en el taller

Programas de


Dreamweaver

Flash

Illustrator

Esta tabla de arriba nos da pie para explicar algunas cosas ms:

Como podemos ver, la columna que tiene el colspan es la segunda de la fila uno y esto es porque

el colspan nos dice cuntas columnas va a ocupar la misma, pero se toma desde ah en adelante.

Si nosotros le hubisemos puesto colspan 2 a la columna Estudiamos en el taller, esta hubiese

tomado el doble de ancho, y no hubiese sido la tabla que nosotros queramos.

Taller Dreamweaver

Documents

Transcript of Taller Dreamweaver