1. LAPORAN PROJECT AKHIR
“ WEBEDIT “
Oleh
MEYTA FEBRIYANI
NISN : 9976896353
Kelas X RPL 2
SMK NEGERI 1 DEPOK
2013

2. KATA PENGANTAR
Puji dan Syukur Penulis Panjatkat ke Hadirat Tuhan Yang Maha Esa karena berkat
limpahan Rahmat dan Karunia-Nya sehingga saya dapat menyusun tutorial
ini.Tutorial ini membahas tentang “ pembuatan web dengan dreaweaver cs5”.
Dalam penyusuna makalah ini, banyak mendapat tantangan dan hambatan akan
tetapi dengan bantuan dari berbagai pihak tantangan itu bisa teratasi . Olehnya itu ,
saya sebgai penulis mengucapkan terimakasih yang sebesar-besarnya kepada
Tuhan Yang Maha Esa yang telah memberikan kemudahan dalam penyusunan
makalah ini.
Menyadari bahwa makalah ini masih jauh dari kesempurnaan baik dari bentuk
penyusunan maupun materinya , penulis mohon maaf karena penulis sendiri dalam
tahap belajar.
Dengan demikian , tak lupa saya sebagai penulis mengucapkan banyak terimakasih
kepada para pembaca.
Semoga makalh ini bermanfaat bagi para pembacanya.
Penyusun
i

3. DAFTAR ISI
Kata pengantar ..................................................................... i
Bab I .................................................................................... 1
Pengenalan Software dreamweaver Cs5 ............................. 1
1.1 Drea
mwea
ver ...
.........
.........
.........
.........
.........
.........
......1
1.2 Penge
nalan
Eleme
n
Ruang
kerja
Dream
weave
r
cs5 .....
.... ..3
Bab II .......................................................................................... 6
I . Langkah-langkah bekerja dengan site ..................................... 6
2.1 membuat site baru .................................................................. 6
2.2 membuat folder image ............................................................ 8
2.3 menentukan alamat testing server ......................................... 11
2.4 menyimpan dokumen halaman web ......................................13
II membuat dan mengolah halaman web ........................... 15
II.1 membuat table ................................................................ 15
II.2 mengolah kerangka menjadi seperti sebuah web.............17

4. 1.1 mengatur halaman menu home ..................................... 17
1.2 mengatur halaman menu profile .................................. 18
1.3 mengatur halaman menu galery ................................... 19
1.4 mengatur halaman menu comment ............................. 20
III memberi link pada setiap menu ................................. 22
Bab III ...................................................................................24
Penutup ................................................................................. 24
BAB 1
Pengenalan Software Dreamweaver
1.1 Dreamweaver cs5
Dreamweaver cs5 adalah versi terbaru dari Dreamweaver yang merupakan
bagian dari Adobe Creative Suite 5.Dreamweaver juga merupakan aplikasi
yang digunakan sebagai HTML editor professional untuk mendesign web
secara visual.Aplikasi ini juga biasa di kenal dengan istilah WYSIWYG
(What See You Is What You Get) , yang intinya adalah anda tidak harus
berurusan dengan tag-tag HTML untuk membuat sebuah site dan dapat
melihat designnya secara langsung.
Selain itu , ada kemampuan Dreamweaver yaitu dapat berinteraksi dengan
dengan beberapa bahasa pemrograman seperti PHP, ASP, Java Script, dan
yang lainnya juga memberikan fasilitas maksimal kepada desainer web
dengan menyertakan bahasa pemrograman di dalamnya.
Cara menginstal Adobe dreamweaver Cs 5
1. Buka folder adobe dreamweaver Cs5 lalu klik setup dan akan menginstal
seperti ini :

5. 2.Klik Accept
1
3. Masukkan serial number lalu creat dan akan menginstal sendiri
Selesai

