Thor 11 de marzo de 2008 a las 14.33
   Imprimir artículo
elWebmaster.com

Taller de Adobe Dreamweaver: Pestaña Text y Favorites


Taller de Adobe Dreamweaver - Pestaña 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 pestañas Text y Favorites.

La pestaña que nos tocaría ver hoy sería la pestaña “Data” pero la vamos a dejar para más adelante, porque requiere para varios de sus elementos, conocimientos de bases de datos, e inclusive, tener creada una base de datos.

Como todavía estamos en la parte “principiante” de nuestro curso, la sección “Data” no la podemos explicar. Sería perder el tiempo ya que se entenderá mejor más adelante y para lo único que nos va a servir ahora es para “conocer los nombres” y la verdad que nos va a atrasar en cosas más importantes para esta etapa.

Vamos a pasar directamente a la pestaña Text y veremos también la pestaña Favorites, para dar por terminado (por el momento) el panel Insert.

Panel Insert (insertar), cuarta parte.

Pestaña Text:

Taller de Adobe Dreamweaver - Pestaña Text

Taller de Adobe Dreamweaver - Pestaña Text Bold: Nos inserta un tag HTML ‘<strong>texto</strong>’ que nos muestra en nuestra página el contenido en negrita (en el ejemplo sería texto).

Taller de Adobe Dreamweaver - Pestaña Text Italic: Inserta los tags <em> </em> en los cuales su contenido se verá en estilo itálica.

Taller de Adobe Dreamweaver - Pestaña Text Strong: Es exactamente lo mismo que “Bold”.

Esta es una de las cosas inentendibles que tiene Dw.

La realidad es que el Bold debería tener el tag <b></b> (que existe y tiene el mismo efecto que el strong) y el strong, tener el <strong></strong>, valga la redundancia.

Taller de Adobe Dreamweaver - Pestaña TextEmphasis: De nuevo.

Es exactamente lo mismo que el “Italic”.

Acá vamos a hacer un “parate”. ¿Por qué? Quiero explicar un par de cositas:

En realidad el lenguaje HTML tiene un tag <strong></strong> y un tag <b></b> en los cuales al ponerles texto dentro, este se verá en negrita.

Lo mismo sucede con el <i></i> y el <em></em>, y las itálicas.

Entonces porque existen diferentes?

La respuesta es que como son tags comúnmente usados dentro de los textos de una página web, es bueno poder definirles características especiales para poder usarlos en diferentes ocasiones.

A ver, un ejemplo para que quede más claro:

Yo quiero que las citas de mi página aparezcan en itálica y los nombres propios también. Además, quiero que los textos citados aparezcan más chicos.

Entonces, yo puedo predefinir a el tag <i></i> con un tamaño de letra menor (ya veremos cómo) y luego sólo necesitaría poner las citas entre <i></i> (itálica con tamaño menor) y los nombres entre <em></em> (solo itálica), y tendría a ambos con itálica, y las citas tendrían a su vez fuente mas chica.

Además, también existen por una “cuestión semántica”:

Por ejemplo, si trabajara en una revista y tengo que reforzar un encabezado que diría “Taller de Dreamweaver”, lo refuerzo en negrita con un <b></b>, ahora si tengo que reforzar un encabezado que dice “Meteorito se dirige a la tierra”, lo reforzaría con un <strong></strong>. Solo por el valor semántico de la palabra.

Los tags a nivel semántico prácticamente no se usan salvo por gente muy purista, pero estaría bueno acostumbrarse a trabajar así, ya que una vez que se nos haga costumbre, estaríamos haciendo un trabajo prolijo, sin necesidad de un esfuerzo mayor.

Bueno, terminada esta no-breve explicación, sigamos con las opciones de la pestaña.

Taller de Adobe Dreamweaver - Pestaña Text Paragraph: Nos pone un texto seleccionado entre los tags <p></p> (o bien, si no tenemos ninguno seleccionado, nos crea los tags vacíos para que escribamos dentro).

Estos tags conforman básicamente, un párrafo.

Taller de Adobe Dreamweaver - Pestaña Text Block-quote: Block-quote nos crea un bloque con margen izquierdo en el cual podemos meter texto. Este sería el resultado.

