(*) Lectura básica indispensable

Transcripción

1 Índice de contenido Forma de ingreso al SiteBuilder * 1 Primer paso el Diseño Selección de Apariencia del sitio * Selección de color de plantilla * Selección del Banner * Selección de estilo de botones * Selección de logotipo * Selección de Introfalsh * Segundo paso Páginas Añadir y editar titulo de página * Añadir secciones (Página tipo html, de imágenes o shop)* Mover páginas * Tercer paso Editar Cambiar formato de texto* Ayuda sobre la Barra de herramientas de formato * Ayuda sobre la Barra de herramientas estándar * Como agregar una Imagen * Insertar un Link Web * Ayuda sobre la Barra de herramientas de tablas * Como agregar un contador (opcional) Insertar un Blog (opcional) Construir un formulario (opcional) Crear un Foro Web (opcional) Insertar un Libro de Visitas (opcional) Editor de RSS Reader (noticias en línea, opcional) Editor de Scripts (opcional) Crear un Editor de votación (opcional) Configuración de Sección (Página) de Imágenes * Manejo de subsecciones * Cuarto paso Propiedades Configuración de Metatags * Quinto paso Publicar Como publicar el sitio * 57 (*) Lectura básica indispensable

2 Antes que todo deberá Solicitar su Activación de Usuario y Clave para poder grabar directamente en su sitio Web, esto deberá realizarse vía mail el cual será contestado de forma inmediata. ***** Nota: Hacer ZOOM para ver mejores detalles de la imagen. Para Paquetes PHB y PHBP 1. Paso, ingresar en su explorador de Internet : Después aparecerá la siguiente pantalla: Usuario Clave Login Ingresar Identidad del sitio en este caso es el Usuario (Administrativo) y Clave proporcionado anteriormente por su administrador del sitio, después solo presionar Login. 2

3 PASO 1 DISEÑO Cuando aparezca esta pantalla ya podemos iniciar con el paso 1 el Diseño, presionando sobre diseño en cualquiera de sus 2 botones. Diseño Como primer paso seleccionar el Diseño que desea emplear para su sitio presionando sobre Selecc. Apariencia o buscar un estilo de diseño diferente presionando sobre la Sección de Categoría o se puede Seleccionar otra pagina para ver mas opciones de diseños. Selecc. Apariencia Selecc. Otra página Selección de Categoría 3

4 1. Una vez seleccionado un diseño aparecerá en color Naranja su marco y botones. 2.Ya que hemos seleccionado el otra Diseño, puedes Seleccionar página personalizar seleccionar el color de la plantilla presionando sobre Color Plantilla. A continuación el sistema presentara hasta 3 opciones de colores para seleccionar el color de la plantilla que vaya acorde con nuestras expectativas del sitio, la plantilla que aparece inicialmente en color naranja es la que seleccionamos inicialmente en el diseño, las opciones en colores difieren entre los distintos estilos de diseños que se presentan, una vez seleccionado el color preferido solo presionar sobre SELEC. COLOR de la plantilla con el color que hemos seleccionado de las opciones que se muestran, de igual forma lo presentará con su marco y botones en color naranja para confirmar que lo hemos seleccionado. Seleccionado inicialmente Para seleccionar un nuevo color presionar sobre SELEC. COLOR 4

5 Una vez seleccionado el color de plantilla preferido, puedes cambiar el banner superior presionando sobre el botón que dice Banner Superior El sistema presentará el Banner preseleccionado con marco y botones color naranja, y el sistema presentara hasta 3 opciones para seleccionar uno diferente o dejar el mismo, los cuales siempre son diferentes de acuerdo al diseño seleccionado, para seleccionar uno diferente solo presionar sobre SELECT. BANNER. Banner preseleccionado Para seleccionar un Nuevo banner presionar SELECT. BANNER. 5

6 Una vez Seleccionando el Banner superior que se utilizará en nuestro sitio esta marcado de color naranja, posteriormente se puede seleccionar un diseño distinto de los botones que aparecerán en nuestro diseño, solo debes seleccionar el tipo de botón presionando sobre Botones. 1. Banner Seleccionado 2. Para cambiar el estilo de los botones del diseño, presionar sobre BOTONES. El Sistema presentara generalmente 3 opciones de botones a seleccionar, siempre diferentes de acuerdo al diseño, se presentara con marco y botones color naranja el estilo seleccionado inicialmente, al presionar sobre SELEC. BOTON podemos seleccionar un diseño de botón diferente. Diseño de botones Seleccionado inicialmente. Presionar SELECT. BOTON, para cambiar su diseño. 6

