P a g e |1

WEBDESIGN
Ini adalah bagian kedua
darimodulwebdesign,padamoduliniberisi
tutorialMacromedia/AdobeDreamweaver.

Modulinidisertakanfilepraktekuntuk
memudahkandalampembelajaran.

arissupriadi(aarriiss.com)
SMKPerguruanCIKINI
20092010

Page1of20

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

Pendahuluan
Macromedia Dreamweaver MX 2004 (Dreamweaver) merupakan salah satu software yang mempunyai
banyak sekali kemudahan dalam pengoperasiannya namun juga sangat powerfull dalam pembuatan
website. Salah satu keunggulannya adalah kemudahannya dalam berinteraksi dengan macromedia Flash
(Flash),sebuahtoolsanimasiyangsangatpopulerdiinternet.

InterfaceDreamweaver
Interface Dreamweaver atas Main menu, Insert Menu, Document Menu dan area kerja, bersama dengan
Properties Inspector, panelpanel dan jendelajendeal yang terlihat saat membuka palikasi ini. Komponen
komponeninterfaceadalah:
1. Bar
a. MainMenuBar
b. InsertBar
c. DocumentBar
2. Panels
a. Design
b. Application
c. Files
d. TagInspector
e. Codes
f. History
3. PropertiesInspector

InsertBar
Untuk membuat website atau halaman, Insert bar bagian tools untuk memasukkan berbagai macam
image,tabel,layerdalamdokumen.UntukmembukaInsertbar,ikutilangkahlangkahberikut:
1. KlikmenuView.
2. KlikoptionToolbar.
3. PilihdanklikoptionInsert.Insertbarakanterbuka

FungsidankegunaantoolspadaInsertBaradalahsebagaiberikut:
1. Common
Common tab memungkinkah kita membuat objek yang biasa digunakan dalam website, yaitu :
Hyperlink,emaillink,namedanchor,table,images,media:plugin,date,comment,templatesdantag
chooser.
2. Layout

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

Dengan menggunakan Layout tab kita dapat menampilkan tabel dalam mode tampilan
Standard,Expanded ataupun Layout. Fiturfitur di dalamnya adalah : Table, Insert Div Tag, Draw
Layer,danlainsebagainya.
3. Teks
Teks yang telah di format dapat dimasukkan menggunakan tab Text dalam Insert bar dengan
menggunakan fiturfitur berikut : fon tag editor, bold, itlic, strong, emphasis, paraghraph, block
quote,preformatted,danlainsebagainya.

4. Forms
Untukmembuatformdanmemasukanelemenelemennya,digunakanFormtabyangmemilikifitur
fiturberikutini:form,textfield,hiddenfield,textares,checkbox,danlainsebagainya.

5. Application
KitadapatmenambahkanServerBehaviorpadahalamandenganmenggunaknaApplicationtanyang
memiliki fiturfitur berikut : recordset, stored procedure, dynamic data, repeted region, dan lain
sebagainya.

6. HTML
AndadapatmemasukkanberbagaiobjekHTMLuntukhalamanWeb.Objekobjektersebutadalah:
horizontalrules,headcontents,cripts,danlainsebagainya.

7. FlashElement
Tab ini terdiri atas satu objek yang memudahkan anda menambahkan slideshow flash ke halaman
anda.Objekinibagusuntukmenampilkankoleksiobjekyangbanyak

8. Favorites
Fituryangmembantukitauntukmengelompokkantabyangseringdigunakan.
Tips:UntukmembukapanelInsertandadapatmenggunakanCtrl+F2danuntukmembukapropertiesCtrl+F3

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

SiteControl
MenentukanSite
1. BukaDreamweaverMX2004.DijendelaManageSites,klik tombolNew,kemudian pilih Sitedari
menudropdown.KliktabadvanceddiataskiripanelSiteDefinition(tabkeduadarikiri).
2. Ketikkan nama site, misalnya Proyek Pertama, di bagian Site Name, lalu browse folder
(01_sitecontrol)sebagaiLocalRootFoldernya.
3. PastikankotakcekRefreshLocalFileListAutomaticAllydanenablecacheaktif.SetelahituklikOk
danDone

Membuatdokumen,menyimpandanmenampilkannyapadabrowser

1. PilihFile>Newuntukmembuatdokumenbaru.
Kotakdialogakanmuncul
2. PastikankategoriBasicPageterpilihdan
kemudianpilihHTMLdibagiankanan.Halini
memberiperintahkeDreamweaveruntuk
membuathalamanHTML.
3. KlikcheckboxMakeDocumentXHTMLcopliant.
KliktombolCreate
4. PilihModify/PageProperties.Dikotakdialog
PageProperties,pastikankategori
Title/Encodingterpilih,ketikkanWelcometoMy
SitedikotakTitle.KlikApplylaluOK
5. PilihFile>SaveAsuntukmenyimpanfiledengan
namaindex.html

