1

MANUALPARACREARNUESTRA PAGINAWEBENDREAMWEAVER
INDICE
1. Comocrearmsitio. 2. Entorno. 3. Insertartexto. 4. Comocrearunvnculo. Formas: 5. Comoinsertarunaimagen. 6. InsertarTabla. 7. Marcos. 8. Mapas. 9. InsertarimagendeFWaDW. 10. Menemergente. a) ConunbotncreadoenFW. b) ConunaimageneditadaenFW. c) Digitandoopegandotodoeltexto. 11. ExportaranimacindelXARA

Prof.JulioCsarHernndezHernndez

ComocrearmsitioenDW.
Existentresformasdehacerlo: 1DesdeelpanelcentralCrearNuevoSitiodeDW AlabrirDWenlacolumnacentral,enelsiguienteesquemasemuestra:

2:DesdelabarradeMEN,darcliceninicio,nuevositio,yaparecerlasiguiente ventana:

3:TambinenmenSITIO,administrarsitio,comosemuestraenlaventana anterior *Entodaslasformasaparecerlasiguienteventana:

Prof.JulioCsarHernndezHernndez

Estaventanosmuestralosespaciosdondelepondremoselnombreanuestrositio Yestequedardelasiguientemanera:

*AhoranuestrositiosellamaMiPrimerPginaWeb *Ledamosclicensiguienteynosaparecerlasiguienteventana:

Prof.JulioCsarHernndezHernndez

Esimportantedejarsealadalaprimeraopcin *Luegoledamosclicensiguiente,yaparecerlasiguienteventana:

EnestapartetenemosquehabercreadounacarpetaeneldiscodurodelaPC

Prof.JulioCsarHernndezHernndez

Comosemuestraenelesquemaanterior,allseencuentralacarpetaquecreamosy sellamaMiprimersitio;ledamosclicenseleccionar:

Ahoraaparecelacarpetaorigen,quecontendrtodoslosarchivosquevamosa necesitarparalaelaboracindenuestrapgina.
Prof.JulioCsarHernndezHernndez

*AparecelasiguienteventanaquedebedecontenerNINGUNO,luegosiguiente, paraquenosmuestrelasiguienteventana:

*LuegoenestaventanapinchamosCOMPLETADO YyatenemosnuestrositioenDW.NoteenDWenlapartederechaenelpanel ARCHIVO

Prof.JulioCsarHernndezHernndez

AhoraqueyatenemosnuestrositiocreadovamosaentrarenDW,dndoleclicen HTML:

Ynosmuestraelreadetrabajocontodassusbarras,comosemuestraa continuacin

Hayqueponerletituloalapagina,enestecasolepondremosMEDICAMENTOS,yle damosguardarcomo,yleescribimosindex.html Yaparecedelasiguientemanera:

Prof.JulioCsarHernndezHernndez

NotequeeltituloMEDICAMENTOSapareceenlaventa

TambinesimportanteconocerquenossituamosenDISEOparatrabajarnuestra pgina. SiqueremossabercmoestanuestrapginaconellenguajeHTML,ledamosclicen CODIGO,ynosaparecelasiguienteventana:

Prof.JulioCsarHernndezHernndez

ParavernuestrapginapresionamosF12,ynosaparecerlapginasiguiente:

Comoinsertartexto
EnlapantallaprincipaldeDreamweaverescribimos:Comoinsertartextoen Dreamweaver.

Prof.JulioCsarHernndezHernndez

10

Enelinspectordepropiedadesdespusdehaberseleccionadoeltextocambiade forma,aqupodemoscambiardesdeelcolor,tamao,fuente,alinearlo,etc.

Cambia Negrita Cursiva Justificado Alineado Alineado Centrado Tamao elcolor ala ala de izquierda derecha fuente COMOCREARUNVINCULOCONELTEXTO Haytresformasdehacerlo 1.
Prof.JulioCsarHernndezHernndez

