Creacin de pginas estticas

Copiar esta carpeta para los alumnos: carpeta de diseo web para alumnos por miguel\Captulo 1 creacion de pagina estatica creamos un sitio para colocar nuestra pagina.(sitio/nuevo sitio) Recuerda todos los cambios que hagamsos e guardaran en esta carpeta.

Ahora vamos a archivo/nuevo: y elegimos la lnea 14.

Una vez abierto nos daremos cuenta que la pagina esta en ingles, eso no importa asi que la grabamos con archivo/guardar index.html despus lo haremos con ctrl+S.

Aqu le ponemos un nombre a nuestra pgina.

Recuerda esta plantilla esta creada por defecto por el programa lo que tienes que hacer ahora es cambiar el contenido. Cambiando en titulo de cabecera de nuestra pagina Web Grabamos los cambios.

Ahora debemos de cambiar los bloques internos que hay: Marcamos y borramos ese grupo de ah copiamos de nuestra carpeta vacaciones.rtf el texto y lo colocamos aqu de esta manera.

Aadiendo imgenes a nuestra pagina Web Seleccionamos esa seccin y la borramos. Despus vamos a Insertar/Imagen o Ctrl+Alt+I, una vez que salga la ventana vamos a nuestra carpeta local y elegimos el archivo baile_marinera.jpg.

En la parte de texto alternativo es importante poner Baile de marinera nortea, ya que as hacemos que nuestra pagina sea mas rapida de coloca rse en el buscador y adems nos ayudara con personas discapacitadas.

Ingresaremos otra imagen ponemos nuestro cursor a la altura de la palabra mas: e ingresamos otra imagen esta vez sera playa _piura jpg. Creando enlaces a otras paginas Web Buena en esta parte no solo haremos enlaces a nuestras pginas que nosotros hagamos sino tambin a otras paginas que estn en Internet sea fuera de nuestro diseo. Seleccionamos y cada uno y en la opcin vnculos damos la ruta que va a llevar. Ejm: Mas informacin = informacin.html PCLeticia = http://www.pcleticia.com/

Seleccionando y modificando con estilos CSS

Ventana/estilos CSS; de ah en el panel de estilos CSS elegimos todos. Elegimos la opcin Body y luego la opcin Editar estilos.

Y elegimos el color blanco.

Presionamos la tecla F4 para ocultar momentneamente los paneles y veras que el fondo a cambiado de color.

Insertando imgenes con estilos CSS Las imgenes de fondo las vamos a ingresar a manera de CSS: Coloca el cursor al lado de Unas vacaciones en el Per. Y elige la opcin de la parte inferior. (<div #header>) En la paleta de stilos elegimos Actual y Modificar el estilo seleccionado.

Dentro del cuadro elegimos FONDO y le damos a examinar y elegimos fondo cielo.

Modificando tipo de letra con estilos CSS Sombreamos unas Vacaciones en el Per .

Le damos a la paleta stilos y elegimos ACTUAL luego EDITAMOS.

Modificndole tamao de letra y espaciado con estilos CSS

Visualizando el acabado denuestra pagina web Para esto es necesario ir a Archivo/vista previa del navegador