MenambahGambar
1. Aktifkanfileindex.htmlpadalatihansebelumnya
2. KliktabCommondiInsertBar,laluplihikonImages,danpilihopsiimages,ataugunakanshortcut
Ctrl+Alt+I.Dikotakdialogyangmuncul,browsefilelogo01.jpgyangterdapatdidalamfolder
Images.KlikOK.
3. Ulangilangkahno.2untukmemasukankangambarlogo02.jpgdidalamfolderImageskedalam
halaman.Nonakifkanseleksipadagambar,lalutekanEnteruntukmemberijarakpadagambar
berikutnya.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

4. Ulangilangkahberikutnyauntukmemasukangambarbut01.jpg,but02.jpg,but03.jpg,but04.jpg,
but05.jpg,but06.jpg,separator.jpgdantemp01.jpgkemudiansimpandantampilkanmelalui
browserdenganmenekanF12.Lihathasilnyadibawahini.

MenambahTeks
1. KlikdisebelahkanangambarPDA,laluenteruntukmembuatjarak.Ketikkanhome,lalutekan
spacebar.SelanjutnyatekanShift+Backslash(\)untukmenambahpipe(|).Dantekanspacebardi
keyboard.
2. LanjutkandenganmengetikAboutUs|Support|Yourcart|Services|ContactUs

MemposisikanGambardanTeksdiTengahHalaman
1. Klikgambarlogo01.jpguntukmembuatseleksi.
2. DiPropertiesInspector,kliktombolAlignCenter
3. GunakantombolShiftuntukmembuatseleksipadagambaryanglainnyadansemuateksyang
beradadibawahnyasekaligus.
4. Simpandantampilkanmelaluibrowser.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

List
Adatigajenisyangdapatkitabuatmenggunakanlist,yaituUnorderedList,OrderedList,NestedList
MembuatUnorderedList

1. PilihFile>Newuntukmembuatdokumenbaru,pilihHTML
2. KetikanDaftarMataDiklat:,kemudianenterdanKlikikonUnorederList.Ketikantulisanberikut
ini:
InstalasiSoftware
InstalasPC
SistemOperasijaringan
WebDesign
3. Simpandengannamaunordered.htmldanbukamelaluibrowserdenganmenekanF12.Hasilnya
sepertidibawahini.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

MembuatOrderedList

1. PilihFile>Newuntukmembuatdokumenbaru,pilihHTML
2. KetikanDaftarBarangElektronik:,kemudianenterdanKlikikonorederList.Ketikantulisan
berikutini:
1. Televisi
2. TapeRecorder
3. LemariEs
4. Radio
3. Simpandengannamaordered.htmldanbukamelaluibrowserdenganmenekanF12.Hasilnya
sepertidibawahini.

MembuatNestedList
1. PilihFile>Newuntukmembuatdokumenbaru,pilihHTML
2. KlikikonorederList.Ketikantulisanberikutini:
1. Satu
2. Dua
3. DuaSatu
4. DuaDua
5. DuaDuaA
6. DuaDuaB
7. DuaDuaC
8. DuaTiga

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

9. Tiga
10. Empat
11. Lima
3. Blokpadanomorurut3hingga8sepertigambardibawahinidanklikikonTextIndent

4. BlokdarinomoriiihinggaVdanklikikonTextIndent.

5. Simpandengannamaordered.htmldanbukamelaluibrowserdenganmenekanF12.Hasilnya
sepertidibawahini.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

MemodifikasiPageProperties

1. BukafileIndex.htmlyangsebelumnyadigunakan.
2. PilihEdit/Preferences.PastikankategoriGeneral
tersorotdibagiankirijendela.Hilangkantandadari
checkboxUseCSSInsteadofHTMLTags.
3. PilihModify/PagePropertiesataugunakanshortcut
Ctrl+J.
4. AturjendelaPagePropertiesdanjendeladokumen
terdisplaysecarabersamaan.
5. KlikkotakkecildisampingkananBackgrounddan
gerakanEyeDropperkewarnayangdiinginkan.Klik
Apply.
6. Ketikkan#000000dikotakisianTextColor
7. PilihLinkspadaCategory.Isikan#000642padakotak
LinkColordan#666666dikotakisianVisitedLinksdan
#000642padaisiankotakActiveLink.
8. Simpandanbukamelaluibrowser.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

Link
MembuatLinkdenganPointtoFile
PointtoFilemerupakanmetodealternatifuntukmembuatlinkpadahalamanweb
1. Salinlahfolder02_linkkedalamkomputerdangunakansebagaiLocalRootFolder.
2. Bukafileindex.html.aktifkanpanelFiles.AturposisijendeladokumendanpanelFiles.
3. Seleksigambarabout.gif(aboutus).DiPropertiesInspector,klikdantahanikonPointtoFiledi
sampingkotakLink.SetelahitudragPointtoFilekefileaboutus.htmldalamfolderaboutusyang
beradadipanelFiles.PerhatikankotakLinkmendisplayfileyangdilink.
4. Ulanglangkahnomor3untukmembuatlinkgambarframes.gif(frames)denganfileframes.htmldi
dalamfolderframes,lalugambarlocations.gif(locations)denganfilelocations.htmldidalamfolder
locations,dangambarcontact.gif(contact)denganfilecontactus.htmldidalamfoldercontactus
denganmenggunakanPointtoFile.
5. SimpandantekanF12untukmenampilkanhalamankebrowser.