CrearunnuevodocumentodeDW

11

2. 3. 4. 5. SeleccionarHTML LuegoCREAR Copiamosodigitamoseltextoenmencinylopegamos. Loguardamoscomodocumentohtmlyquedacomosigue

6. 7. Luegoaparecerlaventanasiguiente seleccionamoseltextodondeirelvinculo

8. delacarpeta 9.

Luegodamoscliceneliconoqueseencuentraalaizquierda Jalamosconelmousehaciaelarchivoconquienvincular

Prof.JulioCsarHernndezHernndez

12

1. 2. SEGUNDAFORMADECREARUNVNCULO Seleccionamoseltextodelvinculo Luegoledamosclicalicono

3.

Ledamosclicenlacarpetaquesaleenelcuadrodetexto

4. Aparecelasiguienteventana

Prof.JulioCsarHernndezHernndez

13

5. Seleccionamoselarchivoconquequeremosvinculary despusaceptar TERCERAFORMADEINCERTARHIPERVINCULO 1. Seleccionamosenbarrademenlaopcinhipervnculo

2.

Luegoaparecelasiguienteventana

Prof.JulioCsarHernndezHernndez

14

3. 4. Imgenesserepitendellaformaanteriordos COMOINSERTARUNAIMAGEN EnlacarpetacreadaeneldiscodurollamadaMiPrimerSitio,tambin fuecreadaunacarpetallamadaimg,quecontendrtodaslasimgenes demipgina: Clicenlacarpetaamarilla Seleccionamoselarchivoquevincular

Prof.JulioCsarHernndezHernndez

15

HAYTRESFORMAS Primera: *Lapodemosdarclicdearrastre,delpanelarchivoycolocarlaenellugar sealado

Prof.JulioCsarHernndezHernndez

16

Luegodamosclicenaceptaralaventanaanterior

Segunda: Damoscliceneliconodeimgenesqueseencuentraenlabarrade herramientas,comosemuestraacontinuacin

Nosaparecerlasiguienteventanaquemuestralacarpetadelasimgenes denominadaimg

Prof.JulioCsarHernndezHernndez

17

Abrimosesacarpetadndoleclic,yaparecerntodaslasimgenes almacenadasenlacarpetaydamosclicenaceptar. Luegoaparecerlasiguienteventana: Seleccionamoslaimagenpreferidayaceptar

Yaceptarenlasiguienteventana

Prof.JulioCsarHernndezHernndez

18

Tercera: Enlabarrademen,damoscliceninsertaryseleccionamosimagen

Luegoaparecerlasiguienteventana,seleccionamoslaimagenyluegoen aceptar

Aparecelaventanayaconocidayledamosaceptar

Prof.JulioCsarHernndezHernndez

19

Entodaslasformaslasimgenessecolocanenlapginaautomticamente INSERTARUNATABLA Parainsertarunatablasemanejaigualqueunprocesadordetexto 1. Darcliceninsertardelabarrademenyluegoseleccionar Tabla.

2. Luegoaparecerlasiguienteventana

Prof.JulioCsarHernndezHernndez

20

Estacontienetrespartesqueson:Tamaodetabla,Encabezadoy Accesibilidad. 1. Tamaodetablacontienelossiguientesatributos: a)Numerodefilasycolumnas b)Anchodelatablaypixeles c)Grosordelborde d)Rellenodecelda e)Espacioentreceldas 2.Encabezado Contienelostiposdeencabezadosqueustedprefiere. 3.Accesibilidad ContienelostiposdeaccesoqueprefiereenlaTabla. Enestaocasinpreferimos: 6filas 2columnas
Prof.JulioCsarHernndezHernndez

21

200anchodetabla Encabezadosuperior

Luegoaparecerlatabla:

Prof.JulioCsarHernndezHernndez

22

Ahoraqueremos: 1combinarlafilasuperior

