SlideShare a Scribd company logo
1 of 42
Download to read offline
Dreamweaver
  MX 2004




              LANBIDE
              EKIMENA
L ANBIDE E KIMENA
                           LANBIDE EKIMENA




Proiektuaren bultzatzaileak




Laguntzaileak




Hizkuntz koordinazioa
Egilea(k): ARGARATE AYASTUY Elena

Zuzenketak: Elhuyar Hizkuntz zerbitzuak


Maketa: Itziar Etxabe
Azalaren diseinua: Naiara Beasain


                                          2006an prestatua
Dreamweaver MX 2004




                                                                Aurkibidea



1   SARRERA............................................................................................................................................ 2


2   OINARRIZKO ELEMENTUAK ............................................................................................................. 3

    2.1      Dreamweaver MX ingurunea ..................................................................................................... 3

    2.2      Webgunea sortzea .................................................................................................................... 4

    2.3      Web orria sortzea ...................................................................................................................... 7

    2.4      Web orriaren atzeko planoa .................................................................................................... 12

    2.5      Web orriaren testua ................................................................................................................. 13

    2.6      Irudiak ...................................................................................................................................... 15

    2.7      Web orri berria ......................................................................................................................... 18

    2.8      Estekak .................................................................................................................................... 20

    2.9      Inprimakiak .............................................................................................................................. 22



3   DISEINUA .......................................................................................................................................... 28

    3.1      Taulak ...................................................................................................................................... 28

    3.2      Markoak ................................................................................................................................... 32

    3.3      Estilo orriak .............................................................................................................................. 35

    3.4      Interneten argitaratzea ............................................................................................................ 38




                                                                                                   LANBIDE EKIMENA                                    I
OINARRIZKO
DREAMWEAVER
  MX 2004




        LANBIDE EKIMENA   1
Informatika Aplikazioen Garapena




1 SARRERA

    Macromedia Dreamweaverrek web orriak egiteko sistema eskaintzen du.


    Macromedia Dreamweaver MX webgune, web orri eta web aplikazioak diseinatzeko, kodifikatzeko
eta garatzeko HTML lengoaia profesionaleko editorea da.


    Macromedia Dreamweaver MXk tresna baliagarriak ditu eskuz HTML kodea kontrolatzeko eta ikus-
edizioa ingurunean erabiltzeko.


    Liburu honetan, sortu eta diseinatzen ikasiko dugu. Guk oinarrizko elementuak erabiliko ditugu; izan
ere, Dreamweaver oso sistema zabala da, eta, guztia erabiltzeko, oinarrizko elementuak landu behar dira
lehenengo.




                                                                   LANBIDE EKIMENA                2
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




2 OINARRIZKO ELEMENTUAK

   Dreamweaver MXren oinarrizko elementuek, hots, leihoek, barrek, panelek eta abar, web orriak egi-
teko behar den guztia eskaintzen digute.


    2.1   Dreamweaver MX ingurunea


   Dreamweaver irekitzean, irudi hau agertuko da lehenengo:




                                              2.1. irudia.


   Diseñador aukeratuko dugu.

   Codificador aukera web orriak HTML kodean erabiltzeko da.

   Aceptar botoian klik egin eta gero, honako leiho hau agertuko da:




                                              2.2. irudia.




                                                                   LANBIDE EKIMENA            3
Informatika Aplikazioen Garapena




            1. Web orria. Menu nagusiaren barratik hartutako zenbait elementu aukeratuz web orria
                sortuko den lekua da.

            2. Propietateak. Lan-eremuan sartuko diren elementuak aldatzeko tresnak.

            3. Menu nagusiaren eta dokumentuaren tresna-barra. Web orriak betetzeko behar diren
                elementuen menua: botoiak, irudiak, taulak eta abar.

            4. Panelak. Web orria edo haren edukia aldatzeko utilitateak ditu. Panel bakoitzak bere es-
                pezialitatea du.


    2.2   Webgunea sortzea


    Hasi baino lehen, web orria egiteko, webgune bat sortu behar da. Webgunea fitxategiak eta karpetak
gordetzen diren tokia da.


            1. Erdiko panelean, sakatu Sitio de Dreamweaver.

            2. Laguntzaile bat agertuko da. Hor, lekuaren izena idatzi behar da.

            3. Adibidea1 idatziko dugu, eta Siguiente sakatu.




                                               2.3. irudia.
            4. Laguntzaileak galdetuko du zerbitzariko teknologia bat erabiliko duen ala ez.




                                                                    LANBIDE EKIMENA              4
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




                                    2.4. irudia.



   Ezetz aukeratuko dugu, liburu honetan ez baitugu erabiliko.


5. Dreamweaverrek galdetuko du fitxategiak zein modutan erabiliko ditugun. Web orriak
   ordenagailuaren karpeta batean sortuko ditugu, bukatzean zerbitzari batean jartzeko.

   Beherago, fitxategiak zein karpetatan jarriko ditugun galdetuko du, eta gure karpetarako
   bidea jarriko dugu. C unitatean karpeta bat sortuko dugu Dreamweaver Ikastaroa
   izenarekin, eta hor web orriko fitxategi guztiak gordeko dira.




                                    2.5. irudia.




                                                         LANBIDE EKIMENA             5
Informatika Aplikazioen Garapena




6. Hurrengo leihoan, zerbitzariaren konexio mota aukeratu behar da. Orain Ninguno jarriko
   dugu, hurrengo kapituluan aztertuko dugu eta.




                                  2.6. irudia.



7. Webgunea sortuta dago. Dreamweaverrek, azken leiho batean, sortutako webgunearen
   laburpena erakusten digu.

   Webguneari Adibidea 1 izena eman diogu, eta gure fitxategi guztiak C:Dreamweaver
   IkastaroaAdibidea 1 karpetan sartuko dira.




                                  2.7. irudia.



8. Eta, bukatzeko, egin klik Completado botoian.


                                                      LANBIDE EKIMENA              6
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




2.3   Web orria sortzea


Webgunea sortu eta gero, web orria sortzen hasiko gara.

       1. Crear nuevo agertzen den panelean, aukeratu HTML eta sakatu.

           Leiho hau agertu ezik, menu nagusiaren barran Archivo | Nuevo | Página Básica aukeratu.




                                          2.8. irudia.


       2. Web orria hutsik agertuko da.

           Hau da Dreamweaver MXren lan-eremua:




                                          2.9. irudia.




                                                              LANBIDE EKIMENA                7
Informatika Aplikazioen Garapena




1. Titulu-barra. programaren izena dago.

2. Menu nagusiaren barra. Programaren aukera nagusiak dituen menua du.

3. Dokumentuaren tresna-barra. Web orriak betetzeko behar diren elementuen menua:
   botoiak, irudiak, taulak eta abar.

4. Lan-eremua. Web orria diseinatuko dugun webgunea.

5. Propietateak. Lan-eremuan sartuko diren elementuak aldatzeko tresnak.

6. Panelak. web orria edo haren edukia aldatzeko utilitateak ditu. Panel bakoitzak bere espe-
   zialitatea du.

   Eskuinaldean, Archivos panelean, webgunea sortu dugunean webguneari eman diogun
   izena eta bidea ikus ditzakegu. Ez dugunez egin web orririk, oraindik hutsik dago.

   Oso komenigarria da web orria sortu baino lehen gordetzea, zintzilikatzeko beldurra izango
   dugu beti eta.


   1. Gorde baino lehen, web orrian zerbait edukitzeko, lerro bat idatziko dugu.
       Eta Título jartzen duen tokian, web orriari emango diogun izena idatziko dugu. Ariketa
       honetan Weborria 1 jarriko dugu.




                                        2.10. irudia.




                                                           LANBIDE EKIMENA              8
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