MembuatLinkEmail
1. Bukafileemail.html.KlikdalamseldisampingkiribarisGeneralInformation.
2. KlikikonEmailLinkditabCommon.DikotakdialogEMailLink,ketikkanGeneralInformationdi
kotakText,kemudiantekantombolTab,danketikkaninfo@website.comdikotakEMail.KlikOK.
3. KlikdididalamseldisebelahkiribarisOrder/SalesInformation.
4. KlikikonEMailLinkditabCommonpadaInsertbar.PadakotakdialogEMailLink,ketikkan
orders@website.comdikotakText.Kemudianorders@website.comdikotakEMail.klikOK.
5. KlikdidalamseldisampingkiribarisComments/Suggestions,kemudianketikkan
comments@website.comdiselyangkosongitu,dansorotteksdenganmengklikdanmendragdari
tekssampaidenganakhirtab.
6. DiPropertiesInspector,ketikkanmailto:comments@website.comdalamkotakLink,dantekan
Enter.
7. SimpandantekanF12untukmelihathalamanwebdibrowser.

MembuatNamedAnchor
1. Bukafileanchor.html
2. KlikdiataskataName:Warp
3. KlikikonNamedAnchorataugunakanshortcutCtrl+Alt+A.DikotakdialogNamedAnchor,
ketikkanwarp,danklikOK.
4. KlikdiataskataName:Bean,kemudiantekanCtrl+Alt+A.DalamkotakdialogNamedAnchor,
ketikkanbean,danklikOK.
5. KlikdiataskataName:Zody(mintjelly),kemudiantekanCtrl+Alt+A.DalamkotakdialogNamed
Anchor,ketikkanzodymint,danklikOK.
6. KlikdiataskataName:Zody(pinkdew),lalutekanCtrl+Alt+A.DalamkotakdialogNamed
Anchor,ketikkanzodypin,danklikOK.
7. KlikdiataskataName:Pillow,lalutekanCtrl+Alt+A.DalamkotakdialogNamedAnchor,ketikkan
pillow,danklikOK.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

10

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

8. KlikdiataskataName:Toot,lalutekanCtrl+Alt+A.DalamkotakdialogNamedAnchor,ketikkan
toot,danklikOK.
9. Sorotkatawarpyangadadisuduttkiriatashalaman.
10. DiPropertiesInspector,klikPointtoFile,kemudiandragkeAnchorMakerdiatasteksName:
Warp.Setelahitu,lepaskantombolmouseuntukmembuatlink.PerhatikandikotakLinkterdapat
tanda#warp.
11. Ulangilangkahnomor10untukmembuatlinkanchorpadateksbeandenganAnchorMakerteks
Name:Bean,tekszody/mintjellydenganAnchorMakerteksName:Zody,tekszody/pink
dewdenganAnchorMakerteksName:Pillow,tekstootdenganAnchorMakerteksName:
toot.
12. TekanF12untukmelihathalamandokumendibrowser.
13. KembalikeDreamweaver,kemudianbuatAnchorMakerdengannamatopdisebelahkiriClickdi
bagiankiriatashalamandokumen.
14. SorottekstopofpagedibawahketerangankacamataWarp.
15. DiPropertiesInspector,klikPointtoFile,kemudiandragkeAnchorMakeryangbarudibuat(di
sebelahkirikataClick),danlepaskantombolmouse.
16. Ulangilangkahnomor14dan15untuksemuateksTopofPageyanglainnya.
17. TekanF12untukmempreviewhalamandiwebbrowser,lalusimpandantutupdokumen.

MembuatImageMap
1. Bukafileimagemaps.html
2. Seleksigambarlogo02.jpg
3. DipropertiesInspector,ketikkannavbardikotakMap.
4. KlikRectangularHotspotTools.Setelahitu,klikdandragdisekitarteksframes,klikBrowseforFile
danbrowsefileframes.html(folderframes).KlikOK.
5. Denganimagemapmasihterseleksi,ketikkanseetheframesdikotakAltdalamPropertiesInspector
danklikEnter.
6. Ulangilangkahno25untukmembuathotspotpadatekshomedansitemappadafileaboutus.html
(folderaboutus),locations.html(folderlocations)dancontactus.html(foldercontactus)
7. SimpandantekanF12untukmelihathalamandokumendibrowser.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

11

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

