DISEÑO'DE'PÁGINAS'WEB'

Transcripción

1 Informática4ºESO B. KOMPOZER' DISEÑO'DE'PÁGINAS'WEB' Kompozer es un editor gráfico de HTML de tipo WYSIWIG What$You$See$Is$What$ You$Get$"loquevesesloqueobtienes")basadoenNvu. 1. INSTALACIÓN' Desde la web puedes descargar un instaladorounarchivo.zip. EnestecasohemosdescargadoelarchivozipparaWindowsenEspañol. Trasdescomprimirelarchivosoloesnecesarioejecutarelarchivokomposer.exe.De momentonoloejecutes. 2. CREAR'LA'ESTRUCTURA'DE'CARPETAS'' amos a crear un sitio web sobre El trabajo colaborativo CSCW) en el que se mostraráinformaciónbásicasobredistintasherramientascolaborativasasícomouna bienvenidaanuestrapágina.nuestrositiovaacontenerlassiguientespáginas: Comunicación.htm CSCW.htm Compartición.htm LoprimeroescrearunSITIOqueesunaestructuradecarpetasdondeseguardarán losarchivosquecomponenlapáginaweb. 1

2 Informática4ºESO Dentro de tu carpeta DiseñoWeb_<nombre> crea una carpeta de nombre WebCSCWenlaqueguardaremostodoslosarchivos.htmquecreemos. DentrodelacarpetaWebCSCWcreaotracarpetadenombreImagesenlaque guardaremos todas las imágenes de nuestra página web y otra carpeta de nombresoundsdondeguardaremoslamúsicaylosvídeos. IMPORTANTE: Los nombres de página imágenes y carpetas no pueden tener tildes ñ espacios puntos etc pueslosservidoresconfiguradosen inglésnoreconocenestoscaracteres. 3. ABRIR'EL'PROGRAMA' Como hemos dicho antes tan solo debes localizar el archivo kompozer.exe y ejecutarlo.seabriráunaventanacomolasiguiente: 4. CREAR'Y'GUARDAR'LA'PÁGINA'WEB' Trasabrirelprogramaycerrarelconsejo: Elprogramaseabreenundocumentonuevo.eaArchivo>Guardarcomo. Seabriráunaventanapidiendoeltítulodelapáginaweb:porejemploCSCW. Elige la carpeta de destino tu carpetaweb CSCW creada anteriormente y guardaconelnombrecscw.html. 2

3 Informática4ºESO EnlaventanaAdministradordesitios pulsaeliconoeditarsitios Selecciona la carpeta de tu sitio web Web CSCW y apareceráunaventanacon información sobre el sitio web. Sin modificar nada pulsa aceptar. Así aparecerán en el panel lateral las páginas y carpetasqueformannuestrositioweb. 5. COMPLETAR'LA'INFORMACIÓN'SOBRE'LA'PÁGINA' EnelmenúFormato! Título y propiedades de la página puedes comprobarel título de la página y modificarlo. Además puedes completar el nombre del Autor y unabrevedescripciónsobreeltemadelapáginaweb. 3

4 Informática4ºESO 6. DISEÑAR'LA'PÁGINA'WEB' Colorestipodeletrafondosetc quedanavuestraelección. Deportesimágenesvídeosymúsicatambiénsonlibres. Escribimos El trabajo colaborativo CSCW) como título y a continuación explica CON$TUS$PALABRASelconceptoCSCW15 20líneas). Cambiaelestilodeltítuloayudándotedelasopcionesdelabarradeformato: tipodeletracolortamañoalineación Cambiaelcolordefondo.ParaellovealmenúFormato! Colores y fondo de página. En la ventana puedes seleccionar el color de fondo y de los distintostextosytambiénpuedeselegirunaimagencomofondoenestecaso laimagendeberáestarentucarpetaimagesyasegurartedemarcarlaopción La$URL$es$relativa$a$la$dirección$de$la$página ). Insertaunaovariasfotosdedeportesenlapágina: Sitúate donde desees insertarlaimagenypulsaelbotón.denuevolaimagendeberáestaren 4

5 Informática4ºESO tucarpetaimagesydebesasegurartedemarcarlaopción La$URL$es$relativa$ a$la$dirección$de$la$página. o Añadeuntítuloemergente:eltextoqueapareceráalpasarelratónpor encimadelaimagen. o También puedes añadir un texto alternativo: el texto que se mostrará enelnavegadorencasodenopodervisualizarlaimagen. o EnlapestañaDimensionespuedesmodificareltamañodelaimagen. o EnlapestañaApariencia puedeselegirlaposicióndelaimagenenla página. En Alinear texto con la imagen puedes centrar la imagen colocarlaalaizquierdaoaladerechadelapágina.siquieresescribir textoaladerechaoizquierdadelaimagendebesseleccionarfluirpor laizquierdaofluirporladerecha. Fíjateenlaimagendeundisqueterojojuntoaltítulodelapágina:indicaque hay cambios por guardar. No olvides guardar los cambios a menudo para no perdertutrabajo. 5