2. Web orria gordetzeko, menu nagusiaren barran Archivo| Guardar como sakatu behar da.

3. Web orria Adib1.htm izenarekin gordeko dugu.




                                 2.11. irudia.



   Guardar sakatu behar dugu.




                                 2.12. irudia.




                                                     LANBIDE EKIMENA             9
Informatika Aplikazioen Garapena




    Web orriaren izenak eskuineko panelean azaldu behar du.




                                                2.13. irudia.



    Agertzen ez bada, sakatu F5 edo Actualizar       .


    Panel horretan web orriko fitxategi guztiak ikus ditzakegu.


    Web orriaren lan-eremuan hainbat aukera daude, besteak beste:
    Código: HTML kodea ikusiko dugu.


    Diseño: web orria zatituta ikusten da, hau da, leihoaren erdi batean HTML kodea ikusiko dugu, eta beste
erdian, diseinua.


    Diseño: Web orria diseinuan ikusten da.


    Web orria nabigatzaile batean ikusteko, menu nagusiaren barran aukeratu Archivo|Vista previa en el

navegador|iexplore edo Vista previa en iexplore          eta sakatu.


    Nabigatzaileen bateraezintasuna dela eta, web orriak ikusteko, Dreamweaverren zerrendan gehitzea
komeni da:



                                                                       LANBIDE EKIMENA               10
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




    Menu nagusiaren barran, sakatu Archivo|Vista previa en el navegador|Editar lista de navegadores, eta
Preferencias elkarrizketa-koadroan jarriko den nabigatzaile berriaren izena eta webgunea idatzi behar dira.




                                                2.14. irudia.




                                                2.15. irudia.



                                                                      LANBIDE EKIMENA                 11
Informatika Aplikazioen Garapena




    Horretarako, sakatu + eta, agertuko den leihoan, nabigatzailearen izena eta non dagoen jarri behar
dira.




                                                2.16. irudia.


    2.4     Web orriaren atzeko planoa

    Web orri berria sortzen denean, atzeko planoko kolorea beti izaten da zuria. Kolorea aldatu edo irudia
sartu nahi badugu, pauso hauek jarraitu behar dira:

          1. Irekita dagoen web orrian (Adib1.htm), menu nagusiaren barran, aukeratu Modificar
             |Propiedades de la página.




                                                2.17. irudia.




                                                                    LANBIDE EKIMENA                 12
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




          2. Leiho horretan, sakatu Color de Fondo, agertuko den kolore-paletan kolore bat aukeratu, eta
             sakatu Aceptar.

             Kolore baten ordez irudia aukeratu nahi izanez gero, Imagen de Fondo agertzen den lekuan
             sakatu Examinar,eta ateratzen den leihoan irudiaren izena eta bidea aurkitu behar dira.

             Dreamweaverrek galdetzen duenean irudiaren kopia bat egin eta web orriaren karpetan
             gorde nahi dugun, baietz erantzungo diogu, komeni delako web orriaren fitxategiak, zerbi-
             tzari bati aldatzean, webgune berean egotea.


    2.5     Web orriaren testua


    Edozein testu-prozesadoretan aurki ditzakegun aukerak ditugu Dreamweaverren testua sartzeko.
Testuaren lekua, letra-tipoa, tamaina, kolorea eta abar alda daitezke.


    Dreamweaverren interfazean testua zuzenean sartzean, paragrafo bihurtzen da.


    Irekita daukagun web orria betetzen hasiko gara. Testu bat sartuko dugu.




                                                2.18. irudia.



    Web orria nabigatzailean nola ikusten den jakiteko,         ikonoan klik egingo diogu. Leihoaren ta-
maina aldatzean testuaren lerroak ere tamaina aldatu duela konturatuko gara.



                                                                     LANBIDE EKIMENA                   13
Informatika Aplikazioen Garapena




                                                2.19. irudia.


    Propietateen panelean, paragrafoan aldatu nahi dugun guztia aldatzeko tresnak daude. Letra-tipoak,
tamaina, kolorea, letra lodia, etzana eta abar aukera ditzakegu paragrafoa idazteko. Eta paragrafoa non
jarri ere aukera daiteke: erdian, eskuinean edo ezkerrean.


    Hor agertzen diren bi botoiak zerrendak egiteko dira.       Honako hauek dira:

        1. Ordenarik gabeko zerrendak. Zerrendako elementu bakoitzaren aurrean biribiltxo bat ager-
            tuko da, eta aldatu egin daiteke.

        2. Zerrenda ordenatuak. Zerrendako elementu bakoitzak zenbaki bat edukiko du aurrean.




                                                2.20. irudia.



                                                                   LANBIDE EKIMENA               14
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




2.6     Irudiak


Web orrian irudiak sartzeko:


      1. Dokumentuaren tresna-barran, sakatu Imágenes.




                                             2.21. irudia.


      2. Irekiko den leihoan bilatu, eta irudi bat aukeratu behar dugu. Irudi horren kopia bat egingo
         dugu gure fitxategian jartzeko.




                                             2.22. irudia.




                                                                 LANBIDE EKIMENA               15
Informatika Aplikazioen Garapena




3. Sartu dugun irudia aldatu egin daiteke propietateen panelean, eta tamaina, lekua eta abar
   alda dakizkioke.

4. Testuak eta irudiak batera erabiltzeko, Dreamweaverrek irudiak eta testuak lerrokatzeko
   tresnak eskaintzen dizkigu.

   Irudian sakatuta, propietateen panelean irudiak aldatzeko tresnak agertzen dira.




                                      2.23. irudia.



5. Irudiaren ondoan testua jarriko dugu.




                                      2.24. irudia.




                                                           LANBIDE EKIMENA            16
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




              Propietateen panelean Alinear sakatu eta irekitzen den leihoan, honako aukera hauek es-
              kainiko zaizkigu:

              Medio eta Medio absoluto: irudiaren erdiko puntua testuaren oinarriarekin lerrokatzen du.

              Superior eta Superior absoluto: testuaren eta irudiaren goi-puntuak lerrokatzen ditu.

              Inferior eta Inferior absoluto: testuaren eta irudiaren behe-puntuak lerrokatzen ditu.

              Derecha: irudia testuaren eskuinean kokatzen du.

              Izquierda: irudia testuaren ezkerrean jartzen du.


          6. Web orria gordeko dugu.


    2.7     Web orri berria


    Orain arte ikasitako tresnekin, beste web orri berri bat egingo dugu.


    Archivo|Nuevo sakatu, eta Página Básica aukeratu behar dugu. Gero, Crear botoian klik egin eta
web orri berri bat azalduko zaigu betetzeko.




                                                  2.25. irudia.




                                                                       LANBIDE EKIMENA                 17
Informatika Aplikazioen Garapena




    Título agertzen den lekuan, Web orria 2 idatziko dugu. Eta betetzen hasi baino lehen, hasieran esan
dugun moduan, web orria gordeko dugu. Web orri horri Adib2.htm izena jarriko diogu.




                                              2.26. irudia.



    Web orri horretan, osagai batzuk sartuko ditugu, eta irudiak, testua eta atzeko planoa ere aldatuko
ditugu.




                                              2.27. irudia.



                                                                   LANBIDE EKIMENA               18
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




    2.8     Estekak

    Web orria fitxategi multzo bat da, hasieran esan dugun moduan, html hizkuntzan idatzia. Web orriko
orrialde batetik beste orrialdeetara pasatzeko, tresna bat dugu, hots, estekak. Hori hipertestua da.

    Esteka bat testuaren edo irudiaren zati bat da. Horrelako estekaren bat aukeratuz gero, beste webgune