6. Untuk menjalankan Adobe Dreamweaver cs5 , klik tombol Start yang berada
di sudut kiri bawah lembar kerja windows , pilih menu Programs  Adobe
Master Collection cs5  Adobe Dreamweaver cs5 .Tampilan awal Adobe
Dreamweaver cs5 terlihat seperti pada gambar berikut:
Gambar 1.1 Tampilan awal Dreamweaver cs5
2
1.2 Pengenalan Elemen Ruang kerja Dreamweaver cs5
A B C D E F G

7. H I J
Gambar 1.2 Tampilan ruang kerja Adobe Dreamweaver cs5 dan elemen-
elemennya
• Document Title (A) , menunjukkan nama dokumen atau file yang aktif atau
terbuka.
• Aplication Bar (B) , berada di bagian paling atas jendela aplikasi
Dreamweaver cs5. Baris ini berisi tombol workspace (workspace
switcher) ,CS Live , menu , dan aplikasi lainnya.
Gambar 1.3 Tampilan Aplication Bar
• Toolbar Application ( C ) , berisi tombol-tombol yang digunakan untuk
mengubah tampilan jendela dokumen , sebagai contoh tampilan design atau
tampilan code. Juga dapat di gunakan untuk
operasi-operasi umum.
3

8. A B C D E F G H I J K L
Gambar 1.4 Tampilan toolbar Dokumen
Berikut keterangan fungsi tombol dalam toolbar Document:
Tombol Keterangan
[ A ] Show Code View Untuk mengubah tampilan jendela dokumen
dalam mode pengetikan kode HTML
[ B ] Show Code and Design
View
Untuk mengubah tampilan jendela dokumen
antara tampilan Code dan Design
[ C ] Show Design view Untuk mengubah tampilan jendela dokumen
menjadi tampilan layout design . Apa yang
anda lihat pada tampilan ini akan sama
seperti tampilan pada jendela browser.
[ D ] Live Code View Menampilkan dan menguji kode, aktual yang
digunakan oleh browser untuk menjalankan
halaman
[ E ] Check Browser
Compatibility
Untuk melakukan pengecekkan kesalahan
pada dokumen web
[ F ] Live View Untuk mwlihat dan menguji hasil akhir pada
design halaman yang anda buat
[ G ] CSS Inspect Mode Untuk mengecek CSS masing-masing bagian
design halaman saat dalam tampilan Live
View
[ H ] Preview and Debug in
Browser
Untuk melihat hasil dalam browser yang di
kenali oleh Dreamweaver dan digunakan
untuk mencari kesalahan script dalam
dokumen
[ I ] Visual Aids Menampilkan Visual Aids yang berbeda
untuk design halaman web
[ J ] Refresh Design View Untuk melakukan pembaharuan terhadap
perubahan isi website Anda
[ K ] Document Title Untuk memberikan judul pada dokumen
halaman web
[ L ] File Management Untuk menampilkan pop-up menu
pengolahan file , diantaranya proses upload
dan download file
4

9. • Toolbar Browser Navigator ( D ) , adalah toolbar baru dalam Dreamweaver
cs5. Kegunaannya sama seperti saat anda menggunakkan toolbar Address
dalam jendela browser.
• Workspace Switcher ( F ), digunakan untuk mengubah tampilan ruang kerja
(workspace) Dreamweaver cs5.
• Panel group ( G ), adalah kumpulan panel yang saling berkaitan , panel-
panel ini di kelompokkan pada judul- judul tertentu sesuai fungsinya.
• Tag Selector ( H ) , berada di pojok kiri bawah jendela dokumen , satu baris
dengan status bar.bagian ini menampilkan hirarki pekerjaan yang sedang
terpilih pada jendela dokumen , dapat juga di gunakan untuk memilih objek
pada jendela design berdasarkan jenis atau kategori objek tersebut.
• Property Inspector ( I ), biasa juga dengan panel properties. Digunkan untuk
melihat dan mengubah berbagai property objek atau teks pada jendela
design.
• Status Bar ( J ), berisi informasi presentasi besarnya tampilan, jenis pointer
mouse, dan lembar kerja

