Nullo

ASIGNATURA
Páginas Web
CLAVE
3317
Contenido.
Introducción. 3
Práctica 1. Configuración de la estructura de la aplicación web 4
Práctica 2. Mi primera página web 9
Práctica 3. Aplicación de estilos al código HTML con CSS 14
Reglas de CSS 14
Selectores 15
Visualización en un explorador 16
Visualización de CSS aplicado 17
Práctica 4. Estilos y aspectos básicos, enlaces, imágenes. 19
Práctica 5. Tablas con HTML 21
Práctica 6. Área de trabajo Dreamweaver 23
Práctica 7. Configurar sitio en Dreamweaver 26
Práctica 8. Inserción de Imágenes en Dreamweaver 29
Práctica 9. Tablas en Dreamweaver 32
Práctica 10. Subir la página web por FTP 35
Créditos. 38
Directorio. 39
Nombre de la Asignatura
Página 2 de 38
Introducción.
Una página Web es un documento situado en una red informática al que se accede mediante
enlaces de hipertexto, y éste es aquel texto que contiene elementos a partir de los cuales se
puede acceder a otra información (Diccionario de la Lengua Española, 2003).
El presente manual se realizó con la intención de tener un material de apoyo que permita al
docente del Colegio de Bachilleres del Estado de Campeche, a elaborar las prácticas que
permitan al alumno adquirir las habilidades básicas en la creación de páginas web con
HTML en el software Visual Studio Code y posteriormente en el segundo parcial con
Dreamweaver.
Es importante mencionar que el docente podrá adecuar este material a sus necesidades para
que los alumnos al final logren adquirir las habilidades pertinentes, ya que en cada plantel
el contexto que se pueda presentar pudiese ser diferente (computadoras, programas, etc).
Página 3 de 38
Práctica 1. Configuración de la estructura de la aplicación web
HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser
vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos decir por lo
tanto que el HTML es el lenguaje usado por los navegadores para mostrar las páginas web al
usuario, siendo hoy en día la interfaz más extendida en la red.
Propósito de la Práctica.
En esta práctica, crearás una estructura de proyecto pequeña con Visual Studio Code. El proyecto
tendrá tres archivos: un archivo HTML, un archivo CSS y un archivo JavaScript. También
agregarás una extensión de Visual Studio Code para simplificar la ejecución del sitio web en el
explorador.
Desarrollo de la Práctica.
Creación de una carpeta nueva para su sitio web
1. Abra VS Code.
Al abrir Visual Studio Code, se abre la página Comenzar. Ten en cuenta que puede crear un archivo
o abrir una carpeta en la lista Inicio.
Página 4 de 38
Si la página Comenzar no está visible, puede mostrarla seleccionando Ayuda > Comenzar en el
menú. (También puede mostrar la página Comenzar abriendo la Paleta de comandos con el
método abreviado de teclado Mayús+Ctrl+P en un equipo con Windows o Mayús+Cmd+P en
macOS, o seleccionando Ver > Paleta de comandos en el menú Visual Studio Code. Cuando se
muestre la Paleta de comandos, escriba >Ayuda: Comenzar en el campo de búsqueda para abrir
la página Comenzar).
2. Seleccione Abrir carpeta en la lista Inicio de la página Comenzar o seleccione Archivo >

Abrir carpeta en el menú de Visual Studio Code.
Al abrir una carpeta, el sistema operativo tiene una opción de menú para crear una Nueva
carpeta.
3. Ve a la ubicación donde desea crear la nueva carpeta para el sitio web y

seleccione Nueva carpeta.
4. Asigna a la carpeta el nombre simple-website y seleccione Seleccionar carpeta.
Creación de algunos archivos
1. Crea un archivo; para ello, selecciona Archivo > Nuevo archivo en el menú o

use Control+N en Windows o Comando+N en macOS.
2. Guarda el archivo mediante Control+S en Windows o Comando+S en macOS.
3. Escriba index.html como nombre de archivo y, a continuación, selecciona Guardar.
Página 5 de 38
4. Repite los pasos anteriores para crear dos archivos más, main.css y app.js. Cuando haya
terminado, en el explorador de Visual Studio Code, verá que la carpeta del
proyecto simple-website contiene el siguiente archivo, que incluye el sitio web:
● index.html
● main.css
● app.js
Puedes crear un sitio web incluyendo todo el código HTML, los estilos CSS y el código JavaScript
en un único archivo. Sin embargo, en este ejercicio está usando un archivo HTML para el
contenido, un archivo CSS para los estilos y un archivo JavaScript para la interactividad.
La configuración de tres archivos ayuda a mantener organizado el proyecto del sitio web. La
separación de contenido, estilos y lógica es un ejemplo de mejora progresiva. Si JavaScript no está
habilitado o no es compatible con los clientes, HTML y CSS seguirán funcionando. Sin embargo, si
CSS no es compatible con los clientes, al menos su contenido HTML aparecerá.
Instalación de extensiones o paquetes
Puedes ampliar la funcionalidad de Visual Studio Code mediante el marketplace de extensiones.

