Buku tips & trik adobe dreamweaver cs5.5 2012_roki
Transcript of Buku tips & trik adobe dreamweaver cs5.5 2012_roki
;-: ?-E!1441ws
ffi"flH:l.tiT,l,Y'ILEa#';j'xi:,Enx*:g
lfllE-\6ia'e€
.- ilEl5E''
Q68 So'@
Tips & Trikffime
ffiffi
/i\ ! 0 DI:
Tips &Trik
Diterbitkan Atas Kerj asama
s"WAHANA KOMPUTER pnNrnnrarurr@
Tips & TrikAdobe Dreomweqver C55.5
l-lok Cipto @ 2012 podo WAHANA KOMPUTER.
Jl. MT. Horyono 637 Semorong Telp. (024lr 831 4727,8413238, 841 3963Fox. (024) 8413964
Ediror : Hernito P
Setting : Sri Mulonlo
Desoin Cover : Bowo
Korektor
sHok Cipto dilindungi undong-undong.
Dilcrong memperbonyok otou menrindohkon sebogion stou seh.rruh isi buku ini dolombentuk opopun, boik secors elektronis nroupun mekonis, termcrsuk memfotocog:y,
merekom otou dengan sistem penyimponon loinnyo, lonpo izin tertulis dori Penulis.
Penerbif: c.v ANDI oFFsrT {Penerbit ANDI}
Jl. Seo 38-40,Ie|p.{O274156.l881 (l-lunting), Fax. lO274) 588282Yogyokarto 55281
PercelgKon: ANDI OFFSET
Jl. Beo 38-40,Telp. {A274156.l881 (Hunting), Fox. (O2741 588282Yogyokorto 55281
stokaon Nosionql: dolom Terbiton (KD
Tips & Trik Adobe Dreqmweover CS5.5/
- Yogyokorto: ANDI; Semorong: WAHANA KOMPUTER;
t9 18 t7 16 15 14 13 12
xii + 244 hlm.; 'l 6 x 23 Cm.
ro9876543ISBN:928 -979 - 29 - 3227 - A
l. Web Design
l. WAHANA KOMPUTER Semorong
: Thomos Pribodi
L^t;,i, Diterbitkon otos keriosomo Penerbit ANDI Yogyokorfo
}l.f' clengon WAHANA KOMPUTER Semorong
DDC'21: OO5.3
Kata Pengantarerkembangan internet yang begitu cepat menyebabkan teknologiweb juga berkembang sejalan dengan pemanfaatan internet webitu sendiri. Web saat ini tidak hanya terdiri dari halaman online
yang hanya menampilkan teks atau gambar dan cenderung bersifatstatis, namun telah berkembang menjadiweb yang dinamis dan interaktif.Faktor fungsionalitas sangat diperlukan untuk menunjang perancanEanweb yang baik. Untuk itu diperlukan sebuah fool pengembang web yangandal, baik dari sisi desain maupun pemrogramannya.
Adobe Dreamweaver CS5.5 merupakan salah satLi tool populer yangrligunakan untuk mendesain sekaligus pemrograman web. Dreamweavernremberikan fasilitas untuk mengedit HTML secara visual. Aptrikasi inirnenyertakan banyak perangkat yang berkaitan dengan pengkodean danfitur seperti HTIVIL, CSS, serta JavaScript. Selain itu, aplikasi ini jugarnemungkinkan pengeditan JavaScript, XML, dan dokumen teks lainnya:iccara langsung.
Ruku Ilp & Trik Adabe Dreamweaver CS5.5 ini membahas berbagai tiprlnn trik untuk membangun website. Selain itu, dalam buku ini disertakanborbagai contoh yang lebih memudahkan pembaca untuk menguasairrraleri sehingEa nantinya dapat membuat website yang interaktif.
berbagai tip dan trikAgar pembaca dapatdisajikan maka buku
desain web dengan Adobememahami dengan mudahini dibagi menjadi lima bab
Bab 1 PendahuluanBab ini berisi pengenalan terhadap Adobe Dreamweaver CS5.5meliputi pengenalan area kerja Adobe Dreamweaver CS5.5;membuat, membuka, dan menyimpan dokumen web; hinggaperangkat aplikasi tambahan yang diperlukan dalam perancang-an website.
STRUKTUR PENULISAN BUKUllrku ini membahasl)roamweaver CSS.5.lxltxrgai materi yangriolxrqai berikut:
Tips & Trik Adobe Dreomweover CS5.5
Bab 2 Mengelola Layout dan Content Teks Web
Bab ini menjelaskan tentang cara membuat layout website
dengan tabel, frame, dan layer. Selain itu juga akan dibahas
mengenai mengelola teks seperti membuat paragraf dan pindah
baris, serta memformat teks seperti jenis, warna, dan ukuran fontteks.
Bab 3 Mengelola Navigasi dan Aset WebBab ini membahas tentang cara mengelola dan membuat
navigasi dengan teks atau gambar menggunakan berbagai
teknik. Selain itu juga akan dibahas tentang cara mengelola asetyang dimilikiweb.
Bab 4 Mempercantik Halaman WebBab ini berisi tentang materi dasar CSS, serta cara membuat
CSS dan menerapkannya pada halaman web' Selain itu juga
akan dibahas mengenai beberapa widget Spry untuk memper-
cantik halaman web.
Bab 5 Mengelola Web lnteraktifBab ini membahas pengelolaan website interaktif yang mem-
bahas tentang pembuatan form dan komponen form, serta
validasi form dengan widget spry. selain itu juga akan dibahasmengenai penggunaan Action Behaviors yang merupakanfasilitas Adobe Dreamweaver CSS.5.
APAYANG HARUS ANDA KUASAI?
Buku ini membahas tentang tip dan trik Adobe Dreamweaver cs5.5.untuk dapat menggunakan buku ini secara maksimal, Anda diharapkan
sudah pernah menggunakan aplikasi Dreamweaver versi sebelumnya,
serta sudah terbiasa dengan penggunaan sistem operasiWindows'
BAGI PARA PEMBACAwalaupun dalam menyusun buku ini kami telah melakukan pengkajian
dan penelitian yang mendalam, serta berusaha untuk monyampaikan
Koto Pengontor
materi secara lengkap dan terstruktur, tetapi tentunya setiap karyatidaklah ada yang benar-benar sempurna sehingga mungkin buku inikurang dapat memenuhi kebutuhan para pembaca, atau mungkin parapembaca masih mengalami kesulitan atau masalah setelah mempelajaribuku ini.
Untuk itu, Wahana Komputer membuka lebar-lebar kesempatan bagipara pembaca pada khususnya dan masyarakat pengguna komputerpada umumnya untuk melakukan konsultasi mengenai berbagai kesulitanyang dihadapi, khususnya mengenai materi yang telah dijelaskan didalam buku ini melalui situs web kami atau via pos, fax, ataupun e-mail.Di samping itu, para pembaca dapat memanfaatkan pula layanan pelatih-an komputer kami melalui Lembaga Pendidikan Komputer Wahana untuklebih mendalami berbagai materiyang dipaparkan didalam buku ini.
Wqhono Kompuler
JL. MT Haryono 637 Semarang
Tlp. (024) 831 47 27, 8413238 fax. (024) 841 3964
e-mail: [email protected]
web: www.wahanakom.com
Elaft&F He*KATA PENGANTAR ................
Tips & Trik Adobe Dreomweover CS5.5
Menggunakan Panel Assels................. ........120Mengelola Gambar....... .......... 127
BAB4MEMPERCANTIKHALAMANWEB........... .............141
PENULTSAN Css.......-....,. ...............142Membuat CSS pada Dokumen Tersendiri.... ..................... 142MembuatCSSpadaDokumenHTML.......... .....................148Membuat CSS pada Tag Secara Langsung....... ................ 151
MENGENAL TypE Css ................... 151
TipeKelas... ,......151Tipe 1D........ ,......152Tipe Tag...... ....... 152Tipe Compound................. ......154
MENDEFTNISTKAN ATURAN Css................. ......... 155Mengaplikasikan CSS pada Dokumen Web .............. ........ 162
Mr,NccuNarAN SpRy....... ............166Membuat Spry Tabbed Panels ..................... 167Membuat Spry Accordion........-........ ............172Membuat Spry Collapsible Pane1............ .....176Membuat Spry Tooltip. ............180
BAB 5 MENGELOLA WEB INTERAKTIF
MsNcer-oLA. FoRMS ..................... 184Menambahkan Form......... ...... 184Menambahkan TextField... ...... 186Menambahkan Hidden Fie1d............ ............ /88Menambahkan Textarea.... ...... 189Menambahkan Checkbox..... ........................ l9lMenambahkan Radio 8utton.......... .............. 194Menambahkan List/Menu.. ...... 196Menambahkan Jump Menu........... ............... 198
Menambahkan Image Field ............ .............200Menambahkan File Field.. ......202Menambahkan Button....... ......204Menambahkan Labe1......... ......20(tMenambahkan Fieldset..... ...... )06
MIMBUAT Vnlrna.sr Fonlr DsNceN SpRy .......201tMcmbttat lltidget Spry .....................l//,7Mcmhuul .tllurun l)ata lnput lltidgel Spr),.............. .. ........ )(l)l4ambrtot Vulitlo:;i l)tttu lnput Widgct SJtr.;,........ . ........ ) l0Afutttltrtttl llttlttnttttt lJttlitt'litmtt .. )l"l
[\4t ttr;r;ItNAKAN Ar"t loN l]t,ilAVt()Rs..lr'ltrttt ('ttll .lttytt,\it t il)1 .
183
lt5., 16
Doftor Isiix
Tips & Trik Adobe Dreomweaver CSS.5
Fexrdahuluan
..i
#.;+
'Lrt'
Tips & Trik Adobe Dreomweover CS55
dobe Dreamweaver merupakan program aplikasi yang digunakan
untuk melakukan desain halaman website secara visual. Dalam
mendesain halaman website, aplikasi ini menyediakan fasilitas-
fasilitas yang memberikan kemudahan bagi para pengembang web, juga
bagi pari pemula yang belajar membangun sebuah website'
Para pengembang tidak perlu menuliskan baris kode untuk mendesain
halaman ieb, tetipi dapat dilakukan drag and drop objek yang dibutuh-
kan ke dalam halaman web dengan cepat dan mudah.
M ENJALAN KAN DREAMWEAVERMembuka program Adobe Dreamweaver cS5.5 tidak berbeda dengan
membuka program-program yang lain. Anda dapat menjalankan Dream-
weaver dengan beberapa cara, antara lain:
(, Pilih Start > AII Programs > Adobe Dreamweaver CS5'5
Gambar 1.1 Menjalankan Adobe Dreamweaver CS5'5
e Klik ganda ikon program Adobe Dreamweaver CS5'5 pada
desktop.
Srnntn Pnce
Setiap Anda menjalankan Dreamweaver, yang muncul pertama kali
adalah kotak dialog Starter Page. Kotak starter page memberikan 4
menu pilihan, yaitu Open a Recent ltem, Create New, Top Features
(Videos), atau link website yang berada di bagian bawah'
k* Ad0be ExtBnsion l,iandqer f55,5
3l Adobe widget Browser
Pendohuluon
ffi css
iiJqlj] .rro"o"or*"
ffi cssrn"ouo;*r
lnBj} ovnemicav neuca Fius
flffi .,u, u,"* r",,nn*
iii *l Erowserran imeoraanils::iJ Marc...
Adob6& Ore{Drwerver€r CS5.5
Fhdlhe laledlitrs, podcaris, ffid more in
AdobceBridle Home
Gambar 1.2Kolak dialog Starter Page
Barikut adalah penjelasan menu pada Starter Page:
1. Menu Open a Recent ltem
Menu ini menampilkan daftar nama dokumen yang pernahdibuka oleh Adode Dreamweaver CSS.S. Anda dapat membukadokumen tersebut dengan cara memilih nama dokumen yangada. Selain itu, Anda juga dapat membuka dokumen yang belumpernah dibuka dengan Adode Dreamweaver CS5.5 dengan caramemilih menu Open.
2. Create New
Menu ini digunakan untuk membuat dokumen web yang baru.Anda dapat membuat dokumen web dengan beberapa type yangdisediakan oleh Adobe Dreamweaver CS5.5, antara lain:
G) HTML
Hypertext Markup Language (HTML) adalah sebuah bahasadasar yang digunakan untuk merancang halaman webstatis.
{lr"ate NBw
q.{i nrm
ry: AsPVBScriilel,l xsLr (EdLe FF)5 css
* JdvascrM
3i xur
,.,1: Dremweover SilB
fq! F*&lurlr (vidEor)
;1,Gednosnrtcd' / 1NewFedures! [ + ]
I FesBu/ce:n \ .{gf, oreemw*ver ercnans;\'d
. j oon'lahBwagdn
o
o
@
Tips & Trik Adobe Dreomweoverqq.s
GoldFusionColdFusion adalah bahasa scripting yang digunakan untukpemrograman web server. ColdFusion digunakan pada
Adobe ColdFusion, BlueDragon, dan lainnya'
PHP
PHP Hypertext Preprocessor (PHP) merupakan bahasapemrograman scripting web server-side. Dengan pemro-
graman server side, sebuah website akan lebih dinamis'PHp biasanya terpasang pada file HTML yang disimpan
dengan ekstensi *.PhP.
ASP VBScriptASP VBScript merupakan bahasa scripting server side
turunan dari bahasa Visual Basic. ASP disimpan dengan
ekstensi*.HTA.
@ XSLT (Entire Page)
XSLT (Entire Page) adalah bahasa pemrograman yang
mempunyai sintaks dasar sebagaimana XML. XSLT diguna-
kan untuk mengubah dokumen XML menjadi HTML atau
format lainnya.
@ CSS
Cascading Style Sheet (CSS) adalah bahasa style yang
digunakan untuk memdesain halaman web yang bertujuan
memisahkan isi (confenf) web dengan desain web.
@ JavaScriPtJavaScript merupakan bahasa scripting turunan dari pemro-
graman Java. JavaScript digunakan untuk pemrograman
web client-side.
@ XMLExtensible Markup Language (XML) adalah bahasa yang
rnirip dengan HTML namun penggunaannya tidak terbataspada pemrograman web saja.
@ Dreamweaver Site
Menu ini digunakan untuk membuat website baru dengan
Dreamweaver.
l'cndohuluon
O MoreMenu ini digunakan untuk menampilkan type dokumen dantemplate dokumen web secara lebih lengkap.
Top Features (Videos)
Top Features (Videos) merupakan fitur yang disediakan Dream-weaver melalui internet. Fitur tersebut antara lain CS5.5 FeatureOverview, CSS lnspect Mode, CSS Enable/Disable, DynamicallyRelated Files, Live View Navigation, Browserlab lntegration, dansebagainya.
Help Online
Help Online merupakan menu pilihan untuk menampilkan fasilitashelp secara online melalui internet. Anda hanya dapat menggu-nakan fitur point 3 dan 4 jika komputer Anda terhubung ke
internet.
Anrn IGruNAPOBE DREANn\fiIEAVER CS5.5
Area kerja Dreamweaver CS5.5 terdiri dari berbagai macam tool yangrrromudahkan Anda membangun sebuah website, Tool tersebut meliputiMonu Bar, Document Toolbar, Document Window, Workspace Switcher,l'anel Groups, Files Panel, Tag Selector, dan Property lnspector'
3.
4.
Gambar 1.3 Area kerja Adobe Dreamweaver CSS.5
Tips & Trik Adobe Dreomweover CS5.5
Menu Bar
Menu Bar adalah sebuah grup menu yang.biasanya terdapat di bagianatas aplikasi yang tersusun dari deretan text/label. Setiap menu terdiridari beberapa submenu sesuai kategori menu masing-masing. Gambar1.4 memperlihatkan menu bar dan submenu File Adobe Dreamweavercss.5.
;"r ffi Edl. Vlew Inprt ,^Iodjfu :,For$al Erynmqdi Site Wlndofl He
-:- New.,, -r{+Hrunttt"d lrj. :i.:; ffiSWWfficodt BrDwsernBr.dqe.. rtr+Ar+o . iiuiviu* . trEpsct . B& {ur Mu,l
: OPen ReEent ,
alo!e
I close ltl
, rh** rr-,r:l_*:n,l:
5B!er 5aye 45,,,
sdve All
save ds Template,,,
, t.;,;r,
Pilnt ( nde.
tn port
Export
Convert
cill+v/atrl+5hift+w
Ctrl+5
atrl+5hift+5
Hultii.reen Freview
Cherl.. Page
Vdidate
?":'n' 11"!"::::
Erit
Filerox lllIExplore
Devi.eCentral Ctrl+Alt+F1z
Edit Brnlrser List.,,
Gambar 1.4 Menu bar dan submenu File Adobe Dreamweaver CSS.5
Workspaoe Switcher
Workspace switcher adalah fitur baru yang berfungsi untuk mengubahmode tampilan area kerja sesuai kebutuhan perancang web. Workspaceswitcher ini berada sejajar dengan menu bar pada sebelah kanan.Secara default, mode tampilan Adobe Dreamweaver CS5,5 adalah modeDesigner (Gambar 1.3). Adobe Dreamweaver CS5.5 memiliki mode areakerja yang banyak, di antaranya mode Coder (Gambar 1.7) dan Classic(Gambar 1.8).
Pendohuluon
I rrslcrurn 'lmffi ffcsuve
Gambar 1.5 Workspace Switcher
Tekan tombol ? untuk memunculkan popup mode workspace yangdisediakan Adobe Dreamweaver CS5.5. Anda dapat memilih salah satumode yang Anda rasa paling nyaman untuk membuat halaman web.
iffik##sli.s .
AFp DevEloFEr
AFp DEVEloper Plus
Classir
,! Clder
: r/ Designer ,
Designer {:ornpBCt
uual 5rreEn
NBH 1r/orl'jpdrE,,,
I'lanagE Wtrrkpaces.,.
Gambar 1.6 Pemilihan mode area kerja
Gambar 1.7 Area keria mode Coder
Tips & Trik,Adobe Dreomweover CS5.5
Gambar 1.8 Area kerja mode Classic
DocumentWindow
Document Window adalah area yanE digunakan untuk membuka, meng-edit, serta menampilkan desain dokumen atau kode dokumen web yangaktif. Document Window terdiri dari Related File and Code Navigator, TagSelector, juga fasilitas lain seperti zooming, hand tool, selected tool, daninformasi lainnya.
ffixr
Gambar 1.9 Document Window
Pendohulucln
Tag Selector
Tag Selector berfungsi menampilkan tag yang diseleksi pada areadesain. Anda dapat menyeleksi bagian desain dengan memilih tag yangsesuai. Sebagai contoh untuk menyeleksi semua elemen halaman, kliktag <bodp.
- r,!. .,
-
_ r; ,; ---:::;
> {tablB,main> <tr> {td} <div$krnten> qtable> <tr> <td>FRSPE*TTES
i { } Hrrql i, , ;--" 1iil
Gambar 1"10 Tag Selector
Document Toolbar
Toolbar adalah kumpulan tombol yang berfungsi mengatur tampilandokumen. Selain itu juga terdapat beberapa pilihan dan perintah umumyang berhubungan dengan perpindahan dokun'len tersebut antarakomputer dan remole s/fes.
I 8 9 lult
Gambar 1.11 Document Toolbar
TombolGodeTombol Code ini berfungsi mengubah Document Window menjadimode Code, yaitu Document Window hanya menampilkan kodehtml dokumen/halaman web yang aktif. Selain itu, Anda dapatmengubah Document Window menjadi mode Code melalui menubar View > Code.
2.
l0 Tips & Trik Adobe Dreomweover CS5.5
,.ir tu @@M @ &d &s * @ e fl! er &. fiLvar ,: * i]:-fr,.
Gambar 1.12 Document Window Mode Code
Tombol SplitTombol ini berfungsi mengubah mode Document Window menjadiSplit, yaitu Document Window akan menampilkan kode dokumendan tampilan desain (grafis/visual) dokumen. Document Windowakan menjadi 2 bagian (kiri dan kanan). Bagian kiri menampilkansource code, sedangkan bagian kanan menampilkan visual/grafisdari halaman web.
6Fi ..Fri lt ti
' -li: r
Gambar 1.13 Document Window Mode Split
Tombol DesignTombol ini berfungsi mengubah mode Document Window menjadimode Design, yaitu Document Window hanya akan menampilkandesain web secara visual/grafis dari halaman web.
3.
Pendohuluon
i ..{n4.;.! '!!a!r!(" a. i!li{t**iq t1. *:stu@,trr
jl
iI
Gambar 1.14 Document Window Mode Design
Tombol Live ViewTombol ini berfungsi menampilkan desain web sebagaimana padabrowser Document Window Mode Desain. Tombol ini akanmenyebabkan Document Window Mode Desain tidak bisa diedit,namun Anda tetap dapat mengubah kode HTML-nya.
Gambar 1.15 Document Window Mode Split dan Live View
Tombol Live CodeTombol ini akan aktif jika mode Live View dipilih. Tombol ini akanmembuat kode HTML pada Document Window Mode Code tidakdapat diedit. Hal ini ditandai dengan perubahan warna back-ground parla Dor;ulnont Window.
4.
5.
& Trik Adobe Dreomweover CS5.5
7.
Gambar 1.16 Document Window Mode Split dan Live Code
utllW3C Validation H -Validate Markup digunakan untuk memvalidasi dokumen yanE
aktif atau tag yang terPilih.
rcTool Check Browser ComPability -
Objek ini digunakan untuk mengecek apakah CSS yang Anda
gunakan kompatibel dengan browser yang berbeda.
Tool File Management S&
Untuk menampilkan menu popup File Management.
lil\
Tool Preview/Debug in Browser U-objek ini digunakan untuk menampilkan halaman web yang aktifpada browser. Anda dapat memilih browser di menu popup pada
ikon ini.
ifrt nuto.'"i. 1i"*l6l*rpu in ri,*Ior.
ii FrevieN in lExplore. Frevierr in De'JicE aenltal
8.
o
Q-I'i:i.'.
fhl+Alt+F 12
I
td,,.!lo*T,.!l:.!. .. . :
Gambar 1.17 Menu PoPuP Browser
l'tlndohuluon
10. ToolVisualAidsVisual Aids digunakan untuk mengatur tampilan desain yangberbeda dari biasanya.
11. Tool Refresh Design ViewObjek ini digunakan untuk me-refresh desain dokumen, setelahada perubahan kode dokumen. Hal ini akan membuat desaindokumen berubah sesuai perubahan pada kode dokumen.Perubahan pada kode dokumen tidak secara otomatis mengubahdesain dokumen.
12. Tool View OptionObjek ini berupa menu popup yang digunakan untuk mengaturtampilan kode maupun tampilan desain.
13. ToolText Field TitleText Field Title berfungsi untuk menambahkan/menampilkan judulhalaman web. Title ini akan ditampilkan pada tifle bar browser.
12
PanelGroups
l'anel Groups merupakan kumpulan panel yang berupa kumpulan tablrilihan dengan kegunaan berbeda-beda. Panel adalah sebuah jendelarrrrtuk memudahkan pembuatan desain web dengan menampilkan infor-nrasi pendukung pada jendela informasi dan Anda dapat mengedit,rnemanfaatkan data yang ada pada area tersebut.
Gambar 1.18 Panel Groups dan Files Panel
14 Tips & Trik Adobe Dreomweover CS55
Panellnsert
panel lnsert pada versi sebelumnya terpisah dari panel Groups, akan
tetapi pada Adobe Dreamweaver CSS.5 secara default panel lnsert ini
digabungkan pada panel Groups. Panel lnsert berfungsi menyisipkan
odjek-ob]ek ke dalam halaman web. Ada beberapa tab yang terdapatpaoa panel insert, antara lain common, Layout, Form, Data, dan lainnya'
Gambar 1'19 Panel lnsert Workspace Mode Classic
Tab Common
Tab common berisi objek-objek yang secara umum banyak digunakan
dalam merancang halaman web. Tab ini berisi objek untuk menambah-
kan hyperlink, tabel, gambar, dan sebagainya. Lebih lengkap, perhatikan
tabeldi bawah ini:
TABEL 1.1 Objek tab Common
ffi Hyperlink Membuat link pada objek.
ffi Email Link Membuat link ke email.
ffi Named
Anchor
Membuat anchor pada dokumen. Anchor adalah
link untuk menuju baris tertentu pada sebuah
halaman.
t:lt E-tt| *"_' I
HorizontalRule
Membuat garis horizontal.
ffi Table Membuat tabel Pada dokumen.
ffi lnsert Div Tag Menambahkan tag div
l'()ndohuluon
Tab Layout
Iab Layout berisi objek-objek yang digunakan untuk merancangl;ryout/tampilan/tata letak content halaman web. Secara lengkap, objek-otrjek tersebut dapat Anda lihat pada tabel berikut:
l5
Menambahkan objek gambar ke dokumen.
Menambahkan objek media seperti SWF, FLV kedalam dokumen.
Menambahkan objek tanggal pada dokumen.
Menyisipkan file Server-Side pada dokumen.
Menambahkan komentar pada kode HTML.
Menambahkan elemen pada head section sepertimeta, description, dan lainnya.
Menambahkan JavaScript ke dalam dokumen
Membuat template dokumen.
Menambahkan tag HTML, PHP, ASP, JSP, danlain-lain.
Tips & Trik Adobe Dreomweover CS5.5
TABEL 1.2 Objek tab Layout
@ lnsert Div Tag Menambahkan tag div yang digunakan untuk
membuat layer statis.
rffitl*'dl
Draw AP Div Untuk menggambar layer secara dinarnis pada
halaman.
ffi Spry Menu Bar Digunakan untuk membuat menu bar pada
halaman.
m Spry TabbedPanels
Menambahkan panel tab pada halaman.
E Spry Accordion Menambahkan Spry Accordion pada haiaman.
m Spry CollapsiblePanel
Membuat panel Collapsible.
m Table Membuat tabel pada halaman.
F-;'llri:lt,l
lnsert Row
Above
Menyisipkan baris pada bagian atas tabel.
r;EqJ
lnsert RowBelow
Menyisipkan baris pada bagian bawah tabel"
m lnsert Column to
the Left
Menyisipkan kolom pada bagian kiri tabei.
m lnsert Column to
the Right
Menyisipkan kolom pada bagian kanan tabel.
[:-jtIi...ilttts{ilFrame Membuat internal frame (iframe) pada halaman.
tiHlILLJ I
Frame Membuat frame pada halaman.
l'()ndohuluon 17
Tab Forms
l-orm digunakan untuk membuat sebuah web yang interaktif sehinggattnd user dapat memberikan inpuvberkomunikasi dengan situs web.{)bjek-objek yang dapat Anda manfaatkan terlihat pada tabel bedkut:
TABEL 1.3 Objek tab Forms
Form Membuat form untuk menampung objek-objek yang lain.
Text Field Menambahkan field teks pada form. Field teks hanyamenerima input satu baris.
Hidden Field Menambahkan field tersembunyi pada form.
Textarea Menambahkan area teks pada form. Textarea dapatmenerima input banyak baris.
Checkbox Menambahkan sebuah cek box pada form.
Checkbox Group Menambahkan grup cek box pada form. Digunakan untukmembuat lebih dari satu pilihan.
Radio Button Menambahkan sebuah tombol radio pada form. Tombolradio digunakan untuk membuat satu pilihan.
Radio Group Menambahkan grup tombol radio pada form.
List/Menu Menambahkan daftar atau menu pada form. Digunakanuntuk menampilkan pilihan berupa daftar pilihan.
Jump Menu Membuat menu jump pada form.
lmage Field
File Field
Menambahkan gambar pada form.
Menambahkan field file pada form yang digunakan untukpencarian file.
& Trik Adobe Dreomweover CS55
Menanibahkan tombol Pada form
Menambahkan label Pada form
Menambahkan fieldset Pada form'
Menambahkan field teks model Spry pada form'
Menambahkan area teks model Spry pada form'
Menambahkan cek box model Spry pada form'
Menambahkan daftar/menu pilihan model Spry pada form'
Menambahkan field sandi model Spry pada form
Menambahkan field konfirmasi model Spry pada form''-'-'
Biasanya digunakan bersama fleld password'
Menambahkan grup radio model Spry pada form
Tab SPry
Spry adalah library JavaScript yang digunakan untuk mendesain
hataman web. Tab sp;"*;;y;ii"[rn lelumtan tool dinamis dari librarv
JavaScript seperti ,i"i' u'i, field teks' area teks' dan sebagainya'
Berbagai tool yang aO, p"O'1ab Spry juga terdapat pada tab-tab yang
il", "itrr"va
iab tayout, tao Common' dan tab Data'
Pendohuluon
;ffifnrv,,, S G B Blua ffi m H B ES BlmB g H B
Gambar 1-20 Objek tab Spry
Tab lncontext Editing
Tab lnContext Editing adalah layanan servis host online yang digunakanuntuk mengubah isi data di dalam web browser. Ada 2 fasilitas yangdiberikan pada tab lnContext Editing seperti terlihat pada gambar dibawah ini.
lr(or*atEdtip ro
Gambar 1.21 Objek tab lnContext Editing
Tab Text
Tab Text menyediakan menu yang digunakan untuk mengatur formattcks, paragraf, dan juga menyisipkan karakter khusus pada halamanweb. Pada tab Text tersedia berbagai tool untuk menuliskan tag{agHTML.
r.*tEtr / l'Sr1,,*m,,l.r'6L.g*1lpp'].,,1r1,,6',,.,13rJ'.ul or t I ut dt dd l*u rr.l$'
Gambar 1.22 Oblek tab Text
Iabel berikut berisi penjelasan daritab Text di atas.
19
r, ftl.
TABEL 1.4 Objek tab Text
Tips & Trik Adobe Dreomweover CS5520
Strong Membuat teks men.iadi lebih ditekankan, biasanya
dipertebal sebagai pengganti Bold. Tidak seperti Bold
yang bersifat statis, Strong bersifat dinamis. Pada Shong,' aturan penekanan teks dapat tidak berupa penebalan
teks, akan tetapi mengikuti perkembangan aturan W3C'
. s-, Emphasis Digunakan sebagai pengganti tag ltalic, yaitu membuat
teks ditulis miring. Emphasis mempunyai sifat yang sama
dengan Strong.
Paragraph MembuaVmenyisipkan paragraf pada suatu teks
Double Quote Menambahkan tanda petik ganda pada suatu teks.
Preformatted Text Membuat teks ditulis sebagaimana adanya, tanpa ada
pemformatan teks aPaPun.
hl Heading 1 Membuat heading 1
h2Heading 2 Membuat heading 2.
h3 Heading 3 Membuat heading 3. Semakin besar nomor heading, teks
akan ditulis lebih kecil. Ada 6 macam heading, yaitu H1
samPai dengan H6.
iil Unordered List Membuat daftar tidak bernomor melainkan menggunakan
bulleVikon Pada awal item daftar.
,,lii' Ordered List Membuat daftar bernomor dapat dimulai dengan angka
(1,2,3,...), huruf (a,b,c,...), atau huruf romawi (i,ii,iii,...).
:.lt- List ltem Menambahkan item daftar pada ul atau ol. Tag li
digunakan bersama ul atau ol tidak dapat berdiri sendiri.
;dt Definition List Menambahkan daftar sebagai sebuah penjelasan. Daftar
ini tidak mempunyai tanda/bulletiikon atau nomor.
#t. Definition Term Menambahkan item pada daftar dl. Tag dt hanya dapat
digunakan bersama tag dl.
Pendqhuluon
Tab Favorites
Iab Favorites digunakan untuk menambahkan kumpulan tool yang Andarlofinisikan sendiri. Beberapa tool yang sering digunakan dapat Andatumbahkan dalam tab ini sehingga Anda hanya membuka satu tabnamun masih dapat menggunakan berbagai tool pada tab lain.
tJntuk menambahkan tool ke dalam tab Favorites, gunakan cara sebagailrrlrikut:
1. Klik kanan area kosong pada tab Favorites, lalu pilih CustomizeFavorites pada menu popup.
2. Akan muncul kotak dialog penambahan objek. Pilih objek padaAvailable Objects dan pindahkan ke sebelah kanan denganmemilih tombol >>, kemudian pilih OK.
2l
dd Definilion Description Menambahkan item pada daftar dl yang ditulis lebihmenjorok ke dalam. Biasanya digunakan untuk membuat
sebuah kutipan.
abhf Abbreviation Memberikan singkatan pada teks yang ditunjuk. Sebagaicontoh teks HTML maka saat teks ini ditunjuk akan
menampilkan teks Hypedext Markup Languagesebagaimana tool tip teks.
UUSEAcronym Untuk membuat akronim, yaitu singkatan yang dapat
dibaca sebagai kata.
w, Characters : LineBreak
Membuat baris baru. Pada tool ini terdapat berbagai toollain dengan memilih simbol segitiga ke bawah. Andadapat menambahkan karakter khusus melalui tool ini.
22 Iips & Trik Adobe Dreomweover q!!'5
Gambar 1.23 Penambahan objek pada tab Favorites
t&&
feinar t
lr*,tT::*TT
Gambar 1.24 Hasil penambahan tool pada tab Favorites
Parel CSS Style
Panel css digunakan untuk menampilkan property css. Anda dapat
mengedit properti css dari panel ini tanpa harus membuka dokumen
CSSI pada panel CSS terdapat 2 mode dalam menampilkan properti
CSS, yaitu Alldan Current.
Mode All akan menampilkan seluruh aturan dari CSS dan properti setiap
aturan yang dipilih, sedangkan mode current hanya menampilkanproperti yang terpilih pada halaman.
a &l:;-ll
Gambar 1.25 Panel CSS STYLES mode All
r15 llrLE! $*$
,,,J1,,.,19fi11
Pendohuluon
Gambar 1.26 Panel CSS STYLES mode Current
PanelFiles
l)anel Files digunakan untuk mengelola file dokumen web. Anda dapatrnenampilkan direktori sistem secara keseluruhan atau hanya foiderkrrtentu yang digunakan mengelola dokumen web Anda.
Gambar 1.27 Panel Files
PanelAsset
l'irrrel Asset akan menampilkan seluruh aset/sumber daya yang dimilikiolclr suatu website, baik berupa gambar, video, animasi, atau suara.Arrrla dapat menyisipkan aset tersebut ke dalam dokumen dengan cararrrclrrkrrkan drag ancl drop dari panel Asset ke dalam dokumen/halamanwr:lr
il\t€{(nE3
a;
24 Tips & Trik Adobe Dreomweover CS55
Gambar 1.28 Panel Assets
PanelSnippeils
Panel snippets menampilkan kumpulan template umurn yang sering
dipakai dalam web" Pada panel snippets ditampilkan berbagai macam
kategori template yang dapat Anda sisipkan ke dalam dokumen.
Gambar {.29 Panel SniPPets
Property lnspedor
Property lnspector digunakan untuk menampilkan properties dari sebuah
objek yang terpilih pada desain dokumen. Anda dapat melakukan peng-
sIerL {[essaqegtr J ;
El LJ Footers
lj 'L) Frrm Elfficnt!l:- i lavascrFt
F 1-J tsreacslculdr@n' -
.+ .j brodser funcnons'i i! cFnvers'onl+ ,J ool@!ll. J oare
;j J dralo!5.., - i::fir'rkr ': tkpldyrm{tdldd4glot
: : B confirm Displnys a confirmation dial
. p MessageBox DisplayranAlertdialogbo)
' B Prompt Di5piaysaPromptdbloqbci
l:'endohuluon
aturan objek-objek tersebut melalui Property lnspector denganmengubah parameter properties objek.
Secara default, Adobe Dreamweaver CS5.5 menampilkan Property lns-pector body yang digunakan untuk mengatur kode HTML dan CSShalarnan web.
Gambar 1.30 Property lnspector Body r"lntuk mengatur kode F{TML
Gambar 1.31 Property lnspector Body untuk mengatur kode CSS
label di bawah ini menjelaskan Property lnspector Body yang dapatrliubah:
DPa,trtj&IlEx
1' nrML rilqar*8tE
bs.si.-i , .,,,..
TABEL 1.5 Property lnspector Body
Menentukan format teks (paragraph,
heading, preformatted).
Menampilkan property tag HTML halamanpada Property lnspector.
Tips & Trik Adobe Dreomweover CS5.526
Class Menggunakan Class dari style CSS.
ti#'J Link Memberikan hyperlink pada suatu objek.
E Bold Mempertebal teks.
r Italic Memiringkan teks.
t- UL Membuat list tanpa nomor.
1=,- OL Memuat list dengan nomor.
+= lndent Memberikan tab pada teks
fE Outdent Menghapus tab pada teks.
tT-j*J-rp*ti"-I 'lombol
page
Properties
Menampilkan kotak dialog Properties
untuk mengatur tampilan halaman.
Targeted
Rule
Menarnpilkan aturan CSS yang digunakanpada objek terpilih pada halaman.
Edit Rules Membuat atau mengubah aturan CSS.
CSS Panel Membuka/menampilkan panel CSS.
Font Memilih jenis font yang digunakan pada
teks yang terpilih.
Size Memilih ukuran teks yang terpilih.
r-li,J Color Menentukan warna teks yang terpilih.
Align Left Membuat teks rata kiri
Pendohuluon
Property lnspector akan berubah sesuai dengan objek yang ditunjuk.Sebagai contoh, Anda memilih objek tabel yang terdapat pada halamanmaka secara otomatis Property lnspector akan menampilkan propertiestabel yang bersangkutan. Properties tabel dapat Anda lihat di bawah ini.
Gambar 1.32 Property lnspector Table
Anda dapat mengubah properties tabel yang ditampilkan pada Propertylnspector dengan mengubah parameter-parameternya. Penjelasan pro-perti yang terdapat pada Property lnspector dapat Anda lihat pada tabelberikut:
l/
xorclilv1 co* 13 i
5trirv r: *ils ',- ::
TABEL 1.6 Property lnspector Table
26 Tips & Trik Adobe Dreomweover CSS.5
M rHlteunr.DoKUMEN WEB BNNU
Ada beberapa caru utuk membuat sebuah dokumen/halaman barudengan Adobe Dreamweaver CS5.5, di antaranya:
O Melalui Starter Page (lihat pembahasan Starter Page di ataspoint 2).
O Melalui menu File > New, akan muncul kotak dialog NewDocument.
O Melalui shortcut keyboard CTRL+N, akan muncul kotak dialogNew Document.
Menentukan padding cell tabel, yaitu jarak
antara teks dengan tepi dalam cell.
Menentukan ketebalan garis tepi tabel.
Menghapus nilai lebar kolom.
l'ondohuluon
,.& Bhnklemdate
$ n*otms*pt
I om, Iq. otumnr, d ddhr n Sdr, *h baLn&bar, header and footry.
j Layout c55:
: A$schC55fib:
&Mc@td,,, t-Gt-l fEql
Gambar 1.33 Kotak dialog New Document
liololah muncul kotak dialog New Document, pilih type dan layouttkrkumen yang akan Anda buat. Akhiri pembuatan dokumen baru denganrrromilih tombol Create. Akan muncul pada Document Window sebuahlondela desain kosong atau sesuai dengan template yang dipilih.
MeNleuKA DoxUuEI{ WEB
Arla 3 cara untuk membuka dokumen web yang telah tersimpan padakomputer, yaitu melalui Starter Page, Menu bar, dan Files Panel.
r, Melalui Starter PageUntuk membuka dokumen web melalui Starter Page, gunakanlangkah-langkah sebagai berikut:
1. Pilih menu Open pada bagian Open a Recent ltem.2. Buka dokumen dengan memilih alamat yang benar, misal:
c:\AppSrv\www\i ndex. html.
O
Tips & Trik Adobe Dreomweover CS5.5
frpen e nec*nl ltErfi
f:j] cs$,,1-evel3_2.cBS
fri dokumenweh,trmi.trtm
l! ahulndex.php
ff,] eaminmaex.ptrp
fll ehurndeks.php
]! asiahlnclex.php
tI dokumen web/web.html
f! tempelrhrowser.php
lli cssjstyle.css
ir+..qpqlh ,,,. , i
Gambar 1.34 Menu Open pada Starter Page
Look in
r ,lLJ
t)eil.top
My Do.umenls
? .lE-
!a"fiv
r,r, #no*o
ru
I ste root l
Filensrc mdex . loF;_lFiles ol type ,ntto*u**nt. ll tlmi t trr.' *f,i*,;
"r,rri,' trt", * . [- a-""cel]
Gambar 1.35 Menentukan alamat dokumen
Melalui menu bar dengan cara File > Open atau CTRL+O.
Langkah kedua adalah menentukan alamat dokumen sepertilangkah di atas.
I'r rndohuluon QI
6ffi Eatt view Ins*rt $4difu Forma
ctrl+N lNeu{.. .
Eror,lse in Ctrl+Alt+O
r)
Gambar 1.36 Open pada Menu bar
Melalui Files PanelMasuklah pada direktori tempat Anda menyimpan dokumen,kemudian klik ganda file tersebut
M rrvyr rupnru DoxurueN WEB
iictelah mendesain halaman web, simpan dokumen tersebut agar dapatrlbuka kembali untuk diedit atau dijalankan pada browser. Untuk me-rryimpan dokumen web, gunakan langkah-langkah sebagai berikut:
1. Pilih menu File > Save (GTRL+S) atau File > Save As (CTRL+Shift+S). Save digunakan untuk menyimpan ulang dokumentanpa penamaan ulang, sedangkan Save As untuk menyimpandengan penamaan ulang.
*:;+ ffi Edit vbsrNeH,,,(jpen, , .
Erowse in Eridge,,,
Open Re.ent
alose All
qhnrP Mv q.rePn...
5ave 4s,,.
5Eve All
Save .s TemplEte
Revert
ctrl+5hift+5
?_.
Gambar 1.37 Menu Save
Tentukan alamat direktori yang akan Anda gunakan untuknrenyi mpan dokumen, misalnya : C :\AppServ\www.Berikan nama dokumen dan ekstensinya, misalnya: index.html,
Insert Modify #6rrhatal'lrH
;;,i.; ffiahl+Alt+n
, i, 'ffictrl+wahl+;hiFr+w uY
Iips & Trik Adobe Dreomweover CSS.5
Savain : l:} www
;:3
l)
-I
w
:*abuLlappseflr'J$iah!jcqtsbin
*i, phpFl /admin
:c
*i:l Ftu !il*My lletao& SBve..!YF:
| *"amt I
hco& Mm*dian Formi
l"*sI-lr'= :::--rL r1"lt
Gambar 1.38 Kotak dialog Save
4. Pilih tombol Save untuk menyimpan dokumen'
MrruuM,IP DOKUMEN DAI{ APuKAg DNENTTNNrcNTrcN
Menutup dokumen bukan berarti menutup aplikasi Adobe Dreamweaver
CS5.5. Untuk menutup sebuah dokumen, Anda hanya perlu menutup
dokumen tersebut tanpa harus menutup aplikasi. Untuk rnenutup
dokumen, Anda cukup memilih tanda silang (x) pada jendela dokumen.
# ,Rte.' e*t .Vi*ts
Gambar 1.39 Menutup jendela dokumen
Untuk menutup aplikasi, Anda dapat memilih tanda silang (x) padajendela aplikasi Adobe Dreamweaver cs5.5 atau melalui menu bar File >
Exit (CTRL+Q).
Pendohuluon
Gambar 1.40 Menutup jendela aplikasi Adobe Dreamweaver CSS.5
PERANGI(AT TAMBAHANljetelah Anda mendesain halaman web dengan Adobe Dreamweaver(;S5"5 dan menyimpannya, tentu Anda ingin melihat hasilnya. Untukrnolihat hasil akhirnya, Anda membutuhkan sebuah aplikasi yangrrrenampilkan dokumen web, yaitu browser.
BnowsrRllrowser adalah sebuah aplikasi yang digunakan untuk menjalankanrlokumen web. Anda tidak akan dapat menampilkan hasil akhir file ..html
hurpra sebuah web browser. Anda dapat menggunakan browser bawaanWindows, yaitu lE (lnternet Explorer) atau browser yang lain sepertiI lrofox, Opera, Mozilla, Safari, dan lain-lain.
Arl;r 2 cara untuk menjalankan file *.htrnl pada browser dengan AdobeI )rorrmweaver CSS.5, yaitu:
, r' Melalui Toolbar, lihat pembahasan Document Toolbar point ke-8.
' Cara kedua adalah melalui menu bar, yaitu File > Prevlew InBrowser > ... (browser).
llorrkut adalah contoh web browser lnternet Explorer (lE) menampilkanlr,rlrrrrran web.
JJ
SrnvrnWreTeknologi server-side adalah teknologi yang digunakan untuk membuat
halaman web pada ,iri "ut'"'' Oleh karena itu' Anda membutuhkan
sebuah server weO yang dijalankan secara lokal pada komputer Anda'
server web ini memungkinkan Anda menguji halaman. yang meman-
faatkan teknologi "uruutliO".
Anda tidak perlu meng-upload.ke internet
t"iiunir, dahulu untuk mengetahui hasil halaman web untuk sisi seryer.
Tips & Trik Adobe DlggIYeoYgISls .5
:. ,+- htiprlilo.alhodlinder htm{ Ts:
". ^ :_ ","
'',. ..r" .,' ' e" ' ril' 5l - $ m'l'"'*- '$r0b1ocbd f ckrr' '
>> ;iftttiE '
- _,pnqe. rTouE.,.ri - ;.
Gambar 1.41 File HTML ditampilkan pada lnternet Explorer
Pemrograman server-side biasanya digunakan
databaie sehingga Anda dapat memanajemen
dengan baik, Praktis, dan dinamis'
Server web yang paling popular dalam pemrograman internet adalah
npu"f," Vrnfi UJrirlan lada sistem operasi UNIX' Kini Apache telah
*L*punyui i"tti Vung nerjatan pada Windows /win32' Selain itu' Anda
juga dapat *"nggrn"rkan'Microsoft PWS' llS' Xitami' Sambar' dan
lainny, pada sistem operasi Windows'
Tidak semua teknologi server web cocok untuk pemrograman server-side
.uhinggu Anda haruJ memilih terlebih dahulu sesuai dengan yang Anda
gunakan. Server web PWS dan llS mendukung DBMS tlari Mir;rosofl
untuk pemrogramancontent website Anda
I 'r :r rdohuluon
r;cperti MS SQL dan MS Access, dan teknologi ASP (Active Serverl'irge). Sedangkan Apache mendukung DBMS seperti MySQL (Windows)r lr rn MySQL/PostgreSQL (Linux).
tlntuk menjalankan halaman dengan teknologi server-side, biasanyatll.tL pada browser web disertai dengan "http://localhosV" diikuti namahrkler dan nama file.
:;rrlah satu teknologi aplikasi yang dapat Anda gunakan adalah aplikasi/\1r1rServ 2.5.4a yang merupakan kumpulan aplikasi pendukung pem-lr,rrrr;un website. Aplikasi-aplikasi tersebut antara lain:
Server web Apache untuk Windows
' PHP dan PHPMyAdmin 2.6.2-pl1
' Pengolah database MySQL 4.1.12a
l,unl)ilan awal dari PHPMyAdmin pada bundle AppServ versi 2.5.4arlrrpirt dilihat pada gambar di bawah ini.
llileleoms to pipf,lyAdmln 2.6,2-plr
, !&98 n.1-1?* flr.ek{ $fl ldr6li*ene ro6!Sl.{ske,
el !...-'.. :,i-,i..r :]{ll} 9a1u1sa*t",**mrerurrrtt ttn ti! ,,ri,iJ:rrr i
.I 1d.. ., rrji.!l.ii.$iqJ ii!:ii it n:l
* ina!*rryi . rr :.
(innrbar 1"42f ampilan awal PHPMyAdmin AppServ pada Browser Opera
l'l ll'MyArlrrrin digunakan untuk pengelolaan database seperti membuat,rrrn,rnl)illr, mengedit, dan menghapus database.
J5
Memge*e*t Laffeutden ffiWgmtTeles
3B Tips & Trik Adobe Dreomweover CS5.5
itus web adalah sebuah wadah yang berisi kumpulan dokumenweb yang saling berhubungan. Dokumen tersebut dapat berupadokumen halaman web, gambar, audio, CSS, dan sebagarnya.
Oleh karena itu, file-file tersebut harus dikelbla dengan baik. File tersebutdapat dikelompokkan berdasarkan type file, fungsi file, dan lainnya.Untuk mengelola file-file tersebut, Adobe Dreamweaver CS5.5 menye-diakan fasilitas yang disebut srte (situs). Fasilitas tersebut akan sangatmemudahkan para pengembang web untuk mengelola website-nyadengan rapi.
MANAJEMEN SITUSAdobe Dreamweaver CS5.5 menyediakan fasilitas untuk memanajemensebuah situs. Memanajemen berarti membuat, mengedit, dan meng-hapus site tersebut. Dengan fasilitas ini, Anda akan langsung terhubungdengan server web yang Anda gunakan, baik lokal pada komputer ataujaringan lokal, bahkan jaringan global (internet).
MrNlteuRtSm
Situs yang digunakan untuk mengelola file tersebut dapat dengan mudahdibuat dengan Adobe Dreamweaver CS5.5. Sebelum menggunakan SiteAnda harus membuat/mendefinisikan site terlebih dahulu. Anda dapatmembuat Site baru melalui Site Definition Wizard dengan langkah-langkah sebagai berikut:
1. Melalui menu bar Site > New Site.
Gambar 2.1 Membuat site baru dengan Menu bar
Akan muncul kotak dialog Site Definition.2.
f , Ak;rn muncul kotak dialog Editing Files, Part 2 Site Definition
Mengelolo Loyout don Content Teks Web
A 'ite,
in 0renmdeavBr, is 6 tollechon ol Files and foldert tlBl roresponds to n webiite on a
lerver,
What would you like to naru Your site?
,Xf.tM .- .
Exffpler my5ite
What rs the HTTP Addresr (URL) of your srte'
Ittolfilocartroltlasiarrlitg .
ExnmFle: httFrJ/www,myHost,EomJmysite
tF you waflt to Bork dire.tly on the server sing FTP or RD5, vou shouu 1Icglg-allEIe!|BQ:seiwr conmclim. working dire(tly on the serwr doet not dl@ you to pqlorm silewide
ooeraticns hl€ linkrheckjnq oI siLe repoils.
Gambar 2.2Kolak dialog Site Definition
lsikan nama site pada field teks pada pertanyaan What wouldyou like to name your site?, misalnya "AsiahSite".
lsikan alamat Site pada field teks pada pertanyaan What is theHTTP address (URL) of your site?. Berikut adalah kriteria untukmemberikan alamat site:
C) Apabila pada komputer Anda telah terinstal server websepertiApache, Xampp, Wamp, Sambar, llS, atau yang lain,berilah alamat site dengan diawali "localhost", misalnya"http ://local hosUAsiahSite".
G) Jika Anda memiliki alamat website di internet dan komputerAnda terhubung dengan internet, berilah alamat site dengandomain Anda, misalnya "http://www.asiah.web.id".
Sctelah mengisikan alamat site, lanjutkan dengan menekanlornbol Next.
20
3.
4.
Tips & Trik Adobe Dreomweover CS5.5
Do yo! wanl td dorfiwith a server te(hnoldgy tuch d foldFusion, AsP I'JET, AsP, lsP, or PHP?
L.:No, I do not want to ure B server technology.
iiYe5, I wanl Lo u'e a sBver technoloqy.()which server te(hnclDgy?
;P,NET CiF,IJET VE
Gambar 2.3 Editing Files, Part 2 Site Definition
6. Pada pertanyaan Do you want to work with a seryer techno-logy such as ColdFusion, ASP.NET, ASP, JSP, or PHP?(Apakah Anda menggunakan teknologi server?), pilih radio buttonYes, I want to use a server technology. (Ya, saya menggu-nakan server technology).
7. Di bawahnya akan muncul pertanyaan Which server techno-logy? (Teknologi server mana yang Anda gunakan?). Misalnyapilih PHP MYSQL.
B. Lanjutkan dengan memilih tombol Next.
9. Akan muncul kotak dialog Editing Files, Part 3 Site Definition.
I [,r 1r ;c;q1. Loyout don Content Teks Web
do you w6nl to ltore yow files?
Cr'tApF5erviwww\Asioh5itel
l--* e*[.'l l- ,'J"t* ] l- canrer - I i sa, : i
il
Gambar 2.4 Editing Files, Part 3 Site Definition
Pada pertanyaan How do you to work with your files duringdevelopment? (Apa yang akan Anda lakukan pada file siteAnda?). Pilih radio button Edit and test locally (my testingserver is on this computer), karena pada contoh ini dokumen/lrlc situs akan diedit dan diuji pada komputer lokal, tidak terhu-lrrrng dengan jaringan lokal maupun internet.l)r bawahnya terdapat pertanyaan Where on your computer doyou want store your files? (Di direktori mana Anda inginnrcrryimpan file pada komputer Anda?), isikan alamat direktori"t ) //ServApp/www/AsiahSite" dengan cara memilih [3, laluI rrowse clirektori yang dituju. C://ServAppiwww/AsiahSite disebut;rrr;ir scbagai remote folder.
l0
How do you wilt to work wilh your files during developmentT
Odit and teJl locdlly (my teshng server rs on Lhrs (omputer)
', . EdiL localiy, thm uploEd Lo remote tesling server
f-1fdit dirxtly on remote te*ing server uEinq locnl netlqlrk
fitilt{:}ffiffi1}.6lirlr'ryi }lffiffi}1:i *ffit*Eitjill.t1,l i'i"it+H;g
:ii 6 S i'lT--
$My FecentDocuments
LIl)
DPlf.toD
My Docuroents
".iq-:) -
l,,t-p ilonrputer
Select. ;1 Asial'5ite
SElsclrAsiahsite
42 Tips & Trik Adobe Dreomweover q!5.q
i *1: 'rr llu.rl}i -' -'D.
;; Myttetn-g1k
i,l
--1I s"k't I tryryI,-.=__ffi{I LanEel I I:-_:i
Gambar 2.5 Pemilihan folder tempat menyimpan file
12. Selanjutnya pilih tombol Next.
13. Akan muncul kotak dialog Testing Files Site Definition.
i :rii'rrlii:irlll;i lii j:;iiu:ijij'u"', r1:'1' r;'i,r
; 11'1'''1"
. Auti':'* . nAuan.ud
;1.,'r-'*,1,t+iiiii;rt;+,1+ri ::] :I i'i: i ii ririiiri;iiiii iiiil:li1r!11**tilffi'g
. ...."-..'...'.,,1
Slt* Fefinltion
firBamweaver commrlnicates with your testing server using HTTP (iust lihE i browser), ss it
needs to kr,ow the URL of your sitE's root foldBr.
What l-lRL would ynu u5e tlr browse to the root ol your 5itE?
http: //laralhF!r./Arah5rtel
Exampler httF r/i5erierOnelRostFslder/
L*t lpi ti';*--"--**&$
Gambar 2.6 Testing Files Site Definition
A,1r'rrt;elolo Loyout dr:n Content Teks Web
Pada pertanyaan What URL would you use to browse to theroot of your site? lsikan alamat URL "http://localhosUAsiahSite".
Kemudian lakukan pengujian terhadap URL tersebut denganmenekan tombol Test URL sehingga muncul kotak pesan yangmenyatakan bahwa pengujian URL Sukses. Pilih tombol OK untukmenutup pesan.
Gambar 2.7 Kotak pesan pengujian URL sukses
16. Pilih tombol Next untuk melanjutkan pembuatan site.17. Akan muncul kotak dialog Site Definition Sharing Files yang
berisi konfirmasi apakah Anda menggunakan remote server untukberbagi file antar-team.
tilhen you are done editing d file, do you coFy it lLr another marhnel Thii might be theproduction web
'trver or a ,tdging servEr that you lhnre with team mmbers,
{.J Yes, I wmt tD use a femotE ierver
'i\r.to
Gambar 2.8 Sitc Definition Sharing Files
llt l 'rlilr No karorr;r f ilc tirlak rli..s/rirnng melalui rcmote server.
43
14.
.15.
The UEL Prefix test was successFul.
Tips & Trik Adobe Dreomryesve!9lq.s
19. Pilih tombol Next.20. Akan muncul kotak Site Definition Summary.
21. Klik tombol Done untuk mengakhiri pembuatan site.
Gambar 2.9 Site Definition Summary
Hasit pembuatan site baru akan tertihat pada panel Files. Panel
akan menampilkan nama Site AsiahSite dan informasi lainnya.Files
Gambar 2.10 Site baru (Asiahsite) ditampilkan panel Files Gambar 2.12 Kolak dialog Manage Sites
Mcngelolo Loyout don Conteni Teks Web
t1{4p46ESmE
Manage Site adalah salah satu fasilitas Adobe Dreamweaver CSs.5 yanglrorupa kotak dialog dan berfungsi menampilkan site yang telah dibuat.l'irda kotak dialog Manage Site juga terdapat beberapa menu berupakrnbol yang digunakan untuk memanajemen site. Ada beberapa cararrrrtuk membuka kotak dialog Manage Site, antara lain:
, lr Melalui menu bar Site > Manage Sites.'l) Melalui panel Files, dengan cara menekan menu Manage Sites
pada menu drop-down list direktori.
Gambar 2.11 Menampilkan kotak dialog Manage Site dengan panel Files
lll lrawah ini adalah tampilan dan penjelasan menu yang terdapat padahuhrk dialog Manage Sites.
45
[ .t,-;-t
I:Til.Im;lf.rrq'!.+.rI
I nemove j
frrrlI r-p"*-
"-t
L-Es:J
46 Tips & Trik Adobe Dreomweovgtqss'5
Keterangan:
o Asiahsite, adalah nama site yang. baru saja Anda buat.
O New, untuk membuat site baru.
c Edit, untuk mengubah/mengedit site yang telah dibuat.
O Duplicate, untuk menggandakan site yang dipilih.g) Remove, untuk menghapus site yang dipilih.,t) Export, untuk mengekspor site menjadi file XML dengan ekstensi
(..ste).rt) lmport, untuk mengimpr:r file ".ste menjadi site.(r) Done, untuk menutup kotak dialog Manage Site.
MEMBUAT HALAMAN WEB BARU
Setelah Anda menciptakan site, langkah selanjutnya adalah membuat
halaman web baru dan mendesainnya dengan baik' Bagian-bagian
halaman yang harus diperhatikan adalah judul, layout, dan content
halaman. -Dengan
Adobe Dreamweaver CS5.5, Anda dengan mudah
mengatur properti tersebut menggunakan berbagai tool yang disediakan.
Anda dapat membuat halaman web baru, sebagaimana di hari pertama
pada subbab Membuat Dokumen Baru.
Mrnrrrnul<RNTruTile fiudul) merupakan identitas halaman web yang tampil pada title bar
browser. Judul ini digunakan untuk memberikan gambaran tentang isl
halaman web yang sedang dibuka. Untuk memberikan judul halaman'
Anda dapat melakukannya dengan cara berikut:
O Melalui Document Title
Anda dapat memberikan judul melalui Document Title yang
terdapat pada Document Window. Document Title ini terletalt
pada bagian di atas tengah Document Window.
Gambar 2.13 Mcrrrlttlrik;ttt itrtltrl rlttttt;;ttt l)or tttttcttl ltllrr
1.1' ,r)qelolo Loyout don Content Teks Web
lr Melalui Page PropertiesUntuk memberikan judul halaman menggunakan page proper-ties, Anda dapat rnelakukannya dengan langkah-langkah sebagaiberikut.
Properties atau CTRL+J. Anda juga dapat mernbukanyamelalui Property lnspector > Page Properties.
2. Setelah muncul Page Properties, pada daftar Category pilihTitle/Encoding.
3. Pada bagian input Title masukkan judul halaman.4. Pilih OK untuk menutup Page Properties.
47
ffi:
!
{' rl rtr-l(-rfI , .:/it 't x , rr dn,:e (f55 jrit ,t ', . rr arrte (HTML)
I r rl ,, r',-'r,qi
dJ'.'{rtrny5ytE q,! {'t'r1:it*.S$Hi$p#
\r.'rrrrfl?.!n# "'"-""
Title/Encoding@i*J
-..1ri.ifuffi
t,*, Eelaiar Adobe Dr*arn,o*ai,*r C5E.El I-Document Tvpe iDTDi: ;iHTlvlL 1.0 Transitional '*
. !':!:
Encodirrs: iu;i4;ilTr:Bi +;t1 i:gG_JUnir,rde r.,,tormalizatirn Eorrn: ,l iii""rli"f r-i"mfoi,t1o",
1oqtou. ;.,
il tnclude Unrcode 5igrrature {80}41
[torument folder.:
:lile faider:
I --Ftr--i
Gambar 2.14 Memberikan judul melalui Page Properties
Mclalui kode HTMLlicl;rirr dengan cara di atas, Anda dapat memberikan judul secararrr;rrrtral pada kode HTML. Anda dapat memberikan judulIr,rl;rrnan di antara tag <title> </title>.
48 Tips & Trik Adobe DreomweoYglq!!.s
< r roCff iS htnl PIJBL If, - -./.1rrr3[ / /D-tD,I{IITM 1. 0 Transi Eic'nal /,/E]I" "htrp l //-hE&I x&InF. "I-rtt$ : l'./tnlw. I"3 . o t g / ] 9 I $ /xhtx{rl "}dhead><oet.a hLtp-eqlriv,"f,ontenf:-T)?e" E,lntent="text/hcu1; ehaEset=uEr-4" ,1>
<titl e>Ee I aj ar Adobe Dr ea&I'rEarer 855. 5</ til:l e>
</head>
<hcd!{}</bodI}</ht&l>
Gambar 2.15 Memberikan judul melalui kode HTML
Anda juga dapat melihat title bar pada browser menjadi "Belajar Adobe
Dreamweaver CSs.5" saat dokumen ini dijalankan pada browser.
MrMBuffibr*N H Wrs "Sebuah desain layout menentukan kualitas sebuah website sehingga
berpengaruh terhadap pengunjung yanE mengakses website Anda.
LayoutJuga menentukan apakah informasi yang Anda sampaikan mudah
diterimi fengunjung, dan bukan malah membuat pengunjung bingung
apa yang haius dilakukan pada halaman yang mereka kunjungi. Desain
halaman yang baik adalah apabila pengunjung merasa nyaman, mudah
menerima iniormasi yang disampaikan, dan tentu saja tampilannyamenarik.
Secara umum, tayout sebuah halaman web terdiri dari beberapa bagian,yaitu bagian atas header (banner), bagian tengah (isi/content), bagian
samping (menu), dan bagian bawah (footer).
Ileader lBantrer
Menu /Logrn /Pesan
Isi / Coatent
Footer
Gambar 2.16 Layout umum halaman web
Mr:rrgelolo Loyout don Contenl Teks Web
Anda dapat membagi sebuahlrirlaman web dengan 3 teknik,
halaman untuk meletakkan bagian-bagianyaitu tabel, frame, dan layer.
Membuat Layout dengan Tabel
( )irra pertama untuk me-layout halaman web adalah dengan Table yangIorletak pada tab Layout dan Common panel lnsert (lihat pada Bab 1
rirrl;bab Panel lnsert). Table merupakan teknik yang paling seringrliryunakan karena bagian-bagian halaman web dapat diatur secara rapi,rrirrretris, dan terstruktur.
ttternbuatTabel
t lntuk membuat table, Anda dapat melakukannya dengan langkah-lr rngkah sebagai berikut:
1. Melalui panel pilih panel lnsert > Layout atau common > Table,atau melalui menu bar pilih menu lnsert > Table (GrRL+RLT+T).
Gambar 2.17 Membuat tabel dengan panel lnsert tab Layout
50 Tips & Trik Adob. Dtuo**uo,"t C!55
fliiliii;i:':,:'tLu,,l ;;'':'f i''11;';'li '':';-'''";'"r::;'3';;:''ll-'"1 '''"'''i:1 ;'i"iIi'ffi$
...,.i.:"'..: "'' " :'''i"''';i'*' " '*-''i
fi r"hh riu"'***"y'* *-::::**:a'*=*T** iii Rowu, ,i
', catwr's: 2
" i
Table stidth': i 70 , percent ti,i;
Bordathickness: l .Pixels
Ce$ paddinqr : ii;i.
Celspacinsr i i,}-Yi
Gambar 2.18 Kotak dialog Table
2" Akan muncul kotak dialog Table'
3" Isikan Rows (baris) dengan 4 dan columns (kolom) dengan 2,
serta Table wlafi, o"rgrn |yo/o, biarkan dulu properti yang lain'
4. Hasil dari tabel 4 baris 2 kolom tersebut pada area desain terlihat
seperti berikut:
Fib Edt \r,ew lrlry! rt@,ry:.,iF.#mlt',,'[g!l!I!el
Gambar 2"19 Hasil tabel 4 baris 2 kolom
Property lnsPecbr Table
Dalam melakukan pengolahan tabel, Anda akan sering berhadapan
dengan Property lnspeitor. Terdapat 2 properti tabel pada Property
lnsp"ector, yaitu [roperti tabel dan properti sel'
i;rlffis,*Hif:
Mengelolo Loyout don Content Teks Web
Properti Tabel
Di bawah ini adalah tampilan dan penjelasan tentang properti tabel.
5l
F*SIISRTIE$
[Ifi t**lrs '" '''
R0"$ ia ' : rlr i75 :.;i- - f i*u;1 . *mr.crr[,
"" T*, u* r,ron,
ffiIcrei,i t,,, t;sr"*,i
.mr*,.,Ittt :
; " H nrr,, , ' t:' .;1,,
=i. .,',, + ;l ,
Gambar 2.20 Properti Tabel
Koterangan:
(rl l
t:l)
r.l )
Table: Memberikan id tabel.Rows: Menampilkan dan menentukan jumlah baris tabel.W (Width): Lebar tabel. Terdapat 2 satuan, yaitu percent danpixel.
Cols: Menampilkan dan menentukan jumlah kolom tabel.cellPad: Jarak antara teks dengan sisi sel tabel. Untuk lebihjelas, perhatikan perbedaan Padding 10 dan Padding 0 padagambar di bawah ini.
Paddurgl OPaddtrgl 0Padd'ngl 0Paddrgl 0 ii
Paddrngl 0Paddtrgl 0Paddrngl 0Paddurel 0 ri
Paddtrgl OPaddngl 0Padd'ngl OPaddrngl 0 : j
Paddurgi 0Paddtrgl 0Paddurgl 0Paddrngl 0 j
Paddngl OPaddurgl OPaddrngl 0Paddrnel 0,l
Gambar 2.21Tabel dengan Padding 10
Gambar 2.22Tabel dengan Padding 0
cellspace: Jarak antarsisi sel tabel. Untuk lebih jelas, perhatikanperbedaan cellspace 2 dengan cellspace 15 pada gambar ditrawah ini.
addtrg0P addtrg0P addrflg0P a
a d dng0P addtrg0P a d drrrg 0P
d drng0P addrrg0P addurg0P ad
addrng0P addtrg0P add,ng0P
52 Tips & Trik Adobe Dtqo11."or"t CS55
C ellSp ac e2 C ellspaceZCellSpac e2
C ellSp ac e 2C ellspac e2 C ellSp ac e 2
CellSp ac e 2 CellSp ace 2 CellSp ac e 2
Gambar 2.23Tabel dengan CellSpace 2
CellSpace i 5Cellspace lSCellSpare 1
CellSpace i 5CellSpace l5CellSpace 15
Cellspace l5CellSpace l5CellSpacr I l
Gambar 2.24Tabel dengan CellSpace 15
Align: Menentukan posisi tabel secara horizontal pada halaman'
Par-ameter Align yang dapat digunakan antara lain:
@ Default: Posisi default tabel adalah left'
@ Left: Posisi tabel diletakkan pada kiri halaman'
@ center: Posisi tabel diletakkan pada tengah halaman.
@ Right: Posisi tabel diletakkan pada kanan halaman.
Border: Menentukan tebal sisi-sisi tabel. untuk lebih jelas,
perhatikan gambar di bawah ini.
Gambar 2.25Tabd dengan Border 0
+rder 1 0B +rder 1 0B +rderl 0
derl 0B+rder1 0B+rderl 0
10Border10Borderl0
Gambar 2,26Tabel dengan Border 10
Class: Untuk menerapkan Style CSS pada tabel'
P'l
O
trl
Loyout don Content Teks Web
Gambar 2.27 Properti class pada property lnspector Tabel
tfroperti Sel
lfrrp,rty lnspector pada sel tabel dapat Anda lihat pada gambar dilrnwrrlr ini.
Gambar 2.28 Properti sel tabel
hplptrrr{lan:
' " Eltrl uerge Gells: digunakan untuk menggabungkan beberapakolom/baris yang telah diseleksi. Menu ini akan aktif setelah adaporryeleksian sel.
AH Split Cells: digunakan untuk menambahkan baris/kolornIirrl;r sel yang aktif. Menu ini akan aktif jika kursor berada padairU.tlU Sel-
' llorz (Horizontal): Digunakan untuk menentukan posisi teksIrrrrzontal pada sel. parameter Horzyang digunakan adalah:( ) Default: posisi default teks pada sel adalah left.u Loft: menentukan posisi teks di dalam kiri sel.(') conter. menentukan posisi teks di dalam tengah sel.n Rlght: menentukan posisi teks di dalam kanan sel.' Vorl (Vcrtir;al): Digunakan untuk menentukan posisi teks vertikal;rirrlir :;ol. Parameter Vert yang digunakan adatah:r ) Dofault: grosisi dcfault tcks a<Jalah Middle.
54 Tips & Trik Adobe Dreomweover CS5.5
Top: menentukan posisi teks di dalam sel bagian atas'
Middle: menentukan posisi teks di dalam sel bagian tengah'
Bottom: menentukan posisi teks di dalam sel bagian bawah'
Baseline: sama sePerti ToP.
f
ii
iDefault rl/ertrhal)!i
Gambar 2.29 Posisi teks terhadap sel
W (Width): Menentukan lebar sel. Apabila satu sel diubah lebar-
nya maka sel-sel pada suatu kolom akan mempunyai lebar yang
sama.H (Height): Menentukan panjang suatu sel. Apabila satu sel
diubah -panjangnya
maka sel-sel pada suatu baris akan mem-
punyai panjang yang sama.
No Wrap: untuk membuat sel menjadi No Wrap.
Header: memasang suatu sel menjadi header, hal ini ditandai
dengan teks yang dicetak tebal.
Bg (Background): membuat warna latar suatu sel. Pemberian
wirna latar ini hanya berlaku untuk sel yang dipilih saja.
ffiS$EtrE irr,,.:,,, EI @ ,lI
@
@
@
@
o
o
oO
e
Gambar 2.30 Pemilihan warna latar suatu sel
Mengelolo Loyout don Content Teks Web
Desain LayoutTabel
Setelah membuat sebuah tabel standard, selanjutnya tabel tersebut akandibuat sebuah layout halaman.
tJntuk melakukannya, ikuti langkah-langkah sebagai berikut:
1. seleksi kedua kolom pada baris pertama dengan cara menekandan drag sel-sel yang akan digabungkan.
Gambar 2.31 Menyeleksi sel-sel
Ada 2 cara untuk menggabungkan, yaitu:
O Klik kanan pada sel-sel yang diseleksi, pilih Table > MergeGells.
P.:ragr,:ph Fnrnrst
List
2.
AIiqn
FontInsert R0l/!
In5Ert i:nlun'lrr
Irlsert fl.r:,rvs or iolumn:;
DelBte Rnw
Style
T*mplates
o
Gambar 2.32 Menggabungkan sel melalui klik kanan
Pada Property lnspector pilih Merge Gells"
Gambar 2.33 Merge Cells pada Property lnspector
Lakukan hal yang sama pada baris kedua.Hasil dari penggabungan kolom tersebut terlihat seperti gambarberikut:
tffi:-lbhFI r* r"EI ',,,,,-_,,_',
t'lrre
trert
Ruu+
rl=tl
Tips & Trik Adobe Dreomweover CS5.5
5.
Gambar 2.34 Hasil penggabungan kolom
Aturlah lebar masing-masing kolom. Anda dapat mengubah lebarkolom dengan cara berikut:
O Arahkan kursor pada pembatas 2 kolom sehingga kursorberubah menjadi *ll-', lalu geser ke kiri hingga lebar kolomkiri menjadi 25%.
Gambar 2.35 Mengubah ukuran kolom dengan kursor
O Atau dengan Property lnspector. Letakkan kursor padasalah satu kolom kiri. Ubahlah properti W (Width) menjadi25%.
o.
Gambar 2.36 Mengubah ukuran kolom melalui Property lnspector
Hasllnya terlihat sebagai berikut:
Gambar 2.37 Hasil penggabungan sel
Aturlah jarak sel antarbaris sesuai yang Anda kehendaki. Lakukanseperti langkah ke-S, namun yang diubah adalah lebar baris.
7.
Mengelolo Loyout don Content Teks Web 57
Apabila menggunakan Property lnspector maka untukubah ukuran baris adalah di bagian H (Height).
meng-
!lrxrlr
[f*ss
li
;
S*fl*, l^l
Frrx 1
Gambar 2.38 Hasil akhir layout halaman dengan tabel
B. Tambahkan pada tiap sel elemen teks yang menerangkan bagiandari elemen web.
9. Hasil akhir dari pengubahan tabel terlihat seperti Gambar 2.38.
Membuat Layout dengan Frame
oara kedua untuk membuat layout sebuah halaman web adalah denganlrirrne. Untuk mendesain layout dengan frame terdapat 2 istilah yang:;cring digunakan, yaitu frame dan frameset. Frame adalah area di dalamlrrowser yang dapat menampilkan halaman web yang lain. DenganIr;rnre, Anda dapat menampilkan beberapa halaman web secara ber-',rlnaan dalam satu halaman. Sebagai gambaran frame menampilkanlr;tlarnan yang berbeda adalah:
, r) Frame 1, bagian atas untuk menampilkan halaman banner saja.) Frame 2, bagian kiri untuk menampilkan halaman navigasi saja.
,r Frame 3, bagian kanan untuk menampilkan halaman content.
I riuneset adalah suatu frame yang menampung frame-frame tersebut.lir:nrua properti tentanq frame seperti jumlah, posisi, lebar, dan namar lr; rtur pada framesot ini.
5B Tips & Trik Adobe Dreomweover CS5.5
Gambar 2.39 Frame dan frameset
tUlernbuat Fname
Sebelum membuat frame, Anda dapat membuka panel Frame melalui
menampilkan layout frame dan dapat digunakan untuk menyeleksi frameyang akan dimodifikasi.
Untuk membuat frame, Anda dapat melakukannya dengan langkah-langkah sebagai berikut:
1. Melalui menu bar, pilih menu lnsert > HTML > Frame > posisiframe. Selain itu, Anda juga dapat membuatnya melalui panellnsert > Layout > Frame > posisi frame/template frame,
Mengelolo Loyout don Content Teks Web 59
Gambar 2.40 Template Frame pada tab Layout
2. Pilih Top Frame.3. Akan muncul kotak dialog untuk memberi
frame, isikan mainFrame dengan "content".
4. Pada list Frame pilih topFrame, lalu isi Title
r*il*t"-----Jd---,L camel I
f-:r"q-:-l
Gambar 2.41 Memberi title frame
5. Letakkan kursor pada frame yang bawah.6. Pilih Left Frame, lalu isi Title dengan "navigasi".
7. Letakkan kursor pada frame kanan bawah.B. Pilih Bottom Frame, lalu isi Title dengan "footer".
9. Anda dapat melihat hasilnya pada Document Window sebagaiberikut:
judul masing-masing
dengan "header".
For each frane, sptrify 6 titb.
Frme: :mainFrdme fi#j,,,,,,,,,,,,,,,:,,,,,,
'Itle: : content ;
If rou dmt want to cDt€r tt*tinfsm.ti]n wh€n hr$ting obitdt,rhrnoe. Ee Acrertrhifr tv oref,rarences.
I
Tips & Trik Adobe Dreomweover CS5.5
Gambar 2.42 Hasil pembuatan frame
Menyimpan Frame
Cara menyimpan desain frame sedikit berbeda dengan cara menyimpanhalaman biasa. Hal ini dikarenakan frame terdiri dari beberapa halamanyang terpisah, namun ditampilkan pada satu halaman saja. Anda harusmenyimpan setiap frame menjadi halaman tersendiri atau menghubung-kan dengan halaman lain yang telah jadi.
Untuk menyimpan frame, ikuti langkah-langkah berikut:
1. Letakkan kursor pada mainFrame, lalu pilih pada menu bar File >File > Save Frame.
Mcngelolo Loyout don Content Teks Web 61
Save Frame As.,, Ctrl+shift+sSave All
Save lo Remote server,,,5ave Frame as Template, ,,
2.
3.
Gambar 2.43 Menyimpan frame
Ulangi langkah pertama pada topFrame, leftFrame, danbottomFrame"Untuk menyimpan frameset, seleksi garis pemisah antarframe,lalu simpan melalui menu bar dengan pilih File > Save Frameset.
Save FrEmeset 4s,,, Ctrl+shitt+sI
5ave All I
1
to Remote Server,,,
Gambar 2.44 Menyimpan frameset
Saat muncul kotak dialog penyimpanan, simpan file seperti biasa.Untuk mengetahui hasil desain layout Frameset, jalankan padabrowser dengan nama frameset yang telah disimpan, misalnya"frame.html".
4
fr
& Trik Adobe Dreomweover CS5.5
tr*lls*fil.iffmffiiiffi ffifffi 5i::ilii::f:::i::1,t1!i:E:::i#* ' *31i
iff Ed'ii;:;;ffii;Ti.fi,*i".r'-Eip"*"- I
i ,l"l*,,"0 , fi' j
s ir " j / htp//loralhortl.'r3hntEifrnme/fiare.html, :-: '\ )
Header
Gambar 2.45 Hasil desain frame pada browser
Properti lnspector Frame
Untuk mengedit frame, Anda akan banyak berhubungan dengan Propertylnspector. Property lnspector frame terdiri dari 2 macam, yaitu Propertylnspector Frameset untuk mengedit frameset dan Property lnspectorFrame untuk mengedit frame.
Property lnspector Frameset
Untuk menampilkan Property lnspector frameset, Anda dapat melaku-kannya dengan cara menyeleksi garis batas antarframe. Berikut adalah
tampilan dan penjelasan Property lnspector Frameset.
Gambar 2.46 Property lnspector Frameset
r.4, rngelolo Loyout don Content Teks Web
Kcterangan:
' Borders: untuk memilih apakah frame mempunyai border atautidak. Terdapat 3 parameter border, yaitu:
O No: tidak ada border
€) Yes: memakai border
O Default: secara default frame tidak memiliki borderBorder width: menentukan ketebalan border.Border color: menentukan warna border.Column/Rows: lnformasi frame yang dipilih adalah kolom/baris.Terdapat 2 elemen Column/Rows, yaitu:
O Value: lebar kolom/baris frame.
O Units: satuan lebar baris/kolom frame, yaitu pixels, percent,dan relative.
l'roperty lnspector Frame
llrrltrk menampilkan Property lnspector frame, Anda dapat menyeleksih,rrrrc melalui panel Frames. Sebagai contoh, jlka Anda ingin mengatur;,rrr1)cdi mainFrame maka Anda dapat menyeleksi mainFrame pada
I'riltol Frames.
Gambar 2.47 Menyeleksi mainFrame pada panel Frames
ll,r',rlnyir, parla Property lrrspector terlihat properti dari mainFramellrr11111;I llcrrjolirsirrr <lirrr titntpilirtr rJirri Proprlrty lnspector frante.
64 Tips & Trik Adobe Dreomweover CS5.5
Gambar 2.48 Properties Frame mainFrame
Keterangan:
0 Frame name: menampilkan nama frame yang terseleksi.
€) Src: link dokumen yang ditampilkan pada frame. Untuk meng-
ganti dokumen, pilih it<on ffi dan browse dokumen pengganti.
e Scroll: untuk menentukan apakah frame mempunyai scrollbaruntuk menggulung content dokumen. Parameter scroll adalah:
@ No: frame tidak menampilkan scrollbar
@ Yes: frame menampilkan scrollbar
@ Auto: frame akan menampilkan scrollbar jika contentdokumen lebih tinggi dari tinggi frame dan sebaliknya
@ Default: secara default frame tidak mempunyai scrollbar0 No Resize: frame tidak dapat diubah ukurannya.O Borders: untuk menentukan apakah frame mempunyai border.
0 Border color: untuk menentukan warna border.O Margin width: untuk menentukan lebar margin.O Margin Height: untuk menentukan tinggi margin.
lVlengubah Properti Fnalre
Anda dapat mengubah properti dari frame melalui Property lnspector.Sebagai contoh, Gambar 2.45 yang tidak mempunyai border frame akandiubah menjadi mempunyai border dan mempunyai scrollbar, serta diaturulang ukuran masing-masing frame.
Untuk melakukannya, lakukan langkah-langkah berikut:
1. Pilihlah setiap frame, ubahlah properti Borders dengan Yes danpilih warna biru untuk Border Golor.
2. Pilih frame mainFrame, lalu ubah Scroll dengan Yes.3. Ubahlah setiap ukuran frame dengan cara menyeleksi satu per
satu batas frame dan drag, atau melaltri Proporly lnspector
Mcngelolo Loyout don Content Teks Web
frameset bagian column/Rows > value. lsikan sebuah nilai padateks field Value tersebut.
4. Hasilnya, desain frame akan terlihat seperti pada gambar di
Gambar 2.49 Desain frameset setelah diubah
Gambar 2.50 Hasir perubahan desain layout dengan frame
llrrsil tampilan pada browser terrihat seperti pada Gambar z.so.
65
66 Tips & Trik Adobe Dreomweover CS55
Membuat Layout dengan Layer
Cara ketiga untuk mendesain layout adalah dengan layer. Layer adalah
salah satu keunggulan Dreamweaver dibandingkan web editor lainnya'
Layer merupakan layout yang paling fleksibel karena Anda dapat
mendesain layout sesuka Anda, tanpa terbatas pada baris dan kolom'
Layer dapat Anda analogikan dengan sebuah kaca transparan yang
ditempelkan di atas kertas.
Terdapat 2 jenis layer yang dapat digunakan untuk mendesain layout,
yaitu iayer statis dan layer dinamis. Perbedaan keduanya adalah layer
itatis tidak bisa diubah-ubah, sedangkan layer dinamis dapat diubah,
dipindah sesuai keinginan Anda. Secara mendasar, layer statis hanya tag
HTML <div></div>, sedangkan layer dinamis adalah tag HTML <div
id=styleCSS></div>. lni berarti Anda mendesain layout menggunakan
bahasa style, yaitu CSS.
tlllembuat layer
Pada kesempatan ini, kita akan membahas pembuatan desain layout
dengan layer dinamis. Untuk membuat layer secara visual/grafis dapat
Anda lakukan dengan langkah-langkah sebagai berikut:
1. Ada 2 cara memasukkan layer ke dalam dokumen, yaitu:
@ Melalui menu bar pilih lnsert > Layout objects > Ap Div.
@ Melalui panel, plih panel lnsert > Layout > Draw Ap Div.
Gambar 2.51 Membuat layer melalui panel lnsert tab Layout
Mcngelolo Loyout don Content Teks Web
Akan terlihat kursor berubah menjadi plus EB, klik kiri mouse dangeser kursor maka akan terlihat layer berbentuk kotak biru.
h$u,l# *
' #ffia$ ***m.&*I;ffi#il
*1
Gambar 2.52Kolak layer
Untuk mengubah ukurannya, pilih sisi layer sehingga munculkotak kecil di setiap sudut dan sisi.Arahkan kursor pada kotak kecil sehingga kursor berubah menjadil++1, kemudian geserlah sesuai ukuran yang Anda inginkan.
Gambar 2.53 Mengubah ukuran layer
67
2.
3.
4.
6B Tips & Trik Adobe Dr.o*YtqYttgS5S
# f#lff*;*-;",-;W. i.li;Ta'ffilitrr#;.i"t'ft
5.
Gambar 2.54 Hasil pengubahan ukuran layer
Untuk menggeser layer, arahkan kursor pada sisi layer sehingga
kursor berubah menjadi E. Geser layer tersebut pada posisi yang
Anda inginkan, misalnya di bagian atas sebagai header.
Gambar 2.55 Mengubah Posisi laYer
Gambar 2.56 Hasil pergeseran posisi layer
l'nlr
lr
Mengelolo Loyout don Content Teks Web
Panel unfuk LayerAP Elements
l'anel AP Elements menampilkan lD dan indeks (Z) dari layer.rlapat menggunakan panel ini untuk menyeleksi layer yang akanolah.
69
AndaAnda
Gambar 2.57 Panel AP Elements
l';rda panel AP Elements terdapat checkbox Prevent overlaps yanglrcrfungsi untuk menjadikan layer tidgk bisa tumpang tindih. Hal ini ditan-rl,ri dengan kursor yang berbentuk l$l pada layer yang akan ditumpuki.
Property lnspecfior tayer
tlntuk mengubah properti Iayer, Anda dapat mengubahnya melalui Pro-purt! lnspector. Berikut adalah tampilan dan penjelasan Propertylrr:;pector layer:
i,fX Chor, r.rone ffi
Gambar 2.58 Property lnspector Layer
)rangan:
' , CSS-P_Element: menampilkan ld CSS yang dipakai untuk
membuat layerlr L (Left): jarak antara sisi kiri layer dengan sisi kiri halaman atau
posisi horizontal layer terhadap tepi kiri dokumenT (Top): jarak antara sisi atas layer dengan sisi atas halamanatau posisi vertikal layer terhadap tepi atas dokumen
70 Tips & Trik Adobe Dreomweover CS55
W (Width): lebar layer
H (Height): tinggi layer
Z-lndex: index layer atau urutan pernbuatan layer
Vis (Visibility): adalah properti layer yang mengatur tampak-tidaknya layer
Parameter Vis antara lain:
@ Defautt. secara default Iayer adalah Visible
@ Inherite: mengikuti nilai layer induk
@ Visible: layer tampak pada dokumen
@ Hidden: layer disembunyikan/tidak terlihat pada dokumen
Bg tmage: Memberikan gambar pada latar (background) layer.
Ciranya, pilih ikon folder [H, lalu telusuri file image yang akan
disisipkan.Bg Color: Memberikan warna background pada layer. Caranya
t r- llpilih ikon [L-rll, lalu pilih warna yang sesual'
Class: Menyisipkan class CSS pada layer.
Overflow: Memberikan atribut tambahan pada layer. Parameter
overflow adalah:
@ Tidak mempunyai nilai
@ Visible: menampilkan overflow
@ Hidden: menyembunYikan overflow
O Scroll: menambahkan scrollbar pada layer
@ Auto: menambahkan scroll secara otomatis jika panjang
content lebih tinggi daripada tinggi layer
Clip, membuat sebuah kotak pada layer dengan atribut sebagai
berikut:
@ L (Left): jarak sisi kiri layer terhadap clip
@ T (Top): jarak sisi atas layer terhadap clip
@ R (Right): jarak sisi kanan layer terhadap clip
@ B (Bottom): jarak sisi bawah layer terhadap clip
6i
OO0\
O
r.:D
rlo
CI
Mcngelolo Loyout don Content Teks Web
Desain layout Layer
lictelah Anda mengetahui cara membuat layer, tahap selanjutnya adalahIrrembuat layout dengan layer. Layout yang dibuat adalah standard yangrrremiliki bagian header, bagian menu/navigasi, bagian contenUisi, danlrngian footer.
lkrrti langkah-langkah berikut untuk membuat desain layout dengan layer:
1. Anda telah membuat layer header pada contoh di atas.
2. Buatlah layer kedua untuk menempatkan menu/navigasi. Tem-patkan pada sisi kiri halaman dan atur lebarnya.
3. Buatlah layer ketiga untuk menempatkan contenUisi. Tempatkanpada sisi kanan halaman dan atur lebarnya.
4. Buatlah layer keempat untuk menempatkan footer. Tempatkanpada bawah halaman dan atur lebarnya.
!r.
Gambar 2.59 Desain layout dengan layer
Berilah teks pada setiap layer sesuai fungsi masing-masing layer.Anda dapat menambahkan teks dengan cara:
1) Letakkan kursor pada layer, kemudian ketikkan "Header","Navigasi", "Content", dan "Footer".
2) Blok masing-masing teks, lalu pilih ikon ffi pada Propertylnspector, ubah warna teks menjadi biru.
3) Letakkan kursor pada layer, lalu ubah posisi teks agarberada di tengah layer dengan memilih ikon tr padaProperty lnspector.
72 Tips & Trik Adobe Dreomweover CS5.5
6. Ubahlah warna latar setiap layer dengan warna berbeda menggu-nakan cara sebagai berikut:
1) Pilih pada panel AP Elements index 1 atau APDiv.
2) Pada Property lnspector pilih Bg color ffi.3) Ulangi langkah t hingga semua layer m.egp-U"nya!
berwarna.latar
I::itU :l#.:. -:in*!iffi,",tril* ffi
Gambar 2.60 Hasil desain layout layer pada document window
Gambar 2.61 Hasil desain layout layer pada browser
t,1,'n(fclolo Loyout don Content Teks Web
Mr:mbuat Template Layout
l,rr1p;r1* adalah sebuah dokumen yang digunakan untuk membuat,ru,rlu layout dokumen web. Template akan memudahkan Anda dalamrrr,rrrlesain beberapa dokumen web yang mempunyai tampilan/layoutviut{f Sorla. Anda cukup memanipulasi template tersebut untuk membgatlr,lr1,12ps dokumen web yang mempunyai layout sama.
l,r;1p;r1u biasanya terdiri dari 4 bagian (tipe region) layout, yaitu:
' Fixed Region: bagian template yang tidak dapat diedit
' Editable Region: bagian template yang dapat diubah' Repeating Region: bagian template yang dapat diulang-ulang' Optional Region: bagian template yang merupakan pilihan
dapat diubah maupun tidak dapat diubah
Munbuat Edihm Region
l,llhrlrle Region adalah bagian template yang dapat diubah/diedit.r\rLrJrur cara membuat Editable Region adalah:
I Buat terlebih dahulu dokumen yang akan dijadikan template.Biasanya berupa layout dokumen. Anda dapat menggunakansalah satu layout yang telah Anda buat di atas. Sebagai contohgunakan Iayout layer seperti berikut:
73
Gambar 2.62 Layout yang akan dibuat Template
Pada bagian header masukkan lmage Placeholder melalui menulnsert > lmage Objects > lmage Placeholder.
Tips & Trik Adobe Dreomweover CSS.5
ffi r.ls,lituH&W.:: :rejrya-!, -r(rnI/lry!:l
'-:r:-i
ihi-Alt-ll;
!
li
Il
Sib ,lryi3dsw iielF
lfiisb Piarehdlder
Boli4eei ifinqe
I'le,rigrtior Bar
lirev+*ris Hiil'lL
ia4.Inage
lrlrage Sbjste
11*t:labl*
Gambar 2.63 Memasukkan lmage Placeholder melalui menu bar
@ Akan muncul kotak dialog pembuatan lmage Placeholder.Masukkan propertinya sebagai berikut:
lr:age Pliiehilder ' '
tlame: EanflPr
vdide: i.i?il '" 'l Heiqht'
l9o
coior: Gi +0000FF
Alternate,**t, : Banne,'l
Gambar 2.64 Kotak dialog pembuatan lmage Placeholder
@ Sehingga bagian banner akan terlihat sebagai berikut:
Gambar 2.65 Penambahan lmage Placeholder pada bagian banner
3. Seleksi pada bagian yang akan dijadikan Editable Region, dalam
contoh ini adalah lmage Placeholder seperti terlihat pada gambar
di atas.
Region atau melalui shortcut keyboard CTRL+ALT+V'
Mr:rrqelolo Loyout don Content Teks Web
Gambar 2.66 Menu bar membuat Editable Region
Akan keluar sebuah kotak informasi yang menyatakan dokumenotomatis akan dibuat sebagai template.
Centang cek box Don't show me this message again, pilih OKuntuk menutup kotak dialog.
,"?''
'# Orearn'seauer **ill autanaticaftY ssnyert thisdoel*:rent ts a template,
i#, iqdii*g"*.*- eii;#;;" #;
Gambar 2.67 Kotak informasi Dreamweaver
Selanjutnya akan keluar kotak dialog pembuatan Editable Regionbaru.
lsikan Name dengan "Gambar Banner", kemudian pilih OK.
75
5.
6.
7.
u.
76 Tips & Trik Adobe Dt*r11-=oru,!!I{
-**,mtii"m:x*:*::i:l{s reg{cur tlt#,be ediMe irl dess*rm&bamdsn thirierdate,
Gambar 2.68 Kotak dialog pembuatan Editable Region
Terlihat lmage Placeholder dengan warna biru nama Editable
Region sebagai berikut:
Gambar 2.69 Hasil pembuatan Editable Region pada bagian banner
10. Setelah selesai mengedit, simpan dokumen tersebut sebagai
template. Pilih pada menu bar File > Save Frame as Template'
Gambar 2.70 Menu file menyimpan dokumen sebagai template
Akan muncul kotak dialog Save As Template, isikan deskripsi
template yang akan disimpan.
9.
11.
Mcngelolo Loyout don Content Teks Web
selanjutnya pilih save untuk menyimpan dokumen sebagai tem-plate dan menutup kotak dialog.
Gambar 2.71 Kotak dialog Save As Template
f'Iermbuat Repeating Region
l{,Jreating region adalah bagian template yang dapat diatur ulang. Untukrrrombuat Repeating Region, Anda dapat melakukan langkah-langkah,inlragoi berikut:
1. Buka dokumen template yang baru saja Anda buat.2. sebagai contoh akan dibuat tabel dengan 3 baris 3 kolom.
Gambar 2.72Tabel 3 baris 3 kolom yang akan dibuat Repeating Region
:|. Seleksi baris kedua dengan mouse.
Gambar 2.73 Menyeleksi baris yang akan dijadikan Repeating Region
4 Buka kotak dialog pembuatan repeating region dengan cara mem-buka menlr bar lnsert > Template object > Repeating Region.
77
12"
ilsffffi*l
stu, i *niufrs,u- -"-*** -* :;Ii* .. .- ^**"*._* .-**;*J
Exisrnq bmgab.r i*iufrsii *-"*--l
,tilri:Iiili"_*__*^'-_*_ .... J
7B Tips & Trik Adobe Dreomweover CS5.5
Akan muncul kotak dialog pembuatan Repeatingnama Repeating Region, kemudian pilih OK.
Region, isikan
--*--*tror*., J*{*__*_*_lthis region wi$ appean mdtide tinns indoc.unenh based sn frs tEflsdatE,
Gambar 2.74 Kolak dialog New Repeating Region
Jika berhasil pada tabel akan muncul nama repeat region, yaituRepeat: Tabel.
Gambar 2.75 Hasil penambahan Repeat Region pada baris
Langkah selanjutnya adalah menambahkan Editable Region padatiap sel yang ditambahkan Repeat Region. Hal ini dikarenakanRepeat Region tidak dapat diedit.Letakkan kursor pada sel pertama, pilih pada menu bar lnsert >
Template Object > Editable Region.
N*,*, p*t*Thisreqdsrl wi$ be edit#le indocr-rnenEbased m *{s kfldate.
5.
6.
7.
8.
9.
Gambar 2.76 Kotak dialog pembuatan Editable Region
Akan muncul kotak dialog New Editable Region,Name dengan "Nama", kemudian pilih OK.
masukkan
t don Content Teks Web
10. Lakukan langkah. g dan 9 pada setiap sel sehingga akan tampilhasilnya sebagai berikut:
Gambar 2.7T Hasir penambahan Editing Region pada barisRepeating Region tabel
1 1. Simpan kembali dokumen template tersebut.'
It4embuat Dokunren Berfuarkan Template
lietelah Anda membuat temprate tersebut, rangkah seranjutnya adarah,renerapkannya pada dokumen web. Untuk membuat dokumen weblrerdasarkan temprate, Anda dapat metakukan rangkah-rangkah berikut:1. Buat dokumen baru melalui File > New.2. Akan muncur kotak diarog pembuatan dokumen baru.3. Pada kotak paling kiri pilih page from Temptate.
ir*,'n tri.x;e4ti;:, I I i :i rl : :'
"i| e** r"3
'.$ u*t**uo
ff f<9or'*rwrh*^
ffi *n*n*r**
#u*
$;;,ir'j "r+1tx
llsiarF !! iin 1&/rr,
Gambar Z.lg Kotak dialog New Document
Pada kotak kedua dari kiri pirih Asiahsite atau site tempat Ancianrenyirnpan template.
BO Tips & Trik Adobe Dreomweover CSS"5
5. Pada kotak ketiga dari kiri, pilih nama template yang akan diguna-kan" Dalam contoh ini adalah AsiahTemplate. Layout templateakan terlihat pada kotak paling kanan.
6. Pilih tombol Greate.
7. Selanjutnya akan tampil layout template pada dokumen yang baruAnda buat.
....t&,,**-.,:,:ifl'ffi #tf.'+rq+.th!"rfrs+
.rte.ilte yiI*
Gambar 2.79 Pembuatan dokumen web baru berdasarkan template
Pada bagian header, untuk menambahkan banner klik gandapada area yang berwarna biru (lmage Placeholder). Secara oto-matis akan menampilkan kotak dialog pencarian file gambar untukbanner.
8.
t !,r rr ;elOIO LO don Content Teks Web
si_i+nj.#iBii{#,4j'#iri+iti.;i+riir]|+:ri,
Select file m iron: Q.' File system
ii::' Oata sdrcer
L*ti.e,eq,..i
L"* " l i;1.1,-"-'11ii .. ..
ir;,-;;;*-^- -.
jDr, fr;neiilr imege
,i}t; Scriptr
i :.,ir SpD,A;=ts
:i] t6bntj : emplst+
,ffi Se-. ry*tuta."*,.ii}.,Iibaftiut
illm ,t ro m-
lm6ge pteview
:,li:i:i.::: ..1 '!i::ii :i i:r: rr i:
:illiirril1.;.::i.i::r:. . : ji,: ::;, i,ri - : :
illiitit:,ir,,i:"lli:1,',rllii]: r '$,ffi
iiil:lIilii::1ir::riiiii:l:ii"'i:ri . r:' :ri::r::itliijr:l:1::ii::t.:..i.. . .
;:t:i:ii:i:uir;liilii. .rr: ::: :: I.
ii!liii;;lllir,rrli:ii:i:r,',, :rii,..:r ::ii::l:1.,1::: ,1::, , :r:::r.rt:t:: ::1:r.:.,::,ir. :. : . !r
700r117PNG.105K/'15
itt.*;"tl:::1$--'i,.,!ti.Ll,u,,i
r.iJi Preview images
(irtrnbar 2.80 Pemilihan gambar banner dengan double klik lmage Placeholder
l, Pada Repeating Region Tabel terdapat tombol penambahan baris(+), pengurangan baris (-), memilih baris ke atas (A) dan memilihbaris ke bawah (v). Tambahkan baris dan isikan data padasetiap sel.
MefiNuigasi
Mcru I
Mcnu l
Mcm 3
Meru {
Gambar 2.81 Template setelah ditambahkan banner dan data
10.
Tips & Trik Adobe Dreomweover CS5.5
Anda akan melihat kursor berubah menjadi lingkaran dengangaris diagonal saat Anda mengarahkan pointer pada bagian yang
tidak ditambahkan Editing Region.
Gambar 2.82 Kursor diarahkan pada selain Editable Region
Simpan dokumen tersebut dan lihat preview hasilnya pada
browser dengan menekan F12.
, .,,*,, j '.., .".. .,.,,,,.,,,;",,,".. -..,,, ;,;;;;;, :,*\;."
Gambar 2.83 Hasil pembuatan dokumen dengan template pada browser
11.
MTTCrLOLA COr.rrrNT TEKS
Pada sebuah web, komponen yang paling penting adalah content welr
Content adalah isi/informasi yang disampaikan kepada pengunjung web
ContenUisi web kebanyakan berupa teks. Untuk itu, Anda hartts
memperhatikan sisi estetika dan keindahan dalam merancang websittt
Sisi estetika dan keindahan yang dimaksud adalah dari segi kerapiatt,
pemilihan font, ukuran, perpaduan warna, dan lairtnya sehingga ak;tlt
nrenqhasilkan website yang menarik dan nyantittt ttttltrk tlrrktrti.
Atu Asiah Az Zaiua
LImn Asiah A: Jahra
I l,,n(,elolo Loyoui don Content Teks Web
Menlsipkan Teks
thrluk menyisipkan teks pada suatu bagian halaman, Anda dapatrrruLlkukannya dengan beberapa cara, antara lain:
' Menempatkan kursor pada bagian halaman tersebut danmenuliskannya secara langsung
' Menulis teks pada editor teks, kemudian menyalinnya ke dalamhalaman (copy-paste)
,r Mengimpor teks dari halaman lain
lrrrlitril menyisipkan sebuah teks terdapat 2 cara untuk pindah ke barislrrrrrkutn!?, yaitu dengan paragraf dan break.
Itftrnbuat Paragraf dan Baris
lhrlrrk membuat sebuah teks pindah baris dengan paragraf dapat,ltlrrkukan dengan cara menekan tombol Enter pada keyboard ataunr,rruliskan tag <p>...</p> pada kode HTML. Sedangkan untuk gantiI'rurs tanpa membuat paragraf baru adalah dengan tag HTML <br/> atautttttnk /rne. Secara visual dapat ditakukan dengan cara memilih tool B$hlft+Enter.
File Edit View Bookrnork Widgets Tools Heh
L ltewtab ;,
r*+ r' -y +y ha, rp , , httpr#localhct/A5i;h,l
Teks setelah gaati paragrafTeks setelah ganti paragrafTeks setelah gafld bans<br/> Teks setelah gann baris<br/>
Teks trr setelah gaflti paragrafTeks setelah gant paragrafTeks setelah gant baris<br/> Teks setelah ganti baris<br/>
Teks mr setelah ganti paragrafTeks setelah ganti paragrafTeks setelah ganh baris<brl> Teks setelah ganti bafls<br/>Teks setelah ganti bans<br/> Teks setelah ganti baris<br/>
i[-ist'*tmases - #+ lqq/l
B3
Gambar 2.84 Teks ganti paragraf dan baris
84 Tips & Trik Adobe Dreomweover CS5.5
Itbnyisipl€n ]Gnal<hr Klrusus
Karakter khusus adalah karakter selain teks huruf dan angka. Karakterkhusus dapat disisipkan bersama teks. Karakter khusus misalnya "<"dalam HTML adalah <, '3>" (>), dan lainnya. Untuk menyisipkankarakter khusus dapat Anda lakukan dengan cara sebagai berikut:
Gharacter > ....
Gambar 2.85 Menu penambahan karakter khusus
I2. Melalui panel Insert > Text >
lnsert
Mengelolo Loyout don Conient Teks Web 85
3
4.
Gambar 2.86 Penyisipan karakter khusus dengan panel lnsert
Pilih karakter khusus yang akan digunakan.
Jika ingin menyisipkan karakter yang lain, Anda dapat membukaOther Characters yang akan menampilkan kotak dialog berisidaftar karakter khusus yang lebih lengkap.
Ir
Gambar 2.87 Kotak dialog lnsert Other Character
Pilih karakter yang diinginkan sehingga pada teks fieldmenampilkan kode karakter khusus tersebut.
Itrerij :® , :E::If: l,,,iJdJ *l E i' igJiJSJ i i-!""* l'i * l*J-r]:J : . i-:lJ jllfl I---FriiAi.{l Alsl ciEiEltlEl ii:.**: _r ..1 .......1 _ji-**i*.J_*-J l- I
ii ii 11fildl6i6!0iolslui,____i _ I *.] _J -...- -J __i _ i -_J _-J | -_,-li,j oloi IJ ,i 1i i, ,l ll il-i'i lJ ul :l :l :i'i iJ ll.ol ol.: ^1 -\ ..1 i i ,1 ,t ^ I l ..ro i li :,.i " l--*l 3-:*Li*u-i.' ,-'i-l-;
ILo} gl(4!@reomweover CS5.l tr,,nqetolo Loyout don Content Teks Web 87
6. Pilih OK untuk menambahkan karakter ke dalam teks dan me-nutup jendela lnsert Other Gharacter.
MemformatTeks
Memformat teks berarti mengubah ukuran, font, dan warna suatu teks.Hal ini bertujuan untuk menjadikan sebuah teks lebih menarik, pesanyang disampaikan mudah diterima, dan tidak membingungkanpengunjung yang membaca informasi dalam website Anda. Teks yangdisisipkan secara default mempunyai properti seperti yang ditampilkanpada Property lnspector. Property lnspector Text telah dijelaskan padabab sebelumnya pada pembahasan Property lnspector.
Membuat Heading
Heading adalah sebuah teks yang biasanya dijadikan judul pada suatuartikel sebagai bab atau subbab. Biasanya heading mempunyai ukuranyang lebih besar dari teks biasa dan dicetak tebal. Heading mempunyai 6jenis format, yaitu H1, H2, H3, H4, H5, dan H6.
Untuk membuatnya, gunakan langkah-langkah sebagai berikut:
1. Buat teks yang akan dijadikan heading.2. Blok teks tersebut.
Hl Belnj*r Adahs fh'srttttrtcilyel"fls5.5
H2 Belaj :rr Adol-re f)rel mtr{.'eilr'er {-l tlS. 5
H5 Brlajrlr Adobt llr*arnrutav*r" flS5.5
H,l Eelajar Aduhe Ilreqrrurrater (lIi-s"S
II5 Belajar.{.rtohe Druarrnreaver C S55
116 Belaju iilobe Drer"mweser CS5.5
Fre f+ rmated B+1 aj a r Adoh-,* Dre alrlr,rl+arr+ r C*q5 . 5
Gambar 2.89 Hasil pembuatan format teks
Mrmgahrr Perataan Teks
I',r,p[;lsp teks berarti mengatur posisi sebuah teks pada halaman. Ada 4l,nr:, perataan yang umum dipakai, yaitu perataan kiri (Left Align),1r,r,1l;131'1 tengah (Center Align), perataan kanan (Right Align), danI r.1, 1l;1s,-', kiri-kanan (Justify Align).
llrrlrrk memberi perataan teks dapat Anda lakukan dengan langkah-I rrrr11,.:rh sebagai berikut:
I Pilih paragraf yang akan diatur posisinya, bisa diblok atau hanyamenempatkan kursor pada paragraf tersebut.
.' Selanjutnya pilih jenis perataan, misalnya untuk membuat teks
rata kiri maka pada Property lnspector pilih ikon'?*i.I Akan muncul kotak dialog New CSS Rule.
(-) Pada Selector Type pilih lD(applies to only one HTMLelement).
() Pada Selector Name isikan nama ld, misalnya "rataKiri".
Hl Belajar Adohe s,r"s.mft **{r*r,ff, $$L}
Gambar 2.88 Pemilihan teks
3.MisalnyauntukmembuatHeading1makapi|ihFormat>Paragraph Format > Heading 1.
4. Ulangi langkah 1 sampai 3 untuk mencoba semua pilihan Format.
5. Hasil dari pembuatan heading di atas adalah:
88 .Tips & Trik Adobe Dreomweover CS5.5
Gambar 2.90 Kotak dialog New CSS Rule
Hasil perataan teks tersebut terlihat seperti pada gambar dibawah ini.
4.
, This selector name will apply your rule to! all HTML alements with id "rataKiri",:
Rrdr Dcllnltlon:
Chooc! whtrc your rulo nillbe dcfhred'
i(This docrrment only)
f*kr S.x* I{,si Tek R** flrr! T*; R*l s,iri T*s Bxa Srri Ttkr R*r Kri lchr R*r Xia fdi, }-.l*$ J{iri Td$ 8}t* !&i T*,ftcu SiriTr|lr, ftie! Itri ?rkal{td fiic'f,rl$ }ata F.i, tett,; F*r', flir Tt&c kuta {iiTtltg l** E*r Y*l* }$q fir: Teh* *a!"itgrt'*r ltala $in'ft*^l8'*r &!!t{l&
Tr,ktt*aTq'i&ibTth* &iirxT,nqilkT*k* kntiTo* rh?rlc R*L,T6,r"$ Tt&t P;*r.i ?*riliah Tckr},r*r ?*{r{hT4k, Ril{i
?*G*[t ['{.bd &,e"t'r*El*Yd{rltrr$?i!Ep.}'fqtr S.s!1'w@rTck &r!*?trghl'clcs 8:r*'lllqlfrTtt* SArTs*Silt}*R*r lugehltrkr Ilxa Tcngrh ?tk*
'i!k* &*t Itmrn 1l'*r Sar& i{mn{I$<l fuir Ygsrnt "tbk fiair {im*r?ckv Rrr* &tsut ttkr B*a Kanra'.l'ekr t"rt* X.rran
?rkEsrF"mrirr*rrxBnx$arcklBrt.u.*tXHfmT?m$.ffi LYmrmffi **t?.k &rffik*r&hiriT*eR*eTchsfgte&&&rT&tnxrrkxurkiri?*krS*rlcrnrrkiriTtftrflaHT.kr8trkrffnl6iif*lEi.&ErhrllflkidTd($ &rhk$.EkidTctfi Ls*Tflrs.Sdih8tr.ke?$*r Es.krnrrl kll.iT*i &ifi ltrrxikiriT*s SlfrT*h$ Brtd k*tht hii ?ki*t tst* h**r* &iii
Gambar 2.91 Hasil perataan teks
Mengelolo Loyout don Content Teks Web 89
n/lembuat DaftarTels
Daftar digunakan untuk mengurutkan langkah kerja atau menyebutkanpilihan. Dilihat dari bentuknya, ada 2 macam daftar, yaitu Ordered List(OL) dan Unordered List (UL).
Ordered List
Ordered List (OL) adalah daftar yang menampilkan urutan kerja, di manasetiap baris akan diawali dengan penomoran. Untuk membuatnya, ikutilangkah-langkah sebagai berikut:
1. Buat teks yang akan dijadikan daftar, misalnya membuat daftarOrdered List.
2. Pilih teks dengan cara memblok teks tersebut.
Gambar 2.92 Memilih teks yang akan dibuat daftar
ffiT3. Pada Property lnspector pilih HTML ikon I,iF I Ordered List.
4. Hasilnya terlihat seperti pada gambar di bawah ini.
i. Buat teks yarlg akan dijadikan daftar.
2. Bl+k teks tersebut.
3" Filih pada Pr+pem Inspector Ordered List
Gambar 2.93 Hasil pembuatan Ordered List
Unordered List
t lnordered List adalah daftar yang tidak bernomor, di mana awal darirlirftar teks adalah ikon. Untuk membuatnya, lakukan langkah-langkahrurbagai berikut:
1. Buat daftar teks, misalnya daftar bahasa pemrograman.
2. Blok teks tersebut.
90 Tips & Trik Adobe Dreomweover CS5.5
@ffiE@EE
E@
ETEE
Gambar 2.94 Pemilihan teks
3. Pada Property lnspector pilih it<on EI pada tab HTML.
4. Hasilnya terlihat pada gambar di bawah ini:
Gambar 2.95 Hasil pembuatan Unordered List
Mengubah Warna Tel<s
Warna adalah salah satu elemen yang membuat sebuah website tampaklebih menarik. Website akan menarik apabila warna teks serasi denganwarna background, banner, menu, dan elemen lainnya. Untuk member-kan warna pada teks, gunakan langkah-langkah sebagai berikut:
1. Pilih teks yang akan diberi warna.
Blebsite trrdur dari halamarrhaiarnatl yang saltng berhubungan sah.r sama lain
Halamatr-halaman tersebut dtbtrat de
Bahasa-bafiasa tersrbr* chg:.u:akal unhrk- rnendesain halaman rueb 4gar'lebrh rnenarik. 1eL:ih dmamis dan mteraknf
Gambar 2.96 Pemilihan teks
Mengelolo Loyout don Content Teks Web
2. Pilih pada Property lnspector, kemudian ubah properti berikut:
@ Pada Targeted Rule pilih <inline style>.
@ Berikutnya pilih warna yang Anda sukai.
Gambar 2.97 Pemberian warna pada sebagian teks
3. Terlihat teks yang diberi warna pada kode HTML sebagai berikut:
<span style="color: #F00"> HTML (Hypertext Markup Language) <brl>
Yang didukung beberapa bahasa lain sepefti CSS, PHP, JavaScript,dan lain-lain.</span>
4. Berikut adalah hasil pemberian warna pada sebagian tekstersebut:
Website terdiri dari halaman-haiaman yang salmg berhubungafl satu safia lam.
Halaman-halaman tersebut dibuat dengan menegunakafl bahasa lflll,*fI.. dl{vpette:* Mmrk:up .I,;:iru}ragi: )
,r:rqg di,ir:i'-'*ry beberap,;t belara lar-r sepera L.)lJ$, PIl?. Jaunsr.ni:t, dal laur-ilr:i..
Bahasa-bahasa tersebut digunakan untuk mendesarfl halaman web agar lebih menarik, lebth drnanus dan nterakhf
Gambar 2.98 Hasil pemberian warna sebagian teks
fr/[enrbuat lndenhi dan OuHenhi Tel<s
lrrdentasi adalah teks yang menjorok ke dalam. lndentasi biasanya(liqunakan untuk penulisan syair, kutipan, catatan, dan sebagainya.lrrrlentasi dalam kode HTML ditulis dengan <blockqoute> </blockqoute>.liodangkan outdentasi adalah kebalikan dari indentasi, yaitu menghapusrrrrlentasi yang telah dibuat. Untuk membuatnya, gunakan langkah-l; rngkah sebagai berikut:
1. Pilih teks yang akan diberi indentasi.
91
Pra pengercbmg tidak peilu menuliskm buis kode mtuk mendesain halmm web, tetapi dapat dilakukm drag *rod drnp objek yagdibutuhkm ke da.lam halanm weh dengarr cepat dan mudali.
Adobe Dreamweaver CS4 selm mendukung bahasa IITL{L sebaga dasa bahasa pembuatan website, AdobeDremweaver CS4 juga mendukung berbagar bahasa pendukung pemograman web Misalnya CSS yalg dgunalan mhrkmempercantik tmpilan, lOdL dm bahasa pemro BSNnm clien!-side, seperh .Iai,'ascript serta perru-ogrffim reruer-side,sepern PI{!, Active Senrer Page (ASP), ASP.NET, AS! .TavaScnpt, ASP \,GSrript, Coldlusian, dm Java Serer PagelJ -\I',
Tips & Trik Adobe Dreomweover CS5.5
Gambar 2.99 Penyeleksian Teks
2. Pada Property lnspector HTML pilih ikon Text Indent [E].3. Pilih teks yang akan di-outdentasi, misalnya paragraf ketiga"
4. Pada Property lnspector HTML pilih ikon Text Outdent E.5. Berikut adalah hasil dari indentasi dan outdentasi tersebut:
Gambar 2.100 Hasil indentasi dan outdentasi teks
Pra prrqerrbalg trdak pedu menultskm bms kode mtr:k mendesajn halman web, tetap.i dapat ,{il altskm drag and drop ob_iek yarrg I
dibuhrhlian ke dalanr halmm web dengal repat darr mudah. i
i
lIersi terbm dri Aclobe Dremweaver a<Jalah versi Adabe Dreamweaver CS4. Pada Adobe Dreanweaver CS4 menriliki I
Etrr-fihr baru yang lebih ruemarjal:m para pengembang web. Selm mempunyar tmpilan yaag lebrh nrenank, juga I
drtambahkm padaya fasl.litas-ilsilrtas yang memudahka.'r dalm mendesar halatm web. I
I
Adobe Dremweaver CS4 selur mendukung bahasa IIIML sebagar ,Jasar bahasa pernbuatm vrebsite, A,Cobe Dreamweaver CS+ lugu Iueldiikung babagai bahasa pendukung pemograman web. Msalnya CSS yarg drgunakm urrhrh rnempe6mtik tmg,:lm, lilr,f]. dan I
bahasa peruog'm m chenla,le, sepert Javasxipt serta penrogrffim senter-side, sepera !IIP, Active Seruer Page (A5!), AS! NIT, IASP JavaScnpt, ASP \GScnpt, ColdFusron, dan Java Seruer Page (JSP). i
Meltgelela Navigasidan Aset Weh
,,: i: .,..,,,, ",i :..i.,.,,.,,,
iffi id*H##nuffi e$uel,.|iu5rye'
Me.rybp.qf,ftfififfiiil.,, ,, . ,,,i-,,,,,, ,, ,;,1.1.,, , .;ili:,Anehor',fink, ,, ,,;-,, ,,, , l ,, , 1, :",
.', ' i, ,l , ,,.Mengelola A$Of ,",' .-, . ,, ,,.r ,,1,"'r ,', , '
.+r
.ltl.
Tips & Trik Adobe Dreomweover CS5.5
enu navigasi adalah tombol yang digunakan untuk menghu-bungkan satu halaman dengan halaman yang lain. Tombol ini
dapat berupa teks, gambar ataupun animasi dan lainnya. Navi-gasi ini dibuat dengan menambahkan pada tombol tersebut sebuahhyperlink yang menunjuk halaman tertentu pada website.
/ !'nqerl6lo Novigosi don Aset Web
Gambar 3.2 Menyeleksi teks yang akan dijadikan menu navigasi
Gambar 3.3 Menyeleksi teks yang akan dijadikan menu navigasi
Pada panel lnsert pilih tab Common > Hyperlink.
Gambar 3.4 Tool Hyperlink pada panel lnsert
Akan muncul kotak dialog pembuatan hyperlink.Masukkan properti hyperlink sebagai berikut:
G) Text: Teks yang akan dibuat hyperlink. Teks ini otomatistertulis apabila Anda memblok teks.
G) Link: Alamat (URL) halaman yang akan dibuka apabila teksHome diklik. Anda dapat menuliskan secara langsungalamat tersebut, misalnya index.html atau asiahsite.web.id.Selain itu, Anda juga dapat memilih salah satu halaman
pada website dengan memilih ikon folde, ffi.(') Target: Tujuan di mana halaman link akan dibuka pada
browser. Ada 4 tujuan yang dapat digunakan, yaitu: _blankmenampilkan halaman web pada browser yang baru,
_parent menampilkan halaman web pada frameset utamaatau frame yang mengandung link tujuan, _self menam-pilkan halaman web pada frame yang sama, dan _toprrrenarn[)ilkan h;rlaman pada halaman yang sama danrnenqqes()r s()rnuir fratnrr:.
95
:l
Gambar 3.1 Tata letak menu navigasi
Dalam membuat navigasi harus diperhatikan peletakannya agarpengunjung mudah mengakses halaman-halaman web Anda. Padalayout website, menu navigasi biasanya terletak pada 4 bagian, yaitu dibawah header/banner, di bagian kiri, bagian kanan, dan bagian footer.
MEMBUATNAVIGASIUntuk membuat navigasi, Anda dapat menggunakan beberapa objekseperti teks, gambar, dan animasi. Objek tersebut diberikan suatuhyperlink atau yang dikenal dengan link menuju halaman lain. Selain me-nuju halaman lain, link juga dapat menuju ke bagian tertentu padahalaman.
NnvrcnsrTEKS
Menu navigasi yang sering digunakan adalah teks karena mempunyaiukuran file yang kecil. Untuk membuatnya, ikuti langkah-langkah sebagaiberikut:
1. Buatlah deretan teks yang akan dijadikan menu navigasi.
2. Blok teks yang akan dijadikan menu.
frommon -,, -,' ,
, .'.1.{Ff,fillk.,. .. ,.,
,ffi3' .Em*ilLink
& Flemed dnrhur,-.t -::. :
ffi Horilontnlft.ule
96 Tips & Trik Adobe Dreomweover CS5.5
Title: Tip teks yang akan ditampilkan saat kursor menunavigasi berada di atas teks.
Access key: isikan 1 karakter untuk membuka link melaluikeyboard.
Tab lndex: untuk memberikan urutan index, berfungsi untukmemilih menu navigasi melalui tab.
IElt Ho|1r1
tinL: rndex htnrl
Target: , --t0P ,, * i
ritie: r fulenrbuka Halantan Ulanta
Ar'-sr ket; i a
Tabmdex: : I
Garnbar 3.5 Kotak dialog untuk menambahkan hyperlink
Pilih OK untuk menutup dan menyetujui properti yang telahdiisikan"
7. Hasil pembuatan hyperlink teks pada browser ditandai dengangaris bawah dan saat kursor diarahkan pada teks tersebut akankeluar tip teks sebagai berikut:
Gambar 3.6 Hasil pemberian hyperlink teks Home pada browser
8. Untuk memberikan hyperlink pada semua teks, ulangi langkah-langkah di atas.
Nnucnsr IMAGE
Selain dengan teks, navigasi juga dapat dibuat melalui ganrbar. Adabeberapa teknik yang dapat digunakan untuk membuat sebuah gambarmenjadi menu navigasi.
@
@
o
Il6.
Mengelolo Novigosidon Aset Web
Hyperlink Image
Ieknik pertama untuk menjadikan sebuah gambar sebagai navigasiirdalah memberikan sebuah gambar hyperlink. Untuk membuatnya,lirkukan langkah-langkah berikut:
1. Tambahkan sebuah gambar tombol ke dalam halaman web danatur posisinya dengan baik.
2. Pilih gambar yang akan diberikan link.
Ganrbar 3.7 Penyeleksian gambar yang akan diberikan link
Pada Property lnspector dalam text field Link isikan URl/alamatfile atau carilah file yang akan dijadikan link melalui ikon folderr;t[*J.
Gambar 3.8 Memberikan link pada gambar melalui Propefty lnspector
Jalankan pada browser maka ketika kursor diarahkan padatombol akan berubah menjadi gambar tangan yang menunjuk.
Gambar 3.9 Hasil pemberian link tombol pada browser
N;rvrgation Bar
l,l11lsp kedua adalah N:rvigatiorr Birr Untuk membuatnya, ikuti langkah-liu( lk;th scbagai tlerikrrt:
3
,1
98 Tips & Trik Adobe Dreomweover CS5.5
1. Siapkan 2 gambar tombol yang mempunyai warna backgroundberbeda atau warna teks berbeda.
2. Letakkan kursor di area untuk meletakkan menu navigasi.
3. Pada menu bar pilih lnsert > lmage Objects > Navigation Bar.
.y"*$_]i g;:f#ffi#. i** r tx1.Io#' ' *etp
Tug. . iid+Elnra,ge Ctrl*Alt+l' *i-*- -..-.*-.'r -*;i:- .;-:*:,i':::'ilrxage *bjettr I lmage Flareh*lder
I
Medla tj Rellanerlrnage
rsbre irri"*,i-u--i ' I{ariuatien fr6
rahresbiecrc ri,-IY:l!'.{Try! -Gambar 3.10 Menu Navigation Bar
Akan muncul kotak dialog lnsert Navigation Bar.
Ekneni nanre;
Up imagPi
Or/tr imege:
Do?tr r6gei
Oler hrrile dor{n imil?e:
Alierrcte trxi:
UJhs rtdr.ed, 6B to L-q.L:
apnms: !d.: Prelmd jmgtr
i'-i Shr* bo*n lrrage'inltalli.
InHr: :iao,isntally ;i l.f*i UseHes
Gambar 3.11 Kotak dialog lnsert Navigation Bar
Masukkan properti pada kotak dialog sebagai berikut:
o Element name: Memasukkan nama elemen/objek. MisalnyaHome, Profil, Download, dan SiteMap.
Up lmage: Memasukkan gambar yang akan terlihat pertamakali. Pilih gambar melalui tombol Browse.
4.
C)
5.
ll Untuk melihat hasilnya tekan F12 pada keyboard.
_l
Mengelolo Novigosidon Aset Web 99
@
@
@
@
@
@
Over lmage: Memasukkan gambar yang akan terlihat ketikakursor di atas gambar pertama (Up Image).
Down lmage: Memasukkan gambar yang akan terlihatketika gambar telah diklik.
Over while down image: Garnbar yang akan ditampilkansetelah ada gambar diklik.
Alternate Text: Teks yang akan ditampilkan apabila gambartidak ada.
When clicked, Go to URL: Nama halaman (URL) yangakan ditampilkan apabila tombol diklik.-
lnsert: Pilih model Navigation Bar, apakah horizontal atauvertikal.
SelEtt,rnEEe ;i$irft$iiilr*,li,i.ili:ii',;,i'r:
Select file name from: gi* File system
lmage preview
,:ili -,loteg
J&* dcqvnlsa{,,i[,,domrload
i.$iit tiswntoadi,:.d.ran!
t; salen
..;fi lrome
h+mt
r prolrlarr.rrq(ii. I (R lr{anUirc tr.l.lG Fil+ T
r
j r--"--r*;Fires'tt!pe: r!ro.i,rr.;,n,1,;,;tl*g.1il ,H i. -"*
Belative to: lDocument i--.J indexl.html
Lh.rnoe deiault Link Relative To in the site definition. Iit
:lji,.; Preview images , ,.1,,,,,, :|
;6r.. i ..j .8 . Liij-; ':-
File F*ld*r4 KB lrfnn\iieiv Plr]G Fil+
1I l{B lri*nVisrr:F{i iii*.l KE lrfanVrerv FtiC !ii*2l l{3 lriad,/i*r 9irlC iitr
1+ (S trIAnVrfl,t fiYr_! 'tii2 HB ldanllievr.DNE iilr
1f KE lr{rnVie* tPG File
2 X.B lrf.an"rtie-u ftlG File
I KB litrnVierv F'NG Fil*
Lr liB lrfan''tierrr JFG !ile
ffiffi$.ii
171-l s 2ll PllG. 21.. r' 1 sec
File nonE: I hrnu
(i
Gambar 3.12 Pemilihan Gambar Tombol
Untuk menambahkan elemen Navigatio*n Bar, pilih tombol id,i.
Untuk menghapus elemen, pilih tombol j:1.
Pilih OK untuk menyetujui pembuatan Navigation Bar danmenutupnya.
r00 Tips & Trik Adobe Dreomweover CSS.S
Gambar 3.13 Hasil pembuatan Navigation Bar, tombol Home belum dipilih
Gambar 3.14 Hasil ketika tombol Home dipilih
setelah selesai, Anda dapat mengubah, menambahkan, dan menghapuselemen pada Navigation Bar. Untuk melakukannya, pada menu bir pilihModify > Navigation Bar maka akan muncut t<otaX'dialog seperti padaGambar 3.11.
Gambar 3.15 Memodifikasi Naviontion Ffrrr
Mengelolo Novigosidon Aset Web
Rollover lmage
llollover lmage adalah teknik ketiga untuk membuat link pada gambar.l)ada prinsipnya, Rollover lmage hampir sama dengan Navigation Bar,yaitu 2 gambar yang berbeda ditempatkan pada satu tempat dan akanlrertukar ketika ada pointer di atasnya.
tlntuk membuatnya, Anda dapat mengikuti langkah-langkah sebagailrerikut:
1. Siapkan 2 gambar tombol yang akan dijadikan Rollover Image.2. Letakkan kursor pada tempat untuk membuat menu navigation.3. Pilih pada menu bar lnsert > lmage Objects > Rollover lmage.
,. , : ,.,,,ru :.,.,.i rlltf*4ffi9,',,, ,f .141;ds .l{Sl#
T*9, Ctd+E
lmage Ctrl+Alt+l
fmage Olrjectl
Media
Tehle Ctrl+Alt+l?able Objects
lrnage Placeholder
Ro[orer frqqge
Nauigation$ar
Firrqa*rkr FITML
i.ri)i
i
I
I):
Gambar 3.16 Menu pembuatan Rollover lmage
Akan muncul kotak dialog lnsert Rollover lmage.
lnsert Rbllovri lnilihdiliiillll:rliir:iri r.i,l
101
4.
l JsinUs
: ill"sgrlolll,iFs-
r!T19"{9it2ipsl.ifi' Preload ro$over tmage
Alternate text: I Jol1 Us
,uhen rlirked, Go ho URL: : joinus htmll
Gambar 3.17 Kotak dialog lnsert Rollover lmage
lsikan properti pada kotak dialog tersebut. Untuk lebih jelas,berikut adalah keterang;rn untuk masing-masing kolom yanghilrus diisi.
(-) lmage namo M;r:;trkkan n;unir c;;rrnbar, ntisillttya JoinLJs.
IrrogE name:
Orignnal rnage:
Rolover m6qe:
lr
Hobpot
Teknik keempat yang digunakan untuk menambahkan hyperlink padagambar adalah Hotspot. Hotspot adalah suatu bagian pada gambar yangdiberikan link dengan suatu tanda.
Untuk membuatnya, ikuti langkah-langkah sebagai berikut:
1. Pilih gambar yang akan dijadikan navigasi dengan Hotspot.
2. Pada Property lnspector pilih bentuk hotspot yang diinginkan.
Original image: Gambar yang akan tampil pertama kali.
Rollover image: Gambar yang akan ditampilkan ketika
jika gambar
yang akan
pembuatan
102 Tips & Trik Adobe Dreomweover CS5.5
@
@
6.
7.
pointer berada di atas gambar.
@ Alternate Teks: Teks yang akan ditampilkantidak dapat ditampilkan.
@ When clicked, Go to URL: URL halamanditampilkan, jika gambar ditekan/diklik.
Pilih OK untuk menutup kotak dialog dan menyetujuiRollover lmage.Untuk melihat hasilnya tekan F12 pada keyboard.
Gambar 3.18 Potongan gambar hasil Rollover lmage pada browser
Gambar 3.19 Potongan gambar Rollover lmage pada browser saat dipilih
sidon Aset Web
Gambar 3.20 Property lnspector gambar pembuatan hotspot
3. Terdapat 3 tool untuk membuat hotspot, yaitu:r'JTi
o iHj Rectangle Hotspot Tool: Tool ini akan membuat areahotspot berupa kotak.
@ lffi Circle Hotspot Tool: Tool ini akan membuat areahotspot berupa lingkaran.
@ [ffi eo'ygon Hotspot Tool: Tool ini akan membuat areahotspot sesuai keinginan Anda.
4. Gambarkan dengan tool tersebut pada bagian gambar yangdiinginkan.
Gambar 3.21 Menambahkan area hotspot pada gambar dengan 3 tool
{-r. Setelah Anda menggambar akan muncul kotak informasi agarAnda memasukkan parameter-parameter hotspot.
(iarnbar 3.22 Kotak informasi agar Anda memasukkan parameter-parameterhotspot
(; lsikan paramc.tcr Hotspot pada Property lnspector sebagaitrt;rikttl.
Plearc describe the image map in the 'alt' lield on the Praperti* inspertor- This descripiion rvill help visually impair-=d people whc u:e
tooll thdt read reb pdge., ta them.
r04 Tips & Trik Adobe Dreomweover CS5.5
EB&E€B."ISS
ffit',*w
Gambar 3.23 Property lnspector Hotspot
O Link: Masukkan URL yang akan dibuka saat area hotspotdiktik.
@ Target: Cara menampilkan URL pada browser.
O Alt: Teks yang akan ditampilkan jika gambar tidak munculpada browser.
7. Simpan (Save) halaman dan tekan F12 untuk melihat hasilnya.Perhatikan kedua gambar di bawah ini, di mana pointer akanberubah menjadi gambar tangan yang menunjuk pada area yangtelah ditambahkan hotspot.
Gambar 3.24 Tampilan pada browser sebelum ditambahkan hotspot
I
Gambar 3.25 Tampilan pada browser setelah ditambahkan hotspot
r05
SPnyMrruu RRR
Menu bar adalah menu yang berada di atas suatu aplikasi yang tersusundari deretan teks. Anda dapat membuat sebuah menu bar pada halamanweb dengan perintah JavaScript. Dalam hal ini, Anda tidak perlu menulis-kan script JavaScript, cukup dengan library JavaScript yang merupakanfasilitas dari Adobe Dreamweaver CS5.5. Dengan Spry Menu Bar, Andadapat dengan mudah membuat menu bar yang akan menjadikantampilan web Anda lebih menarik.
Terdapat 2 layout spry menu bar, yaitu spry menu bar horizontal dan spryrnenu bar vertikal.
Gambar 3.26 Spry menu bar horizontal
Gambar 3.27 Spry menu bar vertikal
tlntuk mernbuat Spry menu bar, baik secara horizontal maupun vertikal,1, rlrat Anda lakukan dengan langkah-langkah berikut:
Tempatkan kursor pada area wdb di mana menu bar Spry akandibuat.Pada menu bar pilih lnsert > Spry > Spry Menu Bar.
1.
')-
r06 Tips & TrikAdobe Dreomweover CSS.5
:,:'- i:r , : rr :
l.lodify, .Fsrmet Conrnra,nds,..... .. .:.................................................................:. .,
t:.li.tt',llit\l ::t::t:.:a::.,1:.: a lla . i:t il: ti:i., i:;:1 i: I tiSlHi::ii tl$i dpls.il:riffi& rriii
liag.,. {trl* L
h"nage ttrl+Alt'l i
lrnage Dbjecls I i
td*dia )
Table Ctrl+.A|t+T
Ioble *bjects )
f,p3tu[*Sj+c& t',,,.,' , ', ' ',:.:': ' 11
i:::: - 'j- .' ---..--1Hyperlink i
iFma,if Link
i
Named Anrhor Ctrl+Alt+A i
D*te i
S*rver-Si.de lnclude ii S.pr"g C*,llapsible Fanel
CeGr'r€nt
Di'; ?ag
i .,. -. ,- : r. .,_
Spry* fclenu 8ar NSpry Tabbed PanJS
Spry A<tordi*n
Gambar 3.28 Menambahkan Spry menu bar melalui menu bar lnsert
3. Atau melalui panel lnsert tab Layout.
:rc
|:':::':''T"El.: :.h
;:iiii,ri:
gp,ry;i#qq$ql ,,,
wcff Fwt' .,..,r:. ,;, :1;,,1, ;,;,t:,:rit:
Gambar 3.29 Menambahkan Spry menu bar melalui panel lnsert
Akan muncul kotak dialog Spry Menu Bar untuk menentukanlayout. Pilih tombol OK untuk menyetujui pemilihan layout.
ri'$llijffi;*ffiffi
Pleaae sEle* the layeut ysu wsr-dd &e.
ffil' ffi#ino*zonul;wi........_..._.....__....i
t-).r ffi verticalffix#
Mengelolo Novigosidon Asei Web 107
4.
Gambar 3.30 Kotak dialog Spry Menu Bar untuk mgnentukan layout
5. Pada halaman desain akan muncul sebuah menu bar sebagaiawal proses mendesain Spry menu bar.
lt&i -: ntern} I ltw] ?r ltEqe4
Gambar 3.31 Desain Spry menu bar horizontal
6. Pilih pada kotak biru yang menampilkan teks Spry Menu Bar:MenuBarl sehingga Property lnspector menampilkan propertimenu bar spry.
Gambar 3.32 Property !nspector Spry MenuBarl
7. Untuk mengatur Spry menu bar, ubahlah properti-properti berikut:
@ Menu Bar: Menampilkan dan mengubah nama menu barspry. Nama menu akan diubah menjadi "MenuUtama".
@ Turn Styles Off/On: Tombol untuk menentukan apakahmenu bar menggunakan style atau tidak.
@ LisUDaftar: Menampilkan item menu dan item submenupada menu bar.
G) Tombol lS: Untuk menambahkan item menu.
G) Tombol i:-l: Untuk menghapus item menu.
:ll1T,EriB,ii:.nrryrqe.,ffi ..+l i;i ir: i i il
.-j: r,trgETr,J--.. ..........j
r08 Tips & Trik Adobe Dreomweover CS5.5
O Tombol ,.,*i'f,,,; Untuk menyeleksi item menu.
@ Text: Untuk mengubah nama item menu.
O Link: URL halaman yang dituju.
@ Title: Tool tip teks yang ditampilkan, jika pointer diarahkanpada menu.
O Target: Tujuan di mana halaman akan ditampilkan.8. Setelah diubah propertinya, Property lnspector akan tampak
seperti berikut:
Gambar 3.33 Property lnspector Spry MenuUtama
9. Pada desain layout akan tampil sebagai berikut.
fii:rnr Ft,ufil - Dorayrloag w
i""'""""'"'"-"-"-' Frnfl A&nin E-tspak I
A"si&$ite mtrrpakr ProfiI \\rebsit* Frerx're I
A;r*-d*Pilfm-mr*ry-U Axikri jA.&bE Dreann*'esr.er CS4. ard laiml'e-. a*' ,
,dnda juga dapa,r omndourdoad ebook 6Try6ffiffi
Gambar 3.34 Hasil desain menu bar
0. Setelah selesai, simpan dokumen web Anda.1. Selanjutnya akan muncul kotak informasi Copy Dependent Files.
Pilih OK untuk menyimpan files tersebut.
Mengelolo Novigosidon Aset Web
Ihis ptrgELlsPs anibje(tlebehE iritr {hEtre .jiles *.Sportirq #es, The ft{owinq ffes haye beenEoqi€d b tnur locd.$te. Y&.r.lxn sti.uroad Srem to yer* serr.cr in.order fur tn objeet or b€itadi* tofiJrrdm tffiEcdy,
SpfAssetsfipryFlem.Aar. js
SpryAs$ekFpryMdtr.EBronffi .gifSFrtAssts Ef ryqenl.l8nrDoffi*hvs.qiifSFryAssek/SpryMemf arl-lorizdlbl. css
Sgry-AssetsIspryiraBR€trRight,qif
S.gyAsebSff yNenu8arRiqhiihy.er.r*f
Gambar 3.35 Kotak informasi Copy Dependent Files
12. Untuk melihat hasilnya, jalankan pada web browser denganmenekan F12 atau refresh browser Anda.
Gambar 3.36 Hasil Spry menu bar pada browser
r09
,," 116r, ,#h s-E**k, : irl r":il::
Ariahsitcnrcrrr*au#qlAq,*r :,i*g Frtet'iue
Aganra dm Pcucgranaq HmsulaYa
Adobr Dreannre*,rr f 3{, lt:d l*irri'afuida juga dapat nrodorrnkrad rbmkfar*ee dks,gwis' Ferrsogramr:
Gambar 3.37 Memilih item Download pada Spry menu bar dipilih
lr0 Tips & Trik Adobe Dreomweover CS5.5
2.
Gambar 3.38 Pemilihan teks untuk menambahkan Email Link
Untuk membuka kotak dialog Email Link, pilih salah satuberikut:
@ Pada menu bar pilih lnsert > Email Link.
l'iyperlink
1rruitu4 , :: ,::j ,r':,:r, ,
lrxamcd Anihor Ctrl+Alt*A
Gambar 3.39 Pembuatan Email Link melalui menu bar
Pada panel lnsert pilih Common > Email Link.
cara
EMAIL[I'NKSelain link untuk menuju ke halaman lain, Anda juga dapat membuat linkuntuk mengirim email yang sering disebut sebagai Mailto. Untukmembuat Email Link, ikuti langkah-langkah sebagai berikut:
1. Pilih/blok dengan mouse teks yang akan dijadikan Mailto.
'i[['
I
Mengelolo Novigosidon Aset Web
INSEAI
ic .:!E:i
,..,.1*
i,m.*ffl*SClt.i ;,.;;i;* ;r;" aiii-;&. nr"*aaffi , '
,' :'r r.:: ,l : : ,, ' .:. ,f-an*:'l ':.: l: I :' '":
:H# Hofho-fiE$F,l;k,,'t; , r, ;,,,**. .r.. . i.::t . 1 r .1 .. .. ,. : :. .. : :
ffir. ,t**e ' 'f i""-
:,:':': :
t,,l , , .: : '.,:., '.. :'i.. . .
Gambar 3.40 Pembuatan Email Link melalui panel lnsert
3. Akan muncul kotak dialog pembuatan Email Link.4. Masukkan teks yang akan dijadikan Email Link pada kolom Text.5. Masukkan alamat email Anda pada kolom E-Mail, misalnya
"abu.asiah@g mail.com".
r+ailr ja'bu.as,iah@grna,il.coml i
Gambar 3,41 Kotak dialog pembuatan Email Link
6. Pilih OK untuk menyetujui dan menutup kotak dialog.7. Simpan dokumen dan jalankan pada browser dengan menekan
F12.8. Arahkan pointer pada menu Email Link sehingga akan terllhat
pada status bar teks yang menunjuk alamat email yang dituju.
112 Mengeiolo Novigosidon Aset Web
ANCHORLINKAnchor fiangkar) link adalah sebuah link yang digunakan untuk menujubagian tertentu pada halaman yang diberi nama anchor. Anchor linkbiasanya digunakan pada halaman web yang panjang sehinggapengunjung dapat dengan mudah melompat pada bagian tertentu tan[aharus membaca semua artikel.
Ada 2 bagian dalam membuat Anchor Link, yang pertama adalah mem-buat Named Anchor (link tujuan) dan membuat Linked Anchor.
MrnrsuAr NnuroArucHonNamed Anchor adalah nama anchor yang menjadi tujuan link apabilasebuah l-inked Anchor ditekan. Namerl Anchor juga berfungsi untukrnembuat daftar isi, catatan kaki, dan lainnya pada teks yang panjang.tJntuk membuat Named Anchor, ikuti langkah-langkah sebagai-berikut:
-
1. Tulis judul bab/subbab sebuah artikel dan beri penjelasan dibawahnya.
2. Letakkan kursor pada awal teks judur penjelasan yang akanditambahkan Named Anchor.
Garnbar 3.42 Hasil Email Link setelah dijalankan pada browser
Klik menu Email Link maka akan muncul kotak dialog New
Message dari program yang terinstal pada komputer secara
default, yaitu Microsoft Outlook Express.
*!l ; $,lE',t,tlij#d;' j,,l
Fil* Edit Vier#
,ry., "'lt'Spelling
@ rc:
M (c,
suhimt [-
Tips & Trik Adobe Dreclmweover CS5.5 113
File Edit Hslr; B**krxrarkp Wid:qets T+sts Flelp
4$Fi "ir rs.$'
;u**'*s;Aga& des ftwogr '[lh a'I#A&t.re #rcamiseqaer,€$:*;'aidjta{tny$1AX* 3tga dpe *: e*@t-qlqlqd.sqok ftyry*tt *ry. ry* \q,*l'ffi fs,"; -
9.
#ih*rk
lriitSend
:**i r " ;*"trvl i1S iTl__t""i L**-t*",1...
lnsert Fsrmai To*le l*{er*ge t-ielp |,ry
Gambar 3.44 Menyeleksi teks untuk membuat Named Anchor
3. Pilih salah satu cara berikut untuk membuka kotak dialogpembuatan Named Anchor.(") Melalui menu bar pilih lnsert > Named Anchor, atau bisa
juga dengan shortcut pada keyboard CTRL+Alt+A.
rnailt*.obu.esiah@grneil. ccm
Gambar 3.43 Kotak dialog New Message dari Microsoft Outlook
Tips & Trik Adobe Dreomweover CS5.5
Tag, ',Image
Image Obiects
Media
I*ledia Queries,, '
Table
Table Objects
Layout Objects
chl+Alt+T
Hyperlink
Em€il Link
Date
5erver-5ide Include
Comment
Gambar 3.45 Pembuatan Named Anchor melalui menu bar lnsert
Gambar 3.46 Pembuatan Named Anchor melalui panel lnsert
Akan muncul kotak dialog Named Anchor, masukkan namaanchor pada Anchor Name misalnya "bab1", kemudian klik OK.
@
4.
Mengelolo Novigosidon Aset Web I l5
Gambar 3.47 Kotak dialog Named Anchor
5. Hasilnya, terlihat sebuah simbol anchor ffi paOa awa! teks.6. Pada Property lnspector terlihat properti dari Named Anchor.
Gambar 3.48 Teks setelah ditambahkan Named Anchor
Gambar 3.49 Property lnspector Named Anchor
7. Ulangi langkah di atas sehingga semua judul penjelasanmempunyai Named Anchor.
MrnanunrUNKrc EDffscpsSetelah membuat Named Anchor, Iangkah selanjutnya adalah membuatLinked Anchor. Linked Anchor adalah sebuah teks yang mengandunglink menuju ke Named Anchor.
116 Tips & Trik Adobe Dreomweover CS5.5
Terdapat 2 teknik dalamkotak dialog HyperlinkProperty lnspector.
membuat Linked Anchor, yang pertama dengandan yang kedua dengan Point to File pada
2.
3.
4.
Linked Ancfrordengan Kotak Dialog
Untuk membuat Linked Anchor dengan kotak dialog, Anda dapat meng-
ikuti langkah-langkah berikut:
1. Blok teks yang akan dibuat Linked Anchor.
Gambar 3.50 Pemilihan teks yang dibuat Linked Anchor
lkuti salah satu cara berikut untuk membuka kotak dialog:
O Melalui menu bar pilih menu lnsert > Hyperlink.
@ Melalui panel lnsert > Common ) Hyperlink.Akan muncul kotak dialog Hyperlink.
Masukkan Link dengan nama "#bab1".*Sesuai nama anchor,
caranya pilih list dengan menekan tombol i*J pada objek List.
rext i Stru'Kur Dasar HTML
Llr*r
TarEet:
Tide:
&rress.key:
Tab index:
Gambar 3.51 Kotak dialog Hyperlink menentukart link target
5. Hasilnya, pada teks yang dipilih tampak ditambahkan sebuah linkdengan tanda garis bawah.
Gambar 3.52 Hasil pemberian link pada teks
idon Aset Web
Linked Andrordengan Pointto File
Teknik kedua untuk membuat Linked Anchor adalah melalui Propertylnspector dengan tool Point to File. Untuk membuatnya, ikuti langkah-langkah sebagai berikut:
1. Pilih/blok dengan mouse teks yang akan ditambahkan link.
Gambar 3.53 Memilih teks yang akan ditambahkan link
Pada Property lnspector HTML pilih tool point to File #.Tekan dan tahan tool tersebut, arahkan pada Named Anchoryang diinginkan maka akan terlihat sebuah Earis yangmenghubungkan tool dengan Named Anchor.
2.
3.
Tips & Trik Adobe Dreomweover CS5.5
StiS*s. if##,ffi;-ryTw:ffi+,
f:ffi.. iffirii;itffi. iff#Iryry
<s?
egpPFsrr€3
{1,9...'.,ffi qg$,, :;,
Gambar 3.54 Membuat Linked Anchor dengan tool Point to File
Terlihat pada properti Link, sebuah Named Anchor yang ditunjukoleh Point to File.
4.
5. Pada teks yang diberikan link terlihat tanda adanya sebuah !ink.
Gambar 3.55 Hasil pemberian Link dengan Point to File
Simpan dokumen dan lihat hasilnya pada browser denganmenekan F12 atau me-refresh browser Anda.Anda dapat melihat hasilnya seperti di bawah ini. Apabila sebuahLinked Anchor diklik maka akan menuju Named Anchor yangsesuai. Sebagai contoh, pada Linked Anchor "Bagian Body" diklikmaka browser akan menampilkan penjelasan Bagian Body sepertiterlihat pada gambar.
6.
7.
Mengelolo Novigosi don Aset Web il9
'diiffiToc.lr Help
il ltro" taU i ,.; l,lama.d Anch.or
'i'i s *'t{ ff +f." * .,=
$P@#ryry.SffiB*siiiii:lltsad : r',iiri':
EasiaEodr*
&{ei$*rilildf&a* , ',
&,!+r$.' . &W,@gal*!ffig mtd$cdiru-ranEse.der-t-Lao*-{dsqfu r'fhttp:rillo<*lhr:1/&si*hlite#rarn*lanrh*r.htr:rl*habi ;F iSt"*, t,r*g* ' .q .fii'"n i-j
Gambar 3.56 Preview pemberian Named Anchor pada browser
dt i!,lrlr'e;d.iAillj*ii:fi FSi;I r. ;.,,x'a riil!=I i.:*... ffi,
File Edit !'iry Eorkmark Widge.* Teel: Help
i'','*,lmtab | ;". I,l*medAnrhor o ,
tf.' 'f ,r' ;'i ;, ,c . . htp:,,7'lm;thcstrAsr ,-l,,, -,,,,,,,,: :,:,, ,,, ',',, , ,,,,.,;:
i"-s;,;8;at 6 : --r- -
Sotx A.,t *ur-S",te{<*biasa:..atg**g, <*g.Sg
';fi6.e,aamqnry'#m':i':::' | : '::': : :':l
I $1gqAC$Aqerrr*aisidsl*"lns-q,,l1o*niqm**It *,4 . '.'r,,,,,;;.r,.:.,:...":i. ..
i dritdrr tde. sorad, der his-t&, a*e &ery{&ss d baEie U,; Sepertitelab-
Csef.*as * arar, bETIB BODY diawali okb tsg <8ODY> de dkrfirp
[d -
&tenltie.ri Knrylrrtni
Uru* rycrulrdah 1xqftacary kerrbaii kode-kode riI$fi", kadarg-kad*gffia&kaahs etsh8i*tre-&lge&:4sal&srus,C@drye,4b,sa,
.F,, Shw tmager - 'a 10ir,; , *
Gambar 3.57 Hasil setelah teks Bagian Body diklik
MENGELOLAASETAset merupakan elemen yang digunakan dalam pembuatan website"/\set dapat berupa file gambar, warna, URL, flash, video, script, dan lain-l,rrn yang mendukung dalam desain website. Dengan mengelola aset,/\ntla akan denqan ttturl;tlt lttcnyisilrkan aset tersebut ke dalam halaman
t20 Iips & Trik Adobe Dreomweover CSS.S
web sehingga Anda tidak perlu repot-repot membuka kotak dialogpencarian pada file system.
MErrloGuNffiNt Pmrt AssrrsUntuk mengelola aset, Adobe Dreamweaver CS5.5 menyediakan fasilitaskhusus, yaitu panel Assets. Panel Assets terletak pada panel Groups,yaitu di sebelah kanan area kerja Adobe Dreamweaver CSS.S. Apabilapanel tersebut tidak ada, Anda dapat mengaktifkannya melalui menu barWindow > Assets.
ffi Hsp- i ffi', s.'-" S+g v Insert Ctrl+Fa
{ v Praperties ,:trl+FiffiffiffiES
tbril;C55 Styles shitt+Ft lAF Elenrenl:s FZ
t"lultiscllen Freu.:u*-
?:s:n::statalysl cl|+sHft+B
Dalahases Ctrl+shift+Ft0Bindings Ctrl"+Fl0
SerterBehaviorE Ctrl+Fg(omponents Ctrl+F7
Shift+F9
Gambar 3.58 Mengaktifkan panel Assets
.&liirffi..&fi:lltlll,mr..&,EJ
,, .,,1:".ETJ
&&&&ffi&n
- ,iFH:.,:,:.
banner.,prtg
d,pns
downlead.jpg
dov,nlaad,png
dor+nlaad3,png
dfrans.png
sttltrxtss$ ?3gG lrfan,',
7[r]x117 tr0${B irfan,,,
8*xZZE 4{E !rfan,..
1Pix2fi 1IG lrfan,,,
171x28 It{E lrfan,.,
170xZtl 2t1..8 lrfan,.,
86x339 1'{i{8lrfan..,
l*trnte&a@ar&gnner.rpg$anner,png
$mage,,rd,png
fr mage.gdo,'-tnloa d, jpg
3image,,ido,n'*nlaa d. png
limage/dar'* nharJS, pn g
/irnaqeieTrans,prit
,1 ,.:{$}xb,,,,i:i.Fa;t{tritEs,H
Gambar 3.59 Panel Assets
Panel Assets akan menampilkan semua aset yang dimiliki oleh sebuah
Site, contoh datam buku ini adalah AsiahSite. Pada panel Assets di atas
terlihat tampilan file gambar, baik ..jpg maupun *.png dengan informasiyang lengkap meliputi ukuran, kapasitas, type, dan alamat file tersebut.
Selain itu juga terdapat tampilan gambar tersebut pada kotak preview.
Panel Assets juga mempunyai beberapa tombol dengan penjelasan
sebagai berikut:
$ Radio Button Site dan Favorites: Menentukan ruang lingkupaset yang akan ditampilkan pada daftar aset, apakah menam-pilkan seluruh aset yang terdapat pada situs atau hanyamenampilkan aset yang berada dalam favorites"
O lmages ,@l: Menampilkan daftar file gambar yang tersimpanpada situs seperti *.jpg, *.png, *.gif, dan lain-lain.
e) Color ffi: Menampilkan daftar warna yang digunakan olehdokumen dan CSS pada situs seperti warna background, warnateks, warna border, dan sebagainya.
t:l) URLs &: Menampilkan daftar alamat URLs atau link yang adapada situs.
lolo Novigosi don Aset Web
ir SWF t: M,rnrtrnpilkan cJaftar file *.swf atau flash.
122 Tips & Trik Adobe Dreomweover CS5.5
Shockwar" lil$$$: Menampilkan daftar file movie yang mempunyaiformat Shockwave.Movies ffi: Menampilkan daftar file movie yang mempunyaiformat FLV (Flash Video).
Scripts ffi: Menampilkan daftar script yang digunakan situs, baikJavaScript maupun VB Script.
Templates 'ffi: Menampilkan template yang terdapat pada situs.Dengan ini, Anda dengan mudah menerapkan template padadokumen Anda.Library ffi$: Menampilkan daftar library dari situs.
lnsert Liff*i"i' Menyisipkan aset yang terpilih ke dalamdokumen, terletak pada kiri bawah panel Assets.
Refresh #: Memperbaharui daftar aset yang telah diubah.Tombol ini digunakan apabila telah terjadi perubahan tentangsuatu aset, di mana panel Assets tidak akan secara otomatismenampilkan perubahan itu. Untuk menampilkan perubahantersebut dibutuhkan refresh untuk memperbaharui pembacaanterhadap aset pada situs.Edit iW: Membuka editor untuk mengedit aset yang dipilih.
Add to Favorites *ffi: Menambahkan aset ke dalam favorites.Tiga tool terakhir ini terletak pada sebelah kanan bawah panelAssets.
c
c
o
o
fi)
e
o(il
Menambahkan Aset ke dalam Dokumen
Panel Assets memudahkan Anda dalam menyisipkandalam dokumen web. Untuk menyisipkan aset ke dalamdapat mengikuti langkah-langkah sebagai berikut:
1. Aktifkan panel Assets dan pilih aset yang akandalam dokumen pada panel Assets.
sebuah aset kedokumen, Anda
ditambahkan ke
2. Klik aset tersebut dan drag ke dalam lokasi dokumen.
Mengelolo Novigosidon Aset Web
Gambar 3.60 Menambahkan aset dari panel Assets ke dalam dokumen
Gambar 3.61 Hasil penambahan gambar melalui panel Assets
Menambahkan Aset ke dalam Favorites
Favorites berguna untuk menampilkan aset yang sering Anda gunakan,berbeda dengan Site List yang menampilkan seluruh aset yang dimilikisitus. Secara default, Favorites pada Adobe Dreamweaver CS5.5 tidakmempunyai sebuah aset satupun. Untuk itu, Anda perlu menambahkanaset ke dalamnya. Untuk menambahkan aset ke dalamnya, Anda dapatmengikuti langkah-langkah sebagai berikut:
1. Pilihlah aset-aset yang berada pada Site List.2. Pada kanan bawah panel Assets, pilih menu Add to Favorites
+f.
123
124 Tips & Trik Adobe Dreomweover CSS.5
Gambar 3.62 Menambahkan aset ke dalam Favorites List melalui tool
3. Bisa juga dengan cara klik kanan pada aset-aset yang terseleksi.
Befresh, 5it€ l-ist
Recrea'te *ite ligt
& drrEdir
Idil r];rili*u]
lnsert
l-ti-,rJJl* I'itliri
&sE
Mengelolo Novigosidon Aset Web t25
+frffiffiiffi*iirr;llirxriiiiili ii'ffirffiiiffiiiF,m fi itri
ii:ila:r,ii:li,ll:;:l:.!l llllli:ii
ffi:,,S#i.ffi.:tffi
Gambar 3.64 Hasil penambahan aset ke dalam Favorites
&m& Frnme
Bekerja dengan Folder Favorites
Untuk lebih memudahkan pengelolaan aset, Favorites List menyediakanfasilitas pembuatan folder baru. Dengan folder baru ini, Anda dapatmengkategorikan setiap aset, misalnya tombol menu disimpan padafolder menu, galeri disimpan dalam folder galeri dan seterusnya.
Untuk membuatnya, Anda dapat melakukan langkah-langkah berikut:
1. Pastikan Anda memilih Favorites List pada panel Assets.2. Pilih kategori tempat membuat folder favorites, misalnya kategori
lmages ,ffiI.Tekan tool New Favorites Folder yang terletak pada kananbawah panel Assets Favorites List.Akan ditambahkan folder baru pada list favorites dengan namaUntitled.
C*py ttr Site
L*cate in Site
Gambar 3.63 Menambahkan aset ke dalam Favorites melalui klik kanan
4. Hasilnya pada Favorites List ditampilkan aset yang telahditambahkan.
3.
4.
126 Tips & Trik Adobe Dreomweover CSS.5
ffiffiffittr*llx.
ffi:rtu
ffiffi
170xZfr
17flx3tl
tSCIxZtl
lHxl0lTSxttllffixZfi
ffir*:l: i".$P:'r+F!
,,#.gb',ffi ra*ur*&r+ ffi
Gambar 3.65 Membuat folder pada Favorites List
Ganti nama tersebut dengan "Gambar Tombol" karena akandigunakan untuk menyimpan gambar-gambar tombol.Langkah selanjutnya, pilih gambar-gambar tombol pada FavoritesList, kemudian drag menuju folder tersebut.
tffil
,ffiqfr'Iflil
B@ffifi*
Irrryqqi {".i sate ratrortte H
T
66_r
akm
alarn
- i"_ ll-- irl :l
IUUXbUU SiKIJ IT - i
1"fl34x158 tSn<A lri*,i1834x758 125K8 Ir1 lt
dor,$riuad2 l7DxeB, ' Affi
Gambar 3.66 Memindahkan gambar tombol ke dalam folder Gambar Tombol
7. Hasil dari penambahan aset ke dalam folder Favorites List terlihatpada gambar berikut:
Mengelolo Novigosidon Aset Web
Gambar 3.67 Hasil penambahan aset pada folder Favorites
METcTLOLAGnNlgAR
Gambar merupakan bagian dari web yang sangat penting karena akanmembuat tampilan sebuah web menjadi menarik dan lebih hidup. Sebuahhalaman yang hanya terdiri dari teks tanpa gambar akan terlihat kaku.Gambar banyak digunakan sebagai banner/header, tombol navigasi,logo, background, dan sebagainya. Ada banyak tipe file gambar yangdapat disisipkan ke dalam halaman web, di antaranya:
JPG/JPEG (Joint Photographic Expert Group) adalah salahsatu format gambar yang terkompresi secara /ossy sehinggamempunyai ukuran yang lebih kecil dari gambar asli (BMP).
GIF (Graphic lnterchange Format) adalah format gambar deng-an penyimpanan maksimal 256 warna. Format ini dapat menam-pung beberapa file gambar sehingga dapat dibuat sebagaianimasi yang tentunya lebih menarik pengunjung website.Format GIF juga tersimpan secara terkompresi untuk mendapat-kan ukuran yang kecil.
PNG (Portable Network Group) adalah format gambar yangmempunyai ukuran kecil sebagaimana JPEG dan dapat mene-rima lebih dari satu file gambar. Format ini mengambil metodekompresi JPEG yang menghasilkan ukuran kecil, namun kualitasgambar tetap bagus dan mengambil kemampuan GIF yang dapatmenyimpan lebih dari file gambar.
127
5.
6.
/f\
D
m&&
t28
Menyisipkan Gambar
Untuk menyisipkan gambar pada halaman web Anda dapat melakukan-nya dengan cara sebagai berikut:
1. Langkah pertama adalah menyiapkan gamba,: yang akan disisip-kan. Anda dapat mengedit gambar dengan aplikasi pengeditgambar, misalnya Photoshop.
2. Ada beberapa cara memasukkan gambar ke dalam hataman,antara lain:
@ Melalui menu bar, pilih lnsert > lmage atau melalui shorcutkeyboard CTRL+ALT+|.
@ Melalui panel lnsert > Common > lmages.@ Melalui panel Assets.@ Melalui panel Files.
3. Pada langkah kedua, cara 3 dan 4 untuk memasukkan gambardapat Anda lakukan dengan men-drag file gambar ke datamhalaman Anda.
4. sedangkan pada langkah kedua, cara 1 dan 2, Anda akan dimintamenelusuri file gambar melalui kotak dialog yang akan disisipkan.
$']Preview images
Gambar 3.68 Penelusuran file gambar
Akan muncul kotak dialog lmage Tag Accessibility Attributes.
Tips & Trik Adobe Dreomweover CSS.S
5.
Mengelolo Novigosidon Aset Web
Pada kolom isian Alternate text isikan nama "Banner". lniberguna apabila gambar tidak tampil maka yang ditampilkanadalah teks tersebut.
Alternate t.x' te31y1-: ..-"-ffiLorlgdesriptionr jhltflli --. -_ jffi
t:::ff::Ji,C*d- I
L.r*{:iIf tau don"t rryant to enM SriB iBfurflxaiien +vhen insertingabjecfs
Gambar 3.69 lmage Tag Accessibility Attributes
Apabila lokasi gambar di luar Site yang Anda buat maka akanmuncul kotak dialog yang menyatakan file di luar Site dan Andadiminta untuk menyimpan file tersebut pada Site Anda.
This fite is ouiside of the r$ot fclder Bf sit€ ',&Eitshsite',
and ma! Bot be accessible when You publish the sile.
Ysur roEt tolder is:e1'qppsene!$n/6CiCsi ah Site\
lryould yau like to Espy the flle ulere n0$d?
- Y*"-l T
*fir. -" i i ;;r*r !*J..:.JSJ t;.ll-* *.-l-:-..-.-.*,
t2?
6.
7.
Gambar 3.70 Kotak dialog Dreamweaver
8. Akan muncul kotak dialog penyimpanan file. Berikandan pilih Save.
L Hasil penyisipan gambar terlihat seperti pada gambarini:
nama file
di bawah
Gambar 3.71 Hasil penyisipan gambar
r30 Tips & Trik Adobe Dreomweover CS5.5
Menggunakan lmage Plaeholder
lmage Piaceholder merupakan fasilitas yang digunakan untuk membuatrancangan gambar yang akan ditambahkan ke dalam dokumen. lmagePlaceholder berupa kotak yang menampilkan teks dan dapat diaturwarna serta ukurannya. Untuk menambahkan lmage Placeholder, Andadapat mengikuti langkah-langkah sebagai berikut:
1. Letakkan kursor pada area yang akan ditambahkan lmagePlaceholder.
Placeholder, atau bisa juga melalui panel lnsert > lrnages >lmage Placeholder.
,**o*rE#dilffiffi
fommon vr: 'l Tshle
l$j Insert Div Tag
E. Irnages'.T_-]: .....
EJ Iruq"rfi
l-il noilou*."
Qi1 Firrworts HTt'l1
fl trr.:,r+ Rett,:n,gle Hotsp,:l:
f3 Dr,.u., O,ial Hotspot
{,-7 Dra+r Polirgon Holspot
Gambar 3.72 Menambahkan lmage Placeholder melalui panel lnsert
3. Akan muncul kotak dialog pembuatan lmage Placeholder.
4. Masukkan properti berikut pada kotak dialog lmage Placeholder.
@ Name: Menentukan nama lmage Placeholder, misalnya"TombolJoinUs". lni dikarenakan pada contoh ini akandisisipkan sebuah tombol Join Us.
O Width: Menentukan lebar lmage Placeholder, misalnya 170.
@ Height: Menentukan tinggi lmage Placeholder, misalnya 20.Satuan dari Width dan Height adalah pixel.
Color: Menentukan warna latar lmage Placeholder.
Alternate text: Menentukan teks pengganti apabila objeklmage Placeholder tidak dapat ditampilkan.
@
o
lnri,sgfF$etr#d.Ex
Mengelolo Novigosi don Aset Web 131
5.
6.
Gambar 3.73 Kotak dialog lmage Placeholder
Pilih OK untuk menyetujui pengisian properti dan menutupdialog.Lihat pada desain dokumen, hasilnya sebagai berikut:
Gambar 3.74 Hasil penambahan lmage Placeholder
iri 5.i{f {r:lm!oE::.aJadr
kotak
Select file name lrom: I$ File system
.'t: Data sorrrcer
!i!F,Fg$,, I
..'.,,,,-.'.'-,',,'',,,','-!=i'1.I t::te-:t *
iS#s,1€FIBF
tW riaefnp2
Lsck&: :l ffilE
:jr: iiash
&djt'i icr';nicad::.i,:{1 ds,vnt cnc
,it*id?'!niscl
,qE: n?me
#1",*-i$* h3r:.er
tt!:t!_ t\:.:!HJci.b6l$i rnnu
f# p.ciil
liftp,eliliii,iprcti,Z
ir.,r$ Pil:r,lilj lrErip
170r20JPEG.17KJ3sec
;cailj-i;*,--:t;.*)
:
lcs#l:i.,-,'.,.,.,,,,,,.,.,,., i
l
li Preview images
,,URL] mags/ionl pg
Bolahve lo Lrocumenl - i rndex.html
lhjrsstlsl4Jllltu-elnu!,Lq h the sil6 dolmrton.
Gambar 3.75 Kotak dialog penelusuran gambar muncul saat objek lmagePl;rt;oltoklt:r diklik ganda
132 Tips & Trik Adobe Dreomweover CS5.5
7.
8.
Untuk menggunakan lmagelmage Placeholder sehinggasuran file gambar.
Akan tampak pada desainberikut:
Placeholder, klik ganda pada objekakan muncul kotak dialog penelu-
gambar tombol Join Us sebagai
Gambar 3.76 Hasil penyisipan gambar dengan lmage Placeholder
Memformat Gambar
setelah menyisipkan gambar, terkadang ukuran, letak, atau warnagambar gambar tidak sesuai dengan tempat yang ada. Untuk itu Andaharus menyesuaikannya agar terlihat serasi. Anda dapat memformatgambar tersebut melalui Property Inspector gambar.
Gambar 3.77 Property lnspector gambar
MengatrrUkuran Gambar
Untuk mengatur ukuran gambar dapat Anda lakukan dengan berbagaicara. cara yang paling sering digunakan adalah dengan drag-dropgambar tersebut dan melalui Property lnspector.
Untuk mengubah ukuran gambar, Anda dapat melakukannya denganlangkah-langkah sebagai berikut:
1. Seleksi gambar yang akan diubah ukurannya. Akan tampak padasisi-sisi gambar border dengan kotak kecil.
o Novigosidon Aset Web
2.
3.
Gambar 3.78 Penyeleksian gambar
Arahkan kursor pada kotak kecil, kemudian drag gambar tersebutsesuai ukuran yang diinginkan.Apabila menggunakan Property lnspector, ubah W (Width) untuklebar gambar dan H (Height) untuk tinggi gambar sesuaikeinginan Anda.
Gambar 3.79 Perubahan properti Width dan Height
4. Sebagai contoh, ukuran gambar tersebut disesuaikan dengantabel maka hasilnya adalah sebagai berikut:
Gambar 3.80 Hasil pengubahan gambar
CropGambar
Crop adalah mengambil potongan gambar. Anda dapatmotong gambar menjadi beberapa bagian dengan fasilitasrnelakukannya lakukan langkah-langkah sebagai berikut:
1" Pilih gambar yilnly ukan di-crop.
memotong-Crop. Untuk
Iips & Trik Adobe Dreomweover CS5.5
Gambar 3.81 Penyeleksian gambar
2. Pada Property tnspector, palih ikon Grop ffi$.
Gambar 3.82 Tool Crop pada Property lnspector
3. Tentukan area gambar yang akan di-crop dengan mouse.
Gambar 3.83 Penyeleksian area crop
4. Tekan Enter pada keyboard atau klik dua kali mouse Anda.5. Hasilnya seperti berikut:
Gambar 3.84 Hasil crop gambar
ffirnalismiGambarSebuah web yang mempunyai banyak gambar akan menyebabkan waktuloading lebih lama daripada yang berbasis teks atau mempunyai sedikitgambar. Hal ini disebabkan gambar mempunyai ukuran yang relatif besarsehingga memperlambat waktu loading halaman.
Mengelolo Novigosi don Aset Web r35
Untuk itu, Adobe Dreamweaver menyediakan fasilitas untuk optimalisasiatau memperkecil ukuran gambar tanpa mengurangi kualitas gambarsecara signifikan. Berikut adalah cara melakukan optimalisasi gambar:
1. Pilih gambar yang akan dioptimalisasi.
Gambar 3.85 Menyeleksi gambar yang akan dioptimalisasi
2. Pada menu bar Modify > lmage > Optimize. Menu ini tidak akanaktif apabila belum ada gambar yang terseleksi.
Gambar 3.86 Membuka fasilitas optimalisasi gambar melalui menu bar
3. Akan muncul kotak dialog Image Preview.
& Trik Adobe Dreomweover CS5.5
si
4.
t*,, ffi::il;l#'m
Gambar 3.87 Kotak dialog lmage preview
Dari kotak tersebut terdapat informasi tentang ukuran dan waktuyang dibutuhkan untuk loading gambar tersebut. Dalam contohtampak bahwa tipe file adalah PNG dengan ukuran file 137.91 kbdimuat pada browser selama 22 detik pada bandwidth internet 56kbps (kilo bit per second).
5.
Gambar 3.88 lnformasi tentang gambar yang akan dioptimatisasi
Untuk mengubah ukuran file, pada tab Display ubahgambar dengan yang diinginkan. Sebagai contoh, ubahgambar menjadi JPEG.
Formatformat
Gambar 3.89 Mengubah format clengan JPEG
Gambar 3.91 Kotak dialog Save Web lmage
137
6. Selanjutnya pada kotak informasi preview, ubah Saved settingsmenjadi JPEG-Smaller File.
Gambar 3.90 Memilih format gambar pada Saved settings
Pada gambar di atas juga terlihat informasi perubahan type men-jadi JPEG, ukuran 10.33K, dan waktu loading 1 detik padabandwidth 56kbps.setelah dilakukan pengaturan optimalisasi gambar, pilih oK untukmenutup dan menyimpan gambar yang telah diatur.setelah memilih tombol oK akan muncul kotak dialog save weblmage.
7.
8.
9.
SJeh ?16'rEEEbntsP J:36Webkrap 1I8,4daptirre ?58
FE6 -SmdmF,ile I\------r1[
sa{E as type: i r*g* riu.* i, t$.;G;t"
Flelativeto:.0""r**t *,;;-;;,;,' -
Charrae delault Lirrk Felatrygr_To in the site deliniti:n.
r38 Tips & Trik Adobe Dreomweover CS5.5
10. Pilih tempat untuk menyimpan gambar dan beri nama gambartersebut. Berikutnya pilih Save untuk menyimpan gambar danmenutup kotak dialog.
Mengafu r Pencahayaan Cram bar
Ada kalanya gambar yang Anda sisipkan ke dalam halaman terlihatbegitu gelap atau justru terlalu terang dari warna latar halaman. Hal ini
membuat Anda harus melakukan perubahan terhadap warna gambaratau warna latar halaman sehingga terlihat serasi. Adobe DreamweaverCS5.5 menyediakan sebuah tool yang digunakan untuk mengatur pen-cahayaan gambar. Anda dapat memanfaatkan tool ini untuk mengaturbrightness (gelap-terang) dan contrast (kontras) gambar.
Untuk melakukannya, Anda dapat mengikuti langkah-langkah sebagaiberikut:
1. Pilih gambar yang akan diatur pencahayaannya.
Gambar 3.92 Pemilihan gambar
Pada Property lnspector pilih tool Brightness/Contrast dengan
ikon fl atau bisa juga melalui menu bar dengan memilih Modify> lmage > Brightness/Gontrast.
Akan muncul kotak dialog Brightness/Contrast untuk mengaturtingkat kecerahan dan ketajaman warna gambar.
Gambar 3.93 Kotak dialog Brightness\Contrast untuk mengaturpencahayaan gamhar
Mengelolo Novigosi don Aset Web
@ Untuk mengubah gelap-terang gambar, geser sliderBrightness atau isikan nilai secara langsung pada fieldyang tersedia.
@ Untuk mengubah kontras/ketajaman warna gambar, geserslider Contrast atau isikan nilai secara langsung pada fieldyang tersedia.
4. Setelah pengaturan cahaya sesuai dengan yang Anda inginkan,pilih OK untuk menerapkannya pada gambar.
5. Hasilnya dapat Anda bandingkan antara Gambar 3.91 dengangambar di bawah ini.
Gambar 3.94 Hasil pengaturan pencahayaan gambar
139
2.
3.
144 Tips & Trik Adobe Dreomweover CS5.5
MempercantikHtlfrmm*r Weh
142 Tips & Trik Adobe Dreomweover CS5.5
alaman web merupakan bagian yang penting, seperti halnyawajah bagi manusia. Wajah merupakan pusat kecantikan sese-
I I orang, begitu pula halaman web merupakan pusat kecantikansebuah website. Untuk mempercantik halaman web, Anda dapat meng-gunakan beberapa bahasa script, antara lain CSS, JavaScript, Flash, dan
lainnya.
Cascading Style Sheet (CSS) merupakan salah satu bahasa style(tampilan) yang dapat diterapkan pada halaman web. CSS berfungsimemisahkan antara desain dengan content halaman web. CSS bekerjadengan cara mengontrol tag-tag HTML, bisa berupa mendefinisikanulang tag atau membuat aturan tersendiri, kemudian menerapkan aturantersebut berupa ID atau kelas.
P:ENULISAN CSSPenulisan CSS dapat diterapkan pada 3 tempat, yaitu pada dokumentersendiri yang mempunyai ekslensi *.CSS, dituliskan satu halamanbersama dokumen web dan dituliskan langsung pada tag yang
bersangkutan.
Penulisan ini tergantung pada ruang lingkup CSS di mana akan Andaterapkan. CSS yang ditulis pada dokumen independen dapat digunakanpada semua halaman dokumen web. Apabila CSS ditulis satu halamandengan dokumen web maka CSS hanya akan berlaku untuk halaman itusaja, sedangkan CSS yang ditulis bersama tag html hanya akan berlakuuntuk tag html itu saja.
MEMBUAr CSS PADA Do<un*EN TERSENDIRI
Adobe Dreamweaver CS5.5 telah memberi banyak kemudahan dalantmelakukan desain web secara visual. Begitu juga dalam menerapkanCSS, Anda tidak perlu menuliskan script CSS secara konvensionalmelainkan cu ku p memasukkan atribut-atribut untu k mendefin isikan CSS.
Dokumen CSS dapat dibuat dengan cara sebagai berikut:
1. Anda dapat membuat dokumen CSS melalui salah satu car{r
berikut:
Mempercontik Holomrcrn Web
Melalui menu bar, pilih File > New atau melarui shortcutkeyboard CTRL+N.
@ Melalui Starter Page pada bagian Create New > CSS.2. Akan muncul kotak dialog New Document, pilih Brank page >
CSS, kemudian pilih Create untuk membuat dokumen.
i [jr'* D,:curr*ritII
| 3aQe TvDe'
i"&\ - ,Y,' ffi'tr-.4ffi Hlant' Fage j rir;r rp"rilr+e
*.S er"nl' Tenrplate
143
@
"Ti Librar-y item
a XSrr tlntire page]
Y1., .\:sLt{rraqrrent}
ASF -lnua5€rlpl
i:::Y,,ffi o,n*,
Gambar 4.1 Potongan kotak dialog New Document
3. Pada Document window akan ditambahkan sebuah halamankosong.
4. selain itu, Anda juga dapat membuat dokumen melalui pagefrom sample > css style sheet >...yang merupakan contohdokumen CSS.
i
.l'l:.qr:.J..i, f.fi *r if ll r, ,i.:- r.r[ | |
F dAuJ:lt ,; s;g -rtr hr I
,,\ - \ C35 Stlt 9Et , 8-rii: jr.eJ
#S s r',r : dgE ] r me*r i Bas, ,,_u, ,:
'' o$ EEr,i. Ten,r,Lte
i-i$ nase lrnrn TeroErare
.$j1 Fage fron Smpte
-* 0,r",=,
sailFie Fag€r
i crui.*.ii. ----- - '." -
:,:;*r.,;;,1&o;.;oi. ^
as:.rsr tir/iii1,t.,l eis,'r
aois sl Grts1,.Ero?n
Cotr5r Rec
Cai$sr lsrr.,€.oyrn
Cciss: r€{JsE:Ero7',Fo.,a:; Aa-E<-$r,i
;!t iEsgrl: Aaais9DkFlli aFrgrr * ra , 61.,--,c'eEi,l;ri1yFui :tqgr; r:-l:qr aea jrFlri.r.
Frili aEg:U:'riri16rts, ye]o.r.a.*er
Lni, E&.s
rTH,&:'Ill ,rhi[u ,: r(l ,
t,i r-r, [a tT
hl Irz iri r,.1 ;,r ,,A bjue ,:*4, r.J'enre I te r!:l ai-]. e r. ,.tsddrts E r_rriir:j ri,. iiPEl.
Gambar 4.2Kc:tak dialoq New Document
144 Tips & Trik Adobe Dreomweover CS5.5
5. Anda dapat memilih pada tist Sample Page beragam contohaturan CSS yang siap digunakan pada dokumen html dan melihathasilnya pada bagian Preview.
6. Sampel yang dipilih sebagai contoh adalah Colors: Btue.
7. Akan tampil dokumen baru yang sudah berisi script CSS sepertiberikut:
frt,l t
,,tl;+:i,.:, s,
;,.ir,Ll::,'r,*:++l a(rl+.*: i.. act'ri i'.: t:t | !
*1.ts:rt o
tr'l r n
{iij 1it1:L;,
*c' :l ar.'-i :*j.t L.[},| tr
I tt
Fll r 13
i1e
-Rae*gi"au,':d-eolor : *IIIEFEI;
I
i-:r'ry: v r. ;ri '
1
cPii}r, *tt0'-:33,
Gambar 4.3 Dokumen baru denganSample Colors: Blue
8. Simpan Sample Golors: Blue ini dengan nama "style.css"
Menerapl€n Dokumen CSS
Setelah Anda membuat dokumen CSSadalah menerapkan pada halaman webpada dokumen web. Untuk lebih jelas,berikut:
tersendiri, langkah selanjutnYadengan cara menyisiPkannYaikuti langkah-langkah sebagai
1.
2.
Buat dokumen HTML baru.
lkuti salah satu cara berikut untuk menyisipkan dokumen CSSpada dokumen HTML:
O Pada menu bar pilih Format > CSS Style > Attach StyleSheet....
Mempercontik Holomon Web
ffi#Iffi:i*I*rXitndent {tul+Alt+} !i
Outdent Ctrl+Alt+tr
:*: ffi;ffi
; j"'':t l:,,,:. t.r.
FarasraphFormat r l*ffi5,,L1*,,,,.,,,*Aligr"r )List )
Fsnt
S{yte
*$t$ffi{*lor.".
Gambar 4.4 Menyisipkan dokumen CSS melalui menu bar
o Pada Property lnspector HTML, properti class pilih AttachStyle Sheet....
r45
Gambar 4.5 Menyisipkan dokumen css meralui property lnspector
o Pada panel css style, pilih ikon ffi oi bagian bawah panel.
Gambar 4.6 Menyisipkan dokumen css melalui panel css styles
G) Klik kanan pada halaman kosong, lalu pilih AttachSheet...
Iti
Style
146 Tips & Trik Adobe Dreomweover CS5.5
Gambar 4.7 Menyisipkan dokumen CSS melalui klik kanan halaman
3. Akan muncul kotak dialog Attach External Style Sheet.
atu.h,q,.qfi*Si, fi.-ff*H.#:$f ,,1 j,r,.,'i,'.,.,.,..r,..',,,,,,,;
FirerrrRl, i{:Y:f$ff:.-- -_" ffi*dd ar: {!} r_ink
S twort-".'-'-r'Ired"'i-**--
-" -*3J
rT***-*1ii !{sfiEa.,,, I it@t
You rnay aho enter a trnmrr{egaratBd liEtof merfii: tfper.
Orcan*eaus hag S@1e-Sl&-e}reS.E to get yan etarted.
@i.. .&.Eld!i$il , ri
ffiffi*--=
illGambar 4.8 Kotak dialog Attach External Style Sheet
Telusuri File/URL CSS melalui tombol Browse maka akanmuncul kotak dialog penelusuran file. Cari dan pilih dokumenCSS yang akan disisipkan, kemudian pilih OK.
4.
Mempercontik Holomon Web
sclcc{filenamelrorn: $Fhsyctan ilffi;lg oda sourcar i .,,*j;" , j
-l
f&r,urn: m_Fo.*s'ivp': hyr-$#i.Hi *i:-::^ -: -:-UBL l".ii,yit_iirti.iiiBddivetu l[i;fliti ..,fiICharue default Link Beldive To in the site defmitft:n.
Gambar 4.9 Penelusuran dokumen CSS
Pilih OK untuk menyisipkan dokumen CSS.
Terlihat pula pada kode HTML disisipkan kode berikut:
< l ink href= ". ./style/style.css" rel = "stylesheet" type= "texfl CSS" / >
Untuk mencoba menerapkan dokumen CSS, buatlah teksdengan heading 1 sampai 6.
Anda dapat melihat warna latar halaman menjadi biru dan teksheading sesuai warna yang didefinisikan pada dokumen CSS.
147
5.
b.
7.
8.
r48 Tips & Trik Adobe Dreomweover CS5.5
Gambar 4.10 Hasil penerapan dokumen CSS (style.css)
Tempat kedua untuk menuliskan aturan CSS adalah di antara tag<head>...</head> pada dokumen HTML. Penulisan aturan CSS pada
dokumen HTML dimulai dengan tag <style type="texUCSS">...</style>.Sedangkan tanda <!-- --> berfungsi agar aturan CSS tidak dibacaapabila browser tidak mendukung aturan CSS. Hal ini berguna agar tidakterjadi error pada halaman web saat dijalankan pada browser yang tidakmendukung CSS.
Untuk membuat CSS yang hanya berlaku untuk dokumen tertentu dapalAnda lakukan dengan langkah-langkah sebagai berikut:
1. Buat dokumen kosong HTML.
2. Pada Property lnspector pilih GSS, pada Targeted Rulopastikan memiliki nilai <New CSS Rule>.
3. Pilih tombol Edit Rule.
Mempercontik Holomon Web
Gambar 4.11 Property lnspector css untuk membuat aturan css baru
4. Akan muncul kotak dialog pembuatan aturan CSS yang baru.
ii ';ii'i..*l::n:iri;'ii::r'i'ffiorTyge:
Chsose a &ntrr&alsdector type far yu,r trSS ruk,
iffi t:t*"t:-"--ra:-" ---,-ii".I
SeleetortEane:
ChEose sr srter a nane fur your selector.
,uoav illir* ;k;#;;" ;rr 4d; il;;"i;; --*.-*.-* -----" -- - --- ;. lj all *ody> elements,
nri&eAek*tirxx
Choose where yatr rule wi$ be defrred,
i--_,.'_.,__ ___,._-__-.__,.-'jfl3:"*PT:rl""3t . ,,:.J
Gambar 4.12Kotak dialog New CSS Rule
lsikan properti pada kotak dialog New css Rule sebagai berikut:@ Selector Type: Anda dapat memilih 4 type yang disediakan,
yaitu kelas, lD, Tag, dan gabungan. Pada contoh ini dipilihTag.
@ Selector Name: Apabila Anda memilih Tag dan Compound,otomatis akan mempunyai nilai. contoh ini akan mengubahwarna latar halaman sehingga Selector Name adalah"body".
@ Rule Definition: Pilih rhis Document only untuk menulis-kan CSS pada dokumen html terkait.
Pilih oK maka akan muncul kotak dialog untuk memasukkanatribut-atribut CSS.
149
5.
6
r50 Tips & Trik Adobe Dreomweover CS5.5
i,q$$j_ri,.i}l"+"
CatEgtr?
;1Ype
188*S^find I
lElrc( IlBcx I
l*ao :
lLEt l
Jrmitn*s iir*i*. liext*sim itt
L l,rr"lLl mlqr*Ni G#m#r*l ffiil
Gambar 4.13 Kotak dialog untuk memasukkan aturan CSS
Pilih pada daftar Category > Background. Sebagai contoh akandiubah warna latar halaman dengan warna hijau maka padaatribut background-color ubah menjadi #9C0.Pilih OK maka pada kode HTML bagian head akan tampil aturanCSS dan warna latar halaman akan diubah menjadi hijau sepertitampak pada gambar berikut:
Gambar 4.14 Aturan CSS pada dokumen HTML dan perubahan warnabackground
7.
8.
Mempercontik Holomon Web
MrMeuAT CSS PADaTnO $EcARA [-nxCSUNG
Tempat ketiga untuk mendefinisikan aturan CSS adalah dituliskanlangsung pada sebuah tag. Cara ini lebih spesitik dari cara sebelumnya,yaitu hanya berlaku bagi tag yang diberi atribut CSS. Dengan cara inimaka sebuah tag akan ditambahkan atribut style.
Untuk membuat aturan CSS yang hanya berlaku untuk sebuah tag saja,ikuti langkah-langkah sebagai berikut:
1. Buat dokumen HTML baru.
2. Pada Property lnspector CSS, ubah properti Selected Rulemenjadi <inline style>.
3. Akan muncul kotak dialog untuk memasukkan atribut-atribut CSSseperti Gambar 4.13 di atas.
4. Ubah background-color dengan warna hijau, lalu pilih OK.5. Lihat pada kode HTML pada tag body, terlihat disisipkan style
CSS sebagai berikut:
<body style="background-color: #9C0;">
6. Kode di atas akan menyebabkan background halaman menjadihijau seperti Gambar 4.14 di atas.
MENGENALTYPE CSSDalam menuliskan aturan CSS, Anda akan dihadapkan dengan beberapatipe penulisan CSS. Ada 4 tipe penulisan yang dapat Anda terapkanuntuk mengontrol tagtag HTML, yaitu kelas (class), lD, tag, dangabungan (compound).
Trpr KrnsKelas pada CSS dapat diterapkan pada semua tag html secara berulang-ulang dengan menambahkan atribut class pada tag tersebut.
Contoh:
< body clarss -., "tampilan">
<tablc (,1at.,,, "l,tlx'1" .
t5t
I
152 Tips & Trik Adobe Dreomweover CS5.5
Bentuk penulisan kelas adalah dengan cara menambahkan tanda titik (.)di depan identifier. ldentifier adalah nama suatu aturan. Berikut adalahcontoh penulisan identifier kelas:
.tabel{
)
TIpE ID
Tipe lD biasanya diterapkan hanya satu kali pada suatu tag HTML,berbeda dengan kelas yang dapat diterapkan berulang-ulang pada tag-tag HTML. Cara penambahan atribut pada tag html adalah denganmenambahkan atribut lD.
Contoh:
<div id="menu">
<td id='tombol">
Bentuk penulisan lD adalah dengan cara menambahkan tanda kres (#) didepan identifler.
Contoh:
#menu{
)
TrprTncTipe tag yang dimaksud adalah mendefinisikan ulang tagtag HTMLdengan aturan yang baru. Dengan tipe tag, semua elemen yang
Mempercontik Hqlomon Web
menggunakan tag ini akan mempunyai aturan yang sama. Bentukpenulisannya adalah nama tag diikuti tanda kurung kurawal buka dankurung kurawal tutup. Berikut adalah contoh mendefinisikan ulangheading 1 (h1):
hl {
color: #3F0;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: L4px;
)
<h1>Heading 1<lh1>
Hasil dari aturan heading 1 asli akan tampak berbeda dengan headingyang didefinisikan ulang. Untuk lebih jelas, perhatikan gambar berikut:
!,$.$ld-rr,tl,,,,p
1s3
He*ding 1
Gambar 4.15 Heading 1 sebelum didefinisikan ulang
rui!: +J{'
Gambar4.16 Heading 1 setelah didefinisikan ulang
t54 Tips & Trik Adobe Dreomweover tS-.q
Trpr CoupouND
Compound adalah tipe gabungan dari tipe CSS. Penggabungan berguna
untuk membatasi penerapan dari tipe tag pada jangkauan tertentu
sehingga tidak semua elemen yang menggunakan tag yang didefinisikan
ulang akan menerapkan aturan CSS.
Sebagai contoh tag h1 yang hanya akan diterapkan apabila tag h1
berada di dalam lD kotak.
#kotak h1{
color: #3F0;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:L4Px;
1J
<hl>Heading 1 [h1]</h1>
<div id="kotak">
<h1>Heading l[#kotak h1]</h1> '
</div>
Perhatikan perbedaan antara tag h1 dengan tipe compound #kotak h1
pada gambar berikut:
{S5;tttml H
Sqwce Code
tir*,1* Desien
I
lHendins l thtlI
i
Gambar 4.17 llcrtterlturn iurllrr;r t;rry h1 tlcttr;;ttt lt;tc r.otttltrttllirl fkot;rk ltl
Mempercontik Holomon Web
MENDEFIN]SIffiN:ATU N..C.SS
Setelah Anda mengenal tipe-tipe CSS, tahap selanjutnya adalah men-definisikan aturan CSS. Pada aplikasi lain, mungkin Anda akanmenuliskan kode-kode CSS secara manual pada dokumen CSS yangmasih kosong. Dengan Adobe Dreamweaver, Anda tidak perlu melaku-kannya, cukup memasukkan atribut-atribut CSS pada kotak dialog yangdisediakan. Untuk mendefinisikan aturan CSS, gunakan cara sebagaiberikut:
1. Buka kotak dialog New CSS Rule.
@ Melalui dokumen CSS. Pilih pada menu bar Format > CSSStyle > New....
@ Melalui dokumen web. Pada Property lnspector bagianTargeted Rule isikan <New CSS Rule), kemudian pilih EditRule.
r55
lndst EtrhAI{+lgutd€ni Etd+Altlt
Paragrsph lBrmrtAIign
. .. tj::
F66t
5V€
ur$.t}
2.
Gambar 4.18 Membuat aturan CSS baru
Akan muncul kotak dialog pembuatan aturan CSSberikut:
baru seperti
156 Tips & Trik Adobe Dreomweover CS5.5
*lectsTyg€:Chocse a contexfud sdectsr type fer pr.n C55 n;h.
fE:
s€kct$rflameChaeses enter a,nwre for ycur ekrhr,
-I,tI
"laltl
R*le DcftritbrrChoose where your rule r+i$ be defxred.
[iri..:---- ^"-*:": -** -:*-G
Gambar 4.19 Kotak dialog New CSS Rule
Pada kotak dialog tersebut terdapat beberapa bagian denganpenjelasan sebagai berikut :
O Selector TypeTerdiri dari class, id, tag, dan compound. Lihat pembahasansebelumnya mengenai "Mengenal.Type CSS".
@ Selector Name
Berisi nama class, id, tag, dan compound. Anda dapatmenuliskan nama class dan id secara langsung, sedangkantag dan compound dapat Anda pilih melalui list yangtersedia.
@ Rule DefinitionBerisi pilihan apakah aturan CSS ditulis pada dokumentersendiri atau disisipkan bersama kode HTML. Untuk T.membuat dokumen tersendiri pilih New Style Sheet File.Untuk menuliskan pada dokumen html pilih This documentonly. Apabila Anda pernah membuat aturan CSS makaAnda dapat menuliskannya pada dokumen tersebut.
3.
Mempercontik Holomon Web
Gambar 4.20 Memilih Rule Definition
lsikan properti-properti tersebut, kemudian pilih OK.Akan muncul kotak dialog untuk mengisikan aturan-aturan CSSseperti berikut:
Frnr-hnrds: iI#if:;f*:*::l*"y::;lf__ -""::ffiFent-cizte [._.."--.".ffiii],-"."."ffi Font+reigtrt: l"lg- "."" iffi
Fwt-sge, FTd_ffi
Textdecuraton: ffi Lrndertine
lfloverline
L-Jme-*,reudrra::r: I r. tL*J B$rS(
f,]"*.
Gambar 4.21 Kotak dialog CSS Rule Definition Category Type
Pada kotak dialog tersebut terlihat sebuah daftar Category dan disebelahnya terdapat kotak input atribut dari kategori tersebut.Kategori yang pertama adalah Type. Pada kategori Type berisikotak input untuk mengatur teks, seperti font, ukuran, warna, danlainnya.Category kedua adalah Background. Background digunakanuntuk mengatur warna, gambar, dan pengaturan latar belakangelemen yang menggunakan style ini.
157
4.
5"
6.
158 Tips & Trik Adobe Dreomweover CS5.5
CategpryI_ -',- ----',----------',--:I lypE i
lfl{tft(ff{fficf .ii4il'''',:r,r i"i
lsock iEactlsroxrdsdw, ffi i-*J-_'j'
Eaakryesd*ffiqet ir#--"--".----" r #Bad{rqrourd*epero,k.-.g:.m
Eadqround-atta*** }l*--ffiBadcgraund+osition 6tl, @ry:H irl . - :r*Ba@sund-pesu* er:' Fe'-ffi i.;;--- ffi
SoxEardsListFositiolingExterrglafir
Gambar 4.22Kotak dialog CSS Rule Definition Category Background
8. Kategori selanjutnya adalah Block. Kategori Block digunakanuntuk melakukan pengaturan teks seperti spasi, perataan teks,posisi teks, indentasi, dan lainnya.
;lJffi,tffi;H;#ffi* iiillf,tl,.+yte+Er
ffi1, r;rl&r::.r:,i
9.
Gambar 4.23 Kotak dialog CSS Rule Definition Category Block
Kategori keempat adalah Box. Kategori Box digunakanmelakukan pengaturan box/kotak elemen seperti lebar,letak box, padding, dan margin suatu elemen.
untuktinggi,
I
Mempercontik Holomon Web
Gambar 4.24Kotak dialog CSS Rule Definition Category Box
Kategori kelima adalah Border. Kategori Border digunakan untukmelakukan pengaturan terhadap border yang mengelilingielemen, seperti bentuk, tebal, dan warna dari border.
'i"fIsHutpeCr.+ffiffitrd#Sd'nitiri,i*Btyte"<ss'
Gambar 4.25 Kotak dialog CSS Rule Definition Category Border
11. Kategori keenam adalah List. Kategori List digunakan untukmelakukan pengaturan terhadap list (OL/UL).
r59
10.
;
I
i {ss rn:ri1#Pstih lttff $.$ffiTriitiiiii iii Frylecss
CaieEsr?
. ga6(4rGlilldiulffiiS0W r,r, i. r3. il;Sorderili$tinostiminqitxffistffi
.*li *"i
Rrglrt: : 'i
Bettanr: r :
,"61t , .,
Cahgoryt:- -------- -------"tI ryse i
laa*grsud I
lBlcd( 1
lso* j
ieeqaq i
,Let . , ' ,..1
lfosltlm;nq IiErbeNes IiittI,itiijliitll,iIiiiiIl!i
Li6t.styb-ty!€: i13:.--ffiLisi{tyhnas€: :-**---:-:: " .ffi i;,ry''=]
tist*tyle+esitior,: i.ffi ..ffi
r60 Tips & Trik Adobe Dreomweover CS5.5
Gambar 4.26 Kotak dialog CSS Rule Definition Category List
Kategori ketujuh adalah Positioning. Kategori ini digunakanuntuk melakukan pengaturan terhadap posisi dan visibilities teksdalam kelas CSS.
12.
Gambar 4.27 Kotak dialog CSS Rule Definition Category Positioning
13. Kategori terakhir untuk melakukan pengaturan CSS adalahExtensions. Kategori ini berguna untuk melakukan pengaturanpage break, bentuk kursor, dan filter.
Memperccrntik Holomon Web
Gambar 4.28 Kotak dialog CSS Rule Definition
14. Pilih OK untuk menyimpan pengaturandialog.
Category Extensions
CSS dan menutup kotak
15. Akan terlihat pada dokumen CSS sebagai berikut:
r61
Gambar 4.29 Hasil pengaturan CSS pada dokumen
162 Tips & Trik Adobe Dreomweover CS5.5
METTCnpuKAg<nI{ CSS PADA DoxuuEN VI/EB
Anda telah mempelajari cara membuat layout dengan layer pada harikedua. Sebenarnya layer dibuat dengan menggunakan pengaturan CSS,Anda dapat melihat pada kode HTML ditambahkan sebuah lD yangmenjadi kontrol dari tag div.
Pada penjelasan di atas, selain mempercantik layout, CSS juga dapatdigunakan untuk mempercantik content dan segala sesuatu yang adapada halaman website.
Untuk lebih jelas, perhatikan contoh berikut di mana menu halaman webyang berupa list akan dipercantik dengan aturan CSS.
Gambar 4.30 Menu navigasi list sebelum diterapkan CSS
Tambahkan tag Div pada menu navigasi list tersebut dengancara'.
1) Letakkan kursor pada sel menu navigasi.2) Pada Tag Selector (di atas Property lnspector) pilih tag
<ul>.
b t*r.f*ar$iwEp {kh{e} db} Etd> qdi,,/,;,rftenu*dulp } {El}
Gambar 4.31 Menyeleksi tag ul pada Tag Selector
3) Pilih panel lnsert > Common > lnsert Div Tag.4) Isikan pada Class dengan nama 'nmenu", kemudian pilih
New GSS Rule.
1.
Mempercontik Holomon Web 163
ImErt:
Ciassr
Tt1 '
:
Gambar 4.32 Kotak dialog lnsert Div Tag
lkuti pembuatan aturan CSS baru seperti langkah-langkahpada pembahasan "Mendefinisikan Aturan CSS".Properti diatur sebagai berikut:
background-color: #CCC;
border: 1px solid #009;
Simpan pengaturan pada dokumen tersendiri dengan nama"style.css".
2. Akan tampak perubahan pada menu navigasi seperti berikut:
5)
6)
7)
Gambar 4.33 Menu navigasi list setelah ditambahkan tag Div dengan Classmenu
3. Langkah selanjutnya adalah mengatur agar setiap menu beradapada posisi kiri dan menghilangkan bullet (tanda lingkaran kecilsebelum teks). Untuk mengaturnya menggunakan type compound".menu ul" adalah dengan cara sebagai berikut:
1) Letakkan kursor pada salah satu teks menu navigasi.
2) Pilih tag <ul> pada Tag Selector.
3) Pilih Edit Rule.
4) Akarr nruncul kotak New CSS Rule, pada Selector Namegrililr pirrlir rJaftar ".menu ul".
I
164 Iips & Trik Adobe Dreomweover CS5.5
5) Akan muncul kotak pendefinisian aturan CSS. Atur propertitag compound .menu ul sebagai berikut:
padding: Opx;
margin:0px;
I ist-style-position : outside;
border: 1px solid #06C;
list-style-type : none;
6) Pilih OK untuk menutup kotak dialog.4. Hasilnya akan tampak seperti pada gambar di bawah ini:
Mempercontik Holomon Web r65
Langkah selanjutnya adalah mengatur tag hyperlink <a>, berupawarna latar menu navigasi, jarak menu dengan batas kiri, danpadding. Atur properti tersebut dengan tag compound ".menu li a"sebagai berikut:
text-decoration : none;
display: block;
font-weight: bold;
color: #36F;
background-color: #9C3;
padding-left:20px;
padding-top:2px;
padding-bottom:2px;
8.
9.
Gambar 4.36 Hasil pengaturan tag compound .menu li a
Hasilnya akan tampak seperti pada Gambar 4.36Selanjutnya adalah mengatur warna latar dan teks ketika pointermengarah pada menu navigasi. Atur properti pada tipe compound".menu li a: hover" sebagai berikut:
color: #9F0;
text-decoration : none;
background-color: # 6FF ;
Simpan dokumen web dan CSS. Untuk melihat hasil dariporrr;;rtrrrirn lipe compound .menu li a:hover, tekan F12 padakoytro:rrrl rrrirkir lrirsil dari pengaturan tersebut akan ditampilkan di
7.
5.
Gambar 4.34 Hasil pengaturan tag compound .menu ul
Langkah selanjutnya adalah memberikan garis pemisah antar-menu. Untuk melakukannya, gunakan lewat tipe compound".menu li" dengan cara seperti di atas. Atur atribut .menu lisebagai berikut:
border- bottom -width : Zpx;
border- bottom -style : sol id;
border-bottom-colo r : #999 ;
Hasilnya tampak seperti pada gambar berikut:6.
10.Gambar 4"35 Hasil pengaturan tag compound .menu li
ttlr
I
167166 Tips & Trik Adobe Dreomweover CS5.5
browser. Arahkan pointer pada menu navigasi maka akan terjadiperubahan warna latar dan teks. Perubahan tersebut adalah hasilpengaturan tipe compound .menu li a:hover.
iJr *ll l#*ri*r*sit*
L*u*u,]iish lffi**ffiffi
ip
!
*hlan tlla. Sahlau.Fi, i
Memperconiik Holomon Web
MrMEunr SPNV TAESTD PAI{ELS
Spry Tabbed Panels adalah komponen widget yang mampu menam-pilkan data dalam bentuk tab atau panel. Data dapat ditampilkan denganmengklik tab atau panel yang bersangkutan sebagaimana pada aplikasidesktop.
Untuk menambahkan Spry Tabbed Panels ke dalam halaman web,gunakan cara sebagai berikut:
1. Tentukan lokasi Spry Tabbed Panels akan ditambahkan denganmeletakkan kursor di lokasi tersebut.
2. Pilih panel lnsert > Spry > Spry Tabbed Panels.
[i*$EsT
$sry w
ffi ,ry*c'q"pryeanetJql;-,]., SpryTooltjp
l' I Ssrv
Gambar 4.38 Menu Spry Tabbed Panels pada panel lnsert
Akan tampil pada halaman desain objek Spry Tabbed Panelsdengan tampilan default, yaitu 2 tab yang bernama Tab 1 dan Tab2 dan di bawahnya ada panel Content 1 dan Content 2 yangmuncul sesuai tab yang terpilih.
Gambar 4.39 Spry Tabbed Panels Default
Anda dapat mengubah nama Tabbed Panels melaluilnsllot:lrlr s;cllagai berikut:
#.r*:;eSqtrri.lA#1;i$tipl!rer,i,.:,,,I
t.-ji,+:jr' ]& httr"17io11ln*sr,ras;;,,1{
*,*iab$}Be r,plvuail ii'ms yangm**"aj&4Agarma dan Psmseg1alnau, !&*ru*ya Jara" Feryo.4.dole Drearur*eaqur C S 4. Bxd lain*.r;a. ". " ilfien"dAndaiuga dapar mendo-**load ehookfor &ee alirir*ernrm.yadr l &xaiiffietfa,.r,rii':.:r,:l'Kaoau juga dryat mgagguneksr fllsffitas lair*ve, yt
i hnF''Jl--ca lh erirAgi; ffi Leral in rsnei +r 5.nnca v
Gambar 4.37 Hasil pengaturan menu navigasi dengan CSS
3.
MENGGUNAKAN SPRYSpry merupakan fasilitas Framework Adobe Dreamweaver CS5.5 yangberupa library JavaScript. Fasilitas ini memberikan kemudahan bagidesainer web dalam membuat halaman web dengan tampilan yangmenarik seperti aplikasi desktop, tidak seperti halaman web biasa.
Salah satu fasilitas Spry adalah widget, seperti Spry Tabbed Panels,Spry Accordion, Spry Collapsible Panel, Spry Tooltip, dan lainnya. SpryFramework ini mudah digunakan sehingga membantu pemula dalanrmempelajari dan mendesain halaman web dengan tampilan yanflmenarik.
Il
4. Property
r68 Tips & Trik Adobe Dreomweover CS5.5 Mempercontik Holomon Web
Gambar 4.43 Menuliskan content pada tab Profil Admin
Setelah selesai menuliskan content setiap panel, simpandokumen tersebut dan lihat hasilnya pada browser.
i#ji.5ii,ftifiHp-$|f,,R_?jfliii;1 ffi ,u ,:li*:il liffiFllr Edit Vieur 8cel""rlr+rks Widgcts T+ols l'{elp
.""-i.il'6,-#.r'* ** oo i,l;,,!rrr }.+b!9c: ra1e1r
rtB:r*t;I
*wr,, 'zP. ,8* 4k; .6ar
isslla : r{}}u A.s:iah 3s 3ah*atatr;,* ; Lt*.r;*tri d*xr t*?ah d:ik;r'*ni;lr I;lri 3;ang ra,uti$:*gg,al i.thir; r'! juli lp,$5b! ; Tidak $ik*t*3ui.tiflte:, l }$*nc*li ir*k*rlear; ri.a;:
a*g &*rarja t:nca ini
iiffi"ist'l,ro* t**g*,
169
5.
Gambar 4.40 Property lnspector Tabbed panels
@ Tabbed Panels: Menampilkan dan mengubah namaTabbed Panels, misalnya nama diubah menjadi "stpprofil".
@ Panels: Menampilkan daftar nama tab dan memitihnya,secara default adalah Tab 1 dan Tab 2.
@ [+J dan [-] di atas list panels, digunakan untuk menambahdan menghapus tab.
@ Default panel: Digunakan untuk memilih panel yang akanditampilkan pertama kali saat dijalankan pada browser.
untuk mengubah nama tab, Anda dapat langsung memirih danmengubahnya pada area desain. sebagai contoh rab 1 akandiubah menjadi Profil Admin dan Tab 2 akan diubah menjadi profi!Website.
Gambar 4.41 Mengubah nama tab
Selanjutnya untuk menampilkan isi/content tab, arahkanpada tab, kemudian klik gambar mata.
pointer
Prcffi Ad*rltn $:,,,,,S
Gambar 4.42Klik ikon mata untuk menampilkan content
Selanjutnya untuk menuliskan deskripsi teks/isi, Anda dapatlangsung menuliskan pada panel Content dengan mengkliknya.
8.
6.
7.Gambar 4.44 Hasil pembuatan Spry Tabbed Panels
Tips & Trik Adobe Dreomweover CS5.5
Gambar 4.45 Memilih tab Profil Website
Mengedit Spry Tabbed Panels
Setelah membuat Spry Tabbed Panels secara default, Anda dapatmengubah warna teks dan background, jenis, dan ukuran font SpryTabbed Panels serta properti yang lainnya.
Setelah penyisipan Spry Tabbed Panels pada halaman, akan ditambah-kan 2 dokumen, yaitu dokumen JavaScript dengan nama SpryTabbedPanels.js dan dokumen CSS dengan nama SpryTabbedPanels.css.
Untuk mengubah properti Spry Tabbed Panels tersebut, Anda dapatmengubah properti kelas-kelas CSS yang terdapat pada dokumertSpryTabbedPanels.css. Untuk lebih jelas, perhatikan tabel kelas-kelaspada SpryTabbedPanels.css dan fungsinya.
Mempercontik Holomon Web
Untuk mengubah properti melalui kotak dialog, pada Property lnspectorpilih nilai Selected Rule dengan nama kelas yang tersedia, kemudianpilih Edit Rule untuk menampilkan kotak dialog pengubahan propertikelas CSS yang terpilih pada Selected Rule.
Gambar 4.46 Membuka kelas-kelas pada dokumen SpryTabbedPanels.css
Setelah mengubah properti-properti seperti di atas, simpan dokumen webrlan CSS, kerrntrdian preview hasilnya pada web browser. Hasil peng-trbahan akirrr lirrrr;rirk scperti pada gambar di bawah ini.
171
#,Spryrauueafllntli-aperr : 'j
File Edit Uiew Bc*kma,rks Widgetr Tools t-ielp
r i Ner,v tab , , , Senr Tahbed Pan*ls .H j#;'
*r:$ +;*i 9- t*o' .t .f*" 1 '-...j htlp:;.irl+.ralh,o:i'Ad il
It*;ar' li.4sir jffi '*#l
6J
Protil Atk{liri Profil $rehrite... . .i d'rlddofil lt"ebsite
i*qi*&srt* ::e*r*pakax iebtah *:itur ya*p. m*s::;sj!!;agr *.na ;,,:kr'k r
n:;*sxiah* ',-n:it* ti*a:ri.a lli*:: atati -t-o;anaa an f*tnr+grxn-.r*x khr;li;rl.ll;,,4 i
Jr',:e. p**ur**rs::I*)i r.r'elrli t *f tr:ir-ss ediiern-"a adaial: -rCl'beIrrqafiri{s*n',*r CS"t, a::C lai::r:1i*.... n{klrsii aja apa 3'ang *.tle:^ -i:1^-,. .:dt,&r:;l
r.::da.liiga uiapat:l:ee*,'1,:i,.'ari;a* etp.xit t-+r ii're ai:ias g3:aii$ ta$pc eaeglir:l ;
't+t.:*';i l:*,",ar i.*i*rne1q",:g ;J;trfiiti ,
&i $hcw lnrager ii;
TABEL 4.1 Kelas-kelas pada dokumen SpryTabbedPanels.css
.TabbedPanelsTabGroup
atau .TabbedPanelsTabfont-family: Tahoma, Geneva,
sans-serif; color: #00C;
background-color: #9F3;
.Tabbed
PanelsContentGroup atau.TabbedPanelsContent
Mengubah properti teks dan
background panelfonlfamily: "Palatino Linotype","Book Antiqua", Palatino, serif;
fontsize:'l 2px;color:
#6C0;background-color: #9CF;
.Tabbed PanelsTabHover Warna background tab saatpointer mendekat.
172 Tips & Trik Adobe Dreomweover CS5.l,
Gambar 4.47 Hasil pengubahan properti kelas
[tI rnlt nunr S pny AccoRD toN
Spry Accordion adalah widget yang berbentuk seperti Spry TabberlPanels, dengan tabtab panel yang tampil secara vertikal"
lkuti langkah-langkah berikut untuk memuat widget Spry Accordion:
1. Tempatkan kursor pada lokasi akan dibuat Spry Accordion.2. Tambahkan Spry Accordion melalui panel lnsert > Spry > Spry
Accordion.
Mempercontik Holomon Web 173
3. Akan ditambahkan desain Spryyang memiliki 2 tab (Label 1 dandan Content 2). Setiap contentmasing.
Accordion pada halaman webLabel 2) dan 2 panel (Content 1
berada di bawah tab masing-
4"
Gambar 4.49 Hasil penambahan spry Accordion pada halaman
Untuk mengubah nama spry Accordion dan menambahkandapat Anda lakukan melalui Property lnspector.
tab
5.
Gambar 4.50 Property lnspector Spry Accordion
@ Accordion: Untuk mengubah nama Spry Accordion.@ Panels + dan -: Untuk menambah dan mengurangi tab.
selanjutnya untuk membuka content pada tab kedua, klik ikonmata pada tab kedua.
,#;;spr$.fapffifF$gtitip.pe*i :: :'' I,,,,.111,r11riii::ii
I File. Edii UiE# 8-Eakmsrkr l$idEets, Yqols He[p
ili.'u*tt"a 1,.,,#,,$..r,.ffrluu,,Enb i..F,,,.+,,ffi[*;;,,;,,,,i;'.,;,,,,,r#iij' , ],
ss" i
*u, *' Y",ry#dffi
fryi'I "'1
1-::1I :;-s $gy ro{xup
Gambar 4.48 Menu Spry Accordion pada panel InsertGambar 4.51 Membuka content pada tab
6.
Tips & Trik Adobe Dreomweover CS5.5
Untuk mengubah nama tab dan content dapat langsung dilakukanpada panel tersebut.
Gambar 4.52 Hasil pengubahan teks tab dan panel
Simpan dokumen setelah Anda selesai mendesainnya, kemudianIihat hasilnya pada web browser.
Mempercontik Holomon Web 175
Gambar 4.54 Tampilan tab kedua Spry Accordion setelah diklik
Mengedit SpryAccordion
Anda dapat mengedit/mengubah properti dari Spry Accordion melaluidokumen CSS yang tercipta saat pembuatan Spry Accordion, yaituSpryAccordion.css. Kelas-kelas dokumen SpryAccordion.css yang dapatdigunakan antara lain:
Tabel 4.2 Kelas-kelas dokumen SpryAccordion.css dan fungsinya
.Accordion atau
,AccordionPanel
Mengubah teks tab dan
content.
font: Arial; fonlsize:medium;Background-color: #9F0,
,AccordionPanelTab Mengubah propertiteks
dan background tab.
font: Arial; font-size:medium:
Background-color: #9F0,
.Accordion PanelContent
.Accortlior rP;rrrelOpen
.Ar;r;otrltor rl);rrrcl I irtr
Mengubah propertiteksdan background content.
background-ccior: #9F0 ;
Properti background saattab menampilkan
conterrt
background-color: #9F0; I
7.
tI
lSpr.o Accsrdion adalah vddget ],xrg berbentulc
Gambar 4.53 Hasil preview pada browser
176 Tips & Trik Adobe Dieomweover CS5.5
Gambar 4.55 Hasil pengubahan properti
Mrtranunr Spnv Cot-LqPsrBLE Pmlru
Spry Collapsible Panel mirip dengan Spry Accordion, namun mempunyaianirnasi pembuka panel lebih halus dan hanya terdiri dari satu panel saja.Untuk membuatnya, ikuti Iangkah-langkah sebagai berikut:
1. Tempatkan kursor pada tempat yang akan ditambahkan SpryCollapsible Panel.
2. Pilih panel lnsert > Spry > Spry Collapsible Panel.
lr,4empercontik Holomon Web 177
Gambar 4.56 Menu Spry Collapsible Panel pada panet lnsert
Akan muncul pada halaman desain Spry Collapsible panel. Terdiridari satu tab dan satu panel content.
Gambar 4.57 Desain Spry Collapsible Panel pada halaman
untuk mengubah nama tab dan teks content dapat dilakukandengan cara mengedit langsung teks tab dan content.
3.
4.
Tips & Trik Adobe Dreomweover CS5.5
Gambar 4.58 Pengubahan nama tab dan teks content
irirrpri*e n*rn!* ,3{
ffi SprygallaperblePaild"i3 Sfyca$apslblepanel.css V
i[tsHffil $ n*,1en.. i mrs*[,i ::l$dryCcllapeitdePsil€il _____-: Spq' C.nErysible Fard r$ir{] deogau Spry Accordioo" akssn t'tryi or**pnryu;
ql1ig*i ryrylqtp gqryJ }ebe !g!q1 dm. ha1.a terdiri dai saru pa*etr saja
Done , , ff Local inrraner {, tmt v
Gambar 4.60 Hasil preview spry collapsible panel pada web browser
Gambar 4.61 Tab Spry Collapsible Panel menyembunyikan content saat tabdiktik
Mengedit Spry Collapsible Panel
seperti pada widget lainnya dalam pembuatan spry collapsible panelakan ditambahkan 2 file pendukung, yaitu file CSS dan file JavaScript.File JavaScript bernama SpryCollapsiblePanel.js dan file CSS bernamaSpryCollapsiblePanel. css.
File CSS berisi properti CSS yang digunakan untuk mengatur tampilanwidget Spry Collapsible Panel. Ketas-kelas dokumen SpryCollapsiblePanel.css dan fungsinya disajikan pada tabel berikut:
5" Property lnspector Spry Collapsible Panel sebagai berikut:
PN,OPER.TIES
r-*;l CollapsiHe pglel| *l -..*..."-..--*:L*.l,c"rr"pi!ir*n'#rr
-l
C$stgmize tNis widset :'r,,,
Gambar 4.59 Property lnspector Spry Collapsible Panel
@ Gollapsible panel: Menampilkan dan mengubah nama spryCollapsible Panel.
O Display: Mempunyai 2 parameter, yaitu Open untuk me-
nampilkan panel content dan Closed untuk menyem-
bunyikan panel content.
@ Defautt state: Menentukan kondisi pertama Spry CollapsiblePanel saat dijalankan pada browser, apakah menampilkanpanel content atau menyembunyikan panel content.
O Enable animation: Mengaktifkan animasi dalam membukapanel saat tab Spry Collapsible Panel diklik.
Simpan dokumen tersebut dan preview hasilnya pada browser.6.
TABEL 4.3 Kelas-kelas Spry Collapsible Panel
font bold 0.7em sans-serif;
background-color: #DDD;
Mengubah propertitab
saat menampilkan
content
background-color: #CCC;. CollapsiblePanelTabHover,
.CollapsiblePanelOpen
. Col lapsiblePanelTabHover.
Mengatur propertitab
saat pointer mendekat
dan tab menampilkan
content.
rB0 Tips & Trik Adobe Dreomweover CS5.5
MEfuIBUAT:$PRVTOOLTIP
Spry Tooltip adalah widget yang digunakan untuk menampilkan informasipada objek saat didekati pointer mouse. Untuk membuat Spry Tooltipdapat Anda lakukan dengan langkah-langkah sebagai berikut:
1. Pilih ob.iek yang akan ditambahkan Spry Tooltip. Sebagai contohteks AsiahSite akan ditambahkan Spry Tooltip.
Gambar 4.62 Menyeleksi objek yang akan ditambahkan Spry Tooltip
Pilih panel lnsert > Spry > Spry Tooltip.
Mempercontik Holomon Web
1'"lett,WlsPryi .',:: 'l,. ,,,, :::' ',lI,m', -r**;ii*i* ,'' 1, ,'
|mt'+;* '#;* -,'.t',,l'.ffi .,++vqqq$o,r+*rc*, l',, l,
1,.ffi.'**+**;6 :.,.t,,.,',
, "
[et.+ nor*o*,i,' - .11
[,,gg ryy vaUoeon corntm ' ,' , , , .
I 1;3l ,*r+**1*r['*,*,, ,,,,.:,
[ry. +1g"*ea.t, ],.,"'1,,'
'' "
I m', +.y1,J**@ ]--ii.'.
l, ffi t*o.."*n,, t"'l t,.,,,,
l,C ++, li;,' .,, .| ,.1:.,.r,....::...r.ri.:j.].ii..,.:..:..,"..,i:i..i..:-.r.i:1i,,..,.11.:.,..ir
liffi ,.."*iffif",,r,1i1,i;1ri*i1r,i-4,,'i
Gambar 4.63 Menu Spry Tooltip pada panel lnsert
Akan muncul pada halaman sebuah kotak untuk menuliskaninformasi yang akan ditampilkan.lsikan informasi yang akan disampaikan, misalnya "Asiahsite.web.id website pribadi milik abu asiah".
il*fw&tml*: ,tc
i,Efde; ii:' s:..tt: r,l#,li
Hls.*srl i*i
siahsite.web"id website prrbadiffi#k ahu *iafr
Gambar 4.64 Kotak Spry Tooltip untuk mengisikan informasi
5. Pada Property lnspector terdapat properti untuk mengatur ulangSpry Tooltip.
Gambar 4.65 Property lnspector Spry Tooltip
Spry Tooltip: Menampilkan dan mengubah nama SpryTooltiJr.
i81
3.
4.
2.
pR9pEfi.rnt5
1J srvrno*tel---,;i 'sp,/todtri "l rligFt,]CuFjsEEE-h6-'dxdsct
a;:i.ii;.i. :.ii:ii;tlirrrr;J;i'lii.lr: ia:']i;iI *sFtrYtrqger I l: I-:- :,:. -r-: ..---- - :r1.-i ruow:muus* ' .' :
[i Hidasr,ffiir*i'r':rr11 ,1. ,,;
,arue.ddxr,1**ltsdede,sv : ::tit t':t : :
. .1.: .:,,fl') fi*CE ..,
182 Tips & Trik Adobe Dreomweover CS5.5
Trigger: Nama lD objek yang menampilkan tooltip.
Horizontal offset: Menentukan jarak horizontal pointermouse terhadap tooltip teks. Secara default, nilainya adalah20 px.
Vertical offset: Menentukan jarak vertikal pointer mouseterhadap tooltip teks. Secara default, nilainya adalah 20 px.
Show Delay: Waktu tunda menampilkan tooltip saat pointermouse mendekati objek.
Hide Delay: Waktu tunda menyembunyikan tooltip saatpointer mouse meninggalkan objek.
Effect: Memberikan animasi saat menampilkan danmenyembunyikan tooltip. Terdapat 2 effect yang disediakan,yaitu Blind dan Fade.
Follow Mouse: Tooltip akan mengikuti pergerakan mouseselama berada pada objek.
Hide on Mouse out: Tooltip akan disembunyikan apabilamouse dipindah.
Simpan dokumen tersebut dan tampilkan pada web browser.Selanjutnya arahkan pointer pada objek yang ditambahkan SpryTooltip.
@
@
@
@
@
@
@
@
6.
Mens,elola WebImtera, Sstlf
1:;iHF'$'ltiil **ffirentans:
sl. ;lM$ri$Sloh,,Firms ' ,
#liiin$ $ H i#dt ffilif ,,&fi$a*.$pry
ffi $ on,&hfftior$,i
-l
Gambar 4.66 Hasil preview pembuatan Spry Tooltip
l84 Iips & Trik Adobe Dreomweover CS5.5
ebsite yang baik tentu tldak hanya sekedar menyajikan infor-masi-informasi statis saja, di mana seorang pengunjung webhanya bisa melihat dan membaca informasi halaman demi
halarnan tanpa memberikan respons atau tanggapan terhadap informasitersebut. Sebuah website haruslah interaktif di mana seorang peng-unjung dapat memberikan respons secara langsung. Hal ini akanmembuat seorang pengunjung merasa dapat berhubungan langsungdengan sebuah website.
illetode agar seorang pengunjung website dapat berhubungan denganwebsite adalah dengan memberikan sebuah form. Form adalah sebuahhalaman yang berisi pertanyaan dan kotak jawaban, misalnya formpendaftaran, form biodata, dan sebagainya. Hal ini juga diterapkan dalamdunia website untuk membuat sebuah website lebih interaktif.
$eorang pengunjung dapat berhubungan dengan website ketika mengisiform yang disediakan oleh website pada suatu halarnan" Berikutnyapengunjung mengirimkan atau membatalkan jawaban tersebut denganmernilih sebuah tombol. $ebagai contoh, saat Anda mennbuat suatuemail, Anda akan diminta mengisi formulir pendaftaran email, kemuclianAnda bisa mengirimkan atau bisa juga membatalkannya.
IVIENGELOLA FORMSForms/formulir seperti telah disinggung di atas adalah sebuah halamanyang berisi pertanyaan dan tempat untuk menjawab pertanyaan tersebut.
Langkah pertama untuk membuat formulir adalah menyiapkan sebuahwadah untuk menampung elemen-elemen formuiir. Wadah tersebutdisebut Form dalam tag HTML ditulis dengan <form>...</form>. Andadapat menambahkan elemen-elemen di dalam form tersebut.
MmrnnaBAHr(ANI Fonrra
Form adalah area yang digunakan untuk menempatkan komponen-komponen input seperti teks field, teks area, tombol, dan lainnya. Olehkarena itu, Anda harus membuat Form terlebih dahulu sebelum membualteks field, teks area, dan lainnya.
Mengelolo Web lnteroktif 185
Form mempunyai 2 parameter utama, yaitu Action dan Method. Actlonadalah parameter URL tempat data form dikirimkan, sedangkan Methodadalah parameter tentang cara pengiriman Form, yaitu get dan post.
untuk membuatnya, Anda dapat mengikuti langkah-langkah berikut:
1. Tempatkan kursor pada lokasi yang akan dibuat Form.2. Pada panel lnsert > Forms > Form.
TSHSENT
':. r:i i: i., ,: ii, i::: r,tii
ftl6i':,:ri
,t '-. 1.'l#',:"U*[ Iext:Field;: il : L .1.:,,it'.tii rl' .r , ,r:: , t,
&, rin-**enqry6
t--*i*lf TextfiredsqY:
4.
Gambar 5.1 Menu form pada panel lnsert
Akan muncul kotak merah bergaris putus-putus yang rnenanda-kan area Forrn untuk menempatkan komponen.lsi parameter-parameter Form melalui Property lnspector.
Gambar 5.2 Property lnspector it Form
Form lD: digunakan untuk memberikan nama dan lD Form.Ubah nilainya dengan "bukuTamu".
Action: isikan "hasil.html".
Method: isikan POST.
Target: menentukan target halaman akan ditampilkan. lsidengan _self.Enctype. menentukan type enkripsi/kode pengiriman data.Kosongkan saja.
o
o@
o
il
i
I
r86 Tips & Trik Adobe Dreomweover CSS.5
M rrunVBAI. II<nI{ TTXTFELD
Komponen yang sering dan umum digunakan. adalah Text Field. TextField merupakan komponen input yang hanya mampu menampung satubaris teks.
Untuk membuatnya, ikuti langkah-langkah berikut:
1. Letakkan kursor pada area Form.
2. Pilih panel lnsert > Forms > Text Field.
3. Akan muncul kotak dialog lnput Tag Accessibility Attribute.Lakukan pengaturan atribut Text Field melalui kotak dialogtersebut, kemudian pilih OK.
Mengelolo Web lnteroktif 187
Style Attach label tag using 'for' attribute: Menuliskanlabel Text Field menggunakan tag label dengan atribut'for'.Bentuk penulisan style:
< la bel for= "na maTextField "> la belTextField < la bel >
< input type="text" name="namaTextField7>
Style No label tag: Menuliskan label tanpa tag label. Bentukpenulisan style:
la belTextFiel d < i n put type = "text" name = "na m aTextField 7 >
@ Position: Menentukan letak label terhadap Text Field.Before form item: Label diletakkan sebelum/di kiri TextField. After form item: Label diletakkan sesudah/di kananText Field.
@ Access key: Karakter huruf yang digunakan untukmengakses Text Field.
@ Tab Index: Nilai angka yang digunakan untuk mengurutkanpengaksesan Text Field saat tombol tab ditekan.
Tekan OK maka pada halaman Anda akan ditambahkan desainlabel dan Text Field.
tlEi
iryryq_:j
Gambar 5.4 Penambahan Text Field pada halaman
5. Untuk mengatur properti/parameter Text Field, lihat padaProperty lnspector.
Gambar 5.5 Property lnspector u Text Field
TextField: Menampilkan dan mengubah nama dan lD.
Char width: Menentukan panjang TextField.
@
@
Tn.
Labe!:
5tr'ie:
rlallE
l.l,:uri
. I iiiraF rvrtlri*bei tiag
..' ntta,Jr label tag using'iur'aitribr-rte
I tlo label tag
Before fic,r$r item
.After f,orm iiem
. f"t, tnd.r, , 1
---"Il-Eli]i-r
ilffifi*dtF$sl I
-I:ill
Iftniii -'"H,i: ; ISI'P, : I.,i,II r*elp I.i
4.
PsEiiiani
Arcess he"lr
o.
\):-'_'
-"*:I
.'..,.1
@
oo
if you elsn't i','ant to enter thrr mfornration r"henms<rting sblecls, chafue 8rr Aecessrhiiill rreferences,
Garnbar 5.3 Kotak dialog lnput Tag Accessibility Attribute
lD: Memberikan nama dan lD Text Field.
Label: Memberikan label pada Text Field.
Style r Wrap with label tag: Menuliskan label Textdengan tag label" Bentuk penulisan style ini:
<label> labelTextField <input type="text"f > </label>'G)
(4
Field
r88 Tips & Trik Adobe Dreomweover CS5.5
@ Max chars: Menentukan input maksimal yang dapatditerima TextField.
@ Type: Menentukan jenis TextField. .Karena untuk menerimasatu baris input saja maka digunakan tipe Single line.
@ lnit val: Merupakan nilai awal yang ditampilkan padaTextField saat dijalankan pada browser.
@ Disabled: Pilihan ini membuat TextField tidak dapat diaksesoleh pengguna secara langsung.
@ Read Only: Pilihan ini membuat nilai dari TextField tidakdapat diubah dan TextField masih bisa diakses.
O Class: Digunakan untuk menerapkan style CSS padaTextField.
6. simpan dokumen tersebut dan preview hasilnya pada browser.
Na**a-itext fiet: I
Sune tii L*.ut in,tranet
Gambar 5.6 Hasil preview pembuatan Text Field
MrruquBAHtGN HpnrN FIrmHidden Field merupakan sebuah field tersembunyi yang berguna untukmernberikan nilai variabel secara otomatis. Oleh karena itu, Hidden Fieldbanyak digunakan untuk memberikan nilai yang sama. Sebagai contohuntuk rnenyimpan suatu data pada kategori tertentu maka Hidden Fielddapat diberikan sebuah nilai dengan nama kategori yang bersangkutan.
Mengelolo Web lnteroktif
3. Pada Form akan ditambahkan sebuah ikon Hidden Field ber-warna kuning tffi t.
4. Pada Property lnspector atur properti Hidden Field.
r89
P&SP'E&{{.Eg
f---:::* ,.... ,
lff\ $ r.riddenFie{d
. inrtroenFtetfi i
Gambar 5.7 Property lnspector n Hidden Field
(D HiddenField: Menampilkan dan mengubah nama HiddenField.
@ Value: Memberikan sebuah nilai pada Hidden Field. Andadapat menambahkan nilai dari perintah PHP di dalam fieldini, misalnya, <? echo $cat; ?>.
M E runu BAH I(ANI TExTAREA
Textarea adalah salah satu komponen input yang dapat menerimabanyak baris teks. Textarea biasanya digunakan untuk membuat inputpesan, komentar, dan lainnya pada sebuah Form.
Anda dapat membuatnya dengan langkah-langkah sebuah berikut:
1. Letakkan kursor pada tempat yang akan ditambahkan komponenpada area Form.
2. Pilih panel lnsert > Forms > Textarea.3. Akan muncul kotak dialog lnput Tag Accessibility Attribr"rte
(Gambar 5.3). lsikan pengaturan atribut Textarea isikan lD ="pesan" dan Label = "Pesan".
4. Pada Form akan ditambahkan sebuah desain Textarea.
sebagai berikut:
1. Letakkan kursor pada tempat yang akan ditambahkan komponen. Gambar 5.8 Hasil penambahan Textarea pada halanEn2. Pilih panel lnsert > Forms > Hidden Field
190 Tips & Trik Adobe Dreomweover CSS.5 Mengelolo Web lnteroktif
5. Atur properti Textarea melalui Property lnspector.
Gambar 5.9 Property lnspector D Textare, CheCkbOX
@ TextField: Menampilkan dan mengubah nama dan lD Checkbox biasanya digunakan untuk menyetujui suatu statement atau
Textarea. - dua pilihan yang berkebalikan, misalnya pada license agreement.
@ char width: Menentukan panjang/banyak karakter yang Untuk membuatnya, ikuti langkahrangkah sebagai berikut:dimasukkan dalam satu baris Textarea.
@ Num lines: Menentukan tinggiibanyak baris Textarea. 1 . Tempatkan kursor di dalam Form, tempat meletakkan Checkbox.
€l Type: Menentukan jenis Textarea, dalam hal ini adalah 2. Pilih panel lnsert > Forms > Checkbox.Multi line karena Textarea mampu menerima input banyak 3. Akan muncul kotak dialog lnput Tag Accessib'lty Attribute.baris. Lakukan pengaturan atribut, isi Checkbox lD = "setuju" dan Label
o lnlt val: Memberikan nilai awal Textare a. = "Saya setuju dengan perjanjian ini"'
6. simpan dokumen tersebut dan ialankan pada browser. 4' Pada Form akan ditambahkan desain dari checkbox'
ffil;m,f!* F$It#S*E$iii",1nt*ruktif.to1r,r:.ft'tB3illiFirefox ::r: , ,,,,,iiffi*ffiiWlile Edit Vieur Hi5tery Quckrnarkr Toalr Help
l-ate* Headtinrs
Done Gambar 5.12 Property lnspector Checkbox
O Checkbox name: Menampilkan serta mengubah nama danlD Checkbox.
@ Checked value: Nilai Checkbox yang dikirim apabilacheckbox terpilih.
I91
MTNnUBAFTKAN CurctsoxCheckbox adalah suatu komponen pilihan, di mana pengguna dapatmemilih lebih dari satu opsi. Checkbox mempunyai 2 jenis, yaituCheckbox dan Checkbox Group.
Gambar 5.11 Hasil penambahan checkbox pada Form
5. Atur properti Checkbox melalui Property lnspector.
PSSPEETTFS ,,,,,.,:,,,:':tf: Cl.€d&oxname Medvalue i Initialsbte l: oEd{Edl< ' "*":-:: ' r'lqdd'* " -. -
,. "
I
Gambar 5.10 Hasil preview pembuatan Textarea
192 Tips & Trik Adobe Dreomweover CS5.5
@ lnitial state: Kondisi Checkbox yang pertama kali ditam-pilkan. Ada 2 nilai, yaitu Checked, Checkbox dalam kondisiterpilih; dan Unchecked, Checkbox dalam kondisi tidakterpilih.
@ Class: Menerapkan aturan CSS pada Checkbox.6. Simpan dokumen itu.
il
lolo Web lnteroktif
Checkbox Group
Checkbox Group merupakan gabungan Checkbox yang biasanya diguna-kan untuk memilih suatu opsi lebih dari satu. Untuk membuatnya ikutilangkah-langkah sebagai berikut:
1. Tempatkan kursor pada Form.2. Pilih panel lnsert > Forms > Gheckbox Group.3. Akan muncul kotak dialog pembuatan Checkbox Group. lsikan
parameter-parameter pembuatan Checkbox Group, kemudian 5.pilih OK.
iIl.,nL6bel
T1{
VahJe
ff
SD
5i.1P SL:IF
[*euaov 'l
*red6ox
Lay out i.]sing: flj.: t_ine bre*s {<5," > ta$}
ruu*
Gambar 5.13 Kotak dialog Checkbox Group
Name: Memberikan nama dan lD Checkbox Group.
Checkboxes: Menampilkan daftar pembuatan Checkbox,pilih (+) untuk menambahkan checkbox dan (-) untukmenghapus checkbox. Untuk mengatur ulang posisicheckbox, gunakan tombol V A.Lay out using: Pilihan dalam mendesain Checkbox Group,menggunakan tag <br> atau Tabel.
6.
4. Akan muncul desain Checkbox Group pada Form.
Contoh Checkbox G,ronp
he$didft{a$:i.......ii.fl ,.H,,,,,,,,,,,,,,,,,,,i
i..i{,[n.,,,,.,.,.,,,...,,, i:iil--l SLTP :
;'= qrra :
ii.Ii,..pi.,,,,,,,,....,......,,..,..i::r'l n.l :
',:'."' Y.: ...................:,j:...:.
.' "" ' "':
1i.1,.Pi,,.,,,,,,........,,........, :
ii,::.1,i],,,,,,,,,,..,..,,,,......,': -.-.:,Ll SZ :,:_.................,............................-.........,..:
;:ji s3 :
l :r:u::. -:::::u:::l::i - - - - - - -
Gambar 5.14 Hasil penambahan checkbox Group pada Form
Untuk mengatur Checkbox Grotrp melalui Property lnspectordapat Anda lakukan dengan memilih satu per satu Checkbox dan
akan muncul Property lnspector Checkbox seperti pada Gambar
5.12.Simpan dan preview hasilnya pada browser.
Coctoh CbeckboxApaka}"r Acrda settjtr :
ivi Sala r*aju deogan perjaniiac ini
Coatoh Checkbox GroqrPendidihan.
I,i-:l TH
Ifi SD
i{l SLTP
iU SLTA
fI Dlri-l DJ
i-Jj D3
lil slht
i 'sfr iSi
$ Local intranet
r#ii.$Fn$,*t$"--$$#..-$'[iiffi.iftd.iilnreinEtExFronr
q&;'{}, :,, i& ; *- 111*"-y.t151ffi ,:',|in f ,i.:" ;
i,C * 1#Mbmbuatwcbait€lnl"rr* L i ft'
@
@
@
Gambar 5.15 lIu;rl lrcrrrlrtr;rt;rn Chcckbox dan Checkbox Grotrp pada browser
194
M rrunuBmr(ANr Rnoro BurrorlRadio Button adalah komponen yang digunakan untuk memilih sejumlahopsi, namun hanya satu yang dapat dipilih. Ada 2 jenis radio button, yaituRadio Button dan Radio Button Group.
Radio Button
Radio Button digunakan untuk membuat satu radio button untuk satupilihan saja. Biasanya Radio Button digunakan untuk menyetujui suatustatement.
Untuk membuatnya, ikuti langkah-langkah sebagai berikut:
1. Letakkan kursor pada Form.2. Pilih panel lnsert > Forms > Radio Button.3. Akan muncul kotak dialog lnput Tag Accessibility Attribute.
lsikan pengaturan atribut Radio Button lD = "setuju" dan Label ="Saya setuju dengan persyaratan di atas", kemudian pilih OK. 4'
4. Akan ditambahkan pada Form desain Radio Button.
Mengelolo Web lnteroktif
Akan muncul kotak dialog pembuatan Radio Button Group. lsikanparameter-parameter pembuatan Radio button Group, kemudianpilih OK.
Label Value
S+eharoo SpekarnoSsehartn SoefrartnHahihir E,.l Habibie
SET Susllo E;ar*harg Yudha.v.,,
La'y olrt Llsirng: ffii Ure treaks {<br> ieg"}
\./ I AEle
Gambar 5.17 Kotak dialog Radio Group
Simpan dokumen tersebut dan lihat hasilnya pada browser.
!:
fj N*vtab | ; Membu{Websitelntera-- fi i
Co&toh &adio Buttoa,*: Sat a sr.tuju demgae pe*s1'aratan diatas
Cr>stoh Radic Btdt*o Gro,lpSiapakh Fresidea S.tr ketiga ?
{'l,t $sekaco,it Soeharto,ldHrb,lri.
i. ssv
iEjsr*"*'r*ug"t
Tips & Trik Adobe Dreomweover CSS.5 r95
3.
5.
6.
Gambar 5.16 Hasil penambahan radio button pada Form
Atur properti Radio Button melalui Property lnspector sebagai-mana Anda mengatur Checkbox (Gambar 5.12).Simpan dokumen tersebut.
Radio Button Group
Radio Button Group adalah gabungan Radiountuk memilih hanya satu opsi dari beberapadapat mernbuat Radio Button Group denganberikut:
Letakkan kursor pada Form.
Pilih panel lnsert > Forms > Radio Button Group.
Button yang digunakanopsi Radio Button. Andalangkah-langkah sebagai
1.
2.
Gambar 5.18 Hasil pembuatan radio button pada browser
Tips & Trik Adobe Dreomweover CS5.5
[/ E114114 BAFn(Ar{ LsrfltdEN uList/Menu adalah komponen yang digunakan untuk membuat pilihanberupa daftar/menu. LisVMenu mempunyai fungsi yang sama denganradio button group, namun ditampilkan secara menu drop-down.
Untuk membuat List/Menu, ikuti langkah-langkah sebagai berikut:
1. Letakkan kursor pada Form.2. Pilih panel Insert > Forms > LisUMenu.3. Akan muncul kotak dialog pembuatan LisUMenu. Masukkan
parameter-parameter pembuatan LisUMenu, lD = "pendidikan"dan Label = "Pendidikan", kemudian pilih OK.
4. Pada Form akan ditambahkan desain LisUMenu yang belum terisisebuah daftar nilai untuk dipilih.
Mengelolo Web lnteroktif
Height: Digunakan untuk mengatur banyak nilai yangditampilkan pada List. Properti ini hanya dimiliki oleh TypeList.
Selections Allow Multiple: Digunakan untuk mengatur Listagar menerima Iebih dari satu penyeleksian. Properti inijugahanya dimiliki oleh List.
List Values: Menampilkan pengaturan (penambahanlpenghapusan) nilai yang ditampilkan pada LisUMenu.
Class: Menerapkan aturan CSS pada LisVMenu.
lnitially selected: Menentukan nilai yang ditampilkan per-tama kali pada LisUMenu.
ri r*;i-t ryt
*-j5u1 SLTFt^,-.I 3Li&I
1
I
Gambar 5.21 Kotak dialog List Values
Tambahkan nilai pada LisUMenu melalui tombol List Values...pada Property lnspector. Akan muncul kotak dialog pengaturandaftar pilihan.
Simpan dokumen tersebut dan preview hasilnya pada browser.
197
@
@
@
o@
Gambar 5.19 Penambahan desain LisUMenu pada Form
Gambar 5.20 Property lnspector n List/Menu
List/Menu: Menampilkan dan mengubah nama dan lDLisUMenu.
Type: Terdapat 2 lype, yaitu Menu dan List. Menu, daftarditampilkan secara drop-down dan secara default hanyasatu nilai yang ditampilkan dan dapat dipilih. List, daftarditampilkan secara drop-drown, namun nilai yang ditampil-kan dan diseleksi dapat lebih dari satu.
6.
7.
@
@
5. Atur properti LisUMenu melalui Property lnspector sebagai berikut:
F**$.EA-TSI5
tsffi1,@U*i$n'',, :,:,1::',1':'''':l,:SITA
-t1
II
r98 Tips & Trik Adobe Dreomweover CS5.5 Mengelolo Web lnteroktif
Gambar 5.23 Kotak dialog lnsert Jump Menu
@ Menu ltems: Menampilkan daftar pilihan dan URL yangdituju. Pilih [+] dan t-l untuk menambah dan menghapusitem menu. lkon segitiga ke bawah dan atas digunakanuntuk mengatur ulang posisi item menu.
@ Text: Menampilkan nama item dan mengubahnya.
@ When selected, go to URL: URL yang dituju ketika itemterpilih diseleksi.
@ Open URLs in: Jenis halaman yang digunakan untukmembuka URL.
@ Menu lD: Memberikan nama dan lD Jump Menu.
@ Options: Pilihan lnsert go button after menu akanmenambahkan tombol Go setelah komponen Jump Menuuntuk membuka URL. Pada Select first item after URLchange, URL akan langsung dibuka setelah ada pemilihanitem pada daftar.
Setelah memasukkan parameter, klik OK maka pada halamanakan ditambahkan sebuah desain Jump Menu.
iffidFile Edit Vieri, &eokmar*s Widletl To*tc Fi*lp
Contoh Tlpe List :
Gambar 5.22 Hasil preview pembuatan LisUmenu
MrrwBru{KANI Junap MrruuJump Menu memiliki fungsi yang sama dengan LisuMenu, namun setiapdaftar diberikan hyperlink sehingga akan membuka halaman/uRL yangdiberikan pada nilai daftar tersebut.
Untuk membuat Jump Menu, ikuti langkah-langkah sebagai berikut:
1. Letakkan kursor pada tempat yang diinginkan pada halaman.2. Pilih panel lnsert > Forms > Jump Menu.3. Akan tampil kotak dialog lnsert Jump Menu. Masukkan para-
meter-parameter Jump Menu sebagai berikut:
4.
200 , Tips & Trik Adobe Dreqmweover CS5.5
1
Gambar 5.24 Hasil penambahan Jump Menu pada halaman
Anda dapat mengatur properti dari Jump Menu melalui Propertylnspector sebagaimana pada Property lnspector LisUMenu.Simpan dokumen tersebut dan preview hasilnya pada browser.
#jis"*ss;i*ti{$, B#ffi+$#r;File E it Vifi# B**krnark lqfidgprr Fpols Flelp
Co**ohJtarp l{esru:*ptiotrs : Ipse* es buttofl der meru
iilk; i;;i;l I Gq{*1$
Optio*s : Setreetfirst item der {iRL churge
|lru**rj,.iiinl,i
i'ei;ni ffiiiBuku ternu ,* i
Gambar 5.25 Hasil pembuatan Jump Menu pada browser
Pada options pertama, pilih item terlebih dahulu, kemudian pirihtombol Go untuk membuka URL.Pada Options kedua, setelah item dipilih akan langsung mem-buka URL.
Mengelolo Web lnteroktif
Untuk membuat lmage Field, ikuti langkah-langkah sebagai berikut:
1. Letakkan kursor pada daerah form untuk menempatkan lmageField.
2. Pitih panel lnsert > Forms > lmage Field.3. Akan muncul kotak penelusuran gambar yang akan disislpkan.
Pilih gambar yang akan disisipkan, kemudian pilih OK.
Gambar 5.26 Kotak dialog Select lmage Source untuk memilihgambar image field
Akan muncul kotak dialog lnput Tag Accessibility Attribute. lsikanpengaturan atribut lmage Field, berikan teks pada lD = "Submit"untuk membuat gambar sebagai tombol Submit dan kosongiLabel, kemudian pilih OK.Pada halaman akan ditambahkan desain lmage Field sebagaiberikut:
C*rt"h I*-s; Fl"t-{-
Gambar 5.27 Penambahan lmage Field pada Form
6. Sirrr;xrrr rloktrmen dan lihat hasilnya pada browser.
241
5.
6.
4.
5.7.
8.
MerunmBA-,r(Ar{ I rrmcr Fl rmlmage Field digunakan untuk menambahkan gambar pada Form.Gambar ini dapat digunakan sebagai tombol, pengganti tombol submit,reset, dan sebagainya.
:,S.,ri-t$"i,.ffij*#+:ii$.t
Select fic nam lrom: {ft File systm
202 Tips & Trik Adobe Dreomr,veover CS5.5
#,irt;teu,E lS! 6Ii! ;l$$Eiiktit-F*rm - cpera
Fiie Edit View E+akt-tarkr k\iidgets T*sls Halp
,i[qr;giri:lid&.,ti
"; i
iJ t{e,*rt*b . i M*rnhuatWebrite lnfera... 1,S,. ,
Gambar 5.28 Hasil pembuatan lmage Field pada browser
7. Arahkan mouse pada gambar yang telah dijadikan tombol Submitmaka akan terlihat URL yang dituju gambar tersebut- URL ter-sebut didefinisikan pada Form.
File Field adalah komponen form yang digunakan untuk menampilkandirektori yang diseleksi. File Field biasanya digunakan meng-uploadsebuah file komputer client ke komputer server.
Untuk membuat File Field, ikuti langkah-langkah sebagai berikut:
1. Letakkan kursor pada Form untuk menempatkan File Field.2. Pilih panel lnsert > Forms > File Field.3. Akan muncul kotak dialog lnput Tag Accessibility Attribute. lsikan
pengaturan atribut File Field, misalnya untuk meng-upload fileJava berikan teks pada lD = "iavl" dan Label = "Masukkan FileJava", kemudian pilih OK.
4. Pada halaman akan ditambahkan desain komponen File Fieldberupa kotak teks dan tombol Browse.. ..
203
Gambar 5.29 Penambahan File Field pada halaman
5. Simpan dokumen tersebut dan lihat hasilnya pada browser"
i*ldit#,S:{i#iry#,S$#t#,ffi ,S1p;i.f ,"r$i+#ns,i
File Edil Vi.es Ec*kra*rks Widgets Trols
Gambar 5.30 Hasil pembuatan File Field pada browser Opera
6. Untuk menggunakan File Field, pilih tombol Choose... atau padabrowser lain adalah tombol Browse... untuk memasukkandirektori pada File Field.
7. Akan muncul kotak dialog penelusuran file. Telusuri file yang akandi-upload, kemudian pilih tombol Open.
& Trik Adobe Dreomweover CS5.5
.-,,1iq1*?
Idy RecBni
DocuoIBntE
ffiSeshtop
*fril;iid*-fi Demospinner
ffi DerncTab
& DernoTabel
fr Denr*TextFieid
{,1 DernoToggie$uttan
{f Benr*Toalbar
$ DernoTree
fi lnternalFrame
ii:
ldy Bseuments
u*fdy Cor{tfiuter
Mengelolo Web lnteroktif 205
halaman yang lain untuk diproses atau dibatalkan. Button terdiri dari 2jenis, yaitu Submit untuk memproses data dan Reset untuk membatalkanproses/mengosongkan data yang telah di-inputkan pada form.
lkuti langkah-langkah berikut untuk membuat Button pada form:
Gambar 5.32 Hasil penyisipan file pada File Field
M rNnu BAFI ]<RNl Burrror.t
Setelah mengisikan semua input pada form, selanjutnya Anda dapill
mengirim data tersebut atau membatalkannya. Button/tombol adalalt
salah satu komponen Form yang berfungsi nrengirim data tersebut ko
Letakkan kursor pada Form.Pilih panel lnsert > Forms > Button.Akan muncul kotak dialog lnput Tag Accessibility Attribute. lsikanpengaturan atribut Button, misalnya atribut lP = "kirirn".
Akan ditambahkan pada halaman sebuah desain Button.
f,o*rtoh E}tttf+n :L]Gambar 5.33 Penambahan Button pada halaman
5. Atur properti Button pada Property lnspector.PBOB€RTIf,$
. :l-rrim ,fl'Ra8ttfEnn ' .: ,,u,
Gambar 5.34 Property lnspector Button
Button name: Menampilkan nama dan lD tombol.
Value: Teks yang ditampilkan pada tombol.
@ Action: Aksi tombol saat ditekan. Ada 3 keadaan, yaituSubmit Form untuk menyetujui data yang ada pada form,kemudian mengirimkan data tersebut ke URL yang didefini-sikan Form; Reset Form untuk mengosongkan data yangtelah di-input pada Form; dan yang ketiga adalah Noneuntuk tidak memberikan aksi apapun saat tombol ditekan,aksi akan didefinisikan sendiri oleh pengguna.
@ Class: untuk menerapkan aturan CSS pada Button.6. Secara default Button mempunyai Action Submit. Untuk meng-
ubahnya menjadi Reset atau None, Anda dapat mengubah ActionButton melalui Properti lnspector.
1.
2.
3.
4.
8.
Gambar 5.31 Kotak dialog Open untuk meng-upload file
Hasitnya terlihat pada gambar di bawah ini, di mana
terisi direktori file yang telah dipilih.kotak teks
@
@
# p,$r!Idi.W'fr l$*,..lr}itrt,f+;9,,1:Q$grar' :..:'
File Edit Vievr Bnokma,rks l'Vidget* Tocts Help
jJ rrr** *u I ; Pdernuuat w,ebrile tntera-
206 Tips & Trik Adobe Dreomweover CS5.5
Label adalah suatu teks yang menjelaskan suatu objek. Pada pemba-
hasan di atas, dalam membuat komponen Anda diminta membuat Iabel
melalui kotak dialog lnput Tag Accessibility Attribute. Selain itu, Andajuga dapat membuat label melalui tool.
Untuk membuat label, ikuti langkah-langkah sebagai berikut:
1. Letakkan kursor pada Form.
2. Pilih panel lnsert > Forms > Label.
3. Tampilan Document Window akan menjadi mode Split, dan
kursor aktif di antara tag <label>...</label>. Anda dapat menulis-kan teks di antara tag label tersebut.
< label >teksLabe! </label >
Fieldset adalah sebuah komponen form untuk mengelompokkan kompo-
nen-komponen form lainnya. Untuk membuatnya, ikuti langkah-langkah
sebagai berikut:
1. Letakkan kursor Pada Form.
2. Pilih panel lnsert > Forms > Fieldset.
3. Akan muncul kotak dialog Fieldset. Pada kotak teks Legendisikan label untuk Fieldset tersebut, kemudian pilih oK.
Mengelolo Web lnieroktif 207
ffiipdata
Gambar 5.36 Penambahan Fieldset pada Form
Selanjutnya tambahkan komponen form yang lain di dalamnya.Letakkan kursor setelah teks "Biodata" pada Form.Tambahkan komponen lainnya, misalnya komponen teks fierdnama, alamat, dan tempat tanggal lahir.
5.
6.
B.
Gambar 5.37 Penambahan komponen pada Fieldset
7. Lihat hasilnya pada Live View dengan cara pilih tombol Live viewpada Toolbar Document.
Gambar 5.38 Tombol Live View pada Toolbar Document
Hasil pada Live view akan tampak seperti pada gambar berikut:
4.
Gambar 5.35 Kotak dialog Fieldset
Pada halaman akan ditambahkan desain FieldsetLegend.
,i,: i .,. 1".. ^.',. trl'i 1-r 'r" l"':;lj:,
Iq9, I i r:. ti
dengan labol
Gambar 5.39 Hasil penambahan komponen ke dalam Fieldset pada Live View
Tips & Trik Adobe Dreomlveover CS5.5
MEMBUAT VAL]DASI FORM DENGAr)'|
SPRYSelain komponen-komponen form standard, Adobe Dreamweaver CS5.5menyediakan komponen-komponen form Spry. Komponen-komponenform Spry memiliki kelebihan dibandingkan komponen form standard,yaitu komponen Spry memiliki sebuah metode validasi data yang tidakdimiliki komponen standard.
Terdapat beberapa tahap dalam membuat Widget Spry Validation, yaitu:
1. Membuat Widget Spry2" Membuat Aturan Data lnput Widget Spry
3. Membuat Validasi Data input Widget Spry
MrnreuArWocm Spnv
Tahap pertanna menggunakan widget Spry Validation adalahwidget Spry yang akan digunakan. Untuk membuatnya, ikutilangkah sebagai berikut:
1. Letakkan kursor pada daerah form.
2" Filih salah satu komponenlwidget pada panel lnsed >(Widget Spry).
Mengelolo Web interoktif
Akan muncul kotak dialog Input Tag Accessibility Attribute.Lakukan pengaturan pada kotak dialog tersebut.Akan muncul sebuah desain widget pada halaman form, misalnyayang dipilih adalah Spry Validation Text Field.
3.
4.
membuatlangkah-
Forms >
Gambar 5.41 Desain Widget Spry Validation Text Field
5" Pada widget spry terdapat 2 Property lnspector, yaitu propertylnspector Text Field sendiri dan Property lnspector Spry.o untuk menampilkan Property lnspector Text Fierd, sereksi
Text Field tersebut. Property lnspector Text Field samadengan Property lnspector komponen Text Field standar.
@ untuk menampilkan Property lnspector spry, seleksi tandaSpry yang terletak di atas komponen benvarna biru yangmenampilkan jenis Spry dan nama Spry.
MrMsuAr Arunnrl pnr4 lruptrr Wpcrr SpnyTahap kedua adalah membuat aturan spry sebagai acuan datam mem-validasi data input. Widget Spry yang paling banyak mempunyai aturanadalah Text Field. Dalam pembuatan aturan Spry, Anda akan banyakberhubungan dengan Property Inspector Spry.
Sebagai contoh, Property lnspector Spry Text Field beserta penjelasan-nya berikut:
I,SKERY
':: : . ., I .;t:' ..,'.. ' .i.:"
I".:3. Sgy vaFdatlan Psssword i *
.::.: : . .::.. :. ;
S-l;,l, *r*rv*,a*fisrlfrrtfrfl? ' i*i$,i w*'waat*,nruioerr,re lt
fl*sps.Er$5
'i":ij Sgry'Te.liridd l-."r.,',ieiy#-iid;#i -i
. ,:::., ::.I..r.r :rti
{qqhflrJe ttlls flEgel
,,Itne lf1eae1.FErlr-e,t
:
I Inrtial
v*at"u*,ffi,m" i{i, ,
t1- ;i;.1
st&rnit
flint ;
l,krtdue i
tgaxvdrc l
ir{r neg*eA
; i Enforce patErnGambar 5.40 Menu pembuatan Widget Spry pada panel lnsert
Gnrrrhnr 5.42 Property lnspector spry Validation Text Fierd
_-I
210 Tips & Trik Adobe Dreomweover CS5.5
Spry TextFietd: Menampilkan dan mengubah nama Spry'
Type: Jenis validasi yang diterapkan pada Text Field, beberapadi antaranya:
@ None: Text Field tidak memunyai aturan validasi.
@ lnteger: Text Field hanya menerima input berupa angka.
o Email Address: Text Field hanya menerima input denganformat alamat email. Contoh: [email protected]
O Date/Time: Hanya menerima format tanggal/jam.
Format: Hanya ada beberapa type yang menggunakan properti
ini. Format ini berisi item aturan penulisan yang dianut pada
suatu daerah.
Pattern: Pattern digunakan apabila Anda ingin membuat pola
tersendiri, yang berbeda dari pola pada Format. Caranya dengan
memilih Gustom Pattern pada properti Format.
Hint: Teks yang muncul pada Text Field saat ditampilkanpertama kali.
Min chars: karakter minimal yang diizinkan untuk diinputkan.
Max chars: karakter maksimal yang diizinkan untuk diinputkan'
Required: Nilai suatu komponen tidak boleh kosong, harus
diberikan sebuah nilai. Properti ini dimiliki oleh semua widget
spry.
Mengelolo Web tnteroktif
@ lnitial: kondisi sebelum data diinputkan. Ditandai denganwarna background Text Field putih.
@ Required: kondisi setelah data diinputkan. Ditandai denganwarna background Text Field merah muda.
@ valid: kondisi format yang dimasukkan benar. Ditandaidengan warna background Text Field biru muda.
@ lnvalid: kondisi format yang dimasukkan salah. Ditandaidengan warna background Text Field merah muda.
Untuk membuat validasi widget spry, Anda akan berhubungan denganproperti Preview States. Anda harus mendefinisikan t<onOisi seilapwidget, terutama pada kondisi Required dan lnvalid. Di bawah ini adalahgambar kondisi-kondisi Text Field yang sesuai dengan kondisi validasiform.
211
oo
glr
t:)
o0r
d')
al
MrMeunr Vru:onsl DATA lxpur Woom Spnv
Tahap terakhir adalah membuat validasi teks. Pada tahap ini, Anda di-
minta untuk menentukan kapan sebuah validasi dijalankan dan menentu-
kan kondisi yang terjadi apabila data input tidak valid/tidak sesuai dengan
aturan yang telah dibuat.
Untuk melakukan pengaturan pada Property lnspector terdapat properti
Validate On dan Preview States.
O Validate On: Kapan Text Field divalidasi/dikoreksi. Ada 3 pilihan,
yaitu:
o Blur: data dikoreksi saat Text Field kehilangan fokus.
@ Change: data dikoreksi saat data diinputkan.
o submit: data dikoreksi saat tombol submit dipilih.ilr Preview States: kondisi yang ditampilkan pertama kali. SebuirJr
Spry secara umum mempunyai 4 konrJisi, yaittl:
Gambar 5.43 Macam-macam kondisi awal Text Field
Pada gambar di atas hanya 2 kondisi yang mempunyai tanda berupainformasi peringatan. Pada kondisi lnvalid, Text fieid akan berubahmenjadi merah apabila format data input yang dimasukkan salah.Demikian pula pada kondisi Required, Text Fi;ld ikan berubah menjadimerah ketika tidak ada data yang diinputkan.
Anda dapat mengubah informasi peringatan kesalahan yang disampai-kan dengan mengganti teks tersebut seCara langsung.
213212 Tips & Trik Adobe Dreomweover CS5.5 Mengelolo Web lnteroktif
3. Aturlah widget tersebut dalam form sebagai berikut:
Gambar 5.45 Desain form buku tamu
4. Buatlah halaman baru dengan nama hasil.php.5. Buatlah desain untuk menampilkan hasil input pada dokumen
"bukuTamu.html" dengan tabel agar lebih rapi. Sebagai contoh,desain berikut:
: iffifs,*
Gambar 5.44 Hasil pengubahan peringatan kesalahan dan hasilpreview pada Live View
Gambar 5.46 Desain output buku tamu
6. Tambahkan pada tiap sel kolom nama, alamat, dan lainnyadengan kode PHP.
7. Letakkan kursor pada kolom nama baris kedua.8. Pada panel lnsert pilih tab PHP > Echo.
M,rnltnunr BUxI;TAUU
Untuk mengaplikasikan Validasi Form akan dibuat sebuah form bukutamu sederhana dengan nama "bukuTamu.html".
Untuk membuat form buku tamu, ikuti langkah-langkah sebagai berikut:
1. Buat dokumen baru, simpan dengan nama "bukuTamu.html".
2. Buatlah beberapa widget dengan properti berikut:
TABEL 5.1 Beberapa widget Spry form untuk membuat buku tamu
bukutamu Action="hasil.html",
Method="POST".Form
nama Nama Hanya menerima, Harus
di-isi
Spry Validation Text Field (30)
alamat Alamat none Spry Validation Text Field (40)
url URLMebsite Penulisan URLMebsite Spry Validation Text Field (30)
email Email Penulisan Email, Harus
di-isi
Spry Validation Text Field (30)
komentar Komentar Harus di-isi Spry Validation Textareafl
kirim Kirim Submit Button
batal Batal Reset Button
214 Tips & Trik Adobe Dreomweover CS5.5 215
| #,auru',ru*ut"t0-'""I
. !, e E.Ji., \rierv 9eol:mark:
: llerYiaE : ._-, BUI:U lamu:
{It \f.r ,1r ,," li"1 "/'?-"i j:::rl
, h Ap:lirlcra ihcst/AriahS i i*,Jbukutnrlu.htm I : o j i l..L
lrFi ,e,Bd,.lriMit!4at*,idgers T<,ol: Help
,ai
Gambar 5.47 Menu Echo untuk menambahkan kode PHP
9. Pada dokumen akan terbuka mode kode dengan kode PHPsebagai berikut <?php echo ?>.
Tuliskan setelah kata echo "$nama", yaitu variabeloleh Form pada dokumen "bukuTamu.htm!".
Ulangi langkah 7 sampai 10 pada kolom alamat, url,sehingga perintahnya sebagai berikut:
<td bgcolor="#66FF99"><?php echo $nama; ?> <ltd>
<td bgcolor="#66FF99"><?php echo $alamat; ?></td>
<td bgcolor="#66FF99"><?php echo $url; ?></td>
<td bgcolor="#66FF99"><?php echo $email; ?></td>
<td bgcolor="#66FF99"> <?php echo $komentar; ?> <ltd>
12. Setiap kolom yang ditambahkan kode PHP akan terlihat ikon PHPi#Hfl (Gambar 5.46).
13. Simpan kedua dokumen tersebut dan jalankan pada browser.Masukkan nilai dengan nilai yang benar, kemudian pilih Kirim.
h I'J, .;rIc.calhI t'.;Ariah5rte.rhasrI php B,- Shcnr lrra.Se:
Gambar 5.48 Hasil pembuatan buku tamu pada browser
14. Akan muncul hasil.php setelah tombol Kirim dipilih.
{i! L,L:[Ji isi Lr 1.n..:.lpelqFile i!li: ,,*,, t*t*r"r,i, t'"',CAets i+ris H*lp
].;I, :Ar: , C.JTFLi: SUKL TaqU ,N, .
'':l ,l\anr"i .Alanrat L,RL Eonil K.;'lredar
.lbuA:islr $eoaraag Hl***,,*, abuasiah@?noil.o- 3m*t""*
Gambar 5.49 Output hasil penginputan buku tamu pada hasil " php
10.
11.
yang dikirim
dan lainnya
M ENGGUNAKAN ACTION BEHAVIO RSAction Behaviors adalah suatu aksi yang dibuat deng an fungsrJavaScript. Cara kerja Action Behal,iors adalah saat pengguna rnem-berikan suatu event/kejadian/tindakan terhadap halarnran wc:bsi{s nrak;rakiln rlirc:;Jlort:-; rlenqan sebu;rtr aksi. Denclan (lerrrrkr.rn, :;ebrr;rh wetls;ltc
I
217216 Tips & Trik Adobe Dreomweover CS5.5
akan lebih interaktif dikarenakan adanya hubungan timbal balik antarapengunjung dengan sebuah website.
Dari penjetasan di atas dapat disimpulkan' bahwa Action Behaviorsmempunyai dua komponen utama, yaitu Event dan Action. Event adalahsuatu tindakan pengunjung terhadap halaman website, misal meng-klik(onclick), saat pointer melewati objek pada halaman website(onMouseOver), atau saat proses loading berjalan (onLoad) dan lainsebagainya.
Action adalah respons yang dijalankan saat terjadi event, misalnyamembuka browser, menampilkan atau menyembunyikan layer, memain-kan suara, dan sebagainya.
AclOtrt mLJnvnSCmPtAction Call JavaScript memungkinkan Anda memanggil fungsi atau kodeJavaScript saat terjadi event. Sebagai contoh adalah tombol back dannext yang memanfaatkan history dari web, kemudian dipanggil oleh kodeJavaScript.
Untuk membuatnya, lakukan langkah-langkah sebagai berikut:
1. Sisipkan objek untuk dijadikan tombol navigasi back dan nextpada halaman web.
S.
2" Seleksi objek tersebut untuk diberikan Action Call JavaScript.
?;r&?
Gambar 5.50 Penyeleksian objek sebagai tombol back
3. Pilih panel Tag Inspector > Behaviors > + > Call JavaScript.
Mengelolo Web lnteroktif
4.
BA&E**&PEfiYEfr
ffi.ffi n*iii"r-'";;*6ffi i. :,l
i
!I
l
1
I
J
IIjiI
iJ
Ij
I
frlliaua5criftChange Prop*rty
{h,erk F[uEin
Gambar 5.51 Menu Call JavaScript pada panel Tag lnspector
Akan muncul kotak dialog Call JavaScript. Isikan denganJavaScript sebagai berikut:
if (history.length > 0){history.backfl}
kode
Gambar 5.52 Kotak dialog Call JavaScript
Tampilan pada Tag lnspector akan tampak seperti berikut:
:rS€,EffiEFEgrS*(
lffi nen".i-i']116' ,
Gambar 5.53 Hasil penambahan action Call JavaScript pada Tag lnspector
6. Ubah event onClick dengan <A> onClick. Caranya, pilih eventonClick maka akan tampil menu popup, pilih event <A> onclick.
218 Tips & Trik Adobe Dreomweover CS5.5
<A> enCtick l', : i
<A.> onshlcllffi isiuiAF onFgrcus r*;rl
c.q:> onBlur cs
{A.}$r?l$i{kF .-'
.::AF onKeySgdrrr<A:. nnH'=','Prpce
<.&:-onF,e-y*Up{"i } fifilr{{'use$*q:9.;'snl'l,lugeNr F
Gambar 5.54 Mengganti event onClick menjadi <A> onClick
Ulangi mulai langkah kedua, pilih objek satunya untuk membuattombol Next.
lsikan kode JavaScript berikut untuk membuat tombol next:
javascript: history. go(+ 1 )
Simpan dokumen tersebut dan jalankan pada browser.
# ,call :;11;1ti1e. :,up r;File gdit 'lrietry Eoc.lwarl,:: \iJidgets I*olt l-lrlp
ry,ffi
Mengelolo Web lnteroktif
10. Arahkan pointer mouse pada gambar yang ditambahkan actionCall JavaScript maka akan terlihat pada status bar browser teksjavascript:;.
ACitoNClr *cg,:P.ffiffiRTy
Action Change Property digunakan untuk rnengubah properti layer saatada event yang dipicu oleh pengguna. Properti yang dapat digantimisalnya warna background.
Untuk membuatnya, lakukan langkah-langkah sebagai berikut:
1. Buatlah sebuah layer yang mempunyai warna background dansebuah gambar di tengahnya.
219
7.
B
9.
2.
Gambar 5.56 Penambahan gambar pada layer
Atur browser yang mendukung dieksekusinyamelalui panel Tag lnspector > + > Show EventsLater Browser.
JavaScript iniFor > 4.0 And
Gambar 5.55 Hasil pembuatan ;rctiort Oirll J;rv:rSr:ript
220 Tips & Trik Adobe Dreomweover CS5.5
Gambar 5.57 Pemilihan browser yang kompatibel
3. Seleksi gambar yang akan ditambahkan action Change Property.4. Pilih panel Tag lnspector > Behaviors > + > Change Behaviors.
Typeofelernent, ffi'-*-* - ***;-ff
t,.,,,.-.,.-...-^,.,..,_-- .--..._....,.,......--..M
Errment ID: *i:@$:iiil,.it:rJlrrfii:iiLi#itiiiiiiffiProperry{: f$iselertl ffi
Gambar 5.59 Kotak dialog Change Property
Type of element: pilih elemen yang akan diubah properti-nya. Dalam hal ini adalah DIV sebagai tag dari pembuatanlayer.
Element lD: pilih div "apDiv1" karena layer menggunakantag div dengan id apDivl.Property: isikan pada kotak Select = backgroundColor,karena properti yang akan diubah adalah warnabackground.
€) New value: isikan warna biru (#069).Pada panel rag lnspector akan tampil penambahan behaviorssebagai berikut:
@
@
o
6.
5.
Gambar 5.58 Menu Change Property pada panel Tag lnspector
Akan muncul kotak dialog Change Property. Atur propertiakan diubah, kemudian pilih OK.
Gambar 5.60 Penambahan Behaviors Change Property pada panel Taglnspector
7. Ubah event onMouseDown rnenjadi <A> onMouseOver.B. simpan dokumen tersebut dan lihat hasilnya dalam browser.
Arahkan pointer mouse pada gambar, otomatis warna backgroundakan herubah karena event yanE dipilih adalah saat mouserrrorrrftrkati gambar.
Iolo Web lnteroktif
yang
222 Tips & Trik Adobe Dreomweover CS5.5 Mengelolo Web lnteroktif 223
pada daerah browser. Drag AP Element biasanya digunakan untunmembuat puzzle atau sesuatu yang dapat dipindah-pindah.
Untuk membuatnya, ikuti langkah-langkah sebagai berikut:
1. Buat 2 buah layer dengan warna latar yang berbeda.
ffi1{_hqirige-trj,i5pqfrji,Uln_teinetExplerer . :
r"+*1*"1'.,&ni !:, .
,*-T j ,
ir,;,r+ r,i.:i,...*ln * i& htttr,'lloc:lhqstlAsiJ.r * i +tr:
fi-F Local intran€t 4, l*B?L
Gambar 5.61 Hasil pembuatan Action Behaviors Change Property pada browser
ffi Change Fropelty.- lntemet fxplorer
ti:* t,''* ",'Hl h*.f]lll"":,:ll*leHj i*r' :.l
-- -- - l_*'#{i 4(
I # Chanse prore*r
;${ Local intranet 4,rffi'tr v
Gambar 5.64 Menu Drag AP Element pada panel Tag lnspectorGambar 5'62 wama background berubah saat pointer diarahkan ke gambar 4. Akan muncur kotak diarog Drag Ap Erement. Atur properti rayer
; yang ditambahkan Drag AP Element sebagai berikut:
Acroll DnncAPEurururAction Drag AP Element digunakan untuk membuat layer atau Ap Divyang fleksibel, di mana pengguna dapat memindahkan layer tersebut
Gambar 5.63 Pembuatan 2layer dengan warna latar berbeda
2. Seleksi body website karena action Drag AP Element akanditambahkan pada body.
3. Pilih panel Tag lnspector > Behaviors > + > Drag AP Element.
TATi IHSFECET}E
i Ch,eck Flugin
; Draq AP Elementi -t_)1 -.. vlti Efferti .} )ii GoToURL
224 Tips & Trik Adobe Dreomweover CS5.5 Mengelolo Web lnieroktif 22s
6. Panel Tag lnspector akan tampil seperti berikut:
@
@
@
Gambar 5.65 Kotak dialog Drag AP Element
AP element: Menampilkan nama Iayer yang akan diaturpropertinya.
Movement; Menentukan aturan perpindahan layer" Ter-dapat 2 nilai, yaitu Unconstrianed (tidak memiliki batasan)dan Constrained (memiliki batasan).
Drop Target: Menentukan letak perpindahan layer. Masuk-kan nilai Left (menentukan letak posisi kiri) dan Top(menentukan letak posisi atas) atau pilih Get currentposition untuk memasukkan nilai posisi secara otomatis.
Snap if within: menentukan jarak terjauh yang dapatdicapai layer untuk menempati posisi yang ditentukan.
Apabila nilai Movement: Constrained maka akan tampilbatasan Up, Down, Left dan Right. lsikan nilai batasantersebut.
,gr;s APEtemEil4'J,iiilhiii#;li:lr'rii-,:,..,i.+.n /+.ri.4,,"'':',''rr1-:{,."i*':i..'l:iI.,.i'
i easic I ndvanced j
Gambar 5.67 Penambahan Drag AP Element pada panel Tag lnspector
7. Simpan dokumen tersebut dan lihat hasilnya pada browser.
fl s:,,.81p,!, A glEllfr cn tlr; Mgfi ! ta., Firr{ex
lile Edit Urew Hi5tary $ookmark loalr HelF
:T:T-::r::l':ir.---l 'iIIffi Mo;t Yr:itrd + Getting Sterted ;g!; l-aert Xeadtines
Gambar 5.68 Hasil pembuatan Drag AP Element
Arahkan pointer mouse pada layer 1/apDivl, kemudian drag dandrop layer tersebut.
@
@
8.l.'lo!'eflterit:
0rsp brgEt:
Snap if lrrithin:
i"m, f** l r*,i_ l- i#S,__--a ..-@l;
l-**lPixul, of drop tar-oet
Gambar 5.66 Kotak dialog Drag AP Element nilai Movement Constrained
5. Pilih OK untuk menerapkan pengaturan. Lakukan pengaturanpada layer 2 dengan memilih pada AP Element div "apDiv2".
Mcuement lJ"*d#*d-l i;jBnop rarEetr reft: f-: -*0, i.:jffig{*_E$l,Mi
5nep if wi$rinr , ]pxufu X*op Largpt
inr..#iirirr. ;il" -
'-dr
-- l
226 Tips & Trik Adobe Dreomweover CS5.5
Gambar 5.69 Layer 1 berpindah posisi setelah di-drag
Acroru Oprru BnowsER WINDow
Action Open Browser Window digunakan untuk membuka browsersecara otomatis saat ada event yang dipicu oleh pengguna. Jendelabrowser tersebut dapat diatur ulang panjang, tinggi, scrollbar, dan lainnyamenggunakan fungsi JavaScript.
Untuk membuat Action Open Browser Window, lakukan langkah-langkahsebagai berikut:
1. Pilih objek yang akan ditambahkan Action open Browser Window,misalnya bodylhalaman website.
2. Pilih pane! Tag lnspector > Behaviors > + > Open BrowserWindow.
Mengelolo Web lnteroktif 227
Ti{ls:s#G$FE{if,ffi:
d;r;;;;;;:iffi iliri,;i
Ch,*.rk Plugln
Era.g AF [lernent
Eff*ctr
Gc ?s URt-
.rr-:ril p {r.lfrr.l
Jr,,rx 1, t**rr'.1 tirr
Gpqn BrfrSlqrlffindoq*
P+;p hfdl;s.
Gambar 5.70 Menu Open Browser Window pada panel Tag lnspector
3. Akan muncul kotak dialog Open Browser Window.
LJRL to disptay: inurruianiu html - f ia;;**.r J
trt*indsy?*'Am, lfl__j \*Jinde!1.heisht: ffi__".lAtlrihules: I*, Ha!:i-qatisn unhar II, uenu bar
fl}i ucatinn tnohar .|.Il scr*lluars as neeueu
i,fii siut " hu, il nesin handles
*irkdsr.dnaffler ]B-k"T-"r, *
-]i.-..-.,...-................-............ .............................,l
Gambar 5.71 Kotak dialog Open Browser Window
Pada URL to display isikan nama dokumen yang akan dibukapada browser dengan JavaScript.lsikan Window Width dengan nilai yang menyatakan lebarjendela, Window Height untuk mengatur tinggi jendela.lsikan Attributes dengan pilihan sebagai berikut:
@ Navigation toolbar: untuk menyisipkan berbagai tool untuknavigasi seperti Back, Next, Home, Reload, dan lainnya.
G) Location toolbar: menambahkan toolbar untukmemasukkan nama url.
(") Stautus bar: menambahkan status bar pada browser.
4.
5.
6.
hft p:#l +r:,1 hostr''Aria hSitq&'
ffi M,ost'riiritea lr Getting Start-Ed ir*; Late* Headlinas
228 Tips & Trik Adobe Dreomweover CS5.5
@ Menu bar: menambahkan menu bar pada browser.
@ Scrollbars as needed: menambahkan scrollbar, jika lebarjendela browser Iebih kecil dari halaman web.
@ Resize Handles: mengizinkan pengguna mengatur ulangukuran window.
lsikan Window Name dengan nama jendela yang akan ditam-pilkan.
Pada panel Tag Inspector akan ditampilkan penambahan OpenBrowser Window pada tag body.
4ffis$#8$,fl$#S
Gambar 5.72 Penambahan action Open Browser Window pada panel Taglnspector
Mengelolo Web lnteroktif 229
Simpan dokumen tersebut dan jalankan pada windows makasecara otomatis akan membuka 2 window. Window yang pertamaadalah window utama yang Anda jalankan dan yang keduaadalah window yang dibuka melalui fungsi JavaScript. Windowkedua otomatis terbuka, dikarenakan dalam contoh event yangdigunakan adalah onLoad (saat halaman website dibuka).
Gambar 5.74 Jendela browser yang dibuka Open Browser Window
Acron Popup MrssnorPopup message adalah sebuah kotak pesan yang ditampilkan saatterjadi event. Popup message dibuat dengan JavaScript yang diterapkanpada web browser.
lkuti langkah-langkah berikut untuk menampilkan Popup Message:
1. Pilih objek yang akan ditambahkan Popup Message.
Gambar 5.75 Ponyeleksian objek yang akan ditambahkan Popup Message
2. Plllh lrnnol Tag lnepector > Behaviors > + > Popup Message.
9.
7.
8.
Gambar 5.73 Jendela browser yang diberi Open Browser Window
230 Tips & Trik Adobe Dreomweover CS5.5
T.#GTffi*E.jtrE8R:mrcff .'. .ii ir i ir::,i:ii:ii.ii;;li.r.:
i#ffiffinj EePl;io1s ras <tme>
i
I
tail jaua5cript
{Flan,ge Pr*per$r
thrck Flugin
r#t6o To UflL
Jr.!riiil l,,j*** :j;{)
#pen EroE*'rer Wi ndce"",r
M*s:age
Gambar 5.76 Menu Popup Message pada panel Tag lnspector
Akan muncul kotak dialog Popup Message. lsikan teks pesanyang akan ditampilkan jika pengguna membuat event, kemudianpirih oK.
!'_"__'-.,'__'_"_ _'-"_"'_"
&lessagE: i drbc'leht<an rnemru" mengkoor dan menyebarkan i
i halaman ;ni. , . i
ria '.i
Gambar 5.77 Kotak dialog Popup Message
Pada panel Tag lnspector akan ditambahkan sebuah event danaction sebagai berikut:
Tfr&Tffitr.ECT }[t
lffi'ffii:i i S.# : 1.. .+ .. +: ,*tu \g-., ,1, ,:,:? , ,, ' '
i o Si Fu+x-rp r4essagej
-1
Mengelolo Web lnteroktif 231
5. Simpan dokumen tersebutKlik pada banner yang telah
dan preview hasilnya pada browser.ditambahkan Popup Message.
3.
Gambar 5.79 Hasil pembuatan Popup Message
4.
Acron SHow-H ror ErcnarNTS
Action Show-Hide Elements digunakan untuk menampilkan danmenyembunyikan elemen. Action ini biasanya digunakan menampilkaninformasi yang dipicu oleh event yang dilakukan pengguna. Sebagaicontoh akan dibuat sebuah gambar yang apabila ada pointer mouseyang mendekat akan menampilkan informasi dan apabila pointer mousemenjauh informasi akan disembunyikan.
Untuk membuatnya, ikuti langkah-langkah sebagai berikut:
1. Buatlah halaman baru, lalu tambahkan gambar dan sebuah layeryang berisi deskripsi.
Gambar 5.78 Penanrbahan event dan action pada panel Tag lnspector
l232 Tips & Trik Adobe Dreomweover CS5.5
Gambar 5.80 Hasil pengaturan elemen
Ubah nama layer menjadi "deskripsi" dan ubah visibility menjadi"hidden" melalui Property lnspector. Properti hidden menyebab-kan layer disembunyikan saat dokumen ditampilkan padabrowser.
Gambar 5.81 Mengubah Properti Layer melalui Property lnspector
Selanjutnya seleksi gambar untuk ditambahkan action Show-HideEIements.
Elements.
Mengelolo Web lnteroktif 233
i+m"wi***; .t"q*Mi', "r-.=.- *-:1, '- :': '' l'.... '..''== .6',;i-:*n;j:,r*.r'rj ,,. ..-.,ji:,:
I;_;.*.:.j_...,r1r"4-- .;*!r-*r:,'.,^*iJi 1'1 :.,..
i*- -j cal iavasrripr
i-"--{Flanqe Praoerh, i I'it
il'reck Ptuein i iItr r,: .&i i-l<"r.r s,rt ,
i :*T': 'i: Ge Xr U,EL ;
tss6{#iipEci{}ft
j j .:J.:!r:r L.lririillt:i : .:rii,)i: i,{ri.l:ii,:O
i i C,pen Br*reerWindour
i i Feptrp Mtrroge
i Frel.na lrnages i
i 9et Nav Ear h,rage i
; SetText ) :
.-- *-.*; Shorarniae Ehmmts I
ffi swptr.rase B I
Gambar 5.82 Menu show-Hide Elements panel rag lnspector
5. Akan tampil kotak dialog Show-Hide Elements.6. Pilih layer deskripsi, lalu pilih tombol Show maka akan ditam-
bahkan properti (show) pada layer tersebut.7. Pilih oK untuk menyetujui perubahan dan menutup kotak dialog.
Gambar 5.83 Kotak dialog Show-Hide Elements
Ubah event pada panel Tag lnspector menjadi <A>onMouseover yang berfungsi menangkap event saat pointermouse berada di area gambar.Ulangi langkah mulai nomor 3. Apabila muncur kotak dialog, pilihtombol Hide untuk menambahkan action pada layer.Utrah event pada panel rag lnspector menjadi <A> onMouseoutyln(l lrorfunqsi mendeteksi event saat pointer mouse mening-1;lrlknn iuot I r;irlnbar.
2.
3.
4.
8.
9.
10.
]fi .
tryd*iry,la$b*#u,.,.,,: ,Ct*, $ffi'.i,,,,
EE@Sryrer*A@,yrye@uedar#
eeed ciP*'HYu ' '
olo Web lnteroktif234 Tips & Trik Adobe Dreomvrecrver CS5.5
Hasilnya, pada Tag lnspector akan terlihat 2 action Show-HideElements dengan event yang berbeda.
rAE IHSPEflY$fq
klu*p.*.,,,,.Il€g. i$ .$I:{B SE, i + - "&. y
...t:...:..? : , ..:,l r,, .:rr .. ,:.,,.:,,,:";yu:i1iJ*I1L+41t{{F1..!4.el;i:*-a.: eaiTy:1e411",s.:i*kr-1dntn:rya.*:r1i:a
,E..-#ffiI,,tr- ilffi,Iffiffi} ffi -
}S$1.'lr:':.1i
sAr-. enHcuieOver #* Shar*+tlde Bements
Gambar 5.84 Penambahan 2 action Show-Hide Elements
Simpan dokumen dan lihat hasilnya pada browser. Arahkanmouse pada gambar yang telah ditambahkan action Show-HideElements.
Gambar 5.85 Pointer mouse diarahkan pada gambar
Gambar 5.86 Pointer mouse menjauhi area gambar
AC .PffiSoUNb
Action Play Sound digunakan untuk memainkan suara yang dipicu olehsebuah event, misalnya saat halaman ditampilkan akan-terd'engar suarapembukaan website atau saat pointer diarahran pada menu ierdengarsuara.
Sebagai contoh akan dibuat suara terdengar ketika halaman websiteAn9., di-load pada browser. Untuk membuitnya, ikuti langkah-langkahberikut:
1. Pilih body halaman sehingga pada panel rag lnspector terdapattulisan Tag <body>.
2. Pilih panel Tag lnspector > Behaviors > + > -Deprecated >Play Sound.
3. Akan muncul kotak diarog play sound. Masukkan suara yangakan dimainkan saat halaman website di{oad oleh browseimelalui tombol Browse, kemudian pilih OK.
11.
12.
ffi nnos.tViUtea |l G.tt;ng Star*d iia-. Latest Headlines
Eetryaindakyaustslrffitffbit dari tiffi, Iedt begitu
cerd *rnggr& indatr
dbadmesata.BeI a#a&AffigraeA$ae
lwlgelffi&€rfus*sfs#t&
l
I
236 Tips & Trik Adobe Dreomweover CS5.5
Gambar 8.87 Kotak dialog Play Sound
Pada halaman web akan ditambahkan tkon plug-intanda telah ditambahkan action Play Sound.Pada Tag lnspector ubah event menjadi onLoad.
sebagai
Simpan dokumen tersebut dan jalankan pada browser maka akanterdengar suara ketika halaman ditampilkan.
Acroru Pnrlono lvncesPrelcad images digunakan untuk menampilkan gambar secara langsungpada halaman web dengan mempercepat waktu loading untuk memuat-nya sehingga saat memuatnya terlihat tanpa proses loading terlebihdahulu. Preload images biasanya digunakan untuk swap images padaanimasi gambar yang lebih dari satu dan tampil secara bergantian.
Anda dapat membuatnya dengan mengikuti langkah-langkah berikut:
1. Seleksi gambar yang akan diberikan action preload images.
lmages.3. Akan muncul kotak dialog Preload lmages untuk menambahkan
daftar gambar yang akan ditambahkan action preload images.4. Pilih tombol Browse untuk menelusuri gambar yang akan
ditambahkan preload images.5. Pilih + atau untuk menambahkan atau menghapus daftar
gambar preload images.6. Akan terlihat pada daftar Preload lmages nampak daftar gambar
yang ditambahkan.
Gambar 5.88 Menu menambahkan action preload lmages
i ""*!+ i"ii4"
5"
6.
Gambar 5.89 Kotak dialog Preload tmages untuk menambahkan daftar gambar
7. Pilih oK untuk mengaplikasikan preload lmages dan menutupkotak dialog.
Acloru ErrrcrsEffects adalah sebuah perubahan pada objek saaUsetelah menerimaevent. Action Effects dapat ditambahkan pada objek berupa gambarataupun yang lain. Untuk menambahkan Action Effects, lakukan lJngkah-langkah sebagai berikut:
1. Pilih objek gambar yang akan disisipkan Effects.
olo Web lnteroktif
Iips & Trik Adobe Dreomweover CS5'5 Mengelolo Web lntercrktif 239238
6ru-ur:t Shrinl:
Tareet Elenleni:
Effect duratron:
Eflert:
Sirr rrk i om:
Shrinh to:
5hrrr-rl io:
..CurrErt SEiErtrun;,
1,:rt,1 nriliiseconCs
Lt! il Ii
1,-'1u ii'ri" :.*.
.itj ':'G , st.....
(enter : r
,'_,uurtr tsritrLiGambar 5.90 Penyeleksian objek gambar
Pilih pada panel Tag lnspector > Behaviorspilihan efek.
li i Check Plusin
M irrad.I,,!Eltn:*i",t
Appear/Fade i f*ott )
Blind I Go ?o URL
&o*/shrink H I lili'igt I'J*rrr' I
;;;;;;; B l i:*p i,,,, r,:,is I i:1Shake I OP"" BrowserWinds#
Slide I FoPuP Message 1.. ^
#
fuuish I Preload lrnager
Gambar 5.91 Menu Effects pada panel Tag lnspector
Akan muncul kotak dialog Effects, pilih efek yang akan.ditambah-
kan paoa objek, misalnya Effects Grow/shrink untuk menam-
bahkan efek memperbesar atau memperkecil sebuah objek.
>+>Effects>2.l_
Gambar 5.92 Kotak dialog GroMShrink untuk mengatur properti efek
O Effect duration: Durasi tampilan efek.
@ Effect: Ada 2 pilihan efek, yaitu Shrink untuk membuat efekmemperkecil gambar, dan Grow untuk membuat efekmemperbesar gambar.
@ Shrink from: Besar ukuran awal gambar.
O Shrink to: Besar ukuran akhir gambar. Untuk efek Shrink,besar Shrink from lebih besar dari Shrink to, kebalikan dariefek Grow.
O Shrink to: Arah memperkecil/memperkecil gambar, secaradefault adalah Center.
Pilih OK untuk mengaplikasikan GrowlShrink dan menutup kotakdialogLihat hasilnya melalui Live View yang terdapat pada DocunrentToolbar.
1.
5.3.
G;rttllt:tt ir !).1 ( )lrlck rl;ttttl)ilr llloll(l()r:il :;rllcl;tJt ttt,:ltrl;tlr;ll 1Vr'1lt kllk 1l()lt',rl
240 Tips & Trik Adobe Dreomweover CS5.5
AcrtONSEr,T :,6F S'BAR
Aksi Set Text of Status Bar digunakan untuk menampilkan teks pada
status bar browser yang membuka halaman website. Untuk membuat-nya, lakukan langkah-langkah berikut:
misalnya pada body
+ > Set Text > $etText of Status Bar.
3. Akan muncul kotak dialog Set Text of Status Bar.
4. Masukkan pesan/teks yang akan ditampilkan pada status bar fieldMessage.
set;Ygr*1.$taiily:,Pa.i$iffiXl+;l#1l:,i.t!.:.','r;,:,,. ...,,':':..',l
F{Ess6se,'1!i;nrnia,I'r-{.i,;h.11l-iltiij;t."*i$;-f 1L;l*rlFiftTE; t.lot s$ brol#sers e.pFsrt €haftgi?rg statis har text andsonre h owsers depend on ustr prekenies to allo'ov thie
functimdity.
Gambar 5.94 Kotak dialog Set Text of Status Bar
I httpTi'lsctslhost:AsialrSi:e,iirrdex.html
1. Pilih objek yang akan ditambahkan aksi ini,halaman dengan event onLoad.
2. Pada panel Tag lnspector > Behaviors >
5. Pilih oK untuk mengaplikasikan aksi dan menutup kotak dialog.6. Simpan dokumen tersebut dan lihat hasilnya pada browser. Lihat
pada bagian kiri bawah browser terdapat teks/pesan yangditambahkan sebelumnya.
Acnom,,$ffi T'Extr Or''Texr FrmAksi Set Text of Text Field digunakan untuk memberikan nilai ke dalamtext field pada form. Untuk melakukannya, ikuti langkah-langkah berikut:
1. Seleksi text field pada form yang akan ditambahkan aksi Set Textof Text Field.
2. Pilih panel rag lnspector > Behaviors > + > set rext > set Textof Text Field.
3. Tampil kotak dialog Set Text of text Field.4. Pastikan pada Text Field, telah sesuai dengan field yang akan
ditambahkan aksi ini, sebagai contoh field teks "nama".5. lsikan pada text area New text sebuah teks yang akan
ditambahkan pada field "nama".
Gambar 5.96 Kotak dialog Set Text of Text Field
Pilih oK untuk mengaplikasikan pengaturan aksi dan menutupkotak dialog.Melalui panel rag lnspector, ubah event sesuai keinginan Anda.Misalnya onFocus, ini berarti menampilkan teks/pesan tersebutapabila field teks mendapat fokus/kursor berada pada field tekstersebut.
6.
7.
olo Web lnteroktif
[*ffiEffi
Gambar 5.95 Hasil penambahan action Set Text of Status Bar
242 Tips & Trik Adobe Dreomweover CS5.5
ffir$,TTfi&rIS*FS{f-rf,€fi
, :::'.:"*=i#s:,1,,+,r. ,i .::. .' l:. ..:t:r""#*d-'-'G
Gambar 5.97 Panel Tag Inspector untuk mengubah event
Simpan dokumen dan lihat hasilnya pada browser.
Pada saat dualankan, field teks "nama" tidak mempunyai nilai/kosong. Letakkan kursor pada field tersebut maka secaraotomatis akan memunculkan nilai teks yang Anda definisikan.
Gambar 5.98 Hasil penambahan aksi Set Text of Text Field saat kursordiletakkan pada Text Field nama
FemHtHfampai di sini Anda telah belajar banyak tentang tip dan trik AdobeDreamweaver cs5.5 untuk membuat web. Penulis berharapmateri yang telah disampaikan dapat dipahami dengan baik dan
mudah. Jika Anda menemui kesulitan dalam mempelajari materi dalambuku ini, Anda dapat mengirimkan pertanyaan melalui atamat penulisyang tertera di bagian Kata Pengantar.
Selamat belajar!
8.
9"
s, aqr.{$iai,,.peqiiii: .ill:i,i
Srlishor lmaqes
KOTIPUTER, DESAN wEBISBN: 978-97S29-3227-0
|lilffiil[ilillil|ilnuilliltillila97 92