Etiquetes

dimarts, 17 de gener del 2012

Ancoratge

A vegades, l'autor/a d'una pàgina web organitza els continguts en seccions activables des d'una mateixa pàgina. Les àncores Icona àncora són ideals per localitzar ràpidament diferents zones concretes de la pàgina.

  • Obriu la pàgina 
  • Col·loqueu-vos amb el cursor davant del primer apartat del vostre redactat.
  • Activeu l'àncora i, a la finestra amb l'opció Nombre de anclaje, un mot de referència, per exemple Editorial  Accepteu.
  • Cliqueu amb el cursor a la part del text  que voleu fer servir com a enllaç l'índex on posa Editorial. Desplaceu-vos per la pàgina fins a trobar l'àncora.

  • Observeu que teniu oberta la finestra de Propiedades de la imatge. A l'opció Vínculo, hi ha un cercle i la carpeta groga Icones per realitzar enllaços. Cliqueu sobre el cercle i arrossegeu la fletxa fins a l'àncora. Us surt el text de l'ancoratge escrit al camp de text Vínculo.

 
  • Accepteu, guardeu la pàgina i comproveu el que heu fet.

Imatges amb enllaç

L'objectiu d'aquesta pràctica és aprendre a utilitzar les imatges per enllaçar parts diferents d'una pàgina web.

Les imatges, no només fan més amable i enriqueixen el contingut d'una pàgina web, també poden tenir altres funcions, per exemple, informar, il·lustrar i ampliar temes i continguts donant accés a altres pàgines.