Notequelatablahasufridounalargamientodelapartederecha 1. 2. 3. 4. 5. Clicdearrastreenlospuntosnegrosdelatabla Clicderechosobrelatabla Seleccionartabla Combinarcelda Latablaquedelasiguientemanera

Prof.JulioCsarHernndezHernndez

23

Luegocombinamoslasfilasdelascolumnasderechas 1. Seleccionamoslapartequequeremoscombinar

2. 3. Clicderechosobreelreaseleccionada Tablaycombinarceldas

1. COLORALASCELDAS Situarnosenlaceldaquerecibirelefectodelcolor

Prof.JulioCsarHernndezHernndez

24

2. 3.

Fnd,despliegalasiguientepaletadecolores Elegimoselcolordeseado

Notequelafilasuperiortieneelcolor Ahoravamosacolorearlasfilasdelacolumnaizquierda

PresionamosF12paraobservarcomoquedaraenlaweb

Prof.JulioCsarHernndezHernndez

25

Ahoraocultaremoslosbordesdelatabla *LavistadelapginadebeestarenCOMUN

*LuegoBordedebeestaracero Notequeenelexploradornoaparecelatablaporqueselehaneliminadolos bordes

Prof.JulioCsarHernndezHernndez

26

MARCOS
*AbrimosDW *SeleccionamosConjuntodemarcos

*luegoaparecelasiguienteventana
Prof.JulioCsarHernndezHernndez

27

Notelastrescolumnasquesepresentanenlapestaageneral 1EnestaapareceenlacolumnaCategoraconjuntodemarcos 2Eslacolumnadelcentroaparecentodoslosestilosdeconjuntosdemarcos Seleccionamosavoluntad,enestecasosuperiorfijo,izquierdoanidado. 3Lacolumnaderechadondeseencuentralavistaprevia LuegodedamosclicenCrear Aparecelasiguienteventana

Enestaventanatenemosquedarleuntituloacadamarco

Esimportantesaberlatraduccindelosiguiente
mainFrame=MarcoPrincipal topFrame=MarcoSuperior Prof.JulioCsarHernndezHernndez

28 LeftFrame=MarcoIzquierdo

Laventanaquedadelasiguientemanera,mostrandolosmarcos

Enestaparteguardaremostodocomoindex.html

Prof.JulioCsarHernndezHernndez

29

Automticamenteelsistemamepidequeguardelosmarcosymesealaquemarco eselquetengoqueguardar Notequealguardartodo,laventanamuestraenelcontornodetodalapginauna lneapunteada,comosemuestraacontinuacin

Cuandoguardamoselizquierdonosmuestraesaparte Cuandoguardamoslaprincipalnosmuestraesaparte Cuandoguardamoslasuperiornosmuestraesaparte

Prof.JulioCsarHernndezHernndez

30

Enlasiguienteventanasemuestranlostresmarcos

Noteenlasiguienteventana,queyaseencuentran,todaslaspginasparacada marco index.html izquierdo.html principal.html

Prof.JulioCsarHernndezHernndez

31

titulo.html

MAPAS
Primero abrimos DW y creamos un archivo HTML nuevo, luego insertamos una imagen,(editada en FireWork) para el caso tenemos esta y vamos a crear unazonainteractivaenelrelojdeladerecha. Seleccionamos la imagen y vemos que el inspector de propiedades cambia, a la izquierda del inspector hay una parte que dice Mapa
Prof.JulioCsarHernndezHernndez

32

seleccionamos la Herramienta Zona interactiva oval y vamos a la imagen y encerramoselrelojconlaherramientadelasiguienteforma Ahora el inspector de propiedades toma una nueva forma, en la parte Vnculo podemos seleccionar el archivo a la que vincular la zona interactiva que seleccionamosyendestinodondevaaabrirelarchivo. Despus de seleccionar el archivo, presionamos F12 para verlo en el explorador y veremos que al desplazar el cursor por la zona que seleccionamos el puntero del mousecambiadeformaaunaManoquequieredecirquehayunvnculoyaldarclic enlazonadebedevincularconelarchivo.