7 Una vez seleccionado el tipo de botón aparecerá con su marco y botón en color naranja presentándolo como el seleccionado, después presionar sobre Logotipo para subir nuestro propio logo y personalizar aún más nuestro sitio si así se desea. 2. Para subir nuestro propio logo, presionar sobre Logotipo. 1. Diseño de botones Seleccionado. El logotipo deberá estar en formato JPG (formato utilizado para almacenar y transmitir archivos de fotos en la Web) y se recomienda una medida de 42 x 42 Píxeles (tamaño de la imagen), donde se deberá buscar la ruta o ubicación donde se encuentra la imagen que tomaremos como logotipo, después solo presionar sobre Browse y aparecerá la pantalla que se muestra a continuación (Figura 1) donde podrá indicar la ubicación y nombre del logo a subir al sitio, después solo deberá presionar sobre Open. ****NOTA: el nombre de la imagen no puede contener espacios ni caracteres especiales. 1. Dar click en Browse Figura 1 (Aparecerá esta pantalla) 2. Seleccionar la imagen de logotipo (ejemplo). 3. Dar click en Open 7

8 Una vez que se haya seleccionado la imagen, solo presionar en Cargar. Aparecerá el logo cargado al sistema. SiteBuilder ofrece la opción de Intro Flash, la cual es un una introducción con animaciones flash que aparecen al momento de entrar al sitio que diseñamos. Si desea agregar uno favor de presionar Intro flash. 8

9 1. Seleccionar Activar Introducción Flash 2. Ingresar Texto de Cabecera 3. Ingresar Texto Cuerpo Central 4. Seleccionar Esquema de Fondo 5. Seleccionar Esquema de Objetos El Flash Intro Seleccionado aparece marcado de color Naranja. En la parte baja se puede previsualizar el resultado de las modificaciones hechas. 6. Por ultimo seleccionar Aplicar. Una vez terminado el Flash Intro seleccionar información. 9

10 2. Puede previsualizar como va su diseño Web. 1. Ingresar el lema de la empresa en el primer recuadro, seguido de nombre de a quien pertenecen los derechos reservados, la dirección del sitio y finalmente el nombre de la empresa. Dicha información se vera reflejada en la pagina de inicio en nuestro sitio. 3. Finalmente dar click en Aplicar. >> Paso 2 PAGINAS << Con lo anterior se termina la parte de Diseño, por lo que debemos seguir con el paso 2. Páginas, para seguir con la creación de las diferentes secciones tales como, misión, visión, contacto, etc. 10

11 De acuerdo al Diseño, el sistema propone las diferentes secciones que pudiesen utilizarse dentro del sitio Web, seleccione las que guste agregar a su página presionando sobre la casilla correspondiente a dicha sección. Por último presione Añadir páginas seleccionadas. Todo diseño tiene como primer pagina la sección de Home a la cual podemos cambiarle de nombre seleccionándolo para que este en azul y presionando sobre Editar titulo de pagina, después solo ingresar nuevo titulo o nombre de sección y presionar OK. 1. Dar click en Home 2. Presionar Editar titulo de pagina 3. Ingresar Nuevo Titulo 4. Presionar OK 11

12 Si queremos agregar secciones (páginas) nuevas sólo debemos presionar sobre Añadir Página e Ingresar nombre de la sección o página, si queremos añadir una pagina de galerías de imágenes, HTML ó Tipo Shop (carrito de compras) seleccionar en tipo deseado, (una página de imágenes te permite agregar una galería de fotos en una sola página), por último presionar sobre OK. 1. Presionar. Añadir Página 2. Ingresar nombre de la sección o página. 3. Seleccionar el tipo de la página: HTML, galería de imágenes ó tipo shop (carrito de compras). 4. Presionar OK Si esta creada una sección por equivocación y queremos borrarla, solo debemos seleccionarla para que este en azul como seleccionada y presionar sobre Eliminar Pagina, el sistema preguntará si estamos seguros y solo presionar obre OK y de forma automática se borra. 1. Seleccionar la sección a borrar 2. Dar click en Eliminar Página 3. El sistema preguntará si estamos seguros de eliminar la página solo debemos presionar OK si realmente lo estamos. 12

