Ringkasan dokumen tersebut adalah sebagai berikut: 1. Dokumen tersebut memberikan panduan langkah-langkah dasar dalam membuat dan memanipulasi halaman web menggunakan perangkat lunak Dreamweaver. 2. Langkah-langkah tersebut meliputi pembuatan template halaman, pengeditan isi, penggunaan tabel, penambahan video, dan pembuatan tautan antarhalaman. 3. Tujuan dari bahan ajaran tersebut adalah membekali peserta den

1. Judul : Membuat dan Memanipulasi Halaman Web Dengan
Dreamweaver
Tujuan : Setelah menyelesaikan bahasan ini, peserta harus
dapat:
1. Membuat template halaman web
2. Membuat isi dan memanipulasinya
3. Menggunkan menu ‘table’
4. Mengganti dan memasukkan video
5. Membuat link ke halaman web lain
Waktu : 1 x 30 menit
Bahan dan peralatan yang digunakan :
1. Komputer minimal Pentium 4
2. CPU
3. Monitor
4. Software dreamweaver
5. Video dan file yang mendukung (gambar)
Keselamatan Kerja : a. Pergunakan alat kerja sesuai dengan
fungsinya b. Jangan bercanda
dalam pelaksanaan praktek c.
Gunakan alas kaki (sepatu) dari bahan karet dan tebal
e. Selalu menghindari anggota tubuh dari bahaya
listrik
Teori Singkat
1. Pengertian Web
Secara terminologi, website adalah kumpulan dari halaman-
halaman situs, yang biasanya terangkum dalam sebuah domain
atau subdomain, yang tempatnya berada di dalam World Wide
Web (WWW) di Internet.
Sebuah halaman web adalah dokumen yang ditulis dalam format
HTML (Hyper Text Markup Language), yang hampir selalu bisa
diakses melalui HTTP, yaitu protokol yang menyampaikan informasi
dari server website untuk ditampilkan kepada para pemakai melalui
web browser, seperti firefox, opera, internet explore, dsb.
Job
01
SK. 4 Mengelola Isi Halaman Web
KD. 4.3 Mengedit Informasi Sesuai Dengan Kebutuhan

2. Website merupakan sebuah cara untuk menampilkan apa yang
Anda inginkan di Internet. Siapa saja di dunia ini dapat
mengunjunginya, kapan saja mereka dapat mengaksesnya, tak
terbatas oleh ruang dan waktu selama si pengakses ada perangkat
keras yang digunakan seperti komputer atau laptop dan ada
koneksi internet.
2. Jenis-jenis Web
Begitu pesatnya perkembangan teknologi informasi sehingga dalam
perjalanannya, website mengalami perkembangan-perkembangan
dan pembagian berbagai macam jenisnya. Berikut adalah macam-
macam website :
2.1. Jenis-jenis website berdasarkan sifatnya :
 Web dinamis : merupakan website yang kontennya sering
diperbarui, dan pengunjung bisa berinteraksi melalui web ini
seperti misal memberikan komentar, menulis artikel. Jadi disini
terjadi interasi dua arah. Contohnya : www.kompas.com,
www.eramuslim.com
 Web statis : merupakan website yang kontennya sangat
jarang diubah, pengunjung hanya bisa melihat dan mengambil
sesuatu dari web tersebut (download), akan tetapi pengunjung
tidak bisa melakukan proses pengiriman (upload) seperti tidak
ada fasilitas komentar, tulis artikel, polling, dsb. Jadi interaksi
hanya berlangsung satu arah, dari website kepada
pengunjung.
2.2. Jenis-jenis website berdasarkan tujuannya :
• Personal Web : website milik perseorangan yang berisi
tentang informasi pribadi seseorang
• Corporate Web : website yang dimiliki oleh perusahaan
• Portal web : website yang memiliki banyak layanan
seperti layanan berita, email, upload file, posting tulisan,
download. Misal : peserta.ppsdms.com, papirus.ugm.ac.id

