Curso Dreamweaver

Crear una Página Web
con Dreamweaver CS4

Curso orientado a principiantes
Ahora que ya conocemos HTML, es momento de crear

una página web con la ayuda de una poderosa
herramienta de poder, con Dreamweaver seremos
capaces de crear un portal Web de manera sencilla y
práctica.
Jonatan Rivera C.
01/07/2010
Crear una Página Web con Dreamweaver CS4
2010
Introducción
En este curso aprenderás a crear tu propia página web usando el

Dreamweaver, uno de los mejores programas para diseño web.
No todo el mundo tiene el tiempo necesario para dedicar unas horas al estudio
de HTML y gracias a este programa serás capaz de hacer tu web sin saber
nada de HTML, (aunque no es lo recomendado) el uso del Dreamweaver para
algunos es la única forma de tener su web.
Aprenderemos las principales características del Dreamweaver y podrás tener

tu sitio en aproximadamente un par de horas, lo único que tienes que hacer es
tener constancia y paciencia, y por supuesto leer el curso hasta el final.
2 Autor: Jonatan Rivera C.

2010
Creación del Sitio Local
Lo primero que tenemos que hacer una vez que abrimos el Dreamweaver es
crearnos un sitio local, es decir, crearemos una carpeta que contendrá todos
los archivos necesarios para hacer tu web, estos archivos podrán ser archivos
de música, imágenes, videos, etc.
Cuando tengamos nuestra web completa subiremos todos los archivos y

subcarpetas a nuestro sitio remoto "Host" y así todo el que lo desee podrá ver
nuestra web.
Primero haremos clic en "Sitio>Nuevo Sitio", puedes verlo en la siguiente

imagen:
Nos saldrá la siguiente imagen y haz clicremos sobre la pestaña "básicas":

2010
Aquí en la pestaña básicas definiremos cual será el nombre de nuestro sitio, en

el ejemplo que vamos a hacer vamos diseñar una web para una tienda de
motos, yo le he puesto "MOTOS - MUTIERREZ". Os recomiendo que para
hacer el curso usen los mismos nombres que pongo yo para no liarnos y
mientras por vuestra parte pueden ir haciendo vuestros experimentos por otro
lado. El segundo recuadro lo dejamos en blanco, ahí tendríamos que poner la
dirección de nuestro sitio en caso de tener ya un host y un dominio, como no es
nuestro caso no ponemos nada... además para subir los archivos utilizaremos
un programa llamado FILEZILLA.

2010
En la siguiente pantalla nos da dos opciones a elegir, nosotros haremos clic en

la opción "No, no deseo utilizar una tecnología de servidor", y luego a
"siguiente".
En el siguiente paso nos preguntara la forma como queremos trabajar con

nuestros archivos, haremos clic en la primera opción "Editar copias locales en
mi equipo y luego cargarlas al servidor cuando estén listas":

2010
También se nos pregunta el lugar deseamos que se guarden los archivos, el

programa por defecto te crea ya una carpeta con el nombre del sitio que vamos
a crear en el escritorio. A no ser que desees guardar los archivos en otra ruta
dejarlo tal cual y pulsar siguiente.
Ahora nos dice que como queremos conectar a nuestro servidor remoto,
elegiremos NINGUNO ya que como he dicho antes conectaremos vía FTP pero
con el FILEZILLA.

2010
En la siguiente pantalla se nos muestran algunos datos referente a nuestro

nuevo sitio, comprobamos que todo está correcto y pulsamos en Completado
para dar por finalizado la configuración de nuestro sitio:

2010
Página Principal
Página en blanco
Luego de haber creado nuestro sitio local ahora solo queda incluirle algunas
páginas, como ya he mencionado antes vamos a hacer una web para una
tienda de motos y para ello vamos a empezar a crear la página principal. Como
este curso va dirigido a principiantes vamos a coger como página principal una
de las que el Dreamweaver ya trae en su biblioteca y nosotros solo le
cambiaremos el contenido.
Para ello nos vamos a "Archivo>Nuevo":
Nos saldrá la siguiente pantalla en la que podremos elegir las distintas

opciones que nos ofrece. En la primera columna podremos elegir el tipo de
pagina o plantilla que queremos (elegiremos Página en blanco); la columna
"Tipo de página" nos ofrece distintos lenguajes de programación (marcaremos
la opción HTML); en la columna "Diseño” podremos elegir una infinidad de
combinaciones de columnas y filas para nuestra página (marcaremos 2
columnas flotantes, barra lateral izquierda, encabezado y pie) y luego pulsar en
"Crear":

2010
Para sus experimentos fuera del curso pueden elegir cualquier combinación de
la columna "Diseño" y así ir investigando paralelamente mientras que continúan
con el curso.

2010
Área de trabajo
Una vez creado la página en blanco nos mostrará lo que será la página
principal de nuestra web.
Como pueden ver en la imagen he marcado algunas zonas importantes del

programa:
1. Ahí podremos elegir la forma de visualizar nuestro trabajo: tiene tres

opciones, si pulsamos en el primer recuadro de la izquierda veremos
solamente el código HTML de nuestra página. Si pulsamos en el botón
del medio (es el que esta pulsado en la imagen) veremos tanto el código
HTML como el diseño de nuestra página tal y como se verá una vez que
lo colguemos en internet, yo recomiendo esa opción. Y por ultimo si
pulsamos en el tercer botón solo veremos el diseño.

2010
2. Como he dicho antes si tenemos dividida la pantalla en la parte superior
veremos el código HTML.
3. Y en el recuadro inferior estaremos visualizando el diseño de nuestra
página.
4. En el área marcada como número 4 estaremos viendo los archivos y
carpetas de nuestra web, este recuadro es muy útil a la hora de asignar
a imágenes o palabras hipervínculos.
5. En la zona inferior tenemos una barra de herramientas muy útil,
podremos elegir varios formatos de texto así como el color, asignar
hipervínculos, y muchas opciones que ya los veremos según vayamos
avanzando en el curso.
Color de fondo
Lo primero que vamos a cambiar es el color de fondo, para ello tenéis que
pulsar en el botón "Propiedades de la página" abajo del todo (en la captura de
la página anterior estaba dentro del circulo con el número 5).
Nos saldrá la siguiente imagen en la que podremos cambiar varias cosas de

nuestra página entre ellas el color del texto, el color de fondo, si queremos una
imagen de fondo, etc. De momento solo vamos a cambiar el fondo de nuestra
página, para ello pulsa en el recuadro "Color de fondo" y elige el color que
quieras, o bien si te sabes el código del color que quieres escríbelo donde pone
#666666. En nuestro caso para el curso escribiremos el código #C60.

2010
Después de haber elegido el color haremos clic en "aplicar" y después en
"aceptar".
Título
Ahora elegiremos el título para nuestra página, escribiremos MOTOS

MUTIERREZ en el rectángulo que pone Título.
Ha llegado el momento de ver como quedaría nuestra página con sus nuevos
colores vista desde un navegador, haz clic en el dibujo en forma de planeta que
está a la derecha del rectángulo de "Titulo" del paso anterior. Se nos
desplegara un menú que dependiendo del número de navegadores que
tengamos nos dará la opción de visualizarlo con uno o con otro, en mi caso haz
clic en "vista previa en Firefox" o puedes presionar directamente F12 para verlo
en el navegador por defecto que tengas configurada.
Nos preguntara que si queremos guardar los cambios en Untitled, le diremos

que si pero le cambiaremos el nombre Untitled a Index a la hora de guardarlo:

2010
¿Por qué llamar a nuestra página principal index.html?
Nombrar tu archivo index.html. Es esencial que tengas un archivo llamado

index.html (o index.htm) en el directorio principal de tu página web. El HTML de
la página principal (home) es llamado index.html porque el navegador cargará
automáticamente index.html de cualquier directorio principal. Cualquier otra
página que quieras mostrar en el navegador, tendrá que ser vinculado desde el
index.html o desde otra página que vino de ella.
Dicho esto tu página debería de verse así:

2010
Cabecera
Bueno ahora cambiaremos nuestra cabecera, primero haz clic y arrastra con el
ratón hasta que se quede sombreado toda la palabra "Encabezado" y después
escribiremos el nombre de nuestra web. En el caso del ejemplo escribiremos
"MOTOS MUTIERREZ".
Evidentemente no solo podemos escribir lo que queramos para vuestras

futuras Webs, sino que además podremos introducir una imagen como logo.
De momento escribe solo el título...
Paso 1: Sombrear la palabra "encabezado":

2010
En la parte Inferior (área de diseño de la web) he sombreado la palabra

"Encabezado", pero si te fijas en la parte de arriba (área de código HTML de la
web) también se ha sombreado la palabra "Encabezado". Recomiendo tener la
pantalla principal dividida (código y diseño) para asegurarnos bien de lo que
estamos haciendo.
Paso 2: Simplemente escribe ahora "MOTOS MUTIERREZ" y te debería

quedar así:

2010
Ahora bien para llevar un poco de orden crearemos una carpeta dentro de
nuestro sitio llamada "objetos" y ahí será donde guardaremos todas las
imágenes que necesitemos para nuestra web. Para ello selecciona la carpeta
"Sitio-motos-Mutierrez" y luego con el botón derecho del ratón pulsa en "Nueva
Carpeta" y la renombraremos como "objetos".
Para poder insertar las imágenes solo debemos ir al Menú Insertar y escoger la
opción adecuada al objeto que queremos insertar.

2010
Si has hecho todo bien la página vista desde tu navegador debería verse así:

2010
Alinear Texto e Imágenes
Las 2 imágenes que insertamos quedaron hacia la izquierda y nosotros lo

vamos a poner justo en el centro de la cabecera (esto va según gustos puedes
colocar el encabezado a la izquierda, a la derecha o en el centro) para el curso
lo colocaremos en el centro. Para ello haz clic sobre la imagen "MOTOS
MUTIERREZ" y luego ves a "Formato>Alinear>Centro" y así quedara centrada
nuestra cabecera. Esto se puede aplicar para alinear tanto imágenes como
texto.
Haciendo un pequeño resumen has aprendido por el momento ha cambiar el

color de fondo de la página y a insertar texto e imágenes, sin ningún tipo de
tecnicismos.
En la siguiente lección veremos entre otras cosas como insertar unas etiquetas
<meta> para nuestra web (ya te diré que es esto de las etiquetas <meta>) y

2010
como poner "hipervínculos" a nuestra cabecera (también te explicare en la
lección 4 que es esto de los hipervínculos).
Etiquetas Meta (metatags)
Antes de continuar con el diseño de nuestra web, vamos a un apartado menos

emocionante pero igual de importante a la hora de dar a conocer nuestra web.
Lo que vamos a hacer será introducir unas etiquetas llamadas "<meta>".
Las etiquetas <meta> solían ser parte del algoritmo para organizar los
resultados de una búsqueda, pero debido a la facilidad con que el autor del sitio
puede manipularlas en la actualidad son pocos los buscadores que hacen uso
de su contenido para posicionamiento. Sin embargo, las etiquetas <meta> aún
son utilizadas para lo que fueron creadas, por ende es importante conocer
cómo funcionan y utilizarlas adecuadamente.
Meta Keywords
Esta etiqueta esta supuesta a contener un listado de palabras y frases clave

relevantes al contenido de la página. La idea es que cualquiera (incluyendo
sistemas automatizados) pueda hacerse una idea de qué temas se tratan en la
página mediante estas palabras clave.
Los buscadores ignoran esta información (o le dan muy poca importancia) para
efectos de posicionamiento, pero es posible que se penalice a la página si las
palabras clave no son relevantes o se repiten innecesariamente.
Meta Description
Esta etiqueta debe contener una descripción breve del contenido de la página.
En la actualidad los buscadores la ignoran (o le dan muy poca importancia)
para efectos de posicionamiento, pero a menudo consideran esta información
para mostrarla a los usuarios como la descripción del enlace en los resultados
de una búsqueda.
Por esto, la descripción debe ser preparada para atraer a visitantes. Lo

recomendable es escribir una descripción objetiva sobre el contenido de la
página, en 200 caracteres o menos.
Las etiquetas meta deben ir en la cabecera de un página HTML, es decir, entre

las etiquetas <head> y </head>. El siguiente es un ejemplo del uso adecuado
de etiquetas <meta> en el código:

2010
<head>
<title&gtMotos Mutierrez</title>
<meta name="description" content="La mayor superficie de motos

por y para el motorista">
<meta name="keywords" content="moto, motos, casco, gomas,

honda, suzuki, harley davidson">
</head>
Una vez visto la pequeña descripción de las etiquetas meta vamos a ver como
las introducimos en nuestra web de motos. Para ello tienes que tener la
ventana principal del Dreamweaver Dividida para que se vea tanto el código
HTML como el diseño:

2010
En esta otra captura lo veras mejor, como ves tenemos la pantalla dividida, nos
vamos con la barra lateral al principio del documento y entre <head> y </head>
he introducido nuestras etiquetas <meta> referentes a la descripción de nuestro
sitio y también con las palabras clave para los buscadores:
¿Qué es un hipervínculo?
Un hipervínculo es un enlace, normalmente entre dos páginas web de un

mismo sitio, pero un enlace también puede apuntar a una página de otro sitio
web, a un fichero, a una imagen, etc. Para navegar al destino al que apunta el
enlace, se debe hacer clic sobre él. También se conocen como hiper-enlaces,
enlaces o links.
Normalmente el destino se puede saber mirando la barra de estado del

navegador cuando el ratón esté sobre el hipervínculo.
Dependiendo de cuál sea el destino, hacer clic en un hipervínculo puede hacer

que ocurran varias cosas. Si el destino es otra página web, el navegador la
cargará y la mostrará, pero si el destino es un documento de Word, el
navegador nos dará la posibilidad de abrir una sesión de Word para visualizarlo
o de guardar el archivo.
Por lo tanto, podemos usar los hipervínculos para conducir a los visitantes de
nuestro sitio web por donde queramos. Además, si queremos que se pongan
en contacto con nosotros, nada mejor que ofrecerles un hipervínculo a nuestro
correo electrónico.

2010
Tipos de hipervínculos.
Existen varios tipos de hipervínculos. Vamos a ver los más usados.
Hipervínculo de texto: Un hipervínculo de texto es un enlace que se

encuentra asociado a un texto, de forma que si hacemos clic sobre ese texto,
navegamos dónde indique el hipervínculo. Por defecto, cuando creamos un
hipervínculo de texto, el texto aparece subrayado y en un color distinto al del
texto normal, de forma que el visitante sepa que existe ese enlace. Si volvemos
a la página después de visitar el enlace, este aparecerá con otro tono también.
Aunque es interesante diferenciar el hiperenlace, es posible que no queramos
que aparezca así.
Hipervínculo de imagen: Un hipervínculo de imagen es un enlace que se

encuentra asociado a una imagen, de forma que si hacemos clic sobre esa
imagen, navegamos dónde indique el hipervínculo. Por defecto cuando
creamos un hipervínculo de imagen, la imagen aparece rodeada de un borde
con un color llamativo para que el visitante sepa que existe ese enlace
(nosotros también aprenderemos a quitar ese borde, puesto que resulta más
atractiva la imagen y la web en general sin ese borde). Por otra parte, los
hipervínculos pueden referirse a páginas del mismo sitio web o de otros sitios
web.
Hipervínculo local o interno: Un hipervínculo local o interno es un vínculo a

una página que se encuentra en el mismo sitio web (sitio local). Así, para
referirnos a ella tan solo basta con poner la ruta o dirección en el disco duro. Si
se encuentra en la misma carpeta, basta con poner su nombre.
Hipervínculo externo: Un hipervínculo externo es un vínculo a otro sitio web

en Internet (sitio externo). Es un vínculo a cualquier otro lugar fuera del sitio
actual. Cuando ponemos un vínculo externo, escribimos la dirección completa
de la página incluido http://www....
Hipervínculo a una dirección de correo electrónico: Un hipervínculo a una

dirección de correo electrónico es un vínculo que contiene una dirección de
correo. Al pulsar en él, automáticamente se abre el programa de correo que
tenga el usuario instalado para poder escribir a esa dirección de correo.

2010
Estilos CSS
Después de haber insertado un hipervínculo a la cabecera si le das a vista

previa en el navegador veras que la imagen te sale con un recuadro, ese
recuadro indica que dicha imagen tiene un vínculo asignado. Por defecto el
Dreamweaver siempre lo hará así.
Para hacer desaparecer el recuadro vamos a crearnos una hoja de estilos

(CSS).
¿Qué es CSS?
Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple

que describe cómo se va a mostrar un documento en la pantalla, o cómo se va
a imprimir, o incluso cómo va a ser pronunciada la información presente en ese
documento a través de un dispositivo de lectura. Esta forma de descripción de
estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus
documentos.
¿Para qué sirve?
CSS se utiliza para dar estilo a documentos HTML y XML, separando el

contenido de la presentación. Los Estilos definen la forma de mostrar los
elementos HTML y XML. CSS permite a los desarrolladores Web controlar el
estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier
cambio en el estilo marcado para un elemento en la CSS afectará a todas las
páginas vinculadas a esa CSS en las que aparezca ese elemento.
Después de esta pequeña aclaración vamos a crearnos una hoja de estilos

para nuestra web para ello vamos a "Archivo> Nuevo".

2010
Ahora entre todas las opciones que nos sale elegimos CSS y clic en "crear".
Hecho esto nos sale un documento nuevo con el siguiente código:
@charset "utf-8";

2010
/* CSS Document */
Dejamos el código como esta y en la siguiente line escribimos lo siguiente:
img { border: 0 }
este código hará que ninguna de las imágenes de nuestra web que tengan
asignado un hipervínculo salgan con ese recuadro tan molesto. El nuevo
documento te tiene que quedar así:
@charset "utf-8";
/* CSS Document */
img { border: 0 }
Ahora simplemente lo guardaremos en la raíz de nuestro sitio asignándole el

nombre "estilo". Para ello nos vamos a "Archivo> Guardar como..." y ponemos
"estilo".
Si he hecho todo bien el directorio de archivos de nuestro sitio nos quedará así:

2010
¿Cómo creamos el menú de navegación?
En primer lugar sombreamos con el cursor del ratón todas las palabras de la
columna de la izquierda que nos vienen en nuestra plantilla (ventana Diseño)y
como nuestra web trata sobre las motos pues escribiremos MARCAS que será
una sección de nuestra web. Ahora vamos a poner 3 marcas de motos para
nuestro ejemplo y eso lo haremos mediante las etiquetas <ul> y <li>, te explico
que significan estas etiquetas:
Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>.

Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta
<li> y su cierre </li>. Si quisiéramos una lista ordenada (en cada elemento de
la lista iría un número en lugar de un punto) en vez de <ul> y su cierre </ul>
pondríamos las etiquetas <ol> y su cierre </ol>.
Después de esta pequeña aclaración nos situamos justo debajo de donde he

escrito MARCAS y en la ventana del código HTML (no en la de diseño
escribimos lo siguiente):
<ul>
<li>Honda</li>
<li>Aprilia</li>
<li>Ducati</li>
</ul>
Para que lo veas mejor te pongo una captura de pantalla:

2010
1.- Escribimos MARCAS en la ventana diseño.
2.- Escribimos el código en la ventana HTML.
Ahora nos situamos con el cursor del ratón justo debajo de DUCATI (en la
ventana de Diseño)y ponemos ACCESORIOS que será otra sección de nuestra
web. Y como en el paso anterior justo debajo de donde he escrito
ACCESORIOS vamos a la ventana del código HTML (no en la de diseño
escribimos lo siguiente):

2010
<ul>
<li>Cascos</li>
<li>Monos</li>
<li>Botas</li>
</ul>
Si has hecho todo correctamente y si pulsas en el botón de vista previa te

debería haber quedado algo así:
¿Que son los encabezados?
Existen 6 tipos de encabezados o headers y sirven para indicar aéreas

correspondientes a títulos: h1, h2, h3, h4, h5, h6.
La sintaxis estándar seria esta: <h1>Titulo principal</h1>, <h2>Titulo

secundario</h2>, <h3>Titulo terciario</h3>, etc...
Pero según lo que se comenta por diversos foros y webs del mundo SEO solo
los tres primeros encabezados (<h1>, <h2> y <h3>) son los que aportan valor
como palabras clave relevantes para una web.
Consejos a la hora de poner encabezados:
• La cabecera h1 deberá ir una por pagina y a ser posible asignada al

título de la misma.

2010
• La cabecera h2 deberá definir títulos de secciones dentro de una página.
• La cabecera h3 es la de menor jerarquía de las tres y la deberíamos
usar para títulos de artículos o sub-secciones, una buena opción es
usarlo para asignar enlaces.
• h4 y h6 tienen un valor igual o incluso inferior al texto normal por lo que
no resulta muy beneficioso usarlos.
• Los títulos no deben de ser demasiado largos ya que nos pueden
clasificar como SPAM haciéndonos un flaco favor a nuestra web.
La forma de entender los encabezados es compararlas con un libro de recetas:
<h1>Índice general</h1>
<h2>Carnes</h2>
<h3>Solomillo al cabrales</h3>
<p>Texto normal</p>
<h3>Conejo al ajillo</h3>
<p>Texto normal<p>
<h2>Postres</h2>
<h3>Flan de huevo</h3>
<p>Texto normal<p>
<h3>Bizcocho</h3>
<p>Texto normal</p>
<h3>Tarta de manzana</h3>
Como vemos es menos común que <h1> y <h2> se asignen a enlaces, siendo
los <h3> los más recomendables para enlazar a los temas principales que
estén disponibles en una web.
¿Qué son las plantillas?
Dreamweaver nos ofrece la posibilidad de crearnos plantillas, como si

usáramos una página Maestra. Esto es muy útil cuando tenemos muchas
páginas creadas desde una misma plantilla y queremos modificar algo en todas
ellas o en alguna de ellas.
Imaginemos en una web de 100 páginas y que quisierais modificar algo en el

menú de navegación, demasiado trabajo ir modificando una a una no? Pues
solo modificando la plantilla Maestra los cambios se nos asignaran a todas
ellas.
¿Y te preguntaras? ¿Por qué le ponemos el vínculo si todavía no he creado la

página honda.html? Pues tiene su explicación y te lo diré más adelante."
Ha llegado el momento de aclararlo. Veras una vez que tenemos terminada

nuestra página principal es el momento de crearnos la plantilla y usaremos la

2010
plantilla con sus imágenes, su menú de navegación, su cabecera y su pie para
las siguientes páginas de nuestra web con todo el ahorro de trabajo que eso
conlleva. Por ello en la lección 5 comentaba de poner los hipervínculos al menú
de navegación aunque no tuviésemos de momento ninguna página vinculada a
ellos.
¿Cómo creo la plantilla?
Lo primero que vamos a hacer será seleccionar toda nuestra web, para ello
dirige el cursor del ratón hacia uno de los laterales de la página y selecciónalo
con un solo clic. En la captura siguiente lo veras mejor (haz clic en uno de los
laterales que he marcado en rojo):

2010
Una vez que he hecho la selección nos vamos a: "Insertar>Objetos de
Plantilla>Región Editable"
El Dreamweaver nos dirá que esto hará que el documento se convierta en una
plantilla, le damos a aceptar.
Ahora para guardar esta plantilla nos vamos a: "Insertar>Objetos de

Plantilla>Crear Plantilla"
Nos saldrá la siguiente imagen:

2010
En esta ventana podremos ver las plantillas que tenemos para nuestro sitio,
evidentemente no tenemos ninguna. En descripción podemos poner algo que
identifique a nuestra plantilla yo lo he dejado en blanco y por ultimo en Guardar
como ingresan el nombre que quieran, en mi caso le puse Plantilla web, luego
aceptan, ya tenemos nuestra plantilla creada y guardada. Si observan en
pantalla directorio (a la derecha) donde tienen todos los archivos de su web
notarán que se ha creado una carpeta llamada Templates pues ahí es donde
se ha guardado la plantilla recién creada.

Curso Dreamweaver

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Curso Dreamweaver

Hochgeladen von

Copyright:

Verfügbare Formate

Crear una Página Web

con Dreamweaver CS4

Ahora que ya conocemos HTML, es momento de crear

En este curso aprenderás a crear tu propia página web usando el

Aprenderemos las principales características del Dreamweaver y podrás tener

2 Autor: Jonatan Rivera C.

Cuando tengamos nuestra web completa subiremos todos los archivos y

Primero haremos clic en "Sitio>Nuevo Sitio", puedes verlo en la siguiente

Nos saldrá la siguiente imagen y haz clicremos sobre la pestaña "básicas":

3 Autor: Jonatan Rivera C.

Aquí en la pestaña básicas definiremos cual será el nombre de nuestro sitio, en

4 Autor: Jonatan Rivera C.

En la siguiente pantalla nos da dos opciones a elegir, nosotros haremos clic en

En el siguiente paso nos preguntara la forma como queremos trabajar con

5 Autor: Jonatan Rivera C.

También se nos pregunta el lugar deseamos que se guarden los archivos, el

6 Autor: Jonatan Rivera C.

En la siguiente pantalla se nos muestran algunos datos referente a nuestro

7 Autor: Jonatan Rivera C.

Para ello nos vamos a "Archivo>Nuevo":

Nos saldrá la siguiente pantalla en la que podremos elegir las distintas

8 Autor: Jonatan Rivera C.

9 Autor: Jonatan Rivera C.

Como pueden ver en la imagen he marcado algunas zonas importantes del

1. Ahí podremos elegir la forma de visualizar nuestro trabajo: tiene tres

10 Autor: Jonatan Rivera C.

Nos saldrá la siguiente imagen en la que podremos cambiar varias cosas de

11 Autor: Jonatan Rivera C.

Ahora elegiremos el título para nuestra página, escribiremos MOTOS

Nos preguntara que si queremos guardar los cambios en Untitled, le diremos

12 Autor: Jonatan Rivera C.

¿Por qué llamar a nuestra página principal index.html?

Nombrar tu archivo index.html. Es esencial que tengas un archivo llamado

Dicho esto tu página debería de verse así:

13 Autor: Jonatan Rivera C.

Evidentemente no solo podemos escribir lo que queramos para vuestras

De momento escribe solo el título...

Paso 1: Sombrear la palabra "encabezado":

14 Autor: Jonatan Rivera C.

En la parte Inferior (área de diseño de la web) he sombreado la palabra

Paso 2: Simplemente escribe ahora "MOTOS MUTIERREZ" y te debería

15 Autor: Jonatan Rivera C.

16 Autor: Jonatan Rivera C.

17 Autor: Jonatan Rivera C.

Las 2 imágenes que insertamos quedaron hacia la izquierda y nosotros lo

Haciendo un pequeño resumen has aprendido por el momento ha cambiar el

18 Autor: Jonatan Rivera C.

Etiquetas Meta (metatags)

Antes de continuar con el diseño de nuestra web, vamos a un apartado menos

Esta etiqueta esta supuesta a contener un listado de palabras y frases clave

Por esto, la descripción debe ser preparada para atraer a visitantes. Lo

Las etiquetas meta deben ir en la cabecera de un página HTML, es decir, entre

19 Autor: Jonatan Rivera C.

<meta name="description" content="La mayor superficie de motos

<meta name="keywords" content="moto, motos, casco, gomas,

20 Autor: Jonatan Rivera C.

Un hipervínculo es un enlace, normalmente entre dos páginas web de un

Normalmente el destino se puede saber mirando la barra de estado del

Dependiendo de cuál sea el destino, hacer clic en un hipervínculo puede hacer

21 Autor: Jonatan Rivera C.

Existen varios tipos de hipervínculos. Vamos a ver los más usados.

Hipervínculo de texto: Un hipervínculo de texto es un enlace que se

Hipervínculo de imagen: Un hipervínculo de imagen es un enlace que se

Hipervínculo local o interno: Un hipervínculo local o interno es un vínculo a