13 Si queremos tener un Segundo nivel dentro de una sección como en nuestro ejemplo, dentro de sección 3 tener subnivel 3-1 y 3-2, seleccionar la página previamente creada y que deseamos que sea un subnivel de otra, esta deberá ponerse azul, después presione sobre Mover página al nivel inferior, este proceso será el mismo para crear todos los otros subniveles. 2. Presionar Mover página al Nivel Inferior. 1. Debemos seleccionar la página que será un subnivel. Si por alguna razón nos equivocamos y no queremos que esta página sea un subnivel, debemos mover al nivel principal una sección en este ejemplo la sección 3-1 solo es necesario seleccionar para que este en azul y presionar sobre Mover página al nivel superior. 2. Presionar Mover página al Nivel Superior. 1. Debemos seleccionar la página que acabamos de crear como subnivel. 13

14 En caso de querer mover un nivel de posición solo tenemos que seleccionarlo hasta que este de color azul y presionar sobre Mover página hacia arriba para subirla o Mover página Hacia Abajo para bajarla en caso de que existan más secciones después de esta. 1. Debemos seleccionar la página que deseamos mover. Según sea el caso, presionar Mover página hacia arriba para subirla ó Mover página Hacia Abajo. En este ejemplo subimos de posición la sección 4 que a la vez se puede bajar de posición si esto se requiere Una vez que terminamos con la sección de páginas tenemos que editarlas y para esto debemos seleccionar la opción de Editar 14

15 Paso 3 Editar Una vez que entramos por primera vez a la sección de Editar por default inicia el sistema con la 1er sección que en este caso es Inicio, para empezar a ingresar texto solo posicionar cursor sobre el texto que aparece e iniciar ingresando el texto que deseamos aparezca en nuestra página, en esta parte podemos personalizar el tipo, tamaño, color y fondo del texto, así como tipo, negritas, itálica o subrayada Tipo de letra Formato de Texto Tamaño de Letra Ingresar Texto Podemos modificar el texto en todas las secciones que tengamos agregadas: Para modificar otra sección seleccionar solo presionando sobre ella, ejemplo sección 3 En este ejemplo podemos observar que seleccionamos un texto tipo Arial, de tamaño 12 en color negro con fondo verde. 15

16 Cada vez que se hacen cambios y deseamos cambiar de sección el sistema te preguntará si deseas aplicar los cambios. 16

17 Podemos utilizar las herramientas para modificar el formato de texto. Este icono permite cambiar el color del texto. Podemos cambiar el color del fondo del texto seleccionado. Se puede cambiar el texto a forma NEGRITA. O se puede cambiar a manera CURSIVA. Subrayar parte o tu texto completo. Tachar texto (ejemplo). Poner un texto en formato subíndice. (Texto) Se utiliza esta opción de la barra de herramientas para poner el texto en formato Superíndice (texto) Se tiene la opción de insertar símbolos en nuestro texto. (&,,,,, etc.). Justificar texto a la izquierda. Centrar texto. Justificar a la derecha. 17

18 Justificar texto. Decrementar el margen del texto. Incrementar margen del párrafo de texto. Si en el diseño esta utilizando tablas con este icono puede agregar o quitar los bordes de la misma. que Esta parte viene siendo una de las más importantes en nuestra barra de herramientas ya que permite estar guardando continuamente los cambios se hayan realizado. Nos permite ampliar a pantalla completa la ventana en que estamos trabajando. Se puede cortar el texto seleccionado. Copiar texto. Pegar texto copiado o cortado previamente. Buscar ó reemplazar alguna palabra o palabras dentro de nuestro texto podemos reemplazar una palabra en el número de veces que aparezca en el texto. Esta herramienta es muy útil ya que de forma automática el sistema hace una revisión del texto que hemos ingresado, resaltando los errores ortográficos y permitiéndonos corregirlos de forma fácil. Seleccionar todo. 18

19 Deshacer la última acción hecha en nuestra edición. Rehacer la última acción hecha. Si se desea agregar una imagen solo presione este icono. Mas a detalle con las imágenes, después de darle click en botón anterior, aparecerá la siguiente pantalla, donde podemos buscar la imagen que deseamos cargar. Aparecerá la siguiente pantalla donde el primer paso es seleccionar la imagen presionando sobre Browse ** NOTA: el nombre de la imagen no puede contener espacios ni caracteres especiales o marcara error. 19

20 1. Indicar donde se encuentra la imagen seleccionar en formato JPG 2. Presionar Open o abrir Después seleccionar si deseamos cargada a la derecha, izquierda u otro, así como el espacio horizontal y vertical que por lo regular es 0. 20