Tabel
MengubahBorderTabel
1. Gunakanlahfolder03_tablesebagailocalrootfolder.
2. Bukafiletableformat.htmldantekanF12.Perhatikangarisbordertabletidakterdisplaydibrowser.
3. KembalikeDreamweaver.Klikdidalamtabelsehinggamuncul<table>diTagSelectoryangterletak
dikiribawahjendeladokumen.Klikkata<table>tersebutuntukmembuatseleksipadakeseluruhan
tabel.
4. DiPropertiesInspector,ketikkan1dikotakisianBorder,kemudiantekanF12untukmelihat
tampilantabelnya.
5. DiDreamweaver,klikdidalamselyangterletakdikiriatastabel.KliktombolCodeuntukmengubah
tampilan.Klikdandraguntukmemilih&nbsp;,lalutekanDeletepadakeyboard.Penghilangankode
inibertujuanagarselyangkosongtersebuttidakmemilikiborderdisekelilingnya.Tekantombol
Designuntukkembaliketampilansebelumnya.
6. SimpandantekanF12untukmelihathasilnya.

MembuatdanMemodifikasiTabel
1. Bukadokumenbaru(Ctrl+N)
2. Savedengannamafirsttable.html
3. KetikkanMyFirstTablepadakolomDocumentTitle.TekanEnter.
4. KliktombolInsertTableditabCommonpadaInsertbar.
5. DikotakdialogInsertTable,pastikankotakisianRows=6,Columns=4,Width=600pixels,dan
BorderThickness=1.KlikOK.
6. BukapanelAssets,lalucarifilee01.gif.klikdandraggambarinikedalamseldikiriatas.Lanjutkan
memasukkangambare02.gif,e03.gif,e04.gif,e05.gifdane06.gifkeselselyangadadibawah
secaraberurutan.
7. Klikdandraguntukmemilihduaseltengahpadabarispertama.DiPropertiesInspector,kliktombol
Mergesselectedcellsusingspansuntukmergerkeduaseltersebutmenjadisatu.Ulangiprosedur
iniuntukbariske2sampai6.
8. Klikgambaryangadadidalamselkiriatas.PerhatikandiPropertiesInspector,lebargambar
tersebutadalah117pixels.Kitaperlumengaturlebarseltersebutmenjadi117pixels.
9. Gerakkankursorkepinggirataskolompertamasampaiberubahmenjaditandapanahhitam.Klik
satukaliuntukmemilihkeseluruhankolom.DiPropertiesInspector,isikotakisianW=117.
10. Uloangilangkahno8dan9untukmengubahlebarkolomtengahmenjadi408dankolomsebelah
menjadi75.
11. Klikdidalamseltengahatas,pilihModify>Table>InsertRowsorColumns.Dikotakdialogyang
muncul,pilihInsert:Rows,NumberofRows:1,Where:AbovetheSelection.
12. Klikdandraguntukmemilihsemuaseldalambarisyangbarudibuat.KliktombolMergeselected
usingcellsspansdiPropertiesInspector.
13. Bukafiletabledone.htmlsebagaipedomanuntukmenambahkanteksdanwarnapadatabel.
14. SimpandantekanF12untukmenampilkannyamelaluibrowser.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

12

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

MengaturPosisiGambardanTeksdalamTabel
1. Bukafilebodycopy.html.tekanF12untukmelihathalamandokumendibrowser.
2. DiDreamweaver,buatdokumenbarudenganmemilihFile>New.Simpandokumentersebut
dengannamaalign.htmldalamfolderTable.
3. PilihModify>PageProperties.DikategoriGeneral,ketikkanAlignmentWithTablesdikotakisian
Title.DikategoriAppearance,isikankotakisianwarnaBackground=DF9300,danwarnatext
=FFFFFF.KlikBrowsedisampingpilihanBackgroundImage.Browsefilebkg_large.gif,danklik
OpenuntukkembalikejendelaPageProperties.Terakhir,klikOK.
4. PilihInsert>Table.Dikotakdialogyangmuncul,isikanRows=2,Columns=3,TableWidth=600
Pixels,danBorderThickness=0.KlikOK.
5. PilihsetiapkolomsecaraterpisahdanaturW(lebar)setiapkolom200pixelsdiProprtiesInspector..
6. Bukafilebodycopy.html
7. Seleksiteksyangmemuatinformasialamatdantelepon,kemudiansalin,danpastedifilealign.html
padakolom2,baris1ditabel.
8. PilihWindow>bodycopy.html,kemudianseleksi,dancopyparagrafpertama.Bukadokumen
align.html,pastedikolom2baris2.
9. Lanjutkandenganmengcopydanpasteparagrafkeduakedalamkolom3,baris2.Tutupdokumen
bodycopy.html.
10. Didokumenalign.html,klikdimanasajadalambariskedua,lalukliktag<tr>diTagSelectoruntuk
memilihkeseluruhanbariskeduatabel.AtursettingVertdiPropertiesInspectormenjadiTop.
11. DIDreamweaver,seleksitabeldenganmengklikdidalamnya.Lalumemilihelemen<table>didalam
TagSelector.PadaPropertiesInspector,isikanCellSpace=10,tekanF12untukmelihathasilnya.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

13

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

