SlideShare una empresa de Scribd logo
1 de 9
DISEÑO DE PÁGINAS WEB

HERRAMIENTAS:
  1. Microsoft Word

  2. Netscape

  3. Front page

  4. Editores profesionales




MICROSOFT WORD


El procesador de texto Microsoft 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,
marcador, 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




                                                                2
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




 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


                                                           4
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 .




                                                               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




                                                                                       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.



                                                                                                        7
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




Para practicar



      Intenta crear una página similar a esta:




                                                                                     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




                                                                                                      9

Más contenido relacionado

La actualidad más candente

CREACION DE PAGINA WEB JIMDO
CREACION DE PAGINA WEB JIMDOCREACION DE PAGINA WEB JIMDO
CREACION DE PAGINA WEB JIMDOYerijheomira
 
Languasco barron julio cesar
Languasco barron julio cesarLanguasco barron julio cesar
Languasco barron julio cesarlanguasquito
 
Triptico balcazar
Triptico balcazarTriptico balcazar
Triptico balcazarkaty-dch
 
Guía breve Delicious (mayo 2013)
Guía breve Delicious (mayo 2013)Guía breve Delicious (mayo 2013)
Guía breve Delicious (mayo 2013)Ana García
 
Pasos para hacer una carta en word
Pasos para hacer una carta en wordPasos para hacer una carta en word
Pasos para hacer una carta en wordJuan Fierro
 
Encabezado y pie de pagina
Encabezado y pie de paginaEncabezado y pie de pagina
Encabezado y pie de paginaCesar Estrada
 
Marcadores, hipervinculos, referencias cruzadas
Marcadores, hipervinculos, referencias cruzadasMarcadores, hipervinculos, referencias cruzadas
Marcadores, hipervinculos, referencias cruzadasCesar Estrada
 
Administre su vida de una forma más eficaz con
Administre su vida de una forma más eficaz conAdministre su vida de una forma más eficaz con
Administre su vida de una forma más eficaz conpedro fleitas
 
Administre su vida de una forma más eficaz con
Administre su vida de una forma más eficaz conAdministre su vida de una forma más eficaz con
Administre su vida de una forma más eficaz conmesaunillanos
 
Trabajo de tic’s
Trabajo de tic’sTrabajo de tic’s
Trabajo de tic’sAndy Steban
 

La actualidad más candente (18)

CREACION DE PAGINA WEB JIMDO
CREACION DE PAGINA WEB JIMDOCREACION DE PAGINA WEB JIMDO
CREACION DE PAGINA WEB JIMDO
 
Jimdo tutorial 1
Jimdo tutorial 1Jimdo tutorial 1
Jimdo tutorial 1
 
Aolicacion4
Aolicacion4Aolicacion4
Aolicacion4
 
Languasco barron julio cesar
Languasco barron julio cesarLanguasco barron julio cesar
Languasco barron julio cesar
 
Triptico balcazar
Triptico balcazarTriptico balcazar
Triptico balcazar
 
Microsoft office word 2016 sesión 1
Microsoft office word 2016   sesión 1Microsoft office word 2016   sesión 1
Microsoft office word 2016 sesión 1
 
Guía breve Delicious (mayo 2013)
Guía breve Delicious (mayo 2013)Guía breve Delicious (mayo 2013)
Guía breve Delicious (mayo 2013)
 
Pasos para hacer una carta en word
Pasos para hacer una carta en wordPasos para hacer una carta en word
Pasos para hacer una carta en word
 
Encabezado y pie de pagina
Encabezado y pie de paginaEncabezado y pie de pagina
Encabezado y pie de pagina
 
MANUAL DE WORD
MANUAL DE WORDMANUAL DE WORD
MANUAL DE WORD
 
Marcadores, hipervinculos, referencias cruzadas
Marcadores, hipervinculos, referencias cruzadasMarcadores, hipervinculos, referencias cruzadas
Marcadores, hipervinculos, referencias cruzadas
 
Como elaborar un tríptico
Como elaborar un trípticoComo elaborar un tríptico
Como elaborar un tríptico
 
Welcome document
Welcome documentWelcome document
Welcome document
 
Administre su vida de una forma más eficaz con
Administre su vida de una forma más eficaz conAdministre su vida de una forma más eficaz con
Administre su vida de una forma más eficaz con
 
Administre su vida de una forma más eficaz con
Administre su vida de una forma más eficaz conAdministre su vida de una forma más eficaz con
Administre su vida de una forma más eficaz con
 
Trabajo de tic’s
Trabajo de tic’sTrabajo de tic’s
Trabajo de tic’s
 
Tp 13
Tp 13Tp 13
Tp 13
 
Adobe dream weaver tutorial
Adobe dream weaver tutorialAdobe dream weaver tutorial
Adobe dream weaver tutorial
 

Destacado (20)

913 en
913 en913 en
913 en
 
5.4 ejem. bibliog.estilo vancouver
5.4 ejem. bibliog.estilo vancouver5.4 ejem. bibliog.estilo vancouver
5.4 ejem. bibliog.estilo vancouver
 
CONGRESO LATINOAMERICANO DE SEGURIDAD ASIS MÉXICO 2015
CONGRESO LATINOAMERICANO DE SEGURIDAD ASIS MÉXICO 2015CONGRESO LATINOAMERICANO DE SEGURIDAD ASIS MÉXICO 2015
CONGRESO LATINOAMERICANO DE SEGURIDAD ASIS MÉXICO 2015
 