21 Solo nos queda presionar sobre Cargar. En este caso seleccionamos cargado a la izquierda con un borde 5 que ingresamos directamente. Una vez que presionamos sobre cargar la imagen aparecerá en la parte inferior de la sección Previsualizar y si estamos seguros de cómo se presenta, solo presionar sobre Aceptar para agregarla al sitio 21

22 Una vez agregada la imagen, nos aparece en nuestra pantalla. Para borrarla solo presionar sobre ella para que aparezca seleccionada y presionar borrar o delete de nuestro teclado de PC Siguiendo con la barra de herramientas: Insertar link Web. Si realmente deseamos insertar un Link Web seguir los pasos que se mencionan a continuación, de lo contrario pasar al siguiente botón (página 31). Nota Importante: Previo a insertar un link Web en nuestra página debemos hacer algunas modificaciones en nuestro sitio, no importa que éste aún no este creado en su diseño. A continuación se muestran los pasos para dichos cambios a realizar con ejemplo del sitio 22

23 Ingresar en la barra del Internet Explorer de Microsoft ftp.nombredeldominio.com en este caso ingresamos ftp.inter-bandas.com ya que el sitio a modificar es esto solo funciona con Internet Explorer de Microsoft. Ingresar User name: y Password, estos son el usuario y clave administrativa proporcionada por su proveedor de servicio vía del hospedaje 23

24 Presionar sobre el fólder httpdocs 2 veces para abrirlo Agregar una carpeta nueva para los archivos que serán usados como links desde la pagina principal, presionando sobre el botón derecho del Mouse y seleccionando New (Nuevo) y luego Fólder (Carpeta). 24

25 Renombrar la carpeta al nombre que uno desea, esta será utilizara para almacenar los archivos que serán guardados para ser accedidos vía la pagina de Internet. Aquí ya tenemos nuestra nueva carpeta que se llama links, esta se utilizara para almacenar los nuevos archivos que serán usados como ligas para bajar información, presionar sobre este mismo para abrir carpeta y poder hacer un paste(pegar) de información copiada 25

26 Una vez que abrimos nuestra carpeta que en este caso le pusimos de nombre links, aquí es donde pegaremos la información u archivos a descargar por medio de links, los nombres no pueden contener espacios ni caracteres especiales Aquí se Muestra como se esta pasando nuestro archivo a la nueva carpeta creada en nuestro hospedaje 26

27 Para ver los nombre completos con extensiones de los archivos una vez que aparecen en nuestro nuevo fólder, presionar sobre View o ver y seleccionar list o en listado, en este caso podemos ver el archivo que cargamos, en este caso se llama como-usar-el-antispam.pdf este será nuestro archivo de ejemplo para ser accedido desde nuestra pagina Web. Una vez que ya se realizo el copy paste de los archivos que serán accedidos desde el Web, debemos ingresar al SiteBuilder para continuar con nuestro diseño Web y en la sección de editar, después posicionarse donde quiere que aparezca el link para poder bajar los archivos de forma automática al presionar sobre el botón de Insertar link Web. En este caso estamos en la sección de editar y en la sección Home o Inicio, en nuestro caso queremos que aparezca en esta sección, esto se hace posicionándose donde quiero que aparezca el link y presionando sobre el icono de link. 27

28 dice Insertar/Modificar Link web page dialog, ingresar la dirección donde se encuentra nuestro archivo incluyendo la del sitio y nombre del fólder, en este caso nuestro sitio se llama y nuestro fólder se llama links, nuestro archivo se llama como-usar-el-antispam.pdf por lo tanto en la sección que dice URL: debemos ingresar: En la sección de Texto Ingresar el nombre que llevara este link y de esta misma forma era visto por el usuario en este ejemplo tiene el nombre de LINK DE EJEMPLO en la parte de No hay Paginas en este sitio, dejar en blanco, sin seleccionar, en la sección de Titulo poner el nombre que llevará la página en caso de ser otro sitio, en este caso le pusimos HOME, en la sección de Destino seleccionamos si queremos que para poder ver o empezar a descargar nuestro archivo se en una ventana nueva que se abre de forma automática o en la misma ventana o en ventana superior, ahí seleccionar una opción. 2. Texto del 4. Titulo del link 5. Destino 3. Dejar en blanco. 28

29 Aquí tenemos que selección como queremos que se vea nuestro link que en este caso lo nombramos LINK DE EJEMPLO el cual es visto por nuestros usuarios que entran al sitio Web, tiene la opción de aparecer subrayado, línea inferior o con línea a través, seleccionar la que desee. Aquí ya estamos listos y solo falta presionar Aceptar para que entre el cambio 29