Layout
MengaplikasikanTracingImage
1. Gunakanfolder04_layoutsebagaiLocalRootFolder.
2. Bukafileindex.html.pilihModify>PageProperties,laluklikBrowsedisampingpilihanTracing
Image,danbrowsefiletracingimage.jpgyangadadidalamfolderImages.Terakhir,klikOK.
3. PastikanTransparacySliderdipilihanImageberadapada100%.KlikOK.
4. TekanF12untukmempreviewhalamandokumenpadabrowser.PerhatikanbahwahalamanWeb
masihberupablankdocument.
5. DiDreamwever,pilihModify>PagePropertiesuntukmengaksesTransparacyImagelagi.
6. DragTransparacySliderpadapilihanImageTransparacykeposisi50%.KlikOK.
7. PilihFile>Saveuntukmenyimpandokumen.
MenambahLayer
1. Bukafileindex.html,pilihInsert>LayoutObjects>Layer.
2. KlikLayerSelectionHandleyangberwarnaputih,kemudianpindahkan,danaturposisilayertepat
padaposisigambarBeverlyyangadadisebelahkanan.
3. Klikdidalamlayer,lalupilihInsert>Image.BrowsefileBeverly.gifdifolderImages,danklikOK.
4. AktifkantabLayoutdiInsertbar,danklikikonDrawLayer.Selanjutnya,buatlayertepatpadaposisi
gambardanteksMelroseyangterletakditengah,laluklikobyekInsertImage,dancarifile
Melrose.gifdalamfolderImages.Terakhir,klikOK.
5. Ulangilangkahnomor4untukmenempatkanfileSouthcoast.jpgkegambartracingimagepaling
bawah.
6. BuatlayerdisekitarteksAboutI.a.Eyeworks.DipanelAssets,klikduakalistyles.txt,copykedalam
layeryangbarudibuat.
7. TekanF12untukmempreviewhalamandokumendibrowser.KembalkeDreamweaver,lalusimpan
filedanbiarkandokumenterbuka.
MengubahLayermenjadiTabel
1. PilihModify>PageProperties.HapuspenanamanfiledikotakTracingImage(biarkankosong).
2. Padafileindex.html,pilihModify>Convert>LayertoTable.
3. DikotakdialogConvertLayertoTable,aktifkanpilihanMostAcuratediTableLayout,kemudian
aktifkanpilihanUseTransparentsGifts,danaktifkanpilihanPreventLayerOverlapsdiLayoutTools.
KlikOK.
Angka0padakotakisianBordermerupakandefaultukuranborderpadasaatlayerdiubahmenjadi
tabel.Angka0jugamenunjukkanbahwabordertersebuttidakakanterlihatbilahalamandokumen
terdisplaydibrowser.
4. TekanF12untukmelihathasilnya.Simpandokumendanbiarkantetapterbuka.
MengubahTabelmenjadiLayer
1. Difileindex.html,pilihModify>Convert>TablestoLayers.
2. DikotakdialogConvertTablestoLayers,nonaktifkankotakcekSnaptoGrid.KlikOK.
3. KlilayeryangberisigambarMelrose(tengah),laludenganmenggunakanLayerSelectionHandle,
draglayersehinggaposisibagianatasnyasejajardenganposisibagianbawahgambarBeverly(atas).
4. Ulangilangkahnomor3untukmemindahkanposisigambarSouthcoast(palingbawah).

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

14

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

5. PilihModify>Convert>LayerstoTables.KlikOK.
6. PilihModify>PageProperties,ubahwarnaBackgroundmenjadi#DF9300.AturwarnaText=
#FFFFFF.KlikOK.
7. TekanF12,lalusimpandantutupdokumen.
TabelLayoutdanSelLayout
1. Bukafilenavbar_done.htmlyangadadalamfolder04_layout.
2. DitabLayoutpadaInsertbar,kliktombolLayoutmode.
3. KlikOKpadakotakdialogyangmuncul.
4. TekanF12untukmenampilkanhalamandibrowser.Perhatikanisiteksmemanjangsesuaidengan
jendelabrowser.
5. KembalikeDreamweaver,tutupdokumennavbar_done.html.
6. Buatdokumenbarudansimpanfiletersebutdengannamanavbar.html.
7. KlikikonLayoutTablepadapanelInsert.Kitaakanmembuattabeldalamdokumen.
8. Klikdandraguntukmembuattabeldarisudutkiriatas,berukuransekitar575x200pixel.
9. DiInsertbar,klikikonDrawLayoutCell,untukmenggambarselselterpisahdidalamtabel.
10. Klikdandragdarisudutkiriatastabellayoutuntukmembuatseldengantinggi=44pixelsdanlebar
samadengantabel.
11. KlikikonDrawLayoutCellkembali,lalugambarsellainnyadarisudutkiribawahselyangbaru
dibuatdenganukuran248x42pixels.GunakanPropertiesInspectoruntukmengubahukuransel.
12. KlikikonDrawLayoutCell,lalugambarselyanglaindisebelahkananselyangterakhirdibuat
denganlebaryangsamadengantabel.
13. KliktabLayoutberwarnahijaudisudutkiriatas,laludraghandledikananbawahtabelkeatas,
14. Klikborderselyangbesardiatasuntukmenyeleksinya.DipropertiesInspector,ubahwarnaBG
menjadi#FFFFF.
15. Ulangilangkahno.14untukmengubahwarnaBGduaselyangadadibawahmenjadi#DF9300.
16. Klikdidalamselkiribawahdanmasukkanlogo.gifkedalamsel.
17. Klikdidalamselkananbawahdanmasukkangambarabout.gif,frames.gif,locations.gif,dan
contact.gifkedalamseltersebut.
18. Gerakkankursorkegaristepiselkananbawahhinggabordercellberwarnamerah,laluklikuntuk
memilihnya.DiPropertiesInspector,aturalignmentHorzmenjadiRight.
19. Kliktandapanahkecildibagianbawahselkananbawah.PilihMakeColumnAutostretch.Garis
kolompalingbawahakanberubah.
20. DikotakdialogChooseSpacerImage,pilihCreateaspacerImagefile,laluklikOK.
21. Simpanspacer.gifkedalamfolderImages.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

