Instrucciones Generales

Transcripción

1 Centro de Apoyo Vida Abundante P.O. Box 8852 Ponce, PR, Teléfono: Módulo 1 Preparado por: Dr. Gerardo Cartagena Instrucciones Generales Antes de empezar a trabajar con su Página Web es importante conocer los siguientes datos y practicarlos. Notas: 1. Se prohíbe la reproducción total o parcial de este documento el cual tiene Derechos Reservados. 2. Los estudiantes tienen permiso para copiar los códigos que necesite y editarlos con la información que desee. 1

2 1. Recomendaciones importantes a. Hacer cuenta en Youtube b. Hacer por lo menos dos cuentas de correos electrónicos c. No se preocupe si de momento la información que sigue le parece muy técnica, tan solo siga las instrucciones y practique. De esta manera entenderá que es fácil. d. Trate de no dedicarle más de 30 minutos a este Módulo ya que en el Módulo 2 tendrá la oportunidad de de hacer la aplicación práctica. 2. En su Página Web usted puede escribir de manera normar la información, anuncio o mensaje que usted quiera llevar, además en cada página puede añadir videos, banners, fotos e información utilizando los siguientes códigos, luego que edite la información como usted lo desea o haya codificado sus banners, fotos, etc., los copiará (Copy) los pegará (Paste) en su Página de Internet según aprenderá en el Módulo 2. a. Si desea resaltar alguna información puede utilizar los siguientes códigos: El color varía dependiendo el código que utilice, también puede combinar códigos Solo sustituya la información sombreada en Amarillo por la que usted desea. <b>dios es Amor</b> Así se verá en su Página Web Dios es Amor <u>dios es Amor</u> Así se verá en su Página Web Dios es Amor La tabla de colores está en la página 6 2

3 b. Combinando estos dos códigos <span style="font-size:40px"><span style=></span > <span style="color:#ff0099">dios es Amor </span > Así de vera en su Pág. Web Dios es Amor Lo que tiene que cambiar es el tamaño de la letra (40) al tamaño que usted desee y el color que usted prefiera (ff0099) según la tabla de colores que está en la pagina 6. Puede sustituir el mensaje (Dios es Amor) al que usted desee. Todo lo demás debe quedarse igual. Solo sustituya la información sombreada en Amarillo por la que usted desea. La tabla de colores está en la página 6 Nota Importante Le recomendamos tener un File donde usted pueda guardar todo lo relacionado a su página; fotos, información, documentos y que siempre que codifique un banner, información etc., también lo guarde debidamente identificado en este archivo. 3

4 c. Utilice: Solo sustituya la información sombreada en Amarillo por la que usted desea. <h2>dios Es Amor</h2> Para que Dios Es Amor quede dentro de una línea como título o haciendo separación de tema. La línea saldrá del color principal de la página y Dios es Amor del color de los números del calendario. Así se verá en su Página Web <h1>dios Es Amor</h1> Dios Es Amor Saldrá en tamaño más grande y del color del título principal de la página Solo sustituya la información sombreada en Amarillo por la que usted desea. 4

5 d. Utilice el siguiente código donde saldrán las palabras moviéndose de derecha a izquierda continuamente. <MARQUEE bgcolor="white" WIDTH="500" HEIGHT="80" LOOP="infinite"> <FONT Size="2" Face="arial " COLOR="black"> <span style="color:#ff0000"> <span style="fontsize:40px"><span style=></span > <span style="color:#009999"> Página de Internet Personalizada </span > </span > </FONT> </MARQUEE></B> Puede cambiar el texto (Página de Internet Personalizada), el color de la letra (009999) y el tamaño de la letra (40) al que usted desee. Así se verá en su Página Web con las letras en movimiento de derecha a izquierda. 5

6 Tabla de Colores 6

7 3. Utilizando En flashvortex.com usted puede hacer banners con movimiento 1. Valla a 2. Escoja el estilo y el tamaño del banner que desee 3. Siga las instrucciones 4. Cuando genere el banner copie el código y péguelo en la página que desee(easy Copy / paste this code into your site) Ejemplo: <script src=" type="text/javascript"></script> Así se verá en su Página Web 7 7