10. 5
BAB II
I
Langkah- Langkah Bekerja dengan Site
2.1 Membuat Site Baru
Langkah site dalam Dreamweaver cs5 lebih cepat dan sederhana dari
versi sebelumnya, bahkan saat anda bekerja dengan beberapa server
atau jaringan site.
Langkah untuk membuat site baru adalah sebagai berikut :
1. Pilih salah satu langkah berikut untuk menampilkan kotak dialog
Site Setup for Unnamed Site :
• Pilih menu Site  New Sites
• Pilih Dreamweaver Site pada kontak dialog Welcome
Screen , pada saat pertama kali menjalankan Dreamweaver
cs5.
• Klik tombol Site  New Site.

11. 2. Selanjutnya akan tampil kontak dialog Site Setup for Unnamed
Site.Pada kotak dialog ini, Anda di minta untuk mengetikkan nama
site di dalam kotak Site Name. Sebagai contoh Anda ketikkan
“webedit”
Gambar 1.5 Kotak dialog Site Setup for unnamed Site – emong
6
3. Langkah selanjutnya adalah menentukan direktori site pada
computer lokal.Klik ikon Browser for Folder di sebelah kanan
kotak Local Site Folder untuk menampilkan kotak dialog Choose
Root Folder. Perhatikan gambar 1.6
4. Pilih folder lokasi penyimpanan file site di dalam direktori lokal ,
sebagai contoh pilih folder emong di dalam drive D:. Jika folder
tersebut belum ada , klik tombol Creat New Folder di bagian
atas kotak dialog untuk membuat folder baru dengan nama

12. webedit.
Gambar 1.7 Kotak dialog Choose Root Folder
5. Setelah memilih folder , klik tombol Open kemudian lanjutkan
dengan klik tombol Select dalam kotak dialog Choose Root Folder.
6. Klik tombol Save untuk mengakhiri langkah pembuatan
Site.Sampai di sini maka langkah pembuatan site pertama anda
dalam Dreamweaver cs5 telah selesai .
Gambar 1.8 Kotak dialog Choose Root Folder
7
7. Setelah menekan tombol Save , maka site anda akan ditampilkan di
dalam panel Files. Perhatikan hasilnya seperti pada gambar 1.9
Untuk sementara site anda masih kosong karena belum pernah
melakukan penyimpanan file di dalamnya.

13. Gambar 1.9 panel Files dengan nama site yang baru di buat
2.2Membuat Folder Images
Folder images adalah lokasi yang anda buat sebagai tempat penyimpanan
seluruh image atau gambar pendukung site anda di dalam direktori.
Berikut ini adalah langkah-langkah untuk membuat folder image:
1. Pilih menu Site  Manage Sites
2. Pilih nama site yang akan di buat lokasi folder image-nya , kemudian
klik tombol Edit. Perhatikan gambar 1.10
Gambar 1.10 Panel files dengan nama site yang baru di buat

14. 8
3.Setelah itu muncul kotak dialog Site Setup for webedit.
Gambar 1.11 kotak dialog Site Setup for emong
4.Di kotak dialog tersebut dapat mengganti nama site (site name )
dan lokasi folder lokal penyimpanan site (Local Site Folder )
5.Untuk menentukan lokasi image, klik kategori Advance Settings 
Local Info.
Gambar 1.12 kotak dialog Site Setup for emong-Advance Settings-Local Info

15. 9
6. Klik ikon browse for folder untuk mencari folder lokasi images di dalam
direktori lokal , sehingga tampil kotak dialog berikut :
Gambar 1.13 kotak dialog Choose images folder
7. Sebelumnya buat folder dengan nama “editan gambar” di folder
webedit,
8. Setelah itu klik folder images lalu klik open , selanjutnya klik
tombol select. Seperti di bawah ini :