15

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

Frames
MembuatFrameset
1. Aturlahfolder05_frame_csssebagaiLocalRootFolder.PilihFile>Newuntukmembuatdokumen
baru.
2. MatikantampilanGridbilamasiterlihat(gambarkotakkotakkecilsepertimilimeterblok).Pilih
menuView>Grid>ShowGrid(tandacentangnyaharustidakada).
3. PilihModify/Frameset/SplitFrameLeft.Langkahinimenempatkangarisvertikalyangmembagi
framemenjadidua,yaituframekanandanframekiri.
4. PilihFile>SaveAlluntukmenyimpanframesetdengannamaframeset.html.
5. PerhatikanframekanantersorotdankotakdialogSaveAsmuncullagi.Halinimenunjukkanframe
namayangakandisimpanselanjutnya.Isikanright.htmldikotakisianNamepadakotakdialog
tersebut,danklikSave.Setelahitu,ketikkanleft.htmldalamkotakisianNamepadakotakdialog
Saveyangmuncul,laluklikSave.
6. Seleksiframeset,danpilihModify>PageProperties.IsikanMyFirstFramesetdikotakisianTitle
dalamkotakdialogPageProperties,danklikOK.LangkahinimengubahnamajudulUntitled
DocumentmenjadiMyFirstFrameset.
7. PilihFile>SaveAlluntukmenyimpandokumen.
MemberiWarnapadaFrame
1. Bukafileframeset.htmldarifilelatihanhasiltahapansebelumnya.
2. KlikdidlaamframekiridanpilihModify>PageProperties.DikotakdialogPageProperties,isikan
Background=#DF9300,Text=#FFFFFF,danLinks=#FFFF00,VisitedLinks=#FFFF99,ActiveLinks=
#FFFF99.KlikOK.
3. Klikdidalamframekanan,lalupilihModify>PageProperties,danisikanBackground=#DF9300,
Text=#FFFFFF,danLinks=#FFFF00,VisitedLinks=#FFFF99,ActiveLinks=#FFFF99.KlikOK.
4. BukapanelFrames,laluklikborderpalingluaruntukmengaktifkanframeset.Diproperties
Inspector,aktifkanframekiridanisikan150PixelsdikotakisianColumn.Selanjutnya,pilihNodi
menuBorder,kemudianisikan0dikotakBorderWidth.
5. SimpandantekanF12untukmelihathasilnyadibrowser.
LinkdanTarget
1. Bukafileframeset.html.klikpadaframekiri,danketikkanContactUs.
2. SeleksiteksContactUs,laluklikfolderyangadadisebelahpilihanLinkdalamPropertiesInspector.
Browsefilecontactus.htmlyangterdapatdalamfolderhtml.
3. Simpandokumen.File>SaveAll.
4. TekanF12untukmencobalinkyangtelahdibuat.
5. DiDreamweaver,pilihWindow>Frames.PerhatikandidalampaletFramessisikanandankirinya
tertulis(noname).
6. KlikkotakkiripaletFrames,kemudianketikkanleftdikotakisianFrameNamepadaProperties
Inspector.UlangilangkahyangsamauntuksisikananpaletFramesdanberinamarightdikotakisian
FrameNamenya.TekanEnter.
7. SeleksiteksContactUsdiframekiridanpastikanPropertiesInspectoraktif.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

16

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

