Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Diseño de la página principal de una página web - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Hola de nuevo. Continuamos con la edición de páginas web y ahora os voy a explicar cómo crear la página principal a partir de vuestra temática y siguiendo la estructura general de la página que yo os voy a crear ahora y de la cual os dejo en PDF toda la estructura para que os podáis guiar a la hora de realizarla.
00:00:00
En primer lugar, cuando me he creado mi espacio web en la práctica anterior, me he creado diferentes archivos en HTML y dentro de la página web ya debo de tener las imágenes que voy a ir utilizando en mi página web.
00:00:19
Yo voy a hacer la página principal y voy a colocar en ella cuatro imágenes diferentes, las cuatro que tenéis aquí.
00:00:34
Ya deben de estar dentro de esa carpeta de imágenes.
00:00:42
Siguiente paso, abro el programa Composer.
00:00:45
vosotros lo más seguros que ya lo tengáis abierto y con las páginas cargadas lo siguiente que hago
00:00:48
es archivo abrir archivo y dentro del escritorio sistema solar 1 voy a abrir la página index la
00:00:53
página index solamente tiene el color de fondo azul yo ahora lo que voy a hacer es colocar el
00:01:03
el primer rótulo, el sistema solar. Lo voy a centrar, lo selecciono, lo pongo en negrita
00:01:09
y aquí es el color de texto, abajo si os dais cuenta es color de fondo, pues en color
00:01:20
de texto vengo y le digo que quiero este color de texto, color naranja oscuro. Aumento el
00:01:26
tamaño, hasta el tamaño que yo quiera, intro y debajo lo que voy a hacer es colocar un
00:01:33
texto. Yo ahora escribiría el texto pero para no hacer tan largo el vídeo lo tengo en formato Word
00:01:39
y lo que hago es copiar y aquí control c es copiar, control v es pegar. Si os dais cuenta el texto como
00:01:44
lo he copiado y lo he pegado mantiene un formato anterior con lo cual en las páginas web es muy
00:01:56
importante no mantener los formatos anteriores. Para eso lo selecciono y le digo botón derecho
00:02:01
pegar sin formato y si os dais cuenta ya me ha cambiado completamente el formato. Ahora le digo
00:02:07
que lo justifique, es decir, que lo haga todo el ancho de la página y voy a aumentar un poco el
00:02:14
tamaño de texto para que se lea bien. Ya lo tenemos hecho. Lo siguiente que voy a hacer es crear una
00:02:21
tabla sin los márgenes visibles de manera que me permita estructurar mi página web poniendo
00:02:29
imágenes y texto donde yo quiera. Si evidentemente no pongo una tabla, el texto se mezclará con las
00:02:35
imágenes y no va a quedar nada bien en mi página web. Lo siguiente que hago es tabla, insertar tabla,
00:02:41
perdonad, tabla, insertar tabla y le digo que quiero una tabla de dos filas por tres columnas.
00:02:49
Ya me la ha incluido aquí. Lo siguiente que hago es poner ya los rótulos que luego van a ser
00:02:58
enlaces. Voy a poner aquí la estrella del sol. Y aquí ahora vengo y le digo insertar
00:03:04
imagen y dentro de sistema solar, imágenes, página 1, pongo la imagen del sol. Es importante
00:03:18
que pongamos un texto relevante antes de insertarla.
00:03:31
Lo ponemos. Aceptamos. Ya tenemos la imagen del Sol.
00:03:34
Le voy a decir que lo centre
00:03:40
dentro de la celda y ya en la siguiente celda lo que voy
00:03:42
a poner es características de los planetas.
00:03:47
Ahora lo que hago es insertar una imagen
00:04:01
en la que vienen los planetas.
00:04:04
Texto alternativo, planetas, acepto y ya la tengo. Lo mismo que antes, selecciono todo y lo acepto.
00:04:08
Siguiente paso, pues voy a hablar del planeta con vida, la Tierra. Y voy a insertar una imagen del planeta con vida, Tierra.
00:04:24
Voy aquí. Todas las imágenes se insertan, no se copian ni pegan. Todo lo que yo copie y pegue directamente no estará en la carpeta de imágenes y luego no va a aparecer.
00:04:41
Centro. Vale, aquí solamente quiero yo poner una imagen combinadas con las otras. Pues vengo, le digo botón derecho, unir celdas seleccionadas, ya las une.
00:04:57
y aquí lo que voy a poner es registro, inserto la imagen de registro,
00:05:08
es muy importante poner siempre la descripción de la imagen y ahora lo mismo, hago esto y centro todo.
00:05:25
Ya tengo mi página web, lo único que la tabla debería ser centrada en la página, pues selecciono la tabla,
00:05:33
Un momento, botón derecho, propiedades de celda y tabla y en tabla le digo alineación de tabla centrada.
00:05:39
Acepto y ya me ha centrado mi tabla.
00:05:52
Lo siguiente que tengo que hacer es crear hipervínculos, es decir, que al darle a la imagen del sol vaya a la página del sol, etc.
00:05:56
Entonces vengo aquí y pulsando sobre este texto le digo enlace, ¿a dónde? Sistema solar 1 y le pongo sol.
00:06:08
Ya me crea el hipervínculo, aparece subrayado con lo cual es un hipervínculo.
00:06:21
Lo mismo haré con la imagen.
00:06:25
Enlace, lo mismo voy a hacer con el rótulo de características de planetas.
00:06:28
Insertar enlace a planetas.
00:06:38
Y lo mismo voy a hacer con su imagen correspondiente.
00:06:43
Planetas, abrir, aceptar.
00:06:50
Esta irá a la página tierra.
00:06:54
Lo mismo con su imagen.
00:07:03
Y por último nos queda el registro.
00:07:11
El registro irá a la página.
00:07:15
Registro, abrir, aceptar.
00:07:19
Y sobre su imagen correspondiente vuelvo a hacer lo mismo.
00:07:22
página registro abrir y aceptar ya he hecho mi página principal he puesto las imágenes con su
00:07:26
tabla correspondiente he hecho absolutamente todo y me he creado por último los vínculos o enlaces
00:07:34
a las otras páginas debéis hacer otra página más entonces abriría la página sol abrir la página
00:07:41
sol yo puse un sol de fondo aquí vosotros tenéis que hacer una página de diseño libre yo en mi
00:07:51
página he puesto rótulo, texto, imagen, vosotros podéis poner una tabla y hacer
00:07:57
como queráis esta página. Esta página os la dejo a diseño libre, no la página
00:08:02
principal que es tal cual. Entonces ahora voy y le digo guardar la página
00:08:08
principal, guardaríais, la página sol no es necesario guardarla porque no la he
00:08:13
modificado y si cierro y me voy a sistema solar y abro la página index pues ya me aparece en mi
00:08:18
página tal y como yo la he hecho y si le doy a sol me va a sol no tengo un texto para poder
00:08:30
volver a la página principal eso ya lo haremos y si pulso sobre el resto de páginas me las va
00:08:37
haciendo con que me abre la página con el navegador aquí no me permite editar si yo quiero editarla
00:08:44
lo que tengo que hacer es simplemente abrirla con el Composer y cambiarla.
00:08:50
Por último, ¿cómo me tenéis que enviar la práctica?
00:08:56
Porque ya sabéis que no se puede ajuntar una carpeta completa a través del correo electrónico.
00:09:00
Pues básicamente lo que hago es esta carpeta comprimirla.
00:09:06
Botón derecho, enviar a carpeta comprimida en formato ZIT o formato RAR, da igual.
00:09:10
La envío, ya me aparece aquí sistema solar y esta carpeta tal cual si permite adjuntarla en el correo electrónico y me la enviáis.
00:09:15
En esa carpeta vendrán todos los archivos HTML y vendrán también todas las imágenes que vosotros habéis utilizado dentro de la carpeta imagen y así la podréis corregir perfectamente.
00:09:25
Ya tenemos hecha la página principal, una página más y me las enviáis para su corrección
00:09:36
y luego ya nos queda hacer dos, tres páginas más que las haremos con los siguientes videotutoriales.
00:09:42
Bueno, muchas gracias por vuestra atención y nos vemos en la siguiente práctica y videotutorial.
00:09:50
- Subido por:
- Jaime S.
- Licencia:
- Dominio público
- Visualizaciones:
- 188
- Fecha:
- 10 de enero de 2022 - 20:31
- Visibilidad:
- Público
- Centro:
- IES GABRIEL CISNEROS
- Duración:
- 09′ 55″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1280x720 píxeles
- Tamaño:
- 129.19 MBytes
