3ro Secundaria

DATOS PERSONALES
Pega tu
fotografía
Nombre(s):
_______________________________________________________
Apellidos:
_______________________________________________________
Dirección
_______________________________________________________
Teléfono
_______________________________________________________
E-mail
_______________________________________________________
Si encuentras este libro, por favor

devuélvelo a la dirección de mi casa o
Colegio.
Gracias
3
DERECHOS RESERVADOS®
Texto de Computación
Autores:
Prof. Gustavo de Sales Abarca
Lic. Juan Vargas Carrasco
Diseño, Diagramación e Ilustración

Prof. Gustavo de Sales Abarca
Prof. Omar Martinez Bermudez
Ing. Dante Aguirre Gomez
PROHIBIDA SU REPRODUCCION TOTAL O PARCIAL

Sugerencias: Gustavo_dsa@hotmail.com
4
Nro Lección Tema Pag.
Lección 01 Recordemos. 7
Lección 02 Windows Básico. 9
Lección 03 El explorador de Windows. 12
Lección 04 Explorador de Windows, Herram. principal. 15
Lección 05 Actividades. 17
Lección 06 Microsoft Word 18
Lección 07 Práctica I (Viñetas, alineaciones, colores). 21
Lección 08 Barra Formato 23
Lección 09 Práctica II (Tablas, regla, imágenes) 25
Lección 10 Vista preliminar, imprimir. 27
Lección 11 Microsoft Excel 28
Lección 12 Práctica I (Operaciones matematicas y

trabajo con formato básico) 31
Lección 13 Práctica II (Operaciones con formato

De relleno, bordes, colores y gráficos 32
Lección 14 HTML 33
Lección 15 El texto 37
Lección 16 Formato de fondo y texto 41
Lección 17 Hiperenlaces 44
Lección 18 Imágenes 47
Lección 19 Tablas 50
Lección 20 DREAMWEAVER 53
Lección 21 Pasos Básicos 62
5
Nro Lección Tema Pag.
Lección 22 Publicar el sitio 66
Lección 23 Insertar una tabla 71
Lección 24 Imágenes 74
Lección 25 Vínculos 78
Lección 26 Una vista al código fuente 84
Lección 27 Marcos 90
6
RECORDEMOS
La computadora
____________________________________________
____________________________________________
____________________________________________
____________________________________________
____________________________________________
____________________________________________
____________________________________________
División de la Computadora
Hardware
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Periféricos de la computadora
Entrada Proceso Salida
Almacenamiento
7
Software
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Sistema Operativo
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
ACTIVIDADES
¿Para que sirve el Disco Duro?

__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
¿En qué se diferencia un mp3 y la memoria USB?

__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Completar
El teclado y el ratón son dispositivos de ___________________
El monitor y la impresora son dispositivos de ___________________
Marque con V si es verdadero y F si es falso.

El Windows, el Word vienen a ser parte del software...............................( )
El teclado y los juegos son programas...................................................( )
El Windows es un sistema operativo......................................................( )
La computadora solo sirve para entrar a internet y jugar.........................( )
8
WINDOWS
El Windows es un sistema operativo en modo gráfico que sirve como plataforma

para que los demás programas puedan funcionar; se le denomina multitarea
porque pueden funcionar varios programas simultáneamente.
Existen varias versiones de este sistema operativo, como es: Windows 95, Windows
98, Windows milenium, Windows 2000, Windows Xp y actualmente es la versión
Windows Vista. Obviamente que las últimas versiones es más completa que la
anterior, manejando mas herramientas y opciones para más facilidad al usuario, sin
embargo estas últimas requieren de mejor hardware para su funcionamiento.
El escritorio
Es la primera pantalla que muestra el windows, y es a partir de ahí que el usuario
puede empezar a trabajar, se le denomina escritorio de windows por su similitud de
trabajo a un escritorio verdadero.
Partes del escritorio
Papel Tapiz
ICONOS
Botón
Barra de tareas
INICIO Zona Horaria
9
Botón inicio
Para efectuar cualquier trabajo en el Windows,

generalmente se empieza haciendo clic en el botón inicio
que se ubica en la parte inferior del escritorio de Windows
donde se abrirá un menú principal conteniendo opciones de
uso general. Al lado izquierdo se muestran los iconos de los
programas más utilizados recientemente. Los de uso
frecuente son: Todos los programas y panel de control
Todos los Programas

Al ubicar el puntero del ratón en esta opción, automáticamente se desplegará un
menú conteniendo todos los programas que tenga instalada la computadora. Es
preciso aclarar que en ese menú se encuentran carpetas e iconos de acceso a
programas
Panel de control
En el panel de Control se encuentran herramientas para poder configurar el entorno
del Windows. Al hacer clic en esta opción, se abrirá una ventana como la que se
muestra en el siguiente cuadro, en ella se encuentran iconos que representan a una
determinada herramienta de configuración.
10
Por ejemplo.
Para configurar las propiedades del ratón,
debes de hacer doble clic en el icono Mouse
del Panel de Control y se mostrará una
ventana similar al de la derecha, es aquí donde
se puede modificar la velocidad de doble clic, la
figura del puntero del ratón, la velocidad de
desplazamiento, etc.
Barra de Tareas
Se ubica en la parte inferior del escritorio de Windows; básicamente nos muestra

los programas que estén “abiertos”, estos se ponen a manera de pequeñas barras y
a medida que abras más programas aparecerán mas “barritas” también nos permite
cambiarnos entre programas, simplemente haciendo clic en la barra del programa
deseado.
Iconos
Son pequeños gráficos que identifican a un determinado programa, y se les
denomina iconos de acceso directo. Los iconos que muestre el escritorio de la
computadora puede variar en cantidad, estos se agregan o quitan a criterio del
usuario, normalmente van iconos de programas que se utilicen con frecuencia.
Pasos para agregar iconos de acceso directo al escritorio

Vamos a agregar un icono de acceso directo, por
ejemplo el de bloc de notas que se ubica dentro de la
carpeta Accesorios.
1. Acceder a inicio – Todos los programas –
Accesorios.
2. Haga clic derecho en el icono del Bloc de
Notas.
3. Del submenú haga clic en la opción copiar.
4. En el escritorio hacer clic derecho y luego clic en
la opción pegar acceso directo.
11
EL EXPLORADOR DE WINDOWS
El Explorador es una herramienta indispensable en un Sistema Operativo ya que

con ella podemos organizar y controlar los archivos y carpetas de los distintos
sistemas de almacenamiento que dispongamos, como puede ser el disco duro, la
disquetera, memoria USB, etc.
El Explorador de Windows también es conocido como el Administrador de

Archivos. A través de él podemos, por ejemplo, VER, ELIMINAR, COPIAR O
MOVER ARCHIVOS Y CARPETAS.
Iniciar el Explorador de Windows
La forma más rápida de arrancar el Explorador es mediante el icono de la

barra de tareas o del escritorio. Si no tienes creado este icono también puedes abrir
el Explorador así:
Pulsar el botón Inicio

Selecciona Todos los programas
Selecciona Accesorios
Selecciona el Explorador de Windows
También se puede arrancar el Explorador desde el botón Inicio seleccionando Mis

documentos, Mis imágenes o Mi música, la diferencia es que en estos casos nos
situaremos directamente en estas carpetas.
12
Otra manera de abrir el explorador es haciendo un clic derecho sobre el botón
inicio, se mostrará un submenu, donde se debe de elegir la opción explorar, al
realizar esta acción se apertura la ventana del explorador.
La Ventana del Explorador
Esta ventana es similar a la que puedes encontrar al abrir tu explorador de

Windows, puede que el aspecto cambie un poco ya que la podemos configurar a
nuestro gusto como vamos a ir viendo.
El explorador consta principalmente de dos secciones, en la parte izquierda aparece

el árbol de directorios, es decir, la lista de unidades y carpetas que tenemos.
Sólo aparecen unidades y carpetas, no archivos. En esta imagen aparecen
varias carpetas como My Library,... el icono de Mi Pc, Mis sitios de red y la Papelera
de reciclaje.
13
En la derecha encontramos la otra sección, esta mostrará el contenido de la carpeta
que tenemos abierta en la sección de la izquierda. Esta sección muestra las
carpetas y los archivos. En este caso aparecen los archivos que hay en la carpeta
IMAGENES EXCEL. Según el tipo de vista que tengamos activado veremos distinto
tipo de información sobre los archivos, en este caso vemos el nombre, tamaño, tipo
y fecha de modificación de cada archivo porque tenemos activada la vista Detalles.
Más adelante veremos cómo cambiarla.
¿Qué es un archivo?
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
¿Qué es una carpeta?

__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
NOTAS
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
14
EXPLORADOR DE WINDOWS,
HERRAMIENTA PRINCIPAL DE TRABAJO
Este programa es uno de los mas importantes del Windows, (mencionado en la

lección anterior) para que el alumno y cualquier persona pueda manipular sus
archivos (documentos, imágenes u otros) ya sea copiarlo, moverlo, borrarlos.
Pasos para copiar un archivo

1. Seleccionar el archivo a copiar, haciendo clic derecho, donde se mostrará
un submenú de opciones.
2. Haga clic en la opción Copiar
3. Posteriormente hace clic derecho en la unidad o carpeta de destino o sea
donde se va a copiar
4. En la ventana que se muestra hacer clic en la opción pegar
Pasos para mover un archivo

Vienen a ser los mismos pasos al de copiar excepto el paso dos, que se debe de
hacer clic en la opción Cortar
Pasos para cambiar de nombre a un archivo

1. Haz clic derecho sobre el archivo a cambiar de nombre
2. Selecciona la opción cambiar nombre haciendo clic
3. A continuación escribe el nuevo nombre.
Pasos para eliminar un archivo

1. Haz clic sobre el archivo que deseas eliminar.
2. Presiona la tecla suprimir o supr
3. Del mensaje que te muestre haz clic en el botón Si.
15
Realiza la siguiente práctica en el centro de computo
1. Dentro de la carpeta Mis Documentos, crear la siguiente estructura con
carpetas:
Solo lo del área señalado en rojo
2. De la carpeta Mis documentos copiar 2 archivos de Word, (son iconos ),

hacia la carpeta secundaria
3. De la carpeta Mis documentos copiar 1 archivo de Excel, (son iconos ),

hacia la carpeta 5 años
4. Borrar la carpeta ciclo 2
5. Cambiar de nombre a la carpeta secundaria por high school
6. Mover la carpeta ciclo 3 dentro de la carpeta inicial
16
ACTIVIDADES
Pasos para copìar un archivo de MIS DOCUMENTOS a una unidad de
disquete
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Pasos para cambiar de nombre a un archivo

__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Que es la papelera de reciclaje

__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Pasos para configurar la papelera de reciclaje

__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Indique otra manera de copiar un archivo de un disco a otro

__________________________________________________________________
__________________________________________________________________
Como se puede mover varios archivos al mismo tiempo

__________________________________________________________________
__________________________________________________________________
17
MICROSOFT WORD
PRACTICA EN EL CENTRO DE COMPUTO

(tipo de letra : Comic San MS, Tamaño de letra : 18 puntos, negrita y subrayado)
Titulo: tipo de letra es verdana, tamaño a 20 puntos, centrado
Primer párrafo: tipo de letra es Comic Sans MS, tamaño a 16 puntos, alineado a la
derecha.
Segundo párrafo: tipo de letra es Arial, tamaño a 12 puntos, alineado a la

izquierda.
Tercer párrafo: tipo de letra es Courier New, tamaño a 14 puntos, justificado.
Cuarto párrafo: tipo de letra es Bodoni MT, tamaño a 14 puntos, centrado.
18
Quinto párrafo:
Sexto párrafo
Aplica los colores que observas en los párrafos.
Historia de la Computación
El ábaco fue uno de las primeras calculadoras inventada
por los antiguos griegos. Era un sencillo invento,
compuesto de cuentas insertadas en una varilla
insertadas en un marco en forma de rectángulo.
Cuando movían las cuentas sobre varillas, sus posiciones representan

valores almacenados, a través de estas posiciones se representaban y
almacenaban datos.
Dentro de la historia de la computación no podemos

llamar computadora a este artefacto ya que carecía
de programas o software, pero nos remonta a los
inicios del almacenamiento de datos a través de un
mecanismo.
19
Continuando con la historia de la computación podemos
hablar ahora de la Pascalina, inventada por Blaise Pascal en
el siglo XVII en Francia. A través de este artefacto los datos
se representaban a través de las posiciones de los
engranajes, los datos eran introducidos a mano
estableciendo dichas posiciones finales de las ruedas, algo
parecido a leer los números de un cuentakilómetros.
En la historia de la computación podemos llamar primera

computadora a la maquina creada por Charles Babbage,
profesor matemático de la Universidad de Cambridge en el
siglo XIX. La idea fue concebida para resolver el problema
de las tablas matematicas.. El gobierno Británico le
subvenciono el proyecto de una máquina de diferencias, un
dispositivo mecánico para efectuar sumas repetidas.
En Francia un fabricante de tejidos ponía su granito de

arena a la HISTORIA DE LA COMPUTACIÓN, creando un telar
que reproducía patrones de tejidos, leyendo información
codificada en patrones hechos de agujeros perforados en
papel duro.
20
PRACTICA EN LA SALA DE CÓMPUTO
Instrucciones:
El Titulo
Tipo de letra Arial, tamaño 16 puntos, centrado y de color verde, subrayado
El primer párrafo, letra verdana a 12 puntos. Justificado
Las cuatro siguientes líneas esta con viñetas, letra Comic Sans MS a 10 puntos en
negritas y colores entre verde y rojo, según se indica.
El siguiente párrafo: tipo de letra Bodoni MT, tamaño de letra 20 puntos, alineado a
la derecha y algunas palabras de colores según se observa.
Los demás párrafos deben de tener diferentes tipo de letra y tamaños, asi como
aplicar colores, negritas, cursiva y subrayado, similar a lo que se observa
Historia de la Computación (parte II)
Charles Babbage intentó crear una máquina analítica basándose en la

idea de las tarjetas perforadas del telar francés, intentando crear una
máquina capaz de calcular con precisión de 20 dígitos.
 La historia de la computación daba pasitos muy pequeños en aquella época.
 No fue hasta 1944 que la ciencia no avanzó más al respecto.
 En la Universidad de Harvard se construyó una máquina basada en dispositivos.
21
 Dispositivos electromecánicos llamados relevadores, aún no podemos hablar de
computadora.
Llegó el momento crucial en la historia de

la computación en 1947, en la
Universidad de Pensilvania, donde fue
construida la primera computadora
electrónica.
Esta máquina ocupaba el sótano entero de la Univrsida, contenía

más de 18.000 tubos de vacío, un sistema de refrigeración muy
complejo y consumía 200 Kw de electricidad, pero podía realizar
5.000 operaciones aritméticas en un segundo. La historia de la
computación comenzó aquí su increíble recorrido.
Este proyecto era respaldado por el Ministerio de Defensa de USA.

Dos años después se uniría al proyecto el matemático húngaro John
Von Newman, quien es considerado en la historia de la computación el
padre de las computadoras por su valiosa aportación al desarrollo de estas
maravillosas máquinas.
Practica las técnicas de copiar párrafos de texto, corrige la ortografía mediante las
herramientas necesarias.
Guarda tu documento para continuar la siguiente clase
22
BARRA DE FORMATO
Muestra iconos con tareas exclusivamente para dar formato o forma al texto, a
continuación se muestra los iconos mas utilizados (de izquierda a derecha).
Tipo de letra
__________________________________________________________________
Tamaño de letra
__________________________________________________________________
Negrita, cursiva y subrayado

__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Alineación
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Numeración
__________________________________________________________________
Viñetas
__________________________________________________________________
Reducir sangría
__________________________________________________________________
Aumentar sangría
__________________________________________________________________
23
Borde exterior
__________________________________________________________________
__________________________________________________________________
Color de texto
__________________________________________________________________
__________________________________________________________________
Cual es el uso de la regla
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Como se insertan viñetas y numeración

__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Para que sirve la opción deshacer, cual es la combinación de teclas

abreviadas para deshacer.
__________________________________________________________________
__________________________________________________________________
Averigua los pasos para guardar un documento con clave o password de

seguridad.
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
24
PRACTICA EN AULA
Historia de la Computación (parte III)
Fue fundamental en la historia de la computación el avance incluido por Von

Newmann, permitiendo que coexistan datos con instrucciones en la memoria,
pudiendo así ser programada en un lenguaje.
En la historia de la computación también cabe destacar la

compañía fundada por Herman Hollerith, conocida como IBM
(International Bussiness Machines), que desarrollaría muchas
de las mejores computadoras que existieron al principio de la
historia de la computación.
Avanzada la mitad del siglo XX, la ingeniería de las

computadoras avanzaba cada vez con mayor
velocidad, reduciendo estas en tamaño y
mejorando cada vez más sus funciones y
capacidad de memoria y procesamiento.
La historia de la computación nos lleva hasta la década

de los 60 donde las computadoras se programaban con
cintas perforadas y otras por medio de cableado en un
tablero. Un equipo de expertos: analistas, diseñadores,
programadores y operadores resolverían los problemas y cálculos solicitados
por la administración
LA COMPUTADORA
HARDWARE SOFTWARE
EVOLUCION ACTUAL
Pentium Core 2 Duo Windows Vista
25
Luego aparecen en la historia de la computación las primeras
computadoras personales, que necesitan ser programadas y sus
programas ser guardados en grabadoras de casettes, luego se
avanzó hasta poder guardar los datos en unidades de disco
flexibles
Es importante también en la historia de la

computación, la aparición de procesadores de
texto, las hojas de cálculo, y otras más que
revolucionaron de forma astronómica la imagen
de los PC.
La historia de la computación nos lleva hasta el

presente donde las computadoras digitales
actuales se ajustan al modelo propuesto por el
matemático John Von Newmann, según el cual
tanto los datos como los programas se almacenan
en la memoria antes de ser utilizados.
26
RESUMIENDO
Vista preliminar
Esta opción muestra como se va a imprimir en la hoja, nos da una idea de como se
mostrará en la hoja.
Para mostrar una vista preliminar del documento

se hace clic en el menú archivo, luego clic en
vista preliminar o simplemente clic en el icono de
vista preliminar de la barra estándar.
Imprimir
Mediante esta opción se puede enviar el documento actual hacia la impresora. Haz
clic en el menú archivo, luego en la opción imprimir.
En este cuadro de dialogo que se muestra, puedes elegir si quieres imprimir varias
copias, todo el documento, la pagina actual o ciertas páginas. Si quieres imprimir
tal cual está el documento solo haz clic en el botón aceptar.
Es conveniente en ocasiones configurar la página para los márgenes, orientación de

la hoja, tamaño de papel, para ello haz clic en el menú archivo y luego clic en la
opción configurar página...
27
RESUMEN DE EXCEL
Hojas de cálculo
Los programas de Hoja de cálculo son herramientas informáticas orientadas al

procesamiento de datos numéricos y a la realización de operaciones matemáticas
con dichos datos.
Como su nombre indica, las hojas de cálculo se caracterizan por presentar un

aspecto de hoja cuadriculada; es decir, un área de trabajo estructurado en
columnas y filas. La intersección de estas filas da lugar a unas casillas denominadas
Celdas. En cada una de estas celdas se puede introducir un dato. Luego se podría,
por ejemplo, sumar el contenido de varias de esas celdas y obtener el resultado en
otra celda.
Pasos básicos para utilizar adecuadamente el Excel

Como ya se ha visto el Excel con anterioridad, vamos a resumir los pasos
necesarios para utilizar correctamente el Excel.
Seleccionar celdas.
Primeramente, se selecciona una o varias celdas para poder darle forma, o sea
color de letra, tamaño de letra, tipo de letra, negritas, cursivas, subrayado, etc.
Además de cambiar el color de fondo de la celda, aplicar bordes y otros mas para
mejorar la apariencia del trabajo que se realiza. Asimismo para copiar, mover o
borrar el contenido de las celdas, también se selecciona
Para seleccionar un rango de celdas se sigue los siguientes pasos:

Ubicar el cursor al comienzo de la celda a seleccionar
Clic y sin soltar el botón “arrastrar” hasta seleccionar todo el rango de celdas
que se desea, si haces correctamente el rango de celdas seleccionado se verá
sombreado y es a partir de ahí que puedes realizar todas las tareas que veas
conveniente.
Pasos para Copiar el contenido de una o varias celdas

Seleccionar el rango de celdas que se desea copiar
28
Presionar las teclas Control C, ó clic en el menú edición › copiar ó clic en el
icono
Ir a la celda donde se desea copiar y presionar la tecla enter
Pasos para Mover el contenido de una o varias celdas

Seleccionar el rango de celdas que se desea mover
Presionar las teclas Control X, ó clic en el menú edición › cortar ó clic en el
icono
Ir a la celda donde se desea mover y presionar la tecla enter
Borrar el contenido de un bloque de celdas

Seleccionar el bloque de celdas y luego presionar la tecla Suprimir o supr
Vista preliminar
Esta opción muestra como se va a imprimir en la hoja, nos da una idea de como se
mostrará en la hoja.
Para mostrar una vista preliminar del documento

se hace clic en el menú archivo, luego clic en
vista preliminar o simplemente clic en el icono de
vista preliminar de la barra estándar.
Area de impresión
Es posible que en la hoja tengas mucha información, y solamente desees imprimir
cierto área o cierta cantidad de celdas, entonces es conveniente indicarle al
Excel el área de celdas que se desea imprimir, si se obvia este paso el Excel
asumirá que se va a imprimir todo el contenido de la hoja.
Si por ejemplo hice dos o tres cuadros en la hoja de cálculo y en este momento solo
deseo imprimir solo un cuadro, entonces deberé seguir los siguientes pasos.
 Seleccionar el área de celdas a imprimir

 Clic en el menú archivo › área de impresión › establecer área de
impresión y listo
29
Imprimir
Mediante esta opción se puede enviar el documento actual hacia la impresora. Haz
clic en el menú archivo, luego en la opción imprimir.
En este cuadro de dialogo que se muestra, puedes elegir si quieres imprimir varias
copias, todo el documento, la pagina actual o ciertas páginas. Si quieres imprimir
tal cual está el documento solo haz clic en el botón aceptar.
Es conveniente en ocasiones configurar la página para los márgenes, orientación de

la hoja, tamaño de papel, para ello haz clic en el menú archivo y luego clic en la
opción configurar página...
Configurar página
Antes de imprimir, generalmente se configura la pagina, para que la impresión en

la hoja sea apropiada, según el gráfico acá podemos configurar la orientación, o
sea, si el trabajo que hemos hecho se imprimirá vertical u horizontalmente así
mismo el tamaño de papel que voy a usar para la impresión, también es
conveniente verificar los márgenes para la impresión.
30
PRACTICA
Realizar las siguientes prácticas.
Escribe en el Excel la práctica y halla el resultado del neto de cada persona, que
será igual a la sumatoria del S. básico más la bonificación:
Aplicando operaciones matemáticas básicas realiza los siguientes ejercicios

Hallar el neto que es igual al S. básico mas la bonificación y menos el descuento
Efectúe el siguiente cuadro dándole formato como se ve en la imagen y a

continuación halle el promedio.
31
PRACTICA
Aplicando formato, bordes, rellenos, alineaciones realiza los siguientes ejercicios.
Aplica formato de moneda y halla el total que es la suma de las ventas de los tres
meses
32
QUÉ ES HTML
El HTML (Hyper Text Markup Language) es el

lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es
decir, un lenguaje que permite escribir texto de forma estructurada, y que está
compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del
documento.
Un documento hipertexto no sólo se compone de texto, puede contener imágenes,

sonido, vídeos, etc., por lo que el resultado puede considerarse como un
documento multimedia.
Los documentos HTML deben tener la extensión html o htm, para que puedan ser
visualizados en los navegadores (programas que permiten visualizar las páginas
web).
Los navegadores se encargan de interpretar el código HTML de los documentos, y

de mostrar a los usuarios las páginas web resultantes del código interpretado.
Versiones de HTML
En noviembre de 1995 se aprobó el estándar HTML 2.0. para la creación de páginas

web. Se creó con objetivos divulgativos, orientado a la actividad académica, en el
que el contenido de las páginas era más importante que el diseño.
Pero esta versión del HTML carecía de muchas herramientas que permitieran
controlar el diseño de las páginas y añadir contenido multimedia, por lo que
Netscape (cuyos navegadores eran los más utilizados por aquellos años) comenzó a
incluir nuevas etiquetas que no existían en el estándar.
El comité encargado de establecer los estándares dentro de Internet, comenzó a

trabajar en el borrador de una nueva versión de HTML, el borrador de HTML 3.0.
Pero este borrador resultó demasiado extenso, al intentar incluir numerosos nuevos
atributos para etiquetas ya existentes, y la creación de otras muchas etiquetas
nuevas. Por ello, no fue bien aceptado por el mercado y varias compañías se
unieron para formar un nuevo comité encargado de establecer los estándares del
HTML. Este comité pasó a llamarse W3C.
33
En enero de 1997 se aprobó el estándar HTML 3.2. Este nuevo estándar incluía las
mejoras proporcionadas por los navegadores Internet Explorer y Netscape
Navigator, que ya habían realizado estensiones sobre el estándar HTML 2.0.
En diciembre de 1997 se aprobó el estándar HTML 4.0, creado para estandarizar los
marcos (frames), las hojas de estilo y los scripts.
En septiembre de 2001 se aprobó el estándar HTML 4.01.
Estructura de una página
La estructura básica de una página es:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Ahora veamos cómo funcionan estas etiquetas.
Identificador del tipo de documento <html>
Todas las páginas web escritas en HTML tienen que tener la extensión html o htm.
Al mismo tiempo, tienen que tener las etiquetas <html> y </html>.
Entre las etiquetas <html> y </html> estará comprendido el resto del código
HTML de la página.
Por ejemplo:
<html>
...
</html>
Cabecera de la página <head>
La cabecera de la página se utiliza para agrupar información sobre ella, como puede
ser el título.
34
Está formada por las etiquetas <head> y </head>. La etiqueta <head> va justo
debajo de la etiqueta <html>.
Por ejemplo:
<html>
<head>
...
</head>
...
</html>
Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y
más se utilizan son:
<link>, <style>, <script> (estas etiquetas las veremos más adelante), <meta>
y la etiqueta <title> que te explicamos a continuación.
Título de la página <title>
El título de la página es el que aparecerá en la parte superior de la ventana del

navegador, cuando la página esté cargada en él.
Para asignar un título a una página es necesario escribir el texto deseado entre las
etiquetas <title> y </title>.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas
<head> y </head>.
Por ejemplo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
...
</html>
35
¿Qué significa HTTP?
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Diferencia entre correo electrónico y páginas Web

__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Pasos para copiar una imagen de una página web al disco duro
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
Principales navegadores de Internet

__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
36
EL TEXTO
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto, así
como a insertar caracteres especiales o separadores.
Caracteres especiales y espacios en blanco
Los caracteres < y > son dos caracteres especiales que indican inicio y fin de
etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el
nombre que los representa:
< Se representa con <

> Se representa con >
Existen otra serie de caracteres que no se visualizan correctamente en algunos

navegadores, como es el caso de la ñ y las letras acentuadas, por lo que al igual
que ocurre con los caracteres especiales < y >, para insertarlos como texto habría
que escribir el nombre que los representa.
A continuación se muestra una lista con algunos caracteres y el nombre con el que
han de ser representados:.
Caracter Representación Caracter Representación

< < € €
> > ç ç
Á á Ç Ç
Á Á ü ü
É é Ü Ü
É É & &
í í ¿ ¿
Í Í ¡ ¡
ó ó " "
Ó Ó · ·
ú ú º º
Ú Ú ª ª
ñ ñ ¬ ¬
Ñ Ñ © ©
™ ® ®
37
Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben
varios espacios en blanco seguidos solamente se mostrará uno en el navegador.
Para conseguir que se muestren varios espacios en blanco seguidos puede
sustituirse cada uno de ellos por .
Por ejemplo, para insertar el texto:
¡Bienvenidos, esta es mi 1ª página!
Habría que escribir:
¡Bienvenidos, esta es mi 1ª ágina!
Comentarios
En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de

manera que no sean visualizados en el navegador, pero sí a la hora de editar el
documento.
Para insertar comentarios dentro del código, basta con insertar el texto entre .
Todo el código que se inserte entre estos símbolos no será visualizado en los
navegadores.
Por ejemplo, para insertar el texto siguiente con un comentario:


Saltos de línea <br>
En general, cuando trabajamos con un editor de texto se produce un salto de línea

al pulsar la tecla INTRO.
Si pulsamos INTRO en un documento HTML, el salto de línea se producirá en el

código, pero no se mostrará en el navegador. Para que se produzca el salto de línea
38
en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta
<br> donde se desee que se produzca el salto.
La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la

etiqueta </br> después de ella, ya que dicha etiqueta no existe.
Por ejemplo, para insertar el texto:
Queridos usuarios,
tengo el placer de comunicaros que hay una nueva sección.
Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva

secci&oacuten.
EJERCICIO
Para realizar nuestro primer ejercicio necesitamos de un editor de textos, en esta
caso utilizaremos el bloc de notas (inicio › todos los programas › accesorios › bloc
de notas).
Escribiremos lo siguiente
<html>
<head>
<title> ejercicio 1 </title>
</head>
<body>
Hola amigos, <br> este es mi primera pagina web
</body>
</html>
39
Guardaremos este trabajo con nombre ejercicio1.htm en la carpeta Mis
Documentos (Archivo › Guarda como…)
Ahora para ver nuestro trabajo ingresaremos al programa Internet Explorer e

ingresaremos al menú archivo › abrir › examinar…
De la lista notaremos primero que estamos en la carpeta mis documentos y
haremos clic en el archivo ejercicio1.htm luego clic en el botón abrir.
Una vez mas clic en el botón aceptar y listo, se vera nuestro primer trabajo.
No tendrá ni figuras ni fondo de colores, etc.. pero es nuestro primer ejercicio,

ánimo mas adelante iras aprendiendo y mejoraras notablemente tus diseños web.
40
FORMATO DE FONDO Y TEXTO
Color de Fondo
Para aplicar color de fondo se debe modificar la etiqueta ‹body›.
‹body bgcolor=”blue”›
Bgcolor es el parámetro para aplicar color de fondo; los colores que se quiere
aplicar indicar entre comillas y en ingles por ejemplo si se desea fondo azul le
indicamos blue.
Usando los nombres de colores, conseguirás solo los colores básicos (rojo, azul,
verde, negro, blanco, amarillo, etc.), sin embargo es posible crear colores de una
gama diferente tal vez un celeste claro o un marfil claro mezclado con un poquito
de verde.
‹body bgcolor=”#FF0000”›
En este ejemplo se esta aplicando el color rojo, sin embargo la explicación es la

siguiente #RRVVAA los dos primero representa al rojo, los dos siguientes verde y
los dos últimos al azul, ahora cada color esta en un rango de 00 a FF, esto es el
sistema hexadecimal y la numeración es la siguiente 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A,
B, C, D, E, F, a continuación algunos ejemplos de colores
#000000 Negro #666666 Plomo

#FFFFFF Blanco #FF9900 Naranja
#FF0000 Rojo #FFFFCC Amarillo Claro
#00FF00 Verde #CC99FF Lila
#0000FF Azul #006600 Verde pasto
#770000 Guindo #999999 Plomo claro
Puedes crear tu propia gama de colores aplicando porcentajes de color a menor

numero mas oscuro y mayor numero mas claro, te recuerdo que los colores esta en
sistema hexadecimal.
Color de texto
Para el color del texto se aplica las etiquetas <font color=”#RRVVAA”>…</font>
Por ejemplo
<font color="#FF0000">Hola amigos, </font>
En la línea anterior se aplica color rojo al texto que se encuentra dentro de la
etiqueta
Tipo de letra
41
Para el tipo de letra se aplica de la siguiente forma <font face=”tipo de letra”>…
</font>.
Por ejemplo
<font face="comic sans ms">Hola amigos</font>
Tambien es posible combinar color y tipo de texto. Por ejemplo

<font color="#FF0000" face="comic sans ms">Hola amigos</font>
Escribe el siguiente código en el bloc de notas:
Guárdalo haciendo clic en archivo, luego en guardar como… con el nombre

ejercicio2.htm
Abre el programa Internet Explorer y abre el archivo ejercicio2.htm para probarlo.
42
Describe las siguientes etiquetas
<h1> … </h1>
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
<center> … </center>
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
<em> … </em>
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
<strong> … </strong>
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
43
HIPERENLACES
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que
son un elemento esencial para cualquier página web.
Hiperenlace <a>
Un hiper enlace, hipervínculo, o vínculo, no es más que un enlace, que al ser

pulsado lleva de una página o archivo.
Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un
enlace han de encontrarse entre las etiquetas <a> y </a>.
A través del atributo href se especifica la página a la que está asociado el enlace,
la página que se visualizará cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace:
Visita www.cienciasmajes.com
<a href="http://www.cienciasmajes.com">Visita www.cienciasmajes.com</a>
Tipos de referencias
Existen diferentes formas de expresar una referencia a una página a través del
atributo href.
Referencia absoluta:
Conduce a una ubicación externa al sitio en el que se encuentra el documento. La

ubicación es en Internet, en este caso hay que empezar la referencia por http:// ,
el nombre del dominio y algunas veces el nombre de la página. Si no se escribe el
nombre de la página se cargará la página de inicio asociada al dominio.
Por ejemplo, "http://www.peru.com" tendrá el mismo efecto que

"http://www.peru.com/index.htm"
Para insertar el enlace:
44
Visita www.cienciasmajes.com
<a href="http://www.cienciasmajes.com">Visita www.cienciasmajes.com</a>
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual.
Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con
un diseño similar o un objetivo común, estando todos ellos dentro de una misma
carpeta, conocida como carpeta raíz del sitio.
Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra

directamente dentro de la carpeta raíz del sitio, para insertar el enlace:
Enlace a Tema 4: Hiperenlaces
<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra
inclinada indica la carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara,
por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la
carpeta raíz del sitio, habría que escribir:
<a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Punto de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro

diferente. Para ello el vínculo debe ser
"nombre_de_documento#nombre_de_punto".
Por ejemplo, para insertar el enlace:
Punto de fijacion Tipos de enlaces
45
<a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>
Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijación se

llama tipos.
Ejercicio
Escribe el código necesario para que se muestre la siguiente página
NOTAS
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
46
IMÁGENES
Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus

propiedades.
Imagen <img>
Todas las páginas web acostumbran a tener un cierto número de imágenes, que
permiten mejorar su apariencia, o dotarla de una mayor información visual.
Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta
no necesita etiqueta de cierre.
El nombre de la imagen ha de especificarse a través del atributo src.
Por ejemplo, para insertar la siguiente imagen:
<img src="/pez.gif">
Teniendo en cuenta que la imagen se llama pez.gif, que se encuentra en el mismo

directorio que el documento actual (referencia relativa al documento).
Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los
documentos html se encuentren en un mismo directorio, y que dentro de este
directorio existan diferentes carpetas para agrupar otros objetos, como puede ser
una carpeta destinada a almacenar imágenes, o una carpeta destinada a almacenar
archivos de audio, etc.
Existen una serie de formatos de imagen más recomendables que otros para ser
introducidos en una página web. Tales como jpg (fotos), bmp (mapa de bits).
47
Texto alternativo
Cuando una imagen no puede ser visualizada en el navegador, cosa que puede
ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con
una X roja en su lugar, junto con el nombre de la imagen.
Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el

texto que nosotros deseemos, gracias al atributo alt.
Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el
texto alternativo Imagen gato, para ello insertamos el siguiente código:
<img src="gatito.gif" alt="Imagen gato" >
Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo

directorio que el documento actual, sino que se encuentra dentro de la carpeta
imagenes. En lugar de la imagen se mostrará lo siguiente:
Si en lugar del código anterior hubiéramos insertado el siguiente código:
<img src="imagenes/gatito.gif" alt="Imagen gato" >
La imagen habría mostrado correctamente:
El texto alternativo se muestra también al situar el puntero sobre la imagen. Si

situas el puntero sobre la imagen durante unos segundos, verás como aparece el
texto Imagen gato.
Imagen como fondo de pagina
Es posible que una página web tenga como fondo una imagen en vez de un color de
relleno, esto se consigue de la siguiente manera
<body background="/fondo.gif">
En este caso se usara como relleno
48
Primer paso, abrimos el Bloc de Notas y empezamos a escribir el siguiente codigo.
Guárdalo con un nombre por ejemplo tarea5.htm

Cuando se inserta la imagen del chanchito se incluye el parámetro align=”right”
que indica alineado a la derecha, puedes cambiarlo por center o left
Las imágenes de relleno como la imagen del chanchito para este ejemplo están en
la misma carpeta.
Ingresa al programa Internet Explorer y busca el archivo tarea5.htm
49
TABLAS
En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas
y columnas, y modificar sus propiedades.
Hoy en dia, la mayoría de las páginas web se basan en tablas, ya que resultan de
gran utilidad al mejorar notablemente las opciones de diseño.
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero
gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al
lado de un bloque de texto, y otra serie de cosas que sin las tablas serían
imposibles de realizarse.
Tabla <table>
Las tablas están formadas por celdas, que son los recuadros que se obtienen como
resultado de la intersección entre una fila y una columna.
Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre
dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.
Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la
tabla. Estas etiquetas deberán insertarse entre las etiquetas <table> y </table>.
Por ejemplo, para crear una tabla con cinco filas escribiríamos:
50
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Columna o celda <td>
Para crear una tabla no basta con especificar el número de filas, es necesario
también especificar el número de columnas.
Una celda es el resultado de la intersección entre una fila y una columna, por lo que
podremos especificar el número de celdas por fila, que equivale a especificar el
número de columnas por fila.
Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que
compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas
etiquetas entre las etiquetas <tr> y </tr>.
Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de
las celdas. Por ejemplo, para insertar la siguiente tabla:
<table border="1">
<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
51
<td>Curso Flash</td>
</tr>
</table>
PRACTICA
Realiza la siguiente pagina con sus respectivas características
52
DREAMWEAVER
Introducción
Sin ningún lugar a dudas, DREAMWEAVER el mejor editor, precisamente por esto,
para emplear un editor, sea el que sea, hay que conocer un poco el código html.
Hay muchas veces que los editores, también Dreamweaver, escriben código que no
es exactamente lo que nosotros queremos. Pues bien, Dreamweaver permite
localizar perfectamente el sitio donde ha escrito el código correspondiente y, con
esta localización, nosotros podremos ir y modificar directamente lo que sea
necesario. Pero para esto hay que saber un poco del código html. En este manual
iremos haciendo referencia al lenguaje html pero, si lo deseas, puedes aprenderlo o
acudir para una referencia concreta a un Manual de Lenguaje HTML.
Abrir el programa.
Una vez instalado, lo encontramos en la ruta (Windows XP) Inicio > Todos los
programas > Macromedia > Macromedia Dreamweaver MX 2004
Aparecerá la siguiente interfaz:
53
Antes de continuar, es importante que te familiarices con las columnas y
fragmentos de filas que se hacen visibles o no, pinchando en los correspondientes
iconos. Para ocultar la columna de la derecha se le da al icono . Para recuperar su
vista se le da a
Tanto en la columna derecha, más estrecha, como en la izquierda, más ancha, hay
fragmentos de filas que se muestran o se ocultan pinchando en el nombre. Por
ejemplo podemos ocultar el panel de Propiedades pinchando en .
Para volverlo a recuperar, pinchamos en
Crear el sitio.
Lo primero que tenemos que hacer es crear una carpeta que será la carpeta en la
que guardemos todas nuestras páginas, y todos los archivos que vayamos
añadiendo, es la carpeta raíz del sitio. La podemos tener previamente creada o
crearla a partir del Dreamweaver. Le damos a Sitio > Administrar sitios...
54
Aparecerá el siguiente cuadro de diálogo:
Le damos a Nuevo... > Sitio
Aparecerá momentáneamente este cuadro de diálogo:
55
Para, automáticamente, saltar a éste otro: (en el caso de que no salte
automáticamente, se le da al botón Editar...)
Pinchamos en la pestaña Avanzadas:
Lo primero que hacemos es poner un nombre al sitio. Por ejemplo, Mi primer sitio
y, acto seguido, pinchamos en la carpeta de Carpeta raíz local. Nos vamos a un
disco duro, por ejemplo D
56
Pinchamos en para
crear una nueva carpeta
y le ponemos como
nombre
mi_primer_sitio
(nombre sin espacios
vacíos, sin acentos, sin caracteres especiales, preferiblemente minúsculas).
Hacemos doble clic en Abrir:
Y, después en Seleccionar:
57
Observa que ya tenemos definido el sitio con un nombre Mi primer sitio y en una
carpeta mi_primer_sitio. Le damos a Aceptar:
Y, luego a Listo.
Observa el lateral derecho de la interfaz:
58
Aparece abierto el sitio Mi primer sitio que está alojado en la
carpeta mi_primer_sitio dentro del disco duro D
Crear el primer documento.
Para crear la primera página (el primer documento) podemos, simplemente, hacer
clic en Crear nuevo > HTML en el "tablón de mandos" que aparece en el espacio
central principal.
Aparecerá nuestro primer documento que, a falta de guardarlo con un nombre,

Dreamweaver lo llama Untitled-1
59
Pero este tablón de mandos no siempre va a estar visible. El mejor método es
hacerlo por medio de Archivo > Nuevo...
Aparecerá este nuevo cuadro de diálogo. Elegimos Página básica y HTML y

pulsamos en el botón Crear
Y llegaremos al mismo sitio ya explicado, un Untitled-1 listo para convertirse en

nuestra primera página.
Procedemos, a continuación, a su guardado. Le damos a Archivo > Guardar
Dreamweaver procederá a guardar el documento en la carpeta raíz del sitio
Como va a ser el primer documento del sitio, podemos llamarlo index.htm
Pulsamos el botón Guardar.
Observa cómo se ha colocado el archivo en la barra lateral derecha de la interfaz:
60
A continuación, procedemos a poner un título al documento:
Los títulos de los documentos se pueden (y se deben) escribir con la normas de

ortografía habituales del idioma. Es un tema importante: Aparecerá en la barra
superior de navegación, es el nombre con el que la página se guarda en Favoritos o
en Marcadores y es, también, el nombre con el que los buscadores encuentran una
determinada página.
Pulsamos la tecla F12 para hacer saltar al navegador. Si no hemos guardado la

página previamente, nos preguntará:
Le decimos que Sí y vemos nuestra página:
61
Describe el modelo de página que vas a crear, de que se va a tratar, haz un
pequeño bosquejo de tu tema.
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
62
PASOS BASICOS
A poner algo en el documento

Simplemente empezamos a escribir en el espacio vacío. Le damos un "enter" para
saltar de línea.
Para dar formato al texto, disponemos de las herramientas que aparecen en el

Inspector de Propiedades:
Si este panel está oculto es porque está en esta posición:
Observa la cabeza de flecha apuntando hacia la derecha. Haciendo un clic, la

cabeza de flecha apuntará hacia abajo y el panel se desplegará como en la
situación anterior.
Para efectuar los cambios que necesitemos, tendremos que seleccionar

previamente el texto que queramos modificar:
63
He seleccionado la primera palabra. Le he aplicado un Encabezado 1, lo he
centrado, no he cambiado el tipo de fuente, ni el tamaño (ya lo hace al ser
encabezado de orden 1) y he elegido el color rojo. En estos momentos,
Dreamweaver le ha puesto un nombre a esta selección de formatos: Estilo 1
Modifico ahora la segunda frase:
Ahora he puesto en negrita, centrado, he cambiado el tipo de fuente, he puesto

como tamaño grande y he elegido ese color. Dreamweaver le ha puesto como
nombre Estilo 2.
Observa que, mientras hacemos algún cambio y no guardamos, aparece un

asterisco en la pestaña que nos indica el documento que tenemos abierto:
Lo guardamos con Archivo > Guardar
Y el asterisco desaparece:
Conviene guardar cada cierto tiempo por lo que pueda pasar...
Vamos ahora a poner un color de fondo. Pinchamos en el botón Propiedades de la

página... del Inspector de propiedades y se abre el cuadro de diálogo:
Pinchamos en Color de fondo y elegimos uno:
64
Se habrá colocado en su sitio y le damos a Aceptar:
Guardamos y cargamos en el navegador con la tecla F12:
PRACTICA
Realiza la siguiente página con el Dreamweaver
65
RESUMEN
Los pasos que debes de seguir en resumen son:
1. Si es la primera vez que estas creando una página, entonces

debes de crear el sitio (paginas 54,55), en caso de ya haber
trabajado anteriormente con la página, debes verificar que el
sitio sea el mismo con el que venias trabajando, sino es asi,
ingresa al menú sitio, administrar sitio.
2. Para establecer el sitio, por el momento solo es importante

establecer la unidad y la carpeta donde se van aguardar los
archivos, aun no es necesario crear el sitio donde se va a
publicar.
NOTA
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
66
PUBLICAR EL SITIO
Puede parecer un poco prematuro empezar ya a pensar en publicar nuestra página.

Tal como la tenemos apenas tiene un saludo de bienvenida... Carece de contenido
y, por tanto, de interés. Pero este curso quiere hacer hincapié en enseñar al
interesado de manera minuciosa los pasos que, por experiencia, están descuidados
en otros cursos o manuales... Al alumno que está aprendiendo le cuestan,
fundamentalmente, los primeros pasos y los últimos. Y, es en esos dos momentos,
cuando necesita más ayuda. Así que vamos a proceder a desarrollar los pasos
necesarios para conseguir publicar nuestra página.
Conseguir un servidor que nos lo aloje
Es la primera condición: conseguir un Servidor o Host que nos proporcione un

espacio para alojar la página.
Hay algunos que son gratuitos pero, en contra, van a llenar las visitas a tu página
con publicidad no siempre suficientemente discreta. Uno de ellos es Yahoo a través
de Geocities.
Lo primero que hay que hacer es conseguir una cuenta de correo con Yahoo. Una
vez conseguida, hay que darse de alta en Geocities con el nombre de usuario (ID)
y la contraseña que te has creado en la cuenta de correo de Yahoo.
Otra posibilidad son los espacios proporcionados por algunas empresas a sus
empleados, por las universidades a sus profesores y estudiantes, por las
consejerías de educación, por los ministerios,... Estos espacios son mejores pues no
tienen publicidad aunque, en algunos casos, no son de acceso totalmente público...
¿Cual es la dirección URL?
Este ordenador servidor nos tiene que proporcionar unas claves para la
transferencia de los ficheros y la dirección en la cual se encontrará nuestra página
inicial.
En el caso de Geocities:
Supongamos que el nombre de usuario o ID es angelpuente56 (su dirección de
correo es angelpuente56@yahoo.es), pues bien, la dirección URL de su página es
http://es.geocities.com/angelpuente56/ y se visualizará siempre y cuando su
67
primera página se llame index.htm o index.html En caso de llamarse
pagina0.htm habrá que añadir a la dirección anterior, el nombre del archivo inicial
pagina0.htm Lo recomendable es llamar a la primera página index.htm
Esta es la imagen inicial de la primera página que, por defecto, crea Geocities:
Cuando se mande al servidor el index.htm del propietario, esta primera página de

Geocities será sustituida por la creada por el usuario.
Transferencia de ficheros
Podemos emplear un programa específico de transferencia de ficheros por FTP (File

Transfer Protocol o Protocolo de Transferencia de Archivos) como el WS_FTP o el
CUTE o el FileZilla (este último es software libre y funciona muy bien). Pero no es
necesario. El Dreamweaver es perfectamente capaz de realizar la transferencia sin
ningún problema.
Transferencia desde Dreamweaver
Lo que hay que hacer primero es configurar los datos del remoto. Para ello hay que
darle a Sitio > Administrar sitios
68
Se abrirá la ventana de Administrar sitios con todos los sitios que tengamos
definidos y con el que estemos trabajando, seleccionado.
Pinchamos en Editar...
69
Pero ahora nos interesan los Datos remotos:
Vamos a poner dos ejemplos concretos. El de Geocities.
En el caso de Geocities:
Desplegamos las posibilidades del Acceso, elegimos FTP y rellenamos los datos del
Servidor FTP, Directorio del Servidor (en el caso de Geocities no hay que poner
nada), el nombre de Usuario (la ID de Yahoo) y la Contraseña. Seleccionamos
Guardar y lo demás lo dejamos como está:
Pinchamos en el botón Prueba para comprobar que se conecta correctamente.

Aparecen estos mensajes:
70
Aceptamos y le damos a Listo.
NOTAS
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
71
INSERTAR UNA TABLA
Las tablas son muy importantes para el diseño de una página web. Muchos de los
temas de colocación de elementos en un determinado punto del espacio, se
resuelven de manera correcta, empleando tablas. La tabla se puede definir con un
borde cero con lo que, podremos ocultarla, si no nos gusta presentar los contenidos
encorsetados dentro de los límites de las celdas. Pero, insisto, nos habrá servido
para colocar los elementos en los puntos, más o menos, deseados.
Para insertar una tabla, le damos a Insertar > Tabla
Aparecerá un cuadro de diálogo como éste:
72
Podemos definir, de entrada, el número de filas y columnas, el ancho que
ocupará en % o en píxeles, el grosor del borde, el relleno de celda o el espacio
en píxeles que hay desde el borde de la celda al comienzo de los datos, sea
escritura o imagen. El espacio entre celdas es lo que indica el nombre, definido
en píxeles también. Los encabezados son un preformateado de las celdas elegidas
para escribir con caracteres enfatizados y centrados. El resto, no lo consideramos
de momento.
A modo de ejemplo vamos a insertar una tabla con 3 filas y 6 columnas y que
ocupe el 80 % del ancho, un borde de 2 píxeles y un relleno de celda de 5
píxeles y sin encabezado:
Modificar la tabla
Si colocamos el cursor en una de las celdas, el Inspector de Propiedades tendrá
un aspecto similar a éste:
Lo que hay por encima justo del panel del Inspector de Propiedades son las
etiquetas del lenguaje HTML que veremos más adelante. De momento, indicar
que la etiqueta <body> (de body, cuerpo) hace referencia a todo el documento
que se visualiza con el navegador. La etiqueta <div> (de division, división) hace
referencia a una división o un espacio acotado en el que se pueden situar
determinados elementos. La etiqueta <table> (de table, tabla) hace referencia a la
tabla entera, la etiqueta <tr> (de table row, fila de la tabla) a la fila en la que está
el cursor y la etiqueta <td> (de table data, o datos de la tabla) a la celda. Observa
que la última etiqueta está marcada. Eso quiere decir que es la celda la que está
seleccionada y todo lo que ponga en el Inspector de Propiedades será con
referencia a esa celda.
73
Si queremos centrar la tabla, la seleccionamos pinchando con el cursor en cualquier
punto interno y presionando la etiqueta <table> . La
tabla quedará marcada con un borde de color negro con unos cuadraditos
(tiradores) en los puntos medios de los lados lateral derecho e inferior:
Una vez seleccionada, observa que el Inspector de Propiedades está

relacionado con la tabla. Allí selecciona Alinear > Centro
La tabla quedará alineada al centro:

NOTAS
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
74
IMÁGENES
Para insertar una imagen es conveniente tenerla previamente guardada en la

carpeta del sitio. De lo contrario Dreamweaver nos advertirá para que lo hagamos.
Las imágenes pueden estar sueltas en la carpeta raíz junto con los archivos de
cada uno de los documentos o, mucho mejor, en una carpeta especial dentro del
sitio a la que llamaremos imagenes ( nombre de los archivos y carpetas sin
acentos ) o cualquier otro nombre que nos sugiera que, dentro de esa carpeta,
están nuestras imágenes.
Para crear una carpeta dentro de la carpeta raíz del sitio: pinchamos sobre la
carpeta raíz en el panel lateral derecho con el botón derecho del ratón y, en el
menú contextual, elegimos Nueva carpeta
Aparecerá una nueva carpeta. DW le habrá puesto como nombre untitled
Nosotros le cambiamos el nombre:
75
Podemos llevar las imágenes a la carpeta por cualquiera de los procedimientos
habituales en Windows. Si por ejemplo, tal como indicábamos al principio, la
imagen no está previamente guardada en la carpeta, Dreamweaver nos va a
sugerir que lo hagamos. Supongamos que queremos insertar una imagen que
tenemos guardada en el Escritorio. La imagen se llama enobras.gif
Pinchamos en Insertar de la barra de menús y soltamos en Imagen.

Se abre la ventana del explorador para que localicemos la imagen que queremos
insertar.
Le damos a Aceptar. Como la imagen está fuera de la carpeta raíz del sitio,
aparece un mensaje de advertencia.
Le decimos que sí y se nos abre la carpeta raíz del sitio.
Hacemos doble clic sobre la carpeta imagenes:
Y le damos a Guardar. La imagen se habrá colocado en el documento y en la
barra lateral derecha, en archivos, podremos ver la imagen dentro de la carpeta
imagenes
Observa la imagen colocada en el documento. Como está seleccionada, el panel del

Inspector de Propiedades estará referido a la imagen:
76
Una imagen puede colocarse también como fondo de una página, o de una tabla, o
de una celda. Por ejemplo, en la tabla que hemos creado en el apartado anterior
vamos a poner un fondo en la primera celda de la primera fila. Insertamos la tabla
y situamos el cursor en la primera celda.
Y, en el panel del Inspector de Propiedades, nos fijamos en
Una forma de hacerlo es pinchar en y, sin soltar el ratón, arrastar hasta pillar la
imagen que queremos colocar (en este caso se llama fondo01.gif) en el panel de
archivos de la derecha:
77
NOTAS
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
78
VÍNCULOS
Los vínculos , hipervínculos , enlaces , hiperenlaces, links (todas estas

palabras designan el mismo concepto) es uno de los elementos más importantes
del lenguaje HTML con el que se construyen las páginas web.
Vínculos a otro documento del mismo sitio
Es, quizá, el vínculo más usado. Para ello se selecciona el elemento que va a servir
para enlazar (puede ser una palabra, una frase, una imagen, un fragmento de
imagen,...). Una vez seleccionado, pinchamos en el icono de la sección Vínculo
dentro del panel del Inspector de Propiedades y elegimos el archivo vinculado.
Por ejemplo. Vamos a hacer que la frase ir a la página anterior sea un vínculo con
la página anterior de este manual de Dreamweaver. Seleccionamos la frase
Y vamos al Inspector de Propiedades (si no está abierto, lo abrimos pinchando
en ) y , tenemos dos opciones. Por una vez vamos a ver dos formas
diferentes de hacer las cosas.
La primera es pinchar en el icono del apartado
y arrastar sin soltar hasta pillar el

archivo al que queremos que apunte el vínculo. Si la columna derecha no está
visible, hazla visible antes pinchando en el icono
La segunda es pinchar en el icono carpeta que está al lado. Se abrirá la carpeta

con nuestros archivos, seleccionamos el adecuado y aceptamos.
79
La palabra o frase activadora del vínculo quedará marcada de otro color
(normalmente azul y subrayada, pero esto se puede modificar como ocurre en este
documento). Para comprobar el funcionamiento, guardaremos los cambios, le
daremos al F12 y veremos que al pinchar sobre la frase nos vamos al otro
documento.
Vínculos a documentos externos
Son los vínculos que nos llevan a otros documentos que no son de nuestro sitio. Se
comienza igual: seleccionando la palabra, frase, imagen,... que será la activadora
del vínculo. En este caso vamos a partir de una imagen:
Supongamos que queremos hacer que este logo de Google nos lleve a la página
principal del famoso buscador. Seleccionamos primero la imagen: se colocará un
borde de color negro con tiradores en los laterales derecho e inferior:
y en Vínculo del Inspector de Propiedades
escribimos la dirección URL de destino:
En los vínculos externos es norma de estilo casi obligada que los vínculos se
carguen en ventana nueva del navegador. Esto favorece mucho la navegación. Para
hacerlo, elegimos en Destino la opción _blank

Nuestra imagen vinculada tiene estos tres parámetros:
Un nuevo parámetro de bastante importancia es colocar un texto alternativo para

la imagen. Útil tanto en imágenes activadoras de vínculos como en imágenes
normales. Si el visitante opta por no cargarse las imágenes (por rapidez en la
80
carga, por ejemplo) se encontrará con un texto alternativo. Esto se hace en
(con la imagen seleccionada, claro):
Vínculos a otros puntos del mismo documento

En este mismo sitio tienes abundantes ejemplos de este tipo de vínculos.
Desde un menú tipo índice, accedemos a cada uno de los apartados de ese índice.
Y todos los apartados forman parte del mismo documento.
Para hacer esto posible, primero hay que definir las anclas o puntos de destino de
los vínculos. Dreamweaver lo llama Anclaje con nombre. Situamos el cursor en el
punto en el que queramos situar el ancla y le damos a Insertar > Anclaje con
nombre
Aparecerá este cuadro de diálogo:
Tenemos que ponerle un nombre siguiendo las mismas reglas que en los nombres
de archivos y carpetas: no acentos, no espacios, no caracteres especiales, mejor
minúsculas, mejor nombres cortos y comenzando por letra.
81
En el sitio donde hemos colocado el ancla aparece este icono de color amarillo
(invisible en modo navegación):
Si hago clic sobre el icono del ancla, en el Inspector de Propiedades observo

todos los parámetros del mismo:
Una vez fijado el anclaje, para establecer el vínculo procedemos, primero, como en
los casos anteriores, seleccionando la palabra o frase que activará el vínculo
Y, a continuación en el panel del Inspector de Propiedades escribimos el vínculo

con el carácter almohadilla delante:
Y ya estará.
Vínculos a puntos concretos de otros documentos del mismo sitio
Los dos tipos anteriores de vínculos se pueden unir. Es decir, podemos hacer
vínculos a puntos concretos de otros documentos de nuestro sitio. Para ello,
lógicamente, tendremos que haber definido previamente el anclaje. Una vez hecho
esto, primero se define el vínculo al documento y, posteriormente, se prolonga la
dirección vinculada con la coletilla #ancla
Veamos un ejemplo: supongamos que queramos ir al apartado 08.4.2.- que se

encuentra en el documento 03.htm Primero vinculamos con el documento
82
Y, después, añadimos el nombre del ancla precedido de #
Vínculos de correo electrónico

Se puede establecer también vínculos de correo electrónico a partir de una imagen
o un texto, de manera muy similar al resto de los hiperenlaces.
Primera posibilidad: La dirección de correo es visible en el documento.

Le damos a Insertar > Vínculo de correo
Y, en el siguiente cuadro de diálogo escribimos el texto y la dirección de correo

coincidentes:
83
Resultado:
apuente@roble.cnice.mecd.es
Segunda posibilidad: El texto activador del vínculo es diferente.

Se comienza igual pero se escribe:
Resultado:
Escríbeme
Tercera posibilidad: A partir de una imagen.

Insertamos la imagen, la seleccionamos y, en el Inspector de Propiedades
escribimos mailto:direcciondecorreo
NOTAS
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
84
UNA VISTA AL CÓDIGO FUENTE
Una de las potencialidades de este editor es que podemos pasar al código fuente
sin ningún problema pinchando en el icono
Pero es que, además, si selecciono en la vista Diseño un determinado

elemento, al pinchar en la vista Código aparecerá el código, correspondiente a ese
elemento, también seleccionado. Lo cual es muy de agradecer pues, a veces, es
muy difícil la localización entre todo el código de un determinado fragmento.
Por ejemplo, si señalo la última imagen que he puesto en este documento, la

imagen de la vista Diseño y voy al código fuente, aparecerá seleccionado todo el
código correspondiente a la inclusión de esta imagen.
La etiqueta está diciendo que la imagen se llama 142.png que se encuentra en la

carpeta imag y que hay que salir de la carpeta en la que está el archivo de la
página para pillarla (eso quieren decir los dos puntos). Es decir, que la carpeta en
la que se encuentra el documento éste y la carpeta imag se encuentran en el
mismo nivel. Mira la estructura:
85
Veamos una ruta de una imagen colocada en el index.htm Aquí no habrá los dos
puntos pues la página está "por encima"
Las letras src vienen de source, fuente en inglés. Aquí nos encontramos también el
texto alternativo a la imagen alt. Es el texto que se mostrará cuando el visitante
visite nuestra página sin que se carguen las imágenes (una opción de navegación
que permite mayor rapidez en las descargas). También, pero sólo en el Explorer,
ese texto aparecerá cuando aproximemos el cursor a la imagen. Observa, por otro
lado, el tema de la tilde. Yo he colocado el texto en la vista Diseño en el
Inspector de Propiedades... y he colocado la tilde correspondiente:
Dreamweaver ha transformado la tilde (carácter especial) en

un código legible por todos los navegadores: ó Finalmente aparece la
anchura y la altura de la imagen.
Salto de línea
Probablemente a estas alturas del curso ya te habrás encontrado con la necesidad

de separar dos líneas de texto por algo menos del espacio que se origina al pulsar
el intro del teclado.
Ello se consigue con Insertar > HTML > Caracteres especiales > Salto de
línea
86
Vamos a observar el código que se genera cuando pulsamos el intro (lo pulso):
El párrafo se ha encerrado entre las etiquetas <p> de apertura y </p> de cierre.
Veamos ahora el código que se genera cuando insertamos un salto de línea (lo
inserto):
Observa que el párrafo no se ha cerrado. En vez de cerrarse se ha escrito la

etiqueta <br> de break, romper. Como este salto de línea se emplea muchísimo y
está ciertamente bastante escondido, es más fácil aprenderse el atajo del teclado:
se trata de pulsar el intro pero con la tecla de la flecha de las mayúsculas
pulsada.
Listas de cosas
Cuando queremos realizar una enumeración de objetos, lo hacemos pulsando la
tecla del panel de propiedades (una vez que nos hayamos situado en el primer
objeto de la lista).
Estas son mis aficiones:
 El cine
 La lectura
 Los paseos por el campo
Para acabar la enumeración volvemos a pulsar el mismo botón:
Veamos el código que se ha generado:
87
Se introduce la lista con la etiqueta <ul> unordered list y después, cada uno de los
objetos de la lista con las etiquetas <li> list item de apertura y su correspondiente
de cierre.
Si, en cambio, queremos que nuestra lista sea numerada, pulsamos el botón:
Estas son mis aficiones por orden de preferencia:
1. El deporte de aventura
2. La música rock
3. Salir de juerga con mis amigos
Veamos el código que se ha generado:
La etiqueta <ol> de ordered list, lista ordenada. El resto, es lo mismo que en el

caso anterior.
Dar Sangria el texto
Si deseo que una determinada línea comience algo más allá del margen, no lo
conseguiré dándole al espaciador. Tendré que pulsar el botón (Sangría de

texto) que permitirá que el texto se sitúe sangrado desde el margen izquierdo.
Puedo pulsarlo varias veces. Hacemos una prueba pulsándolo cuatro veces. Para
deshacer la acción pulsaré el botón (Anular sangría de texto)
He pulsado 4 veces el botón Sangría de texto. Y pulso intro:
Ahora el margen se guarda. Pulso intro:
Para volver al margen inic pulsaré la tecla Anular sangría. Pulso intro
Pulso 4 veces la tecla . Esta línea ha vuelto al margen inicial.
Veamos el código generado:
88
Aparte de la etiqueta del sangrado <blockquote>, comentar la etiqueta <strong>
equivalente a la etiqueta <b> bold para poner el texto en negrita.
Hay otra forma de sangrar el texto o de colocar más de un espacio entre dos
palabras. Es con Insertar espacio indivisible no breaking space con la secuencia
Si lo hacemos desde la vista Diseño se hace con Insertar > HTML >
Caracteres especiales > Espacio indivisible
Como ves hay un atajo que conviene aprenderse pues esta secuencia se utiliza
mucho. Es la combinación de teclas Ctrl + Mayúsculas + Espacio
Hacemos una prueba

Hacemos una prueba
Hacemos una prueba
Hacemos una prueba
Hacemos una prueba
Vista del código:
En realidad, aunque el no breaking space se ideó para que dos palabras separadas
no puedan nunca verse cortadas en dos líneas diferentes, la utilidad mayor, es la
que acabamos de ver.
89
Otra utilidad es el relleno de celdas de una tabla, por ejemplo, para mostrar la
celda vacía pero con sus paredes y espacio interior perfectamente definido. Por
ejemplo, en esta tabla:
Según la versión del navegador que emplees, la celda primera y la segunda puede
que las veas diferentes. Mira el código:
En la primera celda hay un y en la segunda no hemos puesto nada. En el

navegador ambos están vacías...
90
MARCOS
Se denomina Marcos o Frames a una forma de organizar los diferentes

documentos de nuestro sitio web.
Una o más partes de la pantalla permanecen con contenidos fijos y otra parte va
cambiando en función de los enlaces que pulsamos en otra de las partes de la
pantalla.
Veamos un aspecto de la pantalla organizada en marcos:
En este caso la pantalla se divide en tres partes:
 La parte superior en la que va el título del sitio.

 La parte de la izquierda que contiene los enlaces de los diferentes
documentos que forman nuestro sitio web.
 La parte más amplia donde se van a cargar los enlaces que pulsemos.
Para crear una página con marcos, debemos saber que:
 La estructura de la página es un documento independiente.

 Cada uno de los marcos es otro documento independiente.
 Cuando se carguen los diferentes documentos, el documento inicial situado
en el espacio principal (main frame), será sustituido por el enlace que haya
sido pulsado.
91
Empezamos:
Voy a crear una estructura de marcos dentro de este sitio y en una carpeta a la que
llamo marcos... podría hacerlo como un sitio absolutamente independiente. En ese
caso la carpeta marcos sería la carpeta raíz. Creamos la carpeta pinchando con el
botón derecho del ratón sobre la carpeta raíz:
Y le ponemos como nombre marcos
Le damos a Archivo > Nuevo...
Y elegimos Conjunto de marcos y el último modelo que es el que vamos a hacer:
92
Aparecerá creado en el espacio principal de la interfaz. Observa el nombre que le
ha puesto DW UntitledFrameset (conjunto de marcos sin título)
93
Podría ser conveniente escribir algo en cada uno de los documentos que forman el
conjunto de marcos. No olvides que estamos hablando de cuatro documentos,
cuatro archivos, en tres espacios:
 La estructura de marcos o el conjunto que es un documento especial que

distribuye los espacios. El frameset o el conjunto de marcos.
 El documento titulo que es la banda horizontal superior.
 El índice que es la banda vertical izquierda.
 El espacio principal que es el destinado a alojar el contenido de cada
documento cargado.
Ahora le damos a Archivo > Guardar todo
Y empezaremos a guardar cada uno de esos documentos. Empezamos:
Observa que el cordón está recorriendo todo el espacio y que DW le ha puesto

como nombre provisional UntitledFrameset. Eso quiere decir que estamos
guardando la estructura, el conjunto de todos los marcos. Pero antes, hacemos
doble clic en la carpeta marcos que es donde quiero guardar todos los archivos de
los marcos:
Le podemos poner como nombre conjunto.htm (si fuese lo primero que tuviese
que abrirse en un sitio web, le llamaríamos index.htm)
Le damos a Guardar. DW seguirá el proceso de guardado:
Ahora el cordón abraza el espacio principal. Lo podemos guardar con el nombre

principal.htm, sigue el proceso. Ahora estamos guardando el espacio indice. Lo
podemos guardar como indice.htm Sigue el proceso: Guardamos la parte superior
como titulo.htm
Una vez guardados nuestros cuatro documentos, comprobamos que en la columna

derecha están los cuatro archivos dentro de la carpeta marcos:
94
Podemos dar formato a cada documento, bien por separado, bien dentro de la
estructura del conjunto de marcos:
Ahora sólo nos resta crear los tres nuevos documentos que se cargarán en el
espacio principal al pinchar en los enlaces del menú de la izquierda. A los
documentos, los podemos llamar pagina1.htm, pagina2.htm y pagina3.htm
NOTAS
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
95

3ro Secundaria

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

3ro Secundaria

Încărcat de

Drepturi de autor:

Formate disponibile

DATOS PERSONALES

Si encuentras este libro, por favor

Diseño, Diagramación e Ilustración

PROHIBIDA SU REPRODUCCION TOTAL O PARCIAL

Lección 02 Windows Básico. 9

Lección 03 El explorador de Windows. 12

Lección 04 Explorador de Windows, Herram. principal. 15

Lección 06 Microsoft Word 18

Lección 07 Práctica I (Viñetas, alineaciones, colores). 21

Lección 08 Barra Formato 23

Lección 09 Práctica II (Tablas, regla, imágenes) 25

Lección 10 Vista preliminar, imprimir. 27

Lección 11 Microsoft Excel 28

Lección 12 Práctica I (Operaciones matematicas y

Lección 13 Práctica II (Operaciones con formato

Lección 16 Formato de fondo y texto 41

Lección 21 Pasos Básicos 62

Lección 22 Publicar el sitio 66

Lección 23 Insertar una tabla 71

Lección 26 Una vista al código fuente 84

¿Para que sirve el Disco Duro?

¿En qué se diferencia un mp3 y la memoria USB?

Marque con V si es verdadero y F si es falso.

El Windows es un sistema operativo en modo gráfico que sirve como plataforma

Partes del escritorio

Para efectuar cualquier trabajo en el Windows,

Todos los Programas

Se ubica en la parte inferior del escritorio de Windows; básicamente nos muestra

Pasos para agregar iconos de acceso directo al escritorio

El Explorador es una herramienta indispensable en un Sistema Operativo ya que

El Explorador de Windows también es conocido como el Administrador de

Iniciar el Explorador de Windows

La forma más rápida de arrancar el Explorador es mediante el icono de la

Pulsar el botón Inicio

También se puede arrancar el Explorador desde el botón Inicio seleccionando Mis

La Ventana del Explorador

Esta ventana es similar a la que puedes encontrar al abrir tu explorador de

El explorador consta principalmente de dos secciones, en la parte izquierda aparece

¿Qué es una carpeta?

Este programa es uno de los mas importantes del Windows, (mencionado en la

Pasos para copiar un archivo

Pasos para mover un archivo

Pasos para cambiar de nombre a un archivo

Pasos para eliminar un archivo

Solo lo del área señalado en rojo

2. De la carpeta Mis documentos copiar 2 archivos de Word, (son iconos ),

3. De la carpeta Mis documentos copiar 1 archivo de Excel, (son iconos ),

4. Borrar la carpeta ciclo 2

5. Cambiar de nombre a la carpeta secundaria por high school

6. Mover la carpeta ciclo 3 dentro de la carpeta inicial

Pasos para cambiar de nombre a un archivo

Que es la papelera de reciclaje

Pasos para configurar la papelera de reciclaje

Indique otra manera de copiar un archivo de un disco a otro

Como se puede mover varios archivos al mismo tiempo

PRACTICA EN EL CENTRO DE COMPUTO

Titulo: tipo de letra es verdana, tamaño a 20 puntos, centrado

Segundo párrafo: tipo de letra es Arial, tamaño a 12 puntos, alineado a la

Tercer párrafo: tipo de letra es Courier New, tamaño a 14 puntos, justificado.

Cuarto párrafo: tipo de letra es Bodoni MT, tamaño a 14 puntos, centrado.

Aplica los colores que observas en los párrafos.

El ábaco fue uno de las primeras calculadoras inventada

por los antiguos griegos. Era un sencillo invento,

< Se representa con <

¡Bienvenidos, esta es mi 1ª ágina!