30 En este caso ya aparece nuestro link, que se llama LINK DE EJEMPLO Una vez que terminamos presionar sobre Guardar **** Nota ****: Si es la primera vez que entra al SiteBuilder o esta diseñando por primera vez la página de su sitio, le damos clic en guardar y seguimos con nuestro diseño (página 31). 30

31 En caso de que solo haya entrado a modificar esta parte debemos seguir los siguientes pasos: Una vez guardado brincarse al paso de Publicar que es el paso 5. Por ultimo solo presionar sobre publicar 31

32 Este mensaje nos indica que ya esta publicado nuestro nuevo cambio. **** Nota ****: Si es la primera vez que entra al SiteBuilder o esta diseñando por primera vez la página de su sitio, le damos clic en guardar y seguimos con nuestro diseño en la barra de herramientas: Podemos agregar líneas horizontales, si se desea, solo posiciones su cursor donde guste que aparezca su línea y presione este botón. Agregar numeración para crear una lista por ejemplo. ( etc) Agregar viñetas al texto que hemos seleccionado. Ejemplo: Texto 1 Texto 2 Texto 3 Texto 4 Texto 5 32

33 La siguiente barra es la de herramientas de tablas: Insertar una tabla. Después aparecerá la siguiente pantalla, donde deberá llenar los campos como son: Filas (que son las horizontales), seguido de columnas (verticales), el ancho que guste que tengan las columnas, en apariencia podrá elegir la alineación (izquierda, derecha, centrada o alineado a la derecha), por ultimo tenemos el espaciado donde puede personalizar el espacio entre las celdas de la tabla. Esta parte de la barra de herramientas es la que nos ayuda a editar las filas (horizontal), nos permite mover, insertar y eliminarlas. Esta parte nos ayuda a editar lo que son las columnas, insertar, eliminar y mover cualquier columna (vertical). Con esta parte podemos modificar las celdas. 33

34 Continuemos con las barras de herramientas, esta es la barra de herramientas de Módulos: Donde le primer botón es el de agregar un contador: Introducir a nuestra página un contador (cuenta el número de visitantes de nuestra página) si es que así lo desea de lo contrario podemos pasar al siguiente paso la parte de Propiedades : Agregar un contador Clic en el rectángulo negro para editar el contador: Aparecerá la siguiente caja y hacer doble Click sobre éste para editar. 34

35 Después aparecerá el editor de contador donde deberá seleccionar el tipo de contador a usar el cual estará señalado con un marco color naranja como seleccionado, después indicar en que numeración se quiere empezar, se puede Previsualizar el resultado presionando sobre preview. 1. Seleccionar el tipo de contador que desea. 2. Especificar en que número quiere que inicie el contador. 3. Para finalizar dar click en Aplicar o Apply. Es importante mencionar que al después de aplicar los cambios al regresar a esta pantalla podemos eliminar el contador solo haciendo los pasos siguientes: 2. Por último dar click en el botón que aquí se señala. 1. Para eliminar el contador, solo dar click en el cuadro que aquí se muestra. 35

36 El segundo es el botón de Blogger Editor, el cual nos ayuda a agregar y editar blogs. Un blog es en donde se publican periódicamente noticias, artículos o comentarios de interés sobre diversos temas o la propia vida de su autor. Al darle click al este botón no nos aparece automáticamente el blog sino que nos presenta un rectángulo Para editar el modulo blogger doble clic aquí donde con esto sabemos que se ha agregado el blog, ahora debemos editarlo dando doble click en el rectángulo que nos apareció en blanco. En caso de no querer agregar un blog seleccionar el rectángulo y borrar desde el teclado. 1. Blogger Editor 2. Dar doble clic en este rectángulo para editar el blog. Aparecerá la siguiente pantalla: Nombre que desea ponerle al blog Usuario Contraseña Nuevamente la contraseña que puso anteriormente. Primer nombre de la persona que será propietario del blog. Segundo nombre de la persona que será propietario del blog. Dirección de del propietario del blog. Introduzca la URL que será transferida al abrir el Blog 36

37 ** Nota para la pantalla anterior: Las siglas URL en inglés quieren decir "Uniform Resource Locator," y se refiere a la dirección única que identifica a una página Web en Internet. Por ejemplo, " Nuestro siguiente botón es el Constructor de formularios de sugerencias. 1. Dar clic en Constructor de formularios de sugerencias. 2. Aparece este rectángulo para editar los formularios. Al presionar sobre el rectángulo blanco del editor de los formularios aparece la siguiente pantalla: 37