Ten en cuenta que estas extensiones son recursos desarrollados por la comunidad y que suele haber
varias soluciones para el mismo tipo de característica. Puede instalar las extensiones de forma
individual en el editor, o bien varias al mismo tiempo con la línea de comandos.
Para el desarrollo web, todo lo que necesitas ahora es open-in-browser. Esta extensión te ayudará a
abrir rápidamente el sitio web en el explorador predeterminado, en lugar de copiar y pegar la
dirección URL del archivo en el explorador.
Página 6 de 38
Para instalar esta extensión, sigue estos pasos:
1. Selecciona el icono Extensiones en la barra de actividad vertical (panel izquierdo).
2. Escribe "abrir en" en el cuadro de búsqueda y, a continuación, seleccione la extensión abrir

en el explorador publicada por TechER.
3. Seleccione Instalar, y Visual Studio Code instalará la extensión.
4. Vuelva al Explorador; para ello, haz clic en el icono superior de la barra de actividad o
use Control+Maýus-E en Windows o Comando+Maýus-E en macOS.
¡Bien hecho! El proceso de instalación y configuración tarda un poco más, pero solo debe realizarse
una vez. Ahora ya estás listo para crear un sitio web.
Material a utilizar en la práctica.
● Visual Studio Code
Equipo a utilizar en la Práctica.
● Computadora
Página 7 de 38
Fuentes de consulta.
https://learn.microsoft.com/es-es/training/modules/build-simple-website/1-introduction
Anexos.
Para saber más

https://www.youtube.com/watch?v=G2gjh3qbN3o&t=35s
Página 8 de 38
Práctica 2. Mi primera página web
Por el momento, el sitio web tiene un archivo HTML vacío. Se agregará algo de código. El objetivo
es usar el lenguaje de marcado de hipertexto (HTML) para describir la página web que deben
mostrar los exploradores de los usuarios. ¿No sería buena idea tener una plantilla inicial? De forma
cómoda, los editores pueden rellenar automáticamente parte del texto reutilizable o la estructura
HTML típica.
En esta práctica, agregarás contenido HTML básico, y abrirás la página HTML en un explorador.
Incorporación de código HTML
Visual Studio Code proporciona compatibilidad básica para la programación de HTML desde el

principio. Incluye resaltado de sintaxis, finalizaciones inteligentes con IntelliSense y formato
personalizable.
1. Abre el sitio web en Visual Studio Code y, a continuación, abre el

archivo index.html seleccionando el archivo index.html en el Explorador.
2. En la página index.html, escribe html:5 y después seleccione ENTRAR. El código de

plantilla HTML5 se agrega al archivo.
Nota
Si el código de plantilla HTML5 no se agrega al archivo index.html, prueba a cerrar y volver a abrir

el archivo.
3. Edita el código para que se parezca al siguiente. A continuación, guarda el archivo

mediante Control+S en Windows o Comando+S en macOS.
Ha habido diferentes versiones de HTML. El tipo de documento<!DOCTYPE html> indica que este

documento HTML contiene código HTML5.
Página 9 de 38
Edición del elemento head
El elemento <head> del código HTML contiene información sobre el sitio web no visible dentro de
la pestaña del explorador.
Los metadatos definen datos sobre el documento HTML, como el juego de caracteres, los scripts y
el explorador en el que se abre la página web.
El título de una página web aparece en la parte superior de la ventana del explorador y es
significativo por muchos motivos. Por ejemplo, el título lo usan y lo muestran los motores de
búsqueda. Vamos a agregar un título.
Importante
A partir de ahora, los puntos suspensivos (...) indican que el código anterior o siguiente se ha
declarado previamente. Debe haber suficiente código proporcionado como contexto para realizar los
cambios necesarios o actualizar el trabajo, pero no debe copiar ni pegar los puntos suspensivos en el
código.
1. En el editor, modifica el elemento <title> para que se parezca al ejemplo siguiente.
Para aplicar estilos a los elementos HTML de la página web, podría escribir el código CSS
directamente en el encabezado de la página web. La escritura de CSS en la página HTML se
denomina CSS interno. Pero un procedimiento recomendado consiste en separar la estructura
HTML y los estilos CSS. Tener una página CSS independiente se denomina CSS externa. El código
suele ser más fácil de leer cuando es conciso y compartimentado. Puede usar una o varias hojas de
estilos externas para dar servicio a varias páginas web. En lugar de actualizar cada página HTML
con código CSS replicado, puede realizar cambios en un único archivo CSS y hacer que esas
actualizaciones se apliquen a todas las páginas web dependientes. Vamos a vincular a una hoja de
estilos externa.
1. En el editor de VS Code, agrega una línea en blanco después del elemento <title>,