“Este texto sería un párrafo normal.”

“Aquí tendríamos el blockquote en acción.

Siempre que escribamos dentro del blockquote mantendríamos el margen para ordenar el texto.”

Taller de Adobe Dreamweaver - Pestaña Text Preformatted Text: El texto que escribamos dentro de los tags de preformatted text (<pre></pre>) se va a mostrar en una letra con un buen espaciado y muy legible. Además, los espacios que pongamos entre palabras u oraciones serán respetados.

Acá vamos a hacer otro “parate”.

Cuando nosotros escribimos en HTML un párrafo, por ejemplo:

<p>El día esta nublado.

Pero a mi me gusta igual.</p>

En nuestro navegador se mostrará:

“El día esta nublado. Pero a mi me gusta igual.”

Nótese que la bajada de línea (el “enter”) no fue tomado por el navegador.

A tener en cuenta, el navegador no toma por ejemplo, los “enters” como “bajadas de línea” ni los espacios de la barra espaciadora, como espacios reales (sólo toma un espacio como real).

Para poder “hacer un enter” (bajar una línea) en nuestro texto y que se vea en el navegador tenemos que insertar el tag “<br />” y para hacer un espacio adicional en un entre dos palabras, tenemos que escribir ” “

Volviendo al ejemplo anterior, para que en nuestro navegador salga la oración tal cual la escribimos arriba, deberíamos poner en el HTML:

<p>El día esta nublado.<br /> Pero a mi me gusta igual.</p>

El resultado de esta oración si sería el siguiente.

El día esta nublado.

Pero a mi me gusta igual.

Volvamos con las pestañas.

Taller de Adobe Dreamweaver - Pestaña TextTaller de Adobe Dreamweaver - Pestaña TextTaller de Adobe Dreamweaver - Pestaña Text h1, h2, h3, …: Sirven para marcar cabeceras, el h1 se utiliza generalmente para los títulos de mayor relevancia en una página, y los sucesores (h2,h3,…) para los subtítulos encadenados o textos de menor importancia con respecto a los anteriores.

Además, los “h” ponen el texto en mayor tamaño (de acuerdo con su numeración, el 1 es el más grande) y formateado en negrita.

El tag que utilizan es el <h1></h1>, <h2></h2>, ……

Taller de Adobe Dreamweaver - Pestaña Text Unordered list: Nos crea una lista “desordenada”.
Esto quiere decir, sin numeración.

A modo de ejemplo:

· Item 1

· Item2

· …

Taller de Adobe Dreamweaver - Pestaña Text Ordered list: Nos crea una lista ordenada.

A modo de ejemplo:

1. item 1

2. item 2

3. …

Taller de Adobe Dreamweaver - Pestaña Text 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 línea de ese tipo.

En los ejemplos anteriores, cada “ítem” es un li, que difiere por su ordenamiento (puntos o números respectivamente, aunque pueden ser otros).

Taller de Adobe Dreamweaver - Pestaña TextTaller de Adobe Dreamweaver - Pestaña TextTaller de Adobe Dreamweaver - Pestaña Text Definition List, definiton term, definition description: Sirven para crear una lista de definiciones.

La dl, definition list, crea el título de la lista.

La dt, definition term, crea el término a definir.

La dd, definition descripción, crea la descripción del término anterior.

Estas 3 funcionan en conjunto, a modo de diccionario.

Pongo un ejemplo para que lo puedan entender:

Diccionario (esta es la dl)

Dreamweaver: (esta es la dt)

Programa para maquetación de páginas web, creado por adobe. (esta es la dd)

HTML: (esta es otra dt)

Lenguaje de maquetación web. (esta es otra dd)

En general las Definiton list no son muy usadas por una cuestión de que la gente encuentra los mismos resultados usando otros tags, pero esta bueno conocerlas porque muchas veces nos pueden sacar de un apuro.

Taller de Adobe Dreamweaver - Pestaña Text Abbreviation: esta opción nos permite poner el tag <abbr></abbr> con un título dentro del primero.

Quedaría <abbr title=””></abbr>

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: <abbr title=”Dreamweaver”>Dw</abbr>