38 En la primera pestaña de Propiedades ó Properties, aparecen los campos de Nombre del Formulario (feedback form name) en este campo deberá poner el nombre que desea darle al formulario, Dirección de ( Address) escriba la dirección de al que desea que le lleguen los datos, Asunto ( subject) solo escriba el asunto para dicho mensaje y en el campo Texto de Respuesta (Response text) escriba el mensaje que será mostrado después de haber procesado el formulario. Nombre del Formulario Dirección de correo a donde se enviaran los datos Asunto del mensaje Texto de respuesta Esto es todo en la pestaña de propiedades, ahora debemos pasar a la parte de campos (Fields): Clic en Fields (campos) 38

39 En esta parte debemos elegir los campos que deseamos que aparezcan en nuestro formulario (parte izquierda), también debemos seleccionar si cual de los campo que hemos elegido serán obligatorios (parte derecha). Elegir cuales campos serán obligatorios Elegir campos Por último esta la pestaña de Preview o Vista Previa, aquí podremos ver el resultado que obtuvimos después de configurar nuestro formulario. Si ha quedado como deseamos dar clic en aplicar para finalizar. Ejemplo: Clic en preview Finalizar 39

40 Siguiendo con la barra de herramientas de módulos: El siguiente botón es el editor de foros Web, el cual nos ayuda a agregar un Foro en Línea, este tipo de foros permite tener una mejor perspectiva de lo que opinan las personas que visitan su página, un foro permite a una persona abrir debates sobre temáticas nuevas. Para agregar un foro Web solo debe dar clic en el botón anterior, después de esto le aparecerá un rectángulo en la parte de abajo, si da doble clic en la misma podrá comenzar a configurar su foro. Doble clic. 40

41 1. Dar clic en el diseño que deseamos para nuestro foro, el que se haya seleccionado aparece con un marco rojo. Como paso siguiente debemos dar clic en la pestaña de propiedades, para personalizar el foro. Clic para pasar a Propiedades o Properties 41

42 En la parte de propiedades tenemos el campo de Tiempo de Vida de los Mensajes, (Message lifetime (in months)) esto se refiere al numero de meses que estarán almacenados los mensajes, Mensajes por página (Messages per page) número de mensajes que se mostrarán por página, y por último Grosor del Módulo (Module width) tamaño deseado (en píxeles) para que el foro quede correctamente en su página Web. Tiempo de vida de los mensajes Mensajes por página Grosor del Módulo Para finalizar podemos ver el resultado que obtuvimos al personalizar nuestro módulo, dando clic en la pestaña de Preview o Vista Previa. Clic en Preview Clic en Apply para terminar. 42

43 El siguiente botón es el editor de Libro de Visitas, el cual nos sirve para agregar lo que llamamos libro de visitas, que es casi lo mismo que un Foro Web, la diferencia es que un foro esta dividido y mostrado por temas y en el libro de visitas se muestran los mensajes en el orden que fueron escritos. Para agregar un libro de visitas es casi el mismo procedimiento que al agregar un foro, hacemos clic en el botón mostrado anteriormente aparece un rectángulo blanco en la parte de abajo donde debemos dar doble clic: Doble clic para editar nuestro libro de visitas. Elegir el diseño que deseamos que tenga nuestro libro de visitas. 1. Dar clic en el diseño que deseamos para nuestro libro de visitas, el que se haya seleccionado aparecerá con un marco rojo. 43

44 Damos clic en la pestaña de Propiedades o Properties nos aparece la siguiente pantalla, donde como podemos observar son los mismos campos que tenemos que llenar, Tiempo de Vida de los Mensajes, (Message lifetime (in months)) esto se refiere al numero de meses que estarán almacenados los mensajes, Mensajes por página (Messages per page) número de mensajes que se mostrarán por página, y por último Grosor del Módulo (Module width) tamaño deseado (en píxeles) para que el foro quede correctamente en su página Web: Tiempo de vida de los mensajes Mensajes por página Grosor del Módulo Para finalizar podemos ver el resultado que obtuvimos al personalizar nuestro libro, dando clic en la pestaña de Preview o Vista Previa. Clic en Preview Clic en Apply para terminar. 44