escriba link y, a continuación, seleccione ENTRAR. VS Code debe agregar la siguiente
línea al archivo index.html.
Página 10 de 38
2. Actualice href= a href="main.css" y guarde el archivo presionando Control+S en Windows
o Comando+S en macOS.
Edición del cuerpo
Para empezar, ahora se rellenará el elemento <body>.
El elemento <body> contiene el contenido del sitio web visible para sus clientes en sus
exploradores.
1. Agrega un elemento <h1> de encabezado, seguido de un elemento <p> de párrafo y,

después, cree una lista sin ordenar<ul> que contenga varios elementos <li> de elementos
de lista.
2. Edite el código, o cópielo y péguelo, para que tenga un aspecto similar al siguiente ejemplo.
Se puede usar un atributo ID (que se usa en el elemento <p>) para aplicar estilo a un elemento,
mientras que el atributo de clase (que se usa en el elemento <li>) sirve para aplicar un estilo a todos
los elementos de la misma clase.
Página 11 de 38
Antes del paso siguiente, asegúrese de que el archivo se guarda
presionando Control+S o Comando+S.
Abrir en el explorador
Puedes obtener una vista previa local de la página web si abre el archivo HTML en un explorador.
En lugar de una dirección de sitio web que comienza con https://, el explorador apunta a la ruta de
acceso del archivo local, que debería tener un aspecto similiar a C:/dev/simple-website/index.html.
● Para obtener una vista previa con Visual Studio Code, haz clic con el botón derecho
en index.html y selecciona Abrir en el explorador predeterminado o seleccione el
archivo index.html y use el método abreviado de teclado Alt+B.
● Computadora
Página 12 de 38
Anexos.
Para saber más

Práctica 3. Aplicación de estilos al código HTML con CSS

Las Hojas de estilos en cascada (CSS) le permiten especificar la apariencia de la página. La idea
básica es definir cuál debe ser el estilo para los elementos que se usan en las páginas HTML.
Mientras que los elementos HTML definen el contenido, los estilos CSS definen el aspecto de este
contenido.
Por ejemplo, puede aplicar esquinas redondeadas o asignar un fondo degradado a un elemento.
También puede usar CSS para especificar el aspecto de los hipervínculos y su respuesta al
interactuar con ellos. También puede realizar diseños de página sofisticados y efectos de animación.
Puede aplicar estilos a elementos concretos, a todos los elementos de un tipo en particular o usar
clases para aplicar estilos a muchos elementos diferentes.
En esta práctica, aplicarás estilos CSS a los elementos de la página HTML.
Reglas de CSS
Las reglas CSS son la forma en que se aplican los estilos a los elementos HTML. Las reglas CSS
tienen un selector, que se usa para expresar a qué elemento o elementos se deben aplicar los estilos.
En Visual Studio Code, abra el archivo main.css y escriba lo siguiente.
Página 13 de 38
El fragmento de código anterior contiene dos reglas. Cada regla tiene lo siguiente:
● Un Selector. body y ul son los selectores de las dos reglas y se usan para seleccionar a qué
elementos se aplican los estilos.
● Una llave de apertura ({).
● Una lista de declaraciones de estilo que determinan el aspecto que deben tener los elementos
seleccionados.
● Una llave de cierre (}).
Por ejemplo, el selector ul selecciona el elemento HTML <ul> de la página para aplicarle estilos. La
declaración es font-family: helvetica y determina cuál debe ser el estilo. El nombre de la
propiedad es font-family y el valor es helvetica.
Como verá a continuación, puede definir nombres personalizados propios para los elementos.
Selectores
Los selectores id. y clase permiten aplicar estilos a los nombres de atributo personalizados del

código HTML. Un identificador se usa para aplicar estilo a un elemento, mientras que las clases se
pueden usar para aplicar estilo a varios elementos.
1. Copie el código siguiente en el archivo CSS, después de la llave de cierre del selector ul que
ha agregado antes.
Página 14 de 38
1. El código anterior contiene tres reglas CSS, y las dos últimas usan atributos personalizados
para seleccionar elementos: .list y #msg.
● .list es un selector de clases. Cada elemento HTML que contenga un

