Dreamweaver 8

Apartado 2

1 Crea un nuevo archivo CSS desde Archivo → Nuevo → Página básica → CSS.

2 Guárdalo (CTRL + S) y llámalo estilo_blog.css.

Apartado 3

1 Abre el archivo blog.dwt.php.

2 En el panel Propiedades despliega el campo Estilo y selecciona la opción Adjuntar hoja de estilos....

3 Busca el archivo estilo_blog.css que acabamos de crear y selecciona la opción Vincular.

Apartado 5

1 Coloca el cursor al prinicipio de la página delante del formulario del menú de salto.

2 Selecciona la opcion Insertar-->Objetos de diseño-->Etiqueta Div

3 Escribe contenido en el cuadro Id:

4 Pulsa en Aceptar

5 Coloca en cursor dentro del bloque

6 Selecciona Insertar → Objetos de plantilla → Región editable.

7 Llámala contenido

8 Pulsa Aceptar.

Apartado 6

1 Selecciona el formulario del menú por ejmeplo haciendo clic sobre la etiqueta <form> en la zona de etiquetas.Pulsa Aceptar.

2 Selecciona la opcion Insertar-->Objetos de diseño-->Etiqueta Div

3 Escribe seccion en el cuadro Id:

4 Pulsa en Aceptar

Apartado 7

1 Para asegurarte de que te colocas dentro del bloque y delante del formulario pasa a vista Código y coloca el cursor detrás de la etiqueta <div id="seccion"> y delante de la etiqueta <form..

2 Vuelve a la vista Código

3 Pulsa Intro (para crear un párrafo en blanco).

4 Escribe Categorías.

Apartado 8

1 Para asegurarte de que te colocas dentro del bloque y detrás del formulario pasa a vista Código y coloca el cursor detrás de la etiqueta </form> y delante de la etiqueta </div>

2 Vuelve a la vista Código

3 Pulsa escribe los párrafos y asígnales los vínculos (eso ya lo sabrás hacer).

Al final te quedará un código así:

<div id="contenedor">

<div id="contenido">

<!-- TemplateBeginEditable name="contenido" -->contenido<!-- TemplateEndEditable -->

</div>

<div id="seccion">

<p>Categor&iacute;as:</p>

<form name="form1" id="form1">

<select name="menu1">

<option value="#">Secci&oacute;n 1</option>

<option value="#">Secci&oacute;n 2</option>

<option value="#">Secci&oacute;n 3</option>

</select>

<input type="button" name="Button1" value="Ir" onclick="MM_jumpMenuGo('menu1','parent',0)" />

</form>

<p>&nbsp;</p>

<p><a href="../index.php">Principal</a></p>

<p><a href=../admin.php">Administraci&oacute;n</a></p>

</div>

</div>

4 Guarda los cambios.

1 Abre el archivo estilo_blog.css.

2 Escribe el siguiente estilo para el body:

body {

font-family: Tahoma;

font-size: 14px;

letter-spacing: 1px;

color: black;

}

3 Escribe el siguiente estilo para la clase titulo:

.titulo {

font-size: 18px;

}

4 Escribe el siguiente estilo para la clase datos:

.datos {

text-align: right;

font-size: 12px;

font-style: italic;

line-height: 0.2;

}

5 Escribe el siguiente estilo para los enlaces dentro de un párrafo:

p a {

text-decoration: none;

color: black;

}

1 Abre el archivo estilo_blog.css.

2 En la etiqueta body añade la siguiente línea:

body {

font-family: Tahoma;

font-size: 14px;

letter-spacing: 1px;

color: black;

background: url(imagenes/fondo_body.gif) no-repeat;

}

3 Escribe el siguiente estilo para el bloque con id contenedor:

#contenedor {

background: white url(imagenes/fondo.gif) no-repeat;

}

4 Escribe el siguiente estilo para el bloque con id seccion:

#seccion {

background: white url(imagenes/fondo_seccion.gif) no-repeat;

}

5 En estilo para la clase titulo añade la siguiente línea:

.titulo {

font-size: 18px;

background: url(imagenes/titulo.gif) no-repeat;

}

6 En el estilo para los enlaces de los párrafos añade la siguiente línea:

p a {

text-decoration: none;

color: black;

background-color: #CCFF66;

}

1 Abre el archivo estilo_blog.css.

2 En la etiqueta body añade la siguiente línea:

body {

font-family: Tahoma;

font-size: 14px;

letter-spacing: 1px;

color: black;

background: url(imagenes/fondo_body.gif) no-repeat;

margin: 0px;

}

3 En el estilo para el elemento con id seccion añade estas líneas:

#seccion {

background: white url(imagenes/fondo_seccion.gif) no-repeat;

border-right: 2px solid black;

border-left: 2px solid black;

border-bottom: 2px solid black;

padding: 20px;

padding-top: 90px;

}

4 Crea este estilo para los formularios dentro del bloque con id seccion:

#seccion form {

margin-bottom: 10px;

}

5 Crea este estilo para el bloque con id contenido:

#contenido {

padding: 190px 300px 30px 30px;

}

6 A la clase titulo añádele estas líneas:

.titulo {

font-size: 18px;

background: url(imagenes/titulo.gif) no-repeat;

padding-top: 30px;

padding-left: 35px;

}

7 Al estilo de los enlaces que se encuentran dentro de un párrafo añádele estas líneas:

p a {

text-decoration: none;

color: black;

background-color: #CCFF66;

padding-left: 2px;

padding-right: 2px;

}

1 Abre el archivo estilo_blog.css.

2 Al estilo para el elemento con id contenedor añádele esta línea:

#contenedor {

background: white url(imagenes/fondo.gif) no-repeat;

width: 800px;

}

3 Al estilo para el elemento con id seccion añádele esta línea:

#seccion {

background: white url(imagenes/fondo_seccion.gif) no-repeat;

border-right: 2px solid black;

border-left: 2px solid black;

border-bottom: 2px solid black;

padding: 20px;

padding-top: 90px;

width: 136px;

}

1 Abre el archivo estilo_blog.css.

2 Añade estas líneas al estilo para el elemento con id seccion:

#seccion {

background: white url(imagenes/fondo_seccion.gif) no-repeat;

border-right: 2px solid black;

border-left: 2px solid black;

border-bottom: 2px solid black;

padding: 20px;

padding-top: 90px;

width: 136px;

position: absolute;

top: 166px;

left: 533px;

}

 Cursos Informática Gratuitos