CREACION DE PÁGINAS WEB

Transcripción

1 CREACION DE PÁGINAS WEB CREAR LO QUE LLAMAREMOS SITIO WEB LOCAL En el escritorio del ordenador crear una carpeta llamada sitio web que sea donde guardes todos los archivos Dentro de ella guardaremos todos los archivos (páginas web, fotografías y demás archivos multimedia) que vayamos a publicar en la web. La página web principal debe llamarse index.html. GUARDAR LA PAGINA WEB - Ir a menú Archivo > Guardar como > (file/save as) teclear lo que queramos que aparezca en la barra de títulos de la página web y guardamos el archivo en la carpeta sitio web. Si el sitio tiene varias páginas (es decir, varios archivos html), la primera página o página principal debe llamarse index.html > Aceptar. - Los nombres de los archivos de un sitio web no deben superar los 8 caracteres, las letras deben ser minúsculas sin ñ y no deben tener espacios, acentos, puntos u otros signos de puntuación. ABRIR EL ARCHIVO HTML DESDE EL KOMPOZER - Abrir el Kompozer. Ir a menú Archivo > Abrir archivo (file/open file) o le damos al botón Abrir (open). Elegir el archivo html que estará en la carpeta que habíamos creado. PONER UN COLOR DE FONDO Para cambiar el color de fondo de una página que tenemos hacer format/page colors and background y en background elegir un color. También podemos: (aunque os recomiendo la de arriba) - Darle al botón de los 2 rectángulos de colores que aparece en la parte superior debajo de un desplegable que pone body text. El primer rectángulo es para el color del texto y el segundo para el color del fondo (igual que el color frontal y el color de fondo en photoshop), así que le damos a éste. - Elegir el color que queramos, el nuevo color debe ocupar el cuadrado inferior, si no es así hacer clic sobre la barra de color horizontal, conviene usar algún color predefinido ya que será visible de igual forma en todos los navegadores PONER UNA IMAGEN DE FONDO - Guardar la imagen que queramos poner de fondo, en la carpeta sitio web. - Menú Formato > Colores y fondo de la página (format/page colors and background) y elegir la imagen de fondo en el desplegable. - Observar que si la imagen es más pequeña que el tamaño de la página, se repetirá hasta ocuparla por completo (mosaico).

2 DESCARGAR FONDOS DE INTERNET - Entrar en la página > apartado Fondos > clic sobre el número de fondo > clic derecho > Ver imagen de fondo > clic derecho > Guardar imagen como > elegir la carpeta de destino (archivos) > Guardar. A continuación se pone como imagen de fondo en Kompozer tal y como se ha explicado en el apartado anterior Format/text style Format/size Format/remove links INSERTAR IMÁGENES Le damos al botón y entonces donde pone alternate text ponemos lo que Queremos que aparezca en la web antes de que se descargue la imagen. Por defecto el programa considera a la imagen como un carácter, por ello si queremos escribir a la izquierda o la derecha de la misma hacemos doble clic sobre la imagen > pestaña Appearance > en Align text to image podemos elegir cómo queremos que se aliniee.

3 Daros cuenta que sin más que hacer doble clic sobre la imagen podemos, en la pestaña dimensions darle a la imagen el tamaño deseado y que mejor convenga para nuestro diseño web. INSERTAR UNA BARRA HORIZONTAL - Menú Insert > horizontal line. Desde el código podemos modificar el ancho (width) y la altura (height). - Otra posibilidad consiste en insertar una barra que tengamos como imagen. Podemos descargarla de la página > apartado Barras. INSERTAR ANIMACIONES GIF - En apartado nanimaciones, podrás descargarte muchas animaciones.gif que podrás insertar en tu web sin más que hacerlo como si fueras a insertar una imagen. Recuerda que las extensión de los gifs animados es.gif INSERTAR UNA TABLA Clic sobre el botón TABLE > pestaña Precisely > poner el número de Filas (Rows) y Columnas (Columns). En Anchura (width) poner 100 %. El ancho de las celdas se adapta al contenido. - Situación de la tabla: clic sobre una celda de la tabla > clic sobre el botón Table > en el apartado table, y dentro de ella alignment. - Ancho de los bordes: clic sobre una celda de la tabla > en el apartado table clic sobre el botón poner los píxeles para el Borde, Espaciado y Relleno. - Color de toda la tabla: clic sobre una celda de la tabla > clic sobre el botón table > pestaña Table > clic sobre background color para elegirlo. Otra alternativa es con clic derecho sobre la tabla > table or cell background color Si luego ponemos un color para las celdas, el color de la tabla quedará para el borde y el espaciado. - Color de las celdas: seleccionar las celdas con clic y arrastre o haciendo clic sobre

4 ellas manteniendo pulsada la tecla [Ctrl] > boton derecho/ table or cell background color y elegir color para las celdas - Alinear el contenido dentro de las celdas: seleccionar las celdas > darle a los botones de alineación de texto - Unir celdas: seleccionar las celdas > clic derecho join selected cells. - Borrado de tabla, filas, columnas o celdas seleccionadas: clic derecho > table delete> y elegir la opción que queramos. INSERTAR UN ENLACE Hay que pulsar el boton LINK: Donde pone ENTER TEXT TO DISPLAY FOR THE LINK pondré las palabras que veré en la web desde las que iré a la página. En donde pone LINK LOCATION pondremos la dirección donde se encuentre el archivo al que tenemos que direccionar la página. Hay dos posibilidades: - a una página web: Pondré la dirección URL de la web. Por ejemplo si quiero ir a google tendré que escribir - a otro archivo de mi página: Tendré que poner la carpeta donde se encuentra alojado el otro archivo html. PONER LINK EN UNA IMAGEN Pinchar una vez sobre la imagen, botón derecho / create link y saldrá la ventana de la que hemos hablado en el apartado anterior. PONER VIDEO DE YOUTUBE Te conectas al youtube y pones el vídeo que quieres que se vea en la página. Al lado de la información de la persona que subió el vídeo hay un cuadro que pone insertar; pinchas y copias el código HTML que allí aparece. Una vez hecho esto, en el kompozer, en donde vayas a poner el vídeo escribes aquí ira el video de youtube. A continuación te pones en la vista SOURCE y en el código, localizas la frase que acabas de escribir. Una vez que la hayas localizado, la borras y pegas el código HTML del vídeo del youtube. Finalmente vuelves a la vista DISEÑO/DESIGN y verás como el aparece el vídeo INSERTAR UN ARCHIVO DE VÍDEO En el body, insertar, por ejemplo el siguiente código: <embed src="archivos/avion.flv" height="300" width="400" autostart="true" loop="false"/>

5 Donde avion.flv es el nombre del vídeo de ejemplo, que está dentro de la carpeta archivos. Height es la altura y width el ancho. INSERTAR MÚSICA EN LA PÁGINA WEB En el body, insertar, por ejemplo el siguiente código: <embed src="gimme%20the%20base.mp3" autostart="true" loop="false" height="300" width="400"> SONIDO DE FONDO PARA LA PÁGINA WEB - En la parte inferior le damos a la pestaña Código fuente. - Antes de la etiqueta </body> teclear lo siguiente: <embed src="archivos/musica.mp3" loop="true" autostart="true" controls="smallconsole" height="1" width="1"> - Suponemos que el archivo de música se llama musica.mp3 y está dentro de la carpeta archivos. - Con loop="true" indicamos que la música sonará en bucle. - Darle a la pestaña inferior Normal y al botón Guardar