bateko web orri edo dokumentu batera edo webgune bereko beste dokumentu batera eramango gaitu.

    Nahiz eta web orrian estekak modu batean ikusi, nabigatzailean beste modu batean ikusten dira.
Testua azpimarratua eta beste kolore batean azalduko da, eta irudiek koloretako ertza izango dute.

    Bi esteka mota daude:

          1. Helbide erlatiboak: webgune bateko dokumentuaren posizio batera joateko.

          2. Helbide absolutuak: beste webgune bateko dokumentu edo web orri batera joateko.

                Helbide erlatiboak

    Gure dokumentuko posizio batera joateko balio dute.

    Adib1.htm web orrian esteka jarriko dugu, Adib2.htm web orrira joateko:

                 1. Hautatu astronomia hitza.




                                                2.28. irudia.



                                                                     LANBIDE EKIMENA                   19
Informatika Aplikazioen Garapena




2. Egin klik propietateen eskuinean dagoen botoian      eta sagua sakatuz, arrastatu
   fitxategien paneleko Adib2.htm fitxategiraino.




                               2.29. irudia.



3. Saguaren botoia askatzen dugunean, Astronomia hitza esteka izango da.




                               2.30. irudia.



                                                    LANBIDE EKIMENA           20
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




                4. Web orria gordeko dugu, eta nabigatzailean probatuko dugu.


               Helbide absolutuak


    Beste webgune bateko dokumentu edo web orri batera joateko erabiliko ditugu. Kasu honetan, irudia
erabiliko dugu esteka jartzeko.


    Esteka irudi baten barnean:


                1. Hautatu Adib1.htm web orrian daukagun irudia.




                                                2.31. irudia.



                2. Propietateetan, Vínculo agertzen den leihoan, web orri baten helbidea idatziko dugu;
                    ariketa honetan, hau izango da: http://www.zientzia.net.


    Estekak, irudiaren gainean sakatzen dugunean saguarekin, lehen esandako helbidera eramango gaitu.


    2.9   Inprimakiak


    Gure web orriaren bisitari baten informazioa jaso nahi badugu, web orrian inprimaki bat jarrita lortuko
dugu informazio hori.



                                                                     LANBIDE EKIMENA                 21
Informatika Aplikazioen Garapena




    Hauek dira inprimaki baten elementuak:


        1. Testu-kaxak. Testua sartzeko erabiltzen dira, eta hiru mota daude.

        2. Aukerak. Erabiltzaileak hainbat aukeren artean hautatzeko dira.

        3. Kontrol-laukiak. Zerbait baieztatzeko edo ezeztatzeko balio dute.

        4. Inprimaki-botoiak. Inprimakia bidaltzeko eta sartutako datuak garbitzeko dira.


               Inprimakia sortzea


    Adib3.htm izeneko web orri bat sortuko dugu. Web orri horretan, testua eta irudia sartu eta gero,
inprimakia jarriko dugu:


                1. Dokumentuaren tresna-barran, sakatu Común eta aukeratu Formulario.




                                               2.32. irudia.



                2. Tresna-barra aldatu egingo da, eta Inprimakien tresna-barra azalduko da.




                                                                    LANBIDE EKIMENA            22
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




                                2.33. irudia.




3. Inprimakien tresna-barrako lehenengo irudia sakatuko dugu.




                                2.34. irudia.




4. Web orrian kaxa bat agertuko da, hots, inprimakia. Horren barruan inprimakiaren
   elementuak sartuko ditugu.




                                2.35. irudia.




5. Lehenengo, testu-kaxa sartuko dugu. Horretarako, inprimakian kurtsorea sartuta,
   tresna-barran Campo de Texto botoia sakatuko dugu.




                                2.36. irudia.




   Inprimakian testu-kaxa bat agertuko da.




                                2.37. irudia.




                                                 LANBIDE EKIMENA             23
Informatika Aplikazioen Garapena




6. Eremutik kanpo klik egin, eta Sartu tekla sakatu beste lerro bat sortzeko.




                                2.38. irudia.




7. Beste testu-kaxa bat sartuko dugu.




                                2.39. irudia.




8. Lehen egin dugun moduan, beste lerro bat sortuko dugu bi aukera-botoi sartzeko. Hori
    egiteko, tresna-barran sakatu bi aldiz Botón de opción.




                                2.40. irudia.




9. Beste lerro bat sortu eta tresna-barran Lista/Menu aukeratu, eta Zerrenda eremua in-
    primakian sartuko dugu:




                                2.41. irudia.




                                                     LANBIDE EKIMENA             24
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




            10. Bukatzeko, inprimakia bidaltzeko eta inprimaki-eremuak garbitzeko behar ditugun
                inprimaki-botoiak sartuko ditugu.

                Lerro bat sortu eta gero, tresna-barran Botón bi aldiz sakatu eta inprimakian bi
                botoiak agertuko dira.

                Lehenespenez, Enviar hitzarekin azaltzen dira, baina propietateen panelean, Etiqueta
                jartzen duen lekuan, nahi duguna jar dezakegu. Inprimakietan, Bidali eta Garbitu idaz-
                ten dira gehien.




                                            2.42. irudia.



            11. Inprimakiaren beharrezko elementu guztiak sartuta daude. Baina ulergarriagoa egi-
                teko, eremu bakoitzaren ondoan testua jarriko dugu.




                                            2.43. irudia.



           Eremuen propietateak


Orain, inprimakiaren elementu bakoitzari bere propietateak jarriko dizkiogu.




                                                                 LANBIDE EKIMENA                25
Informatika Aplikazioen Garapena




1. Web orriaren beheko aldean, ezkerretan, <form> sakatu, eta propietateen panela
   aldatu egiten da.

2. Acción dagoen lekuan, informazioa nora bidali jarriko dugu.

3. Método jartzen duen lekuan, POST idatzi behar da.

4. Lehenengo, testu-kaxa sakatu, eta propietateetan Campo de texto dagoen lekuan,
   idatzi Izena; eta Ancho car jartzen duen lekuan, jarri 20.

5. Bigarren testu-kaxako propietateen panelean lehen aldatu ditugun eremuetan, idatzi
   Abizenak eta 80 .

6. Lehenengo, sakatu aukera-botoia; Valor activado dagoen lekuan idatzi Gizona, eta
   bigarren botoian idatzi Emakumea.

7. Egin klik zerrenda-eremuan, eta Valores de lista dagoen lekuan, urte batzuk jarriko
   ditugu, bisitariak aukeratzeko izan ditzan.
   Ariketa honetan, adibidez, 1960-1970, 1971-1980, 1981-1990 jarriko ditugu.




                               2.44. irudia.


8. Azkenean, botoiak aldatuko ditugu. Lehenengoa eginda dago; bigarrena aldatzeko,
   sakatu eta Restablecer formulario aukeratu.

9. Hasieran esan dugun moduan, inprimakiek bisitariari buruzko informazioa jasotzeko
   balio dute. Horretarako, posta elektronikoko helbidea inprimakian jarri behar dugu.
   Hautatu inprimakia, eta tresna-barran sakatu Campo Oculto. Propietateen panelean,
   Campo Oculto dagoen lekuan, idatzi jasotzailea, eta Valor jartzen duenean, posta
   elektronikoko helbidea.




                               2.45. irudia.


10. Web orria gorde eta gero, Nabigatzailean probatuko dugu.


                                                     LANBIDE EKIMENA            26
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




3 DISEINUA

   Web orria antolatzeko zenbait metodo daude. Web orrian sartu behar dugun informazioaren arabera,
nabigatzean modu azkar eta erabilgarrienean ibiltzeko, lan-eremua ordenatu behar dugu.


   Horretarako, bi tresna dauzkagu gure informazioa sartzeko: taulak eta markoak.


    3.1     Taulak


   Informazioa ordenatzeko modu erabilgarrienetako bat da taula. Lerroak, zutabeak eta gelaxkak dituzte