atributo class establecido en list obtendrá los estilos definidos dentro de este selector.
● #msg es un selector de Id. El elemento HTML que tenga su atributo id establecido
en msg obtendrá los estilos definidos dentro de este selector.
Los nombres que use para los selectores pueden ser arbitrarios, siempre que coincidan con lo
que haya definido en el código HTML.
2. Guarde el trabajo mediante Control+S en Windows o Comando+S en macOS.
Visualización en un explorador
1. Para obtener una vista previa con VS Code, haga clic con el botón derecho en el nombre de
archivo index.html y seleccione Abrir en el explorador predeterminado.
Importante
Aunque solo estuviera editando el archivo main.css, para obtener una vista previa de los
cambios, debe seleccionar el archivo index.html.
La página web se abre en el explorador predeterminado.
Página 15 de 38
¿Los estilos de fuente son los que esperaba ver? Es interesante cómo los estilos aplicados
a <body> se heredan en el elemento <h1>. No hemos definido nada para <h1>, pero aun así ha
obtenido la fuente que se definió en <body>. Este mecanismo de herencia de elementos principales
a sus descendientes es uno de los aspectos clave de CSS. Sin embargo, los elementos <li> tienen
una fuente diferente, que reemplaza la que se definió en <body>, porque también son descendientes
del elemento <ul> para el que definió un estilo.
Tenga en cuenta que, al usar Abrir en el explorador predeterminado en VS Code, cada vez se

abre una nueva pestaña en el explorador. Para evitar abrir una pestaña nueva, puede volver a cargar
la pestaña que ya contiene su sitio web.
Para volver a cargar la pestaña, presione F5, que es el método abreviado de teclado para actualizar,
o bien presione Ctrl+R en Windows o Linux, y Comando+R en Mac.
Visualización de CSS aplicado
1. En la vista del explorador, abra Herramientas de desarrollo.
Haga clic con el botón derecho en la página y seleccione Inspeccionar, o bien seleccione el

método abreviado de teclado F12 o Ctrl+Mayús+I.
2. Seleccione la pestaña Elementos y, dentro de la pestaña Elementos, seleccione la

pestaña Estilos (ya debería estar seleccionada de manera predeterminada).
3. Mantenga el puntero sobre los distintos elementos HTML y, a medida que seleccione
algunos, observe cómo las herramientas de desarrollo muestran qué estilos se han aplicado a
dichos elementos en la pestaña Estilos.
4. Seleccione el elemento <body>. Observe el elemento light-theme aplicado.
5. Seleccione el elemento <ul> de la lista sin ordenar. Observe el estilo personalizado font-
family: helvetica;, que reemplaza el estilo del elemento <body>.
Página 16 de 38
● Computadora
Anexos.
Para saber más

Página 17 de 38
Práctica 4. Estilos y aspectos básicos, enlaces, imágenes.
Con el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador. Es
conveniente, llegado a este punto, hacer hincapié en el hecho de que no todos los navegadores
son idénticos. Desgraciadamente, los resultados de nuestro código pueden cambiar de uno a otro
por lo que resulta aconsejable visualizar la página en varios. Generalmente se usan Internet
Explorer y Netscape como referencias ya que son los más extendidos
Desarrollar una página web sencilla, colocando etiquetas para la creación de títulos y encabezados
de una página web. Así mismo la inserción de links hacia otras páginas web así como la correcta
manera de insertar imágenes.
1. Abre el programa bloc de notas, visual studio code o el editor que sea de tu agrado.
2. Captura las siguientes líneas de código HTML.
<h1>Mucha importancia</h1>
<h2>Menos importancia</h2>
<h3>Mucha menos importancia</h3>
Este será un texto normal (pá rrafo 1, línea 1). <Br>
El primer pá rrafo estará formado por 2 líneas (pá rrafo 1, línea 2).
<p>
Este ya es el segundo pá rrafo (pá rrafo 2, línea 1). <p>
<b>Esto en negrita</b> y <i>esto en cursiva</i>
<Center>Verde que te quiero verde</center>
<a href="http://www.nasa.gov/">Pulse aquí para visitar a la
NASA</a>
<img src="monigote.gif" alt="MONIGOTE"><p>
<img src="http://naic.nasa.gov/images/nasa-logo.gif"><p>
3. Si el documento no tiene errores, guarda el archivo con el nombre practica2.html y

ejecútalo en tu navegador preferido.
4. Anota tus observaciones.
Página 18 de 38
● Bloc de notas, visual studio code o cualquier editor de texto que permita almacenar los
archivos con la extensión .web o .htm.
● Computadora
https://www.aragonemprendedor.com/archivos/descargas/html.pdf
Anexos.
Para saber más