16. Gambar 1.14 kotak dialog Choose images folder
10
9.Lalu Klik tombol Save, Kemudian klik tombol Done.
Gambar 1.15 kotak dialog Site Setup for emong-Advance Settings-Local Info
Hasil membuat folder images akan tampil dalam panel files.
Gambar 1.16 hasil membuat folder images di dalam panel files
2.3 Menentukan Alamat Testing Server

17. Langkah untuk menentukan alamat testing server dari site adalah :
1. Klik menu Site , kemudian klik Manage Site  Klik Site yang
akan di Edit  Edit .
11
2. Akan muncul gambar seperti ini :
Gambar 1.17 kotak dialog Site setup for emong –Servers

18. Sebelumnya klik kategori Servers.
4.Klik menu ( + ) di bagian bawah daftar nama server sehingga
kotakdialog Site Setup for emong akan di ubah tampilannya sebagai
berikut :
Gambar 1.18 kotak dialog Site Setup-servers-local/Network
5. Isikan kotak dialog seperti gambar 1.18
6. Setelah memasukkan beberapa informasi dari testing anda ,akhiri
dengan menekan tombol Save . Dan hasilnya seperti gambar bawah
ini :
12
Gambar 1.19 kotak dialog Choose Folder Site Setup-Servers dengan 1 nama testing
server

19. 7.Di bagian kolom Testing , pastikan anda sudah memberi tanda
centang seperti gambar 1.19.
2.4 Menyimpan Dokumen halaman Web
Langkah untuk menyimpan dokumen halaman web adalah :
1. Pilih menu File  Save As atau klik tombol Save , pada baris toolbar
Standard.
2. Berikutnya akan tampil kotak dialog Save As seperti di bawah ini :
Gambar 1.20 Kotak dialog Save As
13
3.Ketikan nama file pada File Name , tekan tombol Save . Seperti Contoh ini :

20. Gambar 1.21 Kotak Dialog Save As
3. Setelah proses penyompanan selesai ,perhatikan pada panel Files akan
ditambahkan cabang file di bawah folder site.
Gambar 1.22 Hasil penyimpanan halaman baru pada panel files
14

21. II
Membuat dan mengolah halaman Web
II.1 Membuat Tabel
Langkah untuk membuat kerangka adalah :
1. Letakkan kursor pada lembar kerja jendela dokumen .
2. Pilih perintah menu Insert  Table atau klik tombol Insert Table di dalam
panel Insert kategori Layout.
3. Berikutnya tampil kotak dialog Table seperti pada gambar 1.23.
Gambar 1.23 Kotak dialog table
4. Tentukan jumlah kolom dan baris dengan cara memasukkan angka kotak
teks yang sudah disediakan.
5. Kita akan buat beberapa Tabel secara satu persatu
-Tabel untuk Banner ( isikan Coloumns = 1 ,rows kosong , table width
1000, border thickness = kosong lalu klik OK )
-Tabel untuk menu ( isikan Coloumn = 4 ,rows kosong, table width 500
,border thickness = 2 lalu klik OK)
-Tabel untuk Body (isikan Coloumns=1 ,rows kosong , table width 900,
border thickness = kosong lalu klik OK )
-Tabel untuk background categori( isikan Coloums = 1, row kosong, table
widht 300, border thickness = 0 lalu klik OK)

22. 15
-Tabel untuk Categori (taruh cursor di table background dan isikan Coloums
= 1 , rows kosong , table width 300 ,border thickness = 0 lalu klik OK )
Kerangka akan menjadi seperti ini :
II.2 Mengolah Kerangka menjadi seperti sebuah Web
1.1Mengolah kerangka menu HOME :
1. Mengatur background dengan cara arahkan kursor ke arena luar table
lalu klik page propertis  lalu lihat background image lalu klik menu
Browser  dan pilih gambar dan klik gambar yang akan dijadikan
background  klik OK .
2. Dari kerangka tersebut bisa kita masukkan banner
Klik menu Insert  image  klik gambar yang akan dijadikan banner 
klik OK .
3. Di table menu keikan nama menu seperti HOME, PROFILE , GALERY ,
COMMENT. Setelah itu atur warna background table menu dengan cara
taruh kursor di dalam table menu  klik menu Bg di bagian Page
properties .
4. Mewarnai background body sama caranya dengan mewarnai Background
menu.
5. Mengatur kerangka Categori , bisa diisikan nama CATEGORI :
Mau di tambahkan menu tambahan seperti :
- Editan Alam

