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 ................


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


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.


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;


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.


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


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.


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:


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


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


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.


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,


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


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


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.


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


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


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


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


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


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.


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.


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


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.


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


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>" (&gt), 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


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.


@ffiE@EE

E@

ETEE


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



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',


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.


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


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


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


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


@

@

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


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.


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


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


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.


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.


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, &lt*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.


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.


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


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.


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:


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.


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


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


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.


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.


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.


MempercantikHtlfrmm*r Weh


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


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


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.


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.

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.


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


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.


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


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


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


*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.


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.


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


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


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


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


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


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.


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.


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.


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.


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.


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.


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 ..,


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.


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


@ 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&lt ' "*":-:: ' r'lqdd'* " -. -

,. "

I

Gambar 5.10 Hasil preview pembuatan Textarea


@ 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.


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.


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


[/ 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.


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.


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.


.-,,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


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-


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


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


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.


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.


<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


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


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.


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


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.


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


@ 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


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


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


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.


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.


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


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


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


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

Buku tips & trik adobe dreamweaver cs5.5 2012_roki

Internet

Transcript of Buku tips & trik adobe dreamweaver cs5.5 2012_roki