SlideShare une entreprise Scribd logo
1  sur  8
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

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
 

Tendances (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
 

En vedette

Kommunikationsrevolution Social Media
Kommunikationsrevolution Social MediaKommunikationsrevolution Social Media
Kommunikationsrevolution Social MediaMichael Ehlers
 
Guitarra electrica
Guitarra electricaGuitarra electrica
Guitarra electricaJohn
 
Digital : Web & Mobilité
Digital : Web & MobilitéDigital : Web & Mobilité
Digital : Web & MobilitéCatalyse IT
 
La magia de un abrazo
La magia de un abrazoLa magia de un abrazo
La magia de un abrazoRafael Pardo
 
Charla guia de salud para padres internet y las redes sociales
Charla guia de salud para padres   internet y las redes socialesCharla guia de salud para padres   internet y las redes sociales
Charla guia de salud para padres internet y las redes socialesJosé Romera López
 
Panorama logiciels bibliographiques_2015
Panorama logiciels bibliographiques_2015Panorama logiciels bibliographiques_2015
Panorama logiciels bibliographiques_2015fcohen
 
Axe 3 recrutement et formation
Axe 3   recrutement et formationAxe 3   recrutement et formation
Axe 3 recrutement et formationThomas Fraisse
 
Explorardor de windows vista
Explorardor de windows vistaExplorardor de windows vista
Explorardor de windows vistaluis0114
 
Optimiser vos stocks, sans pénaliser le commerce
Optimiser vos stocks, sans pénaliser le commerceOptimiser vos stocks, sans pénaliser le commerce
Optimiser vos stocks, sans pénaliser le commerceFranck CHERY
 
EWS, ultimate Content-Management für Web 2.0 und Web 3.0
EWS, ultimate Content-Management für Web 2.0 und Web 3.0EWS, ultimate Content-Management für Web 2.0 und Web 3.0
EWS, ultimate Content-Management für Web 2.0 und Web 3.0Falk Wolsky
 
Mein Schatz Und Ich
Mein Schatz Und IchMein Schatz Und Ich
Mein Schatz Und IchKellermeier
 
Informaticabeni
InformaticabeniInformaticabeni
Informaticabenibenilde
 
Portfolio nachosanchez[1]
Portfolio nachosanchez[1]Portfolio nachosanchez[1]
Portfolio nachosanchez[1]Nacho
 
Egonon Tools Screenshots
Egonon Tools ScreenshotsEgonon Tools Screenshots
Egonon Tools ScreenshotsSergej
 
Orchestrer l’ensemble de vos processus dans un seul Système de Gestion Intégr...
Orchestrer l’ensemble de vos processus dans un seul Système de Gestion Intégr...Orchestrer l’ensemble de vos processus dans un seul Système de Gestion Intégr...
Orchestrer l’ensemble de vos processus dans un seul Système de Gestion Intégr...EBRC
 

En vedette (20)

Ch ocolates
Ch ocolatesCh ocolates
Ch ocolates
 
Kommunikationsrevolution Social Media
Kommunikationsrevolution Social MediaKommunikationsrevolution Social Media
Kommunikationsrevolution Social Media
 
Guitarra electrica
Guitarra electricaGuitarra electrica
Guitarra electrica
 
Digital : Web & Mobilité
Digital : Web & MobilitéDigital : Web & Mobilité
Digital : Web & Mobilité
 
La magia de un abrazo
La magia de un abrazoLa magia de un abrazo
La magia de un abrazo
 
Charla guia de salud para padres internet y las redes sociales
Charla guia de salud para padres   internet y las redes socialesCharla guia de salud para padres   internet y las redes sociales
Charla guia de salud para padres internet y las redes sociales
 
Panorama logiciels bibliographiques_2015
Panorama logiciels bibliographiques_2015Panorama logiciels bibliographiques_2015
Panorama logiciels bibliographiques_2015
 
Janvier 2015 - Les Smoothies du Cube
Janvier 2015 - Les Smoothies du CubeJanvier 2015 - Les Smoothies du Cube
Janvier 2015 - Les Smoothies du Cube
 
Axe 3 recrutement et formation
Axe 3   recrutement et formationAxe 3   recrutement et formation
Axe 3 recrutement et formation
 
Explorardor de windows vista
Explorardor de windows vistaExplorardor de windows vista
Explorardor de windows vista
 
Our inspiration
Our inspirationOur inspiration
Our inspiration
 
Optimiser vos stocks, sans pénaliser le commerce
Optimiser vos stocks, sans pénaliser le commerceOptimiser vos stocks, sans pénaliser le commerce
Optimiser vos stocks, sans pénaliser le commerce
 
Introducción psu
Introducción psuIntroducción psu
Introducción psu
 
EWS, ultimate Content-Management für Web 2.0 und Web 3.0
EWS, ultimate Content-Management für Web 2.0 und Web 3.0EWS, ultimate Content-Management für Web 2.0 und Web 3.0
EWS, ultimate Content-Management für Web 2.0 und Web 3.0
 
Van gohg navarro baldeweg
Van gohg navarro baldewegVan gohg navarro baldeweg
Van gohg navarro baldeweg
 
Mein Schatz Und Ich
Mein Schatz Und IchMein Schatz Und Ich
Mein Schatz Und Ich
 
Informaticabeni
InformaticabeniInformaticabeni
Informaticabeni
 
Portfolio nachosanchez[1]
Portfolio nachosanchez[1]Portfolio nachosanchez[1]
Portfolio nachosanchez[1]
 
Egonon Tools Screenshots
Egonon Tools ScreenshotsEgonon Tools Screenshots
Egonon Tools Screenshots
 
Orchestrer l’ensemble de vos processus dans un seul Système de Gestion Intégr...
Orchestrer l’ensemble de vos processus dans un seul Système de Gestion Intégr...Orchestrer l’ensemble de vos processus dans un seul Système de Gestion Intégr...
Orchestrer l’ensemble de vos processus dans un seul Système de Gestion Intégr...
 

Similaire à 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
 

Similaire à G:\DiseñO Wed\Disenoweb (20)

Tp 13 marcos
Tp 13 marcosTp 13 marcos
Tp 13 marcos
 
Trabajo Practico n° 13
Trabajo Practico n° 13Trabajo Practico n° 13
Trabajo Practico n° 13
 
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