6 Informática4ºESO Cuando pegamos un texto procedente de una página web puede interesarnos eliminarlosenlacesquetenga.paraelloseleccionaeltextoyvealmenúformato! EliminarenlacesinternosyEliminarenlaces. 7. INSERTAR'UNA'LÍNEA'HORIZONTAL' e al menú Insertar! Línea horizontal. Desde el código podemos modificar el anchowidth)ylaalturaheight) 8. ER'LA'PÁGINA'WEB'EN'EL'NAEGADOR' Aunque el programa ofrece una pestaña inferior ista preliminar no es recomendable porque a veces no se corresponde con la visualización en el navegador. Tambiénesposibleusarelbotón peroavecessebloqueaelnavegador. LomejoresiralacarpetaWebCSCWyabrirelarchivohtmlhaciendodoble clicsobreél. 9. USO'DE'LISTAS'NUMERADAS'O'IÑETAS' Enlapáginaprincipalañadetraseltextounlistadodelasherramientascolaborativas delasquevasahablarentupáginaweb. 6

7 Elesquemadebeserelsiguiente: Herramientascolaborativasparalacomunicación o Chatsochatrooms o Foros o Blogs o RedesSociales Herramientascolaborativasparagestionarycompartircontenidos o Wikis o Repositoriosdedocumentos o BSCWyRSS Informática4ºESO Para ello antes de escribir la lista numerada o con viñetas pulsa el botón correspondiente: o. Cuandotermineslalistapulsadenuevoelbotón. Podemos descender un nivel pulsando la tecla [Tabulador] y aumentar un nivelpulsando[may]+[tabulador]. 10. INSERTAR'UNA'TABLA'' Las tablas no sólo son útiles para mostrar listas de datos; también nos permiten organizarydistribuirlosespaciosenunapáginawebdeunaformaadecuada. 7

8 Informática4ºESO amosacrearunatablaconunaclasificacióndedeportesportipos.paraello: Creaunanuevapágina.GuárdalaconeltítuloTipos Groupware yconel nombretipos.html. EscribeeltítuloTiposdeGroupwareenfuncióndeltiempoyelespacio. Insertaunatabla. En la pestaña Preciso debes poner el número de Filas y Columnas y la Anchura:80%píxeles.Elanchodelasceldasseadaptaráalcontenido. Debesreproducirlasiguientetabla: Para unir varias celdas debes seleccionarlas hacer clic derecho y seleccionar Unir$celdas$seleccionadas. SituadosobreunaceldadelatablaypulsandosobreelbotónTablaaccederás asuspropiedades.enlapestañatabla eligela Alineación de la tablayun colorparaelfondo.cambiaeltipodeletracolorytamañodeltítulo. TambiénpuedescambiarelAnchodelosbordesEspaciadoyRelleno. Paracambiarelcolordelaprimerafila/columnaseleccionalas3celdasyveal menútabla!colordefondodelatabla. 11. ENLACES'EXTERNOS' Crea 2 nuevas páginasuna para las herramientas$ de$ comunicación y otra para las herramientas$de$gestión$y$compartición$de$contenidos. GuardacadapáginaconunnombreapropiadoentucarpetaWebCSCW. Enlaza cada punto del listado creado en el punto 9 con su página correspondiente.paraello: o Selecciona el texto enlace y pulsa el botón. En Ubicación del enlace como el enlace es a página web de nuestro sitio pulsamos el botóndelacarpetayelegimoselarchivo.podemoselegirsiqueremos queelenlaceseabraenlamismaventanaoenotranueva. 8

9 Informática4ºESO Cada página dispondrá de un botón OLER que enlazará con la página principal. ParacrearelbotónrecurriremosalprogramaGIMP. ealmenúarchivo!crear!botones!botónsimplebiselado. Elegimos los colores escribimos los textos y exportamos la imagen con formato.jpganuestracarpetaimages. Si queremos cambiar los colores que vienen por defecto para los enlaces podemoshacerloenelmenúformato! Colores y fondo de la página! Usarcolorespersonalizadosenlosbotonesdeloscoloresdelosenlaces. 9

10 12. TRABAJO'CON'CAPAS' Informática4ºESO Lascapassonmuyútilesparatrabajarconpáginaswebyaquepermitencolocarlos elementosdondesedesee. Paracrearunacapa: Seleccionael/loselementosqueestaránenlacapa. Crealacapahaciendoclicsobre. Unavezcreadalacapasepuedemoveryredimensionarconelratón. Puedesllevarladelanteodetrásconlosbotones amos a crear una nueva capa con el texto Tipos de groupware parapodersituar dichotextoaladerechadelaimagenprincipal. EnlazadichotextoalapáginawebTiposdegroupwarecreadaenelpaso10. ' 10