Página 19 de 38
Práctica 5. Tablas con HTML
Desarrollar una página web en la cual se inserte una tabla para organizar datos.
1. Abre el programa bloc de notas, visual studio code o el editor que sea de tu agrado.
Captura las siguientes líneas de código HTML.
<HTML>
<HEAD>
<TITLE>Ejemplo 7 - Tablas</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Tablas</H1></CENTER>
<H2>Demostracion de COLSPAN y Encabezados</H2>
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TH COLSPAN="2">Head1</TH>
<TH COLSPAN="2">Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
</BODY>
</HTML>
2. Guarda el archivo con el nombre practica3.html y ejecútalo en tu navegador.


Página 20 de 38
● Bloc de notas, visual studio code o cualquier editor de texto que permita almacenar los
archivos con la extensión .web o .htm.
● Computadora
https://www.manualweb.net/html/mi-primera-pagina-html/
Anexos.
https://www.manualweb.net/html/mi-primera-pagina-html/
Para saber más

Página 21 de 38
Práctica 6. Área de trabajo Dreamweaver
Identifica los elementos principales del área de trabajo de Dreamwever.
1. Abre el programa Dreamwever el cual debe haber un acceso directo en el escritorio de
tu computadora.
2. Identifica las partes del área de trabajo de dreamwever
¿Qué es Dreamweaver?
Dreamweaver es un software fácil de usar que permite crear páginas web profesionales. Las
funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad
a las páginas, sin la necesidad de programar manualmente el código HTML.
Tal y como ya hemos visto, cualquier

editor de texto permite crear páginas
web. Para ello sólo es necesario
crear los documentos con la
extensión HTML o HTM, e incluir
como contenido del documento el
código HTML deseado. Puede
utilizarse incluso el Bloc de notas
para hacerlo.
Pero crear páginas web mediante el
código HTML es más costoso que
hacerlo utilizando un editor gráfico.
Aunque es necesario conocer algo de
HTML para poder hacer páginas de
cierta calidad.
Hoy en día existe una amplia gama
de editores de páginas web. Uno de
los más utilizados, y que destaca por
su sencillez y por las numerosas
funciones que incluye, es
Macromedía Dreamweaver.
Página 22 de 38
Conceptos básicos de DREAMWEAVER
Cuando entramos a Dreamweaver lo primero que vemos es esta pantalla:
Esta va a ser nuestra primera página web. Lo primero va a ser ponerle un título. Para ello vamos a
seguir los siguientes pasos:
- Pulsar con el botón derecho sobre cualquier parte de la hoja en
blanco y seleccionar la opción “Propiedades de la página”.
- Aparecerá la siguiente ventana, en ella pondremos el título que
tenemos aquí y como color de fondo pondremos el naranja.
Desde aquí se puede

poner también una
imagen como fondo de
pantalla si quisiéramos,
se hace seleccionándola
desde aquí
Página 23 de 38
● Anotaciones en libreta
● Computadora, software (dreamwever).
http://fepetanca.com/Documentacion/Manual%20de%20Dreamweaver%20cs6.pdf
Anexos.
Para saber más

Página 24 de 38
Práctica 7. Configurar sitio en Dreamweaver
Realizar una página web en Adobe Dreamweaver.
Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o
un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a
contener.
Por ejemplo, si vamos a crear una página web sobre un equipo de fútbol, lo primero es crear un sitio
web (por ejemplo que se llame fútbol) y dentro de ese sitio ya irán las diversas páginas que formen
parte de él. Como por ejemplo presentacion.htm, palmares.htm, plantilla.htm, etc.
La forma habitual de crear un sitio web consiste en crear una carpeta en el disco local. Los
documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las
imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta,
con el objetivo de tener una mejor organización de los archivos a la hora de trabajar.
Es muy importante que la página principal del sitio tenga el nombre index.html, ya que los
navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica.
Por ejemplo, si escribiéramos la dirección genérica http://www.petrer.es/ en el navegador, éste

