Hola 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!
- ¿Cuál es la diferencia entre XHTML, HTML y HTTP?
- ¿Existen atajos de teclado en Dreamweaver? ¿Cuáles son?
- ¿Cuál es la mejor herramienta para poner texto sobre un fondo, ya sea un color pleno, en gradiente o sobre una imagen?
- ¿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?
- ¿Cómo inserto un botón de Adobe Flash con Adobe Dreamweaver y asegurarme de que funcione?
- ¿Puedo hacer que un link me lleve a otra parte del mismo HTML? ¿Qué etiqueta uso?
- Receta para hacer un formulario. ¿Qué debo poner en la parte de accion? ¿Cómo validar?
1. Diferencia entre XHTML, HTML y HTTP
-
Se escribe con estructura tree o de árbol (ver imagen) - Todo tag debe cerrar:
<a>texto</a> - Los tags deben cerrar en orden inverso al que fueron abiertos:
<p><strong>texto</strong></p> - Los tags pueden contener atributos:
<tag atributo="valor"> - Debe haber una raÃz obligatoria. Esto significa que tiene que existir un tag que encierre al resto:
<html>
<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: 
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.
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:
- El enlace (Ej.: Pregunta 1)
- 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:
- Clase 21: Formularios
- ¿Qué es un formulario?
- Funcionamiento
- Atributos
- Conclusión
- Clase 22: Dentro del formulario
- Elementos del formulario 1
- Propiedades
- Conclusión
- Clase 23: Dentro del formulario (2)
- Elementos del formulario 2
- Propiedades
- Conclusión
Taller de PHP:
- Clase 7: EnvÃo de datos de un formulario
- ¿Cómo armar un formulario para que sea procesado por Php?
- Diferentes formas de enviar un formulario
- Variables POST y GET
- Clase 8: Procesar un formulario (Parte I)
- ¿Cómo procesar un formulario?
- ¿Diferentes tipos de campos?
- Inputs
- Clase 9: Procesar un formulario (Parte II)
- Textarea
- Clase 10: Procesar un formulario (Parte III)
- Selectbox
- Clase 11: Procesar un formulario (Parte IV)
- Recibiendo los datos
- contacto_script.php
- Cuerpo del mensaje
- Función mail
- Script completo
| << CLASE ANTERIOR |
Lunes, 29 de Septiembre de 2008 a las 17.14
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!
Martes, 30 de Septiembre de 2008 a las 11.05
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>
Domingo, 11 de Enero de 2009 a las 18.07
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
Domingo, 26 de Abril de 2009 a las 19.01
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
Jueves, 18 de Febrero de 2010 a las 04.47
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??
Jueves, 9 de Septiembre de 2010 a las 16.23
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.
Jueves, 18 de Noviembre de 2010 a las 09.01
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