Josheet MMK2 Pratikum

7/22/2019 Josheet MMK2 Pratikum

1/14

SMK N 2 Bukittinggi Lembaran : Job Sheet

Kelas : XI Mata Pelajaran : Produktif Multimedia

Semester : Genap Topik : Macromedia Dreamweaver

Waktu : 2 x 50 Judul : Mengoperasikan Macromedia

Dreamweaver

by: Rezi Mutiara Fenorita

Standar Kompetensi : Desain Web Statis Dan Dinamis

Kompetensi Dasar : Pembuatan Web Dinamis

A. Tujuan Pembelajaran1. Siswa mampu mepersiapka softwear dinamis.2. Siswa mampu membuat dan memdisain halaman web dinamis.3. Siswa mampu menghubungkan antar halaman web (link).4. Siswa mampu melakukan pengujian halaman web dinamis.

B. Alat dan Bahan1. PC (Personal Computer)2. Aplikasi Macromedia Dreamweaver3. Job Sheet

C. Materi SingkatWeb Dinamis adalah sebuah web yang isinya bisa dirubah sewaktu-waktu tanpa melalui

perubahan code pada file web, akan tetapi melalui sebuah halaman administrator. Content yang

tampil dalam Web Dinamis pun tersimpan pada sebuah database, sehingga orang awam pun bisa

merubah isi dari web (content) tanpa menguasai Bahasa Pemrograman Web. Biasanya web ini

tersusun dari beberapa bahasa pemrograman yaitu HTML, PHP, CSS dan tentunya terhubung

dengan database MySQL.

Macromedia Dreamweaver is sebuah editor HTML profesional untuk mendesain secara visual

dan mengelola website dan halaman web. Konsep WYSYWIG (What You See IS What You Get) HTML

(HyperText Mark-up Language) akan memberikan anda membuat membuat halaman web dan web

sites secara mudah dan cepat. Tetapi dibalik semuanya itu, dreamweaver juga memberikan anda

kemudahan mempelajari DHTML (Dynamic HTML), yang bisa membuat website lebih menarik dan

lebih interaktif. Tidak hanya berhenti disini, dreamweaver juga mempunyai fasilitas FTP (File

Transfer Protocol) untuk upload situs anda ke Internet ketika proses desain sudah selesai dibuat.
http://www.chivaz.net/2012/01/pengertian-dan-perbedaan-web-statis-dan.htmlhttp://www.chivaz.net/2012/01/pengertian-dan-perbedaan-web-statis-dan.htmlhttp://www.chivaz.net/2012/01/pengertian-dan-perbedaan-web-statis-dan.htmlhttp://www.chivaz.net/2012/01/pengertian-dan-perbedaan-web-statis-dan.htmlhttp://www.chivaz.net/2012/01/pengertian-dan-perbedaan-web-statis-dan.htmlhttp://www.chivaz.net/2012/01/pengertian-dan-perbedaan-web-statis-dan.html


2/14





Dreamweaver


Mengenal Peralatan Kerja Macromedia Dreamweaver

1. Starter Page Dimana terdapat pilihan seperti membuka dokumen lama, membuat dokumen baru sesuai

bahasa pemograman yang kita inginkan. Seperti gambar di bawah ini.

2. Halaman Kerja macromedia Dreamweaver

Document

Window


3/14





Dreamweaver


Document Window

Document windows menampilkan dokument dari halaman web yang aktif, atau dokumen yang sedang

diedit. Pada Document Window terdapat Title Bar yang menampilkan judul halaman, fasilitas Zoom,

Document Toolbar, dan Tag Selector.

Menu Bar

Menu bar pada Adobe Dreamweaver yaitu File, Edit, View, Insert, Modify, Format, Commands, Site,

Window, dan Help. Setiap menu mempunyai beberapa submenu sesuai dengan kategorinya, selain itu

juga mempunyai fungsi yang berbeda-beda.

Document Toolbar

Document

ToolbarMenubar Panel Group

Tag Selector Propertiy Inspector


4/14





Dreamweaver


Dokumen Toolbar berisi tombol-tombol yang digunakan untuk mengatur layar kerja dokumen pada

dengan cepat, diantaranya show Code view, Show Code and Design views, dan Show Design view.

Tag Selector

Tag selector berfungsi untuk menampilkan tag HTML dari objek yang terseleksi. Kita dapat meng-klik

untuk memilih keseluruhan elemen dokumen. Tag Selector ini terdapat pada Document

Window, dan terletak di bawah sebelah kiri.

Panel Groups

Panel groups merupakan salah satu fasilitas yang terdapat pada Macromedia Dreamweaver yang

berfungsi untuk membantu dalam mengedit suatu halaman web. Panel Groups terletak di sebelah kanan

layar kerja dan terdiri dari beberapa panel. Untuk menampilkan panel, klik ganda pada nama panel

tersebut.

D. Langkah Kerja1. Buka aplikasi Macromedia Dreamweaver , setelah muncul starter page pada bagian Create New

pilih HTML. Maka akan muncul halaman kerja Macromedia Dreamweaver kita.

2. Ganti title dari document kita menjadi home

3. Tambah kan table pada halaman jerja dengan cara klik icon kemudian setting tableseperti gambar di bawah ini. Kemudian Klik Ok.


5/14





Dreamweaver


4. Maka akan terlihat tampilan table kita seperti gambar dibawah ini.

5. Ubah ukuran table pada Property Inspector W : 1100px dan H : 700 px seperti pada gambar.

6. Setelah selesai lakukan penyatuan pada table-tabel kita denagan menggunakan Merges SelectedCell Using Spans

7. Buat lah table anda sehingga memiliki tampilan seperti di bawah ini


6/14





Dreamweaver


8. Langkah selan jutnya adalah mengganti background web kita dengan cara pada documenttoolbar pilih code kemudian isikan kode berikut dibawah Home


7/14





Dreamweaver


11.Pilih header yang akan kita gunakan kemudian klik ok.

12.Pada Imeg Tag Accessibility Attributes kita klik Ok. Sehingga muncul tampilan seperti dibawahini.


8/14





Dreamweaver


13.Selanjutnya untuk mebuat tempat button pada kolom pertama baris kedua tabel kita klik,kemudian kita tambahkan tabel seberti setting di bawah ini.

14.Maka akan terlihat tampilan seperti dibawah ini.


9/14





Dreamweaver


15.Kemudian lakukan point 10, 11 dan 12 pada setiap kolom yang kita tambahkan.16. Atur setiap ukuran button W 250 dan H 100 , sehingga muncul tampilan seperti berikut.

17.Selanjutnya pada kolom kedua baris kedua , kita masukan teks dan atur settingnya sesuaikeinginan pada property inspector. Seperti tampilan di bawah ini.


10/14





Dreamweaver


18.Selanjutnya pada kolom ketiga baris kedua kita inputkan animasi gif dengan cara yang samapada poin 10, 11 dan 12. Sehinnga muncul tampilan seperti dibawah ini.

19.Selanjutnya simpan file tadi dengan nama home.html pada folder

20.Klik ikon file yang kita simpan pada folder tadi . Maka akan muncul tampilan seperti dibawah ini.


11/14





Dreamweaver


21.Selanjutnya buka file profile.html yang terdapat pada folder kita pada folder dengan caraklik>Open kemudian pilih file Profil yang akan kita buka selanjutnya klik Open.

22.Lakukan pengeditan pada isi profile.

23.Selanjutnya kita akan membuatkan link pada button kita. Dengan cara buka halaman home> klikbutton home pada property inspector pada link klik browse for file.

browse for file

24.Kemudian pilih file home.html yang akan di jadikan link kita > klik oke.


12/14





Dreamweaver


25.Lakukan hal yang sama pada setiap button pada setiap halaman. Pada button profil berikan linkprofile.html.

26.Setelah selesai, save semua halama kerja kita tadi. Kemudian coba jalankan Klik ikon home padafolder kita.

27.Dan coba klik tiap tiapan button yang telah kita link kan. Maka button tersebut apa bila kita klikakan menampilkan halaman web lain sesuai dengan judulnya.


13/14





Dreamweaver


E. PenugasanBuatlah sebuah halaman web dengan judul Galeri yang pada isinya terdapat video dan link untukmendownload video tersebut. Kemudian gabungkan halaman tersebut dengan halaman web yang

telah kita kerjakan sebelumnya. Disainlah halaman web tersrsebut seperti tampilan di bawah ini.


14/14





Dreamweaver


F. Lembaran EvaluasiNama Siswa :Kelas :

No Aspek Penilaian Standar Nilai Nilai Diperoleh Keterangan

1 Periapan sebelum pratikum 10

2 Menjalankan Macromedia Dreamweaver 20

3 Mendisain halaman web 30

4 Membuat Link antar halaman 30

5 Menjalankan halaman web 10

Total Skor 100

Catatan :

Josheet MMK2 Pratikum

Documents