Kompozer (nvu)

6,328 views

Published on

Manual d'iniciació al Kompozer (anteriorment NVU) per alumnes d'Informàtica de 4t d'ESO i 1r de Batxillerat.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
6,328
On SlideShare
0
From Embeds
0
Number of Embeds
5,231
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Kompozer (nvu)

  1. 1. Toni Nicolau; 1er Batxillerat
  2. 2. Aquesta és la finestra que sobserva al obrir el programa Nvu(Kompozer en el nostre cas). Saconsella clicar els diferentsbotons per ordre denumeració. En ells sobté informació de lesopcions més importants i habituals del programa.
  3. 3. Com qualsevol altre programa, amb els menús Fitxer, Edita, Visualitza,Insereix, Format, Taula, Eines i Ajuda podem accedir a totes les opcionsdel programa. Només cal fer un clic a sobre per a desplegar les finestresde submenús. Obtindrem el mateix resultat si pitgem la tecla Alt i la teclacorresponent a la lletra subratllada. Aquesta barra no es pot suprimir niamagar.
  4. 4. Són una sèrie dicones que ens permeten realitzar lesoperacions més habituals del programa, com ara crear unanova pàgina, obrir un fitxer, desar-ho, o bé inserir elementstípics duna pàgina web: una imatge, un enllaç, una taula,etc. Ho podem considerar com una manera daccedir aaquestes funcions més ràpidament.
  5. 5. A la línia superior hi trobem les icones i botons que enspermeten accedir a les opcions més bàsiques per a donar formata un text, i que són similar a les de qualsevol processador detext. A la línia inferior hi ha botons de format més especifics delllenguatge HTML com els relacionats amb els estils i les capes.
  6. 6. Aquesta és la finestra més important, perquè és allà on es va editant i dissenyant la nostraweb. És possible tenir més duna feina oberta al mateix temps i cadascuna delles estaràrepresentada per una pestanya a la part superior. La imatge mostra una única pàginaactiva que seria lanomenada "sense títol" (esquerra).Quan tinguéssim més duna pàgina activa, alternaríem entre elles fent clic a la pestanyacorresponent de cadascuna.A la part inferior de làrea dedició hi ha la barra del mode dedició. Són quatre pestanyesamb les que podrem canviar la manera de treballar dins la finestra de làrea dedició.Normal o mode WYSIWYG (what you see is what you get): recordeu que significa que elque es veu ja és laspecte final.Marcadors HTML: és una visualització esquemàtica dels marcadors o etiquetes utilitzades.Codi font HTML: accedim al codi font de la pàgina, amb el veritable llenguatge HTML.
  7. 7. Aquesta finestra està situada a lesquerra i serveix per a ladministraciódels llocs. Com que lNvu està pensat per poder fer feina en línia, és a dirconnectats amb el nostre servidor dInternet, encara que això no implicaque les seves prestacions siguin menors quan fem feina en local, perdefecte apareix aquesta finestra que ens permet gestionar tots elsnostres llocs web.Nosaltres farem feina en local, també ens servirà per poder tenirestructurat i a la vista el directori que estem creant.
  8. 8. El primer que hem de fer és crear, al directori H:/, la carpeta onanirem col·locant tota la nostra feina. Anomeneu-la web delcentre, la meva web, mi web, o així com vulgueu. Dins daquestacarpeta crearem almenys dues subcarpetes més, una que podemanomenar imatges i un altra anomenada pagines (sense accent!).També en crearem una altra per als documents que es puguin ferservir.
  9. 9. Per a un correcte funcionament del programa, i abans decomençar a fer lactivitat 1, és del tot convenient anar al panell depreferències, que sobri amb el menú Eines > Preferències... Dinslapartat "General", sha de deixar DESMARCADA la casellaUtilitza estils CSS en comptes delements HTML i atributs, talcom es mostra a la imatge.
  10. 10. Al clicar Edita llocs del Gestor de llocs web sobri aquesta finestra.Malgrat que lNvu està pensat per poder fer feina en línia, és a dir connectats amb unservidor dInternet, per ara només farem feina en local, és a dir, dins del nostre ordinador. Iper tant, ara només cal:-Escriure en el camp Nom del lloc web un text per identificar el lloc que crearem dins elprograma. És un text que mostrarà en la llista de llocs i quan calgui podrem seleccionar-hode manera ràpida. Per comoditat i coherència podem posar el mateix nom de la carpetacreada: web del centre.-Pitjar el botó Selecciona directori. Sobrirà una finestra anomenada Buscar carpeta queens permetrà navegar pel nostre ordinador. Hem de cercar i marcar de color blau, fent unclic a sobre, la carpeta web del centre que acabem de crear. Pitgem Aceptar i llavorsDacord, dins la finestra dels Paràmetres de publicació.
  11. 11. Creació de la primera pàgina web: anomenar i desar.Una vegada creat el nostre lloc web, fixeu-vos com encara hi ha un fullen blanc a la finestra de làrea dedició, i amb el text "(sense títol)" a lapestanya superiorAnem al menú Fitxer > Anomena i desa ... Sobrirà la finestra que es veua la imatge, a on escriurem el títol de la nostra pàgina. Per exemple:Benvinguts al nostre centre. En pitjar el botó Dacord, ens apareixeràuna finestra que demana:1. a on volem desar larxiu: hem de seleccionar la nostra carpeta arrelweb del centre.2. El nom de larxiu: Per defecte el programa posa el títol de la pàginacom a nom, és a dir, Benvinguts al nostre centre.htmlHEM DE TENIR MOLTA CURA DE CANVIAR-LI EL NOM, I ESCRIURE index.html(Recordeu la diferència entre el nom de larxiu i el títol de la pàgina!)
  12. 12. Preferències de la pàgina web (I): títol i propietatsPer definir el títol de la pàgina i altres propietats com ara lametainformació obrirem el menú Format > Títol de la pàgina i propietats...Sobrirà la finestra de la imatge on podem definir el títol (o canviarlexistent), lautor, una descripció de la nostra pàgina i altres opcions comlidioma, la direcció de lescriptura, el conjunt de caràcters i la informacióper a usuaris avançats que puguin fer servir codi HTML.
  13. 13. Preferències de la pàgina web (II): colorsPer definir els colors que utilitzarem per al text i del fons dela pàgina anirem a Format > Colors de la pàgina i del fons...Sobrirà la finestra que ens permetrà definir els colors perdefecte del text de la pàgina i del fons i, fins i tot, una imatgede fons.
  14. 14. Per què és important que la casella "La URL és relativa a la localització de la pàgina"estigui seleccionada?Perquè si guardem els enllaços de forma relativa, totes les referències a imatges o altresarxius queden registrats, de forma que es guarda la seva ubicació en el sistema decarpetes respecte a la posició de la pàgina que conté els enllaços. És indiferent que totalestructura de carpetes a què es fa referència es trobi guardada al disc C: o al D: o quees traslladi a un altre ordinador on el disc dur té un altre nom. El navegador semprepodrà localitzar els arxius (sempre que la referència es mantingui en la mateixa unitat dedisc). Això és molt important quan es publica una estructura de carpetes o directoris aInternet, o si volem que la nostra web es mostri correctament no només a lordinador onlhem creada, sinó en qualsevol altre.
  15. 15. Les imatges a una pàgina web poden tenir dues utilitzacions:Utilitzar-les com a fons de pàgina o bé inserir-les com ail·lustració de manera semblant a un processador de textos.És important tenir en compte que els estàndars de fitxersdimatges que admeten els navegadors web són els GIF, PNG iJPG.Per questions daccessibilitat és convenient introduir una paraulaa lopció text alternatiu. Per exemple: institut.
  16. 16. Els enllaços, també anomenats hiperenllaços, vincles o links (anglès) que hi ha ales pàgines web ens permeten "navegar" dins de lestructura daquests,simplement amb un clic de ratolí.Hi ha diferents tipus denllaços:Enllaços que ens permeten passar dun lloc a laltre de la mateixa pàgina. Són lesanomenades àncores.Enllaços que ens permeten anar duna pàgina a un altra pàgina web o arxiu-dins del mateix ordinador. Són els enllaços relatius.-o dun ordinador a un altre a través dInternet. Són els enllaços absoluts.Cal seleccionar lelement duna pàgina web (text, imatge, etc.) abans de clicar lapestanya

×