45 Al terminar con la parte de libro de visitas, continuamos con nuestra barra de módulos, donde el siguiente botón es: El botón de RSS Reader Editor que significa (Really Simple Syndication) ó (Sindicación Realmente Simple), permite a los Web Master cargar sus noticias favoritas desde canales RSS. Los lectores RSS obtienen la última información de estos sitios para mostrarlos en una página Web. Solo debemos dar clic en el botón de RSS Reader Editor y aparecerá un rectángulo blanco en la parte inferior, debemos dar doble clic en este para personalizarlo y nos aparece la siguiente pantalla: Donde en la pestaña de RSS Channels List, elegiremos el canal del cual queremos obtener las noticias. Activar la casilla con un clic. *****Nota: En caso de querer utilizar un Canal de noticias propio debemos: 1. Dar clic en la pestaña de Own RSS Channel Subscription. 2. Introducir la dirección URL del canal que utilizaremos. 45

46 Regresar a la pestaña de RRS Channels List para activar la casilla de Own RSS Channel: 2. Para finalizar dar clic en Apply. 1. Dar clic. El penúltimo botón de la barra de herramientas de módulos es el Editor de Scripts donde usando este nos ayuda a cargar su propio código Java Script, HTML, y DHTML a sus páginas Web. Para hacer esto debe dar clic en el botón de editor y un doble clic en rectángulo blanco que aparece en la parte de abajo como se presenta a continuación: 1. Clic aquí. 2. Clic para editar el modulo de script. 46

47 Al darle doble clic como se mostró en la pantalla anterior, se presenta una pantalla como la siguiente: En la pestaña Script Texto introduzca su código. Una vez terminado esto si desea puede ver el resultado obtenido en la pestaña Preview y para finalizar clic en Aplicar. Clic en preview Y para finalizar Aplicar ó Apply 47

48 Por ultimo tenemos el botón de Votes Editor el cual nos permite introducir en nuestra página un módulo de votación esto con el fin de conocer más la opinión de nuestros visitantes con respecto a una temática. Debemos solo dar un clic en el botón de Votes Editor o Editor de Votaciones, al igual que los segmentos anteriores aparece un rectángulo blanco donde debemos dar doble clic para comenzar la parte de configuración de nuestro módulo de votación. Nos debe aparecer una pantalla como esta: En la pestaña de propiedades en el campo de Question (pregunta) debemos introducir la pregunta o temática de la que deseamos conocer la opinión de nuestros visitantes. Después tenemos dos campos donde ambos se llaman Answer esto es porque obviamente como mínimo tenemos que tener 2 posibles respuestas. Para añadir mas respuestas de la misma pregunta solo demos clic en Add Answer (añadir respuesta). Una vez que hayamos puesto las respuestas que deseamos que aparezcan, debemos dar clic en la pestaña de diseño. 1. Introducir la pregunta 2. Introducir las respuestas. 3. Añadir más respuestas si lo desea 48

49 Para continuar dar clic en la pestaña de diseño donde nos aparece esta pantalla: 1. Seleccione el tipo de diseño. 2. Seleccione el tipo de Barras. 3. Elija si desea que sea una Multi selección ó Selección única. 4. Si desea mostrar bordes alrededor del módulo o no. Si desea ver su resultado clic en Preview Ó Vista Previa, y para finalizar clic en Apply. 1. Clic en Preview 2. Aparece el resultado que obtuvimos. Ejemplo: 3. Para finalizar clic en aplicar. 49

50 Al darle clic en apply ó aplicar en cualquier página el sistema nos regresa a la parte de edición. Como recordaremos tenemos 3 tipos de paginas diferentes, la HTML, la de imágenes y la de tipo shop (carrito de compras) En caso de haber agregado una página de imágenes, podemos editarla dando clic en la sección con el nombre que le dimos a nuestra página de imágenes. Clic en la sección con el nombre que le dimos al principio a nuestra pagina de imágenes. Aparecerá la siguiente pantalla, en donde debemos dar clic en el rectángulo blanco que se muestra, esto para pasar al área de edición de nuestra pagina de imágenes. Clic para editar la página de imágenes. 50

51 Aparecerá la siguiente pantalla, en la cual la primera pestaña Photo Management, debemos agregar la imagen que deseamos tener en nuestra galería dando clic en browse dentro del campo photo management, ya seleccionada la misma, podemos agregarle un titulo a dicha imagen, en el campo Image Caption (Subtitulo de la imagen), una vez llenos estos campo, clic en add image ó agregar imagen. 1. Buscar la imagen a agregar. 2. Nombre de la Imagen. 3. Agregar Imagen. Aparecerá en la parte de abajo la imagen que hemos agregado, y debemos seguir los pasos anteriores para seguir agregando imágenes. 2. Seguir los pasos anteriores para agregar otras imágenes. 1. Podemos ver que la imagen quedó agregada. 51