intentaría cargar la página http://www.petrer.es/index.html, por lo que se produciría un error en el
caso de que no existiera ninguna página con el nombre index.html
Crear o editar un sitio web

Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en
Dreamweaver. Para ello hay que seguir los siguientes pasos:
1) Deberéis tener creada dentro de vuestra carpeta de alumno una carpeta llamada “DREAM”
2) Dirigirse al menú Sitio, a la opción Nuevo sitio. Allí veremos la siguiente pantalla:
3) Ahí introduciremos los siguientes datos: - Donde pone Nombre del
sitio pondremos “Sitio web de “nuestro nombre” - En la Carpeta raíz local.
Página 25 de 38
Cuando aceptemos nos aparecerá una nueva ventana que será el sitio web. En ella habrán dos
columnas. En la de la derecha veremos la lista de páginas web que tiene nuestro sitio, y en la
izquierda veremos la estructura de árbol que va adoptando nuestro sitio web. Esta ventana la
dejaremos minimizada porque en ella podremos ir viendo la estructura que tiene la página.
4) Ahora nos vamos a la otra ventana, la que está toda en blanco y vamos a definir tal y como
hicimos en la práctica anterior las propiedades de la página (se hacía pulsando con el botón derecho
y seleccionando la opción Propiedades de página). Introduciremos los siguientes valores:
- Título: “Primera página del sitio web”
- Color de fondo: “Azul claro”
5) Utilizando los elementos de la barra de propiedades, escribir el siguiente texto en la página que
tenéis abierta:
Página 26 de 38
6) Guardar la página con el nombre ‘index.html’ dentro del sitio web DREAM
● Computadora, software (Adobe Dreamweaver).
http://www.fisica.ru/2017/dfmg/teacher/archivos/1_Modulo.pdf
Anexos.
Para saber más

Página 27 de 38
Práctica 8. Inserción de Imágenes en Dreamweaver
Realizar una página web en Adobe Dreamweaver en la que se inserten imágenes mediante las
herramientas de Adobe Dreamweaver.
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto,
ya es posible seleccionar una imagen a través de la nueva ventana.
1) Vamos a insertar dentro de la página index.html de vuestro sitio web DREAM unas cuantas
imágenes. Éstas deberán guardarse previamente dentro de una carpeta llamada IMAGENES que
deberéis crear dentro del sitio web DREAM. Las imágenes a insertar las tenéis dentro de la carpeta
C:\ ALUMNO \ RECURSOS PARA EL ALUMNO \ IMÁGENES:
AERONA VE.JPG ARCO.JPG AVION.JPG CADENA.JPG

Ponerlas una debajo de la otra centradas, utilizando el botón centrar y guardar la página
‘index.html’
Cambiar el tamaño de una imagen

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cambio de tamaño no
se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la
imagen dentro de la página (por lo tanto no es recomendable).
Es muy probable que la imagen resultante no sea de buena calidad, en comparación de como podría
quedar modificándola desde un editor externo, como Photoshop o Gimp.
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa al icono de
Dreamweaver y modificamos su tamaño de varias formas diferentes:
Página 28 de 38
Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en
ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto
implique perder calidad.
Existen dos formas de modificar el tamaño:
- Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los
recuadros negros que aparecen alrededor de la imagen.
- La otra es a través de la ventana de propiedades, cambiando los campos An (anchura)

o Al (altura). Estos campos aparecerán en el inspector cuando sea seleccionada alguna
imagen.
Para cambiar la alineación de la imagen (izquierda, centrada, derecha) podemos hacerlo

igual que hicimos con el texto, utilizando las opciones de alineación de la ventana de
propiedades.
Pueden crearse vínculos y comportamientos sobre partes de una imagen, sin la necesidad de
que sea sobre toda ella. A esto se le conoce como mapa de imagen.
2) Vamos a abrir la página web “index.html” y modificaremos el tamaño de las imágenes
que antes insertamos, de forma que queden con el siguiente tamaño y alineación:
3) Ahora crearemos dentro de nuestro sitio web DREAM, tres páginas más, llamadas
“valencia.htm”, “andalucia.htm” y “madrid.htm”. Éstas tendrán el siguiente texto dentro:
- valencia.htm = “Página principal de la Comunidad Valenciana” , con fondo amarillo -

andalucia.htm = “Página principal de la Comunidad Andaluza”, con fondo rojo- madrid.htm =
“Página principal de la Comunidad de Madrid”, con fondo naranja
Página 29 de 38
4) A continuación, guardad las páginas anteriores y cread una página web nueva llamada
“mapa.htm”, donde añadiremos una imagen del mapa de España (que previamente os deberéis
bajar de Google).
Seguidamente definiremos sobre ella un mapa de imagen. Esto significa que dependiendo de la
zona de la imagen donde pinchemos podremos abrir un hipervínculo diferente. Para ello
utilizaremos la herramienta
Dibujar con esta herramienta el contorno de la Comunidad Valenciana y luego donde pone
vínculo, estableced la página ‘valencia.htm’.
Haced lo mismo con el resto de Comunidades, guardar los cambios y comprobad que todo
funciona correctamente pulsando sobre F12.
Guardad los cambios a la página “mapa.htm”.
Anexos.
Para saber más

