Taller de Dreamweaver - Instituto...
Transcript of Taller de Dreamweaver - Instituto...
-
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.
http://es.wikipedia.org/wiki/XHTMLhttp://es.wikipedia.org/wiki/W3Chttp://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada -
Manual de Dreamweaver
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
-
Manual de Dreamweaver
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.
http://es.wikipedia.org/wiki/WYSIWYGhttp://http:/es.wikipedia.org/wiki/Lenguaje_de_marcado -
Manual de Dreamweaver
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.
http://es.wikipedia.org/wiki/W3C -
Manual de Dreamweaver
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!!).
-
Manual de Dreamweaver
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
-
Manual de Dreamweaver
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
-
Manual de Dreamweaver
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
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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 paraque 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.
-
Manual de Dreamweaver
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 unentre 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
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
24
En principio podemos ver un tag que comienza con
-
Manual de Dreamweaver
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:
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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 enun 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.
-
Manual de Dreamweaver
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.
http://www.elwebmaster.com/talleres/taller-de-adobe-dreamweaver-trabajo-en-modo-diseno#comment-2110 -
Manual de Dreamweaver
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
http://www.elwebmaster.com/talleres/taller-de-adobe-dreamweaver-trabajo-en-modo-diseno#comment-2110http://www.elwebmaster.com/talleres/taller-de-adobe-dreamweaver-trabajo-en-modo-diseno#comment-2110http://www.elwebmaster.com/talleres/taller-de-adobe-dreamweaver-trabajo-en-modo-diseno#comment-2110 -
Manual de Dreamweaver
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.
http://www.videosjaja.com/ -
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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!
-
Manual de Dreamweaver
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 escribirtodo 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)
-
Manual de Dreamweaver
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
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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:
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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:
-
Manual de Dreamweaver
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 .
-
Manual de Dreamweaver
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. -
Manual de Dreamweaver
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 amboselementos 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:
-
Manual de Dreamweaver
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
-
Manual de Dreamweaver
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:
-
Manual de Dreamweaver
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
-
Manual de Dreamweaver
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:
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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.
-
Manual de Dreamweaver
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
Programa de maquetacin web
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
Adobe Systems Incorporated
Dreamweaver
Programa de maquetacin web
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.
-
Manual de Dreamweaver
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 correspondient