8. Kliksegitigayangmenghadapkebawah,disampingkotakisiantarget,lalupilihrightdimenupop
up.Simpandokumen(File>SaveAll).
9. TekanF12untukmempreviewhalaman,aktifkanlinknya,sekaranghalamanContactUsberadadi
framekanan.
10. Simpan(File>SaveAll).
MenambahGambarLatarBelakang
1. Bukafileframeset.html,klikdalamframeleft.html(framedisebelahkiri)danpastikankursortext
insertionnyaberadadisebelahkananteksContactUs.
2. PilihModify>PageProperties.DikotakdialogPageProperties,kliktombolBrowsedisamping
kotakisianBackgroundImage,kemudiabrowsefilebg_eyeglasses.jpgdidalamfolderimages,dan
klikOK.
3. Lakukanhalyangsamadengantahapnomor2untukframeright.html.
4. AktifkanpanelFrames.Klikdiborder/pigurapalingluardaripaletFramesuntukmengaksesColumn
ValuediPropertiesInspector.
5. DiPropertiesInspector,klikframekiri,laluisikan150PixelsdikotakisianColumn.Setelahitu,klik
framekananlaluisikanRelativesdikotakisianColumn.
6. SimpandantekanF12.
MenggabungkanLatarBelakangdiantaraDuaFrame.
1. Bukafileframeset2.html,kemudianklikdiframekiridanpilihModify>PageProperties.
2. DikotakdialogPageProperties,kliktombolBrowsedisampingBackgroundImage.Browsefile
bg_left.jpgyangterletakdalamfolderImages.KlikOK.
3. Lakukanhalyangsamasepertinomor2diatasuntukframekanan,lalubrowsefilebg_right.jpgdan
klikOK.
4. AktifkanpaletFrames(Window/Frames).Kemudianklikborderpalingluaruntukmengaksesukuran
framesetdiPropertiesInspector.
5. PerhatikanpanelPropertiesInspector,klikpadaframe/kotakyangkirikemudianisikanBorder=No,
BorderWidth=0,ColumnValue=150,danUnits=Pixels.
6. KlikframekanandiPropertiesInspector,laluisikanUnits=Relative.SavedokumendantekanF12.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

17

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

CSS
RedefineHTMLStyledenganStyleSheet
1. Bukaredefine.htmldanbukajendelaCodeInspectoruntukmelihatkodeHTMLnya.Perhatikan
bahwahalamaninisangatsedikitmenggunakantagHTMLdantidakadaformatting.
2. PilihWindow>CSSStyleuntukmegaktifkanpanelCSSStyle.Klikpanahdikananataspalet,
kemudianpilihNewdimenuyangmuncul.
3. DikotakdialogNewStyle,pilihTag(redefinethelookofspecificTags)dioptionSelectorType,
kemudianpilihbodydimenudropdownTag.Simpanstyleinididalamfolderstylesheets.
4. DikotakdialogStyleDefinition,dikategoriType,pilihFont=Verdana,Arial,Helevetica,sansserif,
Size=10pixel.DalamkategoriBackground,isikanBackgroundColor=#DF9300.Selanjutnya,klik
Apply,laluklikOK.
5. DibagiabawahpanelCSSStyle,klikikonNewStyle.DikotakdialoNewStyle,pilihtag=h1,
kemudianaktifkanTag(redefinethelookofspecifictag),danklikOK.
6. DikotakdialogStyleDefinition,padakategoriType,pilihFont=Verdana,Arial,Helvetica,snsserif
Size=14pixel,Style=Normal,danisikanColor=#000000.KlikOK.Dikategoriborder,hilangkan
semuatandacekSameforall.IsikanBottom=solid,thin,#000000.Iniakanmembuatborderhitam,
tipisdibawahsemuaelemen<h1>.KlikOK.
7. DipanelCSSStyles,kliktombolNewCSSStyle.Dikotakdialog,pilihopsiTag=h2,pastikanTag
(redefinesthelookofspecifictag)terpilihdanopsiDefineinberisiredefine.css.
8. DikotakdialogCSSStyleDefinition,dalamkategoriType,isikanSize=12pixels,Style=italic.Di
kategoriBackground,isikanBackgroundcolor=#CCC99.KlikOK.
9. LihatkodeHTMLuntuktag<h2>dijendelaInspector,lalusimpan,dantutupdokumen.
MendefinisikanCustomClass
1. Bukafilepressrelease.html
2. KlikikonNewStyledibagianbawahpanelCSSStyle.
3. DikotakdialogNewStyle,ketikkan.topcopydikotakisianName(pastikandiawalnamaadatitik)
danpilihClass(canapplytoanytag)untukoptionselectortype.Pastikanopsidefineinberisi(New
StyleSheetFile).KlikOK.
4. Simpanstylesheetdengannamapress.cssdidalamfolderstylesheet.DikotakdialogCSSSite
Definition,padakategoriType,isikanFont=Verdana,Arial,Helvetica,sansserif,Size=10pixels,
Color=#000000.DikategoriBlock,Textalign=right.KlikOK.
5. DipanelCSSStyles,kliktombolNewCSSStyledanisikanName=.header.KlikOK.DikategoriType,
isikanFont=Georgia,TimesNewRomans,Times,serid,Size=16pixels,Styles=italic,Color=#000000.
DikategoriBorder,hilangkantandacekpadasemuaopsiSameforALL.AturopsiBottom=solid,thin,
#000000.
6. DipanelCSSStyle,kliktombolNewCSSStyle.PastikanClassterpilihdanisikanName=.bodycopy.
OpsiDefineinberisipress.css,klikOK.dikategoriType,isikanFont=Verdana,Arial,Helvetica,sans
serif,Size=12pixels,color=#000000.KlikOK.
7. BukajendelaPropertiesInspectordanklikdibaristanggaldibagianatashalamandokumen.Di
menudropdownStylepadaPropertiesInspector,pilihtopcopy.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

