CREAR PAGINA WEB COMPLETA PRACTICA 1/4 *CREAR SITIO WEB

CREAR PAGINA WEB COMPLETA
PRACTICA 1/4
*CREAR SITIO WEB
MENU SITIO>NUEVO SITIO
Damos un nombre
Elegimos una carpeta de la computadora o algún dispositivo, para guardar los archivos.
Guardar.
En el panel Archivos podremos encontrar todas nuestras páginas a medida que las vayamos
creando.
Vamos a crear la primera página, y le daremos el aspecto general que tendrán todas las páginas
del sitio.
*CREAR LA PAGINA WEB
MENU ARCHIVO>NUEVO
Seleccionamos Pagina en blanco
Usamos una página HTML, ya que en este caso las páginas serán estáticas.
Además vamos a usar uno de los diseños predefinidos de Dreamweaver.
Buscamos un diseño de ancho fijo, con una columna a la izquierda para el menú, encabezado y pie.
Selecciona la opción Dos columnas fijas, barra lateral izquierda, encabezado y pie.
En la sección Diseño CSS elige: Crear nuevo archivo
Finalmente clic en crear.
Le damos nombre a la nueva hoja: estilos
Guardamos nuestra pagina, Archivo>Guardar como>
Recordemos que será la base de nuestra web, asi que podemos ponerle el nombre de nuestra
pagina.
Para visualizar la pagina web en el navegador pulsa la tecla F12.
MODIFICAREMOS LOS ESTILOS CSS ACTUALES, DE ACUERDO A NUESTRAS NESECIDADES.
Activemos el panel de Estilos CSS, desde Ventana>Estilos CSS
Ubicala del lado derecho de la interfaz y podras ver en la sección de reglas, todas las que aparecen
en la hoja.
Vamos a cambiar las reglas del body, que normalmente es donde se definen los aspectos
generales del texto.
Haciendo doble clic la editamos.
Aparecerá el editor de propiedades CSS, desde aquí podras cambiar cualquier propiedad de una
forma fácil y grafica, sin necesidad de usar código.
Por ejemplo: cambiemos el tipo de fuente y el tamaño.
Al tener los cambios requeridos, da clic en aceptar.
AJUSTEMOS EL ANCHO DE LA PAGINA
Todos los elementos están dentro del div con la clase container, por lo que será ahí donde
establecemos el ancho fijo, da doble clic sobre la clase container en ESTILOS CSS y procede a
realizar las modificaciones.
PRACTICA 2/4
EDITAR LA CABECERA DE NUESTRA PAGINA
SELECCIONAMOS LA SECCION SUPERIOR IZQUIERDA, Y PRESIONAMOS LA TECLA SUPR.
TENDREMOS TODA LA SECCION SUPERIOR PARA UTILIZARLA.
QUITAREMOS EL COLOR DE FONDO DE LA CABECERA E INSERTAR UNA IMAGEN
CLIC EN DIV.HEADER EN LA SECCION DE LA BARRA DE ESTADO, PARTE MEDIA INFERIOR DE LA
INTERFAZ, LUEGO EN LA SECCION DE ESTILOS CSS DAR CLIC EN HEADER, Y EDITAR EL FONDO DE
LA CABECERA.
PARA INTRODUCIR UNA IMAGEN EN EL TITULO, PERO EN VEZ DE PONERLA DIRECTAMENTE, LA
VAMOS A PONER COMO FONDO DEL ENCABEZADO.
CLIC EN FONDO(EN LA INTERFAZ DE EDICION DE LOS ESTILOS CSS)
EN LA OPCION BACKGROUND-IMAGE, DAMOS CLIC EN EXAMINAR, UBICAMOS LA IMAGEN
QUE DESEAMOS AGREGAR, CENTRAMOS LA IMAGEN EN EL RANGO DE LAS X, Y POR EL LADO DE
LAS Y, DAMOS LA OPCION TOP. INDICAMOS QUE NO DESEAMOS QUE SE REPITA LA IMAGEN.
**MENU
SELECCIONA TODO EL TEXTO DE LA COLUMNA BEIGE JUSTO DEBAJO DE LA SECCION DE MENU EN
COLOR VERDE, Y PRESIONA LA TECLA DE SUPR.
SE INDICARA COMO MODIFICAR EL TEXTO DEL MENU Y LOS VINCULOS, DEL PRIMER ELEMENTO,
ASI A MANERA DE PRACTICA EDITARAS LOS SIGUIENTES.
DA CLIC SOBRE EL PRIMER ELEMENTO DEL MENU, Y ESCRIBE INICIO, EN LA SECCION DE
PROPIEDADES, EN LA PARTE INFERIOR DE LA INTERFAZ UBICATE EN LA SECCION VÍNCULO Y
ESCRIBE index.htm
Cerremos ese archivo, y creemos un nuevo archivo en blanco para realizar la pagina de inicio
llamada index.htm
ARCHIVO>NUEVO>PAGINA EN BLANCO> HTML> 1 COLUMNA FIJA, CENTRADA
Y EN DISEÑO CSS: ELIGE CREAR NUEVO ARCHIVO.
EDITEMOS LA PAGINA DE INICIO. (LIBRE)