23. - Editan Kartun
- Editan Iluminati
- Editan WOW
6. Di background Categori bisa dimasukkan kata-kata , dan di halaman
HOME kita bisa masukkan menu tambahan lainnya yaitu Photoshop dan
Corel draw menu ini berbentuk gambar , cara memasikun gambarnya sama
seperti memasukkan banner.
Setelah semuanya selesai bisa di save caranya klik menu File  save as 
(karna memakai xammp jadi save di folder xammp ) jadi klik local disk D:
(karna folder xammp saya di local disk D:) pilih folder htdocs  pilih
nama foldernya webedit  creat nama filenya seperti home.html (harus
pakai .html agar bisa koneksi ke internet)  klik selesai.
17
Kerangka Halaman HOME yang sudah jadi seperti ini:
Ini bisa di masukkan kata-kata atau gambar sesuai keinginan.

24. 1.2Mengatur Halaman menu Profile
Di menu profile tidak perlu mengulang lagi membuat kerangka dari awal
cukup apus isi dari body home dan di isikan dengan Profile yang akan kalian
isi. Bisa langsung di save as , save-nya sama seperti home (namaun creat
name file – nya profile.html )
Dan menu profile bisa di lihat seperti ini :

25. 18
1.3Mengatur halaman menu GALERY
Sama dengan mengatur menu profile hanya saja bodynya bukan di isi
dengan profile tetapi dengan kumpulan gambar yang akan di perlihatkan.
Setelah mengatur semuanya di save dengan nama galery.html
Akan tampil seperti ini :

26. 19
1.4Mengolah Halaman menu Comment
Nah disini butuh ekstra ketelitian dan ini juga gak sembarangan karna kita
menggunakan database .
Langkah – langkahnya :
Membuat database dengan cara , buka google chrome klik url
http://localhost/phpmyadmin.com
Lalu klik menu database (untuk membuat database baru )  masukkan
nama databse  creat.
Setelah itu klik database yang sudah di buat dan sekarang buat table untuk
database  tulis nama tablenya  masukkan kolomnya (4)klik Go 
isikan kolomnya ( kolom 1 “ id , int , 50, autoncremment (untuk primary key
) “kolom ke 2 “ nama, varchar , 100, “ kolom ke 3 “email, varchar, 100”
kolom ke 4” komentar, text, kosongkan (tidak terhingga ) ,” ) setelah selesai
klik Simpan .
Selesai buat database kita langsung ke dreamweaver .
Pertama buat “ add “
1. Klik menu file  new pilih Php  lalu kita langsung masuk ke Code
 masukkan code seperti gambar di bawah ini :

27. 2. Lalu save klik menu file  save as  klik folder xammp  klik folder
htdocts  klik folder webedit  buat folder baru dan di namakan “
coment “  create name file “ add.php “lalu klik SAVE.
Kedua buat “ koneksi “
1. Klik menu file  new pilih Php  lalu kita langsung masuk ke Code
 masukkan code seperti gambar di bawah ini :