18

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

8. Ulangilangkahno.7untukbarisyangberisipressreleasedenganstyletopcopy,baristeksyang
dimulaidengankataDedicateddigunakanstyleheader,untukkelimaparagrafteks,gunakanstyle
.bodcopy.
9. Simpandantutupdokumen.

PanelRelevantCSSuntukmengeditCSSStyle
1. Bukafilepressrelease.html.PastikanpanelRelevantCSSterbuka(Window>TagInspector).
2. KlikdibariskalimatyangdiawalikataDedicated.DipanelRelevantCSS,klikkatasoliddisebelah
kananopsiborderbottomstyle.Akanmunculmenudropdown,kemudianpilihdashed.(Perubahan
tidakterlihatdihalamanDreamweaver,tapiakanmunculdibrowser).
3. KlikbeberapaelemenlainnyauntukmengeditdidalampanelRelevantCSSsesuaikeinginananda.
4. TekanF12untukmenampilkannyadibrowser.Simpandantutupdokumen.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

19

SMK PERGURUAN CIKINI

Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Ut ara

Program Keahlian
Kelompok Teknologi Komputer dan Jaringan

Template
BekerjadenganTemplate
1. Gunakanlahfolder06_templatesebagaiLocalootFolder.
2. Bukafileopeneyeworks_color_01.html.Fileinidanbeberapafilelainyanmemilikitemplatcolor
schemeyangsama,yaitueyeworks_color_02.htmldaneyeworks_color_03.html.
3. BukapanelAssets(Window>Assets),kemudiankliktomblkategoriTemplatesuntukmenampilkan
templatedihalamananda.
4. Piliheyeworks_colordipanelAssets,laluklikikonEditdibagianbawahpaneltersebut.File
templatesudahterbuadandapatdiedit.
5. PilihCommand>SetColorScheme.Dikotakdialog,pilihBackground:white,TextandLinks:
Purple,Orange.KlikApply,laluklikOK.
6. Tutupfiletemplateeyeworks_color.dwtdansimpanperubahanyangdilakukan.(Dikotakdialog,klik
Yes).DikotakdialogUpdateTemplateFiles,klikUpdate.Semuafileyangmenggunakanfileiniakan
diperbaharui.HasilupdatedapatdiketahuidikotakdialogUpdatePagesyangmuncul.KlikClose
untukmenutupkotakdialog.
7. Bukafileeyeworks_color_02.html,eyeworks_color_03.html,eyeworks_color_04.html.perhatikan
bahwasemuafilememilikicolorschemeyangbaru.Tutupsemuafile.
MembuatTemplateBaru
1. Bukafilesunglasses_01.html.PilihFile>Saveastemplate.Dikotakdialogyangmuncul,pastikan
namanyasunglasses_01.html,laluklikYes.KlikYesdikotakdialogyangmuncul.
2. Klikdidalamselataspadatabelditengahdokumen.PilihInsert>Template>Objects>Editable
Region.DikotakdialogNewEditableRegions,isikansunglasses_photodanklikOK.
3. Uangilangkahno.2untukselyangbawah,isikansunglasses_info.
4. Tutupfileinidanpastikanandamenyimpannya.
5. PilihFile>New>Templates.Dikotakdialog,sorotsunglasses_01,laluklikCreate.Simpanfileini
dengannamago.htmldidalamfoldertemplate.
6. Sorottekssunglasses_photodiselatasdantekanDelete.KliktombolInsertImagediInsertbar.
7. Carifilego.jpg,laluklikOpenuntukmemasukkannyakedalamsel.
8. Sorottekssunglasses_info,tekanDelete,ketikkan
Go
Thesegroovyshadesaregreatforthegalorguwholovestomakestatemants.Notonlyarethey
styintothemax,theyrealsolightweightandprovie100%uvprotection.
OurGOSunglassescomeinIvarietyofcolorcombnationsthatwillsuityoureverymood.
9. Simpandanbiarkanfileinitetapterbuka.Kitaakanmemakainyadilatihanselanjutnya.
MemodifikasiTemplate
1. Pastikanfilego.htmlmasihterbuka.Klikduakalitemplatesunglasses_01.htmldipanelAssets
untukmembukanya.
2. Klikdidalameditableregionsunglasses_info.DipropertiesInspector,kliktombolAlignCenter.
3. Tutupfileinidanpastikanandamenyimpannya.KlikYesdikotakdialogyangmuncul.Bilamuncullagi
kotakdialog,klikupdate.LaluklikClose.
4. Simpandantutupsemuafileyangterbuka.

Modul Program Mata Diklat Web DesignMacromedia Dreamweaver MX 2004- Aris Supriadi (aarriiss.com)

20