Part d'una imatge fa de mapa sensible per activar pàgines diferents:
  • Obriu la pàgina m3_5b.htm. Poseu-vos amb el cursor sobre el nom de l'autor del llibre.
  • Activeu, amb el cursor, l'eina d'activació quadrangular del mapa situada a la part inferior esquerra de la finestra Propiedades.
     

  • Seleccioneu, amb aquesta eina, només la part de la imatge on hi hagi el nom de l'autor/a del vostre llibre. Veureu que queda un rectangle actiu de color blavós i que, a l'apartat Vínculo, surt un vincle activat. Busqueu l'arxiu m3_5a.htm a partir de la carpeta groga i accepteu.
  • Escriviu Recomano a l'opció Alt.
  • Guardeu .
  • Premeu F12 i comproveu què heu fet.

    Redactem sense faltes...!!!!

    Obriu la pàgina web m3_5a.htm.

    I en aquesta pàgina recomeneu el llibre que heu llegit poseu:

    L'editorial, l'any d'edició, número de pàgines, tipus d'enquadernació, tipus de novel.la, l'argument,els personatges, on passa, altres llibres d'aquest autor i la vostra opinió etc....

    Heu de fer com a mínim 50 línees.

    Al principi de la pàgina heu d'afegir un índex del que hi haurà  a tota la pàgina.






    dilluns, 9 de gener del 2012

    Gràfics dins la pàgina web

    El format millor per a fotografies o imatges molt riques de color és el format JPEG, mentre que per a figures geomètriques, texts, imatges molt petites, dibuixos sense gaire colors, logos, etc., el GIF és més aconsellable.




    Desenvolupament de la segona part de la pràctica

     Inserir imatges envoltades de text dins la pàgina web

    • Creeu el document m3_5b.htm i poseu-hi el títol "El meu llibre" a partir del menú Modificar Propiedades de la página.
    • Seleccioneu un color de fons mat (que no faci mal als ulls) i accepteu.
    • Cliqueu al botó Icona per a insertar imatgeso a Insertar | Imagen de l'opció Común. Seleccioneu la imatge m3a.jpg de la carpeta imatges. Accepteu.
    • Modifiqueu les mides de la imatge a partir de la finestra Propiedades: escriviu la mida que desitgeu, o amplieu o reduïu la imatge estirant amb el cursor un vèrtex de la imatge que heu inserit. Si voleu estirar la imatge i mantenir les proporcions, premeu la tecla de majúscules alhora que arrossegueu.
    • Escriviu, a l'opció Alt, el text que voleu que es llegeixi quan es posi el cursor sobre la imatge (com a text alternatiu).
    • Si voleu, podeu deixar la imatge sense marc, escriviu el valor 0 a Borde, o, si la voleu amb marc, seleccioneu Borde 1 per posar un marc a la imatge.
    • Centreu la imatge utilitzant el botó d'alinear de la finestra Propiedades.
     Finestra  Propiedades


    • Escriviu el nom de la imatge (sense l'extensió) a la part inferior esquerra, a sota de la imatge reduïda on surt el pes que fa.

     Espai per a escriure el nom de la imatge
    D'origen, el programa us dóna el nom més l'extensió de la imatge

    • Guardeu el document. Ja teniu una imatge a la pàgina, però és difícil situar text al voltant.
    • Escriviu a la página web, utilitzant el teclat directament, un text de tres línies sobre el llibre que heu escollit al començament d'aquest mòdul. Podeu recomanar-lo, o bé explicar per què el feu servir.
    • Torneu a col·locar el cursor sobre la imatge i premeu l'opció Alinear | Izquierda: veureu que el text envolta la imatge. Proveu les altres opcions d'arrenglerar per veure quina us convé.
    • Guardeu el document.
    • Premeu F12 per veure com queda la pàgina.
    Veureu com el text queda massa enganxat a la imatge. Seria molt convenient deixar un espai de distància al costat i per sobre entre el text i la imatge, ja que visualment l'efecte serà millor.

     "Espacio V" Espacio H" només omplir si no es fan taules
    Separació horitzontal i vertical entre el text i la imatge
    • Poseu les dades al quadre Espacio H 12, i 8 al quadre Espacio V de la finestra Propiedades. Si no voleu fer servir aquests valors, proveu-ho amb altres números parells i vegeu com queda.
    • Guardeu la pàgina m3_5b.htm a la vostra carpeta mod3.
    • Premeu F12 per veure com us ha quedat la pàgina.


      Fes un hipervincle a aquesta pàgina en el portal d'entrada que ja vas fer anteriorment,  a la tercera fila segona columna, poseu el text Exercici 04  i no t'oblidis de guardar un pantallazo a la teva col.lecció de Gmail.

    Ubicació d'imatges dins una pàgina web

    L'objectiu d'aquesta pràctica és ubicar correctament imatges i gràfics dins una pàgina web.

    Les imatges o els gràfics són arxius independents que podeu utilitzar o no a la vostra pàgina web, que es criden utilitzant un codi de localització a partir del llenguatge HTML:
    <img src="imatges/m3_4.gif " width="162" height = "162">
    El que interessa en aquest apartat  és la ubicació dels gràfics a la vostra pàgina web.

    Gràfics com a fons de pàgina

    Un gràfic de fons de pàgina és un gràfic que es repeteix tantes vegades com sigui la mida de la pantalla i de les dimensions del gràfic utilitzat, i que es pot definir a partir de les propietats de pàgina.
    Com més difuminat i discret sigui el gràfic, més agradable visualment serà el resultat i la visualització de la pàgina; com més concret i més ric de color, la visualització serà més feixuga per part de l'usuari/ària.

    Desenvolupament de la primera part de la pràctica
    Seleccionar una imatge o un color com a fons de pàgina
    • Creeu un document nou i guardeu-lo com a m3_5a.htm a la carpeta mod3 que heu de creat al vostre directori.
    • Obriu el menú Modificar | Propiedades de la página.
    • Seleccioneu Título | Codificación i escriviu el títol mòdul 3_ubicació de gràfics. Seleccioneu Aspecto | Color de fondo: aquí seleccioneu el color que vulgueu, accepteu i vegeu el resultat clicant a F12.






    • Cliqueu a Control + J o feu clic al botó Examinar de l'opció Imagen de fondo. Per exemple, suposeu que dins la carpeta mod3 imatges en teniu una que voleu usar anomenada m3_4.gif. Seleccioneu la imatge m3_4.gif.
    • Accepteu per tancar el requadre de diàleg de propietats de pàgina.
    • Guardeu la pàgina a la carpeta mod3.
    • Premeu F12 per veure el resultat.


      Fes un hipervincle a aquesta pàgina en el portal d'entrada que ja vas fer anteriorment,  a la tercera fila segona columna, poseu el text Exercici 03  i no t'oblidis de guardar un pantallazo a la teva col.lecció de Gmail.



    Imatges: una imatge val més que mil paraules.

    Obtenció d'imatges
    L'objectiu d'aquesta pràctica és aconseguir una llista de llocs on aconseguir imatges gratuïtes de manera legal.
    Tal com heu llegit al punt anterior, la manera més senzilla d'evitar problemes posteriors és tenir una galeria pròpia i personal d'imatges.
    Compte, també, a l'hora de fer imatges amb programes no registrats. Aquests programes deixen marca a la imatge (no visible, a ulls inexperts), i es pot resseguir un cop està penjada a Internet. Per tant, també podrien donar problemes en el cas d'utilitzar imatges elaborades des d'un programa aconseguit de forma dubtosa.
    El Departament d'Educació ha facilitat als centres educatius el Dreamweaver MX 2004 i el Fireworks MX 2004. No obstant això, hi ha programari lliure de retoc gràfic, com és ara el GIMP, i llocs a Internet que ofereixen imatges gratuïtes. Igualment, també hi ha programes de retoc gràfic en suport CD-ROM plens d'imatges. Qualsevol d'aquestes imatges es pot utilitzar sense cap por i de forma gratuïta. 

    Pràctica
    Busqueu servidors a Internet on es puguin aconseguir imatges de forma gratuïta i feu una llista de cinc, com a mínim. Anoteu-vos l'adreça als vostres apunts.

    Crea una carpeta i anomena-la mod3 i dins d'ella una que es digui imatges i guarda una imatge que t'agradi per fer un fondo amb el nom  m3_4.jpg i una altre d'un llibre que hagis llegit i l'anomenes m3a.jpg.