Un espai per compartir.
Des del 2007.
inicial
255.338 visites
Tots els materialsSobre aquest material
Descobreix com es construeix un lloc web estàtic amb aquest curs de Dreamweaver CS. El recorregut proposa passar de la primera pàgina HTML a l’organització d’un conjunt de pàgines enllaçades entre si.
Els exercicis introdueixen la definició d’un lloc de treball, les propietats de les pàgines i la incorporació de continguts. També inclouen la preparació d’imatges i la seva inserció dins dels documents HTML.
Una part del material se centra en els fulls d’estil CSS i en l’aplicació d’estils als elements de la pàgina. Aquest treball permet explorar la relació entre el contingut i la seva presentació visual.
El curs incorpora pràctiques de connexió amb un servidor mitjançant FileZilla i de pujada dels fitxers del web. Pots utilitzar la seqüència d’activitats per entendre com s’organitzen els documents d’un projecte senzill.
Es tracta d’un material vinculat a Dreamweaver CS que també conté tècniques de maquetació pròpies de l’època, com les taules. És útil com a introducció i consulta històrica, però els procediments s’han de contrastar amb les eines i pràctiques actuals abans d’aplicar-los a un projecte nou.
Prepara't, practica, aprèn
Creació de la primera pàgina HTML amb Dreamweaver.
Definir un lloc amb Dreamweaver.
Configuració de la connexió amb el servidor mitjançant FileZilla. Pugem la nostra primera web al servidor.
Creació d'una fulla d'estils. Implementació d'estils.
Aplicació d'estils en un document HTML. Propietats de la pàgina.
Creació de més pàgines HTML per després poder enllaçar-les.
Tractament d'imatges amb Photoshop
Inserir imatges en un document HTML.
Enllaçar diferents documents HTML.
Manipul·lació del fitxer estils.css.
Enllaços entre pàgines
Maquetació del contingut utilitzant taules.
Maquetació del contingut utilitzant taules i insersió de vídeos YouTube.
Maquetació del contingut utilitzant taules.
Creació de l'índex de la nostra web.
Creació de l'índex de llibres.
Creació de la pàgina de llibres de cada autor.
Enllaços amb àncores
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.
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...
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.
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.
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.
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!!
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.
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.
Per cert, perquè tot això funcioni és necessari que el servidor admeti PHP, per tant hauries de revisar també aquesta qüestió...
Sergi, cap problema, envia el codi a veure què hi puc veure.
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!
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!!
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.....
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.
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!!!!
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...).
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?
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.
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 . No sé si es per que he creat el fitxer de manera erronia. I una altra cosa q no hem queda massa clara: Hi ha d'haver 2 fitxers per realitzar el formulari? És a dir, un amb el fitxer .php amb el formulari i l'altre amb la pàgina web completa (.html) q contindrà, entre altres coses, el formulari? Merci per tot!!
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).
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.
Bones Xavi, tens pensat actualitzar aviat aquest manual?? Està molt bé, sobretot els exercicis!!