Pasos esenciales para empezar a trabajar en DW CS5

A la hora de "colocar" (subir al servidor web) tus archivos , recuerda que:
 -fotos y ficheros HTML, DEBEN estar juntos
-si cambias la carpeta de trabajo, debes tener cuidado con los enlaces



Hay 2 tipos de enlaces: absolutos y relativos

-Absolutos: algo concreto (p.ej: www.marca.es) o bien un archivo del escritorio

-relativos:  ../hinchas.html  (dentro del menú lateral, puedo ir a ese apartado concreto)

Ahora bien, una vez que entres en hinchas, puedes ver varias opciones para elegir, de forma que tengamos celtarras.html , celestes.html ....

Lo primero, es plantear el sitio web (cuántos apartados necesito):

PRIMERO, hacer un "mapa" (es decir, saber qué necesito):

-página de bienvenida: si usáis marcos, ese marco "general", se llamará INDEX (sólo contiene una división en 2 partes de la pantalla, luego se cargan por separado el menú y lo que vaya apareciendo por la derecha)

¿cómo lo hago? primero, archivo_nuevo html. Con ese documento en blanco, puedo insertar mi primer "marco". Por eso voy a "insertar" , "html", marcos y elijo uno, p.ej: "izquierda"

Ahora la pantalla se divide en 2 partes. Una pequeña a la izquierda y otra, más grande (mainFrame).

En la parte izquierda pondré mi menú. Puedo ir creándolo, poco a poco. En la parte derecha, debería poner información adicional (que amplía lo que ya tengo en el menú) o bien un resumen de lo que podrá ver la gente, junto un pequeño mensaje de bienvenida.

Ahora debería guardar la página. En el lado izquierdo, aún no tiene nombre (pone "Untitled"). Tengo que ir a "Archivo_Guardar marco como" y le pongo el nombre deseado (menu).
No hay tildes, ni espacios, ni eñes (tampoco pongo .html)

Lo siguiente, será guardar el marco principal (el de la derecha), al que llamo "principal", siguiendo el paso anterior.

Por último, debo guardar el marco "entero" , por lo que hago clic en el marco externo o en la división entre marcos. Este marco "entero", debo llamarlo index  (en latín: índice), porque es el único archivo que cargará el servidor cuando alguien visite mi página web.

Tengo toda la estructura básica planteada. Ahora debo completar mi página web:

primero, en el menú, puedo ir situando, uno tras otro, todos los apartados que necesito tener (historia , que ver, donde comer, como llegar....). Esto, para sitios turísticos.

Si es una empresa, tendremos el típico: quienes somos, que ofrecemos, donde estamos, contacto...... ofertas.......

Todo esto me sirve de "guión". Ahora tengo que ir creando archivos separados con los nombres correspondientes, p.ej:

"quienes somos" (en el menú izq) , me llevará a quien_soy.html

"donde estamos", me podría llevar a la pag.web "situacion.html"

Cada fichero html, lo voy creando directamente en "archivo" , nuevo html. Veré que aparece en la barra superior. Puedo crear todo de un "plumazo"y luego "guardar todo", pero no tendré la seguridad de que está guardando en orden los ficheros.

Como guardar y publicar es "un coñazo", deberé asegurarme de que en la opción de Administrar Sitios, tiene marcada la casilla de "guardar y actualizar automáticamente".


Otros elementos que ya conocemos serían:

insertar _ imagen (para poner fotos)

insertar _ media (para insertar sonidos, archivos SWF o videos que ya tengamos, aunque es mejor cogerlos desde youtube).

Si quiero un video de youtube, lo busco. Justo debajo, aparece el botón "Compartir" (lo pulso). Ahora, verás una dirección web (paso de ella) y debajo, el botón "insertar".

Al darle, nos mostrará el código para ver videos de youtube directamente en mi página. P.ej:

<iframe width="420" height="315" src="http://www.youtube.com/embed/ZFVfB4Tnf-M" frameborder="0" allowfullscreen></iframe>

(recordad que la palabra width es "anchira" y "height" es la altura, podemos cambiarlo a nuestro antojo)

insertar tabla (útil para poner una foto y que esa foto sea más grande si la pantalla es grande y más pequeña si la pantalla es de un teléfono , tablet, smartphone, etc)

insertar _ objeto de diseño _ div pa (las "capas")

insertar _ formulario _ menú de salto (para poner opciones en una lista desplegable, al elegir una, nos llevará al enlace que hayamos asociado a cada palabra o frase)