2. Lalu save klik menu file  save as  klik folder xammp  klik folder
htdocts  klik folder webedit  buat folder baru dan di namakan “
coment “  create name file “ koneksi.php “lalu klik SAVE.
Ketiga buat “ index”
1. Klik menu file  new pilih Php klik design
Di sini kita bisa design comment dengan menambahkan banner , dan
table khusus komentar dengan cara :
-Klik menu insert  form  form (untuk menambahkan form biar
komentar bisa dijalankan .
-Klik menu insert  table  isikan 3 baris dan 3 kolom
-Isi table dengan “ nama, email, komentar
20
-Di bagian baris nama kita masukan textfiled ( klik menu insert  form
textfield OK
-Di bagian baris email kita masukan textfiled ( klik menu insert  form
textfield OK
-Di bagian baris komentar kita masukkan textarea ( klik menu insert 
textareaOK)

28. -Tambahkan submit OK dan Cancel dengan cara . Klik menu insert  form
 button  OK.
-Setelah semuanya selesai bisa kita kasih menu << Back To Home
-Dan untuk tempat hasil komentar bisa kita kasih kode seperti gambar di
bawah ini :
-
2. Setelah semuanya selesai klian bisa save dengan cara klik menu file 
save as  klik folder xammp  klik folder htdocts  klik folder
webedit  klik folder coment  OK.
Untuk 4 menu tadu sudah selesai sekarang membahas menu tambahan .
Langkah-langkah :
1. Masukkan ini “ editan alam , editan kartun, editan iluminati , dan
editan WOW pada setiap halaman menu “
2. Lalu di setiap menu tambahan di masukkan gambar sesuai nama menu
tersebut .
3. Dan jangan lupa d save dengan nama “ editanalam.html ,
editankartun.html , editaniluminati.html , editanWOW.html “
Dan menu tambahan ke 2 yaitu :
Masukkan gambar logo photoshop dan corel draw di halaman menu
Home . dan di save dengan create name file “ photoshop.html dan
coreldraw.html “

29. 21
III
Memberi link pada setiap menu
Agar terlihat seperti website sungguhan kita bisa beri likn pada setiap menunya
agar bisa berjalan.
Nih cara- cara memberi link untuk setiap menunya:
• Menu Home
Blok menu home dan lihat ke menu properti di bagian html ada yang
namanya link dan di sampingnya ada bentuk gambar browser . Seperti
gambar di bawah ini :
klik menu browser  lalu pilih home.html  OK. Menu home sudah
bisa berjalan , namun bila home ingin menyambung ke yang lain , di
setiap halaman menu lainnya beri link untuk home.
• Menu Profile
Langkahnya sama dengan menu home namun saat browser pilih
profile.html lalu OK. Di setiap halaman menu lainnya beri link untuk
profile.
• Menu Galery
Menu ini juga sama langkahnnya dan saat browser pilih galery.html
lalu OK. Di setiap halaman lainnya beri link untuk Galery .
• Menu Comment
Menu ini sama tapi saat browaser klik folder coment  klik
index.php OK . dan di saat selesai memberikan komentar kita klik
submit OK dan browser ke folder coment  klik add.php  OK.
Ada menu << Back to Home di beri link home.
• Dan dengan menu tambahan semua caranya sama hanya saja saat
browse berbeda .
Menu editan alam saat browse pilih editanalam.html lalu OK
Menu editan kartun saat browse pilih editankartun.html lalu OK

30. Menu editan iluminati saat browse pilih editaniluminati.html lalu OK
Menu editan WOW saat browse pilih editanWOW.html lalu OK.
Menu photoshop saat browse pilih photoshop.html lalu OK
Menu Corel Draw saat browse pilih coreldraw.html lalu Ok.
22
Karena semuanya sudah selesai diberi link otomatis semua halaman
menyambung dan bisa di coba di gogle chrome atau di mozila firefox .
Ada 2 cara untuk menyoba
Cara pertama dengan menggunakan xammp (sebelumnya xammp di
start dulu mysql dan ) setelah selesai buka gogle chrome  ketik url
( localhost/webedit )  enter .
Akan muncul web anda .
Cara ke 2 langsung dari foldernya
Buka folder web anda misal computter  local disk D:  xammp 
htdocts webedit  home .
Akan tampil web anda .

31. 23

32. BAB III
Penutup
Tujuan :
Tujuannya saya buat ini yaitu untuk mealtih saya membuat sebuah
web dengan dreamweaver dan lebih mengenal jauh dreamweaver.
Akhir Tutorial ini saya ingin berterimakasih sudah melihat tutorial saya .
24