Página 30 de 38
Práctica 9. Tablas en Dreamweaver
REALIZAR UNA PAGINA WEB EN DREAMWEVER EN LA QUE SE INSERTEN TABLAS
MEDIANTE LAS HERRAMIENTAS DE DREAMWEVER.
Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.
En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así
como el Ancho. El Ancho puede ser definido como Píxeles o como Porcentaje.
Borde indica el grosor del borde de la tabla, Relleno de celda indica la distancia entre el contenido
de las celdas y los bordes de éstas, y Espacio entre celdas indica la distancia entre las celdas de la
tabla.
1) Crear la tabla que tenéis a continuación dentro de la página “index.html”:
Poner como colores de arriba hacia abajo: marrón, naranja, rojo, y amarillo claro. Guardar los
cambios y comprobar cómo ha quedado.
Formato de tabla
Las propiedades de la tabla se especifican a través de su inspector de propiedades.
Página 31 de 38
A través del inspector de propiedades se pueden modificar los valores que se
especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser
el valor Alinear , el color de fondo o de borde de la tabla, o la imagen de fondo.
Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades
cambia, para permitir especificar otros valores.
La parte superior del inspector de propiedades en este caso sirve para especificar las
propiedades del texto que se insertará dentro de la celda (o celdas) seleccionada.
La parte inferior sirve para especificar valores propios de la celda, como puede ser el color
o imagen de fondo (diferentes de los especificados para la tabla global), el color del borde
de la celda, etc.
2) Crear una página web que tenga como título “Meses del año” y un encabezado en la
primera línea que ponga “Mes de Abril”. A continuación deberéis definir la tabla necesaria
para albergar este mes. Guardar la página con el nombre ‘abril.htm’ dentro de vuestro sitio
web DREAM. Además la página debe tener las siguientes características:
- color de fondo verde
- color de fondo de la tabla de color naranja
- letras para cada fila en un color diferente.
Página 32 de 38
Anexos.
Para saber más

Página 33 de 38
Práctica 10. Subir la página web por FTP
Subir nuestra primera página web a internet para que pueda verla todo el mundo utilizando un
gestor FTP.
A continuación vamos a ver cómo subir nuestra página web a Internet para que pueda verla
todo el mundo utilizando un gestor FTP.
1) Una vez hemos activado la página web, nos bajaremos un programa para “subir” las
páginas por ftp a Internet (SI NO LO TENEMOS YA INSTALADO). Para ello deberéis
entrar en http://www.smartftp.com y ahí descargaros el programa SmartFtp.
Este programa es gratuito y muy sencillo de utilizar para subir datos a Internet.
2) Instalad el programa dándole a aceptar a todos los pasos (si tenéis alguna duda no dudéis
en preguntarlo).
3) Se os creará un acceso directo en el escritorio de esta forma.Entrad en este programa y
tendréis que conectar con el servidor del colegio para poder acceder a los datos de vuestra
web. Para ello deberéis introducir estos datos:
Página 34 de 38
Y pulsar sobre el botón de conectar ( )Para que os aparezca el navegador de vuestro disco
duro tendréis que pulsar sobre el
menú FTP/Local Browser.
En estos momentos deberéis tener dos ventanas, una donde veáis los archivos de vuestro disco
duro y otra que estará enlazando con el espacio web que acabáis de crear
4) Antes de subir los archivos aseguraros que toda vuestra página funciona correctamente y que la
página principal del sitio se llama index.html (será la que cargue en primera instancia).
5) Hacer doble clic en la carpeta public_html (de la ventana de arriba) para entrar dentro de ella.
Este es el espacio reservado para guardar vuestra página web.
6) Para pasar los archivos de un sitio a otro simplemente tenéis que seleccionarlos y arrastrar
hasta la carpeta web donde queréis que queden guardados (si os pide sobrescribir algún archivo
contestar que Sí)
7) Comprobad que la página funciona correctamente, accediendo a la dirección web otorgada.

Página 35 de 38
Anexos.
Para saber más

Página 36 de 38
Créditos.
Personal docente que elaboró

Antonio Martínez Fajardo, Plantel 17 Nuevo Progreso
Mariana Alejandra Sosa Chablé, Plantel 17 Nuevo Progreso
Personal académico que validó y coordinó

