Alejandra 15 de julio de 2008 a las 14.11
   Imprimir artículo
elWebmaster.com

Taller de Adobe Dreamweaver: Preguntas frecuentes


DreamweaverHola a todos. Esta vez vamos a responder las preguntas que estuvieron dejando en los comentarios de las clases anteriores. Esta clase se irá actualizando con nuevas respuestas, así que estén al tanto por futuros agregados.

Dentro de las preguntas ver√°n definiciones √ļtiles, tutoriales, consejillos y algunas recetas para optimizar nuestra forma de trabajar. ¬°Si necesitas que profundicemos en alg√ļn tema, no te olvides de dejarnos tu comentario!

  1. ¬ŅCu√°l es la diferencia entre XHTML, HTML y HTTP?
  2. ¬ŅExisten atajos de teclado en Dreamweaver? ¬ŅCu√°les son?
  3. ¬ŅCu√°l es la mejor herramienta para poner texto sobre un fondo, ya sea un color pleno, en gradiente o sobre una imagen?
  4. ¬ŅC√≥mo puedo hacer un degradado en los bordes de una p√°gina sin tener que pegar una imagen completa y que de ambos lados quede igual?
  5. ¬ŅC√≥mo inserto un bot√≥n de Adobe Flash con Adobe Dreamweaver y asegurarme de que funcione?
  6. ¬ŅPuedo hacer que un link me lleve a otra parte del mismo HTML? ¬ŅQu√© etiqueta uso?
  7. Receta para hacer un formulario. ¬ŅQu√© debo poner en la parte de accion? ¬ŅC√≥mo validar?

1. Diferencia entre XHTML, HTML y HTTP

HTTP significa HyperText Transfer Protocol (Protocolo de Transferencia de HiperTexto) y es el protocolo desarrollado por W3C para las acciones que se realizan en la web. A trav√©s de este protocolo es que se definieron la sintaxis y la sem√°ntica de la comunicaci√≥n, estructurando la web y todos los elementos que forman parte de ella ‚Äďdel lado del servidor y del cliente‚Äď para posibilitar la relaci√≥n entre ambas partes.
HTML significa HyperText Markup Language. HTML es un lenguaje basado en etiquetas o tags. La sintaxis de este lenguaje tiene varias reglas:

  • treeSe escribe con estructura tree o de √°rbol (ver imagen)
  • Todo tag debe cerrar: <a>texto</a>
  • Los tags deben cerrar en orden inverso al que fueron abiertos: <p><strong>texto</strong></p>
  • Los tags pueden contener atributos: <tag atributo="valor">
  • Debe haber una ra√≠z obligatoria. Esto significa que tiene que existir un tag que encierre al resto: <html>
XHTML es la evolci√≥n del HTML en un lenguaje mucho m√°s estricto. Esta evoluci√≥n se debe principalmente a la diferencia entre los navegadores. Los navegadores no son m√°s que int√©rpretes de c√≥digo. Sin embargo, los desarrolladores que crearon los navegadores se tomaron el trabajo de interpretar el c√≥digo y amoldarlo para que se “vea bien”, aceptando algunos errores. Por ejemplo, antes se pod√≠a poner <body>texto</body. Con XHTML estricto el texto debe ir siempre dentro de una etiqueta de p√°rrafo: <body><p>texto</p></body>. Existe un XHTML transicional que admite algunos errores de este tipo, sin embargo el XHTML no, y directamente no valida los archivos con errores.

2. Atajos de teclado en Dreamweaver (varias versiones)

Todas las versiones de Dreamweaver incluyen una ayuda para saber cu√°les son los atajos del teclado. Para ver este listado debes ir al men√ļ de Edici√≥n (Edit) y seleccionar la opci√≥n M√©todos abreviados de teclado (Keyboard Shortcuts). Estos atajos pueden cambiar de una versi√≥n a otra y m√°s a√ļn de un SO a otro.

3. Texto sobre fondo: color pleno, gradiente e imagen

No es muy difícil lograr ubicar texto sobre un fondo. Los tres tratamientos de fondo son muy similares: divs Haz clic aquí para ver el HTML

    <div style="background-color:#FAFF33; width:100px; height:70px; float:left"><p style="padding:5px; font-family:'Trebuchet MS', Verdana, Arial; text-align:left"> hola</p></div>

En el primer div el fondo se da con color pleno: background-color:#FAFF33

    <div style="background-image:url(http://www.elwebmaster.com/wp-content/uploads/2008/07/div_gradiente.jpg); background-repeat:repeat-x; width:100px; height:70px; float:left"><p style="padding:5px; font-family:'Trebuchet MS', Verdana, Arial; text-align:left">hola</p></div>