52 Si tenemos varias imágenes y queremos quitar una o algunas, debemos seleccionarla (s) y dar clic en el botón de Delete Imagen(s). 1. Seleccionar imágenes a borrar dando clic en esta parte. 2. Clic para borrar las imágenes seleccionadas. Si ya están todas las imágenes que queremos en nuestra galería, pasemos a la siguiente pestaña Template selection, donde podremos elegir que planilla que tendrá nuestra galería. A continuación se muestra la seleccionada por default, para cambiarla solo dar clic en Select Gallery. 3. Clic en Preview para ver nuestra página. 2. Clic en la planilla de nuestro gusto. 1. Seleccionada inicialmente. 52

53 Una vez que estamos en la parte de Preview (vista previa), nos aparece una pantalla como la siguiente donde vemos la forma en que ha quedado nuestra página de imágenes, solo nos queda finalizar dando clic en Apply (Aplicar). Clic en Apply para finalizar Una vez que terminamos nuestra página de imágenes, y regresamos a la parte principal del paso 3 Editar, es importante mencionar que cada vez que cambiemos de sección el sistema nos pide si deseamos o no aplicar los cambios. Cada vez que cambiemos de sección nos preguntará el sistema si deseamos aplicar los cambios. 53

54 En este caso tenemos seleccionada la sección 3 que ya hemos modificado, pero este a su vez cuenta con 2 subsecciones que también se pueden modificar, por default el sistema nos presentará primero la sección principal para ser modificada. Para editar una subsección solo seleccionar en este caso modificaremos a subnivel 3-1 esto se hace solo presionando sobre él, de igual forma preguntará el sistema si queremos grabar y siempre seleccionar SÍ. 54

55 Ahora estamos en la sección 3 subnivel 3-1. Cada una de las secciones se puede modificar de igual forma como se explico anteriormente al modificar la sección principal. PASO 4 Propiedades Con lo anterior se termina la parte de Edición de nuestra página, por lo que debemos continuar con el paso 4. Propiedades, para seguir con la creación de las diferentes secciones tales como, misión, visión, contacto, etc. 55

56 Paso 4. Propiedades En esta parte de nuestro proceso de diseño, podemos agregar y configurar los metatags, que realmente son necesarios para que tu Web sea correctamente indexada por los diferentes buscadores Altavista, Yahoo, etc. Tanto si vas a utilizar algún servicio de alta en los buscadores como si no, la utilización de los metatags en tu página es altamente recomendable, de esta forma los buscadores podrán sacar una mejor información de tu Sitio Web, para ponerlo entre los resultados de alguna búsqueda. Podemos observar que tenemos 3 tipos de metatags, el Titulo del Sitio este será el que aparezca en la barra de los navegadores Web, las Palabras Claves (hasta 360caracteres) dichas palabras deberán estar separadas por una coma (,) y la Descripción del Sitio (hasta 30 palabras) descripción corta de su página Web que será la que aparezca en los motores de búsqueda. 1. Titulo del sitio. 2. Palabras Clave. 3. Descripción del sitio Por último seleccionar Aplicar. 56

57 ** NOTA: nunca seleccionar contraseña, ni cambiar ya que sin esta no podremos ayudarlo con soporte. Se recomienda NO cambiar la contraseña, debido a que si tiene algún problema el área de soporte no podrá ayudarle. No entrar a esta parte por favor. Por último tenemos la sección de SE Submission donde deberemos agregar en URL la dirección de nuestra página, ejemplo: y en Site , debemos poner la dirección de correo de nuestro sitio, ejemplo: correo@nombredeldominio.com Dirección de su Sitio Web Dirección de su Sitio Web Seleccionar los que desee. Por último clic en Submit. 57

58 Regresamos a la parte principal de edición y listo, por último dar clic en Publicar: PASO 5 Publicar Publicar Aparece la siguiente pantalla, donde solo resta dar clic en Publicar Sitio Web: Por último solo dar click en publicar sitio. 58

59 Una vez que aparezca el letrero siguiente. 2. Salir Le recordamos que para dudas de soporte nos puede contactar a soporte@sitiodesoporte.com o puede enviar sus comentarios a nuestra forma en línea que se encuentra en el siguiente link: 59