3. • Forum web : sebuah website yang bertujuan sebagai
forum diskusi dan share info. Misalnya : ww.kaskuk.us
• Disamping itu ada juga website seperti e-Bangking, e-
Payment, e-Ticketing
2.3. Jenis-jenis website berdasarkan bahasa pemrograman yang
digunakan :
• Server Side : website yang menggunakan bahasa
pemrograman kepada tersedianya server. Seperti PHP,
ASP dan lain sebagainya. Jika tidak ada server maka
website yang dibangun menggunakan bahasa
pemrograman tersebut tidak bisa berjalan sebagaimana
mestinya.
• Client Side : website yang tidak membutuhkan server
dalam pengaksesannya, bisa langsung diakses dengan
browser saja. Misalnya : html
3. Langkah Kerja
Dreamweaver merupakan sebuah HTML editor professional yang
digunakan untuk mendesain secara visual dan mengelola situs web
beserta halaman web.
Langkah untuk membuat halaman Web sebagai berikut :
• Membuat folder utama yang akan diisi dengan semua file
yang dibutuhkan untuk membuat situs
• Mendefinisikan situs
• Membuat file index.html dan file-file lain yang dibutuhkan
untuk hyperlink
• Mempublish situs
Berikut ini akan ditunjukkan langkah-langkah mengelola halaman
web dengan menggunakan bahan-bahan (file gambar, video, teks)
yang telah disediakan oleh Macromedia Dreamweaver 8 dalam
folder cafe_townsend.

4. a. Membuat folder utama
1. Buatlah folder baru dengan nama local_sites di drive E.
2. Buka C:Program FilesMacromediaDreamweaver
8Tutorial_assets cafe_townsend.
3. Copy folder cafe_townsend ke dalam folder local_sites.
Folder cafe_townsend adalah folder yang akan digunakan
sebagai folder utama (main folder) untuk situs lokal yang akan
dibuat
b. Mendefinisikan situs
Setelah menyiapkan folder tempat menyimpan semua file yang
akan digunakan untuk membuat situs, langkah selanjutnya
adalah mendefinisikan situs yang akan dibuat.
c. Membuat file index.html
Setelah mendefinisikan site, langkah selanjutnya adalah
membuat file index.html, yang merupakan file utama dalam
membangun sebuah halaman web.

5. hasil yang ingin dicapai adalah halaman web seperti dibawah
ini :
4. Mengelola Halaman Web
a. Membuat table
Pilih Insert Table. Pada kotak dialog Insert Table
1. Ketikkan 1 pada kotak Rows dan 3 pada kotak Column
Ketikkan 700 pada kotak Table Width.
Pilih Pixels pada menu pop-up Table Width.
Ketikkan 0 pada kotak Border Thickness, Cell Padding dan
Cell Spacing
2. Ketikkan 1 pada kotak Rows dan 1 pada kotak Column
Ketikkan 700 pada kotak Table Width.
Pilih Pixels pada menu pop-up Table Width.
Ketikkan 0 pada kotak Border Thickness, Cell Padding dan
Cell Spacing
kita bisa mengaturnya dengan properties sehingga muncul
menjadi seperti dibawah ini

6. b. Memasukkan gambar
Image placeholder adalah grafik yang digunakan sampai dengan
grafik atau gambar
akhir siap digunakan dalam halaman web. Image placeholder
sangat bermanfaat dalam menyiapkan tata letak halaman web
yang berisi gambar, sebelum gambar yang akan digunakan
benar-benar siap.
1. Klik dalam baris pertama tabel pertama
2. Pilih Insert > Image Objects > Image Placeholder.
3. Pada kotak Image Placeholder, isikan berikut ini::
• ketik banner_graphic pada kotak Name.
• Isikan 700 pada kotak Width dan 90 pada kotak
Height.
• Klik kotak color box dan pilih warna pada color picker.
Pilih reddish
• brown (#993300).
• Klik OK.
• Simpan halaman web tersebut, File save.
Memberi warna pada halaman
Untuk memberi warna, aturlah bagian pager properties
Mengisi image placeholder
• Dobel-klik image placeholder, banner_graphic, pada
bagian atas halaman.
• Pada kotak Select Image Source, cari folder images yang
berada dalam folder
• cafe_townsend.
• Pilih file banner_graphic.jpg dan klik OK.

7. c. Memasukkan animasi flash
Memasukkan dan menjalankan file Flash
File Flash yang akan dimasukkan adalah flexible messaging
area atau file ‘fma’
o Klik di baris kedua pada tabel pertama
o Pada Property inspector (Window > Properties), pilih
Center pada menu pop-up
o Horz dan pilih Middle pada menu pop-up Vert.
o Pilih Insert -> Media -> Flash.
o Pada kotak Select File, pilih file flash_fma.swf, dan klik OK
o Saat kotak Object Tag Accessibility Attributes muncul, klik
OK.
o Pada Property inspector (Window > Properties), klik Play.
d. Memasukkan video
o Klik di atas gambar street_sign.jpg dalam kolom kedua
pada tabel kedua
o Pilih Insert -> Media -> Flash Video.
o Pada kotak Insert Flash Video, pilih Progressive Download
Video dari pop-up menu Video type.
o Pada kotak URL text box, klik browse untuk menentukan
folder yang berisi file cafe_townsend_home.flv,
o Pilih Halo Skin 2 pada pop-up menu Skin.

8. o Pada kotak Width isi 180 dan pada kotak Height isikan
135.
e. Memasukkan body text
o Memilih menu File Open , cari file tersebut (di folder
cafe_townsend)
o Tekan tombol Control+A untuk memilih seluruh teks. Pilih
Edit -> Copy untuk mengcopy teks.
o Tutup file sample_text.txt
o Pada halaman index.html, klik di kolom ketiga tabel kedua
(tabel yang berisi 3 kolom)
o Pilih Edit -> Paste.
Pada Property inspector (Window > Properties), pilih Top dari
pop-up menu
Vert.

9. f. Memasukkan text navigasi
Teks navigasi adalah teks yang memuat link, yang akan
mengarahkan ke dokumen lain.
o klik pada kolom pertama pada tabel yang berisi 3 kolom
o ketikkan kata Cuisine.
o tekan spasi dan ketikkan kata Chef Ipsum.
o ulangi langkah tersebut untuk kata-kata berikut: Articles,
Special Events, Location, Menu, Contact Us.
Jangan menekan Enter pada saat mengetik kata-kata tersebut.
Gunakan spasi untuk memisahkan antar kata, teks akan
ditempatkan secara otomatis sesuai dengan lebar tabel.
Klik tag <td> di bagian kiri bawah, pada Property inspector
(Window > Properties), pilih Top dari pop-up menu Vert,
kemudian Simpan.
g. Membuat link
Sebuah link adalah referensi pada sebuah halaman yang
merujuk pada dokumen lain.
Langkah-langkah membuat link adalah sebagai berikut:
o Pilih kata ‘Cuisine’
o Pada Property inspector (Window > Properties), klik ikon
folder di dekat kotak Link.
o Pada kotak Select File, cari file menu.html, klik OK
o Hasilnya, kata Cuisine akan bergaris bawah dan berwarna
biru yang mengindikasikan teks tersebut adalah link.
o Ulangi langkah-langkah 1- 3 untuk kata-kata Chef Ipsum,
Articles, Special Events, Location, Menu, dan Contact Us.
o Simpan kembali file index.html.
h. Mem-preview halaman web
1. Pastikan file index.html sudah terbuka
2. Tekan tombol F12 pada keyboard

10. Maka akan ditampilkan halaman web pada browser Mozilla
seperti berikut.
Langkah Kerja :
1. Siapkan alat dan bahan yang diperlukan dan letakkan di atas
papan kerja
2. Nyalakan komputer di meja kalian kemudian buatlah halaman web
sesuai dengan urutan langkah diatas.
3. Lakukan pengamatan
4. Catatlah setiap langkah dan permasalahan pada table yang telah
disediakan
5. Kemudian lakukan langkah perbaikan
6. Jika sudah yakin benar laporan setiap hasil analisis dan
pemeriksaan kepada guru
7. Mengembalikan alat dan bahan pada tempat semula
8. Bersihkan meja dan ruangan
Evaluasi
1. Jelaskan macam-macam web?
…………………………………………………………………………
…………………………………………………………………………
…………………………………………………………………………
…………………………………………………………………………
…………………………………………………………………………

11. …………………………………………………………………………
…………………………………………..
2. Buatlah sebuah halaman web dan Isilah table berikut :
3. Buatlah kesimpulan dari praktkum yang telah dilakukan.
…………………………………………………………………………
…………………………………………………………………………
…………………………………………………………………………
…………………………………………………………………………
…………………………………………………………………………
…………………………………………………………………………
…………………………………………..
1. Hasil pengamatan
No Langkah kerja yang dilakukan Gambar hasil tiap langkah kerja
Tanggal :
SMK
NEGERI 1
Padang
Prog. Keahlian :
Nama Peserta :
Kelas/Group :
Disusun :
JOB Ke :