The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.

Tutorial 5 Hari Menggunakan Adobe Dreamweaver CS4

Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by Perpus Kota Semarang, 2018-10-30 19:13:47

Tutorial 5 Hari Menggunakan Adobe Dreamweaver CS4

Tutorial 5 Hari Menggunakan Adobe Dreamweaver CS4

Menggunakan

[do[e ll]eamweauer GS4

Diterbitkan Atas Kerj asama
WAHANA KOMPUTER

Tuloriol 5 Hqri: Menggunokon Adobe Dreomweover C54

Hok Cipto O 2009 podo WAHANA KOMPUTER.

Jl. MT. Horyono 637 Semorong Telp. (024) 83 I 4727, 841 3238, 84 I 3963
Fox. (024) 8413964

Editor : Nikodemus WK

Setting : Sri Sulistiyoni

Desoin Cover : Arif

Korektor : Suci Nurosih f Aktor Sodewo

vGt'1;+ 3f;::\;;^lli'-filsffi:,,:;;:T:il? Yosvoko*o

Hok Cipto dilindungi undong-undong.
Dilorong memperbonyok otou memindohkon sebogion otou seluruh isi buku ini dolom

bentuk opopun, boik secoro elektronis moupun mekonis, termosuk memfotocopy,
merekom otou dengon sisiem penyimponon loinnyo, tonpo izin tertulis dori Penulis.

Penerbit: C.V ANDI OFFSET (Penerbit ANDI)
Jl. Beo 38-40, Ielp. (027 4) 561 88.i (Hunting), Fox. (O27 41 588282
Yogyokorto 55281

Percetokon: ANDI OFFSET

Jl. Beo 38-40, Ielp. (O27al561 881 (Huntins), Fox. (O274) 588282
Yogyokorto 55281

Perpuslokoon Nosionol: Kololog dolom Terbilon (KDT)

Tutoriol 5 Hori: Menggunokon Adobe Dreomweover CS4 /
- Ed. I . - Yogyokorto: ANDI; Semorong: WAHANA KOMPUTER;
18 t7 16 15 t4 13 t2 lr to 09

viii + 248hlm.; 16 x 23 Cm.

to98765432r
ISBN:978 -979 - 29 - 0856 - 6
l. Grophics Designer
l. WAHANA KOMPUTER Semorong

DDC'21: 006.69

I nternet adatah sesuatu yang sudah tidak asing tagi di tetinga
I khatayak. Sebagai media informasi, dari waktu ke waktu, internet
I mengalami perkembangan yang begitu pesat. Hat inijuga mendorong

perkembangan informasi yang sangat pesat tanpa mengenal ruang dan
waktu. Ketebihan tersebuttah yang menjadikan keberadaan internet
begitu penting sebagai media informasi yang pating efektif.

Perkembangan website tersebut juga mendorong perkembangan

program aptikasi untuk pembangunan website. Satah satu program
aptikasi tersebut adatah Adobe Dreamweaver dengan versi terbarunya,
yaitu Adobe Dreamweaver CS4. Adobe Dreamweaver mendukung
pengodean website dengan bahasa yang lengkap, mutai dari HTML, CSS,
JavaScript, PHP, ASP, )01r1L, dan lain-[ain. Fitur-fitur Adobe Dreamweaver

akan ditampitkan secara visual sehingga mempermudah para

pengembang website yang betum mengenaI bahasa pembangun website.

Buku Iutorial 5 Hari: Menggunakan Adobe Dreamweover C54 ini mem-
bahas secara praktis langkah demi langkah pembangunan sebuah

website. Datam waktu lima hari, Anda akan dipandu datam pemanfaatan
Adobe Dreamweaver CS4 untuk membuat website, yang dimutai dari
pengenalan Adobe Dreamweaver CS4, pembuatan layout dan pengaturan

teks, pembuatan navigasi dengan berbagai teknik, mempercantik

hataman web dengan CSS dan pembuatan hataman website interaktif.

I'TRUIffUR PENUIISA]'I BUKU

Buku lutorial5 Hari: Menggunakan Adobe Dreomweaver C54 membahas
tangkah demi [angkah dasar-dasar pembangunan website. Agar tebih
jetas datam pemahaman materi yang akan disampaikan, buku ini dibagi

ke datam lima bab, yaitu

Bob ! Hqri Pedomo: MengenolAdobe Dreomweover CS4

Bab ini berisi pengenatan Adobe Dreamweaver CS4 yang metiputi
pembahasan fitur-fitur baru, instatasi Adobe Dreamweaver C54,
pengenatan area kerja (workspace) Adobe Dreamweaver CS4,

M Tubdd 5 Hod: A/rggurubn Adobe Dreonr'r,wrrcr CS4

dan pembuatan, pembukaan dan penyimpanan dokumen website
hingga perangkat aptikasi tambahan yang dipertukan datam
perancangan website.

Bqb ll Hori Keduo: Mengelolo Loyout don Content Teks

Websile

Bab ini menjetaskan tangkah-tangkah pembuatan [ayout website

dengan tabe[, frame, dan layer. Juga, pengetotaan tek, seperti

pembuatan paragraf dan berpindah baris, pemformatan teks,

seperti jenis, warna, dan ukuran font tek.

Bob lll Hori Ketigo: Mengelolo Novigqsi don Aset Website

Pada bab ini Anda akan betajar pengetotaan dan pembuatan
navigasi dengan teks atau gambar dengan teknik-tekniknya.
Setain itu, akan dibahas juga tentang pengetotaan aset yang

dimitiki web.

Bqb lV Hqri Keempot Mempercontik Holomon Web

Bab ini berisi materi dasar CSS, bagaimana membuat CSS dan
menerapkannya pada hataman web. Setain itu, bab ini juga
berisi pembahasan beberapa widget Spry untuk mempercantik

hataman web.

Bob V Hori Kelimo: Mengelolq Website lnferok*if

Bab ini berisi pengetotaan website interaktif yang membahas

pembuatan form dan komponen form serta vatidasi form dengan

widget Spry. Setain itu, bab ini akan membahas penggunaan

Action Behaviors yang merupakan fasititas Adobe Dreamweaver
cs4.

APA YANG IIARIJS ANDA TruASAT?

Buku ini akan membahas pembuatan website secara visual dengan Adobe
Dreamweaver C94. Agar tebih mudah memahami pembahasan buku,
Anda diharapkan sudah mempunyai konsep awal tentang website dan

internet. Setain itu, Anda juga diharapkan sudah mengerti dasar-dasar

hok b

desain grafis dengan program-program, seperti Adobe Photoshop,
Firework, Ftash, dan [ain-tain untuk mendukung pembuatan website.

BAGI PARA PEIUIBACA

Walaupun datam penyusunan buku ini kami tetah melakukan pengkajian
dan penetitian yang mendalam serta berusaha untuk menyampaikan

materi secara lengkap dan terstruktur, tetapi tentu masih ada

kemungkinan bahwa setiap karya menjadi tidak sempurna, mungkin saja
buku ini betum bisa memenuhi kebutuhan para pembaca, atau mungkin

para pembaca masih mengatami kesutitan atau masatah setelah

mempetajari buku ini.

Untuk itu, Wahana Komputer membuka lebar-tebar kesempatan bagi

para pembaca pada khususnya dan masyarakat pengguna komputer

pada umumnya untuk metakukan konsuttasi mengenai berbagai
kesulitan yang dihadapi, khususnya mengenai materi yang tetah
dijetaskan di datam buku ini, melatui situs kami, via pos, fax, atau
e-mait. Di samping itu, Anda, para pembaca, juga dapat meman-
faatkan tayanan petatihan komputer kami metatui Lembaga

Pendidikan Komputer Wahana agar bisa memperdatam pemahaman
atas materi-materi yang dipaparkan dalam buku ini.

Wqhqnq Kompuler

JL. MT Haryono 637, Semarang

Ttp. (024) 8314727,8413238. Fax. (024) U139U
E-mail : [email protected]
Web : www.wahanakom.com

frufur[si

PRAKATA ............. iii
SrRurcrun Pruuusax Buru....."...
Kuasnr?Apa yauc HaRus Auon ..................iii
Bact Pana Prl,taacn..... .......... iv

DAFTAR lsl ............ .............v

................vi

BAB I HARI PERTAMA: MENGENAL ADOBE DREAMWEAVER CS4......... 1

C#?Apn lru Aooar Dnrarawravrn ............ "... 1
Cs4FlruR Banu Aoosr DREAMwravrR .............. 7
....lustaLasr Aoogr DnTAMWEAVER Cs4
...MruLaunxlu Aooer DRTAMWEAVER Cs4 ................. 3
................. 7
..Starter Page
CS4Area Kerja Adobe Dreomweaver ........ B
.Membuat Dokumen Web Baru ..,....... 10
..lvlembuko Dokumen Web .......... 37
..Menyimpon Dokumen Web
. ...... 38

..... 40

Menutup Dokumen dan Aplikosi Adobe Dreomweaver CS4 ........ 41
PrnaNcxarTal aaHaN
Browser ...........42

..Server Web ............ 42

,......, 43

BAB II HARI KEDUA: MENGELOLA LAYOUT DAN CONTENTTEKS
WEBSITE
..........47

...Mrucnoi-q Sirus ..... .. ... . " .47
Membuat Sife ....
lvlanage Site .... ........... 17

BnnuMr,ueuar Hnuuau Wra ..... 55
..Menentukan Title
Web...Membuat Desain Layout Halaman ..... 56
...Mengelolo Content Teks ...... 57
............ 59

... .. 92

BAB lll HARI KETIGA: MENGELOLA NAVIGASI DAN ASET WEBS|TE...103

Mr,uauar NAVtcASt ............... 104
Navigasi Teks.... ........ 104

DoftcrH vll

SNporvyigMasein1u 8maar9..e................. ......106

EI\IALUNK.... ...114
ANcHoRLrNx..........
.....119
lAembuat Named Anchor.. ............122
Membuot Link ke Nomed Anchor ................122
MeNcrlouAsEr.............
Menggunokan Ponel Assets ....... 125
Mengelola Gambar .....129

...............129
.........135

BAB lV HARI KEEMPAT: MEMPERCANTIK HALAMAN WEB ..............149

PruuusaN Css........... ..........149
lAembuat CSS pada Dokumen Tersendiri.. ....150
.......Membuat CSS pada Dokumen HTlvlL
lAembuot CSS pada Tog Secora Langsung ............ 155
.............158
MENceNal TvpE Css ........
Tipe Kelas ...... 1 58
Tipe lD ...............158
Tipe Tag
Tipe Compound .......... ...159
........159
Meuornursrxlx AruRau Css........... .........160
WebMengaplikasikon CSS pado Dokumen ...........161

MeNccuNlxlN SPRY . . . . 168
Membuat Spry Tabbed Panels.....
lAembuat Spry Accordion........ ..............173
PonellAembuat Spry Collopsible ...... 173
lAembuatSpryTooltip
..... ........... 179
........... 783
....186

BAB V HARI KELII A: MENGELOLA WEBSITE INTERAKTIF .............. 189

MrNcrlou FoRMS ........ ........ 190
Menambohkon Form.... ......190
lvlenambohkon Text Field ........
lAenombahkan Hidden Field ......... ........ 191
Menombohkon Textareo .... 194
Menambahkon Checkbox
Menombahkon Radio Button..... .........195
Menambahkan List/Menu .......... ......196
lhenambahkan Jump Menu...... .....199
.lhenambahkan lmage Field ......201
Menambahkon File Field .......
..........203
.....205

..........207

vI Tubful 5 Hod: Bdoi:rCepdAdobe Drecna,eor,erCS4

Menambahkan Button... .................209
Menambahkan Label..... ................. 210
lAenambahkan Fieldset .................. 211

MzuauarFoRruVauoastDENGANSpny.......... ................212
Membuat Widget Spry .........
.......... 212

Membuat Aturan Data lnput Widget 1pry............................ 21 4

lAembuat Volidasi Data lnput Widget Spry .......................... 215
lilembuat Halaman Buku Tamu.
MrNccuxauN AcnoN BrHavroRs ........ 216

Action Call JavaScript.............. .............. 220

Action Change Property ...... 220

Action Drag AP Element ................. 223

Action Open Browser Window. ........... 227

Action Popup Message..... ......... 230

Action Show-Hide Elements.... .................. 233

Action Play Sound. ......... 235

Action Preload lmoges ........ 239

Action Effects...... ......... 240

Action Set Text of Status &ar........... ........ 241

Action SetText of Text Fie1d......... ................ 244

.... 245

Penutup.... ...........247

BAB I

Hari Ferlurnu:@l A&m

kamuraenrerCM

Bab iniakan membahas tentang:

g pengenalan Adobe Dreamweaver CS4,
V intalasiAdobe Dreamweaver CS4,
V pengenalan area kerja Adobe Dreamweaver CS4, dan
M pengenalan perangkat pembangun website.

ebsite adatah satah satu dari sekian banyak media yang diguna-
kan untuk menyampaikan informasi metatui internet. Website

terdiri dari hataman-hataman yang sating berhubungan satu
sama tain. Hataman-hataman tersebut dibuat dengan menggunakan

bahasa HTML (Hypertext Markup Language) yang didukung beberapa

bahasa [ain, seperti CSS, PHP, JavaScript, dan lain-tain. Bahasa-bahasa
tersebut digunakan untuk mendesain hataman website agar lebih
menarik, lebih dinamis, dan interaktif. Bagi pemuta mungkin akan sutit

untuk menghafal dan melakukan pemrograman dengan perintah-perintah
HTML secara konvensionat. Dengan kemuncutan aptikasi Adobe Dream-

weaver, pengguna akan tebih mudah mendesain hataman web yang
menarik tanpa harus menghafal sintaks-sintak pemrograman web.

IPAEUADOBE DffiRGS4?

Adobe Dreamweaver adatah sebuah program aptikasi yang digunakan

untuk metakukan desain hataman website secara visual. Datam

pendesainan hataman website, aptikasi ini menyediakan fasititas-fasititas
yang sangat memudahkan para pengembang website, juga bagi para
pemuta yang sedang betajar untuk membangun sebuah website.

Tubdd 5 Floi: Arlenggurnlqn Adobe DreornrcoerCS4

Para pengembang tidak pertu menutiskan baris kode untuk mendesain
hataman web, tetapi dapat ditakukan dengan drag and drop objek yang
dibutuhkan ke datam hataman website dengan cepat dan mudah.

Versi terbaru dari Adobe Dreamweaver adatah Adobe Dreamweaver CS4.

Adobe Dreamweaver CS4 memitiki fitur-fitur baru yang lebih meman-
jakan para pengembang web. Setain mempunyai tampitan yang tebih

menarik, ada juga fasititas-fasilitas tambahan yang akan mempermudah
datam pendesainan hataman website.

Adobe Dreamweaver CS4, setain mendukung bahasa HTML sebagai dasar

bahasa pembuatan website, juga mendukung berbagai bahasa

pendukung datam pemrograman web. Misatnya, CSS yang digunakan
untuk mempercantik tampitan, )(ML, dan bahasa pemrograman ctient-
side, seperti JavaScript serta pemrograman server-side, seperti PHP,
Active Server Page (ASP), ASP.NET, ASP JavaScript, ASP VBScript,

ColdFusion, dan Java Server Page (JSP).

DWRFTTUR BARU ADOBE CI54

Adobe Dreamweaver CS4 memiliki fitur-fitur baru sebagai penyempur-
naan fitur-fitur dari versi sebetumnya. Tambahan fitur-fitur baru

tersebut adatah sebagai berikut:

I Antarmuka Area Kerja Baru

Adobe Dreamweaver C9 memitiki antarmuka/tampitan yang
tebih menarik. Setain itu, Adobe Dreamweaver CS4 juga

mempunyai fasititas Workspace Switcher untuk memitih tampitan
area kerja yang sesuai kebutuhan Anda.

r Live View

Adatah sebuah fitur yang memungkinkan pendesainan hataman

web dan secara serta merta dapat ditihat hasitnya sebagaimana
kondisi pada browser sesungguhnya, namun Anda tetap dapat

mengubah dan mengakses kodenya.

r lntetisense Kode untuk Ajax dan JavaScript

Fitur ini akan menampitkan kode Ajax dan JavaScript yang dipicu

titik atau spasi. Framework JavaScript metiputi JQuery,

Prototype, dan Adobe Spry.

Hori P,erhnu: A/ergiernl Adobe Dranr*wverCS4

r Retated Fite dan Navigasi Kode

Fitur Retated Fite akan menampitkan fite-fite yang berhubungan
dengan file yang tampil pada area kerja desain. Fitur navigasi

kode akan menampitkan kode-kode fite yang berhubungan

dengan hataman utama yang tampil pada area kerja desain
sehingga Anda dapat memitihnya dengan mudah. Kode navigasi
ini bisa berupa kode CSS, PHP, JavaScript, lframe, dan lainnya.

r lnContext Editing

Fitur ini memungkinkan Anda membuat hataman web tanpa ban-

tuan siapapun dan tanpa software tambahan. Dengan fitur ini

Anda dapat membatasi perubahan untuk hataman yang spesifik,
daerah yang berbeda, dan format-format dan pitihan umum yang
[ain. Fitur ini dapat digunakan jika komputer Anda terhubung ke
internet.

r Property lnspector untuk mengotah CSS

Pada Dreamweaver CS4 ditambahkan sebuah tab Property

lnspector yang menampitkan aturan CSS. Anda dapat meng-

ubahnya secara langsung dengan mudah.

t Set Data HTML

Anda dapat menggabungkan data dinamis pada hataman web
tanpa betajar kode )(ML atau menjadi master database. Set Data
Spry untuk mengenati data pada tabet HTML sebagai suatu
sumber data interaktif .

r Adobe Photoshop Smart Object

Fitur ini memungkinkan Anda untuk mengedit fite gambar

Photoshop PSD (Photoshop Data Fite) dengan Dreamweaver CS4

tanpa harus membuka aptikasi Photoshop.

I Subversionlntegration

Dreamweaver C54 mengintegrasikan subversi software open
source sebagai sistem kendati untuk check-in/check-out.

DWRTNSilAT.ISI ADOBE GI54

Sebetum Anda menggunakan Adobe Dreamweaver C94, yang pertama
kati harus Anda lakukan adalah metakukan instatasi aptikasi tersebut
pada komputer Anda. Agar proses instatasi berjatan dengan lancar,
spesifikasi sistem (System Requirements) yang harus dipenuhi, antara

[ain:

Tuftriol 5 Hod: AlenggumlonAdobe Drom,eorer CS4

r komputer Pentium lll (Plll) atau yang lebih tinggi,
I kapasitas memori (RAlv\) minimal 512 MB,
r kapasitas ruang harddisk kosong 500 MB,
r sistem operasi yang digunakan adatah Microsoft Windows 2000,

Microsoft Windows XP, atau yangtebih baru, dan

r VGA video disptay 1074x768 (minimat 800x600).

Jika system requirements tersebut tidak terpenuhi, maka Adobe

Dreamweaver CS4 tidak akan bisa terinstal pada komputer Anda, akan
muncut kotak informasi yang memberitahukan bahwa spesifikasi tidak
terpenuhi.
Setetah persyaratan sistem terpenuhi, [akukan instatasi dengan tangkah-
langkah sebagai berikut:

1. Masukkan CD instatter Adobe Dreamweaver CS4 ke datam CD/DVD

ROM.

2.. Jika bukan CD Autorun, ktik ganda fite Setup.exe pada CD ter-

sebut.

3. Akan muncu[ kotak proses pengecekan system requirements.

Gambar't.1 Proses pengecekan sistem

Gambar 1.2 Kotak dialog lnput Serial Number

Fhi Pertrno: lvlengend Adobe Drcorna,arer CS4

Jika system requirements terpenuhi, akan muncul kotak diatog
Welcome dan Anda diminta untuk memasukkan serial number.

,5. Setanjutnya akan muncul kotak License Agreement, pitih
tombol Accept untuk metanjutkan proses instatasi.

Gambar 1.3 Kotak dialog License Agreement

Setanjutnya, akan muncul kotak diatog Options untuk memitih
aptikasi yang akan diinstat. Pastikan Adobe Dreamweaver CS4
sudah dipitih dengan tanda centang.

Gambar 1,4 Kotak dialog Options

6 Tubbl 5 l-loi: Arleng$rnlcn Adobe Dreoma,a,er CS4

7. Pitih tombol lnstall untuk metanjutkan proses instatasi Dream-

weaver.

.1..:/:r:. |
7, . l--
...............-..-r

Gambar 1.5 Kotak proses instalasi

Setetah proses instatasi selesai, akan muncut kotak diatog yang
menyatakan bahwa instatasi tetah setesai.

fr'l:

ADOS T' OREAIiW TAV ER' C34

-

fiff'x

ill:lliiit

Gambar 1.6 Kotak dialog instalasi selesai

9. Pitih tombol Exit untuk mengakhiri proses instatasi

Dreamweaver C54.

Hori Peirrrn: A/enge.pl Adobe Dreom"r,qraerCS4

ftTENJALANKANADOBE DffiR

cl54

Setetah setesai melakukan instatasi Adobe Dreamweaver C54 pada
komputer Anda, maka program aptikasi tersebut siap untuk digunakan
untuk membuat website. Anda dapat menjatankan Dreamweaver dengan
beberapa cara, antara [ain:

I Pitih Start > AllPrograms > Adobe Dreamweaver CS4.
I K[ik ganda ikon program Adobe Dreamweaver CS4 pada desktop.

,

imrffi,

Ilffi#ffi;Illg

adoLe
Dreamw*eaver

Gambar 1.7 Shortcut Adobe Dreamweaver CS4

Pada saat Anda menjatankan Dreamweaver untuk yang pertama kati,
maka kotak diatog Default Editor akan muncut (tihat Gambar 1.8). Pitih

tombot Select All atau Anda pitih secara manual untuk membuat

Dreamweaver sebagai editor utama dari tipe yang dipitih. Setanjutnya,
tekan tombol OK untuk membuka area kerja Dreamweaver.

Adobe Dreamweaver [54 will sel itsell as the delault editor lor tire foll':wng file igpes:

E Active 5erver Pe-qes Iasp] B JavaScript [isJ
p Java Server Paqes [tsp] El Eascadins Style Sheet [cssJ
l# l-oidl-usron lclrn. Etcl P Extensible Makup Language (xml]
E XSL Stlle Sheets [xsl. xsltJ
lA ASP.NET [aspr. ascxJ
l--g+r! 4fl-l f p"'"h"rAi-l
A FHP lphp. FhF3. Fhp4l
ft-r' x

Gambar 1.8 Kotak dialog Default Editor

I Tuloriol 5 Hori: A/erggumlonAdobe Dreonr*eoaerCS4

Srannntracr

Setiap Anda menjalankan Dreamweaver, maka yang muncul pertama kati
adatah kotak diatog Starter Page. Kotak starter page memberikan 4

menu pitihan, yaitu Open a Recent ltem, Create New, Top Features

(videos) atau Link Website yang berada di bagian bawah.

lql Fednrr*s h'ide*rl l

lillJ'l naa*aru"
[lill:-i.r,i,il| rir"vi"*
fl e]il coa" nu"iqa"'
[lllll:il Da""etwz*a

[]]!i /,"iil rcrwm"

fui[, il ravesrpt swon

i:;,More...
AdobeE! DrenmrrilerB C54

* ftemweaver ExchsgE t
i-..1 oonl show again

Gambar 1.9 Kotak dialog Starter Page

Penjelasan menu Starter Page:

1. Menu Open a Recent ltem

Menu ini menampitkan daftar nama dokumen yang pernah dibuka
oteh Adode Dreamweaver C91. Anda dapat membuka dokumen
tersebut dengan cara memitih nama dokumen yang ada. Setain

itu, Anda juga dapat membuka dokumen yang betum pernah

dibuka dengan Adode Dreamweaver CS4 dengan cara memilih

menu Open.

2. Create New

Menu ini digunakan untuk membuat dokumen web yang baru.
Anda dapat membuat dokumen web dengan beberapa tipe yang

disediakan oteh Adobe Dreamweaver CS4, yaitu

l-1oi Perhrrn: lvlergend Adobe Dreoma,eo,er CS4 ?

. HTML

Hypertext Markup Language (HTML) adatah sebuah bahasa
dasar yang digunakan untuk merancang hataman web statis.

. ColdFusion

CotdFusion adatah bahasa scripting yang digunakan untuk

pemrograman web server. CotdFusion digunakan pada

Adobe CotdFusion, BtueDragon, dan lain-tain.

. PHP

PHP Hypertext Preprocessor (PHP) merupakan bahasa
pemrograman scripting web server side. Dengan pemro-
graman server side, sebuah website akan menjadi tebih

dinamis. PHP biasanya terpasang pada fite HTML yang

disimpan dengan ekstensi ..php.

. ASP VBScript

ASP VBScript merupakan bahasa scripting seryer side
turunan dari bahasa Visual Basic. ASP disimpan dengan

ekstensi ".HTA.

. XSLT (Entire Page)

Adatah bahasa pemrograman yang mempunyai sintaks dasar
seperti XML. XSLT digunakan untuk mengubah dokumen XML
menjadi HTML atau format tainnya.

. CSS

Cascading Styte Sheet (CSS) adatah bahasa styte yang
digunakan untuk memdesain hataman web dengan tujuan

untuk memisahkan content web dengan desain web.

. JavaScript

JavaScript merupakan bahasa scripting turunan dari pemro-
graman Java. JavaScript digunakan untuk pemrograman
web ctient-side.

o XML

Extensibte Markup Language (X1ML) adatah bahasa yang mirip
dengan HTML, namun penggunaannya tidak terbatas pada
pemrograman web saja.

l0 Tubiol5 Hori: A/enggumlcnAdobeDeonM,6,€rcs4

o Dreamweaver Site

Menu ini digunakan untuk membuat website baru dengan

Dreamweaver.

. More

Menu ini digunakan untuk menampilkan tipe dokumen dan
temptate dokumen web secara tebih tengkap.

3. Top Features (videos)

Merupakan fitur yang disediakan Dreamweaver metatui internet.
Fitur tersebut antara lain adatah Related Files, Live View, Code
Navigator, Dataset Wizard, Web Widgets, JavaScript Support

dan sebagainya.

4. Help Online

Merupakan menu pitihan untuk menampitkan fasititas Hetp secara

ontine metatui internet. Anda hanya dapat menggunakan fitur
poin nomor 3 dan 4 jika komputer Anda tersambung ke internet.

AREA l(mtA AooeE DREAlnrrEAvR Cr4

Area kerja (worlspace) Dreamweaver C54 terdiri dari berbagai macam
tool yang memudahkan Anda membangun sebuah website. Too[ tersebut

meliputi Menu Bar, Document Toolbar, Document Window,

Workspace Switcher, Panel Groups, Files Panel, Tag Setector, dan
Property lnspector.

i :.,
s*r"i.r Puel Groult

,'"t,ir",

Gambar 1.10 Area kerja Adobe Dreamweaver CS4

Floi Perhrrn: lrlerBend Adobe Dreoma,m,er CSa il

Menu Bar

Menu bar adalah sebuah grup menu yang biasanya terdapat pada bagian
atas aptikasi yang tersusun dari deretan teks/tabet. Setiap menu terdiri
dari sub-submenu yang sesuai kategori menu masing'masing. Gambar
1.11 mempertihatkan menu bar dan submenu File Adobe Dreamweaver

cv.

Dt lrit j Edir \/rew InsErt l'4odrfy Formit Commtsnds Site wrndow HelF

Open Receot * Q +- t>-:ts- ,?

Close )
Close All
Chl+W konter,phF style.css p5tyle,qss
5hire My screen,.. Chl+shift+w . Tiller llEnill I lilandiEl

5ave As.., chl+Shitt+s

Gambar 1.1 1 Menu bar dan submenu File Adobe Dreamweaver CS4

Workspace Sadtcher

Workspace Switcher adatah fitur baru yang berfungsi untuk mengubah
mode tampitan area kerja yang sesuai dengan kebutuhan perancang
web. Workspace Switcher ini berada di sebetah kanan sejajar dengan
menu bar. Secara defautt, mode tampitan Adobe Dreamweaver CS4
adatah mode Designer (tihat Gambar 1.10). Adobe Dreamweaver CS4
memiliki mode area kerja yang banyak, antara lain mode Coder (tihat

Gambar 1.14) dan mode Classic (tihat Gambar 1.15).

12 Tubrii 5 F{ori: lr/eng$ndqrAdobe Drccrnnreca,erCSa

13r INtEst ilrli ial.#
f sr srYlrs _,tgF-lEffiT^s l
uja' v rItE$ ; *s*grx;iE

Gambar 1.1 2 Workspace Switcher

'Tekan tombot untuk memunculkan popup mode Workspace yang di-

sediakan Adobe Dreamweaver CS4. Anda dapat memitih satah satu mode
yang Anda rasa pating nyaman untuk membuat hataman web Anda.

t-_ll_t_H,-,,luNtK t. sL

App Developer
App Developer Plus
Classic

Designer Compdrf
Dual Screen

Reset'Designer'
New Workspace,,,
Manage Workspaces,,,

i]l i;l Desktop iiems

Gambar 1.13 Pemilihan mode area kerja

l-hri Perlonn: Alrgernl Adobe Deoma,aner64 13

Gambar 1.14 Area kerja mode Coder

4 r <!d rb'Jhi.s:../ -)t *1q - k€b

aat*' eiY.: ."..{ s, Eiis{ s

iry!-"-; Hty."-. Y."-. s -C- r.d a-!

A6 o,i.

l-4lid

lrr

Gambar 1.15 Area kerja mode Classic

tlocurnent\Mndorv

Document Window adatah area yang digunakan untuk membuka, meng-
edit, menampilkan desain dokumen atau kode dokumen web yang aktif.
Document Window terdiri dari Related File and Code Navigator, Tag

14 Tubdol 5 Hori: Alrggurukon Adobe Dreom"rreorer CS4

Selector, dan fasilitas [ain, seperti Zooming, HandTool, Selected Tool
dan inforrnasi lainnya.

lS:^:::f: T:'l:I:*:--* A-,:" -f :-I1*'* l*y:s

Gambar 1.16 Document Window

TagSeleffir

Tag Selector berfungsi untuk menampilkan tag yang diseteki pada area
desain. Anda dapat menyeteki bagian desain dengan memitih tag yang
sesuai. Sebagai contoh, untuk menyeleki semua etemen hataman, klik
tag <bodp.

Gambar 1.17 Tag Selector

l-bi Pertrru: lrlrgerd Adobe Dreqnnreorer CSa t5

DocurnentToolbar

Document Tootbar adatah kumputan tombo[ yang berfungsi untuk
mengatur tampitan dokumen. Setain itu, terdapat juga beberapa pitihan
dan perintah umum yang berhubungan dengan perpindahan dokumen

tersebut dari komputer ke remote sites.

I23 4 5 6 7 8 9l0ll 1213

,J tlh I

Gambar 1.18 Document Toolbar

1. rombol .oo" EEEI

Tombol Code ini berfungsi untuk mengubah Document Window
menjadi mode Code, yaitu Document Window akan menampitkan
kode HTML dokumen/hataman web yang aktif. Setain itu, Anda
dapat mengubah Document Window menjadi mode Code metatui
menu bar View > Code.

':

f-r

tl

,il

#,

li

l(./ 1 4c UnicEde uiF.6)
Gambar 1.19 DocumentWindow mode Code

2. Tombolspri,l =+"il

Tombol ini berfungsi untuk mengubah mode Document Window
menjadi Split, yaitu Document Window akan menampitl<an kode

dokumen dan tampitan desain (grafis/visuat) dokumen. Document

Window akan terbagi menjadi 2 bagian, yaitu bagian atas dan

t6 Tutobl 5 Floi: A/erggurulcn Adobe Deornam,er CSa
bawah. Bagian atas menampitkan source code, sedangkan bagian
bawah menampilkan visuat/grafis dari halaman web.

Gambar 1.20 Document Window mode Split

3. rombol Design [email protected];l

Tombotini berfungsi mengubah mode Document Window menjadi
mode design, yaitu Document Window hanya akan menampitkan
desain web secara visuat/grafis dari hataman web.

l-lori Pedonu: lllengerpl Adobe Dreom'r,eorerCS4 17

Gambar 1.21 DocumentWindow mode Design

-n

[email protected] rombol Live view

Tombotini berfungsi untuk menampitkan desain web seperti pada
browser datam Document Window rnode Design. Tombol ini akan
menyebabkan Document Window mode Design tidak bisa diedit,
namun Anda tetap dapat mengubah kode HTML-nya.

Gambar 1.22 Document Window mode Split dan Live View

r8 Tuuhl 5 Fhri: lvlerggundqrAdobe Dreoma,sr,erCS4

5. Tombol Live code ffi!-" t'd'l

Tombol ini akan aktif jika mode Live View dipitih. Tombot ini

akan membuat kode HTML pada Document Window mode Code

tidak dapat diedit. Ha[ ini ditandai dengan perubahan warna

background pada Document Window.

Gambar 1.23 Document Window mode Split dan Live Code

6. ToolText Field Titte Tille: , Untitled Document

Text Fietd Titte beffungsi untuk menambahkan/menampitkan
judut hataman web. Titte ini akan ditampitkan pada titte bar

browser.

7. Tool File [email protected]

Untuk menampitkan menu popup File Management.

8. Tool Preview/Debug in growser l{il'l

Objek ini digunakan untuk menampitkan hataman web yang aktif
pada browser. Anda dapat memilih browser datam menu popup
pada ikon ini.

Flori Perhnu: lvlergend Adobe Dreqna,q,er CSa 19

St- i_r\uJ g H- l)..r_ i:4 Check page

FHllbtview in FFirierfeoxfox FLZ

Preview in IExpl,:re

Preview in Opera 9,50

Preview in Device Central Ctrl+Alt+F1?

="r 0:

Edit Browser List.,.

9. rr;Gambar 1.24 Menu popup browser
Tool Refresh Design View I I

Objek ini digunakan untuk merefresh desain dokumen sei:etah ada

perubahan pada kode dokumen. Ha[ ini akan membuat desain
dokumen berubah sesuai perubahan pada kode dokumen.

Perubahan pada kode dokumen tidak secara otomatis mengubah
desain dokumen.

lr=-l

10. ToolView Option i*=*-l

Objek ini berupa menu popup yang digunakan untuk mengatur

tampitan kode maupun tampitan desain.

"l-,Ttl

11. Tool Visual Aids I '- |

Visua[ Aids digunakan untuk mengatur tampitan desain yang ber-
beda dari tampitan yalg lqsa dipakai.

I or, I

r 'l12. ToolValidate Markup l

Vatidate Markup digunakan untuk mengesahkan dokurnen yang
aktif atau tag yang terpitih.

E??t*"'!13. Tool Check Browser Compatibili*

Objek ini digunakan untuk mengecek apakah CSS yang Anda

gunakan akan cocok jika digunakan dengan browser yang

berbeda.

PanelGroups

Panel Groups merupakan kumputan panel yang berupa tab-tab pitihan
yang mempunyai kegunaan berbeda-beda. Panel adatah sebuah jendeta

n Tuloiol 5 Fhri: A/rggurulonAdobe DreomarecrvrerCS4

untuk memudahkan pembuatan desain web dengan menampitkan
informasi pendukung pada jendeta informasi. Anda dapat mengdit dan

memanfaatkan data yang ada pada area tersebut.

Gambar 1.25 PanelGroups dan Files Panel

Pandlrsert
Panel lnsert datam Adobe Dreamweaver versi sebetumnya terpisah dari

panel Groups, akan tetapi pada Adobe Dreamweaver C91, secara
defautt, panel lnsert ini bergabung dalam panel Groups. Panel lnsert

berfungsi untuk menyisipkan objek-objek ke datam hataman web. Ada
beberapa tab datam panel lnsert, antara lain Common, Layout, PHP,
dan lain-tain.

:& H & ffi;ffi m W_ e- m,m H r:r. rp_i.ffi. #

Gambar 1.26 Panel lnsert workspace mode Classic

Tob C,ommon
Tab Common berisi objek-objek yang secara umum banyak digunakan

datam perancangan hataman web. Tab ini berisi objek untuk me-

nambahkan hyperlink, tabet, gambar, dan sebagainya. Untuk lebih

lengkapnya perhatikan Tabet 1.1.

l-lori Perbnn: ltrlrgernl Adobe Dreom'r,a,erCS4 21

Tabel 1.1 0bjek tab Common

Toollcon Nama Tool Keleranqan
Membuat link pada objek
l& Hyperlink

@ Email Link Membuat link ke email

@ Named Membuat anchor pada dokumen. Anchor adalah
Anchor link untuk menuju baris tertentu pada sebuah
lTi+:: halaman.
Horizontal Membuat garis horizontal
1"":"' Rule
Membuat tabel pada dokumen
lFFrl Table

l'=r'l lnsert Div Tag Menambahkan tag div
lmages Menambahkan oblek gambar ke dokumen
wtffil
Media Menambahkan oblek media, sepedi SWF, FLV ke
T-L I Date dalam dokumen

l+,- I Menambahkan objek tanggal pada dokumen

tffil Server-Side Menyisipkan file server-side pada dokumen
lnclude Menambahkan komentar pada kode HTML
E
Comment
B]
Head Menambahkan elemen pada head section, seperti
E Script meta, descriplion, dan lain-lain

6:l Menambahkan JavaScript ke dalam dokumen

m-:l Templates Membuat template dokumen
Tag Chooser
r:] Menambahkan tag HTML, PHP, ASP, JSP, dan
lainlain
l-r#l

D Tutriol 5 Hof : Nlenggurnlan Adobe Dreorru,qrer CSa

Tob Loyout

Tab Layout berisi objek-objek yang digunakan untuk merancang
layout/tampitan/tata tetak content hataman web. Secara lengkap,

objek-objek tersebut dapat Anda tihat pada tabet berikut.

Tabel 1.2 Objek tab Layout

Toollcon Nama Tool Keteranoan
Menambahkan tag div yang digunakan untuk
L*lt-l lnsefi Div Tag
membuat laver statis
H Draw AP Div Untuk menggambar layer secara dinamis pada

*&'! Spry Menu Bar halaman
Digunakan unluk membuat menu bar pada
r?1 Spry Tabbed
Panels halaman
lL.Jr..;- Menambahkan panel tab pada halaman
Spry Accordion
Menambahkan Spry Accordion pada halaman

lilF;I Spry Collapsible Membuat panel Collapsible
Panel Membuat tabel pada halaman

4 Table

Inserl Row Menyisipkan baris pada bagian atas tabel
Above

;- lnsert Row Menyisipkan baris pada bagian bawah tabel
Below
tt'l
lnsefl Column to Menyisipkan kolom pada bagian kiri tabel
tr the Left

rL--Ir lnsert Column to Menyisipkan kolom pada bagian kanan tabel
the Riqht
m
lFrame Membuat lnternal Frame (lFrame) pada halaman

Frame Membuat lrame pada halaman

Floi Perhnn: l/ergerd Adobe Dreqn'{eo€rcsa 23

Tqb Forms

Forms digunakan untuk membuat sebuah web yang interaktif sehingga
end user dapat memberikan input/berkomunikasi dengan situs web.
Objek-objek yang dapat Anda manfaatkan tertihat pada tabel berikut.

Tabel 1.3 Objektab Forms

lcon Tool Nama Tool Keteranqan
Form Membuat form untuk menampung objek-objek yang lain
m
Text Field Menambahkan field teks pada lorm. Field teks hanya
I lji;*' menerima input satu baris.
Hidden Field
tr Menambahkan field tersembunyi pada form.

E

m Textarea Menambahkan area teks pada lorm. Textarea dapat
Checkbox menerima input banvak baris,
tml
Menambahkan sebuah kotak cek pada form.
H
Checkbox Group Menambahkan grup kotak cek pada lorm. Tool ini
l1:"-. Radio Button diqunakan untuk membual pilihan lebih dari satu.
Radio Group
w Menambahkan sebuah tombol radio pada form. Tombol
radio diqunakan untuk membuat satu pilihan.
t..:
Menambahkan grup tombol radio pada form.
l|lq'-il:'
List/Menu Menambahkan daftar atau menu pada form. Digunakan
It-t-]:: Jump Menu untuk menampilkan daftar pilihan.

w Membuat menu Jump pada form,

T;- lmage Field Menambahkan gambar pada lorm.
l;rd,
t: File Field Menambahkan file lield pada lorm yang digunakan untuk
Button Pencarian file.
I.H Label
Menambahkan tombol pada form,
fml
Menambahkan label pada Iorm.
tr

lml Fieldset Menambahkan fieldset pada form.

24 Tubril 5 Hoi: It/erggurpbr Adobe Dreqna,an,er CSa

Toollcon Nama Tool Keteranqan
Menambahkan lield teks model Spry pada form
tr Spry Validation Text Menambahkan area teks model Spry pada form
Field Menambahkan kotak cek model Spry pada form
Menambahkan daftar/menu pilihan model Spry pada form
w Spry Validation
Tovlarae

w Spry
ValidationCheckbox
t..::'l
Spry Validation Select
I ir:il

@ spry Menambahkan lield kata sandi model Spry pada form
ValidationPassword

@ spry Menambahkan field konlirmasi model Spry pada form.
ValidationConlirm Binsenva diorrneken hersama liald nnsswnrd
w
Snnr \/alidatinn Padin Menambahkan grup radio model Spry pada form
Grouo

Tqb PHP

Tab PHP digunakan untuk menyisipkan perintah-perintah bahasa PHP ke

datam dokumen. Tab ini akan tampil pada panel lnsert jika Anda

memitih dokumen PHP. Adapun objek-objek yang disediakan tab PHP
dapat ditihat pada Gambar 1.27.

Flori Pertrnu: A/rgrd Adobe Dreomareo,erCS4 25

tH!rEt
PHP V

ilJ rorm variublus

. "" LtrL Variables

!'i* s*tti*n v"ri"bl"u
[email protected] Cookie variables
ru Include
ffij Requlre

q] PHF Faqe Encoding
<? Code Block

echo Echo

*/'l.
Lomment
rtl

*lse Else

Gambar 1.27 Objektab PHP

Tqb Doto

Tab Data berisi fasititas-fasititas berupa objek-objek dinamis yang
digunakan untuk mengotah data pada hataman web. Adapun tab Data
dan toot-tootnya dapat Anda lihat pada Gambar 1.28.

26 Tub.bl 5 Hoi: lrlerggurulqnAdobe Dreonneo,erCS4

IhiE*I E
Data v
E ImFo* Tabulsr Data
,( SErv Dara 5et
,.*i sPrY Region
,4 SpryRepeat
fli 5pry Repeat Li5t
l?, Recordset

#. - DYnmic oata

Q Repeat Region

.ilg Sltow Hegton
*1. Recordset Faging
iii- DisPlaY Record count
lS r4dster Detail Pa{e 5et

&'Insertnecotd

&,t, tgdateRerord
ft DcleteRe(ord
& - user Authentication
ffi x5L rrmsform

Gambarl28 Obid(hbIm

Tob Spry

Spry adatah tibrary Javakript yang digunakan untuk mendesain hataman
web. Tab Spry menyediakan too[-tod dinamis dari tibrary JavaScript,
seperti lvlenu Bar, Text Fietd, Text Area, dan lain-tain. Toot-tool yang
ada datam tab Spry juga terdapat pada tab-tab yang [ain, misatnya tab
Layout, tab Common, dan tab Data.

Hori Pericnro: A/rgernl Adobe Droma,reorerCS4 27

SPrY w

l, 5pry uata 5eE
, Spry REqron
d! 5pry Repeat
iiir; 5PrY Repeat Llst

rL-;.! 5Fry Validation Text Field

Tll Spry V"tidution Textarea
l,yj spry vulidutirn Checkbox
LI 5pry Validatim select
l:.:; 5pry validation Palsword
ll,il Spry Validation conlirm
:.; 5pry valddtron RE'lro Groug

$ spryncrordion
ffi 5pryCollapsiblePonel
1{I 5pry Tooltip

Gambar 1.29 Objek tab Spry

Tsb lnConrext Edifing

Tab lnContext Editing adatah tayanan host ontine yang digunakan untuk

mengubah isi data di datam web browser. Ada tiga fasititas yang

diberikan pada tab lnContext Editing, sepfii yang tertihat pada gambar

berikut.

Infontext Editing v

l:l craate Repeating Region
i{ Create Edkable eeqion
& t*knage Available C55 {lasses

Gambar 1.30 Obiek tab lnContext Editing

Tnb Text

Tab rext menyediakan menu yang digunakan untuk mengatur format

teks, paragraf, dan juga untuk menyisipkan karakter khusus pada
hataman web. Tab rext juga menyediakan toot-toot untuk menutiskan

tag-tag HTML.

It{srRT

Text v
B Bold
f Italic
S Slrong
€rE Emphasis
T Paragraph
[,,,'] Block eur:te
P[f, Fretormstted Text
hl Headinq 1
h2 Heading 2
h3 Heading 3
ul Unordared List
ol OrdBrBd List
li tist ltem
dl Deftnition List
dt Definition Term
dd DefinltionDascription

abh[ Abbreviation

W3C Acronym

-lIJ Charactars

Gambar 1.31 Objektab Text

Flod Perhnn: A/mgernl Adobe Dreom'r,m,erCS4 n

Penjetasan dari tab Text:

Tabel 1.4 Objek tab Text

lcon Tool NamaTool Keleranqan
Bold Membuat teks menjadi tebal
B
Italic Membuat teks ditulis miring
I

S Strong Memberikan penekanan pada teks, digunakan sebagai
pengganti Bold. Tidak seperti Bold yang bersifat statis,

Strong bersifat dinamis yang aturan penekanan teksnya

bisa saja tidak berupa penebalan teks, akan tetapi

menqikuti perkembanqan aturan W3C (acronym)

em Emphasis Digunakan sebagai pengganti tag ltalic, yaitu membuat

teks ditulis miring. Emphasis mempunyai sifat yang sama

denoan Strono.

{t Paragraph Membuat/menyisipkan paragraf pada suatu teks

Double Quote Menambahkan tanda petik ganda pada suatu teks
[,,,,]

Pf,[ Preformatted Text Membuat teks ditulis apa adanya, tanpa ada pemformatan

teks aPaPun

h1 Heading 1 Membuat heading 1

h2 Heading 2 Membuat heading 2

h3 Heading 3 Membuat heading 3. Semakin besar nomor heading, teks
akan ditulis lebih kecil. Ada 6 jenis heading, mulai dari H1

s/d H6.

ul Unordered List Membuat daftar tidak bemomor, akan tetapi mengguna-

kan bulleUicon pada awal item daftar.

0l Ordered List Pembuatan daflar bemomor dapat dimulai dengan angka

{1.2.3....). huruf (a.b.c....). atau huruf romawi (l,ii,iii,...).

li List ltem Menambahkan item daftar pada UL atau 01. Tag Ll

digunakan bersama UL atau OL dan tidak dapat berdiri

sendiri.

dt Delinition List Menambahkan daftar sebagai sebuah penjelasan. Daftar

ini tidak memounvai tanda/bulleUicon alau nomor.

30 Tukrbl 5 l-bi: AlrggLrEbn Adobe Deorna,arerCS4

Toollcon NamaTool Keleranoan

dr Delinition Term Menambahkan item pada daftar DL. Tag DT hanya dapat
dinrrnekan horqnma lan Dl
dd Dcfinilion Descrintion
Menambahkan item pada daftar DL yang ditulis lebih
menjorok ke dalam, Biasanya digunakan untuk membuat

ahbr Abbreviation Memberikan singkatan pada teks yang ditunjuk. Misalnya,

teks HTML. Maka saat teks ini ditunjuk, teks ini akan

menampilkan teks Hypertext Markup Language seperti

IJUSC Acronym Untuk membuat akronim, yaitu singkatan yang dapat

BTI - Characters: Line Membuat baris baru. Pada tool ini terdapat tool-tool lain,
Break dapat dilihat dengan memilih simbol segitiga kebawah,
Tool ini juga dapat Anda gunakan untuk menambahkan
karakter khusus,

Tqb Fovorites

Tab Favorites digunakan untuk menambahkan kumputan tool yang Anda
definisikan sendiri. Toot-tool yang sering Anda gunakan dapat Anda
tambahkan datam tab Favorites ini sehingga Anda hanya akan membuka
satu tab saja, namun masih dapat menggunakan toot-toot pada tab-tab
lain.

Untuk menambahkan tool ke datam tab Favorites, lakukan langkah

berikut:

1. Klik kanan area kosong pada tab Favorites. Pitih Customize

Favorites pada menu popup.

Z. Akan muncul kotak diatog penambahan objek. Pitih objek pada

Available Objects dan pindahkan ke sebetah kanan dengan

memitih tombot >>, kemudian pitih OK.

Fbi Pertrrn: lrrlergerd Adobe Deorna,o,er CSa 3r

l*l
tl; l
l*l

Gambar 1.32 Penambahan objek pada tab Favorites

IUSERT

Favorites v

fe Fireworks HIIU1L

Gambar 1.33 Hasilpenambahan toolpada tab Favorttes

PandGSSSt!/e
Panel CSS digunakan untuk menampitkan property CSS. Anda dapat

mengedit properti CSS dari panel ini tanpa harus membuka dokumen
CSS. Pada panet CSS terdapat 2 mode tampitan properti CSS, yaitu All

dan Current.
Mode All akan menampitkan seturuh aturan dan properti dari CSS pada

setiap aturan yang dipitih. Sedangkan mode Current hanya akan

menampitkan properti yang terpitih saja pada hataman.

g2 Tubiol 5 Hori: A enggurptanAdobe Dreom'rm,erCS4

#utama a
#utama a:hover

#menuAdmin a
$menuAdmin a:hover

bodv 1':
Properties for "*slogan"

backrqraurd<*lor solid 2px #66FF00

bcoorldoerr E *ssrnao

height 12[px
padding 10px

Add Proserty pfi#ffi

:E:tlt51]

Gambar'1.34 Panel CSS Styles mode All

Fropcrti*r for "body'' w{s.t

nrargin-lell Llpx
margin+lght Opx

Add Prr'oerll

l*= *alf-,!1

Gambar 1.35 PanelCSS Styles mode Current

l-bi Fertrrn: lvlengend Adobe Deorwecn€r CSa

PardFfles
Panel Files digunakan untuk mengetota fite dokumen web. Anda dapat
menampitkan direktori sistem secara keseturuhan atau hanya fotder ter-
tentu yang digunakan untuk mengetota dokumen web Anda.

[ii] oesl.top l#, U"**:,r*

E 13 Nv computer 9.76G8 Local ,,,

i. .,9 System (Cr)

Ilt f,J mysql Folder l/18i200{ru+

ffil ,. -.-__.**,

H*i

Gambar 1.36 PanelFiles

PandAss€t

Panel Asset akan menampitkan seluruh aset/sumber daya yang dimil.iki
oteh suatu website, baik berupa gambar, video, animasi, atau suara.
Anda dapat menyisipkan aset tersebut ke datam dokumen dengan cara
drag and drop dari panet Asset ke dalam dokumen/hataman web.

r
&

a

{ilrt

1Ei- I 1!6 bilner.g'f 858x 152 6{
| E U-n.r.ipg 781x1,(9 6s
9_.

ftLLt | umnerr.roq 390x7,f 6

lgI bannerl too 39Ox71 I
I I*t u-n",
---390x75
bilner2,ipa
390x75

>

tr;il *U +il

Gambar 1.37 Panel Assets

Tubiol 5 Hod: A/erpg.lmlon Adobe Deoma,o,erCS4

l%ndSnfrpefs
Panet Snippets menampitkan kumputan temptate umum yang sering di-
pakai datam web. Panel Snippets menampitkan berbagai macam kategori
temptate yang dapat Anda sisipkan ke datam dokumen.

U JdvdsEript oirplays in Alerl dialog bo)
+l J ileacalcdalions
Il i3 h{owser fwtions 0i5plE/5 E cDnfirmdlion didl
-3:.+l (mversions Dirplayr an Alert dialog bo)

l+ ] cookies
+-?3 date
fi i3 dialoqs

: m atert
.- B c*rit'

: @ Message Box

' ,:-P eronpt

Gambar 1.38 Panel $ippeb

Propertylrspetu

Property lnspector digunakan untuk menampitkan properti dari sebuah
objek yang terpitih pada desain dokumen. Anda dapat metakukan
pengaturan objek-objek tersebut melatui Property lnspector dengan
mengubah parameter properti objek.

Secara defautt, Adobe Dreamweaver CH akan menampitkan Propefi

lnspector Body yang digunakan untuk mengatur kode HTML dan CSS
hataman web.

Gambar 1.39 Property lnspector Body untuk mengatur kode HTML

Hci Peftrrn: lvlergend Adobe Dreorna,orer CS4 35

PEAPTRIIIS Tdrgct.dRd€ <NewcssRule> * Font DefauttFonr f:i . B J E==
=
{}HTI'1L f EditR,r" lfGffi.] gac lEill :

9€l

F"q" P*r",t* I

Gambar 1,40 Propefi lnspector Body untuk mengatur kode CSS
Tabel berikut menerangkan Property lnspector Body yang dapat diubah.

Tabel 1.5 Propefi lnspector Body

lkon/Obiek Nama Keteranqan

HTML Menampilkan properti tag HTML halaman
oada Prooerlv lnsoeclor
CSS
Menampilkan properti CSS halaman pada
i-* *; Format Prooertv lnsoector
ID
Menenlukan format teks (paragraf ,
headinq, dan preformatted)

Memberikan lD teks

: Class Menggunakan Class dari style CSS

0,,l.]J Link Memberikan hyperlink pada suatu objek
B
Bold Menebalkan teks
r
Italic Memiringkan teks
la--
UL Membuat daltar tanpa nomor
t- OL Memuat daftar bernomor
J-
lndent Memberikan tab pada teks
E
Outdent Menghapus tab pada teks
+=
I P"q" P'oe"rti"* I Tombol Menampilkan kotak dialog Properties
Page untuk mengatur tampilan halaman
w
Properties

Targeted Menampilkan aturan CSS yang digunakan
Rule pada obiek terpilih pada halaman

% Tuloricl 5 Hori: lt ilgryrclonAdobe Drwm'r,eoaerCS4

lkon/Obiek Nama Keteranoan
Membuat atau mengubah aturan CSS
Edit Rules
Membuka/menampilkan panel CSS
f Icss P*"t CSS Panel

Font Memilih jenis lont yang digunakan pada

Size Memilih ukuran teks yang terpilih

rl Color Menentukan warna teks yang terpilih
L-tl

Align Lelt Membuat teks rata kiri

Align Center Membuat teks rata tengah

Align Right Membuat leks rata kanan

Align Justily Membuat teks rata kanan-kiri

Property lnspector akan berubah sesuai dengan objek yang ditunjuk.
Sebagai contoh, Jika Anda memitih objek tabet yang terdapat pada
halaman, maka secara otomatis Property lnspector akan menampitkan
properti tabel yang bersangkutan. Adapun properti tabel dapat Anda

pada Gambar 1.41.

Gambar 1.41 Propefty lnspector Table

Anda dapat mengubah properti tabe[ yang ditampitkan pada Property
lnspector dengan mengubah parameter-parametemya. Penjelasan
tentang properti yang terdapat pada Property lnspector dapat Anda tihat
pada tabet berikut.

Fbi Perirro: tvlengend Adobe Drcqnnq,er CSa 37

Tabel 1.6 Property lnspectorTable

lcon/obiek nama Keteranoan
Menampilkan lD tabel
rL Table
Rows Menentukan jumlah baris tabel yang
T: teroilih

r*l Cols Menentukan lumlah kolom tabel

ll w(widrh) Menentukan lebar tabel

tt.tt CellPad Menentukan padding cell tabel, yaitu jarak
CellSpace anlara teks denqan tepi dalam sel
I: \r: Menenlukan jarak antarsel
Align
t Border Menentukan posisi tabel

Lr-*I--I Menentukan ketebalan garis tepi tabel

Class Menentukan aturan CSS yang digunakan
tabel

6 Clear Menghapus nilai lebar kolom

Column

Widths

lHl Pixels Mengubah lebar kolom dengan satuan

Px

oixel

vt Percents Mengubah satuan lebar kolom menjadi

Dersen

[er Clear Row Menghapus nilai tinggi baris

Heiohts

MaranrDomnorl[rEBBAnt

Untuk membuat sebuah dokumen/hataman baru dengan Adobe Dream-

weaver C9, Anda dapat membuatnya metatui beberapa cara, yaitu

r Metatui Starter Page (tihat pembahasan Starter Page sebetumnya

pada poin 2).

38 Tulariql 5 Hori: A/erggumlon Adobe Dama,eorer CS4

Metatui menu File > New, maka akan muncut kotak diatog New
Document.

Metatui shortcut keyboard CTRL+N, maka akan muncul kotak
diatog New Document.

P.& Irl L.ydl
JHfr
* 8b{P4
i nmt,nda. l (ffiddk,..ilrd
r
$ se r-u". Lbry tm l(tu*lr,c.ildd,h#d
J xgr(r*rery)
I cM f*d, (.dred

4: Er(Fed) l(hfrr.d,(ddd,il.edl

:nLtr _ Adr*rd l(tuhd,€dad
PryfimlanC.rc ;
css lcffitqi,(ddd,ffidl

il.la e+t*s,rcr ; Ivakra 2(tu*tE,bft#d

- m 2.tu#t, bft *bd, bdda

f 0,r", i ffi#r 2((hM(,.qHr#*
*_ A*,MTC'
d Ag.ET% 2ctu.HE,rdt*b&,h*
d- cdFus
d [email protected] 2 ctu frx.d, tsft eddd i lrc cffir, d dB h p:*, dh Ht
d.F li6r,tu&dfdd.
2 tu fkd, l*t ir.bi, h..dd e

?cM f,xed, rElt r&

2 cffi f rx?d, rirt rd.U, h# a

?cffi hrfid, bft rbb] kTE, 1ml,9.ri;nm;

zctu hybE, bft *bd, b#.

€w 2 cM rytE, drt rdcbd LaF, C55: M to h.d v

2 cffi hrbd, idt *b) b*r

2cMtq4,Llt#I Atd C55 fL: t

2 rM tq$, left *hd, b& o

2 ctu lqn, drt *rcbr t:

.<_ l.

l-- E+ I fer.* I am.cdd.., t--c,-d._l l- sa-l

Gambar 1.42 Kotakdialog New Document

Setetah muncul kotak diatog New Document, pitih tipe dan layout

dokumen yang akan Anda buat. Akhiri pembuatan dokumen baru dengan
memitih tombot Create, muncuttah pada Document Window sebuah
jendeta desain kosong atau jendeta yang sesuai dengan temptate yang

dipitih.

filamxlDomnmrtt B

Ada tiga cara untuk membuka dokumen web yang tetah tersimpan pada
komputer, yaitu metatui Starter Page, Menu Bar, dan Files Panel.

I Metatui Starter Page

Untuk membuka dokumen web metatui Starter Page Anda dapat

melakukannya dengan [angkah-tangkah berikut:

1. Pilih menu Open pada bagian Open a Recent ltem.
Z. Buka dokumen dengan memitih atamat yang benar, misatnya

c:\AppSrv\www\index. htmt.

Flori Perhnn: Alergerul Adobe Dreoma,reo,ercs4 39

Open a Recent ll*rr . ,.i

: cssn cvct.t / nss

f;l dokumen webtumi.ttm
f,j abu,llndex.php
fl; auminttnuex.ptrp

::i. aDunnoefis.pnp

j:i asiahlndex.phF

fi dokurnenweb&veh.html
]ll tempelrbrowser.php
: csslgvE.css

i*;;., q"1..{\

Gambar 1.43 Menu Open pada Starter Page

mLook in: i i3-

.,'4...* i.i'xr""h*,ru

My [email protected]* i;.].ttsh
[email protected],
lilq+i.

t)

Desktop

.:,:',,

-J

sr '.---u-p..e-n"-,l

My Coryta lJ""*r
l
ua

M, Nrtmrk

i sr"Rd f

Gambar 1.44 Menentulon alamat dokumen

I Metalui menu bar, yaitu dengan cara File > Open atau CTRL+O.

Langkah setanjutnya adalah menentukan atamat dokumen
seperti tangkah pada Starter Page

40 Tdoiol 5 Flori: lvlr'gwrplqnAdobe Deomaeoaercs4

View Insert,,:,S{odify

Ctrl+N

,: l:i::,:. in Bridge,., (hl+Alt+O
Open Recent
)

{1t:::,y, ,-|ri+ 1::r

Gambar 1.45 Open pada menu bar

r MelatuiFiles Panel

A,lasuktah pada direktori tempat dokumen Anda teruimpan,

kemudian ktik ganda fite tersebut.

fEtvnomDoxuvo.tlt B

Setetah mendesain hataman web, langkah setanjutnya adalah menyim-

pan dokumen tersebut agar dapat dibuka kembati untuk diedit atau di-
jalankan pada browser. Untuk menyimpan dokumen web, Anda dapat

metakukan langkah-tangkah berikut:

1. Pitih menu File > Save (CTRL+S) atau File > Save As

(CTRL+Shift+S). Save digunakan untuk menyimpan ulang
dokumen tanpa penamaan utang, sedangkan Save As untuk

menyimpan dengan penamaan utang.

,Pffi ffi rait view Insert Modifu For
Naw.,.
;{iilii OOppene,,,n,,, Ctrl+N
Ckl+O

ffi Browse in Bridge,,, Ctrl+Alt+O
. Oopen RReeEeEntent
)
UntiUe

Close Clrl+W
Close All Chl+shifl+W

Share My Screen...

5#t€':' ':4t- ' Ctrl+
5ave As, ,.

5ave All

Save lo Remote server...

Save ar Template...

Gambar 1.46 Menu Save

Hoi Ferkrrn: lvlrgend Adobe Deana,arer CSa

2. Tentukan alamat direktori tempat dokumen Anda akan disimpan.
Misatnya, C:\AppServ\www.

3. Berikan nama dokumen dan ekstensinya. Misalnya, index.htmt.

srvcit 3m ,tr-

\ ,i!rJt&qr"

S3 ,;-1.#
::ilqrs
MyFd
Detrl* iJdcd6
JDaDeth
r.-n
l.q IEo
Ddl6

)

@

,,t*. lJt;.l

lffid I lJ-il]

[_lHeh*!e*o.(ffi)

Crambar 1.47 Kotakdhlog Save

4. Pitih tombot Save untuk menyimpan dokumen.

itprmrp Domnp.t

DAN APLI<lf, APOSE DREAMU'EAI'ER C'4

Menutup dokumen bukan berarti menutup aptikasi Adobe Dreamweaver
CS4. Untuk menutup sebuah dokumen, Anda hanya pertu menutup
dokumen tersebut tanpa harus menutup aptikasi Adobe Dreaweaver CS4.
Untuk menutup dokumen, pitih tanda sitang (x) pada jendeta dokumen.

Gambar 1.48 Menutup jendela dokumen


Click to View FlipBook Version
Previous Book
Montage
Next Book
Seri Komputer Sahabatku Komputerku Sahabatku,Saatnya Anak Indonesia Berkomputer Ria