En el segundo div se ve un gradiente. El div mide 100px x 70px. El gradiente se genera con una imagen del 70px de alto y 1px de ancho que est√° subida a nuestro servidor: background-image:url(http://www.elwebmaster.com/wp-content/uploads/2008/07/div_gradiente.jpg)

Después es necesario indicar que la imagen de fondo se repite sobre el eje de x:  background-repeat:repeat-x

    <div style="background-image:url(http://www.elwebmaster.com/wp-content/uploads/2008/07/div_imagen.jpg); width:100px; height:70px; float:left"><p style="padding:5px; font-family:'Trebuchet MS', Verdana, Arial; text-align:left">hola</p></div>

En el √ļltimo div, la imagen tiene las mismas dimensiones que el div. Esta imagen tambi√©n est√° en nuestro servidor y se indica as√≠:¬† background-image:url(http://www.elwebmaster.com/wp-content/uploads/2008/07/div_imagen.jpg)

4. Degradado en los laterales de una p√°gina

El degradado en los bordes de una p√°gina se hace utilizando el mismo recurso anterior. La estructura de tu p√°gina puede estar dividida en 3 divs. El div del medio es el que posee el contenido de la p√°gina, mientras que los dos laterales √ļnicamente incluyen un degradado.

gradientes laterales

Haz clic para ver el HTML

Para lograr un resultado similar, el código sería algo parecido a esto:

El primero es el div de la izquierda, con la imagen “gradiente_izq.jpg” que se repite en y: background-repeat:repeat-y

    <div style=" background-image:url(http://www.elwebmaster.com/wp-content/uploads/2008/07/gradiente_izq.jpg); background-repeat:repeat-y; width:60px; height:600px; float:left"></div>

Este es el div donde se ubica el contenido del sitio:

<div style="background-color:#c0c0c0; width:680px; height:600px; float:left">contenido</div>

Este es el div de la derecha, con la imagen “gradiente_der.jpg” que tambi√©n se repite en y: background-repeat:repeat-y

<div style="background-image:url(http://www.elwebmaster.com/wp-content/uploads/2008/07/gradiente_der.jpg); background-repeat:repeat-y; width:60px; height:600px; float:left"> </div>

5. Insertar un botón de Adobe Flash en HTML

Para incorporar un objeto de Adobe Flash en un HTML deber√°s “embeber” ese objeto. Primero necesitas tener el archivo SWF subido a tu servidor. Luego, en tu archivo HTML agregar√°s el siguiente c√≥digo

<embed src="http://www.elwebmaster.com/wp-content/uploads/2008/07/botonera.swf" width="600" height="30" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#6699CC"></embed>

El código de color naranja deberás reemplazarlo por la URL de tu SWF.

El código de color celeste son variables visuales: el ancho y alto del SWF y el color de fondo.

Haz clic para ver el HTML con la botonera de Adobe Flash

6. Anclas: enlaces dentro de un mismo HTML

Las anclas son enlaces o links que nos llevan a partes del mismo documento HTML. ¬ŅLes suena conocido? Es el mismo sistema que utilizamos para enlazar las preguntas del listado con las respuestas.

En el HTML tendremos dos partes:

  1. El enlace (Ej.: Pregunta 1)
  2. El destino del enlace (Ej.: Respuesta 1)

A cada parte se le agrega un código diferente:

Al enlace: <a href="#ancla1">¬ŅCu√°l es la diferencia entre XHTML, HTML y HTTP?</a>

Al destino del enlace:<a name="ancla1">La diferencia entre estos tres términos...</a>

Lo m√°s importante es que el nombre del ancla sea el mismo, en este caso: ancla1.

7. ¬ŅC√≥mo hacer un formulario?

En elWebmaster, nuestros talleres de Dreamweaver y PHP dieron sus respectivas clases para la creación y validación de formularios, tanto desde el front-end (Dreamweaver) como desde el back-end (PHP).

Taller de Adobe Dreamweaver:

Taller de PHP:

<< CLASE ANTERIOR

CLASE SIGUIENTE >>


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

Comentarios (7)

  1. Fiorella dice:

    Hola. Estuve mirando tu curso y te felicito porque fuiste muy claro, y si bien hace tiempo que trabajo con css y html, aun hoy x hoy hay cosas que no termino de entender…
    Te queria preguntar sobre css. No entiendo cual es la diferencia entre definir estilos con el punto (.estilo1), sin el punto (estilo1) o la version de estilos con el #… Lo he visto en varias hojas de estilos, y vi mucho lo del id, pero no termino de entenderlo, ni tampoco como escribirlo correctamente en la hoja de estilo.
    Por ejemplo, al aplicar atributos al tag {a} en la hoja de css, como hago si a cierto estilo quiero ponerle cierto comportamiento de visited , hover, etc? Debo ponerle el punto? Por ejemplo, tengo la clase < a{ text-decoration:none;} pero tengo una clase de texto llamada “rojo” y quiero que para la clase “rojo” se de otro comportamiento de a… seria ‘ a rojo {text-decoration:underlined;} ‘ ??? o con el punto?? Que cambia? Gracias y espero haber sido clara. Saludos!

  2. Thor dice:

    Hola Fiorella.

    Te cuento:

    Los estilos CSS que se definen con un punto “.” hacen referencia a una clase.

    Ejemplo: <div class=”azul”> Hola </div>

    La clase “azul” debera estar definida en el CSS con un punto para que ese div tome las propiedades.
    ( .azul {color: blue;} )

    En cambio los estilos CSS que se definen con el “#” hacen referencia a una id

    Ejemplo: <div id=”rojo”> Hola </div>

    La id “rojo” debera estar definida en el CSS con un # para que ese div tome las propiedades.
    ( #rojo {color: red;} )

    Recuerda que las ids son unicas, por lo tanto si quieres definir en la misma pagina un estilo a varios elementos, deberas hacerlo con una clase.

    Y por ultimo: los que no se definen con nada antes, son elementos HTML en si ( a, p, h1, div, etc )

    Estos se usan para definir propiedades generales para todos los elementos HTML de ese tipo en todo el sitio.

    Por ejemplo: si tu quieres que todos los H1 de tu sitio tengan tama√Īo de 20 px en el CSS definirias.

    h1 {font-size: 20px;}

    Ahora…. Si luego quieres tener en “x” pagina un solo h1 que tenga tama√Īo de 12 pixeles deberas “sobreescribir” la propiedad general de los h1 (20px) por la nueva EXCLUSIVA para ese tag.

    y ahi es donde utilizas una clase…

    h1 .tamaniodiferente { font-size: 12px; }

    entonces para usarlo harias: <h1 class=”tamaniodiferente”> Aca estoy escribiendo en 12 pixeles </h1>

  3. Nelson dice:

    Hola amigos, tengo un problema cuando activo el boton de tabla, me deja seleccionar cuantas y filas y columnas pero cuando le doy aceptar me sale el siguiente mensaje:Violacion de acceso compartido al acceder a c/user/pck/appdata/roamign/macromedia/dreamwiever/configuracion/objets/commom/table.htl

    lo he desistado ,e instalado nuevamente, no se si es por tener windows vista, por favor les agradezco si me ayudan velandia_17@hotmail.com

  4. cristian dice:

    hola nelson me gustaria que me dijeras si en DW se puede crear una galeria de imagenes donde los usuarios puedan insertar sus fotos? y cuales serian los pasos, ademas del programa a utilizar como pixelpost o wordpress que segun yo, estuve leyendo mucho acerca de las mismas o sea esos dos programas, pero hasta ahora no me salio( los pasos de pixelpost para crear la dicha galeria, ¬°Si! ya baje ese programa”pixelpost” solo me falta tu explicacion de como hacerle para que me acepte y se creee la galeria de imagenes. Me gustaria que dieran algo de curso acerca de eso ya que es algo que no solo yo pido sino, todo el mundo. Espero tu breve respuesta ¬°Sigan adelante! cristian

  5. angel dice:

    hola buen post, una duda, como hacer que mi boton flash sea transparente, eske siento que el boton paca la imagen de fondo, se puede? ya intente con el wmode=transparent y no me deja me ayudas??

  6. Felicidad dice:

    Me gustaría que alguien me dijera porqué cuando trabajo con dreamweaver cs3 en Pc veo en el documento como va a quedar y sin embargo cuando lo hago en mac no me deja ver las modificaciones ni de fondos, ni de tipografía, etc hasta que no lo veo en un navegador.

  7. Javier dice:

    He dise√Īado con DW mi web pero no s√© como hacer que se vea a toda pantalla, solo sale en el centro y tengo que colorear los lados para que no sea tan feo. NO encuentro como ampliar las distintas hojas cuando las creo a despu√©s, ¬Ņme pode√≠s ayudar? Gracias desde Palma de Mallorca – Espa√Īa

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