nahi ditugun elementu guztiak sartzeko, eta den-dena ordenatuta azalduko da.


   Sortzen ari garen dokumentuan beste web orri bat egingo dugu. Adib3.htm irekiko dugu taula bat
sartzeko.



          1. Tresna-barran        Tabla aukeratu, eta laguntzaile bat aterako zaigu.




                                                 3.1. irudia.




                                                                      LANBIDE EKIMENA            27
Informatika Aplikazioen Garapena




2. Morroian taularen tamaina zehaztu behar da. Hor agertzen diren propietateak taula sartuta
   eta hautatua ere agertzen dira. Bietan 3 idatziko dugu, eta, horrela, taulak 3 lerro eta 3
   zutabe izango ditu.




                                           3.2. irudia.



3. Hona hemen propietateen paneleko atributu batzuk:

   Rell. Celda: gelaxkaren ertzaren eta barrukoaren arteko pixel kopurua zehazten du.

   Esp. Celda: gelaxken arteko pixel kopurua zehazten du.

   Col. Fondo: barruko kolorea aukeratzeko.

   Col. Borde: ertzeko kolorea aukeratzeko.

   Alinear: taula non jarri aukeratzeko.

   Borde: gelaxken ertzaren lodiera zehazten du. Lehenetsia 1 da, baina aldatu egin daiteke.


4. Bigarren lerroko lehenengo gelaxkan irudia sartuko dugu, eta bigarrenean, testua.

   Hirugarren lerroko lehenengo gelaxkan beste irudi bat sartuko dugu, eta bigarrenean, beste
   testu bat.




                                                            LANBIDE EKIMENA              28
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




                                      3.3. irudia.


5. Orain hirugarren zutabea hautatuko dugu. Menu nagusiaren barratik aukeratu Modificar, eta
   sakatu Tabla Eliminar columna.




                                      3.4. irudia.




                                                         LANBIDE EKIMENA              29
Informatika Aplikazioen Garapena




6. Horrela, hirugarren zutabea kenduko dugu. Ikusten denez, menu horretan hainbat aukera
   dago taulak aldatzeko.

7. Orain, lehenengo lerroa hautatuko dugu. Propietateen panelean, beheko botoien artean bi
   botoi daude Fila agertzen den lekuan; bata lerro bereko gelaxkak elkartzeko eta bestea
   gelaxka batean bi gelaxka edo gehiago egiteko.




                                       3.5. irudia.


   Gelaxkak elkartzeko botoia sakatu, eta lehenengo lerroan gelaxka bakarra geratuko zaigu.

8. Honela geratuko da:




                                       3.6. irudia.



                                                           LANBIDE EKIMENA              30
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




          9. Orain, lehenengo lerroan izenburua jarriko dugu, eta taula web orriaren erdian jarriko dugu.




                                                 3.7. irudia.



    Horretarako, lehenengo gelaxkan testua sartu dugu, eta propietateetan, erdian jartzeko botoia


sakatu dugu.


    Taularen propietateetan, Alinear jartzen duen lekuan, Centro aukeratu dugu. Panelean edozein gauza
alda dezakegu, besteak beste, ertza, kolorea, eta tamaina.


    Nabigatzailean probatuko dugu.


    3.2     Markoak


    Markoek hainbat eremutan zatitzen dute web orria. Markoak dituen web orria irekitzean, nabiga-
tzailean leiho batzuk ikusiko ditugu, baina web orria bera izango da.


    Marko bakoitzak bere orrialdea edukiko du. Horretarako, markoen web orri bat prestatu eta marko
bakoitzean orrialde bat jarriko dugu.


          1. Markoaren web orri berri bat irekitzeko, Dreamweaver irekitzean ateratzen zaigun leihoan,
              erdiko panelean, Más sakatu eta morroia agertzen da. Hor, Conjunto de marcos aukeratu eta
              aldameneko leihoan hainbat itxuratako markoak agertzen dira, bat aukeratzeko. Hiru leihoe-
              tako bat aukeratuko dugu.



                                                                        LANBIDE EKIMENA              31
Informatika Aplikazioen Garapena




                                          3.8. irudia.



Crear sakatuta, aukeratu dugun moduan agertuko zaigu orria.




                                          3.9. irudia.




                                                              LANBIDE EKIMENA   32
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




   Eskuineko panelean web orri horretako diseinua agertuko da. Azaltzen ez bada, sakatu Ventanas/Marcos
menu nagusietako barran.


       2. Pantailan hiru leiho azalduko dira. Leiho bakoitzean web orri batek azaldu behar du. Horre-
           tarako, eskuineko panelean marko bat hautatuta, propietateen panelean dagoen Origen
           leihoan, marko horretan agertzea nahi dugun orriaren izena idatzi behar dugu. Kasu
           honetan, ezkerreko lehenengo markoan Adib2.htm jarriko dugu. Bigarren markoan, goian
           dagoenean, Adib1.htm idatziko dugu, eta hirugarren markoan, Adib4.htm.




                                              3.10. irudia.



       3. Ikusten denez, marko bakoitzean web orri bat ateratzen da, eta nahi dugun moduan mugi
           gaitezke horietako web orri bakoitzean. Horretarako, propietateen paneleko Desplaz. eremuan
           aukera hauek ditugu: No, Si, Automático edo Predeterminado. Automático aukeratuko dugu
           kasu guztietan, eta horrela, programak berak aterako ditu korritze-barrak behar duen
           bakoitzean.


       4. Propietateen panelean beste aukera batzuk ditugu tamaina, kolorea eta abar aldatzeko, eta
           ertzak jartzeko edo ez.


   Nabigatzailean probatuko dugu.




                                                                  LANBIDE EKIMENA                33
Informatika Aplikazioen Garapena




    Markodun web orria lehena izatea da aukera erabilgarriena. Beraz, aurkezpeneko web orria izaten da,
eta hortik beste web orrietara sar gaitezke, informazioa jasotzera.


    3.3    Estilo orriak


    Web orri baten orrialdeek itxura berdina izatea nahi badugu edo web orrien osagaiei itxura berezi bat
eman nahi badiegu, Dreamweaverrek tresna bat eskaintzen digu: estilo-orriak. Estilo-orrien multzo bat
dauka programak, aukeratzeko.


            1. Dreamweaver irekitzean, morroian Hojas de estilos CSS sakatu behar dugu eskuineko
                hirugarren panelean.




                                                 3.11. irudia.




            2. Leiho horretan zenbait aukera ditugu, eta bat aukeratuko dugu, Diseño completo: Acce-
                sible. Hori aukeratuta, leihoan bertan orria aterako zaigu, baina orria Código moduan
                ikusiko dugu hasieran.




                                                                      LANBIDE EKIMENA              34
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




                                   3.12. irudia.


3. Estilo-orria hasieran ikasi genuen bezala gorde behar dugu, baina beti .css formatuan.
    Gure adibidean, Estilo-orria.css jarriko diogu.

4. Orain, dauzkagun web orriak estilo-orri horrekin lotuko ditugu, guztiek diseinu bera eduki
    dezaten.
    Web orria irekiko dugu, eta barruan gaudenean, eskuineko panelean Diseinu leihoa ireki
    eta gero, behean agertzen diren botoietan Adjuntar hoja de estilos sakatuko dugu.




                                   3.13. irudia.




                                                        LANBIDE EKIMENA                 35
Informatika Aplikazioen Garapena




5. Leiho bat aterako da, lotuko dugun estilo-orriaren izena jartzeko; egin dugun orria ida-
   tziko dugu, Vincular hartuko dugu, dagoen moduan.




                                  3.14. irudia.


