1. Flujo de trabajo de desarrollo Web Conceptos bsicos de Dreamweaver CS4 Caractersticas de Dreamweaver CS4 Editar pginas we Cmo tener una pgina en Internet Arrancar y cerrar Dreamweaver CS4 Abrir y guardar documentos Guardar un Documento Mi primera pginaLcda. Mnica Gonzlez R.

2. * Introduccin* Flujo de trabajo de desarrollo Web* Planificacin* Conceptos bsicos de Dreamweaver CS4* Caractersticas de Dreamweaver CS4* Editar pginas web* Cmo tener una pgina en Internet* Arrancar y cerrar Dreamweaver CS4* Abrir y guardar documentos* Guardar un Documento* Mi primera pgina* videos 3. Flujo de trabajo de desarrollo WebEl ujo de trabajo de desarrollo Web comienza con el proceso de denicinde una estrategia y unos objetivos del sitio, contina con el diseo (duranteel cual se dene el aspecto y el funcionamiento de un sitio propuesto) yavanza hasta la fase de produccin y desarrollo (durante la cual se crea elsitio y se codican las pginas); la funcionalidad del sitio se compruebapara ver si se cumplen los objetivos establecidos y, seguidamente, sepublica el sitio. Muchos ingenieros de desarrollo tambin programanoperaciones de mantenimiento peridico para asegurarse de que el sitiocontina estando actualizado y operativo.Para facilitar la localizacin de informacin necesaria para el desarrollo desitios Web, este curso de Dreamweaver se divide en amplias secciones quesiguen este modelo estndar de aproximacin al desarrollo Web:planicacin del sitio, diseo, desarrollo, comprobacin y publicacin ymantenimiento. 4. PLANIFICACIN Planificar sitiosPlanicar y organizar cuidadosamente el sitio desde el primer momento puedeayudar a ahorrar tiempo ms adelante. La organizacin del sitio implica muchoms que determinar el lugar en el que ir cada archivo: la planicacin del sitioimplica con frecuencia investigar los requisitos que debe cumplir el sitio, el perlde la audiencia y los objetivos del sitio. Adems, debe tener en cuenta requisitostcnicos tales como el acceso de los usuarios, los navegadores, los plug-ins o lasrestricciones a la descarga de archivos. 5. Unidad 1.Conceptos bsicos de Dreamweaver CS4Dreamweaver CS4, es un software fcil de usar que permite crear pginasWeb profesionales.Las funciones de edicin visual de Dreamweaver CS4 permiten agregar rpidamentediseo y funcionalidad a las pginas, sin la necesidad de programar manualmente elcdigo HTML.Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientosJavaScript, etc.., de una forma muy sencilla y visual.Adems incluye un software de cliente FTP completo, permitiendo entre otras cosastrabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidorsin salir del programa.Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde lapgina de Adobe, la versin caduca al cabo de 30 das, pero seguro que te dar tiempoa entenderlo y decidir si quieres adquirir la versin completa de este fantsticoprograma.Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcasregistradas Dreamweaver y Adobe. aulaClic no tiene ninguna relacin con Adobe.Las pginas web estn escritas en HTML. Si no conoces las caractersticas bsicas deHTML puedes verlas aqu. 6. CaractersticasEn este punto comentaremos las caractersticas que aporta esta nueva versin sobre laanterior. Nueva interfaz de usuario. Dreamweaver CS4 presenta una nueva interfaz quepermite cambiar fcilmente de espacio de trabajo y adaptar los paneles de forma rpiday cmoda. Esta nueva interfaz es muy parecida a los dems programas de Adobe,como Photoshop, Illustrator, etc. Existen distintos espacios de trabajo adecuados paracada ocasin (clsico, programador, diseador, etc. ) pero tambin tenemos laposibilidad de crear el nuestro propio de forma muy sencilla. 7. Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, taly como veramos la pgina en un navegador. Si hemos incluido elementosinteractivos en nuestra pgina, como mens desplegables, mens tipoacorden, widgets, etc, podremos interactuar con ellos en la vista en vivo,de la misma forma que lo haramos en un navegador.Navegador de cdigo. La funcin de Navegador de cdigo muestra lasfuentes de cdigo que afectan a la seleccin que tengamos activa, puedenser CSS (hojas de estilos en cascada), funciones JavaScript externas,plantillas de Dreamweaver, archivos de origen de iFrame, etc. 8. La nueva barra de Archivos relacionados muestra todos los archivos que de unaforma u otra contribuyen al diseo final de nuestra pgina, como hojas de estilo css,archivos javascript, etc. Mediante esta nueva utilidad podemos pasar de un archivoa otro cmodamente y tener una visin mucho ms clara de todos los archivos conlos que estamos trabajando en nuestro sitio web. Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, quedadividido en propiedades HTML (el que conocamos de otras versiones) y CSS. steltimo nos permite crear y editar nuestros estilos de forma cmoda y sencilla. Objetos inteligentes de imagen. Dreamweaver CS4 incluye la posibilidad de crearobjetos inteligentes de imagen. Ahora podemos incluir un archivo psd en laspginas web, de forma que el archivo original de Photoshop y la imagen optimizadaen Dreamweaver se mantienen vinculados. Podemos redimensionar o cambiarcaractersticas de los objetos inteligentes de imagen directamente desdeDreamweaver. 9. Adobe InContext Editing. Mediante Adobe InContext Editing creamos regioneseditables. De esta forma los usuarios previamente habilitados podrn actualizar elcontenido de estas regiones de la pgina web directamente desde el navegador, sinnecesidad de tener un editor de pginas web instalado. Software Subversion. Subversion es uno de los ms usados sistemas de control deversiones para equipos de desarrollo. Dreamweaver CS4 es capaz de sincronizarse con elrepositorio de versiones, facilitando el trabajo a los profesionales que empleen estesistema. Conjuntos de datos. Dreamweaver CS4 permite la creacin de pginas dinmicas deforma sencilla, pudiendo utilizar tanto bases de datos como archivos XML, sin necesidadde conocer en profundidad su funcionamiento. Resulta muy sencillo crear regionesdinmicas con la tecnologa Spry. 10. Editar pginas webCualquier editor de texto permite crear pginas web. Para ello slo es necesario crearlos documentos con la extensinHTML o HTM, e incluir como contenido deldocumento el cdigo HTML deseado. Puede utilizarse incluso el Bloc denotas incluido en Windows para hacerlo.Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerloutilizando un editor grfico. Al no utilizar un editor grfico cuesta mucho msinsertar cada uno de los elementos de la pgina, al mismo tiempo que es mscomplicado crear una apariencia profesional para la pgina, sobre todo si no estamosdemasiado familiarizados con el HTML. Aunque tambin es cierto que escribir elcdigo nos da ms control sobre l, y sobre todo al principio, nos ayudar aaprenderlo rpidamente.Hoy en da existe una amplia gama de editores de pginas web.Adems de Dreamweaver, existen otra serie de buenos editores de pginas web,como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer oQuanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos. 11. Cmo tener una pgina en InternetPara poder poner una pgina web en Internet, es necesario contratar a alguna empresacon servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas delda. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertaslimitaciones: poco espacio de disco, lentitud y nombre de nuestra pgina precedidopor el de la suya.Cuando se va a contratar un servicio de hospedaje es necesario contratar tambinun dominio, tarea de la que se suele encargar la propia empresa de hospedaje.Registrar un dominio consiste en registrar un nombre para nuestra pgina.. Es posibleregistrar un mismo nombre con distintas terminaciones, como por ejemplo, .net,.org, .es o .com.En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, yaque nuestra pgina no ser ms que un archivo dentro de la de la empresa contratada.Por tanto, una vez hayas terminado de disearla en modo local slo debers subirtodos los archivos tal y como aparecen en tu disco duro, respetando el nombrede los archivos y la organizacin de las carpetas. Si no lo haces de este modo, tusitio experimentar fallos y enlaces que no funcionarn. 12. ArrancarycerrarDreamweaverCS4VeamoslasdosformasbsicasdearrancarDreamweaverCS4.ColocarelcursoryhacerclicsobreelbotnInicio,sedespliegaunmen.AlcolocarelcursorsobreTodos los programasapareceotralistaconlosprogramasquehayinstaladosentuordenador,buscarAdobeDreamweaver CS4yhazclicsobrelparaarrancarelprograma.Desde el icono de Dreamweaver CS4 del Escritorio. Puedes arrancar DreamweaverCS4.ParacerrarDreamweaver CS4, podemos utilizar cualquiera de las siguientesoperaciones:Hacer clic en el botn cerrar, en la esquina superior derecha, como en cualquierventanadeWindows.PulsarlacombinacindeteclasAlt+F4.HacerclicsobreelmenArchivoyelegirlaopcinSalir.SiexistealgndocumentomodificadoquenohasidoguardadoantesdecerrarDreamweaver,setepedirconfirmacinparaguardaronocadaunodeellos. 13. AbriryguardardocumentosParaabrirundocumento,puedesutilizarcualquieradelassiguientesoperaciones:Hacerclicenelbotnabrirdelabarra de herramientas estndar(siestvisible).PulsarlacombinacindeteclasCtrl+O.HacerclicsobreelmenArchivoyelegirlaopcinAbrir.Hacerdobleclicsobreelarchivoenlaventanadelsitio.HacerclicderechosobreelarchivoenelexploradordeWindows,yelegirlaopcinAbrirconAdobe Dreamweaver CS4.Paraabrirundocumentonuevo,puedesutilizarcualquieradelassiguientesoperaciones.:Hacerclicenelbotnnuevodelabarra de herramientas estndar(siestvisible).PulsarlacombinacindeteclasCtrl+N.HacerclicsobreelmenArchivoyelegirlaopcinNuevo.Despusdeestoaparecerunanuevaventana,enlaquedeberselegirlaCategora Pgina en blanco.EnlasegundacolumnaseleccionamosHTML,observamosquehaymuchosdiseosyacreadosquepodemoselegir,paranuestroprimerejemploelegimosenDiseoninguno.AcontinuacinpulsamoselbotnCrear. 14. AbriryguardardocumentosParaabrirundocumento,puedesutilizarcualquieradelassiguientesoperaciones:Hacerclicenelbotnabrirdelabarra de herramientas estndar(siestvisible).PulsarlacombinacindeteclasCtrl+O.HacerclicsobreelmenArchivoyelegirlaopcinAbrir.Hacerdobleclicsobreelarchivoenlaventanadelsitio.HacerclicderechosobreelarchivoenelexploradordeWindows,yelegirlaopcinAbrirconAdobe Dreamweaver CS4.Paraabrirundocumentonuevo,puedesutilizarcualquieradelassiguientesoperaciones.:Hacerclicenelbotnnuevodelabarra de herramientas estndar(siestvisible).PulsarlacombinacindeteclasCtrl+N.HacerclicsobreelmenArchivoyelegirlaopcinNuevo.Despusdeestoaparecerunanuevaventana,enlaquedeberselegirlaCategora Pgina en blanco.EnlasegundacolumnaseleccionamosHTML,observamosquehaymuchosdiseosyacreadosquepodemoselegir,paranuestroprimerejemploelegimosenDiseoninguno.AcontinuacinpulsamoselbotnCrear. 15. GuardarunDocumentoParaguardarun documento, puedes utilizar cualquiera de las siguientesoperaciones.HacerclicenelbotnGuardardelabarradeherramientasestndar.PulsarlacombinacindeteclasCtrl+S.HacerclicsobreelmenArchivoyelegirlaopcinGuardar.Dreamweaver incluye la posibilidad de, en el caso de estar trabajandosimultneamente con varios documentos, poder guardar todos de golpe, sin lanecesidaddehacerlounoporuno. Paraguardar todopuedesrealizarcualquieradelassiguientesoperaciones.HacerclicenelbotnGuardar tododelabarradeherramientasestndar.HacerclicsobreelmenArchivoyelegirlaopcinGuardar todo.Al tener varios documentos abiertos es fcil olvidarse de todas las modificacioneshechas en cada uno de ellos. Debes tener mucho cuidado al utilizar laopcinguardar todo,yaqueenocasionesesposiblenodesearguardarloscambiosen todos los documentos modificados. Por ello es conveniente que al principio noutilicesestaopcin,almenoshastaquetehayashabituadoamanejarelprograma.Detodas formas, observa que cuando hay cambios sin guardar aparece un * tras elnombredeldocumento. 16. MiprimerapginaPara que te vayas haciendo una idea de cmo funciona Dreamweaver, vamosacrear una pgina web sencilla, con varios estilos de texto, una imagen y unenlaceaotrapgina.Crearestapginasolotellevarunospocosminutos,ysabrscmotrabajarconloselementosbsicosconlosqueestnhechaslamayoradelaspginas web. Si nunca has hecho una pgina web, este es el momento paradescubrirlofcilquees.LoprimeroquetienesquehaceresabrirDreamweaver.Yahasvistoenlapginaanterior como puede hacerse. Abre un documento nuevo y seleccionalaCategora Pgina bsica,HTML, enlacolumnaDiseodejamoslaopcinpordefecto:.Seguidamente,hazclicsobrelazonablancadeldocumentoyescribelosiguiente: 17. Una vez introducido el texto, vamos a modificar el ttulo y el color de fondo deldocumento.Para ello podemos hacer clic sobre el men Modificar y elegir la opcin Propiedadesde la pgina.Entonces se abrir una ventana como la que aparece a continuacin:En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasara ser de color azul.Haz clic en Ttulo/Codificacin a la izquierda, y en el Ttulo escribe Mi primerapgina.Para aplicar los cambios, pulsa sobre el botn Aceptar.Pg. 1.4 18. Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en lacarpeta donde estamos creando nuestras pginas, habitualmente en una subcarpetadedicada a las imgenes.Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacerclic con el botn derecho del ratn sobre la imagen que queremos traer de Internet, se abreuna ventana con una opcin similar a Guardar imagen como... (dependiendo delnavegador que utilices) que permite grabar dicha imagen en un fichero de nuestro discoduro. Ten en cuenta que si piensas publicar la pgina en Internet, hay que respetar losderechos de autor de la imagen.Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina webque estamos creando. Gurdala en la carpeta donde vas a guardar la pgina que acabas decrear.Ahora vamos a insertar la imagen debajo de la segunda lnea de texto. En primer lugar,situamos el cursor al final de la segunda lnea y creamos un salto de lnea (tecla Enter).Despus nos dirigimos al men Insertar, opcin Imagen. 19. En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la quela habas guardado, seleccionarla y pulsar Aceptar.Ahora vas a pasar a cambiar el formato del texto.Si no te aparece, puedes mostrarlo a travs del men Ventana,opcin Propiedades.Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque estcontrado. Para que te aparezca desplegado debes hacer doble clic en Propiedades.Selecciona la primera lnea de texto. En el inspector de propiedadespulsa HTML y aplica el formato Encabezado 1 (h1) seleccionando elvalor Encabezado1 del cuadro Formato.Para cambiar el color del texto cambiamos el panel a las opciones de estilo,pulsando el icono CSS a la izquierda.Mediante el inspector de propiedades en Dreamweaver CS4 accedemos tanto a laspropiedades de CSS como a las propiedades de HTML.Podemos decir que en una pgina web, HTML se encarga de estructurar elcontenido, la informacin, mientras que CSS se encarga de mostrar ese contenidocon el formato adecuado. 20. Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al textomediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor controlsobre el diseo de la pgina Web y reducen el tamao del archivo.Selecciona la primera lnea. En Regla de destino selecciona Estilo en lnea, paraaplicar el formato solo al texto seleccionado. Tambin aplica el estilode Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto, tal y comomuestra la imagen siguiente:Observa que hemos centrado el texto pulsando en el botn .Selecciona la segunda lnea de texto, y seleccionando como antes < estilo en lnea >,marca los botones para ponerlo en negrita y cursiva respectivamente.Vamos a centrar tambin la imagen. Para ellos seleccinala. Lo que hay que centrares el contenido del prrafo que la contiene. Para hacerlo, en la barra de estado,encima de las propiedades nos aparece la jerarqua de etiquetas. Haz clic sobre p.Ahora, centra el prrafo como hemos visto hasta ahora, pulsando en . 21. Por ltimo vamos a crear el enlace. Selecciona el texto de la ltima lnea, y cambiael panel de Propiedades a las propiedades de HTML.En el campo Vnculo, escribe la URL de la pgina a enlazar, como se ve en laimagen:Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs delmen Archivo, desde la opcin Guardar.Puedes llamar al documento como lo desees, pero la extensin ha de ser htm o html.Por ejemplo, lo hemos llamadomiprimerapagina.htm, y la hemos guardado en lamisma carpeta que la imagen descargada.Ahora, puedes ver cmo se ve en tu navegador pulsando la tecla F12. 22. Video tutorial de Dreamwever Cs4