Taller de Adobe Dreamweaver - Pestaña Text Acronym: Funciona exactamente igual al tag anterior.

Su escritura en HTML es <acronym title=””></acronym>.

Su diferencia real es que el abbr se utiliza para abreviar una palabra, y el acronym para un acrónimo.

Por ejemplo: <acronym title=”HyperText Markup Language“>HTML</acronym>

Taller de Adobe Dreamweaver - Pestaña Text Other Characters: Este botón nos permite agregar en donde tengamos posicionado el cursor, uno de los caracteres que seleccionamos de su lista.

Estos caracteres tienen la particularidad de que no pueden ser escritos de la manera tradicional, y deben ser reemplazados para que los interprete el navegador. Caso contrario, no se verán en pantalla como corresponde.

Un ejemplo de estos es el espacio en blanco que se escribe “ ”(sin las comillas) o las vocales con acento, “&aacute;”, &iacute;” (para la letra “a” y la “i” con tilde, respectivamente).

Pestaña Favorites:

Taller de Adobe Dreamweaver - Pestaña Favorites

En esta pestaña, 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 pestaña con nuestras opciones más usadas y no depender del orden en que las puso Dw.

Prueben de hacerse una pestaña ustedes mismos con lo que prefieran, y si no les sale, recuerden que pueden dejar comentarios en la página, que los responderé lo mas rápido que pueda.

Conclusión

Bueno, estas pestañas, si bien son de fácil uso, nos llevaron unas cuantas líneas.

Estaría bueno que vayan usandolas (por lo menos la pestaña text), así además de repasar las cosas que vimos hoy, van incorporando mas rápido los tags HTML.

Nos volvemos a ver la semana que viene ¡¡ya con tema nuevo para alegría de todos!! (o por lo menos mía :p)

¡Saludos!

<< CLASE ANTERIOR

CLASE SIGUIENTE >>

 


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (10)

  1. Nelson dice:

    mmm que denso esto del HTML, bien bacano (bueno, exelente) comenzar a verlo de esta forma así uno se va familiarizando con este código, quiero decir el hecho de de aprender la forma gráfica y su traducción en código, es bastante completo. Aunque hay un poco de confución con el HTML, no hay preguntas sobre el tema de hoy, solo ¡Sigamos así! .
    Chau.

  2. Maria Elena dice:

    mmmm como q confunde un poco pero bien básico para aprender…no entendi muy bien eso d la cuestión semántica pero bueno esta chevere todo…

  3. Ruh Fabiola dice:

    realmente muy bueno imposible no entender muchas gracias

  4. Javier dice:

    Excelente el curso! les agradezco mucho!

  5. Daniel dice:

    Creo que la mejor forma de retribuir el esfuerzo a quienes realizan estas páginas es clicando en los anuncios. Yo aporto silenciosamente de esta forma en las webs que realmente lo merecen, como esta. No nos cuesta nada.

  6. yannela arteaga dice:

    hola la ultima parte de favoritos, realmente no me salio, o quizas fue que no entendi muy bien esa parte, porq no se que opciones son las que me tiene que aparecer, si son las opciones de insertar? realmente no me sale nada de eso…
    Por favor responde mi duda.
    Graciasssss……

  7. jhoan acero dice:

    felicidade s y muchas gracias, estoy siguiendo este curso al pie de la letra, ya q aunque se de Dw, no tenia muy claros muchos conceptos q puede ver aqui, gracias, mil y una y media gracias

  8. Fabian dice:

    Equipo, muy bueno el curso. Desde ya agradecemos el material.
    Muchas gracias. Saludos

  9. EdgaR GutierreZ dice:

    Muy bueno, la verdad es que con lo que explicaste hasta ahora, lo aplique y lo que me salio fue un formulario… el código quedo un poco yo, porque lo iba acomodando al estilo CSS que es el que mejor y más rápido leo y bueno lo único que me falto fue poder hacer funcionar el botón de enviar los datos. Los felicito, voy a clickar sus anuncios.

  10. natalia dice:

    sabes tengo una consulta… el es para los párrafos pero no existe el p1 ni p2 pero si tengo más textos en la página con que escribo con h1? o hago otro ?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder