SlideShare una empresa de Scribd logo
1 de 8
DISEÑO DE PÁGINAS WEB
                                                                           Antonio Pérez Sanz




HERRAMIENTAS:
   1. Microsoft Word

   2. Netscape

   3. Front page

   4. Editores profesionales




MICROSOFT WORD


El procesador de texto Micosoft Word tiene una opción que nos permite crear páginas HTML de forma
directa.

Pasos:

   1. Crear un documento de texto en M.W.

   2. Guardarlo como HTML. Menú Archivo, opción Guardar como HTML

Una vez guardado como HTML podemos trabajar con el editor HTML, que incorpora las herramientas
propias de un hipertexto:




                                                                                                    1
Estas herramientas nos van a permitir insertar los elementos característicos de una página web: colores
e imagen de fondo, maracadors, enlaces internos y externos, enlaces a páginas de internet, gráficos,
enlaces a correo electrónico...



TRABAJO PRÁCTICO:
Crear una página similar a ésta.




Elementos fundamentales:

    •   Fondo

    •   Título

    •   Texto

    •   Líneas

    •   Tablas

    •   Gráficos

    •   Enlaces

    •   Enlace a correo




Color del fondo


Se aconseja dar un color que facilite la lectura. Para ello en el menú Formato seleccionamos la opción
Fondo. Se nos abre una ventana como ésta


                                                                                                         2
Seleccionamos un color y aceptamos. Si elegimos Efectos de relleno tendremos fondos con gráficos.
Quedan más lúcidos pero dificultan la lectura.



Título y texto
Se seleccionan sus características con la opción Fuente de Formato




                                                                                                    3
Líneas:


Se insertan con el botón Línea horizontal de la barra de formato




Tablas
                     1º ESO                                        3º ESO
                                           CONTENIDOS
                     2º ESO                                        4º ESO




Se insertan con el botón Tablas de la barra estándar.



En la ventana que se abre se seleccionan el número de filas, columnas y características de la tabla,
como se hace en trabajando con el el procesador de textos.




                                                                                                       4
Gráficos


Se insertan con la opción Imagen del menú Insertar. La imagen la tenemos diseñada previamente y
guardada en la carpeta de trabajo del lugar en el que estamos trabajando. Si la traemos de otro sitio del
disco duro y luego queremos pasar nuestra página a un disquete o a un servidor el navegador no la
encontrará en el lugar especificado y nos dará un mensaje de error y no aparecerá.




Enlaces


Constituyen la diferencia sustancial entre un texto y un hipertexto. Nos permiten saltar a otro lugar de la
página, a otra página propia, a una página de Internet o a una aplicación o programa.




                       Para crear un enlace es preciso marcar un texto o una imagen. Una vez marcado
se pulsa el botón de Insertar hipervínculo de la barra standar



Se nos abre una nueva ventana en cuya parte superior tenemos que incluir la dirección de internet o la
dirección local en la que se encuantra el fichero al que queremos llegar.

Por ejemplo este es un enlace a la página local sevillaweb.html




                                                                                                              5
Los enlaces también pueden dirigirse a una región concreta de la propia página o de otra página. Para
conseguirlo se utiliza la segunda ventana, la de ubicación dentro del archivo. Esto exige que previamente
se haya definido un marcador en la misma.



MARCADOR

Se inserta marcando un punto o un texto de la página y activando en el menú Insertar, la opción
Marcador.




Hay que asignarle un nombre, que habitualmente coincide con el texto seleccionado.

 A partir de aquí se pueden crear enlaces que vayan directamente a esta región de la página.

Se utilizan cuando la página es muy extensa y no aparece entera en pantalla, para evitar las búsquedas
con la barra de ascensor.




Enlaces a correo
Se puede crear un enlace que nos abra el programa de correo electrónico y nos dirija un mensaje a una
dirección determinada

Para ello se opera como para crear un enlace norma, pero en lugar de una dirección se teclea:
mailto:nombre@direccion




                                                                                                         6
Para practicar


      Intenta crear una página similar a esta:




                                                 7
Educación Matemática e Internet.
                      Una introducción para profesores
                              Creación de páginas web




                       Antonio Pérez Sanz




                                            Correo: aperez4@platea.pntic.mec.es

                       Página web: http://platea.pntic.mec.es/~aperez4

  Vídeo y Matemáticas                     Fibonacci                          Páginas web



Gimnasia mental
        Si quieres pasar un rato entretenido, intenta iluminar todas las casillas del tablero.
 Al pulsar sobre una casilla cambian de estado las que están en contacto mediante un lado con ella.
                                              Suerte




                                                                                                      8

Más contenido relacionado

La actualidad más candente

Clase 9 formato de paginas en word 2010
Clase 9 formato de paginas en  word 2010Clase 9 formato de paginas en  word 2010
Clase 9 formato de paginas en word 2010victorlopezzz
 
¿Qué es Microsoft Word.?
¿Qué es Microsoft Word.?¿Qué es Microsoft Word.?
¿Qué es Microsoft Word.?karlaTICs
 
Procedimiento Para Crear Un Triptico
Procedimiento Para Crear Un TripticoProcedimiento Para Crear Un Triptico
Procedimiento Para Crear Un Tripticoita_zeta
 
Word 2010 diapositivas 3
Word 2010 diapositivas 3Word 2010 diapositivas 3
Word 2010 diapositivas 3doralyn
 
Marcadores, hipervinculos, referencias cruzadas
Marcadores, hipervinculos, referencias cruzadasMarcadores, hipervinculos, referencias cruzadas
Marcadores, hipervinculos, referencias cruzadasCesar Estrada
 
Encabezados y pie de página
Encabezados y pie de páginaEncabezados y pie de página
Encabezados y pie de páginaAura Duque
 
Languasco barron julio cesar
Languasco barron julio cesarLanguasco barron julio cesar
Languasco barron julio cesarlanguasquito
 
Taller word 2007
Taller word 2007Taller word 2007
Taller word 2007Jorge
 

La actualidad más candente (15)

Clase 9 formato de paginas en word 2010
Clase 9 formato de paginas en  word 2010Clase 9 formato de paginas en  word 2010
Clase 9 formato de paginas en word 2010
 
Conceptos de computación.
Conceptos de computación.Conceptos de computación.
Conceptos de computación.
 
MANUAL DE WORD
MANUAL DE WORDMANUAL DE WORD
MANUAL DE WORD
 
Cuadros de texto
Cuadros de textoCuadros de texto
Cuadros de texto
 
¿Qué es Microsoft Word.?
¿Qué es Microsoft Word.?¿Qué es Microsoft Word.?
¿Qué es Microsoft Word.?
 
Procedimiento Para Crear Un Triptico
Procedimiento Para Crear Un TripticoProcedimiento Para Crear Un Triptico
Procedimiento Para Crear Un Triptico
 
Word 2010 diapositivas 3
Word 2010 diapositivas 3Word 2010 diapositivas 3
Word 2010 diapositivas 3
 
Leccion 1ª
Leccion 1ªLeccion 1ª
Leccion 1ª
 
1 intro de word
1 intro de word1 intro de word
1 intro de word
 
Informe
InformeInforme
Informe
 
Marcadores, hipervinculos, referencias cruzadas
Marcadores, hipervinculos, referencias cruzadasMarcadores, hipervinculos, referencias cruzadas
Marcadores, hipervinculos, referencias cruzadas
 
Encabezados y pie de página
Encabezados y pie de páginaEncabezados y pie de página
Encabezados y pie de página
 
Languasco barron julio cesar
Languasco barron julio cesarLanguasco barron julio cesar
Languasco barron julio cesar
 
Taller word 2007
Taller word 2007Taller word 2007
Taller word 2007
 
Taller word 2007
Taller word 2007Taller word 2007
Taller word 2007
 

Destacado

Mostbaron - Naturhotel Steinschalerhof
Mostbaron - Naturhotel SteinschalerhofMostbaron - Naturhotel Steinschalerhof
Mostbaron - Naturhotel SteinschalerhofJohann Weiss
 
Wildkräuterhotel Steinschalerhof
Wildkräuterhotel SteinschalerhofWildkräuterhotel Steinschalerhof
Wildkräuterhotel SteinschalerhofJohann Weiss
 
La mobilité et la relation client
La mobilité et la relation clientLa mobilité et la relation client
La mobilité et la relation clientAquastar Consulting
 
Cc enfant enrhumé cuba
Cc enfant enrhumé cubaCc enfant enrhumé cuba
Cc enfant enrhumé cubakbtrauma
 
Form follows function - Medienhaus 2.0
Form follows function - Medienhaus 2.0Form follows function - Medienhaus 2.0
Form follows function - Medienhaus 2.0viadoo GmbH
 
Fòrum Àmbit Docència i Formació - Presentació Grup de Treball de Residents de...
Fòrum Àmbit Docència i Formació - Presentació Grup de Treball de Residents de...Fòrum Àmbit Docència i Formació - Presentació Grup de Treball de Residents de...
Fòrum Àmbit Docència i Formació - Presentació Grup de Treball de Residents de...Col·legi Oficial de Metges de Barcelona
 
Dia del libro
Dia del libroDia del libro
Dia del libroNICO
 
Plaquette DUT Techniques de commercialisation
Plaquette DUT Techniques de commercialisation Plaquette DUT Techniques de commercialisation
Plaquette DUT Techniques de commercialisation Chloé Lacoste
 
Présentation des Docks Numériques (décembre 2011)
Présentation des Docks Numériques (décembre 2011)Présentation des Docks Numériques (décembre 2011)
Présentation des Docks Numériques (décembre 2011)Bruno Louis SÉGUIN
 
Klimaschutz und neue Kohlekraftwerke
Klimaschutz und neue KohlekraftwerkeKlimaschutz und neue Kohlekraftwerke
Klimaschutz und neue KohlekraftwerkeErhard Renz
 
Reputació digital acestic2013 v3
Reputació digital acestic2013 v3Reputació digital acestic2013 v3
Reputació digital acestic2013 v3Rafael Pardo
 
Alphabets 10 letters
Alphabets   10 lettersAlphabets   10 letters
Alphabets 10 lettersSalamSchoolKG
 
Tagging and Tracking - 2012
Tagging and Tracking - 2012Tagging and Tracking - 2012
Tagging and Tracking - 2012adamsan
 
Métodos rápidos y automatizados en alimentos
Métodos rápidos y automatizados en alimentosMétodos rápidos y automatizados en alimentos
Métodos rápidos y automatizados en alimentosegrandam
 
Pour un DPE+ER, les énergies renouvelables dans le Diagnostic de Performance ...
Pour un DPE+ER, les énergies renouvelables dans le Diagnostic de Performance ...Pour un DPE+ER, les énergies renouvelables dans le Diagnostic de Performance ...
Pour un DPE+ER, les énergies renouvelables dans le Diagnostic de Performance ...Jean Yves Leber
 
NTE INEN 1105 1983
NTE INEN 1105 1983NTE INEN 1105 1983
NTE INEN 1105 1983egrandam
 

Destacado (20)

Mostbaron - Naturhotel Steinschalerhof
Mostbaron - Naturhotel SteinschalerhofMostbaron - Naturhotel Steinschalerhof
Mostbaron - Naturhotel Steinschalerhof
 
Wildkräuterhotel Steinschalerhof
Wildkräuterhotel SteinschalerhofWildkräuterhotel Steinschalerhof
Wildkräuterhotel Steinschalerhof
 
La mobilité et la relation client
La mobilité et la relation clientLa mobilité et la relation client
La mobilité et la relation client
 
Cc enfant enrhumé cuba
Cc enfant enrhumé cubaCc enfant enrhumé cuba
Cc enfant enrhumé cuba
 
Form follows function - Medienhaus 2.0
Form follows function - Medienhaus 2.0Form follows function - Medienhaus 2.0
Form follows function - Medienhaus 2.0
 
Fòrum Àmbit Docència i Formació - Presentació Grup de Treball de Residents de...
Fòrum Àmbit Docència i Formació - Presentació Grup de Treball de Residents de...Fòrum Àmbit Docència i Formació - Presentació Grup de Treball de Residents de...
Fòrum Àmbit Docència i Formació - Presentació Grup de Treball de Residents de...
 
Dia del libro
Dia del libroDia del libro
Dia del libro
 
Plaquette DUT Techniques de commercialisation
Plaquette DUT Techniques de commercialisation Plaquette DUT Techniques de commercialisation
Plaquette DUT Techniques de commercialisation
 
Présentation des Docks Numériques (décembre 2011)
Présentation des Docks Numériques (décembre 2011)Présentation des Docks Numériques (décembre 2011)
Présentation des Docks Numériques (décembre 2011)
 
Beneficios web 2.0
Beneficios web 2.0Beneficios web 2.0
Beneficios web 2.0
 
Klimaschutz und neue Kohlekraftwerke
Klimaschutz und neue KohlekraftwerkeKlimaschutz und neue Kohlekraftwerke
Klimaschutz und neue Kohlekraftwerke
 
Mémoire
MémoireMémoire
Mémoire
 
Reputació digital acestic2013 v3
Reputació digital acestic2013 v3Reputació digital acestic2013 v3
Reputació digital acestic2013 v3
 
Alphabets 10 letters
Alphabets   10 lettersAlphabets   10 letters
Alphabets 10 letters
 
Tagging and Tracking - 2012
Tagging and Tracking - 2012Tagging and Tracking - 2012
Tagging and Tracking - 2012
 
Ensayo de rafa, pepe
Ensayo de rafa, pepeEnsayo de rafa, pepe
Ensayo de rafa, pepe
 
Métodos rápidos y automatizados en alimentos
Métodos rápidos y automatizados en alimentosMétodos rápidos y automatizados en alimentos
Métodos rápidos y automatizados en alimentos
 
Mix
MixMix
Mix
 
Pour un DPE+ER, les énergies renouvelables dans le Diagnostic de Performance ...
Pour un DPE+ER, les énergies renouvelables dans le Diagnostic de Performance ...Pour un DPE+ER, les énergies renouvelables dans le Diagnostic de Performance ...
Pour un DPE+ER, les énergies renouvelables dans le Diagnostic de Performance ...
 
NTE INEN 1105 1983
NTE INEN 1105 1983NTE INEN 1105 1983
NTE INEN 1105 1983
 

Similar a G:\DiseñO Wed\Disenoweb

Tp 13 gonzalo
Tp 13 gonzaloTp 13 gonzalo
Tp 13 gonzalomochoneta
 
Trabajo prafctico n13 (1)
Trabajo prafctico n13 (1)Trabajo prafctico n13 (1)
Trabajo prafctico n13 (1)JuanLYB
 
Hernández Méndez guillermo alfonso 3104
Hernández Méndez guillermo alfonso 3104Hernández Méndez guillermo alfonso 3104
Hernández Méndez guillermo alfonso 3104guillermohernadez3104
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas WebJose Casan
 
Clase 10 ficha insertar en word 2010
Clase 10 ficha insertar en  word 2010Clase 10 ficha insertar en  word 2010
Clase 10 ficha insertar en word 2010victorlopezzz
 
Clase 10 ficha insertar en word 2010
Clase 10 ficha insertar en  word 2010Clase 10 ficha insertar en  word 2010
Clase 10 ficha insertar en word 2010salomonaquino
 
U13 trabajo de investigacion
U13 trabajo de investigacionU13 trabajo de investigacion
U13 trabajo de investigacion97A
 
Módulo de Publisher
Módulo de PublisherMódulo de Publisher
Módulo de PublisherMaribel_23
 
Módulo de Publisher
Módulo de PublisherMódulo de Publisher
Módulo de PublisherMaribel_23
 
Módulo de Publisher
Módulo de PublisherMódulo de Publisher
Módulo de PublisherMaribel_23
 
Módulo de Publisher
Módulo de PublisherMódulo de Publisher
Módulo de PublisherMaribel_23
 
Módulo de Publisher
Módulo de PublisherMódulo de Publisher
Módulo de PublisherMaribel_23
 
PESTAÑA INSERTAR WORD 2010
PESTAÑA INSERTAR WORD 2010PESTAÑA INSERTAR WORD 2010
PESTAÑA INSERTAR WORD 2010Alexis183
 

Similar a G:\DiseñO Wed\Disenoweb (20)

Trabajo Practico n° 13
Trabajo Practico n° 13Trabajo Practico n° 13
Trabajo Practico n° 13
 
Tp 13 marcos
Tp 13 marcosTp 13 marcos
Tp 13 marcos
 
13
1313
13
 
Tp 13 gonzalo
Tp 13 gonzaloTp 13 gonzalo
Tp 13 gonzalo
 
Trabajo prafctico n13 (1)
Trabajo prafctico n13 (1)Trabajo prafctico n13 (1)
Trabajo prafctico n13 (1)
 
Hernández Méndez guillermo alfonso 3104
Hernández Méndez guillermo alfonso 3104Hernández Méndez guillermo alfonso 3104
Hernández Méndez guillermo alfonso 3104
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas Web
 
Guia de autoaprendizaje
Guia de autoaprendizajeGuia de autoaprendizaje
Guia de autoaprendizaje
 
Clase 10 ficha insertar en word 2010
Clase 10 ficha insertar en  word 2010Clase 10 ficha insertar en  word 2010
Clase 10 ficha insertar en word 2010
 
Clase 10 ficha insertar en word 2010
Clase 10 ficha insertar en  word 2010Clase 10 ficha insertar en  word 2010
Clase 10 ficha insertar en word 2010
 
Guia 1 prezi
Guia 1 preziGuia 1 prezi
Guia 1 prezi
 
U13 trabajo de investigacion
U13 trabajo de investigacionU13 trabajo de investigacion
U13 trabajo de investigacion
 
Módulo de Publisher
Módulo de PublisherMódulo de Publisher
Módulo de Publisher
 
Módulo de Publisher
Módulo de PublisherMódulo de Publisher
Módulo de Publisher
 
Módulo de Publisher
Módulo de PublisherMódulo de Publisher
Módulo de Publisher
 
Módulo de Publisher
Módulo de PublisherMódulo de Publisher
Módulo de Publisher
 
Módulo de Publisher
Módulo de PublisherMódulo de Publisher
Módulo de Publisher
 
PESTAÑA INSERTAR WORD 2010
PESTAÑA INSERTAR WORD 2010PESTAÑA INSERTAR WORD 2010
PESTAÑA INSERTAR WORD 2010
 
Uwutooooo (copy)
Uwutooooo (copy)Uwutooooo (copy)
Uwutooooo (copy)
 
Uwutooooo (copy)
Uwutooooo (copy)Uwutooooo (copy)
Uwutooooo (copy)
 

G:\DiseñO Wed\Disenoweb

  • 1. DISEÑO DE PÁGINAS WEB Antonio Pérez Sanz HERRAMIENTAS: 1. Microsoft Word 2. Netscape 3. Front page 4. Editores profesionales MICROSOFT WORD El procesador de texto Micosoft Word tiene una opción que nos permite crear páginas HTML de forma directa. Pasos: 1. Crear un documento de texto en M.W. 2. Guardarlo como HTML. Menú Archivo, opción Guardar como HTML Una vez guardado como HTML podemos trabajar con el editor HTML, que incorpora las herramientas propias de un hipertexto: 1
  • 2. Estas herramientas nos van a permitir insertar los elementos característicos de una página web: colores e imagen de fondo, maracadors, enlaces internos y externos, enlaces a páginas de internet, gráficos, enlaces a correo electrónico... TRABAJO PRÁCTICO: Crear una página similar a ésta. Elementos fundamentales: • Fondo • Título • Texto • Líneas • Tablas • Gráficos • Enlaces • Enlace a correo Color del fondo Se aconseja dar un color que facilite la lectura. Para ello en el menú Formato seleccionamos la opción Fondo. Se nos abre una ventana como ésta 2
  • 3. Seleccionamos un color y aceptamos. Si elegimos Efectos de relleno tendremos fondos con gráficos. Quedan más lúcidos pero dificultan la lectura. Título y texto Se seleccionan sus características con la opción Fuente de Formato 3
  • 4. Líneas: Se insertan con el botón Línea horizontal de la barra de formato Tablas 1º ESO 3º ESO CONTENIDOS 2º ESO 4º ESO Se insertan con el botón Tablas de la barra estándar. En la ventana que se abre se seleccionan el número de filas, columnas y características de la tabla, como se hace en trabajando con el el procesador de textos. 4
  • 5. Gráficos Se insertan con la opción Imagen del menú Insertar. La imagen la tenemos diseñada previamente y guardada en la carpeta de trabajo del lugar en el que estamos trabajando. Si la traemos de otro sitio del disco duro y luego queremos pasar nuestra página a un disquete o a un servidor el navegador no la encontrará en el lugar especificado y nos dará un mensaje de error y no aparecerá. Enlaces Constituyen la diferencia sustancial entre un texto y un hipertexto. Nos permiten saltar a otro lugar de la página, a otra página propia, a una página de Internet o a una aplicación o programa. Para crear un enlace es preciso marcar un texto o una imagen. Una vez marcado se pulsa el botón de Insertar hipervínculo de la barra standar Se nos abre una nueva ventana en cuya parte superior tenemos que incluir la dirección de internet o la dirección local en la que se encuantra el fichero al que queremos llegar. Por ejemplo este es un enlace a la página local sevillaweb.html 5
  • 6. Los enlaces también pueden dirigirse a una región concreta de la propia página o de otra página. Para conseguirlo se utiliza la segunda ventana, la de ubicación dentro del archivo. Esto exige que previamente se haya definido un marcador en la misma. MARCADOR Se inserta marcando un punto o un texto de la página y activando en el menú Insertar, la opción Marcador. Hay que asignarle un nombre, que habitualmente coincide con el texto seleccionado. A partir de aquí se pueden crear enlaces que vayan directamente a esta región de la página. Se utilizan cuando la página es muy extensa y no aparece entera en pantalla, para evitar las búsquedas con la barra de ascensor. Enlaces a correo Se puede crear un enlace que nos abra el programa de correo electrónico y nos dirija un mensaje a una dirección determinada Para ello se opera como para crear un enlace norma, pero en lugar de una dirección se teclea: mailto:nombre@direccion 6
  • 7. Para practicar Intenta crear una página similar a esta: 7
  • 8. Educación Matemática e Internet. Una introducción para profesores Creación de páginas web Antonio Pérez Sanz Correo: aperez4@platea.pntic.mec.es Página web: http://platea.pntic.mec.es/~aperez4 Vídeo y Matemáticas Fibonacci Páginas web Gimnasia mental Si quieres pasar un rato entretenido, intenta iluminar todas las casillas del tablero. Al pulsar sobre una casilla cambian de estado las que están en contacto mediante un lado con ella. Suerte 8