xelu.net >> àgora 2.0 >> materials >> curs d'informàtica bàsica Dreamweaver CS |
: | | | | | | | | |
|
|
|
descripció |
El curs va orientat a crear pàgines web estàtiques amb l'editor Dreamweaver. En acabar aquest curs, l'alumne serà capaç de crear la seva pròpia pàgina web i penjar-la en un servidor. |
índex de continguts |
- Introducció a HTML:
- Què és el llenguatge HTML?
- Tags més comuns.
- Estructura d’un fitxer en HTML.
- Editors HTML.
- Macromedia Dreamweaver (01) (02):
- L'entorn de treball:
- La pantalla inicial
- Paletes d’eines.
- Panells laterals.
- Personalitzar l'àrea de treball.
- Definició d'un lloc:
- Què és un lloc?
- Crear un lloc.
- Configuració de l'FTP propi del Dreamweaver.
- Pujar fitxers al servidor amb FileZilla.
- Documents HTML:
- Les 3 vistes dels documents (codi, disseny, intermitja).
- Propietats de la pàgina.
- Creació de documents HTML amb text:
- Comportament del text en una pàgina web.
- Llistes.
- Donar format al text a partir d'estils CSS:
- Què són els estils CSS?
- Creació d'una fulla d'estils.
- Vinculació de la fulla d'estils al document HTML.
- Creació d'un estil nou.
- Modificació de les propietats de l'estil.
- Aplicació dels estils als diferents elements HTML de la web
- Enllaços:
- Concepte d’enllaç.
- Enllaços de text.
- Enllaços utilitzant imatges.
- Mapes d’imatges amb enllaços.
- Destí de l’enllaç (target).
- Imatges:
- Formats d’imatge permesos a Internet.
- Tractament i optimització bàsica d’imatges amb Photoshop.
- Inserció d’imatges en un document HTML.
- Cambiar tamany d'una imatge.
- Mapes d'imatges amb enllaços.
- Imatges de substitució.
- Botons:
- Què és un botó?
- Conveniència de l’ús de botons.
- Botons Flash.
- Text Flash.
- Taules:
- Inserció de taules en un document HTML.
- Afegir i treure files i columnes.
- Dividir i combinar cel·les.
- Format de les taules utilitzant estils CSS.
- Utilitats de les taules:
- Llistats (recomanable)
- Maquetació (poc recomanable)
- Marcs (frames):
- Què són els marcs i per a què s’utilitzen?
- Definició d’una finestra de marcs.
- Gestió dels diferents sub-marcs.
- Enllaços entre les finestres de marcs.
- iFrames (03):
- Què són i perquè s'utilitzen.
- Paràmetres bàsics d'un iframe.
- Formularis (04):
- Què és un formulari i per a què s’utilitzen?
- Creació d’un formulari.
- Elements bàsics d’un formulari.
- Enviament de dades d’un formulari per email (05)
- Validar les dades entrades en un formulari.
- Comportaments:
- Què és un comportament i per a què serveix?
- Aplicació dels comportaments bàsics.
- Accessibilitat (06):
- Què és l’accessibilitat?
- Normes bàsiques per a fer la nostra web més accessible.
- Test d'accessibilitat.
- Aplicacions per a la nostra web:
- Monitorització d’estadístiques utilitzant Google Analytics (07) (08)
- Mapes Google (09)
- Google Web Master Central: creació d'un sitemap (10)
- Buscadors interns (11)
- Vídeos YouTube (12)
- Multimèdia:
- Inserir so a la pàgina (13) (17).
- Inserir vídeos.
- Publicació del nostre web a internet
- Contractació d’un servidor.
- Instal·lació d’un programa FTP (14)
- Configuració del programa FTP.
- Com enviar la nostra pàgina al servidor.
- Gestió dels fitxers locals i remots.
|
apunts i exercicis |
|
Exercici 01
- Creació de la primera pàgina HTML amb Dreamweaver.
Exercici 02
- Definir un lloc amb Dreamweaver.
Exercici 03
- Configuració de la connexió amb el servidor mitjançant FileZilla. Pugem la nostra primera web al servidor.
Exercici 04
- Creació d'una fulla d'estils. Implementació d'estils.
Exercici 05
- Aplicació d'estils en un document HTML. Propietats de la pàgina.
Exercici 06
- Creació de més pàgines HTML per després poder enllaçar-les.
Exercici 07
- Tractament d'imatges amb Photoshop
Exercici 08
- Inserir imatges en un document HTML.
Exercici 09
- Enllaçar diferents documents HTML.
Exercici 10
- Manipul·lació del fitxer estils.css.
Exercici 11
- Enllaços entre pàgines
Exercici 12
- Maquetació del contingut utilitzant taules.
Exercici 13
- Maquetació del contingut utilitzant taules i insersió de vídeos YouTube.
Exercici 14
- Maquetació del contingut utilitzant taules.
Exercici 15
- Creació de l'índex de la nostra web.
Exercici 16
- Creació de l'índex de llibres.
Exercici 17
- Creació de la pàgina de llibres de cada autor.
Exercici 18
- Enllaços amb àncores
|
enllaços |
(01) Manual oficial d'Adobe Dreamweaver CS3
(02) Manual de dreamweaver MX.
(03) Article sobre el tag iframe a DesarrolloWeb | HTMLQuick.com
(04) Manual sobre la creació de formularis
(05) Manual sobre l'enviament d'un formulari per correu electrònic
(06) Manual sobre l'accessibilitat web
(07) Manual extret de l'ajuda oficial sobre Google Analytics
(08) Manual de Google Analytics
(09) Manual de com inserir un mapa de Google Maps a la teva web
(10) Manual per a la creació d'un Site Map per a Google
(11) Manual per afegir un buscador intern de Google a la teva pàgina web
(12) Manual de com afegir un vídeo de YouTube a la teva pàgina web
(13) Manual de com inserir un reproductor mp3 - reproductor.swf - the_simpsons.mp3 - js.rar (descarregar amb el botó dret)
(14) Manual de FileZilla
(15) Desarrollo de aplicaciones web (material alliberat per la UOC del màster de Software Lliure)
(16) Aula Clic
(17) Colewebs - Codi font per inserir diferents reproductors mp3 Flash a la web |
afegir comentari |
|
els vostres comentaris (22 ) |
Autor/a del comentari: Xevi -
Data: 17/12/2008
Els que hagueu seguit el problema del Sergi amb el formulari PHP, sapigueu que la solució és que el servidor que té no té habilitada la funció mail necessària per poder enviar formularis de la manera aquí plantejada. Amb un canvi de servidor ho ha tingut solucionat. |
Autor/a del comentari: Xevi -
Data: 15/12/2008
Ostres, ja veig que el tema no funciona ja que quan prems el botó enviar no surt el missatge d'agraïment. Aquí tens un problema que no aconsegueixo veure... No crec que sigui que tens un "ç" a l'adreça i això no estigui permès en una variable... Envia'm el fitxer sencer a xevi.vb@gmail.com, el penjaré directament al meu servidor i ho provem. Si sense tocar absolutament res funciona és que tens un problema amb el teu servidor. Si no, seguirem buscant... |
Autor/a del comentari: Sergi -
Data: 15/12/2008
El nom del fitxer q pujo al servidor (awardspace.com) és el mateix que el q crida al formulari: "formulari.php".
Si vols fer comprovar el seu funcionament ho pots mirar a quadratonics.awardspace.com --> contacte.
He estat mirant tb les opcions de php del meu servidor. No n'he trobat cap referent a que s'hagi d'activar alguna opció pq funcioni el php, en principi el soporta. |
Autor/a del comentari: Xevi -
Data: 15/12/2008
Hola Sergi. Primer de tot, ja he arreglat el codi que m'has enganxat en el formulari de contacte. Segona cosa: a mi em funciona correctament (he provat el teu codi en el meu servidor i funciona). L'error pot estar en que l'arxiu que envies al servidor s'ha de dir formulari.php (no se si és el teu cas). Fixa't que el formulari, quan prems el botó enviar, el que fa és cridar un altra vegada a l'arxiu formulari.php passant les dades introduïdes al formulari per paràmetre i això és el que detecten els condicionals (if) del codi. O sigui que l'arxiu formulari.php és cridat dos vegades: una per mostrar el formulari i l'altra per enviar el correu i mostrar el missatge d'agraïment. Per aconseguir això el nom que crida el formulari un cop enviat i el fitxer que envies al servidor ha de ser el mateix. Diga'm si és això o no. |
Autor/a del comentari: Sergi Nadal -
Data: 15/12/2008
He copiat i enganxat el codi en un comentari i ha sortit el formulari, no sabia q interpretés html... si no poguessis llegir el codi te l'enviaria x correu a l'adreça q hem diguessis. |
Autor/a del comentari: Sergi Nadal -
Data: 15/12/2008
Bones altra vegada Xevi!
Doncs sí, el servidor q tink (awardspace.com, no sé si et sona...) soporta php (puc escollir entre la versió 4.4.1 o 5.2.5).
Akesta es la url d la pagina: quadratonics.awardspace.com i a continuació et passo el codi html de la pàgina concreta que conté el formulari :
VEURE CODI
Merci!! |
Autor/a del comentari: Xevi -
Data: 15/12/2008
Quan descarregues el FileZilla per primera vegada, l'arxiu d'instal·lació pot ser que se't guardi a l'escriptori. Llavors un cop instal·lat, l'accés directe cap al programa també se't guarda a l'escriptori. Com que tan l'arxiu d'instal·lació com l'accés directe del programa ja instal·lat tenen el mateix icona, pot ser que llavors a l'hora d'engegar-lo et confonguis. Hauries de veure quin és quin. L'altra tema, un cop engegat el programa, inicialment la pantalla està dividida en 4 parts (això és una opció de configuració que es pot arreglar). Per connectar amb el servidor, a dalt tens 3 camps per omplir: amfitrió (servidor), nom d'usuari i contrasenya. Llavors prement CONNEXIÓ RÀPIDA s'ha de connectar correctament. |
Autor/a del comentari: Assumpta -
Data: 15/12/2008
Hola, m'he baixat el Filezilla, però:
1r. cada vegada que el vull obrir haig d'intalar-lo, doncs surt el I gree, next, next....No s'instal.la definitivament?
12n. una vegada obert, com puc conectar amb el teu servidor per veure la meva pàgina provisional?
3r. la pàgina del filezilla esta partida en quatre i no en dues,
Sitio local Sitio remoto
Nombre de arc... Nombre de arc...
Apa, siau.
|
Autor/a del comentari: Xevi -
Data: 14/12/2008
Per cert, perquè tot això funcioni és necessari que el servidor admeti PHP, per tant hauries de revisar també aquesta qüestió... |
Autor/a del comentari: Xevi -
Data: 14/12/2008
Sergi, cap problema, envia el codi a veure què hi puc veure. |
Autor/a del comentari: Salut! -
Data: 14/12/2008
Com diu en Sergi, si instal·les la versió de la pàgina oficial no has de tenir cap problema. Però coneixent-nos, anem pas per pas:
1-Treure versions antigues del FileZilla: ves a Inicio -> Panel de Control -> Agregar o quitar programas i elimina qualsevol versió del FileZilla que encara puguis tenir.
2-Ves a l'escriptori i elimina qualsevol icona del FileZilla que pugui quedar.
3-Obre l'Internet Explorer i ves a la pàgina oficial de FileZilla.
4-Allà descarrega l'última versió estable (avui és FileZilla_3.1.6_win32-setup.exe (recommended)).
5-Ens demanarà si volem guardar el programa o executar-lo. Li diem EJECUTAR.
6-Instal·lem el programa (I agree, next, next...)
7-Quan el programa acaba d'instal·lar-se, premem FINISH i ACEPTAR i ja s'executa ell solet.
I ja està, ja em diràs si t'ha funcionat!
|
Autor/a del comentari: Sergi Nadal -
Data: 14/12/2008
Bones!!
Jo hem vaig descargar el Filezilla des de la seva pagina principal ( http://filezilla-project.org/download.php?type=client ) i no he tingut cap problema ni en la instal·lació ni posteriorment.
Sort!! |
Autor/a del comentari: Assumpta!!! -
Data: 13/12/2008
Mira ara t'explico el que acabo de fer per cinquena vegada avui:
- dos clics a l'anagrama del FileZilla que només tinc a l'excriptori
- clico I agree
- clico next, next, nxet, next, intall, i finish
la pantalla fa una reacció i el FileZilla no s'obra.
A mi aquest aparell no em vol creure..... |
Autor/a del comentari: Assumpta!!! -
Data: 13/12/2008
Xevi, ho sento però no hi ha manera que se m'instal.li el FileZilla. El busco a aquesta web per tornar-lo a baixar i no el trobo.
Em pots tirar un "cable"?.
Gràcies.
|
Autor/a del comentari: Sergi Nadal -
Data: 11/12/2008
Bones altra vegada Xevi,
doncs bé, ja he actualitzat la web al servidor amb el nou formulari i no aconsegeuixo q m'arrivi cap mail al correu amb la informació.
Per fer una altra prova, també he fikat un enllaç amb l'exemple del formulari del manual. L'omplo, clico al botó enviar i tampoc m'arriva res al correu.
Si vols et puc passar el codi de la pàgina pq li facis una ullada, però l'he revisat uns quants cops i diria q segueix la mateixa estructura q la del manual.
A veure si entre tots ho podem solucionar!
Merci!!!! |
Autor/a del comentari: Xevi -
Data: 11/12/2008
Hola Sergi! És necessari penjar la web al servidor per veure si funciona (a no ser que configuris un servidor local de correu, tinc entès, cosa que jo no he fet...). |
Autor/a del comentari: Sergi Nadal -
Data: 11/12/2008
Bones Xevi,
doncs un cop aclarits els dubtes (gràcies!), ara el problema q tink es q no m'arriba cap mail al correu amb les dades del formulari. Es expressament necessari penjar la web al servidor remot pq funcioni el php? O només provant la web amb qualsevol explorar ja hauria de funcionar? |
Autor/a del comentari: Xevi -
Data: 10/12/2008
Hola Sergi. Aquestes etiquetes les has d'escriure tu (el Dreamweaver només et genera el formulari). Pel tema del dos fitxers, la resposta és no. Només hi ha d'haver un fitxer que és el formulari.php, que de fet és el que tens el codi sencer en el manual. Aquest fitxer conté el formulari (que amb Dreamweaver serien tot el que hi ha entre les etiquetes form) i el codi PHP que em diu quan un usuari ha premut el botó ENVIAR. En aquest cas (tota la part de sota del codi), és quan agafa les dades entrades en el formulari, les monta en la variable $cos i ho envia tot per correu electrònic. Si tens cap més dubte pregunta sense por. |
Autor/a del comentari: Sergi Nadal -
Data: 10/12/2008
Bones,
he estat seguint aquest manual i m'han sorgit un parell de dubtes, q no sé si me'ls podries resoldre.
Dius q s'ha de crear un fitxer contacte.php i a dins crear-hi un formulari. Un cop inserit el formulari, si mirem el codi, no hem surt enlloc les etiquetes del tipus "" abans de les estiquestes |
Autor/a del comentari: Xevi -
Data: 27/11/2008
Com ja vaig dir la setmana passada, he posat alguns continguts nous a la secció d'enllaços d'aquest manual. La majoria són manuals explicatius que he trobat per internet i que estan realment bé. El que parla de com enviar un formulari per correu electrònic i el de posar un reproductor de música mp3 a la web són de collita pròpia. Seguiré actualitzant. Espero els vostres comentaris i/o aportacions (que sempre seran benvingudes). |
Autor/a del comentari: Xevi -
Data: 21/11/2008
Ostres, la meva intenció és ampliar el curs de Dreamweaver amb material que ja tinc mig preparat en breu. He detectat que aquestes seccions se les mira molta més gent de la que em pensava, que no són només els meus alumnes, i això m'omple de satisfacció. Espero en breu poder penjar aquests materials de Dreamweaver i les solucions de matemàtiques. |
Autor/a del comentari: Sergi -
Data: 20/11/2008
Bones Xavi,
tens pensat actualitzar aviat aquest manual?? Està molt bé, sobretot els exercicis!!
|