Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Asistente CSS: Personalización a medida

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 23 de agosto de 2011 por Leticia R.

756 visualizaciones

Asistente CSS: Personalización a medida

Más información Transcripción

Descargar la transcripción

En este tutorial vamos a ver cómo personalizar el diseño de nuestro espacio web sin necesidad de tener conocimientos de CSS. 00:00:05
Para ello lo que tendremos que hacer será ir al menú principal y pulsar en Administrar Páginas. 00:00:11
Dentro de Administrar Páginas tenemos que diferenciar dos partes. 00:00:18
Las pestañas de la parte superior van a hacer referencia a la página web completa, 00:00:22
es decir, cualquier cambio que realicemos en cualquiera de estas pestañas va a afectar a la página web en su conjunto. 00:00:26
Sin embargo, la parte inferior, las pestañas que aparecen en la parte de abajo, 00:00:32
únicamente van a afectar a la página concreta en la que nos encontremos. 00:00:36
En este caso, solo afectarían a la sección de inicio. 00:00:39
En el caso que vamos a presentar, vamos a cambiar toda la apariencia de la página web. 00:00:43
Por lo tanto, vamos a seleccionar Apariencia de la parte superior. 00:00:47
Dentro de Apariencia nos aparecen tres pestañas, Temas, Gamas de color y CSS. 00:00:56
En el caso que nos ocupa, vamos a emplear dos pestañas, Temas y CSS. 00:01:00
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. 00:01:04
Pulsamos y nos aparece un mensaje que nos indica que la operación ha sido realizada correctamente. 00:01:14
Hecho esto, pasaremos a la siguiente pestaña, la pestaña de CSS. 00:01:21
Pulsamos sobre ella y a continuación pulsamos en asistente CSS. 00:01:24
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 00:01:28
El primer apartado que tenemos son los valores generales 00:01:37
Aquí podremos introducir un fondo de página 00:01:40
Para ello pulsaremos sobre el recuadro de fondo de página y nos aparece una pala de colores 00:01:42
Aquí podremos seleccionar el color que nosotros queramos, por ejemplo un azul 00:01:48
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. 00:01:53
Pulsamos y ya el color queda seleccionado. Pulsamos fuera y vemos como el código de este color queda incorporado en este espacio. 00:02:02
A continuación tendremos que seleccionar un ancho. En este caso vamos a poner 100. 00:02:12
además queremos que la posición de la página sea centrada 00:02:15
y no queremos que tenga ni color de borde ni ancho de borde 00:02:20
si quisiéramos simplemente tendríamos que pulsar en estos recuadros e introducirlos 00:02:24
el segundo apartado es cabecera y logotipo 00:02:29
aquí tendríamos que introducir un color de cabecera 00:02:33
para ello pulsamos y tendríamos que seleccionar un color 00:02:35
por ejemplo un verde 00:02:39
lo seleccionamos y pulsamos sobre la pala de colores para que el color quede seleccionado 00:02:40
tendremos que introducir una altura de cabecera 00:02:44
en nuestro caso vamos a incorporar 200 píxeles 00:02:48
el siguiente paso es introducir la dirección de la imagen o cabecera de nuestra página web 00:02:50
para ello tendremos que acceder al disco duro virtual 00:02:56
pulsamos y examinamos en nuestro ordenador la imagen que nosotros queramos 00:02:59
para ello pulsamos en añadir fichero 00:03:04
examinar 00:03:06
y seleccionamos, en este caso esta es la imagen que nosotros queremos subir 00:03:09
pulsamos sobre ella y a continuación en abrir 00:03:13
tendremos que pulsar sobre subir fichero 00:03:16
y nos aparece cuál es el proceso de subida de este fichero 00:03:20
a continuación tendremos que pulsar en listado 00:03:24
y como veis la imagen queda incorporada en nuestro directorio de ficheros 00:03:28
pulsamos sobre ella y a continuación en seleccionar 00:03:33
como podéis ver la url queda incorporada 00:03:36
Ahora bien, ¿cómo queremos que se quede la posición de la imagen o logotipo que acabamos de subir? 00:03:40
Tenemos varias posibilidades, izquierda, centro o derecha. 00:03:45
En nuestro caso vamos a poner centro. 00:03:48
Pasamos al siguiente apartado, menú y accesos directos. 00:03:52
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ú. 00:03:55
Estos campos los podemos cumplimentar de la misma manera que hemos venido haciendo con los anteriores. 00:04:06
Por ejemplo, vamos a poner aquí un color clarito. 00:04:11
En color de texto vamos a mantener un negro. 00:04:17
Color fondo menú tendremos que seleccionar otro color. 00:04:22
Estos campos no son obligatorios a cumplimentar todos ellos. 00:04:27
Es importante tenerlo en cuenta. 00:04:30
El siguiente apartado es el pie de página. 00:04:45
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. 00:04:47
Una vez hemos complementado todos los campos, para ver cómo ha quedado la página, podremos pulsar sobre previsualizar. 00:04:59
Se abrirá una nueva ventana y veremos cómo va a quedar nuestra cabecera y el diseño de nuestra página web. 00:05:05
cerramos 00:05:12
y pulsamos en continuar 00:05:14
como veis nos aparece este mensaje 00:05:17
para aplicar definitivamente los cambios 00:05:19
cierra esta ventana y pulse en guardar 00:05:21
cerramos la ventana 00:05:23
y pulsamos sobre guardar 00:05:25
nos aparece el mensaje 00:05:28
indicándonos que la operación ha sido realizada correctamente 00:05:32
si pulsamos sobre salir 00:05:34
volvemos a nuestra página web 00:05:36
y como veis 00:05:39
queda incorporada la cabecera personalizada 00:05:40
de nuestra web. Si vamos pulsando por las diferentes secciones, vemos cómo esta cabecera 00:05:43
se ha quedado incorporada en todo nuestro espacio web. 00:05:48
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Etiquetas:
Miscelánea
Autor/es:
EducaMadrid: Leticia Roldán Salido
Subido por:
Leticia R.
Licencia:
Reconocimiento - No comercial - Sin obra derivada
Visualizaciones:
756
Fecha:
23 de agosto de 2011 - 13:23
Visibilidad:
Público
Duración:
05′ 55″
Relación de aspecto:
4:3 Hasta 2009 fue el estándar utilizado en la televisión PAL; muchas pantallas de ordenador y televisores usan este estándar, erróneamente llamado cuadrado, cuando en la realidad es rectangular o wide.
Resolución:
1024x768 píxeles
Tamaño:
16.71 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid