Makalah ini membahas panduan pembuatan website menggunakan software Dreamweaver. Terdiri dari dua bab utama yaitu pendahuluan dan isi. Pendahuluan menjelaskan latar belakang dan tujuan pembuatan makalah. Bab isi membahas pengenalan Dreamweaver, cara membuat halaman pertama (index) meliputi define site, membuat layout menggunakan tabel, memformat teks dan gambar, serta membuat hyperlink. Bab selanjutnya membahas penggunaan frame untuk memb

1. 3
UJIAN TENGAH SEMESTER KOMPUTER TERAPAN-1
PANDUAN MEMBUAT WEBSITE
Makalah ini ditulis untuk memenuhi nilai Ujian Tengah Semester mata kuliah
komputer terapan 1 jurusan teknik geologi terapan.
Oleh,
PUTRI NOFAYANTI
11051346
TEKNIK GEOLOGI TERAPAN A
POLITEKNIK GEOLOGI DAN PERTAMBANGAN “AGP”
BANDUNG
2014

2. 4
DAFTAR ISI
BAB I PENDAHULUAN
1.1 LATAR BELAKANG...................................................................
1.2 TUJUAN.........................................................................................
BAB II ISI
2.1 MENGENAL DEKSTOP DREAMWEAVER XP.........................
2.2 MEMBUAT HALAMAN PERTAMA (INDEX)...........................
2.2.1 Define Site.....................................................................
2.2.2 Membuat Kerangka Layout dengan Tabel....................
2.2.3 Memformat Text...........................................................
2.2.4 Memasukkan Gambar...................................................
2.2.5 Membuat Hyperlinks....................................................
2.3 BEKERJA DENGAN FRAME..........................................................
2.3.1 Menyiapkan File Untuk Dimasukkan ke Frame...........
2.3.2 Cara Membuat Frame...................................................

3. 5
BAB I PENDAHULUAN
1.1 LATAR BELAKANG
Teknologi komunikasi dan informasi masa kini sedang mengalami
perkembangan dan kemajuan yang sangat pesat. Saat ini sangat penting bagi
kita untuk mengakses segala macam informasi di dalam internet demi
memudahkan pekerjaan dan kebutuhan kita dalam informasi. Website sangat
diperlukan dalam proses untuk mengakses internet.
Website atau situs adalah kumpulan halaman yang menampilkan
informasi data teks, data gambar diam atau gerak, data animasi, suara, video
dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis
yang membentuk suatu rangkaian bangunan yang saling terkait dimana
masing-masing di hubungkan dengan jaringan-jaringan halaman (hyperlink).
1.2 TUJUAN
Penulis membahas tata cara pembuatan website, agar diharapkan
memudahkan para pembaca dalam membuat website sendiri untuk kepentingan
bisnis maupun untuk sarana berbagi informasi.

4. 6
BAB II ISI
2.1 MENGENAL DEKSTOP DREAMWEAVER MX
Software DreamWeaver ini merupakan salah satu software untuk
mendesain website atau homepage, selain software FrontPage. Untuk
memahami cara bekerja dengan menggunakan DreamWeaver paling tidak ada
tiga komponen yang perlu dipahami oleh pengguna,yaitu :
 Halaman utama: untuk mendesain website itu sendiri (tampilan web maupun
kode HTML)
 Objek/Tool: terdiri atas common, layout, text, frames, forms, templates,
character, head, script and application. Fungsinya untuk memasukan objek atau
sifat objek yang diinginkan, misalnya memasukan table dan semua sifat-sifatnya,
atau membubuhkan sifat text.
 Properties: berfungsi sebagai alat pengedit objek yang sedang diolah.
Properties akan berubah sesuai dengan objek yang sedang diolah.

5. 7
Bila object atau properties tidak muncul pada layar, klik Windows lalu
pilih insert atau properties.
DreamWeaver menyediakan tiga metode dalam mendesain website.
Pertama, mendesain dengan menggunakan kode HTML (bahasa dasar dalam
membuat website). Metode pertama ini tentunya bagi pendesain yang sudah
mahir kodeHTMLnya. Kalau kita memilih metode pertama ini, maka layar di
tampilan utama ini murni kode-kode HTML. Sekali lagi ini cukup merepotkan
bagi pemula, karenanya tidak dianjurkan bagi pemula menggunakan metode
pertama ini.

6. Kedua, kita bisa desain juga dengan visualisasinya seperti kita mengetik
8
melalui editor word prosesor (MS WORD, misalnya). Metode kedua ini cocok
bagi pemula, karena pendesain tidak perlu repot-repot memikirkan kode
HTML. Anda cukup klik tool yang Anda perlukan, DreamWeaver akan
membuat sendiri HTMLkodenya. Jadi pada dasarnya tool hanya membuat
HTML kode. Berbeda dengan metode pertama, layar tampilan yang nampak
sama seperti di website. Dalam dunia Desktop Publishing disebut WYSIWYG
(What you see is what you get = Apa yang Anda lihat itulah tampilan
sebenarnya).
Atau metode yang ketiga, yaitu perpaduan keduanya, mendesain secara
visual tapi juga bisa mengedit dengan kode HTML. Metode ini sebetulnya
lebih tepat daripada hanya mengandalkan WYSIWYG. Sebab koreksi akan
lebih tepat dilakukan dengan kode HTML daripada sekedar tool.

7. 9
2.2 MEMBUAT HALAMAN PERTAMA (INDEX)
Di bab ini akan dibahas tentang :
- Define site: mementukan folder, FTP login/password, dll.
- Cara meletakkan gambar, objek atau text dengan menggunakan kerangka dasar
yaitu table.
- Memformat text dengan tool atau properties.
- Memasukkan grafik
- Membuat hyperlinks
- Membuat ketentuan-ketentuan halaman (warna background halaman, judul
halaman, dll.)
Bila anda mengikuti petunjuk step by step di bab ini, Anda akan mendapatkan
halaman index seperti dibawah ini :

8. 10
2.2.1 Define Site
Define site penting anda lakukan bila anda bekerja online atau meng-upload
homepage anda ke internet. Dengan fungsi ini DreamWeaver akan
meletakkan semua file websites anda ke dalam sebuah root folder (sebuah
direktori). Direktori beserta isinya ini yang nantinya akan diupload ke server.
1. Klik menu Site lalu pilih New site
2. Muncul dialog Site definition for unnamed Site 1
3. Tulis Site Name yang anda inginkan pada kolom yang tersedia. Klik next.
4. Pada dialog berikutnya tentukan apakah anda akan menggunakan server
technology. Klik next.
5. Pilih direktori tempat menyimpan file. Klik next.
6. Dialog berikutnya (lihat gambar dibawah ini) penting untuk meng-upload
website anda.

9. Upload biasanya dilakukan dengan FTP (File Transfer Protokol). Ketik
11
hostname anda (www.alamat.de), berikut FTP login dan password. Klik next,
selesaikan dialog dan done.
Semua files situs anda akan disimpan dalam satu root folder dan akan
ditampilkan oleh dreamweaver secara otomatis seperti misalnya contoh
dibawah ini :
2.2.2 Membuat Kerangka Layout dengan table
Tabel merupakana perangkat yang sangat berguna untuk
merancang tata letak website. Tabel terdiri dari tiga bagian utama, yaitu : baris,
kolom dan sel yang merupakan pertemuan antara baris dan kolom. Setelah
membuat suatu tabel, anda bisa memasukkan elemen apa saja dalam tabel
tersebut, seperti : teks, gambar, form dan lainnya. Bahkan bisa juga kita
membuat tabel dalam tabel untuk memanipulasi tampilan di website.
Misalnya saja halaman pertama website Kharisma terdiri dari
beberapa tabel yang dijadikan kerangka layout. Tentu saja user kharisma tidak
akan melihat kerangka tabel, karena tabel sudah di set “blind”atau invisible.

10. 12
Bagaimana cara meletakkan teks “Selamat datang di website kami”,
agar terlihat center secara horisontal maupun vertikal? Mungkin anda berpikir:
- Agar terletak center horizontal, klik simbol
- Agar terletak center secara vertikal, klik Enter berkali-kali sampai terlihat di
tengah halaman.
Solusi diatas sangat tidak tepat, mengapa? Sebab besarnya halaman pada
layar monitar setiapuser internet tergantung dari resolusi layar dan besarnya
window yang dipilih user, tidak seperti ukuran kertas yang sudah pasti. Solusi
yang tepat adalah dengan menggunakan tabel invisible.
Untuk membuat halaman seperti pada gambar ikuti langkah berikut:
Cara membuat tabel:
1. Klik simbol pada kumpulan common
2. Beri ketentuan seperti dibawah:

11. 13
Keterangan:
- Widht = 100 Percent menandakan tabel berukuran 100% sama dengan layar
monitor tempat website dibuka.
- Border = 0 menandakan tabel tidak kelihatan “blind”.
Cara memformat tabel dengan menggunakan layar properties:
1. Klik tabel yang sudah anda buat
2. Isi properties dengan ketentuan:
Keterangan :
W = 100% dan H = 100% menandakan table berukuran sama dengan layar
monitor tempat website dibuka.
2.2.3 Memformat Text
Setelah text yang ingin digunakan sudah anda masukkan pada jendela
(layar) dokumen, anda dapat memformat teks tersebut seperti membuat teks
menjadi tebal, miring bergaris bawah, mengubah warna dan jenis font teks

12. beserta besar kecilnya teks. Teks juga bisa diformat rata kiri, kanan tengah atau
rata kiri dan kanan.
14
Untuk memformat teks tersebut, anda gunakan layar properti teks. Jika
kotak properti itu belum tampak dilayar, anda dapat menampilkannya dengan
menggunakan menu window lalu properties. Atau bisa juga dengan short cut
dengan menekan Ctrl+F3.
Dengan properti teks, anda dapat juga membuat list (daftar) berurut
(orderred list) dan daftar tanpa berurutan (unordered list). Daftar berurut dapat
menggunakan tanda penomoran dengan angka atau huruf. Daftar tanpa
berurutan menggunakan tanda bulatan atau kotak.
1. Ketik teks seperti pada gambar 1.
2. Gunakan untuk ke baris berikutnya
3. Sorot text ”Workshop Dramweaver”
4. Melalui properties beri ketentuan sebagai berikut:
5. Sorot text “selamat datang di website kami”
6. Melalui properties beri ketentuan seperti berikut

13. 15
2.2.4 Memasukkan Gambar
Sebelum memasukan gambar, pastikan bahwa gambar tersebut ada di
dalam direktori (root folder) yang sama dengan file html Anda atau di bawah
direktori html tersebut (sub direktori). Semisal Anda buat direktori di
C:/website untuk menyimpan semua file html Anda, maka Anda buat sub
direktori gambar untuk menyimpan semua file gambar, C:/website/gambar.
Kegunakan dari sub direktori khusus gambar tersebut adalah untuk
memudahkan Anda dalam memilih dan memilah file html dan gambar. Akan
terasa lebih bermanfaat jika file html Anda sangat banyak dan tentunya file
gambar Anda akan banyak pula.
1.Klik simbol pada kumpulan object
2.Pilih gambar yang akan dimasukan
3.Pastikan gambar yang Anda pilih berada dalam satu direktori.Bila file belum
Anda copy di root folder site Anda, gambar tidak akan bisa di upload ke server,
walaupun gambar nampak di layar monitor DreamWeaver Anda.
Bila file diluar root folder Anda, akan muncul dialog seperti dibawah ini.
Klik Yes: DreamWeaver akan mengcopy file di root folder site Anda.4.
Gunakan properties untuk meletakkan gambar di tengah (lihat gbr. 2.1)

14. 16
2.2.5 Membuat Hyperlink
Kalau Anda mempunyai lebih dari satu file html maka Anda tentu harus
menggunakan link. Link adalah salah satu tag (perintah) dalam html yang
berfungsi untuk menghubungkan dengan file html atau program yang lain.
Sama seperti waktu akan memasukkan gambar, Anda usahakan berkerja dalam
satu root folder.
Anda dapat membuat link:
- dengan teks: link teks adalah link yang diakses dengan menekan teks yang
dipilih.
- dengan gambar: link gambar adalah link yang diakses dengan menekan
gambar tertentu yang dipilih. Dalam workshop ini, Anda akan membuat link
teks “Enter”:
1. Sorot teks “ENTER”
2. Isi properties dengan ketentuan sbb
Keterangan:
-Link = frame.htm: Dengan menekan text Enter, user akan mendapatkan
halaman kedua yaitu halaman frame.htm. Anda bisa mengetiknya, atau browse
pada simbol disampingnya. Mengenai halaman ini akan dibicarakan di bab
berikutnya.
-Target = _parent: halaman baru akan muncul pada window yang sama
-Target = _blank: halaman baru akan muncul pada window baru

15. 17
Bekerja Dengan Frame
Masih ingat? Jika user klik “Enter” pada halaman index maka akan
muncul halaman kedua. Bila Anda mengikuti petunjuk step by step bab ini,
Anda akan membuat halaman seperti di bawah ini:
Halaman diatas sebetulnya menggunakan Frame (kerangka) yang terdiri dari
tiga html-file, seperti yang tertera pada gambar 3.2:
-Top : berisi file top.htm,
-Left : berisi file left.htm,
-Content : berubah-ubah, berisi file bab1_1.htm atau bab2_1.htm.
Dengan Frame Anda bisa mendapatkan seperti ini:
-Bila Anda klik Bab 1 , maka akan muncul bab 1 di bagian content
-Sedangkan bila Anda klik Bab 2, bab 1 akan berganti bab 2 di bagian content

16. 18
2.3.1 Menyiapkan file untuk dimasukkan ke frame
Sebelum membuat dan mengisi frame siapkan dulu file yang diperlukan:
- top.htm
- content.htm
- left.htm
File Bab1.htm / Bab2.htm
1. Insert text (copy paste misalnya) untuk file bab1
2. Ubah penampilan textdengan properties
3. Save as bab1.htm misalnya
Dengan cara yang sama, anda membuat halaman bab2.htm
File left.htm
1. Klik file,pilih new, category basic page

17. 19
2. Insert table:
3. Ubah lebar kolom pertama dengan menggunakan layar properties. Sorot kolom
pertama, masukan di properties: w=20.
4. Isi tabel dengan text home, bab 1, bab 2 dan masukan nav_arrow.gif (panah)
pada kolom pertama.
5. Pastikan anda mebuat tabel berisi text dan gambar seperti dibawah ini:
6. Tentukan links Home = index, bab 1 = bab1.htm, bab 2 = bab2.htm.
7. Tentukan warna background dan margin halaman.
8. Save as left.htm
File Top.htm
1. Insert grafik workshop.gif
2. Tentukan margin halaman top.htmdengan left, top margin = 10 misalnya
3. Save as top.htm

18. 20
2.3.2 Cara Membuat Frame
Tidak setiap frame mempunyai kerangka seperti gambar 3.2. Anda memiliki
pilihan membuat frame seperti di bawah ini misalnya:
Untuk keperluan workshop kita lakukan langkah-langkah berikut:
1. Klik file,pilih new, category frameset
2. Pilih bentuk frame fixed left,nested top:
3. Beri nama frame misalnya frame.htm: save frameset as.
Mengisi Frame
1. Letakkan kursor pada frame bagian atas.
2. Klik file,pilih open in frame, klik top.htm
Dengan cara yang sama anda dapat mengisi kerangka bagian kiri dan tengah.
Mengubah Frame

19. 21
Anda dapat dengan mudah memberi nama, merubah file atau lebar kerangka
bagian atas, kana dan content. Gunakan layar properties:
1. Gunakan bersamaan klik kerangka bagian atas.
2. Beri ketentuan di layar properties seperti:
Dengan cara yang sama anda dapat memanggil layar properties frame kanan
dan tengah.
Beri nama frame kanan dengan FrameName = left, dan frame tengah dengan
FrameName = content. (lihat gambar)
Perhatikan pada layar properties frame content, pilih scroll = default.
Keterangan:
No Resize = lebar dan tinggi kerangka tidak bisa diubah user
No Scroll = tidak disediakan scrollbar
Default Scroll = scrollen akan muncul otomatis bila teks panjang ke bawah.
Scrollen hanya penting untuk kerangka content.
Menentukan Target
Target adalah tempat file-html dibuka. Hal ini sudah kita singgung di bab
sebelumnya bagian hyperlinks. Dua target yang sudah disebut di bab
sebelumnya: _parent dan _blank.
Sekarang anda akan membuat target seperti contoh di bawah ini:
- Bila user klik home, akan muncul halaman index pada window yang sama.
- Bila user klik bab 2, akan muncul halaman bab1.htm di frame content.
- Bila user klik bab 2, akan muncul halaman bab2.htm di frame content.
Pastikan anda berada pada file left.htm
1. Sorot Home
2. Pada properties beri target = _parent
Hyperlink membuka file home di window yang sama
3. Sorot Bab 1

20. 22
4. Pada properties beri Scr = bab1_1.htm
5. Pada properties beri target = content
Hyperlink Bab 1 membuka file bab1_1 di frame content
6. Lakukan hal yang sama pada Bab 2
Keterangan:
Target harus sama dengan nama frame yang anda buat. Perhatikan
penulisan besar dan kecil.
Tips untuk mengindari kekeliruan: sebaiknya memberi nama file dan frame
gunakan semuanya huruf kecil.

21. 23
Daftar pustaka
http://www.scribd.com/doc/13766913/Step-by-Step-Membuat-Website-Dengan-Mudah