15. De Photoshop a Dreamweaver

<< 14. Introducción a etiquetas Div y estilos CSS                 16. Plantilla >>

En el siguiente tutorial vamos a dar forma en DW al diseño que hemos creado en PH, utilizando estilos CSS y etiquetas DIV.

Para realizar las prácticas vamos a seguir el paso a paso de los pantallazos.

 

papel y web

01. Copiar PSD_a_DW.html

Para ayudarnos en el proceso tenemos un documento en C:.. / Sitio_Final / 15_PSD_a_DW / PSD_a_DW.html, lo seleccionamos con el botón derecho y desplegamos el menú contextual para ir a Edición / Copiar. Lo copiamos.

papel y web

02. Nueva carpeta

En el Panel Sitio volvemos a nuestro sitio  C:.. / Mi_Sitio  seleccionamos la carpeta raíz Mi_Sitio y con el botón derecho desplegamos el menú contextual para ir a Nueva carpeta. La creamos y la llamamos 15_PSD_a_DW.

papel y web

03. Pegar

Seleccionamos la nueva carpeta 15_PSD_a_DW y desplegamos el menú contextual con  el botón derecho del ratón y pegamos el documento PSD_a_DW.html en Edición / Pegar.

papel y web

04. Seleccionar Crear DIV

Abrimos el documento Mi_Sitio / 15_PSD_a_DW / PSD_a_DW.html y seleccionamos todo el texto, para crear un DIV que envuelva a todo el contenido de la página, con la selección activa vamos a Insertar / Objetos de diseño / Etiquetas DIV. En la ventana Insertar etiqueta Div le damos un ID: envoltorio y creamos una Nueva regla CSS.

papel y web

05. DIV_Envoltorio

En la ventana definición de regla para #envoltorio vamos a la categoría Cuadro y le damos un ancho (Width) de 1024 px, y para que la página se centre en la ventana del navegador le vamos a dar valores a Margin – Top: 0, Right: auto, Buttom: 0, Left: auto –

papel y web

06. Resultado Envoltorio

papel y web

07. DIV_Cabecera

Borramos el texto hasta 2_Cabecera. Seleccionamos el texto del párrafo “2_Cabecera. Creamos….” , para crear un DIV en el que alojemos la cabecera. Con la selección activa vamos a Insertar / Objetos de diseño / Etiquetas DIV. En la ventana Insertar etiqueta Div le damos un ID: cabecera y creamos una Nueva regla CSS.

papel y web

08. Cabecera 1024 x 150 px.

En la ventana definición de regla para #cabecera vamos a la categoría Cuadro y le damos un ancho (Width) de 1024 px y un alto (Height) de 150 px, que son las medidas que le hemos dado en PH a nuestra cabecera. Borramos el texto que está dentro de #cabecera y arrastramos dentro la imagen Mi_Sitio / 13_Boceto_Plantilla / imagenes / Cabecera.png. Comprobamos el resultado.

papel y web

09. DIV_Navega

Borramos el texto hasta 3_Navegación. Seleccionamos el texto del párrafo “3_Navegación. Pasamos….”, para crear un DIV en el que alojemos la barra de navegación. Con la selección activa vamos a Insertar / Objetos de diseño / Etiquetas DIV. En la ventana Insertar etiqueta Div le damos un ID: navega y creamos una Nueva regla CSS.

papel y web

10. Resultado Navega

En la ventana definición de regla para #navega vamos a la categoría Cuadro y le damos un ancho (Width) de 1024 px y un alto (Height) de 25 px, que son las medidas que le hemos dado en PH a nuestra barra de navegación. Borramos el texto que está dentro de #navega y arrastramos dentro la imagen Mi_Sitio /13_Boceto_Plantilla / imagenes / Navega_Inicio.png.

Puede que tengamos problemas para insertar la imagen en la etiqueta DIV, si es así tenemos que copiar el código y pegarlo dentro de la etiqueta DIV:

<div id=”navega”><img src=”../13_Boceto_Plantilla/imagenes/Navega_Inicio.png” width=”1024” height=”25” /></div>

Para que el código quede así:

… <div id=”envoltorio”>

<div id=”cabecera”><img src=”../13_Boceto_Plantilla/imagenes/Cabecera.png” width=”1024″ height=”150″ /></div>

<div id=”navega”><img src=”../13_Boceto_Plantilla/imagenes/Navega_Inicio.png” width=”1024″ height=”25″ /></div> …

papel y web

11. Div_Editable

Seleccionamos el texto del párrafo “4_Editable. Ahora….”, para crear un DIV en el que alojemos la Región editable. Con la selección activa vamos a Insertar / Objetos de diseño / Etiquetas DIV. En la ventana Insertar etiqueta Div le damos un ID: editable y creamos una Nueva regla CSS.

papel y web

12. Resultado Editable

En la ventana definición de regla para #editable vamos a la categoría Cuadro y le damos un ancho (Width) de 1024 px.

papel y web

13. DIV_Pie

Seleccionamos el texto del párrafo “5_Pie. Y para….”, para crear un DIV en el que alojemos el pie de nuestras páginas web. Con la selección activa vamos a Insertar / Objetos de diseño / Etiquetas DIV. En la ventana Insertar etiqueta Div le damos un ID: pie y creamos una Nueva regla CSS.

papel y web

14. Resultado Pie

En la ventana definición de regla para #pie vamos a la categoría Cuadro y le damos un ancho (Width) de 1024 px y un alto (Height) de 25 px, que son las medidas que le hemos dado en PH al pie de la página. En Clear seleccionamos both. Borramos el texto que esta dentro de #pie y arrastramos dentro la imagen Mi_Sitio / 13_Boceto_Plantilla / imagenes / Pie.png.

Puede que tengamos problemas para insertar la imagen en la etiqueta DIV, si es así tenemos que copiar el código y pegarlo al final de la etiqueta <div id=”envoltorio”>: 

<div id=”pie”><img src=”../13_Boceto_Plantilla/imagenes/Pie.png” width=”1024” height=”25” /></div>

Crear las carpetas del curso

C: … / Cursos / Curso_Dreamweaver /  Curso_Final. Contiene los archivos finalizados que vamos a necesitar para completar las prácticas de curso.

C: … / Cursos / Curso_Dreamweaver /  Mi_Sitio. Es donde realizaremos las prácticas.

Si es necesario crea las carpetas que necesites. Es muy importante mantener la estructura de carpetas que recomendamos en estos apuntes, para seguir el curso sin perdidas de tiempo adicionales.

Envia un comentario

Debes ser Conectado Para publicar un comentario.