1 00:00:05,230 --> 00:00:10,869 En este tutorial vamos a ver cómo personalizar el diseño de nuestro espacio web sin necesidad de tener conocimientos de CSS. 2 00:00:11,550 --> 00:00:16,390 Para ello lo que tendremos que hacer será ir al menú principal y pulsar en Administrar Páginas. 3 00:00:18,949 --> 00:00:21,769 Dentro de Administrar Páginas tenemos que diferenciar dos partes. 4 00:00:22,230 --> 00:00:25,969 Las pestañas de la parte superior van a hacer referencia a la página web completa, 5 00:00:26,449 --> 00:00:31,870 es decir, cualquier cambio que realicemos en cualquiera de estas pestañas va a afectar a la página web en su conjunto. 6 00:00:32,710 --> 00:00:35,689 Sin embargo, la parte inferior, las pestañas que aparecen en la parte de abajo, 7 00:00:36,149 --> 00:00:39,350 únicamente van a afectar a la página concreta en la que nos encontremos. 8 00:00:39,530 --> 00:00:42,469 En este caso, solo afectarían a la sección de inicio. 9 00:00:43,369 --> 00:00:47,329 En el caso que vamos a presentar, vamos a cambiar toda la apariencia de la página web. 10 00:00:47,649 --> 00:00:50,729 Por lo tanto, vamos a seleccionar Apariencia de la parte superior. 11 00:00:56,859 --> 00:01:00,600 Dentro de Apariencia nos aparecen tres pestañas, Temas, Gamas de color y CSS. 12 00:01:00,939 --> 00:01:04,780 En el caso que nos ocupa, vamos a emplear dos pestañas, Temas y CSS. 13 00:01:04,780 --> 00:01:14,019 En primer lugar, dentro de la pestaña temas, lo que tendremos que hacer será seleccionar como tema de nuestra página web el básico A menú superior. 14 00:01:14,599 --> 00:01:20,280 Pulsamos y nos aparece un mensaje que nos indica que la operación ha sido realizada correctamente. 15 00:01:21,120 --> 00:01:23,920 Hecho esto, pasaremos a la siguiente pestaña, la pestaña de CSS. 16 00:01:24,680 --> 00:01:28,459 Pulsamos sobre ella y a continuación pulsamos en asistente CSS. 17 00:01:28,459 --> 00:01:37,000 Nos aparece el siguiente formulario en el cual vamos a ir introduciendo los valores que queramos que tenga el diseño que estamos dando a nuestra página web 18 00:01:37,000 --> 00:01:40,019 El primer apartado que tenemos son los valores generales 19 00:01:40,019 --> 00:01:42,299 Aquí podremos introducir un fondo de página 20 00:01:42,299 --> 00:01:48,219 Para ello pulsaremos sobre el recuadro de fondo de página y nos aparece una pala de colores 21 00:01:48,219 --> 00:01:53,159 Aquí podremos seleccionar el color que nosotros queramos, por ejemplo un azul 22 00:01:53,159 --> 00:02:01,939 Una vez lo hemos seleccionado, para que quede incorporado dentro del fondo de página, tendremos que pulsar en la paleta de colores que aparece en la parte inferior en pequeño, como podéis ver. 23 00:02:02,599 --> 00:02:11,240 Pulsamos y ya el color queda seleccionado. Pulsamos fuera y vemos como el código de este color queda incorporado en este espacio. 24 00:02:12,020 --> 00:02:15,560 A continuación tendremos que seleccionar un ancho. En este caso vamos a poner 100. 25 00:02:15,560 --> 00:02:20,400 además queremos que la posición de la página sea centrada 26 00:02:20,400 --> 00:02:24,400 y no queremos que tenga ni color de borde ni ancho de borde 27 00:02:24,400 --> 00:02:29,199 si quisiéramos simplemente tendríamos que pulsar en estos recuadros e introducirlos 28 00:02:29,199 --> 00:02:33,020 el segundo apartado es cabecera y logotipo 29 00:02:33,020 --> 00:02:35,379 aquí tendríamos que introducir un color de cabecera 30 00:02:35,379 --> 00:02:39,000 para ello pulsamos y tendríamos que seleccionar un color 31 00:02:39,000 --> 00:02:40,099 por ejemplo un verde 32 00:02:40,099 --> 00:02:44,800 lo seleccionamos y pulsamos sobre la pala de colores para que el color quede seleccionado 33 00:02:44,800 --> 00:02:48,159 tendremos que introducir una altura de cabecera 34 00:02:48,159 --> 00:02:50,740 en nuestro caso vamos a incorporar 200 píxeles 35 00:02:50,740 --> 00:02:56,759 el siguiente paso es introducir la dirección de la imagen o cabecera de nuestra página web 36 00:02:56,759 --> 00:02:59,580 para ello tendremos que acceder al disco duro virtual 37 00:02:59,580 --> 00:03:04,139 pulsamos y examinamos en nuestro ordenador la imagen que nosotros queramos 38 00:03:04,139 --> 00:03:06,340 para ello pulsamos en añadir fichero 39 00:03:06,340 --> 00:03:09,199 examinar 40 00:03:09,199 --> 00:03:13,580 y seleccionamos, en este caso esta es la imagen que nosotros queremos subir 41 00:03:13,580 --> 00:03:16,460 pulsamos sobre ella y a continuación en abrir 42 00:03:16,460 --> 00:03:20,300 tendremos que pulsar sobre subir fichero 43 00:03:20,300 --> 00:03:24,719 y nos aparece cuál es el proceso de subida de este fichero 44 00:03:24,719 --> 00:03:28,039 a continuación tendremos que pulsar en listado 45 00:03:28,039 --> 00:03:33,280 y como veis la imagen queda incorporada en nuestro directorio de ficheros 46 00:03:33,280 --> 00:03:36,719 pulsamos sobre ella y a continuación en seleccionar 47 00:03:36,719 --> 00:03:39,960 como podéis ver la url queda incorporada 48 00:03:40,740 --> 00:03:44,599 Ahora bien, ¿cómo queremos que se quede la posición de la imagen o logotipo que acabamos de subir? 49 00:03:45,080 --> 00:03:48,360 Tenemos varias posibilidades, izquierda, centro o derecha. 50 00:03:48,840 --> 00:03:50,460 En nuestro caso vamos a poner centro. 51 00:03:52,280 --> 00:03:55,039 Pasamos al siguiente apartado, menú y accesos directos. 52 00:03:55,439 --> 00:04:05,819 Aquí podremos indicar el color de fondo del menú de accesos directos, el color del texto, color fondo menú, color borde fondo menú, color fondo al pasar sobre el enlace y color enlace menú. 53 00:04:06,740 --> 00:04:10,280 Estos campos los podemos cumplimentar de la misma manera que hemos venido haciendo con los anteriores. 54 00:04:11,080 --> 00:04:15,139 Por ejemplo, vamos a poner aquí un color clarito. 55 00:04:17,379 --> 00:04:19,779 En color de texto vamos a mantener un negro. 56 00:04:22,160 --> 00:04:25,279 Color fondo menú tendremos que seleccionar otro color. 57 00:04:27,639 --> 00:04:30,220 Estos campos no son obligatorios a cumplimentar todos ellos. 58 00:04:30,699 --> 00:04:31,899 Es importante tenerlo en cuenta. 59 00:04:45,399 --> 00:04:47,379 El siguiente apartado es el pie de página. 60 00:04:47,379 --> 00:04:58,459 Aquí tendremos que indicar cuál es la altura que queremos que tenga el pille de página, 100 píxeles por ejemplo, un color de fondo que vamos a poner blanco y un color de texto que vamos a mantener en negro. 61 00:04:59,579 --> 00:05:05,259 Una vez hemos complementado todos los campos, para ver cómo ha quedado la página, podremos pulsar sobre previsualizar. 62 00:05:05,939 --> 00:05:12,040 Se abrirá una nueva ventana y veremos cómo va a quedar nuestra cabecera y el diseño de nuestra página web. 63 00:05:12,040 --> 00:05:14,120 cerramos 64 00:05:14,120 --> 00:05:17,319 y pulsamos en continuar 65 00:05:17,319 --> 00:05:19,579 como veis nos aparece este mensaje 66 00:05:19,579 --> 00:05:21,339 para aplicar definitivamente los cambios 67 00:05:21,339 --> 00:05:23,240 cierra esta ventana y pulse en guardar 68 00:05:23,240 --> 00:05:25,240 cerramos la ventana 69 00:05:25,240 --> 00:05:28,620 y pulsamos sobre guardar 70 00:05:28,620 --> 00:05:32,180 nos aparece el mensaje 71 00:05:32,180 --> 00:05:34,680 indicándonos que la operación ha sido realizada correctamente 72 00:05:34,680 --> 00:05:36,819 si pulsamos sobre salir 73 00:05:36,819 --> 00:05:39,199 volvemos a nuestra página web 74 00:05:39,199 --> 00:05:40,540 y como veis 75 00:05:40,540 --> 00:05:43,420 queda incorporada la cabecera personalizada 76 00:05:43,420 --> 00:05:48,759 de nuestra web. Si vamos pulsando por las diferentes secciones, vemos cómo esta cabecera 77 00:05:48,759 --> 00:05:52,199 se ha quedado incorporada en todo nuestro espacio web.