6. Web orriaren itxura zeharo aldatuko da.




                                  3.15. irudia.




                                                       LANBIDE EKIMENA               36
Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea




    Dreamweaverren estilo-orrien artean aukeratu daiteke, edo guk geuk ere egin ditzakegu.


    3.4   Interneten argitaratzea


    Web orria bukatuta, Interneten argitaratu beharko genuke, baina sarean zintzilikatzeko zerbitzari bat
behar dugu.


    Zerbitzaria dugunean, Dreamweaverren urruneko gunea sortu behar dugu, eta konexio baten bidez
gure web orria Interneten ikusiko da.




                                                                    LANBIDE EKIMENA                37
LANBIDE
EKIMENA

More Related Content

Featured

Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 

Featured (20)

Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 

Pdf Dreamweaver Mx2004

  • 1. Dreamweaver MX 2004 LANBIDE EKIMENA
  • 2. L ANBIDE E KIMENA LANBIDE EKIMENA Proiektuaren bultzatzaileak Laguntzaileak Hizkuntz koordinazioa
  • 3. Egilea(k): ARGARATE AYASTUY Elena Zuzenketak: Elhuyar Hizkuntz zerbitzuak Maketa: Itziar Etxabe Azalaren diseinua: Naiara Beasain 2006an prestatua
  • 4. Dreamweaver MX 2004 Aurkibidea 1 SARRERA............................................................................................................................................ 2 2 OINARRIZKO ELEMENTUAK ............................................................................................................. 3 2.1 Dreamweaver MX ingurunea ..................................................................................................... 3 2.2 Webgunea sortzea .................................................................................................................... 4 2.3 Web orria sortzea ...................................................................................................................... 7 2.4 Web orriaren atzeko planoa .................................................................................................... 12 2.5 Web orriaren testua ................................................................................................................. 13 2.6 Irudiak ...................................................................................................................................... 15 2.7 Web orri berria ......................................................................................................................... 18 2.8 Estekak .................................................................................................................................... 20 2.9 Inprimakiak .............................................................................................................................. 22 3 DISEINUA .......................................................................................................................................... 28 3.1 Taulak ...................................................................................................................................... 28 3.2 Markoak ................................................................................................................................... 32 3.3 Estilo orriak .............................................................................................................................. 35 3.4 Interneten argitaratzea ............................................................................................................ 38 LANBIDE EKIMENA I
  • 5. OINARRIZKO DREAMWEAVER MX 2004 LANBIDE EKIMENA 1
  • 6. Informatika Aplikazioen Garapena 1 SARRERA Macromedia Dreamweaverrek web orriak egiteko sistema eskaintzen du. Macromedia Dreamweaver MX webgune, web orri eta web aplikazioak diseinatzeko, kodifikatzeko eta garatzeko HTML lengoaia profesionaleko editorea da. Macromedia Dreamweaver MXk tresna baliagarriak ditu eskuz HTML kodea kontrolatzeko eta ikus- edizioa ingurunean erabiltzeko. Liburu honetan, sortu eta diseinatzen ikasiko dugu. Guk oinarrizko elementuak erabiliko ditugu; izan ere, Dreamweaver oso sistema zabala da, eta, guztia erabiltzeko, oinarrizko elementuak landu behar dira lehenengo. LANBIDE EKIMENA 2
  • 7. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 2 OINARRIZKO ELEMENTUAK Dreamweaver MXren oinarrizko elementuek, hots, leihoek, barrek, panelek eta abar, web orriak egi- teko behar den guztia eskaintzen digute. 2.1 Dreamweaver MX ingurunea Dreamweaver irekitzean, irudi hau agertuko da lehenengo: 2.1. irudia. Diseñador aukeratuko dugu. Codificador aukera web orriak HTML kodean erabiltzeko da. Aceptar botoian klik egin eta gero, honako leiho hau agertuko da: 2.2. irudia. LANBIDE EKIMENA 3
  • 8. Informatika Aplikazioen Garapena 1. Web orria. Menu nagusiaren barratik hartutako zenbait elementu aukeratuz web orria sortuko den lekua da. 2. Propietateak. Lan-eremuan sartuko diren elementuak aldatzeko tresnak. 3. Menu nagusiaren eta dokumentuaren tresna-barra. Web orriak betetzeko behar diren elementuen menua: botoiak, irudiak, taulak eta abar. 4. Panelak. Web orria edo haren edukia aldatzeko utilitateak ditu. Panel bakoitzak bere es- pezialitatea du. 2.2 Webgunea sortzea Hasi baino lehen, web orria egiteko, webgune bat sortu behar da. Webgunea fitxategiak eta karpetak gordetzen diren tokia da. 1. Erdiko panelean, sakatu Sitio de Dreamweaver. 2. Laguntzaile bat agertuko da. Hor, lekuaren izena idatzi behar da. 3. Adibidea1 idatziko dugu, eta Siguiente sakatu. 2.3. irudia. 4. Laguntzaileak galdetuko du zerbitzariko teknologia bat erabiliko duen ala ez. LANBIDE EKIMENA 4
  • 9. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 2.4. irudia. Ezetz aukeratuko dugu, liburu honetan ez baitugu erabiliko. 5. Dreamweaverrek galdetuko du fitxategiak zein modutan erabiliko ditugun. Web orriak ordenagailuaren karpeta batean sortuko ditugu, bukatzean zerbitzari batean jartzeko. Beherago, fitxategiak zein karpetatan jarriko ditugun galdetuko du, eta gure karpetarako bidea jarriko dugu. C unitatean karpeta bat sortuko dugu Dreamweaver Ikastaroa izenarekin, eta hor web orriko fitxategi guztiak gordeko dira. 2.5. irudia. LANBIDE EKIMENA 5
  • 10. Informatika Aplikazioen Garapena 6. Hurrengo leihoan, zerbitzariaren konexio mota aukeratu behar da. Orain Ninguno jarriko dugu, hurrengo kapituluan aztertuko dugu eta. 2.6. irudia. 7. Webgunea sortuta dago. Dreamweaverrek, azken leiho batean, sortutako webgunearen laburpena erakusten digu. Webguneari Adibidea 1 izena eman diogu, eta gure fitxategi guztiak C:Dreamweaver IkastaroaAdibidea 1 karpetan sartuko dira. 2.7. irudia. 8. Eta, bukatzeko, egin klik Completado botoian. LANBIDE EKIMENA 6
  • 11. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 2.3 Web orria sortzea Webgunea sortu eta gero, web orria sortzen hasiko gara. 1. Crear nuevo agertzen den panelean, aukeratu HTML eta sakatu. Leiho hau agertu ezik, menu nagusiaren barran Archivo | Nuevo | Página Básica aukeratu. 2.8. irudia. 2. Web orria hutsik agertuko da. Hau da Dreamweaver MXren lan-eremua: 2.9. irudia. LANBIDE EKIMENA 7
  • 12. Informatika Aplikazioen Garapena 1. Titulu-barra. programaren izena dago. 2. Menu nagusiaren barra. Programaren aukera nagusiak dituen menua du. 3. Dokumentuaren tresna-barra. Web orriak betetzeko behar diren elementuen menua: botoiak, irudiak, taulak eta abar. 4. Lan-eremua. Web orria diseinatuko dugun webgunea. 5. Propietateak. Lan-eremuan sartuko diren elementuak aldatzeko tresnak. 6. Panelak. web orria edo haren edukia aldatzeko utilitateak ditu. Panel bakoitzak bere espe- zialitatea du. Eskuinaldean, Archivos panelean, webgunea sortu dugunean webguneari eman diogun izena eta bidea ikus ditzakegu. Ez dugunez egin web orririk, oraindik hutsik dago. Oso komenigarria da web orria sortu baino lehen gordetzea, zintzilikatzeko beldurra izango dugu beti eta. 1. Gorde baino lehen, web orrian zerbait edukitzeko, lerro bat idatziko dugu. Eta Título jartzen duen tokian, web orriari emango diogun izena idatziko dugu. Ariketa honetan Weborria 1 jarriko dugu. 2.10. irudia. LANBIDE EKIMENA 8
  • 13. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 2. Web orria gordetzeko, menu nagusiaren barran Archivo| Guardar como sakatu behar da. 3. Web orria Adib1.htm izenarekin gordeko dugu. 2.11. irudia. Guardar sakatu behar dugu. 2.12. irudia. LANBIDE EKIMENA 9
  • 14. Informatika Aplikazioen Garapena Web orriaren izenak eskuineko panelean azaldu behar du. 2.13. irudia. Agertzen ez bada, sakatu F5 edo Actualizar . Panel horretan web orriko fitxategi guztiak ikus ditzakegu. Web orriaren lan-eremuan hainbat aukera daude, besteak beste: Código: HTML kodea ikusiko dugu. Diseño: web orria zatituta ikusten da, hau da, leihoaren erdi batean HTML kodea ikusiko dugu, eta beste erdian, diseinua. Diseño: Web orria diseinuan ikusten da. Web orria nabigatzaile batean ikusteko, menu nagusiaren barran aukeratu Archivo|Vista previa en el navegador|iexplore edo Vista previa en iexplore eta sakatu. Nabigatzaileen bateraezintasuna dela eta, web orriak ikusteko, Dreamweaverren zerrendan gehitzea komeni da: LANBIDE EKIMENA 10
  • 15. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea Menu nagusiaren barran, sakatu Archivo|Vista previa en el navegador|Editar lista de navegadores, eta Preferencias elkarrizketa-koadroan jarriko den nabigatzaile berriaren izena eta webgunea idatzi behar dira. 2.14. irudia. 2.15. irudia. LANBIDE EKIMENA 11
  • 16. Informatika Aplikazioen Garapena Horretarako, sakatu + eta, agertuko den leihoan, nabigatzailearen izena eta non dagoen jarri behar dira. 2.16. irudia. 2.4 Web orriaren atzeko planoa Web orri berria sortzen denean, atzeko planoko kolorea beti izaten da zuria. Kolorea aldatu edo irudia sartu nahi badugu, pauso hauek jarraitu behar dira: 1. Irekita dagoen web orrian (Adib1.htm), menu nagusiaren barran, aukeratu Modificar |Propiedades de la página. 2.17. irudia. LANBIDE EKIMENA 12
  • 17. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 2. Leiho horretan, sakatu Color de Fondo, agertuko den kolore-paletan kolore bat aukeratu, eta sakatu Aceptar. Kolore baten ordez irudia aukeratu nahi izanez gero, Imagen de Fondo agertzen den lekuan sakatu Examinar,eta ateratzen den leihoan irudiaren izena eta bidea aurkitu behar dira. Dreamweaverrek galdetzen duenean irudiaren kopia bat egin eta web orriaren karpetan gorde nahi dugun, baietz erantzungo diogu, komeni delako web orriaren fitxategiak, zerbi- tzari bati aldatzean, webgune berean egotea. 2.5 Web orriaren testua Edozein testu-prozesadoretan aurki ditzakegun aukerak ditugu Dreamweaverren testua sartzeko. Testuaren lekua, letra-tipoa, tamaina, kolorea eta abar alda daitezke. Dreamweaverren interfazean testua zuzenean sartzean, paragrafo bihurtzen da. Irekita daukagun web orria betetzen hasiko gara. Testu bat sartuko dugu. 2.18. irudia. Web orria nabigatzailean nola ikusten den jakiteko, ikonoan klik egingo diogu. Leihoaren ta- maina aldatzean testuaren lerroak ere tamaina aldatu duela konturatuko gara. LANBIDE EKIMENA 13
  • 18. Informatika Aplikazioen Garapena 2.19. irudia. Propietateen panelean, paragrafoan aldatu nahi dugun guztia aldatzeko tresnak daude. Letra-tipoak, tamaina, kolorea, letra lodia, etzana eta abar aukera ditzakegu paragrafoa idazteko. Eta paragrafoa non jarri ere aukera daiteke: erdian, eskuinean edo ezkerrean. Hor agertzen diren bi botoiak zerrendak egiteko dira. Honako hauek dira: 1. Ordenarik gabeko zerrendak. Zerrendako elementu bakoitzaren aurrean biribiltxo bat ager- tuko da, eta aldatu egin daiteke. 2. Zerrenda ordenatuak. Zerrendako elementu bakoitzak zenbaki bat edukiko du aurrean. 2.20. irudia. LANBIDE EKIMENA 14
  • 19. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 2.6 Irudiak Web orrian irudiak sartzeko: 1. Dokumentuaren tresna-barran, sakatu Imágenes. 2.21. irudia. 2. Irekiko den leihoan bilatu, eta irudi bat aukeratu behar dugu. Irudi horren kopia bat egingo dugu gure fitxategian jartzeko. 2.22. irudia. LANBIDE EKIMENA 15
  • 20. Informatika Aplikazioen Garapena 3. Sartu dugun irudia aldatu egin daiteke propietateen panelean, eta tamaina, lekua eta abar alda dakizkioke. 4. Testuak eta irudiak batera erabiltzeko, Dreamweaverrek irudiak eta testuak lerrokatzeko tresnak eskaintzen dizkigu. Irudian sakatuta, propietateen panelean irudiak aldatzeko tresnak agertzen dira. 2.23. irudia. 5. Irudiaren ondoan testua jarriko dugu. 2.24. irudia. LANBIDE EKIMENA 16
  • 21. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea Propietateen panelean Alinear sakatu eta irekitzen den leihoan, honako aukera hauek es- kainiko zaizkigu: Medio eta Medio absoluto: irudiaren erdiko puntua testuaren oinarriarekin lerrokatzen du. Superior eta Superior absoluto: testuaren eta irudiaren goi-puntuak lerrokatzen ditu. Inferior eta Inferior absoluto: testuaren eta irudiaren behe-puntuak lerrokatzen ditu. Derecha: irudia testuaren eskuinean kokatzen du. Izquierda: irudia testuaren ezkerrean jartzen du. 6. Web orria gordeko dugu. 2.7 Web orri berria Orain arte ikasitako tresnekin, beste web orri berri bat egingo dugu. Archivo|Nuevo sakatu, eta Página Básica aukeratu behar dugu. Gero, Crear botoian klik egin eta web orri berri bat azalduko zaigu betetzeko. 2.25. irudia. LANBIDE EKIMENA 17
  • 22. Informatika Aplikazioen Garapena Título agertzen den lekuan, Web orria 2 idatziko dugu. Eta betetzen hasi baino lehen, hasieran esan dugun moduan, web orria gordeko dugu. Web orri horri Adib2.htm izena jarriko diogu. 2.26. irudia. Web orri horretan, osagai batzuk sartuko ditugu, eta irudiak, testua eta atzeko planoa ere aldatuko ditugu. 2.27. irudia. LANBIDE EKIMENA 18
  • 23. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 2.8 Estekak Web orria fitxategi multzo bat da, hasieran esan dugun moduan, html hizkuntzan idatzia. Web orriko orrialde batetik beste orrialdeetara pasatzeko, tresna bat dugu, hots, estekak. Hori hipertestua da. Esteka bat testuaren edo irudiaren zati bat da. Horrelako estekaren bat aukeratuz gero, beste webgune bateko web orri edo dokumentu batera edo webgune bereko beste dokumentu batera eramango gaitu. Nahiz eta web orrian estekak modu batean ikusi, nabigatzailean beste modu batean ikusten dira. Testua azpimarratua eta beste kolore batean azalduko da, eta irudiek koloretako ertza izango dute. Bi esteka mota daude: 1. Helbide erlatiboak: webgune bateko dokumentuaren posizio batera joateko. 2. Helbide absolutuak: beste webgune bateko dokumentu edo web orri batera joateko. Helbide erlatiboak Gure dokumentuko posizio batera joateko balio dute. Adib1.htm web orrian esteka jarriko dugu, Adib2.htm web orrira joateko: 1. Hautatu astronomia hitza. 2.28. irudia. LANBIDE EKIMENA 19
  • 24. Informatika Aplikazioen Garapena 2. Egin klik propietateen eskuinean dagoen botoian eta sagua sakatuz, arrastatu fitxategien paneleko Adib2.htm fitxategiraino. 2.29. irudia. 3. Saguaren botoia askatzen dugunean, Astronomia hitza esteka izango da. 2.30. irudia. LANBIDE EKIMENA 20
  • 25. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 4. Web orria gordeko dugu, eta nabigatzailean probatuko dugu. Helbide absolutuak Beste webgune bateko dokumentu edo web orri batera joateko erabiliko ditugu. Kasu honetan, irudia erabiliko dugu esteka jartzeko. Esteka irudi baten barnean: 1. Hautatu Adib1.htm web orrian daukagun irudia. 2.31. irudia. 2. Propietateetan, Vínculo agertzen den leihoan, web orri baten helbidea idatziko dugu; ariketa honetan, hau izango da: http://www.zientzia.net. Estekak, irudiaren gainean sakatzen dugunean saguarekin, lehen esandako helbidera eramango gaitu. 2.9 Inprimakiak Gure web orriaren bisitari baten informazioa jaso nahi badugu, web orrian inprimaki bat jarrita lortuko dugu informazio hori. LANBIDE EKIMENA 21
  • 26. Informatika Aplikazioen Garapena Hauek dira inprimaki baten elementuak: 1. Testu-kaxak. Testua sartzeko erabiltzen dira, eta hiru mota daude. 2. Aukerak. Erabiltzaileak hainbat aukeren artean hautatzeko dira. 3. Kontrol-laukiak. Zerbait baieztatzeko edo ezeztatzeko balio dute. 4. Inprimaki-botoiak. Inprimakia bidaltzeko eta sartutako datuak garbitzeko dira. Inprimakia sortzea Adib3.htm izeneko web orri bat sortuko dugu. Web orri horretan, testua eta irudia sartu eta gero, inprimakia jarriko dugu: 1. Dokumentuaren tresna-barran, sakatu Común eta aukeratu Formulario. 2.32. irudia. 2. Tresna-barra aldatu egingo da, eta Inprimakien tresna-barra azalduko da. LANBIDE EKIMENA 22
  • 27. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 2.33. irudia. 3. Inprimakien tresna-barrako lehenengo irudia sakatuko dugu. 2.34. irudia. 4. Web orrian kaxa bat agertuko da, hots, inprimakia. Horren barruan inprimakiaren elementuak sartuko ditugu. 2.35. irudia. 5. Lehenengo, testu-kaxa sartuko dugu. Horretarako, inprimakian kurtsorea sartuta, tresna-barran Campo de Texto botoia sakatuko dugu. 2.36. irudia. Inprimakian testu-kaxa bat agertuko da. 2.37. irudia. LANBIDE EKIMENA 23
  • 28. Informatika Aplikazioen Garapena 6. Eremutik kanpo klik egin, eta Sartu tekla sakatu beste lerro bat sortzeko. 2.38. irudia. 7. Beste testu-kaxa bat sartuko dugu. 2.39. irudia. 8. Lehen egin dugun moduan, beste lerro bat sortuko dugu bi aukera-botoi sartzeko. Hori egiteko, tresna-barran sakatu bi aldiz Botón de opción. 2.40. irudia. 9. Beste lerro bat sortu eta tresna-barran Lista/Menu aukeratu, eta Zerrenda eremua in- primakian sartuko dugu: 2.41. irudia. LANBIDE EKIMENA 24
  • 29. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 10. Bukatzeko, inprimakia bidaltzeko eta inprimaki-eremuak garbitzeko behar ditugun inprimaki-botoiak sartuko ditugu. Lerro bat sortu eta gero, tresna-barran Botón bi aldiz sakatu eta inprimakian bi botoiak agertuko dira. Lehenespenez, Enviar hitzarekin azaltzen dira, baina propietateen panelean, Etiqueta jartzen duen lekuan, nahi duguna jar dezakegu. Inprimakietan, Bidali eta Garbitu idaz- ten dira gehien. 2.42. irudia. 11. Inprimakiaren beharrezko elementu guztiak sartuta daude. Baina ulergarriagoa egi- teko, eremu bakoitzaren ondoan testua jarriko dugu. 2.43. irudia. Eremuen propietateak Orain, inprimakiaren elementu bakoitzari bere propietateak jarriko dizkiogu. LANBIDE EKIMENA 25
  • 30. Informatika Aplikazioen Garapena 1. Web orriaren beheko aldean, ezkerretan, <form> sakatu, eta propietateen panela aldatu egiten da. 2. Acción dagoen lekuan, informazioa nora bidali jarriko dugu. 3. Método jartzen duen lekuan, POST idatzi behar da. 4. Lehenengo, testu-kaxa sakatu, eta propietateetan Campo de texto dagoen lekuan, idatzi Izena; eta Ancho car jartzen duen lekuan, jarri 20. 5. Bigarren testu-kaxako propietateen panelean lehen aldatu ditugun eremuetan, idatzi Abizenak eta 80 . 6. Lehenengo, sakatu aukera-botoia; Valor activado dagoen lekuan idatzi Gizona, eta bigarren botoian idatzi Emakumea. 7. Egin klik zerrenda-eremuan, eta Valores de lista dagoen lekuan, urte batzuk jarriko ditugu, bisitariak aukeratzeko izan ditzan. Ariketa honetan, adibidez, 1960-1970, 1971-1980, 1981-1990 jarriko ditugu. 2.44. irudia. 8. Azkenean, botoiak aldatuko ditugu. Lehenengoa eginda dago; bigarrena aldatzeko, sakatu eta Restablecer formulario aukeratu. 9. Hasieran esan dugun moduan, inprimakiek bisitariari buruzko informazioa jasotzeko balio dute. Horretarako, posta elektronikoko helbidea inprimakian jarri behar dugu. Hautatu inprimakia, eta tresna-barran sakatu Campo Oculto. Propietateen panelean, Campo Oculto dagoen lekuan, idatzi jasotzailea, eta Valor jartzen duenean, posta elektronikoko helbidea. 2.45. irudia. 10. Web orria gorde eta gero, Nabigatzailean probatuko dugu. LANBIDE EKIMENA 26
  • 31. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 3 DISEINUA Web orria antolatzeko zenbait metodo daude. Web orrian sartu behar dugun informazioaren arabera, nabigatzean modu azkar eta erabilgarrienean ibiltzeko, lan-eremua ordenatu behar dugu. Horretarako, bi tresna dauzkagu gure informazioa sartzeko: taulak eta markoak. 3.1 Taulak Informazioa ordenatzeko modu erabilgarrienetako bat da taula. Lerroak, zutabeak eta gelaxkak dituzte nahi ditugun elementu guztiak sartzeko, eta den-dena ordenatuta azalduko da. Sortzen ari garen dokumentuan beste web orri bat egingo dugu. Adib3.htm irekiko dugu taula bat sartzeko. 1. Tresna-barran Tabla aukeratu, eta laguntzaile bat aterako zaigu. 3.1. irudia. LANBIDE EKIMENA 27
  • 32. Informatika Aplikazioen Garapena 2. Morroian taularen tamaina zehaztu behar da. Hor agertzen diren propietateak taula sartuta eta hautatua ere agertzen dira. Bietan 3 idatziko dugu, eta, horrela, taulak 3 lerro eta 3 zutabe izango ditu. 3.2. irudia. 3. Hona hemen propietateen paneleko atributu batzuk: Rell. Celda: gelaxkaren ertzaren eta barrukoaren arteko pixel kopurua zehazten du. Esp. Celda: gelaxken arteko pixel kopurua zehazten du. Col. Fondo: barruko kolorea aukeratzeko. Col. Borde: ertzeko kolorea aukeratzeko. Alinear: taula non jarri aukeratzeko. Borde: gelaxken ertzaren lodiera zehazten du. Lehenetsia 1 da, baina aldatu egin daiteke. 4. Bigarren lerroko lehenengo gelaxkan irudia sartuko dugu, eta bigarrenean, testua. Hirugarren lerroko lehenengo gelaxkan beste irudi bat sartuko dugu, eta bigarrenean, beste testu bat. LANBIDE EKIMENA 28
  • 33. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 3.3. irudia. 5. Orain hirugarren zutabea hautatuko dugu. Menu nagusiaren barratik aukeratu Modificar, eta sakatu Tabla Eliminar columna. 3.4. irudia. LANBIDE EKIMENA 29
  • 34. Informatika Aplikazioen Garapena 6. Horrela, hirugarren zutabea kenduko dugu. Ikusten denez, menu horretan hainbat aukera dago taulak aldatzeko. 7. Orain, lehenengo lerroa hautatuko dugu. Propietateen panelean, beheko botoien artean bi botoi daude Fila agertzen den lekuan; bata lerro bereko gelaxkak elkartzeko eta bestea gelaxka batean bi gelaxka edo gehiago egiteko. 3.5. irudia. Gelaxkak elkartzeko botoia sakatu, eta lehenengo lerroan gelaxka bakarra geratuko zaigu. 8. Honela geratuko da: 3.6. irudia. LANBIDE EKIMENA 30
  • 35. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 9. Orain, lehenengo lerroan izenburua jarriko dugu, eta taula web orriaren erdian jarriko dugu. 3.7. irudia. Horretarako, lehenengo gelaxkan testua sartu dugu, eta propietateetan, erdian jartzeko botoia sakatu dugu. Taularen propietateetan, Alinear jartzen duen lekuan, Centro aukeratu dugu. Panelean edozein gauza alda dezakegu, besteak beste, ertza, kolorea, eta tamaina. Nabigatzailean probatuko dugu. 3.2 Markoak Markoek hainbat eremutan zatitzen dute web orria. Markoak dituen web orria irekitzean, nabiga- tzailean leiho batzuk ikusiko ditugu, baina web orria bera izango da. Marko bakoitzak bere orrialdea edukiko du. Horretarako, markoen web orri bat prestatu eta marko bakoitzean orrialde bat jarriko dugu. 1. Markoaren web orri berri bat irekitzeko, Dreamweaver irekitzean ateratzen zaigun leihoan, erdiko panelean, Más sakatu eta morroia agertzen da. Hor, Conjunto de marcos aukeratu eta aldameneko leihoan hainbat itxuratako markoak agertzen dira, bat aukeratzeko. Hiru leihoe- tako bat aukeratuko dugu. LANBIDE EKIMENA 31
  • 36. Informatika Aplikazioen Garapena 3.8. irudia. Crear sakatuta, aukeratu dugun moduan agertuko zaigu orria. 3.9. irudia. LANBIDE EKIMENA 32
  • 37. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea Eskuineko panelean web orri horretako diseinua agertuko da. Azaltzen ez bada, sakatu Ventanas/Marcos menu nagusietako barran. 2. Pantailan hiru leiho azalduko dira. Leiho bakoitzean web orri batek azaldu behar du. Horre- tarako, eskuineko panelean marko bat hautatuta, propietateen panelean dagoen Origen leihoan, marko horretan agertzea nahi dugun orriaren izena idatzi behar dugu. Kasu honetan, ezkerreko lehenengo markoan Adib2.htm jarriko dugu. Bigarren markoan, goian dagoenean, Adib1.htm idatziko dugu, eta hirugarren markoan, Adib4.htm. 3.10. irudia. 3. Ikusten denez, marko bakoitzean web orri bat ateratzen da, eta nahi dugun moduan mugi gaitezke horietako web orri bakoitzean. Horretarako, propietateen paneleko Desplaz. eremuan aukera hauek ditugu: No, Si, Automático edo Predeterminado. Automático aukeratuko dugu kasu guztietan, eta horrela, programak berak aterako ditu korritze-barrak behar duen bakoitzean. 4. Propietateen panelean beste aukera batzuk ditugu tamaina, kolorea eta abar aldatzeko, eta ertzak jartzeko edo ez. Nabigatzailean probatuko dugu. LANBIDE EKIMENA 33
  • 38. Informatika Aplikazioen Garapena Markodun web orria lehena izatea da aukera erabilgarriena. Beraz, aurkezpeneko web orria izaten da, eta hortik beste web orrietara sar gaitezke, informazioa jasotzera. 3.3 Estilo orriak Web orri baten orrialdeek itxura berdina izatea nahi badugu edo web orrien osagaiei itxura berezi bat eman nahi badiegu, Dreamweaverrek tresna bat eskaintzen digu: estilo-orriak. Estilo-orrien multzo bat dauka programak, aukeratzeko. 1. Dreamweaver irekitzean, morroian Hojas de estilos CSS sakatu behar dugu eskuineko hirugarren panelean. 3.11. irudia. 2. Leiho horretan zenbait aukera ditugu, eta bat aukeratuko dugu, Diseño completo: Acce- sible. Hori aukeratuta, leihoan bertan orria aterako zaigu, baina orria Código moduan ikusiko dugu hasieran. LANBIDE EKIMENA 34
  • 39. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea 3.12. irudia. 3. Estilo-orria hasieran ikasi genuen bezala gorde behar dugu, baina beti .css formatuan. Gure adibidean, Estilo-orria.css jarriko diogu. 4. Orain, dauzkagun web orriak estilo-orri horrekin lotuko ditugu, guztiek diseinu bera eduki dezaten. Web orria irekiko dugu, eta barruan gaudenean, eskuineko panelean Diseinu leihoa ireki eta gero, behean agertzen diren botoietan Adjuntar hoja de estilos sakatuko dugu. 3.13. irudia. LANBIDE EKIMENA 35
  • 40. Informatika Aplikazioen Garapena 5. Leiho bat aterako da, lotuko dugun estilo-orriaren izena jartzeko; egin dugun orria ida- tziko dugu, Vincular hartuko dugu, dagoen moduan. 3.14. irudia. 6. Web orriaren itxura zeharo aldatuko da. 3.15. irudia. LANBIDE EKIMENA 36
  • 41. Ingurune Grafikoetako Aurkezpen Zerbitzuen Diseinua eta Gauzatzea Dreamweaverren estilo-orrien artean aukeratu daiteke, edo guk geuk ere egin ditzakegu. 3.4 Interneten argitaratzea Web orria bukatuta, Interneten argitaratu beharko genuke, baina sarean zintzilikatzeko zerbitzari bat behar dugu. Zerbitzaria dugunean, Dreamweaverren urruneko gunea sortu behar dugu, eta konexio baten bidez gure web orria Interneten ikusiko da. LANBIDE EKIMENA 37