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.

CrearunnuevodocumentodeDW

Prof.JulioCsarHernndezHernndez

11

2.
3.
4.
5.

SeleccionarHTML
LuegoCREAR
Copiamosodigitamoseltextoenmencinylopegamos.
Loguardamoscomodocumentohtmlyquedacomosigue

6.
7.

Luegoaparecerlaventanasiguiente
seleccionamoseltextodondeirelvinculo

8.

Luegodamoscliceneliconoqueseencuentraalaizquierda
delacarpeta

9.

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.

Clicenlacarpetaamarilla
Seleccionamoselarchivoquevincular

Imgenesserepitendellaformaanteriordos
COMOINSERTARUNAIMAGEN

EnlacarpetacreadaeneldiscodurollamadaMiPrimerSitio,tambin
fuecreadaunacarpetallamadaimg,quecontendrtodaslasimgenes
demipgina:

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