8 4. Utilizando : Es un sistema sencillo pero útil para hacer banner. Aunque tiene pocas opciones, pueden ser de gran utilidad si se manejan adecuadamente. Prácticamente lo que se necesita es seguir las instrucciones del mismo sistema para hacer un banner. Ejemplo Así se verá en su Página Web 8

9 5. Utilizando Con tinypic usted puede codificar un banner, una foto, arte hecho en Publisher, etc. a. Prepare su banner en cualquier programa que tenga disponible. Es fácil hacer banners en Publisher. Las fotos las puede editar en Publisher o en el programa picasa el cual puede bajar en Luego que prepare su banner, guárdelo en el archivo que usted desee en su computadora. b. Valla a la página c. Suba ( Browse) el banner, una foto, arte hecho en Publisher (nota: el arte hecho en Publisher debe haberlo guardado en JPEG File Interchange Format ). Para hacerlo tiene que abrir el arte hecho en Publisher, valla a file luego a save as donde dice save as a type escoja JPEG File Interchange Format. d. Tinypic le dará unos códigos, copie el primero (HTML for Websites) Nota Para que sea más fácil editar, copie el código y péguelo en Microsoft Word, luego que lo edite, cópielo y péguelo en el lugar que desee de su Página Web. 9

10 Ejemplos de tinypic: Ejemplo 1 de tinypic: Así sale de tinypic: <a href=" target="_blank"><img src=" border="0" alt="image and video hosting by TinyPic"></a> a. Si quieres utilizarlo para que te lleve a otra página (link) debes copiar la dirección de la otra página, a donde quieres que te lleve. (Ejemplo y ubicar esta dirección de la siguiente manera en el código anterior (sustituyendo lo sombreado) Quedará así <a href=" target="_blank"><img src=" border="0" alt="image and video hosting by TinyPic"></a> <a href=" src=" border="0" alt="image and video hosting by TinyPic"></a> Como notas se sustituyó target= por 10

11 b. Si lo que desea es que se vea el mensaje que tiene el banner solamente debes eliminar lo que está sombreado en amarillo. <a href=" target="_blank"><img src=" border="0" alt="image and video hosting by TinyPic"></a> Quedará así <a hrefblank"><img src=" border="0"></a> Ejemplo 2 de tinypic: Si quiere que un documento completo se vea en una página siga las siguientes instrucciones. 1. Prepare el documento en Publisher (nota: el arte hecho en Publisher debe haberlo guardado en JPEG File Interchange Format ). Para hacerlo tiene que abrir el arte hecho en Publisher, valla a file luego a save as donde dice save as a type escoja JPEG File Interchange Format y guárdelo. 2. Valla a la página 3. Suba el documento (Browse) 4. Escoja el tamaño 5. Tinypic le dará unos códigos, copie el primero (HTML for Websites) 6. Así sale de tinypic: <a href=" target="_blank"><img src=" border="0" alt="image and video hosting by TinyPic"></a> Elimine lo que está sombreado, cópielo y péguelo en cualquier página. <a href=" target="_blank"><img src=" border="0" alt="image and video hosting by TinyPic"></a> Quedará así: <a hrefblank"><img src=" border="0"></a> 11

12 Ejemplo 2 de tinypic: Así se verá en su Página de Internet 12

13 6. Banner especial o marco para resaltar información Utilizando este código la información quedará dentro de un marco. Para promocionar actividad o días de actividades con horario o para enfatizar una reflexión o mensaje. Solo cambie la información sombreada en amarillo por la que usted desea. Puede cambiar el tamaño de la letra y del marco solo cambie los números sombreados de color verde. Para cambiar los colores del marco solo cambie los códigos sombreados en gris, utilice la tabla de colores y escoja el que usted desee. Ejemplo 1 <br> <br> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"> <table border="5" bordercolor="2c4491" style="background-color:#ffffff" width="35%" cellpadding="9" cellspacing="3"><tr> <td><font size="5"><center>horario de servicio</font> </center></tr> <tr> <td><center><font size="3">lunes 6:30pm-7:30pm <br>?????viernes 7:30pm-10:00pm <br>culto de adoración<br> Domingo 9:00am-10:45am <br>escuela dominical, 11:00am-12:30pm<br>Culto de adoración</font></td> </p> </table> <br> <br 13

14 Así se verá el ejemplo 1 en su Página Web 14

15 Pase al Módulo 2 Es el momento de practicar Felicidades pronto podrá manejar Páginas Web 15