Dp lnl 2013 espacios
Dp lnl 2013 espaciosDp lnl 2013 espacios
Dp lnl 2013 espacios
 
Pub delegados 2013 14
Pub delegados 2013 14Pub delegados 2013 14
Pub delegados 2013 14
 
Dossier De Empresa
Dossier De  EmpresaDossier De  Empresa
Dossier De Empresa
 
Engagement
EngagementEngagement
Engagement
 
beneficios de la moringa oleifera
beneficios de la moringa oleiferabeneficios de la moringa oleifera
beneficios de la moringa oleifera
 
Jiquanna
JiquannaJiquanna
Jiquanna
 
Sample Presentation from Integrated Marketing Campaign
Sample Presentation from Integrated Marketing CampaignSample Presentation from Integrated Marketing Campaign
Sample Presentation from Integrated Marketing Campaign
 
Www vispronet-de
Www vispronet-deWww vispronet-de
Www vispronet-de
 
Marcas v tls_lima
Marcas v tls_limaMarcas v tls_lima
Marcas v tls_lima
 
MSc Water & Environment
MSc Water & EnvironmentMSc Water & Environment
MSc Water & Environment
 
Parcial2 13
Parcial2 13Parcial2 13
Parcial2 13
 
Bpb brochure 2011 web
Bpb brochure 2011 webBpb brochure 2011 web
Bpb brochure 2011 web
 
save the world
save the worldsave the world
save the world
 
Acces a tuna finder
Acces a tuna finderAcces a tuna finder
Acces a tuna finder
 
Luis catalog table wine
Luis catalog table wineLuis catalog table wine
Luis catalog table wine
 
Feminización de la migración
Feminización de la migraciónFeminización de la migración
Feminización de la migración
 
Tecnopro
Tecnopro Tecnopro
Tecnopro
 

Similar a DISEÑO

G:\DiseñO Wed\Disenoweb
G:\DiseñO Wed\DisenowebG:\DiseñO Wed\Disenoweb
G:\DiseñO Wed\DisenowebCOMPUTO1GRUPO3
 
G:\diseño de web
G:\diseño de webG:\diseño de web
G:\diseño de webistene beta
 
Tp 13 gonzalo
Tp 13 gonzaloTp 13 gonzalo
Tp 13 gonzalomochoneta
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas WebJose Casan
 
Trabajo prafctico n13 (1)
Trabajo prafctico n13 (1)Trabajo prafctico n13 (1)
Trabajo prafctico n13 (1)JuanLYB
 
U13 trabajo de investigacion
U13 trabajo de investigacionU13 trabajo de investigacion
U13 trabajo de investigacion97A
 
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
 
Trabajo practino N° 13
Trabajo practino N° 13Trabajo practino N° 13
Trabajo practino N° 13ezeguti
 
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
 
Crear contenidos en MOODLE
Crear contenidos en MOODLECrear contenidos en MOODLE
Crear contenidos en MOODLERaul Lozada
 
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
 

Similar a DISEÑO (20)

G:\DiseñO Wed\Disenoweb
G:\DiseñO Wed\DisenowebG:\DiseñO Wed\Disenoweb
G:\DiseñO Wed\Disenoweb
 
G:\diseño de web
G:\diseño de webG:\diseño de web
G:\diseño de web
 
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
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas Web
 
Trabajo prafctico n13 (1)
Trabajo prafctico n13 (1)Trabajo prafctico n13 (1)
Trabajo prafctico n13 (1)
 
Guia 1 prezi
Guia 1 preziGuia 1 prezi
Guia 1 prezi
 
Guia de autoaprendizaje
Guia de autoaprendizajeGuia de autoaprendizaje
Guia de autoaprendizaje
 
U13 trabajo de investigacion
U13 trabajo de investigacionU13 trabajo de investigacion
U13 trabajo de investigacion
 
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
 
7 crear contenidos- el editor de moodle
7   crear contenidos- el editor de moodle7   crear contenidos- el editor de moodle
7 crear contenidos- el editor de moodle
 
Trabajo practino N° 13
Trabajo practino N° 13Trabajo practino N° 13
Trabajo practino N° 13
 
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
 
slideshare y power point online one drive
slideshare y power point online one driveslideshare y power point online one drive
slideshare y power point online one drive
 
Crear contenidos en MOODLE
Crear contenidos en MOODLECrear contenidos en MOODLE
Crear contenidos en MOODLE
 
Tutorial de dreamweaver
Tutorial de dreamweaverTutorial de dreamweaver
Tutorial de dreamweaver
 
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
 
Tutorial prezi
Tutorial preziTutorial prezi
Tutorial prezi
 

DISEÑO

  • 1. DISEÑO DE PÁGINAS WEB HERRAMIENTAS: 1. Microsoft Word 2. Netscape 3. Front page 4. Editores profesionales MICROSOFT WORD El procesador de texto Microsoft 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, marcador, 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 2
  • 3. 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 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 4
  • 5. 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 . 5
  • 6. 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 6
  • 7. 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. 7
  • 8. 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 Para practicar Intenta crear una página similar a esta: 8
  • 9. 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 9