Pengenalan Macromedia Dreamweaver
Dreamweaver merupakan tool/alat untuk memanagement web site dan juga sebagai alat yang
mudah sekali untuk membuat halaman web. Banyak sekali profesional web developer
yang menggunakan Dreamweaver ini untuk membangun dan mengelola suatu web site
dengan hasil yang sangat memuaskan.
Dreamweaver digunakan sebagai tool untuk membuat
design web dengan HTML dan melakukan coding
scripting PHP untuk membuat web yang dinamis.
Workspace
Dreamweaver
Pada gambar diatas adalah tampilan workspace (area kerja) jika kita memulai
develop Web dengan menggunakan
Dreamweaver. Bagian-bagian workspace tersebut
sebagai berikut :
Insert bar berisi tombol-tombol untuk memasukkan
berbagai type “object”, seperti image, table, dan
layer, ke dalam document Dreamweaver. Setiap object merupakan bagian dari code
HTML yang memungkinkan Anda untuk melakukan berbagai macam setting atribut
object yang Anda masukkan tersebut. Sebagai contoh, Anda bisa memasukkan table
HTML dengan cara click tombol Table yang ada di Inser bar. Jika Anda suka cara lain, Anda pun bisa
memasukkan object HTML dengan melalui menu Insert yang ada diatas Insert bar.
Document
toolbar berisi tombol-tombol dan
menu pop-up yang menyediakan view Document window (ada 2 view document window,
yaitu: Design View dan Code View), berbagai view untuk option,
dan beberapa perintah operasional seperti preview kedalam browser (misal
browser IE – Internet Explorer).
Document
window untuk menampilkan document
sekarang ini yang sedang Anda buat atau sedang Anda kembangkan (editing).
Panel
groups merupakan sekumpulan panel
group yang secara bersama-sama dalam satu heading.
Untuk melihat lebih detail lagi panel ini (expand),
lakukan click tanda panah expander yang ada di kiri group nama panel tersebut.
Untuk mejadikan undock panel group
ini, lakukan drag tanda gripper yang ada di tepi kiri dari judul
group bar ini.
Tag selector memperlihatkan ke Anda relevansi
tag HTML sesuai yang Anda pilih (selected)
di Document window. Anda dapat memilih bagian-bagian document lain
dengan cara cukup melakukan click di nama tag dalam Tag selector.
Property inspector memperlihatkan ke Anda view dan fasilitas untuk mengubah berbagai
macam property object / text yang sesuai Anda pilih. Setiap type object
memiliki property yang berbeda-beda. Property inspector biasanya ditampilkan
dibawah design area. Property inspector ini juga dapat dilihat dengan cara
melakukan click langsung (short-cut)
tombol-tombol yang ada di panel Dreamweaver. Property inspector ini bisa juga muncul
saat ada perubahan object yang terpilih di design area. Jika Anda merasa tidak
memerlukan property inspector ini, dalam arti Anda tidak ingin terlihat di
window Dreamweaver, maka Anda cukup memilih dari menu ‘Window’ di screen
Dreamweaver bagian atas dan kemudian pilih uncheck
submenu Property yang ada di menu tersebut (atau dengan sort-cut Ctrl+F3).
Saat ada bagian text yang terpilih (selected) di Document window, maka secara otomatis panel akan
menampilkan fasilitas untuk setting yang dapat digunakan oleh text terpilih
tesebut (seperti yang ditunjukkan gambar dibawah ini), dimana berisi fasilitas
: font, text size, color, atribut text seperti bold dan italic, text alignment,
dan lain-lain. Selain itu
panel juga bisa menampilkan informasi asosiasi hyperlink dalam bagian text yang
terpilih tersebut.
(Property inspector untuk text)
Property inspector untuk image ditunjukkan seperti gambar dibawah
ini. Dengan toolbar ini, Anda bisa melakukan setting lebar dan tinggi (width – height) dari suatu image,
merubah asosiasi lokasi hyperlink saat image tersebut di-click, dan alignment
image terhadap keseluruhan window page saat ditampilkan di browser.
(Property inspector untuk image)
Files panel yang terlihat
di sebelah kanan ini, memberikan fasilitas bagi Anda agar mampu memanage
file-file hasil develop web Anda
beserta informasi folder-foldernya, dimana bisa merupakan bagian dalam satu PC
di Dreamweaver (localdisk) ataupun merupakan remote server. Files panel juga menyediakan kemampuan untuk
mengakses semua file di localdisk, seperti layaknya Window Explorer.
View selector seperti yang terlihat diatas ini
memberikan fasilitas bagi Anda agar Anda bisa mengubah setting view. Ada
HTML dan Dreamweaver
Semua document HTML minimal memiliki struktur 4 tag. Tag pertama : <html>
, yang gunanya untuk memberitahukan ke browser bahwa yang dibaca oleh browser
tersebut merupakan document HTML. Tag kedua, <head> , dimana
gunanya untuk memberitahu kepada browser letak header document page tersebut.
Header page sebagai tempat untuk informasi document page tersebut, seperti
title dari document, jika dilihat memakai browser IE, maka akan muncul di title
bar dari window browser IE. Sedangkan
tag <title>
terletak didalam title document page. Selanjutnya tag yang keempat, <body>
, terletak didalam tag HTML sebagai badan (body) dan document. Sebagian besar
tag HTML memerlukan open tag dan close tag dalam format <tagname> </tagname>.
Dengan memakai Dreamweaver, maka bisa Anda lakukan
dari menu File à New.. (Ctrl + N) untuk membuat document
page HTML pertama kali, kemudian pilih basic page, seperti terlihat gambar
dibawah ini :
Hasil HTML-nya sebagai berikut :
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled
Document</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
</body>
</html>
Body HTML
Untuk menambahkan properti tag <body>, Anda
bisa arahkan cursor mouse yang berupa text selection ke tag <body> pada
area Code view, kemudian click kanan mouse Anda, maka Akan terlihat menu pop-up
seperti gambar di samping ini. Kemudian, pilihlah menu pop-up ini pada pilihan
menu Edit Tag <body>... atau Anda cukup dengan sort-cut Ctrl+F5. Selanjutnya
akan muncul fasilitas window Tag Editor – Body, dan sekaligus Anda bisa
melakukan editing properti dari tag <body> ini, dimana jika Anda tidak
akan mengubah propertinya, Anda cukup mengosongkan saja.
Tag <body> akan berubah propertinya menjadi
(misalkan) :
<body
bgcolor="#00FF66" background="/painting.jpg"
text="#FF0000" link="#3300FF" vlink="#996699">
Penjelasan setiap property tag <body> tersebut sebagai berikut
:
|
Attribute
|
Function
|
|
ALINK
|
definisi warna active
link.
|
|
BACKGROUND
|
URL image yg
digunakan untuk document background.
|
|
BGCOLOR
|
Definisi warna
document background.
|
|
BGPROPERTIES
|
Jika
diset “FIXED”, maka background image tidak bisa
scroll.
|
|
LEFTMARGIN
|
Setting lebar margin
kiri dlm pixels.
|
|
LINK
|
Definisi warna
unvisited link.
|
|
TEXT
|
Definisi warna text.
|
|
TOPMARGIN
|
Setting
lebar margin atas dlm pixels.
|
|
VLINK
|
Definisi
warna yg baru saja link dikunjungi.
|
Format Text HTML
Heading
Heading digunakan untuk menampilkan nama bab atau
bagian tertentu yang dianggap sebagai topik utama. Pada HTML terdapat enam
level heading mulai dari tag <H1> sampai dengan <H6>. Anda juga
dapat menggunakan tag untuk mengatur ukuran font, misalkan yang terbesar dengan
<H1> atau membuatnya paling kecil dengan <H6> namun tag ini bukan
digunakan untuk keperluan tersebut.
Posisi heading pada dokumen HTML dapat Anda
tentukan sendiri. Artinya teks yang berfungsi sebagai heading dapat Anda
tempatkan di kiri, kanan, atau di tengah dalam dokumen.Untuk mengatur posisi
heading, Anda dapat menggunakan atribut ALIGN pada tag heading. Nilai dari
atribut ALIGN dapat diisi dengan salah satu nilai, left untuk perataan sebelah kiri,
right untuk perataan sebelah kanan, atau center untuk menuliskannya tepat di
tengah.
Untuk melihat properti tag heading ini di
Dreamweaver bisa dengan cara seperti pada tag <body> diatas, yaitu
Ctrl+F5 dengan cursor text diletakkan tepat di tag <body>.
Membuat Baris Baru
Line break <BR> adalah tag yang berfungsi
untuk membuat baris baru pada dokumen HTML tag <BR> ini membuat baris
baru tanpa memberi baris kosong.
Membuat Paragraf
Anda dapat mulai meletakkan kalimat text
di halaman web dalam bentuk paragraf, maka untuk keperluan ini HTML menyediakan
tags <P>. Perintah ini mempunyai beberapa atribut. Tag <P> umumnya
untuk menandai suatu paragraf baru. Anda juga dapat menggunakan tag <BR>
untuk memulai baris baru, namun pemakaian tag <P>
terutama digunakan untuk membuat group paragraf dengan
formatting style tertentu.
Sama halnya dengan tag heading, tag paragraf
<P> memiliki atribut untuk mengatur alignment atau pengatur posisi, yaitu
left untuk meratakan paragrap di kiri, right untuk perataan sebelah kanan, dan center
untuk meletakkan pada posisi tengah horizontal.
Untuk melihat properti tag paragraf ini di
Dreamweaver bisa dengan cara seperti pada tag <body> diatas, yaitu
Ctrl+F5 dengan cursor text diletakkan tepat di tag <P>.
Membuat Daftar/List
Dalam praktikum Pemrograman Web ini diperkenalkan
cara membuat daftar atau list, yaitu bisa dengan 3 macam cara, yaitu :
-
unordered
list
-
ordered
list
-
definisi
Unordered List
Unordered list biasanya ditandai dengan pemakaian
bullet untuk menandai sebuah item dari list. Bullet adalah karakter tertentu
yang berupa karakter symbol, misalkan bullet dengan bentuk tanda panah, rumah,
segitiga, dan sebagainya. Untuk membuat list dengan menggunakan sebuah bullet
di gunakan tag <UL> (unordered list) sebagai tanda tag awal dan
</UL> sebagai tanda tag penutup. Untuk item-item di dalam list harus
diawali dengan tag <LI> dan boleh tidak memakai tanda akhir tag.
Bentuk default tanda item dalam tag <UL>
adalah bullet. Untuk mengubah Anda dapat menggunakan atribut TYPE dengan
diikuti nilai kontanta. Konstanta ini mewakili karakter symbol yang akan digunakan.
Sedangkan item-item dari daftar tadi ditandai dengan memberikan tag <LI>.
Ordered List
Ordered list adalah daftar yang tiap bagiannya
disertai dengan penomoran. Ordered list dimulai dengan tag <OL> dan
diakhiri dengan tag </OL>. Ordered
list mempunyai beberapa tipe penomoran yang dapat digunakan, yaitu :
|
Attribute
|
Description
|
|
COMPACT
|
Render list dalam
compact form
|
|
TYPE=A
|
Setting
marker menjadi huruf besar
|
|
TYPE=a
|
Setting
marker menjadi huruf kecil
|
|
TYPE=I
|
Setting
marker menjadi uppercase Roman numerals
|
|
TYPE=i
|
Setting marker menjadi
lowercase Roman numerals
|
|
TYPE=1
|
Setting marker menjadi
nomor
|
|
START=n
|
Setting marker mulai
dari n
|
Apabila Anda menuliskan atribut TYPE pada tag
<OL> maka tipe tersebut akan dipakai sebagai default dari seluruh item.
Namun Anda juga dapat memberikan tipe untuk masing-masing item, yaitu dengan memberikan
atribut TYPE pada tag <LI>. Atribut START dipakai pada tag <OL> dan
digunakan untuk menentukan nomor dari item pertama.
Definition List
Definition list adalah daftar yang mempunyai
keterangan pada itemnya. Untuk memakai defenition list Anda dapat menggunakan
pasangan tag <DL> dan </DL>. Tag ini bekerja dibantu oleh tag
lainnya, yaitu tag <DT> yang menandakan item yang dijelaskan dan tag
<DD> menyatakan defenisi dari item.
Format Tulisan
Format tulisan ini meliputi : font, bold, italic,
dan strong.
Graphics di HTML
Gambar adalah elemen yang sangat penting dalam
menampilkan informasi. HTML menyediakan tag <IMG> untuk menampilkan
gambar pada halaman web Anda.
<IMG SRC=”fotoku.gif” ALT=”Ini Foto Asliku” WIDTH=100 HEIGHT=75 BORDER=0
ALIGN=MIDDLE HSPACE=10 VSPACE=15>
Perintah HTML diatas akan menampilkan gambar fotoku.gif
dan menampilkan teks “Ini Foto Asliku” apabila browser mematikan fasilitas
penampil grafik. Ekstensi grafik yang biasa di tampilkan oleh HTML adalah GIF,
JPG, dan BMP. Atribut ALT dipakai untuk menampilkan teks pengganti gambar untuk
browser yang tidak mendukung penggunaan gambar atau apabila client sengaja
mematikan fasilitas tersebut. Anda juga dapat menggunakan atribut align untuk
mengatur posisi gambar terhadap teks yang bersebelahan. Anda juga bisa mengatur
lebar dan tinggi gambar tersebut dengan atribut WIDTH dan HEIGHT. Sedangkan dengan
menambahkan atribut HSPACE dan VSPACE, Anda juga dapat mengatur frame yang
mengelilingi gambar. Selanjutnya untuk properti BORDER sebagai informasi ukuran
garis border yang mengelilingi gambar tersebut.
Untuk melihat properti tag Image ini di
Dreamweaver bisa dengan cara seperti pada tag <body> diatas, yaitu
Ctrl+F5 dengan cursor text diletakkan tepat di tag <img>.
Hyperlink di HTML
Link sebenarnya memiliki dua bagian yang berbeda.
Pertama, bagian yang dapat Anda lihat di Web page, disebut dengan anchor. Link
anchor bisa berupa kata, kalimat, atau pun gambar. Jadi Ancor ini yang terpenting apa saja yang bisa terlihat di layar browser.
Sedangkan bagian satunya lagi disebut URL reference, yaitu bagian yang
memberitahukan kepada browser apa yang akan dilakukan browser jika Anda
melakukan click ke link tersebut.
Tag HTML untuk hyperlink ini dengan menggunakan
tag <A> anchor </A>. Contohnya
sebagai berikut :
Text Anchor :
<A
HREF="mahasiswa.html">Lihat daftar mahasiswa</A>
Graphic Anchor :
<A HREF="mahasiswa.html">
<IMG SRC=”mhs.gif”> </A>
Untuk membuat URL Link reference dengan menambahkan
atribut HREF pada tag <A>. Terdapat 2 macam URL Link, yaitu Internal Link
dan External Link (resource file lain).
Link Internal berarti tujuan link masih dalam Web
page tersebut, bukan file web page lain. Untuk menandakan tempat tujuan link
dengan tag <A> juga, hanya saja ditambah properti NAME.
<A NAME="bagianbawah"> Akhir
Cerita </A>
Sedangkan hyperlinknya dengan isi properti HREF
ditambah karakter #.
<A HREF="#bagianbawah">
Menuju Akhir Cerita Bahagia </A>
Jika Anda melakukan click pada hyperlink ini, maka
cursor layar browser akan menuju ke tag link bagianbawah. Hal ini akan terlihat
bedanya jika isi web page sangat panjang sehingga perlu scrolling window
browser.
External link bisa memiliki aksi bermacam-macam,
dimana dapat dipetakan sebagai berikut :
|
Link To
|
What to Use
|
Sample Link
|
|
Web page
|
http://sitename/
|
http://www.ui.ac.id/
|
|
E-mail
|
mailto:address
|
mailto:pabrik@sepatu.com
|
|
Newsgroup
|
news:newsgroupname
|
news:news.newusers.questions
|
|
FTP
|
ftp://sitename/
|
ftp://ftp.tokobuku.com/
|
|
Gopher
|
gopher://sitename/
|
gopher://gopher.berita.com/
|
|
WAIS
|
wais://sitename/
|
wais://wais.mysite.com/
|
|
Telnet
|
telnet://sitename/
|
telnet://bbs.server1.com/
|
External Link ini memiliki 4 macam target, yaitu :
_self : hasil
link masih dalam satu window browser tersebut.
_blank : hasil link
dalam window browser baru yang terpisah dari achor.
_parent: hasil link muncul dalam window browser yang sebelumnya memunculkannya,
seperti pop-up dialog dalam web page.
_top : hasil
link muncul dalam top frame.
Bisa juga target link ini menuju suatu ID Frame.
Membuat Layout Frame di HTML
Untuk membuat layout suatu web page bisa dengan
tag FRAME. Frame ini berusaha membagi layar webpage sesuai dengan layout yang
diinginkan. Setiap frame bisa berkorespondesi dengan suatu link page tertentu.
Untuk mengumpulkan beberapa frame dengan
menggunakan tag FRAMESET.
Sehingga struktur HTML-nya akan menjadi :
<FRAMESET ROWS=.. COLS=..>
<FRAME>..</FRAME>
<FRAME>..</FRAME>
…
<NOFRAME>..</NOFRAME>
</FARMESET>
Diperbolehkan juga dalam suatu FRAMESET selain
terdapat FRAME bisa juga terdapat lagi FRAMESET yang terletak didalamnya.
Lihat Contoh berikut :
<HTML>
<HEAD>
</HEAD>
<FRAMESET
ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME
SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Your browser
cannot display frames.
</NOFRAMES>
</HTML>
Hasil Layout sebagai berikut :
LATIHAN
Berikut ini latihan dasar
HTML, dimana design interface meliputi font, warna, paragraph, background, dan
isi halam web ini, dipersilahkan mahasiswa untuk mengembangkan dengan
asumsi-asumsi yang dimiliki.
- Buatlah halaman web untuk menampilkan
informasi identitas mahasiswa dan deskripsi (hoby, kemampuan, foto, dll)
dengan layout sebagai berikut :
Berikut ini sample tampilannya :
- Buatlah halaman web untuk kumpulan
informasi data mahasiswa yang terdiri dari 3 frame, dimana frame paling
atas untuk header dan logo universitas, frame paling kiri untuk list
nama-nama mahsiswa yang memiliki link untuk detail identitas mahasiswa
tersebut yang terletak di frame bagian kanan.
Layout sebagai berikut :
Berikut ini sample tampilannya :
Selamat Belajar... !
Tidak ada komentar:
Posting Komentar