ComoInsertarunaanimacindeFireworksaDreamweaver
1forma: Primero creamos la animacin, en este caso, un botn animado en Fireworks, luego damos clic en Archivo, despus en Exportar y aparecerelsiguientecuadrodonde guardaremoslaanimacin. En la zona del cuadro que dice exportardebemosseleccionarHTML eimgenes,leponemosunnombre

Prof.JulioCsarHernndezHernndez

33

alaanimacinydamosclicenExportar. CuandoyaestamosenDWdamosclicenel MenInsertaryseleccionamosObjetosde imagen,luegoHTMLdeFireworks. Yaparecerelsiguiente cuadrodondedebemos darclicenExaminar. Luego aparecer este cuadro, donde debemos seleccionarelarchivoconla extensin HTML, en este caso animacin1, damos clic en Abrir y luego en Aceptar y ya tenemos la animacin en DW, ahora al

Prof.JulioCsarHernndezHernndez

34

presionarF12,veremoslaanimacinenelexplorador. 2Forma: 1. EditamoslaimagenenFW.

2. EnlabarradeherramientasseleccionarseencuentraExportarrea.

3. Seleccionamoslaimagenyledamosclicderechosobrelaseleccin. 4. LuegoseleccionamosExportarrea.

5. Nosaparecelasiguienteventana.

Prof.JulioCsarHernndezHernndez

35

6. DamosclicenelbotndeenmedioAadircoloralatransparencia

7. Laimagenquedarcomosigue:

Prof.JulioCsarHernndezHernndez

36

8. Damosclicenexportar.

9. Nombramoselbotn,exportamoscomoHTMLeimgenes. 10.Damosclicenexportar. 11.Esimportantequecuandoestemoseditandolaimagenoptimicemos.

MENUEMERGENTE 1. 2. 3. 4. EditamoslaimagenenFW. Delabarrademenseleccionamoscomandos. Decomandosseleccionamosweb. DewebseleccionamosdefinirtextoALT.

Prof.JulioCsarHernndezHernndez

37

5. Nosaparecerlasiguienteventana

6. Aquintroduciremoseltextoquedeseamosqueaparezcaenlaimagen.

7. Despusdeintroducireltexto,damosclicenaceptar;presionamosF12para vercmoquedaenelexplorador.
Prof.JulioCsarHernndezHernndez

38

NOTA:ParaexportarlaanimacinanterioraDWhacerlospasosqueestnenla pgina31. MENUEMERGENTECONUNAIMAGEN Primeraforma 1ElprimerpasoesinsertarunaimagenenFireworks. 2Herramienta Divisin, que se encuentra en el panel de herramientas de Fireworks, de modo quenosquededelasiguienteforma. 3DamosclicenComandosqueseencuentraenla barrademens, 4Luego seleccionamos Web y despus Definir textoALT.
Prof.JulioCsarHernndezHernndez

39

5Aparecerelsiguientecuadro dondeescribiremoselTextoALT. 6DamosclicenAceptar. Al presionar F12 veremos en el explorador al pasar el cursor del mouse sobre la imagen el Texto ALT quecolocamosalaimagen. SegundaForma Al seleccionar la imagen con la Herramienta Divisin, el inspector de propiedades cambia de forma, hay una parte donde dice Alt: all escribimos el texto ALT presionamoslateclaEnterylovemosenelexploradorparaverelTextoALT.

NOTA:ParaexportarlaanimacinanterioraDWhacerlospasosqueestnenla pgina31. NOTA:Eltextoquequeramosponerenelinspectornotienelimitepodemosdigitar opegartodoeltextoquequeramosyelresultadoserelmismo. EXPORTARANIMACIONDELXARA

Prof.JulioCsarHernndezHernndez