José Guadalupe Ceballos Sanmiguel, Jefe de Materia C
Rosa María Rebolledo Góngora, Jefe de Materia C
Hernán Rafael Díaz Martín, Jefe de Materia C
María Fernanda Maliachi Quintana, Jefe de Materia C
Selene Noemí Cadena Cupul, Jefe de Materia C
María Isabel Ehuan Tun, Jefe de Materia C
Yolanda Erendira Acosta Alcantar, Ingeniero en Sistemas
Jaqueline del Carmen Ramírez Flores, Técnico Especializado
Isaias Pech Martínez, Técnico
Página 37 de 38
Directorio.
ÁNUAR DÁGER GRANJA

DIRECTOR GENERAL
RUBÉN SARABIA ALCOCER

DIRECTOR ACADÉMICO
PATRICIA DEL ROSARIO CAMBRANIS NAVARRETE

JEFE DEL DEPARTAMENTO DE EVALUACIÓN INSTITUCIONAL
Página 38 de 38

Nullo

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Nullo

Cargado por

Copyright:

Formatos disponibles

ASIGNATURA

2. Seleccione Abrir carpeta en la lista Inicio de la página Comenzar o seleccione Archivo >

3. Ve a la ubicación donde desea crear la nueva carpeta para el sitio web y

4. Asigna a la carpeta el nombre simple-website y seleccione Seleccionar carpeta.

Creación de algunos archivos

1. Crea un archivo; para ello, selecciona Archivo > Nuevo archivo en el menú o

2. Guarda el archivo mediante Control+S en Windows o Comando+S en macOS.

3. Escriba index.html como nombre de archivo y, a continuación, selecciona Guardar.

Instalación de extensiones o paquetes

Puedes ampliar la funcionalidad de Visual Studio Code mediante el marketplace de extensiones.

1. Selecciona el icono Extensiones en la barra de actividad vertical (panel izquierdo).

2. Escribe "abrir en" en el cuadro de búsqueda y, a continuación, seleccione la extensión abrir

3. Seleccione Instalar, y Visual Studio Code instalará la extensión.

Material a utilizar en la práctica.

Equipo a utilizar en la Práctica.

Para saber más

Visual Studio Code proporciona compatibilidad básica para la programación de HTML desde el

1. Abre el sitio web en Visual Studio Code y, a continuación, abre el

2. En la página index.html, escribe html:5 y después seleccione ENTRAR. El código de

Si el código de plantilla HTML5 no se agrega al archivo index.html, prueba a cerrar y volver a abrir

3. Edita el código para que se parezca al siguiente. A continuación, guarda el archivo

Ha habido diferentes versiones de HTML. El tipo de documento<!DOCTYPE html> indica que este

1. En el editor, modifica el elemento <title> para que se parezca al ejemplo siguiente.

1. En el editor de VS Code, agrega una línea en blanco después del elemento <title>,

Edición del cuerpo

Para empezar, ahora se rellenará el elemento <body>.

1. Agrega un elemento <h1> de encabezado, seguido de un elemento <p> de párrafo y,

Material a utilizar en la práctica.

Equipo a utilizar en la Práctica.

Para saber más

Práctica 3. Aplicación de estilos al código HTML con CSS

En Visual Studio Code, abra el archivo main.css y escriba lo siguiente.

Los selectores id. y clase permiten aplicar estilos a los nombres de atributo personalizados del

● .list es un selector de clases. Cada elemento HTML que contenga un

2. Guarde el trabajo mediante Control+S en Windows o Comando+S en macOS.

La página web se abre en el explorador predeterminado.

Tenga en cuenta que, al usar Abrir en el explorador predeterminado en VS Code, cada vez se

Visualización de CSS aplicado

1. En la vista del explorador, abra Herramientas de desarrollo.

Haga clic con el botón derecho en la página y seleccione Inspeccionar, o bien seleccione el

2. Seleccione la pestaña Elementos y, dentro de la pestaña Elementos, seleccione la

Equipo a utilizar en la Práctica.

Para saber más

3. Si el documento no tiene errores, guarda el archivo con el nombre practica2.html y

4. Anota tus observaciones.

Equipo a utilizar en la Práctica.

Para saber más

2. Guarda el archivo con el nombre practica3.html y ejecútalo en tu navegador.

Material a utilizar en la práctica.

Equipo a utilizar en la Práctica.

Para saber más

Tal y como ya hemos visto, cualquier

Cuando entramos a Dreamweaver lo primero que vemos es esta pantalla:

Desde aquí se puede

Equipo a utilizar en la Práctica.

● Computadora, software (dreamwever).

Para saber más

Por ejemplo, si escribiéramos la dirección genérica http://www.petrer.es/ en el navegador, éste

Crear o editar un sitio web

- Título: “Primera página del sitio web”

- Color de fondo: “Azul claro”

Material a utilizar en la práctica.

Equipo a utilizar en la Práctica.