Informàtica 4ESO: Projecte Creativitza
Carles Gòdia
Activitat 6 – Creació d’una pàgina web utilitzant codi HTML Es realitzarà una pàgina web per al vostre producte de Creativitza. Seguint els colors i l’estil decidit en les anteriors pràctiques. Aquesta web tindrà 6 arxius html que s’enllaçaran des d’un menú on hi apareixeran els ítems següents: -‐ -‐ -‐ -‐ -‐ -‐
Inici Qui som? Com es construeix? Els nostres productes Vendes Contacta
à index.html à quisom.html à construeix.html à productes.html à vendes.html à contacta.html
Per on comencem? Es començarà per a crear la plantilla bàsica per a tots els arxius, penseu que ha de quedar ben acabada abans que comenceu a fer els 6 continguts ja que un cop feta si voleu fer algun canvi l’haureu de fer als 6 arxius. Header Aside
1.
finestra i d’altura tindrà 100px. 2.
El aside tindrà una amplada de 20% amb alineació vertical (top), contindrà el menú principal en forma
Main
Footer
El header tindrà una amplada de 80% centrada a la
de llista UL. 3.
El main ha de tenir el fons en blanc.
4.
El footer ha de tenir 80px d’altura i hi apareixerà el vostre copyright (c)Any.
Exemple de text del footer:
Tots els drets reservats a “Autor” ©”Any”
Llicència de Creative-‐Commons. Creativitza de Carles Gòdia està subjecta a una llicència de Reconeixement – No Comercial 3.0 No adaptada de Creative-‐Commons. Creat a partir d'una obra disponible a http://www.creativitza.com
Informàtica 4ESO: Projecte Creativitza
Carles Gòdia
Explicació de cada pàgina: -‐
-‐
-‐
-‐ -‐
-‐ -‐
Pàgina inicial: (index.html) S’ha de mostrar l’activitat 1 de Creativitza, és a dir, l’anunci de diari. També podeu incloure el vídeo o l’àudio del vostre producte. Per a que no quedi buit podeu posar imatges i text explicant quelcom interessant, notícies del vostre producte, entre altres. Qui som? (quisom.html) En aquesta pàgina heu de mostrar una foto de la vostra empresa, o de vosaltres mateixos amb un text que expliqui qui sou. Podeu fer servir imatges d’oficines que us agradin. Com es construeix? (construeix.html) En aquesta pàgina heu d’incloure textos que expliquin quins materials que feu servir per al vostre producte. També heu de realitzar una taula amb cada un d’aquests materials sense mostrar el preu. Els nostres productes. (productes.html) Imatges dels vostres productes amb el preu cada un. Vendes. (vendes.html) S’han d’ubicar dins d’una taula la imatge de la captura de pantalla de l’excel de les vendes. Per a que pugueu mostrar el que s’ha venut durant aquest any. On som? (onsom.html) Imatges de la tenda del carrer i un mapa incrustat de Google Maps per ubicar la tenda. Contacta. (contacta.html) Formulari per a enviar una consulta per correu. On hi ha d’aparèixer: o Telèfon i e-‐mail de contacte per a consultar-‐vos a vosaltres. o I un formulari que ha de tenir: § Camp text per a que l’usuari posi el seu nom. § Camp mail per a que l’usuari indiqui el mail. § Camp text per a dir l’assumpte. § Camp textarea per al text. § Camp checkbox per a que puguin indicar si accepten rebre resposta. § Un botó submit per a enviar tot el formulari. § Un botó reset per a esborrar el contingut que s’ha escrit.
Observacions Recordeu a posar colors, imatges, H1, H2, ..., taules, entre altres coses que facin la vostra pàgina atractiva. Sabeu que podeu utilitzar el Fireworks per a crear imatges per a decorar la vostra capçalera o header. Penseu en crear una carpeta imatges per a guardar cada imatge que feu servir. Els 6 fitxers i la carpeta imatges han d’anar dins d’una carpeta que s’anomeni “pfinal_Nom_cognom” El lliurament es realitzarà comprimint aquesta carpeta i pujant-‐la al moodle.
Llicència de Creative-‐Commons. Creativitza de Carles Gòdia està subjecta a una llicència de Reconeixement – No Comercial 3.0 No adaptada de Creative-‐Commons. Creat a partir d'una obra disponible a http://www.creativitza.com